@lobehub/ui 1.27.0 → 1.27.1

package/es/ActionIcon/style.js

@@ -9,6 +9,6 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   var active = _ref2.active,
     glass = _ref2.glass;
   return {
-    block: cx(glass && stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          cursor: pointer;\n\n          position: relative;\n\n          display: flex;\n          flex: none;\n          align-items: center;\n          justify-content: center;\n\n          color: ", ";\n\n          background: ", ";\n\n          transition: color 600ms ", ", transform 400ms ", ",\n            background-color 100ms ", ";\n\n          &:hover {\n            color: ", ";\n            background-color: ", ";\n          }\n\n          &:active {\n            transform: scale(0.8);\n            color: ", ";\n            background-color: ", ";\n          }\n        "])), active ? token.colorText : token.colorTextTertiary, active ? token.colorFillTertiary : 'transparent', token.motionEaseOut, token.motionEaseOut, token.motionEaseOut, token.colorText, token.colorFillSecondary, token.colorText, token.colorFill))
+    block: cx(glass && stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          cursor: pointer;\n\n          position: relative;\n\n          display: flex;\n          flex: none;\n          align-items: center;\n          justify-content: center;\n\n          color: ", ";\n\n          background: ", ";\n\n          transition: color 600ms ", ", scale 400ms ", ",\n            background-color 100ms ", ";\n\n          &:hover {\n            color: ", ";\n            background-color: ", ";\n          }\n\n          &:active {\n            scale: 0.8;\n            color: ", ";\n            background-color: ", ";\n          }\n        "])), active ? token.colorText : token.colorTextTertiary, active ? token.colorFillTertiary : 'transparent', token.motionEaseOut, token.motionEaseOut, token.motionEaseOut, token.colorText, token.colorFillSecondary, token.colorText, token.colorFill))
   };
 });

package/es/Burger/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { MenuProps } from 'antd';
+import { DivProps } from "../types";
+export interface BurgerProps extends DivProps {
+    headerHeight?: number;
+    items: MenuProps['items'];
+    openKeys?: MenuProps['openKeys'];
+    opened: boolean;
+    selectedKeys?: MenuProps['selectedKeys'];
+    setOpened: (state: boolean) => void;
+}
+declare const Burger: import("react").NamedExoticComponent<BurgerProps>;
+export default Burger;

package/es/Burger/index.js

@@ -0,0 +1,61 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["items", "openKeys", "selectedKeys", "opened", "setOpened", "className", "headerHeight"];
+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 { Drawer, Menu } from 'antd';
+import { MenuIcon, X } from 'lucide-react';
+import { memo } from 'react';
+import { Center } from 'react-layout-kit';
+import ActionIcon from "../ActionIcon";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Burger = /*#__PURE__*/memo(function (_ref) {
+  var items = _ref.items,
+    openKeys = _ref.openKeys,
+    selectedKeys = _ref.selectedKeys,
+    opened = _ref.opened,
+    setOpened = _ref.setOpened,
+    className = _ref.className,
+    _ref$headerHeight = _ref.headerHeight,
+    headerHeight = _ref$headerHeight === void 0 ? 64 : _ref$headerHeight,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(headerHeight),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsxs(Center, _objectSpread(_objectSpread({
+    className: cx(styles.container, className),
+    onClick: function onClick() {
+      setOpened(!opened);
+    }
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx(ActionIcon, {
+      icon: opened ? X : MenuIcon,
+      size: "site"
+    }), /*#__PURE__*/_jsxs(Drawer, {
+      bodyStyle: {
+        padding: 0
+      },
+      className: styles.drawer,
+      closeIcon: undefined,
+      headerStyle: {
+        display: 'none'
+      },
+      open: opened,
+      placement: 'left',
+      rootClassName: styles.drawerRoot,
+      width: '100vw',
+      children: [/*#__PURE__*/_jsx(Menu, {
+        className: styles.menu,
+        items: items,
+        mode: 'inline',
+        openKeys: openKeys,
+        selectedKeys: selectedKeys
+      }), /*#__PURE__*/_jsx("div", {
+        className: styles.fillRect
+      })]
+    })]
+  }));
+});
+export default Burger;

package/es/Burger/style.d.ts

