@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/dist/_chunk/createFocusRing.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFocusRing.jsx","names":["isGlobalFocusVisible","isFocusVisible"],"sources":["../../src/interactions/createFocusRing.ts"],"sourcesContent":["/**\n * createFocusRing hook for Solidaria\n *\n * Determines whether a focus ring should be visible for a given element.\n * Focus rings are visible when the user navigates with keyboard, but hidden\n * when using mouse/touch.\n *\n * Port of @react-aria/focus useFocusRing.\n */\n\nimport {\n  type JSX,\n  type Accessor,\n  createSignal,\n  createEffect,\n  onCleanup,\n  createMemo,\n} from \"solid-js\";\nimport { createFocus } from \"./createFocus\";\nimport { createFocusWithin } from \"./createFocusWithin\";\nimport {\n  createFocusVisibleListener,\n  isFocusVisible as isGlobalFocusVisible,\n} from \"./createInteractionModality\";\n\nexport interface FocusRingProps {\n  /** Whether the element is a text input. */\n  isTextInput?: boolean;\n  /** Whether the element will be auto focused. */\n  autoFocus?: boolean;\n  /** Whether focus should be tracked within the element. */\n  within?: boolean;\n}\n\nexport interface FocusRingResult {\n  /** Whether the element is currently focused. */\n  isFocused: Accessor<boolean>;\n  /** Whether the focus ring should be visible. */\n  isFocusVisible: Accessor<boolean>;\n  /** Props to spread on the element to track focus. */\n  focusProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Determines whether a focus ring should be visible for a given element.\n *\n * Focus rings are visible when:\n * - The element is focused AND\n * - The user is navigating with keyboard (not mouse/touch)\n *\n * For text inputs, focus rings are always visible when focused.\n */\nexport function createFocusRing(props: FocusRingProps = {}): FocusRingResult {\n  const { isTextInput = false, autoFocus = false, within = false } = props;\n\n  const [isFocused, setIsFocused] = createSignal(false);\n  const [focusVisibleFlag, setFocusVisibleFlag] = createSignal(autoFocus || isGlobalFocusVisible());\n  const isFocusVisible = createMemo(() => isFocused() && focusVisibleFlag());\n\n  createEffect(() => {\n    const cleanup = createFocusVisibleListener(\n      (visible) => {\n        setFocusVisibleFlag(visible);\n      },\n      { isTextInput },\n    );\n    onCleanup(cleanup);\n  });\n\n  const onFocusChange = (focused: boolean) => {\n    setIsFocused(focused);\n  };\n\n  const focusResult = createFocus({\n    isDisabled: within,\n    onFocusChange,\n  });\n\n  const focusWithinResult = createFocusWithin({\n    isDisabled: !within,\n    onFocusWithinChange: onFocusChange,\n  });\n\n  return {\n    isFocused,\n    isFocusVisible,\n    focusProps: (within\n      ? focusWithinResult.focusWithinProps\n      : focusResult.focusProps) as JSX.HTMLAttributes<HTMLElement>,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoDA,SAAgB,gBAAgB,QAAwB,CAAC,GAAoB;CAC3E,MAAM,EAAE,cAAc,OAAO,YAAY,OAAO,SAAS,UAAU;CAEnE,MAAM,CAAC,WAAW,gBAAgB,aAAa,KAAK;CACpD,MAAM,CAAC,kBAAkB,uBAAuB,aAAa,aAAaA,eAAqB,CAAC;CAChG,MAAMC,mBAAiB,iBAAiB,UAAU,KAAK,iBAAiB,CAAC;CAEzE,mBAAmB;EAOjB,UANgB,4BACb,YAAY;GACX,oBAAoB,OAAO;EAC7B,GACA,EAAE,YAAY,CAEA,CAAC;CACnB,CAAC;CAED,MAAM,iBAAiB,YAAqB;EAC1C,aAAa,OAAO;CACtB;CAEA,MAAM,cAAc,YAAY;EAC9B,YAAY;EACZ;CACF,CAAC;CAED,MAAM,oBAAoB,kBAAkB;EAC1C,YAAY,CAAC;EACb,qBAAqB;CACvB,CAAC;CAED,OAAO;EACL;EACA,gBAAA;EACA,YAAa,SACT,kBAAkB,mBAClB,YAAY;CAClB;AACF"}

package/dist/_chunk/createFocusWithin.js

@@ -0,0 +1,121 @@
+import { h as setEventTarget, s as createGlobalListeners } from "./utils.js";
+import { a as getEventTarget, s as getOwnerDocument, y as nodeContains } from "./focus.js";
+import { onCleanup } from "solid-js";
+//#region src/interactions/createFocusWithin.ts
+/**
+* createFocusWithin - Handles focus events for the target and its descendants.
+*
+* This is a 1-1 port of React-Aria's useFocusWithin hook adapted for SolidJS.
+*/
+function getActiveElement(doc) {
+	let activeElement = doc.activeElement;
+	while (activeElement && activeElement.shadowRoot?.activeElement) activeElement = activeElement.shadowRoot?.activeElement ?? null;
+	return activeElement;
+}
+function createSyntheticBlurHandler() {
+	let isFocused = false;
+	let observer = null;
+	return (_e, target) => {
+		if (target instanceof HTMLButtonElement || target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) {
+			isFocused = true;
+			const onBlurHandler = () => {
+				isFocused = false;
+				if (observer) {
+					observer.disconnect();
+					observer = null;
+				}
+			};
+			target.addEventListener("focusout", onBlurHandler, { once: true });
+			observer = new MutationObserver(() => {
+				if (isFocused && target.disabled) {
+					isFocused = false;
+					observer?.disconnect();
+					observer = null;
+					const ownerDocument = target.ownerDocument;
+					const relatedTarget = target === ownerDocument.activeElement ? null : ownerDocument.activeElement;
+					target.dispatchEvent(new FocusEvent("blur", { relatedTarget }));
+					target.dispatchEvent(new FocusEvent("focusout", {
+						bubbles: true,
+						relatedTarget
+					}));
+				}
+			});
+			observer.observe(target, {
+				attributes: true,
+				attributeFilter: ["disabled"]
+			});
+			return () => {
+				if (observer) {
+					observer.disconnect();
+					observer = null;
+				}
+			};
+		}
+	};
+}
+/**
+* Handles focus events for the target and its descendants.
+*
+* Based on react-aria's useFocusWithin but adapted for SolidJS.
+*/
+function createFocusWithin(props = {}) {
+	const { isDisabled, onBlurWithin, onFocusWithin, onFocusWithinChange } = props;
+	let isFocusWithin = false;
+	const { addGlobalListener, removeAllGlobalListeners } = createGlobalListeners();
+	const syntheticBlurHandler = createSyntheticBlurHandler();
+	let cleanupRef;
+	onCleanup(() => {
+		cleanupRef?.();
+		removeAllGlobalListeners();
+	});
+	const onBlur = (e) => {
+		if (!e.currentTarget.contains(e.target)) return;
+		if (isFocusWithin && !e.currentTarget.contains(e.relatedTarget)) {
+			isFocusWithin = false;
+			removeAllGlobalListeners();
+			cleanupRef?.();
+			cleanupRef = void 0;
+			if (onBlurWithin) onBlurWithin(e);
+			if (onFocusWithinChange) onFocusWithinChange(false);
+		}
+	};
+	const onFocus = (e) => {
+		if (!e.currentTarget.contains(e.target)) return;
+		const ownerDocument = getOwnerDocument(e.target);
+		const activeElement = ownerDocument ? getActiveElement(ownerDocument) : null;
+		if (!isFocusWithin && activeElement === getEventTarget(e)) {
+			if (onFocusWithin) onFocusWithin(e);
+			if (onFocusWithinChange) onFocusWithinChange(true);
+			isFocusWithin = true;
+			cleanupRef = syntheticBlurHandler(e, e.target);
+			const currentTarget = e.currentTarget;
+			addGlobalListener("focus", (focusEvent) => {
+				if (isFocusWithin && !nodeContains(currentTarget, focusEvent.target)) {
+					const window = ownerDocument?.defaultView;
+					if (window) {
+						const nativeEvent = new window.FocusEvent("blur", { relatedTarget: focusEvent.target });
+						setEventTarget(nativeEvent, currentTarget);
+						isFocusWithin = false;
+						removeAllGlobalListeners();
+						if (onBlurWithin) onBlurWithin(nativeEvent);
+						if (onFocusWithinChange) onFocusWithinChange(false);
+						cleanupRef?.();
+						cleanupRef = void 0;
+					}
+				}
+			}, { capture: true });
+		}
+	};
+	if (isDisabled) return { focusWithinProps: {
+		onFocus: void 0,
+		onBlur: void 0
+	} };
+	return { focusWithinProps: {
+		onFocus,
+		onBlur
+	} };
+}
+//#endregion
+export { createFocusWithin as t };
+
+//# sourceMappingURL=createFocusWithin.js.map

