@multiplatform.one/forms 7.4.0 → 7.5.0

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

@@ -0,0 +1,114 @@
+/**
+ * Switch BINARY radius — thumb and track are one member (R2f).
+ * Painted radius is 0 at `none` and the part's own height/2 at every other
+ * stop, including per-state override bags.
+ */
+
+import { cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset, type BorderRadius } from "@multiplatform.one/theme";
+import { Switch } from "./index";
+
+const STOPS: BorderRadius[] = ["none", "small", "medium", "large", "full"];
+const STATE_BAGS = ["hover", "press", "focus"] as const;
+const SCHEMES = ["light", "dark"] as const;
+
+afterEach(cleanup);
+
+function paintedHeight(el: HTMLElement): number {
+  const rect = el.getBoundingClientRect().height;
+  if (rect > 0) return rect;
+  for (const cls of String(el.className || "").split(/\s+/)) {
+    const m = /^_h-(\d+(?:\.\d+)?)px$/.exec(cls);
+    if (m) return Number(m[1]);
+  }
+  if (el.style.height) {
+    const n = parseFloat(el.style.height);
+    if (n > 0) return n;
+  }
+  const cs = parseFloat(getComputedStyle(el).height);
+  return cs > 0 ? cs : 0;
+}
+
+/** Rest atom is `_btlr-22px`; hover/press/focus are `_btlr-0hover-22px` / `_btlr-0active-22px` / `_btlr-0focus-22px`. */
+function paintedRadius(el: HTMLElement, state?: "hover" | "active" | "focus"): number {
+  const className = String(el.className || "");
+  const re = state
+    ? new RegExp(`_btlr-0${state}-(\\d+(?:\\.\\d+)?)px`)
+    : /(?:^|\s)_btlr-(\d+(?:\.\d+)?)px(?:\s|$)/;
+  const m = re.exec(className);
+  if (m) return Number(m[1]);
+  if (!state && el.style.borderRadius) {
+    const n = parseFloat(el.style.borderRadius);
+    if (Number.isFinite(n)) return n;
+  }
+  const cs = parseFloat(getComputedStyle(el).borderRadius);
+  return Number.isFinite(cs) ? cs : Number.NaN;
+}
+
+function expectBinary(el: HTMLElement, stop: BorderRadius, state?: "hover" | "active" | "focus") {
+  const height = paintedHeight(el);
+  expect(height, `expected a painted height on ${el.className}`).toBeGreaterThan(0);
+  expect(paintedRadius(el, state)).toBe(stop === "none" ? 0 : height / 2);
+}
+
+function mountSwitch(
+  stop: BorderRadius,
+  scheme: (typeof SCHEMES)[number],
+  extra?: Partial<Record<(typeof STATE_BAGS)[number], { borderRadius: BorderRadius }>>,
+) {
+  return renderWithProviders(
+    <Preset
+      overrides={{
+        borderRadius: stop,
+        elevation: "none",
+        ...(extra?.hover && { hover: extra.hover }),
+        ...(extra?.press && { press: extra.press }),
+        ...(extra?.focus && { focus: extra.focus }),
+      }}
+    >
+      <Switch name={`sw-${scheme}-${stop}`} defaultValue={false} aria-label="Notifications" />
+    </Preset>,
+  );
+}
+
+function parts(result: ReturnType<typeof renderWithProviders>) {
+  const track = result.getSwitch();
+  expect(track).toBeTruthy();
+  const thumb = track!.querySelector(".is_SwitchThumb") as HTMLElement | null;
+  expect(thumb).toBeTruthy();
+  return { track: track as HTMLElement, thumb: thumb as HTMLElement };
+}
+
+describe("Switch BINARY radius (thumb and track are one member)", () => {
+  for (const scheme of SCHEMES) {
+    describe(`${scheme} scheme`, () => {
+      for (const stop of STOPS) {
+        it(`thumb and track measure ${stop === "none" ? "0" : "height/2"} at borderRadius:${stop}`, () => {
+          const { track, thumb } = parts(mountSwitch(stop, scheme));
+          expectBinary(track, stop);
+          expectBinary(thumb, stop);
+        });
+      }
+
+      for (const bag of STATE_BAGS) {
+        const tamaguiState = bag === "press" ? "active" : bag;
+        for (const stop of STOPS) {
+          it(`${bag} override bag at ${stop} stays BINARY on thumb and track`, () => {
+            const restStop: BorderRadius = stop === "none" ? "full" : "none";
+            const { track, thumb } = parts(
+              mountSwitch(restStop, scheme, { [bag]: { borderRadius: stop } }),
+            );
+            expectBinary(track, restStop);
+            expectBinary(thumb, restStop);
+            expectBinary(track, stop, tamaguiState);
+            expectBinary(thumb, stop, tamaguiState);
+            expect(String(track.className)).not.toMatch(/_btlr-t-radius-[246]/);
+            expect(String(thumb.className)).not.toMatch(/_btlr-t-radius-[246]/);
+          });
+        }
+      }
+    });
+  }
+});

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

