@lobehub/ui 1.23.0 → 1.25.2

package/es/Hero/style.js

@@ -0,0 +1,27 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    responsive = _ref.responsive,
+    token = _ref.token,
+    stylish = _ref.stylish;
+  return {
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    box-sizing: border-box;\n    text-align: center;\n  "]))),
+    title: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    z-index: 10;\n    margin: 0;\n    font-size: 100px;\n\n    ", "\n\n    b {\n      ", "\n      position: relative;\n      z-index: 5;\n      background-clip: text;\n\n      -webkit-text-fill-color: transparent;\n    }\n  "])), responsive({
+      mobile: {
+        fontSize: 72,
+        flexDirection: 'column',
+        display: 'flex',
+        lineHeight: 1.2
+      }
+    }), stylish.gradientAnimation),
+    desc: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin-top: 0;\n    font-size: ", "px;\n    color: ", ";\n    text-align: center;\n\n    ", " {\n      margin: 24px 16px;\n      font-size: ", "px;\n    }\n  "])), token.fontSizeHeading3, token.colorTextSecondary, responsive.mobile, token.fontSizeHeading5),
+    actions: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: center;\n    margin-top: 24px;\n\n    button {\n      padding-inline: 32px !important;\n      font-weight: 500;\n    }\n\n    ", "\n  "])), responsive({
+      mobile: {
+        marginTop: 24
+      }
+    })),
+    canvas: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    ", ";\n    filter: blur(100px);\n\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 10;\n    top: -250px;\n    left: 50%;\n    transform: translateX(-50%) scale(1.5);\n\n    width: 600px;\n    height: 400px;\n\n    opacity: 0.2;\n\n    ", " {\n      width: 200px;\n      height: 300px;\n    }\n  "])), stylish.gradientAnimation, responsive.mobile)
+  };
+});

package/es/Layout/index.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export interface LayoutProps {
+    asideWidth?: number;
+    children?: ReactNode;
+    content?: ReactNode;
+    footer?: ReactNode;
+    header?: ReactNode;
+    headerHeight?: number;
+    helmet?: ReactNode;
+    sidebar?: ReactNode;
+    toc?: ReactNode;
+    tocWidth?: number;
+}
+declare const Layout: import("react").NamedExoticComponent<LayoutProps>;
+export default Layout;

package/es/Layout/index.js

@@ -0,0 +1,81 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useResponsive } from 'antd-style';
+import { memo, useEffect, useState } from 'react';
+import { DraggablePanel } from "./..";
+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,
+    children = _ref.children,
+    tocWidth = _ref.tocWidth;
+  var _useStyles = useStyles(headerHeight),
+    styles = _useStyles.styles;
+  var _useResponsive = useResponsive(),
+    mobile = _useResponsive.mobile,
+    laptop = _useResponsive.laptop;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    expand = _useState2[0],
+    setExpand = _useState2[1];
+  useEffect(function () {
+    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: toc
+      })]
+    }), /*#__PURE__*/_jsxs("main", {
+      className: styles.main,
+      children: [!mobile && !sidebar && /*#__PURE__*/_jsx("nav", {
+        style: {
+          width: tocWidth
+        }
+      }), !mobile && sidebar && /*#__PURE__*/_jsx("aside", {
+        className: styles.aside,
+        style: {
+          top: headerHeight
+        },
+        children: /*#__PURE__*/_jsx(DraggablePanel, {
+          expand: expand,
+          maxWidth: asideWidth,
+          onExpandChange: setExpand,
+          placement: "left",
+          children: /*#__PURE__*/_jsx("div", {
+            className: styles.asideInner,
+            children: sidebar
+          })
+        })
+      }), /*#__PURE__*/_jsx("section", {
+        className: styles.content,
+        children: children
+      }), !mobile && toc && /*#__PURE__*/_jsx("nav", {
+        className: styles.toc,
+        style: {
+          width: tocWidth
+        },
+        children: toc
+      })]
+    }), footer && /*#__PURE__*/_jsx("footer", {
+      className: styles.footer,
+      children: footer
+    })]
+  });
+});
+export default Layout;

package/es/Layout/style.d.ts

