@proyecto-viviana/solidaria 0.1.3 → 0.2.0

package/src/button/createToggleButton.ts

@@ -1,101 +0,0 @@
-import { Accessor, createSignal } from 'solid-js';
-import { createButton } from './createButton';
-import { mergeProps } from '../utils';
-import type { AriaButtonProps, ButtonAria } from './types';
-import type { PressEvent } from '../interactions';
-
-export interface AriaToggleButtonProps extends Omit<AriaButtonProps, 'aria-pressed'> {
-  /** Whether the button is selected (controlled). */
-  isSelected?: Accessor<boolean> | boolean;
-  /** Handler called when the button's selection state changes. */
-  onChange?: (isSelected: boolean) => void;
-  /** The default selected state (uncontrolled). */
-  defaultSelected?: boolean;
-}
-
-export interface ToggleButtonAria extends ButtonAria {
-  /** Whether the button is currently selected. */
-  isSelected: Accessor<boolean>;
-}
-
-function getSelectedValue(isSelected: Accessor<boolean> | boolean | undefined): boolean {
-  if (typeof isSelected === 'function') {
-    return isSelected();
-  }
-  return isSelected ?? false;
-}
-
-/**
- * Provides the behavior and accessibility implementation for a toggle button component.
- * Toggle buttons allow users to toggle a selection on or off.
- *
- * Based on react-aria's useToggleButton but adapted for SolidJS.
- *
- * @example
- * ```tsx
- * import { createToggleButton } from 'solidaria';
- *
- * function ToggleButton(props) {
- *   const { buttonProps, isPressed, isSelected } = createToggleButton(props);
- *
- *   return (
- *     <button
- *       {...buttonProps}
- *       class={isSelected() ? 'selected' : ''}
- *       style={{ opacity: isPressed() ? 0.8 : 1 }}
- *     >
- *       {props.children}
- *     </button>
- *   );
- * }
- * ```
- */
-export function createToggleButton(props: AriaToggleButtonProps = {}): ToggleButtonAria {
-  // Handle controlled vs uncontrolled state
-  const isControlled = props.isSelected !== undefined;
-  const [uncontrolledSelected, setUncontrolledSelected] = createSignal(
-    props.defaultSelected ?? false
-  );
-
-  const isSelected = (): boolean => {
-    if (isControlled) {
-      return getSelectedValue(props.isSelected);
-    }
-    return uncontrolledSelected();
-  };
-
-  const toggleSelection = () => {
-    const newValue = !isSelected();
-    if (!isControlled) {
-      setUncontrolledSelected(newValue);
-    }
-    props.onChange?.(newValue);
-  };
-
-  // Create the press handler that toggles selection
-  const onPress = (e: PressEvent) => {
-    toggleSelection();
-    props.onPress?.(e);
-  };
-
-  // Get button props with our custom press handler
-  const { buttonProps: baseButtonProps, isPressed } = createButton(
-    mergeProps(props, {
-      onPress,
-    }) as AriaButtonProps
-  );
-
-  // Create buttonProps with a getter for aria-pressed so it stays reactive
-  const buttonProps = {
-    ...baseButtonProps,
-    get 'aria-pressed'() {
-      return isSelected();
-    },
-  };
-
-  return {
-    buttonProps,
-    isPressed,
-    isSelected,
-  };
-}

package/src/button/index.ts

@@ -1,4 +0,0 @@
-export { createButton } from './createButton';
-export { createToggleButton } from './createToggleButton';
-export type { AriaButtonProps, ButtonAria } from './types';
-export type { AriaToggleButtonProps, ToggleButtonAria } from './createToggleButton';

package/src/button/types.ts

