{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "number-field",
	"dependencies": [],
	"registryDependencies": [],
	"files": [
		{
			"path": "ui/number-field.tsx",
			"content": "import * as React from \"react\"\nimport { NumberField as BaseNumberField } from \"@base-ui/react/number-field\"\nimport { MinusIcon, MoveHorizontalIcon, PlusIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype NumberFieldContextType = {\n\tid: string\n}\n\nconst NumberFieldContext = React.createContext<NumberFieldContextType | null>(\n\tnull\n)\n\nconst useNumberField = () => {\n\tconst context = React.useContext(NumberFieldContext)\n\n\tif (!context) {\n\t\tthrow new Error(\"useNumberField must be used within a NumberField\")\n\t}\n\n\treturn context\n}\n\nfunction NumberField({\n\tid,\n\tclassName,\n\tchildren,\n\t...props\n}: React.ComponentProps<typeof BaseNumberField.Root>) {\n\tlet fieldId = React.useId()\n\n\tif (id) {\n\t\tfieldId = id\n\t}\n\n\tconst controllerClassName =\n\t\t\"hover:border-ring/70 bg-input flex size-9 items-center justify-center border transition-colors select-none data-disabled:opacity-50 data-disabled:pointer-events-none\"\n\n\treturn (\n\t\t<NumberFieldContext.Provider value={{ id: fieldId }}>\n\t\t\t<BaseNumberField.Root\n\t\t\t\tid={fieldId}\n\t\t\t\tclassName={cn(\"flex flex-col items-start gap-1\", className)}\n\t\t\t\tdata-slot=\"number-field\"\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<BaseNumberField.Group className=\"text-foreground flex rounded-md shadow-xs transition-shadow\">\n\t\t\t\t\t<BaseNumberField.Decrement\n\t\t\t\t\t\tclassName={cn(controllerClassName, \"rounded-l-md\")}\n\t\t\t\t\t\tdata-slot=\"number-field-decrement\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<MinusIcon />\n\t\t\t\t\t</BaseNumberField.Decrement>\n\t\t\t\t\t<BaseNumberField.Input\n\t\t\t\t\t\tclassName=\"hover:border-ring/70 h-9 w-20 border-y text-center text-sm tabular-nums transition-colors focus:z-1 focus:outline-[3px] focus:-outline-offset-1 data-disabled:pointer-events-none data-disabled:opacity-50\"\n\t\t\t\t\t\tdata-slot=\"number-field-input\"\n\t\t\t\t\t/>\n\t\t\t\t\t<BaseNumberField.Increment\n\t\t\t\t\t\tclassName={cn(controllerClassName, \"rounded-r-md\")}\n\t\t\t\t\t\tdata-slot=\"number-field-increment\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<PlusIcon />\n\t\t\t\t\t</BaseNumberField.Increment>\n\t\t\t\t</BaseNumberField.Group>\n\t\t\t</BaseNumberField.Root>\n\t\t</NumberFieldContext.Provider>\n\t)\n}\n\nfunction NumberFieldScrubArea({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof BaseNumberField.ScrubArea>) {\n\tconst { id: fieldId } = useNumberField()\n\n\treturn (\n\t\t<BaseNumberField.ScrubArea\n\t\t\tclassName={cn(\"cursor-ew-resize\", className)}\n\t\t\tdata-slot=\"number-field-scrub-area\"\n\t\t\t{...props}\n\t\t>\n\t\t\t<label\n\t\t\t\thtmlFor={fieldId}\n\t\t\t\tclassName=\"text-foreground cursor-ew-resize text-sm font-medium\"\n\t\t\t\tdata-slot=\"number-field-label\"\n\t\t\t>\n\t\t\t\tAmount\n\t\t\t</label>\n\t\t\t<BaseNumberField.ScrubAreaCursor\n\t\t\t\tclassName=\"drop-shadow-sm filter\"\n\t\t\t\tdata-slot=\"number-field-scrub-area-cursor\"\n\t\t\t>\n\t\t\t\t<MoveHorizontalIcon className=\"size-4.5\" />\n\t\t\t</BaseNumberField.ScrubAreaCursor>\n\t\t</BaseNumberField.ScrubArea>\n\t)\n}\n\nexport { NumberField, NumberFieldScrubArea }\n",
			"type": "registry:ui",
			"target": ""
		}
	],
	"type": "registry:ui"
}