import * as r from "react";
import { useIsoLayoutEffect as R } from "../../../../../../../@base-ui_utils@0.2.4_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useIsoLayoutEffect.js";
import { useBaseUiId as g } from "../../utils/useBaseUiId.js";
import { useRenderElement as v } from "../../utils/useRenderElement.js";
import { useCompositeListItem as x } from "../../composite/list/useCompositeListItem.js";
import { tabsStateAttributesMapping as y } from "../root/stateAttributesMapping.js";
import { useTabsRootContext as A } from "../root/TabsRootContext.js";
import { TabsPanelDataAttributes as E } from "./TabsPanelDataAttributes.js";
const N = /* @__PURE__ */ r.forwardRef(function(a, l) {
  const {
    className: D,
    value: e,
    render: V,
    keepMounted: o = !1,
    ...m
  } = a, {
    value: f,
    getTabIdByPanelValue: p,
    orientation: s,
    tabActivationDirection: i,
    registerMountedTabPanel: d,
    unregisterMountedTabPanel: u
  } = A(), t = g(), c = r.useMemo(() => ({
    id: t,
    value: e
  }), [t, e]), {
    ref: b,
    index: T
  } = x({
    metadata: c
  }), n = e !== f, I = p(e), M = r.useMemo(() => ({
    hidden: n,
    orientation: s,
    tabActivationDirection: i
  }), [n, s, i]), P = v("div", a, {
    state: M,
    ref: [l, b],
    props: [{
      "aria-labelledby": I,
      hidden: n,
      id: t ?? void 0,
      role: "tabpanel",
      tabIndex: n ? -1 : 0,
      [E.index]: T
    }, m],
    stateAttributesMapping: y
  });
  return R(() => {
    if (!(n && !o) && t != null)
      return d(e, t), () => {
        u(e, t);
      };
  }, [n, o, e, t, d, u]), !n || o ? P : null;
});
process.env.NODE_ENV !== "production" && (N.displayName = "TabsPanel");
export {
  N as TabsPanel
};
