@multiplatform.one/forms 7.11.0 → 7.16.0

package/src/errorTint.spec.tsx

@@ -0,0 +1,70 @@
+/**
+ * MPO-369: a field in its error state enters the semantic `error` theme, so
+ * the tint survives an app that ships the default theme subset. The stock
+ * test config has no `error` theme, so both house configs are mounted here.
+ */
+
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import {
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+  subsetThemes,
+} from "@multiplatform.one/theme";
+import { configWithoutAnimations } from "@tamagui/config";
+import { animationsCSS } from "@tamagui/config/v5-css";
+import type { ReactElement } from "react";
+import { TamaguiProvider, createTamagui } from "tamagui";
+import { Duration } from "./fields/Duration";
+import { Input } from "./fields/Input";
+import { TextArea } from "./fields/TextArea";
+
+const houseThemes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+
+const defaultSubset = {
+  components: ["Button", "Input", "TextArea"],
+  tints: ["accent", "active", "alt1", "alt2", "error", "success", "warning"],
+};
+
+const configs = {
+  full: createTamagui({
+    ...configWithoutAnimations,
+    animations: animationsCSS,
+    themes: houseThemes as any,
+  }),
+  subset: createTamagui({
+    ...configWithoutAnimations,
+    animations: animationsCSS,
+    themes: subsetThemes(houseThemes, defaultSubset) as any,
+  }),
+};
+
+const fields: Record<string, ReactElement> = {
+  Input: <Input label="Email" name="email" error="Enter an email address" />,
+  TextArea: <TextArea label="Notes" name="notes" error="Enter a note" />,
+  Duration: <Duration label="Length" name="length" value={60} error="Enter a length" />,
+};
+
+describe("field error tint", () => {
+  for (const [configName, config] of Object.entries(configs)) {
+    for (const scheme of ["light", "dark"] as const) {
+      for (const [fieldName, field] of Object.entries(fields)) {
+        it(`${fieldName} enters the error theme under the ${configName} config (${scheme})`, () => {
+          const { container } = render(
+            <TamaguiProvider config={config} defaultTheme={scheme} disableInjectCSS>
+              {field}
+            </TamaguiProvider>,
+          );
+          expect(container.querySelector(".t_error")).not.toBeNull();
+          expect(container.querySelector("[class*='t_red']")).toBeNull();
+        });
+      }
+    }
+  }
+});

package/src/fieldFamilyStories.radius.spec.tsx

@@ -23,10 +23,12 @@ import { Preset, type BorderRadius } from "@multiplatform.one/theme";
 import type { ReactElement } from "react";
 import { afterEach, describe, expect, it } from "vitest";
 
+import * as errorSummaryStories from "./ErrorSummary.stories";
 import * as fieldGroupStories from "./FieldGroup.stories";
 import * as fieldLayoutStories from "./FieldLayout.stories";
 import * as fieldsetStories from "./Fieldset.stories";
 import * as formGridStories from "./FormGrid.stories";
+import * as labelStories from "./Label/Label.stories";
 
 afterEach(cleanup);
 
@@ -116,3 +118,49 @@ describe("form layout stories mount knob-consuming field chrome", () => {
     });
   }
 });
