@neut/ui 0.0.16 → 0.0.18

package/dist/utils/call-event-handler.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 调用用户传入的事件处理器（兼容 Solid 的 `EventHandlerUnion`）。
+ *
+ * 为什么需要它：`splitProps` 的 restKeys 提取出的处理器类型是 `EventHandlerUnion`，
+ * 可能是普通函数，也可能是 Solid 的 **bound handler**，不能直接 `handler(event)` 调用；
+ * 而组件内部又必须把"自己的默认行为"和"用户回调"都执行一遍，不能互相覆盖。
+ *
+ * `EventHandlerUnion` 的两种形态（见 solid-js 的 `jsx.d.ts`）：
+ * - 普通函数：`(event) => void`
+ * - bound handler：`{ 0: (data, event) => void; 1: data }`——
+ *   JSX 里写 `onClick={[handler, data]}` 得到的就是它，调用约定是
+ *   `handler[0](handler[1], event)`，即 **data 在前、event 在后**。
+ *
+ * 抽到 `~/utils` 之前，`tabs` 与 `toggle-group` 各有一份逐字重复的实现。
+ */
+export declare function callEventHandler<E extends Event>(handler: unknown, event: E): void;

package/dist/utils/call-event-handler.js

@@ -0,0 +1,15 @@
+//#region src/utils/call-event-handler.ts
+function e(e, t) {
+	if (e != null) {
+		if (Array.isArray(e) || typeof e == "object" && e && 0 in e) {
+			let n = e, r = n[0], i = n[1];
+			typeof r == "function" && r(i, t);
+			return;
+		}
+		typeof e == "function" && e(t);
+	}
+}
+//#endregion
+export { e as callEventHandler };
+
+//# sourceMappingURL=call-event-handler.js.map

package/dist/utils/call-event-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"call-event-handler.js","names":["callEventHandler","handler","slot","boundHandler","data","event"],"sources":["../../src/utils/call-event-handler.ts"],"sourcesContent":["/**\n * 调用用户传入的事件处理器（兼容 Solid 的 `EventHandlerUnion`）。\n *\n * 为什么需要它：`splitProps` 的 restKeys 提取出的处理器类型是 `EventHandlerUnion`，\n * 可能是普通函数，也可能是 Solid 的 **bound handler**，不能直接 `handler(event)` 调用；\n * 而组件内部又必须把\"自己的默认行为\"和\"用户回调\"都执行一遍，不能互相覆盖。\n *\n * `EventHandlerUnion` 的两种形态（见 solid-js 的 `jsx.d.ts`）：\n * - 普通函数：`(event) => void`\n * - bound handler：`{ 0: (data, event) => void; 1: data }`——\n *   JSX 里写 `onClick={[handler, data]}` 得到的就是它，调用约定是\n *   `handler[0](handler[1], event)`，即 **data 在前、event 在后**。\n *\n * 抽到 `~/utils` 之前，`tabs` 与 `toggle-group` 各有一份逐字重复的实现。\n */\nexport function callEventHandler<E extends Event>(\n  handler: unknown,\n  event: E,\n): void {\n  if (handler == null) return;\n\n  // bound handler：数组字面量，或带数字键 0/1 的绑定对象\n  const isBound =\n    Array.isArray(handler) ||\n    (typeof handler === \"object\" && handler !== null && 0 in handler);\n\n  if (isBound) {\n    // 注意用属性访问而不是数组解构：绑定对象不是可迭代对象，\n    // 数组解构会走 Symbol.iterator 从而抛 TypeError。\n    const slot = handler as Record<number, unknown>;\n    const boundHandler = slot[0];\n    const data = slot[1];\n    if (typeof boundHandler === \"function\") {\n      (boundHandler as (data: unknown, event: E) => void)(data, event);\n    }\n    return;\n  }\n\n  if (typeof handler === \"function\") (handler as (event: E) => void)(event);\n}\n"],"mappings":";AAeA,SAAgBA,EACd,GACA,GACM;CACN,IAAIC,KAAW,MAOf;MAHE,MAAM,QAAQA,CAAO,KACpB,OAAOA,KAAY,YAAYA,KAAoB,KAAKA,GAE9C;GAGX,IAAMC,IAAOD,GACPE,IAAeD,EAAK,IACpBE,IAAOF,EAAK;GAClB,AAAI,OAAOC,KAAiB,cAC1BA,EAAoDC,GAAMC,CAAK;GAEjE;EACF;EAEA,AAAI,OAAOJ,KAAY,cAAYA,EAAgCI,CAAK;CAFxE;AAGF"}

package/dist/utils/clsx.d.ts

@@ -1 +1 @@
-export declare const clsx: (...classes: (string | undefined | false)[]) => string;
+export { cn as clsx } from 'cn';

package/dist/utils/clsx.js

@@ -1,7 +1,2 @@
-import { twMerge as e } from "tailwind-merge";
-//#region src/utils/clsx.ts
-var t = (...t) => e(t.filter(Boolean));
-//#endregion
-export { t as clsx };
-
-//# sourceMappingURL=clsx.js.map
+import { cn as e } from "cn";
+export { e as clsx };

