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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 kenconnet666
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,33 @@
-# Temporary Holding Version
+# @zerodep-dev/vue-tsx-pro-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+用 `@zerodep-dev/vue-tsx-pro-tsx` 写的 Vue 3 组件库：按无障碍规范实现的基础、表单、浮层、数据展示、表格、图表与业务模式组件，十二套内置主题，运行时样式（使用方不用再编译组件库）。
+
+```bash
+pnpm add @zerodep-dev/vue-tsx-pro-tsx @zerodep-dev/vue-tsx-pro-ui @lucide/icons zod
+```
+
+```ts
+// 应用入口
+import { createUi, darkTheme, lightTheme } from '@zerodep-dev/vue-tsx-pro-ui';
+
+app.use(createUi({ theme: { light: lightTheme, dark: darkTheme } }));
+```
+
+```tsx
+import { Button, Card, Flex } from '@zerodep-dev/vue-tsx-pro-ui';
+
+<Card>
+  <Flex gap="sm">
+    <Button>保存</Button>
+    <Button variant="outline">取消</Button>
+  </Flex>
+</Card>;
+```
+
+- 组件的默认外观用 `createUi({ defaults })` 统一改，样式用 `createUi({ styles })` 定制；一处覆盖用 `sx`，部件用 `propsXxx`。
+- 每个部件带 `data-scope` / `data-part`，宿主的 CSS 与端到端测试能稳定地选中部件。
+- 图表（`@zerodep-dev/vue-tsx-pro-ui/charts`）、3D（`/three`）、代码高亮（`/shiki`）、Excel（`/xlsx`）等在子路径里，用到才安装对应的可选依赖。
+
+要求 Vue 3.5+、Vite 8，并配好 `@zerodep-dev/vue-tsx-pro-tsx` 的 Vite 预设。文档与示例见仓库：<https://github.com/kenconnet666/vue-tsx-pro>。
+
+MIT License

package/dist/base/Badge.d.ts

@@ -0,0 +1,28 @@
+import type { VNodeChild } from 'vue';
+import type { StatusMap } from '../utils/data/status';
+import { type PartProps } from '../utils/props';
+import { type BadgeOptions } from './badge-styles';
+import { type IconData, type IconProps } from './Icon';
+/** 未声明的属性落到 span 上 */
+export interface BadgeProps extends PartProps<'span'>, BadgeOptions {
+    /** 文字前的图标 */
+    icon?: IconData;
+    /** 文字前一个同色的圆点（没有图标时）：表格、列表里的状态，比整块底色更轻 */
+    dot?: boolean;
+    /** 图标的部件属性 */
+    propsIcon?: Partial<IconProps>;
+    /** 圆点的部件属性 */
+    propsDot?: PartProps<'span', 'aria-hidden'>;
+    children?: VNodeChild;
+}
+/** 标记（span）：状态色调 × 样式，字号默认 xs */
+export declare const Badge: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<BadgeProps>;
+/** 名字、色调、图标由状态映射决定；其余同 Badge */
+export interface StatusBadgeProps<K extends string> extends Omit<BadgeProps, 'tone' | 'icon' | 'children'> {
+    /** 状态映射（createStatusMap） */
+    statuses: StatusMap<K>;
+    /** 当前状态；不认识的 key 显示成中性色、名字就是 key */
+    value: K | (string & {});
+}
+/** 状态标记：按状态映射显示名字与色调，没有图标的状态前画圆点 */
+export declare const StatusBadge: <K extends string>(props: StatusBadgeProps<K>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;

package/dist/base/Badge.js

@@ -0,0 +1,72 @@
+import { useDefaults } from "../config/defaults.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { badgeParts, badgeRecipe } from "./badge-styles.js";
+import { useRecipe } from "../config/styles.js";
+import { Icon } from "./Icon.js";
+import { createVNode, mergeProps } from "vue";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+//#region src/base/Badge.tsx
+/** 未声明的属性落到 span 上 */
+/** 标记（span）：状态色调 × 样式，字号默认 xs */
+var Badge = /*#__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 dot = readonlyProp(_props, "dot", false);
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsDot = readonlyProp(_props, "propsDot");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const appearance = useDefaults("Badge", () => ({
+		variant: variant.value,
+		tone: tone.value,
+		size: size.value,
+		radius: radius.value
+	}));
+	const recipe = useRecipe(badgeRecipe);
+	return () => {
+		const styles = badgeParts(appearance(), recipe);
+		return createVNode("span", mergeAttrs(styles.root, rest), [icon.value ? createVNode(Icon, mergePartProps({ icon: icon.value }, propsIcon.value), null) : dot.value && createVNode("span", mergeAttrs(styles.dot, propsDot.value, { "aria-hidden": true }), null), children.value]);
+	};
+}, {
+	name: "Badge",
+	props: [
+		"variant",
+		"tone",
+		"size",
+		"radius",
+		"icon",
+		"dot",
+		"propsIcon",
+		"propsDot"
+	]
+});
+/** 名字、色调、图标由状态映射决定；其余同 Badge */
+/** 状态标记：按状态映射显示名字与色调，没有图标的状态前画圆点 */
+var StatusBadge = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const statuses = readonlyProp(_props2, "statuses");
+	const value = readonlyProp(_props2, "value");
+	const dot = readonlyProp(_props2, "dot", true);
+	const rest = restProps(_props2, _ctx2, true);
+	return () => {
+		const status = statuses.value.get(value.value);
+		return createVNode(Badge, mergeProps(mergePartProps({
+			tone: status.tone,
+			icon: status.icon,
+			dot: dot.value
+		}, rest), { "data-status": value.value }), { default: () => [status.label] });
+	};
+}, {
+	name: "StatusBadge",
+	props: [
+		"statuses",
+		"value",
+		"dot"
+	]
+});
+//#endregion
+export { Badge, StatusBadge };
+
+//# sourceMappingURL=Badge.js.map