+
+/**
+ * ErrorSummary and Label mount a text control beside the part under test, so
+ * the probe measures that control's chrome. The Box around each input has to
+ * carry the knob's token: a raw tamagui Input pins its own radius and no
+ * ancestor moves (MPO-316).
+ */
+function inputChromeTokens(container: HTMLElement): string[] {
+  return [...container.querySelectorAll<HTMLElement>("input")].map((input) => {
+    for (let el = input.parentElement; el && el !== container; el = el.parentElement) {
+      for (const cls of String(el.className || "").split(/\s+/)) {
+        const match = /^_btlr-t-radius-(\d+)$/.exec(cls);
+        if (match) return match[1];
+      }
+    }
+    return "none found";
+  });
+}
+
+const beside = [
+  {
+    name: "Forms/ErrorSummary FocusesTheFieldOnPress",
+    story: errorSummaryStories.FocusesTheFieldOnPress as StoryLike,
+    meta: errorSummaryStories.default,
+    inputs: 2,
+  },
+  {
+    name: "Forms/Label WithControl",
+    story: labelStories.WithControl as StoryLike,
+    meta: labelStories.default,
+    inputs: 1,
+  },
+];
+
+describe("stories that mount a text control beside a form part use house chrome", () => {
+  for (const { name, story, meta, inputs } of beside) {
+    describe(name, () => {
+      for (const stop of stops) {
+        it(`wraps every input in chrome at radius token $${ladder[stop]} at borderRadius:${stop}`, () => {
+          const { container } = mountAt(story, meta as { args?: unknown }, stop);
+          expect(inputChromeTokens(container)).toEqual(Array(inputs).fill(ladder[stop]));
+        });
+      }
+    });
+  }
+});

package/src/fieldLayout.tsx

