@proyecto-viviana/solidaria 0.2.4 → 0.2.8

package/src/combobox/index.ts

@@ -1,6 +1,6 @@
-export {
-  createComboBox,
-  getComboBoxData,
-  type AriaComboBoxProps,
-  type ComboBoxAria,
-} from './createComboBox';
+export {
+  createComboBox,
+  getComboBoxData,
+  type AriaComboBoxProps,
+  type ComboBoxAria,
+} from './createComboBox';

package/src/datepicker/createDatePicker.ts

@@ -10,6 +10,7 @@ import { createId } from '../ssr';
 import { createLabel } from '../label/createLabel';
 import { access, type MaybeAccessor } from '../utils/reactivity';
 import { mergeProps } from '../utils/mergeProps';
+import { useLocale } from '../i18n';
 import type { DateFieldState, CalendarState } from '@proyecto-viviana/solid-stately';
 
 // ============================================
@@ -39,6 +40,12 @@ export interface AriaDatePickerProps {
   description?: string;
   /** Error message. */
   errorMessage?: string;
+  /** Accessible label for the calendar trigger button. */
+  buttonAriaLabel?: string;
+  /** Accessible label for the calendar dialog. */
+  dialogAriaLabel?: string;
+  /** Accessible label for the calendar grid region. */
+  calendarAriaLabel?: string;
 }
 
 export interface DatePickerState {
@@ -84,6 +91,7 @@ export function createDatePicker<T extends DateFieldState, C extends CalendarSta
   overlayState: DatePickerState,
   _calendarState?: C
 ): DatePickerAria {
+  const locale = useLocale();
   const getProps = () => access(props);
   const id = createId(getProps().id);
   const descriptionId = createId();
@@ -117,29 +125,31 @@ export function createDatePicker<T extends DateFieldState, C extends CalendarSta
   // Group props
   const groupProps = createMemo(() => {
     const p = getProps();
+    const isInvalid = p.isInvalid || state.isInvalid();
 
     return mergeProps(labelFieldProps as Record<string, unknown>, {
       id,
       role: 'group',
       'aria-disabled': p.isDisabled || state.isDisabled() || undefined,
+      'aria-readonly': p.isReadOnly || state.isReadOnly() || undefined,
+      'aria-required': p.isRequired || state.isRequired() || undefined,
+      'aria-invalid': isInvalid || undefined,
       'aria-describedby': getAriaDescribedBy(),
     });
   });
 
-  // Field props
-  const fieldProps = createMemo(() => ({
-    'aria-haspopup': 'dialog' as const,
-    'aria-expanded': overlayState.isOpen,
-    'aria-controls': overlayState.isOpen ? dialogId : undefined,
-  }));
+  // Field props are applied to DateInput (a non-popup container), so avoid
+  // popup trigger attributes like aria-expanded/aria-haspopup here.
+  const fieldProps = createMemo(() => ({}));
 
   // Button props
   const buttonProps = createMemo(() => {
     const p = getProps();
     const isDisabled = p.isDisabled || state.isDisabled();
+    const defaults = getDatePickerLabelDefaults(locale().locale);
 
     return {
-      'aria-label': 'Open calendar',
+      'aria-label': p.buttonAriaLabel ?? defaults.button,
       'aria-haspopup': 'dialog' as const,
       'aria-expanded': overlayState.isOpen,
       'aria-controls': overlayState.isOpen ? dialogId : undefined,
@@ -154,17 +164,23 @@ export function createDatePicker<T extends DateFieldState, C extends CalendarSta
   });
 
   // Dialog props
-  const dialogProps = createMemo(() => ({
-    id: dialogId,
-    role: 'dialog',
-    'aria-modal': true,
-    'aria-label': 'Calendar',
-  }));
+  const dialogProps = createMemo(() => {
+    const defaults = getDatePickerLabelDefaults(locale().locale);
+    return {
+      id: dialogId,
+      role: 'dialog',
+      'aria-modal': true,
+      'aria-label': getProps().dialogAriaLabel ?? defaults.dialog,
+    };
+  });
 
   // Calendar props
-  const calendarProps = createMemo(() => ({
-    'aria-label': 'Calendar',
-  }));
+  const calendarProps = createMemo(() => {
+    const defaults = getDatePickerLabelDefaults(locale().locale);
+    return {
+      'aria-label': getProps().calendarAriaLabel ?? getProps().dialogAriaLabel ?? defaults.calendar,
+    };
+  });
 
   // Description props
   const descriptionProps = createMemo(() => ({
@@ -204,3 +220,25 @@ export function createDatePicker<T extends DateFieldState, C extends CalendarSta
     },
   };
 }
+
+function getDatePickerLabelDefaults(locale: string): {
+  button: string;
+  dialog: string;
+  calendar: string;
+} {
+  const language = locale.toLowerCase().split('-')[0] ?? 'en';
+
+  if (language === 'es') {
+    return {
+      button: 'Abrir calendario',
+      dialog: 'Calendario',
+      calendar: 'Calendario',
+    };
+  }
+
+  return {
+    button: 'Open calendar',
+    dialog: 'Calendar',
+    calendar: 'Calendar',
+  };
+}

package/src/datepicker/createDateRangePicker.ts

@@ -0,0 +1,246 @@
+/**
+ * createDateRangePicker hook for Solidaria
+ *
+ * Provides behavior and accessibility wiring for range date pickers.
+ * Compatibility target: @react-aria/datepicker useDateRangePicker.
+ */
+
+import { createMemo } from 'solid-js';
+import { createId } from '../ssr';
+import { createLabel } from '../label/createLabel';
+import { access, type MaybeAccessor } from '../utils/reactivity';
+import { mergeProps } from '../utils/mergeProps';
+import { useLocale } from '../i18n';
+import type { RangeCalendarState } from '@proyecto-viviana/solid-stately';
+import type { DatePickerState } from './createDatePicker';
+
+export interface AriaDateRangePickerProps {
+  id?: string;
+  label?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  isRequired?: boolean;
+  isInvalid?: boolean;
+  description?: string;
+  errorMessage?: string;
+  buttonAriaLabel?: string;
+  dialogAriaLabel?: string;
+  calendarAriaLabel?: string;
+  startFieldAriaLabel?: string;
+  endFieldAriaLabel?: string;
+}
+
+export interface DateRangePickerAria {
+  groupProps: Record<string, unknown>;
+  labelProps: Record<string, unknown>;
+  startFieldProps: Record<string, unknown>;
+  endFieldProps: Record<string, unknown>;
+  buttonProps: Record<string, unknown>;
+  dialogProps: Record<string, unknown>;
+  calendarProps: Record<string, unknown>;
+  descriptionProps: Record<string, unknown>;
+  errorMessageProps: Record<string, unknown>;
+}
+
+export function createDateRangePicker<T extends RangeCalendarState>(
+  props: MaybeAccessor<AriaDateRangePickerProps>,
+  state: T,
+  overlayState: DatePickerState
+): DateRangePickerAria {
+  const locale = useLocale();
+  const getProps = () => access(props);
+  const id = createId(getProps().id);
+  const startFieldId = createId();
+  const endFieldId = createId();
+  const descriptionId = createId();
+  const errorMessageId = createId();
+  const dialogId = createId();
+
+  const { labelProps, fieldProps: labelFieldProps } = createLabel({
+    get label() { return getProps().label; },
+    get 'aria-label'() { return getProps()['aria-label']; },
+    get 'aria-labelledby'() { return getProps()['aria-labelledby']; },
+    labelElementType: 'span',
+  });
+
+  const getAriaDescribedBy = () => {
+    const p = getProps();
+    const ids: string[] = [];
+    if (p['aria-describedby']) ids.push(p['aria-describedby']);
+    if (p.description) ids.push(descriptionId);
+    if (p.isInvalid && p.errorMessage) ids.push(errorMessageId);
+    return ids.length > 0 ? ids.join(' ') : undefined;
+  };
+
+  const groupProps = createMemo(() => {
+    const p = getProps();
+    const isInvalid = p.isInvalid;
+    return mergeProps(labelFieldProps as Record<string, unknown>, {
+      id,
+      role: 'group',
+      'aria-disabled': p.isDisabled || state.isDisabled() || undefined,
+      'aria-readonly': p.isReadOnly || state.isReadOnly() || undefined,
+      'aria-required': p.isRequired || undefined,
+      'aria-invalid': isInvalid || undefined,
+      'aria-describedby': getAriaDescribedBy(),
+    });
+  });
+
+  const startFieldProps = createMemo(() => {
+    const p = getProps();
+    const defaults = getDateRangePickerLabelDefaults(locale().locale);
+    const isDisabled = p.isDisabled || state.isDisabled();
+    const isReadOnly = p.isReadOnly || state.isReadOnly();
+    const isInvalid = p.isInvalid;
+
+    return {
+      id: startFieldId,
+      'aria-label': p.startFieldAriaLabel ?? defaults.startField,
+      'aria-describedby': getAriaDescribedBy(),
+      'aria-disabled': isDisabled || undefined,
+      'aria-readonly': isReadOnly || undefined,
+      'aria-invalid': isInvalid || undefined,
+      tabIndex: isDisabled ? -1 : 0,
+      onClick: () => {
+        if (!isDisabled) {
+          overlayState.open();
+        }
+      },
+      onKeyDown: (event: KeyboardEvent) => {
+        if (isDisabled) return;
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+          event.preventDefault();
+          overlayState.open();
+        }
+      },
+    };
+  });
+
+  const endFieldProps = createMemo(() => {
+    const p = getProps();
+    const defaults = getDateRangePickerLabelDefaults(locale().locale);
+    const isDisabled = p.isDisabled || state.isDisabled();
+    const isReadOnly = p.isReadOnly || state.isReadOnly();
+    const isInvalid = p.isInvalid;
+
+    return {
+      id: endFieldId,
+      'aria-label': p.endFieldAriaLabel ?? defaults.endField,
+      'aria-describedby': getAriaDescribedBy(),
+      'aria-disabled': isDisabled || undefined,
+      'aria-readonly': isReadOnly || undefined,
+      'aria-invalid': isInvalid || undefined,
+      tabIndex: isDisabled ? -1 : 0,
+      onClick: () => {
+        if (!isDisabled) {
+          overlayState.open();
+        }
+      },
+      onKeyDown: (event: KeyboardEvent) => {
+        if (isDisabled) return;
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+          event.preventDefault();
+          overlayState.open();
+        }
+      },
+    };
+  });
+
+  const buttonProps = createMemo(() => {
+    const p = getProps();
+    const defaults = getDateRangePickerLabelDefaults(locale().locale);
+    const isDisabled = p.isDisabled || state.isDisabled();
+    return {
+      'aria-label': p.buttonAriaLabel ?? defaults.button,
+      'aria-haspopup': 'dialog' as const,
+      'aria-expanded': overlayState.isOpen,
+      'aria-controls': overlayState.isOpen ? dialogId : undefined,
+      disabled: isDisabled,
+      tabIndex: 0,
+      onClick: () => {
+        if (!isDisabled) overlayState.toggle();
+      },
+    };
+  });
+
+  const dialogProps = createMemo(() => {
+    const defaults = getDateRangePickerLabelDefaults(locale().locale);
+    return {
+      id: dialogId,
+      role: 'dialog',
+      'aria-modal': true,
+      'aria-label': getProps().dialogAriaLabel ?? defaults.dialog,
+    };
+  });
+
+  const calendarProps = createMemo(() => {
+    const defaults = getDateRangePickerLabelDefaults(locale().locale);
+    return {
+      'aria-label': getProps().calendarAriaLabel ?? getProps().dialogAriaLabel ?? defaults.calendar,
+    };
+  });
+
+  const descriptionProps = createMemo(() => ({ id: descriptionId }));
+  const errorMessageProps = createMemo(() => ({ id: errorMessageId, role: 'alert' }));
+
+  return {
+    get groupProps() {
+      return groupProps();
+    },
+    get labelProps() {
+      return labelProps as Record<string, unknown>;
+    },
+    get startFieldProps() {
+      return startFieldProps();
+    },
+    get endFieldProps() {
+      return endFieldProps();
+    },
+    get buttonProps() {
+      return buttonProps();
+    },
+    get dialogProps() {
+      return dialogProps();
+    },
+    get calendarProps() {
+      return calendarProps();
+    },
+    get descriptionProps() {
+      return descriptionProps();
+    },
+    get errorMessageProps() {
+      return errorMessageProps();
+    },
+  };
+}
+
+function getDateRangePickerLabelDefaults(locale: string): {
+  button: string;
+  dialog: string;
+  calendar: string;
+  startField: string;
+  endField: string;
+} {
+  const language = locale.toLowerCase().split('-')[0] ?? 'en';
+
+  if (language === 'es') {
+    return {
+      button: 'Abrir calendario de rango',
+      dialog: 'Calendario de rango',
+      calendar: 'Calendario de rango',
+      startField: 'Fecha de inicio',
+      endField: 'Fecha de fin',
+    };
+  }
+
+  return {
+    button: 'Open range calendar',
+    dialog: 'Range calendar',
+    calendar: 'Range calendar',
+    startField: 'Start date',
+    endField: 'End date',
+  };
+}

