@multiplatform.one/forms 7.4.1 → 7.6.0

package/src/fields/OTPInput/OtpInput.stories.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { Text, YStack } from "tamagui";
@@ -209,3 +210,30 @@ export const AutoSubmit: Story = {
 export const SkeletonState: Story = {
   args: { label: "Verification Code", skeleton: true },
 };
+
+type InTableRow = { id: string; label: string; value: string };
+
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: "482193" },
+      { id: "2", label: "Beta", value: "000000" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "OTP",
+        field: "otp",
+        fieldProps: { otpLength: 6 },
+      },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};

package/src/fields/OTPInput/index.tsx

@@ -14,11 +14,13 @@ import {
   useRef,
   useState,
 } from "react";
-import { useProps, type TamaguiElement } from "tamagui";
-import { Input, Text, XStack, isWeb, useDidFinishSSR } from "tamagui";
+import { useProps, type SizeTokens, type TamaguiElement } from "tamagui";
+import { Input, Text, XStack, getVariableValue, isWeb, useDidFinishSSR } from "tamagui";
+import { getSize } from "@tamagui/get-token";
 import { Button } from "../../Button";
 import { Field, FieldLayout } from "../../fieldLayout";
 import {
+  getFieldHeight,
   getOTPCellRadius,
   mergeFieldHandler,
   useFormField,
@@ -131,6 +133,25 @@ function digitFontSize(cellSize: string | number | undefined): string {
   return "$6";
 }
 
+/**
+ * The height the cell PAINTS, which is what CIRCULAR-AT-FULL halves (DG-RAD-02).
+ *
+ * The cell sets `height={cellSize}`, so its painted edge is the `$size` token —
+ * NOT the touch-floored recipe height. On a touch surface those disagree at every
+ * step (`sizeRecipeForToken("$4", { touch: true }).height` is 48 against a 44pt
+ * token, `$2` is 44 against 28), and a resolver fed the recipe height resolves 24
+ * on a 44pt cell: over the edge, so the engine clamps it back to 22. That clamp is
+ * exactly the defect MPO-56 killed, so the radius rides the painted token instead.
+ * Same source as the avatar square face (`avatarTokenPx`, components/Avatar).
+ */
+export function otpCellHeightPx(cellSize: string | number | undefined): number {
+  if (typeof cellSize === "number" && Number.isFinite(cellSize) && cellSize > 0) return cellSize;
+  const token = (cellSize ?? "$4") as SizeTokens;
+  const painted = getVariableValue(getSize(token));
+  if (typeof painted === "number" && Number.isFinite(painted) && painted > 0) return painted;
+  return getFieldHeight(token);
+}
+
 /**
  * Digit cells own their focus ring (DG-A11Y-01): the ring must be CSS-driven
  * on the focused input itself — Input.Box's state-driven ring paints on the
@@ -218,7 +239,10 @@ const OTPDigitInput = memo(function OTPDigitInput({
     }
   }, [autoFocus, didFinishSSR, inputRef]);
 
-  const cellRadius = getOTPCellRadius(knobProps.borderRadius.borderRadius);
+  const cellRadius = getOTPCellRadius(
+    knobProps.borderRadius.borderRadius,
+    otpCellHeightPx(cellSize),
+  );
   const isNumeric = type === "numeric";
   const cellBorder = hasError
     ? formCommonColors.error
@@ -239,6 +263,7 @@ const OTPDigitInput = memo(function OTPDigitInput({
       flexShrink={0}
       flexBasis="auto"
       borderRadius={cellRadius}
+      data-otp-part="cell"
       justifyContent="center"
       alignItems="center"
       // Apple / Stripe slots are flat squares — Input.Box elevation would
@@ -256,7 +281,7 @@ const OTPDigitInput = memo(function OTPDigitInput({
         ? {
             tabIndex: -1,
             className: knobProps.transition ? "mp-otp-cell" : "mp-otp-cell mp-otp-motion-none",
-            style: { boxShadow: "none" },
+            style: { boxShadow: "none", borderRadius: cellRadius },
           }
         : {})}
     >
@@ -869,7 +894,10 @@ export function OTPInput<
     // label MUST be a deterministic px width — never % inside this auto-width
     // stack. Cell size + radius match live OTPDigitInput (getOTPCellRadius).
     const cellSize = fieldProps.size || knobProps.sizeToken;
-    const cellRadius = getOTPCellRadius(knobProps.borderRadius.borderRadius);
+    const cellRadius = getOTPCellRadius(
+      knobProps.borderRadius.borderRadius,
+      otpCellHeightPx(cellSize),
+    );
     const cellGap = knobProps.gap.gap;
     const groups = otpGroupSizes(length, separator);
     const groupGap = "$8";

package/src/fields/OTPInput/otpCellHeightTouch.spec.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it, vi } from "vitest";
+
+/**
+ * The touch arm of DG-RAD-02 for the OTP cell, in its own file because the
+ * surface probe is module-level state: `getFieldHeight` reads `isTouchSurface()`
+ * on every call, and a desktop run cannot tell the painted token from the recipe
+ * height (they are the same number there). Only on a touch surface do the two
+ * ladders separate — 28/36/44/64 painted against 44/44/48/68 recipe — which is
+ * where a resolver fed the wrong one hands the circle back to the engine clamp.
+ */
+vi.mock("@multiplatform.one/theme", async () => {
+  const actual = await vi.importActual<typeof import("@multiplatform.one/theme")>(
+    "@multiplatform.one/theme",
+  );
+  return { ...actual, isTouchSurface: () => true };
+});
+
+import { getSize } from "@tamagui/get-token";
+import { resolveRadiusClass } from "@multiplatform.one/theme";
+import { getVariableValue, type SizeTokens } from "tamagui";
+import { getFieldHeight } from "../../shared/utils";
+import { otpCellHeightPx } from "./index";
+
+const tokens = ["$2", "$3", "$4", "$6"] as const;
+
+describe("OTP cell geometry on a touch surface (DG-RAD-02)", () => {
+  it("the two ladders really do separate, or this file proves nothing", () => {
+    for (const token of tokens) {
+      const painted = getVariableValue(getSize(token as SizeTokens)) as number;
+      expect(getFieldHeight(token as SizeTokens), `recipe height @ ${token}`).not.toBe(painted);
+    }
+  });
+
+  it("the cell resolves against the height it paints, not the recipe height", () => {
+    for (const token of tokens) {
+      const painted = getVariableValue(getSize(token as SizeTokens)) as number;
+      expect(otpCellHeightPx(token), `painted height @ ${token}`).toBe(painted);
+      expect(
+        resolveRadiusClass("CIRCULAR-AT-FULL", "full", { heightPx: otpCellHeightPx(token) }),
+        `full @ ${token}`,
+      ).toBe(painted / 2);
+    }
+  });
+});

package/src/fields/PhoneInput/PhoneInput.spec.tsx

@@ -1,3 +1,4 @@
+import { sizeRecipeForToken } from "@multiplatform.one/theme";
 import { useForm } from "@tanstack/react-form";
 import { act, fireEvent, waitFor } from "@testing-library/react";
 import { YStack } from "tamagui";
@@ -400,4 +401,112 @@ describe("PhoneInput", () => {
       expect(input).toBeDefined();
     });
   });
