@dloizides/auth-web 1.12.1 → 1.14.0

package/dist/index.js

@@ -9,15 +9,18 @@ var authClient = require('@dloizides/auth-client');
 // src/components/AuthScreen.tsx
 var FULL_WIDTH = "100%";
 var CARD_BORDER_WIDTH = 1;
+var CARD_TOP_OFFSET = 64;
 function useAuthScreenStyles(theme) {
   return react.useMemo(() => {
     const { colors, radii, spacing, typography } = theme;
     return reactNative.StyleSheet.create({
       screen: {
         flex: 1,
-        justifyContent: "center",
+        // Deliberately NOT `justifyContent: 'center'` — see CARD_TOP_OFFSET.
+        justifyContent: "flex-start",
         alignItems: "center",
         padding: spacing.md,
+        paddingTop: CARD_TOP_OFFSET,
         backgroundColor: colors.background
       },
       card: {
@@ -75,7 +78,8 @@ var defaultAuthTheme = {
   typography: {
     title: 28,
     subtitle: 16,
-    label: 14,
+    // 13, not 14 — the shared contract's `field` voice. See AuthThemeTypography.label.
+    label: 13,
     body: 16,
     caption: 12
   }
@@ -282,7 +286,9 @@ var DEFAULT_DEMO_CREDENTIALS_HINT_LABELS = {
   usernameLabel: "Username",
   passwordLabel: "Password",
   useCredentials: "Use these credentials",
-  useCredentialsHint: "Fill the sign-in form with the demo username and password"
+  useCredentialsHint: "Fill the sign-in form with the demo username and password",
+  toggle: "Try the demo",
+  toggleHint: "Show the demo account username and password"
 };
 
 // src/components/labels/resetPasswordLabels.ts
@@ -379,7 +385,9 @@ var AuthTestIds = {
   demoCredentialsHint: "auth-demo-credentials-hint",
   demoCredentialsUsername: "auth-demo-credentials-username",
   demoCredentialsPassword: "auth-demo-credentials-password",
-  demoCredentialsUseButton: "auth-demo-credentials-use"
+  demoCredentialsUseButton: "auth-demo-credentials-use",
+  // The collapsed disclosure trigger (`disclosure` variant only).
+  demoCredentialsToggle: "auth-demo-credentials-toggle"
 };
 function withTestIdPrefix(baseId, prefix) {
   return prefix === void 0 || prefix === "" ? baseId : `${prefix}-${baseId}`;
@@ -387,15 +395,21 @@ function withTestIdPrefix(baseId, prefix) {
 var FULL_WIDTH2 = "100%";
 var CARD_MAX_WIDTH = 420;
 var BUTTON_VERTICAL_PADDING = 14;
+var SCREEN_TOP_OFFSET = 64;
 function useAuthStyles(theme) {
   return react.useMemo(() => {
     const { colors, radii, spacing, typography } = theme;
     return reactNative.StyleSheet.create({
       screen: {
         flex: 1,
-        justifyContent: "center",
+        // Top-anchored, NOT centred — a centred card re-centres as it grows and
+        // drags the inputs up under the cursor. Same reasoning (and the same
+        // measurement) as `useAuthScreenStyles`' CARD_TOP_OFFSET; kept in step so
+        // a standalone `<LoginForm>` and an `<AuthScreen>`-composed one agree.
+        justifyContent: "flex-start",
         alignItems: "center",
         padding: spacing.md,
+        paddingTop: SCREEN_TOP_OFFSET,
         backgroundColor: colors.background
       },
       card: {
@@ -2009,14 +2023,15 @@ function DevicePinLengthPicker({
   const theme = useAuthTheme(themeProp);
   const dynamic = usePickerStyles(theme);
   const baseId = withTestIdPrefix(AuthTestIds.devicePinEnrollLength, testIdPrefix);
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.row, children: DEVICE_PIN_ALLOWED_DIGITS.map((option) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { accessibilityRole: "radiogroup", role: "radiogroup", style: styles2.row, children: DEVICE_PIN_ALLOWED_DIGITS.map((option) => {
     const active = option === selected;
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
+        "aria-checked": active,
         accessibilityHint: interpolate(optionHint, { count: option }),
         accessibilityLabel: String(option),
-        accessibilityRole: "button",
+        accessibilityRole: "radio",
         accessibilityState: { selected: active },
         disabled,
         style: [styles2.pill, dynamic.pill, active ? dynamic.active : null],
@@ -3160,6 +3175,7 @@ function PreferredMethodSettingsCard({
           return /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.TouchableOpacity,
             {
+              "aria-checked": isSelected,
               accessibilityHint: labels.description,
               accessibilityLabel: option.label,
               accessibilityRole: "radio",
@@ -3216,7 +3232,62 @@ function PreferredMethodHint({
   }
   return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: withTestIdPrefix(AuthTestIds.preferredMethodHint, testIdPrefix), children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.helperText, children: text }) });
 }
+function DemoCredentialsBody({
+  credentials,
+  labels,
+  styles: styles3,
+  authStyles,
+  testIdPrefix,
+  onUse
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.row, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.rowLabel, children: labels.usernameLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          selectable: true,
+          style: styles3.rowValue,
+          testID: withTestIdPrefix(AuthTestIds.demoCredentialsUsername, testIdPrefix),
+          children: credentials.username
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.row, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.rowLabel, children: labels.passwordLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          selectable: true,
+          style: styles3.rowValue,
+          testID: withTestIdPrefix(AuthTestIds.demoCredentialsPassword, testIdPrefix),
+          children: credentials.password
+        }
+      )
+    ] }),
+    onUse !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.TouchableOpacity,
+      {
+        accessibilityHint: labels.useCredentialsHint,
+        accessibilityLabel: labels.useCredentials,
+        accessibilityRole: "button",
+        style: [authStyles.secondaryButton, styles3.useButton],
+        testID: withTestIdPrefix(AuthTestIds.demoCredentialsUseButton, testIdPrefix),
+        onPress: onUse,
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: authStyles.secondaryButtonText, children: labels.useCredentials })
+      }
+    ) : null
+  ] });
+}
+
+// src/components/DemoCredentialsHintVariant.ts
+var DemoCredentialsHintVariant = /* @__PURE__ */ ((DemoCredentialsHintVariant2) => {
+  DemoCredentialsHintVariant2["Panel"] = "panel";
+  DemoCredentialsHintVariant2["Disclosure"] = "disclosure";
+  return DemoCredentialsHintVariant2;
+})(DemoCredentialsHintVariant || {});
 var PANEL_BORDER_WIDTH = 1;
+var TRIGGER_MIN_HEIGHT = 32;
 var ACCENT_RAIL_WIDTH = 3;
 var TITLE_LETTER_SPACING = 0.8;
 var DESCRIPTION_LINE_HEIGHT_RATIO = 1.45;
@@ -3277,6 +3348,40 @@ function useDemoCredentialsStyles(theme) {
         flexShrink: 1,
         backgroundColor: colors.surface,
         color: colors.text
+      },
+      // ── Disclosure variant ──────────────────────────────────────────────
+      // No panel fill, no border, no brand rail: the collapsed state is one
+      // line of text and nothing else, so on a page a real customer uses it
+      // reads as a footnote rather than as a second call to action.
+      disclosure: {
+        marginTop: spacing.md,
+        alignSelf: "stretch"
+      },
+      disclosureTrigger: {
+        alignSelf: "center",
+        justifyContent: "center",
+        minHeight: TRIGGER_MIN_HEIGHT,
+        paddingHorizontal: spacing.xs
+      },
+      disclosureTriggerText: {
+        fontSize: typography.caption,
+        textDecorationLine: "underline",
+        // `textSecondary`, NOT a dimmed `text`. This is the same token the rest
+        // of the helper copy uses, so it inherits whatever AA contrast the
+        // consuming app already guarantees. Discretion here is carried by the
+        // caption size, the centred placement below the form, and the absence
+        // of any fill or border — never by fading the text toward the
+        // background, which is how "discreet" quietly becomes a contrast bug.
+        color: colors.textSecondary
+      },
+      disclosureBody: {
+        marginTop: spacing.sm,
+        paddingTop: spacing.sm,
+        borderTopWidth: PANEL_BORDER_WIDTH,
+        borderTopColor: colors.border
+      },
+      useButton: {
+        alignSelf: "stretch"
       }
     });
   }, [theme]);
@@ -3297,6 +3402,7 @@ function resolveDemoCredentials(credentials) {
 }
 function DemoCredentialsHint({
   credentials,
+  variant = "disclosure" /* Disclosure */,
   theme: themeProp,
   labels: labelsProp,
   testIdPrefix,
@@ -3305,6 +3411,7 @@ function DemoCredentialsHint({
   const theme = useAuthTheme(themeProp);
   const authStyles = useAuthStyles(theme);
   const styles3 = useDemoCredentialsStyles(theme);
+  const [expanded, setExpanded] = react.useState(false);
   const labels = react.useMemo(
     () => ({ ...DEFAULT_DEMO_CREDENTIALS_HINT_LABELS, ...labelsProp }),
     [labelsProp]
@@ -3315,53 +3422,58 @@ function DemoCredentialsHint({
       onUse(resolved);
     }
   }, [resolved, onUse]);
+  const handleToggle = react.useCallback(() => {
+    setExpanded((current) => !current);
+  }, []);
   if (resolved === null) {
     return null;
   }
+  const body = /* @__PURE__ */ jsxRuntime.jsx(
+    DemoCredentialsBody,
+    {
+      authStyles,
+      credentials: resolved,
+      labels,
+      styles: styles3,
+      testIdPrefix,
+      onUse: onUse === void 0 ? void 0 : handleUse
+    }
+  );
+  if (variant === "panel" /* Panel */) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.View,
+      {
+        style: styles3.panel,
+        testID: withTestIdPrefix(AuthTestIds.demoCredentialsHint, testIdPrefix),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.title, children: labels.title }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.description, children: labels.description }),
+          body
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.View,
     {
-      style: styles3.panel,
+      style: styles3.disclosure,
       testID: withTestIdPrefix(AuthTestIds.demoCredentialsHint, testIdPrefix),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.title, children: labels.title }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.description, children: labels.description }),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.row, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.rowLabel, children: labels.usernameLabel }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.Text,
-            {
-              selectable: true,
-              style: styles3.rowValue,
-              testID: withTestIdPrefix(AuthTestIds.demoCredentialsUsername, testIdPrefix),
-              children: resolved.username
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.row, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.rowLabel, children: labels.passwordLabel }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.Text,
-            {
-              selectable: true,
-              style: styles3.rowValue,
-              testID: withTestIdPrefix(AuthTestIds.demoCredentialsPassword, testIdPrefix),
-              children: resolved.password
-            }
-          )
-        ] }),
-        onUse !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.TouchableOpacity,
           {
-            accessibilityHint: labels.useCredentialsHint,
-            accessibilityLabel: labels.useCredentials,
+            "aria-expanded": expanded,
+            accessibilityHint: labels.toggleHint,
+            accessibilityLabel: labels.toggle,
             accessibilityRole: "button",
-            style: authStyles.secondaryButton,
-            testID: withTestIdPrefix(AuthTestIds.demoCredentialsUseButton, testIdPrefix),
-            onPress: handleUse,
-            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: authStyles.secondaryButtonText, children: labels.useCredentials })
+            accessibilityState: { expanded },
+            style: styles3.disclosureTrigger,
+            testID: withTestIdPrefix(AuthTestIds.demoCredentialsToggle, testIdPrefix),
+            onPress: handleToggle,
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.disclosureTriggerText, children: labels.toggle })
           }
-        ) : null
+        ),
+        expanded ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.disclosureBody, children: body }) : null
       ]
     }
   );
@@ -3637,6 +3749,7 @@ exports.DEFAULT_RESET_PASSWORD_LABELS = DEFAULT_RESET_PASSWORD_LABELS;
 exports.DEVICE_PIN_ALLOWED_DIGITS = DEVICE_PIN_ALLOWED_DIGITS;
 exports.DEVICE_PIN_DEFAULT_DIGITS = DEVICE_PIN_DEFAULT_DIGITS;
 exports.DemoCredentialsHint = DemoCredentialsHint;
+exports.DemoCredentialsHintVariant = DemoCredentialsHintVariant;
 exports.DevicePinEnrollErrorKey = DevicePinEnrollErrorKey;
 exports.DevicePinEnrollForm = DevicePinEnrollForm;
 exports.DevicePinErrorKey = DevicePinErrorKey;