package/src/datepicker/createDateSegment.ts

@@ -8,6 +8,7 @@
 import { createSignal, createMemo } from 'solid-js';
 import { access, type MaybeAccessor } from '../utils/reactivity';
 import type { DateFieldState, DateSegment, DateSegmentType } from '@proyecto-viviana/solid-stately';
+import { useLocale } from '../i18n';
 
 // ============================================
 // TYPES
@@ -41,11 +42,13 @@ export interface DateSegmentAria {
 export function createDateSegment<T extends DateFieldState>(
   props: MaybeAccessor<AriaDateSegmentProps>,
   state: T,
-  _ref?: () => HTMLElement | null
+  ref?: () => HTMLElement | null
 ): DateSegmentAria {
   const getProps = () => access(props);
   const [isFocused, setIsFocused] = createSignal(false);
   const [enteredKeys, setEnteredKeys] = createSignal('');
+  const [isComposing, setIsComposing] = createSignal(false);
+  const locale = useLocale();
 
   // Get the segment from props
   const segment = createMemo(() => getProps().segment);
@@ -56,9 +59,47 @@ export function createDateSegment<T extends DateFieldState>(
     return seg.isEditable && !state.isDisabled() && !state.isReadOnly();
   });
 
+  const focusSegment = (target: 'first' | 'last' | 'prev' | 'next') => {
+    const el = ref?.();
+    if (!el) return;
+
+    const container = el.parentElement;
+    if (!container) return;
+
+    const segments = Array.from(
+      container.querySelectorAll<HTMLElement>('[role="spinbutton"]')
+    );
+
+    if (segments.length === 0) return;
+
+    if (target === 'first') {
+      segments[0]?.focus();
+      return;
+    }
+
+    if (target === 'last') {
+      segments[segments.length - 1]?.focus();
+      return;
+    }
+
+    const currentIndex = segments.indexOf(el);
+    if (currentIndex < 0) return;
+
+    const nextIndex = target === 'next' ? currentIndex + 1 : currentIndex - 1;
+    if (nextIndex >= 0 && nextIndex < segments.length) {
+      segments[nextIndex]?.focus();
+    }
+  };
+
+  const clearCurrentSegment = (type: DateSegmentType) => {
+    state.clearSegment(type);
+    setEnteredKeys('');
+  };
+
   // Handle keyboard input
   const handleKeyDown = (e: KeyboardEvent) => {
     if (!isEditable()) return;
+    if (isComposing()) return;
 
     const seg = segment();
     const type = seg.type;
@@ -66,6 +107,14 @@ export function createDateSegment<T extends DateFieldState>(
     if (type === 'literal') return;
 
     switch (e.key) {
+      case 'ArrowRight':
+        e.preventDefault();
+        focusSegment(locale().direction === 'rtl' ? 'prev' : 'next');
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        focusSegment(locale().direction === 'rtl' ? 'next' : 'prev');
+        break;
       case 'ArrowUp':
         e.preventDefault();
         state.incrementSegment(type);
@@ -74,17 +123,33 @@ export function createDateSegment<T extends DateFieldState>(
         e.preventDefault();
         state.decrementSegment(type);
         break;
+      case 'Home':
+        e.preventDefault();
+        focusSegment('first');
+        break;
+      case 'End':
+        e.preventDefault();
+        focusSegment('last');
+        break;
       case 'Backspace':
+        e.preventDefault();
+        // Match common date-field UX: backspace on an empty placeholder moves to previous segment.
+        if (seg.isPlaceholder) {
+          focusSegment('prev');
+        } else {
+          clearCurrentSegment(type);
+        }
+        break;
       case 'Delete':
         e.preventDefault();
-        state.clearSegment(type);
-        setEnteredKeys('');
+        clearCurrentSegment(type);
         break;
       default:
         // Handle numeric input
-        if (/^\d$/.test(e.key)) {
+        const normalizedDigit = normalizeDigit(e.key);
+        if (normalizedDigit) {
           e.preventDefault();
-          handleNumericInput(e.key, type, seg);
+          handleNumericInput(normalizedDigit, type, seg);
         }
         break;
     }
@@ -100,6 +165,7 @@ export function createDateSegment<T extends DateFieldState>(
     const numValue = parseInt(newKeys, 10);
     const maxValue = seg.maxValue ?? 99;
     const minValue = seg.minValue ?? 0;
+    const maxDigits = String(maxValue).length;
 
     // Check if we should accept more digits
     if (numValue <= maxValue) {
@@ -107,9 +173,9 @@ export function createDateSegment<T extends DateFieldState>(
 
       // If entering more digits wouldn't make sense, clear entered keys
       const potentialNextValue = parseInt(newKeys + '0', 10);
-      if (potentialNextValue > maxValue || newKeys.length >= String(maxValue).length) {
+      if (potentialNextValue > maxValue || newKeys.length >= maxDigits) {
         setEnteredKeys('');
-        // Move to next segment (would need focus management)
+        focusSegment('next');
       } else {
         setEnteredKeys(newKeys);
       }
@@ -118,8 +184,58 @@ export function createDateSegment<T extends DateFieldState>(
       const singleValue = parseInt(key, 10);
       if (singleValue >= minValue && singleValue <= maxValue) {
         state.setSegment(type, singleValue);
+        const potentialNextValue = parseInt(key + '0', 10);
+        if (potentialNextValue > maxValue || key.length >= maxDigits) {
+          setEnteredKeys('');
+          focusSegment('next');
+        } else {
+          setEnteredKeys(key);
+        }
+      } else {
+        setEnteredKeys('');
       }
-      setEnteredKeys(key);
+    }
+  };
+
+  const handleBeforeInput = (e: InputEvent) => {
+    if (!isEditable()) return;
+    if (isComposing()) return;
+
+    const seg = segment();
+    if (seg.type === 'literal') return;
+
+    if (e.inputType === 'deleteContentBackward' || e.inputType === 'deleteContentForward') {
+      e.preventDefault();
+      clearCurrentSegment(seg.type);
+      return;
+    }
+
+    if (e.inputType === 'insertText' && e.data) {
+      const normalizedDigit = normalizeDigit(e.data);
+      if (!normalizedDigit) return;
+      e.preventDefault();
+      handleNumericInput(normalizedDigit, seg.type, seg);
+    }
+  };
+
+  const handleCompositionStart = () => {
+    if (!isEditable()) return;
+    setIsComposing(true);
+    setEnteredKeys('');
+  };
+
+  const handleCompositionEnd = (e: CompositionEvent) => {
+    if (!isEditable()) return;
+    setIsComposing(false);
+
+    const seg = segment();
+    if (seg.type === 'literal') return;
+
+    const digits = extractNormalizedDigits(e.data ?? '');
+    if (digits.length === 0) return;
+
+    for (const digit of digits) {
+      handleNumericInput(digit, seg.type, seg);
     }
   };
 
@@ -150,7 +266,7 @@ export function createDateSegment<T extends DateFieldState>(
     return {
       role: 'spinbutton',
       tabIndex: isEditable() ? 0 : -1,
-      'aria-label': getSegmentLabel(type),
+      'aria-label': getSegmentLabel(type, locale().locale),
       'aria-valuenow': seg.value,
       'aria-valuemin': seg.minValue,
       'aria-valuemax': seg.maxValue,
@@ -167,6 +283,9 @@ export function createDateSegment<T extends DateFieldState>(
       onKeyDown: handleKeyDown,
       onFocus: handleFocus,
       onBlur: handleBlur,
+      onBeforeInput: handleBeforeInput,
+      onCompositionStart: handleCompositionStart,
+      onCompositionEnd: handleCompositionEnd,
       onMouseDown: (e: MouseEvent) => {
         // Prevent cursor positioning in the middle of the segment
         e.preventDefault();
@@ -203,27 +322,62 @@ export function createDateSegment<T extends DateFieldState>(
 // HELPER FUNCTIONS
 // ============================================
 
-function getSegmentLabel(type: DateSegmentType): string {
-  switch (type) {
-    case 'year':
-      return 'Year';
-    case 'month':
-      return 'Month';
-    case 'day':
-      return 'Day';
-    case 'hour':
-      return 'Hour';
-    case 'minute':
-      return 'Minute';
-    case 'second':
-      return 'Second';
-    case 'dayPeriod':
-      return 'AM/PM';
-    case 'era':
-      return 'Era';
-    case 'timeZoneName':
-      return 'Time zone';
-    default:
-      return '';
+const SEGMENT_LABELS: Record<string, Record<Exclude<DateSegmentType, 'literal'>, string>> = {
+  en: {
+    year: 'Year',
+    month: 'Month',
+    day: 'Day',
+    hour: 'Hour',
+    minute: 'Minute',
+    second: 'Second',
+    dayPeriod: 'AM/PM',
+    era: 'Era',
+    timeZoneName: 'Time zone',
+  },
+  es: {
+    year: 'Año',
+    month: 'Mes',
+    day: 'Día',
+    hour: 'Hora',
+    minute: 'Minuto',
+    second: 'Segundo',
+    dayPeriod: 'AM/PM',
+    era: 'Era',
+    timeZoneName: 'Zona horaria',
+  },
+};
+
+function getSegmentLabel(type: DateSegmentType, locale: string): string {
+  if (type === 'literal') return '';
+
+  const language = locale.toLowerCase().split('-')[0] ?? 'en';
+  const labels = SEGMENT_LABELS[language] ?? SEGMENT_LABELS.en;
+  return labels[type];
+}
+
+function normalizeDigit(input: string): string | null {
+  if (/^[0-9]$/.test(input)) {
+    return input;
+  }
+
+  const codePoint = input.codePointAt(0);
+  if (codePoint == null) return null;
+
+  // Full-width digits ０-９
+  if (codePoint >= 0xff10 && codePoint <= 0xff19) {
+    return String(codePoint - 0xff10);
+  }
+
+  return null;
+}
+
+function extractNormalizedDigits(value: string): string[] {
+  const digits: string[] = [];
+  for (const char of value) {
+    const normalized = normalizeDigit(char);
+    if (normalized) {
+      digits.push(normalized);
+    }
   }
+  return digits;
 }