@octanejs/base-ui 0.1.49 → 0.1.51

package/dist/cjs/tabs.cjs

@@ -1,727 +0,0 @@
-"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
-});