@base-ui/react 1.3.0 → 1.4.1

package/slider/thumb/SliderThumb.js

@@ -9,20 +9,22 @@ exports.SliderThumb = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _useOnMount = require("@base-ui/utils/useOnMount");
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
+var _clamp = require("../../internals/clamp");
 var _formatNumber = require("../../utils/formatNumber");
 var _mergeProps = require("../../merge-props");
-var _useBaseUiId = require("../../utils/useBaseUiId");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useBaseUiId = require("../../internals/useBaseUiId");
+var _useIsHydrating = require("../../utils/useIsHydrating");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _valueToPercent = require("../../utils/valueToPercent");
-var _composite = require("../../composite/composite");
-var _useCompositeListItem = require("../../composite/list/useCompositeListItem");
-var _DirectionContext = require("../../direction-provider/DirectionContext");
+var _composite = require("../../internals/composite/composite");
+var _useCompositeListItem = require("../../internals/composite/list/useCompositeListItem");
+var _DirectionContext = require("../../internals/direction-context/DirectionContext");
 var _CSPContext = require("../../csp-provider/CSPContext");
-var _FieldRootContext = require("../../field/root/FieldRootContext");
-var _useLabelableId = require("../../labelable-provider/useLabelableId");
+var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
+var _element = require("../../floating-ui-react/utils/element");
+var _useLabelableId = require("../../internals/labelable-provider/useLabelableId");
 var _getMidpoint = require("../utils/getMidpoint");
 var _getSliderValue = require("../utils/getSliderValue");
 var _roundValueToStep = require("../utils/roundValueToStep");
@@ -31,9 +33,7 @@ var _stateAttributesMapping = require("../root/stateAttributesMapping");
 var _SliderThumbDataAttributes = require("./SliderThumbDataAttributes");
 var _prehydrationScript = require("./prehydrationScript.min");
 var _jsxRuntime = require("react/jsx-runtime");
