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

package/dist/docs-kit/PropsTable.js

@@ -0,0 +1,122 @@
+import { hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Badge } from "../base/Badge.js";
+import { Code } from "../base/Code.js";
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeaderCell, TableRow } from "../table/Table.js";
+import { useMessages } from "../config/lang/messages.js";
+import { docsKitMessages } from "./messages.js";
+import { createTextVNode, createVNode, mergeProps, 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";
+//#region src/docs-kit/PropsTable.tsx
+/** prop 的种类：文档里分开列出 */
+/** 档位类 prop 的一个可选值 */
+/** 一个 prop 的文档数据 */
+/** 一个组件的 API 文档数据 */
+/** 未声明的属性落到 table 上 */
+/** PropsTable 的样式：name、nameCode、head、descriptionCell、type、muted、description、values、valueTerm、valueText */
+var propsTableStyles = css.create({
+	name: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "_xs"
+	},
+	nameCode: { whiteSpace: "nowrap" },
+	head: { whiteSpace: "nowrap" },
+	descriptionCell: { minWidth: "18rem" },
+	type: { color: "_codeType" },
+	muted: { color: "_textMuted" },
+	description: { margin: 0 },
+	values: {
+		display: "grid",
+		gridTemplateColumns: "max-content 1fr",
+		columnGap: "_md",
+		rowGap: "_xs",
+		margin: 0,
+		marginBlockStart: "_sm",
+		fontSize: "_sm"
+	},
+	valueTerm: { margin: 0 },
+	valueText: {
+		margin: 0,
+		color: "_textMuted"
+	}
+});
+/** 组件 API 的表格：名称、类型、默认值、说明与可选值 */
+var PropsTable = /*#__PURE__*/ _component((_props, _ctx) => {
+	const props = readonlyProp(_props, "props");
+	const caption = readonlyProp(_props, "caption");
+	const rest = restProps(_props, _ctx, true);
+	const messages = useMessages("docsKit", docsKitMessages);
+	return () => createVNode(Table, mergeProps(mergePartProps({ density: "compact" }, rest), { "key": "__site8" }), {
+		default: () => [
+			hasContent(caption.value) && createVNode(TableCaption, { "key": "__site0" }, {
+				default: () => [unref(caption)],
+				$stable: true
+			}),
+			createVNode(TableHead, { "key": "__site6" }, {
+				default: () => [createVNode(TableRow, { "key": "__site5" }, {
+					default: () => [
+						createVNode(TableHeaderCell, {
+							"sx": propsTableStyles.head,
+							"key": "__site1"
+						}, {
+							default: () => [messages.name],
+							$stable: true
+						}),
+						createVNode(TableHeaderCell, {
+							"sx": propsTableStyles.head,
+							"key": "__site2"
+						}, {
+							default: () => [messages.type],
+							$stable: true
+						}),
+						createVNode(TableHeaderCell, {
+							"sx": propsTableStyles.head,
+							"key": "__site3"
+						}, {
+							default: () => [messages.defaultValue],
+							$stable: true
+						}),
+						createVNode(TableHeaderCell, {
+							"sx": propsTableStyles.head,
+							"key": "__site4"
+						}, {
+							default: () => [messages.description],
+							$stable: true
+						})
+					],
+					$stable: true
+				})],
+				$stable: true
+			}),
+			createVNode(TableBody, { "key": "__site7" }, {
+				default: () => [props.value.map((prop) => createVNode(TableRow, { "key": prop.name }, { default: () => [
+					createVNode(TableCell, null, { default: () => [createVNode("span", mergeAttrs({ sx: propsTableStyles.name }), [
+						createVNode(Code, { "sx": propsTableStyles.nameCode }, { default: () => [prop.name] }),
+						prop.required && createVNode(Badge, { "tone": "warning" }, {
+							default: () => [messages.required],
+							$stable: true
+						}),
+						prop.bindable && createVNode(Badge, { "tone": "accent" }, {
+							default: () => [messages.bindable],
+							$stable: true
+						})
+					])] }),
+					createVNode(TableCell, null, { default: () => [createVNode(Code, { "sx": propsTableStyles.type }, { default: () => [prop.type] })] }),
+					createVNode(TableCell, { "nowrap": true }, { default: () => [prop.default != null ? createVNode(Code, null, { default: () => [prop.default] }) : createVNode("span", mergeAttrs({ sx: propsTableStyles.muted }), [createTextVNode("—")])] }),
+					createVNode(TableCell, { "sx": propsTableStyles.descriptionCell }, { default: () => [createVNode("p", mergeAttrs({ sx: propsTableStyles.description }), [prop.description]), prop.values && prop.values.some((value) => value.description) && createVNode("dl", mergeAttrs({ sx: propsTableStyles.values }), [prop.values.map((value) => [createVNode("dt", mergeProps({ "key": `${value.value}-term` }, mergeAttrs({ sx: propsTableStyles.valueTerm })), [createVNode(Code, null, { default: () => [value.value] })]), createVNode("dd", mergeProps({ "key": `${value.value}-text` }, mergeAttrs({ sx: propsTableStyles.valueText })), [value.description])])])] })
+				] }))],
+				$stable: true
+			})
+		],
+		$stable: true
+	});
+}, {
+	name: "PropsTable",
+	props: ["props", "caption"]
+});
+//#endregion
+export { PropsTable, propsTableStyles };
+
+//# sourceMappingURL=PropsTable.js.map

