@ttoss/layouts 0.2.17 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/layouts",
-  "version": "0.2.17",
+  "version": "0.3.0",
   "description": "Layout components for React",
   "author": "ttoss",
   "contributors": [
@@ -11,10 +11,10 @@
     "url": "https://github.com/ttoss/ttoss.git",
     "directory": "packages/layouts"
   },
+  "type": "module",
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",
-      "require": "./dist/index.js",
       "types": "./dist/index.d.ts"
     }
   },
@@ -25,7 +25,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/ui": "^4.1.17"
+    "@ttoss/ui": "^5.0.0"
   },
   "devDependencies": {
     "@types/jest": "^29.5.12",
@@ -33,9 +33,9 @@
     "jest": "^29.7.0",
     "react": "^18.3.1",
     "tsup": "^8.2.4",
-    "@ttoss/config": "^1.32.9",
     "@ttoss/test-utils": "^2.1.13",
-    "@ttoss/ui": "^4.1.17"
+    "@ttoss/ui": "^5.0.0",
+    "@ttoss/config": "^1.32.9"
   },
   "keywords": [
     "React"
@@ -46,6 +46,6 @@
   },
   "scripts": {
     "build": "tsup",
-    "test": "jest"
+    "test": "jest --projects tests/unit"
   }
 }

package/dist/index.d.mts

@@ -1,42 +0,0 @@
-import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { BoxProps } from '@ttoss/ui';
-
-type BaseLayoutProps = BoxProps;
-
-type LayoutProps = BaseLayoutProps;
-declare const Layout: {
-    ({ children, ...props }: LayoutProps): react_jsx_runtime.JSX.Element;
-    Header: {
-        (props: BoxProps): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
-    Main: {
-        (props: BoxProps): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
-    Footer: {
-        (props: BoxProps): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
-    Container: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
-};
-
-declare const Header: {
-    (props: BoxProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-declare const Footer: {
-    (props: BoxProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-declare const Main: {
-    (props: BoxProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-declare const StackedLayout: ({ children, ...props }: BaseLayoutProps) => react_jsx_runtime.JSX.Element;
-
-export { Footer, Header, Layout, Main, StackedLayout };

package/dist/index.js

@@ -1,171 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-"use strict";
-
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
-}) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  Footer: () => Footer,
-  Header: () => Header,
-  Layout: () => Layout,
-  Main: () => Main,
-  StackedLayout: () => StackedLayout
-});
-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_ui2 = require("@ttoss/ui");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Footer = props => {
-  return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.Box, {
-    variant: "layout.footer",
-    ...props,
-    as: "footer",
-    children: props.children
-  });
-};
-Footer.displayName = "Footer";
-
-// src/components/Header.tsx
-var import_ui3 = require("@ttoss/ui");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Header = props => {
-  return /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.Box, {
-    variant: "layout.header",
-    ...props,
-    as: "header",
-    children: props.children
-  });
-};
-Header.displayName = "Header";
-
-// src/components/Main.tsx
-var import_ui4 = require("@ttoss/ui");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Main = props => {
-  return /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Box, {
-    variant: "layout.main",
-    ...props,
-    as: "main",
-    children: props.children
-  });
-};
-Main.displayName = "Main";
-
-// 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
-  });
-};
-Layout.Header = Header;
-Layout.Main = Main;
-Layout.Footer = Footer;
-Layout.Container = import_ui5.Container;
-
-// src/getSemanticElements.ts
-var React = __toESM(require("react"));
-var semanticComponents = {
-  Header: "header",
-  Footer: "footer",
-  Main: "main"
-};
-var getSematicElements = ({
-  children
-}) => {
-  const semanticElements = {};
-  React.Children.forEach(children, child => {
-    const displayName = child?.type?.displayName;
-    if (!displayName) {
-      return;
-    }
-    if (semanticComponents[displayName]) {
-      semanticElements[semanticComponents[displayName]] = child;
-    }
-  });
-  return semanticElements;
-};
-
-// src/components/StackedLayout.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var StackedLayout = ({
-  children,
-  ...props
-}) => {
-  const {
-    header,
-    main,
-    footer
-  } = getSematicElements({
-    children
-  });
-  return /* @__PURE__ */(0, import_jsx_runtime6.jsxs)(BaseLayout, {
-    ...props,
-    sx: {
-      display: "flex",
-      flexDirection: "column",
-      ...props.sx
-    },
-    children: [header, main, footer]
-  });
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Footer,
-  Header,
-  Layout,
-  Main,
-  StackedLayout
-});