{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-29",
  "type": "registry:component",
  "title": "Comp 29",
  "description": "Comp 29",
  "files": [
    {
      "path": "registry/ui-basic/comp-29.tsx",
      "content": "\"use client\"\n\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\nimport { Button, Group, Input, Label, NumberField } from \"react-aria-components\"\n\nexport default function Component() {\n  return (\n    <NumberField\n      defaultValue={99}\n      formatOptions={{\n        style: \"currency\",\n        currency: \"EUR\",\n        currencySign: \"accounting\",\n      }}\n    >\n      <div className=\"not-first:*:mt-2\">\n        <Label className=\"text-foreground text-sm font-medium\">\n          Number input with chevrons\n        </Label>\n        <Group className=\"border-input doutline-none 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] data-disabled:opacity-50 data-focus-within:ring-[3px]\">\n          <Input className=\"bg-background text-foreground flex-1 px-3 py-2 tabular-nums\" />\n          <div className=\"flex h-[calc(100%+2px)] flex-col\">\n            <Button\n              slot=\"increment\"\n              className=\"border-input bg-background text-muted-foreground/80 hover:bg-accent hover:text-foreground -me-px flex h-1/2 w-6 flex-1 items-center justify-center border text-sm transition-[color,box-shadow] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n            >\n              <ChevronUpIcon size={12} aria-hidden=\"true\" />\n            </Button>\n            <Button\n              slot=\"decrement\"\n              className=\"border-input bg-background text-muted-foreground/80 hover:bg-accent hover:text-foreground -me-px -mt-px flex h-1/2 w-6 flex-1 items-center justify-center border text-sm transition-[color,box-shadow] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n            >\n              <ChevronDownIcon size={12} aria-hidden=\"true\" />\n            </Button>\n          </div>\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"
    }
  ]
}