dishui 0.0.66 → 0.0.67

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

@@ -0,0 +1,39 @@
+import React from 'react';
+export type AccordionItemType = {
+    /** 唯一标识（用于展开状态管理）。 */
+    key: string;
+    /** 标题。 */
+    title: React.ReactNode;
+    /** 展开区域内容。 */
+    content: React.ReactNode;
+    /** 标题左侧图标。 */
+    icon?: React.ReactNode;
+    /** 标题行右侧、展开指示器之前的附加内容。 */
+    extra?: React.ReactNode;
+    /** 禁用该项。 */
+    disabled?: boolean;
+};
+export type AccordionProps = {
+    /** 手风琴项（数据驱动，可动态增删）。 */
+    items: AccordionItemType[];
+    /** 受控：当前展开项的 key 列表。 */
+    openKeys?: string[];
+    /** 非受控：默认展开项的 key 列表。 */
+    defaultOpenKeys?: string[];
+    /** 是否允许同时展开多项；默认 false（互斥展开，展开新项时收起其它项）。 */
+    multiple?: boolean;
+    /** 展开状态变化回调。 */
+    onChange?: (openKeys: string[]) => void;
+    /** 是否显示右侧展开指示箭头，默认 true。 */
+    indicator?: boolean;
+    /** 是否显示外层边框，默认 true。 */
+    bordered?: boolean;
+    className?: string;
+};
+/**
+ * Accordion —— 手风琴组件：动态交互式的聚合展开列表。
+ * 数据驱动（items 可动态增删），支持受控 / 非受控、互斥或多开、
+ * 禁用项、图标与自定义内容，展开 / 收起带平滑过渡动画。
+ */
+declare const Accordion: React.FC<AccordionProps>;
+export default Accordion;

package/dist/components/Accordion/index.js