package/dist/base/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/base/Badge.tsx"],"sourcesContent":["/**\n * 标记（span）：状态、计数、分类等短文字。只展示，不可交互；可以关闭或选择的用 Tag。\n *\n *   <Badge tone=\"success\">已发货</Badge>\n *   <Badge variant=\"solid\" tone=\"danger\" radius=\"full\">12</Badge>\n *   <Badge tone=\"warning\" dot>待审核</Badge>          文字前一个同色的圆点：表格里的状态\n *   <StatusBadge statuses={taskStatuses} value=\"verifying\" />   名字与色调取自状态映射（createStatusMap）\n *\n * 部件：Root（span）、Icon、Dot（span，dot 时）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport type { VNodeChild } from 'vue';\nimport { useDefaults } from '../config/defaults';\nimport type { StatusMap } from '../utils/data/status';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { badgeParts, badgeRecipe, type BadgeOptions } from './badge-styles';\nimport { useRecipe } from '../config/styles';\nimport { Icon, type IconData, type IconProps } from './Icon';\n\n/** 未声明的属性落到 span 上 */\nexport interface BadgeProps extends PartProps<'span'>, BadgeOptions {\n  /** 文字前的图标 */\n  icon?: IconData;\n  /** 文字前一个同色的圆点（没有图标时）：表格、列表里的状态，比整块底色更轻 */\n  dot?: boolean;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 圆点的部件属性 */\n  propsDot?: PartProps<'span', 'aria-hidden'>;\n  children?: VNodeChild;\n}\n\n/** 标记（span）：状态色调 × 样式，字号默认 xs */\nexport const Badge = _component(\n  ({\n    variant,\n    tone,\n    size,\n    radius,\n    icon,\n    dot = false,\n    propsIcon,\n    propsDot,\n    children,\n    ...rest\n  }: BadgeProps) => {\n    const appearance = useDefaults('Badge', () => ({ variant, tone, size, radius }));\n    const recipe = useRecipe(badgeRecipe);\n    return () => {\n      const styles = badgeParts(appearance(), recipe);\n      return (\n        <span {...mergeAttrs<'span'>(styles.root, rest)}>\n          {icon ? (\n            <Icon {...mergePartProps<IconProps>({ icon }, propsIcon)} />\n          ) : (\n            dot && <span {...mergeAttrs<'span'>(styles.dot, propsDot, { 'aria-hidden': true })} />\n          )}\n          {children}\n        </span>\n      );\n    };\n  },\n);\n\n/** 名字、色调、图标由状态映射决定；其余同 Badge */\nexport interface StatusBadgeProps<K extends string> extends Omit<\n  BadgeProps,\n  'tone' | 'icon' | 'children'\n> {\n  /** 状态映射（createStatusMap） */\n  statuses: StatusMap<K>;\n  /** 当前状态；不认识的 key 显示成中性色、名字就是 key */\n  value: K | (string & {});\n}\n\n/** 状态标记：按状态映射显示名字与色调，没有图标的状态前画圆点 */\nexport const StatusBadge = _component(\n  <K extends string>({ statuses, value, dot = true, ...rest }: StatusBadgeProps<K>) =>\n    () => {\n      const status = statuses.get(value);\n      return (\n        <Badge\n          {...mergePartProps<BadgeProps>({ tone: status.tone, icon: status.icon, dot }, rest)}\n          data-status={value}\n        >\n          {status.label}\n        </Badge>\n      );\n    },\n);\n"],"mappings":";;;;;;;;;;AAiCA,IAAa,QAAQ,0BACnB,QAAA,SAWkB;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,MAAAA,aAAA,QAAA,OALV,KAAK;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAIR,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,aAAa,YAAY,gBAAgB;EAAE,SAAO,QAAA;EAAE,MAAI,KAAA;EAAE,MAAI,KAAA;EAAE,QAAM,OAAA;CAAC,EAAE;CAC/E,MAAM,SAAS,UAAU,WAAW;CACpC,aAAa;EACX,MAAM,SAAS,WAAW,WAAW,GAAG,MAAM;EAC9C,OAAAC,YAAA,QACY,WAAmB,OAAO,MAAM,IAAI,GAAC,CAC5C,KAAA,QAAAA,YAAA,MACW,eAA0B,EAAE,MAAI,KAAA,MAAC,GAAC,UAAA,KAAW,GAAC,IAAA,IAExD,IAAA,SAAAA,YAAA,QAAiB,WAAmB,OAAO,KAAG,SAAA,OAAY,EAAE,eAAe,KAAK,CAAC,GAAC,IAAA,GACnF,SAAA,KAAA,CAAA;CAIP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH;;;AAcA,IAAa,cAAc,0BACzB,SAAA,UAAA;CAAA,MAAA,WAAAH,aAAA,SAAA,UAAA;CAAA,MAAA,QAAAA,aAAA,SAAA,OAAA;CAAA,MAAA,MAAAA,aAAA,SAAA,OAA4C,IAAI;CAAA,MAAK,OAAIE,UAAA,SAAA,OAAA,IAAA;CAAA,aACjD;EACJ,MAAM,SAAS,SAAA,MAAS,IAAG,MAAA,KAAM;EACjC,OAAAC,YAAA,OAAAC,WAEQ,eAA2B;GAAE,MAAM,OAAO;GAAM,MAAM,OAAO;GAAM,KAAG,IAAA;EAAC,GAAG,IAAI,GAAC,EAAA,eAAA,MAAA,MAAA,CAAA,GAAA,EAAA,eAAA,CAGlF,OAAO,KAAK,EAAA,CAAA;CAGnB;AAAC,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACL"}

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

