{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "rolling-number-demo",
  "type": "registry:component",
  "registryDependencies": [
    "rolling-number"
  ],
  "files": [
    {
      "path": "registry/default/example/rolling-number-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Slider } from \"@/components/ui/slider\"\nimport { GradientHeading } from \"@/registry/default/ui/gradient-heading\"\nimport { RollingNumber } from \"@/registry/default/ui/rolling-number\"\nimport {\n  TextureCardContent,\n  TextureCardHeader,\n  TextureCardStyled,\n} from \"@/registry/default/ui/texture-card\"\n\nfunction PrecisionExample() {\n  const [value, setValue] = useState(14.5678)\n\n  return (\n    <TextureCardStyled>\n      <TextureCardHeader className=\"pl-3\">\n        <GradientHeading size=\"xxs\">Precision</GradientHeading>\n      </TextureCardHeader>\n      <TextureCardContent>\n        <div className=\"flex gap-2\">\n          <div\n            className=\"text-2xl font-bold\"\n            style={{ minWidth: \"80px\", textAlign: \"left\" }}\n          >\n            <RollingNumber value={value} precision={2} />\n          </div>\n          <Button\n            size=\"sm\"\n            variant=\"ghost\"\n            className=\"border-primary/10 ml-auto rounded-full border py-5\"\n            onClick={() => setValue(value + 13.456)}\n          >\n            <Plus className=\"h-4 w-4\" />\n          </Button>\n        </div>\n      </TextureCardContent>\n    </TextureCardStyled>\n  )\n}\n\nfunction FormatExample() {\n  const [value, setValue] = useState(10)\n\n  const customFormat = (num: number) => `$${num.toFixed(2)}`\n\n  return (\n    <TextureCardStyled>\n      <TextureCardHeader className=\"pl-3\">\n        <GradientHeading size=\"xxs\">Format</GradientHeading>\n      </TextureCardHeader>\n      <TextureCardContent>\n        <div className=\"flex gap-2\">\n          <div\n            className=\"text-2xl font-bold\"\n            style={{ minWidth: \"120px\", textAlign: \"left\" }}\n          >\n            <RollingNumber value={value} format={customFormat} />\n          </div>\n          <Button\n            size=\"sm\"\n            variant=\"ghost\"\n            className=\"border-primary/10 ml-auto rounded-full border py-5\"\n            onClick={() => setValue(value + 50)}\n          >\n            <Plus className=\"h-4 w-4\" />\n          </Button>\n        </div>\n      </TextureCardContent>\n    </TextureCardStyled>\n  )\n}\n\nfunction HooksExample() {\n  const [value, setValue] = useState(10)\n\n  const handleAnimationStart = () => {\n    toast(\"🏁 Animation started \")\n  }\n\n  const handleAnimationComplete = () => {\n    toast(\"✅ Animation completed \")\n  }\n\n  return (\n    <TextureCardStyled>\n      <TextureCardHeader className=\"pl-3\">\n        <GradientHeading size=\"xxs\">Callbacks</GradientHeading>\n      </TextureCardHeader>\n      <TextureCardContent>\n        <div className=\"flex gap-2\">\n          <div\n            className=\"text-2xl font-bold\"\n            style={{ minWidth: \"50px\", textAlign: \"left\" }}\n          >\n            <RollingNumber\n              value={value}\n              onAnimationStart={handleAnimationStart}\n              onAnimationComplete={handleAnimationComplete}\n            />\n          </div>\n          <Button\n            size=\"sm\"\n            variant=\"ghost\"\n            className=\"border-primary/10 ml-auto rounded-full border py-5\"\n            onClick={() => setValue(value + 20)}\n          >\n            <Plus className=\"h-4 w-4\" />\n          </Button>\n        </div>\n      </TextureCardContent>\n    </TextureCardStyled>\n  )\n}\n\nfunction CustomSpringExample() {\n  const [value, setValue] = useState(1000)\n  const [mass, setMass] = useState(1)\n  const [stiffness, setStiffness] = useState(100)\n  const [damping, setDamping] = useState(40)\n\n  const handleValueChange =\n    (setter: (value: number) => void, minValue: number) =>\n    (values: number[]) => {\n      const newValue = Math.max(values[0], minValue)\n      setter(newValue)\n    }\n\n  return (\n    <TextureCardStyled className=\"w-full\">\n      <TextureCardHeader className=\"px-3\">\n        <GradientHeading size=\"sm\">Custom Spring Properties</GradientHeading>\n      </TextureCardHeader>\n      <TextureCardContent className=\"flex flex-col items-center justify-between gap-8 sm:flex-row\">\n        <div\n          className=\"mr-auto flex text-6xl font-bold\"\n          style={{ minWidth: \"150px\", textAlign: \"right\" }}\n        >\n          <RollingNumber\n            value={value}\n            mass={mass}\n            stiffness={stiffness}\n            damping={damping}\n          />\n        </div>\n\n        <div className=\"flex flex-col gap-3 px-2\">\n          <Button\n            className=\"border-primary/10 rounded-full border py-5\"\n            onClick={() => setValue(value + 500)}\n          >\n            <Plus className=\"mr-2 h-4 w-4\" />\n            Increase\n          </Button>\n          <Button\n            className=\"border-primary/10 rounded-full border py-5\"\n            disabled={value <= 500}\n            onClick={() => setValue(value - 300)}\n          >\n            <Minus className=\"mr-2 h-4 w-4\" />\n            Decrease\n          </Button>\n        </div>\n        <div className=\"ml-auto w-full\">\n          <div className=\"flex flex-col gap-4\">\n            <div className=\"ml-auto w-full\">\n              <label>Mass: {mass}</label>\n              <Slider\n                defaultValue={[mass]}\n                max={5}\n                step={0.1}\n                onValueChange={handleValueChange(setMass, 0.1)}\n              />\n            </div>\n            <div className=\"ml-auto w-full\">\n              <label>Stiffness: {stiffness}</label>\n              <Slider\n                defaultValue={[stiffness]}\n                max={200}\n                step={1}\n                onValueChange={handleValueChange(setStiffness, 1)}\n              />\n            </div>\n            <div className=\"ml-auto w-full\">\n              <label>Damping: {damping}</label>\n              <Slider\n                defaultValue={[damping]}\n                max={50}\n                step={1}\n                onValueChange={handleValueChange(setDamping, 1)}\n              />\n            </div>\n          </div>\n        </div>\n      </TextureCardContent>\n    </TextureCardStyled>\n  )\n}\n\nexport default function RollingNumberExamples() {\n  return (\n    <div className=\"mx-auto max-w-xl gap-4 py-6\">\n      <div className=\"flex w-full flex-col justify-between gap-2\">\n        <CustomSpringExample />\n        <div className=\"flex flex-col gap-2 sm:flex-row\">\n          <PrecisionExample />\n          <FormatExample />\n          <HooksExample />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}