dune-react 0.0.1 → 0.0.3

package/dist/node_modules/.pnpm/@base-ui_react@1.3.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/tabs/list/TabsList.js

@@ -0,0 +1,201 @@
+import * as React from "react";
+import { useStableCallback } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useStableCallback.js";
+import { useIsoLayoutEffect } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useIsoLayoutEffect.js";
+import { CompositeRoot } from "../../composite/root/CompositeRoot.js";
+import { tabsStateAttributesMapping } from "../root/stateAttributesMapping.js";
+import { useTabsRootContext } from "../root/TabsRootContext.js";
+import { TabsListContext } from "./TabsListContext.js";
+import { jsx } from "react/jsx-runtime";
+import { EMPTY_ARRAY } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/empty.js";
+const TabsList = /* @__PURE__ */ React.forwardRef(function TabsList2(componentProps, forwardedRef) {
+  const {
+    activateOnFocus = false,
+    className,
+    loopFocus = true,
+    render,
+    ...elementProps
+  } = componentProps;
+  const {
+    getTabElementBySelectedValue,
+    onValueChange,
+    orientation,
+    value,
+    setTabMap,
+    tabActivationDirection
+  } = useTabsRootContext();
+  const [highlightedTabIndex, setHighlightedTabIndex] = React.useState(0);
+  const [tabsListElement, setTabsListElement] = React.useState(null);
+  const indicatorUpdateListenersRef = React.useRef(/* @__PURE__ */ new Set());
+  const tabResizeObserverElementsRef = React.useRef(/* @__PURE__ */ new Set());
+  const resizeObserverRef = React.useRef(null);
+  const notifyIndicatorUpdateListeners = useStableCallback(() => {
+    indicatorUpdateListenersRef.current.forEach((listener) => {
+      listener();
+    });
+  });
+  React.useEffect(() => {
+    if (typeof ResizeObserver === "undefined") {
+      return void 0;
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      if (!indicatorUpdateListenersRef.current.size) {
+        return;
+      }
+      notifyIndicatorUpdateListeners();
+    });
+    resizeObserverRef.current = resizeObserver;
+    if (tabsListElement) {
+      resizeObserver.observe(tabsListElement);
+    }
+    tabResizeObserverElementsRef.current.forEach((element) => {
+      resizeObserver.observe(element);
+    });
+    return () => {
+      resizeObserver.disconnect();
+      resizeObserverRef.current = null;
+    };
+  }, [tabsListElement, notifyIndicatorUpdateListeners]);
+  const registerIndicatorUpdateListener = useStableCallback((listener) => {
+    indicatorUpdateListenersRef.current.add(listener);
+    return () => {
+      indicatorUpdateListenersRef.current.delete(listener);
+    };
+  });
+  const registerTabResizeObserverElement = useStableCallback((element) => {
+    var _a;
+    tabResizeObserverElementsRef.current.add(element);
+    (_a = resizeObserverRef.current) == null ? void 0 : _a.observe(element);
+    return () => {
+      var _a2;
+      tabResizeObserverElementsRef.current.delete(element);
+      (_a2 = resizeObserverRef.current) == null ? void 0 : _a2.unobserve(element);
+    };
+  });
+  const detectActivationDirection = useActivationDirectionDetector(
+    value,
+    // the old value
+    orientation,
+    tabsListElement,
+    getTabElementBySelectedValue
+  );
+  const onTabActivation = useStableCallback((newValue, eventDetails) => {
+    if (newValue !== value) {
+      const activationDirection = detectActivationDirection(newValue);
+      eventDetails.activationDirection = activationDirection;
+      onValueChange(newValue, eventDetails);
+    }
+  });
+  const state = {
+    orientation,
+    tabActivationDirection
+  };
+  const defaultProps = {
+    "aria-orientation": orientation === "vertical" ? "vertical" : void 0,
+    role: "tablist"
+  };
+  const tabsListContextValue = 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,
+      className,
+      state,
+      refs: [forwardedRef, setTabsListElement],
+      props: [defaultProps, elementProps],
+      stateAttributesMapping: tabsStateAttributesMapping,
+      highlightedIndex: highlightedTabIndex,
+      enableHomeAndEndKeys: true,
+      loopFocus,
+      orientation,
+      onHighlightedIndexChange: setHighlightedTabIndex,
+      onMapChange: setTabMap,
+      disabledIndices: EMPTY_ARRAY
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") TabsList.displayName = "TabsList";
+function getInset(tab, tabsList) {
+  const {
+    left: tabLeft,
+    top: tabTop
+  } = tab.getBoundingClientRect();
+  const {
+    left: listLeft,
+    top: listTop
+  } = tabsList.getBoundingClientRect();
+  const left = tabLeft - listLeft;
+  const top = tabTop - listTop;
+  return {
+    left,
+    top
+  };
+}
+function useActivationDirectionDetector(activeTabValue, orientation, tabsListElement, getTabElement) {
+  const [previousTabEdge, setPreviousTabEdge] = React.useState(null);
+  useIsoLayoutEffect(() => {
+    if (activeTabValue == null || tabsListElement == null) {
+      setPreviousTabEdge(null);
+      return;
+    }
+    const activeTab = getTabElement(activeTabValue);
+    if (activeTab == null) {
+      setPreviousTabEdge(null);
+      return;
+    }
+    const {
+      left,
+      top
+    } = getInset(activeTab, tabsListElement);
+    setPreviousTabEdge(orientation === "horizontal" ? left : top);
+  }, [orientation, getTabElement, tabsListElement, activeTabValue]);
+  return React.useCallback((newValue) => {
+    if (newValue === activeTabValue) {
+      return "none";
+    }
+    if (newValue == null) {
+      setPreviousTabEdge(null);
+      return "none";
+    }
+    if (newValue != null && tabsListElement != null) {
+      const activeTabElement = getTabElement(newValue);
+      if (activeTabElement != null) {
+        const {
+          left,
+          top
+        } = getInset(activeTabElement, tabsListElement);
+        if (previousTabEdge == null) {
+          setPreviousTabEdge(orientation === "horizontal" ? left : top);
+          return "none";
+        }
+        if (orientation === "horizontal") {
+          if (left < previousTabEdge) {
+            setPreviousTabEdge(left);
+            return "left";
+          }
+          if (left > previousTabEdge) {
+            setPreviousTabEdge(left);
+            return "right";
+          }
+        } else if (top < previousTabEdge) {
+          setPreviousTabEdge(top);
+          return "up";
+        } else if (top > previousTabEdge) {
+          setPreviousTabEdge(top);
+          return "down";
+        }
+      }
+    }
+    return "none";
+  }, [getTabElement, orientation, previousTabEdge, tabsListElement, activeTabValue]);
+}
+export {
+  TabsList
+};

package/dist/node_modules/.pnpm/@base-ui_react@1.3.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/tabs/list/TabsListContext.js

@@ -0,0 +1,15 @@
+import formatErrorMessage from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/formatErrorMessage.js";
+import * as React from "react";
+const TabsListContext = /* @__PURE__ */ React.createContext(void 0);
+if (process.env.NODE_ENV !== "production") TabsListContext.displayName = "TabsListContext";
+function useTabsListContext() {
+  const context = React.useContext(TabsListContext);
+  if (context === void 0) {
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: TabsListContext is missing. TabsList parts must be placed within <Tabs.List>." : formatErrorMessage(65));
+  }
+  return context;
+}
+export {
+  TabsListContext,
+  useTabsListContext
+};

package/dist/node_modules/.pnpm/@base-ui_react@1.3.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/tabs/panel/TabsPanel.js

@@ -0,0 +1,103 @@
+import * as React from "react";
+import { inertValue } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/inertValue.js";
+import { useIsoLayoutEffect } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useIsoLayoutEffect.js";
+import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
+import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
+import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useCompositeListItem } from "../../composite/list/useCompositeListItem.js";
+import { tabsStateAttributesMapping } from "../root/stateAttributesMapping.js";
+import { useTabsRootContext } from "../root/TabsRootContext.js";
+import { TabsPanelDataAttributes } from "./TabsPanelDataAttributes.js";
+const stateAttributesMapping = {
+  ...tabsStateAttributesMapping,
+  ...transitionStatusMapping
+};
+const TabsPanel = /* @__PURE__ */ React.forwardRef(function TabPanel(componentProps, forwardedRef) {
+  const {
+    className,
+    value,
+    render,
+    keepMounted = false,
+    ...elementProps
+  } = componentProps;
+  const {
+    value: selectedValue,
+    getTabIdByPanelValue,
+    orientation,
+    tabActivationDirection,
+    registerMountedTabPanel,
+    unregisterMountedTabPanel
+  } = useTabsRootContext();
+  const id = useBaseUiId();
+  const metadata = 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 = 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.index]: index
+    }, elementProps],
+    stateAttributesMapping
+  });
+  useOpenChangeComplete({
+    open,
+    ref: panelRef,
+    onComplete() {
+      if (!open) {
+        setMounted(false);
+      }
+    }
+  });
+  useIsoLayoutEffect(() => {
+    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]);
+  const shouldRender = keepMounted || mounted;
+  if (!shouldRender) {
+    return null;
+  }
+  return element;
+});
+if (process.env.NODE_ENV !== "production") TabsPanel.displayName = "TabsPanel";
+export {
+  TabsPanel
+};