package/dist/utils/create-change-event-details.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 构造 `onXxxChange` 的第二个参数(对齐 Base UI 的 `ChangeEventDetails`)。
+ *
+ * `isCanceled` / `isPropagationAllowed` 必须用 **getter** 暴露:回调内部要能即时读到
+ * `cancel()` / `allowPropagation()` 之后的最新值,而不是创建时的快照。
+ * 这是本文件复用的核心原因——四处重复实现里最容易写错的就是这一点。
+ *
+ * 各组件的事件详情类型结构相同,只是 `reason` 的联合类型不同,因此用泛型
+ * 把 `reason` 交给调用方,返回结构统一。
+ *
+ * 注意:`trigger` 在部分组件里是必填、部分是可选的,这里统一为可选;
+ * 需要非空的地方由调用方自行断言或在类型里收窄。
+ */
+export interface ChangeEventDetails<R extends string = string> {
+    reason: R;
+    event: Event | undefined;
+    trigger: Element | undefined;
+    /** 阻止组件处理本次变更(例如受控模式下不关闭) */
+    cancel: () => void;
+    /** API 对齐保留:允许事件继续传播(本实现不主动阻止传播,故为记录语义) */
+    allowPropagation: () => void;
+    readonly isCanceled: boolean;
+    readonly isPropagationAllowed: boolean;
+}
+export declare function createChangeEventDetails<R extends string = string>(reason: R, event?: Event, trigger?: Element): ChangeEventDetails<R>;

package/dist/utils/create-change-event-details.js

@@ -0,0 +1,25 @@
+//#region src/utils/create-change-event-details.ts
+function e(e, t, n) {
+	let r = !1, i = !1;
+	return {
+		reason: e,
+		event: t,
+		trigger: n,
+		cancel: () => {
+			r = !0;
+		},
+		allowPropagation: () => {
+			i = !0;
+		},
+		get isCanceled() {
+			return r;
+		},
+		get isPropagationAllowed() {
+			return i;
+		}
+	};
+}
+//#endregion
+export { e as createChangeEventDetails };
+
+//# sourceMappingURL=create-change-event-details.js.map

package/dist/utils/create-change-event-details.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-change-event-details.js","names":["createChangeEventDetails","canceled","propagationAllowed"],"sources":["../../src/utils/create-change-event-details.ts"],"sourcesContent":["/**\n * 构造 `onXxxChange` 的第二个参数(对齐 Base UI 的 `ChangeEventDetails`)。\n *\n * `isCanceled` / `isPropagationAllowed` 必须用 **getter** 暴露:回调内部要能即时读到\n * `cancel()` / `allowPropagation()` 之后的最新值,而不是创建时的快照。\n * 这是本文件复用的核心原因——四处重复实现里最容易写错的就是这一点。\n *\n * 各组件的事件详情类型结构相同,只是 `reason` 的联合类型不同,因此用泛型\n * 把 `reason` 交给调用方,返回结构统一。\n *\n * 注意:`trigger` 在部分组件里是必填、部分是可选的,这里统一为可选;\n * 需要非空的地方由调用方自行断言或在类型里收窄。\n */\nexport interface ChangeEventDetails<R extends string = string> {\n  reason: R;\n  event: Event | undefined;\n  trigger: Element | undefined;\n  /** 阻止组件处理本次变更(例如受控模式下不关闭) */\n  cancel: () => void;\n  /** API 对齐保留:允许事件继续传播(本实现不主动阻止传播,故为记录语义) */\n  allowPropagation: () => void;\n  readonly isCanceled: boolean;\n  readonly isPropagationAllowed: boolean;\n}\n\nexport function createChangeEventDetails<R extends string = string>(\n  reason: R,\n  event?: Event,\n  trigger?: Element,\n): ChangeEventDetails<R> {\n  let canceled = false;\n  let propagationAllowed = false;\n\n  return {\n    reason,\n    event,\n    trigger,\n    cancel: () => {\n      canceled = true;\n    },\n    allowPropagation: () => {\n      propagationAllowed = true;\n    },\n    get isCanceled() {\n      return canceled;\n    },\n    get isPropagationAllowed() {\n      return propagationAllowed;\n    },\n  };\n}\n"],"mappings":";AAyBA,SAAgBA,EACd,GACA,GACA,GACuB;CACvB,IAAIC,IAAW,IACXC,IAAqB;CAEzB,OAAO;EACL;EACA;EACA;EACA,cAAc;GACZ,IAAW;EACb;EACA,wBAAwB;GACtB,IAAqB;EACvB;EACA,IAAI,aAAa;GACf,OAAOD;EACT;EACA,IAAI,uBAAuB;GACzB,OAAOC;EACT;CACF;AACF"}

package/dist/utils/get-style.d.ts

@@ -1,14 +1,12 @@
 /**
- * 获取目标元素指定 CSS 属性的计算值（最终应用到元素上的样式值）
+ * 获取目标元素指定 CSS 属性的计算值(最终应用到元素上的样式值)。
  * @param element 目标 DOM 元素
- * @param property CSS 属性名（支持驼峰或连字符形式，如 'backgroundColor' 或 'background-color'）
- * @returns 属性的计算值字符串，获取失败时返回 null
+ * @param property CSS 属性名(支持驼峰或连字符形式,如 'backgroundColor' / 'background-color')
+ * @returns 属性的计算值字符串,获取失败时返回 null
  *
  * @example
- * const element = document.getElementById('myDiv');
- * const color = getStyleValue(element, 'color');
- * const bgColor = getStyleValue(element, 'background-color');
- * const borderRadius = getStyleValue(element, 'borderRadius');
+ * const el = document.getElementById('myDiv');
+ * getStyleValue(el, 'color');
+ * getStyleValue(el, 'backgroundColor');
  */
-declare function getStyleValue(element: Element | null, property: string): string | null;
-export default getStyleValue;
+export declare function getStyleValue(element: Element | null, property: string): string | null;

