{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "DesignX <ui@designx.dev>",
  "name": "number-field",
  "type": "registry:ui",
  "title": "Number Field",
  "description": "A numeric input with steppers and a scrub area.",
  "dependencies": [
    "@base-ui/react@^1.8.0",
    "lucide-react@^0.577.0"
  ],
  "registryDependencies": [
    "@dx/utils"
  ],
  "files": [
    {
      "path": "ui/number-field.tsx",
      "type": "registry:ui",
      "content": "import { NumberField as NumberFieldPrimitive } from \"@base-ui/react/number-field\";\nimport { MinusIcon, PlusIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction NumberField({ className, children, ...props }: NumberFieldPrimitive.Root.Props) {\n  return (\n    <NumberFieldPrimitive.Root data-slot=\"number-field\" className={cn(\"flex flex-col gap-2\", className)} {...props}>\n      {children}\n    </NumberFieldPrimitive.Root>\n  );\n}\n\nfunction NumberFieldGroup({ className, ...props }: NumberFieldPrimitive.Group.Props) {\n  return (\n    <NumberFieldPrimitive.Group\n      data-slot=\"number-field-group\"\n      className={cn(\n        \"flex h-10 w-fit items-center rounded-full border border-input transition-[border-color,box-shadow] focus-within:border-foreground focus-within:shadow-[0_0_0_3px_var(--outline-variant)] data-disabled:opacity-40\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst stepper =\n  \"state-layer focus-ring flex size-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors select-none hover:text-foreground data-disabled:pointer-events-none data-disabled:opacity-30\";\n\nfunction NumberFieldDecrement({ className, children, ...props }: NumberFieldPrimitive.Decrement.Props) {\n  return (\n    <NumberFieldPrimitive.Decrement data-slot=\"number-field-decrement\" className={cn(stepper, \"ml-1\", className)} {...props}>\n      {children ?? <MinusIcon className=\"size-4\" />}\n    </NumberFieldPrimitive.Decrement>\n  );\n}\n\nfunction NumberFieldIncrement({ className, children, ...props }: NumberFieldPrimitive.Increment.Props) {\n  return (\n    <NumberFieldPrimitive.Increment data-slot=\"number-field-increment\" className={cn(stepper, \"mr-1\", className)} {...props}>\n      {children ?? <PlusIcon className=\"size-4\" />}\n    </NumberFieldPrimitive.Increment>\n  );\n}\n\nfunction NumberFieldInput({ className, ...props }: NumberFieldPrimitive.Input.Props) {\n  return (\n    <NumberFieldPrimitive.Input\n      data-slot=\"number-field-input\"\n      className={cn(\"h-full w-16 bg-transparent text-center text-sm font-medium tabular-nums outline-none\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction NumberFieldScrubArea({ className, children, ...props }: NumberFieldPrimitive.ScrubArea.Props) {\n  return (\n    <NumberFieldPrimitive.ScrubArea data-slot=\"number-field-scrub-area\" className={cn(\"cursor-ew-resize select-none\", className)} {...props}>\n      {children}\n      <NumberFieldPrimitive.ScrubAreaCursor className=\"drop-shadow-[0_1px_1px_#0008] filter\">\n        <svg width=\"26\" height=\"14\" viewBox=\"0 0 24 14\" fill=\"black\" stroke=\"white\">\n          <path d=\"M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z\" />\n        </svg>\n      </NumberFieldPrimitive.ScrubAreaCursor>\n    </NumberFieldPrimitive.ScrubArea>\n  );\n}\n\nfunction NumberFieldStepper(props: Omit<NumberFieldPrimitive.Root.Props, \"children\">) {\n  return (\n    <NumberField {...props}>\n      <NumberFieldGroup>\n        <NumberFieldDecrement />\n        <NumberFieldInput />\n        <NumberFieldIncrement />\n      </NumberFieldGroup>\n    </NumberField>\n  );\n}\n\nexport {\n  NumberField,\n  NumberFieldGroup,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n  NumberFieldScrubArea,\n  NumberFieldStepper,\n};\n"
    }
  ],
  "categories": [
    "components"
  ],
  "meta": {
    "group": "ui",
    "base": "number-field",
    "docs": "https://dxuireact.com/docs/components/number-field"
  }
}