+
+  describe("design-law (LC-71 / LC-75 / LC-76 / LC-20 / LC-40)", () => {
+    it("rings the Box that includes the flag (LC-71)", () => {
+      const result = renderWithProviders(<PhoneInput label="Ring Phone" />);
+      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      const flag = result.container.querySelector('[data-testid="combobox-trigger"]');
+      const input = result.container.querySelector("input");
+      expect(box).toBeTruthy();
+      expect(box.className).toMatch(/mp-composite-ring/);
+      expect(box.contains(flag)).toBe(true);
+      expect(box.contains(input)).toBe(true);
+    });
+
+    it("compact steps density without requiring a size token (LC-76)", () => {
+      const result = renderWithProviders(<PhoneInput label="Phone" compact />);
+      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      expect(box.getAttribute("data-density")).toBe("compact");
+      expect(box.getAttribute("data-size")).toBe("$4");
+    });
+
+    it("size ejects painted height and leaves density comfortable (LC-76)", () => {
+      const result = renderWithProviders(<PhoneInput label="Phone" size="$5" />);
+      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      expect(box.getAttribute("data-density")).toBe("comfortable");
+      expect(box.getAttribute("data-size")).toBe("$5");
+    });
+
+    it("compact + size stay orthogonal (LC-76)", () => {
+      const result = renderWithProviders(<PhoneInput label="Phone" compact size="$5" />);
+      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      expect(box.getAttribute("data-density")).toBe("compact");
+      expect(box.getAttribute("data-size")).toBe("$5");
+    });
+
+    it("default painted box meets the 44px floor", () => {
+      const result = renderWithProviders(<PhoneInput label="Phone" />);
+      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      expect(Number(box.getAttribute("data-visual-height"))).toBe(44);
+      expect(box.getAttribute("data-press-floor")).toBe("box");
+    });
+
+    it("sub-44 sizes restore press via slop, not giant chrome", () => {
+      const result = renderWithProviders(<PhoneInput label="Phone" size="$2" />);
+      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      const visual = Number(box.getAttribute("data-visual-height"));
+      expect(visual).toBeLessThan(44);
+      expect(box.getAttribute("data-press-floor")).toBe("slop");
+    });
+
+    it("flag and country pad/gap ride the size recipe (LC-75 / LC-79)", () => {
+      const small = renderWithProviders(<PhoneInput label="S" size="$2" />);
+      const large = renderWithProviders(<PhoneInput label="L" size="$6" />);
+      const smallCountry = small.container.querySelector("[data-testid='phone-country']");
+      const largeCountry = large.container.querySelector("[data-testid='phone-country']");
+      const smallRecipe = sizeRecipeForToken("$2");
+      const largeRecipe = sizeRecipeForToken("$6");
+      expect(Number(smallCountry?.getAttribute("data-flag-size"))).toBe(smallRecipe.iconSize);
+      expect(Number(largeCountry?.getAttribute("data-flag-size"))).toBe(largeRecipe.iconSize);
+      expect(Number(smallCountry?.getAttribute("data-flag-size"))).toBeLessThan(
+        Number(largeCountry?.getAttribute("data-flag-size")),
+      );
+      expect(Number(smallCountry?.getAttribute("data-country-pad"))).toBe(
+        smallRecipe.paddingHorizontal,
+      );
+      expect(Number(largeCountry?.getAttribute("data-country-pad"))).toBe(
+        largeRecipe.paddingHorizontal,
+      );
+      expect(Number(smallCountry?.getAttribute("data-country-gap"))).toBe(smallRecipe.gap);
+      expect(Number(largeCountry?.getAttribute("data-country-gap"))).toBe(largeRecipe.gap);
+    });
+
+    it("skeleton mirrors flag+number anatomy at recipe height (LC-20)", () => {
+      const result = renderWithProviders(<PhoneInput label="Phone" skeleton size="$4" />);
+      const box = result.container.querySelector("[data-testid='phone-skeleton']") as HTMLElement;
+      expect(box).toBeTruthy();
+      expect(Number(box.getAttribute("data-visual-height"))).toBe(sizeRecipeForToken("$4").height);
+      expect(result.container.querySelector("[data-testid='phone-skeleton-flag']")).toBeTruthy();
+      expect(result.container.querySelector("[data-testid='phone-skeleton-number']")).toBeTruthy();
+      expect(result.container.querySelector("input")).toBeNull();
+    });
+
+    it("does not open the country picker when disabled (SB-M-213)", async () => {
+      const result = renderWithProviders(<PhoneInput label="Phone" disabled />);
+      const trigger = result.container.querySelector(
+        '[data-testid="combobox-trigger"]',
+      ) as HTMLElement;
+      expect(trigger).toBeTruthy();
+      await act(async () => {
+        fireEvent.click(trigger);
+      });
+      expect(result.container.querySelector('[role="option"]')).toBeNull();
+    });
+
+    it("does not open the country picker when read-only (SB-M-215)", async () => {
+      const result = renderWithProviders(<PhoneInput label="Phone" readOnly />);
+      const country = result.container.querySelector(
+        "[data-testid='phone-country']",
+      ) as HTMLElement;
+      expect(country).toBeTruthy();
+      expect(result.container.querySelector('[data-testid="combobox-trigger"]')).toBeNull();
+      await act(async () => {
+        fireEvent.click(country);
+      });
+      expect(result.container.querySelector('[role="option"]')).toBeNull();
+      const input = result.container.querySelector("input") as HTMLInputElement;
+      expect(input.readOnly).toBe(true);
+    });
+  });
 });

