@multiplatform.one/forms 7.34.4 → 7.36.0

package/src/fields/Checkbox/CheckboxGroup.tsx

@@ -65,8 +65,6 @@ export interface CheckboxGroupProps {
   checkboxProps?: Omit<TamaguiCheckboxProps, "checked" | "id" | "onCheckedChange" | "children">;
   children?: ReactNode;
   skeleton?: boolean;
-  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-  compact?: boolean;
   /**
    * When true, renders each option as a selection card (LC-22): checkbox in a
    * leading slot, bold label to its right, muted `option.description` under
@@ -98,7 +96,6 @@ export function CheckboxGroup({
   checkboxProps,
   children,
   skeleton,
-  compact,
   card,
 }: CheckboxGroupProps) {
   // Canonical `onChange` and the alias `onValueChange` both fire from the
@@ -110,7 +107,6 @@ export function CheckboxGroup({
   const { resolvedForm, knobProps, disabledState, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   // Uncontrolled state for standalone use (no form, no value prop) — without
@@ -128,7 +124,7 @@ export function CheckboxGroup({
     // next item's square.
     const optionCount = options?.length ?? 3;
     const Container = orientation === "horizontal" ? XStack : YStack;
-    const inlineGap = getCheckboxInlineGap(knobProps.space);
+    const inlineGap = getCheckboxInlineGap(knobProps.sizeToken);
     const controlRadius = clampCheckboxGlyphRadius(knobProps.borderRadius.borderRadius, {
       pointy: knobProps.pointy,
     });
@@ -180,7 +176,7 @@ export function CheckboxGroup({
     const Container = orientation === "horizontal" ? XStack : YStack;
 
     if (card) {
-      const layout = getCheckboxCardLayout(knobProps.space);
+      const layout = getCheckboxCardLayout(knobProps.sizeToken);
       const descriptionSize = getCardDescriptionSize(size || knobProps.sizeToken);
       return (
         <Container gap="$2">
@@ -230,12 +226,9 @@ export function CheckboxGroup({
                   }}
                 />
                 <CheckboxCardContent>
-                  {/* fontWeight after size: the size variant's font weight
-                      would otherwise override the styled bold default */}
                   <CheckboxCardLabel
                     id={labelId}
                     size={(size || knobProps.sizeToken) as FontSizeTokens}
-                    fontWeight="600"
                   >
                     {option.label}
                   </CheckboxCardLabel>

package/src/fields/Checkbox/index.tsx

@@ -1,3 +1,4 @@
+import { transitionProps } from "@multiplatform.one/theme";
 import type { RovingFocusGroupProps, RovingFocusItemProps } from "@tamagui/roving-focus";
 import { RovingFocusGroup } from "@tamagui/roving-focus";
 import { CheckIcon as CheckRegular } from "@phosphor-icons/react";