package/dist/utils/get-style.js

@@ -0,0 +1,16 @@
+import { toKebabCase as e } from "./string.js";
+//#region src/utils/get-style.ts
+function t(t, n) {
+	if (typeof window > "u" || !window.getComputedStyle) return console.warn("getStyleValue: 当前环境不支持 getComputedStyle API"), null;
+	if (!t) return console.warn("getStyleValue: 提供的元素无效(null 或 undefined)"), null;
+	if (typeof n != "string" || n.trim() === "") return console.warn("getStyleValue: 属性名必须是非空字符串"), null;
+	try {
+		return window.getComputedStyle(t).getPropertyValue(e(n.trim())) || null;
+	} catch (e) {
+		return console.error(`getStyleValue: 获取样式值时发生错误 - ${e}`), null;
+	}
+}
+//#endregion
+export { t as getStyleValue };
+
+//# sourceMappingURL=get-style.js.map

package/dist/utils/get-style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-style.js","names":["getStyleValue","element","property","toKebabCase","error"],"sources":["../../src/utils/get-style.ts"],"sourcesContent":["import { toKebabCase } from \"./string\";\n\n/**\n * 获取目标元素指定 CSS 属性的计算值(最终应用到元素上的样式值)。\n * @param element 目标 DOM 元素\n * @param property CSS 属性名(支持驼峰或连字符形式,如 'backgroundColor' / 'background-color')\n * @returns 属性的计算值字符串,获取失败时返回 null\n *\n * @example\n * const el = document.getElementById('myDiv');\n * getStyleValue(el, 'color');\n * getStyleValue(el, 'backgroundColor');\n */\nexport function getStyleValue(\n  element: Element | null,\n  property: string,\n): string | null {\n  // 环境检查:确保在浏览器环境中运行\n  if (typeof window === \"undefined\" || !window.getComputedStyle) {\n    console.warn(\"getStyleValue: 当前环境不支持 getComputedStyle API\");\n    return null;\n  }\n\n  if (!element) {\n    console.warn(\"getStyleValue: 提供的元素无效(null 或 undefined)\");\n    return null;\n  }\n\n  if (typeof property !== \"string\" || property.trim() === \"\") {\n    console.warn(\"getStyleValue: 属性名必须是非空字符串\");\n    return null;\n  }\n\n  try {\n    const computedStyle = window.getComputedStyle(element);\n    // 统一转成连字符形式,兼容 getPropertyValue 的取值约定\n    const value = computedStyle.getPropertyValue(toKebabCase(property.trim()));\n    // 空字符串表示该属性未定义或无值\n    return value || null;\n  } catch (error) {\n    console.error(`getStyleValue: 获取样式值时发生错误 - ${error}`);\n    return null;\n  }\n}\n"],"mappings":";;AAaA,SAAgBA,EACd,GACA,GACe;CAEf,IAAI,OAAO,SAAW,OAAe,CAAC,OAAO,kBAE3C,OADA,QAAQ,KAAK,6CAA6C,GACnD;CAGT,IAAI,CAACC,GAEH,OADA,QAAQ,KAAK,0CAA0C,GAChD;CAGT,IAAI,OAAOC,KAAa,YAAYA,EAAS,KAAK,MAAM,IAEtD,OADA,QAAQ,KAAK,4BAA4B,GAClC;CAGT,IAAI;EAKF,OAJsB,OAAO,iBAAiBD,CAEhC,CAAA,CAAc,iBAAiBE,EAAYD,EAAS,KAAK,CAAC,CAEjE,KAAS;CAClB,SAASE,GAAO;EAEd,OADA,QAAQ,MAAM,+BAA+BA,GAAO,GAC7C;CACT;AACF"}

package/dist/utils/index.d.ts

@@ -2,3 +2,11 @@ export { clsx } from './clsx';
 export * from './logger';
 export * from './ref';
 export { warnOnce } from './warn-once';
+export { callEventHandler } from './call-event-handler';
+export { createChangeEventDetails } from './create-change-event-details';
+export type { ChangeEventDetails } from './create-change-event-details';
+export { getStyleValue } from './get-style';
+export { toKebabCase } from './string';
+export { clamp } from './number';
+export { createRovingNavigation, computeNextIndex, ROVING_NAV_KEYS, } from './roving-navigation';
+export type { RovingNavItem, RovingNavOptions } from './roving-navigation';

package/dist/utils/index.js

@@ -2,4 +2,10 @@ import { clsx as e } from "./clsx.js";
 import { Logger as t, logger as n } from "./logger.js";
 import { mergeRefs as r } from "./ref.js";
 import { warnOnce as i } from "./warn-once.js";
-export { t as Logger, e as clsx, n as logger, r as mergeRefs, i as warnOnce };
+import { callEventHandler as a } from "./call-event-handler.js";
+import { createChangeEventDetails as o } from "./create-change-event-details.js";
+import { toKebabCase as s } from "./string.js";
+import { getStyleValue as c } from "./get-style.js";
+import { clamp as l } from "./number.js";
+import { ROVING_NAV_KEYS as u, computeNextIndex as d, createRovingNavigation as f } from "./roving-navigation.js";
+export { t as Logger, u as ROVING_NAV_KEYS, a as callEventHandler, l as clamp, e as clsx, d as computeNextIndex, o as createChangeEventDetails, f as createRovingNavigation, c as getStyleValue, n as logger, r as mergeRefs, s as toKebabCase, i as warnOnce };

