@wix/site-ui 1.29.0 → 1.31.0

package/dist/Tabs/index.js

@@ -1,7 +1,683 @@
-import { jsx } from "react/jsx-runtime";
-import { Tabs } from "@base-ui/react/tabs";
+import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
+import { EMPTY_ARRAY, useRenderElement, esm_formatErrorMessage } from "../8272.js";
+import { useControlled } from "../8527.js";
+import { useIsoLayoutEffect } from "../6499.js";
+import { useStableCallback } from "../7541.js";
+import { createChangeEventDetails } from "../4768.js";
+import { missing, initial, disabled as reason_parts_disabled } from "../2418.js";
+import { CompositeList } from "../9255.js";
+import { useBaseUiId } from "../6046.js";
+import { useCompositeItem } from "../2274.js";
+import { contains, activeElement } from "../4549.js";
+import { ownerDocument } from "../9829.js";
+import { useButton } from "../9189.js";
+import { ACTIVE_COMPOSITE_ITEM } from "../4346.js";
+import { useCSPContext } from "../6003.js";
+import { useIsHydrating } from "../2287.js";
+import { useForcedRerendering } from "../8935.js";
+import { getCssDimensions } from "../7642.js";
+import { stateAttributesMapping_TransitionStatusDataAttributes, useTransitionStatus, transitionStatusMapping, useOpenChangeComplete } from "../880.js";
+import { useCompositeListItem } from "../3021.js";
+import { inertValue } from "../167.js";
+import { CompositeRoot } from "../9087.js";
 import * as __rspack_external_react from "react";
