@lobehub/ui 4.9.1 → 4.9.3

package/es/Accordion/Accordion.d.mts

@@ -1,8 +1,8 @@
 import { AccordionProps } from "./type.mjs";
-import * as react15 from "react";
+import * as react72 from "react";
 
 //#region src/Accordion/Accordion.d.ts
-declare const Accordion: react15.NamedExoticComponent<AccordionProps>;
+declare const Accordion: react72.NamedExoticComponent<AccordionProps>;
 //#endregion
 export { Accordion };
 //# sourceMappingURL=Accordion.d.mts.map

package/es/Accordion/AccordionItem.d.mts

@@ -1,8 +1,8 @@
 import { AccordionItemProps } from "./type.mjs";
-import * as react14 from "react";
+import * as react73 from "react";
 
 //#region src/Accordion/AccordionItem.d.ts
-declare const AccordionItem: react14.NamedExoticComponent<AccordionItemProps>;
+declare const AccordionItem: react73.NamedExoticComponent<AccordionItemProps>;
 //#endregion
 export { AccordionItem };
 //# sourceMappingURL=AccordionItem.d.mts.map

package/es/ActionIcon/ActionIcon.d.mts

@@ -1,8 +1,8 @@
 import { ActionIconProps } from "./type.mjs";
-import * as react1 from "react";
+import * as react71 from "react";
 
 //#region src/ActionIcon/ActionIcon.d.ts
-declare const ActionIcon: react1.NamedExoticComponent<ActionIconProps>;
+declare const ActionIcon: react71.NamedExoticComponent<ActionIconProps>;
 //#endregion
 export { ActionIcon };
 //# sourceMappingURL=ActionIcon.d.mts.map

package/es/ActionIconGroup/ActionIconGroup.mjs