package/dist/docs-kit/PropsTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PropsTable.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps","_vue_unref","_createTextVNode"],"sources":["../../src/docs-kit/PropsTable.tsx"],"sourcesContent":["/**\n * 组件 API 的表格：一行一个 prop，列出名称、类型、默认值与说明；档位类的 prop 在说明下列出每个可选值的含义。\n * 文档站用它展示从类型与 JSDoc 生成的数据（ComponentApi），也可以手写数据给自己的组件做文档。\n *\n *   <PropsTable props={api.props.filter((prop) => prop.kind === 'prop')} />\n *\n * 必填的 prop 名称旁标“必填”，能 `_bind` 双向绑定的标“可绑定”（文案见 messages.ts）。外层是静态表格 Table，窄屏时横向滚动。\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 { Badge } from '../base/Badge';\nimport { Code } from '../base/Code';\nimport { useMessages } from '../config/lang/messages';\nimport { hasContent, mergeAttrs, mergePartProps } from '../utils/props';\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeaderCell,\n  TableRow,\n  type TableProps,\n} from '../table/Table';\nimport { docsKitMessages } from './messages';\n\n/** prop 的种类：文档里分开列出 */\nexport interface ApiPropKinds {\n  /** 普通属性：外观、状态、数据 */\n  prop: unknown;\n  /** 部件属性（propsXxx）：透传给内部的某个部件 */\n  part: unknown;\n  /** 事件（onXxx） */\n  event: unknown;\n  /** 内容：children 与渲染函数（renderXxx） */\n  content: unknown;\n}\n\n/** 档位类 prop 的一个可选值 */\nexport interface ApiValue {\n  /** 取值 */\n  value: string;\n  /** 这个值的含义；没有注释时为空 */\n  description: string;\n}\n\n/** 一个 prop 的文档数据 */\nexport interface ApiProp {\n  /** 名称 */\n  name: string;\n  /** 种类 */\n  kind: keyof ApiPropKinds;\n  /** 类型（源码里写的样子，如 `keyof ButtonVariants`） */\n  type: string;\n  /** 必填 */\n  required: boolean;\n  /** 默认值（源码表达式，如 `'button'`、`false`）；没有时不显示 */\n  default?: string;\n  /** 能用 `_bind` 双向绑定 */\n  bindable?: boolean;\n  /** 说明 */\n  description: string;\n  /** 档位类的可选值与各自的含义 */\n  values?: ApiValue[];\n}\n\n/** 一个组件的 API 文档数据 */\nexport interface ComponentApi {\n  /** Props 接口的名字 */\n  name: string;\n  /** 组件名：ButtonProps → Button；泛型组件的 SelectBaseProps → Select */\n  component: string;\n  /** 接口的说明（如“未声明的属性落到 button 上”） */\n  description: string;\n  /** 各个 prop */\n  props: ApiProp[];\n}\n\n/** 未声明的属性落到 table 上 */\nexport interface PropsTableProps extends TableProps {\n  /** 要列出的 prop */\n  props: readonly ApiProp[];\n  /** 表格标题（caption），同时是表格的名称 */\n  caption?: VNodeChild;\n}\n\n/** PropsTable 的样式：name、nameCode、head、descriptionCell、type、muted、description、values、valueTerm、valueText */\nexport const propsTableStyles = css.create({\n  name: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '_xs' },\n  // 属性名不断开：Code 默认可以在任意位置换行，表格会按它把名称列压到最窄\n  nameCode: { whiteSpace: 'nowrap' },\n  // 表头都很短，中文会在任意字间断开（“默认 / 值”）\n  head: { whiteSpace: 'nowrap' },\n  // 说明是最长的一列：至少留出一段可读的宽度，类型再长也不挤掉它\n  descriptionCell: { minWidth: '18rem' },\n  type: { color: '_codeType' },\n  muted: { color: '_textMuted' },\n  description: { margin: 0 },\n  values: {\n    display: 'grid',\n    gridTemplateColumns: 'max-content 1fr',\n    columnGap: '_md',\n    rowGap: '_xs',\n    margin: 0,\n    marginBlockStart: '_sm',\n    fontSize: '_sm',\n  },\n  valueTerm: { margin: 0 },\n  valueText: { margin: 0, color: '_textMuted' },\n});\n\n/** 组件 API 的表格：名称、类型、默认值、说明与可选值 */\nexport const PropsTable = _component(({ props, caption, ...rest }: PropsTableProps) => {\n  const messages = useMessages('docsKit', docsKitMessages);\n  return () => (\n    <Table {...mergePartProps<TableProps>({ density: 'compact' }, rest)}>\n      {hasContent(caption) && <TableCaption>{caption}</TableCaption>}\n      <TableHead>\n        <TableRow>\n          <TableHeaderCell sx={propsTableStyles.head}>{messages.name}</TableHeaderCell>\n          <TableHeaderCell sx={propsTableStyles.head}>{messages.type}</TableHeaderCell>\n          <TableHeaderCell sx={propsTableStyles.head}>{messages.defaultValue}</TableHeaderCell>\n          <TableHeaderCell sx={propsTableStyles.head}>{messages.description}</TableHeaderCell>\n        </TableRow>\n      </TableHead>\n      <TableBody>\n        {props.map((prop) => (\n          <TableRow key={prop.name}>\n            <TableCell>\n              <span {...mergeAttrs<'span'>({ sx: propsTableStyles.name })}>\n                <Code sx={propsTableStyles.nameCode}>{prop.name}</Code>\n                {prop.required && <Badge tone=\"warning\">{messages.required}</Badge>}\n                {prop.bindable && <Badge tone=\"accent\">{messages.bindable}</Badge>}\n              </span>\n            </TableCell>\n            <TableCell>\n              <Code sx={propsTableStyles.type}>{prop.type}</Code>\n            </TableCell>\n            <TableCell nowrap>\n              {prop.default != null ? (\n                <Code>{prop.default}</Code>\n              ) : (\n                <span {...mergeAttrs<'span'>({ sx: propsTableStyles.muted })}>—</span>\n              )}\n            </TableCell>\n            <TableCell sx={propsTableStyles.descriptionCell}>\n              <p {...mergeAttrs<'p'>({ sx: propsTableStyles.description })}>{prop.description}</p>\n              {prop.values && prop.values.some((value) => value.description) && (\n                <dl {...mergeAttrs<'dl'>({ sx: propsTableStyles.values })}>\n                  {prop.values.map((value) => [\n                    <dt\n                      key={`${value.value}-term`}\n                      {...mergeAttrs<'dt'>({ sx: propsTableStyles.valueTerm })}\n                    >\n                      <Code>{value.value}</Code>\n                    </dt>,\n                    <dd\n                      key={`${value.value}-text`}\n                      {...mergeAttrs<'dd'>({ sx: propsTableStyles.valueText })}\n                    >\n                      {value.description}\n                    </dd>,\n                  ])}\n                </dl>\n              )}\n            </TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  );\n});\n"],"mappings":"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"}

package/dist/docs-kit/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 文档站组件（子路径 `@zerodep-dev/vue-tsx-pro-ui/docs-kit`）：给组件写文档的页面用，业务界面用不到，不放在主入口。
+ *
+ *   import { CodePreview, PropsTable } from '@zerodep-dev/vue-tsx-pro-ui/docs-kit';
+ *
+ * 文案自带中英文（messages.ts），别的语言在 Lang.messages.docsKit 里补。
+ * 代码块 CodeBlock、标题锚点、页内目录 TableOfContents、翻页 Pager 在主入口：帮助中心、文章页也用得上。
+ */
+export { CodeGroup, codeGroupStyles, type CodeGroupItem, type CodeGroupProps } from './CodeGroup';
+export { CodePreview, codePreviewStyles, type CodePreviewAligns, type CodePreviewProps, } from './CodePreview';
+export { ColorSwatch, colorSwatchDynamicStyles, colorSwatchStyles, type ColorSwatchProps, } from './ColorSwatch';
+export { PropsTable, propsTableStyles, type ApiProp, type ApiPropKinds, type ApiValue, type ComponentApi, type PropsTableProps, } from './PropsTable';
+export { docsKitMessages, type DocsKitMessages } from './messages';

package/dist/docs-kit/index.js

@@ -0,0 +1,6 @@
+import { CodeGroup, codeGroupStyles } from "./CodeGroup.js";
+import { docsKitMessages } from "./messages.js";
+import { CodePreview, codePreviewStyles } from "./CodePreview.js";
+import { ColorSwatch, colorSwatchDynamicStyles, colorSwatchStyles } from "./ColorSwatch.js";
+import { PropsTable, propsTableStyles } from "./PropsTable.js";
+export { CodeGroup, CodePreview, ColorSwatch, PropsTable, codeGroupStyles, codePreviewStyles, colorSwatchDynamicStyles, colorSwatchStyles, docsKitMessages, propsTableStyles };

package/dist/docs-kit/messages.d.ts

@@ -0,0 +1,25 @@
+/** 文档站组件（CodePreview、PropsTable）自带的文案：不在 Lang 里，新增一种语言不必翻（见 config/lang/messages.ts） */
+import type { MessageTable } from '../config/lang/messages';
+/** 文档站组件的文案 */
+export interface DocsKitMessages {
+    /** CodePreview：预览区域的名称，默认“预览” */
+    readonly preview: string;
+    /** CodePreview：显示源码的按钮，默认“显示代码” */
+    readonly showCode: string;
+    /** CodePreview：收起源码的按钮，默认“隐藏代码” */
+    readonly hideCode: string;
+    /** PropsTable：“名称”一列的表头，默认“名称” */
+    readonly name: string;
+    /** PropsTable：“类型”一列的表头，默认“类型” */
+    readonly type: string;
+    /** PropsTable：“默认值”一列的表头，默认“默认值” */
+    readonly defaultValue: string;
+    /** PropsTable：“说明”一列的表头，默认“说明” */
+    readonly description: string;
+    /** PropsTable：必填的 prop 的标记，默认“必填” */
+    readonly required: string;
+    /** PropsTable：能 _bind 双向绑定的 prop 的标记，默认“可绑定” */
+    readonly bindable: string;
+}
+/** 文档站组件的文案表 */
+export declare const docsKitMessages: MessageTable<DocsKitMessages>;

package/dist/docs-kit/messages.js

@@ -0,0 +1,30 @@
+//#region src/docs-kit/messages.ts
+/** 文档站组件的文案表 */
+var docsKitMessages = {
+	"zh-CN": {
+		preview: "预览",
+		showCode: "显示代码",
+		hideCode: "隐藏代码",
+		name: "名称",
+		type: "类型",
+		defaultValue: "默认值",
+		description: "说明",
+		required: "必填",
+		bindable: "可绑定"
+	},
+	"en-US": {
+		preview: "Preview",
+		showCode: "Show code",
+		hideCode: "Hide code",
+		name: "Name",
+		type: "Type",
+		defaultValue: "Default",
+		description: "Description",
+		required: "Required",
+		bindable: "Bindable"
+	}
+};
+//#endregion
+export { docsKitMessages };
+
+//# sourceMappingURL=messages.js.map

package/dist/docs-kit/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","names":[],"sources":["../../src/docs-kit/messages.ts"],"sourcesContent":["/** 文档站组件（CodePreview、PropsTable）自带的文案：不在 Lang 里，新增一种语言不必翻（见 config/lang/messages.ts） */\nimport type { MessageTable } from '../config/lang/messages';\n\n/** 文档站组件的文案 */\nexport interface DocsKitMessages {\n  /** CodePreview：预览区域的名称，默认“预览” */\n  readonly preview: string;\n  /** CodePreview：显示源码的按钮，默认“显示代码” */\n  readonly showCode: string;\n  /** CodePreview：收起源码的按钮，默认“隐藏代码” */\n  readonly hideCode: string;\n  /** PropsTable：“名称”一列的表头，默认“名称” */\n  readonly name: string;\n  /** PropsTable：“类型”一列的表头，默认“类型” */\n  readonly type: string;\n  /** PropsTable：“默认值”一列的表头，默认“默认值” */\n  readonly defaultValue: string;\n  /** PropsTable：“说明”一列的表头，默认“说明” */\n  readonly description: string;\n  /** PropsTable：必填的 prop 的标记，默认“必填” */\n  readonly required: string;\n  /** PropsTable：能 _bind 双向绑定的 prop 的标记，默认“可绑定” */\n  readonly bindable: string;\n}\n\n/** 文档站组件的文案表 */\nexport const docsKitMessages: MessageTable<DocsKitMessages> = {\n  'zh-CN': {\n    preview: '预览',\n    showCode: '显示代码',\n    hideCode: '隐藏代码',\n    name: '名称',\n    type: '类型',\n    defaultValue: '默认值',\n    description: '说明',\n    required: '必填',\n    bindable: '可绑定',\n  },\n  'en-US': {\n    preview: 'Preview',\n    showCode: 'Show code',\n    hideCode: 'Hide code',\n    name: 'Name',\n    type: 'Type',\n    defaultValue: 'Default',\n    description: 'Description',\n    required: 'Required',\n    bindable: 'Bindable',\n  },\n};\n"],"mappings":";;AA0BA,IAAa,kBAAiD;CAC5D,SAAS;EACP,SAAS;EACT,UAAU;EACV,UAAU;EACV,MAAM;EACN,MAAM;EACN,cAAc;EACd,aAAa;EACb,UAAU;EACV,UAAU;CACZ;CACA,SAAS;EACP,SAAS;EACT,UAAU;EACV,UAAU;EACV,MAAM;EACN,MAAM;EACN,cAAc;EACd,aAAa;EACb,UAAU;EACV,UAAU;CACZ;AACF"}

package/dist/feedback/Alert.d.ts

@@ -0,0 +1,83 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PresetIconButtonProps } from '../base/CloseButton';
+import { type IconData, type IconProps } from '../base/Icon';
+import { type SpinnerProps } from '../base/Spinner';
+import { type PartProps } from '../utils/props';
+import { type StatusTone } from '../utils/style/tone-styles';
+import { type TextSize } from '../utils/style/typography';
+import { type Radius } from '../utils/style/styles';
+/** 提示条的样式（实底不用于大块文字，不提供） */
+export interface AlertVariants {
+    /** 浅色底（默认） */
+    soft: unknown;
+    /** 浅色底加描边 */
+    surface: unknown;
+    /** 只有描边 */
+    outline: unknown;
+}
+/** 读屏怎样播报出现的提示 */
+export interface AlertLives {
+    /** 不主动播报（默认）：页面加载时就在的提示 */
+    off: unknown;
+    /** 礼貌播报（role="status"）：等读屏念完当前内容再念，如“已保存” */
+    polite: unknown;
+    /** 立即播报（role="alert"）：打断当前朗读，只用于错误等紧急信息 */
+    assertive: unknown;
+}
+/** 提示条的外观选项；可以用 createUi / Provider 的 defaults.Alert 统一改默认值 */
+export interface AlertOptions {
+    /** 样式，默认 soft */
+    variant?: keyof AlertVariants;
+    /** 圆角，默认 md；贴着页面顶部的通栏写 none */
+    radius?: Radius;
+}
+/** 角色由 live 决定，忙碌由 loading 决定；原生的 title 属性（悬停提示）让给标题 */
+export type AlertManaged = 'role' | 'title' | 'aria-busy';
+/** 未声明的属性落到外层 div 上 */
+export interface AlertProps extends PartProps<'div', AlertManaged>, AlertOptions {
+    /** 色调，默认 info */
+    tone?: StatusTone;
+    /** 字号档位：图标、内边距随之缩放；不写时继承上下文字号 */
+    size?: TextSize;
+    /** 标题（加粗的第一行） */
+    title?: VNodeChild;
+    /** 说明（标题下面的正文）；不写时 children 就是说明 */
+    description?: VNodeChild;
+    /** 图标；不写时按色调选，false 不显示 */
+    icon?: IconData | false;
+    /** 进行中（如“正在上传”）：图标换成加载指示，带 aria-busy */
+    loading?: boolean;
+    /** 读屏播报方式，默认 off */
+    live?: keyof AlertLives;
+    /** 右侧的操作（如“重试”按钮） */
+    action?: VNodeChild;
+    /** 给了就显示关闭按钮：点击后提示条先淡出，离场结束再调用；提示条随后被移除时，焦点交给相邻的可聚焦元素；没被移除就重新显示 */
+    onClose?: () => void;
+    /** 图标的部件属性 */
+    propsIcon?: Partial<IconProps>;
+    /** 加载指示（loading 时代替图标）的部件属性 */
+    propsSpinner?: Partial<SpinnerProps>;
+    /** 文字区（标题与正文的容器）的部件属性 */
+    propsBody?: PartProps<'div'>;
+    /** 标题的部件属性 */
+    propsTitle?: PartProps<'div'>;
+    /** 说明（标题下面的正文）的部件属性 */
+    propsDescription?: PartProps<'div'>;
+    /** 额外内容（同时给了 description 与 children 时的 children）的部件属性 */
+    propsContent?: PartProps<'div'>;
+    /** 操作区的部件属性 */
+    propsAction?: PartProps<'div'>;
+    /** 关闭按钮的部件属性 */
+    propsClose?: Partial<PresetIconButtonProps>;
+    children?: VNodeChild;
+}
+/**
+ * 提示条的配方：各部件的布局。样式 × 色调的颜色来自共用的 statusToneStyles（直接写主题 token 的表），
+ * 排在配方之前，createUi / Provider 的 styles.Alert 能盖过它
+ */
+export declare const alertRecipe: css.Recipe<"action" | "body" | "close" | "content" | "description" | "icon" | "root" | "title", {}>;
+/** 提示条的部件（createUi / Provider 的 styles.Alert 按它定制） */
+export type AlertPart = (typeof alertRecipe.parts)[number];
+/** 提示条：图标 + 标题 + 正文 + 操作 + 关闭 */
+export declare const Alert: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<AlertProps>;

