@intlayer/design-system 8.11.2 → 8.12.0-canary.0

package/dist/esm/components/TextArea/ContentEditableTextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditableTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/ContentEditableTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport type { VariantProps } from 'class-variance-authority';\nimport {\n  type ClipboardEvent,\n  type DragEvent,\n  type FC,\n  type HTMLAttributes,\n  type InputEvent,\n  type KeyboardEvent,\n  type MutableRefObject,\n  type Ref,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { type InputVariant, inputVariants } from '../Input';\n\ntype CaretPosition = {\n  line: number;\n  offset: number;\n};\n\ntype UseContentEditableOptions = {\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n};\n\nconst ZERO_WIDTH_SPACE = '\\u200B';\n\nconst getTextFromContainer = (container: HTMLDivElement): string => {\n  const lineEls = container.querySelectorAll('[data-line]');\n  if (lineEls.length === 0) {\n    return (container.textContent ?? '').split(ZERO_WIDTH_SPACE).join('');\n  }\n\n  return Array.from(lineEls)\n    .map((el) => {\n      const editable = el.querySelector('[data-editable]');\n      const raw = editable?.textContent ?? el.textContent ?? '';\n      return raw === ZERO_WIDTH_SPACE\n        ? ''\n        : raw.split(ZERO_WIDTH_SPACE).join('');\n    })\n    .join('\\n');\n};\n\nconst splitLines = (text: string): string[] => {\n  const lines = text.split('\\n');\n  return lines.length === 0 ? [''] : lines;\n};\n\n// Cached Intl.Segmenter for grapheme-aware deletion (emoji, CJK, etc.)\n// Intl.Segmenter is ES2022+ but we feature-detect at runtime.\ntype GraphemeSegmenter = {\n  segment: (input: string) => Iterable<{ segment: string }>;\n};\n\nconst createGraphemeSegmenter = (): GraphemeSegmenter | null => {\n  if (typeof Intl === 'undefined' || !('Segmenter' in Intl)) return null;\n  const SegmenterCtor = (\n    Intl as unknown as Record<\n      string,\n      new (\n        ...args: unknown[]\n      ) => GraphemeSegmenter\n    >\n  ).Segmenter;\n  return new SegmenterCtor(undefined, { granularity: 'grapheme' });\n};\n\nconst graphemeSegmenter = createGraphemeSegmenter();\n\n/**\n * Find the previous grapheme cluster boundary for safe deletion.\n * Falls back to code-point-aware deletion if Intl.Segmenter is unavailable.\n */\nconst prevGraphemeBoundary = (text: string, offset: number): number => {\n  if (offset <= 0) return 0;\n\n  if (graphemeSegmenter) {\n    const segments = [...graphemeSegmenter.segment(text.slice(0, offset))];\n    const last = segments[segments.length - 1];\n    return last ? offset - last.segment.length : offset - 1;\n  }\n\n  // Fallback: handle surrogate pairs\n  const code = text.charCodeAt(offset - 1);\n  if (code >= 0xdc00 && code <= 0xdfff && offset >= 2) {\n    return offset - 2;\n  }\n  return offset - 1;\n};\n\n/**\n * Find the next grapheme cluster boundary for safe forward deletion.\n */\nconst nextGraphemeBoundary = (text: string, offset: number): number => {\n  if (offset >= text.length) return text.length;\n\n  if (graphemeSegmenter) {\n    const segments = [...graphemeSegmenter.segment(text.slice(offset))];\n    const first = segments[0];\n    return first ? offset + first.segment.length : offset + 1;\n  }\n\n  // Fallback: handle surrogate pairs\n  const code = text.charCodeAt(offset);\n  if (code >= 0xd800 && code <= 0xdbff && offset + 1 < text.length) {\n    return offset + 2;\n  }\n  return offset + 1;\n};\n\n/**\n * Find the previous word boundary for Option+Backspace.\n */\nconst prevWordBoundary = (text: string, offset: number): number => {\n  if (offset <= 0) return 0;\n  let i = offset - 1;\n  // Skip whitespace\n  while (i > 0 && /\\s/.test(text[i - 1])) i--;\n  // Skip word characters\n  while (i > 0 && /\\S/.test(text[i - 1])) i--;\n  return i;\n};\n\n/**\n * Find the next word boundary for Option+Delete.\n */\nconst nextWordBoundary = (text: string, offset: number): number => {\n  if (offset >= text.length) return text.length;\n  let i = offset;\n  // Skip word characters\n  while (i < text.length && /\\S/.test(text[i])) i++;\n  // Skip whitespace\n  while (i < text.length && /\\s/.test(text[i])) i++;\n  return i;\n};\n\n/**\n * Find the start of the current line (for Cmd+Backspace).\n */\nconst lineStart = (text: string, offset: number): number => {\n  const before = text.slice(0, offset);\n  const lastNewline = before.lastIndexOf('\\n');\n  return lastNewline + 1;\n};\n\n/**\n * Find the end of the current line (for Cmd+Delete).\n */\nconst lineEnd = (text: string, offset: number): number => {\n  const nextNewline = text.indexOf('\\n', offset);\n  return nextNewline === -1 ? text.length : nextNewline;\n};\n\nexport const useContentEditable = ({\n  value,\n  defaultValue,\n  onChange,\n  disabled = false,\n}: UseContentEditableOptions) => {\n  const initialValue = value ?? defaultValue ?? '';\n  const [lines, setLines] = useState<string[]>(() => splitLines(initialValue));\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const pendingCaretRef = useRef<CaretPosition | null>(null);\n  const isControlled = value !== undefined;\n\n  // Keep a ref to the latest lines to avoid stale closures in rapid typing\n  const linesRef = useRef(lines);\n  linesRef.current = lines;\n\n  useEffect(() => {\n    if (isControlled && value !== undefined) {\n      setLines(splitLines(value));\n    }\n  }, [value, isControlled]);\n\n  const getText = () => linesRef.current.join('\\n');\n\n  const getCaretPosition = (): CaretPosition | null => {\n    const sel = window.getSelection();\n    if (!sel?.rangeCount || !containerRef.current) return null;\n\n    const range = sel.getRangeAt(0);\n    const lineEls = containerRef.current.querySelectorAll('[data-line]');\n\n    for (let i = 0; i < lineEls.length; i++) {\n      if (lineEls[i].contains(range.startContainer)) {\n        return { line: i, offset: range.startOffset };\n      }\n    }\n    return null;\n  };\n\n  const getSelectionOffsets = (): {\n    start: number;\n    end: number;\n    hasSelection: boolean;\n  } | null => {\n    const sel = window.getSelection();\n    if (!sel?.rangeCount || !containerRef.current) return null;\n\n    const range = sel.getRangeAt(0);\n    const lineEls = containerRef.current.querySelectorAll('[data-line]');\n    const currentLines = linesRef.current;\n\n    const findOffset = (node: Node, nodeOffset: number): number => {\n      for (let i = 0; i < lineEls.length; i++) {\n        if (lineEls[i].contains(node)) {\n          let flat = 0;\n          for (let j = 0; j < i; j++) {\n            flat += currentLines[j].length + 1;\n          }\n          return flat + Math.min(nodeOffset, currentLines[i]?.length ?? 0);\n        }\n      }\n      // Selection is on the root container (e.g. select-all)\n      if (node === containerRef.current) {\n        if (nodeOffset === 0) return 0;\n        return currentLines.join('\\n').length;\n      }\n      return 0;\n    };\n\n    const start = findOffset(range.startContainer, range.startOffset);\n    const end = findOffset(range.endContainer, range.endOffset);\n\n    return {\n      start: Math.min(start, end),\n      end: Math.max(start, end),\n      hasSelection: !range.collapsed,\n    };\n  };\n\n  const setCaretPosition = (pos: CaretPosition) => {\n    if (!containerRef.current) return;\n\n    const lineEls = containerRef.current.querySelectorAll('[data-line]');\n    const lineEl = lineEls[pos.line];\n    if (!lineEl) return;\n\n    const editable = lineEl.querySelector('[data-editable]');\n    const node =\n      editable?.firstChild ?? editable ?? lineEl.firstChild ?? lineEl;\n\n    const sel = window.getSelection();\n    if (!sel) return;\n\n    const range = document.createRange();\n    const maxOff = Math.min(pos.offset, node.textContent?.length ?? 0);\n\n    try {\n      range.setStart(node, maxOff);\n      range.collapse(true);\n      sel.removeAllRanges();\n      sel.addRange(range);\n    } catch {\n      range.selectNodeContents(node);\n      range.collapse(false);\n      sel.removeAllRanges();\n      sel.addRange(range);\n    }\n  };\n\n  useLayoutEffect(() => {\n    if (pendingCaretRef.current && containerRef.current) {\n      setCaretPosition(pendingCaretRef.current);\n      pendingCaretRef.current = null;\n    }\n  });\n\n  const flatOffsetFromCaret = (pos: CaretPosition): number => {\n    const currentLines = linesRef.current;\n    let offset = 0;\n    for (let i = 0; i < pos.line; i++) {\n      offset += currentLines[i].length + 1;\n    }\n    return offset + pos.offset;\n  };\n\n  const caretFromFlatOffset = (\n    flat: number,\n    targetLines: string[]\n  ): CaretPosition => {\n    let rem = flat;\n    for (let i = 0; i < targetLines.length; i++) {\n      if (rem <= targetLines[i].length) {\n        return { line: i, offset: rem };\n      }\n      rem -= targetLines[i].length + 1;\n    }\n    return {\n      line: targetLines.length - 1,\n      offset: targetLines[targetLines.length - 1]?.length ?? 0,\n    };\n  };\n\n  const getCursorOffset = (): number => {\n    const pos = getCaretPosition();\n    if (!pos) return 0;\n    return flatOffsetFromCaret(pos);\n  };\n\n  /**\n   * Applies a text mutation: computes new lines, sets pending caret, updates state.\n   */\n  const applyTextChange = (newText: string, caretOffset: number) => {\n    const newLines = splitLines(newText);\n    pendingCaretRef.current = caretFromFlatOffset(caretOffset, newLines);\n    setLines(newLines);\n    onChange?.(newText);\n  };\n\n  const handleInput = () => {\n    if (pendingCaretRef.current !== null) return;\n    if (disabled || !containerRef.current) return;\n\n    const caretPos = getCaretPosition();\n    const newText = getTextFromContainer(containerRef.current);\n    const newLines = splitLines(newText);\n\n    pendingCaretRef.current = caretPos;\n    setLines(newLines);\n    onChange?.(newText);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    // Don't intercept during IME composition (CJK input)\n    if (e.nativeEvent.isComposing) return;\n\n    // Block undo/redo - browser would mutate DOM out of sync with React\n    if ((e.metaKey || e.ctrlKey) && e.key === 'z') {\n      e.preventDefault();\n      return;\n    }\n\n    const selInfo = getSelectionOffsets();\n    if (!selInfo) return;\n\n    const currentText = linesRef.current.join('\\n');\n\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      const newText =\n        currentText.slice(0, selInfo.start) +\n        '\\n' +\n        currentText.slice(selInfo.end);\n      applyTextChange(newText, selInfo.start + 1);\n      return;\n    }\n\n    if (e.key === 'Backspace') {\n      e.preventDefault();\n\n      if (selInfo.hasSelection) {\n        const newText =\n          currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n        applyTextChange(newText, selInfo.start);\n      } else {\n        if (selInfo.start === 0) return;\n\n        let deleteFrom: number;\n        if (e.metaKey) {\n          // Cmd+Backspace: delete to start of line\n          deleteFrom = lineStart(currentText, selInfo.start);\n        } else if (e.altKey) {\n          // Option+Backspace: delete previous word\n          deleteFrom = prevWordBoundary(currentText, selInfo.start);\n        } else {\n          // Regular backspace: delete one grapheme\n          deleteFrom = prevGraphemeBoundary(currentText, selInfo.start);\n        }\n\n        const newText =\n          currentText.slice(0, deleteFrom) + currentText.slice(selInfo.start);\n        applyTextChange(newText, deleteFrom);\n      }\n      return;\n    }\n\n    if (e.key === 'Delete') {\n      e.preventDefault();\n\n      if (selInfo.hasSelection) {\n        const newText =\n          currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n        applyTextChange(newText, selInfo.start);\n      } else {\n        if (selInfo.start >= currentText.length) return;\n\n        let deleteTo: number;\n        if (e.metaKey) {\n          // Cmd+Delete: delete to end of line\n          deleteTo = lineEnd(currentText, selInfo.start);\n        } else if (e.altKey) {\n          // Option+Delete: delete next word\n          deleteTo = nextWordBoundary(currentText, selInfo.start);\n        } else {\n          // Regular delete: delete one grapheme\n          deleteTo = nextGraphemeBoundary(currentText, selInfo.start);\n        }\n\n        const newText =\n          currentText.slice(0, selInfo.start) + currentText.slice(deleteTo);\n        applyTextChange(newText, selInfo.start);\n      }\n      return;\n    }\n  };\n\n  const handleCut = (e: ClipboardEvent<HTMLDivElement>) => {\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    e.preventDefault();\n    const selInfo = getSelectionOffsets();\n    if (!selInfo?.hasSelection) return;\n\n    const currentText = linesRef.current.join('\\n');\n    const selectedText = currentText.slice(selInfo.start, selInfo.end);\n\n    // Write selected text to clipboard\n    e.clipboardData.setData('text/plain', selectedText);\n\n    // Delete the selected text\n    const newText =\n      currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n    applyTextChange(newText, selInfo.start);\n  };\n\n  const handlePaste = (e: ClipboardEvent<HTMLDivElement>) => {\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    e.preventDefault();\n    const pastedText = e.clipboardData.getData('text/plain');\n    if (!pastedText) return;\n\n    const selInfo = getSelectionOffsets();\n    if (!selInfo) return;\n\n    const currentText = linesRef.current.join('\\n');\n    const newText =\n      currentText.slice(0, selInfo.start) +\n      pastedText +\n      currentText.slice(selInfo.end);\n    applyTextChange(newText, selInfo.start + pastedText.length);\n  };\n\n  const handleBeforeInput = (e: InputEvent<HTMLDivElement>) => {\n    if (disabled) return;\n\n    const inputEvent = e.nativeEvent as InputEvent;\n\n    // Don't intercept during IME composition (CJK input)\n    if (inputEvent.isComposing) return;\n\n    const inputType = inputEvent.inputType;\n\n    // Skip types handled by handleKeyDown (when keydown fires)\n    if (inputType === 'insertParagraph' || inputType === 'insertLineBreak') {\n      return;\n    }\n\n    // Handle deletions as fallback for mobile keyboards that don't fire keydown\n    if (\n      inputType === 'deleteContentBackward' ||\n      inputType === 'deleteContentForward'\n    ) {\n      e.preventDefault();\n      const selInfo = getSelectionOffsets();\n      if (!selInfo) return;\n\n      const currentText = linesRef.current.join('\\n');\n\n      if (selInfo.hasSelection) {\n        const newText =\n          currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n        applyTextChange(newText, selInfo.start);\n      } else if (inputType === 'deleteContentBackward') {\n        if (selInfo.start === 0) return;\n        const deleteFrom = prevGraphemeBoundary(currentText, selInfo.start);\n        const newText =\n          currentText.slice(0, deleteFrom) + currentText.slice(selInfo.start);\n        applyTextChange(newText, deleteFrom);\n      } else {\n        if (selInfo.start >= currentText.length) return;\n        const deleteTo = nextGraphemeBoundary(currentText, selInfo.start);\n        const newText =\n          currentText.slice(0, selInfo.start) + currentText.slice(deleteTo);\n        applyTextChange(newText, selInfo.start);\n      }\n      return;\n    }\n\n    // Handle spell-check replacements\n    if (inputType === 'insertReplacementText') {\n      e.preventDefault();\n      const selInfo = getSelectionOffsets();\n      if (!selInfo) return;\n\n      const currentText = linesRef.current.join('\\n');\n      const replacement =\n        inputEvent.data ?? inputEvent.dataTransfer?.getData('text/plain') ?? '';\n      const newText =\n        currentText.slice(0, selInfo.start) +\n        replacement +\n        currentText.slice(selInfo.end);\n      applyTextChange(newText, selInfo.start + replacement.length);\n      return;\n    }\n\n    if (inputType === 'insertText' && inputEvent.data) {\n      e.preventDefault();\n\n      const selInfo = getSelectionOffsets();\n      if (!selInfo) return;\n\n      const currentText = linesRef.current.join('\\n');\n      const inserted = inputEvent.data;\n      const newText =\n        currentText.slice(0, selInfo.start) +\n        inserted +\n        currentText.slice(selInfo.end);\n      applyTextChange(newText, selInfo.start + inserted.length);\n    }\n  };\n\n  const handleDrop = (e: DragEvent<HTMLDivElement>) => {\n    // Block drag-and-drop to prevent uncontrolled DOM mutations\n    e.preventDefault();\n  };\n\n  const handleDragOver = (e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n  };\n\n  return {\n    lines,\n    containerRef,\n    getText,\n    handleInput,\n    handleBeforeInput,\n    handleKeyDown,\n    handleCut,\n    handlePaste,\n    handleDrop,\n    handleDragOver,\n    getCaretPosition,\n    setCaretPosition,\n    getCursorOffset,\n    caretFromFlatOffset,\n  };\n};\n\ntype LineProps = {\n  index: number;\n  text: string;\n  isLast: boolean;\n  ghostText?: string;\n};\n\nconst Line: FC<LineProps> = ({ index, text, isLast, ghostText }) => (\n  <span data-line={index} className=\"block min-h-[1.5rem]\">\n    <span data-editable>{text || '\\u200B'}</span>\n    {ghostText && (\n      <span\n        data-ghost\n        className=\"pointer-events-none select-none text-neutral\"\n        aria-hidden=\"true\"\n      >\n        {ghostText}\n      </span>\n    )}\n    {!isLast && <br />}\n  </span>\n);\n\nexport type ContentEditableTextAreaHandle = {\n  getContainer: () => HTMLDivElement | null;\n  getText: () => string;\n  focus: () => void;\n  getCursorOffset: () => number;\n  setCursorAtOffset: (offset: number) => void;\n};\n\nexport type ContentEditableTextAreaProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> & {\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  minRows?: number;\n  maxRows?: number;\n  autoSize?: boolean;\n  validationStyleEnabled?: boolean;\n  variant?: InputVariant | `${InputVariant}`;\n  ghostText?: string;\n  ghostLine?: number;\n  ghostOffset?: number;\n  ref?: Ref<ContentEditableTextAreaHandle>;\n  dir?: 'ltr' | 'rtl' | 'auto';\n} & Omit<\n    VariantProps<typeof inputVariants>,\n    'validationStyleEnabled' | 'variant'\n  >;\n\nconst LINE_HEIGHT = 24;\nconst LINE_PADDING = 12;\n\nexport const ContentEditableTextArea: FC<ContentEditableTextAreaProps> = ({\n  value,\n  defaultValue,\n  onChange,\n  placeholder,\n  disabled = false,\n  minRows = 1,\n  maxRows = 999,\n  autoSize = true,\n  validationStyleEnabled = false,\n  variant,\n  ghostText,\n  ghostLine,\n  ghostOffset,\n  onClick,\n  className,\n  dir = 'auto',\n  ref,\n  ...rest\n}) => {\n  const {\n    lines,\n    containerRef,\n    getText,\n    handleInput,\n    handleBeforeInput,\n    handleKeyDown,\n    handleCut,\n    handlePaste,\n    handleDrop,\n    handleDragOver,\n    getCursorOffset,\n    setCaretPosition,\n    caretFromFlatOffset,\n  } = useContentEditable({ value, defaultValue, onChange, disabled });\n\n  const elRef = useRef<HTMLDivElement | null>(null);\n\n  const setRef = (el: HTMLDivElement | null) => {\n    elRef.current = el;\n    (containerRef as MutableRefObject<HTMLDivElement | null>).current = el;\n  };\n\n  useImperativeHandle(ref, () => ({\n    getContainer: () => elRef.current,\n    getText,\n    focus: () => elRef.current?.focus(),\n    getCursorOffset,\n    setCursorAtOffset: (offset: number) => {\n      setCaretPosition(caretFromFlatOffset(offset, lines));\n    },\n  }));\n\n  useLayoutEffect(() => {\n    if (!autoSize || !elRef.current) return;\n\n    const el = elRef.current;\n    const max = LINE_HEIGHT * maxRows + LINE_PADDING;\n    const min = LINE_HEIGHT * minRows + LINE_PADDING;\n\n    el.style.height = 'auto';\n    const sh = el.scrollHeight;\n    el.style.height = `${Math.max(Math.min(sh, max), min)}px`;\n    el.style.overflowY = sh > max ? 'auto' : 'hidden';\n  }, [lines, autoSize, maxRows, minRows]);\n\n  const isEmpty = lines.length === 1 && lines[0] === '';\n  const hasGhost =\n    ghostText && ghostLine !== undefined && ghostOffset !== undefined;\n\n  return (\n    <div className=\"relative w-full\">\n      {isEmpty && placeholder && (\n        <div\n          className=\"pointer-events-none absolute inset-0 select-none px-2 py-3 text-base text-neutral-400 leading-[1.5rem] md:py-2 md:text-sm\"\n          aria-hidden=\"true\"\n        >\n          {placeholder}\n        </div>\n      )}\n\n      <div\n        {...rest}\n        ref={setRef}\n        role=\"textbox\"\n        aria-multiline=\"true\"\n        aria-placeholder={placeholder}\n        aria-disabled={disabled}\n        aria-autocomplete={hasGhost ? 'inline' : undefined}\n        tabIndex={disabled ? -1 : 0}\n        contentEditable={!disabled}\n        suppressContentEditableWarning\n        dir={dir}\n        onInput={handleInput}\n        onBeforeInput={handleBeforeInput}\n        onKeyDown={handleKeyDown}\n        onCut={handleCut}\n        onPaste={handlePaste}\n        onDrop={handleDrop}\n        onDragOver={handleDragOver}\n        onClick={onClick}\n        className={cn(\n          'resize-none whitespace-pre-wrap break-words outline-none',\n          inputVariants({\n            variant,\n            validationStyleEnabled: validationStyleEnabled\n              ? 'enabled'\n              : 'disabled',\n          }),\n          autoSize && 'overflow-y-auto',\n          className\n        )}\n      >\n        {lines.map((text, i) => (\n          <Line\n            key={i}\n            index={i}\n            text={text}\n            isLast={i === lines.length - 1}\n            ghostText={hasGhost && ghostLine === i ? ghostText : undefined}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ContentEditableTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/ContentEditableTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport type { VariantProps } from 'class-variance-authority';\nimport {\n  type ClipboardEvent,\n  type DragEvent,\n  type FC,\n  type HTMLAttributes,\n  type InputEvent,\n  type KeyboardEvent,\n  type Ref,\n  type RefObject,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { inputVariants } from '../Input';\n\ntype CaretPosition = {\n  line: number;\n  offset: number;\n};\n\ntype UseContentEditableOptions = {\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n};\n\nconst ZERO_WIDTH_SPACE = '\\u200B';\n\nconst getTextFromContainer = (container: HTMLDivElement): string => {\n  const lineEls = container.querySelectorAll('[data-line]');\n  if (lineEls.length === 0) {\n    return (container.textContent ?? '').split(ZERO_WIDTH_SPACE).join('');\n  }\n\n  return Array.from(lineEls)\n    .map((el) => {\n      const editable = el.querySelector('[data-editable]');\n      const raw = editable?.textContent ?? el.textContent ?? '';\n      return raw === ZERO_WIDTH_SPACE\n        ? ''\n        : raw.split(ZERO_WIDTH_SPACE).join('');\n    })\n    .join('\\n');\n};\n\nconst splitLines = (text: string): string[] => {\n  const lines = text.split('\\n');\n  return lines.length === 0 ? [''] : lines;\n};\n\n// Cached Intl.Segmenter for grapheme-aware deletion (emoji, CJK, etc.)\n// Intl.Segmenter is ES2022+ but we feature-detect at runtime.\ntype GraphemeSegmenter = {\n  segment: (input: string) => Iterable<{ segment: string }>;\n};\n\nconst createGraphemeSegmenter = (): GraphemeSegmenter | null => {\n  if (typeof Intl === 'undefined' || !('Segmenter' in Intl)) return null;\n  const SegmenterCtor = (\n    Intl as unknown as Record<\n      string,\n      new (\n        ...args: unknown[]\n      ) => GraphemeSegmenter\n    >\n  ).Segmenter;\n  return new SegmenterCtor(undefined, { granularity: 'grapheme' });\n};\n\nconst graphemeSegmenter = createGraphemeSegmenter();\n\n/**\n * Find the previous grapheme cluster boundary for safe deletion.\n * Falls back to code-point-aware deletion if Intl.Segmenter is unavailable.\n */\nconst prevGraphemeBoundary = (text: string, offset: number): number => {\n  if (offset <= 0) return 0;\n\n  if (graphemeSegmenter) {\n    const segments = [...graphemeSegmenter.segment(text.slice(0, offset))];\n    const last = segments[segments.length - 1];\n    return last ? offset - last.segment.length : offset - 1;\n  }\n\n  // Fallback: handle surrogate pairs\n  const code = text.charCodeAt(offset - 1);\n  if (code >= 0xdc00 && code <= 0xdfff && offset >= 2) {\n    return offset - 2;\n  }\n  return offset - 1;\n};\n\n/**\n * Find the next grapheme cluster boundary for safe forward deletion.\n */\nconst nextGraphemeBoundary = (text: string, offset: number): number => {\n  if (offset >= text.length) return text.length;\n\n  if (graphemeSegmenter) {\n    const segments = [...graphemeSegmenter.segment(text.slice(offset))];\n    const first = segments[0];\n    return first ? offset + first.segment.length : offset + 1;\n  }\n\n  // Fallback: handle surrogate pairs\n  const code = text.charCodeAt(offset);\n  if (code >= 0xd800 && code <= 0xdbff && offset + 1 < text.length) {\n    return offset + 2;\n  }\n  return offset + 1;\n};\n\n/**\n * Find the previous word boundary for Option+Backspace.\n */\nconst prevWordBoundary = (text: string, offset: number): number => {\n  if (offset <= 0) return 0;\n  let i = offset - 1;\n  // Skip whitespace\n  while (i > 0 && /\\s/.test(text[i - 1])) i--;\n  // Skip word characters\n  while (i > 0 && /\\S/.test(text[i - 1])) i--;\n  return i;\n};\n\n/**\n * Find the next word boundary for Option+Delete.\n */\nconst nextWordBoundary = (text: string, offset: number): number => {\n  if (offset >= text.length) return text.length;\n  let i = offset;\n  // Skip word characters\n  while (i < text.length && /\\S/.test(text[i])) i++;\n  // Skip whitespace\n  while (i < text.length && /\\s/.test(text[i])) i++;\n  return i;\n};\n\n/**\n * Find the start of the current line (for Cmd+Backspace).\n */\nconst lineStart = (text: string, offset: number): number => {\n  const before = text.slice(0, offset);\n  const lastNewline = before.lastIndexOf('\\n');\n  return lastNewline + 1;\n};\n\n/**\n * Find the end of the current line (for Cmd+Delete).\n */\nconst lineEnd = (text: string, offset: number): number => {\n  const nextNewline = text.indexOf('\\n', offset);\n  return nextNewline === -1 ? text.length : nextNewline;\n};\n\nexport const useContentEditable = ({\n  value,\n  defaultValue,\n  onChange,\n  disabled = false,\n}: UseContentEditableOptions) => {\n  const initialValue = value ?? defaultValue ?? '';\n  const [lines, setLines] = useState<string[]>(() => splitLines(initialValue));\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const pendingCaretRef = useRef<CaretPosition | null>(null);\n  const isControlled = value !== undefined;\n\n  // Keep a ref to the latest lines to avoid stale closures in rapid typing\n  const linesRef = useRef(lines);\n  linesRef.current = lines;\n\n  useEffect(() => {\n    if (isControlled && value !== undefined) {\n      setLines(splitLines(value));\n    }\n  }, [value, isControlled]);\n\n  const getText = () => linesRef.current.join('\\n');\n\n  const getCaretPosition = (): CaretPosition | null => {\n    const sel = window.getSelection();\n    if (!sel?.rangeCount || !containerRef.current) return null;\n\n    const range = sel.getRangeAt(0);\n    const lineEls = containerRef.current.querySelectorAll('[data-line]');\n\n    for (let i = 0; i < lineEls.length; i++) {\n      if (lineEls[i].contains(range.startContainer)) {\n        return { line: i, offset: range.startOffset };\n      }\n    }\n    return null;\n  };\n\n  const getSelectionOffsets = (): {\n    start: number;\n    end: number;\n    hasSelection: boolean;\n  } | null => {\n    const sel = window.getSelection();\n    if (!sel?.rangeCount || !containerRef.current) return null;\n\n    const range = sel.getRangeAt(0);\n    const lineEls = containerRef.current.querySelectorAll('[data-line]');\n    const currentLines = linesRef.current;\n\n    const findOffset = (node: Node, nodeOffset: number): number => {\n      for (let i = 0; i < lineEls.length; i++) {\n        if (lineEls[i].contains(node)) {\n          let flat = 0;\n          for (let j = 0; j < i; j++) {\n            flat += currentLines[j].length + 1;\n          }\n          return flat + Math.min(nodeOffset, currentLines[i]?.length ?? 0);\n        }\n      }\n      // Selection is on the root container (e.g. select-all)\n      if (node === containerRef.current) {\n        if (nodeOffset === 0) return 0;\n        return currentLines.join('\\n').length;\n      }\n      return 0;\n    };\n\n    const start = findOffset(range.startContainer, range.startOffset);\n    const end = findOffset(range.endContainer, range.endOffset);\n\n    return {\n      start: Math.min(start, end),\n      end: Math.max(start, end),\n      hasSelection: !range.collapsed,\n    };\n  };\n\n  const setCaretPosition = (pos: CaretPosition) => {\n    if (!containerRef.current) return;\n\n    const lineEls = containerRef.current.querySelectorAll('[data-line]');\n    const lineEl = lineEls[pos.line];\n    if (!lineEl) return;\n\n    const editable = lineEl.querySelector('[data-editable]');\n    const node =\n      editable?.firstChild ?? editable ?? lineEl.firstChild ?? lineEl;\n\n    const sel = window.getSelection();\n    if (!sel) return;\n\n    const range = document.createRange();\n    const maxOff = Math.min(pos.offset, node.textContent?.length ?? 0);\n\n    try {\n      range.setStart(node, maxOff);\n      range.collapse(true);\n      sel.removeAllRanges();\n      sel.addRange(range);\n    } catch {\n      range.selectNodeContents(node);\n      range.collapse(false);\n      sel.removeAllRanges();\n      sel.addRange(range);\n    }\n  };\n\n  useLayoutEffect(() => {\n    if (pendingCaretRef.current && containerRef.current) {\n      setCaretPosition(pendingCaretRef.current);\n      pendingCaretRef.current = null;\n    }\n  });\n\n  const flatOffsetFromCaret = (pos: CaretPosition): number => {\n    const currentLines = linesRef.current;\n    let offset = 0;\n    for (let i = 0; i < pos.line; i++) {\n      offset += currentLines[i].length + 1;\n    }\n    return offset + pos.offset;\n  };\n\n  const caretFromFlatOffset = (\n    flat: number,\n    targetLines: string[]\n  ): CaretPosition => {\n    let rem = flat;\n    for (let i = 0; i < targetLines.length; i++) {\n      if (rem <= targetLines[i].length) {\n        return { line: i, offset: rem };\n      }\n      rem -= targetLines[i].length + 1;\n    }\n    return {\n      line: targetLines.length - 1,\n      offset: targetLines[targetLines.length - 1]?.length ?? 0,\n    };\n  };\n\n  const getCursorOffset = (): number => {\n    const pos = getCaretPosition();\n    if (!pos) return 0;\n    return flatOffsetFromCaret(pos);\n  };\n\n  /**\n   * Applies a text mutation: computes new lines, sets pending caret, updates state.\n   */\n  const applyTextChange = (newText: string, caretOffset: number) => {\n    const newLines = splitLines(newText);\n    pendingCaretRef.current = caretFromFlatOffset(caretOffset, newLines);\n    setLines(newLines);\n    onChange?.(newText);\n  };\n\n  const handleInput = () => {\n    if (pendingCaretRef.current !== null) return;\n    if (disabled || !containerRef.current) return;\n\n    const caretPos = getCaretPosition();\n    const newText = getTextFromContainer(containerRef.current);\n    const newLines = splitLines(newText);\n\n    pendingCaretRef.current = caretPos;\n    setLines(newLines);\n    onChange?.(newText);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    // Don't intercept during IME composition (CJK input)\n    if (e.nativeEvent.isComposing) return;\n\n    // Block undo/redo - browser would mutate DOM out of sync with React\n    if ((e.metaKey || e.ctrlKey) && e.key === 'z') {\n      e.preventDefault();\n      return;\n    }\n\n    const selInfo = getSelectionOffsets();\n    if (!selInfo) return;\n\n    const currentText = linesRef.current.join('\\n');\n\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      const newText =\n        currentText.slice(0, selInfo.start) +\n        '\\n' +\n        currentText.slice(selInfo.end);\n      applyTextChange(newText, selInfo.start + 1);\n      return;\n    }\n\n    if (e.key === 'Backspace') {\n      e.preventDefault();\n\n      if (selInfo.hasSelection) {\n        const newText =\n          currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n        applyTextChange(newText, selInfo.start);\n      } else {\n        if (selInfo.start === 0) return;\n\n        let deleteFrom: number;\n        if (e.metaKey) {\n          // Cmd+Backspace: delete to start of line\n          deleteFrom = lineStart(currentText, selInfo.start);\n        } else if (e.altKey) {\n          // Option+Backspace: delete previous word\n          deleteFrom = prevWordBoundary(currentText, selInfo.start);\n        } else {\n          // Regular backspace: delete one grapheme\n          deleteFrom = prevGraphemeBoundary(currentText, selInfo.start);\n        }\n\n        const newText =\n          currentText.slice(0, deleteFrom) + currentText.slice(selInfo.start);\n        applyTextChange(newText, deleteFrom);\n      }\n      return;\n    }\n\n    if (e.key === 'Delete') {\n      e.preventDefault();\n\n      if (selInfo.hasSelection) {\n        const newText =\n          currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n        applyTextChange(newText, selInfo.start);\n      } else {\n        if (selInfo.start >= currentText.length) return;\n\n        let deleteTo: number;\n        if (e.metaKey) {\n          // Cmd+Delete: delete to end of line\n          deleteTo = lineEnd(currentText, selInfo.start);\n        } else if (e.altKey) {\n          // Option+Delete: delete next word\n          deleteTo = nextWordBoundary(currentText, selInfo.start);\n        } else {\n          // Regular delete: delete one grapheme\n          deleteTo = nextGraphemeBoundary(currentText, selInfo.start);\n        }\n\n        const newText =\n          currentText.slice(0, selInfo.start) + currentText.slice(deleteTo);\n        applyTextChange(newText, selInfo.start);\n      }\n      return;\n    }\n  };\n\n  const handleCut = (e: ClipboardEvent<HTMLDivElement>) => {\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    e.preventDefault();\n    const selInfo = getSelectionOffsets();\n    if (!selInfo?.hasSelection) return;\n\n    const currentText = linesRef.current.join('\\n');\n    const selectedText = currentText.slice(selInfo.start, selInfo.end);\n\n    // Write selected text to clipboard\n    e.clipboardData.setData('text/plain', selectedText);\n\n    // Delete the selected text\n    const newText =\n      currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n    applyTextChange(newText, selInfo.start);\n  };\n\n  const handlePaste = (e: ClipboardEvent<HTMLDivElement>) => {\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    e.preventDefault();\n    const pastedText = e.clipboardData.getData('text/plain');\n    if (!pastedText) return;\n\n    const selInfo = getSelectionOffsets();\n    if (!selInfo) return;\n\n    const currentText = linesRef.current.join('\\n');\n    const newText =\n      currentText.slice(0, selInfo.start) +\n      pastedText +\n      currentText.slice(selInfo.end);\n    applyTextChange(newText, selInfo.start + pastedText.length);\n  };\n\n  const handleBeforeInput = (e: InputEvent<HTMLDivElement>) => {\n    if (disabled) return;\n\n    const inputEvent = e.nativeEvent as InputEvent;\n\n    // Don't intercept during IME composition (CJK input)\n    if (inputEvent.isComposing) return;\n\n    const inputType = inputEvent.inputType;\n\n    // Skip types handled by handleKeyDown (when keydown fires)\n    if (inputType === 'insertParagraph' || inputType === 'insertLineBreak') {\n      return;\n    }\n\n    // Handle deletions as fallback for mobile keyboards that don't fire keydown\n    if (\n      inputType === 'deleteContentBackward' ||\n      inputType === 'deleteContentForward'\n    ) {\n      e.preventDefault();\n      const selInfo = getSelectionOffsets();\n      if (!selInfo) return;\n\n      const currentText = linesRef.current.join('\\n');\n\n      if (selInfo.hasSelection) {\n        const newText =\n          currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n        applyTextChange(newText, selInfo.start);\n      } else if (inputType === 'deleteContentBackward') {\n        if (selInfo.start === 0) return;\n        const deleteFrom = prevGraphemeBoundary(currentText, selInfo.start);\n        const newText =\n          currentText.slice(0, deleteFrom) + currentText.slice(selInfo.start);\n        applyTextChange(newText, deleteFrom);\n      } else {\n        if (selInfo.start >= currentText.length) return;\n        const deleteTo = nextGraphemeBoundary(currentText, selInfo.start);\n        const newText =\n          currentText.slice(0, selInfo.start) + currentText.slice(deleteTo);\n        applyTextChange(newText, selInfo.start);\n      }\n      return;\n    }\n\n    // Handle spell-check replacements\n    if (inputType === 'insertReplacementText') {\n      e.preventDefault();\n      const selInfo = getSelectionOffsets();\n      if (!selInfo) return;\n\n      const currentText = linesRef.current.join('\\n');\n      const replacement =\n        inputEvent.data ?? inputEvent.dataTransfer?.getData('text/plain') ?? '';\n      const newText =\n        currentText.slice(0, selInfo.start) +\n        replacement +\n        currentText.slice(selInfo.end);\n      applyTextChange(newText, selInfo.start + replacement.length);\n      return;\n    }\n\n    if (inputType === 'insertText' && inputEvent.data) {\n      e.preventDefault();\n\n      const selInfo = getSelectionOffsets();\n      if (!selInfo) return;\n\n      const currentText = linesRef.current.join('\\n');\n      const inserted = inputEvent.data;\n      const newText =\n        currentText.slice(0, selInfo.start) +\n        inserted +\n        currentText.slice(selInfo.end);\n      applyTextChange(newText, selInfo.start + inserted.length);\n    }\n  };\n\n  const handleDrop = (e: DragEvent<HTMLDivElement>) => {\n    // Block drag-and-drop to prevent uncontrolled DOM mutations\n    e.preventDefault();\n  };\n\n  const handleDragOver = (e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n  };\n\n  return {\n    lines,\n    containerRef,\n    getText,\n    handleInput,\n    handleBeforeInput,\n    handleKeyDown,\n    handleCut,\n    handlePaste,\n    handleDrop,\n    handleDragOver,\n    getCaretPosition,\n    setCaretPosition,\n    getCursorOffset,\n    caretFromFlatOffset,\n  };\n};\n\ntype LineProps = {\n  index: number;\n  text: string;\n  isLast: boolean;\n  ghostText?: string;\n};\n\nconst Line: FC<LineProps> = ({ index, text, isLast, ghostText }) => (\n  <span data-line={index} className=\"block min-h-[1.5rem]\">\n    <span data-editable>{text || '\\u200B'}</span>\n    {ghostText && (\n      <span\n        data-ghost\n        className=\"pointer-events-none select-none text-neutral\"\n        aria-hidden=\"true\"\n      >\n        {ghostText}\n      </span>\n    )}\n    {!isLast && <br />}\n  </span>\n);\n\nexport type ContentEditableTextAreaHandle = {\n  getContainer: () => HTMLDivElement | null;\n  getText: () => string;\n  focus: () => void;\n  getCursorOffset: () => number;\n  setCursorAtOffset: (offset: number) => void;\n};\n\nexport type ContentEditableTextAreaProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> & {\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  minRows?: number;\n  maxRows?: number;\n  autoSize?: boolean;\n  validationStyleEnabled?: boolean;\n  variant?: InputVariant | `${InputVariant}`;\n  ghostText?: string;\n  ghostLine?: number;\n  ghostOffset?: number;\n  ref?: Ref<ContentEditableTextAreaHandle>;\n  dir?: 'ltr' | 'rtl' | 'auto';\n} & Omit<\n    VariantProps<typeof inputVariants>,\n    'validationStyleEnabled' | 'variant'\n  >;\n\nconst LINE_HEIGHT = 24;\nconst LINE_PADDING = 12;\n\nexport const ContentEditableTextArea: FC<ContentEditableTextAreaProps> = ({\n  value,\n  defaultValue,\n  onChange,\n  placeholder,\n  disabled = false,\n  minRows = 1,\n  maxRows = 999,\n  autoSize = true,\n  validationStyleEnabled = false,\n  variant,\n  ghostText,\n  ghostLine,\n  ghostOffset,\n  onClick,\n  className,\n  dir = 'auto',\n  ref,\n  ...rest\n}) => {\n  const {\n    lines,\n    containerRef,\n    getText,\n    handleInput,\n    handleBeforeInput,\n    handleKeyDown,\n    handleCut,\n    handlePaste,\n    handleDrop,\n    handleDragOver,\n    getCursorOffset,\n    setCaretPosition,\n    caretFromFlatOffset,\n  } = useContentEditable({ value, defaultValue, onChange, disabled });\n\n  const elRef = useRef<HTMLDivElement | null>(null);\n\n  const setRef = (el: HTMLDivElement | null) => {\n    elRef.current = el;\n    (containerRef as RefObject<HTMLDivElement | null>).current = el;\n  };\n\n  useImperativeHandle(ref, () => ({\n    getContainer: () => elRef.current,\n    getText,\n    focus: () => elRef.current?.focus(),\n    getCursorOffset,\n    setCursorAtOffset: (offset: number) => {\n      setCaretPosition(caretFromFlatOffset(offset, lines));\n    },\n  }));\n\n  useLayoutEffect(() => {\n    if (!autoSize || !elRef.current) return;\n\n    const el = elRef.current;\n    const max = LINE_HEIGHT * maxRows + LINE_PADDING;\n    const min = LINE_HEIGHT * minRows + LINE_PADDING;\n\n    el.style.height = 'auto';\n    const sh = el.scrollHeight;\n    el.style.height = `${Math.max(Math.min(sh, max), min)}px`;\n    el.style.overflowY = sh > max ? 'auto' : 'hidden';\n  }, [lines, autoSize, maxRows, minRows]);\n\n  const isEmpty = lines.length === 1 && lines[0] === '';\n  const hasGhost =\n    ghostText && ghostLine !== undefined && ghostOffset !== undefined;\n\n  return (\n    <div className=\"relative w-full\">\n      {isEmpty && placeholder && (\n        <div\n          className=\"pointer-events-none absolute inset-0 select-none px-2 py-3 text-base text-neutral-400 leading-[1.5rem] md:py-2 md:text-sm\"\n          aria-hidden=\"true\"\n        >\n          {placeholder}\n        </div>\n      )}\n\n      <div\n        {...rest}\n        ref={setRef}\n        role=\"textbox\"\n        aria-multiline=\"true\"\n        aria-placeholder={placeholder}\n        aria-disabled={disabled}\n        aria-autocomplete={hasGhost ? 'inline' : undefined}\n        tabIndex={disabled ? -1 : 0}\n        contentEditable={!disabled}\n        suppressContentEditableWarning\n        dir={dir}\n        onInput={handleInput}\n        onBeforeInput={handleBeforeInput}\n        onKeyDown={handleKeyDown}\n        onCut={handleCut}\n        onPaste={handlePaste}\n        onDrop={handleDrop}\n        onDragOver={handleDragOver}\n        onClick={onClick}\n        className={cn(\n          'resize-none whitespace-pre-wrap break-words outline-none',\n          inputVariants({\n            variant,\n            validationStyleEnabled: validationStyleEnabled\n              ? 'enabled'\n              : 'disabled',\n          }),\n          autoSize && 'overflow-y-auto',\n          className\n        )}\n      >\n        {lines.map((text, i) => (\n          <Line\n            key={i}\n            index={i}\n            text={text}\n            isLast={i === lines.length - 1}\n            ghostText={hasGhost && ghostLine === i ? ghostText : undefined}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/TextArea/TextArea.mjs

@@ -38,10 +38,10 @@ import { jsx } from "react/jsx-runtime";
 * <TextArea
 *   value={content}
 *   onChange={(e) => setContent(e.target.value)}
-*   variant={hasError ? InputVariant.ERROR : InputVariant.SUCCESS}
+*   variant={hasError ? 'error' : 'success'}
 *   validationStyleEnabled={true}
 *   placeholder="Minimum 10 characters required"
-*   className="min-h-[100px]"
+*   className="min-top-25"
 * />
 * ```
 */

package/dist/esm/components/TextArea/TextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { VariantProps } from 'class-variance-authority';\nimport type { DetailedHTMLProps, FC, TextareaHTMLAttributes } from 'react';\nimport { type InputVariant, inputVariants } from '../Input';\n\n/**\n * Props for the TextArea component.\n *\n * Extends standard HTML textarea attributes with additional design system variants\n * and validation styling options.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TextArea placeholder=\"Enter your message...\" />\n *\n * // With error validation styling\n * <TextArea\n *   value={message}\n *   onChange={handleChange}\n *   variant={InputVariant.ERROR}\n *   validationStyleEnabled={true}\n *   placeholder=\"Message is required\"\n * />\n *\n * // Large multiline input\n * <TextArea\n *   rows={6}\n *   cols={50}\n *   variant={InputVariant.DEFAULT}\n *   className=\"min-h-[120px]\"\n *   placeholder=\"Write a detailed description...\"\n * />\n * ```\n */\nexport type TextAreaProps = DetailedHTMLProps<\n  DetailedHTMLProps<\n    TextareaHTMLAttributes<HTMLTextAreaElement>,\n    HTMLTextAreaElement\n  >,\n  HTMLTextAreaElement\n> & {\n  /** Enable validation styling based on the variant prop */\n  validationStyleEnabled?: boolean;\n} & Omit<\n    VariantProps<typeof inputVariants>,\n    'validationStyleEnabled' | 'variant'\n  > & {\n    /** Visual variant of the textarea (default, success, error, warning, etc.) */\n    variant?: InputVariant | `${InputVariant}`;\n  };\n\n/**\n * TextArea Component\n *\n * A flexible textarea component that extends the standard HTML textarea with\n * design system styling variants, validation states, and consistent visual appearance.\n *\n * ## Features\n * - **Variant Support**: Multiple visual states (default, error, success, warning)\n * - **Validation Styling**: Optional validation feedback styling\n * - **Resize Control**: Disabled by default for consistent layout\n * - **Design System Integration**: Uses shared input variants for consistency\n * - **Accessibility**: Maintains all standard textarea accessibility features\n *\n * ## Use Cases\n * - Multi-line text input forms\n * - Comment and message composition\n * - Description and content fields\n * - Feedback and review forms\n * - Code snippet input (when combined with monospace styling)\n *\n * @example\n * ```tsx\n * // Basic textarea\n * <TextArea\n *   placeholder=\"Enter your thoughts...\"\n *   rows={4}\n * />\n *\n * // Controlled with validation\n * const [content, setContent] = useState('');\n * const hasError = content.length < 10;\n *\n * <TextArea\n *   value={content}\n *   onChange={(e) => setContent(e.target.value)}\n *   variant={hasError ? InputVariant.ERROR : InputVariant.SUCCESS}\n *   validationStyleEnabled={true}\n *   placeholder=\"Minimum 10 characters required\"\n *   className=\"min-h-[100px]\"\n * />\n * ```\n */\nexport const TextArea: FC<TextAreaProps> = ({\n  className,\n  variant,\n  validationStyleEnabled = false,\n  ...props\n}) => (\n  <textarea\n    className={cn(\n      'resize-none',\n      inputVariants({\n        variant,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n        className,\n      })\n    )}\n    {...props}\n  />\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,MAAa,YAA+B,EAC1C,WACA,SACA,yBAAyB,OACzB,GAAG,YAEH,oBAAC,YAAD;CACE,WAAW,GACT,eACA,cAAc;EACZ;EACA,wBAAwB,yBAAyB,YAAY;EAC7D;CACF,CAAC,CACH;CACA,GAAI;AACL"}
+{"version":3,"file":"TextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { VariantProps } from 'class-variance-authority';\nimport type { DetailedHTMLProps, FC, TextareaHTMLAttributes } from 'react';\nimport { inputVariants } from '../Input';\n\n/**\n * Props for the TextArea component.\n *\n * Extends standard HTML textarea attributes with additional design system variants\n * and validation styling options.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TextArea placeholder=\"Enter your message...\" />\n *\n * // With error validation styling\n * <TextArea\n *   value={message}\n *   onChange={handleChange}\n *   variant=\"error\"\n *   validationStyleEnabled={true}\n *   placeholder=\"Message is required\"\n * />\n *\n * // Large multiline input\n * <TextArea\n *   rows={6}\n *   cols={50}\n *   variant=\"default\"\n *   className=\"min-h-[120px]\"\n *   placeholder=\"Write a detailed description...\"\n * />\n * ```\n */\nexport type TextAreaProps = DetailedHTMLProps<\n  DetailedHTMLProps<\n    TextareaHTMLAttributes<HTMLTextAreaElement>,\n    HTMLTextAreaElement\n  >,\n  HTMLTextAreaElement\n> & {\n  /** Enable validation styling based on the variant prop */\n  validationStyleEnabled?: boolean;\n} & Omit<\n    VariantProps<typeof inputVariants>,\n    'validationStyleEnabled' | 'variant'\n  > & {\n    /** Visual variant of the textarea (default, success, error, warning, etc.) */\n    variant?: InputVariant;\n  };\n\n/**\n * TextArea Component\n *\n * A flexible textarea component that extends the standard HTML textarea with\n * design system styling variants, validation states, and consistent visual appearance.\n *\n * ## Features\n * - **Variant Support**: Multiple visual states (default, error, success, warning)\n * - **Validation Styling**: Optional validation feedback styling\n * - **Resize Control**: Disabled by default for consistent layout\n * - **Design System Integration**: Uses shared input variants for consistency\n * - **Accessibility**: Maintains all standard textarea accessibility features\n *\n * ## Use Cases\n * - Multi-line text input forms\n * - Comment and message composition\n * - Description and content fields\n * - Feedback and review forms\n * - Code snippet input (when combined with monospace styling)\n *\n * @example\n * ```tsx\n * // Basic textarea\n * <TextArea\n *   placeholder=\"Enter your thoughts...\"\n *   rows={4}\n * />\n *\n * // Controlled with validation\n * const [content, setContent] = useState('');\n * const hasError = content.length < 10;\n *\n * <TextArea\n *   value={content}\n *   onChange={(e) => setContent(e.target.value)}\n *   variant={hasError ? 'error' : 'success'}\n *   validationStyleEnabled={true}\n *   placeholder=\"Minimum 10 characters required\"\n *   className=\"min-top-25\"\n * />\n * ```\n */\nexport const TextArea: FC<TextAreaProps> = ({\n  className,\n  variant,\n  validationStyleEnabled = false,\n  ...props\n}) => (\n  <textarea\n    className={cn(\n      'resize-none',\n      inputVariants({\n        variant,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n        className,\n      })\n    )}\n    {...props}\n  />\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,MAAa,YAA+B,EAC1C,WACA,SACA,yBAAyB,OACzB,GAAG,YAEH,oBAAC,YAAD;CACE,WAAW,GACT,eACA,cAAc;EACZ;EACA,wBAAwB,yBAAyB,YAAY;EAC7D;CACF,CAAC,CACH;CACA,GAAI;AACL"}

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

@@ -1,6 +1,6 @@
-import { ContentEditableTextArea, useContentEditable } from "./ContentEditableTextArea.mjs";
-import { AutoCompleteTextarea } from "./AutocompleteTextArea.mjs";
 import { TextArea } from "./TextArea.mjs";
 import { AutoSizedTextArea } from "./AutoSizeTextArea.mjs";
+import { ContentEditableTextArea, useContentEditable } from "./ContentEditableTextArea.mjs";
+import { AutoCompleteTextarea } from "./AutocompleteTextArea.mjs";
 
 export { AutoCompleteTextarea, AutoSizedTextArea, ContentEditableTextArea, TextArea, useContentEditable };

package/dist/esm/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs

@@ -1,9 +1,8 @@
 'use client';
 
+import { Button } from "../Button/Button.mjs";
 import { Container } from "../Container/index.mjs";
-import { Button, ButtonVariant } from "../Button/Button.mjs";
 import { DropDown } from "../DropDown/index.mjs";
-import { Modes } from "./types.mjs";
 import { useState } from "react";
 import { CircleDashed, Moon, Sun } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DesktopThemeSwitcher.mjs","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { Button, type ButtonProps, ButtonVariant } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\nimport { Modes } from './types';\n\nconst ButtonItem: FC<ButtonProps> = ({ Icon, children, ...props }) => (\n  <div className=\"relative w-full p-0.5\">\n    <Button\n      className=\"w-full cursor-pointer rounded-lg p-1 text-left hover:bg-text/10 focus:bg-text-opposite/20 focus:outline-hidden disabled:text-white/25\"\n      Icon={Icon}\n      data-mode=\"system\"\n      role=\"option\"\n      variant={ButtonVariant.NONE}\n      {...props}\n    >\n      {children}\n    </Button>\n  </div>\n);\n\ntype DesktopThemeSwitcherProps = {\n  theme: Modes;\n  setTheme: (theme: Modes) => void;\n  systemTheme: Modes;\n};\n\nexport const DesktopThemeSwitcher: FC<DesktopThemeSwitcherProps> = ({\n  theme,\n  setTheme,\n  systemTheme,\n}) => {\n  const isThemeSystemTheme = systemTheme === theme;\n  const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n  const [mode, setMode] = useState<Modes>(defaultMode);\n\n  const switchMode = (mode: Modes) => {\n    if (mode === Modes.system) {\n      setTheme(systemTheme ?? Modes.light);\n    } else {\n      setTheme(mode);\n    }\n    setMode(mode);\n  };\n\n  const panelIdentifier = 'theme-switcher';\n\n  return (\n    <DropDown identifier={panelIdentifier}>\n      <DropDown.Trigger\n        className=\"p-2\"\n        identifier={panelIdentifier}\n        aria-label=\"Theme selector\"\n      >\n        {mode === Modes.system && <CircleDashed data-mode=\"system\" />}\n        {mode === Modes.light && <Sun data-mode=\"light\" />}\n        {mode === Modes.dark && <Moon data-mode=\"dark\" />}\n      </DropDown.Trigger>\n\n      <DropDown.Panel identifier={panelIdentifier} isFocusable isOverable>\n        <Container className=\"min-w-[100px] items-start p-1\" separator=\"y\">\n          <ButtonItem\n            Icon={CircleDashed}\n            onClick={() => switchMode(Modes.system)}\n            isActive={mode === Modes.system}\n            label=\"Restore to system mode\"\n          >\n            System\n          </ButtonItem>\n          <ButtonItem\n            Icon={Sun}\n            onClick={() => switchMode(Modes.light)}\n            isActive={mode === Modes.light}\n            label=\"Switch to light mode\"\n          >\n            Light\n          </ButtonItem>\n          <ButtonItem\n            Icon={Moon}\n            onClick={() => switchMode(Modes.dark)}\n            isActive={mode === Modes.dark}\n            label=\"Switch to dark mode\"\n          >\n            Dark\n          </ButtonItem>\n        </Container>\n      </DropDown.Panel>\n    </DropDown>\n  );\n};\n"],"mappings":";;;;;;;;;;;AASA,MAAM,cAA+B,EAAE,MAAM,UAAU,GAAG,YACxD,oBAAC,OAAD;CAAK,WAAU;WACb,oBAAC,QAAD;EACE,WAAU;EACJ;EACN,aAAU;EACV,MAAK;EACL;EACA,GAAI;EAEH;CACK;AACL;AASP,MAAa,wBAAuD,EAClE,OACA,UACA,kBACI;CAIJ,MAAM,CAAC,MAAM,WAAW,SAHG,gBAAgB,mBACa,KAEL;CAEnD,MAAM,cAAc,SAAgB;EAClC,IAAI,mBACF,SAAS,sBAA0B;OAEnC,SAAS,IAAI;EAEf,QAAQ,IAAI;CACd;CAEA,MAAM,kBAAkB;CAExB,OACE,qBAAC,UAAD;EAAU,YAAY;YAAtB,CACE,qBAAC,SAAS,SAAV;GACE,WAAU;GACV,YAAY;GACZ,cAAW;aAHb;IAKG,qBAAyB,oBAAC,cAAD,EAAc,aAAU,SAAU;IAC3D,oBAAwB,oBAAC,KAAD,EAAK,aAAU,QAAS;IAChD,mBAAuB,oBAAC,MAAD,EAAM,aAAU,OAAQ;GAChC;MAElB,oBAAC,SAAS,OAAV;GAAgB,YAAY;GAAiB;GAAY;aACvD,qBAAC,WAAD;IAAW,WAAU;IAAgC,WAAU;cAA/D;KACE,oBAAC,YAAD;MACE,MAAM;MACN,eAAe,mBAAuB;MACtC,UAAU;MACV,OAAM;gBACP;KAEW;KACZ,oBAAC,YAAD;MACE,MAAM;MACN,eAAe,kBAAsB;MACrC,UAAU;MACV,OAAM;gBACP;KAEW;KACZ,oBAAC,YAAD;MACE,MAAM;MACN,eAAe,iBAAqB;MACpC,UAAU;MACV,OAAM;gBACP;KAEW;IACH;;EACG,EACR;;AAEd"}
+{"version":3,"file":"DesktopThemeSwitcher.mjs","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { Button, type ButtonProps } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\nimport type { Modes } from './types';\n\nconst ButtonItem: FC<ButtonProps> = ({ Icon, children, ...props }) => (\n  <div className=\"relative w-full p-0.5\">\n    <Button\n      className=\"w-full cursor-pointer rounded-lg p-1 text-left hover:bg-text/10 focus:bg-text-opposite/20 focus:outline-hidden disabled:text-white/25\"\n      Icon={Icon}\n      data-mode=\"system\"\n      role=\"option\"\n      variant=\"none\"\n      {...props}\n    >\n      {children}\n    </Button>\n  </div>\n);\n\ntype DesktopThemeSwitcherProps = {\n  theme: Modes;\n  setTheme: (theme: Modes) => void;\n  systemTheme: Modes;\n};\n\nexport const DesktopThemeSwitcher: FC<DesktopThemeSwitcherProps> = ({\n  theme,\n  setTheme,\n  systemTheme,\n}) => {\n  const isThemeSystemTheme = systemTheme === theme;\n  const defaultMode = isThemeSystemTheme ? 'system' : theme;\n\n  const [mode, setMode] = useState<Modes>(defaultMode);\n\n  const switchMode = (mode: Modes) => {\n    if (mode === 'system') {\n      setTheme(systemTheme ?? 'light');\n    } else {\n      setTheme(mode);\n    }\n    setMode(mode);\n  };\n\n  const panelIdentifier = 'theme-switcher';\n\n  return (\n    <DropDown identifier={panelIdentifier}>\n      <DropDown.Trigger\n        className=\"p-2\"\n        identifier={panelIdentifier}\n        aria-label=\"Theme selector\"\n      >\n        {mode === 'system' && <CircleDashed data-mode=\"system\" />}\n        {mode === 'light' && <Sun data-mode=\"light\" />}\n        {mode === 'dark' && <Moon data-mode=\"dark\" />}\n      </DropDown.Trigger>\n\n      <DropDown.Panel identifier={panelIdentifier} isFocusable isOverable>\n        <Container className=\"min-w-[100px] items-start p-1\" separator=\"y\">\n          <ButtonItem\n            Icon={CircleDashed}\n            onClick={() => switchMode('system')}\n            isActive={mode === 'system'}\n            label=\"Restore to system mode\"\n          >\n            System\n          </ButtonItem>\n          <ButtonItem\n            Icon={Sun}\n            onClick={() => switchMode('light')}\n            isActive={mode === 'light'}\n            label=\"Switch to light mode\"\n          >\n            Light\n          </ButtonItem>\n          <ButtonItem\n            Icon={Moon}\n            onClick={() => switchMode('dark')}\n            isActive={mode === 'dark'}\n            label=\"Switch to dark mode\"\n          >\n            Dark\n          </ButtonItem>\n        </Container>\n      </DropDown.Panel>\n    </DropDown>\n  );\n};\n"],"mappings":";;;;;;;;;;AASA,MAAM,cAA+B,EAAE,MAAM,UAAU,GAAG,YACxD,oBAAC,OAAD;CAAK,WAAU;WACb,oBAAC,QAAD;EACE,WAAU;EACJ;EACN,aAAU;EACV,MAAK;EACL,SAAQ;EACR,GAAI;EAEH;CACK;AACL;AASP,MAAa,wBAAuD,EAClE,OACA,UACA,kBACI;CAIJ,MAAM,CAAC,MAAM,WAAW,SAHG,gBAAgB,QACF,WAAW,KAED;CAEnD,MAAM,cAAc,SAAgB;EAClC,IAAI,SAAS,UACX,SAAS,eAAe,OAAO;OAE/B,SAAS,IAAI;EAEf,QAAQ,IAAI;CACd;CAEA,MAAM,kBAAkB;CAExB,OACE,qBAAC,UAAD;EAAU,YAAY;YAAtB,CACE,qBAAC,SAAS,SAAV;GACE,WAAU;GACV,YAAY;GACZ,cAAW;aAHb;IAKG,SAAS,YAAY,oBAAC,cAAD,EAAc,aAAU,SAAU;IACvD,SAAS,WAAW,oBAAC,KAAD,EAAK,aAAU,QAAS;IAC5C,SAAS,UAAU,oBAAC,MAAD,EAAM,aAAU,OAAQ;GAC5B;MAElB,oBAAC,SAAS,OAAV;GAAgB,YAAY;GAAiB;GAAY;aACvD,qBAAC,WAAD;IAAW,WAAU;IAAgC,WAAU;cAA/D;KACE,oBAAC,YAAD;MACE,MAAM;MACN,eAAe,WAAW,QAAQ;MAClC,UAAU,SAAS;MACnB,OAAM;gBACP;KAEW;KACZ,oBAAC,YAAD;MACE,MAAM;MACN,eAAe,WAAW,OAAO;MACjC,UAAU,SAAS;MACnB,OAAM;gBACP;KAEW;KACZ,oBAAC,YAAD;MACE,MAAM;MACN,eAAe,WAAW,MAAM;MAChC,UAAU,SAAS;MACnB,OAAM;gBACP;KAEW;IACH;;EACG,EACR;;AAEd"}

