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

package/dist/display/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/display/Avatar.tsx"],"sourcesContent":["/**\n * 头像（span，role=\"img\"）：显示图片，图片还没加载好或加载失败时显示后备内容（默认是名字的首字母）。\n * 名称写在外层（aria-label），图片本身是装饰（alt=\"\"），读屏不会念两遍；没有 name 时整个头像是装饰性的（对读屏隐藏）。\n *\n *   <Avatar src={user.avatar} name={user.name} />\n *   <Avatar name=\"张三\" size=\"lg\" radius=\"md\" />\n *   <Avatar name=\"李四\" variant=\"solid\" tone=\"success\" />\n */\nimport { User } 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 { watch, type VNodeChild } from 'vue';\nimport { Icon } from '../base/Icon';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { statusToneStyles, type StatusTone } from '../utils/style/tone-styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { radiusStyles, type Radius } from '../utils/style/styles';\nimport { t } from '../config/theme/tokens';\n\n/** 后备内容（首字母、图标）的底色样式 */\nexport interface AvatarVariants {\n  /** 浅色底（默认） */\n  soft: unknown;\n  /** 实底 */\n  solid: unknown;\n}\n\n/** 头像的外观选项；可以用 createUi / Provider 的 defaults.Avatar 统一改默认值 */\nexport interface AvatarOptions {\n  /** 字号档位，头像边长是它的 2.5 倍；不写时继承 */\n  size?: TextSize;\n  /** 圆角，默认 full（圆形）；团队、组织、应用的图标常用 md（圆角方形） */\n  radius?: Radius;\n  /** 后备内容的底色样式，默认 soft */\n  variant?: keyof AvatarVariants;\n  /** 后备内容的色调（与 Button、Badge 等同一套），默认 accent */\n  tone?: StatusTone;\n}\n\n/** 角色与读屏可见性由组件按 name 决定 */\nexport type AvatarManaged = 'role' | 'aria-hidden';\n\n/** 未声明的属性落到外层 span 上 */\nexport interface AvatarProps extends PartProps<'span', AvatarManaged>, AvatarOptions {\n  /** 图片地址；不写或加载失败时显示后备内容 */\n  src?: string;\n  /** 名字：无障碍名称，也用来生成首字母；不写时头像是装饰性的 */\n  name?: string;\n  /** 后备内容，默认是名字的首字母，没有名字时是人像图标 */\n  fallback?: VNodeChild;\n  /** 图片的部件属性 */\n  propsImage?: PartProps<'img', 'src' | 'alt'>;\n  /** 后备内容的部件属性 */\n  propsFallback?: PartProps<'span'>;\n}\n\n/** 在 AvatarGroup 里：Avatar 据此叠放（AvatarGroup 提供） */\nexport const AvatarGroupContext = createContext<{ readonly grouped: true }>('AvatarGroup');\n\n/**\n * 头像的配方：部件 root（外层）、image（图片）、fallback（后备内容）；在头像组里、图片加载中是档位。\n * 后备内容的底色来自共用的 statusToneStyles，排在配方之前，createUi / Provider 的 styles.Avatar 能盖过它\n */\nexport const avatarRecipe = css.recipe({\n  name: 'Avatar',\n  parts: ['root', 'image', 'fallback'],\n  base: {\n    root: {\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      width: '2.5em',\n      height: '2.5em',\n      overflow: 'hidden',\n      verticalAlign: 'middle',\n      userSelect: 'none',\n    },\n    image: { width: '_full', height: '_full', objectFit: 'cover' },\n    fallback: { fontWeight: '_medium', lineHeight: 1, textTransform: 'uppercase' },\n  },\n  variants: {\n    // 头像组里：往前叠 0.5em，一圈页面底色的描边把相邻的分开（AvatarGroup 的“+N”也用它）\n    grouped: {\n      true: {\n        root: {\n          boxShadow: `0 0 0 ${t.borderWidths.sm} ${t.colors.background}`,\n          marginInlineStart: { default: '-0.5em', ':first-child': 0 },\n        },\n      },\n    },\n    // 图片加载完之前先藏起来（仍在 DOM 里加载），后备内容垫在下面\n    loading: { true: { image: { position: 'absolute', opacity: 0 } } },\n  },\n});\n\n/** 头像的部件（createUi / Provider 的 styles.Avatar 按它定制） */\nexport type AvatarPart = (typeof avatarRecipe.parts)[number];\n\n/** 名字的首字母：中文取最后一个字（通常是名），其他语言取前两个词的首字母 */\nexport function initials(name: string): string {\n  const trimmed = name.trim();\n  if (!trimmed) return '';\n  if (/[㐀-鿿]/.test(trimmed)) return trimmed.at(-1)!;\n  const words = trimmed.split(/\\s+/);\n  return (words[0]![0]! + (words.length > 1 ? words.at(-1)![0]! : '')).toUpperCase();\n}\n\n/** 头像：图片 + 后备内容（首字母或图标） */\nexport const Avatar = _component(\n  ({\n    src,\n    name,\n    fallback,\n    size,\n    radius,\n    variant,\n    tone,\n    propsImage,\n    propsFallback,\n    ...rest\n  }: AvatarProps) => {\n    const appearance = useDefaults('Avatar', () => ({ size, radius, variant, tone }), {\n      radius: 'full',\n      variant: 'soft',\n      tone: 'accent',\n    });\n    const recipe = useRecipe(avatarRecipe);\n    const group = AvatarGroupContext.inject(null);\n    // 图片状态：loading 加载中、loaded 已显示、error 失败（显示后备内容）\n    let status = _state<'loading' | 'loaded' | 'error'>('loading');\n    watch(\n      () => src,\n      () => (status = 'loading'),\n    );\n\n    return () => {\n      const showFallback = !src || status !== 'loaded';\n      const { size: fontSize, radius: corner, variant: fill, tone: color } = appearance();\n      const s = recipe({\n        variant: fill,\n        tone: color,\n        grouped: !!group,\n        loading: status === 'loading',\n      });\n      return (\n        <span\n          {...mergeAttrs<'span'>(\n            {\n              ...s.root,\n              sx: [\n                statusToneStyles[fill][color],\n                s.root.sx,\n                radiusStyles[corner],\n                fontSize && fontSizeStyles[fontSize],\n              ],\n            },\n            rest,\n            name ? { role: 'img', 'aria-label': name } : { 'aria-hidden': true },\n          )}\n          data-state={src ? status : 'fallback'}\n        >\n          {src && status !== 'error' && (\n            <img\n              key={src}\n              alt=\"\"\n              {...mergeAttrs<'img'>(s.image, propsImage, {\n                src,\n                onLoad: () => (status = 'loaded'),\n                onError: () => (status = 'error'),\n              })}\n            />\n          )}\n          {showFallback && (\n            <span {...mergeAttrs<'span'>(s.fallback, propsFallback, { 'aria-hidden': true })}>\n              {fallback ?? (name ? initials(name) : <Icon icon={User} />)}\n            </span>\n          )}\n        </span>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/display/AvatarGroup.d.ts

