{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "number-field",
  "title": "Number Field",
  "author": "Matthew Blode",
  "description": "A numeric input with increment, decrement, and scrubbing interactions.",
  "dependencies": ["@base-ui/react"],
  "files": [
    {
      "path": "ui/number-field.tsx",
      "content": "\"use client\";\n\nimport { NumberField as NumberFieldPrimitive } from \"@base-ui/react/number-field\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst NumberField = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof NumberFieldPrimitive.Root>) => (\n  <NumberFieldPrimitive.Root\n    className={cn(\"flex w-full max-w-xs flex-col gap-2\", className)}\n    data-slot=\"number-field\"\n    {...props}\n  />\n);\n\nconst NumberFieldScrubArea = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof NumberFieldPrimitive.ScrubArea>) => (\n  <NumberFieldPrimitive.ScrubArea\n    className={cn(\n      \"inline-flex w-fit cursor-ew-resize select-none items-center gap-2 rounded-md px-1 py-0.5 text-muted-foreground text-sm leading-none data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className,\n    )}\n    data-slot=\"number-field-scrub-area\"\n    {...props}\n  />\n);\n\nconst NumberFieldScrubAreaCursor = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof NumberFieldPrimitive.ScrubAreaCursor>) => (\n  <NumberFieldPrimitive.ScrubAreaCursor\n    className={cn(\n      \"inline-flex size-6 items-center justify-center rounded-md bg-foreground text-background shadow-sm\",\n      className,\n    )}\n    data-slot=\"number-field-scrub-area-cursor\"\n    {...props}\n  />\n);\n\nconst NumberFieldGroup = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof NumberFieldPrimitive.Group>) => (\n  <NumberFieldPrimitive.Group\n    className={cn(\n      \"flex h-[var(--field-height)] w-full items-center overflow-hidden rounded-[var(--field-radius)] border border-input bg-card shadow-input transition-colors focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/15 focus-within:ring-offset-1 focus-within:ring-offset-background data-disabled:opacity-50\",\n      className,\n    )}\n    data-slot=\"number-field-group\"\n    {...props}\n  />\n);\n\nconst NumberFieldDecrement = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof NumberFieldPrimitive.Decrement>) => (\n  <NumberFieldPrimitive.Decrement\n    className={cn(\n      \"inline-flex h-full w-10 items-center justify-center border-input border-r text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50\",\n      className,\n    )}\n    data-slot=\"number-field-decrement\"\n    {...props}\n  />\n);\n\nconst NumberFieldInput = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof NumberFieldPrimitive.Input>) => (\n  <NumberFieldPrimitive.Input\n    className={cn(\n      \"h-full min-w-0 flex-1 border-0 bg-transparent px-3 py-0 text-center font-sans text-base text-foreground leading-none outline-none placeholder:text-placeholder-foreground disabled:cursor-not-allowed\",\n      className,\n    )}\n    data-slot=\"number-field-input\"\n    {...props}\n  />\n);\n\nconst NumberFieldIncrement = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof NumberFieldPrimitive.Increment>) => (\n  <NumberFieldPrimitive.Increment\n    className={cn(\n      \"inline-flex h-full w-10 items-center justify-center border-input border-l text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50\",\n      className,\n    )}\n    data-slot=\"number-field-increment\"\n    {...props}\n  />\n);\n\nexport {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n  NumberFieldScrubArea,\n  NumberFieldScrubAreaCursor,\n};\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}