@@ -0,0 +1,11 @@
+export declare const useStyles: (props?: number | undefined) => import("antd-style").ReturnStyles<{
+    app: import("antd-style").SerializedStyles;
+    header: import("antd-style").SerializedStyles;
+    glass: import("antd-style").SerializedStyles;
+    main: import("antd-style").SerializedStyles;
+    content: import("antd-style").SerializedStyles;
+    footer: import("antd-style").SerializedStyles;
+    aside: import("antd-style").SerializedStyles;
+    asideInner: import("antd-style").SerializedStyles;
+    toc: import("antd-style").SerializedStyles;
+}>;

package/es/Layout/style.js

@@ -0,0 +1,20 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref, headerHeight) {
+  var css = _ref.css,
+    stylish = _ref.stylish,
+    responsive = _ref.responsive;
+  var baseGlass = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    pointer-events: none;\n    content: '';\n    user-select: none;\n\n    position: absolute;\n    z-index: -1;\n    inset: -1px 0 ", ";\n  "])), responsive.mobile ? '-25%' : '-50%');
+  return {
+    app: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      overflow-x: hidden;\n      overflow-y: auto;\n      height: 100vh;\n    "]))),
+    header: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: sticky;\n      z-index: 999;\n      top: 0;\n      max-width: 100%;\n    "]))),
+    glass: css(_templateObject4 || (_templateObject4 = _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),
+    main: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      position: relative;\n      display: flex;\n      align-items: stretch;\n      max-width: 100vw;\n    "]))),
+    content: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      position: relative;\n      flex: 1;\n      max-width: 100%;\n    "]))),
+    footer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      position: relative;\n      max-width: 100%;\n    "]))),
+    aside: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      position: sticky;\n      z-index: 2;\n      height: 100%;\n    "]))),
+    asideInner: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      overflow-x: hidden;\n      overflow-y: auto;\n      width: 100%;\n      height: calc(100vh - 64px);\n    "]))),
+    toc: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([""])))
+  };
+});

package/es/Markdown/index.js

@@ -1,4 +1,4 @@
-import { Divider, Typography } from 'antd';
+import { Collapse, Divider, Typography } from 'antd';
 import pangu from 'pangu';
 import { memo } from 'react';
 import ReactMarkdown from 'react-markdown';
@@ -17,7 +17,8 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
     pre: CodeBlock,
     code: Code,
     hr: Divider,
-    a: Typography.Link
+    a: Typography.Link,
+    details: Collapse
   };
   return /*#__PURE__*/_jsx(Typography, {
     children: /*#__PURE__*/_jsx(ReactMarkdown, {

package/es/SearchBar/style.js

@@ -7,7 +7,7 @@ export var useStyles = createStyles(function (_ref) {
   return {
     search: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    max-width: 100%;\n  "]))),
     input: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    padding: 0 8px 0 12px;\n  "]))),
-    tag: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 5;\n    top: 50%;\n    right: 0;\n    transform: translateY(-50%);\n  "]))),
+    tag: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 5;\n    top: 50%;\n    right: 0;\n    transform: translateY(-50%);\n\n    background: ", ";\n  "])), token.colorBgContainer),
     icon: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), token.colorTextPlaceholder)
   };
 });

package/es/Snippet/index.js

@@ -22,7 +22,7 @@ var Snippet = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(type),
     styles = _useStyles.styles;
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
-    className: styles
+    className: styles.container
   }, props), {}, {
     children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), /*#__PURE__*/_jsx(SyntaxHighlighter, {
       language: language,

package/es/Snippet/style.d.ts

@@ -1 +1,3 @@
-export declare const useStyles: (props?: "block" | "ghost" | undefined) => import("antd-style").ReturnStyles<string>;
+export declare const useStyles: (props?: "block" | "ghost" | undefined) => import("antd-style").ReturnStyles<{
+    container: string;
+}>;

package/es/Snippet/style.js

@@ -6,5 +6,7 @@ export var useStyles = createStyles(function (_ref, type) {
     cx = _ref.cx,
     token = _ref.token;
   var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border: 1px solid ", ";\n  "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder);
-  return cx(typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: relative;\n\n      display: flex;\n      gap: 8px;\n      align-items: center;\n\n      max-width: 100%;\n      height: 36px;\n      padding: 0 8px 0 12px;\n\n      border-radius: ", "px;\n\n      transition: background-color 100ms ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n\n      .ant-highlighter-shiki {\n        overflow: auto;\n        flex: 1;\n      }\n\n      .prism-code {\n        background: none !important;\n      }\n\n      pre {\n        margin: 0 !important;\n        padding-top: 6px !important;\n        line-height: 1;\n        background: none !important;\n      }\n\n      code[class*='language-'] {\n        background: none !important;\n      }\n    "])), token.borderRadius, token.motionEaseOut, token.colorFillTertiary));
+  return {
+    container: cx(typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        position: relative;\n\n        overflow: hidden;\n        display: flex;\n        gap: 8px;\n        align-items: center;\n\n        max-width: 100%;\n        padding: 0 8px 0 12px;\n\n        border-radius: ", "px;\n\n        transition: background-color 100ms ", ";\n\n        &:hover {\n          background-color: ", ";\n        }\n\n        .ant-highlighter-shiki {\n          position: relative;\n          overflow: hidden;\n          flex: 1;\n        }\n\n        .prism-code {\n          background: none !important;\n        }\n\n        pre {\n          overflow-x: auto !important;\n          overflow-y: hidden !important;\n          display: flex;\n          align-items: center;\n\n          width: 100%;\n          height: 36px !important;\n          margin: 0 !important;\n\n          line-height: 1;\n\n          background: none !important;\n        }\n\n        code[class*='language-'] {\n          background: none !important;\n        }\n      "])), token.borderRadius, token.motionEaseOut, token.colorFillTertiary))
+  };
 });

package/es/StroyBook/style.js

@@ -9,7 +9,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   return {
     editor: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: stretch;\n        justify-content: stretch;\n\n        width: inherit;\n        min-height: inherit;\n        ", "\n      "])), mobile && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          flex-direction: column;\n        "])))),
     left: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        overflow: auto;\n        display: flex;\n        flex: 1;\n        align-items: center;\n        justify-content: center;\n\n        ", "\n      "])), !noPadding && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          padding: 40px 24px;\n        "])))),
