@dloizides/auth-web 1.5.1 → 1.6.0

package/dist/index.js

@@ -1,12 +1,118 @@
 'use strict';
 
-var react = require('react');
 var reactNative = require('react-native');
+var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactQuery = require('@tanstack/react-query');
 var authClient = require('@dloizides/auth-client');
 
-// src/components/LoginForm.tsx
+// src/components/AuthScreen.tsx
+var FULL_WIDTH = "100%";
+var CARD_BORDER_WIDTH = 1;
+function useAuthScreenStyles(theme) {
+  return react.useMemo(() => {
+    const { colors, radii, spacing, typography } = theme;
+    return reactNative.StyleSheet.create({
+      screen: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        padding: spacing.md,
+        backgroundColor: colors.background
+      },
+      card: {
+        width: FULL_WIDTH,
+        borderRadius: radii.card,
+        borderWidth: CARD_BORDER_WIDTH,
+        borderColor: colors.border,
+        padding: spacing.xl,
+        backgroundColor: colors.surface
+      },
+      title: {
+        fontSize: typography.title,
+        fontWeight: "bold",
+        marginBottom: spacing.xs,
+        color: colors.text
+      },
+      subtitle: {
+        fontSize: typography.subtitle,
+        marginBottom: spacing.lg,
+        color: colors.textSecondary
+      },
+      footer: {
+        marginTop: spacing.lg,
+        width: FULL_WIDTH,
+        alignItems: "center"
+      }
+    });
+  }, [theme]);
+}
+
+// src/theme/AuthTheme.ts
+var defaultAuthTheme = {
+  colors: {
+    background: "#f5f5f7",
+    surface: "#ffffff",
+    text: "#1a1a1a",
+    textSecondary: "#6b6b6b",
+    border: "#d0d0d5",
+    primary: "#2563eb",
+    onPrimary: "#ffffff",
+    danger: "#d33333",
+    success: "#1f7a3d"
+  },
+  radii: {
+    input: 8,
+    card: 12
+  },
+  spacing: {
+    xs: 8,
+    sm: 12,
+    md: 20,
+    lg: 32,
+    xl: 24
+  },
+  typography: {
+    title: 28,
+    subtitle: 16,
+    label: 14,
+    body: 16,
+    caption: 12
+  }
+};
+var AuthThemeContext = react.createContext(defaultAuthTheme);
+function AuthThemeProvider({
+  theme,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AuthThemeContext.Provider, { value: theme, children });
+}
+function useAuthTheme(themeProp) {
+  const contextTheme = react.useContext(AuthThemeContext);
+  return react.useMemo(() => themeProp ?? contextTheme, [themeProp, contextTheme]);
+}
+var DEFAULT_AUTH_CARD_MAX_WIDTH = 420;
+function AuthScreen({
+  children,
+  theme: themeProp,
+  testID,
+  cardTestID,
+  maxWidth = DEFAULT_AUTH_CARD_MAX_WIDTH,
+  title,
+  subtitle,
+  footer
+}) {
+  const theme = useAuthTheme(themeProp);
+  const styles3 = useAuthScreenStyles(theme);
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.screen, testID, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles3.card, { maxWidth }], testID: cardTestID, children: [
+      title !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.title, children: title }) : null,
+      subtitle !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.subtitle, children: subtitle }) : null,
+      children
+    ] }),
+    footer !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles3.footer, { maxWidth }], children: footer }) : null
+  ] });
+}
 
 // src/components/labels.ts
 var DEFAULT_LOGIN_LABELS = {
@@ -247,7 +353,7 @@ var AuthTestIds = {
 function withTestIdPrefix(baseId, prefix) {
   return prefix === void 0 || prefix === "" ? baseId : `${prefix}-${baseId}`;
 }
-var FULL_WIDTH = "100%";
+var FULL_WIDTH2 = "100%";
 var CARD_MAX_WIDTH = 420;
 var BUTTON_VERTICAL_PADDING = 14;
 function useAuthStyles(theme) {
@@ -262,7 +368,7 @@ function useAuthStyles(theme) {
         backgroundColor: colors.background
       },
       card: {
-        width: FULL_WIDTH,
+        width: FULL_WIDTH2,
         maxWidth: CARD_MAX_WIDTH,
         borderRadius: radii.card,
         padding: spacing.xl,
@@ -305,11 +411,6 @@ function useAuthStyles(theme) {
       primaryButton: {
         borderRadius: radii.input,
         paddingVertical: BUTTON_VERTICAL_PADDING,
-        paddingHorizontal: spacing.md,
-        // Never shrink below the label width: in a row of actions (e.g. the
-        // forgot-password modal's Cancel + submit), shrinking would clip a long
-        // label like "Send reset link" past the button's rounded edge.
-        flexShrink: 0,
         alignItems: "center",
         justifyContent: "center",
         marginTop: spacing.xs,
@@ -352,8 +453,6 @@ function useAuthStyles(theme) {
         borderWidth: 1,
         borderColor: colors.primary,
         paddingVertical: BUTTON_VERTICAL_PADDING,
-        paddingHorizontal: spacing.md,
-        flexShrink: 0,
         alignItems: "center",
         justifyContent: "center",
         marginTop: spacing.sm,
@@ -476,50 +575,6 @@ function useBffAuth(options) {
     [session.user, session.status, isSubmitting, error, login, logout, refresh]
   );
 }
-
-// src/theme/AuthTheme.ts
-var defaultAuthTheme = {
-  colors: {
-    background: "#f5f5f7",
-    surface: "#ffffff",
-    text: "#1a1a1a",
-    textSecondary: "#6b6b6b",
-    border: "#d0d0d5",
-    primary: "#2563eb",
-    onPrimary: "#ffffff",
-    danger: "#d33333",
-    success: "#1f7a3d"
-  },
-  radii: {
-    input: 8,
-    card: 12
-  },
-  spacing: {
-    xs: 8,
-    sm: 12,
-    md: 20,
-    lg: 32,
-    xl: 24
-  },
-  typography: {
-    title: 28,
-    subtitle: 16,
-    label: 14,
-    body: 16,
-    caption: 12
-  }
-};
-var AuthThemeContext = react.createContext(defaultAuthTheme);
-function AuthThemeProvider({
-  theme,
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(AuthThemeContext.Provider, { value: theme, children });
-}
-function useAuthTheme(themeProp) {
-  const contextTheme = react.useContext(AuthThemeContext);
-  return react.useMemo(() => themeProp ?? contextTheme, [themeProp, contextTheme]);
-}
 function LoginForm({
   client,
   theme: themeProp,
@@ -527,7 +582,8 @@ function LoginForm({
   onSuccess,
   onForgotPassword,
   onSignUp,
-  testIdPrefix
+  testIdPrefix,
+  chromeless = false
 }) {
   const theme = useAuthTheme(themeProp);
   const styles3 = useAuthStyles(theme);
@@ -558,7 +614,7 @@ function LoginForm({
     void runLogin();
   }, [runLogin]);
   const submitButtonStyle = isSubmitting ? [styles3.primaryButton, styles3.primaryButtonDisabled] : styles3.primaryButton;
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.screen, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.card, testID: withTestIdPrefix(AuthTestIds.loginForm, testIdPrefix), children: [
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.title, children: labels.title }),
     /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.subtitle, children: labels.subtitle }),
     /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.fieldGroup, children: [
@@ -647,7 +703,16 @@ function LoginForm({
         children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.linkText, children: labels.signUp })
       }
     ) : null
-  ] }) });
+  ] });
+  const card = /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      style: chromeless ? void 0 : styles3.card,
+      testID: withTestIdPrefix(AuthTestIds.loginForm, testIdPrefix),
+      children: content
+    }
+  );
+  return chromeless ? card : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.screen, children: card });
 }
 function useBffForgotPassword(options) {
   const { client, ...rest } = options;
@@ -830,9 +895,6 @@ function useModalStyles(theme) {
         flexDirection: "row",
         justifyContent: "flex-end",
         alignItems: "center",
-        // Wrap (rather than clip) when a long submit label + Cancel can't
-        // fit a narrow modal on one line.
-        flexWrap: "wrap",
         marginTop: theme.spacing.md,
         gap: theme.spacing.sm
       },
@@ -840,8 +902,6 @@ function useModalStyles(theme) {
         borderRadius: theme.radii.input,
         paddingVertical: theme.spacing.sm,
         paddingHorizontal: theme.spacing.md,
-        // Match the submit button: never shrink below the label width.
-        flexShrink: 0,
         borderWidth: SECONDARY_BORDER_WIDTH,
         borderColor: theme.colors.border
       },
@@ -1502,7 +1562,8 @@ function OtpForm({
   theme: themeProp,
   labels: labelsProp,
   onSuccess,
-  testIdPrefix
+  testIdPrefix,
+  chromeless = false
 }) {
   const theme = useAuthTheme(themeProp);
   const styles3 = useAuthStyles(theme);
@@ -1523,7 +1584,7 @@ function OtpForm({
     otp.reset();
   }, [otp]);
   const errorText = localError ?? transportErrorFor(otp.step, otp.error, labels);
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.screen, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.card, testID: withTestIdPrefix(AuthTestIds.otpForm, testIdPrefix), children: otp.step === "requestCode" /* RequestCode */ ? /* @__PURE__ */ jsxRuntime.jsx(
+  const content = otp.step === "requestCode" /* RequestCode */ ? /* @__PURE__ */ jsxRuntime.jsx(
     OtpRequestStep,
     {
       errorText,
@@ -1548,7 +1609,16 @@ function OtpForm({
       onResend: handleResend,
       onSubmit: handleVerify
     }
-  ) }) });
+  );
+  const card = /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      style: chromeless ? void 0 : styles3.card,
+      testID: withTestIdPrefix(AuthTestIds.otpForm, testIdPrefix),
+      children: content
+    }
+  );
+  return chromeless ? card : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.screen, children: card });
 }
 function toError3(value) {
   return value instanceof Error ? value : new Error(String(value));
@@ -1627,7 +1697,8 @@ function PinForm({
   theme: themeProp,
   labels: labelsProp,
   onSuccess,
-  testIdPrefix
+  testIdPrefix,
+  chromeless = false
 }) {
   const theme = useAuthTheme(themeProp);
   const styles3 = useAuthStyles(theme);
@@ -1641,7 +1712,7 @@ function PinForm({
   const handleSubmit = useSubmitHandler(pin, labels, setLocalError, onSuccess);
   const errorText = localError ?? transportErrorFor2(pin.error, labels);
   const buttonStyle = pin.isSubmitting ? [styles3.primaryButton, styles3.primaryButtonDisabled] : styles3.primaryButton;
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.screen, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.card, testID: withTestIdPrefix(AuthTestIds.pinForm, testIdPrefix), children: [
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.title, children: labels.title }),
     /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.subtitle, children: labels.description }),
     /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.fieldGroup, children: [
@@ -1686,7 +1757,16 @@ function PinForm({
         children: pin.isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: theme.colors.onPrimary, size: "small" }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.primaryButtonText, children: labels.submit })
       }
     )
