{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "steps",
  "title": "Steps",
  "description": "A shadcn-style steps component built with Ark UI primitives.",
  "dependencies": ["@ark-ui/react"],
  "files": [
    {
      "path": "src/components/ui/steps.tsx",
      "content": "\"use client\";\n\nimport { Steps as StepsPrimitive, useSteps } from \"@ark-ui/react/steps\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type StepsProps = StepsPrimitive.RootProps;\n\nexport const Steps = ({ className, ...props }: StepsProps) => (\n  <StepsPrimitive.Root\n    data-slot=\"steps\"\n    className={cn(\n      \"flex w-full\",\n      \"data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:gap-4\",\n      \"data-[orientation=vertical]:flex-row data-[orientation=vertical]:gap-6\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport const StepsList = ({\n  className,\n  ...props\n}: StepsPrimitive.ListProps) => (\n  <StepsPrimitive.List\n    data-slot=\"steps-list\"\n    className={cn(\n      \"flex items-center gap-2\",\n      \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-start data-[orientation=vertical]:gap-0\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport const StepsItem = ({\n  className,\n  ...props\n}: StepsPrimitive.ItemProps) => (\n  <StepsPrimitive.Item\n    data-slot=\"steps-item\"\n    className={cn(\n      \"group relative flex flex-1 items-center gap-2\",\n      \"last:flex-initial last:**:data-[part=separator]:hidden\",\n      \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n      \"data-[orientation=vertical]:items-start data-[orientation=vertical]:pb-8 data-[orientation=vertical]:last:pb-0\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport const StepsTrigger = ({\n  className,\n  ...props\n}: StepsPrimitive.TriggerProps) => (\n  <StepsPrimitive.Trigger\n    data-slot=\"steps-trigger\"\n    className={cn(\n      \"inline-flex cursor-pointer items-center gap-3 rounded-md bg-transparent p-0 text-left outline-none transition-all\",\n      \"focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n      \"disabled:pointer-events-none disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport const StepsIndicator = ({\n  className,\n  children,\n  ...props\n}: StepsPrimitive.IndicatorProps) => (\n  <StepsPrimitive.Indicator\n    data-slot=\"steps-indicator\"\n    className={cn(\n      \"inline-flex size-8 shrink-0 items-center justify-center rounded-full text-sm font-medium transition-colors\",\n      \"data-incomplete:bg-muted data-incomplete:text-muted-foreground\",\n      \"data-current:bg-primary data-current:text-primary-foreground\",\n      \"data-complete:bg-accent data-complete:text-accent-foreground\",\n      \"[&_svg]:size-4 [&_svg]:shrink-0\",\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </StepsPrimitive.Indicator>\n);\n\nexport const StepsSeparator = ({\n  className,\n  ...props\n}: StepsPrimitive.SeparatorProps) => (\n  <StepsPrimitive.Separator\n    data-slot=\"steps-separator\"\n    className={cn(\n      \"shrink-0 rounded-full bg-muted transition-colors\",\n      \"data-complete:bg-primary\",\n      \"data-[orientation=horizontal]:mx-2 data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:flex-1\",\n      \"data-[orientation=vertical]:absolute data-[orientation=vertical]:left-3.75 data-[orientation=vertical]:top-10 data-[orientation=vertical]:bottom-2 data-[orientation=vertical]:w-0.5\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport const StepsContent = ({\n  className,\n  ...props\n}: StepsPrimitive.ContentProps) => (\n  <StepsPrimitive.Content\n    data-slot=\"steps-content\"\n    className={cn(\n      \"rounded-lg border border-border p-4 text-sm\",\n      \"data-[orientation=vertical]:flex-1\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport const StepsCompletedContent = ({\n  className,\n  ...props\n}: StepsPrimitive.CompletedContentProps) => (\n  <StepsPrimitive.CompletedContent\n    data-slot=\"steps-completed-content\"\n    className={cn(\n      \"flex items-center justify-center rounded-lg border border-border p-6 text-center text-sm font-medium text-primary\",\n      \"data-[orientation=vertical]:flex-1\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport const StepsTitle = ({ className, ...props }: ComponentProps<\"span\">) => (\n  <span\n    data-slot=\"steps-title\"\n    className={cn(\"text-sm font-semibold whitespace-nowrap\", className)}\n    {...props}\n  />\n);\n\nexport const StepsDescription = ({\n  className,\n  ...props\n}: ComponentProps<\"span\">) => (\n  <span\n    data-slot=\"steps-description\"\n    className={cn(\"text-xs text-muted-foreground\", className)}\n    {...props}\n  />\n);\n\nexport const StepsPrevTrigger = ({\n  className,\n  ...props\n}: StepsPrimitive.PrevTriggerProps) => (\n  <StepsPrimitive.PrevTrigger\n    data-slot=\"steps-prev-trigger\"\n    className={className}\n    {...props}\n  />\n);\n\nexport const StepsNextTrigger = ({\n  className,\n  ...props\n}: StepsPrimitive.NextTriggerProps) => (\n  <StepsPrimitive.NextTrigger\n    data-slot=\"steps-next-trigger\"\n    className={className}\n    {...props}\n  />\n);\n\nexport const StepsProgress = ({\n  className,\n  ...props\n}: StepsPrimitive.ProgressProps) => (\n  <StepsPrimitive.Progress\n    data-slot=\"steps-progress\"\n    className={cn(\n      \"h-1 w-full overflow-hidden rounded-full bg-muted\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport const StepsContext = StepsPrimitive.Context;\n\nexport const StepsRootProvider = (props: StepsPrimitive.RootProviderProps) => (\n  <StepsPrimitive.RootProvider {...props} />\n);\n\nexport type {\n  UseStepsProps,\n  UseStepsReturn,\n} from \"@ark-ui/react/steps\";\nexport { useSteps };\n",
      "type": "registry:ui",
      "target": "src/components/ui/steps.tsx"
    }
  ],
  "type": "registry:ui"
}