@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/display/Stat.d.ts

@@ -0,0 +1,105 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type IconData } from '../base/Icon';
+import type { NumericFormat } from '../config/lang/format';
+import { type PartProps } from '../utils/props';
+import { type Tone } from '../utils/style/typography';
+import type { NumericValue } from '../utils/data/numeric';
+/** 忙碌由组件按 loading 管理 */
+export type StatManaged = 'aria-busy';
+/** 未声明的属性落到外层 dl 上 */
+export interface StatProps extends PartProps<'dl', StatManaged> {
+    /** 指标名 */
+    label: VNodeChild;
+    /** 数值：number、bigint、Decimal 按当前语言格式化并在变化时滚动；字符串原样显示（如“—”、“98.5%”） */
+    value: NumericValue | string;
+    /**
+     * 数值的格式，如两位小数 `{ minimumFractionDigits: 2 }`、百分比 `{ style: 'percent' }`；
+     * 值以元给出、按万元显示时写 `{ scale: 10_000, maximumFractionDigits: 2 }` 并配 `unit="万元"`
+     */
+    format?: NumericFormat;
+    /** 单位，跟在数值后面、字号小一档 */
+    unit?: VNodeChild;
+    /** 数值的色调：超时、缺漏这类要引起注意的数用 danger、warning；不写时是正文色 */
+    tone?: Tone;
+    /** 指标名前面的图标（装饰，对读屏隐藏） */
+    icon?: IconData;
+    /** 变化量（环比、同比）：正数向上、负数向下；默认按百分比显示（0.12 → +12%） */
+    change?: number;
+    /** 变化量的格式，默认 `{ style: 'percent', maximumFractionDigits: 1, signDisplay: 'exceptZero' }` */
+    changeFormat?: NumericFormat;
+    /** 变化量后面的说明，如“较上月” */
+    changeLabel?: VNodeChild;
+    /** 下降是好事（成本、耗时、故障数）：下降显示成功色、上升显示危险色 */
+    invertChange?: boolean;
+    /** 数值下面的补充说明（一行小字） */
+    description?: VNodeChild;
+    /** 底栏：上方一条分隔线；放两项时分别靠两端，如“年度目标 2,000 万元”与“完成 81%” */
+    footer?: VNodeChild;
+    /** 数值下面占满整宽的补充内容：进度条、迷你图 */
+    children?: VNodeChild;
+    /**
+     * 加载中：数值与变化量换成扫光的骨架，带 aria-busy；很快完成时不闪
+     * @default false
+     */
+    loading?: boolean;
+    /** 指标名（dt）的部件属性 */
+    propsLabel?: PartProps<'dt'>;
+    /** 数值（dd）的部件属性 */
+    propsValue?: PartProps<'dd'>;
+    /** 图标外层的部件属性 */
+    propsIcon?: PartProps<'span', 'aria-hidden'>;
+    /** 数字本身（AnimatedNumber 或字符串值的 span）的部件属性 */
+    propsNumber?: PartProps<'span', 'prefix'>;
+    /** 单位的部件属性 */
+    propsUnit?: PartProps<'span'>;
+    /** 变化（dd）的部件属性 */
+    propsChange?: PartProps<'dd'>;
+    /** 变化后面的说明的部件属性 */
+    propsChangeLabel?: PartProps<'span'>;
+    /** 补充说明（dd）的部件属性 */
+    propsDescription?: PartProps<'dd'>;
+    /** 补充内容（dd，children 的外层）的部件属性 */
+    propsBody?: PartProps<'dd'>;
+    /** 底栏（dd）的部件属性 */
+    propsFooter?: PartProps<'dd'>;
+}
+/** Stat 的样式：root、label、icon、value、number、unit、change、description、body、footer、skeleton… */
+export declare const statStyles: Readonly<{
+    body: css.CompiledStyles;
+    change: css.CompiledStyles;
+    changeLabel: css.CompiledStyles;
+    changeSkeleton: css.CompiledStyles;
+    description: css.CompiledStyles;
+    footer: css.CompiledStyles;
+    icon: css.CompiledStyles;
+    label: css.CompiledStyles;
+    number: css.CompiledStyles;
+    numberSkeleton: css.CompiledStyles;
+    root: css.CompiledStyles;
+    unit: css.CompiledStyles;
+    value: css.CompiledStyles;
+}>;
+/** 统计数值：指标名、数值与单位、图标、变化量 */
+export declare const Stat: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<StatProps>;
+/** 未声明的属性落到外层 div 上 */
+export interface StatGroupProps extends PartProps<'div'> {
+    /**
+     * 每个指标最窄多宽（CSS 长度）：放不下就换行
+     * @default '9rem'
+     */
+    minItemWidth?: string;
+    /** Stat */
+    children?: VNodeChild;
+}
+/** StatGroup 的样式：root、item */
+export declare const statGroupStyles: Readonly<{
+    item: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** StatGroup 的动态样式：列宽 */
+export declare const statGroupDynamicStyles: Readonly<{
+    readonly columns: (min: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 一排指标：按宽度换行，同一行里指标之间一条竖线 */
+export declare const StatGroup: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<StatGroupProps>;

package/dist/display/Stat.js

@@ -0,0 +1,268 @@
+import { t } from "../config/theme/tokens.js";
+import { hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { toneStyles } from "../utils/style/typography.js";
+import { Icon } from "../base/Icon.js";
+import { useDelayedLoading } from "../utils/motion/delayed-loading.js";
+import { AnimatedNumber } from "./AnimatedNumber.js";
+import { shimmerStyles } from "../utils/style/shimmer.js";
+import { Skeleton } from "../feedback/Skeleton.js";
+import { Fragment, createVNode, mergeProps } from "vue";
+import { _component, childrenProp, createContext, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { TrendingDown, TrendingUp } from "@lucide/icons";
+//#region src/display/Stat.tsx
+/**
+* 统计数值（dl）：指标名、数值与单位、可选的图标与环比变化。仪表盘顶部的一排卡片、详情页的关键指标。
+* 外观只是内容，放进 Card、Grid 里组合：
+*
+*   <Card><Stat label="实际销售额" value={910.36} unit="万元" icon={Wallet} change={0.123} changeLabel="较上月" /></Card>
+*   <Stat label="测算销售" value={a} format={wan} unit="万元" footer={<><span>年度目标 2,000 万元</span><span>完成 81%</span></>}>
+*     <Progress value={81} size="xs" aria-label="年度目标完成度" />
+*   </Stat>
+*
+* 排版（参考 Ant Design Pro 的 ChartCard）：第一行是图标与指标名、结束边是变化量；第二行是数值；
+* children 是数值下面占满整宽的补充内容（进度条、迷你图）；footer 是底栏，上方一条分隔线，放两项时分别靠两端。
+* 卡片再宽，内容也铺满整行，不在中间留一大块空白。
+*
+* 一排几个指标用 StatGroup：按宽度换行，指标之间一条竖线（同一行里）：
+*
+*   <StatGroup><Stat label="超时" value={10} tone="danger" /><Stat label="待验收" value={5} /></StatGroup>
+*
+* 数值变化时滚动过渡（AnimatedNumber），读屏只读终值；变化量按正负着色并带箭头，
+* 成本、耗时这类“越低越好”的指标写 invertChange。加载中（loading）数值与变化量换成扫光的骨架，指标名照常显示。
+*/
+/** 忙碌由组件按 loading 管理 */
+/** 未声明的属性落到外层 dl 上 */
+var CHANGE_FORMAT = {
+	style: "percent",
+	maximumFractionDigits: 1,
+	signDisplay: "exceptZero"
+};
+/** 在 StatGroup 里：指标之间画竖线 */
+var StatGroupContext = createContext("StatGroup");
+/** Stat 的样式：root、label、icon、value、number、unit、change、description、body、footer、skeleton… */
+var statStyles = css.create({
+	root: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		columnGap: "_sm",
+		rowGap: "_xs",
+		margin: 0,
+		minWidth: 0
+	},
+	label: {
+		order: 0,
+		flexGrow: 1,
+		display: "flex",
+		alignItems: "center",
+		gap: "_sm",
+		minWidth: 0,
+		margin: 0,
+		color: "_textMuted",
+		fontSize: "_sm"
+	},
+	icon: {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		flexShrink: 0,
+		width: "1.75em",
+		height: "1.75em",
+		borderRadius: "_md",
+		backgroundColor: "_accentSoft",
+		color: "_accentText"
+	},
+	value: {
+		order: 2,
+		flexBasis: "100%",
+		display: "flex",
+		alignItems: "baseline",
+		flexWrap: "wrap",
+		gap: "_xs",
+		margin: 0
+	},
+	number: {
+		fontSize: "_xxl",
+		fontWeight: "_bold",
+		lineHeight: "_tight",
+		color: "_text",
+		fontVariantNumeric: "tabular-nums"
+	},
+	unit: {
+		color: "_textMuted",
+		fontSize: "_xs"
+	},
+	change: {
+		order: 1,
+		display: "flex",
+		alignItems: "center",
+		gap: "_xs",
+		fontSize: "_xs",
+		margin: 0,
+		whiteSpace: "nowrap"
+	},
+	changeLabel: { color: "_textMuted" },
+	description: {
+		order: 3,
+		flexBasis: "100%",
+		color: "_textMuted",
+		fontSize: "_xs",
+		margin: 0
+	},
+	body: {
+		order: 3,
+		flexBasis: "100%",
+		margin: 0,
+		minWidth: 0
+	},
+	footer: {
+		order: 3,
+		flexBasis: "100%",
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "baseline",
+		justifyContent: "space-between",
+		columnGap: "_md",
+		rowGap: "_xs",
+		margin: 0,
+		marginBlockStart: "_xs",
+		paddingBlockStart: "_sm",
+		borderBlockStartWidth: "_xs",
+		borderBlockStartStyle: "solid",
+		borderBlockStartColor: "_borderMuted",
+		color: "_textMuted",
+		fontSize: "_xs"
+	},
+	numberSkeleton: {
+		fontSize: "_xxl",
+		width: "4em",
+		height: "1.25em"
+	},
+	changeSkeleton: {
+		width: "6em",
+		height: "1.5em"
+	}
+});
+/** 统计数值：指标名、数值与单位、图标、变化量 */
+var Stat = /*#__PURE__*/ _component((_props, _ctx) => {
+	const label = readonlyProp(_props, "label");
+	const value = readonlyProp(_props, "value");
+	const format = readonlyProp(_props, "format");
+	const unit = readonlyProp(_props, "unit");
+	const tone = readonlyProp(_props, "tone");
+	const icon = readonlyProp(_props, "icon");
+	const change = readonlyProp(_props, "change");
+	const changeFormat = readonlyProp(_props, "changeFormat", () => CHANGE_FORMAT);
+	const changeLabel = readonlyProp(_props, "changeLabel");
+	const invertChange = readonlyProp(_props, "invertChange", false);
+	const description = readonlyProp(_props, "description");
+	const footer = readonlyProp(_props, "footer");
+	const children = childrenProp(_props);
+	const loading = readonlyProp(_props, "loading", false);
+	const propsLabel = readonlyProp(_props, "propsLabel");
+	const propsValue = readonlyProp(_props, "propsValue");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsNumber = readonlyProp(_props, "propsNumber");
+	const propsUnit = readonlyProp(_props, "propsUnit");
+	const propsChange = readonlyProp(_props, "propsChange");
+	const propsChangeLabel = readonlyProp(_props, "propsChangeLabel");
+	const propsDescription = readonlyProp(_props, "propsDescription");
+	const propsBody = readonlyProp(_props, "propsBody");
+	const propsFooter = readonlyProp(_props, "propsFooter");
+	const rest = restProps(_props, _ctx, false);
+	const grouped = StatGroupContext.inject(false);
+	const skeleton = useDelayedLoading(() => loading.value);
+	let revealing = false;
+	return () => {
+		if (skeleton.value) revealing = true;
+		const reveal = revealing && !skeleton.value && shimmerStyles.reveal;
+		const direction = change.value === void 0 || change.value === 0 ? "flat" : change.value > 0 ? "up" : "down";
+		const improved = invertChange.value ? direction === "down" : direction === "up";
+		const changeTone = direction === "flat" ? "muted" : improved ? "success" : "danger";
+		return createVNode("dl", mergeAttrs({ sx: [statStyles.root, grouped && statGroupStyles.item] }, rest, { "aria-busy": loading.value || void 0 }), [
+			createVNode("dt", mergeAttrs({ sx: statStyles.label }, propsLabel.value), [icon.value && createVNode("span", mergeAttrs({ sx: statStyles.icon }, propsIcon.value, { "aria-hidden": true }), [createVNode(Icon, { "icon": icon.value }, null)]), createVNode("span", null, [label.value])]),
+			createVNode("dd", mergeAttrs({ sx: [statStyles.value, reveal] }, propsValue.value), [skeleton.value ? createVNode(Skeleton, { "sx": statStyles.numberSkeleton }, null) : typeof value.value !== "string" ? createVNode(AnimatedNumber, mergePartProps({
+				sx: [statStyles.number, tone.value && toneStyles[tone.value]],
+				value: value.value
+			}, propsNumber.value, {
+				value: value.value,
+				format: format.value
+			}), null) : createVNode("span", mergeAttrs({ sx: [statStyles.number, tone.value && toneStyles[tone.value]] }, propsNumber.value), [value.value]), unit.value != null && !skeleton.value && createVNode("span", mergeAttrs({ sx: statStyles.unit }, propsUnit.value), [unit.value])]),
+			change.value !== void 0 && createVNode("dd", mergeProps(mergeAttrs({ sx: [statStyles.change, reveal] }, propsChange.value), { "data-trend": skeleton.value ? void 0 : direction }), [skeleton.value ? createVNode(Skeleton, { "sx": statStyles.changeSkeleton }, null) : createVNode(Fragment, null, [createVNode("span", css.attrs(toneStyles[changeTone]), [
+				direction !== "flat" && createVNode(Icon, {
+					"icon": direction === "up" ? TrendingUp : TrendingDown,
+					"aria-hidden": "true"
+				}, null),
+				" ",
+				createVNode(AnimatedNumber, {
+					"value": change.value,
+					"format": changeFormat.value
+				}, null)
+			]), changeLabel.value != null && createVNode("span", mergeAttrs({ sx: statStyles.changeLabel }, propsChangeLabel.value), [changeLabel.value])])]),
+			hasContent(description.value) && createVNode("dd", mergeAttrs({ sx: statStyles.description }, propsDescription.value), [description.value]),
+			hasContent(children.value) && createVNode("dd", mergeAttrs({ sx: statStyles.body }, propsBody.value), [children.value]),
+			hasContent(footer.value) && createVNode("dd", mergeAttrs({ sx: statStyles.footer }, propsFooter.value), [footer.value])
+		]);
+	};
+}, {
+	name: "Stat",
+	props: [
+		"label",
+		"value",
+		"format",
+		"unit",
+		"tone",
+		"icon",
+		"change",
+		"changeFormat",
+		"changeLabel",
+		"invertChange",
+		"description",
+		"footer",
+		"loading",
+		"propsLabel",
+		"propsValue",
+		"propsIcon",
+		"propsNumber",
+		"propsUnit",
+		"propsChange",
+		"propsChangeLabel",
+		"propsDescription",
+		"propsBody",
+		"propsFooter"
+	]
+});
+/** 未声明的属性落到外层 div 上 */
+/** StatGroup 的样式：root、item */
+var statGroupStyles = css.create({
+	root: {
+		display: "grid",
+		rowGap: "_md",
+		overflow: "hidden"
+	},
+	item: {
+		paddingInline: "_md",
+		marginInlineStart: `calc(-1 * ${t.borderWidths.xs})`,
+		borderInlineStartWidth: "_xs",
+		borderInlineStartStyle: "solid",
+		borderInlineStartColor: "_borderMuted"
+	}
+});
+/** StatGroup 的动态样式：列宽 */
+var statGroupDynamicStyles = css.create({ columns: (min) => ({ gridTemplateColumns: `repeat(auto-fit, minmax(min(${min}, 100%), 1fr))` }) });
+/** 一排指标：按宽度换行，同一行里指标之间一条竖线 */
+var StatGroup = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const minItemWidth = readonlyProp(_props2, "minItemWidth", "9rem");
+	const children = childrenProp(_props2);
+	const rest = restProps(_props2, _ctx2, false);
+	StatGroupContext.provide(true);
+	return () => createVNode("div", mergeAttrs({ sx: [statGroupStyles.root, css.bind(statGroupDynamicStyles.columns, () => [minItemWidth.value], true)] }, rest), [children.value]);
+}, {
+	name: "StatGroup",
+	props: ["minItemWidth"]
+});
+//#endregion
+export { Stat, StatGroup, statGroupDynamicStyles, statGroupStyles, statStyles };
+
+//# sourceMappingURL=Stat.js.map

package/dist/display/Stat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stat.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps","_Fragment"],"sources":["../../src/display/Stat.tsx"],"sourcesContent":["/**\n * 统计数值（dl）：指标名、数值与单位、可选的图标与环比变化。仪表盘顶部的一排卡片、详情页的关键指标。\n * 外观只是内容，放进 Card、Grid 里组合：\n *\n *   <Card><Stat label=\"实际销售额\" value={910.36} unit=\"万元\" icon={Wallet} change={0.123} changeLabel=\"较上月\" /></Card>\n *   <Stat label=\"测算销售\" value={a} format={wan} unit=\"万元\" footer={<><span>年度目标 2,000 万元</span><span>完成 81%</span></>}>\n *     <Progress value={81} size=\"xs\" aria-label=\"年度目标完成度\" />\n *   </Stat>\n *\n * 排版（参考 Ant Design Pro 的 ChartCard）：第一行是图标与指标名、结束边是变化量；第二行是数值；\n * children 是数值下面占满整宽的补充内容（进度条、迷你图）；footer 是底栏，上方一条分隔线，放两项时分别靠两端。\n * 卡片再宽，内容也铺满整行，不在中间留一大块空白。\n *\n * 一排几个指标用 StatGroup：按宽度换行，指标之间一条竖线（同一行里）：\n *\n *   <StatGroup><Stat label=\"超时\" value={10} tone=\"danger\" /><Stat label=\"待验收\" value={5} /></StatGroup>\n *\n * 数值变化时滚动过渡（AnimatedNumber），读屏只读终值；变化量按正负着色并带箭头，\n * 成本、耗时这类“越低越好”的指标写 invertChange。加载中（loading）数值与变化量换成扫光的骨架，指标名照常显示。\n */\nimport { TrendingDown, TrendingUp } from '@lucide/icons';\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Icon, type IconData } from '../base/Icon';\nimport type { NumericFormat } from '../config/lang/format';\nimport { Skeleton } from '../feedback/Skeleton';\nimport { useDelayedLoading } from '../utils/motion/delayed-loading';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { shimmerStyles } from '../utils/style/shimmer';\nimport { toneStyles, type Tone } from '../utils/style/typography';\nimport type { NumericValue } from '../utils/data/numeric';\nimport { AnimatedNumber, type AnimatedNumberProps } from './AnimatedNumber';\nimport { t } from '../config/theme/tokens';\n\n/** 忙碌由组件按 loading 管理 */\nexport type StatManaged = 'aria-busy';\n\n/** 未声明的属性落到外层 dl 上 */\nexport interface StatProps extends PartProps<'dl', StatManaged> {\n  /** 指标名 */\n  label: VNodeChild;\n  /** 数值：number、bigint、Decimal 按当前语言格式化并在变化时滚动；字符串原样显示（如“—”、“98.5%”） */\n  value: NumericValue | string;\n  /**\n   * 数值的格式，如两位小数 `{ minimumFractionDigits: 2 }`、百分比 `{ style: 'percent' }`；\n   * 值以元给出、按万元显示时写 `{ scale: 10_000, maximumFractionDigits: 2 }` 并配 `unit=\"万元\"`\n   */\n  format?: NumericFormat;\n  /** 单位，跟在数值后面、字号小一档 */\n  unit?: VNodeChild;\n  /** 数值的色调：超时、缺漏这类要引起注意的数用 danger、warning；不写时是正文色 */\n  tone?: Tone;\n  /** 指标名前面的图标（装饰，对读屏隐藏） */\n  icon?: IconData;\n  /** 变化量（环比、同比）：正数向上、负数向下；默认按百分比显示（0.12 → +12%） */\n  change?: number;\n  /** 变化量的格式，默认 `{ style: 'percent', maximumFractionDigits: 1, signDisplay: 'exceptZero' }` */\n  changeFormat?: NumericFormat;\n  /** 变化量后面的说明，如“较上月” */\n  changeLabel?: VNodeChild;\n  /** 下降是好事（成本、耗时、故障数）：下降显示成功色、上升显示危险色 */\n  invertChange?: boolean;\n  /** 数值下面的补充说明（一行小字） */\n  description?: VNodeChild;\n  /** 底栏：上方一条分隔线；放两项时分别靠两端，如“年度目标 2,000 万元”与“完成 81%” */\n  footer?: VNodeChild;\n  /** 数值下面占满整宽的补充内容：进度条、迷你图 */\n  children?: VNodeChild;\n  /**\n   * 加载中：数值与变化量换成扫光的骨架，带 aria-busy；很快完成时不闪\n   * @default false\n   */\n  loading?: boolean;\n  /** 指标名（dt）的部件属性 */\n  propsLabel?: PartProps<'dt'>;\n  /** 数值（dd）的部件属性 */\n  propsValue?: PartProps<'dd'>;\n  /** 图标外层的部件属性 */\n  propsIcon?: PartProps<'span', 'aria-hidden'>;\n  /** 数字本身（AnimatedNumber 或字符串值的 span）的部件属性 */\n  propsNumber?: PartProps<'span', 'prefix'>;\n  /** 单位的部件属性 */\n  propsUnit?: PartProps<'span'>;\n  /** 变化（dd）的部件属性 */\n  propsChange?: PartProps<'dd'>;\n  /** 变化后面的说明的部件属性 */\n  propsChangeLabel?: PartProps<'span'>;\n  /** 补充说明（dd）的部件属性 */\n  propsDescription?: PartProps<'dd'>;\n  /** 补充内容（dd，children 的外层）的部件属性 */\n  propsBody?: PartProps<'dd'>;\n  /** 底栏（dd）的部件属性 */\n  propsFooter?: PartProps<'dd'>;\n}\n\nconst CHANGE_FORMAT: NumericFormat = {\n  style: 'percent',\n  maximumFractionDigits: 1,\n  signDisplay: 'exceptZero',\n};\n\n/** 在 StatGroup 里：指标之间画竖线 */\nconst StatGroupContext = createContext<boolean>('StatGroup');\n\n/** Stat 的样式：root、label、icon、value、number、unit、change、description、body、footer、skeleton… */\nexport const statStyles = css.create({\n  // 第一行是指标名与变化量（结束边），其余各占一整行。可换行的弹性布局而不是两列网格：\n  // 卡片窄时变化量换到下一行，指标名不被挤成一字一行；DOM 顺序不变（读屏仍是名称、数值、变化量）\n  root: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    columnGap: '_sm',\n    rowGap: '_xs',\n    margin: 0,\n    minWidth: 0,\n  },\n  // dt 里放图标与指标名：dl 的子元素只能是 dt、dd\n  label: {\n    order: 0,\n    flexGrow: 1,\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    minWidth: 0,\n    margin: 0,\n    color: '_textMuted',\n    fontSize: '_sm',\n  },\n  icon: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n    width: '1.75em',\n    height: '1.75em',\n    borderRadius: '_md',\n    backgroundColor: '_accentSoft',\n    color: '_accentText',\n  },\n  value: {\n    order: 2,\n    flexBasis: '100%',\n    display: 'flex',\n    alignItems: 'baseline',\n    flexWrap: 'wrap',\n    gap: '_xs',\n    margin: 0,\n  },\n  number: {\n    fontSize: '_xxl',\n    fontWeight: '_bold',\n    lineHeight: '_tight',\n    color: '_text',\n    fontVariantNumeric: 'tabular-nums',\n  },\n  unit: { color: '_textMuted', fontSize: '_xs' },\n  // 变化量在指标名那一行的结束边\n  change: {\n    order: 1,\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_xs',\n    fontSize: '_xs',\n    margin: 0,\n    whiteSpace: 'nowrap',\n  },\n  changeLabel: { color: '_textMuted' },\n  description: { order: 3, flexBasis: '100%', color: '_textMuted', fontSize: '_xs', margin: 0 },\n  body: { order: 3, flexBasis: '100%', margin: 0, minWidth: 0 },\n  // 底栏：两项时分别靠两端，多了换行\n  footer: {\n    order: 3,\n    flexBasis: '100%',\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'baseline',\n    justifyContent: 'space-between',\n    columnGap: '_md',\n    rowGap: '_xs',\n    margin: 0,\n    marginBlockStart: '_xs',\n    paddingBlockStart: '_sm',\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_borderMuted',\n    color: '_textMuted',\n    fontSize: '_xs',\n  },\n  // 骨架与数值、变化量同高：加载完换成内容时不跳\n  numberSkeleton: { fontSize: '_xxl', width: '4em', height: '1.25em' },\n  changeSkeleton: { width: '6em', height: '1.5em' },\n});\n\n/** 统计数值：指标名、数值与单位、图标、变化量 */\nexport const Stat = _component(\n  ({\n    label,\n    value,\n    format,\n    unit,\n    tone,\n    icon,\n    change,\n    changeFormat = CHANGE_FORMAT,\n    changeLabel,\n    invertChange = false,\n    description,\n    footer,\n    children,\n    loading = false,\n    propsLabel,\n    propsValue,\n    propsIcon,\n    propsNumber,\n    propsUnit,\n    propsChange,\n    propsChangeLabel,\n    propsDescription,\n    propsBody,\n    propsFooter,\n    ...rest\n  }: StatProps) => {\n    const grouped = StatGroupContext.inject(false);\n    // 骨架防闪烁；aria-busy 按真实的 loading\n    const skeleton = useDelayedLoading(() => loading);\n    // 出现过骨架之后，换回数值时淡入（样式在切换的那一刻加上，动画才会播）\n    let revealing = false;\n    return () => {\n      if (skeleton.value) revealing = true;\n      const reveal = revealing && !skeleton.value && shimmerStyles.reveal;\n      const direction = change === undefined || change === 0 ? 'flat' : change > 0 ? 'up' : 'down';\n      const improved = invertChange ? direction === 'down' : direction === 'up';\n      const changeTone = direction === 'flat' ? 'muted' : improved ? 'success' : 'danger';\n      return (\n        <dl\n          {...mergeAttrs<'dl'>({ sx: [statStyles.root, grouped && statGroupStyles.item] }, rest, {\n            'aria-busy': loading || undefined,\n          })}\n        >\n          <dt {...mergeAttrs<'dt'>({ sx: statStyles.label }, propsLabel)}>\n            {icon && (\n              <span\n                {...mergeAttrs<'span'>({ sx: statStyles.icon }, propsIcon, { 'aria-hidden': true })}\n              >\n                <Icon icon={icon} />\n              </span>\n            )}\n            <span>{label}</span>\n          </dt>\n          <dd {...mergeAttrs<'dd'>({ sx: [statStyles.value, reveal] }, propsValue)}>\n            {skeleton.value ? (\n              <Skeleton sx={statStyles.numberSkeleton} />\n            ) : typeof value !== 'string' ? (\n              <AnimatedNumber\n                {...mergePartProps<AnimatedNumberProps>(\n                  { sx: [statStyles.number, tone && toneStyles[tone]], value },\n                  propsNumber,\n                  {\n                    value,\n                    format,\n                  },\n                )}\n              />\n            ) : (\n              <span\n                {...mergeAttrs<'span'>(\n                  { sx: [statStyles.number, tone && toneStyles[tone]] },\n                  propsNumber,\n                )}\n              >\n                {value}\n              </span>\n            )}\n            {unit != null && !skeleton.value && (\n              <span {...mergeAttrs<'span'>({ sx: statStyles.unit }, propsUnit)}>{unit}</span>\n            )}\n          </dd>\n          {change !== undefined && (\n            <dd\n              {...mergeAttrs<'dd'>({ sx: [statStyles.change, reveal] }, propsChange)}\n              data-trend={skeleton.value ? undefined : direction}\n            >\n              {skeleton.value ? (\n                <Skeleton sx={statStyles.changeSkeleton} />\n              ) : (\n                <>\n                  <span {...css.attrs(toneStyles[changeTone])}>\n                    {direction !== 'flat' && (\n                      <Icon\n                        icon={direction === 'up' ? TrendingUp : TrendingDown}\n                        aria-hidden=\"true\"\n                      />\n                    )}{' '}\n                    <AnimatedNumber value={change} format={changeFormat} />\n                  </span>\n                  {changeLabel != null && (\n                    <span {...mergeAttrs<'span'>({ sx: statStyles.changeLabel }, propsChangeLabel)}>\n                      {changeLabel}\n                    </span>\n                  )}\n                </>\n              )}\n            </dd>\n          )}\n          {hasContent(description) && (\n            <dd {...mergeAttrs<'dd'>({ sx: statStyles.description }, propsDescription)}>\n              {description}\n            </dd>\n          )}\n          {hasContent(children) && (\n            <dd {...mergeAttrs<'dd'>({ sx: statStyles.body }, propsBody)}>{children}</dd>\n          )}\n          {hasContent(footer) && (\n            <dd {...mergeAttrs<'dd'>({ sx: statStyles.footer }, propsFooter)}>{footer}</dd>\n          )}\n        </dl>\n      );\n    };\n  },\n);\n\n/** 未声明的属性落到外层 div 上 */\nexport interface StatGroupProps extends PartProps<'div'> {\n  /**\n   * 每个指标最窄多宽（CSS 长度）：放不下就换行\n   * @default '9rem'\n   */\n  minItemWidth?: string;\n  /** Stat */\n  children?: VNodeChild;\n}\n\n/** StatGroup 的样式：root、item */\nexport const statGroupStyles = css.create({\n  // 每个指标的起始边一条竖线；整组往起始方向挪一条线的位置，每行第一个的竖线藏到外面（overflow 裁掉）\n  root: { display: 'grid', rowGap: '_md', overflow: 'hidden' },\n  item: {\n    paddingInline: '_md',\n    marginInlineStart: `calc(-1 * ${t.borderWidths.xs})`,\n    borderInlineStartWidth: '_xs',\n    borderInlineStartStyle: 'solid',\n    borderInlineStartColor: '_borderMuted',\n  },\n});\n\n/** StatGroup 的动态样式：列宽 */\nexport const statGroupDynamicStyles = css.create({\n  columns: (min: string) => ({\n    gridTemplateColumns: `repeat(auto-fit, minmax(min(${min}, 100%), 1fr))`,\n  }),\n});\n\n/** 一排指标：按宽度换行，同一行里指标之间一条竖线 */\nexport const StatGroup = _component(\n  ({ minItemWidth = '9rem', children, ...rest }: StatGroupProps) => {\n    StatGroupContext.provide(true);\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          { sx: [statGroupStyles.root, statGroupDynamicStyles.columns(minItemWidth)] },\n          rest,\n        )}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgGA,IAAM,gBAA+B;CACnC,OAAO;CACP,uBAAuB;CACvB,aAAa;AACf;;AAGA,IAAM,mBAAmB,cAAuB,WAAW;;AAG3D,IAAa,aAAa,IAAI,OAAO;CAGnC,MAAM;EACJ,SAAS;EACT,UAAU;EACV,YAAY;EACZ,WAAW;EACX,QAAQ;EACR,QAAQ;EACR,UAAU;CACZ;CAEA,OAAO;EACL,OAAO;EACP,UAAU;EACV,SAAS;EACT,YAAY;EACZ,KAAK;EACL,UAAU;EACV,QAAQ;EACR,OAAO;EACP,UAAU;CACZ;CACA,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,YAAY;EACZ,OAAO;EACP,QAAQ;EACR,cAAc;EACd,iBAAiB;EACjB,OAAO;CACT;CACA,OAAO;EACL,OAAO;EACP,WAAW;EACX,SAAS;EACT,YAAY;EACZ,UAAU;EACV,KAAK;EACL,QAAQ;CACV;CACA,QAAQ;EACN,UAAU;EACV,YAAY;EACZ,YAAY;EACZ,OAAO;EACP,oBAAoB;CACtB;CACA,MAAM;EAAE,OAAO;EAAc,UAAU;CAAM;CAE7C,QAAQ;EACN,OAAO;EACP,SAAS;EACT,YAAY;EACZ,KAAK;EACL,UAAU;EACV,QAAQ;EACR,YAAY;CACd;CACA,aAAa,EAAE,OAAO,aAAa;CACnC,aAAa;EAAE,OAAO;EAAG,WAAW;EAAQ,OAAO;EAAc,UAAU;EAAO,QAAQ;CAAE;CAC5F,MAAM;EAAE,OAAO;EAAG,WAAW;EAAQ,QAAQ;EAAG,UAAU;CAAE;CAE5D,QAAQ;EACN,OAAO;EACP,WAAW;EACX,SAAS;EACT,UAAU;EACV,YAAY;EACZ,gBAAgB;EAChB,WAAW;EACX,QAAQ;EACR,QAAQ;EACR,kBAAkB;EAClB,mBAAmB;EACnB,uBAAuB;EACvB,uBAAuB;EACvB,uBAAuB;EACvB,OAAO;EACP,UAAU;CACZ;CAEA,gBAAgB;EAAE,UAAU;EAAQ,OAAO;EAAO,QAAQ;CAAS;CACnE,gBAAgB;EAAE,OAAO;EAAO,QAAQ;CAAQ;AAClD,CAAC;;AAGD,IAAa,OAAO,0BAClB,QAAA,SA0BiB;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,sBAlBA,aAAa;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,gBAEb,KAAK;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAAA,UAAAD,aAAA,QAAA,WAIV,KAAK;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,mBAAAA,aAAA,QAAA,kBAAA;CAAA,MAAA,mBAAAA,aAAA,QAAA,kBAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAWZ,OAAIE,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,UAAU,iBAAiB,OAAO,KAAK;CAE7C,MAAM,WAAW,wBAAkB,QAAA,KAAa;CAEhD,IAAI,YAAY;CAChB,aAAa;EACX,IAAI,SAAS,OAAO,YAAY;EAChC,MAAM,SAAS,aAAa,CAAC,SAAS,SAAS,cAAc;EAC7D,MAAM,YAAY,OAAA,UAAW,KAAA,KAAa,OAAA,UAAW,IAAI,SAAS,OAAA,QAAS,IAAI,OAAO;EACtF,MAAM,WAAW,aAAA,QAAe,cAAc,SAAS,cAAc;EACrE,MAAM,aAAa,cAAc,SAAS,UAAU,WAAW,YAAY;EAC3E,OAAAC,YAAA,MAEQ,WAAiB,EAAE,IAAI,CAAC,WAAW,MAAM,WAAW,gBAAgB,IAAI,EAAE,GAAG,MAAM,EACrF,aAAa,QAAA,SAAW,KAAA,EAC1B,CAAC,GAAC;GAAAA,YAAA,MAEM,WAAiB,EAAE,IAAI,WAAW,MAAM,GAAC,WAAA,KAAY,GAAC,CAC3D,KAAA,SAAAA,YAAA,QAEO,WAAmB,EAAE,IAAI,WAAW,KAAK,GAAC,UAAA,OAAa,EAAE,eAAe,KAAK,CAAC,GAAC,CAAAA,YAAA,MAAA,EAAA,QAAA,KAAA,MAAA,GAAA,IAAA,CAAA,CAAA,GAItFA,YAAA,QAAA,MAAA,CAAA,MAAA,KAAA,CAAA,CAAA,CAAA;GAAAA,YAAA,MAGK,WAAiB,EAAE,IAAI,CAAC,WAAW,OAAO,MAAM,EAAE,GAAC,WAAA,KAAY,GAAC,CACrE,SAAS,QAAKA,YAAA,UAAA,EAAA,MACC,WAAW,eAAc,GAAA,IAAA,IACrC,OAAA,MAAA,UAAiB,WAAQA,YAAA,gBAErB,eACF;IAAE,IAAI,CAAC,WAAW,QAAQ,KAAA,SAAQ,WAAU,KAAA,MAAM;IAAG,OAAK,MAAA;GAAC,GAAC,YAAA,OAE5D;IACE,OAAK,MAAA;IACL,QAAM,OAAA;GACR,CACF,GAAC,IAAA,IAAAA,YAAA,QAIG,WACF,EAAE,IAAI,CAAC,WAAW,QAAQ,KAAA,SAAQ,WAAU,KAAA,MAAM,EAAE,GAAC,YAAA,KAEvD,GAAC,CAAA,MAAA,KAAA,CAAA,GAKJ,KAAA,SAAQ,QAAQ,CAAC,SAAS,SAAKA,YAAA,QACpB,WAAmB,EAAE,IAAI,WAAW,KAAK,GAAC,UAAA,KAAW,GAAC,CAAA,KAAA,KAAA,CAAA,CACjE,CAAA;GAEF,OAAA,UAAW,KAAA,KAASA,YAAA,MAAAC,WAEb,WAAiB,EAAE,IAAI,CAAC,WAAW,QAAQ,MAAM,EAAE,GAAC,YAAA,KAAa,GAAC,EAAA,cAC1D,SAAS,QAAQ,KAAA,IAAY,UAAS,CAAA,GAAA,CAEjD,SAAS,QAAKD,YAAA,UAAA,EAAA,MACC,WAAW,eAAc,GAAA,IAAA,IAAAA,YAAAE,UAAA,MAAA,CAAAF,YAAA,QAG3B,IAAI,MAAM,WAAW,WAAW,GAAC;IACxC,cAAc,UAAMA,YAAA,MAAA;KAAA,QAEX,cAAc,OAAO,aAAa;KAAY,eAAA;IAAA,GAAA,IAAA;IAGrD;IAAGA,YAAA,gBAAA;KAAA,SAAA,OAAA;KAAA,UAAA,aAAA;IAAA,GAAA,IAAA;GAAA,CAAA,GAGP,YAAA,SAAe,QAAIA,YAAA,QACR,WAAmB,EAAE,IAAI,WAAW,YAAY,GAAC,iBAAA,KAAkB,GAAC,CAAA,YAAA,KAAA,CAAA,CAG/E,CAAA,CAEJ,CAAA;GAGJ,WAAU,YAAA,KAAY,KAACA,YAAA,MACd,WAAiB,EAAE,IAAI,WAAW,YAAY,GAAC,iBAAA,KAAkB,GAAC,CAAA,YAAA,KAAA,CAAA;GAI3E,WAAU,SAAA,KAAS,KAACA,YAAA,MACX,WAAiB,EAAE,IAAI,WAAW,KAAK,GAAC,UAAA,KAAW,GAAC,CAAA,SAAA,KAAA,CAAA;GAE7D,WAAU,OAAA,KAAO,KAACA,YAAA,MACT,WAAiB,EAAE,IAAI,WAAW,OAAO,GAAC,YAAA,KAAa,GAAC,CAAA,OAAA,KAAA,CAAA;EACjE,CAAA;CAGP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH;;;AAcA,IAAa,kBAAkB,IAAI,OAAO;CAExC,MAAM;EAAE,SAAS;EAAQ,QAAQ;EAAO,UAAU;CAAS;CAC3D,MAAM;EACJ,eAAe;EACf,mBAAmB,aAAa,EAAE,aAAa,GAAE;EACjD,wBAAwB;EACxB,wBAAwB;EACxB,wBAAwB;CAC1B;AACF,CAAC;;AAGD,IAAa,yBAAyB,IAAI,OAAO,EAC/C,UAAU,SAAiB,EACzB,qBAAqB,+BAA+B,IAAG,gBACzD,GACF,CAAC;;AAGD,IAAa,YAAY,0BACvB,SAAA,UAAkE;CAAA,MAAA,eAAAH,aAAA,SAAA,gBAAhD,MAAM;CAAA,MAAA,WAAAC,aAAA,OAAA;CAAA,MAAe,OAAIC,UAAA,SAAA,OAAA,KAAA;CACzC,iBAAiB,QAAQ,IAAI;CAC7B,aAAOC,YAAA,OAEC,WACF,EAAE,IAAI,CAAC,gBAAgB,MAAI,IAAA,KAAE,uBAAuB,eAAO,CAAA,aAAA,KAAA,GAAA,IAAA,CAAA,EAAgB,GAC3E,IACF,GAAC,CAAA,SAAA,KAAA,CAAA;AAKP,GAAC;CAAA,MAAA;CAAA,OAAA,CAAA,cAAA;AAAA,CACH"}

package/dist/display/Timeline.d.ts

@@ -0,0 +1,106 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type ButtonProps } from '../base/Button';
+import { type IconData } from '../base/Icon';
+import { type CollapsibleProps } from './Collapsible';
+import { type PartProps } from '../utils/props';
+import { type TextSize } from '../utils/style/typography';
+import type { StatusTone } from '../utils/style/tone-styles';
+/** 时间线上的一项 */
+export interface TimelineItem {
+    /** 唯一的 key；不写时用位置 */
+    key?: string;
+    /** 标题 */
+    title: VNodeChild;
+    /** 时间（显示的文字） */
+    time?: VNodeChild;
+    /** 机器可读的时间（ISO 8601），写到 <time datetime> 上 */
+    dateTime?: string;
+    /** 说明：一段文字，或字段差异（FieldCompare layout="list"）这类内容 */
+    description?: VNodeChild;
+    /** 操作人：显示在时间前面 */
+    actor?: VNodeChild;
+    /** 操作人的头像地址；actor 是文字时没有图片也显示首字母 */
+    avatar?: string;
+    /** 收起的详情：项里一个“查看详情”的按钮，点开才显示 */
+    details?: VNodeChild;
+    /** 节点的图标；不写时是圆点 */
+    icon?: IconData;
+    /** 节点的色调，默认 neutral */
+    tone?: StatusTone;
+}
+/** 未声明的属性落到 ol 上 */
+export interface TimelineProps extends PartProps<'ol'> {
+    /** 各项，按时间先后（旧的在前） */
+    items: readonly TimelineItem[];
+    /** 还在进行中：最后多一项，节点是加载指示，内容是它 */
+    pending?: VNodeChild;
+    /** 新的在前：倒过来显示（进行中的一项也在最前），ol 带 reversed */
+    reverse?: boolean;
+    /** 左右交替排布（时间在对侧）；窄的容器里仍是单侧 */
+    alternate?: boolean;
+    /** 字号档位；不写时继承 */
+    size?: TextSize;
+    /** 最多显示几项（不算进行中的一项）：只显示最新的这几项，其余收起在“展开其余 N 条”后面 */
+    maxVisible?: number;
+    /** 收起的各项展开了没有（可绑定） */
+    _expanded?: boolean;
+    /** 每一项（li）的部件属性，可以按项计算 */
+    propsItem?: PartProps<'li'> | ((item: TimelineItem, index: number) => PartProps<'li'>);
+    /** 节点与连接线所在的列的部件属性 */
+    propsRail?: PartProps<'div'>;
+    /** 节点的部件属性 */
+    propsMarker?: PartProps<'span'>;
+    /** 连接线的部件属性 */
+    propsLine?: PartProps<'span'>;
+    /** 内容（标题、时间、说明）的部件属性 */
+    propsContent?: PartProps<'div'>;
+    /** 标题的部件属性 */
+    propsTitle?: PartProps<'div'>;
+    /** 操作人与时间那一行的部件属性 */
+    propsMeta?: PartProps<'div'>;
+    /** 时间的部件属性 */
+    propsTime?: PartProps<'time', 'datetime'>;
+    /** 说明的部件属性 */
+    propsDescription?: PartProps<'div'>;
+    /** 详情（Collapsible）的部件属性 */
+    propsDetails?: Partial<CollapsibleProps>;
+    /** 展开其余各项的按钮的部件属性 */
+    propsToggle?: Partial<ButtonProps>;
+}
+/** Timeline 的样式：root、item、marker、line、content、title、time、description 等 */
+export declare const timelineStyles: Readonly<{
+    actor: css.CompiledStyles;
+    avatar: css.CompiledStyles;
+    content: css.CompiledStyles;
+    contentEnd: css.CompiledStyles;
+    description: css.CompiledStyles;
+    detailsContent: css.CompiledStyles;
+    detailsToggle: css.CompiledStyles;
+    item: css.CompiledStyles;
+    itemAlternate: css.CompiledStyles;
+    line: css.CompiledStyles;
+    marker: css.CompiledStyles;
+    markerIcon: css.CompiledStyles;
+    meta: css.CompiledStyles;
+    pending: css.CompiledStyles;
+    rail: css.CompiledStyles;
+    root: css.CompiledStyles;
+    time: css.CompiledStyles;
+    timeInline: css.CompiledStyles;
+    timeOpposite: css.CompiledStyles;
+    title: css.CompiledStyles;
+    toggleContent: css.CompiledStyles;
+    toggleLine: css.CompiledStyles;
+}>;
+/** Timeline 的样式：节点的色调 */
+export declare const timelineToneStyles: Readonly<{
+    accent: css.CompiledStyles;
+    danger: css.CompiledStyles;
+    info: css.CompiledStyles;
+    neutral: css.CompiledStyles;
+    success: css.CompiledStyles;
+    warning: css.CompiledStyles;
+}>;
+/** 时间线：节点 + 内容，节点之间连线 */
+export declare const Timeline: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<TimelineProps>;