@multiplatform.one/forms 6.7.0 → 7.0.0

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

@@ -91,4 +91,38 @@ describe("Calendar", () => {
       expect(calls[calls.length - 1][0]).toHaveLength(1);
     });
   });
+
+  it("day cells paint nestedControl size, not the page press floor", () => {
+    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("28");
+    expect(days.every((day) => day.getAttribute("data-nested-px") === "28")).toBe(true);
+  });
+
+  // LC-46 PLATFORM-PROP-BOUNDARY spec arm: the calendar nav Buttons
+  // (CalendarHeader / YearGrid in parts.tsx) previously passed `scaleIcon`,
+  // which is not a forms-Button variant — it leaked to the DOM and fired
+  // React's unknown-prop console.error on every calendar open, while never
+  // sizing any icon. Render → zero leak-class console errors.
+  it("renders without leaking non-DOM props (LC-46, scaleIcon class)", async () => {
+    const LEAK =
+      /does not recognize the `.+` prop on a DOM element|non-boolean attribute|Invalid DOM property/i;
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      const result = renderWithProviders(<Calendar mode="single" onDatesChange={vi.fn()} />);
+      await waitFor(() => {
+        expect(getEnabledDayButtons(result.container).length).toBeGreaterThan(0);
+      });
+      const leaks = errorSpy.mock.calls
+        .map((args) => args.map(String).join(" "))
+        .filter((message) => LEAK.test(message));
+      expect(leaks).toEqual([]);
+      expect(result.container.querySelector("[scaleicon]")).toBeNull();
+    } finally {
+      errorSpy.mockRestore();
+    }
+  });
 });

package/src/fields/DatePicker/Calendar.tsx

@@ -1,21 +1,16 @@
 import { useCallback, useMemo, useState } from "react";
-import { useAccentOnSurface, useResolvedKnobs } from "@multiplatform.one/theme";
-import { AnimatePresence, Separator, Text, View, XStack, YStack, useMedia } from "tamagui";
+import { Separator, Text, View, XStack, YStack, useMedia } from "tamagui";
 
