@proyecto-viviana/solidaria 0.1.3 → 0.2.0

package/src/tag/createTag.ts

@@ -1,194 +0,0 @@
-/**
- * Tag hook for Solidaria
- *
- * Provides the behavior and accessibility implementation for a tag component.
- * Tags are individual items within a TagGroup.
- *
- * Based on @react-aria/tag useTag
- */
-
-import { createMemo } from 'solid-js';
-import { createFocusable } from '../interactions/createFocusable';
-import { createPress } from '../interactions/createPress';
-import { filterDOMProps } from '../utils/filterDOMProps';
-import { mergeProps } from '../utils/mergeProps';
-import { createId } from '../ssr';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import { getTagGroupData } from './createTagGroup';
-import type { ListState, Key } from '@proyecto-viviana/solid-stately';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface AriaTagProps {
-  /** The unique key for this tag. */
-  key: Key;
-  /** Whether the tag is disabled. */
-  isDisabled?: boolean;
-  /** A text value for the tag used for accessibility. */
-  textValue?: string;
-}
-
-export interface TagAria {
-  /** Props for the tag row element. */
-  rowProps: Record<string, unknown>;
-  /** Props for the tag cell element. */
-  gridCellProps: Record<string, unknown>;
-  /** Props for the tag remove button. */
-  removeButtonProps: Record<string, unknown>;
-  /** Whether the tag can be removed. */
-  allowsRemoving: boolean;
-  /** Whether the tag is selected. */
-  isSelected: boolean;
-  /** Whether the tag is disabled. */
-  isDisabled: boolean;
-  /** Whether the tag is focused. */
-  isFocused: boolean;
-  /** Whether the tag is pressed. */
-  isPressed: boolean;
-}
-
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
-/**
- * Provides the behavior and accessibility implementation for a tag component.
- * Tags are individual items within a TagGroup.
- */
-export function createTag<T>(
-  props: MaybeAccessor<AriaTagProps>,
-  state: ListState<T>,
-  ref: () => HTMLElement | null
-): TagAria {
-  const getProps = () => access(props);
-  const rowId = createId();
-  const cellId = createId();
-  const removeButtonId = createId();
-
-  // Get shared data from tag group
-  const getData = () => getTagGroupData(state);
-
-  // Get key
-  const key = () => getProps().key;
-
-  // Compute states
-  const isDisabled = createMemo(() => {
-    const p = getProps();
-    return p.isDisabled || state.isDisabled(key());
-  });
-
-  const isSelected = createMemo(() => {
-    return state.isSelected(key());
-  });
-
-  const isFocused = createMemo(() => {
-    return state.focusedKey() === key();
-  });
-
-  // Handle press for selection
-  const { pressProps, isPressed } = createPress({
-    isDisabled,
-    onPress: () => {
-      if (!isDisabled()) {
-        state.toggleSelection(key());
-      }
-    },
-  });
-
-  // Handle focusable
-  const { focusableProps } = createFocusable({
-    isDisabled,
-  }, ref);
-
-  // Handle keyboard for removal
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (isDisabled()) return;
-
-    if (e.key === 'Delete' || e.key === 'Backspace') {
-      e.preventDefault();
-      const data = getData();
-      if (data?.onRemove) {
-        // Remove selected keys if this tag is selected, otherwise just this tag
-        if (isSelected()) {
-          const selection = state.selectedKeys();
-          const keysToRemove = selection === 'all'
-            ? new Set(Array.from(state.collection()).map(item => (item as { key: Key }).key))
-            : new Set(selection);
-          data.onRemove(keysToRemove);
-        } else {
-          data.onRemove(new Set([key()]));
-        }
-      }
-    }
-  };
-
-  // Compute tabIndex
-  const tabIndex = createMemo(() => {
-    if (isDisabled()) return -1;
-    // If this is the focused item, or if nothing is focused yet
-    if (isFocused() || state.focusedKey() === null) {
-      return 0;
-    }
-    return -1;
-  });
-
-  // Filter DOM props
-  const domProps = () => filterDOMProps(getProps() as unknown as Record<string, unknown>);
-
-  // Check if removal is allowed
-  const allowsRemoving = createMemo(() => {
-    const data = getData();
-    return !!data?.onRemove;
-  });
-
-  return {
-    get rowProps() {
-      return mergeProps(domProps(), focusableProps as Record<string, unknown>, pressProps as Record<string, unknown>, {
-        id: rowId,
-        role: 'row',
-        tabIndex: tabIndex(),
-        'aria-selected': isSelected(),
-        'aria-disabled': isDisabled() || undefined,
-        onKeyDown: handleKeyDown,
-      });
-    },
-    get gridCellProps() {
-      return {
-        id: cellId,
-        role: 'gridcell',
-        'aria-describedby': allowsRemoving() ? removeButtonId : undefined,
-      };
-    },
-    get removeButtonProps() {
-      const data = getData();
-      return {
-        id: removeButtonId,
-        'aria-label': 'Remove',
-        'aria-labelledby': `${removeButtonId} ${rowId}`,
-        isDisabled: isDisabled(),
-        onPress: () => {
-          if (data?.onRemove && !isDisabled()) {
-            data.onRemove(new Set([key()]));
-          }
-        },
-      };
-    },
-    get allowsRemoving() {
-      return allowsRemoving();
-    },
-    get isSelected() {
-      return isSelected();
-    },
-    get isDisabled() {
-      return isDisabled();
-    },
-    get isFocused() {
-      return isFocused();
-    },
-    get isPressed() {
-      return isPressed();
-    },
-  };
-}