package/dist/esm/components/ThemeSwitcherDropDown/MobileThemeSwitcher.mjs

@@ -1,7 +1,6 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { Modes } from "./types.mjs";
 import { useState } from "react";
 import { CircleDashed, Moon, Sun } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/ThemeSwitcherDropDown/MobileThemeSwitcher.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MobileThemeSwitcher.mjs","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/MobileThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { Modes } from './types';\n\ntype MobileThemeSwitcherProps = {\n  theme: Modes;\n  systemTheme: Modes;\n  setTheme: (theme: Modes) => void;\n};\n\nconst getIconStyle = ({\n  isCurrentMode,\n  isNextMode,\n}: {\n  isCurrentMode: boolean;\n  isNextMode: boolean;\n}) =>\n  cn(\n    `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`,\n    `opacity-0 transition-opacity duration-300 ease-in-out`,\n    isCurrentMode && `opacity-100 group-hover:opacity-0`,\n    isNextMode && `group-hover:opacity-100`\n  );\n\nexport const MobileThemeSwitcher: FC<MobileThemeSwitcherProps> = ({\n  theme,\n  systemTheme,\n  setTheme,\n}) => {\n  const isThemeSystemTheme = systemTheme === theme;\n  const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n  const [mode, setMode] = useState<Modes>(defaultMode);\n\n  const nextMode =\n    // Start loop\n    // If mode is system, toggle the theme inverse of the system theme\n    mode === Modes.system\n      ? theme === Modes.dark\n        ? Modes.light\n        : Modes.dark\n      : // Close loop\n        // If current theme same as system theme, reset by toggle the system theme\n        isThemeSystemTheme\n        ? Modes.system\n        : // Go to next step\n          // Otherwise, toggle the remaining theme\n          mode === Modes.light\n          ? Modes.dark\n          : Modes.light;\n\n  const toggleMode = () => {\n    if (nextMode === Modes.system) {\n      setTheme(systemTheme ?? Modes.light);\n    } else {\n      setTheme(nextMode);\n    }\n    setMode(nextMode);\n  };\n\n  return (\n    <button className=\"group relative size-10\" aria-label=\"Theme selector\">\n      <CircleDashed\n        className={getIconStyle({\n          isCurrentMode: mode === Modes.system,\n          isNextMode: nextMode === Modes.system,\n        })}\n        onClick={toggleMode}\n        data-mode=\"system\"\n      />\n\n      <Moon\n        className={getIconStyle({\n          isCurrentMode: mode === Modes.light,\n          isNextMode: nextMode === Modes.light,\n        })}\n        onClick={toggleMode}\n        data-mode=\"light\"\n      />\n\n      <Sun\n        className={getIconStyle({\n          isCurrentMode: mode === Modes.dark,\n          isNextMode: nextMode === Modes.dark,\n        })}\n        onClick={toggleMode}\n        data-mode=\"dark\"\n      />\n    </button>\n  );\n};\n"],"mappings":";;;;;;;;;AAaA,MAAM,gBAAgB,EACpB,eACA,iBAKA,GACE,+DACA,yDACA,iBAAiB,qCACjB,cAAc,yBAChB;AAEF,MAAa,uBAAqD,EAChE,OACA,aACA,eACI;CACJ,MAAM,qBAAqB,gBAAgB;CAG3C,MAAM,CAAC,MAAM,WAAW,SAFJ,gCAAoC,KAEL;CAEnD,MAAM,WAGJ,oBACI,sCAKA,gCAIE;CAIR,MAAM,mBAAmB;EACvB,IAAI,uBACF,SAAS,sBAA0B;OAEnC,SAAS,QAAQ;EAEnB,QAAQ,QAAQ;CAClB;CAEA,OACE,qBAAC,UAAD;EAAQ,WAAU;EAAyB,cAAW;YAAtD;GACE,oBAAC,cAAD;IACE,WAAW,aAAa;KACtB,eAAe;KACf,YAAY;IACd,CAAC;IACD,SAAS;IACT,aAAU;GACX;GAED,oBAAC,MAAD;IACE,WAAW,aAAa;KACtB,eAAe;KACf,YAAY;IACd,CAAC;IACD,SAAS;IACT,aAAU;GACX;GAED,oBAAC,KAAD;IACE,WAAW,aAAa;KACtB,eAAe;KACf,YAAY;IACd,CAAC;IACD,SAAS;IACT,aAAU;GACX;EACK;;AAEZ"}
+{"version":3,"file":"MobileThemeSwitcher.mjs","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/MobileThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport type { Modes } from './types';\n\ntype MobileThemeSwitcherProps = {\n  theme: Modes;\n  systemTheme: Modes;\n  setTheme: (theme: Modes) => void;\n};\n\nconst getIconStyle = ({\n  isCurrentMode,\n  isNextMode,\n}: {\n  isCurrentMode: boolean;\n  isNextMode: boolean;\n}) =>\n  cn(\n    `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`,\n    `opacity-0 transition-opacity duration-300 ease-in-out`,\n    isCurrentMode && `opacity-100 group-hover:opacity-0`,\n    isNextMode && `group-hover:opacity-100`\n  );\n\nexport const MobileThemeSwitcher: FC<MobileThemeSwitcherProps> = ({\n  theme,\n  systemTheme,\n  setTheme,\n}) => {\n  const isThemeSystemTheme = systemTheme === theme;\n  const defaultMode = isThemeSystemTheme ? 'system' : theme;\n\n  const [mode, setMode] = useState<Modes>(defaultMode);\n\n  const nextMode =\n    // Start loop\n    // If mode is system, toggle the theme inverse of the system theme\n    mode === 'system'\n      ? theme === 'dark'\n        ? 'light'\n        : 'dark'\n      : // Close loop\n        // If current theme same as system theme, reset by toggle the system theme\n        isThemeSystemTheme\n        ? 'system'\n        : // Go to next step\n          // Otherwise, toggle the remaining theme\n          mode === 'light'\n          ? 'dark'\n          : 'light';\n\n  const toggleMode = () => {\n    if (nextMode === 'system') {\n      setTheme(systemTheme ?? 'light');\n    } else {\n      setTheme(nextMode);\n    }\n    setMode(nextMode);\n  };\n\n  return (\n    <button className=\"group relative size-10\" aria-label=\"Theme selector\">\n      <CircleDashed\n        className={getIconStyle({\n          isCurrentMode: mode === 'system',\n          isNextMode: nextMode === 'system',\n        })}\n        onClick={toggleMode}\n        data-mode=\"system\"\n      />\n\n      <Moon\n        className={getIconStyle({\n          isCurrentMode: mode === 'light',\n          isNextMode: nextMode === 'light',\n        })}\n        onClick={toggleMode}\n        data-mode=\"light\"\n      />\n\n      <Sun\n        className={getIconStyle({\n          isCurrentMode: mode === 'dark',\n          isNextMode: nextMode === 'dark',\n        })}\n        onClick={toggleMode}\n        data-mode=\"dark\"\n      />\n    </button>\n  );\n};\n"],"mappings":";;;;;;;;AAaA,MAAM,gBAAgB,EACpB,eACA,iBAKA,GACE,+DACA,yDACA,iBAAiB,qCACjB,cAAc,yBAChB;AAEF,MAAa,uBAAqD,EAChE,OACA,aACA,eACI;CACJ,MAAM,qBAAqB,gBAAgB;CAG3C,MAAM,CAAC,MAAM,WAAW,SAFJ,qBAAqB,WAAW,KAED;CAEnD,MAAM,WAGJ,SAAS,WACL,UAAU,SACR,UACA,SAGF,qBACE,WAGA,SAAS,UACP,SACA;CAEV,MAAM,mBAAmB;EACvB,IAAI,aAAa,UACf,SAAS,eAAe,OAAO;OAE/B,SAAS,QAAQ;EAEnB,QAAQ,QAAQ;CAClB;CAEA,OACE,qBAAC,UAAD;EAAQ,WAAU;EAAyB,cAAW;YAAtD;GACE,oBAAC,cAAD;IACE,WAAW,aAAa;KACtB,eAAe,SAAS;KACxB,YAAY,aAAa;IAC3B,CAAC;IACD,SAAS;IACT,aAAU;GACX;GAED,oBAAC,MAAD;IACE,WAAW,aAAa;KACtB,eAAe,SAAS;KACxB,YAAY,aAAa;IAC3B,CAAC;IACD,SAAS;IACT,aAAU;GACX;GAED,oBAAC,KAAD;IACE,WAAW,aAAa;KACtB,eAAe,SAAS;KACxB,YAAY,aAAa;IAC3B,CAAC;IACD,SAAS;IACT,aAAU;GACX;EACK;;AAEZ"}

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

