@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/auth/totp.js

@@ -0,0 +1,378 @@
+import { c as _c } from "react/compiler-runtime";
+import { useState } from "react";
+import { useSignIn } from "@clerk/clerk-expo";
+import { authErrorMessage, DEFAULT_STAGE_TIMEOUT_MS, isAuthTimeoutError, logAuthFailure, withAuthTimeout } from "./authErrors";
+
+/** Logs a timed-out stage. Other failures are not logged here. */
+const logTimeout = (stage, error) => {
+  if (isAuthTimeoutError(error)) logAuthFailure(stage, error);
+};
+
+/** The messages the second-factor step can show. Generic: none names a provider. */
+export const TOTP_MESSAGES = {
+  invalidCode: "Incorrect code. Check your authenticator app and try again.",
+  invalidCodeGeneric: "Incorrect code. Check it and try again.",
+  sendFailed: "Could not send the code. Try again.",
+  needsAnotherStep: "This account needs another step to sign in. Finish it on the web.",
+  notReady: "Sign in is not ready yet. Try again in a moment."
+};
+
+/** The second-factor strategies the built-in step handles. */
+
+/** Default order: the first one the account supports wins. */
+export const SECOND_FACTOR_PREFERENCE = ["totp", "email_code", "phone_code", "backup_code"];
+
+/** One entry of `signIn.supportedSecondFactors`. */
+
+/**
+ * The params of `prepareSecondFactor`. A union on `strategy`, as in Clerk's
+ * `PhoneCodeSecondFactorConfig | EmailCodeSecondFactorConfig`. One object with
+ * `strategy: "phone_code" | "email_code"` does not accept Clerk's
+ * `SignInResource` under `strictFunctionTypes`.
+ */
+
+/**
+ * The params of `prepareFirstFactor`. A union on `strategy`, as in Clerk's
+ * `EmailCodeConfig | PhoneCodeConfig`, where the id is required.
+ */
+
+/** The part of the sign-in resource that TOTP needs. Tests pass a mock. */
+
+/** The part of the sign-in resource that any second factor needs. Tests pass a mock. */
+
+/** The strategies in `factors` that the built-in step handles, in the order given. */
+export function supportedSecondFactorStrategies(factors) {
+  const found = new Set((factors ?? []).map(factor => factor.strategy));
+  return SECOND_FACTOR_PREFERENCE.filter(strategy => found.has(strategy));
+}
+
+/** The default strategy: `totp`, then `email_code`, `phone_code`, `backup_code`. `null` when none is supported. */
+export function pickSecondFactorStrategy(factors) {
+  return supportedSecondFactorStrategies(factors)[0] ?? null;
+}
+
+/**
+ * Sends the code for `phone_code` and `email_code`, with the `phoneNumberId` or
+ * `emailAddressId` of the matching factor. `totp` and `backup_code` need no
+ * prepare: it returns `{ ok: true }` without a call. Never throws.
+ */
+export async function prepareSecondFactorIfNeeded(args) {
+  const {
+    signIn,
+    strategy
+  } = args;
+  const ms = args.timeoutMs ?? DEFAULT_STAGE_TIMEOUT_MS;
+  if (strategy !== "phone_code" && strategy !== "email_code") return {
+    ok: true
+  };
+  if (!signIn.prepareSecondFactor) return {
+    ok: false,
+    error: TOTP_MESSAGES.sendFailed
+  };
+  const factor = args.factor ?? signIn.supportedSecondFactors?.find(item => item.strategy === strategy);
+  try {
+    if (strategy === "phone_code") {
+      await withAuthTimeout(signIn.prepareSecondFactor({
+        strategy,
+        ...(factor?.phoneNumberId ? {
+          phoneNumberId: factor.phoneNumberId
+        } : {})
+      }), "prepare-second-factor", ms);
+    } else {
+      await withAuthTimeout(signIn.prepareSecondFactor({
+        strategy,
+        ...(factor?.emailAddressId ? {
+          emailAddressId: factor.emailAddressId
+        } : {})
+      }), "prepare-second-factor", ms);
+    }
+    return {
+      ok: true
+    };
+  } catch (caught) {
+    logTimeout("prepare-second-factor", caught);
+    return {
+      ok: false,
+      error: authErrorMessage(caught, TOTP_MESSAGES.sendFailed)
+    };
+  }
+}
+
+/**
+ * Checks a second-factor code and starts the session. Call
+ * `prepareSecondFactorIfNeeded` first for `phone_code` and `email_code`.
+ * Never throws: a failure is `{ ok: false, error }`. An API error shows its
+ * own text (such as "Incorrect code") unless it names the provider; anything
+ * else gives `TOTP_MESSAGES.invalidCode` (`totp`) or `invalidCodeGeneric`.
+ */
+export async function submitSecondFactor(args) {
+  const ms = args.timeoutMs ?? DEFAULT_STAGE_TIMEOUT_MS;
+  try {
+    const attempt = await withAuthTimeout(args.signIn.attemptSecondFactor({
+      strategy: args.strategy,
+      code: args.code
+    }), "attempt-second-factor", ms);
+    if (attempt.status === "complete" && attempt.createdSessionId) {
+      await withAuthTimeout(args.setActive({
+        session: attempt.createdSessionId
+      }), "set-active", ms);
+      return {
+        ok: true
+      };
+    }
+    return {
+      ok: false,
+      error: TOTP_MESSAGES.needsAnotherStep
+    };
+  } catch (caught) {
+    logTimeout("attempt-second-factor", caught);
+    const fallback = args.strategy === "totp" ? TOTP_MESSAGES.invalidCode : TOTP_MESSAGES.invalidCodeGeneric;
+    return {
+      ok: false,
+      error: authErrorMessage(caught, fallback)
+    };
+  }
+}
+
+/** The first-factor code strategies the built-in step handles. */
+
+/** Default order: `email_code`, then `phone_code`. */
+export const FIRST_FACTOR_PREFERENCE = ["email_code", "phone_code"];
+
+/** One entry of `signIn.supportedFirstFactors`. */
+
+/** The part of the sign-in resource that a first-factor code needs. Tests pass a mock. */
+
+/** A first-factor result: the attempt, for the caller to route, or an error. */
+
+/**
+ * The first-factor strategies in `factors` that the built-in step handles, in
+ * preference order. A factor counts only when it has the id that
+ * `prepareFirstFactor` needs (`emailAddressId` or `phoneNumberId`).
+ */
+export function supportedFirstFactorStrategies(factors) {
+  const list = factors ?? [];
+  return FIRST_FACTOR_PREFERENCE.filter(strategy => list.some(factor => factor.strategy === strategy && Boolean(strategy === "email_code" ? factor.emailAddressId : factor.phoneNumberId)));
+}
+
+/** The default first-factor strategy: `email_code`, then `phone_code`. `null` when none is supported. */
+export function pickFirstFactorStrategy(factors) {
+  return supportedFirstFactorStrategies(factors)[0] ?? null;
+}
+
+/**
+ * Sends the first-factor code with the `emailAddressId` or `phoneNumberId` of
+ * the matching factor. Without that id it returns an error and makes no call.
+ * Never throws.
+ */
+export async function prepareFirstFactorIfNeeded(args) {
+  const {
+    signIn,
+    strategy
+  } = args;
+  const ms = args.timeoutMs ?? DEFAULT_STAGE_TIMEOUT_MS;
+  if (!signIn.prepareFirstFactor) return {
+    ok: false,
+    error: TOTP_MESSAGES.sendFailed
+  };
+  const factor = args.factor ?? signIn.supportedFirstFactors?.find(item => item.strategy === strategy);
+  try {
+    if (strategy === "phone_code") {
+      if (!factor?.phoneNumberId) return {
+        ok: false,
+        error: TOTP_MESSAGES.sendFailed
+      };
+      await withAuthTimeout(signIn.prepareFirstFactor({
+        strategy,
+        phoneNumberId: factor.phoneNumberId
+      }), "prepare-first-factor", ms);
+    } else {
+      if (!factor?.emailAddressId) return {
+        ok: false,
+        error: TOTP_MESSAGES.sendFailed
+      };
+      await withAuthTimeout(signIn.prepareFirstFactor({
+        strategy,
+        emailAddressId: factor.emailAddressId
+      }), "prepare-first-factor", ms);
+    }
+    return {
+      ok: true
+    };
+  } catch (caught) {
+    logTimeout("prepare-first-factor", caught);
+    return {
+      ok: false,
+      error: authErrorMessage(caught, TOTP_MESSAGES.sendFailed)
+    };
+  }
+}
+
+/**
+ * Checks a first-factor code. It does not start the session: the attempt may
+ * need a second factor or a new password, so the caller routes it. Never
+ * throws: a failure is `{ ok: false, error }`.
+ */
+export async function submitFirstFactor(args) {
+  try {
+    const attempt = await withAuthTimeout(args.signIn.attemptFirstFactor({
+      strategy: args.strategy,
+      code: args.code
+    }), "attempt-first-factor", args.timeoutMs ?? DEFAULT_STAGE_TIMEOUT_MS);
+    return {
+      ok: true,
+      attempt
+    };
+  } catch (caught) {
+    logTimeout("attempt-first-factor", caught);
+    return {
+      ok: false,
+      error: authErrorMessage(caught, TOTP_MESSAGES.invalidCodeGeneric)
+    };
+  }
+}
+
+/** Checks a TOTP code and starts the session. TOTP needs no `prepareSecondFactor`. Same as `submitSecondFactor` with `strategy: "totp"`. */
+export function submitTotpSecondFactor(args) {
+  return submitSecondFactor({
+    signIn: args.signIn,
+    setActive: args.setActive,
+    code: args.code,
+    strategy: "totp",
+    timeoutMs: args.timeoutMs
+  });
+}
+/**
+ * Completes a sign-in that returned `needs_second_factor`. Default strategy
+ * `"totp"` (an authenticator-app code); pass `{ strategy }` or call
+ * `setStrategy` for the others. Pair with `SecondFactorScreen`:
+ * `onSubmit={submit}`, `error={error}`, `loading={loading}`. After
+ * `{ ok: true }` the session is active: navigate in the caller.
+ */
+export function useSecondFactor(t0) {
+  const $ = _c(22);
+  let t1;
+  if ($[0] !== t0) {
+    t1 = t0 === undefined ? {} : t0;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const options = t1;
+  const {
+    isLoaded,
+    signIn,
+    setActive
+  } = useSignIn();
+  const [chosen, setChosen] = useState(null);
+  const strategy = chosen ?? options.strategy ?? "totp";
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const timeoutMs = options.stageTimeoutMs ?? DEFAULT_STAGE_TIMEOUT_MS;
+  let t2;
+  if ($[2] !== error || $[3] !== isLoaded || $[4] !== loading || $[5] !== setActive || $[6] !== signIn || $[7] !== strategy || $[8] !== timeoutMs) {
+    t2 = async code => {
+      if (loading) {
+        return {
+          ok: false,
+          error
+        };
+      }
+      if (!isLoaded || !signIn || !setActive) {
+        setError(TOTP_MESSAGES.notReady);
+        return {
+          ok: false,
+          error: TOTP_MESSAGES.notReady
+        };
+      }
+      setLoading(true);
+      setError("");
+      const result = await submitSecondFactor({
+        signIn,
+        setActive,
+        code,
+        strategy,
+        timeoutMs
+      });
+      if (!result.ok) {
+        setError(result.error);
+      }
+      setLoading(false);
+      return result;
+    };
+    $[2] = error;
+    $[3] = isLoaded;
+    $[4] = loading;
+    $[5] = setActive;
+    $[6] = signIn;
+    $[7] = strategy;
+    $[8] = timeoutMs;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  const submit = t2;
+  let t3;
+  if ($[10] !== isLoaded || $[11] !== signIn || $[12] !== strategy || $[13] !== timeoutMs) {
+    t3 = async (t4, factor) => {
+      const prepareStrategy = t4 === undefined ? strategy : t4;
+      if (!isLoaded || !signIn) {
+        setError(TOTP_MESSAGES.notReady);
+        return {
+          ok: false,
+          error: TOTP_MESSAGES.notReady
+        };
+      }
+      setLoading(true);
+      setError("");
+      const result_0 = await prepareSecondFactorIfNeeded({
+        signIn,
+        strategy: prepareStrategy,
+        factor,
+        timeoutMs
+      });
+      if (!result_0.ok) {
+        setError(result_0.error);
+      }
+      setLoading(false);
+      return result_0;
+    };
+    $[10] = isLoaded;
+    $[11] = signIn;
+    $[12] = strategy;
+    $[13] = timeoutMs;
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  const prepare = t3;
+  let t4;
+  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = () => setError("");
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  let t5;
+  if ($[16] !== error || $[17] !== loading || $[18] !== prepare || $[19] !== strategy || $[20] !== submit) {
+    t5 = {
+      submit,
+      prepare,
+      strategy,
+      setStrategy: setChosen,
+      loading,
+      error,
+      clearError: t4
+    };
+    $[16] = error;
+    $[17] = loading;
+    $[18] = prepare;
+    $[19] = strategy;
+    $[20] = submit;
+    $[21] = t5;
+  } else {
+    t5 = $[21];
+  }
+  return t5;
+}

package/dist/blur.js

@@ -0,0 +1,36 @@
+let expoBlur;
+
+/**
+ * `expo-blur`, or `null` when the optional peer is not installed. Metro
+ * bundles a `require` placed directly in a `try` block as an optional
+ * dependency, so a missing peer does not break the bundle.
+ */
+export function loadBlur() {
+  if (expoBlur === undefined) {
+    try {
+      expoBlur = require("expo-blur");
+    } catch {
+      expoBlur = null;
+    }
+  }
+  return expoBlur;
+}
+/**
+ * How a floating surface draws its glass: a native `BlurView` on iOS and
+ * Android, a CSS backdrop blur on web, or the solid fill when blur is off,
+ * Reduce Transparency is on or `expo-blur` is missing.
+ */
+export function glassMode({
+  os,
+  blur,
+  reduceTransparency,
+  hasBlurView
+}) {
+  if (!blur || reduceTransparency) {
+    return "solid";
+  }
+  if (os === "web") {
+    return "backdrop";
+  }
+  return (os === "ios" || os === "android") && hasBlurView ? "blur" : "solid";
+}

package/dist/brand/AppIcons.jsx

@@ -0,0 +1,118 @@
+import { c as _c } from "react/compiler-runtime";
+import { Platform } from "react-native";
+import Svg, { G, Path } from "react-native-svg";
+import { svgA11yProps } from "../svgA11y";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { APP_MARKS, APP_MARK_VIEWBOX, APP_MARK_VIEWBOX_START, APP_NAMES, markLinecap, markStrokeWidth } from "./svg";
+function viewBoxSide(app) {
+  return Number(APP_MARK_VIEWBOX[app].split(" ")[3]);
+}
+function createAppIcon(app, displayName) {
+  function Icon(t0) {
+    const $ = _c(18);
+    const {
+      size: t1,
+      color,
+      stroke,
+      title,
+      align: t2,
+      testID,
+      style
+    } = t0;
+    const size = t1 === undefined ? 24 : t1;
+    const align = t2 === undefined ? "center" : t2;
+    const scheme = useScheme();
+    const fill = color ?? tokens.color.foreground[scheme];
+    const {
+      kind,
+      paths
+    } = APP_MARKS[app];
+    let t3;
+    if ($[0] !== size || $[1] !== stroke) {
+      t3 = stroke === undefined ? markStrokeWidth(app) : stroke * (viewBoxSide(app) / size);
+      $[0] = size;
+      $[1] = stroke;
+      $[2] = t3;
+    } else {
+      t3 = $[2];
+    }
+    const strokeWidth = t3;
+    let t4;
+    if ($[3] !== fill || $[4] !== strokeWidth) {
+      t4 = kind === "fill" ? {
+        fill
+      } : {
+        fill: "none",
+        stroke: fill,
+        strokeWidth,
+        strokeLinecap: markLinecap(app),
+        strokeLinejoin: "round"
+      };
+      $[3] = fill;
+      $[4] = strokeWidth;
+      $[5] = t4;
+    } else {
+      t4 = $[5];
+    }
+    const glyphProps = t4;
+    const t5 = align === "start" ? APP_MARK_VIEWBOX_START[app] : APP_MARK_VIEWBOX[app];
+    let t6;
+    if ($[6] !== testID || $[7] !== title) {
+      t6 = svgA11yProps({
+        title,
+        testID
+      }, Platform.OS);
+      $[6] = testID;
+      $[7] = title;
+      $[8] = t6;
+    } else {
+      t6 = $[8];
+    }
+    let t7;
+    if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+      t7 = paths.map(_temp);
+      $[9] = t7;
+    } else {
+      t7 = $[9];
+    }
+    let t8;
+    if ($[10] !== glyphProps) {
+      t8 = <G {...glyphProps}>{t7}</G>;
+      $[10] = glyphProps;
+      $[11] = t8;
+    } else {
+      t8 = $[11];
+    }
+    let t9;
+    if ($[12] !== size || $[13] !== style || $[14] !== t5 || $[15] !== t6 || $[16] !== t8) {
+      t9 = <Svg width={size} height={size} viewBox={t5} preserveAspectRatio="xMidYMid meet" {...t6} style={style}>{t8}</Svg>;
+      $[12] = size;
+      $[13] = style;
+      $[14] = t5;
+      $[15] = t6;
+      $[16] = t8;
+      $[17] = t9;
+    } else {
+      t9 = $[17];
+    }
+    return t9;
+  }
+  function _temp(d) {
+    return <Path key={d} d={d} />;
+  }
+  Icon.displayName = displayName;
+  return Icon;
+}
+const iconName = app => `Icon${app === "projectv" ? "ProjectV" : app[0].toUpperCase() + app.slice(1)}`;
+
+/** Plain app glyph components by app name, for dynamic lookup. Same paths and viewBoxes as the web `APP_ICONS`. */
+export const APP_ICONS = Object.fromEntries(APP_NAMES.map(app => [app, createAppIcon(app, iconName(app))]));
+export const IconVibot = APP_ICONS.vibot;
+export const IconVhub = APP_ICONS.vhub;
+export const IconVmem = APP_ICONS.vmem;
+export const IconVerve = APP_ICONS.verve;
+export const IconVelth = APP_ICONS.velth;
+export const IconProjectV = APP_ICONS.projectv;
+export const IconEva = APP_ICONS.eva;
+export const IconBee = APP_ICONS.bee;

package/dist/brand/AppMark.jsx

@@ -0,0 +1,128 @@
+import { c as _c } from "react/compiler-runtime";
+import { Platform } from "react-native";
+import Svg, { G, Path, Rect } from "react-native-svg";
+import { svgA11yProps } from "../svgA11y";
+import { APP_ICONS } from "./AppIcons";
+import { APP_MARKS, MARK_VIEWBOX, TILE_RADIUS, markLinecap, markStrokeWidth } from "./svg";
+const TILE_TONES = {
+  tile: {
+    bg: "#000",
+    fg: "#fff"
+  },
+  "tile-light": {
+    bg: "#fff",
+    fg: "#000"
+  }
+};
+
+/**
+ * One of the six family app marks, as on the web `AppMark`. Tiles share the
+ * 1024 grid with the plain mark, so a bare glyph matches the tile glyph.
+ * Prefer `APP_ICONS[app]` for plain marks; tiles are for app icons only.
+ */
+export function AppMark(t0) {
+  const $ = _c(26);
+  const {
+    app,
+    variant: t1,
+    size: t2,
+    title,
+    testID,
+    style
+  } = t0;
+  const variant = t1 === undefined ? "mark" : t1;
+  const size = t2 === undefined ? 24 : t2;
+  if (variant === "mark") {
+    const Icon = APP_ICONS[app];
+    let t3;
+    if ($[0] !== Icon || $[1] !== size || $[2] !== style || $[3] !== testID || $[4] !== title) {
+      t3 = <Icon size={size} title={title} testID={testID} style={style} />;
+      $[0] = Icon;
+      $[1] = size;
+      $[2] = style;
+      $[3] = testID;
+      $[4] = title;
+      $[5] = t3;
+    } else {
+      t3 = $[5];
+    }
+    return t3;
+  }
+  const {
+    kind,
+    paths
+  } = APP_MARKS[app];
+  const tone = TILE_TONES[variant];
+  let t3;
+  if ($[6] !== app || $[7] !== kind || $[8] !== tone.fg) {
+    t3 = kind === "fill" ? {
+      fill: tone.fg
+    } : {
+      fill: "none",
+      stroke: tone.fg,
+      strokeWidth: markStrokeWidth(app),
+      strokeLinecap: markLinecap(app),
+      strokeLinejoin: "round"
+    };
+    $[6] = app;
+    $[7] = kind;
+    $[8] = tone.fg;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  const glyphProps = t3;
+  let t4;
+  if ($[10] !== testID || $[11] !== title) {
+    t4 = svgA11yProps({
+      title,
+      testID
+    }, Platform.OS);
+    $[10] = testID;
+    $[11] = title;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  let t5;
+  if ($[13] !== tone.bg) {
+    t5 = <Rect width={1024} height={1024} rx={TILE_RADIUS} fill={tone.bg} />;
+    $[13] = tone.bg;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  let t6;
+  if ($[15] !== paths) {
+    t6 = paths.map(_temp);
+    $[15] = paths;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  let t7;
+  if ($[17] !== glyphProps || $[18] !== t6) {
+    t7 = <G {...glyphProps}>{t6}</G>;
+    $[17] = glyphProps;
+    $[18] = t6;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  let t8;
+  if ($[20] !== size || $[21] !== style || $[22] !== t4 || $[23] !== t5 || $[24] !== t7) {
+    t8 = <Svg width={size} height={size} viewBox={MARK_VIEWBOX} preserveAspectRatio="xMidYMid meet" {...t4} style={style}>{t5}{t7}</Svg>;
+    $[20] = size;
+    $[21] = style;
+    $[22] = t4;
+    $[23] = t5;
+    $[24] = t7;
+    $[25] = t8;
+  } else {
+    t8 = $[25];
+  }
+  return t8;
+}
+function _temp(d) {
+  return <Path key={d} d={d} />;
+}