@@ -0,0 +1,70 @@
+import { cn as e } from "../../utils/cn.js";
+import t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/Accordion/index.tsx
+var i = ({ className: t }) => /* @__PURE__ */ n("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	className: e("h-4 w-4", t),
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ n("path", { d: "m6 9 6 6 6-6" })
+}), a = ({ items: a, openKeys: o, defaultOpenKeys: s = [], multiple: c = !1, onChange: l, indicator: u = !0, bordered: d = !0, className: f = "" }) => {
+	let [p, m] = t.useState(s), h = o !== void 0, g = h ? o ?? [] : p, _ = (e, t) => {
+		if (t) return;
+		let n = g.includes(e) ? g.filter((t) => t !== e) : c ? [...g, e] : [e];
+		h || m(n), l?.(n);
+	};
+	return /* @__PURE__ */ n("div", {
+		className: e("w-full divide-y divide-base-300 overflow-hidden bg-base-100", d && "rounded-xl border border-base-300/70", f),
+		children: a.map((t) => {
+			let a = g.includes(t.key);
+			return /* @__PURE__ */ r("div", {
+				className: e(a && !t.disabled && "bg-base-200/40"),
+				children: [/* @__PURE__ */ r("button", {
+					type: "button",
+					disabled: t.disabled,
+					"aria-expanded": a,
+					onClick: () => _(t.key, t.disabled),
+					className: e("flex w-full items-center gap-2 px-4 py-3 text-left text-sm font-medium transition-colors", t.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-base-200/60", a && !t.disabled && "text-primary"),
+					children: [
+						t.icon && /* @__PURE__ */ n("span", {
+							className: "flex shrink-0 items-center text-base-content/60 [&>svg]:h-4 [&>svg]:w-4",
+							children: t.icon
+						}),
+						/* @__PURE__ */ n("span", {
+							className: "min-w-0 flex-1 truncate",
+							children: t.title
+						}),
+						t.extra && /* @__PURE__ */ n("span", {
+							className: "flex shrink-0 items-center",
+							children: t.extra
+						}),
+						u && /* @__PURE__ */ n("span", {
+							className: e("shrink-0 text-base-content/50 transition-transform duration-200", a && "rotate-180 text-primary"),
+							children: /* @__PURE__ */ n(i, {})
+						})
+					]
+				}), /* @__PURE__ */ n("div", {
+					className: "grid transition-[grid-template-rows] duration-200 ease-out",
+					style: { gridTemplateRows: a ? "1fr" : "0fr" },
+					children: /* @__PURE__ */ n("div", {
+						className: "overflow-hidden",
+						children: /* @__PURE__ */ n("div", {
+							className: "px-4 pb-4 pt-0 text-sm leading-relaxed text-base-content/75",
+							children: t.content
+						})
+					})
+				})]
+			}, t.key);
+		})
+	});
+};
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Accordion/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport type AccordionItemType = {\n  /** 唯一标识（用于展开状态管理）。 */\n  key: string;\n  /** 标题。 */\n  title: React.ReactNode;\n  /** 展开区域内容。 */\n  content: React.ReactNode;\n  /** 标题左侧图标。 */\n  icon?: React.ReactNode;\n  /** 标题行右侧、展开指示器之前的附加内容。 */\n  extra?: React.ReactNode;\n  /** 禁用该项。 */\n  disabled?: boolean;\n};\n\nexport type AccordionProps = {\n  /** 手风琴项（数据驱动，可动态增删）。 */\n  items: AccordionItemType[];\n  /** 受控：当前展开项的 key 列表。 */\n  openKeys?: string[];\n  /** 非受控：默认展开项的 key 列表。 */\n  defaultOpenKeys?: string[];\n  /** 是否允许同时展开多项；默认 false（互斥展开，展开新项时收起其它项）。 */\n  multiple?: boolean;\n  /** 展开状态变化回调。 */\n  onChange?: (openKeys: string[]) => void;\n  /** 是否显示右侧展开指示箭头，默认 true。 */\n  indicator?: boolean;\n  /** 是否显示外层边框，默认 true。 */\n  bordered?: boolean;\n  className?: string;\n};\n\nconst ChevronGlyph: React.FC<{ className?: string }> = ({ className }) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className={cn('h-4 w-4', className)}\n    aria-hidden=\"true\"\n  >\n    <path d=\"m6 9 6 6 6-6\" />\n  </svg>\n);\n\n/**\n * Accordion —— 手风琴组件：动态交互式的聚合展开列表。\n * 数据驱动（items 可动态增删），支持受控 / 非受控、互斥或多开、\n * 禁用项、图标与自定义内容，展开 / 收起带平滑过渡动画。\n */\nconst Accordion: React.FC<AccordionProps> = ({\n  items,\n  openKeys,\n  defaultOpenKeys = [],\n  multiple = false,\n  onChange,\n  indicator = true,\n  bordered = true,\n  className = '',\n}) => {\n  const [innerKeys, setInnerKeys] = React.useState<string[]>(defaultOpenKeys);\n  const isControlled = openKeys !== undefined;\n  const currentKeys = isControlled ? (openKeys ?? []) : innerKeys;\n\n  const toggle = (key: string, disabled?: boolean) => {\n    if (disabled) return;\n    const nextKeys = currentKeys.includes(key)\n      ? currentKeys.filter((k) => k !== key)\n      : multiple\n        ? [...currentKeys, key]\n        : [key];\n    if (!isControlled) setInnerKeys(nextKeys);\n    onChange?.(nextKeys);\n  };\n\n  return (\n    <div\n      className={cn(\n        'w-full divide-y divide-base-300 overflow-hidden bg-base-100',\n        bordered && 'rounded-xl border border-base-300/70',\n        className,\n      )}\n    >\n      {items.map((item) => {\n        const open = currentKeys.includes(item.key);\n        return (\n          <div key={item.key} className={cn(open && !item.disabled && 'bg-base-200/40')}>\n            <button\n              type=\"button\"\n              disabled={item.disabled}\n              aria-expanded={open}\n              onClick={() => toggle(item.key, item.disabled)}\n              className={cn(\n                'flex w-full items-center gap-2 px-4 py-3 text-left text-sm font-medium transition-colors',\n                item.disabled\n                  ? 'cursor-not-allowed opacity-50'\n                  : 'cursor-pointer hover:bg-base-200/60',\n                open && !item.disabled && 'text-primary',\n              )}\n            >\n              {item.icon && <span className=\"flex shrink-0 items-center text-base-content/60 [&>svg]:h-4 [&>svg]:w-4\">{item.icon}</span>}\n              <span className=\"min-w-0 flex-1 truncate\">{item.title}</span>\n              {item.extra && <span className=\"flex shrink-0 items-center\">{item.extra}</span>}\n              {indicator && (\n                <span className={cn('shrink-0 text-base-content/50 transition-transform duration-200', open && 'rotate-180 text-primary')}>\n                  <ChevronGlyph />\n                </span>\n              )}\n            </button>\n            <div\n              className=\"grid transition-[grid-template-rows] duration-200 ease-out\"\n              style={{ gridTemplateRows: open ? '1fr' : '0fr' }}\n            >\n              <div className=\"overflow-hidden\">\n                <div className=\"px-4 pb-4 pt-0 text-sm leading-relaxed text-base-content/75\">\n                  {item.content}\n                </div>\n              </div>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default Accordion;\n"],"mappings":";;;;AAoCA,IAAM,KAAkD,EAAE,mBACxD,kBAAC,OAAD;CACE,OAAM;CACN,SAAQ;CACR,MAAK;CACL,QAAO;CACP,aAAa;CACb,eAAc;CACd,gBAAe;CACf,WAAW,EAAG,WAAW,CAAS;CAClC,eAAY;CAEZ,UAAA,kBAAC,QAAD,EAAM,GAAE,eAAgB,CAAA;AACrB,CAAA,GAQD,KAAuC,EAC3C,UACA,aACA,qBAAkB,CAAC,GACnB,cAAW,IACX,aACA,eAAY,IACZ,cAAW,IACX,eAAY,SACR;CACJ,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAmB,CAAe,GACpE,IAAe,MAAa,KAAA,GAC5B,IAAc,IAAgB,KAAY,CAAC,IAAK,GAEhD,KAAU,GAAa,MAAuB;EAClD,IAAI,GAAU;EACd,IAAM,IAAW,EAAY,SAAS,CAAG,IACrC,EAAY,QAAQ,MAAM,MAAM,CAAG,IACnC,IACE,CAAC,GAAG,GAAa,CAAG,IACpB,CAAC,CAAG;EAEV,AADK,KAAc,EAAa,CAAQ,GACxC,IAAW,CAAQ;CACrB;CAEA,OACE,kBAAC,OAAD;EACE,WAAW,EACT,+DACA,KAAY,wCACZ,CACF;EAEC,UAAA,EAAM,KAAK,MAAS;GACnB,IAAM,IAAO,EAAY,SAAS,EAAK,GAAG;GAC1C,OACE,kBAAC,OAAD;IAAoB,WAAW,EAAG,KAAQ,CAAC,EAAK,YAAY,gBAAgB;IAA5E,UAAA,CACE,kBAAC,UAAD;KACE,MAAK;KACL,UAAU,EAAK;KACf,iBAAe;KACf,eAAe,EAAO,EAAK,KAAK,EAAK,QAAQ;KAC7C,WAAW,EACT,4FACA,EAAK,WACD,kCACA,uCACJ,KAAQ,CAAC,EAAK,YAAY,cAC5B;KAXF,UAAA;MAaG,EAAK,QAAQ,kBAAC,QAAD;OAAM,WAAU;OAA2E,UAAA,EAAK;MAAW,CAAA;MACzH,kBAAC,QAAD;OAAM,WAAU;OAA2B,UAAA,EAAK;MAAY,CAAA;MAC3D,EAAK,SAAS,kBAAC,QAAD;OAAM,WAAU;OAA8B,UAAA,EAAK;MAAY,CAAA;MAC7E,KACC,kBAAC,QAAD;OAAM,WAAW,EAAG,mEAAmE,KAAQ,yBAAyB;OACtH,UAAA,kBAAC,GAAD,CAAe,CAAA;MACX,CAAA;KAEF;IACR,CAAA,GAAA,kBAAC,OAAD;KACE,WAAU;KACV,OAAO,EAAE,kBAAkB,IAAO,QAAQ,MAAM;KAEhD,UAAA,kBAAC,OAAD;MAAK,WAAU;MACb,UAAA,kBAAC,OAAD;OAAK,WAAU;OACZ,UAAA,EAAK;MACH,CAAA;KACF,CAAA;IACF,CAAA,CACF;GAjCK,GAAA,EAAK,GAiCV;EAET,CAAC;CACE,CAAA;AAET"}

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

