@intlayer/design-system 6.1.6 → 7.0.0-canary.1

package/dist/esm/components/Toaster/useToast.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.mjs","names":["toast","listeners: ((state: State) => void)[]","memoryState: State","props"],"sources":["../../../../src/components/Toaster/useToast.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode, useEffect, useState } from 'react';\nimport type { ToastActionElement, ToastProps } from './Toast';\n\n/**\n * Maximum number of toasts that can be displayed simultaneously.\n * Prevents UI overflow and maintains clean notification experience.\n */\nconst TOAST_LIMIT = 1;\n\n/**\n * Delay before automatically removing dismissed toasts from memory.\n * Set to 15 minutes (900,000ms) to allow for potential undo actions.\n */\nconst TOAST_REMOVE_DELAY = 15 * 60 * 1000; // 15 seconds\n\n/**\n * Extended toast configuration with additional properties for the toast system.\n *\n * Combines base ToastProps with specific fields needed for toast management\n * including unique identification and content elements.\n *\n * @example\n * ```tsx\n * const toast: ToasterToast = {\n *   id: '1',\n *   variant: 'success',\n *   title: 'Success!',\n *   description: 'Your action completed successfully.',\n *   action: <ToastAction altText=\"View details\">View</ToastAction>\n * };\n * ```\n */\ntype ToasterToast = ToastProps & {\n  /** Unique identifier for the toast instance */\n  id: string;\n  /** Optional title text or React element */\n  title?: ReactNode;\n  /** Optional description text or React element */\n  description?: ReactNode;\n  /** Optional action button element */\n  action?: ToastActionElement;\n};\n\n/**\n * Action types for toast state management using reducer pattern.\n *\n * Defines all possible actions that can be performed on the toast state,\n * enabling predictable state updates and better debugging.\n */\nenum ActionTypes {\n  /** Add a new toast to the display queue */\n  ADD_TOAST = 'ADD_TOAST',\n  /** Update properties of an existing toast */\n  UPDATE_TOAST = 'UPDATE_TOAST',\n  /** Mark a toast as dismissed (triggers exit animation) */\n  DISMISS_TOAST = 'DISMISS_TOAST',\n  /** Completely remove a toast from memory */\n  REMOVE_TOAST = 'REMOVE_TOAST',\n}\n\nlet count = 0;\n\nconst genId = () => {\n  count = (count + 1) % Number.MAX_SAFE_INTEGER;\n  return count.toString();\n};\n\ntype Action =\n  | {\n      type: ActionTypes.ADD_TOAST;\n      toast: ToasterToast;\n    }\n  | {\n      type: ActionTypes.UPDATE_TOAST;\n      toast: Partial<ToasterToast>;\n    }\n  | {\n      type: ActionTypes.DISMISS_TOAST;\n      toastId?: ToasterToast['id'];\n    }\n  | {\n      type: ActionTypes.REMOVE_TOAST;\n      toastId?: ToasterToast['id'];\n    };\n\ntype State = {\n  toasts: ToasterToast[];\n};\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n\nconst addToRemoveQueue = (toastId: string) => {\n  if (toastTimeouts.has(toastId)) {\n    return;\n  }\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId);\n    dispatch({\n      type: ActionTypes.REMOVE_TOAST,\n      toastId: toastId,\n    });\n  }, TOAST_REMOVE_DELAY);\n\n  toastTimeouts.set(toastId, timeout);\n};\n\n/**\n * Toast state reducer function that handles all toast state transitions.\n *\n * Implements predictable state updates using the reducer pattern, ensuring\n * consistent behavior across all toast operations.\n *\n * ## State Management\n * - **ADD_TOAST**: Adds new toast and enforces limit by removing excess toasts\n * - **UPDATE_TOAST**: Updates existing toast properties while preserving identity\n * - **DISMISS_TOAST**: Marks toasts as closed and schedules removal\n * - **REMOVE_TOAST**: Permanently removes toasts from state\n *\n * ## Side Effects\n * The DISMISS_TOAST action includes side effects for scheduling toast removal,\n * which could be extracted but is kept here for simplicity.\n *\n * @param state - Current toast state\n * @param action - Action to perform on the state\n * @returns Updated toast state\n *\n * @example\n * ```tsx\n * // Add a new toast\n * const newState = reducer(state, {\n *   type: ActionTypes.ADD_TOAST,\n *   toast: { id: '1', title: 'Hello', variant: 'default' }\n * });\n *\n * // Dismiss a specific toast\n * const dismissedState = reducer(state, {\n *   type: ActionTypes.DISMISS_TOAST,\n *   toastId: '1'\n * });\n * ```\n */\nexport const reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case ActionTypes.ADD_TOAST:\n      return {\n        ...state,\n        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n      };\n\n    case ActionTypes.UPDATE_TOAST:\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === action.toast.id ? { ...t, ...action.toast } : t\n        ),\n      };\n\n    case ActionTypes.DISMISS_TOAST: {\n      const { toastId } = action;\n\n      // ! Side effects ! - This could be extracted into a dismissToast() action,\n      // but I'll keep it here for simplicity\n      if (toastId) {\n        addToRemoveQueue(toastId);\n      } else {\n        state.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id);\n        });\n      }\n\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === toastId || toastId === undefined\n            ? {\n                ...t,\n                open: false,\n              }\n            : t\n        ),\n      };\n    }\n    case ActionTypes.REMOVE_TOAST:\n      if (action.toastId === undefined) {\n        return {\n          ...state,\n          toasts: [],\n        };\n      }\n      return {\n        ...state,\n        toasts: state.toasts.filter((t) => t.id !== action.toastId),\n      };\n  }\n};\n\nconst listeners: ((state: State) => void)[] = [];\n\nlet memoryState: State = { toasts: [] };\n\nconst dispatch = (action: Action) => {\n  memoryState = reducer(memoryState, action);\n  listeners.forEach((listener) => {\n    listener(memoryState);\n  });\n};\n\n/**\n * Toast configuration type for creating new toasts.\n * Omits the 'id' field as it's automatically generated.\n */\ntype Toast = Omit<ToasterToast, 'id'>;\n\n/**\n * Creates and displays a new toast notification.\n *\n * This is the primary function for showing toast notifications to users.\n * It automatically generates unique IDs, handles state updates, and provides\n * control functions for managing the toast lifecycle.\n *\n * ## Features\n * - **Automatic ID Generation**: Each toast gets a unique identifier\n * - **State Management**: Integrates with global toast state\n * - **Lifecycle Control**: Returns functions to update or dismiss the toast\n * - **Auto-dismiss**: Automatically closes when user dismisses\n *\n * ## Return Value\n * Returns an object with control functions:\n * - `id`: Unique identifier for the toast\n * - `dismiss()`: Function to manually dismiss the toast\n * - `update()`: Function to update toast properties\n *\n * @param props - Toast configuration (title, description, variant, etc.)\n * @returns Object with toast ID and control functions\n *\n * @example\n * ```tsx\n * // Basic success toast\n * const { dismiss } = toast({\n *   title: 'Success!',\n *   description: 'Your file was uploaded successfully.',\n *   variant: 'success'\n * });\n *\n * // Error toast with retry action\n * const errorToast = toast({\n *   title: 'Upload Failed',\n *   description: 'Could not upload file. Please try again.',\n *   variant: 'error',\n *   action: <ToastAction altText=\"Retry upload\">Retry</ToastAction>\n * });\n *\n * // Update toast content dynamically\n * errorToast.update({\n *   title: 'Retrying...',\n *   description: 'Please wait while we retry the upload.',\n *   variant: 'default'\n * });\n *\n * // Manually dismiss toast\n * setTimeout(() => errorToast.dismiss(), 5000);\n * ```\n */\nconst toast = ({ ...props }: Toast) => {\n  const id = genId();\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: ActionTypes.UPDATE_TOAST,\n      toast: { ...props, id },\n    });\n  const dismiss = () =>\n    dispatch({ type: ActionTypes.DISMISS_TOAST, toastId: id });\n\n  dispatch({\n    type: ActionTypes.ADD_TOAST,\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open) => {\n        if (!open) dismiss();\n      },\n    },\n  });\n\n  return {\n    id: id,\n    dismiss,\n    update,\n  };\n};\n\n/**\n * React hook for managing toast notifications.\n *\n * Provides access to the global toast state and functions for creating and\n * managing toast notifications. This hook connects components to the toast\n * system and ensures reactive updates when toasts change.\n *\n * ## Features\n * - **State Synchronization**: Automatically updates when toast state changes\n * - **Toast Creation**: Provides the `toast()` function for creating notifications\n * - **Batch Dismissal**: Can dismiss all toasts or specific toasts by ID\n * - **Memory Management**: Handles proper cleanup of listeners\n *\n * ## Return Value\n * - `toasts`: Array of current toast objects\n * - `toast()`: Function to create new toast notifications\n * - `dismiss()`: Function to dismiss toasts (all or by ID)\n *\n * @returns Toast state and control functions\n *\n * @example\n * ```tsx\n * function NotificationButton() {\n *   const { toast, toasts, dismiss } = useToast();\n *\n *   const showSuccess = () => {\n *     toast({\n *       title: 'Success!',\n *       description: 'Operation completed successfully.',\n *       variant: 'success'\n *     });\n *   };\n *\n *   const clearAll = () => {\n *     dismiss(); // Dismisses all toasts\n *   };\n *\n *   return (\n *     <div>\n *       <button onClick={showSuccess}>Show Success</button>\n *       <button onClick={clearAll}>Clear All ({toasts.length})</button>\n *     </div>\n *   );\n * }\n *\n * // Usage in a form component\n * function ContactForm() {\n *   const { toast } = useToast();\n *\n *   const handleSubmit = async (data) => {\n *     try {\n *       await submitForm(data);\n *       toast({\n *         title: 'Form Submitted',\n *         description: 'We\\'ll get back to you soon!',\n *         variant: 'success'\n *       });\n *     } catch (error) {\n *       toast({\n *         title: 'Submission Failed',\n *         description: 'Please check your connection and try again.',\n *         variant: 'error',\n *         action: <ToastAction altText=\"Retry\">Retry</ToastAction>\n *       });\n *     }\n *   };\n *\n *   // ... form JSX\n * }\n * ```\n *\n * ## Usage Notes\n * - Must be used within a component tree that includes `<Toaster />`\n * - Toast state is global - changes affect all components using this hook\n * - Toasts are automatically cleaned up after the configured delay\n * - Consider UX best practices: don't overwhelm users with too many toasts\n */\nconst useToast = () => {\n  const [state, setState] = useState<State>(memoryState);\n\n  useEffect(() => {\n    listeners.push(setState);\n    return () => {\n      const index = listeners.indexOf(setState);\n      if (index > -1) {\n        listeners.splice(index, 1);\n      }\n    };\n  }, [state]);\n\n  return {\n    ...state,\n    toast,\n    dismiss: (toastId?: string) =>\n      dispatch({ type: ActionTypes.DISMISS_TOAST, toastId }),\n  };\n};\n\nexport { toast, useToast };\n"],"mappings":"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"}

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