package/dist/_chunk/createFocusWithin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFocusWithin.js","names":[],"sources":["../../src/interactions/createFocusWithin.ts"],"sourcesContent":["/**\n * createFocusWithin - Handles focus events for the target and its descendants.\n *\n * This is a 1-1 port of React-Aria's useFocusWithin hook adapted for SolidJS.\n */\n\nimport { JSX, onCleanup } from \"solid-js\";\nimport { getOwnerDocument, getEventTarget, nodeContains, createGlobalListeners } from \"../utils\";\nimport { setEventTarget } from \"../utils/events\";\n\nexport interface FocusWithinProps {\n  /** Whether the focus within events should be disabled. */\n  isDisabled?: boolean;\n  /** Handler that is called when the target element or a descendant receives focus. */\n  onFocusWithin?: (e: FocusEvent) => void;\n  /** Handler that is called when the target element and all descendants lose focus. */\n  onBlurWithin?: (e: FocusEvent) => void;\n  /** Handler that is called when the focus within state changes. */\n  onFocusWithinChange?: (isFocusWithin: boolean) => void;\n}\n\nexport interface FocusWithinResult {\n  /** Props to spread onto the target element. */\n  focusWithinProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\nfunction getActiveElement(doc: Document): Element | null {\n  let activeElement = doc.activeElement;\n  while (activeElement && (activeElement as Element).shadowRoot?.activeElement) {\n    activeElement = (activeElement as Element).shadowRoot?.activeElement ?? null;\n  }\n  return activeElement;\n}\n\nfunction createSyntheticBlurHandler(): (\n  _e: FocusEvent,\n  target: Element,\n) => (() => void) | undefined {\n  let isFocused = false;\n  let observer: MutationObserver | null = null;\n\n  return (_e: FocusEvent, target: Element) => {\n    if (\n      target instanceof HTMLButtonElement ||\n      target instanceof HTMLInputElement ||\n      target instanceof HTMLTextAreaElement ||\n      target instanceof HTMLSelectElement\n    ) {\n      isFocused = true;\n\n      const onBlurHandler = () => {\n        isFocused = false;\n\n        if (observer) {\n          observer.disconnect();\n          observer = null;\n        }\n      };\n\n      target.addEventListener(\"focusout\", onBlurHandler, { once: true });\n\n      observer = new MutationObserver(() => {\n        if (isFocused && (target as HTMLButtonElement).disabled) {\n          isFocused = false;\n          observer?.disconnect();\n          observer = null;\n          const ownerDocument = target.ownerDocument;\n          const relatedTarget =\n            target === ownerDocument.activeElement ? null : ownerDocument.activeElement;\n          target.dispatchEvent(new FocusEvent(\"blur\", { relatedTarget }));\n          target.dispatchEvent(new FocusEvent(\"focusout\", { bubbles: true, relatedTarget }));\n        }\n      });\n\n      observer.observe(target, { attributes: true, attributeFilter: [\"disabled\"] });\n\n      return () => {\n        if (observer) {\n          observer.disconnect();\n          observer = null;\n        }\n      };\n    }\n\n    return undefined;\n  };\n}\n\n/**\n * Handles focus events for the target and its descendants.\n *\n * Based on react-aria's useFocusWithin but adapted for SolidJS.\n */\nexport function createFocusWithin(props: FocusWithinProps = {}): FocusWithinResult {\n  const { isDisabled, onBlurWithin, onFocusWithin, onFocusWithinChange } = props;\n\n  // State tracking\n  let isFocusWithin = false;\n\n  // Global listeners manager\n  const { addGlobalListener, removeAllGlobalListeners } = createGlobalListeners();\n  const syntheticBlurHandler = createSyntheticBlurHandler();\n  let cleanupRef: (() => void) | undefined;\n\n  // Cleanup on unmount\n  onCleanup(() => {\n    cleanupRef?.();\n    removeAllGlobalListeners();\n  });\n\n  const onBlur: JSX.EventHandler<HTMLElement, FocusEvent> = (e) => {\n    // Ignore events bubbling through portals\n    if (!e.currentTarget.contains(e.target as Node)) {\n      return;\n    }\n\n    // We don't want to trigger onBlurWithin and then immediately onFocusWithin again\n    // when moving focus inside the element. Only trigger if the currentTarget doesn't\n    // include the relatedTarget (where focus is moving).\n    if (isFocusWithin && !e.currentTarget.contains(e.relatedTarget as Node)) {\n      isFocusWithin = false;\n      removeAllGlobalListeners();\n      cleanupRef?.();\n      cleanupRef = undefined;\n\n      if (onBlurWithin) {\n        onBlurWithin(e);\n      }\n\n      if (onFocusWithinChange) {\n        onFocusWithinChange(false);\n      }\n    }\n  };\n\n  const onFocus: JSX.EventHandler<HTMLElement, FocusEvent> = (e) => {\n    // Ignore events bubbling through portals\n    if (!e.currentTarget.contains(e.target as Node)) {\n      return;\n    }\n\n    // Double check that document.activeElement actually matches e.target\n    // in case a previously chained focus handler already moved focus somewhere else.\n    const ownerDocument = getOwnerDocument(e.target);\n    const activeElement = ownerDocument ? getActiveElement(ownerDocument) : null;\n\n    if (!isFocusWithin && activeElement === getEventTarget(e)) {\n      if (onFocusWithin) {\n        onFocusWithin(e);\n      }\n\n      if (onFocusWithinChange) {\n        onFocusWithinChange(true);\n      }\n\n      isFocusWithin = true;\n      cleanupRef = syntheticBlurHandler(e, e.target);\n\n      // Browsers don't fire blur events when elements are removed from the DOM.\n      // However, if a focus event occurs outside the element we're tracking, we\n      // can manually fire onBlur.\n      const currentTarget = e.currentTarget;\n\n      addGlobalListener(\n        \"focus\",\n        (focusEvent: Event) => {\n          if (\n            isFocusWithin &&\n            !nodeContains(currentTarget, (focusEvent as FocusEvent).target as Element)\n          ) {\n            // Create a synthetic blur event\n            const window = ownerDocument?.defaultView;\n            if (window) {\n              const nativeEvent = new window.FocusEvent(\"blur\", {\n                relatedTarget: (focusEvent as FocusEvent).target as Element,\n              });\n              setEventTarget(nativeEvent, currentTarget);\n\n              isFocusWithin = false;\n              removeAllGlobalListeners();\n\n              if (onBlurWithin) {\n                onBlurWithin(nativeEvent);\n              }\n\n              if (onFocusWithinChange) {\n                onFocusWithinChange(false);\n              }\n              cleanupRef?.();\n              cleanupRef = undefined;\n            }\n          }\n        },\n        { capture: true },\n      );\n    }\n  };\n\n  if (isDisabled) {\n    return {\n      focusWithinProps: {\n        onFocus: undefined,\n        onBlur: undefined,\n      },\n    };\n  }\n\n  return {\n    focusWithinProps: {\n      onFocus,\n      onBlur,\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/createFocusWithin.jsx

