@proyecto-viviana/solidaria 0.1.3 → 0.2.0

package/src/calendar/createRangeCalendar.ts

@@ -1,136 +0,0 @@
-/**
- * createRangeCalendar hook for Solidaria
- *
- * Provides the behavior and accessibility implementation for a range calendar component.
- * Based on @react-aria/calendar useRangeCalendar
- */
-
-import { createMemo } from 'solid-js';
-import { createId } from '../ssr';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import { mergeProps } from '../utils/mergeProps';
-import type { RangeCalendarState } from '@proyecto-viviana/solid-stately';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface AriaRangeCalendarProps {
-  /** 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;
-}
-
-export interface RangeCalendarAria {
-  /** 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 range calendar component.
- */
-export function createRangeCalendar<T extends RangeCalendarState>(
-  props: MaybeAccessor<AriaRangeCalendarProps>,
-  state: T
-): RangeCalendarAria {
-  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/createRangeCalendarCell.ts

@@ -1,186 +0,0 @@
-/**
- * createRangeCalendarCell hook for Solidaria
- *
- * Provides the behavior and accessibility implementation for a range calendar cell.
- * Based on @react-aria/calendar useCalendarCell (with range support)
- */
-
-import { createSignal, createMemo } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import type { RangeCalendarState, CalendarDate, DateValue } from '@proyecto-viviana/solid-stately';
-import { isToday as isTodayUtil, DateFormatter, getLocalTimeZone } from '@internationalized/date';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface AriaRangeCalendarCellProps {
-  /** The date represented by the cell. */
-  date: DateValue;
-  /** Whether the cell is disabled. */
-  isDisabled?: boolean;
-}
-
-export interface RangeCalendarCellAria {
-  /** 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 within the selected range. */
-  isSelected: boolean;
-  /** Whether the cell is the start of the selection. */
-  isSelectionStart: boolean;
-  /** Whether the cell is the end of the selection. */
-  isSelectionEnd: 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 range calendar cell.
- */
-export function createRangeCalendarCell<T extends RangeCalendarState>(
-  props: MaybeAccessor<AriaRangeCalendarCellProps>,
-  state: T,
-  _ref?: () => HTMLElement | null
-): RangeCalendarCellAria {
-  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 isSelectionStart = createMemo(() => state.isSelectionStart(date()));
-  const isSelectionEnd = createMemo(() => state.isSelectionEnd(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 click
-  const handleClick = () => {
-    if (!isDisabled() && !isUnavailable()) {
-      state.selectDate(date());
-    }
-  };
-
-  // Handle pointer events for pressed state
-  const handlePointerDown = () => {
-    if (!isDisabled() && !isUnavailable()) {
-      setIsPressed(true);
-    }
-  };
-
-  const handlePointerUp = () => {
-    setIsPressed(false);
-  };
-
-  // Handle hover during range selection
-  const handlePointerEnter = () => {
-    if (state.isDragging() && !isDisabled() && !isUnavailable()) {
-      state.setFocusedDate(date());
-    }
-  };
-
-  // 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,
-      onPointerEnter: handlePointerEnter,
-      onFocus: () => {
-        state.setFocusedDate(d);
-        state.setFocused(true);
-      },
-    };
-  });
-
-  return {
-    get cellProps() {
-      return cellProps();
-    },
-    get buttonProps() {
-      return buttonProps();
-    },
-    get isSelected() {
-      return isSelected();
-    },
-    get isSelectionStart() {
-      return isSelectionStart();
-    },
-    get isSelectionEnd() {
-      return isSelectionEnd();
-    },
-    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/index.ts

@@ -1,34 +0,0 @@
-// Calendar
-export {
-  createCalendar,
-  type AriaCalendarProps,
-  type CalendarAria,
-} from './createCalendar';
-
-// Calendar Grid
-export {
-  createCalendarGrid,
-  type AriaCalendarGridProps,
-  type CalendarGridAria,
-} from './createCalendarGrid';
-
-// Calendar Cell
-export {
-  createCalendarCell,
-  type AriaCalendarCellProps,
-  type CalendarCellAria,
-} from './createCalendarCell';
-
-// Range Calendar
-export {
-  createRangeCalendar,
-  type AriaRangeCalendarProps,
-  type RangeCalendarAria,
-} from './createRangeCalendar';
-
-// Range Calendar Cell
-export {
-  createRangeCalendarCell,
-  type AriaRangeCalendarCellProps,
-  type RangeCalendarCellAria,
-} from './createRangeCalendarCell';

package/src/checkbox/createCheckbox.ts

@@ -1,135 +0,0 @@
-/**
- * Checkbox hook for Solidaria
- *
- * Provides the behavior and accessibility implementation for a checkbox component.
- * Checkboxes allow users to select multiple items from a list of individual items,
- * or to mark one individual item as selected.
- *
- * This is a 1:1 port of @react-aria/checkbox's useCheckbox hook.
- */
-
-import { JSX, Accessor, createEffect } from 'solid-js';
-import { createToggle, type AriaToggleProps } from '../toggle';
-import { type ToggleState } from '@proyecto-viviana/solid-stately';
-import { createPress } from '../interactions/createPress';
-import { mergeProps } from '../utils/mergeProps';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface AriaCheckboxProps extends AriaToggleProps {
-  /**
-   * Indeterminism is presentational only.
-   * The indeterminate visual representation remains regardless of user interaction.
-   */
-  isIndeterminate?: boolean;
-  /**
-   * Whether the checkbox is required.
-   */
-  isRequired?: boolean;
-  /**
-   * The validation behavior for the checkbox.
-   * @default 'aria'
-   */
-  validationBehavior?: 'aria' | 'native';
-}
-
-export interface CheckboxAria {
-  /** Props for the label wrapper element. */
-  labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
-  /** Props for the input element. */
-  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-  /** Whether the checkbox is selected. */
-  isSelected: Accessor<boolean>;
-  /** Whether the checkbox is in a pressed state. */
-  isPressed: Accessor<boolean>;
-  /** Whether the checkbox is disabled. */
-  isDisabled: boolean;
-  /** Whether the checkbox is read only. */
-  isReadOnly: boolean;
-  /** Whether the checkbox is invalid. */
-  isInvalid: boolean;
-}
-
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
-/**
- * Provides the behavior and accessibility implementation for a checkbox component.
- * Checkboxes allow users to select multiple items from a list of individual items,
- * or to mark one individual item as selected.
- *
- * @param props - Props for the checkbox.
- * @param state - State for the checkbox, as returned by `createToggleState`.
- * @param inputRef - A ref accessor for the HTML input element.
- */
-export function createCheckbox(
-  props: MaybeAccessor<AriaCheckboxProps>,
-  state: ToggleState,
-  inputRef: () => HTMLInputElement | null
-): CheckboxAria {
-  const getProps = () => access(props);
-
-  // Get toggle aria props
-  const toggleResult = createToggle(props, state, inputRef);
-  const {
-    labelProps: baseLabelProps,
-    isSelected,
-    isPressed,
-    isDisabled,
-    isReadOnly,
-    isInvalid,
-  } = toggleResult;
-
-  // Handle indeterminate state
-  createEffect(() => {
-    const input = inputRef();
-    const isIndeterminate = getProps().isIndeterminate;
-    if (input) {
-      // indeterminate is a property, but it can only be set via javascript
-      // https://css-tricks.com/indeterminate-checkboxes/
-      input.indeterminate = !!isIndeterminate;
-    }
-  });
-
-  // Reset validation state on label press for checkbox with a hidden input.
-  const { pressProps } = createPress({
-    get isDisabled() {
-      return isDisabled || isReadOnly;
-    },
-    onPress() {
-      // Validation state reset would be handled here if we had form validation
-      // For now, this is a no-op placeholder matching React-Aria's pattern
-    },
-  });
-
-  return {
-    labelProps: mergeProps(
-      baseLabelProps as unknown as Record<string, unknown>,
-      pressProps as unknown as Record<string, unknown>,
-      {
-        // Prevent label from being focused when mouse down on it.
-        // Note, this does not prevent the input from being focused in the `click` event.
-        onMouseDown: (e: MouseEvent) => e.preventDefault(),
-      } as Record<string, unknown>
-    ) as JSX.LabelHTMLAttributes<HTMLLabelElement>,
-    get inputProps() {
-      const p = getProps();
-      const { isRequired, validationBehavior = 'aria' } = p;
-
-      return mergeProps(toggleResult.inputProps, {
-        checked: isSelected(),
-        'aria-required': (isRequired && validationBehavior === 'aria') || undefined,
-        required: isRequired && validationBehavior === 'native',
-      }) as JSX.InputHTMLAttributes<HTMLInputElement>;
-    },
-    isSelected,
-    isPressed,
-    isDisabled,
-    isReadOnly,
-    isInvalid,
-  };
-}

package/src/checkbox/createCheckboxGroup.ts

@@ -1,137 +0,0 @@
-/**
- * Checkbox group hook for Solidaria
- *
- * Provides the behavior and accessibility implementation for a checkbox group component.
- * Checkbox groups allow users to select multiple items from a list of options.
- *
- * This is a 1:1 port of @react-aria/checkbox's useCheckboxGroup hook.
- */
-
-import { JSX } from 'solid-js';
-import { createField } from '../label';
-import { createFocusWithin } from '../interactions/createFocusWithin';
-import { filterDOMProps } from '../utils/filterDOMProps';
-import { mergeProps } from '../utils/mergeProps';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-import { type CheckboxGroupState, type CheckboxGroupProps } from '@proyecto-viviana/solid-stately';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface AriaCheckboxGroupProps extends CheckboxGroupProps {
-  /** Defines a string value that labels the current element. */
-  'aria-label'?: string;
-  /** Identifies the element (or elements) that labels the current element. */
-  'aria-labelledby'?: string;
-  /** Identifies the element (or elements) that describes the object. */
-  'aria-describedby'?: string;
-  /** Identifies the element (or elements) that provide a detailed, extended description for the object. */
-  'aria-details'?: string;
-  /** A description for the field. Provides a hint such as specific requirements for what to choose. */
-  description?: JSX.Element;
-  /** An error message for the field. */
-  errorMessage?: JSX.Element;
-}
-
-export interface CheckboxGroupAria {
-  /** Props for the checkbox group wrapper element. */
-  groupProps: JSX.HTMLAttributes<HTMLElement>;
-  /** Props for the checkbox group's visible label (if any). */
-  labelProps: JSX.HTMLAttributes<HTMLElement>;
-  /** Props for the checkbox group description element, if any. */
-  descriptionProps: JSX.HTMLAttributes<HTMLElement>;
-  /** Props for the checkbox group error message element, if any. */
-  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;
-  /** Whether the checkbox group is invalid. */
-  isInvalid: boolean;
-}
-
-// WeakMap to share data between checkbox group and checkbox group items
-export const checkboxGroupData = new WeakMap<
-  CheckboxGroupState,
-  {
-    name?: string;
-    form?: string;
-    descriptionId?: string;
-    errorMessageId?: string;
-    validationBehavior: 'aria' | 'native';
-  }
->();
-
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
-/**
- * Provides the behavior and accessibility implementation for a checkbox group component.
- * Checkbox groups allow users to select multiple items from a list of options.
- *
- * @param props - Props for the checkbox group.
- * @param state - State for the checkbox group, as returned by `createCheckboxGroupState`.
- */
-export function createCheckboxGroup(
-  props: MaybeAccessor<AriaCheckboxGroupProps>,
-  state: CheckboxGroupState
-): CheckboxGroupAria {
-  const getProps = () => access(props);
-
-  const isInvalid = () => state.isInvalid;
-
-  // Use field for label association
-  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = createField({
-    get label() { return getProps().label; },
-    get 'aria-label'() { return getProps()['aria-label']; },
-    get 'aria-labelledby'() { return getProps()['aria-labelledby']; },
-    get 'aria-describedby'() { return getProps()['aria-describedby']; },
-    get 'aria-details'() { return getProps()['aria-details']; },
-    get description() { return getProps().description; },
-    get errorMessage() { return getProps().errorMessage ?? (isInvalid() ? 'Invalid selection' : undefined); },
-    get isInvalid() { return isInvalid(); },
-    // Checkbox group is not an HTML input element so it
-    // shouldn't be labeled by a <label> element.
-    labelElementType: 'span',
-  });
-
-  // Store data for checkbox group items
-  checkboxGroupData.set(state, {
-    name: getProps().name,
-    form: getProps().form,
-    descriptionId: descriptionProps.id,
-    errorMessageId: errorMessageProps.id,
-    validationBehavior: 'aria',
-  });
-
-  // Filter DOM props
-  const domProps = () => filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });
-
-  // Handle focus within
-  const { focusWithinProps } = createFocusWithin({
-    get onBlurWithin() { return getProps().onBlur; },
-    get onFocusWithin() { return getProps().onFocus; },
-    get onFocusWithinChange() { return getProps().onFocusChange; },
-  });
-
-  return {
-    get groupProps() {
-      return mergeProps(domProps(), {
-        role: 'group',
-        'aria-disabled': state.isDisabled || undefined,
-        ...fieldProps,
-        ...focusWithinProps,
-      }) as JSX.HTMLAttributes<HTMLElement>;
-    },
-    get labelProps() {
-      return labelProps as JSX.HTMLAttributes<HTMLElement>;
-    },
-    get descriptionProps() {
-      return descriptionProps;
-    },
-    get errorMessageProps() {
-      return errorMessageProps;
-    },
-    get isInvalid() {
-      return isInvalid();
-    },
-  };
-}