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

package/dist/base/Tag.js

@@ -0,0 +1,92 @@
+import { t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { useDefaults } from "../config/defaults.js";
+import { mergeAttrs, mergePartProps, mergeProps as mergeProps$1 } from "../utils/props.js";
+import { badgeParts, badgeRecipe } from "./badge-styles.js";
+import { useRecipe } from "../config/styles.js";
+import { Icon } from "./Icon.js";
+import { CloseButton } from "./CloseButton.js";
+import { useDismissible } from "../utils/motion/presence.js";
+import { plainText } from "../utils/data/text.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/Tag.tsx
+/** 未声明的属性落到 span 上 */
+/** Tag 的样式：root、removable、remove、removing */
+var tagStyles = css.create({
+	root: { transition: `opacity ${t.durations.sm} ${t.easings.enter}, scale ${t.durations.sm} ${t.easings.enter}` },
+	removable: { paddingInlineEnd: "_xs" },
+	remove: {
+		width: "1.5em",
+		minHeight: "1.5em",
+		marginBlock: `calc(-1 * ${t.space.xs})`,
+		color: "inherit"
+	},
+	removing: {
+		opacity: 0,
+		scale: .8,
+		transition: `opacity ${t.durations.sm} ${t.easings.exit}, scale ${t.durations.sm} ${t.easings.exit}`
+	}
+});
+/** 标签（span）：外观同 Badge，可以带移除按钮 */
+var Tag = /*#__PURE__*/ _component((_props, _ctx) => {
+	const variant = readonlyProp(_props, "variant");
+	const tone = readonlyProp(_props, "tone");
+	const size = readonlyProp(_props, "size");
+	const radius = readonlyProp(_props, "radius");
+	const icon = readonlyProp(_props, "icon");
+	const onRemove = readonlyProp(_props, "onRemove");
+	const removeLabel = readonlyProp(_props, "removeLabel");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsRemove = readonlyProp(_props, "propsRemove");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const lang = useLang();
+	const appearance = useDefaults("Badge", () => ({
+		variant: variant.value,
+		tone: tone.value,
+		size: size.value,
+		radius: radius.value
+	}));
+	const recipe = useRecipe(badgeRecipe);
+	const dismissible = useDismissible(() => onRemove.value?.());
+	return () => {
+		const text = plainText(children.value);
+		const label = removeLabel.value ?? (text ? `${lang.remove} ${text}` : lang.remove);
+		return createVNode("span", mergeProps(mergeAttrs({
+			...badgeParts(appearance(), recipe).root,
+			sx: [
+				badgeParts(appearance(), recipe).root.sx,
+				tagStyles.root,
+				onRemove.value && tagStyles.removable,
+				css.select(() => dismissible.dismissing && tagStyles.removing, true)
+			]
+		}, rest, { ref: dismissible.ref }), { "data-state": dismissible.state }), [
+			icon.value && createVNode(Icon, mergePartProps({ icon: icon.value }, propsIcon.value), null),
+			children.value,
+			onRemove.value && createVNode(CloseButton, mergeProps$1({
+				sx: tagStyles.remove,
+				"aria-label": label,
+				radius: "full"
+			}, propsRemove.value, { onClick: dismissible.dismiss }), null)
+		]);
+	};
+}, {
+	name: "Tag",
+	props: [
+		"variant",
+		"tone",
+		"size",
+		"radius",
+		"icon",
+		"onRemove",
+		"removeLabel",
+		"propsIcon",
+		"propsRemove"
+	]
+});
+//#endregion
+export { Tag, tagStyles };
+
+//# sourceMappingURL=Tag.js.map

package/dist/base/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps","mergeProps"],"sources":["../../src/base/Tag.tsx"],"sourcesContent":["/**\n * 标签（span）：外观同 Badge，可以带移除按钮（筛选条件、已选项、输入的关键词）。\n *\n *   <Tag onRemove={() => remove(item)}>{item.name}</Tag>\n *\n * 移除时标签先淡出缩小（usePresence），离场结束才调用 onRemove。其余标签平移补位交给所在容器：\n *   const layout = useLayoutAnimation(() => list);\n *   <Tag onRemove={() => layout.change(() => remove(item))}>…</Tag>\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 { useDismissible } from '../utils/motion/presence';\nimport { mergeAttrs, mergePartProps, mergeProps, type PartProps } from '../utils/props';\nimport { plainText } from '../utils/data/text';\nimport { badgeParts, badgeRecipe, type BadgeOptions } from './badge-styles';\nimport { useRecipe } from '../config/styles';\nimport { CloseButton, type PresetIconButtonProps } from './CloseButton';\nimport { Icon, type IconData, type IconProps } from './Icon';\nimport { t } from '../config/theme/tokens';\n\n/** 未声明的属性落到 span 上 */\nexport interface TagProps extends PartProps<'span'>, BadgeOptions {\n  /** 文字前的图标 */\n  icon?: IconData;\n  /** 给了就显示移除按钮：点击后标签先淡出缩小，离场结束再调用；标签随后被移除时，焦点交给同组的下一个（没有就上一个）可聚焦元素；没被移除就重新显示 */\n  onRemove?: () => void;\n  /** 移除按钮的无障碍名称，默认“移除”加上标签文字（内容只有文字时） */\n  removeLabel?: string;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 移除按钮的部件属性 */\n  propsRemove?: Partial<PresetIconButtonProps>;\n  children?: VNodeChild;\n}\n\n/** Tag 的样式：root、removable、remove、removing */\nexport const tagStyles = css.create({\n  // 移除被拒绝（使用方没移除）时从离场状态过渡回来\n  root: {\n    transition: `opacity ${t.durations.sm} ${t.easings.enter}, scale ${t.durations.sm} ${t.easings.enter}`,\n  },\n  // 移除按钮紧贴右侧，比独立的图标按钮紧凑（标签之间留有间距，满足目标尺寸的间距例外）\n  removable: { paddingInlineEnd: '_xs' },\n  remove: {\n    width: '1.5em',\n    minHeight: '1.5em',\n    marginBlock: `calc(-1 * ${t.space.xs})`,\n    color: 'inherit',\n  },\n  removing: {\n    opacity: 0,\n    scale: 0.8,\n    transition: `opacity ${t.durations.sm} ${t.easings.exit}, scale ${t.durations.sm} ${t.easings.exit}`,\n  },\n});\n\n/** 标签（span）：外观同 Badge，可以带移除按钮 */\nexport const Tag = _component(\n  ({\n    variant,\n    tone,\n    size,\n    radius,\n    icon,\n    onRemove,\n    removeLabel,\n    propsIcon,\n    propsRemove,\n    children,\n    ...rest\n  }: TagProps) => {\n    const lang = useLang();\n    const appearance = useDefaults('Badge', () => ({ variant, tone, size, radius }));\n    const recipe = useRecipe(badgeRecipe);\n    // 离场结束才交给使用方移除；使用方没移除（如拒绝删除）时标签重新出现\n    const dismissible = useDismissible(() => onRemove?.());\n    return () => {\n      const text = plainText(children);\n      const label = removeLabel ?? (text ? `${lang.remove} ${text}` : lang.remove);\n      return (\n        <span\n          {...mergeAttrs<'span'>(\n            {\n              ...badgeParts(appearance(), recipe).root,\n              sx: [\n                badgeParts(appearance(), recipe).root.sx,\n                tagStyles.root,\n                onRemove && tagStyles.removable,\n                dismissible.dismissing && tagStyles.removing,\n              ],\n            },\n            rest,\n            { ref: dismissible.ref },\n          )}\n          data-state={dismissible.state}\n        >\n          {icon && <Icon {...mergePartProps<IconProps>({ icon }, propsIcon)} />}\n          {children}\n          {onRemove && (\n            <CloseButton\n              {...mergeProps<PresetIconButtonProps>(\n                { sx: tagStyles.remove, 'aria-label': label, radius: 'full' },\n                propsRemove,\n                { onClick: dismissible.dismiss },\n              )}\n            />\n          )}\n        </span>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;AAuCA,IAAa,YAAY,IAAI,OAAO;CAElC,MAAM,EACJ,YAAY,WAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,MAAK,UAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,QACjG;CAEA,WAAW,EAAE,kBAAkB,MAAM;CACrC,QAAQ;EACN,OAAO;EACP,WAAW;EACX,aAAa,aAAa,EAAE,MAAM,GAAE;EACpC,OAAO;CACT;CACA,UAAU;EACR,SAAS;EACT,OAAO;EACP,YAAY,WAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,KAAI,UAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CAChG;AACF,CAAC;;AAGD,IAAa,MAAM,0BACjB,QAAA,SAYgB;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MADX,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,aAAa,YAAY,gBAAgB;EAAE,SAAO,QAAA;EAAE,MAAI,KAAA;EAAE,MAAI,KAAA;EAAE,QAAM,OAAA;CAAC,EAAE;CAC/E,MAAM,SAAS,UAAU,WAAW;CAEpC,MAAM,cAAc,qBAAqB,SAAA,QAAW,CAAC;CACrD,aAAa;EACX,MAAM,OAAO,UAAS,SAAA,KAAS;EAC/B,MAAM,QAAQ,YAAA,UAAgB,OAAO,GAAG,KAAK,OAAM,GAAI,SAAS,KAAK;EACrE,OAAAC,YAAA,QAAAC,WAEQ,WACF;GACE,GAAG,WAAW,WAAW,GAAG,MAAM,CAAC,CAAC;GACpC,IAAI;IACF,WAAW,WAAW,GAAG,MAAM,CAAC,CAAC,KAAK;IACtC,UAAU;IACV,SAAA,SAAY,UAAU;IAAS,IAAA,aAC/B,YAAY,cAAc,UAAU,UAAQ,IAAA;GAAA;EAEhD,GACA,MACA,EAAE,KAAK,YAAY,IAAI,CACzB,GAAC,EAAA,cACW,YAAY,MAAK,CAAA,GAAA;GAE5B,KAAA,SAAAD,YAAA,MAAkB,eAA0B,EAAE,MAAI,KAAA,MAAC,GAAC,UAAA,KAAW,GAAC,IAAA;GAAI,SAAA;GAEpE,SAAA,SAAAA,YAAA,aAEOE,aACF;IAAE,IAAI,UAAU;IAAQ,cAAc;IAAO,QAAQ;GAAO,GAAC,YAAA,OAE7D,EAAE,SAAS,YAAY,QAAQ,CACjC,GAAC,IAAA;EAEJ,CAAA;CAGP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/base/Text.d.ts

@@ -0,0 +1,57 @@
+/**
+ * 正文文字：字号、字重、色调、对齐、截断。一个元素一个组件（COMPONENTS.md §1），由同一个工厂生成：
+ *   Text（span）、Paragraph（p）、Strong（strong）、Em（em）、Small（small）。
+ * 不写的属性都继承上下文；Paragraph、Strong、Small 各有自己的默认值。表单标签以后由 Label 组件负责。
+ *
+ *   <Text tone="muted" size="sm">更新于 3 分钟前</Text>
+ *   <Paragraph lineClamp={2}>很长的描述…</Paragraph>
+ *   <Text mono size="sm">PO-2026-0187</Text>         编号、件号：等宽字体
+ *   <Text numeric tone="danger">超时 3 天</Text>       金额、计数：等宽数字，上下对齐
+ */
+import { type TsxComponent } from '@zerodep-dev/vue-tsx-pro-tsx';
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import { type FontWeight, type TextAlign, type TextSize, type TextWrap, type Tone } from '../utils/style/typography';
+/** 文字组件可用的标签 */
+export type TextTag = 'span' | 'p' | 'strong' | 'em' | 'small';
+/** 文字的样式选项，五个文字组件共用 */
+export interface TextOptions {
+    /** 字号档位，对应主题的 fontSizes；不写时继承（Small 默认 xs） */
+    size?: TextSize;
+    /** 字重，对应主题的 fontWeights；不写时继承（Strong 默认 semibold） */
+    weight?: FontWeight;
+    /** 色调：muted 次要说明，其余为品牌色与提示色的文字色；不写时继承 */
+    tone?: Tone;
+    /** 水平对齐，不写时继承（只在块级元素上有效，如 Paragraph） */
+    align?: TextAlign;
+    /** 单行省略（在块级元素或 flex 子项上生效） */
+    truncate?: boolean;
+    /** 最多显示几行，超出省略 */
+    lineClamp?: number;
+    /** 换行方式：pretty 避免最后一行只剩一个字（Paragraph 默认 pretty） */
+    wrap?: TextWrap;
+    /** 数字等宽（tabular-nums）：金额、计数、日期，上下对齐、变化时不跳动 */
+    numeric?: boolean;
+    /** 等宽字体：编号、件号、代码片段 */
+    mono?: boolean;
+    children?: VNodeChild;
+}
+/** 未声明的属性落到对应元素上：Text 为 span，Paragraph 为 p，以此类推 */
+export type TextProps<Tag extends TextTag = 'span'> = PartProps<Tag> & TextOptions;
+/** Text 系列 的样式：paragraph */
+export declare const textComponentStyles: Readonly<{
+    paragraph: css.CompiledStyles;
+}>;
+/** 生成文字组件：标签、组件名与默认的字号、字重、换行（Text、Paragraph、Strong、Em、Small 由它生成） */
+export declare function createText<Tag extends TextTag>(tag: Tag, name: string, defaults?: Pick<TextOptions, 'size' | 'weight' | 'wrap'>): TsxComponent<TextProps<Tag>>;
+/** 行内文字（span）：不加任何默认样式，全部继承上下文 */
+export declare const Text: TsxComponent<TextProps<"span">>;
+/** 段落（p）：去掉浏览器默认外边距（间距交给布局），换行默认 pretty */
+export declare const Paragraph: TsxComponent<TextProps<"p">>;
+/** 重要的内容（strong）：读屏可能加重语气；默认字重 semibold */
+export declare const Strong: TsxComponent<TextProps<"strong">>;
+/** 语气上的强调（em）：浏览器默认斜体 */
+export declare const Em: TsxComponent<TextProps<"em">>;
+/** 附注、版权、细则（small）：默认字号 xs */
+export declare const Small: TsxComponent<TextProps<"small">>;

package/dist/base/Text.js

@@ -0,0 +1,74 @@
+import { mergeAttrs } from "../utils/props.js";
+import { fontSizeStyles, fontWeightStyles, lineClampStyles, textAlignStyles, textStyles, textWrapStyles, toneStyles } from "../utils/style/typography.js";
+import { createVNode, isVNode } from "vue";
+import { _component, childrenProp, forwardChildren, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/base/Text.tsx
+/** 文字组件可用的标签 */
+/** 文字的样式选项，五个文字组件共用 */
+/** 未声明的属性落到对应元素上：Text 为 span，Paragraph 为 p，以此类推 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** Text 系列 的样式：paragraph */
+var textComponentStyles = css.create({ paragraph: { margin: 0 } });
+/** 生成文字组件：标签、组件名与默认的字号、字重、换行（Text、Paragraph、Strong、Em、Small 由它生成） */
+function createText(tag, name, defaults = {}) {
+	return /*#__PURE__*/ _component((_props, _ctx) => {
+		const size = readonlyProp(_props, "size", () => defaults.size);
+		const weight = readonlyProp(_props, "weight", () => defaults.weight);
+		const tone = readonlyProp(_props, "tone");
+		const align = readonlyProp(_props, "align");
+		const truncate = readonlyProp(_props, "truncate", false);
+		const lineClamp = readonlyProp(_props, "lineClamp");
+		const wrap = readonlyProp(_props, "wrap", () => defaults.wrap);
+		const numeric = readonlyProp(_props, "numeric", false);
+		const mono = readonlyProp(_props, "mono", false);
+		childrenProp(_props);
+		const rest = restProps(_props, _ctx, false);
+		return () => {
+			let _slot;
+			const Tag = tag;
+			const sx = [
+				tag === "p" && textComponentStyles.paragraph,
+				size.value && fontSizeStyles[size.value],
+				weight.value && fontWeightStyles[weight.value],
+				tone.value && toneStyles[tone.value],
+				align.value && textAlignStyles[align.value],
+				wrap.value && textWrapStyles[wrap.value],
+				truncate.value && textStyles.truncate,
+				lineClamp.value != null && [textStyles.clamp, lineClampStyles.lines(lineClamp.value)],
+				numeric.value && textStyles.numeric,
+				mono.value && textStyles.mono
+			];
+			return createVNode(Tag, mergeAttrs({ sx }, rest), _isSlot(_slot = forwardChildren(_props)) ? _slot : { default: () => [_slot] });
+		};
+	}, {
+		props: [
+			"size",
+			"weight",
+			"tone",
+			"align",
+			"truncate",
+			"lineClamp",
+			"wrap",
+			"numeric",
+			"mono"
+		],
+		name
+	});
+}
+/** 行内文字（span）：不加任何默认样式，全部继承上下文 */
+var Text$1 = createText("span", "Text");
+/** 段落（p）：去掉浏览器默认外边距（间距交给布局），换行默认 pretty */
+var Paragraph = createText("p", "Paragraph", { wrap: "pretty" });
+/** 重要的内容（strong）：读屏可能加重语气；默认字重 semibold */
+var Strong = createText("strong", "Strong", { weight: "semibold" });
+/** 语气上的强调（em）：浏览器默认斜体 */
+var Em = createText("em", "Em");
+/** 附注、版权、细则（small）：默认字号 xs */
+var Small = createText("small", "Small", { size: "xs" });
+//#endregion
+export { Em, Paragraph, Small, Strong, Text$1 as Text, createText, textComponentStyles };
+
+//# sourceMappingURL=Text.js.map

package/dist/base/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_createVNode","_vtp_forwardChildren","Text"],"sources":["../../src/base/Text.tsx"],"sourcesContent":["/**\n * 正文文字：字号、字重、色调、对齐、截断。一个元素一个组件（COMPONENTS.md §1），由同一个工厂生成：\n *   Text（span）、Paragraph（p）、Strong（strong）、Em（em）、Small（small）。\n * 不写的属性都继承上下文；Paragraph、Strong、Small 各有自己的默认值。表单标签以后由 Label 组件负责。\n *\n *   <Text tone=\"muted\" size=\"sm\">更新于 3 分钟前</Text>\n *   <Paragraph lineClamp={2}>很长的描述…</Paragraph>\n *   <Text mono size=\"sm\">PO-2026-0187</Text>         编号、件号：等宽字体\n *   <Text numeric tone=\"danger\">超时 3 天</Text>       金额、计数：等宽数字，上下对齐\n */\nimport { _component, type TsxComponent } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport {\n  fontSizeStyles,\n  fontWeightStyles,\n  lineClampStyles,\n  textAlignStyles,\n  textStyles,\n  textWrapStyles,\n  toneStyles,\n  type FontWeight,\n  type TextAlign,\n  type TextSize,\n  type TextWrap,\n  type Tone,\n} from '../utils/style/typography';\n\n/** 文字组件可用的标签 */\nexport type TextTag = 'span' | 'p' | 'strong' | 'em' | 'small';\n\n/** 文字的样式选项，五个文字组件共用 */\nexport interface TextOptions {\n  /** 字号档位，对应主题的 fontSizes；不写时继承（Small 默认 xs） */\n  size?: TextSize;\n  /** 字重，对应主题的 fontWeights；不写时继承（Strong 默认 semibold） */\n  weight?: FontWeight;\n  /** 色调：muted 次要说明，其余为品牌色与提示色的文字色；不写时继承 */\n  tone?: Tone;\n  /** 水平对齐，不写时继承（只在块级元素上有效，如 Paragraph） */\n  align?: TextAlign;\n  /** 单行省略（在块级元素或 flex 子项上生效） */\n  truncate?: boolean;\n  /** 最多显示几行，超出省略 */\n  lineClamp?: number;\n  /** 换行方式：pretty 避免最后一行只剩一个字（Paragraph 默认 pretty） */\n  wrap?: TextWrap;\n  /** 数字等宽（tabular-nums）：金额、计数、日期，上下对齐、变化时不跳动 */\n  numeric?: boolean;\n  /** 等宽字体：编号、件号、代码片段 */\n  mono?: boolean;\n  children?: VNodeChild;\n}\n\n/** 未声明的属性落到对应元素上：Text 为 span，Paragraph 为 p，以此类推 */\nexport type TextProps<Tag extends TextTag = 'span'> = PartProps<Tag> & TextOptions;\n\n/** Text 系列 的样式：paragraph */\nexport const textComponentStyles = css.create({\n  // 段落之间的距离交给布局（Flex 的 gap），与标题一致\n  paragraph: { margin: 0 },\n});\n\n/** 生成文字组件：标签、组件名与默认的字号、字重、换行（Text、Paragraph、Strong、Em、Small 由它生成） */\nexport function createText<Tag extends TextTag>(\n  tag: Tag,\n  name: string,\n  defaults: Pick<TextOptions, 'size' | 'weight' | 'wrap'> = {},\n): TsxComponent<TextProps<Tag>> {\n  // 实现按五种标签共有的属性写，对外每个组件只接受自己元素的属性\n  return _component(\n    ({\n      size = defaults.size,\n      weight = defaults.weight,\n      tone,\n      align,\n      truncate = false,\n      lineClamp,\n      wrap = defaults.wrap,\n      numeric = false,\n      mono = false,\n      children,\n      ...rest\n    }: TextProps<TextTag>) =>\n      () => {\n        const Tag = tag as TextTag;\n        const sx = [\n          tag === 'p' && textComponentStyles.paragraph,\n          size && fontSizeStyles[size],\n          weight && fontWeightStyles[weight],\n          tone && toneStyles[tone],\n          align && textAlignStyles[align],\n          wrap && textWrapStyles[wrap],\n          truncate && textStyles.truncate,\n          lineClamp != null && [textStyles.clamp, lineClampStyles.lines(lineClamp)],\n          numeric && textStyles.numeric,\n          mono && textStyles.mono,\n        ];\n        return <Tag {...mergeAttrs<TextTag>({ sx }, rest)}>{children}</Tag>;\n      },\n    { name },\n  ) as unknown as TsxComponent<TextProps<Tag>>;\n}\n\n/** 行内文字（span）：不加任何默认样式，全部继承上下文 */\nexport const Text = createText('span', 'Text');\n/** 段落（p）：去掉浏览器默认外边距（间距交给布局），换行默认 pretty */\nexport const Paragraph = createText('p', 'Paragraph', { wrap: 'pretty' });\n/** 重要的内容（strong）：读屏可能加重语气；默认字重 semibold */\nexport const Strong = createText('strong', 'Strong', { weight: 'semibold' });\n/** 语气上的强调（em）：浏览器默认斜体 */\nexport const Em = createText('em', 'Em');\n/** 附注、版权、细则（small）：默认字号 xs */\nexport const Small = createText('small', 'Small', { size: 'xs' });\n"],"mappings":";;;;;;;;;AAuDA,SAAA,QAAA,GAAA;CAAA,OAAA,OAAA,MAAA,cAAA,OAAA,UAAA,SAAA,KAAA,CAAA,MAAA,qBAAA,CAAAA,QAAA,CAAA;AAAA;;AAIA,IAAa,sBAAsB,IAAI,OAAO,EAE5C,WAAW,EAAE,QAAQ,EAAE,EACzB,CAAC;;AAGD,SAAgB,WACd,KACA,MACA,WAA0D,CAAC,GAC7B;CAE9B,OAAO,0BACL,QAAA,SAAA;EAAA,MAAA,OAAAC,aAAA,QAAA,cACS,SAAS,IAAI;EAAA,MAAA,SAAAA,aAAA,QAAA,gBACX,SAAS,MAAM;EAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;EAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;EAAA,MAAA,WAAAA,aAAA,QAAA,YAGb,KAAK;EAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;EAAA,MAAA,OAAAA,aAAA,QAAA,cAET,SAAS,IAAI;EAAA,MAAA,UAAAA,aAAA,QAAA,WACV,KAAK;EAAA,MAAA,OAAAA,aAAA,QAAA,QACR,KAAK;EAAA,aAAA,MAAA;EAAA,MAET,OAAIC,UAAA,QAAA,MAAA,KAAA;EAAA,aAED;GAAA,IAAA;GACJ,MAAM,MAAM;GACZ,MAAM,KAAK;IACT,QAAQ,OAAO,oBAAoB;IACnC,KAAA,SAAQ,eAAc,KAAA;IACtB,OAAA,SAAU,iBAAgB,OAAA;IAC1B,KAAA,SAAQ,WAAU,KAAA;IAClB,MAAA,SAAS,gBAAe,MAAA;IACxB,KAAA,SAAQ,eAAc,KAAA;IACtB,SAAA,SAAY,WAAW;IACvB,UAAA,SAAa,QAAQ,CAAC,WAAW,OAAO,gBAAgB,MAAK,UAAA,KAAU,CAAC;IACxE,QAAA,SAAW,WAAW;IACtB,KAAA,SAAQ,WAAW;GAAI;GAEzB,OAAAC,YAAA,KAAgB,WAAoB,EAAE,GAAG,GAAG,IAAI,GAAC,QAAA,QAA1CC,gBAAA,MAA2D,CAAC,IAAA,QAAA,EAAA,eAAA,CAAA,KAAA,EAAA,CAAA;EACrE;CAAC,GACH;EAAA,OAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;EAAA;EAAE;CAAK,CACT;AACF;;AAGA,IAAaC,SAAO,WAAW,QAAQ,MAAM;;AAE7C,IAAa,YAAY,WAAW,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;;AAExE,IAAa,SAAS,WAAW,UAAU,UAAU,EAAE,QAAQ,WAAW,CAAC;;AAE3E,IAAa,KAAK,WAAW,MAAM,IAAI;;AAEvC,IAAa,QAAQ,WAAW,SAAS,SAAS,EAAE,MAAM,KAAK,CAAC"}

package/dist/base/VisuallyHidden.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';
+/** 未声明的属性落到 span 上 */
+export interface VisuallyHiddenProps extends PartProps<'span'> {
+    children?: VNodeChild;
+}
+/** VisuallyHidden 的样式：hidden */
+export declare const visuallyHiddenStyles: Readonly<{
+    hidden: css.CompiledStyles;
+}>;
+/** 只给读屏器看的文字（span）：视觉上不占位 */
+export declare const VisuallyHidden: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<VisuallyHiddenProps>;

package/dist/base/VisuallyHidden.js

@@ -0,0 +1,28 @@
+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/VisuallyHidden.tsx
+/** 未声明的属性落到 span 上 */
+/** VisuallyHidden 的样式：hidden */
+var visuallyHiddenStyles = css.create({ hidden: {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	padding: 0,
+	margin: -1,
+	overflow: "hidden",
+	clipPath: "inset(50%)",
+	whiteSpace: "nowrap",
+	borderWidth: 0
+} });
+/** 只给读屏器看的文字（span）：视觉上不占位 */
+var VisuallyHidden = /*#__PURE__*/ _component((_props, _ctx) => {
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	return () => createVNode("span", mergeAttrs({ sx: visuallyHiddenStyles.hidden }, rest), [children.value]);
+}, { name: "VisuallyHidden" });
+//#endregion
+export { VisuallyHidden, visuallyHiddenStyles };
+
+//# sourceMappingURL=VisuallyHidden.js.map

package/dist/base/VisuallyHidden.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.js","names":["_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/VisuallyHidden.tsx"],"sourcesContent":["/**\n * 只给读屏器看的内容：视觉上不占位，读屏照常朗读。\n * 用于图标按钮的名称、“在新窗口打开”这类补充说明。渲染为 span（行内文字，与 Radix 一致）。\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/** 未声明的属性落到 span 上 */\nexport interface VisuallyHiddenProps extends PartProps<'span'> {\n  children?: VNodeChild;\n}\n\n/** VisuallyHidden 的样式：hidden */\nexport const visuallyHiddenStyles = css.create({\n  // 不用 display: none / visibility: hidden：那样读屏也读不到\n  hidden: {\n    position: 'absolute',\n    width: 1,\n    height: 1,\n    padding: 0,\n    margin: -1,\n    overflow: 'hidden',\n    clipPath: 'inset(50%)',\n    whiteSpace: 'nowrap',\n    borderWidth: 0,\n  },\n});\n\n/** 只给读屏器看的文字（span）：视觉上不占位 */\nexport const VisuallyHidden = _component(({ children, ...rest }: VisuallyHiddenProps) => () => (\n  <span {...mergeAttrs<'span'>({ sx: visuallyHiddenStyles.hidden }, rest)}>{children}</span>\n));\n"],"mappings":";;;;;;;AAeA,IAAa,uBAAuB,IAAI,OAAO,EAE7C,QAAQ;CACN,UAAU;CACV,OAAO;CACP,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,UAAU;CACV,UAAU;CACV,YAAY;CACZ,aAAa;AACf,EACF,CAAC;;AAGD,IAAa,iBAAiB,0BAAW,QAAA,SAAA;CAAA,MAAA,WAAAA,aAAA,MAAA;CAAA,MAAgB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAA4BC,YAAA,QAC7E,WAAmB,EAAE,IAAI,qBAAqB,OAAO,GAAG,IAAI,GAAC,CAAA,SAAA,KAAA,CAAA;AACxE,GAAA,EAAA,MAAA,iBAAA,CAAA"}

package/dist/base/badge-styles.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Badge 与 Tag 共用的外观（配方）：样式 × 色调逐项写主题 token（组合档位）；字号、圆角另外叠加。
+ */
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { PartLayer } from '../config/styles';
+import { type TextSize } from '../utils/style/typography';
+import { type Radius } from '../utils/style/styles';
+import type { StatusTone, StatusVariant } from '../utils/style/tone-styles';
+/** Badge、Tag 的外观选项 */
+export interface BadgeOptions {
+    /** 样式，默认 soft */
+    variant?: StatusVariant;
+    /** 色调，默认 neutral */
+    tone?: StatusTone;
+    /** 字号档位，默认 xs */
+    size?: TextSize;
+    /** 圆角，默认 sm；表格、密集列表里的状态常用 none，与表格的直线对齐 */
+    radius?: Radius;
+}
+/** 标记的配方：部件 root（外层）、dot（圆点） */
+export declare const badgeRecipe: css.Recipe<"dot" | "root", {
+    readonly variant: {
+        solid: {};
+        soft: {};
+        surface: {};
+        outline: {};
+    };
+    readonly tone: {
+        neutral: {};
+        accent: {};
+        info: {};
+        success: {};
+        warning: {};
+        danger: {};
+    };
+}>;
+/** 标记的部件（createUi / Provider 的 styles.Badge 按它定制） */
+export type BadgePart = (typeof badgeRecipe.parts)[number];
+/**
+ * 标记的各部件：配方（样式 × 色调）+ 字号 + 圆角，带部件标记。recipe 是 useRecipe(badgeRecipe) 的结果（带上主题定制），
+ * 结果直接作部件属性的默认层：`mergeAttrs<'span'>(styles.root, rest)`
+ */
+export declare function badgeParts({ variant, tone, size, radius }: BadgeOptions, recipe: (selection: {
+    variant: StatusVariant;
+    tone: StatusTone;
+}) => Readonly<Record<BadgePart, PartLayer>>): {
+    readonly root: {
+        readonly sx: css.SxStyles;
+        readonly 'data-scope': string;
+        readonly 'data-part': string;
+    };
+    readonly dot: Readonly<{
+        sx: readonly css.CompiledStyles[];
+        'data-scope': string;
+        'data-part': string;
+    }>;
+};