{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "quantity-demo",
  "title": "Quantity Demo",
  "description": "Demo showing Quantity component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/ecommerce/quantity"
  ],
  "files": [
    {
      "path": "registry/demo/ecommerce/quantity/index.tsx",
      "content": "'use client';\n\nimport {\n  QuantityDecrease,\n  QuantityIncrease,\n  QuantityValue,\n} from '@/components/systaliko-ui/ecommerce/quantity';\nimport { MinusIcon, PlusIcon } from 'lucide-react';\nimport { useState } from 'react';\n\nexport function QuantityDemo() {\n  const [value, setValue] = useState(1);\n\n  const increase = () => {\n    setValue((prev) => prev + 1);\n  };\n\n  const decrease = () => {\n    setValue((prev) => Math.max(1, prev - 1));\n  };\n\n  return (\n    <div className=\"size-full place-content-center place-items-center\">\n      <div className=\"grid max-w-min grid-cols-[repeat(3,max-content)] rounded-md border items-center\">\n        <QuantityDecrease\n          className=\"rounded-[7px]\"\n          onClick={decrease}\n          value={value}\n        />\n        <QuantityValue>{value}</QuantityValue>\n        <QuantityIncrease\n          className=\"rounded-[7px]\"\n          onClick={increase}\n          max={10}\n          value={value}\n        />\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/demo/quantity.tsx"
    }
  ],
  "type": "registry:block"
}