{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-28",
  "type": "registry:component",
  "dependencies": [
    "react-aria-components"
  ],
  "files": [
    {
      "path": "registry/default/components/comp-28.tsx",
      "content": "\"use client\";\n\nimport { MinusIcon, PlusIcon } from \"lucide-react\";\nimport {\n  Button,\n  Group,\n  Input,\n  Label,\n  NumberField,\n} from \"react-aria-components\";\n\nexport default function Component() {\n  return (\n    <NumberField defaultValue={2048} minValue={0}>\n      <div className=\"*:not-first:mt-2\">\n        <Label className=\"font-medium text-foreground text-sm\">\n          Number input with plus/minus buttons\n        </Label>\n        <Group className=\"relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-md border border-input text-sm shadow-xs outline-none transition-[color,box-shadow] data-focus-within:border-ring data-disabled:opacity-50 data-focus-within:ring-[3px] data-focus-within:ring-ring/50 data-focus-within:has-aria-invalid:border-destructive data-focus-within:has-aria-invalid:ring-destructive/20 dark:data-focus-within:has-aria-invalid:ring-destructive/40\">\n          <Button\n            className=\"-ms-px flex aspect-square h-[inherit] items-center justify-center rounded-s-md border border-input bg-background text-muted-foreground/80 text-sm transition-[color,box-shadow] hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n            slot=\"decrement\"\n          >\n            <MinusIcon aria-hidden=\"true\" size={16} />\n          </Button>\n          <Input className=\"w-full grow bg-background px-3 py-2 text-center text-foreground tabular-nums\" />\n          <Button\n            className=\"-me-px flex aspect-square h-[inherit] items-center justify-center rounded-e-md border border-input bg-background text-muted-foreground/80 text-sm transition-[color,box-shadow] hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n            slot=\"increment\"\n          >\n            <PlusIcon aria-hidden=\"true\" size={16} />\n          </Button>\n        </Group>\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://react-spectrum.adobe.com/react-aria/NumberField.html\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React Aria\n        </a>\n      </p>\n    </NumberField>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "input",
      "label",
      "button",
      "number",
      "react aria"
    ]
  }
}