@proyecto-viviana/solidaria 0.1.3 → 0.2.0

package/src/table/types.ts

@@ -1,165 +0,0 @@
-/**
- * Table ARIA types for Table components.
- * Based on @react-aria/table types.
- */
-
-import type { JSX } from 'solid-js';
-import type { Key, GridNode } from '@proyecto-viviana/solid-stately';
-
-/**
- * Props for the createTable hook.
- */
-export interface AriaTableProps {
-  /** ID for the table element. */
-  id?: string;
-  /** ARIA label for the table. */
-  'aria-label'?: string;
-  /** ARIA labelledby for the table. */
-  'aria-labelledby'?: string;
-  /** ARIA describedby for the table. */
-  'aria-describedby'?: string;
-  /** Whether the table uses virtual scrolling. */
-  isVirtualized?: boolean;
-  /** Handler for row actions. */
-  onRowAction?: (key: Key) => void;
-  /** Handler for cell actions. */
-  onCellAction?: (key: Key) => void;
-  /** Whether selection should occur on press up. */
-  shouldSelectOnPressUp?: boolean;
-  /** Focus mode: 'row' or 'cell'. */
-  focusMode?: 'row' | 'cell';
-}
-
-/**
- * Return value from createTable.
- */
-export interface TableAria {
-  /** Props to spread on the table element. */
-  gridProps: JSX.HTMLAttributes<HTMLTableElement>;
-}
-
-/**
- * Props for the createTableHeaderRow hook.
- */
-export interface AriaTableHeaderRowProps {
-  /** The header row node. */
-  node: GridNode<unknown>;
-  /** Whether the table is virtualized. */
-  isVirtualized?: boolean;
-}
-
-/**
- * Return value from createTableHeaderRow.
- */
-export interface TableHeaderRowAria {
-  /** Props to spread on the header row element. */
-  rowProps: JSX.HTMLAttributes<HTMLTableRowElement>;
-}
-
-/**
- * Props for the createTableColumnHeader hook.
- */
-export interface AriaTableColumnHeaderProps {
-  /** The column header node. */
-  node: GridNode<unknown>;
-  /** Whether the table is virtualized. */
-  isVirtualized?: boolean;
-  /** Whether the column allows sorting. */
-  allowsSorting?: boolean;
-}
-
-/**
- * Return value from createTableColumnHeader.
- */
-export interface TableColumnHeaderAria {
-  /** Props to spread on the column header element. */
-  columnHeaderProps: JSX.HTMLAttributes<HTMLTableCellElement>;
-}
-
-/**
- * Props for the createTableRow hook.
- */
-export interface AriaTableRowProps {
-  /** The row node. */
-  node: GridNode<unknown>;
-  /** Whether the table is virtualized. */
-  isVirtualized?: boolean;
-  /** Handler for row action. */
-  onAction?: () => void;
-}
-
-/**
- * Return value from createTableRow.
- */
-export interface TableRowAria {
-  /** Props to spread on the row element. */
-  rowProps: JSX.HTMLAttributes<HTMLTableRowElement>;
-  /** Whether the row is selected. */
-  isSelected: boolean;
-  /** Whether the row is disabled. */
-  isDisabled: boolean;
-  /** Whether the row is pressed. */
-  isPressed: boolean;
-}
-
-/**
- * Props for the createTableCell hook.
- */
-export interface AriaTableCellProps {
-  /** The cell node. */
-  node: GridNode<unknown>;
-  /** Whether the table is virtualized. */
-  isVirtualized?: boolean;
-  /** Handler for cell action. */
-  onAction?: () => void;
-}
-
-/**
- * Return value from createTableCell.
- */
-export interface TableCellAria {
-  /** Props to spread on the cell element. */
-  gridCellProps: JSX.HTMLAttributes<HTMLTableCellElement>;
-  /** Whether the cell is pressed. */
-  isPressed: boolean;
-}
-
-/**
- * Props for the createTableRowGroup hook.
- */
-export interface AriaTableRowGroupProps {
-  /** The type of row group: 'thead', 'tbody', or 'tfoot'. */
-  type: 'thead' | 'tbody' | 'tfoot';
-}
-
-/**
- * Return value from createTableRowGroup.
- */
-export interface TableRowGroupAria {
-  /** Props to spread on the row group element. */
-  rowGroupProps: JSX.HTMLAttributes<HTMLTableSectionElement>;
-}
-
-/**
- * Props for the createTableSelectionCheckbox hook.
- */
-export interface AriaTableSelectionCheckboxProps {
-  /** The key of the row. */
-  key: Key;
-}
-
-/**
- * Return value from createTableSelectionCheckbox.
- */
-export interface TableSelectionCheckboxAria {
-  /** Props to spread on the checkbox input element. */
-  checkboxProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-}
-
-/**
- * Return value from createTableSelectAllCheckbox.
- */
-export interface TableSelectAllCheckboxAria {
-  /** Props to spread on the checkbox input element. */
-  checkboxProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-}

