@igne-agency/react-web-ui 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,25 @@
+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;

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,65 @@
+/** 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, true>>;
+}>;
+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;

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

@@ -0,0 +1,136 @@
+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);
+/**
+* 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) => {
+			const marked = Object.hasOwn(state.rowSelection, rowId);
+			return state.allMatching ? !marked : marked;
+		};
+		$[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,28 @@
+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;

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,9 @@
+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;

package/dist/lib/iso-zoned.js

@@ -0,0 +1,19 @@
+import { Temporal } from "temporal-polyfill";
+// src/lib/iso-zoned.ts
+var ISO_PARSERS = [(iso, timeZone) => Temporal.Instant.from(iso).toZonedDateTimeISO(timeZone), (iso, timeZone) => Temporal.PlainDateTime.from(iso).toZonedDateTime(timeZone)];
+/**
+* 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
+*/
+var isoToZonedDateTime = (iso, timeZone) => {
+	for (const parse of ISO_PARSERS) try {
+		return parse(iso, timeZone);
+	} catch {
+		continue;
+	}
+	return null;
+};
+export { isoToZonedDateTime };

package/dist/lib/password-strength/password-strength.d.ts

@@ -0,0 +1,38 @@
+import type { OptionsDictionary, Score, TranslationKeys } from "@zxcvbn-ts/core";
+/** A zxcvbn language pack: its dictionaries, and its feedback in that language. */
+export type ZxcvbnLanguagePack = Readonly<{
+    dictionary: OptionsDictionary;
+    translations: TranslationKeys;
+}>;
+/** Loads a zxcvbn language pack, such as `() => import("@zxcvbn-ts/language-de")`. */
+export type ZxcvbnLanguageLoader = () => Promise<ZxcvbnLanguagePack>;
+/** zxcvbn language pack loaders by lowercase language tag, such as `de` or `nl-be`. */
+export type ZxcvbnLanguages = Readonly<Record<string, ZxcvbnLanguageLoader>>;
+/** How strong a password is, as zxcvbn judged it. */
+export type PasswordStrengthResult = Readonly<{
+    /** zxcvbn's 0–4 band. */
+    score: Score;
+    /** zxcvbn's own warning, in the language pack's language. */
+    warning: string;
+    /** zxcvbn's own suggestions, in the language pack's language. */
+    suggestions: readonly string[];
+}>;
+/**
+ * The language pack that serves a locale, with its tag: the locale itself,
+ * then its language, then any regional pack of that language. It throws when
+ * none does.
+ *
+ * @example
+ * const [tag, load] = resolvePasswordLanguage("nl-NL", { en: loadEn, "nl-be": loadNlBe }); // tag "nl-be"
+ */
+export declare const resolvePasswordLanguage: (locale: string, languages: ZxcvbnLanguages) => readonly [string, ZxcvbnLanguageLoader];
+/**
+ * The strength of a password in a locale, or `null` while it is empty. It
+ * suspends while the locale's dictionaries load, each language in a chunk of
+ * its own; `languages` adds packs to the kit's English and Dutch ones. The
+ * first loader a language tag is checked with is the one kept.
+ *
+ * @example
+ * const strength = usePasswordStrength(password, useLocale(), { de: () => import("@zxcvbn-ts/language-de") });
+ */
+export declare const usePasswordStrength: (password: string, locale: string, languages?: ZxcvbnLanguages) => PasswordStrengthResult | null;

package/dist/lib/password-strength/password-strength.js

@@ -0,0 +1,72 @@
+import { use } from "react";
+// src/lib/password-strength/password-strength.ts
+var BUILT_IN_LANGUAGES = {
+	en: () => import("@zxcvbn-ts/language-en"),
+	"nl-be": () => import("@zxcvbn-ts/language-nl-be")
+};
+var checks = /* @__PURE__ */ new Map();
+var createCheck = async (load) => {
+	const [{ ZxcvbnFactory }, common, pack] = await Promise.all([
+		import("@zxcvbn-ts/core"),
+		import("@zxcvbn-ts/language-common"),
+		load()
+	]);
+	const zxcvbn = new ZxcvbnFactory({
+		dictionary: {
+			...common.dictionary,
+			...pack.dictionary
+		},
+		graphs: common.adjacencyGraphs,
+		translations: pack.translations,
+		useLevenshteinDistance: true
+	});
+	return (password) => {
+		const { score, feedback } = zxcvbn.check(password);
+		return {
+			score,
+			warning: feedback.warning ?? "",
+			suggestions: feedback.suggestions
+		};
+	};
+};
+var checkFor = (tag, load) => {
+	const existing = checks.get(tag);
+	if (existing !== void 0) return existing;
+	const loading = createCheck(load);
+	checks.set(tag, loading);
+	return loading;
+};
+/**
+* The language pack that serves a locale, with its tag: the locale itself,
+* then its language, then any regional pack of that language. It throws when
+* none does.
+*
+* @example
+* const [tag, load] = resolvePasswordLanguage("nl-NL", { en: loadEn, "nl-be": loadNlBe }); // tag "nl-be"
+*/
+var resolvePasswordLanguage = (locale, languages) => {
+	const exact = locale.toLowerCase();
+	const [language = exact] = exact.split("-");
+	const packs = Object.entries(languages);
+	const match = packs.find(([tag]) => tag === exact) ?? packs.find(([tag]) => tag === language) ?? packs.find(([tag]) => tag.startsWith(`${language}-`));
+	if (match === void 0) throw new Error(`There is no zxcvbn language pack for "${locale}". Pass one to PasswordStrength's \`languages\`.`);
+	return match;
+};
+/**
+* The strength of a password in a locale, or `null` while it is empty. It
+* suspends while the locale's dictionaries load, each language in a chunk of
+* its own; `languages` adds packs to the kit's English and Dutch ones. The
+* first loader a language tag is checked with is the one kept.
+*
+* @example
+* const strength = usePasswordStrength(password, useLocale(), { de: () => import("@zxcvbn-ts/language-de") });
+*/
+var usePasswordStrength = (password, locale, languages = {}) => {
+	const [tag, load] = resolvePasswordLanguage(locale, {
+		...BUILT_IN_LANGUAGES,
+		...languages
+	});
+	const check = use(checkFor(tag, load));
+	return password === "" ? null : check(password);
+};
+export { resolvePasswordLanguage, usePasswordStrength };

package/dist/lib/popup-edge-padding.d.ts

@@ -0,0 +1,20 @@
+import { type RefCallback } from "react";
+/** What {@link usePopupEdgePadding} hands a positioner. */
+export type PopupEdgePadding = Readonly<{
+    /** The positioner's ref, which reads the padding once it mounts. */
+    ref: RefCallback<HTMLElement>;
+    /** The space to keep from the viewport's edges, in pixels. */
+    collisionPadding: number;
+}>;
+/**
+ * Reads a positioned popup's collision padding at runtime from the
+ * `--popup-edge-padding` knob, resolved to pixels on the positioner by the
+ * `popup.edge-padding` mixin. `0` until the positioner mounts.
+ *
+ * @example
+ * <BasePopover.Positioner
+ * 	{...usePopupEdgePadding()}
+ * 	className={styles.positioner}
+ * />
+ */
+export declare const usePopupEdgePadding: () => PopupEdgePadding;