-const PAGE_UP = 'PageUp';
-const PAGE_DOWN = 'PageDown';
-const ALL_KEYS = new Set([_composite.ARROW_UP, _composite.ARROW_DOWN, _composite.ARROW_LEFT, _composite.ARROW_RIGHT, _composite.HOME, _composite.END, PAGE_UP, PAGE_DOWN]);
+const ALL_KEYS = new Set([_composite.ARROW_UP, _composite.ARROW_DOWN, _composite.ARROW_LEFT, _composite.ARROW_RIGHT, _composite.HOME, _composite.END, _composite.PAGE_UP, _composite.PAGE_DOWN]);
 function getDefaultAriaValueText(values, index, format, locale) {
   if (index < 0) {
     return undefined;
@@ -46,8 +46,10 @@ function getDefaultAriaValueText(values, index, format, locale) {
   }
   return format ? (0, _formatNumber.formatNumber)(values[index], locale, format) : undefined;
 }
-function getNewValue(thumbValue, step, direction, min, max) {
-  return direction === 1 ? Math.min(thumbValue + step, max) : Math.max(thumbValue - step, min);
+function getNewValue(thumbValue, increment, direction, min, max) {
+  const value = direction === 1 ? thumbValue + increment : thumbValue - increment;
+  const roundedValue = Number(value.toFixed(Math.max((0, _roundValueToStep.getDecimalPrecision)(thumbValue), (0, _roundValueToStep.getDecimalPrecision)(increment), (0, _roundValueToStep.getDecimalPrecision)(min))));
+  return (0, _clamp.clamp)(roundedValue, min, max);
 }
 
 /**
@@ -74,6 +76,7 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
     onFocus: onFocusProp,
     onKeyDown: onKeyDownProp,
     tabIndex: tabIndexProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -95,6 +98,7 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
     max,
     min,
     minStepsBetweenValues,
+    form,
     name,
     orientation,
     pressedInputRef,
@@ -119,6 +123,7 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
   } = (0, _FieldRootContext.useFieldRootContext)();
   const thumbRef = React.useRef(null);
   const inputRef = React.useRef(null);
+  const restoringFocusVisibleRef = React.useRef(false);
   const defaultInputId = (0, _useBaseUiId.useBaseUiId)();
   const labelableId = (0, _useLabelableId.useLabelableId)();
   const inputId = range ? defaultInputId : labelableId;
@@ -135,9 +140,8 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
   const last = index === sliderValues.length - 1;
   const thumbValue = sliderValues[index];
   const thumbValuePercent = (0, _valueToPercent.valueToPercent)(thumbValue, min, max);
-  const [isMounted, setIsMounted] = React.useState(false);
   const [positionPercent, setPositionPercent] = React.useState();
-  (0, _useOnMount.useOnMount)(() => setIsMounted(true));
+  const isHydrating = (0, _useIsHydrating.useIsHydrating)();
   const safeLastUsedThumbIndex = lastUsedThumbIndex >= 0 && lastUsedThumbIndex < sliderValues.length ? lastUsedThumbIndex : -1;
   const getInsetPosition = (0, _useStableCallback.useStableCallback)(() => {
     const control = controlRef.current;
@@ -153,11 +157,12 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
     // px distance from the starting edge (inline-start or bottom) to the thumb center
     const thumbOffsetFromControlEdge = thumbRect[side] / 2 + controlSize * thumbValuePercent / 100;
     const nextPositionPercent = thumbOffsetFromControlEdge / controlRect[side] * 100;
-    setPositionPercent(nextPositionPercent);
+    const nextInsetPosition = Number.isFinite(nextPositionPercent) ? nextPositionPercent : undefined;
+    setPositionPercent(nextInsetPosition);
     if (index === 0) {
-      setIndicatorPosition(prevPosition => [nextPositionPercent, prevPosition[1]]);
+      setIndicatorPosition(prevPosition => [nextInsetPosition, prevPosition[1]]);
     } else if (last) {
-      setIndicatorPosition(prevPosition => [prevPosition[0], nextPositionPercent]);
+      setIndicatorPosition(prevPosition => [prevPosition[0], nextInsetPosition]);
     }
   });
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
@@ -170,6 +175,22 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
       getInsetPosition();
     }
   }, [getInsetPosition, inset, thumbValuePercent]);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (!inset || typeof ResizeObserver !== 'function') {
+      return undefined;
+    }
+    const control = controlRef.current;
+    const thumb = thumbRef.current;
+    if (!control || !thumb) {
+      return undefined;
+    }
+    const resizeObserver = new ResizeObserver(getInsetPosition);
+    resizeObserver.observe(control);
+    resizeObserver.observe(thumb);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [controlRef, getInsetPosition, inset]);
   const getThumbStyle = React.useCallback(() => {
     const startEdge = vertical ? 'bottom' : 'insetInlineStart';
     const crossOffsetProperty = vertical ? 'left' : 'top';
@@ -196,15 +217,15 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
       };
     }
     return {
-      ['--position']: `${positionPercent}%`,
-      visibility: renderBeforeHydration && !isMounted || positionPercent === undefined ? 'hidden' : undefined,
+      ['--position']: `${positionPercent ?? 0}%`,
+      visibility: renderBeforeHydration && isHydrating || positionPercent === undefined ? 'hidden' : undefined,
       position: 'absolute',
       [startEdge]: 'var(--position)',
       [crossOffsetProperty]: '50%',
       translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`,
       zIndex
     };
-  }, [activeIndex, index, inset, isMounted, positionPercent, range, renderBeforeHydration, rtl, safeLastUsedThumbIndex, thumbValuePercent, vertical]);
+  }, [activeIndex, index, inset, isHydrating, positionPercent, range, renderBeforeHydration, rtl, safeLastUsedThumbIndex, thumbValuePercent, vertical]);
   let cssWritingMode;
   if (orientation === 'vertical') {
     cssWritingMode = rtl ? 'vertical-rl' : 'vertical-lr';
@@ -218,18 +239,28 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
     'aria-valuenow': thumbValue,
     'aria-valuetext': typeof getAriaValueTextProp === 'function' ? getAriaValueTextProp((0, _formatNumber.formatNumber)(thumbValue, locale, formatOptionsRef.current ?? undefined), thumbValue, index) : getDefaultAriaValueText(sliderValues, index, formatOptionsRef.current ?? undefined, locale),
     disabled,
+    form,
     id: inputId,
     max,
     min,
     name,
     onChange(event) {
-      handleInputChange(event.target.valueAsNumber, index, event);
+      handleInputChange(event.currentTarget.valueAsNumber, index, event);
     },
-    onFocus() {
+    onFocus(event) {
+      const isRestoringFocusVisible = restoringFocusVisibleRef.current;
+      restoringFocusVisibleRef.current = false;
       setActive(index);
       setFocused(true);
+      if (isRestoringFocusVisible) {
+        event.stopPropagation();
+      }
     },
-    onBlur() {
+    onBlur(event) {
+      if (restoringFocusVisibleRef.current) {
+        event.stopPropagation();
+        return;
+      }
       if (!thumbRef.current) {
         return;
       }
@@ -262,10 +293,10 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
         case _composite.ARROW_LEFT:
           newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, rtl ? 1 : -1, min, max);
           break;
-        case PAGE_UP:
+        case _composite.PAGE_UP:
           newValue = getNewValue(roundedValue, largeStep, 1, min, max);
           break;
-        case PAGE_DOWN:
+        case _composite.PAGE_DOWN:
           newValue = getNewValue(roundedValue, largeStep, -1, min, max);
           break;
         case _composite.END:
@@ -284,6 +315,17 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
           break;
       }
       if (newValue !== null) {
+        const input = event.currentTarget;
+        if (!(0, _element.matchesFocusVisible)(input)) {
+          restoringFocusVisibleRef.current = true;
+          input.blur();
+          input.focus({
+            preventScroll: true,
+            // Show `:focus-visible` after keyboard interaction, even if the
+            // thumb was previously focused by a pointer.
+            focusVisible: true
+          });
+        }
         handleInputChange(newValue, index, event);
         event.preventDefault();
       }
@@ -309,8 +351,9 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
         children: [childrenProp, /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
           ref: mergedInputRef,
-          ...inputProps
-        }), inset && !isMounted && renderBeforeHydration &&
+          ...inputProps,
+          suppressHydrationWarning: true
+        }), inset && isHydrating && renderBeforeHydration &&
         // this must be rendered with the last thumb to ensure all
         // preceding thumbs are already rendered in the DOM
         last && /*#__PURE__*/(0, _jsxRuntime.jsx)("script", {
@@ -339,8 +382,7 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
         }
       },
       style: getThumbStyle(),
-      suppressHydrationWarning: renderBeforeHydration || undefined,
-      tabIndex: -1
+      suppressHydrationWarning: renderBeforeHydration || undefined
     }, elementProps],
     stateAttributesMapping: _stateAttributesMapping.sliderStateAttributesMapping
   });

