{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-numberfield",
  "type": "registry:ui",
  "title": "NumberField",
  "dependencies": [
    "lucide-react",
    "react",
    "react-aria-components",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-field.json",
    "https://react-aria.adobe.com/registry/tailwind-utils.json"
  ],
  "files": [
    {
      "path": "components/ui/NumberField.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport {ChevronDown, ChevronUp} from 'lucide-react';\nimport React from 'react';\nimport {\n  NumberField as AriaNumberField,\n  type NumberFieldProps as AriaNumberFieldProps,\n  Button,\n  type ButtonProps,\n  type ValidationResult\n} from 'react-aria-components/NumberField';\nimport {Description, FieldError, FieldGroup, Input, Label, fieldBorderStyles} from '@/registry/react-aria/ui/Field';\nimport {composeTailwindRenderProps} from '@/registry/react-aria/lib/react-aria-utils';\n\nexport interface NumberFieldProps extends AriaNumberFieldProps {\n  label?: string;\n  description?: string;\n  errorMessage?: string | ((validation: ValidationResult) => string);\n  placeholder?: string;\n}\n\nexport function NumberField({\n  label,\n  description,\n  errorMessage,\n  placeholder,\n  ...props\n}: NumberFieldProps) {\n  return (\n    <AriaNumberField\n      {...props}\n      className={composeTailwindRenderProps(\n        props.className,\n        'group flex flex-col gap-1 font-sans'\n      )}>\n      <Label>{label}</Label>\n      <FieldGroup>\n        {renderProps => (\n          <>\n            <Input className=\"w-20\" placeholder={placeholder} />\n            <div\n              className={fieldBorderStyles({\n                ...renderProps,\n                class: 'flex flex-col border-s h-full'\n              })}>\n              <StepperButton slot=\"increment\">\n                <ChevronUp aria-hidden className=\"w-4 h-4\" />\n              </StepperButton>\n              <div className={fieldBorderStyles({...renderProps, class: 'border-b'})} />\n              <StepperButton slot=\"decrement\">\n                <ChevronDown aria-hidden className=\"w-4 h-4\" />\n              </StepperButton>\n            </div>\n          </>\n        )}\n      </FieldGroup>\n      {description && <Description>{description}</Description>}\n      <FieldError>{errorMessage}</FieldError>\n    </AriaNumberField>\n  );\n}\n\nfunction StepperButton(props: ButtonProps) {\n  return (\n    <Button\n      {...props}\n      className=\"flex border-0 py-0 px-0.5 flex-1 box-border cursor-default text-neutral-500 bg-transparent pressed:bg-neutral-100 group-disabled:text-neutral-200 dark:text-neutral-400 dark:pressed:bg-neutral-800 dark:group-disabled:text-neutral-600 forced-colors:group-disabled:text-[GrayText] [-webkit-tap-highlight-color:transparent]\"\n    />\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}