package/src/tag/createTagGroup.ts

@@ -1,154 +0,0 @@
-/**
- * TagGroup hook for Solidaria
- *
- * Provides the behavior and accessibility implementation for a tag group component.
- * A tag group is a focusable list of labels, categories, keywords, filters, or other items,
- * with support for keyboard navigation, selection, and removal.
- *
- * Based on @react-aria/tag useTagGroup
- */
-
-import { createEffect, onCleanup } from 'solid-js';
-import { createLabel } from '../label/createLabel';
-import { filterDOMProps } from '../utils/filterDOMProps';
-import { mergeProps } from '../utils/mergeProps';
-import { createId } from '../ssr';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import type { ListState, Key } from '@proyecto-viviana/solid-stately';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface AriaTagGroupProps {
-  /** An ID for the tag group. */
-  id?: string;
-  /** Whether the tag group is disabled. */
-  isDisabled?: boolean;
-  /** The label for the tag group. */
-  label?: string;
-  /** An accessible label for the tag group when no visible label is provided. */
-  'aria-label'?: string;
-  /** The ID of an element that labels the tag group. */
-  'aria-labelledby'?: string;
-  /** The ID of an element that describes the tag group. */
-  'aria-describedby'?: string;
-  /** A description of the tag group. */
-  description?: string;
-  /** An error message for the tag group. */
-  errorMessage?: string;
-  /** Handler that is called when a user removes a tag. */
-  onRemove?: (keys: Set<Key>) => void;
-}
-
-export interface TagGroupAria {
-  /** Props for the tag group container element. */
-  gridProps: Record<string, unknown>;
-  /** Props for the tag group's visible label (if any). */
-  labelProps: Record<string, unknown>;
-  /** Props for the tag group description element, if any. */
-  descriptionProps: Record<string, unknown>;
-  /** Props for the tag group error message element, if any. */
-  errorMessageProps: Record<string, unknown>;
-}
-
-// Shared data between tag group and tags
-const tagGroupData = new WeakMap<object, TagGroupData>();
-
-interface TagGroupData {
-  id: string;
-  onRemove?: (keys: Set<Key>) => void;
-}
-
-export function getTagGroupData(state: ListState): TagGroupData | undefined {
-  return tagGroupData.get(state);
-}
-
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
-/**
- * Provides the behavior and accessibility implementation for a tag group component.
- * A tag group is a focusable list of labels, categories, keywords, filters, or other items,
- * with support for keyboard navigation, selection, and removal.
- */
-export function createTagGroup<T>(
-  props: MaybeAccessor<AriaTagGroupProps>,
-  state: ListState<T>,
-  _ref?: () => HTMLElement | null
-): TagGroupAria {
-  const getProps = () => access(props);
-  const id = createId(getProps().id);
-  const descriptionId = createId();
-  const errorMessageId = createId();
-
-  // Filter DOM props
-  const domProps = () => filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });
-
-  // Create label handling
-  const { labelProps, fieldProps } = createLabel({
-    get label() { return getProps().label; },
-    get 'aria-label'() { return getProps()['aria-label']; },
-    get 'aria-labelledby'() { return getProps()['aria-labelledby']; },
-    labelElementType: 'span',
-  });
-
-  // Share data with child tags
-  createEffect(() => {
-    const p = getProps();
-    tagGroupData.set(state, {
-      id,
-      onRemove: p.onRemove,
-    });
-
-    onCleanup(() => {
-      tagGroupData.delete(state);
-    });
-  });
-
-  // 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.errorMessage) {
-      ids.push(errorMessageId);
-    }
-    return ids.length > 0 ? ids.join(' ') : undefined;
-  };
-
-  return {
-    get gridProps() {
-      const p = getProps();
-      const hasItems = state.collection().size > 0;
-
-      return mergeProps(domProps(), fieldProps as Record<string, unknown>, {
-        id,
-        role: hasItems ? 'grid' : 'group',
-        'aria-atomic': false,
-        'aria-relevant': 'additions',
-        'aria-describedby': getAriaDescribedBy(),
-        'aria-disabled': p.isDisabled || undefined,
-      });
-    },
-    get labelProps() {
-      return labelProps as Record<string, unknown>;
-    },
-    get descriptionProps() {
-      return {
-        id: descriptionId,
-      };
-    },
-    get errorMessageProps() {
-      return {
-        id: errorMessageId,
-      };
-    },
-  };
-}

