@maanlamp/react-web-ui 0.0.0-stage → 0.1.0

package/dist/lib/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EACN,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,eAAe,GACf,MAAM,wBAAwB,CAAC;AAChC,cAAc,gBAAgB,CAAC"}

package/dist/lib/hooks/use-busy-phase.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Escalating phases of a wait.
+ * - `fresh`: not busy, or busy for less than `busyAfter`.
+ * - `busy`: busy longer than `busyAfter`.
+ * - `slow`: busy longer than `slowAfter`.
+ * - `stuck`: busy longer than `stuckAfter`.
+ */
+export type BusyPhase = "fresh" | "busy" | "slow" | "stuck";
+export type BusyPhaseOptions = Readonly<{
+    /** Whether the work is in flight. */
+    busy: boolean;
+    /** Ms of `busy` before leaving `fresh`. @default 150 */
+    busyAfter?: number;
+    /**
+     * Ms a phase past `fresh` holds once reached, even if the work finishes
+     * sooner. @default 200
+     */
+    busyMinDuration?: number;
+    /** Ms of `busy` before reaching `slow`. @default 4000 */
+    slowAfter?: number;
+    /** Ms of `busy` before reaching `stuck`. @default 8000 */
+    stuckAfter?: number;
+}>;
+/**
+ * The late-announcement bargain: a wait shows nothing until it has lasted
+ * `busyAfter`, then holds for at least `busyMinDuration` and escalates.
+ *
+ * @example
+ * const phase = useBusyPhase({ busy: query.isFetching });
+ */
+export declare const useBusyPhase: ({ busy, busyAfter, busyMinDuration, slowAfter, stuckAfter, }: BusyPhaseOptions) => BusyPhase;
+//# sourceMappingURL=use-busy-phase.d.ts.map

package/dist/lib/hooks/use-busy-phase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-busy-phase.d.ts","sourceRoot":"","sources":["../../../src/lib/hooks/use-busy-phase.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5D,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACvC,qCAAqC;IACrC,IAAI,EAAE,OAAO,CAAC;IACd,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,iEAMtB,gBAAgB,KAAG,SA+CrB,CAAC"}

package/dist/lib/hooks/use-busy-phase.js

@@ -0,0 +1,75 @@
+import { c } from "react/compiler-runtime";
+import { useEffect, useRef, useState } from "react";
+// src/lib/hooks/use-busy-phase.ts
+/**
+* The late-announcement bargain: a wait shows nothing until it has lasted
+* `busyAfter`, then holds for at least `busyMinDuration` and escalates.
+*
+* @example
+* const phase = useBusyPhase({ busy: query.isFetching });
+*/
+var useBusyPhase = (t0) => {
+	const $ = c(7);
+	const { busy, busyAfter: t1, busyMinDuration: t2, slowAfter: t3, stuckAfter: t4 } = t0;
+	const busyAfter = t1 === void 0 ? 150 : t1;
+	const busyMinDuration = t2 === void 0 ? 200 : t2;
+	const slowAfter = t3 === void 0 ? 4e3 : t3;
+	const stuckAfter = t4 === void 0 ? 8e3 : t4;
+	const [phase, setPhase] = useState("fresh");
+	const shownAt = useRef(null);
+	let t5;
+	let t6;
+	if ($[0] !== busy || $[1] !== busyAfter || $[2] !== busyMinDuration || $[3] !== slowAfter || $[4] !== stuckAfter) {
+		t5 = () => {
+			if (busy) {
+				const timers = [
+					setTimeout(() => {
+						shownAt.current = performance.now();
+						setPhase("busy");
+					}, busyAfter),
+					setTimeout(() => setPhase("slow"), slowAfter),
+					setTimeout(() => setPhase("stuck"), stuckAfter)
+				];
+				return () => {
+					for (const timer of timers) clearTimeout(timer);
+				};
+			}
+			const shown = shownAt.current;
+			const settle = () => {
+				shownAt.current = null;
+				setPhase("fresh");
+			};
+			if (shown === null) {
+				settle();
+				return;
+			}
+			const remaining = busyMinDuration - (performance.now() - shown);
+			if (remaining <= 0) {
+				settle();
+				return;
+			}
+			const settleId = setTimeout(settle, remaining);
+			return () => clearTimeout(settleId);
+		};
+		t6 = [
+			busy,
+			busyAfter,
+			busyMinDuration,
+			slowAfter,
+			stuckAfter
+		];
+		$[0] = busy;
+		$[1] = busyAfter;
+		$[2] = busyMinDuration;
+		$[3] = slowAfter;
+		$[4] = stuckAfter;
+		$[5] = t5;
+		$[6] = t6;
+	} else {
+		t5 = $[5];
+		t6 = $[6];
+	}
+	useEffect(t5, t6);
+	return phase;
+};
+export { useBusyPhase };

