@multiplatform.one/forms 6.1.0 → 6.4.0

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

@@ -0,0 +1,115 @@
+import { action } from "@multiplatform.one/storybook";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { Text, YStack } from "tamagui";
+import { Calendar } from "./Calendar";
+
+const meta: Meta<typeof Calendar> = {
+  title: "Forms/Calendar",
+  component: Calendar,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Inline calendar (forms package) with single/multiple/range selection modes, dual panels on wide screens, and month/year drill-down.",
+      },
+    },
+  },
+  argTypes: {
+    mode: {
+      control: "select",
+      options: ["single", "multiple", "range"],
+      description: "Selection mode",
+    },
+    showTabs: { control: "boolean", description: "Show mode-switcher tabs" },
+    limit: { control: "number", description: "Max dates in multiple mode" },
+  },
+  args: {
+    showTabs: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Calendar>;
+
+export const Baseline: Story = {
+  render: (args) => (
+    <YStack maxWidth={720}>
+      <Calendar {...args} onDatesChange={action("onDatesChange")} />
+    </YStack>
+  ),
+};
+
+export const SingleMode: Story = {
+  args: { mode: "single", showTabs: false },
+  render: (args) => (
+    <YStack maxWidth={720}>
+      <Calendar {...args} onDatesChange={action("onDatesChange")} />
+    </YStack>
+  ),
+};
+
+export const MultipleMode: Story = {
+  args: { mode: "multiple", showTabs: false, limit: 3 },
+  render: (args) => (
+    <YStack maxWidth={720}>
+      <Calendar {...args} onDatesChange={action("onDatesChange")} />
+    </YStack>
+  ),
+};
+
+export const RangeMode: Story = {
+  args: { mode: "range", showTabs: false },
+  render: (args) => (
+    <YStack maxWidth={720}>
+      <Calendar {...args} onDatesChange={action("onDatesChange")} />
+    </YStack>
+  ),
+};
+
+export const MinMax: Story = {
+  render: (args) => {
+    const now = new Date();
+    // Window spans past the initially visible month(s) in BOTH directions:
+    // every day cell and both month-nav buttons render live at rest, so the
+    // story doesn't sit on bare-disabled buttons (UX-P19 / DG-ST-03). The
+    // clamp is still demonstrable — navigate two months either way to hit
+    // the disabled out-of-range days.
+    return (
+      <YStack maxWidth={720}>
+        <Calendar
+          {...args}
+          mode="single"
+          showTabs={false}
+          minDate={new Date(now.getFullYear(), now.getMonth() - 2, 10)}
+          maxDate={new Date(now.getFullYear(), now.getMonth() + 2, 20)}
+          onDatesChange={action("onDatesChange")}
+        />
+      </YStack>
+    );
+  },
+};
+
+export const ControlledRejection: Story = {
+  render: () => {
+    const Example = () => {
+      const [pinned] = useState(() => [new Date(2026, 7, 5), new Date(2026, 7, 12)]);
+      const [attempts, setAttempts] = useState(0);
+      return (
+        <YStack gap="$4" maxWidth={720}>
+          <Calendar
+            mode="range"
+            showTabs={false}
+            selectedDates={pinned}
+            onDatesChange={(dates) => {
+              setAttempts((a) => a + 1);
+              action("onDatesChange")(dates);
+            }}
+          />
+          <Text>{`attempts:${attempts}`}</Text>
+        </YStack>
+      );
+    };
+    return <Example />;
+  },
+};

package/src/fields/DatePicker/Calendar.tsx

@@ -1,15 +1,17 @@
 import { useCallback, useMemo, useState } from "react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useAccentOnSurface, 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 { t } from "../../shared/t";
 import {
   CalendarHeader,
   MonthGrid,
-  ViewSwitcher,
+  CalendarViewSwitcher,
   WeekView,
   YearGrid,
+  dayCellRadius,
   isSameDay,
   toWeeks,
   useCalendarData,
@@ -82,6 +84,10 @@ function CalendarDayGrid({
   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}`,
   );
@@ -154,16 +160,17 @@ function CalendarDayGrid({
                             exitStyle={{ opacity: 0 }}
                             opacity={1}
                             {...(rangeStatus === "range-start"
-                              ? { left: "50%", right: 0, width: "50%" }
+                              ? { insetInlineStart: "50%", insetInlineEnd: 0, width: "50%" }
                               : rangeStatus === "range-end"
-                                ? { left: 0, right: "50%", width: "50%" }
-                                : { left: 0, right: 0, width: "100%" })}
+                                ? { 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}
@@ -177,7 +184,7 @@ function CalendarDayGrid({
                         {isSelected ? (
                           <Button.Text
                             key="text-selected"
-                            transition="quicker"
+                            transition="quick"
                             enterStyle={{ opacity: 0, y: 20 }}
                             exitStyle={{ opacity: 0, y: 20 }}
                             opacity={1}
@@ -188,7 +195,7 @@ function CalendarDayGrid({
                         ) : (
                           <Button.Text
                             key="text-normal"
-                            color={isToday ? "$accentColor" : formCommonColors.text}
+                            color={isToday ? accentText : formCommonColors.text}
                           >
                             {day.getDate()}
                           </Button.Text>
@@ -242,7 +249,7 @@ function CalendarPanel({
   );
 
   return (
-    <ViewSwitcher
+    <CalendarViewSwitcher
       calendarData={calendarData}
       displayDate={displayDate}
       onSetDisplayDate={onSetDisplayDate}
@@ -274,7 +281,7 @@ function CalendarPanel({
           maxDate={maxDate}
         />
       </View>
-    </ViewSwitcher>
+    </CalendarViewSwitcher>
   );
 }
 
@@ -388,9 +395,13 @@ export function Calendar({
       {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).
+          {...knobProps.borderRadius}
           borderWidth={knobProps.borderRadius.borderWidth || 1}
           borderColor={formCommonColors.divider}
-          borderRadius={knobProps.borderRadius.borderRadius}
           backgroundColor="$backgroundStrong"
           padding={2}
         >
@@ -405,7 +416,7 @@ export function Calendar({
               onPress={() => handleModeChange(m)}
             >
               <Text fontSize={knobProps.sizeToken} {...knobProps.body}>
-                {m === "range" ? "Range" : m === "single" ? "Single" : "Multiple"}
+                {m === "range" ? t("Range") : m === "single" ? t("Single") : t("Multiple")}
               </Text>
             </Button>
           ))}
@@ -417,9 +428,12 @@ export function Calendar({
         flexDirection="row"
         {...knobProps.gapLg}
         {...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}
-        borderRadius={knobProps.borderRadiusOuter.borderRadius}
       >
         {viewMode === "day" && !fullWidthMode && (
           <CalendarPanel

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

@@ -1,6 +1,9 @@
-import { fireEvent } from "@testing-library/react";
+import { useForm } from "@tanstack/react-form";
+import { act, fireEvent, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Button } from "../../Button";
+import { Form } from "../../Form";
 import { formatDateDisplay, isSameDay, toWeeks } from "./parts";
 
 vi.mock("react-native", () => ({
@@ -21,6 +24,21 @@ async function loadDatePicker() {
   return (await import("./index")).DatePicker;
 }
 
+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("DatePicker", () => {
   describe("without form context", () => {
     it("should handle disabled state", async () => {
@@ -36,12 +54,181 @@ describe("DatePicker", () => {
       }
       expect(result.findTextElement("Select a month")).toBeUndefined();
     });
+
+    it("fires canonical onChange and the deprecated onValueChange alias once when a day is picked", async () => {
+      const DatePicker = await loadDatePicker();
+      const onChange = vi.fn();
+      const onValueChange = vi.fn();
+      const result = renderWithProviders(
+        <DatePicker label="Date" name="date" onChange={onChange} onValueChange={onValueChange} />,
+      );
+
+      const trigger = result.container.querySelector("input,button,[role='button']");
+      expect(trigger).toBeTruthy();
+      await act(async () => {
+        if (trigger) fireEvent.click(trigger);
+      });
+
+      await waitFor(() => {
+        expect(getEnabledDayButtons(document.body).length).toBeGreaterThan(0);
+      });
+
+      const dayButtons = getEnabledDayButtons(document.body);
+      await act(async () => {
+        fireEvent.click(dayButtons[0]);
+      });
+
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onValueChange).toHaveBeenCalledTimes(1);
+      expect(onChange.mock.calls[0][0]).toBeInstanceOf(Date);
+      expect(onChange.mock.calls[0][0]).toEqual(onValueChange.mock.calls[0][0]);
+    });
+  });
+
+  describe("with form context", () => {
+    it("commits the picked date into form state via field.handleChange", async () => {
+      const DatePicker = await loadDatePicker();
+      const onSubmit = vi.fn();
+
+      const FormExample = () => {
+        const form = useForm({
+          defaultValues: { date: null as Date | null },
+          onSubmit: async ({ value }) => {
+            onSubmit(value);
+          },
+        });
+        return (
+          <Form form={form}>
+            <DatePicker label="Date" name="date" />
+            <Button action="submit">Submit</Button>
+          </Form>
+        );
+      };
+
+      const result = renderWithProviders(<FormExample />);
+      const trigger = result.container.querySelector("input,button,[role='button']");
+      expect(trigger).toBeTruthy();
+      await act(async () => {
+        if (trigger) fireEvent.click(trigger);
+      });
+
+      await waitFor(() => {
+        expect(getEnabledDayButtons(document.body).length).toBeGreaterThan(0);
+      });
+
+      const dayButtons = getEnabledDayButtons(document.body);
+      await act(async () => {
+        fireEvent.click(dayButtons[0]);
+      });
+
+      const submitButton = result.getSubmitButton();
+      await act(async () => {
+        if (submitButton) fireEvent.click(submitButton);
+      });
+
+      await waitFor(() => {
+        expect(onSubmit).toHaveBeenCalledTimes(1);
+      });
+      const submitted = onSubmit.mock.calls[0][0];
+      expect(submitted.date).toBeInstanceOf(Date);
+    });
+
+    it("clears onChange validation errors after a date is picked", async () => {
+      const DatePicker = await loadDatePicker();
+
+      const FormExample = () => {
+        const form = useForm({
+          defaultValues: { date: new Date(2024, 0, 15) as Date | null },
+        });
+        return (
+          <Form form={form}>
+            <DatePicker
+              label="Date"
+              name="date"
+              defaultValue={new Date(2024, 0, 15)}
+              validators={{
+                onChange: ({ value }: { value: Date | null }) =>
+                  value == null ? "Date is required" : undefined,
+              }}
+            />
+          </Form>
+        );
+      };
+
+      const result = renderWithProviders(<FormExample />);
+
+      // Clear commits null via field.handleChange → onChange validator errors.
+      const clearButton = result.container.querySelector("button");
+      expect(clearButton).toBeTruthy();
+      await act(async () => {
+        if (clearButton) fireEvent.click(clearButton);
+      });
+      await waitFor(() => {
+        expect(result.container.textContent).toContain("Date is required");
+      });
+
+      // Pick a day → field.handleChange(date) must clear that error.
+      const trigger = result.container.querySelector("input");
+      expect(trigger).toBeTruthy();
+      await act(async () => {
+        if (trigger) fireEvent.click(trigger);
+      });
+      await waitFor(() => {
+        expect(getEnabledDayButtons(document.body).length).toBeGreaterThan(0);
+      });
+      const dayButtons = getEnabledDayButtons(document.body);
+      await act(async () => {
+        fireEvent.click(dayButtons[0]);
+      });
+
+      await waitFor(() => {
+        expect(result.container.textContent).not.toContain("Date is required");
+      });
+    });
+
+    it("clears form value when the reset control is pressed", async () => {
+      const DatePicker = await loadDatePicker();
+      const onSubmit = vi.fn();
+
+      const FormExample = () => {
+        const form = useForm({
+          defaultValues: { date: new Date(2024, 0, 15) as Date | null },
+          onSubmit: async ({ value }) => {
+            onSubmit(value);
+          },
+        });
+        return (
+          <Form form={form}>
+            <DatePicker label="Date" name="date" defaultValue={new Date(2024, 0, 15)} />
+            <Button action="submit">Submit</Button>
+          </Form>
+        );
+      };
+
+      const result = renderWithProviders(<FormExample />);
+      const clearButton = result.container.querySelector("button");
+      expect(clearButton).toBeTruthy();
+      await act(async () => {
+        if (clearButton) fireEvent.click(clearButton);
+      });
+
+      const submitButton = result.getSubmitButton();
+      await act(async () => {
+        if (submitButton) fireEvent.click(submitButton);
+      });
+
+      await waitFor(() => {
+        expect(onSubmit).toHaveBeenCalledWith({ date: null });
+      });
+    });
   });
 
   describe("date utilities", () => {
-    it("formats display values and handles null", () => {
+    it("formats display values in the house absolute register and handles null", () => {
       expect(formatDateDisplay(null)).toBe("");
-      expect(formatDateDisplay(new Date(2024, 0, 15))).toBe("01/15/2024");
+      // LC-12 / DF-14: editing surfaces show the compact absolute register
+      // with the year always present — never numeric-locale "01/15/2024".
+      expect(formatDateDisplay(new Date(2024, 0, 15))).toBe("Jan 15, 2024");
     });
 
     it("compares dates by calendar day", () => {

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

@@ -31,6 +31,11 @@ const meta: Meta<typeof DatePicker> = {
     error: { control: "text", description: "Error message" },
     required: { control: "boolean", description: "Mark field as required" },
     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" },
+    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" },
     format: { control: "text", description: "Date format string" },
     minDate: { control: "date", description: "Minimum selectable date" },
@@ -242,3 +247,8 @@ export const DatetimePickerWithSeconds = {
     </YStack>
   ),
 };
+
+/** Loading placeholder — the skeleton mirrors the field's anatomy (LC-20 / DG-ST-02). */
+export const SkeletonState: Story = {
+  args: { label: "Birth Date", skeleton: true },
+};

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

@@ -0,0 +1,111 @@
+import { action } from "@multiplatform.one/storybook";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useForm } from "@tanstack/react-form";
+import { Text, YStack } from "tamagui";
+import { Button } from "../../Button";
+import { Form } from "../../Form";
+import { DateRangePicker } from "./DateRangePicker";
+
+const meta: Meta<typeof DateRangePicker> = {
+  title: "Forms/DateRangePicker",
+  component: DateRangePicker,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Start/end date range picker with dual-calendar popup, range highlighting, and automatic inversion when the second click is before the first.",
+      },
+    },
+  },
+  argTypes: {
+    label: { control: "text", description: "Field label" },
+    placeholder: { control: "text", description: "Placeholder text" },
+    helperText: { control: "text", description: "Helper text below the field" },
+    error: { control: "text", description: "Error message" },
+    required: { control: "boolean", description: "Mark field as required" },
+    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" },
+    size: { control: "select", options: ["$2", "$3", "$4"], description: "Field size" },
+  },
+  args: {
+    label: "Date Range",
+    placeholder: "Start date – End date",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DateRangePicker>;
+
+export const Baseline: Story = {
+  render: (args) => (
+    <DateRangePicker {...args} helperText={args.helperText ?? "Select a start and end date"} />
+  ),
+};
+
+export const Disabled: Story = {
+  args: { disabled: true, placeholder: "Cannot select" },
+};
+
+export const ReadOnly: Story = {
+  args: { readOnly: true, helperText: "Read-only display" },
+};
+
+export const WithError: Story = {
+  args: { error: "A complete range is required", required: true },
+};
+
+export const SkeletonState: Story = {
+  args: { skeleton: true },
+};
+
+export const Compact: Story = {
+  args: { compact: true, helperText: "Compact sizing" },
+};
+
+export const MinMax: Story = {
+  render: (args) => {
+    const now = new Date();
+    return (
+      <DateRangePicker
+        {...args}
+        label="Mid-month range"
+        helperText="Only the 5th through the 25th of this month are selectable"
+        minDate={new Date(now.getFullYear(), now.getMonth(), 5)}
+        maxDate={new Date(now.getFullYear(), now.getMonth(), 25)}
+      />
+    );
+  },
+};
+
+export const FormBound: Story = {
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: { range: null as { start: Date | null; end: Date | null } | null },
+        onSubmit: async ({ value }) => {
+          action("onSubmit")(value);
+        },
+      });
+      const FormSubscribe = (form as any).Subscribe;
+      return (
+        <Form form={form}>
+          <YStack gap="$4" maxWidth={480}>
+            <DateRangePicker
+              label="Trip Dates"
+              name={"range" as any}
+              required
+              helperText="Select trip start and end"
+            />
+            <FormSubscribe selector={(s: any) => [s.values.range]}>
+              {([range]: any[]) => <Text>{`form-value:${JSON.stringify(range)}`}</Text>}
+            </FormSubscribe>
+            <Button action="submit">Submit</Button>
+          </YStack>
+        </Form>
+      );
+    };
+    return <FormExample />;
+  },
+};