import { defineComponent as T, useCssModule as _, inject as y, computed as r, onMounted as k, nextTick as g, toRefs as u, openBlock as c, createElementBlock as C, withKeys as P, normalizeClass as $, unref as a, createBlock as B, resolveDynamicComponent as E, mergeProps as N, withCtx as b, createElementVNode as A, createVNode as I, renderSlot as M } from "vue";
import j from "@leaflink/snitch";
import D from "./Badge.js";
import { T as L } from "./Tabs.vue_vue_type_script_setup_true_lang-Swgl9-sG.js";
import { _ as V } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const G = ["id", "aria-selected", "aria-controls", "aria-disabled"], K = /* @__PURE__ */ T({
  __name: "Tab",
  props: {
    value: {},
    to: {},
    href: {},
    badge: {},
    disabled: { type: Boolean },
    anchorProps: {},
    routerLinkProps: {}
  },
  setup(p) {
    const e = p, v = _(), l = y(L.key);
    if (!l)
      throw Error("The Tab component must be a child of the Tabs component.");
    const { setActiveTab: f, activeTab: m, variant: o } = l, t = r(() => e.value === m.value), h = r(() => e.to ? "router-link" : e.href ? "a" : "button");
    function d(i) {
      e.disabled || f(i);
    }
    const n = r(() => `tabpanel-${e.value}`);
    k(async () => {
      await g(), process.env.NODE_ENV !== "test" && t.value && !document.getElementById(n.value) && j.warn(
        `The <Tab> with value "${e.value}" is active, but its corresponding tab panel cannot be found. Please ensure that the corresponding tab panel has an "id" attribute with value "${n.value}" and a "role" attribute with value "tabpanel".`
      );
    });
    const w = r(() => e.to && e.routerLinkProps ? u(e.routerLinkProps) : e.href && e.anchorProps ? u(e.anchorProps) : {});
    return (i, s) => (c(), C("li", {
      id: `tab-${e.value}`,
      role: "tab",
      "aria-selected": t.value,
      "aria-controls": n.value,
      "aria-disabled": e.disabled,
      class: $(["stash-tab", [
        {
          "stash-tab--active is-active": t.value,
          "stash-tab--disabled": e.disabled,
          "stash-tab--variant-line": a(o) === "line",
          "stash-tab--variant-enclosed": a(o) === "enclosed"
        }
      ]]),
      onClick: s[0] || (s[0] = (x) => d(e.value)),
      onKeypress: s[1] || (s[1] = P((x) => d(e.value), ["enter"]))
    }, [
      (c(), B(E(h.value), N(w.value, {
        to: e.to,
        href: e.href,
        class: ["relative flex cursor-pointer items-center justify-center whitespace-nowrap border-solid py-1.5 text-sm font-medium hover:no-underline", [
          {
            "border-b-2": a(o) === "line",
            "border-b border-t-4 px-6": a(o) === "enclosed",
            "rounded-t border-b-ice-200 bg-white": t.value && a(o) === "enclosed",
            [a(v)["custom-shadow"]]: t.value && a(o) === "enclosed",
            "focus:no-underline": e.href,
            "pointer-events-none text-ice-500": e.disabled,
            "text-ice-700": !e.disabled && !t.value
          },
          [t.value ? "border-blue-500 text-blue-500" : "border-transparent hover:text-blue-500 focus:text-blue-500"]
        ]],
        tabindex: e.disabled ? -1 : 0
      }), {
        default: b(() => [
          A("div", null, [
            I(D, {
              content: e.badge,
              position: "inline",
              color: "red",
              "is-disabled": e.disabled
            }, {
              default: b(() => [
                M(i.$slots, "default", {
                  isActive: t.value,
                  isDisabled: e.disabled,
                  variant: a(o)
                })
              ]),
              _: 3
            }, 8, ["content", "is-disabled"])
          ])
        ]),
        _: 3
      }, 16, ["to", "href", "class", "tabindex"]))
    ], 42, G));
  }
}), O = {
  "custom-shadow": "_custom-shadow_HRGsG"
}, R = {
  $style: O
}, F = /* @__PURE__ */ V(K, [["__cssModules", R]]);
export {
  F as default
};
//# sourceMappingURL=Tab.js.map