-    right: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        background: ", ";\n      "])), token.colorBgLayout),
+    right: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        background: ", ";\n\n        .draggable-panel-fixed {\n          width: 100% !important;\n        }\n      "])), token.colorBgLayout),
     leva: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        --leva-sizes-controlWidth: 66%;\n        --leva-colors-elevation1: ", ";\n        --leva-colors-elevation2: transparent;\n        --leva-colors-elevation3: ", ";\n        --leva-colors-accent1: ", ";\n        --leva-colors-accent2: ", ";\n        --leva-colors-accent3: ", ";\n        --leva-colors-highlight1: ", ";\n        --leva-colors-highlight2: ", ";\n        --leva-colors-highlight3: ", ";\n        --leva-colors-vivid1: ", ";\n        --leva-shadows-level1: unset;\n        --leva-shadows-level2: unset;\n        --leva-fonts-mono: ", ";\n\n        overflow: auto;\n        width: 100%;\n        height: 100%;\n        padding: 6px 0;\n\n        > div {\n          background: transparent;\n\n          > div {\n            background: transparent;\n          }\n        }\n\n        input:checked + label > svg {\n          stroke: ", ";\n        }\n\n        button {\n          --leva-colors-accent2: ", ";\n        }\n      "])), token.colorFillSecondary, token.colorFillSecondary, token.colorPrimary, token.colorPrimaryHover, token.colorPrimaryActive, token.colorTextTertiary, token.colorTextSecondary, token.colorText, token.colorWarning, token.fontFamilyCode, token.colorBgLayout, token.colorFillSecondary)
   };
 });

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\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-tap-highlight-color: transparent;\n  }\n\n\n  * {\n\t  box-sizing: border-box;\n\t  vertical-align: baseline;\n  }\n\n  ::selection {\n    color: #000;\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar {\n\t  width: 0;\n\t  height: 4px;\n\t  background-color: transparent;\n\n\t  &-thumb {\n\t\t  background-color: transparent;\n\t\t  border-radius: 4px;\n\t\t  transition: background-color 500ms ", ";\n\t  }\n\n\t  &-corner {\n\t\t  display: none;\n\t  }\n  }\n\n  #root {\n\t  min-height: 100vh;\n  }\n\n  p {\n    text-align: justify;\n    word-wrap: break-word;\n  }\n\n  code {\n\t  font-family: ", " !important;\n\n\t  * {\n\t\t  font-family: inherit !important;\n\t  }\n  }\n\n  *:hover, *:focus {\n\t  ::-webkit-scrollbar {\n\t\t  &-thumb {\n\t\t\t  background-color: ", ";\n\t\t  }\n\t  }\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\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-tap-highlight-color: transparent;\n  }\n\n  body {\n    overflow-x: hidden;\n    overflow-y: auto;\n    height: 100vh;\n  }\n\n\n  * {\n\t  box-sizing: border-box;\n\t  vertical-align: baseline;\n  }\n\n  ::selection {\n    color: #000;\n    background: ", ";\n  }\n\n\n  #root {\n\t  min-height: 100vh;\n  }\n\n  p {\n    text-align: justify;\n    word-wrap: break-word;\n  }\n\n  code {\n\t  font-family: ", " !important;\n\n\t  * {\n\t\t  font-family: inherit !important;\n\t  }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily;
 }, function (_ref2) {
@@ -18,12 +18,6 @@ var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _tagge
   return theme.yellow9;
 }, function (_ref6) {
   var theme = _ref6.theme;
-  return theme.motionEaseOut;
-}, function (_ref7) {
-  var theme = _ref7.theme;
   return theme.fontFamilyCode;
-}, function (_ref8) {
-  var theme = _ref8.theme;
-  return theme.colorFill;
 });
 export default GlobalStyle;

