solid-tiny-utils 0.11.0 → 0.12.1

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 g-mero
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 g-mero
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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.mts

@@ -1,7 +1,6 @@
 import { RGB } from "./oklch-rgb.mjs";
 
 //#region src/color/hex-rgb.d.ts
-
 /**
  * Converts a hex color string to RGB color values.
  *

package/dist/color/hex-rgb.mjs

@@ -1,6 +1,5 @@
 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}$/;
@@ -57,6 +56,5 @@ function rgbToHex(rgb) {
 	const b = c(rgb_[2]);
 	return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
-
 //#endregion
-export { hexToRgb, rgbToHex };
+export { hexToRgb, rgbToHex };

package/dist/color/oklch-rgb.d.mts

@@ -1,13 +1,13 @@
 //#region src/color/oklch-rgb.d.ts
 interface RGB {
-  r: number;
-  g: number;
   b: number;
+  g: number;
+  r: number;
 }
 interface OKLCH {
-  l: number;
   c: number;
   h: number;
+  l: number;
 }
 /**
  * Converts OKLCH color to RGB color space.

package/dist/color/oklch-rgb.mjs

@@ -1,5 +1,4 @@
 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;
@@ -96,6 +95,5 @@ function rgbToOklch(rgb) {
 		h
 	};
 }
-
 //#endregion
-export { oklchToRgb, rgbToOklch };
+export { oklchToRgb, rgbToOklch };

package/dist/color/validation.d.mts

@@ -1,7 +1,6 @@
 import { OKLCH, RGB } from "./oklch-rgb.mjs";
 
 //#region src/color/validation.d.ts
-
 /**
  * Checks if RGB values are in valid range (0-255)
  */

package/dist/color/validation.mjs

@@ -1,6 +1,5 @@
 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)
