@lobehub/ui 5.57.3 → 6.0.0-beta.1

package/es/AutoComplete/style.d.mts

@@ -0,0 +1,106 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/AutoComplete/style.d.ts
+declare const styleArrays: {
+  clear: Readonly<{
+    readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
+    readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
+    readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "currentcolor">;
+    readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
+    readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "medium">;
+    readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+    readonly transition: stylex.StyleXClassNameFor<"transition", `color 150ms ${string}`>;
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+    readonly color: stylex.StyleXClassNameFor<"color", string>;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
+    readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+    readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+  }>[];
+  empty: (Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+    readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 6>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 12>;
+    readonly transition: stylex.StyleXClassNameFor<"transition", `all 150ms ${string}`>;
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string | null>;
+    readonly color: stylex.StyleXClassNameFor<"color", string>;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "not-allowed" | null>;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly fontSize: stylex.StyleXClassNameFor<"fontSize", 14>;
+    readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", "20px">;
+    readonly opacity: stylex.StyleXClassNameFor<"opacity", 0.5 | null>;
+    readonly position: stylex.StyleXClassNameFor<"position", "relative">;
+    readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "none">;
+    readonly minHeight: stylex.StyleXClassNameFor<"minHeight", 32>;
+    readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+  }> | Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", string>;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "default" | "not-allowed">;
+    readonly fontStyle: stylex.StyleXClassNameFor<"fontStyle", "italic">;
+  }> | Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "default">;
+    readonly display: stylex.StyleXClassNameFor<"display", "none" | "flex">;
+  }>)[];
+  item: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+    readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 6>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 12>;
+    readonly transition: stylex.StyleXClassNameFor<"transition", `all 150ms ${string}`>;
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string | null>;
+    readonly color: stylex.StyleXClassNameFor<"color", string>;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "not-allowed" | null>;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly fontSize: stylex.StyleXClassNameFor<"fontSize", 14>;
+    readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", "20px">;
+    readonly opacity: stylex.StyleXClassNameFor<"opacity", 0.5 | null>;
+    readonly position: stylex.StyleXClassNameFor<"position", "relative">;
+    readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "none">;
+    readonly minHeight: stylex.StyleXClassNameFor<"minHeight", 32>;
+    readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+  }>[];
+  list: Readonly<{
+    readonly display: stylex.StyleXClassNameFor<"display", "none" | null>;
+    readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "min(320px, var(--available-height))">;
+    readonly overflowY: stylex.StyleXClassNameFor<"overflowY", "auto">;
+  }>[];
+  popup: (Readonly<{
+    readonly '--lobe-menu-popup-padding': stylex.StyleXClassNameFor<"--lobe-menu-popup-padding", "4px">;
+    readonly '--lobe-virtual-scroll-inset': stylex.StyleXClassNameFor<"--lobe-virtual-scroll-inset", "var(--lobe-menu-popup-padding)" | null>;
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "var(--lobe-menu-popup-padding)">;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", `${string}, var(--lobe-ring)`>;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex" | null>;
+    readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column" | null>;
+    readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", 0 | "var(--lobe-menu-popup-padding)">;
+    readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", 0 | "var(--lobe-menu-popup-padding)">;
+    readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "var(--available-height)">;
+    readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 220>;
+    readonly overflowX: stylex.StyleXClassNameFor<"overflowX", "hidden" | null>;
+    readonly overflowY: stylex.StyleXClassNameFor<"overflowY", "hidden" | "auto">;
+  }> | Readonly<{
+    readonly transition: stylex.StyleXClassNameFor<"transition", `opacity 140ms ${string}, transform 140ms ${string}`>;
+    readonly opacity: stylex.StyleXClassNameFor<"opacity", 0 | null>;
+    readonly transform: stylex.StyleXClassNameFor<"transform", "scaleY(0.92)" | null>;
+    readonly transformOrigin: stylex.StyleXClassNameFor<"transformOrigin", "var(--transform-origin)">;
+    readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+    readonly width: stylex.StyleXClassNameFor<"width", "var(--anchor-width)">;
+  }>)[];
+  positioner: Readonly<{
+    readonly '--lobe-dropdown-animation-duration': stylex.StyleXClassNameFor<"--lobe-dropdown-animation-duration", "140ms" | "0ms">;
+    readonly '--lobe-dropdown-animation-ease-in': stylex.StyleXClassNameFor<"--lobe-dropdown-animation-ease-in", "ease-in">;
+    readonly '--lobe-dropdown-animation-ease-out': stylex.StyleXClassNameFor<"--lobe-dropdown-animation-ease-out", string>;
+    readonly '--lobe-dropdown-animation-scale-y': stylex.StyleXClassNameFor<"--lobe-dropdown-animation-scale-y", "1" | "0.92">;
+    readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 1100 | 1199>;
+  }>[];
+};
+export declare const styles: Record<keyof typeof styleArrays, string>;
+//#endregion
+//# sourceMappingURL=style.d.mts.map

package/es/AutoComplete/style.mjs

@@ -1,56 +1,64 @@
-import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
-import { createStaticStyles } from "antd-style";
-import { cva } from "class-variance-authority";
+import { menuClassNames, menuStyles } from "../DropdownMenu/style.mjs";
+import clsx from "clsx";
+import * as stylex from "@stylexjs/stylex";
 //#region src/AutoComplete/style.ts