@@ -0,0 +1,121 @@
+import { h as setEventTarget, s as createGlobalListeners } from "./utils.jsx";
+import { a as getEventTarget, s as getOwnerDocument, y as nodeContains } from "./focus.jsx";
+import { onCleanup } from "solid-js";
+//#region src/interactions/createFocusWithin.ts
+/**
+* createFocusWithin - Handles focus events for the target and its descendants.
+*
+* This is a 1-1 port of React-Aria's useFocusWithin hook adapted for SolidJS.
+*/
+function getActiveElement(doc) {
+	let activeElement = doc.activeElement;
+	while (activeElement && activeElement.shadowRoot?.activeElement) activeElement = activeElement.shadowRoot?.activeElement ?? null;
+	return activeElement;
+}
+function createSyntheticBlurHandler() {
+	let isFocused = false;
+	let observer = null;
+	return (_e, target) => {
+		if (target instanceof HTMLButtonElement || target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) {
+			isFocused = true;
+			const onBlurHandler = () => {
+				isFocused = false;
+				if (observer) {
+					observer.disconnect();
+					observer = null;
+				}
+			};
+			target.addEventListener("focusout", onBlurHandler, { once: true });
+			observer = new MutationObserver(() => {
+				if (isFocused && target.disabled) {
+					isFocused = false;
+					observer?.disconnect();
+					observer = null;
+					const ownerDocument = target.ownerDocument;
+					const relatedTarget = target === ownerDocument.activeElement ? null : ownerDocument.activeElement;
+					target.dispatchEvent(new FocusEvent("blur", { relatedTarget }));
+					target.dispatchEvent(new FocusEvent("focusout", {
+						bubbles: true,
+						relatedTarget
+					}));
+				}
+			});
+			observer.observe(target, {
+				attributes: true,
+				attributeFilter: ["disabled"]
+			});
+			return () => {
+				if (observer) {
+					observer.disconnect();
+					observer = null;
+				}
+			};
+		}
+	};
+}
+/**
+* Handles focus events for the target and its descendants.
+*
+* Based on react-aria's useFocusWithin but adapted for SolidJS.
+*/
+function createFocusWithin(props = {}) {
+	const { isDisabled, onBlurWithin, onFocusWithin, onFocusWithinChange } = props;
+	let isFocusWithin = false;
+	const { addGlobalListener, removeAllGlobalListeners } = createGlobalListeners();
+	const syntheticBlurHandler = createSyntheticBlurHandler();
+	let cleanupRef;
+	onCleanup(() => {
+		cleanupRef?.();
+		removeAllGlobalListeners();
+	});
+	const onBlur = (e) => {
+		if (!e.currentTarget.contains(e.target)) return;
+		if (isFocusWithin && !e.currentTarget.contains(e.relatedTarget)) {
+			isFocusWithin = false;
+			removeAllGlobalListeners();
+			cleanupRef?.();
+			cleanupRef = void 0;
+			if (onBlurWithin) onBlurWithin(e);
+			if (onFocusWithinChange) onFocusWithinChange(false);
+		}
+	};
+	const onFocus = (e) => {
+		if (!e.currentTarget.contains(e.target)) return;
+		const ownerDocument = getOwnerDocument(e.target);
+		const activeElement = ownerDocument ? getActiveElement(ownerDocument) : null;
+		if (!isFocusWithin && activeElement === getEventTarget(e)) {
+			if (onFocusWithin) onFocusWithin(e);
+			if (onFocusWithinChange) onFocusWithinChange(true);
+			isFocusWithin = true;
+			cleanupRef = syntheticBlurHandler(e, e.target);
+			const currentTarget = e.currentTarget;
+			addGlobalListener("focus", (focusEvent) => {
+				if (isFocusWithin && !nodeContains(currentTarget, focusEvent.target)) {
+					const window = ownerDocument?.defaultView;
+					if (window) {
+						const nativeEvent = new window.FocusEvent("blur", { relatedTarget: focusEvent.target });
+						setEventTarget(nativeEvent, currentTarget);
+						isFocusWithin = false;
+						removeAllGlobalListeners();
+						if (onBlurWithin) onBlurWithin(nativeEvent);
+						if (onFocusWithinChange) onFocusWithinChange(false);
+						cleanupRef?.();
+						cleanupRef = void 0;
+					}
+				}
+			}, { capture: true });
+		}
+	};
+	if (isDisabled) return { focusWithinProps: {
+		onFocus: void 0,
+		onBlur: void 0
+	} };
+	return { focusWithinProps: {
+		onFocus,
+		onBlur
+	} };
+}
+//#endregion
+export { createFocusWithin as t };
+
+//# sourceMappingURL=createFocusWithin.jsx.map

