@multiplatform.one/forms 7.34.4 → 7.36.0

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

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { transitionOrInstant } from "../../shared/instantMotion.native.js";
+import { transitionProps } from "@multiplatform.one/theme";
 import { useTouchSurface } from "@multiplatform.one/theme";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { SwitchStyledContext, Label, View, XStack, createSwitch, getFontSize, getTokens, getVariable, getVariableValue, isWeb, styled, useGetThemedIcon, useTheme, withStaticProperties } from "tamagui";
-import { TOUCH_HEIGHT_FLOOR, borderRadiusMap, contrastRatio, ensureFocusVisibleRing, normalizeToHex, radiusResolutionProps, relativeLuminance, resolveRadiusClass, sizeRecipeForToken, useResolvedKnobs, wasKeyboardFocus, ensureKeyboardModalityTracking } from "@multiplatform.one/theme";
+import { TOUCH_HEIGHT_FLOOR, borderRadiusMap, ensureFocusVisibleRing, radiusResolutionProps, resolveRadiusClass, sizeRecipeForToken, useResolvedKnobs, wasKeyboardFocus, ensureKeyboardModalityTracking } from "@multiplatform.one/theme";
 import { commitImmediateField } from "../../ContextualSaveBar/commitImmediateField.native.js";
 import { useFormSaveMode } from "../../Form/index.native.js";
 import { Skeleton } from "../../Skeleton/index.native.js";
 import { Field, FieldLayout } from "../../fieldLayout.native.js";
-import { formCommonColors, formControlColors, formSwitchColors } from "../../shared/colorRamps.native.js";
+import { formCommonColors, formSwitchColors } from "../../shared/colorRamps.native.js";
 import { clampRadiusInStateProps, getElevationWrapperProps, getFieldError, mergeFieldHandler, stripRadiusFromStateProps, useFormField, useResolvedValidators } from "../../shared/utils.native.js";
 import { pressSlopProps } from "../../shared/pressSlopProps.native.js";
 import { useIsInTableCell } from "../../shared/tableCellContext.native.js";
@@ -15,7 +17,7 @@ import { switchFootprint } from "./footprint.native.js";
 var SWITCH_DRAG_INTENT_PX = 10;
 var SWITCH_CELL_TARGET_HEIGHT = 44;
 var resolveSwitchMotion = function resolveSwitchMotion2(token) {
-  return token && token !== "none" ? token : "none";
+  return transitionOrInstant(token);
 };
 var SWITCH_KB_RING_CSS_ID = "mp-switch-kb-ring-css";
 var SWITCH_KB_RING_CLASS = "mp-switch-kb-ring";
@@ -41,7 +43,13 @@ var stripOutlineFromState = function stripOutlineFromState2(props) {
   } = props;
   return Object.keys(rest).length > 0 ? rest : void 0;
 };