package/slider/thumb/SliderThumbDataAttributes.d.ts

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

package/slider/thumb/SliderThumbDataAttributes.js

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

package/slider/track/SliderTrack.d.ts

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

package/slider/track/SliderTrack.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SliderTrack = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _SliderRootContext = require("../root/SliderRootContext");
 var _stateAttributesMapping = require("../root/stateAttributesMapping");
 /**
@@ -20,6 +20,7 @@ const SliderTrack = exports.SliderTrack = /*#__PURE__*/React.forwardRef(function
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/slider/track/SliderTrackDataAttributes.d.ts

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

package/slider/track/SliderTrackDataAttributes.js

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

package/slider/utils/getPushedThumbValues.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getPushedThumbValues = getPushedThumbValues;
-var _clamp = require("../../utils/clamp");
+var _clamp = require("../../internals/clamp");
 /**
  * Returns a new array of slider values where attempting to move the thumb at `index`
  * beyond its neighbours "pushes" them while respecting `minStepsBetweenValues`.

package/slider/utils/getSliderValue.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSliderValue = getSliderValue;
-var _clamp = require("../../utils/clamp");
+var _clamp = require("../../internals/clamp");
 var _replaceArrayItemAtIndex = require("./replaceArrayItemAtIndex");
 function getSliderValue(valueInput, index, min, max, range, values) {
   let newValue = valueInput;

package/slider/utils/resolveThumbCollision.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.resolveThumbCollision = resolveThumbCollision;
-var _clamp = require("../../utils/clamp");
+var _clamp = require("../../internals/clamp");
 var _getPushedThumbValues = require("./getPushedThumbValues");
 function resolveThumbCollision({
   behavior,

package/slider/utils/roundValueToStep.d.ts

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

package/slider/utils/roundValueToStep.js

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

package/slider/utils/valueArrayToPercentages.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.valueArrayToPercentages = valueArrayToPercentages;
-var _clamp = require("../../utils/clamp");
+var _clamp = require("../../internals/clamp");
 var _valueToPercent = require("../../utils/valueToPercent");
 function valueArrayToPercentages(values, min, max) {
   const output = [];

package/slider/value/SliderValue.d.ts

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

package/slider/value/SliderValue.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SliderValue = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _formatNumber = require("../../utils/formatNumber");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _SliderRootContext = require("../root/SliderRootContext");
 var _stateAttributesMapping = require("../root/stateAttributesMapping");
 /**
@@ -23,6 +23,7 @@ const SliderValue = exports.SliderValue = /*#__PURE__*/React.forwardRef(function
     render,
     className,
     children,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/slider/value/SliderValueDataAttributes.d.ts

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

package/slider/value/SliderValueDataAttributes.js

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

package/switch/root/SwitchRoot.d.ts

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

package/switch/root/SwitchRoot.js

@@ -13,21 +13,21 @@ 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 _useRenderElement = require("../../internals/useRenderElement");
 var _mergeProps = require("../../merge-props");
-var _useBaseUiId = require("../../utils/useBaseUiId");
-var _useButton = require("../../use-button");
+var _useBaseUiId = require("../../internals/useBaseUiId");
+var _useButton = require("../../internals/use-button");
 var _SwitchRootContext = require("./SwitchRootContext");
 var _stateAttributesMapping = require("../stateAttributesMapping");
-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");
-var _useValueChanged = require("../../utils/useValueChanged");
+var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
+var _useRegisterFieldControl = require("../../internals/field-register-control/useRegisterFieldControl");
+var _FormContext = require("../../internals/form-context/FormContext");
+var _LabelableContext = require("../../internals/labelable-provider/LabelableContext");
+var _useAriaLabelledBy = require("../../internals/labelable-provider/useAriaLabelledBy");
+var _useLabelableId = require("../../internals/labelable-provider/useLabelableId");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
+var _useValueChanged = require("../../internals/useValueChanged");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Represents the switch itself.
@@ -41,6 +41,7 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
     className,
     defaultChecked,
     'aria-labelledby': ariaLabelledByProp,
+    form,
     id: idProp,
     inputRef: externalInputRef,
     name: nameProp,
@@ -52,6 +53,7 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
     render,
     uncheckedValue,
     value,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -92,13 +94,9 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
     name: 'Switch',
     state: 'checked'
   });