package/dist/feedback/Alert.js

@@ -0,0 +1,179 @@
+import { t } from "../config/theme/tokens.js";
+import { useDefaults } from "../config/defaults.js";
+import { hasContent, mergeAttrs, mergePartProps, mergeProps as mergeProps$1 } from "../utils/props.js";
+import { fontSizeStyles, relativeFontSizeStyles } from "../utils/style/typography.js";
+import { radiusStyles } from "../utils/style/styles.js";
+import { useRecipe } from "../config/styles.js";
+import { Icon } from "../base/Icon.js";
+import { Spinner } from "../base/Spinner.js";
+import { presenceStyles } from "../utils/style/transitions.js";
+import { CloseButton } from "../base/CloseButton.js";
+import { statusIcons, statusToneSx } from "../utils/style/tone-styles.js";
+import { useDismissible } from "../utils/motion/presence.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/feedback/Alert.tsx
+/** 提示条的样式（实底不用于大块文字，不提供） */
+/** 读屏怎样播报出现的提示 */
+/** 提示条的外观选项；可以用 createUi / Provider 的 defaults.Alert 统一改默认值 */
+/** 角色由 live 决定，忙碌由 loading 决定；原生的 title 属性（悬停提示）让给标题 */
+/** 未声明的属性落到外层 div 上 */
+/**
+* 提示条的配方：各部件的布局。样式 × 色调的颜色来自共用的 statusToneStyles（直接写主题 token 的表），
+* 排在配方之前，createUi / Provider 的 styles.Alert 能盖过它
+*/
+var alertRecipe = css.recipe({
+	name: "Alert",
+	parts: [
+		"root",
+		"icon",
+		"body",
+		"title",
+		"description",
+		"content",
+		"action",
+		"close"
+	],
+	base: {
+		root: {
+			boxSizing: "border-box",
+			display: "flex",
+			alignItems: "flex-start",
+			gap: "_sm",
+			padding: "_md",
+			lineHeight: "_normal"
+		},
+		icon: {
+			flexShrink: 0,
+			marginBlock: "0.25em"
+		},
+		body: {
+			flexGrow: 1,
+			minWidth: 0,
+			display: "grid",
+			gap: "_xs"
+		},
+		title: { fontWeight: "_semibold" },
+		description: { color: "_text" },
+		content: { minWidth: 0 },
+		action: {
+			flexShrink: 0,
+			alignSelf: "center"
+		},
+		close: {
+			flexShrink: 0,
+			marginBlock: `calc(-1 * ${t.space.xs})`,
+			color: "inherit"
+		}
+	}
+});
+/** 提示条的部件（createUi / Provider 的 styles.Alert 按它定制） */
+var ROLES = {
+	off: void 0,
+	polite: "status",
+	assertive: "alert"
+};
+/** 提示条：图标 + 标题 + 正文 + 操作 + 关闭 */
+var Alert = /*#__PURE__*/ _component((_props, _ctx) => {
+	const variant = readonlyProp(_props, "variant");
+	const radius = readonlyProp(_props, "radius");
+	const tone = readonlyProp(_props, "tone", "info");
+	const size = readonlyProp(_props, "size");
+	const title = readonlyProp(_props, "title");
+	const description = readonlyProp(_props, "description");
+	const icon = readonlyProp(_props, "icon");
+	const loading = readonlyProp(_props, "loading", false);
+	const live = readonlyProp(_props, "live", "off");
+	const action = readonlyProp(_props, "action");
+	const onClose = readonlyProp(_props, "onClose");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsSpinner = readonlyProp(_props, "propsSpinner");
+	const propsBody = readonlyProp(_props, "propsBody");
+	const propsTitle = readonlyProp(_props, "propsTitle");
+	const propsDescription = readonlyProp(_props, "propsDescription");
+	const propsContent = readonlyProp(_props, "propsContent");
+	const propsAction = readonlyProp(_props, "propsAction");
+	const propsClose = readonlyProp(_props, "propsClose");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const appearance = useDefaults("Alert", () => ({
+		variant: variant.value,
+		radius: radius.value
+	}), {
+		variant: "soft",
+		radius: "md"
+	});
+	const recipe = useRecipe(alertRecipe);
+	const dismissible = useDismissible(() => onClose.value?.());
+	return () => {
+		const { variant: shownVariant, radius: shownRadius } = appearance();
+		const s = recipe({
+			variant: shownVariant,
+			tone: tone.value
+		});
+		const shownIcon = icon.value === false ? void 0 : icon.value ?? statusIcons[tone.value];
+		const extra = hasContent(description.value) && hasContent(children.value);
+		const text = hasContent(description.value) ? description.value : children.value;
+		return createVNode("div", mergeProps(mergeAttrs({
+			...s.root,
+			sx: [
+				statusToneSx(shownVariant, tone.value),
+				s.root.sx,
+				presenceStyles.fade,
+				radiusStyles[shownRadius],
+				size.value && fontSizeStyles[size.value],
+				dismissible.dismissing && presenceStyles.leaving
+			]
+		}, rest, {
+			ref: dismissible.ref,
+			role: ROLES[live.value],
+			"aria-busy": loading.value || void 0
+		}), {
+			"data-tone": tone.value,
+			"data-state": dismissible.state
+		}), [
+			loading.value ? createVNode(Spinner, mergePartProps(s.icon, propsSpinner.value), null) : shownIcon && createVNode(Icon, mergePartProps({
+				...s.icon,
+				icon: shownIcon
+			}, propsIcon.value), null),
+			createVNode("div", mergeAttrs(s.body, propsBody.value), [
+				hasContent(title.value) && createVNode("div", mergeAttrs(s.title, propsTitle.value), [title.value]),
+				hasContent(text) && createVNode("div", mergeAttrs(s.description, propsDescription.value), [text]),
+				extra && createVNode("div", mergeAttrs(s.content, propsContent.value), [children.value])
+			]),
+			hasContent(action.value) && createVNode("div", mergeAttrs(s.action, propsAction.value), [action.value]),
+			onClose.value && createVNode(CloseButton, mergeProps$1({
+				...s.close,
+				sx: [s.close.sx, relativeFontSizeStyles.sm]
+			}, propsClose.value, { onClick: dismissible.dismiss }), null)
+		]);
+	};
+}, {
+	name: "Alert",
+	props: [
+		"variant",
+		"radius",
+		"tone",
+		"size",
+		"title",
+		"description",
+		"icon",
+		"loading",
+		"live",
+		"action",
+		"onClose",
+		"propsIcon",
+		"propsSpinner",
+		"propsBody",
+		"propsTitle",
+		"propsDescription",
+		"propsContent",
+		"propsAction",
+		"propsClose"
+	]
+});
+//#endregion
+export { Alert, alertRecipe };
+
+//# sourceMappingURL=Alert.js.map

