Otp Field

1"use client";
2
3import * as React from "react";
4import { OTPField as BaseOTPField } from "@base-ui/react/otp-field";
5
6import { cn } from "@/lib/utils";
7
8import "./otp-field.css";
9
10function OTPField({
11  className,
12  ...props
13}: React.ComponentProps<typeof BaseOTPField.Root>) {
14  return (
15    <BaseOTPField.Root
16      data-slot="otp-field"
17      className={cn("flex items-center gap-2", className)}
18      {...props}
19    />
20  );
21}
22
23function OTPFieldInput({
24  className,
25  variant = "default",
26  ...props
27}: React.ComponentProps<typeof BaseOTPField.Input> & {
28  variant?: "default" | "elevated";
29}) {
30  return (
31    <BaseOTPField.Input
32      data-slot="otp-field-input"
33      className={cn(
34        // Base styling
35        "flex h-10 w-10 items-center justify-center rounded-lg border bg-clip-padding text-center text-base font-medium sm:h-9 sm:w-9 md:text-sm",
36        variant === "default" ? "bg-input" : "bg-input-elevated",
37        // Selection
38        "selection:bg-primary selection:text-primary-foreground",
39        // Placeholder
40        "placeholder:text-muted-foreground focus:placeholder:text-transparent",
41        // :focus not data-[focused] — data-[focused] propagates to all inputs
42        // in the group, not just the active one.
43        "outline-0 outline-offset-0 outline-transparent transition-[outline-width,outline-offset,outline-color] duration-100 ease-out outline-solid",
44        "focus:outline-ring/50 focus:outline-2 focus:outline-offset-2",
45        // Invalid state
46        "aria-invalid:outline-destructive/50 aria-invalid:outline-2 aria-invalid:outline-offset-2 aria-invalid:outline-solid",
47        // Disabled state
48        "data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-60",
49        className,
50      )}
51      {...props}
52    />
53  );
54}
55
56function OTPFieldSeparator({
57  className,
58  children,
59  ...props
60}: React.ComponentProps<typeof BaseOTPField.Separator>) {
61  return (
62    <BaseOTPField.Separator
63      data-slot="otp-field-separator"
64      className={cn("text-muted-foreground", className)}
65      {...props}
66    >
67      {children ?? <SeparatorDash />}
68    </BaseOTPField.Separator>
69  );
70}
71
72function OTPFieldGroup({ className, ...props }: React.ComponentProps<"div">) {
73  return (
74    <div
75      data-slot="otp-field-group"
76      className={cn("flex items-center gap-2", className)}
77      {...props}
78    />
79  );
80}
81
82// … truncated