package/dist/utils/number.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 把数值限制到 [min, max]。两端都可缺省(缺省即不限制该侧)。
+ *
+ * 合并自 resizable(必填 min/max)与 number-input(可选 min/max)两份实现:
+ * 后者是前者的超集,统一成可选参数后两边都能用,且避免各自维护一份边界逻辑。
+ */
+export declare function clamp(value: number, min?: number, max?: number): number;

package/dist/utils/number.js

@@ -0,0 +1,8 @@
+//#region src/utils/number.ts
+function e(e, t, n) {
+	return t !== void 0 && e < t ? t : n !== void 0 && e > n ? n : e;
+}
+//#endregion
+export { e as clamp };
+
+//# sourceMappingURL=number.js.map

package/dist/utils/number.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number.js","names":["clamp","min","value","max"],"sources":["../../src/utils/number.ts"],"sourcesContent":["/**\n * 把数值限制到 [min, max]。两端都可缺省(缺省即不限制该侧)。\n *\n * 合并自 resizable(必填 min/max)与 number-input(可选 min/max)两份实现:\n * 后者是前者的超集,统一成可选参数后两边都能用,且避免各自维护一份边界逻辑。\n */\nexport function clamp(value: number, min?: number, max?: number): number {\n  if (min !== undefined && value < min) return min;\n  if (max !== undefined && value > max) return max;\n  return value;\n}\n"],"mappings":";AAMA,SAAgBA,EAAM,GAAe,GAAc,GAAsB;CAGvE,OAFIC,MAAQ,KAAA,KAAaC,IAAQD,IAAYA,IACzCE,MAAQ,KAAA,KAAaD,IAAQC,IAAYA,IACtCD;AACT"}

package/dist/utils/roving-navigation.d.ts

@@ -0,0 +1,64 @@
+/**
+ * roving focus 键盘导航的通用实现。
+ *
+ * 适用范围:Tabs（tablist）与 ToggleGroup 的键盘交互语义完全一致——
+ * 方向键在可用的项之间移动焦点，Home/End 跳首尾，`loop` 决定边界是否环绕，
+ * disabled 项被跳过，"焦点不在项上时不接管按键"。
+ *
+ * 抽出来的动因:两个组件此前各自实现了一份近乎逐字的逻辑，
+ * 连注释里写的方向映射表都一样，属于典型的"改一处忘一处"风险点。
+ *
+ * 与 Base UI 一致:方向键只移动焦点、不激活（激活靠 click / Enter / Space），
+ * 移动后由调用方通过 `onHighlight` 同步高亮。
+ */
+export interface RovingNavItem<TValue> {
+    value: TValue;
+    element: HTMLElement;
+    /** accessor，支持运行时 disabled 翻转 */
+    disabled: () => boolean;
+}
+export interface RovingNavOptions<TValue> {
+    /** 当前已挂载的项（挂载顺序） */
+    getItems: () => RovingNavItem<TValue>[];
+    /** 布局方向 */
+    orientation: () => "horizontal" | "vertical";
+    /** 书写方向；未指定/auto 时按 `getDirection()` 的实际计算值判断 */
+    dir: () => "ltr" | "rtl" | "auto" | undefined;
+    /** 是否在边界环绕 */
+    loop: () => boolean;
+    /** 整个组件是否被禁用（禁用时不接管任何按键） */
+    disabled?: () => boolean;
+    /**
+     * 用于判断实际书写方向的目标元素。
+     * 默认读 `document.documentElement.dir`；ToggleGroup 传 `event.currentTarget`
+     * 以便兼容祖先节点上的 `dir`（读 computedStyle 的 direction）。
+     */
+    getDirectionElement?: (event: KeyboardEvent) => Element | null;
+    /** 焦点移动后同步高亮 */
+    onHighlight: (value: TValue) => void;
+}
+/** 会被导航接管的按键 */
+export declare const ROVING_NAV_KEYS: Set<string>;
+/**
+ * 计算下一个应该聚焦的索引。
+ *
+ * 返回 `undefined` 表示不接管本次按键（方向键与当前布局不匹配，
+ * 或焦点不在任何已注册项上）。
+ *
+ * @param currentIndex 当前聚焦项在**可用项**列表中的下标
+ * @param itemCount 可用项数量
+ */
+export declare function computeNextIndex(key: string, currentIndex: number, itemCount: number, opts: {
+    isVertical: boolean;
+    isRTL: boolean;
+    loop: boolean;
+}): number | undefined;
+/**
+ * 创建 roving focus 的 keydown 处理器。
+ *
+ * 调用方负责:① 只在焦点已经落在某项上时才生效（由本函数内部判断）；
+ * ② 提供 `onHighlight` 同步高亮。
+ */
+export declare function createRovingNavigation<TValue>(options: RovingNavOptions<TValue>): {
+    handleKeyDown: (event: KeyboardEvent) => void;
+};

package/dist/utils/roving-navigation.js

