vlite3 1.4.30 → 1.4.32

package/components/Tabes/Tabes.vue2.js

@@ -1,9 +1,12 @@
-import { defineComponent as Y, ref as d, watch as g, onMounted as Z, computed as v, openBlock as m, createElementBlock as z, normalizeClass as l, withDirectives as x, createVNode as y, vShow as h, createElementVNode as f, normalizeStyle as ee, createCommentVNode as j, Fragment as te, renderList as re, createBlock as M, resolveDynamicComponent as ae, mergeProps as ne, withCtx as oe, toDisplayString as se, nextTick as le } from "vue";
-import { useResizeObserver as T } from "@vueuse/core";
-import R from "../Icon.vue.js";
-import A from "../FadeOverlay/FadeOverlay.vue.js";
-import { $t as ie } from "../../utils/i18n.js";
-const ce = ["data-variant"], me = /* @__PURE__ */ Y({
+import { defineComponent as Ce, ref as h, computed as d, watch as p, onMounted as Ve, onBeforeUnmount as ze, openBlock as f, createElementBlock as $, normalizeClass as l, withDirectives as M, createVNode as y, vShow as L, createElementVNode as c, normalizeStyle as Se, createCommentVNode as E, Fragment as J, renderList as Be, unref as X, createBlock as A, withCtx as Y, toDisplayString as Z, withMemo as $e, resolveDynamicComponent as Me, mergeProps as Le, nextTick as Ae } from "vue";
+import { useResizeObserver as _ } from "@vueuse/core";
+import { getActiveMarkerKey as Oe, isMenuTab as ee, isTabActive as te } from "./tabes.utils.js";
+import { measureTabesMarkerGeometry as Re, toTabesLocalScrollDelta as ne } from "./TabesMarkerGeometry.js";
+import w from "../Icon.vue.js";
+import re from "../FadeOverlay/FadeOverlay.vue.js";
+import Fe from "../Dropdown/Dropdown.vue.js";
+import { $t as Ie } from "../../utils/i18n.js";
+const Ee = ["dir"], Te = ["data-variant"], je = ["aria-selected", "aria-expanded", "disabled"], Qe = /* @__PURE__ */ Ce({
   __name: "Tabes",
   props: {
     options: {},
@@ -13,95 +16,130 @@ const ce = ["data-variant"], me = /* @__PURE__ */ Y({
     block: { type: Boolean, default: !1 },
     textClass: {},
     wrap: { type: Boolean, default: !1 },
-    tabClass: {}
+    tabClass: {},
+    direction: { default: "ltr" }
   },
-  emits: ["update:modelValue", "change"],
-  setup(c, { emit: E }) {
-    const t = c, $ = E, b = d(null), i = d(null), p = d(/* @__PURE__ */ new Map()), w = d(!1), C = d(!1), o = () => {
-      if (!i.value) return;
-      const { scrollLeft: e, scrollWidth: a, clientWidth: r } = i.value;
-      w.value = e > 1, C.value = Math.ceil(e + r) < a - 1;
-    }, S = (e) => {
-      i.value && i.value.scrollBy({ left: e, behavior: "smooth" });
-    }, V = () => {
-      if (!i.value || !b.value) return;
-      const e = p.value.get(t.modelValue);
-      if (!e) return;
-      const a = i.value, r = e.getBoundingClientRect(), n = a.getBoundingClientRect(), s = 40;
-      r.left < n.left + s ? a.scrollBy({
-        left: r.left - n.left - s,
+  emits: ["update:modelValue", "change", "menu-select", "menu-open", "menu-close"],
+  setup(s, { emit: ae }) {
+    const n = s, m = ae, k = h(null), u = h(null), v = /* @__PURE__ */ new Map(), C = h(!1), V = h(!1);
+    let O = 0, T = 0, z = !1, S = !1, R = 0;
+    const j = () => {
+      if (!u.value) return;
+      const { scrollLeft: e, scrollWidth: r, clientWidth: t } = u.value, a = e > 1, o = Math.ceil(e + t) < r - 1;
+      C.value !== a && (C.value = a), V.value !== o && (V.value = o);
+    }, se = () => {
+      S || (S = !0, T = requestAnimationFrame(() => {
+        S = !1, j();
+      }));
+    }, q = (e) => {
+      u.value && u.value.scrollBy({ left: e, behavior: "smooth" });
+    }, D = d(() => Oe(n.options, n.modelValue)), oe = () => {
+      if (!u.value || !k.value) return;
+      const e = D.value;
+      if (e === void 0) return;
+      const r = v.get(e);
+      if (!r) return;
+      const t = u.value, a = r.getBoundingClientRect(), o = t.getBoundingClientRect(), g = 40;
+      a.left < o.left + g ? t.scrollBy({
+        left: ne(
+          t,
+          a.left - o.left - g
+        ),
         behavior: "smooth"
-      }) : r.right > n.right - s && a.scrollBy({
-        left: r.right - n.right + s,
+      }) : a.right > o.right - g && t.scrollBy({
+        left: ne(
+          t,
+          a.right - o.right + g
+        ),
         behavior: "smooth"
       });
-    };
-    T(i, o);
-    const O = (e, a) => {
-      e ? p.value.set(a, e) : p.value.delete(a);
-    }, k = d({
+    }, W = (e, r) => {
+      e instanceof HTMLElement ? v.set(r, e) : e && typeof e == "object" && "$el" in e && e.$el instanceof HTMLElement ? v.set(r, e.$el) : v.delete(r);
+    }, b = h({
       width: "0px",
       height: "0px",
       transform: "translate(0px, 0px)",
       opacity: 0
-    }), B = d(!1), u = async () => {
-      await le();
-      const e = b.value, a = p.value.get(t.modelValue);
-      if (!e || !a) {
-        k.value.opacity = 0;
+    }), F = h(!1), P = () => {
+      b.value.opacity !== 0 && (b.value = {
+        ...b.value,
+        opacity: 0
+      });
+    }, le = async () => {
+      await Ae();
+      const e = k.value, r = D.value, t = r !== void 0 ? v.get(r) : void 0;
+      if (!e || !t) {
+        P();
         return;
       }
-      const r = e.getBoundingClientRect(), n = a.getBoundingClientRect(), s = n.left - r.left, Q = n.top - r.top, U = n.width, X = n.height;
-      k.value = {
-        width: `${U}px`,
-        height: `${X}px`,
-        transform: `translate(${s}px, ${Q}px)`,
+      if (e.offsetWidth <= 0 || t.offsetWidth <= 0) {
+        P();
+        return;
+      }
+      const { width: a, height: o, left: g, top: ke } = Re(e, t), x = {
+        width: `${a}px`,
+        height: `${o}px`,
+        transform: `translate(${g}px, ${ke}px)`,
         opacity: 1
-      }, B.value || setTimeout(() => {
-        B.value = !0;
-      }, 50);
+      }, B = b.value;
+      B.width === x.width && B.height === x.height && B.transform === x.transform && B.opacity === x.opacity || (b.value = x, F.value || (cancelAnimationFrame(R), R = requestAnimationFrame(() => {
+        F.value = !0;
+      })));
     };
-    T(b, () => {
-      u(), o();
-    }), g(
-      () => t.modelValue,
-      async () => {
-        await u(), V();
-      }
-    ), g(
-      () => t.options,
-      async () => {
-        await u(), o();
-      },
-      { deep: !0 }
-    ), g(
-      () => t.size,
-      async () => {
-        await u(), o();
-      }
-    ), g(
-      () => t.block,
-      async () => {
-        await u(), o();
-      }
-    ), g(
-      () => t.wrap,
-      async () => {
-        await u(), o();
-      }
-    ), Z(async () => {
-      await u(), o(), setTimeout(o, 100), setTimeout(V, 100);
+    let I = !1;
+    const H = async (e) => {
+      await le(), j(), e?.ensureVisible && oe();
+    }, i = (e) => {
+      e?.ensureVisible && (I = !0), !z && (z = !0, cancelAnimationFrame(O), O = requestAnimationFrame(() => {
+        z = !1;
+        const r = I;
+        I = !1, H({ ensureVisible: r });
+      }));
+    };
+    _(u, () => i()), _(k, () => i()), p(
+      () => n.modelValue,
+      () => i({ ensureVisible: !0 })
+    ), p(
+      () => n.options,
+      () => i()
+    ), p(
+      () => n.size,
+      () => i()
+    ), p(
+      () => n.block,
+      () => i()
+    ), p(
+      () => n.wrap,
+      () => i()
+    ), p(
+      () => n.variant,
+      () => i()
+    ), Ve(() => {
+      H({ ensureVisible: !0 });
+    }), ze(() => {
+      cancelAnimationFrame(O), cancelAnimationFrame(T), cancelAnimationFrame(R), z = !1, S = !1, v.clear();
     });
-    const D = v(() => {
-      const e = t.variant === "line";
-      return t.block || e ? "flex w-full relative" : "inline-flex max-w-full relative";
-    }), L = v(() => [
+    const ie = d(() => {
+      const e = n.variant === "line";
+      return n.block || e ? "flex w-full relative" : "inline-flex max-w-full relative";
+    }), N = d(() => [
       "absolute top-0 bottom-0 z-20 flex items-center pointer-events-none transition-opacity duration-200",
-      t.variant === "line" ? "pb-[10px]" : ""
-    ]), N = (e) => {
-      e.disabled || ($("update:modelValue", e.value), $("change", e.value));
-    }, P = v(() => {
-      const e = t.variant === "line", a = {
+      n.variant === "line" ? "pb-[10px]" : ""
+    ]), ce = (e) => {
+      e.disabled || ee(e) || (m("update:modelValue", e.value), m("change", e.value));
+    }, ue = (e, r) => {
+      if (e.disabled) return;
+      const t = r.value;
+      t != null && (m("update:modelValue", t), m("change", t), m("menu-select", { value: t, option: r.option, tab: e }));
+    }, de = (e) => {
+      m("menu-open", e);
+    }, fe = (e) => {
+      m("menu-close", e), i();
+    }, me = d(() => {
+      const e = n.variant === "line";
+      return (n.block || n.wrap) && !e ? "flex-1 min-w-max" : "shrink-0";
+    }), ve = (e) => e.dropdown?.direction ?? n.direction, be = d(() => {
+      const e = n.variant === "line", r = {
         surface: "bg-secondary/80 p-1",
         primary: "bg-secondary p-1",
         secondary: "bg-secondary p-1",
@@ -109,52 +147,52 @@ const ce = ["data-variant"], me = /* @__PURE__ */ Y({
         success: "bg-success/10 p-1",
         outline: "bg-transparent border border-border p-1",
         line: "bg-transparent gap-6 rounded-none p-0 border-b border-border"
-      }, r = t.wrap && !e ? "flex-wrap" : "";
-      return [`${t.block || e ? "flex min-w-full w-max" : "inline-flex"} rounded-lg relative isolate ${r}`, a[t.variant]];
-    }), I = v(() => t.variant === "surface" || t.variant === "primary" || t.variant === "secondary" ? "var(--color-secondary)" : t.variant === "danger" ? "color-mix(in srgb, var(--color-danger) 10%, transparent)" : t.variant === "success" ? "color-mix(in srgb, var(--color-success) 10%, transparent)" : "var(--color-background)"), W = {
+      }, t = n.wrap && !e ? "flex-wrap" : "";
+      return [`${n.block || e ? "flex min-w-full w-max" : "inline-flex"} rounded-lg relative isolate ${t}`, r[n.variant]];
+    }), G = d(() => n.variant === "surface" || n.variant === "primary" || n.variant === "secondary" ? "var(--color-secondary)" : n.variant === "danger" ? "color-mix(in srgb, var(--color-danger) 10%, transparent)" : n.variant === "success" ? "color-mix(in srgb, var(--color-success) 10%, transparent)" : "var(--color-background)"), K = {
       sm: "text-xs px-2.5 py-1",
       md: "-text-fs-2 px-3 py-1",
       lg: "-text-fs-1 px-4 py-1"
-    }, _ = v(() => {
-      const e = t.variant === "line", a = e ? "relative z-10 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none outline-none pb-3 border-b-2 border-transparent hover:text-foreground shrink-0" : "relative z-10 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none rounded-md outline-none shrink-0", r = (t.block || t.wrap) && !e ? "flex-1" : "";
-      return [a, r];
-    }), F = (e) => {
-      const a = e.value === t.modelValue, r = t.variant === "line";
-      let n = "";
-      if (a)
-        if (r)
-          n = t.wrap ? "text-primary !border-primary" : "text-primary";
+    }, ge = d(() => {
+      const e = n.variant === "line", r = e ? "relative z-10 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none outline-none pb-3 border-b-2 border-transparent hover:text-foreground shrink-0" : "relative z-10 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none rounded-md outline-none shrink-0", t = (n.block || n.wrap) && !e ? "flex-1" : "";
+      return [r, t];
+    }), Q = (e) => {
+      const r = te(e, n.modelValue), t = n.variant === "line";
+      let a = "";
+      if (r)
+        if (t)
+          a = n.wrap ? "text-primary !border-primary" : "text-primary";
         else
-          switch (t.variant) {
+          switch (n.variant) {
             case "surface":
-              n = t.wrap ? "text-foreground bg-[#ffff] dark:bg-[#0B0B0B] shadow-sm" : "text-foreground";
+              a = n.wrap ? "text-foreground bg-[#ffff] dark:bg-[#0B0B0B] shadow-sm" : "text-foreground";
               break;
             case "primary":
-              n = t.wrap ? "text-primary-foreground bg-primary" : "text-primary-foreground";
+              a = n.wrap ? "text-primary-foreground bg-primary" : "text-primary-foreground";
               break;
             case "secondary":
-              n = t.wrap ? "text-secondary bg-secondary-foreground" : "text-secondary";
+              a = n.wrap ? "text-secondary bg-secondary-foreground" : "text-secondary";
               break;
             case "danger":
-              n = t.wrap ? "text-danger-fg bg-danger" : "text-danger-fg";
+              a = n.wrap ? "text-danger-fg bg-danger" : "text-danger-fg";
               break;
             case "success":
-              n = t.wrap ? "text-success-fg bg-success" : "text-success-fg";
+              a = n.wrap ? "text-success-fg bg-success" : "text-success-fg";
               break;
             case "outline":
-              n = t.wrap ? "text-accent-foreground bg-accent/50 ring-1 ring-border" : "text-accent-foreground";
+              a = n.wrap ? "text-accent-foreground bg-accent/50 ring-1 ring-border" : "text-accent-foreground";
               break;
             default:
-              n = "text-foreground";
+              a = "text-foreground";
           }
       else
-        n = r ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground/80";
-      const s = e.disabled ? "opacity-50 cursor-not-allowed" : "";
-      return [_.value, n, t?.tabClass, s].join(" ");
-    }, q = v(() => {
-      const a = `absolute left-0 top-0 z-0 pointer-events-none ${B.value ? "transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)]" : ""}`;
-      return t.variant === "line" ? `${a} !h-[2px] !top-auto bottom-0` : `${a} rounded-md shadow-sm`;
-    }), G = () => ({
+        a = t ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground/80";
+      const o = e.disabled ? "opacity-50 cursor-not-allowed" : "";
+      return [ge.value, a, n?.tabClass, o].join(" ");
+    }, he = d(() => {
+      const r = `absolute left-0 top-0 z-0 pointer-events-none ${F.value ? "transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)]" : ""}`;
+      return n.variant === "line" ? `${r} !h-[2px] !top-auto bottom-0` : `${r} rounded-md shadow-sm`;
+    }), pe = () => ({
       surface: "bg-[#ffff] dark:bg-[#0B0B0B]",
       primary: "bg-primary",
       secondary: "bg-secondary-foreground",
@@ -162,112 +200,175 @@ const ce = ["data-variant"], me = /* @__PURE__ */ Y({
       success: "bg-success",
       outline: "bg-accent/50 ring-1 ring-border",
       line: "bg-primary"
-    })[t.variant], H = (e) => e.labelI18n ? ie(e.labelI18n) : e.label, J = (e) => e.to ? "router-link" : e.href ? "a" : "button", K = (e) => e.to ? { to: e.to } : e.href ? { href: e.href, target: "_blank", rel: "noopener noreferrer" } : { type: "button" };
-    return (e, a) => (m(), z("div", {
-      class: l([D.value, "group"])
+    })[n.variant], U = (e) => e.labelI18n ? Ie(e.labelI18n) : e.label, xe = (e) => e.to ? "router-link" : e.href ? "a" : "button", ye = (e) => e.to ? { to: e.to } : e.href ? { href: e.href, target: "_blank", rel: "noopener noreferrer" } : { type: "button" }, we = (e) => [
+      n.size === "sm" ? "w-3 h-3" : "w-3.5 h-3.5",
+      "opacity-70 shrink-0 transition-transform duration-200",
+      e ? "rotate-180" : ""
+    ].join(" ");
+    return (e, r) => (f(), $("div", {
+      class: l([ie.value, "group"]),
+      dir: s.direction
     }, [
-      x(y(A, {
+      M(y(re, {
         direction: "left",
-        color: I.value,
+        color: G.value,
         coverage: "100px",
         blur: "40px",
         easing: "smooth",
         tintOpacity: 1,
-        class: l(["z-10 pointer-events-none", t.variant === "line" ? "" : "rounded-l-lg"])
+        class: l(["z-10 pointer-events-none", n.variant === "line" ? "" : "rounded-l-lg"])
       }, null, 8, ["color", "class"]), [
-        [h, w.value]
+        [L, C.value]
       ]),
-      x(f("div", {
-        class: l(["left-0 pl-1", L.value])
+      M(c("div", {
+        class: l(["left-0 pl-1", N.value])
       }, [
-        f("button", {
-          onClick: a[0] || (a[0] = (r) => S(-200)),
+        c("button", {
+          onClick: r[0] || (r[0] = (t) => q(-200)),
           class: "pointer-events-auto h-full px-1 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors focus:outline-none",
           "aria-label": "Scroll left"
         }, [
-          y(R, {
+          y(w, {
             icon: "lucide:chevron-left",
             class: "w-5 h-5"
           })
         ])
       ], 2), [
-        [h, w.value]
+        [L, C.value]
       ]),
-      f("div", {
+      c("div", {
         ref_key: "scrollRef",
-        ref: i,
-        class: "flex-1 min-w-0 max-w-full overflow-x-auto scrollbar-hide scroll-smooth",
-        onScroll: o
+        ref: u,
+        class: "tabes-scroll flex-1 min-w-0 max-w-full overflow-x-auto scrollbar-hide scroll-smooth",
+        onScroll: se
       }, [
-        f("div", {
+        c("div", {
           ref_key: "containerRef",
-          ref: b,
-          class: l([P.value, "tabes-container"]),
+          ref: k,
+          class: l([be.value, "tabes-container"]),
           role: "tablist",
-          "data-variant": t.variant,
+          "data-variant": n.variant,
           "data-tabes": ""
         }, [
-          c.modelValue !== void 0 && !c.wrap ? (m(), z("div", {
+          s.modelValue !== void 0 && !s.wrap ? (f(), $("div", {
             key: 0,
-            class: l([q.value, G()]),
-            style: ee(k.value)
-          }, null, 6)) : j("", !0),
-          (m(!0), z(te, null, re(c.options, (r) => (m(), M(ae(J(r)), ne({
-            key: r.value,
-            ref_for: !0,
-            ref: (n) => O(n?.$el || n, r.value),
-            role: "tab",
-            "data-tabes-item": "",
-            "aria-selected": c.modelValue === r.value,
-            disabled: r.disabled,
-            class: [F(r), W[t.size]]
-          }, { ref_for: !0 }, K(r), {
-            onClick: (n) => N(r)
-          }), {
-            default: oe(() => [
-              r.icon ? (m(), M(R, {
-                key: 0,
-                icon: r.icon,
-                class: l(c.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
-              }, null, 8, ["icon", "class"])) : j("", !0),
-              f("span", {
-                class: l(["whitespace-nowrap z-20 relative", c.textClass])
-              }, se(H(r)), 3)
-            ]),
-            _: 2
-          }, 1040, ["aria-selected", "disabled", "class", "onClick"]))), 128))
-        ], 10, ce)
+            class: l(["tabes-marker", [he.value, pe()]]),
+            style: Se(b.value)
+          }, null, 6)) : E("", !0),
+          (f(!0), $(J, null, Be(s.options, (t) => (f(), $(J, {
+            key: t.value
+          }, [
+            X(ee)(t) ? (f(), A(Fe, {
+              key: 0,
+              options: t.menu,
+              selected: s.modelValue,
+              disabled: t.disabled,
+              direction: ve(t),
+              position: t.dropdown?.position,
+              offset: t.dropdown?.offset ?? [0, 8],
+              searchable: t.dropdown?.searchable ?? !1,
+              "close-on-select": t.dropdown?.closeOnSelect ?? !0,
+              "max-height": t.dropdown?.maxHeight ?? "300px",
+              "min-width": t.dropdown?.minWidth ?? "160px",
+              width: t.dropdown?.width,
+              "menu-id": t.dropdown?.menuId ?? `tabes-menu-${t.value}`,
+              teleport: t.dropdown?.teleport ?? !0,
+              "show-selected-label": !1,
+              "show-selected-icon": !1,
+              "toggle-selection": !1,
+              selectable: !0,
+              class: l(["tabes-menu", "inline-flex!", me.value]),
+              onOnSelect: (a) => ue(t, a),
+              onOnOpen: () => de(t),
+              onOnClose: () => fe(t)
+            }, {
+              trigger: Y(({ isOpen: a }) => [
+                c("button", {
+                  ref_for: !0,
+                  ref: (o) => W(o, t.value),
+                  type: "button",
+                  role: "tab",
+                  "data-tabes-item": "",
+                  "data-tabes-menu-trigger": "",
+                  "aria-selected": X(te)(t, s.modelValue),
+                  "aria-haspopup": !0,
+                  "aria-expanded": a,
+                  disabled: t.disabled,
+                  class: l([Q(t), K[n.size], "w-full"])
+                }, [
+                  t.icon ? (f(), A(w, {
+                    key: 0,
+                    icon: t.icon,
+                    class: l(s.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
+                  }, null, 8, ["icon", "class"])) : E("", !0),
+                  c("span", {
+                    class: l(["whitespace-nowrap z-20 relative", s.textClass])
+                  }, Z(U(t)), 3),
+                  y(w, {
+                    icon: "lucide:chevron-down",
+                    class: l(we(a)),
+                    "aria-hidden": "true"
+                  }, null, 8, ["class"])
+                ], 10, je)
+              ]),
+              _: 2
+            }, 1032, ["options", "selected", "disabled", "direction", "position", "offset", "searchable", "close-on-select", "max-height", "min-width", "width", "menu-id", "teleport", "class", "onOnSelect", "onOnOpen", "onOnClose"])) : $e([t, s.modelValue === t.value, s.size, s.variant, s.block, s.wrap, s.tabClass, s.textClass], () => (f(), A(Me(xe(t)), Le({
+              key: 1,
+              ref_for: !0,
+              ref: (a) => W(a, t.value),
+              role: "tab",
+              "data-tabes-item": "",
+              "aria-selected": s.modelValue === t.value,
+              disabled: t.disabled,
+              class: [Q(t), K[n.size]]
+            }, { ref_for: !0 }, ye(t), {
+              onClick: (a) => ce(t)
+            }), {
+              default: Y(() => [
+                t.icon ? (f(), A(w, {
+                  key: 0,
+                  icon: t.icon,
+                  class: l(s.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
+                }, null, 8, ["icon", "class"])) : E("", !0),
+                c("span", {
+                  class: l(["whitespace-nowrap z-20 relative", s.textClass])
+                }, Z(U(t)), 3)
+              ]),
+              _: 2
+            }, 1040, ["aria-selected", "disabled", "class", "onClick"])), r, 1)
+          ], 64))), 128))
+        ], 10, Te)
       ], 544),
-      x(y(A, {
+      M(y(re, {
         direction: "right",
-        color: I.value,
+        color: G.value,
         coverage: "100px",
         blur: "40",
         easing: "smooth",
         tintOpacity: 1,
-        class: l(["z-10 pointer-events-none", t.variant === "line" ? "" : "rounded-r-lg"])
+        class: l(["z-10 pointer-events-none", n.variant === "line" ? "" : "rounded-r-lg"])
       }, null, 8, ["color", "class"]), [
-        [h, C.value]
+        [L, V.value]
       ]),
-      x(f("div", {
-        class: l(["right-0 pr-1", L.value])
+      M(c("div", {
+        class: l(["right-0 pr-1", N.value])
       }, [
-        f("button", {
-          onClick: a[1] || (a[1] = (r) => S(200)),
+        c("button", {
+          onClick: r[2] || (r[2] = (t) => q(200)),
           class: "pointer-events-auto h-full px-1 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors focus:outline-none",
           "aria-label": "Scroll right"
         }, [
-          y(R, {
+          y(w, {
             icon: "lucide:chevron-right",
             class: "w-5 h-5"
           })
         ])
       ], 2), [
-        [h, C.value]
+        [L, V.value]
       ])
-    ], 2));
+    ], 10, Ee));
   }
 });
 export {
-  me as default
+  Qe as default
 };

package/components/Tabes/TabesMarkerGeometry.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Local-coordinate geometry helpers for the Tabes active marker.
+ *
+ * Ancestor CSS transforms (e.g. ScaleGenerator's `transform: scale(...)`)
+ * affect `getBoundingClientRect()` but not layout sizes (`offsetWidth`).
+ * Feeding visual rect sizes into local CSS `width` / `translate` would
+ * double-apply the scale. These helpers normalize measurements into the
+ * container's own CSS pixel space.
+ */
+export interface TabesMarkerGeometry {
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+}
+/**
+ * Returns the horizontal transform scale currently applied to `element`
+ * (visual width ÷ layout width). `1` when unscaled or zero-sized.
+ */
+export declare const getTabesElementScaleX: (element: HTMLElement) => number;
+/**
+ * Returns the vertical transform scale currently applied to `element`.
+ */
+export declare const getTabesElementScaleY: (element: HTMLElement) => number;
+/**
+ * Measure active-tab marker geometry in `container`'s local CSS coordinates.
+ * Width/height use layout sizes; left/top normalize visual deltas by scale.
+ */
+export declare const measureTabesMarkerGeometry: (container: HTMLElement, activeElement: HTMLElement) => TabesMarkerGeometry;
+/**
+ * Convert a visual (viewport) horizontal delta into a local `scrollLeft` delta
+ * for `scrollContainer`, accounting for ancestor CSS scale transforms.
+ */
+export declare const toTabesLocalScrollDelta: (scrollContainer: HTMLElement, visualDelta: number) => number;

package/components/Tabes/TabesMarkerGeometry.js

@@ -0,0 +1,21 @@
+const s = (t, e) => {
+  if (e <= 0) return 1;
+  const o = t / e;
+  return o > 1e-3 ? o : 1;
+}, i = (t) => {
+  const e = t.getBoundingClientRect();
+  return s(e.width, t.offsetWidth);
+}, r = (t, e) => {
+  const o = t.getBoundingClientRect(), c = e.getBoundingClientRect(), n = s(o.width, t.offsetWidth), f = s(o.height, t.offsetHeight);
+  return {
+    width: e.offsetWidth,
+    height: e.offsetHeight,
+    left: (c.left - o.left) / n,
+    top: (c.top - o.top) / f
+  };
+}, h = (t, e) => e / i(t);
+export {
+  i as getTabesElementScaleX,
+  r as measureTabesMarkerGeometry,
+  h as toTabesLocalScrollDelta
+};

package/components/Tabes/tabes.utils.d.ts

@@ -0,0 +1,14 @@
+import { IDropdownOption } from '../../types';
+import { TabesOption } from './types';
+/** Whether the tab option is a dropdown menu trigger */
+export declare function isMenuTab(option: TabesOption): boolean;
+export declare function getMenuOptionValue(option: IDropdownOption): string | number | undefined;
+/** Recursively check if a menu tree contains the given value */
+export declare function menuContainsValue(menu: IDropdownOption[] | undefined, value: string | number): boolean;
+/** Whether a tab (standard or menu parent) should appear active for the current modelValue */
+export declare function isTabActive(option: TabesOption, modelValue: string | number): boolean;
+/**
+ * Resolve which tab option value should own the animated marker.
+ * For menu tabs, returns the parent tab's value when a child is selected.
+ */
+export declare function getActiveMarkerKey(options: TabesOption[], modelValue: string | number): string | number | undefined;