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

package/dist/base/LinkButton.js

@@ -0,0 +1,109 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs } from "../utils/props.js";
+import { useDelayedLoading } from "../utils/motion/delayed-loading.js";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+import { buttonContent, buttonPart, buttonSx, useButtonAppearance, useButtonBehavior } from "./button-core.js";
+import { externalLinkAttrs, useRouterLink } from "../utils/dom/link.js";
+import { createVNode } from "vue";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { ArrowUpRight } from "@lucide/icons";
+//#region src/base/LinkButton.tsx
+/**
+* 外观是按钮的链接（a）：跳转到别的页面时用它，而不是 Button + 点击里跳转（链接能右键、新标签页打开、读屏念“链接”）。
+* 外观与内容排布和 Button 共用（button-core.ts）；站内链接经 createUi 的 router 不刷新页面地跳转。
+*
+*   <LinkButton href="/orders/new" icon={Plus}>新建订单</LinkButton>
+*   <LinkButton href="https://example.com" external variant="outline">文档</LinkButton>
+*/
+/** 地址、不可用与忙碌由组件管理 */
+/** 未声明的属性落到 a 上 */
+/** 外观是按钮的链接（a）：样式、图标、加载中、波纹与 Button 一致 */
+var LinkButton = /*#__PURE__*/ _component((_props, _ctx) => {
+	const href = readonlyProp(_props, "href");
+	const external = readonlyProp(_props, "external", false);
+	const disabled = readonlyProp(_props, "disabled", false);
+	const variant = readonlyProp(_props, "variant");
+	const tone = readonlyProp(_props, "tone");
+	const size = readonlyProp(_props, "size");
+	const radius = readonlyProp(_props, "radius");
+	const loading = readonlyProp(_props, "loading", false);
+	const ripple = readonlyProp(_props, "ripple");
+	const icon = readonlyProp(_props, "icon");
+	const iconEnd = readonlyProp(_props, "iconEnd");
+	const fullWidth = readonlyProp(_props, "fullWidth", false);
+	const propsContent = readonlyProp(_props, "propsContent");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsIconEnd = readonlyProp(_props, "propsIconEnd");
+	const propsSpinner = readonlyProp(_props, "propsSpinner");
+	const onClick = readonlyProp(_props, "onClick");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const lang = useLang();
+	const router = useRouterLink();
+	const appearance = useButtonAppearance(() => ({
+		variant: variant.value,
+		tone: tone.value,
+		size: size.value,
+		radius: radius.value
+	}), "solid");
+	const spinner = useDelayedLoading(() => loading.value);
+	const behavior = useButtonBehavior(() => ({
+		disabled: disabled.value,
+		loading: loading.value,
+		focusableWhenDisabled: true,
+		ripple: ripple.value
+	}), () => (event) => {
+		onClick.value?.(event);
+		router.onClick(event, href.value);
+	});
+	return () => createVNode("a", mergeAttrs({
+		...buttonPart,
+		sx: buttonSx(appearance(), {
+			disabled: disabled.value,
+			fullWidth: fullWidth.value
+		}),
+		...external.value && externalLinkAttrs
+	}, rest, {
+		...behavior(),
+		href: disabled.value ? void 0 : router.href(href.value),
+		role: disabled.value ? "link" : void 0
+	}), [buttonContent({
+		icon: icon.value,
+		iconEnd: iconEnd.value ?? (external.value ? ArrowUpRight : void 0),
+		propsContent: propsContent.value,
+		propsIcon: propsIcon.value,
+		propsIconEnd: propsIconEnd.value,
+		children: [children.value, external.value && createVNode(VisuallyHidden, { "key": "__site0" }, {
+			default: () => [lang.linkNewWindow],
+			$stable: true
+		})]
+	}, {
+		loading: spinner.value,
+		propsSpinner: propsSpinner.value
+	})]);
+}, {
+	name: "LinkButton",
+	props: [
+		"href",
+		"external",
+		"disabled",
+		"variant",
+		"tone",
+		"size",
+		"radius",
+		"loading",
+		"ripple",
+		"icon",
+		"iconEnd",
+		"fullWidth",
+		"propsContent",
+		"propsIcon",
+		"propsIconEnd",
+		"propsSpinner",
+		"onClick"
+	]
+});
+//#endregion
+export { LinkButton };
+
+//# sourceMappingURL=LinkButton.js.map

