@proyecto-viviana/solidaria 0.2.8 → 0.3.0

package/src/tabs/createTabs.ts

@@ -3,20 +3,16 @@
  * Based on @react-aria/tabs.
  */
 
-import { type Accessor, createEffect, createMemo } from 'solid-js';
-import { createFocusRing } from '../interactions';
-import { createPress } from '../interactions';
-import { createHover } from '../interactions';
-import { createId } from '../ssr';
-import { useLocale } from '../i18n';
-import type { Key, Collection, CollectionNode } from '@proyecto-viviana/solid-stately';
+import { type Accessor, createEffect, createMemo } from "solid-js";
+import { createFocusRing } from "../interactions";
+import { createPress } from "../interactions";
+import { createHover } from "../interactions";
+import { createId } from "../ssr";
+import { useLocale } from "../i18n";
+import type { Key, Collection, CollectionNode } from "@proyecto-viviana/solid-stately";
 
-// ============================================
-// TYPES
-// ============================================
-
-export type TabOrientation = 'horizontal' | 'vertical';
-export type KeyboardActivation = 'automatic' | 'manual';
+export type TabOrientation = "horizontal" | "vertical";
+export type KeyboardActivation = "automatic" | "manual";
 
 export interface TabListState<T = unknown> {
   collection: Accessor<Collection<T>>;
@@ -42,21 +38,21 @@ export interface AriaTabListProps {
   /** Whether the tab list is disabled. */
   isDisabled?: boolean;
   /** Label for the tab list. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** ID of element that labels the tab list. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** ID of element that describes the tab list. */
-  'aria-describedby'?: string;
+  "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;
+    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;
@@ -69,18 +65,21 @@ export interface AriaTabProps {
   /** Whether the tab is disabled. */
   isDisabled?: boolean;
   /** Label for the tab. */
-  'aria-label'?: string;
+  "aria-label"?: string;
+  /** ID reference for the tab label. */
+  "aria-labelledby"?: 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;
+    role: "tab";
+    "aria-selected": boolean;
+    "aria-disabled": boolean | undefined;
+    "aria-controls": string | undefined;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
     tabIndex: number;
     onKeyDown: (e: KeyboardEvent) => void;
     onMouseDown: (e: MouseEvent) => void;
@@ -106,31 +105,27 @@ export interface AriaTabPanelProps {
   /** The key of the associated tab. */
   id?: Key;
   /** Label for the tab panel. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** ID of element that labels the tab panel. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** ID of element that describes the tab panel. */
-  'aria-describedby'?: string;
+  "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;
+    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 {
@@ -144,23 +139,19 @@ function getTabListId<T>(state: TabListState<T>): string {
 
 function generateTabId<T>(state: TabListState<T>, key: Key): string {
   const baseId = getTabListId(state);
-  const keyStr = String(key).replace(/\s+/g, '-');
+  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, '-');
+  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 keys = [...coll].map((node) => node.key);
   const currentIndex = keys.indexOf(currentKey);
 
   if (currentIndex === -1) return keys[0] ?? null;
@@ -179,7 +170,7 @@ function getNextKey<T>(state: TabListState<T>, currentKey: Key): Key | null {
 
 function getPreviousKey<T>(state: TabListState<T>, currentKey: Key): Key | null {
   const coll = state.collection();
-  const keys = [...coll].map(node => node.key);
+  const keys = [...coll].map((node) => node.key);
   const currentIndex = keys.indexOf(currentKey);
 
   if (currentIndex === -1) return keys[keys.length - 1] ?? null;
@@ -208,7 +199,7 @@ function getFirstKey<T>(state: TabListState<T>): Key | null {
 
 function getLastKey<T>(state: TabListState<T>): Key | null {
   const coll = state.collection();
-  const keys = [...coll].map(node => node.key).reverse();
+  const keys = [...coll].map((node) => node.key).reverse();
   for (const key of keys) {
     if (!state.isKeyDisabled(key)) {
       return key;
@@ -217,20 +208,14 @@ function getLastKey<T>(state: TabListState<T>): Key | null {
   return null;
 }
 
-// ============================================
-// HOOKS
-// ============================================
-
 /**
  * Creates ARIA props for a tab list container.
  */
-export function createTabList<T>(
-  props: AriaTabListProps,
-  state: TabListState<T>
-): TabListAria {
+export function createTabList<T>(props: AriaTabListProps, state: TabListState<T>): TabListAria {
   const locale = useLocale();
-  const orientation = () => props.orientation ?? state.orientation() ?? 'horizontal';
-  const keyboardActivation = () => props.keyboardActivation ?? state.keyboardActivation() ?? 'automatic';
+  const orientation = () => props.orientation ?? state.orientation() ?? "horizontal";
+  const keyboardActivation = () =>
+    props.keyboardActivation ?? state.keyboardActivation() ?? "automatic";
 
   const handleKeyDown = (e: KeyboardEvent) => {
     if (state.isDisabled()) return;
@@ -239,40 +224,40 @@ export function createTabList<T>(
     if (currentKey === null) return;
 
     let nextKey: Key | null = null;
-    const isHorizontal = orientation() === 'horizontal';
-    const isRTL = locale().direction === 'rtl';
+    const isHorizontal = orientation() === "horizontal";
+    const isRTL = locale().direction === "rtl";
 
     switch (e.key) {
-      case 'ArrowLeft':
+      case "ArrowLeft":
         if (isHorizontal) {
           nextKey = isRTL ? getNextKey(state, currentKey) : getPreviousKey(state, currentKey);
         }
         break;
-      case 'ArrowRight':
+      case "ArrowRight":
         if (isHorizontal) {
           nextKey = isRTL ? getPreviousKey(state, currentKey) : getNextKey(state, currentKey);
         }
         break;
-      case 'ArrowUp':
+      case "ArrowUp":
         if (!isHorizontal) {
           nextKey = getPreviousKey(state, currentKey);
         }
         break;
-      case 'ArrowDown':
+      case "ArrowDown":
         if (!isHorizontal) {
           nextKey = getNextKey(state, currentKey);
         }
         break;
-      case 'Home':
+      case "Home":
         nextKey = getFirstKey(state);
         break;
-      case 'End':
+      case "End":
         nextKey = getLastKey(state);
         break;
-      case 'Enter':
-      case ' ':
+      case "Enter":
+      case " ":
         // In manual mode, Enter/Space activates the focused tab
-        if (keyboardActivation() === 'manual' && state.focusedKey()) {
+        if (keyboardActivation() === "manual" && state.focusedKey()) {
           state.setSelectedKey(state.focusedKey()!);
           e.preventDefault();
         }
@@ -306,11 +291,11 @@ export function createTabList<T>(
 
   return {
     tabListProps: {
-      role: 'tablist',
-      'aria-orientation': orientation(),
-      'aria-label': props['aria-label'],
-      'aria-labelledby': props['aria-labelledby'],
-      'aria-describedby': props['aria-describedby'],
+      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,
@@ -324,7 +309,7 @@ export function createTabList<T>(
 export function createTab<T>(
   props: AriaTabProps,
   state: TabListState<T>,
-  ref?: Accessor<HTMLElement | null>
+  ref?: Accessor<HTMLElement | null>,
 ): TabAria {
   const key = () => props.key;
 
@@ -350,7 +335,7 @@ export function createTab<T>(
 
       state.setFocusedKey(tabKey);
 
-      if (state.keyboardActivation() === 'manual' || wasSelected) {
+      if (state.keyboardActivation() === "manual" || wasSelected) {
         state.setSelectedKey(tabKey);
       }
     },
@@ -369,15 +354,11 @@ export function createTab<T>(
 
   // Helper to safely call event handlers that may be bound tuples
   const callHandler = <E extends Event>(handler: unknown, event: E) => {
-    if (typeof handler === 'function') {
+    if (typeof handler === "function") {
       (handler as (e: E) => void)(event);
       return;
     }
-    if (
-      Array.isArray(handler) &&
-      handler.length >= 2 &&
-      typeof handler[1] === 'function'
-    ) {
+    if (Array.isArray(handler) && handler.length >= 2 && typeof handler[1] === "function") {
       (handler[1] as (this: unknown, e: E) => void).call(handler[0], event);
     }
   };
@@ -419,17 +400,18 @@ export function createTab<T>(
   return {
     tabProps: {
       id: tabId,
-      role: 'tab',
-      get 'aria-selected'() {
+      role: "tab",
+      get "aria-selected"() {
         return isSelected();
       },
-      get 'aria-disabled'() {
+      get "aria-disabled"() {
         return isDisabled() || undefined;
       },
-      get 'aria-controls'() {
+      get "aria-controls"() {
         return isSelected() ? tabPanelId : undefined;
       },
-      'aria-label': props['aria-label'],
+      "aria-label": props["aria-label"],
+      "aria-labelledby": props["aria-labelledby"],
       get tabIndex() {
         return isSelected() && !isDisabled() ? 0 : -1;
       },
@@ -453,7 +435,7 @@ export function createTab<T>(
  */
 export function createTabPanel<T>(
   props: AriaTabPanelProps,
-  state: TabListState<T> | null
+  state: TabListState<T> | null,
 ): TabPanelAria {
   const fallbackId = createId();
 
@@ -482,17 +464,17 @@ export function createTabPanel<T>(
         }
         return fallbackId;
       },
-      role: 'tabpanel',
-      get 'aria-labelledby'() {
-        if (props['aria-labelledby']) return props['aria-labelledby'];
+      role: "tabpanel",
+      get "aria-labelledby"() {
+        if (props["aria-labelledby"]) return props["aria-labelledby"];
         const key = associatedKey();
         if (state && key !== null) {
           return generateTabId(state, key);
         }
         return undefined;
       },
-      'aria-label': props['aria-label'],
-      'aria-describedby': props['aria-describedby'],
+      "aria-label": props["aria-label"],
+      "aria-describedby": props["aria-describedby"],
       // Make panel focusable if no tabbable children
       tabIndex: 0,
     },

package/src/tabs/index.ts

@@ -11,4 +11,4 @@ export {
   type TabAria,
   type AriaTabPanelProps,
   type TabPanelAria,
-} from './createTabs';
+} from "./createTabs";

package/src/tag/createTag.ts

@@ -7,19 +7,15 @@
  * 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
-// ============================================
+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";
 
 export interface AriaTagProps {
   /** The unique key for this tag. */
@@ -49,10 +45,6 @@ export interface TagAria {
   isPressed: boolean;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the behavior and accessibility implementation for a tag component.
  * Tags are individual items within a TagGroup.
@@ -60,7 +52,7 @@ export interface TagAria {
 export function createTag<T>(
   props: MaybeAccessor<AriaTagProps>,
   state: ListState<T>,
-  ref: () => HTMLElement | null
+  ref: () => HTMLElement | null,
 ): TagAria {
   const getProps = () => access(props);
   const rowId = createId();
@@ -83,7 +75,7 @@ export function createTag<T>(
     return state.isSelected(key());
   });
 
-  const isSelectable = createMemo(() => state.selectionMode() !== 'none');
+  const isSelectable = createMemo(() => state.selectionMode() !== "none");
 
   const isFocused = createMemo(() => {
     return state.focusedKey() === key();
@@ -157,8 +149,9 @@ export function createTag<T>(
       return;
     }
 
-    const nextTag = Array.from(tagList.querySelectorAll<HTMLElement>('[role="option"]'))
-      .find((el) => el.getAttribute('data-key') === String(nextKey));
+    const nextTag = Array.from(tagList.querySelectorAll<HTMLElement>('[role="row"]')).find(
+      (el) => el.getAttribute("data-key") === String(nextKey),
+    );
 
     nextTag?.focus();
   };
@@ -175,33 +168,36 @@ export function createTag<T>(
   });
 
   // Handle focusable
-  const { focusableProps } = createFocusable({
-    isDisabled,
-    onFocus: () => {
-      state.setFocusedKey(key());
+  const { focusableProps } = createFocusable(
+    {
+      isDisabled,
+      onFocus: () => {
+        state.setFocusedKey(key());
+      },
     },
-  }, ref);
+    ref,
+  );
 
   // Handle keyboard for navigation and removal
   const handleKeyDown = (e: KeyboardEvent) => {
     if (isDisabled()) return;
 
     switch (e.key) {
-      case 'ArrowRight':
-      case 'ArrowDown':
+      case "ArrowRight":
+      case "ArrowDown":
         e.preventDefault();
         focusKey(getNextFocusableKey(key()));
         return;
-      case 'ArrowLeft':
-      case 'ArrowUp':
+      case "ArrowLeft":
+      case "ArrowUp":
         e.preventDefault();
         focusKey(getPreviousFocusableKey(key()));
         return;
-      case 'Home':
+      case "Home":
         e.preventDefault();
         focusKey(getFirstFocusableKey());
         return;
-      case 'End':
+      case "End":
         e.preventDefault();
         focusKey(getLastFocusableKey());
         return;
@@ -209,16 +205,17 @@ export function createTag<T>(
         break;
     }
 
-    if (e.key === 'Delete' || e.key === 'Backspace') {
+    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);
+          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()]));
@@ -242,7 +239,7 @@ export function createTag<T>(
     const collection = state.collection();
     let defaultTabStop: Key | null = null;
 
-    if (state.selectionMode() !== 'none') {
+    if (state.selectionMode() !== "none") {
       for (const item of collection) {
         if (!state.isDisabled(item.key) && state.isSelected(item.key)) {
           defaultTabStop = item.key;
@@ -273,29 +270,34 @@ export function createTag<T>(
 
   return {
     get rowProps() {
-      return mergeProps(domProps(), focusableProps as Record<string, unknown>, pressProps as Record<string, unknown>, {
-        id: rowId,
-        role: 'option',
-        tabIndex: tabIndex(),
-        'data-key': String(key()),
-        'aria-selected': isSelectable() ? isSelected() : undefined,
-        'aria-disabled': isDisabled() || undefined,
-        onKeyDown: handleKeyDown,
-      });
+      return mergeProps(
+        domProps(),
+        focusableProps as Record<string, unknown>,
+        pressProps as Record<string, unknown>,
+        {
+          id: rowId,
+          role: "row",
+          tabIndex: tabIndex(),
+          "data-key": String(key()),
+          "aria-selected": isSelectable() ? isSelected() : undefined,
+          "aria-disabled": isDisabled() || undefined,
+          onKeyDown: handleKeyDown,
+        },
+      );
     },
     get gridCellProps() {
       return {
         id: cellId,
-        role: 'presentation',
-        'aria-describedby': allowsRemoving() ? removeButtonId : undefined,
+        role: "gridcell",
+        "aria-describedby": allowsRemoving() ? removeButtonId : undefined,
       };
     },
     get removeButtonProps() {
       const data = getData();
       return {
         id: removeButtonId,
-        'aria-label': 'Remove',
-        'aria-labelledby': `${removeButtonId} ${rowId}`,
+        "aria-label": "Remove",
+        "aria-labelledby": `${removeButtonId} ${rowId}`,
         isDisabled: isDisabled(),
         onPress: () => {
           if (data?.onRemove && !isDisabled()) {