package/dist/_chunk/createFocusWithin.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFocusWithin.jsx","names":[],"sources":["../../src/interactions/createFocusWithin.ts"],"sourcesContent":["/**\n * createFocusWithin - Handles focus events for the target and its descendants.\n *\n * This is a 1-1 port of React-Aria's useFocusWithin hook adapted for SolidJS.\n */\n\nimport { JSX, onCleanup } from \"solid-js\";\nimport { getOwnerDocument, getEventTarget, nodeContains, createGlobalListeners } from \"../utils\";\nimport { setEventTarget } from \"../utils/events\";\n\nexport interface FocusWithinProps {\n  /** Whether the focus within events should be disabled. */\n  isDisabled?: boolean;\n  /** Handler that is called when the target element or a descendant receives focus. */\n  onFocusWithin?: (e: FocusEvent) => void;\n  /** Handler that is called when the target element and all descendants lose focus. */\n  onBlurWithin?: (e: FocusEvent) => void;\n  /** Handler that is called when the focus within state changes. */\n  onFocusWithinChange?: (isFocusWithin: boolean) => void;\n}\n\nexport interface FocusWithinResult {\n  /** Props to spread onto the target element. */\n  focusWithinProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\nfunction getActiveElement(doc: Document): Element | null {\n  let activeElement = doc.activeElement;\n  while (activeElement && (activeElement as Element).shadowRoot?.activeElement) {\n    activeElement = (activeElement as Element).shadowRoot?.activeElement ?? null;\n  }\n  return activeElement;\n}\n\nfunction createSyntheticBlurHandler(): (\n  _e: FocusEvent,\n  target: Element,\n) => (() => void) | undefined {\n  let isFocused = false;\n  let observer: MutationObserver | null = null;\n\n  return (_e: FocusEvent, target: Element) => {\n    if (\n      target instanceof HTMLButtonElement ||\n      target instanceof HTMLInputElement ||\n      target instanceof HTMLTextAreaElement ||\n      target instanceof HTMLSelectElement\n    ) {\n      isFocused = true;\n\n      const onBlurHandler = () => {\n        isFocused = false;\n\n        if (observer) {\n          observer.disconnect();\n          observer = null;\n        }\n      };\n\n      target.addEventListener(\"focusout\", onBlurHandler, { once: true });\n\n      observer = new MutationObserver(() => {\n        if (isFocused && (target as HTMLButtonElement).disabled) {\n          isFocused = false;\n          observer?.disconnect();\n          observer = null;\n          const ownerDocument = target.ownerDocument;\n          const relatedTarget =\n            target === ownerDocument.activeElement ? null : ownerDocument.activeElement;\n          target.dispatchEvent(new FocusEvent(\"blur\", { relatedTarget }));\n          target.dispatchEvent(new FocusEvent(\"focusout\", { bubbles: true, relatedTarget }));\n        }\n      });\n\n      observer.observe(target, { attributes: true, attributeFilter: [\"disabled\"] });\n\n      return () => {\n        if (observer) {\n          observer.disconnect();\n          observer = null;\n        }\n      };\n    }\n\n    return undefined;\n  };\n}\n\n/**\n * Handles focus events for the target and its descendants.\n *\n * Based on react-aria's useFocusWithin but adapted for SolidJS.\n */\nexport function createFocusWithin(props: FocusWithinProps = {}): FocusWithinResult {\n  const { isDisabled, onBlurWithin, onFocusWithin, onFocusWithinChange } = props;\n\n  // State tracking\n  let isFocusWithin = false;\n\n  // Global listeners manager\n  const { addGlobalListener, removeAllGlobalListeners } = createGlobalListeners();\n  const syntheticBlurHandler = createSyntheticBlurHandler();\n  let cleanupRef: (() => void) | undefined;\n\n  // Cleanup on unmount\n  onCleanup(() => {\n    cleanupRef?.();\n    removeAllGlobalListeners();\n  });\n\n  const onBlur: JSX.EventHandler<HTMLElement, FocusEvent> = (e) => {\n    // Ignore events bubbling through portals\n    if (!e.currentTarget.contains(e.target as Node)) {\n      return;\n    }\n\n    // We don't want to trigger onBlurWithin and then immediately onFocusWithin again\n    // when moving focus inside the element. Only trigger if the currentTarget doesn't\n    // include the relatedTarget (where focus is moving).\n    if (isFocusWithin && !e.currentTarget.contains(e.relatedTarget as Node)) {\n      isFocusWithin = false;\n      removeAllGlobalListeners();\n      cleanupRef?.();\n      cleanupRef = undefined;\n\n      if (onBlurWithin) {\n        onBlurWithin(e);\n      }\n\n      if (onFocusWithinChange) {\n        onFocusWithinChange(false);\n      }\n    }\n  };\n\n  const onFocus: JSX.EventHandler<HTMLElement, FocusEvent> = (e) => {\n    // Ignore events bubbling through portals\n    if (!e.currentTarget.contains(e.target as Node)) {\n      return;\n    }\n\n    // Double check that document.activeElement actually matches e.target\n    // in case a previously chained focus handler already moved focus somewhere else.\n    const ownerDocument = getOwnerDocument(e.target);\n    const activeElement = ownerDocument ? getActiveElement(ownerDocument) : null;\n\n    if (!isFocusWithin && activeElement === getEventTarget(e)) {\n      if (onFocusWithin) {\n        onFocusWithin(e);\n      }\n\n      if (onFocusWithinChange) {\n        onFocusWithinChange(true);\n      }\n\n      isFocusWithin = true;\n      cleanupRef = syntheticBlurHandler(e, e.target);\n\n      // Browsers don't fire blur events when elements are removed from the DOM.\n      // However, if a focus event occurs outside the element we're tracking, we\n      // can manually fire onBlur.\n      const currentTarget = e.currentTarget;\n\n      addGlobalListener(\n        \"focus\",\n        (focusEvent: Event) => {\n          if (\n            isFocusWithin &&\n            !nodeContains(currentTarget, (focusEvent as FocusEvent).target as Element)\n          ) {\n            // Create a synthetic blur event\n            const window = ownerDocument?.defaultView;\n            if (window) {\n              const nativeEvent = new window.FocusEvent(\"blur\", {\n                relatedTarget: (focusEvent as FocusEvent).target as Element,\n              });\n              setEventTarget(nativeEvent, currentTarget);\n\n              isFocusWithin = false;\n              removeAllGlobalListeners();\n\n              if (onBlurWithin) {\n                onBlurWithin(nativeEvent);\n              }\n\n              if (onFocusWithinChange) {\n                onFocusWithinChange(false);\n              }\n              cleanupRef?.();\n              cleanupRef = undefined;\n            }\n          }\n        },\n        { capture: true },\n      );\n    }\n  };\n\n  if (isDisabled) {\n    return {\n      focusWithinProps: {\n        onFocus: undefined,\n        onBlur: undefined,\n      },\n    };\n  }\n\n  return {\n    focusWithinProps: {\n      onFocus,\n      onBlur,\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/createFocusable.js

@@ -0,0 +1,131 @@
+import { o as mergeProps } from "./env.js";
+import { t as focusSafely } from "./focus.js";
+import { t as createFocus } from "./createFocus.js";
+import { createContext, onMount, useContext } from "solid-js";
+//#region src/interactions/createKeyboard.ts
+/**
+* Wraps a keyboard event handler to make stopPropagation the default,
+* and support continuePropagation instead.
+*/
+function createEventHandler(handler) {
+	if (!handler) return;
+	return (e) => {
+		let shouldStopPropagation = true;
+		const parentContinuePropagation = e.continuePropagation;
+		handler(Object.assign(e, { continuePropagation() {
+			shouldStopPropagation = false;
+			if (typeof parentContinuePropagation === "function") parentContinuePropagation.call(e);
+		} }));
+		if (shouldStopPropagation) e.stopPropagation();
+	};
+}
+/**
+* Handles keyboard interactions for a focusable element.
+*
+* Based on react-aria's useKeyboard but adapted for SolidJS.
+*/
+function createKeyboard(props = {}) {
+	if (props.isDisabled) return { keyboardProps: {} };
+	return { keyboardProps: {
+		onKeyDown: createEventHandler(props.onKeyDown),
+		onKeyUp: createEventHandler(props.onKeyUp)
+	} };
+}
+//#endregion
+//#region src/interactions/createFocusable.ts
+/**
+* createFocusable - Makes an element focusable and capable of auto focus.
+*
+* This is a 1-1 port of React-Aria's useFocusable hook adapted for SolidJS.
+*/
+/**
+* Context for passing focusable props to nested focusable children.
+* Used by FocusableProvider to pass DOM props to the nearest focusable child.
+*/
+const FocusableContext = createContext(null);
+/**
+* Hook to consume the FocusableContext and sync the ref.
+*/
+function useFocusableContext(setRef) {
+	const context = useContext(FocusableContext) || {};
+	if (context.ref) {
+		const contextRef = context.ref;
+		const originalSetRef = setRef;
+		setRef = (el) => {
+			originalSetRef(el);
+			contextRef(el);
+		};
+	}
+	const { ref: _, ...otherProps } = context;
+	return otherProps;
+}
+function isDisabledValue(isDisabled) {
+	if (typeof isDisabled === "function") return isDisabled();
+	return isDisabled ?? false;
+}
+/**
+* Makes an element focusable, handling disabled state and tab order.
+* Provides focus state tracking and autoFocus support.
+*
+* Based on react-aria's useFocusable but adapted for SolidJS.
+*
+* @example
+* ```tsx
+* import { createFocusable } from 'solidaria';
+*
+* function FocusableInput(props) {
+*   let ref;
+*   const { focusableProps } = createFocusable({
+*     autoFocus: props.autoFocus,
+*     onFocusChange: (focused) => console.log('Focus:', focused),
+*   });
+*
+*   return (
+*     <input
+*       {...focusableProps}
+*       ref={(el) => { ref = el; focusableProps.ref?.(el); }}
+*     />
+*   );
+* }
+* ```
+*/
+function createFocusable(props = {}, ref) {
+	let elementRef = null;
+	let autoFocusDone = false;
+	const setRef = (el) => {
+		elementRef = el;
+		ref?.(el);
+	};
+	const { focusProps } = createFocus({
+		isDisabled: isDisabledValue(props.isDisabled),
+		onFocus: props.onFocus,
+		onBlur: props.onBlur,
+		onFocusChange: props.onFocusChange
+	});
+	const { keyboardProps } = createKeyboard({
+		isDisabled: isDisabledValue(props.isDisabled),
+		onKeyDown: props.onKeyDown,
+		onKeyUp: props.onKeyUp
+	});
+	const interactions = mergeProps(focusProps, keyboardProps);
+	const contextProps = useFocusableContext(setRef);
+	const interactionProps = isDisabledValue(props.isDisabled) ? {} : contextProps;
+	onMount(() => {
+		if (props.autoFocus && elementRef && !autoFocusDone) {
+			focusSafely(elementRef);
+			autoFocusDone = true;
+		}
+	});
+	return { focusableProps: mergeProps({
+		...interactions,
+		get tabIndex() {
+			if (isDisabledValue(props.isDisabled)) return;
+			return props.excludeFromTabOrder ? -1 : 0;
+		},
+		ref: setRef
+	}, interactionProps) };
+}
+//#endregion
+export { createFocusable as n, createKeyboard as r, FocusableContext as t };
+
+//# sourceMappingURL=createFocusable.js.map

