feat(date/time): use Temporal API

packages/core/package.json

@@ -42,10 +42,10 @@
   ],
   "dependencies": {
     "@formwerk/devtools": "workspace:*",
-    "@internationalized/date": "^3.7.0",
     "@standard-schema/spec": "1.0.0",
     "@standard-schema/utils": "^0.3.0",
     "klona": "^2.0.6",
+    "temporal-polyfill": "^0.3.0",
     "type-fest": "^4.37.0"
   },
   "peerDependencies": {

packages/core/src/i18n/useDateFormatter.ts

@@ -1,16 +1,16 @@
 import { MaybeRefOrGetter, shallowRef, toValue, watch } from 'vue';
-import { DateFormatter } from '@internationalized/date';
 import { getUserLocale } from './getUserLocale';
 import { isEqual } from '../utils/common';
+import { Intl as TemporalIntl } from 'temporal-polyfill';
 
 // TODO: May memory leak in SSR
-const dateFormatterCache = new Map<string, DateFormatter>();
+const dateFormatterCache = new Map<string, TemporalIntl.DateTimeFormat>();
 
 function getFormatter(locale: string, options: Intl.DateTimeFormatOptions = {}) {
   const cacheKey = locale + JSON.stringify(options);
   let formatter = dateFormatterCache.get(cacheKey);
   if (!formatter) {
-    formatter = new DateFormatter(locale, options);
+    formatter = new TemporalIntl.DateTimeFormat(locale, options);
     dateFormatterCache.set(cacheKey, formatter);
   }
 

packages/core/src/i18n/useLocale.ts

@@ -3,14 +3,14 @@ import { getConfig } from '../config';
 import { getDirection } from './getDirection';
 import { getWeekInfo } from './getWeekInfo';
 import { Maybe, Reactivify } from '../types';
-import { Calendar, GregorianCalendar } from '@internationalized/date';
 import { getTimeZone } from './getTimezone';
+import { getCalendar } from './getCalendar';
 
 export type NumberLocaleExtension = `nu-${string}`;
 
 export interface LocaleExtension {
   number: Maybe<NumberLocaleExtension>;
-  calendar: Maybe<Calendar>;
+  calendar: Maybe<string>;
   timeZone: Maybe<string>;
 }
 
@@ -37,8 +37,8 @@ export function useLocale(
     }
 
     // Add the calendar locale extension if it's not already present
-    if (!code.includes('-ca-') && calExt?.identifier) {
-      code += `-ca-${calExt.identifier}`;
+    if (!code.includes('-ca-') && calExt) {
+      code += `-ca-${calExt}`;
     }
 
     code = code.replaceAll('--', '-');
@@ -49,7 +49,7 @@ export function useLocale(
   const localeInstance = computed(() => new Intl.Locale(localeString.value));
   const direction = computed(() => getDirection(localeInstance.value));
   const weekInfo = computed(() => getWeekInfo(localeInstance.value));
-  const calendar = computed(() => toValue(extensions.calendar) ?? (new GregorianCalendar() as Calendar));
+  const calendar = computed(() => toValue(extensions.calendar) ?? getCalendar(localeInstance.value));
   const timeZone = computed(() => toValue(extensions.timeZone) ?? getTimeZone(localeInstance.value));
   const locale = computed(() => localeInstance.value.toString());
 

packages/core/src/useCalendar/types.ts

@@ -1,11 +1,11 @@
 import { WeekInfo } from '../i18n/getWeekInfo';
 import { Ref } from 'vue';
 import { Maybe } from '../types';
-import type { ZonedDateTime, Calendar } from '@internationalized/date';
+import { Temporal } from 'temporal-polyfill';
 
 export interface CalendarDayCell {
   type: 'day';
-  value: ZonedDateTime;
+  value: Temporal.ZonedDateTime;
   dayOfMonth: number;
   label: string;
   isToday: boolean;
@@ -18,7 +18,7 @@ export interface CalendarDayCell {
 export interface CalendarMonthCell {
   type: 'month';
   label: string;
-  value: ZonedDateTime;
+  value: Temporal.ZonedDateTime;
   monthOfYear: number;
   selected: boolean;
   disabled: boolean;
@@ -28,7 +28,7 @@ export interface CalendarMonthCell {
 export interface CalendarYearCell {
   type: 'year';
   label: string;
-  value: ZonedDateTime;
+  value: Temporal.ZonedDateTime;
   year: number;
   selected: boolean;
   disabled: boolean;
@@ -42,12 +42,12 @@ export type CalendarViewType = 'weeks' | 'months' | 'years';
 export interface CalendarContext {
   locale: Ref<string>;
   weekInfo: Ref<WeekInfo>;
-  calendar: Ref<Calendar>;
+  calendar: Ref<string>;
   timeZone: Ref<string>;
-  getSelectedDate: () => ZonedDateTime;
-  getMinDate: () => Maybe<ZonedDateTime>;
-  getMaxDate: () => Maybe<ZonedDateTime>;
-  getFocusedDate: () => ZonedDateTime;
-  setFocusedDate: (date: ZonedDateTime) => void;
-  setDate: (date: ZonedDateTime, view?: CalendarViewType) => void;
+  getSelectedDate: () => Temporal.ZonedDateTime;
+  getMinDate: () => Maybe<Temporal.ZonedDateTime>;
+  getMaxDate: () => Maybe<Temporal.ZonedDateTime>;
+  getFocusedDate: () => Temporal.ZonedDateTime;
+  setFocusedDate: (date: Temporal.ZonedDateTime) => void;
+  setDate: (date: Temporal.ZonedDateTime, view?: CalendarViewType) => void;
 }