seitu 0.2.1 → 0.2.3

package/dist/react/hooks.d.ts

@@ -76,16 +76,16 @@ export interface UseSubscriptionOptions<S extends Subscribable<any> & Readable<a
  * 'use client'
  *
  * import * as React from 'react'
- * import { scrollState } from 'seitu/web'
+ * import { createScrollState } from 'seitu/web'
  * import { useSubscription } from 'seitu/react'
  *
  * export default function Page() {
  *   const ref = React.useRef<HTMLDivElement>(null)
- *   const state = useSubscription(() => scrollState({ element: () => ref.current, direction: 'vertical' }))
+ *   const state = useSubscription(() => createScrollState({ element: () => ref.current, direction: 'vertical' }))
  *
  *   return (
  *     <div ref={ref}>
- *       {String(state.top.value)}
+ *       {String(state.top.reached)}
  *     </div>
  *   )
  * }

package/dist/web/media-query.d.ts

@@ -33,10 +33,10 @@ export interface MediaQueryOptions<T extends string> {
  *
  * @example Vanilla
  * ```ts twoslash title="media-query.ts"
- * import { mediaQuery } from 'seitu/web'
+ * import { createMediaQuery } from 'seitu/web'
  * import { useSubscription } from 'seitu/react'
  *
- * const isDesktop = mediaQuery({ query: '(min-width: 768px)' })
+ * const isDesktop = createMediaQuery({ query: '(min-width: 768px)' })
  *
  * // Usage with subscribe
  * isDesktop.subscribe(matches => {
@@ -49,10 +49,10 @@ export interface MediaQueryOptions<T extends string> {
  *
  * @example React
  * ```tsx twoslash title="page.tsx"
- * import { mediaQuery } from 'seitu/web'
+ * import { createMediaQuery } from 'seitu/web'
  * import { useSubscription } from 'seitu/react'
  *
- * const isDesktop = mediaQuery({ query: '(min-width: 768px)' })
+ * const isDesktop = createMediaQuery({ query: '(min-width: 768px)' })
  *
  * // Usage with some function component
  * function Layout() {
@@ -63,15 +63,15 @@ export interface MediaQueryOptions<T extends string> {
  *
  * @example Errors
  * ```tsx twoslash
- * import { mediaQuery } from 'seitu/web'
+ * import { createMediaQuery } from 'seitu/web'
  * import { useSubscription } from 'seitu/react'
  *
  * // @errors: 2362 2322 1109
- * mediaQuery({ query: '(min-width: ' })
+ * createMediaQuery({ query: '(min-width: ' })
  *
  * // @errors: 2362 2322 2820
- * mediaQuery({ query: '(min-width: 768' })
+ * createMediaQuery({ query: '(min-width: 768' })
  * ```
  */
-export declare function mediaQuery<T extends string>(options: MediaQueryOptions<T>): MediaQuery;
+export declare function createMediaQuery<T extends string>(options: MediaQueryOptions<T>): MediaQuery;
 export {};

package/dist/web/scroll-state.d.ts

@@ -1,7 +1,7 @@
 import type { Readable, Subscribable } from '../core/index';
 export type ScrollDirection = 'vertical' | 'horizontal' | 'both';
 export interface ScrollStateEdge {
-    value: boolean;
+    reached: boolean;
     remaining: number;
 }
 export interface ScrollStateValue {
@@ -10,6 +10,12 @@ export interface ScrollStateValue {
     left: ScrollStateEdge;
     right: ScrollStateEdge;
 }
+export interface ScrollStateThreshold {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+}
 export interface ScrollState extends Subscribable<ScrollStateValue>, Readable<ScrollStateValue> {
 }
 export interface ScrollStateOptions {
@@ -25,28 +31,30 @@ export interface ScrollStateOptions {
      */
     direction?: ScrollDirection;
     /**
-     * Number of pixels from each edge before it counts as "scrolled".
+     * Number of pixels from each edge before it counts as "reached".
+     * Pass a single number to apply the same threshold to all edges,
+     * or an object with per-side values.
      * @default 0
      */
-    threshold?: number;
+    threshold?: number | ScrollStateThreshold;
 }
 /**
  * Creates a reactive handle that tracks scroll position of an element relative to each edge.
  *
  * @example Vanilla
  * ```ts twoslash
- * import { scrollState } from 'seitu/web'
+ * import { createScrollState } from 'seitu/web'
  *
- * const scroll = scrollState({
+ * const scroll = createScrollState({
  *   element: document.querySelector('.container'),
  *   direction: 'vertical',
  *   threshold: 10,
  * })
  *
  * scroll.subscribe(state => {
- *   console.log(state.top.value)
+ *   console.log(state.top.reached)
  *   console.log(state.top.remaining)
- *   console.log(state.bottom.value)
+ *   console.log(state.bottom.reached)
  *   console.log(state.bottom.remaining)
  * })
  *
@@ -59,19 +67,19 @@ export interface ScrollStateOptions {
  * 'use client'
  *
  * import * as React from 'react'
- * import { scrollState } from 'seitu/web'
+ * import { createScrollState } from 'seitu/web'
  * import { useSubscription } from 'seitu/react'
  *
  * function Layout() {
  *   const ref = React.useRef<HTMLDivElement>(null)
- *   const state = useSubscription(() => scrollState({
+ *   const state = useSubscription(() => createScrollState({
  *     element: () => ref.current,
  *     threshold: 10,
  *   }))
  *
  *   return (
  *     <div ref={ref}>
- *       {state.top.value ? 'at the top' : 'scrolled'}
+ *       {state.top.reached ? 'at the top' : 'scrolled'}
  *     </div>
  *   )
  * }
@@ -82,22 +90,22 @@ export interface ScrollStateOptions {
  * 'use client'
  *
  * import * as React from 'react'
- * import { scrollState } from 'seitu/web'
+ * import { createScrollState } from 'seitu/web'
  * import { useSubscription } from 'seitu/react'
  *
  * function Layout() {
  *   const [ref, setRef] = React.useState<HTMLDivElement | null>(null)
- *   const state = useSubscription(() => scrollState({
+ *   const state = useSubscription(() => createScrollState({
  *     element: ref,
  *     threshold: 10,
  *   }), { deps: [ref] })
  *
  *   return (
  *     <div ref={setRef}>
- *       {state.top.value ? 'at the top' : 'scrolled'}
+ *       {state.top.reached ? 'at the top' : 'scrolled'}
  *     </div>
  *   )
  * }
  * ```
  */
-export declare function scrollState(options: ScrollStateOptions): ScrollState;
+export declare function createScrollState(options: ScrollStateOptions): ScrollState;

package/dist/web.js

@@ -110,13 +110,23 @@ function s(e) {
 	};
 }
 var c = {
-	value: !1,
+	reached: !1,
 	remaining: 0
 };
 function l(e) {
-	let { direction: t = "both", threshold: r = 0 } = e, { subscribe: i, notify: a } = n(), o = () => typeof e.element == "function" ? e.element() : e.element, s = () => {
-		let e = o(), n = (e, t) => ({
-			value: e,
+	let { direction: t = "both", threshold: r = 0 } = e, { subscribe: i, notify: a } = n(), o = typeof r == "number" ? {
+		top: r,
+		bottom: r,
+		left: r,
+		right: r
+	} : {
+		top: r.top ?? 0,
+		bottom: r.bottom ?? 0,
+		left: r.left ?? 0,
+		right: r.right ?? 0
+	}, s = () => typeof e.element == "function" ? e.element() : e.element, l = () => {
+		let e = s(), n = (e, t) => ({
+			reached: e,
 			remaining: Math.max(0, t)
 		});
 		if (!e) return {
@@ -125,20 +135,20 @@ function l(e) {
 			left: c,
 			right: c
 		};
-		let i = e.scrollTop, a = e.scrollHeight - e.scrollTop - e.clientHeight, s = e.scrollLeft, l = e.scrollWidth - e.scrollLeft - e.clientWidth;
+		let r = e.scrollTop, i = e.scrollHeight - e.scrollTop - e.clientHeight, a = e.scrollLeft, l = e.scrollWidth - e.scrollLeft - e.clientWidth;
 		return {
-			top: t === "horizontal" ? c : n(i <= r, i),
-			bottom: t === "horizontal" ? c : n(a <= r, a),
-			left: t === "vertical" ? c : n(s <= r, s),
-			right: t === "vertical" ? c : n(l <= r, l)
+			top: t === "horizontal" ? c : n(r <= o.top, r),
+			bottom: t === "horizontal" ? c : n(i <= o.bottom, i),
+			left: t === "vertical" ? c : n(a <= o.left, a),
+			right: t === "vertical" ? c : n(l <= o.right, l)
 		};
 	};
 	return {
-		get: s,
+		get: l,
 		subscribe: (e) => {
-			let t = o();
-			if (!t) return e(s()), () => {};
-			let n = i(() => e(s())), r = () => e(s());
+			let t = s();
+			if (!t) return e(l()), () => {};
+			let n = i(() => e(l())), r = () => e(l());
 			return t.addEventListener("scroll", r, { passive: !0 }), () => {
 				n(), t.removeEventListener("scroll", r);
 			};
@@ -161,4 +171,4 @@ function d(e) {
 		kind: "sessionStorage"
 	});
 }
-export { i as createLocalStorage, o as createLocalStorageValue, u as createSessionStorage, d as createSessionStorageValue, s as mediaQuery, l as scrollState };
+export { i as createLocalStorage, o as createLocalStorageValue, s as createMediaQuery, l as createScrollState, u as createSessionStorage, d as createSessionStorageValue };

package/package.json

@@ -2,7 +2,7 @@
   "name": "seitu",
   "displayName": "Seitu",
   "type": "module",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "private": false,
   "author": "Valerii Strilets",
   "license": "MIT",