@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/calendar/intl/index.ts

@@ -0,0 +1,210 @@
+import {
+  LocalizedStringDictionary,
+  LocalizedStringFormatter,
+  type LocalizedStrings,
+} from "@internationalized/string";
+
+type CalendarPromptKey = "startRangeSelectionPrompt" | "finishRangeSelectionPrompt";
+type CalendarLabelKey =
+  | "dateRange"
+  | "dateSelected"
+  | "maximumDate"
+  | "minimumDate"
+  | "selectedDateDescription"
+  | "selectedRangeDescription"
+  | "todayDate"
+  | "todayDateSelected";
+type CalendarLabelVariables = {
+  date?: string;
+  dateRange?: string;
+  startDate?: string;
+  endDate?: string;
+};
+type CalendarLabelMessage = string | ((args: CalendarLabelVariables | undefined) => string);
+
+const calendarPromptStrings: LocalizedStrings<CalendarPromptKey, string> = {
+  "ar-AE": {
+    startRangeSelectionPrompt: "انقر لبدء عملية تحديد نطاق التاريخ",
+    finishRangeSelectionPrompt: "انقر لإنهاء عملية تحديد نطاق التاريخ",
+  },
+  "bg-BG": {
+    startRangeSelectionPrompt: "Натиснете, за да пристъпите към избора на времеви интервал",
+    finishRangeSelectionPrompt: "Натиснете, за да довършите избора на времеви интервал",
+  },
+  "cs-CZ": {
+    startRangeSelectionPrompt: "Kliknutím zahájíte výběr rozsahu dat",
+    finishRangeSelectionPrompt: "Kliknutím dokončíte výběr rozsahu dat",
+  },
+  "da-DK": {
+    startRangeSelectionPrompt: "Klik for at starte valg af datoområde",
+    finishRangeSelectionPrompt: "Klik for at fuldføre valg af datoområde",
+  },
+  "de-DE": {
+    startRangeSelectionPrompt: "Klicken, um die Auswahl des Datumsbereichs zu beginnen",
+    finishRangeSelectionPrompt: "Klicken, um die Auswahl des Datumsbereichs zu beenden",
+  },
+  "el-GR": {
+    startRangeSelectionPrompt: "Κάντε κλικ για να ξεκινήσετε την επιλογή εύρους ημερομηνιών",
+    finishRangeSelectionPrompt: "Κάντε κλικ για να ολοκληρώσετε την επιλογή εύρους ημερομηνιών",
+  },
+  "en-US": {
+    startRangeSelectionPrompt: "Click to start selecting date range",
+    finishRangeSelectionPrompt: "Click to finish selecting date range",
+  },
+  "es-ES": {
+    startRangeSelectionPrompt: "Haga clic para comenzar a seleccionar un rango de fechas",
+    finishRangeSelectionPrompt: "Haga clic para terminar de seleccionar rango de fechas",
+  },
+  "et-EE": {
+    startRangeSelectionPrompt: "Klõpsake kuupäevavahemiku valimiseks",
+    finishRangeSelectionPrompt: "Klõpsake kuupäevavahemiku valimise lõpetamiseks",
+  },
+  "fi-FI": {
+    startRangeSelectionPrompt: "Aloita päivämääräalueen valinta napsauttamalla tätä.",
+    finishRangeSelectionPrompt: "Lopeta päivämääräalueen valinta napsauttamalla tätä.",
+  },
+  "fr-FR": {
+    startRangeSelectionPrompt: "Cliquer pour commencer à sélectionner la plage de dates",
+    finishRangeSelectionPrompt: "Cliquer pour finir de sélectionner la plage de dates",
+  },
+  "he-IL": {
+    startRangeSelectionPrompt: "לחץ כדי להתחיל בבחירת טווח התאריכים",
+    finishRangeSelectionPrompt: "חץ כדי לסיים את בחירת טווח התאריכים",
+  },
+  "hr-HR": {
+    startRangeSelectionPrompt: "Kliknite da započnete raspon odabranih datuma",
+    finishRangeSelectionPrompt: "Kliknite da dovršite raspon odabranih datuma",
+  },
+  "hu-HU": {
+    startRangeSelectionPrompt: "Kattintson a dátumtartomány kijelölésének indításához",
+    finishRangeSelectionPrompt: "Kattintson a dátumtartomány kijelölésének befejezéséhez",
+  },
+  "it-IT": {
+    startRangeSelectionPrompt: "Fai clic per selezionare l’intervallo di date",
+    finishRangeSelectionPrompt: "Fai clic per completare la selezione dell’intervallo di date",
+  },
+  "ja-JP": {
+    startRangeSelectionPrompt: "クリックして日付範囲の選択を開始",
+    finishRangeSelectionPrompt: "クリックして日付範囲の選択を終了",
+  },
+  "ko-KR": {
+    startRangeSelectionPrompt: "날짜 범위 선택을 시작하려면 클릭하십시오.",
+    finishRangeSelectionPrompt: "날짜 범위 선택을 완료하려면 클릭하십시오.",
+  },
+  "lt-LT": {
+    startRangeSelectionPrompt: "Spustelėkite, kad pradėtumėte pasirinkti datų intervalą",
+    finishRangeSelectionPrompt: "Spustelėkite, kad baigtumėte pasirinkti datų intervalą",
+  },
+  "lv-LV": {
+    startRangeSelectionPrompt: "Noklikšķiniet, lai sāktu datumu diapazona atlasi",
+    finishRangeSelectionPrompt: "Noklikšķiniet, lai pabeigtu datumu diapazona atlasi",
+  },
+  "nb-NO": {
+    startRangeSelectionPrompt: "Klikk for å starte valg av datoområde",
+    finishRangeSelectionPrompt: "Klikk for å fullføre valg av datoområde",
+  },
+  "nl-NL": {
+    startRangeSelectionPrompt: "Klik om het datumbereik te selecteren",
+    finishRangeSelectionPrompt: "Klik om de selectie van het datumbereik te voltooien",
+  },
+  "pl-PL": {
+    startRangeSelectionPrompt: "Kliknij, aby rozpocząć wybór zakresu dat",
+    finishRangeSelectionPrompt: "Kliknij, aby zakończyć wybór zakresu dat",
+  },
+  "pt-BR": {
+    startRangeSelectionPrompt: "Clique para iniciar a seleção do intervalo de datas",
+    finishRangeSelectionPrompt: "Clique para concluir a seleção do intervalo de datas",
+  },
+  "pt-PT": {
+    startRangeSelectionPrompt: "Clique para começar a selecionar o intervalo de datas",
+    finishRangeSelectionPrompt: "Clique para terminar de selecionar o intervalo de datas",
+  },
+  "ro-RO": {
+    startRangeSelectionPrompt: "Apăsaţi pentru a începe selecţia razei pentru dată",
+    finishRangeSelectionPrompt: "Apăsaţi pentru a finaliza selecţia razei pentru dată",
+  },
+  "ru-RU": {
+    startRangeSelectionPrompt: "Щелкните, чтобы начать выбор диапазона дат",
+    finishRangeSelectionPrompt: "Щелкните, чтобы завершить выбор диапазона дат",
+  },
+  "sk-SK": {
+    startRangeSelectionPrompt: "Kliknutím spustíte výber rozsahu dátumov",
+    finishRangeSelectionPrompt: "Kliknutím dokončíte výber rozsahu dátumov",
+  },
+  "sl-SI": {
+    startRangeSelectionPrompt: "Kliknite za začetek izbire datumskega obsega",
+    finishRangeSelectionPrompt: "Kliknite za dokončanje izbire datumskega obsega",
+  },
+  "sr-SP": {
+    startRangeSelectionPrompt: "Kliknite da započnete opseg izabranih datuma",
+    finishRangeSelectionPrompt: "Kliknite da dovršite opseg izabranih datuma",
+  },
+  "sv-SE": {
+    startRangeSelectionPrompt: "Klicka för att välja datumintervall",
+    finishRangeSelectionPrompt: "Klicka för att avsluta val av datumintervall",
+  },
+  "tr-TR": {
+    startRangeSelectionPrompt: "Tarih aralığı seçimini başlatmak için tıklayın",
+    finishRangeSelectionPrompt: "Tarih aralığı seçimini tamamlamak için tıklayın",
+  },
+  "uk-UA": {
+    startRangeSelectionPrompt: "Натисніть, щоб почати вибір діапазону дат",
+    finishRangeSelectionPrompt: "Натисніть, щоб завершити вибір діапазону дат",
+  },
+  "zh-CN": {
+    startRangeSelectionPrompt: "单击以开始选择日期范围",
+    finishRangeSelectionPrompt: "单击以完成选择日期范围",
+  },
+  "zh-TW": {
+    startRangeSelectionPrompt: "按一下以開始選取日期範圍",
+    finishRangeSelectionPrompt: "按一下以完成選取日期範圍",
+  },
+};
+
+const calendarPromptDictionary = new LocalizedStringDictionary(calendarPromptStrings);
+
+const calendarLabelStrings: LocalizedStrings<CalendarLabelKey, CalendarLabelMessage> = {
+  "en-US": {
+    dateRange: (args) => `${args?.startDate} to ${args?.endDate}`,
+    dateSelected: (args) => `${args?.date} selected`,
+    maximumDate: "Last available date",
+    minimumDate: "First available date",
+    selectedDateDescription: (args) => `Selected Date: ${args?.date}`,
+    selectedRangeDescription: (args) => `Selected Range: ${args?.dateRange}`,
+    todayDate: (args) => `Today, ${args?.date}`,
+    todayDateSelected: (args) => `Today, ${args?.date} selected`,
+  },
+  "fr-FR": {
+    dateRange: (args) => `${args?.startDate} à ${args?.endDate}`,
+    dateSelected: (args) => `${args?.date} sélectionné`,
+    maximumDate: "Dernière date disponible",
+    minimumDate: "Première date disponible",
+    selectedDateDescription: (args) => `Date sélectionnée : ${args?.date}`,
+    selectedRangeDescription: (args) => `Plage sélectionnée : ${args?.dateRange}`,
+    todayDate: (args) => `Aujourd'hui, ${args?.date}`,
+    todayDateSelected: (args) => `Aujourd’hui, ${args?.date} sélectionné`,
+  },
+  "ar-AE": {
+    dateRange: (args) => `${args?.startDate} إلى ${args?.endDate}`,
+    dateSelected: (args) => `${args?.date} المحدد`,
+    maximumDate: "آخر تاريخ متاح",
+    minimumDate: "أول تاريخ متاح",
+    selectedDateDescription: (args) => `تاريخ محدد: ${args?.date}`,
+    selectedRangeDescription: (args) => `المدى الزمني المحدد: ${args?.dateRange}`,
+    todayDate: (args) => `اليوم، ${args?.date}`,
+    todayDateSelected: (args) => `اليوم، ${args?.date} محدد`,
+  },
+};
+const calendarLabelDictionary = new LocalizedStringDictionary(calendarLabelStrings);
+
+export function formatCalendarPrompt(locale: string, key: CalendarPromptKey): string {
+  return new LocalizedStringFormatter(locale, calendarPromptDictionary).format(key);
+}
+
+export function formatCalendarLabel(
+  locale: string,
+  key: CalendarLabelKey,
+  variables?: CalendarLabelVariables,
+): string {
+  return new LocalizedStringFormatter(locale, calendarLabelDictionary).format(key, variables);
+}

