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

package/dist/overlay/Popconfirm.js

@@ -0,0 +1,167 @@
+import { useLang } from "../config/context.js";
+import { hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { toneStyles } from "../utils/style/typography.js";
+import { Icon } from "../base/Icon.js";
+import { Button } from "../base/Button.js";
+import { statusIcons } from "../utils/style/tone-styles.js";
+import { Flex } from "../layout/Flex.js";
+import { openSetter } from "../utils/dom/open-change.js";
+import { Popover } from "./Popover.js";
+import { createVNode, mergeProps, ref, useId, watch } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/overlay/Popconfirm.tsx
+/** 未声明的属性落到弹出层的 div 上；位置、箭头、触发器同 Popover */
+/** Popconfirm 的样式：body、icon、title、description、footer */
+var popconfirmStyles = css.create({
+	body: {
+		display: "grid",
+		gridTemplateColumns: "auto minmax(0, 1fr)",
+		columnGap: "_sm",
+		rowGap: "_xs",
+		maxWidth: "20rem"
+	},
+	icon: {
+		gridRow: "span 2",
+		marginBlockStart: "0.15em"
+	},
+	title: {
+		gridColumn: "2",
+		fontWeight: "_semibold",
+		lineHeight: "_tight"
+	},
+	description: {
+		gridColumn: "2",
+		color: "_textMuted",
+		fontSize: "_sm"
+	},
+	footer: {
+		gridColumn: "1 / -1",
+		marginBlockStart: "_sm"
+	}
+});
+/** 气泡确认：Popover + 问题 + 取消 / 确认 */
+var Popconfirm = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const onOpenChange = readonlyProp(_props, "onOpenChange");
+	const placement = readonlyProp(_props, "placement", "top");
+	const trigger = readonlyProp(_props, "trigger");
+	const title = readonlyProp(_props, "title");
+	const description = readonlyProp(_props, "description");
+	const tone = readonlyProp(_props, "tone", "warning");
+	const icon = readonlyProp(_props, "icon");
+	const onConfirm = readonlyProp(_props, "onConfirm");
+	const onCancel = readonlyProp(_props, "onCancel");
+	const confirmText = readonlyProp(_props, "confirmText");
+	const cancelText = readonlyProp(_props, "cancelText");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsTitle = readonlyProp(_props, "propsTitle");
+	const propsDescription = readonlyProp(_props, "propsDescription");
+	const propsFooter = readonlyProp(_props, "propsFooter");
+	const propsConfirm = readonlyProp(_props, "propsConfirm");
+	const propsCancel = readonlyProp(_props, "propsCancel");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const id = useId();
+	const titleId = `${id}-title`;
+	const descriptionId = `${id}-description`;
+	let pending = ref(false);
+	const setOpen = openSetter(() => open.value, (next) => open.value = next, () => onOpenChange.value);
+	let confirmed = false;
+	watch(() => open.value, (now) => {
+		if (now) confirmed = false;
+		else if (!confirmed) onCancel.value?.();
+	});
+	async function confirm() {
+		if (pending.value) return;
+		pending.value = true;
+		try {
+			if (await onConfirm.value() === false) return;
+		} catch (error) {
+			console.error("Popconfirm 的 onConfirm 失败，保持打开", error);
+			return;
+		} finally {
+			pending.value = false;
+		}
+		confirmed = true;
+		setOpen(false, "confirm");
+	}
+	return () => {
+		const shownIcon = icon.value === false ? void 0 : icon.value ?? statusIcons[tone.value];
+		return createVNode(Popover, mergeProps(mergePartProps({
+			"aria-labelledby": titleId,
+			"aria-describedby": hasContent(description.value) ? descriptionId : void 0
+		}, rest, {
+			placement: placement.value,
+			role: "alertdialog"
+		}), {
+			"trigger": trigger.value,
+			"_open": open.value,
+			"onUpdate:_open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
+			"onOpenChange": onOpenChange.value
+		}), { default: () => [createVNode("div", css.attrs(popconfirmStyles.body), [
+			shownIcon && createVNode(Icon, mergePartProps({
+				icon: shownIcon,
+				sx: [popconfirmStyles.icon, toneStyles[tone.value]]
+			}, propsIcon.value), null),
+			createVNode("div", mergeAttrs({ sx: popconfirmStyles.title }, propsTitle.value, { id: titleId }), [title.value]),
+			hasContent(description.value) && createVNode("div", mergeAttrs({ sx: popconfirmStyles.description }, propsDescription.value, { id: descriptionId }), [description.value]),
+			createVNode(Flex, mergeProps(mergePartProps({
+				justify: "end",
+				gap: "sm",
+				sx: popconfirmStyles.footer
+			}, propsFooter.value), { "key": "__site2" }), {
+				default: () => [createVNode(Button, mergeProps(mergePartProps({
+					size: "sm",
+					variant: "soft",
+					tone: "neutral"
+				}, propsCancel.value, {
+					autofocus: true,
+					disabled: pending.value,
+					onClick: (event) => setOpen(false, "close", event)
+				}), { "key": "__site0" }), {
+					default: () => [cancelText.value ?? lang.cancel],
+					$stable: true
+				}), createVNode(Button, mergeProps(mergePartProps({
+					size: "sm",
+					tone: tone.value
+				}, propsConfirm.value, {
+					loading: pending.value,
+					onClick: () => void confirm()
+				}), { "key": "__site1" }), {
+					default: () => [confirmText.value ?? lang.confirm],
+					$stable: true
+				})],
+				$stable: true
+			})
+		])] });
+	};
+}, {
+	name: "Popconfirm",
+	props: [
+		"_open",
+		"onUpdate:_open",
+		"onOpenChange",
+		"placement",
+		"trigger",
+		"title",
+		"description",
+		"tone",
+		"icon",
+		"onConfirm",
+		"onCancel",
+		"confirmText",
+		"cancelText",
+		"propsIcon",
+		"propsTitle",
+		"propsDescription",
+		"propsFooter",
+		"propsConfirm",
+		"propsCancel"
+	]
+});
+//#endregion
+export { Popconfirm, popconfirmStyles };
+
+//# sourceMappingURL=Popconfirm.js.map

