@qw-ui/core 0.1.0 → 0.2.0-next.0

package/dist/search-bar/index.js

@@ -0,0 +1,252 @@
+import { createMachine } from "@zag-js/core";
+import { compact } from "@zag-js/utils";
+//#region src/search-bar/search-bar.ts
+/**
+* 解析 clearable 配置为统一对象。
+*/
+function normalizeClearable(clearable) {
+	if (clearable === false) return { showWhen: "never" };
+	if (clearable === true || clearable == null) return { showWhen: "non-empty" };
+	return { showWhen: clearable.showWhen ?? "non-empty" };
+}
+/**
+* SearchBar zag.js machine。
+* 所有交互逻辑唯一来源：value、focus、clear、action、keyboard。
+*/
+const machine = createMachine({
+	props({ props }) {
+		return {
+			defaultValue: "",
+			disabled: false,
+			readOnly: false,
+			...props
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ bindable, prop }) {
+		return {
+			value: bindable(() => {
+				const controlledValue = prop("value");
+				return {
+					defaultValue: prop("defaultValue") ?? "",
+					...controlledValue !== void 0 ? { value: controlledValue } : {},
+					onChange(value, prev) {
+						if (value !== prev) prop("onChange")?.(value);
+					}
+				};
+			}),
+			focused: bindable(() => ({ defaultValue: false }))
+		};
+	},
+	computed: {
+		clearableConfig({ prop }) {
+			return normalizeClearable(prop("clearable"));
+		},
+		showClear({ context, computed }) {
+			const cfg = computed("clearableConfig");
+			if (cfg.showWhen === "always") return true;
+			if (cfg.showWhen === "never") return false;
+			if (cfg.showWhen === "focus") return context.get("focused");
+			return context.get("value").length > 0;
+		}
+	},
+	watch({ track, action, prop, context }) {
+		track([() => prop("value")], () => {
+			const external = prop("value");
+			if (external !== void 0 && external !== context.get("value")) action(["setValue"]);
+		});
+	},
+	states: { idle: { on: {
+		"VALUE.SET": { actions: ["setValue"] },
+		"VALUE.CLEAR": { actions: ["clearValue", "invokeOnClear"] },
+		"FOCUS.SET": { actions: ["setFocused"] },
+		SEARCH: { actions: ["invokeOnSearch"] },
+		CANCEL: { actions: ["invokeOnCancel"] }
+	} } },
+	implementations: { actions: {
+		setValue({ context, event, prop }) {
+			if (event.type === "VALUE.SET") {
+				const maxLength = prop("maxLength") ?? 0;
+				const current = context.get("value");
+				let next = event.value;
+				if (maxLength > 0 && next.length > maxLength) next = current;
+				context.set("value", next);
+			}
+		},
+		clearValue({ context }) {
+			context.set("value", "");
+		},
+		setFocused({ context, event, prop }) {
+			if (event.type === "FOCUS.SET") {
+				const next = event.focused;
+				const prev = context.get("focused");
+				context.set("focused", next);
+				if (next && !prev) prop("onFocus")?.();
+				if (!next && prev) prop("onBlur")?.();
+			}
+		},
+		invokeOnSearch({ context, prop }) {
+			prop("onSearch")?.(context.get("value"));
+		},
+		invokeOnClear({ prop }) {
+			prop("onClear")?.();
+		},
+		invokeOnCancel({ context, prop, event }) {
+			const config = event.src === "prefix" ? prop("prefix") : prop("action");
+			if (config?.type === "cancel" && config.clearOnCancel && !prop("readOnly")) context.set("value", "");
+			prop("onCancel")?.();
+		},
+		invokeOnFocus() {},
+		invokeOnBlur() {}
+	} }
+});
+/**
+* connect：把 service 接成业务友好的 prop-getter。
+* 适配层只需调用 connect(service, normalizeProps)。
+*/
+function connect(service, normalizeProps) {
+	const { context, computed, prop, send } = service;
+	const value = context.get("value");
+	const focused = context.get("focused");
+	const showClear = computed("showClear");
+	const disabled = !!prop("disabled");
+	const readOnly = !!prop("readOnly");
+	const maxLength = prop("maxLength");
+	const prefix = prop("prefix");
+	const action = prop("action");
+	return {
+		value,
+		focused,
+		showClear,
+		clear() {
+			send({ type: "VALUE.CLEAR" });
+		},
+		search() {
+			send({ type: "SEARCH" });
+		},
+		getRootProps() {
+			return normalizeProps.element(compact({
+				"data-scope": "search-bar",
+				"data-part": "root",
+				"data-focused": focused ? "true" : void 0,
+				"data-disabled": disabled ? "true" : void 0,
+				"data-readonly": readOnly ? "true" : void 0
+			}));
+		},
+		getFieldProps() {
+			return normalizeProps.element(compact({
+				"data-scope": "search-bar",
+				"data-part": "field"
+			}));
+		},
+		getInputProps() {
+			return normalizeProps.input(compact({
+				"data-scope": "search-bar",
+				"data-part": "input",
+				type: "search",
+				role: "searchbox",
+				value,
+				placeholder: prop("placeholder"),
+				disabled,
+				readOnly,
+				maxLength: maxLength && maxLength > 0 ? maxLength : void 0,
+				"aria-disabled": disabled ? "true" : void 0,
+				"aria-readonly": readOnly ? "true" : void 0,
+				onFocus() {
+					send({
+						type: "FOCUS.SET",
+						focused: true
+					});
+				},
+				onBlur() {
+					send({
+						type: "FOCUS.SET",
+						focused: false
+					});
+				},
+				onChange(event) {
+					const next = event.target.value;
+					send({
+						type: "VALUE.SET",
+						value: next
+					});
+				},
+				onKeyDown(event) {
+					if (event.key === "Enter") send({ type: "SEARCH" });
+				}
+			}));
+		},
+		getIconProps() {
+			return normalizeProps.element(compact({
+				"data-scope": "search-bar",
+				"data-part": "icon",
+				"aria-hidden": "true"
+			}));
+		},
+		getClearButtonProps() {
+			return normalizeProps.button(compact({
+				"data-scope": "search-bar",
+				"data-part": "clear-button",
+				type: "button",
+				disabled: disabled || readOnly,
+				"aria-label": "清除搜索内容",
+				"aria-hidden": !showClear,
+				hidden: !showClear,
+				onClick() {
+					send({ type: "VALUE.CLEAR" });
+				}
+			}));
+		},
+		getPrefixButtonProps() {
+			return normalizeProps.button(compact({
+				"data-scope": "search-bar",
+				"data-part": "prefix-button",
+				type: "button",
+				disabled,
+				"aria-label": prefix?.ariaLabel,
+				"data-action": prefix?.type,
+				onClick() {
+					if (prefix?.type === "cancel") send({
+						type: "CANCEL",
+						src: "prefix"
+					});
+					else if (prefix?.type === "search") send({ type: "SEARCH" });
+				}
+			}));
+		},
+		getActionButtonProps() {
+			return normalizeProps.button(compact({
+				"data-scope": "search-bar",
+				"data-part": "action-button",
+				type: "button",
+				disabled,
+				"aria-label": action?.ariaLabel,
+				"data-action": action?.type,
+				onClick() {
+					if (action?.type === "cancel") send({
+						type: "CANCEL",
+						src: "action"
+					});
+					else if (action?.type === "search") send({ type: "SEARCH" });
+				}
+			}));
+		}
+	};
+}
+/**
+* 把 QwSearchBarProps 转成 machine context（默认值收口）。
+*/
+function createSearchBarProps(props = {}) {
+	return {
+		defaultValue: props.defaultValue ?? "",
+		disabled: props.disabled ?? false,
+		readOnly: props.readOnly ?? false,
+		...props
+	};
+}
+//#endregion
+export { connect, createSearchBarProps, machine };
+
+//# sourceMappingURL=index.js.map