@@ -0,0 +1,48 @@
+import React from 'react';
+export type AvatarShape = 'circle' | 'square' | 'squircle';
+export type AvatarBorderStyle = 'solid' | 'dashed' | 'dotted';
+export type AvatarNotificationPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type AvatarProps = {
+    /** 头像图片地址；缺省或加载失败时回退为 `name` 的关键字母。 */
+    src?: string;
+    /** 图片 alt 描述。 */
+    alt?: string;
+    /** 名称 / 描述：未配置头像时取其关键字母（两个单词取首字母，否则取前两个字符）作为回退展示。 */
+    name?: string;
+    /** 方形尺寸；数字按 px 处理。默认 40。 */
+    size?: number | string;
+    /** 边框（整体）形态：circle 圆形（默认）/ square 方形 / squircle 超椭圆圆角方。 */
+    shape?: AvatarShape;
+    /** shape="square" 时的自定义圆角（数字按 px）。 */
+    radius?: number | string;
+    /** 边框宽度（数字按 px）；mask 边框模式下即为环宽，默认 2。 */
+    borderWidth?: number | string;
+    /** 边框颜色。 */
+    borderColor?: string;
+    /** 边框线型：solid（默认）/ dashed / dotted。 */
+    borderStyle?: AvatarBorderStyle;
+    /** mask 边框：颜色或 CSS 渐变（如 story ring）。设置后以 mask 环的形式覆盖在头像边缘，中间不遮挡内容。 */
+    maskBorder?: string;
+    /** 中间（内容）区域透明度 0–1，默认 1；mask 边框模式下常用于压暗头像突出环。 */
+    centerOpacity?: number;
+    /** 角标通知位置，默认 top-right。 */
+    notificationPosition?: AvatarNotificationPosition;
+    /** 角标通知内容（如计数数值 / 短文本）；传 `true` 显示小圆点，不传则不渲染角标。 */
+    notification?: React.ReactNode;
+    /** 角标背景色，默认 var(--color-error)。 */
+    notificationColor?: string;
+    /** Extra class names on the wrapper. */
+    className?: string;
+    /** Inline styles on the wrapper. */
+    style?: React.CSSProperties;
+    /** Click handler. */
+    onClick?: (e: React.MouseEvent<HTMLSpanElement>) => void;
+};
+/**
+ * Avatar —— 头像组件。
+ * 展示图片头像；未配置（或加载失败）时回退为 `name` 的关键字母。
+ * 支持自定义边框形态 / 颜色 / 线型、mask 环状边框（中间区域透明度可控）
+ * 以及四角 notification 短描述（计数 / 文本 / 圆点）。
+ */
+declare const Avatar: React.FC<AvatarProps>;
+export default Avatar;

