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

package/dist/display/Marquee.js

@@ -0,0 +1,155 @@
+import { mergeAttrs } from "../utils/props.js";
+import { focusRingStyles, gapStyles } from "../utils/style/styles.js";
+import { useResizeObserver } from "../utils/dom/resize.js";
+import { useReducedMotion } from "../utils/dom/media-query.js";
+import { createVNode, mergeProps, ref, shallowRef } from "vue";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/display/Marquee.tsx
+/** 滚动方向 */
+/** 未声明的属性落到外层 div 上 */
+var scrollX = css.keyframes({
+	from: { transform: "none" },
+	to: { transform: "translateX(-50%)" }
+});
+var scrollY = css.keyframes({
+	from: { transform: "none" },
+	to: { transform: "translateY(-50%)" }
+});
+/** Marquee 的样式：root、vertical、fade、track、trackVertical、reverse、pausable、paused、group */
+var marqueeStyles = css.create({
+	root: {
+		display: "flex",
+		overflow: {
+			default: "hidden",
+			_reducedMotion: "auto"
+		}
+	},
+	vertical: { flexDirection: "column" },
+	fade: { maskImage: "linear-gradient(to right, transparent, black 10%, black 90%, transparent)" },
+	fadeVertical: { maskImage: "linear-gradient(to bottom, transparent, black 10%, black 90%, transparent)" },
+	track: {
+		display: "flex",
+		flexShrink: 0,
+		width: "max-content",
+		animationName: {
+			default: scrollX,
+			_reducedMotion: "none"
+		},
+		animationTimingFunction: "linear",
+		animationIterationCount: "infinite"
+	},
+	trackVertical: {
+		flexDirection: "column",
+		width: "auto",
+		height: "max-content",
+		animationName: {
+			default: scrollY,
+			_reducedMotion: "none"
+		}
+	},
+	reverse: { animationDirection: "reverse" },
+	pausable: { animationPlayState: {
+		default: "running",
+		":hover": "paused",
+		":focus-within": "paused"
+	} },
+	paused: { animationPlayState: "paused" },
+	group: {
+		display: "flex",
+		flexShrink: 0,
+		alignItems: "center"
+	},
+	groupVertical: { flexDirection: "column" },
+	copy: { display: {
+		default: null,
+		_reducedMotion: "none"
+	} }
+});
+/** Marquee 的样式：每份内容后面的间距（横排时在行尾、竖排时在下方），与项之间的 gap 一样宽 */
+var marqueeTrailStyles = {
+	inline: css.create({
+		none: { paddingInlineEnd: "_none" },
+		xs: { paddingInlineEnd: "_xs" },
+		sm: { paddingInlineEnd: "_sm" },
+		md: { paddingInlineEnd: "_md" },
+		lg: { paddingInlineEnd: "_lg" },
+		xl: { paddingInlineEnd: "_xl" }
+	}),
+	block: css.create({
+		none: { paddingBlockEnd: "_none" },
+		xs: { paddingBlockEnd: "_xs" },
+		sm: { paddingBlockEnd: "_sm" },
+		md: { paddingBlockEnd: "_md" },
+		lg: { paddingBlockEnd: "_lg" },
+		xl: { paddingBlockEnd: "_xl" }
+	})
+};
+/** Marquee 的样式：duration（一圈的时长） */
+var marqueeDynamicStyles = css.create({ duration: (seconds) => ({ animationDuration: `${seconds}s` }) });
+/** 跑马灯：内容复制一份，纯 CSS 无缝循环滚动 */
+var Marquee = /*#__PURE__*/ _component((_props, _ctx) => {
+	const direction = readonlyProp(_props, "direction", "left");
+	const speed = readonlyProp(_props, "speed", 40);
+	const pauseOnHover = readonlyProp(_props, "pauseOnHover", true);
+	const paused = readonlyProp(_props, "paused", false);
+	const fade = readonlyProp(_props, "fade", false);
+	const gap = readonlyProp(_props, "gap", "lg");
+	const propsTrack = readonlyProp(_props, "propsTrack");
+	const propsGroup = readonlyProp(_props, "propsGroup");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	let group = shallowRef(null);
+	let length = ref(0);
+	const reducedMotion = useReducedMotion();
+	const vertical = () => direction.value === "up" || direction.value === "down";
+	useResizeObserver(() => group.value, () => {
+		if (group.value) length.value = vertical() ? group.value.offsetHeight : group.value.offsetWidth;
+	});
+	const renderGroup = (copy) => createVNode("div", mergeAttrs({ sx: [
+		marqueeStyles.group,
+		vertical() && marqueeStyles.groupVertical,
+		gapStyles[gap.value],
+		marqueeTrailStyles[vertical() ? "block" : "inline"][gap.value],
+		copy && marqueeStyles.copy
+	] }, propsGroup.value, copy ? {
+		"aria-hidden": true,
+		inert: true
+	} : { ref: group }), [children.value]);
+	return () => createVNode("div", mergeProps(mergeAttrs({
+		sx: [
+			marqueeStyles.root,
+			css.select(() => vertical() && marqueeStyles.vertical, true),
+			fade.value && (vertical() ? marqueeStyles.fadeVertical : marqueeStyles.fade),
+			reducedMotion.value && focusRingStyles.visible
+		],
+		role: "marquee",
+		tabindex: reducedMotion.value ? 0 : void 0
+	}, rest), {
+		"data-direction": direction.value,
+		"data-paused": paused.value || void 0
+	}), [createVNode("div", mergeAttrs({ sx: [
+		marqueeStyles.track,
+		css.select(() => vertical() && marqueeStyles.trackVertical, true),
+		(direction.value === "right" || direction.value === "down") && marqueeStyles.reverse,
+		pauseOnHover.value && marqueeStyles.pausable,
+		paused.value && marqueeStyles.paused,
+		css.bind(marqueeDynamicStyles.duration, () => [Math.max(length.value, 1) / Math.max(speed.value, 1)], true)
+	] }, propsTrack.value), [renderGroup(false), renderGroup(true)])]);
+}, {
+	name: "Marquee",
+	props: [
+		"direction",
+		"speed",
+		"pauseOnHover",
+		"paused",
+		"fade",
+		"gap",
+		"propsTrack",
+		"propsGroup"
+	]
+});
+//#endregion
+export { Marquee, marqueeDynamicStyles, marqueeStyles, marqueeTrailStyles };
+
+//# sourceMappingURL=Marquee.js.map

