@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/dist/_chunk/autocomplete.js

@@ -0,0 +1,196 @@
+import { createId, getOwnerDocument } from "../ssr/index.js";
+import { createEffect, createSignal, onCleanup } from "solid-js";
+//#region src/autocomplete/createAutocomplete.ts
+/**
+* createAutocomplete - Accessibility hook for autocomplete components
+*
+* Provides keyboard navigation, virtual focus via aria-activedescendant,
+* and filtering capabilities for autocomplete inputs.
+*
+* Based on @react-aria/autocomplete useAutocomplete.
+*/
+function toKeyboardEventInit(e) {
+	return {
+		key: e.key,
+		code: e.code,
+		location: e.location,
+		repeat: e.repeat,
+		isComposing: e.isComposing,
+		ctrlKey: e.ctrlKey,
+		shiftKey: e.shiftKey,
+		altKey: e.altKey,
+		metaKey: e.metaKey,
+		bubbles: e.bubbles,
+		cancelable: e.cancelable
+	};
+}
+const AUTOCOMPLETE_FOCUS_EVENT = "autocomplete:focus";
+const AUTOCOMPLETE_CLEAR_FOCUS_EVENT = "autocomplete:clearfocus";
+/**
+* Provides the behavior and accessibility implementation for an autocomplete component.
+* An autocomplete combines a text input with a collection, allowing users to filter
+* the collection's contents to match a query.
+*
+* @example
+* ```tsx
+* const state = createAutocompleteState({ defaultInputValue: '' });
+* let inputRef, collectionRef;
+*
+* const { inputProps, collectionProps, filter } = createAutocomplete({
+*   inputRef: () => inputRef,
+*   collectionRef: () => collectionRef,
+*   filter: (textValue, inputValue) =>
+*     textValue.toLowerCase().includes(inputValue.toLowerCase()),
+* }, state);
+*
+* return (
+*   <div>
+*     <input ref={inputRef} {...inputProps} />
+*     <ul ref={collectionRef} {...collectionProps}>
+*       {items.filter(item => filter?.(item.name) ?? true).map(item => (
+*         <li key={item.id}>{item.name}</li>
+*       ))}
+*     </ul>
+*   </div>
+* );
+* ```
+*/
+function createAutocomplete(props, state) {
+	const { inputRef, collectionRef, filter, collectionId: collectionIdProp, collectionAriaLabel, disableAutoFocusFirst = false, disableVirtualFocus = false } = props;
+	const collectionId = collectionIdProp ?? createId();
+	const [shouldUseVirtualFocus] = createSignal(!disableVirtualFocus);
+	const [autoFocusOnMount, setAutoFocusOnMount] = createSignal(false);
+	let lastInputType = "";
+	const handleBeforeInput = (e) => {
+		lastInputType = e.inputType || "";
+	};
+	createEffect(() => {
+		const input = inputRef();
+		if (input) {
+			input.addEventListener("beforeinput", handleBeforeInput);
+			onCleanup(() => {
+				input.removeEventListener("beforeinput", handleBeforeInput);
+			});
+		}
+	});
+	const focusFirstItem = () => {
+		const collection = collectionRef();
+		if (!collection) {
+			setAutoFocusOnMount(true);
+			return;
+		}
+		collection.dispatchEvent(new CustomEvent(AUTOCOMPLETE_FOCUS_EVENT, {
+			cancelable: true,
+			bubbles: true,
+			detail: { focusStrategy: "first" }
+		}));
+	};
+	const clearVirtualFocus = (clearFocusKey = false) => {
+		setAutoFocusOnMount(false);
+		state.setFocusedNodeId(null);
+		const collection = collectionRef();
+		if (collection) collection.dispatchEvent(new CustomEvent(AUTOCOMPLETE_CLEAR_FOCUS_EVENT, {
+			cancelable: true,
+			bubbles: true,
+			detail: { clearFocusKey }
+		}));
+	};
+	const onChange = (value) => {
+		if ((lastInputType === "insertText" || lastInputType === "insertCompositionText" || lastInputType === "insertFromComposition") && !disableAutoFocusFirst) focusFirstItem();
+		else if (lastInputType && (lastInputType.includes("insert") || lastInputType.includes("delete") || lastInputType.includes("history"))) clearVirtualFocus(true);
+		state.setInputValue(value);
+	};
+	const onKeyDown = (e) => {
+		if ("isComposing" in e && e.isComposing) return;
+		const focusedNodeId = state.focusedNodeId();
+		const collection = collectionRef();
+		const ownerDocument = getOwnerDocument(inputRef() ?? collection);
+		switch (e.key) {
+			case "Escape":
+				if (e.defaultPrevented) return;
+				break;
+			case " ": return;
+			case "Tab": return;
+			case "ArrowUp":
+			case "ArrowDown":
+			case "Home":
+			case "End":
+			case "PageUp":
+			case "PageDown":
+				e.preventDefault();
+				if (collection) collection.dispatchEvent(new CustomEvent(AUTOCOMPLETE_FOCUS_EVENT, {
+					cancelable: true,
+					bubbles: true
+				}));
+				break;
+			case "ArrowLeft":
+			case "ArrowRight":
+				if (!focusedNodeId) {
+					e.stopPropagation();
+					return;
+				}
+				break;
+			case "Enter":
+				if (focusedNodeId) {
+					const item = ownerDocument?.getElementById(focusedNodeId);
+					if (item) {
+						item.click();
+						e.preventDefault();
+					}
+				}
+				return;
+		}
+		if (!e.defaultPrevented && collection) {
+			e.stopPropagation();
+			let shouldPerformDefaultAction = true;
+			if (focusedNodeId) {
+				const item = ownerDocument?.getElementById(focusedNodeId);
+				if (item) shouldPerformDefaultAction = item.dispatchEvent(new KeyboardEvent(e.type, toKeyboardEventInit(e)));
+			} else shouldPerformDefaultAction = collection.dispatchEvent(new KeyboardEvent(e.type, toKeyboardEventInit(e)));
+			if (shouldPerformDefaultAction && (e.key === "ArrowLeft" || e.key === "ArrowRight")) clearVirtualFocus();
+		}
+	};
+	const onFocus = (e) => {
+		if (!e.isTrusted) return;
+		const focusedNodeId = state.focusedNodeId();
+		if (focusedNodeId) {
+			if (document.getElementById(focusedNodeId)) {}
+		}
+	};
+	const onBlur = (e) => {
+		if (!e.isTrusted) return;
+	};
+	const filterFn = filter ? (textValue) => filter(textValue, state.inputValue()) : void 0;
+	return {
+		inputProps: {
+			value: state.inputValue,
+			onChange,
+			onKeyDown,
+			onFocus,
+			onBlur,
+			get "aria-activedescendant"() {
+				return () => shouldUseVirtualFocus() ? state.focusedNodeId() ?? void 0 : void 0;
+			},
+			"aria-controls": collectionId,
+			"aria-autocomplete": "list",
+			enterKeyHint: "go",
+			autoCorrect: "off",
+			spellCheck: "false",
+			autoComplete: "off"
+		},
+		collectionProps: {
+			id: collectionId,
+			"aria-label": collectionAriaLabel,
+			shouldUseVirtualFocus: shouldUseVirtualFocus(),
+			disallowTypeAhead: shouldUseVirtualFocus(),
+			get autoFocus() {
+				return autoFocusOnMount() ? "first" : false;
+			}
+		},
+		filter: filterFn
+	};
+}
+//#endregion
+export { AUTOCOMPLETE_FOCUS_EVENT as n, createAutocomplete as r, AUTOCOMPLETE_CLEAR_FOCUS_EVENT as t };
+
+//# sourceMappingURL=autocomplete.js.map

