{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stepper-12",
  "title": "Inline titles and descriptions",
  "description": "A title and a description beside each step.",
  "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-12.tsx",
      "content": "import { cn } from '@/registry/ndeko/lib/utils';\nimport {\n  Stepper,\n  StepperDescription,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from '@/registry/ndeko/ui/stepper';\n\nconst STEPS = [\n  { step: 1, title: 'Account', description: 'Your name and email' },\n  { step: 2, title: 'Workspace', description: 'Name and web address' },\n  { step: 3, title: 'Invite team', description: 'Add a few teammates' },\n];\n\nconst CONNECTOR = [\n  'relative group-data-[state=completed]/step:bg-foreground/10',\n  'after:bg-primary after:absolute after:inset-0 after:origin-left after:scale-x-0 after:rounded-full after:transition-[scale] after:duration-200 after:ease-out-strong rtl:after:origin-right',\n  'group-data-[state=completed]/step:after:scale-x-100 group-data-[state=completed]/step:after:duration-300',\n].join(' ');\n\nexport default function Stepper12() {\n  return (\n    <Stepper defaultValue={2} className='@container'>\n      {STEPS.map(({ step, title, description }) => (\n        <StepperItem\n          key={step}\n          step={step}\n          className='not-last:flex-1 @max-xl:items-start'\n        >\n          <StepperTrigger className='rounded-md @max-xl:flex-col'>\n            <StepperIndicator />\n            <div className='text-center @xl:text-left'>\n              <StepperTitle>{title}</StepperTitle>\n              <StepperDescription className='@max-md:hidden'>\n                {description}\n              </StepperDescription>\n            </div>\n          </StepperTrigger>\n          {step < STEPS.length && (\n            <StepperSeparator\n              className={cn(CONNECTOR, '@max-xl:mt-3.5 @xl:mx-4')}\n            />\n          )}\n        </StepperItem>\n      ))}\n    </Stepper>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "stepper"
  ],
  "type": "registry:component"
}