package/dist/display/Marquee.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Marquee.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/display/Marquee.tsx"],"sourcesContent":["/**\n * 跑马灯（div）：内容循环滚动（合作伙伴 logo、公告、标签墙）。纯 CSS 动画：内容复制一份接在后面，\n * 平移到正好一份的长度时与开头重合，无缝循环。\n *\n *   <Marquee speed={40} pauseOnHover aria-label=\"合作伙伴\">\n *     {partners.map((partner) => <img src={partner.logo} alt={partner.name} />)}\n *   </Marquee>\n *\n * - 方向 left / right / up / down；speed 是每秒多少 px（按一份内容的长度换算成动画时长，内容变化时重新量）；\n * - 指针悬停、焦点在里面时暂停（pauseOnHover）；paused 由外部控制（WCAG 2.2.2：给用户一个暂停按钮）；\n * - 减少动态效果时不滚动，内容可以手动滚动查看（容器可以聚焦，键盘也能滚）；\n * - role=\"marquee\"（ARIA 的跑马灯角色，用 aria-label 命名）；复制的那份对读屏隐藏且不可聚焦（inert），读屏只念一遍。\n *\n * 部件：Root（div）、Track（div，做动画的那一层）、Group（div，一份内容）。\n */\nimport { _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 { useReducedMotion } from '../utils/dom/media-query';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles, gapStyles, type Space, type StyleTable } from '../utils/style/styles';\n\n/** 滚动方向 */\nexport interface MarqueeDirections {\n  /** 向左（默认） */\n  left: unknown;\n  /** 向右 */\n  right: unknown;\n  /** 向上 */\n  up: unknown;\n  /** 向下 */\n  down: unknown;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface MarqueeProps extends PartProps<'div'> {\n  /** 滚动方向，默认 left */\n  direction?: keyof MarqueeDirections;\n  /** 速度：每秒多少 px，默认 40 */\n  speed?: number;\n  /** 指针悬停、焦点在里面时暂停，默认 true */\n  pauseOnHover?: boolean;\n  /** 暂停 */\n  paused?: boolean;\n  /** 两端渐隐 */\n  fade?: boolean;\n  /** 项之间（以及两份之间）的间距，默认 lg */\n  gap?: Space;\n  /** 动画层的部件属性 */\n  propsTrack?: PartProps<'div'>;\n  /** 每一份内容的部件属性 */\n  propsGroup?: PartProps<'div'>;\n  /** 内容 */\n  children?: VNodeChild;\n}\n\nconst scrollX = css.keyframes({\n  from: { transform: 'none' },\n  to: { transform: 'translateX(-50%)' },\n});\nconst scrollY = css.keyframes({\n  from: { transform: 'none' },\n  to: { transform: 'translateY(-50%)' },\n});\n\n/** Marquee 的样式：root、vertical、fade、track、trackVertical、reverse、pausable、paused、group */\nexport const marqueeStyles = css.create({\n  root: {\n    display: 'flex',\n    overflow: { default: 'hidden', _reducedMotion: 'auto' },\n  },\n  vertical: { flexDirection: 'column' },\n  fade: {\n    maskImage: 'linear-gradient(to right, transparent, black 10%, black 90%, transparent)',\n  },\n  fadeVertical: {\n    maskImage: 'linear-gradient(to bottom, transparent, black 10%, black 90%, transparent)',\n  },\n  // 两份内容并排；平移 -50% 正好是一份（含它后面的间距）\n  track: {\n    display: 'flex',\n    flexShrink: 0,\n    width: 'max-content',\n    animationName: { default: scrollX, _reducedMotion: 'none' },\n    animationTimingFunction: 'linear',\n    animationIterationCount: 'infinite',\n  },\n  trackVertical: {\n    flexDirection: 'column',\n    width: 'auto',\n    height: 'max-content',\n    animationName: { default: scrollY, _reducedMotion: 'none' },\n  },\n  reverse: { animationDirection: 'reverse' },\n  pausable: {\n    animationPlayState: { default: 'running', ':hover': 'paused', ':focus-within': 'paused' },\n  },\n  paused: { animationPlayState: 'paused' },\n  group: { display: 'flex', flexShrink: 0, alignItems: 'center' },\n  groupVertical: { flexDirection: 'column' },\n  // 不滚动时用不着复制的那份\n  copy: { display: { default: null, _reducedMotion: 'none' } },\n});\n\n/** Marquee 的样式：每份内容后面的间距（横排时在行尾、竖排时在下方），与项之间的 gap 一样宽 */\nexport const marqueeTrailStyles: Readonly<Record<'inline' | 'block', StyleTable<Space>>> = {\n  inline: css.create({\n    none: { paddingInlineEnd: '_none' },\n    xs: { paddingInlineEnd: '_xs' },\n    sm: { paddingInlineEnd: '_sm' },\n    md: { paddingInlineEnd: '_md' },\n    lg: { paddingInlineEnd: '_lg' },\n    xl: { paddingInlineEnd: '_xl' },\n  }),\n  block: css.create({\n    none: { paddingBlockEnd: '_none' },\n    xs: { paddingBlockEnd: '_xs' },\n    sm: { paddingBlockEnd: '_sm' },\n    md: { paddingBlockEnd: '_md' },\n    lg: { paddingBlockEnd: '_lg' },\n    xl: { paddingBlockEnd: '_xl' },\n  }),\n};\n\n// 时长是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** Marquee 的样式：duration（一圈的时长） */\nexport const marqueeDynamicStyles = css.create({\n  duration: (seconds: number) => ({ animationDuration: `${seconds}s` }),\n});\n\n/** 跑马灯：内容复制一份，纯 CSS 无缝循环滚动 */\nexport const Marquee = _component(\n  ({\n    direction = 'left',\n    speed = 40,\n    pauseOnHover = true,\n    paused = false,\n    fade = false,\n    gap = 'lg',\n    propsTrack,\n    propsGroup,\n    children,\n    ...rest\n  }: MarqueeProps) => {\n    let group = _state.raw<HTMLElement | null>(null);\n    // 一份内容（含间距）的长度：换算动画时长\n    let length = _state(0);\n    // 减少动态效果时变成手动滚动的区域：键盘要能聚焦它才能滚动\n    const reducedMotion = useReducedMotion();\n    const vertical = () => direction === 'up' || direction === 'down';\n\n    useResizeObserver(\n      () => group,\n      () => {\n        if (group) length = vertical() ? group.offsetHeight : group.offsetWidth;\n      },\n    );\n\n    const renderGroup = (copy: boolean) => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [\n              marqueeStyles.group,\n              vertical() && marqueeStyles.groupVertical,\n              gapStyles[gap],\n              // 每份后面留一个间距：两份之间与项之间一样宽\n              marqueeTrailStyles[vertical() ? 'block' : 'inline'][gap],\n              copy && marqueeStyles.copy,\n            ],\n          },\n          propsGroup,\n          copy ? { 'aria-hidden': true, inert: true } : { ref: _toRef(group) },\n        )}\n      >\n        {children}\n      </div>\n    );\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [\n              marqueeStyles.root,\n              vertical() && marqueeStyles.vertical,\n              fade && (vertical() ? marqueeStyles.fadeVertical : marqueeStyles.fade),\n              reducedMotion.value && focusRingStyles.visible,\n            ],\n            role: 'marquee',\n            tabindex: reducedMotion.value ? 0 : undefined,\n          },\n          rest,\n        )}\n        data-direction={direction}\n        data-paused={paused || undefined}\n      >\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                marqueeStyles.track,\n                vertical() && marqueeStyles.trackVertical,\n                (direction === 'right' || direction === 'down') && marqueeStyles.reverse,\n                pauseOnHover && marqueeStyles.pausable,\n                paused && marqueeStyles.paused,\n                marqueeDynamicStyles.duration(Math.max(length, 1) / Math.max(speed, 1)),\n              ],\n            },\n            propsTrack,\n          )}\n        >\n          {renderGroup(false)}\n          {renderGroup(true)}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/display/ProportionBar.d.ts

@@ -0,0 +1,55 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import type { StatusTone } from '../utils/style/tone-styles';
+/** 比例条的一段 */
+export interface ProportionSegment {
+    /** 标识 */
+    key: string;
+    /** 名称 */
+    label: string;
+    /** 数量 */
+    value: number;
+    /** 色调；不写时按顺序取 accent、info、success、warning、danger、neutral */
+    tone?: StatusTone;
+    /** 任意 CSS 颜色；写了时不看 tone */
+    color?: string;
+}
+/** 未声明的属性落到外层 div 上 */
+export interface ProportionBarProps extends PartProps<'div'> {
+    /** 各段：按顺序从起始边排 */
+    segments: readonly ProportionSegment[];
+    /** 横条的名称（读屏）：后面自动带上各段的数量 */
+    'aria-label': string;
+    /** 图例里数量的写法，默认是数字 */
+    valueText?: (segment: ProportionSegment) => VNodeChild;
+    /**
+     * 下面的图例
+     * @default true
+     */
+    legend?: boolean;
+    /**
+     * 横条的粗细
+     * @default 'md'
+     */
+    size?: 'sm' | 'md';
+    /** 图例每一项后面的补充（“待定价”） */
+    legendExtra?: (segment: ProportionSegment) => VNodeChild;
+}
+/** ProportionBar 的样式：root、bar、sm、md、legend、legendItem、value */
+export declare const proportionBarStyles: Readonly<{
+    bar: css.CompiledStyles;
+    legend: css.CompiledStyles;
+    legendItem: css.CompiledStyles;
+    md: css.CompiledStyles;
+    root: css.CompiledStyles;
+    sm: css.CompiledStyles;
+    value: css.CompiledStyles;
+}>;
+/** ProportionBar 的动态样式：段的份额、任意颜色 */
+export declare const proportionBarDynamicStyles: Readonly<{
+    readonly share: (value: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly color: (color: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 比例条 */
+export declare const ProportionBar: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ProportionBarProps>;

package/dist/display/ProportionBar.js

@@ -0,0 +1,99 @@
+import { mergeAttrs } from "../utils/props.js";
+import { StatusDot, statusDotToneStyles } from "../base/StatusDot.js";
+import { createVNode, mergeProps } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/display/ProportionBar.tsx
+/** 比例条的一段 */
+/** 未声明的属性落到外层 div 上 */
+var ORDER = [
+	"accent",
+	"info",
+	"success",
+	"warning",
+	"danger",
+	"neutral"
+];
+/** ProportionBar 的样式：root、bar、sm、md、legend、legendItem、value */
+var proportionBarStyles = css.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_sm",
+		minWidth: 0
+	},
+	bar: {
+		display: "flex",
+		gap: "2px",
+		borderRadius: "_full",
+		overflow: "hidden"
+	},
+	sm: { height: "0.5rem" },
+	md: { height: "0.75rem" },
+	legend: {
+		display: "flex",
+		flexWrap: "wrap",
+		justifyContent: "space-between",
+		columnGap: "_md",
+		rowGap: "_xs",
+		margin: 0,
+		padding: 0,
+		listStyle: "none",
+		fontSize: "_sm"
+	},
+	legendItem: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "_sm"
+	},
+	value: {
+		fontWeight: "_semibold",
+		fontVariantNumeric: "tabular-nums"
+	}
+});
+/** ProportionBar 的动态样式：段的份额、任意颜色 */
+var proportionBarDynamicStyles = css.create({
+	share: (value) => ({
+		flexGrow: value,
+		flexBasis: 0
+	}),
+	color: (color) => ({ backgroundColor: color })
+});
+/** 比例条 */
+var ProportionBar = /*#__PURE__*/ _component((_props, _ctx) => {
+	const segments = readonlyProp(_props, "segments");
+	const valueText = readonlyProp(_props, "valueText", () => (segment) => String(segment.value));
+	const legend = readonlyProp(_props, "legend", true);
+	const size = readonlyProp(_props, "size", "md");
+	const legendExtra = readonlyProp(_props, "legendExtra");
+	const label = readonlyProp(_props, "ariaLabel");
+	const rest = restProps(_props, _ctx, true);
+	const toneOf = (segment, index) => segment.tone ?? ORDER[index % ORDER.length];
+	return () => createVNode("div", mergeAttrs({ sx: proportionBarStyles.root }, rest), [createVNode("div", mergeProps({
+		"role": "img",
+		"aria-label": `${label.value}：${segments.value.map((segment) => `${segment.label} ${segment.value}`).join("，")}`
+	}, css.attrs(proportionBarStyles.bar, proportionBarStyles[size.value])), [segments.value.map((segment, index) => segment.value > 0 && createVNode("span", mergeProps({ "key": segment.key }, css.attrs(css.bind(proportionBarDynamicStyles.share, () => [segment.value]), segment.color ? css.bind(proportionBarDynamicStyles.color, () => [segment.color]) : statusDotToneStyles[toneOf(segment, index)])), null))]), legend.value && createVNode("ul", css.attrs(proportionBarStyles.legend), [segments.value.map((segment, index) => createVNode("li", mergeProps({ "key": segment.key }, css.attrs(proportionBarStyles.legendItem)), [
+		createVNode(StatusDot, {
+			"size": "md",
+			"tone": toneOf(segment, index),
+			"color": segment.color
+		}, null),
+		createVNode("span", null, [segment.label]),
+		createVNode("span", css.attrs(proportionBarStyles.value), [valueText.value(segment)]),
+		legendExtra.value?.(segment)
+	]))])]);
+}, {
+	name: "ProportionBar",
+	props: [
+		"segments",
+		"valueText",
+		"legend",
+		"size",
+		"legendExtra",
+		"ariaLabel"
+	]
+});
+//#endregion
+export { ProportionBar, proportionBarDynamicStyles, proportionBarStyles };
+
+//# sourceMappingURL=ProportionBar.js.map

package/dist/display/ProportionBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProportionBar.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/display/ProportionBar.tsx"],"sourcesContent":["/**\n * 比例条：一根横条按各部分的数量分段，下面是图例（色点、名称、数量），看一个总数由哪几块构成\n * （工单的三种状态、各状态的占比、存储空间）。部分之间互斥、加起来是总数时用它；要比较趋势用图表。\n *\n *   <ProportionBar\n *     aria-label=\"工单构成\"\n *     segments={[\n *       { key: 'done', label: '已完成', value: 25, tone: 'success' },\n *       { key: 'blocked', label: '受阻', value: 4, tone: 'warning' },\n *       { key: 'open', label: '进行中', value: 35, tone: 'info' },\n *     ]}\n *     valueText={(segment) => `${segment.value} 项`}\n *   />\n *\n * 横条对读屏是一张图（role=\"img\"），名称后面自动带上各段的数量；图例是普通文字。\n * 数量为 0 的段不画但留在图例里。颜色用 tone（状态色）或 color（任意 CSS 颜色，如图表色板）。\n */\nimport { _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 { mergeAttrs, type PartProps } from '../utils/props';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport { StatusDot, statusDotToneStyles } from '../base/StatusDot';\n\n/** 比例条的一段 */\nexport interface ProportionSegment {\n  /** 标识 */\n  key: string;\n  /** 名称 */\n  label: string;\n  /** 数量 */\n  value: number;\n  /** 色调；不写时按顺序取 accent、info、success、warning、danger、neutral */\n  tone?: StatusTone;\n  /** 任意 CSS 颜色；写了时不看 tone */\n  color?: string;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface ProportionBarProps extends PartProps<'div'> {\n  /** 各段：按顺序从起始边排 */\n  segments: readonly ProportionSegment[];\n  /** 横条的名称（读屏）：后面自动带上各段的数量 */\n  'aria-label': string;\n  /** 图例里数量的写法，默认是数字 */\n  valueText?: (segment: ProportionSegment) => VNodeChild;\n  /**\n   * 下面的图例\n   * @default true\n   */\n  legend?: boolean;\n  /**\n   * 横条的粗细\n   * @default 'md'\n   */\n  size?: 'sm' | 'md';\n  /** 图例每一项后面的补充（“待定价”） */\n  legendExtra?: (segment: ProportionSegment) => VNodeChild;\n}\n\nconst ORDER: readonly StatusTone[] = ['accent', 'info', 'success', 'warning', 'danger', 'neutral'];\n\n/** ProportionBar 的样式：root、bar、sm、md、legend、legendItem、value */\nexport const proportionBarStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column', gap: '_sm', minWidth: 0 },\n  bar: { display: 'flex', gap: '2px', borderRadius: '_full', overflow: 'hidden' },\n  sm: { height: '0.5rem' },\n  md: { height: '0.75rem' },\n  legend: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'space-between',\n    columnGap: '_md',\n    rowGap: '_xs',\n    margin: 0,\n    padding: 0,\n    listStyle: 'none',\n    fontSize: '_sm',\n  },\n  legendItem: { display: 'inline-flex', alignItems: 'center', gap: '_sm' },\n  value: { fontWeight: '_semibold', fontVariantNumeric: 'tabular-nums' },\n});\n\n/** ProportionBar 的动态样式：段的份额、任意颜色 */\nexport const proportionBarDynamicStyles = css.create({\n  share: (value: number) => ({ flexGrow: value, flexBasis: 0 }),\n  color: (color: string) => ({ backgroundColor: color }),\n});\n\n/** 比例条 */\nexport const ProportionBar = _component(\n  ({\n    segments,\n    valueText = (segment) => String(segment.value),\n    legend = true,\n    size = 'md',\n    legendExtra,\n    'aria-label': label,\n    ...rest\n  }: ProportionBarProps) => {\n    const toneOf = (segment: ProportionSegment, index: number) =>\n      segment.tone ?? ORDER[index % ORDER.length]!;\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: proportionBarStyles.root }, rest)}>\n        <div\n          role=\"img\"\n          aria-label={`${label}：${segments\n            .map((segment) => `${segment.label} ${segment.value}`)\n            .join('，')}`}\n          {...css.attrs(proportionBarStyles.bar, proportionBarStyles[size])}\n        >\n          {segments.map(\n            (segment, index) =>\n              segment.value > 0 && (\n                <span\n                  key={segment.key}\n                  {...css.attrs(\n                    proportionBarDynamicStyles.share(segment.value),\n                    segment.color\n                      ? proportionBarDynamicStyles.color(segment.color)\n                      : statusDotToneStyles[toneOf(segment, index)],\n                  )}\n                />\n              ),\n          )}\n        </div>\n        {legend && (\n          <ul {...css.attrs(proportionBarStyles.legend)}>\n            {segments.map((segment, index) => (\n              <li key={segment.key} {...css.attrs(proportionBarStyles.legendItem)}>\n                <StatusDot size=\"md\" tone={toneOf(segment, index)} color={segment.color} />\n                <span>{segment.label}</span>\n                <span {...css.attrs(proportionBarStyles.value)}>{valueText(segment)}</span>\n                {legendExtra?.(segment)}\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;AA4DA,IAAM,QAA+B;CAAC;CAAU;CAAQ;CAAW;CAAW;CAAU;AAAS;;AAGjG,IAAa,sBAAsB,IAAI,OAAO;CAC5C,MAAM;EAAE,SAAS;EAAQ,eAAe;EAAU,KAAK;EAAO,UAAU;CAAE;CAC1E,KAAK;EAAE,SAAS;EAAQ,KAAK;EAAO,cAAc;EAAS,UAAU;CAAS;CAC9E,IAAI,EAAE,QAAQ,SAAS;CACvB,IAAI,EAAE,QAAQ,UAAU;CACxB,QAAQ;EACN,SAAS;EACT,UAAU;EACV,gBAAgB;EAChB,WAAW;EACX,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,WAAW;EACX,UAAU;CACZ;CACA,YAAY;EAAE,SAAS;EAAe,YAAY;EAAU,KAAK;CAAM;CACvE,OAAO;EAAE,YAAY;EAAa,oBAAoB;CAAe;AACvE,CAAC;;AAGD,IAAa,6BAA6B,IAAI,OAAO;CACnD,QAAQ,WAAmB;EAAE,UAAU;EAAO,WAAW;CAAE;CAC3D,QAAQ,WAAmB,EAAE,iBAAiB,MAAM;AACtD,CAAC;;AAGD,IAAa,gBAAgB,0BAC3B,QAAA,SAQ0B;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,oBANX,YAAY,OAAO,QAAQ,KAAK,CAAC;CAAA,MAAA,SAAAA,aAAA,QAAA,UACrC,IAAI;CAAA,MAAA,OAAAA,aAAA,QAAA,QACN,IAAI;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,WAAA;CAAA,MAGR,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,UAAU,SAA4B,UAC1C,QAAQ,QAAQ,MAAM,QAAQ,MAAM;CACtC,aAAOC,YAAA,OACI,WAAkB,EAAE,IAAI,oBAAoB,KAAK,GAAG,IAAI,GAAC,CAAAA,YAAA,OAAAC,WAAA;EAAA,QAAA;EAAA,cAGlD,GAAA,MAAA,MAAA,GAAY,SAAA,MACrB,KAAK,YAAY,GAAG,QAAQ,MAAK,GAAI,QAAQ,OAAO,CAAC,CACrD,KAAK,GAAG;CAAG,GACV,IAAI,MAAM,oBAAoB,KAAK,oBAAmB,KAAA,MAAM,CAAC,GAAA,CAEhE,SAAA,MAAS,KACP,SAAS,UACR,QAAQ,QAAQ,KAACD,YAAA,QAAAC,WAAA,EAAA,OAER,QAAQ,IAAG,GACZ,IAAI,MAAK,IAAA,KACX,2BAA2B,aAAK,CAAC,QAAQ,KAAK,CAAA,GAC9C,QAAQ,QAAK,IAAA,KACT,2BAA2B,aAAK,CAAC,QAAQ,KAAK,CAAA,IAC9C,oBAAoB,OAAO,SAAS,KAAK,EAC/C,CAAC,GAAA,IAAA,CAGT,CAAC,CAAA,GAEF,OAAA,SAAAD,YAAA,MACS,IAAI,MAAM,oBAAoB,MAAM,GAAC,CAC1C,SAAA,MAAS,KAAK,SAAS,UAAKA,YAAA,MAAAC,WAAA,EAAA,OAClB,QAAQ,IAAG,GAAM,IAAI,MAAM,oBAAoB,UAAU,CAAC,GAAA;EAAAD,YAAA,WAAA;GAAA,QAAA;GAAA,QACtC,OAAO,SAAS,KAAK;GAAC,SAAS,QAAQ;EAAK,GAAA,IAAA;EAAAA,YAAA,QAAA,MAAA,CAChE,QAAQ,KAAK,CAAA;EAAAA,YAAA,QACV,IAAI,MAAM,oBAAoB,KAAK,GAAC,CAAG,UAAA,MAAU,OAAO,CAAC,CAAA;EAClE,YAAA,QAAc,OAAO;CAAC,CAAA,CAE1B,CAAC,CAAA,CAEL,CAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/display/Sortable.d.ts

@@ -0,0 +1,43 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type ButtonBaseProps } from '../base/ButtonBase';
+import { type SortableOrientations } from '../utils/dom/sortable';
+import { type PartProps } from '../utils/props';
+/** 项的渲染状态 */
+export interface SortableItemState {
+    /** 当前位置，从 0 开始 */
+    index: number;
+    /** 正在被拖动或被键盘拿起 */
+    active: boolean;
+}
+/** 未声明的属性落到 ul 上；aria-label 或 aria-labelledby 是列表的名称 */
+export interface SortableProps<T> extends PartProps<'ul'> {
+    /** 各项：父级写 _items={list}，顺序变了写回新的数组 */
+    _items?: T[];
+    /** 项的 key，同一列表里唯一 */
+    getKey: (item: T) => string;
+    /** 项的名称：把手的名称与读屏播报用它；默认是 key */
+    getLabel?: (item: T) => string;
+    /** 排列方向，默认 vertical */
+    orientation?: keyof SortableOrientations;
+    /** 不可用：不能拖动 */
+    disabled?: boolean;
+    /** 每项的内容 */
+    children?: (item: T, state: SortableItemState) => VNodeChild;
+    /** 每一项（li）的部件属性，可以按项计算 */
+    propsItem?: PartProps<'li'> | ((item: T, state: SortableItemState) => PartProps<'li'>);
+    /** 把手的部件属性 */
+    propsHandle?: Partial<ButtonBaseProps>;
+    /** 内容的部件属性 */
+    propsContent?: PartProps<'div'>;
+}
+/** Sortable 的样式：item、active、handle、content */
+export declare const sortableStyles: Readonly<{
+    active: css.CompiledStyles;
+    content: css.CompiledStyles;
+    handle: css.CompiledStyles;
+    item: css.CompiledStyles;
+    itemHorizontal: css.CompiledStyles;
+}>;
+/** 可拖动排序的列表：把手拖动或键盘移动 */
+export declare const Sortable: <T>(props: SortableProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;

package/dist/display/Sortable.js

@@ -0,0 +1,163 @@
+import { t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { VisuallyHidden } from "../base/VisuallyHidden.js";
+import { ButtonBase } from "../base/ButtonBase.js";
+import { toElement } from "../utils/dom/element.js";
+import { FlexList } from "../layout/Flex.js";
+import { useSortable } from "../utils/dom/sortable.js";
+import { Fragment, createVNode, mergeProps, shallowRef } from "vue";
+import { _component, bindable, childrenProp, childrenStable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { GripVertical } from "@lucide/icons";
+//#region src/display/Sortable.tsx
+/**
+* 可拖动排序的列表（ul）：每项前有一个把手，拖动或用键盘改变顺序，数据双向绑定。
+*
+*   <Sortable _items={tasks} getKey={(task) => task.id} getLabel={(task) => task.title} aria-label="待办">
+*     {(task) => <Text>{task.title}</Text>}
+*   </Sortable>
+*
+* 拖动、键盘、读屏播报、自动滚动、布局动画见 useSortable（utils/dom/sortable.ts）。
+* 列表自己不滚动：项多时在外面包 ScrollArea（横排写 axis="x"），拖到边缘时自动滚动会找到它的视口，滚动条与整站一致。
+* 把手是按钮：名称“移动 项名”，操作说明经 aria-describedby 关联，拿起时 aria-pressed。
+* 部件：Root（ul）、Item（li）、Handle（button）、Content（div）。
+*/
+/** 项的渲染状态 */
+/** 未声明的属性落到 ul 上；aria-label 或 aria-labelledby 是列表的名称 */
+/** Sortable 的样式：item、active、handle、content */
+var sortableStyles = css.create({
+	item: {
+		position: "relative",
+		display: "flex",
+		alignItems: "center",
+		gap: "_sm",
+		paddingBlock: "_xs",
+		paddingInlineStart: "_xs",
+		paddingInlineEnd: "_sm",
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_borderMuted",
+		borderRadius: "_md",
+		backgroundColor: "_surface",
+		color: "_text"
+	},
+	itemHorizontal: { flexShrink: 0 },
+	active: {
+		zIndex: 1,
+		borderColor: "_accent",
+		boxShadow: "_md"
+	},
+	handle: {
+		display: "grid",
+		placeItems: "center",
+		flexShrink: 0,
+		width: `max(1.75em, ${t.sizes.minTarget})`,
+		height: `max(1.75em, ${t.sizes.minTarget})`,
+		borderRadius: "_sm",
+		backgroundColor: {
+			default: "transparent",
+			":hover": "_fillHover"
+		},
+		color: "_textMuted",
+		cursor: {
+			default: "grab",
+			":active": "grabbing"
+		},
+		touchAction: "none"
+	},
+	content: {
+		flexGrow: 1,
+		minWidth: 0
+	}
+});
+/** 可拖动排序的列表：把手拖动或键盘移动 */
+var Sortable = /*#__PURE__*/ _component((_props, _ctx) => {
+	const items = bindable(_props, "_items", () => [], _ctx.emit);
+	const getKey = readonlyProp(_props, "getKey");
+	const getLabel = readonlyProp(_props, "getLabel");
+	const orientation = readonlyProp(_props, "orientation", "vertical");
+	const disabled = readonlyProp(_props, "disabled", false);
+	const children = childrenProp(_props);
+	const propsItem = readonlyProp(_props, "propsItem");
+	const propsHandle = readonlyProp(_props, "propsHandle");
+	const propsContent = readonlyProp(_props, "propsContent");
+	const rest = restProps(_props, _ctx, false);
+	const lang = useLang();
+	let root = shallowRef(null);
+	const sortable = useSortable({
+		items: () => items.value,
+		getKey: (item) => getKey.value(item),
+		getLabel: (item) => getLabel.value?.(item) ?? getKey.value(item),
+		onChange: (next) => items.value = next,
+		container: () => root.value,
+		orientation: () => orientation.value,
+		disabled: () => disabled.value
+	});
+	return () => createVNode(Fragment, null, [
+		createVNode(FlexList, mergeProps(mergePartProps({
+			direction: orientation.value === "horizontal" ? "row" : "column",
+			gap: "xs"
+		}, rest, { ref: (value) => root.value = toElement(value) }), {
+			"data-orientation": orientation.value,
+			"key": "__site0"
+		}), {
+			default: () => [items.value.map((item, index) => {
+				const key = getKey.value(item);
+				const state = {
+					index,
+					active: sortable.active === key
+				};
+				const own = typeof propsItem.value === "function" ? propsItem.value(item, state) : propsItem.value;
+				return createVNode("li", mergeProps({ "key": key }, mergeAttrs({ sx: [
+					sortableStyles.item,
+					orientation.value === "horizontal" && sortableStyles.itemHorizontal,
+					state.active && sortableStyles.active
+				] }, own, sortable.itemProps(key))), [createVNode(ButtonBase, mergePartProps({
+					sx: sortableStyles.handle,
+					ripple: false
+				}, propsHandle.value, {
+					disabled: disabled.value,
+					"aria-label": lang.sortableHandle(getLabel.value?.(item) ?? key),
+					...sortable.handleProps(key)
+				}), {
+					default: () => [createVNode(Icon, { "icon": GripVertical }, null)],
+					$stable: true
+				}), createVNode("div", mergeAttrs({ sx: sortableStyles.content }, propsContent.value), [children.value?.(item, state)])]);
+			})],
+			$stable: childrenStable()
+		}),
+		createVNode(VisuallyHidden, {
+			"id": sortable.instructionsId,
+			"key": "__site1"
+		}, {
+			default: () => [lang.sortableInstructions],
+			$stable: true
+		}),
+		createVNode(VisuallyHidden, {
+			"aria-live": "assertive",
+			"key": "__site2"
+		}, {
+			default: () => [sortable.announcement],
+			$stable: true
+		})
+	]);
+}, {
+	props: [
+		"_items",
+		"onUpdate:_items",
+		"getKey",
+		"getLabel",
+		"orientation",
+		"disabled",
+		"propsItem",
+		"propsHandle",
+		"propsContent"
+	],
+	name: "Sortable"
+});
+//#endregion
+export { Sortable, sortableStyles };
+
+//# sourceMappingURL=Sortable.js.map

package/dist/display/Sortable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sortable.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_createVNode","_Fragment","_mergeProps","_vtp_childrenStable"],"sources":["../../src/display/Sortable.tsx"],"sourcesContent":["/**\n * 可拖动排序的列表（ul）：每项前有一个把手，拖动或用键盘改变顺序，数据双向绑定。\n *\n *   <Sortable _items={tasks} getKey={(task) => task.id} getLabel={(task) => task.title} aria-label=\"待办\">\n *     {(task) => <Text>{task.title}</Text>}\n *   </Sortable>\n *\n * 拖动、键盘、读屏播报、自动滚动、布局动画见 useSortable（utils/dom/sortable.ts）。\n * 列表自己不滚动：项多时在外面包 ScrollArea（横排写 axis=\"x\"），拖到边缘时自动滚动会找到它的视口，滚动条与整站一致。\n * 把手是按钮：名称“移动 项名”，操作说明经 aria-describedby 关联，拿起时 aria-pressed。\n * 部件：Root（ul）、Item（li）、Handle（button）、Content（div）。\n */\nimport { GripVertical } from '@lucide/icons';\nimport { _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 { ButtonBase, type ButtonBaseProps } from '../base/ButtonBase';\nimport { Icon } from '../base/Icon';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { useSortable, type SortableOrientations } from '../utils/dom/sortable';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { FlexList, type FlexProps } from '../layout/Flex';\nimport { toElement } from '../utils/dom/element';\nimport { t } from '../config/theme/tokens';\n\n/** 项的渲染状态 */\nexport interface SortableItemState {\n  /** 当前位置，从 0 开始 */\n  index: number;\n  /** 正在被拖动或被键盘拿起 */\n  active: boolean;\n}\n\n/** 未声明的属性落到 ul 上；aria-label 或 aria-labelledby 是列表的名称 */\nexport interface SortableProps<T> extends PartProps<'ul'> {\n  /** 各项：父级写 _items={list}，顺序变了写回新的数组 */\n  _items?: T[];\n  /** 项的 key，同一列表里唯一 */\n  getKey: (item: T) => string;\n  /** 项的名称：把手的名称与读屏播报用它；默认是 key */\n  getLabel?: (item: T) => string;\n  /** 排列方向，默认 vertical */\n  orientation?: keyof SortableOrientations;\n  /** 不可用：不能拖动 */\n  disabled?: boolean;\n  /** 每项的内容 */\n  children?: (item: T, state: SortableItemState) => VNodeChild;\n  /** 每一项（li）的部件属性，可以按项计算 */\n  propsItem?: PartProps<'li'> | ((item: T, state: SortableItemState) => PartProps<'li'>);\n  /** 把手的部件属性 */\n  propsHandle?: Partial<ButtonBaseProps>;\n  /** 内容的部件属性 */\n  propsContent?: PartProps<'div'>;\n}\n\n/** Sortable 的样式：item、active、handle、content */\nexport const sortableStyles = css.create({\n  // 方向、间距、去掉圆点由 FlexList 给\n  item: {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    paddingBlock: '_xs',\n    // 起始边是把手（自带留白），结束边多留一点，文字不贴着边框\n    paddingInlineStart: '_xs',\n    paddingInlineEnd: '_sm',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderMuted',\n    borderRadius: '_md',\n    backgroundColor: '_surface',\n    color: '_text',\n  },\n  // 横排时项不收缩：放不下就溢出（外面包 ScrollArea 横向滚动），不把文字挤成一字一行\n  itemHorizontal: { flexShrink: 0 },\n  // 拿起时浮起来：阴影与品牌色边框，盖在其他项上面\n  active: { zIndex: 1, borderColor: '_accent', boxShadow: '_md' },\n  // 去掉按钮默认外观、焦点环由 ButtonBase 给出\n  handle: {\n    display: 'grid',\n    placeItems: 'center',\n    flexShrink: 0,\n    width: `max(1.75em, ${t.sizes.minTarget})`,\n    height: `max(1.75em, ${t.sizes.minTarget})`,\n    borderRadius: '_sm',\n    backgroundColor: { default: 'transparent', ':hover': '_fillHover' },\n    color: '_textMuted',\n    cursor: { default: 'grab', ':active': 'grabbing' },\n    // 触摸拖动时不滚动页面\n    touchAction: 'none',\n  },\n  content: { flexGrow: 1, minWidth: 0 },\n});\n\n/** 可拖动排序的列表：把手拖动或键盘移动 */\nexport const Sortable = _component(\n  <T,>({\n    _items: items = _bindable<T[]>([]),\n    getKey,\n    getLabel,\n    orientation = 'vertical',\n    disabled = false,\n    children,\n    propsItem,\n    propsHandle,\n    propsContent,\n    ...rest\n  }: SortableProps<T>) => {\n    const lang = useLang();\n    let root = _state.raw<HTMLElement | null>(null);\n    const sortable = useSortable<T>({\n      items: () => items,\n      getKey: (item) => getKey(item),\n      getLabel: (item) => getLabel?.(item) ?? getKey(item),\n      onChange: (next) => (items = next),\n      container: () => root,\n      orientation: () => orientation,\n      disabled: () => disabled,\n    });\n\n    return () => (\n      <>\n        <FlexList\n          {...mergePartProps<FlexProps<'ul'>>(\n            {\n              direction: orientation === 'horizontal' ? 'row' : 'column',\n              gap: 'xs',\n            },\n            rest,\n            { ref: (value: unknown) => (root = toElement(value)) },\n          )}\n          data-orientation={orientation}\n        >\n          {items.map((item, index) => {\n            const key = getKey(item);\n            const state: SortableItemState = { index, active: sortable.active === key };\n            const own = typeof propsItem === 'function' ? propsItem(item, state) : propsItem;\n            return (\n              <li\n                key={key}\n                {...mergeAttrs<'li'>(\n                  {\n                    sx: [\n                      sortableStyles.item,\n                      orientation === 'horizontal' && sortableStyles.itemHorizontal,\n                      state.active && sortableStyles.active,\n                    ],\n                  },\n                  own,\n                  sortable.itemProps(key),\n                )}\n              >\n                <ButtonBase\n                  {...mergePartProps<ButtonBaseProps>(\n                    // 拖动的把手不出波纹\n                    { sx: sortableStyles.handle, ripple: false },\n                    propsHandle,\n                    {\n                      disabled,\n                      'aria-label': lang.sortableHandle(getLabel?.(item) ?? key),\n                      ...sortable.handleProps(key),\n                    },\n                  )}\n                >\n                  <Icon icon={GripVertical} />\n                </ButtonBase>\n                <div {...mergeAttrs<'div'>({ sx: sortableStyles.content }, propsContent)}>\n                  {children?.(item, state)}\n                </div>\n              </li>\n            );\n          })}\n        </FlexList>\n        <VisuallyHidden id={sortable.instructionsId}>{lang.sortableInstructions}</VisuallyHidden>\n        <VisuallyHidden aria-live=\"assertive\">{sortable.announcement}</VisuallyHidden>\n      </>\n    );\n  },\n  { name: 'Sortable' },\n);\n"],"mappings":"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"}

package/dist/display/Sparkline.d.ts

@@ -0,0 +1,48 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type NumericFormat } from '../config/lang/format';
+import { type NumericValue } from '../utils/data/numeric';
+import { type PartProps } from '../utils/props';
+import { type StatusTone } from '../utils/style/tone-styles';
+/** 迷你图的画法 */
+export interface SparklineVariants {
+    /** 折线（默认） */
+    line: unknown;
+    /** 折线下面填一层浅色 */
+    area: unknown;
+    /** 柱：每个值一根，从 0 起 */
+    bar: unknown;
+}
+/** 角色与名称由组件给出（role="img"，名称是 label 加上数据的概括） */
+export type SparklineManaged = 'role' | 'aria-label';
+/** 未声明的属性落到外层 span 上 */
+export interface SparklineProps extends PartProps<'span', SparklineManaged> {
+    /** 各个值，按时间先后；空值处断开 */
+    data: readonly (NumericValue | null | undefined)[];
+    /** 画法，默认 line */
+    variant?: keyof SparklineVariants;
+    /** 色调，默认 accent */
+    tone?: StatusTone;
+    /** 高度（CSS 长度），默认 2em */
+    height?: string;
+    /** 标出最后一个点（折线、面积），默认 true */
+    showLast?: boolean;
+    /** 纵向范围 [最小, 最大]；不写的一端按数据取（柱从 0 起） */
+    domain?: readonly [number | undefined, number | undefined];
+    /** 读屏念的数值格式 */
+    valueFormat?: NumericFormat;
+    /** 名称：读屏先念它（“近 12 个月实际销售”） */
+    label?: string;
+}
+/** Sparkline 的样式 */
+export declare const sparklineStyles: Readonly<{
+    readonly root: css.CompiledStyles;
+    readonly svg: css.CompiledStyles;
+    readonly line: css.CompiledStyles;
+    readonly area: css.CompiledStyles;
+    readonly bar: css.CompiledStyles;
+    readonly last: css.CompiledStyles;
+    readonly height: (height: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly position: (left: string, top: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 迷你图：小折线、面积或柱 */
+export declare const Sparkline: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<SparklineProps>;