+const TabsRootContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) TabsRootContext.displayName = "TabsRootContext";
+function useTabsRootContext() {
+    const context = __rspack_external_react.useContext(TabsRootContext);
+    if (void 0 === context) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: TabsRootContext is missing. Tabs parts must be placed within <Tabs.Root>.' : esm_formatErrorMessage(64));
+    return context;
+}
+let TabsRootDataAttributes_TabsRootDataAttributes = /*#__PURE__*/ function(TabsRootDataAttributes) {
+    TabsRootDataAttributes["activationDirection"] = "data-activation-direction";
+    TabsRootDataAttributes["orientation"] = "data-orientation";
+    return TabsRootDataAttributes;
+}({});
+const tabsStateAttributesMapping = {
+    tabActivationDirection: (dir)=>({
+            [TabsRootDataAttributes_TabsRootDataAttributes.activationDirection]: dir
+        })
+};
+const TabsRoot_TabsRoot = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { className, defaultValue: defaultValueProp = 0, onValueChange: onValueChangeProp, orientation = 'horizontal', render, value: valueProp, style, ...elementProps } = componentProps;
+    const hasExplicitDefaultValueProp = void 0 !== componentProps.defaultValue;
+    const tabPanelRefs = __rspack_external_react.useRef([]);
+    const [mountedTabPanels, setMountedTabPanels] = __rspack_external_react.useState(()=>new Map());
+    const [value, setValue] = useControlled({
+        controlled: valueProp,
+        default: defaultValueProp,
+        name: 'Tabs',
+        state: 'value'
+    });
+    const isControlled = void 0 !== valueProp;
+    const [tabMap, setTabMap] = __rspack_external_react.useState(()=>new Map());
+    const getTabElementBySelectedValue = __rspack_external_react.useCallback((selectedValue)=>{
+        if (void 0 === selectedValue) return null;
+        for (const [tabElement, tabMetadata] of tabMap.entries())if (null != tabMetadata && selectedValue === (tabMetadata.value ?? tabMetadata.index)) return tabElement;
+        return null;
+    }, [
+        tabMap
+    ]);
+    const [activationDirectionState, setActivationDirectionState] = __rspack_external_react.useState(()=>({
+            previousValue: value,
+            tabActivationDirection: 'none'
+        }));
+    const { previousValue, tabActivationDirection: committedTabActivationDirection } = activationDirectionState;
+    let tabActivationDirection = committedTabActivationDirection;
+    let directionComputationIncomplete = false;
+    if (previousValue !== value) {
+        tabActivationDirection = computeActivationDirection(previousValue, value, orientation, tabMap);
+        directionComputationIncomplete = null != previousValue && null != value && null == getTabElementBySelectedValue(value);
+    }
+    const nextPreviousValue = directionComputationIncomplete ? previousValue : value;
+    const shouldSyncActivationDirectionState = previousValue !== nextPreviousValue || committedTabActivationDirection !== tabActivationDirection;
+    useIsoLayoutEffect(()=>{
+        if (!shouldSyncActivationDirectionState) return;
+        setActivationDirectionState({
+            previousValue: nextPreviousValue,
+            tabActivationDirection
+        });
+    }, [
+        nextPreviousValue,
+        shouldSyncActivationDirectionState,
+        tabActivationDirection
+    ]);
+    const onValueChange = useStableCallback((newValue, eventDetails)=>{
+        const activationDirection = computeActivationDirection(value, newValue, orientation, tabMap);
+        eventDetails.activationDirection = activationDirection;
+        onValueChangeProp?.(newValue, eventDetails);
+        if (eventDetails.isCanceled) return;
+        setValue(newValue);
+    });
+    const notifyAutomaticValueChange = useStableCallback((nextValue, reason)=>{
+        onValueChangeProp?.(nextValue, createChangeEventDetails(reason, void 0, void 0, {
+            activationDirection: 'none'
+        }));
+    });
+    const registerMountedTabPanel = useStableCallback((panelValue, panelId)=>{
+        setMountedTabPanels((prev)=>{
+            if (prev.get(panelValue) === panelId) return prev;
+            const next = new Map(prev);
+            next.set(panelValue, panelId);
+            return next;
+        });
+    });
+    const unregisterMountedTabPanel = 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;
+        });
+    });
+    const getTabPanelIdByValue = __rspack_external_react.useCallback((tabValue)=>mountedTabPanels.get(tabValue), [
+        mountedTabPanels
+    ]);
+    const getTabIdByPanelValue = __rspack_external_react.useCallback((tabPanelValue)=>{
+        for (const tabMetadata of tabMap.values())if (tabPanelValue === tabMetadata?.value) return tabMetadata?.id;
+    }, [
+        tabMap
+    ]);
+    const tabsContextValue = __rspack_external_react.useMemo(()=>({
+            getTabElementBySelectedValue,
+            getTabIdByPanelValue,
+            getTabPanelIdByValue,
+            onValueChange,
+            orientation,
+            registerMountedTabPanel,
+            setTabMap,
+            unregisterMountedTabPanel,
+            tabActivationDirection,
+            value
+        }), [
+        getTabElementBySelectedValue,
+        getTabIdByPanelValue,
+        getTabPanelIdByValue,
+        onValueChange,
+        orientation,
+        registerMountedTabPanel,
+        setTabMap,
+        unregisterMountedTabPanel,
+        tabActivationDirection,
+        value
+    ]);
+    const selectedTabMetadata = __rspack_external_react.useMemo(()=>{
+        for (const tabMetadata of tabMap.values())if (null != tabMetadata && tabMetadata.value === value) return tabMetadata;
+    }, [
+        tabMap,
+        value
+    ]);
+    const firstEnabledTabValue = __rspack_external_react.useMemo(()=>{
+        for (const tabMetadata of tabMap.values())if (null != tabMetadata && !tabMetadata.disabled) return tabMetadata.value;
+    }, [
+        tabMap
+    ]);
+    const shouldNotifyInitialValueChangeRef = __rspack_external_react.useRef(!hasExplicitDefaultValueProp);
+    const shouldHonorDisabledDefaultValueRef = __rspack_external_react.useRef(hasExplicitDefaultValueProp);
+    const didRegisterTabsRef = __rspack_external_react.useRef(false);
+    useIsoLayoutEffect(()=>{
+        if (isControlled) return;
+        function commitAutomaticValueChange(fallbackValue, fallbackReason) {
+            setValue(fallbackValue);
+            setActivationDirectionState((prev)=>{
+                if (prev.previousValue === fallbackValue && 'none' === prev.tabActivationDirection) return prev;
+                return {
+                    previousValue: fallbackValue,
+                    tabActivationDirection: 'none'
+                };
+            });
+            notifyAutomaticValueChange(fallbackValue, fallbackReason);
+            shouldNotifyInitialValueChangeRef.current = false;
+        }
+        if (0 === tabMap.size) {
+            if (!didRegisterTabsRef.current || null === value) return;
+            commitAutomaticValueChange(null, missing);
+            return;
+        }
+        didRegisterTabsRef.current = true;
+        const selectionIsDisabled = selectedTabMetadata?.disabled;
+        const selectionIsMissing = null == selectedTabMetadata && null !== value;
+        if (!selectionIsDisabled && value === defaultValueProp) shouldHonorDisabledDefaultValueRef.current = false;
+        if (shouldHonorDisabledDefaultValueRef.current && selectionIsDisabled && value === defaultValueProp) return;
+        const shouldNotifyInitialValueChange = shouldNotifyInitialValueChangeRef.current;
+        if (selectionIsDisabled || selectionIsMissing) {
+            const fallbackValue = firstEnabledTabValue ?? null;
+            if (value === fallbackValue) {
+                shouldNotifyInitialValueChangeRef.current = false;
+                return;
+            }
+            let fallbackReason = missing;
+            if (shouldNotifyInitialValueChange) fallbackReason = initial;
+            else if (selectionIsDisabled) fallbackReason = reason_parts_disabled;
+            commitAutomaticValueChange(fallbackValue, fallbackReason);
+            return;
+        }
+        if (shouldNotifyInitialValueChange && null != selectedTabMetadata) {
+            notifyAutomaticValueChange(value, initial);
+            shouldNotifyInitialValueChangeRef.current = false;
+        }
+    }, [
+        defaultValueProp,
+        firstEnabledTabValue,
+        isControlled,
+        notifyAutomaticValueChange,
+        selectedTabMetadata,
+        setValue,
+        tabMap,
+        value
+    ]);
+    const state = {
+        orientation,
+        tabActivationDirection
+    };
+    const element = useRenderElement('div', componentProps, {
+        state,
+        ref: forwardedRef,
+        props: elementProps,
+        stateAttributesMapping: tabsStateAttributesMapping
+    });
+    return /*#__PURE__*/ jsx(TabsRootContext.Provider, {
+        value: tabsContextValue,
+        children: /*#__PURE__*/ jsx(CompositeList, {
+            elementsRef: tabPanelRefs,
+            children: element
+        })
+    });
+});
+if ("production" !== process.env.NODE_ENV) TabsRoot_TabsRoot.displayName = "TabsRoot";
+function computeActivationDirection(oldValue, newValue, orientation, tabMap) {
+    if (null == oldValue || null == newValue) return 'none';
+    let oldTab = null;
+    let newTab = null;
+    for (const [tabElement, tabMetadata] of tabMap.entries()){
+        if (null == tabMetadata) continue;
+        const tabValue = tabMetadata.value ?? tabMetadata.index;
+        if (oldValue === tabValue) oldTab = tabElement;
+        if (newValue === tabValue) newTab = tabElement;
+        if (null != oldTab && null != newTab) break;
+    }
+    if (null == oldTab || null == newTab) {
+        if (oldTab !== newTab && ('number' == typeof oldValue || 'string' == typeof oldValue) && typeof oldValue === typeof newValue) {
+            if ('horizontal' === orientation) return newValue > oldValue ? 'right' : 'left';
+            return newValue > oldValue ? 'down' : 'up';
+        }
+        return 'none';
+    }
+    const oldRect = oldTab.getBoundingClientRect();
+    const newRect = newTab.getBoundingClientRect();
+    if ('horizontal' === orientation) {
+        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';
+}
+const TabsListContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) TabsListContext.displayName = "TabsListContext";
+function useTabsListContext() {
+    const context = __rspack_external_react.useContext(TabsListContext);
+    if (void 0 === context) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: TabsListContext is missing. TabsList parts must be placed within <Tabs.List>.' : esm_formatErrorMessage(65));
+    return context;
+}
+const TabsTab_TabsTab = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { className, disabled = false, render, value, id: idProp, nativeButton = true, style, ...elementProps } = componentProps;
+    const { value: activeTabValue, getTabPanelIdByValue, orientation } = useTabsRootContext();
+    const { activateOnFocus, highlightedTabIndex, onTabActivation, registerTabResizeObserverElement, setHighlightedTabIndex, tabsListElement } = useTabsListContext();
+    const id = useBaseUiId(idProp);
+    const tabMetadata = __rspack_external_react.useMemo(()=>({
+            disabled,
+            id,
+            value
+        }), [
+        disabled,
+        id,
+        value
+    ]);
+    const { compositeProps, compositeRef, index } = useCompositeItem({
+        metadata: tabMetadata
+    });
+    const active = value === activeTabValue;
+    const isNavigatingRef = __rspack_external_react.useRef(false);
+    const tabElementRef = __rspack_external_react.useRef(null);
+    __rspack_external_react.useEffect(()=>{
+        const tabElement = tabElementRef.current;
+        if (!tabElement) return;
+        return registerTabResizeObserverElement(tabElement);
+    }, [
+        registerTabResizeObserverElement
+    ]);
+    useIsoLayoutEffect(()=>{
+        if (isNavigatingRef.current) {
+            isNavigatingRef.current = false;
+            return;
+        }
+        if (!(active && index > -1 && highlightedTabIndex !== index)) return;
+        const listElement = tabsListElement;
+        if (null != listElement) {
+            const activeEl = activeElement(ownerDocument(listElement));
+            if (activeEl && contains(listElement, activeEl)) return;
+        }
+        if (!disabled) setHighlightedTabIndex(index);
+    }, [
+        active,
+        index,
+        highlightedTabIndex,
+        setHighlightedTabIndex,
+        disabled,
+        tabsListElement
+    ]);
+    const { getButtonProps, buttonRef } = useButton({
+        disabled,
+        native: nativeButton,
+        focusableWhenDisabled: true
+    });
+    const tabPanelId = getTabPanelIdByValue(value);
+    const isPressingRef = __rspack_external_react.useRef(false);
+    const isMainButtonRef = __rspack_external_react.useRef(false);
+    function onClick(event) {
+        if (active || disabled) return;
+        onTabActivation(value, createChangeEventDetails("none", event.nativeEvent, 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, createChangeEventDetails("none", event.nativeEvent, 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 || 0 === event.button) {
+            isMainButtonRef.current = true;
+            const doc = ownerDocument(event.currentTarget);
+            doc.addEventListener('pointerup', handlePointerUp, {
+                once: true
+            });
+        }
+    }
+    const state = {
+        disabled,
+        active,
+        orientation
+    };
+    const element = useRenderElement('button', componentProps, {
+        state,
+        ref: [
+            forwardedRef,
+            buttonRef,
+            compositeRef,
+            tabElementRef
+        ],
+        props: [
+            compositeProps,
+            {
+                role: 'tab',
+                'aria-controls': tabPanelId,
+                'aria-selected': active,
+                id,
+                onClick,
+                onFocus,
+                onPointerDown,
+                [ACTIVE_COMPOSITE_ITEM]: active ? '' : void 0,
+                onKeyDownCapture () {
+                    isNavigatingRef.current = true;
+                }
+            },
+            elementProps,
+            getButtonProps
+        ]
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) TabsTab_TabsTab.displayName = "TabsTab";
+const script = '!function(){const t=document.currentScript.previousElementSibling;if(!t)return;const e=t.closest(\'[role="tablist"]\');if(!e)return;const i=e.querySelector("[data-active]");if(!i)return;if(0===i.offsetWidth||0===e.offsetWidth)return;let o=0,n=0,h=0,l=0,r=0,f=0;function s(t){const e=getComputedStyle(t);let i=parseFloat(e.width)||0,o=parseFloat(e.height)||0;return(Math.round(i)!==t.offsetWidth||Math.round(o)!==t.offsetHeight)&&(i=t.offsetWidth,o=t.offsetHeight),{width:i,height:o}}if(null!=i&&null!=e){const{width:t,height:c}=s(i),{width:u,height:d}=s(e),a=i.getBoundingClientRect(),g=e.getBoundingClientRect(),p=u>0?g.width/u:1,b=d>0?g.height/d:1;if(Math.abs(p)>Number.EPSILON&&Math.abs(b)>Number.EPSILON){const t=a.left-g.left,i=a.top-g.top;o=t/p+e.scrollLeft-e.clientLeft,h=i/b+e.scrollTop-e.clientTop}else o=i.offsetLeft,h=i.offsetTop;r=t,f=c,n=e.scrollWidth-o-r,l=e.scrollHeight-h-f}function c(e,i){t.style.setProperty(`--active-tab-${e}`,`${i}px`)}c("left",o),c("right",n),c("top",h),c("bottom",l),c("width",r),c("height",f),r>0&&f>0&&t.removeAttribute("hidden")}();';
+let TabsIndicatorCssVars_TabsIndicatorCssVars = /*#__PURE__*/ function(TabsIndicatorCssVars) {
+    TabsIndicatorCssVars["activeTabLeft"] = "--active-tab-left";
+    TabsIndicatorCssVars["activeTabRight"] = "--active-tab-right";
+    TabsIndicatorCssVars["activeTabTop"] = "--active-tab-top";
+    TabsIndicatorCssVars["activeTabBottom"] = "--active-tab-bottom";
+    TabsIndicatorCssVars["activeTabWidth"] = "--active-tab-width";
+    TabsIndicatorCssVars["activeTabHeight"] = "--active-tab-height";
+    return TabsIndicatorCssVars;
+}({});
+const stateAttributesMapping = {
+    ...tabsStateAttributesMapping,
+    activeTabPosition: ()=>null,
+    activeTabSize: ()=>null
+};
+const TabsIndicator_TabsIndicator = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { className, render, renderBeforeHydration = false, style: styleProp, ...elementProps } = componentProps;
+    const { nonce } = useCSPContext();
+    const { getTabElementBySelectedValue, orientation, tabActivationDirection, value } = useTabsRootContext();
+    const { tabsListElement, registerIndicatorUpdateListener } = useTabsListContext();
+    const isHydrating = useIsHydrating();
+    const rerender = useForcedRerendering();
+    __rspack_external_react.useEffect(()=>registerIndicatorUpdateListener(rerender), [
+        registerIndicatorUpdateListener,
+        rerender
+    ]);
+    let left = 0;
+    let right = 0;
+    let top = 0;
+    let bottom = 0;
+    let width = 0;
+    let height = 0;
+    let isTabSelected = false;
+    if (null != value && null != tabsListElement) {
+        const activeTab = getTabElementBySelectedValue(value);
+        isTabSelected = true;
+        if (null != activeTab) {
+            const { width: computedWidth, height: computedHeight } = getCssDimensions(activeTab);
+            const { width: tabListWidth, height: tabListHeight } = getCssDimensions(tabsListElement);
+            const tabRect = activeTab.getBoundingClientRect();
+            const tabsListRect = tabsListElement.getBoundingClientRect();
+            const scaleX = tabListWidth > 0 ? tabsListRect.width / tabListWidth : 1;
+            const scaleY = tabListHeight > 0 ? tabsListRect.height / tabListHeight : 1;
+            const hasNonZeroScale = Math.abs(scaleX) > Number.EPSILON && Math.abs(scaleY) > Number.EPSILON;
+            if (hasNonZeroScale) {
+                const tabLeftDelta = tabRect.left - tabsListRect.left;
+                const tabTopDelta = tabRect.top - tabsListRect.top;
+                left = tabLeftDelta / scaleX + tabsListElement.scrollLeft - tabsListElement.clientLeft;
+                top = tabTopDelta / scaleY + tabsListElement.scrollTop - tabsListElement.clientTop;
+            } else {
+                left = activeTab.offsetLeft;
+                top = activeTab.offsetTop;
+            }
+            width = computedWidth;
+            height = computedHeight;
+            right = tabsListElement.scrollWidth - left - width;
+            bottom = tabsListElement.scrollHeight - top - height;
+        }
+    }
+    const activeTabPosition = isTabSelected ? {
+        left,
+        right,
+        top,
+        bottom
+    } : null;
+    const activeTabSize = isTabSelected ? {
+        width,
+        height
+    } : null;
+    const style = isTabSelected ? {
+        [TabsIndicatorCssVars_TabsIndicatorCssVars.activeTabLeft]: `${left}px`,
+        [TabsIndicatorCssVars_TabsIndicatorCssVars.activeTabRight]: `${right}px`,
+        [TabsIndicatorCssVars_TabsIndicatorCssVars.activeTabTop]: `${top}px`,
+        [TabsIndicatorCssVars_TabsIndicatorCssVars.activeTabBottom]: `${bottom}px`,
+        [TabsIndicatorCssVars_TabsIndicatorCssVars.activeTabWidth]: `${width}px`,
+        [TabsIndicatorCssVars_TabsIndicatorCssVars.activeTabHeight]: `${height}px`
+    } : void 0;
+    const displayIndicator = isTabSelected && width > 0 && height > 0;
+    const state = {
+        orientation,
+        activeTabPosition,
+        activeTabSize,
+        tabActivationDirection
+    };
+    const element = useRenderElement('span', componentProps, {
+        state,
+        ref: forwardedRef,
+        props: [
+            {
+                role: 'presentation',
+                style,
+                hidden: !displayIndicator
+            },
+            elementProps,
+            {
+                suppressHydrationWarning: true
+            }
+        ],
+        stateAttributesMapping: stateAttributesMapping
+    });
+    if (null == value) return null;
+    return /*#__PURE__*/ jsxs(__rspack_external_react.Fragment, {
+        children: [
+            element,
+            isHydrating && renderBeforeHydration && /*#__PURE__*/ jsx("script", {
+                nonce: nonce,
+                dangerouslySetInnerHTML: {
+                    __html: script
+                },
+                suppressHydrationWarning: true
+            })
+        ]
+    });
+});
+if ("production" !== process.env.NODE_ENV) TabsIndicator_TabsIndicator.displayName = "TabsIndicator";
+let TabsPanelDataAttributes_TabsPanelDataAttributes = function(TabsPanelDataAttributes) {
+    TabsPanelDataAttributes["index"] = "data-index";
+    TabsPanelDataAttributes["activationDirection"] = "data-activation-direction";
+    TabsPanelDataAttributes["orientation"] = "data-orientation";
+    TabsPanelDataAttributes["hidden"] = "data-hidden";
+    TabsPanelDataAttributes[TabsPanelDataAttributes["startingStyle"] = stateAttributesMapping_TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+    TabsPanelDataAttributes[TabsPanelDataAttributes["endingStyle"] = stateAttributesMapping_TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+    return TabsPanelDataAttributes;
+}({});
+const TabsPanel_stateAttributesMapping = {
+    ...tabsStateAttributesMapping,
+    ...transitionStatusMapping
+};
+const TabsPanel_TabsPanel = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { className, value, render, keepMounted = false, style, ...elementProps } = componentProps;
+    const { value: selectedValue, getTabIdByPanelValue, orientation, tabActivationDirection, registerMountedTabPanel, unregisterMountedTabPanel } = useTabsRootContext();
+    const id = useBaseUiId();
+    const metadata = __rspack_external_react.useMemo(()=>({
+            id,
+            value
+        }), [
+        id,
+        value
+    ]);
+    const { ref: listItemRef, index } = useCompositeListItem({
+        metadata
+    });
+    const open = value === selectedValue;
+    const { mounted, transitionStatus, setMounted } = useTransitionStatus(open);
+    const hidden = !mounted;
+    const correspondingTabId = getTabIdByPanelValue(value);
+    const state = {
+        hidden,
+        orientation,
+        tabActivationDirection,
+        transitionStatus
+    };
+    const panelRef = __rspack_external_react.useRef(null);
+    const element = useRenderElement('div', componentProps, {
+        state,
+        ref: [
+            forwardedRef,
+            listItemRef,
+            panelRef
+        ],
+        props: [
+            {
+                'aria-labelledby': correspondingTabId,
+                hidden,
+                id,
+                role: 'tabpanel',
+                tabIndex: open ? 0 : -1,
+                inert: inertValue(!open),
+                [TabsPanelDataAttributes_TabsPanelDataAttributes.index]: index
+            },
+            elementProps
+        ],
+        stateAttributesMapping: TabsPanel_stateAttributesMapping
+    });
+    useOpenChangeComplete({
+        open,
+        ref: panelRef,
+        onComplete () {
+            if (!open) setMounted(false);
+        }
+    });
+    useIsoLayoutEffect(()=>{
+        if (hidden && !keepMounted) return;
+        if (null == id) return;
+        registerMountedTabPanel(value, id);
+        return ()=>{
+            unregisterMountedTabPanel(value, id);
+        };
+    }, [
+        hidden,
+        keepMounted,
+        value,
+        id,
+        registerMountedTabPanel,
+        unregisterMountedTabPanel
+    ]);
+    const shouldRender = keepMounted || mounted;
+    if (!shouldRender) return null;
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) TabsPanel_TabsPanel.displayName = "TabsPanel";
+const TabsList_TabsList = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { activateOnFocus = false, className, loopFocus = true, render, style, ...elementProps } = componentProps;
+    const { onValueChange, orientation, value, setTabMap, tabActivationDirection } = useTabsRootContext();
+    const [highlightedTabIndex, setHighlightedTabIndex] = __rspack_external_react.useState(0);
+    const [tabsListElement, setTabsListElement] = __rspack_external_react.useState(null);
+    const indicatorUpdateListenersRef = __rspack_external_react.useRef(new Set());
+    const tabResizeObserverElementsRef = __rspack_external_react.useRef(new Set());
+    const resizeObserverRef = __rspack_external_react.useRef(null);
+    __rspack_external_react.useEffect(()=>{
+        if ("u" < typeof ResizeObserver) return;
+        const resizeObserver = new ResizeObserver(()=>{
+            indicatorUpdateListenersRef.current.forEach((listener)=>{
+                listener();
+            });
+        });
+        resizeObserverRef.current = resizeObserver;
+        if (tabsListElement) resizeObserver.observe(tabsListElement);
+        tabResizeObserverElementsRef.current.forEach((element)=>{
+            resizeObserver.observe(element);
+        });
+        return ()=>{
+            resizeObserver.disconnect();
+            resizeObserverRef.current = null;
+        };
+    }, [
+        tabsListElement
+    ]);
+    const registerIndicatorUpdateListener = useStableCallback((listener)=>{
+        indicatorUpdateListenersRef.current.add(listener);
+        return ()=>{
+            indicatorUpdateListenersRef.current.delete(listener);
+        };
+    });
+    const registerTabResizeObserverElement = useStableCallback((element)=>{
+        tabResizeObserverElementsRef.current.add(element);
+        resizeObserverRef.current?.observe(element);
+        return ()=>{
+            tabResizeObserverElementsRef.current.delete(element);
+            resizeObserverRef.current?.unobserve(element);
+        };
+    });
+    const onTabActivation = useStableCallback((newValue, eventDetails)=>{
+        if (newValue !== value) onValueChange(newValue, eventDetails);
+    });
+    const state = {
+        orientation,
+        tabActivationDirection
+    };
+    const defaultProps = {
+        'aria-orientation': 'vertical' === orientation ? 'vertical' : void 0,
+        role: 'tablist'
+    };
+    const tabsListContextValue = __rspack_external_react.useMemo(()=>({
+            activateOnFocus,
+            highlightedTabIndex,
+            registerIndicatorUpdateListener,
+            registerTabResizeObserverElement,
+            onTabActivation,
+            setHighlightedTabIndex,
+            tabsListElement
+        }), [
+        activateOnFocus,
+        highlightedTabIndex,
+        registerIndicatorUpdateListener,
+        registerTabResizeObserverElement,
+        onTabActivation,
+        setHighlightedTabIndex,
+        tabsListElement
+    ]);
+    return /*#__PURE__*/ jsx(TabsListContext.Provider, {
+        value: tabsListContextValue,
+        children: /*#__PURE__*/ jsx(CompositeRoot, {
+            render: render,
+            className: className,
+            style: style,
+            state: state,
+            refs: [
+                forwardedRef,
+                setTabsListElement
+            ],
+            props: [
+                defaultProps,
+                elementProps
+            ],
+            stateAttributesMapping: tabsStateAttributesMapping,
+            highlightedIndex: highlightedTabIndex,
+            enableHomeAndEndKeys: true,
+            loopFocus: loopFocus,
+            orientation: orientation,
+            onHighlightedIndexChange: setHighlightedTabIndex,
+            onMapChange: setTabMap,
+            disabledIndices: EMPTY_ARRAY
+        })
+    });
+});
+if ("production" !== process.env.NODE_ENV) TabsList_TabsList.displayName = "TabsList";
 const Tabs_module = {
     root: "root-Hb4MhN",
     list: "list-ZEK7AG",
@@ -14,22 +690,22 @@ const Tabs_module = {
     indicator: "indicator-a2Roef",
     panel: "panel-dMpxFc"
 };
-const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Tabs.Root, {
+const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(TabsRoot_TabsRoot, {
         ref: ref,
         className: clsx(Tabs_module.root, className),
         ...props
     }));
-const Tab = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Tabs.Tab, {
+const Tab = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(TabsTab_TabsTab, {
         ref: ref,
         className: clsx(Tabs_module.tab, className, 'has-custom-focus'),
         ...props
     }));
-const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Tabs.Indicator, {
+const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(TabsIndicator_TabsIndicator, {
         ref: ref,
         className: clsx(Tabs_module.indicator, className),
         ...props
     }));
-const Panel = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Tabs.Panel, {
+const Panel = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(TabsPanel_TabsPanel, {
         ref: ref,
         className: clsx(Tabs_module.panel, className),
         ...props
@@ -54,16 +730,16 @@ const alignClassMap = {
     center: Tabs_module.alignCenter,
     end: Tabs_module.alignEnd
 };
-const List = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, underline = 'full', align = 'center', ...props }, ref)=>/*#__PURE__*/ jsx(Tabs.List, {
+const List = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, underline = 'full', align = 'center', ...props }, ref)=>/*#__PURE__*/ jsx(TabsList_TabsList, {
         ref: ref,
         className: clsx(Tabs_module.list, alignClassMap[align], underlineClassMap[underline], className),
         ...props
     }));
-const Tabs_Tabs = {
+const Tabs = {
     Root: Root,
     Tab: Tab,
     Indicator: Indicator,
     Panel: Panel,
     List: List
 };
-export { TabListAlign, TabListUnderline, Tabs_Tabs as Tabs };
+export { TabListAlign, TabListUnderline, Tabs };