package/src/calendar/utils.ts

@@ -0,0 +1,231 @@
+import {
+  type CalendarDate,
+  DateFormatter,
+  endOfMonth,
+  isSameDay,
+  startOfMonth,
+} from "@internationalized/date";
+import type { CalendarState, RangeCalendarState } from "@proyecto-viviana/solid-stately";
+import { formatCalendarLabel } from "./intl";
+
+export interface CalendarHookData {
+  errorMessageId?: string;
+  selectedDateDescription?: string;
+  /** The calendar's accessible label, shared with each grid (mirrors @react-aria/calendar hookData.ariaLabel). */
+  ariaLabel?: string;
+  /** The id of an element labelling the calendar, shared with each grid (mirrors hookData.ariaLabelledBy). */
+  ariaLabelledBy?: string;
+}
+
+const hookData = new WeakMap<CalendarState | RangeCalendarState, CalendarHookData>();
+
+export function setCalendarHookData(
+  state: CalendarState | RangeCalendarState,
+  data: CalendarHookData,
+): void {
+  hookData.set(state, data);
+}
+
+export function getCalendarHookData(
+  state: CalendarState | RangeCalendarState,
+): CalendarHookData | undefined {
+  return hookData.get(state);
+}
+
+export function getEraFormat(date: CalendarDate | undefined): "short" | undefined {
+  return date?.calendar.identifier === "gregory" && date.era === "BC" ? "short" : undefined;
+}
+
+export function formatVisibleRangeDescription(
+  startDate: CalendarDate,
+  endDate: CalendarDate,
+  timeZone: string,
+  locale: string,
+): string {
+  const era = getEraFormat(startDate) || getEraFormat(endDate);
+  const monthFormatter = new DateFormatter(locale, {
+    month: "long",
+    year: "numeric",
+    era,
+    calendar: startDate.calendar.identifier,
+    timeZone,
+  } as Intl.DateTimeFormatOptions);
+  const dateFormatter = new DateFormatter(locale, {
+    month: "long",
+    year: "numeric",
+    day: "numeric",
+    era,
+    calendar: startDate.calendar.identifier,
+    timeZone,
+  } as Intl.DateTimeFormatOptions);
+
+  if (isSameDay(startDate, startOfMonth(startDate))) {
+    const startMonth = startDate.calendar.getFormattableMonth?.(startDate) ?? startDate;
+    const endMonth = endDate.calendar.getFormattableMonth?.(endDate) ?? endDate;
+
+    if (isSameDay(endDate, endOfMonth(startDate))) {
+      return monthFormatter.format(startMonth.toDate(timeZone));
+    }
+
+    if (isSameDay(endDate, endOfMonth(endDate))) {
+      return formatRange(monthFormatter, startMonth, endMonth, timeZone);
+    }
+  }
+
+  return formatRange(dateFormatter, startDate, endDate, timeZone);
+}
+
+export function formatSelectedDateDescription(state: CalendarState | RangeCalendarState): string {
+  const locale = state.locale();
+  const timeZone = state.timeZone;
+  let start: CalendarDate | undefined;
+  let end: CalendarDate | undefined;
+
+  if ("highlightedRange" in state) {
+    const range = state.highlightedRange();
+    start = range?.start;
+    end = range?.end;
+  } else {
+    const value = state.value();
+    start = (value as CalendarDate | null) ?? undefined;
+    end = (value as CalendarDate | null) ?? undefined;
+  }
+
+  const anchorDate = "anchorDate" in state ? state.anchorDate() : null;
+  if (anchorDate || !start || !end) {
+    return "";
+  }
+
+  const dateFormatter = new DateFormatter(locale, {
+    weekday: "long",
+    month: "long",
+    year: "numeric",
+    day: "numeric",
+    era: getEraFormat(start) || getEraFormat(end),
+    timeZone,
+  } as Intl.DateTimeFormatOptions);
+
+  if (isSameDay(start, end)) {
+    return formatCalendarLabel(locale, "selectedDateDescription", {
+      date: dateFormatter.format(start.toDate(timeZone)),
+    });
+  }
+
+  return formatCalendarLabel(locale, "selectedRangeDescription", {
+    dateRange: formatLabelRange(dateFormatter, start, end, timeZone, locale),
+  });
+}
+
+function formatRange(
+  dateFormatter: DateFormatter,
+  startDate: CalendarDate,
+  endDate: CalendarDate,
+  timeZone: string,
+): string {
+  const formatter = dateFormatter as DateFormatter & {
+    formatRangeToParts?: (start: Date, end: Date) => Intl.DateTimeFormatPart[];
+  };
+  const start = startDate.toDate(timeZone);
+  const end = endDate.toDate(timeZone);
+
+  if (!formatter.formatRangeToParts) {
+    return `${dateFormatter.format(start)} to ${dateFormatter.format(end)}`;
+  }
+
+  const parts = formatter.formatRangeToParts(start, end) as Array<
+    Intl.DateTimeFormatPart & { source?: "startRange" | "shared" | "endRange" }
+  >;
+  let separatorIndex = -1;
+
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i];
+    if (part?.source === "shared" && part.type === "literal") {
+      separatorIndex = i;
+    } else if (part?.source === "endRange") {
+      break;
+    }
+  }
+
+  if (separatorIndex < 0) {
+    return `${dateFormatter.format(start)} to ${dateFormatter.format(end)}`;
+  }
+
+  let startValue = "";
+  let endValue = "";
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i];
+    if (!part) {
+      continue;
+    }
+
+    if (i < separatorIndex) {
+      startValue += part.value;
+    } else if (i > separatorIndex) {
+      endValue += part.value;
+    }
+  }
+
+  return `${startValue} to ${endValue}`;
+}
+
+function formatLabelRange(
+  dateFormatter: DateFormatter,
+  startDate: CalendarDate,
+  endDate: CalendarDate,
+  timeZone: string,
+  locale: string,
+): string {
+  const formatter = dateFormatter as DateFormatter & {
+    formatRangeToParts?: (start: Date, end: Date) => Intl.DateTimeFormatPart[];
+  };
+  const start = startDate.toDate(timeZone);
+  const end = endDate.toDate(timeZone);
+
+  if (!formatter.formatRangeToParts) {
+    return formatCalendarLabel(locale, "dateRange", {
+      startDate: dateFormatter.format(start),
+      endDate: dateFormatter.format(end),
+    });
+  }
+
+  const parts = formatter.formatRangeToParts(start, end) as Array<
+    Intl.DateTimeFormatPart & { source?: "startRange" | "shared" | "endRange" }
+  >;
+  let separatorIndex = -1;
+
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i];
+    if (part?.source === "shared" && part.type === "literal") {
+      separatorIndex = i;
+    } else if (part?.source === "endRange") {
+      break;
+    }
+  }
+
+  if (separatorIndex < 0) {
+    return formatCalendarLabel(locale, "dateRange", {
+      startDate: dateFormatter.format(start),
+      endDate: dateFormatter.format(end),
+    });
+  }
+
+  let startValue = "";
+  let endValue = "";
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i];
+    if (!part) {
+      continue;
+    }
+
+    if (i < separatorIndex) {
+      startValue += part.value;
+    } else if (i > separatorIndex) {
+      endValue += part.value;
+    }
+  }
+
+  return formatCalendarLabel(locale, "dateRange", {
+    startDate: startValue,
+    endDate: endValue,
+  });
+}

