@intlayer/design-system 6.1.5 → 6.1.6-canary.0

package/dist/components/Toaster/useToast.d.ts

@@ -1,15 +1,46 @@
 import { ReactNode } from 'react';
-import { ToastProps, ToastActionElement } from './Toast';
+import { ToastActionElement, ToastProps } from './Toast';
+/**
+ * Extended toast configuration with additional properties for the toast system.
+ *
+ * Combines base ToastProps with specific fields needed for toast management
+ * including unique identification and content elements.
+ *
+ * @example
+ * ```tsx
+ * const toast: ToasterToast = {
+ *   id: '1',
+ *   variant: 'success',
+ *   title: 'Success!',
+ *   description: 'Your action completed successfully.',
+ *   action: <ToastAction altText="View details">View</ToastAction>
+ * };
+ * ```
+ */
 type ToasterToast = ToastProps & {
+    /** Unique identifier for the toast instance */
     id: string;
+    /** Optional title text or React element */
     title?: ReactNode;
+    /** Optional description text or React element */
     description?: ReactNode;
+    /** Optional action button element */
     action?: ToastActionElement;
 };
+/**
+ * Action types for toast state management using reducer pattern.
+ *
+ * Defines all possible actions that can be performed on the toast state,
+ * enabling predictable state updates and better debugging.
+ */
 declare enum ActionTypes {
+    /** Add a new toast to the display queue */
     ADD_TOAST = "ADD_TOAST",
+    /** Update properties of an existing toast */
     UPDATE_TOAST = "UPDATE_TOAST",
+    /** Mark a toast as dismissed (triggers exit animation) */
     DISMISS_TOAST = "DISMISS_TOAST",
+    /** Completely remove a toast from memory */
     REMOVE_TOAST = "REMOVE_TOAST"
 }
 type Action = {
@@ -28,13 +59,179 @@ type Action = {
 type State = {
     toasts: ToasterToast[];
 };
+/**
+ * Toast state reducer function that handles all toast state transitions.
+ *
+ * Implements predictable state updates using the reducer pattern, ensuring
+ * consistent behavior across all toast operations.
+ *
+ * ## State Management
+ * - **ADD_TOAST**: Adds new toast and enforces limit by removing excess toasts
+ * - **UPDATE_TOAST**: Updates existing toast properties while preserving identity
+ * - **DISMISS_TOAST**: Marks toasts as closed and schedules removal
+ * - **REMOVE_TOAST**: Permanently removes toasts from state
+ *
+ * ## Side Effects
+ * The DISMISS_TOAST action includes side effects for scheduling toast removal,
+ * which could be extracted but is kept here for simplicity.
+ *
+ * @param state - Current toast state
+ * @param action - Action to perform on the state
+ * @returns Updated toast state
+ *
+ * @example
+ * ```tsx
+ * // Add a new toast
+ * const newState = reducer(state, {
+ *   type: ActionTypes.ADD_TOAST,
+ *   toast: { id: '1', title: 'Hello', variant: 'default' }
+ * });
+ *
+ * // Dismiss a specific toast
+ * const dismissedState = reducer(state, {
+ *   type: ActionTypes.DISMISS_TOAST,
+ *   toastId: '1'
+ * });
+ * ```
+ */
 export declare const reducer: (state: State, action: Action) => State;
+/**
+ * Toast configuration type for creating new toasts.
+ * Omits the 'id' field as it's automatically generated.
+ */
 type Toast = Omit<ToasterToast, 'id'>;
+/**
+ * Creates and displays a new toast notification.
+ *
+ * This is the primary function for showing toast notifications to users.
+ * It automatically generates unique IDs, handles state updates, and provides
+ * control functions for managing the toast lifecycle.
+ *
+ * ## Features
+ * - **Automatic ID Generation**: Each toast gets a unique identifier
+ * - **State Management**: Integrates with global toast state
+ * - **Lifecycle Control**: Returns functions to update or dismiss the toast
+ * - **Auto-dismiss**: Automatically closes when user dismisses
+ *
+ * ## Return Value
+ * Returns an object with control functions:
+ * - `id`: Unique identifier for the toast
+ * - `dismiss()`: Function to manually dismiss the toast
+ * - `update()`: Function to update toast properties
+ *
+ * @param props - Toast configuration (title, description, variant, etc.)
+ * @returns Object with toast ID and control functions
+ *
+ * @example
+ * ```tsx
+ * // Basic success toast
+ * const { dismiss } = toast({
+ *   title: 'Success!',
+ *   description: 'Your file was uploaded successfully.',
+ *   variant: 'success'
+ * });
+ *
+ * // Error toast with retry action
+ * const errorToast = toast({
+ *   title: 'Upload Failed',
+ *   description: 'Could not upload file. Please try again.',
+ *   variant: 'error',
+ *   action: <ToastAction altText="Retry upload">Retry</ToastAction>
+ * });
+ *
+ * // Update toast content dynamically
+ * errorToast.update({
+ *   title: 'Retrying...',
+ *   description: 'Please wait while we retry the upload.',
+ *   variant: 'default'
+ * });
+ *
+ * // Manually dismiss toast
+ * setTimeout(() => errorToast.dismiss(), 5000);
+ * ```
+ */
 declare const toast: ({ ...props }: Toast) => {
     id: string;
     dismiss: () => void;
     update: (props: ToasterToast) => void;
 };
+/**
+ * React hook for managing toast notifications.
+ *
+ * Provides access to the global toast state and functions for creating and
+ * managing toast notifications. This hook connects components to the toast
+ * system and ensures reactive updates when toasts change.
+ *
+ * ## Features
+ * - **State Synchronization**: Automatically updates when toast state changes
+ * - **Toast Creation**: Provides the `toast()` function for creating notifications
+ * - **Batch Dismissal**: Can dismiss all toasts or specific toasts by ID
+ * - **Memory Management**: Handles proper cleanup of listeners
+ *
+ * ## Return Value
+ * - `toasts`: Array of current toast objects
+ * - `toast()`: Function to create new toast notifications
+ * - `dismiss()`: Function to dismiss toasts (all or by ID)
+ *
+ * @returns Toast state and control functions
+ *
+ * @example
+ * ```tsx
+ * function NotificationButton() {
+ *   const { toast, toasts, dismiss } = useToast();
+ *
+ *   const showSuccess = () => {
+ *     toast({
+ *       title: 'Success!',
+ *       description: 'Operation completed successfully.',
+ *       variant: 'success'
+ *     });
+ *   };
+ *
+ *   const clearAll = () => {
+ *     dismiss(); // Dismisses all toasts
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={showSuccess}>Show Success</button>
+ *       <button onClick={clearAll}>Clear All ({toasts.length})</button>
+ *     </div>
+ *   );
+ * }
+ *
+ * // Usage in a form component
+ * function ContactForm() {
+ *   const { toast } = useToast();
+ *
+ *   const handleSubmit = async (data) => {
+ *     try {
+ *       await submitForm(data);
+ *       toast({
+ *         title: 'Form Submitted',
+ *         description: 'We\'ll get back to you soon!',
+ *         variant: 'success'
+ *       });
+ *     } catch (error) {
+ *       toast({
+ *         title: 'Submission Failed',
+ *         description: 'Please check your connection and try again.',
+ *         variant: 'error',
+ *         action: <ToastAction altText="Retry">Retry</ToastAction>
+ *       });
+ *     }
+ *   };
+ *
+ *   // ... form JSX
+ * }
+ * ```
+ *
+ * ## Usage Notes
+ * - Must be used within a component tree that includes `<Toaster />`
+ * - Toast state is global - changes affect all components using this hook
+ * - Toasts are automatically cleaned up after the configured delay
+ * - Consider UX best practices: don't overwhelm users with too many toasts
+ */
 declare const useToast: () => {
     toast: ({ ...props }: Toast) => {
         id: string;
@@ -44,5 +241,5 @@ declare const useToast: () => {
     dismiss: (toastId?: string) => void;
     toasts: ToasterToast[];
 };
-export { useToast, toast };
+export { toast, useToast };
 //# sourceMappingURL=useToast.d.ts.map

package/dist/components/Toaster/useToast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/useToast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAK9D,KAAK,YAAY,GAAG,UAAU,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B,CAAC;AAEF,aAAK,WAAW;IACd,SAAS,cAAc;IACvB,YAAY,iBAAiB;IAC7B,aAAa,kBAAkB;IAC/B,YAAY,iBAAiB;CAC9B;AASD,KAAK,MAAM,GACP;IACE,IAAI,EAAE,WAAW,CAAC,SAAS,CAAC;IAC5B,KAAK,EAAE,YAAY,CAAC;CACrB,GACD;IACE,IAAI,EAAE,WAAW,CAAC,YAAY,CAAC;IAC/B,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAC9B,GACD;IACE,IAAI,EAAE,WAAW,CAAC,aAAa,CAAC;IAChC,OAAO,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;CAC9B,GACD;IACE,IAAI,EAAE,WAAW,CAAC,YAAY,CAAC;IAC/B,OAAO,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;CAC9B,CAAC;AAEN,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,YAAY,EAAE,CAAC;CACxB,CAAC;AAoBF,eAAO,MAAM,OAAO,GAAI,OAAO,KAAK,EAAE,QAAQ,MAAM,KAAG,KAqDtD,CAAC;AAaF,KAAK,KAAK,GAAG,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;AAEtC,QAAA,MAAM,KAAK,GAAI,cAAc,KAAK;;;oBAGT,YAAY;CAyBpC,CAAC;AAEF,QAAA,MAAM,QAAQ;0BA9Be,KAAK;;;wBAGT,YAAY;;wBA2Cb,MAAM;YAvIpB,YAAY,EAAE;CA0IvB,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/useToast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAc9D;;;;;;;;;;;;;;;;GAgBG;AACH,KAAK,YAAY,GAAG,UAAU,GAAG;IAC/B,+CAA+C;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,2CAA2C;IAC3C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,iDAAiD;IACjD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,qCAAqC;IACrC,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B,CAAC;AAEF;;;;;GAKG;AACH,aAAK,WAAW;IACd,2CAA2C;IAC3C,SAAS,cAAc;IACvB,6CAA6C;IAC7C,YAAY,iBAAiB;IAC7B,0DAA0D;IAC1D,aAAa,kBAAkB;IAC/B,4CAA4C;IAC5C,YAAY,iBAAiB;CAC9B;AASD,KAAK,MAAM,GACP;IACE,IAAI,EAAE,WAAW,CAAC,SAAS,CAAC;IAC5B,KAAK,EAAE,YAAY,CAAC;CACrB,GACD;IACE,IAAI,EAAE,WAAW,CAAC,YAAY,CAAC;IAC/B,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAC9B,GACD;IACE,IAAI,EAAE,WAAW,CAAC,aAAa,CAAC;IAChC,OAAO,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;CAC9B,GACD;IACE,IAAI,EAAE,WAAW,CAAC,YAAY,CAAC;IAC/B,OAAO,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;CAC9B,CAAC;AAEN,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,YAAY,EAAE,CAAC;CACxB,CAAC;AAoBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,OAAO,GAAI,OAAO,KAAK,EAAE,QAAQ,MAAM,KAAG,KAqDtD,CAAC;AAaF;;;GAGG;AACH,KAAK,KAAK,GAAG,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,QAAA,MAAM,KAAK,GAAI,cAAc,KAAK;;;oBAGT,YAAY;CAyBpC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,QAAA,MAAM,QAAQ;0BA3Ge,KAAK;;;wBAGT,YAAY;;wBAwHb,MAAM;YA7SpB,YAAY,EAAE;CAgTvB,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"useToast.mjs","sources":["../../../src/components/Toaster/useToast.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode, useState, useEffect } from 'react';\nimport type { ToastProps, ToastActionElement } from './Toast';\n\nconst TOAST_LIMIT = 1;\nconst TOAST_REMOVE_DELAY = 15 * 60 * 1000; // 15 seconds\n\ntype ToasterToast = ToastProps & {\n  id: string;\n  title?: ReactNode;\n  description?: ReactNode;\n  action?: ToastActionElement;\n};\n\nenum ActionTypes {\n  ADD_TOAST = 'ADD_TOAST',\n  UPDATE_TOAST = 'UPDATE_TOAST',\n  DISMISS_TOAST = 'DISMISS_TOAST',\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\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\ntype Toast = Omit<ToasterToast, 'id'>;\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\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 { useToast, toast };\n"],"names":["toast","props"],"mappings":"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"}
+{"version":3,"file":"useToast.mjs","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"],"names":["toast","props"],"mappings":"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"}

package/dist/components/WithResizer/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/WithResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type FC,\n  type PropsWithChildren,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\ntype WithResizerProps = {\n  initialWidth: number;\n  maxWidth?: number;\n  minWidth?: number;\n};\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-r-[2px] border-neutral-200 transition dark:border-neutral-950',\n        'after:absolute after:right-0 after:top-1/2 after:block after:h-10 after:w-2 after:-translate-y-1/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 left-0 top-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"],"names":["useRef","useState","useCallback","useEffect","jsx","cn"],"mappings":";;;;;;AAkBO,MAAM,cAAuD,CAAC;AAAA,EACnE;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,MAAM;AACJ,QAAM,eAAeA,aAAAA,OAAuB,IAAI;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAIC,aAAAA,SAAS,YAAY;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAIA,aAAAA,SAAS,KAAK;AAGlD,QAAM,gBAAgBC,aAAAA;AAAAA,IACpB,CACE,mBAGG;AACH,oBAAc,IAAI;AAClB,qBAAe,eAAA;AAAA,IACjB;AAAA,IACA,CAAA;AAAA,EAAC;AAIH,QAAM,eAAeA,aAAAA,YAAY,MAAM;AACrC,kBAAc,KAAK;AAAA,EACrB,GAAG,CAAA,CAAE;AAGL,QAAM,SAASA,aAAAA;AAAAA,IACb,CAAC,mBAA4C;AAC3C,YAAM,YAAY,aAAa;AAC/B,UAAI,cAAc,aAAa,QAAQ;AACrC,cAAM,EAAE,MAAM,kBAAkB,UAAU,sBAAA;AAE1C,YAAI,UAAU;AACd,YAAI,0BAA0B,YAAY;AACxC,oBAAU,eAAe;AAAA,QAC3B,WAAW,0BAA0B,YAAY;AAC/C,oBAAU,eAAe,QAAQ,CAAC,EAAE;AAAA,QACtC;AAEA,cAAM,WAAW,UAAU;AAC3B,cAAM,iBAAiB,KAAK,IAAI,UAAU,CAAC;AAE3C,iBAAS,cAAc;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAIbC,eAAAA,UAAU,MAAM;AACd,WAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM;AAC9D,WAAO,iBAAiB,WAAW,YAAY;AAC/C,WAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM;AAC9D,WAAO,iBAAiB,YAAY,YAAY;AAEhD,WAAO,MAAM;AACX,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,WAAW,YAAY;AAClD,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,YAAY,YAAY;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,QAAQ,YAAY,CAAC;AAEzB,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAAA;AAAAA,QACT,YAAY,UAAU,QAAQ;AAAA,QAC9B,YAAY,UAAU,QAAQ;AAAA,QAC9B;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,OAAO,GAAG,KAAK;AAAA,MAAA;AAAA,MAEjB,KAAK;AAAA,MACL,aAAa;AAAA,MACb,cAAc;AAAA,MACd,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MAEV,UAAAD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,aAAa,CAAC,MAAM,EAAE,gBAAA;AAAA,UACtB,cAAc,CAAC,MAAM,EAAE,gBAAA;AAAA,UAEtB;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/WithResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type FC,\n  type PropsWithChildren,\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-r-[2px] border-neutral-200 transition dark:border-neutral-950',\n        'after:absolute after:right-0 after:top-1/2 after:block after:h-10 after:w-2 after:-translate-y-1/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 left-0 top-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"],"names":["useRef","useState","useCallback","useEffect","jsx","cn"],"mappings":";;;;;;AAiKO,MAAM,cAAuD,CAAC;AAAA,EACnE;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,MAAM;AACJ,QAAM,eAAeA,aAAAA,OAAuB,IAAI;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAIC,aAAAA,SAAS,YAAY;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAIA,aAAAA,SAAS,KAAK;AAGlD,QAAM,gBAAgBC,aAAAA;AAAAA,IACpB,CACE,mBAGG;AACH,oBAAc,IAAI;AAClB,qBAAe,eAAA;AAAA,IACjB;AAAA,IACA,CAAA;AAAA,EAAC;AAIH,QAAM,eAAeA,aAAAA,YAAY,MAAM;AACrC,kBAAc,KAAK;AAAA,EACrB,GAAG,CAAA,CAAE;AAGL,QAAM,SAASA,aAAAA;AAAAA,IACb,CAAC,mBAA4C;AAC3C,YAAM,YAAY,aAAa;AAC/B,UAAI,cAAc,aAAa,QAAQ;AACrC,cAAM,EAAE,MAAM,kBAAkB,UAAU,sBAAA;AAE1C,YAAI,UAAU;AACd,YAAI,0BAA0B,YAAY;AACxC,oBAAU,eAAe;AAAA,QAC3B,WAAW,0BAA0B,YAAY;AAC/C,oBAAU,eAAe,QAAQ,CAAC,EAAE;AAAA,QACtC;AAEA,cAAM,WAAW,UAAU;AAC3B,cAAM,iBAAiB,KAAK,IAAI,UAAU,CAAC;AAE3C,iBAAS,cAAc;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAIbC,eAAAA,UAAU,MAAM;AACd,WAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM;AAC9D,WAAO,iBAAiB,WAAW,YAAY;AAC/C,WAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM;AAC9D,WAAO,iBAAiB,YAAY,YAAY;AAEhD,WAAO,MAAM;AACX,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,WAAW,YAAY;AAClD,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,YAAY,YAAY;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,QAAQ,YAAY,CAAC;AAEzB,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAAA;AAAAA,QACT,YAAY,UAAU,QAAQ;AAAA,QAC9B,YAAY,UAAU,QAAQ;AAAA,QAC9B;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,OAAO,GAAG,KAAK;AAAA,MAAA;AAAA,MAEjB,KAAK;AAAA,MACL,aAAa;AAAA,MACb,cAAc;AAAA,MACd,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MAEV,UAAAD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,aAAa,CAAC,MAAM,EAAE,gBAAA;AAAA,UACtB,cAAc,CAAC,MAAM,EAAE,gBAAA;AAAA,UAEtB;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;;"}

package/dist/components/WithResizer/index.d.ts

@@ -1,9 +1,152 @@
 import { FC, PropsWithChildren } from 'react';
+/**
+ * Props for the WithResizer component.
+ *
+ * Defines the configuration for a resizable container with drag-based width adjustment.
+ *
+ * @example
+ * ```tsx
+ * // Basic resizable container
+ * <WithResizer initialWidth={300} minWidth={200} maxWidth={600}>
+ *   <div className="p-4">Resizable content</div>
+ * </WithResizer>
+ *
+ * // Sidebar with resizing
+ * <WithResizer
+ *   initialWidth={250}
+ *   minWidth={180}
+ *   maxWidth={400}
+ * >
+ *   <nav className="h-full p-4">
+ *     <SidebarContent />
+ *   </nav>
+ * </WithResizer>
+ *
+ * // Panel with unlimited growth
+ * <WithResizer initialWidth={400} minWidth={300}>
+ *   <div className="h-full overflow-auto">
+ *     <PanelContent />
+ *   </div>
+ * </WithResizer>
+ * ```
+ */
 type WithResizerProps = {
+    /** Initial width of the resizable container in pixels */
     initialWidth: number;
+    /** Maximum allowed width in pixels (optional, no limit if not specified) */
     maxWidth?: number;
+    /** Minimum allowed width in pixels */
     minWidth?: number;
 };
+/**
+ * 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
+ */
 export declare const WithResizer: FC<PropsWithChildren<WithResizerProps>>;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/WithResizer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/WithResizer/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAKZ,KAAK,EAAE,EACP,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAGf,KAAK,gBAAgB,GAAG;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAiG/D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/WithResizer/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAKZ,KAAK,EAAE,EACP,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAGf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,KAAK,gBAAgB,GAAG;IACtB,yDAAyD;IACzD,YAAY,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4GG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAiG/D,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/WithResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type FC,\n  type PropsWithChildren,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\ntype WithResizerProps = {\n  initialWidth: number;\n  maxWidth?: number;\n  minWidth?: number;\n};\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-r-[2px] border-neutral-200 transition dark:border-neutral-950',\n        'after:absolute after:right-0 after:top-1/2 after:block after:h-10 after:w-2 after:-translate-y-1/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 left-0 top-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"],"names":[],"mappings":";;;;AAkBO,MAAM,cAAuD,CAAC;AAAA,EACnE;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,MAAM;AACJ,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAGlD,QAAM,gBAAgB;AAAA,IACpB,CACE,mBAGG;AACH,oBAAc,IAAI;AAClB,qBAAe,eAAA;AAAA,IACjB;AAAA,IACA,CAAA;AAAA,EAAC;AAIH,QAAM,eAAe,YAAY,MAAM;AACrC,kBAAc,KAAK;AAAA,EACrB,GAAG,CAAA,CAAE;AAGL,QAAM,SAAS;AAAA,IACb,CAAC,mBAA4C;AAC3C,YAAM,YAAY,aAAa;AAC/B,UAAI,cAAc,aAAa,QAAQ;AACrC,cAAM,EAAE,MAAM,kBAAkB,UAAU,sBAAA;AAE1C,YAAI,UAAU;AACd,YAAI,0BAA0B,YAAY;AACxC,oBAAU,eAAe;AAAA,QAC3B,WAAW,0BAA0B,YAAY;AAC/C,oBAAU,eAAe,QAAQ,CAAC,EAAE;AAAA,QACtC;AAEA,cAAM,WAAW,UAAU;AAC3B,cAAM,iBAAiB,KAAK,IAAI,UAAU,CAAC;AAE3C,iBAAS,cAAc;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAIb,YAAU,MAAM;AACd,WAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM;AAC9D,WAAO,iBAAiB,WAAW,YAAY;AAC/C,WAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM;AAC9D,WAAO,iBAAiB,YAAY,YAAY;AAEhD,WAAO,MAAM;AACX,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,WAAW,YAAY;AAClD,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,YAAY,YAAY;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,QAAQ,YAAY,CAAC;AAEzB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,YAAY,UAAU,QAAQ;AAAA,QAC9B,YAAY,UAAU,QAAQ;AAAA,QAC9B;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,OAAO,GAAG,KAAK;AAAA,MAAA;AAAA,MAEjB,KAAK;AAAA,MACL,aAAa;AAAA,MACb,cAAc;AAAA,MACd,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MAEV,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,aAAa,CAAC,MAAM,EAAE,gBAAA;AAAA,UACtB,cAAc,CAAC,MAAM,EAAE,gBAAA;AAAA,UAEtB;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/WithResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type FC,\n  type PropsWithChildren,\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-r-[2px] border-neutral-200 transition dark:border-neutral-950',\n        'after:absolute after:right-0 after:top-1/2 after:block after:h-10 after:w-2 after:-translate-y-1/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 left-0 top-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"],"names":[],"mappings":";;;;AAiKO,MAAM,cAAuD,CAAC;AAAA,EACnE;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,MAAM;AACJ,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAGlD,QAAM,gBAAgB;AAAA,IACpB,CACE,mBAGG;AACH,oBAAc,IAAI;AAClB,qBAAe,eAAA;AAAA,IACjB;AAAA,IACA,CAAA;AAAA,EAAC;AAIH,QAAM,eAAe,YAAY,MAAM;AACrC,kBAAc,KAAK;AAAA,EACrB,GAAG,CAAA,CAAE;AAGL,QAAM,SAAS;AAAA,IACb,CAAC,mBAA4C;AAC3C,YAAM,YAAY,aAAa;AAC/B,UAAI,cAAc,aAAa,QAAQ;AACrC,cAAM,EAAE,MAAM,kBAAkB,UAAU,sBAAA;AAE1C,YAAI,UAAU;AACd,YAAI,0BAA0B,YAAY;AACxC,oBAAU,eAAe;AAAA,QAC3B,WAAW,0BAA0B,YAAY;AAC/C,oBAAU,eAAe,QAAQ,CAAC,EAAE;AAAA,QACtC;AAEA,cAAM,WAAW,UAAU;AAC3B,cAAM,iBAAiB,KAAK,IAAI,UAAU,CAAC;AAE3C,iBAAS,cAAc;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAIb,YAAU,MAAM;AACd,WAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM;AAC9D,WAAO,iBAAiB,WAAW,YAAY;AAC/C,WAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM;AAC9D,WAAO,iBAAiB,YAAY,YAAY;AAEhD,WAAO,MAAM;AACX,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,WAAW,YAAY;AAClD,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,YAAY,YAAY;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,QAAQ,YAAY,CAAC;AAEzB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,YAAY,UAAU,QAAQ;AAAA,QAC9B,YAAY,UAAU,QAAQ;AAAA,QAC9B;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,OAAO,GAAG,KAAK;AAAA,MAAA;AAAA,MAEjB,KAAK;AAAA,MACL,aAAa;AAAA,MACb,cAAc;AAAA,MACd,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MAEV,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,aAAa,CAAC,MAAM,EAAE,gBAAA;AAAA,UACtB,cAAc,CAAC,MAAM,EAAE,gBAAA;AAAA,UAEtB;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}

package/dist/components/index.cjs

@@ -61,7 +61,6 @@ const components_Select_Multiselect = require("./Select/Multiselect.cjs");
 const components_Select_Select = require("./Select/Select.cjs");
 const components_SocialNetworks_index = require("./SocialNetworks/index.cjs");
 const components_SwitchSelector_index = require("./SwitchSelector/index.cjs");
-const components_Tab_Tab = require("./Tab/Tab.cjs");
 const components_TabSelector_TabSelector = require("./TabSelector/TabSelector.cjs");
 const components_Tag_index = require("./Tag/index.cjs");
 const components_TextArea_AutoSizeTextArea = require("./TextArea/AutoSizeTextArea.cjs");
@@ -84,8 +83,10 @@ const components_SocialNetworks_XLogo = require("./SocialNetworks/XLogo.cjs");
 const components_SocialNetworks_YoutubeLogo = require("./SocialNetworks/YoutubeLogo.cjs");
 exports.Accordion = components_Accordion_Accordion.Accordion;
 exports.Avatar = components_Avatar_index.Avatar;
+exports.getCapitals = components_Avatar_index.getCapitals;
 exports.Badge = components_Badge_index.Badge;
 exports.BadgeColor = components_Badge_index.BadgeColor;
+exports.BadgeSize = components_Badge_index.BadgeSize;
 exports.BadgeVariant = components_Badge_index.BadgeVariant;
 exports.badgeVariants = components_Badge_index.badgeVariants;
 exports.Breadcrumb = components_Breadcrumb_index.Breadcrumb;
@@ -188,7 +189,6 @@ exports.SocialNetworks = components_SocialNetworks_index.SocialNetworks;
 exports.SwitchSelector = components_SwitchSelector_index.SwitchSelector;
 exports.SwitchSelectorColor = components_SwitchSelector_index.SwitchSelectorColor;
 exports.SwitchSelectorSize = components_SwitchSelector_index.SwitchSelectorSize;
-exports.Tab = components_Tab_Tab.Tab;
 exports.TabSelector = components_TabSelector_TabSelector.TabSelector;
 exports.TabSelectorColor = components_TabSelector_TabSelector.TabSelectorColor;
 exports.Tag = components_Tag_index.Tag;

package/dist/components/index.d.ts

@@ -41,7 +41,6 @@ export * from './RightDrawer';
 export * from './Select';
 export * from './SocialNetworks';
 export * from './SwitchSelector';
-export * from './Tab';
 export * from './TabSelector';
 export * from './Tag';
 export * from './TextArea';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,OAAO,CAAC;AACtB,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,yBAAyB,CAAC;AACxC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC;AACzC,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,yBAAyB,CAAC;AACxC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,OAAO,CAAC;AACtB,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,yBAAyB,CAAC;AACxC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC;AACzC,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,yBAAyB,CAAC;AACxC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC"}

package/dist/components/index.mjs

@@ -1,6 +1,6 @@
 import { Accordion } from "./Accordion/Accordion.mjs";
-import { Avatar } from "./Avatar/index.mjs";
-import { Badge, BadgeColor, BadgeVariant, badgeVariants } from "./Badge/index.mjs";
+import { Avatar, getCapitals } from "./Avatar/index.mjs";
+import { Badge, BadgeColor, BadgeSize, BadgeVariant, badgeVariants } from "./Badge/index.mjs";
 import { Breadcrumb } from "./Breadcrumb/index.mjs";
 import { Button, ButtonColor, ButtonIconPosition, ButtonSize, ButtonTextAlign, ButtonVariant } from "./Button/Button.mjs";
 import { ClickOutsideDiv } from "./ClickOutsideDiv/index.mjs";
@@ -59,7 +59,6 @@ import { MultiSelect } from "./Select/Multiselect.mjs";
 import { Select, SelectContent, SelectContentPosition, SelectLabel, SelectSeparator } from "./Select/Select.mjs";
 import { SocialNetworks } from "./SocialNetworks/index.mjs";
 import { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize } from "./SwitchSelector/index.mjs";
-import { Tab } from "./Tab/Tab.mjs";
 import { TabSelector, TabSelectorColor } from "./TabSelector/TabSelector.mjs";
 import { Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize } from "./Tag/index.mjs";
 import { AutoSizedTextArea } from "./TextArea/AutoSizeTextArea.mjs";
@@ -87,6 +86,7 @@ export {
   Avatar,
   Badge,
   BadgeColor,
+  BadgeSize,
   BadgeVariant,
   Breadcrumb,
   Button,
@@ -184,7 +184,6 @@ export {
   SwitchSelector,
   SwitchSelectorColor,
   SwitchSelectorSize,
-  Tab,
   TabSelector,
   TabSelectorColor,
   Tag,
@@ -212,6 +211,7 @@ export {
   checkIsExternalLink,
   checkboxVariants,
   containerVariants,
+  getCapitals,
   inputVariants,
   linkVariants,
   reducer,

package/dist/components/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/hooks/reactQuery.cjs

@@ -544,7 +544,8 @@ const useSearchDoc = (params) => {
   const intlayerOAuth = hooks_useIntlayerAPI.useIntlayerOAuth();
   return reactQuery.useQuery({
     queryKey: ["search", params],
-    queryFn: () => intlayerOAuth.search.searchDoc(params)
+    queryFn: () => intlayerOAuth.search.searchDoc(params),
+    enabled: (params?.input?.length ?? 0) > 3
   });
 };
 const useSubscribeToNewsletter = () => {