@@ -1,78 +0,0 @@
-import { Accessor } from 'solid-js';
-import { PressEvent } from '../interactions';
-
-export interface AriaButtonProps {
-  /** Whether the button is disabled. */
-  isDisabled?: Accessor<boolean> | boolean;
-  /** Handler called when the press is released over the target. */
-  onPress?: (e: PressEvent) => void;
-  /** Handler called when a press interaction starts. */
-  onPressStart?: (e: PressEvent) => void;
-  /** Handler called when a press interaction ends. */
-  onPressEnd?: (e: PressEvent) => void;
-  /** Handler called when a press is released over the target. */
-  onPressUp?: (e: PressEvent) => void;
-  /** Handler called when the press state changes. */
-  onPressChange?: (isPressed: boolean) => void;
-  /**
-   * A native click handler, useful for form submission.
-   * Note: `onPress` is preferred for cross-device compatibility.
-   */
-  onClick?: (e: MouseEvent) => void;
-  /** Whether the button should not receive focus on press. */
-  preventFocusOnPress?: boolean;
-  /**
-   * Whether to allow focus on the button when it is disabled.
-   * This enables showing tooltips on disabled buttons.
-   * When true, the button gets `tabIndex=-1` instead of being removed from tab order.
-   */
-  allowFocusWhenDisabled?: boolean;
-  /** Whether the element should receive focus on render. */
-  autoFocus?: boolean;
-  /** The HTML element type to use for the button. */
-  elementType?: 'button' | 'a' | 'div' | 'input' | 'span';
-  /** The URL to link to (for anchor elements). */
-  href?: string;
-  /** The target for the link (for anchor elements). */
-  target?: string;
-  /** The rel attribute for the link (for anchor elements). */
-  rel?: string;
-  /** The type attribute for button elements. */
-  type?: 'button' | 'submit' | 'reset';
-  /** Whether the button is in a pressed state (controlled). */
-  'aria-pressed'?: boolean | 'true' | 'false' | 'mixed';
-  /** Whether the button has a popup. */
-  'aria-haspopup'?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false';
-  /** Whether the popup is expanded. */
-  'aria-expanded'?: boolean | 'true' | 'false';
-  /** The accessible label for the button. */
-  'aria-label'?: string;
-  /** The id of the element that labels the button. */
-  'aria-labelledby'?: string;
-  /** The id of the element that describes the button. */
-  'aria-describedby'?: string;
-  /** Identifies the element (or elements) whose contents or presence are controlled by the button. */
-  'aria-controls'?: string;
-  /** Indicates the current "pressed" state of toggle buttons. */
-  'aria-current'?: boolean | 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
-  /** Additional attributes for form buttons. */
-  form?: string;
-  formAction?: string;
-  formEncType?: string;
-  formMethod?: string;
-  formNoValidate?: boolean;
-  formTarget?: string;
-  /** The name attribute for form buttons. */
-  name?: string;
-  /** The value attribute for form buttons. */
-  value?: string;
-  /** Whether to exclude the button from the tab order. */
-  excludeFromTabOrder?: boolean;
-}
-
-export interface ButtonAria {
-  /** Props to spread on the button element. */
-  buttonProps: Record<string, unknown>;
-  /** Whether the button is currently pressed. */
-  isPressed: Accessor<boolean>;
-}

package/src/calendar/createCalendar.ts

