@proyecto-viviana/solidaria 0.1.3 → 0.2.0

package/src/gridlist/createGridListItem.ts

@@ -1,180 +0,0 @@
-/**
- * createGridListItem - Provides accessibility for a grid list item.
- * Based on @react-aria/gridlist/useGridListItem.
- */
-
-import { createMemo, createSignal, type Accessor } from 'solid-js';
-import type { JSX } from 'solid-js';
-import type { GridState, GridCollection } from '@proyecto-viviana/solid-stately';
-import type { AriaGridListItemProps, GridListItemAria } from './types';
-import { getGridListData } from './createGridList';
-
-/**
- * Creates accessibility props for a grid list item.
- */
-export function createGridListItem<T extends object, C extends GridCollection<T> = GridCollection<T>>(
-  props: Accessor<AriaGridListItemProps>,
-  state: Accessor<GridState<T, C>>,
-  _ref: Accessor<HTMLLIElement | null>
-): GridListItemAria {
-  const [isPressed, setIsPressed] = createSignal(false);
-
-  const isSelected = createMemo(() => {
-    const s = state();
-    const p = props();
-    return s.isSelected(p.node.key);
-  });
-
-  const isDisabled = createMemo(() => {
-    const s = state();
-    const p = props();
-    return s.isDisabled(p.node.key);
-  });
-
-  const isFocused = createMemo(() => {
-    const s = state();
-    const p = props();
-    return s.focusedKey === p.node.key;
-  });
-
-  // Handle click/press for selection and actions
-  const onClick = (e: MouseEvent) => {
-    const s = state();
-    const p = props();
-
-    if (isDisabled()) return;
-
-    // Get grid list metadata for actions
-    const gridListData = getGridListData(s);
-    const onAction = gridListData?.actions.onAction;
-
-    // Handle selection
-    if (s.selectionMode !== 'none') {
-      if (e.shiftKey && s.selectionMode === 'multiple') {
-        s.extendSelection(p.node.key);
-      } else if (e.ctrlKey || e.metaKey) {
-        s.toggleSelection(p.node.key);
-      } else {
-        // Replace selection or toggle if already selected
-        if (isSelected() && s.selectedKeys !== 'all') {
-          const selectedKeys = s.selectedKeys as Set<unknown>;
-          if (selectedKeys.size === 1) {
-            // Single selection, trigger action
-            if (onAction) {
-              onAction(p.node.key);
-            }
-            if (p.onAction) {
-              p.onAction();
-            }
-          } else {
-            s.replaceSelection(p.node.key);
-          }
-        } else {
-          s.replaceSelection(p.node.key);
-        }
-      }
-    } else {
-      // No selection mode, just trigger action
-      if (onAction) {
-        onAction(p.node.key);
-      }
-      if (p.onAction) {
-        p.onAction();
-      }
-    }
-  };
-
-  const onKeyDown = (e: KeyboardEvent) => {
-    const s = state();
-    const p = props();
-
-    if (isDisabled()) return;
-
-    if (e.key === 'Enter') {
-      // Get grid list metadata for actions
-      const gridListData = getGridListData(s);
-      const onAction = gridListData?.actions.onAction;
-
-      if (onAction || p.onAction) {
-        e.preventDefault();
-
-        if (onAction) {
-          onAction(p.node.key);
-        }
-
-        if (p.onAction) {
-          p.onAction();
-        }
-      }
-    } else if (e.key === ' ') {
-      // Space toggles selection
-      if (s.selectionMode !== 'none') {
-        e.preventDefault();
-        s.toggleSelection(p.node.key);
-      }
-    }
-  };
-
-  const onFocus = () => {
-    const s = state();
-    const p = props();
-    s.setFocusedKey(p.node.key);
-  };
-
-  const onPointerDown = () => {
-    setIsPressed(true);
-  };
-
-  const onPointerUp = () => {
-    setIsPressed(false);
-  };
-
-  const rowProps = createMemo(() => {
-    const s = state();
-    const p = props();
-    const node = p.node;
-
-    const baseProps: Record<string, unknown> = {
-      role: 'row',
-      'aria-selected': s.selectionMode !== 'none' ? isSelected() : undefined,
-      'aria-disabled': isDisabled() || undefined,
-      tabIndex: isFocused() ? 0 : -1,
-      onClick,
-      onKeyDown,
-      onFocus,
-      onPointerDown,
-      onPointerUp,
-    };
-
-    // Add aria-rowindex for virtualized lists
-    if (p.isVirtualized && node.rowIndex != null) {
-      baseProps['aria-rowindex'] = node.rowIndex + 1; // 1-based
-    }
-
-    return baseProps as JSX.HTMLAttributes<HTMLLIElement>;
-  });
-
-  const gridCellProps = createMemo(() => {
-    return {
-      role: 'gridcell',
-    } as JSX.HTMLAttributes<HTMLDivElement>;
-  });
-
-  return {
-    get rowProps() {
-      return rowProps();
-    },
-    get gridCellProps() {
-      return gridCellProps();
-    },
-    get isSelected() {
-      return isSelected();
-    },
-    get isDisabled() {
-      return isDisabled();
-    },
-    get isPressed() {
-      return isPressed();
-    },
-  };
-}

