@proyecto-viviana/solidaria 0.2.2 → 0.2.3

package/src/datepicker/createDateField.ts

@@ -0,0 +1,154 @@
+/**
+ * createDateField hook for Solidaria
+ *
+ * Provides the behavior and accessibility implementation for a date field component.
+ * Based on @react-aria/datepicker useDateField
+ */
+
+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 type { DateFieldState, DateSegment } from '@proyecto-viviana/solid-stately';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface AriaDateFieldProps {
+  /** An ID for the date field. */
+  id?: string;
+  /** A visible label for the date field. */
+  label?: string;
+  /** An accessible label for the date field. */
+  'aria-label'?: string;
+  /** The ID of an element that labels the date field. */
+  'aria-labelledby'?: string;
+  /** The ID of an element that describes the date field. */
+  'aria-describedby'?: string;
+  /** Whether the date field is disabled. */
+  isDisabled?: boolean;
+  /** Whether the date field is read-only. */
+  isReadOnly?: boolean;
+  /** Whether the date field is required. */
+  isRequired?: boolean;
+  /** Whether the date field is invalid. */
+  isInvalid?: boolean;
+  /** Description text. */
+  description?: string;
+  /** Error message. */
+  errorMessage?: string;
+}
+
+export interface DateFieldAria {
+  /** Props for the label element. */
+  labelProps: Record<string, unknown>;
+  /** Props for the field container element. */
+  fieldProps: Record<string, unknown>;
+  /** Props for the input container (holds segments). */
+  inputProps: Record<string, unknown>;
+  /** Props for the description element. */
+  descriptionProps: Record<string, unknown>;
+  /** Props for the error message element. */
+  errorMessageProps: Record<string, unknown>;
+  /** The segments to render. */
+  segments: DateSegment[];
+}
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * Provides the behavior and accessibility implementation for a date field component.
+ */
+export function createDateField<T extends DateFieldState>(
+  props: MaybeAccessor<AriaDateFieldProps>,
+  state: T,
+  _ref?: () => HTMLElement | null
+): DateFieldAria {
+  const getProps = () => access(props);
+  const id = createId(getProps().id);
+  const descriptionId = createId();
+  const errorMessageId = createId();
+
+  // Create label handling
+  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',
+  });
+
+  // Build aria-describedby
+  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;
+  };
+
+  // Segments from state
+  const segments = createMemo(() => state.segments());
+
+  // Field container props
+  const fieldProps = createMemo(() => {
+    const p = getProps();
+
+    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': p.isInvalid || state.isInvalid() || undefined,
+      'aria-describedby': getAriaDescribedBy(),
+    });
+  });
+
+  // Input container props
+  const inputProps = createMemo(() => ({
+    role: 'presentation',
+  }));
+
+  // Description props
+  const descriptionProps = createMemo(() => ({
+    id: descriptionId,
+  }));
+
+  // Error message props
+  const errorMessageProps = createMemo(() => ({
+    id: errorMessageId,
+    role: 'alert',
+  }));
+
+  return {
+    get labelProps() {
+      return labelProps as Record<string, unknown>;
+    },
+    get fieldProps() {
+      return fieldProps();
+    },
+    get inputProps() {
+      return inputProps();
+    },
+    get descriptionProps() {
+      return descriptionProps();
+    },
+    get errorMessageProps() {
+      return errorMessageProps();
+    },
+    get segments() {
+      return segments();
+    },
+  };
+}

package/src/datepicker/createDatePicker.ts