package/dist/base/Blockquote.js

@@ -0,0 +1,26 @@
+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/Blockquote.tsx
+/** 未声明的属性落到 blockquote 上 */
+/** Blockquote 的样式 */
+var blockquoteStyles = css.create({ root: {
+	margin: 0,
+	paddingBlock: "_xs",
+	paddingInlineStart: "_lg",
+	borderInlineStartWidth: "_md",
+	borderInlineStartStyle: "solid",
+	borderInlineStartColor: "_borderStrong",
+	color: "_textMuted"
+} });
+/** 引用（blockquote） */
+var Blockquote = /*#__PURE__*/ _component((_props, _ctx) => {
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	return () => createVNode("blockquote", mergeAttrs({ sx: blockquoteStyles.root }, rest), [children.value]);
+}, { name: "Blockquote" });
+//#endregion
+export { Blockquote, blockquoteStyles };
+
+//# sourceMappingURL=Blockquote.js.map

package/dist/base/Blockquote.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Blockquote.js","names":["_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/Blockquote.tsx"],"sourcesContent":["/**\n * 引用（blockquote）：起始边一条竖线，次要文字色。提示、警告用 Alert，不用引用。\n *\n *   <Blockquote cite=\"https://…\">…</Blockquote>\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/** 未声明的属性落到 blockquote 上 */\nexport interface BlockquoteProps extends PartProps<'blockquote'> {\n  children?: VNodeChild;\n}\n\n/** Blockquote 的样式 */\nexport const blockquoteStyles = css.create({\n  root: {\n    margin: 0,\n    paddingBlock: '_xs',\n    paddingInlineStart: '_lg',\n    borderInlineStartWidth: '_md',\n    borderInlineStartStyle: 'solid',\n    borderInlineStartColor: '_borderStrong',\n    color: '_textMuted',\n  },\n});\n\n/** 引用（blockquote） */\nexport const Blockquote = _component(({ children, ...rest }: BlockquoteProps) => () => (\n  <blockquote {...mergeAttrs<'blockquote'>({ sx: blockquoteStyles.root }, rest)}>\n    {children}\n  </blockquote>\n));\n"],"mappings":";;;;;;;AAgBA,IAAa,mBAAmB,IAAI,OAAO,EACzC,MAAM;CACJ,QAAQ;CACR,cAAc;CACd,oBAAoB;CACpB,wBAAwB;CACxB,wBAAwB;CACxB,wBAAwB;CACxB,OAAO;AACT,EACF,CAAC;;AAGD,IAAa,aAAa,0BAAW,QAAA,SAAA;CAAA,MAAA,WAAAA,aAAA,MAAA;CAAA,MAAgB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAAwBC,YAAA,cAC/D,WAAyB,EAAE,IAAI,iBAAiB,KAAK,GAAG,IAAI,GAAC,CAAA,SAAA,KAAA,CAAA;AAG9E,GAAA,EAAA,MAAA,aAAA,CAAA"}

package/dist/base/Button.d.ts

@@ -0,0 +1,18 @@
+import { type PartProps } from '../utils/props';
+import { type ButtonContentOptions, type ButtonOptions } from './button-core';
+/** 不可用、忙碌由组件按 disabled、loading 管理 */
+export type ButtonManaged = 'disabled' | 'aria-disabled' | 'aria-busy';
+/** 未声明的属性落到 button 上 */
+export interface ButtonProps extends PartProps<'button', ButtonManaged>, ButtonOptions, ButtonContentOptions {
+    /** 不可用：原生 disabled，不能聚焦 */
+    disabled?: boolean;
+    /**
+     * 不可用时仍可聚焦：改用 aria-disabled，点击无效。需要用 Tooltip 说明“为什么不能点”时用，
+     * 或者按钮在一组键盘导航里、不希望焦点跳过它
+     */
+    focusableWhenDisabled?: boolean;
+    /** 按钮类型，默认 button（不是浏览器默认的 submit），表单里的提交按钮写 type="submit" */
+    type?: 'button' | 'submit' | 'reset';
+}
+/** 按钮（button）：样式、色调、尺寸、圆角、图标、加载中、波纹 */
+export declare const Button: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ButtonProps>;

package/dist/base/Button.js

