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

package/dist/lib/sliding-indicator/use-sliding-indicator.d.ts

@@ -0,0 +1,27 @@
+import { type RefCallback } from "react";
+/** What {@link useSlidingIndicator} measures and where it writes. */
+export type SlidingIndicatorOptions = Readonly<{
+    /** Matches the active item inside the indicator's parent, such as `"[data-pressed]"`. */
+    active: string;
+    /** The custom-property prefix the indicator's styles read. @default "--active-item" */
+    prefix?: string;
+    /**
+     * Which element carries the custom properties: the indicator, or its parent,
+     * where the indicator and its siblings inherit them. @default "indicator"
+     */
+    publishOn?: "indicator" | "parent";
+}>;
+/**
+ * Moves a sliding indicator onto the active item of its parent, which must be
+ * positioned. Writes `<prefix>-left`, `-top`, `-width` and `-height` on the
+ * indicator (or on its parent, with `publishOn: "parent"`), sets `data-empty`
+ * on the indicator while nothing is active and `data-jump` when it arrives from
+ * nothing, and re-measures whenever the parent resizes or anything inside it
+ * changes. It starts tracking whenever the indicator mounts. Style it with the
+ * `sliding-indicator.scss` mixins.
+ *
+ * @example
+ * const ref = useSlidingIndicator<HTMLSpanElement>({ active: '[aria-current="page"]' });
+ * <span ref={ref} aria-hidden="true" className={style.indicator} />
+ */
+export declare const useSlidingIndicator: <TElement extends HTMLElement>({ active, prefix, publishOn, }: SlidingIndicatorOptions) => RefCallback<TElement>;

package/dist/lib/sliding-indicator/use-sliding-indicator.js

@@ -0,0 +1,84 @@
+import { c } from "react/compiler-runtime";
+// src/lib/sliding-indicator/use-sliding-indicator.ts
+var offsetWithin = (element, container) => {
+	let left = 0;
+	let top = 0;
+	let node = element;
+	while (node instanceof HTMLElement && node !== container) {
+		left += node.offsetLeft;
+		top += node.offsetTop;
+		node = node.offsetParent;
+	}
+	return {
+		left,
+		top
+	};
+};
+var publish = (carrier, property, value) => {
+	if (carrier.style.getPropertyValue(property) !== value) carrier.style.setProperty(property, value);
+};
+var track = (indicator, active, prefix, publishOn) => {
+	const container = indicator.parentElement;
+	if (container === null) return () => void 0;
+	const carrier = publishOn === "parent" ? container : indicator;
+	let wasActive = false;
+	const measure = () => {
+		const target = container.querySelector(active);
+		indicator.toggleAttribute("data-empty", target === null);
+		if (target === null) {
+			wasActive = false;
+			return;
+		}
+		indicator.toggleAttribute("data-jump", !wasActive);
+		wasActive = true;
+		const { left, top } = offsetWithin(target, container);
+		publish(carrier, `${prefix}-left`, `${left}px`);
+		publish(carrier, `${prefix}-top`, `${top}px`);
+		publish(carrier, `${prefix}-width`, `${target.offsetWidth}px`);
+		publish(carrier, `${prefix}-height`, `${target.offsetHeight}px`);
+	};
+	measure();
+	const resizes = new ResizeObserver(measure);
+	resizes.observe(container);
+	const mutations = new MutationObserver((records) => {
+		if (records.some((record) => !indicator.contains(record.target))) measure();
+	});
+	mutations.observe(container, {
+		attributes: true,
+		childList: true,
+		subtree: true
+	});
+	return () => {
+		resizes.disconnect();
+		mutations.disconnect();
+	};
+};
+/**
+* Moves a sliding indicator onto the active item of its parent, which must be
+* positioned. Writes `<prefix>-left`, `-top`, `-width` and `-height` on the
+* indicator (or on its parent, with `publishOn: "parent"`), sets `data-empty`
+* on the indicator while nothing is active and `data-jump` when it arrives from
+* nothing, and re-measures whenever the parent resizes or anything inside it
+* changes. It starts tracking whenever the indicator mounts. Style it with the
+* `sliding-indicator.scss` mixins.
+*
+* @example
+* const ref = useSlidingIndicator<HTMLSpanElement>({ active: '[aria-current="page"]' });
+* <span ref={ref} aria-hidden="true" className={style.indicator} />
+*/
+var useSlidingIndicator = (t0) => {
+	const $ = c(4);
+	const { active, prefix: t1, publishOn: t2 } = t0;
+	const prefix = t1 === void 0 ? "--active-item" : t1;
+	const publishOn = t2 === void 0 ? "indicator" : t2;
+	let t3;
+	if ($[0] !== active || $[1] !== prefix || $[2] !== publishOn) {
+		t3 = (indicator) => indicator === null ? void 0 : track(indicator, active, prefix, publishOn);
+		$[0] = active;
+		$[1] = prefix;
+		$[2] = publishOn;
+		$[3] = t3;
+	} else t3 = $[3];
+	return t3;
+};
+export { useSlidingIndicator };

