@intlayer/design-system 8.1.2 → 8.1.3

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

@@ -1,309 +1,2 @@
-'use client';
-
-import { useEffect, useState } from "react";
-
-//#region src/components/Toaster/useToast.tsx
-/**
-* Maximum number of toasts that can be displayed simultaneously.
-* Prevents UI overflow and maintains clean notification experience.
-*/
-const TOAST_LIMIT = 1;
-/**
-* Delay before automatically removing dismissed toasts from memory.
-* Set to 15 minutes (900,000ms) to allow for potential undo actions.
-*/
-const TOAST_REMOVE_DELAY = 900 * 1e3;
-/**
-* 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.
-*/
-var ActionTypes = /* @__PURE__ */ function(ActionTypes) {
-	/** Add a new toast to the display queue */
-	ActionTypes["ADD_TOAST"] = "ADD_TOAST";
-	/** Update properties of an existing toast */
-	ActionTypes["UPDATE_TOAST"] = "UPDATE_TOAST";
-	/** Mark a toast as dismissed (triggers exit animation) */
-	ActionTypes["DISMISS_TOAST"] = "DISMISS_TOAST";
-	/** Completely remove a toast from memory */
-	ActionTypes["REMOVE_TOAST"] = "REMOVE_TOAST";
-	return ActionTypes;
-}(ActionTypes || {});
-let count = 0;
-const genId = () => {
-	count = (count + 1) % Number.MAX_SAFE_INTEGER;
-	return count.toString();
-};
-const toastTimeouts = /* @__PURE__ */ new Map();
-const addToRemoveQueue = (toastId) => {
-	if (toastTimeouts.has(toastId)) return;
-	const timeout = setTimeout(() => {
-		toastTimeouts.delete(toastId);
-		dispatch({
-			type: ActionTypes.REMOVE_TOAST,
-			toastId
-		});
-	}, TOAST_REMOVE_DELAY);
-	toastTimeouts.set(toastId, timeout);
-};
-/**
-* 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'
-* });
-* ```
-*/
-const reducer = (state, action) => {
-	switch (action.type) {
-		case ActionTypes.ADD_TOAST: return {
-			...state,
-			toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
-		};
-		case ActionTypes.UPDATE_TOAST: return {
-			...state,
-			toasts: state.toasts.map((t) => t.id === action.toast.id ? {
-				...t,
-				...action.toast
-			} : t)
-		};
-		case ActionTypes.DISMISS_TOAST: {
-			const { toastId } = action;
-			if (toastId) addToRemoveQueue(toastId);
-			else state.toasts.forEach((toast) => {
-				addToRemoveQueue(toast.id);
-			});
-			return {
-				...state,
-				toasts: state.toasts.map((t) => t.id === toastId || toastId === void 0 ? {
-					...t,
-					open: false
-				} : t)
-			};
-		}
-		case ActionTypes.REMOVE_TOAST:
-			if (action.toastId === void 0) return {
-				...state,
-				toasts: []
-			};
-			return {
-				...state,
-				toasts: state.toasts.filter((t) => t.id !== action.toastId)
-			};
-	}
-};
-const listeners = [];
-let memoryState = { toasts: [] };
-const dispatch = (action) => {
-	memoryState = reducer(memoryState, action);
-	listeners.forEach((listener) => {
-		listener(memoryState);
-	});
-};
-/**
-* 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);
-* ```
-*/
-const toast = ({ ...props }) => {
-	const id = genId();
-	const update = (props) => dispatch({
-		type: ActionTypes.UPDATE_TOAST,
-		toast: {
-			...props,
-			id
-		}
-	});
-	const dismiss = () => dispatch({
-		type: ActionTypes.DISMISS_TOAST,
-		toastId: id
-	});
-	dispatch({
-		type: ActionTypes.ADD_TOAST,
-		toast: {
-			...props,
-			id,
-			open: true,
-			onOpenChange: (open) => {
-				if (!open) dismiss();
-			}
-		}
-	});
-	return {
-		id,
-		dismiss,
-		update
-	};
-};
-/**
-* 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
-*/
-const useToast = () => {
-	const [state, setState] = useState(memoryState);
-	useEffect(() => {
-		listeners.push(setState);
-		return () => {
-			const index = listeners.indexOf(setState);
-			if (index > -1) listeners.splice(index, 1);
-		};
-	}, [state]);
-	return {
-		...state,
-		toast,
-		dismiss: (toastId) => dispatch({
-			type: ActionTypes.DISMISS_TOAST,
-			toastId
-		})
-	};
-};
-
-//#endregion
-export { reducer, toast, useToast };
+"use client";import{useEffect as e,useState as t}from"react";var n=function(e){return e.ADD_TOAST=`ADD_TOAST`,e.UPDATE_TOAST=`UPDATE_TOAST`,e.DISMISS_TOAST=`DISMISS_TOAST`,e.REMOVE_TOAST=`REMOVE_TOAST`,e}(n||{});let r=0;const i=()=>(r=(r+1)%(2**53-1),r.toString()),a=new Map,o=e=>{if(a.has(e))return;let t=setTimeout(()=>{a.delete(e),u({type:n.REMOVE_TOAST,toastId:e})},9e5);a.set(e,t)},s=(e,t)=>{switch(t.type){case n.ADD_TOAST:return{...e,toasts:[t.toast,...e.toasts].slice(0,1)};case n.UPDATE_TOAST:return{...e,toasts:e.toasts.map(e=>e.id===t.toast.id?{...e,...t.toast}:e)};case n.DISMISS_TOAST:{let{toastId:n}=t;return n?o(n):e.toasts.forEach(e=>{o(e.id)}),{...e,toasts:e.toasts.map(e=>e.id===n||n===void 0?{...e,open:!1}:e)}}case n.REMOVE_TOAST:return t.toastId===void 0?{...e,toasts:[]}:{...e,toasts:e.toasts.filter(e=>e.id!==t.toastId)}}},c=[];let l={toasts:[]};const u=e=>{l=s(l,e),c.forEach(e=>{e(l)})},d=({...e})=>{let t=i(),r=e=>u({type:n.UPDATE_TOAST,toast:{...e,id:t}}),a=()=>u({type:n.DISMISS_TOAST,toastId:t});return u({type:n.ADD_TOAST,toast:{...e,id:t,open:!0,onOpenChange:e=>{e||a()}}}),{id:t,dismiss:a,update:r}},f=()=>{let[r,i]=t(l);return e(()=>(c.push(i),()=>{let e=c.indexOf(i);e>-1&&c.splice(e,1)}),[r]),{...r,toast:d,dismiss:e=>u({type:n.DISMISS_TOAST,toastId:e})}};export{s as reducer,d as toast,f as useToast};
 //# sourceMappingURL=useToast.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useToast.mjs","names":[],"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":";;;;;;;;;AASA,MAAM,cAAc;;;;;AAMpB,MAAM,qBAAqB,MAAU;;;;;;;AAoCrC,IAAK,oDAAL;;AAEE;;AAEA;;AAEA;;AAEA;;EARG;AAWL,IAAI,QAAQ;AAEZ,MAAM,cAAc;AAClB,UAAS,QAAQ,KAAK,OAAO;AAC7B,QAAO,MAAM,UAAU;;AAyBzB,MAAM,gCAAgB,IAAI,KAA4C;AAEtE,MAAM,oBAAoB,YAAoB;AAC5C,KAAI,cAAc,IAAI,QAAQ,CAC5B;CAGF,MAAM,UAAU,iBAAiB;AAC/B,gBAAc,OAAO,QAAQ;AAC7B,WAAS;GACP,MAAM,YAAY;GACT;GACV,CAAC;IACD,mBAAmB;AAEtB,eAAc,IAAI,SAAS,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCrC,MAAa,WAAW,OAAc,WAA0B;AAC9D,SAAQ,OAAO,MAAf;EACE,KAAK,YAAY,UACf,QAAO;GACL,GAAG;GACH,QAAQ,CAAC,OAAO,OAAO,GAAG,MAAM,OAAO,CAAC,MAAM,GAAG,YAAY;GAC9D;EAEH,KAAK,YAAY,aACf,QAAO;GACL,GAAG;GACH,QAAQ,MAAM,OAAO,KAAK,MACxB,EAAE,OAAO,OAAO,MAAM,KAAK;IAAE,GAAG;IAAG,GAAG,OAAO;IAAO,GAAG,EACxD;GACF;EAEH,KAAK,YAAY,eAAe;GAC9B,MAAM,EAAE,YAAY;AAIpB,OAAI,QACF,kBAAiB,QAAQ;OAEzB,OAAM,OAAO,SAAS,UAAU;AAC9B,qBAAiB,MAAM,GAAG;KAC1B;AAGJ,UAAO;IACL,GAAG;IACH,QAAQ,MAAM,OAAO,KAAK,MACxB,EAAE,OAAO,WAAW,YAAY,SAC5B;KACE,GAAG;KACH,MAAM;KACP,GACD,EACL;IACF;;EAEH,KAAK,YAAY;AACf,OAAI,OAAO,YAAY,OACrB,QAAO;IACL,GAAG;IACH,QAAQ,EAAE;IACX;AAEH,UAAO;IACL,GAAG;IACH,QAAQ,MAAM,OAAO,QAAQ,MAAM,EAAE,OAAO,OAAO,QAAQ;IAC5D;;;AAIP,MAAM,YAAwC,EAAE;AAEhD,IAAI,cAAqB,EAAE,QAAQ,EAAE,EAAE;AAEvC,MAAM,YAAY,WAAmB;AACnC,eAAc,QAAQ,aAAa,OAAO;AAC1C,WAAU,SAAS,aAAa;AAC9B,WAAS,YAAY;GACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DJ,MAAM,SAAS,EAAE,GAAG,YAAmB;CACrC,MAAM,KAAK,OAAO;CAElB,MAAM,UAAU,UACd,SAAS;EACP,MAAM,YAAY;EAClB,OAAO;GAAE,GAAG;GAAO;GAAI;EACxB,CAAC;CACJ,MAAM,gBACJ,SAAS;EAAE,MAAM,YAAY;EAAe,SAAS;EAAI,CAAC;AAE5D,UAAS;EACP,MAAM,YAAY;EAClB,OAAO;GACL,GAAG;GACH;GACA,MAAM;GACN,eAAe,SAAS;AACtB,QAAI,CAAC,KAAM,UAAS;;GAEvB;EACF,CAAC;AAEF,QAAO;EACD;EACJ;EACA;EACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFH,MAAM,iBAAiB;CACrB,MAAM,CAAC,OAAO,YAAY,SAAgB,YAAY;AAEtD,iBAAgB;AACd,YAAU,KAAK,SAAS;AACxB,eAAa;GACX,MAAM,QAAQ,UAAU,QAAQ,SAAS;AACzC,OAAI,QAAQ,GACV,WAAU,OAAO,OAAO,EAAE;;IAG7B,CAAC,MAAM,CAAC;AAEX,QAAO;EACL,GAAG;EACH;EACA,UAAU,YACR,SAAS;GAAE,MAAM,YAAY;GAAe;GAAS,CAAC;EACzD"}