package/dist/_chunk/autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.js","names":["inputEvent"],"sources":["../../src/autocomplete/createAutocomplete.ts"],"sourcesContent":["/**\n * createAutocomplete - Accessibility hook for autocomplete components\n *\n * Provides keyboard navigation, virtual focus via aria-activedescendant,\n * and filtering capabilities for autocomplete inputs.\n *\n * Based on @react-aria/autocomplete useAutocomplete.\n */\n\nimport { createSignal, createEffect, onCleanup, type Accessor } from \"solid-js\";\nimport { createId, getOwnerDocument } from \"../ssr\";\nimport { type AutocompleteState } from \"@proyecto-viviana/solid-stately\";\n\nexport interface CollectionOptions {\n  /** The id of the collection element. */\n  id?: string;\n  /** Accessible label for the collection. */\n  \"aria-label\"?: string;\n  /** Whether the collection items should use virtual focus instead of being focused directly. */\n  shouldUseVirtualFocus: boolean;\n  /** Whether typeahead is disabled. */\n  disallowTypeAhead: boolean;\n  /** Whether and where to focus an item when the collection mounts. */\n  autoFocus?: boolean | \"first\" | \"last\";\n}\n\nexport interface AutocompleteInputProps {\n  /** Current input value. */\n  value: Accessor<string>;\n  /** Handler for input value changes. */\n  onChange: (value: string) => void;\n  /** Handler for key events. */\n  onKeyDown: (e: KeyboardEvent) => void;\n  /** Handler for focus events. */\n  onFocus: (e: FocusEvent) => void;\n  /** Handler for blur events. */\n  onBlur: (e: FocusEvent) => void;\n  /** The id of the currently focused item for aria-activedescendant. */\n  \"aria-activedescendant\": Accessor<string | undefined>;\n  /** The id of the controlled collection. */\n  \"aria-controls\": string;\n  /** Autocomplete type. */\n  \"aria-autocomplete\": \"list\" | \"none\" | \"inline\" | \"both\";\n  /** Enter key hint for mobile keyboards. */\n  enterKeyHint: \"go\";\n  /** Disable autocorrect. */\n  autoCorrect: \"off\";\n  /** Disable spell check. */\n  spellCheck: \"false\";\n  /** Disable browser autocomplete. */\n  autoComplete: \"off\";\n}\n\nexport interface AriaAutocompleteOptions<_T = unknown> {\n  /** Ref accessor for the input element. */\n  inputRef: Accessor<HTMLInputElement | undefined>;\n  /** Ref accessor for the collection element. */\n  collectionRef: Accessor<HTMLElement | undefined>;\n  /** Optional id override for the controlled collection element. */\n  collectionId?: string;\n  /** Optional accessible name for the controlled collection element. */\n  collectionAriaLabel?: string;\n  /**\n   * An optional filter function used to determine if an option should be included.\n   * @param textValue - The text value of the item\n   * @param inputValue - The current input value\n   */\n  filter?: (textValue: string, inputValue: string) => boolean;\n  /**\n   * Whether to focus the first item after filtering.\n   * @default false\n   */\n  disableAutoFocusFirst?: boolean;\n  /**\n   * Whether to disable virtual focus (aria-activedescendant).\n   * @default false\n   */\n  disableVirtualFocus?: boolean;\n}\n\nexport interface AutocompleteAria<_T = unknown> {\n  /** Props for the autocomplete input element. */\n  inputProps: AutocompleteInputProps;\n  /** Props for the collection (ListBox/Menu). */\n  collectionProps: CollectionOptions;\n  /** A filter function that returns if the item should be shown. */\n  filter?: (textValue: string) => boolean;\n}\n\nfunction toKeyboardEventInit(e: KeyboardEvent): KeyboardEventInit {\n  return {\n    key: e.key,\n    code: e.code,\n    location: e.location,\n    repeat: e.repeat,\n    isComposing: e.isComposing,\n    ctrlKey: e.ctrlKey,\n    shiftKey: e.shiftKey,\n    altKey: e.altKey,\n    metaKey: e.metaKey,\n    bubbles: e.bubbles,\n    cancelable: e.cancelable,\n  };\n}\n\n// Custom event names for collection communication\nexport const AUTOCOMPLETE_FOCUS_EVENT = \"autocomplete:focus\";\nexport const AUTOCOMPLETE_CLEAR_FOCUS_EVENT = \"autocomplete:clearfocus\";\n\n/**\n * Provides the behavior and accessibility implementation for an autocomplete component.\n * An autocomplete combines a text input with a collection, allowing users to filter\n * the collection's contents to match a query.\n *\n * @example\n * ```tsx\n * const state = createAutocompleteState({ defaultInputValue: '' });\n * let inputRef, collectionRef;\n *\n * const { inputProps, collectionProps, filter } = createAutocomplete({\n *   inputRef: () => inputRef,\n *   collectionRef: () => collectionRef,\n *   filter: (textValue, inputValue) =>\n *     textValue.toLowerCase().includes(inputValue.toLowerCase()),\n * }, state);\n *\n * return (\n *   <div>\n *     <input ref={inputRef} {...inputProps} />\n *     <ul ref={collectionRef} {...collectionProps}>\n *       {items.filter(item => filter?.(item.name) ?? true).map(item => (\n *         <li key={item.id}>{item.name}</li>\n *       ))}\n *     </ul>\n *   </div>\n * );\n * ```\n */\nexport function createAutocomplete<T = unknown>(\n  props: AriaAutocompleteOptions<T>,\n  state: AutocompleteState,\n): AutocompleteAria<T> {\n  const {\n    inputRef,\n    collectionRef,\n    filter,\n    collectionId: collectionIdProp,\n    collectionAriaLabel,\n    disableAutoFocusFirst = false,\n    disableVirtualFocus = false,\n  } = props;\n\n  const collectionId = collectionIdProp ?? createId();\n  const [shouldUseVirtualFocus] = createSignal(!disableVirtualFocus);\n  // When the first item should be focused but the collection hasn't mounted yet,\n  // defer it by threading autoFocus through collectionProps so the collection\n  // focuses on mount (mirrors upstream's autoFocusOnMount state).\n  const [autoFocusOnMount, setAutoFocusOnMount] = createSignal(false);\n  let lastInputType = \"\";\n\n  // Track the input type for determining focus behavior. We listen to\n  // `beforeinput` (not `input`) so `lastInputType` is set before the input's\n  // `onChange` runs, mirroring @react-aria/autocomplete.\n  const handleBeforeInput = (e: Event) => {\n    const inputEvent = e as InputEvent;\n    lastInputType = inputEvent.inputType || \"\";\n  };\n\n  // Set up beforeinput event listener\n  createEffect(() => {\n    const input = inputRef();\n    if (input) {\n      input.addEventListener(\"beforeinput\", handleBeforeInput);\n      onCleanup(() => {\n        input.removeEventListener(\"beforeinput\", handleBeforeInput);\n      });\n    }\n  });\n\n  // Focus first item in collection\n  const focusFirstItem = () => {\n    const collection = collectionRef();\n    if (!collection) {\n      // Collection isn't mounted yet — defer focusing the first item to mount\n      // time via collectionProps.autoFocus instead of firing a focus event into\n      // a not-yet-rendered collection.\n      setAutoFocusOnMount(true);\n      return;\n    }\n    collection.dispatchEvent(\n      new CustomEvent(AUTOCOMPLETE_FOCUS_EVENT, {\n        cancelable: true,\n        bubbles: true,\n        detail: { focusStrategy: \"first\" },\n      }),\n    );\n  };\n\n  // Clear virtual focus\n  const clearVirtualFocus = (clearFocusKey = false) => {\n    setAutoFocusOnMount(false);\n    state.setFocusedNodeId(null);\n    const collection = collectionRef();\n    if (collection) {\n      collection.dispatchEvent(\n        new CustomEvent(AUTOCOMPLETE_CLEAR_FOCUS_EVENT, {\n          cancelable: true,\n          bubbles: true,\n          detail: { clearFocusKey },\n        }),\n      );\n    }\n  };\n\n  // Handle input value changes\n  const onChange = (value: string) => {\n    // Focus first item when typing forward, clear when backspacing/pasting.\n    // IME composition (e.g. CJK input) reports 'insertCompositionText'/\n    // 'insertFromComposition' instead of 'insertText'; treat those as forward\n    // typing so the first item still gets virtual focus.\n    if (\n      (lastInputType === \"insertText\" ||\n        lastInputType === \"insertCompositionText\" ||\n        lastInputType === \"insertFromComposition\") &&\n      !disableAutoFocusFirst\n    ) {\n      focusFirstItem();\n    } else if (\n      lastInputType &&\n      (lastInputType.includes(\"insert\") ||\n        lastInputType.includes(\"delete\") ||\n        lastInputType.includes(\"history\"))\n    ) {\n      clearVirtualFocus(true);\n    }\n\n    state.setInputValue(value);\n  };\n\n  // Handle keyboard navigation\n  const onKeyDown = (e: KeyboardEvent) => {\n    if (\"isComposing\" in e && e.isComposing) {\n      return;\n    }\n\n    const focusedNodeId = state.focusedNodeId();\n    const collection = collectionRef();\n    const ownerDocument = getOwnerDocument(inputRef() ?? collection);\n\n    switch (e.key) {\n      case \"Escape\":\n        // Let the input handle Escape (e.g., clear value)\n        if (e.defaultPrevented) {\n          return;\n        }\n        break;\n\n      case \" \":\n        // Space shouldn't trigger item action\n        return;\n\n      case \"Tab\":\n        // Let Tab propagate normally for focus management\n        return;\n\n      case \"ArrowUp\":\n      case \"ArrowDown\":\n      case \"Home\":\n      case \"End\":\n      case \"PageUp\":\n      case \"PageDown\": {\n        // Prevent cursor movement in input\n        e.preventDefault();\n\n        // Dispatch focus event to collection\n        if (collection) {\n          collection.dispatchEvent(\n            new CustomEvent(AUTOCOMPLETE_FOCUS_EVENT, {\n              cancelable: true,\n              bubbles: true,\n            }),\n          );\n        }\n        break;\n      }\n\n      case \"ArrowLeft\":\n      case \"ArrowRight\":\n        // With no virtual focus, just let the arrow move the text cursor; stop\n        // propagation so it doesn't leak into the collection. With virtual focus,\n        // fall through to dispatch the key to the focused item below, then clear\n        // the active descendant only after the item has seen it.\n        if (!focusedNodeId) {\n          e.stopPropagation();\n          return;\n        }\n        break;\n\n      case \"Enter\":\n        // Trigger click on focused item\n        if (focusedNodeId) {\n          const item = ownerDocument?.getElementById(focusedNodeId);\n          if (item) {\n            item.click();\n            e.preventDefault();\n          }\n        }\n        return;\n    }\n\n    // Forward keyboard events to the focused item (or the collection when there\n    // is no virtual focus) so the collection can act on them, e.g. onAction.\n    if (!e.defaultPrevented && collection) {\n      e.stopPropagation();\n\n      let shouldPerformDefaultAction = true;\n      if (focusedNodeId) {\n        const item = ownerDocument?.getElementById(focusedNodeId);\n        if (item) {\n          shouldPerformDefaultAction = item.dispatchEvent(\n            new KeyboardEvent(e.type, toKeyboardEventInit(e)),\n          );\n        }\n      } else {\n        shouldPerformDefaultAction = collection.dispatchEvent(\n          new KeyboardEvent(e.type, toKeyboardEventInit(e)),\n        );\n      }\n\n      // After the focused item has seen ArrowLeft/ArrowRight, clear the active\n      // descendant so SR announcements aren't interrupted, but retain the\n      // collection's focused key so navigation restarts where it left off. If\n      // the item consumed the key (e.g. an expandable row collapsing), it\n      // cancels the event and we keep virtual focus.\n      if (shouldPerformDefaultAction && (e.key === \"ArrowLeft\" || e.key === \"ArrowRight\")) {\n        clearVirtualFocus();\n      }\n    }\n  };\n\n  // Handle focus events\n  const onFocus = (e: FocusEvent) => {\n    if (!e.isTrusted) return;\n\n    // Restore virtual focus when refocusing input\n    const focusedNodeId = state.focusedNodeId();\n    if (focusedNodeId) {\n      const item = document.getElementById(focusedNodeId);\n      if (item) {\n        // Item still exists, keep focus on it\n      }\n    }\n  };\n\n  const onBlur = (e: FocusEvent) => {\n    if (!e.isTrusted) return;\n    // Virtual focus blur handling would go here\n  };\n\n  // Create filter function\n  const filterFn = filter\n    ? (textValue: string) => filter(textValue, state.inputValue())\n    : undefined;\n\n  return {\n    inputProps: {\n      value: state.inputValue,\n      onChange,\n      onKeyDown,\n      onFocus,\n      onBlur,\n      get \"aria-activedescendant\"() {\n        return () => (shouldUseVirtualFocus() ? (state.focusedNodeId() ?? undefined) : undefined);\n      },\n      \"aria-controls\": collectionId,\n      \"aria-autocomplete\": \"list\",\n      enterKeyHint: \"go\",\n      autoCorrect: \"off\",\n      spellCheck: \"false\",\n      autoComplete: \"off\",\n    },\n    collectionProps: {\n      id: collectionId,\n      \"aria-label\": collectionAriaLabel,\n      shouldUseVirtualFocus: shouldUseVirtualFocus(),\n      disallowTypeAhead: shouldUseVirtualFocus(),\n      get autoFocus() {\n        return autoFocusOnMount() ? \"first\" : false;\n      },\n    },\n    filter: filterFn,\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/autocomplete.jsx

