@lobehub/ui 2.8.1 → 2.8.3

package/es/GroupAvatar/GroupAvatar.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 = ["className", "style", "avatars", "size", "cornerShape", "avatarShape"];
+var _excluded = ["className", "style", "avatars", "size", "grid", "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; }
@@ -9,11 +9,11 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 { cva } from 'class-variance-authority';
 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) {
@@ -23,6 +23,8 @@ var GroupAvatar = /*#__PURE__*/memo(function (_ref) {
     avatars = _ref$avatars === void 0 ? [] : _ref$avatars,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 32 : _ref$size,
+    _ref$grid = _ref.grid,
+    grid = _ref$grid === void 0 ? 2 : _ref$grid,
     _ref$cornerShape = _ref.cornerShape,
     cornerShape = _ref$cornerShape === void 0 ? 'squircle' : _ref$cornerShape,
     _ref$avatarShape = _ref.avatarShape,
@@ -31,41 +33,64 @@ var GroupAvatar = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  var smoothCornersMask = useMemo(function () {
-    return getSmoothCornersMaskStyle(cornerShape);
-  }, [cornerShape]);
   var calcSize = useMemo(function () {
+    var length = avatars.length;
+    var isAutoGrid = grid === 'auto';
+    var gridSize = isAutoGrid ? length > 4 ? 3 : 2 : grid;
     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));
+    var avatarSize = Math.floor(size / gridSize * (isCircle ? 0.65 : 0.75));
+    var gapSize = Math.floor((size - avatarSize * gridSize) / (isCircle ? 6 : 4));
     return {
       avatarSize: avatarSize,
       gapSize: gapSize,
-      gridWidth: avatarSize * 2 + gapSize,
+      gridSize: gridSize,
+      gridWidth: avatarSize * gridSize + gapSize,
       maxItemWidth: avatarSize - 1
     };
-  }, [size, cornerShape]);
+  }, [avatars, grid, size, cornerShape]);
+  var calcAvatars = useMemo(function () {
+    return avatars === null || avatars === void 0 ? void 0 : avatars.slice(0, calcSize.gridSize * calcSize.gridSize);
+  }, [avatars, calcSize.gridSize]);
+  var variants = useMemo(function () {
+    return cva(styles.root, {
+      defaultVariants: {
+        cornerShape: 'squircle'
+      },
+      /* eslint-disable sort-keys-fix/sort-keys-fix */
+      variants: {
+        cornerShape: {
+          circle: styles.circle,
+          ios: styles.ios,
+          sharp: styles.sharp,
+          smooth: styles.smooth,
+          square: styles.square,
+          squircle: styles.squircle
+        }
+      }
+      /* eslint-enable sort-keys-fix/sort-keys-fix */
+    });
+  }, [styles]);
   return /*#__PURE__*/_jsx(Block, _objectSpread(_objectSpread({
     align: 'center',
-    className: cx(styles.root, className),
+    className: cx(variants({
+      cornerShape: cornerShape
+    }), className),
     height: size,
     justify: 'center',
-    style: _objectSpread(_objectSpread({}, smoothCornersMask), style),
+    style: style,
     width: size
   }, rest), {}, {
     children: /*#__PURE__*/_jsx(Grid, {
       gap: calcSize.gapSize,
-      maxItemWidth: calcSize.maxItemWidth,
-      rows: 2,
+      maxItemWidth: 0,
+      rows: calcSize.gridSize,
       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);
-        }
+      children: calcAvatars.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

package/es/GroupAvatar/style.d.ts

@@ -1,3 +1,9 @@
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    circle: import("antd-style").SerializedStyles;
+    ios: import("antd-style").SerializedStyles;
     root: import("antd-style").SerializedStyles;
+    sharp: import("antd-style").SerializedStyles;
+    smooth: import("antd-style").SerializedStyles;
+    square: import("antd-style").SerializedStyles;
+    squircle: import("antd-style").SerializedStyles;
 }>;

package/es/GroupAvatar/style.js

@@ -1,9 +1,20 @@
-var _templateObject;
+var _templateObject, _templateObject2;
 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 { SMOOTH_CORNER_MASKS } from "../utils/smoothCorners";
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
+  var baseRoot = 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  "])));
+  var createCornerVariant = function createCornerVariant(cornerType) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    mask-image: url('", "');\n    mask-position: center;\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n  "])), SMOOTH_CORNER_MASKS[cornerType]);
+  };
   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    "])))
+    circle: createCornerVariant('circle'),
+    ios: createCornerVariant('ios'),
+    root: baseRoot,
+    sharp: createCornerVariant('sharp'),
+    smooth: createCornerVariant('smooth'),
+    square: createCornerVariant('square'),
+    squircle: createCornerVariant('squircle')
   };
 });

package/es/GroupAvatar/type.d.ts

@@ -7,6 +7,7 @@ export interface GroupAvatarProps extends Omit<BlockProps, 'width' | 'height' |
     avatarShape?: AvatarProps['shape'];
     avatars?: AvatarItem[];
     cornerShape?: keyof typeof SMOOTH_CORNER_MASKS;
+    grid?: 2 | 3 | 'auto';
     ref?: Ref<HTMLDivElement>;
     size?: number;
 }

package/package.json

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