@purpurds/tabs 5.20.1 → 5.21.0

package/dist/tabs.es.js

@@ -1,8 +1,8 @@
 import { jsx as T, jsxs as ee } from "react/jsx-runtime";
 import * as me from "react";
-import E, { createContext as ne, useMemo as H, createElement as g, useContext as _e, useCallback as U, forwardRef as w, Children as P, isValidElement as K, cloneElement as se, Fragment as De, useLayoutEffect as qe, useEffect as N, useRef as R, useState as O, useReducer as Le } from "react";
-import { flushSync as Ue } from "react-dom";
-function Ve(e) {
+import E, { createContext as ne, useMemo as H, createElement as g, useContext as _e, useCallback as U, forwardRef as w, Children as P, isValidElement as K, cloneElement as se, Fragment as qe, useLayoutEffect as Le, useEffect as N, useRef as R, useState as O, useReducer as Ue } from "react";
+import { flushSync as Ve } from "react-dom";
+function Be(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
 var ge = { exports: {} };
@@ -41,8 +41,8 @@ var ge = { exports: {} };
     e.exports ? (n.default = n, e.exports = n) : window.classNames = n;
   })();
 })(ge);
-var Be = ge.exports;
-const Ge = /* @__PURE__ */ Ve(Be), je = {
+var Ge = ge.exports;
+const je = /* @__PURE__ */ Be(Ge), ke = {
   "purpur-icon": "_purpur-icon_8u1lq_1",
   "purpur-icon--xxs": "_purpur-icon--xxs_8u1lq_4",
   "purpur-icon--xs": "_purpur-icon--xs_8u1lq_8",
@@ -50,36 +50,36 @@ const Ge = /* @__PURE__ */ Ve(Be), je = {
   "purpur-icon--md": "_purpur-icon--md_8u1lq_16",
   "purpur-icon--lg": "_purpur-icon--lg_8u1lq_20",
   "purpur-icon--xl": "_purpur-icon--xl_8u1lq_24"
-}, ke = {
+}, ze = {
   name: "chevron-left",
   svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M16.175 3.905a.9.9 0 0 1-.08 1.27L8.36 12l7.736 6.825a.9.9 0 0 1-1.191 1.35l-8.5-7.5a.9.9 0 0 1 0-1.35l8.5-7.5a.9.9 0 0 1 1.27.08Z" clip-rule="evenodd"/></svg>',
   keywords: ["chevron-left"],
   category: "utility"
-}, ze = {
+}, Ke = {
   name: "chevron-right",
   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"
-}, Ke = Ge.bind(je), $e = "purpur-icon", We = "md", Ye = (e) => e.filter((t) => Object.keys(t).length >= 1).map((t) => `${t.name}="${t.value}"`).join(" "), Ze = ({ content: e = "", title: t } = {}) => {
+}, We = je.bind(ke), $e = "purpur-icon", Ye = "md", Ze = (e) => e.filter((t) => Object.keys(t).length >= 1).map((t) => `${t.name}="${t.value}"`).join(" "), He = ({ 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 ${Ye(n)}>${o}${e}</svg>`;
-}, He = (e) => e.replace(/<(\/?)svg([^>]*)>/g, "").trim(), Xe = ({
+  return `<svg ${Ze(n)}>${o}${e}</svg>`;
+}, Xe = (e) => e.replace(/<(\/?)svg([^>]*)>/g, "").trim(), he = ({
   ["data-testid"]: e,
   svg: t,
   allyTitle: n,
   className: o,
-  size: s = We,
+  size: s = Ye,
   ...r
 }) => {
-  const c = Ze({
-    content: He(t.svg),
+  const c = He({
+    content: Xe(t.svg),
     title: n
-  }), a = Ke(o, $e, `${$e}--${s}`);
+  }), a = We(o, $e, `${$e}--${s}`);
   return /* @__PURE__ */ T(
     "span",
     {
@@ -91,6 +91,7 @@ const Ge = /* @__PURE__ */ Ve(Be), je = {
     }
   );
 };
+he.displayName = "Icon";
 function C() {
   return C = Object.assign ? Object.assign.bind() : function(e) {
     for (var t = 1; t < arguments.length; t++) {
@@ -189,13 +190,13 @@ function Je(...e) {
 function Qe(e, t) {
   typeof e == "function" ? e(t) : e != null && (e.current = t);
 }
-function he(...e) {
+function xe(...e) {
   return (t) => e.forEach(
     (n) => Qe(n, t)
   );
 }
 function X(...e) {
-  return U(he(...e), e);
+  return U(xe(...e), e);
 }
 const J = /* @__PURE__ */ w((e, t) => {
   const { children: n, ...o } = e, s = P.toArray(n), r = s.find(tt);
@@ -214,11 +215,11 @@ const re = /* @__PURE__ */ w((e, t) => {
   const { children: n, ...o } = e;
   return /* @__PURE__ */ K(n) ? /* @__PURE__ */ se(n, {
     ...nt(o, n.props),
-    ref: t ? he(t, n.ref) : n.ref
+    ref: t ? xe(t, n.ref) : n.ref
   }) : P.count(n) > 1 ? P.only(null) : null;
 });
 re.displayName = "SlotClone";
-const et = ({ children: e }) => /* @__PURE__ */ g(De, null, e);
+const et = ({ children: e }) => /* @__PURE__ */ g(qe, null, e);
 function tt(e) {
   return /* @__PURE__ */ K(e) && e.type === et;
 }
@@ -295,11 +296,11 @@ function rt(e) {
     o
   ];
 }
-const oe = globalThis != null && globalThis.document ? qe : () => {
+const oe = globalThis != null && globalThis.document ? Le : () => {
 }, ot = me.useId || (() => {
 });
 let ct = 0;
-function xe(e) {
+function Ie(e) {
   const [t, n] = me.useState(ot());
   return oe(() => {
     e || n(
@@ -352,7 +353,7 @@ function ie(e) {
     []
   );
 }
-function Ie({ prop: e, defaultProp: t, onChange: n = () => {
+function Ce({ prop: e, defaultProp: t, onChange: n = () => {
 } }) {
   const [o, s] = at({
     defaultProp: t,
@@ -384,14 +385,14 @@ function at({ defaultProp: e, onChange: t }) {
   ]), n;
 }
 const it = /* @__PURE__ */ ne(void 0);
-function Ce(e) {
+function ye(e) {
   const t = _e(it);
   return e || t || "ltr";
 }
 const te = "rovingFocusGroup.onEntryFocus", ut = {
   bubbles: !1,
   cancelable: !0
-}, ue = "RovingFocusGroup", [ce, ye, lt] = rt(ue), [dt, Se] = ae(ue, [
+}, ue = "RovingFocusGroup", [ce, Se, lt] = rt(ue), [dt, we] = ae(ue, [
   lt
 ]), [ft, pt] = dt(ue), bt = /* @__PURE__ */ w((e, t) => /* @__PURE__ */ g(ce.Provider, {
   scope: e.__scopeRovingFocusGroup
@@ -400,11 +401,11 @@ const te = "rovingFocusGroup.onEntryFocus", ut = {
 }, /* @__PURE__ */ g($t, C({}, e, {
   ref: t
 }))))), $t = /* @__PURE__ */ w((e, t) => {
-  const { __scopeRovingFocusGroup: n, orientation: o, loop: s = !1, dir: r, currentTabStopId: c, defaultCurrentTabStopId: a, onCurrentTabStopIdChange: u, onEntryFocus: i, ...p } = e, d = R(null), v = X(t, d), m = Ce(r), [f = null, h] = Ie({
+  const { __scopeRovingFocusGroup: n, orientation: o, loop: s = !1, dir: r, currentTabStopId: c, defaultCurrentTabStopId: a, onCurrentTabStopIdChange: u, onEntryFocus: i, ...p } = e, d = R(null), v = X(t, d), m = ye(r), [f = null, h] = Ce({
     prop: c,
     defaultProp: a,
     onChange: u
-  }), [$, b] = O(!1), _ = ie(i), D = ye(n), y = R(!1), [j, V] = O(0);
+  }), [$, b] = O(!1), _ = ie(i), D = Se(n), y = R(!1), [j, V] = O(0);
   return N(() => {
     const x = d.current;
     if (x)
@@ -469,7 +470,7 @@ const te = "rovingFocusGroup.onEntryFocus", ut = {
           ].filter(Boolean).map(
             (l) => l.ref.current
           );
-          we(Y);
+          Te(Y);
         }
       }
       y.current = !1;
@@ -480,7 +481,7 @@ const te = "rovingFocusGroup.onEntryFocus", ut = {
     )
   })));
 }), vt = "RovingFocusGroupItem", mt = /* @__PURE__ */ w((e, t) => {
-  const { __scopeRovingFocusGroup: n, focusable: o = !0, active: s = !1, tabStopId: r, ...c } = e, a = xe(), u = r || a, i = pt(vt, n), p = i.currentTabStopId === u, d = ye(n), { onFocusableItemAdd: v, onFocusableItemRemove: m } = i;
+  const { __scopeRovingFocusGroup: n, focusable: o = !0, active: s = !1, tabStopId: r, ...c } = e, a = Ie(), u = r || a, i = pt(vt, n), p = i.currentTabStopId === u, d = Se(n), { onFocusableItemAdd: v, onFocusableItemRemove: m } = i;
   return N(() => {
     if (o)
       return v(), () => m();
@@ -526,7 +527,7 @@ const te = "rovingFocusGroup.onEntryFocus", ut = {
           b = i.loop ? xt(b, _ + 1) : b.slice(_ + 1);
         }
         setTimeout(
-          () => we(b)
+          () => Te(b)
         );
       }
     })
@@ -555,7 +556,7 @@ function ht(e, t, n) {
   ].includes(o)))
     return _t[o];
 }
-function we(e) {
+function Te(e) {
   const t = document.activeElement;
   for (const n of e)
     if (n === t || (n.focus(), document.activeElement !== t)) return;
@@ -567,12 +568,12 @@ function xt(e, t) {
 }
 const It = bt, Ct = mt;
 function yt(e, t) {
-  return Le((n, o) => {
+  return Ue((n, o) => {
     const s = t[n][o];
     return s ?? n;
   }, e);
 }
-const Te = (e) => {
+const Ne = (e) => {
   const { present: t, children: n } = e, o = St(t), s = typeof n == "function" ? n({
     present: o.isPresent
   }) : P.only(n), r = X(o.ref, s.ref);
@@ -580,7 +581,7 @@ const Te = (e) => {
     ref: r
   }) : null;
 };
-Te.displayName = "Presence";
+Ne.displayName = "Presence";
 function St(e) {
   const [t, n] = O(), o = R({}), s = R(e), r = R("none"), c = e ? "mounted" : "unmounted", [a, u] = yt(c, {
     mounted: {
@@ -613,7 +614,7 @@ function St(e) {
     if (t) {
       const i = (d) => {
         const m = Z(o.current).includes(d.animationName);
-        d.target === t && m && Ue(
+        d.target === t && m && Ve(
           () => u("ANIMATION_END")
         );
       }, p = (d) => {
@@ -640,17 +641,17 @@ function St(e) {
 function Z(e) {
   return (e == null ? void 0 : e.animationName) || "none";
 }
-const Ne = "Tabs", [wt, nn] = ae(Ne, [
-  Se
-]), Ae = Se(), [Tt, le] = wt(Ne), Nt = /* @__PURE__ */ w((e, t) => {
-  const { __scopeTabs: n, value: o, onValueChange: s, defaultValue: r, orientation: c = "horizontal", dir: a, activationMode: u = "automatic", ...i } = e, p = Ce(a), [d, v] = Ie({
+const Ae = "Tabs", [wt, nn] = ae(Ae, [
+  we
+]), Ee = we(), [Tt, le] = wt(Ae), Nt = /* @__PURE__ */ w((e, t) => {
+  const { __scopeTabs: n, value: o, onValueChange: s, defaultValue: r, orientation: c = "horizontal", dir: a, activationMode: u = "automatic", ...i } = e, p = ye(a), [d, v] = Ce({
     prop: o,
     onChange: s,
     defaultProp: r
   });
   return /* @__PURE__ */ g(Tt, {
     scope: n,
-    baseId: xe(),
+    baseId: Ie(),
     value: d,
     onValueChange: v,
     orientation: c,
@@ -663,7 +664,7 @@ const Ne = "Tabs", [wt, nn] = ae(Ne, [
     ref: t
   })));
 }), At = "TabsList", Et = /* @__PURE__ */ w((e, t) => {
-  const { __scopeTabs: n, loop: o = !0, ...s } = e, r = le(At, n), c = Ae(n);
+  const { __scopeTabs: n, loop: o = !0, ...s } = e, r = le(At, n), c = Ee(n);
   return /* @__PURE__ */ g(It, C({
     asChild: !0
   }, c, {
@@ -677,7 +678,7 @@ const Ne = "Tabs", [wt, nn] = ae(Ne, [
     ref: t
   })));
 }), Pt = "TabsTrigger", Rt = /* @__PURE__ */ w((e, t) => {
-  const { __scopeTabs: n, value: o, disabled: s = !1, ...r } = e, c = le(Pt, n), a = Ae(n), u = Ee(c.baseId, o), i = Pe(c.baseId, o), p = o === c.value;
+  const { __scopeTabs: n, value: o, disabled: s = !1, ...r } = e, c = le(Pt, n), a = Ee(n), u = Pe(c.baseId, o), i = Re(c.baseId, o), p = o === c.value;
   return /* @__PURE__ */ g(Ct, C({
     asChild: !0
   }, a, {
@@ -709,14 +710,14 @@ const Ne = "Tabs", [wt, nn] = ae(Ne, [
     })
   })));
 }), Mt = "TabsContent", Ft = /* @__PURE__ */ w((e, t) => {
-  const { __scopeTabs: n, value: o, forceMount: s, children: r, ...c } = e, a = le(Mt, n), u = Ee(a.baseId, o), i = Pe(a.baseId, o), p = o === a.value, d = R(p);
+  const { __scopeTabs: n, value: o, forceMount: s, children: r, ...c } = e, a = le(Mt, n), u = Pe(a.baseId, o), i = Re(a.baseId, o), p = o === a.value, d = R(p);
   return N(() => {
     const v = requestAnimationFrame(
       () => d.current = !1
     );
     return () => cancelAnimationFrame(v);
   }, []), /* @__PURE__ */ g(
-    Te,
+    Ne,
     {
       present: s || p
     },
@@ -737,17 +738,17 @@ const Ne = "Tabs", [wt, nn] = ae(Ne, [
     }), v && r)
   );
 });
-function Ee(e, t) {
+function Pe(e, t) {
   return `${e}-trigger-${t}`;
 }
-function Pe(e, t) {
+function Re(e, t) {
   return `${e}-content-${t}`;
 }
 const Ot = Nt, Dt = Et, qt = Rt, Lt = Ft;
 function Ut(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var Re = { exports: {} };
+var Me = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
@@ -782,8 +783,8 @@ var Re = { exports: {} };
     }
     e.exports ? (n.default = n, e.exports = n) : window.classNames = n;
   })();
-})(Re);
-var Vt = Re.exports;
+})(Me);
+var Vt = Me.exports;
 const de = /* @__PURE__ */ Ut(Vt), Bt = {
   "purpur-tab-content": "_purpur-tab-content_1x2zs_1"
 }, Gt = de.bind(Bt), jt = "purpur-tab-content", kt = w(
@@ -896,7 +897,7 @@ const de = /* @__PURE__ */ Ut(Vt), Bt = {
       "aria-hidden": "true",
       tabIndex: -1,
       "data-testid": q("scroll-button"),
-      children: /* @__PURE__ */ T(Xe, { svg: l === "left" ? ke : ze, size: "md" })
+      children: /* @__PURE__ */ T(he, { svg: l === "left" ? ze : Ke, size: "md" })
     }
   );
   return N(() => (window.addEventListener("resize", z), () => {
@@ -910,13 +911,13 @@ const de = /* @__PURE__ */ Ut(Vt), Bt = {
         return;
       }
       M.forEach((A) => {
-        const be = Number(A.target.getAttribute("data-index")), Me = be === 0, Fe = be === $.length - 1;
-        d((Oe) => ({
-          ...Oe,
-          ...Me && {
+        const be = Number(A.target.getAttribute("data-index")), Fe = be === 0, Oe = be === $.length - 1;
+        d((De) => ({
+          ...De,
+          ...Fe && {
             [`${S}__wrapper--scroll-end`]: !A.isIntersecting
           },
-          ...Fe && {
+          ...Oe && {
             [`${S}__wrapper--scroll-start`]: !A.isIntersecting
           }
         }));