number-input

1"use client"
2 
3import * as React from "react"
4 
5import { NumberInput as NumberInputPrimitive } from "@ark-ui/react/number-input"
6 
7import { cn } from "@/lib/utils"
8 
9const NumberInput = NumberInputPrimitive.Root
10 
11const NumberInputControl = React.forwardRef<
12  React.ElementRef<typeof NumberInputPrimitive.Control>,
13  NumberInputPrimitive.ControlProps
14>(({ className, ...props }, ref) => (
15  <NumberInputPrimitive.Control
16    ref={ref}
17    className={cn(
18      "relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-md border border-input text-sm shadow-xs outline-none transition-[color,box-shadow] data-focus:border-ring data-disabled:opacity-50 data-focus:ring-[3px] data-focus:ring-ring/50 data-focus:has-aria-invalid:border-destructive data-focus:has-aria-invalid:ring-destructive/20 dark:data-focus:has-aria-invalid:ring-destructive/40",
19      className
20    )}
21    {...props}
22  />
23))
24NumberInputControl.displayName = "NumberInputControl"
25 
26const NumberInputIncrementTrigger = React.forwardRef<
27  React.ElementRef<typeof NumberInputPrimitive.IncrementTrigger>,
28  NumberInputPrimitive.IncrementTriggerProps
29>(({ className, children, ...props }, ref) => (
30  <NumberInputPrimitive.IncrementTrigger
31    ref={ref}
32    className={cn(
33      "-me-px flex h-1/2 w-6 flex-1 items-center justify-center border border-input bg-background text-muted-foreground/80 text-sm transition-[color,box-shadow] hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
34      className
35    )}
36    {...props}
37  >
38    {children}
39  </NumberInputPrimitive.IncrementTrigger>
40))
41NumberInputIncrementTrigger.displayName = "NumberInputIncrementTrigger"
42 
43const NumberInputDecrementTrigger = React.forwardRef<
44  React.ElementRef<typeof NumberInputPrimitive.DecrementTrigger>,
45  NumberInputPrimitive.DecrementTriggerProps
46>(({ className, children, ...props }, ref) => (
47  <NumberInputPrimitive.DecrementTrigger
48    ref={ref}
49    className={cn(
50      "-me-px -mt-px flex h-1/2 w-6 flex-1 items-center justify-center border border-input bg-background text-muted-foreground/80 text-sm transition-[color,box-shadow] hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
51      className
52    )}
53    {...props}
54  >
55    {children}
56  </NumberInputPrimitive.DecrementTrigger>
57))
58NumberInputDecrementTrigger.displayName = "NumberInputDecrementTrigger"
59 
60// … truncated