@marcoschwartz/lite-ui 0.25.2 → 0.25.4

package/README.md

@@ -102,8 +102,10 @@ export default function Page() {
 - **DateTimePicker** - Combined date and time picker
 
 ### Layout & Navigation
+- **AppShell** - Complete app layout with header, navbar, aside, and footer
 - **Navbar** - Responsive navigation bar
 - **Sidebar** - Collapsible sidebar with mobile support
+- **SidebarNav** - Collapsible navigation with icon-only mode and tooltips
 - **Drawer** - Slide-out drawer panel
 - **Modal** - Accessible modal dialog
 - **Tabs** - Tabbed navigation component
@@ -313,6 +315,77 @@ export function ConfirmDialog() {
 }
 ```
 
+### Collapsible Sidebar Navigation
+
+```tsx
+"use client";
+
+import { useState } from 'react';
+import {
+  AppShell,
+  SidebarNav,
+  SidebarNavItem,
+  SidebarNavSection,
+  SidebarNavDivider,
+  SidebarNavCollapseToggle,
+  HomeIcon,
+  UserIcon,
+  SettingsIcon,
+} from '@marcoschwartz/lite-ui';
+
+export function DashboardLayout({ children }) {
+  const [activeItem, setActiveItem] = useState('dashboard');
+  const [navbarWidth, setNavbarWidth] = useState<number | undefined>();
+
+  return (
+    <AppShell
+      title="My App"
+      navbar={{
+        content: (
+          <SidebarNav
+            collapsible
+            onCollapseChange={(_, width) => setNavbarWidth(width)}
+          >
+            <SidebarNavSection grow>
+              <SidebarNavItem
+                icon={<HomeIcon size="sm" />}
+                label="Dashboard"
+                active={activeItem === 'dashboard'}
+                onClick={() => setActiveItem('dashboard')}
+              />
+              <SidebarNavItem
+                icon={<UserIcon size="sm" />}
+                label="Users"
+                active={activeItem === 'users'}
+                onClick={() => setActiveItem('users')}
+              />
+              <SidebarNavItem
+                icon={<SettingsIcon size="sm" />}
+                label="Settings"
+                active={activeItem === 'settings'}
+                onClick={() => setActiveItem('settings')}
+              />
+            </SidebarNavSection>
+            <SidebarNavDivider />
+            <SidebarNavCollapseToggle />
+          </SidebarNav>
+        ),
+        width: navbarWidth, // Dynamic width from SidebarNav
+      }}
+    >
+      {children}
+    </AppShell>
+  );
+}
+```
+
+**SidebarNav Features:**
+- **Collapsible mode** - Toggle between full and icon-only view
+- **Tooltips** - Show labels on hover when collapsed
+- **Persistent state** - Collapse state saved to localStorage
+- **Smooth transitions** - Animated width changes
+- **Mantine-compatible API** - Use `leftSection` as alias for `icon`
+
 ## 🛠️ Development
 
 ### Running the Demo

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-x-hidden overflow-y-auto
           transition-[width] duration-200 ease-in-out
           ${className}
         `,
+      style: { width: currentWidth },
       "data-collapsed": collapsed,
       children
     }
@@ -834,7 +844,7 @@ var SidebarNavSection = ({
   grow = false,
   className = ""
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${grow ? "flex-1 overflow-y-auto" : ""} ${className}`, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `p-3 space-y-1 ${grow ? "flex-1 overflow-y-auto overflow-x-hidden" : ""} ${className}`, children });
 };
 var SidebarNavItem = ({
   icon,
@@ -859,8 +869,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}
   `;
@@ -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,10 +1808,11 @@ 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 })
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("nav", { className: "flex-1 overflow-y-auto overflow-x-hidden", 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 overflow-x-hidden`,
+          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 overflow-x-hidden`,
+          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 overflow-x-hidden`,
+          style: getWidthStyle(asideWidth),
           children: aside.content
         }
       )