package/src/gridlist/createGridListSelectionCheckbox.ts

@@ -1,59 +0,0 @@
-/**
- * createGridListSelectionCheckbox - Provides accessibility for a grid list item selection checkbox.
- * 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';
-
-/**
- * Creates accessibility props for a grid list item selection checkbox.
- */
-export function createGridListSelectionCheckbox<T extends object, C extends GridCollection<T> = GridCollection<T>>(
-  props: Accessor<AriaGridListSelectionCheckboxProps>,
-  state: Accessor<GridState<T, C>>
-): GridListSelectionCheckboxAria {
-  const checkboxId = createId();
-
-  const isSelected = createMemo(() => {
-    const s = state();
-    const p = props();
-    return s.isSelected(p.key);
-  });
-
-  const isDisabled = createMemo(() => {
-    const s = state();
-    const p = props();
-    return s.isDisabled(p.key);
-  });
-
-  const onChange = () => {
-    const s = state();
-    const p = props();
-    if (!isDisabled()) {
-      s.toggleSelection(p.key);
-    }
-  };
-
-  const checkboxProps = createMemo(() => {
-    const baseProps: Record<string, unknown> = {
-      id: checkboxId,
-      type: 'checkbox',
-      checked: isSelected(),
-      disabled: isDisabled(),
-      onChange,
-      'aria-label': 'Select',
-    };
-
-    return baseProps as JSX.InputHTMLAttributes<HTMLInputElement>;
-  });
-
-  return {
-    get checkboxProps() {
-      return checkboxProps();
-    },
-  };
-}

package/src/gridlist/index.ts

@@ -1,16 +0,0 @@
-/**
- * GridList ARIA hooks for solidaria.
- */
-
-export { createGridList, getGridListData } from './createGridList';
-export { createGridListItem } from './createGridListItem';
-export { createGridListSelectionCheckbox } from './createGridListSelectionCheckbox';
-
-export type {
-  AriaGridListProps,
-  GridListAria,
-  AriaGridListItemProps,
-  GridListItemAria,
-  AriaGridListSelectionCheckboxProps,
-  GridListSelectionCheckboxAria,
-} from './types';

package/src/gridlist/types.ts

