@multiplatform.one/forms 7.4.0 → 7.5.0

package/dist/cjs/fields/Switch/index.cjs

@@ -28,6 +28,8 @@ module.exports = __toCommonJS(Switch_exports);
 var import_react = require("react");
 var import_tamagui = require("tamagui");
 var import_theme = require("@multiplatform.one/theme");
+var import_commitImmediateField = require("../../ContextualSaveBar/commitImmediateField.cjs");
+var import_Form = require("../../Form/index.cjs");
 var import_Skeleton = require("../../Skeleton/index.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_colorRamps = require("../../shared/colorRamps.cjs");
@@ -74,6 +76,41 @@ const resolveRadiusValue = radius => {
   const parsed = Number.parseFloat(String(resolved));
   return Number.isFinite(parsed) ? parsed : void 0;
 };
+function radiusStopFromToken(token) {
+  for (const stop of Object.keys(import_theme.borderRadiusMap)) {
+    if (import_theme.borderRadiusMap[stop] === token) return stop;
+  }
+  return void 0;
+}
+function resolveSwitchRadiusStop(pointy, radiusToken) {
+  if (pointy === true) return "none";
+  const stop = radiusStopFromToken(radiusToken);
+  if (!stop) {
+    throw new Error(`Switch: "${radiusToken}" is not a borderRadiusMap token; cannot resolve BINARY`);
+  }
+  return stop;
+}
+function binaryRadiusFromStateToken(token, heightPx) {
+  if (typeof token !== "string") return void 0;
+  const stop = radiusStopFromToken(token);
+  if (!stop) return void 0;
+  return (0, import_theme.resolveRadiusClass)("BINARY", stop, {
+    heightPx
+  });
+}
+function withBinaryStateRadius(stateProps, heightPx) {
+  if (!stateProps) return void 0;
+  const {
+    borderRadius: token,
+    ...rest
+  } = stateProps;
+  const resolved = binaryRadiusFromStateToken(token, heightPx);
+  const next = resolved === void 0 ? rest : {
+    ...rest,
+    borderRadius: resolved
+  };
+  return Object.keys(next).length > 0 ? next : void 0;
+}
 const SwitchThumbStyled = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "SwitchThumb",
   transition: "quick",
@@ -275,6 +312,9 @@ function SwitchControl({
   pressStyle,
   focusStyle,
   focusVisibleStyle: _focusVisibleStyle,
+  thumbHoverStyle,
+  thumbPressStyle,
+  thumbFocusStyle,
   accessibilityLabel,
   accessibilityHint,
   ariaLabel,
@@ -513,6 +553,15 @@ function SwitchControl({
       className: kbFocus ? SWITCH_KB_RING_CLASS : void 0,
       ...(kbFocus ? (0, import_theme.ensureFocusVisibleRing)() : {
         outlineWidth: 0
+      }),
+      ...(cellTrack.hoverStyle && {
+        hoverStyle: cellTrack.hoverStyle
+      }),
+      ...(cellTrack.pressStyle && {
+        pressStyle: cellTrack.pressStyle
+      }),
+      ...(cellTrack.focusStyle && {
+        focusStyle: cellTrack.focusStyle
       })
     }), leftIcon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(StyledSwitch.Icon, {
       placement: "left",
@@ -530,7 +579,16 @@ function SwitchControl({
       ...(thumbHandleColor ? {
         backgroundColor: thumbHandleColor
       } : void 0),
-      transition: dragX != null ? "none" : motion
+      transition: dragX != null ? "none" : motion,
+      ...(thumbHoverStyle && {
+        hoverStyle: thumbHoverStyle
+      }),
+      ...(thumbPressStyle && {
+        pressStyle: thumbPressStyle
+      }),
+      ...(thumbFocusStyle && {
+        focusStyle: thumbFocusStyle
+      })
     })]
   });
 }
@@ -578,6 +636,10 @@ function Switch({
     id: idProp,
     compact
   });
+  const {
+    mode: saveMode,
+    onAutoCommit
+  } = (0, import_Form.useFormSaveMode)();
   const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name, v => !v);
   const elevationWrapperProps = (0, import_utils.getElevationWrapperProps)(knobProps, elevation);
   const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
