{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "stepper",
	"title": "Stepper",
	"type": "registry:ui",
	"description": "A visual indicator for multi-step processes.",
	"dependencies": [
		"@lucide/svelte@^0.554.0"
	],
	"devDependencies": [
		"@lucide/svelte@^0.544.0"
	],
	"registryDependencies": [
		"button"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from '$UTILS$';\n\timport { setStepperContext } from './ctx';\n\timport type { Snippet } from 'svelte';\n\n\tlet {\n\t\tvalue = $bindable(0),\n\t\torientation = 'horizontal',\n\t\tclass: className,\n\t\tchildren\n\t}: {\n\t\tvalue: number;\n\t\torientation?: 'horizontal' | 'vertical';\n\t\tclass?: string;\n\t\tchildren: Snippet;\n\t} = $props();\n\n\tsetStepperContext({\n\t\tactiveStep: () => value,\n\t\tsetStep: (s: number) => {\n\t\t\tvalue = s;\n\t\t},\n\t\torientation: () => orientation\n\t});\n</script>\n\n<div\n\tclass={cn(\n\t\t'flex w-full gap-4',\n\t\torientation === 'vertical' ? 'flex-col' : 'flex-row items-start justify-between',\n\t\tclassName\n\t)}\n>\n\t{@render children()}\n</div>\n",
			"type": "registry:ui",
			"target": "stepper/stepper.svelte"
		},
		{
			"content": "<script lang=\"ts\">\r\n    import { cn } from \"$UTILS$\";\r\n    import { getStepperContext } from \"./ctx\";\r\n    import type { Snippet } from \"svelte\";\r\n\r\n    let { step, class: className, children }: {\r\n        step: number,\r\n        class?: string,\r\n        children: Snippet\r\n    } = $props();\r\n\r\n    const ctx = getStepperContext();\r\n\r\n    let isCompleted = $derived(step < ctx.activeStep());\r\n    let isActive = $derived(step === ctx.activeStep());\r\n    let isVertical = $derived(ctx.orientation() === \"vertical\");\r\n</script>\r\n\r\n<div\r\n        data-state={isActive ? \"active\" : isCompleted ? \"completed\" : \"inactive\"}\r\n        class={cn(\r\n\t\t\"group flex items-center\",\r\n        !isVertical && \"flex-1 gap-4 last:flex-none\",\r\n        isVertical && \"flex-col items-start relative gap-0\",\r\n\t\tclassName\r\n\t)}\r\n>\r\n    {@render children()}\r\n</div>",
			"type": "registry:ui",
			"target": "stepper/stepper-item.svelte"
		},
		{
			"content": "<script lang=\"ts\">\r\n    import { cn } from \"$UTILS$\";\r\n    import { Button } from \"$lib/components/ui/button\";\r\n    import { getStepperContext } from \"./ctx\";\r\n    import type { Snippet } from \"svelte\";\r\n\r\n    let { step, class: className, children, ...rest }: {\r\n        step: number,\r\n        class?: string,\r\n        children: Snippet,\r\n        [key: string]: any\r\n    } = $props();\r\n\r\n    const ctx = getStepperContext();\r\n    let isVertical = $derived(ctx.orientation() === \"vertical\");\r\n</script>\r\n\r\n<Button\r\n        variant=\"ghost\"\r\n        onclick={() => ctx.setStep(step)}\r\n        class={cn(\r\n        \"flex h-auto items-center justify-center gap-3 p-2 hover:bg-transparent\",\r\n        !isVertical && \"flex-col\",\r\n        isVertical && \"flex-row justify-start\",\r\n        className\r\n    )}\r\n        {...rest}\r\n>\r\n    {@render children()}\r\n</Button>",
			"type": "registry:ui",
			"target": "stepper/stepper-trigger.svelte"
		},
		{
			"content": "<script lang=\"ts\">\r\n\timport { cn } from '$UTILS$';\r\n\timport { Check } from '@lucide/svelte';\r\n\timport { getStepperContext } from './ctx';\r\n\timport type { Snippet } from 'svelte';\r\n\r\n\tlet {\r\n\t\tstep,\r\n\t\tclass: className,\r\n\t\tchildren,\r\n\t\tsuccess\r\n\t}: {\r\n\t\tstep: number;\r\n\t\tclass?: string;\r\n\t\tchildren?: Snippet;\r\n\t\tsuccess?: Snippet;\r\n\t} = $props();\r\n\r\n\tconst ctx = getStepperContext();\r\n\r\n\tlet isCompleted = $derived(step < ctx.activeStep());\r\n\tlet isActive = $derived(step === ctx.activeStep());\r\n</script>\r\n\r\n<div\r\n\tclass={cn(\r\n\t\t'relative flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-semibold transition-colors duration-200',\r\n\t\tisActive && 'border-primary text-primary ring-2 ring-primary/20 ring-offset-2',\r\n\t\tisCompleted && 'border-primary bg-primary text-primary-foreground',\r\n\t\t!isActive && !isCompleted && 'border-muted-foreground/25 text-muted-foreground',\r\n\t\tclassName\r\n\t)}\r\n>\r\n\t{#if isCompleted}\r\n\t\t{#if success}\r\n\t\t\t{@render success()}\r\n\t\t{:else}\r\n\t\t\t<Check class=\"h-5 w-5\" />\r\n\t\t{/if}\r\n\t{:else if children}\r\n\t\t{@render children()}\r\n\t{:else}\r\n\t\t{step + 1}\r\n\t{/if}\r\n</div>\r\n",
			"type": "registry:ui",
			"target": "stepper/stepper-indicator.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from '$UTILS$';\n\timport { getStepperContext } from './ctx';\n\n\tlet { class: className }: { class?: string } = $props();\n\tconst ctx = getStepperContext();\n\tlet isVertical = $derived(ctx.orientation() === 'vertical');\n</script>\n\n<div\n\tclass={cn(\n\t\t'bg-muted flex-1',\n\n\t\t!isVertical && 'h-[2px] -mt-8 ml-4 mr-4',\n\n\t\tisVertical && 'absolute left-[27px] top-14 -bottom-4 w-[2px]',\n\n\t\tclassName\n\t)}\n>\n\t<div\n\t\tclass={cn(\n\t\t\t'bg-primary transition-all duration-200 ease-in-out',\n\t\t\t!isVertical && 'h-full w-full scale-x-0 group-data-[state=completed]:scale-x-100 origin-left',\n\t\t\tisVertical && 'w-full h-full scale-y-0 group-data-[state=completed]:scale-y-100 origin-top'\n\t\t)}\n\t/>\n</div>\n",
			"type": "registry:ui",
			"target": "stepper/stepper-separator.svelte"
		},
		{
			"content": "<script lang=\"ts\">\r\n    import { cn } from \"$UTILS$\";\r\n    import type { Snippet } from \"svelte\";\r\n    let { class: className, children }: { class?: string, children: Snippet } = $props();\r\n</script>\r\n<h3 class={cn(\"text-sm font-medium leading-none\", className)}>{@render children()}</h3>",
			"type": "registry:ui",
			"target": "stepper/stepper-title.svelte"
		},
		{
			"content": "<script lang=\"ts\">\r\n    import { cn } from \"$UTILS$\";\r\n    import type { Snippet } from \"svelte\";\r\n    let { class: className, children }: { class?: string, children: Snippet } = $props();\r\n</script>\r\n<p class={cn(\"text-xs text-muted-foreground\", className)}>{@render children()}</p>",
			"type": "registry:ui",
			"target": "stepper/stepper-description.svelte"
		},
		{
			"content": "import { getContext, setContext } from 'svelte';\n\nconst STEPPER_KEY = Symbol('stepper');\n\ntype StepperContext = {\n\tactiveStep: () => number;\n\tsetStep: (step: number) => void;\n\torientation: () => 'horizontal' | 'vertical';\n};\n\nexport function setStepperContext(props: StepperContext) {\n\tsetContext(STEPPER_KEY, props);\n}\n\nexport function getStepperContext() {\n\treturn getContext<StepperContext>(STEPPER_KEY);\n}\n",
			"type": "registry:ui",
			"target": "stepper/ctx.ts"
		},
		{
			"content": "import Stepper from \"./stepper.svelte\";\r\nimport StepperItem from \"./stepper-item.svelte\";\r\nimport StepperTrigger from \"./stepper-trigger.svelte\";\r\nimport StepperIndicator from \"./stepper-indicator.svelte\";\r\nimport StepperSeparator from \"./stepper-separator.svelte\";\r\nimport StepperTitle from \"./stepper-title.svelte\";\r\nimport StepperDescription from \"./stepper-description.svelte\";\r\n\r\nexport {\r\n    Stepper as Root,\r\n    StepperItem as Item,\r\n    StepperTrigger as Trigger,\r\n    StepperIndicator as Indicator,\r\n    StepperSeparator as Separator,\r\n    StepperTitle as Title,\r\n    StepperDescription as Description,\r\n};",
			"type": "registry:ui",
			"target": "stepper/index.ts"
		}
	]
}