solid-tiny-utils 0.10.0 → 0.12.0

package/dist/{jsx → dom}/attrs.d.mts

@@ -1,4 +1,4 @@
-//#region src/jsx/attrs.d.ts
+//#region src/dom/attrs.d.ts
 /**
  * return '' if show is true
  *

package/dist/{jsx → dom}/attrs.mjs

@@ -1,4 +1,4 @@
-//#region src/jsx/attrs.ts
+//#region src/dom/attrs.ts
 /**
 * return '' if show is true
 *

package/dist/index.d.mts

@@ -2,30 +2,30 @@ import { OKLCH, RGB, oklchToRgb, rgbToOklch } from "./color/oklch-rgb.mjs";
 import { hexToRgb, rgbToHex } from "./color/hex-rgb.mjs";
 import { isValidHex, isValidOKLCH, isValidRGB } from "./color/validation.mjs";
 import { hasAnimation } from "./dom/animation.mjs";
+import { dataIf } from "./dom/attrs.mjs";
 import { combineClass, combineStyle, mountStyle, stringStyleToObject } from "./dom/css.mjs";
 import { AnyFn, Fn } from "./types/fn.mjs";
 import { MaybeAccessor, MaybeArray, MaybeNullableAccessor, MaybePromise } from "./types/maybe.mjs";
 import "./types/index.mjs";
-import { createClickOutside } from "./event/create-click-outside.mjs";
-import { DocumentEventName, GeneralEventListener, WindowEventName, makeEventListener } from "./event/make-event-listener.mjs";
-import { createEventListener } from "./event/create-event-listener.mjs";
-import { createIntersectionObserver } from "./event/create-intersection-observer.mjs";
-import { PresenceState, createPresence } from "./event/create-presence.mjs";
-import { CreateVisibilityObserverOption, EntryCallback, UseVisibilityObserverFn, createVisibilityObserver } from "./event/create-visibility-observer.mjs";
-import { runSolidEventHandler } from "./event/index.mjs";
-import { createDebounce } from "./fn/create-debounce.mjs";
-import { createLoopExec } from "./fn/create-loop-exec.mjs";
-import { createThrottle } from "./fn/create-throttle.mjs";
-import { noop } from "./fn/index.mjs";
-import { dataIf } from "./jsx/attrs.mjs";
-import { access } from "./reactive/access.mjs";
-import { createDebouncedWatch } from "./reactive/create-debounce-watch.mjs";
-import { createWatch } from "./reactive/create-watch.mjs";
-import "./reactive/index.mjs";
+import { createClickOutside } from "./solidjs/create-click-outside.mjs";
+import { createDebounce } from "./solidjs/create-debounce.mjs";
+import { createDebouncedWatch } from "./solidjs/create-debounce-watch.mjs";
+import { DocumentEventName, GeneralEventListener, WindowEventName, makeEventListener } from "./solidjs/make-event-listener.mjs";
+import { createEventListener } from "./solidjs/create-event-listener.mjs";
+import { createIntersectionObserver } from "./solidjs/create-intersection-observer.mjs";
+import { createList } from "./solidjs/create-list.mjs";
+import { createLoopExec } from "./solidjs/create-loop-exec.mjs";
+import { MakePresenceOptions, PresencePhase, createPresence } from "./solidjs/create-presence.mjs";
+import { createThrottle } from "./solidjs/create-throttle.mjs";
+import { CreateVisibilityObserverOption, EntryCallback, UseVisibilityObserverFn, createVisibilityObserver } from "./solidjs/create-visibility-observer.mjs";
+import { createWatch } from "./solidjs/create-watch.mjs";
+import { MaybeCallableChild, access, callMaybeCallableChild, runSolidEventHandler } from "./solidjs/utils.mjs";
+import "./solidjs/index.mjs";
 import { clearArray, iterate, list, range } from "./utils/array.mjs";
 import { runAtNextAnimationFrame, sleep } from "./utils/async.mjs";
+import { noop } from "./utils/constant.mjs";
 import { isArray, isClient, isDate, isDefined, isEmpty, isFloat, isFn, isInt, isNumber, isObject, isPrimitive, isPromise, isString, isSymbol, isUndefined } from "./utils/is.mjs";
 import { clamp, inRange, max, min, toHex } from "./utils/number.mjs";
 import { draw, random, shuffle, uid } from "./utils/random.mjs";
 import { camel, capitalize, dash, pascal, snake, template, title, trim } from "./utils/str.mjs";
-export { AnyFn, CreateVisibilityObserverOption, DocumentEventName, EntryCallback, Fn, GeneralEventListener, MaybeAccessor, MaybeArray, MaybeNullableAccessor, MaybePromise, OKLCH, PresenceState, RGB, UseVisibilityObserverFn, WindowEventName, access, camel, capitalize, clamp, clearArray, combineClass, combineStyle, createClickOutside, createDebounce, createDebouncedWatch, createEventListener, createIntersectionObserver, createLoopExec, createPresence, createThrottle, createVisibilityObserver, createWatch, dash, dataIf, draw, hasAnimation, hexToRgb, inRange, isArray, isClient, isDate, isDefined, isEmpty, isFloat, isFn, isInt, isNumber, isObject, isPrimitive, isPromise, isString, isSymbol, isUndefined, isValidHex, isValidOKLCH, isValidRGB, iterate, list, makeEventListener, max, min, mountStyle, noop, oklchToRgb, pascal, random, range, rgbToHex, rgbToOklch, runAtNextAnimationFrame, runSolidEventHandler, shuffle, sleep, snake, stringStyleToObject, template, title, toHex, trim, uid };
+export { AnyFn, CreateVisibilityObserverOption, DocumentEventName, EntryCallback, Fn, GeneralEventListener, MakePresenceOptions, MaybeAccessor, MaybeArray, MaybeCallableChild, MaybeNullableAccessor, MaybePromise, OKLCH, PresencePhase, RGB, UseVisibilityObserverFn, WindowEventName, access, callMaybeCallableChild, camel, capitalize, clamp, clearArray, combineClass, combineStyle, createClickOutside, createDebounce, createDebouncedWatch, createEventListener, createIntersectionObserver, createList, createLoopExec, createPresence, createThrottle, createVisibilityObserver, createWatch, dash, dataIf, draw, hasAnimation, hexToRgb, inRange, isArray, isClient, isDate, isDefined, isEmpty, isFloat, isFn, isInt, isNumber, isObject, isPrimitive, isPromise, isString, isSymbol, isUndefined, isValidHex, isValidOKLCH, isValidRGB, iterate, list, makeEventListener, max, min, mountStyle, noop, oklchToRgb, pascal, random, range, rgbToHex, rgbToOklch, runAtNextAnimationFrame, runSolidEventHandler, shuffle, sleep, snake, stringStyleToObject, template, title, toHex, trim, uid };

package/dist/index.mjs

@@ -1,6 +1,7 @@
 import { isArray, isClient, isDate, isDefined, isEmpty, isFloat, isFn, isInt, isNumber, isObject, isPrimitive, isPromise, isString, isSymbol, isUndefined } from "./utils/is.mjs";
 import { clearArray, iterate, list, range } from "./utils/array.mjs";
 import { runAtNextAnimationFrame, sleep } from "./utils/async.mjs";
+import { noop } from "./utils/constant.mjs";
 import { clamp, inRange, max, min, toHex } from "./utils/number.mjs";
 import { draw, random, shuffle, uid } from "./utils/random.mjs";
 import { camel, capitalize, dash, pascal, snake, template, title, trim } from "./utils/str.mjs";
@@ -8,21 +9,20 @@ import { hexToRgb, rgbToHex } from "./color/hex-rgb.mjs";
 import { oklchToRgb, rgbToOklch } from "./color/oklch-rgb.mjs";
 import { isValidHex, isValidOKLCH, isValidRGB } from "./color/validation.mjs";
 import { hasAnimation } from "./dom/animation.mjs";
+import { dataIf } from "./dom/attrs.mjs";
 import { combineClass, combineStyle, mountStyle, stringStyleToObject } from "./dom/css.mjs";
-import { access } from "./reactive/access.mjs";
-import { createDebounce } from "./fn/create-debounce.mjs";
-import { createLoopExec } from "./fn/create-loop-exec.mjs";
-import { createThrottle } from "./fn/create-throttle.mjs";
-import { noop } from "./fn/index.mjs";
-import { createWatch } from "./reactive/create-watch.mjs";
-import { createDebouncedWatch } from "./reactive/create-debounce-watch.mjs";
-import { makeEventListener } from "./event/make-event-listener.mjs";
-import { createClickOutside } from "./event/create-click-outside.mjs";
-import { createEventListener } from "./event/create-event-listener.mjs";
-import { createIntersectionObserver } from "./event/create-intersection-observer.mjs";
-import { createPresence } from "./event/create-presence.mjs";
-import { createVisibilityObserver } from "./event/create-visibility-observer.mjs";
-import { runSolidEventHandler } from "./event/index.mjs";
-import { dataIf } from "./jsx/attrs.mjs";
+import { makeEventListener } from "./solidjs/make-event-listener.mjs";
+import { access, callMaybeCallableChild, runSolidEventHandler } from "./solidjs/utils.mjs";
+import { createClickOutside } from "./solidjs/create-click-outside.mjs";
+import { createDebounce } from "./solidjs/create-debounce.mjs";
+import { createWatch } from "./solidjs/create-watch.mjs";
+import { createDebouncedWatch } from "./solidjs/create-debounce-watch.mjs";
+import { createEventListener } from "./solidjs/create-event-listener.mjs";
+import { createIntersectionObserver } from "./solidjs/create-intersection-observer.mjs";
+import { createList } from "./solidjs/create-list.mjs";
+import { createLoopExec } from "./solidjs/create-loop-exec.mjs";
+import { createPresence } from "./solidjs/create-presence.mjs";
+import { createThrottle } from "./solidjs/create-throttle.mjs";
+import { createVisibilityObserver } from "./solidjs/create-visibility-observer.mjs";
 
-export { access, camel, capitalize, clamp, clearArray, combineClass, combineStyle, createClickOutside, createDebounce, createDebouncedWatch, createEventListener, createIntersectionObserver, createLoopExec, createPresence, createThrottle, createVisibilityObserver, createWatch, dash, dataIf, draw, hasAnimation, hexToRgb, inRange, isArray, isClient, isDate, isDefined, isEmpty, isFloat, isFn, isInt, isNumber, isObject, isPrimitive, isPromise, isString, isSymbol, isUndefined, isValidHex, isValidOKLCH, isValidRGB, iterate, list, makeEventListener, max, min, mountStyle, noop, oklchToRgb, pascal, random, range, rgbToHex, rgbToOklch, runAtNextAnimationFrame, runSolidEventHandler, shuffle, sleep, snake, stringStyleToObject, template, title, toHex, trim, uid };
+export { access, callMaybeCallableChild, camel, capitalize, clamp, clearArray, combineClass, combineStyle, createClickOutside, createDebounce, createDebouncedWatch, createEventListener, createIntersectionObserver, createList, createLoopExec, createPresence, createThrottle, createVisibilityObserver, createWatch, dash, dataIf, draw, hasAnimation, hexToRgb, inRange, isArray, isClient, isDate, isDefined, isEmpty, isFloat, isFn, isInt, isNumber, isObject, isPrimitive, isPromise, isString, isSymbol, isUndefined, isValidHex, isValidOKLCH, isValidRGB, iterate, list, makeEventListener, max, min, mountStyle, noop, oklchToRgb, pascal, random, range, rgbToHex, rgbToOklch, runAtNextAnimationFrame, runSolidEventHandler, shuffle, sleep, snake, stringStyleToObject, template, title, toHex, trim, uid };

package/dist/{event → solidjs}/create-click-outside.d.mts

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

package/dist/{event → solidjs}/create-click-outside.mjs

@@ -1,7 +1,7 @@
-import { access } from "../reactive/access.mjs";
 import { makeEventListener } from "./make-event-listener.mjs";
+import { access } from "./utils.mjs";
 
-//#region src/event/create-click-outside.ts
+//#region src/solidjs/create-click-outside.ts
 function createClickOutside(target, handler, options) {
 	let shouldListen = false;
 	const shouldIgnore = (event) => {

package/dist/{reactive → solidjs}/create-debounce-watch.d.mts

@@ -1,6 +1,6 @@
 import { Accessor, AccessorArray, OnOptions } from "solid-js";
 
-//#region src/reactive/create-debounce-watch.d.ts
+//#region src/solidjs/create-debounce-watch.d.ts
 
 /**
  * Creates a debounced watch effect.

package/dist/{reactive → solidjs}/create-debounce-watch.mjs

@@ -1,7 +1,7 @@
-import { createDebounce } from "../fn/create-debounce.mjs";
+import { createDebounce } from "./create-debounce.mjs";
 import { createWatch } from "./create-watch.mjs";
 
-//#region src/reactive/create-debounce-watch.ts
+//#region src/solidjs/create-debounce-watch.ts
 /**
 * Creates a debounced watch effect.
 *

package/dist/{fn → solidjs}/create-debounce.d.mts

@@ -1,7 +1,7 @@
 import { MaybeAccessor } from "../types/maybe.mjs";
 import "../types/index.mjs";
 
-//#region src/fn/create-debounce.d.ts
+//#region src/solidjs/create-debounce.d.ts
 declare function createDebounce<Args extends unknown[]>(callback: (...args: Args) => void, delay: MaybeAccessor<number>): (...args: Args) => void;
 //#endregion
 export { createDebounce };

package/dist/{fn → solidjs}/create-debounce.mjs

@@ -1,7 +1,7 @@
-import { access } from "../reactive/access.mjs";
+import { access } from "./utils.mjs";
 import { onCleanup } from "solid-js";
 
-//#region src/fn/create-debounce.ts
+//#region src/solidjs/create-debounce.ts
 function createDebounce(callback, delay) {
 	let timeoutId;
 	onCleanup(() => {

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

@@ -3,7 +3,7 @@ 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
+//#region src/solidjs/create-event-listener.d.ts
 /**
  * Overload 2: Explicitly Window target
  */

