@proyecto-viviana/solidaria 0.1.3 → 0.2.0

package/src/autocomplete/createAutocomplete.ts

@@ -1,341 +0,0 @@
-/**
- * createAutocomplete - Accessibility hook for autocomplete components
- *
- * Provides keyboard navigation, virtual focus via aria-activedescendant,
- * and filtering capabilities for autocomplete inputs.
- *
- * Based on @react-aria/autocomplete useAutocomplete.
- */
-
-import {
-  createSignal,
-  createEffect,
-  onCleanup,
-  type Accessor,
-} from 'solid-js'
-import { createId, getOwnerDocument } from '../ssr'
-import { type AutocompleteState } from '@proyecto-viviana/solid-stately'
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface CollectionOptions {
-  /** The id of the collection element. */
-  id?: string
-  /** Accessible label for the collection. */
-  'aria-label'?: string
-  /** Whether the collection items should use virtual focus instead of being focused directly. */
-  shouldUseVirtualFocus: boolean
-  /** Whether typeahead is disabled. */
-  disallowTypeAhead: boolean
-}
-
-export interface AutocompleteInputProps {
-  /** Current input value. */
-  value: Accessor<string>
-  /** Handler for input value changes. */
-  onChange: (value: string) => void
-  /** Handler for key events. */
-  onKeyDown: (e: KeyboardEvent) => void
-  /** Handler for focus events. */
-  onFocus: (e: FocusEvent) => void
-  /** Handler for blur events. */
-  onBlur: (e: FocusEvent) => void
-  /** The id of the currently focused item for aria-activedescendant. */
-  'aria-activedescendant': Accessor<string | undefined>
-  /** The id of the controlled collection. */
-  'aria-controls': string
-  /** Autocomplete type. */
-  'aria-autocomplete': 'list' | 'none' | 'inline' | 'both'
-  /** Enter key hint for mobile keyboards. */
-  enterKeyHint: 'go'
-  /** Disable autocorrect. */
-  autoCorrect: 'off'
-  /** Disable spell check. */
-  spellCheck: 'false'
-  /** Disable browser autocomplete. */
-  autoComplete: 'off'
-}
-
-export interface AriaAutocompleteOptions<T = unknown> {
-  /** Ref accessor for the input element. */
-  inputRef: Accessor<HTMLInputElement | undefined>
-  /** Ref accessor for the collection element. */
-  collectionRef: Accessor<HTMLElement | undefined>
-  /**
-   * An optional filter function used to determine if an option should be included.
-   * @param textValue - The text value of the item
-   * @param inputValue - The current input value
-   */
-  filter?: (textValue: string, inputValue: string) => boolean
-  /**
-   * Whether to focus the first item after filtering.
-   * @default false
-   */
-  disableAutoFocusFirst?: boolean
-  /**
-   * Whether to disable virtual focus (aria-activedescendant).
-   * @default false
-   */
-  disableVirtualFocus?: boolean
-}
-
-export interface AutocompleteAria<T = unknown> {
-  /** Props for the autocomplete input element. */
-  inputProps: AutocompleteInputProps
-  /** Props for the collection (ListBox/Menu). */
-  collectionProps: CollectionOptions
-  /** A filter function that returns if the item should be shown. */
-  filter?: (textValue: string) => boolean
-}
-
-// ============================================
-// CONSTANTS
-// ============================================
-
-// Custom event names for collection communication
-export const AUTOCOMPLETE_FOCUS_EVENT = 'autocomplete:focus'
-export const AUTOCOMPLETE_CLEAR_FOCUS_EVENT = 'autocomplete:clearfocus'
-
-// ============================================
-// CREATE AUTOCOMPLETE HOOK
-// ============================================
-
-/**
- * Provides the behavior and accessibility implementation for an autocomplete component.
- * An autocomplete combines a text input with a collection, allowing users to filter
- * the collection's contents to match a query.
- *
- * @example
- * ```tsx
- * const state = createAutocompleteState({ defaultInputValue: '' });
- * let inputRef, collectionRef;
- *
- * const { inputProps, collectionProps, filter } = createAutocomplete({
- *   inputRef: () => inputRef,
- *   collectionRef: () => collectionRef,
- *   filter: (textValue, inputValue) =>
- *     textValue.toLowerCase().includes(inputValue.toLowerCase()),
- * }, state);
- *
- * return (
- *   <div>
- *     <input ref={inputRef} {...inputProps} />
- *     <ul ref={collectionRef} {...collectionProps}>
- *       {items.filter(item => filter?.(item.name) ?? true).map(item => (
- *         <li key={item.id}>{item.name}</li>
- *       ))}
- *     </ul>
- *   </div>
- * );
- * ```
- */
-export function createAutocomplete<T = unknown>(
-  props: AriaAutocompleteOptions<T>,
-  state: AutocompleteState
-): AutocompleteAria<T> {
-  const {
-    inputRef,
-    collectionRef,
-    filter,
-    disableAutoFocusFirst = false,
-    disableVirtualFocus = false,
-  } = props
-
-  const collectionId = createId()
-  const [shouldUseVirtualFocus] = createSignal(!disableVirtualFocus)
-  let lastInputType = ''
-
-  // Track the input type for determining focus behavior
-  const handleInput = (e: Event) => {
-    const inputEvent = e as InputEvent
-    lastInputType = inputEvent.inputType || ''
-  }
-
-  // Set up input event listener
-  createEffect(() => {
-    const input = inputRef()
-    if (input) {
-      input.addEventListener('input', handleInput)
-      onCleanup(() => {
-        input.removeEventListener('input', handleInput)
-      })
-    }
-  })
-
-  // Focus first item in collection
-  const focusFirstItem = () => {
-    const collection = collectionRef()
-    if (collection) {
-      collection.dispatchEvent(
-        new CustomEvent(AUTOCOMPLETE_FOCUS_EVENT, {
-          cancelable: true,
-          bubbles: true,
-          detail: { focusStrategy: 'first' },
-        })
-      )
-    }
-  }
-
-  // Clear virtual focus
-  const clearVirtualFocus = (clearFocusKey = false) => {
-    state.setFocusedNodeId(null)
-    const collection = collectionRef()
-    if (collection) {
-      collection.dispatchEvent(
-        new CustomEvent(AUTOCOMPLETE_CLEAR_FOCUS_EVENT, {
-          cancelable: true,
-          bubbles: true,
-          detail: { clearFocusKey },
-        })
-      )
-    }
-  }
-
-  // Handle input value changes
-  const onChange = (value: string) => {
-    // Focus first item when typing forward, clear when backspacing/pasting
-    if (lastInputType === 'insertText' && !disableAutoFocusFirst) {
-      focusFirstItem()
-    } else if (
-      lastInputType &&
-      (lastInputType.includes('insert') ||
-        lastInputType.includes('delete') ||
-        lastInputType.includes('history'))
-    ) {
-      clearVirtualFocus(true)
-    }
-
-    state.setInputValue(value)
-  }
-
-  // Handle keyboard navigation
-  const onKeyDown = (e: KeyboardEvent) => {
-    if ((e as any).isComposing) {
-      return
-    }
-
-    const focusedNodeId = state.focusedNodeId()
-    const collection = collectionRef()
-
-    switch (e.key) {
-      case 'Escape':
-        // Let the input handle Escape (e.g., clear value)
-        if (e.defaultPrevented) {
-          return
-        }
-        break
-
-      case ' ':
-        // Space shouldn't trigger item action
-        return
-
-      case 'Tab':
-        // Let Tab propagate normally for focus management
-        return
-
-      case 'ArrowUp':
-      case 'ArrowDown':
-      case 'Home':
-      case 'End':
-      case 'PageUp':
-      case 'PageDown': {
-        // Prevent cursor movement in input
-        e.preventDefault()
-
-        // Dispatch focus event to collection
-        if (collection) {
-          collection.dispatchEvent(
-            new CustomEvent(AUTOCOMPLETE_FOCUS_EVENT, {
-              cancelable: true,
-              bubbles: true,
-            })
-          )
-        }
-        break
-      }
-
-      case 'ArrowLeft':
-      case 'ArrowRight':
-        // Clear activedescendant so screen reader announces cursor movement
-        clearVirtualFocus()
-        return
-
-      case 'Enter':
-        // Trigger click on focused item
-        if (focusedNodeId) {
-          const item = document.getElementById(focusedNodeId)
-          if (item) {
-            item.click()
-            e.preventDefault()
-          }
-        }
-        return
-    }
-
-    // Forward keyboard events to collection/focused item
-    if (!e.defaultPrevented && collection) {
-      e.stopPropagation()
-
-      if (focusedNodeId) {
-        const item = document.getElementById(focusedNodeId)
-        if (item) {
-          item.dispatchEvent(new KeyboardEvent(e.type, e))
-        }
-      } else {
-        collection.dispatchEvent(new KeyboardEvent(e.type, e))
-      }
-    }
-  }
-
-  // Handle focus events
-  const onFocus = (e: FocusEvent) => {
-    if (!e.isTrusted) return
-
-    // Restore virtual focus when refocusing input
-    const focusedNodeId = state.focusedNodeId()
-    if (focusedNodeId) {
-      const item = document.getElementById(focusedNodeId)
-      if (item) {
-        // Item still exists, keep focus on it
-      }
-    }
-  }
-
-  const onBlur = (e: FocusEvent) => {
-    if (!e.isTrusted) return
-    // Virtual focus blur handling would go here
-  }
-
-  // Create filter function
-  const filterFn = filter
-    ? (textValue: string) => filter(textValue, state.inputValue())
-    : undefined
-
-  return {
-    inputProps: {
-      value: state.inputValue,
-      onChange,
-      onKeyDown,
-      onFocus,
-      onBlur,
-      get 'aria-activedescendant'() {
-        return () => (shouldUseVirtualFocus() ? state.focusedNodeId() ?? undefined : undefined)
-      },
-      'aria-controls': collectionId,
-      'aria-autocomplete': 'list',
-      enterKeyHint: 'go',
-      autoCorrect: 'off',
-      spellCheck: 'false',
-      autoComplete: 'off',
-    },
-    collectionProps: {
-      id: collectionId,
-      'aria-label': 'Suggestions',
-      shouldUseVirtualFocus: shouldUseVirtualFocus(),
-      disallowTypeAhead: shouldUseVirtualFocus(),
-    },
-    filter: filterFn,
-  }
-}

