@lobehub/ui 1.123.0 → 1.124.0

package/es/Avatar/index.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
 import { type AvatarProps as AntAvatarProps } from 'antd';
+import { type ReactNode } from 'react';
 export interface AvatarProps extends AntAvatarProps {
     animation?: boolean;
     /**
      * @description The URL or base64 data of the avatar image
      */
-    avatar?: string;
+    avatar?: string | ReactNode;
     /**
      * @description The background color of the avatar
      */

package/es/Avatar/index.js

@@ -4,7 +4,7 @@ var _excluded = ["className", "avatar", "title", "animation", "size", "shape", "
 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; }
 import { Avatar as AntAvatar } from 'antd';
-import { memo, useMemo } from 'react';
+import { isValidElement, memo, useMemo } from 'react';
 import FluentEmoji from "../FluentEmoji";
 import { getEmoji } from "../utils/getEmojiByCharacter";
 import { useStyles } from "./style";
@@ -22,11 +22,12 @@ var Avatar = /*#__PURE__*/memo(function (_ref) {
     background = _ref$background === void 0 ? 'rgba(0,0,0,0)' : _ref$background,
     style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var isImage = Boolean(avatar && ['/', 'http', 'data:'].some(function (index) {
-    return avatar.startsWith(index);
-  }));
+  var isStringAvatar = typeof avatar === 'string';
+  var isDefaultAntAvatar = Boolean(avatar && (['/', 'http', 'data:'].some(function (index) {
+    return isStringAvatar && avatar.startsWith(index);
+  }) || /*#__PURE__*/isValidElement(avatar)));
   var emoji = useMemo(function () {
-    return avatar && !isImage && getEmoji(avatar);
+    return avatar && !isDefaultAntAvatar && isStringAvatar && getEmoji(avatar);
   }, [avatar]);
   var _useStyles = useStyles({
       background: background,
@@ -35,7 +36,7 @@ var Avatar = /*#__PURE__*/memo(function (_ref) {
     }),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  var text = String(isImage ? title : avatar);
+  var text = String(isDefaultAntAvatar ? title : avatar);
   var avatarProps = _objectSpread({
     className: cx(styles.avatar, className),
     shape: shape,
@@ -44,7 +45,7 @@ var Avatar = /*#__PURE__*/memo(function (_ref) {
       cursor: 'default'
     }, style)
   }, rest);
-  return isImage ? /*#__PURE__*/_jsx(AntAvatar, _objectSpread({
+  return isDefaultAntAvatar ? /*#__PURE__*/_jsx(AntAvatar, _objectSpread({
     src: avatar
   }, avatarProps)) : /*#__PURE__*/_jsx(AntAvatar, _objectSpread(_objectSpread({}, avatarProps), {}, {
     children: emoji ? /*#__PURE__*/_jsx(FluentEmoji, {

package/es/Form/style.js

@@ -7,6 +7,6 @@ export var useStyles = createStyles(function (_ref) {
     prefixCls = _ref.prefixCls,
     responsive = _ref.responsive;
   return {
-    form: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    width: 100%;\n\n    ", " {\n      gap: 0;\n    }\n\n    .", "-form-item {\n      margin: 0 !important;\n    }\n\n    .", "-form-item .", "-form-item-label > label {\n      height: unset;\n    }\n\n    .", "-row {\n      position: relative;\n      flex-wrap: nowrap;\n    }\n\n    .", "-form-item-label {\n      position: relative;\n      flex: 1;\n      max-width: 100%;\n    }\n\n    .", "-form-item-row {\n      align-items: center;\n    }\n\n    .", "-form-item-control {\n      position: relative;\n\n      display: flex;\n      flex: 0;\n      align-items: center;\n\n      min-width: unset !important;\n    }\n\n    .", "-collapse-item {\n      overflow: hidden !important;\n      border-radius: ", "px !important;\n    }\n  "])), responsive.mobile, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, token.borderRadius)
+    form: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    width: 100%;\n\n    ", " {\n      gap: 0;\n    }\n\n    .", "-form-item {\n      margin: 0 !important;\n    }\n\n    .", "-form-item .", "-form-item-label > label {\n      height: unset;\n    }\n\n    .", "-row {\n      position: relative;\n      flex-wrap: nowrap;\n    }\n\n    .", "-form-item-label {\n      position: relative;\n      flex: 1;\n      max-width: 100%;\n    }\n\n    .", "-form-item-row {\n      align-items: center;\n      ", " {\n        align-items: stretch;\n      }\n    }\n\n    .", "-form-item-control {\n      position: relative;\n      flex: 0;\n      min-width: unset !important;\n    }\n\n    .", "-collapse-item {\n      overflow: hidden !important;\n      border-radius: ", "px !important;\n    }\n  "])), responsive.mobile, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, responsive.mobile, prefixCls, prefixCls, token.borderRadius)
   };
 });

package/es/Image/usePreview.js

@@ -46,9 +46,9 @@ export var usePreview = function usePreview() {
     },
     maxScale: maxScale,
     minScale: minScale,
-    onVisibleChange: function onVisibleChange(e) {
-      setVisible(e);
-      _onVisibleChange === null || _onVisibleChange === void 0 || _onVisibleChange(e);
+    onVisibleChange: function onVisibleChange(visible, prevVisible, current) {
+      setVisible(visible);
+      _onVisibleChange === null || _onVisibleChange === void 0 || _onVisibleChange(visible, prevVisible, current);
     },
     styles: _objectSpread({
       mask: {

package/es/SliderWithInput/index.js

@@ -18,7 +18,8 @@ var SliderWithInput = /*#__PURE__*/memo(function (_ref) {
     defaultValue = _ref.defaultValue,
     size = _ref.size,
     controls = _ref.controls,
-    gap = _ref.gap,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 16 : _ref$gap,
     style = _ref.style,
     className = _ref.className,
     disabled = _ref.disabled,
@@ -31,7 +32,7 @@ var SliderWithInput = /*#__PURE__*/memo(function (_ref) {
     align: 'center',
     className: className,
     direction: 'horizontal',
-    gap: gap !== null && gap !== void 0 ? gap : 8,
+    gap: gap,
     style: style,
     children: [/*#__PURE__*/_jsx(Slider, _objectSpread({
       defaultValue: defaultValue,

package/es/types/meta.d.ts

@@ -1,9 +1,10 @@
+import { type ReactNode } from 'react';
 export interface MetaData {
     /**
      * 角色头像
      * @description 可选参数，如果不传则使用默认头像
      */
-    avatar?: string;
+    avatar?: string | ReactNode;
     /**
      *  背景色
      * @description 可选参数，如果不传则使用默认背景色

package/package.json

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