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

package/dist/lib/calendar/temporal.module.js

@@ -0,0 +1,80 @@
+import './temporal.css';// src/lib/calendar/temporal.module.scss
+var group = "_group_zywoe_3";
+var input = "_input_zywoe_68";
+var rangeInput = "_rangeInput_zywoe_81";
+var rangeSeparator = "_rangeSeparator_zywoe_93";
+var rangeSpacer = "_rangeSpacer_zywoe_97";
+var segment = "_segment_zywoe_101";
+var trigger = "_trigger_zywoe_117";
+var popover = "_popover_zywoe_133";
+var dialog = "_dialog_zywoe_163";
+var calendar = "_calendar_zywoe_166";
+var header = "_header_zywoe_171";
+var navigation = "_navigation_zywoe_176";
+var navField = "_navField_zywoe_186";
+var navPortal = "_navPortal_zywoe_189";
+var navTrigger = "_navTrigger_zywoe_194";
+var navControl = "_navControl_zywoe_195";
+var navInput = "_navInput_zywoe_251";
+var navLabel = "_navLabel_zywoe_254";
+var navSizer = "_navSizer_zywoe_258";
+var navValue = "_navValue_zywoe_268";
+var navChevron = "_navChevron_zywoe_285";
+var navIcon = "_navIcon_zywoe_293";
+var navPositioner = "_navPositioner_zywoe_298";
+var navPopup = "_navPopup_zywoe_312";
+var yearPopup = "_yearPopup_zywoe_337";
+var yearEmpty = "_yearEmpty_zywoe_365";
+var yearList = "_yearList_zywoe_380";
+var navItem = "_navItem_zywoe_388";
+var yearOption = "_yearOption_zywoe_389";
+var navItemIndicator = "_navItemIndicator_zywoe_444";
+var yearIndicator = "_yearIndicator_zywoe_445";
+var yearValue = "_yearValue_zywoe_453";
+var months = "_months_zywoe_457";
+var grid = "_grid_zywoe_464";
+var weekday = "_weekday_zywoe_477";
+var day = "_day_zywoe_484";
+var today = "_today_zywoe_533";
+var rangeCalendar = "_rangeCalendar_zywoe_547";
+var temporal_module_default = {
+	group,
+	input,
+	rangeInput,
+	rangeSeparator,
+	rangeSpacer,
+	segment,
+	trigger,
+	popover,
+	dialog,
+	calendar,
+	header,
+	navigation,
+	navField,
+	navPortal,
+	navTrigger,
+	navControl,
+	navInput,
+	navLabel,
+	navSizer,
+	navValue,
+	navChevron,
+	navIcon,
+	navPositioner,
+	navPopup,
+	yearPopup,
+	yearEmpty,
+	yearList,
+	navItem,
+	yearOption,
+	navItemIndicator,
+	yearIndicator,
+	yearValue,
+	months,
+	grid,
+	weekday,
+	day,
+	today,
+	rangeCalendar
+};
+export { calendar, day, temporal_module_default as default, dialog, grid, group, header, input, months, navChevron, navControl, navField, navIcon, navInput, navItem, navItemIndicator, navLabel, navPopup, navPortal, navPositioner, navSizer, navTrigger, navValue, navigation, popover, rangeCalendar, rangeInput, rangeSeparator, rangeSpacer, segment, today, trigger, weekday, yearEmpty, yearIndicator, yearList, yearOption, yearPopup, yearValue };

package/dist/lib/format-bytes.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Formats a byte count into a short, human-readable size, scaled to the
+ * largest fitting unit (base 1024, as used for file sizes). The number is
+ * formatted in `locale`; the symbols are the locale-invariant SI ones.
+ *
+ * @example
+ * formatBytes(1536, "nl-NL"); // "1,5 kB"
+ * formatBytes(10, "en-US"); // "10 B"
+ */
+export declare const formatBytes: (bytes: number, locale: string) => string;

package/dist/lib/format-bytes.js