package/es/Toc/TocMobile.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { AnchorProps } from 'antd';
+export interface AnchorItem {
+    children?: AnchorItem[];
+    id: string;
+    title: string;
+}
+export interface TocMobileProps {
+    activeKey?: string;
+    getContainer?: AnchorProps['getContainer'];
+    headerHeight?: number;
+    items: AnchorItem[];
+    onChange?: (activeKey: string) => void;
+    tocWidth?: number;
+}
+export declare const mapItems: (items: AnchorItem[]) => {
+    href: string;
+    title: string;
+    key: string;
+    children: {
+        href: string;
+        title: string;
+        key: string;
+    }[] | undefined;
+}[];
+declare const TocMobile: import("react").NamedExoticComponent<TocMobileProps>;
+export default TocMobile;

package/es/Toc/TocMobile.js

@@ -0,0 +1,108 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { ActionIcon } from "./..";
+import { Anchor, Collapse, ConfigProvider } from 'antd';
+import { PanelTopClose, PanelTopOpen } from 'lucide-react';
+import { memo } from 'react';
+import useControlledState from 'use-merge-value';
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var mapItems = function mapItems(items) {
+  return items.map(function (item) {
+    var _item$children;
+    return {
+      href: "#".concat(item.id),
+      title: item.title,
+      key: item.id,
+      children: (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.map(function (child) {
+        return {
+          href: "#".concat(child.id),
+          title: child === null || child === void 0 ? void 0 : child.title,
+          key: child.id
+        };
+      })
+    };
+  });
+};
+var TocMobile = /*#__PURE__*/memo(function (_ref) {
+  var items = _ref.items,
+    activeKey = _ref.activeKey,
+    onChange = _ref.onChange,
+    getContainer = _ref.getContainer,
+    _ref$headerHeight = _ref.headerHeight,
+    headerHeight = _ref$headerHeight === void 0 ? 64 : _ref$headerHeight,
+    _ref$tocWidth = _ref.tocWidth,
+    tocWidth = _ref$tocWidth === void 0 ? 176 : _ref$tocWidth;
+  var _useControlledState = useControlledState('', {
+      value: activeKey,
+      onChange: onChange
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    activeLink = _useControlledState2[0],
+    setActiveLink = _useControlledState2[1];
+  var _useStyles = useStyles({
+      headerHeight: headerHeight,
+      tocWidth: tocWidth
+    }),
+    styles = _useStyles.styles;
+  var activeAnchor = items.find(function (item) {
+    return item.id === activeLink;
+  });
+  return /*#__PURE__*/_jsx(ConfigProvider, {
+    theme: {
+      token: {
+        fontSize: 12,
+        sizeStep: 3
+      }
+    },
+    children: /*#__PURE__*/_jsx("section", {
+      className: styles.mobileCtn,
+      children: /*#__PURE__*/_jsx(Collapse, {
+        bordered: false,
+        className: styles.expand,
+        expandIcon: function expandIcon(_ref2) {
+          var isActive = _ref2.isActive;
+          return isActive ? /*#__PURE__*/_jsx(ActionIcon, {
+            icon: PanelTopClose,
+            size: {
+              fontSize: 16,
+              strokeWidth: 1,
+              blockSize: 24,
+              borderRadius: 3
+            }
+          }) : /*#__PURE__*/_jsx(ActionIcon, {
+            icon: PanelTopOpen,
+            size: {
+              fontSize: 16,
+              strokeWidth: 1,
+              blockSize: 24,
+              borderRadius: 3
+            }
+          });
+        },
+        expandIconPosition: 'end',
+        ghost: true,
+        children: /*#__PURE__*/_jsx(Collapse.Panel, {
+          forceRender: true,
+          header: !activeAnchor ? 'TOC' : activeAnchor.title,
+          children: /*#__PURE__*/_jsx(ConfigProvider, {
+            theme: {
+              token: {
+                fontSize: 14,
+                sizeStep: 4
+              }
+            },
+            children: /*#__PURE__*/_jsx(Anchor, {
+              getContainer: getContainer,
+              items: mapItems(items),
+              onChange: function onChange(currentLink) {
+                setActiveLink(currentLink.replace('#', ''));
+              },
+              targetOffset: headerHeight + 48
+            })
+          })
+        }, 'toc')
+      })
+    })
+  });
+});
+export default TocMobile;

package/es/Toc/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type TocMobileProps } from './TocMobile';
+export interface TocProps extends TocMobileProps {
+    isMobile?: boolean;
+}
+declare const Toc: import("react").NamedExoticComponent<TocProps>;
+export default Toc;

package/es/Toc/index.js

@@ -0,0 +1,39 @@
+import { Anchor } from 'antd';
+import { memo } from 'react';
+import { default as TocMobile, mapItems } from "./TocMobile";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Toc = /*#__PURE__*/memo(function (_ref) {
+  var activeKey = _ref.activeKey,
+    items = _ref.items,
+    getContainer = _ref.getContainer,
+    isMobile = _ref.isMobile,
+    _ref$headerHeight = _ref.headerHeight,
+    headerHeight = _ref$headerHeight === void 0 ? 64 : _ref$headerHeight,
+    _ref$tocWidth = _ref.tocWidth,
+    tocWidth = _ref$tocWidth === void 0 ? 176 : _ref$tocWidth;
+  var _useStyles = useStyles({
+      headerHeight: headerHeight,
+      tocWidth: tocWidth
+    }),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  if (isMobile) return /*#__PURE__*/_jsx(TocMobile, {
+    activeKey: activeKey,
+    getContainer: getContainer,
+    headerHeight: headerHeight,
+    items: items
+  });
+  return /*#__PURE__*/_jsxs("section", {
+    className: cx(styles.container, styles.anchor),
+    children: [/*#__PURE__*/_jsx("h4", {
+      children: "Table of Contents"
+    }), /*#__PURE__*/_jsx(Anchor, {
+      getContainer: getContainer,
+      items: mapItems(items),
+      targetOffset: headerHeight + 12
+    })]
+  });
+});
+export default Toc;

package/es/Toc/style.d.ts

@@ -0,0 +1,9 @@
+export declare const useStyles: (props?: {
+    headerHeight: number;
+    tocWidth: number;
+} | undefined) => import("antd-style").ReturnStyles<{
+    container: import("antd-style").SerializedStyles;
+    mobileCtn: import("antd-style").SerializedStyles;
+    expand: string;
+    anchor: string;
+}>;

package/es/Toc/style.js

@@ -0,0 +1,20 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
+export var useStyles = createStyles(function (_ref, _ref2) {
+  var token = _ref.token,
+    stylish = _ref.stylish,
+    responsive = _ref.responsive,
+    cx = _ref.cx,
+    css = _ref.css;
+  var tocWidth = _ref2.tocWidth,
+    headerHeight = _ref2.headerHeight;
+  var fixHeight = 36;
+  return {
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: sticky;\n        top: ", "px;\n\n        overscroll-behavior: contain;\n        grid-area: toc;\n\n        width: ", "px;\n        margin-inline-end: 24px;\n\n        border-radius: 3px;\n\n        -webkit-overflow-scrolling: touch;\n\n        ", " {\n          position: relative;\n          left: 0;\n          width: 100%;\n          margin-top: 0;\n        }\n\n        > h4 {\n          margin: 0 0 8px;\n          font-size: 12px;\n          line-height: 1;\n          color: ", ";\n        }\n      "])), headerHeight + 64, tocWidth, responsive.mobile, token.colorTextDescription),
+    mobileCtn: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        width: 100%;\n        height: ", "px;\n\n        .ant-collapse-expand-icon {\n          color: ", ";\n        }\n      "])), fixHeight, token.colorTextQuaternary),
+    expand: cx(stylish.blur, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          width: 100%;\n\n          background-color: ", ";\n          border-bottom: 1px solid ", ";\n          border-radius: 0;\n          box-shadow: ", ";\n\n          .ant-collapse-content {\n            overflow: auto;\n          }\n\n          .ant-collapse-header {\n            z-index: 10;\n            padding: 8px 16px !important;\n\n            &[aria-expanded='true'] {\n              box-shadow: ", ";\n            }\n          }\n        "])), rgba(token.colorBgLayout, 0.5), token.colorSplit, token.boxShadowSecondary, token.boxShadowSecondary)),
+    anchor: cx(stylish.blur, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          overflow-x: hidden;\n          overflow-y: auto;\n          max-height: 60vh !important;\n        "]))))
+  };
+});

package/es/index.d.ts

@@ -12,9 +12,15 @@ export { default as DraggablePanel, type DraggablePanelProps } from './Draggable
 export { default as EditableMessage, type EditableMessageProps } from './EditableMessage';
 export { default as EditableMessageList, type EditableMessageListProps, } from './EditableMessageList';
 export { default as EditableText, type EditableTextProps } from './EditableText';
+export { type FeatureItem, default as Features, type FeaturesProps } from './Features';
+export { default as Footer, type FooterProps } from './Footer';
+export { default as GradientButton, type GradientButtonProps } from './GradientButton';
+export { default as Header, type HeaderProps } from './Header';
+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 List } from './List';
 export { default as Logo, type LogoProps } from './Logo';
 export { default as Markdown, type MarkdownProps } from './Markdown';
@@ -30,6 +36,7 @@ export { default as Swatches, type SwatchesProps } from './Swatches';
 export { default as TabsNav, type TabsNavProps } from './TabsNav';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as ThemeSwitch, type ThemeSwitchProps } from './ThemeSwitch';
+export { default as Toc, type TocProps } from './Toc';
 export { default as Tooltip, type TooltipProps } from './Tooltip';
 export { type LobeCustomStylish } from './types/customStylish';
 export { type LobeCustomToken } from './types/customToken';

package/es/index.js

@@ -11,9 +11,15 @@ export { default as DraggablePanel } from "./DraggablePanel";
 export { default as EditableMessage } from "./EditableMessage";
 export { default as EditableMessageList } from "./EditableMessageList";
 export { default as EditableText } from "./EditableText";
+export { default as Features } from "./Features";
+export { default as Footer } from "./Footer";
+export { default as GradientButton } from "./GradientButton";
+export { default as Header } from "./Header";
+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 List } from "./List";
 export { default as Logo } from "./Logo";
 export { default as Markdown } from "./Markdown";
@@ -29,4 +35,5 @@ export { default as Swatches } from "./Swatches";
 export { default as TabsNav } from "./TabsNav";
 export { default as ThemeProvider } from "./ThemeProvider";
 export { default as ThemeSwitch } from "./ThemeSwitch";
+export { default as Toc } from "./Toc";
 export { default as Tooltip } from "./Tooltip";

package/es/styles/algorithms/generateCustomStylish.js

@@ -1,11 +1,17 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+import { keyframes } from 'antd-style';
 export var generateCustomStylish = function generateCustomStylish(_ref) {
   var css = _ref.css,
     token = _ref.token,
     isDarkMode = _ref.isDarkMode;
+  var gradient = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    0% {\n      background-position: 0% 50%;\n    }\n    50% {\n      background-position: 100% 50%;\n    }\n    100% {\n      background-position: 0% 50%;\n    }\n  "])));
   return {
-    blur: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      backdrop-filter: saturate(180%) blur(10px);\n    "]))),
-    markdown: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font-weight: 600;\n      }\n\n      p {\n        margin-block-start: 0;\n        margin-block-end: 0;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      pre {\n        border: none;\n        border-radius: ", "px;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0;\n        margin-inline-end: 0;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      ul li {\n        line-height: 1.8;\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan1A : token.cyan3A, isDarkMode ? token.cyan1A : token.cyan4A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius)
+    blur: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      backdrop-filter: saturate(180%) blur(10px);\n    "]))),
+    gradientAnimation: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      background-image: linear-gradient(\n        -45deg,\n        ", ",\n        ", ",\n        ", ",\n        ", "\n      );\n      background-size: 400% 400%;\n      border-radius: inherit;\n      animation: 5s ", " 5s ease infinite;\n    "])), token.gold, token.magenta, token.geekblue, token.cyan, gradient),
+    noScrollbar: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        display: none;\n        width: 0;\n        height: 0;\n        background-color: transparent;\n      }\n    "]))),
+    bottomScrollbar: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        width: 0;\n        height: 4px;\n        background-color: transparent;\n\n        &-thumb {\n          background-color: ", ";\n          border-radius: 4px;\n          transition: background-color 500ms ", ";\n        }\n\n        &-corner {\n          display: none;\n          width: 0;\n          height: 0;\n        }\n      }\n    "])), token.colorFill, token.motionEaseOut),
+    resetLinkColor: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])), token.colorTextSecondary, token.colorText),
+    markdown: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font-weight: 600;\n      }\n\n      p {\n        margin-block-start: 0;\n        margin-block-end: 0;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      pre {\n        border: none;\n        border-radius: ", "px;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0;\n        margin-inline-end: 0;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      li {\n        line-height: 1.8;\n\n        &::marker {\n          color: ", ";\n        }\n      }\n\n      details {\n        margin-bottom: 1em;\n        padding: 12px 16px;\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        transition: all 400ms ", ";\n      }\n\n      details[open] {\n        summary {\n          padding-bottom: 12px;\n          border-bottom: 1px solid ", ";\n        }\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan1A : token.cyan3A, isDarkMode ? token.cyan1A : token.cyan4A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, isDarkMode ? token.cyan9A : token.cyan10A, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadiusLG, token.motionEaseOut, token.colorBorder)
   };
 };

