@neut/ui 0.0.12 → 0.0.14

package/dist/components/toggle/Toggle/Toggle.styles.js

@@ -0,0 +1,23 @@
+import { cva as e } from "class-variance-authority";
+//#region src/components/toggle/Toggle/Toggle.styles.ts
+var t = e("group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			default: "bg-transparent",
+			outline: "border border-input bg-transparent hover:bg-muted"
+		},
+		size: {
+			default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+//#endregion
+export { t as toggleVariants };
+
+//# sourceMappingURL=Toggle.styles.js.map

package/dist/components/toggle/Toggle/Toggle.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.styles.js","names":[],"sources":["../../../../src/components/toggle/Toggle/Toggle.styles.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\nexport const toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border border-input bg-transparent hover:bg-muted\",\n      },\n      size: {\n        default:\n          \"h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        sm: \"h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n"],"mappings":";;AAEA,IAAa,IAAiB,EAC5B,uhBACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;EACX;EACA,MAAM;GACJ,SACE;GACF,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF"}

package/dist/components/toggle/Toggle/Toggle.types.d.ts

@@ -0,0 +1,12 @@
+import { VariantProps } from 'class-variance-authority';
+import { ComponentProps } from 'solid-js';
+import { toggleVariants } from './Toggle.styles';
+export interface ToggleProps extends ComponentProps<"button">, VariantProps<typeof toggleVariants> {
+    /** 受控按下状态；不传则内部自管理 */
+    pressed?: boolean;
+    /** 非受控模式下的初始按下状态 */
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    /** 在 ToggleGroup 中使用的唯一值 */
+    value?: string;
+}

package/dist/components/toggle/Toggle/index.d.ts

@@ -0,0 +1,3 @@
+export { Toggle } from './Toggle';
+export type { ToggleProps } from './Toggle.types';
+export { toggleVariants } from './Toggle.styles';

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

@@ -0,0 +1,2 @@
+export { Toggle, toggleVariants } from './Toggle';
+export type { ToggleProps } from './Toggle';

package/dist/components/toggle/index.js

@@ -0,0 +1,3 @@
+import { toggleVariants as e } from "./Toggle/Toggle.styles.js";
+import { Toggle as t } from "./Toggle/Toggle.js";
+export { t as Toggle, e as toggleVariants };

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

@@ -0,0 +1,36 @@
+import { ToggleGroupChangeEventDetails, ToggleGroupContextValue, ToggleGroupOrientation, ToggleGroupSize, ToggleGroupValue, ToggleGroupVariant } from './ToggleGroup.types';
+declare const ToggleGroupContext: import('solid-js').Context<ToggleGroupContextValue<ToggleGroupValue> | undefined>;
+/** createToggleGroupState 的输入:与 ToggleGroupProps 的运行时字段一致 */
+export interface ToggleGroupStateProps<TValue extends ToggleGroupValue = ToggleGroupValue> {
+    value?: readonly TValue[];
+    defaultValue?: readonly TValue[];
+    onValueChange?: (value: TValue[], eventDetails: ToggleGroupChangeEventDetails) => void;
+    multiple: boolean;
+    disabled: boolean;
+    orientation: ToggleGroupOrientation;
+    loopFocus: boolean;
+    dir?: "ltr" | "rtl" | "auto";
+    spacing: number;
+    variant?: ToggleGroupVariant;
+    size?: ToggleGroupSize;
+}
+/**
+ * ToggleGroup 的唯一状态源:选中值(受控/非受控)、焦点高亮、item 注册表。
+ *
+ * 返回的 context 值里所有字段都是 accessor,因此传入的 `props` 可以是
+ * splitProps/mergeProps 得到的响应式代理,读取始终是最新值。
+ * 组件根只负责输出 DOM 与 data-* 样式钩子,状态与交互算法收敛在这里。
+ *
+ * 值类型由泛型参数决定;内部只用 `===` / `includes` 做同一性比较,
+ * 因此 string 与 number 都能正常工作。
+ */
+export declare function createToggleGroupState<TValue extends ToggleGroupValue = ToggleGroupValue>(props: ToggleGroupStateProps<TValue>): ToggleGroupContextValue<TValue>;
+/**
+ * 读取 ToggleGroup 的 context。
+ *
+ * 泛型参数是**调用方标注**:组件本身无法从子节点推导所属 group 的值类型,
+ * 自定义 item 时请显式传入与 ToggleGroup 一致的类型,例如
+ * `useToggleGroupContext<"bold" | "italic">("MyToggle")`。
+ */
+export declare function useToggleGroupContext<TValue extends ToggleGroupValue = ToggleGroupValue>(component: string): ToggleGroupContextValue<TValue>;
+export { ToggleGroupContext };

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

