@geomak/ui 1.7.1 → 1.7.2

package/dist/index.d.cts

@@ -588,16 +588,44 @@ declare function useNotification(): {
 };
 
 interface LoadingSpinnerProps {
-    /** Text animated letter by letter */
+    /** Text revealed letter-by-letter beneath the spinner. */
     prompt: string;
+    /**
+     * Optional override for the spinner ring colour. Accepts any CSS colour.
+     * Defaults to the accent token so it picks up theme overrides.
+     */
+    spinnerColor?: string;
+    /**
+     * Optional override for the prompt text colour.
+     * Defaults to the foreground token (light/dark aware).
+     */
+    textColor?: string;
+    /**
+     * Backdrop opacity (0 – 1). Defaults to 0.92 — close enough to opaque to
+     * block UI underneath while still hinting at the previous state.
+     */
+    backdropOpacity?: number;
 }
 /**
- * Full-screen loading overlay with a spinning shape and staggered text reveal.
+ * Full-screen loading overlay with a spinning ring and a staggered text
+ * reveal. Portaled into `document.body` so it always covers the actual
+ * viewport regardless of where it's rendered in the React tree.
+ *
+ * Honours `prefers-reduced-motion`: the spinner still rotates (continuous
+ * spin is informative, not decorative) but the letter stagger collapses to
+ * an instant reveal.
  *
  * @example
- * {isLoading && <LoadingSpinner prompt="Loading data..." />}
+ * {isLoading && <LoadingSpinner prompt="Loading vessels…" />}
+ *
+ * @example
+ * <LoadingSpinner
+ *   prompt="Saving"
+ *   spinnerColor="#10b981"
+ *   backdropOpacity={0.7}
+ * />
  */
