@octanejs/base-ui 0.1.30 → 0.1.32

package/dist/cjs/tabs.cjs

@@ -0,0 +1,727 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var tabs_exports = {};
+__export(tabs_exports, {
+  Tabs: () => Tabs,
+  TabsList: () => TabsList,
+  TabsPanel: () => TabsPanel,
+  TabsRoot: () => TabsRoot,
+  TabsTab: () => TabsTab,
+  useTabsListContext: () => useTabsListContext,
+  useTabsRootContext: () => useTabsRootContext
+});
+module.exports = __toCommonJS(tabs_exports);
+var import_octane = require("octane");
+var import_internal = require("./internal.cjs");
+var import_useRenderElement = require("./utils/useRenderElement.cjs");
+var import_useBaseUiId = require("./utils/useBaseUiId.cjs");
+var import_useButton = require("./utils/useButton.cjs");
+var import_useControlled = require("./utils/useControlled.cjs");
+var import_useStableCallback = require("./utils/useStableCallback.cjs");
+var import_inertValue = require("./utils/inertValue.cjs");
+var import_owner = require("./utils/owner.cjs");
+var import_element = require("./utils/floating/element.cjs");
+var import_useTransitionStatus = require("./utils/useTransitionStatus.cjs");
+var import_useOpenChangeComplete = require("./utils/useOpenChangeComplete.cjs");
+var import_CompositeList = require("./utils/composite/CompositeList.cjs");
+var import_CompositeRoot = require("./utils/composite/CompositeRoot.cjs");
+var import_useCompositeItem = require("./utils/composite/useCompositeItem.cjs");
+var import_useCompositeListItem = require("./utils/composite/useCompositeListItem.cjs");
+var import_keys = require("./utils/composite/keys.cjs");
+var import_createChangeEventDetails = require("./utils/createChangeEventDetails.cjs");
+const EMPTY_DISABLED_INDICES = [];
+const tabsStateAttributesMapping = {
+  tabActivationDirection: (dir) => ({
+    "data-activation-direction": dir
+  })
+};
+const TabsRootContext = (0, import_octane.createContext)(void 0);
+function useTabsRootContext() {
+  const context = (0, import_octane.useContext)(TabsRootContext);
+  if (context === void 0) {
+    throw new Error(
+      "Base UI: TabsRootContext is missing. Tabs parts must be placed within <Tabs.Root>."
+    );
+  }
+  return context;
+}
+const TabsListContext = (0, import_octane.createContext)(void 0);
+function useTabsListContext() {
+  const context = (0, import_octane.useContext)(TabsListContext);
+  if (context === void 0) {
+    throw new Error(
+      "Base UI: TabsListContext is missing. TabsList parts must be placed within <Tabs.List>."
+    );
+  }
+  return context;
+}
+function computeActivationDirection(oldValue, newValue, orientation, tabMap) {
+  if (oldValue == null || newValue == null) {
+    return "none";
+  }
+  let oldTab = null;
+  let newTab = null;
+  for (const [tabElement, tabMetadata] of tabMap.entries()) {
+    if (tabMetadata == null) {
+      continue;
+    }
+    const tabValue = tabMetadata.value ?? tabMetadata.index;
+    if (oldValue === tabValue) {
+      oldTab = tabElement;
+    }
+    if (newValue === tabValue) {
+      newTab = tabElement;
+    }
+    if (oldTab != null && newTab != null) {
+      break;
+    }
+  }
+  if (oldTab == null || newTab == null) {
+    if (oldTab !== newTab && (typeof oldValue === "number" || typeof oldValue === "string") && typeof oldValue === typeof newValue) {
+      if (orientation === "horizontal") {
+        return newValue > oldValue ? "right" : "left";
+      }
+      return newValue > oldValue ? "down" : "up";
+    }
+    return "none";
+  }
+  const oldRect = oldTab.getBoundingClientRect();
+  const newRect = newTab.getBoundingClientRect();
+  if (orientation === "horizontal") {
+    if (newRect.left < oldRect.left) {
+      return "left";
+    }
+    if (newRect.left > oldRect.left) {
+      return "right";
+    }
+  } else {
+    if (newRect.top < oldRect.top) {
+      return "up";
+    }
+    if (newRect.top > oldRect.top) {
+      return "down";
+    }
+  }
+  return "none";
+}
+function TabsRoot(props) {
+  const slot = (0, import_internal.S)("TabsRoot");
+  const {
+    className,
+    defaultValue: defaultValueProp = 0,
+    onValueChange: onValueChangeProp,
+    orientation = "horizontal",
+    render,
+    value: valueProp,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const hasExplicitDefaultValueProp = props.defaultValue !== void 0;
+  const tabPanelRefs = (0, import_octane.useRef)([], (0, import_internal.subSlot)(slot, "panelRefs"));
+  const [mountedTabPanels, setMountedTabPanels] = (0, import_octane.useState)(
+    () => /* @__PURE__ */ new Map(),
+    (0, import_internal.subSlot)(slot, "mountedPanels")
+  );
+  const [value, setValue] = (0, import_useControlled.useControlled)(
+    { controlled: valueProp, default: defaultValueProp, name: "Tabs", state: "value" },
+    (0, import_internal.subSlot)(slot, "value")
+  );
+  const isControlled = valueProp !== void 0;
+  const [tabMap, setTabMap] = (0, import_octane.useState)(() => /* @__PURE__ */ new Map(), (0, import_internal.subSlot)(slot, "tabMap"));
+  const lastKnownTabElementRef = (0, import_octane.useRef)(void 0, (0, import_internal.subSlot)(slot, "lastTabEl"));
+  const getTabElementBySelectedValue = (0, import_useStableCallback.useStableCallback)(
+    (selectedValue) => {
+      if (selectedValue === void 0) {
+        return null;
+      }
+      for (const [tabElement, tabMetadata] of tabMap.entries()) {
+        if (tabMetadata != null && selectedValue === (tabMetadata.value ?? tabMetadata.index)) {
+          return tabElement;
+        }
+      }
+      return null;
+    },
+    (0, import_internal.subSlot)(slot, "getTabEl")
+  );
+  const [activationDirectionState, setActivationDirectionState] = (0, import_octane.useState)(
+    () => ({ previousValue: value, tabActivationDirection: "none" }),
+    (0, import_internal.subSlot)(slot, "activationDir")
+  );
+  const { previousValue, tabActivationDirection: committedTabActivationDirection } = activationDirectionState;
+  let tabActivationDirection = committedTabActivationDirection;
+  let directionComputationIncomplete = false;
+  if (previousValue !== value) {
+    tabActivationDirection = computeActivationDirection(previousValue, value, orientation, tabMap);
+    directionComputationIncomplete = previousValue != null && value != null && getTabElementBySelectedValue(value) == null;
+  }
+  const nextPreviousValue = directionComputationIncomplete ? previousValue : value;
+  const shouldSyncActivationDirectionState = previousValue !== nextPreviousValue || committedTabActivationDirection !== tabActivationDirection;
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (!shouldSyncActivationDirectionState) {
+        return;
+      }
+      setActivationDirectionState({
+        previousValue: nextPreviousValue,
+        tabActivationDirection
+      });
+    },
+    [nextPreviousValue, shouldSyncActivationDirectionState, tabActivationDirection],
+    (0, import_internal.subSlot)(slot, "e:syncDir")
+  );
+  const onValueChange = (0, import_useStableCallback.useStableCallback)(
+    (newValue, eventDetails) => {
+      const activationDirection = computeActivationDirection(value, newValue, orientation, tabMap);
+      eventDetails.activationDirection = activationDirection;
+      onValueChangeProp?.(newValue, eventDetails);
+      if (eventDetails.isCanceled) {
+        return;
+      }
+      setValue(newValue);
+    },
+    (0, import_internal.subSlot)(slot, "onValueChange")
+  );
+  const notifyAutomaticValueChange = (0, import_useStableCallback.useStableCallback)(
+    (nextValue, reason) => {
+      onValueChangeProp?.(
+        nextValue,
+        (0, import_createChangeEventDetails.createChangeEventDetails)(reason, void 0, void 0, {
+          activationDirection: "none"
+        })
+      );
+    },
+    (0, import_internal.subSlot)(slot, "notifyAuto")
+  );
+  const registerMountedTabPanel = (0, import_useStableCallback.useStableCallback)(
+    (panelValue, panelId) => {
+      setMountedTabPanels((prev) => {
+        if (prev.get(panelValue) === panelId) {
+          return prev;
+        }
+        const next = new Map(prev);
+        next.set(panelValue, panelId);
+        return next;
+      });
+    },
+    (0, import_internal.subSlot)(slot, "registerPanel")
+  );
+  const unregisterMountedTabPanel = (0, import_useStableCallback.useStableCallback)(
+    (panelValue, panelId) => {
+      setMountedTabPanels((prev) => {
+        if (!prev.has(panelValue) || prev.get(panelValue) !== panelId) {
+          return prev;
+        }
+        const next = new Map(prev);
+        next.delete(panelValue);
+        return next;
+      });
+    },
+    (0, import_internal.subSlot)(slot, "unregisterPanel")
+  );
+  const getTabPanelIdByValue = (0, import_useStableCallback.useStableCallback)(
+    (tabValue) => mountedTabPanels.get(tabValue),
+    (0, import_internal.subSlot)(slot, "getPanelId")
+  );
+  const getTabIdByPanelValue = (0, import_useStableCallback.useStableCallback)(
+    (tabPanelValue) => {
+      for (const tabMetadata of tabMap.values()) {
+        if (tabPanelValue === tabMetadata?.value) {
+          return tabMetadata?.id;
+        }
+      }
+      return void 0;
+    },
+    (0, import_internal.subSlot)(slot, "getTabId")
+  );
+  const tabsContextValue = (0, import_octane.useMemo)(
+    () => ({
+      getTabElementBySelectedValue,
+      getTabIdByPanelValue,
+      getTabPanelIdByValue,
+      onValueChange,
+      orientation,
+      registerMountedTabPanel,
+      setTabMap,
+      unregisterMountedTabPanel,
+      tabActivationDirection,
+      value
+    }),
+    [
+      getTabElementBySelectedValue,
+      getTabIdByPanelValue,
+      getTabPanelIdByValue,
+      onValueChange,
+      orientation,
+      registerMountedTabPanel,
+      setTabMap,
+      unregisterMountedTabPanel,
+      tabActivationDirection,
+      value
+    ],
+    (0, import_internal.subSlot)(slot, "ctx")
+  );
+  const selectedTabMetadata = (0, import_octane.useMemo)(
+    () => {
+      for (const tabMetadata of tabMap.values()) {
+        if (tabMetadata != null && tabMetadata.value === value) {
+          return tabMetadata;
+        }
+      }
+      return void 0;
+    },
+    [tabMap, value],
+    (0, import_internal.subSlot)(slot, "selectedMeta")
+  );
+  const firstEnabledTabValue = (0, import_octane.useMemo)(
+    () => {
+      for (const tabMetadata of tabMap.values()) {
+        if (tabMetadata != null && !tabMetadata.disabled) {
+          return tabMetadata.value;
+        }
+      }
+      return void 0;
+    },
+    [tabMap],
+    (0, import_internal.subSlot)(slot, "firstEnabled")
+  );
+  const shouldNotifyInitialValueChangeRef = (0, import_octane.useRef)(
+    !hasExplicitDefaultValueProp,
+    (0, import_internal.subSlot)(slot, "notifyInitial")
+  );
+  const initialDefaultValueRef = (0, import_octane.useRef)(defaultValueProp, (0, import_internal.subSlot)(slot, "initialDefault"));
+  const shouldHonorDisabledDefaultValueRef = (0, import_octane.useRef)(
+    hasExplicitDefaultValueProp,
+    (0, import_internal.subSlot)(slot, "honorDisabled")
+  );
+  const didRegisterTabsRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "didRegister"));
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (isControlled) {
+        return;
+      }
+      function commitAutomaticValueChange(fallbackValue, fallbackReason) {
+        setValue(fallbackValue);
+        setActivationDirectionState((prev) => {
+          if (prev.previousValue === fallbackValue && prev.tabActivationDirection === "none") {
+            return prev;
+          }
+          return { previousValue: fallbackValue, tabActivationDirection: "none" };
+        });
+        notifyAutomaticValueChange(fallbackValue, fallbackReason);
+        shouldNotifyInitialValueChangeRef.current = false;
+      }
+      if (tabMap.size === 0) {
+        if (didRegisterTabsRef.current && value !== null && !lastKnownTabElementRef.current?.isConnected) {
+          commitAutomaticValueChange(null, import_createChangeEventDetails.REASONS.missing);
+        }
+        return;
+      }
+      didRegisterTabsRef.current = true;
+      lastKnownTabElementRef.current = tabMap.keys().next().value;
+      const selectionIsDisabled = selectedTabMetadata?.disabled;
+      const selectionIsMissing = selectedTabMetadata == null && value !== null;
+      if (!selectionIsDisabled && value === initialDefaultValueRef.current) {
+        shouldHonorDisabledDefaultValueRef.current = false;
+      }
+      if (shouldHonorDisabledDefaultValueRef.current && selectionIsDisabled && value === initialDefaultValueRef.current) {
+        return;
+      }
+      const shouldNotifyInitialValueChange = shouldNotifyInitialValueChangeRef.current;
+      if (selectionIsDisabled || selectionIsMissing) {
+        const fallbackValue = firstEnabledTabValue ?? null;
+        if (value === fallbackValue) {
+          shouldNotifyInitialValueChangeRef.current = false;
+          return;
+        }
+        let fallbackReason = import_createChangeEventDetails.REASONS.missing;
+        if (shouldNotifyInitialValueChange) {
+          fallbackReason = import_createChangeEventDetails.REASONS.initial;
+        } else if (selectionIsDisabled) {
+          fallbackReason = import_createChangeEventDetails.REASONS.disabled;
+        }
+        commitAutomaticValueChange(fallbackValue, fallbackReason);
+        return;
+      }
+      if (shouldNotifyInitialValueChange && selectedTabMetadata != null) {
+        notifyAutomaticValueChange(value, import_createChangeEventDetails.REASONS.initial);
+        shouldNotifyInitialValueChangeRef.current = false;
+      }
+    },
+    [
+      firstEnabledTabValue,
+      isControlled,
+      notifyAutomaticValueChange,
+      selectedTabMetadata,
+      setValue,
+      tabMap,
+      value
+    ],
+    (0, import_internal.subSlot)(slot, "e:fallback")
+  );
+  const state = { orientation, tabActivationDirection };
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    {
+      state,
+      ref,
+      props: elementProps,
+      stateAttributesMapping: tabsStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  return (0, import_octane.createElement)(TabsRootContext.Provider, {
+    value: tabsContextValue,
+    children: (0, import_octane.createElement)(import_CompositeList.CompositeList, {
+      elementsRef: tabPanelRefs,
+      children: element
+    })
+  });
+}
+function TabsList(props) {
+  const slot = (0, import_internal.S)("TabsList");
+  const {
+    activateOnFocus = false,
+    className,
+    loopFocus = true,
+    render,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const { onValueChange, orientation, value, setTabMap, tabActivationDirection } = useTabsRootContext();
+  const [highlightedTabIndex, setHighlightedTabIndex] = (0, import_octane.useState)(0, (0, import_internal.subSlot)(slot, "highlighted"));
+  const [tabsListElement, setTabsListElement] = (0, import_octane.useState)(
+    null,
+    (0, import_internal.subSlot)(slot, "listEl")
+  );
+  const tabResizeObserverElementsRef = (0, import_octane.useRef)(/* @__PURE__ */ new Set(), (0, import_internal.subSlot)(slot, "resizeEls"));
+  const registerTabResizeObserverElement = (0, import_useStableCallback.useStableCallback)(
+    (element) => {
+      tabResizeObserverElementsRef.current.add(element);
+      return () => {
+        tabResizeObserverElementsRef.current.delete(element);
+      };
+    },
+    (0, import_internal.subSlot)(slot, "registerResize")
+  );
+  const onTabActivation = (0, import_useStableCallback.useStableCallback)(
+    (newValue, eventDetails) => {
+      if (newValue !== value) {
+        onValueChange(newValue, eventDetails);
+      }
+    },
+    (0, import_internal.subSlot)(slot, "onTabActivation")
+  );
+  const state = { orientation, tabActivationDirection };
+  const defaultProps = {
+    "aria-orientation": orientation === "vertical" ? "vertical" : void 0,
+    role: "tablist"
+  };
+  const tabsListContextValue = (0, import_octane.useMemo)(
+    () => ({
+      activateOnFocus,
+      highlightedTabIndex,
+      registerTabResizeObserverElement,
+      onTabActivation,
+      setHighlightedTabIndex,
+      tabsListElement
+    }),
+    [
+      activateOnFocus,
+      highlightedTabIndex,
+      registerTabResizeObserverElement,
+      onTabActivation,
+      setHighlightedTabIndex,
+      tabsListElement
+    ],
+    (0, import_internal.subSlot)(slot, "ctx")
+  );
+  return (0, import_octane.createElement)(TabsListContext.Provider, {
+    value: tabsListContextValue,
+    children: (0, import_octane.createElement)(import_CompositeRoot.CompositeRoot, {
+      render,
+      className,
+      style,
+      state,
+      refs: [ref, setTabsListElement],
+      props: [defaultProps, elementProps],
+      stateAttributesMapping: tabsStateAttributesMapping,
+      highlightedIndex: highlightedTabIndex,
+      enableHomeAndEndKeys: true,
+      loopFocus,
+      orientation,
+      onHighlightedIndexChange: setHighlightedTabIndex,
+      onMapChange: setTabMap,
+      disabledIndices: EMPTY_DISABLED_INDICES
+    })
+  });
+}
+function TabsTab(props) {
+  const slot = (0, import_internal.S)("TabsTab");
+  const {
+    className,
+    disabled = false,
+    render,
+    value,
+    id: idProp,
+    nativeButton = true,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const {
+    value: activeTabValue,
+    getTabPanelIdByValue,
+    orientation,
+    tabActivationDirection
+  } = useTabsRootContext();
+  const {
+    activateOnFocus,
+    highlightedTabIndex,
+    onTabActivation,
+    registerTabResizeObserverElement,
+    setHighlightedTabIndex,
+    tabsListElement
+  } = useTabsListContext();
+  const id = (0, import_useBaseUiId.useBaseUiId)(idProp, (0, import_internal.subSlot)(slot, "id"));
+  const tabMetadata = (0, import_octane.useMemo)(
+    () => ({ disabled, id, value }),
+    [disabled, id, value],
+    (0, import_internal.subSlot)(slot, "meta")
+  );
+  const { compositeProps, compositeRef, index } = (0, import_useCompositeItem.useCompositeItem)(
+    { metadata: tabMetadata },
+    (0, import_internal.subSlot)(slot, "composite")
+  );
+  const active = value === activeTabValue;
+  const isNavigatingRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "navigating"));
+  const tabElementRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "tabEl"));
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      const tabElement = tabElementRef.current;
+      if (!tabElement) {
+        return void 0;
+      }
+      return registerTabResizeObserverElement(tabElement);
+    },
+    [registerTabResizeObserverElement],
+    (0, import_internal.subSlot)(slot, "e:resize")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (isNavigatingRef.current) {
+        isNavigatingRef.current = false;
+        return;
+      }
+      if (!(active && index > -1 && highlightedTabIndex !== index)) {
+        return;
+      }
+      const listElement = tabsListElement;
+      if (listElement != null) {
+        const activeEl = (0, import_element.activeElement)((0, import_owner.ownerDocument)(listElement));
+        if (activeEl && (0, import_element.contains)(listElement, activeEl)) {
+          return;
+        }
+      }
+      if (!disabled) {
+        setHighlightedTabIndex(index);
+      }
+    },
+    [active, index, highlightedTabIndex, setHighlightedTabIndex, disabled, tabsListElement],
+    (0, import_internal.subSlot)(slot, "e:sync")
+  );
+  const { getButtonProps, buttonRef } = (0, import_useButton.useButton)(
+    { disabled, native: nativeButton, focusableWhenDisabled: true },
+    (0, import_internal.subSlot)(slot, "button")
+  );
+  const tabPanelId = getTabPanelIdByValue(value);
+  const isPressingRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "pressing"));
+  const isMainButtonRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "mainButton"));
+  function onClick(event) {
+    if (active || disabled) {
+      return;
+    }
+    onTabActivation(
+      value,
+      (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.none, event, void 0, { activationDirection: "none" })
+    );
+  }
+  function onFocus(event) {
+    if (active) {
+      return;
+    }
+    if (index > -1 && !disabled) {
+      setHighlightedTabIndex(index);
+    }
+    if (disabled) {
+      return;
+    }
+    if (activateOnFocus && (!isPressingRef.current || isPressingRef.current && isMainButtonRef.current)) {
+      onTabActivation(
+        value,
+        (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.none, event, void 0, { activationDirection: "none" })
+      );
+    }
+  }
+  function onPointerDown(event) {
+    if (active || disabled) {
+      return;
+    }
+    isPressingRef.current = true;
+    function handlePointerUp() {
+      isPressingRef.current = false;
+      isMainButtonRef.current = false;
+    }
+    if (!event.button || event.button === 0) {
+      isMainButtonRef.current = true;
+      const doc = (0, import_owner.ownerDocument)(event.currentTarget);
+      doc.addEventListener("pointerup", handlePointerUp, { once: true });
+    }
+  }
+  const state = { disabled, active, orientation, tabActivationDirection };
+  return (0, import_useRenderElement.useRenderElement)(
+    "button",
+    { render, className, style },
+    {
+      state,
+      ref: [ref, buttonRef, compositeRef, tabElementRef],
+      props: [
+        compositeProps,
+        {
+          role: "tab",
+          "aria-controls": tabPanelId,
+          "aria-selected": active,
+          id,
+          onClick,
+          onFocus,
+          onPointerDown,
+          [import_keys.ACTIVE_COMPOSITE_ITEM]: active ? "" : void 0,
+          onKeyDownCapture() {
+            isNavigatingRef.current = true;
+          }
+        },
+        elementProps,
+        getButtonProps
+      ],
+      stateAttributesMapping: tabsStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const panelStateAttributesMapping = {
+  ...tabsStateAttributesMapping,
+  ...import_useTransitionStatus.transitionStatusMapping
+};
+function TabsPanel(props) {
+  const slot = (0, import_internal.S)("TabsPanel");
+  const { className, value, render, keepMounted = false, style, ref, ...elementProps } = props;
+  const {
+    value: selectedValue,
+    getTabIdByPanelValue,
+    orientation,
+    tabActivationDirection,
+    registerMountedTabPanel,
+    unregisterMountedTabPanel
+  } = useTabsRootContext();
+  const id = (0, import_useBaseUiId.useBaseUiId)(void 0, (0, import_internal.subSlot)(slot, "id"));
+  const metadata = (0, import_octane.useMemo)(() => ({ id, value }), [id, value], (0, import_internal.subSlot)(slot, "meta"));
+  const { ref: listItemRef, index } = (0, import_useCompositeListItem.useCompositeListItem)({ metadata }, (0, import_internal.subSlot)(slot, "listItem"));
+  const open = value === selectedValue;
+  const { mounted, transitionStatus, setMounted } = (0, import_useTransitionStatus.useTransitionStatus)(
+    open,
+    (0, import_internal.subSlot)(slot, "transition")
+  );
+  const hidden = !mounted;
+  const correspondingTabId = getTabIdByPanelValue(value);
+  const state = { hidden, orientation, tabActivationDirection, transitionStatus };
+  const panelRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "panelRef"));
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    {
+      state,
+      ref: [ref, listItemRef, panelRef],
+      props: [
+        {
+          "aria-labelledby": correspondingTabId,
+          hidden,
+          id,
+          role: "tabpanel",
+          tabIndex: open ? 0 : -1,
+          inert: (0, import_inertValue.inertValue)(!open),
+          "data-index": index
+        },
+        elementProps
+      ],
+      stateAttributesMapping: panelStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  (0, import_useOpenChangeComplete.useOpenChangeComplete)(
+    {
+      open,
+      ref: panelRef,
+      onComplete() {
+        if (!open) {
+          setMounted(false);
+        }
+      }
+    },
+    (0, import_internal.subSlot)(slot, "openComplete")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (hidden && !keepMounted) {
+        return void 0;
+      }
+      if (id == null) {
+        return void 0;
+      }
+      registerMountedTabPanel(value, id);
+      return () => {
+        unregisterMountedTabPanel(value, id);
+      };
+    },
+    [hidden, keepMounted, value, id, registerMountedTabPanel, unregisterMountedTabPanel],
+    (0, import_internal.subSlot)(slot, "e:register")
+  );
+  const shouldRender = keepMounted || mounted;
+  if (!shouldRender) {
+    return null;
+  }
+  return element;
+}
+const Tabs = {
+  Root: TabsRoot,
+  List: TabsList,
+  Tab: TabsTab,
+  Panel: TabsPanel
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tabs,
+  TabsList,
+  TabsPanel,
+  TabsRoot,
+  TabsTab,
+  useTabsListContext,
+  useTabsRootContext
+});