@intlayer/design-system 6.1.5 → 6.1.6

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

@@ -1,9 +1,152 @@
 import { FC, PropsWithChildren } from 'react';
+/**
+ * Props for the WithResizer component.
+ *
+ * Defines the configuration for a resizable container with drag-based width adjustment.
+ *
+ * @example
+ * ```tsx
+ * // Basic resizable container
+ * <WithResizer initialWidth={300} minWidth={200} maxWidth={600}>
+ *   <div className="p-4">Resizable content</div>
+ * </WithResizer>
+ *
+ * // Sidebar with resizing
+ * <WithResizer
+ *   initialWidth={250}
+ *   minWidth={180}
+ *   maxWidth={400}
+ * >
+ *   <nav className="h-full p-4">
+ *     <SidebarContent />
+ *   </nav>
+ * </WithResizer>
+ *
+ * // Panel with unlimited growth
+ * <WithResizer initialWidth={400} minWidth={300}>
+ *   <div className="h-full overflow-auto">
+ *     <PanelContent />
+ *   </div>
+ * </WithResizer>
+ * ```
+ */
 type WithResizerProps = {
+    /** Initial width of the resizable container in pixels */
     initialWidth: number;
+    /** Maximum allowed width in pixels (optional, no limit if not specified) */
     maxWidth?: number;
+    /** Minimum allowed width in pixels */
     minWidth?: number;
 };
