fix(DateInput, DateTimeInput): the sheet calendar's toggle and day tap under a finger

.changeset/calendar-pages-like-uidatepicker.md

@@ -0,0 +1,16 @@
+---
+'@astryxdesign/core': patch
+---
+
+[fix] Under a finger, the calendar in the DateInput and DateTimeInput bottom sheets now pages its months like the iOS date picker:
+
+- A swipe moves at most one month, chosen at the lift by iOS's paging rule: a quick flick, or a drag past half a month. It settles on iOS's paging curve.
+- The month title follows the drag and the settle. It changes when the next month is more than half in view.
+- An arrow scrolls one month. A second tap mid-scroll goes on to the month after.
+- In the sheet, a drag is decided once it has moved 10 px either way. It pages the calendar if it has moved 10 px sideways by then, and moves the sheet otherwise.
+- A horizontal trackpad swipe moves the calendar with it and pages at the release, like a drag.
+- With Reduce Motion on, the arrows' step and a swipe's settle cross-fade in 200 ms instead of travelling.
+
+With a mouse, the calendar still scrolls natively. With any pointer, PageUp and PageDown now move the keyboard focus by a month, and by a year with Shift.
+
+@vjeux

.changeset/calendar-toggle-uidatepicker-timing.md

@@ -0,0 +1,18 @@
+---
+'@astryxdesign/core': patch
+---
+
+[feat] Under a finger, the calendar in the DateInput and DateTimeInput bottom sheets now toggles to its month and year wheels like the iOS date picker:
+
+- The month/year toggle cross-fades over `--duration-medium-min` (225 ms in the neutral theme, the token nearest iOS's 0.25 s there), where DateInput used a quick linear fade and DateTimeInput an instant swap. The wheels arrive on the theme's entrance curve and leave on its exit curve. As in UIKit, the header's month arrows and Reset and the footer's buttons take no tap during the fade, and a second tap on the title turns it around.
+- The hidden month/year wheels are laid out once the sheet settles, so a toggle after that does not lay them out.
+- The title's chevron points along the reading direction and turns a quarter turn to point down while the wheels show, on the theme's move curve. In DateInput it was a down chevron that flipped up; in DateTimeInput it was a down chevron that stayed still.
+- A finger's tapped day takes its selection at once, with no colour transition. A mouse or pen pick keeps the fade, in the touch sheet too.
+
+With a mouse or a pen, the toggle stays as it is.
+
+When the title or Done toggles with keyboard focus in the outgoing panel, focus moves into the incoming one, with any pointer. In DateTimeInput, Done lands on the shown month's day.
+
+With Reduce Motion on, nothing travels: under a finger the toggle cross-fades in 200 ms, and the chevron dips instead of turning, its turn landing mid-dip. With a mouse it changes at once.
+
+@vjeux

apps/sandbox/scripts/next-export-routes.json

@@ -31,6 +31,7 @@
     "/pages/mobile-prototypes/",
     "/pages/mobile-spacing/",
     "/pages/mobile-type/",
+    "/pages/month-year-toggle/",
     "/pages/motion-examples/",
     "/pages/motion-lab/",
     "/pages/motion-lab/bugs/",

apps/sandbox/src/app/(raw)/pages/month-year-toggle/page.tsx

@@ -0,0 +1,64 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file page.tsx
+ * @input None
+ * @output A bare page with a DateInput sheet over two centuries, a
+ *   DateTimeInput sheet, and rows that make the document scroll
+ * @position A raw page, with no sandbox chrome, for trying the month and year
+ *   toggle in both sheets on a phone. The page scrolls with the document, as
+ *   an app's page does.
+ */
+
+import {useState} from 'react';
+import type {ISODateString} from '@astryxdesign/core/Calendar';
+import {DateInput} from '@astryxdesign/core/DateInput';
+import {DateTimeInput} from '@astryxdesign/core/DateTimeInput';
+import type {ISODateTimeString} from '@astryxdesign/core/DateTimeInput';
+import {VStack} from '@astryxdesign/core/Layout';
+import {Heading, Text} from '@astryxdesign/core/Text';
+
+const ROWS = Array.from({length: 40}, (_, index) => `Row ${index + 1}`);
+
+export default function MonthYearTogglePage() {
+  const [date, setDate] = useState<ISODateString | undefined>(
+    '2026-03-15' as ISODateString,
+  );
+  const [dateTime, setDateTime] = useState<ISODateTimeString | undefined>(
+    undefined,
+  );
+  return (
+    <VStack gap={4} padding={4}>
+      <VStack gap={1}>
+        <Heading level={1}>Month and year toggle</Heading>
+        <Text color="secondary">
+          Tap a field, then tap the month title in its sheet.
+        </Text>
+      </VStack>
+      <DateInput
+        label="Date of birth"
+        presentation="bottom-sheet"
+        min={'1900-01-01' as ISODateString}
+        max={'2099-12-31' as ISODateString}
+        value={date}
+        onChange={setDate}
+      />
+      <DateTimeInput
+        label="Meeting time"
+        placeholder="Select a date"
+        presentation="bottom-sheet"
+        value={dateTime}
+        onChange={setDateTime}
+      />
+      <VStack gap={2}>
+        {ROWS.map(row => (
+          <Text key={row} color="secondary">
+            {row}
+          </Text>
+        ))}
+      </VStack>
+    </VStack>
+  );
+}

apps/sandbox/src/app/sandboxPages.ts

@@ -182,6 +182,12 @@ export const categories: SandboxCategory[] = [
         description:
           'Every built-in Text type at the default size, on a bare page that scrolls',
       },
+      {
+        name: 'Month and Year Toggle',
+        href: '/pages/month-year-toggle/',
+        description:
+          'The DateInput and DateTimeInput sheets, whose month title opens the month and year wheels, on a page that scrolls with the document',
+      },
     ],
   },
   {

apps/storybook/stories/DateInput.stories.tsx

@@ -594,6 +594,25 @@ export const WithMinMax: Story = {
   },
 };
 
