@proyecto-viviana/solidaria 0.1.3 → 0.2.0

package/src/datepicker/createDateField.ts

@@ -1,154 +0,0 @@
-/**
- * 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

@@ -1,206 +0,0 @@
-/**
- * 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

@@ -1,229 +0,0 @@
-/**
- * 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 '';
-  }
-}