@proyecto-viviana/solid-stately 0.5.1 → 0.6.0-rc.1

package/src/calendar/createRangeCalendarState.ts

@@ -1,11 +1,31 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/calendar/useCalendarState.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/calendar/useRangeCalendarState.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/calendar/utils.ts
+
 /**
  * RangeCalendarState for Solid-Stately
  *
  * Provides state management for range calendar components.
- * Based on @react-stately/calendar useRangeCalendarState
+ * Ported from:
+ * - packages/react-stately/src/calendar/useRangeCalendarState.ts
+ * - packages/react-stately/src/calendar/useCalendarState.ts
+ * - packages/react-stately/src/calendar/utils.ts
  */
 
-import { createSignal, createMemo, createEffect, type Accessor } from "solid-js";
+import { createMemo, createEffect } from "solid-js";
+import type { Accessor } from "solid-js";
 import {
   type Calendar as InternationalizedCalendar,
   type CalendarDate,
@@ -28,7 +48,7 @@ import {
   toCalendar as intlToCalendar,
   toCalendarDate as intlToCalendarDate,
 } from "@internationalized/date";
-import { access, type MaybeAccessor } from "../utils";
+import { access, createInternalSignal, readNow, type MaybeAccessor } from "../utils";
 import type { CalendarDayOfWeek, ValidationState } from "./createCalendarState";
 import { getFormatOptions } from "./createDateFieldState";
 
@@ -87,6 +107,8 @@ export interface RangeCalendarStateProps<T extends DateValue = DateValue> {
   isDateDisabled?: (date: DateValue) => boolean;
   /** Validation state. */
   validationState?: MaybeAccessor<ValidationState | undefined>;
+  /** Whether the current selection is invalid according to application logic. */
+  isInvalid?: boolean;
   /** Whether to allow selecting the same date for start and end. */
   allowsNonContiguousRanges?: boolean;
   /** The first day of the week (0 = Sunday, 1 = Monday, etc.). */
@@ -172,6 +194,11 @@ export interface RangeCalendarState<T extends DateValue = DateValue> {
   selectFocusedDate: () => void;
   /** Selects a specific date. */
   selectDate: (date: CalendarDate) => void;
+  /**
+   * After a keyboard range-start selection, move focus to the next available
+   * day so the in-progress range is visible. RAC `focusNearestAvailableDate`.
+   */
+  focusNearestAvailableDate: (anchorDate: CalendarDate) => void;
   /** Whether focus is currently within the calendar. */
   isFocused: Accessor<boolean>;
   /** Sets whether focus is within the calendar. */
@@ -216,7 +243,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   const calendar = createMemo(() =>
     (props.createCalendar ?? intlCreateCalendar)(resolvedOptions().calendar as CalendarIdentifier),
   );
-  const visibleMonths = Math.max(1, Number(access(props.visibleMonths) ?? 1));
+  const visibleMonths = createMemo(() => Math.max(1, Number(access(props.visibleMonths) ?? 1)));
   const firstDayOfWeekName = (): CalendarDayOfWeek | undefined =>
     props.firstDayOfWeek == null ? undefined : dayOfWeekNames[props.firstDayOfWeek];
 
@@ -226,7 +253,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   // The anchor date is the first selected date during a range drag. Declared up
   // here (ahead of constrainDate) because the available-range derivation below
   // depends on it, and constrainDate consults that range.
-  const [anchorDate, setAnchorDate] = createSignal<CalendarDate | null>(null);
+  const [anchorDate, setAnchorDate] = createInternalSignal<CalendarDate | null>(null);
 
   // Mirrors @react-stately/calendar useRangeCalendarState getAvailableRange: once
   // a range selection is anchored and unavailable dates exist, contiguous ranges
@@ -238,8 +265,8 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     if (anchor && props.isDateUnavailable && !props.allowsNonContiguousRanges) {
       const predicate = (date: CalendarDate): boolean => props.isDateUnavailable!(date, anchor);
       return {
-        start: nextUnavailableDate(anchor, predicate, visibleMonths, -1),
-        end: nextUnavailableDate(anchor, predicate, visibleMonths, 1),
+        start: nextUnavailableDate(anchor, predicate, visibleMonths(), -1),
+        end: nextUnavailableDate(anchor, predicate, visibleMonths(), 1),
       };
     }
     return null;
@@ -281,7 +308,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   const visibleRangeEndFromStart = (start: CalendarDate): CalendarDate => {
     let end = endOfMonth(start);
 
-    for (let i = 1; i < visibleMonths; i++) {
+    for (let i = 1; i < visibleMonths(); i++) {
       end = endOfMonth(end.add({ months: 1 }));
     }
 
@@ -290,10 +317,14 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
 
   const rawAlignStart = (date: CalendarDate): CalendarDate => startOfMonth(date);
 
-  const rawAlignEnd = (date: CalendarDate): CalendarDate =>
-    startOfMonth(date).subtract({ months: Math.max(visibleMonths - 1, 0) });
+  const rawAlignEnd = (date: CalendarDate, months = visibleMonths()): CalendarDate =>
+    startOfMonth(date).subtract({ months: Math.max(months - 1, 0) });
 
-  const constrainVisibleRangeStart = (date: CalendarDate, aligned: CalendarDate): CalendarDate => {
+  const constrainVisibleRangeStart = (
+    date: CalendarDate,
+    aligned: CalendarDate,
+    months = visibleMonths(),
+  ): CalendarDate => {
     const minValue = access(props.minValue);
     const maxValue = access(props.maxValue);
     let constrained = aligned;
@@ -306,7 +337,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     }
 
     if (maxValue && date.compare(toDisplayCalendarDate(maxValue)) <= 0) {
-      const maxStart = rawAlignEnd(toDisplayCalendarDate(maxValue));
+      const maxStart = rawAlignEnd(toDisplayCalendarDate(maxValue), months);
       if (maxStart.compare(constrained) < 0) {
         constrained = maxStart;
       }
@@ -322,16 +353,19 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     constrainVisibleRangeStart(date, rawAlignEnd(date));
 
   const alignCenter = (date: CalendarDate): CalendarDate => {
-    let offset = Math.floor(visibleMonths / 2);
-    if (offset > 0 && visibleMonths % 2 === 0) {
+    let offset = Math.floor(visibleMonths() / 2);
+    if (offset > 0 && visibleMonths() % 2 === 0) {
       offset--;
     }
 
     return constrainVisibleRangeStart(date, rawAlignStart(date).subtract({ months: offset }));
   };
 
+  // A controlled null is a cleared selection. Pin useControlledState treats
+  // `value !== undefined` as controlled, so null must not fall through to defaultValue.
   const defaultSelectionAlignment = (): RangeCalendarSelectionAlignment => {
-    const currentValue = access(props.value) ?? props.defaultValue;
+    const controlled = access(props.value);
+    const currentValue = controlled !== undefined ? controlled : props.defaultValue;
     if (!currentValue?.start || !currentValue?.end) {
       return "center";
     }
@@ -363,26 +397,28 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
       return toDisplayCalendarDate(props.defaultFocusedValue);
     }
     const controlledValue = access(props.value);
-    if (controlledValue?.start) {
-      return toDisplayCalendarDate(controlledValue.start);
-    }
-    if (props.defaultValue?.start) {
+    if (controlledValue !== undefined) {
+      if (controlledValue?.start) {
+        return toDisplayCalendarDate(controlledValue.start);
+      }
+    } else if (props.defaultValue?.start) {
       return toDisplayCalendarDate(props.defaultValue.start);
     }
     return intlToCalendar(today(timeZone), calendar());
   };
 
   // State signals
-  const [internalValue, setInternalValue] = createSignal<RangeValue<T> | null>(
+  const [internalValue, setInternalValue] = createInternalSignal<RangeValue<T> | null>(
     props.defaultValue ?? null,
   );
   const initialFocusedDate = constrainDate(getInitialFocusedDate());
-  const [focusedDate, setFocusedDateInternal] = createSignal<CalendarDate>(initialFocusedDate);
-  const [visibleRangeStart, setVisibleRangeStart] = createSignal<CalendarDate>(
+  const [focusedDate, setFocusedDateInternal] =
+    createInternalSignal<CalendarDate>(initialFocusedDate);
+  const [visibleRangeStart, setVisibleRangeStart] = createInternalSignal<CalendarDate>(
     alignVisibleRangeStart(initialFocusedDate),
   );
-  const [isFocused, setFocused] = createSignal(false);
-  const [isDragging, setDragging] = createSignal(false);
+  const [isFocused, setFocused] = createInternalSignal(false);
+  const [isDragging, setDragging] = createInternalSignal(false);
 
   // Controlled vs uncontrolled value
   const sourceValue = createMemo<RangeValue<T> | null>(() => {
@@ -425,7 +461,10 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
       isDateOutsideRange(toDisplayCalendarDate(v.end), minCal, maxCal)
     );
   });
-  const isValueInvalid = createMemo(() => validationState() === "invalid" || isInvalidSelection());
+  const isValueInvalid = createMemo(
+    () =>
+      Boolean(access(props.isInvalid)) || validationState() === "invalid" || isInvalidSelection(),
+  );
 
   // Highlighted range during selection
   const highlightedRange = createMemo<RangeValue<CalendarDate> | null>(() => {
@@ -448,7 +487,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     return { start: focused, end: anchor };
   });
 
-  // Visible range based on React Stately's selection alignment rules.
+  // The visible range follows React Stately's selection alignment rules.
   const visibleRange = createMemo(() => {
     const start = visibleRangeStart();
     return { start, end: visibleRangeEndFromStart(start) };
@@ -461,9 +500,10 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   // on out-of-range keeps a same-month focus from re-firing visibleRangeStart
   // with a fresh equal-valued object, which would otherwise recompute the grid
   // and recreate every cell on focus.
-  const syncVisibleRangeForFocusedDate = (nextFocusedDate: CalendarDate) => {
-    const range = visibleRange();
-
+  const syncVisibleRangeForFocusedDate = (
+    nextFocusedDate: CalendarDate,
+    range: { start: CalendarDate; end: CalendarDate },
+  ) => {
     if (nextFocusedDate.compare(range.start) < 0) {
       setVisibleRangeStart(alignEnd(nextFocusedDate));
     } else if (nextFocusedDate.compare(range.end) > 0) {
@@ -471,56 +511,73 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     }
   };
 
-  createEffect(() => {
-    const controlledFocused = access(props.focusedValue);
-    if (!controlledFocused) {
-      return;
-    }
-
-    const nextFocusedDate = constrainDate(toDisplayCalendarDate(controlledFocused));
-    const currentFocusedDate = focusedDate();
-
-    if (
-      nextFocusedDate.compare(currentFocusedDate) !== 0 ||
-      !isEqualCalendar(nextFocusedDate.calendar, currentFocusedDate.calendar)
-    ) {
-      setFocusedDateInternal(nextFocusedDate);
-      setVisibleRangeStart(alignVisibleRangeStart(nextFocusedDate));
-    }
-  });
-
-  createEffect(() => {
-    const controlledFocused = access(props.focusedValue);
-    if (controlledFocused) {
-      return;
-    }
-
-    const currentFocusedDate = focusedDate();
-    const nextFocusedDate = constrainDate(currentFocusedDate);
-
-    if (
-      nextFocusedDate.compare(currentFocusedDate) === 0 &&
-      isEqualCalendar(nextFocusedDate.calendar, currentFocusedDate.calendar)
-    ) {
-      return;
-    }
-
-    setFocusedDateInternal(nextFocusedDate);
-    setVisibleRangeStart(alignVisibleRangeStart(nextFocusedDate));
-    props.onFocusChange?.(nextFocusedDate);
-  });
-
-  createEffect(() => {
-    const currentFocusedDate = focusedDate();
-    const nextFocusedDate = toDisplayCalendarDate(currentFocusedDate);
+  createEffect(
+    () => {
+      const controlledFocused = access(props.focusedValue);
+      if (!controlledFocused) return null;
+      const nextFocusedDate = constrainDate(toDisplayCalendarDate(controlledFocused));
+      return {
+        nextFocusedDate,
+        currentFocusedDate: focusedDate(),
+        alignedStart: alignVisibleRangeStart(nextFocusedDate),
+      };
+    },
+    (data) => {
+      if (!data) return;
+      const { nextFocusedDate, currentFocusedDate, alignedStart } = data;
+      if (
+        nextFocusedDate.compare(currentFocusedDate) !== 0 ||
+        !isEqualCalendar(nextFocusedDate.calendar, currentFocusedDate.calendar)
+      ) {
+        setFocusedDateInternal(nextFocusedDate);
+        setVisibleRangeStart(alignedStart);
+      }
+    },
+  );
 
-    if (isEqualCalendar(currentFocusedDate.calendar, nextFocusedDate.calendar)) {
-      return;
-    }
+  createEffect(
+    () => {
+      const controlledFocused = access(props.focusedValue);
+      if (controlledFocused) return null;
+      const currentFocusedDate = focusedDate();
+      const nextFocusedDate = constrainDate(currentFocusedDate);
+      if (
+        nextFocusedDate.compare(currentFocusedDate) === 0 &&
+        isEqualCalendar(nextFocusedDate.calendar, currentFocusedDate.calendar)
+      ) {
+        return null;
+      }
+      return {
+        nextFocusedDate,
+        alignedStart: alignVisibleRangeStart(nextFocusedDate),
+      };
+    },
+    (data) => {
+      if (!data) return;
+      setFocusedDateInternal(data.nextFocusedDate);
+      setVisibleRangeStart(data.alignedStart);
+      props.onFocusChange?.(data.nextFocusedDate);
+    },
+  );
 
-    setFocusedDateInternal(nextFocusedDate);
-    setVisibleRangeStart(alignVisibleRangeStart(nextFocusedDate));
-  });
+  createEffect(
+    () => {
+      const currentFocusedDate = focusedDate();
+      const nextFocusedDate = toDisplayCalendarDate(currentFocusedDate);
+      if (isEqualCalendar(currentFocusedDate.calendar, nextFocusedDate.calendar)) {
+        return null;
+      }
+      return {
+        nextFocusedDate,
+        alignedStart: alignVisibleRangeStart(nextFocusedDate),
+      };
+    },
+    (data) => {
+      if (!data) return;
+      setFocusedDateInternal(data.nextFocusedDate);
+      setVisibleRangeStart(data.alignedStart);
+    },
+  );
 
   // Format week days for headers
   const weekDays = createMemo(() => {
@@ -581,7 +638,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
       return;
     }
 
-    syncVisibleRangeForFocusedDate(constrained);
+    syncVisibleRangeForFocusedDate(constrained, visibleRange());
     setFocusedDateInternal(constrained);
     props.onFocusChange?.(constrained);
   };
@@ -691,18 +748,22 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   // the window, so a single-month page whose focus stays in view would never
   // advance the grid.
   const focusPreviousPage = () => {
-    const pageMonths = access(props.pageBehavior) === "single" ? 1 : visibleMonths;
-    const nextFocusedDate = constrainDate(focusedDate().subtract({ months: pageMonths }));
+    const pageMonths = access(props.pageBehavior) === "single" ? 1 : visibleMonths();
+    const currentFocused = focusedDate();
+    const nextFocusedDate = constrainDate(currentFocused.subtract({ months: pageMonths }));
+    const slidStart = startOfMonth(visibleRangeStart().subtract({ months: pageMonths }));
     setFocusedDateInternal(nextFocusedDate);
-    setVisibleRangeStart(startOfMonth(visibleRangeStart().subtract({ months: pageMonths })));
+    setVisibleRangeStart(constrainVisibleRangeStart(currentFocused, slidStart, pageMonths));
     props.onFocusChange?.(nextFocusedDate);
   };
 
   const focusNextPage = () => {
-    const pageMonths = access(props.pageBehavior) === "single" ? 1 : visibleMonths;
-    const nextFocusedDate = constrainDate(focusedDate().add({ months: pageMonths }));
+    const pageMonths = access(props.pageBehavior) === "single" ? 1 : visibleMonths();
+    const currentFocused = focusedDate();
+    const nextFocusedDate = constrainDate(currentFocused.add({ months: pageMonths }));
+    const slidStart = startOfMonth(visibleRangeStart().add({ months: pageMonths }));
     setFocusedDateInternal(nextFocusedDate);
-    setVisibleRangeStart(startOfMonth(visibleRangeStart().add({ months: pageMonths })));
+    setVisibleRangeStart(constrainVisibleRangeStart(currentFocused, slidStart, pageMonths));
     props.onFocusChange?.(nextFocusedDate);
   };
 
@@ -785,7 +846,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     );
     if (!selectableDate) return;
 
-    const anchor = anchorDate();
+    const anchor = readNow(anchorDate);
 
     if (!anchor) {
       // First click - set anchor
@@ -836,6 +897,29 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     return week;
   };
 
+  const focusNearestAvailableDate = (anchor: CalendarDate) => {
+    // RAC `useRangeCalendarState.ts:261-273`: prefer anchor+1, else −1.
+    // Invalid is outside min/max or this anchor's contiguous span. A day in
+    // the next month, or an unavailable day when non-contiguous ranges are
+    // allowed, is still a valid focus target.
+    const passedRange = getAvailableRange(anchor);
+    const isDateInvalid = (candidate: CalendarDate) => {
+      if (isDateOutsideAllowedRange(candidate)) return true;
+      const calDate = toDisplayCalendarDate(candidate);
+      if (passedRange?.start && calDate.compare(passedRange.start) < 0) return true;
+      if (passedRange?.end && calDate.compare(passedRange.end) > 0) return true;
+      return false;
+    };
+    let nextDay = anchor.add({ days: 1 });
+    if (isDateInvalid(nextDay)) {
+      nextDay = anchor.subtract({ days: 1 });
+    }
+    if (!isDateInvalid(nextDay)) {
+      setFocusedDate(nextDay);
+      setFocused(true);
+    }
+  };
+
   // Get number of weeks in a month
   const getWeeksInMonthFn = (date?: CalendarDate): number => {
     const monthDate = date ?? focusedDate();
@@ -966,13 +1050,16 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     focusPageEnd,
     selectFocusedDate,
     selectDate,
+    focusNearestAvailableDate,
     isFocused,
     setFocused,
     getDatesInWeek,
     getWeeksInMonth: getWeeksInMonthFn,
     weekDays,
     title,
-    visibleMonths,
+    get visibleMonths() {
+      return visibleMonths();
+    },
     isDragging,
     setDragging,
     formatValue,

package/src/calendar/createTimeFieldState.ts

@@ -1,8 +1,23 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/datepicker/useTimeFieldState.ts
+
 /**
  * TimeFieldState for Solid-Stately
  *
- * Faithful port of `@react-stately/datepicker` `useTimeFieldState`, which is a
- * thin wrapper over `useDateFieldState`: a time-only `Time` value is converted
+ * Faithful port of
+ * `packages/react-stately/src/datepicker/useTimeFieldState.ts`, which is a thin
+ * wrapper over `useDateFieldState`: a time-only `Time` value is converted
  * to a `CalendarDateTime` (anchored on today's date, or a zoned date when the
  * value/default carries a time zone) and fed to the date-field state machine
  * with `maxGranularity: 'hour'` so the date segments drop away and only
@@ -19,7 +34,10 @@
  * invoke and freeze them, breaking reactivity.
  */
 
-import { createSignal, createMemo, type Accessor } from "solid-js";
+import { createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
+import { access, createInternalSignal, type MaybeAccessor } from "../utils";
+
 import {
   Time,
   type CalendarDate,
@@ -33,7 +51,6 @@ import {
   toCalendarDateTime,
   GregorianCalendar,
 } from "@internationalized/date";
-import { access, type MaybeAccessor } from "../utils";
 import type { ValidationState } from "./createCalendarState";
 import type { ValidationBehavior, ValidationFunction } from "../form";
 import {
@@ -73,7 +90,7 @@ export interface TimeFieldStateProps<T extends TimeValue = Time> {
   /** Whether the value is invalid (controlled). */
   isInvalid?: boolean;
   /** The locale to use for formatting. */
-  locale?: string;
+  locale?: MaybeAccessor<string | undefined>;
   /** The granularity (hour, minute, second). */
   granularity?: "hour" | "minute" | "second";
   /** Whether to show 12 or 24 hour format. */
@@ -105,7 +122,7 @@ export interface TimeFieldStateProps<T extends TimeValue = Time> {
  * consumers.
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export interface TimeFieldState<T extends TimeValue = Time> extends DateFieldState {
+export interface TimeFieldState<_T extends TimeValue = Time> extends DateFieldState {
   /** The current value in the `Time`/`CalendarDateTime`/`ZonedDateTime` domain. */
   timeValue: Accessor<TimeValue | null>;
 }
@@ -137,7 +154,9 @@ export function createTimeFieldState<T extends TimeValue = Time>(
   const placeholderValue: TimeValue = props.placeholderValue ?? new Time();
 
   // Controlled/uncontrolled Time value (mirrors useControlledState).
-  const [internalValue, setInternalValue] = createSignal<T | null>(props.defaultValue ?? null);
+  const [internalValue, setInternalValue] = createInternalSignal<T | null>(
+    props.defaultValue ?? null,
+  );
   const value = (): T | null => {
     const controlled = access(props.value);
     return controlled !== undefined ? controlled : internalValue();

package/src/calendar/intl/index.ts

@@ -1,5 +1,40 @@
-// DateField validation-message catalog, ported verbatim from @react-stately/datepicker's
-// intl/*.json (34 locales). Keep in sync with the vendored react-spectrum source on every
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/ar-AE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/bg-BG.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/cs-CZ.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/da-DK.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/de-DE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/el-GR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/en-US.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/es-ES.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/et-EE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/fi-FI.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/fr-FR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/he-IL.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/hr-HR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/hu-HU.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/it-IT.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/ja-JP.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/ko-KR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/lt-LT.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/lv-LV.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/nb-NO.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/nl-NL.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/pl-PL.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/pt-BR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/pt-PT.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/ro-RO.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/ru-RU.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/sk-SK.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/sl-SI.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/sr-SP.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/sv-SE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/tr-TR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/uk-UA.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/zh-CN.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/datepicker/zh-TW.json
+
+// DateField validation messages. Ported from the @react-stately/datepicker intl catalog.
+// The catalog has 34 locales. Keep it in sync with the vendored react-spectrum source on every
 // pin bump. Hand-rolled resolver so solid-stately needs no @internationalized/string dep.
 
 export type DateFieldErrorKey =