@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/dist/_chunk/createFormValidation.js

@@ -0,0 +1,135 @@
+import { l as setInteractionModality } from "./createInteractionModality.js";
+import { createEffect, onCleanup } from "solid-js";
+//#region src/form/createFormValidation.ts
+/**
+* createFormValidation hook for solidaria
+*
+* Connects form validation state to native HTML form validation.
+* Handles the invalid event, form reset, and focus management.
+*
+* Port of react-aria's useFormValidation.
+*/
+function getValidity(input) {
+	const validity = input.validity;
+	return {
+		badInput: validity.badInput,
+		customError: validity.customError,
+		patternMismatch: validity.patternMismatch,
+		rangeOverflow: validity.rangeOverflow,
+		rangeUnderflow: validity.rangeUnderflow,
+		stepMismatch: validity.stepMismatch,
+		tooLong: validity.tooLong,
+		tooShort: validity.tooShort,
+		typeMismatch: validity.typeMismatch,
+		valueMissing: validity.valueMissing,
+		valid: validity.valid
+	};
+}
+function getNativeValidity(input) {
+	return {
+		isInvalid: !input.validity.valid,
+		validationDetails: getValidity(input),
+		validationErrors: input.validationMessage ? [input.validationMessage] : []
+	};
+}
+function getFirstInvalidInput(form) {
+	for (let i = 0; i < form.elements.length; i++) {
+		const element = form.elements[i];
+		if (!element.validity.valid) return element;
+	}
+	return null;
+}
+/**
+* Connects form validation state to a native HTML form input.
+*
+* This hook:
+* - Sets custom validity on the native input based on validation state
+* - Handles the 'invalid' event to commit validation and focus the first invalid input
+* - Handles form reset to clear validation state
+* - Handles input change to commit validation
+*
+* @example
+* ```tsx
+* function MyTextField(props) {
+*   let inputRef: HTMLInputElement | undefined;
+*
+*   const validationState = createFormValidationState({
+*     value: props.value,
+*     validate: props.validate,
+*     validationBehavior: 'native',
+*   });
+*
+*   createFormValidation(
+*     { validationBehavior: 'native' },
+*     validationState,
+*     () => inputRef
+*   );
+*
+*   return (
+*     <input
+*       ref={inputRef}
+*       value={props.value}
+*       aria-invalid={validationState.displayValidation().isInvalid || undefined}
+*     />
+*   );
+* }
+* ```
+*/
+function createFormValidation(props, state, ref) {
+	const validationBehavior = () => props.validationBehavior ?? "aria";
+	const focus = () => props.focus;
+	let isIgnoredReset = false;
+	createEffect(() => {
+		const input = ref();
+		if (validationBehavior() === "native" && input && "setCustomValidity" in input && !input.disabled) {
+			const realtimeValidation = state.realtimeValidation();
+			const errorMessage = realtimeValidation.isInvalid ? realtimeValidation.validationErrors.join(" ") || "Invalid value." : "";
+			input.setCustomValidity(errorMessage);
+			if (!input.hasAttribute("title")) input.title = "";
+			if (!realtimeValidation.isInvalid) state.updateValidation(getNativeValidity(input));
+		}
+	});
+	createEffect(() => {
+		const input = ref();
+		if (!input) return;
+		const form = input.form;
+		const onInvalid = (e) => {
+			if (!state.displayValidation().isInvalid) state.commitValidation();
+			if (!e.defaultPrevented && form && getFirstInvalidInput(form) === input) {
+				const focusFn = focus();
+				if (focusFn) focusFn();
+				else input.focus();
+				setInteractionModality("keyboard");
+			}
+			e.preventDefault();
+		};
+		const onChange = () => {
+			state.commitValidation();
+		};
+		const onReset = () => {
+			if (!isIgnoredReset) state.resetValidation();
+		};
+		let originalReset;
+		if (form) {
+			originalReset = form.reset.bind(form);
+			form.reset = () => {
+				isIgnoredReset = !window.event || window.event.type === "message" && window.event.target instanceof MessagePort;
+				originalReset?.();
+				isIgnoredReset = false;
+			};
+		}
+		input.addEventListener("invalid", onInvalid);
+		input.addEventListener("change", onChange);
+		form?.addEventListener("reset", onReset);
+		onCleanup(() => {
+			input.removeEventListener("invalid", onInvalid);
+			input.removeEventListener("change", onChange);
+			form?.removeEventListener("reset", onReset);
+			if (form && originalReset) form.reset = originalReset;
+		});
+	});
+}
+//#endregion
+export { createFormValidation as t };
+
+//# sourceMappingURL=createFormValidation.js.map

