number-field

1import * as React from "react"
2import { NumberField as BaseNumberField } from "@base-ui/react/number-field"
3import { MinusIcon, MoveHorizontalIcon, PlusIcon } from "lucide-react"
4 
5import { cn } from "@/lib/utils"
6 
7type NumberFieldContextType = {
8	id: string
9}
10 
11const NumberFieldContext = React.createContext<NumberFieldContextType | null>(
12	null
13)
14 
15const useNumberField = () => {
16	const context = React.useContext(NumberFieldContext)
17 
18	if (!context) {
19		throw new Error("useNumberField must be used within a NumberField")
20	}
21 
22	return context
23}
24 
25function NumberField({
26	id,
27	className,
28	children,
29	...props
30}: React.ComponentProps<typeof BaseNumberField.Root>) {
31	let fieldId = React.useId()
32 
33	if (id) {
34		fieldId = id
35	}
36 
37	const controllerClassName =
38		"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"
39 
40	return (
41		<NumberFieldContext.Provider value={{ id: fieldId }}>
42			<BaseNumberField.Root
43				id={fieldId}
44				className={cn("flex flex-col items-start gap-1", className)}
45				data-slot="number-field"
46				{...props}
47			>
48				{children}
49				<BaseNumberField.Group className="text-foreground flex rounded-md shadow-xs transition-shadow">
50					<BaseNumberField.Decrement
51						className={cn(controllerClassName, "rounded-l-md")}
52						data-slot="number-field-decrement"
53					>
54						<MinusIcon />
55					</BaseNumberField.Decrement>
56					<BaseNumberField.Input
57						className="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"
58						data-slot="number-field-input"
59					/>
60					<BaseNumberField.Increment
61						className={cn(controllerClassName, "rounded-r-md")}
62						data-slot="number-field-increment"
63					>
64						<PlusIcon />
65					</BaseNumberField.Increment>
66				</BaseNumberField.Group>
67			</BaseNumberField.Root>
68		</NumberFieldContext.Provider>
69	)
70}
71 
72function NumberFieldScrubArea({
73	className,
74	...props
75}: React.ComponentProps<typeof BaseNumberField.ScrubArea>) {
76	const { id: fieldId } = useNumberField()
77 
78	return (
79		<BaseNumberField.ScrubArea
80			className={cn("cursor-ew-resize", className)}
81			data-slot="number-field-scrub-area"
82			{...props}
83		>
84			<label
85				htmlFor={fieldId}
86				className="text-foreground cursor-ew-resize text-sm font-medium"
87				data-slot="number-field-label"
88			>
89				Amount
90			</label>
91// … truncated