create-stitchkit 0.1.0

package/template/packages/frontend/src/components/ui/copyable-text.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { IconCheck, IconCopy } from '@tabler/icons-react';
+import { type ReactNode, useCallback, useState } from 'react';
+import { cn } from '@/lib/utils';
+
+export interface CopyableTextProps {
+  /** Value to copy to clipboard */
+  value: string;
+  /** Custom display content (defaults to value) */
+  children?: ReactNode;
+  /** Additional class names */
+  className?: string;
+  /** Icon size (default: 14) */
+  iconSize?: number;
+  /** Duration to show success state in ms (default: 2000) */
+  successDuration?: number;
+  /** Callback after successful copy */
+  onCopy?: (value: string) => void;
+}
+
+/**
+ * Text with click-to-copy functionality.
+ * Shows copy icon on hover, checkmark on success.
+ *
+ * @example
+ * // Basic usage
+ * <CopyableText value={email} />
+ *
+ * // Custom display
+ * <CopyableText value={fullId}>
+ *   {shortId}
+ * </CopyableText>
+ *
+ * // Custom styling
+ * <CopyableText value={code} className="font-mono text-xs" />
+ */
+export function CopyableText({
+  value,
+  children,
+  className,
+  iconSize = 14,
+  successDuration = 2000,
+  onCopy,
+}: CopyableTextProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      onCopy?.(value);
+      setTimeout(() => setCopied(false), successDuration);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  }, [value, successDuration, onCopy]);
+
+  return (
+    <button
+      type='button'
+      onClick={handleCopy}
+      className={cn(
+        'group inline-flex items-center gap-1.5 text-left transition-colors',
+        'text-muted-foreground hover:text-foreground',
+        'cursor-pointer',
+        className,
+      )}
+      title={`Copy: ${value}`}
+    >
+      <span className='truncate'>{children ?? value}</span>
+      <span className='shrink-0'>
+        {copied ? (
+          <IconCheck size={iconSize} className='text-success' aria-label='Copied' />
+        ) : (
+          <IconCopy
+            size={iconSize}
+            className='opacity-0 group-hover:opacity-50 transition-opacity'
+            aria-label='Copy to clipboard'
+          />
+        )}
+      </span>
+    </button>
+  );
+}

package/template/packages/frontend/src/components/ui/drawer.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  createContext,
+  forwardRef,
+  type HTMLAttributes,
+  useContext,
+} from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+import { cn } from '@/lib/utils';
+
+type DrawerDirection = 'left' | 'right' | 'top' | 'bottom';
+
+const DrawerDirectionContext = createContext<DrawerDirection>('right');
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  direction = 'right',
+  ...props
+}: ComponentPropsWithoutRef<typeof DrawerPrimitive.Root>) => (
+  <DrawerDirectionContext.Provider value={direction}>
+    <DrawerPrimitive.Root
+      direction={direction}
+      shouldScaleBackground={shouldScaleBackground}
+      {...props}
+    />
+  </DrawerDirectionContext.Provider>
+);
+Drawer.displayName = 'Drawer';
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = forwardRef<
+  ComponentRef<typeof DrawerPrimitive.Overlay>,
+  ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn('fixed inset-0 z-50 bg-overlay backdrop-blur-sm', className)}
+    {...props}
+  />
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = forwardRef<
+  ComponentRef<typeof DrawerPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => {
+  const direction = useContext(DrawerDirectionContext);
+  const directionStyles = {
+    left: 'inset-y-3 left-3 h-auto w-[min(22rem,calc(100vw-1.5rem))] rounded-2xl',
+    right: 'inset-y-3 right-3 h-auto w-[min(22rem,calc(100vw-1.5rem))] rounded-2xl',
+    top: 'inset-x-3 top-3 w-auto rounded-2xl',
+    bottom: 'inset-x-3 bottom-3 w-auto rounded-2xl',
+  };
+
+  return (
+    <DrawerPortal>
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        ref={ref}
+        className={cn(
+          'fixed z-50 flex flex-col overflow-hidden border bg-card shadow-xl',
+          directionStyles[direction],
+          className,
+        )}
+        {...props}
+      >
+        {/* Handle for bottom/top drawers */}
+        {(direction === 'bottom' || direction === 'top') && (
+          <div
+            className={cn(
+              'mx-auto w-12 h-1.5 rounded-full bg-muted-foreground/20',
+              direction === 'bottom' ? 'mt-4' : 'mb-4 mt-auto',
+            )}
+          />
+        )}
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+});
+DrawerContent.displayName = 'DrawerContent';
+
+const DrawerHeader = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-1.5 p-4', className)} {...props} />
+);
+DrawerHeader.displayName = 'DrawerHeader';
+
+const DrawerFooter = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />
+);
+DrawerFooter.displayName = 'DrawerFooter';
+
+const DrawerTitle = forwardRef<
+  ComponentRef<typeof DrawerPrimitive.Title>,
+  ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = forwardRef<
+  ComponentRef<typeof DrawerPrimitive.Description>,
+  ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
+};

