@authara/react 0.0.1-trusted.3 → 0.2.0

package/dist/AppleButton.js

@@ -1,8 +1,26 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState, } from "react";
-import { isAppleCancellation, isProviderUnavailable, toError, } from "./errors.js";
+import { resolveAction, runAppleAction } from "./actions.js";
+import { isAppleCancellation, isProviderUnavailable, toAutharaButtonError, toError, } from "./errors.js";
 import { useAutharaServices } from "./context.js";
-export function AppleButton({ disabled = false, locale = "en_US", color = "black", border = true, type = "continue", mode = "center-align", fallback = null, onAuthorization, onCancel, onError, onUnavailable, style, ...divProps }) {
+import { useResolvedAutharaColorMode, } from "./color-mode.js";
+function appleButtonText(type) {
+    switch (type) {
+        case "sign-in":
+            return "Sign in with Apple";
+        case "sign-up":
+            return "Sign up with Apple";
+        case "continue":
+            return "Continue with Apple";
+    }
+}
+function AppleLogo() {
+    return (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 814 1000", width: "16", height: "20", focusable: "false", children: _jsx("path", { fill: "currentColor", d: "M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z" }) }));
+}
+export function AppleCredentialButton({ disabled = false, locale = "en_US", color = "black", border = false, buttonText, type = "continue", mode = "center-align", borderRadius = 12, fallback = null, onAuthorization, onCancel, onError, onUnavailable, style, ...divProps }) {
+    if (!Number.isFinite(borderRadius) || borderRadius < 0 || borderRadius > 50) {
+        throw new RangeError("Apple button borderRadius must be between 0 and 50.");
+    }
     const { apple } = useAutharaServices();
     const targetRef = useRef(null);
     const authorizationRef = useRef(onAuthorization);
@@ -40,7 +58,7 @@ export function AppleButton({ disabled = false, locale = "en_US", color = "black
         return () => {
             active = false;
         };
-    }, [apple, border, color, locale, mode, type]);
+    }, [apple, border, borderRadius, color, locale, mode, type]);
     const beginAuthorization = (event) => {
         event.preventDefault();
         event.stopPropagation();
@@ -62,10 +80,110 @@ export function AppleButton({ disabled = false, locale = "en_US", color = "black
     if (!available)
         return _jsx(_Fragment, { children: fallback });
     const inactive = disabled || busy;
-    return (_jsx("div", { ...divProps, "aria-busy": busy || undefined, "aria-disabled": inactive || undefined, "data-authara-provider": "apple", "data-authara-ready": ready ? "true" : "false", onClickCapture: beginAuthorization, style: {
+    const label = buttonText ?? appleButtonText(type);
+    return (_jsxs("div", { ...divProps, "aria-busy": busy || undefined, "aria-disabled": inactive || undefined, "data-authara-provider": "apple", "data-authara-ready": ready ? "true" : "false", onClickCapture: beginAuthorization, style: {
+            position: "relative",
+            display: "inline-block",
             width: "100%",
             height: 44,
+            overflow: "hidden",
+            borderRadius,
+            cursor: !ready ? "wait" : inactive ? "not-allowed" : "pointer",
+            lineHeight: 0,
+            opacity: inactive ? 0.62 : 1,
+            transition: "opacity 150ms ease",
+            verticalAlign: "middle",
+            WebkitTapHighlightColor: "transparent",
+            ...style,
+            pointerEvents: !ready || inactive ? "none" : style?.pointerEvents,
+        }, children: [_jsx("div", { ref: targetRef, "aria-hidden": "true", "data-color": color, "data-border": String(border), "data-border-radius": borderRadius, "data-width": "100%", "data-height": "100%", "data-type": type, "data-mode": mode, style: {
+                    position: "absolute",
+                    inset: 0,
+                    overflow: "hidden",
+                    borderRadius,
+                    opacity: 0,
+                    pointerEvents: "none",
+                } }), _jsxs("button", { type: "button", disabled: !ready || inactive, "aria-label": mode === "logo-only" ? label : undefined, "data-authara-apple-presentation": true, style: {
+                    position: "absolute",
+                    inset: 0,
+                    display: "flex",
+                    width: "100%",
+                    height: "100%",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: mode === "logo-only" || mode === "left-align" ? 0 : 10,
+                    padding: mode === "logo-only" ? 0 : "0 14px",
+                    overflow: "hidden",
+                    border: "1px solid",
+                    borderColor: border
+                        ? color === "black"
+                            ? "#000"
+                            : "#9aa0a6"
+                        : "transparent",
+                    borderRadius,
+                    background: color === "black" ? "#000" : "#fff",
+                    boxShadow: "none",
+                    color: color === "black" ? "#fff" : "#202124",
+                    cursor: inactive ? "not-allowed" : ready ? "pointer" : "wait",
+                    fontFamily: "Arial, sans-serif",
+                    fontSize: 14,
+                    fontWeight: 500,
+                    lineHeight: 1,
+                    whiteSpace: "nowrap",
+                }, children: [_jsx("span", { "aria-hidden": "true", style: {
+                            display: "inline-flex",
+                            width: 20,
+                            height: 20,
+                            flex: "0 0 20px",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            position: mode === "left-align" ? "absolute" : "static",
+                            left: mode === "left-align" ? 14 : undefined,
+                        }, children: _jsx(AppleLogo, {}) }), mode !== "logo-only" && _jsx("span", { children: label })] })] }));
+}
+const appleButtonHeights = {
+    small: 30,
+    medium: 36,
+    large: 44,
+};
+const appleIconButtonSizes = {
+    small: 36,
+    medium: 44,
+    large: 52,
+};
+function appleType(label) {
+    return label;
+}
+export function AppleButton(props) {
+    const { client } = useAutharaServices();
+    const internal = props;
+    const { action = "login", audience, authenticationChallengeId, recoveryLinkId, onSuccess, onError, onCancel, variant = "text", size = "large", label = action === "login" ? "sign-in" : "continue", align = "center", mode = "light", width, color, borderRadius, style, ...buttonProps } = internal;
+    const height = variant === "icon" ? appleIconButtonSizes[size] : appleButtonHeights[size];
+    const resolvedMode = useResolvedAutharaColorMode(mode);
+    return (_jsx(AppleCredentialButton, { ...buttonProps, color: color ?? (resolvedMode === "dark" ? "white" : "black"), type: appleType(label), mode: variant === "icon" ? "logo-only" : `${align}-align`, borderRadius: borderRadius, style: {
+            width: width ?? (variant === "icon" ? height : "100%"),
+            height,
             ...style,
-            pointerEvents: inactive ? "none" : style?.pointerEvents,
-        }, children: _jsx("div", { ref: targetRef, "data-color": color, "data-border": String(border), "data-type": type, "data-mode": mode, style: { width: "100%", height: "100%" } }) }));
+        }, onAuthorization: async (proof) => {
+            let result;
+            let selected;
+            try {
+                selected = resolveAction(action, audience, authenticationChallengeId, recoveryLinkId);
+            }
+            catch (error) {
+                throw toAutharaButtonError(error, "The Apple button action is not configured correctly.", "configuration");
+            }
+            try {
+                result = await runAppleAction(client, selected, proof);
+            }
+            catch (error) {
+                throw toAutharaButtonError(error, `Apple ${action} failed.`, "authara");
+            }
+            try {
+                await onSuccess?.(result);
+            }
+            catch (error) {
+                throw toAutharaButtonError(error, "The Apple success callback failed.", "consumer");
+            }
+        }, onCancel: onCancel, onError: (error) => onError?.(toAutharaButtonError(error, "Apple authentication failed.", "provider")) }));
 }

package/dist/GoogleButton.d.ts

@@ -1,15 +1,29 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from "react";
-import type { MaybePromise } from "./contract.js";
+import type { AutharaActionProps, MaybePromise } from "./contract.js";
 import type { GoogleButtonConfiguration } from "./provider-sdks.js";
 import type { GoogleCredential } from "./services.js";
+import { type AutharaColorMode } from "./color-mode.js";
 type GoogleAppearance = Pick<GoogleButtonConfiguration, "type" | "theme" | "size" | "text" | "shape" | "logo_alignment" | "width">;
-export interface GoogleButtonProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onError">, GoogleAppearance {
+export interface GoogleCredentialButtonProps extends Omit<ComponentPropsWithoutRef<"button">, "children" | "onError" | "size" | "type">, GoogleAppearance {
     disabled?: boolean;
+    border?: boolean;
+    buttonText?: string;
     locale?: string;
     fallback?: ReactNode;
     onCredential: (credential: GoogleCredential) => MaybePromise<void>;
     onError?: (error: Error) => void;
     onUnavailable?: () => void;
 }
-export declare function GoogleButton({ disabled, locale, fallback, onCredential, onError, onUnavailable, type, theme, size, text, shape, logo_alignment, width, style, ...divProps }: GoogleButtonProps): React.JSX.Element | null;
+export declare function GoogleCredentialButton({ disabled, border, buttonText, locale, fallback, onCredential, onError, onUnavailable, type, theme, size, text, shape, logo_alignment, width, style, onClick, ...buttonProps }: GoogleCredentialButtonProps): React.JSX.Element | null;
+export type GoogleButtonVariant = "icon" | "text";
+export type GoogleButtonLabel = "continue" | "sign-in" | "sign-up";
+type GoogleButtonVisualProps = Omit<GoogleCredentialButtonProps, "logo_alignment" | "onCredential" | "onError" | "size" | "text" | "type"> & {
+    variant?: GoogleButtonVariant;
+    size?: "small" | "medium" | "large";
+    label?: GoogleButtonLabel;
+    logoAlignment?: "left" | "center";
+    mode?: AutharaColorMode;
+};
+export type GoogleButtonProps = GoogleButtonVisualProps & AutharaActionProps<"google">;
+export declare function GoogleButton(props: GoogleButtonProps): React.JSX.Element | null;
 export {};

package/dist/GoogleButton.js

@@ -1,10 +1,64 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState, } from "react";
-import { isProviderUnavailable, toError } from "./errors.js";
+import { resolveAction, runGoogleAction } from "./actions.js";
+import { isProviderUnavailable, toAutharaButtonError, toError, } from "./errors.js";
 import { useAutharaServices } from "./context.js";
-export function GoogleButton({ disabled = false, locale, fallback = null, onCredential, onError, onUnavailable, type = "standard", theme = "outline", size = "large", text = "continue_with", shape = "rectangular", logo_alignment = "left", width, style, ...divProps }) {
+import { useResolvedAutharaColorMode, } from "./color-mode.js";
+const googleButtonHeights = {
+    small: 30,
+    medium: 36,
+    large: 44,
+};
+const googleIconButtonSizes = {
+    small: 36,
+    medium: 44,
+    large: 52,
+};
+function googleButtonText(text) {
+    switch (text) {
+        case "signin":
+        case "signin_with":
+            return "Sign in with Google";
+        case "signup_with":
+            return "Sign up with Google";
+        case "continue_with":
+            return "Continue with Google";
+    }
+}
+function googleButtonRadius(shape, height) {
+    switch (shape) {
+        case "circle":
+        case "pill":
+            return height / 2;
+        case "square":
+            return 6;
+        case "rectangular":
+            return 12;
+    }
+}
+function googleButtonColors(theme) {
+    switch (theme) {
+        case "light":
+            return { background: "#fff", borderColor: "#747775", color: "#1f1f1f" };
+        case "dark":
+            return {
+                background: "#131314",
+                borderColor: "#8e918f",
+                color: "#e3e3e3",
+            };
+        case "neutral":
+            return {
+                background: "#f2f2f2",
+                borderColor: "transparent",
+                color: "#1f1f1f",
+            };
+    }
+}
+function GoogleLogo() {
+    return (_jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 18 18", width: "18", height: "18", focusable: "false", children: [_jsx("path", { fill: "#4285F4", d: "M17.64 9.205c0-.638-.057-1.252-.164-1.841H9v3.481h4.844a4.14 4.14 0 0 1-1.797 2.715v2.258h2.909c1.702-1.567 2.684-3.875 2.684-6.613Z" }), _jsx("path", { fill: "#34A853", d: "M9 18c2.43 0 4.468-.806 5.956-2.182l-2.91-2.258c-.805.54-1.835.86-3.046.86-2.344 0-4.328-1.585-5.037-3.714H.956v2.332A9 9 0 0 0 9 18Z" }), _jsx("path", { fill: "#FBBC05", d: "M3.963 10.706A5.41 5.41 0 0 1 3.682 9c0-.592.102-1.168.281-1.706V4.962H.956A9 9 0 0 0 0 9c0 1.452.347 2.827.956 4.038l3.007-2.332Z" }), _jsx("path", { fill: "#EA4335", d: "M9 3.58c1.321 0 2.507.454 3.44 1.345l2.581-2.58C13.464.892 11.426 0 9 0A9 9 0 0 0 .956 4.962l3.007 2.332C4.672 5.165 6.656 3.58 9 3.58Z" })] }));
+}
+export function GoogleCredentialButton({ disabled = false, border, buttonText, locale, fallback = null, onCredential, onError, onUnavailable, type = "standard", theme = "light", size = "large", text = "continue_with", shape = "rectangular", logo_alignment = "center", width, style, onClick, ...buttonProps }) {
     const { google } = useAutharaServices();
-    const targetRef = useRef(null);
     const credentialRef = useRef(onCredential);
     const errorRef = useRef(onError);
     const unavailableRef = useRef(onUnavailable);
@@ -12,41 +66,34 @@ export function GoogleButton({ disabled = false, locale, fallback = null, onCred
     const [available, setAvailable] = useState(true);
     const [ready, setReady] = useState(false);
     const [busy, setBusy] = useState(false);
+    const [requestCode, setRequestCode] = useState();
     credentialRef.current = onCredential;
     errorRef.current = onError;
     unavailableRef.current = onUnavailable;
     disabledRef.current = disabled;
     useEffect(() => {
-        const element = targetRef.current;
-        if (!element)
-            return;
         let active = true;
-        let dispose;
         void google
-            .render(element, {
-            type,
-            theme,
-            size,
-            text,
-            shape,
-            logo_alignment,
-            width: width ?? Math.min(element.clientWidth || 320, 400),
-        }, locale, (credential) => {
+            .prepare(locale, (credential) => {
             if (!active || disabledRef.current)
                 return;
             setBusy(true);
-            void Promise.resolve(credentialRef.current(credential))
+            void Promise.resolve()
+                .then(() => credentialRef.current(credential))
                 .catch((error) => errorRef.current?.(toError(error, "Google authentication failed.")))
                 .finally(() => {
                 if (active)
                     setBusy(false);
             });
-        })
-            .then((cleanup) => {
+        }, (error) => {
             if (!active)
-                cleanup();
-            else {
-                dispose = cleanup;
+                return;
+            setBusy(false);
+            errorRef.current?.(error);
+        })
+            .then((trigger) => {
+            if (active) {
+                setRequestCode(() => trigger);
                 setReady(true);
             }
         })
@@ -62,14 +109,101 @@ export function GoogleButton({ disabled = false, locale, fallback = null, onCred
         });
         return () => {
             active = false;
-            dispose?.();
         };
-    }, [google, locale, logo_alignment, shape, size, text, theme, type, width]);
+    }, [google, locale]);
     if (!available)
         return _jsx(_Fragment, { children: fallback });
     const inactive = disabled || busy;
-    return (_jsx("div", { ...divProps, ref: targetRef, "aria-busy": busy || undefined, "aria-disabled": inactive || undefined, "data-authara-provider": "google", "data-authara-ready": ready ? "true" : "false", style: {
+    const iconOnly = type === "icon";
+    const height = iconOnly
+        ? googleIconButtonSizes[size]
+        : googleButtonHeights[size];
+    const colors = googleButtonColors(theme);
+    const radius = googleButtonRadius(shape, height);
+    const label = buttonText ?? googleButtonText(text);
+    const showBorder = border ?? theme !== "neutral";
+    return (_jsxs("button", { ...buttonProps, type: "button", disabled: !ready || inactive, "aria-busy": busy || undefined, "aria-label": buttonProps["aria-label"] ?? (iconOnly ? label : undefined), "data-authara-provider": "google", "data-authara-ready": ready ? "true" : "false", "data-authara-google-presentation": true, "data-border": String(showBorder), onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented || !requestCode)
+                return;
+            setBusy(true);
+            requestCode();
+        }, style: {
+            position: "relative",
+            display: "inline-flex",
+            width: width ?? (iconOnly ? height : "100%"),
+            height,
+            alignItems: "center",
+            justifyContent: "center",
+            gap: iconOnly || logo_alignment === "left" ? 0 : 10,
+            padding: iconOnly ? 0 : "0 12px",
+            overflow: "hidden",
+            border: "1px solid",
+            borderRadius: radius,
+            boxSizing: "border-box",
+            boxShadow: "none",
+            cursor: !ready ? "wait" : inactive ? "not-allowed" : "pointer",
+            fontFamily: '"Google Sans", Roboto, Arial, sans-serif',
+            fontSize: 14,
+            fontWeight: 500,
+            lineHeight: "20px",
+            whiteSpace: "nowrap",
+            ...colors,
+            borderColor: showBorder ? colors.borderColor : "transparent",
+            outlineOffset: 2,
+            opacity: inactive ? 0.62 : 1,
+            transition: "opacity 150ms ease",
+            verticalAlign: "middle",
+            WebkitTapHighlightColor: "transparent",
             ...style,
-            pointerEvents: inactive ? "none" : style?.pointerEvents,
-        } }));
+        }, children: [_jsx("span", { "aria-hidden": "true", style: {
+                    display: "inline-flex",
+                    width: 20,
+                    height: 20,
+                    flex: "0 0 20px",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    background: "#fff",
+                    borderRadius: 2,
+                    position: !iconOnly && logo_alignment === "left" ? "absolute" : "static",
+                    left: !iconOnly && logo_alignment === "left" ? 12 : undefined,
+                }, children: _jsx(GoogleLogo, {}) }), !iconOnly && _jsx("span", { children: label })] }));
+}
+function googleText(label) {
+    switch (label) {
+        case "sign-in":
+            return "signin_with";
+        case "sign-up":
+            return "signup_with";
+        case "continue":
+            return "continue_with";
+    }
+}
+export function GoogleButton(props) {
+    const { client } = useAutharaServices();
+    const internal = props;
+    const { action = "login", audience, authenticationChallengeId, recoveryLinkId, onSuccess, onError, variant = "text", size = "large", label = action === "login" ? "sign-in" : "continue", logoAlignment = "center", mode = "light", border, shape, theme, ...buttonProps } = internal;
+    const resolvedMode = useResolvedAutharaColorMode(mode);
+    return (_jsx(GoogleCredentialButton, { ...buttonProps, border: border, theme: theme ?? resolvedMode, type: variant === "icon" ? "icon" : "standard", size: size, text: googleText(label), shape: shape ?? "rectangular", logo_alignment: logoAlignment, onCredential: async (proof) => {
+            let result;
+            let selected;
+            try {
+                selected = resolveAction(action, audience, authenticationChallengeId, recoveryLinkId);
+            }
+            catch (error) {
+                throw toAutharaButtonError(error, "The Google button action is not configured correctly.", "configuration");
+            }
+            try {
+                result = await runGoogleAction(client, selected, proof);
+            }
+            catch (error) {
+                throw toAutharaButtonError(error, `Google ${action} failed.`, "authara");
+            }
+            try {
+                await onSuccess?.(result);
+            }
+            catch (error) {
+                throw toAutharaButtonError(error, "The Google success callback failed.", "consumer");
+            }
+        }, onError: (error) => onError?.(toAutharaButtonError(error, "Google authentication failed.", "provider")) }));
 }

package/dist/MicrosoftButton.d.ts

@@ -0,0 +1,27 @@
+import { type ComponentPropsWithoutRef, type CSSProperties, type ReactNode } from "react";
+import { type AutharaActionProps, type MaybePromise } from "./contract.js";
+import type { MicrosoftCredential } from "./services.js";
+import { type AutharaColorMode } from "./color-mode.js";
+export type MicrosoftButtonVariant = "icon" | "text";
+export type MicrosoftButtonLabel = "continue" | "sign-in" | "sign-up";
+export interface MicrosoftCredentialButtonProps extends Omit<ComponentPropsWithoutRef<"button">, "children" | "onError" | "size" | "type"> {
+    disabled?: boolean;
+    variant?: MicrosoftButtonVariant;
+    size?: "small" | "medium" | "large";
+    label?: MicrosoftButtonLabel;
+    buttonText?: string;
+    align?: "center" | "left";
+    mode?: AutharaColorMode;
+    border?: boolean;
+    width?: CSSProperties["width"];
+    fallback?: ReactNode;
+    onCredential: (credential: MicrosoftCredential) => MaybePromise<void>;
+    onCancel?: () => void;
+    onError?: (error: Error) => void;
+    onUnavailable?: () => void;
+}
+export declare function MicrosoftCredentialButton({ disabled, variant, size, label, buttonText, align, mode, border, width, fallback, onCredential, onCancel, onError, onUnavailable, style, onClick, ...buttonProps }: MicrosoftCredentialButtonProps): React.JSX.Element | null;
+type MicrosoftButtonVisualProps = Omit<MicrosoftCredentialButtonProps, "onCredential" | "onError">;
+export type MicrosoftButtonProps = MicrosoftButtonVisualProps & AutharaActionProps<"microsoft">;
+export declare function MicrosoftButton(props: MicrosoftButtonProps): React.JSX.Element | null;
+export {};

package/dist/MicrosoftButton.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from "react";
+import { resolveAction, runMicrosoftAction } from "./actions.js";
+import { useAutharaServices } from "./context.js";
+import { isMicrosoftCancellation, isProviderUnavailable, toAutharaButtonError, toError, } from "./errors.js";
+import { useResolvedAutharaColorMode, } from "./color-mode.js";
+const textButtonHeights = { small: 30, medium: 36, large: 44 };
+const iconButtonSizes = { small: 36, medium: 44, large: 52 };
+function buttonLabel(label) {
+    switch (label) {
+        case "sign-in":
+            return "Sign in with Microsoft";
+        case "sign-up":
+            return "Sign up with Microsoft";
+        case "continue":
+            return "Continue with Microsoft";
+    }
+}
+function MicrosoftLogo() {
+    return (_jsxs("span", { "aria-hidden": "true", style: {
+            display: "grid",
+            width: 18,
+            height: 18,
+            flex: "0 0 18px",
+            gridTemplateColumns: "repeat(2, 1fr)",
+            gridTemplateRows: "repeat(2, 1fr)",
+            gap: 1,
+        }, children: [_jsx("span", { style: { background: "#f25022" } }), _jsx("span", { style: { background: "#7fba00" } }), _jsx("span", { style: { background: "#00a4ef" } }), _jsx("span", { style: { background: "#ffb900" } })] }));
+}
+export function MicrosoftCredentialButton({ disabled = false, variant = "text", size = "large", label = "continue", buttonText, align = "center", mode = "light", border = true, width, fallback = null, onCredential, onCancel, onError, onUnavailable, style, onClick, ...buttonProps }) {
+    const { microsoft } = useAutharaServices();
+    const credentialRef = useRef(onCredential);
+    const cancelRef = useRef(onCancel);
+    const errorRef = useRef(onError);
+    const unavailableRef = useRef(onUnavailable);
+    const [available, setAvailable] = useState(true);
+    const [ready, setReady] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const resolvedMode = useResolvedAutharaColorMode(mode);
+    credentialRef.current = onCredential;
+    cancelRef.current = onCancel;
+    errorRef.current = onError;
+    unavailableRef.current = onUnavailable;
+    useEffect(() => {
+        let active = true;
+        void microsoft
+            .prepare()
+            .then(() => {
+            if (active)
+                setReady(true);
+        })
+            .catch((error) => {
+            if (!active)
+                return;
+            if (isProviderUnavailable(error)) {
+                setAvailable(false);
+                unavailableRef.current?.();
+                return;
+            }
+            errorRef.current?.(toError(error, "Microsoft authentication is unavailable."));
+        });
+        return () => {
+            active = false;
+        };
+    }, [microsoft]);
+    if (!available)
+        return _jsx(_Fragment, { children: fallback });
+    const iconOnly = variant === "icon";
+    const height = iconOnly ? iconButtonSizes[size] : textButtonHeights[size];
+    const text = buttonText ?? buttonLabel(label);
+    const inactive = disabled || busy;
+    const dark = resolvedMode === "dark";
+    return (_jsxs("button", { ...buttonProps, type: "button", disabled: !ready || inactive, "aria-busy": busy || undefined, "aria-label": iconOnly ? text : buttonProps["aria-label"], "data-authara-provider": "microsoft", "data-authara-ready": ready ? "true" : "false", onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented || !ready || inactive)
+                return;
+            setReady(false);
+            setBusy(true);
+            const authorization = microsoft.authorize();
+            void authorization
+                .then((proof) => credentialRef.current(proof))
+                .catch((error) => {
+                if (isMicrosoftCancellation(error)) {
+                    cancelRef.current?.();
+                    return;
+                }
+                errorRef.current?.(toError(error, "Microsoft authentication failed."));
+            })
+                .finally(() => {
+                setBusy(false);
+                void microsoft
+                    .prepare()
+                    .then(() => setReady(true))
+                    .catch((error) => {
+                    errorRef.current?.(toError(error, "Microsoft authentication is unavailable."));
+                });
+            });
+        }, style: {
+            position: "relative",
+            display: "inline-flex",
+            width: width ?? (iconOnly ? height : "100%"),
+            height,
+            alignItems: "center",
+            justifyContent: "center",
+            gap: iconOnly || align === "left" ? 0 : 10,
+            padding: iconOnly ? 0 : "0 12px",
+            border: "1px solid",
+            borderColor: border ? (dark ? "#8e918f" : "#8c8c8c") : "transparent",
+            borderRadius: 12,
+            boxSizing: "border-box",
+            background: dark ? "#2f2f2f" : "#fff",
+            color: dark ? "#fff" : "#1f1f1f",
+            cursor: !ready ? "wait" : inactive ? "not-allowed" : "pointer",
+            fontFamily: '"Segoe UI", Arial, sans-serif',
+            fontSize: 14,
+            fontWeight: 600,
+            lineHeight: "20px",
+            opacity: inactive ? 0.62 : 1,
+            outlineOffset: 2,
+            transition: "opacity 150ms ease",
+            whiteSpace: "nowrap",
+            verticalAlign: "middle",
+            WebkitTapHighlightColor: "transparent",
+            ...style,
+        }, children: [_jsx("span", { style: {
+                    display: "inline-flex",
+                    position: !iconOnly && align === "left" ? "absolute" : "static",
+                    left: !iconOnly && align === "left" ? 12 : undefined,
+                }, children: _jsx(MicrosoftLogo, {}) }), !iconOnly && _jsx("span", { children: text })] }));
+}
+export function MicrosoftButton(props) {
+    const { client } = useAutharaServices();
+    const internal = props;
+    const { action = "login", audience, authenticationChallengeId, recoveryLinkId, onSuccess, onError, label = action === "login" ? "sign-in" : "continue", ...buttonProps } = internal;
+    return (_jsx(MicrosoftCredentialButton, { ...buttonProps, label: label, onCredential: async (proof) => {
+            let selected;
+            try {
+                selected = resolveAction(action, audience, authenticationChallengeId, recoveryLinkId);
+            }
+            catch (error) {
+                throw toAutharaButtonError(error, "The Microsoft button action is not configured correctly.", "configuration");
+            }
+            let result;
+            try {
+                result = await runMicrosoftAction(client, selected, proof);
+            }
+            catch (error) {
+                throw toAutharaButtonError(error, `Microsoft ${action} failed.`, "authara");
+            }
+            try {
+                await onSuccess?.(result);
+            }
+            catch (error) {
+                throw toAutharaButtonError(error, "The Microsoft success callback failed.", "consumer");
+            }
+        }, onError: (error) => onError?.(toAutharaButtonError(error, "Microsoft authentication failed.", "provider")) }));
+}

package/dist/actions.d.ts

@@ -0,0 +1,18 @@
+import type { AppleProof, AutharaAction, AutharaActionSuccess, AutharaAudience, AutharaReactClient, GoogleProof, MicrosoftProof } from "./contract.js";
+export type ResolvedAutharaAction = {
+    action: "login";
+    audience: AutharaAudience;
+} | {
+    action: "link";
+} | {
+    action: "reauthenticate";
+    authenticationChallengeId: string;
+} | {
+    action: "recover";
+    audience: "app";
+    recoveryLinkId: string;
+};
+export declare function runGoogleAction(client: AutharaReactClient, selected: ResolvedAutharaAction, proof: GoogleProof): Promise<AutharaActionSuccess<"google">>;
+export declare function runAppleAction(client: AutharaReactClient, selected: ResolvedAutharaAction, proof: AppleProof): Promise<AutharaActionSuccess<"apple">>;
+export declare function runMicrosoftAction(client: AutharaReactClient, selected: ResolvedAutharaAction, proof: MicrosoftProof): Promise<AutharaActionSuccess<"microsoft">>;
+export declare function resolveAction(action: AutharaAction | undefined, audience: AutharaAudience | undefined, authenticationChallengeId: string | undefined, recoveryLinkId: string | undefined): ResolvedAutharaAction;