{
  "$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\nconst NumberField = ({ className, ...props }: NumberFieldProps) => {\n  return (\n    <NumberFieldPrimitive {...props} data-slot=\"control\" className={cx(fieldStyles(), className)} />\n  )\n}\n\ninterface InputProps extends PrimitiveInputProps {\n  ref?: React.RefObject<HTMLInputElement>\n}\n\nfunction 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\ninterface StepperButtonProps extends ButtonProps {\n  slot: 'increment' | 'decrement'\n  className?: string\n}\n\nconst StepperButton = ({ slot, className, ...props }: StepperButtonProps) => {\n  return (\n    <Button\n      className={cx(\n        'inline-grid place-content-center pressed:text-fg text-muted-fg enabled:hover:text-fg',\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 }\nexport { NumberField, NumberInput }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}