@transkripid/flowbite-react/lib/components/Tabs/Tabs.mjs

Official React components built for Flowbite and Tailwind CSS - Transkrip.id fork

import { jsxs as I, jsx as b } from "react/jsx-runtime";
import { forwardRef as R, useId as j, useMemo as S, Children as T, useRef as D, useState as v, useEffect as E, useImperativeHandle as K } from "react";
import { twMerge as c } from "tailwind-merge";
import { mergeDeep as z } from "../../helpers/merge-deep.mjs";
import { getTheme as F } from "../../theme-store/index.mjs";
import { TabItem as H } from "./TabItem.mjs";
const $ = R(({
  children: p,
  className: h,
  onActiveTabChange: u,
  style: n = "default",
  theme: g = {},
  ...k
}, N) => {
  const a = z(F().tabs, g), o = j(), r = S(() => T.map(T.toArray(p), ({
    props: t
  }) => t), [p]), y = D([]), [i, w] = v(Math.max(0, r.findIndex((t) => t.active))), [s, l] = v(-1), m = (t) => {
    w(t), u && u(t);
  }, A = ({
    target: t
  }) => {
    m(t), l(t);
  }, C = ({
    event: t,
    target: e
  }) => {
    t.key === "ArrowLeft" && l(Math.max(0, s - 1)), t.key === "ArrowRight" && l(Math.min(r.length - 1, s + 1)), t.key === "Enter" && (m(e), l(e));
  }, d = a.tablist.tabitem.styles[n], M = a.tabitemcontainer.styles[n];
  return E(() => {
    var t;
    (t = y.current[s]) == null || t.focus();
  }, [s]), K(N, () => ({
    setActiveTab: m
  })), /* @__PURE__ */ I("div", { className: c(a.base, h), children: [
    /* @__PURE__ */ b("div", { "aria-label": "Tabs", role: "tablist", className: c(a.tablist.base, a.tablist.styles[n], h), ...k, children: r.map((t, e) => /* @__PURE__ */ I("button", { type: "button", "aria-controls": `${o}-tabpanel-${e}`, "aria-selected": e === i, className: c(a.tablist.tabitem.base, d.base, e === i && d.active.on, e !== i && !t.disabled && d.active.off), disabled: t.disabled, id: `${o}-tab-${e}`, onClick: () => A({
      target: e
    }), onKeyDown: (f) => C({
      event: f,
      target: e
    }), ref: (f) => y.current[e] = f, role: "tab", tabIndex: e === s ? 0 : -1, style: {
      zIndex: e === s ? 2 : 1
    }, children: [
      t.icon && /* @__PURE__ */ b(t.icon, { className: a.tablist.tabitem.icon }),
      t.title
    ] }, e)) }),
    /* @__PURE__ */ b("div", { className: c(a.tabitemcontainer.base, M), children: r.map((t, e) => /* @__PURE__ */ b("div", { "aria-labelledby": `${o}-tab-${e}`, className: a.tabpanel, hidden: e !== i, id: `${o}-tabpanel-${e}`, role: "tabpanel", tabIndex: 0, children: t.children }, e)) })
  ] });
});
$.displayName = "Tabs";
const J = Object.assign($, {
  Item: H
});
export {
  J as Tabs
};
//# sourceMappingURL=Tabs.mjs.map