@@ -0,0 +1,66 @@
+//#region src/utils/roving-navigation.ts
+var e = /* @__PURE__ */ new Set([
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"ArrowDown",
+	"Home",
+	"End"
+]);
+function t(e, t, n) {
+	if (e === "rtl") return !0;
+	if (e === "ltr") return !1;
+	let r = n?.(t);
+	return r ? getComputedStyle(r).direction === "rtl" : typeof document < "u" && document.documentElement.dir === "rtl";
+}
+function n(e, t, n, r) {
+	let i;
+	switch (e) {
+		case "Home":
+			i = 0;
+			break;
+		case "End":
+			i = n - 1;
+			break;
+		case "ArrowLeft":
+			if (r.isVertical) return;
+			i = t + (r.isRTL ? 1 : -1);
+			break;
+		case "ArrowRight":
+			if (r.isVertical) return;
+			i = t + (r.isRTL ? -1 : 1);
+			break;
+		case "ArrowUp":
+			if (!r.isVertical) return;
+			i = t - 1;
+			break;
+		case "ArrowDown":
+			if (!r.isVertical) return;
+			i = t + 1;
+			break;
+		default: return;
+	}
+	return r.loop ? (i + n) % n : Math.min(n - 1, Math.max(0, i));
+}
+function r(r) {
+	return { handleKeyDown: (i) => {
+		if (r.disabled?.() || !e.has(i.key)) return;
+		let a = document.activeElement, o = r.getItems().filter((e) => !e.disabled());
+		if (o.length === 0) return;
+		let s = o.findIndex((e) => e.element === a);
+		if (s === -1) return;
+		let c = r.orientation() === "vertical", l = t(r.dir(), i, r.getDirectionElement), u = n(i.key, s, o.length, {
+			isVertical: c,
+			isRTL: l,
+			loop: r.loop()
+		});
+		if (u === void 0) return;
+		i.preventDefault();
+		let d = o[u];
+		d.element.focus(), r.onHighlight(d.value);
+	} };
+}
+//#endregion
+export { e as ROVING_NAV_KEYS, n as computeNextIndex, r as createRovingNavigation };
+
+//# sourceMappingURL=roving-navigation.js.map

