{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "quantity-stepper",
  "title": "Quantity stepper",
  "description": "− value + · `min max step`",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/kit/quantity-stepper.tsx",
      "content": "'use client';\nimport { cn } from 'cn';\nimport { MinusIcon, PlusIcon } from 'lucide-react';\n\ntype Props = {\n  value: number;\n  onChange: (next: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  /** What is being counted, for screen readers (\"Guests\"). */\n  'aria-label'?: string;\n  className?: string;\n};\n\n/** − value + control for quantities, guests, tickets. */\nexport function QuantityStepper({ value, onChange, min = 0, max = Number.POSITIVE_INFINITY, step = 1, disabled, className, ...props }: Props) {\n  const canDec = !disabled && value - step >= min;\n  const canInc = !disabled && value + step <= max;\n  const label = props['aria-label'] ?? 'Quantity';\n  const btn = 'hover:bg-accent focus-visible:ring-ring/50 flex size-9 items-center justify-center rounded-md outline-none focus-visible:ring-[3px] disabled:opacity-40';\n  return (\n    <div role=\"group\" aria-label={label} className={cn('bg-muted inline-flex h-9 items-center rounded-md', disabled && 'opacity-50', className)}>\n      <button type=\"button\" aria-label={`Decrease ${label.toLowerCase()}`} disabled={!canDec} onClick={() => onChange(value - step)} className={btn}>\n        <MinusIcon className=\"size-4\" aria-hidden />\n      </button>\n      <output aria-live=\"polite\" className=\"min-w-8 text-center text-sm font-semibold tabular-nums\">\n        {value}\n      </output>\n      <button type=\"button\" aria-label={`Increase ${label.toLowerCase()}`} disabled={!canInc} onClick={() => onChange(value + step)} className={btn}>\n        <PlusIcon className=\"size-4\" aria-hidden />\n      </button>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/quantity-stepper.tsx"
    }
  ],
  "meta": {
    "exports": [
      "QuantityStepper"
    ],
    "api": "<QuantityStepper value onChange min? max? step? aria-label />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "inputs"
  ],
  "type": "registry:component"
}