@lobehub/ui 2.7.5 → 2.8.1

package/es/GroupAvatar/GroupAvatar.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { GroupAvatarProps } from './type';
+declare const GroupAvatar: import("react").NamedExoticComponent<GroupAvatarProps>;
+export default GroupAvatar;

package/es/GroupAvatar/GroupAvatar.js

@@ -0,0 +1,77 @@
+'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 = ["className", "style", "avatars", "size", "cornerShape", "avatarShape"];
+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; }
+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); }
+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 { memo, useMemo } from 'react';
+import Avatar from "../Avatar";
+import Block from "../Block";
+import Grid from "../Grid";
+import { getSmoothCornersMaskStyle } from "../utils/smoothCorners";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var GroupAvatar = /*#__PURE__*/memo(function (_ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    _ref$avatars = _ref.avatars,
+    avatars = _ref$avatars === void 0 ? [] : _ref$avatars,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 32 : _ref$size,
+    _ref$cornerShape = _ref.cornerShape,
+    cornerShape = _ref$cornerShape === void 0 ? 'squircle' : _ref$cornerShape,
+    _ref$avatarShape = _ref.avatarShape,
+    avatarShape = _ref$avatarShape === void 0 ? 'circle' : _ref$avatarShape,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  var smoothCornersMask = useMemo(function () {
+    return getSmoothCornersMaskStyle(cornerShape);
+  }, [cornerShape]);
+  var calcSize = useMemo(function () {
+    var isCircle = cornerShape === 'circle';
+    var avatarSize = Math.floor(size / 2 * (isCircle ? 0.65 : 0.75));
+    var gapSize = Math.floor((size - avatarSize * 2) / (isCircle ? 6 : 4));
+    return {
+      avatarSize: avatarSize,
+      gapSize: gapSize,
+      gridWidth: avatarSize * 2 + gapSize,
+      maxItemWidth: avatarSize - 1
+    };
+  }, [size, cornerShape]);
+  return /*#__PURE__*/_jsx(Block, _objectSpread(_objectSpread({
+    align: 'center',
+    className: cx(styles.root, className),
+    height: size,
+    justify: 'center',
+    style: _objectSpread(_objectSpread({}, smoothCornersMask), style),
+    width: size
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsx(Grid, {
+      gap: calcSize.gapSize,
+      maxItemWidth: calcSize.maxItemWidth,
+      rows: 2,
+      width: calcSize.gridWidth,
+      children: avatars === null || avatars === void 0 ? void 0 : avatars.slice(0, 4).map(function (item, index) {
+        if (typeof item === 'string') {
+          return /*#__PURE__*/_jsx(Avatar, {
+            avatar: item,
+            shape: avatarShape,
+            size: calcSize.avatarSize
+          }, index);
+        }
+        return /*#__PURE__*/_jsx(Avatar, _objectSpread(_objectSpread({}, item), {}, {
+          shape: avatarShape,
+          size: calcSize.avatarSize
+        }), index);
+      })
+    })
+  }));
+});
+export default GroupAvatar;

package/es/GroupAvatar/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './GroupAvatar';
+export type * from './type';

package/es/GroupAvatar/index.js

@@ -0,0 +1 @@
+export { default } from "./GroupAvatar";

package/es/GroupAvatar/style.d.ts

@@ -0,0 +1,3 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    root: import("antd-style").SerializedStyles;
+}>;

package/es/GroupAvatar/style.js

@@ -0,0 +1,9 @@
+var _templateObject;
+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';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    root: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      overflow: hidden;\n      flex: none;\n\n      /* Fallback for browsers without mask support */\n      border-radius: 15%;\n\n      /* Apply smooth corners mask with fallback */\n      @supports (mask-image: url('data:image/svg+xml;base64,')) {\n        border-radius: 0;\n\n        /* The mask will be applied via inline style */\n      }\n    "])))
+  };
+});

package/es/GroupAvatar/type.d.ts

