@purpurds/tabs 4.4.0 → 4.5.1

package/dist/tabs.es.js

@@ -1,6 +1,6 @@
 import { jsx as N, jsxs as Q } from "react/jsx-runtime";
 import * as be from "react";
-import A, { createContext as te, useMemo as Z, createElement as h, useContext as $e, useCallback as L, forwardRef as T, Children as E, isValidElement as K, cloneElement as ce, Fragment as Me, useLayoutEffect as Oe, useEffect as R, useRef as P, useState as O, useReducer as Fe } from "react";
+import A, { createContext as te, useMemo as Z, createElement as g, useContext as $e, useCallback as L, forwardRef as T, Children as E, isValidElement as K, cloneElement as ce, Fragment as Me, useLayoutEffect as Oe, useEffect as R, useRef as P, useState as O, useReducer as Fe } from "react";
 import { flushSync as De } from "react-dom";
 function qe(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
@@ -116,12 +116,12 @@ function se(e, t = []) {
       c
     ];
     function i(d) {
-      const { scope: b, children: v, ...l } = d, $ = (b == null ? void 0 : b[e][u]) || a, g = Z(
+      const { scope: b, children: v, ...l } = d, $ = (b == null ? void 0 : b[e][u]) || a, h = Z(
         () => l,
         Object.values(l)
       );
-      return /* @__PURE__ */ h($.Provider, {
-        value: g
+      return /* @__PURE__ */ g($.Provider, {
+        value: h
       }, v);
     }
     function f(d, b) {
@@ -206,11 +206,11 @@ const X = /* @__PURE__ */ T((e, t) => {
   const { children: n, ...o } = e, s = E.toArray(n), r = s.find(Je);
   if (r) {
     const c = r.props.children, a = s.map((u) => u === r ? E.count(c) > 1 ? E.only(null) : /* @__PURE__ */ K(c) ? c.props.children : null : u);
-    return /* @__PURE__ */ h(ne, y({}, o, {
+    return /* @__PURE__ */ g(ne, y({}, o, {
       ref: t
     }), /* @__PURE__ */ K(c) ? /* @__PURE__ */ ce(c, void 0, a) : null);
   }
-  return /* @__PURE__ */ h(ne, y({}, o, {
+  return /* @__PURE__ */ g(ne, y({}, o, {
     ref: t
   }), n);
 });
@@ -223,7 +223,7 @@ const ne = /* @__PURE__ */ T((e, t) => {
   }) : E.count(n) > 1 ? E.only(null) : null;
 });
 ne.displayName = "SlotClone";
-const Xe = ({ children: e }) => /* @__PURE__ */ h(Me, null, e);
+const Xe = ({ children: e }) => /* @__PURE__ */ g(Me, null, e);
 function Je(e) {
   return /* @__PURE__ */ K(e) && e.type === Xe;
 }
@@ -255,34 +255,34 @@ function et(e) {
     },
     itemMap: /* @__PURE__ */ new Map()
   }), c = (v) => {
-    const { scope: l, children: $ } = v, g = A.useRef(null), m = A.useRef(/* @__PURE__ */ new Map()).current;
+    const { scope: l, children: $ } = v, h = A.useRef(null), m = A.useRef(/* @__PURE__ */ new Map()).current;
     return /* @__PURE__ */ A.createElement(s, {
       scope: l,
       itemMap: m,
-      collectionRef: g
+      collectionRef: h
     }, $);
   }, a = e + "CollectionSlot", u = /* @__PURE__ */ A.forwardRef((v, l) => {
-    const { scope: $, children: g } = v, m = r(a, $), _ = H(l, m.collectionRef);
+    const { scope: $, children: h } = v, m = r(a, $), _ = H(l, m.collectionRef);
     return /* @__PURE__ */ A.createElement(X, {
       ref: _
-    }, g);
+    }, h);
   }), i = e + "CollectionItemSlot", f = "data-radix-collection-item", d = /* @__PURE__ */ A.forwardRef((v, l) => {
-    const { scope: $, children: g, ...m } = v, _ = A.useRef(null), U = H(l, _), S = r(i, $);
+    const { scope: $, children: h, ...m } = v, _ = A.useRef(null), U = H(l, _), S = r(i, $);
     return A.useEffect(() => (S.itemMap.set(_, {
       ref: _,
       ...m
     }), () => void S.itemMap.delete(_))), /* @__PURE__ */ A.createElement(X, {
       [f]: "",
       ref: U
-    }, g);
+    }, h);
   });
   function b(v) {
     const l = r(e + "CollectionConsumer", v);
     return A.useCallback(() => {
-      const g = l.collectionRef.current;
-      if (!g)
+      const h = l.collectionRef.current;
+      if (!h)
         return [];
-      const m = Array.from(g.querySelectorAll(`[${f}]`));
+      const m = Array.from(h.querySelectorAll(`[${f}]`));
       return Array.from(l.itemMap.values()).sort(
         (S, j) => m.indexOf(S.ref.current) - m.indexOf(j.ref.current)
       );
@@ -337,7 +337,7 @@ const rt = [
     const { asChild: r, ...c } = o, a = r ? X : t;
     return R(() => {
       window[Symbol.for("radix-ui")] = !0;
-    }, []), /* @__PURE__ */ h(a, y({}, c, {
+    }, []), /* @__PURE__ */ g(a, y({}, c, {
       ref: s
     }));
   });
@@ -358,7 +358,7 @@ function ae(e) {
     []
   );
 }
-function he({ prop: e, defaultProp: t, onChange: n = () => {
+function ge({ prop: e, defaultProp: t, onChange: n = () => {
 } }) {
   const [o, s] = ot({
     defaultProp: t,
@@ -391,41 +391,41 @@ function ot({ defaultProp: e, onChange: t }) {
   ]), n;
 }
 const ct = /* @__PURE__ */ te(void 0);
-function ge(e) {
+function he(e) {
   const t = $e(ct);
   return e || t || "ltr";
 }
 const ee = "rovingFocusGroup.onEntryFocus", st = {
   bubbles: !1,
   cancelable: !0
-}, ie = "RovingFocusGroup", [oe, xe, at] = et(ie), [it, Ce] = se(ie, [
+}, ie = "RovingFocusGroup", [oe, xe, at] = et(ie), [it, Ie] = se(ie, [
   at
-]), [ut, lt] = it(ie), dt = /* @__PURE__ */ T((e, t) => /* @__PURE__ */ h(oe.Provider, {
+]), [ut, lt] = it(ie), dt = /* @__PURE__ */ T((e, t) => /* @__PURE__ */ g(oe.Provider, {
   scope: e.__scopeRovingFocusGroup
-}, /* @__PURE__ */ h(oe.Slot, {
+}, /* @__PURE__ */ g(oe.Slot, {
   scope: e.__scopeRovingFocusGroup
-}, /* @__PURE__ */ h(ft, y({}, e, {
+}, /* @__PURE__ */ g(ft, y({}, e, {
   ref: t
 }))))), ft = /* @__PURE__ */ T((e, t) => {
-  const { __scopeRovingFocusGroup: n, orientation: o, loop: s = !1, dir: r, currentTabStopId: c, defaultCurrentTabStopId: a, onCurrentTabStopIdChange: u, onEntryFocus: i, ...f } = e, d = P(null), b = H(t, d), v = ge(r), [l = null, $] = he({
+  const { __scopeRovingFocusGroup: n, orientation: o, loop: s = !1, dir: r, currentTabStopId: c, defaultCurrentTabStopId: a, onCurrentTabStopIdChange: u, onEntryFocus: i, ...f } = e, d = P(null), b = H(t, d), v = he(r), [l = null, $] = ge({
     prop: c,
     defaultProp: a,
     onChange: u
-  }), [g, m] = O(!1), _ = ae(i), U = xe(n), S = P(!1), [j, G] = O(0);
+  }), [h, m] = O(!1), _ = ae(i), U = xe(n), S = P(!1), [j, G] = O(0);
   return R(() => {
-    const C = d.current;
-    if (C)
-      return C.addEventListener(ee, _), () => C.removeEventListener(ee, _);
+    const I = d.current;
+    if (I)
+      return I.addEventListener(ee, _), () => I.removeEventListener(ee, _);
   }, [
     _
-  ]), /* @__PURE__ */ h(ut, {
+  ]), /* @__PURE__ */ g(ut, {
     scope: n,
     orientation: o,
     dir: v,
     loop: s,
     currentTabStopId: l,
     onItemFocus: L(
-      (C) => $(C),
+      (I) => $(I),
       [
         $
       ]
@@ -436,18 +436,18 @@ const ee = "rovingFocusGroup.onEntryFocus", st = {
     ),
     onFocusableItemAdd: L(
       () => G(
-        (C) => C + 1
+        (I) => I + 1
       ),
       []
     ),
     onFocusableItemRemove: L(
       () => G(
-        (C) => C - 1
+        (I) => I - 1
       ),
       []
     )
-  }, /* @__PURE__ */ h(B.div, y({
-    tabIndex: g || j === 0 ? -1 : 0,
+  }, /* @__PURE__ */ g(B.div, y({
+    tabIndex: h || j === 0 ? -1 : 0,
     "data-orientation": o
   }, f, {
     ref: b,
@@ -458,25 +458,25 @@ const ee = "rovingFocusGroup.onEntryFocus", st = {
     onMouseDown: M(e.onMouseDown, () => {
       S.current = !0;
     }),
-    onFocus: M(e.onFocus, (C) => {
+    onFocus: M(e.onFocus, (I) => {
       const k = !S.current;
-      if (C.target === C.currentTarget && k && !g) {
+      if (I.target === I.currentTarget && k && !h) {
         const V = new CustomEvent(ee, st);
-        if (C.currentTarget.dispatchEvent(V), !V.defaultPrevented) {
+        if (I.currentTarget.dispatchEvent(V), !V.defaultPrevented) {
           const z = U().filter(
             (x) => x.focusable
           ), J = z.find(
             (x) => x.active
           ), W = z.find(
             (x) => x.id === l
-          ), I = [
+          ), C = [
             J,
             W,
             ...z
           ].filter(Boolean).map(
             (x) => x.ref.current
           );
-          Ie(I);
+          Ce(C);
         }
       }
       S.current = !1;
@@ -495,12 +495,12 @@ const ee = "rovingFocusGroup.onEntryFocus", st = {
     o,
     b,
     v
-  ]), /* @__PURE__ */ h(oe.ItemSlot, {
+  ]), /* @__PURE__ */ g(oe.ItemSlot, {
     scope: n,
     id: u,
     focusable: o,
     active: s
-  }, /* @__PURE__ */ h(B.span, y({
+  }, /* @__PURE__ */ g(B.span, y({
     tabIndex: f ? 0 : -1,
     "data-orientation": i.orientation
   }, c, {
@@ -535,7 +535,7 @@ const ee = "rovingFocusGroup.onEntryFocus", st = {
           m = i.loop ? _t(m, _ + 1) : m.slice(_ + 1);
         }
         setTimeout(
-          () => Ie(m)
+          () => Ce(m)
         );
       }
     })
@@ -564,7 +564,7 @@ function mt(e, t, n) {
   ].includes(o)))
     return $t[o];
 }
-function Ie(e) {
+function Ce(e) {
   const t = document.activeElement;
   for (const n of e)
     if (n === t || (n.focus(), document.activeElement !== t))
@@ -575,7 +575,7 @@ function _t(e, t) {
     (n, o) => e[(t + o) % e.length]
   );
 }
-const ht = dt, gt = bt;
+const gt = dt, ht = bt;
 function xt(e, t) {
   return Fe((n, o) => {
     const s = t[n][o];
@@ -583,7 +583,7 @@ function xt(e, t) {
   }, e);
 }
 const ye = (e) => {
-  const { present: t, children: n } = e, o = Ct(t), s = typeof n == "function" ? n({
+  const { present: t, children: n } = e, o = It(t), s = typeof n == "function" ? n({
     present: o.isPresent
   }) : E.only(n), r = H(o.ref, s.ref);
   return typeof n == "function" || o.isPresent ? /* @__PURE__ */ ce(s, {
@@ -591,7 +591,7 @@ const ye = (e) => {
   }) : null;
 };
 ye.displayName = "Presence";
-function Ct(e) {
+function It(e) {
   const [t, n] = O(), o = P({}), s = P(e), r = P("none"), c = e ? "mounted" : "unmounted", [a, u] = xt(c, {
     mounted: {
       UNMOUNT: "unmounted",
@@ -650,15 +650,15 @@ function Ct(e) {
 function Y(e) {
   return (e == null ? void 0 : e.animationName) || "none";
 }
-const Se = "Tabs", [It, Qt] = se(Se, [
-  Ce
-]), we = Ce(), [yt, ue] = It(Se), St = /* @__PURE__ */ T((e, t) => {
-  const { __scopeTabs: n, value: o, onValueChange: s, defaultValue: r, orientation: c = "horizontal", dir: a, activationMode: u = "automatic", ...i } = e, f = ge(a), [d, b] = he({
+const Se = "Tabs", [Ct, Qt] = se(Se, [
+  Ie
+]), we = Ie(), [yt, ue] = Ct(Se), St = /* @__PURE__ */ T((e, t) => {
+  const { __scopeTabs: n, value: o, onValueChange: s, defaultValue: r, orientation: c = "horizontal", dir: a, activationMode: u = "automatic", ...i } = e, f = he(a), [d, b] = ge({
     prop: o,
     onChange: s,
     defaultProp: r
   });
-  return /* @__PURE__ */ h(yt, {
+  return /* @__PURE__ */ g(yt, {
     scope: n,
     baseId: _e(),
     value: d,
@@ -666,7 +666,7 @@ const Se = "Tabs", [It, Qt] = se(Se, [
     orientation: c,
     dir: f,
     activationMode: u
-  }, /* @__PURE__ */ h(B.div, y({
+  }, /* @__PURE__ */ g(B.div, y({
     dir: f,
     "data-orientation": c
   }, i, {
@@ -674,13 +674,13 @@ const Se = "Tabs", [It, Qt] = se(Se, [
   })));
 }), wt = "TabsList", Tt = /* @__PURE__ */ T((e, t) => {
   const { __scopeTabs: n, loop: o = !0, ...s } = e, r = ue(wt, n), c = we(n);
-  return /* @__PURE__ */ h(ht, y({
+  return /* @__PURE__ */ g(gt, y({
     asChild: !0
   }, c, {
     orientation: r.orientation,
     dir: r.dir,
     loop: o
-  }), /* @__PURE__ */ h(B.div, y({
+  }), /* @__PURE__ */ g(B.div, y({
     role: "tablist",
     "aria-orientation": r.orientation
   }, s, {
@@ -688,12 +688,12 @@ const Se = "Tabs", [It, Qt] = se(Se, [
   })));
 }), Nt = "TabsTrigger", At = /* @__PURE__ */ T((e, t) => {
   const { __scopeTabs: n, value: o, disabled: s = !1, ...r } = e, c = ue(Nt, n), a = we(n), u = Te(c.baseId, o), i = Ne(c.baseId, o), f = o === c.value;
-  return /* @__PURE__ */ h(gt, y({
+  return /* @__PURE__ */ g(ht, y({
     asChild: !0
   }, a, {
     focusable: !s,
     active: f
-  }), /* @__PURE__ */ h(B.button, y({
+  }), /* @__PURE__ */ g(B.button, y({
     type: "button",
     role: "tab",
     "aria-selected": f,
@@ -725,12 +725,12 @@ const Se = "Tabs", [It, Qt] = se(Se, [
       () => d.current = !1
     );
     return () => cancelAnimationFrame(b);
-  }, []), /* @__PURE__ */ h(
+  }, []), /* @__PURE__ */ g(
     ye,
     {
       present: s || f
     },
-    ({ present: b }) => /* @__PURE__ */ h(B.div, y({
+    ({ present: b }) => /* @__PURE__ */ g(B.div, y({
       "data-state": f ? "active" : "inactive",
       "data-orientation": a.orientation,
       role: "tabpanel",
@@ -809,11 +809,11 @@ const le = /* @__PURE__ */ Dt(qt), Lt = {
     }
   )
 ), jt = (e) => !!e && K(e) && !!e.props.name && !!e.props.tabId, Gt = {
-  "purpur-tab-header": "_purpur-tab-header_1hk4f_1",
-  "purpur-tab-header--contained": "_purpur-tab-header--contained_1hk4f_32",
-  "purpur-tab-header--contained-negative": "_purpur-tab-header--contained-negative_1hk4f_32",
-  "purpur-tab-header--line": "_purpur-tab-header--line_1hk4f_35",
-  "purpur-tab-header--line-negative": "_purpur-tab-header--line-negative_1hk4f_47"
+  "purpur-tab-header": "_purpur-tab-header_ls5xt_1",
+  "purpur-tab-header--contained": "_purpur-tab-header--contained_ls5xt_32",
+  "purpur-tab-header--contained-negative": "_purpur-tab-header--contained-negative_ls5xt_32",
+  "purpur-tab-header--line": "_purpur-tab-header--line_ls5xt_35",
+  "purpur-tab-header--line-negative": "_purpur-tab-header--line-negative_ls5xt_47"
 }, kt = le.bind(Gt), pe = "purpur-tab-header", zt = T(
   ({ index: e, tabId: t, variant: n, onFocus: o, "data-testid": s, children: r }, c) => /* @__PURE__ */ N(
     Ot,
@@ -860,25 +860,25 @@ const le = /* @__PURE__ */ Dt(qt), Lt = {
   "data-testid": c,
   ...a
 }) => {
-  const [u, i] = O({}), [f, d] = O(0), [b, v] = O(0), l = E.toArray(e).filter(jt), $ = P(), g = P(new Array(l.length)), m = 200, _ = t === "line" || t === "line-negative", U = q([
+  const [u, i] = O({}), [f, d] = O(0), [b, v] = O(0), l = E.toArray(e).filter(jt), $ = P(), h = P(new Array(l.length)), m = 200, _ = t === "line" || t === "line-negative", U = q([
     w,
     `${w}--${t}`,
     { [`${w}--fullWidth`]: n },
     s
-  ]), S = E.map(l, ({ props: { tabId: p } }) => p), j = () => S.findIndex((p) => p === r) || 0, [G, C] = O(j);
+  ]), S = E.map(l, ({ props: { tabId: p } }) => p), j = () => S.findIndex((p) => p === r) || 0, [G, I] = O(j);
   if (new Set(S).size !== S.length)
     throw new Error("tabId must be unique");
-  const k = (p, I) => I || c ? `${I || c}-${p}` : void 0, V = () => {
+  const k = (p, C) => C || c ? `${C || c}-${p}` : void 0, V = () => {
     if (!_)
       return;
-    const p = g.current[G];
+    const p = h.current[G];
     d((p == null ? void 0 : p.offsetLeft) || 0), v((p == null ? void 0 : p.getBoundingClientRect().width) || 0);
   }, z = (p) => {
-    _ && C(l.findIndex((I) => I.props.tabId === p)), o == null || o(Wt(p));
+    _ && I(l.findIndex((C) => C.props.tabId === p)), o == null || o(Wt(p));
   }, J = (p) => {
     if ($ != null && $.current) {
-      const { scrollLeft: I } = $.current, x = p === "left" ? -m : m;
-      $.current.scroll({ left: I + x, behavior: "smooth" });
+      const { scrollLeft: C } = $.current, x = p === "left" ? -m : m;
+      $.current.scroll({ left: C + x, behavior: "smooth" });
     }
   }, W = ({ side: p }) => /* @__PURE__ */ N(
     "button",
@@ -914,17 +914,17 @@ const le = /* @__PURE__ */ Dt(qt), Lt = {
           }
         }));
       });
-    }, I = new IntersectionObserver(p, {
+    }, C = new IntersectionObserver(p, {
       threshold: [0.99],
       root: $.current
     });
-    return g.current.forEach((x) => I.observe(x)), () => {
-      g.current.forEach((x) => I.unobserve(x));
+    return h.current.forEach((x) => C.observe(x)), () => {
+      h.current.forEach((x) => C.unobserve(x));
     };
   }, [l.length]), /* @__PURE__ */ N(
     Pt,
     {
-      defaultValue: r,
+      defaultValue: r ?? l[0].props.tabId,
       onValueChange: z,
       "data-testid": c,
       className: U,
@@ -939,16 +939,16 @@ const le = /* @__PURE__ */ Dt(qt), Lt = {
               },
               className: q(`${w}__list`),
               children: [
-                E.map(l, (p, I) => {
+                E.map(l, (p, C) => {
                   const { name: x, tabId: de, "data-testid": F } = p.props;
                   return /* @__PURE__ */ N(
                     zt,
                     {
                       "data-testid": k("header", F),
-                      index: I,
+                      index: C,
                       tabId: de,
                       ref: (D) => {
-                        D && (g.current[I] = D);
+                        D && (h.current[C] = D);
                       },
                       onFocus: (D) => {
                         Yt(D.target, $.current);