@@ -0,0 +1,40 @@
+import { createChangeEventDetails as e } from "./create-change-event-details.js";
+import { createContext as t, createSignal as n, useContext as r } from "solid-js";
+//#region src/components/toggle-group/ToggleGroup/ToggleGroup.context.ts
+var i = t();
+function a(t) {
+	let [r, i] = n([...t.defaultValue ?? []]), [a, o] = n(), [s, c] = n([]), l = () => t.value !== void 0, u = () => l() ? t.value : r();
+	return {
+		value: u,
+		multiple: () => t.multiple,
+		disabled: () => t.disabled,
+		orientation: () => t.orientation,
+		loopFocus: () => t.loopFocus,
+		dir: () => t.dir,
+		spacing: () => t.spacing,
+		variant: () => t.variant,
+		size: () => t.size,
+		highlightedValue: a,
+		isPressed: (e) => u().includes(e),
+		toggleItem: (n, r, a) => {
+			let o = u(), s = o.includes(n), c;
+			c = t.multiple ? s ? o.filter((e) => e !== n) : [...o, n] : s ? [] : [n];
+			let d = e(r, a);
+			t.onValueChange?.(c, d), !d.isCanceled && (l() || i(c));
+		},
+		setHighlightedValue: o,
+		registerItem: (e) => (c((t) => [...t, e]), () => c((t) => t.filter((t) => t !== e))),
+		getItems: () => s(),
+		isFirstEnabled: (e) => s().find((e) => !e.disabled())?.value === e,
+		isUsable: (e) => s().some((t) => t.value === e && !t.disabled())
+	};
+}
+function o(e) {
+	let t = r(i);
+	if (!t) throw Error(`<${e}> 必须渲染在 <ToggleGroup> 内部`);
+	return t;
+}
+//#endregion
+export { i as ToggleGroupContext, a as createToggleGroupState, o as useToggleGroupContext };
+
+//# sourceMappingURL=ToggleGroup.context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.context.js","names":[],"sources":["../../../../src/components/toggle-group/ToggleGroup/ToggleGroup.context.ts"],"sourcesContent":["import { createContext, createSignal, useContext } from \"solid-js\";\nimport { createChangeEventDetails } from \"./create-change-event-details\";\nimport type {\n  ToggleGroupChangeEventDetails,\n  ToggleGroupContextValue,\n  ToggleGroupItemEntry,\n  ToggleGroupOrientation,\n  ToggleGroupSize,\n  ToggleGroupValue,\n  ToggleGroupVariant,\n} from \"./ToggleGroup.types\";\n\nconst ToggleGroupContext = createContext<ToggleGroupContextValue>();\n\n/** createToggleGroupState 的输入:与 ToggleGroupProps 的运行时字段一致 */\nexport interface ToggleGroupStateProps<\n  TValue extends ToggleGroupValue = ToggleGroupValue,\n> {\n  value?: readonly TValue[];\n  defaultValue?: readonly TValue[];\n  onValueChange?: (\n    value: TValue[],\n    eventDetails: ToggleGroupChangeEventDetails,\n  ) => void;\n  multiple: boolean;\n  disabled: boolean;\n  orientation: ToggleGroupOrientation;\n  loopFocus: boolean;\n  dir?: \"ltr\" | \"rtl\" | \"auto\";\n  spacing: number;\n  variant?: ToggleGroupVariant;\n  size?: ToggleGroupSize;\n}\n\n/**\n * ToggleGroup 的唯一状态源:选中值(受控/非受控)、焦点高亮、item 注册表。\n *\n * 返回的 context 值里所有字段都是 accessor,因此传入的 `props` 可以是\n * splitProps/mergeProps 得到的响应式代理,读取始终是最新值。\n * 组件根只负责输出 DOM 与 data-* 样式钩子,状态与交互算法收敛在这里。\n *\n * 值类型由泛型参数决定;内部只用 `===` / `includes` 做同一性比较,\n * 因此 string 与 number 都能正常工作。\n */\nexport function createToggleGroupState<\n  TValue extends ToggleGroupValue = ToggleGroupValue,\n>(props: ToggleGroupStateProps<TValue>): ToggleGroupContextValue<TValue> {\n  const [internalValue, setInternalValue] = createSignal<TValue[]>([\n    ...(props.defaultValue ?? []),\n  ]);\n  const [highlightedValue, setHighlightedValue] = createSignal<\n    TValue | undefined\n  >();\n  const [itemOrder, setItemOrder] = createSignal<\n    ToggleGroupItemEntry<TValue>[]\n  >([]);\n\n  const isControlled = () => props.value !== undefined;\n  // 受控优先:props.value 存在时读外部值,否则读内部状态\n  const value = (): readonly TValue[] =>\n    isControlled() ? (props.value as readonly TValue[]) : internalValue();\n\n  const isPressed = (v: TValue) => value().includes(v);\n\n  const toggleItem = (\n    itemValue: TValue,\n    event: Event,\n    trigger?: Element,\n  ): void => {\n    const current = value();\n    const pressed = current.includes(itemValue);\n\n    // 对齐 base-ui:单选时再次点击已按下项会取消选中(next = [])\n    let next: TValue[];\n    if (props.multiple) {\n      next = pressed\n        ? current.filter((v) => v !== itemValue)\n        : [...current, itemValue];\n    } else {\n      next = pressed ? [] : [itemValue];\n    }\n\n    // 先通知外部:onValueChange 中 cancel() 可阻止组件提交本次变更\n    const details = createChangeEventDetails(event, trigger);\n    props.onValueChange?.(next, details);\n    if (details.isCanceled) return;\n\n    // 受控模式只通知外部,不改内部状态\n    if (!isControlled()) setInternalValue(next);\n  };\n\n  const registerItem = (entry: ToggleGroupItemEntry<TValue>) => {\n    setItemOrder((prev) => [...prev, entry]);\n    return () => setItemOrder((prev) => prev.filter((item) => item !== entry));\n  };\n\n  const isFirstEnabled = (v: TValue) =>\n    itemOrder().find((item) => !item.disabled())?.value === v;\n\n  const isUsable = (v: TValue) =>\n    itemOrder().some((item) => item.value === v && !item.disabled());\n\n  return {\n    value,\n    multiple: () => props.multiple,\n    disabled: () => props.disabled,\n    orientation: () => props.orientation,\n    loopFocus: () => props.loopFocus,\n    dir: () => props.dir,\n    spacing: () => props.spacing,\n    variant: () => props.variant,\n    size: () => props.size,\n    highlightedValue,\n    isPressed,\n    toggleItem,\n    setHighlightedValue,\n    registerItem,\n    getItems: () => itemOrder(),\n    isFirstEnabled,\n    isUsable,\n  };\n}\n\n/**\n * 读取 ToggleGroup 的 context。\n *\n * 泛型参数是**调用方标注**:组件本身无法从子节点推导所属 group 的值类型,\n * 自定义 item 时请显式传入与 ToggleGroup 一致的类型,例如\n * `useToggleGroupContext<\"bold\" | \"italic\">(\"MyToggle\")`。\n */\nexport function useToggleGroupContext<\n  TValue extends ToggleGroupValue = ToggleGroupValue,\n>(component: string): ToggleGroupContextValue<TValue> {\n  const ctx = useContext(ToggleGroupContext);\n  if (!ctx) {\n    throw new Error(`<${component}> 必须渲染在 <ToggleGroup> 内部`);\n  }\n  return ctx as ToggleGroupContextValue<TValue>;\n}\n\nexport { ToggleGroupContext };\n"],"mappings":";;;AAYA,IAAM,IAAqB,EAAuC;AAgClE,SAAgB,EAEd,GAAuE;CACvE,IAAM,CAAC,GAAe,KAAoB,EAAuB,CAC/D,GAAI,EAAM,gBAAgB,CAAC,CAC7B,CAAC,GACK,CAAC,GAAkB,KAAuB,EAE9C,GACI,CAAC,GAAW,KAAgB,EAEhC,CAAC,CAAC,GAEE,UAAqB,EAAM,UAAU,KAAA,GAErC,UACJ,EAAa,IAAK,EAAM,QAA8B,EAAc;CA0CtE,OAAO;EACL;EACA,gBAAgB,EAAM;EACtB,gBAAgB,EAAM;EACtB,mBAAmB,EAAM;EACzB,iBAAiB,EAAM;EACvB,WAAW,EAAM;EACjB,eAAe,EAAM;EACrB,eAAe,EAAM;EACrB,YAAY,EAAM;EAClB;EACA,YAnDiB,MAAc,EAAM,CAAC,CAAC,SAAS,CAAC;EAoDjD,aAjDA,GACA,GACA,MACS;GACT,IAAM,IAAU,EAAM,GAChB,IAAU,EAAQ,SAAS,CAAS,GAGtC;GACJ,AAKE,IALE,EAAM,WACD,IACH,EAAQ,QAAQ,MAAM,MAAM,CAAS,IACrC,CAAC,GAAG,GAAS,CAAS,IAEnB,IAAU,CAAC,IAAI,CAAC,CAAS;GAIlC,IAAM,IAAU,EAAyB,GAAO,CAAO;GACvD,EAAM,gBAAgB,GAAM,CAAO,GAC/B,GAAQ,eAGP,EAAa,KAAG,EAAiB,CAAI;EAC5C;EA0BE;EACA,eAzBoB,OACpB,GAAc,MAAS,CAAC,GAAG,GAAM,CAAK,CAAC,SAC1B,GAAc,MAAS,EAAK,QAAQ,MAAS,MAAS,CAAK,CAAC;EAwBzE,gBAAgB,EAAU;EAC1B,iBAtBsB,MACtB,EAAU,CAAC,CAAC,MAAM,MAAS,CAAC,EAAK,SAAS,CAAC,CAAC,EAAE,UAAU;EAsBxD,WApBgB,MAChB,EAAU,CAAC,CAAC,MAAM,MAAS,EAAK,UAAU,KAAK,CAAC,EAAK,SAAS,CAAC;CAoBjE;AACF;AASA,SAAgB,EAEd,GAAoD;CACpD,IAAM,IAAM,EAAW,CAAkB;CACzC,IAAI,CAAC,GACH,MAAU,MAAM,IAAI,EAAU,yBAAyB;CAEzD,OAAO;AACT"}

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

