Number Field

1"use client";
2
3import { cva, type VariantProps } from "class-variance-authority";
4import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
5import { HugeiconsIcon } from "@hugeicons/react";
6import { ArrowDown01Icon, ArrowUp01Icon } from "@hugeicons/core-free-icons";
7
8import { cn } from "@/lib/utils";
9
10const numberFieldGroupVariants = cva(
11  [
12    "flex rounded-lg",
13    // Outline on the wrapper so focus/invalid rings wrap the full cluster, not just the input.
14    "outline-0 outline-offset-0 outline-transparent transition-[outline-width,outline-offset,outline-color] duration-100 ease-out outline-solid",
15    "has-[[data-slot=number-field-input]:focus-visible]:outline-ring/50 has-[[data-slot=number-field-input]:focus-visible]:outline-2 has-[[data-slot=number-field-input]:focus-visible]:outline-offset-2",
16    "has-[[data-slot=number-field-input][aria-invalid=true]]:outline-destructive/50 has-[[data-slot=number-field-input][aria-invalid=true]]:outline-2 has-[[data-slot=number-field-input][aria-invalid=true]]:outline-offset-2",
17    // With a stacked stepper (no decrement capping the left edge), the input
18    // rounds and borders its own left side automatically.
19    "has-[[data-slot=number-field-stepper]]:[&>[data-slot=number-field-input]]:rounded-l-lg has-[[data-slot=number-field-stepper]]:[&>[data-slot=number-field-input]]:border-l",
20  ],
21  {
22    variants: {
23      variant: {
24        // Opaque base: --outline-hover is a -5% darken, giving a sharp hover delta.
25        default:
26          "[--number-field-bg:var(--input)] [--number-field-hover:var(--outline-hover)]",
27        // Translucent base: --surface-hover is an alpha overlay, preserving translucency.
28        elevated:
29          "[--number-field-bg:var(--input-elevated)] [--number-field-hover:var(--surface-hover)]",
30      },
31    },
32    defaultVariants: {
33      variant: "default",
34    },
35  },
36);
37
38function NumberField({ className, ...props }: BaseNumberField.Root.Props) {
39  return (
40    <BaseNumberField.Root
41      data-slot="number-field"
42      className={cn("flex flex-col items-start gap-1", className)}
43      {...props}
44    />
45  );
46}
47
48function NumberFieldGroup({
49  className,
50  variant,
51  ...props
52}: BaseNumberField.Group.Props &
53  VariantProps<typeof numberFieldGroupVariants>) {
54  return (
55    <BaseNumberField.Group
56      data-slot="number-field-group"
57      className={cn(numberFieldGroupVariants({ variant }), className)}
58// … truncated