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

Shared ClubMed React UI components

"use client";
import { jsx as l, jsxs as d } from "react/jsx-runtime";
import { c as t } from "../../chunks/index.js";
import { useRef as f, useEffect as v } from "react";
import { useSpring as b, animated as h } from "@react-spring/web";
import { useActiveTabControl as L } from "./hooks/tabControl.js";
const k = ({
  className: n,
  constrained: r = !1,
  children: i
}) => {
  const s = f(null), c = f(null), [m, e] = L(), [{ scrollLeft: a }, o] = b(() => ({
    from: { scrollLeft: 0 }
  }));
  v(() => {
    if (!(e != null && e.current))
      return;
    const p = e.current.getBoundingClientRect().left, u = s.current.scrollLeft, w = c.current.offsetWidth;
    o.start({
      to: {
        scrollLeft: u + p - w
      }
    });
  }, [a, e, o]);
  const x = { "--active-tab": m };
  return /* @__PURE__ */ l(
    h.div,
    {
      ref: s,
      "data-name": "TabsHeader",
      className: t(
        "scrollbar-hide relative flex max-w-full overflow-x-scroll py-20",
        n
      ),
      scrollLeft: a,
      children: /* @__PURE__ */ d("div", { role: "tablist", className: t("flex flex-row"), style: x, children: [
        /* @__PURE__ */ l(
          "div",
          {
            ref: c,
            className: t("shrink-0", {
              "w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !r
            })
          }
        ),
        i,
        /* @__PURE__ */ l(
          "div",
          {
            className: t("shrink-0", {
              "w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !r
            })
          }
        )
      ] })
    }
  );
};
export {
  k as TabList
};
//# sourceMappingURL=TabList.js.map