package/dist/_chunk/createFormValidation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFormValidation.js","names":[],"sources":["../../src/form/createFormValidation.ts"],"sourcesContent":["/**\n * createFormValidation hook for solidaria\n *\n * Connects form validation state to native HTML form validation.\n * Handles the invalid event, form reset, and focus management.\n *\n * Port of react-aria's useFormValidation.\n */\n\nimport { type Accessor, createEffect, onCleanup } from \"solid-js\";\nimport { type FormValidationState, type ValidationResult } from \"@proyecto-viviana/solid-stately\";\nimport { setInteractionModality } from \"../interactions/createInteractionModality\";\n\nexport type ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;\n\nexport type ValidationBehavior = \"aria\" | \"native\";\n\nexport interface FormValidationProps {\n  /** Validation behavior: 'aria' for realtime, 'native' for on submit. */\n  validationBehavior?: ValidationBehavior;\n  /** Custom focus function to call on validation error. */\n  focus?: () => void;\n}\n\nfunction getValidity(input: ValidatableElement): ValidityState {\n  // Create a snapshot of the validity state (the native object is live)\n  const validity = input.validity;\n  return {\n    badInput: validity.badInput,\n    customError: validity.customError,\n    patternMismatch: validity.patternMismatch,\n    rangeOverflow: validity.rangeOverflow,\n    rangeUnderflow: validity.rangeUnderflow,\n    stepMismatch: validity.stepMismatch,\n    tooLong: validity.tooLong,\n    tooShort: validity.tooShort,\n    typeMismatch: validity.typeMismatch,\n    valueMissing: validity.valueMissing,\n    valid: validity.valid,\n  };\n}\n\nfunction getNativeValidity(input: ValidatableElement): ValidationResult {\n  return {\n    isInvalid: !input.validity.valid,\n    validationDetails: getValidity(input),\n    validationErrors: input.validationMessage ? [input.validationMessage] : [],\n  };\n}\n\nfunction getFirstInvalidInput(form: HTMLFormElement): ValidatableElement | null {\n  for (let i = 0; i < form.elements.length; i++) {\n    const element = form.elements[i] as ValidatableElement;\n    if (!element.validity.valid) {\n      return element;\n    }\n  }\n  return null;\n}\n\n/**\n * Connects form validation state to a native HTML form input.\n *\n * This hook:\n * - Sets custom validity on the native input based on validation state\n * - Handles the 'invalid' event to commit validation and focus the first invalid input\n * - Handles form reset to clear validation state\n * - Handles input change to commit validation\n *\n * @example\n * ```tsx\n * function MyTextField(props) {\n *   let inputRef: HTMLInputElement | undefined;\n *\n *   const validationState = createFormValidationState({\n *     value: props.value,\n *     validate: props.validate,\n *     validationBehavior: 'native',\n *   });\n *\n *   createFormValidation(\n *     { validationBehavior: 'native' },\n *     validationState,\n *     () => inputRef\n *   );\n *\n *   return (\n *     <input\n *       ref={inputRef}\n *       value={props.value}\n *       aria-invalid={validationState.displayValidation().isInvalid || undefined}\n *     />\n *   );\n * }\n * ```\n */\nexport function createFormValidation(\n  props: FormValidationProps,\n  state: FormValidationState,\n  ref: Accessor<ValidatableElement | undefined>,\n): void {\n  const validationBehavior = () => props.validationBehavior ?? \"aria\";\n  const focus = () => props.focus;\n\n  // Track whether we should ignore form reset (for React-like programmatic resets)\n  let isIgnoredReset = false;\n\n  // Set custom validity on the native input\n  createEffect(() => {\n    const input = ref();\n    // `'setCustomValidity' in input` guards refs that aren't true form elements\n    // (e.g. a custom element), matching upstream useFormValidation.\n    if (\n      validationBehavior() === \"native\" &&\n      input &&\n      \"setCustomValidity\" in input &&\n      !input.disabled\n    ) {\n      const realtimeValidation = state.realtimeValidation();\n      const errorMessage = realtimeValidation.isInvalid\n        ? realtimeValidation.validationErrors.join(\" \") || \"Invalid value.\"\n        : \"\";\n      input.setCustomValidity(errorMessage);\n\n      // Prevent default tooltip for validation message\n      if (!input.hasAttribute(\"title\")) {\n        input.title = \"\";\n      }\n\n      // Update validation with native validity if not already invalid\n      if (!realtimeValidation.isInvalid) {\n        state.updateValidation(getNativeValidity(input));\n      }\n    }\n  });\n\n  // Set up event listeners\n  createEffect(() => {\n    const input = ref();\n    if (!input) {\n      return;\n    }\n\n    const form = input.form;\n\n    // Handle invalid event\n    const onInvalid = (e: Event) => {\n      // Only commit validation if we are not already displaying one\n      if (!state.displayValidation().isInvalid) {\n        state.commitValidation();\n      }\n\n      // Auto focus the first invalid input in a form\n      if (!e.defaultPrevented && form && getFirstInvalidInput(form) === input) {\n        const focusFn = focus();\n        if (focusFn) {\n          focusFn();\n        } else {\n          input.focus();\n        }\n        // Always show focus ring\n        setInteractionModality(\"keyboard\");\n      }\n\n      // Prevent default browser error UI\n      e.preventDefault();\n    };\n\n    // Handle change event\n    const onChange = () => {\n      state.commitValidation();\n    };\n\n    // Handle form reset\n    const onReset = () => {\n      if (!isIgnoredReset) {\n        state.resetValidation();\n      }\n    };\n\n    // Patch form.reset to detect programmatic resets\n    let originalReset: (() => void) | undefined;\n    if (form) {\n      originalReset = form.reset.bind(form);\n      form.reset = () => {\n        // Ignore programmatic resets outside user events\n        isIgnoredReset =\n          !window.event ||\n          (window.event.type === \"message\" && window.event.target instanceof MessagePort);\n        originalReset?.();\n        isIgnoredReset = false;\n      };\n    }\n\n    input.addEventListener(\"invalid\", onInvalid);\n    input.addEventListener(\"change\", onChange);\n    form?.addEventListener(\"reset\", onReset);\n\n    onCleanup(() => {\n      input.removeEventListener(\"invalid\", onInvalid);\n      input.removeEventListener(\"change\", onChange);\n      form?.removeEventListener(\"reset\", onReset);\n      if (form && originalReset) {\n        form.reset = originalReset;\n      }\n    });\n  });\n}\n"],"mappings":";;;;;;;;;;;AAwBA,SAAS,YAAY,OAA0C;CAE7D,MAAM,WAAW,MAAM;CACvB,OAAO;EACL,UAAU,SAAS;EACnB,aAAa,SAAS;EACtB,iBAAiB,SAAS;EAC1B,eAAe,SAAS;EACxB,gBAAgB,SAAS;EACzB,cAAc,SAAS;EACvB,SAAS,SAAS;EAClB,UAAU,SAAS;EACnB,cAAc,SAAS;EACvB,cAAc,SAAS;EACvB,OAAO,SAAS;CAClB;AACF;AAEA,SAAS,kBAAkB,OAA6C;CACtE,OAAO;EACL,WAAW,CAAC,MAAM,SAAS;EAC3B,mBAAmB,YAAY,KAAK;EACpC,kBAAkB,MAAM,oBAAoB,CAAC,MAAM,iBAAiB,IAAI,CAAC;CAC3E;AACF;AAEA,SAAS,qBAAqB,MAAkD;CAC9E,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,SAAS,QAAQ,KAAK;EAC7C,MAAM,UAAU,KAAK,SAAS;EAC9B,IAAI,CAAC,QAAQ,SAAS,OACpB,OAAO;CAEX;CACA,OAAO;AACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,SAAgB,qBACd,OACA,OACA,KACM;CACN,MAAM,2BAA2B,MAAM,sBAAsB;CAC7D,MAAM,cAAc,MAAM;CAG1B,IAAI,iBAAiB;CAGrB,mBAAmB;EACjB,MAAM,QAAQ,IAAI;EAGlB,IACE,mBAAmB,MAAM,YACzB,SACA,uBAAuB,SACvB,CAAC,MAAM,UACP;GACA,MAAM,qBAAqB,MAAM,mBAAmB;GACpD,MAAM,eAAe,mBAAmB,YACpC,mBAAmB,iBAAiB,KAAK,GAAG,KAAK,mBACjD;GACJ,MAAM,kBAAkB,YAAY;GAGpC,IAAI,CAAC,MAAM,aAAa,OAAO,GAC7B,MAAM,QAAQ;GAIhB,IAAI,CAAC,mBAAmB,WACtB,MAAM,iBAAiB,kBAAkB,KAAK,CAAC;EAEnD;CACF,CAAC;CAGD,mBAAmB;EACjB,MAAM,QAAQ,IAAI;EAClB,IAAI,CAAC,OACH;EAGF,MAAM,OAAO,MAAM;EAGnB,MAAM,aAAa,MAAa;GAE9B,IAAI,CAAC,MAAM,kBAAkB,CAAC,CAAC,WAC7B,MAAM,iBAAiB;GAIzB,IAAI,CAAC,EAAE,oBAAoB,QAAQ,qBAAqB,IAAI,MAAM,OAAO;IACvE,MAAM,UAAU,MAAM;IACtB,IAAI,SACF,QAAQ;SAER,MAAM,MAAM;IAGd,uBAAuB,UAAU;GACnC;GAGA,EAAE,eAAe;EACnB;EAGA,MAAM,iBAAiB;GACrB,MAAM,iBAAiB;EACzB;EAGA,MAAM,gBAAgB;GACpB,IAAI,CAAC,gBACH,MAAM,gBAAgB;EAE1B;EAGA,IAAI;EACJ,IAAI,MAAM;GACR,gBAAgB,KAAK,MAAM,KAAK,IAAI;GACpC,KAAK,cAAc;IAEjB,iBACE,CAAC,OAAO,SACP,OAAO,MAAM,SAAS,aAAa,OAAO,MAAM,kBAAkB;IACrE,gBAAgB;IAChB,iBAAiB;GACnB;EACF;EAEA,MAAM,iBAAiB,WAAW,SAAS;EAC3C,MAAM,iBAAiB,UAAU,QAAQ;EACzC,MAAM,iBAAiB,SAAS,OAAO;EAEvC,gBAAgB;GACd,MAAM,oBAAoB,WAAW,SAAS;GAC9C,MAAM,oBAAoB,UAAU,QAAQ;GAC5C,MAAM,oBAAoB,SAAS,OAAO;GAC1C,IAAI,QAAQ,eACV,KAAK,QAAQ;EAEjB,CAAC;CACH,CAAC;AACH"}