@@ -0,0 +1,196 @@
+import { createId, getOwnerDocument } from "../ssr/index.jsx";
+import { createEffect, createSignal, onCleanup } from "solid-js";
+//#region src/autocomplete/createAutocomplete.ts
+/**
+* createAutocomplete - Accessibility hook for autocomplete components
+*
+* Provides keyboard navigation, virtual focus via aria-activedescendant,
+* and filtering capabilities for autocomplete inputs.
+*
+* Based on @react-aria/autocomplete useAutocomplete.
+*/
+function toKeyboardEventInit(e) {
+	return {
+		key: e.key,
+		code: e.code,
+		location: e.location,
+		repeat: e.repeat,
+		isComposing: e.isComposing,
+		ctrlKey: e.ctrlKey,
+		shiftKey: e.shiftKey,
+		altKey: e.altKey,
+		metaKey: e.metaKey,
+		bubbles: e.bubbles,
+		cancelable: e.cancelable
+	};
+}
+const AUTOCOMPLETE_FOCUS_EVENT = "autocomplete:focus";
+const AUTOCOMPLETE_CLEAR_FOCUS_EVENT = "autocomplete:clearfocus";
+/**
+* Provides the behavior and accessibility implementation for an autocomplete component.
+* An autocomplete combines a text input with a collection, allowing users to filter
+* the collection's contents to match a query.
+*
+* @example
+* ```tsx
+* const state = createAutocompleteState({ defaultInputValue: '' });
+* let inputRef, collectionRef;
+*
+* const { inputProps, collectionProps, filter } = createAutocomplete({
+*   inputRef: () => inputRef,
+*   collectionRef: () => collectionRef,
+*   filter: (textValue, inputValue) =>
+*     textValue.toLowerCase().includes(inputValue.toLowerCase()),
+* }, state);
+*
+* return (
+*   <div>
+*     <input ref={inputRef} {...inputProps} />
+*     <ul ref={collectionRef} {...collectionProps}>
+*       {items.filter(item => filter?.(item.name) ?? true).map(item => (
+*         <li key={item.id}>{item.name}</li>
+*       ))}
+*     </ul>
+*   </div>
+* );
+* ```
+*/
+function createAutocomplete(props, state) {
+	const { inputRef, collectionRef, filter, collectionId: collectionIdProp, collectionAriaLabel, disableAutoFocusFirst = false, disableVirtualFocus = false } = props;
+	const collectionId = collectionIdProp ?? createId();
+	const [shouldUseVirtualFocus] = createSignal(!disableVirtualFocus);
+	const [autoFocusOnMount, setAutoFocusOnMount] = createSignal(false);
+	let lastInputType = "";
+	const handleBeforeInput = (e) => {
+		lastInputType = e.inputType || "";
+	};
+	createEffect(() => {
+		const input = inputRef();
+		if (input) {
+			input.addEventListener("beforeinput", handleBeforeInput);
+			onCleanup(() => {
+				input.removeEventListener("beforeinput", handleBeforeInput);
+			});
+		}
+	});
+	const focusFirstItem = () => {
+		const collection = collectionRef();
+		if (!collection) {
+			setAutoFocusOnMount(true);
+			return;
+		}
+		collection.dispatchEvent(new CustomEvent(AUTOCOMPLETE_FOCUS_EVENT, {
+			cancelable: true,
+			bubbles: true,
+			detail: { focusStrategy: "first" }
+		}));
+	};
+	const clearVirtualFocus = (clearFocusKey = false) => {
+		setAutoFocusOnMount(false);
+		state.setFocusedNodeId(null);
+		const collection = collectionRef();
+		if (collection) collection.dispatchEvent(new CustomEvent(AUTOCOMPLETE_CLEAR_FOCUS_EVENT, {
+			cancelable: true,
+			bubbles: true,
+			detail: { clearFocusKey }
+		}));
+	};
+	const onChange = (value) => {
+		if ((lastInputType === "insertText" || lastInputType === "insertCompositionText" || lastInputType === "insertFromComposition") && !disableAutoFocusFirst) focusFirstItem();
+		else if (lastInputType && (lastInputType.includes("insert") || lastInputType.includes("delete") || lastInputType.includes("history"))) clearVirtualFocus(true);
+		state.setInputValue(value);
+	};
+	const onKeyDown = (e) => {
+		if ("isComposing" in e && e.isComposing) return;
+		const focusedNodeId = state.focusedNodeId();
+		const collection = collectionRef();
+		const ownerDocument = getOwnerDocument(inputRef() ?? collection);
+		switch (e.key) {
+			case "Escape":
+				if (e.defaultPrevented) return;
+				break;
+			case " ": return;
+			case "Tab": return;
+			case "ArrowUp":
+			case "ArrowDown":
+			case "Home":
+			case "End":
+			case "PageUp":
+			case "PageDown":
+				e.preventDefault();
+				if (collection) collection.dispatchEvent(new CustomEvent(AUTOCOMPLETE_FOCUS_EVENT, {
+					cancelable: true,
+					bubbles: true
+				}));
+				break;
+			case "ArrowLeft":
+			case "ArrowRight":
+				if (!focusedNodeId) {
+					e.stopPropagation();
+					return;
+				}
+				break;
+			case "Enter":
+				if (focusedNodeId) {
+					const item = ownerDocument?.getElementById(focusedNodeId);
+					if (item) {
+						item.click();
+						e.preventDefault();
+					}
+				}
+				return;
+		}
+		if (!e.defaultPrevented && collection) {
+			e.stopPropagation();
+			let shouldPerformDefaultAction = true;
+			if (focusedNodeId) {
+				const item = ownerDocument?.getElementById(focusedNodeId);
+				if (item) shouldPerformDefaultAction = item.dispatchEvent(new KeyboardEvent(e.type, toKeyboardEventInit(e)));
+			} else shouldPerformDefaultAction = collection.dispatchEvent(new KeyboardEvent(e.type, toKeyboardEventInit(e)));
+			if (shouldPerformDefaultAction && (e.key === "ArrowLeft" || e.key === "ArrowRight")) clearVirtualFocus();
+		}
+	};
+	const onFocus = (e) => {
+		if (!e.isTrusted) return;
+		const focusedNodeId = state.focusedNodeId();
+		if (focusedNodeId) {
+			if (document.getElementById(focusedNodeId)) {}
+		}
+	};
+	const onBlur = (e) => {
+		if (!e.isTrusted) return;
+	};
+	const filterFn = filter ? (textValue) => filter(textValue, state.inputValue()) : void 0;
+	return {
+		inputProps: {
+			value: state.inputValue,
+			onChange,
+			onKeyDown,
+			onFocus,
+			onBlur,
+			get "aria-activedescendant"() {
+				return () => shouldUseVirtualFocus() ? state.focusedNodeId() ?? void 0 : void 0;
+			},
+			"aria-controls": collectionId,
+			"aria-autocomplete": "list",
+			enterKeyHint: "go",
+			autoCorrect: "off",
+			spellCheck: "false",
+			autoComplete: "off"
+		},
+		collectionProps: {
+			id: collectionId,
+			"aria-label": collectionAriaLabel,
+			shouldUseVirtualFocus: shouldUseVirtualFocus(),
+			disallowTypeAhead: shouldUseVirtualFocus(),
+			get autoFocus() {
+				return autoFocusOnMount() ? "first" : false;
+			}
+		},
+		filter: filterFn
+	};
+}
+//#endregion
+export { AUTOCOMPLETE_FOCUS_EVENT as n, createAutocomplete as r, AUTOCOMPLETE_CLEAR_FOCUS_EVENT as t };
+
+//# sourceMappingURL=autocomplete.jsx.map