@@ -0,0 +1,18 @@
+import { JSX } from 'solid-js';
+import { ToggleGroupProps, ToggleGroupValue } from './ToggleGroup.types';
+/**
+ * ToggleGroup 根组件:渲染 `<div role="group">`,输出样式与语义钩子
+ * (`data-orientation` / `data-vertical` / `data-horizontal` / `data-multiple`
+ * / `data-disabled` / `data-spacing` / `data-variant` / `data-size`),
+ * 并挂载 roving focus 键盘导航。
+ *
+ * @example
+ * ```tsx
+ * <ToggleGroup variant="outline" defaultValue={["bold"]}>
+ *   <ToggleGroupItem value="bold" aria-label="Toggle bold">
+ *     <Bold />
+ *   </ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ */
+export declare function ToggleGroup<TValue extends ToggleGroupValue = ToggleGroupValue>(props: ToggleGroupProps<TValue>): JSX.Element;

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

@@ -0,0 +1,94 @@
+import { clsx as e } from "../../../utils/clsx.js";
+import { callEventHandler as t } from "../call-event-handler.js";
+import { ToggleGroupContext as n, createToggleGroupState as r } from "./ToggleGroup.context.js";
+import { toggleGroupVariants as i } from "./ToggleGroup.styles.js";
+import { useToggleGroupKeyboard as a } from "./useToggleGroupKeyboard.js";
+import { createComponent as o, delegateEvents as s, insert as c, mergeProps as l, spread as u, template as d } from "solid-js/web";
+import { mergeProps as f, splitProps as p } from "solid-js";
+//#region src/components/toggle-group/ToggleGroup/ToggleGroup.tsx
+var m = /*#__PURE__*/ d("<div role=group data-slot=toggle-group>");
+function h(s) {
+	let d = f({
+		multiple: !1,
+		disabled: !1,
+		orientation: "horizontal",
+		loopFocus: !0,
+		spacing: 2
+	}, s), [h, g] = p(d, [
+		"value",
+		"defaultValue",
+		"onValueChange",
+		"multiple",
+		"disabled",
+		"orientation",
+		"loopFocus",
+		"spacing",
+		"variant",
+		"size",
+		"class",
+		"classList",
+		"style",
+		"dir",
+		"onKeyDown",
+		"children"
+	]), _ = r(h), { handleKeyDown: v } = a(_), y = () => h.orientation === "vertical";
+	return (() => {
+		var r = m();
+		return r.$$keydown = (e) => {
+			t(h.onKeyDown, e), e.defaultPrevented || v(e);
+		}, u(r, l({
+			get "data-variant"() {
+				return h.variant;
+			},
+			get "data-size"() {
+				return h.size;
+			},
+			get "data-spacing"() {
+				return h.spacing;
+			},
+			get "data-orientation"() {
+				return h.orientation;
+			},
+			get "data-vertical"() {
+				return y() ? "" : null;
+			},
+			get "data-horizontal"() {
+				return y() ? null : "";
+			},
+			get "data-multiple"() {
+				return h.multiple ? "" : null;
+			},
+			get "data-disabled"() {
+				return h.disabled ? "" : null;
+			},
+			get "aria-disabled"() {
+				return h.disabled ? "true" : void 0;
+			},
+			get dir() {
+				return h.dir;
+			},
+			get style() {
+				return {
+					"--gap": h.spacing,
+					...h.style
+				};
+			},
+			get class() {
+				return e(i(), h.class);
+			},
+			get classList() {
+				return h.classList;
+			}
+		}, g), !1, !0), c(r, o(n.Provider, {
+			value: _,
+			get children() {
+				return h.children;
+			}
+		})), r;
+	})();
+}
+s(["keydown"]);
+//#endregion
+export { h as ToggleGroup };
+
+//# sourceMappingURL=ToggleGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.js","names":["mergeProps","splitProps","JSX","clsx","callEventHandler","createToggleGroupState","ToggleGroupContext","toggleGroupVariants","ToggleGroupProps","ToggleGroupValue","useToggleGroupKeyboard","ToggleGroup","props","TValue","Element","merged","multiple","disabled","orientation","const","loopFocus","spacing","local","rest","ctx","handleKeyDown","isVertical","_el$","_tmpl$","$$keydown","e","onKeyDown","defaultPrevented","_$spread","_$mergeProps","data-variant","variant","data-size","size","data-spacing","data-orientation","data-vertical","data-horizontal","data-multiple","data-disabled","aria-disabled","undefined","dir","style","CSSProperties","class","classList","_$insert","_$createComponent","Provider","value","children","_$delegateEvents"],"sources":["../../../../src/components/toggle-group/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import { mergeProps, splitProps, type JSX } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { callEventHandler } from \"../call-event-handler\";\nimport {\n  createToggleGroupState,\n  ToggleGroupContext,\n} from \"./ToggleGroup.context\";\nimport { toggleGroupVariants } from \"./ToggleGroup.styles\";\nimport type { ToggleGroupProps, ToggleGroupValue } from \"./ToggleGroup.types\";\nimport { useToggleGroupKeyboard } from \"./useToggleGroupKeyboard\";\n\n/**\n * ToggleGroup 根组件:渲染 `<div role=\"group\">`,输出样式与语义钩子\n * (`data-orientation` / `data-vertical` / `data-horizontal` / `data-multiple`\n * / `data-disabled` / `data-spacing` / `data-variant` / `data-size`),\n * 并挂载 roving focus 键盘导航。\n *\n * @example\n * ```tsx\n * <ToggleGroup variant=\"outline\" defaultValue={[\"bold\"]}>\n *   <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n *     <Bold />\n *   </ToggleGroupItem>\n * </ToggleGroup>\n * ```\n */\nexport function ToggleGroup<TValue extends ToggleGroupValue = ToggleGroupValue>(\n  props: ToggleGroupProps<TValue>,\n): JSX.Element {\n  const merged = mergeProps(\n    {\n      multiple: false,\n      disabled: false,\n      orientation: \"horizontal\" as const,\n      loopFocus: true,\n      spacing: 2,\n    },\n    props,\n  );\n\n  const [local, rest] = splitProps(merged, [\n    \"value\",\n    \"defaultValue\",\n    \"onValueChange\",\n    \"multiple\",\n    \"disabled\",\n    \"orientation\",\n    \"loopFocus\",\n    \"spacing\",\n    \"variant\",\n    \"size\",\n    \"class\",\n    \"classList\",\n    \"style\",\n    \"dir\",\n    \"onKeyDown\",\n    \"children\",\n  ]);\n\n  const ctx = createToggleGroupState<TValue>(local);\n  const { handleKeyDown } = useToggleGroupKeyboard(ctx);\n  const isVertical = () => local.orientation === \"vertical\";\n\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"toggle-group\"\n      data-variant={local.variant}\n      data-size={local.size}\n      data-spacing={local.spacing}\n      data-orientation={local.orientation}\n      // 现有样式依赖 data-vertical / data-horizontal(与 tabs 根保持一致)\n      data-vertical={isVertical() ? \"\" : null}\n      data-horizontal={isVertical() ? null : \"\"}\n      data-multiple={local.multiple ? \"\" : null}\n      data-disabled={local.disabled ? \"\" : null}\n      aria-disabled={local.disabled ? \"true\" : undefined}\n      dir={local.dir}\n      // --gap 作为 spacing 的样式入口,用户 style 可覆盖\n      style={{ \"--gap\": local.spacing, ...local.style } as JSX.CSSProperties}\n      class={clsx(toggleGroupVariants(), local.class)}\n      classList={local.classList}\n      onKeyDown={(e) => {\n        callEventHandler(local.onKeyDown, e);\n        if (!e.defaultPrevented) handleKeyDown(e);\n      }}\n      {...rest}\n    >\n      <ToggleGroupContext.Provider value={ctx}>\n        {local.children}\n      </ToggleGroupContext.Provider>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AA0BA,SAAgBW,EACdC,GACa;CACb,IAAMG,IAASf,EACb;EACEgB,UAAU;EACVC,UAAU;EACVC,aAAa;EACbE,WAAW;EACXC,SAAS;CACX,GACAT,CACF,GAEM,CAACU,GAAOC,KAAQtB,EAAWc,GAAQ;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX,GAEKS,IAAMnB,EAA+BiB,CAAK,GAC1C,EAAEG,qBAAkBf,EAAuBc,CAAG,GAC9CE,UAAmBJ,EAAMJ,gBAAgB;CAE/C,cAAA;EAAA,IAAAS,IAAAC,EAAA;EA0BqB,OA1BrBD,EAAAE,aAmBgBC,MAAM;GAEhB,AADA1B,EAAiBkB,EAAMS,WAAWD,CAAC,GAC9BA,EAAEE,oBAAkBP,EAAcK,CAAC;EAC1C,GAACG,EAAAN,GAAAO,EAAA;GAAA,IAAA,iBAAA;IAAA,OAlBaZ,EAAMc;GAAO;GAAA,IAAA,cAAA;IAAA,OAChBd,EAAMgB;GAAI;GAAA,IAAA,iBAAA;IAAA,OACPhB,EAAMD;GAAO;GAAA,IAAA,qBAAA;IAAA,OACTC,EAAMJ;GAAW;GAAA,IAAA,kBAAA;IAAA,OAEpBQ,EAAW,IAAI,KAAK;GAAI;GAAA,IAAA,oBAAA;IAAA,OACtBA,EAAW,IAAI,OAAO;GAAE;GAAA,IAAA,kBAAA;IAAA,OAC1BJ,EAAMN,WAAW,KAAK;GAAI;GAAA,IAAA,kBAAA;IAAA,OAC1BM,EAAML,WAAW,KAAK;GAAI;GAAA,IAAA,kBAAA;IAAA,OAC1BK,EAAML,WAAW,SAAS6B,KAAAA;GAAS;GAAA,IAClDC,MAAG;IAAA,OAAEzB,EAAMyB;GAAG;GAAA,IAEdC,QAAK;IAAA,OAAE;KAAE,SAAS1B,EAAMD;KAAS,GAAGC,EAAM0B;IAAM;GAAsB;GAAA,IAAA,QAAA;IAAA,OAC/D7C,EAAKI,EAAoB,GAAGe,EAAM4B,KAAK;GAAC;GAAA,IAC/CC,YAAS;IAAA,OAAE7B,EAAM6B;GAAS;EAAA,GAKtB5B,CAAI,GAAA,IAAA,EAAA,GAAA6B,EAAAzB,GAAA0B,EAEP/C,EAAmBgD,UAAQ;GAACC,OAAO/B;GAAG,IAAAgC,WAAA;IAAA,OACpClC,EAAMkC;GAAQ;EAAA,CAAA,CAAA,GAAA7B;CAAA,EAAA,CAAA;AAIvB;AAAC8B,EAAA,CAAA,SAAA,CAAA"}

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