@@ -0,0 +1,22 @@
+// src/lib/format-bytes.ts
+var BYTE_SYMBOLS = [
+	"B",
+	"kB",
+	"MB",
+	"GB",
+	"TB"
+];
+/**
+* Formats a byte count into a short, human-readable size, scaled to the
+* largest fitting unit (base 1024, as used for file sizes). The number is
+* formatted in `locale`; the symbols are the locale-invariant SI ones.
+*
+* @example
+* formatBytes(1536, "nl-NL"); // "1,5 kB"
+* formatBytes(10, "en-US"); // "10 B"
+*/
+var formatBytes = (bytes, locale) => {
+	const exponent = Math.min(bytes <= 0 ? 0 : Math.floor(Math.log2(bytes) / 10), BYTE_SYMBOLS.length - 1);
+	return `${new Intl.NumberFormat(locale, { maximumFractionDigits: exponent === 0 ? 0 : 1 }).format(bytes / 1024 ** exponent)} ${BYTE_SYMBOLS[exponent] ?? "B"}`;
+};
+export { formatBytes };

package/dist/lib/forms/context.d.ts

@@ -0,0 +1,32 @@
+import { createFormHookContexts } from "@tanstack/react-form";
+type FormHookContexts = ReturnType<typeof createFormHookContexts>;
+/**
+ * The field context the form hook is built on, kept apart from the hook so a
+ * bridge can read its field without importing every other bridge.
+ *
+ * @example
+ * <fieldContext.Provider value={field}>{children}</fieldContext.Provider>
+ */
+export declare const fieldContext: FormHookContexts["fieldContext"];
+/**
+ * The form context the form hook is built on, which `Form.Root` provides.
+ *
+ * @example
+ * <formContext.Provider value={form}>{children}</formContext.Provider>
+ */
+export declare const formContext: FormHookContexts["formContext"];
+/**
+ * The field a bridge is rendered for, inside `form.AppField`.
+ *
+ * @example
+ * const field = useFieldContext<string>();
+ */
+export declare const useFieldContext: FormHookContexts["useFieldContext"];
+/**
+ * The form a part is rendered inside, under `Form.Root` or `form.AppForm`.
+ *
+ * @example
+ * const form = useFormContext();
+ */
+export declare const useFormContext: FormHookContexts["useFormContext"];
+export {};

package/dist/lib/forms/context.js

@@ -0,0 +1,33 @@
+import { createFormHookContexts } from "@tanstack/react-form";
+// src/lib/forms/context.tsx
+var contexts = createFormHookContexts();
+/**
+* The field context the form hook is built on, kept apart from the hook so a
+* bridge can read its field without importing every other bridge.
+*
+* @example
+* <fieldContext.Provider value={field}>{children}</fieldContext.Provider>
+*/
+var fieldContext = contexts.fieldContext;
+/**
+* The form context the form hook is built on, which `Form.Root` provides.
+*
+* @example
+* <formContext.Provider value={form}>{children}</formContext.Provider>
+*/
+var formContext = contexts.formContext;
+/**
+* The field a bridge is rendered for, inside `form.AppField`.
+*
+* @example
+* const field = useFieldContext<string>();
+*/
+var useFieldContext = contexts.useFieldContext;
+/**
+* The form a part is rendered inside, under `Form.Root` or `form.AppForm`.
+*
+* @example
+* const form = useFormContext();
+*/
+var useFormContext = contexts.useFormContext;
+export { fieldContext, formContext, useFieldContext, useFormContext };

package/dist/lib/forms/create-app-form.d.ts

@@ -0,0 +1,33 @@
+import { createFormHook } from "@tanstack/react-form";
+import type { ReactNode } from "react";
+type Bridge = Readonly<{
+    bivarianceHack(props: object): ReactNode;
+}>["bivarianceHack"];
+/** The bridges a form hook renders through `form.AppField`, by the name a field reaches each under. */
+export type AppFieldComponents = Readonly<Record<string, Bridge>>;
+/** The bridges that read a whole form rather than one field, such as `TSFFieldGroup`, by the name a form reaches each under. */
+export type AppFormComponents = Readonly<Record<string, Bridge>>;
+/** A form hook's form components when it registers none. */
+export type NoFormComponents = Readonly<Record<string, never>>;
+type AppFormHook<TFields extends AppFieldComponents, TForms extends AppFormComponents> = ReturnType<typeof createFormHook<TFields, TForms>>;
+/** The form hook `createAppForm` builds, with the form and field-group helpers bound to it. */
+export type AppForm<TFields extends AppFieldComponents, TForms extends AppFormComponents = NoFormComponents> = Readonly<Pick<AppFormHook<TFields, TForms>, "useAppForm" | "withForm" | "withFieldGroup">>;
+/** `createAppForm`, with or without form components. */
+export type CreateAppForm = {
+    <TFields extends AppFieldComponents>(fieldComponents: TFields): AppForm<TFields>;
+    <TFields extends AppFieldComponents, TForms extends AppFormComponents>(fieldComponents: TFields, formComponents: TForms): AppForm<TFields, TForms>;
+};
+/**
+ * The app's form hook, with only the bridges it registers. A form reaches each
+ * field bridge through `form.AppField` under its key, and each form component,
+ * such as `TSFFieldGroup`, as `form.<key>`. A failed submit focuses the first
+ * invalid control of the `Form.Root` the form renders in.
+ *
+ * @example
+ * export const { useAppForm, withForm, withFieldGroup } = createAppForm(
+ * 	{ TextField: TSFTextField, SelectField: TSFSelectField },
+ * 	{ FieldGroup: TSFFieldGroup },
+ * );
+ */
+export declare const createAppForm: CreateAppForm;
+export {};