package/dist/search-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/search-bar/search-bar.ts"],"sourcesContent":["import { createMachine } from \"@zag-js/core\";\nimport type { MachineSchema, Service } from \"@zag-js/core\";\nimport type { PropTypes, NormalizeProps } from \"@zag-js/types\";\nimport type { JSX } from \"@zag-js/types\";\nimport { compact } from \"@zag-js/utils\";\n\n/**\n * 清除按钮显示策略。\n */\nexport type SearchBarClearable = boolean | { showWhen?: \"always\" | \"focus\" | \"non-empty\" };\n\n/**\n * 内部归一化后的显示策略（包含 `never`，表示 `clearable={false}`）。\n */\nexport type SearchBarClearableMode = \"always\" | \"focus\" | \"non-empty\" | \"never\";\n\nexport interface SearchBarClearableConfig {\n  showWhen: SearchBarClearableMode;\n}\n\n/**\n * 右侧 action 按钮角色。\n */\nexport type SearchBarActionType = \"cancel\" | \"search\";\n\n/**\n * 右侧 action 按钮配置。\n */\nexport interface SearchBarAction {\n  /** 按钮角色。 */\n  type: SearchBarActionType;\n  /** 展示内容：文案或自定义节点。 */\n  content: string | unknown;\n  /** 取消时是否清空输入。 */\n  clearOnCancel?: boolean;\n  /** 按钮可访问名称；当 content 为纯图标时必填。 */\n  ariaLabel?: string;\n}\n\n/**\n * SearchBar 公共 props 契约（双栈共享）。\n */\nexport interface QwSearchBarProps {\n  /** 唯一 id 前缀。 */\n  id?: string;\n  /** 受控值。 */\n  value?: string;\n  /** 非受控初始值。 */\n  defaultValue?: string;\n  /** 占位符。 */\n  placeholder?: string;\n  /** 最大字符数。 */\n  maxLength?: number;\n  /** 禁用态。 */\n  disabled?: boolean;\n  /** 只读态。 */\n  readOnly?: boolean;\n  /** 清除按钮配置。 */\n  clearable?: SearchBarClearable;\n  /** 左侧搜索图标：字符串文案或自定义节点。 */\n  searchIcon?: string | unknown;\n  /** 左侧按钮配置。 */\n  prefix?: SearchBarAction;\n  /** 右侧按钮配置。 */\n  action?: SearchBarAction;\n  /** 输入变化回调。 */\n  onChange?: (value: string) => void;\n  /** 搜索确认回调（Enter 或点击搜索按钮）。 */\n  onSearch?: (value: string) => void;\n  /** 清空回调。 */\n  onClear?: () => void;\n  /** 取消回调。 */\n  onCancel?: () => void;\n  /** 聚焦回调。 */\n  onFocus?: () => void;\n  /** 失焦回调。 */\n  onBlur?: () => void;\n}\n\n/**\n * 内部 schema，用于 createMachine 类型推导。\n */\ninterface SearchBarSchema extends MachineSchema {\n  props: QwSearchBarProps;\n  context: {\n    value: string;\n    focused: boolean;\n  };\n  computed: {\n    showClear: boolean;\n    clearableConfig: SearchBarClearableConfig;\n  };\n  state: \"idle\";\n  event:\n    | { type: \"VALUE.SET\"; value: string; src?: string }\n    | { type: \"VALUE.CLEAR\" }\n    | { type: \"FOCUS.SET\"; focused: boolean }\n    | { type: \"SEARCH\" }\n    | { type: \"CANCEL\"; src?: \"prefix\" | \"action\" };\n  action:\n    | \"setValue\"\n    | \"clearValue\"\n    | \"setFocused\"\n    | \"invokeOnSearch\"\n    | \"invokeOnClear\"\n    | \"invokeOnCancel\"\n    | \"invokeOnFocus\"\n    | \"invokeOnBlur\";\n}\n\n/**\n * 解析 clearable 配置为统一对象。\n */\nfunction normalizeClearable(clearable?: SearchBarClearable): SearchBarClearableConfig {\n  if (clearable === false) return { showWhen: \"never\" };\n  if (clearable === true || clearable == null) return { showWhen: \"non-empty\" };\n  return { showWhen: clearable.showWhen ?? \"non-empty\" };\n}\n\n/**\n * SearchBar zag.js machine。\n * 所有交互逻辑唯一来源：value、focus、clear、action、keyboard。\n */\nexport const machine = createMachine<SearchBarSchema>({\n  props({ props }) {\n    return {\n      defaultValue: \"\",\n      disabled: false,\n      readOnly: false,\n      ...props,\n    };\n  },\n\n  initialState() {\n    return \"idle\";\n  },\n\n  context({ bindable, prop }) {\n    return {\n      value: bindable<string>(() => {\n        const controlledValue = prop(\"value\");\n        return {\n          defaultValue: prop(\"defaultValue\") ?? \"\",\n          ...(controlledValue !== undefined ? { value: controlledValue } : {}),\n          onChange(value, prev) {\n            if (value !== prev) {\n              prop(\"onChange\")?.(value);\n            }\n          },\n        };\n      }),\n      focused: bindable(() => ({\n        defaultValue: false,\n      })),\n    };\n  },\n\n  computed: {\n    clearableConfig({ prop }) {\n      return normalizeClearable(prop(\"clearable\"));\n    },\n    showClear({ context, computed }) {\n      const cfg = computed(\"clearableConfig\");\n      if (cfg.showWhen === \"always\") return true;\n      if (cfg.showWhen === \"never\") return false;\n      if (cfg.showWhen === \"focus\") return context.get(\"focused\");\n      return context.get(\"value\").length > 0;\n    },\n  },\n\n  watch({ track, action, prop, context }) {\n    track([() => prop(\"value\")], () => {\n      const external = prop(\"value\");\n      if (external !== undefined && external !== context.get(\"value\")) {\n        action([\"setValue\"]);\n      }\n    });\n  },\n\n  states: {\n    idle: {\n      on: {\n        \"VALUE.SET\": {\n          actions: [\"setValue\"],\n        },\n        \"VALUE.CLEAR\": {\n          actions: [\"clearValue\", \"invokeOnClear\"],\n        },\n        \"FOCUS.SET\": {\n          actions: [\"setFocused\"],\n        },\n        SEARCH: {\n          actions: [\"invokeOnSearch\"],\n        },\n        CANCEL: {\n          actions: [\"invokeOnCancel\"],\n        },\n      },\n    },\n  },\n\n  implementations: {\n    actions: {\n      setValue({ context, event, prop }) {\n        if (event.type === \"VALUE.SET\") {\n          const maxLength = prop(\"maxLength\") ?? 0;\n          const current = context.get(\"value\");\n          let next = event.value;\n          if (maxLength > 0 && next.length > maxLength) {\n            // 达到 maxLength 后阻止继续输入，保留旧值\n            next = current;\n          }\n          context.set(\"value\", next);\n        }\n      },\n      clearValue({ context }) {\n        context.set(\"value\", \"\");\n      },\n      setFocused({ context, event, prop }) {\n        if (event.type === \"FOCUS.SET\") {\n          const next = event.focused;\n          const prev = context.get(\"focused\");\n          context.set(\"focused\", next);\n          if (next && !prev) prop(\"onFocus\")?.();\n          if (!next && prev) prop(\"onBlur\")?.();\n        }\n      },\n      invokeOnSearch({ context, prop }) {\n        prop(\"onSearch\")?.(context.get(\"value\"));\n      },\n      invokeOnClear({ prop }) {\n        prop(\"onClear\")?.();\n      },\n      invokeOnCancel({ context, prop, event }) {\n        const config = event.src === \"prefix\" ? prop(\"prefix\") : prop(\"action\");\n        if (config?.type === \"cancel\" && config.clearOnCancel && !prop(\"readOnly\")) {\n          context.set(\"value\", \"\");\n        }\n        prop(\"onCancel\")?.();\n      },\n      invokeOnFocus() {\n        // focus 回调在 setFocused 中已触发\n      },\n      invokeOnBlur() {\n        // blur 回调在 setFocused 中已触发\n      },\n    },\n  },\n});\n\n/**\n * SearchBar api 类型（由 connect 返回）。\n */\nexport interface SearchBarApi<T extends PropTypes = PropTypes> {\n  /** 当前输入值。 */\n  value: string;\n  /** 当前是否聚焦。 */\n  focused: boolean;\n  /** 是否显示清除按钮。 */\n  showClear: boolean;\n  /** 清空输入。 */\n  clear(): void;\n  /** 触发搜索。 */\n  search(): void;\n  /** 根容器 prop-getter。 */\n  getRootProps(): T[\"element\"];\n  /** 输入区容器 prop-getter（包含图标、输入框、清除按钮）。 */\n  getFieldProps(): T[\"element\"];\n  /** 输入框 prop-getter。 */\n  getInputProps(): T[\"input\"];\n  /** 左侧图标 prop-getter。 */\n  getIconProps(): T[\"element\"];\n  /** 清除按钮 prop-getter。 */\n  getClearButtonProps(): T[\"button\"];\n  /** 左侧 prefix 按钮 prop-getter。 */\n  getPrefixButtonProps(): T[\"button\"];\n  /** 右侧 action 按钮 prop-getter。 */\n  getActionButtonProps(): T[\"button\"];\n}\n\n/**\n * connect：把 service 接成业务友好的 prop-getter。\n * 适配层只需调用 connect(service, normalizeProps)。\n */\nexport function connect<T extends PropTypes>(service: Service<SearchBarSchema>, normalizeProps: NormalizeProps<T>): SearchBarApi<T> {\n  const { context, computed, prop, send } = service;\n\n  const value = context.get(\"value\");\n  const focused = context.get(\"focused\");\n  const showClear = computed(\"showClear\");\n  const disabled = !!prop(\"disabled\");\n  const readOnly = !!prop(\"readOnly\");\n  const maxLength = prop(\"maxLength\");\n  const prefix = prop(\"prefix\");\n  const action = prop(\"action\");\n\n  return {\n    value,\n    focused,\n    showClear,\n\n    clear() {\n      send({ type: \"VALUE.CLEAR\" });\n    },\n\n    search() {\n      send({ type: \"SEARCH\" });\n    },\n\n    getRootProps() {\n      return normalizeProps.element(\n        compact({\n          \"data-scope\": \"search-bar\",\n          \"data-part\": \"root\",\n          \"data-focused\": focused ? \"true\" : undefined,\n          \"data-disabled\": disabled ? \"true\" : undefined,\n          \"data-readonly\": readOnly ? \"true\" : undefined,\n        }),\n      );\n    },\n\n    getFieldProps() {\n      return normalizeProps.element(\n        compact({\n          \"data-scope\": \"search-bar\",\n          \"data-part\": \"field\",\n        }),\n      );\n    },\n\n    getInputProps() {\n      return normalizeProps.input(\n        compact({\n          \"data-scope\": \"search-bar\",\n          \"data-part\": \"input\",\n          type: \"search\" as const,\n          role: \"searchbox\" as const,\n          value,\n          placeholder: prop(\"placeholder\"),\n          disabled,\n          readOnly,\n          maxLength: maxLength && maxLength > 0 ? maxLength : undefined,\n          \"aria-disabled\": disabled ? (\"true\" as const) : undefined,\n          \"aria-readonly\": readOnly ? (\"true\" as const) : undefined,\n          onFocus() {\n            send({ type: \"FOCUS.SET\", focused: true });\n          },\n          onBlur() {\n            send({ type: \"FOCUS.SET\", focused: false });\n          },\n          onChange(event: JSX.ChangeEvent<HTMLInputElement>) {\n            const target = event.target as HTMLInputElement;\n            const next = target.value;\n            send({ type: \"VALUE.SET\", value: next });\n          },\n          onKeyDown(event: JSX.KeyboardEvent<HTMLInputElement>) {\n            if (event.key === \"Enter\") {\n              send({ type: \"SEARCH\" });\n            }\n          },\n        }),\n      );\n    },\n\n    getIconProps() {\n      return normalizeProps.element(\n        compact({\n          \"data-scope\": \"search-bar\",\n          \"data-part\": \"icon\",\n          \"aria-hidden\": \"true\" as const,\n        }),\n      );\n    },\n\n    getClearButtonProps() {\n      return normalizeProps.button(\n        compact({\n          \"data-scope\": \"search-bar\",\n          \"data-part\": \"clear-button\",\n          type: \"button\" as const,\n          disabled: disabled || readOnly,\n          \"aria-label\": \"清除搜索内容\" as const,\n          \"aria-hidden\": !showClear,\n          hidden: !showClear,\n          onClick() {\n            send({ type: \"VALUE.CLEAR\" });\n          },\n        }),\n      );\n    },\n\n    getPrefixButtonProps() {\n      return normalizeProps.button(\n        compact({\n          \"data-scope\": \"search-bar\",\n          \"data-part\": \"prefix-button\",\n          type: \"button\" as const,\n          disabled,\n          \"aria-label\": prefix?.ariaLabel,\n          \"data-action\": prefix?.type,\n          onClick() {\n            if (prefix?.type === \"cancel\") {\n              send({ type: \"CANCEL\", src: \"prefix\" });\n            } else if (prefix?.type === \"search\") {\n              send({ type: \"SEARCH\" });\n            }\n          },\n        }),\n      );\n    },\n\n    getActionButtonProps() {\n      return normalizeProps.button(\n        compact({\n          \"data-scope\": \"search-bar\",\n          \"data-part\": \"action-button\",\n          type: \"button\" as const,\n          disabled,\n          \"aria-label\": action?.ariaLabel,\n          \"data-action\": action?.type,\n          onClick() {\n            if (action?.type === \"cancel\") {\n              send({ type: \"CANCEL\", src: \"action\" });\n            } else if (action?.type === \"search\") {\n              send({ type: \"SEARCH\" });\n            }\n          },\n        }),\n      );\n    },\n  };\n}\n\n/**\n * 把 QwSearchBarProps 转成 machine context（默认值收口）。\n */\nexport function createSearchBarProps(props: QwSearchBarProps = {}): Partial<QwSearchBarProps> {\n  return {\n    defaultValue: props.defaultValue ?? \"\",\n    disabled: props.disabled ?? false,\n    readOnly: props.readOnly ?? false,\n    ...props,\n  };\n}\n"],"mappings":"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"}

