@igne-agency/react-web-ui 0.3.0 → 0.4.0

package/dist/components/spinner/spinner.module.js

@@ -1,4 +1,19 @@
 import './spinner.css';// src/components/spinner/spinner.module.scss
-var spinner = "_spinner_1old1_3";
-var spinner_module_default = { spinner };
-export { spinner_module_default as default, spinner };
+var spinner = "_spinner_1ojim_27";
+var ring = "_ring_1ojim_31";
+var arc = "_arc_1ojim_34";
+var loadingPulse = "_loading-pulse_1ojim_1";
+var spinnerTurn = "_spinner-turn_1ojim_1";
+var spinnerSweep = "_spinner-sweep_1ojim_1";
+var spinner_module_default = {
+	spinner,
+	ring,
+	arc,
+	"loading-pulse": "_loading-pulse_1ojim_1",
+	loadingPulse,
+	"spinner-turn": "_spinner-turn_1ojim_1",
+	spinnerTurn,
+	"spinner-sweep": "_spinner-sweep_1ojim_1",
+	spinnerSweep
+};
+export { arc, spinner_module_default as default, loadingPulse, ring, spinner, spinnerSweep, spinnerTurn };

package/dist/components/stale/stale.d.ts

@@ -1,5 +1,6 @@
-import { type ReactNode } from "react";
-export type StaleRootProps = Readonly<{
+import { useRender } from "@base-ui/react/use-render";
+import { type ComponentProps, type ReactElement, type ReactNode } from "react";
+export type StaleRootProps = useRender.ComponentProps<"div"> & Readonly<{
     /** Whether a background refresh is in flight. */
     busy: boolean;
     /** Ms of `busy` before anything is shown at all. @default 150 */
@@ -13,35 +14,30 @@ export type StaleRootProps = Readonly<{
     slowAfter?: number;
     /** Ms of `busy` before the retry appears. @default 8000 */
     stuckAfter?: number;
-    children?: ReactNode;
-    className?: string;
 }>;
-export type StaleContentProps = Readonly<{
-    children?: ReactNode;
-    className?: string;
-}>;
-export type StaleOverlayProps = Readonly<{
-    children?: ReactNode;
-    className?: string;
-}>;
-export type StaleMessageProps = Readonly<{
+export type StaleContentProps = useRender.ComponentProps<"div">;
+export type StaleOverlayProps = useRender.ComponentProps<"div">;
+export type StaleMessageProps = useRender.ComponentProps<"p"> & Readonly<{
     /** The moving indicator above the copy, such as the app's animated logo. @default <Spinner size={2} /> */
     illustration?: ReactNode;
     /** What the overlay says, such as "This is taking longer than usual." */
     children: ReactNode;
-    className?: string;
 }>;
-export type StaleRetryProps = Readonly<{
+export type StaleRetryProps = Omit<ComponentProps<"button">, "ref" | "children" | "onClick"> & Readonly<{
     onRetry: () => void;
     /** The retry's label, such as "Try again". */
     children: ReactNode;
-    className?: string;
 }>;
-declare const Root: ({ busy, busyAfter, busyMinDuration, slowAfter, stuckAfter, children, className, }: StaleRootProps) => ReactNode;
-declare const Content: ({ children, className, }: StaleContentProps) => ReactNode;
-declare const Overlay: ({ children, className, }: StaleOverlayProps) => ReactNode;
-declare const Message: ({ illustration, children, className, }: StaleMessageProps) => ReactNode;
-declare const Retry: ({ onRetry, children, className, }: StaleRetryProps) => ReactNode;
+/** The region that refreshes, holding how long the refresh has run in its `data-phase`. */
+declare const Root: ({ busy, busyAfter, busyMinDuration, slowAfter, stuckAfter, render, className, ref, ...props }: StaleRootProps) => ReactNode;
+/** The content that stays on screen: dimmed and busy once the refresh is seen, inert once overlaid. */
+declare const Content: ({ render, className, ref, ...props }: StaleContentProps) => ReactElement;
+/** What covers the content once the refresh is slow, fading in and out. */
+declare const Overlay: ({ render, className, ref, ...props }: StaleOverlayProps) => ReactElement | null;
+/** The overlay's status: a moving indicator over its copy. */
+declare const Message: ({ illustration, render, className, ref, children, ...props }: StaleMessageProps) => ReactElement;
+/** The way out once the refresh looks stuck: a button that appears only then. */
+declare const Retry: ({ onRetry, children, className, ...props }: StaleRetryProps) => ReactNode;
 type StaleNamespace = Readonly<{
     Root: typeof Root;
     Content: typeof Content;

package/dist/components/stale/stale.js

@@ -5,20 +5,53 @@ import { Button } from "../button/button.js";
 import { Spinner } from "../spinner/spinner.js";
 import stale_module_default from "./stale.module.js";
 import { c } from "react/compiler-runtime";
-import { createContext, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useRef } from "react";
 // src/components/stale/stale.tsx
 var StaleContext = createContext(null);
 var usePhase = () => {
 	return useRequiredContext(StaleContext, "Stale.* must be rendered inside <Stale.Root>.");
 };
 var isOverlaid = (phase) => phase === "slow" || phase === "stuck";
+/** The region that refreshes, holding how long the refresh has run in its `data-phase`. */
 var Root = (t0) => {
-	const $ = c(15);
-	const { busy, busyAfter, busyMinDuration, slowAfter, stuckAfter, children, className } = t0;
+	const $ = c(29);
+	let busy;
+	let busyAfter;
+	let busyMinDuration;
+	let className;
+	let props;
+	let ref;
+	let render;
+	let slowAfter;
+	let stuckAfter;
+	if ($[0] !== t0) {
+		({busy, busyAfter, busyMinDuration, slowAfter, stuckAfter, render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = busy;
+		$[2] = busyAfter;
+		$[3] = busyMinDuration;
+		$[4] = className;
+		$[5] = props;
+		$[6] = ref;
+		$[7] = render;
+		$[8] = slowAfter;
+		$[9] = stuckAfter;
+	} else {
+		busy = $[1];
+		busyAfter = $[2];
+		busyMinDuration = $[3];
+		className = $[4];
+		props = $[5];
+		ref = $[6];
+		render = $[7];
+		slowAfter = $[8];
+		stuckAfter = $[9];
+	}
 	let t1;
-	if ($[0] !== busy || $[1] !== busyAfter || $[2] !== busyMinDuration || $[3] !== slowAfter || $[4] !== stuckAfter) {
+	if ($[10] !== busy || $[11] !== busyAfter || $[12] !== busyMinDuration || $[13] !== slowAfter || $[14] !== stuckAfter) {
 		t1 = {
 			busy,
 			busyAfter,
@@ -26,184 +59,329 @@ var Root = (t0) => {
 			slowAfter,
 			stuckAfter
 		};
-		$[0] = busy;
-		$[1] = busyAfter;
-		$[2] = busyMinDuration;
-		$[3] = slowAfter;
-		$[4] = stuckAfter;
-		$[5] = t1;
-	} else t1 = $[5];
+		$[10] = busy;
+		$[11] = busyAfter;
+		$[12] = busyMinDuration;
+		$[13] = slowAfter;
+		$[14] = stuckAfter;
+		$[15] = t1;
+	} else t1 = $[15];
 	const phase = useBusyPhase(t1);
 	let t2;
-	if ($[6] !== className) {
+	if ($[16] !== className) {
 		t2 = clsx(stale_module_default.root, className);
-		$[6] = className;
-		$[7] = t2;
-	} else t2 = $[7];
+		$[16] = className;
+		$[17] = t2;
+	} else t2 = $[17];
 	let t3;
-	if ($[8] !== children || $[9] !== phase || $[10] !== t2) {
-		t3 = /* @__PURE__ */ jsx("div", {
-			className: t2,
+	if ($[18] !== phase || $[19] !== props || $[20] !== t2) {
+		t3 = {
+			...props,
 			"data-phase": phase,
-			children
-		});
-		$[8] = children;
-		$[9] = phase;
-		$[10] = t2;
-		$[11] = t3;
-	} else t3 = $[11];
+			className: t2
+		};
+		$[18] = phase;
+		$[19] = props;
+		$[20] = t2;
+		$[21] = t3;
+	} else t3 = $[21];
 	let t4;
-	if ($[12] !== phase || $[13] !== t3) {
-		t4 = /* @__PURE__ */ jsx(StaleContext, {
+	if ($[22] !== ref || $[23] !== render || $[24] !== t3) {
+		t4 = {
+			defaultTagName: "div",
+			render,
+			ref,
+			props: t3
+		};
+		$[22] = ref;
+		$[23] = render;
+		$[24] = t3;
+		$[25] = t4;
+	} else t4 = $[25];
+	const element = useRender(t4);
+	let t5;
+	if ($[26] !== element || $[27] !== phase) {
+		t5 = /* @__PURE__ */ jsx(StaleContext, {
 			value: phase,
-			children: t3
+			children: element
 		});
-		$[12] = phase;
-		$[13] = t3;
-		$[14] = t4;
-	} else t4 = $[14];
-	return t4;
+		$[26] = element;
+		$[27] = phase;
+		$[28] = t5;
+	} else t5 = $[28];
+	return t5;
 };
+/** The content that stays on screen: dimmed and busy once the refresh is seen, inert once overlaid. */
 var Content = (t0) => {
-	const $ = c(10);
-	const { children, className } = t0;
+	const $ = c(19);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
 	const phase = usePhase();
 	const busy = phase !== "fresh";
-	let t1;
-	if ($[0] !== className) {
-		t1 = clsx(stale_module_default.content, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
+	const t1 = busy || void 0;
 	const t2 = busy || void 0;
-	const t3 = busy || void 0;
+	let t3;
+	if ($[5] !== phase) {
+		t3 = isOverlaid(phase);
+		$[5] = phase;
+		$[6] = t3;
+	} else t3 = $[6];
 	let t4;
-	if ($[2] !== phase) {
-		t4 = isOverlaid(phase);
-		$[2] = phase;
-		$[3] = t4;
-	} else t4 = $[3];
-	let t5;
-	if ($[4] !== children || $[5] !== t1 || $[6] !== t2 || $[7] !== t3 || $[8] !== t4) {
-		t5 = /* @__PURE__ */ jsx("div", {
-			className: t1,
-			"data-busy": t2,
-			"aria-busy": t3,
-			inert: t4,
-			children
-		});
-		$[4] = children;
-		$[5] = t1;
-		$[6] = t2;
-		$[7] = t3;
+	if ($[7] !== className) {
+		t4 = clsx(stale_module_default.content, className);
+		$[7] = className;
 		$[8] = t4;
-		$[9] = t5;
-	} else t5 = $[9];
-	return t5;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== props || $[10] !== t1 || $[11] !== t2 || $[12] !== t3 || $[13] !== t4) {
+		t5 = {
+			...props,
+			"data-busy": t1,
+			"aria-busy": t2,
+			inert: t3,
+			className: t4
+		};
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== ref || $[16] !== render || $[17] !== t5) {
+		t6 = {
+			defaultTagName: "div",
+			render,
+			ref,
+			props: t5
+		};
+		$[15] = ref;
+		$[16] = render;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	return useRender(t6);
 };
+/** What covers the content once the refresh is slow, fading in and out. */
 var Overlay = (t0) => {
-	const $ = c(8);
-	const { children, className } = t0;
+	const $ = c(20);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
 	const phase = usePhase();
 	const overlayRef = useRef(null);
 	let t1;
-	if ($[0] !== phase) {
+	if ($[5] !== phase) {
 		t1 = isOverlaid(phase);
-		$[0] = phase;
-		$[1] = t1;
-	} else t1 = $[1];
+		$[5] = phase;
+		$[6] = t1;
+	} else t1 = $[6];
 	const presence = usePresence(t1, overlayRef);
-	if (!presence.mounted) return null;
 	let t2;
-	if ($[2] !== className) {
-		t2 = clsx(stale_module_default.overlay, className);
-		$[2] = className;
-		$[3] = t2;
-	} else t2 = $[3];
-	let t3;
-	if ($[4] !== children || $[5] !== presence.props || $[6] !== t2) {
-		t3 = /* @__PURE__ */ jsx("div", {
-			ref: overlayRef,
-			className: t2,
-			...presence.props,
-			children
-		});
-		$[4] = children;
-		$[5] = presence.props;
-		$[6] = t2;
-		$[7] = t3;
-	} else t3 = $[7];
-	return t3;
+	if ($[7] !== ref) {
+		t2 = ref === void 0 ? overlayRef : [overlayRef, ref];
+		$[7] = ref;
+		$[8] = t2;
+	} else t2 = $[8];
+	const t3 = presence.mounted;
+	const t4 = presence.props;
+	let t5;
+	if ($[9] !== className) {
+		t5 = clsx(stale_module_default.overlay, className);
+		$[9] = className;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== presence.props || $[12] !== props || $[13] !== t5) {
+		t6 = {
+			...props,
+			...t4,
+			className: t5
+		};
+		$[11] = presence.props;
+		$[12] = props;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== presence.mounted || $[16] !== render || $[17] !== t2 || $[18] !== t6) {
+		t7 = {
+			defaultTagName: "div",
+			render,
+			ref: t2,
+			enabled: t3,
+			props: t6
+		};
+		$[15] = presence.mounted;
+		$[16] = render;
+		$[17] = t2;
+		$[18] = t6;
+		$[19] = t7;
+	} else t7 = $[19];
+	return useRender(t7);
 };
+/** The overlay's status: a moving indicator over its copy. */
 var Message = (t0) => {
-	const $ = c(10);
-	const { illustration, children, className } = t0;
+	const $ = c(24);
+	let children;
+	let className;
+	let illustration;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({illustration, render, className, ref, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = illustration;
+		$[4] = props;
+		$[5] = ref;
+		$[6] = render;
+	} else {
+		children = $[1];
+		className = $[2];
+		illustration = $[3];
+		props = $[4];
+		ref = $[5];
+		render = $[6];
+	}
 	let t1;
-	if ($[0] !== className) {
+	if ($[7] !== className) {
 		t1 = clsx(stale_module_default.message, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
+		$[7] = className;
+		$[8] = t1;
+	} else t1 = $[8];
 	let t2;
-	if ($[2] !== illustration) {
+	if ($[9] !== illustration) {
 		t2 = illustration ?? /* @__PURE__ */ jsx(Spinner, { size: 2 });
-		$[2] = illustration;
-		$[3] = t2;
-	} else t2 = $[3];
+		$[9] = illustration;
+		$[10] = t2;
+	} else t2 = $[10];
 	let t3;
-	if ($[4] !== t2) {
+	if ($[11] !== t2) {
 		t3 = /* @__PURE__ */ jsx("span", {
 			className: stale_module_default.illustration,
 			"aria-hidden": "true",
 			children: t2
 		});
-		$[4] = t2;
-		$[5] = t3;
-	} else t3 = $[5];
+		$[11] = t2;
+		$[12] = t3;
+	} else t3 = $[12];
 	let t4;
-	if ($[6] !== children || $[7] !== t1 || $[8] !== t3) {
-		t4 = /* @__PURE__ */ jsxs("p", {
-			className: t1,
+	if ($[13] !== children || $[14] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Fragment, { children: [t3, children] });
+		$[13] = children;
+		$[14] = t3;
+		$[15] = t4;
+	} else t4 = $[15];
+	let t5;
+	if ($[16] !== props || $[17] !== t1 || $[18] !== t4) {
+		t5 = {
 			role: "status",
-			children: [t3, children]
-		});
-		$[6] = children;
-		$[7] = t1;
-		$[8] = t3;
-		$[9] = t4;
-	} else t4 = $[9];
-	return t4;
+			...props,
+			className: t1,
+			children: t4
+		};
+		$[16] = props;
+		$[17] = t1;
+		$[18] = t4;
+		$[19] = t5;
+	} else t5 = $[19];
+	let t6;
+	if ($[20] !== ref || $[21] !== render || $[22] !== t5) {
+		t6 = {
+			defaultTagName: "p",
+			render,
+			ref,
+			props: t5
+		};
+		$[20] = ref;
+		$[21] = render;
+		$[22] = t5;
+		$[23] = t6;
+	} else t6 = $[23];
+	return useRender(t6);
 };
+/** The way out once the refresh looks stuck: a button that appears only then. */
 var Retry = (t0) => {
-	const $ = c(7);
-	const { onRetry, children, className } = t0;
+	const $ = c(13);
+	let children;
+	let className;
+	let onRetry;
+	let props;
+	if ($[0] !== t0) {
+		({onRetry, children, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = onRetry;
+		$[4] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		onRetry = $[3];
+		props = $[4];
+	}
 	const phase = usePhase();
 	const retryRef = useRef(null);
 	const presence = usePresence(phase === "stuck", retryRef);
 	if (!presence.mounted) return null;
 	let t1;
-	if ($[0] !== className) {
+	if ($[5] !== className) {
 		t1 = clsx(stale_module_default.retry, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
 	let t2;
-	if ($[2] !== children || $[3] !== onRetry || $[4] !== presence.props || $[5] !== t1) {
+	if ($[7] !== children || $[8] !== onRetry || $[9] !== presence.props || $[10] !== props || $[11] !== t1) {
 		t2 = /* @__PURE__ */ jsx(Button, {
-			ref: retryRef,
 			variant: "tertiary",
 			size: "sm",
+			...props,
+			ref: retryRef,
 			onClick: onRetry,
 			className: t1,
 			...presence.props,
 			children
 		});
-		$[2] = children;
-		$[3] = onRetry;
-		$[4] = presence.props;
-		$[5] = t1;
-		$[6] = t2;
-	} else t2 = $[6];
+		$[7] = children;
+		$[8] = onRetry;
+		$[9] = presence.props;
+		$[10] = props;
+		$[11] = t1;
+		$[12] = t2;
+	} else t2 = $[12];
 	return t2;
 };
 /**