cauthy-auth 0.35.0 → 0.35.2

package/README.md

@@ -195,7 +195,7 @@ const Button = ({ variant, loading, children, ...rest }: AuthButtonProps) => (
 )
 ```
 
-The forms stay busy from the press until the work is really over. A sign-in that leaves the form (the password, the second step, a passkey, a provider, SSO, a sign-up done, an invitation accepted) stays busy until the browser leaves the page; with `onSuccess`, return a Promise when the form stays on screen while your application moves on (`onSuccess={() => router.navigate({ to: '/' })}`), and the form waits for it, then is free again if still shown. A plain `onSuccess` keeps it busy until it unmounts. A refusal, a sign-in link sent or a sign-up that asks to confirm the address frees it; so does coming back from the browser's back-forward cache. Until the workspace says what it offers, `<SignIn />` shows its form busy with nothing to press, and `<SignUp />`, `<Account />` and `<OrganizationMembers />` say "Loading…" (`texts.loading`). The plain button draws a spinner before its label (`.cauthy-spinner` in `styles.css`, still under `prefers-reduced-motion`); with `unstyled`, it adds "…" after the label.
+The forms stay busy from the press until the work is really over. A sign-in that leaves the form (the password, the second step, a passkey, a provider, SSO, a sign-up done, an invitation accepted) stays busy until the browser leaves the page; with `onSuccess`, return a Promise when the form stays on screen while your application moves on (`onSuccess={() => router.navigate({ to: '/' })}`), and the form waits for it, then is free again if still shown. A plain `onSuccess` keeps it busy until it unmounts. A refusal, a sign-in link sent or a sign-up that asks to confirm the address frees it; so does coming back from the browser's back-forward cache. Until the workspace says what it offers, `<SignIn />` shows its form busy with nothing to press, and `<SignUp />`, `<Account />` and `<OrganizationMembers />` show a spinner alone, centred, with `aria-busy` on their wrapper. Loaders are icons, never words, so they read the same in any language. The plain button draws a spinner before its label (`.cauthy-spinner` in `styles.css`, still under `prefers-reduced-motion`); with `unstyled`, an SVG icon that turns by itself (no stylesheet needed) and stands still under `prefers-reduced-motion`. The icon is `aria-hidden`; the button says `aria-busy`.
 
 | Part | Is given |
 | --- | --- |

package/dist/react.d.mts

@@ -1197,8 +1197,6 @@ interface AuthTexts {
     savePassword: string;
     passwordChanged: string;
     confirming: string;
-    /** While a form waits on what the workspace offers, or on the account it shows. */
-    loading: string;
     emailConfirmed: string;
     invitedTo: string;
     invitedToOrganization: string;

package/dist/react.d.ts

@@ -1197,8 +1197,6 @@ interface AuthTexts {
     savePassword: string;
     passwordChanged: string;
     confirming: string;
-    /** While a form waits on what the workspace offers, or on the account it shows. */
-    loading: string;
     emailConfirmed: string;
     invitedTo: string;
     invitedToOrganization: string;

package/dist/react.js

@@ -823,7 +823,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}",
@@ -1005,7 +1004,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}",
@@ -1139,13 +1137,37 @@ var TEXTS = {
   }
 };
 var PlainButton = ({ variant: _variant, loading, children, ...p }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { ...p, "aria-busy": loading || void 0, children: [
-  loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cauthy-spinner", "aria-hidden": "true" }),
+  loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {}),
   children
 ] });
 var UnstyledButton = ({ variant: _variant, loading, children, ...p }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { ...p, "aria-busy": loading || void 0, children: [
-  children,
-  loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\u2026" })
+  loading && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, { plain: true }),
+    " "
+  ] }),
+  children
 ] });
+function Spinner({ plain }) {
+  if (!plain) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cauthy-spinner", "aria-hidden": "true" });
+  return /* @__PURE__ */ (0, import_jsx_runtime.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 = (0, import_react.useSyncExternalStore)(watchMotion, stillHere, stillOnServer);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "cauthy-spinner-icon", width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", focusable: "false", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14.5 8A6.5 6.5 0 0 0 8 1.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: !still && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("animateTransform", { attributeName: "transform", type: "rotate", from: "0 8 8", to: "360 8 8", dur: "0.7s", repeatCount: "indefinite" }) })
+  ] });
+}
 var PlainInput = (p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ...p });
 var looks = /* @__PURE__ */ new Map();
 var loaded = /* @__PURE__ */ new Set();
@@ -1344,12 +1366,7 @@ function Wrap(p) {
   return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("p", { role: "status", children: f.t.loading });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { role: "status", className: f.cx("pending"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cauthy-spinner", "aria-hidden": "true" }),
-    " ",
-    f.t.loading
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: f.cx("pending"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, { plain: f.plain }) });
 }
 function Note({ f, children, footer }) {
   const { Text } = f.C;