{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "number-field",
  "title": "Number Field",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "@fab-ui/label"
  ],
  "files": [
    {
      "path": "registry/default/ui/number-field.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\nimport { Label } from '@/registry/default/ui/label';\nimport { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field';\nimport { MinusIcon, MoveHorizontal, PlusIcon } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\n\nconst NumberFieldContext = React.createContext<{\n  fieldId: string;\n} | null>(null);\n\nfunction NumberField({\n  id,\n  className,\n  ...props\n}: NumberFieldPrimitive.Root.Props) {\n  const numberFieldId = React.useId();\n  const fieldId = id ?? numberFieldId;\n\n  return (\n    <NumberFieldContext.Provider value={{ fieldId }}>\n      <NumberFieldPrimitive.Root\n        id={fieldId}\n        data-slot='number-field'\n        className={cn('flex flex-col items-start gap-2', className)}\n        {...props}\n      />\n    </NumberFieldContext.Provider>\n  );\n}\n\nfunction NumberFieldScrubArea({\n  className,\n  label,\n  ...props\n}: NumberFieldPrimitive.ScrubArea.Props & { label: string }) {\n  const context = React.useContext(NumberFieldContext);\n\n  if (!context) {\n    throw new Error(\n      'NumberFieldScrubArea must be used within the NumberField.'\n    );\n  }\n\n  return (\n    <NumberFieldPrimitive.ScrubArea\n      data-slot='number-field-scrub-area'\n      className={cn('cursor-ew-resize\"', className)}\n      {...props}\n    >\n      <Label htmlFor={context.fieldId} className='cursor-ew-resize font-normal'>\n        {label}\n      </Label>\n      <NumberFieldPrimitive.ScrubAreaCursor className='drop-shadow-[0_1px_1px_#0008] filter'>\n        <MoveHorizontal />\n      </NumberFieldPrimitive.ScrubAreaCursor>\n    </NumberFieldPrimitive.ScrubArea>\n  );\n}\n\nfunction NumberFieldGroup({\n  className,\n  ...props\n}: NumberFieldPrimitive.Group.Props) {\n  return (\n    <NumberFieldPrimitive.Group\n      data-slot='number-field-group'\n      className={cn(\n        'flex rounded-md ring-ring/40 ring-offset-1 focus-within:border-ring focus-within:ring-2 focus-within:has-aria-invalid:border-destructive/60 focus-within:has-aria-invalid:ring-destructive/40',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction NumberFieldDecrement({\n  className,\n  ...props\n}: NumberFieldPrimitive.Decrement.Props) {\n  return (\n    <NumberFieldPrimitive.Decrement\n      className={cn(\n        \"flex size-9 items-center justify-center rounded-tl-md rounded-bl-md border border-border bg-clip-padding text-foreground select-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      data-slot='number-field-decrement'\n      {...props}\n    >\n      <MinusIcon />\n    </NumberFieldPrimitive.Decrement>\n  );\n}\n\nfunction NumberFieldIncrement({\n  className,\n  ...props\n}: NumberFieldPrimitive.Increment.Props) {\n  return (\n    <NumberFieldPrimitive.Increment\n      className={cn(\n        \"flex size-9 items-center justify-center rounded-tr-md rounded-br-md border border-border bg-clip-padding text-foreground select-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      data-slot='number-field-increment'\n      {...props}\n    >\n      <PlusIcon />\n    </NumberFieldPrimitive.Increment>\n  );\n}\n\nfunction NumberFieldInput({\n  className,\n  ...props\n}: NumberFieldPrimitive.Input.Props) {\n  return (\n    <NumberFieldPrimitive.Input\n      className={cn(\n        'h-9 w-32 border-t border-b border-border text-center text-base text-foreground tabular-nums outline-none focus:z-1',\n        className\n      )}\n      data-slot='number-field-input'\n      {...props}\n    />\n  );\n}\n\nexport {\n  NumberField,\n  NumberFieldScrubArea,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldGroup,\n  NumberFieldInput,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}