dishui 0.0.64 → 0.0.66

package/dist/components/StatCard/index.js

@@ -1,62 +1,193 @@
-import b from "../Card/index.js";
+import { cn as e } from "../../utils/cn.js";
+import t from "../Card/index.js";
 import "react";
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-var x = {
-  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"
-  }
-}, u = ({ label: n, value: o, icon: t, tone: c = "primary", hint: r, loading: i = !1, className: m = "" }) => {
-  const s = x[c];
-  return /* @__PURE__ */ a(b, {
-    bordered: !0,
-    glass: !1,
-    hover: !0,
-    className: `bg-base-200 p-4 ${m}`.trim(),
-    children: [
-      /* @__PURE__ */ a("div", {
-        className: "mb-2 flex items-center justify-between gap-2",
-        children: [/* @__PURE__ */ e("span", {
-          className: "truncate text-xs font-medium text-base-content/60",
-          children: n
-        }), t && /* @__PURE__ */ e("span", {
-          className: `rounded-md p-1.5 ${s.bg} [&>svg]:h-4 [&>svg]:w-4 ${s.text}`.trim(),
-          children: t
-        })]
-      }),
-      i ? /* @__PURE__ */ e("div", { className: "h-7 w-14 animate-pulse rounded bg-base-content/10" }) : /* @__PURE__ */ e("p", {
-        className: "text-2xl font-bold leading-none text-base-content",
-        children: o
-      }),
-      r && /* @__PURE__ */ e("p", {
-        className: "mt-1.5 text-[11px] text-base-content/50",
-        children: r
-      })
-    ]
-  });
-};
-export {
-  u as default
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/StatCard/index.tsx
+var i = {
+	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"
+	}
+}, a = {
+	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"
+}, o = {
+	md: "text-2xl",
+	lg: "text-4xl",
+	xl: "text-5xl",
+	"2xl": "text-6xl"
+}, s = (e) => e === "neutral" ? "var(--color-base-content)" : `var(--color-${e})`, c = ({ 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") {
+		let t = 100 / e.length;
+		return /* @__PURE__ */ n("svg", {
+			viewBox: `0 0 100 ${i}`,
+			preserveAspectRatio: "none",
+			className: "block w-full",
+			style: { height: i },
+			"aria-hidden": "true",
+			children: e.map((e, r) => /* @__PURE__ */ n("rect", {
+				x: s(r) - t / 2,
+				y: c(e),
+				width: t * .8,
+				height: Math.max(1, i - 3 - c(e)),
+				fill: "currentColor"
+			}, r))
+		});
+	}
+	return t === "area" ? /* @__PURE__ */ r("svg", {
+		viewBox: `0 0 100 ${i}`,
+		preserveAspectRatio: "none",
+		className: "block w-full",
+		style: { height: i },
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ n("path", {
+			d: `M0,${i} L${l.join(" L")} L100,${i} Z`,
+			fill: "currentColor",
+			opacity: .18
+		}), /* @__PURE__ */ n("polyline", {
+			points: l.join(" "),
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 1.5,
+			vectorEffect: "non-scaling-stroke"
+		})]
+	}) : /* @__PURE__ */ n("svg", {
+		viewBox: `0 0 100 ${i}`,
+		preserveAspectRatio: "none",
+		className: "block w-full",
+		style: { height: i },
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ n("polyline", {
+			points: l.join(" "),
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 1.5,
+			vectorEffect: "non-scaling-stroke"
+		})
+	});
+}, l = ({ label: l, value: u, icon: d, iconPosition: f = "top", tone: p = "primary", hint: m, loading: h = !1, className: g = "", panel: _ = !1, unit: v, valueSize: y = "xl", align: b = "left", sparkline: x, sparklineData: S, sparklineType: C = "line", sparklineHeight: w = 36, indicator: T = !1, filled: E = !1, onClick: D }) => {
+	let O = i[p];
+	if (_) {
+		let t = x ?? (S && S.length >= 2 ? /* @__PURE__ */ n(c, {
+			data: S,
+			type: C,
+			height: w
+		}) : null), i = E ? "" : O.text, d = E ? "opacity-80" : "text-base-content/60";
+		return /* @__PURE__ */ r("div", {
+			onClick: D,
+			className: e("relative flex flex-col overflow-hidden rounded-lg p-3", E ? a[p] : "border border-base-300/60 bg-base-200", D && "cursor-pointer transition-colors hover:border-primary/40", g),
+			children: [
+				T && !E && /* @__PURE__ */ n("span", {
+					"aria-hidden": "true",
+					className: "absolute right-0 top-0 h-0 w-0",
+					style: {
+						borderTop: "14px solid " + s(p),
+						borderLeft: "14px solid transparent"
+					}
+				}),
+				/* @__PURE__ */ n("div", {
+					className: e("truncate text-xs font-medium", d, b === "center" && "text-center"),
+					children: l
+				}),
+				/* @__PURE__ */ n("div", {
+					className: e("flex min-h-[3rem] flex-1 items-center py-1", b === "center" ? "justify-center" : "justify-start"),
+					children: h ? /* @__PURE__ */ n("span", { className: e("inline-block h-8 w-16 animate-pulse rounded", E ? "bg-white/25" : "bg-base-content/10") }) : /* @__PURE__ */ r("span", {
+						className: e("leading-none tracking-tight", o[y], "font-semibold", E ? "" : i),
+						children: [u, v != null && v !== "" && /* @__PURE__ */ n("span", {
+							className: "ml-0.5 text-[0.45em] font-semibold",
+							children: v
+						})]
+					})
+				}),
+				t && /* @__PURE__ */ n("div", {
+					className: e("-mx-3 -mb-3 mt-1", E ? "text-white" : O.text),
+					children: t
+				})
+			]
+		});
+	}
+	return f === "left" ? /* @__PURE__ */ n(t, {
+		bordered: !0,
+		glass: !1,
+		hover: !0,
+		className: `bg-base-200 p-4 ${g}`.trim(),
+		children: /* @__PURE__ */ r("div", {
+			className: "flex items-center gap-3",
+			children: [d && /* @__PURE__ */ n("span", {
+				className: `flex shrink-0 items-center justify-center rounded-lg p-2.5 ${O.bg} [&>svg]:h-5 [&>svg]:w-5 ${O.text}`.trim(),
+				children: d
+			}), /* @__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: l
+					}),
+					h ? /* @__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: u
+					}),
+					m && /* @__PURE__ */ n("p", {
+						className: "mt-0.5 truncate text-[11px] text-base-content/50",
+						children: m
+					})
+				]
+			})]
+		})
+	}) : /* @__PURE__ */ r(t, {
+		bordered: !0,
+		glass: !1,
+		hover: !0,
+		className: `bg-base-200 p-4 ${g}`.trim(),
+		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: l
+				}), d && /* @__PURE__ */ n("span", {
+					className: `rounded-md p-1.5 ${O.bg} [&>svg]:h-4 [&>svg]:w-4 ${O.text}`.trim(),
+					children: d
+				})]
+			}),
+			h ? /* @__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: u
+			}),
+			m && /* @__PURE__ */ n("p", {
+				className: "mt-1.5 text-[11px] text-base-content/50",
+				children: m
+			})
+		]
+	});
 };
