@versini/ui-togglegroup 4.0.2 → 4.0.4

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -1,126 +1,127 @@
 import { jsx as f } from "react/jsx-runtime";
 import * as l from "react";
-import b, { useContext as pe } from "react";
-import E from "clsx";
-const ge = "av-togglegroup", me = "av-togglegroup-item-wrapper", ve = "av-togglegroup-item";
+import C, { 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 r = [];
-  function o(s, u) {
-    const c = l.createContext(u), i = r.length;
-    r = [...r, u];
-    const a = (d) => {
-      var v;
-      const { scope: h, children: T, ...p } = d, m = ((v = h == null ? void 0 : h[e]) == null ? void 0 : v[i]) || c, I = l.useMemo(() => p, Object.values(p));
-      return /* @__PURE__ */ f(m.Provider, { value: I, children: T });
+  let o = [];
+  function r(s, c) {
+    const u = l.createContext(c), i = o.length;
+    o = [...o, c];
+    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 });
     };
-    a.displayName = s + "Provider";
-    function g(d, h) {
-      var m;
-      const T = ((m = h == null ? void 0 : h[e]) == null ? void 0 : m[i]) || c, p = l.useContext(T);
-      if (p) return p;
-      if (u !== void 0) return u;
+    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;
       throw new Error(`\`${d}\` must be used within \`${s}\``);
     }
-    return [a, g];
+    return [g, a];
   }
   const n = () => {
-    const s = r.map((u) => l.createContext(u));
-    return function(c) {
-      const i = (c == null ? void 0 : c[e]) || s;
+    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}`]: { ...c, [e]: i } }),
-        [c, i]
+        () => ({ [`__scope${e}`]: { ...u, [e]: i } }),
+        [u, i]
       );
     };
   };
-  return n.scopeName = e, [o, Ce(n, ...t)];
+  return n.scopeName = e, [r, be(n, ...t)];
 }
-function Ce(...e) {
+function be(...e) {
   const t = e[0];
   if (e.length === 1) return t;
-  const r = () => {
-    const o = e.map((n) => ({
+  const o = () => {
+    const r = e.map((n) => ({
       useScope: n(),
       scopeName: n.scopeName
     }));
     return function(s) {
-      const u = o.reduce((c, { useScope: i, scopeName: a }) => {
-        const d = i(s)[`__scope${a}`];
-        return { ...c, ...d };
+      const c = r.reduce((u, { useScope: i, scopeName: g }) => {
+        const d = i(s)[`__scope${g}`];
+        return { ...u, ...d };
       }, {});
-      return l.useMemo(() => ({ [`__scope${t.scopeName}`]: u }), [u]);
+      return l.useMemo(() => ({ [`__scope${t.scopeName}`]: c }), [c]);
     };
   };
-  return r.scopeName = t.scopeName, r;
+  return o.scopeName = t.scopeName, o;
 }
-function j(e, t) {
+function W(e, t) {
   if (typeof e == "function")
     return e(t);
   e != null && (e.current = t);
 }
-function z(...e) {
+function Y(...e) {
   return (t) => {
-    let r = !1;
-    const o = e.map((n) => {
-      const s = j(n, t);
-      return !r && typeof s == "function" && (r = !0), s;
+    let o = !1;
+    const r = e.map((n) => {
+      const s = W(n, t);
+      return !o && typeof s == "function" && (o = !0), s;
     });
-    if (r)
+    if (o)
       return () => {
-        for (let n = 0; n < o.length; n++) {
-          const s = o[n];
-          typeof s == "function" ? s() : j(e[n], null);
+        for (let n = 0; n < r.length; n++) {
+          const s = r[n];
+          typeof s == "function" ? s() : W(e[n], null);
         }
       };
   };
 }
 function L(...e) {
-  return l.useCallback(z(...e), e);
+  return l.useCallback(Y(...e), e);
 }
 // @__NO_SIDE_EFFECTS__
-function V(e) {
-  const t = /* @__PURE__ */ be(e), r = l.forwardRef((o, n) => {
-    const { children: s, ...u } = o, c = l.Children.toArray(s), i = c.find(Ie);
+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);
     if (i) {
-      const a = i.props.children, g = c.map((d) => d === i ? l.Children.count(a) > 1 ? l.Children.only(null) : l.isValidElement(a) ? a.props.children : null : d);
-      return /* @__PURE__ */ f(t, { ...u, ref: n, children: l.isValidElement(a) ? l.cloneElement(a, void 0, g) : null });
+      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 });
     }
-    return /* @__PURE__ */ f(t, { ...u, ref: n, children: s });
+    return /* @__PURE__ */ f(t, { ...c, ref: n, children: s });
   });
-  return r.displayName = `${e}.Slot`, r;
+  return o.displayName = `${e}.Slot`, o;
 }
 // @__NO_SIDE_EFFECTS__
-function be(e) {
-  const t = l.forwardRef((r, o) => {
-    const { children: n, ...s } = r;
+function he(e) {
+  const t = l.forwardRef((o, r) => {
+    const { children: n, ...s } = o;
     if (l.isValidElement(n)) {
-      const u = Se(n), c = ye(s, n.props);
-      return n.type !== l.Fragment && (c.ref = o ? z(o, u) : u), l.cloneElement(n, c);
+      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);
     }
     return l.Children.count(n) > 1 ? l.Children.only(null) : null;
   });
   return t.displayName = `${e}.SlotClone`, t;
 }
-var he = Symbol("radix.slottable");
-function Ie(e) {
-  return l.isValidElement(e) && typeof e.type == "function" && "__radixId" in e.type && e.type.__radixId === he;
+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 ye(e, t) {
-  const r = { ...t };
-  for (const o in t) {
-    const n = e[o], s = t[o];
-    /^on[A-Z]/.test(o) ? n && s ? r[o] = (...c) => {
-      s(...c), n(...c);
-    } : n && (r[o] = n) : o === "style" ? r[o] = { ...n, ...s } : o === "className" && (r[o] = [n, s].filter(Boolean).join(" "));
+function Se(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;
+    } : n && (o[r] = n) : r === "style" ? o[r] = { ...n, ...s } : r === "className" && (o[r] = [n, s].filter(Boolean).join(" "));
   }
-  return { ...e, ...r };
+  return { ...e, ...o };
 }
-function Se(e) {
-  var o, n;
-  let t = (o = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : o.get, r = t && "isReactWarning" in t && t.isReactWarning;
-  return r ? e.ref : (t = (n = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : n.get, r = t && "isReactWarning" in t && t.isReactWarning, r ? e.props.ref : e.props.ref || e.ref);
+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);
 }
-var Te = [
+var Re = [
   "a",
   "button",
   "div",
@@ -134,186 +135,210 @@ var Te = [
   "nav",
   "ol",
   "p",
+  "select",
   "span",
   "svg",
   "ul"
-], A = Te.reduce((e, t) => {
-  const r = /* @__PURE__ */ V(`Primitive.${t}`), o = l.forwardRef((n, s) => {
-    const { asChild: u, ...c } = n, i = u ? r : t;
-    return typeof window < "u" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ f(i, { ...c, ref: s });
+], 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 });
   });
-  return o.displayName = `Primitive.${t}`, { ...e, [t]: o };
+  return r.displayName = `Primitive.${t}`, { ...e, [t]: r };
 }, {});
-function x(e, t, { checkForDefaultPrevented: r = !0 } = {}) {
+function E(e, t, { checkForDefaultPrevented: o = !0 } = {}) {
   return function(n) {
-    if (e == null || e(n), r === !1 || !n.defaultPrevented)
+    if (e == null || e(n), o === !1 || !n.defaultPrevented)
       return t == null ? void 0 : t(n);
   };
 }
-function Re(e) {
-  const t = e + "CollectionProvider", [r, o] = U(t), [n, s] = r(
+function Pe(e) {
+  const t = e + "CollectionProvider", [o, r] = U(t), [n, s] = o(
     t,
     { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() }
-  ), u = (m) => {
-    const { scope: I, children: v } = m, C = b.useRef(null), S = b.useRef(/* @__PURE__ */ new Map()).current;
-    return /* @__PURE__ */ f(n, { scope: I, itemMap: S, collectionRef: C, children: v });
+  ), 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 });
   };
-  u.displayName = t;
-  const c = e + "CollectionSlot", i = /* @__PURE__ */ V(c), a = b.forwardRef(
-    (m, I) => {
-      const { scope: v, children: C } = m, S = s(c, v), R = L(I, S.collectionRef);
-      return /* @__PURE__ */ f(i, { ref: R, children: C });
+  c.displayName = t;
+  const u = e + "CollectionSlot", i = /* @__PURE__ */ $(u), g = C.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 });
     }
   );
-  a.displayName = c;
-  const g = e + "CollectionItemSlot", d = "data-radix-collection-item", h = /* @__PURE__ */ V(g), T = b.forwardRef(
-    (m, I) => {
-      const { scope: v, children: C, ...S } = m, R = b.useRef(null), _ = L(I, R), G = s(g, v);
-      return b.useEffect(() => (G.itemMap.set(R, { ref: R, ...S }), () => void G.itemMap.delete(R))), /* @__PURE__ */ f(h, { [d]: "", ref: _, children: C });
+  g.displayName = u;
+  const a = e + "CollectionItemSlot", d = "data-radix-collection-item", m = /* @__PURE__ */ $(a), S = C.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 });
     }
   );
-  T.displayName = g;
-  function p(m) {
-    const I = s(e + "CollectionConsumer", m);
-    return b.useCallback(() => {
-      const C = I.collectionRef.current;
-      if (!C) return [];
-      const S = Array.from(C.querySelectorAll(`[${d}]`));
-      return Array.from(I.itemMap.values()).sort(
-        (G, F) => S.indexOf(G.ref.current) - S.indexOf(F.ref.current)
+  S.displayName = a;
+  function T(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 Array.from(p.itemMap.values()).sort(
+        (G, k) => v.indexOf(G.ref.current) - v.indexOf(k.ref.current)
       );
-    }, [I.collectionRef, I.itemMap]);
+    }, [p.collectionRef, p.itemMap]);
   }
   return [
-    { Provider: u, Slot: a, ItemSlot: T },
-    p,
-    o
+    { Provider: c, Slot: g, ItemSlot: S },
+    T,
+    r
   ];
 }
-var Pe = globalThis != null && globalThis.document ? l.useLayoutEffect : () => {
+var z = globalThis != null && globalThis.document ? l.useLayoutEffect : () => {
 }, xe = l[" useId ".trim().toString()] || (() => {
-}), _e = 0;
-function Ge(e) {
-  const [t, r] = l.useState(xe());
-  return Pe(() => {
-    r((o) => o ?? String(_e++));
+}), Ee = 0;
+function _e(e) {
+  const [t, o] = l.useState(xe());
+  return z(() => {
+    o((r) => r ?? String(Ee++));
   }, [e]), t ? `radix-${t}` : "";
 }
-function B(e) {
+function Ge(e) {
   const t = l.useRef(e);
   return l.useEffect(() => {
     t.current = e;
-  }), l.useMemo(() => (...r) => {
-    var o;
-    return (o = t.current) == null ? void 0 : o.call(t, ...r);
+  }), l.useMemo(() => (...o) => {
+    var r;
+    return (r = t.current) == null ? void 0 : r.call(t, ...o);
   }, []);
 }
-function N({
+var we = l[" useInsertionEffect ".trim().toString()] || z;
+function M({
   prop: e,
   defaultProp: t,
-  onChange: r = () => {
-  }
+  onChange: o = () => {
+  },
+  caller: r
 }) {
-  const [o, n] = Ee({ defaultProp: t, onChange: r }), s = e !== void 0, u = s ? e : o, c = B(r), i = l.useCallback(
+  const [n, s, c] = Ae({
+    defaultProp: t,
+    onChange: o
+  }), u = e !== void 0, i = u ? e : n;
+  {
+    const a = l.useRef(e !== void 0);
+    l.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]);
+  }
+  const g = l.useCallback(
     (a) => {
-      if (s) {
-        const d = typeof a == "function" ? a(e) : a;
-        d !== e && c(d);
+      var d;
+      if (u) {
+        const m = Fe(a) ? a(e) : a;
+        m !== e && ((d = c.current) == null || d.call(c, m));
       } else
-        n(a);
+        s(a);
     },
-    [s, e, n, c]
+    [u, e, s, c]
   );
-  return [u, i];
+  return [i, g];
 }
-function Ee({
+function Ae({
   defaultProp: e,
   onChange: t
 }) {
-  const r = l.useState(e), [o] = r, n = l.useRef(o), s = B(t);
-  return l.useEffect(() => {
-    n.current !== o && (s(o), n.current = o);
-  }, [o, n, s]), r;
+  const [o, r] = l.useState(e), n = l.useRef(o), s = l.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);
+  }, [o, n]), [o, r, s];
 }
-var we = l.createContext(void 0);
+function Fe(e) {
+  return typeof e == "function";
+}
+var ke = l.createContext(void 0);
 function q(e) {
-  const t = l.useContext(we);
+  const t = l.useContext(ke);
   return e || t || "ltr";
 }
-var D = "rovingFocusGroup.onEntryFocus", Ae = { bubbles: !1, cancelable: !0 }, M = "RovingFocusGroup", [$, Z, Fe] = Re(M), [ke, J] = U(
-  M,
-  [Fe]
-), [Ne, Me] = ke(M), Q = l.forwardRef(
-  (e, t) => /* @__PURE__ */ f($.Provider, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ f($.Slot, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ f(Oe, { ...e, ref: t }) }) })
+var D = "rovingFocusGroup.onEntryFocus", Ne = { bubbles: !1, cancelable: !0 }, F = "RovingFocusGroup", [V, Z, Me] = Pe(F), [Oe, J] = U(
+  F,
+  [Me]
+), [De, Le] = Oe(F), Q = l.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 = M;
-var Oe = l.forwardRef((e, t) => {
+Q.displayName = F;
+var $e = l.forwardRef((e, t) => {
   const {
-    __scopeRovingFocusGroup: r,
-    orientation: o,
+    __scopeRovingFocusGroup: o,
+    orientation: r,
     loop: n = !1,
     dir: s,
-    currentTabStopId: u,
-    defaultCurrentTabStopId: c,
+    currentTabStopId: c,
+    defaultCurrentTabStopId: u,
     onCurrentTabStopIdChange: i,
-    onEntryFocus: a,
-    preventScrollOnEntryFocus: g = !1,
+    onEntryFocus: g,
+    preventScrollOnEntryFocus: a = !1,
     ...d
-  } = e, h = l.useRef(null), T = L(t, h), p = q(s), [m = null, I] = N({
-    prop: u,
-    defaultProp: c,
-    onChange: i
-  }), [v, C] = l.useState(!1), S = B(a), R = Z(r), _ = l.useRef(!1), [G, F] = l.useState(0);
+  } = e, m = l.useRef(null), S = L(t, m), T = q(s), [h, p] = M({
+    prop: c,
+    defaultProp: u ?? 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 = h.current;
+    const y = m.current;
     if (y)
-      return y.addEventListener(D, S), () => y.removeEventListener(D, S);
-  }, [S]), /* @__PURE__ */ f(
-    Ne,
+      return y.addEventListener(D, v), () => y.removeEventListener(D, v);
+  }, [v]), /* @__PURE__ */ f(
+    De,
     {
-      scope: r,
-      orientation: o,
-      dir: p,
+      scope: o,
+      orientation: r,
+      dir: T,
       loop: n,
-      currentTabStopId: m,
+      currentTabStopId: h,
       onItemFocus: l.useCallback(
-        (y) => I(y),
-        [I]
+        (y) => p(y),
+        [p]
       ),
-      onItemShiftTab: l.useCallback(() => C(!0), []),
+      onItemShiftTab: l.useCallback(() => R(!0), []),
       onFocusableItemAdd: l.useCallback(
-        () => F((y) => y + 1),
+        () => k((y) => y + 1),
         []
       ),
       onFocusableItemRemove: l.useCallback(
-        () => F((y) => y - 1),
+        () => k((y) => y - 1),
         []
       ),
       children: /* @__PURE__ */ f(
         A.div,
         {
-          tabIndex: v || G === 0 ? -1 : 0,
-          "data-orientation": o,
+          tabIndex: b || G === 0 ? -1 : 0,
+          "data-orientation": r,
           ...d,
-          ref: T,
+          ref: S,
           style: { outline: "none", ...e.style },
-          onMouseDown: x(e.onMouseDown, () => {
+          onMouseDown: E(e.onMouseDown, () => {
             _.current = !0;
           }),
-          onFocus: x(e.onFocus, (y) => {
-            const ae = !_.current;
-            if (y.target === y.currentTarget && ae && !v) {
-              const W = new CustomEvent(D, Ae);
-              if (y.currentTarget.dispatchEvent(W), !W.defaultPrevented) {
-                const O = R().filter((P) => P.focusable), ie = O.find((P) => P.active), fe = O.find((P) => P.id === m), de = [ie, fe, ...O].filter(
+          onFocus: E(e.onFocus, (y) => {
+            const ie = !_.current;
+            if (y.target === y.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(
                   Boolean
-                ).map((P) => P.ref.current);
-                ee(de, g);
+                ).map((x) => x.ref.current);
+                ee(pe, a);
               }
             }
             _.current = !1;
           }),
-          onBlur: x(e.onBlur, () => C(!1))
+          onBlur: E(e.onBlur, () => R(!1))
         }
       )
     }
@@ -321,53 +346,55 @@ var Oe = l.forwardRef((e, t) => {
 }), X = "RovingFocusGroupItem", H = l.forwardRef(
   (e, t) => {
     const {
-      __scopeRovingFocusGroup: r,
-      focusable: o = !0,
+      __scopeRovingFocusGroup: o,
+      focusable: r = !0,
       active: n = !1,
       tabStopId: s,
+      children: c,
       ...u
-    } = e, c = Ge(), i = s || c, a = Me(X, r), g = a.currentTabStopId === i, d = Z(r), { onFocusableItemAdd: h, onFocusableItemRemove: T } = a;
+    } = 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(() => {
-      if (o)
-        return h(), () => T();
-    }, [o, h, T]), /* @__PURE__ */ f(
-      $.ItemSlot,
+      if (r)
+        return S(), () => T();
+    }, [r, S, T]), /* @__PURE__ */ f(
+      V.ItemSlot,
       {
-        scope: r,
-        id: i,
-        focusable: o,
+        scope: o,
+        id: g,
+        focusable: r,
         active: n,
         children: /* @__PURE__ */ f(
           A.span,
           {
-            tabIndex: g ? 0 : -1,
+            tabIndex: d ? 0 : -1,
             "data-orientation": a.orientation,
             ...u,
             ref: t,
-            onMouseDown: x(e.onMouseDown, (p) => {
-              o ? a.onItemFocus(i) : p.preventDefault();
+            onMouseDown: E(e.onMouseDown, (p) => {
+              r ? a.onItemFocus(g) : p.preventDefault();
             }),
-            onFocus: x(e.onFocus, () => a.onItemFocus(i)),
-            onKeyDown: x(e.onKeyDown, (p) => {
+            onFocus: E(e.onFocus, () => a.onItemFocus(g)),
+            onKeyDown: E(e.onKeyDown, (p) => {
               if (p.key === "Tab" && p.shiftKey) {
                 a.onItemShiftTab();
                 return;
               }
               if (p.target !== p.currentTarget) return;
-              const m = Ve(p, a.orientation, a.dir);
-              if (m !== void 0) {
+              const b = Be(p, a.orientation, a.dir);
+              if (b !== void 0) {
                 if (p.metaKey || p.ctrlKey || p.altKey || p.shiftKey) return;
                 p.preventDefault();
-                let v = d().filter((C) => C.focusable).map((C) => C.ref.current);
-                if (m === "last") v.reverse();
-                else if (m === "prev" || m === "next") {
-                  m === "prev" && v.reverse();
-                  const C = v.indexOf(p.currentTarget);
-                  v = a.loop ? $e(v, C + 1) : v.slice(C + 1);
+                let v = m().filter((I) => I.focusable).map((I) => I.ref.current);
+                if (b === "last") v.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);
                 }
                 setTimeout(() => ee(v));
               }
-            })
+            }),
+            children: typeof c == "function" ? c({ isCurrentTabStop: d, hasTabStop: h != null }) : c
           }
         )
       }
@@ -375,7 +402,7 @@ var Oe = l.forwardRef((e, t) => {
   }
 );
 H.displayName = X;
-var De = {
+var Ve = {
   ArrowLeft: "prev",
   ArrowUp: "prev",
   ArrowRight: "next",
@@ -385,185 +412,188 @@ var De = {
   PageDown: "last",
   End: "last"
 };
-function Le(e, t) {
+function Ue(e, t) {
   return t !== "rtl" ? e : e === "ArrowLeft" ? "ArrowRight" : e === "ArrowRight" ? "ArrowLeft" : e;
 }
-function Ve(e, t, r) {
-  const o = Le(e.key, r);
-  if (!(t === "vertical" && ["ArrowLeft", "ArrowRight"].includes(o)) && !(t === "horizontal" && ["ArrowUp", "ArrowDown"].includes(o)))
-    return De[o];
+function Be(e, t, o) {
+  const r = Ue(e.key, o);
+  if (!(t === "vertical" && ["ArrowLeft", "ArrowRight"].includes(r)) && !(t === "horizontal" && ["ArrowUp", "ArrowDown"].includes(r)))
+    return Ve[r];
 }
 function ee(e, t = !1) {
-  const r = document.activeElement;
-  for (const o of e)
-    if (o === r || (o.focus({ preventScroll: t }), document.activeElement !== r)) return;
+  const o = document.activeElement;
+  for (const r of e)
+    if (r === o || (r.focus({ preventScroll: t }), document.activeElement !== o)) return;
 }
-function $e(e, t) {
-  return e.map((r, o) => e[(t + o) % e.length]);
+function Ke(e, t) {
+  return e.map((o, r) => e[(t + r) % e.length]);
 }
-var Ue = Q, Be = H, Ke = "Toggle", te = l.forwardRef((e, t) => {
-  const { pressed: r, defaultPressed: o = !1, onPressedChange: n, ...s } = e, [u = !1, c] = N({
-    prop: r,
+var We = Q, je = H, te = "Toggle", oe = l.forwardRef((e, t) => {
+  const { pressed: o, defaultPressed: r, onPressedChange: n, ...s } = e, [c, u] = M({
+    prop: o,
     onChange: n,
-    defaultProp: o
+    defaultProp: r ?? !1,
+    caller: te
   });
   return /* @__PURE__ */ f(
     A.button,
     {
       type: "button",
-      "aria-pressed": u,
-      "data-state": u ? "on" : "off",
+      "aria-pressed": c,
+      "data-state": c ? "on" : "off",
       "data-disabled": e.disabled ? "" : void 0,
       ...s,
       ref: t,
-      onClick: x(e.onClick, () => {
-        e.disabled || c(!u);
+      onClick: E(e.onClick, () => {
+        e.disabled || u(!c);
       })
     }
   );
 });
-te.displayName = Ke;
-var w = "ToggleGroup", [oe, ct] = U(w, [
+oe.displayName = te;
+var P = "ToggleGroup", [re, lt] = U(P, [
   J
-]), re = J(), K = b.forwardRef((e, t) => {
-  const { type: r, ...o } = e;
-  if (r === "single")
-    return /* @__PURE__ */ f(We, { ...o, ref: t });
-  if (r === "multiple")
-    return /* @__PURE__ */ f(je, { ...o, ref: t });
-  throw new Error(`Missing prop \`type\` expected on \`${w}\``);
+]), ne = J(), B = C.forwardRef((e, t) => {
+  const { type: o, ...r } = e;
+  if (o === "single")
+    return /* @__PURE__ */ f(Ye, { ...r, ref: t });
+  if (o === "multiple")
+    return /* @__PURE__ */ f(ze, { ...r, ref: t });
+  throw new Error(`Missing prop \`type\` expected on \`${P}\``);
 });
