@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.0.0

package/dist/motion/working-indicator/working-indicator.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+//#region src/motion/working-indicator/working-indicator.d.ts
+export type WorkingIndicatorStatus = "working" | "done" | "error";
+export type WorkingIndicatorPattern = "orbit" | "wave" | "pulse";
+export interface WorkingIndicatorProps extends Omit<React.ComponentProps<"div">, "children"> {
+  status?: WorkingIndicatorStatus;
+  /** Label while working. */
+  label?: string;
+  /** Label once done. */
+  doneLabel?: string;
+  /** Label after an error. */
+  errorLabel?: string;
+  /** The cell animation while working. */
+  pattern?: WorkingIndicatorPattern;
+  /** Cells per side. */
+  grid?: 3 | 4;
+  /** Cell shape. */
+  shape?: "round" | "square";
+  /** Show the elapsed time beside the label. */
+  showTimer?: boolean;
+  /**
+   * Elapsed time in ms, from the app. When omitted the indicator runs its own
+   * clock from the moment `status` becomes "working" and freezes it after.
+   */
+  elapsedMs?: number;
+  /** Delay between neighbouring cells, in ms. */
+  step?: number;
+}
+/**
+ * An "agent is working" indicator: a small lattice of cells animating in a
+ * pattern, a label and an elapsed timer, settling into a check (done) or a
+ * cross (error). It is a polite status region; the ticking timer is hidden
+ * from screen readers, and the final time is announced once.
+ *
+ * Behavior reference: reactbits lattice-loader.
+ */
+export declare function WorkingIndicator({ status, label, doneLabel, errorLabel, pattern, grid, shape, showTimer, elapsedMs, step, className, ...props }: WorkingIndicatorProps): React.JSX.Element;
+//#endregion

package/dist/motion/working-indicator/working-indicator.js

@@ -0,0 +1,171 @@
+import { formatElapsed, useElapsed } from "../../lib/elapsed.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { animate, motion, useMotionValue, useReducedMotionConfig } from "motion/react";
+//#region src/motion/working-indicator/working-indicator.tsx
+const IDLE_OPACITY = .18;
+/** Cell indices (row-major) forming a check and a cross for each grid size. */
+const MARKS = {
+	3: {
+		done: [
+			3,
+			7,
+			5,
+			2
+		],
+		error: [
+			0,
+			2,
+			4,
+			6,
+			8
+		]
+	},
+	4: {
+		done: [
+			8,
+			13,
+			10,
+			7
+		],
+		error: [
+			0,
+			5,
+			10,
+			15,
+			3,
+			6,
+			9,
+			12
+		]
+	}
+};
+/** The order each cell lights in, for a pattern; -1 never lights. */
+function cellOrder(pattern, n) {
+	const order = Array.from({ length: n * n }, () => -1);
+	if (pattern === "wave") {
+		for (let i = 0; i < n * n; i++) order[i] = Math.floor(i / n) + i % n;
+		return order;
+	}
+	if (pattern === "pulse") {
+		const c = (n - 1) / 2;
+		for (let i = 0; i < n * n; i++) order[i] = Math.floor(Math.max(Math.abs(Math.floor(i / n) - c), Math.abs(i % n - c)));
+		return order;
+	}
+	const ring = [];
+	for (let col = 0; col < n; col++) ring.push(col);
+	for (let row = 1; row < n; row++) ring.push(row * n + n - 1);
+	for (let col = n - 2; col >= 0; col--) ring.push((n - 1) * n + col);
+	for (let row = n - 2; row > 0; row--) ring.push(row * n);
+	ring.forEach((cell, index) => {
+		order[cell] = index;
+	});
+	return order;
+}
+/**
+* An "agent is working" indicator: a small lattice of cells animating in a
+* pattern, a label and an elapsed timer, settling into a check (done) or a
+* cross (error). It is a polite status region; the ticking timer is hidden
+* from screen readers, and the final time is announced once.
+*
+* Behavior reference: reactbits lattice-loader.
+*/
+function WorkingIndicator({ status = "working", label = "Working", doneLabel = "Done", errorLabel = "Failed", pattern = "orbit", grid = 3, shape = "round", showTimer = true, elapsedMs, step = 90, className, ...props }) {
+	const reduced = useReducedMotionConfig() ?? false;
+	const clock = useElapsed(status === "working", elapsedMs, formatElapsed);
+	const order = cellOrder(pattern, grid);
+	const steps = Math.max(...order) + 1;
+	const mark = status === "done" ? MARKS[grid].done : status === "error" ? MARKS[grid].error : [];
+	const text = status === "done" ? doneLabel : status === "error" ? errorLabel : label;
+	const spoken = status === "working" ? label : `${text}, ${clock.text}`;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		"data-slot": "working-indicator",
+		"data-status": status,
+		"data-motion": reduced ? "reduced" : "full",
+		className: cn("inline-flex items-center gap-2 text-xs/relaxed", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-slot": "working-indicator-cells",
+				className: cn("grid shrink-0 gap-0.5", grid === 3 ? "grid-cols-3" : "grid-cols-4", status === "done" && "text-chart-2", status === "error" && "text-destructive"),
+				children: order.map((position, cell) => {
+					const lit = mark.includes(cell);
+					const settled = status === "working" ? position >= 0 ? .55 : IDLE_OPACITY : lit ? 1 : .12;
+					return /* @__PURE__ */ jsx(Cell, {
+						shape,
+						looping: status === "working" && !reduced && position >= 0,
+						cycle: Math.max(steps, 6) * step / 1e3,
+						delay: Math.max(0, position) * step / 1e3,
+						target: settled,
+						settleDelay: reduced || !lit ? 0 : mark.indexOf(cell) * 60 / 1e3,
+						reduced
+					}, cell);
+				})
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				"aria-hidden": "true",
+				className: "flex items-baseline gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-foreground",
+					children: text
+				}), showTimer ? /* @__PURE__ */ jsx("span", {
+					ref: clock.textRef,
+					"data-slot": "working-indicator-timer",
+					className: "font-mono text-[0.6875rem] text-muted-foreground tabular-nums",
+					children: clock.text
+				}) : null]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: spoken
+			})
+		]
+	});
+}
+/**
+* One lattice cell. While looping it flashes once per cycle, offset by
+* `delay`; otherwise it eases to `target`. Both run on motion's JS driver
+* (see useLoop in lib/motion-loop for why not a Web Animation).
+*/
+function Cell({ shape, looping, cycle, delay, target, settleDelay, reduced }) {
+	const opacity = useMotionValue(looping ? IDLE_OPACITY : target);
+	React.useEffect(() => {
+		const controls = looping ? animate(opacity, [
+			1,
+			IDLE_OPACITY,
+			IDLE_OPACITY
+		], {
+			duration: cycle,
+			delay,
+			times: [
+				0,
+				.45,
+				1
+			],
+			ease: "easeOut",
+			repeat: Number.POSITIVE_INFINITY
+		}) : animate(opacity, target, {
+			duration: reduced ? 0 : .24,
+			delay: settleDelay
+		});
+		return () => controls.stop();
+	}, [
+		looping,
+		cycle,
+		delay,
+		target,
+		settleDelay,
+		reduced,
+		opacity
+	]);
+	return /* @__PURE__ */ jsx(motion.span, {
+		"data-slot": "working-indicator-cell",
+		className: cn("size-1.5 bg-current", shape === "round" ? "rounded-full" : "rounded-[1px]"),
+		style: { opacity }
+	});
+}
+//#endregion
+export { WorkingIndicator };