@ttoss/layouts 0.4.14 → 0.4.16

package/dist/esm/index.js

@@ -2275,11 +2275,23 @@ var Icon2 = React2.forwardRef((props, ref) => {
 Icon2.displayName = "Icon";
 
 // src/components/Header.tsx
-import { Box as Box3, Flex, IconButton } from "@ttoss/ui";
-import * as React4 from "react";
+import { Box as Box3, Flex as Flex2, IconButton as IconButton2 } from "@ttoss/ui";
+import * as React5 from "react";
 
 // src/components/LayoutProvider.tsx
 import * as React3 from "react";
+
+// src/useIsDesktop.ts
+import { useBreakpointIndex } from "@ttoss/ui";
+var useIsDesktop = () => {
+  const breakpointIndex = useBreakpointIndex();
+  const isDesktop = breakpointIndex >= 2;
+  return {
+    isDesktop
+  };
+};
+
+// src/components/LayoutProvider.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var LayoutContext = React3.createContext({
   isSidebarOpen: true,
@@ -2289,6 +2301,14 @@ var LayoutProvider = ({
   children
 }) => {
   const [isSidebarOpen, setIsSidebarOpen] = React3.useState(true);
+  const {
+    isDesktop
+  } = useIsDesktop();
+  React3.useEffect(() => {
+    if (!isDesktop) {
+      setIsSidebarOpen(false);
+    }
+  }, [isDesktop]);
   const toggleSidebar = () => {
     setIsSidebarOpen(prev => {
       return !prev;
@@ -2311,37 +2331,121 @@ var useLayout = () => {
 };
 
 // src/components/Sidebar.tsx
-import { Box as Box2 } from "@ttoss/ui";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { Drawer } from "@ttoss/components/Drawer";
+import { Box as Box2, Flex, IconButton } from "@ttoss/ui";
+import * as React4 from "react";
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
 var SIDEBAR_WIDTH = "2xs";
-var Sidebar = props => {
+var Sidebar = ({
+  drawerSlot,
+  showSidebarButtonInDrawer,
+  children,
+  ...boxProps
+}) => {
   const {
-    isSidebarOpen
+    isSidebarOpen,
+    toggleSidebar
   } = useLayout();
-  return /* @__PURE__ */jsx4(Box2, {
-    role: "complementary",
-    "aria-label": "Sidebar",
-    "aria-hidden": !isSidebarOpen,
-    sx: {
-      height: "full",
-      minWidth: isSidebarOpen ? SIDEBAR_WIDTH : "0",
-      width: isSidebarOpen ? SIDEBAR_WIDTH : "0",
-      opacity: isSidebarOpen ? 1 : 0,
-      transition: "min-width 0.5s ease, width 0.5s ease, opacity 0.5s ease",
-      borderRight: isSidebarOpen ? "sm" : "none",
-      borderColor: "display.border.muted.default",
-      backgroundColor: "navigation.background.muted.default",
-      paddingX: isSidebarOpen ? "3" : "0",
-      paddingY: "10",
-      ...props.sx
-    },
-    children: isSidebarOpen ? props.children : null
+  const {
+    isDesktop
+  } = useIsDesktop();
+  const sidebarButtonInDrawer = React4.useMemo(() => {
+    if (!showSidebarButtonInDrawer) {
+      return null;
+    }
+    return /* @__PURE__ */jsx4(IconButton, {
+      "aria-label": isSidebarOpen ? "Close sidebar" : "Open sidebar",
+      "aria-expanded": isSidebarOpen,
+      "aria-controls": "sidebar",
+      sx: {
+        cursor: "pointer",
+        fontSize: ["xl", "2xl"]
+      },
+      "data-testid": "sidebar-button",
+      children: /* @__PURE__ */jsx4(Icon2, {
+        icon: isSidebarOpen ? "sidebar-close" : "sidebar-open"
+      })
+    });
+  }, [isSidebarOpen, showSidebarButtonInDrawer]);
+  const memoizedDrawerSlot = React4.useMemo(() => {
+    if (!drawerSlot) {
+      return /* @__PURE__ */jsx4(Fragment, {
+        children: sidebarButtonInDrawer
+      });
+    }
+    return /* @__PURE__ */jsxs(Flex, {
+      sx: {
+        minWidth: SIDEBAR_WIDTH,
+        width: SIDEBAR_WIDTH,
+        borderRight: "sm",
+        borderColor: "display.border.muted.default",
+        alignItems: "center",
+        gap: "2"
+      },
+      children: [sidebarButtonInDrawer, drawerSlot]
+    });
+  }, [drawerSlot, sidebarButtonInDrawer]);
+  return /* @__PURE__ */jsx4(Fragment, {
+    children: isDesktop ? /* @__PURE__ */jsx4(Box2, {
+      role: "complementary",
+      "aria-label": "Sidebar",
+      "aria-hidden": !isSidebarOpen,
+      sx: {
+        position: "relative",
+        zIndex: "dropdown",
+        height: "full",
+        minHeight: isSidebarOpen ? "full" : "0",
+        width: isSidebarOpen ? SIDEBAR_WIDTH : "0",
+        minWidth: isSidebarOpen ? SIDEBAR_WIDTH : "0",
+        opacity: isSidebarOpen ? 1 : 0,
+        transition: "width 0.5s ease, opacity 0.5s ease",
+        borderRight: isSidebarOpen ? "sm" : "none",
+        borderColor: "display.border.muted.default",
+        backgroundColor: "navigation.background.muted.default",
+        paddingX: isSidebarOpen ? "6" : "0",
+        paddingY: isSidebarOpen ? "6" : "0",
+        overflowY: "auto",
+        ...boxProps.sx
+      },
+      children: isSidebarOpen ? children : null
+    }) : /* @__PURE__ */jsx4(Box2, {
+      role: "complementary",
+      "aria-label": "Sidebar",
+      "aria-hidden": !isSidebarOpen,
+      sx: {
+        position: "fixed",
+        border: "none",
+        width: isSidebarOpen ? "full" : "0",
+        height: isSidebarOpen ? "full" : "0",
+        ...boxProps.sx
+      },
+      onClick: () => {
+        if (isSidebarOpen) {
+          toggleSidebar();
+        }
+      },
+      children: /* @__PURE__ */jsx4(Drawer, {
+        open: isSidebarOpen,
+        direction: "left",
+        size: "100%",
+        enableOverlay: false,
+        children: /* @__PURE__ */jsxs(Flex, {
+          sx: {
+            width: "full",
+            height: "full",
+            gap: "6",
+            flexDirection: "column"
+          },
+          children: [memoizedDrawerSlot, isSidebarOpen ? children : null]
+        })
+      })
+    })
   });
 };
 Sidebar.displayName = "Sidebar";
 
 // src/components/Header.tsx
-import { Fragment, jsx as jsx5, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var paddingSx = {
   paddingX: "4",
   paddingY: "3"
@@ -2356,11 +2460,11 @@ var Header = ({
     isSidebarOpen,
     toggleSidebar
   } = useLayout();
-  const sidebarButton = React4.useMemo(() => {
+  const sidebarButton = React5.useMemo(() => {
     if (!showSidebarButton) {
       return null;
     }
-    return /* @__PURE__ */jsx5(IconButton, {
+    return /* @__PURE__ */jsx5(IconButton2, {
       "aria-label": isSidebarOpen ? "Close sidebar" : "Open sidebar",
       "aria-expanded": isSidebarOpen,
       "aria-controls": "sidebar",
@@ -2375,13 +2479,13 @@ var Header = ({
       })
     });
   }, [isSidebarOpen, showSidebarButton, toggleSidebar]);
-  const memoizedSidebarSlot = React4.useMemo(() => {
+  const memoizedSidebarSlot = React5.useMemo(() => {
     if (!sidebarSlot) {
-      return /* @__PURE__ */jsx5(Fragment, {
+      return /* @__PURE__ */jsx5(Fragment2, {
         children: sidebarButton
       });
     }
-    return /* @__PURE__ */jsxs(Flex, {
+    return /* @__PURE__ */jsxs2(Flex2, {
       sx: {
         minWidth: SIDEBAR_WIDTH,
         width: SIDEBAR_WIDTH,
@@ -2394,7 +2498,7 @@ var Header = ({
       children: [sidebarButton, sidebarSlot]
     });
   }, [sidebarButton, sidebarSlot]);
-  return /* @__PURE__ */jsxs(Flex, {
+  return /* @__PURE__ */jsxs2(Flex2, {
     variant: "layout.header",
     ...boxProps,
     as: "header",
@@ -2404,6 +2508,7 @@ var Header = ({
       alignItems: "center",
       borderBottom: "sm",
       borderColor: "display.border.muted.default",
+      backgroundColor: "navigation.background.primary.default",
       ...(sidebarSlot ? {} : paddingSx),
       ...boxProps.sx
     },
@@ -2456,10 +2561,10 @@ Layout.Footer = Footer;
 Layout.Container = Container;
 
 // src/components/SidebarCollapseLayout.tsx
-import { Flex as Flex2, Stack } from "@ttoss/ui";
+import { Flex as Flex3, Stack } from "@ttoss/ui";
 
 // src/getSemanticElements.ts
-import * as React5 from "react";
+import * as React6 from "react";
 var semanticComponents = {
   Header: "header",
   Sidebar: "sidebar",
@@ -2470,7 +2575,7 @@ var getSematicElements = ({
   children
 }) => {
   const semanticElements = {};
-  React5.Children.forEach(children, child => {
+  React6.Children.forEach(children, child => {
     const displayName = child?.type?.displayName;
     if (!displayName) {
       return;
@@ -2483,7 +2588,7 @@ var getSematicElements = ({
 };
 
 // src/components/SidebarCollapseLayout.tsx
-import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var SidebarCollapseLayout = ({
   children,
   ...props
@@ -2496,19 +2601,20 @@ var SidebarCollapseLayout = ({
     children
   });
   return /* @__PURE__ */jsx8(LayoutProvider, {
-    children: /* @__PURE__ */jsxs2(Stack, {
+    children: /* @__PURE__ */jsxs3(Stack, {
       ...props,
       sx: {
-        height: ["auto", "100vh"],
+        height: ["100vh"],
         width: "full",
         overflow: "hidden",
         ...props.sx
       },
-      children: [header, /* @__PURE__ */jsxs2(Flex2, {
+      children: [header, /* @__PURE__ */jsxs3(Flex3, {
         sx: {
           width: "full",
           flex: 1,
-          overflow: "hidden"
+          overflow: "hidden",
+          flexDirection: ["row"]
         },
         children: [sidebar, main]
       })]
@@ -2518,7 +2624,7 @@ var SidebarCollapseLayout = ({
 
 // src/components/StackedLayout.tsx
 import { Stack as Stack2 } from "@ttoss/ui";
-import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var StackedLayout = ({
   children,
   ...props
@@ -2531,13 +2637,13 @@ var StackedLayout = ({
     children
   });
   return /* @__PURE__ */jsx9(LayoutProvider, {
-    children: /* @__PURE__ */jsxs3(Stack2, {
+    children: /* @__PURE__ */jsxs4(Stack2, {
       ...props,
       children: [header, main, footer]
     })
   });
 };
-export { Layout, SidebarCollapseLayout, StackedLayout };
+export { Layout, SidebarCollapseLayout, StackedLayout, useIsDesktop };
 /*! Bundled license information:
 
 iconify-icon/dist/iconify-icon.mjs:

package/dist/index.d.ts

@@ -12,7 +12,10 @@ declare const Layout: {
         displayName: string;
     };
     Sidebar: {
-        (props: BoxProps): react_jsx_runtime.JSX.Element;
+        ({ drawerSlot, showSidebarButtonInDrawer, children, ...boxProps }: BoxProps & {
+            showSidebarButtonInDrawer?: boolean;
+            drawerSlot?: React.ReactNode;
+        }): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
     Main: {
@@ -30,4 +33,8 @@ declare const SidebarCollapseLayout: ({ children, ...props }: React.PropsWithChi
 
 declare const StackedLayout: ({ children, ...props }: react.PropsWithChildren<StackProps>) => react_jsx_runtime.JSX.Element;
 
-export { Layout, SidebarCollapseLayout, StackedLayout };
+declare const useIsDesktop: () => {
+    isDesktop: boolean;
+};
+
+export { Layout, SidebarCollapseLayout, StackedLayout, useIsDesktop };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/layouts",
-  "version": "0.4.14",
+  "version": "0.4.16",
   "description": "Layout components for React",
   "license": "MIT",
   "author": "ttoss",
@@ -25,7 +25,8 @@
   "sideEffects": false,
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/ui": "^5.5.4"
+    "@ttoss/components": "^2.2.8",
+    "@ttoss/ui": "^5.5.5"
   },
   "devDependencies": {
     "@types/jest": "^29.5.14",
@@ -33,10 +34,11 @@
     "jest": "^29.7.0",
     "react": "^19.0.0",
     "tsup": "^8.3.5",
-    "@ttoss/react-icons": "^0.4.9",
+    "@ttoss/components": "^2.2.8",
     "@ttoss/config": "^1.35.2",
     "@ttoss/test-utils": "^2.1.22",
-    "@ttoss/ui": "^5.5.4"
+    "@ttoss/ui": "^5.5.5",
+    "@ttoss/react-icons": "^0.4.9"
   },
   "keywords": [
     "React"