@@ -0,0 +1,29 @@
+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 type AvatarGroupManaged = 'role';
+/** 未声明的属性落到 div 上；aria-label 是这组人的名称 */
+export interface AvatarGroupProps extends PartProps<'div', AvatarGroupManaged> {
+    /** 最多显示几个头像，其余折叠成“+N”；不写时全部显示 */
+    max?: number;
+    /** 总人数：列表只拿到前几个时给出，“+N”按它算 */
+    total?: number;
+    /** 字号档位，头像边长是它的 2.5 倍；不写时继承 */
+    size?: TextSize;
+    /** “+N”的部件属性 */
+    propsMore?: PartProps<'span', 'role'>;
+    /** “+N”文字的部件属性；读屏念的是 More 的 aria-label，这里对读屏隐藏 */
+    propsMoreText?: PartProps<'span', 'aria-hidden'>;
+    /** 头像（Avatar） */
+    children?: VNodeChild;
+}
+/** AvatarGroup 的样式：root、more、moreText */
+export declare const avatarGroupStyles: Readonly<{
+    more: css.CompiledStyles;
+    moreText: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** 头像组：叠放的头像，超过 max 的折叠成“+N” */
+export declare const AvatarGroup: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<AvatarGroupProps>;

package/dist/display/AvatarGroup.js

@@ -0,0 +1,67 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs } from "../utils/props.js";
+import { fontSizeStyles } from "../utils/style/typography.js";
+import { radiusStyles } from "../utils/style/styles.js";
+import { useRecipe } from "../config/styles.js";
+import { childNodes } from "../utils/data/text.js";
+import { AvatarGroupContext, avatarRecipe } from "./Avatar.js";
+import { createTextVNode, createVNode } 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/AvatarGroup.tsx
+/** 角色由组件管理 */
+/** 未声明的属性落到 div 上；aria-label 是这组人的名称 */
+/** AvatarGroup 的样式：root、more、moreText */
+var avatarGroupStyles = css.create({
+	root: {
+		display: "inline-flex",
+		alignItems: "center"
+	},
+	more: {
+		backgroundColor: "_fill",
+		color: "_text"
+	},
+	moreText: {
+		fontSize: "0.875em",
+		fontWeight: "_medium"
+	}
+});
+/** 头像组：叠放的头像，超过 max 的折叠成“+N” */
+var AvatarGroup = /*#__PURE__*/ _component((_props, _ctx) => {
+	const max = readonlyProp(_props, "max");
+	const total = readonlyProp(_props, "total");
+	const size = readonlyProp(_props, "size");
+	const propsMore = readonlyProp(_props, "propsMore");
+	const propsMoreText = readonlyProp(_props, "propsMoreText");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const lang = useLang();
+	AvatarGroupContext.provide({ grouped: true });
+	const avatar = useRecipe(avatarRecipe);
+	return () => {
+		const avatars = childNodes(children.value);
+		const shown = max.value != null && avatars.length > max.value ? avatars.slice(0, max.value) : avatars;
+		const hidden = (total.value ?? avatars.length) - shown.length;
+		return createVNode("div", mergeAttrs({ sx: [avatarGroupStyles.root, size.value && fontSizeStyles[size.value]] }, rest, { role: "group" }), [shown, hidden > 0 && createVNode("span", mergeAttrs({
+			sx: [
+				avatar({ grouped: true }).root.sx,
+				radiusStyles.full,
+				avatarGroupStyles.more
+			],
+			"aria-label": lang.avatarMore(hidden)
+		}, propsMore.value, { role: "img" }), [createVNode("span", mergeAttrs({ sx: avatarGroupStyles.moreText }, propsMoreText.value, { "aria-hidden": true }), [createTextVNode("+"), hidden])])]);
+	};
+}, {
+	name: "AvatarGroup",
+	props: [
+		"max",
+		"total",
+		"size",
+		"propsMore",
+		"propsMoreText"
+	]
+});
+//#endregion
+export { AvatarGroup, avatarGroupStyles };
+
+//# sourceMappingURL=AvatarGroup.js.map