package/dist/utils/roving-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"roving-navigation.js","names":["ROVING_NAV_KEYS","resolveRTL","dir","target","getDirectionElement","event","computeNextIndex","next","key","itemCount","opts","currentIndex","createRovingNavigation","options","activeEl","items","item","isVertical","isRTL","nextIndex","nextItem"],"sources":["../../src/utils/roving-navigation.ts"],"sourcesContent":["/**\n * roving focus 键盘导航的通用实现。\n *\n * 适用范围:Tabs（tablist）与 ToggleGroup 的键盘交互语义完全一致——\n * 方向键在可用的项之间移动焦点，Home/End 跳首尾，`loop` 决定边界是否环绕，\n * disabled 项被跳过，\"焦点不在项上时不接管按键\"。\n *\n * 抽出来的动因:两个组件此前各自实现了一份近乎逐字的逻辑，\n * 连注释里写的方向映射表都一样，属于典型的\"改一处忘一处\"风险点。\n *\n * 与 Base UI 一致:方向键只移动焦点、不激活（激活靠 click / Enter / Space），\n * 移动后由调用方通过 `onHighlight` 同步高亮。\n */\nexport interface RovingNavItem<TValue> {\n  value: TValue;\n  element: HTMLElement;\n  /** accessor，支持运行时 disabled 翻转 */\n  disabled: () => boolean;\n}\n\nexport interface RovingNavOptions<TValue> {\n  /** 当前已挂载的项（挂载顺序） */\n  getItems: () => RovingNavItem<TValue>[];\n  /** 布局方向 */\n  orientation: () => \"horizontal\" | \"vertical\";\n  /** 书写方向；未指定/auto 时按 `getDirection()` 的实际计算值判断 */\n  dir: () => \"ltr\" | \"rtl\" | \"auto\" | undefined;\n  /** 是否在边界环绕 */\n  loop: () => boolean;\n  /** 整个组件是否被禁用（禁用时不接管任何按键） */\n  disabled?: () => boolean;\n  /**\n   * 用于判断实际书写方向的目标元素。\n   * 默认读 `document.documentElement.dir`；ToggleGroup 传 `event.currentTarget`\n   * 以便兼容祖先节点上的 `dir`（读 computedStyle 的 direction）。\n   */\n  getDirectionElement?: (event: KeyboardEvent) => Element | null;\n  /** 焦点移动后同步高亮 */\n  onHighlight: (value: TValue) => void;\n}\n\n/** 会被导航接管的按键 */\nexport const ROVING_NAV_KEYS = new Set([\n  \"ArrowLeft\",\n  \"ArrowRight\",\n  \"ArrowUp\",\n  \"ArrowDown\",\n  \"Home\",\n  \"End\",\n]);\n\n/** 解析最终生效的书写方向 */\nfunction resolveRTL(\n  dir: \"ltr\" | \"rtl\" | \"auto\" | undefined,\n  event: KeyboardEvent,\n  getDirectionElement: ((event: KeyboardEvent) => Element | null) | undefined,\n): boolean {\n  if (dir === \"rtl\") return true;\n  if (dir === \"ltr\") return false;\n\n  // 未指定或 auto：按实际书写方向判断\n  const target = getDirectionElement?.(event);\n  if (target) {\n    return getComputedStyle(target).direction === \"rtl\";\n  }\n  return (\n    typeof document !== \"undefined\" && document.documentElement.dir === \"rtl\"\n  );\n}\n\n/**\n * 计算下一个应该聚焦的索引。\n *\n * 返回 `undefined` 表示不接管本次按键（方向键与当前布局不匹配，\n * 或焦点不在任何已注册项上）。\n *\n * @param currentIndex 当前聚焦项在**可用项**列表中的下标\n * @param itemCount 可用项数量\n */\nexport function computeNextIndex(\n  key: string,\n  currentIndex: number,\n  itemCount: number,\n  opts: { isVertical: boolean; isRTL: boolean; loop: boolean },\n): number | undefined {\n  let next: number | undefined;\n\n  switch (key) {\n    case \"Home\":\n      next = 0;\n      break;\n    case \"End\":\n      next = itemCount - 1;\n      break;\n    case \"ArrowLeft\":\n      // 竖直布局下左右键不构成导航语义\n      if (opts.isVertical) return undefined;\n      next = currentIndex + (opts.isRTL ? 1 : -1);\n      break;\n    case \"ArrowRight\":\n      if (opts.isVertical) return undefined;\n      next = currentIndex + (opts.isRTL ? -1 : 1);\n      break;\n    case \"ArrowUp\":\n      if (!opts.isVertical) return undefined;\n      next = currentIndex - 1;\n      break;\n    case \"ArrowDown\":\n      if (!opts.isVertical) return undefined;\n      next = currentIndex + 1;\n      break;\n    default:\n      return undefined;\n  }\n\n  if (opts.loop) {\n    return (next + itemCount) % itemCount;\n  }\n  return Math.min(itemCount - 1, Math.max(0, next));\n}\n\n/**\n * 创建 roving focus 的 keydown 处理器。\n *\n * 调用方负责:① 只在焦点已经落在某项上时才生效（由本函数内部判断）；\n * ② 提供 `onHighlight` 同步高亮。\n */\nexport function createRovingNavigation<TValue>(\n  options: RovingNavOptions<TValue>,\n) {\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (options.disabled?.()) return;\n    if (!ROVING_NAV_KEYS.has(event.key)) return;\n\n    const activeEl = document.activeElement as HTMLElement | null;\n    // 已被禁用的项不参与导航\n    const items = options.getItems().filter((item) => !item.disabled());\n    if (items.length === 0) return;\n\n    const currentIndex = items.findIndex((item) => item.element === activeEl);\n    if (currentIndex === -1) return;\n\n    const isVertical = options.orientation() === \"vertical\";\n    const isRTL = resolveRTL(options.dir(), event, options.getDirectionElement);\n\n    const nextIndex = computeNextIndex(event.key, currentIndex, items.length, {\n      isVertical,\n      isRTL,\n      loop: options.loop(),\n    });\n    if (nextIndex === undefined) return;\n\n    // 方向键与当前布局匹配，接管默认滚动行为\n    event.preventDefault();\n\n    const nextItem = items[nextIndex];\n    nextItem.element.focus();\n    options.onHighlight(nextItem.value);\n  };\n\n  return { handleKeyDown };\n}\n"],"mappings":";AA0CA,IAAaA,oBAAkB,IAAI,IAAI;CACrC;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;AAGD,SAASC,EACP,GACA,GACA,GACS;CACT,IAAIC,MAAQ,OAAO,OAAO;CAC1B,IAAIA,MAAQ,OAAO,OAAO;CAG1B,IAAMC,IAASC,IAAsBC,CAAK;CAI1C,OAHIF,IACK,iBAAiBA,CAAM,CAAC,CAAC,cAAc,QAG9C,OAAO,WAAa,OAAe,SAAS,gBAAgB,QAAQ;AAExE;AAWA,SAAgBG,EACd,GACA,GACA,GACA,GACoB;CACpB,IAAIC;CAEJ,QAAQC,GAAR;EACE,KAAK;GACH,IAAO;GACP;EACF,KAAK;GACH,IAAOC,IAAY;GACnB;EACF,KAAK;GAEH,IAAIC,EAAK,YAAY;GACrB,IAAOC,KAAgBD,EAAK,QAAQ,IAAI;GACxC;EACF,KAAK;GACH,IAAIA,EAAK,YAAY;GACrB,IAAOC,KAAgBD,EAAK,QAAQ,KAAK;GACzC;EACF,KAAK;GACH,IAAI,CAACA,EAAK,YAAY;GACtB,IAAOC,IAAe;GACtB;EACF,KAAK;GACH,IAAI,CAACD,EAAK,YAAY;GACtB,IAAOC,IAAe;GACtB;EACF,SACE;CACJ;CAKA,OAHID,EAAK,QACCH,IAAOE,KAAaA,IAEvB,KAAK,IAAIA,IAAY,GAAG,KAAK,IAAI,GAAGF,CAAI,CAAC;AAClD;AAQA,SAAgBK,EACd,GACA;CA+BA,OAAO,EAAE,gBA9Bc,MAAyB;EAE9C,IADIC,EAAQ,WAAW,KACnB,CAACb,EAAgB,IAAIK,EAAM,GAAG,GAAG;EAErC,IAAMS,IAAW,SAAS,eAEpBC,IAAQF,EAAQ,SAAS,CAAC,CAAC,QAAQ,MAAS,CAACG,EAAK,SAAS,CAAC;EAClE,IAAID,EAAM,WAAW,GAAG;EAExB,IAAMJ,IAAeI,EAAM,WAAW,MAASC,EAAK,YAAYF,CAAQ;EACxE,IAAIH,MAAiB,IAAI;EAEzB,IAAMM,IAAaJ,EAAQ,YAAY,MAAM,YACvCK,IAAQjB,EAAWY,EAAQ,IAAI,GAAGR,GAAOQ,EAAQ,mBAAmB,GAEpEM,IAAYb,EAAiBD,EAAM,KAAKM,GAAcI,EAAM,QAAQ;GACxE;GACA;GACA,MAAMF,EAAQ,KAAK;EACrB,CAAC;EACD,IAAIM,MAAc,KAAA,GAAW;EAG7B,EAAM,eAAe;EAErB,IAAMC,IAAWL,EAAMI;EAEvB,AADAC,EAAS,QAAQ,MAAM,GACvBP,EAAQ,YAAYO,EAAS,KAAK;CACpC,EAEuB;AACzB"}

