@multiplatform.one/forms 7.4.1 → 7.6.0

package/src/InputParts/InputButton.spec.tsx

@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { SIZE_RECIPE_TOKENS, sizeRecipeForToken } from "@multiplatform.one/theme";
+import { Input } from "./index";
+
+describe("Input.Button", () => {
+  it("decorative end-cap does not take the chip-dismiss glyph ring", () => {
+    const result = renderWithProviders(
+      <Input size="$4">
+        <Input.Box size="$4">
+          <Input.Button size="$4" aria-label="cap">
+            x
+          </Input.Button>
+        </Input.Box>
+      </Input>,
+    );
+    const btn = result.container.querySelector("[aria-label='cap']") as HTMLElement;
+    expect(btn).not.toBeNull();
+    expect(btn.className).not.toMatch(/mp-chip-dismiss/);
+    expect(btn.querySelector(".mp-chip-dismiss-ring")).toBeNull();
+  });
+
+  it("glyphRing is a real tab stop that rings the glyph, not the end-cap box", () => {
+    const result = renderWithProviders(
+      <Input size="$4">
+        <Input.Box size="$4">
+          <Input.Button glyphRing size="$4" aria-label="Show password">
+            x
+          </Input.Button>
+        </Input.Box>
+      </Input>,
+    );
+    const btn = result.container.querySelector("[aria-label='Show password']") as HTMLElement;
+    expect(btn).not.toBeNull();
+    expect(btn.getAttribute("tabindex")).toBe("0");
+    expect(btn.className).toMatch(/mp-chip-dismiss/);
+    expect(btn.className).not.toMatch(/mp-chip-dismiss-ring/);
+    const ring = btn.querySelector(".mp-chip-dismiss-ring") as HTMLElement;
+    expect(ring).not.toBeNull();
+    expect(btn.contains(ring)).toBe(true);
+  });
+
+  it("end-cap square is generated from the size recipe at every token", () => {
+    for (const token of SIZE_RECIPE_TOKENS) {
+      if (token === "$true") continue;
+      const height = sizeRecipeForToken(token).height;
+      const result = renderWithProviders(
+        <Input size={token}>
+          <Input.Box size={token}>
+            <Input.Button glyphRing size={token} aria-label={`reveal-${token}`}>
+              x
+            </Input.Button>
+          </Input.Box>
+        </Input>,
+      );
+      const btn = result.container.querySelector(`[aria-label='reveal-${token}']`) as HTMLElement;
+      expect(btn.getAttribute("data-end-cap"), token).toBe(String(height));
+    }
+  });
+});

package/src/InputParts/index.spec.tsx

@@ -1,6 +1,13 @@
 import { describe, expect, it } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Input, boxRingMode, boxRingOffset, inputPartsRingCss } from "./index";
