{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "number-wheel",
  "title": "Number wheel",
  "description": "Mechanical rolling digits. Each digit is a printed drum that turns to its figure, lowest digit first.",
  "dependencies": [
    "cn"
  ],
  "registryDependencies": [
    "https://bevel-ui.vercel.app/r/bevel.json",
    "https://bevel-ui.vercel.app/r/amount.json"
  ],
  "files": [
    {
      "path": "registry/bevel/ui/number-wheel.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"cn\"\nimport { formatAmountParts, type AmountFormat } from \"@/lib/format-amount\"\n\nconst DIGITS = [\"0\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\"]\n\ntype NumberWheelProps = AmountFormat &\n  Omit<React.ComponentProps<\"span\">, \"children\"> & {\n    /** Drum colour: ivory with dark figures, or black with light ones. */\n    tone?: \"ivory\" | \"black\"\n    /**\n     * Announce changes to screen readers. Leave \"off\" while a value ticks\n     * continuously and switch to \"polite\" when it settles.\n     */\n    live?: \"off\" | \"polite\"\n  }\n\n/**\n * Mechanical rolling digits. Each digit is a printed drum that turns to its\n * figure; separators and symbols are fixed plates between the drums.\n */\nfunction NumberWheel({\n  value,\n  currency,\n  locale,\n  format,\n  tone = \"ivory\",\n  live = \"off\",\n  className,\n  ...props\n}: NumberWheelProps) {\n  const parts = React.useMemo(\n    () => formatAmountParts({ value, currency, locale, format }),\n    [value, currency, locale, format]\n  )\n  const text = parts.map((part) => part.value).join(\"\")\n  // Key characters from the right so the ones digit keeps its drum as the number grows.\n  const chars = text.split(\"\")\n\n  return (\n    <span\n      data-slot=\"number-wheel\"\n      data-tone={tone}\n      className={cn(\n        \"bevel-recessed relative inline-flex items-stretch gap-px overflow-hidden rounded-(--bevel-radius-xs) p-px leading-none font-semibold\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"sr-only\" aria-live={live}>\n        {text}\n      </span>\n      {chars.map((char, i) => {\n        const fromRight = chars.length - 1 - i\n        const digit = DIGITS.indexOf(char)\n        if (digit === -1) {\n          return (\n            <span\n              key={`s${fromRight}`}\n              aria-hidden\n              data-slot=\"number-wheel-separator\"\n              className=\"number-wheel-drum flex h-(--number-wheel-cell) items-center px-(--number-wheel-plate)\"\n            >\n              {char}\n            </span>\n          )\n        }\n        return (\n          <span\n            key={`d${fromRight}`}\n            aria-hidden\n            data-slot=\"number-wheel-drum\"\n            className=\"number-wheel-drum relative h-(--number-wheel-cell) w-(--number-wheel-drum) overflow-hidden\"\n          >\n            <span\n              className=\"absolute inset-x-0 top-0 flex flex-col tabular-nums transition-[translate] duration-(--bevel-duration-move) ease-(--bevel-ease-in-out) motion-reduce:transition-none\"\n              style={{\n                translate: `0 calc(var(--number-wheel-cell) * ${-digit})`,\n                // Lower digits turn first, like a real counter.\n                transitionDelay: `calc(var(--bevel-stagger) * ${fromRight})`,\n              }}\n            >\n              {DIGITS.map((d) => (\n                <span key={d} className=\"flex h-(--number-wheel-cell) items-center justify-center\">\n                  {d}\n                </span>\n              ))}\n            </span>\n          </span>\n        )\n      })}\n      <span aria-hidden className=\"bevel-glass absolute inset-0\" />\n    </span>\n  )\n}\n\nexport { NumberWheel }\nexport type { NumberWheelProps }\n",
      "type": "registry:ui"
    }
  ],
  "css": {
    ":root": {
      "--number-wheel-cell": "1.25em",
      "--number-wheel-drum": "0.72em",
      "--number-wheel-plate": "0.08em"
    },
    "[data-slot=\"number-wheel\"]": {
      "--bevel-material-recess": "oklch(0.16 0.01 260)",
      "--number-wheel-face": "var(--bevel-ivory)",
      "--number-wheel-foreground": "var(--bevel-ivory-foreground)"
    },
    "[data-slot=\"number-wheel\"][data-tone=\"black\"]": {
      "--number-wheel-face": "oklch(0.22 0.01 260)",
      "--number-wheel-foreground": "oklch(0.95 0.01 90)"
    },
    "@utility number-wheel-drum": {
      "background-color": "var(--number-wheel-face)",
      "background-image": "linear-gradient( to bottom, var(--bevel-shade-strong) 0%, transparent 28%, transparent 72%, var(--bevel-shade-strong) 100% )",
      "color": "var(--number-wheel-foreground)"
    }
  },
  "categories": [
    "instruments"
  ],
  "type": "registry:ui"
}