Number Field

1"use client";
2
3import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field";
4
5import { cn } from "@/lib/classes";
6
7interface NumberFieldProps extends NumberFieldPrimitive.Root.Props {}
8
9function NumberField({ className, ...props }: NumberFieldProps) {
10  return (
11    <NumberFieldPrimitive.Root
12      className={cn(
13        "flex w-full flex-col items-start gap-2 max-w-[200px]",
14        className
15      )}
16      data-slot="number-field"
17      {...props}
18    />
19  );
20}
21
22interface NumberFieldGroupProps extends NumberFieldPrimitive.Group.Props {}
23
24function NumberFieldGroup({ className, ...props }: NumberFieldGroupProps) {
25  return (
26    <NumberFieldPrimitive.Group
27      className={cn(
28        "relative flex w-full rounded-lg border border-input bg-background dark:bg-input/32 text-sm shadow-xs transition-colors focus-within:border-ring focus-within:ring-[1px] focus-within:ring-ring data-disabled:pointer-events-none data-disabled:opacity-64",
29        className
30      )}
31      data-slot="number-field-group"
32      {...props}
33    />
34  );
35}
36
37interface NumberFieldInputProps extends NumberFieldPrimitive.Input.Props {}
38
39function NumberFieldInput({ className, ...props }: NumberFieldInputProps) {
40  return (
41    <NumberFieldPrimitive.Input
42      className={cn(
43        "flex-1 w-full min-w-0 bg-transparent px-3 py-1.5 text-center outline-none tabular-nums",
44        className
45      )}
46      data-slot="number-field-input"
47      {...props}
48    />
49  );
50}
51
52interface NumberFieldDecrementProps
53  extends NumberFieldPrimitive.Decrement.Props {}
54
55function NumberFieldDecrement({
56  className,
57  ...props
58}: NumberFieldDecrementProps) {
59  return (
60    <NumberFieldPrimitive.Decrement
61      className={cn(
62        "flex shrink-0 cursor-pointer items-center justify-center hover:bg-accent rounded-s-lg px-3 transition-colors disabled:pointer-events-none disabled:opacity-64 disabled:cursor-not-allowed",
63        className
64      )}
65      data-slot="number-field-decrement"
66      {...props}
67    >
68      <MinusIcon />
69    </NumberFieldPrimitive.Decrement>
70  );
71}
72
73interface NumberFieldIncrementProps
74  extends NumberFieldPrimitive.Increment.Props {}
75
76function NumberFieldIncrement({
77  className,
78  ...props
79}: NumberFieldIncrementProps) {
80  return (
81    <NumberFieldPrimitive.Increment
82      className={cn(
83// … truncated