@marcoschwartz/lite-ui 0.23.4 → 0.24.0

package/dist/index.js

@@ -35,6 +35,7 @@ __export(index_exports, {
   Alert: () => Alert,
   AlertCircleIcon: () => AlertCircleIcon,
   AppShell: () => AppShell,
+  AppShellSection: () => AppShellSection,
   AppleIcon: () => AppleIcon,
   AreaChart: () => AreaChart,
   ArrowDownIcon: () => ArrowDownIcon,
@@ -155,6 +156,7 @@ __export(index_exports, {
   themeScript: () => themeScript,
   themes: () => themes,
   toast: () => toast,
+  useAppShell: () => useAppShell,
   useSidebar: () => useSidebar,
   useTheme: () => useTheme,
   useToast: () => useToast,
@@ -183,10 +185,10 @@ var themes = {
         link: "bg-transparent text-[hsl(var(--primary))] underline-offset-4 hover:underline !p-0 !h-auto !min-h-0 shadow-none"
       },
       sizes: {
-        sm: "px-3 py-1.5 text-sm h-8",
-        md: "px-4 py-2 text-sm h-9",
-        lg: "px-5 py-2.5 text-base h-10",
-        xl: "px-6 py-3 text-base h-11"
+        sm: "px-3 py-1.5 text-sm",
+        md: "px-4 py-2.5 text-base",
+        lg: "px-4 py-3 text-lg",
+        xl: "px-6 py-3.5 text-lg"
       },
       disabled: "pointer-events-none opacity-50"
     },
@@ -194,8 +196,8 @@ var themes = {
       base: "w-full appearance-none rounded-md border border-[hsl(var(--input))] bg-transparent text-[hsl(var(--foreground))] text-left transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]/50 focus:border-[hsl(var(--ring))] hover:border-[hsl(var(--muted-foreground))] pr-10 cursor-pointer",
       sizes: {
         sm: "px-3 py-1.5 text-sm",
-        md: "px-3 py-2.5 text-sm",
-        lg: "px-4 py-3 text-base",
+        md: "px-4 py-2.5 text-base",
+        lg: "px-4 py-3 text-lg",
         xl: "px-4 py-3.5 text-lg"
       },
       disabled: "pointer-events-none opacity-50 bg-[hsl(var(--muted))]"
@@ -1248,172 +1250,309 @@ var SlackIcon = createIcon(
 
 // src/components/AppShell.tsx
 var import_jsx_runtime78 = require("react/jsx-runtime");
+var AppShellContext = (0, import_react5.createContext)(null);
+var useAppShell = () => {
+  const context = (0, import_react5.useContext)(AppShellContext);
+  if (!context) {
+    throw new Error("useAppShell must be used within AppShell");
+  }
+  return context;
+};
+var heightClasses = {
+  sm: "h-12",
+  // 48px
+  md: "h-16",
+  // 64px
+  lg: "h-20"
+  // 80px
+};
 var widthClasses2 = {
   sm: "w-48",
+  // 192px
   md: "w-64",
+  // 256px
   lg: "w-80"
+  // 320px
 };
-var breakpointClasses = {
-  sm: "sm",
-  md: "md",
-  lg: "lg",
-  xl: "xl"
+var paddingClasses = {
+  none: "p-0",
+  sm: "p-2",
+  md: "p-4",
+  lg: "p-6"
 };
-var getVariantClasses = (variant) => {
+var getVariantClasses = (variant, withBorder = true) => {
+  const borderClass = withBorder ? "border-[hsl(var(--border))]" : "border-transparent";
   switch (variant) {
     case "glass":
-      return "bg-[hsl(var(--background))]/80 backdrop-blur-xl";
+      return `bg-[hsl(var(--background))]/80 backdrop-blur-xl ${borderClass}`;
     case "transparent":
-      return "bg-transparent";
+      return `bg-transparent ${borderClass}`;
     case "solid":
     default:
-      return "bg-[hsl(var(--background))] border-b border-[hsl(var(--border))]";
+      return `bg-[hsl(var(--card))] ${borderClass}`;
   }
 };
-var AppShell = ({
-  children,
-  navbar,
-  header,
-  navbarTitle,
-  navbarLogo,
-  defaultNavbarOpen = false,
-  responsive = true,
-  className = ""
-}) => {
-  const [isMobileNavbarOpen, setIsMobileNavbarOpen] = (0, import_react5.useState)(defaultNavbarOpen);
-  const navbarWidth = navbar?.width || "md";
-  const navbarBreakpoint = navbar?.breakpoint || "md";
-  const navbarPosition = navbar?.position || "side";
-  const widthClass = widthClasses2[navbarWidth];
-  const breakpoint = breakpointClasses[navbarBreakpoint];
-  if (!responsive && navbar) {
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `min-h-screen flex flex-col ${className}`, children: [
-      header && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "w-full", children: header }),
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex flex-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("aside", { className: `${widthClass} bg-[hsl(var(--card))] border-r border-[hsl(var(--border))] h-full overflow-y-auto`, children: navbar.content }),
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("main", { className: "flex-1 overflow-y-auto", children })
-      ] })
-    ] });
+var getBreakpointHideClass = (breakpoint) => {
+  switch (breakpoint) {
+    case "sm":
+      return "sm:hidden";
+    case "md":
+      return "md:hidden";
+    case "lg":
+      return "lg:hidden";
+    case "xl":
+      return "xl:hidden";
   }
-  if (!responsive) {
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `min-h-screen flex flex-col ${className}`, children: [
-      header && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "w-full", children: header }),
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("main", { className: "flex-1 overflow-y-auto", children })
-    ] });
+};
+var getBreakpointShowClass = (breakpoint) => {
+  switch (breakpoint) {
+    case "sm":
+      return "hidden sm:flex";
+    case "md":
+      return "hidden md:flex";
+    case "lg":
+      return "hidden lg:flex";
+    case "xl":
+      return "hidden xl:flex";
   }
-  if (navbar && navbarPosition === "top") {
-    const mobileMenuClass = navbarBreakpoint === "sm" ? "sm:hidden" : navbarBreakpoint === "md" ? "md:hidden" : navbarBreakpoint === "lg" ? "lg:hidden" : "xl:hidden";
-    const desktopNavClass = navbarBreakpoint === "sm" ? "sm:flex" : navbarBreakpoint === "md" ? "md:flex" : navbarBreakpoint === "lg" ? "lg:flex" : "xl:flex";
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `min-h-screen flex flex-col bg-[hsl(var(--background))] ${className}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("nav", { className: `sticky top-0 z-30 ${getVariantClasses(navbar.variant)}`, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex justify-between items-center h-16", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex items-center", children: navbarLogo ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: navbarTitle }) : null }),
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: `hidden ${desktopNavClass} items-center gap-6`, children: navbar.content }),
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-          "button",
-          {
-            className: `${mobileMenuClass} p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors`,
-            onClick: () => setIsMobileNavbarOpen(!isMobileNavbarOpen),
-            "aria-label": "Toggle menu",
-            children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(MenuIcon, { size: "md" })
-          }
-        )
-      ] }) }) }),
-      header && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "w-full", children: header }),
-      isMobileNavbarOpen && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-          "div",
-          {
-            className: `${mobileMenuClass} fixed inset-0 z-40 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200`,
-            onClick: () => setIsMobileNavbarOpen(false)
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `${mobileMenuClass} fixed left-0 top-0 bottom-0 z-50 w-64 bg-[hsl(var(--card))] shadow-2xl animate-in slide-in-from-left duration-300`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "p-4 border-b border-[hsl(var(--border))] flex items-center justify-between", children: [
-            navbarLogo ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: navbarTitle }) : null,
+};
+var MobileDrawer = ({
+  isOpen,
+  onClose,
+  position,
+  breakpoint,
+  title,
+  logo,
+  children
+}) => {
+  if (!isOpen) return null;
+  const hideClass = getBreakpointHideClass(breakpoint);
+  const slideClass = position === "left" ? "left-0 animate-in slide-in-from-left" : "right-0 animate-in slide-in-from-right";
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      "div",
+      {
+        className: `${hideClass} fixed inset-0 z-40 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200`,
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+      "div",
+      {
+        className: `${hideClass} fixed ${slideClass} top-0 bottom-0 z-50 w-64 bg-[hsl(var(--card))] shadow-2xl duration-300 flex flex-col`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "p-4 border-b border-[hsl(var(--border))] flex items-center justify-between shrink-0", children: [
+            logo ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { children: logo }) : title ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", {}),
             /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
               "button",
               {
                 className: "p-1 rounded hover:bg-[hsl(var(--accent))] transition-colors",
-                onClick: () => setIsMobileNavbarOpen(false),
+                onClick: onClose,
                 "aria-label": "Close menu",
                 children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-            "div",
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex-1 overflow-y-auto", onClick: onClose, children })
+        ]
+      }
+    )
+  ] });
+};
+var AppShell = ({
+  children,
+  header,
+  navbar,
+  aside,
+  footer,
+  logo,
+  title,
+  layout = "default",
+  padding = "none",
+  className = ""
+}) => {
+  const [navbarOpen, setNavbarOpen] = (0, import_react5.useState)(false);
+  const [asideOpen, setAsideOpen] = (0, import_react5.useState)(false);
+  const navbarWidth = navbar?.width || "md";
+  const navbarBreakpoint = navbar?.breakpoint || "md";
+  const navbarCollapsedMobile = navbar?.collapsed?.mobile ?? false;
+  const navbarCollapsedDesktop = navbar?.collapsed?.desktop ?? false;
+  const navbarVariant = navbar?.variant || "solid";
+  const navbarWithBorder = navbar?.withBorder ?? true;
+  const asideWidth = aside?.width || "md";
+  const asideBreakpoint = aside?.breakpoint || "md";
+  const asideCollapsedMobile = aside?.collapsed?.mobile ?? true;
+  const asideCollapsedDesktop = aside?.collapsed?.desktop ?? false;
+  const asideVariant = aside?.variant || "solid";
+  const asideWithBorder = aside?.withBorder ?? true;
+  const headerHeight = header?.height || "md";
+  const headerVariant = header?.variant || "solid";
+  const headerWithBorder = header?.withBorder ?? true;
+  const headerCollapsed = header?.collapsed ?? false;
+  const footerHeight = footer?.height || "md";
+  const footerVariant = footer?.variant || "solid";
+  const footerWithBorder = footer?.withBorder ?? true;
+  const footerCollapsed = footer?.collapsed ?? false;
+  const showNavbarHamburger = navbar && !navbarCollapsedMobile;
+  const showAsideHamburger = aside && !asideCollapsedMobile;
+  const needsMobileHeader = showNavbarHamburger || showAsideHamburger;
+  const navbarDesktopShowClass = getBreakpointShowClass(navbarBreakpoint);
+  const navbarMobileHideClass = getBreakpointHideClass(navbarBreakpoint);
+  const asideDesktopShowClass = getBreakpointShowClass(asideBreakpoint);
+  const asideMobileHideClass = getBreakpointHideClass(asideBreakpoint);
+  const contextValue = {
+    navbarOpen,
+    setNavbarOpen,
+    asideOpen,
+    setAsideOpen
+  };
+  if (layout === "alt") {
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(AppShellContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `min-h-screen flex bg-[hsl(var(--background))] ${className}`, children: [
+      navbar && !navbarCollapsedDesktop && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+        "aside",
+        {
+          className: `${navbarDesktopShowClass} ${widthClasses2[navbarWidth]} ${getVariantClasses(navbarVariant, navbarWithBorder)} ${navbarWithBorder ? "border-r" : ""} flex-col shrink-0`,
+          children: [
+            (logo || title) && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: `${heightClasses[headerHeight]} px-4 flex items-center border-b border-[hsl(var(--border))] shrink-0`, children: logo || /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: title }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("nav", { className: "flex-1 overflow-y-auto", children: navbar.content })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex-1 flex flex-col min-w-0", children: [
+        needsMobileHeader && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `${navbarMobileHideClass} sticky top-0 z-30 ${heightClasses[headerHeight]} px-4 flex items-center justify-between ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""}`, children: [
+          showNavbarHamburger && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+            "button",
             {
-              className: "p-4 flex flex-col gap-4",
-              onClick: () => setIsMobileNavbarOpen(false),
-              children: navbar.content
+              className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
+              onClick: () => setNavbarOpen(true),
+              "aria-label": "Open navigation",
+              children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(MenuIcon, { size: "md" })
             }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("main", { className: "flex-1 overflow-y-auto", children })
-    ] });
-  }
-  if (navbar) {
-    const mobileHeaderClass = navbarBreakpoint === "sm" ? "sm:hidden" : navbarBreakpoint === "md" ? "md:hidden" : navbarBreakpoint === "lg" ? "lg:hidden" : "xl:hidden";
-    const desktopNavbarClass = navbarBreakpoint === "sm" ? "sm:block" : navbarBreakpoint === "md" ? "md:block" : navbarBreakpoint === "lg" ? "lg:block" : "xl:block";
-    const mobileDrawerClass = navbarBreakpoint === "sm" ? "sm:hidden" : navbarBreakpoint === "md" ? "md:hidden" : navbarBreakpoint === "lg" ? "lg:hidden" : "xl:hidden";
-    const sidebarWidthClass = navbarWidth === "sm" ? "w-48" : navbarWidth === "lg" ? "w-80" : "w-64";
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `min-h-screen flex flex-col bg-[hsl(var(--background))] ${className}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `${mobileHeaderClass} sticky top-0 z-30 ${getVariantClasses(navbar.variant)} px-4 py-3 flex items-center justify-between`, children: [
-        navbarLogo ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: navbarTitle }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-          "button",
-          {
-            className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
-            onClick: () => setIsMobileNavbarOpen(!isMobileNavbarOpen),
-            "aria-label": "Toggle menu",
-            children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(MenuIcon, { size: "md" })
-          }
-        )
-      ] }),
-      header && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "w-full", children: header }),
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex flex-1 min-h-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("aside", { className: `hidden ${desktopNavbarClass} ${sidebarWidthClass} ${navbar.variant === "glass" ? "bg-[hsl(var(--background))]/80 backdrop-blur-xl" : navbar.variant === "transparent" ? "bg-transparent" : "bg-[hsl(var(--card))] border-r border-[hsl(var(--border))]"} overflow-y-auto shrink-0`, children: navbar.content }),
-        isMobileNavbarOpen && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-            "div",
+          ),
+          (logo || title) && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex-1 flex justify-center", children: logo || /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: title }) }),
+          showAsideHamburger ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+            "button",
             {
-              className: `${mobileDrawerClass} fixed inset-0 z-40 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200`,
-              onClick: () => setIsMobileNavbarOpen(false)
+              className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
+              onClick: () => setAsideOpen(true),
+              "aria-label": "Open sidebar",
+              children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(MenuIcon, { size: "md" })
             }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `${mobileDrawerClass} fixed left-0 top-0 bottom-0 z-50 w-64 bg-[hsl(var(--card))] shadow-2xl animate-in slide-in-from-left duration-300`, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "p-4 border-b border-[hsl(var(--border))] flex items-center justify-between", children: [
-              navbarLogo ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: navbarTitle }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-                "button",
-                {
-                  className: "p-1 rounded hover:bg-[hsl(var(--accent))] transition-colors",
-                  onClick: () => setIsMobileNavbarOpen(false),
-                  "aria-label": "Close menu",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-              "div",
-              {
-                className: "overflow-y-auto h-[calc(100vh-73px)]",
-                onClick: () => setIsMobileNavbarOpen(false),
-                children: navbar.content
-              }
-            )
-          ] })
+          ) : showNavbarHamburger && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "w-10" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("main", { className: "flex-1 overflow-y-auto min-h-screen", children })
-      ] })
-    ] });
+        header && !headerCollapsed && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("header", { className: `sticky top-0 z-20 ${heightClasses[headerHeight]} ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""} px-4 flex items-center shrink-0`, children: header.content }),
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("main", { className: `flex-1 overflow-y-auto ${paddingClasses[padding]}`, children }),
+        footer && !footerCollapsed && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("footer", { className: `${heightClasses[footerHeight]} ${getVariantClasses(footerVariant, footerWithBorder)} ${footerWithBorder ? "border-t" : ""} px-4 flex items-center shrink-0`, children: footer.content })
+      ] }),
+      aside && !asideCollapsedDesktop && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        "aside",
+        {
+          className: `${asideDesktopShowClass} ${widthClasses2[asideWidth]} ${getVariantClasses(asideVariant, asideWithBorder)} ${asideWithBorder ? "border-l" : ""} flex-col shrink-0 overflow-y-auto`,
+          children: aside.content
+        }
+      ),
+      navbar && !navbarCollapsedMobile && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        MobileDrawer,
+        {
+          isOpen: navbarOpen,
+          onClose: () => setNavbarOpen(false),
+          position: "left",
+          breakpoint: navbarBreakpoint,
+          title,
+          logo,
+          children: navbar.content
+        }
+      ),
+      aside && !asideCollapsedMobile && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        MobileDrawer,
+        {
+          isOpen: asideOpen,
+          onClose: () => setAsideOpen(false),
+          position: "right",
+          breakpoint: asideBreakpoint,
+          title: "Sidebar",
+          children: aside.content
+        }
+      )
+    ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `min-h-screen flex flex-col ${className}`, children: [
-    header && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "w-full", children: header }),
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("main", { className: "flex-1 overflow-y-auto", children })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(AppShellContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `min-h-screen flex flex-col bg-[hsl(var(--background))] ${className}`, children: [
+    needsMobileHeader && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `${navbarMobileHideClass} sticky top-0 z-30 ${heightClasses[headerHeight]} px-4 flex items-center justify-between ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""}`, children: [
+      showNavbarHamburger && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        "button",
+        {
+          className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
+          onClick: () => setNavbarOpen(true),
+          "aria-label": "Open navigation",
+          children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(MenuIcon, { size: "md" })
+        }
+      ),
+      (logo || title) && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex-1 flex justify-center", children: logo || /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: title }) }),
+      showAsideHamburger ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        "button",
+        {
+          className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
+          onClick: () => setAsideOpen(true),
+          "aria-label": "Open sidebar",
+          children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(MenuIcon, { size: "md" })
+        }
+      ) : showNavbarHamburger && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "w-10" })
+    ] }),
+    header && !headerCollapsed && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("header", { className: `sticky top-0 z-20 ${heightClasses[headerHeight]} ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""} px-4 flex items-center`, children: [
+      (logo || title) && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "mr-4 shrink-0", children: logo || /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: title }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex-1", children: header.content })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex flex-1 min-h-0", children: [
+      navbar && !navbarCollapsedDesktop && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        "nav",
+        {
+          className: `${navbarDesktopShowClass} ${widthClasses2[navbarWidth]} ${getVariantClasses(navbarVariant, navbarWithBorder)} ${navbarWithBorder ? "border-r" : ""} flex-col shrink-0 overflow-y-auto`,
+          children: navbar.content
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("main", { className: `flex-1 overflow-y-auto min-w-0 ${paddingClasses[padding]}`, children }),
+      aside && !asideCollapsedDesktop && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        "aside",
+        {
+          className: `${asideDesktopShowClass} ${widthClasses2[asideWidth]} ${getVariantClasses(asideVariant, asideWithBorder)} ${asideWithBorder ? "border-l" : ""} flex-col shrink-0 overflow-y-auto`,
+          children: aside.content
+        }
+      )
+    ] }),
+    footer && !footerCollapsed && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("footer", { className: `${heightClasses[footerHeight]} ${getVariantClasses(footerVariant, footerWithBorder)} ${footerWithBorder ? "border-t" : ""} px-4 flex items-center shrink-0`, children: footer.content }),
+    navbar && !navbarCollapsedMobile && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      MobileDrawer,
+      {
+        isOpen: navbarOpen,
+        onClose: () => setNavbarOpen(false),
+        position: "left",
+        breakpoint: navbarBreakpoint,
+        title,
+        logo,
+        children: navbar.content
+      }
+    ),
+    aside && !asideCollapsedMobile && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      MobileDrawer,
+      {
+        isOpen: asideOpen,
+        onClose: () => setAsideOpen(false),
+        position: "right",
+        breakpoint: asideBreakpoint,
+        title: "Sidebar",
+        children: aside.content
+      }
+    )
+  ] }) });
+};
+var AppShellSection = ({
+  children,
+  grow = false,
+  className = ""
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: `${grow ? "flex-1" : ""} ${className}`, children });
 };
