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

package/dist/docs-kit/CodeGroup.js

@@ -0,0 +1,81 @@
+import { t } from "../config/theme/tokens.js";
+import { mergeAttrs, mergePartProps, mergeProps as mergeProps$1 } from "../utils/props.js";
+import { CodeBlock } from "../base/CodeBlock.js";
+import { Tab, TabList, TabPanel, Tabs } from "../navigation/Tabs.js";
+import { createVNode, mergeProps } 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/docs-kit/CodeGroup.tsx
+/** 一组代码里的一段 */
+/** 未声明的属性落到外层的 div 上 */
+/** CodeGroup 的样式：外框与标签栏；代码块去掉自己的外框 */
+var codeGroupStyles = css.create({
+	root: {
+		minWidth: 0,
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_borderMuted",
+		borderRadius: "_md",
+		backgroundColor: "_surface",
+		overflow: "hidden"
+	},
+	list: {
+		paddingInline: "_sm",
+		backgroundColor: "_surfaceMuted",
+		fontSize: "_sm"
+	},
+	panel: { outlineOffset: `calc(-1 * ${t.borderWidths.sm})` },
+	block: {
+		borderWidth: 0,
+		borderRadius: 0
+	}
+});
+var keyOf = (item) => item.value ?? item.label;
+/** 一组代码，标签页切换 */
+var CodeGroup = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const items = readonlyProp(_props, "items");
+	const value = bindable(_props, "_value", () => void 0, _ctx.emit);
+	const propsList = readonlyProp(_props, "propsList");
+	const rest = restProps(_props, _ctx, true);
+	return () => {
+		const selected = value.value ?? (items.value[0] && keyOf(items.value[0]));
+		return createVNode("div", mergeAttrs({ sx: codeGroupStyles.root }, rest), [createVNode(Tabs, {
+			"_value": selected,
+			"onUpdate:_value": _cache[0] || (_cache[0] = (next) => value.value = next),
+			"size": "sm",
+			"key": "__site1"
+		}, {
+			default: () => [createVNode(TabList, mergeProps(mergePartProps({
+				sx: codeGroupStyles.list,
+				"aria-label": items.value.map((item) => item.label).join(" / ")
+			}, propsList.value), { "key": "__site0" }), {
+				default: () => [items.value.map((item) => createVNode(Tab, {
+					"key": keyOf(item),
+					"value": keyOf(item)
+				}, { default: () => [item.label] }))],
+				$stable: true
+			}), items.value.map((item) => {
+				const { label: _label, value: _value, propsRoot, ...block } = item;
+				return createVNode(TabPanel, {
+					"key": keyOf(item),
+					"value": keyOf(item),
+					"sx": codeGroupStyles.panel
+				}, { default: () => [createVNode(CodeBlock, mergeProps(block, { "propsRoot": mergeProps$1({ sx: codeGroupStyles.block }, propsRoot) }), null)] });
+			})],
+			$stable: true
+		})]);
+	};
+}, {
+	name: "CodeGroup",
+	props: [
+		"items",
+		"_value",
+		"onUpdate:_value",
+		"propsList"
+	]
+});
+//#endregion
+export { CodeGroup, codeGroupStyles };
+
+//# sourceMappingURL=CodeGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeGroup.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_createVNode","_mergeProps","mergeProps"],"sources":["../../src/docs-kit/CodeGroup.tsx"],"sourcesContent":["/**\n * 一组代码，用标签页切换：安装命令（pnpm / npm / yarn）、同一段逻辑的几个文件。由 Tabs 与 CodeBlock 组合，\n * 标签栏就是代码块的标题栏。\n *\n *   <CodeGroup items={[\n *     { label: 'pnpm', code: 'pnpm add @zerodep-dev/vue-tsx-pro-ui', lang: 'bash' },\n *     { label: 'npm', code: 'npm i @zerodep-dev/vue-tsx-pro-ui', lang: 'bash' },\n *   ]} />\n *\n * 选中哪一个可以双向绑定（_value={manager}），几组代码绑同一个变量就一起切换。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { CodeBlock, type CodeBlockProps } from '../base/CodeBlock';\nimport { Tab, TabList, TabPanel, Tabs, type TabListProps } from '../navigation/Tabs';\nimport { mergeAttrs, mergePartProps, mergeProps, type PartProps } from '../utils/props';\nimport { t } from '../config/theme/tokens';\n\n/** 一组代码里的一段 */\nexport interface CodeGroupItem extends Omit<CodeBlockProps, 'title'> {\n  /** 标签上的文字；也是这一段的值（没给 value 时） */\n  label: string;\n  /** 这一段的值，默认等于 label */\n  value?: string;\n}\n\n/** 未声明的属性落到外层的 div 上 */\nexport interface CodeGroupProps extends PartProps<'div'> {\n  /** 各段代码 */\n  items: readonly CodeGroupItem[];\n  /** 选中的那一段的值：父级可以写 _value={x}；默认第一段 */\n  _value?: string;\n  /** 标签栏的部件属性；名称（aria-label）默认是各段标签连起来 */\n  propsList?: Partial<TabListProps>;\n}\n\n/** CodeGroup 的样式：外框与标签栏；代码块去掉自己的外框 */\nexport const codeGroupStyles = css.create({\n  root: {\n    minWidth: 0,\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderMuted',\n    borderRadius: '_md',\n    backgroundColor: '_surface',\n    overflow: 'hidden',\n  },\n  list: { paddingInline: '_sm', backgroundColor: '_surfaceMuted', fontSize: '_sm' },\n  panel: { outlineOffset: `calc(-1 * ${t.borderWidths.sm})` },\n  block: { borderWidth: 0, borderRadius: 0 },\n});\n\nconst keyOf = (item: CodeGroupItem) => item.value ?? item.label;\n\n/** 一组代码，标签页切换 */\nexport const CodeGroup = _component(\n  ({\n    items,\n    _value: value = _bindable<string | undefined>(undefined),\n    propsList,\n    ...rest\n  }: CodeGroupProps) =>\n    () => {\n      const selected = value ?? (items[0] && keyOf(items[0]));\n      return (\n        <div {...mergeAttrs<'div'>({ sx: codeGroupStyles.root }, rest)}>\n          <Tabs\n            _value={selected}\n            // 默认选第一段时 value 是 undefined，不能直接 _bind：选中时写回\n            onUpdate:_value={(next: string) => (value = next)}\n            size=\"sm\"\n          >\n            <TabList\n              {...mergePartProps<TabListProps>(\n                {\n                  sx: codeGroupStyles.list,\n                  'aria-label': items.map((item) => item.label).join(' / '),\n                },\n                propsList,\n              )}\n            >\n              {items.map((item) => (\n                <Tab key={keyOf(item)} value={keyOf(item)}>\n                  {item.label}\n                </Tab>\n              ))}\n            </TabList>\n            {items.map((item) => {\n              const { label: _label, value: _value, propsRoot, ...block } = item;\n              return (\n                <TabPanel key={keyOf(item)} value={keyOf(item)} sx={codeGroupStyles.panel}>\n                  <CodeBlock\n                    {...block}\n                    propsRoot={mergeProps<'div'>({ sx: codeGroupStyles.block }, propsRoot)}\n                  />\n                </TabPanel>\n              );\n            })}\n          </Tabs>\n        </div>\n      );\n    },\n);\n"],"mappings":";;;;;;;;;;;AAqCA,IAAa,kBAAkB,IAAI,OAAO;CACxC,MAAM;EACJ,UAAU;EACV,aAAa;EACb,aAAa;EACb,aAAa;EACb,cAAc;EACd,iBAAiB;EACjB,UAAU;CACZ;CACA,MAAM;EAAE,eAAe;EAAO,iBAAiB;EAAiB,UAAU;CAAM;CAChF,OAAO,EAAE,eAAe,aAAa,EAAE,aAAa,GAAE,GAAI;CAC1D,OAAO;EAAE,aAAa;EAAG,cAAc;CAAE;AAC3C,CAAC;AAED,IAAM,SAAS,SAAwB,KAAK,SAAS,KAAK;;AAG1D,IAAa,YAAY,0BACvB,QAAA,SAAA;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,QAAAC,SAAA,QAAA,gBAEgD,KAAA,GAAS,KAAA,IAAA;CAAA,MAAA,YAAAD,aAAA,QAAA,WAAA;CAAA,MAEpD,OAAIE,UAAA,QAAA,MAAA,IAAA;CAAA,aAED;EACJ,MAAM,WAAW,MAAA,UAAU,MAAA,MAAM,MAAM,MAAM,MAAA,MAAM,EAAE;EACrD,OAAAC,YAAA,OACW,WAAkB,EAAE,IAAI,gBAAgB,KAAK,GAAG,IAAI,GAAC,CAAAA,YAAA,MAAA;GAAA,UAElD;GAAQ,mBAAA,OAAA,OAAA,OAAA,MAEE,SAAkB,MAAA,QAAQ;GAAK,QAAA;GAAA,OAAA;EAAA,GAAA;GAAA,eAAA,CAAAA,YAAA,SAAAC,WAI3C,eACF;IACE,IAAI,gBAAgB;IACpB,cAAc,MAAA,MAAM,KAAK,SAAS,KAAK,KAAK,CAAC,CAAC,KAAK,KAAK;GAC1D,GAAC,UAAA,KAEH,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;IAAA,eAAA,CAEA,MAAA,MAAM,KAAK,SAAID,YAAA,KAAA;KAAA,OACJ,MAAM,IAAI;KAAC,SAAS,MAAM,IAAI;IAAC,GAAA,EAAA,eAAA,CACtC,KAAK,KAAK,EAAA,CAAA,CAEd,CAAC;IAAA,SAAA;GAAA,CAAA,GAEH,MAAA,MAAM,KAAK,SAAS;IACnB,MAAM,EAAE,OAAO,QAAQ,OAAO,QAAQ,WAAW,GAAG,UAAU;IAC9D,OAAAA,YAAA,UAAA;KAAA,OACiB,MAAM,IAAI;KAAC,SAAS,MAAM,IAAI;KAAC,MAAM,gBAAgB;IAAK,GAAA,EAAA,eAAA,CAAAA,YAAA,WAAAC,WAEjE,OAAK,EAAA,aACEC,aAAkB,EAAE,IAAI,gBAAgB,MAAM,GAAG,SAAS,EAAC,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA;GAI9E,CAAC,CAAC;GAAA,SAAA;EAAA,CAAA,CAAA,CAAA;CAIV;AAAC,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACL"}

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