@@ -0,0 +1,206 @@
+/**
+ * createDatePicker hook for Solidaria
+ *
+ * Provides the behavior and accessibility implementation for a date picker component.
+ * Based on @react-aria/datepicker useDatePicker
+ */
+
+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 type { DateFieldState, CalendarState } from '@proyecto-viviana/solid-stately';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface AriaDatePickerProps {
+  /** An ID for the date picker. */
+  id?: string;
+  /** A visible label for the date picker. */
+  label?: string;
+  /** An accessible label for the date picker. */
+  'aria-label'?: string;
+  /** The ID of an element that labels the date picker. */
+  'aria-labelledby'?: string;
+  /** The ID of an element that describes the date picker. */
+  'aria-describedby'?: string;
+  /** Whether the date picker is disabled. */
+  isDisabled?: boolean;
+  /** Whether the date picker is read-only. */
+  isReadOnly?: boolean;
+  /** Whether the date picker is required. */
+  isRequired?: boolean;
+  /** Whether the date picker is invalid. */
+  isInvalid?: boolean;
+  /** Description text. */
+  description?: string;
+  /** Error message. */
+  errorMessage?: string;
+}
+
+export interface DatePickerState {
+  /** Whether the calendar is open. */
+  isOpen: boolean;
+  /** Open the calendar. */
+  open: () => void;
+  /** Close the calendar. */
+  close: () => void;
+  /** Toggle the calendar. */
+  toggle: () => void;
+}
+
+export interface DatePickerAria {
+  /** Props for the group container. */
+  groupProps: Record<string, unknown>;
+  /** Props for the label element. */
+  labelProps: Record<string, unknown>;
+  /** Props for the date field container. */
+  fieldProps: Record<string, unknown>;
+  /** Props for the button that opens the calendar. */
+  buttonProps: Record<string, unknown>;
+  /** Props for the calendar dialog. */
+  dialogProps: Record<string, unknown>;
+  /** Props for the calendar. */
+  calendarProps: Record<string, unknown>;
+  /** Props for the description element. */
+  descriptionProps: Record<string, unknown>;
+  /** Props for the error message element. */
+  errorMessageProps: Record<string, unknown>;
+}
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * Provides the behavior and accessibility implementation for a date picker component.
+ */
+export function createDatePicker<T extends DateFieldState, C extends CalendarState>(
+  props: MaybeAccessor<AriaDatePickerProps>,
+  state: T,
+  overlayState: DatePickerState,
+  _calendarState?: C
+): DatePickerAria {
+  const getProps = () => access(props);
+  const id = createId(getProps().id);
+  const descriptionId = createId();
+  const errorMessageId = createId();
+  const dialogId = createId();
+
+  // Create label handling
+  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',
+  });
+
+  // Build aria-describedby
+  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;
+  };
+
+  // Group props
+  const groupProps = createMemo(() => {
+    const p = getProps();
+
+    return mergeProps(labelFieldProps as Record<string, unknown>, {
+      id,
+      role: 'group',
+      'aria-disabled': p.isDisabled || state.isDisabled() || undefined,
+      'aria-describedby': getAriaDescribedBy(),
+    });
+  });
+
+  // Field props
+  const fieldProps = createMemo(() => ({
+    'aria-haspopup': 'dialog' as const,
+    'aria-expanded': overlayState.isOpen,
+    'aria-controls': overlayState.isOpen ? dialogId : undefined,
+  }));
+
+  // Button props
+  const buttonProps = createMemo(() => {
+    const p = getProps();
+    const isDisabled = p.isDisabled || state.isDisabled();
+
+    return {
+      'aria-label': 'Open calendar',
+      'aria-haspopup': 'dialog' as const,
+      'aria-expanded': overlayState.isOpen,
+      'aria-controls': overlayState.isOpen ? dialogId : undefined,
+      disabled: isDisabled,
+      tabIndex: -1,
+      onClick: () => {
+        if (!isDisabled) {
+          overlayState.toggle();
+        }
+      },
+    };
+  });
+
+  // Dialog props
+  const dialogProps = createMemo(() => ({
+    id: dialogId,
+    role: 'dialog',
+    'aria-modal': true,
+    'aria-label': 'Calendar',
+  }));
+
+  // Calendar props
+  const calendarProps = createMemo(() => ({
+    'aria-label': 'Calendar',
+  }));
+
+  // Description props
+  const descriptionProps = createMemo(() => ({
+    id: descriptionId,
+  }));
+
+  // Error message props
+  const errorMessageProps = createMemo(() => ({
+    id: errorMessageId,
+    role: 'alert',
+  }));
+
+  return {
+    get groupProps() {
+      return groupProps();
+    },
+    get labelProps() {
+      return labelProps as Record<string, unknown>;
+    },
+    get fieldProps() {
+      return fieldProps();
+    },
+    get buttonProps() {
+      return buttonProps();
+    },
+    get dialogProps() {
+      return dialogProps();
+    },
+    get calendarProps() {
+      return calendarProps();
+    },
+    get descriptionProps() {
+      return descriptionProps();
+    },
+    get errorMessageProps() {
+      return errorMessageProps();
+    },
+  };
+}

package/src/datepicker/createDateSegment.ts

