{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"steps","type":"registry:ui","title":"Steps","description":"Shows progress through a multi-step flow.","dependencies":["lucide-react"],"registryDependencies":["https://dashral.com/r/utils.json"],"files":[{"path":"registry/dashral/steps.tsx","type":"registry:file","target":"components/dashral/steps.tsx","content":"import * as React from \"react\"\nimport { CheckIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\ntype StepStatus = \"complete\" | \"current\" | \"upcoming\"\n\ntype StepItem = { title: React.ReactNode; description?: React.ReactNode }\n\n/** A progress indicator for multi-step flows, in one tag. `current` is the zero-based index of the active step. */\nfunction Steps({\n  items,\n  current,\n  orientation = \"horizontal\",\n  className,\n  ...props\n}: Omit<React.ComponentProps<\"ol\">, \"children\"> & {\n  items: StepItem[]\n  current: number\n  orientation?: \"horizontal\" | \"vertical\"\n}) {\n  return (\n    <ol\n      data-slot=\"steps\"\n      data-orientation={orientation}\n      className={cn(\"flex\", orientation === \"horizontal\" ? \"w-full items-start\" : \"flex-col\", className)}\n      {...props}\n    >\n      {items.map((item, index) => (\n        <Step\n          key={index}\n          {...item}\n          index={index}\n          status={index < current ? \"complete\" : index === current ? \"current\" : \"upcoming\"}\n          orientation={orientation}\n          last={index === items.length - 1}\n        />\n      ))}\n    </ol>\n  )\n}\n\nfunction Step({\n  title,\n  description,\n  index,\n  status,\n  orientation,\n  last,\n}: StepItem & { index: number; status: StepStatus; orientation: \"horizontal\" | \"vertical\"; last: boolean }) {\n  const horizontal = orientation === \"horizontal\"\n\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\",\n        horizontal ? \"flex-1 flex-col items-center text-center\" : \"gap-4 pb-8 last:pb-0\"\n      )}\n    >\n      {!last && (\n        <span\n          aria-hidden\n          className={cn(\n            \"absolute overflow-hidden bg-border\",\n            horizontal ? \"top-4 start-[calc(50%+1.25rem)] h-0.5 w-[calc(100%-2.5rem)]\" : \"top-9 start-4 h-[calc(100%-2.5rem)] w-0.5 -translate-x-1/2 rtl:translate-x-1/2\"\n          )}\n        >\n          {/* The connector fills in the reading direction when the step is done. */}\n          <span\n            className={cn(\n              \"absolute inset-0 bg-primary transition-[scale] duration-(--duration-considered) ease-standard motion-reduce:transition-none\",\n              horizontal ? \"origin-left\" : \"origin-top\",\n              status === \"complete\" ? \"scale-100\" : horizontal ? \"scale-x-0\" : \"scale-y-0\"\n            )}\n          />\n        </span>\n      )}\n      <span\n        className={cn(\n          \"relative z-10 flex size-8 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold tabular-nums transition-colors duration-(--duration-standard)\",\n          status === \"complete\" && \"border-primary bg-primary text-primary-foreground\",\n          status === \"current\" && \"border-primary bg-background text-primary-text\",\n          status === \"upcoming\" && \"border-border bg-background text-muted-foreground\"\n        )}\n      >\n        {status === \"complete\" ? (\n          <CheckIcon className=\"size-4 animate-in zoom-in-50 duration-(--duration-standard) ease-spring motion-reduce:animate-none\" aria-hidden />\n        ) : (\n          index + 1\n        )}\n      </span>\n      <div className={cn(horizontal ? \"mt-2 px-2\" : \"pt-1\")}>\n        <p className={cn(\"text-sm font-medium\", status === \"upcoming\" && \"text-muted-foreground\")}>\n          {title}\n          {status === \"complete\" && <span className=\"sr-only\"> (completed)</span>}\n        </p>\n        {description && <p className=\"mt-0.5 text-xs text-muted-foreground\">{description}</p>}\n      </div>\n    </li>\n  )\n}\n\nexport { Steps, type StepItem }\n"}],"cssVars":{"theme":{"color-primary-text":"var(--primary-text, var(--primary))","ease-standard":"var(--ease-standard)","ease-enter":"var(--ease-enter)","ease-exit":"var(--ease-exit)","ease-spring":"var(--ease-spring)"},"light":{"duration-fast":"160ms","duration-standard":"240ms","duration-considered":"480ms","ease-standard":"cubic-bezier(0.2, 0, 0, 1)","ease-enter":"cubic-bezier(0, 0, 0, 1)","ease-exit":"cubic-bezier(0.3, 0, 1, 1)","ease-spring":"linear(0, 0.071 4%, 0.234 8%, 0.433 12%, 0.626 17%, 0.791 21%, 0.917 25%, 1.004 29%, 1.055 33%, 1.079 38%, 1.083 42%, 1.075 46%, 1.06 50%, 1.043 54%, 1.027 58%, 1.015 62%, 1.005 67%, 0.998 71%, 0.995 75%, 0.993 79%, 0.993 83%, 0.994 88%, 0.995 92%, 0.997 96%, 1)"},"dark":{}}}