package/dist/search-bar/search-bar.d.ts

@@ -0,0 +1,146 @@
+import type { MachineSchema, Service } from "@zag-js/core";
+import type { PropTypes, NormalizeProps } from "@zag-js/types";
+/**
+ * 清除按钮显示策略。
+ */
+export type SearchBarClearable = boolean | {
+    showWhen?: "always" | "focus" | "non-empty";
+};
+/**
+ * 内部归一化后的显示策略（包含 `never`，表示 `clearable={false}`）。
+ */
+export type SearchBarClearableMode = "always" | "focus" | "non-empty" | "never";
+export interface SearchBarClearableConfig {
+    showWhen: SearchBarClearableMode;
+}
+/**
+ * 右侧 action 按钮角色。
+ */
+export type SearchBarActionType = "cancel" | "search";
+/**
+ * 右侧 action 按钮配置。
+ */
+export interface SearchBarAction {
+    /** 按钮角色。 */
+    type: SearchBarActionType;
+    /** 展示内容：文案或自定义节点。 */
+    content: string | unknown;
+    /** 取消时是否清空输入。 */
+    clearOnCancel?: boolean;
+    /** 按钮可访问名称；当 content 为纯图标时必填。 */
+    ariaLabel?: string;
+}
+/**
+ * SearchBar 公共 props 契约（双栈共享）。
+ */
+export interface QwSearchBarProps {
+    /** 唯一 id 前缀。 */
+    id?: string;
+    /** 受控值。 */
+    value?: string;
+    /** 非受控初始值。 */
+    defaultValue?: string;
+    /** 占位符。 */
+    placeholder?: string;
+    /** 最大字符数。 */
+    maxLength?: number;
+    /** 禁用态。 */
+    disabled?: boolean;
+    /** 只读态。 */
+    readOnly?: boolean;
+    /** 清除按钮配置。 */
+    clearable?: SearchBarClearable;
+    /** 左侧搜索图标：字符串文案或自定义节点。 */
+    searchIcon?: string | unknown;
+    /** 左侧按钮配置。 */
+    prefix?: SearchBarAction;
+    /** 右侧按钮配置。 */
+    action?: SearchBarAction;
+    /** 输入变化回调。 */
+    onChange?: (value: string) => void;
+    /** 搜索确认回调（Enter 或点击搜索按钮）。 */
+    onSearch?: (value: string) => void;
+    /** 清空回调。 */
+    onClear?: () => void;
+    /** 取消回调。 */
+    onCancel?: () => void;
+    /** 聚焦回调。 */
+    onFocus?: () => void;
+    /** 失焦回调。 */
+    onBlur?: () => void;
+}
+/**
+ * 内部 schema，用于 createMachine 类型推导。
+ */
+interface SearchBarSchema extends MachineSchema {
+    props: QwSearchBarProps;
+    context: {
+        value: string;
+        focused: boolean;
+    };
+    computed: {
+        showClear: boolean;
+        clearableConfig: SearchBarClearableConfig;
+    };
+    state: "idle";
+    event: {
+        type: "VALUE.SET";
+        value: string;
+        src?: string;
+    } | {
+        type: "VALUE.CLEAR";
+    } | {
+        type: "FOCUS.SET";
+        focused: boolean;
+    } | {
+        type: "SEARCH";
+    } | {
+        type: "CANCEL";
+        src?: "prefix" | "action";
+    };
+    action: "setValue" | "clearValue" | "setFocused" | "invokeOnSearch" | "invokeOnClear" | "invokeOnCancel" | "invokeOnFocus" | "invokeOnBlur";
+}
+/**
+ * SearchBar zag.js machine。
+ * 所有交互逻辑唯一来源：value、focus、clear、action、keyboard。
+ */
+export declare const machine: import("@zag-js/core").Machine<SearchBarSchema>;
+/**
+ * SearchBar api 类型（由 connect 返回）。
+ */
+export interface SearchBarApi<T extends PropTypes = PropTypes> {
+    /** 当前输入值。 */
+    value: string;
+    /** 当前是否聚焦。 */
+    focused: boolean;
+    /** 是否显示清除按钮。 */
+    showClear: boolean;
+    /** 清空输入。 */
+    clear(): void;
+    /** 触发搜索。 */
+    search(): void;
+    /** 根容器 prop-getter。 */
+    getRootProps(): T["element"];
+    /** 输入区容器 prop-getter（包含图标、输入框、清除按钮）。 */
+    getFieldProps(): T["element"];
+    /** 输入框 prop-getter。 */
+    getInputProps(): T["input"];
+    /** 左侧图标 prop-getter。 */
+    getIconProps(): T["element"];
+    /** 清除按钮 prop-getter。 */
+    getClearButtonProps(): T["button"];
+    /** 左侧 prefix 按钮 prop-getter。 */
+    getPrefixButtonProps(): T["button"];
+    /** 右侧 action 按钮 prop-getter。 */
+    getActionButtonProps(): T["button"];
+}
+/**
+ * connect：把 service 接成业务友好的 prop-getter。
+ * 适配层只需调用 connect(service, normalizeProps)。
+ */
+export declare function connect<T extends PropTypes>(service: Service<SearchBarSchema>, normalizeProps: NormalizeProps<T>): SearchBarApi<T>;
+/**
+ * 把 QwSearchBarProps 转成 machine context（默认值收口）。
+ */
+export declare function createSearchBarProps(props?: QwSearchBarProps): Partial<QwSearchBarProps>;
+export {};

