@webamoki/web-svelte 0.7.4 → 1.0.0

package/dist/shadcn/components/ui/textarea/textarea.svelte

@@ -1,27 +1,28 @@
 <script lang="ts">
-	import { cn, type WithElementRef, type WithoutChildren } from '../../../utils.js';
-	import type { HTMLTextareaAttributes } from 'svelte/elements';
+  import type { HTMLTextareaAttributes } from 'svelte/elements';
 
-	let {
-		ref = $bindable(null),
-		value = $bindable(),
-		class: className,
-		'data-slot': dataSlot = 'textarea',
-		...restProps
-	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+  import { cn, type WithElementRef, type WithoutChildren } from '../../../utils.js';
+
+  let {
+    class: className,
+    'data-slot': dataSlot = 'textarea',
+    ref = $bindable(null),
+    value = $bindable(),
+    ...restProps
+  }: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
 </script>
 
 <textarea
-	bind:this={ref}
-	data-slot={dataSlot}
-	class={cn(
-		'w-full resize-y rounded-lg border border-gray-300 px-4 py-3 outline-none',
-		'transition-[border-color,box-shadow,opacity]',
-		'focus:border-transparent focus:ring-2 focus:ring-primary',
-		'disabled:cursor-not-allowed disabled:opacity-50',
-		'aria-invalid:border-red-500 aria-invalid:focus:ring-red-300',
-		className
-	)}
-	bind:value
-	{...restProps}
+  bind:this={ref}
+  class={cn(
+    'w-full resize-y rounded-lg border border-gray-300 px-4 py-3 outline-none',
+    'transition-[border-color,box-shadow,opacity]',
+    'focus:border-transparent focus:ring-2 focus:ring-primary',
+    'disabled:cursor-not-allowed disabled:opacity-50',
+    'aria-invalid:border-red-500 aria-invalid:focus:ring-red-300',
+    className
+  )}
+  data-slot={dataSlot}
+  bind:value
+  {...restProps}
 ></textarea>

package/dist/shadcn/components/ui/textarea/textarea.svelte.d.ts

@@ -1,5 +1,5 @@
-import { type WithElementRef } from '../../../utils.js';
 import type { HTMLTextareaAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
 declare const Textarea: import("svelte").Component<Omit<WithElementRef<HTMLTextareaAttributes>, "children">, {}, "ref" | "value">;
 type Textarea = ReturnType<typeof Textarea>;
 export default Textarea;

package/dist/shadcn/utils.d.ts

@@ -1,5 +1,7 @@
 import { type ClassValue } from 'clsx';
-export declare function cn(...inputs: ClassValue[]): string;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    ref?: null | U;
+};
 export type WithoutChild<T> = T extends {
     child?: any;
 } ? Omit<T, 'child'> : T;
@@ -7,6 +9,4 @@ export type WithoutChildren<T> = T extends {
     children?: any;
 } ? Omit<T, 'children'> : T;
 export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
-export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
-    ref?: U | null;
-};
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/utils/datetime/index.d.ts

@@ -1,29 +1,8 @@
-import { CalendarDate, Time, ZonedDateTime, type DateDuration } from '@internationalized/date';
 import type { Transport } from '@sveltejs/kit';
+import { CalendarDate, type DateDuration, Time, ZonedDateTime } from '@internationalized/date';
 import type { Day } from '../types/arktype.js';
 export declare const Days: readonly ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
 export declare const DayIndex: Record<Day, number>;