@@ -0,0 +1,60 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type ButtonProps } from '../base/Button';
+import { type CodeBlockProps } from '../base/CodeBlock';
+import { type CopyButtonProps } from '../base/CopyButton';
+import { type PartProps } from '../utils/props';
+import { type ScrollAreaProps } from '../layout/ScrollArea';
+import { type CardProps } from '../display/Card';
+import { type CollapseProps } from '../display/Collapse';
+/** 效果区的排列 */
+export interface CodePreviewAligns {
+    /** 从起始边排起、占满宽度（默认）：表单、卡片、长内容 */
+    start: unknown;
+    /** 居中：单个按钮、图标这类小东西 */
+    center: unknown;
+}
+/** 未声明的属性落到外框（Card 的 div）上 */
+export interface CodePreviewProps extends PartProps<'div'> {
+    /** 源码；或按需加载的函数：指针移到、焦点进入工具栏、展开或复制时才调用（只调用一次） */
+    code: string | (() => Promise<string>);
+    /** 源码的语言，默认 tsx */
+    lang?: string;
+    /** 是否显示源码：父级可以写 _showCode={x}；默认收起 */
+    _showCode?: boolean;
+    /** 效果区的排列，默认 start */
+    align?: keyof CodePreviewAligns;
+    /** 源码超过这么多行时折叠（见 CodeBlock 的 maxLines）；不写时不折叠 */
+    maxLines?: number;
+    /** 工具栏上额外的操作，排在“显示代码”前面 */
+    actions?: VNodeChild;
+    /** 运行中的效果 */
+    children?: VNodeChild;
+    /** 外框（Card）的部件属性 */
+    propsCard?: Partial<CardProps>;
+    /** 效果区的部件属性（外层，背景、最小高度写在这里） */
+    propsPreview?: PartProps<'div'>;
+    /** 效果区里横向滚动的 ScrollArea 的部件属性 */
+    propsPreviewScroll?: Partial<ScrollAreaProps>;
+    /** 工具栏的部件属性 */
+    propsToolbar?: PartProps<'div'>;
+    /** “显示代码”按钮的部件属性 */
+    propsToggle?: Partial<ButtonProps>;
+    /** 复制按钮的部件属性 */
+    propsCopy?: Partial<CopyButtonProps>;
+    /** 源码收起展开的部件属性 */
+    propsCollapse?: Partial<CollapseProps>;
+    /** 源码（CodeBlock）的部件属性 */
+    propsCode?: Partial<CodeBlockProps>;
+}
+/** CodePreview 的样式：preview、center、footer、toolbar、code */
+export declare const codePreviewStyles: Readonly<{
+    center: css.CompiledStyles;
+    code: css.CompiledStyles;
+    footer: css.CompiledStyles;
+    layout: css.CompiledStyles;
+    preview: css.CompiledStyles;
+    toolbar: css.CompiledStyles;
+}>;
+/** 代码示例卡片：效果 + 可收起的源码 + 复制 */
+export declare const CodePreview: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<CodePreviewProps>;

