@vvedantb/native-ui 0.8.0 → 0.10.0

package/src/auth/totp.ts

@@ -0,0 +1,202 @@
+import { useState } from "react";
+import { useSignIn } from "@clerk/clerk-expo";
+import { authErrorMessage } from "./authErrors";
+
+/** 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.",
+} as const;
+
+/** The second-factor strategies the built-in step handles. */
+export type SecondFactorStrategy = "totp" | "backup_code" | "phone_code" | "email_code";
+
+/** Default order: the first one the account supports wins. */
+export const SECOND_FACTOR_PREFERENCE: readonly SecondFactorStrategy[] = [
+  "totp",
+  "email_code",
+  "phone_code",
+  "backup_code",
+];
+
+/** One entry of `signIn.supportedSecondFactors`. */
+export type SecondFactor = {
+  strategy: string;
+  emailAddressId?: string;
+  phoneNumberId?: string;
+  safeIdentifier?: string;
+};
+
+type AttemptResult = { status: string | null; createdSessionId: string | null };
+
+/** The part of the sign-in resource that TOTP needs. Tests pass a mock. */
+export type TotpSignIn = {
+  attemptSecondFactor(params: { strategy: "totp"; code: string }): Promise<AttemptResult>;
+};
+
+/** The part of the sign-in resource that any second factor needs. Tests pass a mock. */
+export type SecondFactorSignIn = {
+  supportedSecondFactors?: SecondFactor[] | null;
+  prepareSecondFactor?(params: {
+    strategy: "phone_code" | "email_code";
+    phoneNumberId?: string;
+    emailAddressId?: string;
+  }): Promise<unknown>;
+  attemptSecondFactor(params: { strategy: SecondFactorStrategy; code: string }): Promise<AttemptResult>;
+};
+
+export type TotpSetActive = (params: { session: string }) => Promise<void>;
+
+export type TotpResult = { ok: true } | { ok: false; error: string };
+
+/** The strategies in `factors` that the built-in step handles, in the order given. */
+export function supportedSecondFactorStrategies(
+  factors: readonly SecondFactor[] | null | undefined,
+): SecondFactorStrategy[] {
+  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: readonly SecondFactor[] | null | undefined,
+): SecondFactorStrategy | null {
+  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: {
+  signIn: Pick<SecondFactorSignIn, "supportedSecondFactors" | "prepareSecondFactor">;
+  strategy: SecondFactorStrategy;
+  factor?: SecondFactor;
+}): Promise<TotpResult> {
+  const { signIn, strategy } = args;
+  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 signIn.prepareSecondFactor({
+        strategy,
+        ...(factor?.phoneNumberId ? { phoneNumberId: factor.phoneNumberId } : {}),
+      });
+    } else {
+      await signIn.prepareSecondFactor({
+        strategy,
+        ...(factor?.emailAddressId ? { emailAddressId: factor.emailAddressId } : {}),
+      });
+    }
+    return { ok: true };
+  } catch (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: {
+  signIn: Pick<SecondFactorSignIn, "attemptSecondFactor">;
+  setActive: TotpSetActive;
+  code: string;
+  strategy: SecondFactorStrategy;
+}): Promise<TotpResult> {
+  try {
+    const attempt = await args.signIn.attemptSecondFactor({ strategy: args.strategy, code: args.code });
+    if (attempt.status === "complete" && attempt.createdSessionId) {
+      await args.setActive({ session: attempt.createdSessionId });
+      return { ok: true };
+    }
+    return { ok: false, error: TOTP_MESSAGES.needsAnotherStep };
+  } catch (caught) {
+    const fallback = args.strategy === "totp" ? TOTP_MESSAGES.invalidCode : TOTP_MESSAGES.invalidCodeGeneric;
+    return { ok: false, error: authErrorMessage(caught, fallback) };
+  }
+}
+
+/** Checks a TOTP code and starts the session. TOTP needs no `prepareSecondFactor`. Same as `submitSecondFactor` with `strategy: "totp"`. */
+export function submitTotpSecondFactor(args: {
+  signIn: TotpSignIn;
+  setActive: TotpSetActive;
+  code: string;
+}): Promise<TotpResult> {
+  return submitSecondFactor({ signIn: args.signIn, setActive: args.setActive, code: args.code, strategy: "totp" });
+}
+
+export type UseSecondFactorOptions = {
+  /** The strategy `submit` uses until `setStrategy` changes it. Default `"totp"`. */
+  strategy?: SecondFactorStrategy;
+};
+
+export type UseSecondFactorResult = {
+  /** Checks the code and starts the session. Never throws. Sets `error` on failure. */
+  submit: (code: string) => Promise<TotpResult>;
+  /** Sends the code for `phone_code` and `email_code` (no call for the others). Never throws. Sets `error` on failure. */
+  prepare: (strategy?: SecondFactorStrategy, factor?: SecondFactor) => Promise<TotpResult>;
+  /** The strategy `submit` uses. */
+  strategy: SecondFactorStrategy;
+  setStrategy: (strategy: SecondFactorStrategy) => void;
+  /** True while `submit` or `prepare` runs. */
+  loading: boolean;
+  /** The last failure message, or `""`. */
+  error: string;
+  clearError: () => void;
+};
+
+/**
+ * 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(options: UseSecondFactorOptions = {}): UseSecondFactorResult {
+  const { isLoaded, signIn, setActive } = useSignIn();
+  const [chosen, setChosen] = useState<SecondFactorStrategy | null>(null);
+  const strategy = chosen ?? options.strategy ?? "totp";
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const submit = async (code: string): Promise<TotpResult> => {
+    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 });
+    if (!result.ok) setError(result.error);
+    setLoading(false);
+    return result;
+  };
+
+  const prepare = async (
+    prepareStrategy: SecondFactorStrategy = strategy,
+    factor?: SecondFactor,
+  ): Promise<TotpResult> => {
+    if (!isLoaded || !signIn) {
+      setError(TOTP_MESSAGES.notReady);
+      return { ok: false, error: TOTP_MESSAGES.notReady };
+    }
+    setLoading(true);
+    setError("");
+    const result = await prepareSecondFactorIfNeeded({ signIn, strategy: prepareStrategy, factor });
+    if (!result.ok) setError(result.error);
+    setLoading(false);
+    return result;
+  };
+
+  return { submit, prepare, strategy, setStrategy: setChosen, loading, error, clearError: () => setError("") };
+}

package/src/configureTheme.ts

@@ -0,0 +1,60 @@
+import { palette, type Palette } from "./palette";
+import { tokens, type Tokens } from "./tokens";
+
+/** `tokens` and `palette` value types with the literal hex widened to `string` and `readonly` dropped. */
+type Widen<T> = T extends string ? string : { -readonly [K in keyof T]: Widen<T[K]> };
+
+/** The `tokens.color` shape: each key a `{ light, dark }` pair, except `white` and `black`. */
+export type ThemeColors = Widen<Tokens["color"]>;
+
+/** The `palette` shape: each key a `{ light, dark }` pair, except `destructive`. */
+export type ThemePalette = Widen<Palette>;
+
+export type ThemeConfig = {
+  /** Overrides for `tokens.color` (neutrals and surfaces). Keys not given keep the package value. */
+  color?: Partial<ThemeColors>;
+  /** Overrides for `palette` (primary, danger, overlay and the other web semantic colours). */
+  palette?: Partial<ThemePalette>;
+};
+
+type ColorValue = string | { light: string; dark: string };
+
+/**
+ * Copies each given key onto `target`. A `{ light, dark }` pair is copied into
+ * the existing pair object, so values that hold the pair (`floatingFill`,
+ * `floatingHairline`, `floatingSolidFill`) follow it.
+ */
+function assignColors(
+  target: { readonly [key: string]: ColorValue },
+  source: { readonly [key: string]: ColorValue | undefined },
+) {
+  for (const [key, value] of Object.entries(source)) {
+    if (value === undefined) continue;
+    const current = target[key];
+    if (typeof current === "object" && typeof value === "object") Object.assign(current, value);
+    else Object.assign(target, { [key]: value });
+  }
+}
+
+/**
+ * Sets the app's own colours. It writes into the shared `tokens.color` and
+ * `palette` objects, which every component reads at render, so call it once at
+ * app start, before the first render (for example at the top of the root
+ * `_layout.tsx`, outside the component). A call after the first render does not
+ * redraw mounted components. Each pair gives both schemes:
+ *
+ * ```ts
+ * configureTheme({
+ *   color: { background: { light: "#f4f5f6", dark: "#020202" } },
+ *   palette: { primary: { light: "#09090b", dark: "#fafafa" } },
+ * });
+ * ```
+ *
+ * Only the JS colours change. NativeWind classes keep the app's Tailwind theme
+ * (`tailwind-preset` reads the package values from source), and constants copied
+ * out before the call (`NEUTRAL_500`) keep the package value.
+ */
+export function configureTheme(config: ThemeConfig): void {
+  if (config.color) assignColors(tokens.color, config.color);
+  if (config.palette) assignColors(palette, config.palette);
+}

