{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-dots",
  "title": "Progress Dots",
  "description": "A short run of marks with an emphasized terminal. Dots, rings, steps and numbered variants.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "http://localhost:5173/r/liquid-theme.json"
  ],
  "files": [
    {
      "path": "src/components/ui/progress-dots.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst dots = cva(\"inline-flex items-center\", {\n  variants: {\n    tone: {\n      ink: \"text-ink dark:text-white\",\n      current: \"text-current\",\n      volt: \"text-volt\",\n      flare: \"text-flare\",\n      chalk: \"text-white\",\n    },\n    gap: { tight: \"gap-1\", normal: \"gap-1.5\", loose: \"gap-2.5\" },\n  },\n  defaultVariants: { tone: \"current\", gap: \"normal\" },\n})\n\nexport interface ProgressDotsProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof dots> {\n  /** How many marks in the run. */\n  total?: number\n  /** How many are filled, counting from the left. */\n  value?: number\n  /**\n   * `dots` is the Credit Card Use track — small filled marks with an\n   * oversized terminal. `rings` is the Derogatory Marks row: hollow circles\n   * that grow toward the end. `steps` adds a connecting rail. `numbered` is\n   * the day-counter from the retreat hero: translucent discs carrying their\n   * own index, with an open arc around the current one.\n   */\n  variant?: \"dots\" | \"rings\" | \"steps\" | \"numbered\"\n  /** Enlarges the final mark, as both reference tiles do. */\n  emphasizeLast?: boolean\n  /** The base mark unit. `numbered` marks are 4× this, to fit a numeral. */\n  size?: number\n  /**\n   * Pulls `numbered` discs into each other, in px. Overlapping them is what\n   * makes six steps read as one run rather than six buttons.\n   */\n  overlap?: number\n  label?: string\n}\n\nexport function ProgressDots({\n  total = 5,\n  value = 1,\n  variant = \"dots\",\n  emphasizeLast = true,\n  size = 8,\n  overlap = 6,\n  tone,\n  gap,\n  label,\n  className,\n  ...props\n}: ProgressDotsProps) {\n  const marks = Array.from({ length: total })\n\n  if (variant === \"numbered\") {\n    const d = size * 4\n    return (\n      <div\n        data-slot=\"progress-dots\"\n        role=\"img\"\n        aria-label={label ?? `Step ${value} of ${total}`}\n        className={cn(dots({ tone, gap: \"tight\" }), \"relative gap-0\", className)}\n        {...props}\n      >\n        {marks.map((_, i) => {\n          const done = i < value\n          const current = i === value - 1\n          return (\n            <span\n              key={i}\n              className=\"relative grid shrink-0 place-items-center\"\n              style={{ width: d, height: d, marginLeft: i === 0 ? 0 : -overlap }}\n            >\n              {/* A wash rather than a fill: the discs sit over photography in\n                  the reference and you can see the ground through them. */}\n              <span\n                className={cn(\n                  \"absolute inset-0 rounded-full\",\n                  done ? \"bg-current/30\" : \"bg-current/18\",\n                )}\n              />\n              {current ? (\n                <svg\n                  aria-hidden\n                  viewBox={`0 0 ${d} ${d}`}\n                  className=\"absolute -inset-[3px] size-[calc(100%+6px)] overflow-visible\"\n                >\n                  <circle\n                    cx={d / 2}\n                    cy={d / 2}\n                    r={d / 2 - 1}\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth={2}\n                    strokeLinecap=\"round\"\n                    pathLength={100}\n                    // Draws from 33% to 67% of the perimeter — clockwise from\n                    // 3 o'clock that is the left flank, an open \"(\" .\n                    strokeDasharray=\"34 66\"\n                    strokeDashoffset={-33}\n                  />\n                </svg>\n              ) : null}\n              <span\n                data-lq-numeric=\"\"\n                className={cn(\n                  \"relative font-sans leading-none\",\n                  done ? \"opacity-100\" : \"opacity-55\",\n                )}\n                style={{ fontSize: Math.round(d * 0.34) }}\n              >\n                {i + 1}\n              </span>\n            </span>\n          )\n        })}\n      </div>\n    )\n  }\n\n  return (\n    <div\n      data-slot=\"progress-dots\"\n      role=\"img\"\n      aria-label={label ?? `${value} of ${total}`}\n      className={cn(dots({ tone, gap }), \"relative\", className)}\n      {...props}\n    >\n      {variant === \"steps\" ? (\n        <span\n          aria-hidden\n          className=\"absolute inset-x-1 top-1/2 -z-10 h-px -translate-y-1/2 bg-current opacity-25\"\n        />\n      ) : null}\n      {marks.map((_, i) => {\n        const last = i === total - 1\n        const on = i < value\n        const d = last && emphasizeLast ? size * 1.9 : size\n        return (\n          <span\n            key={i}\n            className={cn(\n              \"block shrink-0 rounded-full\",\n              variant === \"rings\"\n                ? on\n                  ? \"bg-current\"\n                  : \"border border-current/45\"\n                : on\n                  ? \"bg-current\"\n                  : \"bg-current/30\",\n              last && emphasizeLast && variant !== \"rings\" && \"bg-current\",\n            )}\n            style={{ width: d, height: d }}\n          />\n        )\n      })}\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}