-/** Gets the day index of the date */
-export declare function getDayIndex(date: CalendarDate): number;
-/**
- * Gets the day of the week for a given date.
- * @param date - The date to get the day of the week for.
- * @returns The day of the week
- */
-export declare function getDayOfDate(date: CalendarDate): Day;
-/**
- * Checks if a given date is a specific day of the week.
- * @param date - The date to check.
- * @param dayOfWeek - The day of the week to check against.
- * @returns True if the date is the specified day, false otherwise.
- */
-export declare function isDateDay(date: CalendarDate, dayOfWeek: Day): boolean;
-/**
- * Checks if a given date is today.
- * @param date - The date to check.
- * @returns True if the date is today, false otherwise.
- */
-export declare function isDateToday(date: CalendarDate, timezone: string): boolean;
 /**
  * Calculates the age from a date of birth.
  * @param dob - The date of birth.
@@ -32,12 +11,30 @@ export declare function isDateToday(date: CalendarDate, timezone: string): boole
  */
 export declare function ageFromDob(dob: CalendarDate, timezone: string): number;
 /**
- * Gets the date of the next occurrence of a day of the week.
- * @param dayOfWeek - The day of the week to get the next occurrence for.
- * @param startDate - The date to check from. Inclusive.
- * @returns The date of the next occurrence of the specified day.
+ * Checks if two time ranges overlap, boundaries are not considered overlapping.
+ * @param start1 - The start time of the first range.
+ * @param end1 - The end time of the first range.
+ * @param start2 - The start time of the second range.
+ * @param end2 - The end time of the second range.
+ * @returns True if the ranges overlap, false otherwise.
  */
-export declare function getNextDateOfDay(dayOfWeek: Day, startDate: CalendarDate): CalendarDate;
+export declare function checkOverlap(start1: Time, end1: Time, start2: Time, end2: Time): boolean;
+/**
+ * Determines if the given dates are within the given duration of each other.
+ * @param date1 - The first date in order.
+ * @param date2 - The second date in order.
+ * @param duration - The duration to check against. Inclusive of boundaries.
+ * @returns True if the dates are within duration, false otherwise.
+ */
+export declare function datesWithin(date1: CalendarDate, date2: CalendarDate, duration: DateDuration): boolean;
+/** Gets the day index of the date */
+export declare function getDayIndex(date: CalendarDate): number;
+/**
+ * Gets the day of the week for a given date.
+ * @param date - The date to get the day of the week for.
+ * @returns The day of the week
+ */
+export declare function getDayOfDate(date: CalendarDate): Day;
 /**
  * Gets the most recent occurrence of a day of the week.
  * @param dayOfWeek - The day of the week
@@ -63,22 +60,25 @@ export declare function getLastDatesOfDay(dayOfWeek: Day, count: number, startDa
  */
 export declare function getLastMonths(count: number, startDate: CalendarDate): CalendarDate[];
 /**
- * Checks if two time ranges overlap, boundaries are not considered overlapping.
- * @param start1 - The start time of the first range.
- * @param end1 - The end time of the first range.
- * @param start2 - The start time of the second range.
- * @param end2 - The end time of the second range.
- * @returns True if the ranges overlap, false otherwise.
+ * Gets the date of the next occurrence of a day of the week.
+ * @param dayOfWeek - The day of the week to get the next occurrence for.
+ * @param startDate - The date to check from. Inclusive.
+ * @returns The date of the next occurrence of the specified day.
  */
-export declare function checkOverlap(start1: Time, end1: Time, start2: Time, end2: Time): boolean;
+export declare function getNextDateOfDay(dayOfWeek: Day, startDate: CalendarDate): CalendarDate;
 /**
- * Determines if the given dates are within the given duration of each other.
- * @param date1 - The first date in order.
- * @param date2 - The second date in order.
- * @param duration - The duration to check against. Inclusive of boundaries.
- * @returns True if the dates are within duration, false otherwise.
+ * Checks if a given date is a specific day of the week.
+ * @param date - The date to check.
+ * @param dayOfWeek - The day of the week to check against.
+ * @returns True if the date is the specified day, false otherwise.
  */
-export declare function datesWithin(date1: CalendarDate, date2: CalendarDate, duration: DateDuration): boolean;
+export declare function isDateDay(date: CalendarDate, dayOfWeek: Day): boolean;
+/**
+ * Checks if a given date is today.
+ * @param date - The date to check.
+ * @returns True if the date is today, false otherwise.
+ */
+export declare function isDateToday(date: CalendarDate, timezone: string): boolean;
 /**
  * Calculates the difference in weeks between two dates.
  * @param date1 - The first date in order.
@@ -88,23 +88,24 @@ export declare function dateDiffWeeks(date1: CalendarDate, date2: CalendarDate):
 /**
  * Formats a day of the week.
  * @param day - The day of the week to format.
- * @example "Monday" -> "Mon"
- * @returns Formatted string of the day of the week.
+ * @example "Monday" -> "M"
+ * @returns Formatted letter of the day of the week.
  */