@@ -0,0 +1,8 @@
+/**
+ * ToggleGroup 根容器样式。
+ *
+ * 根元素同时输出 `data-vertical` / `data-horizontal`(见 ToggleGroup.tsx),
+ * 使 `data-vertical:*`、`group-data-vertical/toggle-group:*` 这类选择器生效 ——
+ * item 的“拼接态”样式依赖后两者。
+ */
+export declare const toggleGroupVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

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

@@ -0,0 +1,7 @@
+import { cva as e } from "class-variance-authority";
+//#region src/components/toggle-group/ToggleGroup/ToggleGroup.styles.ts
+var t = e("group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch");
+//#endregion
+export { t as toggleGroupVariants };
+
+//# sourceMappingURL=ToggleGroup.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.styles.js","names":[],"sources":["../../../../src/components/toggle-group/ToggleGroup/ToggleGroup.styles.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\n/**\n * ToggleGroup 根容器样式。\n *\n * 根元素同时输出 `data-vertical` / `data-horizontal`(见 ToggleGroup.tsx),\n * 使 `data-vertical:*`、`group-data-vertical/toggle-group:*` 这类选择器生效 ——\n * item 的“拼接态”样式依赖后两者。\n */\nexport const toggleGroupVariants = cva(\n  \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch\",\n);\n"],"mappings":";;AASA,IAAa,IAAsB,EACjC,mMACF"}

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