@@ -1,81 +0,0 @@
-/**
- * GridList ARIA types for GridList components.
- * Based on @react-aria/gridlist types.
- */
-
-import type { JSX } from 'solid-js';
-import type { Key, GridNode } from '@proyecto-viviana/solid-stately';
-
-/**
- * Props for the createGridList hook.
- */
-export interface AriaGridListProps {
-  /** ID for the grid list element. */
-  id?: string;
-  /** ARIA label for the grid list. */
-  'aria-label'?: string;
-  /** ARIA labelledby for the grid list. */
-  'aria-labelledby'?: string;
-  /** ARIA describedby for the grid list. */
-  '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;
-  /** Whether the grid list is disabled. */
-  isDisabled?: boolean;
-}
-
-/**
- * Return value from createGridList.
- */
-export interface GridListAria {
-  /** Props to spread on the grid list element. */
-  gridProps: JSX.HTMLAttributes<HTMLUListElement>;
-}
-
-/**
- * Props for the createGridListItem hook.
- */
-export interface AriaGridListItemProps {
-  /** The item node. */
-  node: GridNode<unknown>;
-  /** Whether the grid list is virtualized. */
-  isVirtualized?: boolean;
-  /** Handler for item action. */
-  onAction?: () => void;
-}
-
-/**
- * Return value from createGridListItem.
- */
-export interface GridListItemAria {
-  /** Props to spread on the item element. */
-  rowProps: JSX.HTMLAttributes<HTMLLIElement>;
-  /** Props to spread on the grid cell wrapper. */
-  gridCellProps: JSX.HTMLAttributes<HTMLDivElement>;
-  /** Whether the item is selected. */
-  isSelected: boolean;
-  /** Whether the item is disabled. */
-  isDisabled: boolean;
-  /** Whether the item is pressed. */
-  isPressed: boolean;
-}
-
-/**
- * Props for the createGridListSelectionCheckbox hook.
- */
-export interface AriaGridListSelectionCheckboxProps {
-  /** The key of the item. */
-  key: Key;
-}
-
-/**
- * Return value from createGridListSelectionCheckbox.
- */
-export interface GridListSelectionCheckboxAria {
-  /** Props to spread on the checkbox input element. */
-  checkboxProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-}

package/src/i18n/NumberFormatter.ts

