@proyecto-viviana/solidaria 0.2.4 → 0.2.8

package/src/tree/index.ts

@@ -1,16 +1,16 @@
-/**
- * Tree ARIA layer exports.
- */
-
-export { createTree, getTreeData } from './createTree';
-export { createTreeItem } from './createTreeItem';
-export { createTreeSelectionCheckbox } from './createTreeSelectionCheckbox';
-
-export type {
-  AriaTreeProps,
-  TreeAria,
-  AriaTreeItemProps,
-  TreeItemAria,
-  AriaTreeSelectionCheckboxProps,
-  TreeSelectionCheckboxAria,
-} from './types';
+/**
+ * Tree ARIA layer exports.
+ */
+
+export { createTree, getTreeData } from './createTree';
+export { createTreeItem } from './createTreeItem';
+export { createTreeSelectionCheckbox } from './createTreeSelectionCheckbox';
+
+export type {
+  AriaTreeProps,
+  TreeAria,
+  AriaTreeItemProps,
+  TreeItemAria,
+  AriaTreeSelectionCheckboxProps,
+  TreeSelectionCheckboxAria,
+} from './types';

package/src/tree/types.ts

@@ -1,87 +1,91 @@
-/**
- * Tree ARIA types.
- * Based on @react-aria/tree.
- */
-
-import type { JSX } from 'solid-js';
-import type { Key, TreeNode } from '@proyecto-viviana/solid-stately';
-
-/**
- * Props for createTree.
- */
-export interface AriaTreeProps {
-  /** The unique id for the tree. */
-  id?: string;
-  /** Label for accessibility. */
-  'aria-label'?: string;
-  /** ID of an element that labels the tree. */
-  'aria-labelledby'?: string;
-  /** ID of an element that describes the tree. */
-  'aria-describedby'?: string;
-  /** Whether the tree is virtualized. */
-  isVirtualized?: boolean;
-  /** Handler called when an item action is triggered. */
-  onAction?: (key: Key) => void;
-  /** Whether the tree is disabled. */
-  isDisabled?: boolean;
-}
-
-/**
- * Return value for createTree.
- */
-export interface TreeAria {
-  /** Props for the tree container (role="treegrid"). */
-  treeProps: JSX.HTMLAttributes<HTMLDivElement>;
-}
-
-/**
- * Props for createTreeItem.
- */
-export interface AriaTreeItemProps<T = unknown> {
-  /** The tree node this item represents. */
-  node: TreeNode<T>;
-  /** Whether the item is rendered in a virtualized list. */
-  isVirtualized?: boolean;
-  /** Handler called when this item's action is triggered. */
-  onAction?: () => void;
-}
-
-/**
- * Return value for createTreeItem.
- */
-export interface TreeItemAria {
-  /** Props for the row element. */
-  rowProps: JSX.HTMLAttributes<HTMLDivElement>;
-  /** Props for the grid cell content wrapper. */
-  gridCellProps: JSX.HTMLAttributes<HTMLDivElement>;
-  /** Props for the expand button (if the item is expandable). */
-  expandButtonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-  /** Whether the item is selected. */
-  isSelected: boolean;
-  /** Whether the item is disabled. */
-  isDisabled: boolean;
-  /** Whether the item is being pressed. */
-  isPressed: boolean;
-  /** Whether the item is expanded. */
-  isExpanded: boolean;
-  /** Whether the item is expandable (has children). */
-  isExpandable: boolean;
-  /** The nesting level of the item (0 for root). */
-  level: number;
-}
-
-/**
- * Props for createTreeSelectionCheckbox.
- */
-export interface AriaTreeSelectionCheckboxProps {
-  /** The key of the tree item this checkbox belongs to. */
-  key: Key;
-}
-
-/**
- * Return value for createTreeSelectionCheckbox.
- */
-export interface TreeSelectionCheckboxAria {
-  /** Props for the checkbox input element. */
-  checkboxProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-}
+/**
+ * Tree ARIA types.
+ * Based on @react-aria/tree.
+ */
+
+import type { JSX } from 'solid-js';
+import type { Key, TreeNode } from '@proyecto-viviana/solid-stately';
+
+/**
+ * Props for createTree.
+ */
+export interface AriaTreeProps {
+  /** The unique id for the tree. */
+  id?: string;
+  /** Label for accessibility. */
+  'aria-label'?: string;
+  /** ID of an element that labels the tree. */
+  'aria-labelledby'?: string;
+  /** ID of an element that describes the tree. */
+  'aria-describedby'?: string;
+  /** Whether the tree is virtualized. */
+  isVirtualized?: boolean;
+  /** Handler called when an item action is triggered. */
+  onAction?: (key: Key) => void;
+  /** Whether the tree is disabled. */
+  isDisabled?: boolean;
+  /** The writing direction for the tree. Determines expand/collapse key mapping. */
+  direction?: 'ltr' | 'rtl';
+}
+
+/**
+ * Return value for createTree.
+ */
+export interface TreeAria {
+  /** Props for the tree container (role="treegrid"). */
+  treeProps: JSX.HTMLAttributes<HTMLDivElement>;
+}
+
+/**
+ * Props for createTreeItem.
+ */
+export interface AriaTreeItemProps<T = unknown> {
+  /** The tree node this item represents. */
+  node: TreeNode<T>;
+  /** Whether the item is rendered in a virtualized list. */
+  isVirtualized?: boolean;
+  /** Handler called when this item's action is triggered. */
+  onAction?: () => void;
+  /** The text value for the item (used for aria-label on the row). */
+  textValue?: string;
+}
+
+/**
+ * Return value for createTreeItem.
+ */
+export interface TreeItemAria {
+  /** Props for the row element. */
+  rowProps: JSX.HTMLAttributes<HTMLDivElement>;
+  /** Props for the grid cell content wrapper. */
+  gridCellProps: JSX.HTMLAttributes<HTMLDivElement>;
+  /** Props for the expand button (if the item is expandable). */
+  expandButtonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+  /** Whether the item is selected. */
+  isSelected: boolean;
+  /** Whether the item is disabled. */
+  isDisabled: boolean;
+  /** Whether the item is being pressed. */
+  isPressed: boolean;
+  /** Whether the item is expanded. */
+  isExpanded: boolean;
+  /** Whether the item is expandable (has children). */
+  isExpandable: boolean;
+  /** The nesting level of the item (0 for root). */
+  level: number;
+}
+
+/**
+ * Props for createTreeSelectionCheckbox.
+ */
+export interface AriaTreeSelectionCheckboxProps {
+  /** The key of the tree item this checkbox belongs to. */
+  key: Key;
+}
+
+/**
+ * Return value for createTreeSelectionCheckbox.
+ */
+export interface TreeSelectionCheckboxAria {
+  /** Props for the checkbox input element. */
+  checkboxProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+}