-  ] }) });
+  ] });
+  const card = /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      style: chromeless ? void 0 : styles3.card,
+      testID: withTestIdPrefix(AuthTestIds.pinForm, testIdPrefix),
+      children: content
+    }
+  );
+  return chromeless ? card : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.screen, children: card });
 }
 var DOT_SIZE = 18;
 var DOT_BORDER_WIDTH = 2;
@@ -2928,9 +3008,11 @@ Object.defineProperty(exports, "createFetchHttpClient", {
   enumerable: true,
   get: function () { return authClient.createFetchHttpClient; }
 });
+exports.AuthScreen = AuthScreen;
 exports.AuthTestIds = AuthTestIds;
 exports.AuthThemeProvider = AuthThemeProvider;
 exports.BffAuthStatus = BffAuthStatus;
+exports.DEFAULT_AUTH_CARD_MAX_WIDTH = DEFAULT_AUTH_CARD_MAX_WIDTH;
 exports.DEFAULT_DEVICE_PIN_ENROLL_LABELS = DEFAULT_DEVICE_PIN_ENROLL_LABELS;
 exports.DEFAULT_DEVICE_PIN_SETTINGS_LABELS = DEFAULT_DEVICE_PIN_SETTINGS_LABELS;
 exports.DEFAULT_DEVICE_PIN_UNLOCK_LABELS = DEFAULT_DEVICE_PIN_UNLOCK_LABELS;