-export declare function formatDayShort(day: Day): string;
+export declare function formatDayLetter(day: Day): string;
 /**
  * Formats a day of the week.
  * @param day - The day of the week to format.
- * @example "Monday" -> "M"
- * @returns Formatted letter of the day of the week.
+ * @example "Monday" -> "Mon"
+ * @returns Formatted string of the day of the week.
  */
-export declare function formatDayLetter(day: Day): string;
+export declare function formatDayShort(day: Day): string;
 /**
- * @param date The CalendarDate object to format.
- * @returns string of date in shortened format
- * @example "Oct 5"
+ * Formats a full date and time.
+ * @param datetime The ZonedDateTime object to format.
+ * @returns The formatted date and time string.
+ * @example "05/10/2023 14:30:00"
  */
-export declare function formatDateShort(date: CalendarDate): string;
+export declare function formatAbsolute(datetime: ZonedDateTime): string;
 /**
  * @param date The CalendarDate object to format.
  * @returns The formatted date string.
@@ -124,6 +125,12 @@ export declare function formatDateISO(date: CalendarDate): string;
  * @example "05/10/2023"
  */
 export declare function formatDateNum(date: CalendarDate): string;
+/**
+ * @param date The CalendarDate object to format.
+ * @returns string of date in shortened format
+ * @example "Oct 5"
+ */
+export declare function formatDateShort(date: CalendarDate): string;
 /**
  * Formats the month only.
  * @param date - The date to format.
@@ -132,11 +139,12 @@ export declare function formatDateNum(date: CalendarDate): string;
  */
 export declare function formatMonth(date: CalendarDate): string;
 /**
- * Gives time in HH:MM format
- * @param time
- * @returns string of time in that format
+ * Calculates the end time given a starting time and duration.
+ * @param timeStart starting time
+ * @param durationMinutes duration in minutes
+ * @returns end time in HH:MM format
  */
-export declare function formatTimeShort(time: Time): string;
+export declare function formatTimeEnd(timeStart: Time, durationMinutes: number): string;
 /**
  * Gives time in HH:MM:SS format
  * @param time
@@ -144,29 +152,21 @@ export declare function formatTimeShort(time: Time): string;
  */
 export declare function formatTimeFull(time: Time): string;
 /**
- * Calculates the end time given a starting time and duration.
- * @param timeStart starting time
- * @param durationMinutes duration in minutes
- * @returns end time in HH:MM format
- */
-export declare function formatTimeEnd(timeStart: Time, durationMinutes: number): string;
-/**
- * Formats a full date and time.
- * @param datetime The ZonedDateTime object to format.
- * @returns The formatted date and time string.
- * @example "05/10/2023 14:30:00"
+ * Gives time in HH:MM format
+ * @param time
+ * @returns string of time in that format
  */
-export declare function formatAbsolute(datetime: ZonedDateTime): string;
+export declare function formatTimeShort(time: Time): string;
 /**
  * Unfreezes a CalendarDate object from a snapshot.
  * @param raw - The snapshot of the CalendarDate object.
  * @returns The unfrozen CalendarDate object.
  */
-export declare function unfreezeDate(raw: $state.Snapshot<CalendarDate>): CalendarDate;
+export declare function unfreezeDate(raw: ReturnType<typeof $state.snapshot<CalendarDate>>): CalendarDate;
 /**
  * Unfreezes a Time object from a snapshot.
  * @param raw - The snapshot of the Time object.
  * @returns The unfrozen Time object.
  */
-export declare function unfreezeTime(raw: $state.Snapshot<Time>): Time;
+export declare function unfreezeTime(raw: ReturnType<typeof $state.snapshot<Time>>): Time;
 export declare const dateTransport: Transport;

package/dist/utils/datetime/index.js

@@ -13,37 +13,6 @@ export const Days = [
     'Sunday'
 ];
 export const DayIndex = Object.fromEntries(Days.map((day, index) => [day, index]));
