{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stepper",
  "title": "Stepper",
  "description": "The nx-ui Stepper component.",
  "dependencies": [
    "@untitledui/icons@^0.0.22"
  ],
  "registryDependencies": [
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/ui/stepper.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check } from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * Stepper (progress steps) — the Untitled UI horizontal/vertical stepper.\n *\n * Steps are joined by connector lines and rendered with number, icon or dot\n * markers. Each step is `complete`, `current` or `upcoming`; completed markers\n * fill brand with a check, the current marker rings brand, and connector\n * segments before the current step fill brand. Built from plain divs + tokens\n * per the report's spec (no single vendored file).\n *\n * Controlled via `activeStep` (zero-based index of the current step).\n */\n\ntype Step = {\n  title: string\n  description?: string\n  /** Optional custom marker icon (overrides the number/dot marker). */\n  icon?: React.ComponentType<{ className?: string }>\n}\n\ntype StepState = \"complete\" | \"current\" | \"upcoming\"\n\nfunction stateOf(index: number, activeStep: number): StepState {\n  if (index < activeStep) return \"complete\"\n  if (index === activeStep) return \"current\"\n  return \"upcoming\"\n}\n\nfunction Marker({\n  state,\n  marker,\n  index,\n  icon: Icon,\n}: {\n  state: StepState\n  marker: \"number\" | \"icon\" | \"dot\"\n  index: number\n  icon?: React.ComponentType<{ className?: string }>\n}) {\n  if (marker === \"dot\") {\n    return (\n      <span\n        data-slot=\"stepper-marker\"\n        className={cn(\n          \"flex size-6 shrink-0 items-center justify-center rounded-full\",\n          state === \"complete\" && \"bg-primary\",\n          state === \"current\" && \"ring-4 ring-ring/20\",\n          state !== \"complete\" && \"bg-transparent\"\n        )}\n      >\n        <span\n          className={cn(\n            \"size-2.5 rounded-full\",\n            state === \"complete\" && \"bg-primary-foreground\",\n            state === \"current\" && \"bg-primary\",\n            state === \"upcoming\" && \"size-2 bg-bg-quaternary\"\n          )}\n        />\n      </span>\n    )\n  }\n\n  return (\n    <span\n      data-slot=\"stepper-marker\"\n      className={cn(\n        \"flex size-8 shrink-0 items-center justify-center rounded-full text-sm font-semibold transition\",\n        state === \"complete\" && \"bg-primary text-primary-foreground\",\n        state === \"current\" &&\n          \"bg-bg-brand-primary text-text-brand-primary ring-2 ring-ring/60 ring-offset-2 ring-offset-background\",\n        state === \"upcoming\" && \"text-text-quaternary ring-1 ring-border ring-inset\"\n      )}\n    >\n      {state === \"complete\" ? (\n        <Check className=\"size-4 stroke-[2.5px]\" />\n      ) : marker === \"icon\" && Icon ? (\n        <Icon className=\"size-4\" />\n      ) : (\n        index + 1\n      )}\n    </span>\n  )\n}\n\nfunction Stepper({\n  steps,\n  activeStep = 0,\n  orientation = \"horizontal\",\n  marker = \"number\",\n  className,\n  ...props\n}: React.ComponentProps<\"ol\"> & {\n  steps: Step[]\n  /** Zero-based index of the current step. */\n  activeStep?: number\n  orientation?: \"horizontal\" | \"vertical\"\n  marker?: \"number\" | \"icon\" | \"dot\"\n}) {\n  const vertical = orientation === \"vertical\"\n\n  return (\n    <ol\n      data-slot=\"stepper\"\n      data-orientation={orientation}\n      className={cn(\n        \"flex\",\n        vertical ? \"flex-col\" : \"w-full items-start\",\n        className\n      )}\n      {...props}\n    >\n      {steps.map((step, index) => {\n        const state = stateOf(index, activeStep)\n        const isLast = index === steps.length - 1\n        // The connector after a step is \"filled\" once that step is complete.\n        const connectorFilled = index < activeStep\n\n        return (\n          <li\n            key={index}\n            aria-current={state === \"current\" ? \"step\" : undefined}\n            className={cn(\n              \"flex\",\n              vertical ? \"gap-4\" : \"flex-1 flex-col items-center last:flex-none\"\n            )}\n          >\n            {vertical ? (\n              <div className=\"flex flex-col items-center self-stretch\">\n                <Marker\n                  state={state}\n                  marker={marker}\n                  index={index}\n                  icon={step.icon}\n                />\n                {!isLast && (\n                  <span\n                    aria-hidden=\"true\"\n                    className={cn(\n                      \"my-1 w-0.5 flex-1 rounded-full\",\n                      connectorFilled ? \"bg-primary\" : \"bg-border\"\n                    )}\n                  />\n                )}\n              </div>\n            ) : (\n              <div className=\"flex w-full items-center\">\n                <Marker\n                  state={state}\n                  marker={marker}\n                  index={index}\n                  icon={step.icon}\n                />\n                {!isLast && (\n                  <span\n                    aria-hidden=\"true\"\n                    className={cn(\n                      \"mx-2 h-0.5 flex-1 rounded-full\",\n                      connectorFilled ? \"bg-primary\" : \"bg-border\"\n                    )}\n                  />\n                )}\n              </div>\n            )}\n\n            <div\n              className={cn(\n                vertical ? \"pb-8 last:pb-0\" : \"mt-3 text-center\",\n                marker === \"dot\" && !vertical && \"mt-2\"\n              )}\n            >\n              <p\n                className={cn(\n                  \"text-sm font-semibold\",\n                  state === \"upcoming\"\n                    ? \"text-text-quaternary\"\n                    : \"text-secondary-foreground\"\n                )}\n              >\n                {step.title}\n              </p>\n              {step.description ? (\n                <p className=\"text-sm text-text-tertiary\">{step.description}</p>\n              ) : null}\n            </div>\n          </li>\n        )\n      })}\n    </ol>\n  )\n}\n\nexport { Stepper }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}