{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "number-input",
  "type": "registry:ui",
  "title": "Number input",
  "description": "A numeric stepper with minus and plus buttons around a centered input that clamps to min and max and moves by a custom step. Works controlled or uncontrolled.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/icon-button.json",
    "https://ui.minidev.pro/r/input.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/number-input.tsx",
      "type": "registry:ui",
      "target": "components/ui/number-input.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { MinusIcon, PlusIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { inputVariants } from \"@/components/ui/input\"\nimport { IconButton } from \"@/components/ui/icon-button\"\n\ntype NumberInputProps = {\n  value?: number\n  defaultValue?: number\n  onChange?: (value: number) => void\n  min?: number\n  max?: number\n  step?: number\n  disabled?: boolean\n  className?: string\n  id?: string\n  \"aria-label\"?: string\n}\n\nfunction NumberInput({\n  value,\n  defaultValue = 0,\n  onChange,\n  min,\n  max,\n  step = 1,\n  disabled,\n  className,\n  id,\n  ...a11y\n}: NumberInputProps) {\n  const [internal, setInternal] = React.useState(defaultValue)\n  const current = value ?? internal\n  const set = (n: number) => {\n    let next = n\n    if (min != null) next = Math.max(min, next)\n    if (max != null) next = Math.min(max, next)\n    if (value === undefined) setInternal(next)\n    onChange?.(next)\n  }\n  return (\n    <div data-slot=\"number-input\" className={cn(\"inline-flex items-center gap-1\", className)}>\n      <IconButton type=\"button\" variant=\"outline\" size=\"icon-sm\" aria-label=\"Decrease\" disabled={disabled} onClick={() => set(current - step)}>\n        <MinusIcon />\n      </IconButton>\n      <input\n        id={id}\n        type=\"number\"\n        inputMode=\"numeric\"\n        disabled={disabled}\n        value={current}\n        min={min}\n        max={max}\n        step={step}\n        aria-label={a11y[\"aria-label\"] ?? \"Number\"}\n        className={cn(inputVariants({ size: \"default\" }), \"w-20 text-center tabular-nums\")}\n        onChange={(e) => set(Number(e.target.value))}\n      />\n      <IconButton type=\"button\" variant=\"outline\" size=\"icon-sm\" aria-label=\"Increase\" disabled={disabled} onClick={() => set(current + step)}>\n        <PlusIcon />\n      </IconButton>\n    </div>\n  )\n}\nexport { NumberInput }\n"
    }
  ]
}