{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "flip-stat-board",
  "type": "registry:component",
  "title": "Flip stat board",
  "description": "A stat board where each number counts up with digits that flip in on a spring once in view. Pass values and labels; reduced motion shows the final value.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/flip-stat-board.tsx",
      "type": "registry:ui",
      "target": "components/ui/flip-stat-board.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useInView, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction FlipDigit({ value }: { value: string }) {\n  const reduce = useReducedMotion()\n  return (\n    <span className=\"relative inline-flex h-10 w-7 items-center justify-center overflow-hidden rounded-md border border-border bg-surface shadow-highlight\">\n      <motion.span\n        key={value}\n        initial={reduce ? false : { y: 14 }}\n        animate={{ y: 0 }}\n        transition={{ type: \"spring\", stiffness: 280, damping: 22 }}\n        className=\"font-mono text-lg font-medium tabular-nums text-fg\"\n      >\n        {value}\n      </motion.span>\n    </span>\n  )\n}\n\nfunction FlipStat({\n  value,\n  label,\n}: {\n  value: number\n  label: string\n}) {\n  const ref = React.useRef<HTMLDivElement>(null)\n  const inView = useInView(ref, { once: true, amount: 0.6 })\n  const reduce = useReducedMotion()\n  const [n, setN] = React.useState(0)\n  React.useEffect(() => {\n    if (!inView) return\n    if (reduce) {\n      setN(value)\n      return\n    }\n    let frame = 0\n    const frames = 28\n    const id = window.setInterval(() => {\n      frame += 1\n      setN(Math.round((value * frame) / frames))\n      if (frame >= frames) window.clearInterval(id)\n    }, 28)\n    return () => window.clearInterval(id)\n  }, [inView, value, reduce])\n  const digits = String(n).padStart(String(value).length, \"0\").split(\"\")\n  return (\n    <div ref={ref} className=\"space-y-2\">\n      <div className=\"flex gap-1\" aria-label={`${value} ${label}`}>\n        {digits.map((d, i) => (\n          <FlipDigit key={`${i}-${d}`} value={d} />\n        ))}\n      </div>\n      <p className=\"text-xs text-fg-muted\">{label}</p>\n    </div>\n  )\n}\n\nfunction FlipStatBoard({\n  stats = [\n    { value: 400, label: \"Registry items\" },\n    { value: 49, label: \"Galleries\" },\n    { value: 71, label: \"Motion pieces\" },\n  ],\n  className,\n}: {\n  stats?: { value: number; label: string }[]\n  className?: string\n}) {\n  return (\n    <div\n      data-slot=\"flip-stat-board\"\n      data-tier=\"premium\"\n      className={cn(\"grid gap-6 rounded-2xl border border-border bg-sunken p-6 sm:grid-cols-3\", className)}\n    >\n      {stats.map((s) => (\n        <FlipStat key={s.label} value={s.value} label={s.label} />\n      ))}\n    </div>\n  )\n}\nexport { FlipStatBoard }\n"
    }
  ]
}