package/dist/{event → solidjs}/create-event-listener.mjs

@@ -1,12 +1,11 @@
 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 { noop } from "../utils/constant.mjs";
 import { makeEventListener } from "./make-event-listener.mjs";
+import { access } from "./utils.mjs";
+import { createWatch } from "./create-watch.mjs";
 
-//#region src/event/create-event-listener.ts
-/** biome-ignore-all lint/suspicious/noExplicitAny: I need any */
+//#region src/solidjs/create-event-listener.ts
 function createEventListener(...args) {
 	const target = args[0];
 	const events = args[1];

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

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

package/dist/{event → solidjs}/create-intersection-observer.mjs

@@ -1,11 +1,11 @@
 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 { noop } from "../utils/constant.mjs";
+import { access } from "./utils.mjs";
+import { createWatch } from "./create-watch.mjs";
 import { isServer } from "solid-js/web";
 import { onCleanup } from "solid-js";
 
-//#region src/event/create-intersection-observer.ts
+//#region src/solidjs/create-intersection-observer.ts
 function createIntersectionObserver(targets, callback, options = {}) {
 	if (isServer) return noop;
 	const io = new IntersectionObserver(callback, options);

package/dist/solidjs/create-list.d.mts

@@ -0,0 +1,14 @@
+import { SetStoreFunction } from "solid-js/store";
+
+//#region src/solidjs/create-list.d.ts
+declare function createList<T>(initialValue?: T[]): readonly [T[], {
+  readonly setList: SetStoreFunction<T[]>;
+  readonly insert: (item: T, at?: number) => void;
+  readonly remove: (at?: number) => void;
+  readonly swap: (indexA: number, indexB: number) => void;
+  readonly move: (from: number, to: number) => void;
+  readonly sort: (compareFn: (a: T, b: T) => number) => void;
+  readonly isSortedBy: (compareFn: (a: T, b: T) => number) => boolean;
+}];
+//#endregion
+export { createList };

package/dist/solidjs/create-list.mjs

@@ -0,0 +1,77 @@
+import { inRange } from "../utils/number.mjs";
+import { createStore, unwrap } from "solid-js/store";
+
+//#region src/solidjs/create-list.ts
+function createInsertHelper(setList) {
+	return (item, at) => {
+		setList((list) => {
+			let atIdx = at ?? list.length;
+			if (atIdx < 0 || atIdx > list.length) atIdx = list.length;
+			const newList = [...list];
+			newList.splice(atIdx, 0, item);
+			return newList;
+		});
+	};
+}
+function createRemoveHelper(setList) {
+	return (at) => {
+		setList((list) => {
+			const atIdx = at ?? list.length - 1;
+			if (atIdx < 0 || atIdx >= list.length) return list;
+			const newList = [...list];
+			newList.splice(atIdx, 1);
+			return newList;
+		});
+	};
+}
+function createSwapHelper(setList) {
+	return (indexA, indexB) => {
+		setList((list) => {
+			if (indexA === indexB || !inRange(indexA, 0, list.length - 1) || !inRange(indexB, 0, list.length - 1)) return list;
+			const newList = [...list];
+			[newList[indexA], newList[indexB]] = [newList[indexB], newList[indexA]];
+			return newList;
+		});
+	};
+}
+function createMoveHelper(setList) {
+	return (from, to) => {
+		setList((list) => {
+			if (from === to || !inRange(from, 0, list.length - 1) || !inRange(to, 0, list.length - 1)) return list;
+			const newList = [...list];
+			const [item] = newList.splice(from, 1);
+			newList.splice(to, 0, item);
+			return newList;
+		});
+	};
+}
+function createSortHelper(setList) {
+	return (compareFn) => {
+		setList((list) => {
+			const newList = [...list];
+			newList.sort(compareFn);
+			return newList;
+		});
+	};
+}
+function createIsSortedHelper(list, compareFn) {
+	for (let i = 1; i < list.length; i++) if (compareFn(list[i - 1], list[i]) > 0) return false;
+	return true;
+}
+function createList(initialValue) {
+	const [list, setList] = createStore(unwrap(initialValue) || []);
+	return [list, {
+		setList,
+		insert: createInsertHelper(setList),
+		remove: createRemoveHelper(setList),
+		swap: createSwapHelper(setList),
+		move: createMoveHelper(setList),
+		sort: createSortHelper(setList),
+		isSortedBy: (compareFn) => {
+			return createIsSortedHelper(list, compareFn);
+		}
+	}];
+}
+
+//#endregion
+export { createList };

package/dist/{fn → solidjs}/create-loop-exec.d.mts

@@ -1,6 +1,6 @@
 import { MaybeAccessor, MaybePromise } from "../types/maybe.mjs";
 
-//#region src/fn/create-loop-exec.d.ts
+//#region src/solidjs/create-loop-exec.d.ts
 
 /**
  * Repeatedly executes an asynchronous function with a specified delay between each execution.

package/dist/{fn → solidjs}/create-loop-exec.mjs

@@ -1,9 +1,9 @@
 import { isNumber } from "../utils/is.mjs";
-import { access } from "../reactive/access.mjs";
-import { createWatch } from "../reactive/create-watch.mjs";
+import { access } from "./utils.mjs";
+import { createWatch } from "./create-watch.mjs";
 import { onCleanup } from "solid-js";
 
-//#region src/fn/create-loop-exec.ts
+//#region src/solidjs/create-loop-exec.ts
 /**
 * Repeatedly executes an asynchronous function with a specified delay between each execution.
 * The loop continues until the surrounding SolidJS effect is cleaned up.

package/dist/solidjs/create-presence.d.mts

@@ -0,0 +1,22 @@
+import { MaybeAccessor } from "../types/maybe.mjs";
+import "../types/index.mjs";
+import { Accessor } from "solid-js";
+
+//#region src/solidjs/create-presence.d.ts
+interface MakePresenceOptions {
+  enterDuration: MaybeAccessor<number>;
+  exitDuration: MaybeAccessor<number>;
+  initialEnter?: boolean;
+}
+type PresencePhase = "idle" | "pre-enter" | "entering" | "entered" | "exiting" | "exited";
+declare function createPresence<TItem>(item: Accessor<TItem | undefined>, options: MakePresenceOptions): {
+  isMounted: () => boolean;
+  mountedItem: Accessor<TItem | undefined>;
+  isVisible: Accessor<boolean>;
+  isAnimating: Accessor<boolean>;
+  isEntering: Accessor<boolean>;
+  isExiting: Accessor<boolean>;
+  phase: Accessor<PresencePhase>;
+};
+//#endregion
+export { MakePresenceOptions, PresencePhase, createPresence };

package/dist/solidjs/create-presence.mjs

@@ -0,0 +1,89 @@
+import { isDefined } from "../utils/is.mjs";
+import { runAtNextAnimationFrame } from "../utils/async.mjs";
+import { noop } from "../utils/constant.mjs";
+import { access } from "./utils.mjs";
+import { createWatch } from "./create-watch.mjs";
+import { createEffect, createMemo, createSignal, onCleanup, untrack } from "solid-js";
+
+//#region src/solidjs/create-presence.ts
+function makeTimeout(ms, fn) {
+	if (ms() <= 0) {
+		fn();
+		return noop;
+	}
+	const timeoutId = setTimeout(() => {
+		fn();
+	}, ms());
+	return () => clearTimeout(timeoutId);
+}
+/**
+* Animates the appearance of its children.
+*
+* @internal - to be combined with `createPresence` in the future
+*/
+function createPresenceBase(source, options) {
+	const enterDuration = () => access(options.enterDuration);
+	const exitDuration = () => access(options.exitDuration);
+	const initialSource = untrack(source);
+	let initialPhase = "idle";
+	if (initialSource) initialPhase = options.initialEnter ? "pre-enter" : "entered";
+	const [phase, setPhase] = createSignal(initialPhase);
+	let clear = noop;
+	onCleanup(clear);
+	createWatch(source, (visible) => {
+		setPhase((prev) => {
+			if (visible) {
+				if (prev === "idle" || prev === "exited") return "pre-enter";
+				return prev;
+			}
+			if (prev === "entered" || prev === "entering") return "exiting";
+			return prev;
+		});
+	});
+	createWatch(phase, (currentPhase) => {
+		clear();
+		if (currentPhase === "pre-enter") runAtNextAnimationFrame(() => {
+			setPhase("entering");
+		});
+		if (currentPhase === "entering") clear = makeTimeout(enterDuration, () => setPhase("entered"));
+		if (currentPhase === "exiting") clear = makeTimeout(exitDuration, () => setPhase("exited"));
+		if (currentPhase === "exited") setPhase("idle");
+	});
+	const isVisible = createMemo(() => ["entering", "entered"].includes(phase()));
+	const isMounted = createMemo(() => phase() !== "idle");
+	const isExiting = createMemo(() => phase() === "exiting");
+	const isEntering = createMemo(() => phase() === "entering");
+	return {
+		isMounted,
+		isVisible,
+		isAnimating: createMemo(() => isEntering() || isExiting()),
+		isEntering,
+		isExiting,
+		phase
+	};
+}
+const itemShouldBeMounted = (item) => item !== false && item != null;
+function createPresence(item, options) {
+	const initial = untrack(item);
+	const [mountedItem, setMountedItem] = createSignal(initial);
+	const [shouldBeMounted, setShouldBeMounted] = createSignal(itemShouldBeMounted(initial));
+	const { isMounted, ...rest } = createPresenceBase(shouldBeMounted, options);
+	createEffect(() => {
+		if (mountedItem() !== item()) {
+			if (isMounted()) setShouldBeMounted(false);
+			else if (itemShouldBeMounted(item())) {
+				setMountedItem(() => item());
+				setShouldBeMounted(true);
+			}
+		} else if (!itemShouldBeMounted(item())) setShouldBeMounted(false);
+		else if (itemShouldBeMounted(item())) setShouldBeMounted(true);
+	});
+	return {
+		...rest,
+		isMounted: () => isMounted() && isDefined(mountedItem()),
+		mountedItem
+	};
+}
+
+//#endregion
+export { createPresence };

package/dist/{fn → solidjs}/create-throttle.d.mts

@@ -1,7 +1,7 @@
 import { MaybeAccessor } from "../types/maybe.mjs";
 import "../types/index.mjs";
 
-//#region src/fn/create-throttle.d.ts
+//#region src/solidjs/create-throttle.d.ts
 declare function createThrottle<Args extends unknown[]>(callback: (...args: Args) => void, delay: MaybeAccessor<number>): (...args: Args) => void;
 //#endregion
 export { createThrottle };

package/dist/{fn → solidjs}/create-throttle.mjs

@@ -1,7 +1,7 @@
-import { access } from "../reactive/access.mjs";
+import { access } from "./utils.mjs";
 import { onCleanup } from "solid-js";
 
-//#region src/fn/create-throttle.ts
+//#region src/solidjs/create-throttle.ts
 function createThrottle(callback, delay) {
 	let timeoutId;
 	onCleanup(() => {

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

@@ -2,7 +2,7 @@ import { MaybeNullableAccessor } from "../types/maybe.mjs";
 import "../types/index.mjs";
 import { Accessor } from "solid-js";
 
-//#region src/event/create-visibility-observer.d.ts
+//#region src/solidjs/create-visibility-observer.d.ts
 type UseVisibilityObserverFn = (target: MaybeNullableAccessor<HTMLElement>) => Accessor<boolean>;
 type CreateVisibilityObserverOption = IntersectionObserverInit & {
   initialValue?: boolean;

package/dist/{event → solidjs}/create-visibility-observer.mjs

@@ -1,9 +1,9 @@
 import { isObject } from "../utils/is.mjs";
-import { access } from "../reactive/access.mjs";
-import { createWatch } from "../reactive/create-watch.mjs";
+import { access } from "./utils.mjs";
+import { createWatch } from "./create-watch.mjs";
 import { createSignal, onCleanup } from "solid-js";
 
-//#region src/event/create-visibility-observer.ts
+//#region src/solidjs/create-visibility-observer.ts
 function createVisibilityObserver(arg1, arg2) {
 	let target;
 	let options;

package/dist/{reactive → solidjs}/create-watch.d.mts

@@ -1,6 +1,6 @@
 import { Accessor, AccessorArray, OnEffectFunction, OnOptions } from "solid-js";
 
-//#region src/reactive/create-watch.d.ts
+//#region src/solidjs/create-watch.d.ts
 declare function createWatch<S, Next extends Prev, Prev = Next>(targets: AccessorArray<S> | Accessor<S>, fn: OnEffectFunction<S, undefined | NoInfer<Prev>, Next>, opt?: OnOptions): void;
 //#endregion
 export { createWatch };

package/dist/{reactive → solidjs}/create-watch.mjs

@@ -1,6 +1,6 @@
 import { createEffect, on } from "solid-js";
 
-//#region src/reactive/create-watch.ts
+//#region src/solidjs/create-watch.ts
 function createWatch(targets, fn, opt) {
 	createEffect(on(targets, fn, opt));
 }

package/dist/solidjs/index.d.mts

@@ -0,0 +1,13 @@
+import { createClickOutside } from "./create-click-outside.mjs";
+import { createDebounce } from "./create-debounce.mjs";
+import { createDebouncedWatch } from "./create-debounce-watch.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 { createList } from "./create-list.mjs";
+import { createLoopExec } from "./create-loop-exec.mjs";
+import { MakePresenceOptions, PresencePhase, createPresence } from "./create-presence.mjs";
+import { createThrottle } from "./create-throttle.mjs";
+import { CreateVisibilityObserverOption, EntryCallback, UseVisibilityObserverFn, createVisibilityObserver } from "./create-visibility-observer.mjs";
+import { createWatch } from "./create-watch.mjs";
+import { MaybeCallableChild, access, callMaybeCallableChild, runSolidEventHandler } from "./utils.mjs";

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

@@ -2,7 +2,7 @@ import { Fn } from "../types/fn.mjs";
 import { MaybeArray } from "../types/maybe.mjs";
 import "../types/index.mjs";
 
-//#region src/event/make-event-listener.d.ts
+//#region src/solidjs/make-event-listener.d.ts
 interface InferEventTarget<Events> {
   addEventListener: (event: Events, fn?: any, options?: any) => any;
   removeEventListener: (event: Events, fn?: any, options?: any) => any;

package/dist/{event → solidjs}/make-event-listener.mjs

@@ -1,9 +1,9 @@
 import { isArray } from "../utils/is.mjs";
 import { clearArray } from "../utils/array.mjs";
-import { noop } from "../fn/index.mjs";
+import { noop } from "../utils/constant.mjs";
 import { onCleanup } from "solid-js";
 
-//#region src/event/make-event-listener.ts
+//#region src/solidjs/make-event-listener.ts
 /** biome-ignore-all lint/suspicious/noExplicitAny: I need any */
 function makeEventListener(...args) {
 	let target;

package/dist/solidjs/utils.d.mts

@@ -0,0 +1,10 @@
+import { MaybeAccessor } from "../types/maybe.mjs";
+import { JSX } from "solid-js";
+
+//#region src/solidjs/utils.d.ts
+declare function access<T>(value: MaybeAccessor<T>): T;
+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;
+type MaybeCallableChild<T extends unknown[] = []> = JSX.Element | ((...args: T) => JSX.Element);
+declare function callMaybeCallableChild<T extends unknown[] = []>(children: MaybeCallableChild<T>, ...args: T): JSX.Element;
+//#endregion
+export { MaybeCallableChild, access, callMaybeCallableChild, runSolidEventHandler };

package/dist/solidjs/utils.mjs

@@ -0,0 +1,23 @@
+import { isArray, isFn } from "../utils/is.mjs";
+
+//#region src/solidjs/utils.ts
+function access(value) {
+	return isFn(value) ? value() : value;
+}
+function runSolidEventHandler(event, handler) {
+	if (isFn(handler)) {
+		handler(event);
+		return;
+	}
+	if (isArray(handler)) {
+		const h = handler[0];
+		const data = handler[1];
+		h(data, event);
+	}
+}
+function callMaybeCallableChild(children, ...args) {
+	return isFn(children) ? children(...args) : children;
+}
+
+//#endregion
+export { access, callMaybeCallableChild, runSolidEventHandler };

package/dist/utils/constant.d.mts

@@ -0,0 +1,4 @@
+//#region src/utils/constant.d.ts
+declare const noop: () => void;
+//#endregion
+export { noop };

package/dist/utils/constant.mjs

@@ -0,0 +1,5 @@
+//#region src/utils/constant.ts
+const noop = () => {};
+
+//#endregion
+export { noop };

package/dist/utils/is.mjs

@@ -21,7 +21,7 @@ const isPrimitive = (value) => {
 	return value === void 0 || value === null || typeof value !== "object" && typeof value !== "function";
 };
 const isFn = (value) => {
-	return !!(value && value.constructor && value.call && value.apply);
+	return typeof value === "function";
 };
 const isString = (value) => {
 	return typeof value === "string" || value instanceof String;

package/package.json

@@ -1,8 +1,17 @@
 {
   "name": "solid-tiny-utils",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "A collection of tiny utilities for SolidJS applications",
-  "main": "./dist/index.mjs",
+  "author": "solid tiny",
+  "license": "MIT",
+  "homepage": "https://github.com/solid-tiny/solid-tiny-utils#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/solid-tiny/solid-tiny-utils.git"
+  },
+  "bugs": {
+    "url": "https://github.com/solid-tiny/solid-tiny-utils/issues"
+  },
   "type": "module",
   "files": [
     "dist"
@@ -12,24 +21,25 @@
     "solid-js": "^1.9.7"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.3.10",
+    "@biomejs/biome": "2.3.11",
+    "@formkit/auto-animate": "^0.9.0",
     "@solidjs/router": "^0.15.4",
     "@solidjs/testing-library": "^0.8.10",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/user-event": "^14.6.1",
     "@types/culori": "^4.0.0",
     "@types/node": "^25.0.3",
-    "@typescript/native-preview": "7.0.0-dev.20251226.1",
+    "@typescript/native-preview": "7.0.0-dev.20260114.1",
     "@vitest/ui": "^4.0.16",
-    "bumpp": "^10.2.3",
+    "bumpp": "^10.3.2",
     "culori": "^4.0.2",
     "jsdom": "^27.3.0",
     "solid-tiny-context": "0.2.3",
-    "tsdown": "^0.18.3",
-    "ultracite": "6.5.0",
+    "tsdown": "^0.19.0",
+    "ultracite": "7.0.11",
     "unocss": "^66.3.3",
     "vite": "^7.3.0",
-    "vite-plugin-solid": "^2.11.0",
+    "vite-plugin-solid": "^2.11.10",
     "vite-plugin-solid-pages": "^0.3.5",
     "vitest": "^4.0.16"
   },
@@ -40,9 +50,6 @@
     "typescript",
     "utils"
   ],
-  "author": "",
-  "license": "MIT",
-  "module": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
   "exports": {
     ".": "./dist/index.mjs",
@@ -54,11 +61,11 @@
     "test": "vitest --run",
     "clean": "rimraf dist node_modules pnpm-lock.yaml",
     "test:ui": "vitest --ui",
-    "lint": "pnpm dlx ultracite@latest check",
-    "lint:error": "pnpm dlx ultracite@latest check --diagnostic-level error",
-    "lint:fix": "pnpm dlx ultracite@latest fix",
+    "lint": "pnpm ultracite check",
+    "lint:error": "pnpm ultracite check --diagnostic-level error",
+    "lint:fix": "pnpm ultracite fix",
     "type-check": "tsgo --noEmit --skipLibCheck",
-    "bump": "pnpm type-check && pnpm lint && pnpm test && pnpm bumpp --no-push",
+    "bump": "pnpm type-check && pnpm test && pnpm bumpp --no-push",
     "prepublish": "pnpm build"
   }
 }

package/dist/event/create-presence.d.mts

@@ -1,14 +0,0 @@
-import { MaybeAccessor } from "../types/maybe.mjs";
-import { Accessor } from "solid-js";
-
-//#region src/event/create-presence.d.ts
-type PresenceState = "opening" | "opened" | "closing" | "closed";
-declare function createPresence(params: {
-  show: Accessor<boolean>;
-  element: MaybeAccessor<HTMLElement | undefined>;
-}): {
-  show: () => boolean;
-  state: Accessor<PresenceState>;
-};
-//#endregion
-export { PresenceState, createPresence };

package/dist/event/create-presence.mjs

@@ -1,32 +0,0 @@
-import { hasAnimation } from "../dom/animation.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";
-import { createSignal } from "solid-js";
-
-//#region src/event/create-presence.ts
-function createPresence(params) {
-	const [state, setState] = createSignal(access(params.show) ? "opened" : "closed");
-	createWatch(params.show, (show) => {
-		if (show) setState("opening");
-		else setState("closing");
-	}, { defer: true });
-	let clear = noop;
-	createWatch(state, (current) => {
-		clear();
-		const el = access(params.element);
-		if (!el) return;
-		if (current.endsWith("ing")) if (hasAnimation(el)) clear = makeEventListener(el, "animationend", () => {
-			setState(current === "opening" ? "opened" : "closed");
-		}, { once: true });
-		else setState(current === "opening" ? "opened" : "closed");
-	});
-	return {
-		show: () => state() !== "closed",
-		state
-	};
-}
-
-//#endregion
-export { createPresence };

package/dist/event/index.d.mts

@@ -1,12 +0,0 @@
-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 { PresenceState, createPresence } from "./create-presence.mjs";
-import { CreateVisibilityObserverOption, EntryCallback, UseVisibilityObserverFn, createVisibilityObserver } from "./create-visibility-observer.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

@@ -1,15 +0,0 @@
-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 { createPresence } from "./create-presence.mjs";
-import { createVisibilityObserver } from "./create-visibility-observer.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/fn/index.d.mts

@@ -1,8 +0,0 @@
-import { createDebounce } from "./create-debounce.mjs";
-import { createLoopExec } from "./create-loop-exec.mjs";
-import { createThrottle } from "./create-throttle.mjs";
-
-//#region src/fn/index.d.ts
-declare const noop: () => void;
-//#endregion
-export { noop };

package/dist/fn/index.mjs

@@ -1,9 +0,0 @@
-import { createDebounce } from "./create-debounce.mjs";
-import { createLoopExec } from "./create-loop-exec.mjs";
-import { createThrottle } from "./create-throttle.mjs";
-
-//#region src/fn/index.ts
-const noop = () => {};
-
-//#endregion
-export { noop };

package/dist/reactive/access.d.mts

@@ -1,6 +0,0 @@
-import { MaybeAccessor } from "../types/maybe.mjs";
-
-//#region src/reactive/access.d.ts
-declare function access<T>(value: MaybeAccessor<T>): T;
-//#endregion
-export { access };

package/dist/reactive/access.mjs

@@ -1,9 +0,0 @@
-import { isFn } from "../utils/is.mjs";
-
-//#region src/reactive/access.ts
-function access(value) {
-	return isFn(value) ? value() : value;
-}
-
-//#endregion
-export { access };

package/dist/reactive/index.d.mts

@@ -1,3 +0,0 @@
-import { access } from "./access.mjs";
-import { createDebouncedWatch } from "./create-debounce-watch.mjs";
-import { createWatch } from "./create-watch.mjs";