@intlayer/design-system 8.1.2 → 8.1.3

package/dist/esm/components/Input/OTPInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"OTPInput.mjs","names":[],"sources":["../../../../src/components/Input/OTPInput.tsx"],"sourcesContent":["'use client';\n\n/**\n * This component is a fork of https://github.com/guilhermerodz/input-otp\n */\n\nimport { cn } from '@utils/cn';\nimport { cva } from 'class-variance-authority';\nimport { MinusIcon } from 'lucide-react';\nimport {\n  type ChangeEvent,\n  type ClipboardEvent,\n  type ComponentProps,\n  type CSSProperties,\n  createContext,\n  type FC,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type RefObject,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Button, type ButtonProps } from '../Button';\n\n// ---------------- Utilities ----------------\n\nconst syncTimeouts = (cb: (...args: any[]) => unknown): number[] => {\n  const t1 = setTimeout(cb, 0); // For faster machines\n  const t2 = setTimeout(cb, 1_0);\n  const t3 = setTimeout(cb, 5_0);\n  return [t1, t2, t3];\n};\n\nconst safeInsertRule = (sheet: CSSStyleSheet, rule: string) => {\n  try {\n    sheet.insertRule(rule);\n  } catch {\n    console.error('input-otp could not insert CSS rule:', rule);\n  }\n};\n\n// Decided to go with <noscript>\n// instead of `scripting` CSS media query\n// because it's a fallback for initial page load\n// and the <script> tag won't be loaded\n// unless the user has JS disabled.\nconst NOSCRIPT_CSS_FALLBACK = `\n[data-input-otp] {\n  --nojs-bg: white !important;\n  --nojs-fg: black !important;\n\n  background-color: var(--nojs-bg) !important;\n  color: var(--nojs-fg) !important;\n  caret-color: var(--nojs-fg) !important;\n  letter-spacing: .25em !important;\n  text-align: center !important;\n  border: 1px solid var(--nojs-fg) !important;\n  border-radius: 4px !important;\n  width: 100% !important;\n}\n@media (prefers-color-scheme: dark) {\n  [data-input-otp] {\n    --nojs-bg: black !important;\n    --nojs-fg: white !important;\n  }\n}`;\n\n// ---------------- Constants ----------------\n\nconst PWM_BADGE_MARGIN_RIGHT = 18;\nconst PWM_BADGE_SPACE_WIDTH_PX = 40;\nconst PWM_BADGE_SPACE_WIDTH = `${PWM_BADGE_SPACE_WIDTH_PX}px` as const;\n\nconst PASSWORD_MANAGERS_SELECTORS = [\n  '[data-lastpass-icon-root]', // LastPass\n  'com-1password-button', // 1Password\n  '[data-dashlanecreated]', // Dashlane\n  '[style$=\"2147483647 !important;\"]', // Bitwarden\n].join(',');\n\n// ---------------- Types ----------------\n\nexport type SlotProps = {\n  isActive: boolean;\n  char: string | null;\n  placeholderChar: string | null;\n  hasFakeCaret: boolean;\n};\n\nexport type RenderProps = {\n  slots: SlotProps[];\n  isFocused: boolean;\n  isHovering: boolean;\n  setSelection: (index: number) => void;\n};\n\ntype OverrideProps<T, R> = Omit<T, keyof R> & R;\n\ntype OTPInputBaseProps = OverrideProps<\n  InputHTMLAttributes<HTMLInputElement>,\n  {\n    value?: string;\n    onChange?: (newValue: string) => unknown;\n\n    maxLength: number;\n\n    onComplete?: (...args: any[]) => unknown;\n    onActiveSlotChange?: (activeSlotIndex: number | null) => unknown;\n    pushPasswordManagerStrategy?: 'increase-width' | 'none';\n    pasteTransformer?: (pasted: string) => string;\n\n    containerClassName?: string;\n\n    noScriptCSSFallback?: string | null;\n  }\n>;\n\ntype InputOTPRenderFn = (props: RenderProps) => ReactNode;\n\nexport type OTPInputProps = OTPInputBaseProps &\n  (\n    | {\n        render: InputOTPRenderFn;\n        children?: never;\n      }\n    | {\n        render?: never;\n        children: ReactNode;\n      }\n  );\n\n// ---------------- Hooks ----------------\n\nexport const usePasswordManagerBadge = ({\n  containerRef,\n  inputRef,\n  pushPasswordManagerStrategy,\n  isFocused,\n}: {\n  containerRef: RefObject<HTMLDivElement | null>;\n  inputRef: RefObject<HTMLInputElement | null>;\n  pushPasswordManagerStrategy: OTPInputProps['pushPasswordManagerStrategy'];\n  isFocused: boolean;\n}) => {\n  /** Password managers have a badge\n   *  and I'll use this state to push them\n   *  outside the input */\n  const [hasPWMBadge, setHasPWMBadge] = useState(false);\n  const [hasPWMBadgeSpace, setHasPWMBadgeSpace] = useState(false);\n  const [done, setDone] = useState(false);\n\n  const willPushPWMBadge =\n    pushPasswordManagerStrategy === 'none'\n      ? false\n      : (pushPasswordManagerStrategy === 'increase-width' ||\n          // TODO: remove 'experimental-no-flickering' support in 2.0.0\n          pushPasswordManagerStrategy === 'experimental-no-flickering') &&\n        hasPWMBadge &&\n        hasPWMBadgeSpace;\n\n  const trackPWMBadge = () => {\n    const container = containerRef.current;\n    const input = inputRef.current;\n    if (\n      !container ||\n      !input ||\n      done ||\n      pushPasswordManagerStrategy === 'none'\n    ) {\n      return;\n    }\n\n    const elementToCompare = container;\n\n    // Get the top right-center point of the container.\n    // That is usually where most password managers place their badge.\n    const rightCornerX =\n      elementToCompare.getBoundingClientRect().left +\n      elementToCompare.offsetWidth;\n    const centereredY =\n      elementToCompare.getBoundingClientRect().top +\n      elementToCompare.offsetHeight / 2;\n    const x = rightCornerX - PWM_BADGE_MARGIN_RIGHT;\n    const y = centereredY;\n\n    // Do an extra search to check for famous password managers\n    const pmws = document.querySelectorAll(PASSWORD_MANAGERS_SELECTORS);\n\n    // If no password manager is automatically detect,\n    // we'll try to dispatch document.elementFromPoint\n    // to identify badges\n    if (pmws.length === 0) {\n      const maybeBadgeEl = document.elementFromPoint(x, y);\n\n      // If the found element is the input itself,\n      // then we assume it's not a password manager badge.\n      // We are not sure. Most times that means there isn't a badge.\n      if (maybeBadgeEl === container) {\n        return;\n      }\n    }\n\n    setHasPWMBadge(true);\n    setDone(true);\n  };\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container || pushPasswordManagerStrategy === 'none') {\n      return;\n    }\n\n    // Check if the PWM area is 100% visible\n    const checkHasSpace = () => {\n      const viewportWidth = window.innerWidth;\n      const distanceToRightEdge =\n        viewportWidth - container.getBoundingClientRect().right;\n      setHasPWMBadgeSpace(distanceToRightEdge >= PWM_BADGE_SPACE_WIDTH_PX);\n    };\n\n    checkHasSpace();\n    const interval = setInterval(checkHasSpace, 1000);\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, [containerRef, pushPasswordManagerStrategy]);\n\n  useEffect(() => {\n    const _isFocused = isFocused || document.activeElement === inputRef.current;\n\n    if (pushPasswordManagerStrategy === 'none' || !_isFocused) {\n      return;\n    }\n    const t1 = setTimeout(trackPWMBadge, 0);\n    const t2 = setTimeout(trackPWMBadge, 2000);\n    const t3 = setTimeout(trackPWMBadge, 5000);\n    const t4 = setTimeout(() => {\n      setDone(true);\n    }, 6000);\n    return () => {\n      clearTimeout(t1);\n      clearTimeout(t2);\n      clearTimeout(t3);\n      clearTimeout(t4);\n    };\n  }, [inputRef, isFocused, pushPasswordManagerStrategy]);\n\n  return { hasPWMBadge, willPushPWMBadge, PWM_BADGE_SPACE_WIDTH };\n};\n\nexport const usePrevious = <T,>(value: T): T | undefined => {\n  const ref = useRef<T | undefined>(undefined);\n  useEffect(() => {\n    ref.current = value;\n  });\n  return ref.current;\n};\n\n// ---------------- Context ----------------\n\nexport const OTPInputContext = createContext<RenderProps>({} as RenderProps);\n\n// ---------------- Core Component ----------------\n\nexport const OTPInput: FC<OTPInputProps> = ({\n  value: uncheckedValue,\n  onChange: uncheckedOnChange,\n  maxLength,\n  pattern,\n  placeholder,\n  inputMode = 'numeric',\n  onComplete,\n  onActiveSlotChange,\n  pushPasswordManagerStrategy = 'increase-width',\n  pasteTransformer,\n  containerClassName,\n  noScriptCSSFallback = NOSCRIPT_CSS_FALLBACK,\n  render,\n  children,\n  ...props\n}) => {\n  // Only used when `value` state is not provided\n  const [internalValue, setInternalValue] = useState(\n    typeof props.defaultValue === 'string' ? props.defaultValue : ''\n  );\n\n  // Definitions\n  const value = uncheckedValue ?? internalValue;\n  const previousValue = usePrevious(value);\n  const onChange = (newValue: string) => {\n    uncheckedOnChange?.(newValue);\n    setInternalValue(newValue);\n  };\n  const regexp =\n    pattern !== undefined\n      ? typeof pattern === 'string'\n        ? new RegExp(pattern)\n        : pattern\n      : null;\n\n  /** useRef */\n  const inputRef = useRef<HTMLInputElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const initialLoadRef = useRef({\n    value,\n    onChange,\n    isIOS:\n      typeof window !== 'undefined' &&\n      window?.CSS?.supports?.('-webkit-touch-callout', 'none'),\n  });\n  const inputMetadataRef = useRef<{\n    prev: [number | null, number | null, 'none' | 'forward' | 'backward'];\n  }>({\n    prev: [\n      inputRef.current?.selectionStart ?? null,\n      inputRef.current?.selectionEnd ?? null,\n      inputRef.current?.selectionDirection ?? 'none',\n    ],\n  });\n  useEffect(() => {\n    const input = inputRef.current;\n    const container = containerRef.current;\n\n    if (!input || !container) {\n      return;\n    }\n\n    // Sync input value\n    if (initialLoadRef.current.value !== input.value) {\n      initialLoadRef.current.onChange(input.value);\n    }\n\n    // Previous selection\n    inputMetadataRef.current.prev = [\n      input.selectionStart,\n      input.selectionEnd,\n      input.selectionDirection ?? 'none',\n    ];\n    const onDocumentSelectionChange = () => {\n      if (document.activeElement !== input) {\n        setMirrorSelectionStart(null);\n        setMirrorSelectionEnd(null);\n        setActualCaretPosition(null);\n        return;\n      }\n\n      const selectionStart = input.selectionStart;\n      const selectionEnd = input.selectionEnd;\n      const selectionDirection = input.selectionDirection;\n      const maxLength = input.maxLength;\n      const value = input.value;\n      const previousSelection = inputMetadataRef.current.prev;\n\n      let calculatedStart = -1;\n      let calculatedEnd = -1;\n      let calculatedDirection: 'forward' | 'backward' | 'none' =\n        selectionDirection ?? 'none';\n\n      if (\n        value.length !== 0 &&\n        selectionStart !== null &&\n        selectionEnd !== null\n      ) {\n        const isSingleCaret = selectionStart === selectionEnd;\n        const isInsertMode =\n          selectionStart === value.length && value.length < maxLength;\n\n        if (isSingleCaret && !isInsertMode) {\n          const caretPosition = selectionStart;\n          if (caretPosition === 0) {\n            calculatedStart = 0;\n            calculatedEnd = 1;\n            calculatedDirection = 'forward';\n          } else if (caretPosition === maxLength) {\n            calculatedStart = caretPosition - 1;\n            calculatedEnd = caretPosition;\n            calculatedDirection = 'backward';\n          } else if (maxLength > 1 && value.length > 1) {\n            let offset = 0;\n            if (\n              previousSelection[0] !== null &&\n              previousSelection[1] !== null\n            ) {\n              calculatedDirection =\n                caretPosition < previousSelection[1] ? 'backward' : 'forward';\n              const wasPreviouslyInserting =\n                previousSelection[0] === previousSelection[1] &&\n                previousSelection[0] < maxLength;\n              if (\n                calculatedDirection === 'backward' &&\n                !wasPreviouslyInserting\n              ) {\n                offset = -1;\n              }\n            }\n\n            calculatedStart = offset + caretPosition;\n            calculatedEnd = offset + caretPosition + 1;\n          }\n        }\n\n        if (\n          calculatedStart !== -1 &&\n          calculatedEnd !== -1 &&\n          calculatedStart !== calculatedEnd\n        ) {\n          inputRef.current?.setSelectionRange(\n            calculatedStart,\n            calculatedEnd,\n            calculatedDirection\n          );\n        }\n      }\n\n      const finalSelectionStart =\n        calculatedStart !== -1 ? calculatedStart : selectionStart;\n      const finalSelectionEnd =\n        calculatedEnd !== -1 ? calculatedEnd : selectionEnd;\n      const finalDirection = calculatedDirection;\n\n      // Track actual caret position (before expansion) for active slot detection\n      if (selectionStart !== null && selectionEnd !== null) {\n        const isSingleCaret = selectionStart === selectionEnd;\n        if (isSingleCaret) {\n          setActualCaretPosition(selectionStart);\n        } else {\n          // When selection is expanded, use the start position as the caret\n          setActualCaretPosition(finalSelectionStart);\n        }\n      } else {\n        setActualCaretPosition(null);\n      }\n\n      setMirrorSelectionStart(finalSelectionStart);\n      setMirrorSelectionEnd(finalSelectionEnd);\n      inputMetadataRef.current.prev = [\n        finalSelectionStart,\n        finalSelectionEnd,\n        finalDirection,\n      ];\n    };\n    document.addEventListener('selectionchange', onDocumentSelectionChange, {\n      capture: true,\n    });\n\n    // Set initial mirror state\n    onDocumentSelectionChange();\n    if (document.activeElement === input) {\n      setIsFocused(true);\n    }\n\n    // Apply needed styles\n    if (!document.getElementById('input-otp-style')) {\n      const styleEl = document.createElement('style');\n      styleEl.id = 'input-otp-style';\n      document.head.appendChild(styleEl);\n\n      if (styleEl.sheet) {\n        const autofillStyles =\n          'background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;';\n\n        safeInsertRule(\n          styleEl.sheet,\n          '[data-input-otp]::selection { background: transparent !important; color: transparent !important; }'\n        );\n        safeInsertRule(\n          styleEl.sheet,\n          `[data-input-otp]:autofill { ${autofillStyles} }`\n        );\n        safeInsertRule(\n          styleEl.sheet,\n          `[data-input-otp]:-webkit-autofill { ${autofillStyles} }`\n        );\n        // iOS\n        safeInsertRule(\n          styleEl.sheet,\n          `@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }`\n        );\n        // PWM badges\n        safeInsertRule(\n          styleEl.sheet,\n          `[data-input-otp] + * { pointer-events: all !important; }`\n        );\n      }\n    }\n    // Track root height\n    const updateRootHeight = () => {\n      if (container) {\n        container.style.setProperty('--root-height', `${input.clientHeight}px`);\n      }\n    };\n    updateRootHeight();\n    const resizeObserver = new ResizeObserver(updateRootHeight);\n    resizeObserver.observe(input);\n\n    return () => {\n      document.removeEventListener(\n        'selectionchange',\n        onDocumentSelectionChange,\n        { capture: true }\n      );\n      resizeObserver.disconnect();\n    };\n  }, []);\n\n  /** Mirrors for UI rendering purpose only */\n  const [isHoveringInput, setIsHoveringInput] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [mirrorSelectionStart, setMirrorSelectionStart] = useState<\n    number | null\n  >(null);\n  const [mirrorSelectionEnd, setMirrorSelectionEnd] = useState<number | null>(\n    null\n  );\n  const [actualCaretPosition, setActualCaretPosition] = useState<number | null>(\n    null\n  );\n\n  /** Effects */\n  useEffect(() => {\n    syncTimeouts(() => {\n      // Forcefully remove :autofill state\n      inputRef.current?.dispatchEvent(new Event('input'));\n\n      // Update the selection state\n      const s = inputRef.current?.selectionStart ?? null;\n      const e = inputRef.current?.selectionEnd ?? null;\n      const dir = inputRef.current?.selectionDirection ?? 'none';\n      if (s !== null && e !== null) {\n        setMirrorSelectionStart(s);\n        setMirrorSelectionEnd(e);\n        // Track actual caret position (use start position as caret)\n        setActualCaretPosition(s);\n        inputMetadataRef.current.prev = [s, e, dir];\n      }\n    });\n  }, [value, isFocused]);\n\n  useEffect(() => {\n    if (previousValue === undefined) {\n      return;\n    }\n\n    if (\n      value !== previousValue &&\n      previousValue.length < maxLength &&\n      value.length === maxLength\n    ) {\n      onComplete?.(value);\n    }\n  }, [maxLength, onComplete, previousValue, value]);\n\n  // Track active slot changes\n  const previousActiveSlot = useRef<number | null>(null);\n  useEffect(() => {\n    const activeSlotIndex =\n      isFocused && actualCaretPosition !== null ? actualCaretPosition : null;\n\n    if (activeSlotIndex !== previousActiveSlot.current) {\n      previousActiveSlot.current = activeSlotIndex;\n      onActiveSlotChange?.(activeSlotIndex);\n    }\n  }, [isFocused, actualCaretPosition, onActiveSlotChange]);\n\n  const pwmb = usePasswordManagerBadge({\n    containerRef,\n    inputRef,\n    pushPasswordManagerStrategy,\n    isFocused,\n  });\n\n  /** Event handlers */\n  const _changeListener = (e: ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.currentTarget.value.slice(0, maxLength);\n    if (newValue.length > 0 && regexp && !regexp.test(newValue)) {\n      e.preventDefault();\n      return;\n    }\n    const maybeHasDeleted =\n      typeof previousValue === 'string' &&\n      newValue.length < previousValue.length;\n    if (maybeHasDeleted) {\n      // Since cutting/deleting text doesn't trigger\n      // selectionchange event, we'll have to dispatch it manually.\n      // NOTE: The following line also triggers when cmd+A then pasting\n      // a value with smaller length, which is not ideal for performance.\n      document.dispatchEvent(new Event('selectionchange'));\n    }\n    onChange(newValue);\n  };\n  const _focusListener = () => {\n    if (inputRef.current) {\n      const start = Math.min(inputRef.current.value.length, maxLength - 1);\n      const end = inputRef.current.value.length;\n      inputRef.current?.setSelectionRange(start, end);\n      setMirrorSelectionStart(start);\n      setMirrorSelectionEnd(end);\n    }\n    setIsFocused(true);\n  };\n  // Fix iOS pasting\n  const _pasteListener = (e: ClipboardEvent<HTMLInputElement>) => {\n    const input = inputRef.current;\n    if (\n      !pasteTransformer &&\n      (!initialLoadRef.current.isIOS || !e.clipboardData || !input)\n    ) {\n      return;\n    }\n\n    const _content = e.clipboardData.getData('text/plain');\n    const content = pasteTransformer ? pasteTransformer(_content) : _content;\n    e.preventDefault();\n\n    const start = inputRef.current?.selectionStart;\n    const end = inputRef.current?.selectionEnd;\n\n    const isReplacing = start !== end;\n\n    const newValueUncapped = isReplacing\n      ? value.slice(0, start ?? 0) + content + value.slice(end ?? 0) // Replacing\n      : value.slice(0, start ?? 0) + content + value.slice(start ?? 0); // Inserting\n    const newValue = newValueUncapped.slice(0, maxLength);\n\n    if (newValue.length > 0 && regexp && !regexp.test(newValue)) {\n      return;\n    }\n\n    if (input) {\n      input.value = newValue;\n      onChange(newValue);\n\n      const _start = Math.min(newValue.length, maxLength - 1);\n      const _end = newValue.length;\n\n      input.setSelectionRange(_start, _end);\n      setMirrorSelectionStart(_start);\n      setMirrorSelectionEnd(_end);\n    }\n  };\n\n  /** Styles - dynamic styles that can't be converted to Tailwind */\n  const dynamicInputStyle: CSSProperties = {\n    width: pwmb.willPushPWMBadge\n      ? `calc(100% + ${pwmb.PWM_BADGE_SPACE_WIDTH})`\n      : '100%',\n    clipPath: pwmb.willPushPWMBadge\n      ? `inset(0 ${pwmb.PWM_BADGE_SPACE_WIDTH} 0 0)`\n      : undefined,\n    fontSize: 'var(--root-height)',\n  };\n\n  /** Rendering */\n  const renderedInput = (\n    <input\n      autoComplete={props.autoComplete || 'one-time-code'}\n      {...props}\n      data-input-otp\n      data-input-otp-placeholder-shown={value.length === 0 || undefined}\n      data-input-otp-mss={mirrorSelectionStart}\n      data-input-otp-mse={mirrorSelectionEnd}\n      inputMode={inputMode}\n      pattern={regexp?.source}\n      aria-placeholder={placeholder}\n      className=\"pointer-events-auto absolute inset-0 -z-10 flex h-full border-0 border-transparent bg-transparent text-center font-mono text-transparent tabular-nums leading-none tracking-[-.5em] caret-transparent opacity-100 shadow-none outline-none\"\n      style={dynamicInputStyle}\n      maxLength={maxLength}\n      value={value}\n      ref={inputRef}\n      onPaste={(e) => {\n        _pasteListener(e);\n        props.onPaste?.(e);\n      }}\n      onChange={_changeListener}\n      onMouseOver={(e) => {\n        setIsHoveringInput(true);\n        props.onMouseOver?.(e);\n      }}\n      onMouseLeave={(e) => {\n        setIsHoveringInput(false);\n        props.onMouseLeave?.(e);\n      }}\n      onKeyDown={(e) => {\n        // Track arrow key navigation to ensure active slot updates correctly\n        if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n          // Use requestAnimationFrame to check selection after browser has processed the key\n          requestAnimationFrame(() => {\n            const input = inputRef.current;\n            if (input && document.activeElement === input) {\n              const s = input.selectionStart;\n              const end = input.selectionEnd;\n              if (s !== null && end !== null) {\n                // Update actual caret position - use start position as caret\n                setActualCaretPosition(s);\n              }\n            }\n          });\n        }\n        props.onKeyDown?.(e);\n      }}\n      onFocus={(e) => {\n        _focusListener();\n        props.onFocus?.(e);\n      }}\n      onBlur={(e) => {\n        setIsFocused(false);\n        props.onBlur?.(e);\n      }}\n    />\n  );\n\n  const setSelection = (index: number) => {\n    const input = inputRef.current;\n    if (!input || props.disabled) {\n      return;\n    }\n\n    // Clamp index to valid range\n    const clampedIndex = Math.max(0, Math.min(index, maxLength - 1));\n\n    // Focus the input if not already focused\n    if (document.activeElement !== input) {\n      input.focus();\n    }\n\n    // Set selection to the clicked slot\n    // If there's a character at that position, select it; otherwise just position the caret\n    const hasChar = value[clampedIndex] !== undefined;\n    const start = clampedIndex;\n    const end = hasChar ? clampedIndex + 1 : clampedIndex;\n\n    input.setSelectionRange(start, end);\n    setMirrorSelectionStart(start);\n    setMirrorSelectionEnd(end);\n    setIsFocused(true);\n  };\n\n  const contextValue: RenderProps = {\n    slots: Array.from({ length: maxLength }).map((_, slotIdx) => {\n      const isActive =\n        isFocused &&\n        mirrorSelectionStart !== null &&\n        mirrorSelectionEnd !== null &&\n        ((mirrorSelectionStart === mirrorSelectionEnd &&\n          slotIdx === mirrorSelectionStart) ||\n          (slotIdx >= mirrorSelectionStart && slotIdx < mirrorSelectionEnd));\n\n      const char = value[slotIdx] !== undefined ? value[slotIdx] : null;\n      const placeholderChar =\n        value[0] !== undefined ? null : (placeholder?.[slotIdx] ?? null);\n\n      return {\n        char,\n        placeholderChar,\n        isActive,\n        hasFakeCaret: isActive && char === null,\n      };\n    }),\n    isFocused,\n    isHovering: !props.disabled && isHoveringInput,\n    setSelection,\n  };\n\n  const renderedChildren =\n    render !== undefined ? (\n      render(contextValue)\n    ) : (\n      <OTPInputContext.Provider value={contextValue}>\n        {children}\n      </OTPInputContext.Provider>\n    );\n\n  return (\n    <>\n      {noScriptCSSFallback !== null && (\n        <noscript>\n          <style>{noScriptCSSFallback}</style>\n        </noscript>\n      )}\n\n      <div\n        ref={containerRef}\n        className={cn(\n          'relative',\n          props.disabled ? 'cursor-default' : 'cursor-text',\n          containerClassName\n        )}\n      >\n        {renderedChildren}\n\n        <div className=\"absolute inset-0\">{renderedInput}</div>\n      </div>\n    </>\n  );\n};\n\n// ---------------- Root ----------------\n\ntype InputOTPProps = Omit<ComponentProps<typeof OTPInput>, 'children'>;\n\nexport const inputSlotVariants = cva('block text-center', {\n  variants: {\n    size: {\n      sm: 'h-4 w-3 text-sm',\n      md: 'h-5 w-4 text-base',\n      lg: 'h-6 w-5 text-lg',\n      xl: 'h-7 w-6 text-xl',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nexport const InputOTP: FC<InputOTPProps> = ({\n  className,\n  render,\n  ...props\n}) => (\n  <OTPInput\n    containerClassName=\"relative flex items-center gap-2 has-disabled:opacity-50\"\n    className={cn('disabled:cursor-not-allowed', className)}\n    render={render!}\n    {...props}\n  />\n);\n\n// ---------------- Group ----------------\n\nexport const InputOTPGroup = ({\n  className,\n  ...props\n}: ComponentProps<'div'>) => (\n  <div className={cn('z-10 flex items-center gap-3', className)} {...props} />\n);\n\n// ---------------- Slot ----------------\n\ntype InputOTPSlotProps = Omit<ButtonProps, 'variant' | 'label'> & {\n  index: number;\n};\n\nexport const InputOTPSlot: FC<InputOTPSlotProps> = ({\n  index,\n  className,\n  onClick,\n  onKeyDown,\n  ...props\n}) => {\n  const inputOTPContext = useContext(OTPInputContext);\n  const { char, isActive } = inputOTPContext?.slots[index] ?? {};\n  const { setSelection } = inputOTPContext ?? {};\n\n  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n    setSelection?.(index);\n    onClick?.(e);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      setSelection?.(index);\n    }\n    onKeyDown?.(e);\n  };\n\n  return (\n    <Button\n      isSelected={isActive}\n      variant=\"input\"\n      color=\"custom\"\n      tabIndex={-1}\n      className={cn('relative z-10 px-2!', isActive && 'ring-4!', className)}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      label={null}\n      {...props}\n    >\n      {/* value */}\n      <span className=\"relative z-10 flex h-6 w-4 items-center justify-center\">\n        {char}\n      </span>\n    </Button>\n  );\n};\n\n// ---------------- Separator ----------------\n\nexport const InputOTPSeparator: FC<ComponentProps<'div'>> = (props) => (\n  <div\n    aria-hidden\n    className=\"z-0 table h-0.5 w-3 rounded-full bg-border text-text/50\"\n    {...props}\n  >\n    <MinusIcon />\n  </div>\n);\n\nexport const InputIndicator: FC<ComponentProps<'div'>> = (props) => (\n  <div\n    data-indicator\n    className=\"absolute top-0 z-0 h-full w-auto rounded-xl bg-text/20 ring-4 ring-text/20 transition-[left,width] duration-300 ease-in-out [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl motion-reduce:transition-none\"\n    {...props}\n  />\n);\n"],"mappings":"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"}
+{"version":3,"file":"OTPInput.mjs","names":[],"sources":["../../../../src/components/Input/OTPInput.tsx"],"sourcesContent":["'use client';\n\n/**\n * This component is a fork of https://github.com/guilhermerodz/input-otp\n */\n\nimport { cn } from '@utils/cn';\nimport { cva } from 'class-variance-authority';\nimport { MinusIcon } from 'lucide-react';\nimport {\n  type ChangeEvent,\n  type ClipboardEvent,\n  type ComponentProps,\n  type CSSProperties,\n  createContext,\n  type FC,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type RefObject,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Button, type ButtonProps } from '../Button';\n\n// ---------------- Utilities ----------------\n\nconst syncTimeouts = (cb: (...args: any[]) => unknown): number[] => {\n  const t1 = setTimeout(cb, 0); // For faster machines\n  const t2 = setTimeout(cb, 1_0);\n  const t3 = setTimeout(cb, 5_0);\n  return [t1, t2, t3];\n};\n\nconst safeInsertRule = (sheet: CSSStyleSheet, rule: string) => {\n  try {\n    sheet.insertRule(rule);\n  } catch {\n    console.error('input-otp could not insert CSS rule:', rule);\n  }\n};\n\n// Decided to go with <noscript>\n// instead of `scripting` CSS media query\n// because it's a fallback for initial page load\n// and the <script> tag won't be loaded\n// unless the user has JS disabled.\nconst NOSCRIPT_CSS_FALLBACK = `\n[data-input-otp] {\n  --nojs-bg: white !important;\n  --nojs-fg: black !important;\n\n  background-color: var(--nojs-bg) !important;\n  color: var(--nojs-fg) !important;\n  caret-color: var(--nojs-fg) !important;\n  letter-spacing: .25em !important;\n  text-align: center !important;\n  border: 1px solid var(--nojs-fg) !important;\n  border-radius: 4px !important;\n  width: 100% !important;\n}\n@media (prefers-color-scheme: dark) {\n  [data-input-otp] {\n    --nojs-bg: black !important;\n    --nojs-fg: white !important;\n  }\n}`;\n\n// ---------------- Constants ----------------\n\nconst PWM_BADGE_MARGIN_RIGHT = 18;\nconst PWM_BADGE_SPACE_WIDTH_PX = 40;\nconst PWM_BADGE_SPACE_WIDTH = `${PWM_BADGE_SPACE_WIDTH_PX}px` as const;\n\nconst PASSWORD_MANAGERS_SELECTORS = [\n  '[data-lastpass-icon-root]', // LastPass\n  'com-1password-button', // 1Password\n  '[data-dashlanecreated]', // Dashlane\n  '[style$=\"2147483647 !important;\"]', // Bitwarden\n].join(',');\n\n// ---------------- Types ----------------\n\nexport type SlotProps = {\n  isActive: boolean;\n  char: string | null;\n  placeholderChar: string | null;\n  hasFakeCaret: boolean;\n};\n\nexport type RenderProps = {\n  slots: SlotProps[];\n  isFocused: boolean;\n  isHovering: boolean;\n  setSelection: (index: number) => void;\n};\n\ntype OverrideProps<T, R> = Omit<T, keyof R> & R;\n\ntype OTPInputBaseProps = OverrideProps<\n  InputHTMLAttributes<HTMLInputElement>,\n  {\n    value?: string;\n    onChange?: (newValue: string) => unknown;\n\n    maxLength: number;\n\n    onComplete?: (...args: any[]) => unknown;\n    onActiveSlotChange?: (activeSlotIndex: number | null) => unknown;\n    pushPasswordManagerStrategy?: 'increase-width' | 'none';\n    pasteTransformer?: (pasted: string) => string;\n\n    containerClassName?: string;\n\n    noScriptCSSFallback?: string | null;\n  }\n>;\n\ntype InputOTPRenderFn = (props: RenderProps) => ReactNode;\n\nexport type OTPInputProps = OTPInputBaseProps &\n  (\n    | {\n        render: InputOTPRenderFn;\n        children?: never;\n      }\n    | {\n        render?: never;\n        children: ReactNode;\n      }\n  );\n\n// ---------------- Hooks ----------------\n\nexport const usePasswordManagerBadge = ({\n  containerRef,\n  inputRef,\n  pushPasswordManagerStrategy,\n  isFocused,\n}: {\n  containerRef: RefObject<HTMLDivElement | null>;\n  inputRef: RefObject<HTMLInputElement | null>;\n  pushPasswordManagerStrategy: OTPInputProps['pushPasswordManagerStrategy'];\n  isFocused: boolean;\n}) => {\n  /** Password managers have a badge\n   *  and I'll use this state to push them\n   *  outside the input */\n  const [hasPWMBadge, setHasPWMBadge] = useState(false);\n  const [hasPWMBadgeSpace, setHasPWMBadgeSpace] = useState(false);\n  const [done, setDone] = useState(false);\n\n  const willPushPWMBadge =\n    pushPasswordManagerStrategy === 'none'\n      ? false\n      : (pushPasswordManagerStrategy === 'increase-width' ||\n          // TODO: remove 'experimental-no-flickering' support in 2.0.0\n          pushPasswordManagerStrategy === 'experimental-no-flickering') &&\n        hasPWMBadge &&\n        hasPWMBadgeSpace;\n\n  const trackPWMBadge = () => {\n    const container = containerRef.current;\n    const input = inputRef.current;\n    if (\n      !container ||\n      !input ||\n      done ||\n      pushPasswordManagerStrategy === 'none'\n    ) {\n      return;\n    }\n\n    const elementToCompare = container;\n\n    // Get the top right-center point of the container.\n    // That is usually where most password managers place their badge.\n    const rightCornerX =\n      elementToCompare.getBoundingClientRect().left +\n      elementToCompare.offsetWidth;\n    const centereredY =\n      elementToCompare.getBoundingClientRect().top +\n      elementToCompare.offsetHeight / 2;\n    const x = rightCornerX - PWM_BADGE_MARGIN_RIGHT;\n    const y = centereredY;\n\n    // Do an extra search to check for famous password managers\n    const pmws = document.querySelectorAll(PASSWORD_MANAGERS_SELECTORS);\n\n    // If no password manager is automatically detect,\n    // we'll try to dispatch document.elementFromPoint\n    // to identify badges\n    if (pmws.length === 0) {\n      const maybeBadgeEl = document.elementFromPoint(x, y);\n\n      // If the found element is the input itself,\n      // then we assume it's not a password manager badge.\n      // We are not sure. Most times that means there isn't a badge.\n      if (maybeBadgeEl === container) {\n        return;\n      }\n    }\n\n    setHasPWMBadge(true);\n    setDone(true);\n  };\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container || pushPasswordManagerStrategy === 'none') {\n      return;\n    }\n\n    // Check if the PWM area is 100% visible\n    const checkHasSpace = () => {\n      const viewportWidth = window.innerWidth;\n      const distanceToRightEdge =\n        viewportWidth - container.getBoundingClientRect().right;\n      setHasPWMBadgeSpace(distanceToRightEdge >= PWM_BADGE_SPACE_WIDTH_PX);\n    };\n\n    checkHasSpace();\n    const interval = setInterval(checkHasSpace, 1000);\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, [containerRef, pushPasswordManagerStrategy]);\n\n  useEffect(() => {\n    const _isFocused = isFocused || document.activeElement === inputRef.current;\n\n    if (pushPasswordManagerStrategy === 'none' || !_isFocused) {\n      return;\n    }\n    const t1 = setTimeout(trackPWMBadge, 0);\n    const t2 = setTimeout(trackPWMBadge, 2000);\n    const t3 = setTimeout(trackPWMBadge, 5000);\n    const t4 = setTimeout(() => {\n      setDone(true);\n    }, 6000);\n    return () => {\n      clearTimeout(t1);\n      clearTimeout(t2);\n      clearTimeout(t3);\n      clearTimeout(t4);\n    };\n  }, [inputRef, isFocused, pushPasswordManagerStrategy]);\n\n  return { hasPWMBadge, willPushPWMBadge, PWM_BADGE_SPACE_WIDTH };\n};\n\nexport const usePrevious = <T,>(value: T): T | undefined => {\n  const ref = useRef<T | undefined>(undefined);\n  useEffect(() => {\n    ref.current = value;\n  });\n  return ref.current;\n};\n\n// ---------------- Context ----------------\n\nexport const OTPInputContext = createContext<RenderProps>({} as RenderProps);\n\n// ---------------- Core Component ----------------\n\nexport const OTPInput: FC<OTPInputProps> = ({\n  value: uncheckedValue,\n  onChange: uncheckedOnChange,\n  maxLength,\n  pattern,\n  placeholder,\n  inputMode = 'numeric',\n  onComplete,\n  onActiveSlotChange,\n  pushPasswordManagerStrategy = 'increase-width',\n  pasteTransformer,\n  containerClassName,\n  noScriptCSSFallback = NOSCRIPT_CSS_FALLBACK,\n  render,\n  children,\n  ...props\n}) => {\n  // Only used when `value` state is not provided\n  const [internalValue, setInternalValue] = useState(\n    typeof props.defaultValue === 'string' ? props.defaultValue : ''\n  );\n\n  // Definitions\n  const value = uncheckedValue ?? internalValue;\n  const previousValue = usePrevious(value);\n  const onChange = (newValue: string) => {\n    uncheckedOnChange?.(newValue);\n    setInternalValue(newValue);\n  };\n  const regexp =\n    pattern !== undefined\n      ? typeof pattern === 'string'\n        ? new RegExp(pattern)\n        : pattern\n      : null;\n\n  /** useRef */\n  const inputRef = useRef<HTMLInputElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const initialLoadRef = useRef({\n    value,\n    onChange,\n    isIOS:\n      typeof window !== 'undefined' &&\n      window?.CSS?.supports?.('-webkit-touch-callout', 'none'),\n  });\n  const inputMetadataRef = useRef<{\n    prev: [number | null, number | null, 'none' | 'forward' | 'backward'];\n  }>({\n    prev: [\n      inputRef.current?.selectionStart ?? null,\n      inputRef.current?.selectionEnd ?? null,\n      inputRef.current?.selectionDirection ?? 'none',\n    ],\n  });\n  useEffect(() => {\n    const input = inputRef.current;\n    const container = containerRef.current;\n\n    if (!input || !container) {\n      return;\n    }\n\n    // Sync input value\n    if (initialLoadRef.current.value !== input.value) {\n      initialLoadRef.current.onChange(input.value);\n    }\n\n    // Previous selection\n    inputMetadataRef.current.prev = [\n      input.selectionStart,\n      input.selectionEnd,\n      input.selectionDirection ?? 'none',\n    ];\n    const onDocumentSelectionChange = () => {\n      if (document.activeElement !== input) {\n        setMirrorSelectionStart(null);\n        setMirrorSelectionEnd(null);\n        setActualCaretPosition(null);\n        return;\n      }\n\n      const selectionStart = input.selectionStart;\n      const selectionEnd = input.selectionEnd;\n      const selectionDirection = input.selectionDirection;\n      const maxLength = input.maxLength;\n      const value = input.value;\n      const previousSelection = inputMetadataRef.current.prev;\n\n      let calculatedStart = -1;\n      let calculatedEnd = -1;\n      let calculatedDirection: 'forward' | 'backward' | 'none' =\n        selectionDirection ?? 'none';\n\n      if (\n        value.length !== 0 &&\n        selectionStart !== null &&\n        selectionEnd !== null\n      ) {\n        const isSingleCaret = selectionStart === selectionEnd;\n        const isInsertMode =\n          selectionStart === value.length && value.length < maxLength;\n\n        if (isSingleCaret && !isInsertMode) {\n          const caretPosition = selectionStart;\n          if (caretPosition === 0) {\n            calculatedStart = 0;\n            calculatedEnd = 1;\n            calculatedDirection = 'forward';\n          } else if (caretPosition === maxLength) {\n            calculatedStart = caretPosition - 1;\n            calculatedEnd = caretPosition;\n            calculatedDirection = 'backward';\n          } else if (maxLength > 1 && value.length > 1) {\n            let offset = 0;\n            if (\n              previousSelection[0] !== null &&\n              previousSelection[1] !== null\n            ) {\n              calculatedDirection =\n                caretPosition < previousSelection[1] ? 'backward' : 'forward';\n              const wasPreviouslyInserting =\n                previousSelection[0] === previousSelection[1] &&\n                previousSelection[0] < maxLength;\n              if (\n                calculatedDirection === 'backward' &&\n                !wasPreviouslyInserting\n              ) {\n                offset = -1;\n              }\n            }\n\n            calculatedStart = offset + caretPosition;\n            calculatedEnd = offset + caretPosition + 1;\n          }\n        }\n\n        if (\n          calculatedStart !== -1 &&\n          calculatedEnd !== -1 &&\n          calculatedStart !== calculatedEnd\n        ) {\n          inputRef.current?.setSelectionRange(\n            calculatedStart,\n            calculatedEnd,\n            calculatedDirection\n          );\n        }\n      }\n\n      const finalSelectionStart =\n        calculatedStart !== -1 ? calculatedStart : selectionStart;\n      const finalSelectionEnd =\n        calculatedEnd !== -1 ? calculatedEnd : selectionEnd;\n      const finalDirection = calculatedDirection;\n\n      // Track actual caret position (before expansion) for active slot detection\n      if (selectionStart !== null && selectionEnd !== null) {\n        const isSingleCaret = selectionStart === selectionEnd;\n        if (isSingleCaret) {\n          setActualCaretPosition(selectionStart);\n        } else {\n          // When selection is expanded, use the start position as the caret\n          setActualCaretPosition(finalSelectionStart);\n        }\n      } else {\n        setActualCaretPosition(null);\n      }\n\n      setMirrorSelectionStart(finalSelectionStart);\n      setMirrorSelectionEnd(finalSelectionEnd);\n      inputMetadataRef.current.prev = [\n        finalSelectionStart,\n        finalSelectionEnd,\n        finalDirection,\n      ];\n    };\n    document.addEventListener('selectionchange', onDocumentSelectionChange, {\n      capture: true,\n    });\n\n    // Set initial mirror state\n    onDocumentSelectionChange();\n    if (document.activeElement === input) {\n      setIsFocused(true);\n    }\n\n    // Apply needed styles\n    if (!document.getElementById('input-otp-style')) {\n      const styleEl = document.createElement('style');\n      styleEl.id = 'input-otp-style';\n      document.head.appendChild(styleEl);\n\n      if (styleEl.sheet) {\n        const autofillStyles =\n          'background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;';\n\n        safeInsertRule(\n          styleEl.sheet,\n          '[data-input-otp]::selection { background: transparent !important; color: transparent !important; }'\n        );\n        safeInsertRule(\n          styleEl.sheet,\n          `[data-input-otp]:autofill { ${autofillStyles} }`\n        );\n        safeInsertRule(\n          styleEl.sheet,\n          `[data-input-otp]:-webkit-autofill { ${autofillStyles} }`\n        );\n        // iOS\n        safeInsertRule(\n          styleEl.sheet,\n          `@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }`\n        );\n        // PWM badges\n        safeInsertRule(\n          styleEl.sheet,\n          `[data-input-otp] + * { pointer-events: all !important; }`\n        );\n      }\n    }\n    // Track root height\n    const updateRootHeight = () => {\n      if (container) {\n        container.style.setProperty('--root-height', `${input.clientHeight}px`);\n      }\n    };\n    updateRootHeight();\n    const resizeObserver = new ResizeObserver(updateRootHeight);\n    resizeObserver.observe(input);\n\n    return () => {\n      document.removeEventListener(\n        'selectionchange',\n        onDocumentSelectionChange,\n        { capture: true }\n      );\n      resizeObserver.disconnect();\n    };\n  }, []);\n\n  /** Mirrors for UI rendering purpose only */\n  const [isHoveringInput, setIsHoveringInput] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [mirrorSelectionStart, setMirrorSelectionStart] = useState<\n    number | null\n  >(null);\n  const [mirrorSelectionEnd, setMirrorSelectionEnd] = useState<number | null>(\n    null\n  );\n  const [actualCaretPosition, setActualCaretPosition] = useState<number | null>(\n    null\n  );\n\n  /** Effects */\n  useEffect(() => {\n    syncTimeouts(() => {\n      // Forcefully remove :autofill state\n      inputRef.current?.dispatchEvent(new Event('input'));\n\n      // Update the selection state\n      const s = inputRef.current?.selectionStart ?? null;\n      const e = inputRef.current?.selectionEnd ?? null;\n      const dir = inputRef.current?.selectionDirection ?? 'none';\n      if (s !== null && e !== null) {\n        setMirrorSelectionStart(s);\n        setMirrorSelectionEnd(e);\n        // Track actual caret position (use start position as caret)\n        setActualCaretPosition(s);\n        inputMetadataRef.current.prev = [s, e, dir];\n      }\n    });\n  }, [value, isFocused]);\n\n  useEffect(() => {\n    if (previousValue === undefined) {\n      return;\n    }\n\n    if (\n      value !== previousValue &&\n      previousValue.length < maxLength &&\n      value.length === maxLength\n    ) {\n      onComplete?.(value);\n    }\n  }, [maxLength, onComplete, previousValue, value]);\n\n  // Track active slot changes\n  const previousActiveSlot = useRef<number | null>(null);\n  useEffect(() => {\n    const activeSlotIndex =\n      isFocused && actualCaretPosition !== null ? actualCaretPosition : null;\n\n    if (activeSlotIndex !== previousActiveSlot.current) {\n      previousActiveSlot.current = activeSlotIndex;\n      onActiveSlotChange?.(activeSlotIndex);\n    }\n  }, [isFocused, actualCaretPosition, onActiveSlotChange]);\n\n  const pwmb = usePasswordManagerBadge({\n    containerRef,\n    inputRef,\n    pushPasswordManagerStrategy,\n    isFocused,\n  });\n\n  /** Event handlers */\n  const _changeListener = (e: ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.currentTarget.value.slice(0, maxLength);\n    if (newValue.length > 0 && regexp && !regexp.test(newValue)) {\n      e.preventDefault();\n      return;\n    }\n    const maybeHasDeleted =\n      typeof previousValue === 'string' &&\n      newValue.length < previousValue.length;\n    if (maybeHasDeleted) {\n      // Since cutting/deleting text doesn't trigger\n      // selectionchange event, we'll have to dispatch it manually.\n      // NOTE: The following line also triggers when cmd+A then pasting\n      // a value with smaller length, which is not ideal for performance.\n      document.dispatchEvent(new Event('selectionchange'));\n    }\n    onChange(newValue);\n  };\n  const _focusListener = () => {\n    if (inputRef.current) {\n      const start = Math.min(inputRef.current.value.length, maxLength - 1);\n      const end = inputRef.current.value.length;\n      inputRef.current?.setSelectionRange(start, end);\n      setMirrorSelectionStart(start);\n      setMirrorSelectionEnd(end);\n    }\n    setIsFocused(true);\n  };\n  // Fix iOS pasting\n  const _pasteListener = (e: ClipboardEvent<HTMLInputElement>) => {\n    const input = inputRef.current;\n    if (\n      !pasteTransformer &&\n      (!initialLoadRef.current.isIOS || !e.clipboardData || !input)\n    ) {\n      return;\n    }\n\n    const _content = e.clipboardData.getData('text/plain');\n    const content = pasteTransformer ? pasteTransformer(_content) : _content;\n    e.preventDefault();\n\n    const start = inputRef.current?.selectionStart;\n    const end = inputRef.current?.selectionEnd;\n\n    const isReplacing = start !== end;\n\n    const newValueUncapped = isReplacing\n      ? value.slice(0, start ?? 0) + content + value.slice(end ?? 0) // Replacing\n      : value.slice(0, start ?? 0) + content + value.slice(start ?? 0); // Inserting\n    const newValue = newValueUncapped.slice(0, maxLength);\n\n    if (newValue.length > 0 && regexp && !regexp.test(newValue)) {\n      return;\n    }\n\n    if (input) {\n      input.value = newValue;\n      onChange(newValue);\n\n      const _start = Math.min(newValue.length, maxLength - 1);\n      const _end = newValue.length;\n\n      input.setSelectionRange(_start, _end);\n      setMirrorSelectionStart(_start);\n      setMirrorSelectionEnd(_end);\n    }\n  };\n\n  /** Styles - dynamic styles that can't be converted to Tailwind */\n  const dynamicInputStyle: CSSProperties = {\n    width: pwmb.willPushPWMBadge\n      ? `calc(100% + ${pwmb.PWM_BADGE_SPACE_WIDTH})`\n      : '100%',\n    clipPath: pwmb.willPushPWMBadge\n      ? `inset(0 ${pwmb.PWM_BADGE_SPACE_WIDTH} 0 0)`\n      : undefined,\n    fontSize: 'var(--root-height)',\n  };\n\n  /** Rendering */\n  const renderedInput = (\n    <input\n      autoComplete={props.autoComplete || 'one-time-code'}\n      {...props}\n      data-input-otp\n      data-input-otp-placeholder-shown={value.length === 0 || undefined}\n      data-input-otp-mss={mirrorSelectionStart}\n      data-input-otp-mse={mirrorSelectionEnd}\n      inputMode={inputMode}\n      pattern={regexp?.source}\n      aria-placeholder={placeholder}\n      className=\"pointer-events-auto absolute inset-0 -z-10 flex h-full border-0 border-transparent bg-transparent text-center font-mono text-transparent tabular-nums leading-none tracking-[-.5em] caret-transparent opacity-100 shadow-none outline-none\"\n      style={dynamicInputStyle}\n      maxLength={maxLength}\n      value={value}\n      ref={inputRef}\n      onPaste={(e) => {\n        _pasteListener(e);\n        props.onPaste?.(e);\n      }}\n      onChange={_changeListener}\n      onMouseOver={(e) => {\n        setIsHoveringInput(true);\n        props.onMouseOver?.(e);\n      }}\n      onMouseLeave={(e) => {\n        setIsHoveringInput(false);\n        props.onMouseLeave?.(e);\n      }}\n      onKeyDown={(e) => {\n        // Track arrow key navigation to ensure active slot updates correctly\n        if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n          // Use requestAnimationFrame to check selection after browser has processed the key\n          requestAnimationFrame(() => {\n            const input = inputRef.current;\n            if (input && document.activeElement === input) {\n              const s = input.selectionStart;\n              const end = input.selectionEnd;\n              if (s !== null && end !== null) {\n                // Update actual caret position - use start position as caret\n                setActualCaretPosition(s);\n              }\n            }\n          });\n        }\n        props.onKeyDown?.(e);\n      }}\n      onFocus={(e) => {\n        _focusListener();\n        props.onFocus?.(e);\n      }}\n      onBlur={(e) => {\n        setIsFocused(false);\n        props.onBlur?.(e);\n      }}\n    />\n  );\n\n  const setSelection = (index: number) => {\n    const input = inputRef.current;\n    if (!input || props.disabled) {\n      return;\n    }\n\n    // Clamp index to valid range\n    const clampedIndex = Math.max(0, Math.min(index, maxLength - 1));\n\n    // Focus the input if not already focused\n    if (document.activeElement !== input) {\n      input.focus();\n    }\n\n    // Set selection to the clicked slot\n    // If there's a character at that position, select it; otherwise just position the caret\n    const hasChar = value[clampedIndex] !== undefined;\n    const start = clampedIndex;\n    const end = hasChar ? clampedIndex + 1 : clampedIndex;\n\n    input.setSelectionRange(start, end);\n    setMirrorSelectionStart(start);\n    setMirrorSelectionEnd(end);\n    setIsFocused(true);\n  };\n\n  const contextValue: RenderProps = {\n    slots: Array.from({ length: maxLength }).map((_, slotIdx) => {\n      const isActive =\n        isFocused &&\n        mirrorSelectionStart !== null &&\n        mirrorSelectionEnd !== null &&\n        ((mirrorSelectionStart === mirrorSelectionEnd &&\n          slotIdx === mirrorSelectionStart) ||\n          (slotIdx >= mirrorSelectionStart && slotIdx < mirrorSelectionEnd));\n\n      const char = value[slotIdx] !== undefined ? value[slotIdx] : null;\n      const placeholderChar =\n        value[0] !== undefined ? null : (placeholder?.[slotIdx] ?? null);\n\n      return {\n        char,\n        placeholderChar,\n        isActive,\n        hasFakeCaret: isActive && char === null,\n      };\n    }),\n    isFocused,\n    isHovering: !props.disabled && isHoveringInput,\n    setSelection,\n  };\n\n  const renderedChildren =\n    render !== undefined ? (\n      render(contextValue)\n    ) : (\n      <OTPInputContext.Provider value={contextValue}>\n        {children}\n      </OTPInputContext.Provider>\n    );\n\n  return (\n    <>\n      {noScriptCSSFallback !== null && (\n        <noscript>\n          <style>{noScriptCSSFallback}</style>\n        </noscript>\n      )}\n\n      <div\n        ref={containerRef}\n        className={cn(\n          'relative',\n          props.disabled ? 'cursor-default' : 'cursor-text',\n          containerClassName\n        )}\n      >\n        {renderedChildren}\n\n        <div className=\"absolute inset-0\">{renderedInput}</div>\n      </div>\n    </>\n  );\n};\n\n// ---------------- Root ----------------\n\ntype InputOTPProps = Omit<ComponentProps<typeof OTPInput>, 'children'>;\n\nexport const inputSlotVariants = cva('block text-center', {\n  variants: {\n    size: {\n      sm: 'h-4 w-3 text-sm',\n      md: 'h-5 w-4 text-base',\n      lg: 'h-6 w-5 text-lg',\n      xl: 'h-7 w-6 text-xl',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nexport const InputOTP: FC<InputOTPProps> = ({\n  className,\n  render,\n  ...props\n}) => (\n  <OTPInput\n    containerClassName=\"relative flex items-center gap-2 has-disabled:opacity-50\"\n    className={cn('disabled:cursor-not-allowed', className)}\n    render={render!}\n    {...props}\n  />\n);\n\n// ---------------- Group ----------------\n\nexport const InputOTPGroup = ({\n  className,\n  ...props\n}: ComponentProps<'div'>) => (\n  <div className={cn('z-10 flex items-center gap-3', className)} {...props} />\n);\n\n// ---------------- Slot ----------------\n\ntype InputOTPSlotProps = Omit<ButtonProps, 'variant' | 'label'> & {\n  index: number;\n};\n\nexport const InputOTPSlot: FC<InputOTPSlotProps> = ({\n  index,\n  className,\n  onClick,\n  onKeyDown,\n  ...props\n}) => {\n  const inputOTPContext = useContext(OTPInputContext);\n  const { char, isActive } = inputOTPContext?.slots[index] ?? {};\n  const { setSelection } = inputOTPContext ?? {};\n\n  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n    setSelection?.(index);\n    onClick?.(e);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      setSelection?.(index);\n    }\n    onKeyDown?.(e);\n  };\n\n  return (\n    <Button\n      isSelected={isActive}\n      variant=\"input\"\n      color=\"custom\"\n      tabIndex={-1}\n      className={cn('relative z-10 px-2!', isActive && 'ring-4!', className)}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      label={null}\n      {...props}\n    >\n      {/* value */}\n      <span className=\"relative z-10 flex h-6 w-4 items-center justify-center\">\n        {char}\n      </span>\n    </Button>\n  );\n};\n\n// ---------------- Separator ----------------\n\nexport const InputOTPSeparator: FC<ComponentProps<'div'>> = (props) => (\n  <div\n    aria-hidden\n    className=\"z-0 table h-0.5 w-3 rounded-full bg-border text-text/50\"\n    {...props}\n  >\n    <MinusIcon />\n  </div>\n);\n\nexport const InputIndicator: FC<ComponentProps<'div'>> = (props) => (\n  <div\n    data-indicator\n    className=\"absolute top-0 z-0 h-full w-auto rounded-xl bg-text/20 ring-4 ring-text/20 transition-[left,width] duration-300 ease-in-out [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl motion-reduce:transition-none\"\n    {...props}\n  />\n);\n"],"mappings":"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"}

