@multiplatform.one/forms 6.0.0

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

@@ -0,0 +1,94 @@
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Calendar } from "./Calendar";
+
+vi.mock("@tamagui/lucide-icons-2", () => ({
+  ChevronLeft: () => null,
+  ChevronRight: () => null,
+  Calendar: () => null,
+  X: () => null,
+}));
+
+function getEnabledDayButtons(root: ParentNode): HTMLButtonElement[] {
+  const allButtons = Array.from(
+    root.querySelectorAll('button, [role="button"]'),
+  ) as HTMLButtonElement[];
+  return allButtons.filter((btn) => {
+    const text = btn.textContent?.trim() ?? "";
+    const isDay = /^\d{1,2}$/.test(text);
+    const disabled =
+      btn.hasAttribute("disabled") ||
+      btn.getAttribute("aria-disabled") === "true" ||
+      btn.hasAttribute("data-disabled");
+    return isDay && !disabled;
+  });
+}
+
+describe("Calendar", () => {
+  it("renders tabs and switches modes", async () => {
+    const onDatesChange = vi.fn();
+    const result = renderWithProviders(
+      <Calendar showTabs onDatesChange={onDatesChange} selectedDates={[new Date(2024, 0, 1)]} />,
+    );
+
+    const singleTab = result.findTextElement("Single");
+    const multipleTab = result.findTextElement("Multiple");
+    expect(singleTab).toBeDefined();
+    expect(multipleTab).toBeDefined();
+
+    await act(async () => {
+      if (singleTab) fireEvent.click(singleTab);
+    });
+    await act(async () => {
+      if (multipleTab) fireEvent.click(multipleTab);
+    });
+
+    await waitFor(() => {
+      expect(onDatesChange).toHaveBeenCalledWith([]);
+    });
+  });
+
+  it("emits single-date selection in single mode", async () => {
+    const onDatesChange = vi.fn();
+    const result = renderWithProviders(<Calendar mode="single" onDatesChange={onDatesChange} />);
+
+    await waitFor(() => {
+      expect(getEnabledDayButtons(result.container).length).toBeGreaterThan(0);
+    });
+
+    const firstDay = getEnabledDayButtons(result.container)[0];
+    await act(async () => {
+      fireEvent.click(firstDay);
+    });
+
+    await waitFor(() => {
+      const calls = onDatesChange.mock.calls;
+      expect(calls.length).toBeGreaterThan(0);
+      expect(calls[calls.length - 1][0]).toHaveLength(1);
+    });
+  });
+
+  it("respects selection limit in multiple mode", async () => {
+    const onDatesChange = vi.fn();
+    const result = renderWithProviders(
+      <Calendar mode="multiple" limit={1} onDatesChange={onDatesChange} />,
+    );
+
+    await waitFor(() => {
+      expect(getEnabledDayButtons(result.container).length).toBeGreaterThan(1);
+    });
+
+    const dayButtons = getEnabledDayButtons(result.container);
+    await act(async () => {
+      fireEvent.click(dayButtons[0]);
+      fireEvent.click(dayButtons[1]);
+    });
+
+    await waitFor(() => {
+      const calls = onDatesChange.mock.calls;
+      expect(calls.length).toBeGreaterThan(0);
+      expect(calls[calls.length - 1][0]).toHaveLength(1);
+    });
+  });
+});

package/src/fields/DatePicker/Calendar.tsx

