@lobehub/ui 1.170.5 → 1.170.7

package/es/Drawer/index.d.ts

@@ -1,11 +1,15 @@
 import { type DrawerProps as AntdDrawerProps } from 'antd';
 import { CSSProperties, ReactNode } from 'react';
+import { type ActionIconProps } from "../ActionIcon";
 export interface DrawerProps extends Omit<AntdDrawerProps, 'styles' | 'classNames'> {
     classNames?: AntdDrawerProps['classNames'] & {
         bodyContent?: string;
         extra?: string;
+        sidebar?: string;
+        sidebarContent?: string;
         title?: string;
     };
+    closeIconProps?: ActionIconProps;
     containerMaxWidth?: number;
     noHeader?: boolean;
     sidebar?: ReactNode;
@@ -13,6 +17,8 @@ export interface DrawerProps extends Omit<AntdDrawerProps, 'styles' | 'className
     styles?: AntdDrawerProps['styles'] & {
         bodyContent?: CSSProperties;
         extra?: CSSProperties;
+        sidebar?: CSSProperties;
+        sidebarContent?: CSSProperties;
         title?: CSSProperties;
     };
 }

package/es/Drawer/index.js

@@ -1,7 +1,7 @@
 'use client';
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["onClose", "containerMaxWidth", "classNames", "title", "placement", "styles", "children", "height", "width", "extra", "noHeader", "sidebarWidth", "sidebar"];
+var _excluded = ["onClose", "containerMaxWidth", "classNames", "title", "placement", "styles", "children", "height", "width", "extra", "closeIconProps", "noHeader", "sidebarWidth", "sidebar", "closeIcon"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -30,10 +30,12 @@ var Drawer = /*#__PURE__*/memo(function (_ref) {
     height = _ref.height,
     width = _ref.width,
     extra = _ref.extra,
+    closeIconProps = _ref.closeIconProps,
     noHeader = _ref.noHeader,
     _ref$sidebarWidth = _ref.sidebarWidth,
     sidebarWidth = _ref$sidebarWidth === void 0 ? 280 : _ref$sidebarWidth,
     sidebar = _ref.sidebar,
+    closeIcon = _ref.closeIcon,
     rest = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
   var headerBorder = useMemo(function () {
@@ -80,11 +82,11 @@ var Drawer = /*#__PURE__*/memo(function (_ref) {
       right: 4,
       top: 4
     }, styles === null || styles === void 0 ? void 0 : styles.extra),
-    children: [extra, /*#__PURE__*/_jsx(ActionIcon, {
+    children: [extra, closeIcon || /*#__PURE__*/_jsx(ActionIcon, _objectSpread({
       icon: XIcon,
       onClick: onClose,
       size: 'site'
-    })]
+    }, closeIconProps))]
   });
   return /*#__PURE__*/_jsx(AntdDrawer, _objectSpread(_objectSpread({
     classNames: classNames,
@@ -100,7 +102,7 @@ var Drawer = /*#__PURE__*/memo(function (_ref) {
         padding: '0 4px'
       }, styles === null || styles === void 0 ? void 0 : styles.body),
       content: _objectSpread({
-        background: sidebar ? "linear-gradient(to right, ".concat(theme.colorBgContainer, " 49.9%, ").concat(theme.colorBgLayout, " 50%)") : theme.colorBgContainer
+        background: sidebar ? "linear-gradient(to right, ".concat(theme.colorBgLayout, " 49.9%, ").concat(theme.colorBgContainer, " 50%)") : theme.colorBgContainer
       }, styles === null || styles === void 0 ? void 0 : styles.content),
       header: _objectSpread({
         background: 'transparent',
@@ -140,23 +142,29 @@ var Drawer = /*#__PURE__*/memo(function (_ref) {
       }, styles === null || styles === void 0 ? void 0 : styles.bodyContent),
       children: [noHeader && extraNode, sidebar ? /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(Flexbox, {
+          className: classNames === null || classNames === void 0 ? void 0 : classNames.sidebar,
           paddingBlock: 12,
           paddingInline: 16,
-          style: {
-            background: theme.colorBgContainer,
+          style: _objectSpread({
+            background: theme.colorBgLayout,
             borderRight: "1px solid ".concat(theme.colorBorderSecondary),
-            height: '100%'
-          },
+            height: '100%',
+            overflowX: 'hidden',
+            overflowY: 'auto'
+          }, styles === null || styles === void 0 ? void 0 : styles.sidebar),
           width: sidebarWidth,
           children: sidebar
         }), /*#__PURE__*/_jsx(Flexbox, {
+          className: classNames === null || classNames === void 0 ? void 0 : classNames.sidebarContent,
           flex: 1,
           paddingBlock: 12,
           paddingInline: 16,
-          style: {
-            background: theme.colorBgLayout,
-            height: '100%'
-          },
+          style: _objectSpread({
+            background: theme.colorBgContainer,
+            height: '100%',
+            overflowX: 'hidden',
+            overflowY: 'auto'
+          }, styles === null || styles === void 0 ? void 0 : styles.sidebarContent),
           children: children
         })]
       }) : children]

package/es/Modal/index.js

@@ -20,7 +20,6 @@ import { Modal as AntModal, Button, ConfigProvider, Drawer } from 'antd';
 import { useResponsive } from 'antd-style';
 import { isNumber } from 'lodash-es';
 import { Maximize2, Minimize2, X } from 'lucide-react';
-import { lighten } from 'polished';
 import { memo, useState } from 'react';
 import ActionIcon from "../ActionIcon";
 import Icon from "../Icon";
@@ -71,57 +70,69 @@ var Modal = /*#__PURE__*/memo(function (_ref) {
   var body = stylesProps.body,
     restStyles = _objectWithoutProperties(stylesProps, _excluded2);
   var hideFooter = footer === false || footer === null;
-  if (enableResponsive && mobile) return /*#__PURE__*/_jsx(Drawer, _objectSpread(_objectSpread({
-    className: cx(styles.drawerContent, className),
-    closeIcon: /*#__PURE__*/_jsx(ActionIcon, {
-      icon: X
-    }),
-    destroyOnClose: destroyOnClose,
-    extra: allowFullscreen && /*#__PURE__*/_jsx(ActionIcon, {
-      icon: fullscreen ? Minimize2 : Maximize2,
-      onClick: function onClick() {
-        return setFullscreen(!fullscreen);
+  if (enableResponsive && mobile) return /*#__PURE__*/_jsx(ConfigProvider, {
+    theme: {
+      token: {
+        colorBgElevated: theme.colorBgContainer
       }
-    }),
-    footer: hideFooter ? null : footer || /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
-        onClick: onCancel
-      }, cancelButtonProps), {}, {
-        children: cancelText || 'Cancel'
-      })), /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
-        loading: confirmLoading,
-        onClick: onOk,
-        type: "primary"
-      }, okButtonProps), {}, {
-        style: _objectSpread({
-          marginInlineStart: 8
-        }, okButtonProps === null || okButtonProps === void 0 ? void 0 : okButtonProps.style),
-        children: okText || 'OK'
-      }))]
-    }),
-    height: fullscreen ? 'calc(100% - env(safe-area-inset-top))' : maxHeight || '75vh',
-    maskClassName: cx(styles.wrap, wrapClassName),
-    onClose: onCancel,
-    open: open,
-    placement: 'bottom',
-    styles: _objectSpread({
-      body: _objectSpread({
-        paddingBlock: "16px ".concat(footer ? 0 : '16px'),
-        paddingInline: (_paddings$desktop = paddings === null || paddings === void 0 ? void 0 : paddings.desktop) !== null && _paddings$desktop !== void 0 ? _paddings$desktop : 16
-      }, body)
-    }, restStyles),
-    title: title
-  }, rest), {}, {
-    children: children
-  }));
+    },
+    children: /*#__PURE__*/_jsx(Drawer, _objectSpread(_objectSpread({
+      className: cx(styles.drawerContent, className),
+      closeIcon: /*#__PURE__*/_jsx(ActionIcon, {
+        icon: X
+      }),
+      destroyOnClose: destroyOnClose,
+      extra: allowFullscreen && /*#__PURE__*/_jsx(ActionIcon, {
+        icon: fullscreen ? Minimize2 : Maximize2,
+        onClick: function onClick() {
+          return setFullscreen(!fullscreen);
+        }
+      }),
+      footer: hideFooter ? null : footer || /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+          color: 'default',
+          onClick: onCancel,
+          variant: 'filled'
+        }, cancelButtonProps), {}, {
+          children: cancelText || 'Cancel'
+        })), /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+          loading: confirmLoading,
+          onClick: onOk,
+          type: "primary"
+        }, okButtonProps), {}, {
+          style: _objectSpread({
+            marginInlineStart: 8
+          }, okButtonProps === null || okButtonProps === void 0 ? void 0 : okButtonProps.style),
+          children: okText || 'OK'
+        }))]
+      }),
+      height: fullscreen ? 'calc(100% - env(safe-area-inset-top))' : maxHeight || '75vh',
+      maskClassName: cx(styles.wrap, wrapClassName),
+      onClose: onCancel,
+      open: open,
+      placement: 'bottom',
+      styles: _objectSpread({
+        body: _objectSpread({
+          paddingBlock: "16px ".concat(footer ? 0 : '16px'),
+          paddingInline: (_paddings$desktop = paddings === null || paddings === void 0 ? void 0 : paddings.desktop) !== null && _paddings$desktop !== void 0 ? _paddings$desktop : 16
+        }, body)
+      }, restStyles),
+      title: title
+    }, rest), {}, {
+      children: children
+    }))
+  });
   return /*#__PURE__*/_jsx(ConfigProvider, {
     theme: {
       token: {
-        colorBgElevated: lighten(0.005, theme.colorBgContainer)
+        colorBgElevated: theme.colorBgContainer
       }
     },
     children: /*#__PURE__*/_jsx(AntModal, _objectSpread(_objectSpread({
-      cancelButtonProps: cancelButtonProps,
+      cancelButtonProps: _objectSpread({
+        color: 'default',
+        variant: 'filled'
+      }, cancelButtonProps),
       cancelText: cancelText,
       className: cx(styles.content, className),
       closable: true,

package/es/Modal/style.js

@@ -11,7 +11,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   var maxHeight = _ref2.maxHeight;
   return {
     content: cx(maxHeight && css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n            .", "-modal-body {\n              overflow: auto;\n              max-height: ", ";\n            }\n          "])), prefixCls, maxHeight), css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          .", "-modal-footer {\n            margin: 0;\n            padding: 16px;\n          }\n          .", "-modal-header {\n            display: flex;\n            gap: 4px;\n            align-items: center;\n            justify-content: center;\n\n            height: 56px;\n            margin-block-end: 0;\n            padding: 16px;\n          }\n          .", "-modal-content {\n            overflow: hidden;\n            padding: 0;\n            border: 1px solid ", ";\n            border-radius: ", "px;\n          }\n        "])), prefixCls, prefixCls, prefixCls, token.colorSplit, token.borderRadiusLG)),
-    drawerContent: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        &.", "-drawer-content {\n          background: ", ";\n        }\n\n        .", "-drawer-close {\n          padding: 0;\n        }\n\n        .", "-drawer-header {\n          flex: none;\n          height: ", "px !important;\n          padding-block: 0;\n          padding-inline: 16px;\n        }\n\n        .", "-drawer-footer {\n          display: flex;\n          align-items: center;\n          justify-content: flex-end;\n\n          padding: 16px;\n\n          border: none;\n        }\n      "])), prefixCls, token.colorBgContainer, prefixCls, prefixCls, HEADER_HEIGHT, prefixCls),
+    drawerContent: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        .", "-drawer-close {\n          padding: 0;\n        }\n\n        .", "-drawer-header {\n          flex: none;\n          height: ", "px !important;\n          padding-block: 0;\n          padding-inline: 16px;\n        }\n\n        .", "-drawer-footer {\n          display: flex;\n          align-items: center;\n          justify-content: flex-end;\n\n          padding: 16px;\n\n          border: none;\n        }\n      "])), prefixCls, prefixCls, HEADER_HEIGHT, prefixCls),
     wrap: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        overflow: hidden auto;\n      "])))
   };
 });