+/**
+ * WithResizer Component
+ *
+ * A flexible container component that allows users to dynamically resize its width
+ * through mouse or touch drag interactions. Perfect for creating adjustable panels,
+ * sidebars, and split-pane layouts.
+ *
+ * ## Features
+ * - **Mouse & Touch Support**: Works with both mouse drag and touch interactions
+ * - **Constraint Enforcement**: Respects minimum and maximum width boundaries
+ * - **Visual Feedback**: Clear resize handle with hover and active states
+ * - **Smooth Interactions**: Passive event listeners for optimal performance
+ * - **Accessibility**: ARIA slider role with proper value announcements
+ * - **Responsive Design**: Adapts to different screen sizes and containers
+ *
+ * ## Technical Implementation
+ * - **Event Handling**: Uses `useCallback` for optimal performance
+ * - **Boundary Calculation**: Real-time width calculation based on mouse/touch position
+ * - **State Management**: Tracks resizing state for visual feedback
+ * - **Memory Management**: Proper cleanup of global event listeners
+ * - **Touch Events**: Full support for mobile touch interactions
+ *
+ * ## Visual Design
+ * - **Resize Handle**: Rounded handle positioned on the right border
+ * - **Border Indicator**: Visual border showing resizable edge
+ * - **State Feedback**: Different colors for normal, hover, and active states
+ * - **Dark Mode**: Full support with appropriate color scheme
+ * - **Smooth Transitions**: CSS transitions for visual polish
+ *
+ * ## Use Cases
+ * - **Application Sidebars**: Collapsible navigation and tool panels
+ * - **Content Panels**: Adjustable content areas in complex layouts
+ * - **Split Panes**: Dividing screen space between multiple content areas
+ * - **Inspector Panels**: Debugging tools and property inspectors
+ * - **File Explorers**: Tree views with adjustable column widths
+ * - **Dashboard Widgets**: Customizable widget sizes for dashboards
+ *
+ * ## Accessibility Features
+ * - **ARIA Slider**: Proper slider role for screen readers
+ * - **Value Announcements**: Current, minimum, and maximum values announced
+ * - **Keyboard Focus**: Focusable with tab navigation
+ * - **Clear Affordances**: Visual indicators for interactive elements
+ *
+ * @example
+ * ```tsx
+ * // Application sidebar with resizing
+ * const [sidebarWidth, setSidebarWidth] = useState(250);
+ *
+ * <div className="flex h-screen">
+ *   <WithResizer
+ *     initialWidth={sidebarWidth}
+ *     minWidth={200}
+ *     maxWidth={400}
+ *   >
+ *     <aside className="h-full bg-gray-100 p-4">
+ *       <nav>
+ *         <NavItems />
+ *       </nav>
+ *     </aside>
+ *   </WithResizer>
+ *
+ *   <main className="flex-1 p-6">
+ *     <MainContent />
+ *   </main>
+ * </div>
+ *
+ * // Developer tools panel
+ * <WithResizer
+ *   initialWidth={350}
+ *   minWidth={250}
+ *   maxWidth={600}
+ * >
+ *   <div className="h-full flex flex-col">
+ *     <div className="flex-1 overflow-auto p-4">
+ *       <InspectorContent />
+ *     </div>
+ *     <div className="border-t p-2">
+ *       <Controls />
+ *     </div>
+ *   </div>
+ * </WithResizer>
+ *
+ * // Multi-column layout
+ * <div className="flex h-full">
+ *   <WithResizer initialWidth={300} minWidth={200} maxWidth={500}>
+ *     <FileExplorer />
+ *   </WithResizer>
+ *
+ *   <WithResizer initialWidth={400} minWidth={300}>
+ *     <CodeEditor />
+ *   </WithResizer>
+ *
+ *   <div className="flex-1 min-w-0">
+ *     <OutputPanel />
+ *   </div>
+ * </div>
+ * ```
+ *
+ * ## Performance Considerations
+ * - Uses passive event listeners to prevent scroll blocking
+ * - Optimized with `useCallback` to prevent unnecessary re-renders
+ * - Efficient boundary calculations using `getBoundingClientRect`
+ * - Minimal DOM manipulation for smooth drag interactions
+ *
+ * ## Browser Support
+ * - Modern browsers with support for touch events
+ * - Graceful degradation for older browsers
+ * - Mobile-first touch interaction handling
+ */
 export declare const WithResizer: FC<PropsWithChildren<WithResizerProps>>;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/WithResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type FC,\n  type PropsWithChildren,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\ntype WithResizerProps = {\n  initialWidth: number;\n  maxWidth?: number;\n  minWidth?: number;\n};\n\nexport const WithResizer: FC<PropsWithChildren<WithResizerProps>> = ({\n  initialWidth,\n  maxWidth,\n  minWidth = 0,\n  children,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(initialWidth);\n  const [isResizing, setIsResizing] = useState(false);\n\n  // Handler to start resizing\n  const startResizing = useCallback(\n    (\n      mouseDownEvent:\n        | React.MouseEvent<HTMLDivElement>\n        | React.TouchEvent<HTMLDivElement>\n    ) => {\n      setIsResizing(true);\n      mouseDownEvent.preventDefault();\n    },\n    []\n  );\n\n  // Handler to stop resizing\n  const stopResizing = useCallback(() => {\n    setIsResizing(false);\n  }, []);\n\n  // Handler to resize the div\n  const resize = useCallback(\n    (mouseMoveEvent: MouseEvent | TouchEvent) => {\n      const container = containerRef.current;\n      if (isResizing && container && parent) {\n        const { left: containerLeft } = container.getBoundingClientRect();\n\n        let clientX = 0;\n        if (mouseMoveEvent instanceof MouseEvent) {\n          clientX = mouseMoveEvent.clientX;\n        } else if (mouseMoveEvent instanceof TouchEvent) {\n          clientX = mouseMoveEvent.touches[0].clientX;\n        }\n\n        const newWidth = clientX - containerLeft;\n        const correctedWidth = Math.max(newWidth, 0);\n\n        setWidth(correctedWidth);\n      }\n    },\n    [isResizing]\n  );\n\n  // Add event listeners for mouse move and mouse up\n  useEffect(() => {\n    window.addEventListener('mousemove', resize, { passive: true });\n    window.addEventListener('mouseup', stopResizing);\n    window.addEventListener('touchmove', resize, { passive: true });\n    window.addEventListener('touchend', stopResizing);\n\n    return () => {\n      window.removeEventListener('mousemove', resize);\n      window.removeEventListener('mouseup', stopResizing);\n      window.removeEventListener('touchmove', resize);\n      window.removeEventListener('touchend', stopResizing);\n    };\n  }, [resize, stopResizing]);\n\n  return (\n    <div\n      className={cn(\n        minWidth && `max-w-[${maxWidth}px]`,\n        maxWidth && `min-w-[${minWidth}px]`,\n        'relative h-full w-full max-w-[80%] cursor-ew-resize border-r-[2px] border-neutral-200 transition dark:border-neutral-950',\n        'after:absolute after:right-0 after:top-1/2 after:block after:h-10 after:w-2 after:-translate-y-1/2 after:translate-x-1/2 after:transform after:cursor-ew-resize after:rounded-full after:bg-neutral-200 after:transition after:content-[\"\"] dark:after:bg-neutral-950',\n        'active:border-neutral-400 active:after:bg-neutral-400 dark:active:border-neutral-600 active:dark:after:bg-neutral-600'\n      )}\n      style={{\n        width: `${width}px`,\n      }}\n      ref={containerRef}\n      onMouseDown={startResizing}\n      onTouchStart={startResizing}\n      aria-valuemin={minWidth}\n      aria-valuemax={maxWidth}\n      aria-valuenow={width}\n      aria-label=\"Resizable component\"\n      role=\"slider\"\n      tabIndex={0}\n    >\n      <div\n        className=\"absolute left-0 top-0 size-full cursor-default overflow-hidden\"\n        onMouseDown={(e) => e.stopPropagation()}\n        onTouchStart={(e) => e.stopPropagation()}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAkBO,MAAM,cAAuD,CAAC;AAAA,EACnE;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,MAAM;AACJ,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAGlD,QAAM,gBAAgB;AAAA,IACpB,CACE,mBAGG;AACH,oBAAc,IAAI;AAClB,qBAAe,eAAA;AAAA,IACjB;AAAA,IACA,CAAA;AAAA,EAAC;AAIH,QAAM,eAAe,YAAY,MAAM;AACrC,kBAAc,KAAK;AAAA,EACrB,GAAG,CAAA,CAAE;AAGL,QAAM,SAAS;AAAA,IACb,CAAC,mBAA4C;AAC3C,YAAM,YAAY,aAAa;AAC/B,UAAI,cAAc,aAAa,QAAQ;AACrC,cAAM,EAAE,MAAM,kBAAkB,UAAU,sBAAA;AAE1C,YAAI,UAAU;AACd,YAAI,0BAA0B,YAAY;AACxC,oBAAU,eAAe;AAAA,QAC3B,WAAW,0BAA0B,YAAY;AAC/C,oBAAU,eAAe,QAAQ,CAAC,EAAE;AAAA,QACtC;AAEA,cAAM,WAAW,UAAU;AAC3B,cAAM,iBAAiB,KAAK,IAAI,UAAU,CAAC;AAE3C,iBAAS,cAAc;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAIb,YAAU,MAAM;AACd,WAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM;AAC9D,WAAO,iBAAiB,WAAW,YAAY;AAC/C,WAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM;AAC9D,WAAO,iBAAiB,YAAY,YAAY;AAEhD,WAAO,MAAM;AACX,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,WAAW,YAAY;AAClD,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,YAAY,YAAY;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,QAAQ,YAAY,CAAC;AAEzB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,YAAY,UAAU,QAAQ;AAAA,QAC9B,YAAY,UAAU,QAAQ;AAAA,QAC9B;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,OAAO,GAAG,KAAK;AAAA,MAAA;AAAA,MAEjB,KAAK;AAAA,MACL,aAAa;AAAA,MACb,cAAc;AAAA,MACd,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MAEV,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,aAAa,CAAC,MAAM,EAAE,gBAAA;AAAA,UACtB,cAAc,CAAC,MAAM,EAAE,gBAAA;AAAA,UAEtB;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/WithResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type FC,\n  type PropsWithChildren,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Props for the WithResizer component.\n *\n * Defines the configuration for a resizable container with drag-based width adjustment.\n *\n * @example\n * ```tsx\n * // Basic resizable container\n * <WithResizer initialWidth={300} minWidth={200} maxWidth={600}>\n *   <div className=\"p-4\">Resizable content</div>\n * </WithResizer>\n *\n * // Sidebar with resizing\n * <WithResizer\n *   initialWidth={250}\n *   minWidth={180}\n *   maxWidth={400}\n * >\n *   <nav className=\"h-full p-4\">\n *     <SidebarContent />\n *   </nav>\n * </WithResizer>\n *\n * // Panel with unlimited growth\n * <WithResizer initialWidth={400} minWidth={300}>\n *   <div className=\"h-full overflow-auto\">\n *     <PanelContent />\n *   </div>\n * </WithResizer>\n * ```\n */\ntype WithResizerProps = {\n  /** Initial width of the resizable container in pixels */\n  initialWidth: number;\n  /** Maximum allowed width in pixels (optional, no limit if not specified) */\n  maxWidth?: number;\n  /** Minimum allowed width in pixels */\n  minWidth?: number;\n};\n\n/**\n * WithResizer Component\n *\n * A flexible container component that allows users to dynamically resize its width\n * through mouse or touch drag interactions. Perfect for creating adjustable panels,\n * sidebars, and split-pane layouts.\n *\n * ## Features\n * - **Mouse & Touch Support**: Works with both mouse drag and touch interactions\n * - **Constraint Enforcement**: Respects minimum and maximum width boundaries\n * - **Visual Feedback**: Clear resize handle with hover and active states\n * - **Smooth Interactions**: Passive event listeners for optimal performance\n * - **Accessibility**: ARIA slider role with proper value announcements\n * - **Responsive Design**: Adapts to different screen sizes and containers\n *\n * ## Technical Implementation\n * - **Event Handling**: Uses `useCallback` for optimal performance\n * - **Boundary Calculation**: Real-time width calculation based on mouse/touch position\n * - **State Management**: Tracks resizing state for visual feedback\n * - **Memory Management**: Proper cleanup of global event listeners\n * - **Touch Events**: Full support for mobile touch interactions\n *\n * ## Visual Design\n * - **Resize Handle**: Rounded handle positioned on the right border\n * - **Border Indicator**: Visual border showing resizable edge\n * - **State Feedback**: Different colors for normal, hover, and active states\n * - **Dark Mode**: Full support with appropriate color scheme\n * - **Smooth Transitions**: CSS transitions for visual polish\n *\n * ## Use Cases\n * - **Application Sidebars**: Collapsible navigation and tool panels\n * - **Content Panels**: Adjustable content areas in complex layouts\n * - **Split Panes**: Dividing screen space between multiple content areas\n * - **Inspector Panels**: Debugging tools and property inspectors\n * - **File Explorers**: Tree views with adjustable column widths\n * - **Dashboard Widgets**: Customizable widget sizes for dashboards\n *\n * ## Accessibility Features\n * - **ARIA Slider**: Proper slider role for screen readers\n * - **Value Announcements**: Current, minimum, and maximum values announced\n * - **Keyboard Focus**: Focusable with tab navigation\n * - **Clear Affordances**: Visual indicators for interactive elements\n *\n * @example\n * ```tsx\n * // Application sidebar with resizing\n * const [sidebarWidth, setSidebarWidth] = useState(250);\n *\n * <div className=\"flex h-screen\">\n *   <WithResizer\n *     initialWidth={sidebarWidth}\n *     minWidth={200}\n *     maxWidth={400}\n *   >\n *     <aside className=\"h-full bg-gray-100 p-4\">\n *       <nav>\n *         <NavItems />\n *       </nav>\n *     </aside>\n *   </WithResizer>\n *\n *   <main className=\"flex-1 p-6\">\n *     <MainContent />\n *   </main>\n * </div>\n *\n * // Developer tools panel\n * <WithResizer\n *   initialWidth={350}\n *   minWidth={250}\n *   maxWidth={600}\n * >\n *   <div className=\"h-full flex flex-col\">\n *     <div className=\"flex-1 overflow-auto p-4\">\n *       <InspectorContent />\n *     </div>\n *     <div className=\"border-t p-2\">\n *       <Controls />\n *     </div>\n *   </div>\n * </WithResizer>\n *\n * // Multi-column layout\n * <div className=\"flex h-full\">\n *   <WithResizer initialWidth={300} minWidth={200} maxWidth={500}>\n *     <FileExplorer />\n *   </WithResizer>\n *\n *   <WithResizer initialWidth={400} minWidth={300}>\n *     <CodeEditor />\n *   </WithResizer>\n *\n *   <div className=\"flex-1 min-w-0\">\n *     <OutputPanel />\n *   </div>\n * </div>\n * ```\n *\n * ## Performance Considerations\n * - Uses passive event listeners to prevent scroll blocking\n * - Optimized with `useCallback` to prevent unnecessary re-renders\n * - Efficient boundary calculations using `getBoundingClientRect`\n * - Minimal DOM manipulation for smooth drag interactions\n *\n * ## Browser Support\n * - Modern browsers with support for touch events\n * - Graceful degradation for older browsers\n * - Mobile-first touch interaction handling\n */\nexport const WithResizer: FC<PropsWithChildren<WithResizerProps>> = ({\n  initialWidth,\n  maxWidth,\n  minWidth = 0,\n  children,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(initialWidth);\n  const [isResizing, setIsResizing] = useState(false);\n\n  // Handler to start resizing\n  const startResizing = useCallback(\n    (\n      mouseDownEvent:\n        | React.MouseEvent<HTMLDivElement>\n        | React.TouchEvent<HTMLDivElement>\n    ) => {\n      setIsResizing(true);\n      mouseDownEvent.preventDefault();\n    },\n    []\n  );\n\n  // Handler to stop resizing\n  const stopResizing = useCallback(() => {\n    setIsResizing(false);\n  }, []);\n\n  // Handler to resize the div\n  const resize = useCallback(\n    (mouseMoveEvent: MouseEvent | TouchEvent) => {\n      const container = containerRef.current;\n      if (isResizing && container && parent) {\n        const { left: containerLeft } = container.getBoundingClientRect();\n\n        let clientX = 0;\n        if (mouseMoveEvent instanceof MouseEvent) {\n          clientX = mouseMoveEvent.clientX;\n        } else if (mouseMoveEvent instanceof TouchEvent) {\n          clientX = mouseMoveEvent.touches[0].clientX;\n        }\n\n        const newWidth = clientX - containerLeft;\n        const correctedWidth = Math.max(newWidth, 0);\n\n        setWidth(correctedWidth);\n      }\n    },\n    [isResizing]\n  );\n\n  // Add event listeners for mouse move and mouse up\n  useEffect(() => {\n    window.addEventListener('mousemove', resize, { passive: true });\n    window.addEventListener('mouseup', stopResizing);\n    window.addEventListener('touchmove', resize, { passive: true });\n    window.addEventListener('touchend', stopResizing);\n\n    return () => {\n      window.removeEventListener('mousemove', resize);\n      window.removeEventListener('mouseup', stopResizing);\n      window.removeEventListener('touchmove', resize);\n      window.removeEventListener('touchend', stopResizing);\n    };\n  }, [resize, stopResizing]);\n\n  return (\n    <div\n      className={cn(\n        minWidth && `max-w-[${maxWidth}px]`,\n        maxWidth && `min-w-[${minWidth}px]`,\n        'relative h-full w-full max-w-[80%] cursor-ew-resize border-r-[2px] border-neutral-200 transition dark:border-neutral-950',\n        'after:absolute after:right-0 after:top-1/2 after:block after:h-10 after:w-2 after:-translate-y-1/2 after:translate-x-1/2 after:transform after:cursor-ew-resize after:rounded-full after:bg-neutral-200 after:transition after:content-[\"\"] dark:after:bg-neutral-950',\n        'active:border-neutral-400 active:after:bg-neutral-400 dark:active:border-neutral-600 active:dark:after:bg-neutral-600'\n      )}\n      style={{\n        width: `${width}px`,\n      }}\n      ref={containerRef}\n      onMouseDown={startResizing}\n      onTouchStart={startResizing}\n      aria-valuemin={minWidth}\n      aria-valuemax={maxWidth}\n      aria-valuenow={width}\n      aria-label=\"Resizable component\"\n      role=\"slider\"\n      tabIndex={0}\n    >\n      <div\n        className=\"absolute left-0 top-0 size-full cursor-default overflow-hidden\"\n        onMouseDown={(e) => e.stopPropagation()}\n        onTouchStart={(e) => e.stopPropagation()}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAiKO,MAAM,cAAuD,CAAC;AAAA,EACnE;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,MAAM;AACJ,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAGlD,QAAM,gBAAgB;AAAA,IACpB,CACE,mBAGG;AACH,oBAAc,IAAI;AAClB,qBAAe,eAAA;AAAA,IACjB;AAAA,IACA,CAAA;AAAA,EAAC;AAIH,QAAM,eAAe,YAAY,MAAM;AACrC,kBAAc,KAAK;AAAA,EACrB,GAAG,CAAA,CAAE;AAGL,QAAM,SAAS;AAAA,IACb,CAAC,mBAA4C;AAC3C,YAAM,YAAY,aAAa;AAC/B,UAAI,cAAc,aAAa,QAAQ;AACrC,cAAM,EAAE,MAAM,kBAAkB,UAAU,sBAAA;AAE1C,YAAI,UAAU;AACd,YAAI,0BAA0B,YAAY;AACxC,oBAAU,eAAe;AAAA,QAC3B,WAAW,0BAA0B,YAAY;AAC/C,oBAAU,eAAe,QAAQ,CAAC,EAAE;AAAA,QACtC;AAEA,cAAM,WAAW,UAAU;AAC3B,cAAM,iBAAiB,KAAK,IAAI,UAAU,CAAC;AAE3C,iBAAS,cAAc;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAIb,YAAU,MAAM;AACd,WAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM;AAC9D,WAAO,iBAAiB,WAAW,YAAY;AAC/C,WAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM;AAC9D,WAAO,iBAAiB,YAAY,YAAY;AAEhD,WAAO,MAAM;AACX,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,WAAW,YAAY;AAClD,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,YAAY,YAAY;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,QAAQ,YAAY,CAAC;AAEzB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,YAAY,UAAU,QAAQ;AAAA,QAC9B,YAAY,UAAU,QAAQ;AAAA,QAC9B;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,OAAO,GAAG,KAAK;AAAA,MAAA;AAAA,MAEjB,KAAK;AAAA,MACL,aAAa;AAAA,MACb,cAAc;AAAA,MACd,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MAEV,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,aAAa,CAAC,MAAM,EAAE,gBAAA;AAAA,UACtB,cAAc,CAAC,MAAM,EAAE,gBAAA;AAAA,UAEtB;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}

package/dist/components/index.cjs

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

package/dist/components/index.d.ts

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

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

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

package/dist/components/index.mjs

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

package/dist/components/index.mjs.map

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

package/dist/hooks/auth.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const configuration = require("@intlayer/config/built");
+const defaultConfiguration = require("@intlayer/config/built");
 const betterAuth_CiuwFiHM = require("../better-auth.CiuwFiHM-C2nBKRMa.cjs");
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -1666,7 +1666,7 @@ function createAuthClient(options) {
   return proxy;
 }
 const getAuthAPI = (intlayerConfig) => {
-  const backendURL = intlayerConfig?.editor?.backendURL ?? configuration.editor?.backendURL;
+  const backendURL = intlayerConfig?.editor?.backendURL ?? defaultConfiguration.editor?.backendURL;
   if (!backendURL) {
     throw new Error(
       "Backend URL is not defined in the Intlayer configuration."