@lobehub/ui 3.1.0 → 3.1.1

package/es/Alert/Alert.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 = ["closeIcon", "closable", "description", "showIcon", "type", "glass", "icon", "colorfulText", "iconProps", "style", "extra", "classNames", "styles", "text", "extraDefaultExpand", "extraIsolate", "banner", "variant", "ref"];
+var _excluded = ["closable", "description", "showIcon", "type", "glass", "icon", "colorfulText", "iconProps", "style", "extra", "classNames", "styles", "text", "extraDefaultExpand", "extraIsolate", "banner", "variant", "ref"];
 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; }
@@ -37,8 +37,7 @@ var colors = function colors(theme) {
   return theme[camelCase(['color', type].concat(keys).join('-'))];
 };
 var Alert = /*#__PURE__*/memo(function (_ref) {
-  var closeIcon = _ref.closeIcon,
-    _ref$closable = _ref.closable,
+  var _ref$closable = _ref.closable,
     closable = _ref$closable === void 0 ? false : _ref$closable,
     description = _ref.description,
     _ref$showIcon = _ref.showIcon,
@@ -146,12 +145,13 @@ var Alert = /*#__PURE__*/memo(function (_ref) {
       hasExtra: isInsideExtra,
       variant: variant
     }), classNames === null || classNames === void 0 ? void 0 : classNames.alert),
-    closable: closable,
-    closeIcon: closeIcon || /*#__PURE__*/_jsx(ActionIcon, {
-      color: colors(theme, type),
-      icon: X,
-      size: 'small'
-    }),
+    closable: typeof closable === 'boolean' ? closable : _objectSpread({
+      closeIcon: /*#__PURE__*/_jsx(ActionIcon, {
+        color: colors(theme, type),
+        icon: X,
+        size: 'small'
+      })
+    }, closable),
     description: description,
     icon: /*#__PURE__*/_jsx(Icon, _objectSpread({
       color: type === 'secondary' ? theme.colorTextSecondary : undefined,
@@ -199,8 +199,7 @@ var Alert = /*#__PURE__*/memo(function (_ref) {
           itemKey: 'extra',
           styles: {
             content: _objectSpread({
-              fontSize: 12,
-              padding: 8
+              fontSize: 12
             }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.extraContent),
             header: {
               borderColor: colors(theme, type, 'fillSecondary')

package/es/Alert/style.js

@@ -24,6 +24,6 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     glass: stylish.blur,
     hasExtra: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        border-block-end: none;\n        border-end-start-radius: 0;\n        border-end-end-radius: 0;\n      "]))),
     outlined: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        background: transparent !important;\n      "]))),
-    root: cx(css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: row;\n          gap: ", "px;\n          align-items: flex-start;\n\n          max-width: 100%;\n          padding-block: ", "px;\n          padding-inline: ", "px\n            ", "px;\n\n          .", "-alert-message {\n            font-weight: ", ";\n            line-height: 24px;\n            word-break: normal;\n          }\n          .", "-alert-icon {\n            display: flex;\n            align-items: center;\n            height: 24px;\n            margin: 0;\n          }\n          .", "-alert-close-icon {\n            display: flex;\n            align-items: center;\n            height: 24px;\n            margin: 0;\n          }\n        "])), hasTitle ? 12 : 8, baseBlockPadding, showIcon ? baseInlinePadding * 0.75 : baseInlinePadding, closable ? baseInlinePadding * 0.75 : baseInlinePadding, prefixCls, hasTitle ? 600 : 400, prefixCls, prefixCls), hasTitle && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n            .", "-alert-description {\n              line-height: 1.5;\n              word-break: normal;\n              opacity: 0.75;\n            }\n          "])), prefixCls))
+    root: cx(css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: row;\n          gap: ", "px;\n          align-items: flex-start;\n\n          max-width: 100%;\n          padding-block: ", "px;\n          padding-inline: ", "px\n            ", "px;\n\n          .", "-alert-title {\n            font-weight: ", ";\n            line-height: 24px;\n            color: inherit;\n            word-break: normal;\n          }\n          .", "-alert-icon {\n            display: flex;\n            align-items: center;\n            height: 24px;\n            margin: 0;\n          }\n          .", "-alert-close-icon {\n            display: flex;\n            align-items: center;\n            height: 24px;\n            margin: 0;\n          }\n        "])), hasTitle ? 12 : 8, baseBlockPadding, showIcon ? baseInlinePadding * 0.75 : baseInlinePadding, closable ? baseInlinePadding * 0.75 : baseInlinePadding, prefixCls, hasTitle ? 500 : 400, prefixCls, prefixCls), hasTitle && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n            .", "-alert-description {\n              line-height: 1.5;\n              word-break: normal;\n              opacity: 0.75;\n            }\n          "])), prefixCls))
   };
 });

package/es/Image/components/usePreview.js

@@ -1,5 +1,5 @@
 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 = ["onVisibleChange", "styles", "minScale", "maxScale", "toolbarAddon", "rootClassName", "imageRender", "toolbarRender"];