package/src/autocomplete/index.ts

@@ -1,9 +0,0 @@
-export {
-  createAutocomplete,
-  AUTOCOMPLETE_FOCUS_EVENT,
-  AUTOCOMPLETE_CLEAR_FOCUS_EVENT,
-  type AriaAutocompleteOptions,
-  type AutocompleteAria,
-  type AutocompleteInputProps,
-  type CollectionOptions,
-} from './createAutocomplete'

package/src/breadcrumbs/createBreadcrumbs.ts

@@ -1,196 +0,0 @@
-/**
- * Breadcrumbs hooks for Solidaria
- *
- * Provides accessibility implementation for breadcrumb navigation.
- * Port of @react-aria/breadcrumbs.
- */
-
-import { createLink, type AriaLinkProps, type LinkAria } from '../link';
-import { filterDOMProps } from '../utils/filterDOMProps';
-import { mergeProps } from '../utils/mergeProps';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface AriaBreadcrumbsProps {
-  /** Provides a label for the breadcrumbs navigation. */
-  'aria-label'?: string;
-  /** Identifies the element (or elements) that labels the breadcrumbs. */
-  'aria-labelledby'?: string;
-  /** Identifies the element (or elements) that describes the breadcrumbs. */
-  'aria-describedby'?: string;
-  /** Whether the breadcrumbs are disabled. */
-  isDisabled?: boolean;
-}
-
-export interface BreadcrumbsAria {
-  /** Props for the breadcrumbs nav element. */
-  navProps: Record<string, unknown>;
-}
-
-export interface AriaBreadcrumbItemProps extends Omit<AriaLinkProps, 'aria-current'> {
-  /** Whether this is the current/last item in the breadcrumb trail. */
-  isCurrent?: boolean;
-  /** The type of current location for aria-current. @default 'page' */
-  'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | boolean;
-  /** The HTML element type. @default 'a' */
-  elementType?: string;
-}
-
-export interface BreadcrumbItemAria extends LinkAria {
-  /** Props for the breadcrumb item element. */
-  itemProps: Record<string, unknown>;
-}
-
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
-/**
- * Provides accessibility implementation for the breadcrumbs navigation container.
- */
-export function createBreadcrumbs(
-  props: MaybeAccessor<AriaBreadcrumbsProps> = {}
-): BreadcrumbsAria {
-  const getProps = () => access(props);
-
-  const getNavProps = (): Record<string, unknown> => {
-    const p = getProps();
-
-    // Default aria-label to "Breadcrumbs" if not provided
-    const ariaLabel = p['aria-label'] ?? 'Breadcrumbs';
-
-    return mergeProps(
-      filterDOMProps(p as Record<string, unknown>, { labelable: true }),
-      {
-        'aria-label': ariaLabel,
-      }
-    );
-  };
-
-  return {
-    get navProps() {
-      return getNavProps();
-    },
-  };
-}
-
-/**
- * Provides accessibility implementation for an individual breadcrumb item.
- */
-export function createBreadcrumbItem(
-  props: MaybeAccessor<AriaBreadcrumbItemProps> = {}
-): BreadcrumbItemAria {
-  const getProps = () => access(props);
-
-  const isCurrent = () => getProps().isCurrent ?? false;
-  const isDisabled = () => getProps().isDisabled ?? false;
-  const elementType = () => getProps().elementType ?? 'a';
-
-  // Check if element is a heading
-  const isHeading = () => /^h[1-6]$/.test(elementType());
-
-  // Use createLink for base link behavior
-  // Current items are treated as disabled (can't navigate to current page)
-  const { linkProps, isPressed } = createLink({
-    get isDisabled() {
-      return isDisabled() || isCurrent();
-    },
-    get elementType() {
-      return elementType();
-    },
-    get href() {
-      return getProps().href;
-    },
-    get target() {
-      return getProps().target;
-    },
-    get rel() {
-      return getProps().rel;
-    },
-    get onPress() {
-      return getProps().onPress;
-    },
-    get onPressStart() {
-      return getProps().onPressStart;
-    },
-    get onPressEnd() {
-      return getProps().onPressEnd;
-    },
-    get onClick() {
-      return getProps().onClick;
-    },
-    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 autoFocus() {
-      return getProps().autoFocus;
-    },
-    get 'aria-label'() {
-      return getProps()['aria-label'];
-    },
-    get 'aria-labelledby'() {
-      return getProps()['aria-labelledby'];
-    },
-    get 'aria-describedby'() {
-      return getProps()['aria-describedby'];
-    },
-  });
-
-  const getItemProps = (): Record<string, unknown> => {
-    const p = getProps();
-    const current = isCurrent();
-
-    // Start with link props (unless it's a heading)
-    let baseProps: Record<string, unknown> = isHeading() ? {} : linkProps;
-
-    // Add aria-current for current page
-    if (current) {
-      const ariaCurrent = p['aria-current'] ?? 'page';
-      baseProps = mergeProps(baseProps, {
-        'aria-current': ariaCurrent,
-      });
-
-      // Adjust tabIndex for current item
-      // If autoFocus is true, we want the item focusable
-      if (p.autoFocus) {
-        baseProps = mergeProps(baseProps, {
-          tabIndex: -1,
-        });
-      }
-    }
-
-    // Add aria-disabled for disabled items
-    if (isDisabled()) {
-      baseProps = mergeProps(baseProps, {
-        'aria-disabled': true,
-      });
-    }
-
-    return baseProps;
-  };
-
-  return {
-    get itemProps() {
-      return getItemProps();
-    },
-    get linkProps() {
-      return linkProps;
-    },
-    isPressed,
-  };
-}