+//#endregion
+export { l as default };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/StatCard/index.tsx"],"sourcesContent":["import React from 'react';\nimport Card from '../Card';\n\nexport type StatCardProps = {\n    /** 指标名称 */\n    label: React.ReactNode;\n    /** 指标值（数字或短文本） */\n    value: React.ReactNode;\n    /** 右上角图标 */\n    icon?: React.ReactNode;\n    /** 色调（影响图标底色与文字色） */\n    tone?: 'primary' | 'success' | 'warning' | 'info' | 'error' | 'neutral';\n    /** 值下方的小字说明 */\n    hint?: React.ReactNode;\n    /** 加载态：值显示为骨架 */\n    loading?: boolean;\n    className?: string;\n};\n\nconst TONE_CLASS: Record<NonNullable<StatCardProps['tone']>, { text: string; bg: string }> = {\n    primary: { text: 'text-primary', bg: 'bg-primary/10' },\n    success: { text: 'text-success', bg: 'bg-success/10' },\n    warning: { text: 'text-warning', bg: 'bg-warning/10' },\n    info: { text: 'text-info', bg: 'bg-info/10' },\n    error: { text: 'text-error', bg: 'bg-error/10' },\n    neutral: { text: 'text-base-content/70', bg: 'bg-base-content/5' },\n};\n\n/**\n * 统计卡片：仪表盘等场景的「标签 + 数值 + 图标」小卡。\n * 内部基于 Card 组件，默认紧凑内边距与小号字体。\n */\nconst StatCard = ({\n    label,\n    value,\n    icon,\n    tone = 'primary',\n    hint,\n    loading = false,\n    className = '',\n}: StatCardProps) => {\n    const t = TONE_CLASS[tone];\n\n    return (\n        <Card bordered glass={false} hover className={`bg-base-200 p-4 ${className}`.trim()}>\n            <div className=\"mb-2 flex items-center justify-between gap-2\">\n                <span className=\"truncate text-xs font-medium text-base-content/60\">{label}</span>\n                {icon && (\n                    <span className={`rounded-md p-1.5 ${t.bg} [&>svg]:h-4 [&>svg]:w-4 ${t.text}`.trim()}>\n                        {icon}\n                    </span>\n                )}\n            </div>\n            {loading ? (\n                <div className=\"h-7 w-14 animate-pulse rounded bg-base-content/10\" />\n            ) : (\n                <p className=\"text-2xl font-bold leading-none text-base-content\">{value}</p>\n            )}\n            {hint && <p className=\"mt-1.5 text-[11px] text-base-content/50\">{hint}</p>}\n        </Card>\n    );\n};\n\nexport default StatCard;\n"],"mappings":";;;AAmBA,IAAM,IAAuF;AAAA,EACzF,SAAS;AAAA,IAAE,MAAM;AAAA,IAAgB,IAAI;AAAA,EAAgB;AAAA,EACrD,SAAS;AAAA,IAAE,MAAM;AAAA,IAAgB,IAAI;AAAA,EAAgB;AAAA,EACrD,SAAS;AAAA,IAAE,MAAM;AAAA,IAAgB,IAAI;AAAA,EAAgB;AAAA,EACrD,MAAM;AAAA,IAAE,MAAM;AAAA,IAAa,IAAI;AAAA,EAAa;AAAA,EAC5C,OAAO;AAAA,IAAE,MAAM;AAAA,IAAc,IAAI;AAAA,EAAc;AAAA,EAC/C,SAAS;AAAA,IAAE,MAAM;AAAA,IAAwB,IAAI;AAAA,EAAoB;AACrE,GAMM,IAAA,CAAY,EACd,OAAA,GACA,OAAA,GACA,MAAA,GACA,MAAA,IAAO,WACP,MAAA,GACA,SAAA,IAAU,IACV,WAAA,IAAY,GAAA,MACK;AACjB,QAAM,IAAI,EAAW,CAAA;AAErB,SACI,gBAAA,EAAC,GAAD;AAAA,IAAM,UAAA;AAAA,IAAS,OAAO;AAAA,IAAO,OAAA;AAAA,IAAM,WAAW,mBAAmB,CAAA,GAAY,KAAK;AAAA,cAAlF;AAAA,MACI,gBAAA,EAAC,OAAD;AAAA,QAAK,WAAU;AAAA,kBAAf,CACI,gBAAA,EAAC,QAAD;AAAA,UAAM,WAAU;AAAA,oBAAqD;AAAA,QAAY,CAAA,GAChF,KACG,gBAAA,EAAC,QAAD;AAAA,UAAM,WAAW,oBAAoB,EAAE,EAAA,4BAA8B,EAAE,IAAA,GAAO,KAAK;AAAA,oBAC9E;AAAA,QACC,CAAA,CAET;AAAA;MACJ,IACG,gBAAA,EAAC,OAAD,EAAK,WAAU,oDAAqD,CAAA,IAEpE,gBAAA,EAAC,KAAD;AAAA,QAAG,WAAU;AAAA,kBAAqD;AAAA,MAAS,CAAA;AAAA,MAE9E,KAAQ,gBAAA,EAAC,KAAD;AAAA,QAAG,WAAU;AAAA,kBAA2C;AAAA,MAAQ,CAAA;AAAA,IACvE;AAAA;AAEd"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/StatCard/index.tsx"],"sourcesContent":["import React from 'react';\nimport Card from '../Card';\nimport { cn } from '../../utils/cn';\n\nexport type StatCardProps = {\n    /** 指标名称 */\n    label: React.ReactNode;\n    /** 指标值（数字或短文本） */\n    value: React.ReactNode;\n    /** 右上角图标 */\n    icon?: React.ReactNode;\n    /** 图标位置：`top`（默认，图标在右上角）/ `left`（图标在左，文字居右） */\n    iconPosition?: 'top' | 'left';\n    /** 色调（影响图标底色与文字色） */\n    tone?: 'primary' | 'success' | 'warning' | 'info' | 'error' | 'neutral';\n    /** 值下方的小字说明 */\n    hint?: React.ReactNode;\n    /** 加载态：值显示为骨架 */\n    loading?: boolean;\n    className?: string;\n\n    // ─── Grafana 风格统计面板（panel 模式）────────────────────────\n    /**\n     * 启用统计面板样式：标签在上、超大数值居中、可选迷你图与角标三角，\n     * 对应 Grafana 的 stat panel 外观。\n     */\n    panel?: boolean;\n    /** 数值单位后缀（如 `K`、`%`），以小号字体渲染在数值右侧。 */\n    unit?: React.ReactNode;\n    /** 面板数值字号（panel 模式），默认 `xl`。 */\n    valueSize?: 'md' | 'lg' | 'xl' | '2xl';\n    /** 面板内容对齐（panel 模式），默认 `left`。 */\n    align?: 'left' | 'center';\n    /** 直接传入迷你图节点（优先于 sparklineData）。 */\n    sparkline?: React.ReactNode;\n    /** 迷你图数据：传入数值数组后自动渲染 sparkline。 */\n    sparklineData?: number[];\n    /** 迷你图类型：折线 / 面积 / 柱状。 */\n    sparklineType?: 'line' | 'area' | 'bar';\n    /** 迷你图高度（px）。 */\n    sparklineHeight?: number;\n    /** 右上角状态三角（Grafana 阈值指示）。 */\n    indicator?: boolean;\n    /** 整卡填充 tone 底色、文字用对应 content 色（图 RabbitMQ 风格）。 */\n    filled?: boolean;\n    /** 点击回调（面板常用于跳转详情）。 */\n    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\n};\n\nconst TONE_CLASS: Record<NonNullable<StatCardProps['tone']>, { text: string; bg: string }> = {\n    primary: { text: 'text-primary', bg: 'bg-primary/10' },\n    success: { text: 'text-success', bg: 'bg-success/10' },\n    warning: { text: 'text-warning', bg: 'bg-warning/10' },\n    info: { text: 'text-info', bg: 'bg-info/10' },\n    error: { text: 'text-error', bg: 'bg-error/10' },\n    neutral: { text: 'text-base-content/70', bg: 'bg-base-content/5' },\n};\n\n/** panel 填充模式：整卡 tone 底色 + 对应 content 文字色 */\nconst FILLED_CLASS: Record<NonNullable<StatCardProps['tone']>, string> = {\n    primary: 'bg-primary text-primary-content',\n    success: 'bg-success text-success-content',\n    warning: 'bg-warning text-warning-content',\n    info: 'bg-info text-info-content',\n    error: 'bg-error text-error-content',\n    neutral: 'bg-neutral text-neutral-content',\n};\n\nconst VALUE_SIZE_CLASS: Record<NonNullable<StatCardProps['valueSize']> & string, string> = {\n    md: 'text-2xl',\n    lg: 'text-4xl',\n    xl: 'text-5xl',\n    '2xl': 'text-6xl',\n};\n\nconst cssVarColor = (tone: NonNullable<StatCardProps['tone']>) =>\n    tone === 'neutral' ? 'var(--color-base-content)' : `var(--color-${tone})`;\n\n/** 由数值数组生成迷你图（viewBox 拉伸铺满，描边不随宽度变形） */\nconst MiniSparkline: React.FC<{\n    data: number[];\n    type: 'line' | 'area' | 'bar';\n    height: number;\n}> = ({ data, type, height }) => {\n    if (!data || data.length < 2) return null;\n    const w = 100;\n    const pad = 3;\n    const min = Math.min(...data);\n    const max = Math.max(...data);\n    const range = max - min || 1;\n    const px = (i: number) => (i / (data.length - 1)) * w;\n    const py = (v: number) => height - pad - ((v - min) / range) * (height - pad * 2);\n    const points = data.map((v, i) => `${px(i).toFixed(2)},${py(v).toFixed(2)}`);\n\n    if (type === 'bar') {\n        const bw = w / data.length;\n        return (\n            <svg\n                viewBox={`0 0 ${w} ${height}`}\n                preserveAspectRatio=\"none\"\n                className=\"block w-full\"\n                style={{ height }}\n                aria-hidden=\"true\"\n            >\n                {data.map((v, i) => (\n                    <rect\n                        key={i}\n                        x={px(i) - bw / 2}\n                        y={py(v)}\n                        width={bw * 0.8}\n                        height={Math.max(1, height - pad - py(v))}\n                        fill=\"currentColor\"\n                    />\n                ))}\n            </svg>\n        );\n    }\n\n    if (type === 'area') {\n        return (\n            <svg\n                viewBox={`0 0 ${w} ${height}`}\n                preserveAspectRatio=\"none\"\n                className=\"block w-full\"\n                style={{ height }}\n                aria-hidden=\"true\"\n            >\n                <path\n                    d={`M0,${height} L${points.join(' L')} L${w},${height} Z`}\n                    fill=\"currentColor\"\n                    opacity={0.18}\n                />\n                <polyline\n                    points={points.join(' ')}\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth={1.5}\n                    vectorEffect=\"non-scaling-stroke\"\n                />\n            </svg>\n        );\n    }\n\n    return (\n        <svg\n            viewBox={`0 0 ${w} ${height}`}\n            preserveAspectRatio=\"none\"\n            className=\"block w-full\"\n            style={{ height }}\n            aria-hidden=\"true\"\n        >\n            <polyline\n                points={points.join(' ')}\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth={1.5}\n                vectorEffect=\"non-scaling-stroke\"\n            />\n        </svg>\n    );\n};\n\n/**\n * 统计卡片：仪表盘等场景的「标签 + 数值 + 图标」小卡。\n * 内部基于 Card 组件，默认紧凑内边距与小号字体。\n *\n * 传入 `panel` 后切换为 Grafana 风格统计面板：\n * 大号数值、单位后缀、迷你折线/面积/柱状图、角标三角与整卡填充色。\n */\nconst StatCard = ({\n    label,\n    value,\n    icon,\n    iconPosition = 'top',\n    tone = 'primary',\n    hint,\n    loading = false,\n    className = '',\n    panel = false,\n    unit,\n    valueSize = 'xl',\n    align = 'left',\n    sparkline,\n    sparklineData,\n    sparklineType = 'line',\n    sparklineHeight = 36,\n    indicator = false,\n    filled = false,\n    onClick,\n}: StatCardProps) => {\n    const t = TONE_CLASS[tone];\n\n    // ─── Grafana 风格统计面板 ───\n    if (panel) {\n        const sparklineNode =\n            sparkline ??\n            (sparklineData && sparklineData.length >= 2 ? (\n                <MiniSparkline data={sparklineData} type={sparklineType} height={sparklineHeight} />\n            ) : null);\n\n        const textColor = filled ? '' : t.text;\n        const mutedText = filled ? 'opacity-80' : 'text-base-content/60';\n\n        return (\n            <div\n                onClick={onClick}\n                className={cn(\n                    'relative flex flex-col overflow-hidden rounded-lg p-3',\n                    filled ? FILLED_CLASS[tone] : 'border border-base-300/60 bg-base-200',\n                    onClick && 'cursor-pointer transition-colors hover:border-primary/40',\n                    className,\n                )}\n            >\n                {indicator && !filled && (\n                    <span\n                        aria-hidden=\"true\"\n                        className=\"absolute right-0 top-0 h-0 w-0\"\n                        style={{\n                            borderTop: '14px solid ' + cssVarColor(tone),\n                            borderLeft: '14px solid transparent',\n                        }}\n                    />\n                )}\n                <div\n                    className={cn(\n                        'truncate text-xs font-medium',\n                        mutedText,\n                        align === 'center' && 'text-center',\n                    )}\n                >\n                    {label}\n                </div>\n                <div\n                    className={cn(\n                        'flex min-h-[3rem] flex-1 items-center py-1',\n                        align === 'center' ? 'justify-center' : 'justify-start',\n                    )}\n                >\n                    {loading ? (\n                        <span\n                            className={cn(\n                                'inline-block h-8 w-16 animate-pulse rounded',\n                                filled ? 'bg-white/25' : 'bg-base-content/10',\n                            )}\n                        />\n                    ) : (\n                        <span\n                            className={cn(\n                                'leading-none tracking-tight',\n                                VALUE_SIZE_CLASS[valueSize],\n                                'font-semibold',\n                                filled ? '' : textColor,\n                            )}\n                        >\n                            {value}\n                            {unit !== undefined && unit !== null && unit !== '' && (\n                                <span className=\"ml-0.5 text-[0.45em] font-semibold\">{unit}</span>\n                            )}\n                        </span>\n                    )}\n                </div>\n                {sparklineNode && (\n                    <div className={cn('-mx-3 -mb-3 mt-1', filled ? 'text-white' : t.text)}>\n                        {sparklineNode}\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // 图标在左、文字居右的水平布局\n    if (iconPosition === 'left') {\n        return (\n            <Card bordered glass={false} hover className={`bg-base-200 p-4 ${className}`.trim()}>\n                <div className=\"flex items-center gap-3\">\n                    {icon && (\n                        <span className={`flex shrink-0 items-center justify-center rounded-lg p-2.5 ${t.bg} [&>svg]:h-5 [&>svg]:w-5 ${t.text}`.trim()}>\n                            {icon}\n                        </span>\n                    )}\n                    <div className=\"min-w-0 flex-1\">\n                        <span className=\"block truncate text-xs font-medium text-base-content/60\">{label}</span>\n                        {loading ? (\n                            <div className=\"mt-1 h-6 w-14 animate-pulse rounded bg-base-content/10\" />\n                        ) : (\n                            <p className=\"truncate text-xl font-bold leading-tight text-base-content\">{value}</p>\n                        )}\n                        {hint && <p className=\"mt-0.5 truncate text-[11px] text-base-content/50\">{hint}</p>}\n                    </div>\n                </div>\n            </Card>\n        );\n    }\n\n    return (\n        <Card bordered glass={false} hover className={`bg-base-200 p-4 ${className}`.trim()}>\n            <div className=\"mb-2 flex items-center justify-between gap-2\">\n                <span className=\"truncate text-xs font-medium text-base-content/60\">{label}</span>\n                {icon && (\n                    <span className={`rounded-md p-1.5 ${t.bg} [&>svg]:h-4 [&>svg]:w-4 ${t.text}`.trim()}>\n                        {icon}\n                    </span>\n                )}\n            </div>\n            {loading ? (\n                <div className=\"h-7 w-14 animate-pulse rounded bg-base-content/10\" />\n            ) : (\n                <p className=\"text-2xl font-bold leading-none text-base-content\">{value}</p>\n            )}\n            {hint && <p className=\"mt-1.5 text-[11px] text-base-content/50\">{hint}</p>}\n        </Card>\n    );\n};\n\nexport default StatCard;\n"],"mappings":";;;;;AAiDA,IAAM,IAAuF;CACzF,SAAS;EAAE,MAAM;EAAgB,IAAI;CAAgB;CACrD,SAAS;EAAE,MAAM;EAAgB,IAAI;CAAgB;CACrD,SAAS;EAAE,MAAM;EAAgB,IAAI;CAAgB;CACrD,MAAM;EAAE,MAAM;EAAa,IAAI;CAAa;CAC5C,OAAO;EAAE,MAAM;EAAc,IAAI;CAAc;CAC/C,SAAS;EAAE,MAAM;EAAwB,IAAI;CAAoB;AACrE,GAGM,IAAmE;CACrE,SAAS;CACT,SAAS;CACT,SAAS;CACT,MAAM;CACN,OAAO;CACP,SAAS;AACb,GAEM,IAAqF;CACvF,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACX,GAEM,KAAe,MACjB,MAAS,YAAY,8BAA8B,eAAe,EAAK,IAGrE,KAIA,EAAE,SAAM,SAAM,gBAAa;CAC7B,IAAI,CAAC,KAAQ,EAAK,SAAS,GAAG,OAAO;CACrC,IAEM,IAAM,KAAK,IAAI,GAAG,CAAI,GAEtB,IADM,KAAK,IAAI,GAAG,CACV,IAAM,KAAO,GACrB,KAAM,MAAe,KAAK,EAAK,SAAS,KAAM,KAC9C,KAAM,MAAc,IAAS,KAAQ,IAAI,KAAO,KAAU,IAAS,IACnE,IAAS,EAAK,KAAK,GAAG,MAAM,GAAG,EAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG;CAE3E,IAAI,MAAS,OAAO;EAChB,IAAM,IAAK,MAAI,EAAK;EACpB,OACI,kBAAC,OAAD;GACI,SAAS,WAAY;GACrB,qBAAoB;GACpB,WAAU;GACV,OAAO,EAAE,UAAO;GAChB,eAAY;GAEX,UAAA,EAAK,KAAK,GAAG,MACV,kBAAC,QAAD;IAEI,GAAG,EAAG,CAAC,IAAI,IAAK;IAChB,GAAG,EAAG,CAAC;IACP,OAAO,IAAK;IACZ,QAAQ,KAAK,IAAI,GAAG,IAAS,IAAM,EAAG,CAAC,CAAC;IACxC,MAAK;GACR,GANQ,CAMR,CACJ;EACA,CAAA;CAEb;CA2BA,OAzBI,MAAS,SAEL,kBAAC,OAAD;EACI,SAAS,WAAY;EACrB,qBAAoB;EACpB,WAAU;EACV,OAAO,EAAE,UAAO;EAChB,eAAY;EALhB,UAAA,CAOI,kBAAC,QAAD;GACI,GAAG,MAAM,EAAO,IAAI,EAAO,KAAK,IAAI,EAAE,QAAS,EAAO;GACtD,MAAK;GACL,SAAS;EACZ,CAAA,GACD,kBAAC,YAAD;GACI,QAAQ,EAAO,KAAK,GAAG;GACvB,MAAK;GACL,QAAO;GACP,aAAa;GACb,cAAa;EAChB,CAAA,CACA;MAKT,kBAAC,OAAD;EACI,SAAS,WAAY;EACrB,qBAAoB;EACpB,WAAU;EACV,OAAO,EAAE,UAAO;EAChB,eAAY;EAEZ,UAAA,kBAAC,YAAD;GACI,QAAQ,EAAO,KAAK,GAAG;GACvB,MAAK;GACL,QAAO;GACP,aAAa;GACb,cAAa;EAChB,CAAA;CACA,CAAA;AAEb,GASM,KAAY,EACd,UACA,UACA,SACA,kBAAe,OACf,UAAO,WACP,SACA,aAAU,IACV,eAAY,IACZ,WAAQ,IACR,SACA,eAAY,MACZ,WAAQ,QACR,cACA,kBACA,mBAAgB,QAChB,qBAAkB,IAClB,eAAY,IACZ,YAAS,IACT,iBACiB;CACjB,IAAM,IAAI,EAAW;CAGrB,IAAI,GAAO;EACP,IAAM,IACF,MACC,KAAiB,EAAc,UAAU,IACtC,kBAAC,GAAD;GAAe,MAAM;GAAe,MAAM;GAAe,QAAQ;EAAkB,CAAA,IACnF,OAEF,IAAY,IAAS,KAAK,EAAE,MAC5B,IAAY,IAAS,eAAe;EAE1C,OACI,kBAAC,OAAD;GACa;GACT,WAAW,EACP,yDACA,IAAS,EAAa,KAAQ,yCAC9B,KAAW,4DACX,CACJ;GAPJ,UAAA;IASK,KAAa,CAAC,KACX,kBAAC,QAAD;KACI,eAAY;KACZ,WAAU;KACV,OAAO;MACH,WAAW,gBAAgB,EAAY,CAAI;MAC3C,YAAY;KAChB;IACH,CAAA;IAEL,kBAAC,OAAD;KACI,WAAW,EACP,gCACA,GACA,MAAU,YAAY,aAC1B;KAEC,UAAA;IACA,CAAA;IACL,kBAAC,OAAD;KACI,WAAW,EACP,8CACA,MAAU,WAAW,mBAAmB,eAC5C;KAEC,UAAA,IACG,kBAAC,QAAD,EACI,WAAW,EACP,+CACA,IAAS,gBAAgB,oBAC7B,EACH,CAAA,IAED,kBAAC,QAAD;MACI,WAAW,EACP,+BACA,EAAiB,IACjB,iBACA,IAAS,KAAK,CAClB;MANJ,UAAA,CAQK,GACA,KAA+B,QAAQ,MAAS,MAC7C,kBAAC,QAAD;OAAM,WAAU;OAAsC,UAAA;MAAW,CAAA,CAEnE;;IAET,CAAA;IACJ,KACG,kBAAC,OAAD;KAAK,WAAW,EAAG,oBAAoB,IAAS,eAAe,EAAE,IAAI;KAChE,UAAA;IACA,CAAA;GAER;;CAEb;CA0BA,OAvBI,MAAiB,SAEb,kBAAC,GAAD;EAAM,UAAA;EAAS,OAAO;EAAO,OAAA;EAAM,WAAW,mBAAmB,IAAY,KAAK;EAC9E,UAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACK,KACG,kBAAC,QAAD;IAAM,WAAW,8DAA8D,EAAE,GAAG,2BAA2B,EAAE,OAAO,KAAK;IACxH,UAAA;GACC,CAAA,GAEV,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACI,kBAAC,QAAD;MAAM,WAAU;MAA2D,UAAA;KAAY,CAAA;KACtF,IACG,kBAAC,OAAD,EAAK,WAAU,yDAA0D,CAAA,IAEzE,kBAAC,KAAD;MAAG,WAAU;MAA8D,UAAA;KAAS,CAAA;KAEvF,KAAQ,kBAAC,KAAD;MAAG,WAAU;MAAoD,UAAA;KAAQ,CAAA;IACjF;GACJ,CAAA,CAAA;;CACH,CAAA,IAKV,kBAAC,GAAD;EAAM,UAAA;EAAS,OAAO;EAAO,OAAA;EAAM,WAAW,mBAAmB,IAAY,KAAK;EAAlF,UAAA;GACI,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACI,kBAAC,QAAD;KAAM,WAAU;KAAqD,UAAA;IAAY,CAAA,GAChF,KACG,kBAAC,QAAD;KAAM,WAAW,oBAAoB,EAAE,GAAG,2BAA2B,EAAE,OAAO,KAAK;KAC9E,UAAA;IACC,CAAA,CAET;;GACJ,IACG,kBAAC,OAAD,EAAK,WAAU,oDAAqD,CAAA,IAEpE,kBAAC,KAAD;IAAG,WAAU;IAAqD,UAAA;GAAS,CAAA;GAE9E,KAAQ,kBAAC,KAAD;IAAG,WAAU;IAA2C,UAAA;GAAQ,CAAA;EACvE;;AAEd"}

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

@@ -0,0 +1,34 @@
+import React from 'react';
+export type SwitchProps = {
+    /** Controlled checked state. */
+    checked?: boolean;
+    /** Uncontrolled initial checked state. */
+    defaultChecked?: boolean;
+    /** Change handler; receives the new checked value. */
+    onChange?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Optional label rendered next to the switch. */
+    label?: React.ReactNode;
+    /** Label position relative to the switch. */
+    labelPosition?: 'right' | 'left';
+    /** Color variant (daisyUI). */
+    variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
+    /** Size. */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Disabled state. */
+    disabled?: boolean;
+    /** Native name attribute (useful in forms). */
+    name?: string;
+    /** Native value attribute. */
+    value?: string;
+    /** Extra class names applied to the wrapping label element. */
+    className?: string;
+    /** Inline styles applied to the wrapping label element. */
+    style?: React.CSSProperties;
+    /** id forwarded to the input. */
+    id?: string;
+};
+/**
+ * Switch —— 开关控件。基于 daisyUI `toggle`，支持受控/非受控、色调变体与尺寸。
+ */
+declare const Switch: React.FC<SwitchProps>;
+export default Switch;

package/dist/components/Switch/index.js

@@ -0,0 +1,55 @@
+import { cn as e } from "../../utils/cn.js";
+import { useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/Switch/index.tsx
+var i = {
+	default: "",
+	primary: "toggle-primary",
+	secondary: "toggle-secondary",
+	accent: "toggle-accent",
+	info: "toggle-info",
+	success: "toggle-success",
+	warning: "toggle-warning",
+	error: "toggle-error"
+}, a = {
+	xs: "toggle-xs",
+	sm: "toggle-sm",
+	md: "toggle-md",
+	lg: "toggle-lg"
+}, o = ({ checked: o, defaultChecked: s, onChange: c, label: l, labelPosition: u = "right", variant: d = "default", size: f = "sm", disabled: p = !1, name: m, value: h, className: g = "", style: _, id: v }) => {
+	let y = t((e) => {
+		c?.(e.target.checked, e);
+	}, [c]), b = e("toggle", i[d], a[f], g && !l ? g : ""), x = /* @__PURE__ */ n("input", {
+		id: v,
+		type: "checkbox",
+		role: "switch",
+		className: b,
+		checked: o,
+		defaultChecked: s,
+		onChange: y,
+		disabled: p,
+		name: m,
+		value: h
+	});
+	if (l == null || l === "") return x;
+	let S = e("label cursor-pointer inline-flex items-center gap-2 w-fit", p && "opacity-50 cursor-not-allowed", g);
+	return /* @__PURE__ */ r("label", {
+		className: S,
+		style: _,
+		children: [
+			u === "left" && /* @__PURE__ */ n("span", {
+				className: "label-text",
+				children: l
+			}),
+			x,
+			u === "right" && /* @__PURE__ */ n("span", {
+				className: "label-text",
+				children: l
+			})
+		]
+	});
+};
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Switch/index.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchProps = {\n  /** Controlled checked state. */\n  checked?: boolean;\n  /** Uncontrolled initial checked state. */\n  defaultChecked?: boolean;\n  /** Change handler; receives the new checked value. */\n  onChange?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;\n  /** Optional label rendered next to the switch. */\n  label?: React.ReactNode;\n  /** Label position relative to the switch. */\n  labelPosition?: 'right' | 'left';\n  /** Color variant (daisyUI). */\n  variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';\n  /** Size. */\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  /** Disabled state. */\n  disabled?: boolean;\n  /** Native name attribute (useful in forms). */\n  name?: string;\n  /** Native value attribute. */\n  value?: string;\n  /** Extra class names applied to the wrapping label element. */\n  className?: string;\n  /** Inline styles applied to the wrapping label element. */\n  style?: React.CSSProperties;\n  /** id forwarded to the input. */\n  id?: string;\n};\n\nconst VARIANT_CLASS: Record<NonNullable<SwitchProps['variant']>, string> = {\n  default: '',\n  primary: 'toggle-primary',\n  secondary: 'toggle-secondary',\n  accent: 'toggle-accent',\n  info: 'toggle-info',\n  success: 'toggle-success',\n  warning: 'toggle-warning',\n  error: 'toggle-error',\n};\n\nconst SIZE_CLASS: Record<NonNullable<SwitchProps['size']>, string> = {\n  xs: 'toggle-xs',\n  sm: 'toggle-sm',\n  md: 'toggle-md',\n  lg: 'toggle-lg',\n};\n\n/**\n * Switch —— 开关控件。基于 daisyUI `toggle`，支持受控/非受控、色调变体与尺寸。\n */\nconst Switch: React.FC<SwitchProps> = ({\n  checked,\n  defaultChecked,\n  onChange,\n  label,\n  labelPosition = 'right',\n  variant = 'default',\n  size = 'sm',\n  disabled = false,\n  name,\n  value,\n  className = '',\n  style,\n  id,\n}) => {\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e.target.checked, e);\n    },\n    [onChange],\n  );\n\n  const inputClasses = cn(\n    'toggle',\n    VARIANT_CLASS[variant],\n    SIZE_CLASS[size],\n    className && !label ? className : '',\n  );\n\n  const input = (\n    <input\n      id={id}\n      type=\"checkbox\"\n      role=\"switch\"\n      className={inputClasses}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onChange={handleChange}\n      disabled={disabled}\n      name={name}\n      value={value}\n    />\n  );\n\n  if (label === undefined || label === null || label === '') {\n    return input;\n  }\n\n  const labelClasses = cn(\n    'label cursor-pointer inline-flex items-center gap-2 w-fit',\n    disabled && 'opacity-50 cursor-not-allowed',\n    className,\n  );\n\n  return (\n    <label className={labelClasses} style={style}>\n      {labelPosition === 'left' && <span className=\"label-text\">{label}</span>}\n      {input}\n      {labelPosition === 'right' && <span className=\"label-text\">{label}</span>}\n    </label>\n  );\n};\n\nexport default Switch;\n"],"mappings":";;;;AAgCA,IAAM,IAAqE;CACzE,SAAS;CACT,SAAS;CACT,WAAW;CACX,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;AACT,GAEM,IAA+D;CACnE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAKM,KAAiC,EACrC,YACA,mBACA,aACA,UACA,mBAAgB,SAChB,aAAU,WACV,UAAO,MACP,cAAW,IACX,SACA,UACA,eAAY,IACZ,UACA,YACI;CACJ,IAAM,IAAe,GAClB,MAA2C;EAC1C,IAAW,EAAE,OAAO,SAAS,CAAC;CAChC,GACA,CAAC,CAAQ,CACX,GAEM,IAAe,EACnB,UACA,EAAc,IACd,EAAW,IACX,KAAa,CAAC,IAAQ,IAAY,EACpC,GAEM,IACJ,kBAAC,SAAD;EACM;EACJ,MAAK;EACL,MAAK;EACL,WAAW;EACF;EACO;EAChB,UAAU;EACA;EACJ;EACC;CACR,CAAA;CAGH,IAAI,KAAiC,QAAQ,MAAU,IACrD,OAAO;CAGT,IAAM,IAAe,EACnB,6DACA,KAAY,iCACZ,CACF;CAEA,OACE,kBAAC,SAAD;EAAO,WAAW;EAAqB;EAAvC,UAAA;GACG,MAAkB,UAAU,kBAAC,QAAD;IAAM,WAAU;IAAc,UAAA;GAAY,CAAA;GACtE;GACA,MAAkB,WAAW,kBAAC,QAAD;IAAM,WAAU;IAAc,UAAA;GAAY,CAAA;EACnE;;AAEX"}

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

@@ -0,0 +1,40 @@
+import React from 'react';
+export type TabPaneProps = {
+    /** Stable id for the pane (used with controlled / default value) */
+    id: string;
+    label: React.ReactNode;
+    children: React.ReactNode;
+    disabled?: boolean;
+    /** className on the tab button */
+    tabClassName?: string;
+    /** className on the active panel */
+    className?: string;
+};
+declare const TabPane: React.FC<TabPaneProps>;
+export type TabShape = 'square' | 'rounded' | 'pill' | 'trapezoid' | 'angled';
+export type TabProps = {
+    children: React.ReactNode;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (id: string) => void;
+    variant?: 'line' | 'boxed' | 'lifted' | 'bordered';
+    /** Shape of the selected-tab background.
+     *  - square: 0 radius (default for boxed/bordered)
+     *  - rounded: small radius
+     *  - pill: full radius capsule
+     *  - trapezoid: bottom-wider CSS clip-path trapezoid
+     *  - angled: slanted right edge
+     */
+    shape?: TabShape;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+    tabListClassName?: string;
+    panelClassName?: string;
+    fullWidth?: boolean;
+};
+export type TabComponent = React.FC<TabProps> & {
+    Pane: typeof TabPane;
+};
+declare const Tab: TabComponent;
+export { Tab };
+export default Tab;