package/dist/lib/forms/create-app-form.js

@@ -0,0 +1,45 @@
+import { fieldContext, formContext } from "./context.js";
+import { focusFirstInvalidField } from "./failed-submit.js";
+import { createFormHook } from "@tanstack/react-form";
+// src/lib/forms/create-app-form.ts
+var noFormComponents = {};
+/**
+* A form hook over the given bridges, whose failed submit focuses the first
+* invalid control of the `Form.Root` the form renders in.
+*
+* @example
+* const { useAppForm } = buildAppForm({ TextField: TSFTextField }, {});
+*/
+var buildAppForm = (fieldComponents, formComponents) => {
+	const hook = createFormHook({
+		fieldContext,
+		formContext,
+		fieldComponents,
+		formComponents
+	});
+	return {
+		useAppForm: (options) => hook.useAppForm({
+			...options,
+			onSubmitInvalid: (props) => {
+				options.onSubmitInvalid?.(props);
+				focusFirstInvalidField(props.formApi);
+			}
+		}),
+		withForm: hook.withForm,
+		withFieldGroup: hook.withFieldGroup
+	};
+};
+/**
+* The app's form hook, with only the bridges it registers. A form reaches each
+* field bridge through `form.AppField` under its key, and each form component,
+* such as `TSFFieldGroup`, as `form.<key>`. A failed submit focuses the first
+* invalid control of the `Form.Root` the form renders in.
+*
+* @example
+* export const { useAppForm, withForm, withFieldGroup } = createAppForm(
+* 	{ TextField: TSFTextField, SelectField: TSFSelectField },
+* 	{ FieldGroup: TSFFieldGroup },
+* );
+*/
+var createAppForm = (fieldComponents, formComponents) => formComponents === void 0 ? buildAppForm(fieldComponents, noFormComponents) : buildAppForm(fieldComponents, formComponents);
+export { createAppForm };

package/dist/lib/forms/errors.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Errors of any shape as the lines a field or form shows, each once: strings as
+ * they are, anything with a string `message` (a Standard Schema issue, an
+ * `Error`) as that message, and lists flattened. Anything else is dropped.
+ *
+ * @example
+ * normalizeFieldErrors(["Too short", { message: "Not an address" }]); // ["Too short", "Not an address"]
+ */
+export declare const normalizeFieldErrors: (errors: unknown) => readonly string[];
+/** The part of a form's state `getFieldErrors` reads. */
+export type FieldMetaState = Readonly<{
+    fieldMeta: Readonly<Record<string, Readonly<{
+        errors: unknown;
+    }> | undefined>>;
+}>;
+/**
+ * The error lines of the named fields, in the order they are named, such as
+ * the errors of a group that shows them in one place.
+ *
+ * @example
+ * getFieldErrors(form.state, ["start", "end"]); // ["Enter a start date."]
+ */
+export declare const getFieldErrors: <TState extends FieldMetaState>(state: TState, fields: readonly (keyof TState["fieldMeta"] & string)[]) => readonly string[];

package/dist/lib/forms/errors.js

@@ -0,0 +1,25 @@
+// src/lib/forms/errors.ts
+var linesOf = (errors) => {
+	if (Array.isArray(errors)) return errors.flatMap(linesOf);
+	if (typeof errors === "string") return errors === "" ? [] : [errors];
+	if (typeof errors === "object" && errors !== null && "message" in errors && typeof errors.message === "string") return linesOf(errors.message);
+	return [];
+};
+/**
+* Errors of any shape as the lines a field or form shows, each once: strings as
+* they are, anything with a string `message` (a Standard Schema issue, an
+* `Error`) as that message, and lists flattened. Anything else is dropped.
+*
+* @example
+* normalizeFieldErrors(["Too short", { message: "Not an address" }]); // ["Too short", "Not an address"]
+*/
+var normalizeFieldErrors = (errors) => [...new Set(linesOf(errors))];
+/**
+* The error lines of the named fields, in the order they are named, such as
+* the errors of a group that shows them in one place.
+*
+* @example
+* getFieldErrors(form.state, ["start", "end"]); // ["Enter a start date."]
+*/
+var getFieldErrors = (state, fields) => fields.flatMap((field) => normalizeFieldErrors(state.fieldMeta[field]?.errors));
+export { getFieldErrors, normalizeFieldErrors };

