@intlayer/design-system 8.9.6 → 8.9.8

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

@@ -115,9 +115,10 @@ const HANDLE_DOUBLE_CLICK_ZONE_PX = 16;
 * - Graceful degradation for older browsers
 * - Mobile-first touch interaction handling
 */
-const WithResizer = ({ initialWidth, maxWidth, minWidth = 0, handlePosition = "right", children }) => {
+const WithResizer = ({ initialWidth, maxWidth, minWidth = 0, handlePosition = "right", children, style, className, isOpen, defaultOpenWidth }) => {
 	const containerRef = useRef(null);
 	const [width, setWidth] = useState(initialWidth);
+	const [isResizing, setIsResizing] = useState(false);
 	const lastExpandedWidthRef = useRef(initialWidth);
 	const resizeState = useRef({
 		startX: 0,
@@ -139,6 +140,7 @@ const WithResizer = ({ initialWidth, maxWidth, minWidth = 0, handlePosition = "r
 		handlePosition
 	]);
 	const stopResizing = useCallback(() => {
+		setIsResizing(false);
 		document.body.style.cursor = "";
 		document.body.style.userSelect = "";
 		window.removeEventListener("mousemove", resize);
@@ -161,6 +163,7 @@ const WithResizer = ({ initialWidth, maxWidth, minWidth = 0, handlePosition = "r
 			startWidth: offsetWidth,
 			factor
 		};
+		setIsResizing(true);
 		document.body.style.cursor = "ew-resize";
 		document.body.style.userSelect = "none";
 		window.addEventListener("mousemove", resize, { passive: true });
@@ -179,6 +182,14 @@ const WithResizer = ({ initialWidth, maxWidth, minWidth = 0, handlePosition = "r
 	useEffect(() => {
 		if (width > minWidth) lastExpandedWidthRef.current = width;
 	}, [width, minWidth]);
+	useEffect(() => {
+		if (isOpen === void 0) return;
+		if (!isOpen) setWidth(0);
+		else {
+			const target = lastExpandedWidthRef.current > 0 ? lastExpandedWidthRef.current : defaultOpenWidth ?? initialWidth;
+			setWidth(Math.max(target, minWidth));
+		}
+	}, [isOpen]);
 	const handleDoubleClick = useCallback((event) => {
 		const el = containerRef.current;
 		if (!el) return;
@@ -198,8 +209,11 @@ const WithResizer = ({ initialWidth, maxWidth, minWidth = 0, handlePosition = "r
 		width
 	]);
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("relative h-full w-full max-w-[80%] shrink-0 cursor-ew-resize border-neutral-200 transition dark:border-neutral-950", handlePosition === "right" ? ["border-r-[2px]", "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"] : ["border-l-[2px]", "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"], "active:border-neutral-400 active:after:bg-neutral-400 dark:active:border-neutral-600 active:dark:after:bg-neutral-600", minWidth && `min-w-[${minWidth}px]`, maxWidth && `max-w-[${maxWidth}px]`),
-		style: { width: `${width}px` },
+		className: cn("relative h-full w-full max-w-[80%] shrink-0 cursor-ew-resize", style && (handlePosition === "right" ? ["border-r-[2px]", "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"] : ["border-l-[2px]", "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"]), style && "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", minWidth && `min-w-[${minWidth}px]`, maxWidth && `max-w-[${maxWidth}px]`, !style && className),
+		style: {
+			width: `${width}px`,
+			transition: isResizing ? "none" : "width 200ms ease-in-out"
+		},
 		ref: containerRef,
 		onMouseDown: startResizing,
 		onTouchStart: startResizing,

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};\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}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(initialWidth);\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    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      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  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 border-neutral-200 transition dark:border-neutral-950',\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        'active:border-neutral-400 active:after:bg-neutral-400 dark:active:border-neutral-600 active:dark:after:bg-neutral-600',\n        minWidth && `min-w-[${minWidth}px]`,\n        maxWidth && `max-w-[${maxWidth}px]`\n      )}\n      style={{\n        width: `${width}px`,\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,\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":";;;;;;;AAYA,MAAM,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiKpC,MAAa,eAAwD,EACnE,cACA,UACA,WAAW,GACX,iBAAiB,SACjB,UACA,OACA,WACA,QACA,uBACI;CACJ,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,CAAC,OAAO,YAAY,SAAS,YAAY;CAC/C,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,MAAM,uBAAuB,OAAO,YAAY;CAEhD,MAAM,cAAc,OAAO;EACzB,QAAQ;EACR,YAAY;EACZ,QAAQ;CACV,CAAC;CAGD,MAAM,SAAS,aACZ,mBAA4C;EAC3C,IAAI,YAAY,QAAQ,eAAe,GAAG;EAE1C,IAAI,UAAU;EACd,IAAI,0BAA0B,YAC5B,UAAU,eAAe;OACpB,IACL,OAAO,eAAe,eACtB,0BAA0B,YAE1B,UAAU,eAAe,QAAQ,GAAG;EAGtC,MAAM,EAAE,QAAQ,YAAY,WAAW,YAAY;EACnD,MAAM,SAAS,UAAU,UAAU;EAGnC,MAAM,WAAW,cADK,mBAAmB,SAAS,CAAC,QAAQ;EAQ3D,SALyB,KAAK,IAC5B,KAAK,IAAI,UAAU,YAAY,QAAQ,GACvC,QAGsB,CAAC;CAC3B,GACA;EAAC;EAAU;EAAU;CAAc,CACrC;CAGA,MAAM,eAAe,kBAAkB;EACrC,cAAc,KAAK;EACnB,SAAS,KAAK,MAAM,SAAS;EAC7B,SAAS,KAAK,MAAM,aAAa;EACjC,OAAO,oBAAoB,aAAa,MAAM;EAC9C,OAAO,oBAAoB,WAAW,YAAY;EAClD,OAAO,oBAAoB,aAAa,MAAM;EAC9C,OAAO,oBAAoB,YAAY,YAAY;CACrD,GAAG,CAAC,MAAM,CAAC;CAGX,MAAM,gBAAgB,aAElB,mBAGG;EACH,eAAe,eAAe;EAC9B,MAAM,YAAY,aAAa;EAE/B,IAAI,CAAC,WAAW;EAEhB,MAAM,EAAE,OAAO,cAAc,UAAU,sBAAsB;EAC7D,MAAM,cAAc,UAAU;EAC9B,MAAM,SAAS,cAAc,IAAI,YAAY,cAAc;EAE3D,IAAI,UAAU;EACd,IAAI,aAAa,gBACf,UAAU,eAAe,QAAQ,GAAG;OAEpC,UAAU,eAAe;EAG3B,YAAY,UAAU;GACpB,QAAQ;GACR,YAAY;GACZ;EACF;EAEA,cAAc,IAAI;EAClB,SAAS,KAAK,MAAM,SAAS;EAC7B,SAAS,KAAK,MAAM,aAAa;EAEjC,OAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,KAAK,CAAC;EAC9D,OAAO,iBAAiB,WAAW,YAAY;EAC/C,OAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,KAAK,CAAC;EAC9D,OAAO,iBAAiB,YAAY,YAAY;CAClD,GACA,CAAC,QAAQ,YAAY,CACvB;CAEA,gBAAgB;EACd,aAAa;GACX,OAAO,oBAAoB,aAAa,MAAM;GAC9C,OAAO,oBAAoB,WAAW,YAAY;GAClD,OAAO,oBAAoB,aAAa,MAAM;GAC9C,OAAO,oBAAoB,YAAY,YAAY;EACrD;CACF,GAAG,CAAC,QAAQ,YAAY,CAAC;CAEzB,gBAAgB;EACd,IAAI,QAAQ,UACV,qBAAqB,UAAU;CAEnC,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,gBAAgB;EACd,IAAI,WAAW,QAAW;EAC1B,IAAI,CAAC,QACH,SAAS,CAAC;OACL;GACL,MAAM,SACJ,qBAAqB,UAAU,IAC3B,qBAAqB,UACpB,oBAAoB;GAC3B,SAAS,KAAK,IAAI,QAAQ,QAAQ,CAAC;EACrC;CACF,GAAG,CAAC,MAAM,CAAC;CAEX,MAAM,oBAAoB,aACvB,UAA4C;EAC3C,MAAM,KAAK,aAAa;EACxB,IAAI,CAAC,IAAI;EAET,MAAM,EAAE,MAAM,UAAU,GAAG,sBAAsB;EAMjD,IAAI,EAJF,mBAAmB,UACf,QAAQ,MAAM,WAAW,8BACzB,MAAM,UAAU,QAAQ,8BAEX;EAEnB,MAAM,eAAe;EACrB,MAAM,gBAAgB;EAEtB,IAAI,QAAQ,UAAU;GACpB,SAAS,QAAQ;GACjB;EACF;EAMA,SAJe,KAAK,IAClB,KAAK,IAAI,qBAAqB,SAAS,QAAQ,GAC/C,YAAY,QAEA,CAAC;CACjB,GACA;EAAC;EAAgB;EAAU;EAAU;CAAK,CAC5C;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,GACT,gEACA,UACG,mBAAmB,UAChB,CACE,kBACA,yQACF,IACA,CACE,kBACA,yQACF,IACN,SACE,+KACF,YAAY,UAAU,SAAS,MAE/B,YAAY,UAAU,SAAS,MAC/B,CAAC,SAAS,SACZ;EACA,OAAO;GACL,OAAO,GAAG,MAAM;GAChB,YAAY,aAAa,SAAS;EACpC;EACA,KAAK;EACL,aAAa;EACb,cAAc;EACd,eAAe;EACf,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAW;EACX,MAAK;EACL,UAAU;YAGV,oBAAC,OAAD;GACE,MAAK;GACL,WAAU;GACV,cAAc,MAAM,EAAE,gBAAgB;GACtC,eAAe,MAAM,EAAE,gBAAgB;GAEtC;EACE;CACF;AAET"}

package/dist/esm/components/index.mjs

@@ -1,4 +1,4 @@
-import { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "./Toaster/Toast.mjs";
+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";
@@ -117,4 +117,4 @@ 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, traceKeys, useContentEditable, useCopyToClipboard, useForm, useFormField, useLocaleSwitcherContent, usePasswordManagerBadge, usePrevious, useRightDrawer, useToast, useVersionSwitcher };
+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 };

package/dist/esm/hooks/index.mjs

@@ -5,7 +5,7 @@ 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, 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, useUnselectOrganization, useUnselectProject, useUnsubscribeFromNewsletter, useUpdateDictionary, useUpdateOrganization, useUpdateOrganizationMembers, useUpdateOrganizationMembersById, useUpdateProject, useUpdateProjectMembers, useUpdateShowcaseProject, useUpdateTag, useUpdateUser, useVerifyBackupCode, useVerifyEmail, useVerifyTotp, useWriteDictionary } from "./reactQuery.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 { useGetElementById } from "./useGetElementById.mjs";
 import { useGetElementOrWindow } from "./useGetElementOrWindow.mjs";
@@ -19,4 +19,4 @@ import { useScrollDetection } from "./useScrollDetection.mjs";
 import { useScrollY } from "./useScrollY.mjs";
 import { useSearch } from "./useSearch.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, 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, useUnselectOrganization, useUnselectProject, useUnsubscribeFromNewsletter, useUpdateDictionary, useUpdateOrganization, useUpdateOrganizationMembers, useUpdateOrganizationMembersById, useUpdateProject, useUpdateProjectMembers, useUpdateShowcaseProject, useUpdateTag, useUpdateUser, useUser, useVerifyBackupCode, useVerifyEmail, useVerifyTotp, useWriteDictionary };
+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/esm/hooks/reactQuery.mjs

@@ -46,6 +46,35 @@ const useLogin = () => {
 		}
 	});
 };
+const useListAccounts = () => {
+	const intlayerAuth = useIntlayerAuth();
+	return useQuery({
+		queryKey: ["listAccounts"],
+		queryFn: () => intlayerAuth.listAccounts()
+	});
+};
+const useUnlinkAccount = () => {
+	const intlayerAuth = useIntlayerAuth();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationKey: ["unlinkAccount"],
+		mutationFn: (args) => intlayerAuth.unlinkAccount(args),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["listAccounts"] });
+		}
+	});
+};
+const useLinkSocial = () => {
+	const intlayerAuth = useIntlayerAuth();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationKey: ["linkSocial"],
+		mutationFn: (args) => intlayerAuth.linkSocial(args),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["listAccounts"] });
+		}
+	});
+};
 const useGetVerifyEmailStatus = () => {
 	const intlayerAuth = useIntlayerAuth();
 	return useMutation({
@@ -251,6 +280,14 @@ const useDeleteUser = () => {
 		meta: { invalidateQueries: [["users"]] }
 	});
 };
+const useUploadUserAvatar = () => {
+	const intlayerOAuth = useIntlayerOAuth();
+	return useMutation({
+		mutationKey: ["users", "avatar"],
+		mutationFn: (file) => intlayerOAuth.user.uploadAvatar(file),
+		meta: { invalidateQueries: [["session"]] }
+	});
+};
 /**
 * Organization
 */
@@ -524,25 +561,25 @@ const useTriggerWebhook = () => {
 const useAddNewAccessKey = () => {
 	const intlayerOAuth = useIntlayerOAuth();
 	return useMutation({
-		mutationKey: ["projects"],
+		mutationKey: ["session", "access-keys"],
 		mutationFn: (args) => intlayerOAuth.project.addNewAccessKey(args),
-		meta: { invalidateQueries: [["projects"]] }
+		meta: { invalidateQueries: [["session"]] }
 	});
 };
 const useDeleteAccessKey = () => {
 	const intlayerOAuth = useIntlayerOAuth();
 	return useMutation({
-		mutationKey: ["projects"],
+		mutationKey: ["session", "access-keys"],
 		mutationFn: (args) => intlayerOAuth.project.deleteAccessKey(args),
-		meta: { invalidateQueries: [["projects"]] }
+		meta: { invalidateQueries: [["session"]] }
 	});
 };
 const useRefreshAccessKey = () => {
 	const intlayerOAuth = useIntlayerOAuth();
 	return useMutation({
-		mutationKey: ["projects"],
+		mutationKey: ["session", "access-keys"],
 		mutationFn: (args) => intlayerOAuth.project.refreshAccessKey(args),
-		meta: { invalidateQueries: [["projects"]] }
+		meta: { invalidateQueries: [["session"]] }
 	});
 };
 /**
@@ -1146,5 +1183,5 @@ const useResumeTranslationJob = () => {
 };
 
 //#endregion
-export { 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, 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, useUnselectOrganization, useUnselectProject, useUnsubscribeFromNewsletter, useUpdateDictionary, useUpdateOrganization, useUpdateOrganizationMembers, useUpdateOrganizationMembersById, useUpdateProject, useUpdateProjectMembers, useUpdateShowcaseProject, useUpdateTag, useUpdateUser, useVerifyBackupCode, useVerifyEmail, useVerifyTotp, useWriteDictionary };
+export { 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 };
 //# sourceMappingURL=reactQuery.mjs.map