@multiplatform.one/forms 7.34.3 → 7.35.0

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");
@@ -1259,8 +1257,8 @@ function FloatingComboboxCore({
 
   const handleSearchKeyDown = useCallback(
     (event: React.KeyboardEvent) => {
-      const isDown = event.key === "ArrowDown" || event.key === "j";
-      const isUp = event.key === "ArrowUp" || event.key === "k";
+      const isDown = event.key === "ArrowDown";
+      const isUp = event.key === "ArrowUp";
       if (isDown) {
         event.preventDefault();
         setKeyboardNav(true);
@@ -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(() => {
@@ -2012,8 +2007,8 @@ function NativeComboboxCore({
 
   const handleSearchKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
-      const isDown = e.key === "ArrowDown" || e.key === "j";
-      const isUp = e.key === "ArrowUp" || e.key === "k";
+      const isDown = e.key === "ArrowDown";
+      const isUp = e.key === "ArrowUp";
       if (isDown) {
         e.preventDefault();
         setKeyboardNav(true);
@@ -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),

package/src/fields/DatePicker/DatetimePicker.catalog.tsx

@@ -67,8 +67,6 @@ export type DatetimePickerProps<
     inputProps?: Omit<ComponentProps<typeof InputParts.Area>, "value" | "onChangeText" | "ref">;
     /** When true, renders a skeleton placeholder instead of the datetime picker */
     skeleton?: boolean;
-    /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-    compact?: boolean;
     /** Standalone controlled value (Date or ISO string). Ignored when used inside a form. */
     value?: Date | string | null;
     /**
@@ -373,12 +371,11 @@ export function DatetimePicker<
     minuteStep = 5,
     showSeconds = false,
     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 [open, setOpen] = useState(false);
@@ -456,7 +453,6 @@ export function DatetimePicker<
       open={open}
       onReset={() => handleClearDatetime(fieldChange)}
       onButtonPress={openPicker}
-      error={!!hasError}
       id={id}
       aria-label={label ? undefined : t("Date and time")}
       aria-required={required || undefined}
@@ -538,7 +534,12 @@ export function DatetimePicker<
         // the sibling label/helper readable) — it needs the disabled state.
         disabled={disabled}
       >
-        <InputParts size={size || knobProps.sizeToken}>{renderPopover(!!errorProp)}</InputParts>
+        <InputParts
+          size={size || knobProps.sizeToken}
+          {...(errorProp ? { theme: "error" } : undefined)}
+        >
+          {renderPopover(!!errorProp)}
+        </InputParts>
       </FieldLayout>
     );
   }
@@ -572,7 +573,10 @@ export function DatetimePicker<
               // 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),

package/src/fields/DatePicker/DatetimePicker.native.tsx

@@ -52,7 +52,6 @@ export type DatetimePickerProps<
     minuteStep?: number;
     showSeconds?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     value?: Date | string | null;
     onChange?: (value: Date | null) => void;
     onValueChange?: (value: Date | null) => void;
@@ -105,13 +104,12 @@ export function DatetimePicker<
     readOnly,
     onBlur,
     skeleton,
-    compact,
     timeFormat = "12h",
     showSeconds = false,
     id: idProp,
   } = 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 hasLabel = Boolean(label);
   const [open, setOpen] = useState(false);
@@ -175,7 +173,6 @@ export function DatetimePicker<
             open={open}
             onReset={() => commit(null, fieldChange)}
             onButtonPress={() => {}}
-            error={!!hasError}
             id={id}
             aria-label={hasLabel ? undefined : t("Date and time")}
             aria-required={required || undefined}
@@ -223,7 +220,12 @@ export function DatetimePicker<
         onBlur={onBlur}
         disabled={disabled}
       >
-        <InputParts size={size || knobProps.sizeToken}>{renderControl(!!errorProp)}</InputParts>
+        <InputParts
+          size={size || knobProps.sizeToken}
+          {...(errorProp ? { theme: "error" } : undefined)}
+        >
+          {renderControl(!!errorProp)}
+        </InputParts>
       </FieldLayout>
     );
   }
@@ -253,7 +255,10 @@ export function DatetimePicker<
               knobProps={knobProps}
               disabled={disabled}
             >
-              <InputParts size={size || knobProps.sizeToken}>
+              <InputParts
+                size={size || knobProps.sizeToken}
+                {...(resolvedError ? { theme: "error" } : undefined)}
+              >
                 {renderControl(
                   !!resolvedError,
                   mergeFieldHandler(field, "handleBlur", onBlur),

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

@@ -28,7 +28,6 @@ const meta: Meta<typeof DatetimePicker> = {
     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)" },
     timeFormat: { control: "select", options: ["12h", "24h"], description: "Clock format" },
     minuteStep: { control: "number", description: "Minute increment" },
     showSeconds: { control: "boolean", description: "Show a seconds column" },
@@ -108,7 +107,7 @@ export const SkeletonState: Story = {
 };
 
 export const Compact: Story = {
-  args: { compact: true, helperText: "Compact sizing" },
+  args: { size: "$3", helperText: "Size $3" },
 };
 
 export const ControlledRejection: Story = {

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

@@ -26,7 +26,6 @@ const meta: Meta<typeof MonthPicker> = {
     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)" },
     minYear: { control: "number", description: "Minimum selectable year" },
     maxYear: { control: "number", description: "Maximum selectable year" },
     size: { control: "select", options: ["$2", "$3", "$4"], description: "Field size" },
@@ -79,7 +78,7 @@ export const SkeletonState: Story = {
 };
 
 export const Compact: Story = {
-  args: { compact: true, helperText: "Compact sizing" },
+  args: { size: "$3", helperText: "Size $3" },
 };
 
 export const FormBound: Story = {

package/src/fields/DatePicker/MonthPicker.tsx

@@ -1,3 +1,4 @@
+import { transitionProps } from "@multiplatform.one/theme";
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import { ChevronLeft, ChevronRight } from "@tamagui/lucide-icons-2";
 import { type ComponentProps, useCallback, useEffect, useRef, useState } from "react";
@@ -61,8 +62,6 @@ export type MonthPickerProps<
     readOnly?: boolean;
     /** When true, render a non-interactive skeleton instead of the picker. */
     skeleton?: boolean;
-    /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-    compact?: boolean;
     placeholder?: string;
     disabled?: boolean;
     minYear?: number;
@@ -176,7 +175,7 @@ function MonthPickerBody({
         {...knobProps.gap}
         width={px * 7}
         {...animation}
-        transition={knobProps.transition}
+        {...transitionProps(knobProps.motion.slide)}
       >
         <View flexDirection="row" width={px * 7} alignItems="center" justifyContent="space-between">
           <CalendarChromeButton
@@ -251,12 +250,11 @@ export function MonthPicker<
     onBlur: _onBlur,
     onChange,
     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 [open, setOpen] = useState(false);
@@ -364,7 +362,6 @@ export function MonthPicker<
             open={open}
             onReset={() => handleClear(fieldChange)}
             onButtonPress={() => setOpen(true)}
-            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. Carrying it also lets the Label wire
@@ -407,7 +404,12 @@ export function MonthPicker<
         // the sibling label/helper readable) — it needs the disabled state.
         disabled={disabled}
       >
-        <InputParts size={size || knobProps.sizeToken}>{renderPopover(!!errorProp)}</InputParts>
+        <InputParts
+          size={size || knobProps.sizeToken}
+          {...(errorProp ? { theme: "error" } : undefined)}
+        >
+          {renderPopover(!!errorProp)}
+        </InputParts>
       </FieldLayout>
     );
   }
@@ -441,7 +443,10 @@ export function MonthPicker<
               // 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),

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

@@ -28,7 +28,6 @@ const meta: Meta<typeof MultiDatePicker> = {
     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)" },
     limit: { control: "number", description: "Max number of selectable dates" },
     size: { control: "select", options: ["$2", "$3", "$4"], description: "Field size" },
   },
@@ -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 LimitOne: Story = {