@ttoss/layouts 0.1.0 → 0.1.2

package/README.md

@@ -16,7 +16,7 @@ You can use the `Layout` component to add a layout to your application:
 import { Layout } from '@ttoss/layouts';
 
 const App = () => (
-  <Layout layout="StackedLayout">
+  <Layout>
     <Layout.Header>Header</Layout.Header>
     <Layout.Main>Main</Layout.Main>
     <Layout.Footer>Footer</Layout.Footer>
@@ -24,7 +24,7 @@ const App = () => (
 );
 ```
 
-Or you can use specifics components as `StackedLayout` to add a layout to your application:
+Or you can use specifics components as `StackedLayout` to add specific layout to your application:
 
 ```tsx
 import { Layout, StackedLayout } from '@ttoss/layouts';

package/dist/esm/index.js

@@ -1,13 +1,23 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 
+// src/components/BaseLayout.tsx
+import { Box } from "@ttoss/ui";
+import { jsx } from "react/jsx-runtime";
+var BaseLayout = props => {
+  return /* @__PURE__ */jsx(Box, {
+    ...props,
+    children: props.children
+  });
+};
+
 // src/components/Layout.tsx
 import { Container } from "@ttoss/ui";
 
 // src/components/Footer.tsx
-import { Box } from "@ttoss/ui";
-import { jsx } from "react/jsx-runtime";
+import { Box as Box2 } from "@ttoss/ui";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var Footer = props => {
-  return /* @__PURE__ */jsx(Box, {
+  return /* @__PURE__ */jsx2(Box2, {
     variant: "layout.footer",
     ...props,
     as: "footer",
@@ -17,10 +27,10 @@ var Footer = props => {
 Footer.displayName = "Footer";
 
 // src/components/Header.tsx
-import { Box as Box2 } from "@ttoss/ui";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { Box as Box3 } from "@ttoss/ui";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var Header = props => {
-  return /* @__PURE__ */jsx2(Box2, {
+  return /* @__PURE__ */jsx3(Box3, {
     variant: "layout.header",
     ...props,
     as: "header",
@@ -30,10 +40,10 @@ var Header = props => {
 Header.displayName = "Header";
 
 // src/components/Main.tsx
-import { Box as Box3 } from "@ttoss/ui";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { Box as Box4 } from "@ttoss/ui";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var Main = props => {
-  return /* @__PURE__ */jsx3(Box3, {
+  return /* @__PURE__ */jsx4(Box4, {
     variant: "layout.main",
     ...props,
     as: "main",
@@ -42,16 +52,22 @@ var Main = props => {
 };
 Main.displayName = "Main";
 
-// src/components/BaseLayout.tsx
-import { Box as Box4 } from "@ttoss/ui";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var BaseLayout = props => {
-  return /* @__PURE__ */jsx4(Box4, {
+// src/components/Layout.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Layout = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */jsx5(BaseLayout, {
     variant: "layout.layout",
     ...props,
-    children: props.children
+    children
   });
 };
+Layout.Header = Header;
+Layout.Main = Main;
+Layout.Footer = Footer;
+Layout.Container = Container;
 
 // src/getSemanticElements.ts
 import * as React from "react";
@@ -79,7 +95,8 @@ var getSematicElements = ({
 // src/components/StackedLayout.tsx
 import { jsxs } from "react/jsx-runtime";
 var StackedLayout = ({
-  children
+  children,
+  ...props
 }) => {
   const {
     header,
@@ -89,25 +106,13 @@ var StackedLayout = ({
     children
   });
   return /* @__PURE__ */jsxs(BaseLayout, {
+    ...props,
     sx: {
       display: "flex",
-      flexDirection: "column"
+      flexDirection: "column",
+      ...props.sx
     },
     children: [header, main, footer]
   });
 };
-
-// src/components/Layout.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var Layout = ({
-  children
-}) => {
-  return /* @__PURE__ */jsx5(StackedLayout, {
-    children
-  });
-};
-Layout.Header = Header;
-Layout.Main = Main;
-Layout.Footer = Footer;
-Layout.Container = Container;
 export { Footer, Header, Layout, Main, StackedLayout };

package/dist/index.d.ts

@@ -1,13 +1,12 @@
+import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React$1 from 'react';
 import { BoxProps } from '@ttoss/ui';
 
-type Layouts = 'StackedLayout';
-type LayoutProps = React$1.PropsWithChildren<{
-    layout?: Layouts;
-}>;
+type BaseLayoutProps = BoxProps;
+
+type LayoutProps = BaseLayoutProps;
 declare const Layout: {
-    ({ children }: LayoutProps): react_jsx_runtime.JSX.Element;
+    ({ children, ...props }: LayoutProps): react_jsx_runtime.JSX.Element;
     Header: {
         (props: BoxProps): react_jsx_runtime.JSX.Element;
         displayName: string;
@@ -20,7 +19,7 @@ declare const Layout: {
         (props: BoxProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
-    Container: React$1.ForwardRefExoticComponent<BoxProps & React$1.RefAttributes<HTMLDivElement>>;
+    Container: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
 };
 
 declare const Header: {
@@ -38,8 +37,6 @@ declare const Main: {
     displayName: string;
 };
 
-declare const StackedLayout: ({ children }: {
-    children: React.ReactNode;
-}) => react_jsx_runtime.JSX.Element;
+declare const StackedLayout: ({ children, ...props }: BaseLayoutProps) => react_jsx_runtime.JSX.Element;
 
 export { Footer, Header, Layout, Main, StackedLayout };

package/dist/index.js

@@ -46,14 +46,24 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/components/BaseLayout.tsx
+var import_ui = require("@ttoss/ui");
+var import_jsx_runtime = require("react/jsx-runtime");
+var BaseLayout = props => {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ui.Box, {
+    ...props,
+    children: props.children
+  });
+};
+
 // src/components/Layout.tsx
 var import_ui5 = require("@ttoss/ui");
 
 // src/components/Footer.tsx
-var import_ui = require("@ttoss/ui");
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui2 = require("@ttoss/ui");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var Footer = props => {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ui.Box, {
+  return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.Box, {
     variant: "layout.footer",
     ...props,
     as: "footer",
@@ -63,10 +73,10 @@ var Footer = props => {
 Footer.displayName = "Footer";
 
 // src/components/Header.tsx
-var import_ui2 = require("@ttoss/ui");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_ui3 = require("@ttoss/ui");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var Header = props => {
-  return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.Box, {
+  return /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.Box, {
     variant: "layout.header",
     ...props,
     as: "header",
@@ -76,10 +86,10 @@ var Header = props => {
 Header.displayName = "Header";
 
 // src/components/Main.tsx
-var import_ui3 = require("@ttoss/ui");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_ui4 = require("@ttoss/ui");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var Main = props => {
-  return /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.Box, {
+  return /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Box, {
     variant: "layout.main",
     ...props,
     as: "main",
@@ -88,16 +98,22 @@ var Main = props => {
 };
 Main.displayName = "Main";
 
-// src/components/BaseLayout.tsx
-var import_ui4 = require("@ttoss/ui");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var BaseLayout = props => {
-  return /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Box, {
+// src/components/Layout.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Layout = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime5.jsx)(BaseLayout, {
     variant: "layout.layout",
     ...props,
-    children: props.children
+    children
   });
 };
+Layout.Header = Header;
+Layout.Main = Main;
+Layout.Footer = Footer;
+Layout.Container = import_ui5.Container;
 
 // src/getSemanticElements.ts
 var React = __toESM(require("react"));
@@ -123,9 +139,10 @@ var getSematicElements = ({
 };
 
 // src/components/StackedLayout.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var StackedLayout = ({
-  children
+  children,
+  ...props
 }) => {
   const {
     header,
@@ -134,28 +151,16 @@ var StackedLayout = ({
   } = getSematicElements({
     children
   });
-  return /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(BaseLayout, {
+  return /* @__PURE__ */(0, import_jsx_runtime6.jsxs)(BaseLayout, {
+    ...props,
     sx: {
       display: "flex",
-      flexDirection: "column"
+      flexDirection: "column",
+      ...props.sx
     },
     children: [header, main, footer]
   });
 };
-
-// src/components/Layout.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Layout = ({
-  children
-}) => {
-  return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(StackedLayout, {
-    children
-  });
-};
-Layout.Header = Header;
-Layout.Main = Main;
-Layout.Footer = Footer;
-Layout.Container = import_ui5.Container;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Footer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/layouts",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Layout components for React",
   "author": "ttoss",
   "contributors": [
@@ -16,7 +16,7 @@
   "typings": "dist/index.d.ts",
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/ui": "^1.37.0"
+    "@ttoss/ui": "^1.37.1"
   },
   "devDependencies": {
     "@types/jest": "^29.5.2",
@@ -26,7 +26,7 @@
     "tsup": "^6.7.0",
     "@ttoss/config": "^1.30.1",
     "@ttoss/test-utils": "^1.23.2",
-    "@ttoss/ui": "^1.37.0"
+    "@ttoss/ui": "^1.37.1"
   },
   "keywords": [
     "React"

package/src/components/BaseLayout.tsx

@@ -1,9 +1,7 @@
 import { Box, BoxProps } from '@ttoss/ui';
 
-export const BaseLayout = (props: BoxProps) => {
-  return (
-    <Box variant="layout.layout" {...props}>
-      {props.children}
-    </Box>
-  );
+export type BaseLayoutProps = BoxProps;
+
+export const BaseLayout = (props: BaseLayoutProps) => {
+  return <Box {...props}>{props.children}</Box>;
 };

package/src/components/Layout.tsx

@@ -1,20 +1,19 @@
-import * as React from 'react';
+import { BaseLayout, type BaseLayoutProps } from './BaseLayout';
 import { type BoxProps, Container, type ContainerProps } from '@ttoss/ui';
 import { Footer } from './Footer';
 import { Header } from './Header';
 import { Main } from './Main';
-import { StackedLayout } from './StackedLayout';
 
 export type { ContainerProps, BoxProps };
 
-type Layouts = 'StackedLayout';
+type LayoutProps = BaseLayoutProps;
 
-type LayoutProps = React.PropsWithChildren<{
-  layout?: Layouts;
-}>;
-
-export const Layout = ({ children }: LayoutProps) => {
-  return <StackedLayout>{children}</StackedLayout>;
+export const Layout = ({ children, ...props }: LayoutProps) => {
+  return (
+    <BaseLayout variant="layout.layout" {...props}>
+      {children}
+    </BaseLayout>
+  );
 };
 
 Layout.Header = Header;

package/src/components/StackedLayout.tsx

@@ -1,14 +1,16 @@
-import { BaseLayout } from './BaseLayout';
+import { BaseLayout, type BaseLayoutProps } from './BaseLayout';
 import { getSematicElements } from '../getSemanticElements';
 
-export const StackedLayout = ({ children }: { children: React.ReactNode }) => {
+export const StackedLayout = ({ children, ...props }: BaseLayoutProps) => {
   const { header, main, footer } = getSematicElements({ children });
 
   return (
     <BaseLayout
+      {...props}
       sx={{
         display: 'flex',
         flexDirection: 'column',
+        ...props.sx,
       }}
     >
       {header}