package/dist/utils/string.d.ts

@@ -0,0 +1,17 @@
+/**
+ * camelCase -> kebab-case(CSS 属性名归一化)。
+ *
+ * 处理三类特殊情况:
+ *
+ * 1. CSS 自定义属性(`--foo`)原样保留,否则 `--foo` 会被改成 `---foo`。
+ * 2. `float` / `cssFloat` 都归一成 `float`:`getComputedStyle().getPropertyValue()`
+ *    只认 `float`(JS 里 `cssFloat` 是访问 `el.style` 时的别名)。
+ * 3. **厂商前缀**(`WebkitTransform` → `-webkit-transform`、`msTransform` → `-ms-transform`):
+ *    连字符必须加在**前缀和后续单词之间**,并且 `ms` 前缀自己是带连字符的。
+ *    之前的两份重复实现一个把 `WebkitTransform` 变成 `webkit-transform`
+ *    (少了前缀连字符)、另一个把 `msTransform` 变成 `ms-transform`
+ *    (少了 ms 自带的前缀连字符),各自都错了一半。
+ *    归一为:`^[A-Z]` 开头且含小写字母段时,首字母转小写并前置 `-`;
+ *    `ms`(全小写前缀)单独补上前缀连字符。
+ */
+export declare function toKebabCase(key: string): string;

package/dist/utils/string.js

@@ -0,0 +1,11 @@
+//#region src/utils/string.ts
+function e(e) {
+	if (e.startsWith("--")) return e;
+	if (e === "float" || e === "cssFloat") return "float";
+	let t = (/^[A-Z]/.test(e) ? `-${e[0].toLowerCase()}${e.slice(1)}` : e).replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
+	return t.startsWith("ms-") ? `-${t}` : t;
+}
+//#endregion
+export { e as toKebabCase };
+
+//# sourceMappingURL=string.js.map

package/dist/utils/string.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"string.js","names":["toKebabCase","key","kebab","char"],"sources":["../../src/utils/string.ts"],"sourcesContent":["/**\n * camelCase -> kebab-case(CSS 属性名归一化)。\n *\n * 处理三类特殊情况:\n *\n * 1. CSS 自定义属性(`--foo`)原样保留,否则 `--foo` 会被改成 `---foo`。\n * 2. `float` / `cssFloat` 都归一成 `float`:`getComputedStyle().getPropertyValue()`\n *    只认 `float`(JS 里 `cssFloat` 是访问 `el.style` 时的别名)。\n * 3. **厂商前缀**(`WebkitTransform` → `-webkit-transform`、`msTransform` → `-ms-transform`):\n *    连字符必须加在**前缀和后续单词之间**,并且 `ms` 前缀自己是带连字符的。\n *    之前的两份重复实现一个把 `WebkitTransform` 变成 `webkit-transform`\n *    (少了前缀连字符)、另一个把 `msTransform` 变成 `ms-transform`\n *    (少了 ms 自带的前缀连字符),各自都错了一半。\n *    归一为:`^[A-Z]` 开头且含小写字母段时,首字母转小写并前置 `-`;\n *    `ms`(全小写前缀)单独补上前缀连字符。\n */\nexport function toKebabCase(key: string): string {\n  if (key.startsWith(\"--\")) return key;\n  if (key === \"float\" || key === \"cssFloat\") return \"float\";\n\n  // 首字母大写 => 带厂商前缀(WebkitTransform),先降为小写,避免被当成单词边界加分隔连字符\n  const normalized = /^[A-Z]/.test(key)\n    ? `-${key[0].toLowerCase()}${key.slice(1)}`\n    : key;\n  // 其余大写字母是单词边界:msTransform -> ms-transform\n  const kebab = normalized.replace(\n    /[A-Z]/g,\n    (char) => `-${char.toLowerCase()}`,\n  );\n  // ms 前缀是唯一全小写的厂商前缀,自带前置连字符:ms-transform -> -ms-transform\n  return kebab.startsWith(\"ms-\") ? `-${kebab}` : kebab;\n}\n"],"mappings":";AAgBA,SAAgBA,EAAY,GAAqB;CAC/C,IAAIC,EAAI,WAAW,IAAI,GAAG,OAAOA;CACjC,IAAIA,MAAQ,WAAWA,MAAQ,YAAY,OAAO;CAOlD,IAAMC,KAJa,SAAS,KAAKD,CAAG,IAChC,IAAIA,EAAI,EAAE,CAAC,YAAY,IAAIA,EAAI,MAAM,CAAC,MACtCA,EAAA,CAEqB,QACvB,WACC,MAAS,IAAIE,EAAK,YAAY,GACjC;CAEA,OAAOD,EAAM,WAAW,KAAK,IAAI,IAAIA,MAAUA;AACjD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neut/ui",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "",
   "type": "module",
   "private": false,
@@ -12,26 +12,37 @@
     "dev": "vite ./dev",
     "build": "vite build",
     "serve": "vite preview",
