@base-ui/react 1.2.0 → 1.3.0

package/slider/thumb/SliderThumb.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
 import { type LabelableContext } from "../../labelable-provider/LabelableContext.js";
-import type { SliderRoot } from "../root/SliderRoot.js";
+import type { SliderRootState } from "../root/SliderRoot.js";
 /**
  * The draggable part of the slider at the tip of the indicator.
  * Renders a `<div>` element and a nested `<input type="range">`.
@@ -12,8 +12,8 @@ export declare const SliderThumb: React.ForwardRefExoticComponent<Omit<SliderThu
 export interface ThumbMetadata {
   inputId: LabelableContext['controlId'];
 }
-export interface SliderThumbState extends SliderRoot.State {}
-export interface SliderThumbProps extends Omit<BaseUIComponentProps<'div', SliderThumb.State>, 'onBlur' | 'onFocus'> {
+export interface SliderThumbState extends SliderRootState {}
+export interface SliderThumbProps extends Omit<BaseUIComponentProps<'div', SliderThumbState>, 'onBlur' | 'onFocus'> {
   /**
    * Whether the thumb should ignore user interaction.
    * @default false
@@ -22,12 +22,12 @@ export interface SliderThumbProps extends Omit<BaseUIComponentProps<'div', Slide
   /**
    * A function which returns a string value for the [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) attribute of the `input`.
    */
-  getAriaLabel?: (((index: number) => string) | null) | undefined;
+  getAriaLabel?: ((index: number) => string) | null | undefined;
   /**
    * A function which returns a string value for the [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext) attribute of the `input`.
    * This is important for screen reader users.
    */
-  getAriaValueText?: (((formattedValue: string, value: number, index: number) => string) | null) | undefined;
+  getAriaValueText?: ((formattedValue: string, value: number, index: number) => string) | null | undefined;
   /**
    * The index of the thumb which corresponds to the index of its value in the
    * `value` or `defaultValue` array.

package/slider/thumb/SliderThumb.js

@@ -209,9 +209,10 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
   if (orientation === 'vertical') {
     cssWritingMode = rtl ? 'vertical-rl' : 'vertical-lr';
   }
+  const ariaLabel = typeof getAriaLabelProp === 'function' ? getAriaLabelProp(index) : ariaLabelProp;
   const inputProps = (0, _mergeProps.mergeProps)({
-    'aria-label': typeof getAriaLabelProp === 'function' ? getAriaLabelProp(index) : ariaLabelProp,
-    'aria-labelledby': ariaLabelledByProp ?? labelId,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledByProp ?? (ariaLabel == null ? labelId : undefined),
     'aria-describedby': ariaDescribedByProp,
     'aria-orientation': orientation,
     'aria-valuenow': thumbValue,

package/slider/track/SliderTrack.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { SliderRoot } from "../root/SliderRoot.js";
+import type { SliderRootState } from "../root/SliderRoot.js";
 /**
  * Contains the slider indicator and represents the entire range of the slider.
  * Renders a `<div>` element.
@@ -8,7 +8,9 @@ import type { SliderRoot } from "../root/SliderRoot.js";
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
 export declare const SliderTrack: React.ForwardRefExoticComponent<Omit<SliderTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface SliderTrackProps extends BaseUIComponentProps<'div', SliderRoot.State> {}
+export interface SliderTrackState extends SliderRootState {}
+export interface SliderTrackProps extends BaseUIComponentProps<'div', SliderTrackState> {}
 export declare namespace SliderTrack {
+  type State = SliderTrackState;
   type Props = SliderTrackProps;
 }

package/slider/utils/resolveThumbCollision.d.ts

@@ -2,8 +2,8 @@ import { SliderRootContext } from "../root/SliderRootContext.js";
 export interface ResolveThumbCollisionParams {
   behavior: SliderRootContext['thumbCollisionBehavior'];
   values: readonly number[];
-  currentValues?: (readonly number[] | null) | undefined;
-  initialValues?: (readonly number[] | null) | undefined;
+  currentValues?: readonly number[] | null | undefined;
+  initialValues?: readonly number[] | null | undefined;
   pressedIndex: number;
   nextValue: number;
   min: number;

package/slider/value/SliderValue.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { SliderRoot } from "../root/SliderRoot.js";
+import type { SliderRootState } from "../root/SliderRoot.js";
 /**
  * Displays the current value of the slider as text.
  * Renders an `<output>` element.
@@ -8,9 +8,11 @@ import type { SliderRoot } from "../root/SliderRoot.js";
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
 export declare const SliderValue: React.ForwardRefExoticComponent<Omit<SliderValueProps, "ref"> & React.RefAttributes<HTMLOutputElement>>;
-export interface SliderValueProps extends Omit<BaseUIComponentProps<'output', SliderRoot.State>, 'children'> {
-  children?: (null | ((formattedValues: readonly string[], values: readonly number[]) => React.ReactNode)) | undefined;
+export interface SliderValueState extends SliderRootState {}
+export interface SliderValueProps extends Omit<BaseUIComponentProps<'output', SliderValueState>, 'children'> {
+  children?: null | ((formattedValues: readonly string[], values: readonly number[]) => React.ReactNode) | undefined;
 }
 export declare namespace SliderValue {
+  type State = SliderValueState;
   type Props = SliderValueProps;
 }

package/switch/root/SwitchRoot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/types.js";
-import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { FieldRootState } from "../../field/root/FieldRoot.js";
 import { REASONS } from "../../utils/reasons.js";
 import type { BaseUIChangeEventDetails } from "../../types/index.js";
 /**
@@ -10,7 +10,7 @@ import type { BaseUIChangeEventDetails } from "../../types/index.js";
  * Documentation: [Base UI Switch](https://base-ui.com/react/components/switch)
  */
 export declare const SwitchRoot: React.ForwardRefExoticComponent<Omit<SwitchRootProps, "ref"> & React.RefAttributes<HTMLElement>>;
