@arcadeai/design-system 3.39.0 → 3.39.2

package/dist/components/ui/atoms/tabs.js

@@ -1,218 +1,524 @@
-import { jsx as n } from "react/jsx-runtime";
-import { cn as m } from "../../../lib/utils.js";
-import * as f from "react";
-import { c as T } from "../../../index-B695uy69.js";
-import { c as S } from "../../../index-DFZozV_h.js";
-import { R as k, I as E, c as h } from "../../../index-Dz8CQngS.js";
-import { P as F } from "../../../index-BaLuVb4t.js";
-import { P as p } from "../../../index-DLohNuco.js";
-import { u as $ } from "../../../index-ByaXH_ih.js";
-import { u as D } from "../../../index-437EL2iq.js";
-import { u as V } from "../../../index-Cv867SGx.js";
-var g = "Tabs", [G] = S(g, [
-  h
-]), C = h(), [L, x] = G(g), I = f.forwardRef(
-  (e, t) => {
-    const {
-      __scopeTabs: c,
-      value: a,
-      onValueChange: i,
-      defaultValue: d,
-      orientation: o = "horizontal",
-      dir: u,
-      activationMode: b = "automatic",
-      ...v
-    } = e, s = $(u), [r, l] = D({
-      prop: a,
-      onChange: i,
-      defaultProp: d ?? "",
-      caller: g
+"use client";
+import { jsx as V } from "react/jsx-runtime";
+import { c as it } from "../../../index-UgeK3A8s.js";
+import { cn as H } from "../../../lib/utils.js";
+import * as e from "react";
+import { u as st } from "../../../useControlled-Sx-_x7Sz.js";
+import { u as j } from "../../../useIsoLayoutEffect-DpJo20by.js";
+import { u as B } from "../../../useStableCallback-CudqoENs.js";
+import { f as tt, u as K, b as ut } from "../../../useRenderElement-DNB2vtF1.js";
+import { C as ct } from "../../../CompositeList-yq5K_yj6.js";
+import { u as lt } from "../../../DirectionContext-BSOheMwC.js";
+import { i as dt } from "../../../inertValue-kpZZDBEy.js";
+import { u as et } from "../../../useBaseUiId-C8Dq0BQq.js";
+import { T as G, u as ft, a as bt, t as pt } from "../../../useOpenChangeComplete-DkeH9FGJ.js";
+import { u as gt } from "../../../useCompositeListItem-CYQrZg5-.js";
+import { A as vt, C as mt } from "../../../CompositeRoot-Dy-5A-Je.js";
+import { o as J } from "../../../owner-rKN292Q9.js";
+import { u as ht } from "../../../useCompositeItem-D00ALGkT.js";
+import { c as Q, n as X } from "../../../createBaseUIEventDetails-CqidROtw.js";
+import { a as Tt } from "../../../useButton-JYPKQKj4.js";
+import { a as xt, c as Et } from "../../../element-DSo91iOi.js";
+const Y = /* @__PURE__ */ e.createContext(void 0);
+process.env.NODE_ENV !== "production" && (Y.displayName = "TabsRootContext");
+function W() {
+  const t = e.useContext(Y);
+  if (t === void 0)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: TabsRootContext is missing. Tabs parts must be placed within <Tabs.Root>." : tt(64));
+  return t;
+}
+let Rt = /* @__PURE__ */ (function(t) {
+  return t.activationDirection = "data-activation-direction", t.orientation = "data-orientation", t;
+})({});
+const $ = {
+  tabActivationDirection: (t) => ({
+    [Rt.activationDirection]: t
+  })
+}, nt = /* @__PURE__ */ e.forwardRef(function(o, u) {
+  const {
+    className: R,
+    defaultValue: n = 0,
+    onValueChange: c,
+    orientation: r = "horizontal",
+    render: T,
+    value: b,
+    ...x
+  } = o, I = lt(), P = Object.hasOwn(o, "defaultValue"), L = e.useRef([]), [w, l] = e.useState(() => /* @__PURE__ */ new Map()), [d, p] = st({
+    controlled: b,
+    default: n,
+    name: "Tabs",
+    state: "value"
+  }), S = b !== void 0, [i, E] = e.useState(() => /* @__PURE__ */ new Map()), [C, D] = e.useState("none"), M = B((a, f) => {
+    c?.(a, f), !f.isCanceled && (p(a), D(f.activationDirection));
+  }), v = B((a, f) => {
+    l((m) => {
+      if (m.get(a) === f)
+        return m;
+      const z = new Map(m);
+      return z.set(a, f), z;
     });
-    return /* @__PURE__ */ n(
-      L,
-      {
-        scope: c,
-        baseId: V(),
-        value: r,
-        onValueChange: l,
-        orientation: o,
-        dir: s,
-        activationMode: b,
-        children: /* @__PURE__ */ n(
-          p.div,
-          {
-            dir: s,
-            "data-orientation": o,
-            ...v,
-            ref: t
-          }
-        )
-      }
-    );
+  }), g = B((a, f) => {
+    l((m) => {
+      if (!m.has(a) || m.get(a) !== f)
+        return m;
+      const z = new Map(m);
+      return z.delete(a), z;
+    });
+  }), y = e.useCallback((a) => w.get(a), [w]), O = e.useCallback((a) => {
+    for (const f of i.values())
+      if (a === f?.value)
+        return f?.id;
+  }, [i]), k = e.useCallback((a) => {
+    if (a === void 0)
+      return null;
+    for (const [f, m] of i.entries())
+      if (m != null && a === (m.value ?? m.index))
+        return f;
+    return null;
+  }, [i]), A = e.useMemo(() => ({
+    direction: I,
+    getTabElementBySelectedValue: k,
+    getTabIdByPanelValue: O,
+    getTabPanelIdByValue: y,
+    onValueChange: M,
+    orientation: r,
+    registerMountedTabPanel: v,
+    setTabMap: E,
+    unregisterMountedTabPanel: g,
+    tabActivationDirection: C,
+    value: d
+  }), [I, k, O, y, M, r, v, E, g, C, d]), s = e.useMemo(() => {
+    for (const a of i.values())
+      if (a != null && a.value === d)
+        return a;
+  }, [i, d]), N = e.useMemo(() => {
+    for (const a of i.values())
+      if (a != null && !a.disabled)
+        return a.value;
+  }, [i]);
+  j(() => {
+    if (S || i.size === 0)
+      return;
+    const a = s?.disabled, f = s == null && d !== null;
+    if (P && a && d === n || !a && !f)
+      return;
+    const z = N ?? null;
+    d !== z && (p(z), D("none"));
+  }, [n, N, P, S, s, D, p, i, d]);
+  const F = K("div", o, {
+    state: {
+      orientation: r,
+      tabActivationDirection: C
+    },
+    ref: u,
+    props: x,
+    stateAttributesMapping: $
+  });
+  return /* @__PURE__ */ V(Y.Provider, {
+    value: A,
+    children: /* @__PURE__ */ V(ct, {
+      elementsRef: L,
+      children: F
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (nt.displayName = "TabsRoot");
+const q = /* @__PURE__ */ e.createContext(void 0);
+process.env.NODE_ENV !== "production" && (q.displayName = "TabsListContext");
+function Ct() {
+  const t = e.useContext(q);
+  if (t === void 0)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: TabsListContext is missing. TabsList parts must be placed within <Tabs.List>." : tt(65));
+  return t;
+}
+const at = /* @__PURE__ */ e.forwardRef(function(o, u) {
+  const {
+    className: R,
+    disabled: n = !1,
+    render: c,
+    value: r,
+    id: T,
+    nativeButton: b = !0,
+    ...x
+  } = o, {
+    value: I,
+    getTabPanelIdByValue: P,
+    orientation: L
+  } = W(), {
+    activateOnFocus: w,
+    highlightedTabIndex: l,
+    onTabActivation: d,
+    registerTabResizeObserverElement: p,
+    setHighlightedTabIndex: S,
+    tabsListElement: i
+  } = Ct(), E = et(T), C = e.useMemo(() => ({
+    disabled: n,
+    id: E,
+    value: r
+  }), [n, E, r]), {
+    compositeProps: D,
+    compositeRef: M,
+    index: v
+    // hook is used instead of the CompositeItem component
+    // because the index is needed for Tab internals
+  } = ht({
+    metadata: C
+  }), g = r === I, y = e.useRef(!1), O = e.useRef(null);
+  e.useEffect(() => {
+    const h = O.current;
+    if (h)
+      return p(h);
+  }, [p]), j(() => {
+    if (y.current) {
+      y.current = !1;
+      return;
+    }
+    if (!(g && v > -1 && l !== v))
+      return;
+    const h = i;
+    if (h != null) {
+      const U = xt(J(h));
+      if (U && Et(h, U))
+        return;
+    }
+    n || S(v);
+  }, [g, v, l, S, n, i]);
+  const {
+    getButtonProps: k,
+    buttonRef: A
+  } = Tt({
+    disabled: n,
+    native: b,
+    focusableWhenDisabled: !0
+  }), s = P(r), N = e.useRef(!1), _ = e.useRef(!1);
+  function F(h) {
+    g || n || d(r, Q(X, h.nativeEvent, void 0, {
+      activationDirection: "none"
+    }));
   }
-);
-I.displayName = g;
-var y = "TabsList", _ = f.forwardRef(
-  (e, t) => {
-    const { __scopeTabs: c, loop: a = !0, ...i } = e, d = x(y, c), o = C(c);
-    return /* @__PURE__ */ n(
-      k,
-      {
-        asChild: !0,
-        ...o,
-        orientation: d.orientation,
-        dir: d.dir,
-        loop: a,
-        children: /* @__PURE__ */ n(
-          p.div,
-          {
-            role: "tablist",
-            "aria-orientation": d.orientation,
-            ...i,
-            ref: t
-          }
-        )
-      }
-    );
+  function a(h) {
+    g || (v > -1 && !n && S(v), !n && w && (!N.current || // keyboard or touch focus
+    N.current && _.current) && d(r, Q(X, h.nativeEvent, void 0, {
+      activationDirection: "none"
+    })));
   }
-);
-_.displayName = y;
-var N = "TabsTrigger", R = f.forwardRef(
-  (e, t) => {
-    const { __scopeTabs: c, value: a, disabled: i = !1, ...d } = e, o = x(N, c), u = C(c), b = P(o.baseId, a), v = M(o.baseId, a), s = a === o.value;
-    return /* @__PURE__ */ n(
-      E,
-      {
-        asChild: !0,
-        ...u,
-        focusable: !i,
-        active: s,
-        children: /* @__PURE__ */ n(
-          p.button,
-          {
-            type: "button",
-            role: "tab",
-            "aria-selected": s,
-            "aria-controls": v,
-            "data-state": s ? "active" : "inactive",
-            "data-disabled": i ? "" : void 0,
-            disabled: i,
-            id: b,
-            ...d,
-            ref: t,
-            onMouseDown: T(e.onMouseDown, (r) => {
-              !i && r.button === 0 && r.ctrlKey === !1 ? o.onValueChange(a) : r.preventDefault();
-            }),
-            onKeyDown: T(e.onKeyDown, (r) => {
-              [" ", "Enter"].includes(r.key) && o.onValueChange(a);
-            }),
-            onFocus: T(e.onFocus, () => {
-              const r = o.activationMode !== "manual";
-              !s && !i && r && o.onValueChange(a);
-            })
-          }
-        )
-      }
-    );
+  function f(h) {
+    if (g || n)
+      return;
+    N.current = !0;
+    function U() {
+      N.current = !1, _.current = !1;
+    }
+    (!h.button || h.button === 0) && (_.current = !0, J(h.currentTarget).addEventListener("pointerup", U, {
+      once: !0
+    }));
   }
-);
-R.displayName = N;
-var w = "TabsContent", A = f.forwardRef(
-  (e, t) => {
-    const { __scopeTabs: c, value: a, forceMount: i, children: d, ...o } = e, u = x(w, c), b = P(u.baseId, a), v = M(u.baseId, a), s = a === u.value, r = f.useRef(s);
-    return f.useEffect(() => {
-      const l = requestAnimationFrame(() => r.current = !1);
-      return () => cancelAnimationFrame(l);
-    }, []), /* @__PURE__ */ n(F, { present: i || s, children: ({ present: l }) => /* @__PURE__ */ n(
-      p.div,
-      {
-        "data-state": s ? "active" : "inactive",
-        "data-orientation": u.orientation,
-        role: "tabpanel",
-        "aria-labelledby": b,
-        hidden: !l,
-        id: v,
-        tabIndex: 0,
-        ...o,
-        ref: t,
-        style: {
-          ...e.style,
-          animationDuration: r.current ? "0s" : void 0
-        },
-        children: l && d
+  return K("button", o, {
+    state: {
+      disabled: n,
+      active: g,
+      orientation: L
+    },
+    ref: [u, A, M, O],
+    props: [D, {
+      role: "tab",
+      "aria-controls": s,
+      "aria-selected": g,
+      id: E,
+      onClick: F,
+      onFocus: a,
+      onPointerDown: f,
+      [vt]: g ? "" : void 0,
+      onKeyDownCapture() {
+        y.current = !0;
       }
-    ) });
-  }
-);
-A.displayName = w;
-function P(e, t) {
-  return `${e}-trigger-${t}`;
+    }, x, k]
+  });
+});
+process.env.NODE_ENV !== "production" && (at.displayName = "TabsTab");
+let Mt = (function(t) {
+  return t.index = "data-index", t.activationDirection = "data-activation-direction", t.orientation = "data-orientation", t.hidden = "data-hidden", t[t.startingStyle = G.startingStyle] = "startingStyle", t[t.endingStyle = G.endingStyle] = "endingStyle", t;
+})({});
+const yt = {
+  ...$,
+  ...pt
+}, ot = /* @__PURE__ */ e.forwardRef(function(o, u) {
+  const {
+    className: R,
+    value: n,
+    render: c,
+    keepMounted: r = !1,
+    ...T
+  } = o, {
+    value: b,
+    getTabIdByPanelValue: x,
+    orientation: I,
+    tabActivationDirection: P,
+    registerMountedTabPanel: L,
+    unregisterMountedTabPanel: w
+  } = W(), l = et(), d = e.useMemo(() => ({
+    id: l,
+    value: n
+  }), [l, n]), {
+    ref: p,
+    index: S
+  } = gt({
+    metadata: d
+  }), i = n === b, {
+    mounted: E,
+    transitionStatus: C,
+    setMounted: D
+  } = ft(i), M = !E, v = x(n), g = {
+    hidden: M,
+    orientation: I,
+    tabActivationDirection: P,
+    transitionStatus: C
+  }, y = e.useRef(null), O = K("div", o, {
+    state: g,
+    ref: [u, p, y],
+    props: [{
+      "aria-labelledby": v,
+      hidden: M,
+      id: l,
+      role: "tabpanel",
+      tabIndex: i ? 0 : -1,
+      inert: dt(!i),
+      [Mt.index]: S
+    }, T],
+    stateAttributesMapping: yt
+  });
+  return bt({
+    open: i,
+    ref: y,
+    onComplete() {
+      i || D(!1);
+    }
+  }), j(() => {
+    if (!(M && !r) && l != null)
+      return L(n, l), () => {
+        w(n, l);
+      };
+  }, [M, r, n, l, L, w]), r || E ? O : null;
+});
+process.env.NODE_ENV !== "production" && (ot.displayName = "TabsPanel");
+const rt = /* @__PURE__ */ e.forwardRef(function(o, u) {
+  const {
+    activateOnFocus: R = !1,
+    className: n,
+    loopFocus: c = !0,
+    render: r,
+    ...T
+  } = o, {
+    getTabElementBySelectedValue: b,
+    onValueChange: x,
+    orientation: I,
+    value: P,
+    setTabMap: L,
+    tabActivationDirection: w
+  } = W(), [l, d] = e.useState(0), [p, S] = e.useState(null), i = e.useRef(/* @__PURE__ */ new Set()), E = e.useRef(/* @__PURE__ */ new Set()), C = e.useRef(null), D = B(() => {
+    i.current.forEach((s) => {
+      s();
+    });
+  });
+  e.useEffect(() => {
+    if (typeof ResizeObserver > "u")
+      return;
+    const s = new ResizeObserver(() => {
+      i.current.size && D();
+    });
+    return C.current = s, p && s.observe(p), E.current.forEach((N) => {
+      s.observe(N);
+    }), () => {
+      s.disconnect(), C.current = null;
+    };
+  }, [p, D]);
+  const M = B((s) => (i.current.add(s), () => {
+    i.current.delete(s);
+  })), v = B((s) => (E.current.add(s), C.current?.observe(s), () => {
+    E.current.delete(s), C.current?.unobserve(s);
+  })), g = Nt(
+    P,
+    // the old value
+    I,
+    p,
+    b
+  ), y = B((s, N) => {
+    if (s !== P) {
+      const _ = g(s);
+      N.activationDirection = _, x(s, N);
+    }
+  }), O = {
+    orientation: I,
+    tabActivationDirection: w
+  }, k = {
+    "aria-orientation": I === "vertical" ? "vertical" : void 0,
+    role: "tablist"
+  }, A = e.useMemo(() => ({
+    activateOnFocus: R,
+    highlightedTabIndex: l,
+    registerIndicatorUpdateListener: M,
+    registerTabResizeObserverElement: v,
+    onTabActivation: y,
+    setHighlightedTabIndex: d,
+    tabsListElement: p
+  }), [R, l, M, v, y, d, p]);
+  return /* @__PURE__ */ V(q.Provider, {
+    value: A,
+    children: /* @__PURE__ */ V(mt, {
+      render: r,
+      className: n,
+      state: O,
+      refs: [u, S],
+      props: [k, T],
+      stateAttributesMapping: $,
+      highlightedIndex: l,
+      enableHomeAndEndKeys: !0,
+      loopFocus: c,
+      orientation: I,
+      onHighlightedIndexChange: d,
+      onMapChange: L,
+      disabledIndices: ut
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (rt.displayName = "TabsList");
+function Z(t, o) {
+  const {
+    left: u,
+    top: R
+  } = t.getBoundingClientRect(), {
+    left: n,
+    top: c
+  } = o.getBoundingClientRect(), r = u - n, T = R - c;
+  return {
+    left: r,
+    top: T
+  };
 }
-function M(e, t) {
-  return `${e}-content-${t}`;
+function Nt(t, o, u, R) {
+  const [n, c] = e.useState(null);
+  return j(() => {
+    if (t == null || u == null) {
+      c(null);
+      return;
+    }
+    const r = R(t);
+    if (r == null) {
+      c(null);
+      return;
+    }
+    const {
+      left: T,
+      top: b
+    } = Z(r, u);
+    c(o === "horizontal" ? T : b);
+  }, [o, R, u, t]), e.useCallback((r) => {
+    if (r === t)
+      return "none";
+    if (r == null)
+      return c(null), "none";
+    if (r != null && u != null) {
+      const T = R(r);
+      if (T != null) {
+        const {
+          left: b,
+          top: x
+        } = Z(T, u);
+        if (n == null)
+          return c(o === "horizontal" ? b : x), "none";
+        if (o === "horizontal") {
+          if (b < n)
+            return c(b), "left";
+          if (b > n)
+            return c(b), "right";
+        } else {
+          if (x < n)
+            return c(x), "up";
+          if (x > n)
+            return c(x), "down";
+        }
+      }
+    }
+    return "none";
+  }, [R, o, n, u, t]);
 }
-var j = I, z = _, K = R, B = A;
-function ee({
-  className: e,
-  ...t
+function qt({
+  className: t,
+  orientation: o = "horizontal",
+  ...u
 }) {
-  return /* @__PURE__ */ n(
-    j,
+  return /* @__PURE__ */ V(
+    nt,
     {
-      className: m("flex flex-col gap-2", e),
+      className: H(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        t
+      ),
       "data-slot": "tabs",
-      ...t
+      orientation: o,
+      ...u
     }
   );
 }
-function te({
-  className: e,
-  ...t
+const It = it(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground data-[variant=line]:rounded-none group-data-[orientation=horizontal]/tabs:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Gt({
+  className: t,
+  variant: o = "default",
+  ...u
 }) {
-  return /* @__PURE__ */ n(
-    z,
+  return /* @__PURE__ */ V(
+    rt,
     {
-      className: m(
-        "inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground",
-        e
-      ),
+      className: H(It({ variant: o }), t),
       "data-slot": "tabs-list",
-      ...t
+      "data-variant": o,
+      ...u
     }
   );
 }
-function ae({
-  className: e,
-  ...t
-}) {
-  return /* @__PURE__ */ n(
-    K,
+function Jt({ className: t, ...o }) {
+  return /* @__PURE__ */ V(
+    at,
     {
-      className: m(
-        "inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 font-medium text-foreground text-sm transition-[color,box-shadow] focus-visible:border-ring focus-visible:outline-1 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:shadow-sm dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        e
+      className: H(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-1.5 py-0.5 font-medium text-foreground/60 text-sm transition-all hover:text-foreground focus-visible:border-ring focus-visible:outline-1 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        t
       ),
       "data-slot": "tabs-trigger",
-      ...t
+      ...o
     }
   );
 }
-function oe({
-  className: e,
-  ...t
-}) {
-  return /* @__PURE__ */ n(
-    B,
+function Qt({ className: t, ...o }) {
+  return /* @__PURE__ */ V(
+    ot,
     {
-      className: m("flex-1 outline-none", e),
+      className: H("flex-1 text-sm outline-none", t),
       "data-slot": "tabs-content",
-      ...t
+      ...o
     }
   );
 }
 export {
-  ee as Tabs,
-  oe as TabsContent,
-  te as TabsList,
-  ae as TabsTrigger
+  qt as Tabs,
+  Qt as TabsContent,
+  Gt as TabsList,
+  Jt as TabsTrigger,
+  It as tabsListVariants
 };