@multiplatform.one/forms 6.7.0 → 7.0.0

package/src/fields/DatePicker/MonthPicker.tsx

@@ -1,9 +1,8 @@
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { ChevronLeft, ChevronRight } from "@tamagui/lucide-icons-2";
 import { type ComponentProps, useCallback, useEffect, useRef, useState } from "react";
 import { Text, View, useProps, type Popover } from "tamagui";
 
-import { Button } from "../../Button";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { t } from "../../shared/t";
 import {
@@ -18,11 +17,15 @@ import { Skeleton } from "../../Skeleton";
 import type { FieldComponentProps, Validator } from "../../types";
 
 import {
+  CalendarChromeButton,
+  CalendarPanelFrame,
+  CalendarTextButton,
   DatePickerInputTrigger,
   DatePickerPopoverShell,
   MonthGrid,
   YearGrid,
   months,
+  useCalendarKnobs,
   useDateAnimation,
   useDateNavigation,
   yearPageSize,
@@ -57,7 +60,7 @@ export type MonthPickerProps<
     readOnly?: boolean;
     /** When true, render a non-interactive skeleton instead of the picker. */
     skeleton?: boolean;
-    /** When true, uses compact sizing */
+    /** When true, applies compact density (tighter layout gaps; control size unchanged) */
     compact?: boolean;
     placeholder?: string;
     disabled?: boolean;
@@ -103,7 +106,8 @@ function MonthPickerBody({
   minYear,
   maxYear,
 }: MonthPickerBodyProps) {
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useCalendarKnobs();
+  const { px } = knobProps.nestedControl;
   const [viewMode, setViewMode] = useState<ViewMode>("month");
   const year = displayDate.getFullYear();
   const [yearPageStart, setYearPageStart] = useState(() => year - (year % yearPageSize));
@@ -143,13 +147,7 @@ function MonthPickerBody({
 
   if (viewMode === "year") {
     return (
-      <View
-        flexDirection="column"
-        alignItems="center"
-        {...knobProps.gapLg}
-        width="100%"
-        {...knobProps.panelPadding}
-      >
+      <CalendarPanelFrame>
         <YearGrid
           yearPageStart={yearPageStart}
           selectedYear={year}
@@ -157,64 +155,66 @@ function MonthPickerBody({
           onPrevPage={() => setYearPageStart((s) => s - yearPageSize)}
           onNextPage={() => setYearPageStart((s) => s + yearPageSize)}
         />
-      </View>
+      </CalendarPanelFrame>
     );
   }
 
+  const prevDisabled = minYear !== undefined && year <= minYear;
+  const nextDisabled = maxYear !== undefined && year >= maxYear;
+
   return (
-    <View
-      key={animationKey}
-      flexDirection="column"
-      alignItems="center"
-      {...knobProps.gapLg}
-      width="100%"
-      {...knobProps.panelPadding}
-      {...animation}
-      transition="medium"
-    >
-      <View flexDirection="row" width="100%" alignItems="center" justifyContent="space-between">
-        <Button
-          circular
-          size={knobProps.sizeToken}
-          chromeless
-          scaleIcon={1.5}
-          onPress={handlePrevYear}
-          disabled={minYear !== undefined && year <= minYear}
-          aria-label={t("Previous year")}
+    <CalendarPanelFrame>
+      <View
+        key={animationKey}
+        flexDirection="column"
+        alignItems="center"
+        {...knobProps.gap}
+        width={px * 7}
+        {...animation}
+        transition="medium"
+      >
+        <View
+          flexDirection="row"
+          width={px * 7}
+          alignItems="center"
+          justifyContent="space-between"
         >
-          <Button.Text aria-hidden>◀</Button.Text>
-        </Button>
-
-        <Button onPress={() => setViewMode("year")} chromeless padding={0}>
-          <Text
-            fontSize={knobProps.sizeToken}
-            color="$color"
-            {...knobProps.body}
-            {...knobProps.textWeight}
+          <CalendarChromeButton
+            onPress={() => {
+              if (!prevDisabled) handlePrevYear();
+            }}
+            label={t("Previous year")}
           >
-            {year}
-          </Text>
-        </Button>
-
-        <Button
-          circular
-          size={knobProps.sizeToken}
-          chromeless
-          scaleIcon={1.5}
-          onPress={handleNextYear}
-          disabled={maxYear !== undefined && year >= maxYear}
-          aria-label={t("Next year")}
-        >
-          <Button.Text aria-hidden>▶</Button.Text>
-        </Button>
+            <View opacity={prevDisabled ? 0.4 : 1}>
+              <ChevronLeft size={16} />
+            </View>
+          </CalendarChromeButton>
+
+          <CalendarTextButton onPress={() => setViewMode("year")}>
+            <Text color="$color" {...knobProps.label} {...knobProps.textWeight}>
+              {year}
+            </Text>
+          </CalendarTextButton>
+
+          <CalendarChromeButton
+            onPress={() => {
+              if (!nextDisabled) handleNextYear();
+            }}
+            label={t("Next year")}
+          >
+            <View opacity={nextDisabled ? 0.4 : 1}>
+              <ChevronRight size={16} />
+            </View>
+          </CalendarChromeButton>
+        </View>
+
+        <MonthGrid
+          currentYear={year}
+          selectedMonth={selectedValue?.year === year ? selectedValue.month : -1}
+          onSelectMonth={handleSelectMonth}
+        />
       </View>
-
-      <MonthGrid
-        currentYear={year}
-        selectedMonth={selectedValue?.year === year ? selectedValue.month : -1}
-        onSelectMonth={handleSelectMonth}
-      />
-    </View>
+    </CalendarPanelFrame>
   );
 }
 
@@ -361,9 +361,16 @@ export function MonthPicker<
             value={formatMonthDisplay(selectedValue)}
             placeholder={placeholder}
             disabled={disabled}
+            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
+            // `aria-labelledby`, which is the only name source (see
+            // fieldLayout.tsx).
+            id={id}
             aria-required={required || undefined}
             aria-invalid={hasError || undefined}
           />

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

@@ -49,8 +49,29 @@ describe("MultiDatePicker", () => {
     expect(input?.getAttribute("aria-disabled")).toBe("true");
 
     const clickable = result.container.querySelector("input,button,[role='button']");
-    if (clickable) fireEvent.click(clickable);
+    if (clickable) {
+      // BOTH halves of a real click: FloatingPanel's opener is
+      // `useClick(..., { event: "mousedown" })` and a disabled trigger is
+      // pointerEvents-none, so `click` alone measures nothing (SB-M-614).
+      fireEvent.mouseDown(clickable);
+      fireEvent.click(clickable);
+    }
     expect(result.findTextElement("Select a month")).toBeUndefined();
+    expect(document.querySelector('[data-testid="floating-panel-viewport"]')).toBeNull();
+  });
+
+  // SB-KS-04: the trigger carried no id, so the label pointed at nothing and
+  // the control had no accessible name at all.
+  it("the trigger carries the field id the sibling label resolves to", async () => {
+    const MultiDatePicker = await loadMultiDatePicker();
+    const result = renderWithProviders(<MultiDatePicker label="Dates" name="dates" />);
+    const trigger = result.container.querySelector(
+      '[data-testid="date-picker-trigger"]',
+    ) as HTMLElement;
+    const label = result.container.querySelector("label") as HTMLLabelElement;
+    expect(trigger?.id).toBeTruthy();
+    expect(label.htmlFor).toBe(trigger.id);
+    expect(trigger.getAttribute("aria-labelledby")).toBe(`${trigger.id}-label`);
   });
 
   it("selects dates and clears selection", async () => {

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

@@ -26,7 +26,7 @@ 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 sizing" },
+    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" },
   },

package/src/fields/DatePicker/MultiDatePicker.tsx

@@ -1,11 +1,9 @@
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
-import { formatAbsoluteDate, useAccentOnSurface, useResolvedKnobs } from "@multiplatform.one/theme";
+import { formatAbsoluteDate, useResolvedKnobs } from "@multiplatform.one/theme";
 import { type ComponentProps, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { AnimatePresence, type Popover, Separator, View, useMedia, useProps } from "tamagui";
+import { type Popover, Separator, View, useMedia, useProps } from "tamagui";
 
-import { Button } from "../../Button";
 import { Field, FieldLayout } from "../../fieldLayout";
-import { formCommonColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import {
   getFieldError,
@@ -19,16 +17,14 @@ import { Skeleton } from "../../Skeleton";
 import type { FieldComponentProps, Validator } from "../../types";
 
 import {
+  CalendarDays,
   CalendarHeader,
+  CalendarPanelFrame,
   DatePickerInputTrigger,
   DatePickerPopoverShell,
   CalendarViewSwitcher,
-  WeekView,
-  dayCellRadius,
   isSameDay,
-  toWeeks,
   useCalendarData,
-  useDateAnimation,
   useDateNavigation,
   yearPageSize,
 } from "./parts";
@@ -70,7 +66,7 @@ export type MultiDatePickerProps<
     inputProps?: Omit<ComponentProps<typeof InputParts.Area>, "value" | "onChangeText" | "ref">;
     /** When true, renders a skeleton placeholder instead of the multi-date picker */
     skeleton?: boolean;
-    /** When true, uses compact sizing */
+    /** When true, applies compact density (tighter layout gaps; control size unchanged) */
     compact?: boolean;
   };
 
@@ -93,85 +89,15 @@ function MultiDayGrid({
   minDate,
   maxDate,
 }: MultiDayGridProps) {
-  const { knobProps } = useResolvedKnobs();
-  // UX-P03 / Axiom 12: page-readable accent for the today marker (see Calendar).
-  const accentText = useAccentOnSurface();
-  const { animation, animationKey } = useDateAnimation(
-    `${calendarData.year}-${calendarData.month}`,
-  );
-  const weeks = toWeeks(calendarData.days);
-
   return (
-    <AnimatePresence key={animationKey}>
-      <View width="100%" {...knobProps.gap} transition="medium" {...animation}>
-        <WeekView />
-        <View flexDirection="column" gap="$1" width="100%">
-          {weeks.map((week) => (
-            <View
-              key={week[0].toISOString()}
-              flexDirection="row"
-              gap="$1"
-              justifyContent="space-between"
-              width="100%"
-            >
-              {week.map((day) => {
-                const isCurrentMonth = day.getMonth() === calendarData.month;
-                const isSelected = selectedDates.some((d) => isSameDay(d, day));
-                const isToday = isSameDay(calendarData.today, day);
-                const isOutOfRange =
-                  (minDate != null && day < minDate) || (maxDate != null && day > maxDate);
-                const isDisabled = !isCurrentMonth || isOutOfRange;
-
-                return (
-                  <Button
-                    key={day.toISOString()}
-                    chromeless
-                    circular
-                    {...dayCellRadius(knobProps)}
-                    flex={1}
-                    size={knobProps.sizeToken}
-                    disabled={isDisabled}
-                    onPress={() => !isDisabled && onToggleDate(day)}
-                    backgroundColor={isSelected ? "$background" : "transparent"}
-                    theme={isSelected ? ("accent" as any) : undefined}
-                    opacity={isCurrentMonth ? 1 : 0}
-                    pointerEvents={isCurrentMonth ? "auto" : "none"}
-                    borderWidth={knobProps.borderRadius.borderWidth || 1}
-                    borderColor={isSelected ? "$backgroundStrong" : "transparent"}
-                  >
-                    {isSelected ? (
-                      <Button.Text
-                        key="text-selected"
-                        transition="quick"
-                        enterStyle={{ opacity: 0, y: 20 }}
-                        exitStyle={{ opacity: 0, y: 20 }}
-                        opacity={1}
-                        fontWeight="bold"
-                      >
-                        {day.getDate()}
-                      </Button.Text>
-                    ) : (
-                      <Button.Text
-                        key="text-normal"
-                        color={
-                          isToday
-                            ? accentText
-                            : isCurrentMonth
-                              ? formCommonColors.text
-                              : formCommonColors.muted
-                        }
-                      >
-                        {day.getDate()}
-                      </Button.Text>
-                    )}
-                  </Button>
-                );
-              })}
-            </View>
-          ))}
-        </View>
-      </View>
-    </AnimatePresence>
+    <CalendarDays
+      calendarData={calendarData}
+      minDate={minDate}
+      maxDate={maxDate}
+      isSelected={(day) => selectedDates.some((d) => isSameDay(d, day))}
+      onSelect={onToggleDate}
+      onToday={() => onToggleDate(new Date())}
+    />
   );
 }
 
@@ -202,7 +128,6 @@ function SingleCalendar({
   showPrev = true,
   showNext = true,
 }: SingleCalendarProps) {
-  const { knobProps } = useResolvedKnobs();
   const [viewMode, setViewMode] = useState<ViewMode>("day");
   const calendarData = useCalendarData(displayDate);
   const [yearPageStart, setYearPageStart] = useState(
@@ -219,7 +144,7 @@ function SingleCalendar({
       yearPageStart={yearPageStart}
       setYearPageStart={setYearPageStart}
     >
-      <View flexDirection="column" alignItems="center" {...knobProps.gapLg} width="100%">
+      <CalendarPanelFrame>
         <CalendarHeader
           year={calendarData.year}
           monthName={calendarData.monthName}
@@ -240,7 +165,7 @@ function SingleCalendar({
           minDate={minDate}
           maxDate={maxDate}
         />
-      </View>
+      </CalendarPanelFrame>
     </CalendarViewSwitcher>
   );
 }
@@ -510,9 +435,14 @@ export function MultiDatePicker<
             value={formatMultiDates(selectedDates)}
             placeholder={placeholder}
             disabled={disabled}
+            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.
+            id={id}
             aria-required={required || undefined}
             aria-invalid={hasError || undefined}
           />

package/src/fields/DatePicker/index.tsx

@@ -1,13 +1,10 @@
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
-import { useAccentOnSurface, useResolvedKnobs } from "@multiplatform.one/theme";
 import { type ComponentProps, useCallback, useEffect, useRef, useState } from "react";
 import { DatePickerFieldValueSync } from "./fieldValueSync";
 import { coerceToDate } from "./utils";
-import { AnimatePresence, type Popover, View, useProps } from "tamagui";
+import { type Popover, useProps } from "tamagui";
 
-import { Button } from "../../Button";
 import { Field, FieldLayout } from "../../fieldLayout";
-import { formCommonColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import {
   getFieldError,
@@ -21,16 +18,15 @@ import { Skeleton } from "../../Skeleton";
 import type { FieldComponentProps, Validator } from "../../types";
 
 import {
+  CalendarDays,
   CalendarHeader,
+  CalendarPanelFrame,
   DatePickerInputTrigger,
   DatePickerPopoverShell,
   CalendarViewSwitcher,
-  WeekView,
   formatDateDisplay,
   isSameDay,
-  toWeeks,
   useCalendarData,
-  useDateAnimation,
   useDateNavigation,
   yearPageSize,
 } from "./parts";
@@ -70,7 +66,7 @@ export type DatePickerProps<
     inputProps?: Omit<ComponentProps<typeof InputParts.Area>, "value" | "onChangeText" | "ref">;
     /** When true, renders a skeleton placeholder instead of the date picker */
     skeleton?: boolean;
-    /** When true, uses compact sizing */
+    /** 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;
@@ -96,84 +92,15 @@ interface DayGridProps {
 }
 
 function DayGrid({ calendarData, selectedDate, onSelectDate, minDate, maxDate }: DayGridProps) {
-  const { knobProps } = useResolvedKnobs();
-  // UX-P03 / Axiom 12: page-readable accent for the today marker (see Calendar).
-  const accentText = useAccentOnSurface();
-  const { animation, animationKey } = useDateAnimation(
-    `${calendarData.year}-${calendarData.month}`,
-  );
-  const weeks = toWeeks(calendarData.days);
-
   return (
-    <AnimatePresence key={animationKey}>
-      <View width="100%" {...knobProps.gap} transition="medium" {...animation}>
-        <WeekView />
-        <View flexDirection="column" gap="$1" width="100%">
-          {weeks.map((week) => (
-            <View
-              key={week[0].toISOString()}
-              flexDirection="row"
-              gap="$1"
-              justifyContent="space-between"
-              width="100%"
-            >
-              {week.map((day) => {
-                const isCurrentMonth = day.getMonth() === calendarData.month;
-                const isSelected = isSameDay(selectedDate, day);
-                const isToday = isSameDay(calendarData.today, day);
-                const isOutOfRange =
-                  (minDate != null && day < minDate) || (maxDate != null && day > maxDate);
-                const isDisabled = !isCurrentMonth || isOutOfRange;
-
-                return (
-                  <Button
-                    key={day.toISOString()}
-                    chromeless
-                    circular
-                    flex={1}
-                    size={knobProps.sizeToken}
-                    disabled={isDisabled}
-                    onPress={() => !isDisabled && onSelectDate(day)}
-                    backgroundColor={isSelected ? "$background" : "transparent"}
-                    theme={isSelected ? ("accent" as any) : undefined}
-                    opacity={isCurrentMonth ? 1 : 0}
-                    pointerEvents={isCurrentMonth ? "auto" : "none"}
-                    borderWidth={knobProps.borderRadius.borderWidth || 1}
-                    borderColor={isSelected ? "$backgroundStrong" : "transparent"}
-                  >
-                    {isSelected ? (
-                      <Button.Text
-                        key="text-selected"
-                        transition="quick"
-                        enterStyle={{ opacity: 0, y: 20 }}
-                        exitStyle={{ opacity: 0, y: 20 }}
-                        opacity={1}
-                        fontWeight="bold"
-                      >
-                        {day.getDate()}
-                      </Button.Text>
-                    ) : (
-                      <Button.Text
-                        key="text-normal"
-                        color={
-                          isToday
-                            ? accentText
-                            : isCurrentMonth
-                              ? formCommonColors.text
-                              : formCommonColors.muted
-                        }
-                      >
-                        {day.getDate()}
-                      </Button.Text>
-                    )}
-                  </Button>
-                );
-              })}
-            </View>
-          ))}
-        </View>
-      </View>
-    </AnimatePresence>
+    <CalendarDays
+      calendarData={calendarData}
+      minDate={minDate}
+      maxDate={maxDate}
+      isSelected={(day) => isSameDay(selectedDate, day)}
+      onSelect={onSelectDate}
+      onToday={() => onSelectDate(new Date())}
+    />
   );
 }
 
@@ -200,7 +127,6 @@ function CalendarBody({
   minDate,
   maxDate,
 }: CalendarBodyProps) {
-  const { knobProps } = useResolvedKnobs();
   const [viewMode, setViewMode] = useState<ViewMode>("day");
   const calendarData = useCalendarData(displayDate);
   const [yearPageStart, setYearPageStart] = useState(
@@ -217,13 +143,7 @@ function CalendarBody({
       yearPageStart={yearPageStart}
       setYearPageStart={setYearPageStart}
     >
-      <View
-        flexDirection="column"
-        alignItems="center"
-        {...knobProps.gapLg}
-        width="100%"
-        {...knobProps.panelPadding}
-      >
+      <CalendarPanelFrame>
         <CalendarHeader
           year={calendarData.year}
           monthName={calendarData.monthName}
@@ -242,7 +162,7 @@ function CalendarBody({
           minDate={minDate}
           maxDate={maxDate}
         />
-      </View>
+      </CalendarPanelFrame>
     </CalendarViewSwitcher>
   );
 }
@@ -391,6 +311,12 @@ export function DatePicker<
       <DatePickerPopoverShell
         open={open}
         onOpenChange={handleOpenChange}
+        // Disabling only the trigger is what LET the panel open: the trigger
+        // goes `pointerEvents:none`, so the click falls through to
+        // FloatingPanel's own reference wrapper, which opens on click unless
+        // it is told the field is disabled (SB-M-614). DatetimePicker and
+        // TimePicker already pass it.
+        disabled={disabled}
         popoverRef={popoverRef}
         // "Date, Jul 15 2026": VO gets the field name + current value on the
         // native trigger (the web trigger announces via aria on the Area).
@@ -404,6 +330,7 @@ export function DatePicker<
             value={formatDateDisplay(selectedDate)}
             placeholder={placeholder}
             disabled={disabled}
+            open={open}
             onReset={() => handleClearDate(fieldChange)}
             onButtonPress={() => {
               if (selectedDate) setDisplayDate(selectedDate);
@@ -411,7 +338,8 @@ export function DatePicker<
             }}
             error={!!hasError}
             id={id}
-            aria-labelledby={hasLabel ? `${id}-label` : undefined}
+            // Labelled: FieldLayout's Label wires `aria-labelledby` onto this
+            // id itself — naming it here too doubles the spoken name.
             aria-label={hasLabel ? undefined : t("Date")}
             aria-describedby={
               [