package/dist/lib/storage.d.ts

@@ -0,0 +1,21 @@
+/**
+ * A synchronous key-value store the app hands the kit for anything it
+ * persists. It is synchronous so a preference can be read during the first
+ * render. It owns serialisation and swallows access errors: a read that fails
+ * reports `undefined`, and a write or remove that fails is dropped.
+ *
+ * @example
+ * const { preference } = useTheme({ storage: localStorageAdapter, key: "theme" });
+ */
+export type StorageAdapter = Readonly<{
+    /** The value stored under `key`, or `undefined` when there is none. */
+    read: (key: string) => unknown;
+    write: (key: string, value: unknown) => void;
+    remove: (key: string) => void;
+    /**
+     * Calls `listener` whenever the value under `key` may have changed, in this
+     * tab or another, writes through this adapter included. Returns the
+     * unsubscribe.
+     */
+    subscribe: (key: string, listener: () => void) => () => void;
+}>;

package/dist/lib/table-storage.d.ts

@@ -0,0 +1,43 @@
+import type { StandardSchemaV1 } from "@tanstack/react-form";
+import type { StorageAdapter } from "./storage.ts";
+/** One persisted value, checked by its validator on every read and write. */
+export type StoredValue<T> = Readonly<{
+    /**
+     * The stored value, or the fallback when nothing is stored or the stored
+     * value no longer passes the validator.
+     */
+    read: () => T;
+    /** Stores `value`. Throws, storing nothing, when it fails the validator. */
+    write: (value: T) => void;
+    /** Forgets the stored value, so the next read returns the fallback. */
+    clear: () => void;
+    /** Calls `listener` whenever the value may have changed. Returns the unsubscribe. */
+    subscribe: (listener: () => void) => () => void;
+}>;
+/** What a stored value is checked against, and what it reads as when nothing valid is stored. */
+export type StoredValueShape<T> = Readonly<{
+    /** A synchronous Standard Schema validator; an asynchronous result counts as a failure. */
+    schema: StandardSchemaV1<unknown, T>;
+    fallback: T;
+}>;
+/**
+ * A value one table instance remembers across reloads, stored in `storage`
+ * under its `tableId` and `name`.
+ *
+ * @example
+ * const filters = tableStoredValue(
+ * 	"declarations",
+ * 	"filters",
+ * 	{ schema: z.object({ status: z.array(z.string()) }), fallback: { status: [] } },
+ * 	localStorageAdapter,
+ * );
+ */
+export declare const tableStoredValue: <T>(tableId: string, name: string, { schema, fallback }: StoredValueShape<T>, storage: StorageAdapter) => StoredValue<T>;
+/**
+ * The page size a table remembers: one of its `options`, or `fallback` when
+ * none is stored.
+ *
+ * @example
+ * storedPageSize("nza-rates", [10, 25, 50, 100], 10, localStorageAdapter).read(); // 50, or 10
+ */
+export declare const storedPageSize: (tableId: string, options: readonly number[], fallback: number, storage: StorageAdapter) => StoredValue<number>;

package/dist/lib/table-storage.js

