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

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

@@ -0,0 +1,9 @@
+//#region src/components/ThemeSwitcherDropDown/types.d.ts
+declare enum Modes {
+  dark = "dark",
+  light = "light",
+  system = "system",
+}
+//#endregion
+export { Modes };
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/types.ts"],"sourcesContent":[],"mappings":";aAAY,KAAA;EAAA,IAAA,GAAA,MAAK"}

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

@@ -0,0 +1,167 @@
+import { ComponentProps, FC, ReactElement } from "react";
+import * as class_variance_authority_types3 from "class-variance-authority/types";
+import { VariantProps } from "class-variance-authority";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+
+//#region src/components/Toaster/Toast.d.ts
+declare const ToastProvider: typeof ToastPrimitives;
+declare const ToastViewport: FC<ComponentProps<typeof ToastPrimitives.Viewport>>;
+/**
+ * Toast variant styles using class-variance-authority.
+ *
+ * Defines visual styles for different toast types with semantic colors,
+ * animations, and responsive behavior.
+ *
+ * @example
+ * ```tsx
+ * // Error toast with red background
+ * <Toast variant="error">Error message</Toast>
+ *
+ * // Success toast with green background
+ * <Toast variant="success">Success message</Toast>
+ *
+ * // Default toast with neutral styling
+ * <Toast variant="default">Info message</Toast>
+ * ```
+ */
+declare const toastVariants: (props?: {
+  variant?: "default" | "error" | "success";
+} & class_variance_authority_types3.ClassProp) => string;
+/**
+ * Toast Component
+ *
+ * A notification component that displays temporary messages to users using Radix UI primitives.
+ * Supports different visual variants, animations, and user interactions including swipe-to-dismiss.
+ *
+ * ## Features
+ * - **Visual Variants**: Error, success, and default styling themes
+ * - **Animations**: Smooth slide-in/slide-out transitions with fade effects
+ * - **Swipe Gestures**: Touch-friendly swipe-to-dismiss functionality
+ * - **Accessibility**: Full screen reader support and keyboard navigation
+ * - **Positioning**: Smart positioning with responsive viewport handling
+ * - **Auto-dismiss**: Configurable automatic dismissal timing
+ *
+ * ## Technical Implementation
+ * - Built on Radix UI Toast primitives for accessibility compliance
+ * - Uses Framer Motion for smooth animations and gestures
+ * - CVA (class-variance-authority) for consistent styling variants
+ * - Backdrop blur effects for modern visual appeal
+ * - CSS transforms for hardware-accelerated animations
+ *
+ * @example
+ * ```tsx
+ * // Basic toast with title and description
+ * <Toast variant="default">
+ *   <ToastTitle>Notification</ToastTitle>
+ *   <ToastDescription>Your action was completed successfully.</ToastDescription>
+ *   <ToastClose />
+ * </Toast>
+ *
+ * // Error toast with action button
+ * <Toast variant="error">
+ *   <ToastTitle>Upload Failed</ToastTitle>
+ *   <ToastDescription>Could not upload file. Please try again.</ToastDescription>
+ *   <ToastAction altText="Retry upload">Retry</ToastAction>
+ *   <ToastClose />
+ * </Toast>
+ * ```
+ */
+declare const Toast: FC<ComponentProps<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>>;
+/**
+ * ToastAction Component
+ *
+ * An interactive button component for toast notifications that allows users to take
+ * actions related to the notification message.
+ *
+ * ## Features
+ * - **Accessibility**: Requires `altText` prop for screen readers
+ * - **Visual States**: Hover, focus, and disabled state styling
+ * - **Theme Integration**: Supports destructive and default themes
+ * - **Keyboard Navigation**: Full keyboard accessibility support
+ *
+ * ## Usage Guidelines
+ * - Use for actionable notifications (retry, undo, view details)
+ * - Keep action text short and descriptive
+ * - Provide meaningful `altText` for accessibility
+ * - Limit to one primary action per toast
+ *
+ * @example
+ * ```tsx
+ * // Retry action for failed operations
+ * <ToastAction altText="Retry the failed operation">
+ *   Retry
+ * </ToastAction>
+ *
+ * // Undo action for reversible operations
+ * <ToastAction altText="Undo the last action">
+ *   Undo
+ * </ToastAction>
+ *
+ * // Navigation action
+ * <ToastAction altText="View the uploaded file">
+ *   View File
+ * </ToastAction>
+ * ```
+ */
+declare const ToastAction: FC<ComponentProps<typeof ToastPrimitives.Action>>;
+declare const ToastClose: FC<ComponentProps<typeof ToastPrimitives.Close>>;
+/**
+ * ToastTitle Component
+ *
+ * The primary heading text for toast notifications. Provides semantic structure
+ * and proper typography hierarchy within the toast.
+ *
+ * ## Styling Features
+ * - Semi-bold font weight for emphasis
+ * - Automatic text sizing adjustments for descriptions
+ * - Proper spacing relationships with other toast elements
+ *
+ * @example
+ * ```tsx
+ * <ToastTitle>File Upload Complete</ToastTitle>
+ * <ToastTitle>Error: Connection Failed</ToastTitle>
+ * <ToastTitle>Settings Saved</ToastTitle>
+ * ```
+ */
+declare const ToastTitle: FC<ComponentProps<typeof ToastPrimitives.Title>>;
+/**
+ * ToastDescription Component
+ *
+ * Supporting text that provides additional context or details for the toast notification.
+ * Complements the ToastTitle with more detailed information.
+ *
+ * ## Styling Features
+ * - Slightly reduced opacity for visual hierarchy
+ * - Smaller text size than title
+ * - Optimal line height for readability
+ *
+ * ## Content Guidelines
+ * - Keep descriptions concise but informative
+ * - Provide actionable information when possible
+ * - Use plain language for better accessibility
+ *
+ * @example
+ * ```tsx
+ * <ToastDescription>
+ *   Your document has been uploaded successfully and is now available for sharing.
+ * </ToastDescription>
+ *
+ * <ToastDescription>
+ *   Please check your internet connection and try again.
+ * </ToastDescription>
+ * ```
+ */
+declare const ToastDescription: FC<ComponentProps<typeof ToastPrimitives.Description>>;
+/**
+ * Props type for Toast component including all Radix UI Toast.Root props
+ * and variant styling options.
+ */
+type ToastProps = ComponentProps<typeof Toast>;
+/**
+ * Type for ToastAction elements used in toast configurations.
+ * Ensures type safety when passing action elements to toast functions.
+ */
+type ToastActionElement = ReactElement<typeof ToastAction>;
+//#endregion
+export { Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport };
+//# sourceMappingURL=Toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","names":[],"sources":["../../../../src/components/Toaster/Toast.tsx"],"sourcesContent":[],"mappings":";;;;;;cAQM,sBAAa;cAEb,eAAe,GAAG,sBAAsB,eAAA,CAAgB;;AALA;AAGzB;;;;;AAEd;;;;;;;;AA0FR;;;cA3DT,aA2Ga,EAAA,CAAA,KA2BlB,CA3BkB,EAAA;EAAE,OAAA,CAAA,EAAA,SAAA,GAAA,OAAA,GAAA,SAAA;AAAA,CAAA,GAzFpB,+BAAA,CAAA,SAoHA,EAAA,GAAA,MAAA;;;;;AAdmB;;;;;AAiCA;;;;;AAqCM;AAYM;;;;;;;;;;;;;;;;;;;;;;;;cA/I1B,OAAO,GACX,sBAAsB,eAAA,CAAgB,QACpC,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA8ClB,aAAa,GAAG,sBAAsB,eAAA,CAAgB;cAatD,YAAY,GAAG,sBAAsB,eAAA,CAAgB;;;;;;;;;;;;;;;;;;;cAiCrD,YAAY,GAAG,sBAAsB,eAAA,CAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAqCrD,kBAAkB,GACtB,sBAAsB,eAAA,CAAgB;;;;;KAWnC,UAAA,GAAa,sBAAsB;;;;;KAMnC,kBAAA,GAAqB,oBAAoB"}

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