package/src/utils/env.ts

@@ -1,54 +1,55 @@
-/**
- * Environment detection utilities.
- * These avoid direct references to process.env which can cause TypeScript issues in browser environments.
- * Compatible with Node.js, Deno, and Vite environments.
- */
-
-// Type-safe access to import.meta.env (Vite) and Deno.env
-declare const Deno: { env?: { get(key: string): string | undefined } } | undefined;
-
-function getEnvVar(key: string): string | undefined {
-  // Check Vite's import.meta.env
-  if (typeof import.meta !== 'undefined' && (import.meta as any).env) {
-    return (import.meta as any).env[key];
-  }
-  // Check Deno
-  if (typeof Deno !== 'undefined' && Deno.env) {
-    return Deno.env.get(key);
-  }
-  // Check Node.js process.env via globalThis
-  if (typeof globalThis !== 'undefined' && (globalThis as any).process?.env) {
-    return (globalThis as any).process.env[key];
-  }
-  return undefined;
-}
-
-/**
- * Check if we're running in a test environment.
- */
-export function isTestEnv(): boolean {
-  return getEnvVar('NODE_ENV') === 'test';
-}
-
-/**
- * Check if we're running in a development environment (not production).
- */
-export function isDevEnv(): boolean {
-  // Check Vite's DEV flag
-  if (typeof import.meta !== 'undefined' && (import.meta as any).env?.DEV) {
-    return true;
-  }
-  const nodeEnv = getEnvVar('NODE_ENV');
-  return nodeEnv !== 'production';
-}
-
-/**
- * Check if we're running in production.
- */
-export function isProdEnv(): boolean {
-  // Check Vite's PROD flag
-  if (typeof import.meta !== 'undefined' && (import.meta as any).env?.PROD) {
-    return true;
-  }
-  return getEnvVar('NODE_ENV') === 'production';
-}
+/**
+ * Environment detection utilities.
+ * These avoid direct references to process.env which can cause TypeScript issues in browser environments.
+ * Compatible with Node.js and Vite environments.
+ */
+
+// Type-safe access to import.meta.env (Vite) and process.env
+type ImportMetaWithEnv = ImportMeta & { env?: Record<string, unknown> & { DEV?: boolean; PROD?: boolean } };
+type ProcessLike = { env?: Record<string, string | undefined> };
+
+function getEnvVar(key: string): string | undefined {
+  // Check Vite's import.meta.env
+  const importMetaEnv = (import.meta as ImportMetaWithEnv).env;
+  if (importMetaEnv && typeof importMetaEnv[key] === 'string') {
+    return importMetaEnv[key] as string;
+  }
+  // Check Node.js process.env via globalThis
+  const processEnv = (globalThis as typeof globalThis & { process?: ProcessLike }).process?.env;
+  if (processEnv) {
+    return processEnv[key];
+  }
+  return undefined;
+}
+
+/**
+ * Check if we're running in a test environment.
+ */
+export function isTestEnv(): boolean {
+  return getEnvVar('NODE_ENV') === 'test';
+}
+
+/**
+ * Check if we're running in a development environment (not production).
+ */
+export function isDevEnv(): boolean {
+  // Check Vite's DEV flag
+  const importMetaEnv = (import.meta as ImportMetaWithEnv).env;
+  if (importMetaEnv?.DEV === true) {
+    return true;
+  }
+  const nodeEnv = getEnvVar('NODE_ENV');
+  return nodeEnv !== 'production';
+}
+
+/**
+ * Check if we're running in production.
+ */
+export function isProdEnv(): boolean {
+  // Check Vite's PROD flag
+  const importMetaEnv = (import.meta as ImportMetaWithEnv).env;
+  if (importMetaEnv?.PROD === true) {
+    return true;
+  }
+  return getEnvVar('NODE_ENV') === 'production';
+}