package/dist/skeleton/index.d.ts

@@ -0,0 +1 @@
+export * from "./skeleton.js";

package/dist/skeleton/index.js

@@ -0,0 +1,28 @@
+//#region src/skeleton/skeleton.ts
+/**
+* Skeleton 契约 — 原型 A（无状态），core 无 machine，只承载双栈共享的类型契约。
+* 渲染契约：`data-scope="skeleton"`，`aria-hidden="true"`；
+* data-part 为 root / line；流光动效纯 CSS，尊重 `prefers-reduced-motion`。
+*
+* 形状 / 动效 / 圆角词表以运行时常量数组为唯一事实源（类型从常量推导），__test__ 直接锁死。
+*/
+/** 形状全集：text 文本条 / circle 头像 / rect 图片卡片块。 */
+const SKELETON_VARIANTS = [
+	"text",
+	"circle",
+	"rect"
+];
+/** 动效全集：wave 流光（默认）/ none 静态。 */
+const SKELETON_ANIMATIONS = ["wave", "none"];
+/** 圆角档位全集。 */
+const SKELETON_RADII = [
+	"control",
+	"card",
+	"full"
+];
+/** Skeleton 各渲染部位全集（data-part 取值）。 */
+const SKELETON_PARTS = ["root", "line"];
+//#endregion
+export { SKELETON_ANIMATIONS, SKELETON_PARTS, SKELETON_RADII, SKELETON_VARIANTS };
+
+//# sourceMappingURL=index.js.map

