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

package/dist/display/Card.d.ts

@@ -0,0 +1,219 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type SkeletonTextProps } from '../feedback/SkeletonText';
+import { type PartProps } from '../utils/props';
+import { type Radius, type Space } from '../utils/style/styles';
+/** 卡片样式 */
+export interface CardVariants {
+    /** 表面色加细边框（默认） */
+    surface: unknown;
+    /** 只有边框，底色透明 */
+    outline: unknown;
+    /** 表面色加阴影，浮在页面上 */
+    elevated: unknown;
+    /** 没有底色与边框，只保留内边距与分区 */
+    ghost: unknown;
+}
+/** 卡片的装饰效果 */
+export interface CardEffects {
+    /** 指针在上面移动时整块向指针方向倾斜，带一层跟随指针的高光；离开后弹回平放 */
+    tilt: unknown;
+    /** 一团柔和的光跟着指针，靠近边框的地方把边框也点亮；并排的几张卡片光会在它们之间传递 */
+    spotlight: unknown;
+    /** 一段渐变的光（品牌色到紫色）沿着边框循环流动 */
+    beam: unknown;
+}
+/** 卡片的外观选项；可以用 createUi / Provider 的 defaults.Card 统一改默认值 */
+export interface CardOptions {
+    /** 样式，默认 surface */
+    variant?: keyof CardVariants;
+    /** 内边距档位，对应主题的 space，默认 lg */
+    padding?: Space;
+    /** 圆角，默认 lg */
+    radius?: Radius;
+}
+/** 忙碌由组件按 loading 管理 */
+export type CardManaged = 'aria-busy';
+/** 未声明的属性落到外层 div 上 */
+export interface CardProps extends PartProps<'div', CardManaged>, CardOptions {
+    /** 页头：标题、操作；与正文之间有分隔线 */
+    header?: VNodeChild;
+    /** 页头结束边的内容（“全部 ↗”、按钮、筛选）：和 header 排在一行，放不下时换行 */
+    extra?: VNodeChild;
+    /** 页脚：按钮等操作；与正文之间有分隔线 */
+    footer?: VNodeChild;
+    /**
+     * 正文加载中：正文换成几行扫光的骨架（页头、页脚照常显示），卡片带 aria-busy；很快完成时不闪
+     * @default false
+     */
+    loading?: boolean;
+    /** 装饰效果（见 CardEffects）；有效果时外面多一层定位用的 div，未声明的属性落在它上面 */
+    effect?: keyof CardEffects;
+    /** 效果的光层（倾斜的高光、聚光的表面光、流光）的部件属性 */
+    propsEffect?: PartProps<'span', 'aria-hidden'>;
+    /** 页头的部件属性 */
+    propsHeader?: PartProps<'div'>;
+    /** 正文的部件属性 */
+    propsBody?: PartProps<'div'>;
+    /** 页脚的部件属性 */
+    propsFooter?: PartProps<'div'>;
+    /** 加载中的骨架（SkeletonText）的部件属性，如行数 `{ lines: 5 }` */
+    propsSkeleton?: Partial<SkeletonTextProps>;
+    children?: VNodeChild;
+}
+/**
+ * 卡片的配方。部件：root（卡片本身）、header、body、footer、skeleton（加载中的骨架）；
+ * 有 effect 时另有 frame（外面定位用的一层，未声明的属性落在它上面）、effect（倾斜的高光、聚光的表面光）、
+ * ring（只露出边框一圈的光层：聚光的边框光、流光的轨道）、beam（流光的光带）。
+ * 样式、内边距、有无 extra、装饰效果是档位
+ */
+export declare const cardRecipe: css.Recipe<"beam" | "body" | "effect" | "footer" | "frame" | "header" | "ring" | "root" | "skeleton", {
+    readonly variant: {
+        readonly surface: {
+            readonly root: {
+                readonly backgroundColor: "_surface";
+                readonly borderColor: "_border";
+            };
+        };
+        readonly outline: {
+            readonly root: {
+                readonly borderColor: "_border";
+            };
+        };
+        readonly elevated: {
+            readonly root: {
+                readonly backgroundColor: "_surfaceRaised";
+                readonly boxShadow: "_md";
+            };
+        };
+        readonly ghost: {};
+    };
+    readonly padding: {
+        readonly none: {
+            readonly header: {
+                readonly padding: "_none";
+            };
+            readonly body: {
+                readonly padding: "_none";
+            };
+            readonly footer: {
+                readonly padding: "_none";
+            };
+        };
+        readonly xs: {
+            readonly header: {
+                readonly padding: "_xs";
+            };
+            readonly body: {
+                readonly padding: "_xs";
+            };
+            readonly footer: {
+                readonly padding: "_xs";
+            };
+        };
+        readonly sm: {
+            readonly header: {
+                readonly padding: "_sm";
+            };
+            readonly body: {
+                readonly padding: "_sm";
+            };
+            readonly footer: {
+                readonly padding: "_sm";
+            };
+        };
+        readonly md: {
+            readonly header: {
+                readonly padding: "_md";
+            };
+            readonly body: {
+                readonly padding: "_md";
+            };
+            readonly footer: {
+                readonly padding: "_md";
+            };
+        };
+        readonly lg: {
+            readonly header: {
+                readonly padding: "_lg";
+            };
+            readonly body: {
+                readonly padding: "_lg";
+            };
+            readonly footer: {
+                readonly padding: "_lg";
+            };
+        };
+        readonly xl: {
+            readonly header: {
+                readonly padding: "_xl";
+            };
+            readonly body: {
+                readonly padding: "_xl";
+            };
+            readonly footer: {
+                readonly padding: "_xl";
+            };
+        };
+    };
+    readonly extra: {
+        readonly true: {
+            readonly header: {
+                readonly display: "flex";
+                readonly flexWrap: "wrap";
+                readonly alignItems: "center";
+                readonly justifyContent: "space-between";
+                readonly gap: "_sm";
+            };
+        };
+    };
+    readonly effect: {
+        readonly tilt: {
+            readonly frame: {
+                readonly transformStyle: "preserve-3d";
+                readonly willChange: "transform";
+            };
+            readonly root: {
+                readonly flexGrow: 1;
+            };
+            readonly effect: {
+                readonly mixBlendMode: "soft-light";
+            };
+        };
+        readonly spotlight: {
+            readonly root: {
+                readonly flexGrow: 1;
+            };
+            readonly ring: {
+                readonly padding: "_borderWidths.md";
+                readonly maskImage: "linear-gradient(#000 0 0), linear-gradient(#000 0 0)";
+                readonly maskClip: "content-box, border-box";
+                readonly maskComposite: "exclude";
+            };
+        };
+        readonly beam: {
+            readonly root: {
+                readonly flexGrow: 1;
+            };
+            readonly ring: {
+                readonly borderWidth: "_md";
+                readonly borderStyle: "solid";
+                readonly borderColor: "transparent";
+                readonly maskImage: "linear-gradient(transparent, transparent), linear-gradient(#000, #000)";
+                readonly maskClip: "padding-box, border-box";
+                readonly maskComposite: "intersect";
+            };
+        };
+    };
+}>;
+/** 卡片的部件（createUi / Provider 的 styles.Card 按它定制） */
+export type CardPart = (typeof cardRecipe.parts)[number];
+/** Card 效果的样式：tiltTransform、glare（高光的位置与强度）、light（光斑）、beamPath（流光的路径） */
+export declare const cardEffectDynamicStyles: Readonly<{
+    readonly tiltTransform: (rotateX: number, rotateY: number, scale: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly glare: (x: number, y: number, opacity: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly light: (x: number, y: number, size: string, color: string, strength: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly beamPath: (radius: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 卡片：表面 + 可选的页头与页脚，正文可以显示加载骨架 */
+export declare const Card: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<CardProps>;

package/dist/display/Card.js

@@ -0,0 +1,319 @@
+import { t } from "../config/theme/tokens.js";
+import { useDefaults } from "../config/defaults.js";
+import { hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { radiusStyles } from "../utils/style/styles.js";
+import { useRecipe } from "../config/styles.js";
+import { useDelayedLoading } from "../utils/motion/delayed-loading.js";
+import { useReducedMotion } from "../utils/dom/media-query.js";
+import { shimmerStyles } from "../utils/style/shimmer.js";
+import { SkeletonText } from "../feedback/SkeletonText.js";
+import { usePointer } from "../utils/motion/pointer.js";
+import { createVNode, shallowRef } from "vue";
+import { _component, childrenProp, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/display/Card.tsx
+/** 卡片样式 */
+/** 卡片的装饰效果 */
+/** 卡片的外观选项；可以用 createUi / Provider 的 defaults.Card 统一改默认值 */
+/** 忙碌由组件按 loading 管理 */
+/** 未声明的属性落到外层 div 上 */
+var travel = css.keyframes({
+	from: { offsetDistance: "0%" },
+	to: { offsetDistance: "100%" }
+});
+/**
+* 卡片的配方。部件：root（卡片本身）、header、body、footer、skeleton（加载中的骨架）；
+* 有 effect 时另有 frame（外面定位用的一层，未声明的属性落在它上面）、effect（倾斜的高光、聚光的表面光）、
+* ring（只露出边框一圈的光层：聚光的边框光、流光的轨道）、beam（流光的光带）。
+* 样式、内边距、有无 extra、装饰效果是档位
+*/
+var cardRecipe = css.recipe({
+	name: "Card",
+	parts: [
+		"root",
+		"header",
+		"body",
+		"footer",
+		"skeleton",
+		"frame",
+		"effect",
+		"ring",
+		"beam"
+	],
+	base: {
+		root: {
+			boxSizing: "border-box",
+			display: "flex",
+			flexDirection: "column",
+			minWidth: 0,
+			borderWidth: "_xs",
+			borderStyle: "solid",
+			borderColor: "transparent",
+			color: "_text",
+			overflow: "hidden"
+		},
+		header: {
+			borderBottomWidth: "_xs",
+			borderBottomStyle: "solid",
+			borderBottomColor: "_borderMuted"
+		},
+		footer: {
+			display: "flex",
+			justifyContent: "flex-end",
+			gap: "_sm",
+			borderTopWidth: "_xs",
+			borderTopStyle: "solid",
+			borderTopColor: "_borderMuted"
+		},
+		frame: {
+			position: "relative",
+			display: "flex",
+			flexDirection: "column",
+			minWidth: 0
+		},
+		effect: {
+			position: "absolute",
+			inset: 0,
+			borderRadius: "inherit",
+			pointerEvents: "none"
+		},
+		ring: {
+			position: "absolute",
+			inset: 0,
+			borderRadius: "inherit",
+			pointerEvents: "none"
+		},
+		beam: {
+			position: "absolute",
+			width: "80px",
+			aspectRatio: "1",
+			offsetAnchor: "90% 50%",
+			backgroundImage: `linear-gradient(to left, ${t.colors.chart5}, ${t.colors.accent}, transparent)`,
+			animationName: {
+				default: travel,
+				_reducedMotion: "none"
+			},
+			animationDuration: "6s",
+			animationTimingFunction: "linear",
+			animationIterationCount: "infinite"
+		}
+	},
+	variants: {
+		variant: {
+			surface: { root: {
+				backgroundColor: "_surface",
+				borderColor: "_border"
+			} },
+			outline: { root: { borderColor: "_border" } },
+			elevated: { root: {
+				backgroundColor: "_surfaceRaised",
+				boxShadow: "_md"
+			} },
+			ghost: {}
+		},
+		padding: {
+			none: {
+				header: { padding: "_none" },
+				body: { padding: "_none" },
+				footer: { padding: "_none" }
+			},
+			xs: {
+				header: { padding: "_xs" },
+				body: { padding: "_xs" },
+				footer: { padding: "_xs" }
+			},
+			sm: {
+				header: { padding: "_sm" },
+				body: { padding: "_sm" },
+				footer: { padding: "_sm" }
+			},
+			md: {
+				header: { padding: "_md" },
+				body: { padding: "_md" },
+				footer: { padding: "_md" }
+			},
+			lg: {
+				header: { padding: "_lg" },
+				body: { padding: "_lg" },
+				footer: { padding: "_lg" }
+			},
+			xl: {
+				header: { padding: "_xl" },
+				body: { padding: "_xl" },
+				footer: { padding: "_xl" }
+			}
+		},
+		extra: { true: { header: {
+			display: "flex",
+			flexWrap: "wrap",
+			alignItems: "center",
+			justifyContent: "space-between",
+			gap: "_sm"
+		} } },
+		effect: {
+			tilt: {
+				frame: {
+					transformStyle: "preserve-3d",
+					willChange: "transform"
+				},
+				root: { flexGrow: 1 },
+				effect: { mixBlendMode: "soft-light" }
+			},
+			spotlight: {
+				root: { flexGrow: 1 },
+				ring: {
+					padding: "_borderWidths.md",
+					maskImage: "linear-gradient(#000 0 0), linear-gradient(#000 0 0)",
+					maskClip: "content-box, border-box",
+					maskComposite: "exclude"
+				}
+			},
+			beam: {
+				root: { flexGrow: 1 },
+				ring: {
+					borderWidth: "_md",
+					borderStyle: "solid",
+					borderColor: "transparent",
+					maskImage: "linear-gradient(transparent, transparent), linear-gradient(#000, #000)",
+					maskClip: "padding-box, border-box",
+					maskComposite: "intersect"
+				}
+			}
+		}
+	}
+});
+/** 卡片的部件（createUi / Provider 的 styles.Card 按它定制） */
+/** 一次渲染里各部件的默认层（useRecipe 的结果） */
+/** Card 效果的样式：tiltTransform、glare（高光的位置与强度）、light（光斑）、beamPath（流光的路径） */
+var cardEffectDynamicStyles = css.create({
+	tiltTransform: (rotateX, rotateY, scale) => ({ transform: `perspective(60em) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})` }),
+	glare: (x, y, opacity) => ({
+		opacity,
+		backgroundImage: `radial-gradient(circle at ${x}% ${y}%, color-mix(in oklab, ${t.colors.accentSoft} 40%, ${t.colors.surfaceRaised}), transparent 60%)`
+	}),
+	light: (x, y, size, color, strength) => ({
+		opacity: strength,
+		backgroundImage: `radial-gradient(${size} circle at ${x}% ${y}%, ${color}, transparent 70%)`
+	}),
+	beamPath: (radius) => ({ offsetPath: `rect(0 auto auto 0 round ${radius})` })
+});
+/** 倾斜的最大角度（度）与悬停时的放大倍数 */
+var TILT = 10;
+/** 卡片：表面 + 可选的页头与页脚，正文可以显示加载骨架 */
+var Card = /*#__PURE__*/ _component((_props, _ctx) => {
+	const variant = readonlyProp(_props, "variant");
+	const padding = readonlyProp(_props, "padding");
+	const radius = readonlyProp(_props, "radius");
+	const header = readonlyProp(_props, "header");
+	const extra = readonlyProp(_props, "extra");
+	const footer = readonlyProp(_props, "footer");
+	const loading = readonlyProp(_props, "loading", false);
+	const effect = readonlyProp(_props, "effect");
+	const propsEffect = readonlyProp(_props, "propsEffect");
+	const propsHeader = readonlyProp(_props, "propsHeader");
+	const propsBody = readonlyProp(_props, "propsBody");
+	const propsFooter = readonlyProp(_props, "propsFooter");
+	const propsSkeleton = readonlyProp(_props, "propsSkeleton");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const appearance = useDefaults("Card", () => ({
+		variant: variant.value,
+		padding: padding.value,
+		radius: radius.value
+	}), {
+		variant: "surface",
+		padding: "lg",
+		radius: "lg"
+	});
+	const recipe = useRecipe(cardRecipe);
+	const skeleton = useDelayedLoading(() => loading.value);
+	let revealing = false;
+	const reducedMotion = useReducedMotion();
+	let frame = shallowRef(null);
+	const pointer = usePointer(() => effect.value === "tilt" || effect.value === "spotlight" ? frame.value : null, untrack(() => effect.value) === "tilt" ? {
+		bounce: .3,
+		duration: "lg"
+	} : { duration: "sm" });
+	/** 效果的光层：倾斜是一层高光，聚光是表面与边框两层，流光是边框一圈里走的光带 */
+	function effectLayers(s, shownRadius) {
+		const x = (pointer.x + 1) * 50;
+		const y = (1 - pointer.y) * 50;
+		const layer = (part, sx, child) => createVNode("span", mergeAttrs({
+			...part,
+			sx: [part.sx, sx]
+		}, propsEffect.value, { "aria-hidden": true }), [child]);
+		if (effect.value === "tilt") return layer(s.effect, cardEffectDynamicStyles.glare(x, y, pointer.strength));
+		if (effect.value === "spotlight") return [layer(s.effect, cardEffectDynamicStyles.light(x, y, "20em", `color-mix(in oklab, ${t.colors.accent} 16%, transparent)`, pointer.strength)), layer(s.ring, cardEffectDynamicStyles.light(x, y, "12em", `color-mix(in oklab, ${t.colors.accent} 85%, transparent)`, pointer.strength))];
+		return layer(s.ring, void 0, createVNode("span", mergeAttrs({
+			...s.beam,
+			sx: [s.beam.sx, cardEffectDynamicStyles.beamPath(t.radii[shownRadius])]
+		}), null));
+	}
+	return () => {
+		const { variant: shownVariant, padding: shownPadding, radius: shownRadius } = appearance();
+		const s = recipe({
+			variant: shownVariant,
+			padding: shownPadding,
+			extra: extra.value != null,
+			effect: effect.value
+		});
+		if (skeleton.value) revealing = true;
+		const surface = {
+			...s.root,
+			sx: [s.root.sx, radiusStyles[shownRadius]]
+		};
+		const content = renderContent(s);
+		if (!effect.value) return createVNode("div", mergeAttrs(surface, rest, { "aria-busy": loading.value || void 0 }), [content]);
+		const tilt = effect.value === "tilt" && !reducedMotion.value ? pointer.strength : 0;
+		return createVNode("div", mergeAttrs({
+			...s.frame,
+			sx: [
+				s.frame.sx,
+				radiusStyles[shownRadius],
+				effect.value === "tilt" && css.bind(cardEffectDynamicStyles.tiltTransform, () => [
+					pointer.y * TILT * tilt,
+					pointer.x * TILT * tilt,
+					1 + .020000000000000018 * tilt
+				])
+			]
+		}, rest, {
+			"aria-busy": loading.value || void 0,
+			ref: frame
+		}), [createVNode("div", mergeAttrs(surface), [content]), effectLayers(s, shownRadius)]);
+	};
+	/** 页头、正文（或骨架）、页脚 */
+	function renderContent(s) {
+		return [
+			(header.value != null || extra.value != null) && createVNode("div", mergeAttrs(s.header, propsHeader.value), [header.value, extra.value]),
+			createVNode("div", mergeAttrs({
+				...s.body,
+				sx: [s.body.sx, revealing && !skeleton.value && shimmerStyles.reveal]
+			}, propsBody.value), [skeleton.value ? createVNode(SkeletonText, mergePartProps({
+				...s.skeleton,
+				sx: [s.skeleton.sx, shimmerStyles.reveal]
+			}, propsSkeleton.value), null) : children.value]),
+			hasContent(footer.value) && createVNode("div", mergeAttrs(s.footer, propsFooter.value), [footer.value])
+		];
+	}
+}, {
+	name: "Card",
+	props: [
+		"variant",
+		"padding",
+		"radius",
+		"header",
+		"extra",
+		"footer",
+		"loading",
+		"effect",
+		"propsEffect",
+		"propsHeader",
+		"propsBody",
+		"propsFooter",
+		"propsSkeleton"
+	]
+});
+//#endregion
+export { Card, cardEffectDynamicStyles, cardRecipe };
+
+//# sourceMappingURL=Card.js.map

package/dist/display/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vtp_untrack","_createVNode"],"sources":["../../src/display/Card.tsx"],"sourcesContent":["/**\n * 卡片（div）：把一组相关内容放在一块表面上。可选的页头、页脚与正文之间有分隔线。\n *\n *   <Card header={<H3 size=\"md\">订单 #1024</H3>} footer={<Button>查看</Button>}>…</Card>\n *   <Card header=\"超时最久的项目\" extra={<Link href=\"/overdue\">全部</Link>}>…</Card>   页头右边的操作\n *   <Card loading={loading} header={…}>…</Card>      正文加载中：换成几行扫光的骨架，卡片带 aria-busy\n *   <Card effect=\"spotlight\">…</Card>                  装饰效果：tilt 倾斜、spotlight 聚光、beam 流光边框\n *\n * 需要语义容器（article、section）时在外面包，或把语义标签放进 header 里的标题。\n * effect 是纯 CSS 的装饰（官网、活动页的卡片）：光层对读屏隐藏、不接收指针；减少动态效果时不倾斜、流光不动。\n * 光要画在卡片的边框上，而卡片裁掉了边框以内之外的内容，所以有 effect 时外面多一层定位用的 div，\n * 未声明的属性落在这一层上。\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 { useDefaults } from '../config/defaults';\nimport { useRecipe, type PartLayer } from '../config/styles';\nimport { t } from '../config/theme/tokens';\nimport { SkeletonText, type SkeletonTextProps } from '../feedback/SkeletonText';\nimport { useReducedMotion } from '../utils/dom/media-query';\nimport { useDelayedLoading } from '../utils/motion/delayed-loading';\nimport { usePointer } from '../utils/motion/pointer';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { shimmerStyles } from '../utils/style/shimmer';\nimport { radiusStyles, type Radius, type Space } from '../utils/style/styles';\n\n/** 卡片样式 */\nexport interface CardVariants {\n  /** 表面色加细边框（默认） */\n  surface: unknown;\n  /** 只有边框，底色透明 */\n  outline: unknown;\n  /** 表面色加阴影，浮在页面上 */\n  elevated: unknown;\n  /** 没有底色与边框，只保留内边距与分区 */\n  ghost: unknown;\n}\n\n/** 卡片的装饰效果 */\nexport interface CardEffects {\n  /** 指针在上面移动时整块向指针方向倾斜，带一层跟随指针的高光；离开后弹回平放 */\n  tilt: unknown;\n  /** 一团柔和的光跟着指针，靠近边框的地方把边框也点亮；并排的几张卡片光会在它们之间传递 */\n  spotlight: unknown;\n  /** 一段渐变的光（品牌色到紫色）沿着边框循环流动 */\n  beam: unknown;\n}\n\n/** 卡片的外观选项；可以用 createUi / Provider 的 defaults.Card 统一改默认值 */\nexport interface CardOptions {\n  /** 样式，默认 surface */\n  variant?: keyof CardVariants;\n  /** 内边距档位，对应主题的 space，默认 lg */\n  padding?: Space;\n  /** 圆角，默认 lg */\n  radius?: Radius;\n}\n\n/** 忙碌由组件按 loading 管理 */\nexport type CardManaged = 'aria-busy';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface CardProps extends PartProps<'div', CardManaged>, CardOptions {\n  /** 页头：标题、操作；与正文之间有分隔线 */\n  header?: VNodeChild;\n  /** 页头结束边的内容（“全部 ↗”、按钮、筛选）：和 header 排在一行，放不下时换行 */\n  extra?: VNodeChild;\n  /** 页脚：按钮等操作；与正文之间有分隔线 */\n  footer?: VNodeChild;\n  /**\n   * 正文加载中：正文换成几行扫光的骨架（页头、页脚照常显示），卡片带 aria-busy；很快完成时不闪\n   * @default false\n   */\n  loading?: boolean;\n  /** 装饰效果（见 CardEffects）；有效果时外面多一层定位用的 div，未声明的属性落在它上面 */\n  effect?: keyof CardEffects;\n  /** 效果的光层（倾斜的高光、聚光的表面光、流光）的部件属性 */\n  propsEffect?: PartProps<'span', 'aria-hidden'>;\n  /** 页头的部件属性 */\n  propsHeader?: PartProps<'div'>;\n  /** 正文的部件属性 */\n  propsBody?: PartProps<'div'>;\n  /** 页脚的部件属性 */\n  propsFooter?: PartProps<'div'>;\n  /** 加载中的骨架（SkeletonText）的部件属性，如行数 `{ lines: 5 }` */\n  propsSkeleton?: Partial<SkeletonTextProps>;\n  children?: VNodeChild;\n}\n\nconst travel = css.keyframes({\n  from: { offsetDistance: '0%' },\n  to: { offsetDistance: '100%' },\n});\n\n/**\n * 卡片的配方。部件：root（卡片本身）、header、body、footer、skeleton（加载中的骨架）；\n * 有 effect 时另有 frame（外面定位用的一层，未声明的属性落在它上面）、effect（倾斜的高光、聚光的表面光）、\n * ring（只露出边框一圈的光层：聚光的边框光、流光的轨道）、beam（流光的光带）。\n * 样式、内边距、有无 extra、装饰效果是档位\n */\nexport const cardRecipe = css.recipe({\n  name: 'Card',\n  parts: ['root', 'header', 'body', 'footer', 'skeleton', 'frame', 'effect', 'ring', 'beam'],\n  base: {\n    root: {\n      boxSizing: 'border-box',\n      display: 'flex',\n      flexDirection: 'column',\n      minWidth: 0,\n      borderWidth: '_xs',\n      borderStyle: 'solid',\n      borderColor: 'transparent',\n      color: '_text',\n      overflow: 'hidden',\n    },\n    header: {\n      borderBottomWidth: '_xs',\n      borderBottomStyle: 'solid',\n      borderBottomColor: '_borderMuted',\n    },\n    footer: {\n      display: 'flex',\n      justifyContent: 'flex-end',\n      gap: '_sm',\n      borderTopWidth: '_xs',\n      borderTopStyle: 'solid',\n      borderTopColor: '_borderMuted',\n    },\n    frame: { position: 'relative', display: 'flex', flexDirection: 'column', minWidth: 0 },\n    effect: { position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none' },\n    ring: { position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none' },\n    beam: {\n      position: 'absolute',\n      width: '80px',\n      aspectRatio: '1',\n      offsetAnchor: '90% 50%',\n      backgroundImage: `linear-gradient(to left, ${t.colors.chart5}, ${t.colors.accent}, transparent)`,\n      animationName: { default: travel, _reducedMotion: 'none' },\n      animationDuration: '6s',\n      animationTimingFunction: 'linear',\n      animationIterationCount: 'infinite',\n    },\n  },\n  variants: {\n    variant: {\n      surface: { root: { backgroundColor: '_surface', borderColor: '_border' } },\n      outline: { root: { borderColor: '_border' } },\n      elevated: { root: { backgroundColor: '_surfaceRaised', boxShadow: '_md' } },\n      ghost: {},\n    },\n    // 页头、正文、页脚的内边距\n    padding: {\n      none: {\n        header: { padding: '_none' },\n        body: { padding: '_none' },\n        footer: { padding: '_none' },\n      },\n      xs: { header: { padding: '_xs' }, body: { padding: '_xs' }, footer: { padding: '_xs' } },\n      sm: { header: { padding: '_sm' }, body: { padding: '_sm' }, footer: { padding: '_sm' } },\n      md: { header: { padding: '_md' }, body: { padding: '_md' }, footer: { padding: '_md' } },\n      lg: { header: { padding: '_lg' }, body: { padding: '_lg' }, footer: { padding: '_lg' } },\n      xl: { header: { padding: '_xl' }, body: { padding: '_xl' }, footer: { padding: '_xl' } },\n    },\n    // 有 extra 时：标题在起始边、extra 在结束边\n    extra: {\n      true: {\n        header: {\n          display: 'flex',\n          flexWrap: 'wrap',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          gap: '_sm',\n        },\n      },\n    },\n    // 有效果时卡片撑满外层\n    effect: {\n      tilt: {\n        frame: { transformStyle: 'preserve-3d', willChange: 'transform' },\n        root: { flexGrow: 1 },\n        effect: { mixBlendMode: 'soft-light' },\n      },\n      // 只留边框那一圈：内容盒与整个盒子的遮罩相减\n      spotlight: {\n        root: { flexGrow: 1 },\n        ring: {\n          padding: '_borderWidths.md',\n          maskImage: 'linear-gradient(#000 0 0), linear-gradient(#000 0 0)',\n          maskClip: 'content-box, border-box',\n          maskComposite: 'exclude',\n        },\n      },\n      // 流光：光带沿外层的圆角矩形走（offset-path），只在边框那一圈露出来\n      beam: {\n        root: { flexGrow: 1 },\n        ring: {\n          borderWidth: '_md',\n          borderStyle: 'solid',\n          borderColor: 'transparent',\n          maskImage: 'linear-gradient(transparent, transparent), linear-gradient(#000, #000)',\n          maskClip: 'padding-box, border-box',\n          maskComposite: 'intersect',\n        },\n      },\n    },\n  },\n});\n\n/** 卡片的部件（createUi / Provider 的 styles.Card 按它定制） */\nexport type CardPart = (typeof cardRecipe.parts)[number];\n\n/** 一次渲染里各部件的默认层（useRecipe 的结果） */\ntype CardParts = Readonly<Record<CardPart, PartLayer>>;\n\n// 倾斜角度、光的位置每帧变化，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** Card 效果的样式：tiltTransform、glare（高光的位置与强度）、light（光斑）、beamPath（流光的路径） */\nexport const cardEffectDynamicStyles = css.create({\n  tiltTransform: (rotateX: number, rotateY: number, scale: number) => ({\n    transform: `perspective(60em) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`,\n  }),\n  glare: (x: number, y: number, opacity: number) => ({\n    opacity,\n    backgroundImage: `radial-gradient(circle at ${x}% ${y}%, color-mix(in oklab, ${t.colors.accentSoft} 40%, ${t.colors.surfaceRaised}), transparent 60%)`,\n  }),\n  light: (x: number, y: number, size: string, color: string, strength: number) => ({\n    opacity: strength,\n    backgroundImage: `radial-gradient(${size} circle at ${x}% ${y}%, ${color}, transparent 70%)`,\n  }),\n  beamPath: (radius: string) => ({ offsetPath: `rect(0 auto auto 0 round ${radius})` }),\n});\n\n/** 倾斜的最大角度（度）与悬停时的放大倍数 */\nconst TILT = 10;\nconst TILT_SCALE = 1.02;\n\n/** 卡片：表面 + 可选的页头与页脚，正文可以显示加载骨架 */\nexport const Card = _component(\n  ({\n    variant,\n    padding,\n    radius,\n    header,\n    extra,\n    footer,\n    loading = false,\n    effect,\n    propsEffect,\n    propsHeader,\n    propsBody,\n    propsFooter,\n    propsSkeleton,\n    children,\n    ...rest\n  }: CardProps) => {\n    const appearance = useDefaults('Card', () => ({ variant, padding, radius }), {\n      variant: 'surface',\n      padding: 'lg',\n      radius: 'lg',\n    });\n    const recipe = useRecipe(cardRecipe);\n    // 骨架防闪烁；aria-busy 按真实的 loading\n    const skeleton = useDelayedLoading(() => loading);\n    // 出现过骨架之后，骨架与正文互换时都淡入（样式在切换的那一刻加上，动画才会播）；一开始就有内容的卡片不播\n    let revealing = false;\n    const reducedMotion = useReducedMotion();\n    let frame = _state.raw<HTMLElement | null>(null);\n    // 阻尼后的指针位置（-1 到 1，向上为正）；离开时位置不动、strength 淡出。倾斜要慢一点、带回弹；\n    // 阻尼参数按挂上时的效果定（效果一般不中途切换），跟踪的目标随 effect 变\n    const pointer = usePointer(\n      () => (effect === 'tilt' || effect === 'spotlight' ? frame : null),\n      _untrack(effect) === 'tilt' ? { bounce: 0.3, duration: 'lg' } : { duration: 'sm' },\n    );\n\n    /** 效果的光层：倾斜是一层高光，聚光是表面与边框两层，流光是边框一圈里走的光带 */\n    function effectLayers(s: CardParts, shownRadius: Radius) {\n      const x = (pointer.x + 1) * 50;\n      const y = (1 - pointer.y) * 50;\n      const layer = (part: PartLayer, sx?: css.SxStyles, child?: VNodeChild) => (\n        <span\n          {...mergeAttrs<'span'>({ ...part, sx: [part.sx, sx] }, propsEffect, {\n            'aria-hidden': true,\n          })}\n        >\n          {child}\n        </span>\n      );\n      if (effect === 'tilt')\n        return layer(s.effect, cardEffectDynamicStyles.glare(x, y, pointer.strength));\n      if (effect === 'spotlight')\n        return [\n          layer(\n            s.effect,\n            cardEffectDynamicStyles.light(\n              x,\n              y,\n              '20em',\n              `color-mix(in oklab, ${t.colors.accent} 16%, transparent)`,\n              pointer.strength,\n            ),\n          ),\n          layer(\n            s.ring,\n            cardEffectDynamicStyles.light(\n              x,\n              y,\n              '12em',\n              `color-mix(in oklab, ${t.colors.accent} 85%, transparent)`,\n              pointer.strength,\n            ),\n          ),\n        ];\n      return layer(\n        s.ring,\n        undefined,\n        <span\n          {...mergeAttrs<'span'>({\n            ...s.beam,\n            sx: [s.beam.sx, cardEffectDynamicStyles.beamPath(t.radii[shownRadius])],\n          })}\n        />,\n      );\n    }\n\n    return () => {\n      const { variant: shownVariant, padding: shownPadding, radius: shownRadius } = appearance();\n      const s = recipe({\n        variant: shownVariant,\n        padding: shownPadding,\n        extra: extra != null,\n        effect,\n      });\n      if (skeleton.value) revealing = true;\n      const surface = { ...s.root, sx: [s.root.sx, radiusStyles[shownRadius]] };\n      const content = renderContent(s);\n      if (!effect)\n        return (\n          <div {...mergeAttrs<'div'>(surface, rest, { 'aria-busy': loading || undefined })}>\n            {content}\n          </div>\n        );\n      const tilt = effect === 'tilt' && !reducedMotion.value ? pointer.strength : 0;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              ...s.frame,\n              sx: [\n                s.frame.sx,\n                radiusStyles[shownRadius],\n                effect === 'tilt' &&\n                  cardEffectDynamicStyles.tiltTransform(\n                    pointer.y * TILT * tilt,\n                    pointer.x * TILT * tilt,\n                    1 + (TILT_SCALE - 1) * tilt,\n                  ),\n              ],\n            },\n            rest,\n            { 'aria-busy': loading || undefined, ref: _toRef(frame) },\n          )}\n        >\n          <div {...mergeAttrs<'div'>(surface)}>{content}</div>\n          {effectLayers(s, shownRadius)}\n        </div>\n      );\n    };\n\n    /** 页头、正文（或骨架）、页脚 */\n    function renderContent(s: CardParts) {\n      return [\n        (header != null || extra != null) && (\n          <div {...mergeAttrs<'div'>(s.header, propsHeader)}>\n            {header}\n            {extra}\n          </div>\n        ),\n        <div\n          {...mergeAttrs<'div'>(\n            { ...s.body, sx: [s.body.sx, revealing && !skeleton.value && shimmerStyles.reveal] },\n            propsBody,\n          )}\n        >\n          {skeleton.value ? (\n            <SkeletonText\n              {...mergePartProps<SkeletonTextProps>(\n                { ...s.skeleton, sx: [s.skeleton.sx, shimmerStyles.reveal] },\n                propsSkeleton,\n              )}\n            />\n          ) : (\n            children\n          )}\n        </div>,\n        hasContent(footer) && <div {...mergeAttrs<'div'>(s.footer, propsFooter)}>{footer}</div>,\n      ];\n    }\n  },\n);\n"],"mappings":"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"}

package/dist/display/Checklist.d.ts

@@ -0,0 +1,93 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import { type TextSize } from '../utils/style/typography';
+/** 一项的状态 */
+export interface ChecklistStatuses {
+    /** 完成 */
+    done: unknown;
+    /** 待办（默认） */
+    todo: unknown;
+    /** 超时：过了计划日期还没完成 */
+    overdue: unknown;
+    /** 受阻：等别人、缺前提 */
+    blocked: unknown;
+    /** 不适用：这一次不用做，不算进进度 */
+    skipped: unknown;
+}
+/** 清单的一项 */
+export interface ChecklistItem {
+    /** 唯一的 key；不写时用 label（label 是文字时）或位置 */
+    key?: string;
+    /** 名称 */
+    label: VNodeChild;
+    /** 状态，默认 todo */
+    status?: keyof ChecklistStatuses;
+    /** 说明：怎么做、要什么材料、缺的由谁出具 */
+    description?: VNodeChild;
+    /** 负责人（谁处理、谁出具） */
+    owner?: VNodeChild;
+    /** 日期：完成的日期，或计划日期（超时时用危险色） */
+    date?: VNodeChild;
+    /** 证据：附件、报告的链接 */
+    evidence?: VNodeChild;
+    /** 操作：上传证据、去处理、催办（结束边） */
+    action?: VNodeChild;
+}
+/** 清单的排法 */
+export interface ChecklistLayouts {
+    /** 一项一行（默认）：状态、名称与说明、负责人 · 日期 · 证据，操作在结束边 */
+    list: unknown;
+    /** 一行排开、放不下换行：状态、名称、日期、证据 */
+    inline: unknown;
+    /** 只有一排状态图标：表格的格子里；悬停与读屏有每一项的说明 */
+    icons: unknown;
+}
+/** 未声明的属性落到外层元素上（list 是 div，inline 是 ul，icons 是 span） */
+export interface ChecklistProps extends PartProps<'div'> {
+    /** 各项 */
+    items: readonly ChecklistItem[];
+    /**
+     * 排法
+     * @default 'list'
+     */
+    layout?: keyof ChecklistLayouts;
+    /** 上面显示“已完成 2 / 3”与进度条（list 排法） */
+    summary?: boolean;
+    /** 字号档位；不写时继承 */
+    size?: TextSize;
+    /** 可以勾选：状态图标变成复选按钮，点了报告新的完成状态（不适用、受阻的不能勾） */
+    onCheckedChange?: (item: ChecklistItem, done: boolean) => void;
+    /** 每一项（li）的部件属性，可以按项计算 */
+    propsItem?: PartProps<'li'> | ((item: ChecklistItem) => PartProps<'li'>);
+}
+/** Checklist 的样式 */
+export declare const checklistStyles: Readonly<{
+    action: css.CompiledStyles;
+    body: css.CompiledStyles;
+    description: css.CompiledStyles;
+    icons: css.CompiledStyles;
+    inline: css.CompiledStyles;
+    inlineItem: css.CompiledStyles;
+    item: css.CompiledStyles;
+    label: css.CompiledStyles;
+    labelPending: css.CompiledStyles;
+    labelSkipped: css.CompiledStyles;
+    late: css.CompiledStyles;
+    list: css.CompiledStyles;
+    meta: css.CompiledStyles;
+    root: css.CompiledStyles;
+    status: css.CompiledStyles;
+    summary: css.CompiledStyles;
+    toggle: css.CompiledStyles;
+}>;
+/** 各状态的图标与颜色 */
+export declare const checklistStatusStyles: Readonly<{
+    blocked: css.CompiledStyles;
+    done: css.CompiledStyles;
+    overdue: css.CompiledStyles;
+    skipped: css.CompiledStyles;
+    todo: css.CompiledStyles;
+}>;
+/** 完成清单 */
+export declare const Checklist: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ChecklistProps>;