@@ -1,138 +0,0 @@
-/**
- * createCalendar hook for Solidaria
- *
- * Provides the behavior and accessibility implementation for a calendar component.
- * Based on @react-aria/calendar useCalendar
- */
-
-import { createMemo } from 'solid-js';
-import { createId } from '../ssr';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import { mergeProps } from '../utils/mergeProps';
-import type { CalendarState } from '@proyecto-viviana/solid-stately';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface AriaCalendarProps {
-  /** An ID for the calendar. */
-  id?: string;
-  /** Whether the calendar is disabled. */
-  isDisabled?: boolean;
-  /** Whether the calendar is read-only. */
-  isReadOnly?: boolean;
-  /** An accessible label for the calendar. */
-  'aria-label'?: string;
-  /** The ID of an element that labels the calendar. */
-  'aria-labelledby'?: string;
-  /** The ID of an element that describes the calendar. */
-  'aria-describedby'?: string;
-  /** Minimum number of visible months. */
-  visibleMonths?: number;
-}
-
-export interface CalendarAria {
-  /** Props for the calendar container element. */
-  calendarProps: Record<string, unknown>;
-  /** Props for the previous button. */
-  prevButtonProps: Record<string, unknown>;
-  /** Props for the next button. */
-  nextButtonProps: Record<string, unknown>;
-  /** Props for the title/heading element. */
-  titleProps: Record<string, unknown>;
-  /** An accessible label for the title. */
-  title: string;
-}
-
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
-/**
- * Provides the behavior and accessibility implementation for a calendar component.
- */
-export function createCalendar<T extends CalendarState>(
-  props: MaybeAccessor<AriaCalendarProps>,
-  state: T
-): CalendarAria {
-  const getProps = () => access(props);
-  const id = createId(getProps().id);
-  const titleId = createId();
-
-  // Title (e.g., "December 2024")
-  const title = createMemo(() => state.title());
-
-  // Previous button props
-  const prevButtonProps = createMemo(() => {
-    const p = getProps();
-    const isDisabled = p.isDisabled || state.isDisabled();
-
-    return {
-      'aria-label': 'Previous month',
-      onClick: () => {
-        if (!isDisabled) {
-          state.focusPreviousPage();
-        }
-      },
-      disabled: isDisabled,
-      tabIndex: -1,
-    };
-  });
-
-  // Next button props
-  const nextButtonProps = createMemo(() => {
-    const p = getProps();
-    const isDisabled = p.isDisabled || state.isDisabled();
-
-    return {
-      'aria-label': 'Next month',
-      onClick: () => {
-        if (!isDisabled) {
-          state.focusNextPage();
-        }
-      },
-      disabled: isDisabled,
-      tabIndex: -1,
-    };
-  });
-
-  // Title props
-  const titleProps = createMemo(() => ({
-    id: titleId,
-    'aria-live': 'polite' as const,
-  }));
-
-  // Calendar container props
-  const calendarProps = createMemo(() => {
-    const p = getProps();
-
-    return mergeProps(
-      {
-        id,
-        role: 'group',
-        'aria-labelledby': p['aria-labelledby'] ?? titleId,
-        'aria-label': p['aria-label'],
-        'aria-describedby': p['aria-describedby'],
-      }
-    );
-  });
-
-  return {
-    get calendarProps() {
-      return calendarProps();
-    },
-    get prevButtonProps() {
-      return prevButtonProps();
-    },
-    get nextButtonProps() {
-      return nextButtonProps();
-    },
-    get titleProps() {
-      return titleProps();
-    },
-    get title() {
-      return title();
-    },
-  };
-}

package/src/calendar/createCalendarCell.ts

