@base-ui/react 1.0.0 → 1.2.0

package/slider/thumb/SliderThumbDataAttributes.d.ts

@@ -16,14 +16,6 @@ export declare enum SliderThumbDataAttributes {
    * Present when the slider is disabled.
    */
   disabled = "data-disabled",
-  /**
-   * Present when the slider is readonly.
-   */
-  readonly = "data-readonly",
-  /**
-   * Present when the slider is required.
-   */
-  required = "data-required",
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/slider/thumb/SliderThumbDataAttributes.js

@@ -22,14 +22,6 @@ let SliderThumbDataAttributes = exports.SliderThumbDataAttributes = /*#__PURE__*
    * Present when the slider is disabled.
    */
   SliderThumbDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the slider is readonly.
-   */
-  SliderThumbDataAttributes["readonly"] = "data-readonly";
-  /**
-   * Present when the slider is required.
-   */
-  SliderThumbDataAttributes["required"] = "data-required";
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/slider/track/SliderTrack.d.ts

@@ -7,7 +7,7 @@ import type { SliderRoot } from "../root/SliderRoot.js";
  *
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
-export declare const SliderTrack: React.ForwardRefExoticComponent<SliderTrackProps & React.RefAttributes<HTMLElement>>;
+export declare const SliderTrack: React.ForwardRefExoticComponent<Omit<SliderTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SliderTrackProps extends BaseUIComponentProps<'div', SliderRoot.State> {}
 export declare namespace SliderTrack {
   type Props = SliderTrackProps;

package/slider/track/SliderTrackDataAttributes.d.ts

@@ -12,14 +12,6 @@ export declare enum SliderTrackDataAttributes {
    * Present when the slider is disabled.
    */
   disabled = "data-disabled",
-  /**
-   * Present when the slider is readonly.
-   */
-  readonly = "data-readonly",
-  /**
-   * Present when the slider is required.
-   */
-  required = "data-required",
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/slider/track/SliderTrackDataAttributes.js

@@ -18,14 +18,6 @@ let SliderTrackDataAttributes = exports.SliderTrackDataAttributes = /*#__PURE__*
    * Present when the slider is disabled.
    */
   SliderTrackDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the slider is readonly.
-   */
-  SliderTrackDataAttributes["readonly"] = "data-readonly";
-  /**
-   * Present when the slider is required.
-   */
-  SliderTrackDataAttributes["required"] = "data-required";
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/slider/utils/getPushedThumbValues.d.ts

@@ -6,7 +6,7 @@ interface GetPushedThumbValuesParams {
   max: number;
   step: number;
   minStepsBetweenValues: number;
-  initialValues?: readonly number[];
+  initialValues?: readonly number[] | undefined;
 }
 /**
  * Returns a new array of slider values where attempting to move the thumb at `index`

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;
-  initialValues?: readonly number[] | null;
+  currentValues?: (readonly number[] | null) | undefined;
+  initialValues?: (readonly number[] | null) | undefined;
   pressedIndex: number;
   nextValue: number;
   min: number;

package/slider/value/SliderValue.d.ts

@@ -7,9 +7,9 @@ import type { SliderRoot } from "../root/SliderRoot.js";
  *
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
-export declare const SliderValue: React.ForwardRefExoticComponent<SliderValueProps & React.RefAttributes<HTMLOutputElement>>;
+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);
+  children?: (null | ((formattedValues: readonly string[], values: readonly number[]) => React.ReactNode)) | undefined;
 }
 export declare namespace SliderValue {
   type Props = SliderValueProps;

package/slider/value/SliderValueDataAttributes.d.ts

@@ -12,14 +12,6 @@ export declare enum SliderValueDataAttributes {
    * Present when the slider is disabled.
    */
   disabled = "data-disabled",
-  /**
-   * Present when the slider is readonly.
-   */
-  readonly = "data-readonly",
-  /**
-   * Present when the slider is required.
-   */
-  required = "data-required",
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/slider/value/SliderValueDataAttributes.js

@@ -18,14 +18,6 @@ let SliderValueDataAttributes = exports.SliderValueDataAttributes = /*#__PURE__*
    * Present when the slider is disabled.
    */
   SliderValueDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the slider is readonly.
-   */
-  SliderValueDataAttributes["readonly"] = "data-readonly";
-  /**
-   * Present when the slider is required.
-   */
-  SliderValueDataAttributes["required"] = "data-required";
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/switch/root/SwitchRoot.d.ts

@@ -9,7 +9,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<SwitchRootProps & React.RefAttributes<HTMLElement>>;
+export declare const SwitchRoot: React.ForwardRefExoticComponent<Omit<SwitchRootProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export interface SwitchRootState extends FieldRoot.State {
   /**
    * Whether the switch is currently active.
@@ -32,52 +32,57 @@ export interface SwitchRootProps extends NonNativeButtonProps, Omit<BaseUICompon
   /**
    * The id of the switch element.
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * Whether the switch is currently active.
    *
    * To render an uncontrolled switch, use the `defaultChecked` prop instead.
    */
-  checked?: boolean;
+  checked?: boolean | undefined;
   /**
    * Whether the switch is initially active.
    *
    * To render a controlled switch, use the `checked` prop instead.
    * @default false
    */
-  defaultChecked?: boolean;
+  defaultChecked?: boolean | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * A ref to access the hidden `<input>` element.
    */
-  inputRef?: React.Ref<HTMLInputElement>;
+  inputRef?: React.Ref<HTMLInputElement> | undefined;
   /**
    * Identifies the field when a form is submitted.
    */
-  name?: string;
+  name?: string | undefined;
   /**
    * Event handler called when the switch is activated or deactivated.
    */
-  onCheckedChange?: (checked: boolean, eventDetails: SwitchRoot.ChangeEventDetails) => void;
+  onCheckedChange?: ((checked: boolean, eventDetails: SwitchRoot.ChangeEventDetails) => void) | undefined;
   /**
    * Whether the user should be unable to activate or deactivate the switch.
    * @default false
    */
-  readOnly?: boolean;
+  readOnly?: boolean | undefined;
   /**
    * Whether the user must activate the switch before submitting a form.
    * @default false
    */
-  required?: boolean;
+  required?: boolean | undefined;
+  /**
+   * The value submitted with the form when the switch is on.
+   * By default, switch submits the "on" value, matching native checkbox behavior.
+   */
+  value?: string | undefined;
   /**
    * The value submitted with the form when the switch is off.
    * By default, unchecked switches do not submit any value, matching native checkbox behavior.
    */
-  uncheckedValue?: string;
+  uncheckedValue?: string | undefined;
 }
 export type SwitchRootChangeEventReason = typeof REASONS.none;
 export type SwitchRootChangeEventDetails = BaseUIChangeEventDetails<SwitchRoot.ChangeEventReason>;

package/switch/root/SwitchRoot.js

@@ -12,6 +12,7 @@ var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
+var _empty = require("@base-ui/utils/empty");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _mergeProps = require("../../merge-props");
 var _useBaseUiId = require("../../utils/useBaseUiId");
@@ -48,6 +49,7 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
     disabled: disabledProp = false,
     render,
     uncheckedValue,
+    value,
     ...elementProps
   } = componentProps;
   const {
@@ -76,11 +78,12 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
   const handleInputRef = (0, _useMergedRefs.useMergedRefs)(inputRef, externalInputRef, validation.inputRef);
   const switchRef = React.useRef(null);
   const id = (0, _useBaseUiId.useBaseUiId)();
-  const inputId = (0, _useLabelableId.useLabelableId)({
+  const controlId = (0, _useLabelableId.useLabelableId)({
     id: idProp,
     implicit: false,
     controlRef: switchRef
   });
+  const hiddenInputId = nativeButton ? undefined : controlId;
   const [checked, setCheckedState] = (0, _useControlled.useControlled)({
     controlled: checkedProp,
     default: Boolean(defaultChecked),
@@ -118,10 +121,11 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
     native: nativeButton
   });
   const rootProps = {
-    id,
+    id: nativeButton ? controlId : id,
     role: 'switch',
     'aria-checked': checked,
     'aria-readonly': readOnly || undefined,
+    'aria-required': required || undefined,
     'aria-labelledby': labelId,
     onFocus() {
       if (!disabled) {
@@ -144,16 +148,22 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
         return;
       }
       event.preventDefault();
-      inputRef?.current?.click();
+      inputRef.current?.dispatchEvent(new PointerEvent('click', {
+        bubbles: true,
+        shiftKey: event.shiftKey,
+        ctrlKey: event.ctrlKey,
+        altKey: event.altKey,
+        metaKey: event.metaKey
+      }));
     }
   };
   const inputProps = React.useMemo(() => (0, _mergeProps.mergeProps)({
     checked,
     disabled,
-    id: inputId,
+    id: hiddenInputId,
     name,
     required,
-    style: _visuallyHidden.visuallyHidden,
+    style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
     tabIndex: -1,
     type: 'checkbox',
     'aria-hidden': true,
@@ -174,7 +184,12 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
     onFocus() {
       switchRef.current?.focus();
     }
-  }, validation.getInputValidationProps), [checked, disabled, handleInputRef, inputId, name, onCheckedChange, required, setCheckedState, validation]);
+  }, validation.getInputValidationProps,
+  // React <19 sets an empty value if `undefined` is passed explicitly
+  // To avoid this, we only set the value if it's defined
+  value !== undefined ? {
+    value
+  } : _empty.EMPTY_OBJECT), [checked, disabled, handleInputRef, hiddenInputId, name, onCheckedChange, required, setCheckedState, validation, value]);
   const state = React.useMemo(() => ({
     ...fieldState,
     checked,

package/switch/root/SwitchRootContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/switch/thumb/SwitchThumb.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Switch](https://base-ui.com/react/components/switch)
  */
-export declare const SwitchThumb: React.ForwardRefExoticComponent<SwitchThumbProps & React.RefAttributes<HTMLSpanElement>>;
+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 declare namespace SwitchThumb {

package/tabs/indicator/TabsIndicator.d.ts

@@ -8,7 +8,7 @@ import type { TabsTab } from "../tab/TabsTab.js";
  *
  * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
  */
-export declare const TabsIndicator: React.ForwardRefExoticComponent<TabsIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const TabsIndicator: React.ForwardRefExoticComponent<Omit<TabsIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface TabsIndicatorState extends TabsRoot.State {
   activeTabPosition: TabsTab.Position | null;
   activeTabSize: TabsTab.Size | null;
@@ -20,7 +20,7 @@ export interface TabsIndicatorProps extends BaseUIComponentProps<'span', TabsInd
    * This minimizes the time that the indicator isn’t visible after server-side rendering.
    * @default false
    */
-  renderBeforeHydration?: boolean;
+  renderBeforeHydration?: boolean | undefined;
 }
 export declare namespace TabsIndicator {
   type State = TabsIndicatorState;

package/tabs/indicator/TabsIndicator.js

@@ -16,6 +16,7 @@ var _stateAttributesMapping = require("../root/stateAttributesMapping");
 var _TabsListContext = require("../list/TabsListContext");
 var _prehydrationScript = require("./prehydrationScript.min");
 var _TabsIndicatorCssVars = require("./TabsIndicatorCssVars");
+var _CSPContext = require("../../csp-provider/CSPContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const stateAttributesMapping = {
   ..._stateAttributesMapping.tabsStateAttributesMapping,
@@ -36,6 +37,9 @@ const TabsIndicator = exports.TabsIndicator = /*#__PURE__*/React.forwardRef(func
     renderBeforeHydration = false,
     ...elementProps
   } = componentProps;
+  const {
+    nonce
+  } = (0, _CSPContext.useCSPContext)();
   const {
     getTabElementBySelectedValue,
     orientation,
@@ -124,12 +128,12 @@ const TabsIndicator = exports.TabsIndicator = /*#__PURE__*/React.forwardRef(func
     };
   }, [left, right, top, bottom, width, height, isTabSelected]);
   const displayIndicator = isTabSelected && width > 0 && height > 0;
-  const state = React.useMemo(() => ({
+  const state = {
     orientation,
     activeTabPosition,
     activeTabSize,
     tabActivationDirection
-  }), [orientation, activeTabPosition, activeTabSize, tabActivationDirection]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
     state,
     ref: forwardedRef,
@@ -147,7 +151,9 @@ const TabsIndicator = exports.TabsIndicator = /*#__PURE__*/React.forwardRef(func
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [element, !isMounted && renderBeforeHydration && /*#__PURE__*/(0, _jsxRuntime.jsx)("script", {
+      nonce: nonce
       // eslint-disable-next-line react/no-danger
+      ,
       dangerouslySetInnerHTML: {
         __html: _prehydrationScript.script
       },

package/tabs/list/TabsList.d.ts

@@ -7,7 +7,7 @@ import type { TabsRoot } from "../root/TabsRoot.js";
  *
  * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
  */
-export declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
+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> {
   /**
@@ -15,13 +15,13 @@ export interface TabsListProps extends BaseUIComponentProps<'div', TabsList.Stat
    * Otherwise, tabs will be activated using <kbd>Enter</kbd> or <kbd>Space</kbd> key press.
    * @default false
    */
-  activateOnFocus?: boolean;
+  activateOnFocus?: boolean | undefined;
   /**
    * Whether to loop keyboard focus back to the first item
    * when the end of the list is reached while using the arrow keys.
    * @default true
    */
-  loopFocus?: boolean;
+  loopFocus?: boolean | undefined;
 }
 export declare namespace TabsList {
   type State = TabsListState;

package/tabs/list/TabsList.js

@@ -49,10 +49,10 @@ const TabsList = exports.TabsList = /*#__PURE__*/React.forwardRef(function TabsL
       onValueChange(newValue, eventDetails);
     }
   });
-  const state = React.useMemo(() => ({
+  const state = {
     orientation,
     tabActivationDirection
-  }), [orientation, tabActivationDirection]);
+  };
   const defaultProps = {
     'aria-orientation': orientation === 'vertical' ? 'vertical' : undefined,
     role: 'tablist'

package/tabs/panel/TabsPanel.d.ts

@@ -1,4 +1,5 @@
 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 { TabsTab } from "../tab/TabsTab.js";
@@ -8,13 +9,14 @@ import type { TabsTab } from "../tab/TabsTab.js";
  *
  * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
  */
-export declare const TabsPanel: React.ForwardRefExoticComponent<TabsPanelProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsPanel: React.ForwardRefExoticComponent<Omit<TabsPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface TabsPanelMetadata {
-  id?: string;
+  id?: string | undefined;
   value: TabsTab.Value;
 }
 export interface TabsPanelState extends TabsRoot.State {
   hidden: boolean;
+  transitionStatus: TransitionStatus;
 }
 export interface TabsPanelProps extends BaseUIComponentProps<'div', TabsPanel.State> {
   /**
@@ -25,7 +27,7 @@ export interface TabsPanelProps extends BaseUIComponentProps<'div', TabsPanel.St
    * Whether to keep the HTML element in the DOM while the panel is hidden.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace TabsPanel {
   type Metadata = TabsPanelMetadata;

package/tabs/panel/TabsPanel.js

@@ -7,13 +7,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TabsPanel = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _inertValue = require("@base-ui/utils/inertValue");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useBaseUiId = require("../../utils/useBaseUiId");
+var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
+var _useTransitionStatus = require("../../utils/useTransitionStatus");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _useCompositeListItem = require("../../composite/list/useCompositeListItem");
-var _stateAttributesMapping = require("../root/stateAttributesMapping");
+var _stateAttributesMapping2 = require("../root/stateAttributesMapping");
 var _TabsRootContext = require("../root/TabsRootContext");
 var _TabsPanelDataAttributes = require("./TabsPanelDataAttributes");
+const stateAttributesMapping = {
+  ..._stateAttributesMapping2.tabsStateAttributesMapping,
+  ..._stateAttributesMapping.transitionStatusMapping
+};
+
 /**
  * A panel displayed when the corresponding tab is active.
  * Renders a `<div>` element.
@@ -47,25 +56,43 @@ const TabsPanel = exports.TabsPanel = /*#__PURE__*/React.forwardRef(function Tab
   } = (0, _useCompositeListItem.useCompositeListItem)({
     metadata
   });
-  const hidden = value !== selectedValue;
+  const open = value === selectedValue;
+  const {
+    mounted,
+    transitionStatus,
+    setMounted
+  } = (0, _useTransitionStatus.useTransitionStatus)(open);
+  const hidden = !mounted;
   const correspondingTabId = getTabIdByPanelValue(value);
-  const state = React.useMemo(() => ({
+  const state = {
     hidden,
     orientation,
-    tabActivationDirection
-  }), [hidden, orientation, tabActivationDirection]);
+    tabActivationDirection,
+    transitionStatus
+  };
+  const panelRef = React.useRef(null);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
-    ref: [forwardedRef, listItemRef],
+    ref: [forwardedRef, listItemRef, panelRef],
     props: [{
       'aria-labelledby': correspondingTabId,
       hidden,
-      id: id ?? undefined,
+      id,
       role: 'tabpanel',
-      tabIndex: hidden ? -1 : 0,
+      tabIndex: open ? 0 : -1,
+      inert: (0, _inertValue.inertValue)(!open),
       [_TabsPanelDataAttributes.TabsPanelDataAttributes.index]: index
     }, elementProps],
-    stateAttributesMapping: _stateAttributesMapping.tabsStateAttributesMapping
+    stateAttributesMapping
+  });
+  (0, _useOpenChangeComplete.useOpenChangeComplete)({
+    open,
+    ref: panelRef,
+    onComplete() {
+      if (!open) {
+        setMounted(false);
+      }
+    }
   });
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (hidden && !keepMounted) {
@@ -79,7 +106,7 @@ const TabsPanel = exports.TabsPanel = /*#__PURE__*/React.forwardRef(function Tab
       unregisterMountedTabPanel(value, id);
     };
   }, [hidden, keepMounted, value, id, registerMountedTabPanel, unregisterMountedTabPanel]);
-  const shouldRender = !hidden || keepMounted;
+  const shouldRender = keepMounted || mounted;
   if (!shouldRender) {
     return null;
   }

package/tabs/root/TabsRoot.d.ts

@@ -9,7 +9,7 @@ import { REASONS } from "../../utils/reasons.js";
  *
  * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
  */
-export declare const TabsRoot: React.ForwardRefExoticComponent<TabsRootProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsRoot: React.ForwardRefExoticComponent<Omit<TabsRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type TabsRootOrientation = BaseOrientation;
 export interface TabsRootState {
   orientation: TabsRoot.Orientation;
@@ -20,22 +20,22 @@ export interface TabsRootProps extends BaseUIComponentProps<'div', TabsRoot.Stat
    * The value of the currently active `Tab`. Use when the component is controlled.
    * When the value is `null`, no Tab will be active.
    */
-  value?: TabsTab.Value;
+  value?: TabsTab.Value | undefined;
   /**
    * The default value. Use when the component is not controlled.
    * When the value is `null`, no Tab will be active.
    * @default 0
    */
-  defaultValue?: TabsTab.Value;
+  defaultValue?: TabsTab.Value | undefined;
   /**
    * The component orientation (layout flow direction).
    * @default 'horizontal'
    */
-  orientation?: TabsRoot.Orientation;
+  orientation?: TabsRoot.Orientation | undefined;
   /**
    * Callback invoked when new value is being set.
    */
-  onValueChange?: (value: TabsTab.Value, eventDetails: TabsRoot.ChangeEventDetails) => void;
+  onValueChange?: ((value: TabsTab.Value, eventDetails: TabsRoot.ChangeEventDetails) => void) | undefined;
 }
 export type TabsRootChangeEventReason = typeof REASONS.none;
 export type TabsRootChangeEventDetails = BaseUIChangeEventDetails<TabsRoot.ChangeEventReason, {

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;
+    index?: (number | null) | undefined;
   }) | null>) => void;
   unregisterMountedTabPanel: (panelValue: TabsTab.Value | number, panelId: string) => void;
   /**

package/tabs/tab/TabsTab.d.ts

@@ -7,7 +7,7 @@ import type { TabsRoot } from "../root/TabsRoot.js";
  *
  * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
  */
-export declare const TabsTab: React.ForwardRefExoticComponent<TabsTabProps & React.RefAttributes<Element>>;
+export declare const TabsTab: React.ForwardRefExoticComponent<Omit<TabsTabProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export type TabsTabValue = any | null;
 export type TabsTabActivationDirection = 'left' | 'right' | 'up' | 'down' | 'none';
 export interface TabsTabPosition {
@@ -47,7 +47,7 @@ export interface TabsTabProps extends NativeButtonProps, BaseUIComponentProps<'b
    * during pre-rendering which Tabs are disabled.
    * To work around it, ensure that `defaultValue` or `value` on `<Tabs.Root>` is set to an enabled Tab's value.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
 export declare namespace TabsTab {
   type Value = TabsTabValue;

package/tabs/tab/TabsTab.js

@@ -150,11 +150,11 @@ const TabsTab = exports.TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab
       });
     }
   }
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     active,
     orientation
-  }), [disabled, active, orientation]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
     state,
     ref: [forwardedRef, buttonRef, compositeRef],

package/toast/action/ToastAction.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.
  *
  * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
  */
-export declare const ToastAction: React.ForwardRefExoticComponent<ToastActionProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const ToastAction: React.ForwardRefExoticComponent<Omit<ToastActionProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface ToastActionState {
   /**
    * The type of the toast.

package/toast/action/ToastAction.js

@@ -36,9 +36,9 @@ const ToastAction = exports.ToastAction = /*#__PURE__*/React.forwardRef(function
     disabled,
     native: nativeButton
   });
-  const state = React.useMemo(() => ({
+  const state = {
     type: toast.type
-  }), [toast.type]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
     ref: [forwardedRef, buttonRef],
     state,

package/toast/arrow/ToastArrow.d.ts

@@ -7,7 +7,7 @@ import type { Side, Align } from "../../utils/useAnchorPositioning.js";
  *
  * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
  */
-export declare const ToastArrow: React.ForwardRefExoticComponent<ToastArrowProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ToastArrow: React.ForwardRefExoticComponent<Omit<ToastArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ToastArrowState {
   side: Side;
   align: Align;