@multiplatform.one/forms 6.7.0 → 7.0.0

package/src/fields/DatePicker/DatetimePicker.tsx

@@ -1,17 +1,10 @@
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
-import {
-  ensureFocusVisibleRing,
-  formatAbsoluteDate,
-  useAccentOnSurface,
-  useResolvedKnobs,
-} from "@multiplatform.one/theme";
+import { formatAbsoluteDateTime } from "@multiplatform.one/theme";
 import { type ComponentProps, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { coerceToDate } from "./utils";
 import { DatePickerFieldValueSync } from "./fieldValueSync";
-import { Calendar, X } from "@tamagui/lucide-icons-2";
-import { AnimatePresence, Text, View, useProps, type Popover } from "tamagui";
+import { Text, View, useProps, type Popover } from "tamagui";
 
-import { Button } from "../../Button";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { FloatingPanel } from "../../FloatingPanel";
 import { formCommonColors, formInputColors } from "../../shared/colorRamps";
@@ -24,21 +17,21 @@ import {
   useResolvedValidators,
 } from "../../shared/utils";
 import type { FormFieldProps } from "../../fieldLayout";
-import { FocusContext, Input as InputParts } from "../../InputParts";
+import { Input as InputParts } from "../../InputParts";
 import { Skeleton } from "../../Skeleton";
 import type { FieldComponentProps, Validator } from "../../types";
 
 import {
+  CalendarDays,
   CalendarHeader,
-  WeekView,
-  dayCellRadius,
+  CalendarPanelFrame,
+  CalendarViewSwitcher,
+  DatePickerInputTrigger,
   isSameDay,
-  toWeeks,
   useCalendarData,
-  useDateAnimation,
+  useCalendarKnobs,
   useDateNavigation,
   yearPageSize,
-  CalendarViewSwitcher,
 } from "./parts";
 
 // ---------------------------------------------------------------------------
@@ -47,14 +40,6 @@ import {
 
 type TimeFormat = "12h" | "24h";
 
-/**
- * The knob focus ring must be CSS-driven on the focused input itself
- * (DG-A11Y-01): Input.Box paints its ring from React `focused` state one
- * frame after focus, which synchronous a11y probes never see. Same
- * OTP/Stepper/Input template — Box ring suppressed, ring lives on the Area.
- */
-const suppressBoxFocusRing = { focused: false, setFocused: (_val: boolean) => {} };
-
 export type DatetimePickerProps<
   TParentData = any,
   TName extends DeepKeys<TParentData> = any,
@@ -82,7 +67,7 @@ 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, 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;
@@ -107,29 +92,24 @@ function parseTimeFromDate(date: Date): { h: number; m: number; s: number } {
   };
 }
 
+/**
+ * LC-12 TIMESTAMP-REGISTER: one register formats the whole value, date part
+ * and time part together. Composing `formatAbsoluteDate` with a hand-built
+ * clock is what let this half drift from the native half by the separator
+ * Intl puts between the two ("Mar 5, 2026 2:30 PM" vs "Mar 5, 2026, 2:30 PM");
+ * the picker's `timeFormat` / `showSeconds` contract now rides the register.
+ */
 function formatDatetimeDisplay(
   date: Date | null,
   timeFormat: TimeFormat,
   showSeconds: boolean,
 ): string {
   if (!date) return "";
-  // Date part in the house absolute register (LC-12 / DF-14); the time part
-  // keeps this picker's explicit timeFormat/showSeconds contract.
-  const dateStr = formatAbsoluteDate(date, { year: "always" });
-
-  const h = date.getHours();
-  const m = date.getMinutes();
-  const s = date.getSeconds();
-
-  const secSuffix = showSeconds ? `:${String(s).padStart(2, "0")}` : "";
-
-  if (timeFormat === "24h") {
-    return `${dateStr} ${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}${secSuffix}`;
-  }
-
-  const period = h >= 12 ? "PM" : "AM";
-  const displayH = h === 0 ? 12 : h > 12 ? h - 12 : h;
-  return `${dateStr} ${displayH}:${String(m).padStart(2, "0")}${secSuffix} ${period}`;
+  return formatAbsoluteDateTime(date, {
+    year: "always",
+    hour12: timeFormat === "12h",
+    seconds: showSeconds,
+  });
 }
 
 const hours24 = generateRange(0, 23);
@@ -149,85 +129,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
-                    {...dayCellRadius(knobProps)}
-                    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())}
+    />
   );
 }
 