package/src/tag/index.ts

@@ -1,12 +0,0 @@
-export {
-  createTagGroup,
-  getTagGroupData,
-  type AriaTagGroupProps,
-  type TagGroupAria,
-} from './createTagGroup';
-
-export {
-  createTag,
-  type AriaTagProps,
-  type TagAria,
-} from './createTag';

package/src/textfield/createTextField.ts

@@ -1,198 +0,0 @@
-/**
- * TextField hook for Solidaria
- *
- * Provides the behavior and accessibility implementation for a text field.
- *
- * This is a 1:1 port of @react-aria/textfield's useTextField hook.
- */
-
-import { JSX } from 'solid-js';
-import { createField, type AriaFieldProps, type FieldAria } from '../label';
-import { createFocusable, type FocusableProps } from '../interactions';
-import { mergeProps, filterDOMProps } from '../utils';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface AriaTextFieldProps extends AriaFieldProps, FocusableProps {
-  /** The current value (controlled). */
-  value?: string;
-  /** The default value (uncontrolled). */
-  defaultValue?: string;
-  /** Handler that is called when the value changes. */
-  onChange?: (value: string) => void;
-  /** Whether the input is disabled. */
-  isDisabled?: boolean;
-  /** Whether the input is read only. */
-  isReadOnly?: boolean;
-  /** Whether the input is required. */
-  isRequired?: boolean;
-  /** The type of input to render. */
-  type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | string;
-  /** The input mode hint for virtual keyboards. */
-  inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
-  /** The name of the input element, used when submitting an HTML form. */
-  name?: string;
-  /** Regex pattern to validate the input value. */
-  pattern?: string;
-  /** The maximum number of characters supported by the input. */
-  maxLength?: number;
-  /** The minimum number of characters required by the input. */
-  minLength?: number;
-  /** Placeholder text for the input. */
-  placeholder?: string;
-  /** Whether to enable auto complete. */
-  autoComplete?: string;
-  /** Whether to enable auto correct. */
-  autoCorrect?: string;
-  /** Whether to enable spell check. */
-  spellCheck?: 'true' | 'false';
-  /** Controls whether and how text input is automatically capitalized. */
-  autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
-  /** The element type to use for the input. Defaults to 'input'. */
-  inputElementType?: 'input' | 'textarea';
-
-  // Clipboard events
-  onCopy?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, ClipboardEvent>;
-  onCut?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, ClipboardEvent>;
-  onPaste?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, ClipboardEvent>;
-
-  // Composition events
-  onCompositionStart?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, CompositionEvent>;
-  onCompositionEnd?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, CompositionEvent>;
-  onCompositionUpdate?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, CompositionEvent>;
-
-  // Selection events
-  onSelect?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, Event>;
-
-  // Input events
-  onBeforeInput?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, InputEvent>;
-  onInput?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, InputEvent>;
-}
-
-export interface TextFieldAria<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> extends Omit<FieldAria, 'fieldProps'> {
-  /** Props for the input element. */
-  inputProps: JSX.InputHTMLAttributes<T>;
-  /** Whether the text field is invalid. */
-  isInvalid: boolean;
-}
-
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
-/**
- * Provides the behavior and accessibility implementation for a text field.
- * Text fields allow users to input text with a keyboard.
- *
- * @param props - Props for the text field.
- * @param ref - Optional ref callback for the input element.
- */
-export function createTextField<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement>(
-  props: MaybeAccessor<AriaTextFieldProps>,
-  ref?: (el: T) => void
-): TextFieldAria<T> {
-  const getProps = () => access(props);
-
-  // Get field accessibility props (label, description, error message)
-  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = createField(props);
-
-  // Get focusable props
-  const { focusableProps } = createFocusable(
-    {
-      get isDisabled() {
-        return getProps().isDisabled;
-      },
-      get autoFocus() {
-        return getProps().autoFocus;
-      },
-      onFocus: getProps().onFocus,
-      onBlur: getProps().onBlur,
-      onFocusChange: getProps().onFocusChange,
-      onKeyDown: getProps().onKeyDown,
-      onKeyUp: getProps().onKeyUp,
-    },
-    ref as ((el: HTMLElement) => void) | undefined
-  );
-
-  // Filter DOM props
-  const getDomProps = () => filterDOMProps(getProps() as Record<string, unknown>, { labelable: true });
-
-  // Build input props
-  const getInputProps = (): JSX.InputHTMLAttributes<T> => {
-    const p = getProps();
-    const isInvalid = p.isInvalid ?? false;
-    const isTextarea = p.inputElementType === 'textarea';
-
-    return mergeProps(
-      getDomProps(),
-      {
-        disabled: p.isDisabled,
-        readOnly: p.isReadOnly,
-        required: p.isRequired,
-        'aria-required': p.isRequired || undefined,
-        'aria-invalid': isInvalid || undefined,
-        value: p.value ?? p.defaultValue ?? '',
-        onChange: (e: Event) => {
-          const target = e.target as HTMLInputElement | HTMLTextAreaElement;
-          p.onChange?.(target.value);
-        },
-        // Don't include type and pattern for textarea elements
-        type: isTextarea ? undefined : (p.type ?? 'text'),
-        inputMode: p.inputMode,
-        name: p.name,
-        pattern: isTextarea ? undefined : p.pattern,
-        maxLength: p.maxLength,
-        minLength: p.minLength,
-        placeholder: p.placeholder,
-        autoComplete: p.autoComplete,
-        autoCorrect: p.autoCorrect,
-        autoCapitalize: p.autoCapitalize,
-        spellCheck: p.spellCheck,
-
-        // Clipboard events
-        onCopy: p.onCopy,
-        onCut: p.onCut,
-        onPaste: p.onPaste,
-
-        // Composition events
-        onCompositionStart: p.onCompositionStart,
-        onCompositionEnd: p.onCompositionEnd,
-        onCompositionUpdate: p.onCompositionUpdate,
-
-        // Selection events
-        onSelect: p.onSelect,
-
-        // Input events
-        onBeforeInput: p.onBeforeInput,
-        onInput: p.onInput,
-      },
-      focusableProps as Record<string, unknown>,
-      fieldProps as Record<string, unknown>
-    ) as JSX.InputHTMLAttributes<T>;
-  };
-
-  const getIsInvalid = () => {
-    return getProps().isInvalid ?? false;
-  };
-
-  return {
-    get labelProps() {
-      return labelProps;
-    },
-    get inputProps() {
-      return getInputProps();
-    },
-    get descriptionProps() {
-      return descriptionProps;
-    },
-    get errorMessageProps() {
-      return errorMessageProps;
-    },
-    get isInvalid() {
-      return getIsInvalid();
-    },
-  };
-}