package/dist/docs-kit/CodePreview.js

@@ -0,0 +1,183 @@
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Button } from "../base/Button.js";
+import { ScrollArea } from "../layout/ScrollArea.js";
+import { CopyButton } from "../base/CopyButton.js";
+import { CodeBlock } from "../base/CodeBlock.js";
+import { Collapse } from "../display/Collapse.js";
+import { Card } from "../display/Card.js";
+import { useMessages } from "../config/lang/messages.js";
+import { docsKitMessages } from "./messages.js";
+import { Fragment, createVNode, mergeProps, ref, useId, watch } from "vue";
+import { _component, bindable, childrenProp, childrenStable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { Code } from "@lucide/icons";
+//#region src/docs-kit/CodePreview.tsx
+/**
+* 代码示例卡片：上面是运行中的效果，下面是它的源码（可以收起、复制）。文档站的每个示例都是一张。
+*
+*   import source from './Basic.tsx?raw';
+*   <CodePreview code={source}>
+*     <Basic />
+*   </CodePreview>
+*
+* 效果与源码由使用方各自给出（组件本身不执行代码）：示例组件照常 import，源码用 Vite 的 ?raw 导入同一个文件，
+* 两者永远一致。源码默认收起，“显示代码”按钮带 aria-expanded / aria-controls；复制按钮一直在工具栏上。
+* 示例多的页面可以按需加载源码：`code={() => import('./Basic.tsx?raw').then((m) => m.default)}`，
+* 指针移到、焦点进入工具栏或展开时才取，源码不进页面的块。
+* actions 往工具栏最前面加按钮，例如文档站的“在演练场里编辑”。
+* 外框是 Card（outline），源码是 CodeBlock，收起展开用 Collapse（高度过渡，收起后页内搜索仍能找到）。
+*/
+/** 效果区的排列 */
+/** 未声明的属性落到外框（Card 的 div）上 */
+/** CodePreview 的样式：preview、center、footer、toolbar、code */
+var codePreviewStyles = css.create({
+	preview: {
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "center"
+	},
+	layout: {
+		display: "grid",
+		alignItems: "center",
+		gap: "_md",
+		padding: "_xl"
+	},
+	center: { justifyItems: "center" },
+	footer: {
+		display: "block",
+		padding: 0
+	},
+	toolbar: {
+		display: "flex",
+		justifyContent: "flex-end",
+		gap: "_xs",
+		padding: "_xs"
+	},
+	code: {
+		borderWidth: 0,
+		borderTopWidth: "_xs",
+		borderRadius: 0
+	}
+});
+/** 代码示例卡片：效果 + 可收起的源码 + 复制 */
+var CodePreview = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const code = readonlyProp(_props, "code");
+	const lang = readonlyProp(_props, "lang", "tsx");
+	const showCode = bindable(_props, "_showCode", () => false, _ctx.emit);
+	const align = readonlyProp(_props, "align", "start");
+	const maxLines = readonlyProp(_props, "maxLines");
+	const actions = readonlyProp(_props, "actions");
+	const children = childrenProp(_props);
+	const propsCard = readonlyProp(_props, "propsCard");
+	const propsPreview = readonlyProp(_props, "propsPreview");
+	const propsPreviewScroll = readonlyProp(_props, "propsPreviewScroll");
+	const propsToolbar = readonlyProp(_props, "propsToolbar");
+	const propsToggle = readonlyProp(_props, "propsToggle");
+	const propsCopy = readonlyProp(_props, "propsCopy");
+	const propsCollapse = readonlyProp(_props, "propsCollapse");
+	const propsCode = readonlyProp(_props, "propsCode");
+	const rest = restProps(_props, _ctx, false);
+	const messages = useMessages("docsKit", docsKitMessages);
+	const codeId = useId();
+	let wanted = ref(false);
+	let loaded = ref(null);
+	let loadedFrom;
+	let pending;
+	const source = () => typeof code.value === "string" ? code.value : loadedFrom === code.value ? loaded.value : null;
+	function load() {
+		if (typeof code.value === "string") return code.value;
+		if (loadedFrom === code.value) return loaded.value ?? pending;
+		const from = code.value;
+		loadedFrom = from;
+		loaded.value = null;
+		pending = from().then((text) => {
+			if (loadedFrom === from) loaded.value = text;
+			return text;
+		});
+		return pending;
+	}
+	const prepare = () => {
+		wanted.value = true;
+		load();
+	};
+	watch(() => showCode.value, (shown) => shown && void load(), { immediate: true });
+	return () => createVNode(Card, mergeProps(mergePartProps({
+		variant: "outline",
+		padding: "none",
+		propsFooter: { sx: codePreviewStyles.footer }
+	}, propsCard.value, rest), {
+		"footer": createVNode(Fragment, null, [createVNode("div", mergeAttrs({ sx: codePreviewStyles.toolbar }, propsToolbar.value, {
+			onPointerenter: prepare,
+			onFocusin: prepare
+		}), [
+			actions.value,
+			createVNode(Button, mergeProps(mergePartProps({
+				variant: "ghost",
+				tone: "neutral",
+				size: "sm",
+				icon: Code
+			}, propsToggle.value, {
+				"aria-expanded": showCode.value,
+				"aria-controls": codeId,
+				onClick: () => showCode.value = !showCode.value
+			}), { "key": "__site0" }), {
+				default: () => [showCode.value ? messages.hideCode : messages.showCode],
+				$stable: true
+			}),
+			createVNode(CopyButton, mergePartProps({
+				variant: "ghost",
+				tone: "neutral",
+				size: "sm",
+				value: () => source() ?? load()
+			}, propsCopy.value), null)
+		]), createVNode(Collapse, mergeProps(mergePartProps({}, propsCollapse.value, { id: codeId }), {
+			"_open": showCode.value,
+			"onUpdate:_open": _cache[0] || (_cache[0] = ($event) => showCode.value = $event),
+			"key": "__site1"
+		}), {
+			default: () => [createVNode(CodeBlock, mergePartProps({
+				code: source() ?? "",
+				lang: lang.value,
+				highlight: showCode.value || wanted.value,
+				maxLines: maxLines.value,
+				copyable: false,
+				propsRoot: { sx: codePreviewStyles.code }
+			}, propsCode.value), null)],
+			$stable: true
+		})]),
+		"key": "__site3"
+	}), {
+		default: () => [createVNode("div", mergeAttrs({ sx: codePreviewStyles.preview }, propsPreview.value, {
+			role: "group",
+			"aria-label": messages.preview
+		}), [createVNode(ScrollArea, mergeProps(mergePartProps({ axis: "x" }, propsPreviewScroll.value), { "key": "__site2" }), {
+			default: () => [createVNode("div", mergeAttrs({ sx: [codePreviewStyles.layout, align.value === "center" && codePreviewStyles.center] }), [children.value])],
+			$stable: childrenStable()
+		})])],
+		$stable: childrenStable()
+	});
+}, {
+	name: "CodePreview",
+	props: [
+		"code",
+		"lang",
+		"_showCode",
+		"onUpdate:_showCode",
+		"align",
+		"maxLines",
+		"actions",
+		"propsCard",
+		"propsPreview",
+		"propsPreviewScroll",
+		"propsToolbar",
+		"propsToggle",
+		"propsCopy",
+		"propsCollapse",
+		"propsCode"
+	]
+});
+//#endregion
+export { CodePreview, codePreviewStyles };
+
+//# sourceMappingURL=CodePreview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodePreview.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_childrenProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps","_Fragment","CodeIcon","_vtp_childrenStable"],"sources":["../../src/docs-kit/CodePreview.tsx"],"sourcesContent":["/**\n * 代码示例卡片：上面是运行中的效果，下面是它的源码（可以收起、复制）。文档站的每个示例都是一张。\n *\n *   import source from './Basic.tsx?raw';\n *   <CodePreview code={source}>\n *     <Basic />\n *   </CodePreview>\n *\n * 效果与源码由使用方各自给出（组件本身不执行代码）：示例组件照常 import，源码用 Vite 的 ?raw 导入同一个文件，\n * 两者永远一致。源码默认收起，“显示代码”按钮带 aria-expanded / aria-controls；复制按钮一直在工具栏上。\n * 示例多的页面可以按需加载源码：`code={() => import('./Basic.tsx?raw').then((m) => m.default)}`，\n * 指针移到、焦点进入工具栏或展开时才取，源码不进页面的块。\n * actions 往工具栏最前面加按钮，例如文档站的“在演练场里编辑”。\n * 外框是 Card（outline），源码是 CodeBlock，收起展开用 Collapse（高度过渡，收起后页内搜索仍能找到）。\n */\nimport { Code as CodeIcon } from '@lucide/icons';\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 { CodeBlock, type CodeBlockProps } from '../base/CodeBlock';\nimport { CopyButton, type CopyButtonProps } from '../base/CopyButton';\nimport { useMessages } from '../config/lang/messages';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { ScrollArea, type ScrollAreaProps } from '../layout/ScrollArea';\nimport { Card, type CardProps } from '../display/Card';\nimport { Collapse, type CollapseProps } from '../display/Collapse';\nimport { docsKitMessages } from './messages';\n\n/** 效果区的排列 */\nexport interface CodePreviewAligns {\n  /** 从起始边排起、占满宽度（默认）：表单、卡片、长内容 */\n  start: unknown;\n  /** 居中：单个按钮、图标这类小东西 */\n  center: unknown;\n}\n\n/** 未声明的属性落到外框（Card 的 div）上 */\nexport interface CodePreviewProps extends PartProps<'div'> {\n  /** 源码；或按需加载的函数：指针移到、焦点进入工具栏、展开或复制时才调用（只调用一次） */\n  code: string | (() => Promise<string>);\n  /** 源码的语言，默认 tsx */\n  lang?: string;\n  /** 是否显示源码：父级可以写 _showCode={x}；默认收起 */\n  _showCode?: boolean;\n  /** 效果区的排列，默认 start */\n  align?: keyof CodePreviewAligns;\n  /** 源码超过这么多行时折叠（见 CodeBlock 的 maxLines）；不写时不折叠 */\n  maxLines?: number;\n  /** 工具栏上额外的操作，排在“显示代码”前面 */\n  actions?: VNodeChild;\n  /** 运行中的效果 */\n  children?: VNodeChild;\n  /** 外框（Card）的部件属性 */\n  propsCard?: Partial<CardProps>;\n  /** 效果区的部件属性（外层，背景、最小高度写在这里） */\n  propsPreview?: PartProps<'div'>;\n  /** 效果区里横向滚动的 ScrollArea 的部件属性 */\n  propsPreviewScroll?: Partial<ScrollAreaProps>;\n  /** 工具栏的部件属性 */\n  propsToolbar?: PartProps<'div'>;\n  /** “显示代码”按钮的部件属性 */\n  propsToggle?: Partial<ButtonProps>;\n  /** 复制按钮的部件属性 */\n  propsCopy?: Partial<CopyButtonProps>;\n  /** 源码收起展开的部件属性 */\n  propsCollapse?: Partial<CollapseProps>;\n  /** 源码（CodeBlock）的部件属性 */\n  propsCode?: Partial<CodeBlockProps>;\n}\n\n/** CodePreview 的样式：preview、center、footer、toolbar、code */\nexport const codePreviewStyles = css.create({\n  // 效果区：给了最小高度时，效果在里面上下居中\n  preview: { display: 'flex', flexDirection: 'column', justifyContent: 'center' },\n  // 效果的排布：靠起始边时示例占满宽度（里面的网格、卡片按整块宽度排），居中时按内容宽度居中；\n  // 宽内容（表格）在外面的 ScrollArea 里横向滚动，不撑宽卡片\n  layout: {\n    display: 'grid',\n    alignItems: 'center',\n    gap: '_md',\n    padding: '_xl',\n  },\n  center: { justifyItems: 'center' },\n  // Card 的页脚默认是一行靠右的按钮：这里是工具栏加源码，上下排\n  footer: { display: 'block', padding: 0 },\n  toolbar: { display: 'flex', justifyContent: 'flex-end', gap: '_xs', padding: '_xs' },\n  // 源码贴着卡片：去掉 CodeBlock 自己的边框与圆角，只留与工具栏之间的分隔线\n  code: {\n    borderWidth: 0,\n    borderTopWidth: '_xs',\n    borderRadius: 0,\n  },\n});\n\n/** 代码示例卡片：效果 + 可收起的源码 + 复制 */\nexport const CodePreview = _component(\n  ({\n    code,\n    lang = 'tsx',\n    _showCode: showCode = _bindable(false),\n    align = 'start',\n    maxLines,\n    actions,\n    children,\n    propsCard,\n    propsPreview,\n    propsPreviewScroll,\n    propsToolbar,\n    propsToggle,\n    propsCopy,\n    propsCollapse,\n    propsCode,\n    ...rest\n  }: CodePreviewProps) => {\n    const messages = useMessages('docsKit', docsKitMessages);\n    const codeId = useId();\n    // 收起的源码先按纯文本渲染（页内搜索照样找得到）：要显示时才高亮。指针移到、焦点落到“显示代码”上就开始，\n    // 点下去时多半已经高亮好了。一页十来个示例，打开页面时不必一次高亮全部\n    let wanted = _state(false);\n    // 按需加载的源码：同一个加载函数只取一次；换了加载函数（示例热更新）就重新取\n    let loaded = _state<string | null>(null);\n    let loadedFrom: unknown;\n    let pending: Promise<string> | undefined;\n    const source = () => (typeof code === 'string' ? code : loadedFrom === code ? loaded : null);\n    function load(): string | Promise<string> {\n      if (typeof code === 'string') return code;\n      if (loadedFrom === code) return loaded ?? pending!;\n      const from = code;\n      loadedFrom = from;\n      loaded = null;\n      pending = from().then((text) => {\n        if (loadedFrom === from) loaded = text;\n        return text;\n      });\n      return pending;\n    }\n    const prepare = () => {\n      wanted = true;\n      void load();\n    };\n    watch(\n      () => showCode,\n      (shown) => shown && void load(),\n      { immediate: true },\n    );\n    return () => (\n      <Card\n        {...mergePartProps<CardProps>(\n          { variant: 'outline', padding: 'none', propsFooter: { sx: codePreviewStyles.footer } },\n          propsCard,\n          rest as Partial<CardProps>,\n        )}\n        footer={\n          <>\n            <div\n              {...mergeAttrs<'div'>({ sx: codePreviewStyles.toolbar }, propsToolbar, {\n                // 工具栏上的意图（要看、要复制、要编辑）：开始加载与高亮，点下去时多半已经好了\n                onPointerenter: prepare,\n                onFocusin: prepare,\n              })}\n            >\n              {actions}\n              <Button\n                {...mergePartProps<ButtonProps>(\n                  { variant: 'ghost', tone: 'neutral', size: 'sm', icon: CodeIcon },\n                  propsToggle,\n                  {\n                    'aria-expanded': showCode,\n                    'aria-controls': codeId,\n                    onClick: () => (showCode = !showCode),\n                  },\n                )}\n              >\n                {showCode ? messages.hideCode : messages.showCode}\n              </Button>\n              <CopyButton\n                {...mergePartProps<CopyButtonProps>(\n                  {\n                    variant: 'ghost',\n                    tone: 'neutral',\n                    size: 'sm',\n                    value: () => source() ?? load(),\n                  },\n                  propsCopy,\n                )}\n              />\n            </div>\n            <Collapse\n              {...mergePartProps<CollapseProps>({}, propsCollapse, { id: codeId })}\n              _open={showCode}\n            >\n              <CodeBlock\n                {...mergePartProps<CodeBlockProps>(\n                  {\n                    code: source() ?? '',\n                    lang,\n                    highlight: showCode || wanted,\n                    maxLines,\n                    copyable: false,\n                    propsRoot: { sx: codePreviewStyles.code },\n                  },\n                  propsCode,\n                )}\n              />\n            </Collapse>\n          </>\n        }\n      >\n        <div\n          {...mergeAttrs<'div'>({ sx: codePreviewStyles.preview }, propsPreview, {\n            role: 'group',\n            'aria-label': messages.preview,\n          })}\n        >\n          <ScrollArea {...mergePartProps<ScrollAreaProps>({ axis: 'x' }, propsPreviewScroll)}>\n            <div\n              {...mergeAttrs<'div'>({\n                sx: [codePreviewStyles.layout, align === 'center' && codePreviewStyles.center],\n              })}\n            >\n              {children}\n            </div>\n          </ScrollArea>\n        </div>\n      </Card>\n    );\n  },\n);\n"],"mappings":"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"}

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

