@zoreal/oauth2-react 0.2.13 → 0.2.15

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties } from 'react';
 
 /**
  * The public types of @zoreal/oauth2-react.
@@ -243,6 +243,36 @@ declare function useZorealOAuth(): ZorealOAuthContextProps;
 
 declare function ZorealLogin(props: ZorealLoginProps): react.JSX.Element;
 
+/**
+ * The light of the pairing dialog's QR well, run around whatever this wraps
+ * while `busy` is true: the well's colours, line, halo and lap, on a dash
+ * that travels the outline at one speed whatever the shape.
+ *
+ * The SDK's own button uses it for the gap on a phone between the tap and the
+ * hand-over to the app. A site with its own sign-in button MAY wrap that
+ * button the same way: set your busy state on the tap, clear it when
+ * `onSuccess` or `onError` fires. `radius` is the wrapped control's corner
+ * radius in pixels, so the light follows its shape; `theme` picks the light
+ * and dark strengths the dialog uses, following the OS by default.
+ *
+ * It is a wrapper, and a wrapper is a change to your markup, so know what it
+ * does before you use it: it is inline by default and shrinks to the button,
+ * so a full-width button needs `block`; the light sits outside the button,
+ * so an ancestor with `overflow: hidden` clips it; and a selector that relies
+ * on the button's parent (`.card > button`) no longer matches. A site that
+ * would rather draw its own busy state needs nothing from here.
+ */
+declare function ZorealBusyRing({ busy, radius, theme, block, className, style, children, }: {
+    busy: boolean;
+    radius?: number;
+    theme?: ZorealTheme;
+    /** Lay the wrapper out as a block, for a button that fills its row. */
+    block?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+}): react.JSX.Element;
+
 /**
  * The pairing modal, rendered by the SDK rather than by every integrator.
  *
@@ -312,4 +342,4 @@ declare function hasGrantedAnyScopeZoreal(response: Pick<ZorealCodeResponse, 'sc
  */
 declare function resolveIntent(intent: LoginIntent | undefined, scope: string | undefined, acrValues: string | readonly string[] | undefined): LoginIntent;
 
-export { type AcrValue, type AuthCodeFlowOptions, type BrowserDirectFlowOptions, DEFAULT_PAIRING_TIMEOUT_MS, type ErrorCode, type LoginIntent, type NonOAuthError, PairingModal, type PairingModalProps, type PairingState, type PairingUI, type SelectBy, type UseZorealAutoLoginOptions, type ZorealButtonConfiguration, type ZorealCodeResponse, type ZorealCredentialResponse, ZorealLogin, type ZorealLoginProps, type ZorealLoginRequestOptions, type ZorealOAuthContextProps, ZorealOAuthProvider, type ZorealOAuthProviderProps, type ZorealTheme, hasGrantedAllScopesZoreal, hasGrantedAnyScopeZoreal, resolveIntent, useZorealAutoLogin, useZorealLogin, useZorealOAuth, zorealLogout };
+export { type AcrValue, type AuthCodeFlowOptions, type BrowserDirectFlowOptions, DEFAULT_PAIRING_TIMEOUT_MS, type ErrorCode, type LoginIntent, type NonOAuthError, PairingModal, type PairingModalProps, type PairingState, type PairingUI, type SelectBy, type UseZorealAutoLoginOptions, ZorealBusyRing, type ZorealButtonConfiguration, type ZorealCodeResponse, type ZorealCredentialResponse, ZorealLogin, type ZorealLoginProps, type ZorealLoginRequestOptions, type ZorealOAuthContextProps, ZorealOAuthProvider, type ZorealOAuthProviderProps, type ZorealTheme, hasGrantedAllScopesZoreal, hasGrantedAnyScopeZoreal, resolveIntent, useZorealAutoLogin, useZorealLogin, useZorealOAuth, zorealLogout };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties } from 'react';
 
 /**
  * The public types of @zoreal/oauth2-react.
@@ -243,6 +243,36 @@ declare function useZorealOAuth(): ZorealOAuthContextProps;
 
 declare function ZorealLogin(props: ZorealLoginProps): react.JSX.Element;
 
+/**
+ * The light of the pairing dialog's QR well, run around whatever this wraps
+ * while `busy` is true: the well's colours, line, halo and lap, on a dash
+ * that travels the outline at one speed whatever the shape.
+ *
+ * The SDK's own button uses it for the gap on a phone between the tap and the
+ * hand-over to the app. A site with its own sign-in button MAY wrap that
+ * button the same way: set your busy state on the tap, clear it when
+ * `onSuccess` or `onError` fires. `radius` is the wrapped control's corner
+ * radius in pixels, so the light follows its shape; `theme` picks the light
+ * and dark strengths the dialog uses, following the OS by default.
+ *
+ * It is a wrapper, and a wrapper is a change to your markup, so know what it
+ * does before you use it: it is inline by default and shrinks to the button,
+ * so a full-width button needs `block`; the light sits outside the button,
+ * so an ancestor with `overflow: hidden` clips it; and a selector that relies
+ * on the button's parent (`.card > button`) no longer matches. A site that
+ * would rather draw its own busy state needs nothing from here.
+ */
+declare function ZorealBusyRing({ busy, radius, theme, block, className, style, children, }: {
+    busy: boolean;
+    radius?: number;
+    theme?: ZorealTheme;
+    /** Lay the wrapper out as a block, for a button that fills its row. */
+    block?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+}): react.JSX.Element;
+
 /**
  * The pairing modal, rendered by the SDK rather than by every integrator.
  *
@@ -312,4 +342,4 @@ declare function hasGrantedAnyScopeZoreal(response: Pick<ZorealCodeResponse, 'sc
  */
 declare function resolveIntent(intent: LoginIntent | undefined, scope: string | undefined, acrValues: string | readonly string[] | undefined): LoginIntent;
 
