{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "number-field",
  "title": "Number Field",
  "description": "A numeric input element with increment and decrement buttons, and a scrub area.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/number-field.tsx",
      "content": "\"use client\";\n\nimport { NumberField as BaseNumberField } from \"@base-ui/react/number-field\";\nimport { Minus, Plus } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/registry/lib/utils\";\n\nconst NumberFieldRoot = ({\n  className,\n  ...props\n}: BaseNumberField.Root.Props) => (\n  <BaseNumberField.Root\n    className={cn(\"grid gap-1.5\", className)}\n    data-slot=\"number-field\"\n    {...props}\n  />\n);\n\nconst NumberFieldGroup = ({\n  className,\n  ...props\n}: BaseNumberField.Group.Props) => (\n  <BaseNumberField.Group\n    className={cn(\"w-full overflow-hidden data-disabled:opacity-50\", className)}\n    data-slot=\"number-field-group\"\n    {...props}\n  />\n);\n\nconst NumberFieldInput = ({\n  className,\n  ...props\n}: BaseNumberField.Input.Props) => (\n  <BaseNumberField.Input\n    className={cn(\n      \"tabular-nums outline-none\",\n      \"focus-visible:outline focus-visible:outline-ring focus-visible:ring-4 focus-visible:ring-ring/10\",\n      \"aria-invalid:outline aria-invalid:outline-destructive/80 aria-invalid:ring-4 aria-invalid:ring-destructive/20\",\n      className,\n    )}\n    data-slot=\"number-field-input\"\n    {...props}\n  />\n);\n\nconst NumberFieldDecrement = ({\n  className,\n  children,\n  ...props\n}: BaseNumberField.Decrement.Props) => (\n  <BaseNumberField.Decrement\n    className={cn(\n      \"flex items-center justify-center select-none\",\n      \"disabled:opacity-50\",\n      className,\n    )}\n    data-slot=\"number-field-decrement\"\n    {...props}\n  >\n    {children}\n  </BaseNumberField.Decrement>\n);\n\nconst NumberFieldIncrement = ({\n  className,\n  children,\n  ...props\n}: BaseNumberField.Increment.Props) => (\n  <BaseNumberField.Increment\n    className={cn(\n      \"flex items-center justify-center select-none\",\n      \"disabled:opacity-50\",\n      className,\n    )}\n    data-slot=\"number-field-increment\"\n    {...props}\n  >\n    {children}\n  </BaseNumberField.Increment>\n);\n\nconst NumberFieldScrubAreaRoot = ({\n  className,\n  ...props\n}: BaseNumberField.ScrubArea.Props) => (\n  <BaseNumberField.ScrubArea\n    className={cn(\"cursor-ew-resize\", className)}\n    data-slot=\"number-field-scrub-area\"\n    {...props}\n  />\n);\n\nconst NumberFieldScrubAreaCursor = (\n  props: BaseNumberField.ScrubAreaCursor.Props,\n) => (\n  <BaseNumberField.ScrubAreaCursor\n    data-slot=\"number-field-scrub-area\"\n    {...props}\n  />\n);\n\nfunction CursorGrowIcon(props: React.ComponentProps<\"svg\">) {\n  return (\n    <svg\n      fill=\"black\"\n      height=\"14\"\n      stroke=\"white\"\n      viewBox=\"0 0 24 14\"\n      width=\"26\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <title>cursor icon</title>\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  );\n}\n\nconst NumberFieldScrubArea = ({\n  className,\n  children,\n  ...props\n}: BaseNumberField.ScrubArea.Props) => (\n  <BaseNumberField.ScrubArea\n    className={cn(\n      \"flex cursor-ew-resize items-center gap-1.5 select-none text-sm font-medium text-foreground data-disabled:opacity-50\",\n      className,\n    )}\n    data-slot=\"number-field-scrub-area\"\n    {...props}\n  >\n    <BaseNumberField.ScrubAreaCursor data-slot=\"number-field-scrub-area-cursor\">\n      <CursorGrowIcon />\n    </BaseNumberField.ScrubAreaCursor>\n    {children}\n  </BaseNumberField.ScrubArea>\n);\n\ntype NumberFieldProps = BaseNumberField.Root.Props & {\n  inputRef?: React.Ref<HTMLInputElement>;\n};\n\nfunction NumberField({\n  className,\n  children,\n  inputRef,\n  ...props\n}: NumberFieldProps) {\n  return (\n    <BaseNumberField.Root\n      className=\"flex flex-col gap-2 data-disabled:opacity-50  data-disabled:pointer-events-none\"\n      data-slot=\"number-field\"\n      {...props}\n    >\n      {children}\n      <BaseNumberField.Group\n        className={cn(\n          \"flex h-9 w-full overflow-hidden rounded-md border border-input bg-transparent shadow-xs\",\n          \"data-invalid:border-destructive data-invalid:ring-destructive/20\",\n        )}\n        data-slot=\"number-field-group\"\n      >\n        <BaseNumberField.Decrement\n          className={cn(\n            \"flex items-center justify-center shrink-0 h-full aspect-square\",\n            \"border-r border-input bg-transparent text-foreground\",\n            \"transition-colors hover:bg-primary/8\",\n            \"data-disabled:bg-transparent\",\n          )}\n          data-slot=\"number-field-decrement\"\n        >\n          <Minus className=\"size-4\" />\n        </BaseNumberField.Decrement>\n        <BaseNumberField.Input\n          className={cn(\n            \"flex-1 min-w-0 px-2.5 text-center bg-transparent dark:bg-input/30 text-sm tabular-nums outline-none rounded-xs placeholder:text-muted-foreground focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/80 data-invalid:border-destructive/30 data-invalid:ring-1 data-invalid:ring-destructive/50 data-invalid:ring-offset-1 data-invalid:ring-offset-destructive/5\",\n          )}\n          data-slot=\"number-field-input\"\n          ref={inputRef}\n        />\n        <BaseNumberField.Increment\n          className={cn(\n            \"flex items-center justify-center shrink-0 h-full aspect-square\",\n            \"border-l border-input bg-transparent text-foreground\",\n            \"transition-colors hover:bg-primary/8\",\n            \"data-disabled:bg-transparent\",\n          )}\n          data-slot=\"number-field-increment\"\n        >\n          <Plus className=\"size-4\" />\n        </BaseNumberField.Increment>\n      </BaseNumberField.Group>\n    </BaseNumberField.Root>\n  );\n}\n\nexport {\n  NumberFieldRoot,\n  NumberFieldGroup,\n  NumberFieldInput,\n  NumberFieldIncrement,\n  NumberFieldDecrement,\n  NumberFieldScrubAreaRoot,\n  NumberFieldScrubAreaCursor,\n  // Composite component\n  NumberField,\n  NumberFieldScrubArea,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}