@@ -0,0 +1,175 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/WithResizer/index.tsx
+/**
+* WithResizer Component
+*
+* A flexible container component that allows users to dynamically resize its width
+* through mouse or touch drag interactions. Perfect for creating adjustable panels,
+* sidebars, and split-pane layouts.
+*
+* ## Features
+* - **Mouse & Touch Support**: Works with both mouse drag and touch interactions
+* - **Constraint Enforcement**: Respects minimum and maximum width boundaries
+* - **Visual Feedback**: Clear resize handle with hover and active states
+* - **Smooth Interactions**: Passive event listeners for optimal performance
+* - **Accessibility**: ARIA slider role with proper value announcements
+* - **Responsive Design**: Adapts to different screen sizes and containers
+*
+* ## Technical Implementation
+* - **Event Handling**: Uses `useCallback` for optimal performance
+* - **Boundary Calculation**: Real-time width calculation based on mouse/touch position
+* - **State Management**: Tracks resizing state for visual feedback
+* - **Memory Management**: Proper cleanup of global event listeners
+* - **Touch Events**: Full support for mobile touch interactions
+*
+* ## Visual Design
+* - **Resize Handle**: Rounded handle positioned on the right border
+* - **Border Indicator**: Visual border showing resizable edge
+* - **State Feedback**: Different colors for normal, hover, and active states
+* - **Dark Mode**: Full support with appropriate color scheme
+* - **Smooth Transitions**: CSS transitions for visual polish
+*
+* ## Use Cases
+* - **Application Sidebars**: Collapsible navigation and tool panels
+* - **Content Panels**: Adjustable content areas in complex layouts
+* - **Split Panes**: Dividing screen space between multiple content areas
+* - **Inspector Panels**: Debugging tools and property inspectors
+* - **File Explorers**: Tree views with adjustable column widths
+* - **Dashboard Widgets**: Customizable widget sizes for dashboards
+*
+* ## Accessibility Features
+* - **ARIA Slider**: Proper slider role for screen readers
+* - **Value Announcements**: Current, minimum, and maximum values announced
+* - **Keyboard Focus**: Focusable with tab navigation
+* - **Clear Affordances**: Visual indicators for interactive elements
+*
+* @example
+* ```tsx
+* // Application sidebar with resizing
+* const [sidebarWidth, setSidebarWidth] = useState(250);
+*
+* <div className="flex h-screen">
+*   <WithResizer
+*     initialWidth={sidebarWidth}
+*     minWidth={200}
+*     maxWidth={400}
+*   >
+*     <aside className="h-full bg-gray-100 p-4">
+*       <nav>
+*         <NavItems />
+*       </nav>
+*     </aside>
+*   </WithResizer>
+*
+*   <main className="flex-1 p-6">
+*     <MainContent />
+*   </main>
+* </div>
+*
+* // Developer tools panel
+* <WithResizer
+*   initialWidth={350}
+*   minWidth={250}
+*   maxWidth={600}
+* >
+*   <div className="h-full flex flex-col">
+*     <div className="flex-1 overflow-auto p-4">
+*       <InspectorContent />
+*     </div>
+*     <div className="border-t p-2">
+*       <Controls />
+*     </div>
+*   </div>
+* </WithResizer>
+*
+* // Multi-column layout
+* <div className="flex h-full">
+*   <WithResizer initialWidth={300} minWidth={200} maxWidth={500}>
+*     <FileExplorer />
+*   </WithResizer>
+*
+*   <WithResizer initialWidth={400} minWidth={300}>
+*     <CodeEditor />
+*   </WithResizer>
+*
+*   <div className="flex-1 min-w-0">
+*     <OutputPanel />
+*   </div>
+* </div>
+* ```
+*
+* ## Performance Considerations
+* - Uses passive event listeners to prevent scroll blocking
+* - Optimized with `useCallback` to prevent unnecessary re-renders
+* - Efficient boundary calculations using `getBoundingClientRect`
+* - Minimal DOM manipulation for smooth drag interactions
+*
+* ## Browser Support
+* - Modern browsers with support for touch events
+* - Graceful degradation for older browsers
+* - Mobile-first touch interaction handling
+*/
+const WithResizer = ({ initialWidth, maxWidth, minWidth = 0, children }) => {
+	const containerRef = useRef(null);
+	const [width, setWidth] = useState(initialWidth);
+	const [isResizing, setIsResizing] = useState(false);
+	const startResizing = useCallback((mouseDownEvent) => {
+		setIsResizing(true);
+		mouseDownEvent.preventDefault();
+	}, []);
+	const stopResizing = useCallback(() => {
+		setIsResizing(false);
+	}, []);
+	const resize = useCallback((mouseMoveEvent) => {
+		const container = containerRef.current;
+		if (isResizing && container && parent) {
+			const { left: containerLeft } = container.getBoundingClientRect();
+			let clientX = 0;
+			if (mouseMoveEvent instanceof MouseEvent) clientX = mouseMoveEvent.clientX;
+			else if (mouseMoveEvent instanceof TouchEvent) clientX = mouseMoveEvent.touches[0].clientX;
+			const newWidth = clientX - containerLeft;
+			setWidth(Math.max(newWidth, 0));
+		}
+	}, [isResizing]);
+	useEffect(() => {
+		window.addEventListener("mousemove", resize, { passive: true });
+		window.addEventListener("mouseup", stopResizing);
+		window.addEventListener("touchmove", resize, { passive: true });
+		window.addEventListener("touchend", stopResizing);
+		return () => {
+			window.removeEventListener("mousemove", resize);
+			window.removeEventListener("mouseup", stopResizing);
+			window.removeEventListener("touchmove", resize);
+			window.removeEventListener("touchend", stopResizing);
+		};
+	}, [resize, stopResizing]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(minWidth && `max-w-[${maxWidth}px]`, maxWidth && `min-w-[${minWidth}px]`, "relative h-full w-full max-w-[80%] cursor-ew-resize border-neutral-200 border-r-[2px] transition dark:border-neutral-950", "after:-translate-y-1/2 after:absolute after:top-1/2 after:right-0 after:block after:h-10 after:w-2 after:translate-x-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"),
+		style: { width: `${width}px` },
+		ref: containerRef,
+		onMouseDown: startResizing,
+		onTouchStart: startResizing,
+		"aria-valuemin": minWidth,
+		"aria-valuemax": maxWidth,
+		"aria-valuenow": width,
+		"aria-label": "Resizable component",
+		role: "slider",
+		tabIndex: 0,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "absolute top-0 left-0 size-full cursor-default overflow-hidden",
+			onMouseDown: (e) => e.stopPropagation(),
+			onTouchStart: (e) => e.stopPropagation(),
+			children
+		})
+	});
+};
+
+//#endregion
+export { WithResizer };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["WithResizer: FC<PropsWithChildren<WithResizerProps>>"],"sources":["../../../../src/components/WithResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  type FC,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\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};\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  children,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(initialWidth);\n  const [isResizing, setIsResizing] = useState(false);\n\n  // Handler to start resizing\n  const startResizing = useCallback(\n    (\n      mouseDownEvent:\n        | React.MouseEvent<HTMLDivElement>\n        | React.TouchEvent<HTMLDivElement>\n    ) => {\n      setIsResizing(true);\n      mouseDownEvent.preventDefault();\n    },\n    []\n  );\n\n  // Handler to stop resizing\n  const stopResizing = useCallback(() => {\n    setIsResizing(false);\n  }, []);\n\n  // Handler to resize the div\n  const resize = useCallback(\n    (mouseMoveEvent: MouseEvent | TouchEvent) => {\n      const container = containerRef.current;\n      if (isResizing && container && parent) {\n        const { left: containerLeft } = container.getBoundingClientRect();\n\n        let clientX = 0;\n        if (mouseMoveEvent instanceof MouseEvent) {\n          clientX = mouseMoveEvent.clientX;\n        } else if (mouseMoveEvent instanceof TouchEvent) {\n          clientX = mouseMoveEvent.touches[0].clientX;\n        }\n\n        const newWidth = clientX - containerLeft;\n        const correctedWidth = Math.max(newWidth, 0);\n\n        setWidth(correctedWidth);\n      }\n    },\n    [isResizing]\n  );\n\n  // Add event listeners for mouse move and mouse up\n  useEffect(() => {\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    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  return (\n    <div\n      className={cn(\n        minWidth && `max-w-[${maxWidth}px]`,\n        maxWidth && `min-w-[${minWidth}px]`,\n        'relative h-full w-full max-w-[80%] cursor-ew-resize border-neutral-200 border-r-[2px] transition dark:border-neutral-950',\n        'after:-translate-y-1/2 after:absolute after:top-1/2 after:right-0 after:block after:h-10 after:w-2 after:translate-x-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        'active:border-neutral-400 active:after:bg-neutral-400 dark:active:border-neutral-600 active:dark:after:bg-neutral-600'\n      )}\n      style={{\n        width: `${width}px`,\n      }}\n      ref={containerRef}\n      onMouseDown={startResizing}\n      onTouchStart={startResizing}\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      <div\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiKA,MAAaA,eAAwD,EACnE,cACA,UACA,WAAW,GACX,eACI;CACJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAChD,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAGnD,MAAM,gBAAgB,aAElB,mBAGG;AACH,gBAAc,KAAK;AACnB,iBAAe,gBAAgB;IAEjC,EAAE,CACH;CAGD,MAAM,eAAe,kBAAkB;AACrC,gBAAc,MAAM;IACnB,EAAE,CAAC;CAGN,MAAM,SAAS,aACZ,mBAA4C;EAC3C,MAAM,YAAY,aAAa;AAC/B,MAAI,cAAc,aAAa,QAAQ;GACrC,MAAM,EAAE,MAAM,kBAAkB,UAAU,uBAAuB;GAEjE,IAAI,UAAU;AACd,OAAI,0BAA0B,WAC5B,WAAU,eAAe;YAChB,0BAA0B,WACnC,WAAU,eAAe,QAAQ,GAAG;GAGtC,MAAM,WAAW,UAAU;AAG3B,YAFuB,KAAK,IAAI,UAAU,EAAE,CAEpB;;IAG5B,CAAC,WAAW,CACb;AAGD,iBAAgB;AACd,SAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAC;AAC/D,SAAO,iBAAiB,WAAW,aAAa;AAChD,SAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAC;AAC/D,SAAO,iBAAiB,YAAY,aAAa;AAEjD,eAAa;AACX,UAAO,oBAAoB,aAAa,OAAO;AAC/C,UAAO,oBAAoB,WAAW,aAAa;AACnD,UAAO,oBAAoB,aAAa,OAAO;AAC/C,UAAO,oBAAoB,YAAY,aAAa;;IAErD,CAAC,QAAQ,aAAa,CAAC;AAE1B,QACE,oBAAC;EACC,WAAW,GACT,YAAY,UAAU,SAAS,MAC/B,YAAY,UAAU,SAAS,MAC/B,4HACA,2QACA,wHACD;EACD,OAAO,EACL,OAAO,GAAG,MAAM,KACjB;EACD,KAAK;EACL,aAAa;EACb,cAAc;EACd,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAW;EACX,MAAK;EACL,UAAU;YAEV,oBAAC;GACC,WAAU;GACV,cAAc,MAAM,EAAE,iBAAiB;GACvC,eAAe,MAAM,EAAE,iBAAiB;GAEvC;IACG;GACF"}