-export interface SwitchRootState extends FieldRoot.State {
+export interface SwitchRootState extends FieldRootState {
   /**
    * Whether the switch is currently active.
    */
@@ -28,7 +28,7 @@ export interface SwitchRootState extends FieldRoot.State {
    */
   required: boolean;
 }
-export interface SwitchRootProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', SwitchRoot.State>, 'onChange'> {
+export interface SwitchRootProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', SwitchRootState>, 'onChange'> {
   /**
    * The id of the switch element.
    */

package/switch/root/SwitchRoot.js

@@ -23,6 +23,7 @@ var _useField = require("../../field/useField");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
 var _FormContext = require("../../form/FormContext");
 var _LabelableContext = require("../../labelable-provider/LabelableContext");
+var _useAriaLabelledBy = require("../../labelable-provider/useAriaLabelledBy");
 var _useLabelableId = require("../../labelable-provider/useLabelableId");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
@@ -39,6 +40,7 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
     checked: checkedProp,
     className,
     defaultChecked,
+    'aria-labelledby': ariaLabelledByProp,
     id: idProp,
     inputRef: externalInputRef,
     name: nameProp,
@@ -120,13 +122,14 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
     disabled,
     native: nativeButton
   });
+  const ariaLabelledBy = (0, _useAriaLabelledBy.useAriaLabelledBy)(ariaLabelledByProp, labelId, inputRef, !nativeButton, hiddenInputId);
   const rootProps = {
     id: nativeButton ? controlId : id,
     role: 'switch',
     'aria-checked': checked,
     'aria-readonly': readOnly || undefined,
     'aria-required': required || undefined,
-    'aria-labelledby': labelId,
+    'aria-labelledby': ariaLabelledBy,
     onFocus() {
       if (!disabled) {
         setFocused(true);

package/switch/root/SwitchRootContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { SwitchRoot } from "./SwitchRoot.js";
-export type SwitchRootContext = SwitchRoot.State;
-export declare const SwitchRootContext: React.Context<import("./SwitchRoot.js").SwitchRootState | undefined>;
-export declare function useSwitchRootContext(): import("./SwitchRoot.js").SwitchRootState;
+import type { SwitchRootState } from "./SwitchRoot.js";
+export type SwitchRootContext = SwitchRootState;
+export declare const SwitchRootContext: React.Context<SwitchRootState | undefined>;
+export declare function useSwitchRootContext(): SwitchRootState;

package/switch/stateAttributesMapping.d.ts

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

package/switch/thumb/SwitchThumb.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { SwitchRoot } from "../root/SwitchRoot.js";
+import type { SwitchRootState } from "../root/SwitchRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * The movable part of the switch that indicates whether the switch is on or off.
@@ -8,8 +8,8 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Switch](https://base-ui.com/react/components/switch)
  */
 export declare const SwitchThumb: React.ForwardRefExoticComponent<Omit<SwitchThumbProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface SwitchThumbProps extends BaseUIComponentProps<'span', SwitchThumb.State> {}
-export interface SwitchThumbState extends SwitchRoot.State {}
+export interface SwitchThumbProps extends BaseUIComponentProps<'span', SwitchThumbState> {}
+export interface SwitchThumbState extends SwitchRootState {}
 export declare namespace SwitchThumb {
   type Props = SwitchThumbProps;
   type State = SwitchThumbState;

package/tabs/indicator/TabsIndicator.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { TabsRoot } from "../root/TabsRoot.js";
+import type { TabsRoot, TabsRootState } from "../root/TabsRoot.js";
 import type { TabsTab } from "../tab/TabsTab.js";
 /**
  * A visual indicator that can be styled to match the position of the currently active tab.
@@ -9,12 +9,21 @@ import type { TabsTab } from "../tab/TabsTab.js";
  * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
  */
 export declare const TabsIndicator: React.ForwardRefExoticComponent<Omit<TabsIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface TabsIndicatorState extends TabsRoot.State {
+export interface TabsIndicatorState extends TabsRootState {
+  /**
+   * The active tab position.
+   */
   activeTabPosition: TabsTab.Position | null;
+  /**
+   * The active tab size.
+   */
   activeTabSize: TabsTab.Size | null;
+  /**
+   * The component orientation.
+   */
   orientation: TabsRoot.Orientation;
 }
-export interface TabsIndicatorProps extends BaseUIComponentProps<'span', TabsIndicator.State> {
+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.

package/tabs/indicator/TabsIndicator.js

@@ -47,24 +47,15 @@ const TabsIndicator = exports.TabsIndicator = /*#__PURE__*/React.forwardRef(func
     value
   } = (0, _TabsRootContext.useTabsRootContext)();
   const {
-    tabsListElement
+    tabsListElement,
+    registerIndicatorUpdateListener
   } = (0, _TabsListContext.useTabsListContext)();
   const [isMounted, setIsMounted] = React.useState(false);
-  const {
-    value: activeTabValue
-  } = (0, _TabsRootContext.useTabsRootContext)();
   (0, _useOnMount.useOnMount)(() => setIsMounted(true));
   const rerender = (0, _useForcedRerendering.useForcedRerendering)();
   React.useEffect(() => {
-    if (value != null && tabsListElement != null && typeof ResizeObserver !== 'undefined') {
-      const resizeObserver = new ResizeObserver(rerender);
-      resizeObserver.observe(tabsListElement);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-    return undefined;
-  }, [value, tabsListElement, rerender]);
+    return registerIndicatorUpdateListener(rerender);
+  }, [registerIndicatorUpdateListener, rerender]);
   let left = 0;
   let right = 0;
   let top = 0;
@@ -146,7 +137,7 @@ const TabsIndicator = exports.TabsIndicator = /*#__PURE__*/React.forwardRef(func
     }],
     stateAttributesMapping
   });
-  if (activeTabValue == null) {
+  if (value == null) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {

package/tabs/indicator/TabsIndicatorCssVars.d.ts

@@ -25,7 +25,7 @@ export declare enum TabsIndicatorCssVars {
    */
   activeTabWidth = "--active-tab-width",
   /**
-   * Indicates the width of the tab if it is active.
+   * Indicates the height of the tab if it is active.
    * @type {number}
    */
   activeTabHeight = "--active-tab-height",

package/tabs/indicator/TabsIndicatorCssVars.js

@@ -31,7 +31,7 @@ let TabsIndicatorCssVars = exports.TabsIndicatorCssVars = /*#__PURE__*/function
    */
   TabsIndicatorCssVars["activeTabWidth"] = "--active-tab-width";
   /**
-   * Indicates the width of the tab if it is active.
+   * Indicates the height of the tab if it is active.
    * @type {number}
    */
   TabsIndicatorCssVars["activeTabHeight"] = "--active-tab-height";

package/tabs/list/TabsList.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { TabsRoot } from "../root/TabsRoot.js";
+import type { TabsRootState } from "../root/TabsRoot.js";
 /**
  * Groups the individual tab buttons.
  * Renders a `<div>` element.
@@ -8,8 +8,8 @@ import type { TabsRoot } from "../root/TabsRoot.js";
  * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
  */
 export declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface TabsListState extends TabsRoot.State {}
-export interface TabsListProps extends BaseUIComponentProps<'div', TabsList.State> {
+export interface TabsListState extends TabsRootState {}
+export interface TabsListProps extends BaseUIComponentProps<'div', TabsListState> {
   /**
    * Whether to automatically change the active tab on arrow key focus.
    * Otherwise, tabs will be activated using <kbd>Enter</kbd> or <kbd>Space</kbd> key press.

package/tabs/list/TabsList.js

@@ -39,6 +39,50 @@ const TabsList = exports.TabsList = /*#__PURE__*/React.forwardRef(function TabsL
   } = (0, _TabsRootContext.useTabsRootContext)();
   const [highlightedTabIndex, setHighlightedTabIndex] = React.useState(0);
   const [tabsListElement, setTabsListElement] = React.useState(null);
+  const indicatorUpdateListenersRef = React.useRef(new Set());
+  const tabResizeObserverElementsRef = React.useRef(new Set());
+  const resizeObserverRef = React.useRef(null);
+  const notifyIndicatorUpdateListeners = (0, _useStableCallback.useStableCallback)(() => {
+    indicatorUpdateListenersRef.current.forEach(listener => {
+      listener();
+    });
+  });
+  React.useEffect(() => {
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    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 = (0, _useStableCallback.useStableCallback)(listener => {
+    indicatorUpdateListenersRef.current.add(listener);
+    return () => {
+      indicatorUpdateListenersRef.current.delete(listener);
+    };
+  });
+  const registerTabResizeObserverElement = (0, _useStableCallback.useStableCallback)(element => {
+    tabResizeObserverElementsRef.current.add(element);
+    resizeObserverRef.current?.observe(element);
+    return () => {
+      tabResizeObserverElementsRef.current.delete(element);
+      resizeObserverRef.current?.unobserve(element);
+    };
+  });
   const detectActivationDirection = useActivationDirectionDetector(value,
   // the old value
   orientation, tabsListElement, getTabElementBySelectedValue);
@@ -60,11 +104,12 @@ const TabsList = exports.TabsList = /*#__PURE__*/React.forwardRef(function TabsL
   const tabsListContextValue = React.useMemo(() => ({
     activateOnFocus,
     highlightedTabIndex,
+    registerIndicatorUpdateListener,
+    registerTabResizeObserverElement,
     onTabActivation,
     setHighlightedTabIndex,
-    tabsListElement,
-    value
-  }), [activateOnFocus, highlightedTabIndex, onTabActivation, setHighlightedTabIndex, tabsListElement, value]);
+    tabsListElement
+  }), [activateOnFocus, highlightedTabIndex, registerIndicatorUpdateListener, registerTabResizeObserverElement, onTabActivation, setHighlightedTabIndex, tabsListElement]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabsListContext.TabsListContext.Provider, {
     value: tabsListContextValue,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {

package/tabs/list/TabsListContext.d.ts

@@ -3,6 +3,8 @@ import type { TabsRoot } from "../root/TabsRoot.js";
 export interface TabsListContext {
   activateOnFocus: boolean;
   highlightedTabIndex: number;
+  registerIndicatorUpdateListener: (listener: () => void) => () => void;
+  registerTabResizeObserverElement: (element: HTMLElement) => () => void;
   onTabActivation: (newValue: any, eventDetails: TabsRoot.ChangeEventDetails) => void;
   setHighlightedTabIndex: (index: number) => void;
   tabsListElement: HTMLElement | null;

package/tabs/panel/TabsPanel.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { TabsRoot } from "../root/TabsRoot.js";
+import type { TabsRootState } from "../root/TabsRoot.js";
 import type { TabsTab } from "../tab/TabsTab.js";
 /**
  * A panel displayed when the corresponding tab is active.
@@ -14,11 +14,17 @@ export interface TabsPanelMetadata {
   id?: string | undefined;
   value: TabsTab.Value;
 }
-export interface TabsPanelState extends TabsRoot.State {
+export interface TabsPanelState extends TabsRootState {
+  /**
+   * Whether the component is hidden.
+   */
   hidden: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface TabsPanelProps extends BaseUIComponentProps<'div', TabsPanel.State> {
+export interface TabsPanelProps extends BaseUIComponentProps<'div', TabsPanelState> {
   /**
    * The value of the TabPanel. It will be shown when the Tab with the corresponding value is active.
    */

package/tabs/panel/TabsPanelDataAttributes.d.ts

@@ -17,4 +17,12 @@ export declare enum TabsPanelDataAttributes {
    * Present when the panel is hidden.
    */
   hidden = "data-hidden",
+  /**
+   * Present when the panel is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the panel is animating out.
+   */
+  endingStyle = "data-ending-style",
 }

package/tabs/panel/TabsPanelDataAttributes.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TabsPanelDataAttributes = void 0;
-let TabsPanelDataAttributes = exports.TabsPanelDataAttributes = /*#__PURE__*/function (TabsPanelDataAttributes) {
+var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+let TabsPanelDataAttributes = exports.TabsPanelDataAttributes = function (TabsPanelDataAttributes) {
   /**
    * Indicates the index of the tab panel.
    */
@@ -23,5 +24,13 @@ let TabsPanelDataAttributes = exports.TabsPanelDataAttributes = /*#__PURE__*/fun
    * Present when the panel is hidden.
    */
   TabsPanelDataAttributes["hidden"] = "data-hidden";
+  /**
+   * Present when the panel is animating in.
+   */
+  TabsPanelDataAttributes[TabsPanelDataAttributes["startingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the panel is animating out.
+   */
+  TabsPanelDataAttributes[TabsPanelDataAttributes["endingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.endingStyle] = "endingStyle";
   return TabsPanelDataAttributes;
 }({});

package/tabs/root/TabsRoot.d.ts

@@ -12,10 +12,16 @@ import { REASONS } from "../../utils/reasons.js";
 export declare const TabsRoot: React.ForwardRefExoticComponent<Omit<TabsRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type TabsRootOrientation = BaseOrientation;
 export interface TabsRootState {
+  /**
+   * The component orientation.
+   */
   orientation: TabsRoot.Orientation;
+  /**
+   * The direction used for tab activation.
+   */
   tabActivationDirection: TabsTab.ActivationDirection;
 }
-export interface TabsRootProps extends BaseUIComponentProps<'div', TabsRoot.State> {
+export interface TabsRootProps extends BaseUIComponentProps<'div', TabsRootState> {
   /**
    * The value of the currently active `Tab`. Use when the component is controlled.
    * When the value is `null`, no Tab will be active.

package/tabs/root/TabsRootContext.d.ts

@@ -30,7 +30,7 @@ export interface TabsRootContext {
   getTabPanelIdByValue: (tabValue: TabsTab.Value) => string | undefined;
   registerMountedTabPanel: (panelValue: TabsTab.Value | number, panelId: string) => void;
   setTabMap: (map: Map<Node, (TabsTab.Metadata & {
-    index?: (number | null) | undefined;
+    index?: number | null | undefined;
   }) | null>) => void;
   unregisterMountedTabPanel: (panelValue: TabsTab.Value | number, panelId: string) => void;
   /**

package/tabs/root/stateAttributesMapping.d.ts

@@ -1,3 +1,3 @@
-import type { TabsRoot } from "./TabsRoot.js";
+import type { TabsRootState } from "./TabsRoot.js";
 import type { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
-export declare const tabsStateAttributesMapping: StateAttributesMapping<TabsRoot.State>;
+export declare const tabsStateAttributesMapping: StateAttributesMapping<TabsRootState>;

package/tabs/tab/TabsTab.d.ts

@@ -30,10 +30,16 @@ export interface TabsTabState {
    * Whether the component should ignore user interaction.
    */
   disabled: boolean;
+  /**
+   * Whether the component is active.
+   */
   active: boolean;
+  /**
+   * The component orientation.
+   */
   orientation: TabsRoot.Orientation;
 }
-export interface TabsTabProps extends NativeButtonProps, BaseUIComponentProps<'button', TabsTab.State> {
+export interface TabsTabProps extends NativeButtonProps, BaseUIComponentProps<'button', TabsTabState> {
   /**
    * The value of the Tab.
    */

package/tabs/tab/TabsTab.js

@@ -44,6 +44,7 @@ const TabsTab = exports.TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab
     activateOnFocus,
     highlightedTabIndex,
     onTabActivation,
+    registerTabResizeObserverElement,
     setHighlightedTabIndex,
     tabsListElement
   } = (0, _TabsListContext.useTabsListContext)();
@@ -64,6 +65,14 @@ const TabsTab = exports.TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab
   });
   const active = value === activeTabValue;
   const isNavigatingRef = React.useRef(false);
+  const tabElementRef = React.useRef(null);
+  React.useEffect(() => {
+    const tabElement = tabElementRef.current;
+    if (!tabElement) {
+      return undefined;
+    }
+    return registerTabResizeObserverElement(tabElement);
+  }, [registerTabResizeObserverElement]);
 
   // Keep the highlighted item in sync with the currently active tab
   // when the value prop changes externally (controlled mode)
@@ -157,7 +166,7 @@ const TabsTab = exports.TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab
   };
   const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
     state,
-    ref: [forwardedRef, buttonRef, compositeRef],
+    ref: [forwardedRef, buttonRef, compositeRef, tabElementRef],
     props: [compositeProps, {
       role: 'tab',
       'aria-controls': tabPanelId,

package/toast/action/ToastAction.d.ts

@@ -13,7 +13,7 @@ export interface ToastActionState {
    */
   type: string | undefined;
 }
-export interface ToastActionProps extends NativeButtonProps, BaseUIComponentProps<'button', ToastAction.State> {}
+export interface ToastActionProps extends NativeButtonProps, BaseUIComponentProps<'button', ToastActionState> {}
 export declare namespace ToastAction {
   type State = ToastActionState;
   type Props = ToastActionProps;

package/toast/arrow/ToastArrow.d.ts

@@ -9,11 +9,20 @@ import type { Side, Align } from "../../utils/useAnchorPositioning.js";
  */
 export declare const ToastArrow: React.ForwardRefExoticComponent<Omit<ToastArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ToastArrowState {
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the arrow cannot be centered on the anchor.
+   */
   uncentered: boolean;
 }
-export interface ToastArrowProps extends BaseUIComponentProps<'div', ToastArrow.State> {}
+export interface ToastArrowProps extends BaseUIComponentProps<'div', ToastArrowState> {}
 export declare namespace ToastArrow {
   type State = ToastArrowState;
   type Props = ToastArrowProps;

package/toast/close/ToastClose.d.ts

@@ -13,7 +13,7 @@ export interface ToastCloseState {
    */
   type: string | undefined;
 }
-export interface ToastCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', ToastClose.State> {}
+export interface ToastCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', ToastCloseState> {}
 export declare namespace ToastClose {
   type State = ToastCloseState;
   type Props = ToastCloseProps;

package/toast/content/ToastContent.d.ts

@@ -17,7 +17,7 @@ export interface ToastContentState {
    */
   behind: boolean;
 }
-export interface ToastContentProps extends BaseUIComponentProps<'div', ToastContent.State> {}
+export interface ToastContentProps extends BaseUIComponentProps<'div', ToastContentState> {}
 export declare namespace ToastContent {
   type State = ToastContentState;
   type Props = ToastContentProps;

package/toast/createToastManager.d.ts

@@ -6,7 +6,7 @@ export declare function createToastManager<Data extends object = any>(): ToastMa
 export interface ToastManager<Data extends object = any> {
   ' subscribe': (listener: (data: ToastManagerEvent) => void) => () => void;
   add: <T extends Data = Data>(options: ToastManagerAddOptions<T>) => string;
-  close: (id: string) => void;
+  close: (id?: string) => void;
   update: <T extends Data = Data>(id: string, updates: ToastManagerUpdateOptions<T>) => void;
   promise: <Value, T extends Data = Data>(promiseValue: Promise<Value>, options: ToastManagerPromiseOptions<Value, T>) => Promise<Value>;
 }

package/toast/description/ToastDescription.d.ts

@@ -14,7 +14,7 @@ export interface ToastDescriptionState {
    */
   type: string | undefined;
 }
-export interface ToastDescriptionProps extends BaseUIComponentProps<'p', ToastDescription.State> {}
+export interface ToastDescriptionProps extends BaseUIComponentProps<'p', ToastDescriptionState> {}
 export declare namespace ToastDescription {
   type State = ToastDescriptionState;
   type Props = ToastDescriptionProps;

package/toast/portal/ToastPortal.d.ts

@@ -7,10 +7,9 @@ import { FloatingPortalLite } from "../../utils/FloatingPortalLite.js";
  * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
  */
 export declare const ToastPortal: import("react").ForwardRefExoticComponent<Omit<FloatingPortalLite.Props<any>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface ToastPortalState {}
+export interface ToastPortalProps extends FloatingPortalLite.Props<ToastPortalState> {}
 export declare namespace ToastPortal {
-  interface State {}
-}
-export interface ToastPortalProps extends FloatingPortalLite.Props<ToastPortal.State> {}
-export declare namespace ToastPortal {
+  type State = ToastPortalState;
   type Props = ToastPortalProps;
 }