+{"version":3,"file":"useToast.mjs","names":[],"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":"6DAmDA,IAAK,EAAA,SAAA,EAAL,OAEE,GAAA,UAAA,YAEA,EAAA,aAAA,eAEA,EAAA,cAAA,gBAEA,EAAA,aAAA,kBARG,GAAA,EAAA,CAAA,CAWL,IAAI,EAAQ,EAEZ,MAAM,OACJ,GAAS,EAAQ,aACV,EAAM,UAAU,EAyBnB,EAAgB,IAAI,IAEpB,EAAoB,GAAoB,CAC5C,GAAI,EAAc,IAAI,EAAQ,CAC5B,OAGF,IAAM,EAAU,eAAiB,CAC/B,EAAc,OAAO,EAAQ,CAC7B,EAAS,CACP,KAAM,EAAY,aACT,UACV,CAAC,EACD,IAAmB,CAEtB,EAAc,IAAI,EAAS,EAAQ,EAsCxB,GAAW,EAAc,IAA0B,CAC9D,OAAQ,EAAO,KAAf,CACE,KAAK,EAAY,UACf,MAAO,CACL,GAAG,EACH,OAAQ,CAAC,EAAO,MAAO,GAAG,EAAM,OAAO,CAAC,MAAM,EAAG,EAAY,CAC9D,CAEH,KAAK,EAAY,aACf,MAAO,CACL,GAAG,EACH,OAAQ,EAAM,OAAO,IAAK,GACxB,EAAE,KAAO,EAAO,MAAM,GAAK,CAAE,GAAG,EAAG,GAAG,EAAO,MAAO,CAAG,EACxD,CACF,CAEH,KAAK,EAAY,cAAe,CAC9B,GAAM,CAAE,WAAY,EAYpB,OARI,EACF,EAAiB,EAAQ,CAEzB,EAAM,OAAO,QAAS,GAAU,CAC9B,EAAiB,EAAM,GAAG,EAC1B,CAGG,CACL,GAAG,EACH,OAAQ,EAAM,OAAO,IAAK,GACxB,EAAE,KAAO,GAAW,IAAY,IAAA,GAC5B,CACE,GAAG,EACH,KAAM,GACP,CACD,EACL,CACF,CAEH,KAAK,EAAY,aAOf,OANI,EAAO,UAAY,IAAA,GACd,CACL,GAAG,EACH,OAAQ,EAAE,CACX,CAEI,CACL,GAAG,EACH,OAAQ,EAAM,OAAO,OAAQ,GAAM,EAAE,KAAO,EAAO,QAAQ,CAC5D,GAID,EAAwC,EAAE,CAEhD,IAAI,EAAqB,CAAE,OAAQ,EAAE,CAAE,CAEvC,MAAM,EAAY,GAAmB,CACnC,EAAc,EAAQ,EAAa,EAAO,CAC1C,EAAU,QAAS,GAAa,CAC9B,EAAS,EAAY,EACrB,EA2DE,GAAS,CAAE,GAAG,KAAmB,CACrC,IAAM,EAAK,GAAO,CAEZ,EAAU,GACd,EAAS,CACP,KAAM,EAAY,aAClB,MAAO,CAAE,GAAG,EAAO,KAAI,CACxB,CAAC,CACE,MACJ,EAAS,CAAE,KAAM,EAAY,cAAe,QAAS,EAAI,CAAC,CAc5D,OAZA,EAAS,CACP,KAAM,EAAY,UAClB,MAAO,CACL,GAAG,EACH,KACA,KAAM,GACN,aAAe,GAAS,CACjB,GAAM,GAAS,EAEvB,CACF,CAAC,CAEK,CACD,KACJ,UACA,SACD,EAgFG,MAAiB,CACrB,GAAM,CAAC,EAAO,GAAY,EAAgB,EAAY,CAYtD,OAVA,OACE,EAAU,KAAK,EAAS,KACX,CACX,IAAM,EAAQ,EAAU,QAAQ,EAAS,CACrC,EAAQ,IACV,EAAU,OAAO,EAAO,EAAE,GAG7B,CAAC,EAAM,CAAC,CAEJ,CACL,GAAG,EACH,QACA,QAAU,GACR,EAAS,CAAE,KAAM,EAAY,cAAe,UAAS,CAAC,CACzD"}

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