package/src/breadcrumbs/index.ts

@@ -1,8 +0,0 @@
-export {
-  createBreadcrumbs,
-  createBreadcrumbItem,
-  type AriaBreadcrumbsProps,
-  type BreadcrumbsAria,
-  type AriaBreadcrumbItemProps,
-  type BreadcrumbItemAria,
-} from './createBreadcrumbs';

package/src/button/createButton.ts

@@ -1,142 +0,0 @@
-import { Accessor } from 'solid-js';
-import { createPress } from '../interactions';
-import { createFocusable } from '../interactions';
-import { mergeProps, filterDOMProps } from '../utils';
-import type { AriaButtonProps, ButtonAria } from './types';
-
-function isDisabledValue(isDisabled: Accessor<boolean> | boolean | undefined): boolean {
-  if (typeof isDisabled === 'function') {
-    return isDisabled();
-  }
-  return isDisabled ?? false;
-}
-
-/**
- * Provides the behavior and accessibility implementation for a button component.
- * Handles press interactions across mouse, touch, keyboard and screen readers.
- *
- * Based on react-aria's useButton but adapted for SolidJS.
- *
- * @example
- * ```tsx
- * import { createButton } from 'solidaria';
- *
- * function Button(props) {
- *   let ref;
- *   const { buttonProps, isPressed } = createButton(props);
- *
- *   return (
- *     <button
- *       {...buttonProps}
- *       ref={ref}
- *       class={isPressed() ? 'pressed' : ''}
- *     >
- *       {props.children}
- *     </button>
- *   );
- * }
- * ```
- */
-export function createButton(props: AriaButtonProps = {}): ButtonAria {
-  const elementType = props.elementType ?? 'button';
-
-  const { pressProps, isPressed } = createPress({
-    isDisabled: props.isDisabled,
-    onPress: props.onPress,
-    onPressStart: props.onPressStart,
-    onPressEnd: props.onPressEnd,
-    onPressUp: props.onPressUp,
-    onPressChange: props.onPressChange,
-    onClick: props.onClick,
-    preventFocusOnPress: props.preventFocusOnPress,
-  });
-
-  const { focusableProps } = createFocusable({
-    isDisabled: props.isDisabled,
-    autoFocus: props.autoFocus,
-    excludeFromTabOrder: props.excludeFromTabOrder,
-  });
-
-  const isNativeButton = elementType === 'button' || elementType === 'input';
-  const isLink = elementType === 'a';
-  const disabled = isDisabledValue(props.isDisabled);
-
-  // Handle allowFocusWhenDisabled - set tabIndex to -1 when disabled but focusable
-  // This allows tooltips to be shown on disabled buttons
-  if (props.allowFocusWhenDisabled && disabled) {
-    (focusableProps as Record<string, unknown>).tabIndex = -1;
-  }
-
-  // Build base props based on element type
-  let additionalProps: Record<string, unknown> = {};
-
-  if (isNativeButton) {
-    additionalProps = {
-      type: props.type ?? 'button',
-      disabled: disabled,
-      // Form-related attributes
-      ...(props.form && { form: props.form }),
-      ...(props.formAction && { formAction: props.formAction }),
-      ...(props.formEncType && { formEncType: props.formEncType }),
-      ...(props.formMethod && { formMethod: props.formMethod }),
-      ...(props.formNoValidate && { formNoValidate: props.formNoValidate }),
-      ...(props.formTarget && { formTarget: props.formTarget }),
-      ...(props.name && { name: props.name }),
-      ...(props.value && { value: props.value }),
-    };
-  } else {
-    // Non-native buttons need role and tabIndex
-    additionalProps = {
-      role: 'button',
-      tabIndex: disabled ? undefined : 0,
-      'aria-disabled': disabled ? true : undefined,
-    };
-
-    if (isLink) {
-      additionalProps.href = props.href;
-      additionalProps.target = props.target;
-      additionalProps.rel = props.rel;
-    }
-  }
-
-  // ARIA attributes
-  const ariaProps: Record<string, unknown> = {};
-
-  if (props['aria-pressed'] !== undefined) {
-    ariaProps['aria-pressed'] = props['aria-pressed'];
-  }
-  if (props['aria-haspopup'] !== undefined) {
-    ariaProps['aria-haspopup'] = props['aria-haspopup'];
-  }
-  if (props['aria-expanded'] !== undefined) {
-    ariaProps['aria-expanded'] = props['aria-expanded'];
-  }
-  if (props['aria-label']) {
-    ariaProps['aria-label'] = props['aria-label'];
-  }
-  if (props['aria-labelledby']) {
-    ariaProps['aria-labelledby'] = props['aria-labelledby'];
-  }
-  if (props['aria-describedby']) {
-    ariaProps['aria-describedby'] = props['aria-describedby'];
-  }
-  if (props['aria-controls']) {
-    ariaProps['aria-controls'] = props['aria-controls'];
-  }
-  if (props['aria-current'] !== undefined) {
-    ariaProps['aria-current'] = props['aria-current'];
-  }
-
-  const buttonProps = mergeProps(
-    filterDOMProps(props as Record<string, unknown>, { labelable: true }),
-    additionalProps,
-    ariaProps,
-    focusableProps as Record<string, unknown>,
-    pressProps as Record<string, unknown>
-  );
-
-  return {
-    buttonProps,
-    isPressed,
-  };
-}