@neut/ui 0.0.13 → 0.0.15

package/dist/components/toggle-group/ToggleGroup/ToggleGroup.types.d.ts

@@ -1,28 +1,134 @@
-import { Accessor, ParentProps } from 'solid-js';
 import { VariantProps } from 'class-variance-authority';
+import { Accessor } from 'solid-js';
 import { toggleVariants } from '../../toggle/Toggle/Toggle.styles';
-export interface ToggleGroupProps extends ParentProps, VariantProps<typeof toggleVariants> {
-    /** 受控选中值（数组）；不传则内部自管理 */
-    value?: string[];
-    /** 非受控模式下的初始选中值 */
-    defaultValue?: string[];
-    onValueChange?: (value: string[]) => void;
-    /** 是否允许同时选中多个，默认 false */
-    multiple?: boolean;
+import { BaseProps, PolymorphicProps } from '../../../types';
+/**
+ * ToggleGroup / ToggleGroupItem 的值类型(与 `TabsValue` 保持一致,支持 string 与 number)。
+ * 组件通过泛型参数收窄到具体字面量联合类型,例如 `"bold" | "italic"` 或 `1 | 2`。
+ */
+export type ToggleGroupValue = string | number;
+/** item 的 variant / size 取值直接取自 toggleVariants,避免多处维护 */
+export type ToggleGroupVariant = NonNullable<VariantProps<typeof toggleVariants>["variant"]>;
+export type ToggleGroupSize = NonNullable<VariantProps<typeof toggleVariants>["size"]>;
+export type ToggleGroupOrientation = "horizontal" | "vertical";
+/** 对齐 base-ui:ToggleGroup 的 change reason 目前只有 "none" */
+export type ToggleGroupChangeEventReason = "none";
+/**
+ * onValueChange 的第二个参数,语义对齐 base-ui 的 `ToggleGroup.ChangeEventDetails`。
+ *
+ * - `cancel()`:阻止组件提交本次变更(受控模式下状态由外部决定,组件本就不提交)
+ * - `allowPropagation()`:API 对齐保留;本实现不主动阻止事件传播,因此是空操作
+ */
+export interface ToggleGroupChangeEventDetails {
+    reason: ToggleGroupChangeEventReason;
+    event: Event;
+    cancel: () => void;
+    allowPropagation: () => void;
+    readonly isCanceled: boolean;
+    readonly isPropagationAllowed: boolean;
+    trigger: Element | undefined;
+}
+/** 单选与多选共用的 props */
+interface ToggleGroupCommonProps extends BaseProps {
+    /** 整组禁用,item 会继承该状态 */
     disabled?: boolean;
-    orientation?: "horizontal" | "vertical";
-    /** 项目之间的间距，通过 --gap 变量实现，默认 2 */
+    /** 布局方向,默认 "horizontal";同时决定方向键映射与排列方向 */
+    orientation?: ToggleGroupOrientation;
+    /** 方向键到达边界时是否循环回另一端,默认 true */
+    loopFocus?: boolean;
+    /**
+     * item 之间的间距,通过根元素上的 `--gap` 变量实现,默认 2(对齐 shadcn)。
+     * 传 0 时相邻 item 拼接为一个整体(仅首尾保留圆角与边框)。
+     */
     spacing?: number;
-    class?: string;
-    dir?: "ltr" | "rtl" | "auto";
+    /** 组级 variant,item 未单独指定时继承 */
+    variant?: ToggleGroupVariant;
+    /** 组级 size,item 未单独指定时继承 */
+    size?: ToggleGroupSize;
+}
+/**
+ * 单选模式(默认):`value` / `defaultValue` / `onValueChange` 都是**标量**。
+ *
+ * 这是本项目对 base-ui 的一处有意偏离 —— base-ui 单选时也要求传数组,用起来别扭。
+ * 取消选中时回调收到 `undefined`。
+ *
+ * 注意:`value === undefined` 视为非受控,所以受控的单选组请让信号有确定值
+ * (信号类型建议 `TValue | undefined`,并在传参前用 `??` 兜底,或改用多选数组模式)。
+ */
+export interface ToggleGroupSingleProps<TValue extends ToggleGroupValue = ToggleGroupValue> extends ToggleGroupCommonProps {
+    /** 单选模式标记(默认),不需要显式传 */
+    multiple?: false;
+    /** 受控选中值;不传则内部自管理 */
+    value?: TValue;
+    /** 非受控模式下的初始选中值 */
+    defaultValue?: TValue;
+    /** 选中值变化回调(受控与非受控都会触发) */
+    onValueChange?: (value: TValue | undefined, eventDetails: ToggleGroupChangeEventDetails) => void;
+}
+/** 多选模式(`multiple`):值是数组,未选中时为空数组 */
+export interface ToggleGroupMultipleProps<TValue extends ToggleGroupValue = ToggleGroupValue> extends ToggleGroupCommonProps {
+    /** 多选模式标记 */
+    multiple: true;
+    /** 受控选中值;不传则内部自管理 */
+    value?: readonly TValue[];
+    /** 非受控模式下的初始选中值 */
+    defaultValue?: readonly TValue[];
+    /** 选中值变化回调(受控与非受控都会触发) */
+    onValueChange?: (value: TValue[], eventDetails: ToggleGroupChangeEventDetails) => void;
+}
+/**
+ * 值类型由泛型参数决定:
+ * - 不传时是宽类型 `ToggleGroupValue`(string | number)
+ * - `defaultValue` / `value` / `onValueChange` 中任意一处给出具体类型即可推导,
+ *   例如 `defaultValue={1}` 会推导出 `number`
+ * - 也可显式指定:`<ToggleGroup<"bold" | "italic"> />`
+ *
+ * `multiple` 决定值的形状:单选是标量,多选是数组(传错会被类型拦住)。
+ */
+export type ToggleGroupProps<TValue extends ToggleGroupValue = ToggleGroupValue> = PolymorphicProps<"div", ToggleGroupSingleProps<TValue> | ToggleGroupMultipleProps<TValue>, false>;
+/** 两种模式下 onValueChange 的联合类型(供内部状态实现使用) */
+export type ToggleGroupChangeHandler<TValue extends ToggleGroupValue> = NonNullable<ToggleGroupSingleProps<TValue>["onValueChange"]> | NonNullable<ToggleGroupMultipleProps<TValue>["onValueChange"]>;
+/** 已注册的 item,供 roving focus 与键盘导航使用 */
+export interface ToggleGroupItemEntry<TValue extends ToggleGroupValue = ToggleGroupValue> {
+    value: TValue;
+    element: HTMLElement;
+    /** accessor,支持运行时 disabled 翻转 */
+    disabled: () => boolean;
 }
-export interface ToggleGroupContextValue {
-    value: Accessor<string[]>;
-    setValue: (value: string[]) => void;
+export interface ToggleGroupContextValue<TValue extends ToggleGroupValue = ToggleGroupValue> {
+    /**
+     * 当前选中值,**已规范化成数组**:单选模式是 0 或 1 个元素。
+     * 判断某个 item 是否选中请用 `isPressed`。
+     */
+    value: Accessor<readonly TValue[]>;
     multiple: Accessor<boolean>;
     disabled: Accessor<boolean>;
-    orientation: Accessor<"horizontal" | "vertical">;
+    orientation: Accessor<ToggleGroupOrientation>;
+    loopFocus: Accessor<boolean>;
+    dir: Accessor<"ltr" | "rtl" | "auto" | undefined>;
     spacing: Accessor<number>;
-    variant: Accessor<"default" | "outline">;
-    size: Accessor<"default" | "sm" | "lg">;
+    /** 组级 variant / size;未显式指定时为 undefined,便于 item 单独覆盖 */
+    variant: Accessor<ToggleGroupVariant | undefined>;
+    size: Accessor<ToggleGroupSize | undefined>;
+    /** 当前焦点高亮的 item(roving focus 的 tabindex 起点) */
+    highlightedValue: Accessor<TValue | undefined>;
+    /**
+     * 以下带值参数的方法用 method 简写声明:方法参数是双变的,
+     * 因此 `ToggleGroupContextValue<number>` 仍可赋给 `ToggleGroupContextValue<string | number>`
+     * (Provider 的 value 类型是宽类型,不能用函数属性写法,否则逆变会报错)。
+     */
+    /** 该 value 当前是否处于按下状态 */
+    isPressed(value: TValue): boolean;
+    /** 切换某个 item 的按下状态,并按模式派发 onValueChange */
+    toggleItem(value: TValue, event: Event, trigger?: Element): void;
+    setHighlightedValue(value: TValue): void;
+    /** 按挂载顺序注册 item,返回注销函数 */
+    registerItem(entry: ToggleGroupItemEntry<TValue>): () => void;
+    /** 已注册的 item 列表(挂载顺序) */
+    getItems(): ToggleGroupItemEntry<TValue>[];
+    /** 高亮缺失时,该 value 是否为第一个可用 item(tabindex 起点) */
+    isFirstEnabled(value: TValue): boolean;
+    /** 该 value 对应的 item 当前是否可用(已注册且未 disabled) */
+    isUsable(value: TValue): boolean;
 }
+export {};

package/dist/components/toggle-group/ToggleGroup/create-change-event-details.d.ts

@@ -0,0 +1,8 @@
+import { ToggleGroupChangeEventDetails } from './ToggleGroup.types';
+/**
+ * 构造 onValueChange 的事件详情(对齐 base-ui 的 `ChangeEventDetails`)。
+ *
+ * `isCanceled` / `isPropagationAllowed` 用 getter 暴露:回调内部可以即时读到
+ * `cancel()` / `allowPropagation()` 之后的最新值,而不是创建时的快照。
+ */
+export declare function createChangeEventDetails(event: Event, trigger?: Element): ToggleGroupChangeEventDetails;

package/dist/components/toggle-group/ToggleGroup/create-change-event-details.js

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

package/dist/components/toggle-group/ToggleGroup/create-change-event-details.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-change-event-details.js","names":[],"sources":["../../../../src/components/toggle-group/ToggleGroup/create-change-event-details.ts"],"sourcesContent":["import type { ToggleGroupChangeEventDetails } from \"./ToggleGroup.types\";\n\n/**\n * 构造 onValueChange 的事件详情(对齐 base-ui 的 `ChangeEventDetails`)。\n *\n * `isCanceled` / `isPropagationAllowed` 用 getter 暴露:回调内部可以即时读到\n * `cancel()` / `allowPropagation()` 之后的最新值,而不是创建时的快照。\n */\nexport function createChangeEventDetails(\n  event: Event,\n  trigger?: Element,\n): ToggleGroupChangeEventDetails {\n  let canceled = false;\n  let propagationAllowed = false;\n\n  return {\n    reason: \"none\",\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":";AAQA,SAAgB,EACd,GACA,GAC+B;CAC/B,IAAI,IAAW,IACX,IAAqB;CAEzB,OAAO;EACL,QAAQ;EACR;EACA;EACA,cAAc;GACZ,IAAW;EACb;EACA,wBAAwB;GACtB,IAAqB;EACvB;EACA,IAAI,aAAa;GACf,OAAO;EACT;EACA,IAAI,uBAAuB;GACzB,OAAO;EACT;CACF;AACF"}

package/dist/components/toggle-group/ToggleGroup/index.d.ts

@@ -1,3 +1,3 @@
 export { ToggleGroup } from './ToggleGroup';
 export { ToggleGroupContext, useToggleGroupContext, } from './ToggleGroup.context';
-export type { ToggleGroupProps, ToggleGroupContextValue, } from './ToggleGroup.types';
+export type { ToggleGroupProps, ToggleGroupSingleProps, ToggleGroupMultipleProps, ToggleGroupValue, ToggleGroupContextValue, ToggleGroupItemEntry, ToggleGroupOrientation, ToggleGroupVariant, ToggleGroupSize, ToggleGroupChangeEventDetails, ToggleGroupChangeEventReason, } from './ToggleGroup.types';

package/dist/components/toggle-group/ToggleGroup/useToggleGroupKeyboard.d.ts

@@ -0,0 +1,17 @@
+import { ToggleGroupContextValue, ToggleGroupValue } from './ToggleGroup.types';
+/**
+ * ToggleGroup 的 roving focus 键盘导航(纯逻辑,可独立单测)。
+ *
+ * 方向映射:
+ * - horizontal + ltr: ArrowRight → next, ArrowLeft → prev
+ * - horizontal + rtl: 左右反转
+ * - vertical:          ArrowDown → next, ArrowUp → prev
+ * - Home → 第一个,End → 最后一个
+ * - loopFocus=true 环绕,false 边界停止;跳过 disabled 的 item
+ *
+ * 只有焦点已经在某个 item 上时才接管按键,避免影响外部其它元素;
+ * 移动焦点后由 item 的 onFocus 更新高亮。
+ */
+export declare function useToggleGroupKeyboard<TValue extends ToggleGroupValue = ToggleGroupValue>(ctx: ToggleGroupContextValue<TValue>): {
+    handleKeyDown: (e: KeyboardEvent) => void;
+};

package/dist/components/toggle-group/ToggleGroup/useToggleGroupKeyboard.js

@@ -0,0 +1,47 @@
+//#region src/components/toggle-group/ToggleGroup/useToggleGroupKeyboard.ts
+var e = /* @__PURE__ */ new Set([
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"ArrowDown",
+	"Home",
+	"End"
+]);
+function t(t) {
+	return { handleKeyDown: (n) => {
+		if (t.disabled() || !e.has(n.key)) return;
+		let r = document.activeElement, i = t.getItems().filter((e) => !e.disabled());
+		if (i.length === 0) return;
+		let a = i.findIndex((e) => e.element === r);
+		if (a === -1) return;
+		let o = t.orientation() === "vertical", s = t.dir(), c = s === "rtl" || s !== "ltr" && typeof document < "u" && getComputedStyle(n.currentTarget).direction === "rtl", l;
+		switch (n.key) {
+			case "Home":
+				l = 0;
+				break;
+			case "End":
+				l = i.length - 1;
+				break;
+			case "ArrowLeft":
+				if (o) return;
+				l = a + (c ? 1 : -1);
+				break;
+			case "ArrowRight":
+				if (o) return;
+				l = a + (c ? -1 : 1);
+				break;
+			case "ArrowUp":
+				if (!o) return;
+				l = a - 1;
+				break;
+			case "ArrowDown":
+				if (!o) return;
+				l = a + 1;
+		}
+		l !== void 0 && (n.preventDefault(), l = t.loopFocus() ? (l + i.length) % i.length : Math.min(i.length - 1, Math.max(0, l)), i[l].element.focus(), t.setHighlightedValue(i[l].value));
+	} };
+}
+//#endregion
+export { t as useToggleGroupKeyboard };
+
+//# sourceMappingURL=useToggleGroupKeyboard.js.map

package/dist/components/toggle-group/ToggleGroup/useToggleGroupKeyboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToggleGroupKeyboard.js","names":[],"sources":["../../../../src/components/toggle-group/ToggleGroup/useToggleGroupKeyboard.ts"],"sourcesContent":["import type {\n  ToggleGroupContextValue,\n  ToggleGroupValue,\n} from \"./ToggleGroup.types\";\n\n/** 键盘导航按键:方向键 + Home/End(对齐 base-ui CompositeRoot 的 enableHomeAndEndKeys) */\nconst NAV_KEYS = new Set([\n  \"ArrowLeft\",\n  \"ArrowRight\",\n  \"ArrowUp\",\n  \"ArrowDown\",\n  \"Home\",\n  \"End\",\n]);\n\n/**\n * ToggleGroup 的 roving focus 键盘导航(纯逻辑,可独立单测)。\n *\n * 方向映射:\n * - horizontal + ltr: ArrowRight → next, ArrowLeft → prev\n * - horizontal + rtl: 左右反转\n * - vertical:          ArrowDown → next, ArrowUp → prev\n * - Home → 第一个,End → 最后一个\n * - loopFocus=true 环绕,false 边界停止;跳过 disabled 的 item\n *\n * 只有焦点已经在某个 item 上时才接管按键,避免影响外部其它元素;\n * 移动焦点后由 item 的 onFocus 更新高亮。\n */\nexport function useToggleGroupKeyboard<\n  TValue extends ToggleGroupValue = ToggleGroupValue,\n>(ctx: ToggleGroupContextValue<TValue>) {\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (ctx.disabled()) return;\n    if (!NAV_KEYS.has(e.key)) return;\n\n    const activeEl = document.activeElement as HTMLElement | null;\n    const items = ctx.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 = ctx.orientation() === \"vertical\";\n    // dir 未指定/auto 时,按根元素的实际书写方向判断(兼容祖先节点上的 dir)\n    const dir = ctx.dir();\n    const isRTL =\n      dir === \"rtl\" ||\n      (dir !== \"ltr\" &&\n        typeof document !== \"undefined\" &&\n        getComputedStyle(e.currentTarget as Element).direction === \"rtl\");\n\n    let nextIndex: number | undefined;\n    switch (e.key) {\n      case \"Home\":\n        nextIndex = 0;\n        break;\n      case \"End\":\n        nextIndex = items.length - 1;\n        break;\n      case \"ArrowLeft\":\n        if (isVertical) return;\n        nextIndex = currentIndex + (isRTL ? 1 : -1);\n        break;\n      case \"ArrowRight\":\n        if (isVertical) return;\n        nextIndex = currentIndex + (isRTL ? -1 : 1);\n        break;\n      case \"ArrowUp\":\n        if (!isVertical) return;\n        nextIndex = currentIndex - 1;\n        break;\n      case \"ArrowDown\":\n        if (!isVertical) return;\n        nextIndex = currentIndex + 1;\n        break;\n    }\n\n    if (nextIndex === undefined) return;\n\n    // 方向键与当前布局匹配,接管默认滚动行为\n    e.preventDefault();\n\n    if (ctx.loopFocus()) {\n      nextIndex = (nextIndex + items.length) % items.length;\n    } else {\n      nextIndex = Math.min(items.length - 1, Math.max(0, nextIndex));\n    }\n\n    items[nextIndex].element.focus();\n    ctx.setHighlightedValue(items[nextIndex].value);\n  };\n\n  return { handleKeyDown };\n}\n"],"mappings":";AAMA,IAAM,oBAAW,IAAI,IAAI;CACvB;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;AAeD,SAAgB,EAEd,GAAsC;CA8DtC,OAAO,EAAE,gBA7Dc,MAAqB;EAE1C,IADI,EAAI,SAAS,KACb,CAAC,EAAS,IAAI,EAAE,GAAG,GAAG;EAE1B,IAAM,IAAW,SAAS,eACpB,IAAQ,EAAI,SAAS,CAAC,CAAC,QAAQ,MAAS,CAAC,EAAK,SAAS,CAAC;EAC9D,IAAI,EAAM,WAAW,GAAG;EAExB,IAAM,IAAe,EAAM,WAAW,MAAS,EAAK,YAAY,CAAQ;EACxE,IAAI,MAAiB,IAAI;EAEzB,IAAM,IAAa,EAAI,YAAY,MAAM,YAEnC,IAAM,EAAI,IAAI,GACd,IACJ,MAAQ,SACP,MAAQ,SACP,OAAO,WAAa,OACpB,iBAAiB,EAAE,aAAwB,CAAC,CAAC,cAAc,OAE3D;EACJ,QAAQ,EAAE,KAAV;GACE,KAAK;IACH,IAAY;IACZ;GACF,KAAK;IACH,IAAY,EAAM,SAAS;IAC3B;GACF,KAAK;IACH,IAAI,GAAY;IAChB,IAAY,KAAgB,IAAQ,IAAI;IACxC;GACF,KAAK;IACH,IAAI,GAAY;IAChB,IAAY,KAAgB,IAAQ,KAAK;IACzC;GACF,KAAK;IACH,IAAI,CAAC,GAAY;IACjB,IAAY,IAAe;IAC3B;GACF,KAAK;IACH,IAAI,CAAC,GAAY;IACjB,IAAY,IAAe;EAE/B;EAEI,MAAc,KAAA,MAGlB,EAAE,eAAe,GAEjB,AAGE,IAHE,EAAI,UAAU,KACH,IAAY,EAAM,UAAU,EAAM,SAEnC,KAAK,IAAI,EAAM,SAAS,GAAG,KAAK,IAAI,GAAG,CAAS,CAAC,GAG/D,EAAM,EAAU,CAAC,QAAQ,MAAM,GAC/B,EAAI,oBAAoB,EAAM,EAAU,CAAC,KAAK;CAChD,EAEuB;AACzB"}

