@multiplatform.one/forms 7.34.4 → 7.36.0

package/src/fields/FileUpload/FileUpload.stories.tsx

@@ -139,7 +139,7 @@ export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
       <FileUpload label="Small" size="$2" placeholder="Upload a file" />
-      <FileUpload label="Medium (default)" size="$3" placeholder="Upload a file" />
+      <FileUpload label="Medium ($3)" size="$3" placeholder="Upload a file" />
       <FileUpload label="Large" size="$4" placeholder="Upload a file" />
     </YStack>
   ),

package/src/fields/FileUpload/index.tsx

@@ -1,3 +1,4 @@
+import { transitionProps } from "@multiplatform.one/theme";
 import { useTouchSurface } from "@multiplatform.one/theme";
 import { FileIcon, UploadIcon, XIcon } from "@phosphor-icons/react";
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
@@ -102,13 +103,18 @@ export type FileUploadProps<
     pickerMode?: NativePickerMode;
     /** When true, renders a skeleton placeholder instead of the file upload */
     skeleton?: boolean;
-    /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-    compact?: boolean;
     /**
      * Extra controls in the CTA row (Attach "From Library"). The dropzone
      * stays the OS-picker target (LC-23); these are the carve-out children.
      */
     actions?: ReactNode;
+    /**
+     * The file the value already names (a stored URL), shown as a preview
+     * tile until a new pick replaces it — never as a raw path.
+     */
+    existing?: { src: string; name?: string } | null;
+    /** Removes the existing file; given, its tile carries a remove disc. */
+    onExistingRemove?: () => void;
   };
 
 const UploadAreaFrame = styled(YStack, {
@@ -221,8 +227,9 @@ export function FileUpload<
     disabled,
     readOnly,
     skeleton,
-    compact,
     actions,
+    existing,
+    onExistingRemove,
     id: idProp,
     ...fieldProps
   } = useProps(props);
@@ -230,7 +237,6 @@ export function FileUpload<
   const { resolvedForm, knobProps, disabledState, id } = useFormField({
     form,
     id: idProp,
-    compact,
   });
   if (isWeb) ensureKeyboardModalityTracking();
   const [kbZoneFocus, setKbZoneFocus] = useState(false);
@@ -254,8 +260,7 @@ export function FileUpload<
   const cappedRadius = clampRadiusForLargeComponent(knobProps.borderRadius.borderRadius);
   // Intentional: extract the nested-chrome step (32 at medium) for the row
   // thumb/glyph boxes — in-zone previews are nested chrome, not press
-  // targets, so they take the px without the fragment's hitSlop. LC-76 keeps
-  // compact a space-only dial, so the old `compact ? 24 : 32` size fork drops.
+  // targets, so they take the px without the fragment's hitSlop.
   const rowMediaPx = knobProps.nestedControl.px;
   // Intentional: extract the recipe icon step (16 at the 44 control) for the
   // row file glyph — same held "icon 16" exception the CTA carries.
@@ -703,7 +708,10 @@ export function FileUpload<
   }
 
   const canInteract = !disabled && !readOnly;