package/template/packages/frontend/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { IconCheck, IconChevronRight, IconCircle } from '@tabler/icons-react';
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  forwardRef,
+  type HTMLAttributes,
+} from 'react';
+import { cn } from '@/lib/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = forwardRef<
+  ComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none focus:bg-muted data-[state=open]:bg-muted [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <IconChevronRight className='ml-auto' />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = forwardRef<
+  ComponentRef<typeof DropdownMenuPrimitive.SubContent>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-32 overflow-hidden rounded-xl border bg-background p-1 text-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = forwardRef<
+  ComponentRef<typeof DropdownMenuPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-32 overflow-hidden rounded-xl border bg-background p-1 text-foreground shadow-lg',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = forwardRef<
+  ComponentRef<typeof DropdownMenuPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-pointer select-none items-center gap-2 rounded-lg px-2 py-1.5 text-sm outline-none transition-colors focus:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = forwardRef<
+  ComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-pointer select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50',
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
+      <DropdownMenuPrimitive.ItemIndicator>
+        <IconCheck className='h-4 w-4' />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = forwardRef<
+  ComponentRef<typeof DropdownMenuPrimitive.RadioItem>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-pointer select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
+      <DropdownMenuPrimitive.ItemIndicator>
+        <IconCircle className='h-2 w-2 fill-current' />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = forwardRef<
+  ComponentRef<typeof DropdownMenuPrimitive.Label>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-medium', inset && 'pl-8', className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = forwardRef<
+  ComponentRef<typeof DropdownMenuPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-border', className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({ className, ...props }: HTMLAttributes<HTMLSpanElement>) => (
+  <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />
+);
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+};

package/template/packages/frontend/src/components/ui/field.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import { Label } from './label';
+
+interface FieldProps {
+  label: string;
+  htmlFor: string;
+  description?: string;
+  error?: string;
+  children: ReactNode;
+}
+
+export function Field({ label, htmlFor, description, error, children }: FieldProps) {
+  const messageId = `${htmlFor}-message`;
+  return (
+    <div className='grid gap-2'>
+      <Label htmlFor={htmlFor}>{label}</Label>
+      {children}
+      {(error || description) && (
+        <p
+          id={messageId}
+          className={error ? 'text-sm text-destructive' : 'text-sm text-muted-foreground'}
+        >
+          {error ?? description}
+        </p>
+      )}
+    </div>
+  );
+}

package/template/packages/frontend/src/components/ui/hand-drawn-icons.tsx

@@ -0,0 +1,41 @@
+import { cn } from '@/lib/utils';
+
+interface HandDrawnIconProps {
+  className?: string;
+}
+
+/** Рукописный крестик — для "плохо", "не нужно" */
+export function HandDrawnX({ className }: HandDrawnIconProps) {
+  return (
+    <svg
+      aria-hidden='true'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2.5'
+      strokeLinecap='round'
+      className={cn('w-4 h-4', className)}
+    >
+      <path d='M5 5 C 8 9, 14 16, 19 19' />
+      <path d='M19 5 C 15 8, 10 14, 5 19' />
+    </svg>
+  );
+}
+
+/** Рукописная галочка — для "хорошо", "нужно" */
+export function HandDrawnCheck({ className }: HandDrawnIconProps) {
+  return (
+    <svg
+      aria-hidden='true'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2.5'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      className={cn('w-4 h-4', className)}
+    >
+      <path d='M4 12 C 6 14, 8 17, 10 19 C 12 15, 16 9, 20 5' />
+    </svg>
+  );
+}

package/template/packages/frontend/src/components/ui/index.ts