package/dist/components/Avatar/index.js

@@ -0,0 +1,71 @@
+import { cn as e } from "../../utils/cn.js";
+import t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/Avatar/index.tsx
+var i = (e) => {
+	let t = e.trim().split(/\s+/).filter(Boolean);
+	return t.length >= 2 ? (t[0][0] + t[1][0]).toUpperCase() : e.trim().slice(0, 2).toUpperCase();
+}, a = {
+	circle: "rounded-full",
+	square: "",
+	squircle: "mask mask-squircle"
+}, o = {
+	"top-left": "top-0 left-0 -translate-x-1/3 -translate-y-1/3",
+	"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;
+	return /* @__PURE__ */ r("span", {
+		className: e("relative inline-flex shrink-0 leading-none", C && "cursor-pointer", x),
+		style: {
+			width: w,
+			height: w,
+			...S
+		},
+		onClick: C,
+		children: [
+			g && /* @__PURE__ */ n("span", {
+				"aria-hidden": "true",
+				className: "pointer-events-none absolute inset-0 z-10",
+				style: {
+					padding: j,
+					background: g,
+					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
+				}
+			}),
+			/* @__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]),
+				style: {
+					fontSize: k,
+					opacity: _,
+					borderWidth: g ? 0 : j,
+					borderStyle: g ? void 0 : h,
+					borderColor: g ? void 0 : m,
+					...A
+				},
+				children: D ? /* @__PURE__ */ n("img", {
+					src: s,
+					alt: c ?? l ?? "",
+					className: "h-full w-full object-cover",
+					onError: () => E(!0)
+				}) : O
+			}),
+			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
+			})
+		]
+	});
+};
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

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