package/dist/esm/components/Input/SearchInput.mjs

@@ -1,18 +1,2 @@
-import { cn } from "../../utils/cn.mjs";
-import { Input } from "./Input.mjs";
-import { Search } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/Input/SearchInput.tsx
-const SearchInput = ({ className, ...props }) => /* @__PURE__ */ jsxs("div", {
-	className: "relative flex w-full items-center gap-1",
-	children: [/* @__PURE__ */ jsx(Search, { className: "absolute left-2 size-4" }), /* @__PURE__ */ jsx(Input, {
-		...props,
-		type: "search",
-		className: cn("pl-8", className)
-	})]
-});
-
-//#endregion
-export { SearchInput };
+import{cn as e}from"../../utils/cn.mjs";import{Input as t}from"./Input.mjs";import{Search as n}from"lucide-react";import{jsx as r,jsxs as i}from"react/jsx-runtime";const a=({className:a,...o})=>i(`div`,{className:`relative flex w-full items-center gap-1`,children:[r(n,{className:`absolute left-2 size-4`}),r(t,{...o,type:`search`,className:e(`pl-8`,a)})]});export{a as SearchInput};
 //# sourceMappingURL=SearchInput.mjs.map

package/dist/esm/components/Input/SearchInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.mjs","names":[],"sources":["../../../../src/components/Input/SearchInput.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { Search } from 'lucide-react';\nimport { Input, type InputProps } from './Input';\n\nexport const SearchInput = ({ className, ...props }: InputProps) => (\n  <div className=\"relative flex w-full items-center gap-1\">\n    <Search className=\"absolute left-2 size-4\" />\n    <Input {...props} type=\"search\" className={cn('pl-8', className)} />\n  </div>\n);\n"],"mappings":";;;;;;AAIA,MAAa,eAAe,EAAE,WAAW,GAAG,YAC1C,qBAAC;CAAI,WAAU;YACb,oBAAC,UAAO,WAAU,2BAA2B,EAC7C,oBAAC;EAAM,GAAI;EAAO,MAAK;EAAS,WAAW,GAAG,QAAQ,UAAU;GAAI;EAChE"}
+{"version":3,"file":"SearchInput.mjs","names":[],"sources":["../../../../src/components/Input/SearchInput.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { Search } from 'lucide-react';\nimport { Input, type InputProps } from './Input';\n\nexport const SearchInput = ({ className, ...props }: InputProps) => (\n  <div className=\"relative flex w-full items-center gap-1\">\n    <Search className=\"absolute left-2 size-4\" />\n    <Input {...props} type=\"search\" className={cn('pl-8', className)} />\n  </div>\n);\n"],"mappings":"oKAIA,MAAa,GAAe,CAAE,YAAW,GAAG,KAC1C,EAAC,MAAA,CAAI,UAAU,oDACb,EAAC,EAAA,CAAO,UAAU,yBAAA,CAA2B,CAC7C,EAAC,EAAA,CAAM,GAAI,EAAO,KAAK,SAAS,UAAW,EAAG,OAAQ,EAAU,EAAI,CAAA,EAChE"}

