@multiplatform.one/forms 7.34.4 → 7.36.0

package/src/fields/Switch/index.tsx

@@ -1,3 +1,5 @@
+import { transitionOrInstant } from "../../shared/instantMotion";
+import { transitionProps } from "@multiplatform.one/theme";
 import { useTouchSurface } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
@@ -23,11 +25,8 @@ import {
 import {
   TOUCH_HEIGHT_FLOOR,
   borderRadiusMap,
-  contrastRatio,
   ensureFocusVisibleRing,
-  normalizeToHex,
   radiusResolutionProps,
-  relativeLuminance,
   resolveRadiusClass,
   sizeRecipeForToken,
   useResolvedKnobs,
@@ -40,7 +39,7 @@ import { commitImmediateField } from "../../ContextualSaveBar/commitImmediateFie
 import { useFormSaveMode } from "../../Form";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
-import { formCommonColors, formControlColors, formSwitchColors } from "../../shared/colorRamps";
+import { formCommonColors, formSwitchColors } from "../../shared/colorRamps";
 import {
   clampRadiusInStateProps,
   getElevationWrapperProps,
@@ -61,8 +60,7 @@ const SWITCH_DRAG_INTENT_PX = 10;
 const SWITCH_CELL_TARGET_HEIGHT = 44;
 
 /** `animation=none` resolves to undefined — do not fall back to `quick`. */
-const resolveSwitchMotion = (token: string | undefined) =>
-  token && token !== "none" ? token : "none";
+const resolveSwitchMotion = (token: string | undefined) => transitionOrInstant(token);
 
 const SWITCH_KB_RING_CSS_ID = "mp-switch-kb-ring-css";
 const SWITCH_KB_RING_CLASS = "mp-switch-kb-ring";
@@ -87,16 +85,15 @@ const stripOutlineFromState = (props?: Record<string, any>) => {
   return Object.keys(rest).length > 0 ? rest : undefined;
 };
 
+const stripTrackPaintFromState = (props?: Record<string, any>) =>
+  props &&
+  Object.fromEntries(
+    Object.entries(props).filter(([key]) => !/^background|^border.*Color$/.test(key)),
+  );
+
 // ─── Switch internals ─────────────────────────────────────────────────────────
 
-/**
- * The painted track is `switchFootprint` of the recipe height (LC-91), never
- * the recipe height itself. The styled fallbacks assume the 1px hairline
- * track border; the component passes exact frameProps with the live knob
- * borderWidth. The 44 press floor lands on the PRESSABLE frame (grown-target
- * mode on touch and in cells, press slop on a fine pointer), never on paint.
- */
-const SWITCH_TRACK_BORDER_FALLBACK = 1;
+const SWITCH_TRACK_BORDER_FALLBACK = 0;
 
 const resolveRadiusValue = (radius: unknown) => {
   if (typeof radius === "number") return radius;
@@ -158,24 +155,10 @@ const SwitchThumbStyled = styled(View, {
       false: {
         size: "$true",
         backgroundColor: formSwitchColors.thumb,
-        // The thumb is a solid physical handle — it gets its definition from a
-        // subtle drop shadow (iOS/Material convention), NOT a flat gray ring.
-        // A visible border reads as an outline/defect; the shadow lifts the
-        // thumb off the track on every side and survives light-thumb-on-light-
-        // track without a hard edge.
         borderWidth: 0,
         borderRadius: 1000,
         justifyContent: "center",
         alignItems: "center",
-        ...(isWeb
-          ? { boxShadow: "0 1px 2px rgba(0,0,0,0.18), 0 0 1px rgba(0,0,0,0.12)" }
-          : {
-              shadowColor: "#000",
-              shadowOffset: { width: 0, height: 1 },
-              shadowOpacity: 0.15,
-              shadowRadius: 2,
-              elevation: 2,
-            }),
       },
     },
 
@@ -206,10 +189,8 @@ const SwitchFrameStyled = styled(View, {
         position: "relative",
         borderRadius: 1000,
         backgroundColor: formSwitchColors.track.off,
-        borderWidth: 1,
-        // Off track: muted fill + ≥3:1 boundary (M3 unselected outline,
-        // DF-06). On track is fill — see `checked` / `activeStyle`.
-        borderColor: formControlColors.boundary,
+        borderWidth: 0,
+        borderColor: formSwitchColors.track.off,
         outlineWidth: 0,
         focusStyle: { outlineWidth: 0 },
         // LC-71: ring is painted from keyboard modality on the track, never
@@ -225,7 +206,7 @@ const SwitchFrameStyled = styled(View, {
       },
       false: {
         backgroundColor: formSwitchColors.track.off,
-        borderColor: formControlColors.boundary,
+        borderColor: formSwitchColors.track.off,
       },
     },
 
@@ -315,37 +296,6 @@ type SwitchDragSession = {
   moved: boolean;
 };
 
-/**
- * DF-05 / Axiom 15 — the handle color is luminance-COMPUTED from the actual
- * track fill, never assumed from a scheme token. The thumb's styled token
- * (`formSwitchColors.thumb`) resolves through the inverted sub-theme tamagui
- * applies to switch thumbs, landing on scheme ink — measured 2.59:1 against
- * the checked accent track in light (non-text state floor is 3:1), and
- * flipping thumb polarity across schemes for no semantic reason. Candidates
- * are the scheme's paper (color1) and ink (color12) anchors; whichever
- * carries more contrast on the fill the thumb is riding wins. Returned as a
- * concrete resolved value so no sub-theme can flip it; returns undefined
- * (keep the styled default) when any color fails to parse.
- */
-function useLuminanceThumbColor(displayChecked: boolean): string | undefined {
-  const theme = useTheme();
-  const trackToken = (
-    displayChecked ? formSwitchColors.track.on : formSwitchColors.track.off
-  ).slice(1);
-  const trackRaw = String((theme as any)[trackToken]?.val ?? "");
-  const paperRaw = String(theme.color1?.val ?? "");
-  const inkRaw = String(theme.color12?.val ?? "");
-  const track = trackRaw ? normalizeToHex(trackRaw) : null;
-  const paper = paperRaw ? normalizeToHex(paperRaw) : null;
-  const ink = inkRaw ? normalizeToHex(inkRaw) : null;
-  if (!track || !paper || !ink) return undefined;
-  const trackLum = relativeLuminance(track);
-  return contrastRatio(relativeLuminance(paper), trackLum) >=
-    contrastRatio(relativeLuminance(ink), trackLum)
-    ? paperRaw
-    : inkRaw;
-}
-
 type SwitchControlProps = {
   checked: boolean;
   onCheckedChange?: (checked: boolean) => void;
@@ -389,10 +339,12 @@ type SwitchControlProps = {
    * without changing the track's visual size.
    */
   cellTrack?: {
+    width: number;
     height: number;
     borderRadius: number;
     borderWidth: number;
     frameHeight: number;
+    frameWidth: number;
     hoverStyle?: Record<string, any>;
     pressStyle?: Record<string, any>;
     focusStyle?: Record<string, any>;
@@ -439,8 +391,13 @@ function SwitchControl({
   }
   const { disabledState, knobProps } = useResolvedKnobs();
   const outlined = knobProps.outlined;
-  const trackOffFill = outlined ? "transparent" : formSwitchColors.track.off;
-  const trackOffBorder = formControlColors.boundary;
+  const [hovered, setHovered] = useState(false);
+  const [pressed, setPressed] = useState(false);
+  const offPaint = pressed
+    ? formSwitchColors.track.offPress
+    : hovered
+      ? formSwitchColors.track.offHover
+      : formSwitchColors.track.off;
   const { thumbInset, thumbSize, travel: dragDistance } = footprint;
   const motion = resolveSwitchMotion(transition);
   const [dragX, setDragX] = useState<number | null>(null);
@@ -479,6 +436,7 @@ function SwitchControl({
     };
 
     const endDrag = (e: PointerEvent) => {
+      setPressed(false);
       const session = sessionRef.current;
       if (!session || e.pointerId !== session.pointerId) return;
       const dist = dragDistanceRef.current;
@@ -512,7 +470,6 @@ function SwitchControl({
   }, []);
 
   const displayChecked = snapChecked ?? checked;
-  const thumbHandleColor = useLuminanceThumbColor(displayChecked);
   const restingX = displayChecked ? dragDistance : 0;
   const thumbX = dragX != null ? dragX : restingX;
   const canDrag = isWeb && !disabled && !readOnly;
@@ -550,6 +507,10 @@ function SwitchControl({
   const focusSafe = stripOutlineFromState(focusStyle);
   const {
     onPointerDown: switchPointerDown,
+    onMouseEnter: switchMouseEnter,
+    onMouseLeave: switchMouseLeave,
+    onPressIn: switchPressIn,
+    onPressOut: switchPressOut,
     onPress: switchPress,
     onFocus: switchFocus,
     onBlur: switchBlur,
@@ -563,7 +524,7 @@ function SwitchControl({
   return (
     <StyledSwitch
       {...inputSurface}
-      transition={motion}
+      {...transitionProps({ ...knobProps.motion.control, transition: motion }, ["borderWidth"])}
       size={sizeToken}
       {...(hoverSafe && { hoverStyle: hoverSafe })}
       {...(pressSafe && { pressStyle: pressSafe })}
@@ -593,8 +554,8 @@ function SwitchControl({
               borderColor: formSwitchColors.track.on,
             }
           : {
-              backgroundColor: trackOffFill,
-              borderColor: trackOffBorder,
+              backgroundColor: outlined ? "transparent" : offPaint,
+              borderColor: offPaint,
             })}
       {...(kbFocus ? { "data-kb-focus": "true" } : undefined)}
       {...(frameClassName ? { className: frameClassName } : undefined)}
@@ -638,6 +599,24 @@ function SwitchControl({
         }
         onCheckedChange?.(val);
       }}
+      {...(isWeb && {
+        onMouseEnter: (e: any) => {
+          if (!disabled && !readOnly) setHovered(true);
+          switchMouseEnter?.(e);
+        },
+        onMouseLeave: (e: any) => {
+          setHovered(false);
+          switchMouseLeave?.(e);
+        },
+      })}
+      onPressIn={(e: any) => {
+        if (!disabled && !readOnly) setPressed(true);
+        switchPressIn?.(e);
+      }}
+      onPressOut={(e: any) => {
+        setPressed(false);
+        switchPressOut?.(e);
+      }}
       onPointerDown={(e: any) => {
         switchPointerDown?.(e);
         if (!canDrag) return;
@@ -658,17 +637,19 @@ function SwitchControl({
       {cellTrack && (
         <View
           position="absolute"
-          left={0}
-          right={0}
+          left={(cellTrack.frameWidth - cellTrack.width) / 2}
+          width={cellTrack.width}
           top="50%"
           y={-cellTrack.height / 2}
           height={cellTrack.height}
           borderRadius={cellTrack.borderRadius}
           {...radiusResolution}
           borderWidth={cellTrack.borderWidth}
-          borderColor={displayChecked ? formSwitchColors.track.on : trackOffBorder}
-          backgroundColor={displayChecked ? formSwitchColors.track.on : trackOffFill}
-          transition={motion}
+          borderColor={displayChecked ? formSwitchColors.track.on : offPaint}
+          backgroundColor={
+            displayChecked ? formSwitchColors.track.on : outlined ? "transparent" : offPaint
+          }
+          {...transitionProps({ ...knobProps.motion.control, transition: motion }, ["borderWidth"])}
           pointerEvents="none"
           className={kbFocus ? SWITCH_KB_RING_CLASS : undefined}
           {...(kbFocus ? ensureFocusVisibleRing() : { outlineWidth: 0 })}
@@ -680,16 +661,23 @@ function SwitchControl({
       {leftIcon && <StyledSwitch.Icon placement="left">{leftIcon}</StyledSwitch.Icon>}
       {rightIcon && <StyledSwitch.Icon placement="right">{rightIcon}</StyledSwitch.Icon>}
       <StyledSwitch.Thumb
+        {...knobProps.thumbShadow}
         borderRadius={thumbRadius}
         {...radiusResolution}
         width={thumbSize}
         height={thumbSize}
         // Own position so drag can override Tamagui's initialChecked alignSelf/x math.
         alignSelf="flex-start"
-        x={thumbX + thumbInset + (cellTrack ? cellTrack.borderWidth : 0)}
+        x={
+          thumbX +
+          thumbInset +
+          (cellTrack ? cellTrack.borderWidth + (cellTrack.frameWidth - cellTrack.width) / 2 : 0)
+        }
         y={cellTrack ? (cellTrack.frameHeight - thumbSize) / 2 : thumbInset}
-        {...(thumbHandleColor ? { backgroundColor: thumbHandleColor } : undefined)}
-        transition={dragX != null ? "none" : motion}
+        {...transitionProps({
+          ...knobProps.motion.control,
+          transition: dragX != null ? transitionOrInstant(undefined) : motion,
+        })}
         {...(thumbHoverStyle && { hoverStyle: thumbHoverStyle })}
         {...(thumbPressStyle && { pressStyle: thumbPressStyle })}
         {...(thumbFocusStyle && { focusStyle: thumbFocusStyle })}
@@ -741,8 +729,6 @@ export interface SwitchProps {
   pointy?: boolean;
   /** When true, renders a skeleton placeholder instead of the switch */
   skeleton?: boolean;
-  /** When true, uses compact sizing */
-  compact?: boolean;
   /**
    * Touch-target floor (SP-FIXED): grows the pressable role=switch frame to
    * at least this many px (invisible — the visible track keeps its normal
@@ -777,7 +763,6 @@ export function Switch({
   switchProps,
   pointy,
   skeleton,
-  compact,
   minTargetHeight,
 }: SwitchProps) {
   const hydrationTouch = useTouchSurface();
@@ -790,7 +775,6 @@ export function Switch({
   const { resolvedForm, knobProps, control, text, elevation, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
   });
   const { mode: saveMode, onAutoCommit } = useFormSaveMode();
   const resolvedValidators = useResolvedValidators(required, validators, label, name, (v) => !v);
@@ -810,8 +794,10 @@ export function Switch({
   // control outgrow its own row. The row is the recipe height (LC-75); the
   // track is the platform switch's fraction of it (LC-91).
   const sizeToken = (size ?? knobProps.sizeToken) as SizeTokens;
-  const borderWidth = knobProps.borderRadius.borderWidth ?? 1;
-  const footprint = switchFootprint(String(sizeToken), borderWidth);
+  const ringWidth = knobProps.outlined
+    ? Math.max(Number(knobProps.borderRadius.borderWidth) || 1, 1)
+    : 0;
+  const footprint = switchFootprint(String(sizeToken), ringWidth);
   const { trackHeight, trackWidth } = footprint;
   // Grown-target mode (SP-FIXED): table cells always grow the pressable
   // frame to 44px; standalone consumers opt in via `minTargetHeight`; touch
@@ -851,6 +837,7 @@ export function Switch({
     const radiusResolution = overrideRadius == null ? radiusResolutionProps("BINARY") : undefined;
     let frameProps: Record<string, any> = {
       borderRadius: overrideRadius ?? trackRadius,
+      borderWidth: ringWidth,
       height: trackHeight,
       minHeight: trackHeight,
       width: trackWidth,
@@ -866,9 +853,9 @@ export function Switch({
     // track renders inside SwitchControl at its normal size, so visual
     // 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 hoverRaw = stripTrackPaintFromState(stripOutlineFromState(control.hoverKnobProps));
+    const pressRaw = stripTrackPaintFromState(stripOutlineFromState(control.pressKnobProps));
+    const focusRaw = stripTrackPaintFromState(stripOutlineFromState(control.focusKnobProps));
     const trackHover =
       overrideRadius != null
         ? stripRadiusFromStateProps(hoverRaw)
@@ -909,10 +896,12 @@ export function Switch({
       typeof state?.borderRadius === "number" ? { borderRadius: state.borderRadius } : undefined;
     const cellTrack = grownTarget
       ? {
+          width: trackWidth,
           height: trackHeight,
           borderRadius: trackRadius,
-          borderWidth,
+          borderWidth: ringWidth,
           frameHeight: targetHeight,
+          frameWidth: Math.max(TOUCH_HEIGHT_FLOOR, trackWidth),
           ...(cellTrackRadiusStyle(trackHover) && {
             hoverStyle: cellTrackRadiusStyle(trackHover),
           }),
@@ -929,6 +918,7 @@ export function Switch({
         ...frameProps,
         height: targetHeight,
         minHeight: targetHeight,
+        width: Math.max(TOUCH_HEIGHT_FLOOR, trackWidth),
         backgroundColor: "transparent",
         borderWidth: 0,
         borderColor: "transparent",
@@ -936,32 +926,10 @@ export function Switch({
         // (invisible) grown frame transparent in the checked state too.
         activeStyle: { backgroundColor: "transparent", borderColor: "transparent" },
       };
-    } else if (switchChecked) {
-      frameProps = {
-        ...frameProps,
-        ...radiusResolution,
-        backgroundColor: formSwitchColors.track.on,
-        borderColor: formSwitchColors.track.on,
-      };
     } else {
-      frameProps = {
-        ...frameProps,
-        ...radiusResolution,
-        backgroundColor: knobProps.outlined ? "transparent" : formSwitchColors.track.off,
-        borderColor: formControlColors.boundary,
-      };
+      frameProps = { ...frameProps, ...radiusResolution };
     }
 
-    // Checked tracks keep the accent FILL through hover/press/focus — the
-    // control knobs' neutral state-layer ($backgroundHover/$backgroundPress)
-    // must never paint over the active accent track (LC-05 / LC-71 on=fill).
-    const stateBorderColor = switchChecked ? formSwitchColors.track.on : formControlColors.boundary;
-    const checkedTrackFill = switchChecked
-      ? {
-          backgroundColor: formSwitchColors.track.on,
-          borderColor: formSwitchColors.track.on,
-        }
-      : undefined;
     const switchElement = (
       <SwitchControl
         checked={switchChecked}
@@ -979,7 +947,7 @@ export function Switch({
         sizeToken={sizeToken}
         footprint={footprint}
         thumbRadius={thumbRadius}
-        transition={resolveSwitchMotion(knobProps.transition as string | undefined)}
+        transition={resolveSwitchMotion(knobProps.motion.control.transition as string | undefined)}
         frameProps={frameProps}
         switchProps={switchProps}
         leftIcon={leftIcon}
@@ -997,17 +965,15 @@ export function Switch({
         {...(thumbPress && { thumbPressStyle: thumbPress })}
         {...(thumbFocus && { thumbFocusStyle: thumbFocus })}
         {...(trackHover && {
-          hoverStyle: { ...trackHover, borderColor: stateBorderColor, ...checkedTrackFill },
+          hoverStyle: trackHover,
         })}
         {...(trackPress && {
-          pressStyle: { ...trackPress, borderColor: stateBorderColor, ...checkedTrackFill },
+          pressStyle: trackPress,
         })}
         {...(trackFocus && {
           focusStyle: {
             outlineWidth: 0,
             ...trackFocus,
-            borderColor: stateBorderColor,
-            ...checkedTrackFill,
           },
         })}
       />
@@ -1032,7 +998,7 @@ export function Switch({
     // (%-width collapses and overflows the next sibling).
     const skeletonStop = resolveSwitchRadiusStop(pointy, knobProps.borderRadius.borderRadius);
     return (
-      <FieldLayout id={id} size={size} knobProps={knobProps} compactSpacing>
+      <FieldLayout id={id} size={size} knobProps={knobProps}>
         <XStack {...knobProps.gap} alignItems="center" height={sizeToken}>
           <Skeleton
             variant="rounded"

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

@@ -362,7 +362,7 @@ describe("TextArea", () => {
     });
   });
 
-  describe("CONTAINER-CAP radius (DG-RAD-04)", () => {
+  describe("DEFAULT field corner capped at padding (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" }}>
@@ -397,40 +397,40 @@ describe("TextArea", () => {
       large.unmount();
 
       const full = renderWithProviders(
-        <Preset overrides={{ borderRadius: "full", space: "medium" }}>
+        <Preset overrides={{ borderRadius: "full" }}>
           <TextArea label="Notes" defaultValue="x" />
         </Preset>,
       );
       const fullClasses = boxRadiusClasses(full.container as HTMLElement);
-      expect(fullClasses).toEqual(["_btlr-18px"]);
+      expect(fullClasses).toEqual(["_btlr-16px"]);
       expect(fullClasses.join(" ")).not.toMatch(/t-radius-12/);
     });
 
-    it("declares the cap on the painted box with the knob stops it resolved", () => {
+    it("declares the cap on the painted box with the knob stop it resolved", () => {
       const result = renderWithProviders(
-        <Preset overrides={{ borderRadius: "full", space: "small" }}>
+        <Preset overrides={{ borderRadius: "full" }}>
           <TextArea label="Notes" defaultValue="x" />
         </Preset>,
       );
       const box = result.container.querySelector("textarea")?.closest(".mp-composite-ring");
       expect(box?.getAttribute("data-constraint-container")).toBe("TextArea");
       expect(box?.getAttribute("data-radius-knob")).toBe("full");
-      expect(box?.getAttribute("data-space-knob")).toBe("small");
+      expect(box?.hasAttribute("data-space-knob")).toBe(false);
     });
 
-    it("caps large under space=small at the padding px", () => {
+    it("keeps large under the 18px panelPadding role", () => {
       const result = renderWithProviders(
-        <Preset overrides={{ borderRadius: "large", space: "small" }}>
+        <Preset overrides={{ borderRadius: "large" }}>
           <TextArea label="Notes" defaultValue="x" />
         </Preset>,
       );
-      expect(boxRadiusClasses(result.container as HTMLElement)).toEqual(["_btlr-13px"]);
+      expect(boxRadiusClasses(result.container as HTMLElement).join(" ")).not.toMatch(/13px/);
     });
 
     it("caps full at the padding px in both schemes, never at the $4 clamp", () => {
       for (const scheme of ["light", "dark"] as const) {
         const ui = (
-          <Preset overrides={{ borderRadius: "full", space: "medium" }}>
+          <Preset overrides={{ borderRadius: "full" }}>
             <TextArea label="Notes" defaultValue="x" />
           </Preset>
         );
@@ -438,7 +438,7 @@ describe("TextArea", () => {
           scheme === "dark" ? <Theme name="dark">{ui}</Theme> : ui,
         );
         const classes = boxRadiusClasses(result.container as HTMLElement);
-        expect(classes, scheme).toEqual(["_btlr-18px"]);
+        expect(classes, scheme).toEqual(["_btlr-16px"]);
         expect(classes.join(" "), scheme).not.toMatch(/t-radius-(4|12)/);
         result.unmount();
       }

package/src/fields/TextArea/TextArea.stories.tsx

@@ -27,7 +27,6 @@ const meta: Meta<typeof TextArea> = {
     disabled: { control: "boolean" },
     readOnly: { control: "boolean" },
     skeleton: { control: "boolean" },
-    compact: { control: "boolean" },
     size: { control: "select", options: ["$2", "$3", "$4"] },
     maxLength: { control: "number" },
     autoResize: { control: "boolean" },
@@ -144,11 +143,7 @@ export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
       <TextArea label="Small" size="$2" textAreaProps={{ placeholder: "Small textarea" }} />
-      <TextArea
-        label="Medium (default)"
-        size="$3"
-        textAreaProps={{ placeholder: "Medium textarea" }}
-      />
+      <TextArea label="Medium ($3)" size="$3" textAreaProps={{ placeholder: "Medium textarea" }} />
       <TextArea label="Large" size="$4" textAreaProps={{ placeholder: "Large textarea" }} />
     </YStack>
   ),
@@ -227,7 +222,7 @@ export const Comparison: Story = {
       const [tamaguiVal, setTamaguiVal] = useState("");
       return (
         <XStack gap="$6" alignItems="flex-start" padding="$4">
-          <YStack gap="$3" width={300}>
+          <YStack gap="$3" width={300} maxWidth="100%">
             <Paragraph size="$2" color="$placeholderColor">
               Custom TextArea
             </Paragraph>
@@ -241,7 +236,7 @@ export const Comparison: Story = {
             />
           </YStack>
 
-          <YStack gap="$3" width={300}>
+          <YStack gap="$3" width={300} maxWidth="100%">
             <Paragraph size="$2" color="$placeholderColor">
               Tamagui TextArea
             </Paragraph>

package/src/fields/TextArea/index.tsx

@@ -54,8 +54,6 @@ export interface TextAreaProps {
   renderOverlay?: () => ReactNode;
   /** When true, renders a skeleton placeholder instead of the textarea */
   skeleton?: boolean;
-  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-  compact?: boolean;
 }
 
 export function TextArea({
@@ -88,10 +86,9 @@ export function TextArea({
   textAreaRef: textAreaRefProp,
   renderOverlay,
   skeleton,
-  compact,
 }: TextAreaProps) {
   const hydrationTouch = useTouchSurface();
-  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const theme = useTheme();
   const [charCount, setCharCount] = useState(() => (value ?? defaultValue ?? "").length);
@@ -157,7 +154,7 @@ export function TextArea({
             variant="rounded"
             width="100%"
             height={minHeightPx}
-            {...knobProps.containerRadius}
+            {...knobProps.fieldRadius}
           />
         </InputParts>
       </FieldLayout>
@@ -243,10 +240,9 @@ export function TextArea({
           height="auto"
           width="100%"
           alignItems="stretch"
-          {...knobProps.containerRadius}
-          {...containerCapProps("TextArea", knobProps.borderRadius.borderRadius, knobProps.space)}
+          {...knobProps.fieldRadius}
+          {...containerCapProps("TextArea", knobProps.borderRadius.borderRadius)}
           cursor={disabled ? "not-allowed" : "text"}
-          theme={hasError ? "error" : undefined}
           // LC-40: Box owns the disabled chrome wash (value text stays >= AA);
           // the old 0.5 whole-box dim dropped text under the floor.
           disabled={disabled}

package/src/fields/TimePicker/catalog.tsx

@@ -54,8 +54,6 @@ export interface TimePickerProps {
   clockIcon?: ReactNode;
   /** When true, renders a skeleton placeholder instead of the time picker */
   skeleton?: boolean;
-  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-  compact?: boolean;
   /** Native only. Omit for the OS time wheel; `false` keeps the catalog panel. */
   native?: boolean;
 }
@@ -83,12 +81,10 @@ export function TimePicker({
   placeholder = t("Select time"),
   clockIcon,
   skeleton,
-  compact,
 }: TimePickerProps) {
   const { resolvedForm, knobProps, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const [open, setOpen] = useState(false);
@@ -132,7 +128,6 @@ export function TimePicker({
       value={triggerValue}
       placeholder={placeholder}
       disabled={disabled}
-      error={hasError}
       id={id}
       clockIcon={clockIcon}
       onOpen={() => setOpen(true)}
@@ -214,7 +209,10 @@ export function TimePicker({
         onBlur={onBlur}
         disabled={disabled}
       >
-        <InputParts size={size || knobProps.sizeToken}>
+        <InputParts
+          size={size || knobProps.sizeToken}
+          {...(error || formatError ? { theme: "error" } : undefined)}
+        >
           {renderField(displayValue, !!error || valueIsInvalid, onBlur)}
         </InputParts>
       </FieldLayout>
@@ -249,7 +247,10 @@ export function TimePicker({
             onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
             disabled={disabled}
           >
-            <InputParts size={size || knobProps.sizeToken}>
+            <InputParts
+              size={size || knobProps.sizeToken}
+              {...(resolvedError || fieldFormatError ? { theme: "error" } : undefined)}
+            >
               {renderField(
                 fieldDisplay,
                 !!resolvedError || fieldIsInvalid,