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

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,24 @@
+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>>;
+type FormComponents = Readonly<Record<string, never>>;
+type AppFormHook<TFields extends AppFieldComponents> = ReturnType<typeof createFormHook<TFields, FormComponents>>;
+/** The form hook `createAppForm` builds, with the form and field-group helpers bound to it. */
+export type AppForm<TFields extends AppFieldComponents> = Readonly<Pick<AppFormHook<TFields>, "useAppForm" | "withForm" | "withFieldGroup">>;
+/**
+ * The app's form hook, with only the bridges it registers. A form reaches each
+ * through `form.AppField` under its key, and 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,
+ * });
+ */
+export declare const createAppForm: <TFields extends AppFieldComponents>(fieldComponents: TFields) => AppForm<TFields>;
+export {};

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

@@ -0,0 +1,36 @@
+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 formComponents = {};
+/**
+* The app's form hook, with only the bridges it registers. A form reaches each
+* through `form.AppField` under its key, and 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,
+* });
+*/
+var createAppForm = (fieldComponents) => {
+	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
+	};
+};
+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,3 @@
+export * from "./create-app-form.ts";
+export { useFieldContext, useFormContext, } from "./context.tsx";
+export * from "./errors.ts";

package/dist/lib/forms/index.js

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

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

@@ -0,0 +1,27 @@
+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 field a bridge renders for, 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.
+ *
+ * @example
+ * const { field, props } = useConnectedField<string>();
+ * <TextField {...props} value={field.state.value} onValueChange={field.handleChange} label={label} optionalLabel={optionalLabel} />
+ */
+export declare const useConnectedField: <TValue>() => ConnectedField<TValue>;

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

@@ -0,0 +1,48 @@
+import { useFieldContext } from "./context.js";
+import { c } from "react/compiler-runtime";
+// src/lib/forms/use-connected-field.ts
+/**
+* The field a bridge renders for, 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.
+*
+* @example
+* const { field, props } = useConnectedField<string>();
+* <TextField {...props} value={field.state.value} onValueChange={field.handleChange} label={label} optionalLabel={optionalLabel} />
+*/
+var useConnectedField = () => {
+	const $ = c(10);
+	const field = useFieldContext();
+	const { meta } = field.state;
+	let t0;
+	if ($[0] !== field.handleBlur || $[1] !== field.name || $[2] !== meta.errors || $[3] !== meta.isDirty || $[4] !== meta.isTouched || $[5] !== meta.isValidating) {
+		t0 = {
+			name: field.name,
+			errors: meta.errors,
+			dirty: meta.isDirty,
+			touched: meta.isTouched,
+			pending: meta.isValidating,
+			onBlur: field.handleBlur
+		};
+		$[0] = field.handleBlur;
+		$[1] = field.name;
+		$[2] = meta.errors;
+		$[3] = meta.isDirty;
+		$[4] = meta.isTouched;
+		$[5] = meta.isValidating;
+		$[6] = t0;
+	} else t0 = $[6];
+	let t1;
+	if ($[7] !== field || $[8] !== t0) {
+		t1 = {
+			field,
+			props: t0
+		};
+		$[7] = field;
+		$[8] = t0;
+		$[9] = t1;
+	} else t1 = $[9];
+	return t1;
+};
+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 };

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;