{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "number-stepper",
  "title": "Number Stepper",
  "description": "Number input with minus and plus buttons; click the value to type it.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@ikas/animated-number",
    "@ikas/button",
    "@ikas/utils"
  ],
  "files": [
    {
      "path": "registry/ikas/number-stepper.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { MinusIcon, PlusIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { AnimatedNumber } from \"@/components/ikas/animated-number\"\n\ntype NumberStepperProps = {\n  value: number\n  onValueChange: (value: number) => void\n  min?: number\n  max?: number\n  /** Amount added or removed per click. */\n  step?: number\n  /** sm (28px) for table rows, default (36px) for forms. */\n  size?: \"sm\" | \"default\"\n  /** Accessible name, e.g. \"Stok adedi\". */\n  label: string\n  className?: string\n}\n\n/**\n * Number input with −/+ buttons. Click the value to type it directly; Enter\n * or blur commits, Esc cancels. Use instead of <Input type=\"number\">.\n */\nfunction NumberStepper({ value, onValueChange, min = 0, max = 100000, step = 1, size = \"default\", label, className }: NumberStepperProps) {\n  const [editing, setEditing] = React.useState(false)\n  const [draft, setDraft] = React.useState(\"\")\n  const clamp = (n: number) => Math.min(max, Math.max(min, n))\n\n  function commit() {\n    const parsed = Number(draft.replace(/\\./g, \"\").replace(\",\", \".\"))\n    if (draft.trim() !== \"\" && Number.isFinite(parsed)) onValueChange(clamp(Math.round(parsed / step) * step))\n    setEditing(false)\n  }\n\n  const sm = size === \"sm\"\n\n  return (\n    <div\n      data-slot=\"number-stepper\"\n      role=\"group\"\n      aria-label={label}\n      className={cn(\n        // w-fit! beats Field's *:w-full so the stepper keeps its size inside a vertical Field.\n        \"inline-flex w-fit! items-center rounded-lg border border-input bg-card shadow-inset transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/20\",\n        sm ? \"h-7\" : \"h-9\",\n        className\n      )}\n    >\n      <Button\n        variant=\"ghost\"\n        size={sm ? \"icon-xs\" : \"icon-sm\"}\n        className={cn(\"rounded-r-none\", sm ? \"h-full\" : \"h-full w-8\")}\n        aria-label=\"Azalt\"\n        disabled={value <= min}\n        onClick={() => onValueChange(clamp(value - step))}\n      >\n        <MinusIcon />\n      </Button>\n      {editing ? (\n        <input\n          autoFocus\n          inputMode=\"numeric\"\n          aria-label={label}\n          value={draft}\n          onChange={(event) => setDraft(event.target.value)}\n          onBlur={commit}\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") commit()\n            if (event.key === \"Escape\") setEditing(false)\n          }}\n          className={cn(\"h-full w-14 bg-transparent text-center tabular-nums outline-none\", sm ? \"text-[13px]\" : \"text-sm\")}\n        />\n      ) : (\n        <button\n          type=\"button\"\n          aria-label={`${label}: ${value}. Düzenlemek için tıklayın`}\n          onClick={() => {\n            setDraft(String(value))\n            setEditing(true)\n          }}\n          className={cn(\n            \"flex h-full w-14 cursor-text items-center justify-center font-medium outline-none hover:bg-muted/60\",\n            sm ? \"text-[13px]\" : \"text-sm\"\n          )}\n        >\n          <AnimatedNumber value={value} />\n        </button>\n      )}\n      <Button\n        variant=\"ghost\"\n        size={sm ? \"icon-xs\" : \"icon-sm\"}\n        className={cn(\"rounded-l-none\", sm ? \"h-full\" : \"h-full w-8\")}\n        aria-label=\"Artır\"\n        disabled={value >= max}\n        onClick={() => onValueChange(clamp(value + step))}\n      >\n        <PlusIcon />\n      </Button>\n    </div>\n  )\n}\n\nexport { NumberStepper, type NumberStepperProps }\n",
      "type": "registry:component",
      "target": "@components/ikas/number-stepper.tsx"
    }
  ],
  "docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/number-stepper",
  "categories": [
    "forms"
  ],
  "type": "registry:component"
}