package/dist/base/LinkButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/LinkButton.tsx"],"sourcesContent":["/**\n * 外观是按钮的链接（a）：跳转到别的页面时用它，而不是 Button + 点击里跳转（链接能右键、新标签页打开、读屏念“链接”）。\n * 外观与内容排布和 Button 共用（button-core.ts）；站内链接经 createUi 的 router 不刷新页面地跳转。\n *\n *   <LinkButton href=\"/orders/new\" icon={Plus}>新建订单</LinkButton>\n *   <LinkButton href=\"https://example.com\" external variant=\"outline\">文档</LinkButton>\n */\nimport { ArrowUpRight } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { useLang } from '../config/context';\nimport { externalLinkAttrs, useRouterLink } from '../utils/dom/link';\nimport { useDelayedLoading } from '../utils/motion/delayed-loading';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport {\n  buttonContent,\n  buttonPart,\n  buttonSx,\n  useButtonAppearance,\n  useButtonBehavior,\n  type ButtonContentOptions,\n  type ButtonOptions,\n} from './button-core';\nimport { VisuallyHidden } from './VisuallyHidden';\n\n/** 地址、不可用与忙碌由组件管理 */\nexport type LinkButtonManaged = 'href' | 'aria-disabled' | 'aria-busy' | 'role';\n\n/** 未声明的属性落到 a 上 */\nexport interface LinkButtonProps\n  extends PartProps<'a', LinkButtonManaged>, ButtonOptions, ButtonContentOptions {\n  /** 链接地址 */\n  href: string;\n  /** 外部链接：新窗口打开，加 rel=\"noopener noreferrer\"、外链图标（没给 iconEnd 时）与读屏提示 */\n  external?: boolean;\n  /**\n   * 不可用：去掉 href（不能点、不能用键盘打开），保留 role=\"link\" 与 aria-disabled，读屏仍知道这里有个链接。\n   * 不可用的链接不能聚焦；需要说明原因时把说明写在旁边\n   */\n  disabled?: boolean;\n}\n\n/** 外观是按钮的链接（a）：样式、图标、加载中、波纹与 Button 一致 */\nexport const LinkButton = _component(\n  ({\n    href,\n    external = false,\n    disabled = false,\n    variant,\n    tone,\n    size,\n    radius,\n    loading = false,\n    ripple,\n    icon,\n    iconEnd,\n    fullWidth = false,\n    propsContent,\n    propsIcon,\n    propsIconEnd,\n    propsSpinner,\n    onClick,\n    children,\n    ...rest\n  }: LinkButtonProps) => {\n    const lang = useLang();\n    const router = useRouterLink();\n    const appearance = useButtonAppearance(() => ({ variant, tone, size, radius }), 'solid');\n    // 链接没有原生 disabled：不可用时去掉 href、用 aria-disabled。使用方的 onClick 先于路由跳转执行，可以 preventDefault 拦下\n    // 很快完成的加载不换成加载指示；点击拦截、aria-busy 仍按 loading 立即生效\n    const spinner = useDelayedLoading(() => loading);\n    const behavior = useButtonBehavior(\n      () => ({ disabled, loading, focusableWhenDisabled: true, ripple }),\n      () => (event) => {\n        // 使用方的 onClick 按元素类型声明，这里的事件就是它\n        (onClick as ((event: MouseEvent) => void) | undefined)?.(event);\n        router.onClick(event, href);\n      },\n    );\n\n    return () => (\n      <a\n        {...mergeAttrs<'a'>(\n          {\n            ...buttonPart,\n            sx: buttonSx(appearance(), { disabled, fullWidth }),\n            ...(external && externalLinkAttrs),\n          },\n          rest,\n          {\n            ...behavior(),\n            href: disabled ? undefined : router.href(href),\n            role: disabled ? 'link' : undefined,\n          },\n        )}\n      >\n        {buttonContent(\n          {\n            icon,\n            iconEnd: iconEnd ?? (external ? ArrowUpRight : undefined),\n            propsContent,\n            propsIcon,\n            propsIconEnd,\n            children: [children, external && <VisuallyHidden>{lang.linkNewWindow}</VisuallyHidden>],\n          },\n          { loading: spinner.value, propsSpinner },\n        )}\n      </a>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0CA,IAAa,aAAa,0BACxB,QAAA,SAoBuB;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,YAlBV,KAAK;CAAA,MAAA,WAAAA,aAAA,QAAA,YACL,KAAK;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,UAAAA,aAAA,QAAA,WAKN,KAAK;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,aAIH,KAAK;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAOd,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,SAAS,cAAc;CAC7B,MAAM,aAAa,2BAA2B;EAAE,SAAO,QAAA;EAAE,MAAI,KAAA;EAAE,MAAI,KAAA;EAAE,QAAM,OAAA;CAAC,IAAI,OAAO;CAGvF,MAAM,UAAU,wBAAkB,QAAA,KAAa;CAC/C,MAAM,WAAW,yBACR;EAAE,UAAQ,SAAA;EAAE,SAAO,QAAA;EAAE,uBAAuB;EAAM,QAAM,OAAA;CAAC,WACzD,UAAU;EAEf,QAAA,QAAyD,KAAK;EAC9D,OAAO,QAAQ,OAAK,KAAA,KAAM;CAC5B,CACF;CAEA,aAAOC,YAAA,KAEC,WACF;EACE,GAAG;EACH,IAAI,SAAS,WAAW,GAAG;GAAE,UAAQ,SAAA;GAAE,WAAS,UAAA;EAAC,CAAC;EAClD,GAAI,SAAA,SAAY;CAClB,GACA,MACA;EACE,GAAG,SAAS;EACZ,MAAM,SAAA,QAAW,KAAA,IAAY,OAAO,KAAI,KAAA,KAAK;EAC7C,MAAM,SAAA,QAAW,SAAS,KAAA;CAC5B,CACF,GAAC,CAEA,cACC;EACE,MAAI,KAAA;EACJ,SAAS,QAAA,UAAY,SAAA,QAAW,eAAe,KAAA;EAC/C,cAAY,aAAA;EACZ,WAAS,UAAA;EACT,cAAY,aAAA;EACZ,UAAU,CAAA,SAAA,OAAW,SAAA,SAAAA,YAAA,gBAAA,EAAA,OAAA,UAAA,GAAA;GAAA,eAAA,CAA6B,KAAK,aAAa;GAAA,SAAA;EAAA,CAAA,CAAkB;CACxF,GACA;EAAE,SAAS,QAAQ;EAAO,cAAY,aAAA;CAAC,CACzC,CAAC,CAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/base/List.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 Space } from '../utils/style/styles';
+import { type TextSize } from '../utils/style/typography';
+import { type IconData, type IconProps } from './Icon';
+/** 正文列表的样式：缩进与项目之间的间距；嵌套的列表紧贴上一项；有图标时不要圆点、不缩进 */
+export declare const listStylesProse: Readonly<{
+    bullet: css.CompiledStyles;
+    content: css.CompiledStyles;
+    icon: css.CompiledStyles;
+    iconItem: css.CompiledStyles;
+    iconic: css.CompiledStyles;
+    item: css.CompiledStyles;
+    number: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** 列表共有的外观 */
+interface ListOptions {
+    /** 字号档位；不写时继承上下文字号 */
+    size?: TextSize;
+    /** 项与项之间的间距档位（与 Flex、Grid 的 gap 同一套），默认 xs；每项是一段话时用 md */
+    gap?: Space;
+    children?: VNodeChild;
+}
+/** List 交给 ListItem 的：默认的图标与它的部件属性 */
+export interface ListMarkerState {
+    /** 各项默认的图标；没有时画圆点 */
+    readonly icon?: IconData;
+    /** 各项图标默认的部件属性 */
+    readonly propsIcon?: Partial<IconProps>;
+}
+/** List 的上下文：ListItem 据此画图标；OrderedList 里是空的 */
+export declare const ListContext: import("@zerodep-dev/vue-tsx-pro-tsx").Context<ListMarkerState>;
+/** 未声明的属性落到 ul 上 */
+export interface ListProps extends PartProps<'ul'>, ListOptions {
+    /** 用图标代替圆点（功能清单的对勾）；ListItem 的 icon 可以逐项覆盖 */
+    icon?: IconData;
+    /** 各项图标的部件属性（tone 改颜色）；ListItem 的 propsIcon 会合并进来 */
+    propsIcon?: Partial<IconProps>;
+}
+/** 未声明的属性落到 ol 上 */
+export interface OrderedListProps extends PartProps<'ol'>, ListOptions {
+}
+/** 未声明的属性落到 li 上 */
+export interface ListItemProps extends PartProps<'li'> {
+    /** 这一项的图标，覆盖 List 的 icon（在有序列表里不用） */
+    icon?: IconData;
+    /** 图标的部件属性，与 List 的 propsIcon 合并 */
+    propsIcon?: Partial<IconProps>;
+    /** 带图标时包着文字的内容层（div）的部件属性 */
+    propsContent?: PartProps<'div'>;
+    children?: VNodeChild;
+}
+/** 无序列表（ul）：圆点，或 icon 代替圆点 */
+export declare const List: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ListProps>;
+/** 有序列表（ol）：编号；start、reversed 等原生属性照常可用 */
+export declare const OrderedList: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<OrderedListProps>;
+/** 列表项（li）：在带图标的 List 里，图标在前、文字在后 */
+export declare const ListItem: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ListItemProps>;
+export {};

package/dist/base/List.js

@@ -0,0 +1,116 @@
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { fontSizeStyles } from "../utils/style/typography.js";
+import { gapStyles } from "../utils/style/styles.js";
+import { Icon } from "./Icon.js";
+import { createVNode } from "vue";
+import { _component, childrenProp, createContext, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/base/List.tsx
+/** 正文列表的样式：缩进与项目之间的间距；嵌套的列表紧贴上一项；有图标时不要圆点、不缩进 */
+var listStylesProse = css.create({
+	root: {
+		display: "grid",
+		margin: 0,
+		paddingInlineStart: "1.5em"
+	},
+	bullet: { listStyleType: "disc" },
+	number: { listStyleType: "decimal" },
+	iconic: {
+		listStyleType: "none",
+		paddingInlineStart: 0
+	},
+	item: { paddingInlineStart: "_xs" },
+	iconItem: {
+		display: "flex",
+		alignItems: "baseline",
+		gap: "_sm",
+		paddingInlineStart: 0
+	},
+	icon: {
+		flexShrink: 0,
+		alignSelf: "flex-start",
+		marginBlockStart: "0.2em"
+	},
+	content: { minWidth: 0 }
+});
+/** 列表共有的外观 */
+/** List 交给 ListItem 的：默认的图标与它的部件属性 */
+/** List 的上下文：ListItem 据此画图标；OrderedList 里是空的 */
+var ListContext = createContext("List");
+/** 未声明的属性落到 ul 上 */
+/** 未声明的属性落到 ol 上 */
+/** 未声明的属性落到 li 上 */
+var listSx = (gap, size) => [
+	listStylesProse.root,
+	gapStyles[gap],
+	size && fontSizeStyles[size]
+];
+/** 无序列表（ul）：圆点，或 icon 代替圆点 */
+var List = /*#__PURE__*/ _component((_props, _ctx) => {
+	const icon = readonlyProp(_props, "icon");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const size = readonlyProp(_props, "size");
+	const gap = readonlyProp(_props, "gap", "xs");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	ListContext.provide({
+		get icon() {
+			return icon.value;
+		},
+		get propsIcon() {
+			return propsIcon.value;
+		}
+	});
+	return () => createVNode("ul", mergeAttrs({
+		sx: [...listSx(gap.value, size.value), icon.value ? listStylesProse.iconic : listStylesProse.bullet],
+		role: icon.value ? "list" : void 0
+	}, rest), [children.value]);
+}, {
+	name: "List",
+	props: [
+		"icon",
+		"propsIcon",
+		"size",
+		"gap"
+	]
+});
+/** 有序列表（ol）：编号；start、reversed 等原生属性照常可用 */
+var OrderedList = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const size = readonlyProp(_props2, "size");
+	const gap = readonlyProp(_props2, "gap", "xs");
+	const children = childrenProp(_props2);
+	const rest = restProps(_props2, _ctx2, false);
+	ListContext.provide({});
+	return () => createVNode("ol", mergeAttrs({ sx: [...listSx(gap.value, size.value), listStylesProse.number] }, rest), [children.value]);
+}, {
+	name: "OrderedList",
+	props: ["size", "gap"]
+});
+/** 列表项（li）：在带图标的 List 里，图标在前、文字在后 */
+var ListItem = /*#__PURE__*/ _component((_props3, _ctx3) => {
+	const icon = readonlyProp(_props3, "icon");
+	const propsIcon = readonlyProp(_props3, "propsIcon");
+	const propsContent = readonlyProp(_props3, "propsContent");
+	const children = childrenProp(_props3);
+	const rest = restProps(_props3, _ctx3, false);
+	const list = ListContext.inject({});
+	return () => {
+		const shown = icon.value ?? list.icon;
+		if (!shown) return createVNode("li", mergeAttrs({ sx: listStylesProse.item }, rest), [children.value]);
+		return createVNode("li", mergeAttrs({ sx: listStylesProse.iconItem }, rest), [createVNode(Icon, mergePartProps({
+			icon: shown,
+			sx: listStylesProse.icon
+		}, list.propsIcon, propsIcon.value), null), createVNode("div", mergeAttrs({ sx: listStylesProse.content }, propsContent.value), [children.value])]);
+	};
+}, {
+	name: "ListItem",
+	props: [
+		"icon",
+		"propsIcon",
+		"propsContent"
+	]
+});
+//#endregion
+export { List, ListContext, ListItem, OrderedList, listStylesProse };
+
+//# sourceMappingURL=List.js.map

package/dist/base/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/List.tsx"],"sourcesContent":["/**\n * 正文里的列表：List（ul，圆点或图标）、OrderedList（ol，编号）、ListItem（li）。\n * 界面结构上的列表（导航、分页、步骤）不要圆点，用布局组件 FlexList / FlexOrderedList。\n *\n *   <List>\n *     <ListItem>安装依赖</ListItem>\n *     <ListItem>配置 Vite 预设<OrderedList><ListItem>…</ListItem></OrderedList></ListItem>\n *   </List>\n *   <List icon={Check} propsIcon={{ tone: 'success' }}>        功能清单：图标代替圆点\n *     <ListItem>不限项目</ListItem>\n *     <ListItem icon={X} propsIcon={{ tone: 'muted' }}>单点登录</ListItem>   逐项换图标\n *   </List>\n *\n * 图标是装饰（aria-hidden），读屏照常念“列表，几项”。参考 Mantine List 的 icon、Chakra 的 ListIcon。\n */\nimport { createContext, _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, mergePartProps, type PartProps } from '../utils/props';\nimport { gapStyles, type Space } from '../utils/style/styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { Icon, type IconData, type IconProps } from './Icon';\n\n/** 正文列表的样式：缩进与项目之间的间距；嵌套的列表紧贴上一项；有图标时不要圆点、不缩进 */\nexport const listStylesProse = css.create({\n  root: {\n    display: 'grid',\n    margin: 0,\n    paddingInlineStart: '1.5em',\n  },\n  bullet: { listStyleType: 'disc' },\n  number: { listStyleType: 'decimal' },\n  // 图标代替圆点：图标在项里占一列，项的文字换行时对齐文字\n  iconic: { listStyleType: 'none', paddingInlineStart: 0 },\n  item: { paddingInlineStart: '_xs' },\n  iconItem: { display: 'flex', alignItems: 'baseline', gap: '_sm', paddingInlineStart: 0 },\n  // 图标与第一行文字对齐（基线对不齐图标，按行高居中）\n  icon: { flexShrink: 0, alignSelf: 'flex-start', marginBlockStart: '0.2em' },\n  content: { minWidth: 0 },\n});\n\n/** 列表共有的外观 */\ninterface ListOptions {\n  /** 字号档位；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 项与项之间的间距档位（与 Flex、Grid 的 gap 同一套），默认 xs；每项是一段话时用 md */\n  gap?: Space;\n  children?: VNodeChild;\n}\n\n/** List 交给 ListItem 的：默认的图标与它的部件属性 */\nexport interface ListMarkerState {\n  /** 各项默认的图标；没有时画圆点 */\n  readonly icon?: IconData;\n  /** 各项图标默认的部件属性 */\n  readonly propsIcon?: Partial<IconProps>;\n}\n\n/** List 的上下文：ListItem 据此画图标；OrderedList 里是空的 */\nexport const ListContext = createContext<ListMarkerState>('List');\n\n/** 未声明的属性落到 ul 上 */\nexport interface ListProps extends PartProps<'ul'>, ListOptions {\n  /** 用图标代替圆点（功能清单的对勾）；ListItem 的 icon 可以逐项覆盖 */\n  icon?: IconData;\n  /** 各项图标的部件属性（tone 改颜色）；ListItem 的 propsIcon 会合并进来 */\n  propsIcon?: Partial<IconProps>;\n}\n\n/** 未声明的属性落到 ol 上 */\nexport interface OrderedListProps extends PartProps<'ol'>, ListOptions {}\n\n/** 未声明的属性落到 li 上 */\nexport interface ListItemProps extends PartProps<'li'> {\n  /** 这一项的图标，覆盖 List 的 icon（在有序列表里不用） */\n  icon?: IconData;\n  /** 图标的部件属性，与 List 的 propsIcon 合并 */\n  propsIcon?: Partial<IconProps>;\n  /** 带图标时包着文字的内容层（div）的部件属性 */\n  propsContent?: PartProps<'div'>;\n  children?: VNodeChild;\n}\n\nconst listSx = (gap: Space, size: TextSize | undefined) => [\n  listStylesProse.root,\n  gapStyles[gap],\n  size && fontSizeStyles[size],\n];\n\n/** 无序列表（ul）：圆点，或 icon 代替圆点 */\nexport const List = _component(\n  ({ icon, propsIcon, size, gap = 'xs', children, ...rest }: ListProps) => {\n    ListContext.provide({\n      get icon() {\n        return icon;\n      },\n      get propsIcon() {\n        return propsIcon;\n      },\n    });\n    return () => (\n      <ul\n        {...mergeAttrs<'ul'>(\n          {\n            sx: [...listSx(gap, size), icon ? listStylesProse.iconic : listStylesProse.bullet],\n            // 去掉圆点后 Safari 不再把它当列表念（见 listStyles）\n            role: icon ? 'list' : undefined,\n          },\n          rest,\n        )}\n      >\n        {children}\n      </ul>\n    );\n  },\n);\n\n/** 有序列表（ol）：编号；start、reversed 等原生属性照常可用 */\nexport const OrderedList = _component(\n  ({ size, gap = 'xs', children, ...rest }: OrderedListProps) => {\n    // 里面的项不沿用外层 List 的图标\n    ListContext.provide({});\n    return () => (\n      <ol {...mergeAttrs<'ol'>({ sx: [...listSx(gap, size), listStylesProse.number] }, rest)}>\n        {children}\n      </ol>\n    );\n  },\n);\n\n/** 列表项（li）：在带图标的 List 里，图标在前、文字在后 */\nexport const ListItem = _component(\n  ({ icon, propsIcon, propsContent, children, ...rest }: ListItemProps) => {\n    const list: ListMarkerState = ListContext.inject({});\n    return () => {\n      const shown = icon ?? list.icon;\n      if (!shown) {\n        return <li {...mergeAttrs<'li'>({ sx: listStylesProse.item }, rest)}>{children}</li>;\n      }\n      return (\n        <li {...mergeAttrs<'li'>({ sx: listStylesProse.iconItem }, rest)}>\n          <Icon\n            {...mergePartProps<IconProps>(\n              { icon: shown, sx: listStylesProse.icon },\n              list.propsIcon,\n              propsIcon,\n            )}\n          />\n          <div {...mergeAttrs<'div'>({ sx: listStylesProse.content }, propsContent)}>\n            {children}\n          </div>\n        </li>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/base/Mark.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';
+/** 未声明的属性落到 mark 上 */
+export interface MarkProps extends PartProps<'mark'> {
+    children?: VNodeChild;
+}
+/** Mark 的样式 */
+export declare const markStyles: Readonly<{
+    root: css.CompiledStyles;
+}>;
+/** 高亮标记（mark） */
+export declare const Mark: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<MarkProps>;

package/dist/base/Mark.js

@@ -0,0 +1,23 @@
+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/Mark.tsx
+/** 未声明的属性落到 mark 上 */
+/** Mark 的样式 */
+var markStyles = css.create({ root: {
+	paddingInline: "0.15em",
+	borderRadius: "_xs",
+	backgroundColor: "_highlight",
+	color: "inherit"
+} });
+/** 高亮标记（mark） */
+var Mark = /*#__PURE__*/ _component((_props, _ctx) => {
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	return () => createVNode("mark", mergeAttrs({ sx: markStyles.root }, rest), [children.value]);
+}, { name: "Mark" });
+//#endregion
+export { Mark, markStyles };
+
+//# sourceMappingURL=Mark.js.map

package/dist/base/Mark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mark.js","names":["_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/Mark.tsx"],"sourcesContent":["/**\n * 高亮标记（mark）：搜索命中、正文里要强调的词。底色取主题的 highlight，文字颜色不变。\n *\n *   <Mark>vue-tsx-pro</Mark> 的组件\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/** 未声明的属性落到 mark 上 */\nexport interface MarkProps extends PartProps<'mark'> {\n  children?: VNodeChild;\n}\n\n/** Mark 的样式 */\nexport const markStyles = css.create({\n  root: {\n    paddingInline: '0.15em',\n    borderRadius: '_xs',\n    backgroundColor: '_highlight',\n    color: 'inherit',\n  },\n});\n\n/** 高亮标记（mark） */\nexport const Mark = _component(({ children, ...rest }: MarkProps) => () => (\n  <mark {...mergeAttrs<'mark'>({ sx: markStyles.root }, rest)}>{children}</mark>\n));\n"],"mappings":";;;;;;;AAgBA,IAAa,aAAa,IAAI,OAAO,EACnC,MAAM;CACJ,eAAe;CACf,cAAc;CACd,iBAAiB;CACjB,OAAO;AACT,EACF,CAAC;;AAGD,IAAa,OAAO,0BAAW,QAAA,SAAA;CAAA,MAAA,WAAAA,aAAA,MAAA;CAAA,MAAgB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAAkBC,YAAA,QACzD,WAAmB,EAAE,IAAI,WAAW,KAAK,GAAG,IAAI,GAAC,CAAA,SAAA,KAAA,CAAA;AAC5D,GAAA,EAAA,MAAA,OAAA,CAAA"}

package/dist/base/Spinner.d.ts

@@ -0,0 +1,20 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type PartProps } from '../utils/props';
+import type { TextSize } from '../utils/style/typography';
+import { type IconProps } from './Icon';
+/** 未声明的属性落到外层的 span 上 */
+export interface SpinnerProps extends PartProps<'span', 'role'> {
+    /** 读屏念的说明；给了就是 role="status"，不给就是装饰性的（对读屏隐藏） */
+    label?: string;
+    /** 字号档位，不写时为 1em，跟随所在文字 */
+    size?: TextSize;
+    /** 图标（旋转的那个 svg）的部件属性 */
+    propsIcon?: Partial<IconProps>;
+}
+/** Spinner 的样式：root、icon */
+export declare const spinnerStyles: Readonly<{
+    icon: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** 加载指示（span > 图标）：有 label 时是 role="status" */
+export declare const Spinner: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<SpinnerProps>;

package/dist/base/Spinner.js

@@ -0,0 +1,59 @@
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Icon } from "./Icon.js";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+import { createVNode, unref } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { LoaderCircle } from "@lucide/icons";
+//#region src/base/Spinner.tsx
+/**
+* 加载中的旋转指示：Lucide 的 LoaderCircle 图标加旋转，默认跟随所在文字的大小与颜色。
+* 表示“一个操作正在进行”（按钮家族、Alert、LoadingOverlay、Switch、Tree 展开）；内容还没来时的占位用 Skeleton。
+*
+*   <Spinner />                       装饰性：旁边已经有“加载中”之类的文字
+*   <Spinner label="正在加载订单" />   单独出现：role="status"，读屏会念出 label
+*/
+/** 未声明的属性落到外层的 span 上 */
+var spin = css.keyframes({ to: { transform: "rotate(360deg)" } });
+/** Spinner 的样式：root、icon */
+var spinnerStyles = css.create({
+	root: {
+		display: "inline-flex",
+		flexShrink: 0
+	},
+	icon: {
+		animationName: spin,
+		animationDuration: {
+			default: "0.8s",
+			_reducedMotion: "1.6s"
+		},
+		animationTimingFunction: "linear",
+		animationIterationCount: "infinite"
+	}
+});
+/** 加载指示（span > 图标）：有 label 时是 role="status" */
+var Spinner = /*#__PURE__*/ _component((_props, _ctx) => {
+	const label = readonlyProp(_props, "label");
+	const size = readonlyProp(_props, "size");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const rest = restProps(_props, _ctx, true);
+	return () => createVNode("span", mergeAttrs({ sx: spinnerStyles.root }, rest, { role: label.value ? "status" : void 0 }), [createVNode(Icon, mergePartProps({
+		icon: LoaderCircle,
+		size: size.value,
+		sx: spinnerStyles.icon
+	}, propsIcon.value), null), label.value && createVNode(VisuallyHidden, { "key": "__site0" }, {
+		default: () => [unref(label)],
+		$stable: true
+	})]);
+}, {
+	name: "Spinner",
+	props: [
+		"label",
+		"size",
+		"propsIcon"
+	]
+});
+//#endregion
+export { Spinner, spinnerStyles };
+
+//# sourceMappingURL=Spinner.js.map

package/dist/base/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_vue_unref"],"sources":["../../src/base/Spinner.tsx"],"sourcesContent":["/**\n * 加载中的旋转指示：Lucide 的 LoaderCircle 图标加旋转，默认跟随所在文字的大小与颜色。\n * 表示“一个操作正在进行”（按钮家族、Alert、LoadingOverlay、Switch、Tree 展开）；内容还没来时的占位用 Skeleton。\n *\n *   <Spinner />                       装饰性：旁边已经有“加载中”之类的文字\n *   <Spinner label=\"正在加载订单\" />   单独出现：role=\"status\"，读屏会念出 label\n */\nimport { LoaderCircle } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport type { TextSize } from '../utils/style/typography';\nimport { Icon, type IconProps } from './Icon';\nimport { VisuallyHidden } from './VisuallyHidden';\n\n/** 未声明的属性落到外层的 span 上 */\nexport interface SpinnerProps extends PartProps<'span', 'role'> {\n  /** 读屏念的说明；给了就是 role=\"status\"，不给就是装饰性的（对读屏隐藏） */\n  label?: string;\n  /** 字号档位，不写时为 1em，跟随所在文字 */\n  size?: TextSize;\n  /** 图标（旋转的那个 svg）的部件属性 */\n  propsIcon?: Partial<IconProps>;\n}\n\nconst spin = css.keyframes({ to: { transform: 'rotate(360deg)' } });\n\n/** Spinner 的样式：root、icon */\nexport const spinnerStyles = css.create({\n  root: { display: 'inline-flex', flexShrink: 0 },\n  icon: {\n    animationName: spin,\n    // 旋转本身就是“还在加载”的信息，不随 durations 变为 0；减少动态效果时转慢一些\n    animationDuration: { default: '0.8s', _reducedMotion: '1.6s' },\n    animationTimingFunction: 'linear',\n    animationIterationCount: 'infinite',\n  },\n});\n\n/** 加载指示（span > 图标）：有 label 时是 role=\"status\" */\nexport const Spinner = _component(({ label, size, propsIcon, ...rest }: SpinnerProps) => () => (\n  <span\n    {...mergeAttrs<'span'>({ sx: spinnerStyles.root }, rest, {\n      role: label ? 'status' : undefined,\n    })}\n  >\n    <Icon\n      {...mergePartProps<IconProps>(\n        { icon: LoaderCircle, size, sx: spinnerStyles.icon },\n        propsIcon,\n      )}\n    />\n    {label && <VisuallyHidden>{label}</VisuallyHidden>}\n  </span>\n));\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,IAAM,OAAO,IAAI,UAAU,EAAE,IAAI,EAAE,WAAW,iBAAiB,EAAE,CAAC;;AAGlE,IAAa,gBAAgB,IAAI,OAAO;CACtC,MAAM;EAAE,SAAS;EAAe,YAAY;CAAE;CAC9C,MAAM;EACJ,eAAe;EAEf,mBAAmB;GAAE,SAAS;GAAQ,gBAAgB;EAAO;EAC7D,yBAAyB;EACzB,yBAAyB;CAC3B;AACF,CAAC;;AAGD,IAAa,UAAU,0BAAW,QAAA,SAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAA8B,OAAIC,UAAA,QAAA,MAAA,IAAA;CAAA,aAAqBC,YAAA,QAEjF,WAAmB,EAAE,IAAI,cAAc,KAAK,GAAG,MAAM,EACvD,MAAM,MAAA,QAAQ,WAAW,KAAA,EAC3B,CAAC,GAAC,CAAAA,YAAA,MAGI,eACF;EAAE,MAAM;EAAc,MAAI,KAAA;EAAE,IAAI,cAAc;CAAK,GAAC,UAAA,KAEtD,GAAC,IAAA,GAEF,MAAA,SAAAA,YAAA,gBAAA,EAAA,OAAA,UAAA,GAAA;EAAA,eAAA,CAAAC,MAAA,KAAA,CAAA;EAAA,SAAA;CAAA,CAAA,CAAiD,CAAA;AAErD,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CAAA"}

package/dist/base/StatusDot.d.ts

@@ -0,0 +1,48 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type PartProps } from '../utils/props';
+import type { StatusTone } from '../utils/style/tone-styles';
+/** 色点的大小 */
+export interface StatusDotSizes {
+    /** 0.5rem（默认）：列表、通知 */
+    sm: unknown;
+    /** 0.625rem：图例 */
+    md: unknown;
+}
+/** 未声明的属性落到 span 上 */
+export interface StatusDotProps extends PartProps<'span', 'role' | 'aria-hidden'> {
+    /**
+     * 色调
+     * @default 'accent'
+     */
+    tone?: StatusTone;
+    /** 任意 CSS 颜色；写了时不看 tone */
+    color?: string;
+    /**
+     * 大小
+     * @default 'sm'
+     */
+    size?: keyof StatusDotSizes;
+    /** 读屏念的含义；不写时色点只是装饰（aria-hidden） */
+    label?: string;
+}
+/** StatusDot 的样式：root、sm、md */
+export declare const statusDotStyles: Readonly<{
+    md: css.CompiledStyles;
+    root: css.CompiledStyles;
+    sm: css.CompiledStyles;
+}>;
+/** StatusDot 的色调 */
+export declare const statusDotToneStyles: Readonly<{
+    accent: css.CompiledStyles;
+    danger: css.CompiledStyles;
+    info: css.CompiledStyles;
+    neutral: css.CompiledStyles;
+    success: css.CompiledStyles;
+    warning: css.CompiledStyles;
+}>;
+/** StatusDot 的动态样式：任意颜色 */
+export declare const statusDotDynamicStyles: Readonly<{
+    readonly color: (color: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 状态色点 */
+export declare const StatusDot: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<StatusDotProps>;

package/dist/base/StatusDot.js

@@ -0,0 +1,62 @@
+import { mergeAttrs } from "../utils/props.js";
+import { createVNode, mergeProps } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/base/StatusDot.tsx
+/** 色点的大小 */
+/** 未声明的属性落到 span 上 */
+/** StatusDot 的样式：root、sm、md */
+var statusDotStyles = css.create({
+	root: {
+		display: "inline-block",
+		flexShrink: 0,
+		borderRadius: "_full"
+	},
+	sm: {
+		width: "0.5rem",
+		height: "0.5rem"
+	},
+	md: {
+		width: "0.625rem",
+		height: "0.625rem"
+	}
+});
+/** StatusDot 的色调 */
+var statusDotToneStyles = css.create({
+	neutral: { backgroundColor: "_textMuted" },
+	accent: { backgroundColor: "_accent" },
+	info: { backgroundColor: "_info" },
+	success: { backgroundColor: "_success" },
+	warning: { backgroundColor: "_warning" },
+	danger: { backgroundColor: "_danger" }
+});
+/** StatusDot 的动态样式：任意颜色 */
+var statusDotDynamicStyles = css.create({ color: (color) => ({ backgroundColor: color }) });
+/** 状态色点 */
+var StatusDot = /*#__PURE__*/ _component((_props, _ctx) => {
+	const tone = readonlyProp(_props, "tone", "accent");
+	const color = readonlyProp(_props, "color");
+	const size = readonlyProp(_props, "size", "sm");
+	const label = readonlyProp(_props, "label");
+	const rest = restProps(_props, _ctx, true);
+	return () => createVNode("span", mergeProps(mergeAttrs({ sx: [
+		statusDotStyles.root,
+		statusDotStyles[size.value],
+		color.value ? css.bind(statusDotDynamicStyles.color, () => [color.value], true) : statusDotToneStyles[tone.value]
+	] }, rest, label.value ? {
+		role: "img",
+		"aria-label": label.value
+	} : { "aria-hidden": true }), { "data-tone": color.value ? void 0 : tone.value }), null);
+}, {
+	name: "StatusDot",
+	props: [
+		"tone",
+		"color",
+		"size",
+		"label"
+	]
+});
+//#endregion
+export { StatusDot, statusDotDynamicStyles, statusDotStyles, statusDotToneStyles };
+
+//# sourceMappingURL=StatusDot.js.map

package/dist/base/StatusDot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusDot.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/base/StatusDot.tsx"],"sourcesContent":["/**\n * 状态色点：一个小圆点标出状态或类别（未读、新到、退回、图例），比 Badge 更轻。\n *\n *   <StatusDot tone=\"danger\" />                        装饰：对读屏隐藏，含义写在旁边的文字里\n *   <StatusDot tone=\"accent\" label=\"未读\" />            点本身就是信息：读屏念 label\n *\n * 色调与 Badge 同名（neutral 是次要文字色）；color 给任意 CSS 颜色（图表的系列色）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport type { StatusTone } from '../utils/style/tone-styles';\n\n/** 色点的大小 */\nexport interface StatusDotSizes {\n  /** 0.5rem（默认）：列表、通知 */\n  sm: unknown;\n  /** 0.625rem：图例 */\n  md: unknown;\n}\n\n/** 未声明的属性落到 span 上 */\nexport interface StatusDotProps extends PartProps<'span', 'role' | 'aria-hidden'> {\n  /**\n   * 色调\n   * @default 'accent'\n   */\n  tone?: StatusTone;\n  /** 任意 CSS 颜色；写了时不看 tone */\n  color?: string;\n  /**\n   * 大小\n   * @default 'sm'\n   */\n  size?: keyof StatusDotSizes;\n  /** 读屏念的含义；不写时色点只是装饰（aria-hidden） */\n  label?: string;\n}\n\n/** StatusDot 的样式：root、sm、md */\nexport const statusDotStyles = css.create({\n  root: { display: 'inline-block', flexShrink: 0, borderRadius: '_full' },\n  sm: { width: '0.5rem', height: '0.5rem' },\n  md: { width: '0.625rem', height: '0.625rem' },\n});\n\n/** StatusDot 的色调 */\nexport const statusDotToneStyles = css.create({\n  neutral: { backgroundColor: '_textMuted' },\n  accent: { backgroundColor: '_accent' },\n  info: { backgroundColor: '_info' },\n  success: { backgroundColor: '_success' },\n  warning: { backgroundColor: '_warning' },\n  danger: { backgroundColor: '_danger' },\n});\n\n/** StatusDot 的动态样式：任意颜色 */\nexport const statusDotDynamicStyles = css.create({\n  color: (color: string) => ({ backgroundColor: color }),\n});\n\n/** 状态色点 */\nexport const StatusDot = _component(\n  ({ tone = 'accent', color, size = 'sm', label, ...rest }: StatusDotProps) =>\n    () => (\n      <span\n        {...mergeAttrs<'span'>(\n          {\n            sx: [\n              statusDotStyles.root,\n              statusDotStyles[size],\n              color ? statusDotDynamicStyles.color(color) : statusDotToneStyles[tone],\n            ],\n          },\n          rest,\n          label ? { role: 'img', 'aria-label': label } : { 'aria-hidden': true },\n        )}\n        data-tone={color ? undefined : tone}\n      />\n    ),\n);\n"],"mappings":";;;;;;;;AAwCA,IAAa,kBAAkB,IAAI,OAAO;CACxC,MAAM;EAAE,SAAS;EAAgB,YAAY;EAAG,cAAc;CAAQ;CACtE,IAAI;EAAE,OAAO;EAAU,QAAQ;CAAS;CACxC,IAAI;EAAE,OAAO;EAAY,QAAQ;CAAW;AAC9C,CAAC;;AAGD,IAAa,sBAAsB,IAAI,OAAO;CAC5C,SAAS,EAAE,iBAAiB,aAAa;CACzC,QAAQ,EAAE,iBAAiB,UAAU;CACrC,MAAM,EAAE,iBAAiB,QAAQ;CACjC,SAAS,EAAE,iBAAiB,WAAW;CACvC,SAAS,EAAE,iBAAiB,WAAW;CACvC,QAAQ,EAAE,iBAAiB,UAAU;AACvC,CAAC;;AAGD,IAAa,yBAAyB,IAAI,OAAO,EAC/C,QAAQ,WAAmB,EAAE,iBAAiB,MAAM,GACtD,CAAC;;AAGD,IAAa,YAAY,0BACvB,QAAA,SAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAAU,QAAQ;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAAgB,IAAI;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAY,OAAIC,UAAA,QAAA,MAAA,IAAA;CAAA,aACpDC,YAAA,QAAAC,WAEQ,WACF,EACE,IAAI;EACF,gBAAgB;EAChB,gBAAe,KAAA;EACf,MAAA,QAAA,IAAA,KAAQ,uBAAuB,aAAK,CAAA,MAAA,KAAA,GAAA,IAAA,IAAU,oBAAmB,KAAA;CAAM,EAE3E,GACA,MACA,MAAA,QAAQ;EAAE,MAAM;EAAO,cAAY,MAAA;CAAQ,IAAI,EAAE,eAAe,KAAK,CACvE,GAAC,EAAA,aACU,MAAA,QAAQ,KAAA,IAAS,KAAA,MAAO,CAAA,GAAA,IAAA;AAEtC,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACL"}

package/dist/base/Tag.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 BadgeOptions } from './badge-styles';
+import { type PresetIconButtonProps } from './CloseButton';
+import { type IconData, type IconProps } from './Icon';
+/** 未声明的属性落到 span 上 */
+export interface TagProps extends PartProps<'span'>, BadgeOptions {
+    /** 文字前的图标 */
+    icon?: IconData;
+    /** 给了就显示移除按钮：点击后标签先淡出缩小，离场结束再调用；标签随后被移除时，焦点交给同组的下一个（没有就上一个）可聚焦元素；没被移除就重新显示 */
+    onRemove?: () => void;
+    /** 移除按钮的无障碍名称，默认“移除”加上标签文字（内容只有文字时） */
+    removeLabel?: string;
+    /** 图标的部件属性 */
+    propsIcon?: Partial<IconProps>;
+    /** 移除按钮的部件属性 */
+    propsRemove?: Partial<PresetIconButtonProps>;
+    children?: VNodeChild;
+}
+/** Tag 的样式：root、removable、remove、removing */
+export declare const tagStyles: Readonly<{
+    removable: css.CompiledStyles;
+    remove: css.CompiledStyles;
+    removing: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** 标签（span）：外观同 Badge，可以带移除按钮 */
+export declare const Tag: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<TagProps>;