package/dist/_chunk/createFocusable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFocusable.js","names":[],"sources":["../../src/interactions/createKeyboard.ts","../../src/interactions/createFocusable.ts"],"sourcesContent":["/**\n * createKeyboard - Handles keyboard interactions for a focusable element.\n *\n * This is a 1-1 port of React-Aria's useKeyboard hook adapted for SolidJS.\n */\n\nimport { JSX } from \"solid-js\";\n\n/**\n * Keyboard event with continuePropagation support.\n * By default, keyboard events stop propagation.\n */\nexport interface KeyboardEvent extends globalThis.KeyboardEvent {\n  /** Call this to allow the event to propagate to parent elements. */\n  continuePropagation(): void;\n}\n\nexport interface KeyboardEvents {\n  /** Handler that is called when a key is pressed. */\n  onKeyDown?: (e: KeyboardEvent) => void;\n  /** Handler that is called when a key is released. */\n  onKeyUp?: (e: KeyboardEvent) => void;\n}\n\nexport interface CreateKeyboardProps extends KeyboardEvents {\n  /** Whether the keyboard events should be disabled. */\n  isDisabled?: boolean;\n}\n\nexport interface KeyboardResult {\n  /** Props to spread onto the target element. */\n  keyboardProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Wraps a keyboard event handler to make stopPropagation the default,\n * and support continuePropagation instead.\n */\nfunction createEventHandler<T extends globalThis.KeyboardEvent>(\n  handler?: (e: KeyboardEvent) => void,\n): ((e: T) => void) | undefined {\n  if (!handler) {\n    return undefined;\n  }\n\n  return (e: T) => {\n    let shouldStopPropagation = true;\n\n    // A nested createEventHandler may already have installed continuePropagation\n    // on this event; capture it so continuing here continues on the wrapper too.\n    const parentContinuePropagation = (e as { continuePropagation?: () => void })\n      .continuePropagation;\n\n    // Create a wrapped event with continuePropagation\n    const event = Object.assign(e, {\n      continuePropagation() {\n        shouldStopPropagation = false;\n        // Nested createEventHandler might have set continuePropagation, so we\n        // should continue propagation on the wrappers too.\n        if (typeof parentContinuePropagation === \"function\") {\n          parentContinuePropagation.call(e);\n        }\n      },\n    }) as KeyboardEvent;\n\n    handler(event);\n\n    if (shouldStopPropagation) {\n      e.stopPropagation();\n    }\n  };\n}\n\n/**\n * Handles keyboard interactions for a focusable element.\n *\n * Based on react-aria's useKeyboard but adapted for SolidJS.\n */\nexport function createKeyboard(props: CreateKeyboardProps = {}): KeyboardResult {\n  if (props.isDisabled) {\n    return {\n      keyboardProps: {},\n    };\n  }\n\n  return {\n    keyboardProps: {\n      onKeyDown: createEventHandler(props.onKeyDown),\n      onKeyUp: createEventHandler(props.onKeyUp),\n    },\n  };\n}\n","/**\n * createFocusable - Makes an element focusable and capable of auto focus.\n *\n * This is a 1-1 port of React-Aria's useFocusable hook adapted for SolidJS.\n */\n\nimport { JSX, Accessor, createContext, useContext, onMount } from \"solid-js\";\nimport { createFocus, type FocusEvents } from \"./createFocus\";\nimport { createKeyboard, type KeyboardEvents } from \"./createKeyboard\";\nimport { mergeProps, focusSafely } from \"../utils\";\n\nexport interface FocusableDOMProps {\n  /** Whether to exclude the element from the sequential tab order. */\n  excludeFromTabOrder?: boolean;\n}\n\nexport interface FocusableProps extends FocusEvents, KeyboardEvents {\n  /** Whether the element should receive focus on mount. */\n  autoFocus?: boolean;\n}\n\nexport interface CreateFocusableProps extends FocusableProps, FocusableDOMProps {\n  /** Whether focus should be disabled. */\n  isDisabled?: Accessor<boolean> | boolean;\n}\n\nexport interface FocusableResult {\n  /** Props to spread on the focusable element. */\n  focusableProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n// --- FocusableContext ---\n\nexport interface FocusableContextValue {\n  ref?: (el: HTMLElement) => void;\n  [key: string]: unknown;\n}\n\n/**\n * Context for passing focusable props to nested focusable children.\n * Used by FocusableProvider to pass DOM props to the nearest focusable child.\n */\nexport const FocusableContext = createContext<FocusableContextValue | null>(null);\n\n/**\n * Hook to consume the FocusableContext and sync the ref.\n */\nfunction useFocusableContext(\n  setRef: (el: HTMLElement) => void,\n): Omit<FocusableContextValue, \"ref\"> {\n  const context = useContext(FocusableContext) || {};\n\n  // If context has a ref, sync our ref to it\n  if (context.ref) {\n    const contextRef = context.ref;\n    // Create a combined ref that calls both\n    const originalSetRef = setRef;\n    setRef = (el: HTMLElement) => {\n      originalSetRef(el);\n      contextRef(el);\n    };\n  }\n\n  // Return context without the ref\n  const { ref: _, ...otherProps } = context;\n  return otherProps;\n}\n\nexport interface FocusableProviderProps {\n  /** The child element to provide DOM props to. */\n  children?: JSX.Element;\n}\n\nfunction isDisabledValue(isDisabled: Accessor<boolean> | boolean | undefined): boolean {\n  if (typeof isDisabled === \"function\") {\n    return isDisabled();\n  }\n  return isDisabled ?? false;\n}\n\n/**\n * Makes an element focusable, handling disabled state and tab order.\n * Provides focus state tracking and autoFocus support.\n *\n * Based on react-aria's useFocusable but adapted for SolidJS.\n *\n * @example\n * ```tsx\n * import { createFocusable } from 'solidaria';\n *\n * function FocusableInput(props) {\n *   let ref;\n *   const { focusableProps } = createFocusable({\n *     autoFocus: props.autoFocus,\n *     onFocusChange: (focused) => console.log('Focus:', focused),\n *   });\n *\n *   return (\n *     <input\n *       {...focusableProps}\n *       ref={(el) => { ref = el; focusableProps.ref?.(el); }}\n *     />\n *   );\n * }\n * ```\n */\nexport function createFocusable(\n  props: CreateFocusableProps = {},\n  ref?: (el: HTMLElement) => void,\n): FocusableResult {\n  let elementRef: HTMLElement | null = null;\n  let autoFocusDone = false;\n\n  // Set up ref handler\n  const setRef = (el: HTMLElement) => {\n    elementRef = el;\n    ref?.(el);\n  };\n\n  // Get focus and keyboard props from the respective hooks\n  const { focusProps } = createFocus({\n    isDisabled: isDisabledValue(props.isDisabled),\n    onFocus: props.onFocus,\n    onBlur: props.onBlur,\n    onFocusChange: props.onFocusChange,\n  });\n\n  const { keyboardProps } = createKeyboard({\n    isDisabled: isDisabledValue(props.isDisabled),\n    onKeyDown: props.onKeyDown,\n    onKeyUp: props.onKeyUp,\n  });\n\n  // Merge focus and keyboard interactions\n  const interactions = mergeProps(focusProps, keyboardProps);\n\n  // Get context props (from FocusableProvider if present)\n  const contextProps = useFocusableContext(setRef);\n  const interactionProps = isDisabledValue(props.isDisabled) ? {} : contextProps;\n\n  // Handle autoFocus\n  onMount(() => {\n    if (props.autoFocus && elementRef && !autoFocusDone) {\n      focusSafely(elementRef);\n      autoFocusDone = true;\n    }\n  });\n\n  // Build final focusable props\n  const focusableProps = mergeProps(\n    {\n      ...interactions,\n      get tabIndex() {\n        if (isDisabledValue(props.isDisabled)) {\n          return undefined;\n        }\n        return props.excludeFromTabOrder ? -1 : 0;\n      },\n      ref: setRef,\n    },\n    interactionProps,\n  ) as JSX.HTMLAttributes<HTMLElement>;\n\n  return {\n    focusableProps,\n  };\n}\n"],"mappings":";;;;;;;;;AAsCA,SAAS,mBACP,SAC8B;CAC9B,IAAI,CAAC,SACH;CAGF,QAAQ,MAAS;EACf,IAAI,wBAAwB;EAI5B,MAAM,4BAA6B,EAChC;EAcH,QAXc,OAAO,OAAO,GAAG,EAC7B,sBAAsB;GACpB,wBAAwB;GAGxB,IAAI,OAAO,8BAA8B,YACvC,0BAA0B,KAAK,CAAC;EAEpC,EACF,CAEY,CAAC;EAEb,IAAI,uBACF,EAAE,gBAAgB;CAEtB;AACF;;;;;;AAOA,SAAgB,eAAe,QAA6B,CAAC,GAAmB;CAC9E,IAAI,MAAM,YACR,OAAO,EACL,eAAe,CAAC,EAClB;CAGF,OAAO,EACL,eAAe;EACb,WAAW,mBAAmB,MAAM,SAAS;EAC7C,SAAS,mBAAmB,MAAM,OAAO;CAC3C,EACF;AACF;;;;;;;;;;;;ACjDA,MAAa,mBAAmB,cAA4C,IAAI;;;;AAKhF,SAAS,oBACP,QACoC;CACpC,MAAM,UAAU,WAAW,gBAAgB,KAAK,CAAC;CAGjD,IAAI,QAAQ,KAAK;EACf,MAAM,aAAa,QAAQ;EAE3B,MAAM,iBAAiB;EACvB,UAAU,OAAoB;GAC5B,eAAe,EAAE;GACjB,WAAW,EAAE;EACf;CACF;CAGA,MAAM,EAAE,KAAK,GAAG,GAAG,eAAe;CAClC,OAAO;AACT;AAOA,SAAS,gBAAgB,YAA8D;CACrF,IAAI,OAAO,eAAe,YACxB,OAAO,WAAW;CAEpB,OAAO,cAAc;AACvB;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,SAAgB,gBACd,QAA8B,CAAC,GAC/B,KACiB;CACjB,IAAI,aAAiC;CACrC,IAAI,gBAAgB;CAGpB,MAAM,UAAU,OAAoB;EAClC,aAAa;EACb,MAAM,EAAE;CACV;CAGA,MAAM,EAAE,eAAe,YAAY;EACjC,YAAY,gBAAgB,MAAM,UAAU;EAC5C,SAAS,MAAM;EACf,QAAQ,MAAM;EACd,eAAe,MAAM;CACvB,CAAC;CAED,MAAM,EAAE,kBAAkB,eAAe;EACvC,YAAY,gBAAgB,MAAM,UAAU;EAC5C,WAAW,MAAM;EACjB,SAAS,MAAM;CACjB,CAAC;CAGD,MAAM,eAAe,WAAW,YAAY,aAAa;CAGzD,MAAM,eAAe,oBAAoB,MAAM;CAC/C,MAAM,mBAAmB,gBAAgB,MAAM,UAAU,IAAI,CAAC,IAAI;CAGlE,cAAc;EACZ,IAAI,MAAM,aAAa,cAAc,CAAC,eAAe;GACnD,YAAY,UAAU;GACtB,gBAAgB;EAClB;CACF,CAAC;CAiBD,OAAO,EACL,gBAfqB,WACrB;EACE,GAAG;EACH,IAAI,WAAW;GACb,IAAI,gBAAgB,MAAM,UAAU,GAClC;GAEF,OAAO,MAAM,sBAAsB,KAAK;EAC1C;EACA,KAAK;CACP,GACA,gBAIa,EACf;AACF"}