package/dist/skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/skeleton/skeleton.ts"],"sourcesContent":["/**\n * Skeleton 契约 — 原型 A（无状态），core 无 machine，只承载双栈共享的类型契约。\n * 渲染契约：`data-scope=\"skeleton\"`，`aria-hidden=\"true\"`；\n * data-part 为 root / line；流光动效纯 CSS，尊重 `prefers-reduced-motion`。\n *\n * 形状 / 动效 / 圆角词表以运行时常量数组为唯一事实源（类型从常量推导），__test__ 直接锁死。\n */\n\n/** 形状全集：text 文本条 / circle 头像 / rect 图片卡片块。 */\nexport const SKELETON_VARIANTS = [\"text\", \"circle\", \"rect\"] as const;\n\n/** 动效全集：wave 流光（默认）/ none 静态。 */\nexport const SKELETON_ANIMATIONS = [\"wave\", \"none\"] as const;\n\n/** 圆角档位全集。 */\nexport const SKELETON_RADII = [\"control\", \"card\", \"full\"] as const;\n\n/** Skeleton 各渲染部位全集（data-part 取值）。 */\nexport const SKELETON_PARTS = [\"root\", \"line\"] as const;\n\nexport type SkeletonVariant = (typeof SKELETON_VARIANTS)[number];\nexport type SkeletonAnimation = (typeof SKELETON_ANIMATIONS)[number];\nexport type SkeletonRadius = (typeof SKELETON_RADII)[number];\nexport type SkeletonPart = (typeof SKELETON_PARTS)[number];\n\n/**\n * QwSkeletonProps — 双栈共享的行为契约。\n * 几何 width/height 的 number|string 形式是框架无关的；\n * 富内容不涉及（骨架不承载文本）。\n */\nexport interface QwSkeletonProps {\n  /** 形状，默认 text。 */\n  variant?: SkeletonVariant;\n  /** 动效，默认 wave。 */\n  animation?: SkeletonAnimation;\n  /** 宽度，数值按 px 处理。 */\n  width?: number | string;\n  /** 高度，数值按 px 处理。 */\n  height?: number | string;\n  /** 圆角档位（circle 恒为正圆，忽略此项）。 */\n  radius?: SkeletonRadius;\n  /** 仅 text：一次渲染多行文本条，末行更短。默认 1。 */\n  lines?: number;\n}\n"],"mappings":";;;;;;;;;AASA,MAAa,oBAAoB;CAAC;CAAQ;CAAU;AAAM;;AAG1D,MAAa,sBAAsB,CAAC,QAAQ,MAAM;;AAGlD,MAAa,iBAAiB;CAAC;CAAW;CAAQ;AAAM;;AAGxD,MAAa,iBAAiB,CAAC,QAAQ,MAAM"}