@@ -1,5 +1,4 @@
-import { Modes } from "./types.mjs";
 import { DesktopThemeSwitcher } from "./DesktopThemeSwitcher.mjs";
 import { MobileThemeSwitcher } from "./MobileThemeSwitcher.mjs";
 
-export { DesktopThemeSwitcher, MobileThemeSwitcher, Modes };
+export { DesktopThemeSwitcher, MobileThemeSwitcher };

package/dist/esm/components/ThemeSwitcherDropDown/types.mjs

@@ -1,11 +0,0 @@
-//#region src/components/ThemeSwitcherDropDown/types.ts
-let Modes = /* @__PURE__ */ function(Modes) {
-	Modes["dark"] = "dark";
-	Modes["light"] = "light";
-	Modes["system"] = "system";
-	return Modes;
-}({});
-
-//#endregion
-export { Modes };
-//# sourceMappingURL=types.mjs.map

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

@@ -214,7 +214,7 @@ const WithResizer = ({ initialWidth, maxWidth, minWidth = 0, handlePosition = "r
 		width
 	]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative h-full w-full max-w-[80%] shrink-0", style && (handlePosition === "right" ? "border-r-[2px]" : "border-l-[2px]"), style && "border-neutral-200 transition active:border-neutral-400 dark:border-neutral-950 dark:active:border-neutral-600", minWidth && `min-w-[${minWidth}px]`, maxWidth && `max-w-[${maxWidth}px]`, !style && className),
+		className: cn("relative size-full max-w-[80%] shrink-0", style && (handlePosition === "right" ? "border-r-[2px]" : "border-l-[2px]"), style && "border-neutral-200 transition active:border-neutral-400 dark:border-neutral-950 dark:active:border-neutral-600", minWidth && `min-w-[${minWidth}px]`, maxWidth && `max-w-[${maxWidth}px]`, !style && className),
 		style: {
 			width: `${width}px`,
 			transition: isResizing ? "none" : "width 200ms ease-in-out"

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/WithResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport React, {\n  type FC,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nconst HANDLE_DOUBLE_CLICK_ZONE_PX = 16;\n\n/**\n * Props for the WithResizer component.\n *\n * Defines the configuration for a resizable container with drag-based width adjustment.\n *\n * @example\n * ```tsx\n * // Basic resizable container\n * <WithResizer initialWidth={300} minWidth={200} maxWidth={600}>\n *   <div className=\"p-4\">Resizable content</div>\n * </WithResizer>\n *\n * // Sidebar with resizing\n * <WithResizer\n *   initialWidth={250}\n *   minWidth={180}\n *   maxWidth={400}\n * >\n *   <nav className=\"h-full p-4\">\n *     <SidebarContent />\n *   </nav>\n * </WithResizer>\n *\n * // Panel with unlimited growth\n * <WithResizer initialWidth={400} minWidth={300}>\n *   <div className=\"h-full overflow-auto\">\n *     <PanelContent />\n *   </div>\n * </WithResizer>\n * ```\n */\ntype WithResizerProps = {\n  /** Initial width of the resizable container in pixels */\n  initialWidth: number;\n  /** Maximum allowed width in pixels (optional, no limit if not specified) */\n  maxWidth?: number;\n  /** Minimum allowed width in pixels */\n  minWidth?: number;\n  /** Position of the resize handle (default: 'right') */\n  handlePosition?: 'left' | 'right';\n  /** Apply base styles */\n  style?: boolean;\n  /** Additional className */\n  className?: string;\n  /** Controlled open/close — true expands to defaultOpenWidth (or last used), false collapses to 0 */\n  isOpen?: boolean;\n  /** Width to restore when isOpen becomes true and current width is 0 */\n  defaultOpenWidth?: number;\n};\n\n/**\n * WithResizer Component\n *\n * A flexible container component that allows users to dynamically resize its width\n * through mouse or touch drag interactions. Perfect for creating adjustable panels,\n * sidebars, and split-pane layouts.\n *\n * ## Features\n * - **Mouse & Touch Support**: Works with both mouse drag and touch interactions\n * - **Constraint Enforcement**: Respects minimum and maximum width boundaries\n * - **Visual Feedback**: Clear resize handle with hover and active states\n * - **Smooth Interactions**: Passive event listeners for optimal performance\n * - **Accessibility**: ARIA slider role with proper value announcements\n * - **Responsive Design**: Adapts to different screen sizes and containers\n *\n * ## Technical Implementation\n * - **Event Handling**: Uses `useCallback` for optimal performance\n * - **Boundary Calculation**: Real-time width calculation based on mouse/touch position\n * - **State Management**: Tracks resizing state for visual feedback\n * - **Memory Management**: Proper cleanup of global event listeners\n * - **Touch Events**: Full support for mobile touch interactions\n *\n * ## Visual Design\n * - **Resize Handle**: Rounded handle positioned on the right border\n * - **Border Indicator**: Visual border showing resizable edge\n * - **State Feedback**: Different colors for normal, hover, and active states\n * - **Dark Mode**: Full support with appropriate color scheme\n * - **Smooth Transitions**: CSS transitions for visual polish\n *\n * ## Use Cases\n * - **Application Sidebars**: Collapsible navigation and tool panels\n * - **Content Panels**: Adjustable content areas in complex layouts\n * - **Split Panes**: Dividing screen space between multiple content areas\n * - **Inspector Panels**: Debugging tools and property inspectors\n * - **File Explorers**: Tree views with adjustable column widths\n * - **Dashboard Widgets**: Customizable widget sizes for dashboards\n *\n * ## Accessibility Features\n * - **ARIA Slider**: Proper slider role for screen readers\n * - **Value Announcements**: Current, minimum, and maximum values announced\n * - **Keyboard Focus**: Focusable with tab navigation\n * - **Clear Affordances**: Visual indicators for interactive elements\n *\n * @example\n * ```tsx\n * // Application sidebar with resizing\n * const [sidebarWidth, setSidebarWidth] = useState(250);\n *\n * <div className=\"flex h-screen\">\n *   <WithResizer\n *     initialWidth={sidebarWidth}\n *     minWidth={200}\n *     maxWidth={400}\n *   >\n *     <aside className=\"h-full bg-gray-100 p-4\">\n *       <nav>\n *         <NavItems />\n *       </nav>\n *     </aside>\n *   </WithResizer>\n *\n *   <main className=\"flex-1 p-6\">\n *     <MainContent />\n *   </main>\n * </div>\n *\n * // Developer tools panel\n * <WithResizer\n *   initialWidth={350}\n *   minWidth={250}\n *   maxWidth={600}\n * >\n *   <div className=\"h-full flex flex-col\">\n *     <div className=\"flex-1 overflow-auto p-4\">\n *       <InspectorContent />\n *     </div>\n *     <div className=\"border-t p-2\">\n *       <Controls />\n *     </div>\n *   </div>\n * </WithResizer>\n *\n * // Multi-column layout\n * <div className=\"flex h-full\">\n *   <WithResizer initialWidth={300} minWidth={200} maxWidth={500}>\n *     <FileExplorer />\n *   </WithResizer>\n *\n *   <WithResizer initialWidth={400} minWidth={300}>\n *     <CodeEditor />\n *   </WithResizer>\n *\n *   <div className=\"flex-1 min-w-0\">\n *     <OutputPanel />\n *   </div>\n * </div>\n * ```\n *\n * ## Performance Considerations\n * - Uses passive event listeners to prevent scroll blocking\n * - Optimized with `useCallback` to prevent unnecessary re-renders\n * - Efficient boundary calculations using `getBoundingClientRect`\n * - Minimal DOM manipulation for smooth drag interactions\n *\n * ## Browser Support\n * - Modern browsers with support for touch events\n * - Graceful degradation for older browsers\n * - Mobile-first touch interaction handling\n */\nexport const WithResizer: FC<PropsWithChildren<WithResizerProps>> = ({\n  initialWidth,\n  maxWidth,\n  minWidth = 0,\n  handlePosition = 'right',\n  children,\n  style = true,\n  className,\n  isOpen,\n  defaultOpenWidth,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(initialWidth);\n  const [isResizing, setIsResizing] = useState(false);\n  const lastExpandedWidthRef = useRef(initialWidth);\n\n  const resizeState = useRef({\n    startX: 0,\n    startWidth: 0,\n    factor: 1,\n  });\n\n  // Handler to resize the div\n  const resize = useCallback(\n    (mouseMoveEvent: MouseEvent | TouchEvent) => {\n      if (resizeState.current.startWidth === 0) return;\n\n      let clientX = 0;\n      if (mouseMoveEvent instanceof MouseEvent) {\n        clientX = mouseMoveEvent.clientX;\n      } else if (\n        typeof TouchEvent !== 'undefined' &&\n        mouseMoveEvent instanceof TouchEvent\n      ) {\n        clientX = mouseMoveEvent.touches[0].clientX;\n      }\n\n      const { startX, startWidth, factor } = resizeState.current;\n      const delta = (clientX - startX) / factor;\n      // Invert delta for left handle (moving left decreases width, moving right increases width)\n      const adjustedDelta = handlePosition === 'left' ? -delta : delta;\n      const newWidth = startWidth + adjustedDelta;\n\n      const constrainedWidth = Math.max(\n        Math.min(newWidth, maxWidth ?? Infinity),\n        minWidth\n      );\n\n      setWidth(constrainedWidth);\n    },\n    [maxWidth, minWidth, handlePosition]\n  );\n\n  // Handler to stop resizing\n  const stopResizing = useCallback(() => {\n    setIsResizing(false);\n    document.body.style.cursor = '';\n    document.body.style.userSelect = '';\n    window.removeEventListener('mousemove', resize);\n    window.removeEventListener('mouseup', stopResizing);\n    window.removeEventListener('touchmove', resize);\n    window.removeEventListener('touchend', stopResizing);\n  }, [resize]);\n\n  // Handler to start resizing\n  const startResizing = useCallback(\n    (\n      mouseDownEvent:\n        | React.MouseEvent<HTMLDivElement>\n        | React.TouchEvent<HTMLDivElement>\n    ) => {\n      if (isOpen === false) return;\n      mouseDownEvent.preventDefault();\n      const container = containerRef.current;\n\n      if (!container) return;\n\n      const { width: rectWidth } = container.getBoundingClientRect();\n      const offsetWidth = container.offsetWidth;\n      const factor = offsetWidth > 0 ? rectWidth / offsetWidth : 1;\n\n      let clientX = 0;\n      if ('touches' in mouseDownEvent) {\n        clientX = mouseDownEvent.touches[0].clientX;\n      } else {\n        clientX = mouseDownEvent.clientX;\n      }\n\n      resizeState.current = {\n        startX: clientX,\n        startWidth: offsetWidth,\n        factor,\n      };\n\n      setIsResizing(true);\n      document.body.style.cursor = 'ew-resize';\n      document.body.style.userSelect = 'none';\n\n      window.addEventListener('mousemove', resize, { passive: true });\n      window.addEventListener('mouseup', stopResizing);\n      window.addEventListener('touchmove', resize, { passive: true });\n      window.addEventListener('touchend', stopResizing);\n    },\n    [isOpen, resize, stopResizing]\n  );\n\n  useEffect(() => {\n    return () => {\n      window.removeEventListener('mousemove', resize);\n      window.removeEventListener('mouseup', stopResizing);\n      window.removeEventListener('touchmove', resize);\n      window.removeEventListener('touchend', stopResizing);\n    };\n  }, [resize, stopResizing]);\n\n  useEffect(() => {\n    if (width > minWidth) {\n      lastExpandedWidthRef.current = width;\n    }\n  }, [width, minWidth]);\n\n  useEffect(() => {\n    if (isOpen === undefined) return;\n    if (!isOpen) {\n      setWidth(0);\n    } else {\n      const target =\n        lastExpandedWidthRef.current > 0\n          ? lastExpandedWidthRef.current\n          : (defaultOpenWidth ?? initialWidth);\n      setWidth(Math.max(target, minWidth));\n    }\n  }, [isOpen]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const handleDoubleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      const el = containerRef.current;\n      if (!el) return;\n\n      const { left, right } = el.getBoundingClientRect();\n      const inHandleZone =\n        handlePosition === 'right'\n          ? right - event.clientX <= HANDLE_DOUBLE_CLICK_ZONE_PX\n          : event.clientX - left <= HANDLE_DOUBLE_CLICK_ZONE_PX;\n\n      if (!inHandleZone) return;\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (width > minWidth) {\n        setWidth(minWidth);\n        return;\n      }\n\n      const target = Math.min(\n        Math.max(lastExpandedWidthRef.current, minWidth),\n        maxWidth ?? Infinity\n      );\n      setWidth(target);\n    },\n    [handlePosition, maxWidth, minWidth, width]\n  );\n\n  return (\n    <div\n      className={cn(\n        'relative h-full w-full max-w-[80%] shrink-0',\n        style &&\n          (handlePosition === 'right' ? 'border-r-[2px]' : 'border-l-[2px]'),\n        style &&\n          'border-neutral-200 transition active:border-neutral-400 dark:border-neutral-950 dark:active:border-neutral-600',\n        minWidth && `min-w-[${minWidth}px]`,\n        maxWidth && `max-w-[${maxWidth}px]`,\n        !style && className\n      )}\n      style={{\n        width: `${width}px`,\n        transition: isResizing ? 'none' : 'width 200ms ease-in-out',\n      }}\n      ref={containerRef}\n      aria-valuemin={minWidth}\n      aria-valuemax={maxWidth}\n      aria-valuenow={width}\n      aria-label=\"Resizable component\"\n      role=\"slider\"\n      tabIndex={0}\n    >\n      {/* biome-ignore lint/a11y/noStaticElementInteractions: This div stops event propagation to prevent content clicks from triggering resize */}\n      <div\n        role=\"presentation\"\n        className=\"absolute top-0 left-0 size-full cursor-default overflow-hidden\"\n        onMouseDown={(e) => e.stopPropagation()}\n        onTouchStart={(e) => e.stopPropagation()}\n      >\n        {children}\n      </div>\n      {/* biome-ignore lint/a11y/noStaticElementInteractions: Invisible handle strip — owns resize events so content stopPropagation doesn't block them */}\n      <div\n        role=\"presentation\"\n        className={cn(\n          'absolute top-0 z-10 h-full w-3',\n          isOpen !== false ? 'cursor-ew-resize' : 'cursor-default',\n          handlePosition === 'right' ? 'right-0' : 'left-0'\n        )}\n        onMouseDown={startResizing}\n        onTouchStart={startResizing}\n        onDoubleClick={handleDoubleClick}\n      />\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/WithResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport React, {\n  type FC,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nconst HANDLE_DOUBLE_CLICK_ZONE_PX = 16;\n\n/**\n * Props for the WithResizer component.\n *\n * Defines the configuration for a resizable container with drag-based width adjustment.\n *\n * @example\n * ```tsx\n * // Basic resizable container\n * <WithResizer initialWidth={300} minWidth={200} maxWidth={600}>\n *   <div className=\"p-4\">Resizable content</div>\n * </WithResizer>\n *\n * // Sidebar with resizing\n * <WithResizer\n *   initialWidth={250}\n *   minWidth={180}\n *   maxWidth={400}\n * >\n *   <nav className=\"h-full p-4\">\n *     <SidebarContent />\n *   </nav>\n * </WithResizer>\n *\n * // Panel with unlimited growth\n * <WithResizer initialWidth={400} minWidth={300}>\n *   <div className=\"h-full overflow-auto\">\n *     <PanelContent />\n *   </div>\n * </WithResizer>\n * ```\n */\ntype WithResizerProps = {\n  /** Initial width of the resizable container in pixels */\n  initialWidth: number;\n  /** Maximum allowed width in pixels (optional, no limit if not specified) */\n  maxWidth?: number;\n  /** Minimum allowed width in pixels */\n  minWidth?: number;\n  /** Position of the resize handle (default: 'right') */\n  handlePosition?: 'left' | 'right';\n  /** Apply base styles */\n  style?: boolean;\n  /** Additional className */\n  className?: string;\n  /** Controlled open/close — true expands to defaultOpenWidth (or last used), false collapses to 0 */\n  isOpen?: boolean;\n  /** Width to restore when isOpen becomes true and current width is 0 */\n  defaultOpenWidth?: number;\n};\n\n/**\n * WithResizer Component\n *\n * A flexible container component that allows users to dynamically resize its width\n * through mouse or touch drag interactions. Perfect for creating adjustable panels,\n * sidebars, and split-pane layouts.\n *\n * ## Features\n * - **Mouse & Touch Support**: Works with both mouse drag and touch interactions\n * - **Constraint Enforcement**: Respects minimum and maximum width boundaries\n * - **Visual Feedback**: Clear resize handle with hover and active states\n * - **Smooth Interactions**: Passive event listeners for optimal performance\n * - **Accessibility**: ARIA slider role with proper value announcements\n * - **Responsive Design**: Adapts to different screen sizes and containers\n *\n * ## Technical Implementation\n * - **Event Handling**: Uses `useCallback` for optimal performance\n * - **Boundary Calculation**: Real-time width calculation based on mouse/touch position\n * - **State Management**: Tracks resizing state for visual feedback\n * - **Memory Management**: Proper cleanup of global event listeners\n * - **Touch Events**: Full support for mobile touch interactions\n *\n * ## Visual Design\n * - **Resize Handle**: Rounded handle positioned on the right border\n * - **Border Indicator**: Visual border showing resizable edge\n * - **State Feedback**: Different colors for normal, hover, and active states\n * - **Dark Mode**: Full support with appropriate color scheme\n * - **Smooth Transitions**: CSS transitions for visual polish\n *\n * ## Use Cases\n * - **Application Sidebars**: Collapsible navigation and tool panels\n * - **Content Panels**: Adjustable content areas in complex layouts\n * - **Split Panes**: Dividing screen space between multiple content areas\n * - **Inspector Panels**: Debugging tools and property inspectors\n * - **File Explorers**: Tree views with adjustable column widths\n * - **Dashboard Widgets**: Customizable widget sizes for dashboards\n *\n * ## Accessibility Features\n * - **ARIA Slider**: Proper slider role for screen readers\n * - **Value Announcements**: Current, minimum, and maximum values announced\n * - **Keyboard Focus**: Focusable with tab navigation\n * - **Clear Affordances**: Visual indicators for interactive elements\n *\n * @example\n * ```tsx\n * // Application sidebar with resizing\n * const [sidebarWidth, setSidebarWidth] = useState(250);\n *\n * <div className=\"flex h-screen\">\n *   <WithResizer\n *     initialWidth={sidebarWidth}\n *     minWidth={200}\n *     maxWidth={400}\n *   >\n *     <aside className=\"h-full bg-gray-100 p-4\">\n *       <nav>\n *         <NavItems />\n *       </nav>\n *     </aside>\n *   </WithResizer>\n *\n *   <main className=\"flex-1 p-6\">\n *     <MainContent />\n *   </main>\n * </div>\n *\n * // Developer tools panel\n * <WithResizer\n *   initialWidth={350}\n *   minWidth={250}\n *   maxWidth={600}\n * >\n *   <div className=\"h-full flex flex-col\">\n *     <div className=\"flex-1 overflow-auto p-4\">\n *       <InspectorContent />\n *     </div>\n *     <div className=\"border-t p-2\">\n *       <Controls />\n *     </div>\n *   </div>\n * </WithResizer>\n *\n * // Multi-column layout\n * <div className=\"flex h-full\">\n *   <WithResizer initialWidth={300} minWidth={200} maxWidth={500}>\n *     <FileExplorer />\n *   </WithResizer>\n *\n *   <WithResizer initialWidth={400} minWidth={300}>\n *     <CodeEditor />\n *   </WithResizer>\n *\n *   <div className=\"flex-1 min-w-0\">\n *     <OutputPanel />\n *   </div>\n * </div>\n * ```\n *\n * ## Performance Considerations\n * - Uses passive event listeners to prevent scroll blocking\n * - Optimized with `useCallback` to prevent unnecessary re-renders\n * - Efficient boundary calculations using `getBoundingClientRect`\n * - Minimal DOM manipulation for smooth drag interactions\n *\n * ## Browser Support\n * - Modern browsers with support for touch events\n * - Graceful degradation for older browsers\n * - Mobile-first touch interaction handling\n */\nexport const WithResizer: FC<PropsWithChildren<WithResizerProps>> = ({\n  initialWidth,\n  maxWidth,\n  minWidth = 0,\n  handlePosition = 'right',\n  children,\n  style = true,\n  className,\n  isOpen,\n  defaultOpenWidth,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(initialWidth);\n  const [isResizing, setIsResizing] = useState(false);\n  const lastExpandedWidthRef = useRef(initialWidth);\n\n  const resizeState = useRef({\n    startX: 0,\n    startWidth: 0,\n    factor: 1,\n  });\n\n  // Handler to resize the div\n  const resize = useCallback(\n    (mouseMoveEvent: MouseEvent | TouchEvent) => {\n      if (resizeState.current.startWidth === 0) return;\n\n      let clientX = 0;\n      if (mouseMoveEvent instanceof MouseEvent) {\n        clientX = mouseMoveEvent.clientX;\n      } else if (\n        typeof TouchEvent !== 'undefined' &&\n        mouseMoveEvent instanceof TouchEvent\n      ) {\n        clientX = mouseMoveEvent.touches[0].clientX;\n      }\n\n      const { startX, startWidth, factor } = resizeState.current;\n      const delta = (clientX - startX) / factor;\n      // Invert delta for left handle (moving left decreases width, moving right increases width)\n      const adjustedDelta = handlePosition === 'left' ? -delta : delta;\n      const newWidth = startWidth + adjustedDelta;\n\n      const constrainedWidth = Math.max(\n        Math.min(newWidth, maxWidth ?? Infinity),\n        minWidth\n      );\n\n      setWidth(constrainedWidth);\n    },\n    [maxWidth, minWidth, handlePosition]\n  );\n\n  // Handler to stop resizing\n  const stopResizing = useCallback(() => {\n    setIsResizing(false);\n    document.body.style.cursor = '';\n    document.body.style.userSelect = '';\n    window.removeEventListener('mousemove', resize);\n    window.removeEventListener('mouseup', stopResizing);\n    window.removeEventListener('touchmove', resize);\n    window.removeEventListener('touchend', stopResizing);\n  }, [resize]);\n\n  // Handler to start resizing\n  const startResizing = useCallback(\n    (\n      mouseDownEvent:\n        | React.MouseEvent<HTMLDivElement>\n        | React.TouchEvent<HTMLDivElement>\n    ) => {\n      if (isOpen === false) return;\n      mouseDownEvent.preventDefault();\n      const container = containerRef.current;\n\n      if (!container) return;\n\n      const { width: rectWidth } = container.getBoundingClientRect();\n      const offsetWidth = container.offsetWidth;\n      const factor = offsetWidth > 0 ? rectWidth / offsetWidth : 1;\n\n      let clientX = 0;\n      if ('touches' in mouseDownEvent) {\n        clientX = mouseDownEvent.touches[0].clientX;\n      } else {\n        clientX = mouseDownEvent.clientX;\n      }\n\n      resizeState.current = {\n        startX: clientX,\n        startWidth: offsetWidth,\n        factor,\n      };\n\n      setIsResizing(true);\n      document.body.style.cursor = 'ew-resize';\n      document.body.style.userSelect = 'none';\n\n      window.addEventListener('mousemove', resize, { passive: true });\n      window.addEventListener('mouseup', stopResizing);\n      window.addEventListener('touchmove', resize, { passive: true });\n      window.addEventListener('touchend', stopResizing);\n    },\n    [isOpen, resize, stopResizing]\n  );\n\n  useEffect(() => {\n    return () => {\n      window.removeEventListener('mousemove', resize);\n      window.removeEventListener('mouseup', stopResizing);\n      window.removeEventListener('touchmove', resize);\n      window.removeEventListener('touchend', stopResizing);\n    };\n  }, [resize, stopResizing]);\n\n  useEffect(() => {\n    if (width > minWidth) {\n      lastExpandedWidthRef.current = width;\n    }\n  }, [width, minWidth]);\n\n  useEffect(() => {\n    if (isOpen === undefined) return;\n    if (!isOpen) {\n      setWidth(0);\n    } else {\n      const target =\n        lastExpandedWidthRef.current > 0\n          ? lastExpandedWidthRef.current\n          : (defaultOpenWidth ?? initialWidth);\n      setWidth(Math.max(target, minWidth));\n    }\n  }, [isOpen]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const handleDoubleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      const el = containerRef.current;\n      if (!el) return;\n\n      const { left, right } = el.getBoundingClientRect();\n      const inHandleZone =\n        handlePosition === 'right'\n          ? right - event.clientX <= HANDLE_DOUBLE_CLICK_ZONE_PX\n          : event.clientX - left <= HANDLE_DOUBLE_CLICK_ZONE_PX;\n\n      if (!inHandleZone) return;\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (width > minWidth) {\n        setWidth(minWidth);\n        return;\n      }\n\n      const target = Math.min(\n        Math.max(lastExpandedWidthRef.current, minWidth),\n        maxWidth ?? Infinity\n      );\n      setWidth(target);\n    },\n    [handlePosition, maxWidth, minWidth, width]\n  );\n\n  return (\n    <div\n      className={cn(\n        'relative size-full max-w-[80%] shrink-0',\n        style &&\n          (handlePosition === 'right' ? 'border-r-[2px]' : 'border-l-[2px]'),\n        style &&\n          'border-neutral-200 transition active:border-neutral-400 dark:border-neutral-950 dark:active:border-neutral-600',\n        minWidth && `min-w-[${minWidth}px]`,\n        maxWidth && `max-w-[${maxWidth}px]`,\n        !style && className\n      )}\n      style={{\n        width: `${width}px`,\n        transition: isResizing ? 'none' : 'width 200ms ease-in-out',\n      }}\n      ref={containerRef}\n      aria-valuemin={minWidth}\n      aria-valuemax={maxWidth}\n      aria-valuenow={width}\n      aria-label=\"Resizable component\"\n      role=\"slider\"\n      tabIndex={0}\n    >\n      {/* biome-ignore lint/a11y/noStaticElementInteractions: This div stops event propagation to prevent content clicks from triggering resize */}\n      <div\n        role=\"presentation\"\n        className=\"absolute top-0 left-0 size-full cursor-default overflow-hidden\"\n        onMouseDown={(e) => e.stopPropagation()}\n        onTouchStart={(e) => e.stopPropagation()}\n      >\n        {children}\n      </div>\n      {/* biome-ignore lint/a11y/noStaticElementInteractions: Invisible handle strip — owns resize events so content stopPropagation doesn't block them */}\n      <div\n        role=\"presentation\"\n        className={cn(\n          'absolute top-0 z-10 h-full w-3',\n          isOpen !== false ? 'cursor-ew-resize' : 'cursor-default',\n          handlePosition === 'right' ? 'right-0' : 'left-0'\n        )}\n        onMouseDown={startResizing}\n        onTouchStart={startResizing}\n        onDoubleClick={handleDoubleClick}\n      />\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/index.mjs

@@ -1,58 +1,61 @@
 import { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, toastVariants } from "./Toaster/Toast.mjs";
 import { reducer, toast, useToast } from "./Toaster/useToast.mjs";
 import { Toaster } from "./Toaster/Toaster.mjs";
-import { Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, containerVariants } from "./Container/index.mjs";
 import { Loader } from "./Loader/index.mjs";
-import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant, buttonVariants } from "./Button/Button.mjs";
+import { Button, buttonVariants } from "./Button/Button.mjs";
 import { MaxHeightSmoother } from "./MaxHeightSmoother/index.mjs";
 import { Accordion } from "./Accordion/Accordion.mjs";
 import { Avatar, getCapitals } from "./Avatar/index.mjs";
-import { Badge, BadgeColor, BadgeSize, BadgeVariant, badgeVariants } from "./Badge/index.mjs";
-import { Link, LinkColor, LinkRoundedSize, LinkSize, LinkUnderlined, LinkVariant, checkIsExternalLink, isTextChildren, linkVariants } from "./Link/Link.mjs";
+import { Badge, badgeVariants } from "./Badge/index.mjs";
+import { Link, checkIsExternalLink, isTextChildren, linkVariants } from "./Link/Link.mjs";
 import { Breadcrumb } from "./Breadcrumb/index.mjs";
+import { Container, containerVariants } from "./Container/index.mjs";
 import { ClickOutsideDiv } from "./ClickOutsideDiv/index.mjs";
-import { DropDown, DropDownAlign, DropDownYAlign } from "./DropDown/index.mjs";
-import { Checkbox, CheckboxColor, CheckboxSize, checkboxVariants } from "./Input/Checkbox.mjs";
-import { Input, InputSize, InputVariant, inputVariants } from "./Input/Input.mjs";
+import { DropDown } from "./DropDown/index.mjs";
+import { Checkbox, checkboxVariants } from "./Input/Checkbox.mjs";
+import { Input, inputVariants } from "./Input/Input.mjs";
 import { InputPassword } from "./Input/InputPassword.mjs";
 import { InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, OTPInput, OTPInputContext, inputSlotVariants, usePasswordManagerBadge, usePrevious } from "./Input/OTPInput.mjs";
+import { Radio, radioVariants } from "./Input/Radio.mjs";
 import { SearchInput } from "./Input/SearchInput.mjs";
 import { Browser } from "./Browser/Browser.mjs";
-import { KeyList, KeyboardShortcut } from "./KeyboardShortcut/KeyboardShortcut.mjs";
-import { Detail, PopoverStatic, PopoverXAlign, PopoverYAlign } from "./Popover/static.mjs";
+import { KeyboardShortcut } from "./KeyboardShortcut/KeyboardShortcut.mjs";
+import { Detail, PopoverStatic } from "./Popover/static.mjs";
 import { Popover } from "./Popover/dynamic.mjs";
 import { Carousel } from "./Carousel/index.mjs";
 import { CollapsibleTable } from "./CollapsibleTable/CollapsibleTable.mjs";
 import { Command, CommandRoot } from "./Command/index.mjs";
+import { TextArea } from "./TextArea/TextArea.mjs";
+import { AutoSizedTextArea } from "./TextArea/AutoSizeTextArea.mjs";
+import { ContentEditor } from "./ContentEditor/ContentEditor.mjs";
+import { ContentEditorInput } from "./ContentEditor/ContentEditorInput.mjs";
+import { ContentEditableTextArea, useContentEditable } from "./TextArea/ContentEditableTextArea.mjs";
+import { AutoCompleteTextarea } from "./TextArea/AutocompleteTextArea.mjs";
+import { ContentEditorTextArea } from "./ContentEditor/ContentEditorTextArea.mjs";
 import { PressableSpan } from "./PressableSpan/PressableSpan.mjs";
 import { ContentSelector } from "./ContentSelector/ContentSelector.mjs";
 import { CopyButton } from "./CopyButton/index.mjs";
 import { CopyToClipboard, useCopyToClipboard } from "./CopyToClipboard/index.mjs";
-import { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize, choiceVariant, defaultChoices, indicatorVariant, switchSelectorVariant } from "./SwitchSelector/SwitchSelector.mjs";
+import { SwitchSelector, choiceVariant, defaultChoices, indicatorVariant, switchSelectorVariant } from "./SwitchSelector/SwitchSelector.mjs";
 import { VerticalSwitchSelector } from "./SwitchSelector/VerticalSwitchSelector.mjs";
 import { EditableFieldInput } from "./EditableField/EditableFieldInput.mjs";
-import { ContentEditableTextArea, useContentEditable } from "./TextArea/ContentEditableTextArea.mjs";
-import { AutoCompleteTextarea } from "./TextArea/AutocompleteTextArea.mjs";
-import { TextArea } from "./TextArea/TextArea.mjs";
-import { AutoSizedTextArea } from "./TextArea/AutoSizeTextArea.mjs";
 import { EditableFieldTextArea } from "./EditableField/EditableFieldTextArea.mjs";
 import { DictionaryEditor } from "./DictionaryEditor/DictionaryEditor.mjs";
 import { LocaleSwitcherContentProvider, useLocaleSwitcherContent } from "./LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
 import { LocaleSwitcherContent } from "./LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs";
 import { Label } from "./Label/index.mjs";
 import { MultiSelect } from "./Select/Multiselect.mjs";
-import { Select, SelectContent, SelectContentPosition, SelectLabel, SelectSeparator } from "./Select/Select.mjs";
+import { Select, SelectContent, SelectLabel, SelectSeparator } from "./Select/Select.mjs";
 import { TextEditor, TextEditorContainer, traceKeys } from "./DictionaryFieldEditor/ContentEditorView/TextEditor.mjs";
 import { KeyPathBreadcrumb } from "./DictionaryFieldEditor/KeyPathBreadcrumb.mjs";
-import { ContentEditor } from "./DictionaryFieldEditor/ContentEditor.mjs";
 import { useFormField } from "./Form/FormField.mjs";
 import { InformationTag } from "./InformationTag/index.mjs";
 import { useForm } from "./Form/FormBase.mjs";
 import { Form } from "./Form/Form.mjs";
 import { DictionaryCreationForm } from "./DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.mjs";
-import { TabSelector, TabSelectorColor } from "./TabSelector/TabSelector.mjs";
+import { TabSelector } from "./TabSelector/TabSelector.mjs";
 import { H1, H2, H3, H4, H5, H6 } from "./Headers/index.mjs";
-import { Modal, ModalSize } from "./Modal/Modal.mjs";
+import { Modal } from "./Modal/Modal.mjs";
 import { SaveForm } from "./DictionaryFieldEditor/SaveForm/SaveForm.mjs";
 import { DictionaryFieldEditor } from "./DictionaryFieldEditor/DictionaryFieldEditor.mjs";
 import { VersionSwitcherProvider, useVersionSwitcher } from "./DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcherContext.mjs";
@@ -102,20 +105,19 @@ import { Burger } from "./Navbar/Burger.mjs";
 import { MobileNavbar } from "./Navbar/MobileNavbar.mjs";
 import { Navbar } from "./Navbar/index.mjs";
 import { NumberItemsSelector } from "./Pagination/NumberItemsSelector.mjs";
-import { Pagination, PaginationSize, PaginationVariant, paginationVariants } from "./Pagination/Pagination.mjs";
+import { Pagination, paginationVariants } from "./Pagination/Pagination.mjs";
 import { ShowingResultsNumberItems } from "./Pagination/ShowingResultsNumberItems.mjs";
 import { DotPattern } from "./Pattern/DotPattern.mjs";
 import { GridPattern } from "./Pattern/GridPattern.mjs";
 import { Spotlight } from "./Pattern/SpotLight.mjs";
 import { drawerManager, useRightDrawer } from "./RightDrawer/useRightDrawer.mjs";
 import { RightDrawer } from "./RightDrawer/RightDrawer.mjs";
-import { Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize } from "./Tag/index.mjs";
-import { TechLogoName } from "./TechLogo/types.mjs";
+import { Step, Steps } from "./Steps/index.mjs";
+import { Tag } from "./Tag/index.mjs";
 import { TechLogo } from "./TechLogo/TechLogo.mjs";
 import { techLogos_exports } from "./TechLogo/techLogos.mjs";
 import { Terminal } from "./Terminal/Terminal.mjs";
-import { Modes } from "./ThemeSwitcherDropDown/types.mjs";
 import { DesktopThemeSwitcher } from "./ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs";
 import { MobileThemeSwitcher } from "./ThemeSwitcherDropDown/MobileThemeSwitcher.mjs";
 
-export { Accordion, AutoCompleteTextarea, AutoSizedTextArea, Avatar, Badge, BadgeColor, BadgeSize, BadgeVariant, BitbucketLogo, Breadcrumb, Browser, Burger, Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant, Carousel, Checkbox, CheckboxColor, CheckboxSize, ClickOutsideDiv, Code, CodeBlock, CodeDefault, CollapsibleTable, Command, CommandRoot, Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, ContentEditableTextArea, ContentEditor, ContentSelector, CopyButton, CopyToClipboard, DesktopNavbar, DesktopThemeSwitcher, Detail, DictionaryCreationForm, DictionaryEditor, DictionaryFieldEditor, DiscordLogo, DotPattern, DropDown, DropDownAlign, DropDownYAlign, EditableFieldInput, EditableFieldTextArea, ExpandCollapse, FacebookLogo, FileList, Flag, flags_exports as Flags, Footer, Form, GitHubLogo, GitLabLogo, GoogleLogo, GridPattern, H1, H2, H3, H4, H5, H6, HTMLRenderer, HeightResizer, HideShow, Hr, IDE, InformationTag, Input, InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputPassword, InputSize, InputVariant, InstagramLogo, KeyList, KeyPathBreadcrumb, KeyboardScreenAdapter, KeyboardShortcut, Label, LanguageBackground, LanguageSection, Link, LinkColor, LinkRoundedSize, LinkSize, LinkUnderlined, LinkVariant, LinkedInLogo, Loader, LocaleSwitcher, LocaleSwitcherContent, LocaleSwitcherContentProvider, Logo, LogoTextOnly, LogoWithText, LogoWithTextBelow, MarkDownIframe, MarkdownRenderer, MaxHeightSmoother, MaxWidthSmoother, MobileNavbar, MobileThemeSwitcher, Modal, ModalSize, Modes, MultiSelect, Navbar, NumberItemsSelector, OTPInput, OTPInputContext, Pagination, PaginationSize, PaginationVariant, Popover, PopoverStatic, PopoverXAlign, PopoverYAlign, PressableSpan, ProductHuntLogo, RightDrawer, SaveForm, SearchInput, Select, SelectContent, SelectContentPosition, SelectLabel, SelectSeparator, ShowingResultsNumberItems, SmartTable, SocialNetworks, Spotlight, SwitchSelector, SwitchSelectorColor, SwitchSelectorSize, Tab, TabSelector, TabSelectorColor, Table, Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize, Td, TechLogo, TechLogoName, techLogos_exports as TechLogos, Terminal, TextArea, TextEditor, TextEditorContainer, Th, TiktokLogo, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Tr, VersionSwitcher, VersionSwitcherProvider, VerticalSwitchSelector, WithResizer, XLogo, YoutubeLogo, badgeVariants, baseMarkdownComponents, buttonVariants, checkIsExternalLink, checkboxVariants, choiceVariant, containerVariants, defaultChoices, drawerManager, getCapitals, getIntlayerHTMLOptions, getIntlayerMarkdownOptions, indicatorVariant, inputSlotVariants, inputVariants, isTextChildren, linkVariants, paginationVariants, reducer, switchSelectorVariant, toast, toastVariants, traceKeys, useContentEditable, useCopyToClipboard, useForm, useFormField, useLocaleSwitcherContent, usePasswordManagerBadge, usePrevious, useRightDrawer, useToast, useVersionSwitcher };
+export { Accordion, AutoCompleteTextarea, AutoSizedTextArea, Avatar, Badge, BitbucketLogo, Breadcrumb, Browser, Burger, Button, Carousel, Checkbox, ClickOutsideDiv, Code, CodeBlock, CodeDefault, CollapsibleTable, Command, CommandRoot, Container, ContentEditableTextArea, ContentEditorInput, ContentEditorTextArea, ContentSelector, CopyButton, CopyToClipboard, DesktopNavbar, DesktopThemeSwitcher, Detail, DictionaryCreationForm, DictionaryEditor, DictionaryFieldEditor, DiscordLogo, DotPattern, DropDown, EditableFieldInput, EditableFieldTextArea, ExpandCollapse, FacebookLogo, FileList, Flag, flags_exports as Flags, Footer, Form, GitHubLogo, GitLabLogo, GoogleLogo, GridPattern, H1, H2, H3, H4, H5, H6, HTMLRenderer, HeightResizer, HideShow, Hr, IDE, InformationTag, Input, InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputPassword, InstagramLogo, KeyPathBreadcrumb, KeyboardScreenAdapter, KeyboardShortcut, Label, LanguageBackground, LanguageSection, Link, LinkedInLogo, Loader, LocaleSwitcher, LocaleSwitcherContent, LocaleSwitcherContentProvider, Logo, LogoTextOnly, LogoWithText, LogoWithTextBelow, MarkDownIframe, MarkdownRenderer, MaxHeightSmoother, MaxWidthSmoother, MobileNavbar, MobileThemeSwitcher, Modal, MultiSelect, Navbar, NumberItemsSelector, OTPInput, OTPInputContext, Pagination, Popover, PopoverStatic, PressableSpan, ProductHuntLogo, Radio, RightDrawer, SaveForm, SearchInput, Select, SelectContent, SelectLabel, SelectSeparator, ShowingResultsNumberItems, SmartTable, SocialNetworks, Spotlight, Step, Steps, SwitchSelector, Tab, TabSelector, Table, Tag, Td, TechLogo, techLogos_exports as TechLogos, Terminal, TextArea, TextEditor, TextEditorContainer, Th, TiktokLogo, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Tr, VersionSwitcher, VersionSwitcherProvider, VerticalSwitchSelector, WithResizer, XLogo, YoutubeLogo, badgeVariants, baseMarkdownComponents, buttonVariants, checkIsExternalLink, checkboxVariants, choiceVariant, containerVariants, defaultChoices, drawerManager, getCapitals, getIntlayerHTMLOptions, getIntlayerMarkdownOptions, indicatorVariant, inputSlotVariants, inputVariants, isTextChildren, linkVariants, paginationVariants, radioVariants, reducer, switchSelectorVariant, toast, toastVariants, traceKeys, useContentEditable, useCopyToClipboard, useForm, useFormField, useLocaleSwitcherContent, usePasswordManagerBadge, usePrevious, useRightDrawer, useToast, useVersionSwitcher };

package/dist/esm/hooks/index.mjs

@@ -1,16 +1,16 @@
-import { useKeyboardDetector } from "./useKeyboardDetector.mjs";
-import { useGetElementOrWindow } from "./useGetElementOrWindow.mjs";
-import { useScrollY } from "./useScrollY.mjs";
-import { usePersistedStore } from "./usePersistedStore.mjs";
-import { useHorizontalSwipe } from "./useHorizontalSwipe.mjs";
-import { useItemSelector } from "./useItemSelector.mjs";
 import { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice } from "./useDevice.mjs";
-import { useSearch } from "./useSearch.mjs";
-import { useIsMounted } from "./useIsMounted.mjs";
+import { useItemSelector } from "./useItemSelector.mjs";
+import { usePersistedStore } from "./usePersistedStore.mjs";
 import { useGetElementById } from "./useGetElementById.mjs";
+import { useGetElementOrWindow } from "./useGetElementOrWindow.mjs";
+import { useHorizontalSwipe } from "./useHorizontalSwipe.mjs";
 import { useIsDarkMode } from "./useIsDarkMode.mjs";
+import { useIsMounted } from "./useIsMounted.mjs";
+import { useKeyboardDetector } from "./useKeyboardDetector.mjs";
 import { useScreenWidth } from "./useScreenWidth.mjs";
 import { useScrollBlockage } from "./useScrollBlockage/index.mjs";
 import { useScrollDetection } from "./useScrollDetection.mjs";
+import { useScrollY } from "./useScrollY.mjs";
+import { useSearch } from "./useSearch.mjs";
 
 export { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice, useGetElementById, useGetElementOrWindow, useHorizontalSwipe, useIsDarkMode, useIsMounted, useItemSelector, useKeyboardDetector, usePersistedStore, useScreenWidth, useScrollBlockage, useScrollDetection, useScrollY, useSearch };

package/dist/types/api/hooks/project.d.ts

@@ -15,9 +15,16 @@ declare const useGetCIConfig: (options?: Partial<UseQueryOptions>) => QueryObser
 declare const usePushCIConfig: () => any;
 declare const useTriggerBuild: () => any;
 declare const useTriggerWebhook: () => any;
+declare const useAddEnvironment: () => any;
+declare const useUpdateEnvironment: () => any;
+declare const useDeleteEnvironment: () => any;
+declare const useSelectEnvironment: () => any;
+declare const useResetToProductionEnvironment: () => any;
+declare const useMigrateEnvironment: () => any;
 declare const useAddNewAccessKey: () => any;
 declare const useDeleteAccessKey: () => any;
 declare const useRefreshAccessKey: () => any;
+declare const useUpdateMemberAccess: () => any;
 //#endregion
-export { useAddNewAccessKey, useAddProject, useDeleteAccessKey, useDeleteProject, useDeleteProjectById, useGetCIConfig, useGetProjects, usePushCIConfig, usePushProjectConfiguration, useRefreshAccessKey, useSelectProject, useTriggerBuild, useTriggerWebhook, useUnselectProject, useUpdateProject, useUpdateProjectMembers };
+export { useAddEnvironment, useAddNewAccessKey, useAddProject, useDeleteAccessKey, useDeleteEnvironment, useDeleteProject, useDeleteProjectById, useGetCIConfig, useGetProjects, useMigrateEnvironment, usePushCIConfig, usePushProjectConfiguration, useRefreshAccessKey, useResetToProductionEnvironment, useSelectEnvironment, useSelectProject, useTriggerBuild, useTriggerWebhook, useUnselectProject, useUpdateEnvironment, useUpdateMemberAccess, useUpdateProject, useUpdateProjectMembers };
 //# sourceMappingURL=project.d.ts.map

package/dist/types/api/hooks/project.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"project.d.ts","names":[],"sources":["../../../../src/api/hooks/project.ts"],"mappings":";;;;cAqBa,cAAA,GACX,OAAA,GAAU,iBAAA,EACV,OAAA,GAAU,OAAA,CAAQ,eAAA,MAAgB,mBAAA,CAAA,KAAA,EAAA,MAAA;AAAA,cAcvB,aAAA;AAAA,cAYA,gBAAA;AAAA,cAqBA,2BAAA;AAAA,cAmBA,uBAAA;AAAA,cAaA,gBAAA;AAAA,cAYA,oBAAA;AAAA,cAaA,gBAAA;AAAA,cA4BA,kBAAA;AAAA,cA4BA,cAAA,GAAkB,OAAA,GAAU,OAAA,CAAQ,eAAA,MAAgB,mBAAA,CAAA,KAAA,EAAA,MAAA;AAAA,cAWpD,eAAA;AAAA,cAYA,eAAA;AAAA,cAYA,iBAAA;AAAA,cAaA,kBAAA;AAAA,cAYA,kBAAA;AAAA,cAYA,mBAAA"}
+{"version":3,"file":"project.d.ts","names":[],"sources":["../../../../src/api/hooks/project.ts"],"mappings":";;;;cAyBa,cAAA,GACX,OAAA,GAAU,iBAAA,EACV,OAAA,GAAU,OAAA,CAAQ,eAAA,MAAgB,mBAAA,CAAA,KAAA,EAAA,MAAA;AAAA,cAcvB,aAAA;AAAA,cAYA,gBAAA;AAAA,cAqBA,2BAAA;AAAA,cAmBA,uBAAA;AAAA,cAaA,gBAAA;AAAA,cAYA,oBAAA;AAAA,cAaA,gBAAA;AAAA,cA4BA,kBAAA;AAAA,cA4BA,cAAA,GAAkB,OAAA,GAAU,OAAA,CAAQ,eAAA,MAAgB,mBAAA,CAAA,KAAA,EAAA,MAAA;AAAA,cAWpD,eAAA;AAAA,cAYA,eAAA;AAAA,cAYA,iBAAA;AAAA,cAaA,iBAAA;AAAA,cAqBA,oBAAA;AAAA,cAyBA,oBAAA;AAAA,cAsBA,oBAAA;AAAA,cAmBA,+BAAA;AAAA,cAkBA,qBAAA;AAAA,cAaA,kBAAA;AAAA,cAYA,kBAAA;AAAA,cAYA,mBAAA;AAAA,cAaA,qBAAA"}