@lobehub/ui 2.24.3 → 2.25.0

package/es/Accordion/Accordion.js

@@ -20,7 +20,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Divider } from 'antd';
-import { LayoutGroup } from 'framer-motion';
+import { LayoutGroup } from 'motion/react';
 import { Children, Fragment, forwardRef, isValidElement, memo, useCallback } from 'react';
 import useMergeState from 'use-merge-value';
 import { AccordionContext } from "./context";

package/es/Accordion/AccordionItem.js

@@ -6,7 +6,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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; }
 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 { LazyMotion, m } from 'framer-motion';
+import { LazyMotion, m } from 'motion/react';
 import { memo, useCallback, useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import Block from "../Block";
@@ -18,7 +18,7 @@ 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 loadFeatures = function loadFeatures() {
-  return import('framer-motion').then(function (res) {
+  return import('motion/react').then(function (res) {
     return res.domAnimation;
   });
 };

package/es/Accordion/type.d.ts

@@ -111,7 +111,7 @@ export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
      */
     keepContentMounted?: boolean;
     /**
-     * Motion props for framer-motion animation
+     * Motion props for motion animation
      */
     motionProps?: any;
     /**

package/es/ActionIcon/ActionIcon.js

@@ -149,10 +149,10 @@ var ActionIcon = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
     title: title
   }, tooltipProps), {}, {
-    styles: _objectSpread(_objectSpread({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.styles), {}, {
-      root: _objectSpread({
+    styles: typeof (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.styles) === 'function' ? tooltipProps.styles : _objectSpread(_objectSpread({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.styles), {}, {
+      container: _objectSpread({
         pointerEvents: 'none'
-      }, tooltipProps === null || tooltipProps === void 0 || (_tooltipProps$styles = tooltipProps.styles) === null || _tooltipProps$styles === void 0 ? void 0 : _tooltipProps$styles.root)
+      }, tooltipProps === null || tooltipProps === void 0 || (_tooltipProps$styles = tooltipProps.styles) === null || _tooltipProps$styles === void 0 ? void 0 : _tooltipProps$styles.container)
     }),
     children: node
   }));

package/es/Collapse/Collapse.js

@@ -120,7 +120,6 @@ var Collapse = /*#__PURE__*/memo(function (_ref) {
       }
     },
     children: /*#__PURE__*/_jsx(AntdCollapse, _objectSpread({
-      bordered: false,
       className: cx(variants({
         collapsible: collapsible,
         gap: !!gap,

package/es/DraggableSideNav/style.js

@@ -19,7 +19,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      /* Width transition controlled by inline style */\n\n      /* Ensure smooth animations */\n      will-change: width;\n\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n\n      height: 100%;\n    "]))),
     contentContainer: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n\n      height: 100%;\n      border-inline-end: ", " solid ", ";\n\n      background: ", ";\n    "])), showBorder ? '1px' : '0', token.colorBorderSecondary, backgroundColor || token.colorBgLayout),
     footer: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      flex-shrink: 0;\n    "]))),
-    handlerIcon: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      /* Icon transitions are now handled by framer-motion */\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    "]))),
+    handlerIcon: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      /* Icon transitions are now handled by motion */\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    "]))),
     header: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      flex-shrink: 0;\n    "]))),
     menuOverride: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      .", "-menu {\n        .", "-menu-item {\n          display: flex;\n          gap: 8px;\n          align-items: center;\n          justify-content: center;\n\n          height: unset;\n          min-height: 36px;\n          padding-block: 4px;\n          padding-inline: 8px !important;\n        }\n\n        .", "-menu-item-group-title {\n          overflow: hidden;\n          padding-inline: 8px;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n\n        .", "-menu-item-icon {\n          position: absolute;\n          inset-inline-start: 0;\n\n          display: flex !important;\n          flex: none;\n          align-items: center;\n          justify-content: center;\n\n          width: 36px;\n          height: 36px;\n        }\n\n        .", "-menu-title-content {\n          overflow: hidden;\n          flex: 1;\n\n          margin: 0 !important;\n          padding-inline-start: 36px;\n\n          line-height: 1.5;\n        }\n\n        &.", "-menu-inline-collapsed {\n          .ant-menu-title-content {\n            display: none;\n            width: 0;\n            opacity: 0;\n          }\n\n          .", "-menu-item {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n\n            width: 36px !important;\n            height: 36px !important;\n          }\n        }\n      }\n    "])), prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls),
     resizeHandle: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      cursor: col-resize;\n\n      position: absolute;\n      inset-block: 0 0;\n\n      width: 8px;\n\n      transition: background-color 0.2s ease;\n\n      &::after {\n        content: '';\n\n        position: absolute;\n        inset-block: 0;\n        inset-inline-start: 50%;\n        transform: translateX(-50%);\n\n        width: 2px;\n\n        background: transparent;\n\n        transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n      }\n    "]))),

package/es/Drawer/Drawer.js

@@ -126,20 +126,20 @@ var Drawer = /*#__PURE__*/memo(function (_ref) {
     onClose: onClose,
     panelRef: ref,
     placement: placement,
-    styles: _objectSpread(_objectSpread({}, styles), {}, {
+    styles: typeof styles === 'function' ? styles : _objectSpread(_objectSpread({}, styles), {}, {
       body: _objectSpread({
         background: 'transparent',
         paddingBlock: sidebar ? 0 : 12,
         paddingInline: sidebar ? 0 : 16
       }, styles === null || styles === void 0 ? void 0 : styles.body),
-      content: _objectSpread({
-        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',
         display: noHeader ? 'none' : undefined,
         padding: 4
       }, styles === null || styles === void 0 ? void 0 : styles.header),
+      section: _objectSpread({
+        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.section),
       wrapper: _objectSpread(_objectSpread({
         background: theme.colorBgContainer
       }, headerBorder), styles === null || styles === void 0 ? void 0 : styles.wrapper)

package/es/EmojiPicker/AvatarUploader.js

@@ -7,6 +7,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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 { Upload, message } from 'antd';
+import { useTheme } from 'antd-style';
 import { ChevronLeftIcon, ImageUpIcon } from 'lucide-react';
 import { memo, useCallback, useRef, useState } from 'react';
 import AvatarEditor from 'react-avatar-editor';
@@ -15,7 +16,6 @@ import Button from "../Button";
 import Icon from "../Icon";
 import Tag from "../Tag";
 import Text from "../Text";
-import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Dragger = Upload.Dragger;
@@ -40,9 +40,7 @@ var AvatarUploader = /*#__PURE__*/memo(function (_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     previewImage = _useState2[0],
     setPreviewImage = _useState2[1];
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles,
-    theme = _useStyles.theme;
+  var theme = useTheme();
   var beforeUpload = useCallback(function (file) {
     var isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/webp';
     if (!isJpgOrPng) {
@@ -118,7 +116,6 @@ var AvatarUploader = /*#__PURE__*/memo(function (_ref) {
       children: [/*#__PURE__*/_jsx(AvatarEditor, {
         border: 0,
         borderRadius: shape === 'square' ? undefined : compressSize / 2,
-        className: styles.editor,
         height: compressSize,
         image: previewImage,
         ref: editor,

package/es/EmojiPicker/style.d.ts

@@ -1,5 +1,4 @@
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    editor: import("antd-style").SerializedStyles;
     picker: import("antd-style").SerializedStyles;
     popover: import("antd-style").SerializedStyles;
     root: import("antd-style").SerializedStyles;

package/es/EmojiPicker/style.js

@@ -1,4 +1,4 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { createStyles } from 'antd-style';
 import chroma from 'chroma-js';
@@ -7,10 +7,9 @@ export var useStyles = createStyles(function (_ref) {
     token = _ref.token,
     prefixCls = _ref.prefixCls;
   return {
-    editor: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden;\n    border: 1px solid ", ";\n    border-radius: ", "px;\n  "])), token.colorBorder, token.borderRadiusLG),
-    picker: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n\n    em-emoji-picker {\n      --rgb-accent: ", ";\n      --shadow: none;\n      --rgb-background: ", ";\n      --border-radius: 0;\n    }\n  "])), chroma(token.colorPrimary).rgb().join(','), chroma(token.colorBgElevated).rgb().join(',')),
-    popover: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    .", "-popover-inner {\n      overflow: hidden;\n      padding: 0;\n    }\n  "])), prefixCls),
-    root: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    position: relative;\n    transition: background 150ms ", ";\n\n    &:hover {\n      background: ", ";\n    }\n  "])), token.motionEaseOut, token.colorFillSecondary),
-    tabs: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    border-block-end: 1px solid ", ";\n\n    .ant-tabs-tab {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      width: 32px;\n      height: 32px;\n      padding: 0 !important;\n    }\n  "])), token.colorBorderSecondary)
+    picker: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    em-emoji-picker {\n      --rgb-accent: ", ";\n      --shadow: none;\n      --rgb-background: ", ";\n      --border-radius: 0;\n    }\n  "])), chroma(token.colorPrimary).rgb().join(','), chroma(token.colorBgElevated).rgb().join(',')),
+    popover: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    .", "-popover-container {\n      overflow: hidden;\n      padding: 0;\n    }\n  "])), prefixCls),
+    root: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: relative;\n    transition: background 150ms ", ";\n\n    &:hover {\n      background: ", ";\n    }\n  "])), token.motionEaseOut, token.colorFillSecondary),
+    tabs: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    border-block-end: 1px solid ", ";\n\n    .ant-tabs-tab {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      width: 32px;\n      height: 32px;\n      padding: 0 !important;\n    }\n  "])), token.colorBorderSecondary)
   };
 });

package/es/Form/components/FormSubmitFooter.js

@@ -17,8 +17,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Form } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { motion } from 'framer-motion';
 import { InfoIcon } from 'lucide-react';
+import { motion } from 'motion/react';
 import { memo, useEffect, useMemo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import Button from "../../Button";

package/es/FormModal/FormModal.js

@@ -2,7 +2,7 @@
 
 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 = ["classNames", "className", "style", "closable", "styles", "allowFullscreen", "title", "afterOpenChange", "width", "onCancel", "centered", "open", "afterClose", "destroyOnHidden", "closeIcon", "paddings", "height", "enableResponsive", "zIndex", "mask", "getContainer", "keyboard", "focusTriggerAfterClose", "forceRender", "loading", "footer", "submitButtonProps", "submitLoading", "onFinish", "submitText", "variant", "gap", "onSubmit", "children", "ref"],
-  _excluded2 = ["form", "footer"],
+  _excluded2 = ["form"],
   _excluded3 = ["form"];
 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; }
@@ -65,10 +65,12 @@ var FormModal = /*#__PURE__*/memo(function (_ref) {
     cx = _useStyles.cx,
     s = _useStyles.styles;
   var formClassName = classNames.form,
-    footerClassName = classNames.footer,
     modalClassNames = _objectWithoutProperties(classNames, _excluded2);
-  var formStyle = styles.form,
-    modalStyles = _objectWithoutProperties(styles, _excluded3);
+  var _ref2 = typeof styles === 'function' ? {
+      form: undefined
+    } : styles,
+    formStyle = _ref2.form,
+    modalStyles = _objectWithoutProperties(_ref2, _excluded3);
   return /*#__PURE__*/_jsx(Modal, {
     afterClose: afterClose,
     afterOpenChange: afterOpenChange,
@@ -93,7 +95,7 @@ var FormModal = /*#__PURE__*/memo(function (_ref) {
     open: open,
     paddings: paddings,
     style: style,
-    styles: _objectSpread(_objectSpread({}, modalStyles), {}, {
+    styles: typeof styles === 'function' ? styles : _objectSpread(_objectSpread({}, modalStyles), {}, {
       body: _objectSpread({
         paddingTop: mobile ? 0 : undefined
       }, modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.body)
@@ -106,7 +108,7 @@ var FormModal = /*#__PURE__*/memo(function (_ref) {
       clearOnDestroy: destroyOnHidden,
       footer: /*#__PURE__*/_jsx(Flexbox, {
         align: 'center',
-        className: cx(s.footer, footerClassName),
+        className: cx(s.footer),
         gap: 8,
         horizontal: true,
         children: footer || /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({

package/es/FormModal/type.d.ts

@@ -3,16 +3,16 @@ import type { ButtonProps } from "../Button";
 import type { FormInstance, FormProps } from "../Form";
 import type { ModalProps } from "../Modal";
 type PickModalProps = Pick<ModalProps, 'style' | 'className' | 'allowFullscreen' | 'title' | 'width' | 'onCancel' | 'open' | 'centered' | 'destroyOnHidden' | 'paddings' | 'height' | 'enableResponsive' | 'afterClose' | 'afterOpenChange' | 'zIndex' | 'mask' | 'getContainer' | 'keyboard' | 'forceRender' | 'focusTriggerAfterClose' | 'closable' | 'loading' | 'closeIcon'>;
-type PickFormProps = Omit<FormProps, 'className' | 'style' | 'title'>;
+type PickFormProps = Omit<FormProps, 'className' | 'style' | 'title' | 'styles' | 'classNames'>;
 export interface FormModalProps extends PickModalProps, PickFormProps {
-    classNames?: {
+    classNames?: ModalProps['classNames'] & {
         form?: FormProps['className'];
-    } & ModalProps['classNames'];
+    };
     onSubmit?: ModalProps['onOk'];
     ref?: Ref<FormInstance>;
-    styles?: {
+    styles?: ModalProps['styles'] & {
         form?: FormProps['style'];
-    } & ModalProps['styles'];
+    };
     submitButtonProps?: ButtonProps;
     submitLoading?: ModalProps['confirmLoading'];
     submitText?: ModalProps['okText'];

package/es/Highlighter/LangSelect.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { type SelectProps } from 'antd';
-export declare const LangSelect: import("react").NamedExoticComponent<Omit<SelectProps<any, import("rc-select/lib/Select").DefaultOptionType>, "options">>;
+export declare const LangSelect: import("react").NamedExoticComponent<Omit<SelectProps<any, import("antd/es/select").DefaultOptionType>, "options">>;
 export default LangSelect;

package/es/Image/Image.js

@@ -90,13 +90,14 @@ var Image = /*#__PURE__*/memo(function (_ref) {
       children: actions
     }), /*#__PURE__*/_jsx(AntImage, _objectSpread({
       className: cx(styles.image, classNames === null || classNames === void 0 ? void 0 : classNames.image),
+      classNames: {
+        root: cx(styles.wrapper, classNames === null || classNames === void 0 ? void 0 : classNames.wrapper)
+      },
       fallback: theme.isDarkMode ? FALLBACK_DARK : FALLBACK_LIGHT,
       height: height,
       loading: 'lazy',
       onClick: onClick,
-      preview: preview === false ? false : _objectSpread({
-        mask: false
-      }, mergePreivew),
+      preview: preview === false ? false : mergePreivew,
       style: _objectSpread({
         maxHeight: maxHeight,
         maxWidth: maxWidth,
@@ -104,9 +105,10 @@ var Image = /*#__PURE__*/memo(function (_ref) {
         minWidth: minWidth,
         objectFit: objectFit || 'cover'
       }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.image),
-      width: width,
-      wrapperClassName: cx(styles.wrapper, classNames === null || classNames === void 0 ? void 0 : classNames.wrapper),
-      wrapperStyle: _objectSpread({}, customStyles === null || customStyles === void 0 ? void 0 : customStyles.wrapper)
+      styles: {
+        root: customStyles === null || customStyles === void 0 ? void 0 : customStyles.wrapper
+      },
+      width: width
     }, rest))]
   });
 });

package/es/Image/components/usePreviewGroup.d.ts

@@ -1,4 +1,4 @@
-import type { GroupConsumerProps as AntdPreviewGroupProps } from 'rc-image/lib/PreviewGroup';
+import type { GroupPreviewConfig } from 'antd/es/image/PreviewGroup';
 import type { PreviewGroupPreviewOptions } from '../type';
-export declare const usePreview: (props: PreviewGroupPreviewOptions | boolean | undefined) => AntdPreviewGroupProps['preview'];
+export declare const usePreview: (props: PreviewGroupPreviewOptions | boolean | undefined) => GroupPreviewConfig | boolean;
 export default usePreview;

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", "styles", "minScale", "maxScale", "toolbarAddon", "rootClassName", "imageRender", "toolbarRender"];
+var _excluded = ["onVisibleChange", "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; }
@@ -27,13 +27,11 @@ export var usePreview = function usePreview(props) {
     setVisible = _useState2[1];
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
-    styles = _useStyles.styles;
+    componentStyles = _useStyles.styles;
   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,
       _ref$minScale = _ref.minScale,
       minScale = _ref$minScale === void 0 ? 0.32 : _ref$minScale,
       _ref$maxScale = _ref.maxScale,
@@ -41,9 +39,19 @@ export var usePreview = function usePreview(props) {
       toolbarAddon = _ref.toolbarAddon,
       rootClassName = _ref.rootClassName,
       _imageRender = _ref.imageRender,
-      _toolbarRender = _ref.toolbarRender,
+      toolbarRender = _ref.toolbarRender,
       rest = _objectWithoutProperties(_ref, _excluded);
     return _objectSpread({
+      actionsRender: function actionsRender(_, info) {
+        var originalNode = /*#__PURE__*/_jsx(Toolbar, {
+          info: info,
+          maxScale: maxScale,
+          minScale: minScale,
+          children: toolbarAddon
+        });
+        if (toolbarRender) return toolbarRender(originalNode, info);
+        return originalNode;
+      },
       closeIcon: /*#__PURE__*/_jsx(Icon, {
         color: '#fff',
         icon: X
@@ -62,23 +70,8 @@ export var usePreview = function usePreview(props) {
         setVisible(visible);
         _onVisibleChange === null || _onVisibleChange === void 0 || _onVisibleChange(visible, prevVisible, current);
       },
-      rootClassName: cx(styles.preview, rootClassName),
-      styles: _objectSpread({
-        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;
-      }
+      rootClassName: cx(componentStyles.preview, rootClassName)
     }, rest);
-  }, [props, visible, styles]);
+  }, [props, visible, componentStyles]);
 };
 export default usePreview;

package/es/Image/type.d.ts

@@ -1,14 +1,15 @@
 import type { ImageProps as AntdImageProps } from 'antd';
+import type { GroupPreviewConfig } from 'antd/es/image/PreviewGroup';
 import type { ImagePreviewType } from 'rc-image';
-import type { GroupConsumerProps as AntdPreviewGroupProps, PreviewGroupPreview } from 'rc-image/lib/PreviewGroup';
 import type { CSSProperties, ReactNode, Ref } from 'react';
-export interface PreviewGroupPreviewOptions extends PreviewGroupPreview {
+export interface PreviewGroupPreviewOptions extends GroupPreviewConfig {
     toolbarAddon?: ReactNode;
 }
-export interface PreviewGroupProps extends AntdPreviewGroupProps {
+export interface PreviewGroupProps {
+    children?: ReactNode;
     enable?: boolean;
     items?: string[];
-    preview?: PreviewGroupPreviewOptions;
+    preview?: boolean | PreviewGroupPreviewOptions;
 }
 export interface ImagePreviewOptions extends ImagePreviewType {
     toolbarAddon?: ReactNode;

package/es/Modal/Modal.js

@@ -1,8 +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 = ["panelRef", "allowFullscreen", "children", "title", "className", "classNames", "width", "onCancel", "open", "destroyOnHidden", "paddings", "height", "enableResponsive", "footer", "styles", "okText", "onOk", "cancelText", "okButtonProps", "cancelButtonProps", "confirmLoading"],
-  _excluded2 = ["body"];
+var _excluded = ["panelRef", "allowFullscreen", "children", "title", "className", "classNames", "width", "onCancel", "open", "destroyOnHidden", "paddings", "height", "enableResponsive", "footer", "styles", "okText", "onOk", "cancelText", "okButtonProps", "cancelButtonProps", "confirmLoading"];
 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; }
@@ -64,9 +63,6 @@ var Modal = /*#__PURE__*/memo(function (_ref) {
     styles = _useStyles.styles,
     cx = _useStyles.cx,
     theme = _useStyles.theme;
-  var _ref2 = customStyles || {},
-    body = _ref2.body,
-    restStyles = _objectWithoutProperties(_ref2, _excluded2);
   var hideFooter = footer === false || footer === null;
   if (enableResponsive && mobile) return /*#__PURE__*/_jsx(ConfigProvider, {
     theme: {
@@ -76,7 +72,7 @@ var Modal = /*#__PURE__*/memo(function (_ref) {
     },
     children: /*#__PURE__*/_jsx(Drawer, _objectSpread(_objectSpread({
       className: cx(styles.drawerContent, className),
-      classNames: _objectSpread(_objectSpread({}, classNames), {}, {
+      classNames: typeof classNames === 'function' ? classNames : _objectSpread(_objectSpread({}, classNames), {}, {
         wrapper: cx(styles.wrap, classNames === null || classNames === void 0 ? void 0 : classNames.wrapper)
       }),
       closeIcon: /*#__PURE__*/_jsx(ActionIcon, {
@@ -112,12 +108,12 @@ var Modal = /*#__PURE__*/memo(function (_ref) {
       open: open,
       panelRef: panelRef,
       placement: 'bottom',
-      styles: _objectSpread({
+      styles: typeof customStyles === 'function' ? customStyles : _objectSpread(_objectSpread({}, customStyles), {}, {
         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),
+        }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.body)
+      }),
       title: title
     }, rest), {}, {
       children: children
@@ -136,7 +132,7 @@ var Modal = /*#__PURE__*/memo(function (_ref) {
       }, cancelButtonProps),
       cancelText: cancelText,
       className: cx(styles.content, className),
-      classNames: _objectSpread(_objectSpread({}, classNames), {}, {
+      classNames: typeof classNames === 'function' ? classNames : _objectSpread(_objectSpread({}, classNames), {}, {
         wrapper: cx(styles.wrap, classNames === null || classNames === void 0 ? void 0 : classNames.wrapper)
       }),
       closable: true,
@@ -154,14 +150,14 @@ var Modal = /*#__PURE__*/memo(function (_ref) {
       onOk: onOk,
       open: open,
       panelRef: panelRef,
-      styles: _objectSpread({
+      styles: typeof customStyles === 'function' ? customStyles : _objectSpread(_objectSpread({}, customStyles), {}, {
         body: _objectSpread({
           maxHeight: height,
           overflow: 'hidden auto',
           paddingBlock: "0 ".concat(footer === null ? '16px' : 0),
           paddingInline: (_paddings$desktop2 = paddings === null || paddings === void 0 ? void 0 : paddings.desktop) !== null && _paddings$desktop2 !== void 0 ? _paddings$desktop2 : 16
-        }, body)
-      }, restStyles),
+        }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.body)
+      }),
       title: title,
       width: width
     }, rest), {}, {

package/es/Modal/style.js

@@ -8,8 +8,8 @@ export var useStyles = createStyles(function (_ref) {
     token = _ref.token,
     prefixCls = _ref.prefixCls;
   return {
-    content: css(_templateObject || (_templateObject = _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(_templateObject2 || (_templateObject2 = _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),
+    content: css(_templateObject || (_templateObject = _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-container {\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(_templateObject2 || (_templateObject2 = _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        border: none;\n      }\n    "])), prefixCls, prefixCls, HEADER_HEIGHT, prefixCls),
     wrap: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      overflow: hidden auto;\n    "])))
   };
 });

package/es/Tag/Tag.js

@@ -83,7 +83,6 @@ var Tag = /*#__PURE__*/memo(function (_ref) {
     };
   }, [color, theme, variant]);
   return /*#__PURE__*/_jsx(AntTag, _objectSpread(_objectSpread({
-    bordered: false,
     className: cx(variants({
       size: size,
       variant: variant
@@ -96,7 +95,8 @@ var Tag = /*#__PURE__*/memo(function (_ref) {
       borderColor: colors === null || colors === void 0 ? void 0 : colors.borderColor,
       color: colors === null || colors === void 0 ? void 0 : colors.textColor,
       cursor: onClick ? 'pointer' : undefined
-    }, style)
+    }, style),
+    variant: variant === 'borderless' ? 'outlined' : variant
   }, rest), {}, {
     children: children
   }));

package/es/Tag/type.d.ts

@@ -1,6 +1,6 @@
 import type { TagProps as AntTagProps } from 'antd';
 import type { Ref } from 'react';
-export interface TagProps extends Omit<AntTagProps, 'color'> {
+export interface TagProps extends Omit<AntTagProps, 'color' | 'variant'> {
     color?: AntTagProps['color'] | 'info';
     ref?: Ref<HTMLDivElement>;
     size?: 'small' | 'middle' | 'large';

package/es/Toc/TocMobile.js

@@ -51,7 +51,6 @@ var TocMobile = /*#__PURE__*/memo(function (_ref) {
     children: /*#__PURE__*/_jsx("section", {
       className: styles.mobileCtn,
       children: /*#__PURE__*/_jsx(Collapse, {
-        bordered: false,
         className: styles.expand,
         expandIcon: function expandIcon(_ref2) {
           var isActive = _ref2.isActive;

package/es/awesome/TypewriterEffect/TypewriterEffect.js

@@ -15,7 +15,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import { createElement, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";

package/es/chat/EditableMessageList/EditableMessageList.js

@@ -40,9 +40,6 @@ var EditableMessageList = /*#__PURE__*/memo(function (_ref) {
         width: '100%',
         children: [/*#__PURE__*/_jsx(Select, {
           disabled: disabled,
-          dropdownStyle: {
-            zIndex: 100
-          },
           onChange: function onChange(value) {
             dispatch({
               index: index,
@@ -63,6 +60,13 @@ var EditableMessageList = /*#__PURE__*/memo(function (_ref) {
           style: {
             width: 120
           },
+          styles: {
+            popup: {
+              root: {
+                zIndex: 100
+              }
+            }
+          },
           value: item.role
         }), /*#__PURE__*/_jsx(ControlInput, {
           disabled: disabled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "2.24.3",
+  "version": "2.25.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -45,7 +45,7 @@
     "icons.js"
   ],
   "dependencies": {
-    "@ant-design/cssinjs": "^1.24.0",
+    "@ant-design/cssinjs": "^2.0.1",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
@@ -55,28 +55,28 @@
     "@floating-ui/react": "^0.27.16",
     "@giscus/react": "^3.1.0",
     "@lobehub/fluent-emoji": "^2.0.0",
-    "@lobehub/icons": "^2.43.1",
+    "@lobehub/icons": "^2.48.0",
     "@mdx-js/mdx": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
     "@radix-ui/react-slot": "^1.2.4",
-    "@shikijs/core": "^3.15.0",
-    "@shikijs/transformers": "^3.15.0",
+    "@shikijs/core": "^3.20.0",
+    "@shikijs/transformers": "^3.20.0",
     "@splinetool/runtime": "0.9.526",
     "ahooks": "^3.9.6",
     "antd-style": "^3.7.1",
-    "chroma-js": "^3.1.2",
+    "chroma-js": "^3.2.0",
     "class-variance-authority": "^0.7.1",
     "dayjs": "^1.11.19",
     "emoji-mart": "^5.6.0",
     "fast-deep-equal": "^3.1.3",
-    "framer-motion": "^12.23.24",
-    "immer": "^10.2.0",
-    "katex": "^0.16.25",
+    "immer": "^11.0.1",
+    "katex": "^0.16.27",
     "leva": "^0.10.1",
-    "lodash-es": "^4.17.21",
-    "lucide-react": "^0.553.0",
-    "marked": "^17.0.0",
-    "mermaid": "^11.12.1",
+    "lodash-es": "^4.17.22",
+    "lucide-react": "^0.562.0",
+    "marked": "^17.0.1",
+    "mermaid": "^11.12.2",
+    "motion": "^12.23.26",
     "numeral": "^2.0.6",
     "polished": "^4.3.1",
     "query-string": "^9.3.1",
@@ -86,15 +86,15 @@
     "rc-input-number": "^9.5.0",
     "rc-menu": "^9.16.1",
     "re-resizable": "^6.11.2",
-    "react-avatar-editor": "^13.0.2",
+    "react-avatar-editor": "^14.0.0",
     "react-error-boundary": "^6.0.0",
     "react-hotkeys-hook": "^5.2.1",
-    "react-layout-kit": "^2.0.0",
+    "react-layout-kit": "^2.0.1",
     "react-markdown": "^10.1.0",
     "react-merge-refs": "^3.0.2",
     "react-rnd": "^10.5.2",
     "react-zoom-pan-pinch": "^3.7.0",
-    "rehype-github-alerts": "^4.1.1",
+    "rehype-github-alerts": "^4.2.0",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",
     "remark-breaks": "^4.0.0",
@@ -102,9 +102,9 @@
     "remark-gfm": "^4.0.1",
     "remark-github": "^12.0.0",
     "remark-math": "^6.0.0",
-    "shiki": "^3.15.0",
+    "shiki": "^3.20.0",
     "shiki-stream": "^0.1.3",
-    "swr": "^2.3.6",
+    "swr": "^2.3.8",
     "ts-md5": "^2.0.1",
     "unified": "^11.0.5",
     "url-join": "^5.0.0",
@@ -112,8 +112,8 @@
     "uuid": "^13.0.0"
   },
   "peerDependencies": {
-    "antd": "^5.25.0",
-    "framer-motion": "^12.0.0",
+    "antd": "^6.1.1",
+    "motion": "^12.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   }