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

package/dist/base/Indicator.d.ts

@@ -0,0 +1,126 @@
+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 IndicatorPlacements {
+    /** 右上（默认；从右到左排版时左上） */
+    'top-end': unknown;
+    /** 右下：头像的在线状态 */
+    'bottom-end': unknown;
+    /** 左上 */
+    'top-start': unknown;
+    /** 左下 */
+    'bottom-start': unknown;
+}
+/** 被标记元素的形状：决定角标往里收多少 */
+export interface IndicatorOverlaps {
+    /** 方形（默认）：角标中心在角上 */
+    rectangular: unknown;
+    /** 圆形（圆形头像）：角标收到圆的边上 */
+    circular: unknown;
+}
+/** Indicator 的外观选项：可以在 ComponentDefaults 里统一设置 */
+export interface IndicatorOptions {
+    /** 色调，默认 danger */
+    tone?: StatusTone;
+}
+/** 未声明的属性落到外层 span 上 */
+export interface IndicatorProps extends PartProps<'span'>, IndicatorOptions {
+    /** 计数；超过 max 显示“max+” */
+    count?: number;
+    /** 计数的上限，默认 99 */
+    max?: number;
+    /** 只显示小圆点（不显示数字） */
+    dot?: boolean;
+    /** count 为 0 时也显示 */
+    showZero?: boolean;
+    /** 位置，默认 top-end */
+    placement?: keyof IndicatorPlacements;
+    /** 被标记元素的形状，默认 rectangular */
+    overlap?: keyof IndicatorOverlaps;
+    /** 给读屏的说明；默认取语言包（“N 条新消息”“有新消息”） */
+    label?: string;
+    /** 角标的部件属性 */
+    propsBadge?: PartProps<'span'>;
+    /** 角标里计数文字的部件属性（读屏念的是 label，计数文字对读屏隐藏） */
+    propsCount?: PartProps<'span', 'aria-hidden'>;
+    /** 被标记的元素 */
+    children?: VNodeChild;
+}
+/**
+ * 角标的配方：部件 root（外层）、badge（角标）、count（计数文字）；位置、形状、圆点是档位。
+ * 角标的实底色调来自共用的 statusToneSx，排在配方之前，createUi / Provider 的 styles.Indicator 能盖过它
+ */
+export declare const indicatorRecipe: css.Recipe<"badge" | "count" | "root", {
+    readonly dot: {
+        readonly true: {
+            readonly badge: {
+                readonly width: "0.625em";
+                readonly height: "0.625em";
+            };
+        };
+        readonly false: {
+            readonly badge: {
+                readonly minWidth: "1.6em";
+                readonly height: "1.6em";
+                readonly paddingInline: "0.4em";
+                readonly fontSize: "0.75em";
+            };
+        };
+    };
+    readonly placement: {
+        readonly 'top-end': {
+            readonly badge: {
+                readonly top: 0;
+                readonly insetInlineEnd: 0;
+                readonly translate: {
+                    readonly default: "50% -50%";
+                    readonly ':dir(rtl)': "-50% -50%";
+                };
+            };
+        };
+        readonly 'bottom-end': {
+            readonly badge: {
+                readonly bottom: 0;
+                readonly insetInlineEnd: 0;
+                readonly translate: {
+                    readonly default: "50% 50%";
+                    readonly ':dir(rtl)': "-50% 50%";
+                };
+            };
+        };
+        readonly 'top-start': {
+            readonly badge: {
+                readonly top: 0;
+                readonly insetInlineStart: 0;
+                readonly translate: {
+                    readonly default: "-50% -50%";
+                    readonly ':dir(rtl)': "50% -50%";
+                };
+            };
+        };
+        readonly 'bottom-start': {
+            readonly badge: {
+                readonly bottom: 0;
+                readonly insetInlineStart: 0;
+                readonly translate: {
+                    readonly default: "-50% 50%";
+                    readonly ':dir(rtl)': "50% 50%";
+                };
+            };
+        };
+    };
+    readonly overlap: {
+        readonly rectangular: {};
+        readonly circular: {
+            readonly badge: {
+                readonly margin: "14.6%";
+            };
+        };
+    };
+}>;
+/** 角标的部件（createUi / Provider 的 styles.Indicator 按它定制） */
+export type IndicatorPart = (typeof indicatorRecipe.parts)[number];
+/** 角标：叠在被标记元素角上的计数或小圆点 */
+export declare const Indicator: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<IndicatorProps>;

package/dist/base/Indicator.js