@@ -1,5 +1,6 @@
 import { CheckIcon, XIcon } from "@phosphor-icons/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 { useState } from "react";
@@ -228,3 +229,25 @@ export const Comparison: StoryObj = {
 export const SkeletonState: Story = {
   args: { label: "Enable notifications", skeleton: true },
 };
+
+type InTableRow = { id: string; label: string; value: boolean };
+
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: true },
+      { id: "2", label: "Beta", value: false },
+      { id: "3", label: "Gamma", value: false },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      { accessorKey: "value", header: "Switch", field: "switch" },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};

package/src/fields/Switch/index.tsx

@@ -21,16 +21,21 @@ import {
 } from "tamagui";
 import {
   TOUCH_HEIGHT_FLOOR,
+  borderRadiusMap,
   contrastRatio,
   ensureFocusVisibleRing,
   isTouchSurface,
   normalizeToHex,
   relativeLuminance,
+  resolveRadiusClass,
   sizeRecipeForToken,
   useResolvedKnobs,
   wasKeyboardFocus,
   ensureKeyboardModalityTracking,
+  type BorderRadius,
 } from "@multiplatform.one/theme";
+import { commitImmediateField } from "../../ContextualSaveBar/commitImmediateField";
+import { useFormSaveMode } from "../../Form";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { formCommonColors, formControlColors, formSwitchColors } from "../../shared/colorRamps";
@@ -119,6 +124,44 @@ const resolveRadiusValue = (radius: unknown) => {
   return Number.isFinite(parsed) ? parsed : undefined;
 };
 