package/dist/_chunk/createFocusable.jsx

@@ -0,0 +1,131 @@
+import { o as mergeProps } from "./env.jsx";
+import { t as focusSafely } from "./focus.jsx";
+import { t as createFocus } from "./createFocus.jsx";
+import { createContext, onMount, useContext } from "solid-js";
+//#region src/interactions/createKeyboard.ts
+/**
+* Wraps a keyboard event handler to make stopPropagation the default,
+* and support continuePropagation instead.
+*/
+function createEventHandler(handler) {
+	if (!handler) return;
+	return (e) => {
+		let shouldStopPropagation = true;
+		const parentContinuePropagation = e.continuePropagation;
+		handler(Object.assign(e, { continuePropagation() {
+			shouldStopPropagation = false;
+			if (typeof parentContinuePropagation === "function") parentContinuePropagation.call(e);
+		} }));
+		if (shouldStopPropagation) e.stopPropagation();
+	};
+}
+/**
+* Handles keyboard interactions for a focusable element.
+*
+* Based on react-aria's useKeyboard but adapted for SolidJS.
+*/
+function createKeyboard(props = {}) {
+	if (props.isDisabled) return { keyboardProps: {} };
+	return { keyboardProps: {
+		onKeyDown: createEventHandler(props.onKeyDown),
+		onKeyUp: createEventHandler(props.onKeyUp)
+	} };
+}
+//#endregion
+//#region src/interactions/createFocusable.ts
+/**
+* createFocusable - Makes an element focusable and capable of auto focus.
+*
+* This is a 1-1 port of React-Aria's useFocusable hook adapted for SolidJS.
+*/
+/**
+* Context for passing focusable props to nested focusable children.
+* Used by FocusableProvider to pass DOM props to the nearest focusable child.
+*/
+const FocusableContext = createContext(null);
+/**
+* Hook to consume the FocusableContext and sync the ref.
+*/
+function useFocusableContext(setRef) {
+	const context = useContext(FocusableContext) || {};
+	if (context.ref) {
+		const contextRef = context.ref;
+		const originalSetRef = setRef;
+		setRef = (el) => {
+			originalSetRef(el);
+			contextRef(el);
+		};
+	}
+	const { ref: _, ...otherProps } = context;
+	return otherProps;
+}
+function isDisabledValue(isDisabled) {
+	if (typeof isDisabled === "function") return isDisabled();
+	return isDisabled ?? false;
+}
+/**
+* Makes an element focusable, handling disabled state and tab order.
+* Provides focus state tracking and autoFocus support.
+*
+* Based on react-aria's useFocusable but adapted for SolidJS.
+*
+* @example
+* ```tsx
+* import { createFocusable } from 'solidaria';
+*
+* function FocusableInput(props) {
+*   let ref;
+*   const { focusableProps } = createFocusable({
+*     autoFocus: props.autoFocus,
+*     onFocusChange: (focused) => console.log('Focus:', focused),
+*   });
+*
+*   return (
+*     <input
+*       {...focusableProps}
+*       ref={(el) => { ref = el; focusableProps.ref?.(el); }}
+*     />
+*   );
+* }
+* ```
+*/
+function createFocusable(props = {}, ref) {
+	let elementRef = null;
+	let autoFocusDone = false;
+	const setRef = (el) => {
+		elementRef = el;
+		ref?.(el);
+	};
+	const { focusProps } = createFocus({
+		isDisabled: isDisabledValue(props.isDisabled),
+		onFocus: props.onFocus,
+		onBlur: props.onBlur,
+		onFocusChange: props.onFocusChange
+	});
+	const { keyboardProps } = createKeyboard({
+		isDisabled: isDisabledValue(props.isDisabled),
+		onKeyDown: props.onKeyDown,
+		onKeyUp: props.onKeyUp
+	});
+	const interactions = mergeProps(focusProps, keyboardProps);
+	const contextProps = useFocusableContext(setRef);
+	const interactionProps = isDisabledValue(props.isDisabled) ? {} : contextProps;
+	onMount(() => {
+		if (props.autoFocus && elementRef && !autoFocusDone) {
+			focusSafely(elementRef);
+			autoFocusDone = true;
+		}
+	});
+	return { focusableProps: mergeProps({
+		...interactions,
+		get tabIndex() {
+			if (isDisabledValue(props.isDisabled)) return;
+			return props.excludeFromTabOrder ? -1 : 0;
+		},
+		ref: setRef
+	}, interactionProps) };
+}
+//#endregion
+export { createFocusable as n, createKeyboard as r, FocusableContext as t };
+
+//# sourceMappingURL=createFocusable.jsx.map