package/src/utils/platform.ts

@@ -3,16 +3,26 @@
  * Based on @react-aria/utils platform detection.
  */
 
+interface NavigatorWithUserAgentData extends Navigator {
+  userAgentData?: {
+    platform?: string;
+  };
+}
+
+function getNavigator(): NavigatorWithUserAgentData | null {
+  if (typeof window === 'undefined' || window.navigator == null) return null;
+  return window.navigator as NavigatorWithUserAgentData;
+}
+
 function testPlatform(re: RegExp): boolean {
-  return typeof window !== 'undefined' && window.navigator != null
-    ? re.test(window.navigator.platform || (window.navigator as any).userAgentData?.platform || '')
-    : false;
+  const nav = getNavigator();
+  if (!nav) return false;
+  return re.test(nav.platform || nav.userAgentData?.platform || '');
 }
 
 function testUserAgent(re: RegExp): boolean {
-  return typeof window !== 'undefined' && window.navigator != null
-    ? re.test(window.navigator.userAgent)
-    : false;
+  const nav = getNavigator();
+  return nav ? re.test(nav.userAgent) : false;
 }
 
 export function isMac(): boolean {

package/src/visually-hidden/createVisuallyHidden.ts

@@ -1,124 +1,139 @@
-/**
- * createVisuallyHidden hook for solidaria
- *
- * Provides styles and props to visually hide content while keeping it
- * accessible to screen readers.
- *
- * Port of react-aria's useVisuallyHidden.
- */
-
-import { type Accessor, type JSX, createMemo, createSignal } from 'solid-js';
-import { createFocusWithin } from '../interactions/createFocusWithin';
-import { access, type MaybeAccessor } from '../utils';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface AriaVisuallyHiddenProps {
-  /** Inline styles to merge with the visually hidden styles. */
-  style?: JSX.CSSProperties;
-  /** Whether the element should become visible when focused (e.g., skip links). */
-  isFocusable?: boolean;
-}
-
-export interface VisuallyHiddenAria {
-  /** Props to spread on the visually hidden element. */
-  visuallyHiddenProps: Accessor<JSX.HTMLAttributes<HTMLElement>>;
-}
-
-// ============================================
-// STYLES
-// ============================================
-
-/**
- * CSS styles that visually hide an element while keeping it accessible.
- * These styles ensure the element is read by screen readers but not visible on screen.
- */
-export const visuallyHiddenStyles: JSX.CSSProperties = {
-  border: '0',
-  clip: 'rect(0 0 0 0)',
-  'clip-path': 'inset(50%)',
-  height: '1px',
-  margin: '-1px',
-  overflow: 'hidden',
-  padding: '0',
-  position: 'absolute',
-  width: '1px',
-  'white-space': 'nowrap',
-};
-
-// ============================================
-// HOOK
-// ============================================
-
-/**
- * Provides props for an element that hides its children visually
- * but keeps content visible to assistive technology.
- *
- * @example
- * ```tsx
- * function SkipLink() {
- *   let ref: HTMLAnchorElement | undefined;
- *   const { visuallyHiddenProps } = createVisuallyHidden({ isFocusable: true });
- *
- *   return (
- *     <a
- *       ref={ref}
- *       href="#main-content"
- *       {...visuallyHiddenProps()}
- *     >
- *       Skip to main content
- *     </a>
- *   );
- * }
- *
- * // For content that should always be hidden
- * function ScreenReaderOnly(props: ParentProps) {
- *   const { visuallyHiddenProps } = createVisuallyHidden();
- *
- *   return (
- *     <span {...visuallyHiddenProps()}>
- *       {props.children}
- *     </span>
- *   );
- * }
- * ```
- */
-export function createVisuallyHidden(
-  props: MaybeAccessor<AriaVisuallyHiddenProps> = {}
-): VisuallyHiddenAria {
-  const [isFocused, setIsFocused] = createSignal(false);
-
-  const isFocusable = () => access(props).isFocusable ?? false;
-  const style = () => access(props).style;
-
-  // Track focus within for focusable visually hidden elements
-  const { focusWithinProps } = createFocusWithin({
-    get isDisabled() {
-      return !isFocusable();
-    },
-    onFocusWithinChange: (val: boolean) => setIsFocused(val),
-  });
-
-  // Compute combined styles
-  const combinedStyles = createMemo<JSX.CSSProperties>(() => {
-    if (isFocused()) {
-      // If focused, show the element (for skip links, etc.)
-      return style() ?? {};
-    } else if (style()) {
-      return { ...visuallyHiddenStyles, ...style() };
-    } else {
-      return visuallyHiddenStyles;
-    }
-  });
-
-  const visuallyHiddenProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({
-    ...focusWithinProps,
-    style: combinedStyles(),
-  }));
-
-  return {
-    visuallyHiddenProps,
-  };
-}
+/**
+ * createVisuallyHidden hook for solidaria
+ *
+ * Provides styles and props to visually hide content while keeping it
+ * accessible to screen readers.
+ *
+ * Port of react-aria's useVisuallyHidden.
+ */
+
+import { type Accessor, type JSX, createMemo, createSignal } from 'solid-js';
+import { createFocusWithin } from '../interactions/createFocusWithin';
+import { access, type MaybeAccessor } from '../utils';
+import { mergeProps } from '../utils/mergeProps';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface AriaVisuallyHiddenProps {
+  /** Inline styles to merge with the visually hidden styles. */
+  style?: JSX.CSSProperties;
+  /** Whether the element should become visible when focused (e.g., skip links). */
+  isFocusable?: boolean;
+}
+
+export interface VisuallyHiddenAria {
+  /** Props to spread on the visually hidden element. */
+  visuallyHiddenProps: Accessor<JSX.HTMLAttributes<HTMLElement>>;
+}
+
+// ============================================
+// STYLES
+// ============================================
+
+/**
+ * CSS styles that visually hide an element while keeping it accessible.
+ * These styles ensure the element is read by screen readers but not visible on screen.
+ */
+export const visuallyHiddenStyles: JSX.CSSProperties = {
+  border: '0',
+  clip: 'rect(0 0 0 0)',
+  'clip-path': 'inset(50%)',
+  height: '1px',
+  margin: '-1px',
+  overflow: 'hidden',
+  padding: '0',
+  position: 'absolute',
+  width: '1px',
+  'white-space': 'nowrap',
+};
+
+// ============================================
+// HOOK
+// ============================================
+
+/**
+ * Provides props for an element that hides its children visually
+ * but keeps content visible to assistive technology.
+ *
+ * @example
+ * ```tsx
+ * function SkipLink() {
+ *   let ref: HTMLAnchorElement | undefined;
+ *   const { visuallyHiddenProps } = createVisuallyHidden({ isFocusable: true });
+ *
+ *   return (
+ *     <a
+ *       ref={ref}
+ *       href="#main-content"
+ *       {...visuallyHiddenProps()}
+ *     >
+ *       Skip to main content
+ *     </a>
+ *   );
+ * }
+ *
+ * // For content that should always be hidden
+ * function ScreenReaderOnly(props: ParentProps) {
+ *   const { visuallyHiddenProps } = createVisuallyHidden();
+ *
+ *   return (
+ *     <span {...visuallyHiddenProps()}>
+ *       {props.children}
+ *     </span>
+ *   );
+ * }
+ * ```
+ */
+export function createVisuallyHidden(
+  props: MaybeAccessor<AriaVisuallyHiddenProps> = {}
+): VisuallyHiddenAria {
+  const [isFocused, setIsFocused] = createSignal(false);
+
+  const isFocusable = () => access(props).isFocusable ?? false;
+  const style = () => access(props).style;
+
+  // Track focus within for focusable visually hidden elements
+  const { focusWithinProps } = createFocusWithin({
+    get isDisabled() {
+      return !isFocusable();
+    },
+    onFocusWithinChange: (val: boolean) => setIsFocused(val),
+  });
+
+  // Compute combined styles
+  const combinedStyles = createMemo<JSX.CSSProperties | undefined>(() => {
+    if (isFocused()) {
+      // If focused, show the element (for skip links, etc.)
+      return style();
+    } else if (style()) {
+      return { ...visuallyHiddenStyles, ...style() };
+    } else {
+      return visuallyHiddenStyles;
+    }
+  });
+
+  const visuallyHiddenProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({
+    ...mergeProps(
+      focusWithinProps as unknown as Record<string, unknown>,
+      isFocusable()
+        ? {
+            onFocusIn: () => setIsFocused(true),
+            onFocusOut: (e: FocusEvent) => {
+              const currentTarget = e.currentTarget as Element | null;
+              const relatedTarget = e.relatedTarget as Element | null;
+              if (currentTarget && !currentTarget.contains(relatedTarget)) {
+                setIsFocused(false);
+              }
+            },
+          }
+        : {},
+      { style: combinedStyles() }
+    ),
+  }));
+
+  return {
+    visuallyHiddenProps,
+  };
+}

package/src/visually-hidden/index.ts

@@ -1,6 +1,6 @@
-export {
-  createVisuallyHidden,
-  visuallyHiddenStyles,
-  type AriaVisuallyHiddenProps,
-  type VisuallyHiddenAria,
-} from './createVisuallyHidden';
+export {
+  createVisuallyHidden,
+  visuallyHiddenStyles,
+  type AriaVisuallyHiddenProps,
+  type VisuallyHiddenAria,
+} from './createVisuallyHidden';