@marcoschwartz/lite-ui 0.24.0 → 0.24.1

package/dist/index.mjs

@@ -1159,7 +1159,8 @@ var MobileDrawer = ({
   breakpoint,
   title,
   logo,
-  children
+  children,
+  headerContent
 }) => {
   if (!isOpen) return null;
   const hideClass = getBreakpointHideClass(breakpoint);
@@ -1175,7 +1176,7 @@ var MobileDrawer = ({
     /* @__PURE__ */ jsxs9(
       "div",
       {
-        className: `${hideClass} fixed ${slideClass} top-0 bottom-0 z-50 w-64 bg-[hsl(var(--card))] shadow-2xl duration-300 flex flex-col`,
+        className: `${hideClass} fixed ${slideClass} top-0 bottom-0 z-50 w-72 bg-[hsl(var(--card))] shadow-2xl duration-300 flex flex-col`,
         children: [
           /* @__PURE__ */ jsxs9("div", { className: "p-4 border-b border-[hsl(var(--border))] flex items-center justify-between shrink-0", children: [
             logo ? /* @__PURE__ */ jsx78("div", { children: logo }) : title ? /* @__PURE__ */ jsx78("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: title }) : /* @__PURE__ */ jsx78("div", {}),
@@ -1189,6 +1190,7 @@ var MobileDrawer = ({
               }
             )
           ] }),
+          headerContent && /* @__PURE__ */ jsx78("div", { className: "p-3 border-b border-[hsl(var(--border))] shrink-0", children: headerContent }),
           /* @__PURE__ */ jsx78("div", { className: "flex-1 overflow-y-auto", onClick: onClose, children })
         ]
       }
@@ -1225,6 +1227,7 @@ var AppShell = ({
   const headerVariant = header?.variant || "solid";
   const headerWithBorder = header?.withBorder ?? true;
   const headerCollapsed = header?.collapsed ?? false;
+  const headerMobileActions = header?.mobileActions;
   const footerHeight = footer?.height || "md";
   const footerVariant = footer?.variant || "solid";
   const footerWithBorder = footer?.withBorder ?? true;
@@ -1232,10 +1235,11 @@ var AppShell = ({
   const showNavbarHamburger = navbar && !navbarCollapsedMobile;
   const showAsideHamburger = aside && !asideCollapsedMobile;
   const needsMobileHeader = showNavbarHamburger || showAsideHamburger;
+  const mobileBreakpoint = navbarBreakpoint;
   const navbarDesktopShowClass = getBreakpointShowClass(navbarBreakpoint);
-  const navbarMobileHideClass = getBreakpointHideClass(navbarBreakpoint);
+  const mobileHideClass = getBreakpointHideClass(mobileBreakpoint);
+  const desktopShowClass = getBreakpointShowClass(mobileBreakpoint);
   const asideDesktopShowClass = getBreakpointShowClass(asideBreakpoint);
-  const asideMobileHideClass = getBreakpointHideClass(asideBreakpoint);
   const contextValue = {
     navbarOpen,
     setNavbarOpen,
@@ -1255,28 +1259,31 @@ var AppShell = ({
         }
       ),
       /* @__PURE__ */ jsxs9("div", { className: "flex-1 flex flex-col min-w-0", children: [
-        needsMobileHeader && /* @__PURE__ */ jsxs9("div", { className: `${navbarMobileHideClass} sticky top-0 z-30 ${heightClasses[headerHeight]} px-4 flex items-center justify-between ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""}`, children: [
+        needsMobileHeader && /* @__PURE__ */ jsxs9("div", { className: `${mobileHideClass} sticky top-0 z-30 ${heightClasses[headerHeight]} px-4 flex items-center justify-between ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""}`, children: [
           showNavbarHamburger && /* @__PURE__ */ jsx78(
             "button",
             {
-              className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
+              className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors shrink-0",
               onClick: () => setNavbarOpen(true),
               "aria-label": "Open navigation",
               children: /* @__PURE__ */ jsx78(MenuIcon, { size: "md" })
             }
           ),
-          (logo || title) && /* @__PURE__ */ jsx78("div", { className: "flex-1 flex justify-center", children: logo || /* @__PURE__ */ jsx78("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: title }) }),
-          showAsideHamburger ? /* @__PURE__ */ jsx78(
-            "button",
-            {
-              className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
-              onClick: () => setAsideOpen(true),
-              "aria-label": "Open sidebar",
-              children: /* @__PURE__ */ jsx78(MenuIcon, { size: "md" })
-            }
-          ) : showNavbarHamburger && /* @__PURE__ */ jsx78("div", { className: "w-10" })
+          (logo || title) && /* @__PURE__ */ jsx78("div", { className: "flex-1 flex items-center justify-center min-w-0", children: logo || /* @__PURE__ */ jsx78("span", { className: "text-lg font-bold text-[hsl(var(--foreground))] truncate", children: title }) }),
+          /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1 shrink-0", children: [
+            headerMobileActions,
+            showAsideHamburger && /* @__PURE__ */ jsx78(
+              "button",
+              {
+                className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
+                onClick: () => setAsideOpen(true),
+                "aria-label": "Open sidebar",
+                children: /* @__PURE__ */ jsx78(MenuIcon, { size: "md" })
+              }
+            )
+          ] })
         ] }),
-        header && !headerCollapsed && /* @__PURE__ */ jsx78("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 }),
+        header && !headerCollapsed && /* @__PURE__ */ jsx78("header", { className: `${needsMobileHeader ? desktopShowClass : ""} sticky top-0 z-20 ${heightClasses[headerHeight]} ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""} px-4 items-center shrink-0`, children: header.content }),
         /* @__PURE__ */ jsx78("main", { className: `flex-1 overflow-y-auto ${paddingClasses[padding]}`, children }),
         footer && !footerCollapsed && /* @__PURE__ */ jsx78("footer", { className: `${heightClasses[footerHeight]} ${getVariantClasses(footerVariant, footerWithBorder)} ${footerWithBorder ? "border-t" : ""} px-4 flex items-center shrink-0`, children: footer.content })
       ] }),
@@ -1296,6 +1303,7 @@ var AppShell = ({
           breakpoint: navbarBreakpoint,
           title,
           logo,
+          headerContent: header?.content,
           children: navbar.content
         }
       ),
@@ -1313,28 +1321,31 @@ var AppShell = ({
     ] }) });
   }
   return /* @__PURE__ */ jsx78(AppShellContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs9("div", { className: `min-h-screen flex flex-col bg-[hsl(var(--background))] ${className}`, children: [
-    needsMobileHeader && /* @__PURE__ */ jsxs9("div", { className: `${navbarMobileHideClass} sticky top-0 z-30 ${heightClasses[headerHeight]} px-4 flex items-center justify-between ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""}`, children: [
+    needsMobileHeader && /* @__PURE__ */ jsxs9("div", { className: `${mobileHideClass} sticky top-0 z-30 ${heightClasses[headerHeight]} px-4 flex items-center justify-between ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""}`, children: [
       showNavbarHamburger && /* @__PURE__ */ jsx78(
         "button",
         {
-          className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
+          className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors shrink-0",
           onClick: () => setNavbarOpen(true),
           "aria-label": "Open navigation",
           children: /* @__PURE__ */ jsx78(MenuIcon, { size: "md" })
         }
       ),
-      (logo || title) && /* @__PURE__ */ jsx78("div", { className: "flex-1 flex justify-center", children: logo || /* @__PURE__ */ jsx78("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: title }) }),
-      showAsideHamburger ? /* @__PURE__ */ jsx78(
-        "button",
-        {
-          className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
-          onClick: () => setAsideOpen(true),
-          "aria-label": "Open sidebar",
-          children: /* @__PURE__ */ jsx78(MenuIcon, { size: "md" })
-        }
-      ) : showNavbarHamburger && /* @__PURE__ */ jsx78("div", { className: "w-10" })
+      (logo || title) && /* @__PURE__ */ jsx78("div", { className: "flex-1 flex items-center justify-center min-w-0", children: logo || /* @__PURE__ */ jsx78("span", { className: "text-lg font-bold text-[hsl(var(--foreground))] truncate", children: title }) }),
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1 shrink-0", children: [
+        headerMobileActions,
+        showAsideHamburger && /* @__PURE__ */ jsx78(
+          "button",
+          {
+            className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
+            onClick: () => setAsideOpen(true),
+            "aria-label": "Open sidebar",
+            children: /* @__PURE__ */ jsx78(MenuIcon, { size: "md" })
+          }
+        )
+      ] })
     ] }),
-    header && !headerCollapsed && /* @__PURE__ */ jsxs9("header", { className: `sticky top-0 z-20 ${heightClasses[headerHeight]} ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""} px-4 flex items-center`, children: [
+    header && !headerCollapsed && /* @__PURE__ */ jsxs9("header", { className: `${needsMobileHeader ? desktopShowClass : ""} sticky top-0 z-20 ${heightClasses[headerHeight]} ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""} px-4 items-center`, children: [
       (logo || title) && /* @__PURE__ */ jsx78("div", { className: "mr-4 shrink-0", children: logo || /* @__PURE__ */ jsx78("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: title }) }),
       /* @__PURE__ */ jsx78("div", { className: "flex-1", children: header.content })
     ] }),
@@ -1365,6 +1376,7 @@ var AppShell = ({
         breakpoint: navbarBreakpoint,
         title,
         logo,
+        headerContent: header?.content,
         children: navbar.content
       }
     ),
@@ -1913,7 +1925,10 @@ Checkbox.displayName = "Checkbox";
 import { forwardRef as forwardRef3 } from "react";
 import { jsx as jsx86, jsxs as jsxs16 } from "react/jsx-runtime";
 var Toggle = forwardRef3(
-  ({ label, size = "md", className = "", disabled, checked, ...props }, ref) => {
+  ({ label, size = "md", className = "", disabled, checked, onChange, ...props }, ref) => {
+    const handleChange = (e) => {
+      onChange?.(e.target.checked);
+    };
     const toggleClasses = {
       sm: {
         switch: "w-9 h-5",
@@ -1939,6 +1954,7 @@ var Toggle = forwardRef3(
             className: "sr-only peer",
             disabled,
             checked,
+            onChange: handleChange,
             ...props
           }
         ),