@lobehub/ui 2.8.0 → 2.8.1

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; }
@@ -23,25 +23,28 @@ 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]);
+    return getSmoothCornersMaskStyle(cornerShape);
+  }, [cornerShape]);
   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]);
   return /*#__PURE__*/_jsx(Block, _objectSpread(_objectSpread({
     align: 'center',
     className: cx(styles.root, className),
@@ -59,10 +62,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/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.1",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",