@base-ui/react 1.2.0 → 1.3.0

package/esm/accordion/header/AccordionHeader.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { AccordionItem } from "../item/AccordionItem.js";
+import type { AccordionItemState } from "../item/AccordionItem.js";
 /**
  * A heading that labels the corresponding panel.
  * Renders an `<h3>` element.
@@ -8,7 +8,9 @@ import type { AccordionItem } from "../item/AccordionItem.js";
  * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
  */
 export declare const AccordionHeader: React.ForwardRefExoticComponent<Omit<AccordionHeaderProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-export interface AccordionHeaderProps extends BaseUIComponentProps<'h3', AccordionItem.State> {}
+export interface AccordionHeaderState extends AccordionItemState {}
+export interface AccordionHeaderProps extends BaseUIComponentProps<'h3', AccordionHeaderState> {}
 export declare namespace AccordionHeader {
+  type State = AccordionHeaderState;
   type Props = AccordionHeaderProps;
 }

package/esm/accordion/item/AccordionItem.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import { useCollapsibleRoot } from "../../collapsible/root/useCollapsibleRoot.js";
-import type { AccordionRoot } from "../root/AccordionRoot.js";
+import { type UseCollapsibleRootParameters } from "../../collapsible/root/useCollapsibleRoot.js";
+import type { AccordionRootState } from "../root/AccordionRoot.js";
 import { type BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 /**
@@ -11,11 +11,17 @@ import { REASONS } from "../../utils/reasons.js";
  * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
  */
 export declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface AccordionItemState extends AccordionRoot.State {
+export interface AccordionItemState extends AccordionRootState {
+  /**
+   * The item index.
+   */
   index: number;
+  /**
+   * Whether the component is open.
+   */
   open: boolean;
 }
-export interface AccordionItemProps extends BaseUIComponentProps<'div', AccordionItem.State>, Partial<Pick<useCollapsibleRoot.Parameters, 'disabled'>> {
+export interface AccordionItemProps extends BaseUIComponentProps<'div', AccordionItemState>, Partial<Pick<UseCollapsibleRootParameters, 'disabled'>> {
   /**
    * A unique value that identifies this accordion item.
    * If no value is provided, a unique ID will be generated automatically.

package/esm/accordion/item/AccordionItemContext.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import type { AccordionItem } from "./AccordionItem.js";
+import type { AccordionItemState } from "./AccordionItem.js";
 export interface AccordionItemContext {
   open: boolean;
-  state: AccordionItem.State;
+  state: AccordionItemState;
   setTriggerId: (id: string | undefined) => void;
   triggerId?: string | undefined;
 }

package/esm/accordion/item/stateAttributesMapping.d.ts

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

package/esm/accordion/panel/AccordionPanel.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
 import type { AccordionRoot } from "../root/AccordionRoot.js";
-import type { AccordionItem } from "../item/AccordionItem.js";
+import type { AccordionItemState } from "../item/AccordionItem.js";
 import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
  * A collapsible panel with the accordion item contents.
@@ -10,10 +10,13 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
  */
 export declare const AccordionPanel: React.ForwardRefExoticComponent<Omit<AccordionPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface AccordionPanelState extends AccordionItem.State {
+export interface AccordionPanelState extends AccordionItemState {
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface AccordionPanelProps extends BaseUIComponentProps<'div', AccordionPanel.State>, Pick<AccordionRoot.Props, 'hiddenUntilFound' | 'keepMounted'> {}
+export interface AccordionPanelProps extends BaseUIComponentProps<'div', AccordionPanelState>, Pick<AccordionRoot.Props, 'hiddenUntilFound' | 'keepMounted'> {}
 export declare namespace AccordionPanel {
   type State = AccordionPanelState;
   type Props = AccordionPanelProps;

package/esm/accordion/root/AccordionRoot.d.ts

@@ -8,29 +8,37 @@ import { REASONS } from "../../utils/reasons.js";
  *
  * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
  */
-export declare const AccordionRoot: React.ForwardRefExoticComponent<Omit<AccordionRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export type AccordionValue = (any | null)[];
-export interface AccordionRootState {
-  value: AccordionValue;
+export declare const AccordionRoot: {
+  <Value = any>(props: AccordionRoot.Props<Value>): React.JSX.Element;
+};
+export type AccordionValue<Value = any> = Value[];
+export interface AccordionRootState<Value = any> {
+  /**
+   * The current value.
+   */
+  value: AccordionValue<Value>;
   /**
    * Whether the component should ignore user interaction.
    */
   disabled: boolean;
+  /**
+   * The component orientation.
+   */
   orientation: Orientation;
 }
-export interface AccordionRootProps extends BaseUIComponentProps<'div', AccordionRoot.State> {
+export interface AccordionRootProps<Value = any> extends BaseUIComponentProps<'div', AccordionRoot.State<Value>> {
   /**
    * The controlled value of the item(s) that should be expanded.
    *
    * To render an uncontrolled accordion, use the `defaultValue` prop instead.
    */
-  value?: AccordionValue | undefined;
+  value?: AccordionValue<Value> | undefined;
   /**
    * The uncontrolled value of the item(s) that should be initially expanded.
    *
    * To render a controlled accordion, use the `value` prop instead.
    */
-  defaultValue?: AccordionValue | undefined;
+  defaultValue?: AccordionValue<Value> | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
@@ -60,7 +68,7 @@ export interface AccordionRootProps extends BaseUIComponentProps<'div', Accordio
    * Event handler called when an accordion item is expanded or collapsed.
    * Provides the new value as an argument.
    */
-  onValueChange?: ((value: AccordionValue, eventDetails: AccordionRootChangeEventDetails) => void) | undefined;
+  onValueChange?: ((value: AccordionValue<Value>, eventDetails: AccordionRootChangeEventDetails) => void) | undefined;
   /**
    * Whether multiple items can be open at the same time.
    * @default false
@@ -76,8 +84,9 @@ export interface AccordionRootProps extends BaseUIComponentProps<'div', Accordio
 export type AccordionRootChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.none;
 export type AccordionRootChangeEventDetails = BaseUIChangeEventDetails<AccordionRoot.ChangeEventReason>;
 export declare namespace AccordionRoot {
-  type State = AccordionRootState;
-  type Props = AccordionRootProps;
+  type Value<TValue = any> = AccordionValue<TValue>;
+  type State<TValue = any> = AccordionRootState<TValue>;
+  type Props<TValue = any> = AccordionRootProps<TValue>;
   type ChangeEventReason = AccordionRootChangeEventReason;
   type ChangeEventDetails = AccordionRootChangeEventDetails;
 }

package/esm/accordion/root/AccordionRootContext.d.ts

@@ -1,18 +1,18 @@
 import * as React from 'react';
 import type { Orientation } from "../../utils/types.js";
 import type { TextDirection } from "../../direction-provider/index.js";
-import type { AccordionRoot, AccordionValue } from "./AccordionRoot.js";
-export interface AccordionRootContext {
+import type { AccordionRoot } from "./AccordionRoot.js";
+export interface AccordionRootContext<Value = any> {
   accordionItemRefs: React.RefObject<(HTMLElement | null)[]>;
   direction: TextDirection;
   disabled: boolean;
-  handleValueChange: (newValue: number | string, nextOpen: boolean) => void;
+  handleValueChange: (newValue: AccordionRoot.Value<Value>[number], nextOpen: boolean) => void;
   hiddenUntilFound: boolean;
   keepMounted: boolean;
   loopFocus: boolean;
   orientation: Orientation;
-  state: AccordionRoot.State;
-  value: AccordionValue;
+  state: AccordionRoot.State<Value>;
+  value: AccordionRoot.Value<Value>;
 }
-export declare const AccordionRootContext: React.Context<AccordionRootContext | undefined>;
-export declare function useAccordionRootContext(): AccordionRootContext;
+export declare const AccordionRootContext: React.Context<AccordionRootContext<any> | undefined>;
+export declare function useAccordionRootContext<Value = any>(): AccordionRootContext<Value>;

package/esm/accordion/trigger/AccordionTrigger.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
-import type { AccordionItem } from "../item/AccordionItem.js";
+import type { AccordionItemState } from "../item/AccordionItem.js";
 /**
  * A button that opens and closes the corresponding panel.
  * Renders a `<button>` element.
@@ -8,7 +8,9 @@ import type { AccordionItem } from "../item/AccordionItem.js";
  * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
  */
 export declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionTriggerProps, "ref"> & React.RefAttributes<HTMLElement>>;
-export interface AccordionTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', AccordionItem.State> {}
+export interface AccordionTriggerState extends AccordionItemState {}
+export interface AccordionTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', AccordionTriggerState> {}
 export declare namespace AccordionTrigger {
+  type State = AccordionTriggerState;
   type Props = AccordionTriggerProps;
 }

package/esm/accordion/trigger/AccordionTrigger.js

@@ -57,7 +57,8 @@ export const AccordionTrigger = /*#__PURE__*/React.forwardRef(function Accordion
   } = useButton({
     disabled,
     focusableWhenDisabled: true,
-    native: nativeButton
+    native: nativeButton,
+    composite: true
   });
   const {
     accordionItemRefs,
@@ -84,6 +85,7 @@ export const AccordionTrigger = /*#__PURE__*/React.forwardRef(function Accordion
     'aria-controls': open ? panelId : undefined,
     'aria-expanded': open,
     id,
+    tabIndex: 0,
     onClick: handleTrigger,
     onKeyDown(event) {
       if (!SUPPORTED_KEYS.has(event.key)) {

package/esm/alert-dialog/root/AlertDialogRoot.d.ts

@@ -9,6 +9,7 @@ import type { DialogRoot } from "../../dialog/root/DialogRoot.js";
  * Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
  */
 export declare function AlertDialogRoot<Payload>(props: AlertDialogRoot.Props<Payload>): import("react/jsx-runtime").JSX.Element;
+export interface AlertDialogRootState {}
 export interface AlertDialogRootProps<Payload = unknown> extends Omit<DialogRoot.Props<Payload>, 'modal' | 'disablePointerDismissal' | 'onOpenChange' | 'actionsRef' | 'handle'> {
   /**
    * Event handler called when the dialog is opened or closed.
@@ -35,6 +36,7 @@ export type AlertDialogRootChangeEventDetails = BaseUIChangeEventDetails<AlertDi
   preventUnmountOnClose(): void;
 };
 export declare namespace AlertDialogRoot {
+  type State = AlertDialogRootState;
   type Props<Payload = unknown> = AlertDialogRootProps<Payload>;
   type Actions = AlertDialogRootActions;
   type ChangeEventReason = AlertDialogRootChangeEventReason;

package/esm/autocomplete/index.d.ts

@@ -3,6 +3,7 @@ export type * from "./root/AutocompleteRoot.js";
 export type * from "./value/AutocompleteValue.js";
 export type { ComboboxTriggerProps as AutocompleteTriggerProps, ComboboxTriggerState as AutocompleteTriggerState } from "../combobox/trigger/ComboboxTrigger.js";
 export type { ComboboxInputProps as AutocompleteInputProps, ComboboxInputState as AutocompleteInputState } from "../combobox/input/ComboboxInput.js";
+export type { ComboboxInputGroupProps as AutocompleteInputGroupProps, ComboboxInputGroupState as AutocompleteInputGroupState } from "../combobox/input-group/ComboboxInputGroup.js";
 export type { ComboboxPopupProps as AutocompletePopupProps, ComboboxPopupState as AutocompletePopupState } from "../combobox/popup/ComboboxPopup.js";
 export type { ComboboxPositionerProps as AutocompletePositionerProps, ComboboxPositionerState as AutocompletePositionerState } from "../combobox/positioner/ComboboxPositioner.js";
 export type { ComboboxListProps as AutocompleteListProps, ComboboxListState as AutocompleteListState } from "../combobox/list/ComboboxList.js";

package/esm/autocomplete/index.parts.d.ts

@@ -2,6 +2,7 @@ export { AutocompleteRoot as Root } from "./root/AutocompleteRoot.js";
 export { AutocompleteValue as Value } from "./value/AutocompleteValue.js";
 export { ComboboxTrigger as Trigger } from "../combobox/trigger/ComboboxTrigger.js";
 export { ComboboxInput as Input } from "../combobox/input/ComboboxInput.js";
+export { ComboboxInputGroup as InputGroup } from "../combobox/input-group/ComboboxInputGroup.js";
 export { ComboboxIcon as Icon } from "../combobox/icon/ComboboxIcon.js";
 export { ComboboxClear as Clear } from "../combobox/clear/ComboboxClear.js";
 export { ComboboxList as List } from "../combobox/list/ComboboxList.js";

package/esm/autocomplete/index.parts.js

@@ -2,6 +2,7 @@ export { AutocompleteRoot as Root } from "./root/AutocompleteRoot.js";
 export { AutocompleteValue as Value } from "./value/AutocompleteValue.js";
 export { ComboboxTrigger as Trigger } from "../combobox/trigger/ComboboxTrigger.js";
 export { ComboboxInput as Input } from "../combobox/input/ComboboxInput.js";
+export { ComboboxInputGroup as InputGroup } from "../combobox/input-group/ComboboxInputGroup.js";
 export { ComboboxIcon as Icon } from "../combobox/icon/ComboboxIcon.js";
 export { ComboboxClear as Clear } from "../combobox/clear/ComboboxClear.js";
 export { ComboboxList as List } from "../combobox/list/ComboboxList.js";

package/esm/autocomplete/root/AutocompleteRoot.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AriaCombobox } from "../../combobox/root/AriaCombobox.js";
+import { AriaCombobox, type AriaComboboxState } from "../../combobox/root/AriaCombobox.js";
 /**
  * Groups all parts of the autocomplete.
  * Doesn't render its own HTML element.
@@ -22,7 +22,7 @@ export declare function AutocompleteRoot<ItemValue>(props: Omit<AutocompleteRoot
    */
   items?: readonly ItemValue[] | undefined;
 }): React.JSX.Element;
-export type AutocompleteRootState = AriaCombobox.State;
+export interface AutocompleteRootState extends AriaComboboxState {}
 export interface AutocompleteRootActions {
   unmount: () => void;
 }
@@ -39,14 +39,14 @@ export interface AutocompleteRootProps<ItemValue> extends Omit<AriaCombobox.Prop
    * - `none`: items are static (not filtered), and the input value will not change based on the active item.
    * @default 'list'
    */
-  mode?: ('list' | 'both' | 'inline' | 'none') | undefined;
+  mode?: 'list' | 'both' | 'inline' | 'none' | undefined;
   /**
    * Whether the first matching item is highlighted automatically.
    * - `true`: highlight after the user types and keep the highlight while the query changes.
    * - `'always'`: always highlight the first item.
    * @default false
    */
-  autoHighlight?: (boolean | 'always') | undefined;
+  autoHighlight?: boolean | 'always' | undefined;
   /**
    * Whether the highlighted item should be preserved when the pointer leaves the list.
    * @default false

package/esm/autocomplete/root/AutocompleteRoot.js

@@ -56,7 +56,7 @@ export function AutocompleteRoot(props) {
   });
   const collator = useCoreFilter();
   const baseFilter = React.useMemo(() => {
-    if (other.filter) {
+    if (other.filter !== undefined) {
       return other.filter;
     }
     return collator.contains;
@@ -68,6 +68,9 @@ export function AutocompleteRoot(props) {
     if (mode !== 'both') {
       return staticItems ? null : baseFilter;
     }
+    if (baseFilter === null) {
+      return null;
+    }
     return (item, _query, toString) => {
       return baseFilter(item, resolvedQuery, toString);
     };

package/esm/avatar/fallback/AvatarFallback.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { AvatarRoot } from "../root/AvatarRoot.js";
-import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { AvatarRootState } from "../root/AvatarRoot.js";
 /**
  * Rendered when the image fails to load or when no image is provided.
  * Renders a `<span>` element.
@@ -9,10 +8,8 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Documentation: [Base UI Avatar](https://base-ui.com/react/components/avatar)
  */
 export declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarFallbackProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface AvatarFallbackState extends AvatarRoot.State {
-  transitionStatus: TransitionStatus;
-}
-export interface AvatarFallbackProps extends BaseUIComponentProps<'span', AvatarFallback.State> {
+export interface AvatarFallbackState extends AvatarRootState {}
+export interface AvatarFallbackProps extends BaseUIComponentProps<'span', AvatarFallbackState> {
   /**
    * How long to wait before showing the fallback. Specified in milliseconds.
    */

package/esm/avatar/fallback/AvatarFallback.js

@@ -5,13 +5,6 @@ import { useTimeout } from '@base-ui/utils/useTimeout';
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useAvatarRootContext } from "../root/AvatarRootContext.js";
 import { avatarStateAttributesMapping } from "../root/stateAttributesMapping.js";
-import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
-import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
-import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
-const stateAttributesMapping = {
-  ...avatarStateAttributesMapping,
-  ...transitionStatusMapping
-};
 
 /**
  * Rendered when the image fails to load or when no image is provided.
@@ -31,13 +24,6 @@ export const AvatarFallback = /*#__PURE__*/React.forwardRef(function AvatarFallb
   } = useAvatarRootContext();
   const [delayPassed, setDelayPassed] = React.useState(delay === undefined);
   const timeout = useTimeout();
-  const visible = imageLoadingStatus !== 'loaded' && delayPassed;
-  const {
-    mounted,
-    transitionStatus,
-    setMounted
-  } = useTransitionStatus(visible);
-  const fallbackRef = React.useRef(null);
   React.useEffect(() => {
     if (delay !== undefined) {
       timeout.start(delay, () => setDelayPassed(true));
@@ -45,28 +31,15 @@ export const AvatarFallback = /*#__PURE__*/React.forwardRef(function AvatarFallb
     return timeout.clear;
   }, [timeout, delay]);
   const state = {
-    imageLoadingStatus,
-    transitionStatus
+    imageLoadingStatus
   };
-  useOpenChangeComplete({
-    open: visible,
-    ref: fallbackRef,
-    onComplete() {
-      if (!visible) {
-        setMounted(false);
-      }
-    }
-  });
   const element = useRenderElement('span', componentProps, {
     state,
-    ref: [forwardedRef, fallbackRef],
+    ref: forwardedRef,
     props: elementProps,
-    stateAttributesMapping,
-    enabled: mounted
+    stateAttributesMapping: avatarStateAttributesMapping,
+    enabled: imageLoadingStatus !== 'loaded' && delayPassed
   });
-  if (!mounted) {
-    return null;
-  }
   return element;
 });
 if (process.env.NODE_ENV !== "production") AvatarFallback.displayName = "AvatarFallback";

package/esm/avatar/image/AvatarImage.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { AvatarRoot } from "../root/AvatarRoot.js";
+import type { AvatarRootState } from "../root/AvatarRoot.js";
 import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
 import { ImageLoadingStatus } from "./useImageLoadingStatus.js";
 /**
@@ -10,10 +10,13 @@ import { ImageLoadingStatus } from "./useImageLoadingStatus.js";
  * Documentation: [Base UI Avatar](https://base-ui.com/react/components/avatar)
  */
 export declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
-export interface AvatarImageState extends AvatarRoot.State {
+export interface AvatarImageState extends AvatarRootState {
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface AvatarImageProps extends BaseUIComponentProps<'img', AvatarImage.State> {
+export interface AvatarImageProps extends BaseUIComponentProps<'img', AvatarImageState> {
   /**
    * Callback fired when the loading status changes.
    */

package/esm/avatar/image/AvatarImage.js

@@ -35,7 +35,7 @@ export const AvatarImage = /*#__PURE__*/React.forwardRef(function AvatarImage(co
     referrerPolicy,
     crossOrigin
   });
-  const isVisible = imageLoadingStatus === 'loading' || imageLoadingStatus === 'loaded';
+  const isVisible = imageLoadingStatus === 'loaded';
   const {
     mounted,
     transitionStatus,
@@ -51,10 +51,9 @@ export const AvatarImage = /*#__PURE__*/React.forwardRef(function AvatarImage(co
       handleLoadingStatusChange(imageLoadingStatus);
     }
   }, [imageLoadingStatus, handleLoadingStatusChange]);
-  const resolvedTransitionStatus = imageLoadingStatus === 'loading' ? 'starting' : transitionStatus;
   const state = {
     imageLoadingStatus,
-    transitionStatus: resolvedTransitionStatus
+    transitionStatus
   };
   useOpenChangeComplete({
     open: isVisible,

package/esm/avatar/image/AvatarImageDataAttributes.d.ts

@@ -0,0 +1,10 @@
+export declare enum AvatarImageDataAttributes {
+  /**
+   * Present when the image is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the image is animating out.
+   */
+  endingStyle = "data-ending-style",
+}

package/esm/avatar/image/AvatarImageDataAttributes.js

@@ -0,0 +1,12 @@
+import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
+export let AvatarImageDataAttributes = function (AvatarImageDataAttributes) {
+  /**
+   * Present when the image is animating in.
+   */
+  AvatarImageDataAttributes[AvatarImageDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the image is animating out.
+   */
+  AvatarImageDataAttributes[AvatarImageDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  return AvatarImageDataAttributes;
+}({});

package/esm/avatar/root/AvatarRoot.d.ts

@@ -9,9 +9,12 @@ import { BaseUIComponentProps } from "../../utils/types.js";
 export declare const AvatarRoot: React.ForwardRefExoticComponent<Omit<AvatarRootProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
 export interface AvatarRootState {
+  /**
+   * The image loading status.
+   */
   imageLoadingStatus: ImageLoadingStatus;
 }
-export interface AvatarRootProps extends BaseUIComponentProps<'span', AvatarRoot.State> {}
+export interface AvatarRootProps extends BaseUIComponentProps<'span', AvatarRootState> {}
 export declare namespace AvatarRoot {
   type State = AvatarRootState;
   type Props = AvatarRootProps;

package/esm/checkbox/indicator/CheckboxIndicator.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CheckboxRoot } from "../root/CheckboxRoot.js";
+import type { CheckboxRootState } from "../root/CheckboxRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
@@ -9,10 +9,13 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Documentation: [Base UI Checkbox](https://base-ui.com/react/components/checkbox)
  */
 export declare const CheckboxIndicator: React.ForwardRefExoticComponent<Omit<CheckboxIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface CheckboxIndicatorState extends CheckboxRoot.State {
+export interface CheckboxIndicatorState extends CheckboxRootState {
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface CheckboxIndicatorProps extends BaseUIComponentProps<'span', CheckboxIndicator.State> {
+export interface CheckboxIndicatorProps extends BaseUIComponentProps<'span', CheckboxIndicatorState> {
   /**
    * Whether to keep the element in the DOM when the checkbox is not checked.
    * @default false

package/esm/checkbox/root/CheckboxRoot.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 { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 export declare const PARENT_CHECKBOX = "data-parent";
@@ -11,7 +11,7 @@ export declare const PARENT_CHECKBOX = "data-parent";
  * Documentation: [Base UI Checkbox](https://base-ui.com/react/components/checkbox)
  */
 export declare const CheckboxRoot: React.ForwardRefExoticComponent<Omit<CheckboxRootProps, "ref"> & React.RefAttributes<HTMLElement>>;
-export interface CheckboxRootState extends FieldRoot.State {
+export interface CheckboxRootState extends FieldRootState {
   /**
    * Whether the checkbox is currently ticked.
    */
@@ -33,7 +33,7 @@ export interface CheckboxRootState extends FieldRoot.State {
    */
   indeterminate: boolean;
 }
-export interface CheckboxRootProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', CheckboxRoot.State>, 'onChange' | 'value'> {
+export interface CheckboxRootProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', CheckboxRootState>, 'onChange' | 'value'> {
   /**
    * The id of the input element.
    */

package/esm/checkbox/root/CheckboxRoot.js

@@ -19,6 +19,7 @@ import { useFieldItemContext } from "../../field/item/FieldItemContext.js";
 import { useField } from "../../field/useField.js";
 import { useFormContext } from "../../form/FormContext.js";
 import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
+import { useAriaLabelledBy } from "../../labelable-provider/useAriaLabelledBy.js";
 import { useCheckboxGroupContext } from "../../checkbox-group/CheckboxGroupContext.js";
 import { CheckboxRootContext } from "./CheckboxRootContext.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
@@ -38,6 +39,7 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
     checked: checkedProp,
     className,
     defaultChecked = false,
+    'aria-labelledby': ariaLabelledByProp,
     disabled: disabledProp = false,
     id: idProp,
     indeterminate = false,
@@ -156,6 +158,7 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
   });
   const inputRef = React.useRef(null);
   const mergedInputRef = useMergedRefs(inputRefProp, inputRef, validation.inputRef);
+  const ariaLabelledBy = useAriaLabelledBy(ariaLabelledByProp, labelId, inputRef, !nativeButton, inputId ?? undefined);
   useIsoLayoutEffect(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = groupIndeterminate;
@@ -248,7 +251,7 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
       'aria-checked': groupIndeterminate ? 'mixed' : checked,
       'aria-readonly': readOnly || undefined,
       'aria-required': required || undefined,
-      'aria-labelledby': labelId,
+      'aria-labelledby': ariaLabelledBy,
       [PARENT_CHECKBOX]: parent ? '' : undefined,
       onFocus() {
         setFocused(true);

package/esm/checkbox/root/CheckboxRootContext.d.ts

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

package/esm/checkbox/utils/useStateAttributesMapping.d.ts

@@ -1,3 +1,3 @@
 import type { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
-import type { CheckboxRoot } from "../root/CheckboxRoot.js";
-export declare function useStateAttributesMapping(state: CheckboxRoot.State): StateAttributesMapping<import("../index.js").CheckboxRootState>;
+import type { CheckboxRootState } from "../root/CheckboxRoot.js";
+export declare function useStateAttributesMapping(state: CheckboxRootState): StateAttributesMapping<CheckboxRootState>;

package/esm/checkbox-group/CheckboxGroup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { FieldRoot } from "../field/root/FieldRoot.js";
+import type { FieldRootState } from "../field/root/FieldRoot.js";
 import type { BaseUIComponentProps } from "../utils/types.js";
 import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../utils/reasons.js";
@@ -9,13 +9,13 @@ import { REASONS } from "../utils/reasons.js";
  * Documentation: [Base UI Checkbox Group](https://base-ui.com/react/components/checkbox-group)
  */
 export declare const CheckboxGroup: React.ForwardRefExoticComponent<Omit<CheckboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface CheckboxGroupState extends FieldRoot.State {
+export interface CheckboxGroupState extends FieldRootState {
   /**
    * Whether the component should ignore user interaction.
    */
   disabled: boolean;
 }
-export interface CheckboxGroupProps extends BaseUIComponentProps<'div', CheckboxGroup.State> {
+export interface CheckboxGroupProps extends BaseUIComponentProps<'div', CheckboxGroupState> {
   /**
    * Names of the checkboxes in the group that should be ticked.
    *