OTP Field

1"use client";
2 
3import "./otp-field.css";
4import { OTPField as BaseOTPField } from "@base-ui/react/otp-field";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { OTPFieldContext, useOTPFieldContext } from "./otp-field.context";
9import { otpFieldVariants, type OTPFieldVariants } from "./otp-field.variants";
10 
11export type OTPFieldRootProps = OTPFieldVariants &
12  React.ComponentProps<typeof BaseOTPField.Root>;
13 
14export const OTPFieldRoot = ({ children, className, size, ...props }: OTPFieldRootProps) => {
15  const slots = otpFieldVariants({ size });
16 
17  return (
18    <OTPFieldContext.Provider value={{ slots }}>
19      <BaseOTPField.Root className={cn(slots.root(), className)} {...props}>
20        {children}
21      </BaseOTPField.Root>
22    </OTPFieldContext.Provider>
23  );
24};
25 
26export type OTPFieldInputProps = React.ComponentProps<typeof BaseOTPField.Input>;
27 
28export const OTPFieldInput = ({ className, ...props }: OTPFieldInputProps) => {
29  const { slots } = useOTPFieldContext();
30  return <BaseOTPField.Input className={cn(slots.input(), className)} {...props} />;
31};
32 
33export type OTPFieldSeparatorProps = React.ComponentProps<typeof BaseOTPField.Separator>;
34 
35export const OTPFieldSeparator = ({ className, ...props }: OTPFieldSeparatorProps) => {
36  const { slots } = useOTPFieldContext();
37  return <BaseOTPField.Separator className={cn(slots.separator(), className)} {...props} />;
38};