-    "check": "tsc --noEmit && biome check --write src"
+    "check": "tsc --noEmit && biome check --write src tests",
+    "test": "vitest run",
+    "test:affected": "node .github/scripts/test-affected.mjs",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "check:branches": "node .github/scripts/check-branches.mjs"
   },
   "license": "MIT",
   "devDependencies": {
+    "@solidjs/router": "^1.0.0",
+    "@solidjs/testing-library": "^0.8.10",
     "@tailwindcss/vite": "^4.3.3",
-    "@types/node": "^26.6.3",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/node": "^26.6.4",
     "@typescript/typescript6": "^6.0.2",
+    "@vitest/coverage-v8": "^5.0.3",
+    "jsdom": "^30.1.1",
     "solid-devtools": "^0.34.5",
     "tailwindcss": "^4.3.3",
     "typescript": "^7.0.2",
     "unplugin-dts": "^1.1.1",
-    "vite": "^8.3.1",
+    "vite": "^8.3.2",
     "vite-plugin-solid": "^2.11.14",
-    "@solidjs/router": "^1.0.0"
+    "vitest": "^5.0.3"
   },
   "peerDependencies": {
     "class-variance-authority": "^0.7.1",
-    "lucide-solid": "^1.48.0",
+    "lucide-solid": "^1.51.0",
     "solid-js": "^1.9.15",
-    "tailwind-merge": "^3.7.0"
+    "cn": "^0.4.0"
   },
   "files": [
     "dist"

package/dist/components/tabs/Tabs/call-event-handler.d.ts

@@ -1,5 +0,0 @@
-/**
- * 调用用户传入的事件处理器(兼容 Solid 的函数或函数数组形式)。
- * splitProps restKeys 提取出的事件类型是 EventHandlerUnion,不能直接调用。
- */
-export declare function callEventHandler<E extends Event>(handler: unknown, event: E): void;

package/dist/components/tabs/Tabs/call-event-handler.js

@@ -1,9 +0,0 @@
-//#region src/components/tabs/Tabs/call-event-handler.ts
-function e(e, t) {
-	let n = Array.isArray(e) ? e : [e];
-	for (let e of n) typeof e == "function" && e(t);
-}
-//#endregion
-export { e as callEventHandler };
-
-//# sourceMappingURL=call-event-handler.js.map

package/dist/components/tabs/Tabs/call-event-handler.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"call-event-handler.js","names":["callEventHandler","list","handler","h","event"],"sources":["../../../../src/components/tabs/Tabs/call-event-handler.ts"],"sourcesContent":["/**\n * 调用用户传入的事件处理器(兼容 Solid 的函数或函数数组形式)。\n * splitProps restKeys 提取出的事件类型是 EventHandlerUnion,不能直接调用。\n */\nexport function callEventHandler<E extends Event>(\n  handler: unknown,\n  event: E,\n): void {\n  const list = Array.isArray(handler) ? handler : [handler];\n  for (const h of list) {\n    if (typeof h === \"function\") (h as (e: E) => void)(event);\n  }\n}\n"],"mappings":";AAIA,SAAgBA,EACd,GACA,GACM;CACN,IAAMC,IAAO,MAAM,QAAQC,CAAO,IAAIA,IAAU,CAACA,CAAO;CACxD,KAAK,IAAMC,KAAKF,GACd,AAAI,OAAOE,KAAM,cAAYA,EAAsBC,CAAK;AAE5D"}

package/dist/components/toggle-group/call-event-handler.d.ts

@@ -1,5 +0,0 @@
-/**
- * 调用用户传入的事件处理器(兼容 Solid 的函数 / 函数数组 / bound 对象形式)。
- * splitProps 提取出的事件类型是 EventHandlerUnion,不能直接调用。
- */
-export declare function callEventHandler<E extends Event>(handler: unknown, event: E): void;

package/dist/components/toggle-group/call-event-handler.js

@@ -1,9 +0,0 @@
-//#region src/components/toggle-group/call-event-handler.ts
-function e(e, t) {
-	let n = Array.isArray(e) ? e : [e];
-	for (let e of n) typeof e == "function" && e(t);
-}
-//#endregion
-export { e as callEventHandler };
-
-//# sourceMappingURL=call-event-handler.js.map

package/dist/components/toggle-group/call-event-handler.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"call-event-handler.js","names":["callEventHandler","list","handler","h","event"],"sources":["../../../src/components/toggle-group/call-event-handler.ts"],"sourcesContent":["/**\n * 调用用户传入的事件处理器(兼容 Solid 的函数 / 函数数组 / bound 对象形式)。\n * splitProps 提取出的事件类型是 EventHandlerUnion,不能直接调用。\n */\nexport function callEventHandler<E extends Event>(\n  handler: unknown,\n  event: E,\n): void {\n  const list = Array.isArray(handler) ? handler : [handler];\n  for (const h of list) {\n    if (typeof h === \"function\") (h as (e: E) => void)(event);\n  }\n}\n"],"mappings":";AAIA,SAAgBA,EACd,GACA,GACM;CACN,IAAMC,IAAO,MAAM,QAAQC,CAAO,IAAIA,IAAU,CAACA,CAAO;CACxD,KAAK,IAAMC,KAAKF,GACd,AAAI,OAAOE,KAAM,cAAYA,EAAsBC,CAAK;AAE5D"}

package/dist/utils/clsx.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"clsx.js","names":["clsx","classes","twMerge"],"sources":["../../src/utils/clsx.ts"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\n\nexport const clsx = (...classes: (string | undefined | false)[]): string => {\n  return twMerge(classes.filter(Boolean));\n};\n"],"mappings":";;AAEA,IAAaA,KAAQ,GAAGC,MACfC,EAAQD,EAAQ,OAAO,OAAO,CAAC"}