-var SWITCH_TRACK_BORDER_FALLBACK = 1;
+var stripTrackPaintFromState = function stripTrackPaintFromState2(props) {
+  return props && Object.fromEntries(Object.entries(props).filter(function (param) {
+    var [key] = param;
+    return !/^background|^border.*Color$/.test(key);
+  }));
+};
+var SWITCH_TRACK_BORDER_FALLBACK = 0;
 var resolveRadiusValue = function resolveRadiusValue2(radius) {
   var _getTokens_radius;
   if (typeof radius === "number") return radius;
@@ -101,27 +109,10 @@ var SwitchThumbStyled = styled(View, {
       false: {
         size: "$true",
         backgroundColor: formSwitchColors.thumb,
-        // The thumb is a solid physical handle — it gets its definition from a
-        // subtle drop shadow (iOS/Material convention), NOT a flat gray ring.
-        // A visible border reads as an outline/defect; the shadow lifts the
-        // thumb off the track on every side and survives light-thumb-on-light-
-        // track without a hard edge.
         borderWidth: 0,
         borderRadius: 1e3,
         justifyContent: "center",
-        alignItems: "center",
-        ...(isWeb ? {
-          boxShadow: "0 1px 2px rgba(0,0,0,0.18), 0 0 1px rgba(0,0,0,0.12)"
-        } : {
-          shadowColor: "#000",
-          shadowOffset: {
-            width: 0,
-            height: 1
-          },
-          shadowOpacity: 0.15,
-          shadowRadius: 2,
-          elevation: 2
-        })
+        alignItems: "center"
       }
     },
     checked: {
@@ -152,10 +143,8 @@ var SwitchFrameStyled = styled(View, {
         position: "relative",
         borderRadius: 1e3,
         backgroundColor: formSwitchColors.track.off,
-        borderWidth: 1,
-        // Off track: muted fill + ≥3:1 boundary (M3 unselected outline,
-        // DF-06). On track is fill — see `checked` / `activeStyle`.
-        borderColor: formControlColors.boundary,
+        borderWidth: 0,
+        borderColor: formSwitchColors.track.off,
         outlineWidth: 0,
         focusStyle: {
           outlineWidth: 0
@@ -174,7 +163,7 @@ var SwitchFrameStyled = styled(View, {
       },
       false: {
         backgroundColor: formSwitchColors.track.off,
-        borderColor: formControlColors.boundary
+        borderColor: formSwitchColors.track.off
       }
     },
     size: {
@@ -268,21 +257,6 @@ var SwitchComp = createSwitch({
 var StyledSwitch = withStaticProperties(SwitchComp, {
   Icon: SwitchIcon
 });
-function useLuminanceThumbColor(displayChecked) {
-  var _ref, _ref1, _ref2;
-  var _theme_trackToken, _theme_color1, _theme_color12;
-  var theme = useTheme();
-  var trackToken = (displayChecked ? formSwitchColors.track.on : formSwitchColors.track.off).slice(1);
-  var trackRaw = String((_ref = (_theme_trackToken = theme[trackToken]) === null || _theme_trackToken === void 0 ? void 0 : _theme_trackToken.val) !== null && _ref !== void 0 ? _ref : "");
-  var paperRaw = String((_ref1 = (_theme_color1 = theme.color1) === null || _theme_color1 === void 0 ? void 0 : _theme_color1.val) !== null && _ref1 !== void 0 ? _ref1 : "");
-  var inkRaw = String((_ref2 = (_theme_color12 = theme.color12) === null || _theme_color12 === void 0 ? void 0 : _theme_color12.val) !== null && _ref2 !== void 0 ? _ref2 : "");
-  var track = trackRaw ? normalizeToHex(trackRaw) : null;
-  var paper = paperRaw ? normalizeToHex(paperRaw) : null;
-  var ink = inkRaw ? normalizeToHex(inkRaw) : null;
-  if (!track || !paper || !ink) return void 0;
-  var trackLum = relativeLuminance(track);
-  return contrastRatio(relativeLuminance(paper), trackLum) >= contrastRatio(relativeLuminance(ink), trackLum) ? paperRaw : inkRaw;
-}
 function SwitchControl(param) {
   var {
     checked,
@@ -325,8 +299,9 @@ function SwitchControl(param) {
     knobProps
   } = useResolvedKnobs();
   var outlined = knobProps.outlined;
-  var trackOffFill = outlined ? "transparent" : formSwitchColors.track.off;
-  var trackOffBorder = formControlColors.boundary;
+  var [hovered, setHovered] = useState(false);
+  var [pressed, setPressed] = useState(false);
+  var offPaint = pressed ? formSwitchColors.track.offPress : hovered ? formSwitchColors.track.offHover : formSwitchColors.track.off;
   var {
     thumbInset,
     thumbSize,
@@ -361,6 +336,7 @@ function SwitchControl(param) {
       if (session.moved) setDragX(nextX);
     };
     var endDrag = function endDrag2(e) {
+      setPressed(false);
       var session = sessionRef.current;
       if (!session || e.pointerId !== session.pointerId) return;
       var dist = dragDistanceRef.current;
@@ -390,7 +366,6 @@ function SwitchControl(param) {
     };
   }, []);
   var displayChecked = snapChecked !== null && snapChecked !== void 0 ? snapChecked : checked;
-  var thumbHandleColor = useLuminanceThumbColor(displayChecked);
   var restingX = displayChecked ? dragDistance : 0;
   var thumbX = dragX != null ? dragX : restingX;
   var canDrag = isWeb && !disabled && !readOnly;
@@ -421,6 +396,10 @@ function SwitchControl(param) {
   var focusSafe = stripOutlineFromState(focusStyle);
   var {
     onPointerDown: switchPointerDown,
+    onMouseEnter: switchMouseEnter,
+    onMouseLeave: switchMouseLeave,
+    onPressIn: switchPressIn,
+    onPressOut: switchPressOut,
     onPress: switchPress,
     onFocus: switchFocus,
     onBlur: switchBlur,
@@ -431,7 +410,10 @@ function SwitchControl(param) {
   var frameClassName = [switchClassName, !cellTrack ? kbRingClass : void 0].filter(Boolean).join(" ") || void 0;
   return /* @__PURE__ */_jsxs(StyledSwitch, {
     ...inputSurface,
-    transition: motion,
+    ...transitionProps({
+      ...knobProps.motion.control,
+      transition: motion
+    }, ["borderWidth"]),
     size: sizeToken,
     ...(hoverSafe && {
       hoverStyle: hoverSafe
@@ -467,8 +449,8 @@ function SwitchControl(param) {
       backgroundColor: formSwitchColors.track.on,
       borderColor: formSwitchColors.track.on
     } : {
-      backgroundColor: trackOffFill,
-      borderColor: trackOffBorder
+      backgroundColor: outlined ? "transparent" : offPaint,
+      borderColor: offPaint
     }),
     ...(kbFocus ? {
       "data-kb-focus": "true"
@@ -530,6 +512,24 @@ function SwitchControl(param) {
       }
       onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(val);
     },
+    ...(isWeb && {
+      onMouseEnter: function onMouseEnter(e) {
+        if (!disabled && !readOnly) setHovered(true);
+        switchMouseEnter === null || switchMouseEnter === void 0 ? void 0 : switchMouseEnter(e);
+      },
+      onMouseLeave: function onMouseLeave(e) {
+        setHovered(false);
+        switchMouseLeave === null || switchMouseLeave === void 0 ? void 0 : switchMouseLeave(e);
+      }
+    }),
+    onPressIn: function onPressIn(e) {
+      if (!disabled && !readOnly) setPressed(true);
+      switchPressIn === null || switchPressIn === void 0 ? void 0 : switchPressIn(e);
+    },
+    onPressOut: function onPressOut(e) {
+      setPressed(false);
+      switchPressOut === null || switchPressOut === void 0 ? void 0 : switchPressOut(e);
+    },
     onPointerDown: function onPointerDown(e) {
       var _e_pointerId;
       switchPointerDown === null || switchPointerDown === void 0 ? void 0 : switchPointerDown(e);
@@ -551,17 +551,20 @@ function SwitchControl(param) {
     } : void 0),
     children: [cellTrack && /* @__PURE__ */_jsx(View, {
       position: "absolute",
-      left: 0,
-      right: 0,
+      left: (cellTrack.frameWidth - cellTrack.width) / 2,
+      width: cellTrack.width,
       top: "50%",
       y: -cellTrack.height / 2,
       height: cellTrack.height,
       borderRadius: cellTrack.borderRadius,
       ...radiusResolution,
       borderWidth: cellTrack.borderWidth,
-      borderColor: displayChecked ? formSwitchColors.track.on : trackOffBorder,
-      backgroundColor: displayChecked ? formSwitchColors.track.on : trackOffFill,
-      transition: motion,
+      borderColor: displayChecked ? formSwitchColors.track.on : offPaint,
+      backgroundColor: displayChecked ? formSwitchColors.track.on : outlined ? "transparent" : offPaint,
+      ...transitionProps({
+        ...knobProps.motion.control,
+        transition: motion
+      }, ["borderWidth"]),
       pointerEvents: "none",
       className: kbFocus ? SWITCH_KB_RING_CLASS : void 0,
       ...(kbFocus ? ensureFocusVisibleRing() : {
@@ -583,18 +586,19 @@ function SwitchControl(param) {
       placement: "right",
       children: rightIcon
     }), /* @__PURE__ */_jsx(StyledSwitch.Thumb, {
+      ...knobProps.thumbShadow,
       borderRadius: thumbRadius,
       ...radiusResolution,
       width: thumbSize,
       height: thumbSize,
       // Own position so drag can override Tamagui's initialChecked alignSelf/x math.
       alignSelf: "flex-start",
-      x: thumbX + thumbInset + (cellTrack ? cellTrack.borderWidth : 0),
+      x: thumbX + thumbInset + (cellTrack ? cellTrack.borderWidth + (cellTrack.frameWidth - cellTrack.width) / 2 : 0),
       y: cellTrack ? (cellTrack.frameHeight - thumbSize) / 2 : thumbInset,
-      ...(thumbHandleColor ? {
-        backgroundColor: thumbHandleColor
-      } : void 0),
-      transition: dragX != null ? "none" : motion,
+      ...transitionProps({
+        ...knobProps.motion.control,
+        transition: dragX != null ? transitionOrInstant(void 0) : motion
+      }),
       ...(thumbHoverStyle && {
         hoverStyle: thumbHoverStyle
       }),
@@ -633,10 +637,8 @@ function Switch(param) {
     switchProps,
     pointy,
     skeleton,
-    compact,
     minTargetHeight
   } = param;
-  var _knobProps_borderRadius_borderWidth;
   var hydrationTouch = useTouchSurface();
   var handleValueChange = function handleValueChange2(val) {
     onChange === null || onChange === void 0 ? void 0 : onChange(val);
@@ -651,8 +653,7 @@ function Switch(param) {
     id
   } = useFormField({
     form: formProp,
-    id: idProp,
-    compact
+    id: idProp
   });
   var {
     mode: saveMode,
@@ -670,8 +671,8 @@ function Switch(param) {
     }
   }, [defaultValue, checked]);
   var sizeToken = size !== null && size !== void 0 ? size : knobProps.sizeToken;
-  var borderWidth = (_knobProps_borderRadius_borderWidth = knobProps.borderRadius.borderWidth) !== null && _knobProps_borderRadius_borderWidth !== void 0 ? _knobProps_borderRadius_borderWidth : 1;
-  var footprint = switchFootprint(String(sizeToken), borderWidth);
+  var ringWidth = knobProps.outlined ? Math.max(Number(knobProps.borderRadius.borderWidth) || 1, 1) : 0;
+  var footprint = switchFootprint(String(sizeToken), ringWidth);
   var {
     trackHeight,
     trackWidth
@@ -693,14 +694,15 @@ function Switch(param) {
     var radiusResolution = overrideRadius == null ? radiusResolutionProps("BINARY") : void 0;
     var frameProps = {
       borderRadius: overrideRadius !== null && overrideRadius !== void 0 ? overrideRadius : trackRadius,
+      borderWidth: ringWidth,
       height: trackHeight,
       minHeight: trackHeight,
       width: trackWidth,
       ...pressSlopProps(trackHeight, !grownTarget, trackWidth >= TOUCH_HEIGHT_FLOOR ? "vertical" : "both")
     };
-    var hoverRaw = stripOutlineFromState(control.hoverKnobProps);
-    var pressRaw = stripOutlineFromState(control.pressKnobProps);
-    var focusRaw = stripOutlineFromState(control.focusKnobProps);
+    var hoverRaw = stripTrackPaintFromState(stripOutlineFromState(control.hoverKnobProps));
+    var pressRaw = stripTrackPaintFromState(stripOutlineFromState(control.pressKnobProps));
+    var focusRaw = stripTrackPaintFromState(stripOutlineFromState(control.focusKnobProps));
     var trackHover = overrideRadius != null ? stripRadiusFromStateProps(hoverRaw) : withBinaryStateRadius(hoverRaw, trackHeight);
     var trackPress = overrideRadius != null ? stripRadiusFromStateProps(pressRaw) : withBinaryStateRadius(pressRaw, trackHeight);
     var trackFocus = overrideRadius != null ? stripRadiusFromStateProps(focusRaw) : withBinaryStateRadius(focusRaw, trackHeight);
@@ -719,10 +721,12 @@ function Switch(param) {
       } : void 0;
     };
     var cellTrack = grownTarget ? {
+      width: trackWidth,
       height: trackHeight,
       borderRadius: trackRadius,
-      borderWidth,
+      borderWidth: ringWidth,
       frameHeight: targetHeight,
+      frameWidth: Math.max(TOUCH_HEIGHT_FLOOR, trackWidth),
       ...(cellTrackRadiusStyle(trackHover) && {
         hoverStyle: cellTrackRadiusStyle(trackHover)
       }),
@@ -738,6 +742,7 @@ function Switch(param) {
         ...frameProps,
         height: targetHeight,
         minHeight: targetHeight,
+        width: Math.max(TOUCH_HEIGHT_FLOOR, trackWidth),
         backgroundColor: "transparent",
         borderWidth: 0,
         borderColor: "transparent",
@@ -748,26 +753,12 @@ function Switch(param) {
           borderColor: "transparent"
         }
       };
-    } else if (switchChecked) {
-      frameProps = {
-        ...frameProps,
-        ...radiusResolution,
-        backgroundColor: formSwitchColors.track.on,
-        borderColor: formSwitchColors.track.on
-      };
     } else {
       frameProps = {
         ...frameProps,
-        ...radiusResolution,
-        backgroundColor: knobProps.outlined ? "transparent" : formSwitchColors.track.off,
-        borderColor: formControlColors.boundary
+        ...radiusResolution
       };
     }
-    var stateBorderColor = switchChecked ? formSwitchColors.track.on : formControlColors.boundary;
-    var checkedTrackFill = switchChecked ? {
-      backgroundColor: formSwitchColors.track.on,
-      borderColor: formSwitchColors.track.on
-    } : void 0;
     var switchElement = /* @__PURE__ */_jsx(SwitchControl, {
       checked: switchChecked,
       onCheckedChange: function onCheckedChange2(val) {
@@ -784,7 +775,7 @@ function Switch(param) {
       sizeToken,
       footprint,
       thumbRadius,
-      transition: resolveSwitchMotion(knobProps.transition),
+      transition: resolveSwitchMotion(knobProps.motion.control.transition),
       frameProps,
       switchProps,
       leftIcon,
@@ -806,25 +797,15 @@ function Switch(param) {
         thumbFocusStyle: thumbFocus
       }),
       ...(trackHover && {
-        hoverStyle: {
-          ...trackHover,
-          borderColor: stateBorderColor,
-          ...checkedTrackFill
-        }
+        hoverStyle: trackHover
       }),
       ...(trackPress && {
-        pressStyle: {
-          ...trackPress,
-          borderColor: stateBorderColor,
-          ...checkedTrackFill
-        }
+        pressStyle: trackPress
       }),
       ...(trackFocus && {
         focusStyle: {
           outlineWidth: 0,
-          ...trackFocus,
-          borderColor: stateBorderColor,
-          ...checkedTrackFill
+          ...trackFocus
         }
       })
     });
@@ -844,7 +825,6 @@ function Switch(param) {
       id,
       size,
       knobProps,
-      compactSpacing: true,
       children: /* @__PURE__ */_jsxs(XStack, {
         ...knobProps.gap,
         alignItems: "center",