feat: DatePicker (@internationalized/date + Base UI) + DataTable date filters

[interacsean]

Summary

Adds three accessible date components — DateField, DatePicker, and Calendar — built on @internationalized/date (value layer) and Base UI (Popover), and wires the DatePicker into the DataTable date-filter editor.

The segmented input and the APG calendar grid are hand-rolled, so the only net-new dependency is @internationalized/date (~11 KB gz) — Base UI is already in the bundle. This is the lighter-foundation option from the design proposal §9; docs/proposals/date-picker-impl-comparison.md records the measured bundle comparison against the react-aria variant (~11 KB vs ~74 KB) for the same public API and a11y contract.

Video walkthrough

date-picker-walkthrough.mp4

What's included

Components — DateField / DatePicker / Calendar

• Locale-driven segment order, first-day-of-week, and localized month/weekday names (via DateFormatter)
• Segmented spinbutton input: per-segment ↑/↓, type-to-fill with smart auto-advance (leading-zero 02 advances; 2→9 builds 29), Backspace to clear
• Full APG calendar keyboard support: arrows, Home/End, PageUp/PageDown, Shift+PageUp/Down, Enter/Space; roving tabindex; visible focus rings
• Arrow keys traverse through disabled/unavailable days (focus moves, selection stays blocked) — no dead ends
• Popover auto-focuses the grid, contains Tab (prev → next → grid), keeps focus on the nav button across month changes, and left-aligns to the field (shifting inward near the viewport edge)
• Value correctness: internal segment state stays synced with a controlled value, only complete & valid values emit, and the field never constructs an invalid date — out-of-range day entries clamp to the month's real length on blur (leap-year aware)
• timeZone support on AppShell with useResolvedLocale() / useTimeZone() hooks; @internationalized/date helpers and types re-exported from the package (no separate install)

DataTable date filters

• date-type filter editor renders the DatePicker (single value and between ranges)
• Friendlier date operators — exact date / after / before / between (after/before inclusive; gt/lt/ne dropped). Scoped to date only; number/datetime/time operators unchanged. en + ja labels.
• Filter chips display a locale-formatted date (e.g. 15 Jun 2026) instead of raw ISO

Examples & docs

• /date-picker interactive demo page
• /data-table page: DataTable + filters driven by useCollectionVariables and a promise-based async data source (GraphQL-query stub)
• Component docs (date-picker, data-table), the design proposal + implementation-comparison docs, and a changeset

Testing

• 1180 unit tests pass, covering behaviour and the DOM a11y contract: spinbutton segments, role="grid" cells with data-* state, role="dialog" popover, roving-focus keyboard nav, and the date-filter commit/clear/between + operator-label paths
• type-check, lint, and build all clean
• Verified end-to-end in the browser: segment typing/auto-advance, calendar navigation (including through disabled dates), selection, popover alignment, and the async-filtered table

Scope notes

• This PR covers date granularity. The field already models datetime/time value types; surfacing them in the filter UI is a fast-follow.
• Fast-follow — mobile/touch typing. The segments are non-contentEditable spinbutton <div>s read via keydown, so on-screen keyboards don't type into them (on mobile the calendar popover is the touch path; desktop keyboard + calendar work fully). Addressable by mirroring react-aria — contentEditable segments + inputmode="numeric" + a native beforeinput handler. The full approach is written up in the proposal (date-picker.md → "Post-v1 fast-follows → Mobile / touch text entry") so the thinking isn't lost; it needs real-device QA before sign-off.
• Other known gaps vs the react-aria variant (in the comparison doc): RTL arrow flipping, non-Gregorian calendar systems, localized chrome strings, and a full screen-reader audit.

🤖 Generated with Claude Code

[Copilot]

Pull request overview

Adds a new date input family to packages/core (DateField/DatePicker/Calendar) built on @internationalized/date + Base UI Popover, and integrates it into DataTable’s date filter editor with friendlier operators and localized chip display formatting. This also expands the AppShell context to expose a formatting locale (full BCP-47) and a default timezone for date/time components, plus re-exports common @internationalized/date helpers/types from the package entrypoint.

Changes:

