Input OTP

1"use client";
2 
3import { Dot } from "@phosphor-icons/react";
4import { OTPInput, type RenderProps, type SlotProps } from "input-otp";
5import * as React from "react";
6 
7import { type MaterialAxisProps, materialSurface, splitAxisProps } from "@/lib/material";
8import { cn } from "@/lib/utils";
9 
10/* Root role: bordered adaptive glass. */
11const ROOT_ROLE = {
12  border: true,
13};
14 
15/* Slot role: borderless adaptive glass (the slot draws its own border-y/border-r chrome). */
16const SLOT_ROLE = {};
17 
18const InputOTP = React.forwardRef<
19  React.ElementRef<typeof OTPInput>,
20  Omit<React.ComponentPropsWithoutRef<typeof OTPInput>, "render" | "children"> &
21    MaterialAxisProps & {
22      variant?: "default" | "glass";
23      render?: (props: RenderProps) => React.ReactNode;
24    }
25>(({ className, variant = "glass", render, ...props }, ref) => {
26  const [axes, rest] = splitAxisProps(props);
27  /* Variant classes carry BEHAVIOR only; the surface comes from materialSurface. */
28  const variants = {
29    default: "",
30    glass: "rounded-lg",
31  };
32 
33  const m = materialSurface(variant === "default" ? null : ROOT_ROLE, axes);
34 
35  const defaultRender = ({ slots }: { slots: SlotProps[] }) => (
36    <InputOTPGroup variant={variant}>
37      {slots.map((slot, index) => (
38        <InputOTPSlot key={index} {...slot} variant={variant} />
39      ))}
40    </InputOTPGroup>
41  );
42 
43  return (
44    <OTPInput
45      ref={ref}
46      data-slot="input-otp"
47      data-material={m?.["data-material"]}
48      containerClassName={cn(m?.className, "flex items-center gap-2 has-disabled:opacity-50", variants[variant], className)}
49      className="disabled:cursor-not-allowed"
50      render={render || defaultRender}
51      {...rest}
52    />
53  );
54});
55InputOTP.displayName = "InputOTP";
56 
57const InputOTPGroup = React.forwardRef<
58  React.ElementRef<"div">,
59  React.ComponentPropsWithoutRef<"div"> & {
60    variant?: "default" | "glass";
61    /** Resting glow (folded from the glass wrapper). */
62    glow?: boolean;
63  }
64>(({ className, variant = "glass", glow, ...props }, ref) => {
65  const variants = {
66    default: "flex items-center gap-1",
67    glass: "flex items-center gap-1",
68  };
69 
70  return <div ref={ref} data-slot="input-otp-group" className={cn(variants[variant], glow && "glass-glow", className)} {...props} />;
71});
72InputOTPGroup.displayName = "InputOTPGroup";
73 
74const InputOTPSlot = React.forwardRef<
75  React.ElementRef<"div">,
76  SlotProps &
77    React.ComponentPropsWithoutRef<"div"> &
78    MaterialAxisProps & {
79// … truncated