@lobehub/ui 2.8.1 → 2.8.2

package/es/GroupAvatar/GroupAvatar.js

@@ -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) {
@@ -31,9 +31,6 @@ 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 isCircle = cornerShape === 'circle';
     var avatarSize = Math.floor(size / 2 * (isCircle ? 0.65 : 0.75));
@@ -45,12 +42,32 @@ var GroupAvatar = /*#__PURE__*/memo(function (_ref) {
       maxItemWidth: avatarSize - 1
     };
   }, [size, cornerShape]);
+  var variants = useMemo(function () {
+    return cva(styles.root, {
+      defaultVariants: {
+        cornerShape: 'squircle'
+      },
+      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, {

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    /* WebKit prefix for better browser support */\n    mask-image: url('", "');\n\n    mask-image: url('", "');\n    mask-position: center;\n    mask-position: center;\n    mask-repeat: no-repeat;\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n    mask-size: 100% 100%;\n  "])), SMOOTH_CORNER_MASKS[cornerType], 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/package.json

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