dishui 0.0.78 → 0.0.80

package/dist/components/Avatar/index.d.ts

@@ -15,15 +15,17 @@ export type AvatarProps = {
     shape?: AvatarShape;
     /** shape="square" 时的自定义圆角（数字按 px）。 */
     radius?: number | string;
-    /** 边框宽度（数字按 px）；mask 边框模式下即为环宽，默认 2。 */
+    /** 边框宽度（数字按 px）；默认 0，旧 maskBorder 模式默认 2。不改变 maskSrc 图片。 */
     borderWidth?: number | string;
     /** 边框颜色。 */
     borderColor?: string;
     /** 边框线型：solid（默认）/ dashed / dotted。 */
     borderStyle?: AvatarBorderStyle;
-    /** mask 边框：颜色或 CSS 渐变（如 story ring）。设置后以 mask 环的形式覆盖在头像边缘，中间不遮挡内容。 */
+    /** 装饰图片 URL（SVG / PNG / WebP 等，需自带透明中心），按 contain 覆盖头像；不受 shape 裁剪。优先于 maskBorder，失败时隐藏装饰。 */
+    maskSrc?: string;
+    /** @deprecated 仅兼容旧 CSS 颜色 / 渐变环，并非图片 mask。图片覆盖请使用 maskSrc；两者同时传入时忽略 maskBorder。 */
     maskBorder?: string;
-    /** 中间（内容）区域透明度 0–1，默认 1；mask 边框模式下常用于压暗头像突出环。 */
+    /** 头像图片 / 字母内容透明度 0–1，默认 1；不影响装饰图片或通知角标。 */
     centerOpacity?: number;
     /** 角标通知位置，默认 top-right。 */
     notificationPosition?: AvatarNotificationPosition;
@@ -41,7 +43,7 @@ export type AvatarProps = {
 /**
  * Avatar —— 头像组件。
  * 展示图片头像；未配置（或加载失败）时回退为 `name` 的关键字母。
- * 支持自定义边框形态 / 颜色 / 线型、mask 环状边框（中间区域透明度可控）
+ * 支持自定义边框形态 / 颜色 / 线型、透明中心装饰图片 overlay（maskSrc）
  * 以及四角 notification 短描述（计数 / 文本 / 圆点）。
  */
 declare const Avatar: React.FC<AvatarProps>;

package/dist/components/Avatar/index.js

@@ -14,56 +14,67 @@ var i = (e) => {
 	"top-right": "top-0 right-0 translate-x-1/3 -translate-y-1/3",
 	"bottom-left": "bottom-0 left-0 -translate-x-1/3 translate-y-1/3",
 	"bottom-right": "bottom-0 right-0 translate-x-1/3 translate-y-1/3"
-}, s = ({ src: s, alt: c, name: l, size: u = 40, shape: d = "circle", radius: f, borderWidth: p, borderColor: m, borderStyle: h = "solid", maskBorder: g, centerOpacity: _ = 1, notificationPosition: v = "top-right", notification: y, notificationColor: b = "var(--color-error)", className: x = "", style: S, onClick: C }) => {
-	let w = typeof u == "number" ? `${u}px` : u, [T, E] = t.useState(!1);
-	t.useEffect(() => E(!1), [s]);
-	let D = !!s && !T, O = l ? i(l) : "", k = `calc(${w} * 0.36)`, A = d === "square" ? { borderRadius: f ?? "0.5rem" } : {}, j = p === void 0 ? g ? "2px" : "0px" : typeof p == "number" ? `${p}px` : p, M = y != null && y !== !1;
+}, s = ({ src: s, alt: l, name: u, size: d = 40, shape: f = "circle", radius: p, borderWidth: m, borderColor: h, borderStyle: g = "solid", maskBorder: _, maskSrc: v, centerOpacity: y = 1, notificationPosition: b = "top-right", notification: x, notificationColor: S = "var(--color-error)", className: C = "", style: w, onClick: T }) => {
+	let E = typeof d == "number" ? `${d}px` : d, [D, O] = t.useState(!1);
+	t.useEffect(() => O(!1), [s]);
+	let k = !!s && !D, A = u ? i(u) : "", j = `calc(${E} * 0.36)`, M = f === "square" ? { borderRadius: p ?? "0.5rem" } : {}, N = v ? void 0 : _, P = m === void 0 ? N ? "2px" : "0px" : typeof m == "number" ? `${m}px` : m, F = x != null && x !== !1;
 	return /* @__PURE__ */ r("span", {
-		className: e("relative inline-flex shrink-0 leading-none", C && "cursor-pointer", x),
+		className: e("relative inline-flex shrink-0 leading-none", T && "cursor-pointer", C),
 		style: {
-			width: w,
-			height: w,
-			...S
+			width: E,
+			height: E,
+			...w
 		},
-		onClick: C,
+		onClick: T,
 		children: [
-			g && /* @__PURE__ */ n("span", {
+			N && /* @__PURE__ */ n("span", {
 				"aria-hidden": "true",
 				className: "pointer-events-none absolute inset-0 z-10",
 				style: {
-					padding: j,
-					background: g,
+					padding: P,
+					background: N,
 					WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
 					WebkitMaskComposite: "xor",
 					mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
 					maskComposite: "exclude",
-					...A
+					...M
 				}
 			}),
 			/* @__PURE__ */ n("span", {
-				className: e("relative flex h-full w-full select-none items-center justify-center overflow-hidden bg-base-200 text-center font-semibold text-base-content/70", a[d]),
+				className: e("relative flex h-full w-full select-none items-center justify-center overflow-hidden bg-base-200 text-center font-semibold text-base-content/70", a[f]),
 				style: {
-					fontSize: k,
-					opacity: _,
-					borderWidth: g ? 0 : j,
-					borderStyle: g ? void 0 : h,
-					borderColor: g ? void 0 : m,
-					...A
+					fontSize: j,
+					opacity: y,
+					borderWidth: N ? 0 : P,
+					borderStyle: N ? void 0 : g,
+					borderColor: N ? void 0 : h,
+					...M
 				},
-				children: D ? /* @__PURE__ */ n("img", {
+				children: k ? /* @__PURE__ */ n("img", {
 					src: s,
-					alt: c ?? l ?? "",
+					alt: l ?? u ?? "",
 					className: "h-full w-full object-cover",
-					onError: () => E(!0)
-				}) : O
+					onError: () => O(!0)
+				}) : A
 			}),
-			M && /* @__PURE__ */ n("span", {
-				className: e("absolute z-20 flex items-center justify-center rounded-full border-2 border-base-100 font-bold leading-none text-white", o[v], y === !0 ? "h-3 w-3 p-0" : "h-[18px] min-w-[18px] px-1 text-[10px]"),
-				style: { backgroundColor: b },
-				children: y === !0 ? "" : y
+			v && /* @__PURE__ */ n(c, { src: v }, v),
+			F && /* @__PURE__ */ n("span", {
+				className: e("absolute z-20 flex items-center justify-center rounded-full border-2 border-base-100 font-bold leading-none text-white", o[b], x === !0 ? "h-3 w-3 p-0" : "h-[18px] min-w-[18px] px-1 text-[10px]"),
+				style: { backgroundColor: S },
+				children: x === !0 ? "" : x
 			})
 		]
 	});
+}, c = ({ src: e }) => {
+	let [r, i] = t.useState(!1);
+	return r ? null : /* @__PURE__ */ n("img", {
+		src: e,
+		alt: "",
+		"aria-hidden": "true",
+		draggable: !1,
+		className: "pointer-events-none absolute inset-0 z-10 h-full w-full select-none object-contain",
+		onError: () => i(!0)
+	});
 };
 //#endregion
 export { s as default };

package/dist/components/Avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Avatar/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport type AvatarShape = 'circle' | 'square' | 'squircle';\nexport type AvatarBorderStyle = 'solid' | 'dashed' | 'dotted';\nexport type AvatarNotificationPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n\nexport type AvatarProps = {\n  /** 头像图片地址；缺省或加载失败时回退为 `name` 的关键字母。 */\n  src?: string;\n  /** 图片 alt 描述。 */\n  alt?: string;\n  /** 名称 / 描述：未配置头像时取其关键字母（两个单词取首字母，否则取前两个字符）作为回退展示。 */\n  name?: string;\n  /** 方形尺寸；数字按 px 处理。默认 40。 */\n  size?: number | string;\n  /** 边框（整体）形态：circle 圆形（默认）/ square 方形 / squircle 超椭圆圆角方。 */\n  shape?: AvatarShape;\n  /** shape=\"square\" 时的自定义圆角（数字按 px）。 */\n  radius?: number | string;\n  /** 边框宽度（数字按 px）；mask 边框模式下即为环宽，默认 2。 */\n  borderWidth?: number | string;\n  /** 边框颜色。 */\n  borderColor?: string;\n  /** 边框线型：solid（默认）/ dashed / dotted。 */\n  borderStyle?: AvatarBorderStyle;\n  /** mask 边框：颜色或 CSS 渐变（如 story ring）。设置后以 mask 环的形式覆盖在头像边缘，中间不遮挡内容。 */\n  maskBorder?: string;\n  /** 中间（内容）区域透明度 0–1，默认 1；mask 边框模式下常用于压暗头像突出环。 */\n  centerOpacity?: number;\n  /** 角标通知位置，默认 top-right。 */\n  notificationPosition?: AvatarNotificationPosition;\n  /** 角标通知内容（如计数数值 / 短文本）；传 `true` 显示小圆点，不传则不渲染角标。 */\n  notification?: React.ReactNode;\n  /** 角标背景色，默认 var(--color-error)。 */\n  notificationColor?: string;\n  /** Extra class names on the wrapper. */\n  className?: string;\n  /** Inline styles on the wrapper. */\n  style?: React.CSSProperties;\n  /** Click handler. */\n  onClick?: (e: React.MouseEvent<HTMLSpanElement>) => void;\n};\n\n/** 从名称/描述中提取关键字母：两个单词取首字母，否则取前两个字符（统一大写）。 */\nconst initialsOf = (name: string): string => {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();\n  return name.trim().slice(0, 2).toUpperCase();\n};\n\nconst SHAPE_CLASS: Record<AvatarShape, string> = {\n  circle: 'rounded-full',\n  square: '',\n  squircle: 'mask mask-squircle',\n};\n\nconst NOTIFICATION_POSITION_CLASS: Record<AvatarNotificationPosition, string> = {\n  'top-left': 'top-0 left-0 -translate-x-1/3 -translate-y-1/3',\n  'top-right': 'top-0 right-0 translate-x-1/3 -translate-y-1/3',\n  'bottom-left': 'bottom-0 left-0 -translate-x-1/3 translate-y-1/3',\n  'bottom-right': 'bottom-0 right-0 translate-x-1/3 translate-y-1/3',\n};\n\n/**\n * Avatar —— 头像组件。\n * 展示图片头像；未配置（或加载失败）时回退为 `name` 的关键字母。\n * 支持自定义边框形态 / 颜色 / 线型、mask 环状边框（中间区域透明度可控）\n * 以及四角 notification 短描述（计数 / 文本 / 圆点）。\n */\nconst Avatar: React.FC<AvatarProps> = ({\n  src,\n  alt,\n  name,\n  size = 40,\n  shape = 'circle',\n  radius,\n  borderWidth,\n  borderColor,\n  borderStyle = 'solid',\n  maskBorder,\n  centerOpacity = 1,\n  notificationPosition = 'top-right',\n  notification,\n  notificationColor = 'var(--color-error)',\n  className = '',\n  style,\n  onClick,\n}) => {\n  const px = typeof size === 'number' ? `${size}px` : size;\n  const [imgFailed, setImgFailed] = React.useState(false);\n  React.useEffect(() => setImgFailed(false), [src]);\n\n  const showImage = Boolean(src) && !imgFailed;\n  const initials = name ? initialsOf(name) : '';\n  const fontSize = `calc(${px} * 0.36)`;\n\n  const shapeStyle: React.CSSProperties = shape === 'square' ? { borderRadius: radius ?? '0.5rem' } : {};\n  const ringWidth = borderWidth === undefined ? (maskBorder ? '2px' : '0px') : typeof borderWidth === 'number' ? `${borderWidth}px` : borderWidth;\n\n  const showNotification = notification !== undefined && notification !== null && notification !== false;\n\n  return (\n    <span\n      className={cn('relative inline-flex shrink-0 leading-none', onClick && 'cursor-pointer', className)}\n      style={{ width: px, height: px, ...style }}\n      onClick={onClick}\n    >\n      {/* mask 边框：mask-composite 排除中间区域，只留下覆盖在头像边缘的环 */}\n      {maskBorder && (\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-0 z-10\"\n          style={{\n            padding: ringWidth,\n            background: maskBorder,\n            WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',\n            WebkitMaskComposite: 'xor',\n            mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',\n            maskComposite: 'exclude',\n            ...shapeStyle,\n          } as React.CSSProperties}\n        />\n      )}\n      <span\n        className={cn(\n          'relative flex h-full w-full select-none items-center justify-center overflow-hidden bg-base-200 text-center font-semibold text-base-content/70',\n          SHAPE_CLASS[shape],\n        )}\n        style={{\n          fontSize,\n          opacity: centerOpacity,\n          borderWidth: maskBorder ? 0 : ringWidth,\n          borderStyle: maskBorder ? undefined : borderStyle,\n          borderColor: maskBorder ? undefined : borderColor,\n          ...shapeStyle,\n        }}\n      >\n        {showImage ? (\n          <img\n            src={src}\n            alt={alt ?? name ?? ''}\n            className=\"h-full w-full object-cover\"\n            onError={() => setImgFailed(true)}\n          />\n        ) : (\n          initials\n        )}\n      </span>\n      {showNotification && (\n        <span\n          className={cn(\n            'absolute z-20 flex items-center justify-center rounded-full border-2 border-base-100 font-bold leading-none text-white',\n            NOTIFICATION_POSITION_CLASS[notificationPosition],\n            notification === true ? 'h-3 w-3 p-0' : 'h-[18px] min-w-[18px] px-1 text-[10px]',\n          )}\n          style={{ backgroundColor: notificationColor }}\n        >\n          {notification === true ? '' : notification}\n        </span>\n      )}\n    </span>\n  );\n};\n\nexport default Avatar;\n"],"mappings":";;;;AA6CA,IAAM,KAAc,MAAyB;CAC3C,IAAM,IAAQ,EAAK,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO;CAErD,OADI,EAAM,UAAU,KAAW,EAAM,EAAE,CAAC,KAAK,EAAM,EAAE,CAAC,GAAA,CAAI,YAAY,IAC/D,EAAK,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,YAAY;AAC7C,GAEM,IAA2C;CAC/C,QAAQ;CACR,QAAQ;CACR,UAAU;AACZ,GAEM,IAA0E;CAC9E,YAAY;CACZ,aAAa;CACb,eAAe;CACf,gBAAgB;AAClB,GAQM,KAAiC,EACrC,QACA,QACA,SACA,UAAO,IACP,WAAQ,UACR,WACA,gBACA,gBACA,iBAAc,SACd,eACA,mBAAgB,GAChB,0BAAuB,aACvB,iBACA,uBAAoB,sBACpB,eAAY,IACZ,UACA,iBACI;CACJ,IAAM,IAAK,OAAO,KAAS,WAAW,GAAG,EAAK,MAAM,GAC9C,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAK;CACtD,EAAM,gBAAgB,EAAa,EAAK,GAAG,CAAC,CAAG,CAAC;CAEhD,IAAM,IAAY,EAAQ,KAAQ,CAAC,GAC7B,IAAW,IAAO,EAAW,CAAI,IAAI,IACrC,IAAW,QAAQ,EAAG,WAEtB,IAAkC,MAAU,WAAW,EAAE,cAAc,KAAU,SAAS,IAAI,CAAC,GAC/F,IAAY,MAAgB,KAAA,IAAa,IAAa,QAAQ,QAAS,OAAO,KAAgB,WAAW,GAAG,EAAY,MAAM,GAE9H,IAAmB,KAA+C,QAAQ,MAAiB;CAEjG,OACE,kBAAC,QAAD;EACE,WAAW,EAAG,8CAA8C,KAAW,kBAAkB,CAAS;EAClG,OAAO;GAAE,OAAO;GAAI,QAAQ;GAAI,GAAG;EAAM;EAChC;EAHX,UAAA;GAMG,KACC,kBAAC,QAAD;IACE,eAAY;IACZ,WAAU;IACV,OAAO;KACL,SAAS;KACT,YAAY;KACZ,YAAY;KACZ,qBAAqB;KACrB,MAAM;KACN,eAAe;KACf,GAAG;IACL;GACD,CAAA;GAEH,kBAAC,QAAD;IACE,WAAW,EACT,kJACA,EAAY,EACd;IACA,OAAO;KACL;KACA,SAAS;KACT,aAAa,IAAa,IAAI;KAC9B,aAAa,IAAa,KAAA,IAAY;KACtC,aAAa,IAAa,KAAA,IAAY;KACtC,GAAG;IACL;IAEC,UAAA,IACC,kBAAC,OAAD;KACO;KACL,KAAK,KAAO,KAAQ;KACpB,WAAU;KACV,eAAe,EAAa,EAAI;IACjC,CAAA,IAED;GAEE,CAAA;GACL,KACC,kBAAC,QAAD;IACE,WAAW,EACT,0HACA,EAA4B,IAC5B,MAAiB,KAAO,gBAAgB,wCAC1C;IACA,OAAO,EAAE,iBAAiB,EAAkB;IAE3C,UAAA,MAAiB,KAAO,KAAK;GAC1B,CAAA;EAEJ;;AAEV"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Avatar/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport type AvatarShape = 'circle' | 'square' | 'squircle';\nexport type AvatarBorderStyle = 'solid' | 'dashed' | 'dotted';\nexport type AvatarNotificationPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n\nexport type AvatarProps = {\n  /** 头像图片地址；缺省或加载失败时回退为 `name` 的关键字母。 */\n  src?: string;\n  /** 图片 alt 描述。 */\n  alt?: string;\n  /** 名称 / 描述：未配置头像时取其关键字母（两个单词取首字母，否则取前两个字符）作为回退展示。 */\n  name?: string;\n  /** 方形尺寸；数字按 px 处理。默认 40。 */\n  size?: number | string;\n  /** 边框（整体）形态：circle 圆形（默认）/ square 方形 / squircle 超椭圆圆角方。 */\n  shape?: AvatarShape;\n  /** shape=\"square\" 时的自定义圆角（数字按 px）。 */\n  radius?: number | string;\n  /** 边框宽度（数字按 px）；默认 0，旧 maskBorder 模式默认 2。不改变 maskSrc 图片。 */\n  borderWidth?: number | string;\n  /** 边框颜色。 */\n  borderColor?: string;\n  /** 边框线型：solid（默认）/ dashed / dotted。 */\n  borderStyle?: AvatarBorderStyle;\n  /** 装饰图片 URL（SVG / PNG / WebP 等，需自带透明中心），按 contain 覆盖头像；不受 shape 裁剪。优先于 maskBorder，失败时隐藏装饰。 */\n    maskSrc?: string;\n    /** @deprecated 仅兼容旧 CSS 颜色 / 渐变环，并非图片 mask。图片覆盖请使用 maskSrc；两者同时传入时忽略 maskBorder。 */\n  maskBorder?: string;\n  /** 头像图片 / 字母内容透明度 0–1，默认 1；不影响装饰图片或通知角标。 */\n  centerOpacity?: number;\n  /** 角标通知位置，默认 top-right。 */\n  notificationPosition?: AvatarNotificationPosition;\n  /** 角标通知内容（如计数数值 / 短文本）；传 `true` 显示小圆点，不传则不渲染角标。 */\n  notification?: React.ReactNode;\n  /** 角标背景色，默认 var(--color-error)。 */\n  notificationColor?: string;\n  /** Extra class names on the wrapper. */\n  className?: string;\n  /** Inline styles on the wrapper. */\n  style?: React.CSSProperties;\n  /** Click handler. */\n  onClick?: (e: React.MouseEvent<HTMLSpanElement>) => void;\n};\n\n/** 从名称/描述中提取关键字母：两个单词取首字母，否则取前两个字符（统一大写）。 */\nconst initialsOf = (name: string): string => {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();\n  return name.trim().slice(0, 2).toUpperCase();\n};\n\nconst SHAPE_CLASS: Record<AvatarShape, string> = {\n  circle: 'rounded-full',\n  square: '',\n  squircle: 'mask mask-squircle',\n};\n\nconst NOTIFICATION_POSITION_CLASS: Record<AvatarNotificationPosition, string> = {\n  'top-left': 'top-0 left-0 -translate-x-1/3 -translate-y-1/3',\n  'top-right': 'top-0 right-0 translate-x-1/3 -translate-y-1/3',\n  'bottom-left': 'bottom-0 left-0 -translate-x-1/3 translate-y-1/3',\n  'bottom-right': 'bottom-0 right-0 translate-x-1/3 translate-y-1/3',\n};\n\n/**\n * Avatar —— 头像组件。\n * 展示图片头像；未配置（或加载失败）时回退为 `name` 的关键字母。\n * 支持自定义边框形态 / 颜色 / 线型、透明中心装饰图片 overlay（maskSrc）\n * 以及四角 notification 短描述（计数 / 文本 / 圆点）。\n */\nconst Avatar: React.FC<AvatarProps> = ({\n  src,\n  alt,\n  name,\n  size = 40,\n  shape = 'circle',\n  radius,\n  borderWidth,\n  borderColor,\n  borderStyle = 'solid',\n  maskBorder,\n  maskSrc,\n  centerOpacity = 1,\n  notificationPosition = 'top-right',\n  notification,\n  notificationColor = 'var(--color-error)',\n  className = '',\n  style,\n  onClick,\n}) => {\n  const px = typeof size === 'number' ? `${size}px` : size;\n  const [imgFailed, setImgFailed] = React.useState(false);\n  React.useEffect(() => setImgFailed(false), [src]);\n\n  const showImage = Boolean(src) && !imgFailed;\n  const initials = name ? initialsOf(name) : '';\n  const fontSize = `calc(${px} * 0.36)`;\n\n  const shapeStyle: React.CSSProperties = shape === 'square' ? { borderRadius: radius ?? '0.5rem' } : {};\n  const legacyMaskBorder = maskSrc ? undefined : maskBorder;\n  const ringWidth = borderWidth === undefined ? (legacyMaskBorder ? '2px' : '0px') : typeof borderWidth === 'number' ? `${borderWidth}px` : borderWidth;\n\n  const showNotification = notification !== undefined && notification !== null && notification !== false;\n\n  return (\n    <span\n      className={cn('relative inline-flex shrink-0 leading-none', onClick && 'cursor-pointer', className)}\n      style={{ width: px, height: px, ...style }}\n      onClick={onClick}\n    >\n      {/* 仅保留旧版 CSS 环兼容；图片 overlay 不使用 CSS mask。 */}\n      {legacyMaskBorder && (\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-0 z-10\"\n          style={{\n            padding: ringWidth,\n            background: legacyMaskBorder,\n            WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',\n            WebkitMaskComposite: 'xor',\n            mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',\n            maskComposite: 'exclude',\n            ...shapeStyle,\n          } as React.CSSProperties}\n        />\n      )}\n      <span\n        className={cn(\n          'relative flex h-full w-full select-none items-center justify-center overflow-hidden bg-base-200 text-center font-semibold text-base-content/70',\n          SHAPE_CLASS[shape],\n        )}\n        style={{\n          fontSize,\n          opacity: centerOpacity,\n          borderWidth: legacyMaskBorder ? 0 : ringWidth,\n          borderStyle: legacyMaskBorder ? undefined : borderStyle,\n          borderColor: legacyMaskBorder ? undefined : borderColor,\n          ...shapeStyle,\n        }}\n      >\n        {showImage ? (\n          <img\n            src={src}\n            alt={alt ?? name ?? ''}\n            className=\"h-full w-full object-cover\"\n            onError={() => setImgFailed(true)}\n          />\n        ) : (\n          initials\n        )}\n      </span>\n      {maskSrc && <AvatarMaskImage key={maskSrc} src={maskSrc} />}\n      {showNotification && (\n        <span\n          className={cn(\n            'absolute z-20 flex items-center justify-center rounded-full border-2 border-base-100 font-bold leading-none text-white',\n            NOTIFICATION_POSITION_CLASS[notificationPosition],\n            notification === true ? 'h-3 w-3 p-0' : 'h-[18px] min-w-[18px] px-1 text-[10px]',\n          )}\n          style={{ backgroundColor: notificationColor }}\n        >\n          {notification === true ? '' : notification}\n        </span>\n      )}\n    </span>\n  );\n};\n\n// A new URL remounts this layer so a failed decoration can recover independently.\nconst AvatarMaskImage: React.FC<{ src: string }> = ({ src }) => {\n  const [failed, setFailed] = React.useState(false);\n  if (failed) return null;\n  return (\n    <img\n      src={src}\n      alt=\"\"\n      aria-hidden=\"true\"\n      draggable={false}\n      className=\"pointer-events-none absolute inset-0 z-10 h-full w-full select-none object-contain\"\n      onError={() => setFailed(true)}\n    />\n  );\n};\n\nexport default Avatar;\n"],"mappings":";;;;AA+CA,IAAM,KAAc,MAAyB;CAC3C,IAAM,IAAQ,EAAK,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO;CAErD,OADI,EAAM,UAAU,KAAW,EAAM,EAAE,CAAC,KAAK,EAAM,EAAE,CAAC,GAAA,CAAI,YAAY,IAC/D,EAAK,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,YAAY;AAC7C,GAEM,IAA2C;CAC/C,QAAQ;CACR,QAAQ;CACR,UAAU;AACZ,GAEM,IAA0E;CAC9E,YAAY;CACZ,aAAa;CACb,eAAe;CACf,gBAAgB;AAClB,GAQM,KAAiC,EACrC,QACA,QACA,SACA,UAAO,IACP,WAAQ,UACR,WACA,gBACA,gBACA,iBAAc,SACd,eACA,YACA,mBAAgB,GAChB,0BAAuB,aACvB,iBACA,uBAAoB,sBACpB,eAAY,IACZ,UACA,iBACI;CACJ,IAAM,IAAK,OAAO,KAAS,WAAW,GAAG,EAAK,MAAM,GAC9C,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAK;CACtD,EAAM,gBAAgB,EAAa,EAAK,GAAG,CAAC,CAAG,CAAC;CAEhD,IAAM,IAAY,EAAQ,KAAQ,CAAC,GAC7B,IAAW,IAAO,EAAW,CAAI,IAAI,IACrC,IAAW,QAAQ,EAAG,WAEtB,IAAkC,MAAU,WAAW,EAAE,cAAc,KAAU,SAAS,IAAI,CAAC,GAC/F,IAAmB,IAAU,KAAA,IAAY,GACzC,IAAY,MAAgB,KAAA,IAAa,IAAmB,QAAQ,QAAS,OAAO,KAAgB,WAAW,GAAG,EAAY,MAAM,GAEpI,IAAmB,KAA+C,QAAQ,MAAiB;CAEjG,OACE,kBAAC,QAAD;EACE,WAAW,EAAG,8CAA8C,KAAW,kBAAkB,CAAS;EAClG,OAAO;GAAE,OAAO;GAAI,QAAQ;GAAI,GAAG;EAAM;EAChC;EAHX,UAAA;GAMG,KACC,kBAAC,QAAD;IACE,eAAY;IACZ,WAAU;IACV,OAAO;KACL,SAAS;KACT,YAAY;KACZ,YAAY;KACZ,qBAAqB;KACrB,MAAM;KACN,eAAe;KACf,GAAG;IACL;GACD,CAAA;GAEH,kBAAC,QAAD;IACE,WAAW,EACT,kJACA,EAAY,EACd;IACA,OAAO;KACL;KACA,SAAS;KACT,aAAa,IAAmB,IAAI;KACpC,aAAa,IAAmB,KAAA,IAAY;KAC5C,aAAa,IAAmB,KAAA,IAAY;KAC5C,GAAG;IACL;IAEC,UAAA,IACC,kBAAC,OAAD;KACO;KACL,KAAK,KAAO,KAAQ;KACpB,WAAU;KACV,eAAe,EAAa,EAAI;IACjC,CAAA,IAED;GAEE,CAAA;GACL,KAAW,kBAAC,GAAD,EAA+B,KAAK,EAAU,GAAxB,CAAwB;GACzD,KACC,kBAAC,QAAD;IACE,WAAW,EACT,0HACA,EAA4B,IAC5B,MAAiB,KAAO,gBAAgB,wCAC1C;IACA,OAAO,EAAE,iBAAiB,EAAkB;IAE3C,UAAA,MAAiB,KAAO,KAAK;GAC1B,CAAA;EAEJ;;AAEV,GAGM,KAA8C,EAAE,aAAU;CAC9D,IAAM,CAAC,GAAQ,KAAa,EAAM,SAAS,EAAK;CAEhD,OADI,IAAe,OAEjB,kBAAC,OAAD;EACO;EACL,KAAI;EACJ,eAAY;EACZ,WAAW;EACX,WAAU;EACV,eAAe,EAAU,EAAI;CAC9B,CAAA;AAEL"}

package/dist/components/Card/index.d.ts

@@ -114,19 +114,27 @@ export type CardMetaProps = {
 };
 export type CardInfoTone = 'primary' | 'success' | 'warning' | 'info' | 'error' | 'neutral';
 export type CardInfoProps = {
-    /** Metric name (top-left, small muted text). */
+    /** Metric name. */
     label: React.ReactNode;
     /** Metric value (number or short text). */
     value: React.ReactNode;
-    /** Icon node, auto-sized and tinted by tone. */
+    /** Icon slot. Use Icon to control its size, color and background independently. */
     icon?: React.ReactNode;
-    /** `top` (default) puts the icon at the right of the label row; `left` puts it on the left (horizontal layout). */
-    iconPosition?: 'top' | 'left';
-    /** 图标底框形状：`square`（默认，方形圆角）/ `circle`（正圆）。 */
+    /** `top` keeps the icon beside the label; `left` / `right` flank the content. */
+    iconPosition?: 'top' | 'left' | 'right';
+    /** Stacked content (default), compact horizontal row, or two-column summary. */
+    layout?: 'stacked' | 'horizontal' | 'split';
+    /** Content alignment (default left). */
+    align?: 'left' | 'center' | 'right';
+    /** Additional multi-line content below the summary. */
+    children?: React.ReactNode;
+    /** Footer slot separated by a subtle divider. */
+    footer?: React.ReactNode;
+    /** @deprecated Use Icon styles instead. Shape of the optional neutral compatibility box. */
     iconShape?: 'square' | 'circle';
-    /** 是否给图标加色调底框（默认 `true`）；`false` 时渲染不带底框、仅保留 tone 文字色的裸图标。 */
+    /** @deprecated Use Icon styles instead. Optional neutral icon box (default false). */
     iconBoxed?: boolean;
-    /** Tone (icon text & background color). */
+    /** Card surface and border tone (default neutral). Does not style the icon. */
     tone?: CardInfoTone;
     /** Small hint text below the value (e.g. deltas, update time). */
     hint?: React.ReactNode;
@@ -136,7 +144,7 @@ export type CardInfoProps = {
     variant?: CardProps['variant'];
     /** Show a border (default true). */
     bordered?: boolean;
-    /** Enable the glass background (default false — solid `bg-base-200`). */
+    /** Enable the glass background (default true, matching Card). */
     glass?: boolean;
     /** Extra class names on the card. */
     className?: string;

package/dist/components/Card/index.js

@@ -1,10 +1,11 @@
 import { cn as e } from "../../utils/cn.js";
 import { CardMetric as t } from "./Metric2.js";
+/* empty css     */
 import "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/Card/index.tsx
 var i = ({ children: t, variant: r, bordered: i = !1, dash: a = !1, side: o = !1, imageFull: s = !1, compact: c = !1, hover: l = !0, glass: u = !0, size: d = "sm", className: f = "" }) => {
-	let p = u && !r ? "glass shadow-lg" : "", m = r ? `bg-${r} text-${r}-content shadow-md` : "", h = i ? "card-bordered" : "", g = a ? "card-dash" : "", _ = o ? "card-side" : "", v = s ? "image-full" : "", y = c ? "card-compact" : "", b = l ? "hover:shadow-xl transition-shadow duration-300" : "", x = d ? `card-${d}` : "";
+	let p = u && !r ? "glass dishui-card-glass shadow-lg" : "", m = r ? `bg-${r} text-${r}-content shadow-md` : "", h = i ? "card-bordered" : "", g = a ? "card-dash" : "", _ = o ? "card-side" : "", v = s ? "image-full" : "", y = c ? "card-compact" : "", b = l ? "hover:shadow-xl transition-shadow duration-300" : "", x = d ? `card-${d}` : "";
 	f.includes("w-") || f.match(/max-w-|min-w-/);
 	let S = e("card", "", p, m, h, g, _, v, y, b, x, f);
 	return /* @__PURE__ */ n("div", {
@@ -41,7 +42,7 @@ var i = ({ children: t, variant: r, bordered: i = !1, dash: a = !1, side: o = !1
 		children: t
 	});
 }, d = ({ variant: t, bordered: n = !1, glass: r = !0, className: i = "" }) => {
-	let a = r && !t ? "glass shadow-lg" : "", o = t ? `bg-${t} text-${t}-content shadow-md` : "";
+	let a = r && !t ? "glass dishui-card-glass shadow-lg" : "", o = t ? `bg-${t} text-${t}-content shadow-md` : "";
 	return e("card", a, o, n && "card-bordered", i);
 }, f = ({ className: t }) => /* @__PURE__ */ r("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
@@ -118,10 +119,10 @@ var i = ({ children: t, variant: r, bordered: i = !1, dash: a = !1, side: o = !1
 	}), /* @__PURE__ */ r("div", {
 		className: "card-body gap-0 p-6",
 		children: [/* @__PURE__ */ n("div", {
-			className: "relative z-10 text-lg text-base-content",
+			className: e("relative z-10 min-w-0 wrap-anywhere text-lg text-base-content", s && "pe-10"),
 			children: t
 		}), /* @__PURE__ */ r("div", {
-			className: e("mt-4 flex items-center justify-between gap-3", c && "border-t border-base-300 pt-3.5"),
+			className: e("mt-4 flex flex-wrap items-center justify-between gap-3", c && "border-t border-base-300 pt-3.5"),
 			children: [/* @__PURE__ */ r("div", {
 				className: "flex min-w-0 items-center gap-2.5",
 				children: [a && /* @__PURE__ */ n("span", {
@@ -174,108 +175,89 @@ var i = ({ children: t, variant: r, bordered: i = !1, dash: a = !1, side: o = !1
 			})
 		]
 	})
-}), g = {
-	primary: {
-		text: "text-primary",
-		bg: "bg-primary/10"
-	},
-	success: {
-		text: "text-success",
-		bg: "bg-success/10"
-	},
-	warning: {
-		text: "text-warning",
-		bg: "bg-warning/10"
-	},
-	info: {
-		text: "text-info",
-		bg: "bg-info/10"
-	},
-	error: {
-		text: "text-error",
-		bg: "bg-error/10"
-	},
-	neutral: {
-		text: "text-base-content/70",
-		bg: "bg-base-content/5"
-	}
-}, _ = ({ label: t, value: i, icon: a, iconPosition: o = "top", iconShape: s = "square", iconBoxed: c = !0, tone: l = "primary", hint: u, loading: f = !1, variant: p, bordered: m = !0, glass: h = !1, className: _ = "", onClick: v }) => {
-	let y = g[l], b = d({
-		variant: p,
-		bordered: m,
-		glass: h,
-		className: e("bg-base-200 p-4", _)
-	}), x = a && /* @__PURE__ */ n("span", {
-		className: e(o === "left" ? "flex shrink-0 items-center justify-center p-2.5 [&>svg]:h-5 [&>svg]:w-5" : "p-1.5 [&>svg]:h-4 [&>svg]:w-4", s === "circle" ? "rounded-full" : o === "left" ? "rounded-lg" : "rounded-md", y.bg, y.text),
-		children: a
-	}), S = a && /* @__PURE__ */ n("span", {
-		className: e(o === "left" ? "flex shrink-0" : "inline-flex", "[&>svg]:h-6 [&>svg]:w-6", y.text),
+}), g = ({ label: t, value: i, icon: a, iconPosition: o = "top", iconShape: s = "square", iconBoxed: c = !1, tone: l = "neutral", layout: u = "stacked", align: f = "left", children: p, footer: m, hint: h, loading: g = !1, variant: _, bordered: v = !0, glass: y = !0, className: b = "", onClick: x }) => {
+	let S = d({
+		variant: _,
+		bordered: v,
+		glass: y,
+		className: e("blade-card-info", "p-4", b)
+	}), C = a != null && /* @__PURE__ */ n("span", {
+		className: e("blade-card-info__icon", c && (s === "circle" ? "rounded-full" : "rounded-lg"), c && "bg-base-content/5"),
 		children: a
 	});
-	return o === "left" ? /* @__PURE__ */ n("div", {
-		className: e(b, "transition-shadow duration-300 hover:shadow-xl"),
-		onClick: v,
-		children: /* @__PURE__ */ r("div", {
-			className: "flex items-center gap-3",
-			children: [c ? x : S, /* @__PURE__ */ r("div", {
-				className: "min-w-0 flex-1",
-				children: [
-					/* @__PURE__ */ n("span", {
-						className: "block truncate text-xs font-medium text-base-content/60",
-						children: t
-					}),
-					f ? /* @__PURE__ */ n("div", { className: "mt-1 h-6 w-14 animate-pulse rounded bg-base-content/10" }) : /* @__PURE__ */ n("p", {
-						className: "truncate text-xl font-bold leading-tight text-base-content",
-						children: i
-					}),
-					u && /* @__PURE__ */ n("p", {
-						className: "mt-0.5 truncate text-[11px] text-base-content/50",
-						children: u
-					})
-				]
-			})]
-		})
-	}) : /* @__PURE__ */ r("div", {
-		className: e(b, "transition-shadow duration-300 hover:shadow-xl"),
-		onClick: v,
-		children: [
-			/* @__PURE__ */ r("div", {
-				className: "mb-2 flex items-center justify-between gap-2",
-				children: [/* @__PURE__ */ n("span", {
-					className: "truncate text-xs font-medium text-base-content/60",
-					children: t
-				}), c ? x : S]
-			}),
-			f ? /* @__PURE__ */ n("div", { className: "h-7 w-14 animate-pulse rounded bg-base-content/10" }) : /* @__PURE__ */ n("p", {
-				className: "text-2xl font-bold leading-none text-base-content",
-				children: i
-			}),
-			u && /* @__PURE__ */ n("p", {
-				className: "mt-1.5 text-[11px] text-base-content/50",
-				children: u
-			})
-		]
+	return /* @__PURE__ */ r("div", {
+		className: S,
+		"data-layout": u,
+		"data-align": f,
+		"data-tone": _ ? void 0 : l,
+		"data-bordered": v,
+		"data-glass": y,
+		role: x ? "button" : void 0,
+		tabIndex: x ? 0 : void 0,
+		"aria-busy": g || void 0,
+		onClick: x,
+		onKeyDown: x ? (e) => {
+			e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.repeat || e.currentTarget.click());
+		} : void 0,
+		children: [/* @__PURE__ */ r("div", {
+			className: "blade-card-info__body",
+			children: [
+				o === "left" && C,
+				/* @__PURE__ */ r("div", {
+					className: "blade-card-info__content",
+					children: [/* @__PURE__ */ r("div", {
+						className: "blade-card-info__summary",
+						children: [/* @__PURE__ */ r("div", {
+							className: "blade-card-info__header",
+							children: [/* @__PURE__ */ n("div", {
+								className: "blade-card-info__label",
+								children: t
+							}), o === "top" && C]
+						}), /* @__PURE__ */ r("div", {
+							className: "blade-card-info__reading",
+							children: [/* @__PURE__ */ n("div", {
+								className: "blade-card-info__value",
+								children: g ? /* @__PURE__ */ n("span", {
+									className: "blade-card-info__skeleton",
+									"aria-hidden": "true"
+								}) : i
+							}), h != null && /* @__PURE__ */ n("div", {
+								className: "blade-card-info__hint",
+								children: h
+							})]
+						})]
+					}), p != null && /* @__PURE__ */ n("div", {
+						className: "blade-card-info__details",
+						children: p
+					})]
+				}),
+				o === "right" && C
+			]
+		}), m != null && /* @__PURE__ */ n("div", {
+			className: "blade-card-info__footer",
+			children: m
+		})]
 	});
-}, v = {
+}, _ = {
 	primary: "text-primary",
 	success: "text-success",
 	warning: "text-warning",
 	info: "text-info",
 	error: "text-error",
 	neutral: "text-base-content/70"
-}, y = {
+}, v = {
 	primary: "bg-primary text-primary-content",
 	success: "bg-success text-success-content",
 	warning: "bg-warning text-warning-content",
 	info: "bg-info text-info-content",
 	error: "bg-error text-error-content",
 	neutral: "bg-neutral text-neutral-content"
-}, b = {
+}, y = {
 	md: "text-2xl",
 	lg: "text-4xl",
 	xl: "text-5xl",
 	"2xl": "text-6xl"
-}, x = (e) => e === "neutral" ? "var(--color-base-content)" : `var(--color-${e})`, S = ({ data: e, type: t, height: i }) => {
+}, b = (e) => e === "neutral" ? "var(--color-base-content)" : `var(--color-${e})`, x = ({ data: e, type: t, height: i }) => {
 	if (!e || e.length < 2) return null;
 	let a = Math.min(...e), o = Math.max(...e) - a || 1, s = (t) => t / (e.length - 1) * 100, c = (e) => i - 3 - (e - a) / o * (i - 6), l = e.map((e, t) => `${s(t).toFixed(2)},${c(e).toFixed(2)}`);
 	if (t === "bar") {
@@ -326,21 +308,21 @@ var i = ({ children: t, variant: r, bordered: i = !1, dash: a = !1, side: o = !1
 			vectorEffect: "non-scaling-stroke"
 		})
 	});
-}, C = ({ label: e, value: t, tone: i = "primary", loading: a = !1, className: o = "", unit: s, valueSize: c = "xl", align: l = "left", sparkline: u, sparklineData: d, sparklineType: f = "line", sparklineHeight: p = 36, indicator: m = !1, filled: h = !1, onClick: g }) => {
-	let _ = u ?? (d && d.length >= 2 ? /* @__PURE__ */ n(S, {
+}, S = ({ label: e, value: t, tone: i = "primary", loading: a = !1, className: o = "", unit: s, valueSize: c = "xl", align: l = "left", sparkline: u, sparklineData: d, sparklineType: f = "line", sparklineHeight: p = 36, indicator: m = !1, filled: h = !1, onClick: g }) => {
+	let S = u ?? (d && d.length >= 2 ? /* @__PURE__ */ n(x, {
 		data: d,
 		type: f,
 		height: p
-	}) : null), C = h ? "" : v[i], w = h ? "opacity-80" : "text-base-content/60";
+	}) : null), C = h ? "" : _[i], w = h ? "opacity-80" : "text-base-content/60";
 	return /* @__PURE__ */ r("div", {
 		onClick: g,
-		className: `relative flex flex-col overflow-hidden rounded-lg p-3 ${h ? y[i] : "border border-base-300/60 bg-base-200"} ${g ? "cursor-pointer transition-colors hover:border-primary/40" : ""} ${o}`.trim(),
+		className: `relative flex flex-col overflow-hidden rounded-lg p-3 ${h ? v[i] : "border border-base-300/60 bg-base-200"} ${g ? "cursor-pointer transition-colors hover:border-primary/40" : ""} ${o}`.trim(),
 		children: [
 			m && !h && /* @__PURE__ */ n("span", {
 				"aria-hidden": "true",
 				className: "absolute right-0 top-0 h-0 w-0",
 				style: {
-					borderTop: "14px solid " + x(i),
+					borderTop: "14px solid " + b(i),
 					borderLeft: "14px solid transparent"
 				}
 			}),
@@ -351,22 +333,22 @@ var i = ({ children: t, variant: r, bordered: i = !1, dash: a = !1, side: o = !1
 			/* @__PURE__ */ n("div", {
 				className: `flex min-h-[3rem] flex-1 items-center py-1 ${l === "center" ? "justify-center" : "justify-start"}`,
 				children: a ? /* @__PURE__ */ n("span", { className: `inline-block h-8 w-16 animate-pulse rounded ${h ? "bg-white/25" : "bg-base-content/10"}` }) : /* @__PURE__ */ r("span", {
-					className: `leading-none tracking-tight ${b[c]} font-semibold ${h ? "" : C}`.trim(),
+					className: `leading-none tracking-tight ${y[c]} font-semibold ${h ? "" : C}`.trim(),
 					children: [t, s != null && s !== "" && /* @__PURE__ */ n("span", {
 						className: "ml-0.5 text-[0.45em] font-semibold",
 						children: s
 					})]
 				})
 			}),
-			_ && /* @__PURE__ */ n("div", {
-				className: `-mx-3 -mb-3 mt-1 ${h ? "text-white" : v[i]}`,
-				children: _
+			S && /* @__PURE__ */ n("div", {
+				className: `-mx-3 -mb-3 mt-1 ${h ? "text-white" : _[i]}`,
+				children: S
 			})
 		]
 	});
-}, w = i;
-w.Title = a, w.Body = o, w.Actions = s, w.Figure = u, w.Feature = p, w.Quote = m, w.Meta = h, w.Info = _, w.Stat = C, w.Metric = t;
+}, C = i;
+C.Title = a, C.Body = o, C.Actions = s, C.Figure = u, C.Feature = p, C.Quote = m, C.Meta = h, C.Info = g, C.Stat = S, C.Metric = t;
 //#endregion
-export { w as default };
+export { C as default };
 
 //# sourceMappingURL=index.js.map