@marcoschwartz/lite-ui 0.25.3 → 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.js

@@ -829,7 +829,7 @@ var SidebarNav = ({
     "nav",
     {
       className: `
-          flex flex-col h-full overflow-hidden
+          flex flex-col h-full overflow-x-hidden overflow-y-auto
           transition-[width] duration-200 ease-in-out
           ${className}
         `,
@@ -844,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,
@@ -869,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}
   `;
@@ -1812,7 +1812,7 @@ var AppShell = ({
           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 })
           ]
         }
       ),
@@ -1856,7 +1856,7 @@ var AppShell = ({
       aside && !asideCollapsedDesktop && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
         "aside",
         {
-          className: `${asideDesktopShowClass} ${getWidthClass(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
         }
@@ -1939,7 +1939,7 @@ var AppShell = ({
       navbar && !navbarCollapsedDesktop && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
         "nav",
         {
-          className: `${navbarDesktopShowClass} ${getWidthClass(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
         }
@@ -1948,7 +1948,7 @@ var AppShell = ({
       aside && !asideCollapsedDesktop && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
         "aside",
         {
-          className: `${asideDesktopShowClass} ${getWidthClass(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
         }