@tribepad/themis 1.0.0

package/dist/chunk-A77RUEWL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/OTPInput/hooks/useOTPKeyboard.ts","../src/elements/OTPInput/hooks/useOTPInput.ts","../src/elements/OTPInput/OTPInput.styles.ts","../src/elements/OTPInput/components/OTPDigit.tsx","../src/elements/OTPInput/OTPInput.tsx"],"names":["useCallback","useState","useRef","isComplete","useEffect","cva","jsx","cn","memo","forwardRef","useImperativeHandle","jsxs","Fragment"],"mappings":"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","file":"chunk-A77RUEWL.js","sourcesContent":["import { useCallback, type KeyboardEvent } from 'react';\n\n/**\n * Options for useOTPKeyboard hook\n */\nexport interface UseOTPKeyboardOptions {\n  /**\n   * Current OTP value (string with underscores for empty)\n   */\n  value: string;\n\n  /**\n   * Total number of digits\n   */\n  length: number;\n\n  /**\n   * Currently focused digit index\n   */\n  focusedIndex: number;\n\n  /**\n   * Callback to update OTP value\n   */\n  onChange: (value: string) => void;\n\n  /**\n   * Callback to update focused index\n   */\n  setFocusedIndex: (index: number) => void;\n\n  /**\n   * Whether the input is disabled\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the input is read-only\n   */\n  readOnly?: boolean;\n}\n\n/**\n * Return type for useOTPKeyboard hook\n */\nexport interface UseOTPKeyboardReturn {\n  /**\n   * Keyboard event handler\n   */\n  handleKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;\n}\n\n/**\n * useOTPKeyboard Hook\n *\n * Handles keyboard navigation for OTP input:\n * - Arrow Left/Right: Navigate between digits\n * - Backspace: Delete current digit and move left\n * - Delete: Clear current digit\n * - Home: Move to first digit\n * - End: Move to last digit\n * - Ctrl/Cmd+A: Select all (native browser behavior)\n *\n * @param options Configuration options\n * @returns Keyboard event handler\n */\nexport function useOTPKeyboard(options: UseOTPKeyboardOptions): UseOTPKeyboardReturn {\n  const {\n    value,\n    length,\n    focusedIndex,\n    onChange,\n    setFocusedIndex,\n    disabled = false,\n    readOnly = false,\n  } = options;\n\n  /**\n   * Handle Arrow Left - Move to previous digit\n   */\n  const handleArrowLeft = useCallback((): void => {\n    if (focusedIndex > 0) {\n      setFocusedIndex(focusedIndex - 1);\n    }\n  }, [focusedIndex, setFocusedIndex]);\n\n  /**\n   * Handle Arrow Right - Move to next digit\n   */\n  const handleArrowRight = useCallback((): void => {\n    if (focusedIndex < length - 1) {\n      setFocusedIndex(focusedIndex + 1);\n    }\n  }, [focusedIndex, length, setFocusedIndex]);\n\n  /**\n   * Handle Backspace - Delete current digit and move left\n   */\n  const handleBackspace = useCallback((): void => {\n    if (readOnly) return;\n\n    const digits = value.split('');\n    const currentDigit = digits[focusedIndex];\n\n    // If current digit is empty, move to previous digit\n    if (currentDigit === '_') {\n      if (focusedIndex > 0) {\n        // Move left and clear that digit\n        const newIndex = focusedIndex - 1;\n        digits[newIndex] = '_';\n        onChange(digits.join(''));\n        setFocusedIndex(newIndex);\n      }\n    } else {\n      // Clear current digit\n      digits[focusedIndex] = '_';\n      onChange(digits.join(''));\n      // Move to previous digit if not at start\n      if (focusedIndex > 0) {\n        setFocusedIndex(focusedIndex - 1);\n      }\n    }\n  }, [value, focusedIndex, readOnly, onChange, setFocusedIndex]);\n\n  /**\n   * Handle Delete - Clear current digit (stay in place)\n   */\n  const handleDelete = useCallback((): void => {\n    if (readOnly) return;\n\n    const digits = value.split('');\n    digits[focusedIndex] = '_';\n    onChange(digits.join(''));\n    // Stay on current digit (don't move)\n  }, [value, focusedIndex, readOnly, onChange]);\n\n  /**\n   * Handle Home - Move to first digit\n   */\n  const handleHome = useCallback((): void => {\n    setFocusedIndex(0);\n  }, [setFocusedIndex]);\n\n  /**\n   * Handle End - Move to last digit\n   */\n  const handleEnd = useCallback((): void => {\n    setFocusedIndex(length - 1);\n  }, [length, setFocusedIndex]);\n\n  /**\n   * Main keyboard event handler\n   */\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>): void => {\n      if (disabled) return;\n\n      // Handle different key presses\n      switch (e.key) {\n        case 'ArrowLeft':\n          e.preventDefault();\n          handleArrowLeft();\n          break;\n\n        case 'ArrowRight':\n          e.preventDefault();\n          handleArrowRight();\n          break;\n\n        case 'Backspace':\n          e.preventDefault();\n          handleBackspace();\n          break;\n\n        case 'Delete':\n          e.preventDefault();\n          handleDelete();\n          break;\n\n        case 'Home':\n          e.preventDefault();\n          handleHome();\n          break;\n\n        case 'End':\n          e.preventDefault();\n          handleEnd();\n          break;\n\n        // Ctrl/Cmd+A (Select All) - Allow native behavior\n        case 'a':\n        case 'A':\n          if (e.ctrlKey || e.metaKey) {\n            // Let browser handle select all natively\n            // The hidden input will select its entire value\n            return;\n          }\n          break;\n\n        // Prevent Enter from submitting the form\n        // Form submission should be handled by onComplete callback when all digits are filled\n        case 'Enter':\n          e.preventDefault();\n          break;\n\n        // Allow digits and other printable characters\n        // (handled by onChange in useOTPInput)\n        default:\n          // Don't prevent default for normal character input\n          break;\n      }\n    },\n    [\n      disabled,\n      handleArrowLeft,\n      handleArrowRight,\n      handleBackspace,\n      handleDelete,\n      handleHome,\n      handleEnd,\n    ]\n  );\n\n  return {\n    handleKeyDown,\n  };\n}\n","'use client';\n\nimport { useState, useCallback, useEffect, useRef, type ChangeEvent, type KeyboardEvent, type ClipboardEvent } from 'react';\nimport type { OTPInputProps } from '../OTPInput.types';\nimport { useOTPKeyboard } from './useOTPKeyboard';\n\n/**\n * Return type for useOTPInput hook\n */\nexport interface UseOTPInputReturn {\n  value: string;\n  focusedIndex: number;\n  error: string | null;\n  isComplete: boolean;\n  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;\n  handleKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;\n  handlePaste: (e: ClipboardEvent<HTMLInputElement>) => void;\n  setFocusedIndex: (index: number) => void;\n  clear: () => void;\n  setValue: (value: string) => void;\n  validate: () => string | null;\n}\n\n/**\n * useOTPInput Hook\n *\n * Core logic hook for OTP input management.\n * Handles state, validation, and user interactions.\n *\n * Features:\n * - Controlled and uncontrolled modes\n * - Auto-advance on digit entry\n * - Custom validation support\n * - Error state management\n * - Focus management\n *\n * @param props OTPInput component props\n * @returns State and handlers for OTP input\n */\nexport function useOTPInput(props: OTPInputProps): UseOTPInputReturn {\n  const {\n    value: controlledValue,\n    defaultValue = '',\n    length = 6,\n    type = 'numeric',\n    pattern,\n    onChange,\n    onComplete,\n    validate,\n    error: controlledError,\n    disabled = false,\n    readOnly = false,\n  } = props;\n\n  // Determine if component is controlled\n  const isControlled = controlledValue !== undefined;\n\n  // Internal state (used in uncontrolled mode)\n  const [internalValue, setInternalValue] = useState<string>(() => {\n    // Initialize with defaultValue padded to length with underscores\n    return (defaultValue || '').padEnd(length, '_');\n  });\n\n  const [internalError, setInternalError] = useState<string | null>(null);\n  const [focusedIndex, setFocusedIndex] = useState<number>(0);\n\n  // Track if onComplete has been called for current value\n  const completedRef = useRef<string | null>(null);\n  \n  // Debounce timer for onComplete callback\n  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);\n\n  // Current value (controlled or uncontrolled)\n  const currentValue = isControlled ? controlledValue || ''.padEnd(length, '_') : internalValue;\n\n  // Current error (controlled or uncontrolled)\n  const currentError = controlledError !== undefined ? controlledError : internalError;\n\n  // Validation function\n  const runValidation = useCallback(\n    (value: string): string | null => {\n      // Don't validate empty or partial input\n      const filledLength = value.replace(/_/g, '').length;\n      if (filledLength < length) {\n        return null;\n      }\n\n      // Run custom validation if provided\n      if (validate) {\n        return validate(value);\n      }\n\n      // Built-in validation based on type\n      if (type === 'numeric') {\n        const numericPattern = /^\\d+$/;\n        const cleanValue = value.replace(/_/g, '');\n        if (!numericPattern.test(cleanValue)) {\n          return 'Code must contain only digits';\n        }\n      } else if (type === 'alphanumeric') {\n        const alphanumericPattern = /^[A-Za-z0-9]+$/;\n        const cleanValue = value.replace(/_/g, '');\n        if (!alphanumericPattern.test(cleanValue)) {\n          return 'Code must contain only letters and numbers';\n        }\n      } else if (type === 'custom' && pattern) {\n        const cleanValue = value.replace(/_/g, '');\n        for (const char of cleanValue) {\n          if (!pattern.test(char)) {\n            return 'Invalid character in code';\n          }\n        }\n      }\n\n      return null;\n    },\n    [length, type, pattern, validate]\n  );\n\n  // Update value (handles both controlled and uncontrolled)\n  const updateValue = useCallback(\n    (newValue: string) => {\n      if (!isControlled) {\n        setInternalValue(newValue);\n      }\n      onChange?.(newValue);\n\n      // Run validation\n      const validationError = runValidation(newValue);\n      if (!isControlled) {\n        setInternalError(validationError);\n      }\n\n      // Check if complete\n      const filledLength = newValue.replace(/_/g, '').length;\n      const isComplete = filledLength === length;\n\n      // Trigger onComplete if:\n      // 1. All digits filled\n      // 2. No validation errors\n      // 3. Haven't already called onComplete for this value\n      if (isComplete && !validationError && completedRef.current !== newValue) {\n        completedRef.current = newValue;\n        \n        // Debounce onComplete callback by 200ms\n        if (debounceTimerRef.current) {\n          clearTimeout(debounceTimerRef.current);\n        }\n        debounceTimerRef.current = setTimeout(() => {\n          onComplete?.(newValue.replace(/_/g, ''));\n        }, 200);\n      }\n\n      // Reset completion tracking if value changes after completion\n      if (!isComplete && completedRef.current) {\n        completedRef.current = null;\n      }\n    },\n    [isControlled, length, onChange, onComplete, runValidation]\n  );\n\n  // Handle digit entry\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>): void => {\n      if (disabled) return;\n\n      const inputValue = e.target.value;\n      const newChar = inputValue[inputValue.length - 1] || '';\n\n      // Validate character based on type\n      let isValid = false;\n      if (type === 'numeric') {\n        isValid = /^\\d$/.test(newChar);\n      } else if (type === 'alphanumeric') {\n        isValid = /^[A-Za-z0-9]$/.test(newChar);\n      } else if (type === 'custom' && pattern) {\n        isValid = pattern.test(newChar);\n      } else {\n        isValid = true; // Default: accept any character\n      }\n\n      if (!isValid) {\n        // Reject invalid character\n        return;\n      }\n\n      // Update value at focused index\n      const valueArray = currentValue.split('');\n      valueArray[focusedIndex] = newChar;\n      const newValue = valueArray.join('');\n\n      updateValue(newValue);\n\n      // Auto-advance to next digit if not at end\n      if (focusedIndex < length - 1) {\n        setFocusedIndex(focusedIndex + 1);\n      }\n    },\n    [disabled, type, pattern, currentValue, focusedIndex, length, updateValue]\n  );\n\n  // Handle paste\n  const handlePaste = useCallback(\n    async (e: ClipboardEvent<HTMLInputElement>): Promise<void> => {\n      if (disabled || readOnly) return;\n\n      e.preventDefault();\n\n      // Get pasted text\n      const pastedText = e.clipboardData.getData('text/plain').trim();\n      if (!pastedText) return;\n\n      // Call onPaste callback if provided\n      if (props.onPaste) {\n        const shouldProceed = await props.onPaste(pastedText);\n        if (shouldProceed === false) return;\n      }\n\n      // Validate pasted content character by character\n      let validChars = '';\n      for (const char of pastedText) {\n        if (validChars.length >= length) break;\n\n        let isValid = false;\n        if (type === 'numeric') {\n          isValid = /^\\d$/.test(char);\n        } else if (type === 'alphanumeric') {\n          isValid = /^[A-Za-z0-9]$/.test(char);\n        } else if (type === 'custom' && pattern) {\n          isValid = pattern.test(char);\n        } else {\n          isValid = true;\n        }\n\n        if (isValid) {\n          validChars += char;\n        }\n      }\n\n      // Pad with underscores to fill length\n      const newValue = validChars.padEnd(length, '_');\n      updateValue(newValue);\n\n      // Move focus to first empty position or end\n      const firstEmptyIndex = newValue.indexOf('_');\n      setFocusedIndex(firstEmptyIndex === -1 ? length - 1 : firstEmptyIndex);\n    },\n    [disabled, readOnly, props, length, type, pattern, updateValue]\n  );\n\n  // Clear all digits\n  const clear = useCallback((): void => {\n    const emptyValue = ''.padEnd(length, '_');\n    updateValue(emptyValue);\n    setFocusedIndex(0);\n    if (!isControlled) {\n      setInternalError(null);\n    }\n    completedRef.current = null;\n  }, [length, updateValue, isControlled]);\n\n  // Set value programmatically\n  const setValue = useCallback(\n    (newValue: string): void => {\n      // Pad or truncate to length\n      const paddedValue = newValue.padEnd(length, '_').slice(0, length);\n      updateValue(paddedValue);\n\n      // Move focus to last filled digit or first empty\n      const firstEmptyIndex = paddedValue.indexOf('_');\n      setFocusedIndex(firstEmptyIndex === -1 ? length - 1 : firstEmptyIndex);\n    },\n    [length, updateValue]\n  );\n\n  // Validate current value\n  const validateCurrent = useCallback((): string | null => {\n    return runValidation(currentValue);\n  }, [currentValue, runValidation]);\n\n  // Check if complete\n  const isComplete = currentValue.replace(/_/g, '').length === length;\n\n  // Keyboard navigation hook\n  const { handleKeyDown } = useOTPKeyboard({\n    value: currentValue,\n    length,\n    focusedIndex,\n    onChange: updateValue,\n    setFocusedIndex,\n    disabled,\n    readOnly,\n  });\n\n  // Sync controlled value changes\n  useEffect(() => {\n    if (isControlled && controlledValue !== undefined) {\n      // Update focused index when controlled value changes\n      const firstEmptyIndex = controlledValue.indexOf('_');\n      if (firstEmptyIndex !== -1) {\n        setFocusedIndex(firstEmptyIndex);\n      }\n    }\n  }, [isControlled, controlledValue]);\n\n  // Cleanup debounce timer on unmount\n  useEffect(() => {\n    return () => {\n      if (debounceTimerRef.current) {\n        clearTimeout(debounceTimerRef.current);\n      }\n    };\n  }, []);\n\n  return {\n    value: currentValue,\n    focusedIndex,\n    error: currentError,\n    isComplete,\n    handleChange,\n    handleKeyDown,\n    handlePaste,\n    setFocusedIndex,\n    clear,\n    setValue,\n    validate: validateCurrent,\n  };\n}\n","import { cva, type VariantProps } from 'class-variance-authority';\n\n/**\n * OTP Digit Box Variants\n *\n * Styling for individual digit display boxes using ShadCN CSS variables.\n * Ensures WCAG 2.2 AAA compliance (7:1 contrast, 44x44px touch targets).\n *\n * CSS Variables used (from ShadCN):\n * - --background: Base background color\n * - --foreground: Text color\n * - --border: Border color\n * - --primary: Primary brand color (focus state)\n * - --ring: Focus ring color\n * - --destructive: Error state color\n * - --destructive-foreground: Error text color\n * - --success: Success state color (if available)\n * - --muted: Muted background color\n * - --muted-foreground: Placeholder/disabled text color\n */\nexport const otpDigitVariants = cva(\n  // Base styles - Applied to all variants\n  [\n    'inline-flex',\n    'items-center',\n    'justify-center',\n    'rounded-md',\n    'border-2',\n    'font-semibold',\n    'transition-all',\n    'duration-200',\n    'ease-in-out',\n    'select-none',\n    'tabindex-[-1]', // Not tabbable (hidden input handles focus)\n  ],\n  {\n    variants: {\n      /**\n       * Size Variants\n       * All sizes meet WCAG AAA touch target minimum (44x44px)\n       */\n      size: {\n        /**\n         * Small: 40×40px base + 4px padding = 44×44px touch target\n         * Font: 16px (base size)\n         * Use case: Compact layouts, mobile optimization\n         */\n        sm: [\n          'h-10', // 40px\n          'w-10', // 40px\n          'text-base', // 16px\n          'p-1', // 4px padding for touch target\n        ],\n\n        /**\n         * Medium (default): 48×56px\n         * Font: 20px (comfortable reading size)\n         * Use case: Standard desktop/mobile layouts\n         */\n        md: [\n          'h-14', // 56px\n          'w-10 sm:w-12 md:w-14', // 48px\n          'text-xl', // 20px\n        ],\n\n        /**\n         * Large: 56×64px\n         * Font: 24px (large reading size)\n         * Use case: Accessibility focus, high-visibility needs\n         */\n        lg: [\n          'h-16', // 64px\n          'w-10 sm:w-12 md:w-16', // 56px\n          'text-2xl', // 24px\n        ],\n      },\n\n      /**\n       * State Variants\n       * All states meet WCAG AAA contrast (7:1 minimum)\n       */\n      state: {\n        /**\n         * Default: Standard input appearance\n         * Border: --border\n         * Background: --background\n         * Text: --foreground\n         */\n        default: [\n          'border-[var(--input)]',\n          'bg-[var(--content-background)]',\n          'text-[var(--content-foreground)]',\n          'hover:border-[var(--input-hover)]',\n        ],\n\n        /**\n         * Focus: Active digit being edited\n         * Border: --primary\n         * Ring: --ring (2px, 2px offset)\n         * Contrast: 7:1 minimum\n         */\n        focus: [\n          'border-[var(--input)]',\n          'ring-2',\n          'ring-[var(--primary)]',\n          'ring-offset-2',\n          'ring-offset-background',\n          'outline-none',\n        ],\n\n        /**\n         * Filled: Digit has been entered\n         * Border: --primary with 50% opacity\n         * Text: Bold weight for emphasis\n         */\n        filled: [\n          'border-[var(--primary)]',\n          'bg-[var(--content-background)]',\n          'text-[var(--content-foreground)]',\n          'font-bold',\n        ],\n\n        /**\n         * Error: Validation failed\n         * Border: --destructive\n         * Background: --destructive with 10% opacity\n         * Text: --destructive-foreground\n         * Animation: Shake on error\n         */\n        error: [\n          'border-[var(--destructive)]',\n          'bg-[var(--content-background)]',\n          'text-[var(--destructive-foreground)]',\n          'animate-shake',\n        ],\n\n        /**\n         * Success: Validation passed (optional)\n         * Border: Green (or --success if available)\n         * Background: Green with 10% opacity\n         * May include checkmark icon\n         */\n        success: [\n          'border-green-600',\n          'bg-green-50',\n          'text-green-900',\n          'dark:border-green-500',\n          'dark:bg-green-900/20',\n          'dark:text-green-100',\n        ],\n\n        /**\n         * Disabled: Input not interactive\n         * Border: --border with 50% opacity\n         * Background: --muted with 50% opacity\n         * Text: --muted-foreground\n         * Cursor: not-allowed\n         * Opacity: 60%\n         * Contrast: 4.5:1 minimum (AA standard for disabled)\n         */\n        disabled: [\n          'border-[var(--accent-background)]',\n          'bg-[var(--accent-background)]',\n          'text-[var(--menu-muted)]',\n          'cursor-not-allowed',\n          'opacity-60',\n          'hover:border-[var(--accent-background)]', // Prevent hover effect\n        ],\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      state: 'default',\n    },\n  }\n);\n\n/**\n * OTP Container Variants\n *\n * Styling for the main container that holds all digit boxes\n */\nexport const otpContainerVariants = cva(\n  [\n    'inline-flex',\n    'flex-col',\n    'gap-2',\n  ],\n  {\n    variants: {\n      /**\n       * Container size variants\n       * Affects spacing and layout\n       */\n      size: {\n        sm: ['gap-1.5'],\n        md: ['gap-2'],\n        lg: ['gap-3'],\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\n/**\n * OTP Digit Group Variants\n *\n * Styling for the row of digit boxes\n */\nexport const otpDigitGroupVariants = cva(\n  [\n    'flex',\n    'items-center',\n  ],\n  {\n    variants: {\n      /**\n       * Gap between digits\n       */\n      size: {\n        sm: ['gap-1.5'], // 6px\n        md: ['gap-2'], // 8px\n        lg: ['gap-3'], // 12px\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\n/**\n * OTP Error Message Variants\n *\n * Styling for error messages displayed below input\n */\nexport const otpErrorVariants = cva([\n  'text-sm',\n  'font-medium',\n  'text-[var(--destructive)]',\n  'mt-1.5',\n  'text-center',\n]);\n\n/**\n * OTP Description Variants\n *\n * Styling for description/help text\n */\nexport const otpDescriptionVariants = cva([\n  'text-sm',\n  'text-[var(--menu-muted)]',\n  'mt-1',\n]);\n\n/**\n * Type export for variant props\n * Allows TypeScript inference of variant combinations\n */\nexport type OTPDigitVariantProps = VariantProps<typeof otpDigitVariants>;\nexport type OTPContainerVariantProps = VariantProps<typeof otpContainerVariants>;\nexport type OTPDigitGroupVariantProps = VariantProps<typeof otpDigitGroupVariants>;\n\n/**\n * Animation: Shake effect for errors\n *\n * Add this to tailwind.config.ts animations:\n *\n * ```ts\n * module.exports = {\n *   theme: {\n *     extend: {\n *       keyframes: {\n *         shake: {\n *           '0%, 100%': { transform: 'translateX(0)' },\n *           '25%': { transform: 'translateX(-8px)' },\n *           '75%': { transform: 'translateX(8px)' },\n *         },\n *       },\n *       animation: {\n *         shake: 'shake 200ms ease-in-out',\n *       },\n *     },\n *   },\n * };\n * ```\n */\n","import { memo, type ReactElement } from 'react';\nimport { cn } from '../../../utils/cn';\nimport { otpDigitVariants, type OTPDigitVariantProps } from '../OTPInput.styles';\n\n/**\n * Props for the OTPDigit component\n */\nexport interface OTPDigitProps {\n  /**\n   * Single character value or underscore for empty\n   * @example \"1\" | \"A\" | \"_\"\n   */\n  value: string;\n\n  /**\n   * Whether this digit is currently focused\n   * Determines visual focus indicator display\n   */\n  focused: boolean;\n\n  /**\n   * Size variant\n   * @default 'md'\n   */\n  size?: OTPDigitVariantProps['size'];\n\n  /**\n   * State variant\n   * Determines visual styling (default, focus, error, success, disabled)\n   */\n  state?: OTPDigitVariantProps['state'];\n\n  /**\n   * Mask the digit (show as bullet point)\n   * Useful for sensitive codes\n   * @default false\n   */\n  masked?: boolean;\n\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n\n  /**\n   * Index of this digit (for debugging)\n   */\n  index?: number;\n}\n\n/**\n * OTPDigit Component\n *\n * Displays a single digit of the OTP input with visual styling.\n * This is a presentational component - it does not handle input logic.\n *\n * Features:\n * - Memoized for performance (prevents unnecessary re-renders)\n * - WCAG AAA compliant (7:1 contrast, 44x44px touch targets)\n * - Supports masking for sensitive codes\n * - Visual focus indicators\n * - State-based styling (error, success, disabled)\n *\n * @example\n * ```tsx\n * <OTPDigit\n *   value=\"5\"\n *   focused={true}\n *   size=\"md\"\n *   state=\"focus\"\n * />\n * ```\n */\nconst OTPDigitComponent = ({\n  value,\n  focused,\n  size = 'md',\n  state = 'default',\n  masked = false,\n  className,\n  index,\n}: OTPDigitProps): ReactElement => {\n  // Determine if digit is filled\n  const isFilled = value !== '_' && value !== '';\n\n  // Determine state based on props\n  const computedState = focused && !state ? 'focus' : isFilled && state === 'default' ? 'filled' : state;\n\n  // Display value (masked or actual)\n  const displayValue = masked && isFilled ? '•' : value === '_' ? '' : value;\n\n  return (\n    <div\n      className={cn(\n        otpDigitVariants({ size, state: computedState }),\n        className\n      )}\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      data-focused={focused}\n      data-filled={isFilled}\n      data-index={index}\n    >\n      {displayValue || (\n        <span className=\"text-[var(--menu-muted)] opacity-40\">\n          •\n        </span>\n      )}\n    </div>\n  );\n};\n\n/**\n * Memoized OTPDigit Component\n *\n * Prevents re-renders when other digits change.\n * Only re-renders when its own props change.\n *\n * Performance optimization for components with 6-10 digits.\n */\nexport const OTPDigit = memo(OTPDigitComponent);\n\nOTPDigit.displayName = 'OTPDigit';\n","'use client';\n\nimport { forwardRef, useImperativeHandle, useRef, type FocusEvent, type KeyboardEvent } from 'react';\nimport { cn } from '../../utils/cn';\nimport { type OTPInputProps, type OTPInputRef } from './OTPInput.types';\nimport { useOTPInput } from './hooks/useOTPInput';\nimport { OTPDigit } from './components/OTPDigit';\nimport {\n  otpContainerVariants,\n  otpDigitGroupVariants,\n  otpErrorVariants,\n  otpDescriptionVariants,\n} from './OTPInput.styles';\n\n/**\n * OTPInput Component\n *\n * A fully accessible, WCAG 2.2 AAA-compliant OTP (One-Time Password) input component.\n *\n * Key Features:\n * - Single hidden input for screen readers (not multiple separate inputs)\n * - Visual digit boxes for optimal UX\n * - WCAG 2.2 AAA compliant (7:1 contrast, 44x44px touch targets)\n * - Auto-advance on digit entry\n * - Paste support with validation\n * - Controlled and uncontrolled modes\n * - Custom validation\n * - React Hook Form compatible\n *\n * Accessibility:\n * - Single tab stop (entire OTP is one field)\n * - Proper ARIA attributes (label, describedby, invalid, errormessage)\n * - Screen reader announcements for digit count and errors\n * - Visible focus indicators (7:1 contrast)\n * - Keyboard navigation (arrows, home, end, backspace, delete)\n *\n * @example Basic usage\n * ```tsx\n * <OTPInput\n *   label=\"Enter verification code\"\n *   length={6}\n *   onChange={(value) => console.log(value)}\n *   onComplete={(code) => console.log('Complete:', code)}\n * />\n * ```\n *\n * @example Controlled mode with validation\n * ```tsx\n * const [otp, setOtp] = useState('');\n * const [error, setError] = useState('');\n *\n * <OTPInput\n *   label=\"Enter 6-digit code sent to your email\"\n *   value={otp}\n *   onChange={setOtp}\n *   error={error}\n *   validate={(value) => {\n *     if (value === '000000') return 'Invalid code';\n *     return null;\n *   }}\n * />\n * ```\n *\n * @example With ref API\n * ```tsx\n * const otpRef = useRef<OTPInputRef>(null);\n *\n * <OTPInput\n *   ref={otpRef}\n *   label=\"Enter verification code\"\n * />\n *\n * // Programmatic control\n * otpRef.current?.clear();\n * otpRef.current?.setValue('123456');\n * ```\n */\nexport const OTPInput = forwardRef<OTPInputRef, OTPInputProps>((props, ref) => {\n  // Validate serializable props with Zod schema (skip function validation)\n  // Functions are type-checked by TypeScript, not runtime-validated\n  const {\n    label,\n    description,\n    size = 'md',\n    disabled = false,\n    readOnly = false,\n    mask = false,\n    showSuccess = false,\n    className,\n    digitClassName,\n    onFocus,\n    onBlur,\n    inputMode = 'numeric',\n    length = 6,\n  } = props;\n\n  // Main logic hook\n  const {\n    value,\n    focusedIndex,\n    error,\n    isComplete,\n    handleChange,\n    handleKeyDown,\n    handlePaste,\n    setFocusedIndex,\n    clear,\n    setValue,\n    validate,\n  } = useOTPInput(props);\n\n  // Ref to the hidden input element\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  // Expose imperative API via ref\n  useImperativeHandle(ref, (): OTPInputRef => ({\n    focus: (): void => inputRef.current?.focus(),\n    blur: (): void => inputRef.current?.blur(),\n    clear,\n    setValue,\n    getValue: (): string => value.replace(/_/g, ''),\n    isComplete: (): boolean => isComplete,\n    validate,\n    getElement: (): HTMLInputElement | null => inputRef.current,\n  }));\n\n  // Split value into individual digits\n  const digits = value.split('');\n\n  // Determine state for digit styling\n  const getDigitState = (index: number): 'default' | 'focus' | 'filled' | 'error' | 'success' | 'disabled' => {\n    if (disabled) return 'disabled';\n    if (error) return 'error';\n    if (showSuccess && isComplete && !error) return 'success';\n    if (index === focusedIndex) return 'focus';\n    if (digits[index] !== '_') return 'filled';\n    return 'default';\n  };\n\n  // Handle focus events\n  const handleFocusEvent = (e: FocusEvent<HTMLInputElement>): void => {\n    onFocus?.(e);\n  };\n\n  const handleBlurEvent = (e: FocusEvent<HTMLInputElement>): void => {\n    onBlur?.(e);\n  };\n\n  // Handle click/keyboard on digit boxes (focus hidden input)\n  const handleDigitClick = (index: number): void => {\n    if (disabled || readOnly) return;\n    setFocusedIndex(index);\n    inputRef.current?.focus();\n  };\n\n  const handleDigitKeyDown = (e: KeyboardEvent, index: number): void => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      handleDigitClick(index);\n    }\n  };\n\n  // Generate IDs for ARIA\n  const descriptionId = description ? `otp-description-${Math.random().toString(36).slice(2, 9)}` : undefined;\n  const errorId = error ? `otp-error-${Math.random().toString(36).slice(2, 9)}` : undefined;\n\n  return (\n    <div className={cn(otpContainerVariants({ size }), className)}>\n      {/* Hidden accessible input */}\n      <input\n        ref={inputRef}\n        type=\"text\"\n        inputMode={inputMode}\n        value={value.replace(/_/g, '')}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        onPaste={handlePaste}\n        onFocus={handleFocusEvent}\n        onBlur={handleBlurEvent}\n        disabled={disabled}\n        readOnly={readOnly}\n        aria-label={label}\n        aria-describedby={[descriptionId, errorId].filter(Boolean).join(' ')}\n        aria-invalid={!!error}\n        aria-errormessage={errorId}\n        className=\"sr-only\"\n        autoComplete=\"one-time-code\"\n        maxLength={length}\n      />\n\n      {/* Visual digit display */}\n      <div\n        className={cn(otpDigitGroupVariants({ size }))}\n        role=\"presentation\"\n        aria-hidden=\"true\"\n      >\n        {digits.map((digit, index) => (\n          <div\n            key={index}\n            onClick={() => handleDigitClick(index)}\n            onKeyDown={(e) => handleDigitKeyDown(e, index)}\n            role=\"button\"\n            tabIndex={-1}\n            className=\"cursor-text\"\n          >\n            <OTPDigit\n              value={digit}\n              focused={index === focusedIndex}\n              size={size}\n              state={getDigitState(index)}\n              masked={mask}\n              className={digitClassName}\n              index={index}\n            />\n          </div>\n        ))}\n      </div>\n\n      {/* Description text */}\n      {description && (\n        <p id={descriptionId} className={otpDescriptionVariants()}>\n          {description}\n        </p>\n      )}\n\n      {/* Error message */}\n      {error && (\n        <p\n          id={errorId}\n          className={otpErrorVariants()}\n          role=\"alert\"\n          aria-live=\"assertive\"\n        >\n          {error}\n        </p>\n      )}\n\n      {/* Screen reader live region for digit count */}\n      <div\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        className=\"sr-only\"\n      >\n        {!isComplete && !error && (\n          <>\n            {value.replace(/_/g, '').length} of {length} digits entered\n          </>\n        )}\n        {isComplete && !error && <>Verification code complete</>}\n      </div>\n    </div>\n  );\n});\n\nOTPInput.displayName = 'OTPInput';\n"]}

package/dist/chunk-AA4IKMPE.mjs

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=chunk-AA4IKMPE.mjs.map
+//# sourceMappingURL=chunk-AA4IKMPE.mjs.map

package/dist/chunk-AA4IKMPE.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-AA4IKMPE.mjs"}

package/dist/chunk-AKIA6GW6.mjs

@@ -0,0 +1,163 @@
+import { cn } from './chunk-E2KQFV3O.mjs';
+import { forwardRef, useId, useState, useEffect } from 'react';
+import { cva } from 'class-variance-authority';
+import { AlertCircle, CheckCircle2 } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var formLayoutBodyVariants = cva(
+  // Base styles - grid layout with responsive columns
+  "grid grid-cols-1 mt-6",
+  {
+    variants: {
+      // Column variants (responsive: mobile single, desktop optional double)
+      columns: {
+        1: "",
+        // Single column (no additional classes needed)
+        2: "md:grid-cols-2"
+        // Double column on md breakpoint and up
+      },
+      // Density variants (controls gap between form fields)
+      density: {
+        default: "gap-4",
+        // 16px gap
+        compact: "gap-2",
+        // 8px gap
+        comfortable: "gap-6"
+        // 24px gap
+      }
+    },
+    defaultVariants: {
+      columns: 1,
+      density: "default"
+    }
+  }
+);
+var Heading = ({ level, id, className, children }) => {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ jsx(Tag, { id, className, children });
+};
+var FormLayout = forwardRef(
+  ({
+    title,
+    requiredNote,
+    description,
+    columns = 1,
+    headingLevel = 2,
+    density = "default",
+    errorMessage,
+    successMessage,
+    fieldErrors: _fieldErrors,
+    autoHideSuccess = false,
+    autoHideDuration = 5e3,
+    className,
+    children,
+    actions,
+    id,
+    "data-testid": dataTestId,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    ...props
+  }, ref) => {
+    const headingId = useId();
+    const finalHeadingId = id ? `${id}-title` : headingId;
+    const finalAriaLabelledby = ariaLabelledby || finalHeadingId;
+    const [showSuccess, setShowSuccess] = useState(true);
+    useEffect(() => {
+      setShowSuccess(true);
+      if (successMessage && autoHideSuccess) {
+        const timer = setTimeout(() => {
+          setShowSuccess(false);
+        }, autoHideDuration);
+        return () => clearTimeout(timer);
+      }
+    }, [successMessage, autoHideSuccess, autoHideDuration]);
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        ref,
+        id,
+        "data-testid": dataTestId,
+        "aria-label": ariaLabel,
+        "aria-labelledby": !ariaLabel ? finalAriaLabelledby : void 0,
+        "aria-describedby": ariaDescribedby,
+        className: cn("form-layout w-full", className),
+        ...props,
+        children: [
+          errorMessage && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "alert",
+              "aria-live": "assertive",
+              "data-testid": "form-layout-error",
+              className: cn(
+                "rounded-lg border px-4 py-3 mb-6 text-sm",
+                "border-[var(--destructive-background)] bg-[var(--destructive-foreground)] text-[var(--destructive-background)]",
+                "flex items-start gap-3"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(AlertCircle, { className: "h-5 w-5 flex-shrink-0 mt-0.5", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                  /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Error" }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-1", children: errorMessage })
+                ] })
+              ]
+            }
+          ),
+          successMessage && showSuccess && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "status",
+              "aria-live": "polite",
+              "data-testid": "form-layout-success",
+              className: cn(
+                "rounded-lg border px-4 py-3 mb-6 text-sm",
+                "border-success bg-success/10 text-success",
+                "flex items-start gap-3"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(CheckCircle2, { className: "h-5 w-5 flex-shrink-0 mt-0.5", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                  /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Success" }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-1", children: successMessage })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("header", { className: "form-layout-header mb-6", children: [
+            /* @__PURE__ */ jsx(
+              Heading,
+              {
+                level: headingLevel,
+                id: finalHeadingId,
+                className: "text-[var(--content-foreground)] font-semibold",
+                children: title
+              }
+            ),
+            description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--content-foreground)] leading-relaxed mt-2", children: description }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--content-foreground)]", children: requiredNote })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-testid": "form-layout-body",
+              className: cn(
+                formLayoutBodyVariants({
+                  columns,
+                  density
+                })
+              ),
+              children
+            }
+          ),
+          actions && /* @__PURE__ */ jsx("div", { "data-testid": "form-layout-actions", className: "flex justify-between items-center mt-4 gap-2 max-md:flex-col max-md:w-full", children: actions })
+        ]
+      }
+    );
+  }
+);
+FormLayout.displayName = "FormLayout";
+
+export { FormLayout, formLayoutBodyVariants };
+//# sourceMappingURL=chunk-AKIA6GW6.mjs.map
+//# sourceMappingURL=chunk-AKIA6GW6.mjs.map