-K.displayName = w;
-var [ne, se] = oe(w), We = b.forwardRef((e, t) => {
+B.displayName = P;
+var [se, ce] = re(P), Ye = C.forwardRef((e, t) => {
   const {
-    value: r,
-    defaultValue: o,
+    value: o,
+    defaultValue: r,
     onValueChange: n = () => {
     },
     ...s
-  } = e, [u, c] = N({
-    prop: r,
-    defaultProp: o,
-    onChange: n
+  } = e, [c, u] = M({
+    prop: o,
+    defaultProp: r ?? "",
+    onChange: n,
+    caller: P
   });
   return /* @__PURE__ */ f(
-    ne,
+    se,
     {
       scope: e.__scopeToggleGroup,
       type: "single",
-      value: u ? [u] : [],
-      onItemActivate: c,
-      onItemDeactivate: b.useCallback(() => c(""), [c]),
-      children: /* @__PURE__ */ f(ce, { ...s, ref: t })
+      value: C.useMemo(() => c ? [c] : [], [c]),
+      onItemActivate: u,
+      onItemDeactivate: C.useCallback(() => u(""), [u]),
+      children: /* @__PURE__ */ f(ue, { ...s, ref: t })
     }
   );
-}), je = b.forwardRef((e, t) => {
+}), ze = C.forwardRef((e, t) => {
   const {
-    value: r,
-    defaultValue: o,
+    value: o,
+    defaultValue: r,
     onValueChange: n = () => {
     },
     ...s
-  } = e, [u = [], c] = N({
-    prop: r,
-    defaultProp: o,
-    onChange: n
-  }), i = b.useCallback(
-    (g) => c((d = []) => [...d, g]),
-    [c]
-  ), a = b.useCallback(
-    (g) => c((d = []) => d.filter((h) => h !== g)),
-    [c]
+  } = e, [c, u] = 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]
   );
   return /* @__PURE__ */ f(
-    ne,
+    se,
     {
       scope: e.__scopeToggleGroup,
       type: "multiple",
-      value: u,
+      value: c,
       onItemActivate: i,
-      onItemDeactivate: a,
-      children: /* @__PURE__ */ f(ce, { ...s, ref: t })
+      onItemDeactivate: g,
+      children: /* @__PURE__ */ f(ue, { ...s, ref: t })
     }
   );
 });
-K.displayName = w;
-var [Ye, ze] = oe(w), ce = b.forwardRef(
+B.displayName = P;
+var [qe, Ze] = re(P), ue = C.forwardRef(
   (e, t) => {
     const {
-      __scopeToggleGroup: r,
-      disabled: o = !1,
+      __scopeToggleGroup: o,
+      disabled: r = !1,
       rovingFocus: n = !0,
       orientation: s,
-      dir: u,
-      loop: c = !0,
+      dir: c,
+      loop: u = !0,
       ...i
-    } = e, a = re(r), g = q(u), d = { role: "group", dir: g, ...i };
-    return /* @__PURE__ */ f(Ye, { scope: r, rovingFocus: n, disabled: o, children: n ? /* @__PURE__ */ f(
-      Ue,
+    } = 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(
+      We,
       {
         asChild: !0,
-        ...a,
+        ...g,
         orientation: s,
-        dir: g,
-        loop: c,
+        dir: a,
+        loop: u,
         children: /* @__PURE__ */ f(A.div, { ...d, ref: t })
       }
     ) : /* @__PURE__ */ f(A.div, { ...d, ref: t }) });
   }
-), k = "ToggleGroupItem", ue = b.forwardRef(
+), N = "ToggleGroupItem", le = C.forwardRef(
   (e, t) => {
-    const r = se(k, e.__scopeToggleGroup), o = ze(k, e.__scopeToggleGroup), n = re(e.__scopeToggleGroup), s = r.value.includes(e.value), u = o.disabled || e.disabled, c = { ...e, pressed: s, disabled: u }, i = b.useRef(null);
-    return o.rovingFocus ? /* @__PURE__ */ f(
-      Be,
+    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);
+    return r.rovingFocus ? /* @__PURE__ */ f(
+      je,
       {
         asChild: !0,
         ...n,
-        focusable: !u,
+        focusable: !c,
         active: s,
         ref: i,
-        children: /* @__PURE__ */ f(Y, { ...c, ref: t })
+        children: /* @__PURE__ */ f(j, { ...u, ref: t })
       }
-    ) : /* @__PURE__ */ f(Y, { ...c, ref: t });
+    ) : /* @__PURE__ */ f(j, { ...u, ref: t });
   }
 );
-ue.displayName = k;
-var Y = b.forwardRef(
+le.displayName = N;
+var j = C.forwardRef(
   (e, t) => {
-    const { __scopeToggleGroup: r, value: o, ...n } = e, s = se(k, r), u = { role: "radio", "aria-checked": e.pressed, "aria-pressed": void 0 }, c = s.type === "single" ? u : void 0;
+    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;
     return /* @__PURE__ */ f(
-      te,
+      oe,
       {
-        ...c,
+        ...u,
         ...n,
         ref: t,
         onPressedChange: (i) => {
-          i ? s.onItemActivate(o) : s.onItemDeactivate(o);
+          i ? s.onItemActivate(r) : s.onItemDeactivate(r);
         }
       }
     );
   }
-), qe = K, Ze = ue;
-const le = b.createContext({
+), Je = B, Qe = le;
+const ae = C.createContext({
   size: "medium",
   focusMode: "system",
   mode: "system"
-}), Je = ({ focusMode: e }) => E("focus:outline", "focus:outline-2", "focus:outline-offset", {
+}), Xe = ({ 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"
-}), Qe = ({ mode: e }) => E({
+}), He = ({ 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",
   "data-[state=on]:bg-surface-medium dark:data-[state=on]:bg-surface-lightest": e === "alt-system"
-}), Xe = ({ size: e }) => E({
+}), et = ({ size: e }) => w({
   "h-5 px-2": e === "small",
   "h-6 px-3": e === "medium",
   "h-7 px-4": e === "large"
-}), He = ({ mode: e }) => E(
-  me,
+}), tt = ({ mode: e }) => w(
+  ve,
   "px-1",
   "relative",
   "border-r",
@@ -576,26 +606,26 @@ const le = b.createContext({
     "border-surface-light dark:border-surface-darker": e === "system",
     "border-surface-darker dark:border-surface-light": e === "alt-system"
   }
-), et = ({
+), ot = ({
   focusMode: e,
   mode: t,
-  size: r
+  size: o
 }) => ({
-  wrapperClass: He({ mode: t }),
-  itemClass: E(
-    ve,
+  wrapperClass: tt({ mode: t }),
+  itemClass: w(
+    Ce,
     "flex items-center justify-center bg-transparent",
     "rounded-xs",
     "transition duration-200 ease",
-    Xe({ size: r }),
-    Je({ focusMode: e }),
-    Qe({ mode: t })
+    et({ size: o }),
+    Xe({ focusMode: e }),
+    He({ mode: t })
   )
-}), tt = ({
+}), rt = ({
   mode: e,
   className: t
-}) => E(
-  ge,
+}) => w(
+  me,
   "inline-flex p-1",
   "rounded-xs",
   {
@@ -605,40 +635,40 @@ const le = b.createContext({
     "bg-surface-darker text-copy-lighter dark:bg-surface-light dark:text-copy-dark": e === "alt-system"
   },
   t
-), ut = ({
+), at = ({
   children: e,
   value: t,
-  onValueChange: r,
-  disabled: o,
+  onValueChange: o,
+  disabled: r,
   mode: n = "system",
   focusMode: s = "system",
-  size: u = "medium",
-  defaultValue: c,
+  size: c = "medium",
+  defaultValue: u,
   className: i,
-  ...a
+  ...g
 }) => {
-  const g = tt({ mode: n, className: i }), d = { size: u, focusMode: s, mode: n };
-  return /* @__PURE__ */ f(le.Provider, { value: d, children: /* @__PURE__ */ f(
-    qe,
+  const a = rt({ mode: n, className: i }), d = { size: c, focusMode: s, mode: n };
+  return /* @__PURE__ */ f(ae.Provider, { value: d, children: /* @__PURE__ */ f(
+    Je,
     {
-      disabled: o,
-      className: g,
+      disabled: r,
+      className: a,
       value: t,
-      defaultValue: c,
-      onValueChange: r,
-      ...a,
+      defaultValue: u,
+      onValueChange: o,
+      ...g,
       type: "single",
       children: e
     }
   ) });
-}, lt = ({ value: e, disabled: t }) => {
-  const { size: r, focusMode: o, mode: n } = pe(le), { itemClass: s, wrapperClass: u } = et({
-    focusMode: o,
+}, it = ({ value: e, disabled: t }) => {
+  const { size: o, focusMode: r, mode: n } = ge(ae), { itemClass: s, wrapperClass: c } = ot({
+    focusMode: r,
     mode: n,
-    size: r
+    size: o
   });
-  return /* @__PURE__ */ f("div", { className: u, children: /* @__PURE__ */ f(
-    Ze,
+  return /* @__PURE__ */ f("div", { className: c, children: /* @__PURE__ */ f(
+    Qe,
     {
       disabled: t,
       className: s,
@@ -648,9 +678,9 @@ const le = b.createContext({
   ) });
 };
 export {
-  ge as TOGGLEGROUP_CLASSNAME,
-  ve as TOGGLEGROUP_ITEM_CLASSNAME,
-  me as TOGGLEGROUP_ITEM_WRAPPER_CLASSNAME,
-  ut as ToggleGroup,
-  lt as ToggleGroupItem
+  me as TOGGLEGROUP_CLASSNAME,
+  Ce as TOGGLEGROUP_ITEM_CLASSNAME,
+  ve as TOGGLEGROUP_ITEM_WRAPPER_CLASSNAME,
+  at as ToggleGroup,
+  it as ToggleGroupItem
 };

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.2
+  @versini/ui-togglegroup v4.0.4
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_TOGGLEGROUP__ || (window.__VERSINI_UI_TOGGLEGROUP__ = {
-    version: "4.0.2",
-    buildTime: "04/12/2025 09:18 AM EDT",
+    version: "4.0.4",
+    buildTime: "06/20/2025 05:21 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.2",
+	"version": "4.0.4",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -39,16 +39,16 @@
 		"react-dom": "^18.3.1 || ^19.0.0"
 	},
 	"devDependencies": {
-		"@versini/ui-types": "5.0.2"
+		"@versini/ui-types": "5.0.4"
 	},
 	"dependencies": {
-		"@radix-ui/react-toggle-group": "1.1.3",
+		"@radix-ui/react-toggle-group": "1.1.10",
 		"@tailwindcss/typography": "0.5.16",
 		"clsx": "2.1.1",
-		"tailwindcss": "4.1.3"
+		"tailwindcss": "4.1.10"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "1bc09c4f0904bd8c01a22b1a32299fdd7598ae32"
+	"gitHead": "2fffae99315244f0662bdecbe45a89bc770f0f15"
 }