@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/gridlist/createGridListSelectionCheckbox.ts

@@ -3,18 +3,21 @@
  * Based on @react-aria/gridlist.
  */
 
-import { createMemo, type Accessor } from 'solid-js';
-import type { JSX } from 'solid-js';
-import { createId } from '@proyecto-viviana/solid-stately';
-import type { GridState, GridCollection } from '@proyecto-viviana/solid-stately';
-import type { AriaGridListSelectionCheckboxProps, GridListSelectionCheckboxAria } from './types';
+import { createMemo, type Accessor } from "solid-js";
+import type { JSX } from "solid-js";
+import { createId } from "@proyecto-viviana/solid-stately";
+import type { GridState, GridCollection } from "@proyecto-viviana/solid-stately";
+import type { AriaGridListSelectionCheckboxProps, GridListSelectionCheckboxAria } from "./types";
 
 /**
  * Creates accessibility props for a grid list item selection checkbox.
  */
-export function createGridListSelectionCheckbox<T extends object, C extends GridCollection<T> = GridCollection<T>>(
+export function createGridListSelectionCheckbox<
+  T extends object,
+  C extends GridCollection<T> = GridCollection<T>,
+>(
   props: Accessor<AriaGridListSelectionCheckboxProps>,
-  state: Accessor<GridState<T, C>>
+  state: Accessor<GridState<T, C>>,
 ): GridListSelectionCheckboxAria {
   const checkboxId = createId();
 
@@ -41,11 +44,11 @@ export function createGridListSelectionCheckbox<T extends object, C extends Grid
   const checkboxProps = createMemo(() => {
     const baseProps: Record<string, unknown> = {
       id: checkboxId,
-      type: 'checkbox',
+      type: "checkbox",
       checked: isSelected(),
       disabled: isDisabled(),
       onChange,
-      'aria-label': 'Select',
+      "aria-label": "Select",
     };
 
     return baseProps as JSX.InputHTMLAttributes<HTMLInputElement>;

package/src/gridlist/index.ts

@@ -2,9 +2,10 @@
  * GridList ARIA hooks for solidaria.
  */
 
-export { createGridList, getGridListData } from './createGridList';
-export { createGridListItem } from './createGridListItem';
-export { createGridListSelectionCheckbox } from './createGridListSelectionCheckbox';
+export { createGridList, getGridListData } from "./createGridList";
+export { createGridListItem } from "./createGridListItem";
+export { createGridListSelectionCheckbox } from "./createGridListSelectionCheckbox";
+export { createGridListSection } from "./createGridListSection";
 
 export type {
   AriaGridListProps,
@@ -13,4 +14,6 @@ export type {
   GridListItemAria,
   AriaGridListSelectionCheckboxProps,
   GridListSelectionCheckboxAria,
-} from './types';
+  AriaGridListSectionProps,
+  GridListSectionAria,
+} from "./types";

package/src/gridlist/types.ts

@@ -3,8 +3,8 @@
  * Based on @react-aria/gridlist types.
  */
 
-import type { JSX } from 'solid-js';
-import type { Key, GridNode } from '@proyecto-viviana/solid-stately';
+import type { JSX } from "solid-js";
+import type { Key, GridNode } from "@proyecto-viviana/solid-stately";
 
 /**
  * Props for the createGridList hook.
@@ -13,19 +13,43 @@ export interface AriaGridListProps {
   /** ID for the grid list element. */
   id?: string;
   /** ARIA label for the grid list. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** ARIA labelledby for the grid list. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** ARIA describedby for the grid list. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
   /** Whether the grid list uses virtual scrolling. */
   isVirtualized?: boolean;
   /** Handler for item actions. */
   onAction?: (key: Key) => void;
   /** Whether selection should occur on press up. */
   shouldSelectOnPressUp?: boolean;
+  /** How selection should behave when pressing an item. */
+  selectionBehavior?: "replace" | "toggle";
+  /**
+   * How keyboard navigation should behave within rows.
+   *
+   * `"arrow"` treats the collection as a single tab stop and uses arrow keys to
+   * move through row children. `"tab"` lets tabbable row children participate in
+   * normal tab order and stops child key events before collection navigation.
+   *
+   * @default "arrow"
+   */
+  keyboardNavigationBehavior?: "arrow" | "tab";
   /** Whether the grid list is disabled. */
   isDisabled?: boolean;
+  /**
+   * The primary orientation of the items. In a horizontal stack the inline
+   * (left/right) axis becomes the primary keyboard-navigation axis.
+   * @default "vertical"
+   */
+  orientation?: "horizontal" | "vertical";
+  /**
+   * The text direction, used to flip the inline navigation axis in a horizontal
+   * orientation.
+   * @default "ltr"
+   */
+  direction?: "ltr" | "rtl";
 }
 
 /**
@@ -33,7 +57,7 @@ export interface AriaGridListProps {
  */
 export interface GridListAria {
   /** Props to spread on the grid list element. */
-  gridProps: JSX.HTMLAttributes<HTMLUListElement>;
+  gridProps: JSX.HTMLAttributes<HTMLElement>;
 }
 
 /**
@@ -44,6 +68,8 @@ export interface AriaGridListItemProps {
   node: GridNode<unknown>;
   /** Whether the grid list is virtualized. */
   isVirtualized?: boolean;
+  /** How selection should behave when pressing an item. */
+  selectionBehavior?: "replace" | "toggle";
   /** Handler for item action. */
   onAction?: () => void;
 }
@@ -53,7 +79,7 @@ export interface AriaGridListItemProps {
  */
 export interface GridListItemAria {
   /** Props to spread on the item element. */
-  rowProps: JSX.HTMLAttributes<HTMLLIElement>;
+  rowProps: JSX.HTMLAttributes<HTMLElement>;
   /** Props to spread on the grid cell wrapper. */
   gridCellProps: JSX.HTMLAttributes<HTMLDivElement>;
   /** Whether the item is selected. */
@@ -79,3 +105,28 @@ export interface GridListSelectionCheckboxAria {
   /** Props to spread on the checkbox input element. */
   checkboxProps: JSX.InputHTMLAttributes<HTMLInputElement>;
 }
+
+/**
+ * Props for the createGridListSection hook.
+ */
+export interface AriaGridListSectionProps {
+  /** ARIA label for the section, when it has no visible header. */
+  "aria-label"?: string;
+}
+
+/**
+ * Return value from createGridListSection.
+ */
+export interface GridListSectionAria {
+  /** Props to spread on the section header's outer (row) element. */
+  rowProps: { role: "row" };
+  /** Props to spread on the section header's inner (rowheader) element. */
+  rowHeaderProps: { id: string | undefined; role: "rowheader" };
+  /** Props to spread on the section's wrapper (rowgroup) element. */
+  rowGroupProps: {
+    role: "rowgroup";
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+  };
+}

package/src/i18n/createCollator.ts

@@ -6,23 +6,16 @@
  * Port of @react-aria/i18n useCollator.
  */
 
-import { createMemo } from 'solid-js';
-import { useLocale } from './locale';
-import { createCacheKey } from './utils';
-
-// ============================================
-// CACHE
-// ============================================
+import { createMemo } from "solid-js";
+import { useLocale } from "./locale";
+import { createCacheKey } from "./utils";
 
 const collatorCache = new Map<string, Intl.Collator>();
 
 /**
  * Gets or creates a cached collator.
  */
-function getCachedCollator(
-  locale: string,
-  options?: Intl.CollatorOptions
-): Intl.Collator {
+function getCachedCollator(locale: string, options?: Intl.CollatorOptions): Intl.Collator {
   const cacheKey = createCacheKey(locale, options as Record<string, unknown>);
 
   if (collatorCache.has(cacheKey)) {
@@ -34,10 +27,6 @@ function getCachedCollator(
   return collator;
 }
 
-// ============================================
-// HOOK
-// ============================================
-
 /**
  * Provides localized string collation for the current locale.
  * Useful for sorting strings according to locale-specific rules.
@@ -70,9 +59,7 @@ function getCachedCollator(
  * // ['a1', 'a10', 'a2'].sort(numericCollator().compare) -> ['a1', 'a2', 'a10']
  * ```
  */
-export function createCollator(
-  options?: Intl.CollatorOptions
-): () => Intl.Collator {
+export function createCollator(options?: Intl.CollatorOptions): () => Intl.Collator {
   const locale = useLocale();
 
   return createMemo(() => getCachedCollator(locale().locale, options));

package/src/i18n/createDateFormatter.ts

@@ -6,13 +6,9 @@
  * Port of @react-aria/i18n useDateFormatter.
  */
 
-import { createMemo } from 'solid-js';
-import { useLocale } from './locale';
-import { createCacheKey } from './utils';
-
-// ============================================
-// CACHE
-// ============================================
+import { createMemo } from "solid-js";
+import { useLocale } from "./locale";
+import { createCacheKey } from "./utils";
 
 const dateFormatterCache = new Map<string, Intl.DateTimeFormat>();
 
@@ -21,7 +17,7 @@ const dateFormatterCache = new Map<string, Intl.DateTimeFormat>();
  */
 function getCachedDateFormatter(
   locale: string,
-  options?: Intl.DateTimeFormatOptions
+  options?: Intl.DateTimeFormatOptions,
 ): Intl.DateTimeFormat {
   const cacheKey = createCacheKey(locale, options as Record<string, unknown>);
 
@@ -34,10 +30,6 @@ function getCachedDateFormatter(
   return formatter;
 }
 
-// ============================================
-// HOOK
-// ============================================
-
 /**
  * Provides localized date and time formatting for the current locale.
  * Automatically updates when the locale changes.
@@ -75,7 +67,7 @@ function getCachedDateFormatter(
  * ```
  */
 export function createDateFormatter(
-  options?: Intl.DateTimeFormatOptions
+  options?: Intl.DateTimeFormatOptions,
 ): () => Intl.DateTimeFormat {
   const locale = useLocale();
 

package/src/i18n/createFilter.ts

@@ -6,12 +6,8 @@
  * Port of @react-aria/i18n useFilter.
  */
 
-import { createMemo } from 'solid-js';
-import { createCollator } from './createCollator';
-
-// ============================================
-// TYPES
-// ============================================
+import { createMemo } from "solid-js";
+import { createCollator } from "./createCollator";
 
 export interface Filter {
   /** Returns whether a string starts with a given substring. */
@@ -22,10 +18,6 @@ export interface Filter {
   contains(string: string, substring: string): boolean;
 }
 
-// ============================================
-// HOOK
-// ============================================
-
 /**
  * Provides localized string search functionality for filtering or matching items.
  * Respects locale-specific collation rules for case and diacritic sensitivity.
@@ -68,7 +60,7 @@ export interface Filter {
  */
 export function createFilter(options?: Intl.CollatorOptions): () => Filter {
   const collator = createCollator({
-    usage: 'search',
+    usage: "search",
     ...options,
   });
 
@@ -81,13 +73,10 @@ export function createFilter(options?: Intl.CollatorOptions): () => Filter {
       }
 
       // Normalize both strings for safe slicing
-      const normalizedStr = str.normalize('NFC');
-      const normalizedSub = substring.normalize('NFC');
+      const normalizedStr = str.normalize("NFC");
+      const normalizedSub = substring.normalize("NFC");
 
-      return (
-        coll.compare(normalizedStr.slice(0, normalizedSub.length), normalizedSub) ===
-        0
-      );
+      return coll.compare(normalizedStr.slice(0, normalizedSub.length), normalizedSub) === 0;
     };
 
     const endsWith = (str: string, substring: string): boolean => {
@@ -95,12 +84,10 @@ export function createFilter(options?: Intl.CollatorOptions): () => Filter {
         return true;
       }
 
-      const normalizedStr = str.normalize('NFC');
-      const normalizedSub = substring.normalize('NFC');
+      const normalizedStr = str.normalize("NFC");
+      const normalizedSub = substring.normalize("NFC");
 
-      return (
-        coll.compare(normalizedStr.slice(-normalizedSub.length), normalizedSub) === 0
-      );
+      return coll.compare(normalizedStr.slice(-normalizedSub.length), normalizedSub) === 0;
     };
 
     const contains = (str: string, substring: string): boolean => {
@@ -108,8 +95,8 @@ export function createFilter(options?: Intl.CollatorOptions): () => Filter {
         return true;
       }
 
-      const normalizedStr = str.normalize('NFC');
-      const normalizedSub = substring.normalize('NFC');
+      const normalizedStr = str.normalize("NFC");
+      const normalizedSub = substring.normalize("NFC");
       const sliceLen = normalizedSub.length;
 
       for (let scan = 0; scan + sliceLen <= normalizedStr.length; scan++) {

package/src/i18n/createNumberFormatter.ts

@@ -6,9 +6,9 @@
  * Port of @react-aria/i18n useNumberFormatter.
  */
 
-import { createMemo } from 'solid-js';
-import { useLocale } from './locale';
-import { NumberFormatter, type NumberFormatOptions } from './NumberFormatter';
+import { createMemo } from "solid-js";
+import { useLocale } from "./locale";
+import { NumberFormatter, type NumberFormatOptions } from "@internationalized/number";
 
 /**
  * Provides localized number formatting for the current locale.
@@ -43,9 +43,7 @@ import { NumberFormatter, type NumberFormatOptions } from './NumberFormatter';
  * tempFormatter().format(25); // '25°C'
  * ```
  */
-export function createNumberFormatter(
-  options: NumberFormatOptions = {}
-): () => NumberFormatter {
+export function createNumberFormatter(options: NumberFormatOptions = {}): () => NumberFormatter {
   const locale = useLocale();
 
   return createMemo(() => new NumberFormatter(locale().locale, options));

package/src/i18n/createStringFormatter.ts

@@ -8,19 +8,24 @@ import {
   LocalizedStringDictionary,
   LocalizedStringFormatter,
   type LocalizedStrings,
-} from '@internationalized/string';
-import { createMemo, type Accessor } from 'solid-js';
-import { useLocale } from './locale';
+} from "@internationalized/string";
+import { createMemo, type Accessor } from "solid-js";
+import { useLocale } from "./locale";
 
 // Cache for dictionaries to avoid recreating them
-const cache = new WeakMap<LocalizedStrings<string, LocalizedString>, LocalizedStringDictionary<string, LocalizedString>>();
+const cache = new WeakMap<
+  LocalizedStrings<string, LocalizedString>,
+  LocalizedStringDictionary<string, LocalizedString>
+>();
 
 function getCachedDictionary<K extends string, T extends LocalizedString>(
-  strings: LocalizedStrings<K, T>
+  strings: LocalizedStrings<K, T>,
 ): LocalizedStringDictionary<K, T> {
   let dictionary = cache.get(strings as LocalizedStrings<string, LocalizedString>);
   if (!dictionary) {
-    dictionary = new LocalizedStringDictionary(strings as LocalizedStrings<string, LocalizedString>);
+    dictionary = new LocalizedStringDictionary(
+      strings as LocalizedStrings<string, LocalizedString>,
+    );
     cache.set(strings as LocalizedStrings<string, LocalizedString>, dictionary);
   }
   return dictionary as LocalizedStringDictionary<K, T>;
@@ -29,10 +34,10 @@ function getCachedDictionary<K extends string, T extends LocalizedString>(
 /**
  * Returns a cached LocalizedStringDictionary for the given strings.
  */
-export function createStringDictionary<K extends string = string, T extends LocalizedString = string>(
-  strings: LocalizedStrings<K, T>,
-  packageName?: string
-): LocalizedStringDictionary<K, T> {
+export function createStringDictionary<
+  K extends string = string,
+  T extends LocalizedString = string,
+>(strings: LocalizedStrings<K, T>, packageName?: string): LocalizedStringDictionary<K, T> {
   return (
     (packageName && LocalizedStringDictionary.getGlobalDictionaryForPackage(packageName)) ||
     getCachedDictionary(strings)
@@ -68,17 +73,16 @@ export function createStringDictionary<K extends string = string, T extends Loca
  * }
  * ```
  */
-export function createStringFormatter<K extends string = string, T extends LocalizedString = string>(
-  strings: LocalizedStrings<K, T>,
-  packageName?: string
-): Accessor<LocalizedStringFormatter<K, T>> {
+export function createStringFormatter<
+  K extends string = string,
+  T extends LocalizedString = string,
+>(strings: LocalizedStrings<K, T>, packageName?: string): Accessor<LocalizedStringFormatter<K, T>> {
   const localeAccessor = useLocale();
   const dictionary = createStringDictionary(strings, packageName);
 
   return createMemo(() => new LocalizedStringFormatter(localeAccessor().locale, dictionary));
 }
 
-// Re-export types for convenience
 export type {
   LocalizedString,
   LocalizedStringDictionary,

package/src/i18n/index.ts

@@ -7,27 +7,24 @@ export {
   type Direction,
   type Locale,
   type I18nProviderProps,
-} from './locale';
+} from "./locale";
 
 // RTL utilities
-export { isRTL, createCacheKey } from './utils';
+export { isRTL, createCacheKey } from "./utils";
 
 // Number formatting
-export {
-  NumberFormatter,
-  type NumberFormatOptions,
-} from './NumberFormatter';
+export { NumberFormatter, type NumberFormatOptions } from "@internationalized/number";
 
-export { createNumberFormatter } from './createNumberFormatter';
+export { createNumberFormatter } from "./createNumberFormatter";
 
 // Date formatting
-export { createDateFormatter } from './createDateFormatter';
+export { createDateFormatter } from "./createDateFormatter";
 
 // String collation
-export { createCollator } from './createCollator';
+export { createCollator } from "./createCollator";
 
 // String filtering
-export { createFilter, type Filter } from './createFilter';
+export { createFilter, type Filter } from "./createFilter";
 
 // String formatting (ICU MessageFormat)
 export {
@@ -37,4 +34,4 @@ export {
   type LocalizedStringDictionary,
   type LocalizedStringFormatter,
   type LocalizedStrings,
-} from './createStringFormatter';
+} from "./createStringFormatter";

package/src/i18n/locale.tsx

@@ -16,15 +16,11 @@ import {
   createSignal,
   onCleanup,
   useContext,
-} from 'solid-js';
-import { isRTL } from './utils';
-
-// ============================================
-// TYPES
-// ============================================
+} from "solid-js";
+import { isRTL } from "./utils";
 
 /** Text direction: left-to-right or right-to-left. */
-export type Direction = 'ltr' | 'rtl';
+export type Direction = "ltr" | "rtl";
 
 /** Locale information including language code and text direction. */
 export interface Locale {
@@ -39,12 +35,8 @@ export interface I18nProviderProps extends ParentProps {
   locale?: string;
 }
 
-// ============================================
-// GLOBAL STATE
-// ============================================
-
 // Symbol for server-provided locale
-const localeSymbol = Symbol.for('solidaria.i18n.locale');
+const localeSymbol = Symbol.for("solidaria.i18n.locale");
 
 let currentLocale: Locale | null = null;
 const listeners = new Set<(locale: Locale) => void>();
@@ -54,23 +46,22 @@ const listeners = new Set<(locale: Locale) => void>();
  */
 export function getDefaultLocale(): Locale {
   let locale =
-    (typeof window !== 'undefined' &&
+    (typeof window !== "undefined" &&
       (window as unknown as Record<symbol, string>)[localeSymbol]) ||
-    (typeof navigator !== 'undefined' &&
-      (navigator.language ||
-        (navigator as unknown as { userLanguage?: string }).userLanguage)) ||
-    'en-US';
+    (typeof navigator !== "undefined" &&
+      (navigator.language || (navigator as unknown as { userLanguage?: string }).userLanguage)) ||
+    "en-US";
 
   // Validate the locale is supported
   try {
     Intl.DateTimeFormat.supportedLocalesOf([locale]);
   } catch {
-    locale = 'en-US';
+    locale = "en-US";
   }
 
   return {
     locale,
-    direction: isRTL(locale) ? 'rtl' : 'ltr',
+    direction: isRTL(locale) ? "rtl" : "ltr",
   };
 }
 
@@ -81,16 +72,8 @@ function updateLocale(): void {
   }
 }
 
-// ============================================
-// CONTEXT
-// ============================================
-
 const I18nContext = createContext<Accessor<Locale> | null>(null);
 
-// ============================================
-// HOOKS
-// ============================================
-
 /**
  * Returns the current browser/system locale, and updates when it changes.
  *
@@ -109,12 +92,12 @@ export function createDefaultLocale(): Accessor<Locale> {
   const [locale, setLocale] = createSignal<Locale>(currentLocale);
 
   createEffect(() => {
-    if (typeof window === 'undefined') {
+    if (typeof window === "undefined") {
       return;
     }
 
     if (listeners.size === 0) {
-      window.addEventListener('languagechange', updateLocale);
+      window.addEventListener("languagechange", updateLocale);
     }
 
     listeners.add(setLocale);
@@ -122,7 +105,7 @@ export function createDefaultLocale(): Accessor<Locale> {
     onCleanup(() => {
       listeners.delete(setLocale);
       if (listeners.size === 0) {
-        window.removeEventListener('languagechange', updateLocale);
+        window.removeEventListener("languagechange", updateLocale);
       }
     });
   });
@@ -147,10 +130,6 @@ export function useLocale(): Accessor<Locale> {
   return context || defaultLocale;
 }
 
-// ============================================
-// PROVIDER
-// ============================================
-
 /**
  * Provides the locale for the application to all child components.
  *
@@ -174,15 +153,11 @@ export function I18nProvider(props: I18nProviderProps): JSX.Element {
     if (props.locale) {
       return {
         locale: props.locale,
-        direction: isRTL(props.locale) ? 'rtl' : 'ltr',
+        direction: isRTL(props.locale) ? "rtl" : "ltr",
       };
     }
     return defaultLocale();
   });
 
-  return (
-    <I18nContext.Provider value={locale}>
-      {props.children}
-    </I18nContext.Provider>
-  );
+  return <I18nContext.Provider value={locale}>{props.children}</I18nContext.Provider>;
 }