package/dist/_chunk/createFormValidation.jsx

@@ -0,0 +1,135 @@
+import { l as setInteractionModality } from "./createInteractionModality.jsx";
+import { createEffect, onCleanup } from "solid-js";
+//#region src/form/createFormValidation.ts
+/**
+* createFormValidation hook for solidaria
+*
+* Connects form validation state to native HTML form validation.
+* Handles the invalid event, form reset, and focus management.
+*
+* Port of react-aria's useFormValidation.
+*/
+function getValidity(input) {
+	const validity = input.validity;
+	return {
+		badInput: validity.badInput,
+		customError: validity.customError,
+		patternMismatch: validity.patternMismatch,
+		rangeOverflow: validity.rangeOverflow,
+		rangeUnderflow: validity.rangeUnderflow,
+		stepMismatch: validity.stepMismatch,
+		tooLong: validity.tooLong,
+		tooShort: validity.tooShort,
+		typeMismatch: validity.typeMismatch,
+		valueMissing: validity.valueMissing,
+		valid: validity.valid
+	};
+}
+function getNativeValidity(input) {
+	return {
+		isInvalid: !input.validity.valid,
+		validationDetails: getValidity(input),
+		validationErrors: input.validationMessage ? [input.validationMessage] : []
+	};
+}
+function getFirstInvalidInput(form) {
+	for (let i = 0; i < form.elements.length; i++) {
+		const element = form.elements[i];
+		if (!element.validity.valid) return element;
+	}
+	return null;
+}
+/**
+* Connects form validation state to a native HTML form input.
+*
+* This hook:
+* - Sets custom validity on the native input based on validation state
+* - Handles the 'invalid' event to commit validation and focus the first invalid input
+* - Handles form reset to clear validation state
+* - Handles input change to commit validation
+*
+* @example
+* ```tsx
+* function MyTextField(props) {
+*   let inputRef: HTMLInputElement | undefined;
+*
+*   const validationState = createFormValidationState({
+*     value: props.value,
+*     validate: props.validate,
+*     validationBehavior: 'native',
+*   });
+*
+*   createFormValidation(
+*     { validationBehavior: 'native' },
+*     validationState,
+*     () => inputRef
+*   );
+*
+*   return (
+*     <input
+*       ref={inputRef}
+*       value={props.value}
+*       aria-invalid={validationState.displayValidation().isInvalid || undefined}
+*     />
+*   );
+* }
+* ```
+*/
+function createFormValidation(props, state, ref) {
+	const validationBehavior = () => props.validationBehavior ?? "aria";
+	const focus = () => props.focus;
+	let isIgnoredReset = false;
+	createEffect(() => {
+		const input = ref();
+		if (validationBehavior() === "native" && input && "setCustomValidity" in input && !input.disabled) {
+			const realtimeValidation = state.realtimeValidation();
+			const errorMessage = realtimeValidation.isInvalid ? realtimeValidation.validationErrors.join(" ") || "Invalid value." : "";
+			input.setCustomValidity(errorMessage);
+			if (!input.hasAttribute("title")) input.title = "";
+			if (!realtimeValidation.isInvalid) state.updateValidation(getNativeValidity(input));
+		}
+	});
+	createEffect(() => {
+		const input = ref();
+		if (!input) return;
+		const form = input.form;
+		const onInvalid = (e) => {
+			if (!state.displayValidation().isInvalid) state.commitValidation();
+			if (!e.defaultPrevented && form && getFirstInvalidInput(form) === input) {
+				const focusFn = focus();
+				if (focusFn) focusFn();
+				else input.focus();
+				setInteractionModality("keyboard");
+			}
+			e.preventDefault();
+		};
+		const onChange = () => {
+			state.commitValidation();
+		};
+		const onReset = () => {
+			if (!isIgnoredReset) state.resetValidation();
+		};
+		let originalReset;
+		if (form) {
+			originalReset = form.reset.bind(form);
+			form.reset = () => {
+				isIgnoredReset = !window.event || window.event.type === "message" && window.event.target instanceof MessagePort;
+				originalReset?.();
+				isIgnoredReset = false;
+			};
+		}
+		input.addEventListener("invalid", onInvalid);
+		input.addEventListener("change", onChange);
+		form?.addEventListener("reset", onReset);
+		onCleanup(() => {
+			input.removeEventListener("invalid", onInvalid);
+			input.removeEventListener("change", onChange);
+			form?.removeEventListener("reset", onReset);
+			if (form && originalReset) form.reset = originalReset;
+		});
+	});
+}
+//#endregion
+export { createFormValidation as t };
+
+//# sourceMappingURL=createFormValidation.jsx.map