package/es/types/customStylish.d.ts

@@ -1,4 +1,8 @@
 export interface LobeCustomStylish {
   blur: string;
+  bottomScrollbar: string;
+  gradientAnimation: string;
   markdown: string;
+  noScrollbar: string;
+  resetLinkColor: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.23.0",
+  "version": "1.25.2",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",
@@ -70,14 +70,19 @@
     ]
   },
   "dependencies": {
+    "@ant-design/colors": "^7",
     "@ant-design/icons": "^5",
     "@babel/runtime": "^7",
     "@dqbd/tiktoken": "^1",
     "@floating-ui/react": "^0",
+    "@react-spring/web": "^9",
     "ahooks": "^3",
+    "antd": "^5",
+    "antd-style": "^3",
     "chroma-js": "^2",
     "copy-to-clipboard": "^3",
     "dayjs": "^1",
+    "dumi": "^2",
     "fast-deep-equal": "^3",
     "immer": "^10",
     "leva": "^0",
@@ -86,6 +91,7 @@
     "pangu": "^4",
     "polished": "^4",
     "prism-react-renderer": "^2",
+    "rc-footer": "^0",
     "re-resizable": "^6",
     "react-font-loader": "^2",
     "react-layout-kit": "^1",
@@ -100,23 +106,18 @@
     "zustand-utils": "^1"
   },
   "devDependencies": {
-    "@ant-design/colors": "^7",
     "@commitlint/cli": "^17",
     "@lobehub/lint": "latest",
-    "@react-spring/web": "^9",
     "@testing-library/react": "^14",
     "@types/chroma-js": "^2",
     "@types/lodash-es": "^4",
     "@types/pangu": "^4",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@vitest/coverage-c8": "latest",
-    "antd": "^5",
-    "antd-style": "^3",
+    "@vitest/coverage-v8": "latest",
     "commitlint": "^17",
     "concurrently": "^8",
     "cross-env": "^7",
-    "dumi": "^2",
     "dumi-assets-types": "^1",
     "dumi-theme-lobehub": "workspace:latest",
     "eslint": "^8",
@@ -137,6 +138,7 @@
   "peerDependencies": {
     "antd": ">=5",
     "antd-style": ">=3",
+    "dumi": ">=2",
     "react": ">=18",
     "react-dom": ">=18"
   },