@clubmed/trident-ui/ui/tabs/Tabs.js

Shared ClubMed React UI components

"use client";
import { jsx as i, jsxs as g } from "react/jsx-runtime";
import { c as l } from "../../chunks/clsx.js";
import { useRef as m, useEffect as T, useCallback as p } from "react";
import { TabsProvider as j } from "../contexts/TabControl.js";
import { useActiveTab as v, useTabsUid as C, useRegisterTabControl as H, useActiveTabControl as I } from "../hooks/tabControl.js";
import { getTheme as W } from "./theme.js";
import { useKeyboardControls as U } from "../hooks/useKeyboardControls.js";
const V = ({
  className: r,
  compacted: n = !1,
  selected: d,
  children: e
}) => /* @__PURE__ */ i(
  "div",
  {
    className: l("flex flex-col", r, {
      "sm:gap-y-20": !n
    }),
    "data-name": "Tabs",
    children: /* @__PURE__ */ i(j, { selected: d, children: e })
  }
), X = ({
  className: r,
  children: n
}) => /* @__PURE__ */ i("div", { "data-name": "TabsBody", className: l("grid grid-rows-1 overflow-hidden", r), children: n }), Y = ({
  value: r,
  className: n,
  onSelect: d,
  children: e
}) => {
  const u = C(), b = m(!1), o = v() === r;
  return T(() => {
    if (!b.current) {
      b.current = !0;
      return;
    }
    o && d?.({ value: r });
  }, [o, r, d]), /* @__PURE__ */ i(
    "div",
    {
      id: `TabPanel_${r}_${u}`,
      "data-name": `TabPanel_${r}`,
      role: "tabpanel",
      "aria-hidden": !o,
      "aria-labelledby": `Tab_${r}_${u}`,
      tabIndex: o ? 0 : -1,
      className: l(
        n,
        "relative col-start-1 row-start-1 transition-opacity duration-500",
        {
          "pointer-events-none z-0 h-0 opacity-0": !o,
          "pointer-events-auto z-1 h-auto opacity-100": o
        }
      ),
      children: e
    }
  );
}, Z = ({
  className: r,
  constrained: n = !1,
  children: d
}) => {
  const e = m(null), u = m(null), [b, f] = I();
  T(() => {
    if (!f?.current || !e.current)
      return;
    const x = u.current.offsetWidth ?? 0, c = f.current.getBoundingClientRect(), y = e.current.getBoundingClientRect(), t = e.current.scrollLeft;
    e.current.scrollLeft = t + (c.left - y.left) - x;
  }, [f]);
  const o = { "--active-tab": b };
  return /* @__PURE__ */ i(
    "div",
    {
      "data-name": "TabsHeader",
      className: l(
        "scrollbar-hidden relative isolate flex max-w-full overflow-x-scroll scroll-smooth py-20",
        r
      ),
      ref: e,
      children: /* @__PURE__ */ g("div", { role: "tablist", className: "flex flex-row", style: o, children: [
        /* @__PURE__ */ i(
          "div",
          {
            ref: u,
            className: l("shrink-0", {
              "w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !n
            })
          }
        ),
        d,
        /* @__PURE__ */ i(
          "div",
          {
            className: l("shrink-0", {
              "w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !n
            })
          }
        )
      ] })
    }
  );
}, ee = ({
  as: r = "h2",
  label: n,
  children: d,
  value: e,
  onSelect: u,
  theme: b = "yellow",
  className: f,
  ...o
}) => {
  const x = m(null), c = v(), y = C(), t = H({ value: e, ref: x }), h = m(c), a = m(c === e);
  a.current = c === e;
  const k = { "--tab-index": e }, { textColor: N, textColorActive: R, bgColor: _ } = W(b);
  T(() => {
    h.current !== c && e === c && (x.current?.focus(), u?.({ value: e, label: n })), h.current !== c && (h.current = c);
  }, [n, e, u, c]);
  const $ = p(() => {
    t({ type: "start" });
  }, [t]), A = p(() => {
    t({ type: "end" });
  }, [t]), E = p(() => {
    t({ type: "previous" });
  }, [t]), L = p(() => {
    t({ type: "next" });
  }, [t]), P = p(() => {
    const s = document.documentElement.dir === "rtl";
    t({ type: s ? "next" : "previous" });
  }, [t]), z = p(() => {
    const s = document.documentElement.dir === "rtl";
    t({ type: s ? "previous" : "next" });
  }, [t]), w = U({
    start: $,
    end: A,
    up: E,
    down: L,
    left: P,
    right: z
  }), B = p(
    (s) => {
      const D = s.key === " " || s.key === "Spacebar" || s.code === "Space", K = s.key === "Enter" || s.code === "Enter";
      if (a.current && (D || K)) {
        s.preventDefault();
        return;
      }
      w(s);
    },
    [w]
  ), S = () => {
    a.current || t({ type: "update", payload: e });
  };
  return /* @__PURE__ */ i(
    "div",
    {
      ...o,
      id: o.id || `Tab_${e}_${y}`,
      "data-name": "Tab",
      ref: x,
      role: "tab",
      "aria-selected": a.current,
      "aria-controls": `TabPanel_${e}_${y}`,
      tabIndex: a.current ? 0 : -1,
      className: l(
        "group inline-block cursor-pointer overflow-hidden whitespace-nowrap bg-transparent pe-4 align-middle text-b3 font-semibold outline-none",
        {
          [R]: a.current,
          [N]: !a.current,
          "transition-transform active:scale-[1.03]": a.current
        }
      ),
      onKeyDown: B,
      onClick: S,
      children: /* @__PURE__ */ g(
        r,
        {
          className: l(
            "relative inline-block px-20 py-12",
            "before:absolute before:inset-0 before:-z-1 before:rounded-pill before:transition-colors/opacity before:duration-300 before:group-focus-within:bg-pearl before:group-hover:bg-pearl before:group-focus:bg-pearl",
            f
          ),
          ...a ? {} : { role: "presentation" },
          children: [
            /* @__PURE__ */ i(
              "span",
              {
                className: l(
                  "tab-focus-pill ease transition-transform/colors",
                  "absolute inset-0 -z-1 rounded-pill duration-300",
                  _
                ),
                style: k
              }
            ),
            d ?? n
          ]
        }
      )
    }
  );
};
export {
  ee as Tab,
  Z as TabList,
  Y as TabPanel,
  V as Tabs,
  X as TabsBody
};
//# sourceMappingURL=Tabs.js.map