@ttoss/layouts 0.5.0 → 0.5.2

package/README.md

@@ -37,9 +37,11 @@ const Dashboard = () => (
   <SidebarCollapseLayout>
     <Layout.Header showSidebarButton>App Header with Menu Toggle</Layout.Header>
     <Layout.Sidebar>Navigation Menu</Layout.Sidebar>
-    <Layout.Main.Header>Page Title & Actions</Layout.Main.Header>
-    <Layout.Main>Dashboard Content</Layout.Main>
-    <Layout.Main.Footer>Status Bar</Layout.Main.Footer>
+    <Layout.Main>
+      <Layout.Main.Header>Page Title & Actions</Layout.Main.Header>
+      <Layout.Main.Body>Dashboard Content</Layout.Main.Body>
+      <Layout.Main.Footer>Status Bar</Layout.Main.Footer>
+    </Layout.Main>
   </SidebarCollapseLayout>
 );
 ```
@@ -48,23 +50,38 @@ const Dashboard = () => (
 
 ### Layout.Main Sub-Components
 
-Enhanced main content area with optional header and footer sections.
+The Main component provides a structured content area with three distinct sections:
 
 ```tsx
-<Layout.Main.Header>
-  <h1>Page Title</h1>
-  <button>Action Button</button>
-</Layout.Main.Header>
-
 <Layout.Main>
-  Main content with consistent padding and overflow handling
+  <Layout.Main.Header>
+    <h1>Page Title</h1>
+    <button>Action Button</button>
+  </Layout.Main.Header>
+
+  <Layout.Main.Body>
+    Main content with consistent padding and scroll handling
+  </Layout.Main.Body>
+
+  <Layout.Main.Footer>
+    <span>Last updated: Today</span>
+  </Layout.Main.Footer>
 </Layout.Main>
-
-<Layout.Main.Footer>
-  <span>Last updated: Today</span>
-</Layout.Main.Footer>
 ```
 
+**Key Features:**
+
+- **Main.Header**: Page-level header with title and actions
+- **Main.Body**: Scrollable content area with auto overflow handling
+- **Main.Footer**: Status bar or secondary actions
+
+**Benefits of This Structure:**
+
+- **Clear Content Hierarchy**: Separates page header, content, and footer concerns
+- **Automatic Scroll Management**: Body handles overflow while keeping header/footer fixed
+- **Consistent Spacing**: Each section has optimized padding and layout
+- **Accessibility**: Proper semantic HTML elements (`<header>`, `<main>`, `<footer>`)
+
 ## Automatic Layout Composition
 
 **Key Concept**: Layout components automatically detect and organize their child components by `displayName`, even when components are distributed across different files or routing structures.
@@ -88,15 +105,15 @@ const AppLayout = () => (
 
 // pages/Dashboard.tsx - Page-specific components
 const Dashboard = () => (
-  <>
+  <Layout.Main>
     <Layout.Main.Header>
       <h1>Dashboard</h1>
     </Layout.Main.Header>
-    <Layout.Main>
+    <Layout.Main.Body>
       <DashboardCharts />
-    </Layout.Main>
+    </Layout.Main.Body>
     <Layout.Main.Footer>Last updated: {lastUpdate}</Layout.Main.Footer>
-  </>
+  </Layout.Main>
 );
 ```
 
@@ -106,12 +123,17 @@ The layout **automatically composes** itself by finding components with matching
 
 ```tsx
 // These components can be anywhere in your component tree:
-<Layout.Header />     // → Detected as "Header"
-<Layout.Sidebar />    // → Detected as "Sidebar"
-<Layout.Main />       // → Detected as "Main"
-<Layout.Footer />     // → Detected as "Footer"
-<Layout.Main.Header />  // → Detected as "MainHeader"
-<Layout.Main.Footer />  // → Detected as "MainFooter"
+<Layout.Header />        // → Detected as "Header"
+<Layout.Sidebar />       // → Detected as "Sidebar"
+<Layout.Main />          // → Detected as "Main"
+<Layout.Footer />        // → Detected as "Footer"
+
+// Main sub-components are contained within Main:
+<Layout.Main>
+  <Layout.Main.Header />  // → Detected as "MainHeader"
+  <Layout.Main.Body />    // → Detected as "MainBody"
+  <Layout.Main.Footer />  // → Detected as "MainFooter"
+</Layout.Main>
 ```
 
 ## Component Properties
