{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stepper-16",
  "title": "Vertical stepper with titles",
  "description": "A title beside each step of a vertical stepper.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/stepper.json",
    "https://ui.ndekocode.dev/r/theme.json",
    "https://ui.ndekocode.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/stepper/stepper-16.tsx",
      "content": "import { cn } from '@/registry/ndeko/lib/utils';\nimport {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from '@/registry/ndeko/ui/stepper';\n\nconst STEPS = [\n  { step: 1, title: 'Account' },\n  { step: 2, title: 'Workspace' },\n  { step: 3, title: 'Invite team' },\n  { step: 4, title: 'Choose plan' },\n];\n\nconst SEPARATOR =\n  'absolute inset-y-0 top-[calc(1.5rem+0.125rem)] left-3 -order-1 m-0 -translate-x-1/2 group-data-[orientation=horizontal]/stepper:w-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=horizontal]/stepper:flex-none group-data-[orientation=vertical]/stepper:h-[calc(100%-1.5rem-0.25rem)]';\n\nconst CONNECTOR = [\n  'relative group-data-[state=completed]/step:bg-foreground/10',\n  'after:bg-primary after:absolute after:inset-0 after:origin-top after:scale-y-0 after:rounded-full after:transition-[scale] after:duration-200 after:ease-out-strong',\n  'group-data-[state=completed]/step:after:scale-y-100 group-data-[state=completed]/step:after:duration-300',\n].join(' ');\n\nexport default function Stepper16() {\n  return (\n    <Stepper defaultValue={2} orientation='vertical'>\n      {STEPS.map(({ step, title }) => (\n        <StepperItem\n          key={step}\n          step={step}\n          className='relative items-start not-last:flex-1'\n        >\n          <StepperTrigger className='items-start rounded-md pb-12 last:pb-0'>\n            <StepperIndicator />\n            <div className='mt-0.5 px-2 text-left'>\n              <StepperTitle>{title}</StepperTitle>\n            </div>\n          </StepperTrigger>\n          {step < STEPS.length && (\n            <StepperSeparator className={cn(CONNECTOR, SEPARATOR)} />\n          )}\n        </StepperItem>\n      ))}\n    </Stepper>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "stepper"
  ],
  "type": "registry:component"
}