@proyecto-viviana/solidaria 0.0.1 → 0.0.2

package/src/toggle/createToggleState.ts

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

@@ -0,0 +1,7 @@
+// 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';

package/src/utils/dom.ts

@@ -0,0 +1,244 @@
+/**
+ * DOM utilities for cross-browser compatibility.
+ * Based on @react-aria/utils DOM utilities.
+ */
+
+/**
+ * Gets the owner document of an element, or the global document.
+ */
+export function getOwnerDocument(el: Element | null | undefined): Document {
+  return el?.ownerDocument ?? document;
+}
+
+/**
+ * Gets the owner window of an element, or the global window.
+ */
+export function getOwnerWindow(el: Element | null | undefined): Window & typeof globalThis {
+  return getOwnerDocument(el).defaultView ?? window;
+}
+
+/**
+ * Cross-browser implementation of Node.contains that works with ShadowDOM.
+ * In Safari, Node.contains doesn't properly detect elements inside shadow roots.
+ */
+export function nodeContains(parent: Node | null, child: Node | null): boolean {
+  if (!parent || !child) {
+    return false;
+  }
+
+  // Standard contains check
+  if (parent.contains(child)) {
+    return true;
+  }
+
+  // Check if child is in a shadow root
+  let node: Node | null = child;
+  while (node) {
+    if (node === parent) {
+      return true;
+    }
+
+    // Check shadow root host
+    if ((node as ShadowRoot).host) {
+      node = (node as ShadowRoot).host;
+    } else {
+      node = node.parentNode;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Gets the event target, handling composed path for shadow DOM.
+ */
+export function getEventTarget<T extends EventTarget>(event: Event): T | null {
+  // Use composedPath to get the real target when using Shadow DOM
+  if (typeof event.composedPath === 'function') {
+    const path = event.composedPath();
+    if (path.length > 0) {
+      return path[0] as T;
+    }
+  }
+  return event.target as T | null;
+}
+
+/**
+ * Checks if an element is a valid focusable element.
+ */
+export function isFocusable(element: Element): boolean {
+  // Check if element is disabled
+  if ((element as HTMLInputElement).disabled) {
+    return false;
+  }
+
+  // Check native focusable elements
+  const tagName = element.tagName.toLowerCase();
+  if (['input', 'select', 'textarea', 'button', 'a', 'area'].includes(tagName)) {
+    // For anchor elements, they must have href to be focusable
+    if (tagName === 'a' || tagName === 'area') {
+      return element.hasAttribute('href');
+    }
+    return true;
+  }
+
+  // Check for tabIndex
+  const tabIndex = element.getAttribute('tabindex');
+  if (tabIndex != null && tabIndex !== '-1') {
+    return true;
+  }
+
+  // Check for contenteditable
+  if (element.hasAttribute('contenteditable') && element.getAttribute('contenteditable') !== 'false') {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Checks if a keyboard event should trigger the default action (like clicking).
+ */
+export function isValidKeyboardEvent(event: KeyboardEvent, currentTarget: Element): boolean {
+  const { key, code } = event;
+  const element = currentTarget as HTMLElement;
+  const tagName = element.tagName.toLowerCase();
+  const role = element.getAttribute('role');
+
+  // Only accept Enter and Space
+  const isActivationKey = key === 'Enter' || key === ' ' || key === 'Spacebar' || code === 'Space';
+  if (!isActivationKey) {
+    return false;
+  }
+
+  // Text inputs should handle their own keyboard events
+  if (tagName === 'textarea') {
+    return false;
+  }
+
+  // Content editable elements should handle their own keyboard events
+  if (element.isContentEditable) {
+    return false;
+  }
+
+  // Links should only respond to Enter, not Space
+  const isLink = tagName === 'a' || role === 'link';
+  if (isLink && key !== 'Enter') {
+    return false;
+  }
+
+  // Input elements have specific key handling
+  if (tagName === 'input') {
+    return isValidInputKey(element as HTMLInputElement, key);
+  }
+
+  return true;
+}
+
+/**
+ * Checks if a key is valid for a specific input type.
+ */
+export function isValidInputKey(target: HTMLInputElement, key: string): boolean {
+  const type = target.type.toLowerCase();
+
+  // Checkbox and radio only respond to Space
+  if (type === 'checkbox' || type === 'radio') {
+    return key === ' ' || key === 'Spacebar';
+  }
+
+  // Text-like inputs handle their own keyboard events
+  const textInputTypes = [
+    'text', 'search', 'url', 'tel', 'email', 'password',
+    'date', 'month', 'week', 'time', 'datetime-local', 'number'
+  ];
+  if (textInputTypes.includes(type)) {
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * Checks if an element is an HTML anchor link (has href attribute).
+ */
+export function isHTMLAnchorLink(target: Element): boolean {
+  return target.tagName === 'A' && target.hasAttribute('href');
+}
+
+/**
+ * Whether to prevent default on keyboard events for this element.
+ */
+export function shouldPreventDefaultKeyboard(target: Element, key: string): boolean {
+  const tagName = target.tagName.toLowerCase();
+
+  // Never prevent default on inputs - they handle their own behavior
+  if (tagName === 'input' || tagName === 'textarea' || tagName === 'select') {
+    return false;
+  }
+
+  // Don't prevent default on links for Enter (native navigation)
+  if ((tagName === 'a' || target.getAttribute('role') === 'link') && key === 'Enter') {
+    return false;
+  }
+
+  // Buttons with submit/reset type should not prevent default
+  if (tagName === 'button') {
+    const type = (target as HTMLButtonElement).type;
+    if (type === 'submit' || type === 'reset') {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+/**
+ * Whether to prevent default on pointer up for this element.
+ */
+export function shouldPreventDefaultUp(target: Element): boolean {
+  const tagName = target.tagName.toLowerCase();
+
+  // Never prevent default on form elements
+  if (tagName === 'input' || tagName === 'textarea' || tagName === 'select') {
+    return false;
+  }
+
+  // Don't prevent default on links
+  if (tagName === 'a' || target.getAttribute('role') === 'link') {
+    return false;
+  }
+
+  // Buttons with submit/reset type should not prevent default
+  if (tagName === 'button') {
+    const type = (target as HTMLButtonElement).type;
+    if (type === 'submit' || type === 'reset') {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+/**
+ * Opens a link, supporting both same-window and new-window navigation.
+ * Used for keyboard activation of links with Space key (which doesn't natively open links).
+ */
+export function openLink(target: HTMLAnchorElement, event: Event, allowOpener = false): void {
+  const { href, target: linkTarget, rel } = target;
+
+  // Handle modifier keys for open-in-new-tab behavior
+  const keyEvent = event as KeyboardEvent;
+  const shouldOpenInNewTab =
+    linkTarget === '_blank' ||
+    keyEvent?.metaKey ||
+    keyEvent?.ctrlKey ||
+    keyEvent?.shiftKey ||
+    keyEvent?.altKey;
+
+  if (shouldOpenInNewTab) {
+    const features = !allowOpener && rel?.includes('noopener') ? 'noopener' : undefined;
+    window.open(href, linkTarget || '_blank', features);
+  } else {
+    window.location.href = href;
+  }
+}

package/src/utils/events.ts

@@ -0,0 +1,119 @@
+/**
+ * Event utilities for detecting virtual clicks and event handling.
+ * Based on @react-aria/utils event utilities.
+ */
+
+/**
+ * Checks if a click event was generated from a virtual source like a screen reader.
+ * Virtual clicks typically have detail of 0 and may have zero coordinates.
+ */
+export function isVirtualClick(event: MouseEvent | PointerEvent): boolean {
+  // The detail property is 0 for non-mouse clicks (keyboard, screen reader)
+  // However, we need to be careful about actual clicks at (0,0) or events
+  // that have been re-dispatched
+  if ((event as any).mozInputSource === 0 && event.isTrusted) {
+    // Firefox bug: clicks from screen readers have mozInputSource = 0
+    return true;
+  }
+
+  // Android TalkBack fires click events with detail=1 but offsetX/offsetY = 0
+  if (isAndroidTalkBackClick(event)) {
+    return true;
+  }
+
+  // Screen readers on Safari/Chrome have detail = 0
+  return event.detail === 0 && !(event as PointerEvent).pointerType;
+}
+
+/**
+ * Detects Android TalkBack clicks which have detail=1 but zero offsets.
+ */
+function isAndroidTalkBackClick(event: MouseEvent | PointerEvent): boolean {
+  // TalkBack on Android sends click events with detail=1 but offsetX/Y = 0
+  return (
+    event.detail === 1 &&
+    (event as MouseEvent).offsetX === 0 &&
+    (event as MouseEvent).offsetY === 0
+  );
+}
+
+/**
+ * Checks if a pointer event was generated by a virtual source.
+ * iOS VoiceOver fires pointer events with incorrect coordinates.
+ * These events have zero width/height.
+ */
+export function isVirtualPointerEvent(event: PointerEvent): boolean {
+  // Virtual events typically have no dimensions
+  // iOS VoiceOver fires pointer events with width=0, height=0
+  return (
+    (event.width === 0 && event.height === 0) ||
+    // Some screen readers send events with pointerType but no actual pointer
+    (event.pointerType === 'mouse' &&
+      event.width === 1 &&
+      event.height === 1 &&
+      event.pressure === 0 &&
+      event.detail === 0 &&
+      event.buttons === 0)
+  );
+}
+
+/**
+ * Creates a synthetic mouse event for programmatic clicking.
+ */
+export function createMouseEvent(type: string, nativeEvent?: Event): MouseEvent {
+  const init: MouseEventInit = {
+    bubbles: true,
+    cancelable: true,
+    view: window,
+  };
+
+  // Copy properties from the native event if provided
+  if (nativeEvent) {
+    const e = nativeEvent as MouseEvent;
+    init.screenX = e.screenX;
+    init.screenY = e.screenY;
+    init.clientX = e.clientX;
+    init.clientY = e.clientY;
+    init.ctrlKey = e.ctrlKey;
+    init.shiftKey = e.shiftKey;
+    init.altKey = e.altKey;
+    init.metaKey = e.metaKey;
+    init.button = e.button;
+    init.buttons = e.buttons;
+    init.relatedTarget = e.relatedTarget;
+  }
+
+  return new MouseEvent(type, init);
+}
+
+/**
+ * Creates a chain of event handlers that calls each in sequence.
+ */
+export function chain<T extends (...args: any[]) => any>(
+  ...callbacks: (T | undefined | null)[]
+): T {
+  return ((...args: Parameters<T>) => {
+    for (const callback of callbacks) {
+      if (typeof callback === 'function') {
+        callback(...args);
+      }
+    }
+  }) as T;
+}
+
+/**
+ * Sets the target property on an event object.
+ * Used for synthetic events where target needs to be modified.
+ */
+export function setEventTarget<T extends Event>(event: T, target: EventTarget): void {
+  Object.defineProperty(event, 'target', {
+    value: target,
+    writable: false,
+    configurable: true,
+  });
+  Object.defineProperty(event, 'currentTarget', {
+    value: target,
+    writable: false,
+    configurable: true,
+  });
+}

package/src/utils/filterDOMProps.ts

@@ -0,0 +1,116 @@
+/**
+ * filterDOMProps for Solidaria
+ *
+ * Filters out all props that aren't valid DOM props.
+ * This is a 1:1 port of @react-aria/utils filterDOMProps.
+ */
+
+const DOMPropNames = new Set(['id']);
+
+const labelablePropNames = new Set([
+  'aria-label',
+  'aria-labelledby',
+  'aria-describedby',
+  'aria-details',
+]);
+
+// See LinkDOMProps in dom.d.ts.
+const linkPropNames = new Set([
+  'href',
+  'hrefLang',
+  'target',
+  'rel',
+  'download',
+  'ping',
+  'referrerPolicy',
+]);
+
+const globalAttrs = new Set(['dir', 'lang', 'hidden', 'inert', 'translate']);
+
+const globalEvents = new Set([
+  'onClick',
+  'onAuxClick',
+  'onContextMenu',
+  'onDoubleClick',
+  'onMouseDown',
+  'onMouseEnter',
+  'onMouseLeave',
+  'onMouseMove',
+  'onMouseOut',
+  'onMouseOver',
+  'onMouseUp',
+  'onTouchCancel',
+  'onTouchEnd',
+  'onTouchMove',
+  'onTouchStart',
+  'onPointerDown',
+  'onPointerMove',
+  'onPointerUp',
+  'onPointerCancel',
+  'onPointerEnter',
+  'onPointerLeave',
+  'onPointerOver',
+  'onPointerOut',
+  'onGotPointerCapture',
+  'onLostPointerCapture',
+  'onScroll',
+  'onWheel',
+  'onAnimationStart',
+  'onAnimationEnd',
+  'onAnimationIteration',
+  'onTransitionCancel',
+  'onTransitionEnd',
+  'onTransitionRun',
+  'onTransitionStart',
+]);
+
+const propRe = /^(data-.*)$/;
+
+export interface FilterDOMPropsOptions {
+  /**
+   * If labelling associated aria properties should be included in the filter.
+   */
+  labelable?: boolean;
+  /** Whether the element is a link and should include DOM props for <a> elements. */
+  isLink?: boolean;
+  /** Whether to include global DOM attributes. */
+  global?: boolean;
+  /** Whether to include DOM events. */
+  events?: boolean;
+  /**
+   * A Set of other property names that should be included in the filter.
+   */
+  propNames?: Set<string>;
+}
+
+/**
+ * Filters out all props that aren't valid DOM props or defined via override prop obj.
+ * @param props - The component props to be filtered.
+ * @param opts - Props to override.
+ */
+export function filterDOMProps(
+  props: Record<string, unknown>,
+  opts: FilterDOMPropsOptions = {}
+): Record<string, unknown> {
+  const { labelable, isLink, global, events = global, propNames } = opts;
+  const filteredProps: Record<string, unknown> = {};
+
+  for (const prop in props) {
+    if (
+      Object.prototype.hasOwnProperty.call(props, prop) &&
+      (DOMPropNames.has(prop) ||
+        (labelable && labelablePropNames.has(prop)) ||
+        (isLink && linkPropNames.has(prop)) ||
+        (global && globalAttrs.has(prop)) ||
+        (events &&
+          (globalEvents.has(prop) ||
+            (prop.endsWith('Capture') && globalEvents.has(prop.slice(0, -7))))) ||
+        propNames?.has(prop) ||
+        propRe.test(prop))
+    ) {
+      filteredProps[prop] = props[prop];
+    }
+  }
+
+  return filteredProps;
+}