-export { type AcrValue, type AuthCodeFlowOptions, type BrowserDirectFlowOptions, DEFAULT_PAIRING_TIMEOUT_MS, type ErrorCode, type LoginIntent, type NonOAuthError, PairingModal, type PairingModalProps, type PairingState, type PairingUI, type SelectBy, type UseZorealAutoLoginOptions, type ZorealButtonConfiguration, type ZorealCodeResponse, type ZorealCredentialResponse, ZorealLogin, type ZorealLoginProps, type ZorealLoginRequestOptions, type ZorealOAuthContextProps, ZorealOAuthProvider, type ZorealOAuthProviderProps, type ZorealTheme, hasGrantedAllScopesZoreal, hasGrantedAnyScopeZoreal, resolveIntent, useZorealAutoLogin, useZorealLogin, useZorealOAuth, zorealLogout };
+export { type AcrValue, type AuthCodeFlowOptions, type BrowserDirectFlowOptions, DEFAULT_PAIRING_TIMEOUT_MS, type ErrorCode, type LoginIntent, type NonOAuthError, PairingModal, type PairingModalProps, type PairingState, type PairingUI, type SelectBy, type UseZorealAutoLoginOptions, ZorealBusyRing, type ZorealButtonConfiguration, type ZorealCodeResponse, type ZorealCredentialResponse, ZorealLogin, type ZorealLoginProps, type ZorealLoginRequestOptions, type ZorealOAuthContextProps, ZorealOAuthProvider, type ZorealOAuthProviderProps, type ZorealTheme, hasGrantedAllScopesZoreal, hasGrantedAnyScopeZoreal, resolveIntent, useZorealAutoLogin, useZorealLogin, useZorealOAuth, zorealLogout };

package/dist/index.js

@@ -5,7 +5,7 @@ import { createContext, useContext, useMemo, useState as useState2 } from "react
 
 // src/wire.ts
 var WIRE_VERSION = 1;
-var SDK_VERSION = "0.2.13";
+var SDK_VERSION = "0.2.15";
 var DEFAULT_ISSUER = "https://id.zoreal.com";
 var POLL_INTERVAL_MS = 2e3;
 var POLL_INTERVAL_ENROLLING_MS = 5e3;