@@ -165,7 +166,7 @@ const CheckboxesCheckbox = TamaguiCheckbox.styleable((checkboxProps, ref) => {
       ref={ref}
       value={focusItemValue}
       size={knobProps.sizeToken}
-      transition={knobProps.transition}
+      {...transitionProps(knobProps.motion.control)}
       {...combinedProps}
       {...checkboxTargetFrameProps}
       {...checkboxKbFocusHandlers(setKbFocus, setHovered, {
@@ -181,7 +182,7 @@ const CheckboxesCheckbox = TamaguiCheckbox.styleable((checkboxProps, ref) => {
         hovered={hovered}
         borderWidth={boxBorderWidth}
         borderRadius={cappedRadius === 0 ? 0 : cappedRadius}
-        transition={knobProps.transition}
+        {...transitionProps(knobProps.motion.control)}
       >
         {children}
       </CheckboxGlyphBox>
@@ -195,7 +196,7 @@ const CheckboxCard = CheckboxCardFrame.styleable<{ unstyled?: boolean; active?:
     const { value } = FocusItemContext.useStyledContext();
     const { knobProps } = useResolvedKnobs();
     const selected = values[value];
-    const layout = getCheckboxCardLayout(knobProps.space);
+    const layout = getCheckboxCardLayout(knobProps.sizeToken);
 
     return (
       <CheckboxCardFrame

package/src/fields/ColorPicker/ColorPicker.stories.tsx

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

package/src/fields/ColorPicker/index.tsx

@@ -1,6 +1,11 @@
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import { Pipette } from "@tamagui/lucide-icons-2";
-import { useResolvedKnobs, useChartPalette, normalizeToHex } from "@multiplatform.one/theme";
+import {
+  normalizeToHex,
+  sizeTokenStop,
+  useChartPalette,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import { type ComponentProps, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { type Popover, View, XStack, YStack, isWeb, useProps, useTheme } from "tamagui";
 import { Button } from "../../Button";
@@ -78,8 +83,6 @@ export type ColorPickerProps<
     onValueChange?: (value: string) => void;
     /** When true, renders a skeleton placeholder instead of the color picker */
     skeleton?: boolean;
-    /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-    compact?: boolean;
   };
 
 // ---------------------------------------------------------------------------
@@ -322,9 +325,9 @@ function ColorBody({
   onHexInput,
   onSelectPreset,
 }: ColorBodyProps) {
-  const { knobProps } = useResolvedKnobs({ compact: true });
-  const panelSize = panelSizeMap[knobProps.size] ?? 192;
-  const previewSize = SWATCH_PX[knobProps.size] ?? 24;
+  const { knobProps } = useResolvedKnobs();
+  const panelSize = panelSizeMap[sizeTokenStop(knobProps.sizeToken)] ?? 192;
+  const previewSize = SWATCH_PX[sizeTokenStop(knobProps.sizeToken)] ?? 24;
   const [hexInputValue, setHexInputValue] = useState(selectedColor);
   const [hexEditing, setHexEditing] = useState(false);
   useEffect(() => {
@@ -428,7 +431,7 @@ function ColorBody({
           <Button
             size={knobProps.sizeToken}
             chromeless
-            icon={<Pipette size={CHIP_PX[knobProps.size] ?? 18} />}
+            icon={<Pipette size={CHIP_PX[sizeTokenStop(knobProps.sizeToken)] ?? 18} />}
             onPress={handleEyeDropper}
             cursor="pointer"
             aria-label={t("Eyedropper")}
@@ -597,12 +600,15 @@ function ColorPickerControl({
   if (readOnly) {
     const displayValue = value || selectedColor || placeholder;
     return (
-      <InputParts.Box theme={hasError ? "error" : undefined}>
+      <InputParts.Box>
         <View paddingInlineStart="$2" alignSelf="center">
           <View
-            width={CHIP_PX[knobProps.size] ?? 18}
-            height={CHIP_PX[knobProps.size] ?? 18}
-            borderRadius={binaryRadius(knobProps.pointy, CHIP_PX[knobProps.size] ?? 18)}
+            width={CHIP_PX[sizeTokenStop(knobProps.sizeToken)] ?? 18}
+            height={CHIP_PX[sizeTokenStop(knobProps.sizeToken)] ?? 18}
+            borderRadius={binaryRadius(
+              knobProps.pointy,
+              CHIP_PX[sizeTokenStop(knobProps.sizeToken)] ?? 18,
+            )}
             borderWidth={1}
             borderColor="$color10"
             backgroundColor={displayValue || "transparent"}
@@ -710,7 +716,6 @@ export function ColorPicker<
     onChange,
     onValueChange,
     skeleton,
-    compact,
     id: idProp,
   } = useProps(props);
 
@@ -727,7 +732,7 @@ export function ColorPicker<
     [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)) || "",
@@ -793,7 +798,10 @@ export function ColorPicker<
         // the sibling label/helper readable) — it needs the disabled state.
         disabled={disabled}
       >
-        <InputParts size={size || knobProps.sizeToken}>
+        <InputParts
+          size={size || knobProps.sizeToken}
+          {...(errorProp || standaloneFormatError ? { theme: "error" } : undefined)}
+        >
           <ColorPickerControl
             value={effectiveValue}
             format={_format}
@@ -847,7 +855,10 @@ export function ColorPicker<
             // LC-40: see standalone branch — FieldLayout carries dimWhole.
             disabled={disabled}
           >
-            <InputParts size={size || knobProps.sizeToken}>
+            <InputParts
+              size={size || knobProps.sizeToken}
+              {...(resolvedError || fieldFormatError ? { theme: "error" } : undefined)}
+            >
               <ColorPickerControl
                 value={fieldValue}
                 format={_format}

package/src/fields/ColorPicker/parts.tsx

@@ -2,6 +2,7 @@ import { Check, Palette, X } from "@tamagui/lucide-icons-2";
 import {
   ensureFocusVisibleRing,
   keyboardFocusRingProps,
+  sizeTokenStop,
   useReadableTextOn,
   useResolvedKnobs,
   wasKeyboardFocus,
@@ -361,7 +362,7 @@ function ColorRail({
   testID: string;
   children: ReactNode;
 }) {
-  const { knobProps } = useResolvedKnobs({ compact: true });
+  const { knobProps } = useResolvedKnobs();
   const railRef = useRef<Measurable | null>(null);
   const vertical = orientation === "vertical";
   const handleSize = HANDLE_SIZE;
@@ -485,7 +486,7 @@ export function SaturationPanel({
   onChangeSV,
   size = 192,
 }: SaturationPanelProps) {
-  const { knobProps } = useResolvedKnobs({ compact: true });
+  const { knobProps } = useResolvedKnobs();
   const panelRef = useRef<Measurable | null>(null);
   const handleSize = HANDLE_SIZE;
   const pointy = knobProps.pointy;
@@ -790,7 +791,7 @@ export function PresetSwatches({
   onSelect,
   width,
 }: PresetSwatchesProps) {
-  const { knobProps } = useResolvedKnobs({ compact: true });
+  const { knobProps } = useResolvedKnobs();
   const [focusIndex, setFocusIndex] = useState(0);
   const entries = useMemo(() => {
     if (!Array.isArray(presetColors)) return [];
@@ -799,7 +800,7 @@ export function PresetSwatches({
 
   if (entries.length === 0) return null;
 
-  const swatchSize = SWATCH_PX[knobProps.size] ?? 24;
+  const swatchSize = SWATCH_PX[sizeTokenStop(knobProps.sizeToken)] ?? 24;
   const gapPx = knobProps.control.gap;
   const cols = Math.max(1, width ? Math.floor((width + gapPx) / (swatchSize + gapPx)) : 8);
 
@@ -915,7 +916,7 @@ export const ColorPickerInputTrigger = InputParts.Area.styleable<ColorPickerInpu
       "aria-required": ariaRequired,
       "aria-invalid": ariaInvalid,
     } = props;
-    const chip = CHIP_PX[knobProps.size] ?? 18;
+    const chip = CHIP_PX[sizeTokenStop(knobProps.sizeToken)] ?? 18;
     const chipRadius = binaryRadius(knobProps.pointy, chip);
     return (
       <View ref={ref}>
@@ -924,11 +925,9 @@ export const ColorPickerInputTrigger = InputParts.Area.styleable<ColorPickerInpu
           // Native: FloatingPanel owns open — a second onPress double-toggles closed.
           onPress={isWeb && !disabled ? onButtonPress : undefined}
           size={knobProps.sizeToken}
+          {...(error ? { theme: "error" } : undefined)}
         >
-          <InputParts.Box
-            theme={error ? "error" : undefined}
-            {...(disabled ? { opacity: 0.5, pointerEvents: "none" } : undefined)}
-          >
+          <InputParts.Box {...(disabled ? { opacity: 0.5, pointerEvents: "none" } : undefined)}>
             <InputParts.Icon adornment="leading">
               <View
                 testID="color-picker-trigger-swatch"

package/src/fields/Combobox/Combobox.spec.tsx

@@ -1,3 +1,4 @@
+import { defaultKnobs, resolveKnobs, pressTargetHitSlop } from "@multiplatform.one/theme";
 import { act, fireEvent, within } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
@@ -190,17 +191,31 @@ describe("Combobox", () => {
     });
 
     it("clearable trigger clears the value through canonical onChange", async () => {
-      const onChange = vi.fn();
-      const result = renderWithProviders(
-        <Combobox label="Fruit" options={options} value="apple" clearable onChange={onChange} />,
-      );
-      const clear = result.baseElement.querySelector('[aria-label="Clear"]');
-      expect(clear).toBeTruthy();
-      await act(async () => {
-        if (clear) fireEvent.click(clear);
-      });
-      expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledWith("");
+      const previousWidth = window.innerWidth;
+      window.innerWidth = 390;
+      try {
+        const onChange = vi.fn();
+        const result = renderWithProviders(
+          <Combobox label="Fruit" options={options} value="apple" clearable onChange={onChange} />,
+        );
+        const clear = result.baseElement.querySelector('[aria-label="Clear"]');
+        expect(clear).toBeTruthy();
+        const height = resolveKnobs(defaultKnobs).knobProps.control.height;
+        const style = getComputedStyle(clear!);
+        expect(style.height).toBe(`${height}px`);
+        expect(style.width).toBe(`${height}px`);
+        expect(Number.parseFloat(style.minHeight) || 0).toBeLessThanOrEqual(height);
+        const slop = pressTargetHitSlop(height).top;
+        expect(clear!.getAttribute("data-mp-press-slop")).toBe(slop > 0 ? String(slop) : null);
+        await act(async () => {
+          if (clear) fireEvent.click(clear);
+        });
+        expect(onChange).toHaveBeenCalledTimes(1);
+        expect(onChange).toHaveBeenCalledWith("");
+        result.unmount();
+      } finally {
+        window.innerWidth = previousWidth;
+      }
     });
 
     it("renders option descriptions in the open dropdown", async () => {

package/src/fields/Combobox/Combobox.stories.tsx

@@ -234,12 +234,7 @@ export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
       <Combobox label="Small" size="$2" options={authorOptions} placeholder="Select..." />
-      <Combobox
-        label="Medium (default)"
-        size="$3"
-        options={authorOptions}
-        placeholder="Select..."
-      />
+      <Combobox label="Medium ($3)" size="$3" options={authorOptions} placeholder="Select..." />
       <Combobox label="Large" size="$4" options={authorOptions} placeholder="Select..." />
     </YStack>
   ),

package/src/fields/Combobox/index.tsx

@@ -62,7 +62,6 @@ const scrollArrowBuffer = 28;
 import {
   FloatingPanel,
   useFloatingPanel,
-  panelTransition,
   panelViewportPadding,
   useViewportGtSm,
 } from "../../FloatingPanel";
@@ -115,13 +114,13 @@ function listItemRingProps(keyboardRing: boolean) {
 /**
  * Resolve the LC-05 selected-mark token to a real paint (MPO-63).
  *
- * MPO-65 put `formSelectedColors.mark` ("$accentBackground") on the tick, but a
+ * MPO-65 put `formSelectedColors.mark` (the accent solid) on the tick, but a
  * phosphor glyph is NOT a Tamagui styled component: its IconBase writes the
- * prop straight into `<svg fill>`. On web "$accentBackground" is not a valid
+ * prop straight into `<svg fill>`. On web a `$token` string is not a valid
  * paint, so the declaration is dropped and `fill` falls back to its initial
  * value — an opaque BLACK tick, measured 1.19:1 against the `$color2` selected
  * row. On native the shim can only resolve a token the theme in scope actually
- * carries, and the component sub-themes carry no `accentBackground` at all.
+ * carries, and the component sub-themes carry no accent solid at all.
  * Resolve it here, where the value becomes a paint — the same shape as
  * `mutedColor` for the search glyph. Keyed off the ramp constant so the token
  * stays declared once in colorRamps, and degrading to `$color` ink rather than
@@ -221,8 +220,6 @@ export interface ComboboxProps {
   dismissible?: boolean;
   /** When true, renders a skeleton placeholder instead of the combobox */
   skeleton?: boolean;
-  /** When true, uses compact sizing */
-  compact?: boolean;
   /** Allow creating new options when search doesn't match existing options */
   creatable?: boolean;
   /**
@@ -406,7 +403,7 @@ const ComboboxItem = memo(function ComboboxItem({
         ? // Two-line rows need to grow past the size-variant height.
           { height: "auto", paddingVertical: "$2" }
         : undefined)}
-      {...transitionProps(ctx.knobProps.transition)}
+      {...transitionProps(ctx.knobProps.motion.control)}
     >
       {option.description ? (
         <YStack flex={1} minWidth={0}>
@@ -516,6 +513,7 @@ function FloatingComboboxCore({
   open: openProp,
   onOpenChange,
 }: FloatingComboboxCoreProps) {
+  const { style: elevatedSurfaceStyle, ...elevatedSurfaceProps } = knobProps.elevatedSurface;
   const hydrationTouch = useTouchSurface();
   if (isWeb) ensureKeyboardModalityTracking();
   const { t } = useTranslation();
@@ -812,7 +810,7 @@ function FloatingComboboxCore({
         if (listScrollRef.current) listScrollRef.current.scrollTop = 0;
 
         void dropdownElement.offsetHeight;
-        if (suppressTransition) dropdownElement.style.transition = panelTransition;
+        if (suppressTransition) dropdownElement.style.transition = panel.panelTransition;
         requestAnimationFrame(() => {
           if (listScrollRef.current) {
             panel.updateArrows(listScrollRef.current);
@@ -908,7 +906,7 @@ function FloatingComboboxCore({
       }
 
       void dropdownElement.offsetHeight;
-      if (suppressTransition) dropdownElement.style.transition = panelTransition;
+      if (suppressTransition) dropdownElement.style.transition = panel.panelTransition;
       requestAnimationFrame(() => {
         if (listScrollRef.current) {
           panel.updateArrows(listScrollRef.current);
@@ -918,7 +916,7 @@ function FloatingComboboxCore({
         }
       });
     },
-    [panel.placement, panel.updateArrows, popoverWidth, panel.refs],
+    [panel.placement, panel.updateArrows, popoverWidth, panel.refs, panel.panelTransition],
   );
 
   repositionRef.current = () => repositionOverlay("wheel");
@@ -1506,18 +1504,16 @@ function FloatingComboboxCore({
                   overflow: "hidden",
                   display: "flex",
                   flexDirection: "column",
-                  boxShadow: "0px 8px 28px rgba(0,0,0,0.12), 0px 2px 6px rgba(0,0,0,0.04)",
+                  ...elevatedSurfaceStyle,
                   opacity: panel.visible ? 1 : 0,
                   transform: panel.visible ? "scale(1)" : "scale(0.96)",
-                  transition: panelTransition,
+                  transition: panel.panelTransition,
                   transformOrigin: panel.placement.startsWith("top") ? "bottom left" : "top left",
                   boxSizing: "border-box",
                 } as any
               }
-              backgroundColor="$background"
+              {...elevatedSurfaceProps}
               borderRadius={panel.dropdownRadius}
-              borderWidth={panel.hasBorder ? knobProps.borderRadius.borderWidth : 0}
-              borderColor={panel.hasBorder ? formInputColors.border.focus : "transparent"}
               data-testid="combobox-dropdown"
             >
               {!hideSearch && (
@@ -1649,7 +1645,7 @@ function FloatingComboboxCore({
                             : undefined
                         }
                         onPress={handleCreate}
-                        {...transitionProps(knobProps.transition)}
+                        {...transitionProps(knobProps.motion.control)}
                       >
                         <PlusIcon size={14} color={knobProps.textAccentColor} />
                         <Text
@@ -1692,7 +1688,7 @@ function FloatingComboboxCore({
                         : "transparent"
                     }
                     pressStyle={{ backgroundColor: formInputColors.background.focus }}
-                    {...transitionProps(knobProps.transition)}
+                    {...transitionProps(knobProps.motion.control)}
                   >
                     <PlusIcon size={14} color={knobProps.textAccentColor} />
                     <Text
@@ -1938,7 +1934,6 @@ function NativeComboboxCore({
   // incoming results have room, instead of a fit-height sliver that shows
   // only the search input.
   const hasScrollableContent = Boolean(onSearch) || filtered.length > 6;
-  const sheetTransition = knobProps.transition ?? "medium";
 
   // Selected item(s) at top when filter empty (single + multi); `stable` never rearranges
   const sortedFiltered = useMemo(() => {
@@ -2550,8 +2545,8 @@ function NativeComboboxCore({
           <Button
             size={knobProps.sizeToken}
             chromeless
-            minWidth={44}
-            minHeight={44}
+            width={knobProps.control.height}
+            paddingHorizontal={0}
             aria-label={t("Clear")}
             icon={<XIcon size={14} />}
             onPress={() => onValueChange?.("")}
@@ -2567,7 +2562,6 @@ function NativeComboboxCore({
       scrollable={hasScrollableContent}
       disabled={disabled}
       contentPadding="none"
-      transition={typeof sheetTransition === "string" ? sheetTransition : "medium"}
       scrollViewProps={{
         onScroll: (e: any) => {
           if (!onLoadMore || !hasMore || loading) return;
@@ -2623,7 +2617,6 @@ export function Combobox({
   selectedOrder,
   dismissible,
   skeleton,
-  compact,
   creatable,
   onCreate,
   createLabel,
@@ -2639,7 +2632,7 @@ export function Combobox({
   const hasLabel = Boolean(label);
   const searchPlaceholder = searchPlaceholderProp ?? t("Search...");
   const emptyMessage = emptyMessageProp ?? t("No results found.");
-  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);
   // Uncontrolled (no `value` prop, no form) still must reflect selections in
   // the trigger — callbacks alone leave the display frozen on the placeholder.

package/src/fields/DatePicker/Calendar.spec.tsx

@@ -144,14 +144,14 @@ describe("Calendar", () => {
   });
 
   it("day cells paint nestedControl size, not the page press floor", () => {
-    // LC-76: compact steps space only. Default medium is nestedControlPxMap.medium = 32.
+    // `$true` on the default scale: round(40 × 32/44) = 29.
     const result = renderWithProviders(
       <Calendar showTabs={false} mode="single" selectedDates={[new Date(2024, 0, 15)]} />,
     );
     const days = getEnabledDayButtons(result.container);
     expect(days.length).toBeGreaterThan(0);
-    expect(days[0].getAttribute("data-nested-px")).toBe("32");
-    expect(days.every((day) => day.getAttribute("data-nested-px") === "32")).toBe(true);
+    expect(days[0].getAttribute("data-nested-px")).toBe("29");
+    expect(days.every((day) => day.getAttribute("data-nested-px") === "29")).toBe(true);
   });
 
   // LC-46 PLATFORM-PROP-BOUNDARY spec arm: the calendar nav Buttons

package/src/fields/DatePicker/Calendar.tsx

@@ -1,3 +1,4 @@
+import { transitionProps } from "@multiplatform.one/theme";
 import { useCallback, useMemo, useState } from "react";
 import { Separator, Text, View, XStack, YStack, useMedia } from "tamagui";
 
@@ -111,7 +112,12 @@ function CalendarDayGrid({
               }
               return (
                 <View
-                  transition={knobProps.transition}
+                  {...transitionProps(knobProps.motion.slide, [
+                    "width",
+                    "insetInlineStart",
+                    "insetInlineEnd",
+                    "backgroundColor",
+                  ])}
                   position="absolute"
                   height="100%"
                   zIndex={0}
@@ -321,7 +327,7 @@ export function Calendar({
           {...knobProps.borderRadius}
           borderWidth={knobProps.borderRadius.borderWidth || 1}
           borderColor={formCommonColors.divider}
-          backgroundColor="$backgroundStrong"
+          backgroundColor="$color3"
           padding={2}
         >
           {(["range", "single", "multiple"] as const).map((m) => (

package/src/fields/DatePicker/DatePicker.stories.tsx

@@ -34,7 +34,6 @@ const meta: Meta<typeof DatePicker> = {
     disabled: { control: "boolean", description: "Disable the date picker" },
     readOnly: { control: "boolean", description: "Read-only display" },
     skeleton: { control: "boolean", description: "Render a skeleton placeholder" },
-    compact: { control: "boolean", description: "Use compact density (tighter layout gaps)" },
     value: { control: "text", description: "Controlled value (ISO string)" },
     defaultValue: { control: "text", description: "Initial value (ISO string)" },
     size: { control: "select", options: ["$2", "$3", "$4"], description: "Field size" },
@@ -153,7 +152,7 @@ export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
       <DatePicker label="Small" size="$2" placeholder="Pick a date" />
-      <DatePicker label="Medium (default)" size="$3" placeholder="Pick a date" />
+      <DatePicker label="Medium ($3)" size="$3" placeholder="Pick a date" />
       <DatePicker label="Large" size="$4" placeholder="Pick a date" />
     </YStack>
   ),

package/src/fields/DatePicker/DateRangePicker.stories.tsx

@@ -28,7 +28,6 @@ const meta: Meta<typeof DateRangePicker> = {
     disabled: { control: "boolean", description: "Disable the picker" },
     readOnly: { control: "boolean", description: "Read-only display" },
     skeleton: { control: "boolean", description: "Render a skeleton placeholder" },
-    compact: { control: "boolean", description: "Use compact density (tighter layout gaps)" },
     size: { control: "select", options: ["$2", "$3", "$4"], description: "Field size" },
   },
   args: {
@@ -63,7 +62,7 @@ export const SkeletonState: Story = {
 };
 
 export const Compact: Story = {
-  args: { compact: true, helperText: "Compact sizing" },
+  args: { size: "$3", helperText: "Size $3" },
 };
 
 export const MinMax: Story = {

package/src/fields/DatePicker/DateRangePicker.tsx

@@ -72,8 +72,6 @@ export type DateRangePickerProps<
     inputProps?: Omit<ComponentProps<typeof InputParts.Area>, "value" | "onChangeText" | "ref">;
     /** When true, renders a skeleton placeholder instead of the date range picker */
     skeleton?: boolean;
-    /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-    compact?: boolean;
   };
 
 // ---------------------------------------------------------------------------
@@ -137,7 +135,12 @@ function RangeDayGrid({
         }
         return (
           <View
-            {...transitionProps(knobProps.transition)}
+            {...transitionProps(knobProps.motion.slide, [
+              "width",
+              "insetInlineStart",
+              "insetInlineEnd",
+              "backgroundColor",
+            ])}
             data-range-stripe={rangeStatus}
             position="absolute"
             height="100%"
@@ -376,12 +379,11 @@ export function DateRangePicker<
     size,
     onBlur: _onBlur,
     skeleton,
-    compact,
     id: idProp,
     ..._restProps
   } = useProps(props);
 
-  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 resolvedSize = (size ?? knobProps.sizeToken) as SizeTokens;
   const visualHeight = getFieldHeight(resolvedSize, 1, hydrationTouch);
@@ -532,7 +534,6 @@ export function DateRangePicker<
             open={open}
             onReset={() => handleClear(fieldChange)}
             onButtonPress={openPicker}
-            error={!!hasError}
             // SB-KS-04: without the field id the sibling FieldLayout label's
             // `htmlFor` resolves to nothing — a dangling label and a control
             // with no accessible name.
@@ -580,7 +581,10 @@ export function DateRangePicker<
         // the sibling label/helper readable) — it needs the disabled state.
         disabled={disabled}
       >
-        <InputParts size={size || knobProps.sizeToken}>
+        <InputParts
+          size={size || knobProps.sizeToken}
+          {...(errorProp ? { theme: "error" } : undefined)}
+        >
           {renderPopover(!!errorProp, undefined, onChange)}
         </InputParts>
       </FieldLayout>
@@ -617,7 +621,10 @@ export function DateRangePicker<
               // LC-40: see standalone branch — FieldLayout carries dimWhole.
               disabled={disabled}
             >
-              <InputParts size={size || knobProps.sizeToken}>
+              <InputParts
+                size={size || knobProps.sizeToken}
+                {...(resolvedError ? { theme: "error" } : undefined)}
+              >
                 {renderPopover(
                   !!resolvedError,
                   mergeFieldHandler(field, "handleBlur", _onBlur),