@marcoschwartz/lite-ui 0.25.2 → 0.25.3

package/dist/index.d.mts

@@ -68,9 +68,13 @@ interface SidebarNavProps {
     collapsible?: boolean;
     defaultCollapsed?: boolean;
     collapsed?: boolean;
-    onCollapseChange?: (collapsed: boolean) => void;
+    onCollapseChange?: (collapsed: boolean, width: number) => void;
     storageKey?: string;
     className?: string;
+    /** Width in pixels when expanded (default: 256) */
+    expandedWidth?: number;
+    /** Width in pixels when collapsed (default: 64) */
+    collapsedWidth?: number;
 }
 interface SidebarNavItemProps {
     /** Icon element (alias: leftSection) */
@@ -155,7 +159,7 @@ interface AppShellHeaderConfig {
 }
 interface AppShellNavbarConfig {
     content: React.ReactNode;
-    width?: 'sm' | 'md' | 'lg';
+    width?: 'sm' | 'md' | 'lg' | number;
     breakpoint?: 'sm' | 'md' | 'lg' | 'xl';
     variant?: 'solid' | 'glass' | 'transparent';
     collapsed?: {
@@ -166,7 +170,7 @@ interface AppShellNavbarConfig {
 }
 interface AppShellAsideConfig {
     content: React.ReactNode;
-    width?: 'sm' | 'md' | 'lg';
+    width?: 'sm' | 'md' | 'lg' | number;
     breakpoint?: 'sm' | 'md' | 'lg' | 'xl';
     variant?: 'solid' | 'glass' | 'transparent';
     collapsed?: {

package/dist/index.d.ts

@@ -68,9 +68,13 @@ interface SidebarNavProps {
     collapsible?: boolean;
     defaultCollapsed?: boolean;
     collapsed?: boolean;
-    onCollapseChange?: (collapsed: boolean) => void;
+    onCollapseChange?: (collapsed: boolean, width: number) => void;
     storageKey?: string;
     className?: string;
+    /** Width in pixels when expanded (default: 256) */
+    expandedWidth?: number;
+    /** Width in pixels when collapsed (default: 64) */
+    collapsedWidth?: number;
 }
 interface SidebarNavItemProps {
     /** Icon element (alias: leftSection) */
@@ -155,7 +159,7 @@ interface AppShellHeaderConfig {
 }
 interface AppShellNavbarConfig {
     content: React.ReactNode;
-    width?: 'sm' | 'md' | 'lg';
+    width?: 'sm' | 'md' | 'lg' | number;
     breakpoint?: 'sm' | 'md' | 'lg' | 'xl';
     variant?: 'solid' | 'glass' | 'transparent';
     collapsed?: {
@@ -166,7 +170,7 @@ interface AppShellNavbarConfig {
 }
 interface AppShellAsideConfig {
     content: React.ReactNode;
-    width?: 'sm' | 'md' | 'lg';
+    width?: 'sm' | 'md' | 'lg' | number;
     breakpoint?: 'sm' | 'md' | 'lg' | 'xl';
     variant?: 'solid' | 'glass' | 'transparent';
     collapsed?: {

package/dist/index.js

@@ -779,33 +779,44 @@ var SidebarNav = ({
   collapsed: controlledCollapsed,
   onCollapseChange,
   storageKey = "sidebar-nav-collapsed",
-  className = ""
+  className = "",
+  expandedWidth = 256,
+  collapsedWidth = 64
 }) => {
   const [internalCollapsed, setInternalCollapsed] = (0, import_react4.useState)(defaultCollapsed);
   const [mounted, setMounted] = (0, import_react4.useState)(false);
   const isControlled = controlledCollapsed !== void 0;
   const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
+  const currentWidth = collapsible && collapsed ? collapsedWidth : expandedWidth;
   (0, import_react4.useEffect)(() => {
     setMounted(true);
     if (!isControlled && collapsible && typeof window !== "undefined") {
       const stored = localStorage.getItem(storageKey);
       if (stored !== null) {
-        setInternalCollapsed(stored === "true");
+        const isCollapsed = stored === "true";
+        setInternalCollapsed(isCollapsed);
+        onCollapseChange?.(isCollapsed, isCollapsed ? collapsedWidth : expandedWidth);
       }
     }
   }, [isControlled, collapsible, storageKey]);
+  (0, import_react4.useEffect)(() => {
+    if (mounted && collapsible) {
+      onCollapseChange?.(collapsed, currentWidth);
+    }
+  }, [mounted]);
   const setCollapsed = (0, import_react4.useCallback)((value) => {
     if (!collapsible) return;
+    const newWidth = value ? collapsedWidth : expandedWidth;
     if (isControlled) {
-      onCollapseChange?.(value);
+      onCollapseChange?.(value, newWidth);
     } else {
       setInternalCollapsed(value);
       if (typeof window !== "undefined") {
         localStorage.setItem(storageKey, String(value));
       }
+      onCollapseChange?.(value, newWidth);
     }
-    onCollapseChange?.(value);
-  }, [collapsible, isControlled, onCollapseChange, storageKey]);
+  }, [collapsible, isControlled, onCollapseChange, storageKey, collapsedWidth, expandedWidth]);
   const toggleCollapsed = (0, import_react4.useCallback)(() => {
     setCollapsed(!collapsed);
   }, [collapsed, setCollapsed]);
@@ -814,16 +825,15 @@ var SidebarNav = ({
     setCollapsed,
     toggleCollapsed
   };
-  const widthClass = collapsible && collapsed ? "w-16" : "w-64";
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SidebarNavContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "nav",
     {
       className: `
-          flex flex-col h-full
-          ${widthClass}
+          flex flex-col h-full overflow-hidden
           transition-[width] duration-200 ease-in-out
           ${className}
         `,
+      style: { width: currentWidth },
       "data-collapsed": collapsed,
       children
     }
@@ -1648,6 +1658,14 @@ var widthClasses2 = {
   lg: "w-80"
   // 320px
 };
+var getWidthClass = (width) => {
+  if (typeof width === "number") return "";
+  return widthClasses2[width || "md"];
+};
+var getWidthStyle = (width) => {
+  if (typeof width === "number") return { width, transition: "width 200ms ease-in-out" };
+  return {};
+};
 var paddingClasses = {
   none: "p-0",
   sm: "p-2",
@@ -1790,7 +1808,8 @@ var AppShell = ({
       navbar && !navbarCollapsedDesktop && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
         "aside",
         {
-          className: `${navbarDesktopShowClass} ${widthClasses2[navbarWidth]} ${getVariantClasses(navbarVariant, navbarWithBorder)} ${navbarWithBorder ? "border-r" : ""} flex-col shrink-0`,
+          className: `${navbarDesktopShowClass} ${getWidthClass(navbarWidth)} ${getVariantClasses(navbarVariant, navbarWithBorder)} ${navbarWithBorder ? "border-r" : ""} flex-col shrink-0`,
+          style: getWidthStyle(navbarWidth),
           children: [
             (logo || title) && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: `${heightClasses[headerHeight]} px-4 flex items-center border-b border-[hsl(var(--border))] shrink-0`, children: logo || /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: title }) }),
             /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("nav", { className: "flex-1 overflow-y-auto", children: navbar.content })
@@ -1837,7 +1856,8 @@ var AppShell = ({
       aside && !asideCollapsedDesktop && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
         "aside",
         {
-          className: `${asideDesktopShowClass} ${widthClasses2[asideWidth]} ${getVariantClasses(asideVariant, asideWithBorder)} ${asideWithBorder ? "border-l" : ""} flex-col shrink-0 overflow-y-auto`,
+          className: `${asideDesktopShowClass} ${getWidthClass(asideWidth)} ${getVariantClasses(asideVariant, asideWithBorder)} ${asideWithBorder ? "border-l" : ""} flex-col shrink-0 overflow-y-auto`,
+          style: getWidthStyle(asideWidth),
           children: aside.content
         }
       ),
@@ -1919,7 +1939,8 @@ var AppShell = ({
       navbar && !navbarCollapsedDesktop && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
         "nav",
         {
-          className: `${navbarDesktopShowClass} ${widthClasses2[navbarWidth]} ${getVariantClasses(navbarVariant, navbarWithBorder)} ${navbarWithBorder ? "border-r" : ""} flex-col shrink-0 overflow-y-auto`,
+          className: `${navbarDesktopShowClass} ${getWidthClass(navbarWidth)} ${getVariantClasses(navbarVariant, navbarWithBorder)} ${navbarWithBorder ? "border-r" : ""} flex-col shrink-0 overflow-y-auto`,
+          style: getWidthStyle(navbarWidth),
           children: navbar.content
         }
       ),
@@ -1927,7 +1948,8 @@ var AppShell = ({
       aside && !asideCollapsedDesktop && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
         "aside",
         {
-          className: `${asideDesktopShowClass} ${widthClasses2[asideWidth]} ${getVariantClasses(asideVariant, asideWithBorder)} ${asideWithBorder ? "border-l" : ""} flex-col shrink-0 overflow-y-auto`,
+          className: `${asideDesktopShowClass} ${getWidthClass(asideWidth)} ${getVariantClasses(asideVariant, asideWithBorder)} ${asideWithBorder ? "border-l" : ""} flex-col shrink-0 overflow-y-auto`,
+          style: getWidthStyle(asideWidth),
           children: aside.content
         }
       )