-import { Button } from "../../Button";
 import { formCommonColors, formInputColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import {
+  CalendarDays,
   CalendarHeader,
-  MonthGrid,
+  CalendarPanelFrame,
   CalendarViewSwitcher,
-  WeekView,
-  YearGrid,
-  dayCellRadius,
   isSameDay,
-  toWeeks,
   useCalendarData,
-  useDateAnimation,
+  useCalendarKnobs,
   useDateNavigation,
   yearPageSize,
 } from "./parts";
@@ -83,133 +78,56 @@ function CalendarDayGrid({
   minDate,
   maxDate,
 }: CalendarDayGridProps) {
-  const { knobProps } = useResolvedKnobs();
-  // UX-P03 / Axiom 12: the today marker is accent-hued text on the transparent
-  // cell (page surface), so it needs the page-readable accent — `$accentColor`
-  // (the on-fill foreground) measured 1.94:1 as page text in dark.
-  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) => {
-            const hasCurrentMonthDay = week.some((d) => d.getMonth() === calendarData.month);
-            if (!hasCurrentMonthDay) return <View key={week[0].toISOString()} height="$3" />;
-
-            return (
-              <View
-                key={week[0].toISOString()}
-                flexDirection="row"
-                justifyContent="space-between"
-                width="100%"
-              >
-                {week.map((day) => {
-                  const isCurrentMonth = day.getMonth() === calendarData.month;
-                  const isToday = isSameDay(calendarData.today, day);
-                  const isOutOfRange =
-                    (minDate != null && day < minDate) || (maxDate != null && day > maxDate);
-                  const isDisabled = !isCurrentMonth || isOutOfRange;
-
-                  if (!isCurrentMonth) {
-                    return <View key={day.toISOString()} flex={1} width="100%" />;
-                  }
-
-                  const isSelected =
-                    mode === "range"
-                      ? (() => {
-                          const status = getRangeStatus(day, selectedDates);
-                          return (
-                            status === "range-start" ||
-                            status === "range-end" ||
-                            status === "selected-single"
-                          );
-                        })()
-                      : selectedDates.some((date) => isSameDay(date, day));
-
-                  const rangeStatus =
-                    mode === "range" ? getRangeStatus(day, selectedDates) : "none";
-                  const isInRange = rangeStatus === "in-range";
-
-                  return (
-                    <View
-                      key={day.toISOString()}
-                      flex={1}
-                      width="100%"
-                      justifyContent="center"
-                      alignItems="center"
-                      position="relative"
-                    >
-                      {/* Range background stripe */}
-                      {mode === "range" &&
-                        (isInRange ||
-                          rangeStatus === "range-start" ||
-                          rangeStatus === "range-end") && (
-                          <View
-                            transition="quick"
-                            position="absolute"
-                            height="100%"
-                            zIndex={0}
-                            backgroundColor={formInputColors.background.focus}
-                            enterStyle={{ opacity: 0 }}
-                            exitStyle={{ opacity: 0 }}
-                            opacity={1}
-                            {...(rangeStatus === "range-start"
-                              ? { insetInlineStart: "50%", insetInlineEnd: 0, width: "50%" }
-                              : rangeStatus === "range-end"
-                                ? { insetInlineStart: 0, insetInlineEnd: "50%", width: "50%" }
-                                : { insetInlineStart: 0, insetInlineEnd: 0, width: "100%" })}
-                          />
-                        )}
-
-                      <Button
-                        chromeless
-                        circular
-                        {...dayCellRadius(knobProps)}
-                        disabled={isDisabled}
-                        onPress={() => !isDisabled && onDayPress(day)}
-                        theme={isSelected ? ("accent" as any) : undefined}
-                        borderWidth={knobProps.borderRadius.borderWidth || 1}
-                        borderColor={isSelected ? "$backgroundStrong" : "transparent"}
-                        backgroundColor={
-                          isSelected ? formInputColors.background.focus : "transparent"
-                        }
-                        zIndex={1}
-                      >
-                        {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 : formCommonColors.text}
-                          >
-                            {day.getDate()}
-                          </Button.Text>
-                        )}
-                      </Button>
-                    </View>
-                  );
-                })}
-              </View>
-            );
-          })}
-        </View>
-      </View>
-    </AnimatePresence>
+    <CalendarDays
+      calendarData={calendarData}
+      minDate={minDate}
+      maxDate={maxDate}
+      skipEmptyWeeks
+      isSelected={(day) => {
+        if (mode === "range") {
+          const status = getRangeStatus(day, selectedDates);
+          return (
+            status === "range-start" || status === "range-end" || status === "selected-single"
+          );
+        }
+        return selectedDates.some((date) => isSameDay(date, day));
+      }}
+      onSelect={onDayPress}
+      selectedBackground={formInputColors.background.focus}
+      onToday={() => onDayPress(new Date())}
+      rangeStripe={
+        mode === "range"
+          ? (day) => {
+              const rangeStatus = getRangeStatus(day, selectedDates);
+              if (
+                rangeStatus !== "in-range" &&
+                rangeStatus !== "range-start" &&
+                rangeStatus !== "range-end"
+              ) {
+                return null;
+              }
+              return (
+                <View
+                  transition="quick"
+                  position="absolute"
+                  height="100%"
+                  zIndex={0}
+                  backgroundColor={formInputColors.background.focus}
+                  enterStyle={{ opacity: 0 }}
+                  exitStyle={{ opacity: 0 }}
+                  opacity={1}
+                  {...(rangeStatus === "range-start"
+                    ? { insetInlineStart: "50%", insetInlineEnd: 0, width: "50%" }
+                    : rangeStatus === "range-end"
+                      ? { insetInlineStart: 0, insetInlineEnd: "50%", width: "50%" }
+                      : { insetInlineStart: 0, insetInlineEnd: 0, width: "100%" })}
+                />
+              );
+            }
+          : undefined
+      }
+    />
   );
 }
 
