@multiplatform.one/forms 7.6.2 → 7.7.0

package/src/fields/DatePicker/index.tsx

@@ -1,448 +1,20 @@
-import type { DeepKeys, DeepValue } from "@tanstack/form-core";
-import { type ComponentProps, useCallback, useEffect, useRef, useState } from "react";
-import { DatePickerFieldValueSync } from "./fieldValueSync";
-import { coerceToDate } from "./utils";
-import { type Popover, useProps } from "tamagui";
-
-import { Field, FieldLayout } from "../../fieldLayout";
-import { t } from "../../shared/t";
-import {
-  getFieldError,
-  mergeFieldHandler,
-  useFormField,
-  useResolvedValidators,
-} from "../../shared/utils";
-import type { FormFieldProps } from "../../fieldLayout";
-import { Input as InputParts } from "../../InputParts";
-import { Skeleton } from "../../Skeleton";
-import type { FieldComponentProps, Validator } from "../../types";
-
-import {
-  CalendarDays,
-  CalendarHeader,
-  CalendarPanelFrame,
-  DatePickerInputTrigger,
-  DatePickerPopoverShell,
-  CalendarViewSwitcher,
-  formatDateDisplay,
-  isSameDay,
-  useCalendarData,
-  useDateNavigation,
-  yearPageSize,
-} from "./parts";
-
-import type { ViewMode } from "./parts";
-
-export type { ViewMode } from "./parts";
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-export type DatePickerProps<
-  TParentData = any,
-  TName extends DeepKeys<TParentData> = any,
-  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
-  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
-  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
-> = Omit<
-  FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
-  // "onChange": FormFieldProps carries the DOM ChangeEventHandler from
-  // YStackProps; this field exposes a canonical value callback instead.
-  "children" | "field" | "onChange"
-> &
-  Partial<
-    Omit<
-      FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
-      "children"
-    >
-  > & {
-    readOnly?: boolean;
-    placeholder?: string;
-    format?: string;
-    minDate?: Date;
-    maxDate?: Date;
-    disabled?: boolean;
-    inputProps?: Omit<ComponentProps<typeof InputParts.Area>, "value" | "onChangeText" | "ref">;
-    /** When true, renders a skeleton placeholder instead of the date 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;
-    /**
-     * Canonical change handler, consistent with the rest of the field family.
-     * Prefer this over `onValueChange`.
-     */
-    onChange?: (value: Date | null) => void;
-    /** @deprecated Use `onChange` instead. */
-    onValueChange?: (value: Date | null) => void;
-  };
-
-// ---------------------------------------------------------------------------
-// DayGrid — animated day cells (single-select)
-// ---------------------------------------------------------------------------
-
-interface DayGridProps {
-  calendarData: ReturnType<typeof useCalendarData>;
-  selectedDate: Date | null;
-  onSelectDate: (date: Date) => void;
-  minDate?: Date;
-  maxDate?: Date;
-}
-
-function DayGrid({ calendarData, selectedDate, onSelectDate, minDate, maxDate }: DayGridProps) {
-  return (
-    <CalendarDays
-      calendarData={calendarData}
-      minDate={minDate}
-      maxDate={maxDate}
-      isSelected={(day) => isSameDay(selectedDate, day)}
-      onSelect={onSelectDate}
-      onToday={() => onSelectDate(new Date())}
-    />
-  );
-}
-
-// ---------------------------------------------------------------------------
-// CalendarBody — orchestrates day/month/year views
-// ---------------------------------------------------------------------------
-
-interface CalendarBodyProps {
-  displayDate: Date;
-  selectedDate: Date | null;
-  onSelectDate: (date: Date) => void;
-  onNavigateMonth: (direction: "prev" | "next") => void;
-  onSetDisplayDate: (date: Date) => void;
-  minDate?: Date;
-  maxDate?: Date;
-}
-
-function CalendarBody({
-  displayDate,
-  selectedDate,
-  onSelectDate,
-  onNavigateMonth,
-  onSetDisplayDate,
-  minDate,
-  maxDate,
-}: CalendarBodyProps) {
-  const [viewMode, setViewMode] = useState<ViewMode>("day");
-  const calendarData = useCalendarData(displayDate);
-  const [yearPageStart, setYearPageStart] = useState(
-    () => calendarData.year - (calendarData.year % yearPageSize),
-  );
-
-  return (
-    <CalendarViewSwitcher
-      calendarData={calendarData}
-      displayDate={displayDate}
-      onSetDisplayDate={onSetDisplayDate}
-      viewMode={viewMode}
-      setViewMode={setViewMode}
-      yearPageStart={yearPageStart}
-      setYearPageStart={setYearPageStart}
-    >
-      <CalendarPanelFrame>
-        <CalendarHeader
-          year={calendarData.year}
-          monthName={calendarData.monthName}
-          onPrevMonth={() => onNavigateMonth("prev")}
-          onNextMonth={() => onNavigateMonth("next")}
-          onYearPress={() => {
-            setYearPageStart(calendarData.year - (calendarData.year % yearPageSize));
-            setViewMode("year");
-          }}
-          onMonthPress={() => setViewMode("month")}
-        />
-        <DayGrid
-          calendarData={calendarData}
-          selectedDate={selectedDate}
-          onSelectDate={onSelectDate}
-          minDate={minDate}
-          maxDate={maxDate}
-        />
-      </CalendarPanelFrame>
-    </CalendarViewSwitcher>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// DatePicker — main exported component
-// ---------------------------------------------------------------------------
-
-export function DatePicker<
-  TParentData,
-  TName extends DeepKeys<TParentData>,
-  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
-  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
-  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
->(props: DatePickerProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
-  const {
-    defaultValue,
-    value: controlledValue,
-    onChange,
-    onValueChange,
-    form,
-    inputProps: _inputProps,
-    placeholder = t("Select date"),
-    format: _format = "MM/DD/YYYY",
-    minDate,
-    maxDate,
-    disabled,
-    mode,
-    name,
-    preserveValue,
-    validators,
-    label,
-    labelProps,
-    error: errorProp,
-    helperText,
-    required,
-    size,
-    readOnly,
-    onBlur,
-    skeleton,
-    compact,
-    id: idProp,
-    ..._restProps
-  } = useProps(props);
-
-  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
-  const resolvedValidators = useResolvedValidators(required, validators, label, name);
-  const hasLabel = Boolean(label);
-
-  const [open, setOpen] = useState(false);
-  const [selectedDate, setSelectedDate] = useState<Date | null>(() =>
-    coerceToDate(controlledValue ?? defaultValue),
-  );
-  // Sync external `value` changes (controlled standalone mode).
-  useEffect(() => {
-    if (controlledValue === undefined) return;
-    setSelectedDate(coerceToDate(controlledValue));
-  }, [controlledValue]);
-  // Axiom 11 VALUE IS DATA: the calendar opens at the selected value's
-  // month, not today's — seed the display date from the current value and
-  // re-seed on every open (see openCalendar / handleOpenChange).
-  const { displayDate, setDisplayDate, navigateMonth } = useDateNavigation(
-    selectedDate ?? undefined,
-  );
-  const popoverRef = useRef<Popover>(null);
-
-  const closePopover = useCallback(() => {
-    setOpen(false);
-    popoverRef.current?.close();
-  }, []);
-
-  useEffect(() => {
-    if (selectedDate) closePopover();
-  }, [selectedDate, closePopover]);
-
-  const handleDateSelect = useCallback(
-    (date: Date, fieldChange?: (value: any) => void) => {
-      if (minDate && date < minDate) return;
-      if (maxDate && date > maxDate) return;
-      setSelectedDate(date);
-      setDisplayDate(date);
-      // Form mode: commit into TanStack field state (clears meta errors on change).
-      fieldChange?.(date);
-      // Canonical `onChange` and the alias `onValueChange` both fire (single emit).
-      onChange?.(date);
-      onValueChange?.(date);
-      closePopover();
-    },
-    [minDate, maxDate, setDisplayDate, closePopover, onChange, onValueChange],
-  );
-
-  const handleClearDate = useCallback(
-    (fieldChange?: (value: any) => void) => {
-      setSelectedDate(null);
-      setDisplayDate(new Date());
-      fieldChange?.(null);
-      onChange?.(null);
-      onValueChange?.(null);
-    },
-    [setDisplayDate, onChange, onValueChange],
-  );
-
-  const calendarContent = (fieldChange?: (value: any) => void) => (
-    <CalendarBody
-      displayDate={displayDate}
-      selectedDate={selectedDate}
-      onSelectDate={(date) => handleDateSelect(date, fieldChange)}
-      onNavigateMonth={navigateMonth}
-      onSetDisplayDate={setDisplayDate}
-      minDate={minDate}
-      maxDate={maxDate}
-    />
-  );
-
-  const renderPopover = (
-    hasError?: boolean,
-    blurHandler?: (...args: any[]) => void,
-    fieldChange?: (value: any) => void,
-  ) => {
-    if (readOnly) {
-      return (
-        <InputParts.Box>
-          <InputParts.Area
-            value={formatDateDisplay(selectedDate)}
-            readOnly
-            aria-readonly="true"
-            aria-required={required || undefined}
-            aria-invalid={hasError || undefined}
-            placeholder={placeholder}
-          />
-        </InputParts.Box>
-      );
-    }
-
-    const handleOpenChange = (isOpen: boolean) => {
-      // Re-seed the visible month from the current value on every open —
-      // the value may have changed (externally or by a pick) since mount.
-      if (isOpen && selectedDate) setDisplayDate(selectedDate);
-      setOpen(isOpen);
-      if (!isOpen) {
-        blurHandler?.();
-      }
-    };
-
-    return (
-      <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).
-        triggerA11y={{
-          label: (typeof label === "string" && label) || t("Date"),
-          value: formatDateDisplay(selectedDate) || placeholder,
-          hint: helperText,
-        }}
-        trigger={
-          <DatePickerInputTrigger
-            value={formatDateDisplay(selectedDate)}
-            placeholder={placeholder}
-            disabled={disabled}
-            open={open}
-            onReset={() => handleClearDate(fieldChange)}
-            onButtonPress={() => {
-              if (selectedDate) setDisplayDate(selectedDate);
-              setOpen(true);
-            }}
-            error={!!hasError}
-            id={id}
-            // 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={
-              [
-                helperText && id ? `${id}-description` : undefined,
-                hasError && id ? `${id}-error` : undefined,
-              ]
-                .filter(Boolean)
-                .join(" ") || undefined
-            }
-            aria-required={required || undefined}
-            aria-invalid={hasError || undefined}
-          />
-        }
-        clearValue={formatDateDisplay(selectedDate)}
-        onClear={() => handleClearDate(fieldChange)}
-      >
-        {calendarContent(fieldChange)}
-      </DatePickerPopoverShell>
-    );
-  };
-
-  // Render skeleton placeholder (after all hooks)
-  if (skeleton) {
-    return (
-      <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
-        <Skeleton variant="rounded" width="100%" height={knobProps.sizeToken} />
-      </FieldLayout>
-    );
-  }
-
-  if (!resolvedForm || !name) {
-    return (
-      <FieldLayout
-        id={id}
-        label={label}
-        labelProps={labelProps}
-        error={errorProp}
-        helperText={helperText}
-        required={required}
-        size={size}
-        knobProps={knobProps}
-        onBlur={onBlur}
-        // LC-40: FieldLayout owns the dimWhole assembly dim (keepLabel pins
-        // the sibling label/helper readable) — it needs the disabled state.
-        disabled={disabled}
-      >
-        <InputParts size={size || knobProps.sizeToken}>{renderPopover(!!errorProp)}</InputParts>
-      </FieldLayout>
-    );
-  }
-
-  return (
-    <Field
-      defaultValue={defaultValue}
-      form={resolvedForm}
-      mode={mode}
-      name={name}
-      preserveValue={preserveValue}
-      validators={resolvedValidators}
-    >
-      {(field) => {
-        const resolvedError = getFieldError(field, errorProp);
-
-        return (
-          <>
-            {/* Form branch displays from `selectedDate` — keep it synced to
-                the live field value (late seeds / programmatic updates). */}
-            <DatePickerFieldValueSync value={field.state.value} onSync={setSelectedDate} />
-            <FieldLayout
-              id={id}
-              label={label}
-              labelProps={labelProps}
-              error={resolvedError}
-              helperText={helperText}
-              required={required}
-              size={size}
-              knobProps={knobProps}
-              // LC-40: see standalone branch — FieldLayout carries dimWhole.
-              disabled={disabled}
-            >
-              <InputParts size={size || knobProps.sizeToken}>
-                {renderPopover(
-                  !!resolvedError,
-                  mergeFieldHandler(field, "handleBlur", onBlur),
-                  mergeFieldHandler(field, "handleChange"),
-                )}
-              </InputParts>
-            </FieldLayout>
-          </>
-        );
-      }}
-    </Field>
-  );
-}
-
-// Re-export new picker variants
-export { MultiDatePicker } from "./MultiDatePicker";
-export type { MultiDatePickerProps } from "./MultiDatePicker";
-export { DateRangePicker } from "./DateRangePicker";
-export type { DateRange, DateRangePickerProps } from "./DateRangePicker";
-export { Calendar } from "./Calendar";
-export type { CalendarProps, CalendarMode } from "./Calendar";
-export { MonthPicker } from "./MonthPicker";
-export type { MonthPickerProps, MonthPickerValue } from "./MonthPicker";
-export { DatetimePicker } from "./DatetimePicker";
-export type { DatetimePickerProps } from "./DatetimePicker";
+export {
+  Calendar,
+  DatePicker,
+  DateRangePicker,
+  DatetimePicker,
+  MonthPicker,
+  MultiDatePicker,
+} from "./catalog";
+export type {
+  CalendarMode,
+  CalendarProps,
+  DatePickerProps,
+  DateRange,
+  DateRangePickerProps,
+  DatetimePickerProps,
+  MonthPickerProps,
+  MonthPickerValue,
+  MultiDatePickerProps,
+  ViewMode,
+} from "./catalog";