-/** Gets the day index of the date */
-export function getDayIndex(date) {
-    // Always start 0 on Monday
-    return getDayOfWeek(date, DEFAULT_LOCALE, 'mon');
-}
-/**
- * Gets the day of the week for a given date.
- * @param date - The date to get the day of the week for.
- * @returns The day of the week
- */
-export function getDayOfDate(date) {
-    return Days[getDayIndex(date)];
-}
-/**
- * Checks if a given date is a specific day of the week.
- * @param date - The date to check.
- * @param dayOfWeek - The day of the week to check against.
- * @returns True if the date is the specified day, false otherwise.
- */
-export function isDateDay(date, dayOfWeek) {
-    const dateDay = getDayOfDate(date);
-    return dateDay === dayOfWeek;
-}
-/**
- * Checks if a given date is today.
- * @param date - The date to check.
- * @returns True if the date is today, false otherwise.
- */
-export function isDateToday(date, timezone) {
-    return today(timezone).compare(date) === 0;
-}
 /**
  * Calculates the age from a date of birth.
  * @param dob - The date of birth.
@@ -65,20 +34,41 @@ export function ageFromDob(dob, timezone) {
     return years;
 }
 /**
- * Gets the date of the next occurrence of a day of the week.
- * @param dayOfWeek - The day of the week to get the next occurrence for.
- * @param startDate - The date to check from. Inclusive.
- * @returns The date of the next occurrence of the specified day.
+ * Checks if two time ranges overlap, boundaries are not considered overlapping.
+ * @param start1 - The start time of the first range.
+ * @param end1 - The end time of the first range.
+ * @param start2 - The start time of the second range.
+ * @param end2 - The end time of the second range.
+ * @returns True if the ranges overlap, false otherwise.
  */