+var _excluded = ["onVisibleChange", "onOpenChange", "minScale", "maxScale", "toolbarAddon", "rootClassName", "imageRender", "toolbarRender", "actionsRender"];
 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; }
@@ -31,9 +31,8 @@ export var usePreview = function usePreview(props) {
   return useMemo(function () {
     if (props === false) return props;
     var _ref = props === true ? {} : props || {},
-      _onVisibleChange = _ref.onVisibleChange,
-      _ref$styles = _ref.styles,
-      previewStyle = _ref$styles === void 0 ? {} : _ref$styles,
+      onVisibleChange = _ref.onVisibleChange,
+      _onOpenChange = _ref.onOpenChange,
       _ref$minScale = _ref.minScale,
       minScale = _ref$minScale === void 0 ? 0.32 : _ref$minScale,
       _ref$maxScale = _ref.maxScale,
@@ -41,9 +40,24 @@ export var usePreview = function usePreview(props) {
       toolbarAddon = _ref.toolbarAddon,
       rootClassName = _ref.rootClassName,
       _imageRender = _ref.imageRender,
-      _toolbarRender = _ref.toolbarRender,
+      toolbarRender = _ref.toolbarRender,
+      actionsRender = _ref.actionsRender,
       rest = _objectWithoutProperties(_ref, _excluded);
     return _objectSpread({
+      actionsRender: actionsRender || function (_, info) {
+        var originalNode = /*#__PURE__*/_jsx(Toolbar, {
+          info: info,
+          maxScale: maxScale,
+          minScale: minScale,
+          children: toolbarAddon
+        });
+        // 向后兼容 toolbarRender
+        if (toolbarRender) return toolbarRender(originalNode, info);
+        return originalNode;
+      },
+      classNames: {
+        root: cx(styles.preview, rootClassName)
+      },
       closeIcon: /*#__PURE__*/_jsx(Icon, {
         color: '#fff',
         icon: X
@@ -58,25 +72,17 @@ export var usePreview = function usePreview(props) {
       },
       maxScale: maxScale,
       minScale: minScale,
-      onVisibleChange: function onVisibleChange(visible, prevVisible) {
-        setVisible(visible);
-        _onVisibleChange === null || _onVisibleChange === void 0 || _onVisibleChange(visible, prevVisible);
+      onOpenChange: function onOpenChange(open) {
+        setVisible(open);
+        // 支持新的 onOpenChange
+        _onOpenChange === null || _onOpenChange === void 0 || _onOpenChange(open);
+        // 向后兼容旧的 onVisibleChange
+        onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(open, !open);
       },
-      rootClassName: cx(styles.preview, rootClassName),
-      styles: _objectSpread({
+      styles: {
         mask: {
           backdropFilter: 'blur(8px)'
         }
-      }, previewStyle),
-      toolbarRender: function toolbarRender(_, info) {
-        var originalNode = /*#__PURE__*/_jsx(Toolbar, {
-          info: info,
-          maxScale: maxScale,
-          minScale: minScale,
-          children: toolbarAddon
-        });
-        if (_toolbarRender) return _toolbarRender(originalNode, info);
-        return originalNode;
       }
     }, rest);
   }, [props, visible, styles]);

package/es/Image/components/usePreviewGroup.js

@@ -1,5 +1,5 @@
 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 = ["onVisibleChange", "minScale", "maxScale", "toolbarAddon", "rootClassName", "imageRender", "toolbarRender"];
+var _excluded = ["onVisibleChange", "onOpenChange", "minScale", "maxScale", "toolbarAddon", "rootClassName", "imageRender", "toolbarRender"];
 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; }
@@ -31,7 +31,8 @@ export var usePreview = function usePreview(props) {
   return useMemo(function () {
     if (props === false) return props;
     var _ref = props === true ? {} : props || {},
-      _onVisibleChange = _ref.onVisibleChange,
+      onVisibleChange = _ref.onVisibleChange,
+      _onOpenChange = _ref.onOpenChange,
       _ref$minScale = _ref.minScale,
       minScale = _ref$minScale === void 0 ? 0.32 : _ref$minScale,
       _ref$maxScale = _ref.maxScale,
@@ -52,6 +53,9 @@ export var usePreview = function usePreview(props) {
         if (toolbarRender) return toolbarRender(originalNode, info);
         return originalNode;
       },
+      classNames: {
+        root: cx(componentStyles.preview, rootClassName)
+      },
       closeIcon: /*#__PURE__*/_jsx(Icon, {
         color: '#fff',
         icon: X
@@ -66,11 +70,13 @@ export var usePreview = function usePreview(props) {
       },
       maxScale: maxScale,
       minScale: minScale,
-      onVisibleChange: function onVisibleChange(visible, prevVisible, current) {
-        setVisible(visible);
-        _onVisibleChange === null || _onVisibleChange === void 0 || _onVisibleChange(visible, prevVisible, current);
-      },
-      rootClassName: cx(componentStyles.preview, rootClassName)
+      onOpenChange: function onOpenChange(open, info) {
+        setVisible(open);
+        // 支持新的 onOpenChange
+        _onOpenChange === null || _onOpenChange === void 0 || _onOpenChange(open, info);
+        // 向后兼容旧的 onVisibleChange (注意参数差异)
+        onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(open, !open, info.current);
+      }
     }, rest);
   }, [props, visible, componentStyles]);
 };

package/es/Image/type.d.ts

@@ -1,6 +1,6 @@
 import type { ImageProps as AntdImageProps } from 'antd';
+import type { PreviewConfig } from 'antd/es/image';
 import type { GroupPreviewConfig } from 'antd/es/image/PreviewGroup';
-import type { ImagePreviewType } from 'rc-image';
 import type { CSSProperties, ReactNode, Ref } from 'react';
 export interface PreviewGroupPreviewOptions extends GroupPreviewConfig {
     toolbarAddon?: ReactNode;
@@ -11,7 +11,7 @@ export interface PreviewGroupProps {
     items?: string[];
     preview?: boolean | PreviewGroupPreviewOptions;
 }
-export interface ImagePreviewOptions extends ImagePreviewType {
+export interface ImagePreviewOptions extends PreviewConfig {
     toolbarAddon?: ReactNode;
 }
 export interface ImageProps extends Omit<AntdImageProps, 'preview'> {

package/es/Mermaid/SyntaxMermaid/index.js

@@ -6,7 +6,6 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useTheme } from 'antd-style';
 import { kebabCase } from 'lodash-es';
 import { memo, useEffect, useId, useMemo, useState } from 'react';
 import Image from "../../Image";
@@ -28,7 +27,6 @@ var SyntaxMermaid = /*#__PURE__*/memo(function (_ref) {
     })) === null || _mermaidThemes$find === void 0 ? void 0 : _mermaidThemes$find.background;
   }, [isDefaultTheme, customTheme]);
   var id = useId();
-  var theme = useTheme();
   var mermaidId = kebabCase("mermaid-".concat(id));
   var _useMermaid = useMermaid(children, {
       id: mermaidId,
@@ -82,12 +80,7 @@ var SyntaxMermaid = /*#__PURE__*/memo(function (_ref) {
     minWidth: 300,
     objectFit: 'contain',
     preview: enablePanZoom ? {
-      mask: false,
-      styles: {
-        mask: {
-          background: background || theme.colorBgContainerSecondary
-        }
-      }
+      mask: false
     } : false,
     ref: ref,
     src: blobUrl,

package/es/Tabs/Tabs.js

@@ -17,6 +17,7 @@ import ActionIcon from "../ActionIcon";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Tabs = /*#__PURE__*/memo(function (_ref) {
+  var _rest$classNames;
   var className = _ref.className,
     compact = _ref.compact,
     _ref$variant = _ref.variant,
@@ -55,20 +56,25 @@ var Tabs = /*#__PURE__*/memo(function (_ref) {
       /* eslint-enable sort-keys-fix/sort-keys-fix */
     });
   }, [styles]);
-  return /*#__PURE__*/_jsx(AntdTabs, _objectSpread({
+  return /*#__PURE__*/_jsx(AntdTabs, _objectSpread(_objectSpread({
     className: cx(variants({
       compact: compact,
       underlined: hasContent,
       variant: variant
     }), className),
-    items: items,
-    more: {
+    items: items
+  }, rest), {}, {
+    classNames: _objectSpread(_objectSpread({}, rest === null || rest === void 0 ? void 0 : rest.classNames), {}, {
+      popup: _objectSpread({
+        root: styles.dropdown
+      }, rest === null || rest === void 0 || (_rest$classNames = rest.classNames) === null || _rest$classNames === void 0 ? void 0 : _rest$classNames.popup)
+    }),
+    more: _objectSpread({
       icon: /*#__PURE__*/_jsx(ActionIcon, {
         icon: MoreHorizontalIcon
       })
-    },
-    popupClassName: cx(styles.dropdown)
-  }, rest));
+    }, rest === null || rest === void 0 ? void 0 : rest.more)
+  }));
 });
 Tabs.displayName = 'Tabs';
 export default Tabs;

package/es/Toc/TocMobile.js

@@ -59,7 +59,7 @@ var TocMobile = /*#__PURE__*/memo(function (_ref) {
             size: 'small'
           });
         },
-        expandIconPosition: 'end',
+        expandIconPlacement: 'end',
         ghost: true,
         children: /*#__PURE__*/_jsx(Collapse.Panel, {
           forceRender: true,

package/es/mdx/Mdx/index.js

@@ -136,10 +136,10 @@ var Mdx = /*#__PURE__*/memo(function (_ref) {
               return function () {
                 return /*#__PURE__*/_jsx(Alert, {
                   description: String(_context.t0 === null || _context.t0 === void 0 ? void 0 : _context.t0.message),
-                  message: 'Error compiling MDX',
                   style: {
                     width: '100%'
                   },
+                  title: 'Error compiling MDX',
                   type: "error"
                 });
               };

package/package.json

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