{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-counter",
  "type": "registry:component",
  "title": "Stats counter",
  "description": "A single stat that counts up from zero to its value once it is in view, with a label below. Combine several in a row for landing page metrics.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/stats-counter.tsx",
      "type": "registry:ui",
      "target": "components/ui/stats-counter.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { useInView, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\n/** A number that counts up from zero when it scrolls into view, for stats sections. */\nfunction StatsCounter({\n  value = 12400,\n  label = \"invoices paid this month\",\n  className,\n}: {\n  value?: number\n  label?: string\n  className?: 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) { setN(value); return }\n    let frame = 0\n    const total = 32\n    const id = window.setInterval(() => {\n      frame += 1\n      setN(Math.round((value * frame) / total))\n      if (frame >= total) window.clearInterval(id)\n    }, 24)\n    return () => window.clearInterval(id)\n  }, [inView, value, reduce])\n  return (\n    <div ref={ref} data-slot=\"stats-counter\" data-tier=\"premium\" className={cn(\"rounded-xl border border-border bg-surface p-4 text-center shadow-highlight\", className)}>\n      <p className=\"text-3xl font-medium tracking-[-0.022em] tabular-nums text-fg\" aria-label={`${value.toLocaleString(\"en-US\")} ${label}`}>{n.toLocaleString(\"en-US\")}</p>\n      <p className=\"mt-1 text-xs text-fg-muted\">{label}</p>\n    </div>\n  )\n}\nexport { StatsCounter }\n"
    }
  ]
}