@base-ui/react 1.2.0 → 1.4.0

package/esm/utils/useSwipeDismiss.d.ts

@@ -11,98 +11,98 @@ export declare function getElementTransform(element: HTMLElement): {
   y: number;
   scale: number;
 };
-export declare function useSwipeDismiss(options: useSwipeDismiss.Options): useSwipeDismiss.ReturnValue;
-export declare namespace useSwipeDismiss {
-  interface SwipeDismissDetails {
-    nativeEvent: PointerEvent | TouchEvent;
+export declare function useSwipeDismiss(options: UseSwipeDismissOptions): UseSwipeDismissReturnValue;
+export interface UseSwipeDismissState {}
+export interface UseSwipeDismissDetails {
+  nativeEvent: PointerEvent | TouchEvent;
+  direction: SwipeDirection | undefined;
+}
+export type UseSwipeDismissProgressDetails = SwipeProgressDetailsInternal;
+export interface UseSwipeDismissOptions {
+  enabled: boolean;
+  directions: SwipeDirection[];
+  elementRef: React.RefObject<HTMLElement | null>;
+  movementCssVars: {
+    x: string;
+    y: string;
+  };
+  /**
+   * The minimum distance (in pixels) the pointer must travel from the initial swipe point
+   * before the gesture is considered a dismiss.
+   * @default 40
+   */
+  swipeThreshold?: number | ((details: {
+    element: HTMLElement;
+    direction: SwipeDirection;
+  }) => number) | undefined;
+  /**
+   * If provided, swiping will only begin once this returns true.
+   * The predicate is evaluated on start and on subsequent move events while the pointer is down.
+   */
+  canStart?: ((position: {
+    x: number;
+    y: number;
+  }, details: UseSwipeDismissDetails) => boolean) | undefined;
+  /**
+   * If true, swiping won't start when the gesture begins within a scrollable element.
+   * This helps avoid conflicts between scrolling content and swipe-to-dismiss.
+   * @default false
+   */
+  ignoreScrollableAncestors?: boolean | undefined;
+  /**
+   * If false, touch interactions can start swiping on interactive elements
+   * that are ignored during pointer swipes.
+   * @default true
+   */
+  ignoreSelectorWhenTouch?: boolean | undefined;
+  /**
+   * Whether to update drag offsets in React state on every move.
+   * Disable for event-only usage to avoid re-renders.
+   * @default true
+   */
+  trackDrag?: boolean | undefined;
+  onSwipeStart?: ((event: PointerEvent | TouchEvent) => void) | undefined;
+  onProgress?: ((progress: number, details?: UseSwipeDismissProgressDetails) => void) | undefined;
+  onCancel?: ((event: PointerEvent | TouchEvent) => void) | undefined;
+  /**
+   * Called when the swipe interaction starts or ends.
+   */
+  onSwipingChange?: ((swiping: boolean) => void) | undefined;
+  /**
+   * Called when the swipe interaction ends. Returning `true` or `false`
+   * overrides the default dismissal behavior.
+   */
+  onRelease?: ((details: {
+    event: PointerEvent | TouchEvent;
     direction: SwipeDirection | undefined;
-  }
-  type SwipeProgressDetails = SwipeProgressDetailsInternal;
-  interface Options {
-    enabled: boolean;
-    directions: SwipeDirection[];
-    elementRef: React.RefObject<HTMLElement | null>;
-    movementCssVars: {
-      x: string;
-      y: string;
-    };
-    /**
-     * The minimum distance (in pixels) the pointer must travel from the initial swipe point
-     * before the gesture is considered a dismiss.
-     * @default 40
-     */
-    swipeThreshold?: number | ((details: {
-      element: HTMLElement;
-      direction: SwipeDirection;
-    }) => number) | undefined;
-    /**
-     * If provided, swiping will only begin once this returns true.
-     * The predicate is evaluated on start and on subsequent move events while the pointer is down.
-     */
-    canStart?: ((position: {
-      x: number;
-      y: number;
-    }, details: SwipeDismissDetails) => boolean) | undefined;
-    /**
-     * If true, swiping won't start when the gesture begins within a scrollable element.
-     * This helps avoid conflicts between scrolling content and swipe-to-dismiss.
-     * @default false
-     */
-    ignoreScrollableAncestors?: boolean | undefined;
-    /**
-     * If false, touch interactions can start swiping on interactive elements
-     * that are ignored during pointer swipes.
-     * @default true
-     */
-    ignoreSelectorWhenTouch?: boolean | undefined;
-    /**
-     * Whether to update drag offsets in React state on every move.
-     * Disable for event-only usage to avoid re-renders.
-     * @default true
-     */
-    trackDrag?: boolean | undefined;
-    onSwipeStart?: ((event: PointerEvent | TouchEvent) => void) | undefined;
-    onProgress?: ((progress: number, details?: SwipeProgressDetailsInternal) => void) | undefined;
-    /**
-     * Called when the swipe interaction starts or ends.
-     */
-    onSwipingChange?: ((swiping: boolean) => void) | undefined;
-    /**
-     * Called when the swipe interaction ends. Returning `true` or `false`
-     * overrides the default dismissal behavior.
-     */
-    onRelease?: ((details: {
-      event: PointerEvent | TouchEvent;
-      direction: SwipeDirection | undefined;
-      deltaX: number;
-      deltaY: number;
-      velocityX: number;
-      velocityY: number;
-      releaseVelocityX: number;
-      releaseVelocityY: number;
-    }) => boolean | void) | undefined;
-    onDismiss?: ((event: PointerEvent | TouchEvent, details: {
-      direction: SwipeDirection;
-    }) => void) | undefined;
-  }
-  interface ReturnValue {
-    swiping: boolean;
-    swipeDirection: SwipeDirection | undefined;
-    dragDismissed: boolean;
-    getPointerProps: () => {
-      onPointerDown?: ((event: React.PointerEvent) => void) | undefined;
-      onPointerMove?: ((event: React.PointerEvent) => void) | undefined;
-      onPointerUp?: ((event: React.PointerEvent) => void) | undefined;
-      onPointerCancel?: ((event: React.PointerEvent) => void) | undefined;
-    };
-    getTouchProps: () => {
-      onTouchStart?: ((event: React.TouchEvent) => void) | undefined;
-      onTouchMove?: ((event: React.TouchEvent) => void) | undefined;
-      onTouchEnd?: ((event: React.TouchEvent) => void) | undefined;
-      onTouchCancel?: ((event: React.TouchEvent) => void) | undefined;
-    };
-    getDragStyles: () => React.CSSProperties;
-    reset: () => void;
-  }
+    deltaX: number;
+    deltaY: number;
+    velocityX: number;
+    velocityY: number;
+    releaseVelocityX: number;
+    releaseVelocityY: number;
+  }) => boolean | void) | undefined;
+  onDismiss?: ((event: PointerEvent | TouchEvent, details: {
+    direction: SwipeDirection;
+  }) => void) | undefined;
+}
+export interface UseSwipeDismissReturnValue {
+  swiping: boolean;
+  swipeDirection: SwipeDirection | undefined;
+  dragDismissed: boolean;
+  getPointerProps: () => {
+    onPointerDown?: ((event: React.PointerEvent) => void) | undefined;
+    onPointerMove?: ((event: React.PointerEvent) => void) | undefined;
+    onPointerUp?: ((event: React.PointerEvent) => void) | undefined;
+    onPointerCancel?: ((event: React.PointerEvent) => void) | undefined;
+  };
+  getTouchProps: () => {
+    onTouchStart?: ((event: React.TouchEvent) => void) | undefined;
+    onTouchMove?: ((event: React.TouchEvent) => void) | undefined;
+    onTouchEnd?: ((event: React.TouchEvent) => void) | undefined;
+    onTouchCancel?: ((event: React.TouchEvent) => void) | undefined;
+  };
+  getDragStyles: () => React.CSSProperties;
+  reset: () => void;
 }
 export {};

package/esm/utils/useSwipeDismiss.js

@@ -2,10 +2,11 @@
 
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { ownerDocument } from '@base-ui/utils/owner';
+import { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
 import { contains, getTarget } from "../floating-ui-react/utils.js";
 import { findScrollableTouchTarget, hasScrollableAncestor } from "./scrollable.js";
 import { clamp } from "./clamp.js";
+import { getElementAtPoint } from "./getElementAtPoint.js";
 const DEFAULT_SWIPE_THRESHOLD = 40;
 const REVERSE_CANCEL_THRESHOLD = 10;
 const MIN_DRAG_THRESHOLD = 1;
@@ -28,7 +29,7 @@ export function getDisplacement(direction, deltaX, deltaY) {
   }
 }
 export function getElementTransform(element) {
-  const computedStyle = window.getComputedStyle(element);
+  const computedStyle = ownerWindow(element).getComputedStyle(element);
   const transform = computedStyle.transform;
   let translateX = 0;
   let translateY = 0;
@@ -86,6 +87,7 @@ export function useSwipeDismiss(options) {
     swipeThreshold: swipeThresholdProp,
     onDismiss,
     onProgress,
+    onCancel,
     onSwipeStart,
     onRelease,
     onSwipingChange,
@@ -308,7 +310,7 @@ export function useSwipeDismiss(options) {
   }
   function getTargetAtPoint(position, nativeEvent) {
     const doc = ownerDocument(elementRef.current);
-    const elementAtPoint = typeof doc?.elementFromPoint === 'function' ? doc.elementFromPoint(position.x, position.y) : null;
+    const elementAtPoint = getElementAtPoint(doc, position.x, position.y);
     const target = elementAtPoint ?? getTarget(nativeEvent);
     return target;
   }
@@ -421,6 +423,7 @@ export function useSwipeDismiss(options) {
       deltaY: 0,
       direction: undefined
     });
+    onCancel?.(event.nativeEvent);
   }
   function applyDirectionalDamping(deltaX, deltaY) {
     const exponent = value => value >= 0 ? value ** 0.5 : -(Math.abs(value) ** 0.5);

package/esm/utils/useTransitionStatus.js

@@ -58,10 +58,10 @@ export function useTransitionStatus(open, enableIdleState = false, deferEndingSt
     return () => {
       AnimationFrame.cancel(frame);
     };
-  }, [enableIdleState, open, mounted, setTransitionStatus, transitionStatus]);
-  return React.useMemo(() => ({
+  }, [enableIdleState, open, mounted, transitionStatus]);
+  return {
     mounted,
     setMounted,
     transitionStatus
-  }), [mounted, transitionStatus]);
+  };
 }

