@lobehub/ui 2.8.0 → 2.8.2

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", "smoothCornerType"];
+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; }
@@ -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,31 +23,51 @@ 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$smoothCornerType = _ref.smoothCornerType,
-    smoothCornerType = _ref$smoothCornerType === void 0 ? 'squircle' : _ref$smoothCornerType,
+    _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(smoothCornerType);
-  }, [smoothCornerType]);
   var calcSize = useMemo(function () {
-    var avatarSize = Math.floor(size / 2 * 0.75);
-    var gapSize = Math.floor((size - avatarSize * 2) / 4);
+    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]);
+  }, [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, {
@@ -59,10 +79,12 @@ var GroupAvatar = /*#__PURE__*/memo(function (_ref) {
         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);
       })

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/es/GroupAvatar/type.d.ts

@@ -4,9 +4,10 @@ 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;
-    smoothCornerType?: keyof typeof SMOOTH_CORNER_MASKS;
 }
 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/utils/smoothCorners.d.ts

@@ -7,13 +7,30 @@ 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;
 };
 /**

package/es/utils/smoothCorners.js

@@ -42,25 +42,55 @@ export var createSmoothCornersMask = function createSmoothCornersMask() {
   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 = {
-  // n=4, classic squircle
+  // Basic shapes
+  circle: createCircleMask(),
+  // Superellipse shapes
   ios: createSmoothCornersMask({
     cornerValue: 5
   }),
-  // n=3, more rounded
   sharp: createSmoothCornersMask({
     cornerValue: 6
   }),
-  // n=5, iOS style
   smooth: createSmoothCornersMask({
     cornerValue: 3
   }),
+  square: createRoundedRectMask({
+    borderRadius: 15
+  }),
   squircle: createSmoothCornersMask({
     cornerValue: 4
-  }) // n=6, less rounded
+  })
 };
 
 /**

package/package.json

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