@@ -250,7 +160,7 @@ function TimeSection({
   minuteStep,
   showSeconds,
 }: TimeSectionProps) {
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useCalendarKnobs();
   const { h, m, s } = parseTimeFromDate(selectedDate);
   const minuteValues = useMemo(() => generateRange(0, 59, minuteStep), [minuteStep]);
 
@@ -418,7 +328,8 @@ function DatetimePickerBody({
   minuteStep,
   showSeconds,
 }: DatetimePickerBodyProps) {
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useCalendarKnobs();
+  const { px } = knobProps.nestedControl;
   const [viewMode, setViewMode] = useState<"day" | "month" | "year">("day");
   const [activeTab, setActiveTab] = useState<ViewMode>("date");
   const calendarData = useCalendarData(displayDate);
@@ -450,26 +361,33 @@ function DatetimePickerBody({
   );
 
   return (
-    <View flexDirection="column" alignItems="center" {...knobProps.gap} width="100%">
-      {/* Tab selector */}
-      <View flexDirection="row" gap="$2" width="100%">
-        <Button
-          flex={1}
-          chromeless={activeTab !== "date"}
-          theme={activeTab === "date" ? ("accent" as any) : undefined}
-          onPress={() => setActiveTab("date")}
-        >
-          <Button.Text>{t("Date")}</Button.Text>
-        </Button>
-        <Button
-          flex={1}
-          chromeless={activeTab !== "time"}
-          theme={activeTab === "time" ? ("accent" as any) : undefined}
-          onPress={() => setActiveTab("time")}
-          disabled={!selectedDatetime}
-        >
-          <Button.Text>{t("Time")}</Button.Text>
-        </Button>
+    <View flexDirection="column" alignItems="center" {...knobProps.gap} width={px * 7} alignSelf="center">
+      <View flexDirection="row" width="100%">
+        {(["date", "time"] as const).map((tab) => {
+          const active = activeTab === tab;
+          const tabDisabled = tab === "time" && !selectedDatetime;
+          return (
+            <View
+              key={tab}
+              flex={1}
+              height={px}
+              alignItems="center"
+              justifyContent="center"
+              cursor={tabDisabled ? "default" : "pointer"}
+              opacity={tabDisabled ? 0.5 : 1}
+              theme={active ? ("accent" as any) : undefined}
+              backgroundColor={active ? "$background" : "transparent"}
+              onPress={() => {
+                if (!tabDisabled) setActiveTab(tab);
+              }}
+              data-nested-px={px}
+            >
+              <Text {...knobProps.label} {...knobProps.textWeight} fontWeight={active ? "600" : "400"}>
+                {tab === "date" ? t("Date") : t("Time")}
+              </Text>
+            </View>
+          );
+        })}
       </View>
 
       {activeTab === "date" ? (
@@ -482,13 +400,7 @@ function DatetimePickerBody({
           yearPageStart={yearPageStart}
           setYearPageStart={setYearPageStart}
         >
-          <View
-            flexDirection="column"
-            alignItems="center"
-            {...knobProps.gapLg}
-            width="100%"
-            {...knobProps.panelPadding}
-          >
+          <CalendarPanelFrame>
             <CalendarHeader
               year={calendarData.year}
               monthName={calendarData.monthName}
@@ -507,7 +419,7 @@ function DatetimePickerBody({
               minDate={minDate}
               maxDate={maxDate}
             />
-          </View>
+          </CalendarPanelFrame>
         </CalendarViewSwitcher>
       ) : (
         selectedDatetime && (
@@ -569,13 +481,8 @@ export function DatetimePicker<
     ..._restProps
   } = useProps(props);
 
-  const { resolvedForm, knobProps, control, id } = useFormField({ form, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
-  // Inset (-2) keeps the ring inside the Box chrome (OTP/Stepper template).
-  const areaFocusRing = ensureFocusVisibleRing({
-    ...control.focusVisibleKnobProps,
-    outlineOffset: -2,
-  });
 
   const [open, setOpen] = useState(false);
   const [selectedDatetime, setSelectedDatetime] = useState<Date | null>(() =>
@@ -651,62 +558,19 @@ export function DatetimePicker<
   );
 
   const renderTrigger = (value: string, hasError?: boolean, fieldChange?: (value: any) => void) => (
-    <View cursor="pointer" onPress={disabled ? undefined : openPicker}>
-      <InputParts.Box
-        theme={hasError ? "red" : undefined}
-        // Elevation is an overlay recipe: it belongs on the open panel, never
-        // on the closed text-field trigger.
-        elevation={undefined}
-        {...(disabled ? { opacity: 0.5, pointerEvents: "none" } : undefined)}
-      >
-        <InputParts.Section>
-          <FocusContext.Provider {...suppressBoxFocusRing}>
-            <InputParts.Area
-              readOnly
-              value={value}
-              placeholder={placeholder}
-              disabled={disabled}
-              color={formCommonColors.text}
-              focusStyle={areaFocusRing}
-              focusVisibleStyle={areaFocusRing}
-              aria-required={required || undefined}
-              aria-invalid={hasError || undefined}
-              onKeyPress={
-                disabled
-                  ? undefined
-                  : (e: any) => {
-                      const key = e?.nativeEvent?.key ?? e?.key;
-                      if (key === "Enter" || key === " " || key === "Spacebar") {
-                        e?.preventDefault?.();
-                        openPicker();
-                      }
-                    }
-              }
-              {...(inputProps as any)}
-            />
-          </FocusContext.Provider>
-        </InputParts.Section>
-        <InputParts.Section>
-          {value ? (
-            <InputParts.Button
-              aria-label={t("Clear date")}
-              onPress={(e) => {
-                e.stopPropagation();
-                handleClearDatetime(fieldChange);
-              }}
-            >
-              <InputParts.Icon>
-                <X />
-              </InputParts.Icon>
-            </InputParts.Button>
-          ) : (
-            <InputParts.Icon adornment="trailing">
-              <Calendar />
-            </InputParts.Icon>
-          )}
-        </InputParts.Section>
-      </InputParts.Box>
-    </View>
+    <DatePickerInputTrigger
+      value={value}
+      placeholder={placeholder}
+      disabled={disabled}
+      open={open}
+      onReset={() => handleClearDatetime(fieldChange)}
+      onButtonPress={openPicker}
+      error={!!hasError}
+      id={id}
+      aria-label={label ? undefined : t("Date and time")}
+      aria-required={required || undefined}
+      aria-invalid={hasError || undefined}
+    />
   );
 
   const renderPopover = (
@@ -717,18 +581,16 @@ export function DatetimePicker<
     if (readOnly) {
       return (
         <InputParts.Box>
-          <FocusContext.Provider {...suppressBoxFocusRing}>
-            <InputParts.Area
-              value={displayValue}
-              readOnly
-              aria-readonly="true"
-              aria-required={required || undefined}
-              aria-invalid={hasError || undefined}
-              focusStyle={areaFocusRing}
-              focusVisibleStyle={areaFocusRing}
-              placeholder={placeholder}
-            />
-          </FocusContext.Provider>
+          <InputParts.Area
+            value={displayValue}
+            readOnly
+            id={id}
+            aria-label={label ? undefined : t("Date and time")}
+            aria-readonly="true"
+            aria-required={required || undefined}
+            aria-invalid={hasError || undefined}
+            placeholder={placeholder}
+          />
         </InputParts.Box>
       );
     }
@@ -745,7 +607,7 @@ export function DatetimePicker<
         trigger={renderTrigger(displayValue, hasError, fieldChange)}
         disabled={disabled}
         scrollable
-        sizing="fill"
+        sizing="grow"
         fitContent
       >
         {pickerContent(fieldChange)}

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

@@ -35,6 +35,20 @@ describe("MonthPicker", () => {
       expect(result.findTextElement("Select a month")).toBeDefined();
     });
 
+    // SB-KS-04 / LC-71: the trigger BOX (not the inner input) carries the
+    // field id so the ring wraps the calendar icon and the label focuses
+    // the perceived control.
+    it("the trigger carries the field id the sibling label resolves to", () => {
+      const result = renderWithProviders(<MonthPicker label="Month" name="month" />);
+      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("renders skeleton placeholder", () => {
       const result = renderWithProviders(<MonthPicker label="Loading" name="l" skeleton />);
       const input = result.container.querySelector("input");
@@ -203,4 +217,34 @@ describe("MonthPicker", () => {
       expect(onChange).not.toHaveBeenCalled();
     });
   });
+
+  // LC-46 PLATFORM-PROP-BOUNDARY spec arm: the year nav Buttons previously
+  // passed `scaleIcon` — not a forms-Button variant, so it leaked to the DOM
+  // and fired React's unknown-prop console.error whenever the picker opened.
+  // Open → zero leak-class console errors.
+  describe("DOM prop hygiene (LC-46)", () => {
+    it("opens without leaking non-DOM props (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(<MonthPicker label="Month" name="month" />);
+        const trigger = result.container.querySelector("input,button,[role='button']");
+        expect(trigger).toBeTruthy();
+        await act(async () => {
+          if (trigger) fireEvent.click(trigger);
+        });
+        await waitFor(() => {
+          expect(getMonthButtons(document.body).length).toBeGreaterThan(0);
+        });
+        const leaks = errorSpy.mock.calls
+          .map((args) => args.map(String).join(" "))
+          .filter((message) => LEAK.test(message));
+        expect(leaks).toEqual([]);
+        expect(document.querySelector("[scaleicon]")).toBeNull();
+      } finally {
+        errorSpy.mockRestore();
+      }
+    });
+  });
 });

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

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