package/src/fields/PhoneInput/PhoneInput.stories.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { Text, YStack } from "tamagui";
@@ -196,3 +197,30 @@ export const DifferentCountries: Story = {
 export const SkeletonState: Story = {
   render: () => <PhoneInput label="Phone Number" skeleton />,
 };
+
+type InTableRow = { id: string; label: string; value: string };
+
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: "+15125551234" },
+      { id: "2", label: "Beta", value: "+442071838750" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "Phone",
+        field: "phoneinput",
+        fieldProps: { defaultCountry: "US", placeholder: "Enter your phone number" },
+      },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};

package/src/fields/PhoneInput/index.tsx

@@ -1,5 +1,5 @@
 import { CaretDownIcon, GlobeIcon } from "@phosphor-icons/react";
-import { ensureCompositeFocusRing } from "@multiplatform.one/theme";
+import { ensureCompositeFocusRing, useGlyphColor } from "@multiplatform.one/theme";
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import type { ComponentProps, FocusEventHandler, ReactNode } from "react";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -218,6 +218,7 @@ export function PhoneInput<
   const sizeToken = (size || knobProps.sizeToken) as string;
   const flagSize = flagSizeForToken(sizeToken);
   const caretSize = caretSizeForToken(sizeToken);
+  const glyphColor = useGlyphColor();
 
   const seed =
     typeof valueProp === "string"