-  const hasRows = selectedFiles.length > 0 || transfers.length > 0;
+  const showExisting =
+    Boolean(existing?.src) && selectedFiles.length === 0 && transfers.length === 0;
+  const existingName = existing?.name || fileNameFromSrc(existing?.src ?? "");
+  const hasRows = selectedFiles.length > 0 || transfers.length > 0 || showExisting;
 
   const renderRemoveDisc = (ariaLabel: string, onPress: () => void) =>
     canInteract ? (
@@ -878,7 +886,7 @@ export function FileUpload<
         borderWidth={knobProps.borderRadius.borderWidth ?? 1}
         {...(errorProp ? { borderColor: formCommonColors.error } : undefined)}
         elevation={knobProps.elevation}
-        transition={knobProps.transition}
+        {...transitionProps(knobProps.motion.control)}
         // CONTRACT (boards media-01..03): the getFieldHeight floor sits on
         // the FRAME, so the frame border-box measures 220 — hanging it on
         // the inner stack painted 222, a number no token expresses.
@@ -964,7 +972,13 @@ export function FileUpload<
           justifyContent="center"
           {...knobProps.gap}
         >
-          <XStack alignItems="center" {...knobProps.gap}>
+          <XStack
+            alignItems="center"
+            justifyContent="center"
+            flexWrap="wrap"
+            maxWidth="100%"
+            {...knobProps.gap}
+          >
             <Button
               onPress={requestFiles}
               disabled={!canInteract}
@@ -981,7 +995,7 @@ export function FileUpload<
             {actions}
           </XStack>
 
-          {selectedFiles.length === 0 && transfers.length === 0 && (
+          {selectedFiles.length === 0 && transfers.length === 0 && !showExisting && (
             <Text color={formCommonColors.muted} textAlign="center" {...knobProps.body}>
               {placeholder}
             </Text>
@@ -1010,6 +1024,43 @@ export function FileUpload<
             // The hairline tracks the frame edge's knob width — one dash voice.
             borderTopWidth={knobProps.borderRadius.borderWidth ?? 1}
           >
+            {showExisting && existing ? (
+              <UploadTileGridFrame
+                data-file-upload="tiles"
+                {...knobProps.gap}
+                {...knobProps.panelPadding}
+              >
+                <YStack
+                  data-file-upload="existing"
+                  position="relative"
+                  width={tilePx}
+                  height={tilePx}
+                >
+                  <Image
+                    borderRadius={cappedRadius}
+                    src={existing.src}
+                    alt={existingName}
+                    width={tilePx}
+                    height={tilePx}
+                    objectFit="cover"
+                  />
+                  {onExistingRemove ? (
+                    <YStack
+                      data-file-upload="tile-remove"
+                      position="absolute"
+                      top={tileRemoveInset}
+                      right={tileRemoveInset}
+                      zIndex={1}
+                    >
+                      {renderRemoveDisc(
+                        t("Remove {{name}}", { name: existingName }),
+                        onExistingRemove,
+                      )}
+                    </YStack>
+                  ) : null}
+                </YStack>
+              </UploadTileGridFrame>
+            ) : null}
             {imageTiles.length > 0 ? (
               <UploadTileGridFrame
                 data-file-upload="tiles"
@@ -1182,6 +1233,17 @@ export function FileUpload<
   );
 }
 
+/** The last path segment of a stored file URL, decoded, without its query. */
+function fileNameFromSrc(src: string): string {
+  const path = src.split(/[?#]/)[0] ?? "";
+  const segment = path.split("/").filter(Boolean).pop() ?? "";
+  try {
+    return decodeURIComponent(segment);
+  } catch {
+    return segment;
+  }
+}
+
 /**
  * The value shape a native pick binds. `{ uri, name, type, size }` is what
  * React Native's FormData accepts for a multipart upload, so a form value can

package/src/fields/Geolocation/Geolocation.spec.tsx

@@ -1,3 +1,4 @@
+import { defaultKnobs, resolveKnobs } from "@multiplatform.one/theme";
 import { describe, expect, it, vi, afterEach } from "vitest";
 import { fireEvent, waitFor } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
@@ -548,6 +549,10 @@ describe("Geolocation", () => {
       const result = renderWithProviders(
         <Geolocation label="Loading" name="l" locationIcon={locationIcon} skeleton />,
       );
+      const search = result.container.querySelectorAll(".is_Skeleton")[0];
+      expect(getComputedStyle(search).height).toBe(
+        `${resolveKnobs(defaultKnobs).knobProps.control.height}px`,
+      );
       expect(result.container.querySelector("[data-testid='geolocation-map']")).toBeNull();
       expect(result.container.querySelector("[aria-label='Locate']")).toBeNull();
       expect(result.container.querySelector("input")).toBeNull();

package/src/fields/Geolocation/index.tsx

@@ -1,6 +1,7 @@
 import {
   ensureFocusVisibleRing,
   pressTargetHitSlop,
+  sizeTokenStep,
   useResolvedKnobs,
   useGlyphColor,
   useTouchSurface,
@@ -76,7 +77,6 @@ function coordinateKey({ lat, lng }: { lat: number; lng: number }): string {
 
 const SEARCH_DEBOUNCE_MS = 300;
 const COORD_LINE_HEIGHT = 28;
-const RESULTS_PANEL_SHADOW = "0px 8px 28px rgba(0,0,0,0.12), 0px 2px 6px rgba(0,0,0,0.04)";
 
 /**
  * Geolocation capability pre-flight (LC-19 CAPABILITY-PREFLIGHT). Runs BEFORE
@@ -776,8 +776,6 @@ export interface GeolocationProps {
   renderMap?: (props: GeolocationMapProps) => ReactNode;
   /** When true, renders a skeleton placeholder instead of the geolocation field */
   skeleton?: boolean;
-  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-  compact?: boolean;
   /**
    * Forward geocode. Injected — the field never ships a default provider
    * (R4). Without this, search is disabled and the map / locate / coordinate
@@ -860,13 +858,12 @@ export function Geolocation({
   expandIcon,
   renderMap,
   skeleton,
-  compact,
   geocode: geocodeProp,
   reverseGeocode: reverseGeocodeProp,
   geocoder,
 }: GeolocationProps) {
   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 glyphColor = useGlyphColor();
   const resolvedLocationIcon =
@@ -1171,7 +1168,7 @@ export function Geolocation({
 
   const mapHeight = getFieldHeight(
     (size ?? knobProps.sizeToken) as SizeTokens,
-    compact ? 4 : 5,
+    sizeTokenStep((size ?? knobProps.sizeToken) as string) < 0 ? 4 : 5,
     hydrationTouch,
   );
   const displayError = error || preflightError;
@@ -1413,12 +1410,8 @@ export function Geolocation({
             left={0}
             right={0}
             zIndex={zIndex.dropdown}
-            backgroundColor="$color1"
-            borderWidth={1}
-            borderColor={formInputColors.border.base}
-            borderRadius={knobProps.borderRadius.borderRadius}
+            {...knobProps.elevatedSurface}
             overflow="hidden"
-            style={{ boxShadow: RESULTS_PANEL_SHADOW }}
           >
             <ScrollView keyboardShouldPersistTaps="handled" maxHeight={mapHeight * 1.5}>
               {renderResults(handlers)}
@@ -1466,7 +1459,7 @@ export function Geolocation({
     return (
       <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
         <YStack gap="$2">
-          <Skeleton variant="rounded" width="100%" height={44} />
+          <Skeleton variant="rounded" width="100%" height={knobProps.control.height} />
           <Skeleton variant="rounded" width="100%" height={mapHeight} />
         </YStack>
       </FieldLayout>

package/src/fields/Icon/Icon.stories.tsx

@@ -26,7 +26,7 @@ export const Main: Story = {
     const Example = () => {
       const [value, setValue] = useState("mail");
       return (
-        <YStack gap="$4" width={320}>
+        <YStack gap="$4" width={320} maxWidth="100%">
           <Icon
             label="Workspace icon"
             value={value}
@@ -44,7 +44,7 @@ export const Main: Story = {
 
 export const Empty: Story = {
   render: () => (
-    <YStack width={320}>
+    <YStack width={320} maxWidth="100%">
       <Icon label="Workspace icon" placeholder="Choose an icon" />
     </YStack>
   ),
@@ -60,7 +60,7 @@ export const Wide: Story = {
 
 export const ReadOnly: Story = {
   render: () => (
-    <YStack width={320}>
+    <YStack width={320} maxWidth="100%">
       <Icon label="Workspace icon" value="upload" readOnly />
     </YStack>
   ),

package/src/fields/Icon/index.tsx

@@ -1,12 +1,7 @@
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import { MagnifyingGlassIcon } from "@phosphor-icons/react";
 import { Pressable as RNPressable } from "react-native";
-import {
-  ensureFocusVisibleRing,
-  useAaSolidFill,
-  useReadableTextOn,
-  useResolvedKnobs,
-} from "@multiplatform.one/theme";
+import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useCallback, useEffect, useMemo, useRef, useState, type ComponentRef } from "react";
 import { Text, View, XStack, YStack, isWeb, useProps } from "tamagui";
 import { Field, FieldLayout } from "../../fieldLayout";
@@ -14,7 +9,7 @@ import type { FormFieldProps } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
 import { FloatingPanel, useViewportGtSm } from "../../FloatingPanel";
 import { Skeleton } from "../../Skeleton";
-import { formCommonColors, formSelectedColors } from "../../shared/colorRamps";
+import { formCommonColors, formSelectionColors } from "../../shared/colorRamps";
 import { useIsInTableCell } from "../../shared/tableCellContext";
 import {
   getFieldError,
@@ -25,7 +20,6 @@ import {
 import { t } from "../../shared/t";
 import type { FieldComponentProps, Validator } from "../../types";
 import {
-  DRAWN_ICON_NAMES,
   DrawnIcon,
   filterDrawnIcons,
   isDrawnIconName,
@@ -67,7 +61,6 @@ export type IconProps<
     /** @deprecated Use `onChange` instead. */
     onValueChange?: (value: string) => void;
     skeleton?: boolean;
-    compact?: boolean;
     /** Restrict the picker to a subset of the drawn set (df.options). */
     icons?: readonly string[];
     options?: string;
@@ -129,9 +122,6 @@ function IconControl({
   const shouldUseSheet = !isWeb || !(typeof window !== "undefined" && viewportGtSm);
   const drawn = isDrawnIconName(value) ? value : undefined;
   const matches = useMemo(() => filterDrawnIcons(catalog, query), [catalog, query]);
-  // Ink that reads on the accent fill the selected cell carries (LC-05).
-  const markFill = useAaSolidFill(formSelectedColors.mark);
-  const onMark = useReadableTextOn(markFill);
 
   const closePanel = useCallback(() => {
     // Focus restoration retries after 320ms in focusManagement.ts. Let that
@@ -199,10 +189,10 @@ function IconControl({
         cursor="pointer"
         onPress={isWeb && !disabled ? () => setOpen(true) : undefined}
         size={knobProps.sizeToken}
+        {...(hasError ? { theme: "error" } : undefined)}
       >
         <InputParts.Box
           testID="icon-field"
-          theme={hasError ? "error" : undefined}
           disabled={disabled}
           {...(disabled ? { opacity: 0.5, pointerEvents: "none" } : undefined)}
         >
@@ -343,7 +333,7 @@ function IconControl({
           <XStack flexWrap="wrap">
             {matches.map((name) => {
               const selected = name === value;
-              const cellInk = (selected && onMark) || formCommonColors.text;
+              const cellInk = selected ? formSelectionColors.ink : formCommonColors.text;
               const cell = (
                 <View
                   key={name}
@@ -362,9 +352,8 @@ function IconControl({
                     justifyContent="center"
                     gap="$1"
                     borderRadius="$3"
-                    // LC-05 ONE-EMPHASIS: the selected mark is the active
-                    // accent, never a neutral ramp step.
-                    backgroundColor={selected ? markFill : "transparent"}
+                    // LC-05: a selected icon cell uses the neutral selection tier.
+                    backgroundColor={selected ? formSelectionColors.background : "transparent"}
                     hoverStyle={selected ? undefined : { backgroundColor: "$color3" }}
                   >
                     {/* Outside InputParts.Icon, so the colour is passed here. */}
@@ -430,7 +419,6 @@ export function Icon<
     onChange,
     onValueChange,
     skeleton,
-    compact,
     id: idProp,
     icons,
     options,
@@ -449,7 +437,7 @@ export function Icon<
     [onChange, onValueChange],
   );
 
-  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const [standaloneValue, setStandaloneValue] = useState<string>(
     () => (controlledValue ?? (defaultValue as string)) || "",

package/src/fields/ImageField/index.tsx

@@ -9,6 +9,7 @@
  * the borderRadius fragment, never clampRadiusForControl / containerRadius.
  */
 
+import { transitionProps } from "@multiplatform.one/theme";
 import { ImageSquareIcon, XIcon } from "@phosphor-icons/react";
 import {
   ensureFocusVisibleRing,
@@ -78,8 +79,6 @@ export interface ImageFieldProps {
   objectFit?: "cover" | "contain" | "fill" | "none";
   /** When true, renders a skeleton placeholder instead of the image field */
   skeleton?: boolean;
-  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-  compact?: boolean;
 }
 
 const ImageFrame = styled(View, {
@@ -337,7 +336,7 @@ function ImageControl({
             : formInputColors.background.base
         }
         elevation={inTableCell ? undefined : knobProps.elevation}
-        transition={knobProps.transition}
+        {...transitionProps(knobProps.motion.control)}
         {...(disabled ? disabledSurface : undefined)}
         aria-required={required || undefined}
         aria-invalid={!!errorProp || undefined}
@@ -462,12 +461,10 @@ export function ImageField({
   placeholder,
   objectFit = "cover",
   skeleton,
-  compact,
 }: ImageFieldProps) {
   const { resolvedForm, knobProps, disabledState, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const [validationError, setValidationError] = useState<string | undefined>();

package/src/fields/Input/Input.copy.spec.tsx

@@ -50,19 +50,19 @@ describe("Input copy (CopyField slot)", () => {
     );
     const copy = copyOf(result.container);
     if (!copy) throw new Error("copy missing when disabled");
-    expect(copy.getAttribute("data-end-cap")).toBe("44");
+    expect(copy.getAttribute("data-end-cap")).toBe("40");
     expect(copy.getAttribute("tabindex")).toBe("-1");
   });
 
-  it("default size stays 44 tall with the copy cap present", () => {
+  it("default size stays 40 tall with the copy cap present", () => {
     const result = renderWithProviders(
       <Input copy readOnly label="API token" value="mpo_live_4f2a9c81e0b3" />,
     );
     const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
     const copy = copyOf(result.container);
     if (!box || !copy) throw new Error("box or copy not found");
-    expect(box.getAttribute("data-visual-height")).toBe("44");
-    expect(copy.getAttribute("data-end-cap")).toBe("44");
+    expect(box.getAttribute("data-visual-height")).toBe("40");
+    expect(copy.getAttribute("data-end-cap")).toBe("40");
   });
 
   it("copy cap tracks the size recipe at every step", () => {

package/src/fields/Input/Input.spec.tsx

@@ -2,7 +2,7 @@ import { act, fireEvent, waitFor } from "@testing-library/react";
 import { useState } from "react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
+import { Preset, Surface, sizeRecipeForToken, textFieldInset } from "@multiplatform.one/theme";
 import { Form } from "../../Form";
 import { TableCellContext } from "../../shared/tableCellContext";
 import { Input } from "./index";
@@ -288,42 +288,66 @@ describe("Input", () => {
     });
   });
 
-  describe("density ≠ size", () => {
-    it("compact steps density without requiring a size token", () => {
-      const result = renderWithProviders(<Input label="Name" name="n" compact />);
+  describe("size token (LC-100 / LC-78)", () => {
+    it("renders at the ambient token, $true by default, with no density attribute", () => {
+      const result = renderWithProviders(<Input label="Name" name="n" />);
       const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
-      expect(box.getAttribute("data-density")).toBe("compact");
-      // LC-76: compact steps space, never the size axis — the painted height
-      // token must be exactly what a comfortable field resolves to.
-      expect(box.getAttribute("data-size")).toBe("$4");
+      expect(box.getAttribute("data-size-token")).toBe("$true");
+      expect(box.hasAttribute("data-density")).toBe(false);
     });
 
-    it("size ejects painted height and leaves density comfortable", () => {
+    it("size is Tamagui's own token and paints that height", () => {
       const result = renderWithProviders(<Input label="Name" name="n" 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");
+      expect(box.getAttribute("data-size-token")).toBe("$5");
+    });
+
+    it.each(["$2", "$3", "$4", "$5"] as const)(
+      "at %s the text renders at the recipe font size and the box at the recipe height and inset",
+      (size) => {
+        const recipe = sizeRecipeForToken(size);
+        const inset = textFieldInset(recipe);
+        const result = renderWithProviders(<Input label="Name" name="n" size={size} />);
+        const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+        const input = result.container.querySelector("input") as HTMLElement;
+        expect(getComputedStyle(input).fontSize).toBe(`${recipe.fontSize}px`);
+        expect(box.className).toContain(`_h-${recipe.height}px`);
+        expect(box.className).toContain(`_pl-${inset}px`);
+        expect(box.className).toContain(`_pr-${inset}px`);
+      },
+    );
+
+    it("a Surface-forwarded size reaches the text too", () => {
+      const recipe = sizeRecipeForToken("$3");
+      const result = renderWithProviders(
+        <Surface size="$3">
+          <Input label="Name" name="n" />
+        </Surface>,
+      );
+      const input = result.container.querySelector("input") as HTMLElement;
+      expect(getComputedStyle(input).fontSize).toBe(`${recipe.fontSize}px`);
     });
 
-    it("compact + size stay orthogonal", () => {
-      const result = renderWithProviders(<Input label="Name" name="n" compact size="$5" />);
+    it("a $5 request inside a $3 Surface clamps to $3", () => {
+      const result = renderWithProviders(
+        <Surface size="$3">
+          <Input label="Name" name="n" size="$5" />
+        </Surface>,
+      );
       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");
+      expect(box.getAttribute("data-size-token")).toBe("$3");
     });
   });
 
   describe("44px press floor", () => {
-    it("default painted box meets the 44px floor", () => {
+    it("default desktop box paints 40 and restores the press floor with slop", () => {
       const result = renderWithProviders(<Input label="Name" name="n" />);
       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");
+      expect(Number(box.getAttribute("data-visual-height"))).toBe(40);
+      expect(box.getAttribute("data-press-floor")).toBe("slop");
     });
 
     it("sub-44 sizes restore press via slop, not giant chrome", () => {
-      // MPO-13: $4 now paints 44 natively (compact keeps recipe height,
-      // LC-76), so the sub-floor path is proven with a genuinely small size.
       const result = renderWithProviders(<Input label="Name" name="n" size="$2" />);
       const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
       const visual = Number(box.getAttribute("data-visual-height"));
@@ -403,26 +427,28 @@ describe("Input", () => {
     });
 
     it("paints the size table's corner at medium, as Button does (MPO-23 L1)", () => {
-      const at = (size: "small" | "medium" | "large", borderRadius = "medium" as const) => {
+      const at = (size: "$3" | "$4" | "$5", borderRadius = "medium" as const) => {
         const result = renderWithProviders(
-          <Preset overrides={{ size, borderRadius }}>
-            <Input label="Name" name="n" />
+          <Preset overrides={{ borderRadius }}>
+            <Surface size={size}>
+              <Input label="Name" name="n" />
+            </Surface>
           </Preset>,
         );
         return radiusClasses(
           result.container.querySelector("[data-ring-target='box']") as HTMLElement,
         );
       };
-      expect(at("small")).toEqual(["_btlr-7px"]);
-      expect(at("medium")).toEqual(["_btlr-9px"]);
-      expect(at("large")).toEqual(["_btlr-10px"]);
+      expect(at("$3")).toEqual(["_btlr-6px"]);
+      expect(at("$4")).toEqual(["_btlr-8px"]);
+      expect(at("$5")).toEqual(["_btlr-9px"]);
     });
 
     it("an explicit size prop picks the corner too", () => {
       const result = renderWithProviders(<Input label="Name" name="n" size="$5" />);
       const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
-      expect(radiusClasses(box)).toEqual(["_btlr-10px"]);
-      expect(box.className).toContain("_h-52px");
+      expect(radiusClasses(box)).toEqual(["_btlr-9px"]);
+      expect(box.className).toContain("_h-48px");
     });
 
     it("focus ring offset is 0 (F1 / reference §10 / cover-offset-0)", () => {

package/src/fields/Input/Input.stories.tsx

@@ -20,7 +20,6 @@ const meta: Meta<typeof Input> = {
     error: { control: "text" },
     required: { control: "boolean" },
     disabled: { control: "boolean" },
-    compact: { control: "boolean" },
     chromeless: { control: "boolean" },
     labelHidden: { control: "boolean" },
     copy: { control: "boolean" },
@@ -105,24 +104,11 @@ export const WithError: Story = {
   },
 };
 
-/**
- * Density and size are orthogonal. Compact steps knob chrome; `size` ejects
- * the painted box height. Default density is comfortable (44px box).
- */
-export const Density: Story = {
-  render: () => (
-    <YStack gap="$4" maxWidth={400}>
-      <Input label="Comfortable" placeholder="Default density — 44px box" />
-      <Input compact label="Compact" placeholder="Density step, same size axis" />
-    </YStack>
-  ),
-};
-
 export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
-      <Input label="Default size" placeholder="sizeToken from knobs ($4 / 44px)" />
-      <Input size="$5" label="Size eject large" placeholder="Explicit size, comfortable density" />
+      <Input label="Default size" placeholder="Default $true (40px)" />
+      <Input size="$5" label="Size eject large" placeholder='size="$5" (48px)' />
     </YStack>
   ),
 };
@@ -213,7 +199,7 @@ export const Comparison: StoryObj = {
       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 Input
             </Paragraph>
@@ -227,7 +213,7 @@ export const Comparison: StoryObj = {
             />
           </YStack>
 
-          <YStack gap="$3" width={300}>
+          <YStack gap="$3" width={300} maxWidth="100%">
             <Paragraph size="$2" color="$placeholderColor">
               Tamagui Input
             </Paragraph>