@neut/ui 0.0.13 → 0.0.14

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,20 @@
 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';
+type BaseToggleGroupItemProps<TValue extends ToggleGroupValue> = VariantProps<typeof toggleVariants> & HTMLAttributes<"button"> & {
+    /** 当前 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, ToggleGroupValue, ToggleGroupContextValue, ToggleGroupItemEntry, ToggleGroupOrientation, ToggleGroupVariant, ToggleGroupSize, ToggleGroupChangeEventDetails, ToggleGroupChangeEventReason, } from './ToggleGroup';
 export { ToggleGroupItem } from './ToggleGroupItem';
 export type { ToggleGroupItemProps } from './ToggleGroupItem';