@@ -1,201 +1,2 @@
-'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, handlePosition = "right", children }) => {
-	const containerRef = useRef(null);
-	const [width, setWidth] = useState(initialWidth);
-	const resizeState = useRef({
-		startX: 0,
-		startWidth: 0,
-		factor: 1
-	});
-	const resize = useCallback((mouseMoveEvent) => {
-		if (resizeState.current.startWidth === 0) return;
-		let clientX = 0;
-		if (mouseMoveEvent instanceof MouseEvent) clientX = mouseMoveEvent.clientX;
-		else if (typeof TouchEvent !== "undefined" && mouseMoveEvent instanceof TouchEvent) clientX = mouseMoveEvent.touches[0].clientX;
-		const { startX, startWidth, factor } = resizeState.current;
-		const delta = (clientX - startX) / factor;
-		const newWidth = startWidth + (handlePosition === "left" ? -delta : delta);
-		setWidth(Math.max(Math.min(newWidth, maxWidth ?? Infinity), minWidth));
-	}, [
-		maxWidth,
-		minWidth,
-		handlePosition
-	]);
-	const stopResizing = useCallback(() => {
-		document.body.style.cursor = "";
-		document.body.style.userSelect = "";
-		window.removeEventListener("mousemove", resize);
-		window.removeEventListener("mouseup", stopResizing);
-		window.removeEventListener("touchmove", resize);
-		window.removeEventListener("touchend", stopResizing);
-	}, [resize]);
-	const startResizing = useCallback((mouseDownEvent) => {
-		mouseDownEvent.preventDefault();
-		const container = containerRef.current;
-		if (!container) return;
-		const { width: rectWidth } = container.getBoundingClientRect();
-		const offsetWidth = container.offsetWidth;
-		const factor = offsetWidth > 0 ? rectWidth / offsetWidth : 1;
-		let clientX = 0;
-		if ("touches" in mouseDownEvent) clientX = mouseDownEvent.touches[0].clientX;
-		else clientX = mouseDownEvent.clientX;
-		resizeState.current = {
-			startX: clientX,
-			startWidth: offsetWidth,
-			factor
-		};
-		document.body.style.cursor = "ew-resize";
-		document.body.style.userSelect = "none";
-		window.addEventListener("mousemove", resize, { passive: true });
-		window.addEventListener("mouseup", stopResizing);
-		window.addEventListener("touchmove", resize, { passive: true });
-		window.addEventListener("touchend", stopResizing);
-	}, [resize, stopResizing]);
-	useEffect(() => {
-		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("relative h-full w-full max-w-[80%] shrink-0 cursor-ew-resize border-neutral-200 transition dark:border-neutral-950", handlePosition === "right" ? ["border-r-[2px]", "after:absolute after:top-1/2 after:right-0 after:block after:h-10 after:w-2 after:translate-x-1/2 after:-translate-y-1/2 after:transform after:cursor-ew-resize after:rounded-full after:bg-neutral-200 after:transition after:content-[\"\"] dark:after:bg-neutral-950"] : ["border-l-[2px]", "after:absolute after:top-1/2 after:left-0 after:block after:h-10 after:w-2 after:-translate-x-1/2 after:-translate-y-1/2 after:transform after:cursor-ew-resize after:rounded-full after:bg-neutral-200 after:transition after:content-[\"\"] dark:after:bg-neutral-950"], "active:border-neutral-400 active:after:bg-neutral-400 dark:active:border-neutral-600 active:dark:after:bg-neutral-600", minWidth && `min-w-[${minWidth}px]`, maxWidth && `max-w-[${maxWidth}px]`),
-		style: { width: `${width}px` },
-		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", {
-			role: "presentation",
-			className: "absolute top-0 left-0 size-full cursor-default overflow-hidden",
-			onMouseDown: (e) => e.stopPropagation(),
-			onTouchStart: (e) => e.stopPropagation(),
-			children
-		})
-	});
-};
-
-//#endregion
-export { WithResizer };
+"use client";import{cn as e}from"../../utils/cn.mjs";import{useCallback as t,useEffect as n,useRef as r,useState as i}from"react";import{jsx as a}from"react/jsx-runtime";const o=({initialWidth:o,maxWidth:s,minWidth:c=0,handlePosition:l=`right`,children:u})=>{let d=r(null),[f,p]=i(o),m=r({startX:0,startWidth:0,factor:1}),h=t(e=>{if(m.current.startWidth===0)return;let t=0;e instanceof MouseEvent?t=e.clientX:typeof TouchEvent<`u`&&e instanceof TouchEvent&&(t=e.touches[0].clientX);let{startX:n,startWidth:r,factor:i}=m.current,a=(t-n)/i,o=r+(l===`left`?-a:a);p(Math.max(Math.min(o,s??1/0),c))},[s,c,l]),g=t(()=>{document.body.style.cursor=``,document.body.style.userSelect=``,window.removeEventListener(`mousemove`,h),window.removeEventListener(`mouseup`,g),window.removeEventListener(`touchmove`,h),window.removeEventListener(`touchend`,g)},[h]),_=t(e=>{e.preventDefault();let t=d.current;if(!t)return;let{width:n}=t.getBoundingClientRect(),r=t.offsetWidth,i=r>0?n/r:1,a=0;a=`touches`in e?e.touches[0].clientX:e.clientX,m.current={startX:a,startWidth:r,factor:i},document.body.style.cursor=`ew-resize`,document.body.style.userSelect=`none`,window.addEventListener(`mousemove`,h,{passive:!0}),window.addEventListener(`mouseup`,g),window.addEventListener(`touchmove`,h,{passive:!0}),window.addEventListener(`touchend`,g)},[h,g]);return n(()=>()=>{window.removeEventListener(`mousemove`,h),window.removeEventListener(`mouseup`,g),window.removeEventListener(`touchmove`,h),window.removeEventListener(`touchend`,g)},[h,g]),a(`div`,{className:e(`relative h-full w-full max-w-[80%] shrink-0 cursor-ew-resize border-neutral-200 transition dark:border-neutral-950`,l===`right`?[`border-r-[2px]`,`after:absolute after:top-1/2 after:right-0 after:block after:h-10 after:w-2 after:translate-x-1/2 after:-translate-y-1/2 after:transform after:cursor-ew-resize after:rounded-full after:bg-neutral-200 after:transition after:content-[""] dark:after:bg-neutral-950`]:[`border-l-[2px]`,`after:absolute after:top-1/2 after:left-0 after:block after:h-10 after:w-2 after:-translate-x-1/2 after:-translate-y-1/2 after:transform after:cursor-ew-resize after:rounded-full after:bg-neutral-200 after:transition after:content-[""] dark:after:bg-neutral-950`],`active:border-neutral-400 active:after:bg-neutral-400 dark:active:border-neutral-600 active:dark:after:bg-neutral-600`,c&&`min-w-[${c}px]`,s&&`max-w-[${s}px]`),style:{width:`${f}px`},ref:d,onMouseDown:_,onTouchStart:_,"aria-valuemin":c,"aria-valuemax":s,"aria-valuenow":f,"aria-label":`Resizable component`,role:`slider`,tabIndex:0,children:a(`div`,{role:`presentation`,className:`absolute top-0 left-0 size-full cursor-default overflow-hidden`,onMouseDown:e=>e.stopPropagation(),onTouchStart:e=>e.stopPropagation(),children:u})})};export{o as WithResizer};
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/WithResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport React, {\n  type FC,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\n/**\n * Props for the WithResizer component.\n *\n * Defines the configuration for a resizable container with drag-based width adjustment.\n *\n * @example\n * ```tsx\n * // Basic resizable container\n * <WithResizer initialWidth={300} minWidth={200} maxWidth={600}>\n *   <div className=\"p-4\">Resizable content</div>\n * </WithResizer>\n *\n * // Sidebar with resizing\n * <WithResizer\n *   initialWidth={250}\n *   minWidth={180}\n *   maxWidth={400}\n * >\n *   <nav className=\"h-full p-4\">\n *     <SidebarContent />\n *   </nav>\n * </WithResizer>\n *\n * // Panel with unlimited growth\n * <WithResizer initialWidth={400} minWidth={300}>\n *   <div className=\"h-full overflow-auto\">\n *     <PanelContent />\n *   </div>\n * </WithResizer>\n * ```\n */\ntype WithResizerProps = {\n  /** Initial width of the resizable container in pixels */\n  initialWidth: number;\n  /** Maximum allowed width in pixels (optional, no limit if not specified) */\n  maxWidth?: number;\n  /** Minimum allowed width in pixels */\n  minWidth?: number;\n  /** Position of the resize handle (default: 'right') */\n  handlePosition?: 'left' | 'right';\n};\n\n/**\n * WithResizer Component\n *\n * A flexible container component that allows users to dynamically resize its width\n * through mouse or touch drag interactions. Perfect for creating adjustable panels,\n * sidebars, and split-pane layouts.\n *\n * ## Features\n * - **Mouse & Touch Support**: Works with both mouse drag and touch interactions\n * - **Constraint Enforcement**: Respects minimum and maximum width boundaries\n * - **Visual Feedback**: Clear resize handle with hover and active states\n * - **Smooth Interactions**: Passive event listeners for optimal performance\n * - **Accessibility**: ARIA slider role with proper value announcements\n * - **Responsive Design**: Adapts to different screen sizes and containers\n *\n * ## Technical Implementation\n * - **Event Handling**: Uses `useCallback` for optimal performance\n * - **Boundary Calculation**: Real-time width calculation based on mouse/touch position\n * - **State Management**: Tracks resizing state for visual feedback\n * - **Memory Management**: Proper cleanup of global event listeners\n * - **Touch Events**: Full support for mobile touch interactions\n *\n * ## Visual Design\n * - **Resize Handle**: Rounded handle positioned on the right border\n * - **Border Indicator**: Visual border showing resizable edge\n * - **State Feedback**: Different colors for normal, hover, and active states\n * - **Dark Mode**: Full support with appropriate color scheme\n * - **Smooth Transitions**: CSS transitions for visual polish\n *\n * ## Use Cases\n * - **Application Sidebars**: Collapsible navigation and tool panels\n * - **Content Panels**: Adjustable content areas in complex layouts\n * - **Split Panes**: Dividing screen space between multiple content areas\n * - **Inspector Panels**: Debugging tools and property inspectors\n * - **File Explorers**: Tree views with adjustable column widths\n * - **Dashboard Widgets**: Customizable widget sizes for dashboards\n *\n * ## Accessibility Features\n * - **ARIA Slider**: Proper slider role for screen readers\n * - **Value Announcements**: Current, minimum, and maximum values announced\n * - **Keyboard Focus**: Focusable with tab navigation\n * - **Clear Affordances**: Visual indicators for interactive elements\n *\n * @example\n * ```tsx\n * // Application sidebar with resizing\n * const [sidebarWidth, setSidebarWidth] = useState(250);\n *\n * <div className=\"flex h-screen\">\n *   <WithResizer\n *     initialWidth={sidebarWidth}\n *     minWidth={200}\n *     maxWidth={400}\n *   >\n *     <aside className=\"h-full bg-gray-100 p-4\">\n *       <nav>\n *         <NavItems />\n *       </nav>\n *     </aside>\n *   </WithResizer>\n *\n *   <main className=\"flex-1 p-6\">\n *     <MainContent />\n *   </main>\n * </div>\n *\n * // Developer tools panel\n * <WithResizer\n *   initialWidth={350}\n *   minWidth={250}\n *   maxWidth={600}\n * >\n *   <div className=\"h-full flex flex-col\">\n *     <div className=\"flex-1 overflow-auto p-4\">\n *       <InspectorContent />\n *     </div>\n *     <div className=\"border-t p-2\">\n *       <Controls />\n *     </div>\n *   </div>\n * </WithResizer>\n *\n * // Multi-column layout\n * <div className=\"flex h-full\">\n *   <WithResizer initialWidth={300} minWidth={200} maxWidth={500}>\n *     <FileExplorer />\n *   </WithResizer>\n *\n *   <WithResizer initialWidth={400} minWidth={300}>\n *     <CodeEditor />\n *   </WithResizer>\n *\n *   <div className=\"flex-1 min-w-0\">\n *     <OutputPanel />\n *   </div>\n * </div>\n * ```\n *\n * ## Performance Considerations\n * - Uses passive event listeners to prevent scroll blocking\n * - Optimized with `useCallback` to prevent unnecessary re-renders\n * - Efficient boundary calculations using `getBoundingClientRect`\n * - Minimal DOM manipulation for smooth drag interactions\n *\n * ## Browser Support\n * - Modern browsers with support for touch events\n * - Graceful degradation for older browsers\n * - Mobile-first touch interaction handling\n */\nexport const WithResizer: FC<PropsWithChildren<WithResizerProps>> = ({\n  initialWidth,\n  maxWidth,\n  minWidth = 0,\n  handlePosition = 'right',\n  children,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(initialWidth);\n\n  const resizeState = useRef({\n    startX: 0,\n    startWidth: 0,\n    factor: 1,\n  });\n\n  // Handler to resize the div\n  const resize = useCallback(\n    (mouseMoveEvent: MouseEvent | TouchEvent) => {\n      if (resizeState.current.startWidth === 0) return;\n\n      let clientX = 0;\n      if (mouseMoveEvent instanceof MouseEvent) {\n        clientX = mouseMoveEvent.clientX;\n      } else if (\n        typeof TouchEvent !== 'undefined' &&\n        mouseMoveEvent instanceof TouchEvent\n      ) {\n        clientX = mouseMoveEvent.touches[0].clientX;\n      }\n\n      const { startX, startWidth, factor } = resizeState.current;\n      const delta = (clientX - startX) / factor;\n      // Invert delta for left handle (moving left decreases width, moving right increases width)\n      const adjustedDelta = handlePosition === 'left' ? -delta : delta;\n      const newWidth = startWidth + adjustedDelta;\n\n      const constrainedWidth = Math.max(\n        Math.min(newWidth, maxWidth ?? Infinity),\n        minWidth\n      );\n\n      setWidth(constrainedWidth);\n    },\n    [maxWidth, minWidth, handlePosition]\n  );\n\n  // Handler to stop resizing\n  const stopResizing = useCallback(() => {\n    document.body.style.cursor = '';\n    document.body.style.userSelect = '';\n    window.removeEventListener('mousemove', resize);\n    window.removeEventListener('mouseup', stopResizing);\n    window.removeEventListener('touchmove', resize);\n    window.removeEventListener('touchend', stopResizing);\n  }, [resize]);\n\n  // Handler to start resizing\n  const startResizing = useCallback(\n    (\n      mouseDownEvent:\n        | React.MouseEvent<HTMLDivElement>\n        | React.TouchEvent<HTMLDivElement>\n    ) => {\n      mouseDownEvent.preventDefault();\n      const container = containerRef.current;\n\n      if (!container) return;\n\n      const { width: rectWidth } = container.getBoundingClientRect();\n      const offsetWidth = container.offsetWidth;\n      const factor = offsetWidth > 0 ? rectWidth / offsetWidth : 1;\n\n      let clientX = 0;\n      if ('touches' in mouseDownEvent) {\n        clientX = mouseDownEvent.touches[0].clientX;\n      } else {\n        clientX = mouseDownEvent.clientX;\n      }\n\n      resizeState.current = {\n        startX: clientX,\n        startWidth: offsetWidth,\n        factor,\n      };\n\n      document.body.style.cursor = 'ew-resize';\n      document.body.style.userSelect = 'none';\n\n      window.addEventListener('mousemove', resize, { passive: true });\n      window.addEventListener('mouseup', stopResizing);\n      window.addEventListener('touchmove', resize, { passive: true });\n      window.addEventListener('touchend', stopResizing);\n    },\n    [resize, stopResizing]\n  );\n\n  useEffect(() => {\n    return () => {\n      window.removeEventListener('mousemove', resize);\n      window.removeEventListener('mouseup', stopResizing);\n      window.removeEventListener('touchmove', resize);\n      window.removeEventListener('touchend', stopResizing);\n    };\n  }, [resize, stopResizing]);\n\n  return (\n    <div\n      className={cn(\n        'relative h-full w-full max-w-[80%] shrink-0 cursor-ew-resize border-neutral-200 transition dark:border-neutral-950',\n        handlePosition === 'right'\n          ? [\n              'border-r-[2px]',\n              'after:absolute after:top-1/2 after:right-0 after:block after:h-10 after:w-2 after:translate-x-1/2 after:-translate-y-1/2 after:transform after:cursor-ew-resize after:rounded-full after:bg-neutral-200 after:transition after:content-[\"\"] dark:after:bg-neutral-950',\n            ]\n          : [\n              'border-l-[2px]',\n              'after:absolute after:top-1/2 after:left-0 after:block after:h-10 after:w-2 after:-translate-x-1/2 after:-translate-y-1/2 after:transform after:cursor-ew-resize after:rounded-full after:bg-neutral-200 after:transition after:content-[\"\"] dark:after:bg-neutral-950',\n            ],\n        'active:border-neutral-400 active:after:bg-neutral-400 dark:active:border-neutral-600 active:dark:after:bg-neutral-600',\n        minWidth && `min-w-[${minWidth}px]`,\n        maxWidth && `max-w-[${maxWidth}px]`\n      )}\n      style={{\n        width: `${width}px`,\n      }}\n      ref={containerRef}\n      onMouseDown={startResizing}\n      onTouchStart={startResizing}\n      aria-valuemin={minWidth}\n      aria-valuemax={maxWidth}\n      aria-valuenow={width}\n      aria-label=\"Resizable component\"\n      role=\"slider\"\n      tabIndex={0}\n    >\n      {/* biome-ignore lint/a11y/noStaticElementInteractions: This div stops event propagation to prevent content clicks from triggering resize */}\n      <div\n        role=\"presentation\"\n        className=\"absolute top-0 left-0 size-full cursor-default overflow-hidden\"\n        onMouseDown={(e) => e.stopPropagation()}\n        onTouchStart={(e) => e.stopPropagation()}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmKA,MAAa,eAAwD,EACnE,cACA,UACA,WAAW,GACX,iBAAiB,SACjB,eACI;CACJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAEhD,MAAM,cAAc,OAAO;EACzB,QAAQ;EACR,YAAY;EACZ,QAAQ;EACT,CAAC;CAGF,MAAM,SAAS,aACZ,mBAA4C;AAC3C,MAAI,YAAY,QAAQ,eAAe,EAAG;EAE1C,IAAI,UAAU;AACd,MAAI,0BAA0B,WAC5B,WAAU,eAAe;WAEzB,OAAO,eAAe,eACtB,0BAA0B,WAE1B,WAAU,eAAe,QAAQ,GAAG;EAGtC,MAAM,EAAE,QAAQ,YAAY,WAAW,YAAY;EACnD,MAAM,SAAS,UAAU,UAAU;EAGnC,MAAM,WAAW,cADK,mBAAmB,SAAS,CAAC,QAAQ;AAQ3D,WALyB,KAAK,IAC5B,KAAK,IAAI,UAAU,YAAY,SAAS,EACxC,SACD,CAEyB;IAE5B;EAAC;EAAU;EAAU;EAAe,CACrC;CAGD,MAAM,eAAe,kBAAkB;AACrC,WAAS,KAAK,MAAM,SAAS;AAC7B,WAAS,KAAK,MAAM,aAAa;AACjC,SAAO,oBAAoB,aAAa,OAAO;AAC/C,SAAO,oBAAoB,WAAW,aAAa;AACnD,SAAO,oBAAoB,aAAa,OAAO;AAC/C,SAAO,oBAAoB,YAAY,aAAa;IACnD,CAAC,OAAO,CAAC;CAGZ,MAAM,gBAAgB,aAElB,mBAGG;AACH,iBAAe,gBAAgB;EAC/B,MAAM,YAAY,aAAa;AAE/B,MAAI,CAAC,UAAW;EAEhB,MAAM,EAAE,OAAO,cAAc,UAAU,uBAAuB;EAC9D,MAAM,cAAc,UAAU;EAC9B,MAAM,SAAS,cAAc,IAAI,YAAY,cAAc;EAE3D,IAAI,UAAU;AACd,MAAI,aAAa,eACf,WAAU,eAAe,QAAQ,GAAG;MAEpC,WAAU,eAAe;AAG3B,cAAY,UAAU;GACpB,QAAQ;GACR,YAAY;GACZ;GACD;AAED,WAAS,KAAK,MAAM,SAAS;AAC7B,WAAS,KAAK,MAAM,aAAa;AAEjC,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;IAEnD,CAAC,QAAQ,aAAa,CACvB;AAED,iBAAgB;AACd,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,sHACA,mBAAmB,UACf,CACE,kBACA,0QACD,GACD,CACE,kBACA,0QACD,EACL,yHACA,YAAY,UAAU,SAAS,MAC/B,YAAY,UAAU,SAAS,KAChC;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;YAGV,oBAAC;GACC,MAAK;GACL,WAAU;GACV,cAAc,MAAM,EAAE,iBAAiB;GACvC,eAAe,MAAM,EAAE,iBAAiB;GAEvC;IACG;GACF"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/WithResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport React, {\n  type FC,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\n/**\n * Props for the WithResizer component.\n *\n * Defines the configuration for a resizable container with drag-based width adjustment.\n *\n * @example\n * ```tsx\n * // Basic resizable container\n * <WithResizer initialWidth={300} minWidth={200} maxWidth={600}>\n *   <div className=\"p-4\">Resizable content</div>\n * </WithResizer>\n *\n * // Sidebar with resizing\n * <WithResizer\n *   initialWidth={250}\n *   minWidth={180}\n *   maxWidth={400}\n * >\n *   <nav className=\"h-full p-4\">\n *     <SidebarContent />\n *   </nav>\n * </WithResizer>\n *\n * // Panel with unlimited growth\n * <WithResizer initialWidth={400} minWidth={300}>\n *   <div className=\"h-full overflow-auto\">\n *     <PanelContent />\n *   </div>\n * </WithResizer>\n * ```\n */\ntype WithResizerProps = {\n  /** Initial width of the resizable container in pixels */\n  initialWidth: number;\n  /** Maximum allowed width in pixels (optional, no limit if not specified) */\n  maxWidth?: number;\n  /** Minimum allowed width in pixels */\n  minWidth?: number;\n  /** Position of the resize handle (default: 'right') */\n  handlePosition?: 'left' | 'right';\n};\n\n/**\n * WithResizer Component\n *\n * A flexible container component that allows users to dynamically resize its width\n * through mouse or touch drag interactions. Perfect for creating adjustable panels,\n * sidebars, and split-pane layouts.\n *\n * ## Features\n * - **Mouse & Touch Support**: Works with both mouse drag and touch interactions\n * - **Constraint Enforcement**: Respects minimum and maximum width boundaries\n * - **Visual Feedback**: Clear resize handle with hover and active states\n * - **Smooth Interactions**: Passive event listeners for optimal performance\n * - **Accessibility**: ARIA slider role with proper value announcements\n * - **Responsive Design**: Adapts to different screen sizes and containers\n *\n * ## Technical Implementation\n * - **Event Handling**: Uses `useCallback` for optimal performance\n * - **Boundary Calculation**: Real-time width calculation based on mouse/touch position\n * - **State Management**: Tracks resizing state for visual feedback\n * - **Memory Management**: Proper cleanup of global event listeners\n * - **Touch Events**: Full support for mobile touch interactions\n *\n * ## Visual Design\n * - **Resize Handle**: Rounded handle positioned on the right border\n * - **Border Indicator**: Visual border showing resizable edge\n * - **State Feedback**: Different colors for normal, hover, and active states\n * - **Dark Mode**: Full support with appropriate color scheme\n * - **Smooth Transitions**: CSS transitions for visual polish\n *\n * ## Use Cases\n * - **Application Sidebars**: Collapsible navigation and tool panels\n * - **Content Panels**: Adjustable content areas in complex layouts\n * - **Split Panes**: Dividing screen space between multiple content areas\n * - **Inspector Panels**: Debugging tools and property inspectors\n * - **File Explorers**: Tree views with adjustable column widths\n * - **Dashboard Widgets**: Customizable widget sizes for dashboards\n *\n * ## Accessibility Features\n * - **ARIA Slider**: Proper slider role for screen readers\n * - **Value Announcements**: Current, minimum, and maximum values announced\n * - **Keyboard Focus**: Focusable with tab navigation\n * - **Clear Affordances**: Visual indicators for interactive elements\n *\n * @example\n * ```tsx\n * // Application sidebar with resizing\n * const [sidebarWidth, setSidebarWidth] = useState(250);\n *\n * <div className=\"flex h-screen\">\n *   <WithResizer\n *     initialWidth={sidebarWidth}\n *     minWidth={200}\n *     maxWidth={400}\n *   >\n *     <aside className=\"h-full bg-gray-100 p-4\">\n *       <nav>\n *         <NavItems />\n *       </nav>\n *     </aside>\n *   </WithResizer>\n *\n *   <main className=\"flex-1 p-6\">\n *     <MainContent />\n *   </main>\n * </div>\n *\n * // Developer tools panel\n * <WithResizer\n *   initialWidth={350}\n *   minWidth={250}\n *   maxWidth={600}\n * >\n *   <div className=\"h-full flex flex-col\">\n *     <div className=\"flex-1 overflow-auto p-4\">\n *       <InspectorContent />\n *     </div>\n *     <div className=\"border-t p-2\">\n *       <Controls />\n *     </div>\n *   </div>\n * </WithResizer>\n *\n * // Multi-column layout\n * <div className=\"flex h-full\">\n *   <WithResizer initialWidth={300} minWidth={200} maxWidth={500}>\n *     <FileExplorer />\n *   </WithResizer>\n *\n *   <WithResizer initialWidth={400} minWidth={300}>\n *     <CodeEditor />\n *   </WithResizer>\n *\n *   <div className=\"flex-1 min-w-0\">\n *     <OutputPanel />\n *   </div>\n * </div>\n * ```\n *\n * ## Performance Considerations\n * - Uses passive event listeners to prevent scroll blocking\n * - Optimized with `useCallback` to prevent unnecessary re-renders\n * - Efficient boundary calculations using `getBoundingClientRect`\n * - Minimal DOM manipulation for smooth drag interactions\n *\n * ## Browser Support\n * - Modern browsers with support for touch events\n * - Graceful degradation for older browsers\n * - Mobile-first touch interaction handling\n */\nexport const WithResizer: FC<PropsWithChildren<WithResizerProps>> = ({\n  initialWidth,\n  maxWidth,\n  minWidth = 0,\n  handlePosition = 'right',\n  children,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(initialWidth);\n\n  const resizeState = useRef({\n    startX: 0,\n    startWidth: 0,\n    factor: 1,\n  });\n\n  // Handler to resize the div\n  const resize = useCallback(\n    (mouseMoveEvent: MouseEvent | TouchEvent) => {\n      if (resizeState.current.startWidth === 0) return;\n\n      let clientX = 0;\n      if (mouseMoveEvent instanceof MouseEvent) {\n        clientX = mouseMoveEvent.clientX;\n      } else if (\n        typeof TouchEvent !== 'undefined' &&\n        mouseMoveEvent instanceof TouchEvent\n      ) {\n        clientX = mouseMoveEvent.touches[0].clientX;\n      }\n\n      const { startX, startWidth, factor } = resizeState.current;\n      const delta = (clientX - startX) / factor;\n      // Invert delta for left handle (moving left decreases width, moving right increases width)\n      const adjustedDelta = handlePosition === 'left' ? -delta : delta;\n      const newWidth = startWidth + adjustedDelta;\n\n      const constrainedWidth = Math.max(\n        Math.min(newWidth, maxWidth ?? Infinity),\n        minWidth\n      );\n\n      setWidth(constrainedWidth);\n    },\n    [maxWidth, minWidth, handlePosition]\n  );\n\n  // Handler to stop resizing\n  const stopResizing = useCallback(() => {\n    document.body.style.cursor = '';\n    document.body.style.userSelect = '';\n    window.removeEventListener('mousemove', resize);\n    window.removeEventListener('mouseup', stopResizing);\n    window.removeEventListener('touchmove', resize);\n    window.removeEventListener('touchend', stopResizing);\n  }, [resize]);\n\n  // Handler to start resizing\n  const startResizing = useCallback(\n    (\n      mouseDownEvent:\n        | React.MouseEvent<HTMLDivElement>\n        | React.TouchEvent<HTMLDivElement>\n    ) => {\n      mouseDownEvent.preventDefault();\n      const container = containerRef.current;\n\n      if (!container) return;\n\n      const { width: rectWidth } = container.getBoundingClientRect();\n      const offsetWidth = container.offsetWidth;\n      const factor = offsetWidth > 0 ? rectWidth / offsetWidth : 1;\n\n      let clientX = 0;\n      if ('touches' in mouseDownEvent) {\n        clientX = mouseDownEvent.touches[0].clientX;\n      } else {\n        clientX = mouseDownEvent.clientX;\n      }\n\n      resizeState.current = {\n        startX: clientX,\n        startWidth: offsetWidth,\n        factor,\n      };\n\n      document.body.style.cursor = 'ew-resize';\n      document.body.style.userSelect = 'none';\n\n      window.addEventListener('mousemove', resize, { passive: true });\n      window.addEventListener('mouseup', stopResizing);\n      window.addEventListener('touchmove', resize, { passive: true });\n      window.addEventListener('touchend', stopResizing);\n    },\n    [resize, stopResizing]\n  );\n\n  useEffect(() => {\n    return () => {\n      window.removeEventListener('mousemove', resize);\n      window.removeEventListener('mouseup', stopResizing);\n      window.removeEventListener('touchmove', resize);\n      window.removeEventListener('touchend', stopResizing);\n    };\n  }, [resize, stopResizing]);\n\n  return (\n    <div\n      className={cn(\n        'relative h-full w-full max-w-[80%] shrink-0 cursor-ew-resize border-neutral-200 transition dark:border-neutral-950',\n        handlePosition === 'right'\n          ? [\n              'border-r-[2px]',\n              'after:absolute after:top-1/2 after:right-0 after:block after:h-10 after:w-2 after:translate-x-1/2 after:-translate-y-1/2 after:transform after:cursor-ew-resize after:rounded-full after:bg-neutral-200 after:transition after:content-[\"\"] dark:after:bg-neutral-950',\n            ]\n          : [\n              'border-l-[2px]',\n              'after:absolute after:top-1/2 after:left-0 after:block after:h-10 after:w-2 after:-translate-x-1/2 after:-translate-y-1/2 after:transform after:cursor-ew-resize after:rounded-full after:bg-neutral-200 after:transition after:content-[\"\"] dark:after:bg-neutral-950',\n            ],\n        'active:border-neutral-400 active:after:bg-neutral-400 dark:active:border-neutral-600 active:dark:after:bg-neutral-600',\n        minWidth && `min-w-[${minWidth}px]`,\n        maxWidth && `max-w-[${maxWidth}px]`\n      )}\n      style={{\n        width: `${width}px`,\n      }}\n      ref={containerRef}\n      onMouseDown={startResizing}\n      onTouchStart={startResizing}\n      aria-valuemin={minWidth}\n      aria-valuemax={maxWidth}\n      aria-valuenow={width}\n      aria-label=\"Resizable component\"\n      role=\"slider\"\n      tabIndex={0}\n    >\n      {/* biome-ignore lint/a11y/noStaticElementInteractions: This div stops event propagation to prevent content clicks from triggering resize */}\n      <div\n        role=\"presentation\"\n        className=\"absolute top-0 left-0 size-full cursor-default overflow-hidden\"\n        onMouseDown={(e) => e.stopPropagation()}\n        onTouchStart={(e) => e.stopPropagation()}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"0KAmKA,MAAa,GAAwD,CACnE,eACA,WACA,WAAW,EACX,iBAAiB,QACjB,cACI,CACJ,IAAM,EAAe,EAAuB,KAAK,CAC3C,CAAC,EAAO,GAAY,EAAS,EAAa,CAE1C,EAAc,EAAO,CACzB,OAAQ,EACR,WAAY,EACZ,OAAQ,EACT,CAAC,CAGI,EAAS,EACZ,GAA4C,CAC3C,GAAI,EAAY,QAAQ,aAAe,EAAG,OAE1C,IAAI,EAAU,EACV,aAA0B,WAC5B,EAAU,EAAe,QAEzB,OAAO,WAAe,KACtB,aAA0B,aAE1B,EAAU,EAAe,QAAQ,GAAG,SAGtC,GAAM,CAAE,SAAQ,aAAY,UAAW,EAAY,QAC7C,GAAS,EAAU,GAAU,EAG7B,EAAW,GADK,IAAmB,OAAS,CAAC,EAAQ,GAQ3D,EALyB,KAAK,IAC5B,KAAK,IAAI,EAAU,GAAY,IAAS,CACxC,EACD,CAEyB,EAE5B,CAAC,EAAU,EAAU,EAAe,CACrC,CAGK,EAAe,MAAkB,CACrC,SAAS,KAAK,MAAM,OAAS,GAC7B,SAAS,KAAK,MAAM,WAAa,GACjC,OAAO,oBAAoB,YAAa,EAAO,CAC/C,OAAO,oBAAoB,UAAW,EAAa,CACnD,OAAO,oBAAoB,YAAa,EAAO,CAC/C,OAAO,oBAAoB,WAAY,EAAa,EACnD,CAAC,EAAO,CAAC,CAGN,EAAgB,EAElB,GAGG,CACH,EAAe,gBAAgB,CAC/B,IAAM,EAAY,EAAa,QAE/B,GAAI,CAAC,EAAW,OAEhB,GAAM,CAAE,MAAO,GAAc,EAAU,uBAAuB,CACxD,EAAc,EAAU,YACxB,EAAS,EAAc,EAAI,EAAY,EAAc,EAEvD,EAAU,EACd,AAGE,EAHE,YAAa,EACL,EAAe,QAAQ,GAAG,QAE1B,EAAe,QAG3B,EAAY,QAAU,CACpB,OAAQ,EACR,WAAY,EACZ,SACD,CAED,SAAS,KAAK,MAAM,OAAS,YAC7B,SAAS,KAAK,MAAM,WAAa,OAEjC,OAAO,iBAAiB,YAAa,EAAQ,CAAE,QAAS,GAAM,CAAC,CAC/D,OAAO,iBAAiB,UAAW,EAAa,CAChD,OAAO,iBAAiB,YAAa,EAAQ,CAAE,QAAS,GAAM,CAAC,CAC/D,OAAO,iBAAiB,WAAY,EAAa,EAEnD,CAAC,EAAQ,EAAa,CACvB,CAWD,OATA,UACe,CACX,OAAO,oBAAoB,YAAa,EAAO,CAC/C,OAAO,oBAAoB,UAAW,EAAa,CACnD,OAAO,oBAAoB,YAAa,EAAO,CAC/C,OAAO,oBAAoB,WAAY,EAAa,EAErD,CAAC,EAAQ,EAAa,CAAC,CAGxB,EAAC,MAAA,CACC,UAAW,EACT,qHACA,IAAmB,QACf,CACE,iBACA,wQACD,CACD,CACE,iBACA,wQACD,CACL,wHACA,GAAY,UAAU,EAAS,KAC/B,GAAY,UAAU,EAAS,KAChC,CACD,MAAO,CACL,MAAO,GAAG,EAAM,IACjB,CACD,IAAK,EACL,YAAa,EACb,aAAc,EACd,gBAAe,EACf,gBAAe,EACf,gBAAe,EACf,aAAW,sBACX,KAAK,SACL,SAAU,WAGV,EAAC,MAAA,CACC,KAAK,eACL,UAAU,iEACV,YAAc,GAAM,EAAE,iBAAiB,CACvC,aAAe,GAAM,EAAE,iBAAiB,CAEvC,YACG,EACF"}