@proyecto-viviana/solidaria 0.1.3 → 0.2.0

package/src/toast/createToastRegion.ts

@@ -1,100 +0,0 @@
-/**
- * createToastRegion hook for Solidaria
- *
- * Provides the accessibility implementation for a ToastRegion component.
- * The region is a landmark that contains all visible toasts.
- *
- * Port of @react-aria/toast useToastRegion.
- */
-
-import { type JSX, createMemo } from 'solid-js';
-import { type ToastState } from '@proyecto-viviana/solid-stately';
-import { mergeProps } from '../utils';
-import { createHover } from '../interactions/createHover';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface AriaToastRegionProps<T> {
-  /** The toast state from createToastState. */
-  state: ToastState<T>;
-  /** An accessible label for the region. */
-  'aria-label'?: string;
-}
-
-export interface ToastRegionAria {
-  /** Props for the toast region container element. */
-  regionProps: JSX.HTMLAttributes<HTMLElement>;
-}
-
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
-/**
- * Provides the accessibility implementation for a ToastRegion component.
- *
- * The region is a landmark (role="region") that contains all visible toasts.
- * It pauses toast timers on hover or focus to give users time to read/interact.
- *
- * @example
- * ```tsx
- * import { createToastRegion } from 'solidaria';
- * import { For, Show } from 'solid-js';
- *
- * function ToastRegion(props) {
- *   let ref;
- *   const { regionProps } = createToastRegion({ state: props.state });
- *
- *   return (
- *     <Show when={props.state.visibleToasts().length > 0}>
- *       <div {...regionProps} ref={ref}>
- *         <For each={props.state.visibleToasts()}>
- *           {(toast) => <Toast toast={toast} state={props.state} />}
- *         </For>
- *       </div>
- *     </Show>
- *   );
- * }
- * ```
- */
-export function createToastRegion<T>(props: AriaToastRegionProps<T>): ToastRegionAria {
-  // Pause timers on hover
-  const { hoverProps } = createHover({
-    onHoverStart: () => {
-      props.state.pauseAll();
-    },
-    onHoverEnd: () => {
-      props.state.resumeAll();
-    },
-  });
-
-  // Pause timers on focus
-  const handleFocus = () => {
-    props.state.pauseAll();
-  };
-
-  const handleBlur = (e: FocusEvent) => {
-    // Only resume if focus moved outside the region
-    const target = e.relatedTarget as HTMLElement | null;
-    const currentTarget = e.currentTarget as HTMLElement;
-    if (!target || !currentTarget.contains(target)) {
-      props.state.resumeAll();
-    }
-  };
-
-  // Region props
-  const regionProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({
-    ...hoverProps,
-    role: 'region' as const,
-    'aria-label': props['aria-label'] ?? 'Notifications',
-    tabIndex: -1,
-    onFocusIn: handleFocus,
-    onFocusOut: handleBlur,
-  }));
-
-  return {
-    get regionProps() { return regionProps(); },
-  };
-}

package/src/toast/index.ts

@@ -1,11 +0,0 @@
-export {
-  createToast,
-  type AriaToastProps,
-  type ToastAria,
-} from './createToast';
-
-export {
-  createToastRegion,
-  type AriaToastRegionProps,
-  type ToastRegionAria,
-} from './createToastRegion';

package/src/toggle/createToggle.ts