package/dist/components/toggle-group/ToggleGroupItem/ToggleGroupItem.d.ts

@@ -1,3 +1,11 @@
 import { JSX } from 'solid-js';
+import { ToggleGroupValue } from '../ToggleGroup/ToggleGroup.types';
 import { ToggleGroupItemProps } from './ToggleGroupItem.types';
-export declare function ToggleGroupItem(props: ToggleGroupItemProps): JSX.Element;
+/**
+ * ToggleGroupItem:ToggleGroup 内的两态按钮。
+ *
+ * - 选中值由 ToggleGroup 统一持有,点击通过 `ctx.toggleItem` 触发变更
+ * - disabled 继承整组状态,可在 item 上单独禁用
+ * - roving tabindex:整组只有一个 tab 停靠点,方向键在同组内移动焦点
+ */
+export declare function ToggleGroupItem<TValue extends ToggleGroupValue = ToggleGroupValue>(props: ToggleGroupItemProps<TValue>): JSX.Element;

package/dist/components/toggle-group/ToggleGroupItem/ToggleGroupItem.js

@@ -1,72 +1,88 @@
 import { clsx as e } from "../../../utils/clsx.js";
 import { toggleVariants as t } from "../../toggle/Toggle/Toggle.styles.js";
-import { useToggleGroupContext as n } from "../ToggleGroup/ToggleGroup.context.js";
-import { delegateEvents as r, insert as i, mergeProps as a, spread as o, template as s } from "solid-js/web";
-import { createMemo as c, splitProps as l } from "solid-js";
+import { callEventHandler as n } from "../call-event-handler.js";
+import { useToggleGroupContext as r } from "../ToggleGroup/ToggleGroup.context.js";
+import { toggleGroupItemVariants as i } from "./ToggleGroupItem.styles.js";
+import { delegateEvents as a, insert as o, mergeProps as s, spread as c, template as l, use as u } from "solid-js/web";
+import { mergeProps as d, onCleanup as f, onMount as p, splitProps as m } from "solid-js";
 //#region src/components/toggle-group/ToggleGroupItem/ToggleGroupItem.tsx