@@ -30,6 +29,5 @@ function isValidOKLCH(oklch) {
 function isValidHex(hex) {
 	return hexToRgb(hex) !== null;
 }
-
 //#endregion
-export { isValidHex, isValidOKLCH, isValidRGB };
+export { isValidHex, isValidOKLCH, isValidRGB };

package/dist/dom/animation.mjs

@@ -3,6 +3,5 @@ function hasAnimation(element) {
 	const styles = getComputedStyle(element);
 	return Number.parseFloat(styles.animationDuration || "0") > 0;
 }
-
 //#endregion
-export { hasAnimation };
+export { hasAnimation };

package/dist/dom/attrs.mjs

@@ -21,6 +21,5 @@
 function dataIf(show) {
 	return show ? "" : void 0;
 }
-
 //#endregion
-export { dataIf };
+export { dataIf };

package/dist/dom/css.d.mts

@@ -1,7 +1,6 @@
 import { JSX } from "solid-js/jsx-runtime";
 
 //#region src/dom/css.d.ts
-
 /**
  * Mounts a style element to the document head.
  * If the style element with the given id already exists, it updates its content.
@@ -12,7 +11,7 @@ import { JSX } from "solid-js/jsx-runtime";
  * @param id - The id of the style element.
  * @param refresh - Whether to refresh the style if it already exists. Defaults to **false**.
  */
-declare function mountStyle(style: string, id: string, refresh?: boolean): void;
+declare function mountStyle(style: string | (() => 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 | undefined | null)[]): string;

package/dist/dom/css.mjs

@@ -1,5 +1,5 @@
 import { isClient } from "../utils/is.mjs";
-
+import { access } from "../solidjs/utils.mjs";
 //#region src/dom/css.ts
 const alreadyInjected = [];
 /**
@@ -17,12 +17,12 @@ function mountStyle(style, id, refresh = false) {
 	if (alreadyInjected.includes(id) && !refresh) return;
 	let styleElement = document.querySelector(`style#${id}`);
 	if (styleElement) {
-		styleElement.innerHTML = style;
+		styleElement.textContent = access(style);
 		return;
 	}
 	styleElement = document.createElement("style");
 	styleElement.id = id;
-	styleElement.innerHTML = style;
+	styleElement.textContent = access(style);
 	document.head.appendChild(styleElement);
 	alreadyInjected.push(id);
 }
@@ -46,6 +46,5 @@ function combineStyle(a, b) {
 function combineClass(defaultClass, ...otherClass) {
 	return [defaultClass, ...otherClass].filter(Boolean).join(" ");
 }
-
 //#endregion
-export { combineClass, combineStyle, mountStyle, stringStyleToObject };
+export { combineClass, combineStyle, mountStyle, stringStyleToObject };

package/dist/dom/index.d.mts

@@ -0,0 +1,3 @@
+import { hasAnimation } from "./animation.mjs";
+import { dataIf } from "./attrs.mjs";
+import { combineClass, combineStyle, mountStyle, stringStyleToObject } from "./css.mjs";

package/dist/index.d.mts

@@ -6,7 +6,6 @@ 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 "./solidjs/create-click-outside.mjs";
 import { createDebounce } from "./solidjs/create-debounce.mjs";
 import { createDebouncedWatch } from "./solidjs/create-debounce-watch.mjs";
@@ -15,12 +14,11 @@ 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 { PresenceState, createPresence } from "./solidjs/create-presence.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";
@@ -28,4 +26,4 @@ import { isArray, isClient, isDate, isDefined, isEmpty, isFloat, isFn, isInt, is
 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, MaybeCallableChild, MaybeNullableAccessor, MaybePromise, OKLCH, PresenceState, 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 };
+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

@@ -10,7 +10,6 @@ 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 { makeEventListener } from "./solidjs/make-event-listener.mjs";
 import { access, callMaybeCallableChild, runSolidEventHandler } from "./solidjs/utils.mjs";
 import { createClickOutside } from "./solidjs/create-click-outside.mjs";
@@ -24,5 +23,5 @@ 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, 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 };
+import { combineClass, combineStyle, mountStyle, stringStyleToObject } from "./dom/css.mjs";
+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/solidjs/create-click-outside.d.mts

@@ -1,6 +1,4 @@
 import { MaybeAccessor } from "../types/maybe.mjs";
-import "../types/index.mjs";
-
 //#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>[];

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

@@ -1,13 +1,10 @@
 import { makeEventListener } from "./make-event-listener.mjs";
 import { access } from "./utils.mjs";
-
 //#region src/solidjs/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));
-		});
+		return (options?.ignore ? options.ignore : []).map(access).some((el) => el && (event.target === el || event.composedPath().includes(el)));
 	};
 	const listener = (e) => {
 		const el = access(target);
@@ -28,6 +25,5 @@ function createClickOutside(target, handler, options) {
 	};
 	return stop;
 }
-
 //#endregion
-export { createClickOutside };
+export { createClickOutside };

package/dist/solidjs/create-debounce-watch.d.mts

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

package/dist/solidjs/create-debounce-watch.mjs

@@ -1,6 +1,5 @@
 import { createDebounce } from "./create-debounce.mjs";
 import { createWatch } from "./create-watch.mjs";
-
 //#region src/solidjs/create-debounce-watch.ts
 /**
 * Creates a debounced watch effect.
@@ -10,6 +9,5 @@ import { createWatch } from "./create-watch.mjs";
 function createDebouncedWatch(targets, fn, opt) {
 	createWatch(targets, createDebounce(fn, opt?.delay ?? 10), opt);
 }
-
 //#endregion
-export { createDebouncedWatch };
+export { createDebouncedWatch };

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

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

package/dist/solidjs/create-debounce.mjs

@@ -1,6 +1,5 @@
 import { access } from "./utils.mjs";
 import { onCleanup } from "solid-js";
-
 //#region src/solidjs/create-debounce.ts
 function createDebounce(callback, delay) {
 	let timeoutId;
@@ -15,6 +14,5 @@ function createDebounce(callback, delay) {
 	};
 	return run;
 }
-
 //#endregion
-export { createDebounce };
+export { createDebounce };

package/dist/solidjs/create-event-listener.d.mts

@@ -1,6 +1,5 @@
 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/solidjs/create-event-listener.d.ts

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

@@ -4,7 +4,6 @@ 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/solidjs/create-event-listener.ts
 function createEventListener(...args) {
 	const target = args[0];
@@ -28,6 +27,5 @@ function createEventListener(...args) {
 	});
 	return cleanup;
 }
-
 //#endregion
-export { createEventListener };
+export { createEventListener };

package/dist/solidjs/create-intersection-observer.d.mts

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

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

@@ -4,7 +4,6 @@ import { access } from "./utils.mjs";
 import { createWatch } from "./create-watch.mjs";
 import { isServer } from "solid-js/web";
 import { onCleanup } from "solid-js";
-
 //#region src/solidjs/create-intersection-observer.ts
 function createIntersectionObserver(targets, callback, options = {}) {
 	if (isServer) return noop;
@@ -24,6 +23,5 @@ function createIntersectionObserver(targets, callback, options = {}) {
 	});
 	return () => io.disconnect();
 }
-
 //#endregion
-export { createIntersectionObserver };
+export { createIntersectionObserver };

package/dist/solidjs/create-list.mjs

@@ -1,6 +1,5 @@
 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) => {
@@ -67,11 +66,8 @@ function createList(initialValue) {
 		swap: createSwapHelper(setList),
 		move: createMoveHelper(setList),
 		sort: createSortHelper(setList),
-		isSortedBy: (compareFn) => {
-			return createIsSortedHelper(list, compareFn);
-		}
+		isSortedBy: (compareFn) => createIsSortedHelper(list, compareFn)
 	}];
 }
-
 //#endregion
-export { createList };
+export { createList };

package/dist/solidjs/create-loop-exec.d.mts

@@ -1,7 +1,6 @@
 import { MaybeAccessor, MaybePromise } from "../types/maybe.mjs";
 
 //#region src/solidjs/create-loop-exec.d.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-loop-exec.mjs

@@ -2,7 +2,6 @@ import { isNumber } from "../utils/is.mjs";
 import { access } from "./utils.mjs";
 import { createWatch } from "./create-watch.mjs";
 import { onCleanup } from "solid-js";
-
 //#region src/solidjs/create-loop-exec.ts
 /**
 * Repeatedly executes an asynchronous function with a specified delay between each execution.
@@ -54,6 +53,5 @@ function createLoopExec(fn, delay) {
 		start
 	};
 }
-
 //#endregion
-export { createLoopExec };
+export { createLoopExec };

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

@@ -2,10 +2,20 @@ import { MaybeAccessor } from "../types/maybe.mjs";
 import { Accessor } from "solid-js";
 
 //#region src/solidjs/create-presence.d.ts
-type PresenceState = "opening" | "opened" | "closing" | "closed";
-declare function createPresence(params: {
-  show: Accessor<boolean>;
-  element: MaybeAccessor<HTMLElement | undefined>;
-}): readonly [Accessor<boolean>, Accessor<PresenceState>];
+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 { PresenceState, createPresence };
+export { MakePresenceOptions, PresencePhase, createPresence };

package/dist/solidjs/create-presence.mjs

@@ -1,29 +1,87 @@
+import { isDefined } from "../utils/is.mjs";
+import { runAtNextAnimationFrame } from "../utils/async.mjs";
 import { noop } from "../utils/constant.mjs";
-import { hasAnimation } from "../dom/animation.mjs";
-import { makeEventListener } from "./make-event-listener.mjs";
 import { access } from "./utils.mjs";
 import { createWatch } from "./create-watch.mjs";
-import { createMemo, createSignal } from "solid-js";
-
+import { createEffect, createMemo, createSignal, onCleanup, untrack } from "solid-js";
 //#region src/solidjs/create-presence.ts
-function createPresence(params) {
-	const [state, setState] = createSignal(access(params.show) ? "opened" : "closed");
-	createWatch(createMemo(() => access(params.show)), (show) => {
-		if (show) setState("opening");
-		else setState("closing");
-	}, { defer: true });
+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;
-	createWatch(state, (current) => {
+	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();
-		const el = access(params.element);
-		if (!el) return;
-		if (current.endsWith("ing")) if (hasAnimation(el)) clear = makeEventListener(el, "animationend", () => {
-			setState(current === "opening" ? "opened" : "closed");
+		if (currentPhase === "pre-enter") runAtNextAnimationFrame(() => {
+			setPhase("entering");
 		});
-		else setState(current === "opening" ? "opened" : "closed");
+		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 [createMemo(() => state() !== "closed"), state];
+	return {
+		...rest,
+		isMounted: () => isMounted() && isDefined(mountedItem()),
+		mountedItem
+	};
 }
-
 //#endregion
-export { createPresence };
+export { createPresence };

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

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

package/dist/solidjs/create-throttle.mjs

@@ -1,6 +1,5 @@
 import { access } from "./utils.mjs";
 import { onCleanup } from "solid-js";
-
 //#region src/solidjs/create-throttle.ts
 function createThrottle(callback, delay) {
 	let timeoutId;
@@ -16,6 +15,5 @@ function createThrottle(callback, delay) {
 	};
 	return run;
 }
-
 //#endregion
-export { createThrottle };
+export { createThrottle };

package/dist/solidjs/create-visibility-observer.d.mts

@@ -1,5 +1,4 @@
 import { MaybeNullableAccessor } from "../types/maybe.mjs";
-import "../types/index.mjs";
 import { Accessor } from "solid-js";
 
 //#region src/solidjs/create-visibility-observer.d.ts

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

@@ -2,7 +2,6 @@ import { isObject } from "../utils/is.mjs";
 import { access } from "./utils.mjs";
 import { createWatch } from "./create-watch.mjs";
 import { createSignal, onCleanup } from "solid-js";
-
 //#region src/solidjs/create-visibility-observer.ts
 function createVisibilityObserver(arg1, arg2) {
 	let target;
@@ -41,6 +40,5 @@ function createVisibilityObserver(arg1, arg2) {
 	if (target) return useVisibilityObserverFn(target);
 	return useVisibilityObserverFn;
 }
-
 //#endregion
-export { createVisibilityObserver };
+export { createVisibilityObserver };

package/dist/solidjs/create-watch.mjs

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

package/dist/solidjs/index.d.mts

@@ -6,7 +6,7 @@ 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 { PresenceState, createPresence } from "./create-presence.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";

package/dist/solidjs/make-event-listener.d.mts

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

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

@@ -2,7 +2,6 @@ import { isArray } from "../utils/is.mjs";
 import { clearArray } from "../utils/array.mjs";
 import { noop } from "../utils/constant.mjs";
 import { onCleanup } from "solid-js";
-
 //#region src/solidjs/make-event-listener.ts
 /** biome-ignore-all lint/suspicious/noExplicitAny: I need any */
 function makeEventListener(...args) {
@@ -30,6 +29,5 @@ function makeEventListener(...args) {
 	onCleanup(cleanup);
 	return cleanup;
 }
-
 //#endregion
-export { makeEventListener };
+export { makeEventListener };

package/dist/solidjs/utils.mjs

@@ -1,16 +1,21 @@
-import { isFn } from "../utils/is.mjs";
-
+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 (typeof handler === "function") handler(event);
-	if (Array.isArray(handler)) handler[0](handler[1], event);
+	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 };
+export { access, callMaybeCallableChild, runSolidEventHandler };

package/dist/utils/array.mjs

@@ -1,5 +1,4 @@
 import { isFn } from "./is.mjs";
-
 //#region src/utils/array.ts
 /**
 * Like a reduce but does not require an array.
@@ -52,15 +51,12 @@ function* range(startOrLength, end, valueOrMapper = (i) => i, step = 1) {
 * list(0, 3, obj)          // obj, obj, obj, obj
 * list(0, 6, i => i, 2)    // 0, 2, 4, 6
 */
-const list = (startOrLength, end, valueOrMapper, step) => {
-	return Array.from(range(startOrLength, end, valueOrMapper, step));
-};
+const list = (startOrLength, end, valueOrMapper, step) => Array.from(range(startOrLength, end, valueOrMapper, step));
 /**
 * set arr.length to 0
 */
 function clearArray(arr) {
 	arr.length = 0;
 }
-
 //#endregion
-export { clearArray, iterate, list, range };
+export { clearArray, iterate, list, range };

package/dist/utils/async.mjs

@@ -2,16 +2,11 @@
 /**
 * Async wait
 */
-const sleep = (milliseconds) => {
-	return new Promise((res) => setTimeout(res, milliseconds));
-};
-const runAtNextAnimationFrame = (cb) => {
-	return requestAnimationFrame(() => {
-		requestAnimationFrame(() => {
-			cb();
-		});
+const sleep = (milliseconds) => new Promise((res) => setTimeout(res, milliseconds));
+const runAtNextAnimationFrame = (cb) => requestAnimationFrame(() => {
+	requestAnimationFrame(() => {
+		cb();
 	});
-};
-
+});
 //#endregion
-export { runAtNextAnimationFrame, sleep };
+export { runAtNextAnimationFrame, sleep };

package/dist/utils/constant.mjs

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

package/dist/utils/is.mjs

@@ -1,14 +1,9 @@
 import { isServer } from "solid-js/web";
-
 //#region src/utils/is.ts
 /** biome-ignore-all lint/suspicious/noExplicitAny: need any */
-const isSymbol = (value) => {
-	return !!value && value.constructor === Symbol;
-};
+const isSymbol = (value) => !!value && value.constructor === Symbol;
 const isArray = Array.isArray;
-const isObject = (value) => {
-	return !!value && value.constructor === Object;
-};
+const isObject = (value) => !!value && value.constructor === Object;
 /**
 * Checks if the given value is primitive.
 *
@@ -17,21 +12,11 @@ const isObject = (value) => {
 * @param {*} value value to check
 * @returns {boolean} result
 */
-const isPrimitive = (value) => {
-	return value === void 0 || value === null || typeof value !== "object" && typeof value !== "function";
-};
-const isFn = (value) => {
-	return typeof value === "function";
-};
-const isString = (value) => {
-	return typeof value === "string" || value instanceof String;
-};
-const isInt = (value) => {
-	return isNumber(value) && value % 1 === 0;
-};
-const isFloat = (value) => {
-	return isNumber(value) && value % 1 !== 0;
-};
+const isPrimitive = (value) => value === void 0 || value === null || typeof value !== "object" && typeof value !== "function";
+const isFn = (value) => typeof value === "function";
+const isString = (value) => typeof value === "string" || value instanceof String;
+const isInt = (value) => isNumber(value) && value % 1 === 0;
+const isFloat = (value) => isNumber(value) && value % 1 !== 0;
 const isNumber = (value) => {
 	try {
 		return Number(value) === value;
@@ -39,9 +24,7 @@ const isNumber = (value) => {
 		return false;
 	}
 };
-const isDate = (value) => {
-	return Object.prototype.toString.call(value) === "[object Date]";
-};
+const isDate = (value) => Object.prototype.toString.call(value) === "[object Date]";
 /**
 * This is really a _best guess_ promise checking. You
 * should probably use Promise.resolve(value) to be 100%
@@ -73,6 +56,5 @@ function isUndefined(value) {
 function isDefined(value) {
 	return !isUndefined(value);
 }
-
 //#endregion
-export { isArray, isClient, isDate, isDefined, isEmpty, isFloat, isFn, isInt, isNumber, isObject, isPrimitive, isPromise, isString, isSymbol, isUndefined };
+export { isArray, isClient, isDate, isDefined, isEmpty, isFloat, isFn, isInt, isNumber, isObject, isPrimitive, isPromise, isString, isSymbol, isUndefined };

package/dist/utils/number.mjs

@@ -122,6 +122,5 @@ function inRange(x, minimum = 0, maximum = 1, inclusivity = "[]") {
 function toHex(x, pad = 2) {
 	return x.toString(16).padStart(pad, "0");
 }
-
 //#endregion
-export { clamp, inRange, max, min, toHex };
+export { clamp, inRange, max, min, toHex };

package/dist/utils/random.mjs

@@ -1,12 +1,9 @@
 import { iterate } from "./array.mjs";
-
 //#region src/utils/random.ts
 /**
 * Generates a random number between min and max
 */
-const random = (min, max) => {
-	return Math.floor(Math.random() * (max - min + 1) + min);
-};
+const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
 /**
 * Draw a random item from a list. Returns
 * null if the list is empty
@@ -16,18 +13,13 @@ const draw = (array) => {
 	if (max === 0) return null;
 	return array[random(0, max - 1)];
 };
-const shuffle = (array) => {
-	return array.map((a) => ({
-		rand: Math.random(),
-		value: a
-	})).sort((a, b) => a.rand - b.rand).map((a) => a.value);
-};
+const shuffle = (array) => array.map((a) => ({
+	rand: Math.random(),
+	value: a
+})).sort((a, b) => a.rand - b.rand).map((a) => a.value);
 const uid = (length, specials = "") => {
 	const characters = `ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789${specials}`;
-	return iterate(length, (acc) => {
-		return acc + characters.charAt(random(0, characters.length - 1));
-	}, "");
+	return iterate(length, (acc) => acc + characters.charAt(random(0, characters.length - 1)), "");
 };
-
 //#endregion
-export { draw, random, shuffle, uid };
+export { draw, random, shuffle, uid };

package/dist/utils/str.mjs

@@ -8,7 +8,7 @@
 const capitalize = (str) => {
 	if (!str || str.length === 0) return "";
 	const lower = str.toLowerCase();
-	return lower.substring(0, 1).toUpperCase() + lower.substring(1, lower.length);
+	return lower.slice(0, 1).toUpperCase() + lower.slice(1, lower.length);
 };
 const splitRegexp = /(?=[A-Z])|[.\-\s_]/;
 /**
@@ -22,9 +22,7 @@ const camel = (str) => {
 	const parts = str?.replace(/([A-Z])+/g, capitalize)?.split(splitRegexp).map((x) => x.toLowerCase()) ?? [];
 	if (parts.length === 0) return "";
 	if (parts.length === 1) return parts[0];
-	return parts.reduce((acc, part) => {
-		return `${acc}${part.charAt(0).toUpperCase()}${part.slice(1)}`;
-	});
+	return parts.reduce((acc, part) => `${acc}${part.charAt(0).toUpperCase()}${part.slice(1)}`);
 };
 const splitOnNumberRegexp = /([A-Za-z]{1}[0-9]{1})/;
 /**
@@ -40,9 +38,7 @@ const snake = (str, options) => {
 	const parts = str?.replace(/([A-Z])+/g, capitalize).split(splitRegexp).map((x) => x.toLowerCase()) ?? [];
 	if (parts.length === 0) return "";
 	if (parts.length === 1) return parts[0];
-	const result = parts.reduce((acc, part) => {
-		return `${acc}_${part.toLowerCase()}`;
-	});
+	const result = parts.reduce((acc, part) => `${acc}_${part.toLowerCase()}`);
 	return options?.splitOnNumber === false ? result : result.replace(splitOnNumberRegexp, (val) => `${val[0]}_${val[1]}`);
 };
 /**
@@ -56,9 +52,7 @@ const dash = (str) => {
 	const parts = str?.replace(/([A-Z])+/g, capitalize)?.split(splitRegexp).map((x) => x.toLowerCase()) ?? [];
 	if (parts.length === 0) return "";
 	if (parts.length === 1) return parts[0];
-	return parts.reduce((acc, part) => {
-		return `${acc}-${part.toLowerCase()}`;
-	});
+	return parts.reduce((acc, part) => `${acc}-${part.toLowerCase()}`);
 };
 const pascalSplitRegexp = /[.\-\s_]/;
 /**
@@ -91,11 +85,7 @@ const title = (str) => {
 * Ex. template('Hello, {{name}}', { name: 'ray' })
 * Ex. template('Hello, <name>', { name: 'ray' }, /<(.+?)>/g)
 */
-const template = (str, data, regex = /\{\{(.+?)\}\}/g) => {
-	return Array.from(str.matchAll(regex)).reduce((acc, match) => {
-		return acc.replace(match[0], data[match[1]]);
-	}, str);
-};
+const template = (str, data, regex = /\{\{(.+?)\}\}/g) => Array.from(str.matchAll(regex)).reduce((acc, match) => acc.replace(match[0], data[match[1]]), str);
 /**
 * Trims all prefix and suffix characters from the given
 * string. Like the builtin trim function but accepts
@@ -115,6 +105,5 @@ const trim = (str, charsToTrim = " ") => {
 	const regex = new RegExp(`^[${toTrim}]+|[${toTrim}]+$`, "g");
 	return str.replace(regex, "");
 };
-
 //#endregion
-export { camel, capitalize, dash, pascal, snake, template, title, trim };
+export { camel, capitalize, dash, pascal, snake, template, title, trim };

package/package.json

@@ -1,39 +1,48 @@
 {
-  "name": "solid-tiny-utils",
-  "version": "0.11.0",
-  "description": "A collection of tiny utilities for SolidJS applications",
-  "main": "./dist/index.mjs",
-  "type": "module",
-  "files": [
-    "dist"
-  ],
-  "sideEffects": false,
-  "peerDependencies": {
-    "solid-js": "^1.9.7"
-  },
   "devDependencies": {
-    "@biomejs/biome": "2.3.10",
+    "@biomejs/biome": "2.4.15",
     "@formkit/auto-animate": "^0.9.0",
-    "@solidjs/router": "^0.15.4",
+    "@solidjs/router": "^0.16.1",
     "@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.20260102.1",
+    "@typescript/native-preview": "7.0.0-dev.20260421.2",
     "@vitest/ui": "^4.0.16",
-    "bumpp": "^10.3.2",
+    "bumpp": "^11.1.0",
     "culori": "^4.0.2",
-    "jsdom": "^27.3.0",
-    "solid-tiny-context": "0.2.3",
-    "tsdown": "^0.18.4",
-    "ultracite": "7.0.5",
-    "unocss": "^66.3.3",
-    "vite": "^7.3.0",
-    "vite-plugin-solid": "^2.11.10",
-    "vite-plugin-solid-pages": "^0.3.5",
+    "jsdom": "^29.1.1",
+    "solid-tiny-context": "0.3.1",
+    "tsdown": "^0.22.0",
+    "ultracite": "7.7.0",
+    "unocss": "^66.7.0",
+    "vite": "^8.0.14",
+    "vite-plugin-solid": "^2.11.12",
+    "vite-plugin-solid-pages": "^0.4.3",
     "vitest": "^4.0.16"
   },
+  "name": "solid-tiny-utils",
+  "peerDependencies": {
+    "solid-js": "^1.9.7"
+  },
+  "type": "module",
+  "version": "0.12.1",
+  "description": "A collection of tiny utilities for SolidJS applications",
+  "author": "solid tiny",
+  "license": "MIT",
+  "homepage": "https://github.com/sxl-cc/solid-tiny-utils#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sxl-cc/solid-tiny-utils.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sxl-cc/solid-tiny-utils/issues"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
   "keywords": [
     "solidjs",
     "solid",
@@ -41,9 +50,6 @@
     "typescript",
     "utils"
   ],
-  "author": "",
-  "license": "MIT",
-  "module": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
   "exports": {
     ".": "./dist/index.mjs",
@@ -52,14 +58,14 @@
   "scripts": {
     "build": "tsdown",
     "dev": "vite -c ./playground/vite.config.ts",
-    "test": "vitest --run",
+    "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",
-    "type-check": "tsgo --noEmit --skipLibCheck",
-    "bump": "pnpm type-check && pnpm test && pnpm bumpp --no-push",
-    "prepublish": "pnpm build"
+    "tc": "tsgo --noEmit --skipLibCheck",
+    "bump": "pnpm bumpp --no-push",
+    "prepublish": "pnpm build",
+    "check": "ultracite check",
+    "check:error": "ultracite check --diagnostic-level error",
+    "fix": "ultracite fix"
   }
 }