@base-ui/react 1.3.0 → 1.4.1

package/esm/slider/thumb/SliderThumbDataAttributes.d.ts

@@ -17,11 +17,11 @@ export declare enum SliderThumbDataAttributes {
    */
   disabled = "data-disabled",
   /**
-   * Present when the slider is in valid state (when wrapped in Field.Root).
+   * Present when the slider is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the slider is in invalid state (when wrapped in Field.Root).
+   * Present when the slider is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/esm/slider/thumb/SliderThumbDataAttributes.js

@@ -17,11 +17,11 @@ export let SliderThumbDataAttributes = /*#__PURE__*/function (SliderThumbDataAtt
    */
   SliderThumbDataAttributes["disabled"] = "data-disabled";
   /**
-   * Present when the slider is in valid state (when wrapped in Field.Root).
+   * Present when the slider is in a valid state (when wrapped in Field.Root).
    */
   SliderThumbDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the slider is in invalid state (when wrapped in Field.Root).
+   * Present when the slider is in an invalid state (when wrapped in Field.Root).
    */
   SliderThumbDataAttributes["invalid"] = "data-invalid";
   /**

package/esm/slider/track/SliderTrack.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 import type { SliderRootState } from "../root/SliderRoot.js";
 /**
  * Contains the slider indicator and represents the entire range of the slider.

package/esm/slider/track/SliderTrack.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useSliderRootContext } from "../root/SliderRootContext.js";
 import { sliderStateAttributesMapping } from "../root/stateAttributesMapping.js";
 
@@ -15,6 +15,7 @@ export const SliderTrack = /*#__PURE__*/React.forwardRef(function SliderTrack(co
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/slider/track/SliderTrackDataAttributes.d.ts

@@ -13,11 +13,11 @@ export declare enum SliderTrackDataAttributes {
    */
   disabled = "data-disabled",
   /**
-   * Present when the slider is in valid state (when wrapped in Field.Root).
+   * Present when the slider is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the slider is in invalid state (when wrapped in Field.Root).
+   * Present when the slider is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/esm/slider/track/SliderTrackDataAttributes.js

@@ -13,11 +13,11 @@ export let SliderTrackDataAttributes = /*#__PURE__*/function (SliderTrackDataAtt
    */
   SliderTrackDataAttributes["disabled"] = "data-disabled";
   /**
-   * Present when the slider is in valid state (when wrapped in Field.Root).
+   * Present when the slider is in a valid state (when wrapped in Field.Root).
    */
   SliderTrackDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the slider is in invalid state (when wrapped in Field.Root).
+   * Present when the slider is in an invalid state (when wrapped in Field.Root).
    */
   SliderTrackDataAttributes["invalid"] = "data-invalid";
   /**

package/esm/slider/utils/getPushedThumbValues.js

@@ -1,4 +1,4 @@
-import { clamp } from "../../utils/clamp.js";
+import { clamp } from "../../internals/clamp.js";
 /**
  * Returns a new array of slider values where attempting to move the thumb at `index`
  * beyond its neighbours "pushes" them while respecting `minStepsBetweenValues`.

package/esm/slider/utils/getSliderValue.js

@@ -1,4 +1,4 @@
-import { clamp } from "../../utils/clamp.js";
+import { clamp } from "../../internals/clamp.js";
 import { replaceArrayItemAtIndex } from "./replaceArrayItemAtIndex.js";
 export function getSliderValue(valueInput, index, min, max, range, values) {
   let newValue = valueInput;

package/esm/slider/utils/resolveThumbCollision.js

@@ -1,4 +1,4 @@
-import { clamp } from "../../utils/clamp.js";
+import { clamp } from "../../internals/clamp.js";
 import { getPushedThumbValues } from "./getPushedThumbValues.js";
 export function resolveThumbCollision({
   behavior,

package/esm/slider/utils/roundValueToStep.d.ts

@@ -1 +1,2 @@
+export declare function getDecimalPrecision(num: number): number;
 export declare function roundValueToStep(value: number, step: number, min: number): number;

package/esm/slider/utils/roundValueToStep.js

@@ -1,4 +1,8 @@
-function getDecimalPrecision(num) {
+export function getDecimalPrecision(num) {
+  if (num === 0) {
+    return 0;
+  }
+
   // This handles the case when num is very small (0.00000001), js will turn this into 1e-8.
   // When num is bigger than 1 or less than -1 it won't get converted to this notation so it's fine.
   if (Math.abs(num) < 1) {
@@ -11,5 +15,5 @@ function getDecimalPrecision(num) {
 }
 export function roundValueToStep(value, step, min) {
   const nearest = Math.round((value - min) / step) * step + min;
-  return Number(nearest.toFixed(getDecimalPrecision(step)));
+  return Number(nearest.toFixed(Math.max(getDecimalPrecision(step), getDecimalPrecision(min))));
 }

package/esm/slider/utils/valueArrayToPercentages.js

@@ -1,4 +1,4 @@
-import { clamp } from "../../utils/clamp.js";
+import { clamp } from "../../internals/clamp.js";
 import { valueToPercent } from "../../utils/valueToPercent.js";
 export function valueArrayToPercentages(values, min, max) {
   const output = [];

package/esm/slider/value/SliderValue.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { SliderRootState } from "../root/SliderRoot.js";
 /**
  * Displays the current value of the slider as text.

package/esm/slider/value/SliderValue.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { formatNumber } from "../../utils/formatNumber.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useSliderRootContext } from "../root/SliderRootContext.js";
 import { sliderStateAttributesMapping } from "../root/stateAttributesMapping.js";
 /**
@@ -17,6 +17,7 @@ export const SliderValue = /*#__PURE__*/React.forwardRef(function SliderValue(co
     render,
     className,
     children,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/slider/value/SliderValueDataAttributes.d.ts

@@ -13,11 +13,11 @@ export declare enum SliderValueDataAttributes {
    */
   disabled = "data-disabled",
   /**
-   * Present when the slider is in valid state (when wrapped in Field.Root).
+   * Present when the slider is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the slider is in invalid state (when wrapped in Field.Root).
+   * Present when the slider is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/esm/slider/value/SliderValueDataAttributes.js

@@ -13,11 +13,11 @@ export let SliderValueDataAttributes = /*#__PURE__*/function (SliderValueDataAtt
    */
   SliderValueDataAttributes["disabled"] = "data-disabled";
   /**
-   * Present when the slider is in valid state (when wrapped in Field.Root).
+   * Present when the slider is in a valid state (when wrapped in Field.Root).
    */
   SliderValueDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the slider is in invalid state (when wrapped in Field.Root).
+   * Present when the slider is in an invalid state (when wrapped in Field.Root).
    */
   SliderValueDataAttributes["invalid"] = "data-invalid";
   /**

package/esm/switch/root/SwitchRoot.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, NonNativeButtonProps } from "../../internals/types.js";
 import type { FieldRootState } from "../../field/root/FieldRoot.js";
-import { REASONS } from "../../utils/reasons.js";
+import { REASONS } from "../../internals/reasons.js";
 import type { BaseUIChangeEventDetails } from "../../types/index.js";
 /**
  * Represents the switch itself.
@@ -59,6 +59,11 @@ export interface SwitchRootProps extends NonNativeButtonProps, Omit<BaseUICompon
    * Identifies the field when a form is submitted.
    */
   name?: string | undefined;
+  /**
+   * Identifies the form that owns the hidden input.
+   * Useful when the switch is rendered outside the form.
+   */
+  form?: string | undefined;
   /**
    * Event handler called when the switch is activated or deactivated.
    */

package/esm/switch/root/SwitchRoot.js

@@ -7,21 +7,21 @@ import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { visuallyHidden, visuallyHiddenInput } from '@base-ui/utils/visuallyHidden';
 import { EMPTY_OBJECT } from '@base-ui/utils/empty';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { mergeProps } from "../../merge-props/index.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
-import { useButton } from "../../use-button/index.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
+import { useButton } from "../../internals/use-button/index.js";
 import { SwitchRootContext } from "./SwitchRootContext.js";
 import { stateAttributesMapping } from "../stateAttributesMapping.js";
-import { useField } from "../../field/useField.js";
-import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
-import { useFormContext } from "../../form/FormContext.js";
-import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
-import { useAriaLabelledBy } from "../../labelable-provider/useAriaLabelledBy.js";
-import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
-import { useValueChanged } from "../../utils/useValueChanged.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { useRegisterFieldControl } from "../../internals/field-register-control/useRegisterFieldControl.js";
+import { useFormContext } from "../../internals/form-context/FormContext.js";
+import { useLabelableContext } from "../../internals/labelable-provider/LabelableContext.js";
+import { useAriaLabelledBy } from "../../internals/labelable-provider/useAriaLabelledBy.js";
+import { useLabelableId } from "../../internals/labelable-provider/useLabelableId.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
+import { useValueChanged } from "../../internals/useValueChanged.js";
 
 /**
  * Represents the switch itself.
@@ -36,6 +36,7 @@ export const SwitchRoot = /*#__PURE__*/React.forwardRef(function SwitchRoot(comp
     className,
     defaultChecked,
     'aria-labelledby': ariaLabelledByProp,
+    form,
     id: idProp,
     inputRef: externalInputRef,
     name: nameProp,
@@ -47,6 +48,7 @@ export const SwitchRoot = /*#__PURE__*/React.forwardRef(function SwitchRoot(comp
     render,
     uncheckedValue,
     value,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -87,13 +89,9 @@ export const SwitchRoot = /*#__PURE__*/React.forwardRef(function SwitchRoot(comp
     name: 'Switch',
     state: 'checked'
   });
-  useField({
+  useRegisterFieldControl(switchRef, {
     id,
-    commit: validation.commit,
-    value: checked,
-    controlRef: switchRef,
-    name,
-    getValue: () => checked
+    value: checked
   });
   useIsoLayoutEffect(() => {
     if (inputRef.current) {
@@ -158,6 +156,7 @@ export const SwitchRoot = /*#__PURE__*/React.forwardRef(function SwitchRoot(comp
   const inputProps = React.useMemo(() => mergeProps({
     checked,
     disabled,
+    form,
     id: hiddenInputId,
     name,
     required,
@@ -171,7 +170,11 @@ export const SwitchRoot = /*#__PURE__*/React.forwardRef(function SwitchRoot(comp
       if (event.nativeEvent.defaultPrevented) {
         return;
       }
-      const nextChecked = event.target.checked;
+      if (readOnly) {
+        event.preventDefault();
+        return;
+      }
+      const nextChecked = event.currentTarget.checked;
       const eventDetails = createChangeEventDetails(REASONS.none, event.nativeEvent);
       onCheckedChange?.(nextChecked, eventDetails);
       if (eventDetails.isCanceled) {
@@ -187,7 +190,7 @@ export const SwitchRoot = /*#__PURE__*/React.forwardRef(function SwitchRoot(comp
   // To avoid this, we only set the value if it's defined
   value !== undefined ? {
     value
-  } : EMPTY_OBJECT), [checked, disabled, handleInputRef, hiddenInputId, name, onCheckedChange, required, setCheckedState, validation, value]);
+  } : EMPTY_OBJECT), [checked, disabled, form, handleInputRef, hiddenInputId, name, onCheckedChange, readOnly, required, setCheckedState, validation, value]);
   const state = React.useMemo(() => ({
     ...fieldState,
     checked,
@@ -205,10 +208,12 @@ export const SwitchRoot = /*#__PURE__*/React.forwardRef(function SwitchRoot(comp
     value: state,
     children: [element, !checked && name && uncheckedValue !== undefined && /*#__PURE__*/_jsx("input", {
       type: "hidden",
+      form: form,
       name: name,
       value: uncheckedValue
     }), /*#__PURE__*/_jsx("input", {
-      ...inputProps
+      ...inputProps,
+      suppressHydrationWarning: true
     })]
   });
 });

package/esm/switch/root/SwitchRootDataAttributes.d.ts

@@ -20,11 +20,11 @@ export declare enum SwitchRootDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the switch is in valid state (when wrapped in Field.Root).
+   * Present when the switch is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the switch is in invalid state (when wrapped in Field.Root).
+   * Present when the switch is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/esm/switch/root/SwitchRootDataAttributes.js

@@ -20,11 +20,11 @@ export let SwitchRootDataAttributes = /*#__PURE__*/function (SwitchRootDataAttri
    */
   SwitchRootDataAttributes["required"] = "data-required";
   /**
-   * Present when the switch is in valid state (when wrapped in Field.Root).
+   * Present when the switch is in a valid state (when wrapped in Field.Root).
    */
   SwitchRootDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the switch is in invalid state (when wrapped in Field.Root).
+   * Present when the switch is in an invalid state (when wrapped in Field.Root).
    */
   SwitchRootDataAttributes["invalid"] = "data-invalid";
   /**

package/esm/switch/stateAttributesMapping.d.ts

@@ -1,3 +1,3 @@
 import type { SwitchRootState } from "./root/SwitchRoot.js";
-import type { StateAttributesMapping } from "../utils/getStateAttributesProps.js";
+import type { StateAttributesMapping } from "../internals/getStateAttributesProps.js";
 export declare const stateAttributesMapping: StateAttributesMapping<SwitchRootState>;

package/esm/switch/stateAttributesMapping.js

@@ -1,4 +1,4 @@
-import { fieldValidityMapping } from "../field/utils/constants.js";
+import { fieldValidityMapping } from "../internals/field-constants/constants.js";
 import { SwitchRootDataAttributes } from "./root/SwitchRootDataAttributes.js";
 export const stateAttributesMapping = {
   ...fieldValidityMapping,

package/esm/switch/thumb/SwitchThumb.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { SwitchRootState } from "../root/SwitchRoot.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * The movable part of the switch that indicates whether the switch is on or off.
  * Renders a `<span>`.

package/esm/switch/thumb/SwitchThumb.js

@@ -2,8 +2,8 @@
 
 import * as React from 'react';
 import { useSwitchRootContext } from "../root/SwitchRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
 import { stateAttributesMapping } from "../stateAttributesMapping.js";
 
 /**
@@ -16,6 +16,7 @@ export const SwitchThumb = /*#__PURE__*/React.forwardRef(function SwitchThumb(co
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/switch/thumb/SwitchThumbDataAttributes.d.ts

@@ -20,11 +20,11 @@ export declare enum SwitchThumbDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the switch is in valid state (when wrapped in Field.Root).
+   * Present when the switch is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the switch is in invalid state (when wrapped in Field.Root).
+   * Present when the switch is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/esm/switch/thumb/SwitchThumbDataAttributes.js

@@ -20,11 +20,11 @@ export let SwitchThumbDataAttributes = /*#__PURE__*/function (SwitchThumbDataAtt
    */
   SwitchThumbDataAttributes["required"] = "data-required";
   /**
-   * Present when the switch is in valid state (when wrapped in Field.Root).
+   * Present when the switch is in a valid state (when wrapped in Field.Root).
    */
   SwitchThumbDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the switch is in invalid state (when wrapped in Field.Root).
+   * Present when the switch is in an invalid state (when wrapped in Field.Root).
    */
   SwitchThumbDataAttributes["invalid"] = "data-invalid";
   /**

package/esm/tabs/indicator/TabsIndicator.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { TabsRoot, TabsRootState } from "../root/TabsRoot.js";
 import type { TabsTab } from "../tab/TabsTab.js";
 /**
@@ -26,7 +26,7 @@ export interface TabsIndicatorState extends TabsRootState {
 export interface TabsIndicatorProps extends BaseUIComponentProps<'span', TabsIndicatorState> {
   /**
    * Whether to render itself before React hydrates.
-   * This minimizes the time that the indicator isn’t visible after server-side rendering.
+   * This minimizes the time that the indicator isn't visible after server-side rendering.
    * @default false
    */
   renderBeforeHydration?: boolean | undefined;

package/esm/tabs/indicator/TabsIndicator.js

@@ -2,9 +2,9 @@
 
 import * as React from 'react';
 import { useForcedRerendering } from '@base-ui/utils/useForcedRerendering';
-import { useOnMount } from '@base-ui/utils/useOnMount';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { getCssDimensions } from "../../utils/getCssDimensions.js";
+import { useIsHydrating } from "../../utils/useIsHydrating.js";
 import { useTabsRootContext } from "../root/TabsRootContext.js";
 import { tabsStateAttributesMapping } from "../root/stateAttributesMapping.js";
 import { useTabsListContext } from "../list/TabsListContext.js";
@@ -29,6 +29,7 @@ export const TabsIndicator = /*#__PURE__*/React.forwardRef(function TabIndicator
     className,
     render,
     renderBeforeHydration = false,
+    style: styleProp,
     ...elementProps
   } = componentProps;
   const {
@@ -44,8 +45,7 @@ export const TabsIndicator = /*#__PURE__*/React.forwardRef(function TabIndicator
     tabsListElement,
     registerIndicatorUpdateListener
   } = useTabsListContext();
-  const [isMounted, setIsMounted] = React.useState(false);
-  useOnMount(() => setIsMounted(true));
+  const isHydrating = useIsHydrating();
   const rerender = useForcedRerendering();
   React.useEffect(() => {
     return registerIndicatorUpdateListener(rerender);
@@ -135,7 +135,7 @@ export const TabsIndicator = /*#__PURE__*/React.forwardRef(function TabIndicator
     return null;
   }
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [element, !isMounted && renderBeforeHydration && /*#__PURE__*/_jsx("script", {
+    children: [element, isHydrating && renderBeforeHydration && /*#__PURE__*/_jsx("script", {
       nonce: nonce
       // eslint-disable-next-line react/no-danger
       ,

package/esm/tabs/list/TabsList.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 import type { TabsRootState } from "../root/TabsRoot.js";
 /**
  * Groups the individual tab buttons.

package/esm/tabs/list/TabsList.js

@@ -2,12 +2,11 @@
 
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { CompositeRoot } from "../../composite/root/CompositeRoot.js";
+import { EMPTY_ARRAY } from '@base-ui/utils/empty';
+import { CompositeRoot } from "../../internals/composite/root/CompositeRoot.js";
 import { tabsStateAttributesMapping } from "../root/stateAttributesMapping.js";
 import { useTabsRootContext } from "../root/TabsRootContext.js";
 import { TabsListContext } from "./TabsListContext.js";
-import { EMPTY_ARRAY } from "../../utils/constants.js";
 
 /**
  * Groups the individual tab buttons.
@@ -22,10 +21,10 @@ export const TabsList = /*#__PURE__*/React.forwardRef(function TabsList(componen
     className,
     loopFocus = true,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {
-    getTabElementBySelectedValue,
     onValueChange,
     orientation,
     value,
@@ -78,13 +77,8 @@ export const TabsList = /*#__PURE__*/React.forwardRef(function TabsList(componen
       resizeObserverRef.current?.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);
     }
   });
@@ -110,6 +104,7 @@ export const TabsList = /*#__PURE__*/React.forwardRef(function TabsList(componen
     children: /*#__PURE__*/_jsx(CompositeRoot, {
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: [forwardedRef, setTabsListElement],
       props: [defaultProps, elementProps],
@@ -124,81 +119,4 @@ export const TabsList = /*#__PURE__*/React.forwardRef(function TabsList(componen
     })
   });
 });
-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(
-// the old value
-activeTabValue, orientation, tabsListElement, getTabElement) {
-  const [previousTabEdge, setPreviousTabEdge] = React.useState(null);
-  useIsoLayoutEffect(() => {
-    // Whenever orientation changes, reset the state.
-    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]);
-}
+if (process.env.NODE_ENV !== "production") TabsList.displayName = "TabsList";

package/esm/tabs/panel/TabsPanel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import { type TransitionStatus } from "../../internals/useTransitionStatus.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { TabsRootState } from "../root/TabsRoot.js";
 import type { TabsTab } from "../tab/TabsTab.js";
 /**