@clubmed/trident-ui/molecules/Tabs/Tab.js

Shared ClubMed React UI components

"use client";
import { jsx as u, jsxs as B } from "react/jsx-runtime";
import { c as m } from "../../chunks/index.js";
import { useRef as d, useEffect as I, useCallback as r } from "react";
import { animated as _ } from "@react-spring/web";
import { useActiveTab as z, useRegisterTabControl as G } from "./hooks/tabControl.js";
import { getTheme as M } from "./theme.js";
import { useSafeBoop as O } from "../../hooks/useSafeBoop.js";
import { useKeyboardControls as P } from "../../hooks/useKeyboardControls.js";
const f = "-z-1 rounded-pill absolute inset-0 duration-300", W = ({
  className: b,
  label: a,
  children: y,
  value: e,
  onSelect: i,
  as: g = "h2",
  theme: h = "yellow"
}) => {
  const p = d(null), o = z(), t = G({ value: e, ref: p }), l = d(o), n = d(o === e);
  n.current = o === e;
  const x = { "--tab-index": e }, { textColor: C, textColorActive: T, bgColor: w } = M(h), [A, c] = O({ scale: 1.02 });
  I(() => {
    var s;
    l.current !== o && e === o && ((s = p.current) == null || s.focus(), i == null || i({ value: e, label: a })), l.current !== o && (l.current = o);
  }, [a, e, i, o]);
  const v = r(() => {
    n.current && c();
  }, [c]), N = r(() => {
    t({ type: "start" });
  }, [t]), k = r(() => {
    t({ type: "end" });
  }, [t]), L = r(() => {
    t({ type: "previous" });
  }, [t]), R = r(() => {
    t({ type: "next" });
  }, [t]), E = r(() => {
    const s = document.documentElement.dir === "rtl";
    t({ type: s ? "next" : "previous" });
  }, [t]), K = r(() => {
    const s = document.documentElement.dir === "rtl";
    t({ type: s ? "previous" : "next" });
  }, [t]), D = P({
    activate: v,
    start: N,
    end: k,
    up: L,
    down: R,
    left: E,
    right: K
  }), j = r(() => {
    t({ type: "update", payload: e }), n.current && c();
  }, [c, t, e]);
  return /* @__PURE__ */ u(
    _.div,
    {
      "data-name": "Tab",
      ref: p,
      role: "tab",
      "aria-selected": n.current,
      tabIndex: n.current ? 0 : -1,
      style: A,
      className: m(
        "text-b3 group inline-block cursor-pointer overflow-hidden whitespace-nowrap bg-transparent pe-4 align-middle font-semibold outline-none",
        b,
        {
          [C]: !n.current,
          [T]: n.current
        }
      ),
      onKeyDown: D,
      onClick: j,
      children: /* @__PURE__ */ B(g, { className: "relative inline-block px-20 py-12", children: [
        /* @__PURE__ */ u(
          "span",
          {
            className: m(
              "group-hover:bg-pearl group-focus-within:bg-pearl transition-colors",
              f
            )
          }
        ),
        /* @__PURE__ */ u(
          "span",
          {
            className: m(
              "tab-focus-pill ease transition-transform/colors",
              f,
              w
            ),
            style: x
          }
        ),
        y ?? a
      ] })
    }
  );
};
export {
  W as Tab
};
//# sourceMappingURL=Tab.js.map