@intlayer/design-system 8.9.8 → 8.10.0-canary.0

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,\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      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    [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 cursor-ew-resize',\n        style &&\n          (handlePosition === 'right'\n            ? [\n                'border-r-[2px]',\n                'after:absolute after:top-1/2 after:right-0 after:block after:h-10 after:w-2 after:translate-x-1/2 after:-translate-y-1/2 after:transform after:cursor-ew-resize after:rounded-full after:bg-neutral-200 after:transition after:content-[\"\"] dark:after:bg-neutral-950',\n              ]\n            : [\n                'border-l-[2px]',\n                'after:absolute after:top-1/2 after:left-0 after:block after:h-10 after:w-2 after:-translate-x-1/2 after:-translate-y-1/2 after:transform after:cursor-ew-resize after:rounded-full after:bg-neutral-200 after:transition after:content-[\"\"] dark:after:bg-neutral-950',\n              ]),\n        style &&\n          'border-neutral-200 transition active:border-neutral-400 active:after:bg-neutral-400 dark:border-neutral-950 dark:active:border-neutral-600 active:dark:after:bg-neutral-600',\n        minWidth && `min-w-[${minWidth}px]`,\n\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      onMouseDown={startResizing}\n      onTouchStart={startResizing}\n      onDoubleClick={handleDoubleClick}\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    </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      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    [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 cursor-ew-resize',\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

@@ -10,6 +10,8 @@ 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 { Breadcrumb } from "./Breadcrumb/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 { InputPassword } from "./Input/InputPassword.mjs";
@@ -20,7 +22,6 @@ import { KeyList, KeyboardShortcut } from "./KeyboardShortcut/KeyboardShortcut.m
 import { Detail, PopoverStatic, PopoverXAlign, PopoverYAlign } from "./Popover/static.mjs";
 import { Popover } from "./Popover/dynamic.mjs";
 import { Carousel } from "./Carousel/index.mjs";
-import { ClickOutsideDiv } from "./ClickOutsideDiv/index.mjs";
 import { CollapsibleTable } from "./CollapsibleTable/CollapsibleTable.mjs";
 import { Command, CommandRoot } from "./Command/index.mjs";
 import { PressableSpan } from "./PressableSpan/PressableSpan.mjs";
@@ -36,7 +37,6 @@ 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 { DropDown, DropDownAlign, DropDownYAlign } from "./DropDown/index.mjs";
 import { LocaleSwitcherContentProvider, useLocaleSwitcherContent } from "./LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
 import { LocaleSwitcherContent } from "./LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs";
 import { Label } from "./Label/index.mjs";

package/dist/esm/hooks/index.mjs

@@ -1,22 +1,22 @@
-import { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice } from "./useDevice.mjs";
-import { useItemSelector } from "./useItemSelector.mjs";
+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 { useOAuth2 } from "./useAuth/useOAuth2.mjs";
 import { useSession } from "./useAuth/useSession.mjs";
 import { useAuth } from "./useAuth/useAuth.mjs";
 import { useIntlayerAuth, useIntlayerOAuth } from "./useIntlayerAPI.mjs";
 import { useAddDictionary, useAddNewAccessKey, useAddOrganization, useAddOrganizationMember, useAddPasskey, useAddProject, useAddTag, useAppQuery, useAskDocQuestion, useAskResetPassword, useAuditContentDeclaration, useAuditContentDeclarationField, useAuditContentDeclarationMetadata, useAuditScan, useAuditTag, useAutocomplete, useBitbucketAuth, useBitbucketCheckConfig, useBitbucketGetConfigFile, useBitbucketRepos, useCancelSubscription, useChangePassword, useChat, useCreatePortalSession, useCreateUser, useDeleteAccessKey, useDeleteDictionary, useDeleteOrganization, useDeleteOrganizationById, useDeletePasskey, useDeleteProject, useDeleteProjectById, useDeleteSSOProvider, useDeleteShowcaseProject, useDeleteTag, useDeleteUser, useDisableTwoFactor, useEnableTwoFactor, useFillAllTranslations, useGetCIConfig, useGetDictionaries, useGetDictionariesKeys, useGetDictionary, useGetDiscussions, useGetDiscussionsData, useGetEditorDictionaries, useGetInvoices, useGetNewsletterStatus, useGetOrganizations, useGetOtherShowcaseProjects, useGetPaymentMethod, useGetPricing, useGetProjects, useGetRecursiveAuditStatus, useGetShowcaseProjectById, useGetShowcaseProjects, useGetSubscription, useGetTags, useGetUserByAccount, useGetUserById, useGetUsers, useGetVerifyEmailStatus, useGithubAuth, useGithubCheckConfig, useGithubGetAuthUrl, useGithubGetConfigFile, useGithubRepos, useGithubToken, useGitlabAuth, useGitlabCheckConfig, useGitlabGetConfigFile, useGitlabProjects, useInfiniteGetDictionaries, useLinkSocial, useListAccounts, useListPasskeys, useListSSOProviders, useLogin, useLogout, usePauseTranslationJob, usePushCIConfig, usePushDictionaries, usePushProjectConfiguration, useQueryClient, useRefreshAccessKey, useRegister, useRegisterSSO, useResetPassword, useResumeTranslationJob, useSearchDoc, useSelectOrganization, useSelectProject, useSignInMagicLink, useSignInPasskey, useSignInSSO, useStartRecursiveAudit, useStopTranslationJob, useSubmitShowcaseProject, useSubscribeToNewsletter, useToggleShowcaseDownvote, useToggleShowcaseUpvote, useTranslateJSONDeclaration, useTriggerBuild, useTriggerWebhook, useUnlinkAccount, useUnselectOrganization, useUnselectProject, useUnsubscribeFromNewsletter, useUpdateDictionary, useUpdateOrganization, useUpdateOrganizationMembers, useUpdateOrganizationMembersById, useUpdateProject, useUpdateProjectMembers, useUpdateShowcaseProject, useUpdateTag, useUpdateUser, useUploadUserAvatar, useVerifyBackupCode, useVerifyEmail, useVerifyTotp, useWriteDictionary } from "./reactQuery.mjs";
-import { useUser } from "./useUser/index.mjs";
+import { useSearch } from "./useSearch.mjs";
+import { useIsMounted } from "./useIsMounted.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";
+import { useUser } from "./useUser/index.mjs";
 
 export { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useAddDictionary, useAddNewAccessKey, useAddOrganization, useAddOrganizationMember, useAddPasskey, useAddProject, useAddTag, useAppQuery, useAskDocQuestion, useAskResetPassword, useAuditContentDeclaration, useAuditContentDeclarationField, useAuditContentDeclarationMetadata, useAuditScan, useAuditTag, useAuth, useAutocomplete, useBitbucketAuth, useBitbucketCheckConfig, useBitbucketGetConfigFile, useBitbucketRepos, useCancelSubscription, useChangePassword, useChat, useCreatePortalSession, useCreateUser, useDeleteAccessKey, useDeleteDictionary, useDeleteOrganization, useDeleteOrganizationById, useDeletePasskey, useDeleteProject, useDeleteProjectById, useDeleteSSOProvider, useDeleteShowcaseProject, useDeleteTag, useDeleteUser, useDevice, useDisableTwoFactor, useEnableTwoFactor, useFillAllTranslations, useGetCIConfig, useGetDictionaries, useGetDictionariesKeys, useGetDictionary, useGetDiscussions, useGetDiscussionsData, useGetEditorDictionaries, useGetElementById, useGetElementOrWindow, useGetInvoices, useGetNewsletterStatus, useGetOrganizations, useGetOtherShowcaseProjects, useGetPaymentMethod, useGetPricing, useGetProjects, useGetRecursiveAuditStatus, useGetShowcaseProjectById, useGetShowcaseProjects, useGetSubscription, useGetTags, useGetUserByAccount, useGetUserById, useGetUsers, useGetVerifyEmailStatus, useGithubAuth, useGithubCheckConfig, useGithubGetAuthUrl, useGithubGetConfigFile, useGithubRepos, useGithubToken, useGitlabAuth, useGitlabCheckConfig, useGitlabGetConfigFile, useGitlabProjects, useHorizontalSwipe, useInfiniteGetDictionaries, useIntlayerAuth, useIntlayerOAuth, useIsDarkMode, useIsMounted, useItemSelector, useKeyboardDetector, useLinkSocial, useListAccounts, useListPasskeys, useListSSOProviders, useLogin, useLogout, useOAuth2, usePauseTranslationJob, usePersistedStore, usePushCIConfig, usePushDictionaries, usePushProjectConfiguration, useQueryClient, useRefreshAccessKey, useRegister, useRegisterSSO, useResetPassword, useResumeTranslationJob, useScreenWidth, useScrollBlockage, useScrollDetection, useScrollY, useSearch, useSearchDoc, useSelectOrganization, useSelectProject, useSession, useSignInMagicLink, useSignInPasskey, useSignInSSO, useStartRecursiveAudit, useStopTranslationJob, useSubmitShowcaseProject, useSubscribeToNewsletter, useToggleShowcaseDownvote, useToggleShowcaseUpvote, useTranslateJSONDeclaration, useTriggerBuild, useTriggerWebhook, useUnlinkAccount, useUnselectOrganization, useUnselectProject, useUnsubscribeFromNewsletter, useUpdateDictionary, useUpdateOrganization, useUpdateOrganizationMembers, useUpdateOrganizationMembersById, useUpdateProject, useUpdateProjectMembers, useUpdateShowcaseProject, useUpdateTag, useUpdateUser, useUploadUserAvatar, useUser, useVerifyBackupCode, useVerifyEmail, useVerifyTotp, useWriteDictionary };

package/dist/types/components/Badge/index.d.ts

@@ -42,9 +42,9 @@ declare enum BadgeSize {
  * @description Defines the styling variants for different badge combinations
  */
 declare const badgeVariants: (props?: {
-  color?: "text" | "primary" | "error" | "custom" | "secondary" | "destructive" | "success" | "neutral" | "light" | "dark";
+  color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "error" | "custom" | "success";
   variant?: "none" | "default" | "outline" | "hoverable";
-  size?: "lg" | "md" | "sm";
+  size?: "sm" | "md" | "lg";
 } & import("class-variance-authority/types").ClassProp) => string;
 /**
  * Badge component props interface

package/dist/types/components/Browser/Browser.content.d.ts

@@ -143,6 +143,126 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }>;
+    sitemapButtonLabel: import("@intlayer/core/transpiler").TranslationContent<unknown, {
+      en: string;
+      'en-GB': string;
+      fr: string;
+      es: string;
+      de: string;
+      ja: string;
+      ko: string;
+      zh: string;
+      it: string;
+      pt: string;
+      hi: string;
+      ar: string;
+      ru: string;
+      tr: string;
+      pl: string;
+      id: string;
+      vi: string;
+      uk: string;
+    }>;
+    sitemapSearchPlaceholder: import("@intlayer/core/transpiler").TranslationContent<unknown, {
+      en: string;
+      'en-GB': string;
+      fr: string;
+      es: string;
+      de: string;
+      ja: string;
+      ko: string;
+      zh: string;
+      it: string;
+      pt: string;
+      hi: string;
+      ar: string;
+      ru: string;
+      tr: string;
+      pl: string;
+      id: string;
+      vi: string;
+      uk: string;
+    }>;
+    sitemapSearchAriaLabel: import("@intlayer/core/transpiler").TranslationContent<unknown, {
+      en: string;
+      'en-GB': string;
+      fr: string;
+      es: string;
+      de: string;
+      ja: string;
+      ko: string;
+      zh: string;
+      it: string;
+      pt: string;
+      hi: string;
+      ar: string;
+      ru: string;
+      tr: string;
+      pl: string;
+      id: string;
+      vi: string;
+      uk: string;
+    }>;
+    sitemapLoading: import("@intlayer/core/transpiler").TranslationContent<unknown, {
+      en: string;
+      'en-GB': string;
+      fr: string;
+      es: string;
+      de: string;
+      ja: string;
+      ko: string;
+      zh: string;
+      it: string;
+      pt: string;
+      hi: string;
+      ar: string;
+      ru: string;
+      tr: string;
+      pl: string;
+      id: string;
+      vi: string;
+      uk: string;
+    }>;
+    sitemapEmpty: import("@intlayer/core/transpiler").TranslationContent<unknown, {
+      en: string;
+      'en-GB': string;
+      fr: string;
+      es: string;
+      de: string;
+      ja: string;
+      ko: string;
+      zh: string;
+      it: string;
+      pt: string;
+      hi: string;
+      ar: string;
+      ru: string;
+      tr: string;
+      pl: string;
+      id: string;
+      vi: string;
+      uk: string;
+    }>;
+    sitemapError: import("@intlayer/core/transpiler").TranslationContent<unknown, {
+      en: string;
+      'en-GB': string;
+      fr: string;
+      es: string;
+      de: string;
+      ja: string;
+      ko: string;
+      zh: string;
+      it: string;
+      pt: string;
+      hi: string;
+      ar: string;
+      ru: string;
+      tr: string;
+      pl: string;
+      id: string;
+      vi: string;
+      uk: string;
+    }>;
   };
   title: string;
   description: string;

package/dist/types/components/Browser/Browser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Browser.d.ts","names":[],"sources":["../../../../src/components/Browser/Browser.tsx"],"mappings":";;;KAkBY,YAAA;EACV,UAAA;EACA,IAAA;EACA,SAAA;EACA,KAAA,GAAQ,aAAA;EACR,IAAA;EACA,YAAA;EACA,OAAA;EACA,GAAA,GAAM,SAAA,CAAU,iBAAA;EAChB,iBAAA;AAAA,IACE,cAAA,CAAe,iBAAA;AAAA,cAEN,OAAA;EAAW,UAAA;EAAA,IAAA;EAAA,SAAA;EAAA,KAAA;EAAA,IAAA;EAAA,cAAA,SAAA;EAAA,OAAA;EAAA,GAAA;EAAA,iBAAA;EAAA,GAAA;AAAA,GAWrB,YAAA,iCAAY,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Browser.d.ts","names":[],"sources":["../../../../src/components/Browser/Browser.tsx"],"mappings":";;;KA6BY,YAAA;EACV,UAAA;EACA,IAAA;EACA,SAAA;EACA,KAAA,GAAQ,aAAA;EACR,IAAA;EACA,YAAA;EACA,OAAA;EACA,GAAA,GAAM,SAAA,CAAU,iBAAA;EAChB,iBAAA;AAAA,IACE,cAAA,CAAe,iBAAA;AAAA,cAWN,OAAA;EAAW,UAAA;EAAA,IAAA;EAAA,SAAA;EAAA,KAAA;EAAA,IAAA;EAAA,cAAA,SAAA;EAAA,OAAA;EAAA,GAAA;EAAA,iBAAA;EAAA,GAAA;AAAA,GAWrB,YAAA,iCAAY,GAAA,CAAA,OAAA"}

package/dist/types/components/Browser/extractUrlFromSitemap.d.ts

@@ -0,0 +1,5 @@
+//#region src/components/Browser/extractUrlFromSitemap.d.ts
+declare const extractUrlFromSitemap: (pageUrl: string) => Promise<string[]>;
+//#endregion
+export { extractUrlFromSitemap };
+//# sourceMappingURL=extractUrlFromSitemap.d.ts.map

package/dist/types/components/Browser/extractUrlFromSitemap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extractUrlFromSitemap.d.ts","names":[],"sources":["../../../../src/components/Browser/extractUrlFromSitemap.ts"],"mappings":";cAuCa,qBAAA,GACX,OAAA,aACC,OAAO"}

package/dist/types/components/Button/Button.d.ts

@@ -60,11 +60,11 @@ declare enum ButtonTextAlign {
  * Enhanced button variants with improved accessibility and focus states
  */
 declare const buttonVariants: (props?: {
-  size?: "lg" | "md" | "xs" | "sm" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
-  color?: "text" | "primary" | "error" | "custom" | "secondary" | "destructive" | "success" | "neutral" | "light" | "dark" | "card" | "current" | "text-inverse";
-  roundedSize?: "lg" | "none" | "md" | "sm" | "xl" | "2xl" | "3xl" | "full" | "4xl" | "5xl";
-  variant?: "none" | "link" | "default" | "input" | "outline" | "hoverable" | "invisible-link" | "fade";
-  textAlign?: "left" | "right" | "center";
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
+  color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "error" | "custom" | "card" | "current" | "text-inverse" | "success";
+  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "4xl" | "5xl" | "full";
+  variant?: "input" | "none" | "default" | "outline" | "link" | "invisible-link" | "hoverable" | "fade";
+  textAlign?: "left" | "center" | "right";
   isFullWidth?: boolean;
 } & import("class-variance-authority/types").ClassProp) => string;
 /**

package/dist/types/components/CollapsibleTable/CollapsibleTable.d.ts

@@ -4,8 +4,8 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/CollapsibleTable/CollapsibleTable.d.ts
 declare const collapsibleTableVariants: (props?: {
   size?: "sm" | "md" | "lg" | "xl" | "full";
-  variant?: "dark" | "default" | "ghost" | "outlined";
-  spacing?: "none" | "sm" | "md" | "lg" | "auto";
+  variant?: "default" | "ghost" | "dark" | "outlined";
+  spacing?: "sm" | "md" | "lg" | "none" | "auto";
 } & import("class-variance-authority/types").ClassProp) => string;
 interface CollapsibleTableProps extends Omit<HTMLAttributes<HTMLElement>, 'title'>, VariantProps<typeof collapsibleTableVariants> {
   /** Table title displayed in the header */

package/dist/types/components/Command/index.d.ts

@@ -27,7 +27,7 @@ declare const Command: {
     ref?: React.Ref<HTMLInputElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement> | "asChild">, "onChange" | "type" | "value"> & {
+  }, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement> | "asChild">, "type" | "onChange" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
   } & import("react").RefAttributes<HTMLInputElement>>;
@@ -53,7 +53,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;

package/dist/types/components/Container/index.d.ts

@@ -7,14 +7,14 @@ import { VariantProps } from "class-variance-authority";
  * Provides flexible styling options for background, padding, borders, and layout
  */
 declare const containerVariants: (props?: {
-  roundedSize?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full";
-  transparency?: "none" | "sm" | "md" | "lg" | "xl" | "full" | "xs";
-  padding?: "none" | "sm" | "md" | "lg" | "xl" | "2xl";
-  separator?: "without" | "x" | "y" | "both";
-  border?: "none" | "with";
-  borderColor?: "primary" | "secondary" | "neutral" | "card" | "text" | "error" | "warning" | "success";
-  background?: "none" | "with" | "hoverable";
-  gap?: "none" | "sm" | "md" | "lg" | "xl" | "2xl";
+  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "full" | "3xl" | "4xl";
+  transparency?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | "full";
+  padding?: "sm" | "md" | "lg" | "xl" | "2xl" | "none";
+  separator?: "both" | "without" | "x" | "y";
+  border?: "with" | "none";
+  borderColor?: "error" | "success" | "text" | "primary" | "secondary" | "neutral" | "card" | "warning";
+  background?: "with" | "none" | "hoverable";
+  gap?: "sm" | "md" | "lg" | "xl" | "2xl" | "none";
 } & import("class-variance-authority/types").ClassProp) => string;
 /** Available rounded corner sizes for the container */
 declare enum ContainerRoundedSize {

package/dist/types/components/DictionaryFieldEditor/ContentEditorView/TextEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextEditor.d.ts","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx"],"mappings":";;;;;cA6Fa,SAAA;AAAA,KA2ID,eAAA;EACV,UAAA,EAAY,UAAA;EACZ,OAAA,EAAS,OAAA;EACT,OAAA,EAAS,WAAA;EACT,UAAA;EACA,aAAA,IAAiB,OAAA,aAAoB,SAAA;EACrC,eAAA,IAAmB,QAAA;AAAA;AAAA,cAspBR,UAAA,kBAAU,oBAAA,CAAA,eAAA;AAAA,cAmMV,mBAAA,kBAAmB,oBAAA,CAAA,eAAA"}
+{"version":3,"file":"TextEditor.d.ts","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx"],"mappings":";;;;;cA+Fa,SAAA;AAAA,KA2ID,eAAA;EACV,UAAA,EAAY,UAAA;EACZ,OAAA,EAAS,OAAA;EACT,OAAA,EAAS,WAAA;EACT,UAAA;EACA,aAAA,IAAiB,OAAA,aAAoB,SAAA;EACrC,eAAA,IAAmB,QAAA;AAAA;AAAA,cAqsBR,UAAA,kBAAU,oBAAA,CAAA,eAAA;AAAA,cA8MV,mBAAA,kBAAmB,oBAAA,CAAA,eAAA"}

package/dist/types/components/Input/Checkbox.d.ts

@@ -4,8 +4,8 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/Input/Checkbox.d.ts
 declare const checkboxVariants: (props?: {
   variant?: "default";
-  size?: "sm" | "md" | "lg" | "xs";
-  color?: "primary" | "secondary" | "neutral" | "text" | "error" | "success" | "destructive" | "light" | "dark" | "custom" | "text-inverse";
+  size?: "xs" | "sm" | "md" | "lg";
+  color?: "error" | "success" | "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "custom" | "text-inverse";
   validationStyleEnabled?: "enabled" | "disabled";
 } & import("class-variance-authority/types").ClassProp) => string;
 declare enum CheckboxSize {

package/dist/types/components/Link/Link.d.ts

@@ -52,10 +52,10 @@ declare enum LinkUnderlined {
   FALSE = "false"
 }
 declare const linkVariants: (props?: {
-  variant?: "button" | "default" | "hoverable" | "invisible-link" | "button-outlined";
-  roundedSize?: "lg" | "none" | "md" | "sm" | "xl" | "2xl" | "3xl" | "full";
-  color?: "text" | "primary" | "error" | "custom" | "secondary" | "destructive" | "success" | "neutral" | "light" | "dark" | "text-inverse";
-  size?: "lg" | "md" | "sm" | "xl" | "custom";
+  variant?: "default" | "invisible-link" | "hoverable" | "button" | "button-outlined";
+  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full";
+  color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "error" | "custom" | "text-inverse" | "success";
+  size?: "sm" | "md" | "lg" | "xl" | "custom";
   underlined?: boolean | LinkUnderlined.DEFAULT;
 } & import("class-variance-authority/types").ClassProp) => string;
 type LinkProps = DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> & VariantProps<typeof linkVariants> & {

package/dist/types/components/LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LocaleSwitcherContentContext.d.ts","names":[],"sources":["../../../../src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.tsx"],"mappings":";;;;KAcK,iCAAA;EACH,gBAAA,EAAkB,aAAA;EAClB,eAAA,EAAiB,aAAA;EACjB,kBAAA,EAAoB,QAAA,CAAS,cAAA,CAAe,aAAA;AAAA;AAAA,cAUjC,wBAAA,QAAwB,iCACK;AAAA,KAErC,kCAAA;EACH,gBAAA,EAAkB,aAAA;EAClB,sBAAA,GAAyB,aAAa;AAAA;AAAA,cAG3B,6BAAA,EAA+B,EAAA,CAC1C,iBAAA,CAAkB,kCAAA"}
+{"version":3,"file":"LocaleSwitcherContentContext.d.ts","names":[],"sources":["../../../../src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.tsx"],"mappings":";;;;KAeK,iCAAA;EACH,gBAAA,EAAkB,aAAA;EAClB,eAAA,EAAiB,aAAA;EACjB,kBAAA,EAAoB,QAAA,CAAS,cAAA,CAAe,aAAA;AAAA;AAAA,cAUjC,wBAAA,QAAwB,iCACK;AAAA,KAErC,kCAAA;EACH,gBAAA,EAAkB,aAAA;EAClB,sBAAA,GAAyB,aAAa;AAAA;AAAA,cAG3B,6BAAA,EAA+B,EAAA,CAC1C,iBAAA,CAAkB,kCAAA"}

package/dist/types/components/Pagination/Pagination.d.ts

@@ -4,8 +4,8 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/Pagination/Pagination.d.ts
 declare const paginationVariants: (props?: {
   size?: "sm" | "md" | "lg";
-  color?: "primary" | "secondary" | "neutral" | "text" | "destructive";
-  variant?: "default" | "ghost" | "bordered";
+  color?: "text" | "primary" | "secondary" | "destructive" | "neutral";
+  variant?: "default" | "bordered" | "ghost";
 } & import("class-variance-authority/types").ClassProp) => string;
 declare enum PaginationSize {
   SM = "sm",

package/dist/types/components/SwitchSelector/SwitchSelector.d.ts

@@ -40,7 +40,7 @@ declare const switchSelectorVariant: (props?: {
   disabled?: boolean;
 } & import("class-variance-authority/types").ClassProp) => string;
 declare const choiceVariant: (props?: {
-  size?: "lg" | "md" | "xs" | "sm";
+  size?: "xs" | "sm" | "md" | "lg";
 } & import("class-variance-authority/types").ClassProp) => string;
 declare const indicatorVariant: (props?: {
   color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark";

package/dist/types/components/SwitchSelector/VerticalSwitchSelector.d.ts

@@ -7,7 +7,7 @@ declare const verticalSwitchSelectorVariant: (props?: {
   disabled?: boolean;
 } & import("class-variance-authority/types").ClassProp) => string;
 declare const verticalChoiceVariant: (props?: {
-  size?: "lg" | "md" | "sm";
+  size?: "sm" | "md" | "lg";
 } & import("class-variance-authority/types").ClassProp) => string;
 type VerticalSwitchSelectorProps<T = boolean> = SwitchSelectorBaseProps<T> & VariantProps<typeof verticalSwitchSelectorVariant> & VariantProps<typeof verticalChoiceVariant>;
 /**

package/dist/types/components/Tab/Tab.d.ts

@@ -3,8 +3,8 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/Tab/Tab.d.ts
 declare const tabContainerVariant: (props?: {
-  background?: "without" | "with";
-  variant?: "default" | "ghost" | "bordered";
+  background?: "with" | "without";
+  variant?: "default" | "bordered" | "ghost";
 } & import("class-variance-authority/types").ClassProp) => string;
 type TabProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof tabContainerVariant> & {
   defaultTab?: string;

package/dist/types/components/TabSelector/TabSelector.d.ts

@@ -13,7 +13,7 @@ declare enum TabSelectorColor {
   TEXT = "text"
 }
 declare const tabSelectorVariant: (props?: {
-  color?: "primary" | "secondary" | "neutral" | "text" | "destructive" | "light" | "dark";
+  color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark";
 } & import("class-variance-authority/types").ClassProp) => string;
 type TabSelectorItemProps = HTMLAttributes<HTMLElement> & {
   key: string | number;

package/dist/types/components/Tag/index.d.ts

@@ -184,9 +184,9 @@ declare enum TagBackground {
   WITH = "with"
 }
 declare const containerVariants: (props?: {
-  roundedSize?: "lg" | "none" | "md" | "sm" | "xl" | "2xl" | "3xl" | "full";
-  color?: "text" | "primary" | "error" | "success" | "neutral" | "warning" | "blue" | "yellow" | "green" | "red" | "orange" | "purple" | "pink" | "brown" | "gray" | "black" | "white";
-  size?: "lg" | "md" | "xs" | "sm" | "xl";
+  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full";
+  color?: "text" | "primary" | "neutral" | "error" | "success" | "warning" | "blue" | "yellow" | "green" | "red" | "orange" | "purple" | "pink" | "brown" | "gray" | "black" | "white";
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
   border?: "none" | "with";
   background?: "none" | "with";
 } & import("class-variance-authority/types").ClassProp) => string;

package/dist/types/components/Toaster/Toast.d.ts

@@ -24,7 +24,7 @@ declare const ToastViewport: FC<ComponentProps<typeof ToastPrimitives.Viewport>>
  * ```
  */
 declare const toastVariants: (props?: {
-  variant?: "error" | "success" | "default";
+  variant?: "error" | "default" | "success";
 } & import("class-variance-authority/types").ClassProp) => string;
 /**
  * Toast Component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intlayer/design-system",
-  "version": "8.9.8",
+  "version": "8.10.0-canary.0",
   "private": false,
   "description": "Intlayer design system, including UI components used in the Intlayer editor, website, and visual editor/CMS.",
   "keywords": [
@@ -421,12 +421,12 @@
   "dependencies": {
     "@better-auth/passkey": "1.6.11",
     "@better-auth/sso": "1.6.11",
-    "@intlayer/api": "8.9.8",
-    "@intlayer/config": "8.9.8",
-    "@intlayer/core": "8.9.8",
-    "@intlayer/dictionaries-entry": "8.9.8",
-    "@intlayer/editor-react": "8.9.8",
-    "@intlayer/types": "8.9.8",
+    "@intlayer/api": "8.10.0-canary.0",
+    "@intlayer/config": "8.10.0-canary.0",
+    "@intlayer/core": "8.10.0-canary.0",
+    "@intlayer/dictionaries-entry": "8.10.0-canary.0",
+    "@intlayer/editor-react": "8.10.0-canary.0",
+    "@intlayer/types": "8.10.0-canary.0",
     "@radix-ui/react-dialog": "1.1.15",
     "@radix-ui/react-select": "2.2.6",
     "@radix-ui/react-slot": "1.2.4",
@@ -441,12 +441,12 @@
     "defu": "6.1.7",
     "dompurify": "^3.4.3",
     "isomorphic-dompurify": "^3.13.0",
-    "react-intlayer": "8.9.8",
+    "react-intlayer": "8.10.0-canary.0",
     "rollup-preserve-directives": "1.1.3",
     "zod": "4.4.3"
   },
   "devDependencies": {
-    "@intlayer/backend": "8.9.8",
+    "@intlayer/backend": "8.10.0-canary.0",
     "@shikijs/transformers": "4.0.2",
     "@storybook/addon-a11y": "8.6.14",
     "@storybook/addon-essentials": "8.6.14",
@@ -470,14 +470,14 @@
     "@testing-library/user-event": "14.6.1",
     "@types/dompurify": "^3.2.0",
     "@types/espree": "11.1.0",
-    "@types/node": "25.8.0",
+    "@types/node": "25.9.0",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@utils/ts-config": "1.0.4",
     "@utils/ts-config-types": "1.0.4",
     "clsx": "2.1.1",
     "fast-glob": "3.3.3",
-    "intlayer": "8.9.8",
+    "intlayer": "8.10.0-canary.0",
     "rimraf": "6.1.3",
     "shiki": "4.0.2",
     "storybook": "8.6.17",
@@ -485,26 +485,26 @@
     "tsdown": "0.22.00",
     "typescript": "6.0.3",
     "vite": "8.0.13",
-    "vite-intlayer": "8.9.8",
+    "vite-intlayer": "8.10.0-canary.0",
     "vite-plugin-dts": "5.0.0",
     "vitest": "4.1.6"
   },
   "peerDependencies": {
     "@better-fetch/fetch": "1.1.21",
     "@hookform/resolvers": "5.2.2",
-    "@intlayer/backend": "8.9.8",
+    "@intlayer/backend": "8.10.0-canary.0",
     "@monaco-editor/react": "4.7.0",
     "@shikijs/transformers": "4.0.2",
-    "@tanstack/react-query": "5.100.10",
+    "@tanstack/react-query": "5.100.11",
     "@tanstack/react-query-devtools": "5.100.10",
-    "framer-motion": "12.38.0",
+    "framer-motion": "12.39.0",
     "fuse.js": "7.3.0",
-    "intlayer": "8.9.8",
+    "intlayer": "8.10.0-canary.0",
     "lucide-react": "1.16.0",
     "react": ">=16.0.0",
     "react-dom": ">=16.0.0",
     "react-hook-form": "7.76.0",
-    "react-intlayer": "8.9.8",
+    "react-intlayer": "8.10.0-canary.0",
     "shiki": "4.0.2",
     "tailwindcss": "4.3.0"
   },