package/dist/esm/components/Input/index.mjs

@@ -1,7 +1 @@
-import { Checkbox, CheckboxColor, CheckboxSize, checkboxVariants } from "./Checkbox.mjs";
-import { Input, InputSize, InputVariant, inputVariants } from "./Input.mjs";
-import { InputPassword } from "./InputPassword.mjs";
-import { InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, OTPInput, OTPInputContext, inputSlotVariants, usePasswordManagerBadge, usePrevious } from "./OTPInput.mjs";
-import { SearchInput } from "./SearchInput.mjs";
-
-export { Checkbox, CheckboxColor, CheckboxSize, Input, InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputPassword, InputSize, InputVariant, OTPInput, OTPInputContext, SearchInput, checkboxVariants, inputSlotVariants, inputVariants, usePasswordManagerBadge, usePrevious };
+import{Checkbox as e,CheckboxColor as t,CheckboxSize as n,checkboxVariants as r}from"./Checkbox.mjs";import{Input as i,InputSize as a,InputVariant as o,inputVariants as s}from"./Input.mjs";import{InputPassword as c}from"./InputPassword.mjs";import{InputIndicator as l,InputOTP as u,InputOTPGroup as d,InputOTPSeparator as f,InputOTPSlot as p,OTPInput as m,OTPInputContext as h,inputSlotVariants as g,usePasswordManagerBadge as _,usePrevious as v}from"./OTPInput.mjs";import{SearchInput as y}from"./SearchInput.mjs";export{e as Checkbox,t as CheckboxColor,n as CheckboxSize,i as Input,l as InputIndicator,u as InputOTP,d as InputOTPGroup,f as InputOTPSeparator,p as InputOTPSlot,c as InputPassword,a as InputSize,o as InputVariant,m as OTPInput,h as OTPInputContext,y as SearchInput,r as checkboxVariants,g as inputSlotVariants,s as inputVariants,_ as usePasswordManagerBadge,v as usePrevious};

