{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stepper",
  "title": "Stepper",
  "description": "A composable vertical stepper component with animated indicators, separators, and size variants.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/custom-ui/stepper.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { CheckIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport type StepperSize = \"sm\" | \"default\" | \"lg\";\nexport type StepperStatus = \"complete\" | \"current\" | \"upcoming\";\n\nconst StepperContext = React.createContext<{ size: StepperSize }>({\n  size: \"default\",\n});\n\nconst StepperItemContext = React.createContext<{ status: StepperStatus }>({\n  status: \"upcoming\",\n});\n\nfunction Stepper({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"ol\"> & { size?: StepperSize }) {\n  return (\n    <StepperContext.Provider value={{ size }}>\n      <ol\n        aria-label=\"Progress\"\n        className={cn(\"flex flex-col overflow-hidden\", className)}\n        data-size={size}\n        data-slot=\"stepper\"\n        role=\"list\"\n        {...props}\n      />\n    </StepperContext.Provider>\n  );\n}\n\nfunction StepperItem({\n  className,\n  status = \"upcoming\",\n  ...props\n}: React.ComponentProps<\"li\"> & { status?: StepperStatus }) {\n  const { size } = React.useContext(StepperContext);\n\n  return (\n    <StepperItemContext.Provider value={{ status }}>\n      <li\n        {...(status === \"current\" ? { \"aria-current\": \"step\" as const } : {})}\n        className={cn(\n          \"group/stepper-item relative flex items-center last:pb-0 [&:last-child>[data-slot=stepper-separator]]:hidden\",\n          size === \"sm\" && \"gap-2 pb-4\",\n          size === \"default\" && \"gap-2.5 pb-6\",\n          size === \"lg\" && \"gap-3 pb-8\",\n          className,\n        )}\n        data-slot=\"stepper-item\"\n        data-status={status}\n        {...props}\n      />\n    </StepperItemContext.Provider>\n  );\n}\n\nfunction StepperIndicator({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  const { size } = React.useContext(StepperContext);\n  const { status } = React.useContext(StepperItemContext);\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        \"relative z-10 flex shrink-0 items-center justify-center rounded-full border transition-[background-color,border-color] duration-300 ease-[cubic-bezier(0.2,0,0,1)]\",\n        size === \"sm\" && \"size-4\",\n        size === \"default\" && \"size-5\",\n        size === \"lg\" && \"size-6\",\n        status === \"complete\" && \"border-primary bg-primary\",\n        status === \"current\" && \"border-primary bg-background\",\n        status === \"upcoming\" && \"border-border bg-background\",\n        className,\n      )}\n      data-slot=\"stepper-indicator\"\n      {...props}\n    >\n      <CheckIcon\n        className={cn(\n          \"absolute text-primary-foreground transition-[opacity,scale,filter] duration-300 ease-[cubic-bezier(0.2,0,0,1)]\",\n          size === \"sm\" && \"size-2.5\",\n          size === \"default\" && \"size-3\",\n          size === \"lg\" && \"size-3.5\",\n          status === \"complete\"\n            ? \"scale-100 opacity-100 blur-0\"\n            : \"scale-[0.25] opacity-0 blur-[4px]\",\n        )}\n      />\n      <span\n        className={cn(\n          \"absolute rounded-full bg-primary transition-[opacity,scale,filter] duration-300 ease-[cubic-bezier(0.2,0,0,1)]\",\n          size === \"sm\" && \"size-1\",\n          size === \"default\" && \"size-1.5\",\n          size === \"lg\" && \"size-2\",\n          status === \"current\"\n            ? \"scale-100 opacity-100 blur-0\"\n            : \"scale-[0.25] opacity-0 blur-[4px]\",\n        )}\n      />\n    </div>\n  );\n}\n\nfunction StepperSeparator({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  const { size } = React.useContext(StepperContext);\n  const { status } = React.useContext(StepperItemContext);\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        \"absolute h-full w-px -translate-x-1/2 bg-border\",\n        size === \"sm\" && \"top-4 left-2\",\n        size === \"default\" && \"top-5 left-[10px]\",\n        size === \"lg\" && \"top-6 left-3\",\n        className,\n      )}\n      data-slot=\"stepper-separator\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"h-full w-full origin-top bg-primary transition-[scale] duration-500 ease-[cubic-bezier(0.2,0,0,1)]\",\n          status === \"complete\" ? \"scale-y-100\" : \"scale-y-0\",\n        )}\n      />\n    </div>\n  );\n}\n\nfunction StepperContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex min-w-0 flex-col gap-1\", className)}\n      data-slot=\"stepper-content\"\n      {...props}\n    />\n  );\n}\n\nfunction StepperTitle({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  const { size } = React.useContext(StepperContext);\n  const { status } = React.useContext(StepperItemContext);\n\n  return (\n    <div\n      className={cn(\n        \"font-semibold leading-tight tracking-tight transition-[color] duration-300 ease-[cubic-bezier(0.2,0,0,1)]\",\n        size === \"sm\" && \"text-xs\",\n        size === \"default\" && \"text-sm\",\n        size === \"lg\" && \"text-base\",\n        status === \"upcoming\" && \"text-muted-foreground\",\n        className,\n      )}\n      data-slot=\"stepper-title\"\n      {...props}\n    />\n  );\n}\n\nfunction StepperDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  const { size } = React.useContext(StepperContext);\n  const { status } = React.useContext(StepperItemContext);\n\n  return (\n    <p\n      className={cn(\n        \"text-muted-foreground transition-[opacity] duration-300 ease-[cubic-bezier(0.2,0,0,1)]\",\n        size === \"sm\" && \"text-xs\",\n        size === \"default\" && \"text-xs\",\n        size === \"lg\" && \"text-sm\",\n        status === \"upcoming\" && \"opacity-50\",\n        className,\n      )}\n      data-slot=\"stepper-description\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  Stepper,\n  StepperItem,\n  StepperIndicator,\n  StepperSeparator,\n  StepperContent,\n  StepperTitle,\n  StepperDescription,\n};\n",
      "type": "registry:ui",
      "target": "components/custom-ui/stepper.tsx"
    }
  ],
  "categories": [
    "navigation",
    "progress"
  ],
  "type": "registry:ui"
}