@mankindui/core/dist/components/Tabs/index.js

- a react component library - you can see how @mankindui/core can be used via examples: [usage examples](https://github.com/clarklindev/mankindui-test)

import { j as a } from "../../_virtual/jsx-runtime.js";
import { useEffect as p, useRef as c } from "react";
import "../index.js";
import "../../context/index.js";
import { TabsContextProvider as f, useTabs as u } from "../../context/TabContext.js";
import { Button as x } from "../Button/index.js";
const l = ({ children: e }) => /* @__PURE__ */ a.jsx(f, { children: /* @__PURE__ */ a.jsx("div", { "data-component": "Tabs", children: e }) }), m = ({ children: e, className: t }) => {
  const { setSelectedTabId: r } = u();
  return p(() => {
    r("0");
  }, []), /* @__PURE__ */ a.jsx("div", { "data-component": m.displayName, className: `flex flex-row gap-2 py-1 ${t}`, children: e });
}, b = ({ children: e, ...t }) => {
  const { selectedTabId: r, setSelectedTabId: s } = u(), o = c(null), d = c(null);
  return p(() => {
    var i;
    const n = (i = o.current) == null ? void 0 : i.getAttribute("data-tab");
    n && (d.current = n);
  }, [o]), /* @__PURE__ */ a.jsx("div", { "data-component": b.displayName, children: /* @__PURE__ */ a.jsx(
    x,
    {
      intent: "plain",
      padding: "none",
      borderRadius: "none",
      className: r && r === d.current ? "border-b-2 border-red-500 rounded-b-none" : "border-b-2 border-transparent",
      ref: o,
      onClick: (n) => {
        const i = n.currentTarget.dataset.tab;
        i && s(i);
      },
      ...t,
      children: e
    }
  ) });
}, g = ({ children: e, className: t }) => /* @__PURE__ */ a.jsx("div", { "data-component": g.displayName, className: ["my-5", `${t}`].join(" "), children: e }), T = ({ children: e, ...t }) => {
  const { selectedTabId: r } = u(), s = c(null), o = c(null);
  return p(() => {
    var n;
    const d = (n = s.current) == null ? void 0 : n.getAttribute("data-tab");
    d && (o.current = d);
  }, [s]), /* @__PURE__ */ a.jsx("div", { "data-component": T.displayName, className: [`${r && r === o.current ? "block" : "hidden"}`].join(" "), ref: s, ...t, children: e });
};
m.displayName = "Tabs.TriggerGroup";
l.TriggerGroup = m;
b.displayName = "Tabs.Trigger";
l.Trigger = b;
g.displayName = "Tabs.ContentGroup";
l.ContentGroup = g;
T.displayName = "Tabs.Content";
l.Content = T;
export {
  l as Tabs
};
//# sourceMappingURL=index.js.map