@purpurds/tabs 3.0.0

package/dist/tabs.es.js

@@ -0,0 +1,988 @@
+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) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+var be = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+(function(e) {
+  (function() {
+    var t = {}.hasOwnProperty;
+    function n() {
+      for (var r = "", c = 0; c < arguments.length; c++) {
+        var a = arguments[c];
+        a && (r = s(r, o.call(this, a)));
+      }
+      return r;
+    }
+    function o(r) {
+      if (typeof r == "string" || typeof r == "number")
+        return this && this[r] || r;
+      if (typeof r != "object")
+        return "";
+      if (Array.isArray(r))
+        return n.apply(this, r);
+      if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
+        return r.toString();
+      var c = "";
+      for (var a in r)
+        t.call(r, a) && r[a] && (c = s(c, this && this[a] || a));
+      return c;
+    }
+    function s(r, c) {
+      return c ? r ? r + " " + c : r + c : r;
+    }
+    e.exports ? (n.default = n, e.exports = n) : window.classNames = n;
+  })();
+})(be);
+var De = be.exports;
+const qe = /* @__PURE__ */ Fe(De), Le = {
+  "purpur-icon": "_purpur-icon_8u1lq_1",
+  "purpur-icon--xxs": "_purpur-icon--xxs_8u1lq_4",
+  "purpur-icon--xs": "_purpur-icon--xs_8u1lq_8",
+  "purpur-icon--sm": "_purpur-icon--sm_8u1lq_12",
+  "purpur-icon--md": "_purpur-icon--md_8u1lq_16",
+  "purpur-icon--lg": "_purpur-icon--lg_8u1lq_20",
+  "purpur-icon--xl": "_purpur-icon--xl_8u1lq_24"
+}, Ue = {
+  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"
+}, Ve = {
+  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"
+}, 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 } = {}) => {
+  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>`;
+}, Ke = (e) => e.replace(/<(\/?)svg([^>]*)>/g, "").trim(), ze = ({
+  ["data-testid"]: e,
+  svg: t,
+  allyTitle: n,
+  className: o = "",
+  size: s = je,
+  ...r
+}) => {
+  const c = Ge({
+    content: Ke(t.svg),
+    title: n
+  }), a = Be(o, le, `${le}--${s}`);
+  return /* @__PURE__ */ N(
+    "span",
+    {
+      "aria-label": n,
+      className: a,
+      "data-testid": e,
+      dangerouslySetInnerHTML: { __html: c },
+      ...r
+    }
+  );
+};
+function y() {
+  return y = Object.assign ? Object.assign.bind() : function(e) {
+    for (var t = 1; t < arguments.length; t++) {
+      var n = arguments[t];
+      for (var o in n)
+        Object.prototype.hasOwnProperty.call(n, o) && (e[o] = n[o]);
+    }
+    return e;
+  }, y.apply(this, arguments);
+}
+function O(e, t, { checkForDefaultPrevented: n = !0 } = {}) {
+  return function(s) {
+    if (e == null || e(s), n === !1 || !s.defaultPrevented)
+      return t == null ? void 0 : t(s);
+  };
+}
+function ce(e, t = []) {
+  let n = [];
+  function o(r, c) {
+    const a = /* @__PURE__ */ ee(c), u = n.length;
+    n = [
+      ...n,
+      c
+    ];
+    function i(l) {
+      const { scope: $, children: m, ...d } = l, b = ($ == null ? void 0 : $[e][u]) || a, _ = Y(
+        () => d,
+        Object.values(d)
+      );
+      return /* @__PURE__ */ g(b.Provider, {
+        value: _
+      }, m);
+    }
+    function f(l, $) {
+      const m = ($ == null ? void 0 : $[e][u]) || a, d = pe(m);
+      if (d)
+        return d;
+      if (c !== void 0)
+        return c;
+      throw new Error(`\`${l}\` must be used within \`${r}\``);
+    }
+    return i.displayName = r + "Provider", [
+      i,
+      f
+    ];
+  }
+  const s = () => {
+    const r = n.map((c) => /* @__PURE__ */ ee(c));
+    return function(a) {
+      const u = (a == null ? void 0 : a[e]) || r;
+      return Y(
+        () => ({
+          [`__scope${e}`]: {
+            ...a,
+            [e]: u
+          }
+        }),
+        [
+          a,
+          u
+        ]
+      );
+    };
+  };
+  return s.scopeName = e, [
+    o,
+    We(s, ...t)
+  ];
+}
+function We(...e) {
+  const t = e[0];
+  if (e.length === 1)
+    return t;
+  const n = () => {
+    const o = e.map(
+      (s) => ({
+        useScope: s(),
+        scopeName: s.scopeName
+      })
+    );
+    return function(r) {
+      const c = o.reduce((a, { useScope: u, scopeName: i }) => {
+        const l = u(r)[`__scope${i}`];
+        return {
+          ...a,
+          ...l
+        };
+      }, {});
+      return Y(
+        () => ({
+          [`__scope${t.scopeName}`]: c
+        }),
+        [
+          c
+        ]
+      );
+    };
+  };
+  return n.scopeName = t.scopeName, n;
+}
+function Ye(e, t) {
+  typeof e == "function" ? e(t) : e != null && (e.current = t);
+}
+function $e(...e) {
+  return (t) => e.forEach(
+    (n) => Ye(n, t)
+  );
+}
+function Z(...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);
+  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);
+    return /* @__PURE__ */ g(te, y({}, o, {
+      ref: t
+    }), /* @__PURE__ */ G(c) ? /* @__PURE__ */ oe(c, void 0, a) : null);
+  }
+  return /* @__PURE__ */ g(te, y({}, o, {
+    ref: t
+  }), n);
+});
+H.displayName = "Slot";
+const te = /* @__PURE__ */ T((e, t) => {
+  const { children: n, ...o } = e;
+  return /* @__PURE__ */ G(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;
+}
+function Xe(e, t) {
+  const n = {
+    ...t
+  };
+  for (const o in t) {
+    const s = e[o], r = t[o];
+    /^on[A-Z]/.test(o) ? s && r ? n[o] = (...a) => {
+      r(...a), s(...a);
+    } : s && (n[o] = s) : o === "style" ? n[o] = {
+      ...s,
+      ...r
+    } : o === "className" && (n[o] = [
+      s,
+      r
+    ].filter(Boolean).join(" "));
+  }
+  return {
+    ...e,
+    ...n
+  };
+}
+function Je(e) {
+  const t = e + "CollectionProvider", [n, o] = ce(t), [s, r] = n(t, {
+    collectionRef: {
+      current: null
+    },
+    itemMap: /* @__PURE__ */ new Map()
+  }), c = (m) => {
+    const { scope: d, children: b } = m, _ = E.useRef(null), v = E.useRef(/* @__PURE__ */ new Map()).current;
+    return /* @__PURE__ */ E.createElement(s, {
+      scope: d,
+      itemMap: v,
+      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, {
+      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);
+    return E.useEffect(() => (A.itemMap.set(h, {
+      ref: h,
+      ...v
+    }), () => void A.itemMap.delete(h))), /* @__PURE__ */ E.createElement(H, {
+      [f]: "",
+      ref: F
+    }, _);
+  });
+  function $(m) {
+    const d = r(e + "CollectionConsumer", m);
+    return E.useCallback(() => {
+      const _ = d.collectionRef.current;
+      if (!_)
+        return [];
+      const v = Array.from(_.querySelectorAll(`[${f}]`));
+      return Array.from(d.itemMap.values()).sort(
+        (A, V) => v.indexOf(A.ref.current) - v.indexOf(V.ref.current)
+      );
+    }, [
+      d.collectionRef,
+      d.itemMap
+    ]);
+  }
+  return [
+    {
+      Provider: c,
+      Slot: u,
+      ItemSlot: l
+    },
+    $,
+    o
+  ];
+}
+const ne = globalThis != null && globalThis.document ? Re : () => {
+}, Qe = fe.useId || (() => {
+});
+let et = 0;
+function ve(e) {
+  const [t, n] = fe.useState(Qe());
+  return ne(() => {
+    e || n(
+      (o) => o ?? String(et++)
+    );
+  }, [
+    e
+  ]), e || (t ? `radix-${t}` : "");
+}
+const tt = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "span",
+  "svg",
+  "ul"
+], k = tt.reduce((e, t) => {
+  const n = /* @__PURE__ */ T((o, s) => {
+    const { asChild: r, ...c } = o, a = r ? H : t;
+    return R(() => {
+      window[Symbol.for("radix-ui")] = !0;
+    }, []), /* @__PURE__ */ g(a, y({}, c, {
+      ref: s
+    }));
+  });
+  return n.displayName = `Primitive.${t}`, {
+    ...e,
+    [t]: n
+  };
+}, {});
+function se(e) {
+  const t = M(e);
+  return R(() => {
+    t.current = e;
+  }), Y(
+    () => (...n) => {
+      var o;
+      return (o = t.current) === null || o === void 0 ? void 0 : o.call(t, ...n);
+    },
+    []
+  );
+}
+function me({ prop: e, defaultProp: t, onChange: n = () => {
+} }) {
+  const [o, s] = nt({
+    defaultProp: t,
+    onChange: n
+  }), r = e !== void 0, c = r ? e : o, a = se(n), u = U((i) => {
+    if (r) {
+      const l = typeof i == "function" ? i(e) : i;
+      l !== e && a(l);
+    } else
+      s(i);
+  }, [
+    r,
+    e,
+    s,
+    a
+  ]);
+  return [
+    c,
+    u
+  ];
+}
+function nt({ defaultProp: e, onChange: t }) {
+  const n = D(e), [o] = n, s = M(o), r = se(t);
+  return R(() => {
+    s.current !== o && (r(o), s.current = o);
+  }, [
+    o,
+    s,
+    r
+  ]), n;
+}
+const rt = /* @__PURE__ */ ee(void 0);
+function _e(e) {
+  const t = pe(rt);
+  return e || t || "ltr";
+}
+const Q = "rovingFocusGroup.onEntryFocus", ot = {
+  bubbles: !1,
+  cancelable: !0
+}, ae = "RovingFocusGroup", [re, he, ct] = Je(ae), [st, ge] = ce(ae, [
+  ct
+]), [at, it] = st(ae), ut = /* @__PURE__ */ T((e, t) => /* @__PURE__ */ g(re.Provider, {
+  scope: e.__scopeRovingFocusGroup
+}, /* @__PURE__ */ g(re.Slot, {
+  scope: e.__scopeRovingFocusGroup
+}, /* @__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({
+    prop: c,
+    defaultProp: a,
+    onChange: u
+  }), [_, v] = D(!1), h = se(i), F = he(n), A = M(!1), [V, B] = D(0);
+  return R(() => {
+    const x = l.current;
+    if (x)
+      return x.addEventListener(Q, h), () => x.removeEventListener(Q, h);
+  }, [
+    h
+  ]), /* @__PURE__ */ g(at, {
+    scope: n,
+    orientation: o,
+    dir: m,
+    loop: s,
+    currentTabStopId: d,
+    onItemFocus: U(
+      (x) => b(x),
+      [
+        b
+      ]
+    ),
+    onItemShiftTab: U(
+      () => v(!0),
+      []
+    ),
+    onFocusableItemAdd: U(
+      () => B(
+        (x) => x + 1
+      ),
+      []
+    ),
+    onFocusableItemRemove: U(
+      () => B(
+        (x) => x - 1
+      ),
+      []
+    )
+  }, /* @__PURE__ */ g(k.div, y({
+    tabIndex: _ || V === 0 ? -1 : 0,
+    "data-orientation": o
+  }, f, {
+    ref: $,
+    style: {
+      outline: "none",
+      ...e.style
+    },
+    onMouseDown: O(e.onMouseDown, () => {
+      A.current = !0;
+    }),
+    onFocus: O(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(
+            (C) => C.focusable
+          ), p = j.find(
+            (C) => C.active
+          ), I = j.find(
+            (C) => C.id === d
+          ), z = [
+            p,
+            I,
+            ...j
+          ].filter(Boolean).map(
+            (C) => C.ref.current
+          );
+          xe(z);
+        }
+      }
+      A.current = !1;
+    }),
+    onBlur: O(
+      e.onBlur,
+      () => v(!1)
+    )
+  })));
+}), dt = "RovingFocusGroupItem", ft = /* @__PURE__ */ T((e, t) => {
+  const { __scopeRovingFocusGroup: n, focusable: o = !0, active: s = !1, tabStopId: r, ...c } = e, a = ve(), u = r || a, i = it(dt, n), f = i.currentTabStopId === u, l = he(n), { onFocusableItemAdd: $, onFocusableItemRemove: m } = i;
+  return R(() => {
+    if (o)
+      return $(), () => m();
+  }, [
+    o,
+    $,
+    m
+  ]), /* @__PURE__ */ g(re.ItemSlot, {
+    scope: n,
+    id: u,
+    focusable: o,
+    active: s
+  }, /* @__PURE__ */ g(k.span, y({
+    tabIndex: f ? 0 : -1,
+    "data-orientation": i.orientation
+  }, c, {
+    ref: t,
+    onMouseDown: O(e.onMouseDown, (d) => {
+      o ? i.onItemFocus(u) : d.preventDefault();
+    }),
+    onFocus: O(
+      e.onFocus,
+      () => i.onItemFocus(u)
+    ),
+    onKeyDown: O(e.onKeyDown, (d) => {
+      if (d.key === "Tab" && d.shiftKey) {
+        i.onItemShiftTab();
+        return;
+      }
+      if (d.target !== d.currentTarget)
+        return;
+      const b = $t(d, i.orientation, i.dir);
+      if (b !== void 0) {
+        d.preventDefault();
+        let v = l().filter(
+          (h) => h.focusable
+        ).map(
+          (h) => h.ref.current
+        );
+        if (b === "last")
+          v.reverse();
+        else if (b === "prev" || b === "next") {
+          b === "prev" && v.reverse();
+          const h = v.indexOf(d.currentTarget);
+          v = i.loop ? vt(v, h + 1) : v.slice(h + 1);
+        }
+        setTimeout(
+          () => xe(v)
+        );
+      }
+    })
+  })));
+}), pt = {
+  ArrowLeft: "prev",
+  ArrowUp: "prev",
+  ArrowRight: "next",
+  ArrowDown: "next",
+  PageUp: "first",
+  Home: "first",
+  PageDown: "last",
+  End: "last"
+};
+function bt(e, t) {
+  return t !== "rtl" ? e : e === "ArrowLeft" ? "ArrowRight" : e === "ArrowRight" ? "ArrowLeft" : e;
+}
+function $t(e, t, n) {
+  const o = bt(e.key, n);
+  if (!(t === "vertical" && [
+    "ArrowLeft",
+    "ArrowRight"
+  ].includes(o)) && !(t === "horizontal" && [
+    "ArrowUp",
+    "ArrowDown"
+  ].includes(o)))
+    return pt[o];
+}
+function xe(e) {
+  const t = document.activeElement;
+  for (const n of e)
+    if (n === t || (n.focus(), document.activeElement !== t))
+      return;
+}
+function vt(e, t) {
+  return e.map(
+    (n, o) => e[(t + o) % e.length]
+  );
+}
+const mt = ut, _t = ft;
+function ht(e, t) {
+  return Me((n, o) => {
+    const s = t[n][o];
+    return s ?? n;
+  }, e);
+}
+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);
+  return typeof n == "function" || o.isPresent ? /* @__PURE__ */ oe(s, {
+    ref: r
+  }) : null;
+};
+Ce.displayName = "Presence";
+function gt(e) {
+  const [t, n] = D(), o = M({}), s = M(e), r = M("none"), c = e ? "mounted" : "unmounted", [a, u] = ht(c, {
+    mounted: {
+      UNMOUNT: "unmounted",
+      ANIMATION_OUT: "unmountSuspended"
+    },
+    unmountSuspended: {
+      MOUNT: "mounted",
+      ANIMATION_END: "unmounted"
+    },
+    unmounted: {
+      MOUNT: "mounted"
+    }
+  });
+  return R(() => {
+    const i = W(o.current);
+    r.current = a === "mounted" ? i : "none";
+  }, [
+    a
+  ]), ne(() => {
+    const i = o.current, f = s.current;
+    if (f !== e) {
+      const $ = r.current, m = W(i);
+      e ? u("MOUNT") : m === "none" || (i == null ? void 0 : i.display) === "none" ? u("UNMOUNT") : u(f && $ !== m ? "ANIMATION_OUT" : "UNMOUNT"), s.current = e;
+    }
+  }, [
+    e,
+    u
+  ]), ne(() => {
+    if (t) {
+      const i = (l) => {
+        const m = W(o.current).includes(l.animationName);
+        l.target === t && m && Oe(
+          () => u("ANIMATION_END")
+        );
+      }, f = (l) => {
+        l.target === t && (r.current = W(o.current));
+      };
+      return t.addEventListener("animationstart", f), t.addEventListener("animationcancel", i), t.addEventListener("animationend", i), () => {
+        t.removeEventListener("animationstart", f), t.removeEventListener("animationcancel", i), t.removeEventListener("animationend", i);
+      };
+    } else
+      u("ANIMATION_END");
+  }, [
+    t,
+    u
+  ]), {
+    isPresent: [
+      "mounted",
+      "unmountSuspended"
+    ].includes(a),
+    ref: U((i) => {
+      i && (o.current = getComputedStyle(i)), n(i);
+    }, [])
+  };
+}
+function W(e) {
+  return (e == null ? void 0 : e.animationName) || "none";
+}
+const Ie = "Tabs", [xt, Xt] = ce(Ie, [
+  ge
+]), ye = ge(), [Ct, ie] = xt(Ie), It = /* @__PURE__ */ T((e, t) => {
+  const { __scopeTabs: n, value: o, onValueChange: s, defaultValue: r, orientation: c = "horizontal", dir: a, activationMode: u = "automatic", ...i } = e, f = _e(a), [l, $] = me({
+    prop: o,
+    onChange: s,
+    defaultProp: r
+  });
+  return /* @__PURE__ */ g(Ct, {
+    scope: n,
+    baseId: ve(),
+    value: l,
+    onValueChange: $,
+    orientation: c,
+    dir: f,
+    activationMode: u
+  }, /* @__PURE__ */ g(k.div, y({
+    dir: f,
+    "data-orientation": c
+  }, i, {
+    ref: t
+  })));
+}), yt = "TabsList", St = /* @__PURE__ */ T((e, t) => {
+  const { __scopeTabs: n, loop: o = !0, ...s } = e, r = ie(yt, n), c = ye(n);
+  return /* @__PURE__ */ g(mt, y({
+    asChild: !0
+  }, c, {
+    orientation: r.orientation,
+    dir: r.dir,
+    loop: o
+  }), /* @__PURE__ */ g(k.div, y({
+    role: "tablist",
+    "aria-orientation": r.orientation
+  }, s, {
+    ref: t
+  })));
+}), wt = "TabsTrigger", Tt = /* @__PURE__ */ T((e, t) => {
+  const { __scopeTabs: n, value: o, disabled: s = !1, ...r } = e, c = ie(wt, n), a = ye(n), u = Se(c.baseId, o), i = we(c.baseId, o), f = o === c.value;
+  return /* @__PURE__ */ g(_t, y({
+    asChild: !0
+  }, a, {
+    focusable: !s,
+    active: f
+  }), /* @__PURE__ */ g(k.button, y({
+    type: "button",
+    role: "tab",
+    "aria-selected": f,
+    "aria-controls": i,
+    "data-state": f ? "active" : "inactive",
+    "data-disabled": s ? "" : void 0,
+    disabled: s,
+    id: u
+  }, r, {
+    ref: t,
+    onMouseDown: O(e.onMouseDown, (l) => {
+      !s && l.button === 0 && l.ctrlKey === !1 ? c.onValueChange(o) : l.preventDefault();
+    }),
+    onKeyDown: O(e.onKeyDown, (l) => {
+      [
+        " ",
+        "Enter"
+      ].includes(l.key) && c.onValueChange(o);
+    }),
+    onFocus: O(e.onFocus, () => {
+      const l = c.activationMode !== "manual";
+      !f && !s && l && c.onValueChange(o);
+    })
+  })));
+}), Nt = "TabsContent", At = /* @__PURE__ */ T((e, t) => {
+  const { __scopeTabs: n, value: o, forceMount: s, children: r, ...c } = e, a = ie(Nt, n), u = Se(a.baseId, o), i = we(a.baseId, o), f = o === a.value, l = M(f);
+  return R(() => {
+    const $ = requestAnimationFrame(
+      () => l.current = !1
+    );
+    return () => cancelAnimationFrame($);
+  }, []), /* @__PURE__ */ g(
+    Ce,
+    {
+      present: s || f
+    },
+    ({ present: $ }) => /* @__PURE__ */ g(k.div, y({
+      "data-state": f ? "active" : "inactive",
+      "data-orientation": a.orientation,
+      role: "tabpanel",
+      "aria-labelledby": u,
+      hidden: !$,
+      id: i,
+      tabIndex: 0
+    }, c, {
+      ref: t,
+      style: {
+        ...e.style,
+        animationDuration: l.current ? "0s" : void 0
+      }
+    }), $ && r)
+  );
+});
+function Se(e, t) {
+  return `${e}-trigger-${t}`;
+}
+function we(e, t) {
+  return `${e}-content-${t}`;
+}
+const Et = It, Pt = St, Rt = Tt, Mt = At;
+function Ot(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+var Te = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+(function(e) {
+  (function() {
+    var t = {}.hasOwnProperty;
+    function n() {
+      for (var r = "", c = 0; c < arguments.length; c++) {
+        var a = arguments[c];
+        a && (r = s(r, o.call(this, a)));
+      }
+      return r;
+    }
+    function o(r) {
+      if (typeof r == "string" || typeof r == "number")
+        return this && this[r] || r;
+      if (typeof r != "object")
+        return "";
+      if (Array.isArray(r))
+        return n.apply(this, r);
+      if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
+        return r.toString();
+      var c = "";
+      for (var a in r)
+        t.call(r, a) && r[a] && (c = s(c, this && this[a] || a));
+      return c;
+    }
+    function s(r, c) {
+      return c ? r ? r + " " + c : r + c : r;
+    }
+    e.exports ? (n.default = n, e.exports = n) : window.classNames = n;
+  })();
+})(Te);
+var Ft = Te.exports;
+const ue = /* @__PURE__ */ Ot(Ft), 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(
+    Mt,
+    {
+      ref: r,
+      className: qt([Lt, o]),
+      "data-testid": n,
+      value: t,
+      ...s,
+      children: e
+    }
+  )
+), Vt = (e) => !!e && G(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(
+  ({ index: e, tabId: t, variant: n, onFocus: o, "data-testid": s, children: r }, c) => /* @__PURE__ */ N(
+    Rt,
+    {
+      id: `${t}-trigger`,
+      className: jt([de, `${de}--${n}`]),
+      value: t,
+      "data-testid": s,
+      "data-index": e,
+      ref: c,
+      onFocus: o,
+      children: r
+    }
+  )
+), Gt = {
+  "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",
+  "purpur-tabs__scroll-button--right": "_purpur-tabs__scroll-button--right_1dpqy_66",
+  "purpur-tabs__wrapper--scroll-end": "_purpur-tabs__wrapper--scroll-end_1dpqy_69",
+  "purpur-tabs__wrapper--scroll-start": "_purpur-tabs__wrapper--scroll-start_1dpqy_72",
+  "purpur-tabs--line": "_purpur-tabs--line_1dpqy_75",
+  "purpur-tabs--line-negative": "_purpur-tabs--line-negative_1dpqy_75",
+  "purpur-tabs__selected-border": "_purpur-tabs__selected-border_1dpqy_83",
+  "purpur-tabs--contained": "_purpur-tabs--contained_1dpqy_103",
+  "purpur-tabs__list": "_purpur-tabs__list_1dpqy_103",
+  "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) => {
+  var u;
+  if (typeof (e == null ? void 0 : e.getBoundingClientRect) != "function" || typeof (t == null ? void 0 : t.scroll) != "function")
+    return;
+  const n = e.getBoundingClientRect(), o = t.getBoundingClientRect(), s = t.clientWidth, r = parseInt((u = getComputedStyle(t).borderLeftWidth) == null ? void 0 : u.split("px")[0], 10), c = o.left + (isNaN(r) ? 0 : r);
+  let a;
+  n.right > o.right && (a = n.left + t.scrollLeft, a = a + n.width - s + s * 0.1, a = a - c), n.left < o.left && (a = n.left + t.scrollLeft, a = a - s * 0.1, a = a - c), a !== void 0 && t.scroll({ left: a, behavior: "smooth" });
+}, Wt = ({
+  children: e,
+  variant: t = "line",
+  fullWidth: n = !1,
+  onChange: o,
+  className: s,
+  "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([
+    w,
+    `${w}--${t}`,
+    { [`${w}--fullWidth`]: n },
+    s
+  ]), V = P.map(b, ({ props: { tabId: p } }) => p);
+  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)
+      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));
+  }, K = (p) => {
+    if (_ != null && _.current) {
+      const { scrollLeft: I } = _.current, S = p === "left" ? -h : h;
+      _.current.scroll({ left: I + S, behavior: "smooth" });
+    }
+  }, j = ({ side: p }) => /* @__PURE__ */ N(
+    "button",
+    {
+      className: L(`${w}__scroll-button`, `${w}__scroll-button--${p}`),
+      onClick: () => K(p),
+      type: "button",
+      "aria-hidden": "true",
+      tabIndex: -1,
+      "data-testid": B("scroll-button"),
+      children: /* @__PURE__ */ N(ze, { svg: p === "left" ? Ue : Ve, size: "md" })
+    }
+  );
+  return R(() => (window.addEventListener("resize", x), () => {
+    window.removeEventListener("resize", x);
+  }), []), R(() => {
+    x();
+  }, [a, n, b, t]), R(() => {
+    const p = (S) => {
+      if (S.every((C) => C.isIntersecting) && S.length === b.length) {
+        f({});
+        return;
+      }
+      S.forEach((C) => {
+        const q = Number(C.target.getAttribute("data-index")), Ne = q === 0, Ae = q === b.length - 1;
+        f((Ee) => ({
+          ...Ee,
+          ...Ne && {
+            [`${w}__wrapper--scroll-end`]: !C.isIntersecting
+          },
+          ...Ae && {
+            [`${w}__wrapper--scroll-start`]: !C.isIntersecting
+          }
+        }));
+      });
+    }, I = new IntersectionObserver(p, {
+      threshold: [0.99],
+      root: _.current
+    });
+    return v.current.forEach((S) => I.observe(S)), () => {
+      v.current.forEach((S) => I.unobserve(S));
+    };
+  }, [b.length]), /* @__PURE__ */ N(
+    Et,
+    {
+      defaultValue: b[0].props.tabId,
+      onValueChange: X,
+      "data-testid": r,
+      className: A,
+      ...c,
+      children: /* @__PURE__ */ J("div", { className: L(`${w}__container`), children: [
+        /* @__PURE__ */ J("div", { className: L([`${w}__wrapper`, i]), children: [
+          /* @__PURE__ */ J(
+            Pt,
+            {
+              ref: (p) => {
+                _.current = p;
+              },
+              className: L(`${w}__list`),
+              children: [
+                P.map(b, (p, I) => {
+                  const { name: S, tabId: z, "data-testid": C } = p.props;
+                  return /* @__PURE__ */ N(
+                    kt,
+                    {
+                      "data-testid": B("header", C),
+                      index: I,
+                      tabId: z,
+                      ref: (q) => {
+                        q && (v.current[I] = q);
+                      },
+                      onFocus: (q) => {
+                        zt(q.target, _.current);
+                      },
+                      variant: t,
+                      children: S
+                    }
+                  );
+                }),
+                F && /* @__PURE__ */ N(
+                  "div",
+                  {
+                    className: L(`${w}__selected-border`),
+                    style: {
+                      width: m,
+                      transform: `translateX(${l}px)`
+                    },
+                    "data-testid": B("selected-border")
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ N(j, { side: "left" }),
+          /* @__PURE__ */ N(j, { side: "right" })
+        ] }),
+        /* @__PURE__ */ N("div", { className: L(`${w}__content-container`), children: P.map(b, (p) => p) })
+      ] })
+    }
+  );
+};
+Wt.Content = Ut;
+export {
+  Wt as Tabs,
+  Kt as createTabChangeDetailEvent,
+  Jt as tabsVariants
+};
+//# sourceMappingURL=tabs.es.js.map