{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stepper",
  "title": "Stepper",
  "description": "Step indicator for multi-step flows with horizontal/vertical orientation and completed/active/warning/pending states.",
  "dependencies": ["lucide-react"],
  "registryDependencies": [
    "https://indiacn.in/r/theme.json",
    "https://indiacn.in/r/typography.json"
  ],
  "files": [
    {
      "path": "components/ui/stepper.tsx",
      "content": "'use client';\n\nimport { AlertTriangle, Check } from 'lucide-react';\nimport { ComponentProps, createContext, useContext } from 'react';\n\nimport { Label1, Label2 } from '@/components/ui/typography';\nimport { cn } from '@/lib/utils';\n\n/*\n * UX4G stepper:\n * icon size: 1.938rem (~31px), font-size 0.875rem, font-weight 500\n * completed icon: color #9E9E9E, border 1px solid #E0E0E0\n * done icon: bg #3C9718 with checkmark SVG\n * connector line: 1px solid #C6C6C6, done: #3C9718\n * head-text color: #212121\n * vertical connector: left 2.45rem, width 1px\n * horizontal padding: 1.5rem\n */\n\ninterface IStepperContext {\n  activeStep: number;\n  orientation: 'horizontal' | 'vertical';\n}\n\nconst STEPPER_CONTEXT = createContext<IStepperContext>({\n  activeStep: 0,\n  orientation: 'horizontal',\n});\n\ninterface IStepperProps extends ComponentProps<'ul'> {\n  activeStep?: number;\n  orientation?: 'horizontal' | 'vertical';\n}\n\n/**\n * A stepper component for displaying progress through a multi-step process.\n * Matches the UX4G 2.0 Stepper specification.\n *\n * Uses semantic `<ul>/<li>` elements per UX4G.\n * Supports horizontal/vertical, completed/done/warning/active/pending states.\n */\nfunction Stepper({\n  className,\n  activeStep = 0,\n  orientation = 'horizontal',\n  children,\n  ...props\n}: IStepperProps) {\n  return (\n    <STEPPER_CONTEXT.Provider value={{ activeStep, orientation }}>\n      <ul\n        className={cn(\n          'relative m-0 flex w-full gap-0 overflow-hidden p-0',\n          orientation === 'horizontal' ? 'flex-row justify-between' : 'flex-col',\n          className,\n        )}\n        style={{ listStyle: 'none' }}\n        {...props}\n      >\n        {children}\n      </ul>\n    </STEPPER_CONTEXT.Provider>\n  );\n}\n\ninterface IStepProps extends ComponentProps<'li'> {\n  step: number;\n  title?: string;\n  description?: string;\n  status?: 'completed' | 'active' | 'warning' | 'pending';\n  isLast?: boolean;\n}\n\n/**\n * Individual step within a Stepper.\n * UX4G icon: 1.938rem, connector: 1px #C6C6C6, done connector: #3C9718.\n */\nfunction Step({ className, step, title, description, status, isLast, ...props }: IStepProps) {\n  const { activeStep, orientation } = useContext(STEPPER_CONTEXT);\n\n  const resolvedStatus =\n    status ?? (step < activeStep ? 'completed' : step === activeStep ? 'active' : 'pending');\n\n  const isCompleted = resolvedStatus === 'completed';\n  const isActive = resolvedStatus === 'active';\n  const isWarning = resolvedStatus === 'warning';\n\n  return (\n    <li\n      className={cn(\n        'relative flex h-fit',\n        orientation === 'horizontal' ? 'h-18 flex-auto items-center' : 'flex-col',\n        className,\n      )}\n      {...props}\n    >\n      <div\n        className={cn(\n          'flex items-center text-inherit no-underline',\n          orientation === 'horizontal' ? 'px-6' : 'px-6 py-6',\n        )}\n      >\n        {/* Step icon - UX4G: 1.938rem = ~31px */}\n        <div\n          className={cn(\n            'flex size-[1.938rem] shrink-0 items-center justify-center rounded-full text-[0.875rem] font-medium transition-colors',\n            orientation === 'horizontal' && 'my-6 mr-2',\n            orientation === 'vertical' && 'mr-3',\n            isCompleted && 'border-success bg-success border text-white',\n            isActive && 'border-primary text-primary border-2 bg-transparent',\n            isWarning && 'border-danger text-danger border bg-transparent',\n            !isCompleted && !isActive && !isWarning && 'border border-neutral-200 text-neutral-400',\n          )}\n        >\n          {isCompleted ? (\n            <Check className='size-3.5' strokeWidth={3} />\n          ) : isWarning ? (\n            <AlertTriangle className='size-3.5' />\n          ) : (\n            <Label2>{step + 1}</Label2>\n          )}\n        </div>\n        {/* Step text */}\n        {(title || description) && (\n          <div className='flex flex-col'>\n            {title && (\n              <Label1\n                className={cn(\n                  'text-sm leading-[1.3]',\n                  isCompleted && 'text-neutral font-medium',\n                  isActive && 'text-primary font-medium',\n                  isWarning && 'text-danger',\n                  !isCompleted && !isActive && !isWarning && 'text-neutral',\n                )}\n              >\n                {title}\n              </Label1>\n            )}\n            {description && <Label2 className='text-xs text-neutral-500'>{description}</Label2>}\n          </div>\n        )}\n        {/* Horizontal connector line after icon+text */}\n        {orientation === 'horizontal' && !isLast && (\n          <div className={cn('ml-2 h-px flex-1', isCompleted ? 'bg-success' : 'bg-neutral-200')} />\n        )}\n      </div>\n      {/* Vertical connector line */}\n      {orientation === 'vertical' && !isLast && (\n        <div\n          className={cn(\n            'absolute left-[2.45rem] w-px',\n            isCompleted ? 'bg-success' : 'bg-neutral-200',\n          )}\n          style={{ top: '3.25rem', height: 'calc(100% - 2.45rem)' }}\n        />\n      )}\n    </li>\n  );\n}\n\nexport { Stepper, Step };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}