@@ -1327,6 +1327,65 @@ var CSS = `
 }
 
 @keyframes ${PREFIX}-orbit { to { transform: rotate(360deg) } }
+/* THE BUSY RING. The light of the QR well, around any control that is
+   waiting on the provider: the button on a phone between the tap and the
+   hand-over to the app. The well's sweep is a cone from the centre, which is
+   even on a square and useless on a wide button: it crawls along the long
+   sides and lights two edges at once near the ends. So here the light is a
+   dash on an SVG outline, which moves at one speed the whole way round
+   whatever the shape, drawn with the well's tokens: its colour and head
+   tint, its line width, its halo, its four second lap. pathLength makes the
+   outline 100 units long, so every dash and offset is a percentage of the
+   way round; the three layers share one head at 30 and differ in length
+   and brightness, which is the comet's tail. Shown only while busy. */
+.${PREFIX}-ring {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+  --zrl-beam-time: 4s;
+}
+.${PREFIX}-ring-svg {
+  position: absolute;
+  inset: -4px;
+  width: calc(100% + 8px);
+  height: calc(100% + 8px);
+  overflow: visible;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 200ms ease-out;
+}
+.${PREFIX}-ring[data-busy="true"] > .${PREFIX}-ring-svg { opacity: 1; }
+.${PREFIX}-ring-svg rect {
+  x: 2px;
+  y: 2px;
+  width: calc(100% - 4px);
+  height: calc(100% - 4px);
+  fill: none;
+  stroke: var(--zrl-beam);
+  stroke-width: var(--zrl-beam-line);
+  stroke-linecap: round;
+  animation: ${PREFIX}-dash var(--zrl-beam-time) linear infinite;
+}
+.${PREFIX}-ring-tail { stroke-dasharray: 30 70; stroke-dashoffset: 0; opacity: 0.35; }
+.${PREFIX}-ring-body { stroke-dasharray: 16 84; stroke-dashoffset: -14; opacity: 0.8; }
+.${PREFIX}-ring-head { stroke-dasharray: 5 95; stroke-dashoffset: -25; stroke: var(--zrl-beam-head); }
+.${PREFIX}-ring-halo {
+  stroke-dasharray: 30 70;
+  stroke-dashoffset: 0;
+  stroke-width: calc(var(--zrl-glow-core) * 2 + var(--zrl-beam-line));
+  opacity: calc(var(--zrl-glow-opacity) * 0.5);
+  filter: blur(var(--zrl-glow-blur));
+}
+@keyframes ${PREFIX}-dash {
+  to { stroke-dashoffset: calc(var(--zrl-dash-start, 0) - 100); }
+}
+.${PREFIX}-ring-body { --zrl-dash-start: -14; }
+.${PREFIX}-ring-head { --zrl-dash-start: -25; }
+@media (prefers-reduced-motion: reduce) {
+  .${PREFIX}-ring-svg rect { animation: none; stroke-dasharray: none; opacity: 0.45; }
+  .${PREFIX}-ring-halo, .${PREFIX}-ring-head { display: none; }
+}
+
 
 @media (prefers-reduced-motion: reduce) {
   .${PREFIX}-scrim,
@@ -1535,7 +1594,7 @@ function useZorealOAuth() {
 }
 
 // src/ZorealLogin.tsx
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo2, useState as useState4 } from "react";
 
 // src/useZorealLogin.ts
 import { useCallback, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
@@ -1902,8 +1961,45 @@ function useZorealLogin(options) {
   }).login;
 }
 
-// src/ZorealLogin.tsx
+// src/ring.tsx
+import { useEffect as useEffect3 } from "react";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function ZorealBusyRing({
+  busy,
+  radius = 8,
+  theme = "auto",
+  block = false,
+  className,
+  style,
+  children
+}) {
+  useEffect3(() => {
+    ensureStyles();
+  }, []);
+  const rx = radius + 2;
+  const layer = (name) => /* @__PURE__ */ jsx5("rect", { className: cx(name), rx, ry: rx, pathLength: 100 });
+  return /* @__PURE__ */ jsxs5(
+    "span",
+    {
+      className: className ? `${cx("root")} ${cx("ring")} ${className}` : `${cx("root")} ${cx("ring")}`,
+      "data-theme": theme,
+      "data-busy": busy,
+      style: block ? { display: "flex", ...style } : style,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs5("svg", { className: cx("ring-svg"), "aria-hidden": "true", children: [
+          layer("ring-halo"),
+          layer("ring-tail"),
+          layer("ring-body"),
+          layer("ring-head")
+        ] })
+      ]
+    }
+  );
+}
+
+// src/ZorealLogin.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var TEXTS = {
   continue_with: null,
   signin_with: "Sign in with ZOREAL",
@@ -1912,9 +2008,9 @@ var TEXTS = {
   verify_with: "Verify with ZOREAL ID"
 };
 var SIZES = {
-  large: { height: 44, font: 15, pad: 20 },
-  medium: { height: 38, font: 14, pad: 16 },
-  small: { height: 32, font: 12, pad: 12 }
+  large: { height: 50, font: 14, pad: 20, mark: 22, gap: 12, radius: 12 },
+  medium: { height: 42, font: 14, pad: 16, mark: 20, gap: 10, radius: 10 },
+  small: { height: 34, font: 12, pad: 12, mark: 16, gap: 8, radius: 8 }
 };
 function ZorealLogin(props) {
   const {
@@ -1922,11 +2018,11 @@ function ZorealLogin(props) {
     onError,
     containerProps,
     type = "standard",
-    theme = "filled",
+    theme = "outline",
     size = "large",
     text = "continue_with",
     shape = "rectangular",
-    logo_alignment = "left",
+    logo_alignment = "center",
     width,
     click_listener,
     flow = "browser-direct",
@@ -1934,21 +2030,36 @@ function ZorealLogin(props) {
   } = props;
   const { locale } = useZorealOAuth();
   const label = TEXTS[text] ?? strings(locale).buttonContinue;
+  const [busy, setBusy] = useState4(false);
   const { login } = useZorealFlow({
     ...request,
     flow,
-    onCredential: flow === "browser-direct" ? onSuccess : void 0,
-    onCode: flow === "auth-code" ? onSuccess : void 0,
-    onError: (e) => onError?.({ type: "unknown", description: e.description ?? e.error }),
-    onNonOAuthError: (e) => onError?.(e)
+    onCredential: flow === "browser-direct" ? (r) => {
+      setBusy(false);
+      onSuccess(r);
+    } : void 0,
+    onCode: flow === "auth-code" ? (r) => {
+      setBusy(false);
+      onSuccess(r);
+    } : void 0,
+    onError: (e) => {
+      setBusy(false);
+      onError?.({ type: "unknown", description: e.description ?? e.error });
+    },
+    onNonOAuthError: (e) => {
+      setBusy(false);
+      onError?.(e);
+    }
   });
   const s = SIZES[size];
+  const radius = shape === "pill" ? s.height / 2 : shape === "square" ? 4 : s.radius;
+  const brandMark = theme !== "filled";
   const style = useMemo2(
     () => ({
       display: "inline-flex",
       alignItems: "center",
       justifyContent: logo_alignment === "center" ? "center" : "flex-start",
-      gap: 10,
+      gap: s.gap,
       height: s.height,
       padding: `0 ${s.pad}px`,
       width,
@@ -1956,30 +2067,34 @@ function ZorealLogin(props) {
       fontFamily: "inherit",
       fontWeight: 500,
       cursor: "pointer",
-      borderRadius: shape === "pill" ? s.height / 2 : shape === "square" ? 4 : 8,
-      ...theme === "outline" ? { background: "transparent", color: "inherit", border: "1px solid rgba(128,128,128,0.5)" } : theme === "filled_black" ? { background: "#111", color: "#fff", border: "1px solid #111" } : { background: "#00b4d9", color: "#fff", border: "1px solid #00b4d9" }
+      borderRadius: radius,
+      ...theme === "outline" ? { background: "#ffffff", color: "#16181c", border: "1px solid #e2e4de" } : theme === "filled_black" ? { background: "#111", color: "#fff", border: "1px solid #111" } : { background: "#00b4d9", color: "#fff", border: "1px solid #00b4d9" }
     }),
-    [logo_alignment, s, shape, theme, width]
+    [logo_alignment, s, radius, theme, width]
   );
-  return /* @__PURE__ */ jsx5("div", { ...containerProps, children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsx6("div", { ...containerProps, children: /* @__PURE__ */ jsx6(ZorealBusyRing, { busy, radius, theme: theme === "outline" ? "auto" : "light", children: /* @__PURE__ */ jsxs6(
     "button",
     {
       type: "button",
-      style,
+      style: busy ? { ...style, cursor: "progress" } : style,
+      disabled: busy,
+      "aria-busy": busy,
       onClick: () => {
+        if (busy) return;
         click_listener?.();
+        setBusy(true);
         login();
       },
       children: [
-        /* @__PURE__ */ jsx5(ZorealMark, { size: Math.round(s.font * 1.25) }),
+        /* @__PURE__ */ jsx6(ZorealMark, { size: s.mark, brand: brandMark }),
         type === "standard" && label
       ]
     }
-  ) });
+  ) }) });
 }
 
 // src/useZorealAutoLogin.ts
-import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { useEffect as useEffect4, useRef as useRef3 } from "react";
 function useZorealAutoLogin(options) {
   const { login } = useZorealFlow({
     flow: "browser-direct",
@@ -1997,7 +2112,7 @@ function useZorealAutoLogin(options) {
     onNonOAuthError: (e) => options.onError?.(e)
   });
   const fired = useRef3(false);
-  useEffect3(() => {
+  useEffect4(() => {
     if (options.disabled || fired.current) return;
     fired.current = true;
     login();
@@ -2020,6 +2135,7 @@ function hasGrantedAnyScopeZoreal(response, firstScope, ...restScopes) {
 export {
   DEFAULT_PAIRING_TIMEOUT_MS,
   PairingModal,
+  ZorealBusyRing,
   ZorealLogin,
   ZorealOAuthProvider,
   hasGrantedAllScopesZoreal,