{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stepper",
  "type": "registry:ui",
  "title": "Quantity stepper",
  "description": "Accessible quantity control with min and max.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "ui"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://storekit-eight.vercel.app/r/cn.json"
  ],
  "files": [
    {
      "path": "ui/stepper.tsx",
      "content": "\"use client\"\n\nimport { Minus, Plus } from \"lucide-react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\n\n/* Quantity stepper. Buttons are 40px+ targets at every size; the value is a\n   live region so screen readers hear each change. Holds min/max so cart\n   rules live in one place. */\n\nexport function Stepper({\n  value,\n  onChange,\n  min = 1,\n  max = 99,\n  size = \"md\",\n  label = \"Quantity\",\n  className,\n}: {\n  value: number\n  onChange: (next: number) => void\n  min?: number\n  max?: number\n  size?: \"sm\" | \"md\"\n  /** Accessible name for the group, e.g. \"Quantity, Daily Greens\". */\n  label?: string\n  className?: string\n}) {\n  const h = size === \"sm\" ? \"h-10\" : \"h-11\"\n  const btn = cn(\n    \"grid aspect-square h-full place-items-center text-sk-ink transition-colors hover:bg-sk-ink/[0.05] active:bg-sk-ink/[0.08] disabled:opacity-30 disabled:hover:bg-transparent\"\n  )\n  return (\n    <div\n      role=\"group\"\n      aria-label={label}\n      className={cn(\"inline-flex items-stretch overflow-hidden rounded-sk-btn border border-sk-line bg-sk-card\", h, className)}\n    >\n      <button type=\"button\" className={btn} aria-label=\"Decrease\" disabled={value <= min} onClick={() => onChange(Math.max(min, value - 1))}>\n        <Minus size={14} />\n      </button>\n      <span aria-live=\"polite\" aria-atomic=\"true\" className=\"grid min-w-10 place-items-center px-1 text-sm font-medium tabular-nums\">{value}</span>\n      <button type=\"button\" className={btn} aria-label=\"Increase\" disabled={value >= max} onClick={() => onChange(Math.min(max, value + 1))}>\n        <Plus size={14} />\n      </button>\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/storekit/ui/stepper.tsx"
    }
  ],
  "meta": {
    "section": "ui",
    "previewHeight": 160
  }
}