-declare function LoadingSpinner({ prompt }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
+declare function LoadingSpinner({ prompt, spinnerColor, textColor, backdropOpacity, }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
 
 interface FadingBaseProps {
     className?: string;

package/dist/index.d.ts

@@ -588,16 +588,44 @@ declare function useNotification(): {
 };
 
 interface LoadingSpinnerProps {
-    /** Text animated letter by letter */
+    /** Text revealed letter-by-letter beneath the spinner. */
     prompt: string;
+    /**
+     * Optional override for the spinner ring colour. Accepts any CSS colour.
+     * Defaults to the accent token so it picks up theme overrides.
+     */
+    spinnerColor?: string;
+    /**
+     * Optional override for the prompt text colour.
+     * Defaults to the foreground token (light/dark aware).
+     */
+    textColor?: string;
+    /**
+     * Backdrop opacity (0 – 1). Defaults to 0.92 — close enough to opaque to
+     * block UI underneath while still hinting at the previous state.
+     */
+    backdropOpacity?: number;
 }
 /**
- * Full-screen loading overlay with a spinning shape and staggered text reveal.
+ * Full-screen loading overlay with a spinning ring and a staggered text
+ * reveal. Portaled into `document.body` so it always covers the actual
+ * viewport regardless of where it's rendered in the React tree.
+ *
+ * Honours `prefers-reduced-motion`: the spinner still rotates (continuous
+ * spin is informative, not decorative) but the letter stagger collapses to
+ * an instant reveal.
  *
  * @example
- * {isLoading && <LoadingSpinner prompt="Loading data..." />}
+ * {isLoading && <LoadingSpinner prompt="Loading vessels…" />}
+ *
+ * @example
+ * <LoadingSpinner
+ *   prompt="Saving"
+ *   spinnerColor="#10b981"
+ *   backdropOpacity={0.7}
+ * />
  */
-declare function LoadingSpinner({ prompt }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
+declare function LoadingSpinner({ prompt, spinnerColor, textColor, backdropOpacity, }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
 
 interface FadingBaseProps {
     className?: string;

package/dist/index.js

@@ -1,7 +1,7 @@
 import { colors_default } from './chunk-GKXP6OJJ.js';
 export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-GKXP6OJJ.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React10, { createContext, useState, useEffect, useMemo, useContext, useRef, useCallback, useId } from 'react';
+import React9, { createContext, useState, useEffect, useMemo, useContext, useRef, useCallback, useId } from 'react';
 import { createPortal } from 'react-dom';
 import * as Dialog from '@radix-ui/react-dialog';
 import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
@@ -940,39 +940,61 @@ function useNotification() {
     danger: (props) => open({ type: "danger", ...props })
   };
 }
-function LoadingSpinner({ prompt }) {
-  const letterRefs = useMemo(() => [], []);
-  const letters = prompt.split("");
-  useEffect(() => {
-    const timeouts = [];
-    if (letterRefs.length === letters.length) {
-      letterRefs.forEach((ref, index) => {
-        const t = setTimeout(() => {
-          ref?.classList.add("slowly-appear");
-        }, index * 100);
-        timeouts.push(t);
-      });
+var containerVariants = {
+  hidden: {},
+  visible: { transition: { staggerChildren: 0.06 } }
+};
+var letterVariants = {
+  hidden: { opacity: 0, y: 6 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.25, ease: "easeOut" } }
+};
+function LoadingSpinner({
+  prompt,
+  spinnerColor,
+  textColor,
+  backdropOpacity = 0.92
+}) {
+  const reduced = useReducedMotion();
+  const letters = Array.from(prompt);
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": prompt,
+      className: "fixed inset-0 z-[8000000] flex flex-col items-center justify-center gap-6 bg-background",
+      style: { opacity: backdropOpacity },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "w-20 h-20 rounded-2xl border-[6px] border-transparent border-t-current border-r-current animate-spin",
+            style: { color: spinnerColor ?? "var(--color-accent)" },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "text-3xl font-bold tracking-tight select-none",
+            style: { color: textColor ?? "var(--color-foreground)" },
+            variants: containerVariants,
+            initial: reduced ? "visible" : "hidden",
+            animate: "visible",
+            children: letters.map((letter, index) => /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                className: "inline-block whitespace-pre",
+                variants: letterVariants,
+                children: letter
+              },
+              index
+            ))
+          }
+        )
+      ]
     }
-    return () => timeouts.forEach(clearTimeout);
-  }, [letterRefs, letters.length]);
-  return (
-    // Portaled so the full-screen overlay always covers the real viewport,
-    // not whatever container the consumer renders LoadingSpinner inside.
-    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs("div", { className: "fixed top-0 bottom-0 right-0 left-0 bg-oxford-blue-700-opaque z-[8000000] flex flex-col gap-5 items-center justify-start pt-80", children: [
-      /* @__PURE__ */ jsx("div", { className: "border-r-prussian-blue border-l-prussian-blue border-t-white border-b-white border-[10px] w-[80px] h-[80px] rounded-xl shapeshift" }),
-      /* @__PURE__ */ jsx("div", { className: "text-prussian-blue dark:text-white text-3xl font-bold", children: letters.map((letter, index) => /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "select-none",
-          ref: (ref) => {
-            letterRefs[index] = ref;
-          },
-          children: letter
-        },
-        index
-      )) })
-    ] }) })
-  );
+  ) });
 }
 function FadingBase({
   className = "",
@@ -1447,7 +1469,7 @@ function Wizard({ children, steps, storageKey = "po_wizard" }) {
     children
   ] });
 }
-var SearchInput = React10.forwardRef(function SearchInput2({
+var SearchInput = React9.forwardRef(function SearchInput2({
   value,
   onChange,
   disabled,
@@ -1712,7 +1734,7 @@ function TableBody({
       setVisibleRows(initial);
     }
   }, [rows]);
-  return /* @__PURE__ */ jsx("tbody", { className: "w-full", children: rows.map((row, i) => /* @__PURE__ */ jsxs(React10.Fragment, { children: [
+  return /* @__PURE__ */ jsx("tbody", { className: "w-full", children: rows.map((row, i) => /* @__PURE__ */ jsxs(React9.Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "tr",
       {
@@ -2293,7 +2315,7 @@ function ThemeProvider({
   className = "",
   style
 }) {
-  const id = React10.useId().replace(/:/g, "");
+  const id = React9.useId().replace(/:/g, "");
   const scopeClass = `geo-th-${id}`;
   const divRef = useRef(null);
   useEffect(() => {