package/es/styles/theme/customToken.js

@@ -12,6 +12,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { camelCase } from 'lodash-es';
+import { mix } from 'polished';
 import { colorScales } from "../../color/colors";
 var generateColorPalette = function generateColorPalette(_ref) {
   var _ref2;
@@ -62,7 +63,8 @@ var generateCustomColorPalette = function generateCustomColorPalette(_ref3) {
   }));
 };
 export var generateCustomToken = function generateCustomToken(_ref4) {
-  var isDarkMode = _ref4.isDarkMode;
+  var isDarkMode = _ref4.isDarkMode,
+    token = _ref4.token;
   var colorCustomToken = {};
   for (var _i = 0, _Object$entries = Object.entries(colorScales); _i < _Object$entries.length; _i++) {
     var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
@@ -74,5 +76,7 @@ export var generateCustomToken = function generateCustomToken(_ref4) {
       scale: scale
     }));
   }
-  return colorCustomToken;
+  return _objectSpread(_objectSpread({}, colorCustomToken), {}, {
+    colorBgContainerSecondary: mix(0.5, token.colorBgLayout, token.colorBgContainer)
+  });
 };

package/es/types/customToken.d.ts

@@ -13,5 +13,6 @@ export type ColorPalettesAlpha = {
     [key in `${keyof PresetColorType}${ColorPaletteKeyIndex}A`]: string;
 };
 export interface LobeCustomToken extends ColorToken, ColorPalettes, ColorPalettesAlpha {
+    colorBgContainerSecondary: string;
 }
 export {};

package/package.json

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