{
  "$schema": "https://abackui.com/schema/registry-item.json",
  "name": "steps",
  "type": "registry:ui",
  "title": "Steps",
  "description": "An ordered sequence with complete, current, and upcoming states for onboarding and how-it-works sections.",
  "dependencies": [
    "@tabler/icons-react"
  ],
  "registryDependencies": [
    "https://abackui.com/r/utils.json"
  ],
  "categories": [
    "Data Display"
  ],
  "docs": "https://abackui.com/docs/components/steps",
  "meta": {
    "status": "beta",
    "usedIn": [
      "aback-launch"
    ]
  },
  "files": [
    {
      "path": "components/ui/steps.tsx",
      "content": "import * as React from \"react\";\nimport { IconCheck } from \"@tabler/icons-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport type StepStatus = \"complete\" | \"current\" | \"upcoming\";\n\nconst statusText: Record<StepStatus, string> = {\n  complete: \"Completed\",\n  current: \"Current step\",\n  upcoming: \"Not started\",\n};\n\nexport interface StepsProps extends React.ComponentProps<\"ol\"> {\n  orientation?: \"vertical\" | \"horizontal\";\n}\n\n/**\n * An ordered sequence: onboarding, a checkout, a \"how it works\" section, or a\n * setup guide. It is an `<ol>`, so the count and position are announced, and\n * numbers come from a CSS counter rather than props.\n */\nfunction Steps({ orientation = \"vertical\", className, ...props }: StepsProps) {\n  return (\n    <ol\n      data-slot=\"steps\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/steps [counter-reset:step]\",\n        orientation === \"vertical\"\n          ? \"flex flex-col\"\n          : \"grid grid-cols-1 gap-6 sm:auto-cols-fr sm:grid-flow-col sm:gap-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface StepProps extends Omit<React.ComponentProps<\"li\">, \"title\"> {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  status?: StepStatus;\n  /** Replaces the sr-only status prefix, for localization. */\n  statusLabel?: string;\n}\n\nfunction Step({\n  title,\n  description,\n  status = \"upcoming\",\n  statusLabel,\n  className,\n  children,\n  ...props\n}: StepProps) {\n  return (\n    <li\n      data-slot=\"step\"\n      data-status={status}\n      aria-current={status === \"current\" ? \"step\" : undefined}\n      className={cn(\n        \"relative flex gap-4 [counter-increment:step] last:[&>[data-slot=step-connector]]:hidden\",\n        \"group-data-[orientation=vertical]/steps:pb-8 group-data-[orientation=vertical]/steps:last:pb-0\",\n        \"sm:group-data-[orientation=horizontal]/steps:flex-col sm:group-data-[orientation=horizontal]/steps:gap-3\",\n        className,\n      )}\n      {...props}\n    >\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"step-connector\"\n        className={cn(\n          \"absolute bg-border\",\n          \"group-data-[orientation=vertical]/steps:left-4 group-data-[orientation=vertical]/steps:top-9 group-data-[orientation=vertical]/steps:bottom-1 group-data-[orientation=vertical]/steps:w-px\",\n          \"group-data-[orientation=horizontal]/steps:hidden sm:group-data-[orientation=horizontal]/steps:block\",\n          \"sm:group-data-[orientation=horizontal]/steps:left-11 sm:group-data-[orientation=horizontal]/steps:right-1 sm:group-data-[orientation=horizontal]/steps:top-4 sm:group-data-[orientation=horizontal]/steps:h-px\",\n          status === \"complete\" && \"bg-primary-200 dark:bg-primary-800\",\n        )}\n      />\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"step-marker\"\n        className={cn(\n          \"relative z-10 flex size-8 shrink-0 items-center justify-center text-xs font-bold tabular-nums\",\n          status === \"upcoming\"\n            ? \"border border-border bg-background text-muted-foreground\"\n            : \"bg-brand-fill text-on-brand-fill\",\n          status === \"current\" &&\n            \"ring-2 ring-primary-200 ring-offset-2 ring-offset-background dark:ring-primary-800\",\n        )}\n      >\n        {status === \"complete\" ? (\n          <IconCheck className=\"size-4\" />\n        ) : (\n          <span className=\"before:content-[counter(step)]\" />\n        )}\n      </span>\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1 pt-1\">\n        <p\n          className={cn(\n            \"text-sm font-semibold\",\n            status === \"upcoming\" ? \"text-muted-foreground\" : \"text-foreground\",\n          )}\n        >\n          <span className=\"sr-only\">{statusLabel ?? statusText[status]}: </span>\n          {title}\n        </p>\n        {description ? (\n          <p className=\"text-sm leading-relaxed text-muted-foreground\">{description}</p>\n        ) : null}\n        {children}\n      </div>\n    </li>\n  );\n}\n\nexport { Step, Steps };\n",
      "type": "registry:ui",
      "target": "components/ui/steps.tsx"
    }
  ]
}