package/dist/chunk-AKIA6GW6.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/FormLayout/FormLayout.tsx"],"names":[],"mappings":"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","file":"chunk-AKIA6GW6.mjs","sourcesContent":["\"use client\";\n\n/**\n * FormLayout Component\n * Structural layout component for consistent form presentation\n *\n * @see FormLayout-plan.md (Component API Design)\n * @see FormLayout-design-decisions.md (Approved design specifications)\n * @see spec.md FR-009 to FR-014 (Accessibility Requirements - WCAG 2.2 AAA)\n * @see constitution.md Principle IV (Accessibility First)\n */\n\nimport { JSX, forwardRef, FC, useId, ReactNode, useState, useEffect } from 'react';\nimport { cva } from 'class-variance-authority';\nimport { AlertCircle, CheckCircle2 } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport type { FormLayoutProps, HeadingLevel } from './FormLayout.types';\n\n/**\n * Body variant styles using CVA\n * Controls column layout and field spacing (density)\n */\nconst formLayoutBodyVariants = cva(\n  // Base styles - grid layout with responsive columns\n  \"grid grid-cols-1 mt-6\",\n  {\n    variants: {\n      // Column variants (responsive: mobile single, desktop optional double)\n      columns: {\n        1: \"\",  // Single column (no additional classes needed)\n        2: \"md:grid-cols-2\",  // Double column on md breakpoint and up\n      },\n      // Density variants (controls gap between form fields)\n      density: {\n        default: \"gap-4\",      // 16px gap\n        compact: \"gap-2\",      // 8px gap\n        comfortable: \"gap-6\",  // 24px gap\n      },\n    },\n    defaultVariants: {\n      columns: 1,\n      density: \"default\",\n    },\n  }\n);\n\n/**\n * Polymorphic Heading Component\n * Renders h1-h6 based on headingLevel prop for proper document hierarchy\n */\ninterface HeadingProps {\n  level: HeadingLevel;\n  id: string;\n  className?: string;\n  children: ReactNode;\n}\n\nconst Heading: FC<HeadingProps> = ({ level, id, className, children }) => {\n  const Tag = `h${level}` as keyof JSX.IntrinsicElements;\n\n  return (\n    <Tag id={id} className={className}>\n      {children}\n    </Tag>\n  );\n};\n\n/**\n * FormLayout Component\n * Provides consistent form structure with header, body, and optional actions\n */\nexport const FormLayout = forwardRef<HTMLElement, FormLayoutProps>(\n  (\n    {\n      title,\n      requiredNote,\n      description,\n      columns = 1,\n      headingLevel = 2,\n      density = 'default',\n      errorMessage,\n      successMessage,\n      fieldErrors: _fieldErrors,\n      autoHideSuccess = false,\n      autoHideDuration = 5000,\n      className,\n      children,\n      actions,\n      id,\n      'data-testid': dataTestId,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      'aria-describedby': ariaDescribedby,\n      ...props\n    },\n    ref\n  ) => {\n    // Generate unique IDs for accessibility\n    const headingId = useId();\n    const finalHeadingId = id ? `${id}-title` : headingId;\n\n    // Determine aria-labelledby (use prop if provided, otherwise point to heading)\n    const finalAriaLabelledby = ariaLabelledby || finalHeadingId;\n\n    // Auto-hide success message state\n    const [showSuccess, setShowSuccess] = useState(true);\n\n    // Auto-hide success message after duration\n    useEffect(() => {\n      // Reset show state when message changes (must come first!)\n      setShowSuccess(true);\n\n      // Set timeout to hide if autoHideSuccess is enabled\n      if (successMessage && autoHideSuccess) {\n        const timer = setTimeout(() => {\n          setShowSuccess(false);\n        }, autoHideDuration);\n\n        return (): void => clearTimeout(timer);\n      }\n    }, [successMessage, autoHideSuccess, autoHideDuration]);\n\n    return (\n      <section\n        ref={ref}\n        id={id}\n        data-testid={dataTestId}\n        aria-label={ariaLabel}\n        aria-labelledby={!ariaLabel ? finalAriaLabelledby : undefined}\n        aria-describedby={ariaDescribedby}\n        className={cn(\"form-layout w-full\", className)}\n        {...props}\n      >\n        {/* Error Message Alert */}\n        {errorMessage && (\n          <div\n            role=\"alert\"\n            aria-live=\"assertive\"\n            data-testid=\"form-layout-error\"\n            className={cn(\n              \"rounded-lg border px-4 py-3 mb-6 text-sm\",\n              \"border-[var(--destructive-background)] bg-[var(--destructive-foreground)] text-[var(--destructive-background)]\",\n              \"flex items-start gap-3\"\n            )}\n          >\n            <AlertCircle className=\"h-5 w-5 flex-shrink-0 mt-0.5\" aria-hidden=\"true\" />\n            <div className=\"flex-1\">\n              <p className=\"font-medium\">Error</p>\n              <p className=\"mt-1\">{errorMessage}</p>\n            </div>\n          </div>\n        )}\n\n        {/* Success Message Alert */}\n        {successMessage && showSuccess && (\n          <div\n            role=\"status\"\n            aria-live=\"polite\"\n            data-testid=\"form-layout-success\"\n            className={cn(\n              \"rounded-lg border px-4 py-3 mb-6 text-sm\",\n              \"border-success bg-success/10 text-success\",\n              \"flex items-start gap-3\"\n            )}\n          >\n            <CheckCircle2 className=\"h-5 w-5 flex-shrink-0 mt-0.5\" aria-hidden=\"true\" />\n            <div className=\"flex-1\">\n              <p className=\"font-medium\">Success</p>\n              <p className=\"mt-1\">{successMessage}</p>\n            </div>\n          </div>\n        )}\n\n        {/* Header Section: Title → Description → Required Note */}\n        <header className=\"form-layout-header mb-6\">\n          {/* Title (configurable heading level) */}\n          <Heading\n            level={headingLevel}\n            id={finalHeadingId}\n            className=\"text-[var(--content-foreground)] font-semibold\"\n          >\n            {title}\n          </Heading>\n\n          {/* Description (optional) */}\n          {description && (\n            <p className=\"text-sm text-[var(--content-foreground)] leading-relaxed mt-2\">\n              {description}\n            </p>\n          )}\n\n          {/* Required Note (always visible) */}\n          <p className=\"text-sm text-[var(--content-foreground)]\">\n            {requiredNote}\n          </p>\n        </header>\n\n        {/* Body Section: Form fields with configurable layout */}\n        <div\n          data-testid=\"form-layout-body\"\n          className={cn(\n            formLayoutBodyVariants({\n              columns,\n              density,\n            })\n          )}\n        >\n          {children}\n        </div>\n\n        {/* Actions Section: Optional footer for buttons */}\n        {actions && (\n          <div data-testid=\"form-layout-actions\" className=\"flex justify-between items-center mt-4 gap-2 max-md:flex-col max-md:w-full\">\n            {actions}\n          </div>\n        )}\n      </section>\n    );\n  }\n);\n\nFormLayout.displayName = \"FormLayout\";\n\nexport { formLayoutBodyVariants };\n"]}