@@ -0,0 +1,229 @@
+/**
+ * createDateSegment hook for Solidaria
+ *
+ * Provides the behavior and accessibility implementation for a date segment.
+ * Based on @react-aria/datepicker useDateSegment
+ */
+
+import { createSignal, createMemo } from 'solid-js';
+import { access, type MaybeAccessor } from '../utils/reactivity';
+import type { DateFieldState, DateSegment, DateSegmentType } from '@proyecto-viviana/solid-stately';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface AriaDateSegmentProps {
+  /** The segment data. */
+  segment: DateSegment;
+}
+
+export interface DateSegmentAria {
+  /** Props for the segment element. */
+  segmentProps: Record<string, unknown>;
+  /** Whether the segment is focused. */
+  isFocused: boolean;
+  /** Whether the segment is editable. */
+  isEditable: boolean;
+  /** Whether the segment is a placeholder. */
+  isPlaceholder: boolean;
+  /** The text to display. */
+  text: string;
+}
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * Provides the behavior and accessibility implementation for a date segment.
+ */
+export function createDateSegment<T extends DateFieldState>(
+  props: MaybeAccessor<AriaDateSegmentProps>,
+  state: T,
+  _ref?: () => HTMLElement | null
+): DateSegmentAria {
+  const getProps = () => access(props);
+  const [isFocused, setIsFocused] = createSignal(false);
+  const [enteredKeys, setEnteredKeys] = createSignal('');
+
+  // Get the segment from props
+  const segment = createMemo(() => getProps().segment);
+
+  // Check if editable
+  const isEditable = createMemo(() => {
+    const seg = segment();
+    return seg.isEditable && !state.isDisabled() && !state.isReadOnly();
+  });
+
+  // Handle keyboard input
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (!isEditable()) return;
+
+    const seg = segment();
+    const type = seg.type;
+
+    if (type === 'literal') return;
+
+    switch (e.key) {
+      case 'ArrowUp':
+        e.preventDefault();
+        state.incrementSegment(type);
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        state.decrementSegment(type);
+        break;
+      case 'Backspace':
+      case 'Delete':
+        e.preventDefault();
+        state.clearSegment(type);
+        setEnteredKeys('');
+        break;
+      default:
+        // Handle numeric input
+        if (/^\d$/.test(e.key)) {
+          e.preventDefault();
+          handleNumericInput(e.key, type, seg);
+        }
+        break;
+    }
+  };
+
+  // Handle numeric input
+  const handleNumericInput = (
+    key: string,
+    type: DateSegmentType,
+    seg: DateSegment
+  ) => {
+    const newKeys = enteredKeys() + key;
+    const numValue = parseInt(newKeys, 10);
+    const maxValue = seg.maxValue ?? 99;
+    const minValue = seg.minValue ?? 0;
+
+    // Check if we should accept more digits
+    if (numValue <= maxValue) {
+      state.setSegment(type, numValue);
+
+      // 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) {
+        setEnteredKeys('');
+        // Move to next segment (would need focus management)
+      } else {
+        setEnteredKeys(newKeys);
+      }
+    } else {
+      // Start fresh with just this key
+      const singleValue = parseInt(key, 10);
+      if (singleValue >= minValue && singleValue <= maxValue) {
+        state.setSegment(type, singleValue);
+      }
+      setEnteredKeys(key);
+    }
+  };
+
+  // Handle focus
+  const handleFocus = () => {
+    setIsFocused(true);
+    setEnteredKeys('');
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+    setEnteredKeys('');
+    state.confirmPlaceholder();
+  };
+
+  // Segment props
+  const segmentProps = createMemo(() => {
+    const seg = segment();
+    const type = seg.type;
+
+    // Literal segments don't need interaction props
+    if (type === 'literal') {
+      return {
+        'aria-hidden': true,
+      };
+    }
+
+    return {
+      role: 'spinbutton',
+      tabIndex: isEditable() ? 0 : -1,
+      'aria-label': getSegmentLabel(type),
+      'aria-valuenow': seg.value,
+      'aria-valuemin': seg.minValue,
+      'aria-valuemax': seg.maxValue,
+      'aria-valuetext': seg.isPlaceholder ? seg.placeholder : seg.text,
+      'aria-readonly': state.isReadOnly() || undefined,
+      'aria-disabled': state.isDisabled() || undefined,
+      'aria-invalid': state.isInvalid() || undefined,
+      contentEditable: isEditable(),
+      suppressContentEditableWarning: true,
+      inputMode: 'numeric' as const,
+      autoCorrect: 'off',
+      enterKeyHint: 'next' as const,
+      spellCheck: false,
+      onKeyDown: handleKeyDown,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onMouseDown: (e: MouseEvent) => {
+        // Prevent cursor positioning in the middle of the segment
+        e.preventDefault();
+      },
+    };
+  });
+
+  // Text to display
+  const text = createMemo(() => {
+    const seg = segment();
+    return seg.isPlaceholder ? seg.placeholder : seg.text;
+  });
+
+  return {
+    get segmentProps() {
+      return segmentProps();
+    },
+    get isFocused() {
+      return isFocused();
+    },
+    get isEditable() {
+      return isEditable();
+    },
+    get isPlaceholder() {
+      return segment().isPlaceholder;
+    },
+    get text() {
+      return text();
+    },
+  };
+}
+
+// ============================================
+// 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 '';
+  }
+}