• Add DateField, DatePicker, and Calendar components (segmented spinbutton field + APG calendar grid + popover dialog) with unit tests and snapshots.
• Extend AppShell i18n/timezone plumbing (detectBrowserFullLocale, useResolvedLocale, useTimeZone, AppShell.timeZone) and re-export @internationalized/date helpers/types from packages/core/src/index.ts.
• Update DataTable date filters to use DatePicker, slim date operators (eq/gte/lte/between), and locale-formatted chip values; update tests/docs/examples accordingly.

Reviewed changes

Copilot reviewed 30 out of 31 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Adds lockfile entries for @internationalized/date@3.12.2.
packages/core/src/lib/i18n.ts	Adds detectBrowserFullLocale() for full BCP-47 detection.
packages/core/src/index.ts	Exports new date components, AppShell hooks, and re-exports @internationalized/date helpers/types.
packages/core/src/contexts/appshell-context.tsx	Adds resolvedLocale + timeZone config and new hooks useResolvedLocale() / useTimeZone().
packages/core/src/components/date-field/use-date-field-state.ts	Implements segmented date field state engine (typing, increment/decrement, composition).
packages/core/src/components/date-field/index.ts	Adds public barrel export for DateField / DatePicker.
packages/core/src/components/date-field/date-input-group.tsx	Implements segmented spinbutton group UI and Base UI popover wrapper/trigger.
packages/core/src/components/date-field/date-field.tsx	Implements DateField and DatePicker public components and wiring to calendar/state.
packages/core/src/components/date-field/date-field.test.tsx	Adds behavior + DOM a11y contract tests for DateField/DatePicker.
packages/core/src/components/data-table/toolbar.tsx	Wires DatePicker into date-type filter editor, updates operators, and formats date chips.
packages/core/src/components/data-table/toolbar.test.tsx	Updates filter editor tests to drive segmented DatePicker UI and validate date operator/chip behavior.
packages/core/src/components/data-table/i18n.ts	Adds date-specific operator label translations (en/ja).
packages/core/src/components/calendar/use-calendar-state.ts	Implements calendar grid state engine (weeks, focus, APG keyboard nav, selection).
packages/core/src/components/calendar/index.ts	Adds public barrel export for Calendar.
packages/core/src/components/calendar/calendar.tsx	Implements standalone Calendar component using AppShell locale/timezone defaults.
packages/core/src/components/calendar/calendar.test.tsx	Adds behavior + DOM a11y contract tests for Calendar.
packages/core/src/components/calendar/calendar-view.tsx	Implements APG calendar grid markup/rendering and popover focus containment behavior.
packages/core/src/components/appshell.tsx	Adds timeZone prop and passes it into configuration build/memoization.
packages/core/package.json	Adds dependency on @internationalized/date.
packages/core/.oxlintrc.jsonc	Adds targeted a11y lint overrides for APG role-based date components.
packages/core/snapshots/src__components__date-field__date-field.test.tsx.snap	Adds snapshots for DateField/DatePicker structure.
packages/core/snapshots/src__components__calendar__calendar.test.tsx.snap	Adds snapshot for Calendar structure.
examples/vite-app/src/routes.generated.ts	Adds generated routes for new example pages.
examples/vite-app/src/pages/date-picker/page.tsx	Adds interactive demo page for DateField/DatePicker/Calendar.
examples/vite-app/src/pages/data-table/page.tsx	Adds DataTable + filters example using date filters with async/promise data source.
examples/vite-app/src/App.tsx	Adds sidebar links to the new example pages.
docs/proposals/date-picker.md	Adds/records the design proposal and implementation decision context.
docs/proposals/date-picker-impl-comparison.md	Documents measured bundle and behavior comparisons vs react-aria variant.
docs/components/date-picker.md	Adds component documentation and props/limitations notes for date components.
docs/components/data-table.md	Updates DataTable docs for date filters, operators, and chip formatting.
.changeset/date-picker.md	Adds a minor changeset describing new date components and AppShell additions.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[IzumiSy]

/review

[github-actions]

✅ API Design Review completed successfully!

[github-actions]

Generated by API Design Review for issue #332 · 192.4 AIC · ⌖ 9.53 AIC · ⊞ 5.8K
_{Comment /review to run again}