package/dist/skeleton/skeleton.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Skeleton 契约 — 原型 A（无状态），core 无 machine，只承载双栈共享的类型契约。
+ * 渲染契约：`data-scope="skeleton"`，`aria-hidden="true"`；
+ * data-part 为 root / line；流光动效纯 CSS，尊重 `prefers-reduced-motion`。
+ *
+ * 形状 / 动效 / 圆角词表以运行时常量数组为唯一事实源（类型从常量推导），__test__ 直接锁死。
+ */
+/** 形状全集：text 文本条 / circle 头像 / rect 图片卡片块。 */
+export declare const SKELETON_VARIANTS: readonly ["text", "circle", "rect"];
+/** 动效全集：wave 流光（默认）/ none 静态。 */
+export declare const SKELETON_ANIMATIONS: readonly ["wave", "none"];
+/** 圆角档位全集。 */
+export declare const SKELETON_RADII: readonly ["control", "card", "full"];
+/** Skeleton 各渲染部位全集（data-part 取值）。 */
+export declare const SKELETON_PARTS: readonly ["root", "line"];
+export type SkeletonVariant = (typeof SKELETON_VARIANTS)[number];
+export type SkeletonAnimation = (typeof SKELETON_ANIMATIONS)[number];
+export type SkeletonRadius = (typeof SKELETON_RADII)[number];
+export type SkeletonPart = (typeof SKELETON_PARTS)[number];
+/**
+ * QwSkeletonProps — 双栈共享的行为契约。
+ * 几何 width/height 的 number|string 形式是框架无关的；
+ * 富内容不涉及（骨架不承载文本）。
+ */
+export interface QwSkeletonProps {
+    /** 形状，默认 text。 */
+    variant?: SkeletonVariant;
+    /** 动效，默认 wave。 */
+    animation?: SkeletonAnimation;
+    /** 宽度，数值按 px 处理。 */
+    width?: number | string;
+    /** 高度，数值按 px 处理。 */
+    height?: number | string;
+    /** 圆角档位（circle 恒为正圆，忽略此项）。 */
+    radius?: SkeletonRadius;
+    /** 仅 text：一次渲染多行文本条，末行更短。默认 1。 */
+    lines?: number;
+}

package/dist/tabs/index.d.ts

@@ -1,36 +1 @@
-import { Props } from '@zag-js/tabs';
-export { Api as QwTabsApi, connect, machine as tabsMachine } from '@zag-js/tabs';
-
-/**
- * QwTabsProps — Tabs 的用户输入。对 zag.js 输入做默认值收口 + 命名 rebrand：
- * - loop（默认 true）→ zag loopFocus；
- * - value / defaultValue / orientation / activationMode 透传；
- * - onValueChange 适配 zag details。
- * 业务方只 import 本类型，不直接 import `@zag-js/*`。
- */
-interface QwTabsProps {
-    /** 唯一 id 前缀；不传由适配层生成 (SSR/CSR 一致)。 */
-    id?: string;
-    /** 受控当前项。 */
-    value?: string | null;
-    /** 非受控初值。 */
-    defaultValue?: string | null;
-    /** 方向，默认 horizontal。 */
-    orientation?: "horizontal" | "vertical";
-    /** 激活模式，默认 automatic（聚焦即激活）。 */
-    activationMode?: "manual" | "automatic";
-    /** 方向键首尾循环，默认 true (zag 原名 loopFocus)。 */
-    loop?: boolean;
-    /** 选中项变化回调；zag 原生 onValueChange。 */
-    onValueChange?: (e: {
-        value: string;
-    }) => void;
-}
-
-/**
- * 把 QwTabsProps 转成 zag tabs machine 的 props (默认值收口 + 命名 rebrand)。
- * 用法：`useMachine(tabsMachine, createTabsProps(props))`。
- */
-declare function createTabsProps(props?: QwTabsProps): Partial<Props>;
-
-export { type QwTabsProps, createTabsProps };
+export * from "./tabs.js";