@@ -57,6 +57,7 @@ const ActionIconGroup = ({ variant = "filled", disabled, shadow, glass, actionIc
 			}, key);
 		}), menu && /* @__PURE__ */ jsx(DropdownMenu_default, {
 			items: menuItems,
+			nativeButton: false,
 			children: /* @__PURE__ */ jsx(ActionIcon_default, {
 				disabled,
 				icon: MoreHorizontal,

package/es/ActionIconGroup/ActionIconGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionIconGroup.mjs","names":["ActionIconGroup: FC<ActionIconGroupProps>","TooltipGroup","Center","ActionIcon","DropdownMenu"],"sources":["../../src/ActionIconGroup/ActionIconGroup.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { MoreHorizontal } from 'lucide-react';\nimport { type FC, useMemo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport DropdownMenu from '@/DropdownMenu';\nimport { Center } from '@/Flex';\nimport { TooltipGroup } from '@/Tooltip';\n\nimport { variants } from './style';\nimport type { ActionIconGroupProps } from './type';\n\nconst ActionIconGroup: FC<ActionIconGroupProps> = ({\n  variant = 'filled',\n  disabled,\n  shadow,\n  glass,\n  actionIconProps,\n  items = [],\n  horizontal = true,\n  menu,\n  onActionClick,\n  className,\n  size = 'small',\n  ref,\n  ...rest\n}) => {\n  const tooltipPlacement = useMemo(\n    () => (actionIconProps?.tooltipProps?.placement || horizontal ? 'top' : 'right'),\n    [actionIconProps, horizontal],\n  );\n\n  const menuItems = useMemo(() => {\n    const rawItems = typeof menu === 'function' ? menu() : menu;\n    if (!rawItems) return [];\n    return rawItems.map((item) => ({\n      ...(item as any),\n      onClick: (info: any) => {\n        (item as any)?.onClick?.(info);\n        onActionClick?.(info);\n      },\n    }));\n  }, [menu, onActionClick]);\n\n  return (\n    <TooltipGroup>\n      <Center\n        className={cx(variants({ disabled, glass, shadow, variant }), className)}\n        horizontal={horizontal}\n        padding={2}\n        ref={ref}\n        {...rest}\n      >\n        {items?.length > 0 &&\n          items.map((item) => {\n            const { icon, key, label, onClick, danger, loading, ...itemRest } = item;\n            return (\n              <ActionIcon\n                danger={danger}\n                icon={icon}\n                key={key}\n                loading={loading}\n                onClick={(e) => {\n                  onActionClick?.({\n                    domEvent: e,\n                    key: String(key),\n                    keyPath: [String(key)],\n                  });\n                  onClick?.(e as any);\n                }}\n                size={size}\n                title={label}\n                tooltipProps={{\n                  placement: tooltipPlacement,\n                }}\n                {...actionIconProps}\n                disabled={disabled || loading || itemRest?.disabled}\n              />\n            );\n          })}\n        {menu && (\n          <DropdownMenu items={menuItems}>\n            <ActionIcon\n              disabled={disabled}\n              icon={MoreHorizontal}\n              key=\"more\"\n              size={size}\n              {...actionIconProps}\n              tooltipProps={{\n                placement: tooltipPlacement,\n                ...actionIconProps?.tooltipProps,\n              }}\n            />\n          </DropdownMenu>\n        )}\n      </Center>\n    </TooltipGroup>\n  );\n};\n\nActionIconGroup.displayName = 'ActionIconGroup';\n\nexport default ActionIconGroup;\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAMA,mBAA6C,EACjD,UAAU,UACV,UACA,QACA,OACA,iBACA,QAAQ,EAAE,EACV,aAAa,MACb,MACA,eACA,WACA,OAAO,SACP,KACA,GAAG,WACC;CACJ,MAAM,mBAAmB,cAChB,iBAAiB,cAAc,aAAa,aAAa,QAAQ,SACxE,CAAC,iBAAiB,WAAW,CAC9B;CAED,MAAM,YAAY,cAAc;EAC9B,MAAM,WAAW,OAAO,SAAS,aAAa,MAAM,GAAG;AACvD,MAAI,CAAC,SAAU,QAAO,EAAE;AACxB,SAAO,SAAS,KAAK,UAAU;GAC7B,GAAI;GACJ,UAAU,SAAc;AACtB,IAAC,MAAc,UAAU,KAAK;AAC9B,oBAAgB,KAAK;;GAExB,EAAE;IACF,CAAC,MAAM,cAAc,CAAC;AAEzB,QACE,oBAACC,kCACC,qBAACC;EACC,WAAW,GAAG,SAAS;GAAE;GAAU;GAAO;GAAQ;GAAS,CAAC,EAAE,UAAU;EAC5D;EACZ,SAAS;EACJ;EACL,GAAI;aAEH,OAAO,SAAS,KACf,MAAM,KAAK,SAAS;GAClB,MAAM,EAAE,MAAM,KAAK,OAAO,SAAS,QAAQ,SAAS,GAAG,aAAa;AACpE,UACE,oBAACC;IACS;IACF;IAEG;IACT,UAAU,MAAM;AACd,qBAAgB;MACd,UAAU;MACV,KAAK,OAAO,IAAI;MAChB,SAAS,CAAC,OAAO,IAAI,CAAC;MACvB,CAAC;AACF,eAAU,EAAS;;IAEf;IACN,OAAO;IACP,cAAc,EACZ,WAAW,kBACZ;IACD,GAAI;IACJ,UAAU,YAAY,WAAW,UAAU;MAhBtC,IAiBL;IAEJ,EACH,QACC,oBAACC;GAAa,OAAO;aACnB,oBAACD;IACW;IACV,MAAM;IAEA;IACN,GAAI;IACJ,cAAc;KACZ,WAAW;KACX,GAAG,iBAAiB;KACrB;MANG,OAOJ;IACW;GAEV,GACI;;AAInB,gBAAgB,cAAc;AAE9B,8BAAe"}
+{"version":3,"file":"ActionIconGroup.mjs","names":["ActionIconGroup: FC<ActionIconGroupProps>","TooltipGroup","Center","ActionIcon","DropdownMenu"],"sources":["../../src/ActionIconGroup/ActionIconGroup.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { MoreHorizontal } from 'lucide-react';\nimport { type FC, useMemo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport DropdownMenu from '@/DropdownMenu';\nimport { Center } from '@/Flex';\nimport { TooltipGroup } from '@/Tooltip';\n\nimport { variants } from './style';\nimport type { ActionIconGroupProps } from './type';\n\nconst ActionIconGroup: FC<ActionIconGroupProps> = ({\n  variant = 'filled',\n  disabled,\n  shadow,\n  glass,\n  actionIconProps,\n  items = [],\n  horizontal = true,\n  menu,\n  onActionClick,\n  className,\n  size = 'small',\n  ref,\n  ...rest\n}) => {\n  const tooltipPlacement = useMemo(\n    () => (actionIconProps?.tooltipProps?.placement || horizontal ? 'top' : 'right'),\n    [actionIconProps, horizontal],\n  );\n\n  const menuItems = useMemo(() => {\n    const rawItems = typeof menu === 'function' ? menu() : menu;\n    if (!rawItems) return [];\n    return rawItems.map((item) => ({\n      ...(item as any),\n      onClick: (info: any) => {\n        (item as any)?.onClick?.(info);\n        onActionClick?.(info);\n      },\n    }));\n  }, [menu, onActionClick]);\n\n  return (\n    <TooltipGroup>\n      <Center\n        className={cx(variants({ disabled, glass, shadow, variant }), className)}\n        horizontal={horizontal}\n        padding={2}\n        ref={ref}\n        {...rest}\n      >\n        {items?.length > 0 &&\n          items.map((item) => {\n            const { icon, key, label, onClick, danger, loading, ...itemRest } = item;\n            return (\n              <ActionIcon\n                danger={danger}\n                icon={icon}\n                key={key}\n                loading={loading}\n                onClick={(e) => {\n                  onActionClick?.({\n                    domEvent: e,\n                    key: String(key),\n                    keyPath: [String(key)],\n                  });\n                  onClick?.(e as any);\n                }}\n                size={size}\n                title={label}\n                tooltipProps={{\n                  placement: tooltipPlacement,\n                }}\n                {...actionIconProps}\n                disabled={disabled || loading || itemRest?.disabled}\n              />\n            );\n          })}\n        {menu && (\n          <DropdownMenu items={menuItems} nativeButton={false}>\n            <ActionIcon\n              disabled={disabled}\n              icon={MoreHorizontal}\n              key=\"more\"\n              size={size}\n              {...actionIconProps}\n              tooltipProps={{\n                placement: tooltipPlacement,\n                ...actionIconProps?.tooltipProps,\n              }}\n            />\n          </DropdownMenu>\n        )}\n      </Center>\n    </TooltipGroup>\n  );\n};\n\nActionIconGroup.displayName = 'ActionIconGroup';\n\nexport default ActionIconGroup;\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAMA,mBAA6C,EACjD,UAAU,UACV,UACA,QACA,OACA,iBACA,QAAQ,EAAE,EACV,aAAa,MACb,MACA,eACA,WACA,OAAO,SACP,KACA,GAAG,WACC;CACJ,MAAM,mBAAmB,cAChB,iBAAiB,cAAc,aAAa,aAAa,QAAQ,SACxE,CAAC,iBAAiB,WAAW,CAC9B;CAED,MAAM,YAAY,cAAc;EAC9B,MAAM,WAAW,OAAO,SAAS,aAAa,MAAM,GAAG;AACvD,MAAI,CAAC,SAAU,QAAO,EAAE;AACxB,SAAO,SAAS,KAAK,UAAU;GAC7B,GAAI;GACJ,UAAU,SAAc;AACtB,IAAC,MAAc,UAAU,KAAK;AAC9B,oBAAgB,KAAK;;GAExB,EAAE;IACF,CAAC,MAAM,cAAc,CAAC;AAEzB,QACE,oBAACC,kCACC,qBAACC;EACC,WAAW,GAAG,SAAS;GAAE;GAAU;GAAO;GAAQ;GAAS,CAAC,EAAE,UAAU;EAC5D;EACZ,SAAS;EACJ;EACL,GAAI;aAEH,OAAO,SAAS,KACf,MAAM,KAAK,SAAS;GAClB,MAAM,EAAE,MAAM,KAAK,OAAO,SAAS,QAAQ,SAAS,GAAG,aAAa;AACpE,UACE,oBAACC;IACS;IACF;IAEG;IACT,UAAU,MAAM;AACd,qBAAgB;MACd,UAAU;MACV,KAAK,OAAO,IAAI;MAChB,SAAS,CAAC,OAAO,IAAI,CAAC;MACvB,CAAC;AACF,eAAU,EAAS;;IAEf;IACN,OAAO;IACP,cAAc,EACZ,WAAW,kBACZ;IACD,GAAI;IACJ,UAAU,YAAY,WAAW,UAAU;MAhBtC,IAiBL;IAEJ,EACH,QACC,oBAACC;GAAa,OAAO;GAAW,cAAc;aAC5C,oBAACD;IACW;IACV,MAAM;IAEA;IACN,GAAI;IACJ,cAAc;KACZ,WAAW;KACX,GAAG,iBAAiB;KACrB;MANG,OAOJ;IACW;GAEV,GACI;;AAInB,gBAAgB,cAAc;AAE9B,8BAAe"}

package/es/Alert/Alert.d.mts

@@ -1,8 +1,8 @@
 import { AlertProps } from "./type.mjs";
-import * as react5 from "react";
+import * as react68 from "react";
 
 //#region src/Alert/Alert.d.ts
-declare const Alert: react5.NamedExoticComponent<AlertProps>;
+declare const Alert: react68.NamedExoticComponent<AlertProps>;
 //#endregion
 export { Alert };
 //# sourceMappingURL=Alert.d.mts.map

package/es/AutoComplete/Select.d.mts

@@ -1,8 +1,8 @@
 import { AutoCompleteProps } from "./type.mjs";
-import * as react3 from "react";
+import * as react69 from "react";
 
 //#region src/AutoComplete/Select.d.ts
-declare const AutoComplete: react3.NamedExoticComponent<AutoCompleteProps>;
+declare const AutoComplete: react69.NamedExoticComponent<AutoCompleteProps>;
 //#endregion
 export { AutoComplete };
 //# sourceMappingURL=Select.d.mts.map

package/es/Avatar/Avatar.mjs

@@ -2,14 +2,15 @@
 
 import Center_default from "../Flex/Center.mjs";
 import Icon_default from "../Icon/Icon.mjs";
+import { safeReadableColor } from "../utils/safeReadableColor.mjs";
 import Img_default from "../Img/index.mjs";
 import FluentEmoji_default from "../FluentEmoji/FluentEmoji.mjs";
 import { styles, variants } from "./style.mjs";
-import { isValidElement, memo, useMemo } from "react";
+import { calculateEmojiSize, formatAvatarText, getActualColorForReadable, hasValidBackground, isDefaultAntAvatar } from "./utils.mjs";
+import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar } from "antd";
 import { cssVar, cx, useTheme } from "antd-style";
-import { readableColor } from "polished";
 import { Loader2 } from "lucide-react";
 import { getEmoji } from "@lobehub/fluent-emoji";
 
@@ -17,33 +18,34 @@ import { getEmoji } from "@lobehub/fluent-emoji";
 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 theme = useTheme();
 	const isStringAvatar = typeof avatar === "string";
-	const isDefaultAntAvatar = useMemo(() => Boolean(avatar && ([
-		"/",
-		"http",
-		"data:"
-	].some((index) => isStringAvatar && avatar.startsWith(index)) || isValidElement(avatar))), [avatar, isStringAvatar]);
-	const emoji = useMemo(() => avatar && !isDefaultAntAvatar && isStringAvatar && getEmoji(avatar), [
+	const isDefaultAntAvatar$1 = useMemo(() => isDefaultAntAvatar(avatar), [avatar]);
+	const emoji = useMemo(() => avatar && !isDefaultAntAvatar$1 && isStringAvatar && getEmoji(avatar), [
 		avatar,
 		isStringAvatar,
-		isDefaultAntAvatar
+		isDefaultAntAvatar$1
 	]);
-	const text = String(isDefaultAntAvatar ? title : avatar);
+	const text = String(isDefaultAntAvatar$1 ? title : avatar);
 	const imgAlt = alt || title || "avatar";
-	const defualtAvatar = typeof avatar === "string" ? /* @__PURE__ */ jsx(Img_default, {
+	const defualtAvatar = useMemo(() => typeof avatar === "string" ? /* @__PURE__ */ jsx(Img_default, {
 		alt: imgAlt,
 		height: size,
 		loading: "lazy",
 		src: avatar,
 		unoptimized,
 		width: size
-	}) : avatar;
-	const hasBackground = background && background !== "transparent" && background !== "rgba(0,0,0,0)" && background !== null;
+	}) : avatar, [
+		avatar,
+		imgAlt,
+		size,
+		unoptimized
+	]);
+	const hasBackground = hasValidBackground(background);
 	const customAvatar = useMemo(() => emoji ? /* @__PURE__ */ jsx(FluentEmoji_default, {
 		emoji,
-		size: emojiScaleWithBackground ? hasBackground ? size * .85 : size : size * .85,
+		size: calculateEmojiSize(size, hasBackground, emojiScaleWithBackground),
 		type: animation ? "anim" : "3d",
 		unoptimized
-	}) : sliceText ? (text || title)?.toUpperCase().slice(0, 2) : (text || title)?.toUpperCase(), [
+	}) : formatAvatarText(text || title, sliceText), [
 		animation,
 		emoji,
 		hasBackground,
@@ -54,11 +56,27 @@ const Avatar$1 = memo(({ bordered, className, avatar, title, animation, bordered
 		unoptimized,
 		emojiScaleWithBackground
 	]);
-	const actualColorForReadable = useMemo(() => {
-		const bgColor = background || theme.colorBorder;
-		if (typeof bgColor === "string" && bgColor.startsWith("var(")) return theme.colorBorder;
-		return bgColor;
-	}, [background, theme.colorBorder]);
+	const actualColorForReadable = useMemo(() => getActualColorForReadable(background, theme.colorBorder), [background, theme.colorBorder]);
+	const avatarStyle = useMemo(() => ({
+		backgroundColor: isDefaultAntAvatar$1 || !!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(actualColorForReadable),
+		cursor: rest?.onClick ? "pointer" : void 0,
+		fontSize: size * (emoji ? .7 : .5),
+		...style
+	}), [
+		isDefaultAntAvatar$1,
+		emoji,
+		background,
+		shape,
+		size,
+		bordered,
+		borderedColor,
+		actualColorForReadable,
+		rest?.onClick,
+		style
+	]);
 	return /* @__PURE__ */ jsxs(Avatar, {
 		alt: imgAlt,
 		className: cx(variants({
@@ -69,16 +87,8 @@ const Avatar$1 = memo(({ bordered, className, avatar, title, animation, bordered
 		ref,
 		shape,
 		size,
-		src: isDefaultAntAvatar ? defualtAvatar : void 0,
-		style: {
-			background: isDefaultAntAvatar || !!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: readableColor(actualColorForReadable),
-			cursor: rest?.onClick ? "pointer" : void 0,
-			fontSize: size * (emoji ? .7 : .5),
-			...style
-		},
+		src: isDefaultAntAvatar$1 ? defualtAvatar : void 0,
+		style: avatarStyle,
 		...rest,
 		children: [loading && /* @__PURE__ */ jsx(Center_default, {
 			className: styles.loading,
@@ -88,7 +98,7 @@ const Avatar$1 = memo(({ bordered, className, avatar, title, animation, bordered
 				icon: Loader2,
 				spin: true
 			})
-		}), !isDefaultAntAvatar && customAvatar]
+		}), !isDefaultAntAvatar$1 && customAvatar]
 	});
 });
 Avatar$1.displayName = "Avatar";

package/es/Avatar/Avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","names":["Avatar","Img","FluentEmoji","AntAvatar","Center","Icon"],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["'use client';\n\nimport { getEmoji } from '@lobehub/fluent-emoji';\nimport { Avatar as AntAvatar } from 'antd';\nimport { cssVar, cx, useTheme } from 'antd-style';\nimport { Loader2 } from 'lucide-react';\nimport { readableColor } from 'polished';\nimport { isValidElement, memo, useMemo } from 'react';\n\nimport { Center } from '@/Flex';\nimport FluentEmoji from '@/FluentEmoji';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\n\nimport { styles, variants } from './style';\nimport type { AvatarProps } from './type';\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 theme = useTheme();\n    const isStringAvatar = typeof avatar === 'string';\n\n    const isDefaultAntAvatar = useMemo(\n      () =>\n        Boolean(\n          avatar &&\n          (['/', 'http', 'data:'].some((index) => isStringAvatar && avatar.startsWith(index)) ||\n            isValidElement(avatar)),\n        ),\n      [avatar, isStringAvatar],\n    );\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 defualtAvatar =\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        />\n      ) : (\n        avatar\n      );\n\n    const hasBackground =\n      background &&\n      background !== 'transparent' &&\n      background !== 'rgba(0,0,0,0)' &&\n      background !== null;\n\n    const customAvatar = useMemo(\n      () =>\n        emoji ? (\n          <FluentEmoji\n            emoji={emoji}\n            size={emojiScaleWithBackground ? (hasBackground ? size * 0.85 : size) : size * 0.85}\n            type={animation ? 'anim' : '3d'}\n            unoptimized={unoptimized}\n          />\n        ) : sliceText ? (\n          (text || title)?.toUpperCase().slice(0, 2)\n        ) : (\n          (text || title)?.toUpperCase()\n        ),\n      [\n        animation,\n        emoji,\n        hasBackground,\n        size,\n        sliceText,\n        text,\n        title,\n        unoptimized,\n        emojiScaleWithBackground,\n      ],\n    );\n\n    // Get actual color value for readableColor (CSS variables can't be parsed)\n    const actualColorForReadable = useMemo(() => {\n      const bgColor = background || theme.colorBorder;\n      // If background is a CSS variable, use theme.colorBorder as fallback\n      if (typeof bgColor === 'string' && bgColor.startsWith('var(')) {\n        return theme.colorBorder;\n      }\n      return bgColor;\n    }, [background, theme.colorBorder]);\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 ? defualtAvatar : undefined}\n        style={{\n          background: isDefaultAntAvatar || !!emoji ? background : 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: readableColor(actualColorForReadable),\n          cursor: rest?.onClick ? 'pointer' : undefined,\n          fontSize: size * (emoji ? 0.7 : 0.5),\n          ...style,\n        }}\n        {...rest}\n      >\n        {loading && (\n          <Center className={styles.loading} height={'100%'} width={'100%'}>\n            <Icon icon={Loader2} spin />\n          </Center>\n        )}\n        {!isDefaultAntAvatar && customAvatar}\n      </AntAvatar>\n    );\n  },\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,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,QAAQ,UAAU;CACxB,MAAM,iBAAiB,OAAO,WAAW;CAEzC,MAAM,qBAAqB,cAEvB,QACE,WACC;EAAC;EAAK;EAAQ;EAAQ,CAAC,MAAM,UAAU,kBAAkB,OAAO,WAAW,MAAM,CAAC,IACjF,eAAe,OAAO,EACzB,EACH,CAAC,QAAQ,eAAe,CACzB;CAED,MAAM,QAAQ,cACN,UAAU,CAAC,sBAAsB,kBAAkB,SAAS,OAAO,EACzE;EAAC;EAAQ;EAAgB;EAAmB,CAC7C;CAED,MAAM,OAAO,OAAO,qBAAqB,QAAQ,OAAO;CAExD,MAAM,SAAS,OAAO,SAAS;CAE/B,MAAM,gBACJ,OAAO,WAAW,WAChB,oBAACC;EACC,KAAK;EACL,QAAQ;EACR,SAAS;EACT,KAAK;EACQ;EACb,OAAO;GACP,GAEF;CAGJ,MAAM,gBACJ,cACA,eAAe,iBACf,eAAe,mBACf,eAAe;CAEjB,MAAM,eAAe,cAEjB,QACE,oBAACC;EACQ;EACP,MAAM,2BAA4B,gBAAgB,OAAO,MAAO,OAAQ,OAAO;EAC/E,MAAM,YAAY,SAAS;EACd;GACb,GACA,aACD,QAAQ,QAAQ,aAAa,CAAC,MAAM,GAAG,EAAE,IAEzC,QAAQ,QAAQ,aAAa,EAElC;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAGD,MAAM,yBAAyB,cAAc;EAC3C,MAAM,UAAU,cAAc,MAAM;AAEpC,MAAI,OAAO,YAAY,YAAY,QAAQ,WAAW,OAAO,CAC3D,QAAO,MAAM;AAEf,SAAO;IACN,CAAC,YAAY,MAAM,YAAY,CAAC;AAEnC,QACE,qBAACC;EACC,KAAK;EACL,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAS,CAAC,EAAE,UAAU;EACvD,WAAW;EACN;EACE;EACD;EACN,KAAK,qBAAqB,gBAAgB;EAC1C,OAAO;GACL,YAAY,sBAAsB,CAAC,CAAC,QAAQ,aAAa,cAAc,OAAO;GAC9E,cAAc,UAAU,YAAY,QAAQ,OAAO,KAAK,QAAQ;GAChE,WAAW,WACP,GAAG,OAAO,cAAc,cAAc,iBAAiB,OAAO,kBAAkB,cAChF;GACJ,OAAO,cAAc,uBAAuB;GAC5C,QAAQ,MAAM,UAAU,YAAY;GACpC,UAAU,QAAQ,QAAQ,KAAM;GAChC,GAAG;GACJ;EACD,GAAI;aAEH,WACC,oBAACC;GAAO,WAAW,OAAO;GAAS,QAAQ;GAAQ,OAAO;aACxD,oBAACC;IAAK,MAAM;IAAS;KAAO;IACrB,EAEV,CAAC,sBAAsB;GACd;EAGjB;AAED,SAAO,cAAc;AAErB,qBAAeL"}
+{"version":3,"file":"Avatar.mjs","names":["Avatar","isDefaultAntAvatar","checkIsDefaultAntAvatar","Img","FluentEmoji","AntAvatar","Center","Icon"],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["'use client';\n\nimport { getEmoji } from '@lobehub/fluent-emoji';\nimport { Avatar as AntAvatar } from 'antd';\nimport { cssVar, cx, useTheme } from 'antd-style';\nimport { Loader2 } from 'lucide-react';\nimport { memo, useMemo } 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  isDefaultAntAvatar as checkIsDefaultAntAvatar,\n  formatAvatarText,\n  getActualColorForReadable,\n  hasValidBackground,\n} from './utils';\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 theme = useTheme();\n    const isStringAvatar = typeof avatar === 'string';\n\n    const isDefaultAntAvatar = useMemo(() => checkIsDefaultAntAvatar(avatar), [avatar]);\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 defualtAvatar = 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          />\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    // Get actual color value for readableColor (CSS variables can't be parsed)\n    const actualColorForReadable = useMemo(\n      () => getActualColorForReadable(background, theme.colorBorder),\n      [background, theme.colorBorder],\n    );\n\n    const avatarStyle = useMemo(\n      () => ({\n        backgroundColor:\n          isDefaultAntAvatar || !!emoji ? background : 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(actualColorForReadable),\n        cursor: rest?.onClick ? 'pointer' : undefined,\n        fontSize: size * (emoji ? 0.7 : 0.5),\n        ...style,\n      }),\n      [\n        isDefaultAntAvatar,\n        emoji,\n        background,\n        shape,\n        size,\n        bordered,\n        borderedColor,\n        actualColorForReadable,\n        rest?.onClick,\n        style,\n      ],\n    );\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 ? defualtAvatar : undefined}\n        style={avatarStyle}\n        {...rest}\n      >\n        {loading && (\n          <Center className={styles.loading} height={'100%'} width={'100%'}>\n            <Icon icon={Loader2} spin />\n          </Center>\n        )}\n        {!isDefaultAntAvatar && customAvatar}\n      </AntAvatar>\n    );\n  },\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":";;;;;;;;;;;;;;;;;AAwBA,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,QAAQ,UAAU;CACxB,MAAM,iBAAiB,OAAO,WAAW;CAEzC,MAAMC,uBAAqB,cAAcC,mBAAwB,OAAO,EAAE,CAAC,OAAO,CAAC;CAEnF,MAAM,QAAQ,cACN,UAAU,CAACD,wBAAsB,kBAAkB,SAAS,OAAO,EACzE;EAAC;EAAQ;EAAgBA;EAAmB,CAC7C;CAED,MAAM,OAAO,OAAOA,uBAAqB,QAAQ,OAAO;CAExD,MAAM,SAAS,OAAO,SAAS;CAE/B,MAAM,gBAAgB,cAElB,OAAO,WAAW,WAChB,oBAACE;EACC,KAAK;EACL,QAAQ;EACR,SAAS;EACT,KAAK;EACQ;EACb,OAAO;GACP,GAEF,QAEJ;EAAC;EAAQ;EAAQ;EAAM;EAAY,CACpC;CAED,MAAM,gBAAgB,mBAAmB,WAAW;CAEpD,MAAM,eAAe,cAEjB,QACE,oBAACC;EACQ;EACP,MAAM,mBAAmB,MAAM,eAAe,yBAAyB;EACvE,MAAM,YAAY,SAAS;EACd;GACb,GAEF,iBAAiB,QAAQ,OAAO,UAAU,EAE9C;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAGD,MAAM,yBAAyB,cACvB,0BAA0B,YAAY,MAAM,YAAY,EAC9D,CAAC,YAAY,MAAM,YAAY,CAChC;CAED,MAAM,cAAc,eACX;EACL,iBACEH,wBAAsB,CAAC,CAAC,QAAQ,aAAa,cAAc,OAAO;EACpE,cAAc,UAAU,YAAY,QAAQ,OAAO,KAAK,QAAQ;EAChE,WAAW,WACP,GAAG,OAAO,cAAc,cAAc,iBAAiB,OAAO,kBAAkB,cAChF;EACJ,OAAO,kBAAkB,uBAAuB;EAChD,QAAQ,MAAM,UAAU,YAAY;EACpC,UAAU,QAAQ,QAAQ,KAAM;EAChC,GAAG;EACJ,GACD;EACEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAM;EACN;EACD,CACF;AAED,QACE,qBAACI;EACC,KAAK;EACL,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAS,CAAC,EAAE,UAAU;EACvD,WAAW;EACN;EACE;EACD;EACN,KAAKJ,uBAAqB,gBAAgB;EAC1C,OAAO;EACP,GAAI;aAEH,WACC,oBAACK;GAAO,WAAW,OAAO;GAAS,QAAQ;GAAQ,OAAO;aACxD,oBAACC;IAAK,MAAM;IAAS;KAAO;IACrB,EAEV,CAACN,wBAAsB;GACd;EAGjB;AAED,SAAO,cAAc;AAErB,qBAAeD"}

package/es/Avatar/AvatarGroup/index.d.mts

@@ -1,8 +1,8 @@
 import { AvatarGroupProps } from "../type.mjs";
-import * as react4 from "react";
+import * as react67 from "react";
 
 //#region src/Avatar/AvatarGroup/index.d.ts
-declare const AvatarGroup: react4.NamedExoticComponent<AvatarGroupProps>;
+declare const AvatarGroup: react67.NamedExoticComponent<AvatarGroupProps>;
 //#endregion
 export { AvatarGroup };
 //# sourceMappingURL=index.d.mts.map

package/es/Avatar/utils.mjs

@@ -0,0 +1,50 @@
+import { isValidElement } from "react";
+
+//#region src/Avatar/utils.ts
+/**
+* 判断 avatar 是否是默认的 Ant Design Avatar 类型
+* (URL 路径或 React 元素)
+*/
+const isDefaultAntAvatar = (avatar) => {
+	if (!avatar) return false;
+	const isUrlOrDataUri = typeof avatar === "string" && [
+		"/",
+		"http",
+		"data:"
+	].some((prefix) => avatar.startsWith(prefix));
+	return Boolean(isUrlOrDataUri || isValidElement(avatar));
+};
+/**
+* 判断是否有有效的背景色
+*/
+const hasValidBackground = (background) => {
+	return Boolean(background && background !== "transparent" && background !== "rgba(0,0,0,0)" && background !== null);
+};
+/**
+* 获取用于可读性计算的实际颜色值
+* 如果是 CSS 变量，返回 fallback 值
+*/
+const getActualColorForReadable = (background, fallbackColor) => {
+	const bgColor = background || fallbackColor;
+	if (typeof bgColor === "string" && bgColor.startsWith("var(")) return fallbackColor;
+	return bgColor;
+};
+/**
+* 格式化头像文本（转大写并可选切片）
+*/
+const formatAvatarText = (text, sliceText) => {
+	if (!text) return "";
+	const upperText = text.toUpperCase();
+	return sliceText ? upperText.slice(0, 2) : upperText;
+};
+/**
+* 计算 emoji 大小
+*/
+const calculateEmojiSize = (size, hasBackground, emojiScaleWithBackground) => {
+	if (emojiScaleWithBackground) return hasBackground ? size * .85 : size;
+	return size * .85;
+};
+
+//#endregion
+export { calculateEmojiSize, formatAvatarText, getActualColorForReadable, hasValidBackground, isDefaultAntAvatar };
+//# sourceMappingURL=utils.mjs.map

package/es/Avatar/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../src/Avatar/utils.ts"],"sourcesContent":["import { type ReactNode, isValidElement } from 'react';\n\n/**\n * 判断 avatar 是否是默认的 Ant Design Avatar 类型\n * (URL 路径或 React 元素)\n */\nexport const isDefaultAntAvatar = (avatar: ReactNode): boolean => {\n  if (!avatar) return false;\n\n  const isStringAvatar = typeof avatar === 'string';\n  const isUrlOrDataUri =\n    isStringAvatar && ['/', 'http', 'data:'].some((prefix) => avatar.startsWith(prefix));\n\n  return Boolean(isUrlOrDataUri || isValidElement(avatar));\n};\n\n/**\n * 判断是否有有效的背景色\n */\nexport const hasValidBackground = (background?: string | null): boolean => {\n  return Boolean(\n    background &&\n    background !== 'transparent' &&\n    background !== 'rgba(0,0,0,0)' &&\n    background !== null,\n  );\n};\n\n/**\n * 获取用于可读性计算的实际颜色值\n * 如果是 CSS 变量，返回 fallback 值\n */\nexport const getActualColorForReadable = (\n  background: string | undefined,\n  fallbackColor: string,\n): string => {\n  const bgColor = background || fallbackColor;\n\n  // 如果背景是 CSS 变量，使用 fallback 颜色\n  if (typeof bgColor === 'string' && bgColor.startsWith('var(')) {\n    return fallbackColor;\n  }\n\n  return bgColor;\n};\n\n/**\n * 格式化头像文本（转大写并可选切片）\n */\nexport const formatAvatarText = (text: string | undefined, sliceText: boolean): string => {\n  if (!text) return '';\n\n  const upperText = text.toUpperCase();\n  return sliceText ? upperText.slice(0, 2) : upperText;\n};\n\n/**\n * 计算 emoji 大小\n */\nexport const calculateEmojiSize = (\n  size: number,\n  hasBackground: boolean,\n  emojiScaleWithBackground: boolean,\n): number => {\n  if (emojiScaleWithBackground) {\n    return hasBackground ? size * 0.85 : size;\n  }\n  return size * 0.85;\n};\n"],"mappings":";;;;;;;AAMA,MAAa,sBAAsB,WAA+B;AAChE,KAAI,CAAC,OAAQ,QAAO;CAGpB,MAAM,iBADiB,OAAO,WAAW,YAErB;EAAC;EAAK;EAAQ;EAAQ,CAAC,MAAM,WAAW,OAAO,WAAW,OAAO,CAAC;AAEtF,QAAO,QAAQ,kBAAkB,eAAe,OAAO,CAAC;;;;;AAM1D,MAAa,sBAAsB,eAAwC;AACzE,QAAO,QACL,cACA,eAAe,iBACf,eAAe,mBACf,eAAe,KAChB;;;;;;AAOH,MAAa,6BACX,YACA,kBACW;CACX,MAAM,UAAU,cAAc;AAG9B,KAAI,OAAO,YAAY,YAAY,QAAQ,WAAW,OAAO,CAC3D,QAAO;AAGT,QAAO;;;;;AAMT,MAAa,oBAAoB,MAA0B,cAA+B;AACxF,KAAI,CAAC,KAAM,QAAO;CAElB,MAAM,YAAY,KAAK,aAAa;AACpC,QAAO,YAAY,UAAU,MAAM,GAAG,EAAE,GAAG;;;;;AAM7C,MAAa,sBACX,MACA,eACA,6BACW;AACX,KAAI,yBACF,QAAO,gBAAgB,OAAO,MAAO;AAEvC,QAAO,OAAO"}

package/es/Burger/Burger.d.mts

@@ -1,8 +1,8 @@
 import { BurgerProps } from "./type.mjs";
-import * as react12 from "react";
+import * as react66 from "react";
 
 //#region src/Burger/Burger.d.ts
-declare const Burger: react12.NamedExoticComponent<BurgerProps>;
+declare const Burger: react66.NamedExoticComponent<BurgerProps>;
 //#endregion
 export { Burger };
 //# sourceMappingURL=Burger.d.mts.map

package/es/CodeEditor/CodeEditor.d.mts

@@ -1,8 +1,8 @@
 import { CodeEditorProps } from "./type.mjs";
-import * as react8 from "react";
+import * as react65 from "react";
 
 //#region src/CodeEditor/CodeEditor.d.ts
-declare const CodeEditor: react8.NamedExoticComponent<CodeEditorProps>;
+declare const CodeEditor: react65.NamedExoticComponent<CodeEditorProps>;
 //#endregion
 export { CodeEditor };
 //# sourceMappingURL=CodeEditor.d.mts.map

package/es/Collapse/Collapse.d.mts

@@ -1,8 +1,8 @@
 import { CollapseProps } from "./type.mjs";
-import * as react9 from "react";
+import * as react64 from "react";
 
 //#region src/Collapse/Collapse.d.ts
-declare const Collapse: react9.NamedExoticComponent<CollapseProps>;
+declare const Collapse: react64.NamedExoticComponent<CollapseProps>;
 //#endregion
 export { Collapse };
 //# sourceMappingURL=Collapse.d.mts.map

package/es/ColorSwatches/ColorSwatches.mjs

@@ -3,6 +3,7 @@
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import Center_default from "../Flex/Center.mjs";
 import Icon_default from "../Icon/Icon.mjs";
+import { safeReadableColor } from "../utils/safeReadableColor.mjs";
 import Tooltip_default from "../Tooltip/Tooltip.mjs";
 import { styles } from "./style.mjs";
 import { useMemo } from "react";
@@ -10,7 +11,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { ColorPicker } from "antd";
 import { cssVar, cx, useTheme } from "antd-style";
 import useMergeState from "use-merge-value";
-import { readableColor, rgba } from "polished";
+import { rgba } from "polished";
 import { CheckIcon } from "lucide-react";
 import chroma from "chroma-js";
 
@@ -55,7 +56,7 @@ const ColorSwatches = ({ enableColorPicker, enableColorSwatches = true, defaultV
 						borderRadius: shape === "circle" ? "50%" : cssVar.borderRadius
 					},
 					children: isActive && /* @__PURE__ */ jsx(Icon_default, {
-						color: rgba(readableColor(actualColorForReadable), .33),
+						color: rgba(safeReadableColor(actualColorForReadable), .33),
 						icon: CheckIcon,
 						size: {
 							size: 14,

package/es/ColorSwatches/ColorSwatches.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatches.mjs","names":["ColorSwatches: FC<ColorSwatchesProps>","Flexbox","Tooltip","Center","Icon"],"sources":["../../src/ColorSwatches/ColorSwatches.tsx"],"sourcesContent":["'use client';\n\nimport { ColorPicker } from 'antd';\nimport { cssVar, cx, useTheme } from 'antd-style';\nimport chroma from 'chroma-js';\nimport { CheckIcon } from 'lucide-react';\nimport { readableColor, rgba } from 'polished';\nimport { type FC, useMemo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Tooltip from '@/Tooltip';\n\nimport { styles } from './style';\nimport type { ColorSwatchesProps } from './type';\n\nconst ColorSwatches: FC<ColorSwatchesProps> = ({\n  enableColorPicker,\n  enableColorSwatches = true,\n  defaultValue,\n  value,\n  style,\n  colors,\n  onChange,\n  size = 24,\n  shape = 'circle',\n  texts,\n  ref,\n  ...rest\n}) => {\n  const theme = useTheme();\n  const [active, setActive] = useMergeState(defaultValue, {\n    defaultValue,\n    onChange,\n    value,\n  });\n\n  // Convert size prop to CSS variable\n  const cssVariables = useMemo<Record<string, string>>(\n    () => ({\n      '--color-swatches-size': `${size}px`,\n    }),\n    [size],\n  );\n\n  const isCustomActive = useMemo(\n    () => active && active !== cssVar.colorPrimary && !colors.some((c) => c.color === active),\n    [active, colors],\n  );\n\n  return (\n    <Flexbox\n      gap={6}\n      horizontal\n      ref={ref}\n      style={{\n        ...cssVariables,\n        flexWrap: 'wrap',\n        ...style,\n      }}\n      {...rest}\n    >\n      {enableColorSwatches &&\n        colors.map((c, i) => {\n          const color = c.color || theme.colorPrimary;\n          const isActive = (!active && !c.color) || color === active;\n          // Check if color is transparent or CSS variable (which chroma can't parse)\n          const isTransparent =\n            c.color === 'transparent' ||\n            (c.color &&\n              !c.color.startsWith('var(') &&\n              (() => {\n                try {\n                  return chroma(c.color).alpha() === 0;\n                } catch {\n                  return false;\n                }\n              })());\n          // Get actual color value for readableColor (CSS variables can't be parsed)\n          const actualColorForReadable = c.color?.startsWith('var(') ? theme.colorPrimary : color;\n          return (\n            <Tooltip key={c?.key || i} title={c.title}>\n              <Center\n                className={cx(\n                  styles.container,\n                  isTransparent && styles.transparent,\n                  isActive && styles.active,\n                )}\n                onClick={() => setActive(c.color || undefined)}\n                style={{\n                  background: isTransparent ? undefined : color,\n                  borderRadius: shape === 'circle' ? '50%' : cssVar.borderRadius,\n                }}\n              >\n                {isActive && (\n                  <Icon\n                    color={rgba(readableColor(actualColorForReadable), 0.33)}\n                    icon={CheckIcon}\n                    size={{ size: 14, strokeWidth: 4 }}\n                    style={{\n                      pointerEvents: 'none',\n                    }}\n                  />\n                )}\n              </Center>\n            </Tooltip>\n          );\n        })}\n      {enableColorPicker && (\n        <Tooltip title={texts?.custom || 'Custom'}>\n          <ColorPicker\n            arrow={false}\n            className={cx(\n              styles.picker,\n              enableColorSwatches && styles.conic,\n              isCustomActive && styles.active,\n            )}\n            defaultValue={cssVar.colorPrimary}\n            disabledAlpha\n            format={'hex'}\n            onChangeComplete={(c) => {\n              if (c.toHexString() === cssVar.colorPrimary) {\n                setActive('');\n              } else {\n                setActive(c.toHexString());\n              }\n            }}\n            presets={\n              enableColorSwatches\n                ? undefined\n                : [\n                    {\n                      colors: colors.map((c) => c.color),\n                      label: texts?.presets || 'Presets',\n                    },\n                  ]\n            }\n            style={{\n              borderRadius: shape === 'circle' ? '50%' : cssVar.borderRadius,\n            }}\n            value={enableColorSwatches ? undefined : active}\n          />\n        </Tooltip>\n      )}\n    </Flexbox>\n  );\n};\n\nColorSwatches.displayName = 'ColorSwatches';\n\nexport default ColorSwatches;\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,MAAMA,iBAAyC,EAC7C,mBACA,sBAAsB,MACtB,cACA,OACA,OACA,QACA,UACA,OAAO,IACP,QAAQ,UACR,OACA,KACA,GAAG,WACC;CACJ,MAAM,QAAQ,UAAU;CACxB,MAAM,CAAC,QAAQ,aAAa,cAAc,cAAc;EACtD;EACA;EACA;EACD,CAAC;CAGF,MAAM,eAAe,eACZ,EACL,yBAAyB,GAAG,KAAK,KAClC,GACD,CAAC,KAAK,CACP;CAED,MAAM,iBAAiB,cACf,UAAU,WAAW,OAAO,gBAAgB,CAAC,OAAO,MAAM,MAAM,EAAE,UAAU,OAAO,EACzF,CAAC,QAAQ,OAAO,CACjB;AAED,QACE,qBAACC;EACC,KAAK;EACL;EACK;EACL,OAAO;GACL,GAAG;GACH,UAAU;GACV,GAAG;GACJ;EACD,GAAI;aAEH,uBACC,OAAO,KAAK,GAAG,MAAM;GACnB,MAAM,QAAQ,EAAE,SAAS,MAAM;GAC/B,MAAM,WAAY,CAAC,UAAU,CAAC,EAAE,SAAU,UAAU;GAEpD,MAAM,gBACJ,EAAE,UAAU,iBACX,EAAE,SACD,CAAC,EAAE,MAAM,WAAW,OAAO,WACpB;AACL,QAAI;AACF,YAAO,OAAO,EAAE,MAAM,CAAC,OAAO,KAAK;YAC7B;AACN,YAAO;;OAEP;GAER,MAAM,yBAAyB,EAAE,OAAO,WAAW,OAAO,GAAG,MAAM,eAAe;AAClF,UACE,oBAACC;IAA0B,OAAO,EAAE;cAClC,oBAACC;KACC,WAAW,GACT,OAAO,WACP,iBAAiB,OAAO,aACxB,YAAY,OAAO,OACpB;KACD,eAAe,UAAU,EAAE,SAAS,OAAU;KAC9C,OAAO;MACL,YAAY,gBAAgB,SAAY;MACxC,cAAc,UAAU,WAAW,QAAQ,OAAO;MACnD;eAEA,YACC,oBAACC;MACC,OAAO,KAAK,cAAc,uBAAuB,EAAE,IAAK;MACxD,MAAM;MACN,MAAM;OAAE,MAAM;OAAI,aAAa;OAAG;MAClC,OAAO,EACL,eAAe,QAChB;OACD;MAEG;MAvBG,GAAG,OAAO,EAwBd;IAEZ,EACH,qBACC,oBAACF;GAAQ,OAAO,OAAO,UAAU;aAC/B,oBAAC;IACC,OAAO;IACP,WAAW,GACT,OAAO,QACP,uBAAuB,OAAO,OAC9B,kBAAkB,OAAO,OAC1B;IACD,cAAc,OAAO;IACrB;IACA,QAAQ;IACR,mBAAmB,MAAM;AACvB,SAAI,EAAE,aAAa,KAAK,OAAO,aAC7B,WAAU,GAAG;SAEb,WAAU,EAAE,aAAa,CAAC;;IAG9B,SACE,sBACI,SACA,CACE;KACE,QAAQ,OAAO,KAAK,MAAM,EAAE,MAAM;KAClC,OAAO,OAAO,WAAW;KAC1B,CACF;IAEP,OAAO,EACL,cAAc,UAAU,WAAW,QAAQ,OAAO,cACnD;IACD,OAAO,sBAAsB,SAAY;KACzC;IACM;GAEJ;;AAId,cAAc,cAAc;AAE5B,4BAAe"}
+{"version":3,"file":"ColorSwatches.mjs","names":["ColorSwatches: FC<ColorSwatchesProps>","Flexbox","Tooltip","Center","Icon"],"sources":["../../src/ColorSwatches/ColorSwatches.tsx"],"sourcesContent":["'use client';\n\nimport { ColorPicker } from 'antd';\nimport { cssVar, cx, useTheme } from 'antd-style';\nimport chroma from 'chroma-js';\nimport { CheckIcon } from 'lucide-react';\nimport { rgba } from 'polished';\nimport { type FC, useMemo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Tooltip from '@/Tooltip';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { styles } from './style';\nimport type { ColorSwatchesProps } from './type';\n\nconst ColorSwatches: FC<ColorSwatchesProps> = ({\n  enableColorPicker,\n  enableColorSwatches = true,\n  defaultValue,\n  value,\n  style,\n  colors,\n  onChange,\n  size = 24,\n  shape = 'circle',\n  texts,\n  ref,\n  ...rest\n}) => {\n  const theme = useTheme();\n  const [active, setActive] = useMergeState(defaultValue, {\n    defaultValue,\n    onChange,\n    value,\n  });\n\n  // Convert size prop to CSS variable\n  const cssVariables = useMemo<Record<string, string>>(\n    () => ({\n      '--color-swatches-size': `${size}px`,\n    }),\n    [size],\n  );\n\n  const isCustomActive = useMemo(\n    () => active && active !== cssVar.colorPrimary && !colors.some((c) => c.color === active),\n    [active, colors],\n  );\n\n  return (\n    <Flexbox\n      gap={6}\n      horizontal\n      ref={ref}\n      style={{\n        ...cssVariables,\n        flexWrap: 'wrap',\n        ...style,\n      }}\n      {...rest}\n    >\n      {enableColorSwatches &&\n        colors.map((c, i) => {\n          const color = c.color || theme.colorPrimary;\n          const isActive = (!active && !c.color) || color === active;\n          // Check if color is transparent or CSS variable (which chroma can't parse)\n          const isTransparent =\n            c.color === 'transparent' ||\n            (c.color &&\n              !c.color.startsWith('var(') &&\n              (() => {\n                try {\n                  return chroma(c.color).alpha() === 0;\n                } catch {\n                  return false;\n                }\n              })());\n          // Get actual color value for readableColor (CSS variables can't be parsed)\n          const actualColorForReadable = c.color?.startsWith('var(') ? theme.colorPrimary : color;\n          return (\n            <Tooltip key={c?.key || i} title={c.title}>\n              <Center\n                className={cx(\n                  styles.container,\n                  isTransparent && styles.transparent,\n                  isActive && styles.active,\n                )}\n                onClick={() => setActive(c.color || undefined)}\n                style={{\n                  background: isTransparent ? undefined : color,\n                  borderRadius: shape === 'circle' ? '50%' : cssVar.borderRadius,\n                }}\n              >\n                {isActive && (\n                  <Icon\n                    color={rgba(safeReadableColor(actualColorForReadable), 0.33)}\n                    icon={CheckIcon}\n                    size={{ size: 14, strokeWidth: 4 }}\n                    style={{\n                      pointerEvents: 'none',\n                    }}\n                  />\n                )}\n              </Center>\n            </Tooltip>\n          );\n        })}\n      {enableColorPicker && (\n        <Tooltip title={texts?.custom || 'Custom'}>\n          <ColorPicker\n            arrow={false}\n            className={cx(\n              styles.picker,\n              enableColorSwatches && styles.conic,\n              isCustomActive && styles.active,\n            )}\n            defaultValue={cssVar.colorPrimary}\n            disabledAlpha\n            format={'hex'}\n            onChangeComplete={(c) => {\n              if (c.toHexString() === cssVar.colorPrimary) {\n                setActive('');\n              } else {\n                setActive(c.toHexString());\n              }\n            }}\n            presets={\n              enableColorSwatches\n                ? undefined\n                : [\n                    {\n                      colors: colors.map((c) => c.color),\n                      label: texts?.presets || 'Presets',\n                    },\n                  ]\n            }\n            style={{\n              borderRadius: shape === 'circle' ? '50%' : cssVar.borderRadius,\n            }}\n            value={enableColorSwatches ? undefined : active}\n          />\n        </Tooltip>\n      )}\n    </Flexbox>\n  );\n};\n\nColorSwatches.displayName = 'ColorSwatches';\n\nexport default ColorSwatches;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,MAAMA,iBAAyC,EAC7C,mBACA,sBAAsB,MACtB,cACA,OACA,OACA,QACA,UACA,OAAO,IACP,QAAQ,UACR,OACA,KACA,GAAG,WACC;CACJ,MAAM,QAAQ,UAAU;CACxB,MAAM,CAAC,QAAQ,aAAa,cAAc,cAAc;EACtD;EACA;EACA;EACD,CAAC;CAGF,MAAM,eAAe,eACZ,EACL,yBAAyB,GAAG,KAAK,KAClC,GACD,CAAC,KAAK,CACP;CAED,MAAM,iBAAiB,cACf,UAAU,WAAW,OAAO,gBAAgB,CAAC,OAAO,MAAM,MAAM,EAAE,UAAU,OAAO,EACzF,CAAC,QAAQ,OAAO,CACjB;AAED,QACE,qBAACC;EACC,KAAK;EACL;EACK;EACL,OAAO;GACL,GAAG;GACH,UAAU;GACV,GAAG;GACJ;EACD,GAAI;aAEH,uBACC,OAAO,KAAK,GAAG,MAAM;GACnB,MAAM,QAAQ,EAAE,SAAS,MAAM;GAC/B,MAAM,WAAY,CAAC,UAAU,CAAC,EAAE,SAAU,UAAU;GAEpD,MAAM,gBACJ,EAAE,UAAU,iBACX,EAAE,SACD,CAAC,EAAE,MAAM,WAAW,OAAO,WACpB;AACL,QAAI;AACF,YAAO,OAAO,EAAE,MAAM,CAAC,OAAO,KAAK;YAC7B;AACN,YAAO;;OAEP;GAER,MAAM,yBAAyB,EAAE,OAAO,WAAW,OAAO,GAAG,MAAM,eAAe;AAClF,UACE,oBAACC;IAA0B,OAAO,EAAE;cAClC,oBAACC;KACC,WAAW,GACT,OAAO,WACP,iBAAiB,OAAO,aACxB,YAAY,OAAO,OACpB;KACD,eAAe,UAAU,EAAE,SAAS,OAAU;KAC9C,OAAO;MACL,YAAY,gBAAgB,SAAY;MACxC,cAAc,UAAU,WAAW,QAAQ,OAAO;MACnD;eAEA,YACC,oBAACC;MACC,OAAO,KAAK,kBAAkB,uBAAuB,EAAE,IAAK;MAC5D,MAAM;MACN,MAAM;OAAE,MAAM;OAAI,aAAa;OAAG;MAClC,OAAO,EACL,eAAe,QAChB;OACD;MAEG;MAvBG,GAAG,OAAO,EAwBd;IAEZ,EACH,qBACC,oBAACF;GAAQ,OAAO,OAAO,UAAU;aAC/B,oBAAC;IACC,OAAO;IACP,WAAW,GACT,OAAO,QACP,uBAAuB,OAAO,OAC9B,kBAAkB,OAAO,OAC1B;IACD,cAAc,OAAO;IACrB;IACA,QAAQ;IACR,mBAAmB,MAAM;AACvB,SAAI,EAAE,aAAa,KAAK,OAAO,aAC7B,WAAU,GAAG;SAEb,WAAU,EAAE,aAAa,CAAC;;IAG9B,SACE,sBACI,SACA,CACE;KACE,QAAQ,OAAO,KAAK,MAAM,EAAE,MAAM;KAClC,OAAO,OAAO,WAAW;KAC1B,CACF;IAEP,OAAO,EACL,cAAc,UAAU,WAAW,QAAQ,OAAO,cACnD;IACD,OAAO,sBAAsB,SAAY;KACzC;IACM;GAEJ;;AAId,cAAc,cAAc;AAE5B,4BAAe"}

package/es/ConfigProvider/index.d.mts

@@ -1,7 +1,7 @@
 import { MotionComponentType } from "../MotionProvider/index.mjs";
 import { TranslationResourcesInput } from "../i18n/types.mjs";
 import { CDN, CdnApi } from "../utils/genCdnUrl.mjs";
-import * as react66 from "react";
+import * as react0 from "react";
 import { ElementType, ReactNode } from "react";
 
 //#region src/ConfigProvider/index.d.ts
@@ -19,7 +19,7 @@ interface ConfigProviderProps {
   motion: MotionComponentType;
   resources?: TranslationResourcesInput;
 }
-declare const ConfigProvider: react66.NamedExoticComponent<ConfigProviderProps>;
+declare const ConfigProvider: react0.NamedExoticComponent<ConfigProviderProps>;
 type CdnFn = ({
   pkg,
   version,

package/es/ContextMenu/ContextMenuHost.d.mts

@@ -1,8 +1,8 @@
-import * as react105 from "react";
+import * as react109 from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/ContextMenu/ContextMenuHost.d.ts
-declare const ContextMenuHost: react105.MemoExoticComponent<() => react_jsx_runtime0.JSX.Element | null>;
+declare const ContextMenuHost: react109.MemoExoticComponent<() => react_jsx_runtime0.JSX.Element | null>;
 //#endregion
 export { ContextMenuHost };
 //# sourceMappingURL=ContextMenuHost.d.mts.map

package/es/CopyButton/CopyButton.d.mts

@@ -1,8 +1,8 @@
 import { CopyButtonProps } from "./type.mjs";
-import * as react0 from "react";
+import * as react62 from "react";
 
 //#region src/CopyButton/CopyButton.d.ts
-declare const CopyButton: react0.NamedExoticComponent<CopyButtonProps>;
+declare const CopyButton: react62.NamedExoticComponent<CopyButtonProps>;
 //#endregion
 export { CopyButton };
 //# sourceMappingURL=CopyButton.d.mts.map

package/es/DatePicker/DatePicker.d.mts

@@ -1,8 +1,8 @@
 import { DatePickerProps } from "./type.mjs";
-import * as react2 from "react";
+import * as react63 from "react";
 
 //#region src/DatePicker/DatePicker.d.ts
-declare const DatePicker: react2.NamedExoticComponent<DatePickerProps>;
+declare const DatePicker: react63.NamedExoticComponent<DatePickerProps>;
 //#endregion
 export { DatePicker };
 //# sourceMappingURL=DatePicker.d.mts.map

package/es/DraggablePanel/components/DraggablePanelBody.d.mts

@@ -1,9 +1,9 @@
 import { DivProps } from "../../types/index.mjs";
-import * as react30 from "react";
+import * as react58 from "react";
 
 //#region src/DraggablePanel/components/DraggablePanelBody.d.ts
 type DraggablePanelBodyProps = DivProps;
-declare const DraggablePanelBody: react30.NamedExoticComponent<DivProps>;
+declare const DraggablePanelBody: react58.NamedExoticComponent<DivProps>;
 //#endregion
 export { DraggablePanelBody, DraggablePanelBodyProps };
 //# sourceMappingURL=DraggablePanelBody.d.mts.map

package/es/DraggablePanel/components/DraggablePanelContainer.d.mts

@@ -1,9 +1,9 @@
 import { DivProps } from "../../types/index.mjs";
-import * as react31 from "react";
+import * as react59 from "react";
 
 //#region src/DraggablePanel/components/DraggablePanelContainer.d.ts
 type DraggablePanelContainerProps = DivProps;
-declare const DraggablePanelContainer: react31.NamedExoticComponent<DivProps>;
+declare const DraggablePanelContainer: react59.NamedExoticComponent<DivProps>;
 //#endregion
 export { DraggablePanelContainer, DraggablePanelContainerProps };
 //# sourceMappingURL=DraggablePanelContainer.d.mts.map

package/es/DraggablePanel/components/DraggablePanelFooter.d.mts

@@ -1,9 +1,9 @@
 import { DivProps } from "../../types/index.mjs";
-import * as react32 from "react";
+import * as react60 from "react";
 
 //#region src/DraggablePanel/components/DraggablePanelFooter.d.ts
 type DraggablePanelFooterProps = DivProps;
-declare const DraggablePanelFooter: react32.NamedExoticComponent<DivProps>;
+declare const DraggablePanelFooter: react60.NamedExoticComponent<DivProps>;
 //#endregion
 export { DraggablePanelFooter, DraggablePanelFooterProps };
 //# sourceMappingURL=DraggablePanelFooter.d.mts.map

package/es/DraggablePanel/components/DraggablePanelHeader.d.mts

@@ -1,5 +1,5 @@
 import { DivProps } from "../../types/index.mjs";
-import * as react34 from "react";
+import * as react61 from "react";
 
 //#region src/DraggablePanel/components/DraggablePanelHeader.d.ts
 interface DraggablePanelHeaderProps extends Omit<DivProps, 'children'> {
@@ -9,7 +9,7 @@ interface DraggablePanelHeaderProps extends Omit<DivProps, 'children'> {
   setPin?: (pin: boolean) => void;
   title?: string;
 }
-declare const DraggablePanelHeader: react34.NamedExoticComponent<DraggablePanelHeaderProps>;
+declare const DraggablePanelHeader: react61.NamedExoticComponent<DraggablePanelHeaderProps>;
 //#endregion
 export { DraggablePanelHeader, DraggablePanelHeaderProps };
 //# sourceMappingURL=DraggablePanelHeader.d.mts.map

package/es/DraggableSideNav/DraggableSideNav.d.mts

@@ -1,8 +1,8 @@
 import { DraggableSideNavProps } from "./type.mjs";
-import * as react35 from "react";
+import * as react57 from "react";
 
 //#region src/DraggableSideNav/DraggableSideNav.d.ts
-declare const DraggableSideNav: react35.NamedExoticComponent<DraggableSideNavProps>;
+declare const DraggableSideNav: react57.NamedExoticComponent<DraggableSideNavProps>;
 //#endregion
 export { DraggableSideNav };
 //# sourceMappingURL=DraggableSideNav.d.mts.map

package/es/Drawer/Drawer.d.mts

@@ -1,8 +1,8 @@
 import { DrawerProps } from "./type.mjs";
-import * as react24 from "react";
+import * as react56 from "react";
 
 //#region src/Drawer/Drawer.d.ts
-declare const Drawer: react24.NamedExoticComponent<DrawerProps>;
+declare const Drawer: react56.NamedExoticComponent<DrawerProps>;
 //#endregion
 export { Drawer };
 //# sourceMappingURL=Drawer.d.mts.map

package/es/Dropdown/Dropdown.d.mts

@@ -1,8 +1,8 @@
 import { DropdownProps } from "./type.mjs";
-import * as react23 from "react";
+import * as react70 from "react";
 
 //#region src/Dropdown/Dropdown.d.ts
-declare const Dropdown: react23.NamedExoticComponent<DropdownProps>;
+declare const Dropdown: react70.NamedExoticComponent<DropdownProps>;
 //#endregion
 export { Dropdown };
 //# sourceMappingURL=Dropdown.d.mts.map

package/es/DropdownMenu/DropdownMenu.d.mts

@@ -1,8 +1,8 @@
 import { DropdownMenuProps } from "./type.mjs";
-import * as react13 from "react";
+import * as react0 from "react";
 
 //#region src/DropdownMenu/DropdownMenu.d.ts
-declare const DropdownMenu: react13.NamedExoticComponent<DropdownMenuProps<unknown>>;
+declare const DropdownMenu: react0.NamedExoticComponent<DropdownMenuProps<unknown>>;
 //#endregion
 export { DropdownMenu };
 //# sourceMappingURL=DropdownMenu.d.mts.map