@proyecto-viviana/solidaria 0.2.5 → 0.3.0

package/src/calendar/utils.ts

@@ -0,0 +1,227 @@
+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;
+}
+
+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 {
@@ -53,10 +49,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 +61,7 @@ export interface CheckboxAria {
 export function createCheckbox(
   props: MaybeAccessor<AriaCheckboxProps>,
   state: ToggleState,
-  inputRef: () => HTMLInputElement | null
+  inputRef: () => HTMLInputElement | null,
 ): CheckboxAria {
   const getProps = () => access(props);
 
@@ -114,16 +106,16 @@ 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>;
     },
     isSelected,

package/src/checkbox/createCheckboxGroup.ts

@@ -7,27 +7,27 @@
  * This is a 1:1 port of @react-aria/checkbox's useCheckboxGroup hook.
  */
 
-import { JSX } from 'solid-js';
-import { createField } from '../label';
-import { createFocusWithin } from '../interactions/createFocusWithin';
-import { filterDOMProps } from '../utils/filterDOMProps';
-import { mergeProps } from '../utils/mergeProps';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-import { type CheckboxGroupState, type CheckboxGroupProps } from '@proyecto-viviana/solid-stately';
-
-// ============================================
-// TYPES
-// ============================================
+import { JSX, createEffect } from "solid-js";
+import { createField } from "../label";
+import { createFocusWithin } from "../interactions/createFocusWithin";
+import { filterDOMProps } from "../utils/filterDOMProps";
+import { mergeProps } from "../utils/mergeProps";
+import { type MaybeAccessor, access } from "../utils/reactivity";
+import {
+  type CheckboxGroupState,
+  type CheckboxGroupProps,
+  type ValidityState,
+} from "@proyecto-viviana/solid-stately";
 
 export interface AriaCheckboxGroupProps extends CheckboxGroupProps {
   /** Defines a string value that labels the current element. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** Identifies the element (or elements) that labels the current element. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** Identifies the element (or elements) that describes the object. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
   /** Identifies the element (or elements) that provide a detailed, extended description for the object. */
-  'aria-details'?: string;
+  "aria-details"?: string;
   /** A description for the field. Provides a hint such as specific requirements for what to choose. */
   description?: JSX.Element;
   /** An error message for the field. */
@@ -45,6 +45,10 @@ export interface CheckboxGroupAria {
   errorMessageProps: JSX.HTMLAttributes<HTMLElement>;
   /** Whether the checkbox group is invalid. */
   isInvalid: boolean;
+  /** Validation errors, if any. */
+  validationErrors: string[];
+  /** Validation details, if any. */
+  validationDetails: ValidityState;
 }
 
 // WeakMap to share data between checkbox group and checkbox group items
@@ -55,14 +59,10 @@ export const checkboxGroupData = new WeakMap<
     form?: string;
     descriptionId?: string;
     errorMessageId?: string;
-    validationBehavior: 'aria' | 'native';
+    validationBehavior: "aria" | "native";
   }
 >();
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the behavior and accessibility implementation for a checkbox group component.
  * Checkbox groups allow users to select multiple items from a list of options.
@@ -72,51 +72,86 @@ export const checkboxGroupData = new WeakMap<
  */
 export function createCheckboxGroup(
   props: MaybeAccessor<AriaCheckboxGroupProps>,
-  state: CheckboxGroupState
+  state: CheckboxGroupState,
 ): CheckboxGroupAria {
   const getProps = () => access(props);
+  const displayValidation = () => state.displayValidation();
+  const validationErrors = () => displayValidation().validationErrors;
+  const validationDetails = () => displayValidation().validationDetails;
 
-  const isInvalid = () => state.isInvalid;
+  const isInvalid = () => displayValidation().isInvalid;
+  const fallbackErrorMessage = () => {
+    const errors = validationErrors();
+    return errors.length > 0 ? errors : undefined;
+  };
 
   // Use field for label association
   const { labelProps, fieldProps, descriptionProps, errorMessageProps } = createField({
-    get label() { return getProps().label; },
-    get 'aria-label'() { return getProps()['aria-label']; },
-    get 'aria-labelledby'() { return getProps()['aria-labelledby']; },
-    get 'aria-describedby'() { return getProps()['aria-describedby']; },
-    get 'aria-details'() { return getProps()['aria-details']; },
-    get description() { return getProps().description; },
-    get errorMessage() { return getProps().errorMessage ?? (isInvalid() ? 'Invalid selection' : undefined); },
-    get isInvalid() { return isInvalid(); },
+    get label() {
+      return getProps().label;
+    },
+    get "aria-label"() {
+      return getProps()["aria-label"];
+    },
+    get "aria-labelledby"() {
+      return getProps()["aria-labelledby"];
+    },
+    get "aria-describedby"() {
+      return getProps()["aria-describedby"];
+    },
+    get "aria-details"() {
+      return getProps()["aria-details"];
+    },
+    get description() {
+      return getProps().description;
+    },
+    get errorMessage() {
+      return getProps().errorMessage ?? fallbackErrorMessage();
+    },
+    get isInvalid() {
+      return isInvalid();
+    },
     // Checkbox group is not an HTML input element so it
     // shouldn't be labeled by a <label> element.
-    labelElementType: 'span',
+    labelElementType: "span",
   });
 
-  // Store data for checkbox group items
-  checkboxGroupData.set(state, {
-    name: getProps().name,
-    form: getProps().form,
-    descriptionId: descriptionProps.id,
-    errorMessageId: errorMessageProps.id,
-    validationBehavior: 'aria',
-  });
+  const updateCheckboxGroupData = () => {
+    checkboxGroupData.set(state, {
+      name: getProps().name,
+      form: getProps().form,
+      descriptionId: descriptionProps.id,
+      errorMessageId: errorMessageProps.id,
+      validationBehavior: getProps().validationBehavior ?? "native",
+    });
+  };
+
+  // Store group metadata synchronously for first-render children, then keep it reactive.
+  updateCheckboxGroupData();
+  createEffect(updateCheckboxGroupData);
 
   // Filter DOM props
-  const domProps = () => filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });
+  const domProps = () =>
+    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });
 
   // Handle focus within
   const { focusWithinProps } = createFocusWithin({
-    get onBlurWithin() { return getProps().onBlur; },
-    get onFocusWithin() { return getProps().onFocus; },
-    get onFocusWithinChange() { return getProps().onFocusChange; },
+    get onBlurWithin() {
+      return getProps().onBlur;
+    },
+    get onFocusWithin() {
+      return getProps().onFocus;
+    },
+    get onFocusWithinChange() {
+      return getProps().onFocusChange;
+    },
   });
 
   return {
     get groupProps() {
       return mergeProps(domProps(), {
-        role: 'group',
-        'aria-disabled': state.isDisabled || undefined,
+        role: "group",
+        "aria-disabled": state.isDisabled || undefined,
         ...fieldProps,
         ...focusWithinProps,
       }) as JSX.HTMLAttributes<HTMLElement>;
@@ -133,5 +168,11 @@ export function createCheckboxGroup(
     get isInvalid() {
       return isInvalid();
     },
+    get validationErrors() {
+      return validationErrors();
+    },
+    get validationDetails() {
+      return validationDetails();
+    },
   };
 }

package/src/checkbox/createCheckboxGroupItem.ts

@@ -7,25 +7,20 @@
  * This is a 1:1 port of @react-aria/checkbox's useCheckboxGroupItem hook.
  */
 
-import { JSX } from 'solid-js';
-import { createCheckbox, type AriaCheckboxProps, type CheckboxAria } from './createCheckbox';
-import { type ToggleState, type CheckboxGroupState } from '@proyecto-viviana/solid-stately';
-import { checkboxGroupData } from './createCheckboxGroup';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface AriaCheckboxGroupItemProps extends Omit<AriaCheckboxProps, 'isSelected' | 'defaultSelected'> {
+import { JSX } from "solid-js";
+import { createCheckbox, type AriaCheckboxProps, type CheckboxAria } from "./createCheckbox";
+import { type ToggleState, type CheckboxGroupState } from "@proyecto-viviana/solid-stately";
+import { checkboxGroupData } from "./createCheckboxGroup";
+import { type MaybeAccessor, access } from "../utils/reactivity";
+
+export interface AriaCheckboxGroupItemProps extends Omit<
+  AriaCheckboxProps,
+  "isSelected" | "defaultSelected"
+> {
   /** The value of the checkbox. */
   value: string;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the behavior and accessibility implementation for a checkbox component
  * contained within a checkbox group.
@@ -37,7 +32,7 @@ export interface AriaCheckboxGroupItemProps extends Omit<AriaCheckboxProps, 'isS
 export function createCheckboxGroupItem(
   props: MaybeAccessor<AriaCheckboxGroupItemProps>,
   state: CheckboxGroupState,
-  inputRef: () => HTMLInputElement | null
+  inputRef: () => HTMLInputElement | null,
 ): CheckboxAria {
   const getProps = () => access(props);
 
@@ -59,10 +54,8 @@ export function createCheckboxGroupItem(
     },
   };
 
-  // Get group data
   const getGroupData = () => checkboxGroupData.get(state);
 
-  // Build checkbox props
   const checkboxProps = (): AriaCheckboxProps => {
     const p = getProps();
     const groupData = getGroupData();
@@ -71,17 +64,16 @@ export function createCheckboxGroupItem(
       ...p,
       isReadOnly: p.isReadOnly ?? state.isReadOnly,
       isDisabled: p.isDisabled ?? state.isDisabled,
+      isInvalid: p.isInvalid ?? state.isInvalid,
       name: p.name ?? groupData?.name,
       form: p.form ?? groupData?.form,
       isRequired: p.isRequired ?? state.isRequired(),
-      validationBehavior: p.validationBehavior ?? groupData?.validationBehavior ?? 'aria',
+      validationBehavior: p.validationBehavior ?? groupData?.validationBehavior ?? "native",
     };
   };
 
-  // Use the checkbox hook
   const result = createCheckbox(checkboxProps, toggleState, inputRef);
 
-  // Add group-level aria-describedby
   return {
     ...result,
     get inputProps() {
@@ -90,27 +82,24 @@ export function createCheckboxGroupItem(
 
       const describedByIds: string[] = [];
 
-      // Add props aria-describedby
-      const propsDescribedBy = getProps()['aria-describedby'];
+      const propsDescribedBy = getProps()["aria-describedby"];
       if (propsDescribedBy) {
         describedByIds.push(propsDescribedBy);
       }
 
-      // Add error message ID if group is invalid
       if (state.isInvalid && groupData?.errorMessageId) {
         describedByIds.push(groupData.errorMessageId);
       }
 
-      // Add description ID
       if (groupData?.descriptionId) {
         describedByIds.push(groupData.descriptionId);
       }
 
-      const ariaDescribedBy = describedByIds.length > 0 ? describedByIds.join(' ') : undefined;
+      const ariaDescribedBy = describedByIds.length > 0 ? describedByIds.join(" ") : undefined;
 
       return {
         ...baseInputProps,
-        'aria-describedby': ariaDescribedBy,
+        "aria-describedby": ariaDescribedBy,
       } as JSX.InputHTMLAttributes<HTMLInputElement>;
     },
   };