Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182<script module lang="ts"> import { tv, type VariantProps } from "tailwind-variants";
export const formStep = tv({ slots: { root: "relative flex gap-md pl-xl", marker: "absolute -left-3", body: "flex-1", title: "typography-paragraph-large font-medium text-foreground-default", description: "mb-md typography-paragraph-small text-foreground-muted" }, variants: { connected: { true: { root: "border-l border-border-default" }, false: { root: "" } }, last: { true: { root: "[border-image:linear-gradient(var(--color-border-default),transparent)_1]" }, false: { root: "" } }, spacing: { regular: { root: "pb-3xl" }, none: { root: "" } }, markerAlign: { top: { marker: "top-0" }, middle: { marker: "top-1/2 -translate-y-1/2" } } }, defaultVariants: { connected: true, last: false, spacing: "regular", markerAlign: "top" } });
export type FormStepVariants = VariantProps<typeof formStep>;</script>
<script lang="ts"> import type { Snippet } from "svelte"; import StepMarker from "$lib/components/ui/StepMarker.svelte";
interface Props { step: number; title: string; description?: string; connected?: FormStepVariants["connected"]; last?: FormStepVariants["last"]; spacing?: FormStepVariants["spacing"]; class?: string; children: Snippet; }
let { step, title, description, connected, last, spacing, class: className, children }: Props = $props();
const slot = $derived(formStep({ connected, last, spacing }));</script>
<div class={slot.root({ class: className })}> <StepMarker class={slot.marker()}>{step}</StepMarker> <div class={slot.body()}> <h2 class={slot.title()}>{title}</h2> {#if description} <p class={slot.description()}>{description}</p> {/if} {@render children()} </div></div>