@@ -1,266 +0,0 @@
-/**
- * NumberFormatter for solidaria
- *
- * A wrapper around Intl.NumberFormat with caching and polyfills.
- *
- * Port of @internationalized/number NumberFormatter.
- */
-
-// ============================================
-// FEATURE DETECTION
-// ============================================
-
-let supportsSignDisplay = false;
-try {
-  supportsSignDisplay =
-    new Intl.NumberFormat('de-DE', { signDisplay: 'exceptZero' }).resolvedOptions()
-      .signDisplay === 'exceptZero';
-} catch {
-  // Not supported
-}
-
-let supportsUnit = false;
-try {
-  supportsUnit =
-    new Intl.NumberFormat('de-DE', { style: 'unit', unit: 'degree' }).resolvedOptions()
-      .style === 'unit';
-} catch {
-  // Not supported
-}
-
-// ============================================
-// POLYFILLS
-// ============================================
-
-// Polyfill for units since Safari doesn't support them yet.
-// Currently only polyfilling the unit degree in narrow format.
-const UNITS: Record<string, Record<string, Record<string, string>>> = {
-  degree: {
-    narrow: {
-      default: '°',
-      'ja-JP': ' 度',
-      'zh-TW': '度',
-      'sl-SI': ' °',
-    },
-  },
-};
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface NumberFormatOptions extends Intl.NumberFormatOptions {
-  /** Overrides default numbering system for the current locale. */
-  numberingSystem?: string;
-}
-
-interface NumberRangeFormatPart extends Intl.NumberFormatPart {
-  source: 'startRange' | 'endRange' | 'shared';
-}
-
-// ============================================
-// CACHE
-// ============================================
-
-const formatterCache = new Map<string, Intl.NumberFormat>();
-
-function getCachedNumberFormatter(
-  locale: string,
-  options: NumberFormatOptions = {}
-): Intl.NumberFormat {
-  let processedLocale = locale;
-  const { numberingSystem } = options;
-
-  if (numberingSystem && !processedLocale.includes('-nu-')) {
-    if (!processedLocale.includes('-u-')) {
-      processedLocale += '-u-';
-    }
-    processedLocale += `-nu-${numberingSystem}`;
-  }
-
-  let processedOptions = options;
-  if (options.style === 'unit' && !supportsUnit) {
-    const { unit, unitDisplay = 'short' } = options;
-    if (!unit) {
-      throw new Error('unit option must be provided with style: "unit"');
-    }
-    if (!UNITS[unit]?.[unitDisplay]) {
-      throw new Error(`Unsupported unit ${unit} with unitDisplay = ${unitDisplay}`);
-    }
-    processedOptions = { ...options, style: 'decimal' };
-  }
-
-  const cacheKey =
-    processedLocale +
-    (processedOptions
-      ? Object.entries(processedOptions)
-          .sort((a, b) => (a[0] < b[0] ? -1 : 1))
-          .join()
-      : '');
-
-  if (formatterCache.has(cacheKey)) {
-    return formatterCache.get(cacheKey)!;
-  }
-
-  const numberFormatter = new Intl.NumberFormat(processedLocale, processedOptions);
-  formatterCache.set(cacheKey, numberFormatter);
-  return numberFormatter;
-}
-
-// ============================================
-// SIGN DISPLAY POLYFILL
-// ============================================
-
-function numberFormatSignDisplayPolyfill(
-  numberFormat: Intl.NumberFormat,
-  signDisplay: string,
-  num: number
-): string {
-  if (signDisplay === 'auto') {
-    return numberFormat.format(num);
-  } else if (signDisplay === 'never') {
-    return numberFormat.format(Math.abs(num));
-  } else {
-    let needsPositiveSign = false;
-    let processedNum = num;
-
-    if (signDisplay === 'always') {
-      needsPositiveSign = num > 0 || Object.is(num, 0);
-    } else if (signDisplay === 'exceptZero') {
-      if (Object.is(num, -0) || Object.is(num, 0)) {
-        processedNum = Math.abs(num);
-      } else {
-        needsPositiveSign = num > 0;
-      }
-    }
-
-    if (needsPositiveSign) {
-      const negative = numberFormat.format(-processedNum);
-      const noSign = numberFormat.format(processedNum);
-      // Ignore RTL/LTR marker characters
-      const minus = negative.replace(noSign, '').replace(/\u200e|\u061C/, '');
-      if ([...minus].length !== 1) {
-        console.warn(
-          'solidaria i18n polyfill for NumberFormat signDisplay: Unsupported case'
-        );
-      }
-      const positive = negative
-        .replace(noSign, '!!!')
-        .replace(minus, '+')
-        .replace('!!!', noSign);
-      return positive;
-    } else {
-      return numberFormat.format(processedNum);
-    }
-  }
-}
-
-// ============================================
-// NUMBER FORMATTER CLASS
-// ============================================
-
-/**
- * A wrapper around Intl.NumberFormat providing additional options, polyfills, and caching.
- *
- * @example
- * ```ts
- * const formatter = new NumberFormatter('en-US', {
- *   style: 'currency',
- *   currency: 'USD',
- * });
- * formatter.format(1234.56); // '$1,234.56'
- * ```
- */
-export class NumberFormatter implements Intl.NumberFormat {
-  private numberFormatter: Intl.NumberFormat;
-  private options: NumberFormatOptions;
-
-  constructor(locale: string, options: NumberFormatOptions = {}) {
-    this.numberFormatter = getCachedNumberFormatter(locale, options);
-    this.options = options;
-  }
-
-  /** Formats a number value as a string, according to the locale and options. */
-  format(value: number): string {
-    let res = '';
-
-    if (!supportsSignDisplay && this.options.signDisplay != null) {
-      res = numberFormatSignDisplayPolyfill(
-        this.numberFormatter,
-        this.options.signDisplay,
-        value
-      );
-    } else {
-      res = this.numberFormatter.format(value);
-    }
-
-    if (this.options.style === 'unit' && !supportsUnit) {
-      const { unit, unitDisplay = 'short', locale } = this.resolvedOptions();
-      if (!unit) {
-        return res;
-      }
-      const values = UNITS[unit]?.[unitDisplay];
-      res += values[locale] || values.default;
-    }
-
-    return res;
-  }
-
-  /** Formats a number to an array of parts. */
-  formatToParts(value: number): Intl.NumberFormatPart[] {
-    return this.numberFormatter.formatToParts(value);
-  }
-
-  /** Formats a number range as a string. */
-  formatRange(start: number, end: number): string {
-    if (typeof this.numberFormatter.formatRange === 'function') {
-      return this.numberFormatter.formatRange(start, end);
-    }
-
-    if (end < start) {
-      throw new RangeError('End date must be >= start date');
-    }
-
-    // Fallback for old browsers
-    return `${this.format(start)} – ${this.format(end)}`;
-  }
-
-  /** Formats a number range as an array of parts. */
-  formatRangeToParts(start: number, end: number): NumberRangeFormatPart[] {
-    if (typeof this.numberFormatter.formatRangeToParts === 'function') {
-      return this.numberFormatter.formatRangeToParts(start, end);
-    }
-
-    if (end < start) {
-      throw new RangeError('End date must be >= start date');
-    }
-
-    const startParts = this.numberFormatter.formatToParts(start);
-    const endParts = this.numberFormatter.formatToParts(end);
-    return [
-      ...startParts.map((p) => ({ ...p, source: 'startRange' as const })),
-      { type: 'literal' as const, value: ' – ', source: 'shared' as const },
-      ...endParts.map((p) => ({ ...p, source: 'endRange' as const })),
-    ];
-  }
-
-  /** Returns the resolved formatting options. */
-  resolvedOptions(): Intl.ResolvedNumberFormatOptions {
-    let options = this.numberFormatter.resolvedOptions();
-
-    if (!supportsSignDisplay && this.options.signDisplay != null) {
-      options = { ...options, signDisplay: this.options.signDisplay };
-    }
-
-    if (!supportsUnit && this.options.style === 'unit') {
-      options = {
-        ...options,
-        style: 'unit',
-        unit: this.options.unit,
-        unitDisplay: this.options.unitDisplay,
-      };
-    }
-
-    return options;
-  }
-}