package/dist/display/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_createTextVNode"],"sources":["../../src/display/AvatarGroup.tsx"],"sourcesContent":["/**\n * 头像组（div，role=\"group\"）：一排头像叠放，超过 max 的折叠成“+N”。协作者、参与人、点赞的人。\n *\n *   <AvatarGroup max={3} aria-label=\"协作者\">\n *     {members.map((member) => <Avatar key={member.id} name={member.name} src={member.avatar} />)}\n *   </AvatarGroup>\n *\n * 头像的大小随组的 size（或上下文字号）；组里的 Avatar 经 AvatarGroupContext 得知自己在组里，叠放并加一圈页面底色的描边。\n * “+N”读屏念“还有 N 人”（语言包的 avatarMore）；total 给了时按它算 N（列表只拿到了一部分时）。\n * 部件：Root（div）、More（+N）、MoreText（More 里的“+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 { useLang } from '../config/context';\nimport { useRecipe } from '../config/styles';\nimport { childNodes } from '../utils/data/text';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { radiusStyles } from '../utils/style/styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { AvatarGroupContext, avatarRecipe } from './Avatar';\n\n/** 角色由组件管理 */\nexport type AvatarGroupManaged = 'role';\n\n/** 未声明的属性落到 div 上；aria-label 是这组人的名称 */\nexport interface AvatarGroupProps extends PartProps<'div', AvatarGroupManaged> {\n  /** 最多显示几个头像，其余折叠成“+N”；不写时全部显示 */\n  max?: number;\n  /** 总人数：列表只拿到前几个时给出，“+N”按它算 */\n  total?: number;\n  /** 字号档位，头像边长是它的 2.5 倍；不写时继承 */\n  size?: TextSize;\n  /** “+N”的部件属性 */\n  propsMore?: PartProps<'span', 'role'>;\n  /** “+N”文字的部件属性；读屏念的是 More 的 aria-label，这里对读屏隐藏 */\n  propsMoreText?: PartProps<'span', 'aria-hidden'>;\n  /** 头像（Avatar） */\n  children?: VNodeChild;\n}\n\n/** AvatarGroup 的样式：root、more、moreText */\nexport const avatarGroupStyles = css.create({\n  root: { display: 'inline-flex', alignItems: 'center' },\n  more: { backgroundColor: '_fill', color: '_text' },\n  // 字号缩在文字上：“+N”的圆仍和头像一样大\n  moreText: { fontSize: '0.875em', fontWeight: '_medium' },\n});\n\n/** 头像组：叠放的头像，超过 max 的折叠成“+N” */\nexport const AvatarGroup = _component(\n  ({ max, total, size, propsMore, propsMoreText, children, ...rest }: AvatarGroupProps) => {\n    const lang = useLang();\n    AvatarGroupContext.provide({ grouped: true });\n    // “+N”和组里的头像一样大、一样叠放：取头像配方（带主题定制）里组内头像的外层样式\n    const avatar = useRecipe(avatarRecipe);\n    return () => {\n      const avatars = childNodes(children);\n      const shown = max != null && avatars.length > max ? avatars.slice(0, max) : avatars;\n      const hidden = (total ?? avatars.length) - shown.length;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { sx: [avatarGroupStyles.root, size && fontSizeStyles[size]] },\n            rest,\n            { role: 'group' },\n          )}\n        >\n          {shown}\n          {hidden > 0 && (\n            <span\n              {...mergeAttrs<'span'>(\n                {\n                  sx: [\n                    avatar({ grouped: true }).root.sx,\n                    radiusStyles.full,\n                    avatarGroupStyles.more,\n                  ],\n                  'aria-label': lang.avatarMore(hidden),\n                },\n                propsMore,\n                { role: 'img' },\n              )}\n            >\n              <span\n                {...mergeAttrs<'span'>({ sx: avatarGroupStyles.moreText }, propsMoreText, {\n                  'aria-hidden': true,\n                })}\n              >\n                +{hidden}\n              </span>\n            </span>\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;AA0CA,IAAa,oBAAoB,IAAI,OAAO;CAC1C,MAAM;EAAE,SAAS;EAAe,YAAY;CAAS;CACrD,MAAM;EAAE,iBAAiB;EAAS,OAAO;CAAQ;CAEjD,UAAU;EAAE,UAAU;EAAW,YAAY;CAAU;AACzD,CAAC;;AAGD,IAAa,cAAc,0BACzB,QAAA,SAAyF;CAAA,MAAA,MAAAA,aAAA,QAAA,KAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,eAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAA7B,OAAIC,UAAA,QAAA,MAAA,KAAA;CAC9D,MAAM,OAAO,QAAQ;CACrB,mBAAmB,QAAQ,EAAE,SAAS,KAAK,CAAC;CAE5C,MAAM,SAAS,UAAU,YAAY;CACrC,aAAa;EACX,MAAM,UAAU,WAAU,SAAA,KAAS;EACnC,MAAM,QAAQ,IAAA,SAAO,QAAQ,QAAQ,SAAM,IAAA,QAAS,QAAQ,MAAM,GAAC,IAAA,KAAK,IAAI;EAC5E,MAAM,UAAU,MAAA,SAAS,QAAQ,UAAU,MAAM;EACjD,OAAAC,YAAA,OAEQ,WACF,EAAE,IAAI,CAAC,kBAAkB,MAAM,KAAA,SAAQ,eAAc,KAAA,MAAM,EAAE,GAC7D,MACA,EAAE,MAAM,QAAQ,CAClB,GAAC,CAEA,OACA,SAAS,KAACA,YAAA,QAEH,WACF;GACE,IAAI;IACF,OAAO,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,KAAK;IAC/B,aAAa;IACb,kBAAkB;GAAI;GAExB,cAAc,KAAK,WAAW,MAAM;EACtC,GAAC,UAAA,OAED,EAAE,MAAM,MAAM,CAChB,GAAC,CAAAA,YAAA,QAGK,WAAmB,EAAE,IAAI,kBAAkB,SAAS,GAAC,cAAA,OAAiB,EACxE,eAAe,KACjB,CAAC,GAAC,CAAAC,gBAAA,GAAA,GAEA,MAAM,CAAA,CAAA,CAAA,CAGb,CAAA;CAGP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

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