@@ -1,223 +0,0 @@
-/**
- * Toggle hook for Solidaria
- *
- * Handles interactions for toggle elements, e.g. Checkboxes and Switches.
- *
- * This is a 1:1 port of @react-aria/toggle's useToggle hook.
- */
-
-import { JSX, Accessor, createEffect } from 'solid-js';
-import { createPress } from '../interactions/createPress';
-import { createFocusable } from '../interactions/createFocusable';
-import { mergeProps } from '../utils/mergeProps';
-import { filterDOMProps } from '../utils/filterDOMProps';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-import { isDevEnv } from '../utils/env';
-import { type ToggleState } from '@proyecto-viviana/solid-stately';
-import { type PressEvent } from '../interactions/PressEvent';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface AriaToggleProps {
-  /** Whether the element should be selected (controlled). */
-  isSelected?: boolean;
-  /** Whether the element should be selected by default (uncontrolled). */
-  defaultSelected?: boolean;
-  /** Handler that is called when the element's selection state changes. */
-  onChange?: (isSelected: boolean) => void;
-  /** The value of the input element, used when submitting an HTML form. */
-  value?: string;
-  /** The name of the input element, used when submitting an HTML form. */
-  name?: string;
-  /** The form to associate the input with. */
-  form?: string;
-  /** Whether the element is disabled. */
-  isDisabled?: boolean;
-  /** Whether the element is read only. */
-  isReadOnly?: boolean;
-  /** Whether the element is required. */
-  isRequired?: boolean;
-  /** Whether the element is invalid. */
-  isInvalid?: boolean;
-  /** The element's children. */
-  children?: JSX.Element;
-  /** 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 an error message for the object. */
-  'aria-errormessage'?: string;
-  /** Identifies the element (or elements) whose contents or presence are controlled by the current element. */
-  'aria-controls'?: string;
-  /** The element's unique identifier. */
-  id?: string;
-  /** Handler that is called when the press is released over the target. */
-  onPress?: (e: PressEvent) => void;
-  /** Handler that is called when a press interaction starts. */
-  onPressStart?: (e: PressEvent) => void;
-  /** Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. */
-  onPressEnd?: (e: PressEvent) => void;
-  /** Handler that is called when the press state changes. */
-  onPressChange?: (isPressed: boolean) => void;
-  /** Handler that is called when a press is released over the target, regardless of whether it started on the target or not. */
-  onPressUp?: (e: PressEvent) => void;
-  /** Handler that is called when the element is clicked. */
-  onClick?: (e: MouseEvent) => void;
-  /** Handler that is called when the element receives focus. */
-  onFocus?: (e: FocusEvent) => void;
-  /** Handler that is called when the element loses focus. */
-  onBlur?: (e: FocusEvent) => void;
-  /** Handler that is called when the element's focus status changes. */
-  onFocusChange?: (isFocused: boolean) => void;
-  /** Handler that is called when a key is pressed. */
-  onKeyDown?: (e: KeyboardEvent) => void;
-  /** Handler that is called when a key is released. */
-  onKeyUp?: (e: KeyboardEvent) => void;
-  /** Whether to exclude the element from the tab order. */
-  excludeFromTabOrder?: boolean;
-  /** Whether to autofocus the element. */
-  autoFocus?: boolean;
-}
-
-export interface ToggleAria {
-  /** Props to be spread on the label element. */
-  labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
-  /** Props to be spread on the input element. */
-  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-  /** Whether the toggle is selected. */
-  isSelected: Accessor<boolean>;
-  /** Whether the toggle is in a pressed state. */
-  isPressed: Accessor<boolean>;
-  /** Whether the toggle is disabled. */
-  isDisabled: boolean;
-  /** Whether the toggle is read only. */
-  isReadOnly: boolean;
-  /** Whether the toggle is invalid. */
-  isInvalid: boolean;
-}
-
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
-/**
- * Handles interactions for toggle elements, e.g. Checkboxes and Switches.
- */
-export function createToggle(
-  props: MaybeAccessor<AriaToggleProps>,
-  state: ToggleState,
-  ref: () => HTMLInputElement | null
-): ToggleAria {
-  const getProps = () => access(props);
-
-  const isDisabled = () => getProps().isDisabled ?? false;
-  const isReadOnly = () => getProps().isReadOnly ?? false;
-  const isInvalid = () => {
-    return getProps().isInvalid ?? false;
-  };
-
-  // Handle press state for keyboard interactions and cases where labelProps is not used.
-  const { pressProps, isPressed } = createPress({
-    get onPressStart() { return getProps().onPressStart; },
-    get onPressEnd() { return getProps().onPressEnd; },
-    get onPressChange() { return getProps().onPressChange; },
-    get onPress() { return getProps().onPress; },
-    get onPressUp() { return getProps().onPressUp; },
-    get isDisabled() { return isDisabled(); },
-  });
-
-  // Handle press state on the label.
-  const { pressProps: labelPressProps, isPressed: isLabelPressed } = createPress({
-    get onPressStart() { return getProps().onPressStart; },
-    get onPressEnd() { return getProps().onPressEnd; },
-    get onPressChange() { return getProps().onPressChange; },
-    get onPressUp() { return getProps().onPressUp; },
-    onPress(e: PressEvent) {
-      getProps().onPress?.(e);
-      state.toggle();
-      ref()?.focus();
-    },
-    get isDisabled() { return isDisabled() || isReadOnly(); },
-  });
-
-  // Handle focusable - extract the relevant props for createFocusable
-  const { focusableProps } = createFocusable({
-    get isDisabled() { return isDisabled(); },
-    get autoFocus() { return getProps().autoFocus; },
-    get onFocus() { return getProps().onFocus; },
-    get onBlur() { return getProps().onBlur; },
-    get onFocusChange() { return getProps().onFocusChange; },
-    get onKeyDown() { return getProps().onKeyDown; },
-    get onKeyUp() { return getProps().onKeyUp; },
-    get excludeFromTabOrder() { return getProps().excludeFromTabOrder; },
-  }, ref as unknown as (el: HTMLElement) => void);
-
-  // Combine press and focusable props for input
-  const interactions = mergeProps(pressProps, focusableProps);
-
-  // Filter DOM props
-  const domProps = () => filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });
-
-  // Handle input change
-  const onChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {
-    // Since we spread props on label, onChange will end up there as well as in here.
-    // So we have to stop propagation at the lowest level that we care about
-    e.stopPropagation();
-
-    // Don't update state if readonly
-    if (isReadOnly()) {
-      // Reset the checkbox to its previous state since the browser already toggled it
-      e.currentTarget.checked = state.isSelected();
-      return;
-    }
-
-    state.setSelected(e.currentTarget.checked);
-  };
-
-  // Warn if no accessible label
-  createEffect(() => {
-    const p = getProps();
-    const hasChildren = p.children != null;
-    const hasAriaLabel = p['aria-label'] != null || p['aria-labelledby'] != null;
-    if (!hasChildren && !hasAriaLabel && isDevEnv()) {
-      console.warn('If you do not provide children, you must specify an aria-label for accessibility');
-    }
-  });
-
-  // Combined pressed state
-  const combinedIsPressed: Accessor<boolean> = () => isPressed() || isLabelPressed();
-
-  return {
-    labelProps: mergeProps(labelPressProps, {
-      onClick: (e: MouseEvent) => e.preventDefault(),
-    }),
-    get inputProps() {
-      const p = getProps();
-      return mergeProps(domProps(), {
-        'aria-invalid': isInvalid() || undefined,
-        'aria-errormessage': p['aria-errormessage'],
-        'aria-controls': p['aria-controls'],
-        'aria-readonly': isReadOnly() || undefined,
-        onChange,
-        disabled: isDisabled(),
-        ...(p.value == null ? {} : { value: p.value }),
-        name: p.name,
-        form: p.form,
-        type: 'checkbox' as const,
-        ...interactions,
-        // Stop click propagation to prevent labelProps.onClick from calling preventDefault
-        // which would prevent the checkbox from toggling in JSDOM/testing-library environments
-        onClick: (e: MouseEvent) => e.stopPropagation(),
-      }) as JSX.InputHTMLAttributes<HTMLInputElement>;
-    },
-    isSelected: state.isSelected,
-    isPressed: combinedIsPressed,
-    isDisabled: isDisabled(),
-    isReadOnly: isReadOnly(),
-    isInvalid: isInvalid(),
-  };
-}