@@ -0,0 +1,36 @@
+export { AdaptiveModal } from './adaptive-modal';
+export { AnimatedCounter } from './animated-counter';
+export { Avatar, AvatarFallback, AvatarImage } from './avatar';
+export { Badge } from './badge';
+export { Button } from './button';
+export { buttonVariants } from './button-variants';
+export * from './card';
+export { CardDeck, type CardDeckProps } from './card-deck';
+export * from './charts';
+export { Checkbox, TriStateCheckbox } from './checkbox';
+export { ConfirmationModal } from './confirmation-modal';
+export { CopyableText } from './copyable-text';
+export * from './drawer';
+export * from './dropdown-menu';
+export { Field } from './field';
+export { HandDrawnCheck, HandDrawnX } from './hand-drawn-icons';
+export { Input } from './input';
+export { Label } from './label';
+export { OtpInput } from './otp-input';
+export * from './select';
+export * from './sidebar';
+export { Skeleton } from './skeleton';
+export { Slider } from './slider';
+export { SlotDrum } from './slot-drum';
+export { Spinner } from './spinner';
+export { Switch } from './switch';
+export * from './table';
+export { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs';
+export { Textarea } from './textarea';
+export { Toaster, toast } from './toaster';
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from './tooltip';

package/template/packages/frontend/src/components/ui/input.tsx

@@ -0,0 +1,24 @@
+import { forwardRef, type InputHTMLAttributes } from 'react';
+import { cn } from '@/lib/utils';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <input
+        ref={ref}
+        className={cn(
+          'h-10 w-full px-4 bg-background border border-border rounded-lg',
+          'placeholder:text-muted-foreground',
+          'focus:outline-none focus:border-primary',
+          'transition-colors',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+Input.displayName = 'Input';

package/template/packages/frontend/src/components/ui/label.tsx

@@ -0,0 +1,18 @@
+import type { LabelHTMLAttributes } from 'react';
+import { cn } from '@/lib/utils';
+
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+  htmlFor: string;
+}
+
+export function Label({ children, className, htmlFor, ...props }: LabelProps) {
+  return (
+    <label
+      className={cn('text-sm font-medium text-foreground', className)}
+      htmlFor={htmlFor}
+      {...props}
+    >
+      {children}
+    </label>
+  );
+}

package/template/packages/frontend/src/components/ui/otp-input.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+/**
+ * OTP Input
+ *
+ * Компонент для ввода 6-значного кода верификации.
+ * - 6 отдельных полей ввода
+ * - Автофокус на следующее поле
+ * - Поддержка вставки из буфера
+ */
+
+import { type ClipboardEvent, type KeyboardEvent, useId, useRef, useState } from 'react';
+import { cn } from '@/lib/utils';
+
+interface OtpInputProps {
+  length?: number;
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  error?: boolean;
+  className?: string;
+}
+
+export function OtpInput({
+  length = 6,
+  value,
+  onChange,
+  disabled = false,
+  error = false,
+  className,
+}: OtpInputProps) {
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+  const inputGroupId = useId();
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+
+  const digits = value.split('').slice(0, length);
+  while (digits.length < length) {
+    digits.push('');
+  }
+  const positions = digits.map((digit, position) => ({
+    digit,
+    id: `${inputGroupId}-digit-${position + 1}`,
+    position,
+  }));
+
+  const focusInput = (index: number) => {
+    const input = inputRefs.current[index];
+    if (input) {
+      input.focus();
+      input.select();
+    }
+  };
+
+  const handleChange = (index: number, digit: string) => {
+    if (disabled) return;
+
+    // Только цифры
+    if (digit && !/^\d$/.test(digit)) return;
+
+    const newDigits = [...digits];
+    newDigits[index] = digit;
+    const newValue = newDigits.join('');
+    onChange(newValue);
+
+    // Автофокус на следующее поле
+    if (digit && index < length - 1) {
+      focusInput(index + 1);
+    }
+  };
+
+  const handleKeyDown = (index: number, e: KeyboardEvent<HTMLInputElement>) => {
+    if (disabled) return;
+
+    if (e.key === 'Backspace') {
+      e.preventDefault();
+      if (digits[index]) {
+        // Удалить текущую цифру
+        handleChange(index, '');
+      } else if (index > 0) {
+        // Перейти на предыдущее поле и удалить
+        focusInput(index - 1);
+        handleChange(index - 1, '');
+      }
+    } else if (e.key === 'ArrowLeft' && index > 0) {
+      e.preventDefault();
+      focusInput(index - 1);
+    } else if (e.key === 'ArrowRight' && index < length - 1) {
+      e.preventDefault();
+      focusInput(index + 1);
+    }
+  };
+
+  const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
+    if (disabled) return;
+
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData('text');
+    const digits = pastedData.replace(/\D/g, '').slice(0, length);
+
+    if (digits.length > 0) {
+      onChange(digits);
+      // Фокус на последнюю заполненную цифру или следующую пустую
+      const focusIndex = Math.min(digits.length, length - 1);
+      focusInput(focusIndex);
+    }
+  };
+
+  return (
+    <div className={cn('flex gap-2 justify-center', className)}>
+      {positions.map(({ digit, id, position }) => (
+        <input
+          key={id}
+          ref={(el) => {
+            inputRefs.current[position] = el;
+          }}
+          type='text'
+          inputMode='numeric'
+          maxLength={1}
+          value={digit}
+          disabled={disabled}
+          onChange={(e) => handleChange(position, e.target.value)}
+          onKeyDown={(e) => handleKeyDown(position, e)}
+          onPaste={handlePaste}
+          onFocus={() => setFocusedIndex(position)}
+          onBlur={() => setFocusedIndex(null)}
+          className={cn(
+            'w-12 h-14 text-center text-2xl font-mono font-semibold',
+            'bg-background border rounded-lg',
+            'focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary',
+            'transition-all duration-150',
+            'disabled:opacity-50 disabled:cursor-not-allowed',
+            error ? 'border-destructive focus:ring-destructive' : 'border-border',
+            focusedIndex === position && 'scale-105',
+          )}
+          aria-label={`Digit ${position + 1}`}
+        />
+      ))}
+    </div>
+  );
+}