package/src/tabs/createTabs.ts

@@ -1,472 +0,0 @@
-/**
- * ARIA hooks for tab components.
- * Based on @react-aria/tabs.
- */
-
-import { type Accessor, createMemo, onMount } from 'solid-js';
-import { createFocusRing } from '../interactions';
-import { createPress } from '../interactions';
-import { createHover } from '../interactions';
-import { createId } from '../ssr';
-import type { Key, Collection, CollectionNode } from '@proyecto-viviana/solid-stately';
-
-// ============================================
-// TYPES
-// ============================================
-
-export type TabOrientation = 'horizontal' | 'vertical';
-export type KeyboardActivation = 'automatic' | 'manual';
-
-export interface TabListState<T = unknown> {
-  collection: Accessor<Collection<T>>;
-  selectedKey: Accessor<Key | null>;
-  setSelectedKey(key: Key): void;
-  selectedItem: Accessor<CollectionNode<T> | null>;
-  isDisabled: Accessor<boolean>;
-  keyboardActivation: Accessor<KeyboardActivation>;
-  orientation: Accessor<TabOrientation>;
-  isKeyDisabled(key: Key): boolean;
-  disabledKeys: Accessor<Set<Key>>;
-  isFocused: Accessor<boolean>;
-  setFocused(isFocused: boolean): void;
-  focusedKey: Accessor<Key | null>;
-  setFocusedKey(key: Key | null): void;
-}
-
-export interface AriaTabListProps {
-  /** The orientation of the tab list. */
-  orientation?: TabOrientation;
-  /** How tabs are activated (on focus or on click). */
-  keyboardActivation?: KeyboardActivation;
-  /** Whether the tab list is disabled. */
-  isDisabled?: boolean;
-  /** Label for the tab list. */
-  'aria-label'?: string;
-  /** ID of element that labels the tab list. */
-  'aria-labelledby'?: string;
-  /** ID of element that describes the tab list. */
-  'aria-describedby'?: string;
-}
-
-export interface TabListAria {
-  /** Props for the tab list container element. */
-  tabListProps: {
-    role: 'tablist';
-    'aria-orientation': TabOrientation;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    'aria-describedby'?: string;
-    onKeyDown: (e: KeyboardEvent) => void;
-    onFocus: (e: FocusEvent) => void;
-    onBlur: (e: FocusEvent) => void;
-  };
-}
-
-export interface AriaTabProps {
-  /** The key of the tab. */
-  key: Key;
-  /** Whether the tab is disabled. */
-  isDisabled?: boolean;
-  /** Label for the tab. */
-  'aria-label'?: string;
-}
-
-export interface TabAria {
-  /** Props for the tab element. */
-  tabProps: {
-    id: string;
-    role: 'tab';
-    'aria-selected': boolean;
-    'aria-disabled': boolean | undefined;
-    'aria-controls': string | undefined;
-    'aria-label'?: string;
-    tabIndex: number;
-    onKeyDown: (e: KeyboardEvent) => void;
-    onMouseDown: (e: MouseEvent) => void;
-    onPointerDown: (e: PointerEvent) => void;
-    onClick: (e: MouseEvent) => void;
-    onFocus: (e: FocusEvent) => void;
-  };
-  /** Whether the tab is selected. */
-  isSelected: Accessor<boolean>;
-  /** Whether the tab is disabled. */
-  isDisabled: Accessor<boolean>;
-  /** Whether the tab is pressed. */
-  isPressed: Accessor<boolean>;
-  /** Whether the tab has focus. */
-  isFocused: Accessor<boolean>;
-  /** Whether the tab has visible focus ring. */
-  isFocusVisible: Accessor<boolean>;
-  /** Whether the tab is hovered. */
-  isHovered: Accessor<boolean>;
-}
-
-export interface AriaTabPanelProps {
-  /** The key of the associated tab. */
-  id?: Key;
-  /** Label for the tab panel. */
-  'aria-label'?: string;
-  /** ID of element that labels the tab panel. */
-  'aria-labelledby'?: string;
-  /** ID of element that describes the tab panel. */
-  'aria-describedby'?: string;
-}
-
-export interface TabPanelAria {
-  /** Props for the tab panel element. */
-  tabPanelProps: {
-    id: string;
-    role: 'tabpanel';
-    'aria-labelledby': string;
-    'aria-label'?: string;
-    'aria-describedby'?: string;
-    tabIndex: number;
-  };
-  /** Whether this panel is the selected one. */
-  isSelected: Accessor<boolean>;
-}
-
-// ============================================
-// ID MANAGEMENT
-// ============================================
-
-const tabListIds = new WeakMap<TabListState<unknown>, string>();
-
-function getTabListId<T>(state: TabListState<T>): string {
-  let id = tabListIds.get(state as TabListState<unknown>);
-  if (!id) {
-    id = createId();
-    tabListIds.set(state as TabListState<unknown>, id);
-  }
-  return id;
-}
-
-function generateTabId<T>(state: TabListState<T>, key: Key): string {
-  const baseId = getTabListId(state);
-  const keyStr = String(key).replace(/\s+/g, '-');
-  return `${baseId}-tab-${keyStr}`;
-}
-
-function generateTabPanelId<T>(state: TabListState<T>, key: Key): string {
-  const baseId = getTabListId(state);
-  const keyStr = String(key).replace(/\s+/g, '-');
-  return `${baseId}-tabpanel-${keyStr}`;
-}
-
-// ============================================
-// KEYBOARD DELEGATE
-// ============================================
-
-function getNextKey<T>(state: TabListState<T>, currentKey: Key): Key | null {
-  const coll = state.collection();
-  const keys = [...coll].map(node => node.key);
-  const currentIndex = keys.indexOf(currentKey);
-
-  if (currentIndex === -1) return keys[0] ?? null;
-
-  // Find next non-disabled key, wrapping around
-  for (let i = 1; i <= keys.length; i++) {
-    const nextIndex = (currentIndex + i) % keys.length;
-    const nextKey = keys[nextIndex];
-    if (!state.isKeyDisabled(nextKey)) {
-      return nextKey;
-    }
-  }
-
-  return null;
-}
-
-function getPreviousKey<T>(state: TabListState<T>, currentKey: Key): Key | null {
-  const coll = state.collection();
-  const keys = [...coll].map(node => node.key);
-  const currentIndex = keys.indexOf(currentKey);
-
-  if (currentIndex === -1) return keys[keys.length - 1] ?? null;
-
-  // Find previous non-disabled key, wrapping around
-  for (let i = 1; i <= keys.length; i++) {
-    const prevIndex = (currentIndex - i + keys.length) % keys.length;
-    const prevKey = keys[prevIndex];
-    if (!state.isKeyDisabled(prevKey)) {
-      return prevKey;
-    }
-  }
-
-  return null;
-}
-
-function getFirstKey<T>(state: TabListState<T>): Key | null {
-  const coll = state.collection();
-  for (const node of coll) {
-    if (!state.isKeyDisabled(node.key)) {
-      return node.key;
-    }
-  }
-  return null;
-}
-
-function getLastKey<T>(state: TabListState<T>): Key | null {
-  const coll = state.collection();
-  const keys = [...coll].map(node => node.key).reverse();
-  for (const key of keys) {
-    if (!state.isKeyDisabled(key)) {
-      return key;
-    }
-  }
-  return null;
-}
-
-// ============================================
-// HOOKS
-// ============================================
-
-/**
- * Creates ARIA props for a tab list container.
- */
-export function createTabList<T>(
-  props: AriaTabListProps,
-  state: TabListState<T>
-): TabListAria {
-  const orientation = () => props.orientation ?? state.orientation() ?? 'horizontal';
-  const keyboardActivation = () => props.keyboardActivation ?? state.keyboardActivation() ?? 'automatic';
-
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (state.isDisabled()) return;
-
-    const currentKey = state.focusedKey() ?? state.selectedKey();
-    if (currentKey === null) return;
-
-    let nextKey: Key | null = null;
-    const isHorizontal = orientation() === 'horizontal';
-
-    switch (e.key) {
-      case 'ArrowLeft':
-        if (isHorizontal) {
-          // TODO: RTL support
-          nextKey = getPreviousKey(state, currentKey);
-        }
-        break;
-      case 'ArrowRight':
-        if (isHorizontal) {
-          nextKey = getNextKey(state, currentKey);
-        }
-        break;
-      case 'ArrowUp':
-        if (!isHorizontal) {
-          nextKey = getPreviousKey(state, currentKey);
-        }
-        break;
-      case 'ArrowDown':
-        if (!isHorizontal) {
-          nextKey = getNextKey(state, currentKey);
-        }
-        break;
-      case 'Home':
-        nextKey = getFirstKey(state);
-        break;
-      case 'End':
-        nextKey = getLastKey(state);
-        break;
-      case 'Enter':
-      case ' ':
-        // In manual mode, Enter/Space activates the focused tab
-        if (keyboardActivation() === 'manual' && state.focusedKey()) {
-          state.setSelectedKey(state.focusedKey()!);
-          e.preventDefault();
-        }
-        return;
-      default:
-        return;
-    }
-
-    if (nextKey !== null) {
-      e.preventDefault();
-      state.setFocusedKey(nextKey);
-
-      // In automatic mode, selection follows focus
-      if (keyboardActivation() === 'automatic') {
-        state.setSelectedKey(nextKey);
-      }
-    }
-  };
-
-  const handleFocus = () => {
-    state.setFocused(true);
-    // If no focused key, focus the selected key
-    if (state.focusedKey() === null && state.selectedKey() !== null) {
-      state.setFocusedKey(state.selectedKey());
-    }
-  };
-
-  const handleBlur = (e: FocusEvent) => {
-    // Only blur if focus is leaving the tab list entirely
-    const relatedTarget = e.relatedTarget as Element | null;
-    if (relatedTarget && (e.currentTarget as Element).contains(relatedTarget)) {
-      return;
-    }
-    state.setFocused(false);
-  };
-
-  return {
-    tabListProps: {
-      role: 'tablist',
-      'aria-orientation': orientation(),
-      'aria-label': props['aria-label'],
-      'aria-labelledby': props['aria-labelledby'],
-      'aria-describedby': props['aria-describedby'],
-      onKeyDown: handleKeyDown,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-    },
-  };
-}
-
-/**
- * Creates ARIA props for an individual tab.
- */
-export function createTab<T>(
-  props: AriaTabProps,
-  state: TabListState<T>,
-  ref?: Accessor<HTMLElement | null>
-): TabAria {
-  const key = () => props.key;
-
-  const isSelected = createMemo(() => state.selectedKey() === key());
-  const isDisabled = createMemo(() => {
-    if (props.isDisabled) return true;
-    return state.isKeyDisabled(key());
-  });
-
-  const isFocused = createMemo(() => state.focusedKey() === key());
-
-  // Focus ring
-  const { isFocusVisible, focusProps } = createFocusRing();
-
-  // Press handling
-  const { isPressed, pressProps } = createPress({
-    get isDisabled() {
-      return isDisabled();
-    },
-    onPress: () => {
-      state.setSelectedKey(key());
-      state.setFocusedKey(key());
-    },
-  });
-
-  // Hover handling
-  const { isHovered } = createHover({
-    get isDisabled() {
-      return isDisabled();
-    },
-  });
-
-  // Generate IDs
-  const tabId = generateTabId(state, key());
-  const tabPanelId = generateTabPanelId(state, key());
-
-  // Helper to safely call event handlers that may be bound tuples
-  const callHandler = <E extends Event>(
-    handler: ((e: E) => void) | [object, (e: E) => void] | undefined,
-    event: E
-  ) => {
-    if (!handler) return;
-    if (Array.isArray(handler)) {
-      handler[1].call(handler[0], event);
-    } else {
-      handler(event);
-    }
-  };
-
-  // Focus management
-  const handleFocus = (e: FocusEvent) => {
-    state.setFocusedKey(key());
-    callHandler(focusProps.onFocus as any, e);
-  };
-
-  // Combine all handlers
-  const handleKeyDown = (e: KeyboardEvent) => {
-    callHandler(pressProps.onKeyDown as any, e);
-  };
-
-  const handleMouseDown = (e: MouseEvent) => {
-    callHandler(pressProps.onMouseDown as any, e);
-  };
-
-  const handlePointerDown = (e: PointerEvent) => {
-    callHandler(pressProps.onPointerDown as any, e);
-  };
-
-  const handleClick = (e: MouseEvent) => {
-    callHandler(pressProps.onClick as any, e);
-  };
-
-  // Focus this tab when it becomes selected and focused
-  onMount(() => {
-    const cleanup = createMemo(() => {
-      if (isFocused() && ref?.()) {
-        ref()?.focus();
-      }
-    });
-    return cleanup;
-  });
-
-  return {
-    tabProps: {
-      id: tabId,
-      role: 'tab',
-      'aria-selected': isSelected(),
-      'aria-disabled': isDisabled() || undefined,
-      'aria-controls': isSelected() ? tabPanelId : undefined,
-      'aria-label': props['aria-label'],
-      tabIndex: isSelected() && !isDisabled() ? 0 : -1,
-      onKeyDown: handleKeyDown,
-      onMouseDown: handleMouseDown,
-      onPointerDown: handlePointerDown,
-      onClick: handleClick,
-      onFocus: handleFocus,
-    },
-    isSelected,
-    isDisabled,
-    isPressed,
-    isFocused,
-    isFocusVisible,
-    isHovered,
-  };
-}
-
-/**
- * Creates ARIA props for a tab panel.
- */
-export function createTabPanel<T>(
-  props: AriaTabPanelProps,
-  state: TabListState<T> | null
-): TabPanelAria {
-  // If state is null, the panel is always visible (for SSR scenarios)
-  const isSelected = createMemo(() => {
-    if (state === null) return true;
-    if (props.id === undefined) return false;
-    return state.selectedKey() === props.id;
-  });
-
-  // Generate IDs based on the associated tab key
-  const tabPanelId = state && props.id !== undefined
-    ? generateTabPanelId(state, props.id)
-    : createId();
-
-  const tabId = state && props.id !== undefined
-    ? generateTabId(state, props.id)
-    : '';
-
-  return {
-    tabPanelProps: {
-      id: tabPanelId,
-      role: 'tabpanel',
-      'aria-labelledby': props['aria-labelledby'] ?? tabId,
-      'aria-label': props['aria-label'],
-      'aria-describedby': props['aria-describedby'],
-      // Make panel focusable if no tabbable children
-      tabIndex: 0,
-    },
-    isSelected,
-  };
-}

package/src/tabs/index.ts

@@ -1,14 +0,0 @@
-export {
-  createTabList,
-  createTab,
-  createTabPanel,
-  type TabListState,
-  type TabOrientation,
-  type KeyboardActivation,
-  type AriaTabListProps,
-  type TabListAria,
-  type AriaTabProps,
-  type TabAria,
-  type AriaTabPanelProps,
-  type TabPanelAria,
-} from './createTabs';