@@ -0,0 +1,104 @@
+import { VariantProps } from 'class-variance-authority';
+import { Accessor } from 'solid-js';
+import { toggleVariants } from '../../toggle/Toggle/Toggle.styles';
+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;
+}
+interface BaseToggleGroupProps<TValue extends ToggleGroupValue> extends BaseProps {
+    /** 受控选中值(数组);不传则内部自管理 */
+    value?: readonly TValue[];
+    /** 非受控模式下的初始选中值 */
+    defaultValue?: readonly TValue[];
+    /** 选中值变化回调(受控与非受控都会触发) */
+    onValueChange?: (value: TValue[], eventDetails: ToggleGroupChangeEventDetails) => void;
+    /** 是否允许同时选中多个,默认 false;单选时再次点击会取消选中(对齐 base-ui) */
+    multiple?: boolean;
+    /** 整组禁用,item 会继承该状态 */
+    disabled?: boolean;
+    /** 布局方向,默认 "horizontal";同时决定方向键映射与排列方向 */
+    orientation?: ToggleGroupOrientation;
+    /** 方向键到达边界时是否循环回另一端,默认 true */
+    loopFocus?: boolean;
+    /**
+     * item 之间的间距,通过根元素上的 `--gap` 变量实现,默认 2(对齐 shadcn)。
+     * 传 0 时相邻 item 拼接为一个整体(仅首尾保留圆角与边框)。
+     */
+    spacing?: number;
+    /** 组级 variant,item 未单独指定时继承 */
+    variant?: ToggleGroupVariant;
+    /** 组级 size,item 未单独指定时继承 */
+    size?: ToggleGroupSize;
+}
+/**
+ * 值类型由泛型参数决定:
+ * - 不传时是宽类型 `ToggleGroupValue`(string | number)
+ * - `defaultValue` / `value` / `onValueChange` 中任意一处给出具体类型即可推导,
+ *   例如 `defaultValue={[1]}` 会推导出 `number[]`
+ * - 也可显式指定:`<ToggleGroup<"bold" | "italic"> />`
+ */
+export type ToggleGroupProps<TValue extends ToggleGroupValue = ToggleGroupValue> = PolymorphicProps<"div", BaseToggleGroupProps<TValue>, false>;
+/** 已注册的 item,供 roving focus 与键盘导航使用 */
+export interface ToggleGroupItemEntry<TValue extends ToggleGroupValue = ToggleGroupValue> {
+    value: TValue;
+    element: HTMLElement;
+    /** accessor,支持运行时 disabled 翻转 */
+    disabled: () => boolean;
+}
+export interface ToggleGroupContextValue<TValue extends ToggleGroupValue = ToggleGroupValue> {
+    /** 当前选中值(受控优先,否则内部状态) */
+    value: Accessor<readonly TValue[]>;
+    multiple: Accessor<boolean>;
+    disabled: Accessor<boolean>;
+    orientation: Accessor<ToggleGroupOrientation>;
+    loopFocus: Accessor<boolean>;
+    dir: Accessor<"ltr" | "rtl" | "auto" | undefined>;
+    spacing: Accessor<number>;
+    /** 组级 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(value, details) */
+    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

@@ -0,0 +1,3 @@
+export { ToggleGroup } from './ToggleGroup';
+export { ToggleGroupContext, useToggleGroupContext, } from './ToggleGroup.context';
+export type { ToggleGroupProps, 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

@@ -0,0 +1,11 @@
+import { JSX } from 'solid-js';
+import { ToggleGroupValue } from '../ToggleGroup/ToggleGroup.types';
+import { ToggleGroupItemProps } from './ToggleGroupItem.types';
+/**
+ * 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

@@ -0,0 +1,88 @@
+import { clsx as e } from "../../../utils/clsx.js";
+import { toggleVariants as t } from "../../toggle/Toggle/Toggle.styles.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 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",
+		"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 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 _.type;
+			},
+			get disabled() {
+				return C();
+			},
+			get tabindex() {
+				return w();
+			},
+			get "data-variant"() {
+				return b();
+			},
+			get "data-size"() {
+				return x();
+			},
+			get "data-spacing"() {
+				return l.spacing();
+			},
+			get "data-pressed"() {
+				return S() ? "" : null;
+			},
+			get "data-disabled"() {
+				return C() ? "" : null;
+			},
+			get "data-state"() {
+				return S() ? "on" : "off";
+			},
+			get "aria-pressed"() {
+				return S();
+			},
+			get class() {
+				return e(t({
+					variant: b(),
+					size: x()
+				}), i(), _.class);
+			},
+			get classList() {
+				return _.classList;
+			}
+		}, v), !1, !0), o(r, () => _.children), r;
+	})();
+}
+a(["click"]);
+//#endregion
+export { g as ToggleGroupItem };
+
+//# sourceMappingURL=ToggleGroupItem.js.map