package/dist/tabs/index.js

@@ -1,22 +1,38 @@
-export { connect, machine as tabsMachine } from '@zag-js/tabs';
-
-// src/tabs/index.ts
+import { connect, machine as tabsMachine } from "@zag-js/tabs";
+//#region src/tabs/tabs.ts
+/**
+* Tabs 契约 — 原型 B（有状态），core 包裹 zag.js tabs machine。
+* 行为 props 进 createTabsProps → zag context；视觉 props（level/variant/size）
+* 不进 machine，由适配层挂 data-* 属性驱动 CSS。
+*
+* 枚举以运行时常量数组为唯一事实源（类型从常量推导），__test__ 直接锁死词表。
+*/
+/** 导航层级全集：primary 一级导航（默认）/ secondary 二级导航。 */
+const TABS_LEVELS = ["primary", "secondary"];
+/** 视觉形态全集：text 纯文本（默认）/ button 按钮。button 仅 secondary 支持。 */
+const TABS_VARIANTS = ["text", "button"];
+/** 字号全集：仅 primary 生效，"14" / "16"（默认）。 */
+const TABS_SIZES = ["14", "16"];
+/**
+* 把 QwTabsProps 的行为 props 转成 zag tabs machine 的 props (默认值收口 + 命名 rebrand)。
+* 视觉 props（level/variant/size）不出现在返回值中——它们是适配层 data-* 属性。
+* 用法：`useMachine(tabsMachine, createTabsProps(props))`。
+*/
 function createTabsProps(props = {}) {
-  const ctx = {
-    id: props.id,
-    value: props.value,
-    defaultValue: props.defaultValue,
-    orientation: props.orientation,
-    activationMode: props.activationMode,
-    loopFocus: props.loop !== false
-  };
-  if (props.onValueChange) {
-    const cb = props.onValueChange;
-    ctx.onValueChange = (d) => cb({ value: d.value });
-  }
-  return ctx;
+	const ctx = {
+		id: props.id,
+		value: props.value,
+		defaultValue: props.defaultValue,
+		activationMode: props.activationMode,
+		loopFocus: props.loop !== false
+	};
+	if (props.onValueChange) {
+		const cb = props.onValueChange;
+		ctx.onValueChange = (d) => cb({ value: d.value });
+	}
+	return ctx;
 }
+//#endregion
+export { TABS_LEVELS, TABS_SIZES, TABS_VARIANTS, connect, createTabsProps, tabsMachine };
 