@@ -0,0 +1,7 @@
+export declare const useStyles: (props?: number | undefined) => import("antd-style").ReturnStyles<{
+    container: import("antd-style").SerializedStyles;
+    drawer: import("antd-style").SerializedStyles;
+    drawerRoot: import("antd-style").SerializedStyles;
+    fillRect: import("antd-style").SerializedStyles;
+    menu: import("antd-style").SerializedStyles;
+}>;

package/es/Burger/style.js

@@ -0,0 +1,16 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
+export var useStyles = createStyles(function (_ref, headerHeight) {
+  var token = _ref.token,
+    css = _ref.css,
+    stylish = _ref.stylish;
+  return {
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      cursor: pointer;\n      width: ", "px;\n      height: ", "px;\n      border-radius: ", "px;\n    "])), token.controlHeight, token.controlHeight, token.borderRadius),
+    drawer: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      &.ant-drawer-content {\n        background: transparent;\n      }\n\n      .ant-drawer-body {\n        display: flex;\n        flex-direction: column;\n      }\n    "]))),
+    drawerRoot: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      top: ", "px;\n\n      :focus-visible {\n        outline: none;\n      }\n\n      .ant-drawer {\n        &-mask {\n          ", ";\n          background-color: ", ";\n        }\n\n        &-content-wrapper {\n          box-shadow: none;\n        }\n      }\n    "])), headerHeight + 1, stylish.blur, rgba(token.colorBgLayout, 0.5)),
+    fillRect: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      flex: 1;\n      width: 100%;\n      border-top: none;\n    "]))),
+    menu: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      background: transparent;\n      border-inline-end: transparent !important;\n\n      > .ant-menu-item-only-child,\n      .ant-menu-submenu-title {\n        width: 100%;\n        margin: 0 !important;\n        border-top: none;\n        border-radius: 0;\n\n        &:active {\n          color: ", ";\n          background-color: ", ";\n        }\n      }\n\n      .ant-menu-item-only-child:first-child {\n        border-top: none;\n      }\n\n      .ant-menu-submenu-title[aria-expanded='true'] {\n        a {\n          font-weight: 600;\n          color: ", " !important;\n        }\n      }\n\n      .ant-menu-item-group-title {\n        padding-top: 4px;\n        padding-bottom: 4px;\n\n        font-size: 12px;\n        font-weight: 500;\n        text-overflow: ellipsis;\n        text-transform: uppercase;\n        white-space: nowrap;\n\n        background: ", ";\n      }\n\n      .ant-menu-item {\n        width: calc(100% - 16px) !important;\n        margin: 8px !important;\n        border-radius: ", "px;\n\n        &:hover,\n        &:active {\n          color: ", " !important;\n          background: ", " !important;\n        }\n      }\n\n      .ant-menu-item-active {\n        width: calc(100% - 16px) !important;\n        margin: 8px !important;\n        background: ", ";\n        border-radius: ", "px;\n      }\n\n      .ant-menu-item-selected {\n        font-weight: 600;\n        color: ", ";\n        background: ", ";\n\n        &:hover,\n        &:active {\n          color: ", " !important;\n          background: ", " !important;\n        }\n      }\n    "])), token.colorText, token.colorFill, token.colorText, token.colorFillSecondary, token.borderRadius, token.colorText, token.colorFillSecondary, token.colorFillSecondary, token.borderRadius, token.colorBgLayout, token.colorText, token.colorBgLayout, token.colorText)
+  };
+});

package/es/ColorScales/style.js