package/dist/lib/forms/failed-submit.d.ts

@@ -0,0 +1,16 @@
+import type { AnyFormApi } from "@tanstack/react-form";
+/**
+ * Ties a form to the `Form.Root` it renders in, so a failed submit of that form
+ * can focus its first invalid control.
+ *
+ * @example
+ * useFailedSubmitFocus(form, () => setInvalidSubmits(count => count + 1));
+ */
+export declare const useFailedSubmitFocus: (form: AnyFormApi, focusFirstInvalid: () => void) => void;
+/**
+ * Focuses the first invalid control of the `Form.Root` a form renders in.
+ *
+ * @example
+ * onSubmitInvalid: ({ formApi }) => focusFirstInvalidField(formApi),
+ */
+export declare const focusFirstInvalidField: (form: AnyFormApi) => void;

package/dist/lib/forms/failed-submit.js

@@ -0,0 +1,44 @@
+import { c } from "react/compiler-runtime";
+import { useEffect } from "react";
+// src/lib/forms/failed-submit.tsx
+var invalidFocus = /* @__PURE__ */ new WeakMap();
+/**
+* Ties a form to the `Form.Root` it renders in, so a failed submit of that form
+* can focus its first invalid control.
+*
+* @example
+* useFailedSubmitFocus(form, () => setInvalidSubmits(count => count + 1));
+*/
+var useFailedSubmitFocus = (form, focusFirstInvalid) => {
+	const $ = c(6);
+	let t0;
+	if ($[0] !== focusFirstInvalid || $[1] !== form.store) {
+		t0 = () => {
+			invalidFocus.set(form.store, focusFirstInvalid);
+			return () => {
+				if (invalidFocus.get(form.store) === focusFirstInvalid) invalidFocus.delete(form.store);
+			};
+		};
+		$[0] = focusFirstInvalid;
+		$[1] = form.store;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== focusFirstInvalid || $[4] !== form) {
+		t1 = [form, focusFirstInvalid];
+		$[3] = focusFirstInvalid;
+		$[4] = form;
+		$[5] = t1;
+	} else t1 = $[5];
+	useEffect(t0, t1);
+};
+/**
+* Focuses the first invalid control of the `Form.Root` a form renders in.
+*
+* @example
+* onSubmitInvalid: ({ formApi }) => focusFirstInvalidField(formApi),
+*/
+var focusFirstInvalidField = (form) => {
+	invalidFocus.get(form.store)?.();
+};
+export { focusFirstInvalidField, useFailedSubmitFocus };

package/dist/lib/forms/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./create-app-form.ts";
+export { useFieldContext, useFormContext, } from "./context.tsx";
+export * from "./errors.ts";
+export * from "./use-connected-field.ts";

package/dist/lib/forms/index.js

@@ -0,0 +1,5 @@
+import { createAppForm } from "./create-app-form.js";
+import { useFieldContext, useFormContext } from "./context.js";
+import { getFieldErrors, normalizeFieldErrors } from "./errors.js";
+import { useConnectedField } from "./use-connected-field.js";
+export { createAppForm, getFieldErrors, normalizeFieldErrors, useConnectedField, useFieldContext, useFormContext };

package/dist/lib/forms/use-connected-field.d.ts