-export function getNextDateOfDay(dayOfWeek, startDate) {
-    const dayIndex = DayIndex[dayOfWeek];
-    const startIndex = getDayIndex(startDate);
-    // Already on the day
-    if (startIndex === dayIndex)
-        return startDate;
-    // Calculate how many days to add to get to the next occurrence
-    const addition = (dayIndex - startIndex + 7) % 7;
-    return startDate.add({ days: addition });
+export function checkOverlap(start1, end1, start2, end2) {
+    return start1.compare(end2) < 0 && start2.compare(end1) < 0;
+}
+/**
+ * Determines if the given dates are within the given duration of each other.
+ * @param date1 - The first date in order.
+ * @param date2 - The second date in order.
+ * @param duration - The duration to check against. Inclusive of boundaries.
+ * @returns True if the dates are within duration, false otherwise.
+ */
+export function datesWithin(date1, date2, duration) {
+    // reject invalid order
+    if (date1.compare(date2) > 0)
+        return false;
+    return date1.add(duration).compare(date2) >= 0;
+}
+/** Gets the day index of the date */
+export function getDayIndex(date) {
+    // Always start 0 on Monday
+    return getDayOfWeek(date, DEFAULT_LOCALE, 'mon');
+}
+/**
+ * Gets the day of the week for a given date.
+ * @param date - The date to get the day of the week for.
+ * @returns The day of the week
+ */
+export function getDayOfDate(date) {
+    return Days[getDayIndex(date)];
 }
 /**
  * Gets the most recent occurrence of a day of the week.
@@ -128,30 +118,40 @@ export function getLastMonths(count, startDate) {
     // Calculate the previous dates
     return map((i) => latestDate.subtract({ months: count - 1 - i }), range(0, count));
 }
+/**
+ * Gets the date of the next occurrence of a day of the week.
+ * @param dayOfWeek - The day of the week to get the next occurrence for.
+ * @param startDate - The date to check from. Inclusive.
+ * @returns The date of the next occurrence of the specified day.
+ */
+export function getNextDateOfDay(dayOfWeek, startDate) {
+    const dayIndex = DayIndex[dayOfWeek];
+    const startIndex = getDayIndex(startDate);
+    // Already on the day
+    if (startIndex === dayIndex)
+        return startDate;
+    // Calculate how many days to add to get to the next occurrence
+    const addition = (dayIndex - startIndex + 7) % 7;
+    return startDate.add({ days: addition });
+}
 /* Intervals */
 /**
- * Checks if two time ranges overlap, boundaries are not considered overlapping.
- * @param start1 - The start time of the first range.
- * @param end1 - The end time of the first range.
- * @param start2 - The start time of the second range.
- * @param end2 - The end time of the second range.
- * @returns True if the ranges overlap, false otherwise.
+ * Checks if a given date is a specific day of the week.
+ * @param date - The date to check.
+ * @param dayOfWeek - The day of the week to check against.
+ * @returns True if the date is the specified day, false otherwise.
  */
-export function checkOverlap(start1, end1, start2, end2) {
-    return start1.compare(end2) < 0 && start2.compare(end1) < 0;
+export function isDateDay(date, dayOfWeek) {
+    const dateDay = getDayOfDate(date);
+    return dateDay === dayOfWeek;
 }
 /**
- * Determines if the given dates are within the given duration of each other.
- * @param date1 - The first date in order.
- * @param date2 - The second date in order.
- * @param duration - The duration to check against. Inclusive of boundaries.
- * @returns True if the dates are within duration, false otherwise.
+ * Checks if a given date is today.
+ * @param date - The date to check.
+ * @returns True if the date is today, false otherwise.
  */
-export function datesWithin(date1, date2, duration) {
-    // reject invalid order
-    if (date1.compare(date2) > 0)
-        return false;
-    return date1.add(duration).compare(date2) >= 0;
+export function isDateToday(date, timezone) {
+    return today(timezone).compare(date) === 0;
 }
 const msPerWeek = 7 * 24 * 60 * 60 * 1000;
 /**
@@ -166,16 +166,6 @@ export function dateDiffWeeks(date1, date2) {
 }
 /* Formatting */
 /* Day of the week*/
-/**
- * Formats a day of the week.
- * @param day - The day of the week to format.
- * @example "Monday" -> "Mon"
- * @returns Formatted string of the day of the week.
- */
-export function formatDayShort(day) {
-    // Use the first three letters of the day
-    return day.slice(0, 3);
-}
 /**
  * Formats a day of the week.
  * @param day - The day of the week to format.
@@ -186,6 +176,16 @@ export function formatDayLetter(day) {
     // Use the first letters of the day
     return day.slice(0, 1);
 }
+/**
+ * Formats a day of the week.
+ * @param day - The day of the week to format.
+ * @example "Monday" -> "Mon"
+ * @returns Formatted string of the day of the week.
+ */
+export function formatDayShort(day) {
+    // Use the first three letters of the day
+    return day.slice(0, 3);
+}
 /* Calendar Dates */
 const FullDateFormatter = new DateFormatter(DEFAULT_LOCALE, {
     day: 'numeric',
@@ -193,8 +193,8 @@ const FullDateFormatter = new DateFormatter(DEFAULT_LOCALE, {
     year: 'numeric'
 });
 const ShortDateFormatter = new DateFormatter(DEFAULT_LOCALE, {
-    month: 'short',
-    day: 'numeric'
+    day: 'numeric',
+    month: 'short'
 });
 const MonthFormatter = new DateFormatter(DEFAULT_LOCALE, {
     month: 'short',
@@ -205,17 +205,16 @@ const NumFormatter = new DateFormatter(DEFAULT_LOCALE, {
     month: '2-digit',
     year: 'numeric'
 });
-function formatDate(date, formatter) {
-    const nativeDate = date.toDate(getLocalTimeZone());
-    return formatter.format(nativeDate);
-}
 /**
- * @param date The CalendarDate object to format.
- * @returns string of date in shortened format
- * @example "Oct 5"
+ * Formats a full date and time.
+ * @param datetime The ZonedDateTime object to format.
+ * @returns The formatted date and time string.
+ * @example "05/10/2023 14:30:00"
  */
-export function formatDateShort(date) {
-    return formatDate(date, ShortDateFormatter);
+export function formatAbsolute(datetime) {
+    const date = toCalendarDate(datetime);
+    const time = toTime(datetime);
+    return `${formatDateNum(date)} ${formatTimeFull(time)}`;
 }
 /**
  * @param date The CalendarDate object to format.
@@ -242,6 +241,14 @@ export function formatDateISO(date) {
 export function formatDateNum(date) {
     return formatDate(date, NumFormatter);
 }
+/**
+ * @param date The CalendarDate object to format.
+ * @returns string of date in shortened format
+ * @example "Oct 5"
+ */
+export function formatDateShort(date) {
+    return formatDate(date, ShortDateFormatter);
+}
 /**
  * Formats the month only.
  * @param date - The date to format.
@@ -252,22 +259,15 @@ export function formatMonth(date) {
     return formatDate(date, MonthFormatter);
 }
 /* Times */
-// Pad number with zeroes to the left
-function padNum(num, len) {
-    if (isNaN(num)) {
-        return '0'.repeat(len);
-    }
-    return num.toString().padStart(len, '0');
-}
 /**
- * Gives time in HH:MM format
- * @param time
- * @returns string of time in that format
+ * Calculates the end time given a starting time and duration.
+ * @param timeStart starting time
+ * @param durationMinutes duration in minutes
+ * @returns end time in HH:MM format
  */
-export function formatTimeShort(time) {
-    const hours = padNum(time.hour, 2);
-    const minutes = padNum(time.minute, 2);
-    return `${hours}:${minutes}`;
+export function formatTimeEnd(timeStart, durationMinutes) {
+    const timeEnd = timeStart.add({ minutes: durationMinutes });
+    return formatTimeShort(timeEnd);
 }
 /**
  * Gives time in HH:MM:SS format
@@ -281,27 +281,15 @@ export function formatTimeFull(time) {
     return `${hours}:${minutes}:${seconds}`;
 }
 /**
- * Calculates the end time given a starting time and duration.
- * @param timeStart starting time
- * @param durationMinutes duration in minutes
- * @returns end time in HH:MM format
- */
-export function formatTimeEnd(timeStart, durationMinutes) {
-    const timeEnd = timeStart.add({ minutes: durationMinutes });
-    return formatTimeShort(timeEnd);
-}
-/**
- * Formats a full date and time.
- * @param datetime The ZonedDateTime object to format.
- * @returns The formatted date and time string.
- * @example "05/10/2023 14:30:00"
+ * Gives time in HH:MM format
+ * @param time
+ * @returns string of time in that format
  */
-export function formatAbsolute(datetime) {
-    const date = toCalendarDate(datetime);
-    const time = toTime(datetime);
-    return `${formatDateNum(date)} ${formatTimeFull(time)}`;
+export function formatTimeShort(time) {
+    const hours = padNum(time.hour, 2);
+    const minutes = padNum(time.minute, 2);
+    return `${hours}:${minutes}`;
 }
-/* State handling */
 /**
  * Unfreezes a CalendarDate object from a snapshot.
  * @param raw - The snapshot of the CalendarDate object.
@@ -318,21 +306,33 @@ export function unfreezeDate(raw) {
 export function unfreezeTime(raw) {
     return new Time(raw.hour, raw.minute, raw.second, raw.millisecond);
 }
+/* State handling */
+function formatDate(date, formatter) {
+    const nativeDate = date.toDate(getLocalTimeZone());
+    return formatter.format(nativeDate);
+}
+// Pad number with zeroes to the left
+function padNum(num, len) {
+    if (isNaN(num)) {
+        return '0'.repeat(len);
+    }
+    return num.toString().padStart(len, '0');
+}
 // SerDe
 export const dateTransport = {
-    Time: {
-        encode: (t) => t instanceof Time && [t.hour, t.minute, t.second, t.millisecond],
-        decode: ([hour, minute, second, millisecond]) => new Time(hour, minute, second, millisecond)
-    },
     CalendarDate: {
-        encode: (d) => d instanceof CalendarDate && [d.year, d.month, d.day],
-        decode: ([year, month, day]) => new CalendarDate(year, month, day)
+        decode: ([year, month, day]) => new CalendarDate(year, month, day),
+        encode: (d) => d instanceof CalendarDate && [d.year, d.month, d.day]
+    },
+    Time: {
+        decode: ([hour, minute, second, millisecond]) => new Time(hour, minute, second, millisecond),
+        encode: (t) => t instanceof Time && [t.hour, t.minute, t.second, t.millisecond]
     },
     ZonedDateTime: {
-        encode: (value) => value instanceof ZonedDateTime && [value.toAbsoluteString(), value.timeZone],
         decode: ([absoluteString, timezone]) => {
             const nativeDate = new Date(absoluteString);
             return fromDate(nativeDate, timezone);
-        }
+        },
+        encode: (value) => value instanceof ZonedDateTime && [value.toAbsoluteString(), value.timeZone]
     }
 };