@@ -0,0 +1,158 @@
+import { t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { useDefaults } from "../config/defaults.js";
+import { mergeAttrs } from "../utils/props.js";
+import { useRecipe } from "../config/styles.js";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+import { statusToneSx } from "../utils/style/tone-styles.js";
+import { createVNode, mergeProps } 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/base/Indicator.tsx
+/** 角标在被标记元素的哪个角（按书写方向） */
+/** 被标记元素的形状：决定角标往里收多少 */
+/** Indicator 的外观选项：可以在 ComponentDefaults 里统一设置 */
+/** 未声明的属性落到外层 span 上 */
+/**
+* 角标的配方：部件 root（外层）、badge（角标）、count（计数文字）；位置、形状、圆点是档位。
+* 角标的实底色调来自共用的 statusToneSx，排在配方之前，createUi / Provider 的 styles.Indicator 能盖过它
+*/
+var indicatorRecipe = css.recipe({
+	name: "Indicator",
+	parts: [
+		"root",
+		"badge",
+		"count"
+	],
+	base: {
+		root: {
+			position: "relative",
+			display: "inline-flex",
+			verticalAlign: "middle",
+			flexShrink: 0
+		},
+		badge: {
+			position: "absolute",
+			zIndex: 1,
+			boxSizing: "border-box",
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			borderRadius: "_full",
+			boxShadow: `0 0 0 ${t.borderWidths.sm} ${t.colors.background}`,
+			fontWeight: "_semibold",
+			lineHeight: 1,
+			fontVariantNumeric: "tabular-nums",
+			whiteSpace: "nowrap",
+			pointerEvents: "none",
+			forcedColorAdjust: "none"
+		}
+	},
+	variants: {
+		dot: {
+			true: { badge: {
+				width: "0.625em",
+				height: "0.625em"
+			} },
+			false: { badge: {
+				minWidth: "1.6em",
+				height: "1.6em",
+				paddingInline: "0.4em",
+				fontSize: "0.75em"
+			} }
+		},
+		placement: {
+			"top-end": { badge: {
+				top: 0,
+				insetInlineEnd: 0,
+				translate: {
+					default: "50% -50%",
+					":dir(rtl)": "-50% -50%"
+				}
+			} },
+			"bottom-end": { badge: {
+				bottom: 0,
+				insetInlineEnd: 0,
+				translate: {
+					default: "50% 50%",
+					":dir(rtl)": "-50% 50%"
+				}
+			} },
+			"top-start": { badge: {
+				top: 0,
+				insetInlineStart: 0,
+				translate: {
+					default: "-50% -50%",
+					":dir(rtl)": "50% -50%"
+				}
+			} },
+			"bottom-start": { badge: {
+				bottom: 0,
+				insetInlineStart: 0,
+				translate: {
+					default: "-50% 50%",
+					":dir(rtl)": "50% 50%"
+				}
+			} }
+		},
+		overlap: {
+			rectangular: {},
+			circular: { badge: { margin: "14.6%" } }
+		}
+	}
+});
+/** 角标的部件（createUi / Provider 的 styles.Indicator 按它定制） */
+/** 角标：叠在被标记元素角上的计数或小圆点 */
+var Indicator = /*#__PURE__*/ _component((_props, _ctx) => {
+	const count = readonlyProp(_props, "count");
+	const max = readonlyProp(_props, "max", 99);
+	const dot = readonlyProp(_props, "dot", false);
+	const showZero = readonlyProp(_props, "showZero", false);
+	const tone = readonlyProp(_props, "tone");
+	const placement = readonlyProp(_props, "placement", "top-end");
+	const overlap = readonlyProp(_props, "overlap", "rectangular");
+	const label = readonlyProp(_props, "label");
+	const propsBadge = readonlyProp(_props, "propsBadge");
+	const propsCount = readonlyProp(_props, "propsCount");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const lang = useLang();
+	const appearance = useDefaults("Indicator", () => ({ tone: tone.value }), { tone: "danger" });
+	const recipe = useRecipe(indicatorRecipe);
+	return () => {
+		const visible = dot.value || count.value != null && (count.value > 0 || showZero.value);
+		const text = count.value == null ? "" : count.value > max.value ? `${max.value}+` : String(count.value);
+		const shownTone = appearance().tone;
+		const s = recipe({
+			dot: dot.value,
+			placement: placement.value,
+			overlap: overlap.value,
+			tone: shownTone
+		});
+		return createVNode("span", mergeAttrs(s.root, rest), [children.value, visible && createVNode("span", mergeProps(mergeAttrs({
+			...s.badge,
+			sx: [statusToneSx("solid", shownTone), s.badge.sx]
+		}, propsBadge.value), { "data-placement": placement.value }), [!dot.value && createVNode("span", mergeAttrs(s.count, propsCount.value, { "aria-hidden": true }), [text]), createVNode(VisuallyHidden, { "key": "__site0" }, {
+			default: () => [label.value ?? (dot.value ? lang.indicatorDot : lang.indicatorCount(count.value ?? 0))],
+			$stable: true
+		})])]);
+	};
+}, {
+	name: "Indicator",
+	props: [
+		"count",
+		"max",
+		"dot",
+		"showZero",
+		"tone",
+		"placement",
+		"overlap",
+		"label",
+		"propsBadge",
+		"propsCount"
+	]
+});
+//#endregion
+export { Indicator, indicatorRecipe };
+
+//# sourceMappingURL=Indicator.js.map

package/dist/base/Indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/base/Indicator.tsx"],"sourcesContent":["/**\n * 角标（span）：叠在头像、图标按钮右上角的计数或小圆点（未读消息、在线状态）。\n * 包住要标记的元素，角标绝对定位在它的角上；计数超过 max 显示“99+”。\n *\n *   <Indicator count={unread}><IconButton icon={Bell} aria-label=\"通知\" /></Indicator>\n *   <Indicator dot tone=\"success\" placement=\"bottom-end\" overlap=\"circular\" label=\"在线\"><Avatar name=\"张三\" /></Indicator>\n *\n * 读屏：角标里的数字对读屏隐藏，另有一句完整的说明（label，默认取语言包的“N 条新消息”“有新消息”），念在被标记的元素之后。\n * count 为 0（且没有 showZero）、也没有 dot 时不显示角标。部件：Root（外层 span）、Badge（角标）、Count（计数文字）。\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 { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { statusToneSx, type StatusTone } from '../utils/style/tone-styles';\nimport { VisuallyHidden } from './VisuallyHidden';\nimport { t } from '../config/theme/tokens';\n\n/** 角标在被标记元素的哪个角（按书写方向） */\nexport interface IndicatorPlacements {\n  /** 右上（默认；从右到左排版时左上） */\n  'top-end': unknown;\n  /** 右下：头像的在线状态 */\n  'bottom-end': unknown;\n  /** 左上 */\n  'top-start': unknown;\n  /** 左下 */\n  'bottom-start': unknown;\n}\n\n/** 被标记元素的形状：决定角标往里收多少 */\nexport interface IndicatorOverlaps {\n  /** 方形（默认）：角标中心在角上 */\n  rectangular: unknown;\n  /** 圆形（圆形头像）：角标收到圆的边上 */\n  circular: unknown;\n}\n\n/** Indicator 的外观选项：可以在 ComponentDefaults 里统一设置 */\nexport interface IndicatorOptions {\n  /** 色调，默认 danger */\n  tone?: StatusTone;\n}\n\n/** 未声明的属性落到外层 span 上 */\nexport interface IndicatorProps extends PartProps<'span'>, IndicatorOptions {\n  /** 计数；超过 max 显示“max+” */\n  count?: number;\n  /** 计数的上限，默认 99 */\n  max?: number;\n  /** 只显示小圆点（不显示数字） */\n  dot?: boolean;\n  /** count 为 0 时也显示 */\n  showZero?: boolean;\n  /** 位置，默认 top-end */\n  placement?: keyof IndicatorPlacements;\n  /** 被标记元素的形状，默认 rectangular */\n  overlap?: keyof IndicatorOverlaps;\n  /** 给读屏的说明；默认取语言包（“N 条新消息”“有新消息”） */\n  label?: string;\n  /** 角标的部件属性 */\n  propsBadge?: PartProps<'span'>;\n  /** 角标里计数文字的部件属性（读屏念的是 label，计数文字对读屏隐藏） */\n  propsCount?: PartProps<'span', 'aria-hidden'>;\n  /** 被标记的元素 */\n  children?: VNodeChild;\n}\n\n/**\n * 角标的配方：部件 root（外层）、badge（角标）、count（计数文字）；位置、形状、圆点是档位。\n * 角标的实底色调来自共用的 statusToneSx，排在配方之前，createUi / Provider 的 styles.Indicator 能盖过它\n */\nexport const indicatorRecipe = css.recipe({\n  name: 'Indicator',\n  parts: ['root', 'badge', 'count'],\n  base: {\n    root: { position: 'relative', display: 'inline-flex', verticalAlign: 'middle', flexShrink: 0 },\n    badge: {\n      position: 'absolute',\n      zIndex: 1,\n      boxSizing: 'border-box',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      borderRadius: '_full',\n      // 一圈页面底色，和被标记的元素分开\n      boxShadow: `0 0 0 ${t.borderWidths.sm} ${t.colors.background}`,\n      fontWeight: '_semibold',\n      lineHeight: 1,\n      fontVariantNumeric: 'tabular-nums',\n      whiteSpace: 'nowrap',\n      pointerEvents: 'none',\n      // 圆点只靠颜色表示“有新消息”：Windows 高对比下保留色调，不被系统改成背景色\n      forcedColorAdjust: 'none',\n    },\n  },\n  variants: {\n    // 圆点或计数：角标的尺寸\n    dot: {\n      true: { badge: { width: '0.625em', height: '0.625em' } },\n      false: {\n        badge: { minWidth: '1.6em', height: '1.6em', paddingInline: '0.4em', fontSize: '0.75em' },\n      },\n    },\n    // 角标的中心对准角：按书写方向的位移\n    placement: {\n      'top-end': {\n        badge: {\n          top: 0,\n          insetInlineEnd: 0,\n          translate: { default: '50% -50%', ':dir(rtl)': '-50% -50%' },\n        },\n      },\n      'bottom-end': {\n        badge: {\n          bottom: 0,\n          insetInlineEnd: 0,\n          translate: { default: '50% 50%', ':dir(rtl)': '-50% 50%' },\n        },\n      },\n      'top-start': {\n        badge: {\n          top: 0,\n          insetInlineStart: 0,\n          translate: { default: '-50% -50%', ':dir(rtl)': '50% -50%' },\n        },\n      },\n      'bottom-start': {\n        badge: {\n          bottom: 0,\n          insetInlineStart: 0,\n          translate: { default: '-50% 50%', ':dir(rtl)': '50% 50%' },\n        },\n      },\n    },\n    overlap: {\n      rectangular: {},\n      // 圆形：角落到圆边的距离约是边长的 14.6%（1 - 1/√2 的一半），角标收进去这么多\n      circular: { badge: { margin: '14.6%' } },\n    },\n  },\n});\n\n/** 角标的部件（createUi / Provider 的 styles.Indicator 按它定制） */\nexport type IndicatorPart = (typeof indicatorRecipe.parts)[number];\n\n/** 角标：叠在被标记元素角上的计数或小圆点 */\nexport const Indicator = _component(\n  ({\n    count,\n    max = 99,\n    dot = false,\n    showZero = false,\n    tone,\n    placement = 'top-end',\n    overlap = 'rectangular',\n    label,\n    propsBadge,\n    propsCount,\n    children,\n    ...rest\n  }: IndicatorProps) => {\n    const lang = useLang();\n    const appearance = useDefaults('Indicator', () => ({ tone }), { tone: 'danger' });\n    const recipe = useRecipe(indicatorRecipe);\n    return () => {\n      const visible = dot || (count != null && (count > 0 || showZero));\n      const text = count == null ? '' : count > max ? `${max}+` : String(count);\n      const shownTone = appearance().tone;\n      const s = recipe({ dot, placement, overlap, tone: shownTone });\n      return (\n        <span {...mergeAttrs<'span'>(s.root, rest)}>\n          {children}\n          {visible && (\n            <span\n              {...mergeAttrs<'span'>(\n                { ...s.badge, sx: [statusToneSx('solid', shownTone), s.badge.sx] },\n                propsBadge,\n              )}\n              data-placement={placement}\n            >\n              {!dot && (\n                <span {...mergeAttrs<'span'>(s.count, propsCount, { 'aria-hidden': true })}>\n                  {text}\n                </span>\n              )}\n              <VisuallyHidden>\n                {label ?? (dot ? lang.indicatorDot : lang.indicatorCount(count ?? 0))}\n              </VisuallyHidden>\n            </span>\n          )}\n        </span>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/base/Kbd.d.ts

@@ -0,0 +1,13 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 未声明的属性落到 kbd 上 */
+export interface KbdProps extends PartProps<'kbd'> {
+    children?: VNodeChild;
+}
+/** Kbd 的样式：root */
+export declare const kbdStyles: Readonly<{
+    root: css.CompiledStyles;
+}>;
+/** 按键（kbd）：快捷键说明，组合键写成几个 Kbd */
+export declare const Kbd: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<KbdProps>;

package/dist/base/Kbd.js

@@ -0,0 +1,34 @@
+import { mergeAttrs } from "../utils/props.js";
+import { createVNode } from "vue";
+import { _component, childrenProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/base/Kbd.tsx
+/** 未声明的属性落到 kbd 上 */
+/** Kbd 的样式：root */
+var kbdStyles = css.create({ root: {
+	display: "inline-block",
+	minWidth: "1.6em",
+	paddingInline: "_xs",
+	borderWidth: "_xs",
+	borderBottomWidth: "_sm",
+	borderStyle: "solid",
+	borderColor: "_border",
+	borderRadius: "_sm",
+	backgroundColor: "_surface",
+	color: "_text",
+	fontFamily: "_mono",
+	fontSize: "0.85em",
+	lineHeight: "_snug",
+	textAlign: "center",
+	whiteSpace: "nowrap"
+} });
+/** 按键（kbd）：快捷键说明，组合键写成几个 Kbd */
+var Kbd = /*#__PURE__*/ _component((_props, _ctx) => {
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	return () => createVNode("kbd", mergeAttrs({ sx: kbdStyles.root }, rest), [children.value]);
+}, { name: "Kbd" });
+//#endregion
+export { Kbd, kbdStyles };
+
+//# sourceMappingURL=Kbd.js.map

package/dist/base/Kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.js","names":["_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/Kbd.tsx"],"sourcesContent":["/**\n * 按键：键盘快捷键的说明。组合键写成几个 Kbd：\n *\n *   <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>\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';\n\n/** 未声明的属性落到 kbd 上 */\nexport interface KbdProps extends PartProps<'kbd'> {\n  children?: VNodeChild;\n}\n\n/** Kbd 的样式：root */\nexport const kbdStyles = css.create({\n  root: {\n    display: 'inline-block',\n    // 单个字母的键也接近方形\n    minWidth: '1.6em',\n    paddingInline: '_xs',\n    borderWidth: '_xs',\n    borderBottomWidth: '_sm',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    borderRadius: '_sm',\n    backgroundColor: '_surface',\n    color: '_text',\n    fontFamily: '_mono',\n    // 相对周围文字略小：是比例不是字号档位\n    fontSize: '0.85em',\n    lineHeight: '_snug',\n    textAlign: 'center',\n    whiteSpace: 'nowrap',\n  },\n});\n\n/** 按键（kbd）：快捷键说明，组合键写成几个 Kbd */\nexport const Kbd = _component(({ children, ...rest }: KbdProps) => () => (\n  <kbd {...mergeAttrs<'kbd'>({ sx: kbdStyles.root }, rest)}>{children}</kbd>\n));\n"],"mappings":";;;;;;;AAgBA,IAAa,YAAY,IAAI,OAAO,EAClC,MAAM;CACJ,SAAS;CAET,UAAU;CACV,eAAe;CACf,aAAa;CACb,mBAAmB;CACnB,aAAa;CACb,aAAa;CACb,cAAc;CACd,iBAAiB;CACjB,OAAO;CACP,YAAY;CAEZ,UAAU;CACV,YAAY;CACZ,WAAW;CACX,YAAY;AACd,EACF,CAAC;;AAGD,IAAa,MAAM,0BAAW,QAAA,SAAA;CAAA,MAAA,WAAAA,aAAA,MAAA;CAAA,MAAgB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAAiBC,YAAA,OACxD,WAAkB,EAAE,IAAI,UAAU,KAAK,GAAG,IAAI,GAAC,CAAA,SAAA,KAAA,CAAA;AACzD,GAAA,EAAA,MAAA,MAAA,CAAA"}

package/dist/base/Link.d.ts

@@ -0,0 +1,61 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import { type Tone } from '../utils/style/typography';
+import { type IconProps } from './Icon';
+/** 链接的下划线 */
+export interface LinkUnderlines {
+    /** 一直显示：正文里的链接，不能只靠颜色区分（WCAG 1.4.1） */
+    always: unknown;
+    /** 悬停时才显示：列表、卡片里一眼能看出是链接的地方 */
+    hover: unknown;
+    /** 不显示：导航菜单等上下文已表明是链接的地方 */
+    none: unknown;
+}
+/** Link 的外观选项：可以在 ComponentDefaults 里统一设置 */
+export interface LinkOptions {
+    /** 色调，默认 accent（品牌色文字） */
+    tone?: Tone;
+    /** 下划线，默认 always */
+    underline?: keyof LinkUnderlines;
+}
+/** 未声明的属性落到 <a> 上 */
+export interface LinkProps extends PartProps<'a', 'href'>, LinkOptions {
+    /** 链接地址；必填：没有地址的“链接”应该用按钮 */
+    href: string;
+    /** 外部链接：新窗口打开，加 rel="noopener noreferrer"、外链图标与读屏提示 */
+    external?: boolean;
+    /** 外链图标的部件属性 */
+    propsIcon?: Partial<IconProps>;
+    children?: VNodeChild;
+}
+/**
+ * 链接的配方：部件 root（a）、icon（外链图标），下划线是档位。色调的文字色来自共用的 toneStyles，
+ * 排在配方之前，createUi / Provider 的 styles.Link 能盖过它
+ */
+export declare const linkRecipe: css.Recipe<"icon" | "root", {
+    readonly underline: {
+        readonly always: {
+            readonly root: {
+                readonly textDecorationLine: "underline";
+            };
+        };
+        readonly hover: {
+            readonly root: {
+                readonly textDecorationLine: {
+                    readonly default: "none";
+                    readonly ':hover': "underline";
+                };
+            };
+        };
+        readonly none: {
+            readonly root: {
+                readonly textDecorationLine: "none";
+            };
+        };
+    };
+}>;
+/** 链接的部件（createUi / Provider 的 styles.Link 按它定制） */
+export type LinkPart = (typeof linkRecipe.parts)[number];
+/** 文字链接（a）：品牌色、下划线与焦点环；external 时新窗口打开并带读屏提示 */
+export declare const Link: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<LinkProps>;

package/dist/base/Link.js

@@ -0,0 +1,114 @@
+import { useLang } from "../config/context.js";
+import { useDefaults } from "../config/defaults.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { toneStyles } from "../utils/style/typography.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { useRecipe } from "../config/styles.js";
+import { Icon } from "./Icon.js";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+import { externalLinkAttrs, useRouterLink } from "../utils/dom/link.js";
+import { Fragment, 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";
+import { ArrowUpRight } from "@lucide/icons";
+//#region src/base/Link.tsx
+/**
+* 文字链接。默认带下划线：正文里的链接不能只靠颜色区分（WCAG 1.4.1）。
+*
+*   <Link href="/orders">查看订单</Link>
+*   <Link href="https://example.com" external>帮助文档</Link>   新窗口打开，带图标与读屏提示
+*
+* 按钮样式的链接用 LinkButton。站内链接经 createUi 的 router 不刷新页面地跳转（utils/dom/link.ts）。
+*/
+/** 链接的下划线 */
+/** Link 的外观选项：可以在 ComponentDefaults 里统一设置 */
+/** 未声明的属性落到 <a> 上 */
+/**
+* 链接的配方：部件 root（a）、icon（外链图标），下划线是档位。色调的文字色来自共用的 toneStyles，
+* 排在配方之前，createUi / Provider 的 styles.Link 能盖过它
+*/
+var linkRecipe = css.recipe({
+	name: "Link",
+	parts: ["root", "icon"],
+	base: {
+		root: {
+			borderRadius: "_xs",
+			textDecorationThickness: "_xs",
+			textUnderlineOffset: "0.2em",
+			cursor: "pointer"
+		},
+		icon: {
+			marginInlineStart: "0.1em",
+			verticalAlign: "-0.1em"
+		}
+	},
+	variants: { underline: {
+		always: { root: { textDecorationLine: "underline" } },
+		hover: { root: { textDecorationLine: {
+			default: "none",
+			":hover": "underline"
+		} } },
+		none: { root: { textDecorationLine: "none" } }
+	} }
+});
+/** 链接的部件（createUi / Provider 的 styles.Link 按它定制） */
+/** 文字链接（a）：品牌色、下划线与焦点环；external 时新窗口打开并带读屏提示 */
+var Link = /*#__PURE__*/ _component((_props, _ctx) => {
+	const href = readonlyProp(_props, "href");
+	const tone = readonlyProp(_props, "tone");
+	const underline = readonlyProp(_props, "underline");
+	const external = readonlyProp(_props, "external", false);
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const lang = useLang();
+	const router = useRouterLink();
+	const appearance = useDefaults("Link", () => ({
+		tone: tone.value,
+		underline: underline.value
+	}), {
+		tone: "accent",
+		underline: "always"
+	});
+	const recipe = useRecipe(linkRecipe);
+	return () => {
+		const { tone: shownTone, underline: shownUnderline } = appearance();
+		const s = recipe({
+			underline: shownUnderline,
+			tone: shownTone
+		});
+		return createVNode("a", mergeAttrs({
+			...s.root,
+			sx: [
+				toneStyles[shownTone],
+				s.root.sx,
+				focusRingStyles.visible
+			]
+		}, rest, external.value ? {
+			href: href.value,
+			...externalLinkAttrs
+		} : {
+			href: router.href(href.value),
+			onClick: (event) => router.onClick(event, href.value)
+		}), [children.value, external.value && createVNode(Fragment, null, [createVNode(Icon, mergePartProps({
+			...s.icon,
+			icon: ArrowUpRight
+		}, propsIcon.value), null), createVNode(VisuallyHidden, { "key": "__site0" }, {
+			default: () => [lang.linkNewWindow],
+			$stable: true
+		})])]);
+	};
+}, {
+	name: "Link",
+	props: [
+		"href",
+		"tone",
+		"underline",
+		"external",
+		"propsIcon"
+	]
+});
+//#endregion
+export { Link, linkRecipe };
+
+//# sourceMappingURL=Link.js.map

package/dist/base/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_Fragment"],"sources":["../../src/base/Link.tsx"],"sourcesContent":["/**\n * 文字链接。默认带下划线：正文里的链接不能只靠颜色区分（WCAG 1.4.1）。\n *\n *   <Link href=\"/orders\">查看订单</Link>\n *   <Link href=\"https://example.com\" external>帮助文档</Link>   新窗口打开，带图标与读屏提示\n *\n * 按钮样式的链接用 LinkButton。站内链接经 createUi 的 router 不刷新页面地跳转（utils/dom/link.ts）。\n */\nimport { ArrowUpRight } 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 { useLang } from '../config/context';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { externalLinkAttrs, useRouterLink } from '../utils/dom/link';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { toneStyles, type Tone } from '../utils/style/typography';\nimport { Icon, type IconProps } from './Icon';\nimport { VisuallyHidden } from './VisuallyHidden';\n\n/** 链接的下划线 */\nexport interface LinkUnderlines {\n  /** 一直显示：正文里的链接，不能只靠颜色区分（WCAG 1.4.1） */\n  always: unknown;\n  /** 悬停时才显示：列表、卡片里一眼能看出是链接的地方 */\n  hover: unknown;\n  /** 不显示：导航菜单等上下文已表明是链接的地方 */\n  none: unknown;\n}\n\n/** Link 的外观选项：可以在 ComponentDefaults 里统一设置 */\nexport interface LinkOptions {\n  /** 色调，默认 accent（品牌色文字） */\n  tone?: Tone;\n  /** 下划线，默认 always */\n  underline?: keyof LinkUnderlines;\n}\n\n/** 未声明的属性落到 <a> 上 */\nexport interface LinkProps extends PartProps<'a', 'href'>, LinkOptions {\n  /** 链接地址；必填：没有地址的“链接”应该用按钮 */\n  href: string;\n  /** 外部链接：新窗口打开，加 rel=\"noopener noreferrer\"、外链图标与读屏提示 */\n  external?: boolean;\n  /** 外链图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  children?: VNodeChild;\n}\n\n/**\n * 链接的配方：部件 root（a）、icon（外链图标），下划线是档位。色调的文字色来自共用的 toneStyles，\n * 排在配方之前，createUi / Provider 的 styles.Link 能盖过它\n */\nexport const linkRecipe = css.recipe({\n  name: 'Link',\n  parts: ['root', 'icon'],\n  base: {\n    root: {\n      borderRadius: '_xs',\n      textDecorationThickness: '_xs',\n      textUnderlineOffset: '0.2em',\n      cursor: 'pointer',\n    },\n    // 图标跟随文字：不换行到下一行开头\n    icon: { marginInlineStart: '0.1em', verticalAlign: '-0.1em' },\n  },\n  variants: {\n    underline: {\n      always: { root: { textDecorationLine: 'underline' } },\n      hover: { root: { textDecorationLine: { default: 'none', ':hover': 'underline' } } },\n      none: { root: { textDecorationLine: 'none' } },\n    },\n  },\n});\n\n/** 链接的部件（createUi / Provider 的 styles.Link 按它定制） */\nexport type LinkPart = (typeof linkRecipe.parts)[number];\n\n/** 文字链接（a）：品牌色、下划线与焦点环；external 时新窗口打开并带读屏提示 */\nexport const Link = _component(\n  ({ href, tone, underline, external = false, propsIcon, children, ...rest }: LinkProps) => {\n    const lang = useLang();\n    const router = useRouterLink();\n    const appearance = useDefaults('Link', () => ({ tone, underline }), {\n      tone: 'accent',\n      underline: 'always',\n    });\n    const recipe = useRecipe(linkRecipe);\n    return () => {\n      const { tone: shownTone, underline: shownUnderline } = appearance();\n      const s = recipe({ underline: shownUnderline, tone: shownTone });\n      return (\n        <a\n          {...mergeAttrs<'a'>(\n            { ...s.root, sx: [toneStyles[shownTone], s.root.sx, focusRingStyles.visible] },\n            rest,\n            external\n              ? { href, ...externalLinkAttrs }\n              : // 使用方的 onClick 先执行，preventDefault 可以拦下路由跳转（mergeProps 的规则）\n                {\n                  href: router.href(href),\n                  onClick: (event: MouseEvent) => router.onClick(event, href),\n                },\n          )}\n        >\n          {children}\n          {external && (\n            <>\n              <Icon {...mergePartProps<IconProps>({ ...s.icon, icon: ArrowUpRight }, propsIcon)} />\n              <VisuallyHidden>{lang.linkNewWindow}</VisuallyHidden>\n            </>\n          )}\n        </a>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,IAAa,aAAa,IAAI,OAAO;CACnC,MAAM;CACN,OAAO,CAAC,QAAQ,MAAM;CACtB,MAAM;EACJ,MAAM;GACJ,cAAc;GACd,yBAAyB;GACzB,qBAAqB;GACrB,QAAQ;EACV;EAEA,MAAM;GAAE,mBAAmB;GAAS,eAAe;EAAS;CAC9D;CACA,UAAU,EACR,WAAW;EACT,QAAQ,EAAE,MAAM,EAAE,oBAAoB,YAAY,EAAE;EACpD,OAAO,EAAE,MAAM,EAAE,oBAAoB;GAAE,SAAS;GAAQ,UAAU;EAAY,EAAE,EAAE;EAClF,MAAM,EAAE,MAAM,EAAE,oBAAoB,OAAO,EAAE;CAC/C,EACF;AACF,CAAC;;;AAMD,IAAa,OAAO,0BAClB,QAAA,SAA0F;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,YAArD,KAAK;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAA0B,OAAIC,UAAA,QAAA,MAAA,KAAA;CACtE,MAAM,OAAO,QAAQ;CACrB,MAAM,SAAS,cAAc;CAC7B,MAAM,aAAa,YAAY,eAAe;EAAE,MAAI,KAAA;EAAE,WAAS,UAAA;CAAC,IAAI;EAClE,MAAM;EACN,WAAW;CACb,CAAC;CACD,MAAM,SAAS,UAAU,UAAU;CACnC,aAAa;EACX,MAAM,EAAE,MAAM,WAAW,WAAW,mBAAmB,WAAW;EAClE,MAAM,IAAI,OAAO;GAAE,WAAW;GAAgB,MAAM;EAAU,CAAC;EAC/D,OAAAC,YAAA,KAEQ,WACF;GAAE,GAAG,EAAE;GAAM,IAAI;IAAC,WAAW;IAAY,EAAE,KAAK;IAAI,gBAAgB;GAAO;EAAE,GAC7E,MACA,SAAA,QACI;GAAE,MAAI,KAAA;GAAE,GAAG;EAAkB,IAE7B;GACE,MAAM,OAAO,KAAI,KAAA,KAAK;GACtB,UAAU,UAAsB,OAAO,QAAQ,OAAK,KAAA,KAAM;EAC5D,CACN,GAAC,CAAA,SAAA,OAGA,SAAA,SAAAA,YAAAC,UAAA,MAAA,CAAAD,YAAA,MAEa,eAA0B;GAAE,GAAG,EAAE;GAAM,MAAM;EAAa,GAAC,UAAA,KAAW,GAAC,IAAA,GAAAA,YAAA,gBAAA,EAAA,OAAA,UAAA,GAAA;GAAA,eAAA,CAChE,KAAK,aAAa;GAAA,SAAA;EAAA,CAAA,CAAA,CAAA,CAEtC,CAAA;CAGP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/base/LinkButton.d.ts

@@ -0,0 +1,18 @@
+import { type PartProps } from '../utils/props';
+import { type ButtonContentOptions, type ButtonOptions } from './button-core';
+/** 地址、不可用与忙碌由组件管理 */
+export type LinkButtonManaged = 'href' | 'aria-disabled' | 'aria-busy' | 'role';
+/** 未声明的属性落到 a 上 */
+export interface LinkButtonProps extends PartProps<'a', LinkButtonManaged>, ButtonOptions, ButtonContentOptions {
+    /** 链接地址 */
+    href: string;
+    /** 外部链接：新窗口打开，加 rel="noopener noreferrer"、外链图标（没给 iconEnd 时）与读屏提示 */
+    external?: boolean;
+    /**
+     * 不可用：去掉 href（不能点、不能用键盘打开），保留 role="link" 与 aria-disabled，读屏仍知道这里有个链接。
+     * 不可用的链接不能聚焦；需要说明原因时把说明写在旁边
+     */
+    disabled?: boolean;
+}
+/** 外观是按钮的链接（a）：样式、图标、加载中、波纹与 Button 一致 */
+export declare const LinkButton: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<LinkButtonProps>;