@@ -0,0 +1,507 @@
+import { useCallback, useMemo, useState } from "react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { AnimatePresence, Separator, Text, View, XStack, YStack, useMedia } from "tamagui";
+
+import { Button } from "../../Button";
+import { formCommonColors, formInputColors } from "../../shared/colorRamps";
+import {
+  CalendarHeader,
+  MonthGrid,
+  ViewSwitcher,
+  WeekView,
+  YearGrid,
+  isSameDay,
+  toWeeks,
+  useCalendarData,
+  useDateAnimation,
+  useDateNavigation,
+  yearPageSize,
+} from "./parts";
+import type { CalendarData, ViewMode } from "./parts";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type CalendarMode = "single" | "multiple" | "range";
+
+export interface CalendarProps {
+  /** Which selection mode to use. Defaults to "range". */
+  mode?: CalendarMode;
+  /** Show tabs to switch between modes. Defaults to true. */
+  showTabs?: boolean;
+  /** Currently selected dates (controlled). */
+  selectedDates?: Date[];
+  /** Called when dates change. */
+  onDatesChange?: (dates: Date[]) => void;
+  /** Min selectable date. */
+  minDate?: Date;
+  /** Max selectable date. */
+  maxDate?: Date;
+  /** Max number of dates in "multiple" mode. Defaults to 10. */
+  limit?: number;
+}
+
+// ---------------------------------------------------------------------------
+// Range status helpers
+// ---------------------------------------------------------------------------
+
+type RangeStatus = "none" | "range-start" | "range-end" | "in-range" | "selected-single";
+
+function getRangeStatus(day: Date, dates: Date[]): RangeStatus {
+  if (dates.length === 0) return "none";
+  if (dates.length === 1 && isSameDay(day, dates[0])) return "selected-single";
+  if (dates.length < 2) return "none";
+
+  const [start, end] = dates[0] < dates[1] ? [dates[0], dates[1]] : [dates[1], dates[0]];
+  if (isSameDay(day, start)) return "range-start";
+  if (isSameDay(day, end)) return "range-end";
+  if (day > start && day < end) return "in-range";
+  return "none";
+}
+
+// ---------------------------------------------------------------------------
+// CalendarDayGrid — unified day grid supporting all modes
+// ---------------------------------------------------------------------------
+
+interface CalendarDayGridProps {
+  calendarData: CalendarData;
+  selectedDates: Date[];
+  onDayPress: (date: Date) => void;
+  mode: CalendarMode;
+  minDate?: Date;
+  maxDate?: Date;
+}
+
+function CalendarDayGrid({
+  calendarData,
+  selectedDates,
+  onDayPress,
+  mode,
+  minDate,
+  maxDate,
+}: CalendarDayGridProps) {
+  const { knobProps } = useResolvedKnobs();
+  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"
+                              ? { left: "50%", right: 0, width: "50%" }
+                              : rangeStatus === "range-end"
+                                ? { left: 0, right: "50%", width: "50%" }
+                                : { left: 0, right: 0, width: "100%" })}
+                          />
+                        )}
+
+                      <Button
+                        chromeless
+                        circular
+                        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="quicker"
+                            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 ? "$accentColor" : formCommonColors.text}
+                          >
+                            {day.getDate()}
+                          </Button.Text>
+                        )}
+                      </Button>
+                    </View>
+                  );
+                })}
+              </View>
+            );
+          })}
+        </View>
+      </View>
+    </AnimatePresence>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// CalendarPanel — one month panel with header + grid
+// ---------------------------------------------------------------------------
+
+interface CalendarPanelProps {
+  displayDate: Date;
+  selectedDates: Date[];
+  onDayPress: (date: Date) => void;
+  onNavigateMonth: (months: number) => void;
+  onSetDisplayDate: (date: Date) => void;
+  mode: CalendarMode;
+  minDate?: Date;
+  maxDate?: Date;
+  showPrev?: boolean;
+  showNext?: boolean;
+}
+
+function CalendarPanel({
+  displayDate,
+  selectedDates,
+  onDayPress,
+  onNavigateMonth,
+  onSetDisplayDate,
+  mode,
+  minDate,
+  maxDate,
+  showPrev = true,
+  showNext = true,
+}: CalendarPanelProps) {
+  const [viewMode, setViewMode] = useState<ViewMode>("day");
+  const calendarData = useCalendarData(displayDate);
+  const [yearPageStart, setYearPageStart] = useState(
+    () => calendarData.year - (calendarData.year % yearPageSize),
+  );
+
+  return (
+    <ViewSwitcher
+      calendarData={calendarData}
+      displayDate={displayDate}
+      onSetDisplayDate={onSetDisplayDate}
+      viewMode={viewMode}
+      setViewMode={setViewMode}
+      yearPageStart={yearPageStart}
+      setYearPageStart={setYearPageStart}
+    >
+      <View flexDirection="column" alignItems="center" gap="$4" width="100%">
+        <CalendarHeader
+          year={calendarData.year}
+          monthName={calendarData.monthName}
+          onPrevMonth={() => onNavigateMonth(-1)}
+          onNextMonth={() => onNavigateMonth(1)}
+          showPrev={showPrev}
+          showNext={showNext}
+          onYearPress={() => {
+            setYearPageStart(calendarData.year - (calendarData.year % yearPageSize));
+            setViewMode("year");
+          }}
+          onMonthPress={() => setViewMode("month")}
+        />
+        <CalendarDayGrid
+          calendarData={calendarData}
+          selectedDates={selectedDates}
+          onDayPress={onDayPress}
+          mode={mode}
+          minDate={minDate}
+          maxDate={maxDate}
+        />
+      </View>
+    </ViewSwitcher>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Calendar — inline calendar with optional mode tabs
+// ---------------------------------------------------------------------------
+
+export function Calendar({
+  mode: modeProp,
+  showTabs = true,
+  selectedDates: controlledDates,
+  onDatesChange,
+  minDate,
+  maxDate,
+  limit = 10,
+}: CalendarProps) {
+  const { knobProps } = useResolvedKnobs();
+  const [internalMode, setInternalMode] = useState<CalendarMode>(modeProp ?? "range");
+  const mode = modeProp ?? internalMode;
+
+  const [internalDates, setInternalDates] = useState<Date[]>([]);
+  const selectedDates = controlledDates ?? internalDates;
+  const setSelectedDates = useCallback(
+    (dates: Date[]) => {
+      if (!controlledDates) setInternalDates(dates);
+      onDatesChange?.(dates);
+    },
+    [controlledDates, onDatesChange],
+  );
+
+  const { displayDate, setDisplayDate, navigateMonth } = useDateNavigation();
+  const { gtSm: fullWidthMode } = useMedia();
+
+  const handleModeChange = useCallback(
+    (value: string) => {
+      if (value === "single" || value === "multiple" || value === "range") {
+        setInternalMode(value);
+        setSelectedDates([]);
+      }
+    },
+    [setSelectedDates],
+  );
+
+  const handleDayPress = useCallback(
+    (date: Date) => {
+      if (minDate && date < minDate) return;
+      if (maxDate && date > maxDate) return;
+
+      switch (mode) {
+        case "single":
+          setSelectedDates([date]);
+          break;
+
+        case "multiple": {
+          const existing = selectedDates.findIndex((d) => isSameDay(d, date));
+          if (existing >= 0) {
+            setSelectedDates(selectedDates.filter((_, i) => i !== existing));
+          } else if (selectedDates.length < limit) {
+            setSelectedDates([...selectedDates, date].sort((a, b) => a.getTime() - b.getTime()));
+          }
+          break;
+        }
+
+        case "range": {
+          if (selectedDates.length === 0 || selectedDates.length === 2) {
+            setSelectedDates([date]);
+          } else if (selectedDates.length === 1) {
+            if (isSameDay(date, selectedDates[0])) {
+              setSelectedDates([]);
+            } else {
+              const pair =
+                date < selectedDates[0] ? [date, selectedDates[0]] : [selectedDates[0], date];
+              setSelectedDates(pair);
+            }
+          }
+          break;
+        }
+      }
+    },
+    [mode, selectedDates, setSelectedDates, minDate, maxDate, limit],
+  );
+
+  const handleNavigate = useCallback(
+    (months: number) => navigateMonth(months < 0 ? "prev" : "next"),
+    [navigateMonth],
+  );
+
+  const handleSetDisplayForPrev = useCallback(
+    (date: Date) => {
+      const next = new Date(date);
+      next.setMonth(next.getMonth() + 1);
+      setDisplayDate(next);
+    },
+    [setDisplayDate],
+  );
+
+  const prevMonthDate = useMemo(() => {
+    const date = new Date(displayDate);
+    date.setMonth(date.getMonth() - 1);
+    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}>
+      {showTabs && (
+        <XStack
+          alignSelf="center"
+          borderWidth={knobProps.borderRadius.borderWidth || 1}
+          borderColor={formCommonColors.divider}
+          borderRadius={knobProps.borderRadius.borderRadius}
+          backgroundColor="$backgroundStrong"
+          padding={2}
+        >
+          {(["range", "single", "multiple"] as const).map((m) => (
+            <Button
+              key={m}
+              size={knobProps.sizeToken}
+              chromeless
+              flex={1}
+              theme={mode === m ? ("accent" as any) : undefined}
+              backgroundColor={mode === m ? "$background" : "transparent"}
+              onPress={() => handleModeChange(m)}
+            >
+              <Text fontSize={knobProps.sizeToken} {...knobProps.body}>
+                {m === "range" ? "Range" : m === "single" ? "Single" : "Multiple"}
+              </Text>
+            </Button>
+          ))}
+        </XStack>
+      )}
+
+      <View
+        backgroundColor="$background"
+        flexDirection="row"
+        {...knobProps.gapLg}
+        {...knobProps.panelPadding}
+        borderWidth={knobProps.borderRadius.borderWidth || 1}
+        borderColor={formCommonColors.divider}
+        borderRadius={knobProps.borderRadiusOuter.borderRadius}
+      >
+        {viewMode === "day" && !fullWidthMode && (
+          <CalendarPanel
+            displayDate={displayDate}
+            selectedDates={selectedDates}
+            onDayPress={handleDayPress}
+            onNavigateMonth={handleNavigate}
+            onSetDisplayDate={setDisplayDate}
+            mode={mode}
+            minDate={minDate}
+            maxDate={maxDate}
+          />
+        )}
+
+        {viewMode === "day" && fullWidthMode && (
+          <>
+            <CalendarPanel
+              displayDate={prevMonthDate}
+              selectedDates={selectedDates}
+              onDayPress={handleDayPress}
+              onNavigateMonth={handleNavigate}
+              onSetDisplayDate={handleSetDisplayForPrev}
+              mode={mode}
+              minDate={minDate}
+              maxDate={maxDate}
+              showNext={false}
+            />
+            <Separator vertical />
+            <CalendarPanel
+              displayDate={displayDate}
+              selectedDates={selectedDates}
+              onDayPress={handleDayPress}
+              onNavigateMonth={handleNavigate}
+              onSetDisplayDate={setDisplayDate}
+              mode={mode}
+              minDate={minDate}
+              maxDate={maxDate}
+              showPrev={false}
+            />
+          </>
+        )}
+
+        {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

@@ -0,0 +1,64 @@
+import { fireEvent } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { formatDateDisplay, isSameDay, toWeeks } from "./parts";
+
+vi.mock("react-native", () => ({
+  Platform: {
+    OS: "web",
+    select: (options: Record<string, unknown>) => options.web ?? options.default,
+  },
+}));
+
+vi.mock("@tamagui/lucide-icons-2", () => ({
+  Calendar: () => null,
+  ChevronLeft: () => null,
+  ChevronRight: () => null,
+  X: () => null,
+}));
+
+async function loadDatePicker() {
+  return (await import("./index")).DatePicker;
+}
+
+describe("DatePicker", () => {
+  describe("without form context", () => {
+    it("should handle disabled state", async () => {
+      const DatePicker = await loadDatePicker();
+      const result = renderWithProviders(<DatePicker label="Date" name="date" disabled />);
+      const input = result.container.querySelector("input");
+      expect(input).toBeTruthy();
+      expect(input?.getAttribute("aria-disabled")).toBe("true");
+
+      const clickable = result.container.querySelector("input,button,[role='button']");
+      if (clickable) {
+        fireEvent.click(clickable);
+      }
+      expect(result.findTextElement("Select a month")).toBeUndefined();
+    });
+  });
+
+  describe("date utilities", () => {
+    it("formats display values and handles null", () => {
+      expect(formatDateDisplay(null)).toBe("");
+      expect(formatDateDisplay(new Date(2024, 0, 15))).toBe("01/15/2024");
+    });
+
+    it("compares dates by calendar day", () => {
+      expect(isSameDay(new Date(2024, 4, 1, 1), new Date(2024, 4, 1, 23))).toBe(true);
+      expect(isSameDay(new Date(2024, 4, 1, 1), new Date(2024, 4, 2, 1))).toBe(false);
+      expect(isSameDay(null, new Date(2024, 4, 1, 1))).toBe(false);
+    });
+
+    it("chunks a day list into calendar weeks", () => {
+      const days = Array.from({ length: 14 }, (_, i) => new Date(2024, 0, i + 1));
+      const weeks = toWeeks(days);
+
+      expect(weeks.length).toBe(2);
+      expect(weeks[0]).toHaveLength(7);
+      expect(weeks[1]).toHaveLength(7);
+      expect(weeks[0]?.[0]?.getDate()).toBe(1);
+      expect(weeks[1]?.[6]?.getDate()).toBe(14);
+    });
+  });
+});