package/dist/_chunk/autocomplete.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.jsx","names":["inputEvent"],"sources":["../../src/autocomplete/createAutocomplete.ts"],"sourcesContent":["/**\n * createAutocomplete - Accessibility hook for autocomplete components\n *\n * Provides keyboard navigation, virtual focus via aria-activedescendant,\n * and filtering capabilities for autocomplete inputs.\n *\n * Based on @react-aria/autocomplete useAutocomplete.\n */\n\nimport { createSignal, createEffect, onCleanup, type Accessor } from \"solid-js\";\nimport { createId, getOwnerDocument } from \"../ssr\";\nimport { type AutocompleteState } from \"@proyecto-viviana/solid-stately\";\n\nexport interface CollectionOptions {\n  /** The id of the collection element. */\n  id?: string;\n  /** Accessible label for the collection. */\n  \"aria-label\"?: string;\n  /** Whether the collection items should use virtual focus instead of being focused directly. */\n  shouldUseVirtualFocus: boolean;\n  /** Whether typeahead is disabled. */\n  disallowTypeAhead: boolean;\n  /** Whether and where to focus an item when the collection mounts. */\n  autoFocus?: boolean | \"first\" | \"last\";\n}\n\nexport interface AutocompleteInputProps {\n  /** Current input value. */\n  value: Accessor<string>;\n  /** Handler for input value changes. */\n  onChange: (value: string) => void;\n  /** Handler for key events. */\n  onKeyDown: (e: KeyboardEvent) => void;\n  /** Handler for focus events. */\n  onFocus: (e: FocusEvent) => void;\n  /** Handler for blur events. */\n  onBlur: (e: FocusEvent) => void;\n  /** The id of the currently focused item for aria-activedescendant. */\n  \"aria-activedescendant\": Accessor<string | undefined>;\n  /** The id of the controlled collection. */\n  \"aria-controls\": string;\n  /** Autocomplete type. */\n  \"aria-autocomplete\": \"list\" | \"none\" | \"inline\" | \"both\";\n  /** Enter key hint for mobile keyboards. */\n  enterKeyHint: \"go\";\n  /** Disable autocorrect. */\n  autoCorrect: \"off\";\n  /** Disable spell check. */\n  spellCheck: \"false\";\n  /** Disable browser autocomplete. */\n  autoComplete: \"off\";\n}\n\nexport interface AriaAutocompleteOptions<_T = unknown> {\n  /** Ref accessor for the input element. */\n  inputRef: Accessor<HTMLInputElement | undefined>;\n  /** Ref accessor for the collection element. */\n  collectionRef: Accessor<HTMLElement | undefined>;\n  /** Optional id override for the controlled collection element. */\n  collectionId?: string;\n  /** Optional accessible name for the controlled collection element. */\n  collectionAriaLabel?: string;\n  /**\n   * An optional filter function used to determine if an option should be included.\n   * @param textValue - The text value of the item\n   * @param inputValue - The current input value\n   */\n  filter?: (textValue: string, inputValue: string) => boolean;\n  /**\n   * Whether to focus the first item after filtering.\n   * @default false\n   */\n  disableAutoFocusFirst?: boolean;\n  /**\n   * Whether to disable virtual focus (aria-activedescendant).\n   * @default false\n   */\n  disableVirtualFocus?: boolean;\n}\n\nexport interface AutocompleteAria<_T = unknown> {\n  /** Props for the autocomplete input element. */\n  inputProps: AutocompleteInputProps;\n  /** Props for the collection (ListBox/Menu). */\n  collectionProps: CollectionOptions;\n  /** A filter function that returns if the item should be shown. */\n  filter?: (textValue: string) => boolean;\n}\n\nfunction toKeyboardEventInit(e: KeyboardEvent): KeyboardEventInit {\n  return {\n    key: e.key,\n    code: e.code,\n    location: e.location,\n    repeat: e.repeat,\n    isComposing: e.isComposing,\n    ctrlKey: e.ctrlKey,\n    shiftKey: e.shiftKey,\n    altKey: e.altKey,\n    metaKey: e.metaKey,\n    bubbles: e.bubbles,\n    cancelable: e.cancelable,\n  };\n}\n\n// Custom event names for collection communication\nexport const AUTOCOMPLETE_FOCUS_EVENT = \"autocomplete:focus\";\nexport const AUTOCOMPLETE_CLEAR_FOCUS_EVENT = \"autocomplete:clearfocus\";\n\n/**\n * Provides the behavior and accessibility implementation for an autocomplete component.\n * An autocomplete combines a text input with a collection, allowing users to filter\n * the collection's contents to match a query.\n *\n * @example\n * ```tsx\n * const state = createAutocompleteState({ defaultInputValue: '' });\n * let inputRef, collectionRef;\n *\n * const { inputProps, collectionProps, filter } = createAutocomplete({\n *   inputRef: () => inputRef,\n *   collectionRef: () => collectionRef,\n *   filter: (textValue, inputValue) =>\n *     textValue.toLowerCase().includes(inputValue.toLowerCase()),\n * }, state);\n *\n * return (\n *   <div>\n *     <input ref={inputRef} {...inputProps} />\n *     <ul ref={collectionRef} {...collectionProps}>\n *       {items.filter(item => filter?.(item.name) ?? true).map(item => (\n *         <li key={item.id}>{item.name}</li>\n *       ))}\n *     </ul>\n *   </div>\n * );\n * ```\n */\nexport function createAutocomplete<T = unknown>(\n  props: AriaAutocompleteOptions<T>,\n  state: AutocompleteState,\n): AutocompleteAria<T> {\n  const {\n    inputRef,\n    collectionRef,\n    filter,\n    collectionId: collectionIdProp,\n    collectionAriaLabel,\n    disableAutoFocusFirst = false,\n    disableVirtualFocus = false,\n  } = props;\n\n  const collectionId = collectionIdProp ?? createId();\n  const [shouldUseVirtualFocus] = createSignal(!disableVirtualFocus);\n  // When the first item should be focused but the collection hasn't mounted yet,\n  // defer it by threading autoFocus through collectionProps so the collection\n  // focuses on mount (mirrors upstream's autoFocusOnMount state).\n  const [autoFocusOnMount, setAutoFocusOnMount] = createSignal(false);\n  let lastInputType = \"\";\n\n  // Track the input type for determining focus behavior. We listen to\n  // `beforeinput` (not `input`) so `lastInputType` is set before the input's\n  // `onChange` runs, mirroring @react-aria/autocomplete.\n  const handleBeforeInput = (e: Event) => {\n    const inputEvent = e as InputEvent;\n    lastInputType = inputEvent.inputType || \"\";\n  };\n\n  // Set up beforeinput event listener\n  createEffect(() => {\n    const input = inputRef();\n    if (input) {\n      input.addEventListener(\"beforeinput\", handleBeforeInput);\n      onCleanup(() => {\n        input.removeEventListener(\"beforeinput\", handleBeforeInput);\n      });\n    }\n  });\n\n  // Focus first item in collection\n  const focusFirstItem = () => {\n    const collection = collectionRef();\n    if (!collection) {\n      // Collection isn't mounted yet — defer focusing the first item to mount\n      // time via collectionProps.autoFocus instead of firing a focus event into\n      // a not-yet-rendered collection.\n      setAutoFocusOnMount(true);\n      return;\n    }\n    collection.dispatchEvent(\n      new CustomEvent(AUTOCOMPLETE_FOCUS_EVENT, {\n        cancelable: true,\n        bubbles: true,\n        detail: { focusStrategy: \"first\" },\n      }),\n    );\n  };\n\n  // Clear virtual focus\n  const clearVirtualFocus = (clearFocusKey = false) => {\n    setAutoFocusOnMount(false);\n    state.setFocusedNodeId(null);\n    const collection = collectionRef();\n    if (collection) {\n      collection.dispatchEvent(\n        new CustomEvent(AUTOCOMPLETE_CLEAR_FOCUS_EVENT, {\n          cancelable: true,\n          bubbles: true,\n          detail: { clearFocusKey },\n        }),\n      );\n    }\n  };\n\n  // Handle input value changes\n  const onChange = (value: string) => {\n    // Focus first item when typing forward, clear when backspacing/pasting.\n    // IME composition (e.g. CJK input) reports 'insertCompositionText'/\n    // 'insertFromComposition' instead of 'insertText'; treat those as forward\n    // typing so the first item still gets virtual focus.\n    if (\n      (lastInputType === \"insertText\" ||\n        lastInputType === \"insertCompositionText\" ||\n        lastInputType === \"insertFromComposition\") &&\n      !disableAutoFocusFirst\n    ) {\n      focusFirstItem();\n    } else if (\n      lastInputType &&\n      (lastInputType.includes(\"insert\") ||\n        lastInputType.includes(\"delete\") ||\n        lastInputType.includes(\"history\"))\n    ) {\n      clearVirtualFocus(true);\n    }\n\n    state.setInputValue(value);\n  };\n\n  // Handle keyboard navigation\n  const onKeyDown = (e: KeyboardEvent) => {\n    if (\"isComposing\" in e && e.isComposing) {\n      return;\n    }\n\n    const focusedNodeId = state.focusedNodeId();\n    const collection = collectionRef();\n    const ownerDocument = getOwnerDocument(inputRef() ?? collection);\n\n    switch (e.key) {\n      case \"Escape\":\n        // Let the input handle Escape (e.g., clear value)\n        if (e.defaultPrevented) {\n          return;\n        }\n        break;\n\n      case \" \":\n        // Space shouldn't trigger item action\n        return;\n\n      case \"Tab\":\n        // Let Tab propagate normally for focus management\n        return;\n\n      case \"ArrowUp\":\n      case \"ArrowDown\":\n      case \"Home\":\n      case \"End\":\n      case \"PageUp\":\n      case \"PageDown\": {\n        // Prevent cursor movement in input\n        e.preventDefault();\n\n        // Dispatch focus event to collection\n        if (collection) {\n          collection.dispatchEvent(\n            new CustomEvent(AUTOCOMPLETE_FOCUS_EVENT, {\n              cancelable: true,\n              bubbles: true,\n            }),\n          );\n        }\n        break;\n      }\n\n      case \"ArrowLeft\":\n      case \"ArrowRight\":\n        // With no virtual focus, just let the arrow move the text cursor; stop\n        // propagation so it doesn't leak into the collection. With virtual focus,\n        // fall through to dispatch the key to the focused item below, then clear\n        // the active descendant only after the item has seen it.\n        if (!focusedNodeId) {\n          e.stopPropagation();\n          return;\n        }\n        break;\n\n      case \"Enter\":\n        // Trigger click on focused item\n        if (focusedNodeId) {\n          const item = ownerDocument?.getElementById(focusedNodeId);\n          if (item) {\n            item.click();\n            e.preventDefault();\n          }\n        }\n        return;\n    }\n\n    // Forward keyboard events to the focused item (or the collection when there\n    // is no virtual focus) so the collection can act on them, e.g. onAction.\n    if (!e.defaultPrevented && collection) {\n      e.stopPropagation();\n\n      let shouldPerformDefaultAction = true;\n      if (focusedNodeId) {\n        const item = ownerDocument?.getElementById(focusedNodeId);\n        if (item) {\n          shouldPerformDefaultAction = item.dispatchEvent(\n            new KeyboardEvent(e.type, toKeyboardEventInit(e)),\n          );\n        }\n      } else {\n        shouldPerformDefaultAction = collection.dispatchEvent(\n          new KeyboardEvent(e.type, toKeyboardEventInit(e)),\n        );\n      }\n\n      // After the focused item has seen ArrowLeft/ArrowRight, clear the active\n      // descendant so SR announcements aren't interrupted, but retain the\n      // collection's focused key so navigation restarts where it left off. If\n      // the item consumed the key (e.g. an expandable row collapsing), it\n      // cancels the event and we keep virtual focus.\n      if (shouldPerformDefaultAction && (e.key === \"ArrowLeft\" || e.key === \"ArrowRight\")) {\n        clearVirtualFocus();\n      }\n    }\n  };\n\n  // Handle focus events\n  const onFocus = (e: FocusEvent) => {\n    if (!e.isTrusted) return;\n\n    // Restore virtual focus when refocusing input\n    const focusedNodeId = state.focusedNodeId();\n    if (focusedNodeId) {\n      const item = document.getElementById(focusedNodeId);\n      if (item) {\n        // Item still exists, keep focus on it\n      }\n    }\n  };\n\n  const onBlur = (e: FocusEvent) => {\n    if (!e.isTrusted) return;\n    // Virtual focus blur handling would go here\n  };\n\n  // Create filter function\n  const filterFn = filter\n    ? (textValue: string) => filter(textValue, state.inputValue())\n    : undefined;\n\n  return {\n    inputProps: {\n      value: state.inputValue,\n      onChange,\n      onKeyDown,\n      onFocus,\n      onBlur,\n      get \"aria-activedescendant\"() {\n        return () => (shouldUseVirtualFocus() ? (state.focusedNodeId() ?? undefined) : undefined);\n      },\n      \"aria-controls\": collectionId,\n      \"aria-autocomplete\": \"list\",\n      enterKeyHint: \"go\",\n      autoCorrect: \"off\",\n      spellCheck: \"false\",\n      autoComplete: \"off\",\n    },\n    collectionProps: {\n      id: collectionId,\n      \"aria-label\": collectionAriaLabel,\n      shouldUseVirtualFocus: shouldUseVirtualFocus(),\n      disallowTypeAhead: shouldUseVirtualFocus(),\n      get autoFocus() {\n        return autoFocusOnMount() ? \"first\" : false;\n      },\n    },\n    filter: filterFn,\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/breadcrumbs.js