@@ -346,7 +347,8 @@ export function PhoneInput<
                 <XStack
                   alignItems="center"
                   gap="$1.5"
-                  paddingHorizontal="$2"
+                  // size-recipe-escape: zero-reset — the country trigger rides inside Input.Box, which owns the inset (LC-71)
+                  paddingHorizontal={0}
                   height="100%"
                   cursor={disabled ? "not-allowed" : "pointer"}
                   hoverStyle={
@@ -370,7 +372,7 @@ export function PhoneInput<
                   >
                     +{dialOf(code)}
                   </Text>
-                  <CaretDownIcon size={caretSize} />
+                  <CaretDownIcon size={caretSize} color={glyphColor} />
                 </XStack>
               );
             }}

package/src/fields/Progress/Progress.spec.tsx

@@ -1,12 +1,14 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { render } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import {
+  Preset,
   createThemesBuilder,
   defaultAccentTheme,
   defaultBaseTheme,
   defaultBuilderOptions,
 } from "@multiplatform.one/theme";
+import { TableCellContext } from "../../shared/tableCellContext";
 import { configWithoutAnimations } from "@tamagui/config";
 import { animationsCSS } from "@tamagui/config/v5-css";
 import type { ReactElement } from "react";
@@ -186,36 +188,148 @@ describe("Progress", () => {
 
     it("clamps negative, overflow, and non-finite values", () => {
       const neg = renderWithProviders(<Progress label="N" value={-10} max={100} />);
-      expect(neg.container.querySelector("[role='progressbar']")?.getAttribute("aria-valuenow")).toBe(
-        "0",
-      );
+      expect(
+        neg.container.querySelector("[role='progressbar']")?.getAttribute("aria-valuenow"),
+      ).toBe("0");
 
       const over = renderWithProviders(<Progress label="O" value={150} max={100} />);
-      expect(over.container.querySelector("[role='progressbar']")?.getAttribute("aria-valuenow")).toBe(
-        "100",
-      );
+      expect(
+        over.container.querySelector("[role='progressbar']")?.getAttribute("aria-valuenow"),
+      ).toBe("100");
 
       const nan = renderWithProviders(<Progress label="X" value={Number.NaN} max={100} />);
-      expect(nan.container.querySelector("[role='progressbar']")?.getAttribute("aria-valuenow")).toBe(
-        "0",
-      );
+      expect(
+        nan.container.querySelector("[role='progressbar']")?.getAttribute("aria-valuenow"),
+      ).toBe("0");
 
       const badMax = renderWithProviders(<Progress label="M" value={40} max={0} />);
-      expect(badMax.container.querySelector("[role='progressbar']")?.getAttribute("aria-valuemax")).toBe(
-        "100",
+      expect(
+        badMax.container.querySelector("[role='progressbar']")?.getAttribute("aria-valuemax"),
+      ).toBe("100");
+      expect(
+        badMax.container.querySelector("[role='progressbar']")?.getAttribute("aria-valuenow"),
+      ).toBe("40");
+    });
+
+    it("exposes aria-readonly when readOnly", () => {
+      const { container } = renderWithProviders(<Progress label="Locked" value={50} readOnly />);
+      expect(container.querySelector("[role='progressbar']")?.getAttribute("aria-readonly")).toBe(
+        "true",
+      );
+    });
+
+    it("string error replaces helper; boolean error is silent but invalid", () => {
+      const withCopy = renderWithProviders(
+        <Progress label="Upload" value={30} error="Must finish" helperText="keep going" />,
       );
-      expect(badMax.container.querySelector("[role='progressbar']")?.getAttribute("aria-valuenow")).toBe(
-        "40",
+      expect(withCopy.container.textContent).toContain("Must finish");
+      expect(withCopy.container.textContent).not.toContain("keep going");
+      expect(
+        withCopy.container.querySelector("[role='progressbar']")?.getAttribute("aria-invalid"),
+      ).toBe("true");
+
+      const flag = renderWithProviders(
+        <Progress label="Upload" value={30} error helperText="keep going" />,
       );
+      // Boolean error has no copy — helper stays (FieldLayout only replaces
+      // the slot when `error` is a non-empty string).
+      expect(flag.container.textContent).toContain("keep going");
+      expect(
+        flag.container.querySelector("[role='progressbar']")?.getAttribute("aria-invalid"),
+      ).toBe("true");
     });
 
-    it("exposes aria-readonly when readOnly", () => {
+    it("rounds fractional values for aria-valuenow and the paired percent", () => {
+      const { container } = renderWithProviders(<Progress label="Frac" value={33.333} max={100} />);
+      expect(container.querySelector("[role='progressbar']")?.getAttribute("aria-valuenow")).toBe(
+        "33",
+      );
+      expect(container.textContent).toContain("33%");
+    });
+  });
+
+  describe("LC-14 onChange contract", () => {
+    it("accepts onChange without throwing on a display-only field", () => {
+      const onChange = vi.fn();
       const { container } = renderWithProviders(
-        <Progress label="Locked" value={50} readOnly />,
+        <Progress label="Upload" value={40} onChange={onChange} />,
       );
-      expect(container.querySelector("[role='progressbar']")?.getAttribute("aria-readonly")).toBe(
-        "true",
+      expect(container.querySelector("[role='progressbar']")).toBeTruthy();
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("table cell chromeless", () => {
+    it("drops FieldLayout chrome and the paired percent inside a cell", () => {
+      const { container } = renderWithProviders(
+        <TableCellContext.Provider value={{ inTableCell: true, isHeader: false, editable: false }}>
+          <Progress label="Upload" value={65} helperText="hidden in cells" />
+        </TableCellContext.Provider>,
       );
+      expect(container.textContent ?? "").not.toContain("Upload");
+      expect(container.textContent ?? "").not.toContain("65%");
+      expect(container.textContent ?? "").not.toContain("hidden in cells");
+      expect(container.querySelector("[role='progressbar']")).toBeTruthy();
+    });
+
+    it("still pairs the percent when showValue is forced in a cell", () => {
+      const { container } = renderWithProviders(
+        <TableCellContext.Provider value={{ inTableCell: true, isHeader: false, editable: false }}>
+          <Progress value={65} showValue />
+        </TableCellContext.Provider>,
+      );
+      expect(container.textContent).toContain("65%");
+    });
+  });
+
+  describe("LC-18 / LC-20 / LC-32 knobs", () => {
+    it("zeroes the size-variant minWidth so the track fills the cell (no 220px floor)", () => {
+      const { container } = renderWithProviders(<Progress label="Fill" value={50} />);
+      const bar = container.querySelector("[role='progressbar']") as HTMLElement;
+      expect(bar).toBeTruthy();
+      expect(getComputedStyle(bar).minWidth).toBe("0px");
+    });
+
+    it("goes square at borderRadius none (R-SCALE, Axiom 3)", () => {
+      const { container } = renderWithProviders(
+        <Preset overrides={{ borderRadius: "none" }}>
+          <Progress label="Square" value={50} />
+        </Preset>,
+      );
+      const bar = container.querySelector("[role='progressbar']") as HTMLElement;
+      expect(bar).toBeTruthy();
+      // jsdom cannot cascade Tamagui class CSS — read the atomic radius class
+      // (Button LC-18 / FieldDisplay precedent): t-radius-0 is the none token.
+      const radiusAtoms = String(bar.className || "")
+        .split(" ")
+        .filter((c) => c.startsWith("_btlr-"));
+      expect(radiusAtoms).toContain("_btlr-t-radius-0");
+      expect(radiusAtoms).not.toContain("_btlr-100000px");
+    });
+
+    it("skeleton track height matches the live 0.25× size formula, not a 6px leftover", () => {
+      const live = renderWithProviders(<Progress label="Upload" value={50} />);
+      const bar = live.container.querySelector("[role='progressbar']") as HTMLElement;
+      const liveHeight = getComputedStyle(bar).height;
+
+      const skel = renderWithProviders(<Progress label="Upload" skeleton />);
+      expect(skel.container.querySelector("[role='progressbar']")).toBeNull();
+      const bones = [...skel.container.querySelectorAll("div")].filter(
+        (el) => getComputedStyle(el).height === liveHeight && el !== skel.container,
+      );
+      expect(Number.parseFloat(liveHeight)).toBeGreaterThan(6);
+      expect(bones.length).toBeGreaterThan(0);
+    });
+
+    it("stops indicator motion when animation is none", () => {
+      const { container } = renderWithProviders(
+        <Preset overrides={{ animation: "none" }}>
+          <Progress label="Still" value={40} />
+        </Preset>,
+      );
+      const indicator = getIndicator(container) as HTMLElement;
+      expect(indicator).toBeTruthy();
+      expect(Array.from(indicator.classList)).toContain("_transition-none");
     });
   });
 });

package/src/fields/Progress/Progress.stories.tsx

@@ -1,4 +1,5 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
@@ -86,12 +87,13 @@ export const Basic: Story = {
   },
 };
 
-export const Disabled: Story = {
+export const ReadOnly: Story = {
   args: {
-    label: "Disabled Progress",
+    label: "Read-only Progress",
     value: 50,
     max: 100,
-    helperText: "This progress bar is read-only",
+    readOnly: true,
+    helperText: "Display-only — Progress has no disabled mutation contract",
   },
 };
 
@@ -219,3 +221,30 @@ export const Comparison: Story = {
 export const SkeletonState: Story = {
   args: { label: "Upload progress", skeleton: true },
 };
+
+type InTableRow = { id: string; label: string; value: number };
+
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: 70 },
+      { id: "2", label: "Beta", value: 42 },
+      { id: "3", label: "Gamma", value: 0 },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "Progress",
+        field: "progress",
+        fieldProps: { min: 0, max: 100 },
+      },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};