-const styles = createStaticStyles(({ css }) => {
-	return {
-		borderless: css`
-      &[class*='ant-select'] {
-        > [class*='ant-select-selector'] {
-          ${staticStylish.variantBorderless}
-        }
-      }
-    `,
-		filled: css`
-      &[class*='ant-select'] {
-        > [class*='ant-select-selector'] {
-          ${staticStylish.variantFilled}
-        }
-      }
-    `,
-		outlined: css`
-      &[class*='ant-select'] {
-        > [class*='ant-select-selector'] {
-          ${staticStylish.variantOutlined}
-        }
-      }
-    `,
-		root: css``,
-		shadow: css`
-      &[class*='ant-select'] {
-        > [class*='ant-select-selector'] {
-          ${staticStylish.shadow}
-        }
-      }
-    `
-	};
-});
-const variants = cva(styles.root, {
-	defaultVariants: { shadow: false },
-	variants: {
-		variant: {
-			filled: styles.filled,
-			outlined: styles.outlined,
-			borderless: styles.borderless,
-			underlined: null
-		},
-		shadow: {
-			false: null,
-			true: styles.shadow
-		}
+const ownStyles = {
+	clear: {
+		kogj98: "lb1ghz6dp",
+		kmVPX3: "lb1717udv",
+		kVAM5u: "lb181nr7w",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbfn42iu",
+		kI3sdo: "lb1a2a7pz",
+		kmkexE: "lb627avl",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lbjbqb8w",
+		kMwMTN: "lb53gy9q lb1bxu9lh",
+		kkrTdU: "lb1ypdohk",
+		k1xSpc: "lb3nfvp2",
+		kjj79g: "lbl56j7k",
+		$$css: true
+	},
+	empty: {
+		kWkggS: "lbjbqb8w",
+		kkrTdU: "lbt0e3qv",
+		k1xSpc: "lb78zum5 lbjl7jj",
+		$$css: true
+	},
+	list: {
+		k1xSpc: "lbjl7jj",
+		kskxy: "lb1h9acoj",
+		kORKVm: "lb1odjw0f",
+		$$css: true
+	},
+	popup: {
+		kmkexE: "lb2x8kw5",
+		kSiTet: "lb1i2unn7",
+		k3aq6I: "lb11d3i7i",
+		k3nNDw: "lbctpfpq",
+		k7Eaqz: "lbeuugli",
+		kzqmXN: "lb1hhjr3y",
+		$$css: true
 	}
-});
+};
+const styleArrays = {
+	clear: [ownStyles.clear],
+	empty: [
+		menuStyles.item,
+		menuStyles.empty,
+		ownStyles.empty
+	],
+	item: [menuStyles.item],
+	list: [ownStyles.list],
+	popup: [menuStyles.popup, ownStyles.popup],
+	positioner: [menuStyles.positioner]
+};
+const stableClassNames = {
+	popup: menuClassNames.popup,
+	positioner: menuClassNames.positioner
+};
+const styles = Object.fromEntries(Object.entries(styleArrays).map(([key, value]) => [key, clsx(stylex.props(value).className, stableClassNames[key])]));
 //#endregion
-export { styles, variants };
+export { styles };
 
 //# sourceMappingURL=style.mjs.map

package/es/AutoComplete/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/AutoComplete/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css }) => {\n  return {\n    borderless: css`\n      &[class*='ant-select'] {\n        > [class*='ant-select-selector'] {\n          ${lobeStaticStylish.variantBorderless}\n        }\n      }\n    `,\n    filled: css`\n      &[class*='ant-select'] {\n        > [class*='ant-select-selector'] {\n          ${lobeStaticStylish.variantFilled}\n        }\n      }\n    `,\n    outlined: css`\n      &[class*='ant-select'] {\n        > [class*='ant-select-selector'] {\n          ${lobeStaticStylish.variantOutlined}\n        }\n      }\n    `,\n    root: css``,\n    shadow: css`\n      &[class*='ant-select'] {\n        > [class*='ant-select-selector'] {\n          ${lobeStaticStylish.shadow}\n        }\n      }\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    shadow: false,\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n      underlined: null,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,UAAU;CACpD,OAAO;EACL,YAAY,GAAG;;;YAGPA,cAAkB,kBAAkB;;;;EAI5C,QAAQ,GAAG;;;YAGHA,cAAkB,cAAc;;;;EAIxC,UAAU,GAAG;;;YAGLA,cAAkB,gBAAgB;;;;EAI1C,MAAM,GAAG;EACT,QAAQ,GAAG;;;YAGHA,cAAkB,OAAO;;;;CAInC;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,QAAQ,MACV;CAEA,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACnB,YAAY;EACd;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;CACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/AutoComplete/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\n\nimport { menuClassNames, menuStyles } from '@/DropdownMenu/sharedStyle';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst ownStyles = stylex.create({\n  clear: {\n    margin: 0,\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    outline: 'none',\n    transition: `color 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    backgroundColor: 'transparent',\n    color: { 'default': cssVar.colorTextTertiary, ':hover': cssVar.colorText },\n    cursor: 'pointer',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  empty: {\n    backgroundColor: 'transparent',\n    cursor: 'default',\n    display: { 'default': 'flex', ':empty': 'none' },\n  },\n  list: {\n    display: { 'default': null, ':empty': 'none' },\n    maxHeight: 'min(320px, var(--available-height))',\n    overflowY: 'auto',\n  },\n  popup: {\n    transition: `opacity 140ms ${cssVar.motionEaseOut}, transform 140ms ${cssVar.motionEaseOut}`,\n    opacity: { 'default': null, ':is([data-starting-style], [data-ending-style])': 0 },\n    transform: {\n      'default': null,\n      ':is([data-starting-style], [data-ending-style])': 'scaleY(0.92)',\n    },\n    transformOrigin: 'var(--transform-origin)',\n    minWidth: 0,\n    width: 'var(--anchor-width)',\n  },\n});\n\nconst styleArrays = {\n  clear: [ownStyles.clear],\n  empty: [menuStyles.item, menuStyles.empty, ownStyles.empty],\n  item: [menuStyles.item],\n  list: [ownStyles.list],\n  popup: [menuStyles.popup, ownStyles.popup],\n  positioner: [menuStyles.positioner],\n};\n\nconst stableClassNames: Partial<Record<keyof typeof styleArrays, string>> = {\n  popup: menuClassNames.popup,\n  positioner: menuClassNames.positioner,\n};\n\nexport const styles = Object.fromEntries(\n  Object.entries(styleArrays).map(([key, value]) => [\n    key,\n    clsx(stylex.props(value).className, stableClassNames[key as keyof typeof styleArrays]),\n  ]),\n) as Record<keyof typeof styleArrays, string>;\n"],"mappings":";;;;AAKA,MAAM,YAAY;CAChB,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,cAAc;CAClB,OAAO,CAAC,UAAU,KAAK;CACvB,OAAO;EAAC,WAAW;EAAM,WAAW;EAAO,UAAU;CAAK;CAC1D,MAAM,CAAC,WAAW,IAAI;CACtB,MAAM,CAAC,UAAU,IAAI;CACrB,OAAO,CAAC,WAAW,OAAO,UAAU,KAAK;CACzC,YAAY,CAAC,WAAW,UAAU;AACpC;AACA,MAAM,mBAAsE;CAC1E,OAAO,eAAe;CACtB,YAAY,eAAe;AAC7B;AACA,MAAa,SAAS,OAAO,YAAY,OAAO,QAAQ,WAAW,CAAC,CAAC,KAAK,CAAC,KAAK,WAAW,CAAC,KAAK,KAAK,OAAO,MAAM,KAAK,CAAC,CAAC,WAAW,iBAAiB,IAAgC,CAAC,CAAC,CAAC"}

package/es/AutoComplete/type.d.mts

@@ -1,8 +1,39 @@
-import { AutoCompleteProps } from "antd";
+import { InputProps } from "../Input/type.mjs";
+import "../Input/index.mjs";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+import { Autocomplete } from "@base-ui/react/autocomplete";
 //#region src/AutoComplete/type.d.ts