@@ -258,7 +176,7 @@ function CalendarPanel({
       yearPageStart={yearPageStart}
       setYearPageStart={setYearPageStart}
     >
-      <View flexDirection="column" alignItems="center" gap="$4" width="100%">
+      <CalendarPanelFrame>
         <CalendarHeader
           year={calendarData.year}
           monthName={calendarData.monthName}
@@ -280,7 +198,7 @@ function CalendarPanel({
           minDate={minDate}
           maxDate={maxDate}
         />
-      </View>
+      </CalendarPanelFrame>
     </CalendarViewSwitcher>
   );
 }
@@ -298,7 +216,8 @@ export function Calendar({
   maxDate,
   limit = 10,
 }: CalendarProps) {
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useCalendarKnobs();
+  const { px } = knobProps.nestedControl;
   const [internalMode, setInternalMode] = useState<CalendarMode>(modeProp ?? "range");
   const mode = modeProp ?? internalMode;
 
@@ -384,21 +303,12 @@ export function Calendar({
     return date;
   }, [displayDate]);
 
-  const [viewMode, setViewMode] = useState<ViewMode>("day");
-  const calendarData = useCalendarData(displayDate);
-  const [yearPageStart, setYearPageStart] = useState(
-    () => calendarData.year - (calendarData.year % yearPageSize),
-  );
-
   return (
-    <YStack {...knobProps.gapLg}>
+    <YStack {...knobProps.gap}>
       {showTabs && (
         <XStack
           alignSelf="center"
-          // Full control-tier fragment spread (AGENTS.md knob rule) so the
-          // cornerSmoothing class rides along with the radius; the pill's
-          // border chrome is ejected after the spread (owner-decided:
-          // divider hairline + min-1 width stay as designed).
+          width={px * 7}
           {...knobProps.borderRadius}
           borderWidth={knobProps.borderRadius.borderWidth || 1}
           borderColor={formCommonColors.divider}
@@ -406,19 +316,22 @@ export function Calendar({
           padding={2}
         >
           {(["range", "single", "multiple"] as const).map((m) => (
-            <Button
+            <View
               key={m}
-              size={knobProps.sizeToken}
-              chromeless
               flex={1}
+              height={px}
+              alignItems="center"
+              justifyContent="center"
+              cursor="pointer"
               theme={mode === m ? ("accent" as any) : undefined}
               backgroundColor={mode === m ? "$background" : "transparent"}
               onPress={() => handleModeChange(m)}
+              data-nested-px={px}
             >
-              <Text fontSize={knobProps.sizeToken} {...knobProps.body}>
+              <Text {...knobProps.label} {...knobProps.textWeight} fontWeight={mode === m ? "600" : "400"}>
                 {m === "range" ? t("Range") : m === "single" ? t("Single") : t("Multiple")}
               </Text>
-            </Button>
+            </View>
           ))}
         </XStack>
       )}
@@ -426,16 +339,13 @@ export function Calendar({
       <View
         backgroundColor="$background"
         flexDirection="row"
-        {...knobProps.gapLg}
+        {...knobProps.gap}
         {...knobProps.panelPadding}
-        // Full fragment spread (AGENTS.md knob rule) so the cornerSmoothing
-        // class rides along with the outer radius; border chrome stays the
-        // calendar's own (divider hairline, min-1 width).
         {...knobProps.borderRadiusOuter}
         borderWidth={knobProps.borderRadius.borderWidth || 1}
         borderColor={formCommonColors.divider}
       >
-        {viewMode === "day" && !fullWidthMode && (
+        {!fullWidthMode && (
           <CalendarPanel
             displayDate={displayDate}
             selectedDates={selectedDates}
@@ -448,7 +358,7 @@ export function Calendar({
           />
         )}
 
-        {viewMode === "day" && fullWidthMode && (
+        {fullWidthMode && (
           <>
             <CalendarPanel
               displayDate={prevMonthDate}
@@ -475,46 +385,6 @@ export function Calendar({
             />
           </>
         )}
-
-        {viewMode === "month" && (
-          <View flexDirection="column" alignItems="center" {...knobProps.gapLg} width="100%">
-            <Text
-              fontSize={knobProps.sizeToken}
-              alignSelf="center"
-              {...knobProps.body}
-              {...knobProps.textWeight}
-            >
-              Select a month
-            </Text>
-            <MonthGrid
-              currentYear={calendarData.year}
-              selectedMonth={calendarData.month}
-              onSelectMonth={(month) => {
-                const newDate = new Date(displayDate);
-                newDate.setMonth(month);
-                setDisplayDate(newDate);
-                setViewMode("day");
-              }}
-            />
-          </View>
-        )}
-
-        {viewMode === "year" && (
-          <View flexDirection="column" alignItems="center" {...knobProps.gapLg} width="100%">
-            <YearGrid
-              yearPageStart={yearPageStart}
-              selectedYear={calendarData.year}
-              onSelectYear={(year) => {
-                const newDate = new Date(displayDate);
-                newDate.setFullYear(year);
-                setDisplayDate(newDate);
-                setViewMode("month");
-              }}
-              onPrevPage={() => setYearPageStart((s) => s - yearPageSize)}
-              onNextPage={() => setYearPageStart((s) => s + yearPageSize)}
-            />
-          </View>
-        )}
       </View>
     </YStack>
   );

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

@@ -41,6 +41,24 @@ function getEnabledDayButtons(root: ParentNode): HTMLButtonElement[] {
 
 describe("DatePicker", () => {
   describe("without form context", () => {
+    it("rings the whole trigger box including the calendar icon slot (LC-71)", async () => {
+      const DatePicker = await loadDatePicker();
+      const result = renderWithProviders(<DatePicker label="Date" />);
+      const trigger = result.container.querySelector(
+        '[data-testid="date-picker-trigger"]',
+      ) as HTMLElement;
+      const input = result.container.querySelector("input") as HTMLInputElement;
+      const label = result.container.querySelector("label") as HTMLLabelElement;
+      expect(trigger).toBeTruthy();
+      expect(trigger.contains(input)).toBe(true);
+      expect(trigger.className).toMatch(/mp-composite-ring/);
+      expect(trigger.getAttribute("tabindex")).toBe("0");
+      expect(trigger.getAttribute("role")).toBe("combobox");
+      expect(input.tabIndex).toBe(-1);
+      expect(trigger.id).toBeTruthy();
+      expect(label.htmlFor).toBe(trigger.id);
+    });
+
     it("should handle disabled state", async () => {
       const DatePicker = await loadDatePicker();
       const result = renderWithProviders(<DatePicker label="Date" name="date" disabled />);
@@ -50,9 +68,18 @@ describe("DatePicker", () => {
 
       const clickable = result.container.querySelector("input,button,[role='button']");
       if (clickable) {
+        // BOTH halves of a real click. `click` alone only exercised the
+        // trigger's own gated handler, so this passed while the field still
+        // opened in a browser (SB-M-614): FloatingPanel's opener is
+        // `useClick(..., { event: "mousedown" })`, and the disabled trigger
+        // is pointerEvents-none, so the press falls through to it.
+        fireEvent.mouseDown(clickable);
         fireEvent.click(clickable);
       }
-      expect(result.findTextElement("Select a month")).toBeUndefined();
+      await waitFor(() => {
+        expect(result.findTextElement("Select a month")).toBeUndefined();
+      });
+      expect(document.querySelector('[data-testid="floating-panel-viewport"]')).toBeNull();
     });
 
     it("fires canonical onChange and the deprecated onValueChange alias once when a day is picked", async () => {

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

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

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

@@ -49,8 +49,29 @@ describe("DateRangePicker", () => {
     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 DateRangePicker = await loadDateRangePicker();
+    const result = renderWithProviders(<DateRangePicker label="Range" name="range" />);
+    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 a start and end date", async () => {

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

@@ -26,7 +26,7 @@ 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 sizing" },
+    compact: { control: "boolean", description: "Use compact density (tighter layout gaps)" },
     size: { control: "select", options: ["$2", "$3", "$4"], description: "Field size" },
   },
   args: {