package/src/checkbox/createCheckbox.ts

@@ -8,16 +8,12 @@
  * This is a 1:1 port of @react-aria/checkbox's useCheckbox hook.
  */
 
-import { JSX, Accessor, createEffect } from 'solid-js';
-import { createToggle, type AriaToggleProps } from '../toggle';
-import { type ToggleState } from '@proyecto-viviana/solid-stately';
-import { createPress } from '../interactions/createPress';
-import { mergeProps } from '../utils/mergeProps';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-
-// ============================================
-// TYPES
-// ============================================
+import { JSX, Accessor, createEffect } from "solid-js";
+import { createToggle, type AriaToggleProps } from "../toggle";
+import { type ToggleState } from "@proyecto-viviana/solid-stately";
+import { createPress } from "../interactions/createPress";
+import { mergeProps } from "../utils/mergeProps";
+import { type MaybeAccessor, access } from "../utils/reactivity";
 
 export interface AriaCheckboxProps extends AriaToggleProps {
   /**
@@ -31,9 +27,9 @@ export interface AriaCheckboxProps extends AriaToggleProps {
   isRequired?: boolean;
   /**
    * The validation behavior for the checkbox.
-   * @default 'aria'
+   * @default 'native'
    */
-  validationBehavior?: 'aria' | 'native';
+  validationBehavior?: "aria" | "native";
 }
 
 export interface CheckboxAria {
@@ -41,6 +37,10 @@ export interface CheckboxAria {
   labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
   /** Props for the input element. */
   inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+  /** Props for the checkbox description element, if any. */
+  descriptionProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Props for the checkbox error message element, if any. */
+  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;
   /** Whether the checkbox is selected. */
   isSelected: Accessor<boolean>;
   /** Whether the checkbox is in a pressed state. */
@@ -53,10 +53,6 @@ export interface CheckboxAria {
   isInvalid: boolean;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the behavior and accessibility implementation for a checkbox component.
  * Checkboxes allow users to select multiple items from a list of individual items,
@@ -69,7 +65,7 @@ export interface CheckboxAria {
 export function createCheckbox(
   props: MaybeAccessor<AriaCheckboxProps>,
   state: ToggleState,
-  inputRef: () => HTMLInputElement | null
+  inputRef: () => HTMLInputElement | null,
 ): CheckboxAria {
   const getProps = () => access(props);
 
@@ -114,18 +110,24 @@ export function createCheckbox(
         // Prevent label from being focused when mouse down on it.
         // Note, this does not prevent the input from being focused in the `click` event.
         onMouseDown: (e: MouseEvent) => e.preventDefault(),
-      } as Record<string, unknown>
+      } as Record<string, unknown>,
     ) as JSX.LabelHTMLAttributes<HTMLLabelElement>,
     get inputProps() {
       const p = getProps();
-      const { isRequired, validationBehavior = 'aria' } = p;
+      const { isRequired, validationBehavior = "native" } = p;
 
       return mergeProps(toggleResult.inputProps, {
         checked: isSelected(),
-        'aria-required': (isRequired && validationBehavior === 'aria') || undefined,
-        required: isRequired && validationBehavior === 'native',
+        "aria-required": (isRequired && validationBehavior === "aria") || undefined,
+        required: isRequired && validationBehavior === "native",
       }) as JSX.InputHTMLAttributes<HTMLInputElement>;
     },
+    get descriptionProps() {
+      return toggleResult.descriptionProps;
+    },
+    get errorMessageProps() {
+      return toggleResult.errorMessageProps;
+    },
     isSelected,
     isPressed,
     isDisabled,