@versini/ui-togglegroup 4.0.5 → 4.0.6

package/README.md

@@ -1,3 +1,44 @@
 # @versini/ui-togglegroup
 
-A simple toggle group component for React.
+[![npm version](https://img.shields.io/npm/v/@versini/ui-togglegroup?style=flat-square)](https://www.npmjs.com/package/@versini/ui-togglegroup)
+
+> An accessible React toggle button group component built with TypeScript and TailwindCSS.
+
+The ToggleGroup component provides grouped toggle buttons for single or multiple selections with proper accessibility and keyboard navigation.
+
+
+## Table of Contents
+
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+
+## Installation
+
+```bash
+npm install @versini/ui-togglegroup
+```
+
+> **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [root README](../../README.md#tailwindcss-setup) for complete setup instructions.
+
+## Usage
+
+```tsx
+import { ToggleGroup } from "@versini/ui-togglegroup";
+
+function App() {
+  const [selected, setSelected] = useState("left");
+  
+  return (
+    <ToggleGroup
+      value={selected}
+      onChange={setSelected}
+      items={[
+        { value: "left", label: "Left" },
+        { value: "center", label: "Center" },
+        { value: "right", label: "Right" }
+      ]}
+    />
+  );
+}
+```

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -1,35 +1,33 @@
 import { jsx as f } from "react/jsx-runtime";
-import * as l from "react";
-import C, { useContext as ge } from "react";
+import * as u from "react";
+import v, { useContext as ge } from "react";
 import w from "clsx";
 const me = "av-togglegroup", ve = "av-togglegroup-item-wrapper", Ce = "av-togglegroup-item";
 function U(e, t = []) {
   let o = [];
-  function r(s, c) {
-    const u = l.createContext(c), i = o.length;
-    o = [...o, c];
+  function r(s, l) {
+    const c = u.createContext(l), i = o.length;
+    o = [...o, l];
     const g = (d) => {
-      var b;
-      const { scope: m, children: S, ...T } = d, h = ((b = m == null ? void 0 : m[e]) == null ? void 0 : b[i]) || u, p = l.useMemo(() => T, Object.values(T));
-      return /* @__PURE__ */ f(h.Provider, { value: p, children: S });
+      const { scope: I, children: y, ...S } = d, h = I?.[e]?.[i] || c, p = u.useMemo(() => S, Object.values(S));
+      return /* @__PURE__ */ f(h.Provider, { value: p, children: y });
     };
     g.displayName = s + "Provider";
-    function a(d, m) {
-      var h;
-      const S = ((h = m == null ? void 0 : m[e]) == null ? void 0 : h[i]) || u, T = l.useContext(S);
-      if (T) return T;
-      if (c !== void 0) return c;
+    function a(d, I) {
+      const y = I?.[e]?.[i] || c, S = u.useContext(y);
+      if (S) return S;
+      if (l !== void 0) return l;
       throw new Error(`\`${d}\` must be used within \`${s}\``);
     }
     return [g, a];
   }
   const n = () => {
-    const s = o.map((c) => l.createContext(c));
-    return function(u) {
-      const i = (u == null ? void 0 : u[e]) || s;
-      return l.useMemo(
-        () => ({ [`__scope${e}`]: { ...u, [e]: i } }),
-        [u, i]
+    const s = o.map((l) => u.createContext(l));
+    return function(c) {
+      const i = c?.[e] || s;
+      return u.useMemo(
+        () => ({ [`__scope${e}`]: { ...c, [e]: i } }),
+        [c, i]
       );
     };
   };
@@ -44,11 +42,11 @@ function be(...e) {
       scopeName: n.scopeName
     }));
     return function(s) {
-      const c = r.reduce((u, { useScope: i, scopeName: g }) => {
+      const l = r.reduce((c, { useScope: i, scopeName: g }) => {
         const d = i(s)[`__scope${g}`];
-        return { ...u, ...d };
+        return { ...c, ...d };
       }, {});
-      return l.useMemo(() => ({ [`__scope${t.scopeName}`]: c }), [c]);
+      return u.useMemo(() => ({ [`__scope${t.scopeName}`]: l }), [l]);
     };
   };
   return o.scopeName = t.scopeName, o;
@@ -58,7 +56,7 @@ function W(e, t) {
     return e(t);
   e != null && (e.current = t);
 }
-function Y(...e) {
+function H(...e) {
   return (t) => {
     let o = !1;
     const r = e.map((n) => {
@@ -75,53 +73,52 @@ function Y(...e) {
   };
 }
 function L(...e) {
-  return l.useCallback(Y(...e), e);
+  return u.useCallback(H(...e), e);
 }
 // @__NO_SIDE_EFFECTS__
 function $(e) {
-  const t = /* @__PURE__ */ he(e), o = l.forwardRef((r, n) => {
-    const { children: s, ...c } = r, u = l.Children.toArray(s), i = u.find(ye);
+  const t = /* @__PURE__ */ he(e), o = u.forwardRef((r, n) => {
+    const { children: s, ...l } = r, c = u.Children.toArray(s), i = c.find(Re);
     if (i) {
-      const g = i.props.children, a = u.map((d) => d === i ? l.Children.count(g) > 1 ? l.Children.only(null) : l.isValidElement(g) ? g.props.children : null : d);
-      return /* @__PURE__ */ f(t, { ...c, ref: n, children: l.isValidElement(g) ? l.cloneElement(g, void 0, a) : null });
+      const g = i.props.children, a = c.map((d) => d === i ? u.Children.count(g) > 1 ? u.Children.only(null) : u.isValidElement(g) ? g.props.children : null : d);
+      return /* @__PURE__ */ f(t, { ...l, ref: n, children: u.isValidElement(g) ? u.cloneElement(g, void 0, a) : null });
     }
-    return /* @__PURE__ */ f(t, { ...c, ref: n, children: s });
+    return /* @__PURE__ */ f(t, { ...l, ref: n, children: s });
   });
   return o.displayName = `${e}.Slot`, o;
 }
 // @__NO_SIDE_EFFECTS__
 function he(e) {
-  const t = l.forwardRef((o, r) => {
+  const t = u.forwardRef((o, r) => {
     const { children: n, ...s } = o;
-    if (l.isValidElement(n)) {
-      const c = Te(n), u = Se(s, n.props);
-      return n.type !== l.Fragment && (u.ref = r ? Y(r, c) : c), l.cloneElement(n, u);
+    if (u.isValidElement(n)) {
+      const l = Se(n), c = ye(s, n.props);
+      return n.type !== u.Fragment && (c.ref = r ? H(r, l) : l), u.cloneElement(n, c);
     }
-    return l.Children.count(n) > 1 ? l.Children.only(null) : null;
+    return u.Children.count(n) > 1 ? u.Children.only(null) : null;
   });
   return t.displayName = `${e}.SlotClone`, t;
 }
 var Ie = Symbol("radix.slottable");
-function ye(e) {
-  return l.isValidElement(e) && typeof e.type == "function" && "__radixId" in e.type && e.type.__radixId === Ie;
+function Re(e) {
+  return u.isValidElement(e) && typeof e.type == "function" && "__radixId" in e.type && e.type.__radixId === Ie;
 }
-function Se(e, t) {
+function ye(e, t) {
   const o = { ...t };
   for (const r in t) {
     const n = e[r], s = t[r];
-    /^on[A-Z]/.test(r) ? n && s ? o[r] = (...u) => {
-      const i = s(...u);
-      return n(...u), i;
+    /^on[A-Z]/.test(r) ? n && s ? o[r] = (...c) => {
+      const i = s(...c);
+      return n(...c), i;
     } : n && (o[r] = n) : r === "style" ? o[r] = { ...n, ...s } : r === "className" && (o[r] = [n, s].filter(Boolean).join(" "));
   }
   return { ...e, ...o };
 }
-function Te(e) {
-  var r, n;
-  let t = (r = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : r.get, o = t && "isReactWarning" in t && t.isReactWarning;
-  return o ? e.ref : (t = (n = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : n.get, o = t && "isReactWarning" in t && t.isReactWarning, o ? e.props.ref : e.props.ref || e.ref);
+function Se(e) {
+  let t = Object.getOwnPropertyDescriptor(e.props, "ref")?.get, o = t && "isReactWarning" in t && t.isReactWarning;
+  return o ? e.ref : (t = Object.getOwnPropertyDescriptor(e, "ref")?.get, o = t && "isReactWarning" in t && t.isReactWarning, o ? e.props.ref : e.props.ref || e.ref);
 }
-var Re = [
+var Te = [
   "a",
   "button",
   "div",
@@ -139,78 +136,75 @@ var Re = [
   "span",
   "svg",
   "ul"
-], A = Re.reduce((e, t) => {
-  const o = /* @__PURE__ */ $(`Primitive.${t}`), r = l.forwardRef((n, s) => {
-    const { asChild: c, ...u } = n, i = c ? o : t;
-    return typeof window < "u" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ f(i, { ...u, ref: s });
+], A = Te.reduce((e, t) => {
+  const o = /* @__PURE__ */ $(`Primitive.${t}`), r = u.forwardRef((n, s) => {
+    const { asChild: l, ...c } = n, i = l ? o : t;
+    return typeof window < "u" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ f(i, { ...c, ref: s });
   });
   return r.displayName = `Primitive.${t}`, { ...e, [t]: r };
 }, {});
-function E(e, t, { checkForDefaultPrevented: o = !0 } = {}) {
+function x(e, t, { checkForDefaultPrevented: o = !0 } = {}) {
   return function(n) {
-    if (e == null || e(n), o === !1 || !n.defaultPrevented)
-      return t == null ? void 0 : t(n);
+    if (e?.(n), o === !1 || !n.defaultPrevented)
+      return t?.(n);
   };
 }
-function Pe(e) {
+function Ee(e) {
   const t = e + "CollectionProvider", [o, r] = U(t), [n, s] = o(
     t,
     { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() }
-  ), c = (h) => {
-    const { scope: p, children: b } = h, R = C.useRef(null), v = C.useRef(/* @__PURE__ */ new Map()).current;
-    return /* @__PURE__ */ f(n, { scope: p, itemMap: v, collectionRef: R, children: b });
+  ), l = (h) => {
+    const { scope: p, children: b } = h, T = v.useRef(null), m = v.useRef(/* @__PURE__ */ new Map()).current;
+    return /* @__PURE__ */ f(n, { scope: p, itemMap: m, collectionRef: T, children: b });
   };
-  c.displayName = t;
-  const u = e + "CollectionSlot", i = /* @__PURE__ */ $(u), g = C.forwardRef(
+  l.displayName = t;
+  const c = e + "CollectionSlot", i = /* @__PURE__ */ $(c), g = v.forwardRef(
     (h, p) => {
-      const { scope: b, children: R } = h, v = s(u, b), I = L(p, v.collectionRef);
-      return /* @__PURE__ */ f(i, { ref: I, children: R });
+      const { scope: b, children: T } = h, m = s(c, b), C = L(p, m.collectionRef);
+      return /* @__PURE__ */ f(i, { ref: C, children: T });
     }
   );
-  g.displayName = u;
-  const a = e + "CollectionItemSlot", d = "data-radix-collection-item", m = /* @__PURE__ */ $(a), S = C.forwardRef(
+  g.displayName = c;
+  const a = e + "CollectionItemSlot", d = "data-radix-collection-item", I = /* @__PURE__ */ $(a), y = v.forwardRef(
     (h, p) => {
-      const { scope: b, children: R, ...v } = h, I = C.useRef(null), _ = L(p, I), G = s(a, b);
-      return C.useEffect(() => (G.itemMap.set(I, { ref: I, ...v }), () => void G.itemMap.delete(I))), /* @__PURE__ */ f(m, { [d]: "", ref: _, children: R });
+      const { scope: b, children: T, ...m } = h, C = v.useRef(null), _ = L(p, C), G = s(a, b);
+      return v.useEffect(() => (G.itemMap.set(C, { ref: C, ...m }), () => void G.itemMap.delete(C))), /* @__PURE__ */ f(I, { [d]: "", ref: _, children: T });
     }
   );
-  S.displayName = a;
-  function T(h) {
+  y.displayName = a;
+  function S(h) {
     const p = s(e + "CollectionConsumer", h);
-    return C.useCallback(() => {
-      const R = p.collectionRef.current;
-      if (!R) return [];
-      const v = Array.from(R.querySelectorAll(`[${d}]`));
+    return v.useCallback(() => {
+      const T = p.collectionRef.current;
+      if (!T) return [];
+      const m = Array.from(T.querySelectorAll(`[${d}]`));
       return Array.from(p.itemMap.values()).sort(
-        (G, k) => v.indexOf(G.ref.current) - v.indexOf(k.ref.current)
+        (G, k) => m.indexOf(G.ref.current) - m.indexOf(k.ref.current)
       );
     }, [p.collectionRef, p.itemMap]);
   }
   return [
-    { Provider: c, Slot: g, ItemSlot: S },
-    T,
+    { Provider: l, Slot: g, ItemSlot: y },
+    S,
     r
   ];
 }
-var z = globalThis != null && globalThis.document ? l.useLayoutEffect : () => {
-}, xe = l[" useId ".trim().toString()] || (() => {
-}), Ee = 0;
+var Y = globalThis?.document ? u.useLayoutEffect : () => {
+}, Pe = u[" useId ".trim().toString()] || (() => {
+}), xe = 0;
 function _e(e) {
-  const [t, o] = l.useState(xe());
-  return z(() => {
-    o((r) => r ?? String(Ee++));
+  const [t, o] = u.useState(Pe());
+  return Y(() => {
+    o((r) => r ?? String(xe++));
   }, [e]), t ? `radix-${t}` : "";
 }
 function Ge(e) {
-  const t = l.useRef(e);
-  return l.useEffect(() => {
+  const t = u.useRef(e);
+  return u.useEffect(() => {
     t.current = e;
-  }), l.useMemo(() => (...o) => {
-    var r;
-    return (r = t.current) == null ? void 0 : r.call(t, ...o);
-  }, []);
+  }), u.useMemo(() => (...o) => t.current?.(...o), []);
 }
-var we = l[" useInsertionEffect ".trim().toString()] || z;
+var we = u[" useInsertionEffect ".trim().toString()] || Y;
 function M({
   prop: e,
   defaultProp: t,
@@ -218,29 +212,28 @@ function M({
   },
   caller: r
 }) {
-  const [n, s, c] = Ae({
+  const [n, s, l] = Ae({
     defaultProp: t,
     onChange: o
-  }), u = e !== void 0, i = u ? e : n;
+  }), c = e !== void 0, i = c ? e : n;
   {
-    const a = l.useRef(e !== void 0);
-    l.useEffect(() => {
+    const a = u.useRef(e !== void 0);
+    u.useEffect(() => {
       const d = a.current;
-      d !== u && console.warn(
-        `${r} is changing from ${d ? "controlled" : "uncontrolled"} to ${u ? "controlled" : "uncontrolled"}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
-      ), a.current = u;
-    }, [u, r]);
+      d !== c && console.warn(
+        `${r} is changing from ${d ? "controlled" : "uncontrolled"} to ${c ? "controlled" : "uncontrolled"}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
+      ), a.current = c;
+    }, [c, r]);
   }
-  const g = l.useCallback(
+  const g = u.useCallback(
     (a) => {
-      var d;
-      if (u) {
-        const m = Fe(a) ? a(e) : a;
-        m !== e && ((d = c.current) == null || d.call(c, m));
+      if (c) {
+        const d = Fe(a) ? a(e) : a;
+        d !== e && l.current?.(d);
       } else
         s(a);
     },
-    [u, e, s, c]
+    [c, e, s, l]
   );
   return [i, g];
 }
@@ -248,70 +241,69 @@ function Ae({
   defaultProp: e,
   onChange: t
 }) {
-  const [o, r] = l.useState(e), n = l.useRef(o), s = l.useRef(t);
+  const [o, r] = u.useState(e), n = u.useRef(o), s = u.useRef(t);
   return we(() => {
     s.current = t;
-  }, [t]), l.useEffect(() => {
-    var c;
-    n.current !== o && ((c = s.current) == null || c.call(s, o), n.current = o);
+  }, [t]), u.useEffect(() => {
+    n.current !== o && (s.current?.(o), n.current = o);
   }, [o, n]), [o, r, s];
 }
 function Fe(e) {
   return typeof e == "function";
 }
-var ke = l.createContext(void 0);
-function q(e) {
-  const t = l.useContext(ke);
+var ke = u.createContext(void 0);
+function z(e) {
+  const t = u.useContext(ke);
   return e || t || "ltr";
 }
-var D = "rovingFocusGroup.onEntryFocus", Ne = { bubbles: !1, cancelable: !0 }, F = "RovingFocusGroup", [V, Z, Me] = Pe(F), [Oe, J] = U(
+var D = "rovingFocusGroup.onEntryFocus", Ne = { bubbles: !1, cancelable: !0 }, F = "RovingFocusGroup", [V, q, Me] = Ee(F), [Oe, Z] = U(
   F,
   [Me]
-), [De, Le] = Oe(F), Q = l.forwardRef(
+), [De, Le] = Oe(F), J = u.forwardRef(
   (e, t) => /* @__PURE__ */ f(V.Provider, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ f(V.Slot, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ f($e, { ...e, ref: t }) }) })
 );
-Q.displayName = F;
-var $e = l.forwardRef((e, t) => {
+J.displayName = F;
+var $e = u.forwardRef((e, t) => {
   const {
     __scopeRovingFocusGroup: o,
     orientation: r,
     loop: n = !1,
     dir: s,
-    currentTabStopId: c,
-    defaultCurrentTabStopId: u,
+    currentTabStopId: l,
+    defaultCurrentTabStopId: c,
     onCurrentTabStopIdChange: i,
     onEntryFocus: g,
     preventScrollOnEntryFocus: a = !1,
     ...d
-  } = e, m = l.useRef(null), S = L(t, m), T = q(s), [h, p] = M({
-    prop: c,
-    defaultProp: u ?? null,
+  } = e, I = u.useRef(null), y = L(t, I), S = z(s), [h, p] = M({
+    prop: l,
+    defaultProp: c ?? null,
     onChange: i,
     caller: F
-  }), [b, R] = l.useState(!1), v = Ge(g), I = Z(o), _ = l.useRef(!1), [G, k] = l.useState(0);
-  return l.useEffect(() => {
-    const y = m.current;
-    if (y)
-      return y.addEventListener(D, v), () => y.removeEventListener(D, v);
-  }, [v]), /* @__PURE__ */ f(
+  }), [b, T] = u.useState(!1), m = Ge(g), C = q(o), _ = u.useRef(!1), [G, k] = u.useState(0);
+  return u.useEffect(() => {
+    const R = I.current;
+    if (R)
+      return R.addEventListener(D, m), () => R.removeEventListener(D, m);
+  }, [m]), /* @__PURE__ */ f(
     De,
     {
       scope: o,
       orientation: r,
-      dir: T,
+      dir: S,
       loop: n,
       currentTabStopId: h,
-      onItemFocus: l.useCallback(
-        (y) => p(y),
+      onItemFocus: u.useCallback(
+        (R) => p(R),
         [p]
       ),
-      onItemShiftTab: l.useCallback(() => R(!0), []),
-      onFocusableItemAdd: l.useCallback(
-        () => k((y) => y + 1),
+      onItemShiftTab: u.useCallback(() => T(!0), []),
+      onFocusableItemAdd: u.useCallback(
+        () => k((R) => R + 1),
         []
       ),
-      onFocusableItemRemove: l.useCallback(
-        () => k((y) => y - 1),
+      onFocusableItemRemove: u.useCallback(
+        () => k((R) => R - 1),
         []
       ),
       children: /* @__PURE__ */ f(
@@ -320,43 +312,43 @@ var $e = l.forwardRef((e, t) => {
           tabIndex: b || G === 0 ? -1 : 0,
           "data-orientation": r,
           ...d,
-          ref: S,
+          ref: y,
           style: { outline: "none", ...e.style },
-          onMouseDown: E(e.onMouseDown, () => {
+          onMouseDown: x(e.onMouseDown, () => {
             _.current = !0;
           }),
-          onFocus: E(e.onFocus, (y) => {
+          onFocus: x(e.onFocus, (R) => {
             const ie = !_.current;
-            if (y.target === y.currentTarget && ie && !b) {
+            if (R.target === R.currentTarget && ie && !b) {
               const K = new CustomEvent(D, Ne);
-              if (y.currentTarget.dispatchEvent(K), !K.defaultPrevented) {
-                const O = I().filter((x) => x.focusable), fe = O.find((x) => x.active), de = O.find((x) => x.id === h), pe = [fe, de, ...O].filter(
+              if (R.currentTarget.dispatchEvent(K), !K.defaultPrevented) {
+                const O = C().filter((P) => P.focusable), fe = O.find((P) => P.active), de = O.find((P) => P.id === h), pe = [fe, de, ...O].filter(
                   Boolean
-                ).map((x) => x.ref.current);
+                ).map((P) => P.ref.current);
                 ee(pe, a);
               }
             }
             _.current = !1;
           }),
-          onBlur: E(e.onBlur, () => R(!1))
+          onBlur: x(e.onBlur, () => T(!1))
         }
       )
     }
   );
-}), X = "RovingFocusGroupItem", H = l.forwardRef(
+}), Q = "RovingFocusGroupItem", X = u.forwardRef(
   (e, t) => {
     const {
       __scopeRovingFocusGroup: o,
       focusable: r = !0,
       active: n = !1,
       tabStopId: s,
-      children: c,
-      ...u
-    } = e, i = _e(), g = s || i, a = Le(X, o), d = a.currentTabStopId === g, m = Z(o), { onFocusableItemAdd: S, onFocusableItemRemove: T, currentTabStopId: h } = a;
-    return l.useEffect(() => {
+      children: l,
+      ...c
+    } = e, i = _e(), g = s || i, a = Le(Q, o), d = a.currentTabStopId === g, I = q(o), { onFocusableItemAdd: y, onFocusableItemRemove: S, currentTabStopId: h } = a;
+    return u.useEffect(() => {
       if (r)
-        return S(), () => T();
-    }, [r, S, T]), /* @__PURE__ */ f(
+        return y(), () => S();
+    }, [r, y, S]), /* @__PURE__ */ f(
       V.ItemSlot,
       {
         scope: o,
@@ -368,13 +360,13 @@ var $e = l.forwardRef((e, t) => {
           {
             tabIndex: d ? 0 : -1,
             "data-orientation": a.orientation,
-            ...u,
+            ...c,
             ref: t,
-            onMouseDown: E(e.onMouseDown, (p) => {
+            onMouseDown: x(e.onMouseDown, (p) => {
               r ? a.onItemFocus(g) : p.preventDefault();
             }),
-            onFocus: E(e.onFocus, () => a.onItemFocus(g)),
-            onKeyDown: E(e.onKeyDown, (p) => {
+            onFocus: x(e.onFocus, () => a.onItemFocus(g)),
+            onKeyDown: x(e.onKeyDown, (p) => {
               if (p.key === "Tab" && p.shiftKey) {
                 a.onItemShiftTab();
                 return;
@@ -384,24 +376,24 @@ var $e = l.forwardRef((e, t) => {
               if (b !== void 0) {
                 if (p.metaKey || p.ctrlKey || p.altKey || p.shiftKey) return;
                 p.preventDefault();
-                let v = m().filter((I) => I.focusable).map((I) => I.ref.current);
-                if (b === "last") v.reverse();
+                let m = I().filter((C) => C.focusable).map((C) => C.ref.current);
+                if (b === "last") m.reverse();
                 else if (b === "prev" || b === "next") {
-                  b === "prev" && v.reverse();
-                  const I = v.indexOf(p.currentTarget);
-                  v = a.loop ? Ke(v, I + 1) : v.slice(I + 1);
+                  b === "prev" && m.reverse();
+                  const C = m.indexOf(p.currentTarget);
+                  m = a.loop ? Ke(m, C + 1) : m.slice(C + 1);
                 }
-                setTimeout(() => ee(v));
+                setTimeout(() => ee(m));
               }
             }),
-            children: typeof c == "function" ? c({ isCurrentTabStop: d, hasTabStop: h != null }) : c
+            children: typeof l == "function" ? l({ isCurrentTabStop: d, hasTabStop: h != null }) : l
           }
         )
       }
     );
   }
 );
-H.displayName = X;
+X.displayName = Q;
 var Ve = {
   ArrowLeft: "prev",
   ArrowUp: "prev",
@@ -428,8 +420,8 @@ function ee(e, t = !1) {
 function Ke(e, t) {
   return e.map((o, r) => e[(t + r) % e.length]);
 }
-var We = Q, je = H, te = "Toggle", oe = l.forwardRef((e, t) => {
-  const { pressed: o, defaultPressed: r, onPressedChange: n, ...s } = e, [c, u] = M({
+var We = J, je = X, te = "Toggle", oe = u.forwardRef((e, t) => {
+  const { pressed: o, defaultPressed: r, onPressedChange: n, ...s } = e, [l, c] = M({
     prop: o,
     onChange: n,
     defaultProp: r ?? !1,
@@ -439,132 +431,132 @@ var We = Q, je = H, te = "Toggle", oe = l.forwardRef((e, t) => {
     A.button,
     {
       type: "button",
-      "aria-pressed": c,
-      "data-state": c ? "on" : "off",
+      "aria-pressed": l,
+      "data-state": l ? "on" : "off",
       "data-disabled": e.disabled ? "" : void 0,
       ...s,
       ref: t,
-      onClick: E(e.onClick, () => {
-        e.disabled || u(!c);
+      onClick: x(e.onClick, () => {
+        e.disabled || c(!l);
       })
     }
   );
 });
 oe.displayName = te;
-var P = "ToggleGroup", [re, lt] = U(P, [
-  J
-]), ne = J(), B = C.forwardRef((e, t) => {
+var E = "ToggleGroup", [re, ut] = U(E, [
+  Z
+]), ne = Z(), B = v.forwardRef((e, t) => {
   const { type: o, ...r } = e;
   if (o === "single")
-    return /* @__PURE__ */ f(Ye, { ...r, ref: t });
+    return /* @__PURE__ */ f(He, { ...r, ref: t });
   if (o === "multiple")
-    return /* @__PURE__ */ f(ze, { ...r, ref: t });
-  throw new Error(`Missing prop \`type\` expected on \`${P}\``);
+    return /* @__PURE__ */ f(Ye, { ...r, ref: t });
+  throw new Error(`Missing prop \`type\` expected on \`${E}\``);
 });
-B.displayName = P;
-var [se, ce] = re(P), Ye = C.forwardRef((e, t) => {
+B.displayName = E;
+var [se, ce] = re(E), He = v.forwardRef((e, t) => {
   const {
     value: o,
     defaultValue: r,
     onValueChange: n = () => {
     },
     ...s
-  } = e, [c, u] = M({
+  } = e, [l, c] = M({
     prop: o,
     defaultProp: r ?? "",
     onChange: n,
-    caller: P
+    caller: E
   });
   return /* @__PURE__ */ f(
     se,
     {
       scope: e.__scopeToggleGroup,
       type: "single",
-      value: C.useMemo(() => c ? [c] : [], [c]),
-      onItemActivate: u,
-      onItemDeactivate: C.useCallback(() => u(""), [u]),
-      children: /* @__PURE__ */ f(ue, { ...s, ref: t })
+      value: v.useMemo(() => l ? [l] : [], [l]),
+      onItemActivate: c,
+      onItemDeactivate: v.useCallback(() => c(""), [c]),
+      children: /* @__PURE__ */ f(le, { ...s, ref: t })
     }
   );
-}), ze = C.forwardRef((e, t) => {
+}), Ye = v.forwardRef((e, t) => {
   const {
     value: o,
     defaultValue: r,
     onValueChange: n = () => {
     },
     ...s
-  } = e, [c, u] = M({
+  } = e, [l, c] = M({
     prop: o,
     defaultProp: r ?? [],
     onChange: n,
-    caller: P
-  }), i = C.useCallback(
-    (a) => u((d = []) => [...d, a]),
-    [u]
-  ), g = C.useCallback(
-    (a) => u((d = []) => d.filter((m) => m !== a)),
-    [u]
+    caller: E
+  }), i = v.useCallback(
+    (a) => c((d = []) => [...d, a]),
+    [c]
+  ), g = v.useCallback(
+    (a) => c((d = []) => d.filter((I) => I !== a)),
+    [c]
   );
   return /* @__PURE__ */ f(
     se,
     {
       scope: e.__scopeToggleGroup,
       type: "multiple",
-      value: c,
+      value: l,
       onItemActivate: i,
       onItemDeactivate: g,
-      children: /* @__PURE__ */ f(ue, { ...s, ref: t })
+      children: /* @__PURE__ */ f(le, { ...s, ref: t })
     }
   );
 });
-B.displayName = P;
-var [qe, Ze] = re(P), ue = C.forwardRef(
+B.displayName = E;
+var [ze, qe] = re(E), le = v.forwardRef(
   (e, t) => {
     const {
       __scopeToggleGroup: o,
       disabled: r = !1,
       rovingFocus: n = !0,
       orientation: s,
-      dir: c,
-      loop: u = !0,
+      dir: l,
+      loop: c = !0,
       ...i
-    } = e, g = ne(o), a = q(c), d = { role: "group", dir: a, ...i };
-    return /* @__PURE__ */ f(qe, { scope: o, rovingFocus: n, disabled: r, children: n ? /* @__PURE__ */ f(
+    } = e, g = ne(o), a = z(l), d = { role: "group", dir: a, ...i };
+    return /* @__PURE__ */ f(ze, { scope: o, rovingFocus: n, disabled: r, children: n ? /* @__PURE__ */ f(
       We,
       {
         asChild: !0,
         ...g,
         orientation: s,
         dir: a,
-        loop: u,
+        loop: c,
         children: /* @__PURE__ */ f(A.div, { ...d, ref: t })
       }
     ) : /* @__PURE__ */ f(A.div, { ...d, ref: t }) });
   }
-), N = "ToggleGroupItem", le = C.forwardRef(
+), N = "ToggleGroupItem", ue = v.forwardRef(
   (e, t) => {
-    const o = ce(N, e.__scopeToggleGroup), r = Ze(N, e.__scopeToggleGroup), n = ne(e.__scopeToggleGroup), s = o.value.includes(e.value), c = r.disabled || e.disabled, u = { ...e, pressed: s, disabled: c }, i = C.useRef(null);
+    const o = ce(N, e.__scopeToggleGroup), r = qe(N, e.__scopeToggleGroup), n = ne(e.__scopeToggleGroup), s = o.value.includes(e.value), l = r.disabled || e.disabled, c = { ...e, pressed: s, disabled: l }, i = v.useRef(null);
     return r.rovingFocus ? /* @__PURE__ */ f(
       je,
       {
         asChild: !0,
         ...n,
-        focusable: !c,
+        focusable: !l,
         active: s,
         ref: i,
-        children: /* @__PURE__ */ f(j, { ...u, ref: t })
+        children: /* @__PURE__ */ f(j, { ...c, ref: t })
       }
-    ) : /* @__PURE__ */ f(j, { ...u, ref: t });
+    ) : /* @__PURE__ */ f(j, { ...c, ref: t });
   }
 );
-le.displayName = N;
-var j = C.forwardRef(
+ue.displayName = N;
+var j = v.forwardRef(
   (e, t) => {
-    const { __scopeToggleGroup: o, value: r, ...n } = e, s = ce(N, o), c = { role: "radio", "aria-checked": e.pressed, "aria-pressed": void 0 }, u = s.type === "single" ? c : void 0;
+    const { __scopeToggleGroup: o, value: r, ...n } = e, s = ce(N, o), l = { role: "radio", "aria-checked": e.pressed, "aria-pressed": void 0 }, c = s.type === "single" ? l : void 0;
     return /* @__PURE__ */ f(
       oe,
       {
-        ...u,
+        ...c,
         ...n,
         ref: t,
         onPressedChange: (i) => {
@@ -573,17 +565,17 @@ var j = C.forwardRef(
       }
     );
   }
-), Je = B, Qe = le;
-const ae = C.createContext({
+), Ze = B, Je = ue;
+const ae = v.createContext({
   size: "medium",
   focusMode: "system",
   mode: "system"
-}), Xe = ({ focusMode: e }) => w("focus:outline", "focus:outline-2", "focus:outline-offset", {
+}), Qe = ({ focusMode: e }) => w("focus:outline", "focus:outline-2", "focus:outline-offset", {
   "focus:outline-focus-light": e === "light",
   "focus:outline-focus-dark": e === "dark",
   "focus:outline-focus-light dark:focus:outline-focus-dark": e === "alt-system",
   "focus:outline-focus-dark dark:focus:outline-focus-light": e === "system"
-}), He = ({ mode: e }) => w({
+}), Xe = ({ mode: e }) => w({
   "data-[state=on]:bg-surface-medium": e === "dark",
   "data-[state=on]:bg-surface-lightest": e === "light",
   "data-[state=on]:bg-surface-lightest dark:data-[state=on]:bg-surface-medium": e === "system",
@@ -618,8 +610,8 @@ const ae = C.createContext({
     "rounded-xs",
     "transition duration-200 ease",
     et({ size: o }),
-    Xe({ focusMode: e }),
-    He({ mode: t })
+    Qe({ focusMode: e }),
+    Xe({ mode: t })
   )
 }), rt = ({
   mode: e,
@@ -642,19 +634,19 @@ const ae = C.createContext({
   disabled: r,
   mode: n = "system",
   focusMode: s = "system",
-  size: c = "medium",
-  defaultValue: u,
+  size: l = "medium",
+  defaultValue: c,
   className: i,
   ...g
 }) => {
-  const a = rt({ mode: n, className: i }), d = { size: c, focusMode: s, mode: n };
+  const a = rt({ mode: n, className: i }), d = { size: l, focusMode: s, mode: n };
   return /* @__PURE__ */ f(ae.Provider, { value: d, children: /* @__PURE__ */ f(
-    Je,
+    Ze,
     {
       disabled: r,
       className: a,
       value: t,
-      defaultValue: u,
+      defaultValue: c,
       onValueChange: o,
       ...g,
       type: "single",
@@ -662,13 +654,13 @@ const ae = C.createContext({
     }
   ) });
 }, it = ({ value: e, disabled: t }) => {
-  const { size: o, focusMode: r, mode: n } = ge(ae), { itemClass: s, wrapperClass: c } = ot({
+  const { size: o, focusMode: r, mode: n } = ge(ae), { itemClass: s, wrapperClass: l } = ot({
     focusMode: r,
     mode: n,
     size: o
   });
-  return /* @__PURE__ */ f("div", { className: c, children: /* @__PURE__ */ f(
-    Qe,
+  return /* @__PURE__ */ f("div", { className: l, children: /* @__PURE__ */ f(
+    Je,
     {
       disabled: t,
       className: s,

package/dist/index.js

@@ -1,12 +1,12 @@
 import { TOGGLEGROUP_CLASSNAME as E, TOGGLEGROUP_ITEM_CLASSNAME as e, TOGGLEGROUP_ITEM_WRAPPER_CLASSNAME as T, ToggleGroup as i, ToggleGroupItem as r } from "./components/ToggleGroup/ToggleGroup.js";
 /*!
-  @versini/ui-togglegroup v4.0.5
+  @versini/ui-togglegroup v4.0.6
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_TOGGLEGROUP__ || (window.__VERSINI_UI_TOGGLEGROUP__ = {
-    version: "4.0.5",
-    buildTime: "06/28/2025 08:58 PM EDT",
+    version: "4.0.6",
+    buildTime: "08/07/2025 04:11 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-togglegroup",
-	"version": "4.0.5",
+	"version": "4.0.6",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -27,6 +27,7 @@
 		"dev:types": "tsup --watch src",
 		"dev": "npm-run-all clean --parallel dev:js dev:types",
 		"lint": "biome lint src",
+		"lint:fix": "biome check src --write --no-errors-on-unmatched",
 		"prettier": "biome check --write --no-errors-on-unmatched",
 		"start": "static-server dist --port 5173",
 		"test:coverage:ui": "vitest --coverage --ui",
@@ -39,7 +40,7 @@
 		"react-dom": "^18.3.1 || ^19.0.0"
 	},
 	"devDependencies": {
-		"@versini/ui-types": "5.0.5"
+		"@versini/ui-types": "5.0.6"
 	},
 	"dependencies": {
 		"@radix-ui/react-toggle-group": "1.1.10",
@@ -50,5 +51,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "1b9a792d10e1f67fc7af7cfdff718ef1e1c78633"
+	"gitHead": "42daab1fb88c366495abbc1db78a9987de05e59b"
 }