Fix collapsed OTP input boxes in portal login (#2153)

* fix: update OTP input to modern children + context API

The InputOTPSlot component used the deprecated render prop pattern
from input-otp v1.x which caused the OTP boxes to collapse. Updated
to the modern children-based API using OTPInputContext, matching the
approach used by @trycompai/design-system.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: handle undefined slot in InputOTPSlot for type safety

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: tofikwest

apps/portal/src/app/components/otp-form.tsx

@@ -71,17 +71,13 @@ export function OtpForm({ email }: OtpFormProps) {
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <InputOTP
-                  maxLength={INPUT_LENGTH}
-                  {...field}
-                  render={({ slots }) => (
-                    <InputOTPGroup>
-                      {slots.map((slot, index) => (
-                        <InputOTPSlot key={index} {...slot} />
-                      ))}
-                    </InputOTPGroup>
-                  )}
-                />
+                <InputOTP maxLength={INPUT_LENGTH} {...field}>
+                  <InputOTPGroup>
+                    {Array.from({ length: INPUT_LENGTH }, (_, i) => (
+                      <InputOTPSlot key={i} index={i} />
+                    ))}
+                  </InputOTPGroup>
+                </InputOTP>
               </FormControl>
               <FormMessage />
             </FormItem>

packages/ui/src/components/input-otp.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { DashIcon } from '@radix-ui/react-icons';
-import { OTPInput, type SlotProps } from 'input-otp';
+import { OTPInput, OTPInputContext } from 'input-otp';
 import * as React from 'react';
 import { cn } from '../utils';
 
@@ -23,13 +23,16 @@ InputOTPGroup.displayName = 'InputOTPGroup';
 
 const InputOTPSlot = React.forwardRef<
   React.ElementRef<'div'>,
-  SlotProps & React.ComponentPropsWithoutRef<'div'>
->(({ char, hasFakeCaret, isActive, className, placeholderChar, ...props }, ref) => {
+  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(
-        'border-input relative flex h-16 w-16 items-center justify-center border-y border-r text-2xl transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+        'border-input relative flex h-10 w-10 items-center justify-center border-y border-r text-lg transition-all first:rounded-l-md first:border-l last:rounded-r-md',
         isActive && 'ring-ring z-10 ring-1',
         className,
       )}