@@ -6,9 +6,10 @@ export var alphaBg = {
   light: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAFpJREFUWAntljEKADAIA23p6v//qQ+wfUEcCu1yriEgp0FHRJSJcnehmmWm1Dv/lO4HIg1AAAKjTqm03ea88zMCCEDgO4HV5bS757f+7wRoAAIQ4B9gByAAgQ3pfiDmXmAeEwAAAABJRU5ErkJggg==) 0% 0% / 26px'
 };
 export var useStyles = createStyles(function (_ref) {
-  var css = _ref.css;
+  var css = _ref.css,
+    token = _ref.token;
   return {
-    scaleBox: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    cursor: pointer;\n\n    position: relative;\n\n    width: 48px;\n    height: 32px;\n\n    background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    background-size: 16px 16px;\n\n    &:active {\n      transform: scale(0.95);\n    }\n  "]))),
+    scaleBox: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    cursor: pointer;\n\n    position: relative;\n\n    width: 48px;\n    height: 32px;\n\n    background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    background-size: 16px 16px;\n\n    transition: scale 400ms ", ";\n\n    &:active {\n      scale: 0.8;\n    }\n  "])), token.motionEaseOut),
     scaleItem: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 100%;\n    height: 100%;\n  "]))),
     scaleRowTitle: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    width: 64px;\n    height: 32px;\n  "]))),
     text: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    opacity: 0.5;\n  "]))),

package/es/Hero/index.js

@@ -1,5 +1,5 @@
 import { GradientButton, Icon } from "./..";
-import { Button, ConfigProvider, Space } from 'antd';
+import { Button, ConfigProvider } from 'antd';
 import { useResponsive } from 'antd-style';
 import * as LucideIcon from 'lucide-react';
 import { memo, useCallback } from 'react';
@@ -16,10 +16,8 @@ var Hero = /*#__PURE__*/memo(function (_ref) {
   var _useResponsive = useResponsive(),
     mobile = _useResponsive.mobile;
   var ButtonGroups = useCallback(function () {
-    return Boolean(actions === null || actions === void 0 ? void 0 : actions.length) && /*#__PURE__*/_jsx(Space, {
+    return Boolean(actions === null || actions === void 0 ? void 0 : actions.length) && /*#__PURE__*/_jsx("div", {
       className: styles.actions,
-      direction: mobile ? 'vertical' : 'horizontal',
-      size: 24,
       children: actions.map(function (_ref2, index) {
         var text = _ref2.text,
           link = _ref2.link,
@@ -33,12 +31,14 @@ var Hero = /*#__PURE__*/memo(function (_ref) {
           rel: "noreferrer",
           target: openExternal ? '_blank' : undefined,
           children: type === 'primary' ? /*#__PURE__*/_jsx(GradientButton, {
+            block: mobile,
             icon: ButtonIcon && /*#__PURE__*/_jsx(Icon, {
               icon: ButtonIcon
             }),
             size: "large",
             children: text
           }, index) : /*#__PURE__*/_jsx(Button, {
+            block: mobile,
             icon: ButtonIcon && /*#__PURE__*/_jsx(Icon, {
               icon: ButtonIcon
             }),

package/es/Hero/style.js

@@ -8,11 +8,7 @@ export var useStyles = createStyles(function (_ref) {
     token = _ref.token,
     stylish = _ref.stylish;
   return {
-    actions: css(_templateObject || (_templateObject = _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
-      }
-    })),
+    actions: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    gap: 24px;\n    justify-content: center;\n    margin-top: 24px;\n\n    button {\n      padding-inline: 32px !important;\n      font-weight: 500;\n    }\n\n    ", " {\n      flex-direction: column;\n      gap: 16px;\n      width: 100%;\n      margin-top: 24px;\n\n      button {\n        width: 100%;\n      }\n    }\n  "])), responsive.mobile),
     canvas: cx(stylish.gradientAnimation, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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      filter: blur(100px);\n\n      ", " {\n        width: 200px;\n        height: 300px;\n      }\n    "])), responsive.mobile)),
     container: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: relative;\n    box-sizing: border-box;\n    text-align: center;\n  "]))),
     desc: css(_templateObject4 || (_templateObject4 = _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),

package/es/Icon/style.js

@@ -3,7 +3,7 @@ var _templateObject, _templateObject2;
 import { createStyles, keyframes } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
-  var spin = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n  "])));
+  var spin = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    rotate: 0deg;\n  }\n  100% {\n    rotate: 360deg;\n  }\n  "])));
   return {
     spin: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      animation: ", " 1s linear infinite;\n    "])), spin)
   };

package/es/Layout/index.js

@@ -1,12 +1,12 @@
 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"];
+var _excluded = ["headerHeight", "children", "className", "style"],
+  _excluded2 = ["children", "className"],
+  _excluded3 = ["headerHeight", "children", "className", "style"],
+  _excluded4 = ["headerHeight", "children", "className"],
+  _excluded5 = ["tocWidth", "style", "className", "children"],
+  _excluded6 = ["children", "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';
@@ -19,14 +19,17 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 export var LayoutHeader = /*#__PURE__*/memo(function (_ref) {
   var headerHeight = _ref.headerHeight,
     children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(headerHeight),
+    cx = _useStyles.cx,
     styles = _useStyles.styles;
   return /*#__PURE__*/_jsxs("header", _objectSpread(_objectSpread({
-    className: styles.header,
-    style: {
+    className: cx(styles.header, className),
+    style: _objectSpread({
       height: headerHeight
-    }
+    }, style)
   }, props), {}, {
     children: [/*#__PURE__*/_jsx("div", {
       className: styles.glass
@@ -35,11 +38,13 @@ export var LayoutHeader = /*#__PURE__*/memo(function (_ref) {
 });
 export var LayoutMain = /*#__PURE__*/memo(function (_ref2) {
   var children = _ref2.children,
+    className = _ref2.className,
     props = _objectWithoutProperties(_ref2, _excluded2);
   var _useStyles2 = useStyles(),
+    cx = _useStyles2.cx,
     styles = _useStyles2.styles;
   return /*#__PURE__*/_jsx("main", _objectSpread(_objectSpread({
-    className: styles.main
+    className: cx(styles.main, className)
   }, props), {}, {
     children: children
   }));
@@ -47,14 +52,17 @@ export var LayoutMain = /*#__PURE__*/memo(function (_ref2) {
 export var LayoutSidebar = /*#__PURE__*/memo(function (_ref3) {
   var headerHeight = _ref3.headerHeight,
     children = _ref3.children,
+    className = _ref3.className,
+    style = _ref3.style,
     props = _objectWithoutProperties(_ref3, _excluded3);
   var _useStyles3 = useStyles(headerHeight),
+    cx = _useStyles3.cx,
     styles = _useStyles3.styles;
   return /*#__PURE__*/_jsx("aside", _objectSpread(_objectSpread({
-    className: styles.aside,
-    style: {
+    className: cx(styles.aside, className),
+    style: _objectSpread({
       top: headerHeight
-    }
+    }, style)
   }, props), {}, {
     children: children
   }));
@@ -62,37 +70,44 @@ export var LayoutSidebar = /*#__PURE__*/memo(function (_ref3) {
 export var LayoutSidebarInner = /*#__PURE__*/memo(function (_ref4) {
   var headerHeight = _ref4.headerHeight,
     children = _ref4.children,
+    className = _ref4.className,
     props = _objectWithoutProperties(_ref4, _excluded4);
   var _useStyles4 = useStyles(headerHeight),
+    cx = _useStyles4.cx,
     styles = _useStyles4.styles;
   return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-    className: styles.asideInner
+    className: cx(styles.asideInner, className)
   }, props), {}, {
     children: children
   }));
 });
 export var LayoutToc = /*#__PURE__*/memo(function (_ref5) {
   var tocWidth = _ref5.tocWidth,
+    style = _ref5.style,
+    className = _ref5.className,
     children = _ref5.children,
     props = _objectWithoutProperties(_ref5, _excluded5);
   var _useStyles5 = useStyles(),
+    cx = _useStyles5.cx,
     styles = _useStyles5.styles;
   return /*#__PURE__*/_jsx("nav", _objectSpread(_objectSpread({
-    className: styles.toc,
-    style: {
+    className: cx(styles.toc, className),
+    style: tocWidth ? _objectSpread({
       width: tocWidth
-    }
+    }, style) : style
   }, props), {}, {
     children: children
   }));
 });
 export var LayoutFooter = /*#__PURE__*/memo(function (_ref6) {
   var children = _ref6.children,
+    className = _ref6.className,
     props = _objectWithoutProperties(_ref6, _excluded6);
   var _useStyles6 = useStyles(),
+    cx = _useStyles6.cx,
     styles = _useStyles6.styles;
   return /*#__PURE__*/_jsx("footer", _objectSpread(_objectSpread({
-    className: styles.footer
+    className: cx(styles.footer, className)
   }, props), {}, {
     children: children
   }));
@@ -124,7 +139,6 @@ var Layout = /*#__PURE__*/memo(function (_ref7) {
     children: [helmet, header && /*#__PURE__*/_jsxs(LayoutHeader, {
       headerHeight: headerHeight,
       children: [header, mobile && toc && /*#__PURE__*/_jsx(LayoutToc, {
-        tocWidth: tocWidth,
         children: toc
       })]
     }), /*#__PURE__*/_jsxs(LayoutMain, {

package/es/Swatches/index.d.ts

@@ -14,6 +14,11 @@ export interface SwatchesProps {
      * @default undefined
      */
     onSelect?: (c?: string | undefined) => void;
+    /**
+     * @description The size of swatch
+     * @default 24
+     */
+    size?: number;
 }
 declare const Swatches: import("react").NamedExoticComponent<SwatchesProps>;
 export default Swatches;

package/es/Swatches/index.js

@@ -1,41 +1,39 @@
 import { useTheme } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Swatches = /*#__PURE__*/memo(function (_ref) {
   var colors = _ref.colors,
     activeColor = _ref.activeColor,
-    onSelect = _ref.onSelect;
+    onSelect = _ref.onSelect,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 24 : _ref$size;
   var theme = useTheme();
+  var _useStyles = useStyles(size),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
   return /*#__PURE__*/_jsxs(Flexbox, {
     gap: 8,
     horizontal: true,
     children: [/*#__PURE__*/_jsx(Flexbox, {
+      className: cx(styles.container, !activeColor && styles.active),
       onClick: function onClick() {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect();
       },
       style: {
-        background: theme.colorBgContainer,
-        borderRadius: '50%',
-        boxShadow: "inset 0 0 0px 2px ".concat(activeColor ? 'rgba(0,0,0,0.1)' : theme.colorPrimary),
-        cursor: 'pointer',
-        height: 24,
-        width: 24
+        background: theme.colorBgContainer
       }
     }), colors.map(function (c) {
-      var borderColor = c === activeColor ? theme.colorPrimary : 'rgba(0,0,0,0.1)';
+      var isActive = c === activeColor;
       return /*#__PURE__*/_jsx(Flexbox, {
+        className: cx(styles.container, isActive && styles.active),
         onClick: function onClick() {
           onSelect === null || onSelect === void 0 ? void 0 : onSelect(c);
         },
         style: {
-          background: c,
-          borderRadius: '50%',
-          boxShadow: "inset 0 0 0px 2px ".concat(borderColor),
-          cursor: 'pointer',
-          height: 24,
-          width: 24
+          background: c
         }
       }, c);
     })]

package/es/Swatches/style.d.ts

@@ -0,0 +1,4 @@
+export declare const useStyles: (props?: number | undefined) => import("antd-style").ReturnStyles<{
+    active: import("antd-style").SerializedStyles;
+    container: import("antd-style").SerializedStyles;
+}>;

package/es/Swatches/style.js

@@ -0,0 +1,11 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref, size) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    active: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      box-shadow: inset 0 0 0 2px ", ";\n    "])), token.colorPrimary),
+    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      width: ", "px;\n      height: ", "px;\n\n      background: ", ";\n      border-radius: 50%;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      transition: scale 400ms ", ";\n\n      &:active {\n        scale: 0.8;\n      }\n    "])), size, size, token.colorBgContainer, token.colorFill, token.motionEaseOut)
+  };
+});

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    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 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  * {\n\t  box-sizing: border-box;\n\t  vertical-align: baseline;\n  }\n\n  @media only screen and (min-width: 574px) {\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/Toc/style.js

@@ -14,7 +14,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   return {
     anchor: cx(stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          overflow-x: hidden;\n          overflow-y: auto;\n          max-height: 60vh !important;\n        "])))),
     container: css(_templateObject2 || (_templateObject2 = _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),
-    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)),
+    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        "])), rgba(token.colorBgLayout, 0.5), token.colorSplit, token.boxShadowSecondary)),
     mobileCtn: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        width: 100%;\n        height: ", "px;\n\n        .ant-collapse-expand-icon {\n          color: ", ";\n        }\n      "])), fixHeight, token.colorTextQuaternary)
   };
 });

package/es/index.d.ts

@@ -1,6 +1,7 @@
 export { default as ActionIcon, type ActionIconProps, type ActionIconSize } from './ActionIcon';
 export { default as ActionIconGroup, type ActionIconGroupProps } from './ActionIconGroup';
 export { default as Avatar, type AvatarProps } from './Avatar';
+export { default as Burger, type BurgerProps } from './Burger';
 export type { ChatMessage, MessageRoleType } from './Chat';
 export { default as ChatInputArea, type ChatInputAreaProps } from './ChatInputArea';
 export { default as ChatItem, type ChatItemProps } from './ChatItem';
@@ -41,5 +42,4 @@ export { default as ThemeSwitch, type ThemeSwitchProps } from './ThemeSwitch';
 export { default as Toc, type TocProps } from './Toc';
 export { default as TokenTag, type TokenTagProps } from './TokenTag';
 export { default as Tooltip, type TooltipProps } from './Tooltip';
-export { type LobeCustomStylish } from './types/customStylish';
-export { type LobeCustomToken } from './types/customToken';
+export type * from './types';

package/es/index.js

@@ -1,6 +1,7 @@
 export { default as ActionIcon } from "./ActionIcon";
 export { default as ActionIconGroup } from "./ActionIconGroup";
 export { default as Avatar } from "./Avatar";
+export { default as Burger } from "./Burger";
 export { default as ChatInputArea } from "./ChatInputArea";
 export { default as ChatItem } from "./ChatItem";
 export { default as ChatList } from "./ChatList";

package/es/types/customStylish.d.ts

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

package/es/types/customStylish.js

@@ -0,0 +1 @@
+export {};

package/es/types/customToken.d.ts

@@ -1,48 +1,17 @@
-const PresetColors = [
-  'red',
-  'volcano',
-  'orange',
-  'gold',
-  'yellow',
-  'lime',
-  'green',
-  'cyan',
-  'blue',
-  'geekblue',
-  'purple',
-  'magenta',
-  'gray',
-] as const;
-
-export type PresetColorKey = (typeof PresetColors)[number];
-
-export type PresetColorType = Record<PresetColorKey, string>;
-
-type ColorPaletteKeyIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
-
-type ColorTokenKey =
-  | 'Bg'
-  | 'BgHover'
-  | 'Border'
-  | 'BorderSecondary'
-  | 'BorderHover'
-  | 'Hover'
-  | ''
-  | 'Active'
-  | 'TextHover'
-  | 'Text'
-  | 'TextActive';
-
-export type ColorToken = {
-  [key in `${keyof PresetColorType}${ColorTokenKey}`]: string;
+declare const PresetColors: readonly ["red", "volcano", "orange", "gold", "yellow", "lime", "green", "cyan", "blue", "geekblue", "purple", "magenta", "gray"];
+export declare type PresetColorKey = (typeof PresetColors)[number];
+export declare type PresetColorType = Record<PresetColorKey, string>;
+declare type ColorPaletteKeyIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
+declare type ColorTokenKey = 'Bg' | 'BgHover' | 'Border' | 'BorderSecondary' | 'BorderHover' | 'Hover' | '' | 'Active' | 'TextHover' | 'Text' | 'TextActive';
+export declare type ColorToken = {
+    [key in `${keyof PresetColorType}${ColorTokenKey}`]: string;
 };
-
-export type ColorPalettes = {
-  [key in `${keyof PresetColorType}${ColorPaletteKeyIndex}`]: string;
+export declare type ColorPalettes = {
+    [key in `${keyof PresetColorType}${ColorPaletteKeyIndex}`]: string;
 };
-
-export type ColorPalettesAlpha = {
-  [key in `${keyof PresetColorType}${ColorPaletteKeyIndex}A`]: string;
+export declare type ColorPalettesAlpha = {
+    [key in `${keyof PresetColorType}${ColorPaletteKeyIndex}A`]: string;
 };
-
-export interface LobeCustomToken extends ColorToken, ColorPalettes, ColorPalettesAlpha {}
+export interface LobeCustomToken extends ColorToken, ColorPalettes, ColorPalettesAlpha {
+}
+export {};

package/es/types/customToken.js

@@ -0,0 +1,2 @@
+var PresetColors = ['red', 'volcano', 'orange', 'gold', 'yellow', 'lime', 'green', 'cyan', 'blue', 'geekblue', 'purple', 'magenta', 'gray'];
+export {};

package/es/types/index.d.ts

@@ -1,4 +1,9 @@
 import { type HTMLAttributes } from 'react';
+export * from './chatMessage';
+export * from './customStylish';
+export * from './customToken';
+export * from './llm';
+export * from './meta';
 export declare type DivProps = HTMLAttributes<HTMLDivElement>;
 export declare type SvgProps = HTMLAttributes<SVGSVGElement>;
 export declare type ImgProps = HTMLAttributes<HTMLImageElement>;

package/es/types/index.js

@@ -1 +1,6 @@
+export * from "./chatMessage";
+export * from "./customStylish";
+export * from "./customToken";
+export * from "./llm";
+export * from "./meta";
 export {};

package/package.json

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