@lobehub/ui 1.26.4 → 1.27.0

package/es/Header/index.d.ts

@@ -1,9 +1,15 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { DivProps } from "../types";
 export interface HeaderProps extends DivProps {
     actions?: ReactNode;
+    actionsClassName?: string;
+    actionsStyle?: CSSProperties;
     logo?: ReactNode;
+    logoClassName?: string;
+    logoStyle?: CSSProperties;
     nav?: ReactNode;
+    navClassName?: string;
+    navStyle?: CSSProperties;
 }
 declare const Header: import("react").NamedExoticComponent<HeaderProps>;
 export default Header;

package/es/Header/index.js

@@ -1,3 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["actionsClassName", "navClassName", "logoClassName", "nav", "logo", "actions", "actionsStyle", "logoStyle", "navStyle", "className"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { useResponsive } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -6,15 +11,25 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Header = /*#__PURE__*/memo(function (_ref) {
-  var nav = _ref.nav,
+  var actionsClassName = _ref.actionsClassName,
+    navClassName = _ref.navClassName,
+    logoClassName = _ref.logoClassName,
+    nav = _ref.nav,
     logo = _ref.logo,
-    actions = _ref.actions;
+    actions = _ref.actions,
+    actionsStyle = _ref.actionsStyle,
+    logoStyle = _ref.logoStyle,
+    navStyle = _ref.navStyle,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useResponsive = useResponsive(),
     mobile = _useResponsive.mobile;
   var _useStyles = useStyles(),
+    cx = _useStyles.cx,
     styles = _useStyles.styles;
-  return /*#__PURE__*/_jsx("section", {
-    className: styles.header,
+  return /*#__PURE__*/_jsx("section", _objectSpread(_objectSpread({
+    className: cx(styles.header, className)
+  }, props), {}, {
     children: /*#__PURE__*/_jsx(Flexbox, {
       align: 'center',
       className: styles.content,
@@ -23,27 +38,45 @@ var Header = /*#__PURE__*/memo(function (_ref) {
       width: 'auto',
       children: mobile ? /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(Flexbox, {
+          className: actionsClassName,
+          style: _objectSpread({
+            flex: 0
+          }, navStyle),
           children: nav
         }), /*#__PURE__*/_jsx(Flexbox, {
-          className: styles.left,
+          className: cx(styles.left, logoClassName),
           horizontal: true,
+          style: _objectSpread({
+            flex: 1,
+            overflow: 'hidden'
+          }, logoStyle),
           children: logo
         }), /*#__PURE__*/_jsx(Flexbox, {
+          className: actionsClassName,
+          style: _objectSpread({
+            flex: 0
+          }, actionsStyle),
           children: actions
         })]
       }) : /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(Flexbox, {
-          className: styles.left,
+          className: cx(styles.left, logoClassName),
           horizontal: true,
+          style: _objectSpread({
+            flex: 0
+          }, logoStyle),
           children: logo
         }), /*#__PURE__*/_jsx(Flexbox, {
-          style: {
-            alignSelf: 'end',
-            marginLeft: 48
-          },
+          className: navClassName,
+          style: _objectSpread({
+            flex: 1,
+            marginLeft: 48,
+            overflow: 'hidden'
+          }, navStyle),
           children: nav
         }), /*#__PURE__*/_jsxs("section", {
-          className: styles.right,
+          className: cx(styles.right, actionsClassName),
+          style: actionsStyle,
           children: [/*#__PURE__*/_jsx("div", {}), /*#__PURE__*/_jsx(Flexbox, {
             align: 'center',
             gap: 8,
@@ -53,6 +86,6 @@ var Header = /*#__PURE__*/memo(function (_ref) {
         })]
       })
     })
-  });
+  }));
 });
 export default Header;

package/es/Layout/index.d.ts

@@ -1,4 +1,25 @@
 import { ReactNode } from 'react';
+import { DivProps } from "../types";
+export interface LayoutHeaderProps extends DivProps {
+    headerHeight?: number;
+}
+export declare const LayoutHeader: import("react").NamedExoticComponent<LayoutHeaderProps>;
+export declare type LayoutMainProps = DivProps;
+export declare const LayoutMain: import("react").NamedExoticComponent<DivProps>;
+export interface LayoutSidebarProps extends DivProps {
+    headerHeight?: number;
+}
+export declare const LayoutSidebar: import("react").NamedExoticComponent<LayoutSidebarProps>;
+export interface LayoutSidebarInnerProps extends DivProps {
+    headerHeight?: number;
+}
+export declare const LayoutSidebarInner: import("react").NamedExoticComponent<LayoutSidebarInnerProps>;
+export interface LayoutTocProps extends DivProps {
+    tocWidth?: number;
+}
+export declare const LayoutToc: import("react").NamedExoticComponent<LayoutTocProps>;
+export declare type LayoutFooterProps = DivProps;
+export declare const LayoutFooter: import("react").NamedExoticComponent<DivProps>;
 export interface LayoutProps {
     asideWidth?: number;
     children?: ReactNode;

package/es/Layout/index.js

@@ -1,4 +1,14 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["headerHeight", "children"],
+  _excluded2 = ["children"],
+  _excluded3 = ["headerHeight", "children"],
+  _excluded4 = ["headerHeight", "children"],
+  _excluded5 = ["tocWidth", "children"],
+  _excluded6 = ["children"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { useResponsive } from 'antd-style';
 import { memo, useEffect, useState } from 'react';
 import DraggablePanel from "../DraggablePanel";
@@ -6,19 +16,100 @@ import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var Layout = /*#__PURE__*/memo(function (_ref) {
-  var helmet = _ref.helmet,
-    _ref$headerHeight = _ref.headerHeight,
-    headerHeight = _ref$headerHeight === void 0 ? 64 : _ref$headerHeight,
-    header = _ref.header,
-    footer = _ref.footer,
-    sidebar = _ref.sidebar,
-    asideWidth = _ref.asideWidth,
-    toc = _ref.toc,
+export var LayoutHeader = /*#__PURE__*/memo(function (_ref) {
+  var headerHeight = _ref.headerHeight,
     children = _ref.children,
-    tocWidth = _ref.tocWidth;
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(headerHeight),
     styles = _useStyles.styles;
+  return /*#__PURE__*/_jsxs("header", _objectSpread(_objectSpread({
+    className: styles.header,
+    style: {
+      height: headerHeight
+    }
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: styles.glass
+    }), children]
+  }));
+});
+export var LayoutMain = /*#__PURE__*/memo(function (_ref2) {
+  var children = _ref2.children,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  var _useStyles2 = useStyles(),
+    styles = _useStyles2.styles;
+  return /*#__PURE__*/_jsx("main", _objectSpread(_objectSpread({
+    className: styles.main
+  }, props), {}, {
+    children: children
+  }));
+});
+export var LayoutSidebar = /*#__PURE__*/memo(function (_ref3) {
+  var headerHeight = _ref3.headerHeight,
+    children = _ref3.children,
+    props = _objectWithoutProperties(_ref3, _excluded3);
+  var _useStyles3 = useStyles(headerHeight),
+    styles = _useStyles3.styles;
+  return /*#__PURE__*/_jsx("aside", _objectSpread(_objectSpread({
+    className: styles.aside,
+    style: {
+      top: headerHeight
+    }
+  }, props), {}, {
+    children: children
+  }));
+});
+export var LayoutSidebarInner = /*#__PURE__*/memo(function (_ref4) {
+  var headerHeight = _ref4.headerHeight,
+    children = _ref4.children,
+    props = _objectWithoutProperties(_ref4, _excluded4);
+  var _useStyles4 = useStyles(headerHeight),
+    styles = _useStyles4.styles;
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    className: styles.asideInner
+  }, props), {}, {
+    children: children
+  }));
+});
+export var LayoutToc = /*#__PURE__*/memo(function (_ref5) {
+  var tocWidth = _ref5.tocWidth,
+    children = _ref5.children,
+    props = _objectWithoutProperties(_ref5, _excluded5);
+  var _useStyles5 = useStyles(),
+    styles = _useStyles5.styles;
+  return /*#__PURE__*/_jsx("nav", _objectSpread(_objectSpread({
+    className: styles.toc,
+    style: {
+      width: tocWidth
+    }
+  }, props), {}, {
+    children: children
+  }));
+});
+export var LayoutFooter = /*#__PURE__*/memo(function (_ref6) {
+  var children = _ref6.children,
+    props = _objectWithoutProperties(_ref6, _excluded6);
+  var _useStyles6 = useStyles(),
+    styles = _useStyles6.styles;
+  return /*#__PURE__*/_jsx("footer", _objectSpread(_objectSpread({
+    className: styles.footer
+  }, props), {}, {
+    children: children
+  }));
+});
+var Layout = /*#__PURE__*/memo(function (_ref7) {
+  var helmet = _ref7.helmet,
+    _ref7$headerHeight = _ref7.headerHeight,
+    headerHeight = _ref7$headerHeight === void 0 ? 64 : _ref7$headerHeight,
+    header = _ref7.header,
+    footer = _ref7.footer,
+    sidebar = _ref7.sidebar,
+    asideWidth = _ref7.asideWidth,
+    toc = _ref7.toc,
+    children = _ref7.children,
+    tocWidth = _ref7.tocWidth;
+  var _useStyles7 = useStyles(headerHeight),
+    styles = _useStyles7.styles;
   var _useResponsive = useResponsive(),
     mobile = _useResponsive.mobile,
     laptop = _useResponsive.laptop;
@@ -30,50 +121,37 @@ var Layout = /*#__PURE__*/memo(function (_ref) {
     setExpand(Boolean(laptop));
   }, [laptop]);
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [helmet, header && /*#__PURE__*/_jsxs("header", {
-      className: styles.header,
-      style: {
-        height: headerHeight
-      },
-      children: [/*#__PURE__*/_jsx("div", {
-        className: styles.glass
-      }), header, mobile && toc && /*#__PURE__*/_jsx("nav", {
-        className: styles.toc,
+    children: [helmet, header && /*#__PURE__*/_jsxs(LayoutHeader, {
+      headerHeight: headerHeight,
+      children: [header, mobile && toc && /*#__PURE__*/_jsx(LayoutToc, {
+        tocWidth: tocWidth,
         children: toc
       })]
-    }), /*#__PURE__*/_jsxs("main", {
-      className: styles.main,
+    }), /*#__PURE__*/_jsxs(LayoutMain, {
       children: [!mobile && !sidebar && /*#__PURE__*/_jsx("nav", {
         style: {
           width: tocWidth
         }
-      }), !mobile && sidebar && /*#__PURE__*/_jsx("aside", {
-        className: styles.aside,
-        style: {
-          top: headerHeight
-        },
+      }), !mobile && sidebar && /*#__PURE__*/_jsx(LayoutSidebar, {
+        headerHeight: headerHeight,
         children: /*#__PURE__*/_jsx(DraggablePanel, {
           expand: expand,
           maxWidth: asideWidth,
           onExpandChange: setExpand,
           placement: "left",
-          children: /*#__PURE__*/_jsx("div", {
-            className: styles.asideInner,
+          children: /*#__PURE__*/_jsx(LayoutSidebarInner, {
+            headerHeight: headerHeight,
             children: sidebar
           })
         })
       }), /*#__PURE__*/_jsx("section", {
         className: styles.content,
         children: children
-      }), !mobile && toc && /*#__PURE__*/_jsx("nav", {
-        className: styles.toc,
-        style: {
-          width: tocWidth
-        },
+      }), !mobile && toc && /*#__PURE__*/_jsx(LayoutToc, {
+        tocWidth: tocWidth,
         children: toc
       })]
-    }), footer && /*#__PURE__*/_jsx("footer", {
-      className: styles.footer,
+    }), footer && /*#__PURE__*/_jsx(LayoutFooter, {
       children: footer
     })]
   });

package/es/Layout/style.js

@@ -9,7 +9,7 @@ export var useStyles = createStyles(function (_ref, headerHeight) {
   return {
     app: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      overflow-x: hidden;\n      overflow-y: auto;\n      height: 100vh;\n    "]))),
     aside: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: sticky;\n      z-index: 2;\n      height: 100%;\n    "]))),
-    asideInner: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      overflow-x: hidden;\n      overflow-y: auto;\n      width: 100%;\n      height: calc(100vh - 64px);\n    "]))),
+    asideInner: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      overflow-x: hidden;\n      overflow-y: auto;\n      width: 100%;\n      height: calc(100vh - ", "px);\n    "])), headerHeight),
     content: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      position: relative;\n      flex: 1;\n      max-width: 100%;\n    "]))),
     footer: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      position: relative;\n      max-width: 100%;\n    "]))),
     glass: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      z-index: 0;\n\n      &::before {\n        ", ";\n        ", ";\n        mask-image: linear-gradient(to bottom, black ", "px, transparent);\n      }\n\n      &::after {\n        ", ";\n      }\n    "])), stylish.blur, baseGlass, headerHeight, baseGlass),

package/es/ThemeProvider/GlobalStyle.js

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject;
 import { createGlobalStyle } from 'antd-style';
-var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n  html,body {\n    --font-settings: \"cv01\", \"tnum\", \"kern\";\n    --font-variations: \"opsz\" auto, tabular-nums;\n\n    overflow-x: hidden;\n    overflow-y: auto;\n\n    margin: 0;\n    padding: 0;\n\n    font-family: ", ";\n    font-size: ", "px;\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    line-height: 1;\n    color: ", ";\n    text-size-adjust: none;\n    text-rendering: optimizelegibility;\n    vertical-align: baseline;\n\n    color-scheme: dark;\n    background-color: ", ";\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-overflow-scrolling:touch;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  body {\n    overflow-x: hidden;\n    overflow-y: auto;\n    height: 100vh;\n  }\n\n  #root {\n    min-height: 100vh;\n  }\n\n  code {\n    font-family: ", " !important;\n\n    span {\n      font-family: ", " !important;\n    }\n  }\n\n  p {\n    text-align: justify;\n    word-wrap: break-word;\n  }\n\n  ::selection {\n    color: #000;\n    background: ", ";\n  }\n\n  * {\n    box-sizing: border-box;\n    vertical-align: baseline;\n\n    ::-webkit-scrollbar {\n      cursor: pointer;\n      width: 4px;\n      height: 4px;\n      background-color: transparent;\n    }\n\n    ::-webkit-scrollbar-thumb {\n      cursor: pointer;\n      background-color: transparent;\n      border-radius: 2px;\n      transition: background-color 500ms ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    ::-webkit-scrollbar-corner {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n\n    &:hover {\n      ::-webkit-scrollbar-thumb {\n        background-color: ", ";\n      }\n    }\n  }\n"])), function (_ref) {
+var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n  html,body {\n    --font-settings: \"cv01\", \"tnum\", \"kern\";\n    --font-variations: \"opsz\" auto, tabular-nums;\n\n    overflow-x: hidden;\n    overflow-y: auto;\n\n    margin: 0;\n    padding: 0;\n\n    font-family: ", ";\n    font-size: ", "px;\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    line-height: 1;\n    color: ", ";\n    text-size-adjust: none;\n    text-rendering: optimizelegibility;\n    vertical-align: baseline;\n\n    color-scheme: dark;\n    background-color: ", ";\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-overflow-scrolling:touch;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  body {\n    overflow-x: hidden;\n    height: 100vh;\n  }\n\n  #root {\n    min-height: 100vh;\n  }\n\n  code {\n    font-family: ", " !important;\n\n    span {\n      font-family: ", " !important;\n    }\n  }\n\n  p {\n    text-align: justify;\n    word-wrap: break-word;\n  }\n\n  ::selection {\n    color: #000;\n    background: ", ";\n  }\n\n  @media only screen and (min-width: 574px) {\n    * {\n      box-sizing: border-box;\n      vertical-align: baseline;\n\n      ::-webkit-scrollbar {\n        cursor: pointer;\n        width: 4px;\n        height: 4px;\n        background-color: transparent;\n      }\n\n      ::-webkit-scrollbar-thumb {\n        cursor: pointer;\n        background-color: transparent;\n        border-radius: 2px;\n        transition: background-color 500ms ", ";\n\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      ::-webkit-scrollbar-corner {\n        display: none;\n        width: 0;\n        height: 0;\n      }\n\n      &:hover {\n        ::-webkit-scrollbar-thumb {\n          background-color: ", ";\n        }\n      }\n    }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily;
 }, function (_ref2) {

package/es/index.d.ts

@@ -22,7 +22,7 @@ export { default as Hero, type HeroAction, type HeroProps } from './Hero';
 export { default as Highlighter, type HighlighterProps, SyntaxHighlighter, type SyntaxHighlighterProps, } from './Highlighter';
 export { default as Icon, type IconProps, type IconSize } from './Icon';
 export { Input, type InputProps, TextArea, type TextAreaProps } from './Input';
-export { default as Layout, type LayoutProps } from './Layout';
+export { default as Layout, LayoutFooter, type LayoutFooterProps, LayoutHeader, type LayoutHeaderProps, LayoutMain, type LayoutMainProps, type LayoutProps, LayoutSidebar, LayoutSidebarInner, type LayoutSidebarInnerProps, type LayoutSidebarProps, LayoutToc, type LayoutTocProps, } from './Layout';
 export { default as List } from './List';
 export { default as Logo, type LogoProps } from './Logo';
 export { default as Markdown, type MarkdownProps } from './Markdown';

package/es/index.js

@@ -21,7 +21,7 @@ export { default as Hero } from "./Hero";
 export { default as Highlighter, SyntaxHighlighter } from "./Highlighter";
 export { default as Icon } from "./Icon";
 export { Input, TextArea } from "./Input";
-export { default as Layout } from "./Layout";
+export { default as Layout, LayoutFooter, LayoutHeader, LayoutMain, LayoutSidebar, LayoutSidebarInner, LayoutToc } from "./Layout";
 export { default as List } from "./List";
 export { default as Logo } from "./Logo";
 export { default as Markdown } from "./Markdown";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.26.4",
+  "version": "1.27.0",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",