-var u = /*#__PURE__*/ s("<button data-slot=toggle-group-item>");
-function d(r) {
-	let s = n("ToggleGroupItem"), [d, f] = l(r, [
+var h = /*#__PURE__*/ l("<button data-slot=toggle-group-item>");
+function g(a) {
+	let l = r("ToggleGroupItem"), g = d({ type: "button" }, a), [_, v] = m(g, [
 		"value",
 		"variant",
 		"size",
 		"class",
+		"classList",
 		"disabled",
+		"type",
 		"onClick",
-		"onKeyDown",
-		"type"
-	]), p = c(() => s.variant() || d.variant || "default"), m = c(() => s.size() || d.size || "default"), h = c(() => s.value().includes(d.value)), g = () => s.disabled() || !!d.disabled, _ = () => {
-		if (g()) return;
-		let e = s.value();
-		s.multiple() ? s.setValue(h() ? e.filter((e) => e !== d.value) : [...e, d.value]) : s.setValue([d.value]);
-	}, v = (e) => {
-		if (d.onKeyDown?.(e), e.defaultPrevented || g() || ![
-			"ArrowDown",
-			"ArrowRight",
-			"ArrowUp",
-			"ArrowLeft"
-		].includes(e.key)) return;
-		e.preventDefault();
-		let t = e.currentTarget.closest("[data-slot=\"toggle-group\"]"), n = Array.from(t?.querySelectorAll("[data-slot=\"toggle-group-item\"]") ?? []);
-		n.length !== 0 && n[(n.indexOf(e.currentTarget) + (e.key === "ArrowDown" || e.key === "ArrowRight" ? 1 : -1) + n.length) % n.length].focus();
+		"onFocus",
+		"children"
+	]), y, b = () => l.variant() ?? _.variant ?? "default", x = () => l.size() ?? _.size ?? "default", S = () => l.isPressed(_.value), C = () => l.disabled() || !!_.disabled, w = () => {
+		if (C()) return -1;
+		let e = l.highlightedValue();
+		return e === _.value && l.isUsable(_.value) || (e === void 0 || !l.isUsable(e)) && l.isFirstEnabled(_.value) ? 0 : -1;
 	};
-	return (() => {
-		var n = u();
-		return n.$$keydown = v, n.$$click = (e) => {
-			d.onClick?.(e), e.defaultPrevented || _();
-		}, o(n, a({
+	return p(() => {
+		f(l.registerItem({
+			value: _.value,
+			disabled: C,
+			element: y
+		}));
+	}), (() => {
+		var r = h();
+		return r.addEventListener("focus", (e) => {
+			C() || l.setHighlightedValue(_.value), n(_.onFocus, e);
+		}), r.$$click = (e) => {
+			n(_.onClick, e), !e.defaultPrevented && !C() && l.toggleItem(_.value, e, e.currentTarget);
+		}, u((e) => {
+			y = e;
+		}, r), c(r, s({
 			get type() {
-				return d.type ?? "button";
+				return _.type;
 			},
 			get disabled() {
-				return g();
+				return C();
+			},
+			get tabindex() {
+				return w();
 			},
 			get "data-variant"() {
-				return p();
+				return b();
 			},
 			get "data-size"() {
-				return m();
+				return x();
 			},
 			get "data-spacing"() {
-				return s.spacing();
+				return l.spacing();
 			},
-			get "aria-pressed"() {
-				return h();
+			get "data-pressed"() {
+				return S() ? "" : null;
+			},
+			get "data-disabled"() {
+				return C() ? "" : null;
 			},
 			get "data-state"() {
-				return h() ? "on" : "off";
+				return S() ? "on" : "off";
+			},
+			get "aria-pressed"() {
+				return S();
 			},
 			get class() {
-				return e("shrink-0 focus:z-10 focus-visible:z-10", t({
-					variant: p(),
-					size: m()
-				}), d.class);
+				return e(t({
+					variant: b(),
+					size: x()
+				}), i(), _.class);
+			},
+			get classList() {
+				return _.classList;
 			}
-		}, f), !1, !0), i(n, () => r.children), n;
+		}, v), !1, !0), o(r, () => _.children), r;
 	})();
 }
-r(["click", "keydown"]);
+a(["click"]);
 //#endregion
-export { d as ToggleGroupItem };
+export { g as ToggleGroupItem };
 
 //# sourceMappingURL=ToggleGroupItem.js.map

package/dist/components/toggle-group/ToggleGroupItem/ToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupItem.js","names":["createMemo","splitProps","JSX","clsx","toggleVariants","useToggleGroupContext","ToggleGroupItemProps","ToggleGroupItem","props","Element","ctx","local","rest","variant","size","pressed","value","includes","disabled","select","current","multiple","setValue","filter","onKeyDown","e","KeyboardEvent","defaultPrevented","directions","key","preventDefault","group","currentTarget","HTMLElement","closest","items","Array","from","querySelectorAll","length","currentIndex","indexOf","forward","delta","nextIndex","focus","_el$","_tmpl$","$$keydown","$$click","onClick","_$spread","_$mergeProps","type","data-variant","data-size","data-spacing","spacing","aria-pressed","data-state","class","_$insert","children","_$delegateEvents"],"sources":["../../../../src/components/toggle-group/ToggleGroupItem/ToggleGroupItem.tsx"],"sourcesContent":["import { createMemo, splitProps, type JSX } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { toggleVariants } from \"~/components/toggle/Toggle/Toggle.styles\";\nimport { useToggleGroupContext } from \"../ToggleGroup/ToggleGroup.context\";\nimport type { ToggleGroupItemProps } from \"./ToggleGroupItem.types\";\n\nexport function ToggleGroupItem(props: ToggleGroupItemProps): JSX.Element {\n  const ctx = useToggleGroupContext(\"ToggleGroupItem\");\n\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"variant\",\n    \"size\",\n    \"class\",\n    \"disabled\",\n    \"onClick\",\n    \"onKeyDown\",\n    \"type\",\n  ]);\n\n  const variant = createMemo(() => ctx.variant() || local.variant || \"default\");\n  const size = createMemo(() => ctx.size() || local.size || \"default\");\n  const pressed = createMemo(() => ctx.value().includes(local.value));\n  const disabled = () => ctx.disabled() || !!local.disabled;\n\n  const select = () => {\n    if (disabled()) return;\n    const current = ctx.value();\n    if (ctx.multiple()) {\n      ctx.setValue(\n        pressed()\n          ? current.filter((value) => value !== local.value)\n          : [...current, local.value],\n      );\n    } else {\n      ctx.setValue([local.value]);\n    }\n  };\n\n  const onKeyDown = (e: KeyboardEvent) => {\n    (local.onKeyDown as any)?.(e);\n    if (e.defaultPrevented || disabled()) return;\n\n    const directions = [\"ArrowDown\", \"ArrowRight\", \"ArrowUp\", \"ArrowLeft\"];\n    if (!directions.includes(e.key)) return;\n    e.preventDefault();\n\n    const group = (e.currentTarget as HTMLElement).closest(\n      '[data-slot=\"toggle-group\"]',\n    );\n    const items = Array.from(\n      group?.querySelectorAll<HTMLElement>('[data-slot=\"toggle-group-item\"]') ??\n        [],\n    );\n    if (items.length === 0) return;\n\n    const currentIndex = items.indexOf(e.currentTarget as HTMLElement);\n    const forward = e.key === \"ArrowDown\" || e.key === \"ArrowRight\";\n    const delta = forward ? 1 : -1;\n    const nextIndex = (currentIndex + delta + items.length) % items.length;\n    items[nextIndex].focus();\n  };\n\n  return (\n    <button\n      type={(local.type as \"button\") ?? \"button\"}\n      disabled={disabled()}\n      data-slot=\"toggle-group-item\"\n      data-variant={variant()}\n      data-size={size()}\n      data-spacing={ctx.spacing()}\n      aria-pressed={pressed()}\n      data-state={pressed() ? \"on\" : \"off\"}\n      class={clsx(\n        \"shrink-0 focus:z-10 focus-visible:z-10\",\n        toggleVariants({ variant: variant(), size: size() }),\n        local.class,\n      )}\n      onClick={(e) => {\n        (local.onClick as any)?.(e);\n        if (!e.defaultPrevented) select();\n      }}\n      onKeyDown={onKeyDown}\n      {...rest}\n    >\n      {props.children}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;AAMA,SAAgBO,EAAgBC,GAA0C;CACxE,IAAME,IAAML,EAAsB,iBAAiB,GAE7C,CAACM,GAAOC,KAAQX,EAAWO,GAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAM,CACP,GAEKK,IAAUb,QAAiBU,EAAIG,QAAQ,KAAKF,EAAME,WAAW,SAAS,GACtEC,IAAOd,QAAiBU,EAAII,KAAK,KAAKH,EAAMG,QAAQ,SAAS,GAC7DC,IAAUf,QAAiBU,EAAIM,MAAM,CAAC,CAACC,SAASN,EAAMK,KAAK,CAAC,GAC5DE,UAAiBR,EAAIQ,SAAS,KAAK,CAAC,CAACP,EAAMO,UAE3CC,UAAe;EACnB,IAAID,EAAS,GAAG;EAChB,IAAME,IAAUV,EAAIM,MAAM;EAC1B,AAAIN,EAAIW,SAAS,IACfX,EAAIY,SACFP,EAAQ,IACJK,EAAQG,QAAQP,MAAUA,MAAUL,EAAMK,KAAK,IAC/C,CAAC,GAAGI,GAAST,EAAMK,KAAK,CAC9B,IAEAN,EAAIY,SAAS,CAACX,EAAMK,KAAK,CAAC;CAE9B,GAEMQ,KAAaC,MAAqB;EAKtC,IAJA,EAAOD,YAAoBC,CAAC,GACxBA,EAAEE,oBAAoBT,EAAS,KAG/B,CAACU;GADe;GAAa;GAAc;GAAW;EACrDA,CAAAA,CAAWX,SAASQ,EAAEI,GAAG,GAAG;EACjCJ,EAAEK,eAAe;EAEjB,IAAMC,IAASN,EAAEO,cAA8BE,QAC7C,8BACF,GACMC,IAAQC,MAAMC,KAClBN,GAAOO,iBAA8B,mCAAiC,KACpE,CAAA,CACJ;EACIH,EAAMI,WAAW,KAMrBJ,GAJqBA,EAAMM,QAAQhB,EAAEO,aAGlBQ,KAFHf,EAAEI,QAAQ,eAAeJ,EAAEI,QAAQ,eAC3B,IAAI,MACcM,EAAMI,UAAUJ,EAAMI,OAChD,CAACM,MAAM;CACzB;CAEA,cAAA;EAAA,IAAAC,IAAAC,EAAA;EAsBmB,OAtBnBD,EAAAE,YAmBexB,GAASsB,EAAAG,WAJVxB,MAAM;GAEd,AADA,EAAOyB,UAAkBzB,CAAC,GACrBA,EAAEE,oBAAkBR,EAAO;EAClC,GAACgC,EAAAL,GAAAM,EAAA;GAAA,IAhBDC,OAAI;IAAA,OAAG1C,EAAM0C,QAAqB;GAAQ;GAAA,IAC1CnC,WAAQ;IAAA,OAAEA,EAAS;GAAC;GAAA,IAAA,iBAAA;IAAA,OAENL,EAAQ;GAAC;GAAA,IAAA,cAAA;IAAA,OACZC,EAAK;GAAC;GAAA,IAAA,iBAAA;IAAA,OACHJ,EAAI+C,QAAQ;GAAC;GAAA,IAAA,iBAAA;IAAA,OACb1C,EAAQ;GAAC;GAAA,IAAA,eAAA;IAAA,OACXA,EAAQ,IAAI,OAAO;GAAK;GAAA,IAAA,QAAA;IAAA,OAC7BZ,EACL,0CACAC,EAAe;KAAES,SAASA,EAAQ;KAAGC,MAAMA,EAAK;IAAE,CAAC,GACnDH,EAAMiD,KACR;GAAC;EAAA,GAMGhD,CAAI,GAAA,IAAA,EAAA,GAAAiD,EAAAf,SAEPtC,EAAMsD,QAAQ,GAAAhB;CAAA,EAAA,CAAA;AAGrB;AAACiB,EAAA,CAAA,SAAA,SAAA,CAAA"}
+{"version":3,"file":"ToggleGroupItem.js","names":["mergeProps","onCleanup","onMount","splitProps","JSX","clsx","toggleVariants","callEventHandler","useToggleGroupContext","ToggleGroupValue","toggleGroupItemVariants","ToggleGroupItemProps","ToggleGroupItem","props","TValue","Element","ctx","merged","type","const","local","rest","elementRef","HTMLButtonElement","variant","size","pressed","isPressed","value","disabled","tabIndex","highlighted","highlightedValue","isUsable","undefined","isFirstEnabled","registerItem","element","_el$","_tmpl$","addEventListener","e","setHighlightedValue","onFocus","$$click","onClick","defaultPrevented","toggleItem","currentTarget","_$use","el","_$spread","_$mergeProps","tabindex","data-variant","data-size","data-spacing","spacing","data-pressed","data-disabled","data-state","aria-pressed","class","classList","_$insert","children","_$delegateEvents"],"sources":["../../../../src/components/toggle-group/ToggleGroupItem/ToggleGroupItem.tsx"],"sourcesContent":["import { mergeProps, onCleanup, onMount, splitProps, type JSX } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { toggleVariants } from \"~/components/toggle/Toggle/Toggle.styles\";\nimport { callEventHandler } from \"../call-event-handler\";\nimport { useToggleGroupContext } from \"../ToggleGroup/ToggleGroup.context\";\nimport type { ToggleGroupValue } from \"../ToggleGroup/ToggleGroup.types\";\nimport { toggleGroupItemVariants } from \"./ToggleGroupItem.styles\";\nimport type { ToggleGroupItemProps } from \"./ToggleGroupItem.types\";\n\n/**\n * ToggleGroupItem:ToggleGroup 内的两态按钮。\n *\n * - 选中值由 ToggleGroup 统一持有,点击通过 `ctx.toggleItem` 触发变更\n * - disabled 继承整组状态,可在 item 上单独禁用\n * - roving tabindex:整组只有一个 tab 停靠点,方向键在同组内移动焦点\n */\nexport function ToggleGroupItem<\n  TValue extends ToggleGroupValue = ToggleGroupValue,\n>(props: ToggleGroupItemProps<TValue>): JSX.Element {\n  // context 用宽值类型读取:item 无法从父级推导 group 的值类型,\n  // 自己的 TValue 始终可以传给宽类型参数\n  const ctx = useToggleGroupContext(\"ToggleGroupItem\");\n  const merged = mergeProps({ type: \"button\" as const }, props);\n\n  const [local, rest] = splitProps(merged, [\n    \"value\",\n    \"variant\",\n    \"size\",\n    \"class\",\n    \"classList\",\n    \"disabled\",\n    \"type\",\n    \"onClick\",\n    \"onFocus\",\n    \"children\",\n  ]);\n\n  let elementRef: HTMLButtonElement | undefined;\n\n  // 组级未显式指定 variant/size 时,item 可单独覆盖\n  const variant = () => ctx.variant() ?? local.variant ?? \"default\";\n  const size = () => ctx.size() ?? local.size ?? \"default\";\n  const pressed = () => ctx.isPressed(local.value);\n  const disabled = () => ctx.disabled() || !!local.disabled;\n\n  // roving tabindex:高亮 item 持 0;高亮缺失或指向不可用 item(disabled/卸载)时,\n  // 首个可用 item 持 0 作为键盘起点,避免整组键盘不可达\n  const tabIndex = () => {\n    if (disabled()) return -1;\n    const highlighted = ctx.highlightedValue();\n    if (highlighted === local.value && ctx.isUsable(local.value)) return 0;\n    if (\n      (highlighted === undefined || !ctx.isUsable(highlighted)) &&\n      ctx.isFirstEnabled(local.value)\n    ) {\n      return 0;\n    }\n    return -1;\n  };\n\n  onMount(() => {\n    onCleanup(\n      ctx.registerItem({\n        value: local.value,\n        disabled,\n        element: elementRef!,\n      }),\n    );\n  });\n\n  return (\n    <button\n      ref={(el) => {\n        elementRef = el;\n      }}\n      type={local.type}\n      disabled={disabled()}\n      tabindex={tabIndex()}\n      data-slot=\"toggle-group-item\"\n      data-variant={variant()}\n      data-size={size()}\n      data-spacing={ctx.spacing()}\n      data-pressed={pressed() ? \"\" : null}\n      data-disabled={disabled() ? \"\" : null}\n      data-state={pressed() ? \"on\" : \"off\"}\n      aria-pressed={pressed()}\n      class={clsx(\n        toggleVariants({ variant: variant(), size: size() }),\n        toggleGroupItemVariants(),\n        local.class,\n      )}\n      classList={local.classList}\n      onClick={(e) => {\n        // 用户回调优先,可用 preventDefault() 阻止本次选中\n        callEventHandler(local.onClick, e);\n        if (!e.defaultPrevented && !disabled()) {\n          ctx.toggleItem(local.value, e, e.currentTarget);\n        }\n      }}\n      onFocus={(e) => {\n        // 聚焦更新高亮(roving focus 起点)\n        if (!disabled()) ctx.setHighlightedValue(local.value);\n        callEventHandler(local.onFocus, e);\n      }}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAgBY,EAEdC,GAAkD;CAGlD,IAAMG,IAAMR,EAAsB,iBAAiB,GAC7CS,IAASjB,EAAW,EAAEkB,MAAM,SAAkB,GAAGL,CAAK,GAEtD,CAACO,GAAOC,KAAQlB,EAAWc,GAAQ;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX,GAEGK,GAGEE,UAAgBR,EAAIQ,QAAQ,KAAKJ,EAAMI,WAAW,WAClDC,UAAaT,EAAIS,KAAK,KAAKL,EAAMK,QAAQ,WACzCC,UAAgBV,EAAIW,UAAUP,EAAMQ,KAAK,GACzCC,UAAiBb,EAAIa,SAAS,KAAK,CAAC,CAACT,EAAMS,UAI3CC,UAAiB;EACrB,IAAID,EAAS,GAAG,OAAO;EACvB,IAAME,IAAcf,EAAIgB,iBAAiB;EAQzC,OAPID,MAAgBX,EAAMQ,SAASZ,EAAIiB,SAASb,EAAMQ,KAAK,MAExDG,MAAgBG,KAAAA,KAAa,CAAClB,EAAIiB,SAASF,CAAW,MACvDf,EAAImB,eAAef,EAAMQ,KAAK,IAEvB,IAEF;CACT;CAYA,OAVA1B,QAAc;EACZD,EACEe,EAAIoB,aAAa;GACfR,OAAOR,EAAMQ;GACbC;GACAQ,SAASf;EACX,CAAC,CACH;CACF,CAAC,UAED;EAAA,IAAAgB,IAAAC,EAAA;EAoCmB,OApCnBD,EAAAE,iBAAA,UA6BcC,MAAM;GAGdlC,AADKsB,EAAS,KAAGb,EAAI0B,oBAAoBtB,EAAMQ,KAAK,GACpDrB,EAAiBa,EAAMuB,SAASF,CAAC;EACnC,CAAC,GAAAH,EAAAM,WAXSH,MAAM;GAGd,AADAlC,EAAiBa,EAAMyB,SAASJ,CAAC,GAC7B,CAACA,EAAEK,oBAAoB,CAACjB,EAAS,KACnCb,EAAI+B,WAAW3B,EAAMQ,OAAOa,GAAGA,EAAEO,aAAa;EAElD,GAACC,GA1BKC,MAAO;GACX5B,IAAa4B;EACf,GAACZ,CAAA,GAAAa,EAAAb,GAAAc,EAAA;GAAA,IACDlC,OAAI;IAAA,OAAEE,EAAMF;GAAI;GAAA,IAChBW,WAAQ;IAAA,OAAEA,EAAS;GAAC;GAAA,IACpBwB,WAAQ;IAAA,OAAEvB,EAAS;GAAC;GAAA,IAAA,iBAAA;IAAA,OAENN,EAAQ;GAAC;GAAA,IAAA,cAAA;IAAA,OACZC,EAAK;GAAC;GAAA,IAAA,iBAAA;IAAA,OACHT,EAAIyC,QAAQ;GAAC;GAAA,IAAA,iBAAA;IAAA,OACb/B,EAAQ,IAAI,KAAK;GAAI;GAAA,IAAA,kBAAA;IAAA,OACpBG,EAAS,IAAI,KAAK;GAAI;GAAA,IAAA,eAAA;IAAA,OACzBH,EAAQ,IAAI,OAAO;GAAK;GAAA,IAAA,iBAAA;IAAA,OACtBA,EAAQ;GAAC;GAAA,IAAA,QAAA;IAAA,OAChBrB,EACLC,EAAe;KAAEkB,SAASA,EAAQ;KAAGC,MAAMA,EAAK;IAAE,CAAC,GACnDf,EAAwB,GACxBU,EAAM0C,KACR;GAAC;GAAA,IACDC,YAAS;IAAA,OAAE3C,EAAM2C;GAAS;EAAA,GAatB1C,CAAI,GAAA,IAAA,EAAA,GAAA2C,EAAA1B,SAEPlB,EAAM6C,QAAQ,GAAA3B;CAAA,EAAA,CAAA;AAGrB;AAAC4B,EAAA,CAAA,OAAA,CAAA"}

package/dist/components/toggle-group/ToggleGroupItem/ToggleGroupItem.styles.d.ts

@@ -0,0 +1,12 @@
+/**
+ * ToggleGroupItem 位于 ToggleGroup 内时需要的“拼接态”样式。
+ *
+ * 依赖根元素上的钩子:
+ * - `group-data-[spacing=0]/toggle-group`:spacing 为 0 时相邻 item 拼接为整体
+ * - `data-[spacing=0]`:item 自身的 data-spacing(shadcn 同样在 item 上输出)
+ * - `group-data-horizontal|vertical/toggle-group`:按方向决定首尾圆角/边框
+ * - `data-[variant=outline]`:outline 拼接时只保留内侧边框
+ *
+ * variant / size 的基础样式仍由 `toggleVariants` 提供,这里只补“组合关系”。
+ */
+export declare const toggleGroupItemVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/toggle-group/ToggleGroupItem/ToggleGroupItem.styles.js

@@ -0,0 +1,7 @@
+import { cva as e } from "class-variance-authority";
+//#region src/components/toggle-group/ToggleGroupItem/ToggleGroupItem.styles.ts
+var t = e("shrink-0 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t");
+//#endregion
+export { t as toggleGroupItemVariants };
+
+//# sourceMappingURL=ToggleGroupItem.styles.js.map

package/dist/components/toggle-group/ToggleGroupItem/ToggleGroupItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroupItem.styles.js","names":[],"sources":["../../../../src/components/toggle-group/ToggleGroupItem/ToggleGroupItem.styles.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\n/**\n * ToggleGroupItem 位于 ToggleGroup 内时需要的“拼接态”样式。\n *\n * 依赖根元素上的钩子:\n * - `group-data-[spacing=0]/toggle-group`:spacing 为 0 时相邻 item 拼接为整体\n * - `data-[spacing=0]`:item 自身的 data-spacing(shadcn 同样在 item 上输出)\n * - `group-data-horizontal|vertical/toggle-group`:按方向决定首尾圆角/边框\n * - `data-[variant=outline]`:outline 拼接时只保留内侧边框\n *\n * variant / size 的基础样式仍由 `toggleVariants` 提供,这里只补“组合关系”。\n */\nexport const toggleGroupItemVariants = cva(\n  \"shrink-0 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n);\n"],"mappings":";;AAaA,IAAa,IAA0B,EACrC,k4BACF"}

package/dist/components/toggle-group/ToggleGroupItem/ToggleGroupItem.types.d.ts

@@ -1,10 +1,24 @@
 import { VariantProps } from 'class-variance-authority';
 import { ComponentProps } from 'solid-js';
 import { toggleVariants } from '../../toggle/Toggle/Toggle.styles';
-export interface ToggleGroupItemProps extends ComponentProps<"button">, VariantProps<typeof toggleVariants> {
-    /** 当前 item 的唯一值 */
-    value: string;
-    /** 默认从 ToggleGroup context 继承；可单独覆盖 */
-    variant?: "default" | "outline";
-    size?: "default" | "sm" | "lg";
-}
+import { HTMLAttributes, PolymorphicProps } from '../../../types';
+import { ToggleGroupValue } from '../ToggleGroup/ToggleGroup.types';
+/**
+ * 必须先从 button 属性里摘掉原生的 `value`(Solid 声明为 `string | undefined`),
+ * 否则会与下面的 `value: TValue` 求交叉:`number & string` 会塌缩成 `never`。
+ */
+type BaseToggleGroupItemProps<TValue extends ToggleGroupValue> = VariantProps<typeof toggleVariants> & Omit<HTMLAttributes<"button">, "value"> & {
+    /** 当前 item 的唯一值,类型由泛型参数决定(与所属 ToggleGroup 保持一致) */
+    value: TValue;
+    /** 组件内部会先处理选中,再调用用户回调(与 tabs 的 trigger 一致) */
+    onClick?: ComponentProps<"button">["onClick"];
+    /** 聚焦即更新 roving focus 高亮,用户回调会被一并调用 */
+    onFocus?: ComponentProps<"button">["onFocus"];
+};
+/**
+ * 泛型参数约束 `value` 的类型(默认 `string | number`)。
+ * 子组件无法从父级 `ToggleGroup` 推导类型,因此这里由 `value` 自身推导,
+ * 或显式指定:`<ToggleGroupItem<"bold" | "italic"> value="bold" />`。
+ */
+export type ToggleGroupItemProps<TValue extends ToggleGroupValue = ToggleGroupValue> = PolymorphicProps<"button", BaseToggleGroupItemProps<TValue>, false>;
+export {};

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

@@ -0,0 +1,5 @@
+/**
+ * 调用用户传入的事件处理器(兼容 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

@@ -0,0 +1,9 @@
+//#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

@@ -0,0 +1 @@
+{"version":3,"file":"call-event-handler.js","names":[],"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,SAAgB,EACd,GACA,GACM;CACN,IAAM,IAAO,MAAM,QAAQ,CAAO,IAAI,IAAU,CAAC,CAAO;CACxD,KAAK,IAAM,KAAK,GACd,AAAI,OAAO,KAAM,cAAY,EAAsB,CAAK;AAE5D"}

package/dist/components/toggle-group/index.d.ts

@@ -1,4 +1,4 @@
 export { ToggleGroup } from './ToggleGroup';
-export type { ToggleGroupProps, ToggleGroupContextValue } from './ToggleGroup';
+export type { ToggleGroupProps, ToggleGroupSingleProps, ToggleGroupMultipleProps, ToggleGroupValue, ToggleGroupContextValue, ToggleGroupItemEntry, ToggleGroupOrientation, ToggleGroupVariant, ToggleGroupSize, ToggleGroupChangeEventDetails, ToggleGroupChangeEventReason, } from './ToggleGroup';
 export { ToggleGroupItem } from './ToggleGroupItem';
 export type { ToggleGroupItemProps } from './ToggleGroupItem';