-interface AutoCompleteProps$1 extends AutoCompleteProps {
+export interface AutoCompleteOption {
+  disabled?: boolean;
+  label?: ReactNode;
+  value: string;
+}
+type BaseAutocompleteProps = Omit<ComponentProps<typeof Autocomplete.Root>, 'className' | 'style' | 'render' | 'children' | 'items' | 'onValueChange' | 'mode'>;
+export interface AutoCompleteProps extends BaseAutocompleteProps {
+  allowClear?: boolean;
+  className?: string;
+  classNames?: {
+    input?: string;
+    item?: string;
+    popup?: string;
+  };
+  disabled?: boolean;
+  emptyText?: ReactNode;
+  onChange?: (value: string) => void;
+  onSearch?: (value: string) => void;
+  options?: (string | AutoCompleteOption)[];
+  placeholder?: string;
+  prefix?: InputProps['prefix'];
   shadow?: boolean;
+  size?: InputProps['size'];
+  style?: CSSProperties;
+  styles?: {
+    input?: CSSProperties;
+    item?: CSSProperties;
+    popup?: CSSProperties;
+  };
+  suffix?: InputProps['suffix'];
+  variant?: InputProps['variant'];
 }
 //#endregion
-export { AutoCompleteProps$1 as AutoCompleteProps };
 //# sourceMappingURL=type.d.mts.map

package/es/Avatar/Avatar.mjs

@@ -1,47 +1,38 @@
 "use client";
-import Center from "../Flex/Center.mjs";
+import { styleProps } from "../styles/stylex/props.mjs";
+import { cssVar } from "../styles/stylex/cssVar.stylex.mjs";
 import Icon from "../Icon/Icon.mjs";
-import Img from "../Img/index.mjs";
+import Center from "../Flex/Center.mjs";
+import { stylish } from "../styles/stylex/stylish.mjs";
 import FluentEmoji from "../FluentEmoji/FluentEmoji.mjs";
 import { safeReadableColor } from "../utils/safeReadableColor.mjs";
-import { styles, variants } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { calculateEmojiSize, formatAvatarText, hasValidBackground, isDefaultAntAvatar } from "./utils.mjs";
 import { memo, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cssVar, cx } from "antd-style";
+import clsx from "clsx";
 import { Loader2 } from "lucide-react";
-import { Avatar } from "antd";
 import { getEmoji } from "@lobehub/fluent-emoji";
 //#region src/Avatar/Avatar.tsx
-/**
-* @deprecated Use `Avatar` from `@lobehub/ui/base-ui` instead.
-*/
-const Avatar$1 = memo(({ bordered, className, avatar, title, animation, borderedColor, size = 48, shape = "square", background, style, unoptimized, alt, variant = "borderless", shadow, loading, sliceText = true, emojiScaleWithBackground = true, ref, ...rest }) => {
+const variantStyles = {
+	borderless: stylish.variantBorderlessWithoutHover,
+	filled: stylish.variantFilledWithoutHover,
+	outlined: stylish.variantOutlinedWithoutHover
+};
+const AvatarImpl = memo(({ alt, animation, avatar, background, bordered, borderedColor, className, classNames, crossOrigin, draggable = false, emojiScaleWithBackground = true, loading, ref, shadow, shape = "square", size = 48, sliceText = true, style, styles: customStyles, title, tooltipProps, unoptimized, variant = "borderless", xstyle, contentXstyle, ...rest }) => {
 	const isStringAvatar = typeof avatar === "string";
-	const isDefaultAntAvatar$1 = useMemo(() => isDefaultAntAvatar(avatar), [avatar]);
 	const [isImgError, setIsImgError] = useState(false);
-	const emoji = useMemo(() => avatar && !isDefaultAntAvatar$1 && isStringAvatar && getEmoji(avatar), [
+	const isUrlOrElement = useMemo(() => isDefaultAntAvatar(avatar), [avatar]);
+	const emoji = useMemo(() => avatar && isStringAvatar && !isUrlOrElement ? getEmoji(avatar) : void 0, [
 		avatar,
 		isStringAvatar,
-		isDefaultAntAvatar$1
+		isUrlOrElement
 	]);
-	const text = String(isDefaultAntAvatar$1 ? title : avatar);
+	const text = isUrlOrElement ? title : typeof avatar === "string" ? avatar : void 0;
 	const imgAlt = alt || title || "avatar";
-	const defaultAvatar = useMemo(() => typeof avatar === "string" ? /* @__PURE__ */ jsx(Img, {
-		alt: imgAlt,
-		height: size,
-		loading: "lazy",
-		src: avatar,
-		unoptimized,
-		width: size,
-		onError: () => setIsImgError(true)
-	}) : avatar, [
-		avatar,
-		imgAlt,
-		size,
-		unoptimized
-	]);
 	const hasBackground = hasValidBackground(background);
+	const showImage = isUrlOrElement && isStringAvatar && !isImgError;
+	const showElement = isUrlOrElement && !isStringAvatar && !isImgError;
 	const customAvatar = useMemo(() => emoji ? /* @__PURE__ */ jsx(FluentEmoji, {
 		emoji,
 		size: calculateEmojiSize(size, hasBackground, emojiScaleWithBackground),
@@ -58,53 +49,59 @@ const Avatar$1 = memo(({ bordered, className, avatar, title, animation, bordered
 		unoptimized,
 		emojiScaleWithBackground
 	]);
-	const avatarStyle = useMemo(() => ({
-		backgroundColor: isDefaultAntAvatar$1 && !isImgError || emoji ? background : background || cssVar.colorBorder,
-		borderRadius: shape === "square" && size && size < 24 ? "33%" : void 0,
-		boxShadow: bordered ? `${cssVar.colorBgLayout} 0 0 0 2px, ${borderedColor || cssVar.colorTextTertiary} 0 0 0 4px` : void 0,
-		color: safeReadableColor(background || cssVar.colorBorder),
-		cursor: rest?.onClick ? "pointer" : void 0,
-		fontSize: size * (emoji ? .7 : .5),
-		...style
-	}), [
-		isDefaultAntAvatar$1,
-		isImgError,
-		background,
-		shape,
-		emoji,
-		size,
-		bordered,
-		borderedColor,
-		rest?.onClick,
-		style
-	]);
-	const showFallback = !isDefaultAntAvatar$1 || isImgError;
-	return /* @__PURE__ */ jsxs(Avatar, {
-		alt: imgAlt,
-		className: cx(variants({
-			shadow,
-			variant
-		}), className),
-		draggable: false,
-		ref,
-		shape,
-		size,
-		src: isDefaultAntAvatar$1 && !isImgError ? defaultAvatar : void 0,
-		style: avatarStyle,
+	return /* @__PURE__ */ jsxs("div", {
 		...rest,
-		children: [loading && /* @__PURE__ */ jsx(Center, {
-			className: styles.loading,
-			height: "100%",
-			width: "100%",
-			children: /* @__PURE__ */ jsx(Icon, {
-				spin: true,
-				icon: Loader2
+		ref,
+		className: styleProps([
+			styles.root,
+			variantStyles[variant],
+			shadow && styles.shadow,
+			xstyle
+		], clsx(className, classNames?.root)).className,
+		style: {
+			backgroundColor: isUrlOrElement && !isImgError || emoji ? background : background || cssVar.colorBorder,
+			borderRadius: shape === "circle" ? "50%" : size < 24 ? "33%" : Math.max(size / 6, 2),
+			boxShadow: bordered ? `${cssVar.colorBgLayout} 0 0 0 2px, ${borderedColor || cssVar.colorTextTertiary} 0 0 0 4px` : void 0,
+			color: safeReadableColor(background || cssVar.colorBorder),
+			cursor: rest?.onClick ? "pointer" : void 0,
+			fontSize: size * (emoji ? .7 : .5),
+			height: size,
+			width: size,
+			...style,
+			...customStyles?.root
+		},
+		children: [
+			loading && /* @__PURE__ */ jsx(Center, {
+				flex: "none",
+				height: "100%",
+				width: "100%",
+				...styleProps(styles.loading, classNames?.loading, customStyles?.loading),
+				children: /* @__PURE__ */ jsx(Icon, {
+					spin: true,
+					icon: Loader2
+				})
+			}),
+			typeof avatar === "string" && showImage && /* @__PURE__ */ jsx("img", {
+				alt: imgAlt,
+				crossOrigin,
+				draggable,
+				height: size,
+				loading: "lazy",
+				src: avatar,
+				width: size,
+				...styleProps(styles.img, classNames?.img, customStyles?.img),
+				onError: () => setIsImgError(true)
+			}),
+			!showImage && /* @__PURE__ */ jsx("span", {
+				...styleProps([styles.content, contentXstyle], classNames?.content, customStyles?.content),
+				children: showElement ? avatar : customAvatar
 			})
-		}), showFallback && customAvatar]
+		]
 	});
 });
-Avatar$1.displayName = "Avatar";
+AvatarImpl.displayName = "Avatar";
+const Avatar = AvatarImpl;
 //#endregion
-export { Avatar$1 as default };
+export { AvatarImpl, Avatar as default };
 
 //# sourceMappingURL=Avatar.mjs.map

package/es/Avatar/Avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","names":["Avatar","isDefaultAntAvatar","checkIsDefaultAntAvatar","AntAvatar"],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["'use client';\n\nimport { getEmoji } from '@lobehub/fluent-emoji';\nimport { Avatar as AntAvatar } from 'antd';\nimport { cssVar, cx } from 'antd-style';\nimport { Loader2 } from 'lucide-react';\nimport { memo, useMemo, useState } from 'react';\n\nimport { Center } from '@/Flex';\nimport FluentEmoji from '@/FluentEmoji';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { styles, variants } from './style';\nimport { type AvatarProps } from './type';\nimport {\n  calculateEmojiSize,\n  formatAvatarText,\n  hasValidBackground,\n  isDefaultAntAvatar as checkIsDefaultAntAvatar,\n} from './utils';\n\n/**\n * @deprecated Use `Avatar` from `@lobehub/ui/base-ui` instead.\n */\nconst Avatar = memo<AvatarProps>(\n  ({\n    bordered,\n    className,\n    avatar,\n    title,\n    animation,\n    borderedColor,\n    size = 48,\n    shape = 'square',\n    background,\n    style,\n    unoptimized,\n    alt,\n    variant = 'borderless',\n    shadow,\n    loading,\n    sliceText = true,\n    emojiScaleWithBackground = true,\n    ref,\n    ...rest\n  }) => {\n    const isStringAvatar = typeof avatar === 'string';\n\n    const isDefaultAntAvatar = useMemo(() => checkIsDefaultAntAvatar(avatar), [avatar]);\n    const [isImgError, setIsImgError] = useState(false);\n\n    const emoji = useMemo(\n      () => avatar && !isDefaultAntAvatar && isStringAvatar && getEmoji(avatar),\n      [avatar, isStringAvatar, isDefaultAntAvatar],\n    );\n\n    const text = String(isDefaultAntAvatar ? title : avatar);\n\n    const imgAlt = alt || title || 'avatar';\n\n    const defaultAvatar = useMemo(\n      () =>\n        typeof avatar === 'string' ? (\n          <Img\n            alt={imgAlt}\n            height={size}\n            loading={'lazy'}\n            src={avatar}\n            unoptimized={unoptimized}\n            width={size}\n            onError={() => setIsImgError(true)}\n          />\n        ) : (\n          avatar\n        ),\n      [avatar, imgAlt, size, unoptimized],\n    );\n\n    const hasBackground = hasValidBackground(background);\n\n    const customAvatar = useMemo(\n      () =>\n        emoji ? (\n          <FluentEmoji\n            emoji={emoji}\n            size={calculateEmojiSize(size, hasBackground, emojiScaleWithBackground)}\n            type={animation ? 'anim' : '3d'}\n            unoptimized={unoptimized}\n          />\n        ) : (\n          formatAvatarText(text || title, sliceText)\n        ),\n      [\n        animation,\n        emoji,\n        hasBackground,\n        size,\n        sliceText,\n        text,\n        title,\n        unoptimized,\n        emojiScaleWithBackground,\n      ],\n    );\n\n    const avatarStyle = useMemo(\n      () => ({\n        backgroundColor:\n          (isDefaultAntAvatar && !isImgError) || emoji\n            ? background\n            : background || cssVar.colorBorder,\n        borderRadius: shape === 'square' && size && size < 24 ? '33%' : undefined,\n        boxShadow: bordered\n          ? `${cssVar.colorBgLayout} 0 0 0 2px, ${borderedColor || cssVar.colorTextTertiary} 0 0 0 4px`\n          : undefined,\n        color: safeReadableColor(background || cssVar.colorBorder),\n        cursor: rest?.onClick ? 'pointer' : undefined,\n        fontSize: size * (emoji ? 0.7 : 0.5),\n        ...style,\n      }),\n      [\n        isDefaultAntAvatar,\n        isImgError,\n        background,\n        shape,\n        emoji,\n        size,\n        bordered,\n        borderedColor,\n        rest?.onClick,\n        style,\n      ],\n    );\n\n    const showFallback = !isDefaultAntAvatar || isImgError;\n\n    return (\n      <AntAvatar\n        alt={imgAlt}\n        className={cx(variants({ shadow, variant }), className)}\n        draggable={false}\n        ref={ref}\n        shape={shape}\n        size={size}\n        src={isDefaultAntAvatar && !isImgError ? defaultAvatar : undefined}\n        style={avatarStyle}\n        {...rest}\n      >\n        {loading && (\n          <Center className={styles.loading} height={'100%'} width={'100%'}>\n            <Icon spin icon={Loader2} />\n          </Center>\n        )}\n        {showFallback && customAvatar}\n      </AntAvatar>\n    );\n  },\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0BA,MAAMA,WAAS,MACZ,EACC,UACA,WACA,QACA,OACA,WACA,eACA,OAAO,IACP,QAAQ,UACR,YACA,OACA,aACA,KACA,UAAU,cACV,QACA,SACA,YAAY,MACZ,2BAA2B,MAC3B,KACA,GAAG,WACC;CACJ,MAAM,iBAAiB,OAAO,WAAW;CAEzC,MAAMC,uBAAqB,cAAcC,mBAAwB,MAAM,GAAG,CAAC,MAAM,CAAC;CAClF,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAElD,MAAM,QAAQ,cACN,UAAU,CAACD,wBAAsB,kBAAkB,SAAS,MAAM,GACxE;EAAC;EAAQ;EAAgBA;CAAkB,CAC7C;CAEA,MAAM,OAAO,OAAOA,uBAAqB,QAAQ,MAAM;CAEvD,MAAM,SAAS,OAAO,SAAS;CAE/B,MAAM,gBAAgB,cAElB,OAAO,WAAW,WAChB,oBAAC,KAAD;EACE,KAAK;EACL,QAAQ;EACR,SAAS;EACT,KAAK;EACQ;EACb,OAAO;EACP,eAAe,cAAc,IAAI;CAClC,CAAA,IAED,QAEJ;EAAC;EAAQ;EAAQ;EAAM;CAAW,CACpC;CAEA,MAAM,gBAAgB,mBAAmB,UAAU;CAEnD,MAAM,eAAe,cAEjB,QACE,oBAAC,aAAD;EACS;EACP,MAAM,mBAAmB,MAAM,eAAe,wBAAwB;EACtE,MAAM,YAAY,SAAS;EACd;CACd,CAAA,IAED,iBAAiB,QAAQ,OAAO,SAAS,GAE7C;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,cAAc,eACX;EACL,iBACGA,wBAAsB,CAAC,cAAe,QACnC,aACA,cAAc,OAAO;EAC3B,cAAc,UAAU,YAAY,QAAQ,OAAO,KAAK,QAAQ,KAAA;EAChE,WAAW,WACP,GAAG,OAAO,cAAc,cAAc,iBAAiB,OAAO,kBAAkB,cAChF,KAAA;EACJ,OAAO,kBAAkB,cAAc,OAAO,WAAW;EACzD,QAAQ,MAAM,UAAU,YAAY,KAAA;EACpC,UAAU,QAAQ,QAAQ,KAAM;EAChC,GAAG;CACL,IACA;EACEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAM;EACN;CACF,CACF;CAEA,MAAM,eAAe,CAACA,wBAAsB;CAE5C,OACE,qBAACE,QAAD;EACE,KAAK;EACL,WAAW,GAAG,SAAS;GAAE;GAAQ;EAAQ,CAAC,GAAG,SAAS;EACtD,WAAW;EACN;EACE;EACD;EACN,KAAKF,wBAAsB,CAAC,aAAa,gBAAgB,KAAA;EACzD,OAAO;EACP,GAAI;EATN,UAAA,CAWG,WACC,oBAAC,QAAD;GAAQ,WAAW,OAAO;GAAS,QAAQ;GAAQ,OAAO;GACxD,UAAA,oBAAC,MAAD;IAAM,MAAA;IAAK,MAAM;GAAU,CAAA;EACrB,CAAA,GAET,gBAAgB,YACR;;AAEf,CACF;AAEA,SAAO,cAAc"}
+{"version":3,"file":"Avatar.mjs","names":[],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["'use client';\n\nimport { getEmoji } from '@lobehub/fluent-emoji';\nimport clsx from 'clsx';\nimport { Loader2 } from 'lucide-react';\nimport { memo, type ReactNode, useMemo, useState } from 'react';\n\nimport { Center } from '@/Flex';\nimport FluentEmoji from '@/FluentEmoji';\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { stylish } from '@/styles/stylex/stylish';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { styles } from './style';\nimport { type AvatarProps } from './type';\nimport {\n  calculateEmojiSize,\n  formatAvatarText,\n  hasValidBackground,\n  isDefaultAntAvatar,\n} from './utils';\n\nconst variantStyles = {\n  borderless: stylish.variantBorderlessWithoutHover,\n  filled: stylish.variantFilledWithoutHover,\n  outlined: stylish.variantOutlinedWithoutHover,\n};\n\ntype AvatarImplProps = AvatarProps & {\n  contentXstyle?: Parameters<typeof styleProps>[0];\n  xstyle?: Parameters<typeof styleProps>[0];\n};\n\nexport const AvatarImpl = memo<AvatarImplProps>(\n  ({\n    alt,\n    animation,\n    avatar,\n    background,\n    bordered,\n    borderedColor,\n    className,\n    classNames,\n    crossOrigin,\n    draggable = false,\n    emojiScaleWithBackground = true,\n    loading,\n    ref,\n    shadow,\n    shape = 'square',\n    size = 48,\n    sliceText = true,\n    style,\n    styles: customStyles,\n    title,\n    tooltipProps,\n    unoptimized,\n    variant = 'borderless',\n    xstyle,\n    contentXstyle,\n    ...rest\n  }) => {\n    const isStringAvatar = typeof avatar === 'string';\n\n    const [isImgError, setIsImgError] = useState(false);\n\n    const isUrlOrElement = useMemo(() => isDefaultAntAvatar(avatar), [avatar]);\n\n    const emoji = useMemo(\n      () => (avatar && isStringAvatar && !isUrlOrElement ? getEmoji(avatar) : undefined),\n      [avatar, isStringAvatar, isUrlOrElement],\n    );\n\n    const text = isUrlOrElement ? title : typeof avatar === 'string' ? avatar : undefined;\n\n    const imgAlt = alt || title || 'avatar';\n\n    const hasBackground = hasValidBackground(background);\n    const showImage = isUrlOrElement && isStringAvatar && !isImgError;\n    const showElement = isUrlOrElement && !isStringAvatar && !isImgError;\n\n    const customAvatar = useMemo(\n      () =>\n        emoji ? (\n          <FluentEmoji\n            emoji={emoji}\n            size={calculateEmojiSize(size, hasBackground, emojiScaleWithBackground)}\n            type={animation ? 'anim' : '3d'}\n            unoptimized={unoptimized}\n          />\n        ) : (\n          formatAvatarText(text || title, sliceText)\n        ),\n      [\n        animation,\n        emoji,\n        hasBackground,\n        size,\n        sliceText,\n        text,\n        title,\n        unoptimized,\n        emojiScaleWithBackground,\n      ],\n    );\n\n    return (\n      <div\n        {...rest}\n        ref={ref}\n        className={\n          styleProps(\n            [styles.root, variantStyles[variant], shadow && styles.shadow, xstyle],\n            clsx(className, classNames?.root),\n          ).className\n        }\n        style={{\n          backgroundColor:\n            (isUrlOrElement && !isImgError) || emoji\n              ? background\n              : background || cssVar.colorBorder,\n          borderRadius: shape === 'circle' ? '50%' : size < 24 ? '33%' : Math.max(size / 6, 2),\n          boxShadow: bordered\n            ? `${cssVar.colorBgLayout} 0 0 0 2px, ${borderedColor || cssVar.colorTextTertiary} 0 0 0 4px`\n            : undefined,\n          color: safeReadableColor(background || cssVar.colorBorder),\n          cursor: rest?.onClick ? 'pointer' : undefined,\n          fontSize: size * (emoji ? 0.7 : 0.5),\n          height: size,\n          width: size,\n          ...style,\n          ...customStyles?.root,\n        }}\n      >\n        {loading && (\n          <Center\n            flex={'none'}\n            height={'100%'}\n            width={'100%'}\n            {...styleProps(styles.loading, classNames?.loading, customStyles?.loading)}\n          >\n            <Icon spin icon={Loader2} />\n          </Center>\n        )}\n        {typeof avatar === 'string' && showImage && (\n          <img\n            alt={imgAlt}\n            crossOrigin={crossOrigin}\n            draggable={draggable}\n            height={size}\n            loading={'lazy'}\n            src={avatar}\n            width={size}\n            {...styleProps(styles.img, classNames?.img, customStyles?.img)}\n            onError={() => setIsImgError(true)}\n          />\n        )}\n        {!showImage && (\n          <span\n            {...styleProps(\n              [styles.content, contentXstyle],\n              classNames?.content,\n              customStyles?.content,\n            )}\n          >\n            {showElement ? avatar : customAvatar}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nAvatarImpl.displayName = 'Avatar';\n\nconst Avatar = AvatarImpl as (props: AvatarProps) => ReactNode;\n\nexport default Avatar;\n"],"mappings":";;;;;;;;;;;;;;;;AAwBA,MAAM,gBAAgB;CACpB,YAAY,QAAQ;CACpB,QAAQ,QAAQ;CAChB,UAAU,QAAQ;AACpB;AAOA,MAAa,aAAa,MACvB,EACC,KACA,WACA,QACA,YACA,UACA,eACA,WACA,YACA,aACA,YAAY,OACZ,2BAA2B,MAC3B,SACA,KACA,QACA,QAAQ,UACR,OAAO,IACP,YAAY,MACZ,OACA,QAAQ,cACR,OACA,cACA,aACA,UAAU,cACV,QACA,eACA,GAAG,WACC;CACJ,MAAM,iBAAiB,OAAO,WAAW;CAEzC,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAElD,MAAM,iBAAiB,cAAc,mBAAmB,MAAM,GAAG,CAAC,MAAM,CAAC;CAEzE,MAAM,QAAQ,cACL,UAAU,kBAAkB,CAAC,iBAAiB,SAAS,MAAM,IAAI,KAAA,GACxE;EAAC;EAAQ;EAAgB;CAAc,CACzC;CAEA,MAAM,OAAO,iBAAiB,QAAQ,OAAO,WAAW,WAAW,SAAS,KAAA;CAE5E,MAAM,SAAS,OAAO,SAAS;CAE/B,MAAM,gBAAgB,mBAAmB,UAAU;CACnD,MAAM,YAAY,kBAAkB,kBAAkB,CAAC;CACvD,MAAM,cAAc,kBAAkB,CAAC,kBAAkB,CAAC;CAE1D,MAAM,eAAe,cAEjB,QACE,oBAAC,aAAD;EACS;EACP,MAAM,mBAAmB,MAAM,eAAe,wBAAwB;EACtE,MAAM,YAAY,SAAS;EACd;CACd,CAAA,IAED,iBAAiB,QAAQ,OAAO,SAAS,GAE7C;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EACC;EACL,WACE,WACE;GAAC,OAAO;GAAM,cAAc;GAAU,UAAU,OAAO;GAAQ;EAAM,GACrE,KAAK,WAAW,YAAY,IAAI,CAClC,CAAC,CAAC;EAEJ,OAAO;GACL,iBACG,kBAAkB,CAAC,cAAe,QAC/B,aACA,cAAc,OAAO;GAC3B,cAAc,UAAU,WAAW,QAAQ,OAAO,KAAK,QAAQ,KAAK,IAAI,OAAO,GAAG,CAAC;GACnF,WAAW,WACP,GAAG,OAAO,cAAc,cAAc,iBAAiB,OAAO,kBAAkB,cAChF,KAAA;GACJ,OAAO,kBAAkB,cAAc,OAAO,WAAW;GACzD,QAAQ,MAAM,UAAU,YAAY,KAAA;GACpC,UAAU,QAAQ,QAAQ,KAAM;GAChC,QAAQ;GACR,OAAO;GACP,GAAG;GACH,GAAG,cAAc;EACnB;EAzBF,UAAA;GA2BG,WACC,oBAAC,QAAD;IACE,MAAM;IACN,QAAQ;IACR,OAAO;IACP,GAAI,WAAW,OAAO,SAAS,YAAY,SAAS,cAAc,OAAO;IAEzE,UAAA,oBAAC,MAAD;KAAM,MAAA;KAAK,MAAM;IAAU,CAAA;GACrB,CAAA;GAET,OAAO,WAAW,YAAY,aAC7B,oBAAC,OAAD;IACE,KAAK;IACQ;IACF;IACX,QAAQ;IACR,SAAS;IACT,KAAK;IACL,OAAO;IACP,GAAI,WAAW,OAAO,KAAK,YAAY,KAAK,cAAc,GAAG;IAC7D,eAAe,cAAc,IAAI;GAClC,CAAA;GAEF,CAAC,aACA,oBAAC,QAAD;IACE,GAAI,WACF,CAAC,OAAO,SAAS,aAAa,GAC9B,YAAY,SACZ,cAAc,OAChB;IAEC,UAAA,cAAc,SAAS;GACpB,CAAA;EAEL;;AAET,CACF;AAEA,WAAW,cAAc;AAEzB,MAAM,SAAS"}

package/es/Avatar/AvatarGroup/index.mjs

@@ -1,10 +1,11 @@
 "use client";
+import { cssVar } from "../../styles/stylex/cssVar.stylex.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
-import Avatar from "../Avatar.mjs";
+import { AvatarImpl } from "../Avatar.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cssVar, cx } from "antd-style";
+import clsx from "clsx";
 //#region src/Avatar/AvatarGroup/index.tsx
 const AvatarGroup = memo(({ items, max, gap, variant = "borderless", bordered, shadow, size = 48, background, animation, draggable, classNames, shape, styles: customStyles, onClick, ref, zIndexReverse, ...rest }) => {
 	const avatars = max ? items.slice(0, max) : items;
@@ -28,8 +29,9 @@ const AvatarGroup = memo(({ items, max, gap, variant = "borderless", bordered, s
 		...rest,
 		children: [avatars.map((avatar, index) => {
 			const { key, style: avatarStyle, className: avatarClassName, ...restAvatarProps } = avatar;
-			return /* @__PURE__ */ jsx(Avatar, {
-				className: cx(classNames?.avatar, avatarClassName, styles.avatar),
+			return /* @__PURE__ */ jsx(AvatarImpl, {
+				className: clsx(classNames?.avatar, avatarClassName),
+				xstyle: styles.avatar,
 				style: {
 					marginLeft: index === 0 ? 0 : gapValue,
 					zIndex: zIndexReverse ? items.length - index : index,
@@ -43,12 +45,14 @@ const AvatarGroup = memo(({ items, max, gap, variant = "borderless", bordered, s
 				...avatarProps,
 				...restAvatarProps
 			}, key);
-		}), max && restAvatars.length > 0 && /* @__PURE__ */ jsx(Avatar, {
+		}), max && restAvatars.length > 0 && /* @__PURE__ */ jsx(AvatarImpl, {
 			...avatarProps,
 			avatar: `+${restAvatars.length}`,
 			background: cssVar.colorText,
-			className: cx(styles.avatar, styles.count, classNames?.count),
+			className: classNames?.count,
+			contentXstyle: styles.count,
 			sliceText: false,
+			xstyle: styles.avatar,
 			style: {
 				marginLeft: gapValue,
 				zIndex: zIndexReverse ? 0 : avatars.length,

package/es/Avatar/AvatarGroup/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Flexbox"],"sources":["../../../src/Avatar/AvatarGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport Avatar from '../Avatar';\nimport type { AvatarGroupProps } from '../type';\nimport { styles } from './style';\n\nconst AvatarGroup = memo<AvatarGroupProps>(\n  ({\n    items,\n    max,\n    gap,\n    variant = 'borderless',\n    bordered,\n    shadow,\n    size = 48,\n    background,\n    animation,\n    draggable,\n    classNames,\n    shape,\n    styles: customStyles,\n    onClick,\n    ref,\n    zIndexReverse,\n    ...rest\n  }) => {\n    const avatars = max ? items.slice(0, max) : items;\n    const restAvatars = items.slice(max, items.length);\n    const gapValue = gap ?? Math.floor(-size / 4);\n\n    const avatarProps = {\n      animation,\n      background,\n      bordered,\n      draggable,\n      shadow,\n      shape,\n      size,\n      variant,\n    };\n\n    return (\n      <Flexbox\n        horizontal\n        gap={gap}\n        ref={ref}\n        style={{\n          position: 'relative',\n        }}\n        {...rest}\n      >\n        {avatars.map((avatar, index) => {\n          const {\n            key,\n            style: avatarStyle,\n            className: avatarClassName,\n            ...restAvatarProps\n          } = avatar;\n          return (\n            <Avatar\n              className={cx(classNames?.avatar, avatarClassName, styles.avatar)}\n              key={key}\n              style={{\n                marginLeft: index === 0 ? 0 : gapValue,\n                zIndex: zIndexReverse ? items.length - index : index,\n                ...customStyles?.avatar,\n                ...avatarStyle,\n              }}\n              onClick={() => onClick?.({ item: avatar, key })}\n              {...avatarProps}\n              {...restAvatarProps}\n            />\n          );\n        })}\n        {max && restAvatars.length > 0 && (\n          <Avatar\n            {...avatarProps}\n            avatar={`+${restAvatars.length}`}\n            background={cssVar.colorText}\n            className={cx(styles.avatar, styles.count, classNames?.count)}\n            sliceText={false}\n            style={{\n              marginLeft: gapValue,\n              zIndex: zIndexReverse ? 0 : avatars.length,\n              ...customStyles?.count,\n            }}\n          />\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nAvatarGroup.displayName = 'AvatarGroup';\n\nexport default AvatarGroup;\n"],"mappings":";;;;;;;;AAWA,MAAM,cAAc,MACjB,EACC,OACA,KACA,KACA,UAAU,cACV,UACA,QACA,OAAO,IACP,YACA,WACA,WACA,YACA,OACA,QAAQ,cACR,SACA,KACA,eACA,GAAG,WACC;CACJ,MAAM,UAAU,MAAM,MAAM,MAAM,GAAG,GAAG,IAAI;CAC5C,MAAM,cAAc,MAAM,MAAM,KAAK,MAAM,MAAM;CACjD,MAAM,WAAW,OAAO,KAAK,MAAM,CAAC,OAAO,CAAC;CAE5C,MAAM,cAAc;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CAEA,OACE,qBAACA,mBAAD;EACE,YAAA;EACK;EACA;EACL,OAAO,EACL,UAAU,WACZ;EACA,GAAI;EAPN,UAAA,CASG,QAAQ,KAAK,QAAQ,UAAU;GAC9B,MAAM,EACJ,KACA,OAAO,aACP,WAAW,iBACX,GAAG,oBACD;GACJ,OACE,oBAAC,QAAD;IACE,WAAW,GAAG,YAAY,QAAQ,iBAAiB,OAAO,MAAM;IAEhE,OAAO;KACL,YAAY,UAAU,IAAI,IAAI;KAC9B,QAAQ,gBAAgB,MAAM,SAAS,QAAQ;KAC/C,GAAG,cAAc;KACjB,GAAG;IACL;IACA,eAAe,UAAU;KAAE,MAAM;KAAQ;IAAI,CAAC;IAC9C,GAAI;IACJ,GAAI;GACL,GAVM,GAUN;EAEL,CAAC,GACA,OAAO,YAAY,SAAS,KAC3B,oBAAC,QAAD;GACE,GAAI;GACJ,QAAQ,IAAI,YAAY;GACxB,YAAY,OAAO;GACnB,WAAW,GAAG,OAAO,QAAQ,OAAO,OAAO,YAAY,KAAK;GAC5D,WAAW;GACX,OAAO;IACL,YAAY;IACZ,QAAQ,gBAAgB,IAAI,QAAQ;IACpC,GAAG,cAAc;GACnB;EACD,CAAA,CAEI;;AAEb,CACF;AAEA,YAAY,cAAc"}
+{"version":3,"file":"index.mjs","names":["Flexbox","Avatar"],"sources":["../../../src/Avatar/AvatarGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { AvatarImpl as Avatar } from '../Avatar';\nimport type { AvatarGroupProps } from '../type';\nimport { styles } from './style';\n\nconst AvatarGroup = memo<AvatarGroupProps>(\n  ({\n    items,\n    max,\n    gap,\n    variant = 'borderless',\n    bordered,\n    shadow,\n    size = 48,\n    background,\n    animation,\n    draggable,\n    classNames,\n    shape,\n    styles: customStyles,\n    onClick,\n    ref,\n    zIndexReverse,\n    ...rest\n  }) => {\n    const avatars = max ? items.slice(0, max) : items;\n    const restAvatars = items.slice(max, items.length);\n    const gapValue = gap ?? Math.floor(-size / 4);\n\n    const avatarProps = {\n      animation,\n      background,\n      bordered,\n      draggable,\n      shadow,\n      shape,\n      size,\n      variant,\n    };\n\n    return (\n      <Flexbox\n        horizontal\n        gap={gap}\n        ref={ref}\n        style={{\n          position: 'relative',\n        }}\n        {...rest}\n      >\n        {avatars.map((avatar, index) => {\n          const {\n            key,\n            style: avatarStyle,\n            className: avatarClassName,\n            ...restAvatarProps\n          } = avatar;\n          return (\n            <Avatar\n              className={clsx(classNames?.avatar, avatarClassName)}\n              key={key}\n              xstyle={styles.avatar}\n              style={{\n                marginLeft: index === 0 ? 0 : gapValue,\n                zIndex: zIndexReverse ? items.length - index : index,\n                ...customStyles?.avatar,\n                ...avatarStyle,\n              }}\n              onClick={() => onClick?.({ item: avatar, key })}\n              {...avatarProps}\n              {...restAvatarProps}\n            />\n          );\n        })}\n        {max && restAvatars.length > 0 && (\n          <Avatar\n            {...avatarProps}\n            avatar={`+${restAvatars.length}`}\n            background={cssVar.colorText}\n            className={classNames?.count}\n            contentXstyle={styles.count}\n            sliceText={false}\n            xstyle={styles.avatar}\n            style={{\n              marginLeft: gapValue,\n              zIndex: zIndexReverse ? 0 : avatars.length,\n              ...customStyles?.count,\n            }}\n          />\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nAvatarGroup.displayName = 'AvatarGroup';\n\nexport default AvatarGroup;\n"],"mappings":";;;;;;;;;AAYA,MAAM,cAAc,MACjB,EACC,OACA,KACA,KACA,UAAU,cACV,UACA,QACA,OAAO,IACP,YACA,WACA,WACA,YACA,OACA,QAAQ,cACR,SACA,KACA,eACA,GAAG,WACC;CACJ,MAAM,UAAU,MAAM,MAAM,MAAM,GAAG,GAAG,IAAI;CAC5C,MAAM,cAAc,MAAM,MAAM,KAAK,MAAM,MAAM;CACjD,MAAM,WAAW,OAAO,KAAK,MAAM,CAAC,OAAO,CAAC;CAE5C,MAAM,cAAc;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CAEA,OACE,qBAACA,mBAAD;EACE,YAAA;EACK;EACA;EACL,OAAO,EACL,UAAU,WACZ;EACA,GAAI;EAPN,UAAA,CASG,QAAQ,KAAK,QAAQ,UAAU;GAC9B,MAAM,EACJ,KACA,OAAO,aACP,WAAW,iBACX,GAAG,oBACD;GACJ,OACE,oBAACC,YAAD;IACE,WAAW,KAAK,YAAY,QAAQ,eAAe;IAEnD,QAAQ,OAAO;IACf,OAAO;KACL,YAAY,UAAU,IAAI,IAAI;KAC9B,QAAQ,gBAAgB,MAAM,SAAS,QAAQ;KAC/C,GAAG,cAAc;KACjB,GAAG;IACL;IACA,eAAe,UAAU;KAAE,MAAM;KAAQ;IAAI,CAAC;IAC9C,GAAI;IACJ,GAAI;GACL,GAXM,GAWN;EAEL,CAAC,GACA,OAAO,YAAY,SAAS,KAC3B,oBAACA,YAAD;GACE,GAAI;GACJ,QAAQ,IAAI,YAAY;GACxB,YAAY,OAAO;GACnB,WAAW,YAAY;GACvB,eAAe,OAAO;GACtB,WAAW;GACX,QAAQ,OAAO;GACf,OAAO;IACL,YAAY;IACZ,QAAQ,gBAAgB,IAAI,QAAQ;IACpC,GAAG,cAAc;GACnB;EACD,CAAA,CAEI;;AAEb,CACF;AAEA,YAAY,cAAc"}

package/es/Avatar/AvatarGroup/style.mjs

@@ -1,22 +1,17 @@
-import { createStaticStyles } from "antd-style";
 //#region src/Avatar/AvatarGroup/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => {
-	return {
-		avatar: css`
-      border: 2px solid ${cssVar.colorBgContainer} !important;
-    `,
-		count: css`
-      &[class*='ant-avatar'] {
-        background: ${cssVar.colorText};
-
-        > [class*='ant-avatar-string'] {
-          transform: scale(0.8) !important;
-          color: ${cssVar.colorBgLayout};
-        }
-      }
-    `
-	};
-});
+const styles = {
+	avatar: {
+		kVAM5u: "lbfbyuaw",
+		ksu8eU: "lb1y0btm7",
+		kMzoRj: "lbdh2fpr",
+		$$css: true
+	},
+	count: {
+		kMwMTN: "lb15g0kca",
+		kGuDYH: "lbsfzzmd",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

package/es/Avatar/AvatarGroup/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/Avatar/AvatarGroup/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    avatar: css`\n      border: 2px solid ${cssVar.colorBgContainer} !important;\n    `,\n    count: css`\n      &[class*='ant-avatar'] {\n        background: ${cssVar.colorText};\n\n        > [class*='ant-avatar-string'] {\n          transform: scale(0.8) !important;\n          color: ${cssVar.colorBgLayout};\n        }\n      }\n    `,\n  };\n});\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,QAAQ,GAAG;0BACW,OAAO,iBAAiB;;EAE9C,OAAO,GAAG;;sBAEQ,OAAO,UAAU;;;;mBAIpB,OAAO,cAAc;;;;CAItC;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/Avatar/AvatarGroup/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  avatar: {\n    borderColor: cssVar.colorBgContainer,\n    borderStyle: 'solid',\n    borderWidth: 2,\n  },\n  count: {\n    color: cssVar.colorBgLayout,\n    fontSize: '0.8em',\n  },\n});\n"],"mappings":";AAGA,MAAa,SAAS;CACpB,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/Avatar/index.d.mts

@@ -1,4 +1,4 @@
-import { AvatarGroupItemType, AvatarGroupProps, AvatarProps } from "./type.mjs";
+import { AvatarClassNames, AvatarGroupItemType, AvatarGroupProps, AvatarProps, AvatarStyles } from "./type.mjs";
 import AvatarGroup from "./AvatarGroup/index.mjs";
 import { ReactNode, RefAttributes } from "react";
 //#region src/Avatar/index.d.ts
@@ -8,5 +8,5 @@ interface IAvatar {
 }
 declare const Avatar: IAvatar;
 //#endregion
-export { AvatarGroup, type AvatarGroupItemType, type AvatarGroupProps, type AvatarProps, Avatar as default };
+export { type AvatarClassNames, AvatarGroup, type AvatarGroupItemType, type AvatarGroupProps, type AvatarProps, type AvatarStyles, Avatar as default };
 //# sourceMappingURL=index.d.mts.map