cauthy-auth 0.35.0 → 0.35.2

package/dist/react.mjs

@@ -721,7 +721,7 @@ function definePolicy(given) {
 }
 
 // src/components.tsx
-import { Fragment, useCallback, useEffect, useId, useRef, useState } from "react";
+import { Fragment, useCallback, useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
 var TEXTS = {
   en: {
@@ -774,7 +774,6 @@ var TEXTS = {
     savePassword: "Save the password",
     passwordChanged: "Your password was changed. You can sign in with it now.",
     confirming: "Confirming your address\u2026",
-    loading: "Loading\u2026",
     emailConfirmed: "Your address is confirmed. You can sign in now.",
     invitedTo: "You've been invited to {workspace}",
     invitedToOrganization: "You've been invited to {organization} on {workspace}",
@@ -956,7 +955,6 @@ var TEXTS = {
     savePassword: "Guardar la contrase\xF1a",
     passwordChanged: "Tu contrase\xF1a se cambi\xF3. Ya puedes entrar con ella.",
     confirming: "Confirmando tu correo\u2026",
-    loading: "Cargando\u2026",
     emailConfirmed: "Tu correo qued\xF3 confirmado. Ya puedes entrar.",
     invitedTo: "Te invitaron a {workspace}",
     invitedToOrganization: "Te invitaron a {organization} en {workspace}",
@@ -1090,13 +1088,37 @@ var TEXTS = {
   }
 };
 var PlainButton = ({ variant: _variant, loading, children, ...p }) => /* @__PURE__ */ jsxs("button", { ...p, "aria-busy": loading || void 0, children: [
-  loading && /* @__PURE__ */ jsx("span", { className: "cauthy-spinner", "aria-hidden": "true" }),
+  loading && /* @__PURE__ */ jsx(Spinner, {}),
   children
 ] });
 var UnstyledButton = ({ variant: _variant, loading, children, ...p }) => /* @__PURE__ */ jsxs("button", { ...p, "aria-busy": loading || void 0, children: [
-  children,
-  loading && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2026" })
+  loading && /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsx(Spinner, { plain: true }),
+    " "
+  ] }),
+  children
 ] });
+function Spinner({ plain }) {
+  if (!plain) return /* @__PURE__ */ jsx("span", { className: "cauthy-spinner", "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx(SpinnerIcon, {});
+}
+var LESS_MOTION = "(prefers-reduced-motion: reduce)";
+function watchMotion(changed) {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {
+  };
+  const query = window.matchMedia(LESS_MOTION);
+  query.addEventListener?.("change", changed);
+  return () => query.removeEventListener?.("change", changed);
+}
+var stillHere = () => typeof window.matchMedia === "function" && window.matchMedia(LESS_MOTION).matches;
+var stillOnServer = () => true;
+function SpinnerIcon() {
+  const still = useSyncExternalStore(watchMotion, stillHere, stillOnServer);
+  return /* @__PURE__ */ jsxs("svg", { className: "cauthy-spinner-icon", width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", focusable: "false", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M14.5 8A6.5 6.5 0 0 0 8 1.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: !still && /* @__PURE__ */ jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 8 8", to: "360 8 8", dur: "0.7s", repeatCount: "indefinite" }) })
+  ] });
+}
 var PlainInput = (p) => /* @__PURE__ */ jsx("input", { ...p });
 var looks = /* @__PURE__ */ new Map();
 var loaded = /* @__PURE__ */ new Set();
@@ -1295,12 +1317,7 @@ function Wrap(p) {
   return /* @__PURE__ */ jsx(Tag2, { className: p.slot ? p.f.cx(p.slot) : void 0, ...p.root, onSubmit: p.onSubmit, noValidate: p.noValidate, "aria-busy": busy, children });
 }
 function Pending({ f }) {
-  if (f.plain) return /* @__PURE__ */ jsx("p", { role: "status", children: f.t.loading });
-  return /* @__PURE__ */ jsxs("p", { role: "status", className: f.cx("pending"), children: [
-    /* @__PURE__ */ jsx("span", { className: "cauthy-spinner", "aria-hidden": "true" }),
-    " ",
-    f.t.loading
-  ] });
+  return /* @__PURE__ */ jsx("div", { className: f.cx("pending"), children: /* @__PURE__ */ jsx(Spinner, { plain: f.plain }) });
 }
 function Note({ f, children, footer }) {
   const { Text } = f.C;