package/dist/_chunk/createFocusable.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFocusable.jsx","names":[],"sources":["../../src/interactions/createKeyboard.ts","../../src/interactions/createFocusable.ts"],"sourcesContent":["/**\n * createKeyboard - Handles keyboard interactions for a focusable element.\n *\n * This is a 1-1 port of React-Aria's useKeyboard hook adapted for SolidJS.\n */\n\nimport { JSX } from \"solid-js\";\n\n/**\n * Keyboard event with continuePropagation support.\n * By default, keyboard events stop propagation.\n */\nexport interface KeyboardEvent extends globalThis.KeyboardEvent {\n  /** Call this to allow the event to propagate to parent elements. */\n  continuePropagation(): void;\n}\n\nexport interface KeyboardEvents {\n  /** Handler that is called when a key is pressed. */\n  onKeyDown?: (e: KeyboardEvent) => void;\n  /** Handler that is called when a key is released. */\n  onKeyUp?: (e: KeyboardEvent) => void;\n}\n\nexport interface CreateKeyboardProps extends KeyboardEvents {\n  /** Whether the keyboard events should be disabled. */\n  isDisabled?: boolean;\n}\n\nexport interface KeyboardResult {\n  /** Props to spread onto the target element. */\n  keyboardProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Wraps a keyboard event handler to make stopPropagation the default,\n * and support continuePropagation instead.\n */\nfunction createEventHandler<T extends globalThis.KeyboardEvent>(\n  handler?: (e: KeyboardEvent) => void,\n): ((e: T) => void) | undefined {\n  if (!handler) {\n    return undefined;\n  }\n\n  return (e: T) => {\n    let shouldStopPropagation = true;\n\n    // A nested createEventHandler may already have installed continuePropagation\n    // on this event; capture it so continuing here continues on the wrapper too.\n    const parentContinuePropagation = (e as { continuePropagation?: () => void })\n      .continuePropagation;\n\n    // Create a wrapped event with continuePropagation\n    const event = Object.assign(e, {\n      continuePropagation() {\n        shouldStopPropagation = false;\n        // Nested createEventHandler might have set continuePropagation, so we\n        // should continue propagation on the wrappers too.\n        if (typeof parentContinuePropagation === \"function\") {\n          parentContinuePropagation.call(e);\n        }\n      },\n    }) as KeyboardEvent;\n\n    handler(event);\n\n    if (shouldStopPropagation) {\n      e.stopPropagation();\n    }\n  };\n}\n\n/**\n * Handles keyboard interactions for a focusable element.\n *\n * Based on react-aria's useKeyboard but adapted for SolidJS.\n */\nexport function createKeyboard(props: CreateKeyboardProps = {}): KeyboardResult {\n  if (props.isDisabled) {\n    return {\n      keyboardProps: {},\n    };\n  }\n\n  return {\n    keyboardProps: {\n      onKeyDown: createEventHandler(props.onKeyDown),\n      onKeyUp: createEventHandler(props.onKeyUp),\n    },\n  };\n}\n","/**\n * createFocusable - Makes an element focusable and capable of auto focus.\n *\n * This is a 1-1 port of React-Aria's useFocusable hook adapted for SolidJS.\n */\n\nimport { JSX, Accessor, createContext, useContext, onMount } from \"solid-js\";\nimport { createFocus, type FocusEvents } from \"./createFocus\";\nimport { createKeyboard, type KeyboardEvents } from \"./createKeyboard\";\nimport { mergeProps, focusSafely } from \"../utils\";\n\nexport interface FocusableDOMProps {\n  /** Whether to exclude the element from the sequential tab order. */\n  excludeFromTabOrder?: boolean;\n}\n\nexport interface FocusableProps extends FocusEvents, KeyboardEvents {\n  /** Whether the element should receive focus on mount. */\n  autoFocus?: boolean;\n}\n\nexport interface CreateFocusableProps extends FocusableProps, FocusableDOMProps {\n  /** Whether focus should be disabled. */\n  isDisabled?: Accessor<boolean> | boolean;\n}\n\nexport interface FocusableResult {\n  /** Props to spread on the focusable element. */\n  focusableProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n// --- FocusableContext ---\n\nexport interface FocusableContextValue {\n  ref?: (el: HTMLElement) => void;\n  [key: string]: unknown;\n}\n\n/**\n * Context for passing focusable props to nested focusable children.\n * Used by FocusableProvider to pass DOM props to the nearest focusable child.\n */\nexport const FocusableContext = createContext<FocusableContextValue | null>(null);\n\n/**\n * Hook to consume the FocusableContext and sync the ref.\n */\nfunction useFocusableContext(\n  setRef: (el: HTMLElement) => void,\n): Omit<FocusableContextValue, \"ref\"> {\n  const context = useContext(FocusableContext) || {};\n\n  // If context has a ref, sync our ref to it\n  if (context.ref) {\n    const contextRef = context.ref;\n    // Create a combined ref that calls both\n    const originalSetRef = setRef;\n    setRef = (el: HTMLElement) => {\n      originalSetRef(el);\n      contextRef(el);\n    };\n  }\n\n  // Return context without the ref\n  const { ref: _, ...otherProps } = context;\n  return otherProps;\n}\n\nexport interface FocusableProviderProps {\n  /** The child element to provide DOM props to. */\n  children?: JSX.Element;\n}\n\nfunction isDisabledValue(isDisabled: Accessor<boolean> | boolean | undefined): boolean {\n  if (typeof isDisabled === \"function\") {\n    return isDisabled();\n  }\n  return isDisabled ?? false;\n}\n\n/**\n * Makes an element focusable, handling disabled state and tab order.\n * Provides focus state tracking and autoFocus support.\n *\n * Based on react-aria's useFocusable but adapted for SolidJS.\n *\n * @example\n * ```tsx\n * import { createFocusable } from 'solidaria';\n *\n * function FocusableInput(props) {\n *   let ref;\n *   const { focusableProps } = createFocusable({\n *     autoFocus: props.autoFocus,\n *     onFocusChange: (focused) => console.log('Focus:', focused),\n *   });\n *\n *   return (\n *     <input\n *       {...focusableProps}\n *       ref={(el) => { ref = el; focusableProps.ref?.(el); }}\n *     />\n *   );\n * }\n * ```\n */\nexport function createFocusable(\n  props: CreateFocusableProps = {},\n  ref?: (el: HTMLElement) => void,\n): FocusableResult {\n  let elementRef: HTMLElement | null = null;\n  let autoFocusDone = false;\n\n  // Set up ref handler\n  const setRef = (el: HTMLElement) => {\n    elementRef = el;\n    ref?.(el);\n  };\n\n  // Get focus and keyboard props from the respective hooks\n  const { focusProps } = createFocus({\n    isDisabled: isDisabledValue(props.isDisabled),\n    onFocus: props.onFocus,\n    onBlur: props.onBlur,\n    onFocusChange: props.onFocusChange,\n  });\n\n  const { keyboardProps } = createKeyboard({\n    isDisabled: isDisabledValue(props.isDisabled),\n    onKeyDown: props.onKeyDown,\n    onKeyUp: props.onKeyUp,\n  });\n\n  // Merge focus and keyboard interactions\n  const interactions = mergeProps(focusProps, keyboardProps);\n\n  // Get context props (from FocusableProvider if present)\n  const contextProps = useFocusableContext(setRef);\n  const interactionProps = isDisabledValue(props.isDisabled) ? {} : contextProps;\n\n  // Handle autoFocus\n  onMount(() => {\n    if (props.autoFocus && elementRef && !autoFocusDone) {\n      focusSafely(elementRef);\n      autoFocusDone = true;\n    }\n  });\n\n  // Build final focusable props\n  const focusableProps = mergeProps(\n    {\n      ...interactions,\n      get tabIndex() {\n        if (isDisabledValue(props.isDisabled)) {\n          return undefined;\n        }\n        return props.excludeFromTabOrder ? -1 : 0;\n      },\n      ref: setRef,\n    },\n    interactionProps,\n  ) as JSX.HTMLAttributes<HTMLElement>;\n\n  return {\n    focusableProps,\n  };\n}\n"],"mappings":";;;;;;;;;AAsCA,SAAS,mBACP,SAC8B;CAC9B,IAAI,CAAC,SACH;CAGF,QAAQ,MAAS;EACf,IAAI,wBAAwB;EAI5B,MAAM,4BAA6B,EAChC;EAcH,QAXc,OAAO,OAAO,GAAG,EAC7B,sBAAsB;GACpB,wBAAwB;GAGxB,IAAI,OAAO,8BAA8B,YACvC,0BAA0B,KAAK,CAAC;EAEpC,EACF,CAEY,CAAC;EAEb,IAAI,uBACF,EAAE,gBAAgB;CAEtB;AACF;;;;;;AAOA,SAAgB,eAAe,QAA6B,CAAC,GAAmB;CAC9E,IAAI,MAAM,YACR,OAAO,EACL,eAAe,CAAC,EAClB;CAGF,OAAO,EACL,eAAe;EACb,WAAW,mBAAmB,MAAM,SAAS;EAC7C,SAAS,mBAAmB,MAAM,OAAO;CAC3C,EACF;AACF;;;;;;;;;;;;ACjDA,MAAa,mBAAmB,cAA4C,IAAI;;;;AAKhF,SAAS,oBACP,QACoC;CACpC,MAAM,UAAU,WAAW,gBAAgB,KAAK,CAAC;CAGjD,IAAI,QAAQ,KAAK;EACf,MAAM,aAAa,QAAQ;EAE3B,MAAM,iBAAiB;EACvB,UAAU,OAAoB;GAC5B,eAAe,EAAE;GACjB,WAAW,EAAE;EACf;CACF;CAGA,MAAM,EAAE,KAAK,GAAG,GAAG,eAAe;CAClC,OAAO;AACT;AAOA,SAAS,gBAAgB,YAA8D;CACrF,IAAI,OAAO,eAAe,YACxB,OAAO,WAAW;CAEpB,OAAO,cAAc;AACvB;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,SAAgB,gBACd,QAA8B,CAAC,GAC/B,KACiB;CACjB,IAAI,aAAiC;CACrC,IAAI,gBAAgB;CAGpB,MAAM,UAAU,OAAoB;EAClC,aAAa;EACb,MAAM,EAAE;CACV;CAGA,MAAM,EAAE,eAAe,YAAY;EACjC,YAAY,gBAAgB,MAAM,UAAU;EAC5C,SAAS,MAAM;EACf,QAAQ,MAAM;EACd,eAAe,MAAM;CACvB,CAAC;CAED,MAAM,EAAE,kBAAkB,eAAe;EACvC,YAAY,gBAAgB,MAAM,UAAU;EAC5C,WAAW,MAAM;EACjB,SAAS,MAAM;CACjB,CAAC;CAGD,MAAM,eAAe,WAAW,YAAY,aAAa;CAGzD,MAAM,eAAe,oBAAoB,MAAM;CAC/C,MAAM,mBAAmB,gBAAgB,MAAM,UAAU,IAAI,CAAC,IAAI;CAGlE,cAAc;EACZ,IAAI,MAAM,aAAa,cAAc,CAAC,eAAe;GACnD,YAAY,UAAU;GACtB,gBAAgB;EAClB;CACF,CAAC;CAiBD,OAAO,EACL,gBAfqB,WACrB;EACE,GAAG;EACH,IAAI,WAAW;GACb,IAAI,gBAAgB,MAAM,UAAU,GAClC;GAEF,OAAO,MAAM,sBAAsB,KAAK;EAC1C;EACA,KAAK;CACP,GACA,gBAIa,EACf;AACF"}