@@ -127,14 +149,17 @@ The layout **automatically composes** itself by finding components with matching
 All components integrate seamlessly with `@ttoss/ui` theme system via `sx` prop:
 
 ```tsx
-<Layout.Header
-  sx={{
-    backgroundColor: 'brand.primary',
-    borderBottom: '2px solid',
-  }}
->
-  Custom styled header
-</Layout.Header>
+<Layout.Main>
+  <Layout.Main.Header
+    sx={{
+      backgroundColor: 'brand.primary',
+      borderBottom: '2px solid',
+    }}
+  >
+    Custom styled header
+  </Layout.Main.Header>
+  <Layout.Main.Body>Content</Layout.Main.Body>
+</Layout.Main>
 ```
 
 ## Advanced Usage

package/dist/esm/index.js

@@ -2352,13 +2352,34 @@ var Header = ({
 Header.displayName = "Header";
 
 // src/components/Main.tsx
-import { Box as Box6 } from "@ttoss/ui";
+import { Stack } from "@ttoss/ui";
 
-// src/components/MainFooter.tsx
+// src/components/MainBody.tsx
 import { Box as Box4 } from "@ttoss/ui";
 import { jsx as jsx6 } from "react/jsx-runtime";
-var MainFooter = props => {
+var MainBody = props => {
   return /* @__PURE__ */jsx6(Box4, {
+    variant: "layout.main.body",
+    ...props,
+    as: "main",
+    sx: {
+      paddingX: "10",
+      paddingY: "6",
+      overflowY: "auto",
+      width: "full",
+      height: "full",
+      ...props.sx
+    },
+    children: props.children
+  });
+};
+MainBody.displayName = "MainBody";
+
+// src/components/MainFooter.tsx
+import { Box as Box5 } from "@ttoss/ui";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var MainFooter = props => {
+  return /* @__PURE__ */jsx7(Box5, {
     variant: "layout.main.footer",
     ...props,
     sx: {
@@ -2376,10 +2397,10 @@ var MainFooter = props => {
 MainFooter.displayName = "MainFooter";
 
 // src/components/MainHeader.tsx
-import { Box as Box5 } from "@ttoss/ui";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { Box as Box6 } from "@ttoss/ui";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var MainHeader = props => {
-  return /* @__PURE__ */jsx7(Box5, {
+  return /* @__PURE__ */jsx8(Box6, {
     variant: "layout.main.header",
     ...props,
     as: "header",
@@ -2398,33 +2419,29 @@ var MainHeader = props => {
 MainHeader.displayName = "MainHeader";
 
 // src/components/Main.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var Main = props => {
-  return /* @__PURE__ */jsx8(Box6, {
+  return /* @__PURE__ */jsx9(Stack, {
     variant: "layout.main",
-    ...props,
-    as: "main",
     sx: {
-      paddingX: "10",
-      paddingY: "6",
-      overflowY: "auto",
-      width: "full",
+      flex: 1,
       height: "full",
-      ...props.sx
+      overflow: "hidden"
     },
     children: props.children
   });
 };
 Main.displayName = "Main";
 Main.Header = MainHeader;
+Main.Body = MainBody;
 Main.Footer = MainFooter;
 
 // src/components/Layout.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var Layout = ({
   children
 }) => {
-  return /* @__PURE__ */jsx9(Box7, {
+  return /* @__PURE__ */jsx10(Box7, {
     variant: "layout.layout",
     children
   });
@@ -2436,7 +2453,7 @@ Layout.Footer = Footer;
 Layout.Container = Container;
 
 // src/components/SidebarCollapseLayout.tsx
-import { Flex as Flex3, Stack } from "@ttoss/ui";
+import { Flex as Flex3, Stack as Stack2 } from "@ttoss/ui";
 
 // src/getSemanticElements.ts
 import * as React6 from "react";
@@ -2446,6 +2463,7 @@ var semanticComponents = {
   Footer: "footer",
   Main: "main",
   MainHeader: "mainHeader",
+  MainBody: "mainBody",
   MainFooter: "mainFooter"
 };
 var getSematicElements = ({
@@ -2465,7 +2483,7 @@ var getSematicElements = ({
 };
 
 // src/components/SidebarCollapseLayout.tsx
-import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
 var SidebarCollapseLayout = ({
   children,
   ...props
@@ -2473,14 +2491,12 @@ var SidebarCollapseLayout = ({
   const {
     header,
     main,
-    sidebar,
-    mainFooter,
-    mainHeader
+    sidebar
   } = getSematicElements({
     children
   });
-  return /* @__PURE__ */jsx10(LayoutProvider, {
-    children: /* @__PURE__ */jsxs3(Stack, {
+  return /* @__PURE__ */jsx11(LayoutProvider, {
+    children: /* @__PURE__ */jsxs3(Stack2, {
       ...props,
       sx: {
         height: ["100vh"],
@@ -2495,22 +2511,15 @@ var SidebarCollapseLayout = ({
           overflow: "hidden",
           flexDirection: ["row"]
         },
-        children: [sidebar, /* @__PURE__ */jsxs3(Stack, {
-          sx: {
-            flex: 1,
-            height: "full",
-            overflow: "hidden"
-          },
-          children: [mainHeader, main, mainFooter]
-        })]
+        children: [sidebar, main]
       })]
     })
   });
 };
 
 // src/components/StackedLayout.tsx
-import { Stack as Stack2 } from "@ttoss/ui";
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Stack as Stack3 } from "@ttoss/ui";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 var StackedLayout = ({
   children,
   ...props
@@ -2522,8 +2531,8 @@ var StackedLayout = ({
   } = getSematicElements({
     children
   });
-  return /* @__PURE__ */jsx11(LayoutProvider, {
-    children: /* @__PURE__ */jsxs4(Stack2, {
+  return /* @__PURE__ */jsx12(LayoutProvider, {
+    children: /* @__PURE__ */jsxs4(Stack3, {
       ...props,
       children: [header, main, footer]
     })

package/dist/index.d.ts

@@ -25,6 +25,10 @@ declare const Layout: {
             (props: BoxProps): react_jsx_runtime.JSX.Element;
             displayName: string;
         };
+        Body: {
+            (props: BoxProps): react_jsx_runtime.JSX.Element;
+            displayName: string;
+        };
         Footer: {
             (props: BoxProps): react_jsx_runtime.JSX.Element;
             displayName: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/layouts",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Layout components for React",
   "license": "MIT",
   "author": "ttoss",
@@ -25,7 +25,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/components": "^2.2.26",
+    "@ttoss/components": "^2.2.27",
     "@ttoss/ui": "^5.9.2"
   },
   "devDependencies": {
@@ -34,11 +34,11 @@
     "jest": "^30.0.4",
     "react": "^19.1.0",
     "tsup": "^8.5.0",
-    "@ttoss/components": "^2.2.26",
+    "@ttoss/components": "^2.2.27",
     "@ttoss/config": "^1.35.6",
     "@ttoss/react-icons": "^0.4.15",
-    "@ttoss/ui": "^5.9.2",
-    "@ttoss/test-utils": "^2.1.26"
+    "@ttoss/test-utils": "^2.1.26",
+    "@ttoss/ui": "^5.9.2"
   },
   "keywords": [
     "React"