solid-tiny-utils 0.7.0 → 0.8.0

package/README.md

@@ -1,9 +1,9 @@
-# solid-tiny-utils
-
-Tiny utilities for SolidJS applications.
-
-## Installation
-
-```bash
-pnpm add solid-tiny-utils
-```
+# solid-tiny-utils
+
+Tiny utilities for SolidJS applications.
+
+## Installation
+
+```bash
+pnpm add solid-tiny-utils
+```

package/dist/color/{hex-rgb.d.ts → hex-rgb.d.mts}

@@ -1,4 +1,6 @@
-import { RGB } from './oklch-rgb.js';
+import { RGB } from "./oklch-rgb.mjs";
+
+//#region src/color/hex-rgb.d.ts
 
 /**
  * Converts a hex color string to RGB color values.
@@ -32,5 +34,5 @@ declare function hexToRgb(hex: string): RGB | null;
  * ```
  */
 declare function rgbToHex(rgb: RGB | [number, number, number]): string;
-
-export { hexToRgb, rgbToHex };
+//#endregion
+export { hexToRgb, rgbToHex };

package/dist/color/hex-rgb.mjs

@@ -0,0 +1,62 @@
+import { isArray } from "../utils/is.mjs";
+import { clamp, toHex } from "../utils/number.mjs";
+
+//#region src/color/hex-rgb.ts
+const HEX_PREFIX_REGEX = /^#/;
+const HEX_VALIDATION_REGEX = /^[0-9a-fA-F]{6}$/;
+/**
+* Converts a hex color string to RGB color values.
+*
+* Supports both 3-digit (#rgb) and 6-digit (#rrggbb) hex formats.
+* The hash symbol (#) is optional.
+*
+* @param hex - Hex color string (e.g., "#ffcc00", "ffcc00", "#fc0", "fc0")
+* @returns RGB object with r, g, b values (0-255), or null if invalid
+*
+* @example
+* ```typescript
+* hexToRgb("#ffcc00") // => { r: 255, g: 204, b: 0 }
+* hexToRgb("fc0")     // => { r: 255, g: 204, b: 0 }
+* hexToRgb("#invalid") // => null
+* ```
+*/
+function hexToRgb(hex) {
+	if (!hex || typeof hex !== "string") return null;
+	let value = hex.trim().replace(HEX_PREFIX_REGEX, "");
+	if (value.length === 3) value = value.split("").map((c) => c + c).join("");
+	if (!HEX_VALIDATION_REGEX.test(value)) return null;
+	return {
+		r: Number.parseInt(value.slice(0, 2), 16),
+		g: Number.parseInt(value.slice(2, 4), 16),
+		b: Number.parseInt(value.slice(4, 6), 16)
+	};
+}
+/**
+* Converts RGB color values to a hex color string.
+*
+* RGB values are automatically clamped to the 0-255 range.
+*
+* @param rgb - RGB object with r, g, b values
+* @returns Hex color string with # prefix (e.g., "#ffcc00")
+*
+* @example
+* ```typescript
+* rgbToHex({ r: 255, g: 204, b: 0 }) // => "#ffcc00"
+* rgbToHex({ r: 300, g: -10, b: 128 }) // => "#ff0080" (clamped values)
+* ```
+*/
+function rgbToHex(rgb) {
+	const c = (v) => Math.round(clamp(v, 0, 255));
+	const rgb_ = isArray(rgb) ? rgb : [
+		rgb.r,
+		rgb.g,
+		rgb.b
+	];
+	const r = c(rgb_[0]);
+	const g = c(rgb_[1]);
+	const b = c(rgb_[2]);
+	return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+//#endregion
+export { hexToRgb, rgbToHex };

package/dist/color/{oklch-rgb.d.ts → oklch-rgb.d.mts}

@@ -1,12 +1,13 @@
+//#region src/color/oklch-rgb.d.ts
 interface RGB {
-    r: number;
-    g: number;
-    b: number;
+  r: number;
+  g: number;
+  b: number;
 }
 interface OKLCH {
-    l: number;
-    c: number;
-    h: number;
+  l: number;
+  c: number;
+  h: number;
 }
 /**
  * Converts OKLCH color to RGB color space.
@@ -45,5 +46,5 @@ declare function oklchToRgb(oklch: OKLCH): RGB;
  * ```
  */
 declare function rgbToOklch(rgb: RGB): OKLCH;
-
-export { type OKLCH, type RGB, oklchToRgb, rgbToOklch };
+//#endregion
+export { OKLCH, RGB, oklchToRgb, rgbToOklch };

package/dist/color/oklch-rgb.mjs

@@ -0,0 +1,101 @@
+import { clamp, max } from "../utils/number.mjs";
+
+//#region src/color/oklch-rgb.ts
+const PI_180 = Math.PI / 180;
+const INV_PI_180 = 180 / Math.PI;
+const linearToSRGB = (x) => x <= .0031308 ? 12.92 * x : 1.055 * x ** (1 / 2.4) - .055;
+const sRGBToLinear = (x) => x <= .04045 ? x / 12.92 : ((x + .055) / 1.055) ** 2.4;
+/**
+* Normalizes hue to 0-360 degree range
+*/
+function normalizeHue(hue) {
+	return (hue % 360 + 360) % 360;
+}
+/**
+* Converts OKLCH color to RGB color space.
+*
+* OKLCH is a perceptually uniform color space based on OKLab.
+* Input values are automatically clamped to valid ranges.
+*
+* @param oklch - The OKLCH color to convert
+* @param oklch.l - Lightness (0-1, will be clamped)
+* @param oklch.c - Chroma (≥0, will be clamped)
+* @param oklch.h - Hue in degrees (will be normalized to 0-360)
+* @returns RGB color with values 0-255
+*
+* @example
+* ```typescript
+* const rgb = oklchToRgb({ l: 0.7, c: 0.1, h: 200 });
+* // => { r: 64, g: 177, b: 183 }
+* ```
+*/
+function oklchToRgb(oklch) {
+	const { l, c, h } = oklch;
+	const clampedL = clamp(l, 0, 1);
+	const clampedC = max(0, c);
+	const normalizedH = normalizeHue(h);
+	const a_ = clampedC * Math.cos(normalizedH * PI_180);
+	const b_ = clampedC * Math.sin(normalizedH * PI_180);
+	const L = clampedL;
+	const A = a_;
+	const B = b_;
+	const l_ = L + .3963377774 * A + .2158037573 * B;
+	const m_ = L - .1055613458 * A - .0638541728 * B;
+	const s_ = L - .0894841775 * A - 1.291485548 * B;
+	const l3 = l_ ** 3;
+	const m3 = m_ ** 3;
+	const s3 = s_ ** 3;
+	let r = 4.0767416621 * l3 - 3.3077115913 * m3 + .2309699292 * s3;
+	let g = -1.2684380046 * l3 + 2.6097574011 * m3 - .3413193965 * s3;
+	let b = -.0041960863 * l3 - .7034186147 * m3 + 1.707614701 * s3;
+	r = linearToSRGB(r);
+	g = linearToSRGB(g);
+	b = linearToSRGB(b);
+	return {
+		r: Math.round(clamp(r) * 255),
+		g: Math.round(clamp(g) * 255),
+		b: Math.round(clamp(b) * 255)
+	};
+}
+/**
+* Converts RGB color to OKLCH color space.
+*
+* RGB values are automatically clamped to 0-255 range.
+*
+* @param rgb - The RGB color to convert
+* @param rgb.r - Red component (0-255, will be clamped)
+* @param rgb.g - Green component (0-255, will be clamped)
+* @param rgb.b - Blue component (0-255, will be clamped)
+* @returns OKLCH color with l∈[0,1], c≥0, h∈[0,360)
+*
+* @example
+* ```typescript
+* const oklch = rgbToOklch({ r: 64, g: 177, b: 183 });
+* // => { l: 0.7, c: 0.1, h: 200 }
+* ```
+*/
+function rgbToOklch(rgb) {
+	const r = clamp(rgb.r, 0, 255);
+	const g = clamp(rgb.g, 0, 255);
+	const b = clamp(rgb.b, 0, 255);
+	const rLinear = sRGBToLinear(r / 255);
+	const gLinear = sRGBToLinear(g / 255);
+	const bLinear = sRGBToLinear(b / 255);
+	const l_ = Math.cbrt(.4122214708 * rLinear + .5363325363 * gLinear + .0514459929 * bLinear);
+	const m_ = Math.cbrt(.2119034982 * rLinear + .6806995451 * gLinear + .1073969566 * bLinear);
+	const s_ = Math.cbrt(.0883024619 * rLinear + .2817188376 * gLinear + .6299787005 * bLinear);
+	const L = .2104542553 * l_ + .793617785 * m_ - .0040720468 * s_;
+	const A = 1.9779984951 * l_ - 2.428592205 * m_ + .4505937099 * s_;
+	const B = .0259040371 * l_ + .7827717662 * m_ - .808675766 * s_;
+	const c = Math.sqrt(A * A + B * B);
+	let h = Math.atan2(B, A) * INV_PI_180;
+	if (h < 0) h += 360;
+	return {
+		l: L,
+		c,
+		h
+	};
+}
+
+//#endregion
+export { oklchToRgb, rgbToOklch };

package/dist/color/{validation.d.ts → validation.d.mts}

@@ -1,4 +1,6 @@
-import { RGB, OKLCH } from './oklch-rgb.js';
+import { OKLCH, RGB } from "./oklch-rgb.mjs";
+
+//#region src/color/validation.d.ts
 
 /**
  * Checks if RGB values are in valid range (0-255)
@@ -22,5 +24,5 @@ declare function isValidOKLCH(oklch: OKLCH): boolean;
  * ```
  */
 declare function isValidHex(hex: string): boolean;
-
-export { isValidHex, isValidOKLCH, isValidRGB };
+//#endregion
+export { isValidHex, isValidOKLCH, isValidRGB };

package/dist/color/validation.mjs

@@ -0,0 +1,35 @@
+import { inRange } from "../utils/number.mjs";
+import { hexToRgb } from "./hex-rgb.mjs";
+
+//#region src/color/validation.ts
+/**
+* Checks if RGB values are in valid range (0-255)
+*/
+function isValidRGB(rgb) {
+	return Object.values(rgb).every((x) => inRange(x, 0, 255));
+}
+/**
+* Checks if OKLCH values are in valid ranges
+*/
+function isValidOKLCH(oklch) {
+	return inRange(oklch.l) && oklch.c >= 0 && inRange(oklch.h, 0, 360);
+}
+/**
+* Checks if a string is a valid hex color format.
+*
+* @param hex - String to validate
+* @returns `true` if the string is a valid hex color, `false` otherwise
+*
+* @example
+* ```typescript
+* isValidHex("#ffcc00") // => true
+* isValidHex("fc0")     // => true
+* isValidHex("#invalid") // => false
+* ```
+*/
+function isValidHex(hex) {
+	return hexToRgb(hex) !== null;
+}
+
+//#endregion
+export { isValidHex, isValidOKLCH, isValidRGB };

package/dist/dom/{css.d.ts → css.d.mts}

@@ -1,4 +1,6 @@
-import { JSX } from 'solid-js/jsx-runtime';
+import { JSX } from "solid-js/jsx-runtime";
+
+//#region src/dom/css.d.ts
 
 /**
  * Mounts a style element to the document head.
@@ -13,6 +15,6 @@ import { JSX } from 'solid-js/jsx-runtime';
 declare function mountStyle(style: string, id: string, refresh?: boolean): void;
 declare function stringStyleToObject(style: string): JSX.CSSProperties;
 declare function combineStyle(a: JSX.CSSProperties, b: JSX.CSSProperties | string | undefined): JSX.CSSProperties | string;
-declare function combineClass(defaultClass: string, ...otherClass: string[]): string;
-
-export { combineClass, combineStyle, mountStyle, stringStyleToObject };
+declare function combineClass(defaultClass: string, ...otherClass: (string | undefined | null)[]): string;
+//#endregion
+export { combineClass, combineStyle, mountStyle, stringStyleToObject };

package/dist/dom/css.mjs

@@ -0,0 +1,51 @@
+import { isClient } from "../utils/is.mjs";
+
+//#region src/dom/css.ts
+const alreadyInjected = [];
+/**
+* Mounts a style element to the document head.
+* If the style element with the given id already exists, it updates its content.
+* If `refresh` is true, it will update the style even if it has already been injected.
+* Note: This function should only be called in a client environment or `onMount`
+*
+* @param style - The CSS style to inject.
+* @param id - The id of the style element.
+* @param refresh - Whether to refresh the style if it already exists. Defaults to **false**.
+*/
+function mountStyle(style, id, refresh = false) {
+	if (!isClient) return;
+	if (alreadyInjected.includes(id) && !refresh) return;
+	let styleElement = document.querySelector(`style#${id}`);
+	if (styleElement) {
+		styleElement.innerHTML = style;
+		return;
+	}
+	styleElement = document.createElement("style");
+	styleElement.id = id;
+	styleElement.innerHTML = style;
+	document.head.appendChild(styleElement);
+	alreadyInjected.push(id);
+}
+const extractCSSregex = /((?:--)?(?:\w+-?)+)\s*:\s*([^;]*)/g;
+function stringStyleToObject(style) {
+	const object = {};
+	let match = extractCSSregex.exec(style);
+	while (match) {
+		if (match[1] && match[2]) object[match[1]] = match[2];
+		match = extractCSSregex.exec(style);
+	}
+	return object;
+}
+function combineStyle(a, b) {
+	const bb = typeof b === "string" ? stringStyleToObject(b) : b;
+	return {
+		...a,
+		...bb
+	};
+}
+function combineClass(defaultClass, ...otherClass) {
+	return [defaultClass, ...otherClass].filter(Boolean).join(" ");
+}
+
+//#endregion
+export { combineClass, combineStyle, mountStyle, stringStyleToObject };

package/dist/event/create-click-outside.d.mts

@@ -0,0 +1,9 @@
+import { MaybeAccessor } from "../types/maybe.mjs";
+import "../types/index.mjs";
+
+//#region src/event/create-click-outside.d.ts
+declare function createClickOutside(target: MaybeAccessor<HTMLElement | null | undefined>, handler: (event: PointerEvent) => void, options?: {
+  ignore?: MaybeAccessor<HTMLElement | null | undefined>[];
+}): () => void;
+//#endregion
+export { createClickOutside };

package/dist/event/create-click-outside.mjs

@@ -0,0 +1,33 @@
+import { access } from "../reactive/access.mjs";
+import { makeEventListener } from "./make-event-listener.mjs";
+
+//#region src/event/create-click-outside.ts
+function createClickOutside(target, handler, options) {
+	let shouldListen = false;
+	const shouldIgnore = (event) => {
+		return (options?.ignore ? options.ignore : []).map(access).some((el) => {
+			return el && (event.target === el || event.composedPath().includes(el));
+		});
+	};
+	const listener = (e) => {
+		const el = access(target);
+		if (!el || el === e.target || e.composedPath().includes(el)) return;
+		if (e.detail === 0) shouldListen = !shouldIgnore(e);
+		if (!shouldListen) {
+			shouldListen = true;
+			return;
+		}
+		handler(e);
+	};
+	const cleanups = [makeEventListener("click", listener, { passive: true }), makeEventListener("pointerdown", (e) => {
+		const el = access(target);
+		if (el) shouldListen = !(e.composedPath().includes(el) || shouldIgnore(e));
+	}, { passive: true })];
+	const stop = () => {
+		for (const cleanup of cleanups) cleanup();
+	};
+	return stop;
+}
+
+//#endregion
+export { createClickOutside };

package/dist/event/{create-event-listener.d.ts → create-event-listener.d.mts}

@@ -1,8 +1,9 @@
-import { Fn } from '../types/fn.js';
-import { MaybeAccessor, MaybeArray } from '../types/maybe.js';
-import { WindowEventName, DocumentEventName, GeneralEventListener } from './make-event-listener.js';
-import 'solid-js';
+import { Fn } from "../types/fn.mjs";
+import { MaybeAccessor, MaybeArray } from "../types/maybe.mjs";
+import "../types/index.mjs";
+import { DocumentEventName, GeneralEventListener, WindowEventName } from "./make-event-listener.mjs";
 
+//#region src/event/create-event-listener.d.ts
 /**
  * Overload 2: Explicitly Window target
  */
@@ -19,5 +20,5 @@ declare function createEventListener<T extends HTMLElement, E extends keyof HTML
  * Overload 6: Custom event target fallback
  */
 declare function createEventListener<EventType = Event>(target: MaybeAccessor<EventTarget | undefined | null>, event: MaybeAccessor<MaybeArray<string>>, listener: MaybeArray<GeneralEventListener<EventType>>, options?: MaybeAccessor<boolean | AddEventListenerOptions | undefined>): Fn;
-
-export { createEventListener };
+//#endregion
+export { createEventListener };

package/dist/event/create-event-listener.mjs

@@ -0,0 +1,34 @@
+import { isArray } from "../utils/is.mjs";
+import { clearArray } from "../utils/array.mjs";
+import { access } from "../reactive/access.mjs";
+import { noop } from "../fn/index.mjs";
+import { createWatch } from "../reactive/create-watch.mjs";
+import { makeEventListener } from "./make-event-listener.mjs";
+
+//#region src/event/create-event-listener.ts
+/** biome-ignore-all lint/suspicious/noExplicitAny: I need any */
+function createEventListener(...args) {
+	const target = args[0];
+	const events = args[1];
+	let listeners = args[2];
+	const options = args[3] ?? noop;
+	if (!isArray(listeners)) listeners = [listeners];
+	const cleanups = [];
+	const cleanup = () => {
+		for (const c of cleanups) c();
+		clearArray(cleanups);
+	};
+	createWatch(() => [
+		access(target),
+		access(events),
+		access(options)
+	], ([tars, evs, opts]) => {
+		cleanup();
+		if (!(tars && evs)) return;
+		cleanups.push(makeEventListener(tars, evs, listeners, opts));
+	});
+	return cleanup;
+}
+
+//#endregion
+export { createEventListener };

package/dist/event/{create-intersection-observer.d.ts → create-intersection-observer.d.mts}

@@ -1,6 +1,7 @@
-import { MaybeAccessor } from '../types/maybe.js';
-import 'solid-js';
+import { MaybeAccessor } from "../types/maybe.mjs";
+import "../types/index.mjs";
 
+//#region src/event/create-intersection-observer.d.ts
 declare function createIntersectionObserver(targets: MaybeAccessor<HTMLElement | null | undefined>[], callback: IntersectionObserverCallback, options?: IntersectionObserverInit): () => void;
-
-export { createIntersectionObserver };
+//#endregion
+export { createIntersectionObserver };

package/dist/event/create-intersection-observer.mjs

@@ -0,0 +1,29 @@
+import { clearArray } from "../utils/array.mjs";
+import { access } from "../reactive/access.mjs";
+import { noop } from "../fn/index.mjs";
+import { createWatch } from "../reactive/create-watch.mjs";
+import { isServer } from "solid-js/web";
+import { onCleanup } from "solid-js";
+
+//#region src/event/create-intersection-observer.ts
+function createIntersectionObserver(targets, callback, options = {}) {
+	if (isServer) return noop;
+	const io = new IntersectionObserver(callback, options);
+	onCleanup(() => io.disconnect());
+	const cleanups = [];
+	const cleanup = () => {
+		for (const c of cleanups) c();
+		clearArray(cleanups);
+	};
+	createWatch(() => targets.map(access), (elements) => {
+		cleanup();
+		for (const element of elements) if (element) {
+			io.observe(element);
+			cleanups.push(() => io.unobserve(element));
+		}
+	});
+	return () => io.disconnect();
+}
+
+//#endregion
+export { createIntersectionObserver };

package/dist/event/{create-visibility-observer.d.ts → create-visibility-observer.d.mts}

@@ -1,12 +1,14 @@
-import { Accessor } from 'solid-js';
-import { MaybeNullableAccessor } from '../types/maybe.js';
+import { MaybeNullableAccessor } from "../types/maybe.mjs";
+import "../types/index.mjs";
+import { Accessor } from "solid-js";
 
+//#region src/event/create-visibility-observer.d.ts
 type UseVisibilityObserverFn = (target: MaybeNullableAccessor<HTMLElement>) => Accessor<boolean>;
 type CreateVisibilityObserverOption = IntersectionObserverInit & {
-    initialValue?: boolean;
+  initialValue?: boolean;
 };
 type EntryCallback = (entry: IntersectionObserverEntry, instance: IntersectionObserver) => void;
 declare function createVisibilityObserver(options?: CreateVisibilityObserverOption): UseVisibilityObserverFn;
 declare function createVisibilityObserver(target: MaybeNullableAccessor<HTMLElement>, options?: CreateVisibilityObserverOption): Accessor<boolean>;
-
-export { type CreateVisibilityObserverOption, type EntryCallback, type UseVisibilityObserverFn, createVisibilityObserver };
+//#endregion
+export { CreateVisibilityObserverOption, EntryCallback, UseVisibilityObserverFn, createVisibilityObserver };

package/dist/event/create-visibility-observer.mjs

@@ -0,0 +1,46 @@
+import { isObject } from "../utils/is.mjs";
+import { access } from "../reactive/access.mjs";
+import { createWatch } from "../reactive/create-watch.mjs";
+import { createSignal, onCleanup } from "solid-js";
+
+//#region src/event/create-visibility-observer.ts
+function createVisibilityObserver(arg1, arg2) {
+	let target;
+	let options;
+	if (arg1 && !isObject(arg1)) {
+		target = arg1;
+		options = arg2 ?? {};
+	} else options = arg1 ?? {};
+	const callbacks = /* @__PURE__ */ new WeakMap();
+	const io = new IntersectionObserver((entries, instance) => {
+		for (const entry of entries) callbacks.get(entry.target)?.(entry, instance);
+	}, options);
+	onCleanup(() => io.disconnect());
+	const addEntry = (el, callback) => {
+		io.observe(el);
+		callbacks.set(el, callback);
+	};
+	const removeEntry = (el) => {
+		io.unobserve(el);
+		callbacks.delete(el);
+	};
+	const useVisibilityObserverFn = (element) => {
+		const [isVisible, setVisible] = createSignal(options?.initialValue ?? false);
+		let prevEl;
+		createWatch(() => access(element), (el) => {
+			if (prevEl) removeEntry(prevEl);
+			if (el) {
+				addEntry(el, (entry) => {
+					setVisible(entry.isIntersecting);
+				});
+				prevEl = el;
+			}
+		});
+		return isVisible;
+	};
+	if (target) return useVisibilityObserverFn(target);
+	return useVisibilityObserverFn;
+}
+
+//#endregion
+export { createVisibilityObserver };

package/dist/event/index.d.mts

@@ -0,0 +1,12 @@
+import { createClickOutside } from "./create-click-outside.mjs";
+import { DocumentEventName, GeneralEventListener, WindowEventName, makeEventListener } from "./make-event-listener.mjs";
+import { createEventListener } from "./create-event-listener.mjs";
+import { createIntersectionObserver } from "./create-intersection-observer.mjs";
+import { CreateVisibilityObserverOption, EntryCallback, UseVisibilityObserverFn, createVisibilityObserver } from "./create-visibility-observer.mjs";
+import { OnMotionEndOptions, OnMotionEndType, createOnMotionEnd, makeOnMotionEnd } from "./on-motion-end.mjs";
+import { JSX } from "solid-js/jsx-runtime";
+
+//#region src/event/index.d.ts
+declare function runSolidEventHandler<T, E extends Event, EHandler extends JSX.EventHandler<T, any> = JSX.EventHandler<T, E>>(event: E, handler?: EHandler | JSX.BoundEventHandler<T, E, EHandler>): void;
+//#endregion
+export { runSolidEventHandler };

package/dist/event/index.mjs

@@ -0,0 +1,15 @@
+import { makeEventListener } from "./make-event-listener.mjs";
+import { createClickOutside } from "./create-click-outside.mjs";
+import { createEventListener } from "./create-event-listener.mjs";
+import { createIntersectionObserver } from "./create-intersection-observer.mjs";
+import { createVisibilityObserver } from "./create-visibility-observer.mjs";
+import { createOnMotionEnd, makeOnMotionEnd } from "./on-motion-end.mjs";
+
+//#region src/event/index.ts
+function runSolidEventHandler(event, handler) {
+	if (typeof handler === "function") handler(event);
+	if (Array.isArray(handler)) handler[0](handler[1], event);
+}
+
+//#endregion
+export { runSolidEventHandler };

package/dist/event/{make-event-listener.d.ts → make-event-listener.d.mts}

@@ -1,10 +1,11 @@
-import { Fn } from '../types/fn.js';
-import { MaybeArray } from '../types/maybe.js';
-import 'solid-js';
+import { Fn } from "../types/fn.mjs";
+import { MaybeArray } from "../types/maybe.mjs";
+import "../types/index.mjs";
 
+//#region src/event/make-event-listener.d.ts
 interface InferEventTarget<Events> {
-    addEventListener: (event: Events, fn?: any, options?: any) => any;
-    removeEventListener: (event: Events, fn?: any, options?: any) => any;
+  addEventListener: (event: Events, fn?: any, options?: any) => any;
+  removeEventListener: (event: Events, fn?: any, options?: any) => any;
 }
 type WindowEventName = keyof WindowEventMap;
 type DocumentEventName = keyof DocumentEventMap;
@@ -45,5 +46,5 @@ declare function makeEventListener<Names extends string, EventType = Event>(targ
  * Overload 6: Custom event target fallback
  */
 declare function makeEventListener<EventType = Event>(target: EventTarget, event: MaybeArray<string>, listener: MaybeArray<GeneralEventListener<EventType>>, options?: boolean | AddEventListenerOptions): Fn;
-
-export { type DocumentEventName, type GeneralEventListener, type WindowEventName, makeEventListener };
+//#endregion
+export { DocumentEventName, GeneralEventListener, WindowEventName, makeEventListener };

package/dist/event/make-event-listener.mjs

@@ -0,0 +1,35 @@
+import { isArray } from "../utils/is.mjs";
+import { clearArray } from "../utils/array.mjs";
+import { noop } from "../fn/index.mjs";
+import { onCleanup } from "solid-js";
+
+//#region src/event/make-event-listener.ts
+/** biome-ignore-all lint/suspicious/noExplicitAny: I need any */
+function makeEventListener(...args) {
+	let target;
+	let events;
+	let listeners;
+	let options;
+	if (typeof args[0] === "string" || isArray(args[0])) {
+		[events, listeners, options] = args;
+		target = window;
+	} else [target, events, listeners, options] = args;
+	if (!target) return noop;
+	if (!isArray(events)) events = [events];
+	if (!isArray(listeners)) listeners = [listeners];
+	const cleanups = [];
+	const cleanup = () => {
+		for (const c of cleanups) c();
+		clearArray(cleanups);
+	};
+	const register = (el, event, listener, opts) => {
+		el.addEventListener(event, listener, opts);
+		return () => el.removeEventListener(event, listener, opts);
+	};
+	cleanups.push(...events.flatMap((event) => listeners.map((listener) => register(target, event, listener, options))));
+	onCleanup(cleanup);
+	return cleanup;
+}
+
+//#endregion
+export { makeEventListener };