@kne/system-layout 0.1.0-alpha.4 → 0.1.0-alpha.6

package/dist/index.modern.js

@@ -11,6 +11,11 @@ import defaultLogo from './defaultLogo~beHinxEU.svg';
 import { ReactComponent } from './expand~bdCTnjYJ.svg';
 import ReactErrorBoundary from '@kne/react-error-boundary';
 import { createWithIntlProvider, useIntl } from '@kne/react-intl';
+import SimpleBar from 'simplebar-react';
+import 'simplebar-react/dist/simplebar.min.css';
+import LiquidGlass from '@kne/react-liquid-glass';
+import '@kne/react-liquid-glass/dist/index.css';
+import ButtonGroup from '@kne/button-group';
 
 var dom = document.createElement("div");
 dom.setAttribute("aria-hidden", "true");
@@ -32,13 +37,14 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-var style$1 = {"layout":"_sK89O","menu":"_-LpWn","open":"_G-zuN","menu-inner":"_7wq3X","logo":"_-T-Dc","menu-header":"_LOrmu","logo-img":"_2cRWf","expand-btn":"_8dzE7","username":"_b7XeQ","user-description":"_U0YTk","page":"_HnwkM","menu-list":"_8gqbZ","ai-entry":"_5qnw5","ai-dialog-window":"_UAJc-","page-dialog":"_UhsFd","page-window-content":"_2mdNn","page-content":"_nyAa2","ai-dialog-window-title":"_33Tja","ai-dialog-window-content":"_YmBhl"};
+var style$2 = {"layout":"_sK89O","menu":"_-LpWn","open":"_G-zuN","menu-inner":"_7wq3X","logo":"_-T-Dc","menu-header":"_LOrmu","logo-img":"_2cRWf","expand-btn-wrapper":"_5D-Oq","expand-btn-bg":"_p4eOE","pulse":"_3JQL4","expand-btn":"_8dzE7","username":"_b7XeQ","user-description":"_U0YTk","page":"_HnwkM","menu-list":"_8gqbZ","ai-entry":"_5qnw5","ai-dialog-window":"_UAJc-","pulse-dialog-window":"_VjIWn","page-dialog-outer":"_I7Anv","page-dialog":"_UhsFd","pulse-page-dialog":"_H7slV","page-window-content":"_2mdNn","page-children":"_OM1Q2","page-content":"_nyAa2","ai-dialog-window-title":"_33Tja","ai-dialog-window-content":"_YmBhl"};
 
 const UserCard = ({
   name,
   avatar,
   email,
   phone,
+  description,
   menuOpen
 }) => {
   if (!menuOpen) {
@@ -62,17 +68,17 @@ const UserCard = ({
     }), /*#__PURE__*/jsxs(Flex, {
       vertical: true,
       children: [/*#__PURE__*/jsx("div", {
-        className: classnames('username', style$1['username']),
+        className: classnames('username', style$2['username']),
         children: name || '-'
       }), /*#__PURE__*/jsx("div", {
-        className: classnames('user-description', style$1['user-description']),
-        children: email || phone || '-'
+        className: classnames('user-description', style$2['user-description']),
+        children: email || phone || description || '-'
       })]
     })]
   });
 };
 
