@multiplatform.one/forms 6.1.0 → 6.4.0

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

@@ -31,10 +31,14 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_tamagui = require("tamagui");
 var import_get_token = require("@tamagui/get-token");
+var import_theme = require("@multiplatform.one/theme");
 var import_Skeleton = require("../../Skeleton/index.native.js");
 var import_fieldLayout = require("../../fieldLayout.native.js");
 var import_colorRamps = require("../../shared/colorRamps.native.js");
 var import_utils = require("../../shared/utils.native.js");
+var import_tableCellContext = require("../../shared/tableCellContext.native.js");
+var SWITCH_DRAG_INTENT_PX = 10;
+var SWITCH_CELL_TARGET_HEIGHT = 44;
 var getSwitchHeight = function getSwitchHeight2(val) {
   return Math.round((0, import_tamagui.getVariableValue)((0, import_get_token.getSize)(val)) * 0.65);
 };
@@ -58,11 +62,19 @@ var SwitchThumbStyled = (0, import_tamagui.styled)(import_tamagui.View, {
     unstyled: {
       false: {
         size: "$true",
-        backgroundColor: import_colorRamps.formControlColors.thumb.base,
+        backgroundColor: import_colorRamps.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",
-        ...(!import_tamagui.isWeb ? {
+        ...(import_tamagui.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,
@@ -71,7 +83,7 @@ var SwitchThumbStyled = (0, import_tamagui.styled)(import_tamagui.View, {
           shadowOpacity: 0.15,
           shadowRadius: 2,
           elevation: 2
-        } : void 0)
+        })
       }
     },
     checked: {
@@ -99,20 +111,10 @@ var SwitchFrameStyled = (0, import_tamagui.styled)(import_tamagui.View, {
       false: {
         position: "relative",
         borderRadius: 1e3,
-        backgroundColor: import_colorRamps.formControlColors.background,
+        backgroundColor: import_colorRamps.formSwitchColors.track.off,
         borderWidth: 1,
         borderColor: import_colorRamps.formControlColors.border,
-        hoverStyle: {
-          borderColor: import_colorRamps.formControlColors.border
-        },
-        pressStyle: {
-          borderColor: import_colorRamps.formControlColors.border
-        },
-        focusStyle: {
-          borderColor: import_colorRamps.formControlColors.border
-        },
         focusVisibleStyle: {
-          borderColor: import_colorRamps.formControlColors.border,
           outlineColor: "$outlineColor",
           outlineStyle: "solid",
           outlineWidth: 2
@@ -121,11 +123,11 @@ var SwitchFrameStyled = (0, import_tamagui.styled)(import_tamagui.View, {
     },
     checked: {
       true: {
-        backgroundColor: import_colorRamps.formControlColors.border,
-        borderColor: import_colorRamps.formControlColors.border
+        backgroundColor: import_colorRamps.formSwitchColors.track.on,
+        borderColor: import_colorRamps.formSwitchColors.track.on
       },
       false: {
-        backgroundColor: import_colorRamps.formControlColors.background,
+        backgroundColor: import_colorRamps.formSwitchColors.track.off,
         borderColor: import_colorRamps.formControlColors.border
       }
     },
@@ -218,6 +220,236 @@ var SwitchComp = (0, import_tamagui.createSwitch)({
 var StyledSwitch = (0, import_tamagui.withStaticProperties)(SwitchComp, {
   Icon: SwitchIcon
 });
+function useLuminanceThumbColor(displayChecked) {
+  var _ref, _ref1, _ref2;
+  var _theme_trackToken, _theme_color1, _theme_color12;
+  var theme = (0, import_tamagui.useTheme)();
+  var trackToken = (displayChecked ? import_colorRamps.formSwitchColors.track.on : import_colorRamps.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 ? (0, import_theme.normalizeToHex)(trackRaw) : null;
+  var paper = paperRaw ? (0, import_theme.normalizeToHex)(paperRaw) : null;
+  var ink = inkRaw ? (0, import_theme.normalizeToHex)(inkRaw) : null;
+  if (!track || !paper || !ink) return void 0;
+  var trackLum = (0, import_theme.relativeLuminance)(track);
+  return (0, import_theme.contrastRatio)((0, import_theme.relativeLuminance)(paper), trackLum) >= (0, import_theme.contrastRatio)((0, import_theme.relativeLuminance)(ink), trackLum) ? paperRaw : inkRaw;
+}
+function SwitchControl(param) {
+  var {
+    checked,
+    onCheckedChange,
+    onBlur,
+    disabled,
+    readOnly,
+    required,
+    hasError,
+    id,
+    sizeToken,
+    thumbHeight,
+    thumbRadius,
+    transition,
+    frameProps,
+    switchProps,
+    leftIcon,
+    rightIcon,
+    inputSurface,
+    hoverStyle,
+    pressStyle,
+    focusStyle,
+    focusVisibleStyle,
+    accessibilityLabel,
+    accessibilityHint,
+    cellTrack
+  } = param;
+  var {
+    disabledState
+  } = (0, import_theme.useResolvedKnobs)();
+  var dragDistance = thumbHeight;
+  var [dragX, setDragX] = (0, import_react.useState)(null);
+  var [snapChecked, setSnapChecked] = (0, import_react.useState)(null);
+  var sessionRef = (0, import_react.useRef)(null);
+  var suppressClickToggleRef = (0, import_react.useRef)(false);
+  var checkedRef = (0, import_react.useRef)(checked);
+  var dragDistanceRef = (0, import_react.useRef)(dragDistance);
+  var onCheckedChangeRef = (0, import_react.useRef)(onCheckedChange);
+  checkedRef.current = checked;
+  dragDistanceRef.current = dragDistance;
+  onCheckedChangeRef.current = onCheckedChange;
+  (0, import_react.useEffect)(function () {
+    if (snapChecked == null) return;
+    if (checked === snapChecked) setSnapChecked(null);
+  }, [checked, snapChecked]);
+  (0, import_react.useEffect)(function () {
+    if (!import_tamagui.isWeb) return;
+    var onMove = function onMove2(e) {
+      var session = sessionRef.current;
+      if (!session || e.pointerId !== session.pointerId) return;
+      var dist = dragDistanceRef.current;
+      var originX = session.originChecked ? dist : 0;
+      var nextX = Math.max(0, Math.min(dist, originX + (e.clientX - session.startX)));
+      if (Math.abs(e.clientX - session.startX) >= SWITCH_DRAG_INTENT_PX) {
+        session.moved = true;
+      }
+      if (session.moved) setDragX(nextX);
+    };
+    var endDrag = function endDrag2(e) {
+      var session = sessionRef.current;
+      if (!session || e.pointerId !== session.pointerId) return;
+      var dist = dragDistanceRef.current;
+      var originX = session.originChecked ? dist : 0;
+      var nextX = Math.max(0, Math.min(dist, originX + (e.clientX - session.startX)));
+      sessionRef.current = null;
+      if (!session.moved) {
+        setDragX(null);
+        return;
+      }
+      suppressClickToggleRef.current = true;
+      var nextChecked = nextX >= dist / 2;
+      setDragX(null);
+      if (nextChecked !== checkedRef.current) {
+        var _onCheckedChangeRef_current;
+        setSnapChecked(nextChecked);
+        (_onCheckedChangeRef_current = onCheckedChangeRef.current) === null || _onCheckedChangeRef_current === void 0 ? void 0 : _onCheckedChangeRef_current.call(onCheckedChangeRef, nextChecked);
+      }
+    };
+    document.addEventListener("pointermove", onMove);
+    document.addEventListener("pointerup", endDrag);
+    document.addEventListener("pointercancel", endDrag);
+    return function () {
+      document.removeEventListener("pointermove", onMove);
+      document.removeEventListener("pointerup", endDrag);
+      document.removeEventListener("pointercancel", endDrag);
+    };
+  }, []);
+  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 = import_tamagui.isWeb && !disabled && !readOnly;
+  var {
+    onPointerDown: switchPointerDown,
+    onPress: switchPress,
+    ...restSwitchProps
+  } = switchProps || {};
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(StyledSwitch, {
+    ...inputSurface,
+    transition: transition || "quick",
+    size: sizeToken,
+    ...(hoverStyle && {
+      hoverStyle
+    }),
+    ...(pressStyle && {
+      pressStyle
+    }),
+    ...(focusStyle && {
+      focusStyle
+    }),
+    ...(focusVisibleStyle && {
+      focusVisibleStyle
+    }),
+    activeStyle: {
+      backgroundColor: import_colorRamps.formSwitchColors.track.on,
+      borderColor: import_colorRamps.formSwitchColors.track.on
+    },
+    // DF-23 / LC-40 DISABLED-VISIBLE: the track is text-free control
+    // chrome — under `keepLabel` it opacity-dims via the resolved recipe
+    // while the sibling label/helper stay readable; `dimWhole` leaves the
+    // single dim to the FieldLayout assembly.
+    ...(disabled ? disabledState.chromeKnobProps : void 0),
+    ...frameProps,
+    ...restSwitchProps,
+    disabled,
+    id,
+    checked,
+    // iOS: bare styled Views are not accessibility elements — without this
+    // block the switch is invisible to VoiceOver (no name, role, or state).
+    ...(!import_tamagui.isWeb && {
+      accessible: true,
+      accessibilityRole: "switch",
+      accessibilityState: {
+        disabled: !!disabled,
+        checked
+      },
+      ...(accessibilityLabel ? {
+        accessibilityLabel
+      } : void 0),
+      ...(accessibilityHint ? {
+        accessibilityHint
+      } : void 0)
+    }),
+    ...(readOnly ? {
+      pointerEvents: "none"
+    } : void 0),
+    ...(readOnly ? {
+      "aria-readonly": true
+    } : void 0),
+    "aria-required": required || void 0,
+    "aria-invalid": hasError || void 0,
+    onCheckedChange: function onCheckedChange1(val) {
+      if (disabled || readOnly) return;
+      if (suppressClickToggleRef.current) {
+        suppressClickToggleRef.current = false;
+        return;
+      }
+      onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(val);
+    },
+    ...(onBlur ? {
+      onBlur
+    } : void 0),
+    onPointerDown: function onPointerDown(e) {
+      var _e_pointerId;
+      switchPointerDown === null || switchPointerDown === void 0 ? void 0 : switchPointerDown(e);
+      if (!canDrag) return;
+      if (typeof e.button === "number" && e.button !== 0) return;
+      sessionRef.current = {
+        pointerId: (_e_pointerId = e.pointerId) !== null && _e_pointerId !== void 0 ? _e_pointerId : 0,
+        startX: e.clientX,
+        originChecked: checkedRef.current,
+        moved: false
+      };
+      setSnapChecked(null);
+    },
+    // Do NOT setDragX here — dragX starts only once drag intent is
+    // confirmed in onMove, so a plain click (or mid-flight retarget)
+    // never freezes/teleports the thumb.
+    ...(switchPress ? {
+      onPress: switchPress
+    } : void 0),
+    children: [cellTrack && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      position: "absolute",
+      left: 0,
+      right: 0,
+      top: "50%",
+      y: -cellTrack.height / 2,
+      height: cellTrack.height,
+      borderRadius: cellTrack.borderRadius,
+      borderWidth: cellTrack.borderWidth,
+      borderColor: displayChecked ? import_colorRamps.formSwitchColors.track.on : import_colorRamps.formControlColors.border,
+      backgroundColor: displayChecked ? import_colorRamps.formSwitchColors.track.on : import_colorRamps.formSwitchColors.track.off,
+      transition: transition || "quick",
+      pointerEvents: "none"
+    }), leftIcon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(StyledSwitch.Icon, {
+      placement: "left",
+      children: leftIcon
+    }), rightIcon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(StyledSwitch.Icon, {
+      placement: "right",
+      children: rightIcon
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(StyledSwitch.Thumb, {
+      borderRadius: thumbRadius,
+      // Own position so drag can override Tamagui's initialChecked alignSelf/x math.
+      alignSelf: "flex-start",
+      x: thumbX + (cellTrack ? cellTrack.borderWidth : 0),
+      ...(cellTrack && {
+        y: (cellTrack.frameHeight - thumbHeight) / 2
+      }),
+      ...(thumbHandleColor ? {
+        backgroundColor: thumbHandleColor
+      } : void 0),
+      transition: dragX != null ? "none" : transition || "quick"
+    })]
+  });
+}
 function Switch(param) {
   var {
     name,
@@ -234,6 +466,7 @@ function Switch(param) {
     id: idProp,
     checked,
     defaultValue,
+    onChange,
     onCheckedChange,
     onBlur,
     leftIcon,
@@ -241,8 +474,14 @@ function Switch(param) {
     switchProps,
     pointy,
     skeleton,
-    compact
+    compact,
+    minTargetHeight
   } = param;
+  var _knobProps_borderRadius_borderWidth;
+  var handleValueChange = function handleValueChange2(val) {
+    onChange === null || onChange === void 0 ? void 0 : onChange(val);
+    onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(val);
+  };
   var {
     resolvedForm,
     knobProps,
@@ -259,20 +498,25 @@ function Switch(param) {
     return !v;
   });
   var elevationWrapperProps = (0, import_utils.getElevationWrapperProps)(knobProps, elevation);
+  var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   var [internalChecked, setInternalChecked] = (0, import_react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : false);
   (0, import_react.useEffect)(function () {
     if (checked === void 0 && defaultValue !== void 0) {
       setInternalChecked(defaultValue);
     }
   }, [defaultValue, checked]);
-  var renderSwitch = function renderSwitch2(switchChecked, handleChange, handleBlur, hasError) {
-    var _knobProps_borderRadius_borderWidth;
-    var resolvedPointy = pointy !== null && pointy !== void 0 ? pointy : knobProps.pointy;
-    var knobRadius = knobProps.borderRadius.borderRadius;
-    var isSquare = resolvedPointy || knobRadius === "$0";
+  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 thumbHeight = getSwitchHeight(sizeToken);
+  var trackHeight = thumbHeight + borderWidth * 2;
+  var targetHeight = inTableCell ? SWITCH_CELL_TARGET_HEIGHT : minTargetHeight !== void 0 ? Math.max(minTargetHeight, trackHeight) : void 0;
+  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 overrideRadius = switchProps === null || switchProps === void 0 ? void 0 : switchProps.borderRadius;
-    var borderWidth = (_knobProps_borderRadius_borderWidth = knobProps.borderRadius.borderWidth) !== null && _knobProps_borderRadius_borderWidth !== void 0 ? _knobProps_borderRadius_borderWidth : 1;
-    var thumbHeight = getSwitchHeight(knobProps.sizeToken);
     var frameProps = {};
     var thumbRadius = 1e3;
     if (overrideRadius != null) {
@@ -284,7 +528,7 @@ function Switch(param) {
         width: thumbHeight * 2 + borderWidth * 2
       };
       thumbRadius = (_resolveRadiusValue = resolveRadiusValue(overrideRadius)) !== null && _resolveRadiusValue !== void 0 ? _resolveRadiusValue : 1e3;
-    } else if (isSquare) {
+    } else if (isSquare2) {
       frameProps = {
         borderRadius: 0,
         height: thumbHeight + borderWidth * 2,
@@ -299,96 +543,122 @@ function Switch(param) {
         width: thumbHeight * 2 + borderWidth * 2
       };
     }
-    var switchElement = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(StyledSwitch, {
-      ...knobProps.inputSurface,
+    var cellTrack = grownTarget ? {
+      height: trackHeight,
+      borderRadius: thumbRadius,
+      borderWidth,
+      frameHeight: targetHeight
+    } : void 0;
+    if (grownTarget) {
+      frameProps = {
+        ...frameProps,
+        height: targetHeight,
+        minHeight: targetHeight,
+        backgroundColor: "transparent",
+        borderWidth: 0,
+        borderColor: "transparent",
+        // createSwitch spreads activeStyle last when checked — keep the
+        // (invisible) grown frame transparent in the checked state too.
+        activeStyle: {
+          backgroundColor: "transparent",
+          borderColor: "transparent"
+        }
+      };
+    }
+    var stateBorderColor = switchChecked ? import_colorRamps.formSwitchColors.track.on : import_colorRamps.formControlColors.border;
+    var checkedTrackFill = switchChecked ? {
+      backgroundColor: import_colorRamps.formSwitchColors.track.on,
+      borderColor: import_colorRamps.formSwitchColors.track.on
+    } : void 0;
+    var hoverKnob = (0, import_utils.stripRadiusFromStateProps)(control.hoverKnobProps);
+    var pressKnob = (0, import_utils.stripRadiusFromStateProps)(control.pressKnobProps);
+    var focusKnob = (0, import_utils.stripRadiusFromStateProps)(control.focusKnobProps);
+    var focusVisibleKnob = (0, import_utils.stripRadiusFromStateProps)(control.focusVisibleKnobProps);
+    var switchElement = /* @__PURE__ */(0, import_jsx_runtime.jsx)(SwitchControl, {
+      checked: switchChecked,
+      onCheckedChange: function onCheckedChange2(val) {
+        if (disabled || readOnly) return;
+        handleChange === null || handleChange === void 0 ? void 0 : handleChange(val);
+        handleValueChange(val);
+      },
+      onBlur: handleBlur,
+      disabled,
+      readOnly,
+      required,
+      hasError,
+      id,
+      sizeToken,
+      thumbHeight,
+      thumbRadius,
       transition: knobProps.transition || "quick",
-      size: knobProps.sizeToken,
-      ...((0, import_utils.stripRadiusFromStateProps)(control.hoverKnobProps) && {
+      frameProps,
+      switchProps,
+      leftIcon,
+      rightIcon,
+      inputSurface: grownTarget ? {} : knobProps.inputSurface,
+      cellTrack,
+      accessibilityLabel: typeof label === "string" ? `${label}${required ? " *" : ""}` : void 0,
+      accessibilityHint: errorMessage !== null && errorMessage !== void 0 ? errorMessage : helperText,
+      ...(hoverKnob && {
         hoverStyle: {
-          borderColor: import_colorRamps.formControlColors.border,
-          ...(0, import_utils.stripRadiusFromStateProps)(control.hoverKnobProps)
+          borderColor: stateBorderColor,
+          ...hoverKnob,
+          ...checkedTrackFill
         }
       }),
-      ...((0, import_utils.stripRadiusFromStateProps)(control.pressKnobProps) && {
+      ...(pressKnob && {
         pressStyle: {
-          borderColor: import_colorRamps.formControlColors.border,
-          ...(0, import_utils.stripRadiusFromStateProps)(control.pressKnobProps)
+          borderColor: stateBorderColor,
+          ...pressKnob,
+          ...checkedTrackFill
         }
       }),
-      ...((0, import_utils.stripRadiusFromStateProps)(control.focusKnobProps) && {
+      ...(focusKnob && {
         focusStyle: {
-          borderColor: import_colorRamps.formControlColors.border,
-          ...(0, import_utils.stripRadiusFromStateProps)(control.focusKnobProps)
+          borderColor: stateBorderColor,
+          ...focusKnob,
+          ...checkedTrackFill
         }
       }),
-      ...((0, import_utils.stripRadiusFromStateProps)(control.focusVisibleKnobProps) && {
+      ...(focusVisibleKnob && {
         focusVisibleStyle: {
-          borderColor: import_colorRamps.formControlColors.border,
-          ...(0, import_utils.stripRadiusFromStateProps)(control.focusVisibleKnobProps)
+          borderColor: stateBorderColor,
+          ...focusVisibleKnob,
+          ...checkedTrackFill
         }
-      }),
-      activeStyle: {
-        backgroundColor: import_colorRamps.formControlColors.border,
-        borderColor: import_colorRamps.formControlColors.border
-      },
-      ...frameProps,
-      ...switchProps,
-      disabled,
-      id,
-      checked: switchChecked,
-      ...(readOnly ? {
-        pointerEvents: "none"
-      } : void 0),
-      ...(readOnly ? {
-        "aria-readonly": true
-      } : void 0),
-      "aria-required": required || void 0,
-      "aria-invalid": hasError || void 0,
-      onCheckedChange: function onCheckedChange1(val) {
-        if (disabled || readOnly) return;
-        handleChange === null || handleChange === void 0 ? void 0 : handleChange(val);
-        onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(val);
-      },
-      ...(handleBlur ? {
-        onBlur: handleBlur
-      } : void 0),
-      children: [leftIcon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(StyledSwitch.Icon, {
-        placement: "left",
-        children: leftIcon
-      }), rightIcon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(StyledSwitch.Icon, {
-        placement: "right",
-        children: rightIcon
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(StyledSwitch.Thumb, {
-        borderRadius: thumbRadius,
-        transition: knobProps.transition || "quick"
-      })]
+      })
     });
-    if (elevationWrapperProps.elevation) {
+    if (elevationWrapperProps.elevation && !grownTarget) {
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
         ...elevationWrapperProps,
-        borderRadius: isSquare ? 0 : 1e3,
+        borderRadius: isSquare2 ? 0 : 1e3,
         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 trackWidth = thumbHeight * 2 + borderWidth * 2;
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
       id,
       size,
       knobProps,
       compactSpacing: true,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-        gap: "$2",
+        ...knobProps.gap,
         alignItems: "center",
-        height: size || knobProps.sizeToken,
+        height: sizeToken,
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
           variant: "rounded",
-          width: 44,
-          height: 24
+          width: trackWidth,
+          height: trackHeight,
+          borderRadius: isSquare ? 0 : 1e3
         }), label && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
           variant: "text",
-          width: "40%",
+          width: 96,
           height: 14
         })]
       })
@@ -402,13 +672,19 @@ function Switch(param) {
       helperText,
       size,
       knobProps,
+      // LC-40: FieldLayout owns the dimWhole assembly dim (keepLabel pins
+      // the sibling label/helper readable) — it needs the disabled state.
+      disabled,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
         ...knobProps.gap,
         alignItems: "center",
-        height: size || knobProps.sizeToken,
+        height: sizeToken,
+        ...(rowMinHeight !== void 0 && {
+          minHeight: rowMinHeight
+        }),
         children: [renderSwitch(resolvedChecked, checked === void 0 ? function (val) {
           return setInternalChecked(val);
-        } : void 0, onBlur, !!error), label && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Label, {
+        } : void 0, onBlur, !!error, typeof error === "string" && error ? error : void 0), label && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Label, {
           htmlFor: id,
           size: size || "$true",
           ...knobProps.textWeight,
@@ -429,7 +705,7 @@ function Switch(param) {
             color: knobProps.textAccentColor,
             ...text.focusVisibleKnobProps
           },
-          paddingRight: "$1",
+          paddingInlineEnd: "$1",
           ...labelProps,
           children: [label, required && " *"]
         })]
@@ -450,13 +726,18 @@ function Switch(param) {
         helperText,
         size,
         knobProps,
+        // LC-40: see standalone branch — FieldLayout carries dimWhole.
+        disabled,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
           ...knobProps.gap,
           alignItems: "center",
-          height: size || knobProps.sizeToken,
+          height: sizeToken,
+          ...(rowMinHeight !== void 0 && {
+            minHeight: rowMinHeight
+          }),
           children: [renderSwitch(checked !== void 0 ? checked : Boolean(field.state.value), function (val) {
             return field.handleChange(val);
-          }, (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur), !!resolvedError), label && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Label, {
+          }, (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,
@@ -477,7 +758,7 @@ function Switch(param) {
               color: formLabelColor,
               ...text.focusVisibleKnobProps
             },
-            paddingRight: "$1",
+            paddingInlineEnd: "$1",
             ...labelProps,
             children: [label, required && " *"]
           })]