@@ -0,0 +1,62 @@
+// src/lib/table-storage.ts
+var check = (schema, value) => {
+	const result = schema["~standard"].validate(value);
+	if (result instanceof Promise) return {
+		ok: false,
+		reason: "the validator is asynchronous"
+	};
+	return result.issues === void 0 ? {
+		ok: true,
+		value: result.value
+	} : {
+		ok: false,
+		reason: result.issues.map((issue) => issue.message).join("; ")
+	};
+};
+/**
+* A value one table instance remembers across reloads, stored in `storage`
+* under its `tableId` and `name`.
+*
+* @example
+* const filters = tableStoredValue(
+* 	"declarations",
+* 	"filters",
+* 	{ schema: z.object({ status: z.array(z.string()) }), fallback: { status: [] } },
+* 	localStorageAdapter,
+* );
+*/
+var tableStoredValue = (tableId, name, { schema, fallback }, storage) => {
+	const key = `table:${tableId}:${name}`;
+	return {
+		read: () => {
+			const stored = check(schema, storage.read(key));
+			return stored.ok ? stored.value : fallback;
+		},
+		write: (value) => {
+			const checked = check(schema, value);
+			if (!checked.ok) throw new Error(`Refusing to store ${key}: ${checked.reason}`);
+			storage.write(key, checked.value);
+		},
+		clear: () => {
+			storage.remove(key);
+		},
+		subscribe: (listener) => storage.subscribe(key, listener)
+	};
+};
+var pageSizeSchema = (options) => ({ "~standard": {
+	version: 1,
+	vendor: "react-web-ui",
+	validate: (value) => typeof value === "number" && options.includes(value) ? { value } : { issues: [{ message: `expected one of ${options.join(", ")}` }] }
+} });
+/**
+* The page size a table remembers: one of its `options`, or `fallback` when
+* none is stored.
+*
+* @example
+* storedPageSize("nza-rates", [10, 25, 50, 100], 10, localStorageAdapter).read(); // 50, or 10
+*/
+var storedPageSize = (tableId, options, fallback, storage) => tableStoredValue(tableId, "page-size", {
+	schema: pageSizeSchema(options),
+	fallback
+}, storage);
+export { storedPageSize, tableStoredValue };

package/dist/lib/text-length.d.ts

@@ -0,0 +1,10 @@
+/** How a `length / maxLength` counter reads against its maximum. */
+export type LengthTone = "normal" | "warning" | "error";
+/**
+ * The tone a length counter shows: `warning` from 90% of the maximum, `error`
+ * past it.
+ *
+ * @example
+ * lengthTone(1900, 2000); // "warning"
+ */
+export declare const lengthTone: (length: number, maxLength: number) => LengthTone;

package/dist/lib/text-length.js

@@ -0,0 +1,15 @@
+// src/lib/text-length.ts
+var WARNING_RATIO = .9;
+/**
+* The tone a length counter shows: `warning` from 90% of the maximum, `error`
+* past it.
+*
+* @example
+* lengthTone(1900, 2000); // "warning"
+*/
+var lengthTone = (length, maxLength) => {
+	const ratio = length / maxLength;
+	if (ratio > 1) return "error";
+	return ratio >= WARNING_RATIO ? "warning" : "normal";
+};
+export { lengthTone };

package/dist/lib/tone.d.ts

@@ -0,0 +1,14 @@
+/**
+ * A status colour role, shared by every leaf that carries one.
+ *
+ * @example
+ * const tone: Tone = "warning";
+ */
+export type Tone = "neutral" | "info" | "success" | "warning" | "error";
+/**
+ * How a toned leaf fills: a tint, the tone's ink as a fill, or an outline.
+ *
+ * @example
+ * <Badge tone="info" variant="solid">3</Badge>
+ */
+export type ToneVariant = "subtle" | "solid" | "outline";

package/dist/lib/unsaved-changes/before-unload.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Asks the browser to confirm a reload, a close or a navigation away from the
+ * app while `when`.
+ *
+ * @example
+ * useBeforeUnload(form.state.isDirty);
+ */
+export declare const useBeforeUnload: (when: boolean) => void;

package/dist/lib/unsaved-changes/before-unload.js