-var style = {"menu-group":"_Rfzv4","menu-item-icon":"_qoDtD","menu-group-split":"_socoO","menu-item":"_Xa-2h"};
+var style$1 = {"menu-group":"_Rfzv4","menu-item-icon":"_qoDtD","menu-group-split":"_socoO","menu-item":"_Xa-2h"};
 
 const Menu = ({
   className,
@@ -84,9 +90,9 @@ const Menu = ({
 }) => {
   const location = useLocation();
   const navigate = useNavigate();
-  const currentPathname = location.pathname.replace(new RegExp(`^/${_base}`), '');
+  const currentPathname = _base ? location.pathname.replace(new RegExp(`^${_base}`), '') : location.pathname;
   return /*#__PURE__*/jsx("div", {
-    className: classnames('menu', className, style['menu-list']),
+    className: classnames('menu', className, style$1['menu-list']),
     children: items.map((item, index) => {
       var _items;
       const active = (() => {
@@ -121,19 +127,19 @@ const Menu = ({
           }
         },
         children: [hasGroup && menuOpen ? /*#__PURE__*/jsx("div", {
-          className: classnames('menu-group', style['menu-group']),
+          className: classnames('menu-group', style$1['menu-group']),
           children: item.group
         }) : null, hasGroup && !menuOpen ? /*#__PURE__*/jsx("div", {
-          className: classnames('menu-group-split', style['menu-group-split'])
+          className: classnames('menu-group-split', style$1['menu-group-split'])
         }) : null, /*#__PURE__*/jsxs(Flex, {
-          className: classnames('menu-item', style['menu-item'], {
+          className: classnames('menu-item', style$1['menu-item'], {
             ['is-active']: active,
             ['is-closed']: !menuOpen
           }),
           align: "center",
           gap: 8,
           children: [typeof icon === 'string' && /*#__PURE__*/jsx(Icon, {
-            className: classnames('menu-item-icon', style['menu-item-icon']),
+            className: classnames('menu-item-icon', style$1['menu-item-icon']),
             type: icon,
             fontClassName: "system"
           }), menuOpen && item.label]
@@ -205,7 +211,7 @@ const Layout = ({
   const [menuOpen, setMenuOpen] = useState(typeof localMenuOpen === 'boolean' ? localMenuOpen : true);
   const [aiType, setAiType] = useState('closed');
   return /*#__PURE__*/jsx("div", {
-    className: classnames(className, 'layout', style$1['layout']),
+    className: classnames(className, 'layout', style$2['layout']),
     style: {
       '--menu-max-width': _menuMaxWidth,
       '--menu-min-width': _menuMinWidth,
@@ -213,31 +219,37 @@ const Layout = ({
     },
     children: /*#__PURE__*/jsxs(Flex, {
       children: [/*#__PURE__*/jsxs("div", {
-        className: classnames('menu', style$1['menu'], {
+        className: classnames('menu', style$2['menu'], {
           ['open']: menuOpen,
-          [style$1['open']]: menuOpen
+          [style$2['open']]: menuOpen
         }),
         children: [/*#__PURE__*/jsx("div", {
-          className: classnames('logo', style$1['logo']),
+          className: classnames('logo', style$2['logo']),
           children: /*#__PURE__*/jsx(Image, _extends({
-            className: style$1['logo-img']
+            className: style$2['logo-img']
           }, Object.assign({}, logo ? logo : {
             src: defaultLogo
           })))
-        }), /*#__PURE__*/jsx(ReactComponent, {
-          className: classnames('expand-btn', style$1['expand-btn'], {
-            'is-closed': !menuOpen
-          }),
+        }), /*#__PURE__*/jsxs("div", {
+          className: classnames('expand-btn-wrapper', style$2['expand-btn-wrapper']),
           onClick: () => {
             setMenuOpen(menuOpen => {
               localStorage.setItem(LayoutMenuOpenKey, !menuOpen);
               return !menuOpen;
             });
-          }
+          },
+          children: [/*#__PURE__*/jsx(LiquidGlass, {
+            className: classnames('expand-btn-bg', style$2['expand-btn-bg']),
+            responsiveBorder: false
+          }), /*#__PURE__*/jsx(ReactComponent, {
+            className: classnames('expand-btn', style$2['expand-btn'], {
+              'is-closed': !menuOpen
+            })
+          })]
         }), /*#__PURE__*/jsxs("div", {
-          className: classnames('menu-inner', style$1['menu-inner']),
+          className: classnames('menu-inner', style$2['menu-inner']),
           children: [/*#__PURE__*/jsx("div", {
-            className: classnames('menu-header', style$1['menu-header']),
+            className: classnames('menu-header', style$2['menu-header']),
             children: /*#__PURE__*/jsx(ErrorBoundary, {
               children: menuHeader ? typeof menuHeader === 'function' ? menuHeader({
                 menuOpen
@@ -247,11 +259,11 @@ const Layout = ({
             })
           }), /*#__PURE__*/jsx(ErrorBoundary, {
             children: /*#__PURE__*/jsx(Menu, _extends({
-              className: classnames('menu-list', style$1['menu-list']),
+              className: classnames('menu-list', style$2['menu-list']),
               menuOpen: menuOpen
             }, menu))
           }), _aiDialog && /*#__PURE__*/jsx("div", {
-            className: classnames('ai-entry', style$1['ai-entry']),
+            className: classnames('ai-entry', style$2['ai-entry']),
             onClick: () => {
               setAiType('small');
             },
@@ -263,16 +275,16 @@ const Layout = ({
         })]
       }), /*#__PURE__*/jsx(Flex, {
         flex: 1,
-        className: classnames('page', style$1['page']),
+        className: classnames('page', style$2['page']),
         children: /*#__PURE__*/jsxs(Row, {
-          gutter: 24,
-          className: classnames('page-content', style$1['page-content']),
+          className: classnames('page-content', style$2['page-content']),
           children: [_aiDialog && aiType === 'inner' && /*#__PURE__*/jsx(Col, {
             span: 8,
+            className: classnames('page-dialog-outer', style$2['page-dialog-outer']),
             children: /*#__PURE__*/jsxs("div", {
-              className: classnames('page-dialog', style$1['page-dialog']),
+              className: classnames('page-dialog', style$2['page-dialog']),
               children: [/*#__PURE__*/jsxs(Flex, {
-                className: classnames('ai-dialog-window-title', style$1['ai-dialog-window-title']),
+                className: classnames('ai-dialog-window-title', style$2['ai-dialog-window-title']),
                 children: [/*#__PURE__*/jsx("div", {
                   children: _aiDialog.title
                 }), /*#__PURE__*/jsx(Flex, {
@@ -288,7 +300,7 @@ const Layout = ({
                 })]
               }), /*#__PURE__*/jsx(ErrorBoundary, {
                 children: /*#__PURE__*/jsx("div", {
-                  className: classnames('page-window-content', style$1['page-window-content']),
+                  className: classnames('page-window-content', style$2['page-window-content']),
                   children: _aiDialog.content
                 })
               })]
@@ -296,14 +308,19 @@ const Layout = ({
           }), /*#__PURE__*/jsx(Col, {
             span: aiType === 'inner' ? 16 : 24,
             children: /*#__PURE__*/jsx(ErrorBoundary, {
-              children: children
+              children: /*#__PURE__*/jsx(SimpleBar, {
+                className: classnames('page-children', style$2['page-children'], {
+                  ['has-left']: aiType === 'inner'
+                }),
+                children: children
+              })
             })
           })]
         })
       }), _aiDialog && aiType === 'small' && /*#__PURE__*/jsxs("div", {
-        className: classnames('ai-dialog-window', style$1['ai-dialog-window']),
+        className: classnames('ai-dialog-window', style$2['ai-dialog-window']),
         children: [/*#__PURE__*/jsxs(Flex, {
-          className: classnames('ai-dialog-window-title', style$1['ai-dialog-window-title']),
+          className: classnames('ai-dialog-window-title', style$2['ai-dialog-window-title']),
           children: [/*#__PURE__*/jsx("div", {
             children: _aiDialog.title
           }), /*#__PURE__*/jsxs(Flex, {
@@ -326,7 +343,7 @@ const Layout = ({
           })]
         }), /*#__PURE__*/jsx(ErrorBoundary, {
           children: /*#__PURE__*/jsx("div", {
-            className: classnames('ai-dialog-window-content', style$1['ai-dialog-window-content']),
+            className: classnames('ai-dialog-window-content', style$2['ai-dialog-window-content']),
             children: _aiDialog.content
           })
         })]
@@ -335,5 +352,31 @@ const Layout = ({
   });
 };
 
-export { Layout, Layout as default };
+var style = {"page-title":"_IOVGr","page-title-extra":"_mKsLu"};
+
+const Page = ({
+  title,
+  buttonProps,
+  children
+}) => {
+  return /*#__PURE__*/jsxs(Flex, {
+    vertical: true,
+    gap: 24,
+    children: [/*#__PURE__*/jsxs(Flex, {
+      justify: "space-between",
+      gap: 20,
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames('page-title', style['page-title']),
+        children: title
+      }), /*#__PURE__*/jsx("div", {
+        className: classnames('page-title-extra', style['page-title-extra']),
+        children: buttonProps && /*#__PURE__*/jsx(ButtonGroup, _extends({}, buttonProps))
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      children: children
+    })]
+  });
+};
+
+export { Layout, Page, Layout as default };
 //# sourceMappingURL=index.modern.js.map