+AppShell.Section = AppShellSection;
 
 // src/components/Drawer.tsx
 var import_react6 = require("react");
@@ -1566,8 +1705,8 @@ var import_react8 = require("react");
 var import_jsx_runtime81 = require("react/jsx-runtime");
 var sizeClasses5 = {
   sm: "px-3 py-1.5 text-sm",
-  md: "px-3 py-2.5 text-sm",
-  lg: "px-4 py-3 text-base"
+  md: "px-4 py-2.5 text-base",
+  lg: "px-4 py-3 text-lg"
 };
 var NumberInput = ({
   label,
@@ -1811,7 +1950,7 @@ var ActionMenu = ({
 
 // src/components/Card.tsx
 var import_jsx_runtime83 = require("react/jsx-runtime");
-var paddingClasses = {
+var paddingClasses2 = {
   none: "",
   sm: "p-4",
   md: "p-6",
@@ -1824,7 +1963,7 @@ var Card = ({
   hover = false,
   ...props
 }) => {
-  const paddingClass = paddingClasses[padding];
+  const paddingClass = paddingClasses2[padding];
   const hoverClass = hover ? "hover:shadow-lg hover:border-[hsl(var(--ring))]/50 cursor-pointer transition-all duration-200 ease-in-out" : "";
   return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
     "div",
@@ -2367,7 +2506,7 @@ var DatePicker = ({
       year: "numeric"
     });
   };
-  const baseStyles = "w-full appearance-none rounded-md border border-[hsl(var(--input))] bg-transparent text-[hsl(var(--foreground))] px-4 py-2.5 text-sm transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]/50 focus:border-[hsl(var(--ring))] hover:border-[hsl(var(--muted-foreground))] cursor-pointer";
+  const baseStyles = "w-full appearance-none rounded-md border border-[hsl(var(--input))] bg-transparent text-[hsl(var(--foreground))] px-4 py-2.5 text-base transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]/50 focus:border-[hsl(var(--ring))] hover:border-[hsl(var(--muted-foreground))] cursor-pointer";
   const errorStyles = error ? "border-[hsl(var(--destructive))] focus:ring-[hsl(var(--destructive))]/50" : "";
   const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-[hsl(var(--muted))]" : "";
   const calendar = isOpen && mounted && calendarPosition ? /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
@@ -2469,7 +2608,7 @@ var import_react14 = require("react");
 var import_jsx_runtime93 = require("react/jsx-runtime");
 var TimePicker = (0, import_react14.forwardRef)(
   ({ label, error, helperText, className = "", disabled, ...props }, ref) => {
-    const baseStyles = "w-full appearance-none rounded-md border border-[hsl(var(--input))] bg-transparent text-[hsl(var(--foreground))] px-3 py-2.5 text-sm transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]/50 focus:border-[hsl(var(--ring))] hover:border-[hsl(var(--muted-foreground))]";
+    const baseStyles = "w-full appearance-none rounded-md border border-[hsl(var(--input))] bg-transparent text-[hsl(var(--foreground))] px-4 py-2.5 text-base transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]/50 focus:border-[hsl(var(--ring))] hover:border-[hsl(var(--muted-foreground))]";
     const errorStyles = error ? "border-[hsl(var(--destructive))] focus:ring-[hsl(var(--destructive))]/50" : "";
     const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-[hsl(var(--muted))]" : "";
     return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className, children: [
@@ -2649,7 +2788,7 @@ var DateTimePicker = ({
     const displayMinutes = minutes.toString().padStart(2, "0");
     return `${displayHours}:${displayMinutes} ${period}`;
   };
-  const baseStyles = "w-full appearance-none rounded-md border border-[hsl(var(--input))] bg-transparent text-[hsl(var(--foreground))] px-4 py-2.5 text-sm transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]/50 focus:border-[hsl(var(--ring))] hover:border-[hsl(var(--muted-foreground))] cursor-pointer";
+  const baseStyles = "w-full appearance-none rounded-md border border-[hsl(var(--input))] bg-transparent text-[hsl(var(--foreground))] px-4 py-2.5 text-base transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]/50 focus:border-[hsl(var(--ring))] hover:border-[hsl(var(--muted-foreground))] cursor-pointer";
   const errorStyles = error ? "border-[hsl(var(--destructive))] focus:ring-[hsl(var(--destructive))]/50" : "";
   const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-[hsl(var(--muted))]" : "";
   const picker = isOpen && mounted && pickerPosition ? /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
@@ -3356,8 +3495,8 @@ var Textarea = ({
 }) => {
   const sizeClasses7 = {
     sm: "px-3 py-1.5 text-sm min-h-[80px]",
-    md: "px-3 py-2.5 text-sm min-h-[100px]",
-    lg: "px-4 py-3 text-base min-h-[120px]"
+    md: "px-4 py-2.5 text-base min-h-[100px]",
+    lg: "px-4 py-3 text-lg min-h-[120px]"
   };
   const resizeClasses = {
     none: "resize-none",
@@ -8884,6 +9023,7 @@ function getThemeScript() {
   Alert,
   AlertCircleIcon,
   AppShell,
+  AppShellSection,
   AppleIcon,
   AreaChart,
   ArrowDownIcon,
@@ -9004,6 +9144,7 @@ function getThemeScript() {
   themeScript,
   themes,
   toast,
+  useAppShell,
   useSidebar,
   useTheme,
   useToast,