package/dist/lib/hooks/use-media-query.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Whether a CSS media query matches, re-evaluated whenever its answer changes.
+ * Reads outside a browser answer `false`.
+ *
+ * @example
+ * const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+ */
+export declare const useMediaQuery: (query: string) => boolean;
+//# sourceMappingURL=use-media-query.d.ts.map

package/dist/lib/hooks/use-media-query.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-query.d.ts","sourceRoot":"","sources":["../../../src/lib/hooks/use-media-query.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,UAAW,MAAM,KAAG,OAU5C,CAAC"}

package/dist/lib/hooks/use-media-query.js

@@ -0,0 +1,34 @@
+import { c } from "react/compiler-runtime";
+import { useSyncExternalStore } from "react";
+// src/lib/hooks/use-media-query.ts
+/**
+* Whether a CSS media query matches, re-evaluated whenever its answer changes.
+* Reads outside a browser answer `false`.
+*
+* @example
+* const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+*/
+var useMediaQuery = (query) => {
+	const $ = c(3);
+	let t0;
+	let t1;
+	if ($[0] !== query) {
+		t0 = (onChange) => {
+			const list = window.matchMedia(query);
+			list.addEventListener("change", onChange);
+			return () => list.removeEventListener("change", onChange);
+		};
+		t1 = () => window.matchMedia(query).matches;
+		$[0] = query;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	return useSyncExternalStore(t0, t1, _temp);
+};
+function _temp() {
+	return false;
+}
+export { useMediaQuery };

package/dist/lib/hooks/use-presence.d.ts

@@ -0,0 +1,26 @@
+import { type RefObject } from "react";
+/** The state attributes `usePresence` puts on its element, as base-ui does. */
+export type PresenceProps = Readonly<{
+    "data-open": "" | undefined;
+    "data-starting-style": "" | undefined;
+    "data-ending-style": "" | undefined;
+}>;
+export type Presence = Readonly<{
+    /** Whether to render the element. */
+    mounted: boolean;
+    /** The state attributes to spread onto it. */
+    props: PresenceProps;
+}>;
+/**
+ * Keeps an element mounted until its exit transition has finished, and puts
+ * base-ui's state attributes on it, so a stylesheet animates both directions
+ * with `[data-starting-style]` and `[data-ending-style]`. Under reduced motion
+ * it mounts and unmounts at once.
+ *
+ * @example
+ * const ref = useRef<HTMLDivElement>(null);
+ * const presence = usePresence(busy, ref);
+ * return presence.mounted ? <div ref={ref} {...presence.props} /> : null;
+ */
+export declare const usePresence: (open: boolean, ref: RefObject<Element | null>) => Presence;
+//# sourceMappingURL=use-presence.d.ts.map

package/dist/lib/hooks/use-presence.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-presence.d.ts","sourceRoot":"","sources":["../../../src/lib/hooks/use-presence.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG5D,+EAA+E;AAC/E,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAC;IACpC,WAAW,EAAE,EAAE,GAAG,SAAS,CAAC;IAC5B,qBAAqB,EAAE,EAAE,GAAG,SAAS,CAAC;IACtC,mBAAmB,EAAE,EAAE,GAAG,SAAS,CAAC;CACpC,CAAC,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,QAAQ,CAAC;IAC/B,qCAAqC;IACrC,OAAO,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,KAAK,EAAE,aAAa,CAAC;CACrB,CAAC,CAAC;AAuDH;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,SACjB,OAAO,OACR,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,KAC5B,QA+DF,CAAC"}

package/dist/lib/hooks/use-presence.js

@@ -0,0 +1,155 @@
+import { useMediaQuery } from "./use-media-query.js";
+import { c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+// src/lib/hooks/use-presence.ts
+var nextState = (state, open, reducedMotion) => {
+	if (reducedMotion) return {
+		open,
+		mounted: open,
+		transition: "idle"
+	};
+	if (open) return {
+		open,
+		mounted: true,
+		transition: state.mounted ? "idle" : "starting"
+	};
+	return {
+		open,
+		mounted: state.mounted,
+		transition: state.mounted ? "ending" : "idle"
+	};
+};
+var runningAnimationsOf = (element) => element.getAnimations().filter((animation) => animation.playState !== "finished");
+var animationsSettled = async (element) => {
+	if (element === null) return;
+	const running = runningAnimationsOf(element);
+	if (running.length === 0) return;
+	await Promise.allSettled(running.map((animation) => animation.finished));
+	await animationsSettled(element);
+};
+/**
+* Keeps an element mounted until its exit transition has finished, and puts
+* base-ui's state attributes on it, so a stylesheet animates both directions
+* with `[data-starting-style]` and `[data-ending-style]`. Under reduced motion
+* it mounts and unmounts at once.
+*
+* @example
+* const ref = useRef<HTMLDivElement>(null);
+* const presence = usePresence(busy, ref);
+* return presence.mounted ? <div ref={ref} {...presence.props} /> : null;
+*/
+var usePresence = (open, ref) => {
+	const $ = c(20);
+	const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+	let t0;
+	if ($[0] !== open) {
+		t0 = {
+			open,
+			mounted: open,
+			transition: "idle"
+		};
+		$[0] = open;
+		$[1] = t0;
+	} else t0 = $[1];
+	const [state, setState] = useState(t0);
+	if (state.open !== open) {
+		let t1;
+		if ($[2] !== open || $[3] !== reducedMotion || $[4] !== state) {
+			t1 = nextState(state, open, reducedMotion);
+			$[2] = open;
+			$[3] = reducedMotion;
+			$[4] = state;
+			$[5] = t1;
+		} else t1 = $[5];
+		setState(t1);
+	}
+	let t1;
+	let t2;
+	if ($[6] !== state.transition) {
+		t1 = () => {
+			if (state.transition !== "starting") return;
+			let frame = requestAnimationFrame(() => {
+				frame = requestAnimationFrame(() => {
+					setState(_temp);
+				});
+			});
+			return () => cancelAnimationFrame(frame);
+		};
+		t2 = [state.transition];
+		$[6] = state.transition;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t1 = $[7];
+		t2 = $[8];
+	}
+	useEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[9] !== ref || $[10] !== state.transition) {
+		t3 = () => {
+			if (state.transition !== "ending") return;
+			const abort = new AbortController();
+			const unmountWhenSettled = async () => {
+				await animationsSettled(ref.current);
+				if (!abort.signal.aborted) setState(_temp2);
+			};
+			const frame_0 = requestAnimationFrame(() => {
+				unmountWhenSettled();
+			});
+			return () => {
+				cancelAnimationFrame(frame_0);
+				abort.abort();
+			};
+		};
+		t4 = [state.transition, ref];
+		$[9] = ref;
+		$[10] = state.transition;
+		$[11] = t3;
+		$[12] = t4;
+	} else {
+		t3 = $[11];
+		t4 = $[12];
+	}
+	useEffect(t3, t4);
+	const t5 = open ? "" : void 0;
+	const t6 = state.transition === "starting" ? "" : void 0;
+	const t7 = state.transition === "ending" ? "" : void 0;
+	let t8;
+	if ($[13] !== t5 || $[14] !== t6 || $[15] !== t7) {
+		t8 = {
+			"data-open": t5,
+			"data-starting-style": t6,
+			"data-ending-style": t7
+		};
+		$[13] = t5;
+		$[14] = t6;
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== state.mounted || $[18] !== t8) {
+		t9 = {
+			mounted: state.mounted,
+			props: t8
+		};
+		$[17] = state.mounted;
+		$[18] = t8;
+		$[19] = t9;
+	} else t9 = $[19];
+	return t9;
+};
+function _temp(current) {
+	return current.transition === "starting" ? {
+		...current,
+		transition: "idle"
+	} : current;
+}
+function _temp2(current_0) {
+	return {
+		...current_0,
+		mounted: false,
+		transition: "idle"
+	};
+}
+export { usePresence };

package/dist/lib/hooks/use-row-selection.d.ts

@@ -0,0 +1,66 @@
+/** What a selection asks the server to act on: the checked ids, or every matching row but the excluded ones. */
+export type RowSelectionRequest = Readonly<{
+    mode: "ids";
+    ids: readonly string[];
+}> | Readonly<{
+    mode: "allMatching";
+    excludedIds: readonly string[];
+}>;
+/** The marked row ids: selected ones, or, while `allMatching`, excluded ones. */
+export type SelectionState = Readonly<{
+    allMatching: boolean;
+    rowSelection: Readonly<Record<string, boolean>>;
+}>;
+export type SelectionAction = Readonly<{
+    type: "toggleRow";
+    rowId: string;
+    selected: boolean;
+    totalRows: number;
+}> | Readonly<{
+    type: "allMatching";
+}> | Readonly<{
+    type: "clear";
+}>;
+/**
+ * Applies one selection action. While every matching row is selected, the
+ * marked ids are exclusions, and excluding every row clears the selection.
+ *
+ * @example
+ * selectionReducer(state, { type: "toggleRow", rowId: "a", selected: true, totalRows: 20 });
+ */
+export declare const selectionReducer: (state: SelectionState, action: SelectionAction) => SelectionState;
+/**
+ * How many rows a selection holds, out of `totalRows` matching rows.
+ *
+ * @example
+ * selectionCount({ allMatching: true, rowSelection: { a: true } }, 20); // 19
+ */
+export declare const selectionCount: (state: SelectionState, totalRows: number) => number;
+/**
+ * The request a selection sends to the server, or `null` when nothing is selected.
+ *
+ * @example
+ * selectionRequest({ allMatching: false, rowSelection: { a: true } }); // { mode: "ids", ids: ["a"] }
+ */
+export declare const selectionRequest: (state: SelectionState) => RowSelectionRequest | null;
+/** The row selection model returned by {@link useRowSelection}. */
+export type RowSelectionView = Readonly<{
+    allMatching: boolean;
+    isRowSelected: (rowId: string) => boolean;
+    toggleRow: (rowId: string, selected: boolean, totalRows: number) => void;
+    selectAllMatching: () => void;
+    clear: () => void;
+    count: (totalRows: number) => number;
+    request: () => RowSelectionRequest | null;
+}>;
+/**
+ * Holds a server-side row selection: checked ids, or every matching row
+ * minus the unchecked ones once the reader selects all matching.
+ *
+ * @example
+ * const selection = useRowSelection();
+ * selection.toggleRow("a", true, totalRows);
+ * exportRows(selection.request());
+ */
+export declare const useRowSelection: () => RowSelectionView;
+//# sourceMappingURL=use-row-selection.d.ts.map

package/dist/lib/hooks/use-row-selection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-row-selection.d.ts","sourceRoot":"","sources":["../../../src/lib/hooks/use-row-selection.ts"],"names":[],"mappings":"AAEA,gHAAgH;AAChH,MAAM,MAAM,mBAAmB,GAC5B,QAAQ,CAAC;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,GAAG,EAAE,SAAS,MAAM,EAAE,CAAA;CAAE,CAAC,GACjD,QAAQ,CAAC;IACT,IAAI,EAAE,aAAa,CAAC;IACpB,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;CAC9B,CAAC,CAAC;AAEN,iFAAiF;AACjF,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;IACrC,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;CAChD,CAAC,CAAC;AAEH,MAAM,MAAM,eAAe,GACxB,QAAQ,CAAC;IACT,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACjB,CAAC,GACF,QAAQ,CAAC;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,CAAC,GACjC,QAAQ,CAAC;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAO/B;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,UACrB,cAAc,UACb,eAAe,KACrB,cAyBF,CAAC;AASF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,UACnB,cAAc,aACV,MAAM,KACf,MAGwB,CAAC;AAE5B;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,UACrB,cAAc,KACnB,mBAAmB,GAAG,IAOxB,CAAC;AAEF,mEAAmE;AACnE,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACvC,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1C,SAAS,EAAE,CACV,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,OAAO,EACjB,SAAS,EAAE,MAAM,KACb,IAAI,CAAC;IACV,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,KAAK,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,OAAO,EAAE,MAAM,mBAAmB,GAAG,IAAI,CAAC;CAC1C,CAAC,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,QAAO,gBA6BlC,CAAC"}

package/dist/lib/hooks/use-row-selection.js

@@ -0,0 +1,133 @@
+import { c } from "react/compiler-runtime";
+import { useReducer } from "react";
+// src/lib/hooks/use-row-selection.ts
+var EMPTY_SELECTION = {
+	allMatching: false,
+	rowSelection: {}
+};
+/**
+* Applies one selection action. While every matching row is selected, the
+* marked ids are exclusions, and excluding every row clears the selection.
+*
+* @example
+* selectionReducer(state, { type: "toggleRow", rowId: "a", selected: true, totalRows: 20 });
+*/
+var selectionReducer = (state, action) => {
+	if (action.type === "allMatching") return {
+		allMatching: true,
+		rowSelection: {}
+	};
+	if (action.type === "clear") return EMPTY_SELECTION;
+	const marked = state.allMatching ? !action.selected : action.selected;
+	const others = Object.fromEntries(Object.entries(state.rowSelection).filter(([id]) => id !== action.rowId));
+	const rowSelection = marked ? {
+		...others,
+		[action.rowId]: true
+	} : others;
+	if (state.allMatching && Object.keys(rowSelection).length >= action.totalRows) return EMPTY_SELECTION;
+	return {
+		...state,
+		rowSelection
+	};
+};
+var markedIds = (state) => Object.keys(state.rowSelection).filter((id) => state.rowSelection[id]);
+/**
+* How many rows a selection holds, out of `totalRows` matching rows.
+*
+* @example
+* selectionCount({ allMatching: true, rowSelection: { a: true } }, 20); // 19
+*/
+var selectionCount = (state, totalRows) => state.allMatching ? Math.max(totalRows - markedIds(state).length, 0) : markedIds(state).length;
+/**
+* The request a selection sends to the server, or `null` when nothing is selected.
+*
+* @example
+* selectionRequest({ allMatching: false, rowSelection: { a: true } }); // { mode: "ids", ids: ["a"] }
+*/
+var selectionRequest = (state) => {
+	const ids = markedIds(state);
+	return state.allMatching ? {
+		mode: "allMatching",
+		excludedIds: ids
+	} : ids.length > 0 ? {
+		mode: "ids",
+		ids
+	} : null;
+};
+/**
+* Holds a server-side row selection: checked ids, or every matching row
+* minus the unchecked ones once the reader selects all matching.
+*
+* @example
+* const selection = useRowSelection();
+* selection.toggleRow("a", true, totalRows);
+* exportRows(selection.request());
+*/
+var useRowSelection = () => {
+	const $ = c(14);
+	const [state, dispatch] = useReducer(selectionReducer, EMPTY_SELECTION);
+	let t0;
+	if ($[0] !== state.allMatching || $[1] !== state.rowSelection) {
+		t0 = (rowId) => state.allMatching ? !state.rowSelection[rowId] : Boolean(state.rowSelection[rowId]);
+		$[0] = state.allMatching;
+		$[1] = state.rowSelection;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	let t2;
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = (rowId_0, selected, totalRows) => {
+			dispatch({
+				type: "toggleRow",
+				rowId: rowId_0,
+				selected,
+				totalRows
+			});
+		};
+		t2 = () => {
+			dispatch({ type: "allMatching" });
+		};
+		t3 = () => {
+			dispatch({ type: "clear" });
+		};
+		$[3] = t1;
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		t1 = $[3];
+		t2 = $[4];
+		t3 = $[5];
+	}
+	let t4;
+	let t5;
+	if ($[6] !== state) {
+		t4 = (totalRows_0) => selectionCount(state, totalRows_0);
+		t5 = () => selectionRequest(state);
+		$[6] = state;
+		$[7] = t4;
+		$[8] = t5;
+	} else {
+		t4 = $[7];
+		t5 = $[8];
+	}
+	let t6;
+	if ($[9] !== state.allMatching || $[10] !== t0 || $[11] !== t4 || $[12] !== t5) {
+		t6 = {
+			allMatching: state.allMatching,
+			isRowSelected: t0,
+			toggleRow: t1,
+			selectAllMatching: t2,
+			clear: t3,
+			count: t4,
+			request: t5
+		};
+		$[9] = state.allMatching;
+		$[10] = t0;
+		$[11] = t4;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	return t6;
+};
+export { selectionCount, selectionReducer, selectionRequest, useRowSelection };

package/dist/lib/hooks/use-theme.d.ts

@@ -0,0 +1,29 @@
+import type { StorageAdapter } from "../storage.ts";
+/** The user's choice. `auto` follows the operating system, live. */
+export type ThemePreference = "auto" | "light" | "dark";
+/** The theme actually applied to the document. */
+export type Theme = "light" | "dark";
+export type UseThemeOptions = Readonly<{
+    /** Where the preference persists. */
+    storage: StorageAdapter;
+    /** The key the preference is stored under. */
+    key: string;
+}>;
+export type ThemeControls = Readonly<{
+    theme: Theme;
+    preference: ThemePreference;
+    setPreference: (next: ThemePreference) => void;
+    toggle: () => void;
+}>;
+/**
+ * Owns the document's colour theme. The stored preference is `auto` unless set,
+ * following the operating system, while `light` and `dark` pin it on `<html>`
+ * as `data-theme`. Under `auto` the attribute is absent and the stylesheet's
+ * `prefers-color-scheme` queries resolve the theme.
+ *
+ * @example
+ * const { theme, setPreference } = useTheme({ storage, key: "theme" });
+ * setPreference("auto");
+ */
+export declare const useTheme: ({ storage, key, }: UseThemeOptions) => ThemeControls;
+//# sourceMappingURL=use-theme.d.ts.map

package/dist/lib/hooks/use-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-theme.d.ts","sourceRoot":"","sources":["../../../src/lib/hooks/use-theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAGpD,oEAAoE;AACpE,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAExD,kDAAkD;AAClD,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAErC,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;IACtC,qCAAqC;IACrC,OAAO,EAAE,cAAc,CAAC;IACxB,8CAA8C;IAC9C,GAAG,EAAE,MAAM,CAAC;CACZ,CAAC,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAC;IACpC,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,eAAe,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC/C,MAAM,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC,CAAC;AAKH;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,sBAGlB,eAAe,KAAG,aAqCpB,CAAC"}

package/dist/lib/hooks/use-theme.js

@@ -0,0 +1,88 @@
+import { useMediaQuery } from "./use-media-query.js";
+import { c } from "react/compiler-runtime";
+import { useEffect, useSyncExternalStore } from "react";
+// src/lib/hooks/use-theme.ts
+var preferenceOf = (stored) => stored === "light" || stored === "dark" ? stored : "auto";
+/**
+* Owns the document's colour theme. The stored preference is `auto` unless set,
+* following the operating system, while `light` and `dark` pin it on `<html>`
+* as `data-theme`. Under `auto` the attribute is absent and the stylesheet's
+* `prefers-color-scheme` queries resolve the theme.
+*
+* @example
+* const { theme, setPreference } = useTheme({ storage, key: "theme" });
+* setPreference("auto");
+*/
+var useTheme = (t0) => {
+	const $ = c(18);
+	const { storage, key } = t0;
+	let t1;
+	let t2;
+	if ($[0] !== key || $[1] !== storage) {
+		t1 = (onChange) => storage.subscribe(key, onChange);
+		t2 = () => preferenceOf(storage.read(key));
+		$[0] = key;
+		$[1] = storage;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	const preference = useSyncExternalStore(t1, t2, _temp);
+	const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
+	const theme = preference === "auto" ? prefersDark ? "dark" : "light" : preference;
+	let t3;
+	let t4;
+	if ($[4] !== preference) {
+		t3 = () => {
+			const root = document.documentElement;
+			if (preference === "auto") root.removeAttribute("data-theme");
+			else root.setAttribute("data-theme", preference);
+		};
+		t4 = [preference];
+		$[4] = preference;
+		$[5] = t3;
+		$[6] = t4;
+	} else {
+		t3 = $[5];
+		t4 = $[6];
+	}
+	useEffect(t3, t4);
+	let t5;
+	if ($[7] !== key || $[8] !== storage) {
+		t5 = (next) => {
+			storage.write(key, next);
+		};
+		$[7] = key;
+		$[8] = storage;
+		$[9] = t5;
+	} else t5 = $[9];
+	const setPreference = t5;
+	let t6;
+	if ($[10] !== setPreference || $[11] !== theme) {
+		t6 = () => setPreference(theme === "dark" ? "light" : "dark");
+		$[10] = setPreference;
+		$[11] = theme;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== preference || $[14] !== setPreference || $[15] !== t6 || $[16] !== theme) {
+		t7 = {
+			theme,
+			preference,
+			setPreference,
+			toggle: t6
+		};
+		$[13] = preference;
+		$[14] = setPreference;
+		$[15] = t6;
+		$[16] = theme;
+		$[17] = t7;
+	} else t7 = $[17];
+	return t7;
+};
+function _temp() {
+	return "auto";
+}
+export { useTheme };

package/dist/lib/iso-zoned.d.ts

@@ -0,0 +1,10 @@
+import { Temporal } from "temporal-polyfill";
+/**
+ * The moment an ISO-8601 instant or plain date-time denotes in `timeZone`, or
+ * `null` when it parses as neither.
+ *
+ * @example
+ * isoToZonedDateTime("2026-05-26T22:30:00Z", "Europe/Amsterdam"); // 2026-05-27T00:30+02:00
+ */
+export declare const isoToZonedDateTime: (iso: string, timeZone: string) => Temporal.ZonedDateTime | null;
+//# sourceMappingURL=iso-zoned.d.ts.map