@multiplatform.one/forms 7.34.4 → 7.36.0

package/src/fields/Switch/Switch.footprint.spec.tsx

@@ -1,79 +1,89 @@
 /**
- * MPO-356 / LC-91 SWITCH-FOOTPRINT, web half. At default knobs the painted
- * track is Tamagui's own Switch: `getSwitchHeight` = size × 0.65, width 2×,
- * so `$4` paints 58 × 29, not the 86 × 44 control row it used to fill.
- * The size knob keeps stepping it along Tamagui's ladder.
+ * LC-91: web tracks use 22/40 of the recipe height at 42:22.
+ * The default track is 42 × 22 with an 18 px thumb inset 2 px.
  */
-
 import { cleanup } from "@testing-library/react";
-import { Switch as TamaguiSwitch } from "tamagui";
 import { afterEach, describe, expect, it } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Preset } from "@multiplatform.one/theme";
-import { Switch } from "./index";
+import { Switch, type SwitchProps } from "./index";
+import { switchFootprint } from "./footprint";
 import { paintedBox, thumbOf, trackBox } from "../../../tests/switchFootprintProbe";
 
 afterEach(cleanup);
 
-const LADDER = [
-  { knob: "small", token: "$3" },
-  { knob: "medium", token: "$4" },
-  { knob: "large", token: "$5" },
-] as const;
-
-function ours(size?: (typeof LADDER)[number]["knob"]) {
+function mount(props: SwitchProps = {}, outlined = false) {
   const result = renderWithProviders(
-    <Preset overrides={{ elevation: "none", ...(size && { size }) }}>
-      <Switch name="sw" defaultValue={false} aria-label="Notifications" />
+    <Preset overrides={{ elevation: "none", fillStyle: outlined ? "outlined" : "filled" }}>
+      <Switch aria-label="Notifications" {...props} />
     </Preset>,
   );
   const frame = result.getSwitch() as HTMLElement;
-  expect(frame).toBeTruthy();
-  return { track: trackBox(frame), thumb: paintedBox(thumbOf(frame)) };
+  return { frame, thumb: thumbOf(frame), track: trackBox(frame) };
 }
 
-function stock(token: string) {
-  const result = renderWithProviders(
-    <TamaguiSwitch size={token as never} aria-label="Stock">
-      <TamaguiSwitch.Thumb />
-    </TamaguiSwitch>,
+describe("Switch footprint on web", () => {
+  it.each([
+    { size: undefined, width: 42, height: 22, thumbSize: 18 },
+    { size: "$3", width: 34, height: 18, thumbSize: 14 },
+    { size: "$5", width: 50, height: 26, thumbSize: 22 },
+    { size: "$2", width: 27, height: 14, thumbSize: 10 },
+  ] as const)(
+    "$size paints $width × $height with a $thumbSize px thumb",
+    ({ size, width, height, thumbSize }) => {
+      const { track, thumb } = mount({ size });
+      expect(track).toEqual({ width, height });
+      expect(paintedBox(thumb)).toEqual({ width: thumbSize, height: thumbSize });
+    },
   );
-  const frame = result.getSwitch() as HTMLElement;
-  expect(frame).toBeTruthy();
-  return { track: paintedBox(frame), thumb: paintedBox(thumbOf(frame)) };
-}
 
-describe("Switch footprint on web (MPO-356)", () => {
-  it("paints Tamagui's 58 × 29 track at default knobs, not the 44 px control row", () => {
-    const { track } = ours();
-    expect(track).toEqual({ width: 58, height: 29 });
+  it.each([false, true])("checked=%s rests with a 2 px outer inset", (checked) => {
+    const { thumb } = mount({ checked });
+    const transform = thumb.style.transform || getComputedStyle(thumb).transform;
+    expect(transform).toContain(`translateX(${checked ? 22 : 2}px)`);
+    expect(transform).toContain("translateY(2px)");
   });
 
-  it("the default track is the stock Tamagui $true Switch", () => {
-    expect(ours().track).toEqual(stock("$true").track);
+  it("has no border under the default preset", () => {
+    const { frame } = mount();
+    expect(getComputedStyle(frame).borderTopWidth).toBe("0px");
   });
 
-  it("restores the 44 px press target on a fine pointer through the house slop channel (LC-54)", () => {
-    const result = renderWithProviders(
-      <Switch name="sw" defaultValue={false} aria-label="Notifications" />,
-    );
-    const frame = result.getSwitch() as HTMLElement;
-    const outset = Number(frame.getAttribute("data-mp-press-slop"));
-    expect(trackBox(frame).height + outset * 2).toBeGreaterThanOrEqual(44);
-    expect(frame.getAttribute("data-mp-press-axis")).toBe("vertical");
+  it.each([
+    { size: undefined, width: 42, height: 22, thumbSize: 18 },
+    { size: "$3", width: 34, height: 18, thumbSize: 14 },
+  ] as const)(
+    "$size centers its paint inside a 44 × 44 target",
+    ({ size, width, height, thumbSize }) => {
+      const { frame, track, thumb } = mount({ size, minTargetHeight: 44 });
+      expect(paintedBox(frame)).toEqual({ width: 44, height: 44 });
+      expect(track).toEqual({ width, height });
+      expect(paintedBox(thumb)).toEqual({ width: thumbSize, height: thumbSize });
+      const transform = thumb.style.transform || getComputedStyle(thumb).transform;
+      expect(transform).toContain(`translateX(${(44 - width) / 2 + 2}px)`);
+      expect(transform).toContain(`translateY(${(44 - thumbSize) / 2}px)`);
+    },
+  );
+
+  it("outlines a transparent off track while preserving the 18 px thumb", () => {
+    const { frame, thumb } = mount({}, true);
+    expect(frame.className).toContain("_bg-transparent");
+    expect(parseFloat(getComputedStyle(frame).borderTopWidth)).toBeGreaterThanOrEqual(1);
+    expect(paintedBox(thumb)).toEqual({ width: 18, height: 18 });
   });
 
-  for (const { knob, token } of LADDER) {
-    it(`size ${knob} steps with Tamagui's ${token} Switch and keeps its 2:1 track`, () => {
-      const { track, thumb } = ours(knob);
-      const reference = stock(token);
-      expect(track).toEqual(reference.track);
-      expect(track.width).toBe(track.height * 2);
-      // Tamagui's thumb fills the track; ours fills it inside the 1 px hairline.
-      expect(thumb).toEqual({
-        width: reference.thumb.width - 2,
-        height: reference.thumb.height - 2,
-      });
-    });
-  }
+  it.each([0, 1, 2])("keeps the thumb 2 px from the outer edge with a %s px ring", (ring) => {
+    const footprint = switchFootprint("$4", ring);
+    expect(footprint.thumbSize).toBe(18);
+    expect(footprint.thumbInset + ring).toBe(2);
+    expect(footprint.travel).toBe(20);
+  });
+
+  it("restores the 44 px press target on both axes through press slop", () => {
+    const { frame, track } = mount();
+    const slop = Number(frame.getAttribute("data-mp-press-slop"));
+    expect(track.height + slop * 2).toBeGreaterThanOrEqual(44);
+    expect(track.width + slop * 2).toBeGreaterThanOrEqual(44);
+    expect(frame.hasAttribute("data-mp-press-axis")).toBe(false);
+  });
 });

package/src/fields/Switch/Switch.spec.tsx

@@ -1,9 +1,12 @@
+import { readFileSync } from "node:fs";
+import { URL as NodeURL } from "node:url";
 import { useForm } from "@tanstack/react-form";
-import { act, fireEvent, render, waitFor } from "@testing-library/react";
+import { act, cleanup, fireEvent, render, waitFor } from "@testing-library/react";
 import { TamaguiProvider, YStack, createTamagui } from "tamagui";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import {
+  Preset,
   createThemesBuilder,
   defaultAccentTheme,
   defaultBaseTheme,
@@ -14,6 +17,7 @@ import { animationsCSS } from "@tamagui/config/v5-css";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Switch } from "./index";
+import { thumbOf } from "../../../tests/switchFootprintProbe";
 
 // House builder themes for the LC-05 mark assertion — created at MODULE
 // scope: tamagui registers a config's theme variables globally at
@@ -236,8 +240,6 @@ describe("Switch", () => {
         fireEvent.pointerDown(switchElement, { clientX: 0, pointerId: 1, button: 0 });
       });
       await act(async () => {
-        // Past drag-intent (10px) but still below the snap midpoint
-        // (recipe $4 track ≈ 21px, midpoint ≈ 10.5).
         fireEvent(
           document,
           new PointerEvent("pointermove", { clientX: 10, pointerId: 1, bubbles: true }),
@@ -246,7 +248,7 @@ describe("Switch", () => {
       await act(async () => {
         fireEvent(
           document,
-          new PointerEvent("pointerup", { clientX: 10, pointerId: 1, bubbles: true }),
+          new PointerEvent("pointerup", { clientX: 9, pointerId: 1, bubbles: true }),
         );
       });
       // Same-gesture press that follows a drag must not flip the value.
@@ -413,3 +415,122 @@ describe("Switch", () => {
     });
   });
 });
+
+describe("Switch thumb and pointer paint", () => {
+  function paint(el: HTMLElement, prefix: "_bg-" | "_btc-") {
+    const property = prefix === "_bg-" ? "background-color" : "border-top-color";
+    const tokens = Array.from(el.classList)
+      .filter((name) => name.startsWith(prefix) && !/^_[a-z]+-0/.test(name))
+      .flatMap((name) =>
+        Array.from(document.styleSheets).flatMap((sheet) =>
+          Array.from(sheet.cssRules)
+            .filter(
+              (rule): rule is CSSStyleRule =>
+                rule instanceof CSSStyleRule && rule.selectorText.endsWith(`.${name}`),
+            )
+            .map((rule) => rule.style.getPropertyValue(property).trim())
+            .filter(Boolean),
+        ),
+      );
+    return tokens.join(" ");
+  }
+
+  function mount({
+    checked = false,
+    disabled = false,
+    readOnly = false,
+    grown = false,
+    outlined = false,
+    scheme = "light",
+    switchProps = {},
+  } = {}) {
+    const result = render(
+      <TamaguiProvider config={houseConfig} defaultTheme={scheme} disableInjectCSS>
+        <Preset overrides={{ fillStyle: outlined ? "outlined" : "filled" }}>
+          <Switch
+            label="Pointer"
+            checked={checked}
+            disabled={disabled}
+            readOnly={readOnly}
+            minTargetHeight={grown ? 44 : undefined}
+            switchProps={switchProps}
+          />
+        </Preset>
+      </TamaguiProvider>,
+    );
+    const frame = result.getByRole("switch");
+    const track = grown ? frame.querySelector<HTMLElement>("._pos-absolute._pe-none")! : frame;
+    return { frame, track, thumb: thumbOf(frame) };
+  }
+
+  it.each(["light", "dark"])("%s uses the same thumb token in both states", (scheme) => {
+    const off = mount({ scheme });
+    expect(off.thumb.className).toContain("_bg-switchThu");
+    cleanup();
+    const on = mount({ scheme, checked: true });
+    expect(on.thumb.className).toContain("_bg-switchThu");
+  });
+
+  it("has no luminance-dependent thumb override", () => {
+    expect(readFileSync(new NodeURL("./index.tsx", import.meta.url), "utf8")).not.toContain(
+      "useLuminanceThumbColor",
+    );
+  });
+
+  it.each([false, true])("grown=%s changes the off track on mouse enter and leave", (grown) => {
+    const { frame, track } = mount({ grown });
+    expect(paint(track, "_bg-")).toBe("var(--switchTrackOff)");
+    fireEvent.mouseEnter(frame);
+    expect(paint(track, "_bg-")).toBe("var(--switchTrackOffHover)");
+    fireEvent.mouseLeave(frame);
+    expect(paint(track, "_bg-")).toBe("var(--switchTrackOff)");
+  });
+
+  it.each([false, true])("grown=%s keeps the checked accent on hover", (grown) => {
+    const { frame, track } = mount({ grown, checked: true });
+    expect(paint(track, "_bg-")).toBe("var(--accentBackground)");
+    fireEvent.mouseEnter(frame);
+    expect(paint(track, "_bg-")).toBe("var(--accentBackground)");
+  });
+
+  it.each([{ disabled: true }, { readOnly: true }])("ignores hover for %o", (props) => {
+    const { frame, track } = mount(props);
+    fireEvent.mouseEnter(frame);
+    expect(paint(track, "_bg-")).toBe("var(--switchTrackOff)");
+  });
+
+  it.each([false, true])("grown=%s changes only the outlined ring on hover", (grown) => {
+    const { frame, track } = mount({ grown, outlined: true });
+    expect(track.className).toContain("_bg-transparent");
+    expect(paint(track, "_btc-")).toBe("var(--switchTrackOff)");
+    fireEvent.mouseEnter(frame);
+    expect(track.className).toContain("_bg-transparent");
+    expect(paint(track, "_btc-")).toBe("var(--switchTrackOffHover)");
+    fireEvent.mouseLeave(frame);
+    expect(paint(track, "_btc-")).toBe("var(--switchTrackOff)");
+  });
+
+  it("composes the caller's mouse handlers once", () => {
+    const onMouseEnter = vi.fn();
+    const onMouseLeave = vi.fn();
+    const { frame } = mount({ switchProps: { onMouseEnter, onMouseLeave } });
+    fireEvent.mouseEnter(frame);
+    fireEvent.mouseLeave(frame);
+    expect(onMouseEnter).toHaveBeenCalledTimes(1);
+    expect(onMouseLeave).toHaveBeenCalledTimes(1);
+  });
+
+  it("paints the press tier and composes press handlers", () => {
+    const onPressIn = vi.fn();
+    const onPressOut = vi.fn();
+    const { frame, track } = mount({ switchProps: { onPressIn, onPressOut } });
+    fireEvent.pointerDown(frame, { pointerId: 1, button: 0, clientX: 0 });
+    fireEvent.mouseDown(frame, { button: 0 });
+    expect(paint(track, "_bg-")).toBe("var(--switchTrackOffPress)");
+    expect(onPressIn).toHaveBeenCalledTimes(1);
+    fireEvent.mouseUp(frame, { button: 0 });
+    fireEvent.pointerUp(document, { pointerId: 1, clientX: 0 });
+    expect(paint(track, "_bg-")).toBe("var(--switchTrackOff)");
+    expect(onPressOut).toHaveBeenCalledTimes(1);
+  });
+});

package/src/fields/Switch/Switch.stories.tsx

@@ -146,9 +146,9 @@ export const WithIcons: Story = {
 export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
-      <Switch label="Small" size="$2" />
-      <Switch label="Medium (default)" size="$3" />
-      <Switch label="Large" size="$4" />
+      <Switch label="Small ($3)" size="$3" />
+      <Switch label="Default ($4)" />
+      <Switch label="Large ($5)" size="$5" />
     </YStack>
   ),
 };

package/src/fields/Switch/footprint.ts

@@ -2,20 +2,13 @@ import { sizeRecipeForToken } from "@multiplatform.one/theme";
 import { isWeb } from "tamagui";
 
 /**
- * LC-91 SWITCH-FOOTPRINT (MPO-356). The recipe height is the control ROW and
- * the press target (44 at `$4`); the painted switch is a glyph inside it, so
- * it takes the platform switch's own fraction of that height:
- *
- * - web: Tamagui's Switch, `getSwitchHeight` = size × 0.65 at a 2:1 aspect,
- *   thumb filling the track (tamagui.dev `$4` = 58 × 29, thumb 29).
- * - native: UISwitch's 51 × 31 pt track at the 44 medium stop (Material 3's
- *   52 × 32 sits inside the same 10 percent), Tamagui's thumb filling it: 29 pt.
- *
- * Painting the whole recipe height is what made `$4` an 86 × 44 slab once
- * MPO-13 lifted the recipe from 32 to Tamagui's 44.
+ * LC-91: web track = 22/40 of the token's recipe height at 42:22,
+ * with the thumb inset 2 px from the outer edge.
+ * Native uses UISwitch's 51 × 31 pt at the scale's control,
+ * scaled by the token's ratio to that control height.
  */
-const webSwitch = { heightRatio: 0.65, aspect: 2, rimGutter: 0 };
-const nativeSwitch = { heightRatio: 31 / 44, aspect: 51 / 31, rimGutter: 1 };
+const webSwitch = { heightRatio: 22 / 40, aspect: 42 / 22, rimGutter: 2 };
+const nativeSwitch = { width: 51, height: 31, rimGutter: 1 };
 
 export type SwitchFootprint = {
   trackHeight: number;
@@ -30,8 +23,14 @@ export type SwitchFootprint = {
 
 export function switchFootprint(sizeToken: string, borderWidth: number): SwitchFootprint {
   const platform = isWeb ? webSwitch : nativeSwitch;
-  const trackHeight = Math.round(sizeRecipeForToken(sizeToken).height * platform.heightRatio);
-  const trackWidth = Math.round(trackHeight * platform.aspect);
+  const recipeHeight = sizeRecipeForToken(sizeToken).height;
+  const ratio = recipeHeight / sizeRecipeForToken("$4").height;
+  const trackHeight = Math.round(
+    isWeb ? recipeHeight * webSwitch.heightRatio : nativeSwitch.height * ratio,
+  );
+  const trackWidth = Math.round(
+    isWeb ? trackHeight * webSwitch.aspect : nativeSwitch.width * ratio,
+  );
   const thumbSlot = trackHeight - borderWidth * 2;
   const thumbInset = Math.max(0, platform.rimGutter - borderWidth);
   return {