package/dist/_chunk/createFormValidation.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFormValidation.jsx","names":[],"sources":["../../src/form/createFormValidation.ts"],"sourcesContent":["/**\n * createFormValidation hook for solidaria\n *\n * Connects form validation state to native HTML form validation.\n * Handles the invalid event, form reset, and focus management.\n *\n * Port of react-aria's useFormValidation.\n */\n\nimport { type Accessor, createEffect, onCleanup } from \"solid-js\";\nimport { type FormValidationState, type ValidationResult } from \"@proyecto-viviana/solid-stately\";\nimport { setInteractionModality } from \"../interactions/createInteractionModality\";\n\nexport type ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;\n\nexport type ValidationBehavior = \"aria\" | \"native\";\n\nexport interface FormValidationProps {\n  /** Validation behavior: 'aria' for realtime, 'native' for on submit. */\n  validationBehavior?: ValidationBehavior;\n  /** Custom focus function to call on validation error. */\n  focus?: () => void;\n}\n\nfunction getValidity(input: ValidatableElement): ValidityState {\n  // Create a snapshot of the validity state (the native object is live)\n  const validity = input.validity;\n  return {\n    badInput: validity.badInput,\n    customError: validity.customError,\n    patternMismatch: validity.patternMismatch,\n    rangeOverflow: validity.rangeOverflow,\n    rangeUnderflow: validity.rangeUnderflow,\n    stepMismatch: validity.stepMismatch,\n    tooLong: validity.tooLong,\n    tooShort: validity.tooShort,\n    typeMismatch: validity.typeMismatch,\n    valueMissing: validity.valueMissing,\n    valid: validity.valid,\n  };\n}\n\nfunction getNativeValidity(input: ValidatableElement): ValidationResult {\n  return {\n    isInvalid: !input.validity.valid,\n    validationDetails: getValidity(input),\n    validationErrors: input.validationMessage ? [input.validationMessage] : [],\n  };\n}\n\nfunction getFirstInvalidInput(form: HTMLFormElement): ValidatableElement | null {\n  for (let i = 0; i < form.elements.length; i++) {\n    const element = form.elements[i] as ValidatableElement;\n    if (!element.validity.valid) {\n      return element;\n    }\n  }\n  return null;\n}\n\n/**\n * Connects form validation state to a native HTML form input.\n *\n * This hook:\n * - Sets custom validity on the native input based on validation state\n * - Handles the 'invalid' event to commit validation and focus the first invalid input\n * - Handles form reset to clear validation state\n * - Handles input change to commit validation\n *\n * @example\n * ```tsx\n * function MyTextField(props) {\n *   let inputRef: HTMLInputElement | undefined;\n *\n *   const validationState = createFormValidationState({\n *     value: props.value,\n *     validate: props.validate,\n *     validationBehavior: 'native',\n *   });\n *\n *   createFormValidation(\n *     { validationBehavior: 'native' },\n *     validationState,\n *     () => inputRef\n *   );\n *\n *   return (\n *     <input\n *       ref={inputRef}\n *       value={props.value}\n *       aria-invalid={validationState.displayValidation().isInvalid || undefined}\n *     />\n *   );\n * }\n * ```\n */\nexport function createFormValidation(\n  props: FormValidationProps,\n  state: FormValidationState,\n  ref: Accessor<ValidatableElement | undefined>,\n): void {\n  const validationBehavior = () => props.validationBehavior ?? \"aria\";\n  const focus = () => props.focus;\n\n  // Track whether we should ignore form reset (for React-like programmatic resets)\n  let isIgnoredReset = false;\n\n  // Set custom validity on the native input\n  createEffect(() => {\n    const input = ref();\n    // `'setCustomValidity' in input` guards refs that aren't true form elements\n    // (e.g. a custom element), matching upstream useFormValidation.\n    if (\n      validationBehavior() === \"native\" &&\n      input &&\n      \"setCustomValidity\" in input &&\n      !input.disabled\n    ) {\n      const realtimeValidation = state.realtimeValidation();\n      const errorMessage = realtimeValidation.isInvalid\n        ? realtimeValidation.validationErrors.join(\" \") || \"Invalid value.\"\n        : \"\";\n      input.setCustomValidity(errorMessage);\n\n      // Prevent default tooltip for validation message\n      if (!input.hasAttribute(\"title\")) {\n        input.title = \"\";\n      }\n\n      // Update validation with native validity if not already invalid\n      if (!realtimeValidation.isInvalid) {\n        state.updateValidation(getNativeValidity(input));\n      }\n    }\n  });\n\n  // Set up event listeners\n  createEffect(() => {\n    const input = ref();\n    if (!input) {\n      return;\n    }\n\n    const form = input.form;\n\n    // Handle invalid event\n    const onInvalid = (e: Event) => {\n      // Only commit validation if we are not already displaying one\n      if (!state.displayValidation().isInvalid) {\n        state.commitValidation();\n      }\n\n      // Auto focus the first invalid input in a form\n      if (!e.defaultPrevented && form && getFirstInvalidInput(form) === input) {\n        const focusFn = focus();\n        if (focusFn) {\n          focusFn();\n        } else {\n          input.focus();\n        }\n        // Always show focus ring\n        setInteractionModality(\"keyboard\");\n      }\n\n      // Prevent default browser error UI\n      e.preventDefault();\n    };\n\n    // Handle change event\n    const onChange = () => {\n      state.commitValidation();\n    };\n\n    // Handle form reset\n    const onReset = () => {\n      if (!isIgnoredReset) {\n        state.resetValidation();\n      }\n    };\n\n    // Patch form.reset to detect programmatic resets\n    let originalReset: (() => void) | undefined;\n    if (form) {\n      originalReset = form.reset.bind(form);\n      form.reset = () => {\n        // Ignore programmatic resets outside user events\n        isIgnoredReset =\n          !window.event ||\n          (window.event.type === \"message\" && window.event.target instanceof MessagePort);\n        originalReset?.();\n        isIgnoredReset = false;\n      };\n    }\n\n    input.addEventListener(\"invalid\", onInvalid);\n    input.addEventListener(\"change\", onChange);\n    form?.addEventListener(\"reset\", onReset);\n\n    onCleanup(() => {\n      input.removeEventListener(\"invalid\", onInvalid);\n      input.removeEventListener(\"change\", onChange);\n      form?.removeEventListener(\"reset\", onReset);\n      if (form && originalReset) {\n        form.reset = originalReset;\n      }\n    });\n  });\n}\n"],"mappings":";;;;;;;;;;;AAwBA,SAAS,YAAY,OAA0C;CAE7D,MAAM,WAAW,MAAM;CACvB,OAAO;EACL,UAAU,SAAS;EACnB,aAAa,SAAS;EACtB,iBAAiB,SAAS;EAC1B,eAAe,SAAS;EACxB,gBAAgB,SAAS;EACzB,cAAc,SAAS;EACvB,SAAS,SAAS;EAClB,UAAU,SAAS;EACnB,cAAc,SAAS;EACvB,cAAc,SAAS;EACvB,OAAO,SAAS;CAClB;AACF;AAEA,SAAS,kBAAkB,OAA6C;CACtE,OAAO;EACL,WAAW,CAAC,MAAM,SAAS;EAC3B,mBAAmB,YAAY,KAAK;EACpC,kBAAkB,MAAM,oBAAoB,CAAC,MAAM,iBAAiB,IAAI,CAAC;CAC3E;AACF;AAEA,SAAS,qBAAqB,MAAkD;CAC9E,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,SAAS,QAAQ,KAAK;EAC7C,MAAM,UAAU,KAAK,SAAS;EAC9B,IAAI,CAAC,QAAQ,SAAS,OACpB,OAAO;CAEX;CACA,OAAO;AACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,SAAgB,qBACd,OACA,OACA,KACM;CACN,MAAM,2BAA2B,MAAM,sBAAsB;CAC7D,MAAM,cAAc,MAAM;CAG1B,IAAI,iBAAiB;CAGrB,mBAAmB;EACjB,MAAM,QAAQ,IAAI;EAGlB,IACE,mBAAmB,MAAM,YACzB,SACA,uBAAuB,SACvB,CAAC,MAAM,UACP;GACA,MAAM,qBAAqB,MAAM,mBAAmB;GACpD,MAAM,eAAe,mBAAmB,YACpC,mBAAmB,iBAAiB,KAAK,GAAG,KAAK,mBACjD;GACJ,MAAM,kBAAkB,YAAY;GAGpC,IAAI,CAAC,MAAM,aAAa,OAAO,GAC7B,MAAM,QAAQ;GAIhB,IAAI,CAAC,mBAAmB,WACtB,MAAM,iBAAiB,kBAAkB,KAAK,CAAC;EAEnD;CACF,CAAC;CAGD,mBAAmB;EACjB,MAAM,QAAQ,IAAI;EAClB,IAAI,CAAC,OACH;EAGF,MAAM,OAAO,MAAM;EAGnB,MAAM,aAAa,MAAa;GAE9B,IAAI,CAAC,MAAM,kBAAkB,CAAC,CAAC,WAC7B,MAAM,iBAAiB;GAIzB,IAAI,CAAC,EAAE,oBAAoB,QAAQ,qBAAqB,IAAI,MAAM,OAAO;IACvE,MAAM,UAAU,MAAM;IACtB,IAAI,SACF,QAAQ;SAER,MAAM,MAAM;IAGd,uBAAuB,UAAU;GACnC;GAGA,EAAE,eAAe;EACnB;EAGA,MAAM,iBAAiB;GACrB,MAAM,iBAAiB;EACzB;EAGA,MAAM,gBAAgB;GACpB,IAAI,CAAC,gBACH,MAAM,gBAAgB;EAE1B;EAGA,IAAI;EACJ,IAAI,MAAM;GACR,gBAAgB,KAAK,MAAM,KAAK,IAAI;GACpC,KAAK,cAAc;IAEjB,iBACE,CAAC,OAAO,SACP,OAAO,MAAM,SAAS,aAAa,OAAO,MAAM,kBAAkB;IACrE,gBAAgB;IAChB,iBAAiB;GACnB;EACF;EAEA,MAAM,iBAAiB,WAAW,SAAS;EAC3C,MAAM,iBAAiB,UAAU,QAAQ;EACzC,MAAM,iBAAiB,SAAS,OAAO;EAEvC,gBAAgB;GACd,MAAM,oBAAoB,WAAW,SAAS;GAC9C,MAAM,oBAAoB,UAAU,QAAQ;GAC5C,MAAM,oBAAoB,SAAS,OAAO;GAC1C,IAAI,QAAQ,eACV,KAAK,QAAQ;EAEjB,CAAC;CACH,CAAC;AACH"}