+/**
+ * The bottom-sheet calendar pages its months like the iOS date picker. One
+ * month moves per swipe, and the title follows the drag.
+ */
+export const BottomSheetCalendar: Story = {
+  render: args => {
+    const [value, setValue] = useState<ISODateString | undefined>(
+      '2026-10-15' as ISODateString,
+    );
+    return <DateInput {...args} value={value} onChange={setValue} />;
+  },
+  args: {
+    label: 'Date',
+    presentation: 'bottom-sheet',
+    min: '2026-01-01' as ISODateString,
+    max: '2026-12-31' as ISODateString,
+  },
+};
+
 export const WithMaxDateInLayout: Story = {
   render: args => {
     const [value, setValue] = useState<ISODateString | undefined>(undefined);

apps/storybook/stories/DateTimeInput.stories.tsx

@@ -306,6 +306,23 @@ export const WithTimeIncrement: Story = {
   },
 };
 
+/**
+ * The bottom sheet: the calendar with its month/year toggle, and the time
+ * wheels.
+ */
+export const BottomSheetCalendar: Story = {
+  render: args => {
+    const [value, setValue] = useState<ISODateTimeString | undefined>(
+      '2026-03-15T09:00' as ISODateTimeString,
+    );
+    return <DateTimeInput {...args} value={value} onChange={setValue} />;
+  },
+  args: {
+    label: 'Time slot',
+    presentation: 'bottom-sheet',
+  },
+};
+
 /**
  * `timeOptionInterval` turns the time field into a combobox over a list of
  * preset times at that cadence. Click the time field or press Alt+ArrowDown to

apps/storybook/stories/MonthPagerProofs.stories.tsx

@@ -0,0 +1,72 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file MonthPagerProofs.stories.tsx
+ * @input Uses React and the internal MonthPager (packages/core/src/DateInput)
+ * @output The month pager alone, whatever the primary pointer: 2026 from
+ *   March, its shown month in a read-only field
+ * @position A checked-in reproduction path for the trackpad proofs in
+ *   packages/core/src/DateInput/__tests__/MonthPager.interaction.browser.spec.ts.
+ *   WebKit's driver sends a trackpad's precise deltas only from a desktop
+ *   context, where the sheets show the mouse calendar instead.
+ */
+
+import type {Meta, StoryObj} from '@storybook/react';
+import {useState} from 'react';
+import {MonthPager} from '../../../packages/core/src/DateInput/MonthPager';
+import {
+  createMonthModel,
+  fromMonthIndex,
+  toMonthIndex,
+} from '../../../packages/core/src/DateInput/monthGeometry';
+
+const FIRST = toMonthIndex(2026, 1);
+const LAST = toMonthIndex(2026, 12);
+const MARCH = toMonthIndex(2026, 3);
+const TODAY = {year: 2026, month: 3, day: 15};
+const GREGORY = createMonthModel('gregory');
+
+/**
+ * The readout takes the theme's text colour on the theme's surface, not the
+ * browser's white field.
+ */
+const READOUT_STYLE = {color: 'inherit', backgroundColor: 'transparent'};
+
+const meta = {
+  title: 'Core/MonthPager',
+  tags: ['no-visual', '!autodocs'],
+  parameters: {layout: 'centered'},
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The pager alone. Its field names the month it shows. */
+export const Pager: Story = {
+  render: () => {
+    const [shown, setShown] = useState(MARCH);
+    const {year, month} = fromMonthIndex(shown);
+    return (
+      <div style={{display: 'grid', gap: 16, inlineSize: 360}}>
+        <input
+          aria-label="Shown month"
+          readOnly
+          style={READOUT_STYLE}
+          value={`${year}-${String(month).padStart(2, '0')}`}
+        />
+        <MonthPager
+          monthModel={GREGORY}
+          minMonthIndex={FIRST}
+          maxMonthIndex={LAST}
+          initialMonthIndex={MARCH}
+          onVisibleMonthChange={setShown}
+          selectedDate={null}
+          today={TODAY}
+          isDateDisabled={() => false}
+          weekStartsOn={0}
+          onSelect={() => {}}
+        />
+      </div>
+    );
+  },
+};