@zoreal/oauth2-react 0.2.14 → 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 };