-export { createTabsProps };
-//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/index.ts"],"names":[],"mappings":";;;AAuCO,SAAS,eAAA,CAAgB,KAAA,GAAqB,EAAC,EAA0B;AAC9E,EAAA,MAAM,GAAA,GAA6B;AAAA,IACjC,IAAI,KAAA,CAAM,EAAA;AAAA,IACV,OAAO,KAAA,CAAM,KAAA;AAAA,IACb,cAAc,KAAA,CAAM,YAAA;AAAA,IACpB,aAAa,KAAA,CAAM,WAAA;AAAA,IACnB,gBAAgB,KAAA,CAAM,cAAA;AAAA,IACtB,SAAA,EAAW,MAAM,IAAA,KAAS;AAAA,GAC5B;AAEA,EAAA,IAAI,MAAM,aAAA,EAAe;AACvB,IAAA,MAAM,KAAK,KAAA,CAAM,aAAA;AACjB,IAAA,GAAA,CAAI,aAAA,GAAgB,CAAC,CAAA,KAA0B,EAAA,CAAG,EAAE,KAAA,EAAO,CAAA,CAAE,OAAO,CAAA;AAAA,EACtE;AAEA,EAAA,OAAO,GAAA;AACT","file":"index.js","sourcesContent":["import type { Props as ZagTabsProps, ValueChangeDetails } from \"@zag-js/tabs\";\n\n/**\n * QwTabsProps — Tabs 的用户输入。对 zag.js 输入做默认值收口 + 命名 rebrand：\n * - loop（默认 true）→ zag loopFocus；\n * - value / defaultValue / orientation / activationMode 透传；\n * - onValueChange 适配 zag details。\n * 业务方只 import 本类型，不直接 import `@zag-js/*`。\n */\nexport interface QwTabsProps {\n  /** 唯一 id 前缀；不传由适配层生成 (SSR/CSR 一致)。 */\n  id?: string;\n  /** 受控当前项。 */\n  value?: string | null;\n  /** 非受控初值。 */\n  defaultValue?: string | null;\n  /** 方向，默认 horizontal。 */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** 激活模式，默认 automatic（聚焦即激活）。 */\n  activationMode?: \"manual\" | \"automatic\";\n  /** 方向键首尾循环，默认 true (zag 原名 loopFocus)。 */\n  loop?: boolean;\n  /** 选中项变化回调；zag 原生 onValueChange。 */\n  onValueChange?: (e: { value: string }) => void;\n}\n\n/**\n * 直接 re-export zag tabs 的 machine 与 connect —— 不包一层。\n * 用 re-export 保留原始可移植类型 (避免 TS2742)。\n */\nexport { machine as tabsMachine, connect } from \"@zag-js/tabs\";\n\n/** rebrand zag 的 TabsApi 类型对外。 */\nexport type { Api as QwTabsApi } from \"@zag-js/tabs\";\n\n/**\n * 把 QwTabsProps 转成 zag tabs machine 的 props (默认值收口 + 命名 rebrand)。\n * 用法：`useMachine(tabsMachine, createTabsProps(props))`。\n */\nexport function createTabsProps(props: QwTabsProps = {}): Partial<ZagTabsProps> {\n  const ctx: Partial<ZagTabsProps> = {\n    id: props.id,\n    value: props.value,\n    defaultValue: props.defaultValue,\n    orientation: props.orientation,\n    activationMode: props.activationMode,\n    loopFocus: props.loop !== false,\n  };\n\n  if (props.onValueChange) {\n    const cb = props.onValueChange;\n    ctx.onValueChange = (d: ValueChangeDetails) => cb({ value: d.value });\n  }\n\n  return ctx;\n}\n"]}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/tabs/tabs.ts"],"sourcesContent":["import type { Props as ZagTabsProps, ValueChangeDetails } from \"@zag-js/tabs\";\n\n/**\n * Tabs 契约 — 原型 B（有状态），core 包裹 zag.js tabs machine。\n * 行为 props 进 createTabsProps → zag context；视觉 props（level/variant/size）\n * 不进 machine，由适配层挂 data-* 属性驱动 CSS。\n *\n * 枚举以运行时常量数组为唯一事实源（类型从常量推导），__test__ 直接锁死词表。\n */\n\n/** 导航层级全集：primary 一级导航（默认）/ secondary 二级导航。 */\nexport const TABS_LEVELS = [\"primary\", \"secondary\"] as const;\nexport type TabsLevel = (typeof TABS_LEVELS)[number];\n\n/** 视觉形态全集：text 纯文本（默认）/ button 按钮。button 仅 secondary 支持。 */\nexport const TABS_VARIANTS = [\"text\", \"button\"] as const;\nexport type TabsVariant = (typeof TABS_VARIANTS)[number];\n\n/** 字号全集：仅 primary 生效，\"14\" / \"16\"（默认）。 */\nexport const TABS_SIZES = [\"14\", \"16\"] as const;\nexport type TabsSize = (typeof TABS_SIZES)[number];\n\n/**\n * QwTabsProps — 双栈共享的行为 + 视觉契约。\n * 行为 props（进 createTabsProps → zag machine）：\n * - loop（默认 true）→ zag loopFocus；\n * - value / defaultValue / activationMode 透传；\n * - onValueChange 适配 zag details。\n * 视觉 props（不进 machine，适配层挂 data-*）：\n * - level / variant / size。\n */\nexport interface QwTabsProps {\n  /** 唯一 id 前缀；不传由适配层生成 (SSR/CSR 一致)。 */\n  id?: string;\n  /** 受控当前项。 */\n  value?: string | null;\n  /** 非受控初值。 */\n  defaultValue?: string | null;\n  /** 激活模式，默认 automatic（聚焦即激活）。 */\n  activationMode?: \"manual\" | \"automatic\";\n  /** 方向键首尾循环，默认 true (zag 原名 loopFocus)。 */\n  loop?: boolean;\n  /** 选中项变化回调；zag 原生 onValueChange。 */\n  onValueChange?: (e: { value: string }) => void;\n  /** 导航层级，默认 primary。 */\n  level?: TabsLevel;\n  /** 视觉形态，默认 text。level=primary 时强制 text。 */\n  variant?: TabsVariant;\n  /** 字号，默认 \"16\"。仅 level=primary 生效。 */\n  size?: TabsSize;\n}\n\n/**\n * 直接 re-export zag tabs 的 machine 与 connect —— 不包一层。\n * 用 re-export 保留原始可移植类型 (避免 TS2742)。\n */\nexport { machine as tabsMachine, connect } from \"@zag-js/tabs\";\n\n/** rebrand zag 的 TabsApi 类型对外。 */\nexport type { Api as QwTabsApi } from \"@zag-js/tabs\";\n\n/**\n * 把 QwTabsProps 的行为 props 转成 zag tabs machine 的 props (默认值收口 + 命名 rebrand)。\n * 视觉 props（level/variant/size）不出现在返回值中——它们是适配层 data-* 属性。\n * 用法：`useMachine(tabsMachine, createTabsProps(props))`。\n */\nexport function createTabsProps(props: QwTabsProps = {}): Partial<ZagTabsProps> {\n  const ctx: Partial<ZagTabsProps> = {\n    id: props.id,\n    value: props.value,\n    defaultValue: props.defaultValue,\n    activationMode: props.activationMode,\n    loopFocus: props.loop !== false,\n  };\n\n  if (props.onValueChange) {\n    const cb = props.onValueChange;\n    ctx.onValueChange = (d: ValueChangeDetails) => cb({ value: d.value });\n  }\n\n  return ctx;\n}\n"],"mappings":";;;;;;;;;;AAWA,MAAa,cAAc,CAAC,WAAW,WAAW;;AAIlD,MAAa,gBAAgB,CAAC,QAAQ,QAAQ;;AAI9C,MAAa,aAAa,CAAC,MAAM,IAAI;;;;;;AA+CrC,SAAgB,gBAAgB,QAAqB,CAAC,GAA0B;CAC9E,MAAM,MAA6B;EACjC,IAAI,MAAM;EACV,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,gBAAgB,MAAM;EACtB,WAAW,MAAM,SAAS;CAC5B;CAEA,IAAI,MAAM,eAAe;EACvB,MAAM,KAAK,MAAM;EACjB,IAAI,iBAAiB,MAA0B,GAAG,EAAE,OAAO,EAAE,MAAM,CAAC;CACtE;CAEA,OAAO;AACT"}