@@ -0,0 +1,37 @@
+import { c } from "react/compiler-runtime";
+import { useEffect } from "react";
+// src/lib/unsaved-changes/before-unload.ts
+var holdUnload = (event) => {
+	event.preventDefault();
+};
+/**
+* Asks the browser to confirm a reload, a close or a navigation away from the
+* app while `when`.
+*
+* @example
+* useBeforeUnload(form.state.isDirty);
+*/
+var useBeforeUnload = (when) => {
+	const $ = c(3);
+	let t0;
+	let t1;
+	if ($[0] !== when) {
+		t0 = () => {
+			if (!when) return;
+			window.addEventListener("beforeunload", holdUnload);
+			return _temp;
+		};
+		t1 = [when];
+		$[0] = when;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useEffect(t0, t1);
+};
+function _temp() {
+	return window.removeEventListener("beforeunload", holdUnload);
+}
+export { useBeforeUnload };

package/dist/lib/unsaved-changes/index.d.ts

@@ -0,0 +1,4 @@
+export { useBeforeUnload } from "./before-unload.ts";
+export { type LeaveGuard, LeaveGuardDialog, type LeaveGuardDialogProps, useLeaveGuard, } from "./leave-guard.tsx";
+export { type LeaveGuardPolicy, never, whenDirty, } from "./policy.ts";
+export { useReportUnsavedChanges, useUnsavedChanges, } from "./registry.ts";

package/dist/lib/unsaved-changes/index.js

@@ -0,0 +1,5 @@
+import { useBeforeUnload } from "./before-unload.js";
+import { LeaveGuardDialog, useLeaveGuard } from "./leave-guard.js";
+import { never, whenDirty } from "./policy.js";
+import { useReportUnsavedChanges, useUnsavedChanges } from "./registry.js";
+export { LeaveGuardDialog, never, useBeforeUnload, useLeaveGuard, useReportUnsavedChanges, useUnsavedChanges, whenDirty };

package/dist/lib/unsaved-changes/leave-guard.d.ts

@@ -0,0 +1,80 @@
+import { type ReactNode } from "react";
+import { type ConfirmDialogProps } from "../../components/confirm-dialog/confirm-dialog.tsx";
+/** A guard against leaving: whether it blocks, the leave it holds, and the answers to it. */
+export type LeaveGuard = Readonly<{
+    /** Whether leaving is blocked now: `when`, except while a leave that was agreed to goes through. */
+    blocking: boolean;
+    /** Whether a held leave is waiting for an answer. */
+    asking: boolean;
+    /** Hands the guard a leave that was blocked, with what lets it through. */
+    hold: (proceed: () => void) => void;
+    /** Agrees to the held leave, which goes through once the question has gone. */
+    agree: () => void;
+    /** Lets the held leave through if it was agreed to, and otherwise stays. */
+    settle: () => void;
+}>;
+/** A held leave's two answers. */
+export type HeldLeave = Readonly<{
+    proceed: () => void;
+    stay: () => void;
+}>;
+/** A guard's state before it knows which leave it answers for. */
+export type LeaveGuardCore = Readonly<{
+    blocking: boolean;
+    /** The leave handed to `hold`, if any. */
+    held: HeldLeave | undefined;
+    hold: (proceed: () => void) => void;
+    agree: () => void;
+    /** Answers `leave` as agreed, and forgets the held one. */
+    settle: (leave: HeldLeave | undefined) => void;
+}>;
+/**
+ * The state every leave guard shares. `when` defaults to whether anything
+ * reports unsaved changes.
+ *
+ * @example
+ * const guard = leaveGuardOf(useLeaveGuardCore(isDirty));
+ */
+export declare const useLeaveGuardCore: (when: boolean | undefined) => LeaveGuardCore;
+/**
+ * The guard over `core`, answering for `routed` — a leave a router holds — or
+ * else the one handed to `hold`.
+ *
+ * @example
+ * const guard = leaveGuardOf(core, blocker.status === "blocked" ? { proceed: blocker.proceed, stay: blocker.reset } : undefined);
+ */
+export declare const leaveGuardOf: (core: LeaveGuardCore, routed?: HeldLeave) => LeaveGuard;
+/**
+ * Guards against leaving while `when`, such as a form with unsaved changes,
+ * without knowing the router: the browser asks before a reload or a close, and
+ * whatever blocks an in-app leave hands it to `hold`. `when` defaults to
+ * whether anything reports unsaved changes, which every `Form.Root` does.
+ * `@igne-agency/react-web-ui/unsaved-changes/tanstack-router` wires it to
+ * TanStack Router.
+ *
+ * @example
+ * const guard = useLeaveGuard();
+ * const close = () => (guard.blocking ? guard.hold(() => setOpen(false)) : setOpen(false));
+ * <LeaveGuardDialog guard={guard} title="Discard your changes?" confirmLabel="Discard" cancelLabel="Keep editing" />
+ */
+export declare const useLeaveGuard: (when?: boolean) => LeaveGuard;
+/**
+ * What a `LeaveGuardDialog` takes: the guard it answers for and the question's
+ * copy. `tone` defaults to `"danger"`, since leaving loses the changes.
+ */
+export type LeaveGuardDialogProps = Pick<ConfirmDialogProps, "title" | "description" | "confirmLabel" | "cancelLabel" | "tone"> & Readonly<{
+    guard: LeaveGuard;
+}>;
+/**
+ * The question a guarded page asks when it is left: a `ConfirmDialog` that
+ * lets the held leave through or stays.
+ *
+ * @example
+ * <LeaveGuardDialog
+ * 	guard={guard}
+ * 	title="Discard your changes?"
+ * 	confirmLabel="Discard"
+ * 	cancelLabel="Keep editing"
+ * />
+ */
+export declare const LeaveGuardDialog: ({ guard, tone, ...copy }: LeaveGuardDialogProps) => ReactNode;

package/dist/lib/unsaved-changes/leave-guard.js

@@ -0,0 +1,170 @@
+import { ConfirmDialog } from "../../components/confirm-dialog/confirm-dialog.js";
+import { useBeforeUnload } from "./before-unload.js";
+import { useUnsavedChanges } from "./registry.js";
+import { c } from "react/compiler-runtime";
+import { useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/lib/unsaved-changes/leave-guard.tsx
+var STAY = () => void 0;
+/**
+* The state every leave guard shares. `when` defaults to whether anything
+* reports unsaved changes.
+*
+* @example
+* const guard = leaveGuardOf(useLeaveGuardCore(isDirty));
+*/
+var useLeaveGuardCore = (when) => {
+	const $ = c(6);
+	const unsaved = useUnsavedChanges();
+	const guarding = when ?? unsaved;
+	const [held, setHeld] = useState(void 0);
+	const [leaving, setLeaving] = useState(false);
+	const agreed = useRef(false);
+	if (leaving && !guarding) setLeaving(false);
+	const t0 = guarding && !leaving;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = (proceed) => {
+			agreed.current = false;
+			setHeld({
+				proceed,
+				stay: STAY
+			});
+		};
+		t2 = () => {
+			agreed.current = true;
+		};
+		t3 = (leave) => {
+			const proceeding = agreed.current;
+			agreed.current = false;
+			setHeld(void 0);
+			if (leave === void 0) return;
+			if (proceeding) {
+				setLeaving(true);
+				leave.proceed();
+			} else leave.stay();
+		};
+		$[0] = t1;
+		$[1] = t2;
+		$[2] = t3;
+	} else {
+		t1 = $[0];
+		t2 = $[1];
+		t3 = $[2];
+	}
+	let t4;
+	if ($[3] !== held || $[4] !== t0) {
+		t4 = {
+			blocking: t0,
+			held,
+			hold: t1,
+			agree: t2,
+			settle: t3
+		};
+		$[3] = held;
+		$[4] = t0;
+		$[5] = t4;
+	} else t4 = $[5];
+	return t4;
+};
+/**
+* The guard over `core`, answering for `routed` — a leave a router holds — or
+* else the one handed to `hold`.
+*
+* @example
+* const guard = leaveGuardOf(core, blocker.status === "blocked" ? { proceed: blocker.proceed, stay: blocker.reset } : undefined);
+*/
+var leaveGuardOf = (core, routed) => {
+	const leave = routed ?? core.held;
+	return {
+		blocking: core.blocking,
+		asking: leave !== void 0,
+		hold: core.hold,
+		agree: core.agree,
+		settle: () => core.settle(leave)
+	};
+};
+/**
+* Guards against leaving while `when`, such as a form with unsaved changes,
+* without knowing the router: the browser asks before a reload or a close, and
+* whatever blocks an in-app leave hands it to `hold`. `when` defaults to
+* whether anything reports unsaved changes, which every `Form.Root` does.
+* `@igne-agency/react-web-ui/unsaved-changes/tanstack-router` wires it to
+* TanStack Router.
+*
+* @example
+* const guard = useLeaveGuard();
+* const close = () => (guard.blocking ? guard.hold(() => setOpen(false)) : setOpen(false));
+* <LeaveGuardDialog guard={guard} title="Discard your changes?" confirmLabel="Discard" cancelLabel="Keep editing" />
+*/
+var useLeaveGuard = (when) => {
+	const $ = c(2);
+	const t0 = useLeaveGuardCore(when);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = leaveGuardOf(t0);
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const guard = t1;
+	useBeforeUnload(guard.blocking);
+	return guard;
+};
+/**
+* The question a guarded page asks when it is left: a `ConfirmDialog` that
+* lets the held leave through or stays.
+*
+* @example
+* <LeaveGuardDialog
+* 	guard={guard}
+* 	title="Discard your changes?"
+* 	confirmLabel="Discard"
+* 	cancelLabel="Keep editing"
+* />
+*/
+var LeaveGuardDialog = (t0) => {
+	const $ = c(12);
+	let copy;
+	let guard;
+	let t1;
+	if ($[0] !== t0) {
+		({guard, tone: t1, ...copy} = t0);
+		$[0] = t0;
+		$[1] = copy;
+		$[2] = guard;
+		$[3] = t1;
+	} else {
+		copy = $[1];
+		guard = $[2];
+		t1 = $[3];
+	}
+	const tone = t1 === void 0 ? "danger" : t1;
+	let t2;
+	if ($[4] !== guard) {
+		t2 = (open) => {
+			if (!open) guard.settle();
+		};
+		$[4] = guard;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== copy || $[7] !== guard.agree || $[8] !== guard.asking || $[9] !== t2 || $[10] !== tone) {
+		t3 = /* @__PURE__ */ jsx(ConfirmDialog, {
+			...copy,
+			open: guard.asking,
+			onOpenChange: t2,
+			onConfirm: guard.agree,
+			tone
+		});
+		$[6] = copy;
+		$[7] = guard.agree;
+		$[8] = guard.asking;
+		$[9] = t2;
+		$[10] = tone;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
+};
+export { LeaveGuardDialog, leaveGuardOf, useLeaveGuard, useLeaveGuardCore };

package/dist/lib/unsaved-changes/policy.d.ts

@@ -0,0 +1,24 @@
+import type { AnyFormState } from "@tanstack/react-form";
+/**
+ * Decides from a form's live state whether leaving would lose unsaved
+ * changes. `Form.Root` reports into the leave guards while it returns true.
+ *
+ * @example
+ * const policy: LeaveGuardPolicy = state => state.isDirty && !state.isSubmitted;
+ */
+export type LeaveGuardPolicy = (state: AnyFormState) => boolean;
+/**
+ * Guards while the form's values were edited away from their defaults and are
+ * not being submitted. The default for `Form.Root`.
+ *
+ * @example
+ * <Form.Root form={form} leaveGuard={whenDirty}>…</Form.Root>
+ */
+export declare const whenDirty: LeaveGuardPolicy;
+/**
+ * Never guards, for a form whose edits need not survive leaving.
+ *
+ * @example
+ * <Form.Root form={form} leaveGuard={never}>…</Form.Root>
+ */
+export declare const never: LeaveGuardPolicy;

package/dist/lib/unsaved-changes/policy.js

@@ -0,0 +1,17 @@
+// src/lib/unsaved-changes/policy.ts
+/**
+* Guards while the form's values were edited away from their defaults and are
+* not being submitted. The default for `Form.Root`.
+*
+* @example
+* <Form.Root form={form} leaveGuard={whenDirty}>…</Form.Root>
+*/
+var whenDirty = (state) => state.isDirty && !state.isDefaultValue && !state.isSubmitting;
+/**
+* Never guards, for a form whose edits need not survive leaving.
+*
+* @example
+* <Form.Root form={form} leaveGuard={never}>…</Form.Root>
+*/
+var never = () => false;
+export { never, whenDirty };

package/dist/lib/unsaved-changes/registry.d.ts

@@ -0,0 +1,36 @@
+/** A record of what has unsaved changes right now, which a leave guard reads. */
+export type UnsavedChangesRegistry = Readonly<{
+    /** Records one source of unsaved changes, until the returned function is called. */
+    register: () => () => void;
+    /** Whether any source has unsaved changes. */
+    hasUnsavedChanges: () => boolean;
+    /** Calls `listener` whenever that answer may have changed, until the returned function is called. */
+    subscribe: (listener: () => void) => () => void;
+}>;
+/**
+ * Creates an empty registry of unsaved changes.
+ *
+ * @example
+ * const registry = createUnsavedChangesRegistry();
+ * const unregister = registry.register();
+ * registry.hasUnsavedChanges(); // true
+ * unregister();
+ * registry.hasUnsavedChanges(); // false
+ */
+export declare const createUnsavedChangesRegistry: () => UnsavedChangesRegistry;
+/**
+ * Reports unsaved changes to the page's leave guards while `dirty`, and stops
+ * once it is not or the caller unmounts. `Form.Root` reports its form.
+ *
+ * @example
+ * useReportUnsavedChanges(editor.isDirty);
+ */
+export declare const useReportUnsavedChanges: (dirty: boolean) => void;
+/**
+ * Whether anything on the page reports unsaved changes, such as a `Form.Root`
+ * whose form was edited and not submitted.
+ *
+ * @example
+ * const unsaved = useUnsavedChanges();
+ */
+export declare const useUnsavedChanges: () => boolean;