@@ -0,0 +1,30 @@
+import type { FieldBlurHandler } from "../../components/field/field.tsx";
+import { useFieldContext } from "./context.tsx";
+/** The field props a bridge passes at the top level, read off its field. */
+export type ConnectedFieldProps = Readonly<{
+    name: string;
+    errors: unknown;
+    dirty: boolean;
+    touched: boolean;
+    pending: boolean;
+    onBlur: FieldBlurHandler;
+}>;
+/** What `useConnectedField` reads off its field. */
+export type ConnectedField<TValue> = Readonly<{
+    field: ReturnType<typeof useFieldContext<TValue>>;
+    props: ConnectedFieldProps;
+}>;
+/**
+ * The TanStack Form field a control renders in, and the props every field
+ * takes from it: its name, its errors as the validators returned them,
+ * `dirty`, `touched`, `pending` while it validates, and the blur handler. The
+ * value and its change handler are the control's own. Given the field's
+ * label, it tells an enclosing field group, whose `formatError` receives it.
+ *
+ * @example
+ * const { field, props: { name, onBlur, ...state } } = useConnectedField<string>(label);
+ * <TextInput.Root {...state} value={field.state.value} onValueChange={field.handleChange} optionalLabel="optional">
+ * 	<TextInput.Input name={name} onBlur={onBlur} />
+ * </TextInput.Root>
+ */
+export declare const useConnectedField: <TValue>(label?: string) => ConnectedField<TValue>;

package/dist/lib/forms/use-connected-field.js

@@ -0,0 +1,74 @@
+import { FieldGroupContext } from "../../components/field/field-group-context.js";
+import { useFieldContext } from "./context.js";
+import { c } from "react/compiler-runtime";
+import { useContext, useLayoutEffect } from "react";
+// src/lib/forms/use-connected-field.ts
+/**
+* The TanStack Form field a control renders in, and the props every field
+* takes from it: its name, its errors as the validators returned them,
+* `dirty`, `touched`, `pending` while it validates, and the blur handler. The
+* value and its change handler are the control's own. Given the field's
+* label, it tells an enclosing field group, whose `formatError` receives it.
+*
+* @example
+* const { field, props: { name, onBlur, ...state } } = useConnectedField<string>(label);
+* <TextInput.Root {...state} value={field.state.value} onValueChange={field.handleChange} optionalLabel="optional">
+* 	<TextInput.Input name={name} onBlur={onBlur} />
+* </TextInput.Root>
+*/
+var useConnectedField = (label) => {
+	const $ = c(15);
+	const field = useFieldContext();
+	const registerLabel = useContext(FieldGroupContext)?.registerLabel;
+	const { name } = field;
+	const { meta } = field.state;
+	let t0;
+	let t1;
+	if ($[0] !== label || $[1] !== name || $[2] !== registerLabel) {
+		t0 = () => registerLabel === void 0 || label === void 0 ? void 0 : registerLabel(name, label);
+		t1 = [
+			registerLabel,
+			name,
+			label
+		];
+		$[0] = label;
+		$[1] = name;
+		$[2] = registerLabel;
+		$[3] = t0;
+		$[4] = t1;
+	} else {
+		t0 = $[3];
+		t1 = $[4];
+	}
+	useLayoutEffect(t0, t1);
+	let t2;
+	if ($[5] !== field.handleBlur || $[6] !== meta.errors || $[7] !== meta.isDirty || $[8] !== meta.isTouched || $[9] !== meta.isValidating || $[10] !== name) {
+		t2 = {
+			name,
+			errors: meta.errors,
+			dirty: meta.isDirty,
+			touched: meta.isTouched,
+			pending: meta.isValidating,
+			onBlur: field.handleBlur
+		};
+		$[5] = field.handleBlur;
+		$[6] = meta.errors;
+		$[7] = meta.isDirty;
+		$[8] = meta.isTouched;
+		$[9] = meta.isValidating;
+		$[10] = name;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	if ($[12] !== field || $[13] !== t2) {
+		t3 = {
+			field,
+			props: t2
+		};
+		$[12] = field;
+		$[13] = t2;
+		$[14] = t3;
+	} else t3 = $[14];
+	return t3;
+};
+export { useConnectedField };

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

@@ -0,0 +1,5 @@
+export * from "./use-busy-phase.ts";
+export * from "./use-media-query.ts";
+export * from "./use-presence.ts";
+export { type RowSelectionRequest, type RowSelectionView, useRowSelection, } from "./use-row-selection.ts";
+export * from "./use-theme.ts";

package/dist/lib/hooks/index.js

@@ -0,0 +1,6 @@
+import { useBusyPhase } from "./use-busy-phase.js";
+import { useMediaQuery } from "./use-media-query.js";
+import { usePresence } from "./use-presence.js";
+import { useRowSelection } from "./use-row-selection.js";
+import { useTheme } from "./use-theme.js";
+export { useBusyPhase, useMediaQuery, usePresence, useRowSelection, useTheme };

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

@@ -0,0 +1,31 @@
+/**
+ * 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;

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,8 @@
+/**
+ * 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;

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 };