@purpurds/tabs 3.2.0 → 3.3.1

package/dist/tabs.es.js

@@ -1,8 +1,8 @@
 import { jsx as N, jsxs as J } from "react/jsx-runtime";
 import * as fe from "react";
-import E, { createContext as ee, useMemo as Y, createElement as g, useContext as pe, useCallback as U, forwardRef as T, Children as P, isValidElement as G, cloneElement as oe, Fragment as Pe, useLayoutEffect as Re, useEffect as R, useRef as M, useState as D, useReducer as Me } from "react";
-import { flushSync as Oe } from "react-dom";
-function Fe(e) {
+import E, { createContext as ee, useMemo as Y, createElement as g, useContext as pe, useCallback as U, forwardRef as T, Children as P, isValidElement as k, cloneElement as oe, Fragment as Pe, useLayoutEffect as Re, useEffect as R, useRef as M, useState as D, useReducer as Me } from "react";
+import { flushSync as Fe } from "react-dom";
+function Oe(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
 var be = { exports: {} };
@@ -42,7 +42,7 @@ var be = { exports: {} };
   })();
 })(be);
 var De = be.exports;
-const qe = /* @__PURE__ */ Fe(De), Le = {
+const qe = /* @__PURE__ */ Oe(De), Le = {
   "purpur-icon": "_purpur-icon_8u1lq_1",
   "purpur-icon--xxs": "_purpur-icon--xxs_8u1lq_4",
   "purpur-icon--xs": "_purpur-icon--xs_8u1lq_8",
@@ -60,14 +60,14 @@ const qe = /* @__PURE__ */ Fe(De), Le = {
   svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M7.809 3.924a.9.9 0 0 0 .115 1.267L16.094 12l-8.17 6.809a.9.9 0 0 0 1.152 1.382l9-7.5a.9.9 0 0 0 0-1.382l-9-7.5a.9.9 0 0 0-1.267.115Z" clip-rule="evenodd"/></svg>',
   keywords: ["chevron-right"],
   category: "utility"
-}, Be = qe.bind(Le), le = "purpur-icon", je = "md", ke = (e) => e.filter((t) => Object.keys(t).length >= 1).map((t) => `${t.name}="${t.value}"`).join(" "), Ge = ({ content: e = "", title: t } = {}) => {
+}, Be = qe.bind(Le), le = "purpur-icon", je = "md", Ge = (e) => e.filter((t) => Object.keys(t).length >= 1).map((t) => `${t.name}="${t.value}"`).join(" "), ke = ({ content: e = "", title: t } = {}) => {
   const n = [
     { name: "xmlns", value: "http://www.w3.org/2000/svg" },
     { name: "fill", value: "currentColor" },
     { name: "viewBox", value: "0 0 24 24" },
     t ? { name: "role", value: "img" } : { name: "aria-hidden", value: "true" }
   ], o = t ? `<title>${t}</title>` : "";
-  return `<svg ${ke(n)}>${o}${e}</svg>`;
+  return `<svg ${Ge(n)}>${o}${e}</svg>`;
 }, Ke = (e) => e.replace(/<(\/?)svg([^>]*)>/g, "").trim(), ze = ({
   ["data-testid"]: e,
   svg: t,
@@ -76,7 +76,7 @@ const qe = /* @__PURE__ */ Fe(De), Le = {
   size: s = je,
   ...r
 }) => {
-  const c = Ge({
+  const c = ke({
     content: Ke(t.svg),
     title: n
   }), a = Be(o, le, `${le}--${s}`);
@@ -101,7 +101,7 @@ function y() {
     return e;
   }, y.apply(this, arguments);
 }
-function O(e, t, { checkForDefaultPrevented: n = !0 } = {}) {
+function F(e, t, { checkForDefaultPrevented: n = !0 } = {}) {
   return function(s) {
     if (e == null || e(s), n === !1 || !s.defaultPrevented)
       return t == null ? void 0 : t(s);
@@ -199,33 +199,33 @@ function $e(...e) {
     (n) => Ye(n, t)
   );
 }
-function Z(...e) {
+function H(...e) {
   return U($e(...e), e);
 }
-const H = /* @__PURE__ */ T((e, t) => {
-  const { children: n, ...o } = e, s = P.toArray(n), r = s.find(He);
+const Z = /* @__PURE__ */ T((e, t) => {
+  const { children: n, ...o } = e, s = P.toArray(n), r = s.find(Ze);
   if (r) {
-    const c = r.props.children, a = s.map((u) => u === r ? P.count(c) > 1 ? P.only(null) : /* @__PURE__ */ G(c) ? c.props.children : null : u);
+    const c = r.props.children, a = s.map((u) => u === r ? P.count(c) > 1 ? P.only(null) : /* @__PURE__ */ k(c) ? c.props.children : null : u);
     return /* @__PURE__ */ g(te, y({}, o, {
       ref: t
-    }), /* @__PURE__ */ G(c) ? /* @__PURE__ */ oe(c, void 0, a) : null);
+    }), /* @__PURE__ */ k(c) ? /* @__PURE__ */ oe(c, void 0, a) : null);
   }
   return /* @__PURE__ */ g(te, y({}, o, {
     ref: t
   }), n);
 });
-H.displayName = "Slot";
+Z.displayName = "Slot";
 const te = /* @__PURE__ */ T((e, t) => {
   const { children: n, ...o } = e;
-  return /* @__PURE__ */ G(n) ? /* @__PURE__ */ oe(n, {
+  return /* @__PURE__ */ k(n) ? /* @__PURE__ */ oe(n, {
     ...Xe(o, n.props),
     ref: t ? $e(t, n.ref) : n.ref
   }) : P.count(n) > 1 ? P.only(null) : null;
 });
 te.displayName = "SlotClone";
-const Ze = ({ children: e }) => /* @__PURE__ */ g(Pe, null, e);
-function He(e) {
-  return /* @__PURE__ */ G(e) && e.type === Ze;
+const He = ({ children: e }) => /* @__PURE__ */ g(Pe, null, e);
+function Ze(e) {
+  return /* @__PURE__ */ k(e) && e.type === He;
 }
 function Xe(e, t) {
   const n = {
@@ -262,18 +262,18 @@ function Je(e) {
       collectionRef: _
     }, b);
   }, a = e + "CollectionSlot", u = /* @__PURE__ */ E.forwardRef((m, d) => {
-    const { scope: b, children: _ } = m, v = r(a, b), h = Z(d, v.collectionRef);
-    return /* @__PURE__ */ E.createElement(H, {
+    const { scope: b, children: _ } = m, v = r(a, b), h = H(d, v.collectionRef);
+    return /* @__PURE__ */ E.createElement(Z, {
       ref: h
     }, _);
   }), i = e + "CollectionItemSlot", f = "data-radix-collection-item", l = /* @__PURE__ */ E.forwardRef((m, d) => {
-    const { scope: b, children: _, ...v } = m, h = E.useRef(null), F = Z(d, h), A = r(i, b);
+    const { scope: b, children: _, ...v } = m, h = E.useRef(null), O = H(d, h), A = r(i, b);
     return E.useEffect(() => (A.itemMap.set(h, {
       ref: h,
       ...v
-    }), () => void A.itemMap.delete(h))), /* @__PURE__ */ E.createElement(H, {
+    }), () => void A.itemMap.delete(h))), /* @__PURE__ */ E.createElement(Z, {
       [f]: "",
-      ref: F
+      ref: O
     }, _);
   });
   function $(m) {
@@ -332,9 +332,9 @@ const tt = [
   "span",
   "svg",
   "ul"
-], k = tt.reduce((e, t) => {
+], G = tt.reduce((e, t) => {
   const n = /* @__PURE__ */ T((o, s) => {
-    const { asChild: r, ...c } = o, a = r ? H : t;
+    const { asChild: r, ...c } = o, a = r ? Z : t;
     return R(() => {
       window[Symbol.for("radix-ui")] = !0;
     }, []), /* @__PURE__ */ g(a, y({}, c, {
@@ -407,11 +407,11 @@ const Q = "rovingFocusGroup.onEntryFocus", ot = {
 }, /* @__PURE__ */ g(lt, y({}, e, {
   ref: t
 }))))), lt = /* @__PURE__ */ T((e, t) => {
-  const { __scopeRovingFocusGroup: n, orientation: o, loop: s = !1, dir: r, currentTabStopId: c, defaultCurrentTabStopId: a, onCurrentTabStopIdChange: u, onEntryFocus: i, ...f } = e, l = M(null), $ = Z(t, l), m = _e(r), [d = null, b] = me({
+  const { __scopeRovingFocusGroup: n, orientation: o, loop: s = !1, dir: r, currentTabStopId: c, defaultCurrentTabStopId: a, onCurrentTabStopIdChange: u, onEntryFocus: i, ...f } = e, l = M(null), $ = H(t, l), m = _e(r), [d = null, b] = me({
     prop: c,
     defaultProp: a,
     onChange: u
-  }), [_, v] = D(!1), h = se(i), F = he(n), A = M(!1), [V, B] = D(0);
+  }), [_, v] = D(!1), h = se(i), O = he(n), A = M(!1), [V, B] = D(0);
   return R(() => {
     const x = l.current;
     if (x)
@@ -446,7 +446,7 @@ const Q = "rovingFocusGroup.onEntryFocus", ot = {
       ),
       []
     )
-  }, /* @__PURE__ */ g(k.div, y({
+  }, /* @__PURE__ */ g(G.div, y({
     tabIndex: _ || V === 0 ? -1 : 0,
     "data-orientation": o
   }, f, {
@@ -455,15 +455,15 @@ const Q = "rovingFocusGroup.onEntryFocus", ot = {
       outline: "none",
       ...e.style
     },
-    onMouseDown: O(e.onMouseDown, () => {
+    onMouseDown: F(e.onMouseDown, () => {
       A.current = !0;
     }),
-    onFocus: O(e.onFocus, (x) => {
+    onFocus: F(e.onFocus, (x) => {
       const X = !A.current;
       if (x.target === x.currentTarget && X && !_) {
         const K = new CustomEvent(Q, ot);
         if (x.currentTarget.dispatchEvent(K), !K.defaultPrevented) {
-          const j = F().filter(
+          const j = O().filter(
             (C) => C.focusable
           ), p = j.find(
             (C) => C.active
@@ -481,7 +481,7 @@ const Q = "rovingFocusGroup.onEntryFocus", ot = {
       }
       A.current = !1;
     }),
-    onBlur: O(
+    onBlur: F(
       e.onBlur,
       () => v(!1)
     )
@@ -500,19 +500,19 @@ const Q = "rovingFocusGroup.onEntryFocus", ot = {
     id: u,
     focusable: o,
     active: s
-  }, /* @__PURE__ */ g(k.span, y({
+  }, /* @__PURE__ */ g(G.span, y({
     tabIndex: f ? 0 : -1,
     "data-orientation": i.orientation
   }, c, {
     ref: t,
-    onMouseDown: O(e.onMouseDown, (d) => {
+    onMouseDown: F(e.onMouseDown, (d) => {
       o ? i.onItemFocus(u) : d.preventDefault();
     }),
-    onFocus: O(
+    onFocus: F(
       e.onFocus,
       () => i.onItemFocus(u)
     ),
-    onKeyDown: O(e.onKeyDown, (d) => {
+    onKeyDown: F(e.onKeyDown, (d) => {
       if (d.key === "Tab" && d.shiftKey) {
         i.onItemShiftTab();
         return;
@@ -585,7 +585,7 @@ function ht(e, t) {
 const Ce = (e) => {
   const { present: t, children: n } = e, o = gt(t), s = typeof n == "function" ? n({
     present: o.isPresent
-  }) : P.only(n), r = Z(o.ref, s.ref);
+  }) : P.only(n), r = H(o.ref, s.ref);
   return typeof n == "function" || o.isPresent ? /* @__PURE__ */ oe(s, {
     ref: r
   }) : null;
@@ -623,7 +623,7 @@ function gt(e) {
     if (t) {
       const i = (l) => {
         const m = W(o.current).includes(l.animationName);
-        l.target === t && m && Oe(
+        l.target === t && m && Fe(
           () => u("ANIMATION_END")
         );
       }, f = (l) => {
@@ -666,7 +666,7 @@ const Ie = "Tabs", [xt, Xt] = ce(Ie, [
     orientation: c,
     dir: f,
     activationMode: u
-  }, /* @__PURE__ */ g(k.div, y({
+  }, /* @__PURE__ */ g(G.div, y({
     dir: f,
     "data-orientation": c
   }, i, {
@@ -680,7 +680,7 @@ const Ie = "Tabs", [xt, Xt] = ce(Ie, [
     orientation: r.orientation,
     dir: r.dir,
     loop: o
-  }), /* @__PURE__ */ g(k.div, y({
+  }), /* @__PURE__ */ g(G.div, y({
     role: "tablist",
     "aria-orientation": r.orientation
   }, s, {
@@ -693,7 +693,7 @@ const Ie = "Tabs", [xt, Xt] = ce(Ie, [
   }, a, {
     focusable: !s,
     active: f
-  }), /* @__PURE__ */ g(k.button, y({
+  }), /* @__PURE__ */ g(G.button, y({
     type: "button",
     role: "tab",
     "aria-selected": f,
@@ -704,16 +704,16 @@ const Ie = "Tabs", [xt, Xt] = ce(Ie, [
     id: u
   }, r, {
     ref: t,
-    onMouseDown: O(e.onMouseDown, (l) => {
+    onMouseDown: F(e.onMouseDown, (l) => {
       !s && l.button === 0 && l.ctrlKey === !1 ? c.onValueChange(o) : l.preventDefault();
     }),
-    onKeyDown: O(e.onKeyDown, (l) => {
+    onKeyDown: F(e.onKeyDown, (l) => {
       [
         " ",
         "Enter"
       ].includes(l.key) && c.onValueChange(o);
     }),
-    onFocus: O(e.onFocus, () => {
+    onFocus: F(e.onFocus, () => {
       const l = c.activationMode !== "manual";
       !f && !s && l && c.onValueChange(o);
     })
@@ -730,7 +730,7 @@ const Ie = "Tabs", [xt, Xt] = ce(Ie, [
     {
       present: s || f
     },
-    ({ present: $ }) => /* @__PURE__ */ g(k.div, y({
+    ({ present: $ }) => /* @__PURE__ */ g(G.div, y({
       "data-state": f ? "active" : "inactive",
       "data-orientation": a.orientation,
       role: "tabpanel",
@@ -754,7 +754,7 @@ function we(e, t) {
   return `${e}-content-${t}`;
 }
 const Et = It, Pt = St, Rt = Tt, Mt = At;
-function Ot(e) {
+function Ft(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
 var Te = { exports: {} };
@@ -793,8 +793,8 @@ var Te = { exports: {} };
     e.exports ? (n.default = n, e.exports = n) : window.classNames = n;
   })();
 })(Te);
-var Ft = Te.exports;
-const ue = /* @__PURE__ */ Ot(Ft), Dt = {
+var Ot = Te.exports;
+const ue = /* @__PURE__ */ Ft(Ot), Dt = {
   "purpur-tab-content": "_purpur-tab-content_rbfjg_1"
 }, qt = ue.bind(Dt), Lt = "purpur-tab-content", Ut = T(
   ({ children: e, tabId: t, "data-testid": n, className: o, ...s }, r) => /* @__PURE__ */ N(
@@ -808,13 +808,13 @@ const ue = /* @__PURE__ */ Ot(Ft), Dt = {
       children: e
     }
   )
-), Vt = (e) => !!e && G(e) && !!e.props.name && !!e.props.tabId, Bt = {
+), Vt = (e) => !!e && k(e) && !!e.props.name && !!e.props.tabId, Bt = {
   "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"
-}, jt = ue.bind(Bt), de = "purpur-tab-header", kt = T(
+}, jt = ue.bind(Bt), de = "purpur-tab-header", Gt = T(
   ({ index: e, tabId: t, variant: n, onFocus: o, "data-testid": s, children: r }, c) => /* @__PURE__ */ N(
     Rt,
     {
@@ -828,7 +828,7 @@ const ue = /* @__PURE__ */ Ot(Ft), Dt = {
       children: r
     }
   )
-), Gt = {
+), kt = {
   "purpur-tabs__wrapper": "_purpur-tabs__wrapper_1dpqy_1",
   "purpur-tabs__scroll-button": "_purpur-tabs__scroll-button_1dpqy_9",
   "purpur-tabs__scroll-button--left": "_purpur-tabs__scroll-button--left_1dpqy_63",
@@ -843,7 +843,7 @@ const ue = /* @__PURE__ */ Ot(Ft), Dt = {
   "purpur-tabs--contained-negative": "_purpur-tabs--contained-negative_1dpqy_103",
   "purpur-tabs__content-container": "_purpur-tabs__content-container_1dpqy_106",
   "purpur-tabs--fullWidth": "_purpur-tabs--fullWidth_1dpqy_115"
-}, Jt = ["line", "line-negative", "contained", "contained-negative"], Kt = (e) => new CustomEvent("tabChangeDetail", { detail: { value: e } }), L = ue.bind(Gt), w = "purpur-tabs", zt = (e, t) => {
+}, Jt = ["line", "line-negative", "contained", "contained-negative"], Kt = (e) => new CustomEvent("tabChangeDetail", { detail: { value: e } }), L = ue.bind(kt), w = "purpur-tabs", zt = (e, t) => {
   var u;
   if (typeof (e == null ? void 0 : e.getBoundingClientRect) != "function" || typeof (t == null ? void 0 : t.scroll) != "function")
     return;
@@ -859,7 +859,7 @@ const ue = /* @__PURE__ */ Ot(Ft), Dt = {
   "data-testid": r,
   ...c
 }) => {
-  const [a, u] = D(0), [i, f] = D({}), [l, $] = D(0), [m, d] = D(0), b = P.toArray(e).filter(Vt), _ = M(), v = M(new Array(b.length)), h = 200, F = t === "line" || t === "line-negative", A = L([
+  const [a, u] = D(0), [i, f] = D({}), [l, $] = D(0), [m, d] = D(0), b = P.toArray(e).filter(Vt), _ = M(), v = M(new Array(b.length)), h = 200, O = t === "line" || t === "line-negative", A = L([
     w,
     `${w}--${t}`,
     { [`${w}--fullWidth`]: n },
@@ -868,12 +868,12 @@ const ue = /* @__PURE__ */ Ot(Ft), Dt = {
   if (new Set(V).size !== V.length)
     throw new Error("tabId must be unique");
   const B = (p, I) => I || r ? `${I || r}-${p}` : void 0, x = () => {
-    if (!F)
+    if (!O)
       return;
     const p = v.current[a];
     $((p == null ? void 0 : p.offsetLeft) || 0), d((p == null ? void 0 : p.getBoundingClientRect().width) || 0);
   }, X = (p) => {
-    F && u(b.findIndex((I) => I.props.tabId === p)), o == null || o(Kt(p));
+    O && u(b.findIndex((I) => I.props.tabId === p)), o == null || o(Kt(p));
   }, K = (p) => {
     if (_ != null && _.current) {
       const { scrollLeft: I } = _.current, S = p === "left" ? -h : h;
@@ -941,7 +941,7 @@ const ue = /* @__PURE__ */ Ot(Ft), Dt = {
                 P.map(b, (p, I) => {
                   const { name: S, tabId: z, "data-testid": C } = p.props;
                   return /* @__PURE__ */ N(
-                    kt,
+                    Gt,
                     {
                       "data-testid": B("header", C),
                       index: I,
@@ -957,7 +957,7 @@ const ue = /* @__PURE__ */ Ot(Ft), Dt = {
                     }
                   );
                 }),
-                F && /* @__PURE__ */ N(
+                O && /* @__PURE__ */ N(
                   "div",
                   {
                     className: L(`${w}__selected-border`),