@@ -0,0 +1,50 @@
+import * as react_jsx_runtime4 from "react/jsx-runtime";
+
+//#region src/components/Toaster/Toaster.d.ts
+
+/**
+ * Toast notification provider component that renders active toast notifications.
+ *
+ * This component serves as the visual layer for the toast system, rendering all
+ * active toasts and handling their animations and positioning. It should be placed
+ * at a high level in your component tree to ensure toasts appear above other content.
+ *
+ * ## Features
+ * - **Global Toast Rendering**: Renders all toasts from the global state
+ * - **Automatic Positioning**: Uses Radix UI positioning system
+ * - **Animation Integration**: Handles enter/exit animations for toasts
+ * - **Accessibility**: Provides proper ARIA landmarks and focus management
+ * - **Portal Rendering**: Renders toasts in a portal for z-index safety
+ *
+ * ## Positioning
+ * Toasts are positioned at the bottom-right of the viewport by default.
+ * This can be customized through the ToastViewport component styling.
+ *
+ * ## Integration
+ * Place this component near the root of your application, typically:
+ * - Next.js: In _app.tsx or layout.tsx
+ * - React: In your main App component
+ * - Ensure it's outside any containers that might clip overflow
+ *
+ * ## Usage Example
+ * Place Toaster component at the root level of your application to ensure
+ * toast notifications appear above all other content. Components throughout
+ * your app can then use the useToast hook to display notifications.
+ *
+ * ## Styling Notes
+ * - Toasts use fixed positioning to appear above all other content
+ * - The viewport is styled for bottom-right positioning by default
+ * - Animations are handled automatically through Radix UI primitives
+ * - Custom positioning can be achieved by styling the ToastViewport
+ *
+ * ## Performance
+ * - Only active toasts are rendered (dismissed toasts are cleaned up)
+ * - Animations are hardware-accelerated where possible
+ * - Memory usage is minimal due to automatic cleanup
+ *
+ * @returns JSX element rendering the toast viewport and active toasts
+ */
+declare const Toaster: () => react_jsx_runtime4.JSX.Element;
+//#endregion
+export { Toaster };
+//# sourceMappingURL=Toaster.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.d.ts","names":[],"sources":["../../../../src/components/Toaster/Toaster.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAsDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAa,eAAO,kBAAA,CAAA,GAAA,CAAA"}

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