@@ -595,40 +657,54 @@ function Switch({
   const grownTarget = targetHeight !== void 0;
   const rowMinHeight = !inTableCell && grownTarget ? targetHeight : void 0;
   const renderSwitch = (switchChecked, handleChange, handleBlur, hasError, errorMessage) => {
-    const resolvedPointy = pointy ?? knobProps.pointy;
-    const knobRadius = knobProps.borderRadius.borderRadius;
-    const isSquare = resolvedPointy || knobRadius === "$0";
     const overrideRadius = switchProps?.borderRadius;
-    let frameProps = {};
-    let thumbRadius = 1e3;
-    if (overrideRadius != null) {
-      frameProps = {
-        borderRadius: overrideRadius,
-        height: thumbHeight + borderWidth * 2,
-        minHeight: thumbHeight + borderWidth * 2,
-        width: thumbHeight * 2 + borderWidth * 2
-      };
-      thumbRadius = resolveRadiusValue(overrideRadius) ?? 1e3;
-    } else if (isSquare) {
-      frameProps = {
-        borderRadius: 0,
-        height: thumbHeight + borderWidth * 2,
-        minHeight: thumbHeight + borderWidth * 2,
-        width: thumbHeight * 2 + borderWidth * 2
-      };
-      thumbRadius = 0;
-    } else {
-      frameProps = {
-        height: thumbHeight + borderWidth * 2,
-        minHeight: thumbHeight + borderWidth * 2,
-        width: thumbHeight * 2 + borderWidth * 2
-      };
-    }
+    const radiusStop = resolveSwitchRadiusStop(pointy, knobProps.borderRadius.borderRadius);
+    const thumbInset = switchThumbInset(thumbHeight);
+    const thumbPaintedHeight = thumbHeight - thumbInset * 2;
+    const trackRadius = overrideRadius != null ? resolveRadiusValue(overrideRadius) ?? 1e3 : (0, import_theme.resolveRadiusClass)("BINARY", radiusStop, {
+      heightPx: trackHeight
+    });
+    const thumbRadius = overrideRadius != null ? resolveRadiusValue(overrideRadius) ?? 1e3 : (0, import_theme.resolveRadiusClass)("BINARY", radiusStop, {
+      heightPx: thumbPaintedHeight
+    });
+    let frameProps = {
+      borderRadius: overrideRadius ?? trackRadius,
+      height: thumbHeight + borderWidth * 2,
+      minHeight: thumbHeight + borderWidth * 2,
+      width: thumbHeight * 2 + borderWidth * 2
+    };
+    const hoverRaw = stripOutlineFromState(control.hoverKnobProps);
+    const pressRaw = stripOutlineFromState(control.pressKnobProps);
+    const focusRaw = stripOutlineFromState(control.focusKnobProps);
+    const trackHover = overrideRadius != null ? (0, import_utils.stripRadiusFromStateProps)(hoverRaw) : withBinaryStateRadius(hoverRaw, trackHeight);
+    const trackPress = overrideRadius != null ? (0, import_utils.stripRadiusFromStateProps)(pressRaw) : withBinaryStateRadius(pressRaw, trackHeight);
+    const trackFocus = overrideRadius != null ? (0, import_utils.stripRadiusFromStateProps)(focusRaw) : withBinaryStateRadius(focusRaw, trackHeight);
+    const thumbHover = withBinaryStateRadius(overrideRadius != null ? void 0 : hoverRaw?.borderRadius != null ? {
+      borderRadius: hoverRaw.borderRadius
+    } : void 0, thumbPaintedHeight);
+    const thumbPress = withBinaryStateRadius(overrideRadius != null ? void 0 : pressRaw?.borderRadius != null ? {
+      borderRadius: pressRaw.borderRadius
+    } : void 0, thumbPaintedHeight);
+    const thumbFocus = withBinaryStateRadius(overrideRadius != null ? void 0 : focusRaw?.borderRadius != null ? {
+      borderRadius: focusRaw.borderRadius
+    } : void 0, thumbPaintedHeight);
+    const cellTrackRadiusStyle = state => typeof state?.borderRadius === "number" ? {
+      borderRadius: state.borderRadius
+    } : void 0;
     const cellTrack = grownTarget ? {
       height: trackHeight,
-      borderRadius: thumbRadius,
+      borderRadius: trackRadius,
       borderWidth,
-      frameHeight: targetHeight
+      frameHeight: targetHeight,
+      ...(cellTrackRadiusStyle(trackHover) && {
+        hoverStyle: cellTrackRadiusStyle(trackHover)
+      }),
+      ...(cellTrackRadiusStyle(trackPress) && {
+        pressStyle: cellTrackRadiusStyle(trackPress)
+      }),
+      ...(cellTrackRadiusStyle(trackFocus) && {
+        focusStyle: cellTrackRadiusStyle(trackFocus)
+      })
     } : void 0;
     if (grownTarget) {
       frameProps = {
@@ -663,9 +739,6 @@ function Switch({
       backgroundColor: import_colorRamps.formSwitchColors.track.on,
       borderColor: import_colorRamps.formSwitchColors.track.on
     } : void 0;
-    const hoverKnob = stripOutlineFromState((0, import_utils.stripRadiusFromStateProps)(control.hoverKnobProps));
-    const pressKnob = stripOutlineFromState((0, import_utils.stripRadiusFromStateProps)(control.pressKnobProps));
-    const focusKnob = stripOutlineFromState((0, import_utils.stripRadiusFromStateProps)(control.focusKnobProps));
     const switchElement = /* @__PURE__ */(0, import_jsx_runtime.jsx)(SwitchControl, {
       checked: switchChecked,
       onCheckedChange: val => {
@@ -693,24 +766,33 @@ function Switch({
       accessibilityHint: errorMessage ?? helperText,
       ariaLabel,
       ariaLabelledBy,
-      ...(hoverKnob && {
+      ...(thumbHover && {
+        thumbHoverStyle: thumbHover
+      }),
+      ...(thumbPress && {
+        thumbPressStyle: thumbPress
+      }),
+      ...(thumbFocus && {
+        thumbFocusStyle: thumbFocus
+      }),
+      ...(trackHover && {
         hoverStyle: {
-          ...hoverKnob,
+          ...trackHover,
           borderColor: stateBorderColor,
           ...checkedTrackFill
         }
       }),
-      ...(pressKnob && {
+      ...(trackPress && {
         pressStyle: {
-          ...pressKnob,
+          ...trackPress,
           borderColor: stateBorderColor,
           ...checkedTrackFill
         }
       }),
-      ...(focusKnob && {
+      ...(trackFocus && {
         focusStyle: {
           outlineWidth: 0,
-          ...focusKnob,
+          ...trackFocus,
           borderColor: stateBorderColor,
           ...checkedTrackFill
         }
@@ -719,16 +801,14 @@ function Switch({
     if (elevationWrapperProps.elevation && !grownTarget) {
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
         ...elevationWrapperProps,
-        borderRadius: isSquare ? 0 : 1e3,
+        borderRadius: trackRadius,
         children: switchElement
       });
     }
     return switchElement;
   };
   if (skeleton) {
-    const resolvedPointy = pointy ?? knobProps.pointy;
-    const knobRadius = knobProps.borderRadius.borderRadius;
-    const isSquare = resolvedPointy || knobRadius === "$0";
+    const skeletonStop = resolveSwitchRadiusStop(pointy, knobProps.borderRadius.borderRadius);
     const trackWidth = thumbHeight * 2 + borderWidth * 2;
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
       id,
@@ -743,7 +823,9 @@ function Switch({
           variant: "rounded",
           width: trackWidth,
           height: trackHeight,
-          borderRadius: isSquare ? 0 : 1e3
+          borderRadius: (0, import_theme.resolveRadiusClass)("BINARY", skeletonStop, {
+            heightPx: trackHeight
+          })
         }), label && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
           variant: "text",
           width: 96,
@@ -818,7 +900,13 @@ function Switch({
           ...(rowMinHeight !== void 0 && {
             minHeight: rowMinHeight
           }),
-          children: [renderSwitch(checked !== void 0 ? checked : Boolean(field.state.value), val => field.handleChange(val), (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur), !!resolvedError, typeof resolvedError === "string" && resolvedError ? resolvedError : void 0), label && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Label, {
+          children: [renderSwitch(checked !== void 0 ? checked : Boolean(field.state.value), val => {
+            field.handleChange(val);
+            if (saveMode === "declarative") {
+              (0, import_commitImmediateField.commitImmediateField)(resolvedForm, name, val);
+              onAutoCommit?.(name, val);
+            }
+          }, (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur), !!resolvedError, typeof resolvedError === "string" && resolvedError ? resolvedError : void 0), label && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Label, {
             htmlFor: id,
             size: size || "$true",
             ...knobProps.textWeight,

package/dist/cjs/fields/Switch/index.native.js

@@ -31,6 +31,8 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_tamagui = require("tamagui");
 var import_theme = require("@multiplatform.one/theme");
+var import_commitImmediateField = require("../../ContextualSaveBar/commitImmediateField.native.js");
+var import_Form = require("../../Form/index.native.js");
 var import_Skeleton = require("../../Skeleton/index.native.js");
 var import_fieldLayout = require("../../fieldLayout.native.js");
 var import_colorRamps = require("../../shared/colorRamps.native.js");
@@ -86,6 +88,60 @@ var resolveRadiusValue = function resolveRadiusValue2(radius) {
   var parsed = Number.parseFloat(String(resolved));
   return Number.isFinite(parsed) ? parsed : void 0;
 };
+function radiusStopFromToken(token) {
+  var _iteratorNormalCompletion = true,
+    _didIteratorError = false,
+    _iteratorError = void 0;
+  try {
+    for (var _iterator = Object.keys(import_theme.borderRadiusMap)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var stop = _step.value;
+      if (import_theme.borderRadiusMap[stop] === token) return stop;
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+  return void 0;
+}
+function resolveSwitchRadiusStop(pointy, radiusToken) {
+  if (pointy === true) return "none";
+  var stop = radiusStopFromToken(radiusToken);
+  if (!stop) {
+    throw new Error(`Switch: "${radiusToken}" is not a borderRadiusMap token; cannot resolve BINARY`);
+  }
+  return stop;
+}
+function binaryRadiusFromStateToken(token, heightPx) {
+  if (typeof token !== "string") return void 0;
+  var stop = radiusStopFromToken(token);
+  if (!stop) return void 0;
+  return (0, import_theme.resolveRadiusClass)("BINARY", stop, {
+    heightPx
+  });
+}
+function withBinaryStateRadius(stateProps, heightPx) {
+  if (!stateProps) return void 0;
+  var {
+    borderRadius: token,
+    ...rest
+  } = stateProps;
+  var resolved = binaryRadiusFromStateToken(token, heightPx);
+  var next = resolved === void 0 ? rest : {
+    ...rest,
+    borderRadius: resolved
+  };
+  return Object.keys(next).length > 0 ? next : void 0;
+}
 var SwitchThumbStyled = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "SwitchThumb",
   transition: "quick",
@@ -295,6 +351,9 @@ function SwitchControl(param) {
     pressStyle,
     focusStyle,
     focusVisibleStyle: _focusVisibleStyle,
+    thumbHoverStyle,
+    thumbPressStyle,
+    thumbFocusStyle,
     accessibilityLabel,
     accessibilityHint,
     ariaLabel,
@@ -548,6 +607,15 @@ function SwitchControl(param) {
       className: kbFocus ? SWITCH_KB_RING_CLASS : void 0,
       ...(kbFocus ? (0, import_theme.ensureFocusVisibleRing)() : {
         outlineWidth: 0
+      }),
+      ...(cellTrack.hoverStyle && {
+        hoverStyle: cellTrack.hoverStyle
+      }),
+      ...(cellTrack.pressStyle && {
+        pressStyle: cellTrack.pressStyle
+      }),
+      ...(cellTrack.focusStyle && {
+        focusStyle: cellTrack.focusStyle
       })
     }), leftIcon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(StyledSwitch.Icon, {
       placement: "left",
@@ -566,7 +634,16 @@ function SwitchControl(param) {
       ...(thumbHandleColor ? {
         backgroundColor: thumbHandleColor
       } : void 0),
-      transition: dragX != null ? "none" : motion
+      transition: dragX != null ? "none" : motion,
+      ...(thumbHoverStyle && {
+        hoverStyle: thumbHoverStyle
+      }),
+      ...(thumbPressStyle && {
+        pressStyle: thumbPressStyle
+      }),
+      ...(thumbFocusStyle && {
+        focusStyle: thumbFocusStyle
+      })
     })]
   });
 }
@@ -616,6 +693,10 @@ function Switch(param) {
     id: idProp,
     compact
   });
+  var {
+    mode: saveMode,
+    onAutoCommit
+  } = (0, import_Form.useFormSaveMode)();
   var resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name, function (v) {
     return !v;
   });
@@ -635,41 +716,57 @@ function Switch(param) {
   var grownTarget = targetHeight !== void 0;
   var rowMinHeight = !inTableCell && grownTarget ? targetHeight : void 0;
   var renderSwitch = function renderSwitch2(switchChecked, handleChange, handleBlur, hasError, errorMessage) {
-    var resolvedPointy2 = pointy !== null && pointy !== void 0 ? pointy : knobProps.pointy;
-    var knobRadius2 = knobProps.borderRadius.borderRadius;
-    var isSquare2 = resolvedPointy2 || knobRadius2 === "$0";
+    var _resolveRadiusValue, _resolveRadiusValue1;
     var overrideRadius = switchProps === null || switchProps === void 0 ? void 0 : switchProps.borderRadius;
-    var frameProps = {};
-    var thumbRadius = 1e3;
-    if (overrideRadius != null) {
-      var _resolveRadiusValue;
-      frameProps = {
-        borderRadius: overrideRadius,
-        height: thumbHeight + borderWidth * 2,
-        minHeight: thumbHeight + borderWidth * 2,
-        width: thumbHeight * 2 + borderWidth * 2
-      };
-      thumbRadius = (_resolveRadiusValue = resolveRadiusValue(overrideRadius)) !== null && _resolveRadiusValue !== void 0 ? _resolveRadiusValue : 1e3;
-    } else if (isSquare2) {
-      frameProps = {
-        borderRadius: 0,
-        height: thumbHeight + borderWidth * 2,
-        minHeight: thumbHeight + borderWidth * 2,
-        width: thumbHeight * 2 + borderWidth * 2
-      };
-      thumbRadius = 0;
-    } else {
-      frameProps = {
-        height: thumbHeight + borderWidth * 2,
-        minHeight: thumbHeight + borderWidth * 2,
-        width: thumbHeight * 2 + borderWidth * 2
-      };
-    }
+    var radiusStop = resolveSwitchRadiusStop(pointy, knobProps.borderRadius.borderRadius);
+    var thumbInset = switchThumbInset(thumbHeight);
+    var thumbPaintedHeight = thumbHeight - thumbInset * 2;
+    var trackRadius = overrideRadius != null ? (_resolveRadiusValue = resolveRadiusValue(overrideRadius)) !== null && _resolveRadiusValue !== void 0 ? _resolveRadiusValue : 1e3 : (0, import_theme.resolveRadiusClass)("BINARY", radiusStop, {
+      heightPx: trackHeight
+    });
+    var thumbRadius = overrideRadius != null ? (_resolveRadiusValue1 = resolveRadiusValue(overrideRadius)) !== null && _resolveRadiusValue1 !== void 0 ? _resolveRadiusValue1 : 1e3 : (0, import_theme.resolveRadiusClass)("BINARY", radiusStop, {
+      heightPx: thumbPaintedHeight
+    });
+    var frameProps = {
+      borderRadius: overrideRadius !== null && overrideRadius !== void 0 ? overrideRadius : trackRadius,
+      height: thumbHeight + borderWidth * 2,
+      minHeight: thumbHeight + borderWidth * 2,
+      width: thumbHeight * 2 + borderWidth * 2
+    };
+    var hoverRaw = stripOutlineFromState(control.hoverKnobProps);
+    var pressRaw = stripOutlineFromState(control.pressKnobProps);
+    var focusRaw = stripOutlineFromState(control.focusKnobProps);
+    var trackHover = overrideRadius != null ? (0, import_utils.stripRadiusFromStateProps)(hoverRaw) : withBinaryStateRadius(hoverRaw, trackHeight);
+    var trackPress = overrideRadius != null ? (0, import_utils.stripRadiusFromStateProps)(pressRaw) : withBinaryStateRadius(pressRaw, trackHeight);
+    var trackFocus = overrideRadius != null ? (0, import_utils.stripRadiusFromStateProps)(focusRaw) : withBinaryStateRadius(focusRaw, trackHeight);
+    var thumbHover = withBinaryStateRadius(overrideRadius != null ? void 0 : (hoverRaw === null || hoverRaw === void 0 ? void 0 : hoverRaw.borderRadius) != null ? {
+      borderRadius: hoverRaw.borderRadius
+    } : void 0, thumbPaintedHeight);
+    var thumbPress = withBinaryStateRadius(overrideRadius != null ? void 0 : (pressRaw === null || pressRaw === void 0 ? void 0 : pressRaw.borderRadius) != null ? {
+      borderRadius: pressRaw.borderRadius
+    } : void 0, thumbPaintedHeight);
+    var thumbFocus = withBinaryStateRadius(overrideRadius != null ? void 0 : (focusRaw === null || focusRaw === void 0 ? void 0 : focusRaw.borderRadius) != null ? {
+      borderRadius: focusRaw.borderRadius
+    } : void 0, thumbPaintedHeight);
+    var cellTrackRadiusStyle = function cellTrackRadiusStyle2(state) {
+      return typeof (state === null || state === void 0 ? void 0 : state.borderRadius) === "number" ? {
+        borderRadius: state.borderRadius
+      } : void 0;
+    };
     var cellTrack = grownTarget ? {
       height: trackHeight,
-      borderRadius: thumbRadius,
+      borderRadius: trackRadius,
       borderWidth,
-      frameHeight: targetHeight
+      frameHeight: targetHeight,
+      ...(cellTrackRadiusStyle(trackHover) && {
+        hoverStyle: cellTrackRadiusStyle(trackHover)
+      }),
+      ...(cellTrackRadiusStyle(trackPress) && {
+        pressStyle: cellTrackRadiusStyle(trackPress)
+      }),
+      ...(cellTrackRadiusStyle(trackFocus) && {
+        focusStyle: cellTrackRadiusStyle(trackFocus)
+      })
     } : void 0;
     if (grownTarget) {
       frameProps = {
@@ -704,9 +801,6 @@ function Switch(param) {
       backgroundColor: import_colorRamps.formSwitchColors.track.on,
       borderColor: import_colorRamps.formSwitchColors.track.on
     } : void 0;
-    var hoverKnob = stripOutlineFromState((0, import_utils.stripRadiusFromStateProps)(control.hoverKnobProps));
-    var pressKnob = stripOutlineFromState((0, import_utils.stripRadiusFromStateProps)(control.pressKnobProps));
-    var focusKnob = stripOutlineFromState((0, import_utils.stripRadiusFromStateProps)(control.focusKnobProps));
     var switchElement = /* @__PURE__ */(0, import_jsx_runtime.jsx)(SwitchControl, {
       checked: switchChecked,
       onCheckedChange: function onCheckedChange2(val) {
@@ -734,24 +828,33 @@ function Switch(param) {
       accessibilityHint: errorMessage !== null && errorMessage !== void 0 ? errorMessage : helperText,
       ariaLabel,
       ariaLabelledBy,
-      ...(hoverKnob && {
+      ...(thumbHover && {
+        thumbHoverStyle: thumbHover
+      }),
+      ...(thumbPress && {
+        thumbPressStyle: thumbPress
+      }),
+      ...(thumbFocus && {
+        thumbFocusStyle: thumbFocus
+      }),
+      ...(trackHover && {
         hoverStyle: {
-          ...hoverKnob,
+          ...trackHover,
           borderColor: stateBorderColor,
           ...checkedTrackFill
         }
       }),
-      ...(pressKnob && {
+      ...(trackPress && {
         pressStyle: {
-          ...pressKnob,
+          ...trackPress,
           borderColor: stateBorderColor,
           ...checkedTrackFill
         }
       }),
-      ...(focusKnob && {
+      ...(trackFocus && {
         focusStyle: {
           outlineWidth: 0,
-          ...focusKnob,
+          ...trackFocus,
           borderColor: stateBorderColor,
           ...checkedTrackFill
         }
@@ -760,16 +863,14 @@ function Switch(param) {
     if (elevationWrapperProps.elevation && !grownTarget) {
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
         ...elevationWrapperProps,
-        borderRadius: isSquare2 ? 0 : 1e3,
+        borderRadius: trackRadius,
         children: switchElement
       });
     }
     return switchElement;
   };
   if (skeleton) {
-    var resolvedPointy = pointy !== null && pointy !== void 0 ? pointy : knobProps.pointy;
-    var knobRadius = knobProps.borderRadius.borderRadius;
-    var isSquare = resolvedPointy || knobRadius === "$0";
+    var skeletonStop = resolveSwitchRadiusStop(pointy, knobProps.borderRadius.borderRadius);
     var trackWidth = thumbHeight * 2 + borderWidth * 2;
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
       id,
@@ -784,7 +885,9 @@ function Switch(param) {
           variant: "rounded",
           width: trackWidth,
           height: trackHeight,
-          borderRadius: isSquare ? 0 : 1e3
+          borderRadius: (0, import_theme.resolveRadiusClass)("BINARY", skeletonStop, {
+            heightPx: trackHeight
+          })
         }), label && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
           variant: "text",
           width: 96,
@@ -866,7 +969,11 @@ function Switch(param) {
             minHeight: rowMinHeight
           }),
           children: [renderSwitch(checked !== void 0 ? checked : Boolean(field.state.value), function (val) {
-            return field.handleChange(val);
+            field.handleChange(val);
+            if (saveMode === "declarative") {
+              (0, import_commitImmediateField.commitImmediateField)(resolvedForm, name, val);
+              onAutoCommit === null || onAutoCommit === void 0 ? void 0 : onAutoCommit(name, val);
+            }
           }, (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur), !!resolvedError, typeof resolvedError === "string" && resolvedError ? resolvedError : void 0), label && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Label, {
             htmlFor: id,
             size: size || "$true",