package/dist/feedback/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps","mergeProps"],"sources":["../../src/feedback/Alert.tsx"],"sourcesContent":["/**\n * 提示条（div）：页面或区块里的说明、成功、警告、错误信息。图标按色调自动选（Lucide），可以换或去掉；可以关闭。\n *\n *   <Alert tone=\"warning\" title=\"即将过期\">你的订阅将在 3 天后到期。</Alert>\n *   <Alert tone=\"danger\" live=\"assertive\" onClose={dismiss}>保存失败，请重试</Alert>\n *   <Alert tone=\"info\" title=\"导入完成\" description=\"成功 120 条，失败 3 条。\"><Link href=\"#log\">查看失败原因</Link></Alert>\n *\n * 说明写在 description 或 children 上（同 Empty、Result 的 description）；两个都给时 children 是说明下面的额外内容。\n *\n * 页面加载时就在的提示不需要读屏打断；操作后才出现的用 live 让读屏播报。\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 { CloseButton, type PresetIconButtonProps } from '../base/CloseButton';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { Spinner, type SpinnerProps } from '../base/Spinner';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { useDismissible } from '../utils/motion/presence';\nimport { hasContent, mergeAttrs, mergePartProps, mergeProps, type PartProps } from '../utils/props';\nimport { statusIcons, statusToneSx, type StatusTone } from '../utils/style/tone-styles';\nimport { presenceStyles } from '../utils/style/transitions';\nimport { fontSizeStyles, relativeFontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { radiusStyles, type Radius } from '../utils/style/styles';\nimport { t } from '../config/theme/tokens';\n\n/** 提示条的样式（实底不用于大块文字，不提供） */\nexport interface AlertVariants {\n  /** 浅色底（默认） */\n  soft: unknown;\n  /** 浅色底加描边 */\n  surface: unknown;\n  /** 只有描边 */\n  outline: unknown;\n}\n\n/** 读屏怎样播报出现的提示 */\nexport interface AlertLives {\n  /** 不主动播报（默认）：页面加载时就在的提示 */\n  off: unknown;\n  /** 礼貌播报（role=\"status\"）：等读屏念完当前内容再念，如“已保存” */\n  polite: unknown;\n  /** 立即播报（role=\"alert\"）：打断当前朗读，只用于错误等紧急信息 */\n  assertive: unknown;\n}\n\n/** 提示条的外观选项；可以用 createUi / Provider 的 defaults.Alert 统一改默认值 */\nexport interface AlertOptions {\n  /** 样式，默认 soft */\n  variant?: keyof AlertVariants;\n  /** 圆角，默认 md；贴着页面顶部的通栏写 none */\n  radius?: Radius;\n}\n\n/** 角色由 live 决定，忙碌由 loading 决定；原生的 title 属性（悬停提示）让给标题 */\nexport type AlertManaged = 'role' | 'title' | 'aria-busy';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface AlertProps extends PartProps<'div', AlertManaged>, AlertOptions {\n  /** 色调，默认 info */\n  tone?: StatusTone;\n  /** 字号档位：图标、内边距随之缩放；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 标题（加粗的第一行） */\n  title?: VNodeChild;\n  /** 说明（标题下面的正文）；不写时 children 就是说明 */\n  description?: VNodeChild;\n  /** 图标；不写时按色调选，false 不显示 */\n  icon?: IconData | false;\n  /** 进行中（如“正在上传”）：图标换成加载指示，带 aria-busy */\n  loading?: boolean;\n  /** 读屏播报方式，默认 off */\n  live?: keyof AlertLives;\n  /** 右侧的操作（如“重试”按钮） */\n  action?: VNodeChild;\n  /** 给了就显示关闭按钮：点击后提示条先淡出，离场结束再调用；提示条随后被移除时，焦点交给相邻的可聚焦元素；没被移除就重新显示 */\n  onClose?: () => void;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 加载指示（loading 时代替图标）的部件属性 */\n  propsSpinner?: Partial<SpinnerProps>;\n  /** 文字区（标题与正文的容器）的部件属性 */\n  propsBody?: PartProps<'div'>;\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'div'>;\n  /** 说明（标题下面的正文）的部件属性 */\n  propsDescription?: PartProps<'div'>;\n  /** 额外内容（同时给了 description 与 children 时的 children）的部件属性 */\n  propsContent?: PartProps<'div'>;\n  /** 操作区的部件属性 */\n  propsAction?: PartProps<'div'>;\n  /** 关闭按钮的部件属性 */\n  propsClose?: Partial<PresetIconButtonProps>;\n  children?: VNodeChild;\n}\n\n/**\n * 提示条的配方：各部件的布局。样式 × 色调的颜色来自共用的 statusToneStyles（直接写主题 token 的表），\n * 排在配方之前，createUi / Provider 的 styles.Alert 能盖过它\n */\nexport const alertRecipe = css.recipe({\n  name: 'Alert',\n  parts: ['root', 'icon', 'body', 'title', 'description', 'content', 'action', 'close'],\n  base: {\n    // 进场与离场的淡入淡出用 presenceStyles\n    root: {\n      boxSizing: 'border-box',\n      display: 'flex',\n      alignItems: 'flex-start',\n      gap: '_sm',\n      padding: '_md',\n      lineHeight: '_normal',\n    },\n    // 图标与第一行文字对齐：行高 1.5em 里居中 1em 的图标\n    icon: { flexShrink: 0, marginBlock: '0.25em' },\n    body: { flexGrow: 1, minWidth: 0, display: 'grid', gap: '_xs' },\n    title: { fontWeight: '_semibold' },\n    description: { color: '_text' },\n    content: { minWidth: 0 },\n    action: { flexShrink: 0, alignSelf: 'center' },\n    close: { flexShrink: 0, marginBlock: `calc(-1 * ${t.space.xs})`, color: 'inherit' },\n  },\n});\n\n/** 提示条的部件（createUi / Provider 的 styles.Alert 按它定制） */\nexport type AlertPart = (typeof alertRecipe.parts)[number];\n\nconst ROLES = { off: undefined, polite: 'status', assertive: 'alert' } as const;\n\n/** 提示条：图标 + 标题 + 正文 + 操作 + 关闭 */\nexport const Alert = _component(\n  ({\n    variant,\n    radius,\n    tone = 'info',\n    size,\n    title,\n    description,\n    icon,\n    loading = false,\n    live = 'off',\n    action,\n    onClose,\n    propsIcon,\n    propsSpinner,\n    propsBody,\n    propsTitle,\n    propsDescription,\n    propsContent,\n    propsAction,\n    propsClose,\n    children,\n    ...rest\n  }: AlertProps) => {\n    const appearance = useDefaults('Alert', () => ({ variant, radius }), {\n      variant: 'soft',\n      radius: 'md',\n    });\n    const recipe = useRecipe(alertRecipe);\n    // 离场结束才交给使用方移除；使用方没移除时提示条重新出现\n    const dismissible = useDismissible(() => onClose?.());\n    return () => {\n      const { variant: shownVariant, radius: shownRadius } = appearance();\n      const s = recipe({ variant: shownVariant, tone });\n      const shownIcon = icon === false ? undefined : (icon ?? statusIcons[tone]);\n      // 说明取 description，没有时取 children；两个都有时 children 放在说明下面\n      const extra = hasContent(description) && hasContent(children);\n      const text = hasContent(description) ? description : children;\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              ...s.root,\n              sx: [\n                statusToneSx(shownVariant, tone),\n                s.root.sx,\n                presenceStyles.fade,\n                radiusStyles[shownRadius],\n                size && fontSizeStyles[size],\n                dismissible.dismissing && presenceStyles.leaving,\n              ],\n            },\n            rest,\n            { ref: dismissible.ref, role: ROLES[live], 'aria-busy': loading || undefined },\n          )}\n          data-tone={tone}\n          data-state={dismissible.state}\n        >\n          {loading ? (\n            <Spinner {...mergePartProps<SpinnerProps>(s.icon, propsSpinner)} />\n          ) : (\n            shownIcon && (\n              <Icon {...mergePartProps<IconProps>({ ...s.icon, icon: shownIcon }, propsIcon)} />\n            )\n          )}\n          <div {...mergeAttrs<'div'>(s.body, propsBody)}>\n            {hasContent(title) && <div {...mergeAttrs<'div'>(s.title, propsTitle)}>{title}</div>}\n            {hasContent(text) && (\n              <div {...mergeAttrs<'div'>(s.description, propsDescription)}>{text}</div>\n            )}\n            {extra && <div {...mergeAttrs<'div'>(s.content, propsContent)}>{children}</div>}\n          </div>\n          {hasContent(action) && <div {...mergeAttrs<'div'>(s.action, propsAction)}>{action}</div>}\n          {onClose && (\n            <CloseButton\n              {...mergeProps<PresetIconButtonProps>(\n                { ...s.close, sx: [s.close.sx, relativeFontSizeStyles.sm] },\n                propsClose,\n                { onClick: dismissible.dismiss },\n              )}\n            />\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/feedback/Banner.d.ts

@@ -0,0 +1,60 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PresetIconButtonProps } from '../base/CloseButton';
+import { type IconData, type IconProps } from '../base/Icon';
+import { type PartProps } from '../utils/props';
+import { type StatusTone } from '../utils/style/tone-styles';
+import { type TextSize } from '../utils/style/typography';
+import type { AlertLives } from './Alert';
+/** 横幅的样式 */
+export interface BannerVariants {
+    /** 浅色底（默认） */
+    soft: unknown;
+    /** 实底：最醒目，必须先看到的消息 */
+    solid: unknown;
+}
+/** 角色由 live 决定；原生的 title 属性（悬停提示）让给标题 */
+export type BannerManaged = 'role' | 'title';
+/** 未声明的属性落到外层 div 上 */
+export interface BannerProps extends PartProps<'div', BannerManaged> {
+    /** 色调，默认 info */
+    tone?: StatusTone;
+    /** 样式，默认 soft */
+    variant?: keyof BannerVariants;
+    /** 字号档位，默认继承上下文字号 */
+    size?: TextSize;
+    /** 加粗的开头（“系统维护”），与正文在同一行 */
+    title?: VNodeChild;
+    /** 图标；不写时按色调选，false 不显示 */
+    icon?: IconData | false;
+    /** 正文后的操作（链接或小按钮） */
+    action?: VNodeChild;
+    /** 读屏播报方式，默认 off（同 Alert） */
+    live?: keyof AlertLives;
+    /** 给了就显示关闭按钮：先离场，离场结束再调用；使用方没移除时重新出现 */
+    onClose?: () => void;
+    /** 图标的部件属性 */
+    propsIcon?: Partial<IconProps>;
+    /** 文字区的部件属性 */
+    propsContent?: PartProps<'div'>;
+    /** 标题的部件属性 */
+    propsTitle?: PartProps<'strong'>;
+    /** 操作区的部件属性 */
+    propsAction?: PartProps<'div'>;
+    /** 关闭按钮的部件属性 */
+    propsClose?: Partial<PresetIconButtonProps>;
+    /** 正文 */
+    children?: VNodeChild;
+}
+/** Banner 的样式：root、icon、content、title、action、close */
+export declare const bannerStyles: Readonly<{
+    action: css.CompiledStyles;
+    balanced: css.CompiledStyles;
+    close: css.CompiledStyles;
+    content: css.CompiledStyles;
+    icon: css.CompiledStyles;
+    root: css.CompiledStyles;
+    title: css.CompiledStyles;
+}>;
+/** 横幅：一行通栏通知，内容居中，可以关闭 */
+export declare const Banner: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<BannerProps>;