svelora 3.0.4 → 3.0.6

package/dist/Button/Button.svelte

@@ -26,6 +26,7 @@ const leadingIconName = $derived(spinLeading ? loadingIcon : leadingIcon || (!tr
 const trailingIconName = $derived(spinTrailing ? loadingIcon : trailingIcon || (trailing ? icon : undefined));
 const resolvedColor = $derived(active && activeColor ? activeColor : color);
 const resolvedVariant = $derived(active && activeVariant ? activeVariant : variant);
+const isLink = $derived(!!href);
 const classes = $derived.by(() => {
 	const slots = buttonVariants({
 		variant: resolvedVariant,
@@ -72,38 +73,69 @@ function handleClick(e) {
 }
 </script>
 
-<Link
-    {...restProps}
-    bind:ref
-    {href}
-    {type}
-    {external}
-    {active}
-    {exact}
-    {activeClass}
-    {inactiveClass}
-    raw
-    disabled={disabled || isLoading}
-    class={classes.base}
-    onclick={handleClick}
->
-    {#if leadingSlot}
-        {@render leadingSlot()}
-    {:else if isLeading && leadingIconName}
-        <Icon name={leadingIconName} class={classes.leadingIcon} />
-    {:else if avatar}
-        <Avatar {...avatar} size={classes.leadingAvatarSize} class={classes.leadingAvatar} />
-    {/if}
+{#if isLink}
+    <Link
+        {...restProps}
+        bind:ref
+        {href}
+        {type}
+        {external}
+        {active}
+        {exact}
+        {activeClass}
+        {inactiveClass}
+        raw
+        disabled={disabled || isLoading}
+        class={classes.base}
+        onclick={handleClick}
+    >
+        {#if leadingSlot}
+            {@render leadingSlot()}
+        {:else if isLeading && leadingIconName}
+            <Icon name={leadingIconName} class={classes.leadingIcon} />
+        {:else if avatar}
+            <Avatar {...avatar} size={classes.leadingAvatarSize} class={classes.leadingAvatar} />
+        {/if}
 
-    {#if label}
-        <span class={classes.label}>{label}</span>
-    {:else if children}
-        <span class={classes.label}>{@render children()}</span>
-    {/if}
+        {#if label}
+            <span class={classes.label}>{label}</span>
+        {:else if children}
+            <span class={classes.label}>{@render children()}</span>
+        {/if}
 
-    {#if trailingSlot}
-        {@render trailingSlot()}
-    {:else if isTrailing && trailingIconName}
-        <Icon name={trailingIconName} class={classes.trailingIcon} />
-    {/if}
-</Link>
+        {#if trailingSlot}
+            {@render trailingSlot()}
+        {:else if isTrailing && trailingIconName}
+            <Icon name={trailingIconName} class={classes.trailingIcon} />
+        {/if}
+    </Link>
+{:else}
+    <button
+        {...restProps}
+        bind:this={ref}
+        type={type ?? 'button'}
+        disabled={disabled || isLoading}
+        class={classes.base}
+        onclick={handleClick}
+    >
+        {#if leadingSlot}
+            {@render leadingSlot()}
+        {:else if isLeading && leadingIconName}
+            <Icon name={leadingIconName} class={classes.leadingIcon} />
+        {:else if avatar}
+            <Avatar {...avatar} size={classes.leadingAvatarSize} class={classes.leadingAvatar} />
+        {/if}
+
+        {#if label}
+            <span class={classes.label}>{label}</span>
+        {:else if children}
+            <span class={classes.label}>{@render children()}</span>
+        {/if}
+
+        {#if trailingSlot}
+            {@render trailingSlot()}
+        {:else if isTrailing && trailingIconName}
+            <Icon name={trailingIconName} class={classes.trailingIcon} />
+        {/if}
+    </button>
+{/if}

package/dist/Fonts/fonts.js

@@ -70,7 +70,9 @@ export function buildGoogleFontsUrl(fonts, display = 'swap') {
         .filter((family, index, source) => family.length > 0 && source.indexOf(family) === index);
     if (families.length === 0)
         return '';
-    const familyParams = families.map((f) => `family=${f}`).join('&');
+    const familyParams = families
+        .map((f) => `family=${encodeURIComponent(f).replaceAll('%2B', '+')}`)
+        .join('&');
     return `https://fonts.googleapis.com/css2?${familyParams}&display=${display}`;
 }
 export function buildFontFamily(font) {

package/dist/Link/Link.context-harness.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">import { setContext } from "svelte";
+import Link from "./Link.svelte";
+import { LINK_LOCATION_CONTEXT_KEY } from "./location-context.js";
+let { url } = $props();
+setContext(LINK_LOCATION_CONTEXT_KEY, { currentUrl: () => url });
+</script>
+
+<Link href="/from-context" />

package/dist/Link/Link.context-harness.svelte.d.ts

@@ -0,0 +1,7 @@
+import Link from './Link.svelte';
+type $$ComponentProps = {
+    url: URL;
+};
+declare const Link: import("svelte").Component<$$ComponentProps, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/Link/Link.svelte

@@ -1,5 +1,6 @@
-<script lang="ts" module>const navigationEvent = "svelora:navigation";
-let isHistoryPatched = false;
+<script lang="ts" module>const locationSubscribers = new Set();
+let stopLocationTracking;
+let lastKnownHref = "";
 function parseUrl(url, baseUrl) {
 	try {
 		const parsed = new URL(url, baseUrl.origin);
@@ -35,60 +36,86 @@ function isPathnameMatch(linkPath, currentPath, exactMatch) {
 	const current = currentPath.replace(/\/$/, "") || "/";
 	return link === "/" ? current === "/" : current === link || current.startsWith(`${link}/`);
 }
-function dispatchNavigationEvent() {
+function dispatchLocationChange() {
 	if (typeof window === "undefined") {
 		return;
 	}
-	window.dispatchEvent(new Event(navigationEvent));
+	for (const callback of locationSubscribers) {
+		callback();
+	}
 }
-function patchHistoryMethod(method) {
-	const historyMethod = window.history[method].bind(window.history);
-	Object.defineProperty(window.history, method, {
-		configurable: true,
-		value: (...args) => {
-			historyMethod(...args);
-			dispatchNavigationEvent();
-		}
-	});
+function syncLocation(force = false) {
+	if (typeof window === "undefined") {
+		return;
+	}
+	const href = window.location.href;
+	if (!force && href === lastKnownHref) {
+		return;
+	}
+	lastKnownHref = href;
+	dispatchLocationChange();
 }
-function ensureNavigationEvents() {
-	if (typeof window === "undefined" || isHistoryPatched) {
+function scheduleLocationSync() {
+	if (typeof window === "undefined") {
+		return;
+	}
+	queueMicrotask(() => syncLocation());
+	window.setTimeout(() => syncLocation(), 0);
+	window.requestAnimationFrame(() => syncLocation());
+}
+function ensureLocationTracking() {
+	if (typeof window === "undefined" || stopLocationTracking) {
 		return;
 	}
-	isHistoryPatched = true;
-	patchHistoryMethod("pushState");
-	patchHistoryMethod("replaceState");
+	lastKnownHref = window.location.href;
+	const handleImmediateLocationChange = () => syncLocation();
+	const handleDeferredLocationChange = () => scheduleLocationSync();
+	const intervalId = window.setInterval(() => syncLocation(), 125);
+	window.addEventListener("popstate", handleImmediateLocationChange);
+	window.addEventListener("hashchange", handleImmediateLocationChange);
+	document.addEventListener("click", handleDeferredLocationChange, true);
+	stopLocationTracking = () => {
+		window.clearInterval(intervalId);
+		window.removeEventListener("popstate", handleImmediateLocationChange);
+		window.removeEventListener("hashchange", handleImmediateLocationChange);
+		document.removeEventListener("click", handleDeferredLocationChange, true);
+		stopLocationTracking = undefined;
+	};
 }
 function subscribeToLocation(callback) {
 	if (typeof window === "undefined") {
 		return () => undefined;
 	}
-	ensureNavigationEvents();
-	const handleLocationChange = () => callback();
-	handleLocationChange();
-	window.addEventListener("popstate", handleLocationChange);
-	window.addEventListener("hashchange", handleLocationChange);
-	window.addEventListener(navigationEvent, handleLocationChange);
+	ensureLocationTracking();
+	locationSubscribers.add(callback);
+	callback();
 	return () => {
-		window.removeEventListener("popstate", handleLocationChange);
-		window.removeEventListener("hashchange", handleLocationChange);
-		window.removeEventListener(navigationEvent, handleLocationChange);
+		locationSubscribers.delete(callback);
+		if (locationSubscribers.size === 0) {
+			stopLocationTracking?.();
+		}
 	};
 }
 export {};
 </script>
 
-<script lang="ts">import { onMount } from "svelte";
+<script lang="ts">import { getContext, onMount } from "svelte";
 import { twMerge } from "tailwind-merge";
 import { getComponentConfig } from "../config.js";
+import { LINK_LOCATION_CONTEXT_KEY } from "./location-context.js";
 import { linkDefaults, linkVariants } from "./link.variants.js";
 const config = getComponentConfig("link", linkDefaults);
 let { ref = $bindable(null), href, type, active, exact = false, exactQuery = false, exactHash = false, activeClass, inactiveClass, disabled = false, raw = false, external, children, class: className, ui, target, rel, onclick, ...restProps } = $props();
 const isLink = $derived(!!href);
-let currentUrl = $state(undefined);
+const locationContext = getContext(LINK_LOCATION_CONTEXT_KEY);
+let observedUrl = $state(undefined);
+const currentUrl = $derived.by(() => locationContext?.currentUrl() ?? observedUrl);
 onMount(() => {
+	if (locationContext) {
+		return;
+	}
 	return subscribeToLocation(() => {
-		currentUrl = new URL(window.location.href);
+		observedUrl = new URL(window.location.href);
 	});
 });
 const isExternal = $derived(isLink && (external ?? (href.startsWith("http://") || href.startsWith("https://") || href.startsWith("//"))));

package/dist/Link/index.d.ts

@@ -1,2 +1,4 @@
 export { default as Link } from './Link.svelte';
+export { LINK_LOCATION_CONTEXT_KEY } from './location-context.js';
+export type { LinkLocationContext } from './location-context.js';
 export type { LinkProps } from './link.types.js';

package/dist/Link/index.js

@@ -1 +1,2 @@
 export { default as Link } from './Link.svelte';
+export { LINK_LOCATION_CONTEXT_KEY } from './location-context.js';

package/dist/Link/location-context.d.ts

@@ -0,0 +1,4 @@
+export declare const LINK_LOCATION_CONTEXT_KEY: unique symbol;
+export interface LinkLocationContext {
+    currentUrl: () => URL;
+}

package/dist/Link/location-context.js

@@ -0,0 +1 @@
+export const LINK_LOCATION_CONTEXT_KEY = Symbol('svelora:link-location');

package/dist/SelectMenu/SelectMenu.svelte

@@ -42,13 +42,33 @@ const selectedItems = $derived(selectedValues.map((v) => itemsMap.get(v)).filter
 const hasSelection = $derived(selectedValues.length > 0);
 const singleSelectedItem = $derived(multiple ? undefined : selectedItems[0]);
 const displayLabel = $derived(multiple ? selectedItems.map((i) => i.label ?? i.value).join(separator) : singleSelectedItem?.label ?? singleSelectedItem?.value ?? "");
+let isAlive = true;
+$effect(() => {
+	return () => {
+		isAlive = false;
+	};
+});
+function getSelectedValues() {
+	if (!multiple) {
+		return typeof value === "string" && value !== "" ? [value] : [];
+	}
+	return Array.isArray(value) ? value : [];
+}
+function getCombinedItems() {
+	const itemList = items;
+	const propValues = new Set(itemList.filter((i) => !("type" in i)).map((i) => i.value));
+	const extras = createdItems.filter((c) => !propValues.has(c.value));
+	return [...itemList, ...extras];
+}
 function removeValue(val) {
 	if (!multiple) return;
-	value = selectedValues.filter((v) => v !== val);
+	if (!isAlive) return;
+	value = getSelectedValues().filter((v) => v !== val);
 	emit.onChange();
 }
 function clearSelection() {
 	if (!multiple) return;
+	if (!isAlive) return;
 	value = [];
 	emit.onChange();
 }
@@ -97,29 +117,41 @@ const showCreateItem = $derived.by(() => {
 	return !exactMatchExists;
 });
 const resolvedCreateLabel = $derived(typeof createItemLabel === "function" ? createItemLabel(trimmedSearch) : createItemLabel);
-function findItemByCaseInsensitive(query) {
+function hasExactMatch(query, combined) {
 	const q = query.toLowerCase();
-	for (const it of itemsMap.values()) {
-		if (it.value.toLowerCase() === q || (it.label ?? it.value).toLowerCase() === q) {
-			return it;
-		}
+	for (const it of combined) {
+		if ("type" in it) continue;
+		if (it.value.toLowerCase() === q || (it.label ?? it.value).toLowerCase() === q) return true;
+	}
+	return false;
+}
+function findItemByCaseInsensitive(query, combined) {
+	const q = query.toLowerCase();
+	for (const it of combined) {
+		if ("type" in it) continue;
+		if (it.value.toLowerCase() === q || (it.label ?? it.value).toLowerCase() === q) return it;
 	}
 	return undefined;
 }
 function selectValue(val) {
+	if (!isAlive) return;
+	const current = getSelectedValues();
 	if (multiple) {
-		if (!selectedValues.includes(val)) {
-			value = [...selectedValues, val];
-		}
-	} else {
-		value = val;
+		if (!current.includes(val)) value = [...current, val];
+		return;
 	}
+	value = val;
 }
 function handleCreate() {
-	if (!showCreateItem) return;
-	const newValue = trimmedSearch;
+	if (!isAlive) return;
+	if (!createItem) return;
+	const newValue = searchTerm.trim();
 	if (!newValue) return;
-	const existing = findItemByCaseInsensitive(newValue);
+	const combined = getCombinedItems();
+	const mode = createItem === true ? "lazy" : createItem;
+	const shouldShow = mode === "always" ? true : !hasExactMatch(newValue, combined);
+	if (!shouldShow) return;
+	const existing = findItemByCaseInsensitive(newValue, combined);
 	if (existing) {
 		selectValue(existing.value);
 	} else {

package/dist/Stepper/Stepper.svelte

@@ -55,28 +55,31 @@ function handleKeydown(e, index) {
 }
 const apiInstance = {
 	next() {
-		if (activeIndex >= items.length - 1) return;
-		const target = items[activeIndex + 1];
+		const current = untrack(() => activeIndex);
+		if (current >= items.length - 1) return;
+		const target = items[current + 1];
 		if (!target) return;
-		setValue(getItemValue(target, activeIndex + 1));
+		setValue(getItemValue(target, current + 1));
 	},
 	prev() {
-		if (activeIndex <= 0) return;
-		const target = items[activeIndex - 1];
+		const current = untrack(() => activeIndex);
+		if (current <= 0) return;
+		const target = items[current - 1];
 		if (!target) return;
-		setValue(getItemValue(target, activeIndex - 1));
+		setValue(getItemValue(target, current - 1));
 	},
 	goTo(next) {
 		setValue(next);
 	},
 	get hasNext() {
-		return activeIndex >= 0 && activeIndex < items.length - 1;
+		const current = untrack(() => activeIndex);
+		return current >= 0 && current < items.length - 1;
 	},
 	get hasPrev() {
-		return activeIndex > 0;
+		return untrack(() => activeIndex) > 0;
 	},
 	get activeIndex() {
-		return activeIndex;
+		return untrack(() => activeIndex);
 	}
 };
 api = apiInstance;

package/dist/docs/navigation.js

@@ -478,6 +478,60 @@ export const docsHookItems = [
         href: '/docs/hooks/use-debounce',
         legacyHref: '/use-debounce',
         icon: 'lucide:timer'
+    },
+    {
+        title: 'useDebouncedState',
+        href: '/docs/hooks/use-debounced-state',
+        legacyHref: '/use-debounced-state',
+        icon: 'lucide:clock-3'
+    },
+    {
+        title: 'useEventListener',
+        href: '/docs/hooks/use-event-listener',
+        legacyHref: '/use-event-listener',
+        icon: 'lucide:radio'
+    },
+    {
+        title: 'useResizeObserver / useElementSize',
+        href: '/docs/hooks/use-resize-observer',
+        legacyHref: '/use-resize-observer',
+        icon: 'lucide:scaling'
+    },
+    {
+        title: 'useIntersectionObserver',
+        href: '/docs/hooks/use-intersection-observer',
+        legacyHref: '/use-intersection-observer',
+        icon: 'lucide:scan-search'
+    },
+    {
+        title: 'useScrollLock',
+        href: '/docs/hooks/use-scroll-lock',
+        legacyHref: '/use-scroll-lock',
+        icon: 'lucide:lock'
+    },
+    {
+        title: 'useFocusTrap',
+        href: '/docs/hooks/use-focus-trap',
+        legacyHref: '/use-focus-trap',
+        icon: 'lucide:focus'
+    },
+    {
+        title: 'useLocalStorage',
+        href: '/docs/hooks/use-local-storage',
+        legacyHref: '/use-local-storage',
+        icon: 'lucide:hard-drive'
+    },
+    {
+        title: 'useThrottle',
+        href: '/docs/hooks/use-throttle',
+        legacyHref: '/use-throttle',
+        icon: 'lucide:gauge'
+    },
+    {
+        title: 'useTimeout / useInterval',
+        href: '/docs/hooks/use-timers',
+        legacyHref: '/use-timers',
+        icon: 'lucide:timer-reset'
     }
 ];
 export const docsTopNav = [

package/dist/hooks/index.d.ts

@@ -4,11 +4,25 @@ export type { UseClipboardOptions } from './useClipboard.svelte.js';
 export { useClipboard } from './useClipboard.svelte.js';
 export type { UseDebounceOptions } from './useDebounce.svelte.js';
 export { useDebounce } from './useDebounce.svelte.js';
+export { useDebouncedState } from './useDebouncedState.svelte.js';
 export type { UseEscapeKeydownOptions } from './useEscapeKeydown.svelte.js';
 export { useEscapeKeydown } from './useEscapeKeydown.svelte.js';
+export { useEventListener } from './useEventListener.svelte.js';
+export type { UseFocusTrapOptions } from './useFocusTrap.svelte.js';
+export { useFocusTrap } from './useFocusTrap.svelte.js';
 export type { FormFieldContext } from './useFormField.svelte.js';
 export { FORM_FIELD_CONTEXT_KEY, useFormField, useFormFieldEmit } from './useFormField.svelte.js';
 export type { UseInfiniteScrollOptions } from './useInfiniteScroll.svelte.js';
 export { useInfiniteScroll } from './useInfiniteScroll.svelte.js';
+export type { UseIntersectionObserverOptions } from './useIntersectionObserver.svelte.js';
+export { useIntersectionObserver } from './useIntersectionObserver.svelte.js';
+export type { UseLocalStorageOptions, UseLocalStorageReturn, UseLocalStorageSerializer } from './useLocalStorage.svelte.js';
+export { useLocalStorage } from './useLocalStorage.svelte.js';
 export type { UseMediaQueryOptions } from './useMediaQuery.svelte.js';
 export { useMediaQuery } from './useMediaQuery.svelte.js';
+export { useElementSize, useResizeObserver } from './useResizeObserver.svelte.js';
+export { useScrollLock } from './useScrollLock.svelte.js';
+export type { UseThrottleOptions } from './useThrottle.svelte.js';
+export { useThrottle } from './useThrottle.svelte.js';
+export type { UseIntervalOptions } from './useTimers.svelte.js';
+export { useInterval, useTimeout } from './useTimers.svelte.js';

package/dist/hooks/index.js

@@ -1,7 +1,16 @@
 export { useClickOutside } from './useClickOutside.svelte.js';
 export { useClipboard } from './useClipboard.svelte.js';
 export { useDebounce } from './useDebounce.svelte.js';
+export { useDebouncedState } from './useDebouncedState.svelte.js';
 export { useEscapeKeydown } from './useEscapeKeydown.svelte.js';
+export { useEventListener } from './useEventListener.svelte.js';
+export { useFocusTrap } from './useFocusTrap.svelte.js';
 export { FORM_FIELD_CONTEXT_KEY, useFormField, useFormFieldEmit } from './useFormField.svelte.js';
 export { useInfiniteScroll } from './useInfiniteScroll.svelte.js';
+export { useIntersectionObserver } from './useIntersectionObserver.svelte.js';
+export { useLocalStorage } from './useLocalStorage.svelte.js';
 export { useMediaQuery } from './useMediaQuery.svelte.js';
+export { useElementSize, useResizeObserver } from './useResizeObserver.svelte.js';
+export { useScrollLock } from './useScrollLock.svelte.js';
+export { useThrottle } from './useThrottle.svelte.js';
+export { useInterval, useTimeout } from './useTimers.svelte.js';

package/dist/hooks/useDebouncedState.svelte.d.ts

@@ -0,0 +1,30 @@
+interface UseDebouncedStateReturn<T> {
+    /** The immediate value — read it or write it (bindable). */
+    current: T;
+    /** The debounced value — settles `delay` ms after the last write. */
+    readonly debounced: T;
+    /** Set both `current` and `debounced` now, cancelling any pending update. */
+    setImmediate(value: T): void;
+}
+/**
+ * Reactive state whose `debounced` mirror lags behind `current` by `delay` ms.
+ *
+ * Combines a value with debouncing: write `current` (e.g. bound to an input)
+ * and derive from `debounced` — no manual two-state + run wiring. Built on
+ * `useDebounce`, so the pending timer is cleared on teardown. Use `setImmediate`
+ * to skip the delay (e.g. on reset).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useDebouncedState } from 'svelora'
+ *
+ *   const search = useDebouncedState('', 200)
+ *   const results = $derived(filter(items, search.debounced))
+ * </script>
+ *
+ * <input bind:value={search.current} />
+ * ```
+ */
+export declare function useDebouncedState<T>(initial: T, delay?: number): UseDebouncedStateReturn<T>;
+export {};

package/dist/hooks/useDebouncedState.svelte.js

@@ -0,0 +1,45 @@
+import { useDebounce } from './useDebounce.svelte.js';
+/**
+ * Reactive state whose `debounced` mirror lags behind `current` by `delay` ms.
+ *
+ * Combines a value with debouncing: write `current` (e.g. bound to an input)
+ * and derive from `debounced` — no manual two-state + run wiring. Built on
+ * `useDebounce`, so the pending timer is cleared on teardown. Use `setImmediate`
+ * to skip the delay (e.g. on reset).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useDebouncedState } from 'svelora'
+ *
+ *   const search = useDebouncedState('', 200)
+ *   const results = $derived(filter(items, search.debounced))
+ * </script>
+ *
+ * <input bind:value={search.current} />
+ * ```
+ */
+export function useDebouncedState(initial, delay = 300) {
+    let current = $state(initial);
+    let debounced = $state(initial);
+    const debounce = useDebounce({ delay });
+    return {
+        get current() {
+            return current;
+        },
+        set current(value) {
+            current = value;
+            debounce.run(() => {
+                debounced = value;
+            });
+        },
+        get debounced() {
+            return debounced;
+        },
+        setImmediate(value) {
+            debounce.cancel();
+            current = value;
+            debounced = value;
+        }
+    };
+}

package/dist/hooks/useEventListener.svelte.d.ts

@@ -0,0 +1,30 @@
+type MaybeGetter<T> = T | (() => T);
+/**
+ * Attach event listener(s) to a target with automatic cleanup.
+ *
+ * Binds inside an `$effect` and removes the listener(s) on teardown. The target
+ * may be a value or a getter; when it is a getter that reads reactive state, the
+ * listener re-binds as the target changes. SSR-safe: a nullish target is a no-op.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useEventListener } from 'svelora'
+ *
+ *   let el = $state<HTMLElement>()
+ *
+ *   // Window target (static)
+ *   useEventListener(window, 'resize', () => console.log('resized'))
+ *
+ *   // Element target (reactive getter) + multiple event types
+ *   useEventListener(() => el, ['pointerenter', 'focus'], () => console.log('active'))
+ * </script>
+ *
+ * <div bind:this={el}>hover or focus me</div>
+ * ```
+ */
+export declare function useEventListener<K extends keyof WindowEventMap>(target: MaybeGetter<Window | null | undefined>, type: K | K[], handler: (this: Window, event: WindowEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+export declare function useEventListener<K extends keyof DocumentEventMap>(target: MaybeGetter<Document | null | undefined>, type: K | K[], handler: (this: Document, event: DocumentEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+export declare function useEventListener<K extends keyof HTMLElementEventMap>(target: MaybeGetter<HTMLElement | null | undefined>, type: K | K[], handler: (this: HTMLElement, event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+export declare function useEventListener(target: MaybeGetter<EventTarget | null | undefined>, type: string | string[], handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+export {};

package/dist/hooks/useEventListener.svelte.js

@@ -0,0 +1,16 @@
+import { toGetter } from './utils.js';
+export function useEventListener(target, type, handler, options) {
+    const resolveTarget = toGetter(target);
+    const types = Array.isArray(type) ? type : [type];
+    $effect(() => {
+        const el = resolveTarget();
+        if (!el)
+            return;
+        for (const t of types)
+            el.addEventListener(t, handler, options);
+        return () => {
+            for (const t of types)
+                el.removeEventListener(t, handler, options);
+        };
+    });
+}