{
  "name": "quantity-selector",
  "title": "QuantitySelector",
  "description": "Controlled increment/decrement quantity input.",
  "type": "component",
  "registryDependencies": [],
  "files": [
    {
      "path": "quantity-selector.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { NumberField } from \"@base-ui/react/number-field\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface QuantitySelectorClassNames {\n  root?: string;\n  button?: string;\n  value?: string;\n}\n\nexport interface QuantitySelectorProps {\n  value: number;\n  onChange: (value: number) => void;\n  min?: number;\n  max?: number;\n  className?: string;\n  classNames?: QuantitySelectorClassNames;\n}\n\nexport function QuantitySelector({\n  value,\n  onChange,\n  min = 1,\n  max,\n  className,\n  classNames,\n}: QuantitySelectorProps): React.ReactElement {\n  return (\n    <NumberField.Root\n      value={value}\n      onValueChange={(val) => {\n        if (val != null) {\n          onChange(val);\n        }\n      }}\n      min={min}\n      max={max}\n      step={1}\n    >\n      <NumberField.Group\n        data-cimplify-quantity\n        className={cn(\"inline-flex items-center gap-3 border border-border px-2\", className, classNames?.root)}\n      >\n        <NumberField.Decrement\n          aria-label=\"Decrease quantity\"\n          data-cimplify-quantity-decrement\n          className={cn(\n            \"w-10 h-10 flex items-center justify-center hover:text-primary transition-colors disabled:opacity-30\",\n            classNames?.button,\n          )}\n        >\n          &#x2212;\n        </NumberField.Decrement>\n        <NumberField.Input\n          data-cimplify-quantity-value\n          aria-live=\"polite\"\n          readOnly\n          className={cn(\"w-8 text-center font-medium bg-transparent border-none outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none\", classNames?.value)}\n        />\n        <NumberField.Increment\n          aria-label=\"Increase quantity\"\n          data-cimplify-quantity-increment\n          className={cn(\n            \"w-10 h-10 flex items-center justify-center hover:text-primary transition-colors disabled:opacity-30\",\n            classNames?.button,\n          )}\n        >\n          +\n        </NumberField.Increment>\n      </NumberField.Group>\n    </NumberField.Root>\n  );\n}\n"
    }
  ]
}