@@ -0,0 +1,119 @@
+import { i as access, o as mergeProps } from "./env.js";
+import { t as filterDOMProps } from "./filterDOMProps.js";
+import { t as createLink } from "./link.js";
+//#region src/breadcrumbs/createBreadcrumbs.ts
+/**
+* Breadcrumbs hooks for Solidaria
+*
+* Provides accessibility implementation for breadcrumb navigation.
+* Port of @react-aria/breadcrumbs.
+*/
+/**
+* Provides accessibility implementation for the breadcrumbs navigation container.
+*/
+function createBreadcrumbs(props = {}) {
+	const getProps = () => access(props);
+	const getNavProps = () => {
+		const p = getProps();
+		const ariaLabel = p["aria-label"] ?? (p["aria-labelledby"] ? void 0 : "Breadcrumbs");
+		return mergeProps(filterDOMProps(p, { labelable: true }), {
+			"aria-label": ariaLabel,
+			"aria-details": p["aria-details"]
+		});
+	};
+	return { get navProps() {
+		return getNavProps();
+	} };
+}
+/**
+* Provides accessibility implementation for an individual breadcrumb item.
+*/
+function createBreadcrumbItem(props = {}) {
+	const getProps = () => access(props);
+	const isCurrent = () => getProps().isCurrent ?? false;
+	const isDisabled = () => getProps().isDisabled ?? false;
+	const elementType = () => getProps().elementType ?? "a";
+	const { linkProps, isPressed } = createLink({
+		get isDisabled() {
+			return isDisabled() || isCurrent();
+		},
+		get elementType() {
+			return elementType();
+		},
+		get href() {
+			return isCurrent() ? void 0 : getProps().href;
+		},
+		get target() {
+			return getProps().target;
+		},
+		get rel() {
+			return getProps().rel;
+		},
+		get onPress() {
+			return getProps().onPress;
+		},
+		get onPressStart() {
+			return getProps().onPressStart;
+		},
+		get onPressEnd() {
+			return getProps().onPressEnd;
+		},
+		get onClick() {
+			return getProps().onClick;
+		},
+		get onFocus() {
+			return getProps().onFocus;
+		},
+		get onBlur() {
+			return getProps().onBlur;
+		},
+		get onFocusChange() {
+			return getProps().onFocusChange;
+		},
+		get onKeyDown() {
+			return getProps().onKeyDown;
+		},
+		get onKeyUp() {
+			return getProps().onKeyUp;
+		},
+		get autoFocus() {
+			return getProps().autoFocus;
+		},
+		get "aria-label"() {
+			return getProps()["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return getProps()["aria-labelledby"];
+		},
+		get "aria-describedby"() {
+			return getProps()["aria-describedby"];
+		},
+		get "aria-details"() {
+			return getProps()["aria-details"];
+		}
+	});
+	const getItemProps = () => {
+		const p = getProps();
+		const current = isCurrent();
+		let baseProps = p.id ? mergeProps(linkProps, { id: p.id }) : linkProps;
+		if (current) {
+			const ariaCurrent = p["aria-current"] ?? "page";
+			baseProps = mergeProps(baseProps, { "aria-current": ariaCurrent });
+		}
+		if (isDisabled()) baseProps = mergeProps(baseProps, { "aria-disabled": true });
+		return baseProps;
+	};
+	return {
+		get itemProps() {
+			return getItemProps();
+		},
+		get linkProps() {
+			return linkProps;
+		},
+		isPressed
+	};
+}
+//#endregion
+export { createBreadcrumbs as n, createBreadcrumbItem as t };
+
+//# sourceMappingURL=breadcrumbs.js.map

package/dist/_chunk/breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.js","names":[],"sources":["../../src/breadcrumbs/createBreadcrumbs.ts"],"sourcesContent":["/**\n * Breadcrumbs hooks for Solidaria\n *\n * Provides accessibility implementation for breadcrumb navigation.\n * Port of @react-aria/breadcrumbs.\n */\n\nimport { createLink, type AriaLinkProps, type LinkAria } from \"../link\";\nimport { filterDOMProps } from \"../utils/filterDOMProps\";\nimport { mergeProps } from \"../utils/mergeProps\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\n\nexport interface AriaBreadcrumbsProps {\n  /** Provides a label for the breadcrumbs navigation. */\n  \"aria-label\"?: string;\n  /** Identifies the element (or elements) that labels the breadcrumbs. */\n  \"aria-labelledby\"?: string;\n  /** Identifies the element (or elements) that describes the breadcrumbs. */\n  \"aria-describedby\"?: string;\n  /** Identifies the element (or elements) that provide a detailed description. */\n  \"aria-details\"?: string;\n  /** Whether the breadcrumbs are disabled. */\n  isDisabled?: boolean;\n}\n\nexport interface BreadcrumbsAria {\n  /** Props for the breadcrumbs nav element. */\n  navProps: Record<string, unknown>;\n}\n\nexport interface AriaBreadcrumbItemProps extends Omit<AriaLinkProps, \"aria-current\"> {\n  /** The DOM id for the breadcrumb item. */\n  id?: string;\n  /** Whether this is the current/last item in the breadcrumb trail. */\n  isCurrent?: boolean;\n  /** The type of current location for aria-current. @default 'page' */\n  \"aria-current\"?: \"page\" | \"step\" | \"location\" | \"date\" | \"time\" | boolean;\n  /** The HTML element type. @default 'a' */\n  elementType?: string;\n}\n\nexport interface BreadcrumbItemAria extends LinkAria {\n  /** Props for the breadcrumb item element. */\n  itemProps: Record<string, unknown>;\n}\n\n/**\n * Provides accessibility implementation for the breadcrumbs navigation container.\n */\nexport function createBreadcrumbs(\n  props: MaybeAccessor<AriaBreadcrumbsProps> = {},\n): BreadcrumbsAria {\n  const getProps = () => access(props);\n\n  const getNavProps = (): Record<string, unknown> => {\n    const p = getProps();\n\n    // Only apply a default label when no other label source exists.\n    const ariaLabel = p[\"aria-label\"] ?? (p[\"aria-labelledby\"] ? undefined : \"Breadcrumbs\");\n\n    return mergeProps(filterDOMProps(p as Record<string, unknown>, { labelable: true }), {\n      \"aria-label\": ariaLabel,\n      \"aria-details\": p[\"aria-details\"],\n    });\n  };\n\n  return {\n    get navProps() {\n      return getNavProps();\n    },\n  };\n}\n\n/**\n * Provides accessibility implementation for an individual breadcrumb item.\n */\nexport function createBreadcrumbItem(\n  props: MaybeAccessor<AriaBreadcrumbItemProps> = {},\n): BreadcrumbItemAria {\n  const getProps = () => access(props);\n\n  const isCurrent = () => getProps().isCurrent ?? false;\n  const isDisabled = () => getProps().isDisabled ?? false;\n  const elementType = () => getProps().elementType ?? \"a\";\n\n  // Use createLink for base link behavior\n  // Current items are treated as disabled (can't navigate to current page)\n  const { linkProps, isPressed } = createLink({\n    get isDisabled() {\n      return isDisabled() || isCurrent();\n    },\n    get elementType() {\n      return elementType();\n    },\n    get href() {\n      return isCurrent() ? undefined : getProps().href;\n    },\n    get target() {\n      return getProps().target;\n    },\n    get rel() {\n      return getProps().rel;\n    },\n    get onPress() {\n      return getProps().onPress;\n    },\n    get onPressStart() {\n      return getProps().onPressStart;\n    },\n    get onPressEnd() {\n      return getProps().onPressEnd;\n    },\n    get onClick() {\n      return getProps().onClick;\n    },\n    get onFocus() {\n      return getProps().onFocus;\n    },\n    get onBlur() {\n      return getProps().onBlur;\n    },\n    get onFocusChange() {\n      return getProps().onFocusChange;\n    },\n    get onKeyDown() {\n      return getProps().onKeyDown;\n    },\n    get onKeyUp() {\n      return getProps().onKeyUp;\n    },\n    get autoFocus() {\n      return getProps().autoFocus;\n    },\n    get \"aria-label\"() {\n      return getProps()[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return getProps()[\"aria-labelledby\"];\n    },\n    get \"aria-describedby\"() {\n      return getProps()[\"aria-describedby\"];\n    },\n    get \"aria-details\"() {\n      return getProps()[\"aria-details\"];\n    },\n  });\n\n  const getItemProps = (): Record<string, unknown> => {\n    const p = getProps();\n    const current = isCurrent();\n\n    // Start with link props, forwarding id if provided\n    let baseProps: Record<string, unknown> = p.id ? mergeProps(linkProps, { id: p.id }) : linkProps;\n\n    // Add aria-current for current page\n    if (current) {\n      const ariaCurrent = p[\"aria-current\"] ?? \"page\";\n      baseProps = mergeProps(baseProps, {\n        \"aria-current\": ariaCurrent,\n      });\n    }\n\n    // Add aria-disabled for disabled items\n    if (isDisabled()) {\n      baseProps = mergeProps(baseProps, {\n        \"aria-disabled\": true,\n      });\n    }\n\n    return baseProps;\n  };\n\n  return {\n    get itemProps() {\n      return getItemProps();\n    },\n    get linkProps() {\n      return linkProps;\n    },\n    isPressed,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;AAiDA,SAAgB,kBACd,QAA6C,CAAC,GAC7B;CACjB,MAAM,iBAAiB,OAAO,KAAK;CAEnC,MAAM,oBAA6C;EACjD,MAAM,IAAI,SAAS;EAGnB,MAAM,YAAY,EAAE,kBAAkB,EAAE,qBAAqB,KAAA,IAAY;EAEzE,OAAO,WAAW,eAAe,GAA8B,EAAE,WAAW,KAAK,CAAC,GAAG;GACnF,cAAc;GACd,gBAAgB,EAAE;EACpB,CAAC;CACH;CAEA,OAAO,EACL,IAAI,WAAW;EACb,OAAO,YAAY;CACrB,EACF;AACF;;;;AAKA,SAAgB,qBACd,QAAgD,CAAC,GAC7B;CACpB,MAAM,iBAAiB,OAAO,KAAK;CAEnC,MAAM,kBAAkB,SAAS,CAAC,CAAC,aAAa;CAChD,MAAM,mBAAmB,SAAS,CAAC,CAAC,cAAc;CAClD,MAAM,oBAAoB,SAAS,CAAC,CAAC,eAAe;CAIpD,MAAM,EAAE,WAAW,cAAc,WAAW;EAC1C,IAAI,aAAa;GACf,OAAO,WAAW,KAAK,UAAU;EACnC;EACA,IAAI,cAAc;GAChB,OAAO,YAAY;EACrB;EACA,IAAI,OAAO;GACT,OAAO,UAAU,IAAI,KAAA,IAAY,SAAS,CAAC,CAAC;EAC9C;EACA,IAAI,SAAS;GACX,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,MAAM;GACR,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,UAAU;GACZ,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,eAAe;GACjB,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,aAAa;GACf,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,UAAU;GACZ,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,UAAU;GACZ,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,SAAS;GACX,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,gBAAgB;GAClB,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,YAAY;GACd,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,UAAU;GACZ,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,YAAY;GACd,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,eAAe;GACjB,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,oBAAoB;GACtB,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,qBAAqB;GACvB,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,iBAAiB;GACnB,OAAO,SAAS,CAAC,CAAC;EACpB;CACF,CAAC;CAED,MAAM,qBAA8C;EAClD,MAAM,IAAI,SAAS;EACnB,MAAM,UAAU,UAAU;EAG1B,IAAI,YAAqC,EAAE,KAAK,WAAW,WAAW,EAAE,IAAI,EAAE,GAAG,CAAC,IAAI;EAGtF,IAAI,SAAS;GACX,MAAM,cAAc,EAAE,mBAAmB;GACzC,YAAY,WAAW,WAAW,EAChC,gBAAgB,YAClB,CAAC;EACH;EAGA,IAAI,WAAW,GACb,YAAY,WAAW,WAAW,EAChC,iBAAiB,KACnB,CAAC;EAGH,OAAO;CACT;CAEA,OAAO;EACL,IAAI,YAAY;GACd,OAAO,aAAa;EACtB;EACA,IAAI,YAAY;GACd,OAAO;EACT;EACA;CACF;AACF"}