@@ -0,0 +1,28 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 未声明的属性落到外层 div 上 */
+export interface ColorSwatchProps extends PartProps<'div'> {
+    /** 颜色：任意 CSS 颜色，或主题 token（colors.accent） */
+    color: string;
+    /** 名称 */
+    label?: VNodeChild;
+    /** 显示的取值；不写时：普通颜色显示它本身，token 显示当前主题下的值；false 不显示 */
+    value?: VNodeChild | false;
+    /** 色块的部件属性 */
+    propsSwatch?: PartProps<'div'>;
+}
+/** ColorSwatch 的样式：root、swatch、fill、label、value */
+export declare const colorSwatchStyles: Readonly<{
+    fill: css.CompiledStyles;
+    label: css.CompiledStyles;
+    root: css.CompiledStyles;
+    swatch: css.CompiledStyles;
+    value: css.CompiledStyles;
+}>;
+/** ColorSwatch 的动态样式：色块的颜色 */
+export declare const colorSwatchDynamicStyles: Readonly<{
+    readonly fill: (color: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 色块（div）：颜色、名称与取值 */
+export declare const ColorSwatch: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ColorSwatchProps>;

package/dist/docs-kit/ColorSwatch.js

@@ -0,0 +1,85 @@
+import { useConfig } from "../config/context.js";
+import { hasContent, mergeAttrs } from "../utils/props.js";
+import { readToken } from "../config/theme/theme.js";
+import { swatchStyles } from "../utils/style/swatch-styles.js";
+import { createVNode, onMounted, ref, shallowRef, watch } 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/ColorSwatch.tsx
+/** 未声明的属性落到外层 div 上 */
+/** ColorSwatch 的样式：root、swatch、fill、label、value */
+var colorSwatchStyles = css.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_xs",
+		minWidth: 0
+	},
+	swatch: {
+		position: "relative",
+		height: "3rem",
+		borderRadius: "_md",
+		overflow: "hidden",
+		backgroundSize: "1rem 1rem"
+	},
+	fill: {
+		position: "absolute",
+		inset: 0
+	},
+	label: {
+		color: "_text",
+		fontSize: "_sm",
+		fontWeight: "_medium"
+	},
+	value: {
+		color: "_textMuted",
+		fontFamily: "_mono",
+		fontSize: "_xs"
+	}
+});
+/** ColorSwatch 的动态样式：色块的颜色 */
+var colorSwatchDynamicStyles = css.create({ fill: (color) => ({ backgroundColor: color }) });
+/** 色块（div）：颜色、名称与取值 */
+var ColorSwatch = /*#__PURE__*/ _component((_props, _ctx) => {
+	const color = readonlyProp(_props, "color");
+	const label = readonlyProp(_props, "label");
+	const value = readonlyProp(_props, "value");
+	const propsSwatch = readonlyProp(_props, "propsSwatch");
+	const rest = restProps(_props, _ctx, true);
+	const config = useConfig();
+	let swatch = shallowRef(null);
+	let resolved = ref("");
+	const isToken = () => color.value.startsWith("var(");
+	function resolve() {
+		if (swatch.value && isToken()) resolved.value = readToken(swatch.value, color.value);
+	}
+	onMounted(resolve);
+	watch(() => [config.theme, color.value], resolve, { flush: "post" });
+	return () => {
+		const shown = value.value ?? (isToken() ? resolved.value : color.value);
+		return createVNode("div", mergeAttrs({ sx: colorSwatchStyles.root }, rest), [
+			createVNode("div", mergeAttrs({ sx: [swatchStyles.checkerboard, colorSwatchStyles.swatch] }, propsSwatch.value, {
+				ref: swatch,
+				"aria-hidden": true
+			}), [createVNode("div", mergeAttrs({ sx: [
+				colorSwatchStyles.fill,
+				swatchStyles.ring,
+				css.bind(colorSwatchDynamicStyles.fill, () => [String(color.value)], true)
+			] }), null)]),
+			hasContent(label.value) && createVNode("span", mergeAttrs({ sx: colorSwatchStyles.label }), [label.value]),
+			shown !== false && shown !== "" && createVNode("span", mergeAttrs({ sx: colorSwatchStyles.value }), [shown])
+		]);
+	};
+}, {
+	name: "ColorSwatch",
+	props: [
+		"color",
+		"label",
+		"value",
+		"propsSwatch"
+	]
+});
+//#endregion
+export { ColorSwatch, colorSwatchDynamicStyles, colorSwatchStyles };
+
+//# sourceMappingURL=ColorSwatch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatch.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode"],"sources":["../../src/docs-kit/ColorSwatch.tsx"],"sourcesContent":["/**\n * 色块：一块颜色加它的名称与取值。主题文档里列调色板、设计 token 用。\n *\n *   <ColorSwatch color=\"#3e63dd\" label=\"品牌色\" />\n *   <ColorSwatch color={colors.accent} label=\"accent\" />   主题 token：取值按当前主题自动读出，换主题时跟着变\n *\n * 半透明的颜色（如 surfaceTranslucent）下面垫棋盘格，看得出透明度。色块是装饰，名称与取值是文字，读屏都能读到。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onMounted, watch, type VNodeChild } from 'vue';\nimport { useConfig } from '../config/context';\nimport { readToken } from '../config/theme/theme';\nimport { hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport { swatchStyles } from '../utils/style/swatch-styles';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface ColorSwatchProps extends PartProps<'div'> {\n  /** 颜色：任意 CSS 颜色，或主题 token（colors.accent） */\n  color: string;\n  /** 名称 */\n  label?: VNodeChild;\n  /** 显示的取值；不写时：普通颜色显示它本身，token 显示当前主题下的值；false 不显示 */\n  value?: VNodeChild | false;\n  /** 色块的部件属性 */\n  propsSwatch?: PartProps<'div'>;\n}\n\n/** ColorSwatch 的样式：root、swatch、fill、label、value */\nexport const colorSwatchStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column', gap: '_xs', minWidth: 0 },\n  // 棋盘格垫底、内描边画出边界（swatchStyles）；大色块的格子放大一倍\n  swatch: {\n    position: 'relative',\n    height: '3rem',\n    borderRadius: '_md',\n    overflow: 'hidden',\n    backgroundSize: '1rem 1rem',\n  },\n  fill: { position: 'absolute', inset: 0 },\n  label: { color: '_text', fontSize: '_sm', fontWeight: '_medium' },\n  value: { color: '_textMuted', fontFamily: '_mono', fontSize: '_xs' },\n});\n\n// 颜色是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** ColorSwatch 的动态样式：色块的颜色 */\nexport const colorSwatchDynamicStyles = css.create({\n  fill: (color: string) => ({ backgroundColor: color }),\n});\n\n/** 色块（div）：颜色、名称与取值 */\nexport const ColorSwatch = _component(\n  ({ color, label, value, propsSwatch, ...rest }: ColorSwatchProps) => {\n    const config = useConfig();\n    let swatch = _state.raw<HTMLElement | null>(null);\n    let resolved = _state('');\n\n    // token 在运行时是 var(--…)\n    const isToken = () => color.startsWith('var(');\n    // token 的值随主题变：挂载后、换主题后从色块上读\n    function resolve() {\n      if (swatch && isToken()) resolved = readToken(swatch, color);\n    }\n    onMounted(resolve);\n    watch(() => [config.theme, color], resolve, { flush: 'post' });\n\n    return () => {\n      const shown = value ?? (isToken() ? resolved : color);\n      return (\n        <div {...mergeAttrs<'div'>({ sx: colorSwatchStyles.root }, rest)}>\n          <div\n            {...mergeAttrs<'div'>(\n              { sx: [swatchStyles.checkerboard, colorSwatchStyles.swatch] },\n              propsSwatch,\n              {\n                ref: _toRef(swatch),\n                'aria-hidden': true,\n              },\n            )}\n          >\n            <div\n              {...mergeAttrs<'div'>({\n                sx: [\n                  colorSwatchStyles.fill,\n                  swatchStyles.ring,\n                  colorSwatchDynamicStyles.fill(String(color)),\n                ],\n              })}\n            />\n          </div>\n          {hasContent(label) && (\n            <span {...mergeAttrs<'span'>({ sx: colorSwatchStyles.label })}>{label}</span>\n          )}\n          {shown !== false && shown !== '' && (\n            <span {...mergeAttrs<'span'>({ sx: colorSwatchStyles.value })}>{shown}</span>\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;AA6BA,IAAa,oBAAoB,IAAI,OAAO;CAC1C,MAAM;EAAE,SAAS;EAAQ,eAAe;EAAU,KAAK;EAAO,UAAU;CAAE;CAE1E,QAAQ;EACN,UAAU;EACV,QAAQ;EACR,cAAc;EACd,UAAU;EACV,gBAAgB;CAClB;CACA,MAAM;EAAE,UAAU;EAAY,OAAO;CAAE;CACvC,OAAO;EAAE,OAAO;EAAS,UAAU;EAAO,YAAY;CAAU;CAChE,OAAO;EAAE,OAAO;EAAc,YAAY;EAAS,UAAU;CAAM;AACrE,CAAC;;AAID,IAAa,2BAA2B,IAAI,OAAO,EACjD,OAAO,WAAmB,EAAE,iBAAiB,MAAM,GACrD,CAAC;;AAGD,IAAa,cAAc,0BACzB,QAAA,SAAqE;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAA7B,OAAIC,UAAA,QAAA,MAAA,IAAA;CAC1C,MAAM,SAAS,UAAU;CACzB,IAAI,SAAMC,WAAkC,IAAI;CAChD,IAAI,WAAQC,IAAU,EAAE;CAGxB,MAAM,gBAAgB,MAAA,MAAM,WAAW,MAAM;CAE7C,SAAS,UAAU;EACjB,IAAI,OAAA,SAAU,QAAQ,GAAG,SAAA,QAAW,UAAS,OAAA,OAAA,MAAA,KAAc;CAC7D;CACA,UAAU,OAAO;CACjB,YAAY,CAAC,OAAO,OAAK,MAAA,KAAA,GAAU,SAAS,EAAE,OAAO,OAAO,CAAC;CAE7D,aAAa;EACX,MAAM,QAAQ,MAAA,UAAU,QAAQ,IAAC,SAAA,QAAA,MAAA;EACjC,OAAAC,YAAA,OACW,WAAkB,EAAE,IAAI,kBAAkB,KAAK,GAAG,IAAI,GAAC;GAAAA,YAAA,OAExD,WACF,EAAE,IAAI,CAAC,aAAa,cAAc,kBAAkB,MAAM,EAAE,GAAC,YAAA,OAE7D;IACE,KAAG;IACH,eAAe;GACjB,CACF,GAAC,CAAAA,YAAA,OAGK,WAAkB,EACpB,IAAI;IACF,kBAAkB;IAClB,aAAa;IAAI,IAAA,KACjB,yBAAyB,YAAI,CAAC,OAAM,MAAA,KAAM,CAAC,GAAA,IAAA;GAAA,EAE/C,CAAC,GAAC,IAAA,CAAA,CAAA;GAGL,WAAU,MAAA,KAAM,KAACA,YAAA,QACN,WAAmB,EAAE,IAAI,kBAAkB,MAAM,CAAC,GAAC,CAAA,MAAA,KAAA,CAAA;GAE9D,UAAU,SAAS,UAAU,MAAEA,YAAA,QACpB,WAAmB,EAAE,IAAI,kBAAkB,MAAM,CAAC,GAAC,CAAG,KAAK,CAAA;EACtE,CAAA;CAGP;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

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

