{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "number-field",
  "title": "number-field",
  "description": "number-field",
  "dependencies": [
    "@heroicons/react",
    "react-aria-components"
  ],
  "registryDependencies": [
    "https://intentui.com/r/input",
    "https://intentui.com/r/primitive",
    "https://intentui.com/r/field"
  ],
  "files": [
    {
      "path": "src/components/ui/number-field.tsx",
      "content": "\"use client\"\n\nimport { MinusIcon, PlusIcon } from \"@heroicons/react/20/solid\"\nimport { Button, type ButtonProps } from \"react-aria-components/Button\"\nimport type { InputProps as PrimitiveInputProps } from \"react-aria-components/Input\"\nimport {\n  NumberField as NumberFieldPrimitive,\n  type NumberFieldProps,\n} from \"react-aria-components/NumberField\"\nimport { Input, InputGroup } from \"@/components/ui/input\"\nimport { cx } from \"@/lib/primitive\"\nimport { fieldStyles } from \"./field\"\n\nexport function NumberField({ className, ...props }: NumberFieldProps) {\n  return (\n    <NumberFieldPrimitive {...props} data-slot=\"control\" className={cx(fieldStyles(), className)} />\n  )\n}\n\nexport interface InputProps extends PrimitiveInputProps {\n  ref?: React.RefObject<HTMLInputElement>\n}\n\nexport function NumberInput({ className, ...props }: InputProps) {\n  return (\n    <InputGroup className=\"[--input-gutter-end:--spacing(20)]\">\n      <Input className={cx(\"tabular-nums\", className)} {...props} />\n      <div\n        data-slot=\"text\"\n        className=\"in-disabled:pointer-events-none pointer-events-auto end-0 p-px in-disabled:opacity-50\"\n      >\n        <div className=\"flex h-full items-center divide-x overflow-hidden rounded-e-[calc(var(--radius-lg)-1px)] border-s\">\n          <StepperButton slot=\"decrement\" />\n          <StepperButton slot=\"increment\" />\n        </div>\n      </div>\n    </InputGroup>\n  )\n}\n\nexport interface StepperButtonProps extends ButtonProps {\n  slot: \"increment\" | \"decrement\"\n  className?: string\n}\n\nfunction StepperButton({ slot, className, ...props }: StepperButtonProps) {\n  return (\n    <Button\n      className={cx(\n        \"inline-grid place-content-center pressed:text-foreground text-muted-foreground enabled:hover:text-foreground\",\n        \"size-full min-w-11 grow bg-input/20 pressed:bg-input/60 sm:min-w-8.5\",\n        \"*:data-[slot=stepper-icon]:size-5 sm:*:data-[slot=stepper-icon]:size-4\",\n        \"disabled:pointer-events-none disabled:opacity-50\",\n        className\n      )}\n      slot={slot}\n      {...props}\n    >\n      {slot === \"increment\" ? (\n        <PlusIcon data-slot=\"stepper-icon\" />\n      ) : (\n        <MinusIcon data-slot=\"stepper-icon\" />\n      )}\n    </Button>\n  )\n}\n\nexport type { NumberFieldProps }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}