@@ -0,0 +1,13 @@
+import type { Ref } from 'react';
+import type { AvatarProps } from "../Avatar/type";
+import type { BlockProps } from "../Block/type";
+import type { SMOOTH_CORNER_MASKS } from "../utils/smoothCorners";
+type AvatarItem = string | Omit<AvatarProps, 'size'>;
+export interface GroupAvatarProps extends Omit<BlockProps, 'width' | 'height' | 'variant'> {
+    avatarShape?: AvatarProps['shape'];
+    avatars?: AvatarItem[];
+    cornerShape?: keyof typeof SMOOTH_CORNER_MASKS;
+    ref?: Ref<HTMLDivElement>;
+    size?: number;
+}
+export {};

package/es/GroupAvatar/type.js

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

package/es/Text/Text.js

@@ -1,6 +1,6 @@
 'use client';
 
-var _excluded = ["as", "className", "children", "style", "type", "disabled", "strong", "italic", "underline", "delete", "fontSize", "mark", "code", "color", "weight", "ellipsis"];
+var _excluded = ["as", "align", "className", "children", "style", "type", "disabled", "strong", "italic", "underline", "delete", "fontSize", "mark", "code", "color", "weight", "ellipsis"];
 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); }
 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; }
@@ -17,6 +17,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 var Text = /*#__PURE__*/memo(function (_ref) {
   var _ref$as = _ref.as,
     Container = _ref$as === void 0 ? 'div' : _ref$as,
+    align = _ref.align,
     className = _ref.className,
     children = _ref.children,
     style = _ref.style,
@@ -83,7 +84,7 @@ var Text = /*#__PURE__*/memo(function (_ref) {
       }
     });
   }, [styles]);
