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