+import {
+  Input,
+  boxRingMode,
+  boxRingOffset,
+  inputPartsRingCss,
+  mapInputModeToKeyboardType,
+  mapKeyboardTypeToInputMode,
+} from "./index";
 
 describe("Input.Meta reserved message slot (Axiom 8 / DG-FORM-04)", () => {
   it("renders helper text when there is no error", () => {
@@ -98,3 +105,36 @@ describe("LC-71 RING-ANATOMY — Box ring, Area never outlines, inset iff clip",
     expect(style === "none" || width === 0).toBe(true);
   });
 });
+
+describe("LC-84 TEXT-INSET — Area chromeless, keyboard map", () => {
+  it("zeros padding only on input[data-mp-input-area], not textarea", () => {
+    expect(inputPartsRingCss).toContain("input[data-mp-input-area]");
+    expect(inputPartsRingCss).toMatch(/input\[data-mp-input-area\]\s*\{\s*padding:\s*0/);
+    expect(inputPartsRingCss).not.toMatch(/textarea\[data-mp-input-area\][^{]*\{[^}]*padding:\s*0/);
+  });
+
+  it("maps phone-pad↔tel, number-pad↔numeric, decimal-pad↔decimal, email-address↔email", () => {
+    expect(mapKeyboardTypeToInputMode("phone-pad")).toBe("tel");
+    expect(mapKeyboardTypeToInputMode("number-pad")).toBe("numeric");
+    expect(mapKeyboardTypeToInputMode("decimal-pad")).toBe("decimal");
+    expect(mapKeyboardTypeToInputMode("email-address")).toBe("email");
+    expect(mapInputModeToKeyboardType("tel")).toBe("phone-pad");
+    expect(mapInputModeToKeyboardType("numeric")).toBe("number-pad");
+    expect(mapInputModeToKeyboardType("decimal")).toBe("decimal-pad");
+    expect(mapInputModeToKeyboardType("email")).toBe("email-address");
+  });
+
+  it("forwards keyboardType onto the area and sets the mapped inputMode", () => {
+    const { container } = renderWithProviders(
+      <Input>
+        <Input.Box>
+          <Input.Area keyboardType="phone-pad" textContentType="telephoneNumber" />
+        </Input.Box>
+      </Input>,
+    );
+    const area = container.querySelector("[data-mp-input-area]") as HTMLInputElement;
+    expect(area).toBeTruthy();
+    expect(area.inputMode || area.getAttribute("inputmode")).toBe("tel");
+    expect(area.getAttribute("autocomplete") === "tel" || area.autocomplete === "tel").toBe(true);
+  });
+});

package/src/InputParts/index.tsx

@@ -3,7 +3,13 @@ import type { SizeVariantSpreadFunction } from "@tamagui/web";
 import { useEffect, useState, type ReactNode } from "react";
 import type { ComponentProps, Ref, RefObject } from "react";
 import { Pressable as RNPressable } from "react-native";
-import type { ColorTokens, FontSizeTokens, TamaguiElement } from "tamagui";
+import type {
+  ColorTokens,
+  FontSizeTokens,
+  InputKeyboardType,
+  InputTextContentType,
+  TamaguiElement,
+} from "tamagui";
 import {
   Button as TButton,
   Input as TInput,
@@ -23,10 +29,12 @@ import {
   ensureFocusVisibleRing,
   isTouchSurface,
   recipeFamilies,
+  resolveGlyphPaint,
   sizeRecipeBoxVariants,
   sizeRecipeForToken,
   sizeRecipeIconVariants,
   sizeRecipeTypeVariants,
+  textFieldInset,
   useResolvedKnobs,
   warnOutlineNone,
   warnPositiveTabIndex,
@@ -239,6 +247,11 @@ export const inputPartsRingCss = `/* LC-71: ring on Box (adornments inside); Are
 [data-mp-input-box] [contenteditable] {
   outline: none !important;
   box-shadow: none !important;
+}
+/* LC-84: Area is chromeless. Zero UA pad on the single-line input only —
+   textarea keeps ThemedTextArea's equal padX/padY inset. */
+input[data-mp-input-area] {
+  padding: 0 !important;
 }`;
 
 const INPUT_PARTS_RING_STYLE_ID = "mp-input-parts-ring-anatomy";
@@ -349,47 +362,6 @@ const InputGroupFrame = styled(XGroup, {
   },
 });
 
-// RN's `elevation` style prop must be a number — the Tamagui token string
-// ("$1") that knobProps.elevation carries crashes the Android ReactHost at
-// mount (String → Double cast). Web resolves the token via Tamagui's
-// elevation variant, so it keeps the token; native gets explicit shadow
-// props (values mirror elevationToProps in ../shared/utils).
-const nativeElevationShadow: Record<string, Record<string, any>> = {
-  $1: {
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.12,
-    // house light angle: blur = 2 x y-offset on every tier (Axiom 14)
-    shadowRadius: 2,
-    elevation: 2,
-  },
-  $2: {
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 3 },
-    shadowOpacity: 0.15,
-    shadowRadius: 6,
-    elevation: 4,
-  },
-  $4: {
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 10 },
-    shadowOpacity: 0.15,
-    shadowRadius: 20,
-    elevation: 8,
-  },
-};
-
-// On native the theme now emits NUMERIC tokens.size values ($1=20, $2=28,
-// $4=44) instead of token strings (SB-N-04 central fix); accept both.
-const elevationKeyAlias: Record<string, string> = { "20": "$1", "28": "$2", "44": "$4" };
-
-function getBoxElevationProps(token: string | number | undefined): Record<string, any> {
-  if (token == null) return { elevation: undefined };
-  if (isWeb) return { elevation: token };
-  const key = elevationKeyAlias[String(token)] ?? String(token);
-  return nativeElevationShadow[key] || nativeElevationShadow.$2;
-}
-
 /**
  * Fabric + Tamagui XGroup often claims the responder without firing `onPress`,
  * so Select/Date/Combobox triggers look tappable but never open. On native,
@@ -462,8 +434,12 @@ const InputGroupImpl = InputGroupFrame.styleable<{
   const framePressProps = isWeb ? { onPress, disabled } : { disabled };
   // Standalone Box clips children to radius → inset ring. Grouped / in-cell
   // frames leave overflow visible and do not paint their own ring.
+  // LC-85: on native, an elevation token must not share a clipsToBounds layer
+  // with the shadow (iOS masks the layer's own drop shadow). Web box-shadow
+  // paints outside overflow:hidden, so the ring clip can stay.
   const paintsRing = !grouped && !inTableCell;
-  const boxOverflow: BoxOverflow = paintsRing ? "hidden" : "visible";
+  const hasElevation = knobProps.elevation != null;
+  const boxOverflow: BoxOverflow = paintsRing && !(hasElevation && !isWeb) ? "hidden" : "visible";
   const ringMode = boxRingMode(boxOverflow, paintsRing);
   if (isWeb) {
     ensureCompositeFocusRing();
@@ -520,6 +496,14 @@ const InputGroupImpl = InputGroupFrame.styleable<{
       ? { paddingHorizontal: paddingHorizontalProp }
       : undefined),
   };
+  // LC-84: text-field inset, not the button ladder padX. Multiline Box
+  // (height="auto") leaves padX to ThemedTextArea so padX === padY.
+  const fieldInset = heightProp === "auto" ? 0 : textFieldInset(familyRecipe);
+  const insetPadProps =
+    sizeRecipeEscaped ||
+    (typeof paddingHorizontalProp !== "number" && paddingHorizontalProp != null)
+      ? undefined
+      : { paddingHorizontal: fieldInset };
 
   // Chromeless rendering inside table cells
   if (inTableCell) {
@@ -549,6 +533,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
             elevation={undefined}
             {...props}
             {...passthroughSizeProps}
+            {...insetPadProps}
             {...sizeRecipeEscapeOverride}
             {...framePressProps}
             {...boxRingAttrs}
@@ -574,6 +559,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
         elevation={undefined}
         {...props}
         {...passthroughSizeProps}
+        {...insetPadProps}
         {...sizeRecipeEscapeOverride}
         {...framePressProps}
         {...boxRingAttrs}
@@ -610,8 +596,8 @@ const InputGroupImpl = InputGroupFrame.styleable<{
           {...knobProps.body}
           size={knobProps.sizeToken}
           {...controlFragment}
-          backgroundColor={knobProps.outlined ? "transparent" : formInputColors.background.base}
-          {...getBoxElevationProps(knobProps.elevation)}
+          backgroundColor={knobProps.inputBackground}
+          {...(knobProps.elevation == null ? { elevation: undefined } : knobProps.elevationChrome)}
           {...knobProps.borderRadius}
           {...getInputFrameTransitionProps(
             typeof knobProps.transition === "string" ? knobProps.transition : undefined,
@@ -635,6 +621,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
           })}
           {...props}
           {...passthroughSizeProps}
+          {...insetPadProps}
           {...sizeRecipeEscapeOverride}
           {...framePressProps}
           {...boxRingAttrs}
@@ -683,11 +670,55 @@ const InputGroupImpl = InputGroupFrame.styleable<{
 // Input size variant helper
 // ---------------------------------------------------------------------------
 
+export const KEYBOARD_TO_INPUT_MODE = {
+  "phone-pad": "tel",
+  "number-pad": "numeric",
+  "decimal-pad": "decimal",
+  "email-address": "email",
+  numeric: "numeric",
+} as const;
+
+export const INPUT_MODE_TO_KEYBOARD = {
+  tel: "phone-pad",
+  numeric: "number-pad",
+  decimal: "decimal-pad",
+  email: "email-address",
+} as const;
+
+/**
+ * The inputMode values LC-84 maps to. A subset of the DOM/RN inputMode union,
+ * derived from the table rather than restated, so the two cannot drift.
+ */
+export type MappedInputMode = (typeof KEYBOARD_TO_INPUT_MODE)[keyof typeof KEYBOARD_TO_INPUT_MODE];
+
+/** The keyboardType values LC-84 maps to. A subset of tamagui's InputKeyboardType. */
+export type MappedKeyboardType =
+  (typeof INPUT_MODE_TO_KEYBOARD)[keyof typeof INPUT_MODE_TO_KEYBOARD];
+
+/**
+ * Every inputMode the underlying Input accepts, read off the component rather
+ * than restated. Wider than MappedInputMode: the LC-84 table only produces
+ * four of these, but a consumer may pass "text", "url" or "search" directly,
+ * and typing the read as the narrow set would be a lie about what arrives.
+ */
+export type InputModeValue = ComponentProps<typeof TInput>["inputMode"];
+
+export function mapKeyboardTypeToInputMode(keyboardType?: string): MappedInputMode | undefined {
+  if (!keyboardType) return undefined;
+  return KEYBOARD_TO_INPUT_MODE[keyboardType as keyof typeof KEYBOARD_TO_INPUT_MODE];
+}
+
+export function mapInputModeToKeyboardType(inputMode?: string): MappedKeyboardType | undefined {
+  if (!inputMode) return undefined;
+  return INPUT_MODE_TO_KEYBOARD[inputMode as keyof typeof INPUT_MODE_TO_KEYBOARD];
+}
+
 export const inputSizeVariant: SizeVariantSpreadFunction<any> = (val = "$true") => {
   const recipe = sizeRecipeForToken(String(val || "$true"), { touch: isTouchSurface() });
   return {
     fontSize: recipe.fontSize,
-    paddingHorizontal: recipe.paddingHorizontal,
+    // LC-84: Area is chromeless — inset lives on Input.Box / ThemedTextArea.
+    paddingHorizontal: 0,
   };
 };
 
@@ -701,6 +732,10 @@ const InputFrame = styled(TInput, {
   // LC-71: the Area never paints a ring. Chrome's UA :focus-visible outline
   // on <input> is the "ring cuts the control in half" defect (magnifier sits
   // outside). Kill it at rest and on focus; the Box owns the ring.
+  // LC-84: Area is chromeless — pad lives on Box (or ThemedTextArea).
+  padding: 0,
+  paddingHorizontal: 0,
+  paddingVertical: 0,
   outlineWidth: 0,
   outlineStyle: "none" as any,
   outlineColor: "transparent",
@@ -728,8 +763,8 @@ const InputFrame = styled(TInput, {
 
 const InputAreaImpl = InputFrame.styleable<{
   secureTextEntry?: boolean;
-  keyboardType?: string;
-  textContentType?: string;
+  keyboardType?: InputKeyboardType;
+  textContentType?: InputTextContentType;
   onChangeText?: (text: string) => void;
 }>((areaProps, ref) => {
   const { setFocused } = FocusContext.useStyledContext();
@@ -745,11 +780,14 @@ const InputAreaImpl = InputFrame.styleable<{
     focusStyle: focusStyleProp,
     focusVisibleStyle: focusVisibleStyleProp,
     className: classNameProp,
+    inputMode: inputModeProp,
     ...props
   } = areaProps as typeof areaProps & {
     focusStyle?: Record<string, unknown>;
     focusVisibleStyle?: Record<string, unknown>;
     className?: string;
+    inputMode?: InputModeValue;
+    type?: string;
   };
   const { knobProps } = useResolvedKnobs();
   const theme = useTheme();
@@ -757,6 +795,10 @@ const InputAreaImpl = InputFrame.styleable<{
   const nativeA11yProps = useNativeFieldA11yProps();
   const inTableCell = useIsInTableCell();
   if (isWeb) ensureInputPartsFocusRing();
+  // LC-84: do not strip native keyboard hints. Map phone-pad↔tel,
+  // number-pad↔numeric, decimal-pad↔decimal, email-address↔email.
+  const resolvedInputMode = inputModeProp ?? mapKeyboardTypeToInputMode(keyboardType);
+  const resolvedKeyboardType = keyboardType ?? mapInputModeToKeyboardType(resolvedInputMode);
 
   return (
     // LC-06/LC-10 (UX-P12): in a table cell the flex wrapper and the raw
@@ -776,19 +818,23 @@ const InputAreaImpl = InputFrame.styleable<{
         {...(inTableCell ? { width: "100%" as const, minWidth: 0 } : undefined)}
         {...knobProps.body}
         type={secureTextEntry ? "password" : props.type}
-        inputMode={
-          keyboardType === "numeric"
-            ? "numeric"
-            : keyboardType === "email-address"
-              ? "email"
-              : undefined
-        }
+        padding={0}
+        // size-recipe-escape: zero-reset — Input.Box owns the inset (LC-71); the inner field paints no padding
+        paddingHorizontal={0}
+        paddingVertical={0}
+        keyboardType={resolvedKeyboardType}
+        textContentType={textContentType}
+        inputMode={resolvedInputMode}
         autoComplete={
           textContentType === "emailAddress"
             ? "email"
             : textContentType === "password"
               ? "current-password"
-              : undefined
+              : textContentType === "telephoneNumber"
+                ? "tel"
+                : textContentType === "oneTimeCode"
+                  ? "one-time-code"
+                  : undefined
         }
         {...props}
         {...webAreaAttrs(classNameProp)}
@@ -862,11 +908,115 @@ const InputButton = styled(TButton, {
   } as const,
 });
 
-const InputButtonImpl = InputButton.styleable((props, ref) => {
-  const { size } = InputContext.useStyledContext();
+/**
+ * LC-71 RING-ANATOMY / LC-49 ONE-TAB-STOP — the `glyphRing` end cap.
+ *
+ * A bare Input.Button is DECORATIVE: the Box rings for it and it takes no
+ * tab stop of its own (Stepper carets, Select/Combobox chevrons). Pass
+ * `glyphRing` to promote it to the field's SECOND focusable — the Password
+ * reveal, the CopyField copy — where it must ring its own GLYPH, not the
+ * 44px hit box. A band on the box would double with the Box's composite
+ * ring; a band on the glyph is the chip-dismiss recipe
+ * (`.mp-chip-dismiss` + `.mp-chip-dismiss-ring`, keyboardFocusRing.ts).
+ *
+ * It renders a View rather than TButton because TButton swallows a consumer
+ * className and pins its own tabIndex, so the ring class never reaches the
+ * node that actually receives focus. SearchInput hand-rolled exactly this
+ * pair for that reason (fields/SearchInput/index.tsx:348-380) and left a
+ * note saying the classes "cannot ride Input.Button until glyphRing" lands.
+ * This is that pair made reusable, so the square comes from the size recipe
+ * (LC-70) instead of every call site measuring its own.
+ */
+const InputGlyphButton = styled(View, {
+  name: "InputGlyphButton",
+  context: InputContext,
+  justifyContent: "center",
+  alignItems: "center",
+  backgroundColor: "transparent",
+  borderWidth: 0,
+  borderRadius: 0,
+  cursor: "pointer",
+  flexShrink: 0,
+  outlineWidth: 0,
+  focusStyle: { outlineWidth: 0 },
+  focusVisibleStyle: { outlineWidth: 0 },
+
+  variants: {
+    scaleIcon: {
+      ":number": {} as any,
+    },
+    size: {
+      ...sizeRecipeEndCapVariants,
+      "...size": sizeRecipeEndCapFallback,
+    },
+  } as const,
+});
+
+const InputButtonImpl = InputButton.styleable<{ glyphRing?: boolean }>((buttonProps, ref) => {
+  const {
+    children,
+    color: colorProp,
+    glyphRing,
+    size: sizeProp,
+    tabIndex: tabIndexProp,
+    className,
+    ...props
+  } = buttonProps as typeof buttonProps & {
+    color?: string;
+    glyphRing?: boolean;
+    size?: FontSizeTokens;
+    tabIndex?: number;
+    className?: string;
+  };
+  const { size: contextSize, color: contextColor } = InputContext.useStyledContext();
   const { knobProps } = useResolvedKnobs();
-  const square = knobProps.control.height;
+  const theme = useTheme();
+  const size = (sizeProp ?? contextSize) as FontSizeTokens;
+  const paint = resolveGlyphPaint(theme as never, colorProp ?? contextColor);
+  const getThemedIcon = useGetThemedIcon({
+    size: knobProps.controlIcon.width,
+    color: paint as never,
+  });
+
+  if (glyphRing) {
+    // A real tab stop must square off the token it was HANDED, not the
+    // knob's: a $2 field inside a $4 knob would otherwise ship a 44px stop
+    // on a 32px frame. LC-77 keeps the sub-floor case pressable via the
+    // caller's hitSlop, never by inflating the cap.
+    const square = sizeRecipeForToken(String(size ?? "$true"), { touch: isTouchSurface() }).height;
+    const disabled = (props as { disabled?: boolean }).disabled === true;
+    if (isWeb) ensureCompositeFocusRing();
+    return (
+      <InputGlyphButton
+        ref={ref as never}
+        role="button"
+        size={size}
+        height={square}
+        width={square}
+        paddingHorizontal={0} // size-recipe-escape: square end-cap; pad lives on Input.Box
+        opacity={disabled ? 0.5 : 1}
+        {...props}
+        aria-disabled={disabled || undefined}
+        tabIndex={tabIndexProp ?? (disabled ? -1 : 0)}
+        className={
+          isWeb
+            ? ["mp-chip-dismiss", className].filter(Boolean).join(" ")
+            : (className ?? undefined)
+        }
+        data-end-cap={square}
+      >
+        <View
+          className={isWeb ? "mp-chip-dismiss-ring" : undefined}
+          alignItems="center"
+          justifyContent="center"
+        >
+          {children}
+        </View>
+      </InputGlyphButton>
+    );
+  }
 
+  const square = knobProps.control.height;
   return (
     <InputButton
       ref={ref}
@@ -874,9 +1024,17 @@ const InputButtonImpl = InputButton.styleable((props, ref) => {
       height={square}
       width={square}
       paddingHorizontal={0} // size-recipe-escape: square end-cap; pad lives on Input.Box
+      color={paint}
+      // LC-49: the decorative cap is not a tab stop. tabIndex alone is not
+      // enough — TButton re-derives focusability and stamps tabindex="0".
+      focusable={false}
       tabIndex={-1}
+      className={className}
+      data-end-cap={square}
       {...props}
-    />
+    >
+      {getThemedIcon(children)}
+    </InputButton>
   );
 });
 
@@ -917,8 +1075,10 @@ const InputIcon = InputIconFrame.styleable<{
 
   const theme = useTheme();
   const rawColor = colorProp ?? contextColor;
+  // LC-84: .val, not .get("web") — the web getter is undefined on native and
+  // leaves Phosphor black in dark mode.
   const color = getVariable(
-    rawColor ? (theme[rawColor as any]?.get("web") ?? rawColor) : theme.borderColor?.get("web"),
+    resolveGlyphPaint(theme as never, rawColor ? String(rawColor) : "borderColor"),
   );
   const iconSize = knobProps.controlIcon.width * resolvedScaleIcon;
 

package/src/Label/Label.spec.tsx

@@ -62,4 +62,12 @@ describe("Label", () => {
     expect(heading?.querySelector("label")?.htmlFor).toBe("event");
     expect(heading?.textContent).toContain("Event name");
   });
+
+  it("paints the label at weight 400 (R7 / §6.1)", () => {
+    const { container } = renderWithProviders(<Label htmlFor="w">Name</Label>);
+    const label = container.querySelector("label") as HTMLElement;
+    expect(label).toBeTruthy();
+    const weight = label.style.fontWeight || getComputedStyle(label).fontWeight;
+    expect(["400", "normal"]).toContain(String(weight));
+  });
 });

package/src/Label/index.tsx

@@ -73,6 +73,7 @@ export function Label({
       {...knobProps.body}
       {...knobProps.label}
       {...type}
+      fontWeight="400"
       color={color}
       cursor={disabled ? "not-allowed" : htmlFor ? "pointer" : "default"}
       display="flex"

package/src/Spinner/Spinner.spec.tsx

@@ -48,6 +48,20 @@ describe("Spinner", () => {
     expect(status(large.container).getAttribute("data-size")).toBe("$3");
   });
 
+  it("publishes data-animation=none when the animation knob is none", () => {
+    const { container } = renderWithProviders(
+      <Preset overrides={{ animation: "none" }}>
+        <Spinner />
+      </Preset>,
+    );
+    expect(status(container).getAttribute("data-animation")).toBe("none");
+  });
+
+  it("publishes data-animation=spin with motion on", () => {
+    const { container } = renderWithProviders(<Spinner />);
+    expect(status(container).getAttribute("data-animation")).toBe("spin");
+  });
+
   it("follows the size knob when size is omitted", () => {
     const small = renderWithProviders(
       <Preset overrides={{ size: "small" }}>

package/src/Spinner/index.native.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useRef } from "react";
-import { Animated, Easing } from "react-native";
+import { useEffect, useRef, useState } from "react";
+import { AccessibilityInfo, Animated, Easing } from "react-native";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { View } from "tamagui";
 import { t } from "../shared/t";
@@ -16,7 +16,19 @@ export function Spinner({ size, color, ...props }: SpinnerProps) {
   const token = spinnerSizeToken(size, knobProps.sizeToken);
   const px = spinnerSizePx(token);
   const stroke = useSpinnerStroke(color);
-  const spinning = Boolean(knobProps.transition);
+  const [reduceMotion, setReduceMotion] = useState(false);
+  useEffect(() => {
+    let cancelled = false;
+    AccessibilityInfo.isReduceMotionEnabled().then((value) => {
+      if (!cancelled) setReduceMotion(value);
+    });
+    const sub = AccessibilityInfo.addEventListener("reduceMotionChanged", setReduceMotion);
+    return () => {
+      cancelled = true;
+      sub.remove();
+    };
+  }, []);
+  const spinning = Boolean(knobProps.transition) && !reduceMotion;
   const spin = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
@@ -54,6 +66,7 @@ export function Spinner({ size, color, ...props }: SpinnerProps) {
       aria-busy
       pointerEvents="none"
       data-size={token}
+      data-animation={spinning ? "spin" : "none"}
       {...props}
     >
       <Animated.View style={{ width: px, height: px, transform: [{ rotate }] }}>

package/src/Spinner/index.tsx

@@ -47,6 +47,7 @@ export function Spinner({ size, color, ...props }: SpinnerProps) {
       aria-busy
       pointerEvents="none"
       data-size={token}
+      data-animation={animationsOff ? "none" : "spin"}
       {...(isWeb ? { className } : undefined)}
       {...rest}
     >