@@ -110,6 +110,68 @@ export type CardMetaProps = {
     /** Click handler. */
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
+export type CardInfoTone = 'primary' | 'success' | 'warning' | 'info' | 'error' | 'neutral';
+export type CardInfoProps = {
+    /** Metric name (top-left, small muted text). */
+    label: React.ReactNode;
+    /** Metric value (number or short text). */
+    value: React.ReactNode;
+    /** Icon node, auto-sized and tinted by tone. */
+    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`（正圆）。 */
+    iconShape?: 'square' | 'circle';
+    /** 是否给图标加色调底框（默认 `true`）；`false` 时渲染不带底框、仅保留 tone 文字色的裸图标。 */
+    iconBoxed?: boolean;
+    /** Tone (icon text & background color). */
+    tone?: CardInfoTone;
+    /** Small hint text below the value (e.g. deltas, update time). */
+    hint?: React.ReactNode;
+    /** Loading state: value renders as a skeleton. */
+    loading?: boolean;
+    /** Color variant (daisyUI). */
+    variant?: CardProps['variant'];
+    /** Show a border (default true). */
+    bordered?: boolean;
+    /** Enable the glass background (default false — solid `bg-base-200`). */
+    glass?: boolean;
+    /** Extra class names on the card. */
+    className?: string;
+    /** Click handler. */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+};
+export type CardStatProps = {
+    /** 面板标签 */
+    label: React.ReactNode;
+    /** 面板数值（数字或短文本） */
+    value: React.ReactNode;
+    /** 色调（决定数值文字色 / 角标三角 / filled 底色） */
+    tone?: CardInfoTone;
+    /** 加载态：值显示为骨架 */
+    loading?: boolean;
+    className?: string;
+    /** 数值单位后缀（如 `K`、`%`），以小号字体渲染在数值右侧。 */
+    unit?: React.ReactNode;
+    /** 面板数值字号，默认 `xl`。 */
+    valueSize?: 'md' | 'lg' | 'xl' | '2xl';
+    /** 面板内容对齐，默认 `left`。 */
+    align?: 'left' | 'center';
+    /** 直接传入迷你图节点（优先于 sparklineData）。 */
+    sparkline?: React.ReactNode;
+    /** 迷你图数据：传入数值数组后自动渲染 sparkline。 */
+    sparklineData?: number[];
+    /** 迷你图类型：折线 / 面积 / 柱状。 */
+    sparklineType?: 'line' | 'area' | 'bar';
+    /** 迷你图高度（px）。 */
+    sparklineHeight?: number;
+    /** 右上角状态三角（Grafana 阈值指示）。 */
+    indicator?: boolean;
+    /** 整卡填充 tone 底色、文字用对应 content 色（图 RabbitMQ 风格）。 */
+    filled?: boolean;
+    /** 点击回调（面板常用于跳转详情）。 */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+};
 interface CardCompound extends React.FC<CardProps> {
     Title: React.FC<CardTitleProps>;
     Body: React.FC<CardBodyProps>;
@@ -121,6 +183,10 @@ interface CardCompound extends React.FC<CardProps> {
     Quote: React.FC<CardQuoteProps>;
     /** 元信息卡：标题 + 徽章 + 描述 + 左右页脚 */
     Meta: React.FC<CardMetaProps>;
+    /** 指标卡：标签 + 数值 + 可选图标 / hint / 加载态（仪表盘统计卡片） */
+    Info: React.FC<CardInfoProps>;
+    /** 统计面板：Grafana 风格超大数值 + 迷你折线 / 面积 / 柱状图 / 角标 / 填充色 */
+    Stat: React.FC<CardStatProps>;
 }
 declare const CardWithCompounds: CardCompound;
 export default CardWithCompounds;

package/dist/components/Card/index.js

@@ -173,9 +173,199 @@ var r = ({ children: n, variant: r, bordered: i = !1, dash: a = !1, side: o = !1
 			})
 		]
 	})
-}), h = r;
-h.Title = i, h.Body = a, h.Actions = o, h.Figure = l, h.Feature = f, h.Quote = p, h.Meta = m;
+}), h = {
+	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"
+	}
+}, g = ({ label: r, value: i, icon: a, iconPosition: o = "top", iconShape: s = "square", iconBoxed: c = !0, tone: l = "primary", hint: d, loading: f = !1, variant: p, bordered: m = !0, glass: g = !1, className: _ = "", onClick: v }) => {
+	let y = h[l], b = u({
+		variant: p,
+		bordered: m,
+		glass: g,
+		className: e("bg-base-200 p-4", _)
+	}), x = a && /* @__PURE__ */ t("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__ */ t("span", {
+		className: e(o === "left" ? "flex shrink-0" : "inline-flex", "[&>svg]:h-6 [&>svg]:w-6", y.text),
+		children: a
+	});
+	return o === "left" ? /* @__PURE__ */ t("div", {
+		className: e(b, "transition-shadow duration-300 hover:shadow-xl"),
+		onClick: v,
+		children: /* @__PURE__ */ n("div", {
+			className: "flex items-center gap-3",
+			children: [c ? x : S, /* @__PURE__ */ n("div", {
+				className: "min-w-0 flex-1",
+				children: [
+					/* @__PURE__ */ t("span", {
+						className: "block truncate text-xs font-medium text-base-content/60",
+						children: r
+					}),
+					f ? /* @__PURE__ */ t("div", { className: "mt-1 h-6 w-14 animate-pulse rounded bg-base-content/10" }) : /* @__PURE__ */ t("p", {
+						className: "truncate text-xl font-bold leading-tight text-base-content",
+						children: i
+					}),
+					d && /* @__PURE__ */ t("p", {
+						className: "mt-0.5 truncate text-[11px] text-base-content/50",
+						children: d
+					})
+				]
+			})]
+		})
+	}) : /* @__PURE__ */ n("div", {
+		className: e(b, "transition-shadow duration-300 hover:shadow-xl"),
+		onClick: v,
+		children: [
+			/* @__PURE__ */ n("div", {
+				className: "mb-2 flex items-center justify-between gap-2",
+				children: [/* @__PURE__ */ t("span", {
+					className: "truncate text-xs font-medium text-base-content/60",
+					children: r
+				}), c ? x : S]
+			}),
+			f ? /* @__PURE__ */ t("div", { className: "h-7 w-14 animate-pulse rounded bg-base-content/10" }) : /* @__PURE__ */ t("p", {
+				className: "text-2xl font-bold leading-none text-base-content",
+				children: i
+			}),
+			d && /* @__PURE__ */ t("p", {
+				className: "mt-1.5 text-[11px] text-base-content/50",
+				children: d
+			})
+		]
+	});
+}, _ = {
+	primary: "text-primary",
+	success: "text-success",
+	warning: "text-warning",
+	info: "text-info",
+	error: "text-error",
+	neutral: "text-base-content/70"
+}, 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"
+}, y = {
+	md: "text-2xl",
+	lg: "text-4xl",
+	xl: "text-5xl",
+	"2xl": "text-6xl"
+}, b = (e) => e === "neutral" ? "var(--color-base-content)" : `var(--color-${e})`, x = ({ data: e, type: r, 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 (r === "bar") {
+		let n = 100 / e.length;
+		return /* @__PURE__ */ t("svg", {
+			viewBox: `0 0 100 ${i}`,
+			preserveAspectRatio: "none",
+			className: "block w-full",
+			style: { height: i },
+			"aria-hidden": "true",
+			children: e.map((e, r) => /* @__PURE__ */ t("rect", {
+				x: s(r) - n / 2,
+				y: c(e),
+				width: n * .8,
+				height: Math.max(1, i - 3 - c(e)),
+				fill: "currentColor"
+			}, r))
+		});
+	}
+	return r === "area" ? /* @__PURE__ */ n("svg", {
+		viewBox: `0 0 100 ${i}`,
+		preserveAspectRatio: "none",
+		className: "block w-full",
+		style: { height: i },
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ t("path", {
+			d: `M0,${i} L${l.join(" L")} L100,${i} Z`,
+			fill: "currentColor",
+			opacity: .18
+		}), /* @__PURE__ */ t("polyline", {
+			points: l.join(" "),
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 1.5,
+			vectorEffect: "non-scaling-stroke"
+		})]
+	}) : /* @__PURE__ */ t("svg", {
+		viewBox: `0 0 100 ${i}`,
+		preserveAspectRatio: "none",
+		className: "block w-full",
+		style: { height: i },
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ t("polyline", {
+			points: l.join(" "),
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 1.5,
+			vectorEffect: "non-scaling-stroke"
+		})
+	});
+}, S = ({ label: e, value: r, 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__ */ t(x, {
+		data: d,
+		type: f,
+		height: p
+	}) : null), C = h ? "" : _[i], w = h ? "opacity-80" : "text-base-content/60";
+	return /* @__PURE__ */ n("div", {
+		onClick: g,
+		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__ */ t("span", {
+				"aria-hidden": "true",
+				className: "absolute right-0 top-0 h-0 w-0",
+				style: {
+					borderTop: "14px solid " + b(i),
+					borderLeft: "14px solid transparent"
+				}
+			}),
+			/* @__PURE__ */ t("div", {
+				className: `truncate text-xs font-medium ${w} ${l === "center" ? "text-center" : ""}`.trim(),
+				children: e
+			}),
+			/* @__PURE__ */ t("div", {
+				className: `flex min-h-[3rem] flex-1 items-center py-1 ${l === "center" ? "justify-center" : "justify-start"}`,
+				children: a ? /* @__PURE__ */ t("span", { className: `inline-block h-8 w-16 animate-pulse rounded ${h ? "bg-white/25" : "bg-base-content/10"}` }) : /* @__PURE__ */ n("span", {
+					className: `leading-none tracking-tight ${y[c]} font-semibold ${h ? "" : C}`.trim(),
+					children: [r, s != null && s !== "" && /* @__PURE__ */ t("span", {
+						className: "ml-0.5 text-[0.45em] font-semibold",
+						children: s
+					})]
+				})
+			}),
+			S && /* @__PURE__ */ t("div", {
+				className: `-mx-3 -mb-3 mt-1 ${h ? "text-white" : _[i]}`,
+				children: S
+			})
+		]
+	});
+}, C = r;
+C.Title = i, C.Body = a, C.Actions = o, C.Figure = l, C.Feature = f, C.Quote = p, C.Meta = m, C.Info = g, C.Stat = S;
 //#endregion
-export { h as default };
+export { C as default };
 
 //# sourceMappingURL=index.js.map