{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-animate-count",
  "title": "Vercel Animate Count Demo",
  "description": "Demo showing an animated number counter with blur + slide transitions.",
  "registryDependencies": [
    "@unlumen-ui/animate-count"
  ],
  "files": [
    {
      "path": "registry/demo/components/unlumen/animate-count/index.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { AnimateCount } from \"@/components/unlumen-ui/animate-count\";\n\nfunction AutoCountUp() {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    if (count >= 100) return;\n    const id = setTimeout(() => setCount((c) => c + 1), 1000);\n    return () => clearTimeout(id);\n  }, [count]);\n\n  return (\n    <div className=\"flex flex-col items-center gap-1\">\n      <AnimateCount className=\"text-4xl font-bold\">{count}</AnimateCount>\n      <span className=\"text-xs text-muted-foreground\">auto count-up</span>\n    </div>\n  );\n}\n\nexport default function AnimateCountDemo() {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"i\") setCount((c) => c + 1);\n      if (e.key === \"o\") setCount((c) => Math.max(0, c - 1));\n    };\n    window.addEventListener(\"keydown\", onKey);\n    return () => window.removeEventListener(\"keydown\", onKey);\n  }, []);\n\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-10 p-8\">\n      <div className=\"flex flex-col items-center gap-4\">\n        <AnimateCount className=\"text-6xl font-bold\">{count}</AnimateCount>\n        <div className=\"flex gap-3\">\n          <button\n            onClick={() => setCount((c) => Math.max(0, c - 1))}\n            className=\"rounded-md border border-border bg-muted px-4 py-2 text-sm font-medium hover:bg-muted/80 transition-colors\"\n          >\n            − <kbd className=\"ml-1 text-xs text-muted-foreground\">O</kbd>\n          </button>\n          <button\n            onClick={() => setCount((c) => c + 1)}\n            className=\"rounded-md border border-border bg-muted px-4 py-2 text-sm font-medium hover:bg-muted/80 transition-colors\"\n          >\n            + <kbd className=\"ml-1 text-xs text-muted-foreground\">I</kbd>\n          </button>\n        </div>\n      </div>\n\n      <div className=\"w-px h-8 bg-border\" />\n\n      <AutoCountUp />\n    </div>\n  );\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}