package/src/entries/markdown.ts

@@ -0,0 +1,5 @@
+// `@vvedantb/native-ui/markdown`: `Markdown`, chat markdown styled as the web
+// `.markdown` block. Not on the root entry: it imports the optional peer
+// `react-native-marked`, and Metro does not tree-shake.
+export { Markdown, markdownStyles, inlineCodeStyle, MARKDOWN_SCALE, MARKDOWN_LIST } from "../markdown/Markdown";
+export type { MarkdownProps } from "../markdown/Markdown";

package/src/entries/primitives.ts

@@ -59,6 +59,8 @@ export type {
   TabsContentProps,
 } from "../Tabs";
 export { ListRow } from "../ListRow";
+export { DividedList } from "../DividedList";
+export type { DividedListProps } from "../DividedList";
 export type { ListRowProps } from "../ListRow";
 export { HeaderIconButton } from "../HeaderIconButton";
 export { ThemeToggle } from "../ThemeToggle";
@@ -100,6 +102,26 @@ export {
 } from "../AlertDialog";
 export type { AlertDialogProps, AlertDialogContentProps } from "../AlertDialog";
 export { ConfirmDialog } from "../ConfirmDialog";
+export { BulkActionBar, BULK_BAR_LABEL_MIN_WIDTH } from "../BulkActionBar";
+export type { BulkActionBarProps, BulkBarAction } from "../BulkActionBar";
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+} from "../DropdownMenu";
+export type {
+  DropdownMenuProps,
+  DropdownMenuTriggerProps,
+  DropdownMenuContentProps,
+  DropdownMenuAlign,
+  DropdownMenuLabelProps,
+  DropdownMenuItemProps,
+  DropdownMenuRadioItemProps,
+} from "../DropdownMenu";
 export type { ConfirmDialogProps } from "../ConfirmDialog";
 export {
   Sheet,

package/src/entries/theme.ts

@@ -11,5 +11,7 @@ export {
 export type { NativeUiTheme } from "../theme";
 export { palette, withAlpha } from "../palette";
 export type { Palette } from "../palette";
+export { configureTheme } from "../configureTheme";
+export type { ThemeConfig, ThemeColors, ThemePalette } from "../configureTheme";
 export { fontClass } from "../typography";
 export { PINK_50, PINK_100, PINK_600, PINK_700, NEUTRAL_100, NEUTRAL_500, NEUTRAL_900, Colors } from "../colors";

package/src/examples/ParityGallery.tsx

@@ -7,7 +7,9 @@ import { useState, type ReactNode } from "react";
 import { ScrollView, Text, View, type TextProps } from "react-native";
 import {
   IconCopy,
+  IconDots,
   IconInbox,
+  IconPencil,
   IconPhoto,
   IconRefresh,
   IconTrash,
@@ -28,6 +30,14 @@ import {
   AmbientBackground,
   AppMark,
   AppWordmark,
+  BulkActionBar,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
   Avatar,
   AvatarFallback,
   Badge,
@@ -226,6 +236,8 @@ function GalleryScreen() {
   const [muted, setMuted] = useState(false);
   const [sort, setSort] = useState<"newest" | "name">("newest");
   const [page, setPage] = useState(0);
+  const [menuSort, setMenuSort] = useState<"newest" | "oldest">("newest");
+  const [picked, setPicked] = useState(2);
   const scheme = useScheme();
 
   return (
@@ -563,6 +575,50 @@ function GalleryScreen() {
           </View>
         </Section>
 
+        <Section title="DropdownMenu and BulkActionBar">
+          <View className="flex-row justify-end">
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                accessibilityLabel="List options"
+                hitSlop={6}
+                className="h-8 w-8 items-center justify-center"
+              >
+                <IconDots size={18} color={tokens.color.muted[scheme]} />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuLabel>Sort</DropdownMenuLabel>
+                <DropdownMenuRadioItem checked={menuSort === "newest"} onSelect={() => setMenuSort("newest")}>
+                  Newest first
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem checked={menuSort === "oldest"} onSelect={() => setMenuSort("oldest")}>
+                  Oldest first
+                </DropdownMenuRadioItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem icon={IconPencil} onSelect={() => toast("Rename")}>
+                  Rename
+                </DropdownMenuItem>
+                <DropdownMenuItem icon={IconTrash} destructive onSelect={() => toast.error("Deleted")}>
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </View>
+          <View style={{ height: 88 }}>
+            <BulkActionBar
+              isSelecting
+              selectedCount={picked}
+              totalCount={5}
+              bottomOffset={0}
+              onExitSelect={() => setPicked(0)}
+              onSelectAll={() => setPicked(5)}
+              onClearSelection={() => setPicked(0)}
+              primaryActions={[{ key: "copy", label: "Copy items", shortLabel: "Copy", icon: IconCopy, onClick: () => toast("Copied") }]}
+              moreActions={[{ key: "rename", label: "Rename", icon: IconPencil, onClick: () => toast("Rename") }]}
+              destructiveAction={{ key: "delete", label: "Delete items", shortLabel: "Delete", icon: IconTrash, destructive: true, onClick: () => toast.error("Deleted") }}
+            />
+          </View>
+        </Section>
+
         <Section title="EmptyState">
           <EmptyState title="Nothing yet" description="Items you add show here." compact />
           <EmptyState.Root variant="panel">

package/src/floating.ts

@@ -45,10 +45,8 @@ export const floatingHairline = tokens.color.hairline;
 
 export const floatingFill = tokens.color.fill;
 
-export const floatingSolidFill = {
-  light: tokens.color.surface.light,
-  dark: tokens.color.surface.dark,
-} as const;
+/** The `tokens.color.surface` pair itself, so `configureTheme` reaches it. */
+export const floatingSolidFill = tokens.color.surface;
 
 export function tabBarReserve(largerText: boolean, bottomInset: number) {
   const bar = largerText

package/src/highlight.ts

@@ -0,0 +1,117 @@
+import type * as PrismReactRenderer from "prism-react-renderer";
+
+export type PrismReactRendererModule = typeof PrismReactRenderer;
+
+let prismReactRenderer: PrismReactRendererModule | null | undefined;
+
+/**
+ * `prism-react-renderer`, or `null` when the optional peer is not installed.
+ * `CodeBlock` highlights with it. 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 loadPrismReactRenderer(): PrismReactRendererModule | null {
+  if (prismReactRenderer === undefined) {
+    try {
+      prismReactRenderer = require("prism-react-renderer");
+    } catch {
+      prismReactRenderer = null;
+    }
+  }
+  // `?? null`: with the real peer types installed, TypeScript keeps `undefined`
+  // in the type after the `try` (the package typecheck only sees a stub).
+  return prismReactRenderer ?? null;
+}
+
+export type CodeColorRole =
+  | "plain"
+  | "comment"
+  | "keyword"
+  | "string"
+  | "constant"
+  | "function"
+  | "tag"
+  | "variable"
+  | "inserted"
+  | "deleted";
+
+/**
+ * The shiki `github-light` and `github-dark` colours the web `CodeBlock`
+ * uses, by role. Plain text is the theme foreground.
+ */
+export const GITHUB_CODE_COLORS: Record<"light" | "dark", Record<CodeColorRole, string>> = {
+  light: {
+    plain: "#24292e",
+    comment: "#6a737d",
+    keyword: "#d73a49",
+    string: "#032f62",
+    constant: "#005cc5",
+    function: "#6f42c1",
+    tag: "#22863a",
+    variable: "#e36209",
+    inserted: "#22863a",
+    deleted: "#b31d28",
+  },
+  dark: {
+    plain: "#e1e4e8",
+    comment: "#6a737d",
+    keyword: "#f97583",
+    string: "#9ecbff",
+    constant: "#79b8ff",
+    function: "#b392f0",
+    tag: "#85e89d",
+    variable: "#ffab70",
+    inserted: "#85e89d",
+    deleted: "#fdaeb7",
+  },
+};
+
+/** Prism token types to their GitHub role. Types not listed are plain. */
+const PRISM_ROLE: Record<string, CodeColorRole> = {
+  comment: "comment",
+  prolog: "comment",
+  doctype: "comment",
+  cdata: "comment",
+  keyword: "keyword",
+  operator: "keyword",
+  atrule: "keyword",
+  important: "keyword",
+  rule: "keyword",
+  string: "string",
+  char: "string",
+  "attr-value": "string",
+  regex: "string",
+  url: "string",
+  "template-string": "string",
+  number: "constant",
+  boolean: "constant",
+  constant: "constant",
+  property: "constant",
+  "attr-name": "constant",
+  symbol: "constant",
+  builtin: "constant",
+  entity: "constant",
+  function: "function",
+  "function-variable": "function",
+  "class-name": "function",
+  maybe_class_name: "function",
+  tag: "tag",
+  selector: "tag",
+  variable: "variable",
+  parameter: "variable",
+  inserted: "inserted",
+  deleted: "deleted",
+  punctuation: "plain",
+  plain: "plain",
+};
+
+/**
+ * The colour of a Prism token from its types. Later types win, as in
+ * `prism-react-renderer`'s theme lookup: the `<` of a tag (`["tag",
+ * "punctuation"]`) is plain.
+ */
+export function codeTokenColor(types: readonly string[], scheme: "light" | "dark"): string {
+  let role: CodeColorRole = "plain";
+  for (const type of types) role = PRISM_ROLE[type] ?? role;
+  return GITHUB_CODE_COLORS[scheme][role];
+}

package/src/index.ts

@@ -10,6 +10,8 @@ export {
 export type { NativeUiTheme } from "./theme";
 export { palette, withAlpha } from "./palette";
 export type { Palette } from "./palette";
+export { configureTheme } from "./configureTheme";
+export type { ThemeConfig, ThemeColors, ThemePalette } from "./configureTheme";
 export { fontClass } from "./typography";
 export {
   FLOATING_INSET,
@@ -93,6 +95,8 @@ export type {
   TabsContentProps,
 } from "./Tabs";
 export { ListRow } from "./ListRow";
+export { DividedList } from "./DividedList";
+export type { DividedListProps } from "./DividedList";
 export type { ListRowProps } from "./ListRow";
 export { HeaderIconButton } from "./HeaderIconButton";
 export { ThemeToggle } from "./ThemeToggle";
@@ -134,6 +138,26 @@ export {
 } from "./AlertDialog";
 export type { AlertDialogProps, AlertDialogContentProps } from "./AlertDialog";
 export { ConfirmDialog } from "./ConfirmDialog";
+export { BulkActionBar, BULK_BAR_LABEL_MIN_WIDTH } from "./BulkActionBar";
+export type { BulkActionBarProps, BulkBarAction } from "./BulkActionBar";
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+} from "./DropdownMenu";
+export type {
+  DropdownMenuProps,
+  DropdownMenuTriggerProps,
+  DropdownMenuContentProps,
+  DropdownMenuAlign,
+  DropdownMenuLabelProps,
+  DropdownMenuItemProps,
+  DropdownMenuRadioItemProps,
+} from "./DropdownMenu";
 export type { ConfirmDialogProps } from "./ConfirmDialog";
 export {
   Sheet,