package/src/toggle/createToggleState.ts

@@ -1,94 +0,0 @@
-/**
- * Toggle state for Solidaria
- *
- * Provides state management for toggle components like checkboxes and switches.
- *
- * This is a 1:1 port of @react-stately/toggle's useToggleState.
- */
-
-import { createSignal, Accessor } from 'solid-js';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface ToggleStateOptions {
-  /** Whether the element should be selected (controlled). */
-  isSelected?: boolean;
-  /** Whether the element should be selected by default (uncontrolled). */
-  defaultSelected?: boolean;
-  /** Handler that is called when the element's selection state changes. */
-  onChange?: (isSelected: boolean) => void;
-  /** Whether the element is read only. */
-  isReadOnly?: boolean;
-}
-
-export interface ToggleState {
-  /** Whether the toggle is selected. */
-  readonly isSelected: Accessor<boolean>;
-  /** Whether the toggle is selected by default. */
-  readonly defaultSelected: boolean;
-  /** Updates selection state. */
-  setSelected(isSelected: boolean): void;
-  /** Toggle the selection state. */
-  toggle(): void;
-}
-
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
-/**
- * Provides state management for toggle components like checkboxes and switches.
- */
-export function createToggleState(props: MaybeAccessor<ToggleStateOptions> = {}): ToggleState {
-  const getProps = () => access(props);
-
-  // Get initial values
-  const initialProps = getProps();
-  const initialSelected = initialProps.isSelected ?? initialProps.defaultSelected ?? false;
-
-  // Create internal signal for uncontrolled mode
-  const [internalSelected, setInternalSelected] = createSignal(initialSelected);
-
-  // Determine if controlled
-  const isControlled = () => getProps().isSelected !== undefined;
-
-  // Get current selection state
-  const isSelected: Accessor<boolean> = () => {
-    const p = getProps();
-    return isControlled() ? (p.isSelected ?? false) : internalSelected();
-  };
-
-  // Update selection state
-  function setSelected(value: boolean): void {
-    const p = getProps();
-    if (p.isReadOnly) {
-      return;
-    }
-
-    if (!isControlled()) {
-      setInternalSelected(value);
-    }
-
-    p.onChange?.(value);
-  }
-
-  // Toggle selection state
-  function toggle(): void {
-    const p = getProps();
-    if (p.isReadOnly) {
-      return;
-    }
-
-    setSelected(!isSelected());
-  }
-
-  return {
-    isSelected,
-    defaultSelected: initialProps.defaultSelected ?? initialSelected,
-    setSelected,
-    toggle,
-  };
-}

package/src/toggle/index.ts

@@ -1,7 +0,0 @@
-// Re-export state from solid-stately
-export { createToggleState } from '@proyecto-viviana/solid-stately';
-export type { ToggleStateOptions, ToggleState } from '@proyecto-viviana/solid-stately';
-
-// ARIA hook (solidaria-specific)
-export { createToggle } from './createToggle';
-export type { AriaToggleProps, ToggleAria } from './createToggle';