@proyecto-viviana/solidaria 0.2.2 → 0.2.3

package/src/tag/createTag.ts

@@ -0,0 +1,194 @@
+/**
+ * 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

@@ -0,0 +1,154 @@
+/**
+ * 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

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

package/src/textfield/createTextField.ts

@@ -0,0 +1,198 @@
+/**
+ * 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

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

package/src/toast/createToast.ts

@@ -0,0 +1,118 @@
+/**
+ * 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(); },
+  };
+}