+function radiusStopFromToken(token: string): BorderRadius | undefined {
+  for (const stop of Object.keys(borderRadiusMap) as BorderRadius[]) {
+    if (borderRadiusMap[stop] === token) return stop;
+  }
+  return undefined;
+}
+
+/** `pointy` forces the none stop; otherwise invert the resolved radius token. */
+function resolveSwitchRadiusStop(pointy: boolean | undefined, radiusToken: string): BorderRadius {
+  if (pointy === true) return "none";
+  const stop = radiusStopFromToken(radiusToken);
+  if (!stop) {
+    throw new Error(
+      `Switch: "${radiusToken}" is not a borderRadiusMap token; cannot resolve BINARY`,
+    );
+  }
+  return stop;
+}
+
+function binaryRadiusFromStateToken(token: unknown, heightPx: number): number | undefined {
+  if (typeof token !== "string") return undefined;
+  const stop = radiusStopFromToken(token);
+  if (!stop) return undefined;
+  return resolveRadiusClass("BINARY", stop, { heightPx });
+}
+
+/** Rewrite a state bag's DEFAULT radius token to BINARY at that bag's stop. */
+function withBinaryStateRadius(
+  stateProps: Record<string, any> | undefined,
+  heightPx: number,
+): Record<string, any> | undefined {
+  if (!stateProps) return undefined;
+  const { borderRadius: token, ...rest } = stateProps;
+  const resolved = binaryRadiusFromStateToken(token, heightPx);
+  const next = resolved === undefined ? rest : { ...rest, borderRadius: resolved };
+  return Object.keys(next).length > 0 ? next : undefined;
+}
+
 const SwitchThumbStyled = styled(View, {
   name: "SwitchThumb",
   transition: "quick",
@@ -339,6 +382,9 @@ type SwitchControlProps = {
   pressStyle?: Record<string, any>;
   focusStyle?: Record<string, any>;
   focusVisibleStyle?: Record<string, any>;
+  thumbHoverStyle?: Record<string, any>;
+  thumbPressStyle?: Record<string, any>;
+  thumbFocusStyle?: Record<string, any>;
   /** Native VoiceOver/TalkBack name (label text) — htmlFor is web-only. */
   accessibilityLabel?: string;
   /** Native VoiceOver/TalkBack hint (error or helper text). */
@@ -353,7 +399,15 @@ type SwitchControlProps = {
    * visible track renders as this inner view, so the touch target grows
    * without changing the track's visual size.
    */
-  cellTrack?: { height: number; borderRadius: number; borderWidth: number; frameHeight: number };
+  cellTrack?: {
+    height: number;
+    borderRadius: number;
+    borderWidth: number;
+    frameHeight: number;
+    hoverStyle?: Record<string, any>;
+    pressStyle?: Record<string, any>;
+    focusStyle?: Record<string, any>;
+  };
 };
 
 function SwitchControl({
@@ -378,6 +432,9 @@ function SwitchControl({
   pressStyle,
   focusStyle,
   focusVisibleStyle: _focusVisibleStyle,
+  thumbHoverStyle,
+  thumbPressStyle,
+  thumbFocusStyle,
   accessibilityLabel,
   accessibilityHint,
   ariaLabel,
@@ -625,6 +682,9 @@ function SwitchControl({
           pointerEvents="none"
           className={kbFocus ? SWITCH_KB_RING_CLASS : undefined}
           {...(kbFocus ? ensureFocusVisibleRing() : { outlineWidth: 0 })}
+          {...(cellTrack.hoverStyle && { hoverStyle: cellTrack.hoverStyle })}
+          {...(cellTrack.pressStyle && { pressStyle: cellTrack.pressStyle })}
+          {...(cellTrack.focusStyle && { focusStyle: cellTrack.focusStyle })}
         />
       )}
       {leftIcon && <StyledSwitch.Icon placement="left">{leftIcon}</StyledSwitch.Icon>}
@@ -639,6 +699,9 @@ function SwitchControl({
         y={cellTrack ? (cellTrack.frameHeight - thumbSize) / 2 : thumbInset}
         {...(thumbHandleColor ? { backgroundColor: thumbHandleColor } : undefined)}
         transition={dragX != null ? "none" : motion}
+        {...(thumbHoverStyle && { hoverStyle: thumbHoverStyle })}
+        {...(thumbPressStyle && { pressStyle: thumbPressStyle })}
+        {...(thumbFocusStyle && { focusStyle: thumbFocusStyle })}
       />
     </StyledSwitch>
   );
@@ -737,6 +800,7 @@ export function Switch({
     id: idProp,
     compact,
   });
+  const { mode: saveMode, onAutoCommit } = useFormSaveMode();
   const resolvedValidators = useResolvedValidators(required, validators, label, name, (v) => !v);
   const elevationWrapperProps = getElevationWrapperProps(knobProps, elevation);
   const inTableCell = useIsInTableCell();
@@ -780,49 +844,87 @@ export function Switch({
     hasError?: boolean,
     errorMessage?: string,
   ) => {
-    const resolvedPointy = pointy ?? knobProps.pointy;
-    const knobRadius = knobProps.borderRadius.borderRadius;
-    const isSquare = resolvedPointy || knobRadius === "$0";
     const overrideRadius = (switchProps as any)?.borderRadius;
+    const radiusStop = resolveSwitchRadiusStop(pointy, knobProps.borderRadius.borderRadius);
+    const thumbInset = switchThumbInset(thumbHeight);
+    const thumbPaintedHeight = thumbHeight - thumbInset * 2;
+    const trackRadius =
+      overrideRadius != null
+        ? (resolveRadiusValue(overrideRadius) ?? 1000)
+        : resolveRadiusClass("BINARY", radiusStop, { heightPx: trackHeight });
+    const thumbRadius =
+      overrideRadius != null
+        ? (resolveRadiusValue(overrideRadius) ?? 1000)
+        : resolveRadiusClass("BINARY", radiusStop, { heightPx: thumbPaintedHeight });
 
-    let frameProps: Record<string, any> = {};
-    let thumbRadius = 1000;
-
-    if (overrideRadius != null) {
-      frameProps = {
-        borderRadius: overrideRadius,
-        height: thumbHeight + borderWidth * 2,
-        minHeight: thumbHeight + borderWidth * 2,
-        width: thumbHeight * 2 + borderWidth * 2,
-      };
-      thumbRadius = resolveRadiusValue(overrideRadius) ?? 1000;
-    } else if (isSquare) {
-      frameProps = {
-        borderRadius: 0,
-        height: thumbHeight + borderWidth * 2,
-        minHeight: thumbHeight + borderWidth * 2,
-        width: thumbHeight * 2 + borderWidth * 2,
-      };
-      thumbRadius = 0;
-    } else {
-      frameProps = {
-        height: thumbHeight + borderWidth * 2,
-        minHeight: thumbHeight + borderWidth * 2,
-        width: thumbHeight * 2 + borderWidth * 2,
-      };
-    }
+    let frameProps: Record<string, any> = {
+      borderRadius: overrideRadius ?? trackRadius,
+      height: thumbHeight + borderWidth * 2,
+      minHeight: thumbHeight + borderWidth * 2,
+      width: thumbHeight * 2 + borderWidth * 2,
+    };
 
     // Grown-target mode (SP-FIXED): grow the pressable frame (44px in cells,
     // `minTargetHeight` floor standalone) and strip its chrome; the visible
     // track renders inside SwitchControl at its normal size, so visual
-    // density is unchanged. Track radius follows the thumb radius
-    // (override / square / pill), already resolved above.
+    // density is unchanged. Thumb and track stay one BINARY member
+    // (RULINGS-2026-08-28 §R2) — both resolve through resolveRadiusClass.
+    const hoverRaw = stripOutlineFromState(control.hoverKnobProps);
+    const pressRaw = stripOutlineFromState(control.pressKnobProps);
+    const focusRaw = stripOutlineFromState(control.focusKnobProps);
+    const trackHover =
+      overrideRadius != null
+        ? stripRadiusFromStateProps(hoverRaw)
+        : withBinaryStateRadius(hoverRaw, trackHeight);
+    const trackPress =
+      overrideRadius != null
+        ? stripRadiusFromStateProps(pressRaw)
+        : withBinaryStateRadius(pressRaw, trackHeight);
+    const trackFocus =
+      overrideRadius != null
+        ? stripRadiusFromStateProps(focusRaw)
+        : withBinaryStateRadius(focusRaw, trackHeight);
+    const thumbHover = withBinaryStateRadius(
+      overrideRadius != null
+        ? undefined
+        : hoverRaw?.borderRadius != null
+          ? { borderRadius: hoverRaw.borderRadius }
+          : undefined,
+      thumbPaintedHeight,
+    );
+    const thumbPress = withBinaryStateRadius(
+      overrideRadius != null
+        ? undefined
+        : pressRaw?.borderRadius != null
+          ? { borderRadius: pressRaw.borderRadius }
+          : undefined,
+      thumbPaintedHeight,
+    );
+    const thumbFocus = withBinaryStateRadius(
+      overrideRadius != null
+        ? undefined
+        : focusRaw?.borderRadius != null
+          ? { borderRadius: focusRaw.borderRadius }
+          : undefined,
+      thumbPaintedHeight,
+    );
+    const cellTrackRadiusStyle = (state?: Record<string, any>) =>
+      typeof state?.borderRadius === "number" ? { borderRadius: state.borderRadius } : undefined;
     const cellTrack = grownTarget
       ? {
           height: trackHeight,
-          borderRadius: thumbRadius,
+          borderRadius: trackRadius,
           borderWidth,
           frameHeight: targetHeight,
+          ...(cellTrackRadiusStyle(trackHover) && {
+            hoverStyle: cellTrackRadiusStyle(trackHover),
+          }),
+          ...(cellTrackRadiusStyle(trackPress) && {
+            pressStyle: cellTrackRadiusStyle(trackPress),
+          }),
+          ...(cellTrackRadiusStyle(trackFocus) && {
+            focusStyle: cellTrackRadiusStyle(trackFocus),
+          }),
         }
       : undefined;
     if (grownTarget) {
@@ -861,10 +963,6 @@ export function Switch({
           borderColor: formSwitchColors.track.on,
         }
       : undefined;
-    const hoverKnob = stripOutlineFromState(stripRadiusFromStateProps(control.hoverKnobProps));
-    const pressKnob = stripOutlineFromState(stripRadiusFromStateProps(control.pressKnobProps));
-    const focusKnob = stripOutlineFromState(stripRadiusFromStateProps(control.focusKnobProps));
-
     const switchElement = (
       <SwitchControl
         checked={switchChecked}
@@ -895,16 +993,19 @@ export function Switch({
         accessibilityHint={errorMessage ?? helperText}
         ariaLabel={ariaLabel}
         ariaLabelledBy={ariaLabelledBy}
-        {...(hoverKnob && {
-          hoverStyle: { ...hoverKnob, borderColor: stateBorderColor, ...checkedTrackFill },
+        {...(thumbHover && { thumbHoverStyle: thumbHover })}
+        {...(thumbPress && { thumbPressStyle: thumbPress })}
+        {...(thumbFocus && { thumbFocusStyle: thumbFocus })}
+        {...(trackHover && {
+          hoverStyle: { ...trackHover, borderColor: stateBorderColor, ...checkedTrackFill },
         })}
-        {...(pressKnob && {
-          pressStyle: { ...pressKnob, borderColor: stateBorderColor, ...checkedTrackFill },
+        {...(trackPress && {
+          pressStyle: { ...trackPress, borderColor: stateBorderColor, ...checkedTrackFill },
         })}
-        {...(focusKnob && {
+        {...(trackFocus && {
           focusStyle: {
             outlineWidth: 0,
-            ...focusKnob,
+            ...trackFocus,
             borderColor: stateBorderColor,
             ...checkedTrackFill,
           },
@@ -914,7 +1015,7 @@ export function Switch({
 
     if (elevationWrapperProps.elevation && !grownTarget) {
       return (
-        <View {...elevationWrapperProps} borderRadius={isSquare ? 0 : 1000}>
+        <View {...elevationWrapperProps} borderRadius={trackRadius}>
           {switchElement}
         </View>
       );
@@ -926,12 +1027,10 @@ export function Switch({
   // Render skeleton placeholder
   if (skeleton) {
     // Mirror the real anatomy (LC-20 SKELETON-MIRRORS-ANATOMY): same track
-    // size as renderSwitch, pill (1000) or square (0) radius matching the
-    // real control, and a deterministic px label width — never % inside this
-    // auto-width row (%-width collapses and overflows the next sibling).
-    const resolvedPointy = pointy ?? knobProps.pointy;
-    const knobRadius = knobProps.borderRadius.borderRadius;
-    const isSquare = resolvedPointy || knobRadius === "$0";
+    // size as renderSwitch, BINARY radius matching the real control, and a
+    // deterministic px label width — never % inside this auto-width row
+    // (%-width collapses and overflows the next sibling).
+    const skeletonStop = resolveSwitchRadiusStop(pointy, knobProps.borderRadius.borderRadius);
     const trackWidth = thumbHeight * 2 + borderWidth * 2;
     return (
       <FieldLayout id={id} size={size} knobProps={knobProps} compactSpacing>
@@ -940,7 +1039,7 @@ export function Switch({
             variant="rounded"
             width={trackWidth}
             height={trackHeight}
-            borderRadius={isSquare ? 0 : 1000}
+            borderRadius={resolveRadiusClass("BINARY", skeletonStop, { heightPx: trackHeight })}
           />
           {label && (
             <Skeleton
@@ -1034,7 +1133,13 @@ export function Switch({
             >
               {renderSwitch(
                 checked !== undefined ? checked : Boolean(field.state.value),
-                (val) => field.handleChange(val as any),
+                (val) => {
+                  field.handleChange(val as any);
+                  if (saveMode === "declarative") {
+                    commitImmediateField(resolvedForm, name, val);
+                    onAutoCommit?.(name, val);
+                  }
+                },
                 mergeFieldHandler(field, "handleBlur", onBlur),
                 !!resolvedError,
                 typeof resolvedError === "string" && resolvedError ? resolvedError : undefined,

package/src/fields/TextArea/TextArea.spec.tsx

@@ -1,5 +1,6 @@
 import { useForm } from "@tanstack/react-form";
 import { act, fireEvent, waitFor } from "@testing-library/react";
+import { Preset } from "@multiplatform.one/theme";
 import { YStack } from "tamagui";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
@@ -7,6 +8,15 @@ import { Form } from "../../Form";
 import { Button } from "../../Button";
 import { TextArea } from "./index";
 
+/** Tamagui atomic top-left radius class on the LC-71 ring box. */
+function boxRadiusClasses(container: HTMLElement): string[] {
+  const textarea = container.querySelector("textarea");
+  const box = textarea?.closest(".mp-composite-ring");
+  return String(box?.className || "")
+    .split(" ")
+    .filter((c) => c.startsWith("_btlr-"));
+}
+
 describe("TextArea", () => {
   describe("without form context", () => {
     it("should render with label and helper text correctly", () => {
@@ -95,6 +105,16 @@ describe("TextArea", () => {
       expect(textarea).toHaveValue(multilineText);
     });
 
+    it("padX does not exceed padY when styles resolve (LC-84)", () => {
+      const result = renderWithProviders(<TextArea label="Notes" defaultValue="hello" />);
+      const textarea = result.getTextArea() as HTMLTextAreaElement | null;
+      expect(textarea).toBeTruthy();
+      const cs = textarea ? getComputedStyle(textarea) : null;
+      const padX = cs ? parseFloat(cs.paddingLeft) || 0 : 0;
+      const padY = cs ? parseFloat(cs.paddingTop) || 0 : 0;
+      expect(padX).toBeLessThanOrEqual(padY);
+    });
+
     it("should handle state transitions", async () => {
       const onChangeText = vi.fn();
       const result = renderWithProviders(
@@ -323,4 +343,87 @@ describe("TextArea", () => {
       });
     });
   });
+
+  describe("LC-14 canonical onChange(value)", () => {
+    it("fires onChange with the string; onChangeText alias fires from the same site", async () => {
+      const onChange = vi.fn();
+      const onChangeText = vi.fn();
+      const result = renderWithProviders(
+        <TextArea label="Notes" defaultValue="" onChange={onChange} onChangeText={onChangeText} />,
+      );
+      const textarea = result.getTextArea();
+      await act(async () => {
+        if (textarea) fireEvent.change(textarea, { target: { value: "hello" } });
+      });
+      expect(onChange).toHaveBeenCalledWith("hello");
+      expect(onChangeText).toHaveBeenCalledWith("hello");
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChangeText).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("CONTAINER-CAP radius (DG-RAD-04)", () => {
+    it("squares at none and rides the token through large; full caps at padding, never a pill", () => {
+      const none = renderWithProviders(
+        <Preset overrides={{ borderRadius: "none" }}>
+          <TextArea label="Notes" defaultValue="x" />
+        </Preset>,
+      );
+      expect(boxRadiusClasses(none.container as HTMLElement)).toEqual(["_btlr-t-radius-0"]);
+      none.unmount();
+
+      const small = renderWithProviders(
+        <Preset overrides={{ borderRadius: "small" }}>
+          <TextArea label="Notes" defaultValue="x" />
+        </Preset>,
+      );
+      expect(boxRadiusClasses(small.container as HTMLElement)).toEqual(["_btlr-t-radius-2"]);
+      small.unmount();
+
+      const medium = renderWithProviders(
+        <Preset overrides={{ borderRadius: "medium" }}>
+          <TextArea label="Notes" defaultValue="x" />
+        </Preset>,
+      );
+      expect(boxRadiusClasses(medium.container as HTMLElement)).toEqual(["_btlr-t-radius-4"]);
+      medium.unmount();
+
+      const large = renderWithProviders(
+        <Preset overrides={{ borderRadius: "large" }}>
+          <TextArea label="Notes" defaultValue="x" />
+        </Preset>,
+      );
+      expect(boxRadiusClasses(large.container as HTMLElement)).toEqual(["_btlr-t-radius-6"]);
+      large.unmount();
+
+      const full = renderWithProviders(
+        <Preset overrides={{ borderRadius: "full", space: "medium" }}>
+          <TextArea label="Notes" defaultValue="x" />
+        </Preset>,
+      );
+      const fullClasses = boxRadiusClasses(full.container as HTMLElement);
+      expect(fullClasses).toEqual(["_btlr-18px"]);
+      expect(fullClasses.join(" ")).not.toMatch(/t-radius-12/);
+    });
+
+    it("caps large under space=small at the padding px", () => {
+      const result = renderWithProviders(
+        <Preset overrides={{ borderRadius: "large", space: "small" }}>
+          <TextArea label="Notes" defaultValue="x" />
+        </Preset>,
+      );
+      expect(boxRadiusClasses(result.container as HTMLElement)).toEqual(["_btlr-13px"]);
+    });
+  });
+
+  describe("LC-20 skeleton mirrors anatomy", () => {
+    it("keeps the real label and skeletons only the control", () => {
+      const result = renderWithProviders(
+        <TextArea label="Description" helperText="Loading notes" skeleton />,
+      );
+      expect(result.findTextElement("Description")).toBeDefined();
+      expect(result.container.querySelector("textarea")).toBeNull();
+      expect(result.container.querySelector("label")?.textContent).toContain("Description");
+    });
+  });
 });

package/src/fields/TextArea/TextArea.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";
@@ -264,3 +265,30 @@ export const Comparison: Story = {
 export const SkeletonState: Story = {
   args: { label: "Description", 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: "Include any access instructions." },
+      { id: "2", label: "Beta", value: "Loading dock on the east side." },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "TextArea",
+        field: "textarea",
+        fieldProps: { placeholder: "Enter description..." },
+      },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};