package/dist/esm/components/KeyboardScreenAdapter/index.mjs

@@ -1,120 +1,2 @@
-'use client';
-
-import { cn } from "../../utils/cn.mjs";
-import { useKeyboardDetector } from "../../hooks/useKeyboardDetector.mjs";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/KeyboardScreenAdapter/index.tsx
-/**
-* KeyboardScreenAdapter Component
-*
-* A smart wrapper component that automatically adapts the viewport height
-* when virtual keyboards appear on mobile devices. This prevents content
-* from being hidden behind the keyboard and ensures optimal user experience
-* across all devices and orientations.
-*
-* @component
-* @example
-* Basic usage:
-* ```tsx
-* <KeyboardScreenAdapter>
-*   <div>Your app content here</div>
-* </KeyboardScreenAdapter>
-* ```
-*
-* @example
-* With custom styling:
-* ```tsx
-* <KeyboardScreenAdapter className="bg-gray-100 p-4">
-*   <form>
-*     <input type="text" placeholder="Enter your name" />
-*     <input type="email" placeholder="Enter your email" />
-*     <button type="submit">Submit</button>
-*   </form>
-* </KeyboardScreenAdapter>
-* ```
-*
-* @example
-* Mobile-first responsive design:
-* ```tsx
-* <KeyboardScreenAdapter className="md:min-h-screen">
-*   <div className="flex flex-col h-full">
-*     <header>Navigation</header>
-*     <main className="flex-1 overflow-auto">
-*       <input type="search" placeholder="Search..." />
-*       Content that needs keyboard adaptation
-*     </main>
-*   </div>
-* </KeyboardScreenAdapter>
-* ```
-*
-* Features:
-* - Automatic viewport height detection and adjustment
-* - Smooth transitions when keyboard shows/hides
-* - Works with both iOS and Android virtual keyboards
-* - Responsive design that adapts to device orientation changes
-* - Maintains scroll behavior and overflow handling
-* - Lightweight with minimal performance impact
-* - Client-side only (Next.js compatible with 'use client')
-*
-* How it works:
-* 1. Uses the useKeyboardDetector hook to monitor window height changes
-* 2. Detects when virtual keyboard appears (window height decreases)
-* 3. Automatically adjusts the container's max-height to fit visible area
-* 4. Provides smooth transitions for better user experience
-* 5. Restores original height when keyboard disappears
-*
-* Use cases:
-* - Mobile web applications with forms
-* - Chat interfaces and messaging apps
-* - Search interfaces and input-heavy UIs
-* - Progressive Web Apps (PWAs)
-* - Any mobile-first application requiring keyboard interaction
-*
-* Browser compatibility:
-* - iOS Safari (all versions)
-* - Chrome Mobile (Android)
-* - Samsung Internet
-* - Firefox Mobile
-* - Other mobile browsers with virtual keyboards
-*
-* Performance considerations:
-* - Uses ResizeObserver for efficient window monitoring
-* - Minimal re-renders through optimized state management
-* - CSS transitions handled by GPU acceleration
-* - No layout thrashing during keyboard transitions
-*
-* Accessibility:
-* - Maintains focus management during transitions
-* - Preserves scroll position and user context
-* - Compatible with screen readers and assistive technologies
-* - Supports keyboard navigation patterns
-*
-* @param props - Component props extending standard div attributes
-* @param props.children - Content to render within the adaptive container
-* @param props.className - Additional CSS classes for the container
-* @param props.style - Inline styles (note: maxHeight may be overridden)
-* @param props.id - Unique identifier for the container
-* @param props.role - ARIA role for accessibility
-* @param props.tabIndex - Tab index for focus management
-* @param props.onScroll - Scroll event handler
-* @param props.onTouchStart - Touch start event handler
-* @param props.onTouchMove - Touch move event handler
-* @param props.onTouchEnd - Touch end event handler
-* @param props...rest - All other standard HTML div attributes
-*
-* @returns A responsive container that adapts to keyboard visibility
-*/
-const KeyboardScreenAdapter = ({ children, className, ...props }) => {
-	const { windowHeight } = useKeyboardDetector();
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("h-screen w-screen overflow-auto scroll-smooth transition", className),
-		style: { maxHeight: windowHeight ? `${windowHeight}px` : void 0 },
-		...props,
-		children
-	});
-};
-
-//#endregion
-export { KeyboardScreenAdapter };
+"use client";import{cn as e}from"../../utils/cn.mjs";import{useKeyboardDetector as t}from"../../hooks/useKeyboardDetector.mjs";import{jsx as n}from"react/jsx-runtime";const r=({children:r,className:i,...a})=>{let{windowHeight:o}=t();return n(`div`,{className:e(`h-screen w-screen overflow-auto scroll-smooth transition`,i),style:{maxHeight:o?`${o}px`:void 0},...a,children:r})};export{r as KeyboardScreenAdapter};
 //# sourceMappingURL=index.mjs.map