package/dist/_chunk/createHover.js

@@ -0,0 +1,130 @@
+import { i as access, r as isTestEnv } from "./env.js";
+import { s as createGlobalListeners } from "./utils.js";
+import { y as nodeContains } from "./focus.js";
+import { createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+//#region src/interactions/createHover.ts
+/**
+* createHover hook for Solidaria
+*
+* Handles pointer hover interactions for an element. Normalizes behavior
+* across browsers and platforms, and ignores emulated mouse events on touch devices.
+*
+* Port of @react-aria/interactions useHover.
+*/
+let globalIgnoreEmulatedMouseEvents = false;
+let hoverCount = 0;
+function setGlobalIgnoreEmulatedMouseEvents() {
+	globalIgnoreEmulatedMouseEvents = true;
+	setTimeout(() => {
+		globalIgnoreEmulatedMouseEvents = false;
+	}, 50);
+}
+function handleGlobalPointerEvent(e) {
+	if (e.pointerType === "touch") setGlobalIgnoreEmulatedMouseEvents();
+}
+function setupGlobalTouchEvents() {
+	if (typeof document === "undefined") return () => {};
+	if (hoverCount === 0) {
+		if (typeof PointerEvent !== "undefined") document.addEventListener("pointerup", handleGlobalPointerEvent);
+		else if (isTestEnv()) document.addEventListener("touchend", setGlobalIgnoreEmulatedMouseEvents);
+	}
+	hoverCount++;
+	return () => {
+		hoverCount--;
+		if (hoverCount > 0) return;
+		if (typeof PointerEvent !== "undefined") document.removeEventListener("pointerup", handleGlobalPointerEvent);
+		else if (isTestEnv()) document.removeEventListener("touchend", setGlobalIgnoreEmulatedMouseEvents);
+	};
+}
+/**
+* Handles pointer hover interactions for an element.
+*/
+function createHover(props = {}) {
+	const getProps = () => access(props);
+	const [isHovered, setIsHovered] = createSignal(false);
+	const { addGlobalListener, removeAllGlobalListeners } = createGlobalListeners();
+	let state = {
+		isHovered: false,
+		ignoreEmulatedMouseEvents: false,
+		pointerType: "",
+		target: null
+	};
+	createEffect(() => {
+		onCleanup(setupGlobalTouchEvents());
+	});
+	createEffect(() => {
+		if (getProps().isDisabled && state.isHovered) triggerHoverEnd(state.target, state.pointerType);
+	});
+	function triggerHoverStart(target, pointerType, eventTarget) {
+		const p = getProps();
+		state.pointerType = pointerType;
+		const isOverTarget = eventTarget instanceof Element ? target.contains(eventTarget) : true;
+		if (p.isDisabled || state.isHovered || !isOverTarget) return;
+		state.isHovered = true;
+		state.target = target;
+		addGlobalListener("pointerover", (event) => {
+			if (state.isHovered && state.target && !nodeContains(state.target, event.target)) triggerHoverEnd(event.target, event.pointerType);
+		}, { capture: true });
+		p.onHoverStart?.({
+			type: "hoverstart",
+			target,
+			pointerType
+		});
+		p.onHoverChange?.(true);
+		setIsHovered(true);
+	}
+	function triggerHoverEnd(target, pointerType) {
+		const p = getProps();
+		state.pointerType = "";
+		state.target = null;
+		if (!state.isHovered || !target) return;
+		state.isHovered = false;
+		removeAllGlobalListeners();
+		p.onHoverEnd?.({
+			type: "hoverend",
+			target,
+			pointerType
+		});
+		p.onHoverChange?.(false);
+		setIsHovered(false);
+	}
+	return {
+		hoverProps: createMemo(() => {
+			if (typeof PointerEvent !== "undefined") return {
+				onPointerEnter: (e) => {
+					if (globalIgnoreEmulatedMouseEvents && e.pointerType === "mouse") return;
+					if (e.pointerType === "touch") return;
+					triggerHoverStart(e.currentTarget, e.pointerType, e.target);
+				},
+				onPointerLeave: (e) => {
+					if (!getProps().isDisabled && e.currentTarget.contains(e.target)) triggerHoverEnd(e.currentTarget, e.pointerType);
+				},
+				onPointerOver: (e) => {
+					if (globalIgnoreEmulatedMouseEvents && e.pointerType === "mouse") return;
+					if (e.pointerType === "touch") return;
+					triggerHoverStart(e.currentTarget, e.pointerType, e.target);
+				},
+				onPointerOut: (e) => {
+					if (!getProps().isDisabled && e.currentTarget.contains(e.target)) triggerHoverEnd(e.currentTarget, e.pointerType);
+				}
+			};
+			return {
+				onTouchStart: () => {
+					state.ignoreEmulatedMouseEvents = true;
+				},
+				onMouseEnter: (e) => {
+					if (!state.ignoreEmulatedMouseEvents && !globalIgnoreEmulatedMouseEvents) triggerHoverStart(e.currentTarget, "mouse", e.target);
+					state.ignoreEmulatedMouseEvents = false;
+				},
+				onMouseLeave: (e) => {
+					if (!getProps().isDisabled && e.currentTarget.contains(e.target)) triggerHoverEnd(e.currentTarget, "mouse");
+				}
+			};
+		})(),
+		isHovered
+	};
+}
+//#endregion
+export { createHover as t };
+
+//# sourceMappingURL=createHover.js.map

package/dist/_chunk/createHover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createHover.js","names":[],"sources":["../../src/interactions/createHover.ts"],"sourcesContent":["/**\n * createHover hook for Solidaria\n *\n * Handles pointer hover interactions for an element. Normalizes behavior\n * across browsers and platforms, and ignores emulated mouse events on touch devices.\n *\n * Port of @react-aria/interactions useHover.\n */\n\nimport {\n  type JSX,\n  type Accessor,\n  createSignal,\n  createEffect,\n  onCleanup,\n  createMemo,\n} from \"solid-js\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\nimport { isTestEnv } from \"../utils/env\";\nimport { createGlobalListeners, nodeContains } from \"../utils\";\n\nexport interface HoverEvent {\n  /** The type of hover event being fired. */\n  type: \"hoverstart\" | \"hoverend\";\n  /** The pointer type that triggered the hover event. */\n  pointerType: \"mouse\" | \"pen\";\n  /** The target element of the hover event. */\n  target: Element;\n}\n\nexport interface HoverEvents {\n  /** Handler called when the hover starts. */\n  onHoverStart?: (e: HoverEvent) => void;\n  /** Handler called when the hover ends. */\n  onHoverEnd?: (e: HoverEvent) => void;\n  /** Handler called when the hover state changes. */\n  onHoverChange?: (isHovering: boolean) => void;\n}\n\nexport interface CreateHoverProps extends HoverEvents {\n  /** Whether the hover events should be disabled. */\n  isDisabled?: boolean;\n}\n\n/** Event handler props returned by createHover - safe to spread on any element */\nexport type HoverProps = Pick<\n  JSX.HTMLAttributes<HTMLElement>,\n  | \"onPointerEnter\"\n  | \"onPointerLeave\"\n  | \"onPointerOver\"\n  | \"onPointerOut\"\n  | \"onMouseEnter\"\n  | \"onMouseLeave\"\n>;\n\nexport interface HoverResult {\n  /** Props to spread on the target element. */\n  hoverProps: HoverProps;\n  /** Whether the element is currently hovered. */\n  isHovered: Accessor<boolean>;\n}\n\n// iOS fires onPointerEnter twice: once with pointerType=\"touch\" and again with pointerType=\"mouse\".\n// We want to ignore these emulated events so they do not trigger hover behavior.\nlet globalIgnoreEmulatedMouseEvents = false;\nlet hoverCount = 0;\n\nfunction setGlobalIgnoreEmulatedMouseEvents() {\n  globalIgnoreEmulatedMouseEvents = true;\n  setTimeout(() => {\n    globalIgnoreEmulatedMouseEvents = false;\n  }, 50);\n}\n\nfunction handleGlobalPointerEvent(e: PointerEvent) {\n  if (e.pointerType === \"touch\") {\n    setGlobalIgnoreEmulatedMouseEvents();\n  }\n}\n\nfunction setupGlobalTouchEvents() {\n  if (typeof document === \"undefined\") {\n    return () => {};\n  }\n\n  if (hoverCount === 0) {\n    if (typeof PointerEvent !== \"undefined\") {\n      document.addEventListener(\"pointerup\", handleGlobalPointerEvent);\n    } else if (isTestEnv()) {\n      document.addEventListener(\"touchend\", setGlobalIgnoreEmulatedMouseEvents);\n    }\n  }\n\n  hoverCount++;\n  return () => {\n    hoverCount--;\n    if (hoverCount > 0) {\n      return;\n    }\n\n    if (typeof PointerEvent !== \"undefined\") {\n      document.removeEventListener(\"pointerup\", handleGlobalPointerEvent);\n    } else if (isTestEnv()) {\n      document.removeEventListener(\"touchend\", setGlobalIgnoreEmulatedMouseEvents);\n    }\n  };\n}\n\n/**\n * Handles pointer hover interactions for an element.\n */\nexport function createHover(props: MaybeAccessor<CreateHoverProps> = {}): HoverResult {\n  const getProps = () => access(props);\n  const [isHovered, setIsHovered] = createSignal(false);\n  const { addGlobalListener, removeAllGlobalListeners } = createGlobalListeners();\n\n  // Track internal hover state\n  let state = {\n    isHovered: false,\n    ignoreEmulatedMouseEvents: false,\n    pointerType: \"\" as \"mouse\" | \"pen\" | \"\",\n    target: null as Element | null,\n  };\n\n  // Setup global touch events\n  createEffect(() => {\n    const cleanup = setupGlobalTouchEvents();\n    onCleanup(cleanup);\n  });\n\n  // Reset hover when disabled\n  createEffect(() => {\n    const p = getProps();\n    if (p.isDisabled && state.isHovered) {\n      triggerHoverEnd(state.target as Element, state.pointerType as \"mouse\" | \"pen\");\n    }\n  });\n\n  function triggerHoverStart(\n    target: Element,\n    pointerType: \"mouse\" | \"pen\",\n    eventTarget: Element | null,\n  ) {\n    const p = getProps();\n    state.pointerType = pointerType;\n\n    const isOverTarget = eventTarget instanceof Element ? target.contains(eventTarget) : true;\n    if (p.isDisabled || state.isHovered || !isOverTarget) {\n      return;\n    }\n\n    state.isHovered = true;\n    state.target = target;\n\n    addGlobalListener(\n      \"pointerover\",\n      (event: PointerEvent) => {\n        if (\n          state.isHovered &&\n          state.target &&\n          !nodeContains(state.target, event.target as Element)\n        ) {\n          triggerHoverEnd(event.target as Element, event.pointerType as \"mouse\" | \"pen\");\n        }\n      },\n      { capture: true },\n    );\n\n    p.onHoverStart?.({\n      type: \"hoverstart\",\n      target,\n      pointerType,\n    });\n\n    p.onHoverChange?.(true);\n    setIsHovered(true);\n  }\n\n  function triggerHoverEnd(target: Element | null, pointerType: \"mouse\" | \"pen\") {\n    const p = getProps();\n    state.pointerType = \"\";\n    state.target = null;\n\n    if (!state.isHovered || !target) {\n      return;\n    }\n\n    state.isHovered = false;\n    removeAllGlobalListeners();\n\n    p.onHoverEnd?.({\n      type: \"hoverend\",\n      target,\n      pointerType,\n    });\n\n    p.onHoverChange?.(false);\n    setIsHovered(false);\n  }\n\n  const hoverProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => {\n    if (typeof PointerEvent !== \"undefined\") {\n      return {\n        onPointerEnter: (e: PointerEvent) => {\n          if (globalIgnoreEmulatedMouseEvents && e.pointerType === \"mouse\") {\n            return;\n          }\n          if (e.pointerType === \"touch\") {\n            return;\n          }\n          triggerHoverStart(\n            e.currentTarget as Element,\n            e.pointerType as \"mouse\" | \"pen\",\n            e.target as Element,\n          );\n        },\n        onPointerLeave: (e: PointerEvent) => {\n          const p = getProps();\n          if (!p.isDisabled && (e.currentTarget as Element).contains(e.target as Element)) {\n            triggerHoverEnd(e.currentTarget as Element, e.pointerType as \"mouse\" | \"pen\");\n          }\n        },\n        onPointerOver: (e: PointerEvent) => {\n          if (globalIgnoreEmulatedMouseEvents && e.pointerType === \"mouse\") {\n            return;\n          }\n          if (e.pointerType === \"touch\") {\n            return;\n          }\n          triggerHoverStart(\n            e.currentTarget as Element,\n            e.pointerType as \"mouse\" | \"pen\",\n            e.target as Element,\n          );\n        },\n        onPointerOut: (e: PointerEvent) => {\n          const p = getProps();\n          if (!p.isDisabled && (e.currentTarget as Element).contains(e.target as Element)) {\n            triggerHoverEnd(e.currentTarget as Element, e.pointerType as \"mouse\" | \"pen\");\n          }\n        },\n      };\n    }\n\n    // Fallback for environments without PointerEvent (mainly tests)\n    return {\n      onTouchStart: () => {\n        state.ignoreEmulatedMouseEvents = true;\n      },\n      onMouseEnter: (e: MouseEvent) => {\n        if (!state.ignoreEmulatedMouseEvents && !globalIgnoreEmulatedMouseEvents) {\n          triggerHoverStart(e.currentTarget as Element, \"mouse\", e.target as Element);\n        }\n        state.ignoreEmulatedMouseEvents = false;\n      },\n      onMouseLeave: (e: MouseEvent) => {\n        const p = getProps();\n        if (!p.isDisabled && (e.currentTarget as Element).contains(e.target as Element)) {\n          triggerHoverEnd(e.currentTarget as Element, \"mouse\");\n        }\n      },\n    };\n  });\n\n  return {\n    hoverProps: hoverProps() as HoverProps,\n    isHovered,\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/createHover.jsx

@@ -0,0 +1,130 @@
+import { i as access, r as isTestEnv } from "./env.jsx";
+import { s as createGlobalListeners } from "./utils.jsx";
+import { y as nodeContains } from "./focus.jsx";
+import { createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+//#region src/interactions/createHover.ts
+/**
+* createHover hook for Solidaria
+*
+* Handles pointer hover interactions for an element. Normalizes behavior
+* across browsers and platforms, and ignores emulated mouse events on touch devices.
+*
+* Port of @react-aria/interactions useHover.
+*/
+let globalIgnoreEmulatedMouseEvents = false;
+let hoverCount = 0;
+function setGlobalIgnoreEmulatedMouseEvents() {
+	globalIgnoreEmulatedMouseEvents = true;
+	setTimeout(() => {
+		globalIgnoreEmulatedMouseEvents = false;
+	}, 50);
+}
+function handleGlobalPointerEvent(e) {
+	if (e.pointerType === "touch") setGlobalIgnoreEmulatedMouseEvents();
+}
+function setupGlobalTouchEvents() {
+	if (typeof document === "undefined") return () => {};
+	if (hoverCount === 0) {
+		if (typeof PointerEvent !== "undefined") document.addEventListener("pointerup", handleGlobalPointerEvent);
+		else if (isTestEnv()) document.addEventListener("touchend", setGlobalIgnoreEmulatedMouseEvents);
+	}
+	hoverCount++;
+	return () => {
+		hoverCount--;
+		if (hoverCount > 0) return;
+		if (typeof PointerEvent !== "undefined") document.removeEventListener("pointerup", handleGlobalPointerEvent);
+		else if (isTestEnv()) document.removeEventListener("touchend", setGlobalIgnoreEmulatedMouseEvents);
+	};
+}
+/**
+* Handles pointer hover interactions for an element.
+*/
+function createHover(props = {}) {
+	const getProps = () => access(props);
+	const [isHovered, setIsHovered] = createSignal(false);
+	const { addGlobalListener, removeAllGlobalListeners } = createGlobalListeners();
+	let state = {
+		isHovered: false,
+		ignoreEmulatedMouseEvents: false,
+		pointerType: "",
+		target: null
+	};
+	createEffect(() => {
+		onCleanup(setupGlobalTouchEvents());
+	});
+	createEffect(() => {
+		if (getProps().isDisabled && state.isHovered) triggerHoverEnd(state.target, state.pointerType);
+	});
+	function triggerHoverStart(target, pointerType, eventTarget) {
+		const p = getProps();
+		state.pointerType = pointerType;
+		const isOverTarget = eventTarget instanceof Element ? target.contains(eventTarget) : true;
+		if (p.isDisabled || state.isHovered || !isOverTarget) return;
+		state.isHovered = true;
+		state.target = target;
+		addGlobalListener("pointerover", (event) => {
+			if (state.isHovered && state.target && !nodeContains(state.target, event.target)) triggerHoverEnd(event.target, event.pointerType);
+		}, { capture: true });
+		p.onHoverStart?.({
+			type: "hoverstart",
+			target,
+			pointerType
+		});
+		p.onHoverChange?.(true);
+		setIsHovered(true);
+	}
+	function triggerHoverEnd(target, pointerType) {
+		const p = getProps();
+		state.pointerType = "";
+		state.target = null;
+		if (!state.isHovered || !target) return;
+		state.isHovered = false;
+		removeAllGlobalListeners();
+		p.onHoverEnd?.({
+			type: "hoverend",
+			target,
+			pointerType
+		});
+		p.onHoverChange?.(false);
+		setIsHovered(false);
+	}
+	return {
+		hoverProps: createMemo(() => {
+			if (typeof PointerEvent !== "undefined") return {
+				onPointerEnter: (e) => {
+					if (globalIgnoreEmulatedMouseEvents && e.pointerType === "mouse") return;
+					if (e.pointerType === "touch") return;
+					triggerHoverStart(e.currentTarget, e.pointerType, e.target);
+				},
+				onPointerLeave: (e) => {
+					if (!getProps().isDisabled && e.currentTarget.contains(e.target)) triggerHoverEnd(e.currentTarget, e.pointerType);
+				},
+				onPointerOver: (e) => {
+					if (globalIgnoreEmulatedMouseEvents && e.pointerType === "mouse") return;
+					if (e.pointerType === "touch") return;
+					triggerHoverStart(e.currentTarget, e.pointerType, e.target);
+				},
+				onPointerOut: (e) => {
+					if (!getProps().isDisabled && e.currentTarget.contains(e.target)) triggerHoverEnd(e.currentTarget, e.pointerType);
+				}
+			};
+			return {
+				onTouchStart: () => {
+					state.ignoreEmulatedMouseEvents = true;
+				},
+				onMouseEnter: (e) => {
+					if (!state.ignoreEmulatedMouseEvents && !globalIgnoreEmulatedMouseEvents) triggerHoverStart(e.currentTarget, "mouse", e.target);
+					state.ignoreEmulatedMouseEvents = false;
+				},
+				onMouseLeave: (e) => {
+					if (!getProps().isDisabled && e.currentTarget.contains(e.target)) triggerHoverEnd(e.currentTarget, "mouse");
+				}
+			};
+		})(),
+		isHovered
+	};
+}
+//#endregion
+export { createHover as t };
+
+//# sourceMappingURL=createHover.jsx.map

package/dist/_chunk/createHover.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"createHover.jsx","names":[],"sources":["../../src/interactions/createHover.ts"],"sourcesContent":["/**\n * createHover hook for Solidaria\n *\n * Handles pointer hover interactions for an element. Normalizes behavior\n * across browsers and platforms, and ignores emulated mouse events on touch devices.\n *\n * Port of @react-aria/interactions useHover.\n */\n\nimport {\n  type JSX,\n  type Accessor,\n  createSignal,\n  createEffect,\n  onCleanup,\n  createMemo,\n} from \"solid-js\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\nimport { isTestEnv } from \"../utils/env\";\nimport { createGlobalListeners, nodeContains } from \"../utils\";\n\nexport interface HoverEvent {\n  /** The type of hover event being fired. */\n  type: \"hoverstart\" | \"hoverend\";\n  /** The pointer type that triggered the hover event. */\n  pointerType: \"mouse\" | \"pen\";\n  /** The target element of the hover event. */\n  target: Element;\n}\n\nexport interface HoverEvents {\n  /** Handler called when the hover starts. */\n  onHoverStart?: (e: HoverEvent) => void;\n  /** Handler called when the hover ends. */\n  onHoverEnd?: (e: HoverEvent) => void;\n  /** Handler called when the hover state changes. */\n  onHoverChange?: (isHovering: boolean) => void;\n}\n\nexport interface CreateHoverProps extends HoverEvents {\n  /** Whether the hover events should be disabled. */\n  isDisabled?: boolean;\n}\n\n/** Event handler props returned by createHover - safe to spread on any element */\nexport type HoverProps = Pick<\n  JSX.HTMLAttributes<HTMLElement>,\n  | \"onPointerEnter\"\n  | \"onPointerLeave\"\n  | \"onPointerOver\"\n  | \"onPointerOut\"\n  | \"onMouseEnter\"\n  | \"onMouseLeave\"\n>;\n\nexport interface HoverResult {\n  /** Props to spread on the target element. */\n  hoverProps: HoverProps;\n  /** Whether the element is currently hovered. */\n  isHovered: Accessor<boolean>;\n}\n\n// iOS fires onPointerEnter twice: once with pointerType=\"touch\" and again with pointerType=\"mouse\".\n// We want to ignore these emulated events so they do not trigger hover behavior.\nlet globalIgnoreEmulatedMouseEvents = false;\nlet hoverCount = 0;\n\nfunction setGlobalIgnoreEmulatedMouseEvents() {\n  globalIgnoreEmulatedMouseEvents = true;\n  setTimeout(() => {\n    globalIgnoreEmulatedMouseEvents = false;\n  }, 50);\n}\n\nfunction handleGlobalPointerEvent(e: PointerEvent) {\n  if (e.pointerType === \"touch\") {\n    setGlobalIgnoreEmulatedMouseEvents();\n  }\n}\n\nfunction setupGlobalTouchEvents() {\n  if (typeof document === \"undefined\") {\n    return () => {};\n  }\n\n  if (hoverCount === 0) {\n    if (typeof PointerEvent !== \"undefined\") {\n      document.addEventListener(\"pointerup\", handleGlobalPointerEvent);\n    } else if (isTestEnv()) {\n      document.addEventListener(\"touchend\", setGlobalIgnoreEmulatedMouseEvents);\n    }\n  }\n\n  hoverCount++;\n  return () => {\n    hoverCount--;\n    if (hoverCount > 0) {\n      return;\n    }\n\n    if (typeof PointerEvent !== \"undefined\") {\n      document.removeEventListener(\"pointerup\", handleGlobalPointerEvent);\n    } else if (isTestEnv()) {\n      document.removeEventListener(\"touchend\", setGlobalIgnoreEmulatedMouseEvents);\n    }\n  };\n}\n\n/**\n * Handles pointer hover interactions for an element.\n */\nexport function createHover(props: MaybeAccessor<CreateHoverProps> = {}): HoverResult {\n  const getProps = () => access(props);\n  const [isHovered, setIsHovered] = createSignal(false);\n  const { addGlobalListener, removeAllGlobalListeners } = createGlobalListeners();\n\n  // Track internal hover state\n  let state = {\n    isHovered: false,\n    ignoreEmulatedMouseEvents: false,\n    pointerType: \"\" as \"mouse\" | \"pen\" | \"\",\n    target: null as Element | null,\n  };\n\n  // Setup global touch events\n  createEffect(() => {\n    const cleanup = setupGlobalTouchEvents();\n    onCleanup(cleanup);\n  });\n\n  // Reset hover when disabled\n  createEffect(() => {\n    const p = getProps();\n    if (p.isDisabled && state.isHovered) {\n      triggerHoverEnd(state.target as Element, state.pointerType as \"mouse\" | \"pen\");\n    }\n  });\n\n  function triggerHoverStart(\n    target: Element,\n    pointerType: \"mouse\" | \"pen\",\n    eventTarget: Element | null,\n  ) {\n    const p = getProps();\n    state.pointerType = pointerType;\n\n    const isOverTarget = eventTarget instanceof Element ? target.contains(eventTarget) : true;\n    if (p.isDisabled || state.isHovered || !isOverTarget) {\n      return;\n    }\n\n    state.isHovered = true;\n    state.target = target;\n\n    addGlobalListener(\n      \"pointerover\",\n      (event: PointerEvent) => {\n        if (\n          state.isHovered &&\n          state.target &&\n          !nodeContains(state.target, event.target as Element)\n        ) {\n          triggerHoverEnd(event.target as Element, event.pointerType as \"mouse\" | \"pen\");\n        }\n      },\n      { capture: true },\n    );\n\n    p.onHoverStart?.({\n      type: \"hoverstart\",\n      target,\n      pointerType,\n    });\n\n    p.onHoverChange?.(true);\n    setIsHovered(true);\n  }\n\n  function triggerHoverEnd(target: Element | null, pointerType: \"mouse\" | \"pen\") {\n    const p = getProps();\n    state.pointerType = \"\";\n    state.target = null;\n\n    if (!state.isHovered || !target) {\n      return;\n    }\n\n    state.isHovered = false;\n    removeAllGlobalListeners();\n\n    p.onHoverEnd?.({\n      type: \"hoverend\",\n      target,\n      pointerType,\n    });\n\n    p.onHoverChange?.(false);\n    setIsHovered(false);\n  }\n\n  const hoverProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => {\n    if (typeof PointerEvent !== \"undefined\") {\n      return {\n        onPointerEnter: (e: PointerEvent) => {\n          if (globalIgnoreEmulatedMouseEvents && e.pointerType === \"mouse\") {\n            return;\n          }\n          if (e.pointerType === \"touch\") {\n            return;\n          }\n          triggerHoverStart(\n            e.currentTarget as Element,\n            e.pointerType as \"mouse\" | \"pen\",\n            e.target as Element,\n          );\n        },\n        onPointerLeave: (e: PointerEvent) => {\n          const p = getProps();\n          if (!p.isDisabled && (e.currentTarget as Element).contains(e.target as Element)) {\n            triggerHoverEnd(e.currentTarget as Element, e.pointerType as \"mouse\" | \"pen\");\n          }\n        },\n        onPointerOver: (e: PointerEvent) => {\n          if (globalIgnoreEmulatedMouseEvents && e.pointerType === \"mouse\") {\n            return;\n          }\n          if (e.pointerType === \"touch\") {\n            return;\n          }\n          triggerHoverStart(\n            e.currentTarget as Element,\n            e.pointerType as \"mouse\" | \"pen\",\n            e.target as Element,\n          );\n        },\n        onPointerOut: (e: PointerEvent) => {\n          const p = getProps();\n          if (!p.isDisabled && (e.currentTarget as Element).contains(e.target as Element)) {\n            triggerHoverEnd(e.currentTarget as Element, e.pointerType as \"mouse\" | \"pen\");\n          }\n        },\n      };\n    }\n\n    // Fallback for environments without PointerEvent (mainly tests)\n    return {\n      onTouchStart: () => {\n        state.ignoreEmulatedMouseEvents = true;\n      },\n      onMouseEnter: (e: MouseEvent) => {\n        if (!state.ignoreEmulatedMouseEvents && !globalIgnoreEmulatedMouseEvents) {\n          triggerHoverStart(e.currentTarget as Element, \"mouse\", e.target as Element);\n        }\n        state.ignoreEmulatedMouseEvents = false;\n      },\n      onMouseLeave: (e: MouseEvent) => {\n        const p = getProps();\n        if (!p.isDisabled && (e.currentTarget as Element).contains(e.target as Element)) {\n          triggerHoverEnd(e.currentTarget as Element, \"mouse\");\n        }\n      },\n    };\n  });\n\n  return {\n    hoverProps: hoverProps() as HoverProps,\n    isHovered,\n  };\n}\n"],"mappings":"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"}