-  (0, _useField.useField)({
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(switchRef, {
     id,
-    commit: validation.commit,
-    value: checked,
-    controlRef: switchRef,
-    name,
-    getValue: () => checked
+    value: checked
   });
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (inputRef.current) {
@@ -163,6 +161,7 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
   const inputProps = React.useMemo(() => (0, _mergeProps.mergeProps)({
     checked,
     disabled,
+    form,
     id: hiddenInputId,
     name,
     required,
@@ -176,7 +175,11 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
       if (event.nativeEvent.defaultPrevented) {
         return;
       }
-      const nextChecked = event.target.checked;
+      if (readOnly) {
+        event.preventDefault();
+        return;
+      }
+      const nextChecked = event.currentTarget.checked;
       const eventDetails = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent);
       onCheckedChange?.(nextChecked, eventDetails);
       if (eventDetails.isCanceled) {
@@ -192,7 +195,7 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
   // 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]);
+  } : _empty.EMPTY_OBJECT), [checked, disabled, form, handleInputRef, hiddenInputId, name, onCheckedChange, readOnly, required, setCheckedState, validation, value]);
   const state = React.useMemo(() => ({
     ...fieldState,
     checked,
@@ -210,10 +213,12 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
     value: state,
     children: [element, !checked && name && uncheckedValue !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       type: "hidden",
+      form: form,
       name: name,
       value: uncheckedValue
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-      ...inputProps
+      ...inputProps,
+      suppressHydrationWarning: true
     })]
   });
 });

package/switch/root/SwitchRootDataAttributes.d.ts

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

package/switch/root/SwitchRootDataAttributes.js

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

package/switch/stateAttributesMapping.d.ts

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

package/switch/stateAttributesMapping.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.stateAttributesMapping = void 0;
-var _constants = require("../field/utils/constants");
+var _constants = require("../internals/field-constants/constants");
 var _SwitchRootDataAttributes = require("./root/SwitchRootDataAttributes");
 const stateAttributesMapping = exports.stateAttributesMapping = {
   ..._constants.fieldValidityMapping,

package/switch/thumb/SwitchThumb.d.ts

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

package/switch/thumb/SwitchThumb.js

@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.SwitchThumb = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _SwitchRootContext = require("../root/SwitchRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _FieldRootContext = require("../../field/root/FieldRootContext");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
 var _stateAttributesMapping = require("../stateAttributesMapping");
 /**
  * The movable part of the switch that indicates whether the switch is on or off.
@@ -21,6 +21,7 @@ const SwitchThumb = exports.SwitchThumb = /*#__PURE__*/React.forwardRef(function
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {