{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "stepper",
  "title": "Stepper",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/stepper/Stepper.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLAttributes } from 'svelte/elements'\n  import type { StepperOrientation, StepperSize } from './context'\n  import type { StepperStep } from './types'\n\n  // Omit children: ours takes render params, the base Snippet takes none.\n  export interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n    steps?: StepperStep[]\n    /** Controlled active step (1-based). Bind with `bind:value`. */\n    value?: number\n    orientation?: StepperOrientation\n    size?: StepperSize\n    /** Override the header strip (defaults to the steps list). */\n    stepsSnippet?: Snippet\n    children?: Snippet<[{ activeStep: number; steps: StepperStep[] }]>\n    ref?: HTMLDivElement | null\n    onValueChange?: (value: number) => void\n    /** Fires with the 1-based step index on every step click that navigates (alongside `onValueChange`). */\n    onStepClick?: (stepIndex: number) => void\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n  import { setStepperContext, type StepperStatus } from './context'\n  import StepperItem from './StepperItem.svelte'\n\n  let {\n    class: className,\n    steps = [],\n    value = $bindable(1),\n    orientation = 'horizontal',\n    size = 'default',\n    stepsSnippet,\n    children,\n    ref = $bindable(null),\n    onValueChange,\n    onStepClick,\n    ...restProps\n  }: StepperProps = $props()\n\n  function getStatus(index: number): StepperStatus {\n    const step = steps[index]\n    if (step?.error) return 'error'\n    if (index + 1 === value) return 'active'\n    if (index + 1 < value) return 'completed'\n    return 'pending'\n  }\n\n  function isClickable(index: number): boolean {\n    return index + 1 < value\n  }\n\n  export function goToStep(stepIndex: number) {\n    if (stepIndex < 1 || stepIndex > steps.length) return\n    const step = steps[stepIndex - 1]\n    if (step?.disabled) return\n    value = stepIndex\n    onValueChange?.(stepIndex)\n    onStepClick?.(stepIndex)\n  }\n\n  setStepperContext({\n    orientation: () => orientation,\n    size: () => size,\n    activeStep: () => value,\n    steps: () => steps,\n    goToStep,\n    isClickable,\n    getStatus,\n  })\n</script>\n\n<div\n  bind:this={ref}\n  class={cn('w-full', className)}\n  role=\"tablist\"\n  aria-orientation={orientation}\n  data-orientation={orientation}\n  data-uipkge=\"\"\n  data-slot=\"stepper\"\n  {...restProps}\n>\n  {#if stepsSnippet}\n    {@render stepsSnippet()}\n  {:else if steps.length > 0}\n    <ol class={cn('flex', orientation === 'horizontal' ? 'flex-row items-start' : 'flex-col items-stretch')}>\n      {#each steps as step, index (step.id)}\n        <StepperItem {step} {index} />\n      {/each}\n    </ol>\n  {/if}\n\n  {#if children}\n    <div class=\"mt-6 flex-1\">\n      {@render children({ activeStep: value, steps })}\n    </div>\n  {/if}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/stepper/Stepper.svelte"
    },
    {
      "path": "packages/registry-svelte/components/stepper/StepperItem.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n  import type { StepperStep } from './types'\n\n  export interface StepperItemProps extends HTMLAttributes<HTMLLIElement> {\n    step: StepperStep\n    index: number\n    ref?: HTMLLIElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n  import { getStepperContext, type StepperContextValue } from './context'\n  import StepperIndicator from './StepperIndicator.svelte'\n\n  let { class: className, step, index, ref = $bindable(null), ...restProps }: StepperItemProps = $props()\n\n  const maybeCtx = getStepperContext()\n  if (!maybeCtx) throw new Error('StepperItem must be used inside <Stepper>')\n  const ctx: StepperContextValue = maybeCtx\n\n  const status = $derived(ctx.getStatus(index))\n  const orientation = $derived(ctx.orientation())\n  const size = $derived(ctx.size())\n  const isFirst = $derived(index === 0)\n  const isLast = $derived(index === ctx.steps().length - 1)\n  const clickable = $derived(ctx.isClickable(index) && !step.disabled)\n\n  // Indicator row must match stepperIndicatorVariants sizes (sm 7 / default 9 / lg 11).\n  // Full class strings so Tailwind's scanner keeps them.\n  const indicatorAxisClass = $derived.by(() => {\n    if (orientation === 'horizontal') {\n      return { sm: 'h-7 w-full items-center justify-center', default: 'h-9 w-full items-center justify-center', lg: 'h-11 w-full items-center justify-center' }[size]\n    }\n    return { sm: 'w-7 flex-col items-center justify-start self-stretch', default: 'w-9 flex-col items-center justify-start self-stretch', lg: 'w-11 flex-col items-center justify-start self-stretch' }[size]\n  })\n\n  // A connector \"segment\" is the line drawn between this indicator and the\n  // adjacent one. We split it into left/right halves so each item owns its\n  // own piece — they butt up at item boundaries for pixel alignment.\n  const leftSegmentCompleted = $derived(index < ctx.activeStep())\n  const rightSegmentCompleted = $derived(index < ctx.activeStep() - 1)\n\n  function handleNavigate() {\n    if (clickable) ctx.goToStep(index + 1)\n  }\n</script>\n\n<li\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"stepper-item\"\n  class={cn(\n    'group/stepper-item relative min-w-0',\n    orientation === 'horizontal' ? 'flex flex-1 flex-col items-center gap-2' : 'flex flex-row items-start gap-3 pb-6 last:pb-0',\n    step.disabled && 'opacity-50',\n    className,\n  )}\n  role=\"tab\"\n  aria-selected={status === 'active'}\n  aria-disabled={step.disabled || undefined}\n  data-status={status}\n  {...restProps}\n>\n  <div class={cn('relative flex shrink-0', indicatorAxisClass)}>\n    {#if !isFirst}\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"stepper-connector\"\n        data-orientation={orientation}\n        data-edge={orientation === 'horizontal' ? 'left' : 'top'}\n        class={cn(\n          'bg-border pointer-events-none absolute overflow-hidden',\n          orientation === 'horizontal' ? 'top-1/2 right-1/2 left-0 h-px -translate-y-1/2' : 'top-0 bottom-1/2 left-1/2 w-px -translate-x-1/2',\n        )}\n      >\n        <span data-slot=\"stepper-connector-fill\" data-completed={leftSegmentCompleted ? 'true' : 'false'} data-orientation={orientation} class=\"bg-primary absolute inset-0\"></span>\n      </span>\n    {/if}\n    {#if !isLast}\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"stepper-connector\"\n        data-orientation={orientation}\n        data-edge={orientation === 'horizontal' ? 'right' : 'bottom'}\n        class={cn(\n          'bg-border pointer-events-none absolute overflow-hidden',\n          orientation === 'horizontal' ? 'top-1/2 right-0 left-1/2 h-px -translate-y-1/2' : 'top-1/2 bottom-0 left-1/2 w-px -translate-x-1/2',\n        )}\n      >\n        <span data-slot=\"stepper-connector-fill\" data-completed={rightSegmentCompleted ? 'true' : 'false'} data-orientation={orientation} class=\"bg-primary absolute inset-0\"></span>\n      </span>\n    {/if}\n\n    <StepperIndicator\n      {status}\n      {size}\n      index={index + 1}\n      icon={step.icon}\n      {clickable}\n      class=\"focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none\"\n      onclick={handleNavigate}\n    />\n  </div>\n\n  <div data-slot=\"stepper-item-content\" class={cn('min-w-0', orientation === 'horizontal' ? 'max-w-[12rem] text-center' : 'flex-1 pt-1.5')}>\n    <button\n      type=\"button\"\n      class={cn(\n        'text-foreground text-sm font-medium text-balance transition-colors duration-200 outline-none',\n        clickable && 'hover:text-primary focus-visible:text-primary focus-visible:ring-ring cursor-pointer focus-visible:ring-2 focus-visible:outline-none',\n        !clickable && 'cursor-default',\n        status === 'pending' && 'text-muted-foreground',\n        status === 'error' && 'text-destructive',\n      )}\n      disabled={!clickable}\n      onclick={handleNavigate}\n    >\n      {step.title}\n    </button>\n    {#if step.description}\n      <p class=\"text-muted-foreground mt-0.5 text-xs text-balance\">{step.description}</p>\n    {/if}\n  </div>\n</li>\n\n<style>\n  /* Connector progress: fill scales along the track with a soft ease. */\n  [data-slot='stepper-connector-fill'] {\n    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);\n  }\n\n  [data-slot='stepper-connector-fill'][data-orientation='horizontal'] {\n    transform-origin: left center;\n    transform: scaleX(0);\n  }\n\n  [data-slot='stepper-connector-fill'][data-orientation='horizontal'][data-completed='true'] {\n    transform: scaleX(1);\n  }\n\n  [data-slot='stepper-connector-fill'][data-orientation='vertical'] {\n    transform-origin: center top;\n    transform: scaleY(0);\n  }\n\n  [data-slot='stepper-connector-fill'][data-orientation='vertical'][data-completed='true'] {\n    transform: scaleY(1);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-slot='stepper-connector-fill'] {\n      transition: none !important;\n    }\n  }\n</style>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/stepper/StepperItem.svelte"
    },
    {
      "path": "packages/registry-svelte/components/stepper/StepperIndicator.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLButtonAttributes } from 'svelte/elements'\n  import type { StepperSize, StepperStatus } from './context'\n  import type { IconComponent } from './types'\n\n  export interface StepperIndicatorProps extends HTMLButtonAttributes {\n    status?: StepperStatus\n    size?: StepperSize\n    index?: number\n    icon?: IconComponent\n    clickable?: boolean\n    ref?: HTMLButtonElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { Check, X } from '@lucide/svelte'\n  import { cn } from '$lib/utils'\n  import { stepperIndicatorVariants } from './stepper.variants'\n\n  let {\n    class: className,\n    status = 'pending',\n    size = 'default',\n    index,\n    icon,\n    clickable = false,\n    children,\n    ref = $bindable(null),\n    onclick,\n    ...restProps\n  }: StepperIndicatorProps = $props()\n\n  const FallbackIcon = $derived(icon ?? (status === 'completed' ? Check : status === 'error' ? X : null))\n</script>\n\n<button\n  bind:this={ref}\n  type=\"button\"\n  data-uipkge=\"\"\n  data-slot=\"stepper-indicator\"\n  data-status={status}\n  class={cn(\n    stepperIndicatorVariants({ status, size }),\n    'ring-background relative z-10 ring-4 transition-[color,background-color,box-shadow,transform] duration-200 outline-none',\n    clickable && 'focus-visible:ring-ring cursor-pointer focus-visible:ring-2 focus-visible:outline-none',\n    !clickable && 'cursor-default',\n    className,\n  )}\n  disabled={!clickable}\n  aria-current={status === 'active' ? 'step' : undefined}\n  {onclick}\n  {...restProps}\n>\n  {#if children}\n    {@render children()}\n  {:else if FallbackIcon}\n    <FallbackIcon class=\"size-4\" data-slot=\"stepper-indicator-icon\" aria-hidden=\"true\" />\n  {:else if index !== undefined}\n    <span class=\"font-medium\" data-slot=\"stepper-indicator-label\">{index}</span>\n  {/if}\n</button>\n\n<style>\n  @keyframes stepper-indicator-pop {\n    0% {\n      transform: scale(0.92);\n    }\n    55% {\n      transform: scale(1.06);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n\n  /* Same curve as pop; distinct name so status changes re-trigger. */\n  @keyframes stepper-indicator-fill {\n    0% {\n      transform: scale(0.92);\n    }\n    55% {\n      transform: scale(1.06);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n\n  @keyframes stepper-indicator-error {\n    0% {\n      transform: scale(0.92);\n    }\n    55% {\n      transform: scale(1.06);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n\n  @keyframes stepper-icon-in {\n    from {\n      opacity: 0;\n      transform: scale(0.6);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  /* One-shot pop when a step becomes active / completed / error.\n     Distinct animation names so active→completed restarts the pop. */\n  [data-slot='stepper-indicator'][data-status='active'] {\n    animation: stepper-indicator-pop 280ms cubic-bezier(0.22, 1.4, 0.36, 1) both;\n  }\n\n  [data-slot='stepper-indicator'][data-status='completed'] {\n    animation: stepper-indicator-fill 280ms cubic-bezier(0.22, 1.4, 0.36, 1) both;\n  }\n\n  [data-slot='stepper-indicator'][data-status='error'] {\n    animation: stepper-indicator-error 280ms cubic-bezier(0.22, 1.4, 0.36, 1) both;\n  }\n\n  /* Check / error / custom icon settles in with the fill. The icon renders\n     inside a child component, so its half of the selector is :global — the\n     indicator half stays scoped. */\n  [data-slot='stepper-indicator'][data-status='completed'] :global([data-slot='stepper-indicator-icon']),\n  [data-slot='stepper-indicator'][data-status='error'] :global([data-slot='stepper-indicator-icon']),\n  [data-slot='stepper-indicator'][data-status='active'] :global([data-slot='stepper-indicator-icon']) {\n    animation: stepper-icon-in 220ms cubic-bezier(0.22, 1.2, 0.36, 1) both;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-slot='stepper-indicator'],\n    [data-slot='stepper-indicator'] :global([data-slot='stepper-indicator-icon']),\n    [data-slot='stepper-indicator'] [data-slot='stepper-indicator-label'] {\n      animation: none !important;\n      transition: none !important;\n    }\n  }\n</style>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/stepper/StepperIndicator.svelte"
    },
    {
      "path": "packages/registry-svelte/components/stepper/StepperHeader.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface StepperHeaderProps extends HTMLAttributes<HTMLDivElement> {\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: StepperHeaderProps = $props()\n</script>\n\n<div bind:this={ref} class={cn('stepper-header flex items-center gap-0', className)} {...restProps}>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/stepper/StepperHeader.svelte"
    },
    {
      "path": "packages/registry-svelte/components/stepper/StepperContent.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface StepperContentProps extends HTMLAttributes<HTMLDivElement> {\n    step?: number\n    activeStep?: number\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, step = 1, activeStep = 1, children, ref = $bindable(null), ...restProps }: StepperContentProps =\n    $props()\n\n  const isActive = $derived(step === activeStep)\n</script>\n\n<div\n  bind:this={ref}\n  hidden={!isActive || undefined}\n  data-slot=\"stepper-content\"\n  class={cn(\n    'stepper-content motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-bottom-1 motion-safe:duration-200 motion-safe:ease-out',\n    className,\n  )}\n  role=\"tabpanel\"\n  aria-hidden={!isActive}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/stepper/StepperContent.svelte"
    },
    {
      "path": "packages/registry-svelte/components/stepper/StepperTitle.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface StepperTitleProps extends HTMLAttributes<HTMLSpanElement> {\n    ref?: HTMLSpanElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: StepperTitleProps = $props()\n</script>\n\n<span bind:this={ref} class={cn('text-foreground text-sm font-medium', className)} {...restProps}>\n  {@render children?.()}\n</span>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/stepper/StepperTitle.svelte"
    },
    {
      "path": "packages/registry-svelte/components/stepper/StepperDescription.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface StepperDescriptionProps extends HTMLAttributes<HTMLSpanElement> {\n    ref?: HTMLSpanElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: StepperDescriptionProps = $props()\n</script>\n\n<span bind:this={ref} class={cn('text-muted-foreground text-xs', className)} {...restProps}>\n  {@render children?.()}\n</span>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/stepper/StepperDescription.svelte"
    },
    {
      "path": "packages/registry-svelte/components/stepper/StepperStep.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLAttributes } from 'svelte/elements'\n  import type { StepperStatus } from './context'\n  import type { IconComponent } from './types'\n\n  export interface StepperStepProps extends HTMLAttributes<HTMLDivElement> {\n    title: string\n    description?: string\n    icon?: IconComponent\n    completed?: boolean\n    active?: boolean\n    error?: boolean\n    disabled?: boolean\n    status?: StepperStatus\n    index?: number\n    /** Render overrides for the indicator icon, title, and description. */\n    iconSnippet?: Snippet\n    titleSnippet?: Snippet\n    descriptionSnippet?: Snippet\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { Check } from '@lucide/svelte'\n  import { cn } from '$lib/utils'\n  import { stepperIndicatorVariants } from './stepper.variants'\n\n  let {\n    class: className,\n    title,\n    description,\n    icon,\n    completed = false,\n    active = false,\n    error = false,\n    disabled = false,\n    status,\n    index,\n    iconSnippet,\n    titleSnippet,\n    descriptionSnippet,\n    children,\n    ref = $bindable(null),\n    ...restProps\n  }: StepperStepProps = $props()\n\n  const computedStatus = $derived.by(() => {\n    if (status) return status\n    if (error) return 'error'\n    if (active) return 'active'\n    if (completed) return 'completed'\n    return 'pending'\n  })\n\n  const Icon = $derived(icon ?? (computedStatus === 'completed' ? Check : null))\n</script>\n\n<div bind:this={ref} class={cn('stepper-step flex gap-3', className)} role=\"tab\" aria-selected={active} aria-disabled={disabled} {...restProps}>\n  <div data-slot=\"stepper-indicator\" data-status={computedStatus} class={cn(stepperIndicatorVariants({ status: computedStatus, size: 'default' }))}>\n    {#if iconSnippet}\n      {@render iconSnippet()}\n    {:else if Icon}\n      <Icon class=\"size-4\" data-slot=\"stepper-indicator-icon\" aria-hidden=\"true\" />\n    {:else if index}\n      <span data-slot=\"stepper-indicator-label\">{index}</span>\n    {/if}\n  </div>\n\n  <div class=\"flex flex-col gap-0.5 pt-1\">\n    {#if titleSnippet}\n      {@render titleSnippet()}\n    {:else}\n      <span class=\"text-sm font-medium\">{title}</span>\n    {/if}\n    {#if descriptionSnippet}\n      {@render descriptionSnippet()}\n    {:else if description}\n      <span class=\"text-muted-foreground text-xs\">{description}</span>\n    {/if}\n    {@render children?.()}\n  </div>\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/stepper/StepperStep.svelte"
    },
    {
      "path": "packages/registry-svelte/components/stepper/context.ts",
      "content": "import { getContext, setContext } from 'svelte'\nimport type { StepperStep } from './types'\n\nexport type StepperOrientation = 'horizontal' | 'vertical'\nexport type StepperStatus = 'active' | 'completed' | 'pending' | 'error'\nexport type StepperSize = 'sm' | 'default' | 'lg'\n\n/**\n * Stepper state shared from <Stepper> to its items. Exposed as functions so\n * reads inside child templates/`$derived` track the root's runes state.\n */\nexport interface StepperContextValue {\n  orientation: () => StepperOrientation\n  size: () => StepperSize\n  activeStep: () => number\n  steps: () => StepperStep[]\n  goToStep: (stepIndex: number) => void\n  isClickable: (index: number) => boolean\n  getStatus: (index: number) => StepperStatus\n}\n\nconst KEY = Symbol.for('uipkge:stepper')\n\nexport function setStepperContext(value: StepperContextValue): StepperContextValue {\n  setContext(KEY, value)\n  return value\n}\n\nexport function getStepperContext(): StepperContextValue | null {\n  return getContext<StepperContextValue | null>(KEY) ?? null\n}\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/stepper/context.ts"
    },
    {
      "path": "packages/registry-svelte/components/stepper/stepper.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\n/**\n * Variant definitions live in their own file (rather than the package\n * `index.ts`) so `StepperIndicator.vue` / `StepperStep.vue` can import\n * them without creating a circular dependency back through the index.\n * Sibling pattern to `card/card.variants.ts`.\n */\nexport const stepperIndicatorVariants = cva('flex items-center justify-center rounded-full font-semibold shrink-0', {\n  variants: {\n    status: {\n      pending: 'bg-muted text-muted-foreground',\n      active: 'bg-primary text-primary-foreground shadow-sm',\n      completed: 'bg-primary text-primary-foreground',\n      error: 'bg-destructive text-destructive-foreground',\n    },\n    size: {\n      sm: 'size-7 text-xs [&>svg]:size-3.5',\n      default: 'size-9 text-sm [&>svg]:size-4',\n      lg: 'size-11 text-base [&>svg]:size-5',\n    },\n  },\n  defaultVariants: {\n    status: 'pending',\n    size: 'default',\n  },\n})\n\nexport type StepperIndicatorVariants = VariantProps<typeof stepperIndicatorVariants>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/stepper/stepper.variants.ts"
    },
    {
      "path": "packages/registry-svelte/components/stepper/types.ts",
      "content": "import type { Component } from 'svelte'\n\n/** Loose icon-component type (mirrors Vue's `Component`): any component accepting a class. */\nexport type IconComponent = Component<Record<string, any>>\n\nexport interface StepperStep {\n  id: string | number\n  title: string\n  description?: string\n  icon?: IconComponent\n  disabled?: boolean\n  error?: boolean\n}\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/stepper/types.ts"
    },
    {
      "path": "packages/registry-svelte/components/stepper/index.ts",
      "content": "export { default as Stepper, type StepperProps } from './Stepper.svelte'\nexport { default as StepperHeader, type StepperHeaderProps } from './StepperHeader.svelte'\nexport { default as StepperItem, type StepperItemProps } from './StepperItem.svelte'\nexport { default as StepperIndicator, type StepperIndicatorProps } from './StepperIndicator.svelte'\nexport { default as StepperContent, type StepperContentProps } from './StepperContent.svelte'\nexport { default as StepperTitle, type StepperTitleProps } from './StepperTitle.svelte'\nexport { default as StepperDescription, type StepperDescriptionProps } from './StepperDescription.svelte'\nexport { default as StepperStep, type StepperStepProps } from './StepperStep.svelte'\nexport type { StepperStep as StepperStepConfig, IconComponent } from './types'\nexport type { StepperOrientation, StepperSize, StepperStatus } from './context'\nexport { stepperIndicatorVariants, type StepperIndicatorVariants } from './stepper.variants'\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/stepper/index.ts"
    }
  ],
  "dependencies": [
    "@lucide/svelte",
    "class-variance-authority"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Multi-step indicator — horizontal or vertical, with completed / current / upcoming states and optional descriptions per step. Use for onboarding wizards and checkout flows.",
  "categories": [
    "navigation"
  ]
}