@@ -0,0 +1,86 @@
+import { mergeAttrs } from "../utils/props.js";
+import { useDelayedLoading } from "../utils/motion/delayed-loading.js";
+import { buttonContent, buttonPart, buttonSx, useButtonAppearance, useButtonBehavior } from "./button-core.js";
+import { createVNode } from "vue";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+//#region src/base/Button.tsx
+/** 不可用、忙碌由组件按 disabled、loading 管理 */
+/** 未声明的属性落到 button 上 */
+/** 按钮（button）：样式、色调、尺寸、圆角、图标、加载中、波纹 */
+var Button = /*#__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 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 disabled = readonlyProp(_props, "disabled", false);
+	const focusableWhenDisabled = readonlyProp(_props, "focusableWhenDisabled", false);
+	const type = readonlyProp(_props, "type", "button");
+	const onClick = readonlyProp(_props, "onClick");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	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: focusableWhenDisabled.value,
+		ripple: ripple.value
+	}), () => onClick.value);
+	return () => createVNode("button", mergeAttrs({
+		...buttonPart,
+		sx: buttonSx(appearance(), {
+			disabled: disabled.value,
+			fullWidth: fullWidth.value
+		}),
+		type: type.value
+	}, rest, behavior()), [buttonContent({
+		icon: icon.value,
+		iconEnd: iconEnd.value,
+		children: children.value,
+		propsContent: propsContent.value,
+		propsIcon: propsIcon.value,
+		propsIconEnd: propsIconEnd.value
+	}, {
+		loading: spinner.value,
+		propsSpinner: propsSpinner.value
+	})]);
+}, {
+	name: "Button",
+	props: [
+		"variant",
+		"tone",
+		"size",
+		"radius",
+		"loading",
+		"ripple",
+		"icon",
+		"iconEnd",
+		"fullWidth",
+		"propsContent",
+		"propsIcon",
+		"propsIconEnd",
+		"propsSpinner",
+		"disabled",
+		"focusableWhenDisabled",
+		"type",
+		"onClick"
+	]
+});
+//#endregion
+export { Button };
+
+//# sourceMappingURL=Button.js.map

package/dist/base/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/Button.tsx"],"sourcesContent":["/**\n * 按钮（button）。外观与内容排布和 LinkButton、IconButton 共用（button-core.ts）；\n * 跳转到别的页面用 LinkButton（a），只有图标用 IconButton。\n *\n *   <Button onClick={save}>保存</Button>\n *   <Button variant=\"outline\" tone=\"neutral\" icon={Plus}>新建</Button>\n *   <Button type=\"submit\" loading={saving}>提交</Button>\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\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';\n\n/** 不可用、忙碌由组件按 disabled、loading 管理 */\nexport type ButtonManaged = 'disabled' | 'aria-disabled' | 'aria-busy';\n\n/** 未声明的属性落到 button 上 */\nexport interface ButtonProps\n  extends PartProps<'button', ButtonManaged>, ButtonOptions, ButtonContentOptions {\n  /** 不可用：原生 disabled，不能聚焦 */\n  disabled?: boolean;\n  /**\n   * 不可用时仍可聚焦：改用 aria-disabled，点击无效。需要用 Tooltip 说明“为什么不能点”时用，\n   * 或者按钮在一组键盘导航里、不希望焦点跳过它\n   */\n  focusableWhenDisabled?: boolean;\n  /** 按钮类型，默认 button（不是浏览器默认的 submit），表单里的提交按钮写 type=\"submit\" */\n  type?: 'button' | 'submit' | 'reset';\n}\n\n/** 按钮（button）：样式、色调、尺寸、圆角、图标、加载中、波纹 */\nexport const Button = _component(\n  ({\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    disabled = false,\n    focusableWhenDisabled = false,\n    type = 'button',\n    onClick,\n    children,\n    ...rest\n  }: ButtonProps) => {\n    const appearance = useButtonAppearance(() => ({ variant, tone, size, radius }), 'solid');\n    // 很快完成的加载不换成加载指示；点击拦截、aria-busy 仍按 loading 立即生效\n    const spinner = useDelayedLoading(() => loading);\n    const behavior = useButtonBehavior(\n      () => ({ disabled, loading, focusableWhenDisabled, ripple }),\n      () => onClick,\n    );\n\n    return () => (\n      <button\n        {...mergeAttrs<'button'>(\n          { ...buttonPart, sx: buttonSx(appearance(), { disabled, fullWidth }), type },\n          rest,\n          behavior(),\n        )}\n      >\n        {buttonContent(\n          { icon, iconEnd, children, propsContent, propsIcon, propsIconEnd },\n          { loading: spinner.value, propsSpinner },\n        )}\n      </button>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AAuCA,IAAa,SAAS,0BACpB,QAAA,SAoBmB;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,WAfP,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,WAAAA,aAAA,QAAA,YAKN,KAAK;CAAA,MAAA,wBAAAA,aAAA,QAAA,yBACQ,KAAK;CAAA,MAAA,OAAAA,aAAA,QAAA,QACtB,QAAQ;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAGZ,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,aAAa,2BAA2B;EAAE,SAAO,QAAA;EAAE,MAAI,KAAA;EAAE,MAAI,KAAA;EAAE,QAAM,OAAA;CAAC,IAAI,OAAO;CAEvF,MAAM,UAAU,wBAAkB,QAAA,KAAa;CAC/C,MAAM,WAAW,yBACR;EAAE,UAAQ,SAAA;EAAE,SAAO,QAAA;EAAE,uBAAqB,sBAAA;EAAE,QAAM,OAAA;CAAC,UAC1D,QAAA,KACF;CAEA,aAAOC,YAAA,UAEC,WACF;EAAE,GAAG;EAAY,IAAI,SAAS,WAAW,GAAG;GAAE,UAAQ,SAAA;GAAE,WAAS,UAAA;EAAC,CAAC;EAAG,MAAI,KAAA;CAAC,GAC3E,MACA,SAAS,CACX,GAAC,CAEA,cACC;EAAE,MAAI,KAAA;EAAE,SAAO,QAAA;EAAE,UAAQ,SAAA;EAAE,cAAY,aAAA;EAAE,WAAS,UAAA;EAAE,cAAY,aAAA;CAAC,GACjE;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/ButtonBase.d.ts

@@ -0,0 +1,21 @@
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import type { ButtonManaged } from './Button';
+/** 不可用、忙碌由组件按 disabled、loading 管理（同 Button） */
+export type ButtonBaseManaged = ButtonManaged;
+/** 未声明的属性落到 button 上 */
+export interface ButtonBaseProps extends PartProps<'button', ButtonBaseManaged> {
+    /** 不可用：原生 disabled，不能聚焦 */
+    disabled?: boolean;
+    /** 不可用时仍可聚焦：改用 aria-disabled，点击无效（在一组键盘导航里不希望焦点跳过它时用） */
+    focusableWhenDisabled?: boolean;
+    /** 加载中：点击无效，带 aria-busy 与 data-loading（加载指示由使用方放进内容） */
+    loading?: boolean;
+    /** 按下时的波纹；不写时沿用 createUi / Provider 的 ripple */
+    ripple?: boolean;
+    /** 按钮类型，默认 button（不是浏览器默认的 submit） */
+    type?: 'button' | 'submit' | 'reset';
+    children?: VNodeChild;
+}
+/** 没有外观的按钮：焦点环、波纹、颜色过渡、不可用与加载中 */
+export declare const ButtonBase: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ButtonBaseProps>;

package/dist/base/ButtonBase.js

@@ -0,0 +1,51 @@
+import { mergeAttrs } from "../utils/props.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { interactionTransitions } from "../utils/style/transitions.js";
+import { rippleHostStyles } from "../utils/dom/ripple.js";
+import { buttonBaseStyles, useButtonBehavior } from "./button-core.js";
+import { createVNode } from "vue";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+//#region src/base/ButtonBase.tsx
+/** 不可用、忙碌由组件按 disabled、loading 管理（同 Button） */
+/** 未声明的属性落到 button 上 */
+/** 没有外观的按钮：焦点环、波纹、颜色过渡、不可用与加载中 */
+var ButtonBase = /*#__PURE__*/ _component((_props, _ctx) => {
+	const disabled = readonlyProp(_props, "disabled", false);
+	const focusableWhenDisabled = readonlyProp(_props, "focusableWhenDisabled", false);
+	const loading = readonlyProp(_props, "loading", false);
+	const ripple = readonlyProp(_props, "ripple");
+	const type = readonlyProp(_props, "type", "button");
+	const onClick = readonlyProp(_props, "onClick");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const behavior = useButtonBehavior(() => ({
+		disabled: disabled.value,
+		loading: loading.value,
+		focusableWhenDisabled: focusableWhenDisabled.value,
+		ripple: ripple.value
+	}), () => onClick.value);
+	return () => createVNode("button", mergeAttrs({
+		sx: [
+			buttonBaseStyles.root,
+			focusRingStyles.visible,
+			rippleHostStyles.host,
+			interactionTransitions.colors,
+			disabled.value && buttonBaseStyles.disabled
+		],
+		type: type.value
+	}, rest, behavior()), [children.value]);
+}, {
+	name: "ButtonBase",
+	props: [
+		"disabled",
+		"focusableWhenDisabled",
+		"loading",
+		"ripple",
+		"type",
+		"onClick"
+	]
+});
+//#endregion
+export { ButtonBase };
+
+//# sourceMappingURL=ButtonBase.js.map

package/dist/base/ButtonBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonBase.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/ButtonBase.tsx"],"sourcesContent":["/**\n * 没有外观的按钮（button）：去掉浏览器的默认样式，统一焦点环、波纹、悬停与按下的颜色过渡，\n * 以及不可用（原生 disabled 或可聚焦的 aria-disabled）、加载中、状态 data 属性。\n * 菜单项、标签页、折叠面板的标题、步骤、表头的排序按钮这类“长得不像按钮的按钮”都建在它上面，\n * 外观由各组件经 sx 给出；要按钮外观时用 Button。\n *\n *   <ButtonBase sx={styles.trigger} aria-expanded={open} onClick={toggle}>{label}</ButtonBase>\n *\n * Button、IconButton、LinkButton 不包这一层（页面上按钮最多，少一层组件实例），\n * 但共用同一套样式（buttonBaseStyles）与行为（useButtonBehavior）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport type { VNodeChild } from 'vue';\nimport { rippleHostStyles } from '../utils/dom/ripple';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { interactionTransitions } from '../utils/style/transitions';\nimport type { ButtonManaged } from './Button';\nimport { buttonBaseStyles, useButtonBehavior } from './button-core';\n\n/** 不可用、忙碌由组件按 disabled、loading 管理（同 Button） */\nexport type ButtonBaseManaged = ButtonManaged;\n\n/** 未声明的属性落到 button 上 */\nexport interface ButtonBaseProps extends PartProps<'button', ButtonBaseManaged> {\n  /** 不可用：原生 disabled，不能聚焦 */\n  disabled?: boolean;\n  /** 不可用时仍可聚焦：改用 aria-disabled，点击无效（在一组键盘导航里不希望焦点跳过它时用） */\n  focusableWhenDisabled?: boolean;\n  /** 加载中：点击无效，带 aria-busy 与 data-loading（加载指示由使用方放进内容） */\n  loading?: boolean;\n  /** 按下时的波纹；不写时沿用 createUi / Provider 的 ripple */\n  ripple?: boolean;\n  /** 按钮类型，默认 button（不是浏览器默认的 submit） */\n  type?: 'button' | 'submit' | 'reset';\n  children?: VNodeChild;\n}\n\n/** 没有外观的按钮：焦点环、波纹、颜色过渡、不可用与加载中 */\nexport const ButtonBase = _component(\n  ({\n    disabled = false,\n    focusableWhenDisabled = false,\n    loading = false,\n    ripple,\n    type = 'button',\n    onClick,\n    children,\n    ...rest\n  }: ButtonBaseProps) => {\n    const behavior = useButtonBehavior(\n      () => ({ disabled, loading, focusableWhenDisabled, ripple }),\n      () => onClick,\n    );\n    return () => (\n      <button\n        {...mergeAttrs<'button'>(\n          {\n            sx: [\n              buttonBaseStyles.root,\n              focusRingStyles.visible,\n              rippleHostStyles.host,\n              interactionTransitions.colors,\n              disabled && buttonBaseStyles.disabled,\n            ],\n            type,\n          },\n          rest,\n          behavior(),\n        )}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;AAuCA,IAAa,aAAa,0BACxB,QAAA,SASuB;CAAA,MAAA,WAAAA,aAAA,QAAA,YARV,KAAK;CAAA,MAAA,wBAAAA,aAAA,QAAA,yBACQ,KAAK;CAAA,MAAA,UAAAA,aAAA,QAAA,WACnB,KAAK;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAER,QAAQ;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAGZ,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,WAAW,yBACR;EAAE,UAAQ,SAAA;EAAE,SAAO,QAAA;EAAE,uBAAqB,sBAAA;EAAE,QAAM,OAAA;CAAC,UAC1D,QAAA,KACF;CACA,aAAOC,YAAA,UAEC,WACF;EACE,IAAI;GACF,iBAAiB;GACjB,gBAAgB;GAChB,iBAAiB;GACjB,uBAAuB;GACvB,SAAA,SAAY,iBAAiB;EAAQ;EAEvC,MAAI,KAAA;CACN,GACA,MACA,SAAS,CACX,GAAC,CAAA,SAAA,KAAA,CAAA;AAKP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/base/ButtonGroup.d.ts

@@ -0,0 +1,24 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import { type AttachedOrientations } from '../utils/style/attached';
+import { type ButtonOptions } from './button-core';
+/** 角色由组件管理 */
+export type ButtonGroupManaged = 'role';
+/** 未声明的属性落到 div 上；aria-label 是这组操作的名称 */
+export interface ButtonGroupProps extends PartProps<'div', ButtonGroupManaged>, Pick<ButtonOptions, 'variant' | 'tone' | 'size' | 'radius'> {
+    /**
+     * 排列方向
+     * @default 'horizontal'
+     */
+    orientation?: keyof AttachedOrientations;
+    /** 按钮 */
+    children?: VNodeChild;
+}
+/** ButtonGroup 的样式：root、vertical */
+export declare const buttonGroupStyles: Readonly<{
+    root: css.CompiledStyles;
+    vertical: css.CompiledStyles;
+}>;
+/** 按钮组：相连的一排（或一列）按钮，共用外观 */
+export declare const ButtonGroup: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ButtonGroupProps>;

package/dist/base/ButtonGroup.js

@@ -0,0 +1,52 @@
+import { mergeAttrs } from "../utils/props.js";
+import { AttachedContext } from "../utils/style/attached.js";
+import { ButtonGroupContext } from "./button-core.js";
+import { createVNode } from "vue";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/base/ButtonGroup.tsx
+/** 角色由组件管理 */
+/** 未声明的属性落到 div 上；aria-label 是这组操作的名称 */
+/** ButtonGroup 的样式：root、vertical */
+var buttonGroupStyles = css.create({
+	root: {
+		display: "inline-flex",
+		alignItems: "stretch"
+	},
+	vertical: { flexDirection: "column" }
+});
+/** 按钮组：相连的一排（或一列）按钮，共用外观 */
+var ButtonGroup = /*#__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 orientation = readonlyProp(_props, "orientation", "horizontal");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	ButtonGroupContext.provide({ get appearance() {
+		return {
+			variant: variant.value,
+			tone: tone.value,
+			size: size.value,
+			radius: radius.value
+		};
+	} });
+	AttachedContext.provide({ get orientation() {
+		return orientation.value;
+	} });
+	return () => createVNode("div", mergeAttrs({ sx: [buttonGroupStyles.root, orientation.value === "vertical" && buttonGroupStyles.vertical] }, rest, { role: "group" }), [children.value]);
+}, {
+	name: "ButtonGroup",
+	props: [
+		"variant",
+		"tone",
+		"size",
+		"radius",
+		"orientation"
+	]
+});
+//#endregion
+export { ButtonGroup, buttonGroupStyles };
+
+//# sourceMappingURL=ButtonGroup.js.map

package/dist/base/ButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/ButtonGroup.tsx"],"sourcesContent":["/**\n * 按钮组（div，role=\"group\"）：几个相关的按钮连成一条，共用外观。分段操作、拆分按钮、翻页、对齐方式这类工具栏。\n *\n *   <ButtonGroup variant=\"outline\" tone=\"neutral\" aria-label=\"文字对齐\">\n *     <IconButton icon={AlignLeft} aria-label=\"左对齐\" />\n *     <IconButton icon={AlignCenter} aria-label=\"居中\" />\n *   </ButtonGroup>\n *\n * 组里的按钮家族（Button、LinkButton、IconButton…）经 AttachedContext 得知自己在组里：去掉相邻一侧的圆角、边框叠在一起；\n * 组上写的 variant、tone、size、radius 是组里按钮的默认值，按钮自己写的优先。\n * 实底（solid）的相邻按钮之间没有分隔，连成一条时用 outline、surface 更清楚。\n * 只是排一排、不相连的按钮用 Flex。选中其中一项（单选、多选）用 ToggleGroup。\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';\nimport { AttachedContext, type AttachedOrientations } from '../utils/style/attached';\nimport { ButtonGroupContext, type ButtonOptions } from './button-core';\n\n/** 角色由组件管理 */\nexport type ButtonGroupManaged = 'role';\n\n/** 未声明的属性落到 div 上；aria-label 是这组操作的名称 */\nexport interface ButtonGroupProps\n  extends\n    PartProps<'div', ButtonGroupManaged>,\n    Pick<ButtonOptions, 'variant' | 'tone' | 'size' | 'radius'> {\n  /**\n   * 排列方向\n   * @default 'horizontal'\n   */\n  orientation?: keyof AttachedOrientations;\n  /** 按钮 */\n  children?: VNodeChild;\n}\n\n/** ButtonGroup 的样式：root、vertical */\nexport const buttonGroupStyles = css.create({\n  root: { display: 'inline-flex', alignItems: 'stretch' },\n  vertical: { flexDirection: 'column' },\n});\n\n/** 按钮组：相连的一排（或一列）按钮，共用外观 */\nexport const ButtonGroup = _component(\n  ({\n    variant,\n    tone,\n    size,\n    radius,\n    orientation = 'horizontal',\n    children,\n    ...rest\n  }: ButtonGroupProps) => {\n    ButtonGroupContext.provide({\n      get appearance() {\n        return { variant, tone, size, radius };\n      },\n    });\n    AttachedContext.provide({\n      get orientation() {\n        return orientation;\n      },\n    });\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [buttonGroupStyles.root, orientation === 'vertical' && buttonGroupStyles.vertical],\n          },\n          rest,\n          { role: 'group' },\n        )}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;AAsCA,IAAa,oBAAoB,IAAI,OAAO;CAC1C,MAAM;EAAE,SAAS;EAAe,YAAY;CAAU;CACtD,UAAU,EAAE,eAAe,SAAS;AACtC,CAAC;;AAGD,IAAa,cAAc,0BACzB,QAAA,SAQwB;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,cAAAA,aAAA,QAAA,eAHR,YAAY;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAEvB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,mBAAmB,QAAQ,EACzB,IAAI,aAAa;EACf,OAAO;GAAE,SAAO,QAAA;GAAE,MAAI,KAAA;GAAE,MAAI,KAAA;GAAE,QAAM,OAAA;EAAC;CACvC,EACF,CAAC;CACD,gBAAgB,QAAQ,EACtB,IAAI,cAAc;EAChB,OAAA,YAAA;CACF,EACF,CAAC;CACD,aAAOC,YAAA,OAEC,WACF,EACE,IAAI,CAAC,kBAAkB,MAAM,YAAA,UAAgB,cAAc,kBAAkB,QAAQ,EACvF,GACA,MACA,EAAE,MAAM,QAAQ,CAClB,GAAC,CAAA,SAAA,KAAA,CAAA;AAKP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/base/CloseButton.d.ts

@@ -0,0 +1,15 @@
+import { type TsxComponent } from '@zerodep-dev/vue-tsx-pro-tsx';
+import type { Lang } from '../config/lang/lang';
+import { type IconButtonProps } from './IconButton';
+import type { IconData } from './Icon';
+/** 未声明的属性落到 IconButton 上；图标固定，名称默认取语言包 */
+export type PresetIconButtonProps = Omit<IconButtonProps, 'icon' | 'aria-label'> & {
+    /** 无障碍名称，默认取语言包（关闭 / 清空） */
+    'aria-label'?: string;
+};
+/** 预设图标与名称的图标按钮（CloseButton、ClearButton 由它生成）：名称默认取语言包，可以用 aria-label 覆盖 */
+export declare function createPresetIconButton(name: string, icon: IconData, label: (lang: Lang) => string): TsxComponent<PresetIconButtonProps>;
+/** 关闭按钮：X 图标，名称“关闭” */
+export declare const CloseButton: TsxComponent<PresetIconButtonProps>;
+/** 清空按钮：圆圈 X 图标，名称“清空”；输入框里清空内容用 */
+export declare const ClearButton: TsxComponent<PresetIconButtonProps>;

package/dist/base/CloseButton.js

@@ -0,0 +1,38 @@
+import { useLang } from "../config/context.js";
+import { IconButton } from "./IconButton.js";
+import { createVNode, mergeProps } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { CircleX, X } from "@lucide/icons";
+//#region src/base/CloseButton.tsx
+/**
+* 常用的图标按钮预设：CloseButton（关闭弹层、标签、提示条）与 ClearButton（清空输入）。
+* 图标来自 Lucide，无障碍名称取语言包（lang.close / lang.clear），也可以用 aria-label 改。
+* 同一个工厂生成，各是一个组件（COMPONENTS.md §1）。
+*
+*   <CloseButton onClick={close} />
+*   <ClearButton size="sm" onClick={() => (value = '')} />
+*/
+/** 未声明的属性落到 IconButton 上；图标固定，名称默认取语言包 */
+/** 预设图标与名称的图标按钮（CloseButton、ClearButton 由它生成）：名称默认取语言包，可以用 aria-label 覆盖 */
+function createPresetIconButton(name, icon, label) {
+	return /*#__PURE__*/ _component((_props, _ctx) => {
+		const ariaLabel = readonlyProp(_props, "ariaLabel");
+		const rest = restProps(_props, _ctx, true);
+		const lang = useLang();
+		return () => createVNode(IconButton, mergeProps(rest, {
+			"icon": icon,
+			"aria-label": ariaLabel.value ?? label(lang)
+		}), null);
+	}, {
+		props: ["ariaLabel"],
+		name
+	});
+}
+/** 关闭按钮：X 图标，名称“关闭” */
+var CloseButton = createPresetIconButton("CloseButton", X, (lang) => lang.close);
+/** 清空按钮：圆圈 X 图标，名称“清空”；输入框里清空内容用 */
+var ClearButton = createPresetIconButton("ClearButton", CircleX, (lang) => lang.clear);
+//#endregion
+export { ClearButton, CloseButton, createPresetIconButton };
+
+//# sourceMappingURL=CloseButton.js.map

package/dist/base/CloseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloseButton.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/base/CloseButton.tsx"],"sourcesContent":["/**\n * 常用的图标按钮预设：CloseButton（关闭弹层、标签、提示条）与 ClearButton（清空输入）。\n * 图标来自 Lucide，无障碍名称取语言包（lang.close / lang.clear），也可以用 aria-label 改。\n * 同一个工厂生成，各是一个组件（COMPONENTS.md §1）。\n *\n *   <CloseButton onClick={close} />\n *   <ClearButton size=\"sm\" onClick={() => (value = '')} />\n */\nimport { CircleX, X } from '@lucide/icons';\nimport { _component, type TsxComponent } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { useLang } from '../config/context';\nimport type { Lang } from '../config/lang/lang';\nimport { IconButton, type IconButtonProps } from './IconButton';\nimport type { IconData } from './Icon';\n\n/** 未声明的属性落到 IconButton 上；图标固定，名称默认取语言包 */\nexport type PresetIconButtonProps = Omit<IconButtonProps, 'icon' | 'aria-label'> & {\n  /** 无障碍名称，默认取语言包（关闭 / 清空） */\n  'aria-label'?: string;\n};\n\n/** 预设图标与名称的图标按钮（CloseButton、ClearButton 由它生成）：名称默认取语言包，可以用 aria-label 覆盖 */\nexport function createPresetIconButton(\n  name: string,\n  icon: IconData,\n  label: (lang: Lang) => string,\n): TsxComponent<PresetIconButtonProps> {\n  return _component(\n    ({ 'aria-label': ariaLabel, ...rest }: PresetIconButtonProps) => {\n      const lang = useLang();\n      return () => <IconButton {...rest} icon={icon} aria-label={ariaLabel ?? label(lang)} />;\n    },\n    { name },\n  );\n}\n\n/** 关闭按钮：X 图标，名称“关闭” */\nexport const CloseButton = createPresetIconButton('CloseButton', X, (lang) => lang.close);\n/** 清空按钮：圆圈 X 图标，名称“清空”；输入框里清空内容用 */\nexport const ClearButton = createPresetIconButton('ClearButton', CircleX, (lang) => lang.clear);\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,SAAgB,uBACd,MACA,MACA,OACqC;CACrC,OAAO,0BACL,QAAA,SAAiE;EAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;EAAA,MAAlC,OAAIC,UAAA,QAAA,MAAA,IAAA;EACjC,MAAM,OAAO,QAAQ;EACrB,aAAOC,YAAA,YAAAC,WAAsB,MAAI;GAAA,QAAQ;GAAI,cAAc,UAAA,SAAa,MAAM,IAAI;EAAC,CAAA,GAAA,IAAA;CACrF,GACA;EAAA,OAAA,CAAA,WAAA;EAAE;CAAK,CACT;AACF;;AAGA,IAAa,cAAc,uBAAuB,eAAe,IAAI,SAAS,KAAK,KAAK;;AAExF,IAAa,cAAc,uBAAuB,eAAe,UAAU,SAAS,KAAK,KAAK"}

package/dist/base/Code.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';
+/** 未声明的属性落到 code 上 */
+export interface CodeProps extends PartProps<'code'> {
+    children?: VNodeChild;
+}
+/** Code 的样式：root */
+export declare const codeStyles: Readonly<{
+    root: css.CompiledStyles;
+}>;
+/** 行内代码（code）：命令、文件名、标识符；等宽字体，长内容可在任意位置换行 */
+export declare const Code: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<CodeProps>;

package/dist/base/Code.js

@@ -0,0 +1,27 @@
+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/Code.tsx
+/** 未声明的属性落到 code 上 */
+/** Code 的样式：root */
+var codeStyles = css.create({ root: {
+	paddingInline: "_xs",
+	borderRadius: "_sm",
+	backgroundColor: "_fill",
+	color: "_text",
+	fontFamily: "_mono",
+	fontVariantLigatures: "none",
+	fontSize: "0.9em",
+	overflowWrap: "anywhere"
+} });
+/** 行内代码（code）：命令、文件名、标识符；等宽字体，长内容可在任意位置换行 */
+var Code = /*#__PURE__*/ _component((_props, _ctx) => {
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	return () => createVNode("code", mergeAttrs({ sx: codeStyles.root }, rest), [children.value]);
+}, { name: "Code" });
+//#endregion
+export { Code, codeStyles };
+
+//# sourceMappingURL=Code.js.map

package/dist/base/Code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Code.js","names":["_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/Code.tsx"],"sourcesContent":["/**\n * 行内代码：等宽字体、浅底。多行代码用 CodeBlock。\n *\n *   运行 <Code>pnpm install</Code> 安装依赖\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/** 未声明的属性落到 code 上 */\nexport interface CodeProps extends PartProps<'code'> {\n  children?: VNodeChild;\n}\n\n/** Code 的样式：root */\nexport const codeStyles = css.create({\n  root: {\n    paddingInline: '_xs',\n    borderRadius: '_sm',\n    backgroundColor: '_fill',\n    color: '_text',\n    fontFamily: '_mono',\n    // 代码字体的连字（=> 显示成 ⇒）会让照着抄的人看错，一律关掉\n    fontVariantLigatures: 'none',\n    // 相对周围文字略小：等宽字体的字面显得大；是比例不是字号档位\n    fontSize: '0.9em',\n    // 长命令、长路径可以在任意位置换行，不撑破容器\n    overflowWrap: 'anywhere',\n  },\n});\n\n/** 行内代码（code）：命令、文件名、标识符；等宽字体，长内容可在任意位置换行 */\nexport const Code = _component(({ children, ...rest }: CodeProps) => () => (\n  <code {...mergeAttrs<'code'>({ sx: codeStyles.root }, rest)}>{children}</code>\n));\n"],"mappings":";;;;;;;AAgBA,IAAa,aAAa,IAAI,OAAO,EACnC,MAAM;CACJ,eAAe;CACf,cAAc;CACd,iBAAiB;CACjB,OAAO;CACP,YAAY;CAEZ,sBAAsB;CAEtB,UAAU;CAEV,cAAc;AAChB,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"}