@marcoschwartz/lite-ui 0.24.6 → 0.24.7

package/dist/index.d.mts

@@ -79,6 +79,7 @@ interface AppShellHeaderConfig {
     variant?: 'solid' | 'glass' | 'transparent';
     collapsed?: boolean;
     withBorder?: boolean;
+    contained?: boolean;
 }
 interface AppShellNavbarConfig {
     content: React.ReactNode;
@@ -108,6 +109,7 @@ interface AppShellFooterConfig {
     variant?: 'solid' | 'glass' | 'transparent';
     collapsed?: boolean;
     withBorder?: boolean;
+    contained?: boolean;
 }
 interface AppShellProps {
     children: React.ReactNode;

package/dist/index.d.ts

@@ -79,6 +79,7 @@ interface AppShellHeaderConfig {
     variant?: 'solid' | 'glass' | 'transparent';
     collapsed?: boolean;
     withBorder?: boolean;
+    contained?: boolean;
 }
 interface AppShellNavbarConfig {
     content: React.ReactNode;
@@ -108,6 +109,7 @@ interface AppShellFooterConfig {
     variant?: 'solid' | 'glass' | 'transparent';
     collapsed?: boolean;
     withBorder?: boolean;
+    contained?: boolean;
 }
 interface AppShellProps {
     children: React.ReactNode;

package/dist/index.js

@@ -1390,10 +1390,12 @@ var AppShell = ({
   const headerVariant = header?.variant || "solid";
   const headerWithBorder = header?.withBorder ?? true;
   const headerCollapsed = header?.collapsed ?? false;
+  const headerContained = header?.contained ?? false;
   const footerHeight = footer?.height || "md";
   const footerVariant = footer?.variant || "solid";
   const footerWithBorder = footer?.withBorder ?? true;
   const footerCollapsed = footer?.collapsed ?? false;
+  const footerContained = footer?.contained ?? false;
   const showNavbarHamburger = navbar && !navbarCollapsedMobile;
   const showAsideHamburger = aside && !asideCollapsedMobile;
   const showHeaderOnlyHamburger = header && !navbar && !aside && !headerCollapsed;
@@ -1403,6 +1405,7 @@ var AppShell = ({
   const mobileHideClass = getBreakpointHideClass(mobileBreakpoint);
   const desktopShowClass = getBreakpointShowClass(mobileBreakpoint);
   const asideDesktopShowClass = getBreakpointShowClass(asideBreakpoint);
+  const containerClass = "max-w-7xl mx-auto w-full";
   const contextValue = {
     navbarOpen,
     setNavbarOpen,
@@ -1454,9 +1457,9 @@ var AppShell = ({
             )
           ] })
         ] }),
-        header && !headerCollapsed && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("header", { className: `${needsMobileHeader ? desktopShowClass : "flex"} sticky top-0 z-20 ${heightClasses[headerHeight]} ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""} px-4 items-center shrink-0`, children: header.content }),
+        header && !headerCollapsed && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("header", { className: `${needsMobileHeader ? desktopShowClass : "flex"} sticky top-0 z-20 ${heightClasses[headerHeight]} ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""} px-4 items-center shrink-0`, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: headerContained ? containerClass : "flex-1 flex items-center", 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 })
+        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: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: footerContained ? containerClass : "flex-1 flex items-center", children: footer.content }) })
       ] }),
       aside && !asideCollapsedDesktop && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         "aside",
@@ -1535,10 +1538,10 @@ var AppShell = ({
         )
       ] })
     ] }),
-    header && !headerCollapsed && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("header", { className: `${needsMobileHeader ? desktopShowClass : "flex"} sticky top-0 z-20 ${heightClasses[headerHeight]} ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""} px-4 items-center`, children: [
+    header && !headerCollapsed && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("header", { className: `${needsMobileHeader ? desktopShowClass : "flex"} sticky top-0 z-20 ${heightClasses[headerHeight]} ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""} px-4 items-center`, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `flex items-center ${headerContained ? containerClass : "flex-1"}`, 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",
@@ -1556,7 +1559,7 @@ var AppShell = ({
         }
       )
     ] }),
-    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 }),
+    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: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: footerContained ? containerClass : "flex-1 flex items-center", children: footer.content }) }),
     navbar && !navbarCollapsedMobile && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
       MobileDrawer,
       {