{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "number-input",
  "title": "Number Input",
  "description": "A numeric field with increment and decrement steppers, built on Base UI's number field.",
  "dependencies": [
    "@base-ui/react@^1.6.0",
    "@untitledui/icons@^0.0.22",
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/ui/number-input.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { NumberField as NumberFieldPrimitive } from \"@base-ui/react/number-field\"\nimport { ChevronDown, ChevronUp } from \"@untitledui/icons\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst numberInputVariants = cva(\n  \"group/number-input relative flex w-full min-w-0 items-stretch overflow-hidden rounded-lg border border-input bg-background shadow-xs transition-[color,box-shadow] outline-none has-[[data-slot=number-input-control]:focus-visible]:border-ring has-[[data-slot=number-input-control]:focus-visible]:ring-4 has-[[data-slot=number-input-control]:focus-visible]:ring-ring/25 data-disabled:pointer-events-none data-disabled:opacity-50\",\n  {\n    variants: {\n      size: {\n        default: \"h-10 text-md\",\n        sm: \"h-9 text-sm\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\ntype NumberInputProps = Omit<NumberFieldPrimitive.Root.Props, \"render\"> &\n  VariantProps<typeof numberInputVariants> & {\n    /** Content shown before the numeric input, e.g. a currency symbol. */\n    prefix?: React.ReactNode\n    /** Content shown after the numeric input, e.g. a unit label. */\n    suffix?: React.ReactNode\n    /** Marks the control as invalid (destructive border + ring). */\n    invalid?: boolean\n    placeholder?: string\n    id?: string\n    name?: string\n  }\n\n/**\n * NumberInput — a `NumberField`-based numeric control with stacked\n * increment/decrement stepper buttons, matching `Input` sizing (default\n * 40px). Supports leading/trailing affixes (e.g. a unit or currency\n * symbol), and inherits `NumberField.Root`'s scrub-area, min/max/step and\n * keyboard behaviour when composed with `NumberField.ScrubArea` around a\n * label.\n */\nfunction NumberInput({\n  className,\n  size = \"default\",\n  prefix,\n  suffix,\n  invalid,\n  disabled,\n  placeholder,\n  id,\n  name,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledby,\n  ...props\n}: NumberInputProps) {\n  return (\n    <NumberFieldPrimitive.Root\n      disabled={disabled}\n      id={id}\n      name={name}\n      className={cn(\n        numberInputVariants({ size }),\n        invalid &&\n          \"border-destructive has-[[data-slot=number-input-control]:focus-visible]:border-destructive has-[[data-slot=number-input-control]:focus-visible]:ring-destructive/25\",\n        className\n      )}\n      {...props}\n    >\n      <NumberFieldPrimitive.Group className=\"flex h-full w-full items-stretch\">\n        {prefix ? (\n          <span className=\"flex items-center pl-3 text-sm font-medium text-fg-quaternary select-none\">\n            {prefix}\n          </span>\n        ) : null}\n        <NumberFieldPrimitive.Input\n          data-slot=\"number-input-control\"\n          aria-invalid={invalid}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          placeholder={placeholder}\n          className={cn(\n            \"h-full w-full min-w-0 flex-1 bg-transparent tabular-nums outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed\",\n            prefix ? \"pl-1.5\" : \"pl-3\",\n            suffix ? \"pr-1.5\" : \"pr-3\"\n          )}\n        />\n        {suffix ? (\n          <span className=\"flex items-center pr-3 text-sm font-medium text-fg-quaternary select-none\">\n            {suffix}\n          </span>\n        ) : null}\n        <div className=\"flex h-full flex-col border-l border-input\">\n          <NumberFieldPrimitive.Increment className=\"flex h-1/2 w-8 cursor-pointer items-center justify-center border-b border-input text-fg-quaternary outline-none hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\">\n            <ChevronUp className=\"size-3.5\" />\n          </NumberFieldPrimitive.Increment>\n          <NumberFieldPrimitive.Decrement className=\"flex h-1/2 w-8 cursor-pointer items-center justify-center text-fg-quaternary outline-none hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\">\n            <ChevronDown className=\"size-3.5\" />\n          </NumberFieldPrimitive.Decrement>\n        </div>\n      </NumberFieldPrimitive.Group>\n    </NumberFieldPrimitive.Root>\n  )\n}\n\nexport { NumberInput }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}