@@ -1,187 +0,0 @@
-/**
- * createCalendarCell hook for Solidaria
- *
- * Provides the behavior and accessibility implementation for a calendar cell.
- * Based on @react-aria/calendar useCalendarCell
- */
-
-import { createSignal, createMemo, onMount } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import type { CalendarState, CalendarDate, DateValue } from '@proyecto-viviana/solid-stately';
-import { isToday as isTodayUtil, DateFormatter, getLocalTimeZone } from '@internationalized/date';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface AriaCalendarCellProps {
-  /** The date represented by the cell. */
-  date: DateValue;
-  /** Whether the cell is disabled. */
-  isDisabled?: boolean;
-}
-
-export interface CalendarCellAria {
-  /** Props for the cell element (td or gridcell). */
-  cellProps: Record<string, unknown>;
-  /** Props for the button inside the cell. */
-  buttonProps: Record<string, unknown>;
-  /** Whether the cell is selected. */
-  isSelected: boolean;
-  /** Whether the cell is focused. */
-  isFocused: boolean;
-  /** Whether the cell is disabled. */
-  isDisabled: boolean;
-  /** Whether the cell is unavailable (e.g., booked date). */
-  isUnavailable: boolean;
-  /** Whether the cell is outside the visible month. */
-  isOutsideMonth: boolean;
-  /** Whether the cell represents today. */
-  isToday: boolean;
-  /** Whether the cell is pressed. */
-  isPressed: boolean;
-  /** The formatted date string. */
-  formattedDate: string;
-}
-
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
-/**
- * Provides the behavior and accessibility implementation for a calendar cell.
- */
-export function createCalendarCell<T extends CalendarState>(
-  props: MaybeAccessor<AriaCalendarCellProps>,
-  state: T,
-  ref?: () => HTMLElement | null
-): CalendarCellAria {
-  const getProps = () => access(props);
-  const [isPressed, setIsPressed] = createSignal(false);
-  const timeZone = getLocalTimeZone();
-
-  // Get the date from props
-  const date = createMemo(() => getProps().date as CalendarDate);
-
-  // Check states
-  const isSelected = createMemo(() => state.isSelected(date()));
-  const isFocused = createMemo(() => state.isCellFocused(date()));
-  const isDisabled = createMemo(() => {
-    return getProps().isDisabled || state.isCellDisabled(date());
-  });
-  const isUnavailable = createMemo(() => state.isCellUnavailable(date()));
-  const isOutsideMonth = createMemo(() => state.isOutsideVisibleRange(date()));
-  const isToday = createMemo(() => isTodayUtil(date(), timeZone));
-
-  // Format the date for display
-  const formattedDate = createMemo(() => {
-    return date().day.toString();
-  });
-
-  // Handle pointer down - this is where selection happens
-  // Using pointerdown instead of click ensures selection happens immediately
-  // before focus changes can interfere with the event
-  const handlePointerDown = (e: PointerEvent) => {
-    if (!isDisabled() && !isUnavailable()) {
-      setIsPressed(true);
-      // Select the date on pointer down for immediate response
-      // This matches React Aria's behavior of using onPressStart
-      state.selectDate(date());
-      // Prevent default to avoid double-triggering with onClick
-      e.preventDefault();
-    }
-  };
-
-  // Handle click - kept for accessibility (keyboard Enter/Space)
-  const handleClick = () => {
-    // Only select on click if not already selected via pointerdown
-    // This handles keyboard activation (Enter/Space)
-    if (!isDisabled() && !isUnavailable()) {
-      state.selectDate(date());
-    }
-  };
-
-  const handlePointerUp = () => {
-    setIsPressed(false);
-  };
-
-  // Focus the button when it becomes focused in state
-  onMount(() => {
-    const element = ref?.();
-    if (element && isFocused()) {
-      element.focus();
-    }
-  });
-
-  // Cell props (for the td element)
-  const cellProps = createMemo(() => ({
-    role: 'gridcell',
-    'aria-disabled': isDisabled() || undefined,
-    'aria-selected': isSelected() || undefined,
-  }));
-
-  // Button props (for the interactive element inside)
-  const buttonProps = createMemo(() => {
-    const d = date();
-    const formatter = new DateFormatter('en-US', {
-      weekday: 'long',
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
-
-    return {
-      role: 'button',
-      tabIndex: isFocused() ? 0 : -1,
-      'aria-label': formatter.format(d.toDate(timeZone)),
-      'aria-disabled': isDisabled() || undefined,
-      'aria-pressed': isPressed() || undefined,
-      disabled: isDisabled(),
-      onClick: handleClick,
-      onPointerDown: handlePointerDown,
-      onPointerUp: handlePointerUp,
-      onPointerLeave: handlePointerUp,
-      onFocus: () => {
-        // Only update if this cell isn't already the focused date
-        // This prevents infinite loops when focus is programmatically set
-        if (!state.isCellFocused(d)) {
-          state.setFocusedDate(d);
-        }
-        state.setFocused(true);
-      },
-    };
-  });
-
-  return {
-    get cellProps() {
-      return cellProps();
-    },
-    get buttonProps() {
-      return buttonProps();
-    },
-    get isSelected() {
-      return isSelected();
-    },
-    get isFocused() {
-      return isFocused();
-    },
-    get isDisabled() {
-      return isDisabled();
-    },
-    get isUnavailable() {
-      return isUnavailable();
-    },
-    get isOutsideMonth() {
-      return isOutsideMonth();
-    },
-    get isToday() {
-      return isToday();
-    },
-    get isPressed() {
-      return isPressed();
-    },
-    get formattedDate() {
-      return formattedDate();
-    },
-  };
-}

package/src/calendar/createCalendarGrid.ts

@@ -1,140 +0,0 @@
-/**
- * createCalendarGrid hook for Solidaria
- *
- * Provides the behavior and accessibility implementation for a calendar grid.
- * Based on @react-aria/calendar useCalendarGrid
- */
-
-import { createMemo, onMount, onCleanup } from 'solid-js';
-import { type MaybeAccessor } from '../utils/reactivity';
-import type { CalendarState, CalendarDate } from '@proyecto-viviana/solid-stately';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface AriaCalendarGridProps {
-  /** The start date of the grid (defaults to start of focused month). */
-  startDate?: CalendarDate;
-  /** The end date of the grid (defaults to end of focused month). */
-  endDate?: CalendarDate;
-  /** The number of weeks to display. */
-  weekdayStyle?: 'narrow' | 'short' | 'long';
-}
-
-export interface CalendarGridAria {
-  /** Props for the grid element (table or grid role). */
-  gridProps: Record<string, unknown>;
-  /** Props for the header row. */
-  headerProps: Record<string, unknown>;
-  /** Week day labels for the header. */
-  weekDays: string[];
-}
-
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
-/**
- * Provides the behavior and accessibility implementation for a calendar grid.
- */
-export function createCalendarGrid<T extends CalendarState>(
-  _props: MaybeAccessor<AriaCalendarGridProps>,
-  state: T,
-  ref?: () => HTMLElement | null
-): CalendarGridAria {
-  // Week days for headers
-  const weekDays = createMemo(() => state.weekDays());
-
-  // Handle keyboard navigation
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (state.isDisabled()) return;
-
-    switch (e.key) {
-      case 'ArrowLeft':
-        e.preventDefault();
-        state.focusPreviousDay();
-        break;
-      case 'ArrowRight':
-        e.preventDefault();
-        state.focusNextDay();
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        state.focusPreviousWeek();
-        break;
-      case 'ArrowDown':
-        e.preventDefault();
-        state.focusNextWeek();
-        break;
-      case 'PageUp':
-        e.preventDefault();
-        if (e.shiftKey) {
-          state.focusPreviousSection(); // Previous year
-        } else {
-          state.focusPreviousPage(); // Previous month
-        }
-        break;
-      case 'PageDown':
-        e.preventDefault();
-        if (e.shiftKey) {
-          state.focusNextSection(); // Next year
-        } else {
-          state.focusNextPage(); // Next month
-        }
-        break;
-      case 'Home':
-        e.preventDefault();
-        state.focusPageStart();
-        break;
-      case 'End':
-        e.preventDefault();
-        state.focusPageEnd();
-        break;
-      case 'Enter':
-      case ' ':
-        e.preventDefault();
-        state.selectFocusedDate();
-        break;
-    }
-  };
-
-  // Register keyboard listener
-  onMount(() => {
-    const element = ref?.();
-    if (element) {
-      element.addEventListener('keydown', handleKeyDown);
-      onCleanup(() => {
-        element.removeEventListener('keydown', handleKeyDown);
-      });
-    }
-  });
-
-  // Grid props
-  const gridProps = createMemo(() => ({
-    role: 'grid',
-    'aria-readonly': state.isReadOnly() || undefined,
-    'aria-disabled': state.isDisabled() || undefined,
-    tabIndex: state.isFocused() ? 0 : -1,
-    onFocus: () => state.setFocused(true),
-    onBlur: () => state.setFocused(false),
-    onKeyDown: handleKeyDown,
-  }));
-
-  // Header props
-  const headerProps = createMemo(() => ({
-    role: 'row',
-  }));
-
-  return {
-    get gridProps() {
-      return gridProps();
-    },
-    get headerProps() {
-      return headerProps();
-    },
-    get weekDays() {
-      return weekDays();
-    },
-  };
-}