package/field/control/FieldControl.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FieldRoot } from "../root/FieldRoot.js";
+import { type FieldRootState } from "../root/FieldRoot.js";
 import { BaseUIComponentProps } from "../../utils/types.js";
 import { REASONS } from "../../utils/reasons.js";
 import type { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
@@ -14,8 +14,8 @@ import type { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDeta
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
 export declare const FieldControl: React.ForwardRefExoticComponent<Omit<FieldControlProps, "ref"> & React.RefAttributes<HTMLElement>>;
-export type FieldControlState = FieldRoot.State;
-export interface FieldControlProps extends BaseUIComponentProps<'input', FieldControl.State> {
+export interface FieldControlState extends FieldRootState {}
+export interface FieldControlProps extends BaseUIComponentProps<'input', FieldControlState> {
   /**
    * Callback fired when the `value` changes. Use when controlled.
    */

package/field/control/FieldControl.js

@@ -10,12 +10,13 @@ var React = _interopRequireWildcard(require("react"));
 var _useControlled = require("@base-ui/utils/useControlled");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _owner = require("@base-ui/utils/owner");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _FieldRootContext = require("../root/FieldRootContext");
+var _useRegisterFieldControl = require("../root/useRegisterFieldControl");
 var _LabelableContext = require("../../labelable-provider/LabelableContext");
 var _useLabelableId = require("../../labelable-provider/useLabelableId");
 var _constants = require("../utils/constants");
 var _useRenderElement = require("../../utils/useRenderElement");
-var _useField = require("../useField");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
 var _utils = require("../../floating-ui-react/utils");
@@ -40,6 +41,7 @@ const FieldControl = exports.FieldControl = /*#__PURE__*/React.forwardRef(functi
     onValueChange,
     defaultValue,
     autoFocus = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -88,13 +90,11 @@ const FieldControl = exports.FieldControl = /*#__PURE__*/React.forwardRef(functi
   });
   const isControlled = valueProp !== undefined;
   const value = isControlled ? valueUnwrapped : undefined;
-  (0, _useField.useField)({
+  const getFieldValue = (0, _useStableCallback.useStableCallback)(() => validation.inputRef.current?.value);
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(validation.inputRef, {
     id,
-    name,
-    commit: validation.commit,
     value,
-    getValue: () => validation.inputRef.current?.value,
-    controlRef: validation.inputRef
+    getValue: getFieldValue
   });
   const element = (0, _useRenderElement.useRenderElement)('input', componentProps, {
     ref: [forwardedRef, inputRef],

package/field/description/FieldDescription.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FieldRoot } from "../root/FieldRoot.js";
+import { type FieldRootState } from "../root/FieldRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * A paragraph with additional information about the field.
@@ -8,8 +8,8 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
 export declare const FieldDescription: React.ForwardRefExoticComponent<Omit<FieldDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-export type FieldDescriptionState = FieldRoot.State;
-export interface FieldDescriptionProps extends BaseUIComponentProps<'p', FieldDescription.State> {}
+export interface FieldDescriptionState extends FieldRootState {}
+export interface FieldDescriptionProps extends BaseUIComponentProps<'p', FieldDescriptionState> {}
 export declare namespace FieldDescription {
   type State = FieldDescriptionState;
   type Props = FieldDescriptionProps;

package/field/description/FieldDescription.js

@@ -24,6 +24,7 @@ const FieldDescription = exports.FieldDescription = /*#__PURE__*/React.forwardRe
     render,
     id: idProp,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);

package/field/error/FieldError.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FieldRoot } from "../root/FieldRoot.js";
+import { type FieldRootState } from "../root/FieldRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
@@ -9,17 +9,20 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
 export declare const FieldError: React.ForwardRefExoticComponent<Omit<FieldErrorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface FieldErrorState extends FieldRoot.State {
+export interface FieldErrorState extends FieldRootState {
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface FieldErrorProps extends BaseUIComponentProps<'div', FieldError.State> {
+export interface FieldErrorProps extends BaseUIComponentProps<'div', FieldErrorState> {
   /**
-   * Determines whether to show the error message according to the field’s
+   * Determines whether to show the error message according to the field's
    * [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState).
    * Specifying `true` will always show the error message, and lets external libraries
    * control the visibility.
    */
-  match?: (boolean | keyof ValidityState) | undefined;
+  match?: boolean | keyof ValidityState | undefined;
 }
 export declare namespace FieldError {
   type State = FieldErrorState;

package/field/error/FieldError.js

@@ -35,6 +35,7 @@ const FieldError = exports.FieldError = /*#__PURE__*/React.forwardRef(function F
     id: idProp,
     className,
     match,
+    style,
     ...elementProps
   } = componentProps;
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);
@@ -50,13 +51,14 @@ const FieldError = exports.FieldError = /*#__PURE__*/React.forwardRef(function F
     errors
   } = (0, _FormContext.useFormContext)();
   const formError = name ? errors[name] : null;
+  const hasSpecificMatch = typeof match === 'string';
   let rendered = false;
-  if (formError || match === true) {
+  if (match === true) {
     rendered = true;
-  } else if (match) {
+  } else if (hasSpecificMatch) {
     rendered = Boolean(validityData.state[match]);
   } else {
-    rendered = validityData.state.valid === false;
+    rendered = Boolean(formError) || validityData.state.valid === false;
   }
   const {
     mounted,
@@ -75,11 +77,12 @@ const FieldError = exports.FieldError = /*#__PURE__*/React.forwardRef(function F
   const errorRef = React.useRef(null);
   const [lastRenderedMessage, setLastRenderedMessage] = React.useState(null);
   const [lastRenderedMessageKey, setLastRenderedMessageKey] = React.useState(null);
-  const errorMessage = formError || (validityData.errors.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+  const clientErrorMessage = validityData.errors.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
     children: validityData.errors.map(message => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
       children: message
     }, message))
-  }) : validityData.error);
+  }) : validityData.error;
+  const errorMessage = hasSpecificMatch ? clientErrorMessage : formError || clientErrorMessage;
   let errorKey = validityData.error;
   if (formError != null) {
     errorKey = Array.isArray(formError) ? JSON.stringify(formError) : formError;

package/field/error/FieldErrorDataAttributes.d.ts

@@ -27,4 +27,12 @@ export declare enum FieldErrorDataAttributes {
    * Present when the field control is focused.
    */
   focused = "data-focused",
+  /**
+   * Present when the error message is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the error message is animating out.
+   */
+  endingStyle = "data-ending-style",
 }

package/field/error/FieldErrorDataAttributes.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FieldErrorDataAttributes = void 0;
-let FieldErrorDataAttributes = exports.FieldErrorDataAttributes = /*#__PURE__*/function (FieldErrorDataAttributes) {
+var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+let FieldErrorDataAttributes = exports.FieldErrorDataAttributes = function (FieldErrorDataAttributes) {
   /**
    * Present when the field is disabled.
    */
@@ -33,5 +34,13 @@ let FieldErrorDataAttributes = exports.FieldErrorDataAttributes = /*#__PURE__*/f
    * Present when the field control is focused.
    */
   FieldErrorDataAttributes["focused"] = "data-focused";
+  /**
+   * Present when the error message is animating in.
+   */
+  FieldErrorDataAttributes[FieldErrorDataAttributes["startingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the error message is animating out.
+   */
+  FieldErrorDataAttributes[FieldErrorDataAttributes["endingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.endingStyle] = "endingStyle";
   return FieldErrorDataAttributes;
 }({});

package/field/item/FieldItem.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FieldRoot } from "../root/FieldRoot.js";
+import { type FieldRootState } from "../root/FieldRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Groups individual items in a checkbox group or radio group with a label and description.
@@ -8,7 +8,8 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
 export declare const FieldItem: React.ForwardRefExoticComponent<Omit<FieldItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface FieldItemProps extends BaseUIComponentProps<'div', FieldItem.State> {
+export interface FieldItemState extends FieldRootState {}
+export interface FieldItemProps extends BaseUIComponentProps<'div', FieldItemState> {
   /**
    * Whether the wrapped control should ignore user interaction.
    * The `disabled` prop on `<Field.Root>` takes precedence over this.
@@ -17,6 +18,6 @@ export interface FieldItemProps extends BaseUIComponentProps<'div', FieldItem.St
   disabled?: boolean | undefined;
 }
 export declare namespace FieldItem {
-  type State = FieldRoot.State;
+  type State = FieldItemState;
   type Props = FieldItemProps;
 }

package/field/item/FieldItem.js

@@ -24,6 +24,7 @@ const FieldItem = exports.FieldItem = /*#__PURE__*/React.forwardRef(function Fie
   const {
     render,
     className,
+    style,
     disabled: disabledProp = false,
     ...elementProps
   } = componentProps;
@@ -37,7 +38,7 @@ const FieldItem = exports.FieldItem = /*#__PURE__*/React.forwardRef(function Fie
   const parentId = checkboxGroupContext?.parent.id;
   // this a more reliable check
   const hasParentCheckbox = checkboxGroupContext?.allValues !== undefined;
-  const initialControlId = hasParentCheckbox ? parentId : undefined;
+  const controlId = hasParentCheckbox ? parentId : undefined;
   const fieldItemContext = React.useMemo(() => ({
     disabled
   }), [disabled]);
@@ -48,7 +49,7 @@ const FieldItem = exports.FieldItem = /*#__PURE__*/React.forwardRef(function Fie
     stateAttributesMapping: _constants.fieldValidityMapping
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_labelableProvider.LabelableProvider, {
-    initialControlId: initialControlId,
+    controlId: controlId,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldItemContext.FieldItemContext.Provider, {
       value: fieldItemContext,
       children: element

package/field/label/FieldLabel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FieldRoot } from "../root/FieldRoot.js";
+import type { FieldRootState } from "../root/FieldRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * An accessible label that is automatically associated with the field control.
@@ -8,11 +8,11 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
 export declare const FieldLabel: React.ForwardRefExoticComponent<Omit<FieldLabelProps, "ref"> & React.RefAttributes<HTMLElement>>;
-export type FieldLabelState = FieldRoot.State;
-export interface FieldLabelProps extends BaseUIComponentProps<'label', FieldLabel.State> {
+export interface FieldLabelState extends FieldRootState {}
+export interface FieldLabelProps extends BaseUIComponentProps<'label', FieldLabelState> {
   /**
    * Whether the component renders a native `<label>` element when replacing it via the `render` prop.
-   * Set to `false` if the rendered element is not a label (e.g. `<div>`).
+   * Set to `false` if the rendered element is not a label (for example, `<div>`).
    *
    * This is useful to avoid inheriting label behaviors on `<button>` controls (such as `<Select.Trigger>` and `<Combobox.Trigger>`), including avoiding `:hover` on the button when hovering the label, and preventing clicks on the label from firing on the button.
    * @default true

package/field/label/FieldLabel.js

@@ -9,16 +9,11 @@ exports.FieldLabel = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _error = require("@base-ui/utils/error");
 var _safeReact = require("@base-ui/utils/safeReact");
-var _dom = require("@floating-ui/utils/dom");
-var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _owner = require("@base-ui/utils/owner");
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _utils = require("../../floating-ui-react/utils");
 var _FieldRootContext = require("../root/FieldRootContext");
-var _LabelableContext = require("../../labelable-provider/LabelableContext");
 var _constants = require("../utils/constants");
-var _useBaseUiId = require("../../utils/useBaseUiId");
 var _useRenderElement = require("../../utils/useRenderElement");
+var _LabelableContext = require("../../labelable-provider/LabelableContext");
+var _useLabel = require("../../labelable-provider/useLabel");
 /**
  * An accessible label that is automatically associated with the field control.
  * Renders a `<label>` element.
@@ -29,40 +24,19 @@ const FieldLabel = exports.FieldLabel = /*#__PURE__*/React.forwardRef(function F
   const {
     render,
     className,
+    style,
     id: idProp,
     nativeLabel = true,
     ...elementProps
   } = componentProps;
   const fieldRootContext = (0, _FieldRootContext.useFieldRootContext)(false);
   const {
-    controlId,
-    setLabelId,
     labelId
   } = (0, _LabelableContext.useLabelableContext)();
-  const id = (0, _useBaseUiId.useBaseUiId)(idProp);
   const labelRef = React.useRef(null);
-  const handleInteraction = (0, _useStableCallback.useStableCallback)(event => {
-    const target = (0, _utils.getTarget)(event.nativeEvent);
-    if (target?.closest('button,input,select,textarea')) {
-      return;
-    }
-
-    // Prevent text selection when double clicking label.
-    if (!event.defaultPrevented && event.detail > 1) {
-      event.preventDefault();
-    }
-    if (nativeLabel || !controlId) {
-      return;
-    }
-    const controlElement = (0, _owner.ownerDocument)(event.currentTarget).getElementById(controlId);
-    if ((0, _dom.isHTMLElement)(controlElement)) {
-      controlElement.focus({
-        // Available from Chrome 144+ (January 2026).
-        // Safari and Firefox already support it.
-        // @ts-expect-error not available in types yet
-        focusVisible: true
-      });
-    }
+  const labelProps = (0, _useLabel.useLabel)({
+    id: labelId ?? idProp,
+    native: nativeLabel
   });
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -84,28 +58,10 @@ const FieldLabel = exports.FieldLabel = /*#__PURE__*/React.forwardRef(function F
       }
     }, [nativeLabel]);
   }
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (id) {
-      setLabelId(id);
-    }
-    return () => {
-      setLabelId(undefined);
-    };
-  }, [id, setLabelId]);
   const element = (0, _useRenderElement.useRenderElement)('label', componentProps, {
     ref: [forwardedRef, labelRef],
     state: fieldRootContext.state,
-    props: [{
-      id: labelId
-    }, nativeLabel ? {
-      htmlFor: controlId ?? undefined,
-      onMouseDown: handleInteraction
-    } : {
-      onClick: handleInteraction,
-      onPointerDown(event) {
-        event.preventDefault();
-      }
-    }, elementProps],
+    props: [labelProps, elementProps],
     stateAttributesMapping: _constants.fieldValidityMapping
   });
   return element;

package/field/root/FieldRoot.d.ts

@@ -31,15 +31,32 @@ export interface FieldRootActions {
   validate: () => void;
 }
 export interface FieldRootState {
-  /** Whether the component should ignore user interaction. */
+  /**
+   * Whether the component should ignore user interaction.
+   */
   disabled: boolean;
+  /**
+   * Whether the field has been touched.
+   */
   touched: boolean;
+  /**
+   * Whether the field value has changed from its initial value.
+   */
   dirty: boolean;
+  /**
+   * Whether the field is valid.
+   */
   valid: boolean | null;
+  /**
+   * Whether the field has a value.
+   */
   filled: boolean;
+  /**
+   * Whether the field is focused.
+   */
   focused: boolean;
 }
-export interface FieldRootProps extends BaseUIComponentProps<'div', FieldRoot.State> {
+export interface FieldRootProps extends BaseUIComponentProps<'div', FieldRootState> {
   /**
    * Whether the component should ignore user interaction.
    * Takes precedence over the `disabled` prop on the `<Field.Control>` component.