@multiplatform.one/forms 7.34.3 → 7.35.0

package/src/errorTint.spec.tsx

@@ -16,7 +16,20 @@ import {
 import { configWithoutAnimations } from "@tamagui/config";
 import { animationsCSS } from "@tamagui/config/v5-css";
 import type { ReactElement } from "react";
-import { TamaguiProvider, createTamagui } from "tamagui";
+import { TamaguiProvider, createTamagui, setConfig } from "tamagui";
+import { Form } from "./Form";
+import { Barcode } from "./fields/Barcode";
+import { ColorPicker } from "./fields/ColorPicker";
+import {
+  DatePicker,
+  DateRangePicker,
+  DatetimePicker,
+  MonthPicker,
+  MultiDatePicker,
+} from "./fields/DatePicker";
+import { Icon } from "./fields/Icon";
+import { SearchInput } from "./fields/SearchInput";
+import { TimePicker } from "./fields/TimePicker";
 import { Duration } from "./fields/Duration";
 import { Input } from "./fields/Input";
 import { TextArea } from "./fields/TextArea";
@@ -56,6 +69,7 @@ describe("field error tint", () => {
     for (const scheme of ["light", "dark"] as const) {
       for (const [fieldName, field] of Object.entries(fields)) {
         it(`${fieldName} enters the error theme under the ${configName} config (${scheme})`, () => {
+          setConfig(config);
           const { container } = render(
             <TamaguiProvider config={config} defaultTheme={scheme} disableInjectCSS>
               {field}
@@ -68,3 +82,65 @@ describe("field error tint", () => {
     }
   }
 });
+
+const surfaceFields: Record<string, ReactElement> = {
+  ...fields,
+  Barcode: <Barcode name="barcode" label="Barcode" error="Invalid barcode" />,
+  ColorPicker: <ColorPicker name="color" label="Color" error="Pick a color" />,
+  "ColorPicker readOnly": <ColorPicker name="color" label="Color" readOnly error="Pick a color" />,
+  DatePicker: <DatePicker name="date" label="Date" error="Pick a date" />,
+  DateRangePicker: <DateRangePicker name="dates" label="Dates" error="Pick dates" />,
+  DatetimePicker: <DatetimePicker name="datetime" label="Date and time" error="Pick a date" />,
+  MonthPicker: <MonthPicker name="month" label="Month" error="Pick a month" />,
+  MultiDatePicker: <MultiDatePicker name="dates" label="Dates" error="Pick dates" />,
+  TimePicker: <TimePicker name="time" label="Time" error="Pick a time" />,
+  Icon: <Icon name="icon" label="Icon" error="Pick an icon" />,
+  SearchInput: <SearchInput name="query" label="Find" error="Too short" />,
+};
+
+describe("field error surface", () => {
+  for (const scheme of ["light", "dark"] as const) {
+    for (const integrated of [false, true]) {
+      for (const [fieldName, field] of Object.entries(surfaceFields)) {
+        it(`${fieldName} keeps the input surface (${scheme}, ${integrated ? "form" : "standalone"})`, () => {
+          setConfig(configs.full);
+          const { container } = render(
+            <TamaguiProvider config={configs.full} defaultTheme={scheme} disableInjectCSS>
+              {integrated ? <Form onSubmit={() => {}}>{field}</Form> : field}
+            </TamaguiProvider>,
+          );
+          const boxes = container.querySelectorAll("[data-mp-input-box]");
+          expect(boxes.length).toBeGreaterThan(0);
+          for (const box of boxes) {
+            expect(box.closest(".t_sub_theme")?.className).toContain("t_error_InputContainerFrame");
+          }
+        });
+      }
+    }
+  }
+});
+
+const entryFields: Record<string, [ReactElement, string, string]> = {
+  Input: [fields.Input, "input", "t_error_Input"],
+  TextArea: [fields.TextArea, "textarea", "t_error_TextArea"],
+};
+
+describe("field error entry ink", () => {
+  for (const scheme of ["light", "dark"] as const) {
+    for (const integrated of [false, true]) {
+      for (const [fieldName, [field, selector, theme]] of Object.entries(entryFields)) {
+        it(`${fieldName} keeps entered text in its neutral entry theme (${scheme}, ${integrated ? "form" : "standalone"})`, () => {
+          setConfig(configs.full);
+          const { container } = render(
+            <TamaguiProvider config={configs.full} defaultTheme={scheme} disableInjectCSS>
+              {integrated ? <Form onSubmit={() => {}}>{field}</Form> : field}
+            </TamaguiProvider>,
+          );
+          const entry = container.querySelector(selector);
+          expect(entry).not.toBeNull();
+          expect(entry?.closest(".t_sub_theme")?.className).toContain(theme);
+        });
+      }
+    }
+  }
+});

package/src/fieldFamilyStories.radius.spec.tsx

@@ -15,7 +15,7 @@
  * reference (`_btlr-t-radius-6`) rather than resolving to `16px`, so this file
  * gates the token ladder. At `medium` the Box paints the size table's corner
  * as a number (`_btlr-9px` at the default `$4`, MPO-23 L1), so that stop
- * reads the px atom. The pixel ladder (0/5/9/16/50) and the dark scheme are
+ * reads the px atom. The pixel ladder (0/4/8/14/44) and the dark scheme are
  * measured for real by scripts/knob-axis-probe.mjs against a browser.
  */
 
@@ -38,7 +38,7 @@ afterEach(cleanup);
 const ladder: Record<BorderRadius, string> = {
   none: "$0",
   small: "$2",
-  medium: "9px",
+  medium: "8px",
   large: "$6",
   full: "$12",
 };

package/src/fieldLayout.spec.tsx

@@ -1,6 +1,10 @@
+import { defaultConfig } from "@tamagui/config/v5";
+import { configWithoutAnimations } from "@tamagui/config";
+import { animationsCSS } from "@tamagui/config/v5-css";
+import { createTamagui, TamaguiProvider } from "tamagui";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
+import { Preset, Surface } from "@multiplatform.one/theme";
 import { Input as TamaguiInput } from "tamagui";
 import { FieldLayout, useFieldDescribedBy } from "./fieldLayout";
 import { __resetDevWarnSeen } from "./shared/devWarn";
@@ -11,6 +15,12 @@ function classIncludes(container: HTMLElement, fragment: string): boolean {
   );
 }
 
+const bodyConfig = createTamagui({
+  ...configWithoutAnimations,
+  animations: animationsCSS,
+  fonts: { ...configWithoutAnimations.fonts, body: defaultConfig.fonts.body },
+});
+
 describe("FieldLayout width-by-purpose", () => {
   it("applies maxWidth from purpose", () => {
     const { container } = renderWithProviders(
@@ -193,17 +203,11 @@ describe("FieldLayout message-before-control anatomy", () => {
     return <input id="ordered" aria-describedby={useFieldDescribedBy()} />;
   }
 
-  for (const mode of ["top", "side", "compact"] as const) {
+  for (const mode of ["top", "side"] as const) {
     it(`${mode}: helper and replacement error precede the control and describe only the rendered slot`, () => {
       const renderField = (error?: string) => (
         <Preset overrides={{ fieldLabelPlacement: mode === "side" ? "side" : "top" }}>
-          <FieldLayout
-            id="ordered"
-            label="Email"
-            compactSpacing={mode === "compact"}
-            helperText="Use your work address"
-            error={error}
-          >
+          <FieldLayout id="ordered" label="Email" helperText="Use your work address" error={error}>
             <Control />
           </FieldLayout>
         </Preset>
@@ -286,9 +290,9 @@ describe("FieldLayout design-law (MPO-60)", () => {
     expect(["", "0px", "auto"]).toContain(minH);
   });
 
-  it("side label row spreads the space recipe, not a raw $3", () => {
+  it("side label row spreads the within-group role, not a raw token", () => {
     const { container } = renderWithProviders(
-      <Preset overrides={{ space: "large", fieldLabelPlacement: "side" }}>
+      <Preset overrides={{ fieldLabelPlacement: "side" }}>
         <FieldLayout id="s" label="Name">
           <TamaguiInput id="s" />
         </FieldLayout>
@@ -296,6 +300,67 @@ describe("FieldLayout design-law (MPO-60)", () => {
     );
     const row = container.querySelector("[data-label-placement='side'][data-gap]");
     expect(row).toBeTruthy();
-    expect(row?.getAttribute("data-gap")).toBe("$5");
+    expect(row?.getAttribute("data-gap")).toBe("$3");
   });
+
+  it("label to control is the tight role floored at $2, at every size", () => {
+    for (const size of ["$2", "$3", "$5"] as const) {
+      const { container, unmount } = renderWithProviders(
+        <Surface size={size}>
+          <FieldLayout id="a" label="Name" helperText="Shown below the label">
+            <TamaguiInput id="a" />
+          </FieldLayout>
+        </Surface>,
+      );
+      const field = container.querySelector("[data-label-gap]");
+      expect(field?.getAttribute("data-label-gap"), size).toBe("$2");
+      expect(classIncludes(container, "_gap-t-space-2")).toBe(true);
+      // Helper placement unchanged: label, then helper, then the control.
+      const order = Array.from(field?.children ?? []).map((el) => el.tagName);
+      expect(order[0]).toBe("LABEL");
+      unmount();
+    }
+  });
+});
+
+describe("label body stop and weight knob", () => {
+  for (const [fontWeight, expected] of [
+    ["regular", "400"],
+    ["bold", "700"],
+  ] as const) {
+    it(`uses body $true and ${fontWeight} weight`, () => {
+      const { container } = renderWithProviders(
+        <TamaguiProvider config={bodyConfig} defaultTheme="light">
+          <Preset overrides={{ fontWeight }}>
+            <FieldLayout id="w" label="Name">
+              <TamaguiInput id="w" />
+            </FieldLayout>
+          </Preset>
+        </TamaguiProvider>,
+        { tamagui: false },
+      );
+      const label = container.querySelector("label")!;
+      expect(label.className).toContain("_fos-f-size-true");
+      expect(getComputedStyle(label).fontSize).toBe("15px");
+      expect(getComputedStyle(label).fontWeight).toBe(expected);
+    });
+  }
+});
+
+describe("helper text sits one body key under the control", () => {
+  for (const size of [undefined, "$true", "$4"] as const) {
+    it(`paints body $3 at ${size ?? "the default"} size`, () => {
+      const { container } = renderWithProviders(
+        <TamaguiProvider config={bodyConfig} defaultTheme="light">
+          <FieldLayout id="h" label="Name" helperText="Shown on your profile" size={size}>
+            <TamaguiInput id="h" />
+          </FieldLayout>
+        </TamaguiProvider>,
+        { tamagui: false },
+      );
+      const helper = container.querySelector("#h-description")!;
+      expect(helper.className).toContain("_fos-f-size-3");
+      expect(helper.className).not.toContain("_fos-f-size-1");
+    });
+  }
 });

package/src/fieldLayout.tsx

@@ -52,6 +52,7 @@ function getHelperTextSize(size?: SizeTokens): FontSizeTokens {
     $2: "$1",
     $3: "$2",
     $4: "$3",
+    $true: "$3",
     $5: "$4",
     $6: "$5",
     $7: "$6",
@@ -116,12 +117,6 @@ export interface FieldLayoutProps {
   size?: SizeTokens;
   knobProps?: KnobProps;
   onBlur?: (...args: any[]) => void;
-  /**
-   * Use compact spacing between field and helper/error text.
-   * Useful for inline-label fields (checkbox, switch) where the label
-   * is beside the control rather than above it.
-   */
-  compactSpacing?: boolean;
   /**
    * Semantic content purpose (DG-FORM-07). Drives default maxWidth in `ch`
    * via `FIELD_WIDTH_BY_PURPOSE`. Explicit `maxWidth` / `width` eject.
@@ -146,9 +141,27 @@ export interface FieldLayoutProps {
   maxWidth?: number | string;
   /** Eject: override purpose-derived width. */
   width?: number | string;
+  /**
+   * Size the field to its control instead of the column: a number with a
+   * unit reads as one short value, not a full-width bar.
+   */
+  hug?: boolean;
   children: ReactNode;
 }
 
+/** Label-to-control floor: the tight role never drops below `$2`. */
+const LABEL_TO_CONTROL_FLOOR = "$2";
+
+/**
+ * The larger of two `$space` keys by their step (`$1.5` < `$2`). A key that
+ * is not a `$n` step is kept as given.
+ */
+function floorSpaceToken(token: string, floor: string): string {
+  const step = (key: string) => Number(key.replace(/^\$/, ""));
+  const value = step(token);
+  return Number.isFinite(value) && value < step(floor) ? floor : token;
+}
+
 export function FieldLayout({
   id,
   label,
@@ -162,13 +175,13 @@ export function FieldLayout({
   size,
   knobProps: knobPropsProp,
   onBlur,
-  compactSpacing,
   purpose,
   autoComplete,
   placeholder,
   "aria-label": ariaLabel,
   maxWidth,
   width,
+  hug = false,
   children,
 }: FieldLayoutProps) {
   const { knobProps: resolvedKnobs, disabledState } = useResolvedKnobs();
@@ -190,7 +203,7 @@ export function FieldLayout({
   const dimWhole = Boolean(_disabled) && disabledStyle === "dimWhole";
   const keepLabelReadable = Boolean(_disabled) && disabledStyle !== "dimWhole";
   const labelPlacement = knobProps.fieldLabelPlacement ?? "top";
-  const sideLabel = labelPlacement === "side" && Boolean(label) && !compactSpacing;
+  const sideLabel = labelPlacement === "side" && Boolean(label);
 
   warnPlaceholderAsLabel({
     placeholder,
@@ -203,9 +216,10 @@ export function FieldLayout({
     warnBannedErrorWords(errorMessage, { component: "FieldLayout", id });
   }
 
-  // Use compact gap for inline-label fields (checkbox, switch) or when explicitly requested
-  const useCompact = compactSpacing || !label;
-  const gapProps = useCompact ? { gap: "$1" } : knobProps.gap;
+  // Label to control, control to helper/error: the tight role (A9) floored at
+  // `$2`, so a label sits with its control but never touches it; fields read
+  // apart at the `gap` role (the form's rhythm). Helper/error placement stays.
+  const gapProps = { gap: floorSpaceToken(knobProps.gapSm.gap, LABEL_TO_CONTROL_FLOOR) };
 
   // Purpose / autocomplete → default width; explicit maxWidth/width win.
   const purposeWidth =
@@ -216,6 +230,7 @@ export function FieldLayout({
     ...purposeWidth,
     ...(maxWidth !== undefined ? { maxWidth } : {}),
     ...(width !== undefined ? { width } : {}),
+    ...(hug ? { alignSelf: "flex-start" as const, maxWidth: maxWidth ?? "100%" } : {}),
   };
 
   const describedBy = id
@@ -247,7 +262,7 @@ export function FieldLayout({
   // with the token twice and an accessible name spoken twice ("Birth Date
   // Birth Date"). Controls carry the field `id` and an `aria-label` fallback
   // for the label-less case; they must not name themselves when a Label exists.
-  // House Label owns T-LABEL / R7 (weight 400) and must not receive a
+  // House Label owns T-LABEL and the fontWeight knob and must not receive a
   // control-height sizeToken (LC-73). Required mark is applied once here
   // via the house `required` prop — do not also suffix children.
   const labelNode = label ? (
@@ -257,7 +272,6 @@ export function FieldLayout({
       required={required}
       requiredMarking={requiredMarkingProp}
       error={hasErrorState}
-      fontWeight="400"
       flexShrink={sideLabel ? 0 : undefined}
       {...labelProps}
     >
@@ -315,6 +329,8 @@ export function FieldLayout({
           data-disabled-style={disabledStyle}
           data-disabled-dimmed={dimWhole ? "true" : "false"}
           data-label-placement={sideLabel ? "side" : "top"}
+          data-label-gap={String(gapProps.gap)}
+          data-field-hug={hug ? "true" : undefined}
         >
           {sideLabel ? (
             <XStack

package/src/fields/Barcode/BarcodeScanner.native.tsx

@@ -53,10 +53,9 @@ export function BarcodeScanner({
   onClose,
   knobProps,
   formats,
-  compact,
 }: BarcodeScannerProps) {
   const barcodeTypes = resolveNativeBarcodeTypes(formats);
-  const viewportPx = scannerViewportHeight(compact);
+  const viewportPx = scannerViewportHeight(knobProps.sizeToken);
   const [permission, requestPermission] = useCameraPermissions();
   const handledRef = useRef(false);
   const [denied, setDenied] = useState(false);

package/src/fields/Barcode/BarcodeScanner.tsx

@@ -87,14 +87,13 @@ export function BarcodeScanner({
   onClose,
   knobProps,
   formats,
-  compact,
 }: BarcodeScannerProps) {
   const scannerRef = useRef<Html5QrcodeScanner | null>(null);
   const containerId = useRef(`barcode-scanner-${Math.random().toString(36).slice(2, 9)}`);
   const [attempt, setAttempt] = useState(0);
   const [status, setStatus] = useState<"starting" | "streaming" | "error">("starting");
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const viewportPx = scannerViewportHeight(compact);
+  const viewportPx = scannerViewportHeight(knobProps.sizeToken);
   const formatKey = formats?.join(",") ?? "";
 
   useEffect(() => {

package/src/fields/Barcode/index.tsx

@@ -1,4 +1,4 @@
-import { ensureFocusVisibleRing, type KnobProps } from "@multiplatform.one/theme";
+import { ensureFocusVisibleRing, sizeTokenStep, type KnobProps } from "@multiplatform.one/theme";
 import { BarcodeIcon, CameraIcon, XIcon } from "@phosphor-icons/react";
 import type { ReactNode } from "react";
 import { useRef, useState } from "react";
@@ -29,7 +29,6 @@ function BarcodeInput({
   readOnly,
   enableScan,
   formats,
-  compact,
   knobProps,
   barcodeIcon,
   scanIcon,
@@ -45,7 +44,6 @@ function BarcodeInput({
   readOnly: boolean;
   enableScan: boolean;
   formats?: string[];
-  compact?: boolean;
   knobProps: KnobProps;
   barcodeIcon?: ReactNode;
   scanIcon?: ReactNode;
@@ -95,15 +93,11 @@ function BarcodeInput({
 
   return (
     <>
-      <InputParts size={knobProps.sizeToken}>
+      <InputParts size={knobProps.sizeToken} {...(hasError ? { theme: "error" } : undefined)}>
         {/* LC-71: Scan (and Clear) live inside Input.Box so the composite ring
             wraps the whole perceived control — never a sibling house Button
             that the inner-Area ring would leave outside. */}
-        <InputParts.Box
-          testID="barcode-field"
-          disabled={disabled}
-          theme={hasError ? "error" : undefined}
-        >
+        <InputParts.Box testID="barcode-field" disabled={disabled}>
           {barcodeIcon ? (
             <InputParts.Icon adornment="leading">{barcodeIcon}</InputParts.Icon>
           ) : null}
@@ -174,7 +168,7 @@ function BarcodeInput({
           // through the same alias table, so draw and decode stay in lockstep.
           <BarcodePreview
             value={value}
-            height={compact ? 24 : 36}
+            height={sizeTokenStep(knobProps.sizeToken) < 0 ? 24 : 36}
             moduleWidth={1}
             format={formats?.[0]}
           />
@@ -187,7 +181,6 @@ function BarcodeInput({
         onClose={() => setIsScanning(false)}
         knobProps={knobProps}
         formats={formats}
-        compact={compact}
       />
       {scanError && (
         <Text {...knobProps.body} color={formCommonColors.error} fontSize="$2">
@@ -232,8 +225,6 @@ export interface BarcodeProps {
   stopIcon?: ReactNode;
   /** When true, renders a skeleton placeholder instead of the barcode field */
   skeleton?: boolean;
-  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-  compact?: boolean;
 }
 
 // Package icon defaults (UX-010): React elements are immutable descriptors,
@@ -266,12 +257,10 @@ export function Barcode({
   scanIcon = defaultScanIcon,
   stopIcon = defaultStopIcon,
   skeleton,
-  compact,
 }: BarcodeProps) {
   const { resolvedForm, knobProps, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const isControlled = value !== undefined;
@@ -318,7 +307,6 @@ export function Barcode({
           readOnly={!!readOnly}
           enableScan={enableScan}
           formats={formats}
-          compact={compact}
           knobProps={knobProps}
           required={required}
           hasError={!!error}
@@ -364,7 +352,6 @@ export function Barcode({
               readOnly={!!readOnly}
               enableScan={enableScan}
               formats={formats}
-              compact={compact}
               knobProps={knobProps}
               required={required}
               hasError={!!resolvedError}

package/src/fields/Barcode/scannerTypes.ts

@@ -1,3 +1,4 @@
+import { sizeTokenStep } from "@multiplatform.one/theme";
 import type { KnobProps } from "@multiplatform.one/theme";
 import type { CapabilityPreflightResult } from "../../shared/capabilityPreflight";
 
@@ -17,8 +18,6 @@ export interface BarcodeScannerProps {
   knobProps: KnobProps;
   /** Restrict the decoder to these symbologies. Omit / empty = all supported. */
   formats?: string[];
-  /** Compact density — shorter scanner viewport (LC-10 / LC-73). */
-  compact?: boolean;
 }
 
 /**
@@ -107,7 +106,10 @@ const HTML5_FORMAT_ALIASES: Record<string, string> = {
 };
 
 function normalizeFormatToken(value: string): string {
-  return value.trim().toLowerCase().replace(/[\s-]+/g, "_");
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/[\s-]+/g, "_");
 }
 
 /**
@@ -162,7 +164,7 @@ export function resolveHtml5FormatIds(
   return ids.length ? ids : undefined;
 }
 
-/** Contained scanner viewport height (LC-10). Compact steps down (LC-73). */
-export function scannerViewportHeight(compact?: boolean): number {
-  return compact ? 180 : 240;
+/** Contained scanner viewport height (LC-10). Below the default size token it steps down. */
+export function scannerViewportHeight(sizeToken: string): number {
+  return sizeTokenStep(sizeToken) < 0 ? 180 : 240;
 }

package/src/fields/Checkbox/Checkbox.stories.tsx

@@ -21,7 +21,6 @@ const meta: Meta<typeof Checkbox> = {
     disabled: { control: "boolean" },
     readOnly: { control: "boolean" },
     skeleton: { control: "boolean" },
-    compact: { control: "boolean" },
     pointy: { control: "boolean" },
     size: { control: "select", options: ["$2", "$3", "$4"] },
     checked: { control: "boolean" },
@@ -107,7 +106,7 @@ export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
       <Checkbox label="Small" size="$2" />
-      <Checkbox label="Medium (default)" size="$3" />
+      <Checkbox label="Medium ($3)" size="$3" />
       <Checkbox label="Large" size="$4" />
     </YStack>
   ),

package/src/fields/Checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
 import { CheckIcon as CheckRegular, MinusIcon as MinusRegular } from "@phosphor-icons/react";
-import { transitionProps, useReadableTextOn } from "@multiplatform.one/theme";
+import { sizeTokenStep, transitionProps, useReadableTextOn } from "@multiplatform.one/theme";
 import type { AnyFormApi } from "../../types";
 import type { ReactNode } from "react";
 import { useMemo, useState } from "react";
@@ -72,23 +72,17 @@ export interface CheckboxProps {
   pointy?: boolean;
   /** When true, renders a skeleton placeholder instead of the checkbox */
   skeleton?: boolean;
-  /** When true, uses compact sizing */
-  compact?: boolean;
 }
 
 /**
- * Gap between the checkbox control and its label, by space knob.
- * Shared with the skeleton branches so loading geometry mirrors the
- * real anatomy (LC-20 SKELETON-MIRRORS-ANATOMY).
+ * Gap between the checkbox control and its label at a size token: `$2` at
+ * the default control size, a half key either side. Shared with the
+ * skeleton branches so loading geometry mirrors the real anatomy (LC-20
+ * SKELETON-MIRRORS-ANATOMY).
  */
-export function getCheckboxInlineGap(space: string): string {
-  const inlineGapMap: Record<string, string> = {
-    none: "$1",
-    small: "$1.5",
-    medium: "$2",
-    large: "$2.5",
-  };
-  return inlineGapMap[space] || "$2";
+export function getCheckboxInlineGap(sizeToken: string): string {
+  const step = sizeTokenStep(sizeToken);
+  return step < 0 ? "$1.5" : step > 0 ? "$2.5" : "$2";
 }
 
 export function Checkbox({
@@ -113,7 +107,6 @@ export function Checkbox({
   children,
   pointy,
   skeleton,
-  compact,
 }: CheckboxProps) {
   // Canonical `onChange` and the alias `onCheckedChange` both fire from a
   // single emit site (same reconciliation as Switch).
@@ -124,7 +117,6 @@ export function Checkbox({
   const { resolvedForm, knobProps, text, elevation, disabledState, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name, (v) => !v);
   const resolvedPointy = pointy ?? knobProps.pointy;
@@ -143,7 +135,7 @@ export function Checkbox({
     cappedRadius === 0
       ? { borderWidth: knobProps.borderRadius.borderWidth, borderRadius: 0 }
       : { borderWidth: knobProps.borderRadius.borderWidth, borderRadius: cappedRadius };
-  const inlineGap = getCheckboxInlineGap(knobProps.space);
+  const inlineGap = getCheckboxInlineGap(knobProps.sizeToken);
   const baseLabelColor = error ? formCommonColors.error : knobProps.textAccentColor;
   const labelHoverStyle = { color: baseLabelColor, ...text.hoverKnobProps };
   const labelPressStyle = { color: baseLabelColor, ...text.pressKnobProps };
@@ -186,7 +178,7 @@ export function Checkbox({
         // Same native-responder steal as CheckboxGlyphBox — Indicator/SVG
         // must not claim the press that belongs to the 44px frame.
         pointerEvents="none"
-        {...transitionProps(knobProps.transition)}
+        {...transitionProps(knobProps.motion.control)}
       >
         {currentChecked === "indeterminate" ? (
           <MinusRegular
@@ -232,7 +224,7 @@ export function Checkbox({
         hovered={hovered}
         borderWidth={boxBorderWidth}
         borderRadius={resolvedRadius.borderRadius ?? 0}
-        transition={knobProps.transition}
+        {...transitionProps(knobProps.motion.control)}
       >
         {renderIndicator(currentChecked, iconSize)}
       </CheckboxGlyphBox>
@@ -274,7 +266,7 @@ export function Checkbox({
     // radius the real box uses, the same box↔label gap — and the 44px
     // pressable target box around the 20px glyph (same as RadioGroup).
     return (
-      <FieldLayout id={id} size={size} knobProps={knobProps} compactSpacing>
+      <FieldLayout id={id} size={size} knobProps={knobProps}>
         <XStack gap={inlineGap} alignItems="center">
           <View width={targetSize} height={targetSize} alignItems="center" justifyContent="center">
             <Skeleton
@@ -297,7 +289,7 @@ export function Checkbox({
     const checkboxEl = (
       <CheckboxFieldFrame
         size={resolvedSize as SizeTokens}
-        transition={knobProps.transition}
+        {...transitionProps(knobProps.motion.control)}
         {...checkboxProps}
         {...checkboxTargetFrameProps}
         {...checkboxKbFocusHandlers(setKbFocus, setHovered, {
@@ -438,7 +430,7 @@ export function Checkbox({
                 const checkboxElement = (
                   <CheckboxFieldFrame
                     size={resolvedSize as SizeTokens}
-                    transition={knobProps.transition}
+                    {...transitionProps(knobProps.motion.control)}
                     {...checkboxProps}
                     {...checkboxTargetFrameProps}
                     {...checkboxKbFocusHandlers(setKbFocus, setHovered, {