@ttoss/layouts 0.6.1 → 0.7.0

package/README.md

@@ -162,6 +162,26 @@ 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',
+    },
+  },
+};
+```
+
+Other layout components (Header, Sidebar, Footer) also accept the `variant` prop for theme-driven customization.
+
 ## Advanced Usage
 
 ### Custom Components with displayName

package/dist/esm/index.js

@@ -7,7 +7,7 @@ var __name = (target, value) => __defProp(target, "name", {
 });
 
 // src/components/Layout.tsx
-import { Box as Box7, Container } from "@ttoss/ui";
+import { Box as Box8, Container as Container2 } from "@ttoss/ui";
 
 // src/components/Footer.tsx
 import { Box } from "@ttoss/ui";
@@ -2428,7 +2428,7 @@ var Header = /* @__PURE__ */__name(({
 Header.displayName = "Header";
 
 // src/components/Main.tsx
-import { Stack } from "@ttoss/ui";
+import { Box as Box7, Container } from "@ttoss/ui";
 
 // src/components/MainBody.tsx
 import { Box as Box4 } from "@ttoss/ui";
@@ -2490,14 +2490,19 @@ MainHeader.displayName = "MainHeader";
 
 // src/components/Main.tsx
 var Main = /* @__PURE__ */__name(props => {
-  return /* @__PURE__ */React.createElement(Stack, {
+  return /* @__PURE__ */React.createElement(Box7, {
     variant: "layout.main",
     sx: {
-      flex: 1,
-      height: "full",
-      overflow: "hidden"
+      overflowX: "auto",
+      flex: 1
     }
-  }, props.children);
+  }, /* @__PURE__ */React.createElement(Container, {
+    variant: "layout.container",
+    sx: {
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, props.children));
 }, "Main");
 Main.displayName = "Main";
 Main.Header = MainHeader;
@@ -2508,7 +2513,7 @@ Main.Footer = MainFooter;
 var Layout = /* @__PURE__ */__name(({
   children
 }) => {
-  return /* @__PURE__ */React.createElement(Box7, {
+  return /* @__PURE__ */React.createElement(Box8, {
     variant: "layout.layout"
   }, children);
 }, "Layout");
@@ -2516,10 +2521,10 @@ Layout.Header = Header;
 Layout.Sidebar = Sidebar;
 Layout.Main = Main;
 Layout.Footer = Footer;
-Layout.Container = Container;
+Layout.Container = Container2;
 
 // src/components/SidebarCollapseLayout.tsx
-import { Flex as Flex3, Stack as Stack2 } from "@ttoss/ui";
+import { Flex as Flex3, Stack } from "@ttoss/ui";
 
 // src/getSemanticElements.ts
 import * as React7 from "react";
@@ -2560,7 +2565,7 @@ var SidebarCollapseLayout = /* @__PURE__ */__name(({
   } = getSematicElements({
     children
   });
-  return /* @__PURE__ */React.createElement(LayoutProvider, null, /* @__PURE__ */React.createElement(Stack2, {
+  return /* @__PURE__ */React.createElement(LayoutProvider, null, /* @__PURE__ */React.createElement(Stack, {
     ...props,
     sx: {
       height: ["100vh"],
@@ -2579,7 +2584,7 @@ var SidebarCollapseLayout = /* @__PURE__ */__name(({
 }, "SidebarCollapseLayout");
 
 // src/components/StackedLayout.tsx
-import { Stack as Stack3 } from "@ttoss/ui";
+import { Stack as Stack2 } from "@ttoss/ui";
 import * as React8 from "react";
 var StackedLayout = /* @__PURE__ */__name(({
   children,
@@ -2592,7 +2597,7 @@ var StackedLayout = /* @__PURE__ */__name(({
   } = getSematicElements({
     children
   });
-  return /* @__PURE__ */React8.createElement(LayoutProvider, null, /* @__PURE__ */React8.createElement(Stack3, props, header, main, footer));
+  return /* @__PURE__ */React8.createElement(LayoutProvider, null, /* @__PURE__ */React8.createElement(Stack2, props, header, main, footer));
 }, "StackedLayout");
 export { Layout, SidebarCollapseLayout, StackedLayout, useIsDesktop };
 /*! Bundled license information:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/layouts",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Layout components for React",
   "license": "MIT",
   "author": "ttoss",
@@ -25,8 +25,8 @@
   "sideEffects": false,
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/ui": "^6.2.1",
-    "@ttoss/components": "^2.11.1"
+    "@ttoss/components": "^2.11.2",
+    "@ttoss/ui": "^6.3.0"
   },
   "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.1",
+    "@ttoss/components": "^2.11.2",
     "@ttoss/config": "^1.35.12",
-    "@ttoss/test-utils": "^4.0.2",
     "@ttoss/react-icons": "^0.5.6",
-    "@ttoss/ui": "^6.2.1"
+    "@ttoss/test-utils": "^4.0.2",
+    "@ttoss/ui": "^6.3.0"
   },
   "keywords": [
     "React"