@@ -303,7 +303,7 @@ export function FieldLayout({
     <FieldDescribedByContext.Provider value={describedBy}>
       <FieldA11yContext.Provider value={fieldA11y}>
         <YStack
-          theme={hasErrorState ? "red" : undefined}
+          theme={hasErrorState ? "error" : undefined}
           // LC-40: the assembly-wide dim (label included) rides the resolved
           // recipe and is populated only under `dimWhole`; `keepLabel`
           // treatment lives on the control chrome itself.

package/src/fields/Barcode/BarcodePreview.spec.tsx

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Theme } from "tamagui";
 import { BarcodePreview, barcodePreviewSymbology } from "./BarcodePreview";
 import { countModules, encodeCode128B } from "./code128";
 import { QR_QUIET_ZONE_MODULES, encodeQr } from "./qr";
@@ -104,18 +105,37 @@ describe("BarcodePreview — qr format", () => {
   /** The field's own default bound (Barcode/index.tsx): 36 comfortable, 24 compact. */
   const formHeight = 36;
 
-  it("QR modules paint $color on $background (themed polarity; MPO-94 is not this lane)", () => {
-    const result = renderWithProviders(<BarcodePreview value="SHC-42" format="qr" height={120} />);
-    const square = result.container.querySelector(
-      '[data-testid="barcode-preview-qr"]',
-    ) as HTMLElement | null;
-    expect(square).not.toBeNull();
-    expect(square!.className).toContain("_bg-background");
-    const darkModule = [...square!.querySelectorAll("*")].find((el) =>
-      (el as HTMLElement).className?.toString().includes("_bg-color"),
-    ) as HTMLElement | undefined;
-    expect(darkModule).toBeTruthy();
-    expect(darkModule!.className).not.toMatch(/_bg-(?:white|black|color12)\b/);
+  /** Nearest Tamagui theme scope above an element (`t_light` / `t_dark`). */
+  function themeScope(el: Element | null): string | undefined {
+    for (let node = el?.parentElement; node; node = node.parentElement) {
+      const scope = String(node.className).match(/\bt_(light|dark)\b/);
+      if (scope) return scope[1];
+    }
+    return undefined;
+  }
+
+  it("the QR face pins dark-on-light in both schemes; the Code 128 strip follows the scheme (MPO-94)", () => {
+    for (const scheme of ["light", "dark"] as const) {
+      const result = renderWithProviders(
+        <Theme name={scheme}>
+          <BarcodePreview value="SHC-42" format="qr" height={120} />
+          <BarcodePreview value="SKU-001234" format="code128" height={36} />
+        </Theme>,
+      );
+      const square = result.container.querySelector(
+        '[data-testid="barcode-preview-qr"]',
+      ) as HTMLElement | null;
+      expect(square).not.toBeNull();
+      expect(themeScope(square), `${scheme}: QR face scope`).toBe("light");
+      expect(square!.className).toContain("_bg-background");
+      const darkModule = [...square!.querySelectorAll("*")].find((el) =>
+        (el as HTMLElement).className?.toString().includes("_bg-color"),
+      ) as HTMLElement | undefined;
+      expect(darkModule).toBeTruthy();
+      const strip = result.container.querySelectorAll('[data-testid="barcode-preview"]')[1];
+      expect(themeScope(strip), `${scheme}: strip scope`).toBe(scheme);
+      result.unmount();
+    }
   });
 
   it("draws the QR matrix canvas-free (labeled image, real module rows)", () => {

package/src/fields/Barcode/BarcodePreview.stories.tsx

@@ -80,16 +80,17 @@ export const Empty: Story = {
 };
 
 /**
- * Themed polarity specimen. Both faces paint $color on $background, so a
- * scheme flip restyles them with the rest of the screen. Do not treat this
- * as a pin-to-dark-on-light preview; that decision lives on MPO-94.
+ * Polarity specimen. The QR face is pinned dark-on-light in both schemes
+ * (MPO-94: a reversed QR is optional for a reader), while the Code 128 strip
+ * paints $color on $background and follows the scheme. Flip the scheme to
+ * see one face hold and the other move.
  */
 export const ThemedPolarity: Story = {
   render: () => (
     <XStack gap="$6" flexWrap="wrap" padding="$4" alignItems="flex-end">
       <YStack gap="$2" alignItems="center">
         <Text fontSize="$2" color="$color10">
-          QR (themed)
+          QR (pinned dark-on-light)
         </Text>
         <BarcodePreview value="SHC-42" format="qr" height={120} showText />
       </YStack>

package/src/fields/Barcode/BarcodePreview.tsx

@@ -1,8 +1,12 @@
 /**
  * BarcodePreview — draws a value as a real barcode symbol using plain Views
- * (cross-platform: no canvas/svg/web-only dependency). Bars use the theme ink
- * on the theme surface, so a scheme flip restyles the preview with the rest
- * of the screen.
+ * (cross-platform: no canvas/svg/web-only dependency). The Code 128 strip
+ * uses the theme ink on the theme surface, so a scheme flip restyles it with
+ * the rest of the screen. The QR face does not follow the scheme: ISO/IEC
+ * 18004 specifies dark modules on a light ground and makes a reversed symbol
+ * optional for a reader, so the face renders under the light theme in both
+ * schemes (MPO-94). Polarity there is machine meaning, the Axiom 11 literal
+ * class, not styling.
  *
  * Two symbologies, chosen by the `format` prop through the SAME alias table
  * the scanner resolves with (scannerTypes) so the field never draws one
@@ -23,7 +27,7 @@
  * never a fake, truncated or unreadable symbol.
  */
 
-import { Text, View, XStack, YStack } from "tamagui";
+import { Text, Theme, View, XStack, YStack } from "tamagui";
 import { t } from "../../shared/t";
 import { encodeCode128B } from "./code128";
 import { QR_QUIET_ZONE_MODULES, encodeQr, qrRowRuns } from "./qr";
@@ -185,27 +189,29 @@ function QrPreview({
       flexShrink={1}
       overflow="hidden"
     >
-      <YStack
-        testID="barcode-preview-qr"
-        width={edge}
-        height={edge}
-        padding={quietZone}
-        backgroundColor="$background"
-        aria-hidden
-      >
-        {rows.map((runs, rowIndex) => (
-          <XStack key={rowIndex} height={cell}>
-            {runs.map((run, runIndex) => (
-              <View
-                key={runIndex}
-                width={run.modules * cell}
-                height="100%"
-                backgroundColor={run.dark ? "$color" : "transparent"}
-              />
-            ))}
-          </XStack>
-        ))}
-      </YStack>
+      <Theme name="light">
+        <YStack
+          testID="barcode-preview-qr"
+          width={edge}
+          height={edge}
+          padding={quietZone}
+          backgroundColor="$background"
+          aria-hidden
+        >
+          {rows.map((runs, rowIndex) => (
+            <XStack key={rowIndex} height={cell}>
+              {runs.map((run, runIndex) => (
+                <View
+                  key={runIndex}
+                  width={run.modules * cell}
+                  height="100%"
+                  backgroundColor={run.dark ? "$color" : "transparent"}
+                />
+              ))}
+            </XStack>
+          ))}
+        </YStack>
+      </Theme>
       {showText && <MonoValue value={value} />}
     </View>
   );

package/src/fields/Barcode/index.tsx

@@ -102,7 +102,7 @@ function BarcodeInput({
         <InputParts.Box
           testID="barcode-field"
           disabled={disabled}
-          theme={hasError ? "red" : undefined}
+          theme={hasError ? "error" : undefined}
         >
           {barcodeIcon ? (
             <InputParts.Icon adornment="leading">{barcodeIcon}</InputParts.Icon>
@@ -125,12 +125,12 @@ function BarcodeInput({
             onKeyDown={
               readOnly || disabled
                 ? undefined
-                : ((e: { key?: string; preventDefault?: () => void }) => {
+                : (((e: { key?: string; preventDefault?: () => void }) => {
                     if (e.key === "Escape" && value) {
                       e.preventDefault?.();
                       handleClear();
                     }
-                  }) as unknown as () => void
+                  }) as unknown as () => void)
             }
           />
           {showClear ? (

package/src/fields/Checkbox/Checkbox.native.spec.tsx

@@ -0,0 +1,92 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { useForm } from "@tanstack/react-form";
+import { fireEvent } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { Form } from "../../Form";
+import { Checkbox } from "./Checkbox";
+import { Checkboxes } from "./index";
+
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+
+// MPO-362. On native, tamagui's HOC event branch (@tamagui/web
+// eventHandling.native.ts) turns any focus or press handler on a styled layer
+// over Checkbox into an `onPress` prop, `undefined` when that layer has no
+// press handler, and createCheckbox spreads it over its own toggle. A tap on
+// the box then does nothing while the label still works. The web renderer
+// here never takes that branch, so the spec pins the handlers that trigger it.
+const frameProps = vi.hoisted(() => [] as Record<string, unknown>[]);
+vi.mock("./CheckboxFieldFrame", async () => {
+  const { Checkbox: TamaguiCheckbox } = await vi.importActual<typeof import("tamagui")>("tamagui");
+  return {
+    CheckboxFieldFrame: (props: Record<string, unknown>) => {
+      frameProps.push(props);
+      return <TamaguiCheckbox {...props} />;
+    },
+  };
+});
+
+const nativeHandlerKeys = [
+  "onFocus",
+  "onBlur",
+  "onHoverIn",
+  "onHoverOut",
+  "onPress",
+  "onPressIn",
+  "onPressOut",
+  "onLongPress",
+];
+
+const handlersOnLastFrame = () =>
+  nativeHandlerKeys.filter((key) => key in (frameProps.at(-1) ?? {}));
+
+function FormCheckbox({ onChange }: { onChange: (checked: unknown) => void }) {
+  const form = useForm({ defaultValues: { terms: false } });
+  return (
+    <Form form={form}>
+      <Checkbox name="terms" label="Accept terms" onChange={onChange} />
+    </Form>
+  );
+}
+
+beforeEach(() => {
+  frameProps.length = 0;
+});
+
+describe("native Checkbox square tap", () => {
+  it("hands the standalone frame no handler that would clobber the toggle, and a tap toggles once", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(<Checkbox label="Accept terms" onChange={onChange} />);
+    expect(handlersOnLastFrame()).toEqual([]);
+    const box = result.getByRole("checkbox");
+    fireEvent.click(box);
+    expect(onChange).toHaveBeenCalledExactlyOnceWith(true);
+    expect(box.getAttribute("aria-checked")).toBe("true");
+    fireEvent.click(box);
+    expect(onChange).toHaveBeenLastCalledWith(false);
+  });
+
+  it("hands the form-integrated frame no such handler either", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(<FormCheckbox onChange={onChange} />);
+    expect(handlersOnLastFrame()).toEqual([]);
+    fireEvent.click(result.getByRole("checkbox"));
+    expect(onChange).toHaveBeenCalledExactlyOnceWith(true);
+  });
+
+  it("keeps the compound Checkboxes frame free of them too", () => {
+    renderWithProviders(
+      <Checkboxes values={{ email: false }} onValuesChange={() => {}}>
+        <Checkboxes.FocusGroup>
+          <Checkboxes.FocusGroup.Item value="email">
+            <Checkboxes.Checkbox aria-label="Email" />
+          </Checkboxes.FocusGroup.Item>
+        </Checkboxes.FocusGroup>
+      </Checkboxes>,
+    );
+    expect(frameProps.length).toBeGreaterThan(0);
+    expect(handlersOnLastFrame()).toEqual([]);
+  });
+});

package/src/fields/Checkbox/Checkbox.stories.tsx

@@ -167,6 +167,7 @@ export const compound = () => {
 };
 
 export const Comparison: StoryObj = {
+  parameters: { foreignContrastSpecimen: true },
   render: () => {
     const ComparisonExample = () => {
       const [customChecked, setCustomChecked] = useState(false);

package/src/fields/Checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
 import { CheckIcon as CheckRegular, MinusIcon as MinusRegular } from "@phosphor-icons/react";
-import { useReadableTextOn } from "@multiplatform.one/theme";
+import { transitionProps, useReadableTextOn } from "@multiplatform.one/theme";
 import type { AnyFormApi } from "../../types";
 import type { ReactNode } from "react";
 import { useMemo, useState } from "react";
@@ -186,7 +186,7 @@ export function Checkbox({
         // Same native-responder steal as CheckboxGlyphBox — Indicator/SVG
         // must not claim the press that belongs to the 44px frame.
         pointerEvents="none"
-        {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
+        {...transitionProps(knobProps.transition)}
       >
         {currentChecked === "indeterminate" ? (
           <MinusRegular

package/src/fields/Checkbox/CheckboxBox.spec.tsx

@@ -205,7 +205,7 @@ describe("CheckboxBox — keyboard-modality focus handlers", () => {
     const setKbFocus = vi.fn();
     const handlers = checkboxKbFocusHandlers(setKbFocus, vi.fn());
     pressKey();
-    handlers.onFocus({});
+    handlers.onFocus?.({});
     expect(setKbFocus).toHaveBeenCalledWith(true);
   });
 
@@ -213,7 +213,7 @@ describe("CheckboxBox — keyboard-modality focus handlers", () => {
     const setKbFocus = vi.fn();
     const handlers = checkboxKbFocusHandlers(setKbFocus, vi.fn());
     pressPointer();
-    handlers.onFocus({});
+    handlers.onFocus?.({});
     expect(setKbFocus).not.toHaveBeenCalled();
   });
 
@@ -221,16 +221,16 @@ describe("CheckboxBox — keyboard-modality focus handlers", () => {
     const setKbFocus = vi.fn();
     const handlers = checkboxKbFocusHandlers(setKbFocus, vi.fn());
     pressPointer();
-    handlers.onBlur({});
+    handlers.onBlur?.({});
     expect(setKbFocus).toHaveBeenCalledWith(false);
   });
 
   it("tracks hover in and out", () => {
     const setHovered = vi.fn();
     const handlers = checkboxKbFocusHandlers(vi.fn(), setHovered);
-    handlers.onHoverIn({});
+    handlers.onHoverIn?.({});
     expect(setHovered).toHaveBeenLastCalledWith(true);
-    handlers.onHoverOut({});
+    handlers.onHoverOut?.({});
     expect(setHovered).toHaveBeenLastCalledWith(false);
   });
 
@@ -243,10 +243,10 @@ describe("CheckboxBox — keyboard-modality focus handlers", () => {
     };
     const handlers = checkboxKbFocusHandlers(vi.fn(), vi.fn(), rest);
     const event = { id: 1 };
-    handlers.onFocus(event);
-    handlers.onBlur(event);
-    handlers.onHoverIn(event);
-    handlers.onHoverOut(event);
+    handlers.onFocus?.(event);
+    handlers.onBlur?.(event);
+    handlers.onHoverIn?.(event);
+    handlers.onHoverOut?.(event);
     expect(rest.onFocus).toHaveBeenCalledWith(event);
     expect(rest.onBlur).toHaveBeenCalledWith(event);
     expect(rest.onHoverIn).toHaveBeenCalledWith(event);
@@ -256,10 +256,10 @@ describe("CheckboxBox — keyboard-modality focus handlers", () => {
   it("survives a caller that passes no handlers at all", () => {
     const handlers = checkboxKbFocusHandlers(vi.fn(), vi.fn());
     expect(() => {
-      handlers.onFocus({});
-      handlers.onBlur({});
-      handlers.onHoverIn({});
-      handlers.onHoverOut({});
+      handlers.onFocus?.({});
+      handlers.onBlur?.({});
+      handlers.onHoverIn?.({});
+      handlers.onHoverOut?.({});
     }).not.toThrow();
   });
 });

package/src/fields/Checkbox/CheckboxBox.tsx

@@ -2,6 +2,7 @@ import {
   ensureFocusVisibleRing,
   ensureKeyboardModalityTracking,
   wasKeyboardFocus,
+  transitionProps,
 } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
 import type { SizeTokens, TransitionProp } from "tamagui";
@@ -97,6 +98,11 @@ export function checkboxKbFocusHandlers(
   setHovered: (next: boolean) => void,
   rest?: FocusRest,
 ) {
+  // Native (MPO-362): a focus handler on any styled layer over tamagui's
+  // Checkbox makes that layer pass `onPress: undefined` down, and
+  // createCheckbox spreads it over its own toggle, so a tap on the box does
+  // nothing. RN never fires focus or hover on this frame anyway.
+  if (!isWeb) return {};
   return {
     onFocus: (e: any) => {
       if (wasKeyboardFocus()) setKbFocus(true);
@@ -163,7 +169,7 @@ export function CheckboxGlyphBox({
       // from the 44px role=checkbox frame, so the box itself never toggles
       // (the Label Pressable still works). `none` lets the press fall through.
       pointerEvents="none"
-      {...(transition ? { transition } : undefined)}
+      {...transitionProps(transition)}
       {...(kbFocus ? ensureFocusVisibleRing() : { outlineWidth: 0 as const })}
     >
       {children}

package/src/fields/ColorPicker/index.tsx

@@ -366,7 +366,12 @@ function ColorBody({
   const hasEyeDropper = typeof window !== "undefined" && "EyeDropper" in window;
 
   return (
-    <YStack {...knobProps.gap} data-dismiss-class="compose">
+    <YStack
+      {...knobProps.gap}
+      {...knobProps.panelPadding}
+      data-testid="color-picker-panel"
+      data-dismiss-class="compose"
+    >
       <XStack {...knobProps.gap} alignItems="stretch">
         <SaturationPanel
           hue={hue}
@@ -592,7 +597,7 @@ function ColorPickerControl({
   if (readOnly) {
     const displayValue = value || selectedColor || placeholder;
     return (
-      <InputParts.Box theme={hasError ? "red" : undefined}>
+      <InputParts.Box theme={hasError ? "error" : undefined}>
         <View
           width={CHIP_PX[knobProps.size] ?? 18}
           height={CHIP_PX[knobProps.size] ?? 18}

package/src/fields/ColorPicker/parts.tsx

@@ -926,7 +926,7 @@ export const ColorPickerInputTrigger = InputParts.Area.styleable<ColorPickerInpu
           size={knobProps.sizeToken}
         >
           <InputParts.Box
-            theme={error ? "red" : undefined}
+            theme={error ? "error" : undefined}
             {...(disabled ? { opacity: 0.5, pointerEvents: "none" } : undefined)}
           >
             <InputParts.Icon adornment="leading">
@@ -1008,6 +1008,7 @@ export function ColorPickerPopoverShell({
       disabled={disabled}
       sizing="fill"
       widthMode="at-least-trigger"
+      contentPadding="none"
       triggerA11y={triggerA11y}
     >
       {children}