@ttoss/layouts 0.7.5 → 0.9.1

package/README.md

@@ -59,9 +59,7 @@ The Main component provides a structured content area with three distinct sectio
     <button>Action Button</button>
   </Layout.Main.Header>
 
-  <Layout.Main.Body>
-    Main content with consistent padding and scroll handling
-  </Layout.Main.Body>
+  <Layout.Main.Body>Main content with scroll handling</Layout.Main.Body>
 
   <Layout.Main.Footer>
     <span>Last updated: Today</span>
@@ -162,25 +160,51 @@ All components integrate seamlessly with `@ttoss/ui` theme system via `sx` prop:
 </Layout.Main>
 ```
 
-### Layout Variant Usage
-
-The `Main` component applies `variant="layout.container"` to its internal Container, ensuring consistent layout width and padding based on your theme. Define `layout.container` in your theme for global control:
-
-```js
-// theme.js
-export const theme = {
-  layout: {
-    container: {
-      maxWidth: ['100%', '1100px'],
-      minWidth: ['100%', '1100px'],
-      marginX: 'auto',
-      paddingX: '4',
-    },
-  },
-};
-```
+### Inner Container Styling with containerSx
+
+The `MainHeader`, `MainFooter`, and `MainBody` components (`Layout.Main.Header`, `Layout.Main.Footer`, `Layout.Main.Body`) include an inner `Container` component for consistent layout width and padding. While the `sx` prop styles the outer `Box` element, the `containerSx` prop allows you to customize the inner `Container`'s styling.
+
+The inner `Container` uses the `layout.container` variant, which by default limits the maxWidth to 1200px on larger screens (responsive: 100% on mobile).
+
+**Key Differences:**
+
+- **`sx`**: Styles the outer `Box` wrapper (background, borders, positioning, etc.)
+- **`containerSx`**: Styles the inner `Container` (max-width, padding, margins, etc.)
 
-Other layout components (Header, Sidebar, Footer) also accept the `variant` prop for theme-driven customization.
+**When to use `containerSx`:**
+
+- Override default container padding or max-width
+- Apply theme-specific container styling
+- Customize spacing within the layout structure
+
+**Examples:**
+
+```tsx
+// Customize container padding for MainBody
+<Layout.Main.Body
+  containerSx={{
+    paddingX: '8', // Override default padding
+    maxWidth: '1200px', // Custom max-width
+  }}
+>
+  Content with custom container styling
+</Layout.Main.Body>
+
+// Style outer Box background while customizing inner container
+<Layout.Main.Header
+  sx={{
+    backgroundColor: 'gray.100', // Outer Box background
+    boxShadow: 'md', // Outer Box shadow
+  }}
+  containerSx={{
+    paddingY: '6', // Inner container vertical padding
+    justifyContent: 'space-between', // Inner container alignment
+  }}
+>
+  <Logo />
+  <Navigation />
+</Layout.Main.Header>
+```
 
 ## Advanced Usage
 

package/dist/esm/index.js

@@ -7,7 +7,7 @@ var __name = (target, value) => __defProp(target, "name", {
 });
 
 // src/components/Layout.tsx
-import { Box as Box8, Container as Container2 } from "@ttoss/ui";
+import { Box as Box8, Container as Container4 } from "@ttoss/ui";
 
 // src/components/Footer.tsx
 import { Box } from "@ttoss/ui";
@@ -2413,6 +2413,7 @@ var Header = /* @__PURE__ */__name(({
       borderBottom: "sm",
       borderColor: "display.border.muted.default",
       backgroundColor: "navigation.background.primary.default",
+      zIndex: "overlay",
       ...(sidebarSlot ? {} : paddingSx),
       ...boxProps.sx
     }
@@ -2428,63 +2429,82 @@ var Header = /* @__PURE__ */__name(({
 Header.displayName = "Header";
 
 // src/components/Main.tsx
-import { Box as Box7, Container } from "@ttoss/ui";
+import { Box as Box7 } from "@ttoss/ui";
 
 // src/components/MainBody.tsx
-import { Box as Box4 } from "@ttoss/ui";
-var MainBody = /* @__PURE__ */__name(props => {
+import { Box as Box4, Container } from "@ttoss/ui";
+var MainBody = /* @__PURE__ */__name(({
+  containerSx,
+  ...props
+}) => {
   return /* @__PURE__ */React.createElement(Box4, {
     variant: "layout.main.body",
     ...props,
     as: "main",
     sx: {
-      paddingX: "10",
-      paddingY: "6",
-      overflowY: "auto",
       width: "full",
-      height: "full",
+      flex: 1,
       ...props.sx
     }
-  }, props.children);
+  }, /* @__PURE__ */React.createElement(Container, {
+    paddingY: "6",
+    variant: "layout.container",
+    "data-testid": "main-body-container",
+    sx: {
+      ...containerSx
+    }
+  }, props.children));
 }, "MainBody");
 MainBody.displayName = "MainBody";
 
 // src/components/MainFooter.tsx
-import { Box as Box5 } from "@ttoss/ui";
-var MainFooter = /* @__PURE__ */__name(props => {
+import { Box as Box5, Container as Container2 } from "@ttoss/ui";
+var MainFooter = /* @__PURE__ */__name(({
+  containerSx,
+  ...props
+}) => {
   return /* @__PURE__ */React.createElement(Box5, {
     variant: "layout.main.footer",
     ...props,
     sx: {
-      paddingX: "10",
-      paddingY: "3",
       borderTop: "sm",
       borderColor: "display.border.muted.default",
       backgroundColor: "navigation.background.primary.default",
       width: "full",
       ...props.sx
     }
-  }, props.children);
+  }, /* @__PURE__ */React.createElement(Container2, {
+    paddingY: "3",
+    variant: "layout.container",
+    "data-testid": "main-footer-container",
+    sx: containerSx
+  }, props.children));
 }, "MainFooter");
 MainFooter.displayName = "MainFooter";
 
 // src/components/MainHeader.tsx
-import { Box as Box6 } from "@ttoss/ui";
-var MainHeader = /* @__PURE__ */__name(props => {
+import { Box as Box6, Container as Container3 } from "@ttoss/ui";
+var MainHeader = /* @__PURE__ */__name(({
+  containerSx,
+  ...props
+}) => {
   return /* @__PURE__ */React.createElement(Box6, {
     variant: "layout.main.header",
     ...props,
     as: "header",
     sx: {
-      paddingX: "4",
-      paddingY: "3",
       borderBottom: "sm",
       borderColor: "display.border.muted.default",
       backgroundColor: "navigation.background.primary.default",
       width: "full",
       ...props.sx
     }
-  }, props.children);
+  }, /* @__PURE__ */React.createElement(Container3, {
+    paddingY: "3",
+    variant: "layout.container",
+    "data-testid": "main-header-container",
+    sx: containerSx
+  }, props.children));
 }, "MainHeader");
 MainHeader.displayName = "MainHeader";
 
@@ -2494,15 +2514,12 @@ var Main = /* @__PURE__ */__name(props => {
     variant: "layout.main",
     sx: {
       overflowX: "auto",
-      flex: 1
-    }
-  }, /* @__PURE__ */React.createElement(Container, {
-    variant: "layout.container",
-    sx: {
+      overflowY: "auto",
+      flex: 1,
       display: "flex",
       flexDirection: "column"
     }
-  }, props.children));
+  }, props.children);
 }, "Main");
 Main.displayName = "Main";
 Main.Header = MainHeader;
@@ -2521,7 +2538,7 @@ Layout.Header = Header;
 Layout.Sidebar = Sidebar;
 Layout.Main = Main;
 Layout.Footer = Footer;
-Layout.Container = Container2;
+Layout.Container = Container4;
 
 // src/components/SidebarCollapseLayout.tsx
 import { Flex as Flex3, Stack } from "@ttoss/ui";

package/dist/index.d.ts

@@ -1,6 +1,18 @@
 import * as react from 'react';
+import { BoxProps, StackProps } from '@ttoss/ui';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { StackProps, BoxProps } from '@ttoss/ui';
+
+type MainFooterProps = BoxProps & {
+    containerSx?: BoxProps['sx'];
+};
+
+type MainBodyProps = BoxProps & {
+    containerSx?: BoxProps['sx'];
+};
+
+type MainHeaderProps = BoxProps & {
+    containerSx?: BoxProps['sx'];
+};
 
 declare const Layout: {
     ({ children }: React.PropsWithChildren<StackProps>): react_jsx_runtime.JSX.Element;
@@ -22,15 +34,15 @@ declare const Layout: {
         (props: BoxProps): react_jsx_runtime.JSX.Element;
         displayName: string;
         Header: {
-            (props: BoxProps): react_jsx_runtime.JSX.Element;
+            ({ containerSx, ...props }: MainHeaderProps): react_jsx_runtime.JSX.Element;
             displayName: string;
         };
         Body: {
-            (props: BoxProps): react_jsx_runtime.JSX.Element;
+            ({ containerSx, ...props }: MainBodyProps): react_jsx_runtime.JSX.Element;
             displayName: string;
         };
         Footer: {
-            (props: BoxProps): react_jsx_runtime.JSX.Element;
+            ({ containerSx, ...props }: MainFooterProps): react_jsx_runtime.JSX.Element;
             displayName: string;
         };
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/layouts",
-  "version": "0.7.5",
+  "version": "0.9.1",
   "description": "Layout components for React",
   "license": "MIT",
   "author": "ttoss",
@@ -25,8 +25,8 @@
   "sideEffects": false,
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/ui": "^6.4.0",
-    "@ttoss/components": "^2.11.7"
+    "@ttoss/components": "^2.12.3",
+    "@ttoss/ui": "^6.4.3"
   },
   "devDependencies": {
     "@types/jest": "^30.0.0",
@@ -34,11 +34,11 @@
     "jest": "^30.2.0",
     "react": "^19.2.1",
     "tsup": "^8.5.1",
-    "@ttoss/components": "^2.11.7",
     "@ttoss/config": "^1.35.12",
-    "@ttoss/ui": "^6.4.0",
+    "@ttoss/components": "^2.12.3",
     "@ttoss/react-icons": "^0.5.6",
-    "@ttoss/test-utils": "^4.0.2"
+    "@ttoss/test-utils": "^4.0.2",
+    "@ttoss/ui": "^6.4.3"
   },
   "keywords": [
     "React"