@@ -0,0 +1,4 @@
+import { Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport } from "./Toast.js";
+import { Toaster } from "./Toaster.js";
+import { reducer, toast, useToast } from "./useToast.js";
+export { Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, reducer, toast, useToast };

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

@@ -0,0 +1,253 @@
+import { ToastActionElement, ToastProps } from "./Toast.js";
+import { ReactNode } from "react";
+
+//#region src/components/Toaster/useToast.d.ts
+
+/**
+ * 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 = {
+  type: ActionTypes.ADD_TOAST;
+  toast: ToasterToast;
+} | {
+  type: ActionTypes.UPDATE_TOAST;
+  toast: Partial<ToasterToast>;
+} | {
+  type: ActionTypes.DISMISS_TOAST;
+  toastId?: ToasterToast['id'];
+} | {
+  type: ActionTypes.REMOVE_TOAST;
+  toastId?: ToasterToast['id'];
+};
+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'
+ * });
+ * ```
+ */
+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;
+    dismiss: () => void;
+    update: (props: ToasterToast) => void;
+  };
+  dismiss: (toastId?: string) => void;
+  toasts: ToasterToast[];
+};
+//#endregion
+export { reducer, toast, useToast };
+//# sourceMappingURL=useToast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.d.ts","names":[],"sources":["../../../../src/components/Toaster/useToast.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAG8D;;;;;;AAuCjC;AASb;;;;;;;;KAjBX,YAAA,GAAe,UAiDI,GAAA;EACR;EAAY,EAAA,EAAA,MAAA;EAGvB;EAyDQ,KAAA,CAAA,EA1GH,SA+JT;EArD8B;EAAe,WAAA,CAAA,EAxG9B,SAwG8B;EAAS;EAqDtD,MAAA,CAAA,EA3JU,kBA2JV;AAAC,CAAA;AAiBe;AAuDoB;;;;;aA1NhC,WAAA;;;;;;;;;;KAkBA,MAAA;QAEO,WAAA,CAAY;SACX;;QAGD,WAAA,CAAY;SACX,QAAQ;;QAGT,WAAA,CAAY;YACR;;QAGJ,WAAA,CAAY;YACR;;KAGX,KAAA;UACK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAwDG,iBAAkB,eAAe,WAAS;;;;;KAsElD,KAAA,GAAQ,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAoDZ;;GAAuB;;;kBAGJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAwGnB;;;KA3GuB;;;oBAGJ;;;UArLf"}

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

@@ -0,0 +1,156 @@
+import { FC, PropsWithChildren } from "react";
+
+//#region src/components/WithResizer/index.d.ts
+
+/**
+ * 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
+ */
+declare const WithResizer: FC<PropsWithChildren<WithResizerProps>>;
+//#endregion
+export { WithResizer };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/WithResizer/index.tsx"],"sourcesContent":[],"mappings":";;;;;;AASe;AAwJf;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAtHK,gBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAsHQ,aAAa,GAAG,kBAAkB"}