package/dist/esm/components/KeyboardScreenAdapter/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/KeyboardScreenAdapter/index.tsx"],"sourcesContent":["'use client';\n\nimport { useKeyboardDetector } from '@hooks/useKeyboardDetector';\nimport { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\n/**\n * KeyboardScreenAdapter Component\n *\n * A smart wrapper component that automatically adapts the viewport height\n * when virtual keyboards appear on mobile devices. This prevents content\n * from being hidden behind the keyboard and ensures optimal user experience\n * across all devices and orientations.\n *\n * @component\n * @example\n * Basic usage:\n * ```tsx\n * <KeyboardScreenAdapter>\n *   <div>Your app content here</div>\n * </KeyboardScreenAdapter>\n * ```\n *\n * @example\n * With custom styling:\n * ```tsx\n * <KeyboardScreenAdapter className=\"bg-gray-100 p-4\">\n *   <form>\n *     <input type=\"text\" placeholder=\"Enter your name\" />\n *     <input type=\"email\" placeholder=\"Enter your email\" />\n *     <button type=\"submit\">Submit</button>\n *   </form>\n * </KeyboardScreenAdapter>\n * ```\n *\n * @example\n * Mobile-first responsive design:\n * ```tsx\n * <KeyboardScreenAdapter className=\"md:min-h-screen\">\n *   <div className=\"flex flex-col h-full\">\n *     <header>Navigation</header>\n *     <main className=\"flex-1 overflow-auto\">\n *       <input type=\"search\" placeholder=\"Search...\" />\n *       Content that needs keyboard adaptation\n *     </main>\n *   </div>\n * </KeyboardScreenAdapter>\n * ```\n *\n * Features:\n * - Automatic viewport height detection and adjustment\n * - Smooth transitions when keyboard shows/hides\n * - Works with both iOS and Android virtual keyboards\n * - Responsive design that adapts to device orientation changes\n * - Maintains scroll behavior and overflow handling\n * - Lightweight with minimal performance impact\n * - Client-side only (Next.js compatible with 'use client')\n *\n * How it works:\n * 1. Uses the useKeyboardDetector hook to monitor window height changes\n * 2. Detects when virtual keyboard appears (window height decreases)\n * 3. Automatically adjusts the container's max-height to fit visible area\n * 4. Provides smooth transitions for better user experience\n * 5. Restores original height when keyboard disappears\n *\n * Use cases:\n * - Mobile web applications with forms\n * - Chat interfaces and messaging apps\n * - Search interfaces and input-heavy UIs\n * - Progressive Web Apps (PWAs)\n * - Any mobile-first application requiring keyboard interaction\n *\n * Browser compatibility:\n * - iOS Safari (all versions)\n * - Chrome Mobile (Android)\n * - Samsung Internet\n * - Firefox Mobile\n * - Other mobile browsers with virtual keyboards\n *\n * Performance considerations:\n * - Uses ResizeObserver for efficient window monitoring\n * - Minimal re-renders through optimized state management\n * - CSS transitions handled by GPU acceleration\n * - No layout thrashing during keyboard transitions\n *\n * Accessibility:\n * - Maintains focus management during transitions\n * - Preserves scroll position and user context\n * - Compatible with screen readers and assistive technologies\n * - Supports keyboard navigation patterns\n *\n * @param props - Component props extending standard div attributes\n * @param props.children - Content to render within the adaptive container\n * @param props.className - Additional CSS classes for the container\n * @param props.style - Inline styles (note: maxHeight may be overridden)\n * @param props.id - Unique identifier for the container\n * @param props.role - ARIA role for accessibility\n * @param props.tabIndex - Tab index for focus management\n * @param props.onScroll - Scroll event handler\n * @param props.onTouchStart - Touch start event handler\n * @param props.onTouchMove - Touch move event handler\n * @param props.onTouchEnd - Touch end event handler\n * @param props...rest - All other standard HTML div attributes\n *\n * @returns A responsive container that adapts to keyboard visibility\n */\nexport const KeyboardScreenAdapter: FC<\n  PropsWithChildren<HTMLAttributes<HTMLDivElement>>\n> = ({ children, className, ...props }) => {\n  const { windowHeight } = useKeyboardDetector();\n\n  return (\n    <div\n      className={cn(\n        'h-screen w-screen overflow-auto scroll-smooth transition',\n        className\n      )}\n      style={{\n        maxHeight: windowHeight ? `${windowHeight}px` : undefined,\n      }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0GA,MAAa,yBAER,EAAE,UAAU,WAAW,GAAG,YAAY;CACzC,MAAM,EAAE,iBAAiB,qBAAqB;AAE9C,QACE,oBAAC;EACC,WAAW,GACT,4DACA,UACD;EACD,OAAO,EACL,WAAW,eAAe,GAAG,aAAa,MAAM,QACjD;EACD,GAAI;EAEH;GACG"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/KeyboardScreenAdapter/index.tsx"],"sourcesContent":["'use client';\n\nimport { useKeyboardDetector } from '@hooks/useKeyboardDetector';\nimport { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\n/**\n * KeyboardScreenAdapter Component\n *\n * A smart wrapper component that automatically adapts the viewport height\n * when virtual keyboards appear on mobile devices. This prevents content\n * from being hidden behind the keyboard and ensures optimal user experience\n * across all devices and orientations.\n *\n * @component\n * @example\n * Basic usage:\n * ```tsx\n * <KeyboardScreenAdapter>\n *   <div>Your app content here</div>\n * </KeyboardScreenAdapter>\n * ```\n *\n * @example\n * With custom styling:\n * ```tsx\n * <KeyboardScreenAdapter className=\"bg-gray-100 p-4\">\n *   <form>\n *     <input type=\"text\" placeholder=\"Enter your name\" />\n *     <input type=\"email\" placeholder=\"Enter your email\" />\n *     <button type=\"submit\">Submit</button>\n *   </form>\n * </KeyboardScreenAdapter>\n * ```\n *\n * @example\n * Mobile-first responsive design:\n * ```tsx\n * <KeyboardScreenAdapter className=\"md:min-h-screen\">\n *   <div className=\"flex flex-col h-full\">\n *     <header>Navigation</header>\n *     <main className=\"flex-1 overflow-auto\">\n *       <input type=\"search\" placeholder=\"Search...\" />\n *       Content that needs keyboard adaptation\n *     </main>\n *   </div>\n * </KeyboardScreenAdapter>\n * ```\n *\n * Features:\n * - Automatic viewport height detection and adjustment\n * - Smooth transitions when keyboard shows/hides\n * - Works with both iOS and Android virtual keyboards\n * - Responsive design that adapts to device orientation changes\n * - Maintains scroll behavior and overflow handling\n * - Lightweight with minimal performance impact\n * - Client-side only (Next.js compatible with 'use client')\n *\n * How it works:\n * 1. Uses the useKeyboardDetector hook to monitor window height changes\n * 2. Detects when virtual keyboard appears (window height decreases)\n * 3. Automatically adjusts the container's max-height to fit visible area\n * 4. Provides smooth transitions for better user experience\n * 5. Restores original height when keyboard disappears\n *\n * Use cases:\n * - Mobile web applications with forms\n * - Chat interfaces and messaging apps\n * - Search interfaces and input-heavy UIs\n * - Progressive Web Apps (PWAs)\n * - Any mobile-first application requiring keyboard interaction\n *\n * Browser compatibility:\n * - iOS Safari (all versions)\n * - Chrome Mobile (Android)\n * - Samsung Internet\n * - Firefox Mobile\n * - Other mobile browsers with virtual keyboards\n *\n * Performance considerations:\n * - Uses ResizeObserver for efficient window monitoring\n * - Minimal re-renders through optimized state management\n * - CSS transitions handled by GPU acceleration\n * - No layout thrashing during keyboard transitions\n *\n * Accessibility:\n * - Maintains focus management during transitions\n * - Preserves scroll position and user context\n * - Compatible with screen readers and assistive technologies\n * - Supports keyboard navigation patterns\n *\n * @param props - Component props extending standard div attributes\n * @param props.children - Content to render within the adaptive container\n * @param props.className - Additional CSS classes for the container\n * @param props.style - Inline styles (note: maxHeight may be overridden)\n * @param props.id - Unique identifier for the container\n * @param props.role - ARIA role for accessibility\n * @param props.tabIndex - Tab index for focus management\n * @param props.onScroll - Scroll event handler\n * @param props.onTouchStart - Touch start event handler\n * @param props.onTouchMove - Touch move event handler\n * @param props.onTouchEnd - Touch end event handler\n * @param props...rest - All other standard HTML div attributes\n *\n * @returns A responsive container that adapts to keyboard visibility\n */\nexport const KeyboardScreenAdapter: FC<\n  PropsWithChildren<HTMLAttributes<HTMLDivElement>>\n> = ({ children, className, ...props }) => {\n  const { windowHeight } = useKeyboardDetector();\n\n  return (\n    <div\n      className={cn(\n        'h-screen w-screen overflow-auto scroll-smooth transition',\n        className\n      )}\n      style={{\n        maxHeight: windowHeight ? `${windowHeight}px` : undefined,\n      }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":"uKA0GA,MAAa,GAER,CAAE,WAAU,YAAW,GAAG,KAAY,CACzC,GAAM,CAAE,gBAAiB,GAAqB,CAE9C,OACE,EAAC,MAAA,CACC,UAAW,EACT,2DACA,EACD,CACD,MAAO,CACL,UAAW,EAAe,GAAG,EAAa,IAAM,IAAA,GACjD,CACD,GAAI,EAEH,YACG"}

package/dist/esm/components/KeyboardShortcut/KeyboardShortcut.mjs

@@ -1,231 +1,2 @@
-'use client';
-
-import { cn } from "../../utils/cn.mjs";
-import { useDevice } from "../../hooks/useDevice.mjs";
-import { useEffect, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/KeyboardShortcut/KeyboardShortcut.tsx
-/**
-* Enum for available keyboard keys
-*/
-let KeyList = /* @__PURE__ */ function(KeyList) {
-	KeyList["⌘"] = "⌘";
-	KeyList["Ctrl"] = "Ctrl";
-	KeyList["Alt"] = "Alt";
-	KeyList["⌥"] = "⌥";
-	KeyList["Shift"] = "Shift";
-	KeyList["Meta"] = "Meta";
-	KeyList["F"] = "F";
-	KeyList["K"] = "K";
-	KeyList["L"] = "L";
-	KeyList["P"] = "P";
-	KeyList["S"] = "S";
-	KeyList["A"] = "A";
-	KeyList["B"] = "B";
-	KeyList["C"] = "C";
-	KeyList["D"] = "D";
-	KeyList["E"] = "E";
-	KeyList["G"] = "G";
-	KeyList["H"] = "H";
-	KeyList["I"] = "I";
-	KeyList["J"] = "J";
-	KeyList["M"] = "M";
-	KeyList["N"] = "N";
-	KeyList["O"] = "O";
-	KeyList["Q"] = "Q";
-	KeyList["R"] = "R";
-	KeyList["T"] = "T";
-	KeyList["U"] = "U";
-	KeyList["V"] = "V";
-	KeyList["W"] = "W";
-	KeyList["X"] = "X";
-	KeyList["Y"] = "Y";
-	KeyList["Z"] = "Z";
-	KeyList["Enter"] = "Enter";
-	KeyList["Escape"] = "Escape";
-	KeyList["Backspace"] = "Backspace";
-	KeyList["Tab"] = "Tab";
-	KeyList["Space"] = "Space";
-	KeyList["ArrowUp"] = "ArrowUp";
-	KeyList["ArrowDown"] = "ArrowDown";
-	KeyList["ArrowLeft"] = "ArrowLeft";
-	KeyList["ArrowRight"] = "ArrowRight";
-	KeyList["↑"] = "↑";
-	KeyList["↓"] = "↓";
-	KeyList["←"] = "←";
-	KeyList["→"] = "→";
-	return KeyList;
-}({});
-/**
-* Parse keyboard shortcut string into individual keys
-*/
-const parseShortcut = (shortcut) => {
-	return shortcut.split(" + ").map((key) => key.trim());
-};
-/**
-* Normalize key name for event comparison
-*/
-const normalizeKey = (key) => {
-	return {
-		"⌘": "Meta",
-		Ctrl: "Control",
-		Control: "Control",
-		Alt: "Alt",
-		"⌥": "Alt",
-		Shift: "Shift",
-		Meta: "Meta",
-		"↑": "ArrowUp",
-		"↓": "ArrowDown",
-		"←": "ArrowLeft",
-		"→": "ArrowRight",
-		ArrowUp: "ArrowUp",
-		ArrowDown: "ArrowDown",
-		ArrowLeft: "ArrowLeft",
-		ArrowRight: "ArrowRight"
-	}[key] || key;
-};
-/**
-* Check if the keyboard event matches the shortcut
-*/
-const matchesShortcut = (event, keys) => {
-	const normalizedKeys = keys.map(normalizeKey);
-	const hasModifiers = {
-		Meta: normalizedKeys.includes("Meta"),
-		Control: normalizedKeys.includes("Control"),
-		Alt: normalizedKeys.includes("Alt"),
-		Shift: normalizedKeys.includes("Shift")
-	};
-	if (hasModifiers.Meta !== event.metaKey || hasModifiers.Control !== event.ctrlKey || hasModifiers.Alt !== event.altKey || hasModifiers.Shift !== event.shiftKey) return false;
-	const nonModifierKey = keys.find((key) => ![
-		"⌘",
-		"Ctrl",
-		"Control",
-		"Alt",
-		"⌥",
-		"Shift",
-		"Meta"
-	].includes(normalizeKey(key)));
-	if (!nonModifierKey) return false;
-	const normalizedNonModifierKey = normalizeKey(nonModifierKey);
-	if (normalizedNonModifierKey.startsWith("Arrow")) return event.key === normalizedNonModifierKey;
-	return event.key.toLowerCase() === normalizedNonModifierKey.toLowerCase();
-};
-/**
-* Get display key symbol for better visual representation
-*/
-const getDisplayKey = (key) => {
-	return {
-		ArrowUp: "↑",
-		ArrowDown: "↓",
-		ArrowLeft: "←",
-		ArrowRight: "→"
-	}[key] || key;
-};
-/**
-* Get display shortcut based on OS (Mac uses ⌘ and ⌥, others use Ctrl and Alt)
-*/
-const getDisplayShortcut = (shortcut, isMac) => {
-	let result = shortcut;
-	if (isMac) {
-		result = result.replace(/Ctrl/g, "⌘");
-		result = result.replace(/Alt/g, "⌥");
-	} else {
-		result = result.replace(/⌘/g, "Ctrl");
-		result = result.replace(/⌥/g, "Alt");
-	}
-	result = result.replace(/ArrowUp/g, "↑");
-	result = result.replace(/ArrowDown/g, "↓");
-	result = result.replace(/ArrowLeft/g, "←");
-	result = result.replace(/ArrowRight/g, "→");
-	return result;
-};
-/**
-* KeyboardShortcut Component
-*
-* A reusable component that displays keyboard shortcuts and listens for key combinations.
-* Automatically adapts to Mac (⌘, ⌥) and Windows/Linux (Ctrl, Alt) conventions.
-*
-* @example
-* ```tsx
-* <KeyboardShortcut
-*   shortcut="⌘ + F"
-*   onTriggered={() => setShowSearch(true)}
-* />
-* ```
-*/
-const KeyboardShortcut = ({ shortcut, onTriggered, display = true, disabled = false, className, size = "md" }) => {
-	const { isMac } = useDevice();
-	const keys = parseShortcut(getDisplayShortcut(shortcut, isMac ?? false));
-	const [pressedKeys, setPressedKeys] = useState(/* @__PURE__ */ new Set());
-	useEffect(() => {
-		const handleKeyDown = (event) => {
-			const target = event.target;
-			const isInputField = target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable;
-			const currentKey = event.key;
-			const normalizedEventKeys = /* @__PURE__ */ new Set();
-			if (event.metaKey) normalizedEventKeys.add("⌘");
-			if (event.ctrlKey) normalizedEventKeys.add("Ctrl");
-			if (event.altKey) normalizedEventKeys.add(isMac ? "⌥" : "Alt");
-			if (event.shiftKey) normalizedEventKeys.add("Shift");
-			if (currentKey.startsWith("Arrow")) {
-				normalizedEventKeys.add(currentKey);
-				normalizedEventKeys.add(getDisplayKey(currentKey));
-			} else normalizedEventKeys.add(currentKey.toUpperCase());
-			setPressedKeys(normalizedEventKeys);
-			if (!disabled && onTriggered && matchesShortcut(event, keys)) {
-				const isEscapeShortcut = keys.includes("Escape");
-				if (isInputField && !isEscapeShortcut) return;
-				event.preventDefault();
-				onTriggered();
-			}
-		};
-		const handleKeyUp = () => {
-			setPressedKeys(/* @__PURE__ */ new Set());
-		};
-		window.addEventListener("keydown", handleKeyDown);
-		window.addEventListener("keyup", handleKeyUp);
-		window.addEventListener("blur", handleKeyUp);
-		return () => {
-			window.removeEventListener("keydown", handleKeyDown);
-			window.removeEventListener("keyup", handleKeyUp);
-			window.removeEventListener("blur", handleKeyUp);
-		};
-	}, [
-		keys,
-		onTriggered,
-		isMac,
-		disabled
-	]);
-	if (!display) return null;
-	/**
-	* Check if a key is currently pressed
-	*/
-	const isKeyPressed = (key) => {
-		const upperKey = key.toUpperCase();
-		const normalizedKey = normalizeKey(key);
-		return pressedKeys.has(key) || pressedKeys.has(upperKey) || pressedKeys.has(normalizedKey) || key === "⌘" && pressedKeys.has("Meta") || key === "Ctrl" && pressedKeys.has("Control") || key === "⌥" && pressedKeys.has("Alt") || key === "Alt" && pressedKeys.has("Alt") || key === "←" && pressedKeys.has("ArrowLeft") || key === "→" && pressedKeys.has("ArrowRight") || key === "↑" && pressedKeys.has("ArrowUp") || key === "↓" && pressedKeys.has("ArrowDown");
-	};
-	return /* @__PURE__ */ jsx("kbd", {
-		className: cn("inline-flex items-center justify-center gap-0.5 p-0.5", "rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl", "font-medium font-sans", "border-1 border-neutral/20 text-neutral", size === "sm" && "text-xs", size === "md" && "text-sm", size === "lg" && "text-base", className),
-		children: keys.map((key, index) => {
-			const keyId = `${key}-${index}-${shortcut}`;
-			const displayKey = getDisplayKey(key);
-			return /* @__PURE__ */ jsxs("span", {
-				className: "inline-flex items-center",
-				children: [index > 0 && /* @__PURE__ */ jsx("span", {
-					className: "text-neutral/50",
-					children: "+"
-				}), /* @__PURE__ */ jsx("span", {
-					className: cn("min-w-4 px-0.5 text-center", isKeyPressed(key) && "scale-120 font-bold text-text"),
-					suppressHydrationWarning: true,
-					children: displayKey
-				})]
-			}, keyId);
-		})
-	});
-};
-
-//#endregion
-export { KeyList, KeyboardShortcut };
+"use client";import{cn as e}from"../../utils/cn.mjs";import{useDevice as t}from"../../hooks/useDevice.mjs";import{useEffect as n,useState as r}from"react";import{jsx as i,jsxs as a}from"react/jsx-runtime";let o=function(e){return e[`⌘`]=`⌘`,e.Ctrl=`Ctrl`,e.Alt=`Alt`,e[`⌥`]=`⌥`,e.Shift=`Shift`,e.Meta=`Meta`,e.F=`F`,e.K=`K`,e.L=`L`,e.P=`P`,e.S=`S`,e.A=`A`,e.B=`B`,e.C=`C`,e.D=`D`,e.E=`E`,e.G=`G`,e.H=`H`,e.I=`I`,e.J=`J`,e.M=`M`,e.N=`N`,e.O=`O`,e.Q=`Q`,e.R=`R`,e.T=`T`,e.U=`U`,e.V=`V`,e.W=`W`,e.X=`X`,e.Y=`Y`,e.Z=`Z`,e.Enter=`Enter`,e.Escape=`Escape`,e.Backspace=`Backspace`,e.Tab=`Tab`,e.Space=`Space`,e.ArrowUp=`ArrowUp`,e.ArrowDown=`ArrowDown`,e.ArrowLeft=`ArrowLeft`,e.ArrowRight=`ArrowRight`,e[`↑`]=`↑`,e[`↓`]=`↓`,e[`←`]=`←`,e[`→`]=`→`,e}({});const s=e=>e.split(` + `).map(e=>e.trim()),c=e=>({"⌘":`Meta`,Ctrl:`Control`,Control:`Control`,Alt:`Alt`,"⌥":`Alt`,Shift:`Shift`,Meta:`Meta`,"↑":`ArrowUp`,"↓":`ArrowDown`,"←":`ArrowLeft`,"→":`ArrowRight`,ArrowUp:`ArrowUp`,ArrowDown:`ArrowDown`,ArrowLeft:`ArrowLeft`,ArrowRight:`ArrowRight`})[e]||e,l=(e,t)=>{let n=t.map(c),r={Meta:n.includes(`Meta`),Control:n.includes(`Control`),Alt:n.includes(`Alt`),Shift:n.includes(`Shift`)};if(r.Meta!==e.metaKey||r.Control!==e.ctrlKey||r.Alt!==e.altKey||r.Shift!==e.shiftKey)return!1;let i=t.find(e=>![`⌘`,`Ctrl`,`Control`,`Alt`,`⌥`,`Shift`,`Meta`].includes(c(e)));if(!i)return!1;let a=c(i);return a.startsWith(`Arrow`)?e.key===a:e.key.toLowerCase()===a.toLowerCase()},u=e=>({ArrowUp:`↑`,ArrowDown:`↓`,ArrowLeft:`←`,ArrowRight:`→`})[e]||e,d=(e,t)=>{let n=e;return t?(n=n.replace(/Ctrl/g,`⌘`),n=n.replace(/Alt/g,`⌥`)):(n=n.replace(/⌘/g,`Ctrl`),n=n.replace(/⌥/g,`Alt`)),n=n.replace(/ArrowUp/g,`↑`),n=n.replace(/ArrowDown/g,`↓`),n=n.replace(/ArrowLeft/g,`←`),n=n.replace(/ArrowRight/g,`→`),n},f=({shortcut:o,onTriggered:f,display:p=!0,disabled:m=!1,className:h,size:g=`md`})=>{let{isMac:_}=t(),v=s(d(o,_??!1)),[y,b]=r(new Set);if(n(()=>{let e=e=>{let t=e.target,n=t.tagName===`INPUT`||t.tagName===`TEXTAREA`||t.isContentEditable,r=e.key,i=new Set;if(e.metaKey&&i.add(`⌘`),e.ctrlKey&&i.add(`Ctrl`),e.altKey&&i.add(_?`⌥`:`Alt`),e.shiftKey&&i.add(`Shift`),r.startsWith(`Arrow`)?(i.add(r),i.add(u(r))):i.add(r.toUpperCase()),b(i),!m&&f&&l(e,v)){let t=v.includes(`Escape`);if(n&&!t)return;e.preventDefault(),f()}},t=()=>{b(new Set)};return window.addEventListener(`keydown`,e),window.addEventListener(`keyup`,t),window.addEventListener(`blur`,t),()=>{window.removeEventListener(`keydown`,e),window.removeEventListener(`keyup`,t),window.removeEventListener(`blur`,t)}},[v,f,_,m]),!p)return null;let x=e=>{let t=e.toUpperCase(),n=c(e);return y.has(e)||y.has(t)||y.has(n)||e===`⌘`&&y.has(`Meta`)||e===`Ctrl`&&y.has(`Control`)||e===`⌥`&&y.has(`Alt`)||e===`Alt`&&y.has(`Alt`)||e===`←`&&y.has(`ArrowLeft`)||e===`→`&&y.has(`ArrowRight`)||e===`↑`&&y.has(`ArrowUp`)||e===`↓`&&y.has(`ArrowDown`)};return i(`kbd`,{className:e(`inline-flex items-center justify-center gap-0.5 p-0.5`,`rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl`,`font-medium font-sans`,`border-1 border-neutral/20 text-neutral`,g===`sm`&&`text-xs`,g===`md`&&`text-sm`,g===`lg`&&`text-base`,h),children:v.map((t,n)=>{let r=`${t}-${n}-${o}`,s=u(t);return a(`span`,{className:`inline-flex items-center`,children:[n>0&&i(`span`,{className:`text-neutral/50`,children:`+`}),i(`span`,{className:e(`min-w-4 px-0.5 text-center`,x(t)&&`scale-120 font-bold text-text`),suppressHydrationWarning:!0,children:s})]},r)})})};export{o as KeyList,f as KeyboardShortcut};
 //# sourceMappingURL=KeyboardShortcut.mjs.map