{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-29",
  "type": "registry:component",
  "dependencies": [
    "react-aria-components"
  ],
  "files": [
    {
      "path": "registry/default/components/comp-29.tsx",
      "content": "\"use client\";\n\nimport { ChevronDownIcon, ChevronUpIcon } 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\n      defaultValue={99}\n      formatOptions={{\n        currency: \"EUR\",\n        currencySign: \"accounting\",\n        style: \"currency\",\n      }}\n    >\n      <div className=\"*:not-first:mt-2\">\n        <Label className=\"font-medium text-foreground text-sm\">\n          Number input with chevrons\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          <Input className=\"flex-1 bg-background px-3 py-2 text-foreground tabular-nums\" />\n          <div className=\"flex h-[calc(100%+2px)] flex-col\">\n            <Button\n              className=\"-me-px flex h-1/2 w-6 flex-1 items-center justify-center 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              <ChevronUpIcon aria-hidden=\"true\" size={12} />\n            </Button>\n            <Button\n              className=\"-me-px -mt-px flex h-1/2 w-6 flex-1 items-center justify-center 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              <ChevronDownIcon aria-hidden=\"true\" size={12} />\n            </Button>\n          </div>\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"
    ]
  }
}