package/dist/node_modules/.pnpm/@base-ui_react@1.3.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/tabs/panel/TabsPanelDataAttributes.js

@@ -0,0 +1,13 @@
+import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
+let TabsPanelDataAttributes = function(TabsPanelDataAttributes2) {
+  TabsPanelDataAttributes2["index"] = "data-index";
+  TabsPanelDataAttributes2["activationDirection"] = "data-activation-direction";
+  TabsPanelDataAttributes2["orientation"] = "data-orientation";
+  TabsPanelDataAttributes2["hidden"] = "data-hidden";
+  TabsPanelDataAttributes2[TabsPanelDataAttributes2["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  TabsPanelDataAttributes2[TabsPanelDataAttributes2["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  return TabsPanelDataAttributes2;
+}({});
+export {
+  TabsPanelDataAttributes
+};

package/dist/node_modules/.pnpm/@base-ui_react@1.3.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/tabs/root/TabsRoot.js

@@ -0,0 +1,154 @@
+import * as React from "react";
+import { useControlled } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useControlled.js";
+import { useIsoLayoutEffect } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useIsoLayoutEffect.js";
+import { useStableCallback } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useStableCallback.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { CompositeList } from "../../composite/list/CompositeList.js";
+import { useDirection } from "../../direction-provider/DirectionContext.js";
+import { TabsRootContext } from "./TabsRootContext.js";
+import { tabsStateAttributesMapping } from "./stateAttributesMapping.js";
+import { jsx } from "react/jsx-runtime";
+const TabsRoot = /* @__PURE__ */ React.forwardRef(function TabsRoot2(componentProps, forwardedRef) {
+  const {
+    className,
+    defaultValue: defaultValueProp = 0,
+    onValueChange: onValueChangeProp,
+    orientation = "horizontal",
+    render,
+    value: valueProp,
+    ...elementProps
+  } = componentProps;
+  const direction = useDirection();
+  const hasExplicitDefaultValueProp = Object.hasOwn(componentProps, "defaultValue");
+  const tabPanelRefs = React.useRef([]);
+  const [mountedTabPanels, setMountedTabPanels] = React.useState(() => /* @__PURE__ */ new Map());
+  const [value, setValue] = useControlled({
+    controlled: valueProp,
+    default: defaultValueProp,
+    name: "Tabs",
+    state: "value"
+  });
+  const isControlled = valueProp !== void 0;
+  const [tabMap, setTabMap] = React.useState(() => /* @__PURE__ */ new Map());
+  const [tabActivationDirection, setTabActivationDirection] = React.useState("none");
+  const onValueChange = useStableCallback((newValue, eventDetails) => {
+    onValueChangeProp == null ? void 0 : onValueChangeProp(newValue, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
+    }
+    setValue(newValue);
+    setTabActivationDirection(eventDetails.activationDirection);
+  });
+  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 = React.useCallback((tabValue) => {
+    return mountedTabPanels.get(tabValue);
+  }, [mountedTabPanels]);
+  const getTabIdByPanelValue = React.useCallback((tabPanelValue) => {
+    for (const tabMetadata of tabMap.values()) {
+      if (tabPanelValue === (tabMetadata == null ? void 0 : tabMetadata.value)) {
+        return tabMetadata == null ? void 0 : tabMetadata.id;
+      }
+    }
+    return void 0;
+  }, [tabMap]);
+  const getTabElementBySelectedValue = React.useCallback((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;
+  }, [tabMap]);
+  const tabsContextValue = React.useMemo(() => ({
+    direction,
+    getTabElementBySelectedValue,
+    getTabIdByPanelValue,
+    getTabPanelIdByValue,
+    onValueChange,
+    orientation,
+    registerMountedTabPanel,
+    setTabMap,
+    unregisterMountedTabPanel,
+    tabActivationDirection,
+    value
+  }), [direction, getTabElementBySelectedValue, getTabIdByPanelValue, getTabPanelIdByValue, onValueChange, orientation, registerMountedTabPanel, setTabMap, unregisterMountedTabPanel, tabActivationDirection, value]);
+  const selectedTabMetadata = React.useMemo(() => {
+    for (const tabMetadata of tabMap.values()) {
+      if (tabMetadata != null && tabMetadata.value === value) {
+        return tabMetadata;
+      }
+    }
+    return void 0;
+  }, [tabMap, value]);
+  const firstEnabledTabValue = React.useMemo(() => {
+    for (const tabMetadata of tabMap.values()) {
+      if (tabMetadata != null && !tabMetadata.disabled) {
+        return tabMetadata.value;
+      }
+    }
+    return void 0;
+  }, [tabMap]);
+  useIsoLayoutEffect(() => {
+    if (isControlled || tabMap.size === 0) {
+      return;
+    }
+    const selectionIsDisabled = selectedTabMetadata == null ? void 0 : selectedTabMetadata.disabled;
+    const selectionIsMissing = selectedTabMetadata == null && value !== null;
+    const shouldHonorExplicitDefaultSelection = hasExplicitDefaultValueProp && selectionIsDisabled && value === defaultValueProp;
+    if (shouldHonorExplicitDefaultSelection) {
+      return;
+    }
+    if (!selectionIsDisabled && !selectionIsMissing) {
+      return;
+    }
+    const fallbackValue = firstEnabledTabValue ?? null;
+    if (value === fallbackValue) {
+      return;
+    }
+    setValue(fallbackValue);
+    setTabActivationDirection("none");
+  }, [defaultValueProp, firstEnabledTabValue, hasExplicitDefaultValueProp, isControlled, selectedTabMetadata, setTabActivationDirection, 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 (process.env.NODE_ENV !== "production") TabsRoot.displayName = "TabsRoot";
+export {
+  TabsRoot
+};

package/dist/node_modules/.pnpm/@base-ui_react@1.3.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/tabs/root/TabsRootContext.js

@@ -0,0 +1,15 @@
+import formatErrorMessage from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/formatErrorMessage.js";
+import * as React from "react";
+const TabsRootContext = /* @__PURE__ */ React.createContext(void 0);
+if (process.env.NODE_ENV !== "production") TabsRootContext.displayName = "TabsRootContext";
+function useTabsRootContext() {
+  const context = React.useContext(TabsRootContext);
+  if (context === void 0) {
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: TabsRootContext is missing. Tabs parts must be placed within <Tabs.Root>." : formatErrorMessage(64));
+  }
+  return context;
+}
+export {
+  TabsRootContext,
+  useTabsRootContext
+};

package/dist/node_modules/.pnpm/@base-ui_react@1.3.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/tabs/root/TabsRootDataAttributes.js

@@ -0,0 +1,8 @@
+let TabsRootDataAttributes = /* @__PURE__ */ function(TabsRootDataAttributes2) {
+  TabsRootDataAttributes2["activationDirection"] = "data-activation-direction";
+  TabsRootDataAttributes2["orientation"] = "data-orientation";
+  return TabsRootDataAttributes2;
+}({});
+export {
+  TabsRootDataAttributes
+};

package/dist/node_modules/.pnpm/@base-ui_react@1.3.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/tabs/root/stateAttributesMapping.js

@@ -0,0 +1,9 @@
+import { TabsRootDataAttributes } from "./TabsRootDataAttributes.js";
+const tabsStateAttributesMapping = {
+  tabActivationDirection: (dir) => ({
+    [TabsRootDataAttributes.activationDirection]: dir
+  })
+};
+export {
+  tabsStateAttributesMapping
+};

package/dist/node_modules/.pnpm/@base-ui_react@1.3.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/tabs/tab/TabsTab.js

@@ -0,0 +1,161 @@
+import * as React from "react";
+import { ownerDocument } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/owner.js";
+import { useIsoLayoutEffect } from "../../../../../../../@base-ui_utils@0.2.6_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useIsoLayoutEffect.js";
+import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { ACTIVE_COMPOSITE_ITEM } from "../../composite/constants.js";
+import { useCompositeItem } from "../../composite/item/useCompositeItem.js";
+import { useTabsRootContext } from "../root/TabsRootContext.js";
+import { useTabsListContext } from "../list/TabsListContext.js";
+import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
+import { useButton } from "../../use-button/useButton.js";
+import { activeElement, contains } from "../../floating-ui-react/utils/element.js";
+import { none } from "../../utils/reason-parts.js";
+const TabsTab = /* @__PURE__ */ React.forwardRef(function TabsTab2(componentProps, forwardedRef) {
+  const {
+    className,
+    disabled = false,
+    render,
+    value,
+    id: idProp,
+    nativeButton = true,
+    ...elementProps
+  } = componentProps;
+  const {
+    value: activeTabValue,
+    getTabPanelIdByValue,
+    orientation
+  } = useTabsRootContext();
+  const {
+    activateOnFocus,
+    highlightedTabIndex,
+    onTabActivation,
+    registerTabResizeObserverElement,
+    setHighlightedTabIndex,
+    tabsListElement
+  } = useTabsListContext();
+  const id = useBaseUiId(idProp);
+  const tabMetadata = React.useMemo(() => ({
+    disabled,
+    id,
+    value
+  }), [disabled, id, value]);
+  const {
+    compositeProps,
+    compositeRef,
+    index
+    // hook is used instead of the CompositeItem component
+    // because the index is needed for Tab internals
+  } = useCompositeItem({
+    metadata: tabMetadata
+  });
+  const active = value === activeTabValue;
+  const isNavigatingRef = React.useRef(false);
+  const tabElementRef = React.useRef(null);
+  React.useEffect(() => {
+    const tabElement = tabElementRef.current;
+    if (!tabElement) {
+      return void 0;
+    }
+    return registerTabResizeObserverElement(tabElement);
+  }, [registerTabResizeObserverElement]);
+  useIsoLayoutEffect(() => {
+    if (isNavigatingRef.current) {
+      isNavigatingRef.current = false;
+      return;
+    }
+    if (!(active && index > -1 && highlightedTabIndex !== index)) {
+      return;
+    }
+    const listElement = tabsListElement;
+    if (listElement != null) {
+      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 = React.useRef(false);
+  const isMainButtonRef = 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 || // keyboard or touch focus
+    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 || event.button === 0) {
+      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 (process.env.NODE_ENV !== "production") TabsTab.displayName = "TabsTab";
+export {
+  TabsTab
+};