package/dist/esm/components/index.mjs

@@ -0,0 +1,91 @@
+import { Loader } from "./Loader/index.mjs";
+import { Button, ButtonColor, ButtonIconPosition, ButtonSize, ButtonTextAlign, ButtonVariant } from "./Button/Button.mjs";
+import { MaxHeightSmoother } from "./MaxHeightSmoother/index.mjs";
+import { Accordion } from "./Accordion/Accordion.mjs";
+import { Avatar, getCapitals } from "./Avatar/index.mjs";
+import { Badge, BadgeColor, BadgeSize, BadgeVariant, badgeVariants } from "./Badge/index.mjs";
+import { Link, LinkColor, LinkUnderlined, LinkVariant, checkIsExternalLink, linkVariants } from "./Link/Link.mjs";
+import { Breadcrumb } from "./Breadcrumb/index.mjs";
+import { ClickOutsideDiv } from "./ClickOutsideDiv/index.mjs";
+import { CollapsibleTable } from "./CollapsibleTable/CollapsibleTable.mjs";
+import { Command, CommandRoot } from "./Command/index.mjs";
+import { Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, containerVariants } from "./Container/index.mjs";
+import { PressableSpan } from "./PressableSpan/PressableSpan.mjs";
+import { ContentSelector } from "./ContentSelector/ContentSelector.mjs";
+import { CopyButton } from "./CopyButton/index.mjs";
+import { CopyToClipboard } from "./CopyToClipboard/index.mjs";
+import { H1, H2, H3, H4, H5, H6 } from "./Headers/index.mjs";
+import { Modal, ModalSize } from "./Modal/Modal.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";
+import { SearchInput } from "./Input/SearchInput.mjs";
+import { EditableFieldInput } from "./EditableField/EditableFieldInput.mjs";
+import { useFormField } from "./Form/FormField.mjs";
+import { InformationTag } from "./InformationTag/index.mjs";
+import { Label } from "./Label/index.mjs";
+import { TextArea } from "./TextArea/TextArea.mjs";
+import { AutoSizedTextArea } from "./TextArea/AutoSizeTextArea.mjs";
+import { AutoCompleteTextarea, useDebounce } from "./TextArea/AutocompleteTextArea.mjs";
+import { EditableFieldTextArea } from "./EditableField/EditableFieldTextArea.mjs";
+import { MultiSelect } from "./Select/Multiselect.mjs";
+import { Select, SelectContent, SelectContentPosition, SelectLabel, SelectSeparator } from "./Select/Select.mjs";
+import { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize } from "./SwitchSelector/index.mjs";
+import { useForm } from "./Form/FormBase.mjs";
+import { Form } from "./Form/Form.mjs";
+import { DictionaryEditor } from "./DictionaryEditor/DictionaryEditor.mjs";
+import { DictionaryCreationForm } from "./DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.mjs";
+import { DropDown, DropDownAlign } from "./DropDown/index.mjs";
+import { LocaleSwitcherContentProvider, useLocaleSwitcherContent } from "./LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
+import { LocaleSwitcherContent } from "./LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs";
+import { ExpandCollapse } from "./ExpandCollapse/ExpandCollapse.mjs";
+import { Popover, PopoverXAlign, PopoverYAlign } from "./Popover/index.mjs";
+import { Code } from "./IDE/Code.mjs";
+import { TabSelector, TabSelectorColor } from "./TabSelector/TabSelector.mjs";
+import { Tab } from "./Tab/Tab.mjs";
+import { Table } from "./Table/Table.mjs";
+import { MarkdownRenderer } from "./MarkDownRender/MarkDownRender.mjs";
+import { DictionaryFieldEditor } from "./DictionaryFieldEditor/DictionaryFieldEditor.mjs";
+import { VersionSwitcherProvider, useVersionSwitcher } from "./DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcherContext.mjs";
+import { VersionSwitcher } from "./DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.mjs";
+import { Flag } from "./Flags/Flag.mjs";
+import { Logo } from "./Logo/Logo.mjs";
+import { LogoTextOnly } from "./Logo/LogoTextOnly.mjs";
+import { LogoWithText } from "./Logo/LogoWithText.mjs";
+import { LogoWithTextBelow } from "./Logo/LogoWithTextBelow.mjs";
+import { DiscordLogo } from "./SocialNetworks/DiscordLogo.mjs";
+import { FacebookLogo } from "./SocialNetworks/FacebookLogo.mjs";
+import { InstagramLogo } from "./SocialNetworks/InstagramLogo.mjs";
+import { LinkedInLogo } from "./SocialNetworks/LinkedInLogo.mjs";
+import { ProductHuntLogo } from "./SocialNetworks/ProductHuntLogo.mjs";
+import { TiktokLogo } from "./SocialNetworks/TiktokLogo.mjs";
+import { XLogo } from "./SocialNetworks/XLogo.mjs";
+import { YoutubeLogo } from "./SocialNetworks/YoutubeLogo.mjs";
+import { SocialNetworks } from "./SocialNetworks/index.mjs";
+import { Footer } from "./Footer/index.mjs";
+import { HeightResizer } from "./HeightResizer/index.mjs";
+import { HideShow } from "./HideShow/index.mjs";
+import { FileList } from "./IDE/FileList.mjs";
+import { WithResizer } from "./WithResizer/index.mjs";
+import { IDE } from "./IDE/IDE.mjs";
+import { KeyboardScreenAdapter } from "./KeyboardScreenAdapter/index.mjs";
+import { LocaleSwitcher } from "./LocaleSwitcherDropDown/LocaleSwitcher.mjs";
+import { MaxWidthSmoother } from "./MaxWidthSmoother/index.mjs";
+import { Navbar } from "./Navbar/index.mjs";
+import { NumberItemsSelector } from "./Pagination/NumberItemsSelector.mjs";
+import { Pagination, PaginationSize, PaginationVariant, paginationVariants } from "./Pagination/Pagination.mjs";
+import { ShowingResultsNumberItems } from "./Pagination/ShowingResultsNumberItems.mjs";
+import { DotPattern } from "./Pattern/DotPattern.mjs";
+import { GridPattern } from "./Pattern/GridPattern.mjs";
+import { Spotlight } from "./Pattern/SpotLight.mjs";
+import { useRightDrawerStore } from "./RightDrawer/useRightDrawerStore.mjs";
+import { RightDrawer } from "./RightDrawer/RightDrawer.mjs";
+import { Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize } from "./Tag/index.mjs";
+import { Modes } from "./ThemeSwitcherDropDown/types.mjs";
+import { DesktopThemeSwitcher } from "./ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs";
+import { MobileThemeSwitcher } from "./ThemeSwitcherDropDown/MobileThemeSwitcher.mjs";
+import { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "./Toaster/Toast.mjs";
+import { reducer, toast, useToast } from "./Toaster/useToast.mjs";
+import { Toaster } from "./Toaster/Toaster.mjs";
+
+export { Accordion, AutoCompleteTextarea, AutoSizedTextArea, Avatar, Badge, BadgeColor, BadgeSize, BadgeVariant, Breadcrumb, Button, ButtonColor, ButtonIconPosition, ButtonSize, ButtonTextAlign, ButtonVariant, Checkbox, CheckboxColor, CheckboxSize, ClickOutsideDiv, Code, CollapsibleTable, Command, CommandRoot, Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, ContentSelector, CopyButton, CopyToClipboard, DesktopThemeSwitcher, DictionaryCreationForm, DictionaryEditor, DictionaryFieldEditor, DiscordLogo, DotPattern, DropDown, DropDownAlign, EditableFieldInput, EditableFieldTextArea, ExpandCollapse, FacebookLogo, FileList, Flag, Footer, Form, GridPattern, H1, H2, H3, H4, H5, H6, HeightResizer, HideShow, IDE, InformationTag, Input, InputPassword, InputSize, InputVariant, InstagramLogo, KeyboardScreenAdapter, Label, Link, LinkColor, LinkUnderlined, LinkVariant, LinkedInLogo, Loader, LocaleSwitcher, LocaleSwitcherContent, LocaleSwitcherContentProvider, Logo, LogoTextOnly, LogoWithText, LogoWithTextBelow, MarkdownRenderer, MaxHeightSmoother, MaxWidthSmoother, MobileThemeSwitcher, Modal, ModalSize, Modes, MultiSelect, Navbar, NumberItemsSelector, Pagination, PaginationSize, PaginationVariant, Popover, PopoverXAlign, PopoverYAlign, PressableSpan, ProductHuntLogo, RightDrawer, SearchInput, Select, SelectContent, SelectContentPosition, SelectLabel, SelectSeparator, ShowingResultsNumberItems, SocialNetworks, Spotlight, SwitchSelector, SwitchSelectorColor, SwitchSelectorSize, Tab, TabSelector, TabSelectorColor, Table, Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize, TextArea, TiktokLogo, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, VersionSwitcher, VersionSwitcherProvider, WithResizer, XLogo, YoutubeLogo, badgeVariants, checkIsExternalLink, checkboxVariants, containerVariants, getCapitals, inputVariants, linkVariants, paginationVariants, reducer, toast, useDebounce, useForm, useFormField, useLocaleSwitcherContent, useRightDrawerStore, useToast, useVersionSwitcher };

package/dist/esm/hooks/index.mjs

@@ -0,0 +1,20 @@
+import { useOAuth2 } from "./useAuth/useOAuth2.mjs";
+import { useSession } from "./useAuth/useSession.mjs";
+import { useAuth } from "./useAuth/useAuth.mjs";
+import { useAddDictionary, useAddNewAccessKey, useAddOrganization, useAddOrganizationMember, useAddProject, useAddTag, useAppQuery, useAskDocQuestion, useAskResetPassword, useAuditContentDeclaration, useAuditContentDeclarationField, useAuditContentDeclarationMetadata, useAuditTag, useAutocomplete, useCancelSubscription, useChangePassword, useCreateUser, useDeleteAccessKey, useDeleteDictionary, useDeleteOrganization, useDeleteProject, useDeleteTag, useDeleteUser, useGetDictionaries, useGetDictionariesKeys, useGetDictionary, useGetDiscussions, useGetDiscussionsData, useGetEditorDictionaries, useGetNewsletterStatus, useGetOrganizations, useGetPricing, useGetProjects, useGetSubscription, useGetTags, useGetUserByAccount, useGetUserById, useGetUsers, useGetVerifyEmailStatus, useLogin, useLogout, usePushDictionaries, useQueryClient, useRefreshAccessKey, useRegister, useResetPassword, useSearchDoc, useSelectOrganization, useSelectProject, useSubscribeToNewsletter, useTranslateJSONDeclaration, useUnselectOrganization, useUnselectProject, useUnsubscribeFromNewsletter, useUpdateDictionary, useUpdateOrganization, useUpdateOrganizationMembers, useUpdateOrganizationMembersById, useUpdateProject, useUpdateProjectMembers, useUpdateTag, useUpdateUser, useVerifyEmail, useWriteDictionary } from "./reactQuery.mjs";
+import { calculateIsMobile, checkIsIphoneOrSafariDevice, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice } from "./useDevice.mjs";
+import { useGetElementOrWindow } from "./useGetElementOrWindow.mjs";
+import { useHorizontalSwipe } from "./useHorizontalSwipe.mjs";
+import { useIsDarkMode } from "./useIsDarkMode.mjs";
+import { useIsMounted } from "./useIsMounted.mjs";
+import { useItemSelector } from "./useItemSelector.mjs";
+import { useKeyboardDetector } from "./useKeyboardDetector.mjs";
+import { usePersistedStore } from "./usePersistedStore.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, checkIsIphoneOrSafariDevice, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useAddDictionary, useAddNewAccessKey, useAddOrganization, useAddOrganizationMember, useAddProject, useAddTag, useAppQuery, useAskDocQuestion, useAskResetPassword, useAuditContentDeclaration, useAuditContentDeclarationField, useAuditContentDeclarationMetadata, useAuditTag, useAuth, useAutocomplete, useCancelSubscription, useChangePassword, useCreateUser, useDeleteAccessKey, useDeleteDictionary, useDeleteOrganization, useDeleteProject, useDeleteTag, useDeleteUser, useDevice, useGetDictionaries, useGetDictionariesKeys, useGetDictionary, useGetDiscussions, useGetDiscussionsData, useGetEditorDictionaries, useGetElementOrWindow, useGetNewsletterStatus, useGetOrganizations, useGetPricing, useGetProjects, useGetSubscription, useGetTags, useGetUserByAccount, useGetUserById, useGetUsers, useGetVerifyEmailStatus, useHorizontalSwipe, useIsDarkMode, useIsMounted, useItemSelector, useKeyboardDetector, useLogin, useLogout, useOAuth2, usePersistedStore, usePushDictionaries, useQueryClient, useRefreshAccessKey, useRegister, useResetPassword, useScreenWidth, useScrollBlockage, useScrollDetection, useScrollY, useSearch, useSearchDoc, useSelectOrganization, useSelectProject, useSession, useSubscribeToNewsletter, useTranslateJSONDeclaration, useUnselectOrganization, useUnselectProject, useUnsubscribeFromNewsletter, useUpdateDictionary, useUpdateOrganization, useUpdateOrganizationMembers, useUpdateOrganizationMembersById, useUpdateProject, useUpdateProjectMembers, useUpdateTag, useUpdateUser, useUser, useVerifyEmail, useWriteDictionary };