@marcoschwartz/lite-ui 0.25.2 → 0.25.4

package/dist/index.mjs

@@ -603,33 +603,44 @@ var SidebarNav = ({
   collapsed: controlledCollapsed,
   onCollapseChange,
   storageKey = "sidebar-nav-collapsed",
-  className = ""
+  className = "",
+  expandedWidth = 256,
+  collapsedWidth = 64
 }) => {
   const [internalCollapsed, setInternalCollapsed] = useState3(defaultCollapsed);
   const [mounted, setMounted] = useState3(false);
   const isControlled = controlledCollapsed !== void 0;
   const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
+  const currentWidth = collapsible && collapsed ? collapsedWidth : expandedWidth;
   useEffect4(() => {
     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]);
+  useEffect4(() => {
+    if (mounted && collapsible) {
+      onCollapseChange?.(collapsed, currentWidth);
+    }
+  }, [mounted]);
   const setCollapsed = 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 = useCallback(() => {
     setCollapsed(!collapsed);
   }, [collapsed, setCollapsed]);
@@ -638,16 +649,15 @@ var SidebarNav = ({
     setCollapsed,
     toggleCollapsed
   };
-  const widthClass = collapsible && collapsed ? "w-16" : "w-64";
   return /* @__PURE__ */ jsx7(SidebarNavContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx7(
     "nav",
     {
       className: `
-          flex flex-col h-full
-          ${widthClass}
+          flex flex-col h-full overflow-x-hidden overflow-y-auto
           transition-[width] duration-200 ease-in-out
           ${className}
         `,
+      style: { width: currentWidth },
       "data-collapsed": collapsed,
       children
     }
@@ -658,7 +668,7 @@ var SidebarNavSection = ({
   grow = false,
   className = ""
 }) => {
-  return /* @__PURE__ */ jsx7("div", { className: `${grow ? "flex-1 overflow-y-auto" : ""} ${className}`, children });
+  return /* @__PURE__ */ jsx7("div", { className: `p-3 space-y-1 ${grow ? "flex-1 overflow-y-auto overflow-x-hidden" : ""} ${className}`, children });
 };
 var SidebarNavItem = ({
   icon,
@@ -683,8 +693,8 @@ var SidebarNavItem = ({
     flex items-center gap-3 w-full px-3 py-2.5 rounded-lg
     text-sm font-medium
     transition-colors duration-150
-    ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:bg-[hsl(var(--accent))]"}
-    ${active ? "bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))]" : "text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"}
+    ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+    ${active ? "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]" : "text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--foreground))]"}
     ${collapsed ? "justify-center px-0" : ""}
     ${className}
   `;
@@ -1472,6 +1482,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",
@@ -1614,10 +1632,11 @@ var AppShell = ({
       navbar && !navbarCollapsedDesktop && /* @__PURE__ */ jsxs10(
         "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__ */ jsx79("div", { className: `${heightClasses[headerHeight]} px-4 flex items-center border-b border-[hsl(var(--border))] shrink-0`, children: logo || /* @__PURE__ */ jsx79("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: title }) }),
-            /* @__PURE__ */ jsx79("nav", { className: "flex-1 overflow-y-auto", children: navbar.content })
+            /* @__PURE__ */ jsx79("nav", { className: "flex-1 overflow-y-auto overflow-x-hidden", children: navbar.content })
           ]
         }
       ),
@@ -1661,7 +1680,8 @@ var AppShell = ({
       aside && !asideCollapsedDesktop && /* @__PURE__ */ jsx79(
         "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 overflow-x-hidden`,
+          style: getWidthStyle(asideWidth),
           children: aside.content
         }
       ),
@@ -1743,7 +1763,8 @@ var AppShell = ({
       navbar && !navbarCollapsedDesktop && /* @__PURE__ */ jsx79(
         "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 overflow-x-hidden`,
+          style: getWidthStyle(navbarWidth),
           children: navbar.content
         }
       ),
@@ -1751,7 +1772,8 @@ var AppShell = ({
       aside && !asideCollapsedDesktop && /* @__PURE__ */ jsx79(
         "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 overflow-x-hidden`,
+          style: getWidthStyle(asideWidth),
           children: aside.content
         }
       )