package/src/fields/DatePicker/parts.tsx

@@ -1,5 +1,10 @@
-import { ChevronLeft, ChevronRight } from "@tamagui/lucide-icons-2";
-import { CalendarBlankIcon, ClockIcon, XIcon } from "@phosphor-icons/react";
+import {
+  CalendarBlankIcon,
+  CaretLeftIcon,
+  CaretRightIcon,
+  ClockIcon,
+  XIcon,
+} from "@phosphor-icons/react";
 import {
   ensureFocusVisibleRing,
   formatAbsoluteDate,
@@ -622,7 +627,7 @@ export function CalendarHeader({
     >
       {showPrev && onPrevMonth ? (
         <CalendarChromeButton onPress={onPrevMonth} label={t("Previous month")}>
-          <ChevronLeft size={16} />
+          <CaretLeftIcon size={16} color="currentColor" />
         </CalendarChromeButton>
       ) : (
         <View width={px} height={px} />
@@ -643,7 +648,7 @@ export function CalendarHeader({
 
       {showNext && onNextMonth ? (
         <CalendarChromeButton onPress={onNextMonth} label={t("Next month")}>
-          <ChevronRight size={16} />
+          <CaretRightIcon size={16} color="currentColor" />
         </CalendarChromeButton>
       ) : (
         <View width={px} height={px} />
@@ -763,13 +768,13 @@ export function YearGrid({
     <View width={px * 7} alignSelf="center" {...knobProps.gap}>
       <View flexDirection="row" width={px * 7} alignItems="center" justifyContent="space-between">
         <CalendarChromeButton onPress={onPrevPage} label={t("Previous years")}>
-          <ChevronLeft size={16} />
+          <CaretLeftIcon size={16} color="currentColor" />
         </CalendarChromeButton>
         <Text {...knobProps.label} {...knobProps.textWeight}>
           {years[0]} – {years[years.length - 1]}
         </Text>
         <CalendarChromeButton onPress={onNextPage} label={t("Next years")}>
-          <ChevronRight size={16} />
+          <CaretRightIcon size={16} color="currentColor" />
         </CalendarChromeButton>
       </View>
 

package/src/fields/Duration/Duration.spec.tsx

@@ -7,6 +7,7 @@ import { TableCellContext } from "../../shared/tableCellContext";
 import { getFieldHeight } from "../../shared/utils";
 import {
   Duration,
+  DURATION_PRESET_SIZE,
   durationSegmentWidth,
   normalizeSeconds,
   parseDurationText,
@@ -133,6 +134,55 @@ describe("Duration", () => {
   });
 
   describe("design law", () => {
+    it("packs the clock and segments at the start of a stretched box", () => {
+      const result = renderWithProviders(<Duration label="Wide" value={3600} />);
+      const box = result.container.querySelector("[data-duration-box]") as HTMLElement;
+      const row = result.container.querySelector("[data-duration-row]") as HTMLElement;
+      expect(box).toBeTruthy();
+      expect(row).toBeTruthy();
+      expect(getComputedStyle(box).justifyContent).toMatch(/flex-start|start/);
+      expect(getComputedStyle(row).justifyContent).toMatch(/flex-start|start/);
+    });
+
+    it("keeps segment inputs inside the box at size $3", () => {
+      const result = renderWithProviders(<Duration label="S" size="$3" value={3600} />);
+      const box = result.container.querySelector("[data-duration-box]") as HTMLElement;
+      const hours = result.container.querySelector('input[aria-label="Hours"]') as HTMLElement;
+      expect(box).toBeTruthy();
+      expect(hours).toBeTruthy();
+      const recipeHeight = sizeRecipeForToken("$3").height;
+      expect(Number(hours.getAttribute("data-duration-input-height"))).toBe(recipeHeight);
+      const attrHeight = (el: HTMLElement) => {
+        const a = el.getAttribute("height");
+        if (a && /^\d+(\.\d+)?$/.test(a)) return Number(a);
+        const s = el.style.height;
+        if (s && /^\d+(\.\d+)?(px)?$/.test(s)) return Number.parseFloat(s);
+        return 0;
+      };
+      const inputH = attrHeight(hours);
+      if (inputH > 0) expect(inputH).toBeLessThanOrEqual(recipeHeight + 0.5);
+      const boxH = attrHeight(box);
+      if (boxH > 0 && inputH > 0) expect(inputH).toBeLessThanOrEqual(boxH + 0.5);
+    });
+
+    it("pins six default preset chips at the $2 / 28px family", () => {
+      expect(DURATION_PRESET_SIZE).toBe("$2");
+      expect(sizeRecipeForToken(DURATION_PRESET_SIZE).height).toBe(28);
+      const result = renderWithProviders(<Duration label="P" value={0} />);
+      const chips = result.container.querySelectorAll("[data-duration-preset]");
+      expect(chips).toHaveLength(6);
+      for (const chip of chips) {
+        const el = chip as HTMLElement;
+        const height =
+          parseFloat(getComputedStyle(el).height) ||
+          Number(el.getAttribute("height")) ||
+          parseFloat(el.style.height);
+        if (Number.isFinite(height) && height > 0) {
+          expect(height).toBe(sizeRecipeForToken(DURATION_PRESET_SIZE).height);
+        }
+      }
+    });
+
     it("sizes segments from the size recipe (LC-75)", () => {
       const small = renderWithProviders(<Duration label="S" size="$2" value={0} />);
       const large = renderWithProviders(<Duration label="L" size="$6" value={0} />);

package/src/fields/Duration/Duration.stories.tsx

@@ -120,6 +120,27 @@ export const Sizes: Story = {
   ),
 };
 
+export const FullWidth: Story = {
+  name: "FullWidth",
+  render: () => (
+    <YStack width="100%" gap="$4">
+      <Duration
+        label="Full width"
+        helperText="Clock and segments stay on the left of a stretched box"
+        value={3600}
+        onChange={action("onChange")}
+      />
+      <Duration
+        label="Small"
+        size="$3"
+        helperText="Segment inputs fill the 36px box"
+        value={3600}
+        onChange={action("onChange")}
+      />
+    </YStack>
+  ),
+};
+
 export const WithSeconds: Story = {
   args: {
     label: "Precise Duration",

package/src/fields/Duration/index.tsx

@@ -51,6 +51,9 @@ const defaultPresets: DurationPreset[] = [
   { label: "8h", seconds: 28800 },
 ];
 
+/** Preset chips stay on the $2 row (28px). The field size knob does not reach them. */
+export const DURATION_PRESET_SIZE = "$2" as const;
+
 function DurationSegment({
   id,
   unit,
@@ -96,7 +99,14 @@ function DurationSegment({
   };
 
   return (
-    <XStack alignItems="center" gap={recipe.gap} flexShrink={0} data-duration-segment={ariaLabel}>
+    <XStack
+      alignItems="center"
+      gap={recipe.gap}
+      flexGrow={0}
+      flexShrink={0}
+      height="100%"
+      data-duration-segment={ariaLabel}
+    >
       <InputParts.Area
         id={id}
         value={shown}
@@ -111,11 +121,18 @@ function DurationSegment({
         aria-invalid={hasError || undefined}
         color={formCommonColors.text}
         textAlign="right"
+        {...knobProps.controlType}
+        flex={0}
         width={segmentWidth}
         minWidth={segmentWidth}
+        maxWidth={segmentWidth}
+        height={recipe.height}
+        minHeight={0}
+        maxHeight={recipe.height}
+        size={sizeToken as SizeTokens}
+        data-duration-input-height={recipe.height}
         paddingHorizontal={0}
         maxLength={wide ? 5 : 3}
-        {...knobProps.controlType}
         {...(isWeb && disabled ? { tabIndex: -1 } : undefined)}
         onChangeText={(text) => {
           if (locked) return;
@@ -222,9 +239,30 @@ function DurationControl({
         aria-label={hasLabel ? undefined : t("Duration")}
         data-ring-target="box"
         data-duration-box=""
+        justifyContent="flex-start"
+        alignItems="stretch"
+        size={sizeToken as SizeTokens}
+        height={recipe.height}
+        sizeRecipeEscape="duration-box"
       >
-        <InputParts.Section>
-          <XStack alignItems="center" flex={1} width="100%" gap={recipe.gap}>
+        <InputParts.Section
+          justifyContent="flex-start"
+          alignItems="stretch"
+          flexGrow={1}
+          flexShrink={1}
+          flexBasis="auto"
+          minWidth={0}
+        >
+          <XStack
+            alignItems="center"
+            justifyContent="flex-start"
+            width="100%"
+            height="100%"
+            flexGrow={0}
+            flexShrink={1}
+            gap={recipe.gap}
+            data-duration-row=""
+          >
             {resolvedClock != null ? (
               <InputParts.Icon adornment="leading">{resolvedClock}</InputParts.Icon>
             ) : null}
@@ -318,7 +356,7 @@ function DurationPresets({
           <Button
             key={preset.seconds}
             compact
-            size="$2"
+            size={DURATION_PRESET_SIZE}
             outlined={!selected}
             accent={selected}
             data-duration-preset={preset.label}