package/src/i18n/createCollator.ts

@@ -1,79 +0,0 @@
-/**
- * createCollator hook for solidaria
- *
- * Provides localized string comparison/collation with caching.
- *
- * Port of @react-aria/i18n useCollator.
- */
-
-import { createMemo } from 'solid-js';
-import { useLocale } from './locale';
-import { createCacheKey } from './utils';
-
-// ============================================
-// CACHE
-// ============================================
-
-const collatorCache = new Map<string, Intl.Collator>();
-
-/**
- * Gets or creates a cached collator.
- */
-function getCachedCollator(
-  locale: string,
-  options?: Intl.CollatorOptions
-): Intl.Collator {
-  const cacheKey = createCacheKey(locale, options as Record<string, unknown>);
-
-  if (collatorCache.has(cacheKey)) {
-    return collatorCache.get(cacheKey)!;
-  }
-
-  const collator = new Intl.Collator(locale, options);
-  collatorCache.set(cacheKey, collator);
-  return collator;
-}
-
-// ============================================
-// HOOK
-// ============================================
-
-/**
- * Provides localized string collation for the current locale.
- * Useful for sorting strings according to locale-specific rules.
- *
- * @example
- * ```tsx
- * function SortedList(props: { items: string[] }) {
- *   const collator = createCollator();
- *
- *   const sortedItems = () =>
- *     [...props.items].sort((a, b) => collator().compare(a, b));
- *
- *   return (
- *     <ul>
- *       <For each={sortedItems()}>
- *         {(item) => <li>{item}</li>}
- *       </For>
- *     </ul>
- *   );
- * }
- * ```
- *
- * @example
- * ```tsx
- * // Case-insensitive sorting
- * const collator = createCollator({ sensitivity: 'base' });
- *
- * // Numeric sorting
- * const numericCollator = createCollator({ numeric: true });
- * // ['a1', 'a10', 'a2'].sort(numericCollator().compare) -> ['a1', 'a2', 'a10']
- * ```
- */
-export function createCollator(
-  options?: Intl.CollatorOptions
-): () => Intl.Collator {
-  const locale = useLocale();
-
-  return createMemo(() => getCachedCollator(locale().locale, options));
-}