@@ -0,0 +1,73 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type TableProps } from '../table/Table';
+/** prop 的种类：文档里分开列出 */
+export interface ApiPropKinds {
+    /** 普通属性：外观、状态、数据 */
+    prop: unknown;
+    /** 部件属性（propsXxx）：透传给内部的某个部件 */
+    part: unknown;
+    /** 事件（onXxx） */
+    event: unknown;
+    /** 内容：children 与渲染函数（renderXxx） */
+    content: unknown;
+}
+/** 档位类 prop 的一个可选值 */
+export interface ApiValue {
+    /** 取值 */
+    value: string;
+    /** 这个值的含义；没有注释时为空 */
+    description: string;
+}
+/** 一个 prop 的文档数据 */
+export interface ApiProp {
+    /** 名称 */
+    name: string;
+    /** 种类 */
+    kind: keyof ApiPropKinds;
+    /** 类型（源码里写的样子，如 `keyof ButtonVariants`） */
+    type: string;
+    /** 必填 */
+    required: boolean;
+    /** 默认值（源码表达式，如 `'button'`、`false`）；没有时不显示 */
+    default?: string;
+    /** 能用 `_bind` 双向绑定 */
+    bindable?: boolean;
+    /** 说明 */
+    description: string;
+    /** 档位类的可选值与各自的含义 */
+    values?: ApiValue[];
+}
+/** 一个组件的 API 文档数据 */
+export interface ComponentApi {
+    /** Props 接口的名字 */
+    name: string;
+    /** 组件名：ButtonProps → Button；泛型组件的 SelectBaseProps → Select */
+    component: string;
+    /** 接口的说明（如“未声明的属性落到 button 上”） */
+    description: string;
+    /** 各个 prop */
+    props: ApiProp[];
+}
+/** 未声明的属性落到 table 上 */
+export interface PropsTableProps extends TableProps {
+    /** 要列出的 prop */
+    props: readonly ApiProp[];
+    /** 表格标题（caption），同时是表格的名称 */
+    caption?: VNodeChild;
+}
+/** PropsTable 的样式：name、nameCode、head、descriptionCell、type、muted、description、values、valueTerm、valueText */
+export declare const propsTableStyles: Readonly<{
+    description: css.CompiledStyles;
+    descriptionCell: css.CompiledStyles;
+    head: css.CompiledStyles;
+    muted: css.CompiledStyles;
+    name: css.CompiledStyles;
+    nameCode: css.CompiledStyles;
+    type: css.CompiledStyles;
+    valueTerm: css.CompiledStyles;
+    valueText: css.CompiledStyles;
+    values: css.CompiledStyles;
+}>;
+/** 组件 API 的表格：名称、类型、默认值、说明与可选值 */
+export declare const PropsTable: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<PropsTableProps>;