feat(input-otp) added one-time-code input to shadcn-ui examples

examples/shadcn-ui/package.json

@@ -27,6 +27,7 @@
 		"clsx": "^2.1.0",
 		"cmdk": "^0.2.1",
 		"date-fns": "^3.3.1",
+		"input-otp": "^1.2.2",
 		"lucide-react": "^0.338.0",
 		"react": "^18.2.0",
 		"react-day-picker": "^8.10.0",

examples/shadcn-ui/src/App.tsx

@@ -15,6 +15,7 @@ import { SwitchConform } from './components/conform/Switch';
 import { TextareaConform } from './components/conform/Textarea';
 import { ToggleGroupConform } from './components/conform/ToggleGroup';
 import { CheckboxGroupConform } from './components/conform/CheckboxGroup';
+import { InputOTPConform } from './components/conform/InputOTP';
 
 const UserSubscriptionSchema = z.object({
 	name: z
@@ -46,6 +47,7 @@ const UserSubscriptionSchema = z.object({
 	interests: z
 		.array(z.string())
 		.min(3, 'You must select at least three interest'),
+	code: z.string().length(6, 'Code must be 6 characters long'),
 });
 
 function App() {
@@ -182,6 +184,11 @@ function App() {
 						<FieldError>{fields.interests.errors}</FieldError>
 					)}
 				</Field>
+				<Field>
+					<Label htmlFor={fields.code.id}>Code</Label>
+					<InputOTPConform meta={fields.code} length={6} />
+					{fields.code.errors && <FieldError>{fields.code.errors}</FieldError>}
+				</Field>
 
 				<div className="flex gap-2">
 					<Button type="submit">Submit</Button>

examples/shadcn-ui/src/components/conform/InputOTP.tsx

@@ -0,0 +1,49 @@
+import {
+	type FieldMetadata,
+	unstable_useControl as useControl,
+} from '@conform-to/react';
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp';
+import { type ElementRef, useRef } from 'react';
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/input-otp';
+
+export function InputOTPConform({
+	meta,
+	length = 6,
+	pattern = REGEXP_ONLY_DIGITS_AND_CHARS,
+}: {
+	meta: FieldMetadata<string>;
+	length: number;
+	pattern?: string;
+}) {
+	const inputOTPRef = useRef<ElementRef<typeof InputOTP>>(null);
+	const control = useControl(meta);
+
+	return (
+		<>
+			<input
+				ref={control.register}
+				name={meta.name}
+				defaultValue={meta.initialValue}
+				tabIndex={-1}
+				className="sr-only"
+				onFocus={() => {
+					inputOTPRef.current?.focus();
+				}}
+			/>
+			<InputOTP
+				ref={inputOTPRef}
+				value={control.value ?? ''}
+				onChange={control.change}
+				onBlur={control.blur}
+				maxLength={6}
+				pattern={pattern}
+			>
+				<InputOTPGroup>
+					{new Array(length).fill(0).map((_, index) => (
+						<InputOTPSlot key={index} index={index} />
+					))}
+				</InputOTPGroup>
+			</InputOTP>
+		</>
+	);
+}

examples/shadcn-ui/src/components/ui/input-otp.tsx

@@ -0,0 +1,69 @@
+import { OTPInput, OTPInputContext } from 'input-otp';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+import { Dot } from 'lucide-react';
+
+const InputOTP = React.forwardRef<
+	React.ElementRef<typeof OTPInput>,
+	React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+	<OTPInput
+		ref={ref}
+		containerClassName={cn(
+			'flex items-center gap-2 has-[:disabled]:opacity-50',
+			containerClassName,
+		)}
+		className={cn('disabled:cursor-not-allowed', className)}
+		{...props}
+	/>
+));
+InputOTP.displayName = 'InputOTP';
+
+const InputOTPGroup = React.forwardRef<
+	React.ElementRef<'div'>,
+	React.ComponentPropsWithoutRef<'div'>
+>(({ className, ...props }, ref) => (
+	<div ref={ref} className={cn('flex items-center', className)} {...props} />
+));
+InputOTPGroup.displayName = 'InputOTPGroup';
+
+const InputOTPSlot = React.forwardRef<
+	React.ElementRef<'div'>,
+	React.ComponentPropsWithoutRef<'div'> & { index: number }
+>(({ index, className, ...props }, ref) => {
+	const inputOTPContext = React.useContext(OTPInputContext);
+	const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+
+	return (
+		<div
+			ref={ref}
+			className={cn(
+				'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+				isActive && 'z-10 ring-2 ring-ring ring-offset-background',
+				className,
+			)}
+			{...props}
+		>
+			{char}
+			{hasFakeCaret && (
+				<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+					<div className="animate-caret-blink h-4 w-px bg-foreground duration-1000" />
+				</div>
+			)}
+		</div>
+	);
+});
+InputOTPSlot.displayName = 'InputOTPSlot';
+
+const InputOTPSeparator = React.forwardRef<
+	React.ElementRef<'div'>,
+	React.ComponentPropsWithoutRef<'div'>
+>(({ ...props }, ref) => (
+	<div ref={ref} role="separator" {...props}>
+		<Dot />
+	</div>
+));
+InputOTPSeparator.displayName = 'InputOTPSeparator';
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

examples/shadcn-ui/tailwind.config.js

@@ -28,10 +28,15 @@ export default {
 					from: { height: 'var(--radix-accordion-content-height)' },
 					to: { height: '0' },
 				},
+				'caret-blink': {
+					'0%,70%,100%': { opacity: '1' },
+					'20%,50%': { opacity: '0' },
+				},
 			},
 			animation: {
 				'accordion-down': 'accordion-down 0.2s ease-out',
 				'accordion-up': 'accordion-up 0.2s ease-out',
+				'caret-blink': 'caret-blink 1.25s ease-out infinite',
 			},
 		},
 	},