-  var textStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, color && {
+  var textStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, color && {
     color: color
   }), weight && {
     fontWeight: weight
@@ -91,6 +92,8 @@ var Text = /*#__PURE__*/memo(function (_ref) {
     WebkitLineClamp: ellipsis.rows
   }), fontSize && {
     fontSize: fontSize
+  }), align && {
+    textAlign: align
   }), style);
   var content = /*#__PURE__*/_jsx(Container, _objectSpread(_objectSpread({
     className: cx(variants({

package/es/Text/type.d.ts

@@ -2,6 +2,7 @@ import type { ElementType, Ref } from 'react';
 import type { TooltipProps } from "../Tooltip";
 import { DivProps } from "../types";
 export interface TextProps extends DivProps {
+    align?: 'left' | 'center' | 'right';
     as?: ElementType;
     code?: boolean;
     color?: string;

package/es/index.d.ts

@@ -25,6 +25,7 @@ export { default as Footer, type FooterProps } from './Footer';
 export { default as Form, FormGroup, type FormGroupItemType, type FormGroupProps, type FormInstance, FormItem, type FormItemProps, type FormProps, FormSubmitFooter, type FormSubmitFooterProps, FormTitle, type FormTitleProps, } from './Form';
 export { default as FormModal, type FormModalProps } from './FormModal';
 export { default as Grid, type GridProps } from './Grid';
+export { default as GroupAvatar, type GroupAvatarProps } from './GroupAvatar';
 export { default as GuideCard, type GuideCardProps } from './GuideCard';
 export { default as Header, type HeaderProps } from './Header';
 export { default as Highlighter, type HighlighterProps, highlighterThemes, SyntaxHighlighter, type SyntaxHighlighterProps, } from './Highlighter';

package/es/index.js

@@ -25,6 +25,7 @@ export { default as Footer } from "./Footer";
 export { default as Form, FormGroup, FormItem, FormSubmitFooter, FormTitle } from "./Form";
 export { default as FormModal } from "./FormModal";
 export { default as Grid } from "./Grid";
+export { default as GroupAvatar } from "./GroupAvatar";
 export { default as GuideCard } from "./GuideCard";
 export { default as Header } from "./Header";
 export { default as Highlighter, highlighterThemes, SyntaxHighlighter } from "./Highlighter";

package/es/utils/smoothCorners.d.ts

@@ -0,0 +1,39 @@
+import type { CSSProperties } from 'react';
+/**
+ * Create a Base64 encoded SVG mask for smooth corners
+ * @param options - Configuration options
+ */
+export declare const createSmoothCornersMask: (options?: {
+    cornerValue?: number;
+    size?: number;
+}) => string;
+/**
+ * Create a Base64 encoded SVG mask for circle shape
+ * @param options - Configuration options
+ */
+export declare const createCircleMask: (options?: {
+    size?: number;
+}) => string;
+/**
+ * Create a Base64 encoded SVG mask for rounded rectangle
+ * @param options - Configuration options
+ */
+export declare const createRoundedRectMask: (options?: {
+    borderRadius?: number;
+    size?: number;
+}) => string;
+/**
+ * Predefined smooth corners masks for common corner values
+ */
+export declare const SMOOTH_CORNER_MASKS: {
+    readonly circle: string;
+    readonly ios: string;
+    readonly sharp: string;
+    readonly smooth: string;
+    readonly square: string;
+    readonly squircle: string;
+};
+/**
+ * CSS helper to apply smooth corners mask
+ */
+export declare const getSmoothCornersMaskStyle: (cornerType?: keyof typeof SMOOTH_CORNER_MASKS) => CSSProperties;

package/es/utils/smoothCorners.js

@@ -0,0 +1,112 @@
+/**
+ * Smooth Corners utility using Base64 SVG mask
+ * A simpler alternative to CSS Houdini Paint API
+ */
+
+/**
+ * Generate a smooth corners SVG path using superellipse formula
+ * @param size - The size of the shape
+ * @param n - The superellipse exponent (4 = squircle, 5 = iOS style)
+ */
+var generateSuperellipsePath = function generateSuperellipsePath(size) {
+  var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 4;
+  var r = size / 2;
+  var points = [];
+
+  // Generate points for the superellipse
+  for (var i = 0; i <= 360; i += 2) {
+    var angle = i * Math.PI / 180;
+    var cosAngle = Math.cos(angle);
+    var sinAngle = Math.sin(angle);
+
+    // Superellipse formula
+    var x = r * Math.sign(cosAngle) * Math.pow(Math.abs(cosAngle), 2 / n);
+    var y = r * Math.sign(sinAngle) * Math.pow(Math.abs(sinAngle), 2 / n);
+    points.push("".concat(r + x, ",").concat(r + y));
+  }
+  return "M".concat(points[0], "L").concat(points.slice(1).join('L'), "Z");
+};
+
+/**
+ * Create a Base64 encoded SVG mask for smooth corners
+ * @param options - Configuration options
+ */
+export var createSmoothCornersMask = function createSmoothCornersMask() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _options$size = options.size,
+    size = _options$size === void 0 ? 100 : _options$size,
+    _options$cornerValue = options.cornerValue,
+    cornerValue = _options$cornerValue === void 0 ? 4 : _options$cornerValue;
+  var path = generateSuperellipsePath(size, cornerValue);
+  var svg = "\n    <svg width=\"".concat(size, "\" height=\"").concat(size, "\" viewBox=\"0 0 ").concat(size, " ").concat(size, "\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"").concat(path, "\" fill=\"white\"/>\n    </svg>\n  ").trim().replaceAll(/\s+/g, ' ');
+  return "data:image/svg+xml;base64,".concat(btoa(svg));
+};
+
+/**
+ * Create a Base64 encoded SVG mask for circle shape
+ * @param options - Configuration options
+ */
+export var createCircleMask = function createCircleMask() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _options$size2 = options.size,
+    size = _options$size2 === void 0 ? 100 : _options$size2;
+  var r = size / 2;
+  var svg = "\n    <svg width=\"".concat(size, "\" height=\"").concat(size, "\" viewBox=\"0 0 ").concat(size, " ").concat(size, "\" xmlns=\"http://www.w3.org/2000/svg\">\n      <circle cx=\"").concat(r, "\" cy=\"").concat(r, "\" r=\"").concat(r, "\" fill=\"white\"/>\n    </svg>\n  ").trim().replaceAll(/\s+/g, ' ');
+  return "data:image/svg+xml;base64,".concat(btoa(svg));
+};
+
+/**
+ * Create a Base64 encoded SVG mask for rounded rectangle
+ * @param options - Configuration options
+ */
+export var createRoundedRectMask = function createRoundedRectMask() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _options$size3 = options.size,
+    size = _options$size3 === void 0 ? 100 : _options$size3,
+    _options$borderRadius = options.borderRadius,
+    borderRadius = _options$borderRadius === void 0 ? 15 : _options$borderRadius;
+  var svg = "\n    <svg width=\"".concat(size, "\" height=\"").concat(size, "\" viewBox=\"0 0 ").concat(size, " ").concat(size, "\" xmlns=\"http://www.w3.org/2000/svg\">\n      <rect x=\"0\" y=\"0\" width=\"").concat(size, "\" height=\"").concat(size, "\" rx=\"").concat(borderRadius, "\" ry=\"").concat(borderRadius, "\" fill=\"white\"/>\n    </svg>\n  ").trim().replaceAll(/\s+/g, ' ');
+  return "data:image/svg+xml;base64,".concat(btoa(svg));
+};
+
+/**
+ * Predefined smooth corners masks for common corner values
+ */
+export var SMOOTH_CORNER_MASKS = {
+  // Basic shapes
+  circle: createCircleMask(),
+  // Superellipse shapes
+  ios: createSmoothCornersMask({
+    cornerValue: 5
+  }),
+  sharp: createSmoothCornersMask({
+    cornerValue: 6
+  }),
+  smooth: createSmoothCornersMask({
+    cornerValue: 3
+  }),
+  square: createRoundedRectMask({
+    borderRadius: 15
+  }),
+  squircle: createSmoothCornersMask({
+    cornerValue: 4
+  })
+};
+
+/**
+ * CSS helper to apply smooth corners mask
+ */
+export var getSmoothCornersMaskStyle = function getSmoothCornersMaskStyle() {
+  var cornerType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'squircle';
+  return {
+    // WebKit prefix for better browser support
+    WebkitMaskImage: "url(\"".concat(SMOOTH_CORNER_MASKS[cornerType], "\")"),
+    WebkitMaskPosition: 'center',
+    WebkitMaskRepeat: 'no-repeat',
+    WebkitMaskSize: '100% 100%',
+    maskImage: "url(\"".concat(SMOOTH_CORNER_MASKS[cornerType], "\")"),
+    maskPosition: 'center',
+    maskRepeat: 'no-repeat',
+    maskSize: '100% 100%'
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "2.7.5",
+  "version": "2.8.1",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -45,42 +45,42 @@
     "icons.js"
   ],
   "dependencies": {
-    "@ant-design/cssinjs": "^1.23.0",
+    "@ant-design/cssinjs": "^1.24.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
-    "@floating-ui/react": "^0.27.5",
+    "@floating-ui/react": "^0.27.14",
     "@giscus/react": "^3.1.0",
     "@lobehub/fluent-emoji": "^2.0.0",
-    "@lobehub/icons": "^2.0.0",
+    "@lobehub/icons": "^2.19.0",
     "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@radix-ui/react-slot": "^1.1.2",
-    "@shikijs/transformers": "^3.2.1",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@shikijs/transformers": "^3.8.1",
     "@splinetool/runtime": "0.9.526",
-    "ahooks": "^3.8.4",
+    "ahooks": "^3.9.0",
     "antd-style": "^3.7.1",
     "chroma-js": "^3.1.2",
     "class-variance-authority": "^0.7.1",
     "dayjs": "^1.11.13",
     "emoji-mart": "^5.6.0",
     "fast-deep-equal": "^3.1.3",
-    "framer-motion": "^12.6.3",
+    "framer-motion": "^12.23.11",
     "immer": "^10.1.1",
-    "katex": "^0.16.9",
+    "katex": "^0.16.22",
     "leva": "^0.10.0",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.525.0",
-    "mermaid": "^11.6.0",
+    "mermaid": "^11.9.0",
     "numeral": "^2.0.6",
     "polished": "^4.3.1",
-    "query-string": "^9.1.1",
+    "query-string": "^9.2.2",
     "rc-collapse": "^4.0.0",
     "rc-footer": "^0.6.8",
-    "rc-image": "^7.11.1",
+    "rc-image": "^7.12.0",
     "rc-menu": "^9.16.1",
     "re-resizable": "^6.11.2",
     "react-avatar-editor": "^13.0.2",
@@ -98,8 +98,8 @@
     "remark-gfm": "^4.0.1",
     "remark-github": "^12.0.0",
     "remark-math": "^6.0.0",
-    "shiki": "^3.2.1",
-    "swr": "^2.3.3",
+    "shiki": "^3.8.1",
+    "swr": "^2.3.4",
     "ts-md5": "^1.3.1",
     "unified": "^11.0.5",
     "url-join": "^5.0.0",