{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sf-stepper",
  "title": "SF Stepper",
  "description": "Vertical multi-step flow with SFProgress connectors and per-step error state",
  "dependencies": [
    "gsap",
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/sf/sf-stepper.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Check, AlertCircle } from \"lucide-react\";\nimport { SFProgress } from \"./sf-progress\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * SFStepper -- SIGNAL layer vertical multi-step flow component.\n *\n * Renders a vertical sequence of steps with SFProgress connectors\n * between them. Each step has a status indicator (square, not circle)\n * and optional label/description. Connectors use actual SFProgress\n * instances for GSAP-driven fill animation.\n *\n * @param activeStep - Zero-based index of the current active step\n * @param children - SFStep elements\n * @param className - Additional classes on root container\n *\n * @example\n * <SFStepper activeStep={1}>\n *   <SFStep status=\"complete\" label=\"Account\" description=\"Create your account\" />\n *   <SFStep status=\"active\" label=\"Profile\" description=\"Set up your profile\" />\n *   <SFStep status=\"pending\" label=\"Review\" description=\"Review and submit\" />\n * </SFStepper>\n *\n * <SFStepper activeStep={2}>\n *   <SFStep status=\"complete\" label=\"Upload\" />\n *   <SFStep status=\"error\" label=\"Validate\" description=\"3 errors found\" />\n *   <SFStep status=\"pending\" label=\"Publish\" />\n * </SFStepper>\n */\n\ntype StepStatus = \"pending\" | \"active\" | \"complete\" | \"error\";\n\ninterface SFStepperProps {\n  activeStep: number;\n  children: React.ReactNode;\n  className?: string;\n}\n\ninterface SFStepProps {\n  status?: StepStatus;\n  label?: string;\n  description?: string;\n  children?: React.ReactNode;\n  className?: string;\n}\n\nfunction getConnectorValue(status: StepStatus): number {\n  switch (status) {\n    case \"complete\":\n      return 100;\n    case \"active\":\n      return 50;\n    case \"error\":\n      return 100;\n    case \"pending\":\n    default:\n      return 0;\n  }\n}\n\nfunction SFStepper({ activeStep: _activeStep, children, className }: SFStepperProps) {\n  const steps = React.Children.toArray(children);\n\n  return (\n    <div\n      role=\"group\"\n      aria-label=\"Progress steps\"\n      className={cn(\"flex flex-col\", className)}\n    >\n      {steps.map((step, index) => {\n        const isLast = index === steps.length - 1;\n        const stepElement = step as React.ReactElement<SFStepProps>;\n        const status = stepElement.props?.status ?? \"pending\";\n\n        return (\n          <React.Fragment key={index}>\n            {step}\n            {!isLast && (\n              <div className=\"flex justify-center py-1 pl-4\">\n                <SFProgress\n                  value={getConnectorValue(status)}\n                  className={cn(\n                    \"h-8 w-1 [writing-mode:vertical-lr]\",\n                    status === \"error\" && \"bg-destructive/20 [&_[data-slot=progress-indicator]]:bg-destructive\"\n                  )}\n                />\n              </div>\n            )}\n          </React.Fragment>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction SFStep({\n  status = \"pending\",\n  label,\n  description,\n  children,\n  className,\n}: SFStepProps) {\n  return (\n    <div\n      role=\"listitem\"\n      data-status={status}\n      className={cn(\"flex items-start gap-3\", className)}\n    >\n      {/* Step indicator -- square, not circle */}\n      <div\n        className={cn(\n          \"flex h-8 w-8 shrink-0 items-center justify-center rounded-none border-2 border-foreground font-mono text-xs\",\n          status === \"complete\" && \"bg-primary text-primary-foreground border-primary\",\n          status === \"active\" && \"bg-foreground text-background\",\n          status === \"error\" && \"bg-destructive text-destructive-foreground border-destructive\",\n          status === \"pending\" && \"bg-transparent text-foreground\"\n        )}\n        aria-hidden=\"true\"\n      >\n        {status === \"complete\" && <Check className=\"size-4\" />}\n        {status === \"error\" && <AlertCircle className=\"size-4\" />}\n        {(status === \"active\" || status === \"pending\") && null}\n      </div>\n\n      {/* Step content */}\n      <div className=\"flex flex-col justify-center min-h-8\">\n        {label && (\n          <span className=\"font-mono uppercase tracking-wider text-sm leading-tight\">\n            {label}\n          </span>\n        )}\n        {description && (\n          <span className=\"text-muted-foreground text-xs mt-0.5\">\n            {description}\n          </span>\n        )}\n        {children}\n      </div>\n    </div>\n  );\n}\n\nexport { SFStepper, SFStep };\nexport type { StepStatus, SFStepperProps, SFStepProps };\n",
      "type": "registry:ui"
    }
  ],
  "meta": {
    "layer": "signal",
    "pattern": "C"
  },
  "type": "registry:ui"
}