@multiplatform.one/forms 7.66.0 → 7.67.0

package/src/fields/Slider/index.tsx

@@ -33,6 +33,13 @@ import {
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout";
 import { formCommonColors, formControlColors, formSelectedColors } from "../../shared/colorRamps";
+import { loadSystemSlider } from "../../shared/systemControlModules";
+import {
+  type SystemPlatform,
+  type SystemSliderComponent,
+  systemControlPlatform,
+  useThemeLiteral,
+} from "../../shared/systemControls";
 import { t } from "../../shared/t";
 import {
   getElevationWrapperProps,
@@ -180,6 +187,12 @@ export interface SliderProps {
   /** When true, renders a skeleton placeholder instead of the slider */
   skeleton?: boolean;
   "aria-label"?: string;
+  /**
+   * LC-266: on iOS and Android a single-thumb horizontal slider renders the
+   * system slider when the binary carries `@react-native-community/slider`.
+   * `false` keeps the MPO slider there.
+   */
+  native?: boolean;
 }
 
 type SliderControlProps = {
@@ -219,6 +232,91 @@ type SliderControlProps = {
  * (track click, keyboard, controlled value change). Drag and first paint stay
  * transition-off so the handle never lags the pointer or wiggles on mount.
  */
+/**
+ * LC-266: the system slider (UISlider, Android SeekBar). The theme paints the
+ * fill and the rail, and the Android thumb; iOS keeps its system thumb. The
+ * value readout stays beside it, as on the MPO slider.
+ */
+function SystemSliderControl({
+  Component,
+  platform,
+  id,
+  value,
+  min,
+  max,
+  step,
+  disabled,
+  readOnly,
+  hasError,
+  accessibilityLabel,
+  accessibilityHint,
+  height,
+  onChangeValue,
+  onBlur,
+}: {
+  Component: SystemSliderComponent;
+  platform: SystemPlatform;
+  id: string;
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  disabled?: boolean;
+  readOnly?: boolean;
+  hasError?: boolean;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  height: SizeTokens;
+  onChangeValue: (value: number) => void;
+  onBlur?: (...args: any[]) => void;
+}) {
+  const literal = useThemeLiteral();
+  const [displayValue, setDisplayValue] = useState(value);
+  useEffect(() => setDisplayValue(value), [value]);
+  const fill = literal(hasError ? formCommonColors.error : formSelectedColors.mark);
+  return (
+    <XStack height={height} alignItems="center" width="100%" gap="$3">
+      <View
+        flex={1}
+        minWidth={0}
+        justifyContent="center"
+        {...(readOnly ? { pointerEvents: "none" as const } : undefined)}
+        data-mp-system-control="slider"
+      >
+        <Component
+          id={id}
+          style={{ width: "100%" }}
+          value={value}
+          minimumValue={min}
+          maximumValue={max}
+          step={step}
+          disabled={disabled}
+          minimumTrackTintColor={fill}
+          maximumTrackTintColor={literal(formControlColors.background)}
+          {...(platform === "android" && { thumbTintColor: fill })}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityHint={accessibilityHint}
+          onValueChange={(next) => {
+            setDisplayValue(next);
+            if (disabled || readOnly) return;
+            onChangeValue(next);
+          }}
+          onSlidingComplete={() => onBlur?.()}
+        />
+      </View>
+      <Paragraph
+        size="$2"
+        color={formCommonColors.text}
+        minWidth={32}
+        textAlign="right"
+        aria-hidden
+      >
+        {formatSliderOutput([displayValue], step)}
+      </Paragraph>
+    </XStack>
+  );
+}
+
 function SliderControl({
   id,
   sliderValue,
@@ -712,6 +810,7 @@ export function Slider({
   sliderProps,
   skeleton,
   "aria-label": ariaLabel,
+  native = true,
 }: SliderProps) {
   // Canonical `onChange` and the alias `onValueChange` both fire from the
   // single emit site below (same reconciliation as Switch).
@@ -740,41 +839,70 @@ export function Slider({
     );
   }
 
+  const systemPlatform = native ? systemControlPlatform() : null;
+  const SystemSlider =
+    systemPlatform && sliderProps?.orientation !== "vertical" && sliderProps?.dir !== "rtl"
+      ? loadSystemSlider()
+      : null;
+
   const control = (
     sliderValue: number[],
     isControlled: boolean,
     handleChange?: (values: number[]) => void,
     handleBlur?: (...args: any[]) => void,
     hasError?: boolean,
-  ) => (
-    <SliderControl
-      id={id}
-      sliderValue={sliderValue}
-      controlled={isControlled}
-      min={min}
-      max={max}
-      step={step}
-      disabled={disabled}
-      readOnly={readOnly}
-      required={required}
-      hasError={hasError}
-      hasLabel={hasLabel}
-      labelText={typeof label === "string" ? label : undefined}
-      aria-label={ariaLabel}
-      size={size}
-      sizeToken={knobProps.sizeToken}
-      outlined={knobProps.outlined}
-      borderRadius={knobProps.borderRadius.borderRadius}
-      transitionToken={transitionToken}
-      elevationWrapperProps={elevationWrapperProps}
-      sliderProps={sliderProps}
-      onChangeValues={(values) => {
-        handleChange?.(values);
-        handleValueChange(values);
-      }}
-      onBlur={handleBlur}
-    />
-  );
+    errorMessage?: string,
+  ) =>
+    SystemSlider && systemPlatform && sliderValue.length === 1 ? (
+      <SystemSliderControl
+        Component={SystemSlider}
+        platform={systemPlatform}
+        id={id}
+        value={sliderValue[0] ?? min}
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        readOnly={readOnly}
+        hasError={hasError}
+        accessibilityLabel={ariaLabel ?? (typeof label === "string" ? label : undefined)}
+        accessibilityHint={errorMessage ?? helperText}
+        height={size || knobProps.sizeToken}
+        onChangeValue={(next) => {
+          handleChange?.([next]);
+          handleValueChange([next]);
+        }}
+        onBlur={handleBlur}
+      />
+    ) : (
+      <SliderControl
+        id={id}
+        sliderValue={sliderValue}
+        controlled={isControlled}
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        readOnly={readOnly}
+        required={required}
+        hasError={hasError}
+        hasLabel={hasLabel}
+        labelText={typeof label === "string" ? label : undefined}
+        aria-label={ariaLabel}
+        size={size}
+        sizeToken={knobProps.sizeToken}
+        outlined={knobProps.outlined}
+        borderRadius={knobProps.borderRadius.borderRadius}
+        transitionToken={transitionToken}
+        elevationWrapperProps={elevationWrapperProps}
+        sliderProps={sliderProps}
+        onChangeValues={(values) => {
+          handleChange?.(values);
+          handleValueChange(values);
+        }}
+        onBlur={handleBlur}
+      />
+    );
 
   if (!resolvedForm || !name) {
     return (
@@ -789,7 +917,14 @@ export function Slider({
         knobProps={knobProps}
         disabled={disabled}
       >
-        {control(value ?? defaultValue ?? [min], value !== undefined, undefined, onBlur, !!error)}
+        {control(
+          value ?? defaultValue ?? [min],
+          value !== undefined,
+          undefined,
+          onBlur,
+          !!error,
+          typeof error === "string" && error ? error : undefined,
+        )}
       </FieldLayout>
     );
   }
@@ -832,6 +967,7 @@ export function Slider({
               },
               mergeFieldHandler(field, "handleBlur", onBlur),
               !!resolvedError,
+              typeof resolvedError === "string" && resolvedError ? resolvedError : undefined,
             )}
           </FieldLayout>
         );

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

@@ -0,0 +1,162 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { createDefaultThemeConfig } from "@multiplatform.one/theme";
+import { useForm } from "@tanstack/react-form";
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import type { ReactElement } from "react";
+import { TamaguiProvider } from "tamagui";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Form } from "../../Form";
+import { Switch } from "./index";
+
+const platform = vi.hoisted(() => ({ os: "ios" as "ios" | "android" | null }));
+
+// The system Switch as a probe: it shows the props React Native's Switch got
+// and flips through onValueChange the way a tap on UISwitch does.
+const SystemSwitchProbe = vi.hoisted(
+  () =>
+    function SystemSwitchProbe(props: Record<string, any>) {
+      return (
+        <button
+          type="button"
+          data-testid="system-switch"
+          data-value={String(props.value)}
+          data-disabled={String(Boolean(props.disabled))}
+          data-track-on={props.trackColor?.true}
+          data-track-off={props.trackColor?.false}
+          data-ios-off={props.ios_backgroundColor}
+          data-thumb={props.thumbColor ?? ""}
+          data-label={props.accessibilityLabel ?? ""}
+          onClick={() => props.disabled || props.onValueChange?.(!props.value)}
+        />
+      );
+    },
+);
+
+vi.mock("../../shared/systemControls", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../shared/systemControls")>()),
+  systemControlPlatform: () => platform.os,
+  SystemSwitchView: SystemSwitchProbe,
+}));
+
+const mpoTheme = createDefaultThemeConfig();
+const renderInScheme = (ui: ReactElement, scheme: "light" | "dark") =>
+  render(
+    <TamaguiProvider config={mpoTheme.tamagui} defaultTheme={scheme} disableInjectCSS>
+      {ui}
+    </TamaguiProvider>,
+  );
+
+afterEach(cleanup);
+beforeEach(() => {
+  platform.os = "ios";
+});
+
+const literal = (value: string | null) => Boolean(value) && !value!.startsWith("$");
+
+function FormSwitch({ onSubmit }: { onSubmit: (value: { alerts: boolean }) => void }) {
+  const form = useForm({
+    defaultValues: { alerts: false },
+    onSubmit: ({ value }) => onSubmit(value),
+  });
+  return (
+    <Form form={form}>
+      <Switch name="alerts" label="Alerts" />
+      <button type="button" onClick={() => form.handleSubmit()}>
+        Save
+      </button>
+    </Form>
+  );
+}
+
+// LC-266 PLATFORM-ERGONOMICS (FZ-8117). iOS and Android render React Native's
+// own Switch, tinted from the theme; web and GNOME keep the MPO switch.
+describe("Switch on iOS and Android", () => {
+  it.each(["light", "dark"] as const)(
+    "renders the system switch with the %s theme's accent and off track as literals",
+    (scheme) => {
+      const result = renderInScheme(<Switch label="Alerts" defaultValue />, scheme);
+      const view = result.getByTestId("system-switch");
+      expect(view.dataset.value).toBe("true");
+      expect(literal(view.getAttribute("data-track-on"))).toBe(true);
+      expect(literal(view.getAttribute("data-track-off"))).toBe(true);
+      expect(view.getAttribute("data-ios-off")).toBe(view.getAttribute("data-track-off"));
+      expect(view.dataset.thumb).toBe("");
+      expect(view.dataset.label).toBe("Alerts");
+      expect(result.container.querySelector('[role="switch"]')).toBeNull();
+    },
+  );
+
+  it.each(["light", "dark"] as const)(
+    "paints the %s theme's off track and thumb on Android",
+    (scheme) => {
+      platform.os = "android";
+      const view = renderInScheme(<Switch label="Alerts" />, scheme).getByTestId("system-switch");
+      expect(literal(view.getAttribute("data-track-off"))).toBe(true);
+      expect(literal(view.getAttribute("data-thumb"))).toBe(true);
+    },
+  );
+
+  it("toggles standalone and reports through onChange and onCheckedChange", () => {
+    const onChange = vi.fn();
+    const onCheckedChange = vi.fn();
+    const result = renderWithProviders(
+      <Switch label="Alerts" onChange={onChange} onCheckedChange={onCheckedChange} />,
+    );
+    const view = result.getByTestId("system-switch");
+    fireEvent.click(view);
+    expect(onChange).toHaveBeenCalledExactlyOnceWith(true);
+    expect(onCheckedChange).toHaveBeenCalledExactlyOnceWith(true);
+    expect(view.dataset.value).toBe("true");
+  });
+
+  it("follows a controlled value", () => {
+    const result = renderWithProviders(<Switch label="Alerts" checked={false} />);
+    fireEvent.click(result.getByTestId("system-switch"));
+    expect(result.getByTestId("system-switch").dataset.value).toBe("false");
+    result.rerender(<Switch label="Alerts" checked />);
+    expect(result.getByTestId("system-switch").dataset.value).toBe("true");
+  });
+
+  it("passes disabled to the system switch and never changes a disabled or read-only value", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <>
+        <Switch label="Off limits" onChange={onChange} disabled />
+        <Switch label="Look only" onChange={onChange} readOnly />
+      </>,
+    );
+    const [disabledView, readOnlyView] = result.getAllByTestId("system-switch");
+    expect(disabledView!.dataset.disabled).toBe("true");
+    expect(readOnlyView!.dataset.disabled).toBe("false");
+    fireEvent.click(disabledView!);
+    fireEvent.click(readOnlyView!);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("writes the form field it is bound to", async () => {
+    const onSubmit = vi.fn();
+    const result = renderWithProviders(<FormSwitch onSubmit={onSubmit} />);
+    fireEvent.click(result.getByTestId("system-switch"));
+    fireEvent.click(result.getByText("Save"));
+    await vi.waitFor(() => expect(onSubmit).toHaveBeenCalledWith({ alerts: true }));
+  });
+
+  it("keeps the MPO switch for native={false}, track icons and switchProps", () => {
+    const result = renderWithProviders(
+      <>
+        <Switch label="Opted out" native={false} />
+        <Switch label="Iconed" leftIcon={<span>i</span>} />
+        <Switch label="Styled" switchProps={{ opacity: 1 }} />
+      </>,
+    );
+    expect(result.queryByTestId("system-switch")).toBeNull();
+    expect(result.container.querySelectorAll('[role="switch"]')).toHaveLength(3);
+  });
+
+  it("keeps the MPO switch on web and GNOME", () => {
+    platform.os = null;
+    const result = renderWithProviders(<Switch label="Alerts" />);
+    expect(result.queryByTestId("system-switch")).toBeNull();
+    expect(result.container.querySelector('[role="switch"]')).not.toBeNull();
+  });
+});

package/src/fields/Switch/index.tsx

@@ -51,6 +51,12 @@ import {
 } from "../../shared/utils";
 import { choiceLabelPressProps, choiceRowPressProps } from "../../shared/choiceRowPress";
 import { pressSlopProps } from "../../shared/pressSlopProps";
+import {
+  type SystemPlatform,
+  SystemSwitchView,
+  systemControlPlatform,
+  useThemeLiteral,
+} from "../../shared/systemControls";
 import { useIsInTableCell } from "../../shared/tableCellContext";
 import { switchFootprint, type SwitchFootprint } from "./footprint";
 
@@ -687,6 +693,65 @@ function SwitchControl({
   );
 }
 
+/**
+ * LC-266: React Native's own Switch, so iOS and Android get the system toggle's
+ * feel, haptics and VoiceOver/TalkBack behaviour. The theme paints it: the
+ * accent on track and the theme's off track in both schemes, and on Android
+ * the theme thumb. iOS keeps its system white thumb.
+ */
+function SystemSwitch({
+  platform,
+  checked,
+  onCheckedChange,
+  onBlur,
+  disabled,
+  readOnly,
+  id,
+  minHeight,
+  accessibilityLabel,
+  accessibilityHint,
+}: {
+  platform: SystemPlatform;
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  onBlur?: (...args: any[]) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  id: string;
+  minHeight?: number;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+}) {
+  const literal = useThemeLiteral();
+  const on = literal(formSwitchColors.track.on);
+  const off = literal(formSwitchColors.track.off);
+  return (
+    <View
+      justifyContent="center"
+      {...(minHeight !== undefined && { minHeight })}
+      {...(readOnly ? { pointerEvents: "none" as const } : undefined)}
+      data-mp-system-control="switch"
+    >
+      <SystemSwitchView
+        id={id}
+        value={checked}
+        disabled={disabled}
+        onValueChange={(next) => {
+          if (disabled || readOnly) return;
+          onCheckedChange(next);
+          onBlur?.();
+        }}
+        trackColor={{ false: off, true: on }}
+        ios_backgroundColor={off}
+        {...(platform === "android" && { thumbColor: literal(formSwitchColors.thumb) })}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
+        accessibilityState={{ disabled: !!disabled, checked }}
+      />
+    </View>
+  );
+}
+
 // ─── Form-aware Switch ────────────────────────────────────────────────────────
 
 export interface SwitchProps {
@@ -743,6 +808,12 @@ export interface SwitchProps {
    * Dense toggle lists pass 44 so every toggle is individually hittable.
    */
   minTargetHeight?: number;
+  /**
+   * LC-266: on iOS and Android the field renders the system switch. `false`
+   * keeps the MPO switch there. Track icons, `switchProps` and `pointy` draw
+   * on the MPO switch only, so passing any of them keeps it too.
+   */
+  native?: boolean;
 }
 
 export function Switch({
@@ -772,6 +843,7 @@ export function Switch({
   pointy,
   skeleton,
   minTargetHeight,
+  native = true,
 }: SwitchProps) {
   // The switch stays first in the DOM (focus and reading order); the row
   // reverses so the label leads and the switch sits at the trailing edge.
@@ -841,6 +913,11 @@ export function Switch({
           handleValueChange(!current);
         };
 
+  const systemPlatform =
+    native && !leftIcon && !rightIcon && !switchProps && pointy === undefined
+      ? systemControlPlatform()
+      : null;
+
   const renderSwitch = (
     switchChecked: boolean,
     handleChange?: (val: boolean) => void,
@@ -848,6 +925,27 @@ export function Switch({
     hasError?: boolean,
     errorMessage?: string,
   ) => {
+    if (systemPlatform) {
+      return (
+        <SystemSwitch
+          platform={systemPlatform}
+          checked={switchChecked}
+          onCheckedChange={(val) => {
+            handleChange?.(val);
+            handleValueChange(val);
+          }}
+          onBlur={handleBlur}
+          disabled={disabled}
+          readOnly={readOnly}
+          id={id}
+          minHeight={targetHeight}
+          accessibilityLabel={
+            typeof label === "string" ? `${label}${required ? " *" : ""}` : ariaLabel
+          }
+          accessibilityHint={errorMessage ?? helperText}
+        />
+      );
+    }
     const overrideRadius = (switchProps as any)?.borderRadius;
     const radiusStop = resolveSwitchRadiusStop(pointy, knobProps.borderRadius.borderRadius);
     const thumbPaintedHeight = footprint.thumbSize;