package/dist/overlay/Popconfirm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popconfirm.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/overlay/Popconfirm.tsx"],"sourcesContent":["/**\n * 气泡确认（role=\"alertdialog\"）：在触发按钮旁边问一句再执行，比确认对话框轻（删除一行、撤回、移出成员）。\n * 建在 Popover 上：点击外部、Esc 等于取消，关闭后焦点回到触发器；打开时焦点落在“取消”上，误按 Enter 不会执行。\n *\n *   <Popconfirm\n *     title=\"删除这条记录？\"\n *     description=\"删除后无法恢复\"\n *     tone=\"danger\"\n *     confirmText=\"删除\"\n *     onConfirm={() => api.remove(row.id)}\n *     trigger={(props) => <IconButton {...props} icon={Trash2} aria-label=\"删除\" />}\n *   />\n *\n * onConfirm 返回 Promise 时确认按钮加载中，完成后关闭；返回 false（或 resolve 成 false）、失败时保持打开，由调用方提示原因。\n * 后果严重、要多写几句说明或填理由的操作用 AlertDialog / useConfirm。\n * 部件：Root（Popover 的弹出层）、Icon、Title、Description、Footer（Flex）、Cancel、Confirm（Button）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, watch, type VNodeChild } from 'vue';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { useLang } from '../config/context';\nimport { Flex, type FlexProps } from '../layout/Flex';\nimport { openSetter } from '../utils/dom/open-change';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { statusIcons, type StatusTone } from '../utils/style/tone-styles';\nimport { toneStyles } from '../utils/style/typography';\nimport { Popover, type PopoverProps } from './Popover';\n\n/** 未声明的属性落到弹出层的 div 上；位置、箭头、触发器同 Popover */\nexport interface PopconfirmProps extends Omit<PopoverProps, 'role' | 'children' | 'title'> {\n  /** 问题，同时是弹出层的无障碍名称 */\n  title: VNodeChild;\n  /** 补充说明（aria-describedby） */\n  description?: VNodeChild;\n  /** 确认按钮与图标的色调，默认 warning；删除这类破坏性操作用 danger */\n  tone?: StatusTone;\n  /** 图标；不写时按色调选，false 不显示 */\n  icon?: IconData | false;\n  /** 确认：返回 Promise 时等它完成再关闭；返回 false、失败时保持打开 */\n  onConfirm: () => unknown;\n  /** 取消（含 Esc、点击外部） */\n  onCancel?: () => void;\n  /** 确认按钮的文字，默认取语言包（确定） */\n  confirmText?: VNodeChild;\n  /** 取消按钮的文字，默认取语言包（取消） */\n  cancelText?: VNodeChild;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'div'>;\n  /** 说明的部件属性 */\n  propsDescription?: PartProps<'div'>;\n  /** 按钮行的部件属性 */\n  propsFooter?: Partial<FlexProps>;\n  /** 确认按钮的部件属性 */\n  propsConfirm?: Partial<ButtonProps>;\n  /** 取消按钮的部件属性 */\n  propsCancel?: Partial<ButtonProps>;\n}\n\n/** Popconfirm 的样式：body、icon、title、description、footer */\nexport const popconfirmStyles = css.create({\n  body: {\n    display: 'grid',\n    gridTemplateColumns: 'auto minmax(0, 1fr)',\n    columnGap: '_sm',\n    rowGap: '_xs',\n    maxWidth: '20rem',\n  },\n  icon: { gridRow: 'span 2', marginBlockStart: '0.15em' },\n  title: { gridColumn: '2', fontWeight: '_semibold', lineHeight: '_tight' },\n  description: { gridColumn: '2', color: '_textMuted', fontSize: '_sm' },\n  footer: { gridColumn: '1 / -1', marginBlockStart: '_sm' },\n});\n\n/** 气泡确认：Popover + 问题 + 取消 / 确认 */\nexport const Popconfirm = _component(\n  ({\n    _open: open = _bindable(false),\n    onOpenChange,\n    placement = 'top',\n    trigger,\n    title,\n    description,\n    tone = 'warning',\n    icon,\n    onConfirm,\n    onCancel,\n    confirmText,\n    cancelText,\n    propsIcon,\n    propsTitle,\n    propsDescription,\n    propsFooter,\n    propsConfirm,\n    propsCancel,\n    ...rest\n  }: PopconfirmProps) => {\n    const lang = useLang();\n    const id = useId();\n    const titleId = `${id}-title`;\n    const descriptionId = `${id}-description`;\n    let pending = _state(false);\n    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n    // 确认后关闭的不算取消；Esc、点击外部、取消按钮关闭的都是取消\n    let confirmed = false;\n    watch(\n      () => open,\n      (now) => {\n        if (now) confirmed = false;\n        else if (!confirmed) onCancel?.();\n      },\n    );\n\n    async function confirm() {\n      if (pending) return;\n      pending = true;\n      try {\n        if ((await onConfirm()) === false) return;\n      } catch (error) {\n        // 调用方负责提示失败原因；这里只保持打开，并留下记录\n        console.error('Popconfirm 的 onConfirm 失败，保持打开', error);\n        return;\n      } finally {\n        pending = false;\n      }\n      confirmed = true;\n      setOpen(false, 'confirm');\n    }\n\n    return () => {\n      const shownIcon = icon === false ? undefined : (icon ?? statusIcons[tone]);\n      return (\n        <Popover\n          {...mergePartProps<Partial<PopoverProps>>(\n            {\n              'aria-labelledby': titleId,\n              'aria-describedby': hasContent(description) ? descriptionId : undefined,\n            },\n            rest,\n            { placement, role: 'alertdialog' },\n          )}\n          trigger={trigger}\n          _open={open}\n          onOpenChange={onOpenChange}\n        >\n          <div {...css.attrs(popconfirmStyles.body)}>\n            {shownIcon && (\n              <Icon\n                {...mergePartProps<IconProps>(\n                  { icon: shownIcon, sx: [popconfirmStyles.icon, toneStyles[tone]] },\n                  propsIcon,\n                )}\n              />\n            )}\n            <div\n              {...mergeAttrs<'div'>({ sx: popconfirmStyles.title }, propsTitle, { id: titleId })}\n            >\n              {title}\n            </div>\n            {hasContent(description) && (\n              <div\n                {...mergeAttrs<'div'>({ sx: popconfirmStyles.description }, propsDescription, {\n                  id: descriptionId,\n                })}\n              >\n                {description}\n              </div>\n            )}\n            <Flex\n              {...mergePartProps<FlexProps>(\n                { justify: 'end', gap: 'sm', sx: popconfirmStyles.footer },\n                propsFooter,\n              )}\n            >\n              <Button\n                {...mergePartProps<ButtonProps>(\n                  { size: 'sm', variant: 'soft', tone: 'neutral' },\n                  propsCancel,\n                  // 打开时焦点落在取消上：误按 Enter 不会执行\n                  {\n                    autofocus: true,\n                    disabled: pending,\n                    onClick: (event: MouseEvent) => setOpen(false, 'close', event),\n                  },\n                )}\n              >\n                {cancelText ?? lang.cancel}\n              </Button>\n              <Button\n                {...mergePartProps<ButtonProps>({ size: 'sm', tone }, propsConfirm, {\n                  loading: pending,\n                  onClick: () => void confirm(),\n                })}\n              >\n                {confirmText ?? lang.confirm}\n              </Button>\n            </Flex>\n          </div>\n        </Popover>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/overlay/Popover.d.ts

@@ -0,0 +1,40 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type FloatingOptions, type FloatingPlacement } from '../utils/dom/floating';
+import { type OpenChangeProps } from '../utils/dom/open-change';
+import { type LazyContentOptions } from '../utils/motion/presence';
+import { type PartProps, type TriggerProps } from '../utils/props';
+/** 交给触发器的属性：展开收起的通用属性，加上弹层需要的 id、ref 与 aria-haspopup */
+export interface PopoverTriggerProps extends TriggerProps {
+    /** 弹出层默认以触发器的文字作为无障碍名称（aria-labelledby） */
+    id: string;
+    /** 取得触发器元素：定位的参照、关闭后焦点回到这里 */
+    ref: (element: unknown) => void;
+    /** 告诉读屏这个按钮会打开对话框类的弹层 */
+    'aria-haspopup': 'dialog';
+}
+/** 未声明的属性落到弹出层的 div 上 */
+export interface PopoverProps extends PartProps<'div', 'id' | 'popover' | 'role'>, Pick<FloatingOptions, 'offset'>, LazyContentOptions, OpenChangeProps {
+    /** 是否打开：父级写 _open={x}；Esc 与点击外部会关闭并写回 */
+    _open?: boolean;
+    /** 弹出位置，默认 bottom-start；空间不够时自动翻转 */
+    placement?: FloatingPlacement;
+    /** 显示指向触发器的箭头 */
+    arrow?: boolean;
+    /**
+     * 弹出层的角色，默认 dialog；要用户在确认与取消之间选择时（Popconfirm）用 alertdialog
+     * @default 'dialog'
+     */
+    role?: 'dialog' | 'alertdialog';
+    /** 触发器：`(props) => <Button {...props}>更多</Button>` */
+    trigger: (props: PopoverTriggerProps) => VNodeChild;
+    /** 箭头的部件属性 */
+    propsArrow?: PartProps<'span'>;
+    children?: VNodeChild;
+}
+/** Popover 的样式：panel */
+export declare const popoverStyles: Readonly<{
+    panel: css.CompiledStyles;
+}>;
+/** 弹出框：原生 popover + floating-ui 定位，打开时焦点进入、关闭后回到触发器 */
+export declare const Popover: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<PopoverProps>;

package/dist/overlay/Popover.js

@@ -0,0 +1,96 @@
+import { defaultLabelledBy, mergeAttrs } from "../utils/props.js";
+import { transitions } from "../utils/style/transitions.js";
+import { focusFirst } from "../utils/dom/focus.js";
+import { toElement } from "../utils/dom/element.js";
+import { useLazyContent } from "../utils/motion/presence.js";
+import { floatingStyles, useAnchoredPopover } from "../utils/dom/floating.js";
+import { openSetter } from "../utils/dom/open-change.js";
+import { Fragment, createVNode, mergeProps, shallowRef, useId } from "vue";
+import { _component, bindable, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/overlay/Popover.tsx
+/** 交给触发器的属性：展开收起的通用属性，加上弹层需要的 id、ref 与 aria-haspopup */
+/** 未声明的属性落到弹出层的 div 上 */
+/** Popover 的样式：panel */
+var popoverStyles = css.create({ panel: {
+	padding: "_md",
+	maxWidth: "calc(100vw - 2em)"
+} });
+/** 弹出框：原生 popover + floating-ui 定位，打开时焦点进入、关闭后回到触发器 */
+var Popover = /*#__PURE__*/ _component((_props, _ctx) => {
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const onOpenChange = readonlyProp(_props, "onOpenChange");
+	const placement = readonlyProp(_props, "placement", "bottom-start");
+	const offset = readonlyProp(_props, "offset");
+	const arrow = readonlyProp(_props, "arrow", false);
+	const role = readonlyProp(_props, "role", "dialog");
+	const trigger = readonlyProp(_props, "trigger");
+	const propsArrow = readonlyProp(_props, "propsArrow");
+	const lazy = readonlyProp(_props, "lazy", true);
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const id = useId();
+	const showContent = useLazyContent(() => open.value, () => lazy.value);
+	const triggerId = `${id}-trigger`;
+	let anchor = shallowRef(null);
+	let panel = shallowRef(null);
+	let arrowElement = shallowRef(null);
+	const setOpen = openSetter(() => open.value, (next) => open.value = next, () => onOpenChange.value);
+	const { onToggle } = useAnchoredPopover(() => ({
+		open: open.value,
+		anchor: anchor.value,
+		panel: panel.value,
+		floating: {
+			placement: placement.value,
+			offset: offset.value,
+			arrow: arrowElement.value
+		}
+	}), {
+		close: (reason, event) => setOpen(false, reason, event),
+		shown: focusFirst
+	});
+	return () => createVNode(Fragment, null, [trigger.value({
+		ref: (value) => anchor.value = toElement(value),
+		onClick: (event) => setOpen(!open.value, "trigger", event),
+		"aria-expanded": open.value,
+		id: triggerId,
+		"aria-controls": id,
+		"aria-haspopup": "dialog"
+	}), createVNode("div", mergeProps(mergeAttrs({
+		sx: [
+			floatingStyles.anchored,
+			floatingStyles.surface,
+			popoverStyles.panel,
+			transitions.scale,
+			arrow.value && floatingStyles.withArrow
+		],
+		"aria-labelledby": defaultLabelledBy(rest, triggerId)
+	}, rest, {
+		ref: panel,
+		id,
+		popover: "auto",
+		role: role.value,
+		onToggle
+	}), { "data-state": open.value ? "open" : "closed" }), [showContent() && children.value, arrow.value && createVNode("span", mergeAttrs({ sx: floatingStyles.arrow }, propsArrow.value, {
+		ref: arrowElement,
+		"aria-hidden": true
+	}), null)])]);
+}, {
+	name: "Popover",
+	props: [
+		"_open",
+		"onUpdate:_open",
+		"onOpenChange",
+		"placement",
+		"offset",
+		"arrow",
+		"role",
+		"trigger",
+		"propsArrow",
+		"lazy"
+	]
+});
+//#endregion
+export { Popover, popoverStyles };
+
+//# sourceMappingURL=Popover.js.map

package/dist/overlay/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_createVNode","_Fragment","_mergeProps"],"sources":["../../src/overlay/Popover.tsx"],"sourcesContent":["/**\n * 弹出框（非模态）：点击触发器在旁边弹出一块内容（筛选条件、简短表单、详情），点击外部或 Esc 关闭。\n * 原生 popover=\"auto\" 负责顶层渲染、Esc、点击外部与嵌套顺序，floating-ui 负责定位（utils/dom/floating）。\n * 打开时焦点移到第一个可聚焦元素（有 autofocus 的优先），关闭后回到触发器。参考 Radix Popover。\n *\n *   <Popover _open={open} trigger={(props) => <Button {...props}>筛选</Button>}>…</Popover>\n *\n * 弹出层是 role=\"dialog\"，默认以触发器的文字作为名称（aria-labelledby）；内容有自己的标题时用 aria-labelledby 指向它。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport {\n  floatingStyles,\n  useAnchoredPopover,\n  type FloatingOptions,\n  type FloatingPlacement,\n} from '../utils/dom/floating';\nimport { toElement } from '../utils/dom/element';\nimport { focusFirst } from '../utils/dom/focus';\nimport { openSetter, type OpenChangeProps } from '../utils/dom/open-change';\nimport { useLazyContent, type LazyContentOptions } from '../utils/motion/presence';\nimport { defaultLabelledBy, mergeAttrs, type PartProps, type TriggerProps } from '../utils/props';\nimport { transitions } from '../utils/style/transitions';\n\n/** 交给触发器的属性：展开收起的通用属性，加上弹层需要的 id、ref 与 aria-haspopup */\nexport interface PopoverTriggerProps extends TriggerProps {\n  /** 弹出层默认以触发器的文字作为无障碍名称（aria-labelledby） */\n  id: string;\n  /** 取得触发器元素：定位的参照、关闭后焦点回到这里 */\n  ref: (element: unknown) => void;\n  /** 告诉读屏这个按钮会打开对话框类的弹层 */\n  'aria-haspopup': 'dialog';\n}\n\n/** 未声明的属性落到弹出层的 div 上 */\nexport interface PopoverProps\n  extends\n    PartProps<'div', 'id' | 'popover' | 'role'>,\n    Pick<FloatingOptions, 'offset'>,\n    LazyContentOptions,\n    OpenChangeProps {\n  /** 是否打开：父级写 _open={x}；Esc 与点击外部会关闭并写回 */\n  _open?: boolean;\n  /** 弹出位置，默认 bottom-start；空间不够时自动翻转 */\n  placement?: FloatingPlacement;\n  /** 显示指向触发器的箭头 */\n  arrow?: boolean;\n  /**\n   * 弹出层的角色，默认 dialog；要用户在确认与取消之间选择时（Popconfirm）用 alertdialog\n   * @default 'dialog'\n   */\n  role?: 'dialog' | 'alertdialog';\n  /** 触发器：`(props) => <Button {...props}>更多</Button>` */\n  trigger: (props: PopoverTriggerProps) => VNodeChild;\n  /** 箭头的部件属性 */\n  propsArrow?: PartProps<'span'>;\n  children?: VNodeChild;\n}\n\n/** Popover 的样式：panel */\nexport const popoverStyles = css.create({\n  panel: { padding: '_md', maxWidth: 'calc(100vw - 2em)' },\n});\n\n/** 弹出框：原生 popover + floating-ui 定位，打开时焦点进入、关闭后回到触发器 */\nexport const Popover = _component(\n  ({\n    _open: open = _bindable(false),\n    onOpenChange,\n    placement = 'bottom-start',\n    offset,\n    arrow = false,\n    role = 'dialog',\n    trigger,\n    propsArrow,\n    lazy = true,\n    children,\n    ...rest\n  }: PopoverProps) => {\n    const id = useId();\n    const showContent = useLazyContent(\n      () => open,\n      () => lazy,\n    );\n    const triggerId = `${id}-trigger`;\n    let anchor = _state.raw<HTMLElement | null>(null);\n    let panel = _state.raw<HTMLElement | null>(null);\n    let arrowElement = _state.raw<HTMLElement | null>(null);\n    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n    // 打开时焦点移入（等第一次定位、可见之后），Esc 与点击外部关闭后写回 open、焦点回到触发器\n    const { onToggle } = useAnchoredPopover(\n      () => ({ open, anchor, panel, floating: { placement, offset, arrow: arrowElement } }),\n      { close: (reason, event) => setOpen(false, reason, event), shown: focusFirst },\n    );\n\n    return () => (\n      <>\n        {trigger({\n          ref: (value) => (anchor = toElement(value)),\n          onClick: (event: MouseEvent) => setOpen(!open, 'trigger', event),\n          'aria-expanded': open,\n          id: triggerId,\n          'aria-controls': id,\n          'aria-haspopup': 'dialog',\n        })}\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                floatingStyles.anchored,\n                floatingStyles.surface,\n                popoverStyles.panel,\n                transitions.scale,\n                arrow && floatingStyles.withArrow,\n              ],\n              'aria-labelledby': defaultLabelledBy(rest, triggerId),\n            },\n            rest,\n            { ref: _toRef(panel), id, popover: 'auto', role, onToggle },\n          )}\n          data-state={open ? 'open' : 'closed'}\n        >\n          {showContent() && children}\n          {arrow && (\n            <span\n              {...mergeAttrs<'span'>({ sx: floatingStyles.arrow }, propsArrow, {\n                ref: _toRef(arrowElement),\n                'aria-hidden': true,\n              })}\n            />\n          )}\n        </div>\n      </>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;AA6DA,IAAa,gBAAgB,IAAI,OAAO,EACtC,OAAO;CAAE,SAAS;CAAO,UAAU;AAAoB,EACzD,CAAC;;AAGD,IAAa,UAAU,0BACrB,QAAA,SAYoB;CAAA,MAAA,OAAAA,SAAA,QAAA,eAXM,OAAK,KAAA,IAAA;CAAA,MAAA,eAAAC,aAAA,QAAA,cAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,aAEjB,cAAc;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,SAElB,KAAK;CAAA,MAAA,OAAAA,aAAA,QAAA,QACN,QAAQ;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAGR,IAAI;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAER,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,KAAK,MAAM;CACjB,MAAM,cAAc,qBAClB,KAAA,aACA,KAAA,KACF;CACA,MAAM,YAAY,GAAG,GAAE;CACvB,IAAI,SAAMC,WAAkC,IAAI;CAChD,IAAI,QAAKA,WAAkC,IAAI;CAC/C,IAAI,eAAYA,WAAkC,IAAI;CACtD,MAAM,UAAU,iBACd,KAAA,QACC,SAAU,KAAA,QAAO,YAClB,aAAA,KACF;CAEA,MAAM,EAAE,aAAa,0BACZ;EAAE,MAAI,KAAA;EAAE,QAAM,OAAA;EAAE,OAAK,MAAA;EAAE,UAAU;GAAE,WAAS,UAAA;GAAE,QAAM,OAAA;GAAE,OAAK,aAAA;EAAe;CAAE,IACnF;EAAE,QAAQ,QAAQ,UAAU,QAAQ,OAAO,QAAQ,KAAK;EAAG,OAAO;CAAW,CAC/E;CAEA,aAAOC,YAAAC,UAAA,MAAA,CAEF,QAAA,MAAQ;EACP,MAAM,UAAW,OAAA,QAAS,UAAU,KAAK;EACzC,UAAU,UAAsB,QAAQ,CAAA,KAAA,OAAO,WAAW,KAAK;EAC/D,iBAAe,KAAA;EACf,IAAI;EACJ,iBAAiB;EACjB,iBAAiB;CACnB,CAAC,GAACD,YAAA,OAAAE,WAEI,WACF;EACE,IAAI;GACF,eAAe;GACf,eAAe;GACf,cAAc;GACd,YAAY;GACZ,MAAA,SAAS,eAAe;EAAS;EAEnC,mBAAmB,kBAAkB,MAAM,SAAS;CACtD,GACA,MACA;EAAE,KAAG;EAAiB;EAAI,SAAS;EAAQ,MAAI,KAAA;EAAE;CAAS,CAC5D,GAAC,EAAA,cACW,KAAA,QAAO,SAAS,SAAQ,CAAA,GAAA,CAEnC,YAAY,KAAC,SAAA,OACb,MAAA,SAAAF,YAAA,QAEO,WAAmB,EAAE,IAAI,eAAe,MAAM,GAAC,WAAA,OAAc;EAC/D,KAAG;EACH,eAAe;CACjB,CAAC,GAAC,IAAA,CAEL,CAAA,CAAA,CAAA;AAIT,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/overlay/Tooltip.d.ts

@@ -0,0 +1,47 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type FloatingOptions, type FloatingPlacement } from '../utils/dom/floating';
+import { type OpenChangeProps } from '../utils/dom/open-change';
+import { type PartProps } from '../utils/props';
+/** 交给触发器的属性：展开到触发元素上（`{...props}`） */
+export interface TooltipTriggerProps {
+    /** 取得触发器元素：定位的参照 */
+    ref: (element: unknown) => void;
+    /** 提示是对触发器的补充说明 */
+    'aria-describedby': string;
+    /** 指针进入：等 delay 后显示 */
+    onPointerenter: (event: PointerEvent) => void;
+    /** 指针离开：稍后隐藏（可以移到提示上） */
+    onPointerleave: (event: PointerEvent) => void;
+    /** 按下（点击）触发器时隐藏 */
+    onPointerdown: (event: PointerEvent) => void;
+    /** 键盘聚焦时立即显示 */
+    onFocus: (event: FocusEvent) => void;
+    /** 失焦时隐藏 */
+    onBlur: (event: FocusEvent) => void;
+}
+/** 未声明的属性落到提示的 div 上 */
+export interface TooltipProps extends PartProps<'div', 'id' | 'popover' | 'role'>, Pick<FloatingOptions, 'offset'>, OpenChangeProps {
+    /** 是否显示：父级可以写 _open={x} 控制或得知；一般不需要 */
+    _open?: boolean;
+    /** 显示位置，默认 top；空间不够时自动翻转 */
+    placement?: FloatingPlacement;
+    /** 指针停留多久后显示（毫秒），默认 500 */
+    delay?: number;
+    /** 不显示（触发器照常渲染） */
+    disabled?: boolean;
+    /** 显示指向触发器的箭头 */
+    arrow?: boolean;
+    /** 触发器：`(props) => <IconButton {...props} … />` */
+    trigger: (props: TooltipTriggerProps) => VNodeChild;
+    /** 箭头的部件属性 */
+    propsArrow?: PartProps<'span'>;
+    /** 提示文字 */
+    children?: VNodeChild;
+}
+/** Tooltip 的样式：panel */
+export declare const tooltipStyles: Readonly<{
+    panel: css.CompiledStyles;
+}>;
+/** 文字提示：悬停或键盘聚焦时显示在触发器旁边 */
+export declare const Tooltip: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<TooltipProps>;

package/dist/overlay/Tooltip.js

@@ -0,0 +1,86 @@
+import { mergeAttrs } from "../utils/props.js";
+import { transitions } from "../utils/style/transitions.js";
+import { floatingStyles } from "../utils/dom/floating.js";
+import { createHoverGroup } from "../utils/dom/hover-intent.js";
+import { openSetter } from "../utils/dom/open-change.js";
+import { useHoverLayer } from "../utils/dom/hover-layer.js";
+import { Fragment, createVNode, mergeProps } from "vue";
+import { _component, bindable, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/overlay/Tooltip.tsx
+/** 交给触发器的属性：展开到触发元素上（`{...props}`） */
+/** 未声明的属性落到提示的 div 上 */
+/** 指针离开后多久隐藏（毫秒）：留出移到提示上的时间 */
+var CLOSE_DELAY = 100;
+/** 所有提示一组：同一时间只显示一个，刚关掉一个时下一个不用等 delay */
+var tooltips = createHoverGroup();
+/** Tooltip 的样式：panel */
+var tooltipStyles = css.create({ panel: {
+	boxSizing: "border-box",
+	maxWidth: "min(20em, calc(100vw - 2em))",
+	paddingBlock: "_xs",
+	paddingInline: "_sm",
+	borderWidth: 0,
+	borderRadius: "_sm",
+	backgroundColor: "_inverseSurface",
+	color: "_inverseText",
+	fontSize: "_sm",
+	lineHeight: "_normal",
+	overflowWrap: "break-word"
+} });
+/** 文字提示：悬停或键盘聚焦时显示在触发器旁边 */
+var Tooltip = /*#__PURE__*/ _component((_props, _ctx) => {
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const onOpenChange = readonlyProp(_props, "onOpenChange");
+	const placement = readonlyProp(_props, "placement", "top");
+	const offset = readonlyProp(_props, "offset");
+	const delay = readonlyProp(_props, "delay", 500);
+	const disabled = readonlyProp(_props, "disabled", false);
+	const arrow = readonlyProp(_props, "arrow", false);
+	const trigger = readonlyProp(_props, "trigger");
+	const propsArrow = readonlyProp(_props, "propsArrow");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const layer = useHoverLayer(tooltips, () => ({
+		open: open.value,
+		disabled: disabled.value,
+		placement: placement.value,
+		offset: offset.value,
+		delay: delay.value,
+		closeDelay: CLOSE_DELAY
+	}), openSetter(() => open.value, (next) => open.value = next, () => onOpenChange.value));
+	return () => createVNode(Fragment, null, [trigger.value({
+		ref: layer.anchorRef,
+		"aria-describedby": layer.id,
+		...layer.hover.trigger
+	}), createVNode("div", mergeProps(mergeAttrs({ sx: [
+		floatingStyles.anchored,
+		tooltipStyles.panel,
+		transitions.fade,
+		arrow.value && floatingStyles.withArrow
+	] }, rest, {
+		ref: layer.panelRef,
+		id: layer.id,
+		popover: "manual",
+		role: "tooltip",
+		...layer.hover.panel
+	}), { "data-state": open.value && !disabled.value ? "open" : "closed" }), [children.value, arrow.value && createVNode("span", layer.arrowProps(propsArrow.value), null)])]);
+}, {
+	name: "Tooltip",
+	props: [
+		"_open",
+		"onUpdate:_open",
+		"onOpenChange",
+		"placement",
+		"offset",
+		"delay",
+		"disabled",
+		"arrow",
+		"trigger",
+		"propsArrow"
+	]
+});
+//#endregion
+export { Tooltip, tooltipStyles };
+
+//# sourceMappingURL=Tooltip.js.map

package/dist/overlay/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_Fragment","_mergeProps"],"sources":["../../src/overlay/Tooltip.tsx"],"sourcesContent":["/**\n * 文字提示（role=\"tooltip\"）：指针停在触发器上、或用键盘聚焦它时，显示一句简短说明（图标按钮的用途、快捷键）。\n * 参考 WAI-ARIA Tooltip 模式、Radix Tooltip、React Aria Tooltip：\n *\n *   <Tooltip trigger={(props) => <IconButton {...props} icon={Copy} aria-label=\"复制\" />}>复制（Ctrl+C）</Tooltip>\n *\n * - 指针停留 delay 毫秒后显示；刚有提示关掉（skipDelay 内）时直接显示，在一排按钮上移动不用每次等；\n * - 键盘聚焦（:focus-visible）立即显示，失焦、Esc、按下触发器时隐藏；触屏不显示（没有悬停）；\n * - 指针可以移到提示上而不消失（WCAG 1.4.13）；同一时间只显示一个；\n * - 提示是对触发器的补充说明（aria-describedby）：触发器自己要有名称，提示里不放可交互的内容。\n *\n * 用 popover=\"manual\" 渲染在顶层：它不是 auto，不会关掉正打开的菜单或弹出框。开关、定位、Esc 见 useHoverLayer（与 HoverCard 共用）。\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 {\n  floatingStyles,\n  type FloatingOptions,\n  type FloatingPlacement,\n} from '../utils/dom/floating';\nimport { createHoverGroup } from '../utils/dom/hover-intent';\nimport { openSetter, type OpenChangeProps } from '../utils/dom/open-change';\nimport { useHoverLayer } from '../utils/dom/hover-layer';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { transitions } from '../utils/style/transitions';\n\n/** 交给触发器的属性：展开到触发元素上（`{...props}`） */\nexport interface TooltipTriggerProps {\n  /** 取得触发器元素：定位的参照 */\n  ref: (element: unknown) => void;\n  /** 提示是对触发器的补充说明 */\n  'aria-describedby': string;\n  /** 指针进入：等 delay 后显示 */\n  onPointerenter: (event: PointerEvent) => void;\n  /** 指针离开：稍后隐藏（可以移到提示上） */\n  onPointerleave: (event: PointerEvent) => void;\n  /** 按下（点击）触发器时隐藏 */\n  onPointerdown: (event: PointerEvent) => void;\n  /** 键盘聚焦时立即显示 */\n  onFocus: (event: FocusEvent) => void;\n  /** 失焦时隐藏 */\n  onBlur: (event: FocusEvent) => void;\n}\n\n/** 未声明的属性落到提示的 div 上 */\nexport interface TooltipProps\n  extends\n    PartProps<'div', 'id' | 'popover' | 'role'>,\n    Pick<FloatingOptions, 'offset'>,\n    OpenChangeProps {\n  /** 是否显示：父级可以写 _open={x} 控制或得知；一般不需要 */\n  _open?: boolean;\n  /** 显示位置，默认 top；空间不够时自动翻转 */\n  placement?: FloatingPlacement;\n  /** 指针停留多久后显示（毫秒），默认 500 */\n  delay?: number;\n  /** 不显示（触发器照常渲染） */\n  disabled?: boolean;\n  /** 显示指向触发器的箭头 */\n  arrow?: boolean;\n  /** 触发器：`(props) => <IconButton {...props} … />` */\n  trigger: (props: TooltipTriggerProps) => VNodeChild;\n  /** 箭头的部件属性 */\n  propsArrow?: PartProps<'span'>;\n  /** 提示文字 */\n  children?: VNodeChild;\n}\n\n/** 指针离开后多久隐藏（毫秒）：留出移到提示上的时间 */\nconst CLOSE_DELAY = 100;\n\n/** 所有提示一组：同一时间只显示一个，刚关掉一个时下一个不用等 delay */\nconst tooltips = createHoverGroup();\n\n/** Tooltip 的样式：panel */\nexport const tooltipStyles = css.create({\n  panel: {\n    boxSizing: 'border-box',\n    maxWidth: 'min(20em, calc(100vw - 2em))',\n    paddingBlock: '_xs',\n    paddingInline: '_sm',\n    borderWidth: 0,\n    borderRadius: '_sm',\n    backgroundColor: '_inverseSurface',\n    color: '_inverseText',\n    fontSize: '_sm',\n    lineHeight: '_normal',\n    overflowWrap: 'break-word',\n  },\n});\n\n/** 文字提示：悬停或键盘聚焦时显示在触发器旁边 */\nexport const Tooltip = _component(\n  ({\n    _open: open = _bindable(false),\n    onOpenChange,\n    placement = 'top',\n    offset,\n    delay = 500,\n    disabled = false,\n    arrow = false,\n    trigger,\n    propsArrow,\n    children,\n    ...rest\n  }: TooltipProps) => {\n    const layer = useHoverLayer(\n      tooltips,\n      () => ({ open, disabled, placement, offset, delay, closeDelay: CLOSE_DELAY }),\n      openSetter(\n        () => open,\n        (next) => (open = next),\n        () => onOpenChange,\n      ),\n    );\n\n    return () => (\n      <>\n        {trigger({\n          ref: layer.anchorRef,\n          'aria-describedby': layer.id,\n          ...layer.hover.trigger,\n        })}\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                floatingStyles.anchored,\n                tooltipStyles.panel,\n                transitions.fade,\n                arrow && floatingStyles.withArrow,\n              ],\n            },\n            rest,\n            {\n              ref: layer.panelRef,\n              id: layer.id,\n              popover: 'manual',\n              role: 'tooltip',\n              // 指针移到提示上不消失，离开提示后再隐藏\n              ...layer.hover.panel,\n            },\n          )}\n          data-state={open && !disabled ? 'open' : 'closed'}\n        >\n          {children}\n          {arrow && <span {...layer.arrowProps(propsArrow)} />}\n        </div>\n      </>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;AAsEA,IAAM,cAAc;;AAGpB,IAAM,WAAW,iBAAiB;;AAGlC,IAAa,gBAAgB,IAAI,OAAO,EACtC,OAAO;CACL,WAAW;CACX,UAAU;CACV,cAAc;CACd,eAAe;CACf,aAAa;CACb,cAAc;CACd,iBAAiB;CACjB,OAAO;CACP,UAAU;CACV,YAAY;CACZ,cAAc;AAChB,EACF,CAAC;;AAGD,IAAa,UAAU,0BACrB,QAAA,SAYoB;CAAA,MAAA,OAAAA,SAAA,QAAA,eAXM,OAAK,KAAA,IAAA;CAAA,MAAA,eAAAC,aAAA,QAAA,cAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,aAEjB,KAAK;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,SAET,GAAG;CAAA,MAAA,WAAAA,aAAA,QAAA,YACA,KAAK;CAAA,MAAA,QAAAA,aAAA,QAAA,SACR,KAAK;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAIV,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,QAAQ,cACZ,iBACO;EAAE,MAAI,KAAA;EAAE,UAAQ,SAAA;EAAE,WAAS,UAAA;EAAE,QAAM,OAAA;EAAE,OAAK,MAAA;EAAE,YAAY;CAAY,IAC3E,iBACE,KAAA,QACC,SAAU,KAAA,QAAO,YAClB,aAAA,KACF,CACF;CAEA,aAAOC,YAAAC,UAAA,MAAA,CAEF,QAAA,MAAQ;EACP,KAAK,MAAM;EACX,oBAAoB,MAAM;EAC1B,GAAG,MAAM,MAAM;CACjB,CAAC,GAACD,YAAA,OAAAE,WAEI,WACF,EACE,IAAI;EACF,eAAe;EACf,cAAc;EACd,YAAY;EACZ,MAAA,SAAS,eAAe;CAAS,EAErC,GACA,MACA;EACE,KAAK,MAAM;EACX,IAAI,MAAM;EACV,SAAS;EACT,MAAM;EAEN,GAAG,MAAM,MAAM;CACjB,CACF,GAAC,EAAA,cACW,KAAA,SAAQ,CAAA,SAAA,QAAY,SAAS,SAAQ,CAAA,GAAA,CAAA,SAAA,OAGhD,MAAA,SAAAF,YAAA,QAAmB,MAAM,WAAU,WAAA,KAAW,GAAC,IAAA,CAAI,CAAA,CAAA,CAAA;AAI5D,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/overlay/Tour.d.ts

@@ -0,0 +1,74 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type ButtonProps } from '../base/Button';
+import { type HeadingProps } from '../base/Heading';
+import { type TextProps } from '../base/Text';
+import { type FlexProps } from '../layout/Flex';
+import { type FloatingPlacement } from '../utils/dom/floating';
+import { type OpenChangeProps } from '../utils/dom/open-change';
+import { type PartProps } from '../utils/props';
+/** 引导的一步 */
+export interface TourStep {
+    /** 高亮的目标：选择器、元素或返回元素的函数；不写（或找不到）时卡片居中 */
+    target?: string | HTMLElement | (() => HTMLElement | null | undefined);
+    /** 标题 */
+    title: VNodeChild;
+    /** 说明 */
+    content?: VNodeChild;
+    /** 标题上方的封面：插图、截图、短视频 */
+    cover?: VNodeChild;
+    /** 卡片在目标的哪一侧，默认 bottom；空间不够时翻转 */
+    placement?: FloatingPlacement;
+}
+/** 打开、无障碍关联由组件管理；未声明的属性落到 dialog 上 */
+export interface TourProps extends PartProps<'dialog', 'open' | 'aria-labelledby' | 'aria-describedby'>, OpenChangeProps {
+    /** 各步 */
+    steps: readonly TourStep[];
+    /** 是否显示：父级写 _open={x} */
+    _open?: boolean;
+    /** 当前第几步，从 0 开始：父级写 _current={n} */
+    _current?: number;
+    /** 镂空比目标大出多少（px），默认 6 */
+    padding?: number;
+    /** 点了最后一步的“完成” */
+    onFinish?: () => void;
+    /** 镂空的部件属性 */
+    propsSpotlight?: PartProps<'div'>;
+    /** 卡片的部件属性 */
+    propsPanel?: PartProps<'div'>;
+    /** 封面的部件属性 */
+    propsCover?: PartProps<'div'>;
+    /** 标题（dialog 的名称）的部件属性 */
+    propsTitle?: Omit<Partial<HeadingProps>, 'id'>;
+    /** 说明（dialog 的描述）的部件属性 */
+    propsContent?: PartProps<'div', 'id'>;
+    /** 底部一行（步数与按钮）的部件属性 */
+    propsFooter?: Partial<FlexProps>;
+    /** 步数（第几步 / 共几步）的部件属性 */
+    propsProgress?: Partial<TextProps>;
+    /** 跳过按钮的部件属性；点击由组件管理 */
+    propsSkip?: Omit<Partial<ButtonProps>, 'onClick'>;
+    /** 上一步按钮的部件属性；点击由组件管理 */
+    propsPrevious?: Omit<Partial<ButtonProps>, 'onClick'>;
+    /** 下一步（最后一步是完成）按钮的部件属性；点击由组件管理，可以设 disabled（完成某个操作后才能继续） */
+    propsNext?: Omit<Partial<ButtonProps>, 'onClick'>;
+}
+/** Tour 的样式：root、spotlight、dimmed、panel、cover、title、content、footer、progress */
+export declare const tourStyles: Readonly<{
+    centered: css.CompiledStyles;
+    content: css.CompiledStyles;
+    cover: css.CompiledStyles;
+    dimmed: css.CompiledStyles;
+    footer: css.CompiledStyles;
+    panel: css.CompiledStyles;
+    progress: css.CompiledStyles;
+    root: css.CompiledStyles;
+    spotlight: css.CompiledStyles;
+    title: css.CompiledStyles;
+}>;
+/** Tour 的样式：rect（镂空的位置与大小） */
+export declare const tourDynamicStyles: Readonly<{
+    readonly rect: (left: number, top: number, width: number, height: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 新手引导：遮罩镂空高亮目标，卡片说明，一步一步往下走 */
+export declare const Tour: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<TourProps>;