package/src/textfield/index.ts

@@ -1,5 +0,0 @@
-export {
-  createTextField,
-  type AriaTextFieldProps,
-  type TextFieldAria,
-} from './createTextField';

package/src/toast/createToast.ts

@@ -1,118 +0,0 @@
-/**
- * createToast hook for Solidaria
- *
- * Provides the accessibility implementation for a Toast component.
- *
- * Port of @react-aria/toast useToast.
- */
-
-import { type JSX, createMemo } from 'solid-js';
-import { type QueuedToast, type ToastState } from '@proyecto-viviana/solid-stately';
-import { createId } from '../ssr';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface AriaToastProps<T> {
-  /** The toast to display. */
-  toast: QueuedToast<T>;
-  /** The toast state from createToastState. */
-  state: ToastState<T>;
-}
-
-export interface ToastAria {
-  /** Props for the toast container element. */
-  toastProps: JSX.HTMLAttributes<HTMLElement>;
-  /** Props for the toast content element (contains the message). */
-  contentProps: JSX.HTMLAttributes<HTMLElement>;
-  /** Props for the toast title element. */
-  titleProps: JSX.HTMLAttributes<HTMLElement>;
-  /** Props for the toast description element. */
-  descriptionProps: JSX.HTMLAttributes<HTMLElement>;
-  /** Props for the close button. */
-  closeButtonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-}
-
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
-/**
- * Provides the accessibility implementation for a Toast component.
- *
- * The toast uses role="alertdialog" to announce content to screen readers.
- * The content area uses role="alert" for the actual message.
- *
- * @example
- * ```tsx
- * import { createToast } from 'solidaria';
- *
- * function Toast(props) {
- *   const {
- *     toastProps,
- *     contentProps,
- *     titleProps,
- *     closeButtonProps
- *   } = createToast({ toast: props.toast, state: props.state });
- *
- *   return (
- *     <div {...toastProps}>
- *       <div {...contentProps}>
- *         <div {...titleProps}>{props.toast.content.title}</div>
- *       </div>
- *       <button {...closeButtonProps}>×</button>
- *     </div>
- *   );
- * }
- * ```
- */
-export function createToast<T>(props: AriaToastProps<T>): ToastAria {
-  const titleId = createId();
-  const descriptionId = createId();
-
-  const close = () => {
-    props.state.close(props.toast.key);
-  };
-
-  // Toast container - role="alertdialog" for screen readers
-  const toastProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({
-    role: 'alertdialog',
-    'aria-modal': 'false',
-    'aria-labelledby': titleId,
-    'aria-describedby': descriptionId,
-    'data-animation': props.toast.animation,
-    'data-key': props.toast.key,
-  }));
-
-  // Content area with role="alert" for immediate announcement
-  const contentProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({
-    role: 'alert',
-    'aria-atomic': 'true',
-    'aria-live': 'assertive',
-  }));
-
-  // Title props
-  const titleProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({
-    id: titleId,
-  }));
-
-  // Description props
-  const descriptionProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({
-    id: descriptionId,
-  }));
-
-  // Close button
-  const closeButtonProps = createMemo<JSX.ButtonHTMLAttributes<HTMLButtonElement>>(() => ({
-    'aria-label': 'Close',
-    onClick: close,
-  }));
-
-  return {
-    get toastProps() { return toastProps(); },
-    get contentProps() { return contentProps(); },
-    get titleProps() { return titleProps(); },
-    get descriptionProps() { return descriptionProps(); },
-    get closeButtonProps() { return closeButtonProps(); },
-  };
-}