pin-input

1"use client"
2 
3import * as React from "react"
4 
5import { type HTMLArkProps, ark } from "@ark-ui/react/factory"
6import {
7  PinInput as PinInputPrimitive,
8  pinInputAnatomy,
9} from "@ark-ui/react/pin-input"
10import { MinusIcon } from "lucide-react"
11 
12import { cn } from "@/lib/utils"
13 
14const parts = pinInputAnatomy.extendWith("group", "separator").build()
15 
16const PinInput = React.forwardRef<
17  React.ElementRef<typeof PinInputPrimitive.Root>,
18  PinInputPrimitive.RootProps
19>(({ children, ...props }, ref) => (
20  <PinInputPrimitive.Root ref={ref} {...props}>
21    {children}
22    <PinInputPrimitive.HiddenInput />
23  </PinInputPrimitive.Root>
24))
25PinInput.displayName = "PinInput"
26 
27const PinInputContext = PinInputPrimitive.Context
28 
29const PinInputControl = React.forwardRef<
30  React.ElementRef<typeof PinInputPrimitive.Control>,
31  PinInputPrimitive.ControlProps
32>(({ className, ...props }, ref) => (
33  <PinInputPrimitive.Control
34    ref={ref}
35    className={cn("flex items-center gap-2", className)}
36    {...props}
37  />
38))
39PinInputControl.displayName = "PinInputControl"
40 
41const PinInputGroup = React.forwardRef<
42  React.ElementRef<"div">,
43  HTMLArkProps<"div">
44>(({ className, ...props }, ref) => (
45  <ark.div
46    ref={ref}
47    {...parts.group.attrs}
48    className={cn("flex items-center", className)}
49    {...props}
50  />
51))
52PinInputGroup.displayName = "PinInputGroup"
53 
54const PinInputInput = React.forwardRef<
55  React.ElementRef<typeof PinInputPrimitive.Input>,
56  PinInputPrimitive.InputProps
57>(({ className, ...props }, ref) => (
58  <PinInputPrimitive.Input
59    ref={ref}
60    className={cn(
61      "relative h-9 w-9 border-input border-y border-r text-center text-sm shadow-xs outline-none transition-all placeholder:text-center placeholder:text-muted-foreground/70 first:rounded-l-md first:border-l last:rounded-r-md dark:bg-input/30",
62      "focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
63      "aria-invalid:border-destructive focus-visible:aria-invalid:ring-destructive/20 dark:focus-visible:aria-invalid:ring-destructive/40",
64      className
65    )}
66    {...props}
67  />
68))
69PinInputInput.displayName = "PinInputInput"
70 
71const PinInputLabel = React.forwardRef<
72  React.ElementRef<typeof PinInputPrimitive.Label>,
73  PinInputPrimitive.LabelProps
74>(({ className, ...props }, ref) => (
75  <PinInputPrimitive.Label
76    ref={ref}
77    className={cn(
78// … truncated