@vvedantb/native-ui 0.12.1 → 0.17.0

package/src/ai/unified-diff.tsx

@@ -0,0 +1,182 @@
+import { Pressable, ScrollView, Text, View, type TextStyle } from "react-native";
+import { sizeStyle, textStyle } from "../controlStyles";
+import { palette, withAlpha } from "../palette";
+import { tokens } from "../tokens";
+import { useLargerText } from "../theme";
+import { useScheme } from "../useScheme";
+import { MONO_FONT, chatTextSize } from "./chat-text";
+
+/** One row of a unified diff: a hunk separator, or a line with its old and new line numbers. */
+export type UnifiedDiffLine =
+  | { readonly kind: "hunk"; readonly text: string }
+  | {
+      readonly kind: "added" | "removed" | "context";
+      /** The line's content, without its `+`/`-`/space marker. */
+      readonly text: string;
+      /** Null for an added line. */
+      readonly oldLine: number | null;
+      /** Null for a removed line. */
+      readonly newLine: number | null;
+    };
+
+/**
+ * The web Code tab type (`--diffs-font-size: 14px`, `--diffs-line-height: 22px`),
+ * the gutter padding and the width of one gutter digit.
+ */
+export const UNIFIED_DIFF = { fontSize: 14, lineHeight: 22, gutterPadding: 8, digitWidth: 8.5 } as const;
+
+/** Larger text steps the code up as `chatTextSize("small")` does (`text-lg`), keeping the 22/14 leading. */
+const LARGER_FONT_SIZE = 18;
+
+/** Web `bg-emerald-500/10` and `text-emerald-700` (dark `text-emerald-300`): edit and diff added lines. */
+export const EMERALD = { fill: "#10b981", light: "#047857", dark: "#6ee7b7" } as const;
+
+/** Web `text-emerald-600` (dark `text-emerald-400`), the `+n` of a diff stat. */
+const ADDED_TEXT = { light: "#059669", dark: "#34d399" } as const;
+
+const SIGN = { added: "+", removed: "-", context: " " } as const;
+
+const TABULAR: TextStyle = { fontVariant: ["tabular-nums"] };
+
+export type UnifiedDiffProps = {
+  lines: ReadonlyArray<UnifiedDiffLine>;
+  /**
+   * Makes each code row (not a hunk header) a button: a tap calls this with
+   * the row's index in `lines`. The code is then not selectable, so a tap
+   * always lands.
+   */
+  onLinePress?: (index: number) => void;
+  /** What a row's button does, for a screen reader (`accessibilityHint`). */
+  linePressHint?: string;
+  /** Indexes in `lines` of the rows to mark, such as those with a comment: their gutter fills. */
+  markedLines?: ReadonlySet<number>;
+  className?: string;
+};
+
+/**
+ * One file's diff in one column, as the web Code tab draws it in unified view
+ * (`@pierre/diffs`): a line number gutter (the old number on a removed line,
+ * the new one otherwise), the `+`/`-` marker, and the line in mono 14 / 22.
+ * Added lines tint green and removed lines red, each at 10%; a hunk header is
+ * a muted row on the secondary surface. Long lines do not wrap: the whole
+ * diff scrolls sideways, and every row spans the widest line. With
+ * `onLinePress` a code row is a button (`Line N`); `markedLines` fills the
+ * gutter of the rows it names at 12% of the primary colour.
+ */
+export function UnifiedDiff({ lines, onLinePress, linePressHint, markedLines, className }: UnifiedDiffProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const fontSize = largerText ? LARGER_FONT_SIZE : UNIFIED_DIFF.fontSize;
+  const widest = lines.reduce(
+    (max, line) => (line.kind === "hunk" ? max : Math.max(max, line.oldLine ?? 0, line.newLine ?? 0)),
+    0,
+  );
+  const scale = fontSize / UNIFIED_DIFF.fontSize;
+  const gutter = String(widest).length * UNIFIED_DIFF.digitWidth * scale + UNIFIED_DIFF.gutterPadding * 2;
+  const mono = { fontFamily: MONO_FONT, fontSize, lineHeight: UNIFIED_DIFF.lineHeight * scale };
+  return (
+    <ScrollView horizontal className={className} contentContainerStyle={{ minWidth: "100%" }}>
+      <View style={{ flexGrow: 1 }}>
+        {lines.map((line, index) => {
+          if (line.kind === "hunk") {
+            return (
+              <Text
+                key={index}
+                numberOfLines={1}
+                style={[
+                  mono,
+                  textStyle("muted", scheme),
+                  { backgroundColor: tokens.color.surfaceSecondary[scheme], paddingHorizontal: UNIFIED_DIFF.gutterPadding },
+                ]}
+              >
+                {line.text}
+              </Text>
+            );
+          }
+          const tint =
+            line.kind === "added"
+              ? withAlpha(EMERALD.fill, 0.1)
+              : line.kind === "removed"
+                ? withAlpha(palette.danger[scheme], 0.1)
+                : undefined;
+          const number = line.kind === "removed" ? line.oldLine : line.newLine;
+          const cells = [
+            <Text
+              key="gutter"
+              style={[
+                mono,
+                textStyle(markedLines?.has(index) ? "foreground" : "muted", scheme),
+                TABULAR,
+                { width: gutter, paddingHorizontal: UNIFIED_DIFF.gutterPadding, textAlign: "right" },
+                markedLines?.has(index) ? { backgroundColor: withAlpha(palette.primary[scheme], 0.12) } : null,
+              ]}
+            >
+              {number ?? ""}
+            </Text>,
+            <Text
+              key="code"
+              selectable={onLinePress === undefined}
+              style={[mono, textStyle("foreground", scheme), { paddingRight: UNIFIED_DIFF.gutterPadding * 2 }]}
+            >
+              {`${SIGN[line.kind]} ${line.text}`}
+            </Text>,
+          ];
+          if (onLinePress === undefined) {
+            return (
+              <View key={index} className="flex-row" style={{ backgroundColor: tint }}>
+                {cells}
+              </View>
+            );
+          }
+          return (
+            <Pressable
+              key={index}
+              accessibilityRole="button"
+              accessibilityLabel={`Line ${number ?? ""}`}
+              accessibilityHint={linePressHint}
+              // No slop: rows tile the diff edge to edge, so any slop would take
+              // the next line's taps. Each row is a full-width 22 high target,
+              // as dense as the code it holds.
+              hitSlop={0}
+              onPress={() => onLinePress(index)}
+              className="flex-row active:opacity-60"
+              style={{ backgroundColor: tint }}
+            >
+              {cells}
+            </Pressable>
+          );
+        })}
+      </View>
+    </ScrollView>
+  );
+}
+
+export type DiffStatProps = {
+  additions: number;
+  deletions: number;
+  /** Drop a side that is zero, so a pure addition reads `+2`, not `+2 −0`. */
+  hideZero?: boolean;
+  className?: string;
+};
+
+/** The web `PrDiffStat`: `+n` in emerald and `−m` in the destructive colour, tabular mono. */
+export function DiffStat({ additions, deletions, hideZero = false, className }: DiffStatProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const stat = [sizeStyle(chatTextSize("small", largerText)), TABULAR, { fontFamily: MONO_FONT }];
+  return (
+    <View
+      accessible
+      accessibilityLabel={`${additions} additions, ${deletions} deletions`}
+      className={className}
+      style={{ flexDirection: "row", flexShrink: 0, gap: 4 }}
+    >
+      {hideZero && additions === 0 ? null : (
+        <Text style={[stat, { color: ADDED_TEXT[scheme] }]}>{`+${additions.toLocaleString()}`}</Text>
+      )}
+      {hideZero && deletions === 0 ? null : (
+        <Text style={[stat, { color: palette.danger[scheme] }]}>{`−${deletions.toLocaleString()}`}</Text>
+      )}
+    </View>
+  );
+}

package/src/auth/GoogleSignInButton.tsx

@@ -3,7 +3,7 @@ import { Platform } from "react-native";
 import { useSSO } from "@clerk/clerk-expo";
 import * as AuthSession from "expo-auth-session";
 import * as WebBrowser from "expo-web-browser";
-import { useRouter, type Href, type Router } from "expo-router";
+import { useRouter, type Href } from "expo-router";
 import { GoogleMark } from "../brand/GoogleMark";
 import { Button, type ButtonProps } from "../Button";
 import { toast } from "../toastStore";
@@ -17,8 +17,11 @@ export const GOOGLE_ERROR_MESSAGE = "Could not continue with Google";
 export type AuthNavigationOptions = {
   /** Where to go after a session starts. Default `"/"`. */
   afterAuthHref?: Href;
-  /** Passed to `router.replace`, such as `{ withAnchor: true }`. */
-  replaceOptions?: Parameters<Router["replace"]>[1];
+  /**
+   * Passed to `router.replace`, such as `{ withAnchor: true }`. Typed from
+   * `useRouter`, as expo-router 57 exports no `Router` type.
+   */
+  replaceOptions?: Parameters<ReturnType<typeof useRouter>["replace"]>[1];
   /** Called after a session starts, in place of `router.replace`. */
   onSuccess?: () => void;
 };

package/src/auth/SignInScreen.tsx

@@ -1,5 +1,5 @@
-import { useState, type ReactNode } from "react";
-import { Text, View } from "react-native";
+import { useRef, useState, type ReactNode } from "react";
+import { Text, View, type TextInput } from "react-native";
 import { useSignIn, useSignUp } from "@clerk/clerk-expo";
 import { useRouter, type Href } from "expo-router";
 import { Button } from "../Button";
@@ -203,6 +203,9 @@ export function SignInScreen({
   const secondFactor = useSecondFactor({ stageTimeoutMs });
   const [error, setError] = useState("");
   const [submitting, setSubmitting] = useState(false);
+  // The field each "next" key moves to.
+  const passwordField = useRef<TextInput>(null);
+  const confirmField = useRef<TextInput>(null);
   const signUp = mode === "sign-up";
   const id = (name: string) => `${testIDPrefix ?? mode}-${name}`;
 
@@ -481,12 +484,15 @@ export function SignInScreen({
           textContentType="newPassword"
           autoFocus
           returnKeyType="next"
+          submitBehavior="submit"
+          onSubmitEditing={() => confirmField.current?.focus()}
           value={newPassword}
           placeholder={AUTH_MESSAGES.newPasswordLabel}
           onChangeText={setNewPassword}
         />
         <PasswordInput
           testID={id("confirm-password")}
+          ref={confirmField}
           accessibilityLabel={AUTH_MESSAGES.confirmPasswordLabel}
           autoCapitalize="none"
           autoComplete="new-password"
@@ -661,12 +667,15 @@ export function SignInScreen({
         textContentType="emailAddress"
         keyboardType="email-address"
         returnKeyType="next"
+        submitBehavior="submit"
+        onSubmitEditing={() => passwordField.current?.focus()}
         value={email}
         placeholder="Email"
         onChangeText={setEmail}
       />
       <PasswordInput
         testID={id("password")}
+        ref={passwordField}
         accessibilityLabel="Password"
         autoCapitalize="none"
         autoComplete={signUp ? "new-password" : "password"}

package/src/brand/ProviderIcon.tsx

@@ -0,0 +1,136 @@
+import { Platform, type ViewProps } from "react-native";
+import Svg, { Path, Rect } from "react-native-svg";
+import { svgA11yProps } from "../svgA11y";
+import { useScheme } from "../useScheme";
+
+/** A fill that follows the colour scheme, as the web `text-black dark:text-white`. */
+type SchemeFill = string | { light: string; dark: string };
+
+type ProviderMarkLayer =
+  | { d: string; fill: SchemeFill; evenOdd?: boolean }
+  /** A full-bleed square behind the glyph (the OpenCode tile). */
+  | { square: number; fill: SchemeFill };
+
+export type ProviderMark = { viewBox: string; layers: readonly ProviderMarkLayer[] };
+
+/** Providers with a mark. Any other provider draws the Claude mark, as the web. */
+export type ProviderIconProvider = "claude" | "codex" | "opencode" | "cursor";
+
+/**
+ * The provider marks of the web `ProviderIcon` (`@vvedantb/ui`
+ * `ai-elements/provider-icon.tsx`): the same path data, viewBoxes and fills.
+ * A test checks them against the web source.
+ */
+export const PROVIDER_MARKS: Record<ProviderIconProvider, ProviderMark> = {
+  claude: {
+    viewBox: "0 0 24 24",
+    layers: [
+      {
+        fill: "#D97757",
+        d: "m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z",
+      },
+    ],
+  },
+  codex: {
+    viewBox: "0 0 256 260",
+    layers: [
+      {
+        fill: { light: "#000", dark: "#fff" },
+        d: "M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z",
+      },
+    ],
+  },
+  opencode: {
+    viewBox: "0 0 512 512",
+    layers: [
+      { square: 512, fill: "#FDFCFC" },
+      { d: "M320 224V352H192V224H320Z", fill: "#E6E5E6" },
+      { d: "M384 416H128V96H384V416ZM320 160H192V352H320V160Z", fill: "#17181C", evenOdd: true },
+    ],
+  },
+  cursor: {
+    viewBox: "0 0 466.73 532.09",
+    layers: [
+      {
+        fill: { light: "#26251E", dark: "#EDECEC" },
+        d: "M457.43,125.94L244.42,2.96c-6.84-3.95-15.28-3.95-22.12,0L9.3,125.94c-5.75,3.32-9.3,9.46-9.3,16.11v247.99c0,6.65,3.55,12.79,9.3,16.11l213.01,122.98c6.84,3.95,15.28,3.95,22.12,0l213.01-122.98c5.75-3.32,9.3-9.46,9.3-16.11v-247.99c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05,151.99l-205.63,356.16c-1.39,2.4-5.06,1.42-5.06-1.36v-233.21c0-4.66-2.49-8.97-6.53-11.31L24.87,145.67c-2.4-1.39-1.42-5.06,1.36-5.06h411.26c5.84,0,9.49,6.33,6.57,11.39h-.01Z",
+      },
+    ],
+  },
+};
+
+/** The mark for `provider`, the Claude mark for an unknown one (web `ProviderIcon` default). */
+export function providerMark(provider: string): ProviderMark {
+  switch (provider) {
+    case "codex":
+    case "opencode":
+    case "cursor":
+      return PROVIDER_MARKS[provider];
+    default:
+      return PROVIDER_MARKS.claude;
+  }
+}
+
+/**
+ * The provider's name in a model picker, as the web `getProviderLabel`
+ * (`ai-elements/model-picker-types.ts`): "Claude", "GPT" for Codex,
+ * "Opencode", "Cursor", and any other provider as given.
+ */
+export function providerLabel(provider: string): string {
+  switch (provider) {
+    case "claude":
+      return "Claude";
+    case "codex":
+      return "GPT";
+    case "opencode":
+      return "Opencode";
+    case "cursor":
+      return "Cursor";
+    default:
+      return provider;
+  }
+}
+
+export type ProviderIconProps = {
+  /** "claude", "codex", "opencode" or "cursor". Any other value draws the Claude mark, as the web. */
+  provider: string;
+  /** Width and height in points. Default 14, as the web. */
+  size?: number;
+  /** Accessible name. Without it the mark is hidden from assistive tech (web `aria-hidden`). */
+  title?: string;
+  /** Set as `data-testid` on web, where `Svg` does not map `testID`. */
+  testID?: string;
+  style?: ViewProps["style"];
+};
+
+/**
+ * The brand mark of an AI provider, as the web `ProviderIcon`. The marks keep
+ * their brand colours; the OpenAI and Cursor marks switch with the scheme.
+ */
+export function ProviderIcon({ provider, size = 14, title, testID, style }: ProviderIconProps) {
+  const scheme = useScheme();
+  const { viewBox, layers } = providerMark(provider);
+  const paint = (fill: SchemeFill) => (typeof fill === "string" ? fill : fill[scheme]);
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox={viewBox}
+      {...svgA11yProps({ title, testID }, Platform.OS)}
+      style={style}
+    >
+      {layers.map((layer, index) =>
+        "square" in layer ? (
+          <Rect key={index} width={layer.square} height={layer.square} fill={paint(layer.fill)} />
+        ) : (
+          <Path
+            key={index}
+            d={layer.d}
+            fill={paint(layer.fill)}
+            {...(layer.evenOdd ? { fillRule: "evenodd", clipRule: "evenodd" } : {})}
+          />
+        ),
+      )}
+    </Svg>
+  );
+}

package/src/brand/index.ts

@@ -9,6 +9,8 @@ export { AppWordmark } from "./AppWordmark";
 export type { AppWordmarkProps, ProductAppName } from "./AppWordmark";
 export { GoogleMark } from "./GoogleMark";
 export type { GoogleMarkProps } from "./GoogleMark";
+export { PROVIDER_MARKS, ProviderIcon, providerLabel, providerMark } from "./ProviderIcon";
+export type { ProviderIconProps, ProviderIconProvider, ProviderMark } from "./ProviderIcon";
 export {
   APP_MARKS,
   APP_MARK_CROP_VIEWBOX,

package/src/configureTheme.ts

@@ -1,5 +1,6 @@
 import { palette, type Palette } from "./palette";
 import { tokens, type Tokens } from "./tokens";
+import { fontFamily, type ThemeFonts } from "./typography";
 
 /** `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]> };
@@ -15,6 +16,8 @@ export type ThemeConfig = {
   color?: Partial<ThemeColors>;
   /** Overrides for `palette` (primary, danger, overlay and the other web semantic colours). */
   palette?: Partial<ThemePalette>;
+  /** Overrides for `fontFamily`: the family name for each weight, as the app loads the fonts. */
+  font?: Partial<ThemeFonts>;
 };
 
 type ColorValue = string | { light: string; dark: string };
@@ -24,7 +27,7 @@ type ColorValue = string | { light: string; dark: string };
  * the existing pair object, so values that hold the pair (`floatingFill`,
  * `floatingHairline`, `floatingSolidFill`) follow it.
  */
-function assignColors(
+function assignValues(
   target: { readonly [key: string]: ColorValue },
   source: { readonly [key: string]: ColorValue | undefined },
 ) {
@@ -36,25 +39,50 @@ function assignColors(
   }
 }
 
+/** Bumped by each `configureTheme` call; `useScheme` redraws on it. */
+let themeVersion = 0;
+const themeListeners = new Set<() => void>();
+
+/** Calls `listener` after each `configureTheme`. Returns the unsubscribe. */
+export function subscribeTheme(listener: () => void): () => void {
+  themeListeners.add(listener);
+  return () => {
+    themeListeners.delete(listener);
+  };
+}
+
+/** The number of `configureTheme` calls so far, a snapshot for `useSyncExternalStore`. */
+export function getThemeVersion(): number {
+  return themeVersion;
+}
+
 /**
- * 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:
+ * Sets the app's own colours and fonts. It writes into the shared
+ * `tokens.color`, `palette` and `fontFamily` objects, which every component
+ * reads at render. Call it once at app start, before the first render (for
+ * example at the top of the root `_layout.tsx`, outside the component). A
+ * later call (for example a second dark palette the user picks) redraws the
+ * mounted components under `NativeUiProvider` that read the scheme (`useScheme`); app code that copies
+ * values out, or memoises on the scheme alone, must redraw on its own. Each
+ * pair gives both schemes:
  *
  * ```ts
  * configureTheme({
  *   color: { background: { light: "#f4f5f6", dark: "#020202" } },
  *   palette: { primary: { light: "#09090b", dark: "#fafafa" } },
+ *   font: { regular: "Inter_400Regular", semibold: "Inter_600SemiBold" },
  * });
  * ```
  *
- * 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.
+ * Only the JS values change. NativeWind classes keep the app's Tailwind theme
+ * (`tailwind-preset` reads the package values from source; pass the same
+ * family names to `nativeUiPreset({ font })`), and constants copied out before
+ * the call (`NEUTRAL_500`) keep the package value. The app loads the font files.
  */
 export function configureTheme(config: ThemeConfig): void {
-  if (config.color) assignColors(tokens.color, config.color);
-  if (config.palette) assignColors(palette, config.palette);
+  if (config.color) assignValues(tokens.color, config.color);
+  if (config.palette) assignValues(palette, config.palette);
+  if (config.font) assignValues(fontFamily, config.font);
+  themeVersion += 1;
+  for (const listener of themeListeners) listener();
 }

package/src/controlStyles.ts

@@ -133,23 +133,26 @@ const TEXT_SIZE = {
 
 export type TextSize = keyof typeof TEXT_SIZE;
 
-/** Tailwind `leading-tight` and `leading-snug`, as multiples of the size. */
-const LEADING = { tight: 1.25, snug: 1.375 } as const;
+/** Tailwind `leading-tight`, `leading-snug` and `leading-relaxed`, as multiples of the size. */
+const LEADING = { tight: 1.25, snug: 1.375, relaxed: 1.625 } as const;
+
+export type TextLeading = keyof typeof LEADING;
 
 /**
  * Font size and line height of a `text-*` class as a style, set beside the
  * class. On Expo web at 390 wide (0.3.6 gallery), `Button` labels with
  * `text-sm` measured 16, so the class alone does not always reach the text.
- * `"tight"` and `"snug"` are the Tailwind `leading-tight` (1.25 × the size)
- * and `leading-snug` (1.375 ×).
+ * `"tight"`, `"snug"` and `"relaxed"` are the Tailwind `leading-tight` (1.25 ×
+ * the size), `leading-snug` (1.375 ×) and `leading-relaxed` (1.625 ×, the web
+ * `.markdown` body and the settings descriptions).
  */
-export function sizeStyle(size: TextSize, leading?: "tight" | "snug") {
+export function sizeStyle(size: TextSize, leading?: TextLeading) {
   const { fontSize, lineHeight } = TEXT_SIZE[size];
   return { fontSize, lineHeight: leading ? fontSize * LEADING[leading] : lineHeight };
 }
 
-/** Tailwind `tracking-tight`, in em. */
-const TRACKING = { tight: -0.025 } as const;
+/** Tailwind `tracking-tight` and `tracking-wide`, in em. */
+const TRACKING = { tight: -0.025, wide: 0.025 } as const;
 
 /**
  * Letter spacing of a `tracking-*` class at `fontSize`, as a style in points.
@@ -313,23 +316,26 @@ export function tabColors(variant: TabsVariant, selected: boolean, scheme: Schem
 export type TabsSize = "default" | "sm";
 
 /**
- * Trigger box and type for `TabsTrigger` and `PillTabs`. Without larger text
- * these are the web sizes: `pills` and `segmented` are the web `.t-tab` (30
- * high, `px-3 py-1`, `text-sm`), `soft` the web soft trigger (`px-4 py-2
- * text-sm`) and `sm` the web `sm` list (`px-2.5 py-1 text-xs`). With larger
- * text they are the 0.3.4 sizes. `minHeight` is a minimum, so a large Dynamic
- * Type size grows the trigger instead of clipping its label.
+ * Trigger box and type for `TabsTrigger` and `PillTabs`. Phone-tuned from the
+ * web look: `pills` and `segmented` are the web `.t-tab` (`py-1`, `text-sm`)
+ * grown to 36 high with `px-3.5`, so the 4 slop above and below makes 44;
+ * `sm` is the web `sm` list (`px-2.5 py-1 text-xs`) with the label kept at 14
+ * (`text-sm`, `px-3`) and also 36 high; `soft` is the web soft trigger
+ * (`px-4 py-2 text-sm`). With larger text they are the 0.3.4 sizes.
+ * `minHeight` is a minimum, so a large Dynamic Type size grows the trigger
+ * instead of clipping its label. `letterSpacing` is the web type-scale
+ * tracking of the label (`tokens/src/css/type-scale.css`): `text-sm` is 0em.
  */
 export function tabTriggerSize(variant: TabsVariant, size: TabsSize, largerText: boolean) {
   if (largerText) {
     return size === "sm"
-      ? { minHeight: 48, className: "px-4 py-2", textClassName: "text-lg" }
-      : { minHeight: 56, className: "px-4 py-3", textClassName: "text-xl" };
+      ? { minHeight: 48, className: "px-4 py-2", textClassName: "text-lg", letterSpacing: 0 }
+      : { minHeight: 56, className: "px-4 py-3", textClassName: "text-xl", letterSpacing: 0 };
   }
-  if (size === "sm") return { minHeight: 30, className: "px-2.5 py-1", textClassName: "text-xs" };
+  if (size === "sm") return { minHeight: 36, className: "px-3 py-1", textClassName: "text-sm", letterSpacing: 0 };
   return variant === "soft"
-    ? { minHeight: 36, className: "px-4 py-2", textClassName: "text-sm" }
-    : { minHeight: 30, className: "px-3 py-1", textClassName: "text-sm" };
+    ? { minHeight: 36, className: "px-4 py-2", textClassName: "text-sm", letterSpacing: 0 }
+    : { minHeight: 36, className: "px-3.5 py-1", textClassName: "text-sm", letterSpacing: 0 };
 }
 
 /** The segmented track, web `--tabs-bar-bg` (`--default`). */
@@ -341,14 +347,14 @@ export function tabTrackStyle(scheme: Scheme) {
  * Fill and label of the `FloatingTabBar` active pill. On the web the raised
  * `--segment` pill sits on a muted `--default` track. The floating bar is
  * already the raised surface (`tokens.color.fill`, near-white in light), so in
- * light the pill takes the muted track fill (`palette.default`), as a white
- * `--segment` pill would not show on it. In dark it keeps `--segment`
- * (`palette.segment`), lighter than the dark glass. The label is the
+ * light the pill takes the muted track fill (`--default`), as a white
+ * `--segment` pill would not show on it. In dark it keeps the kit `--segment`,
+ * lighter than the dark glass. Both are `palette.tabBarPill`. The label is the
  * segmented `--tabs-text-active`, as `tabColors("segmented", true, scheme)`.
  */
 export function floatingTabPillColors(scheme: Scheme): TabColors {
   return {
-    backgroundColor: scheme === "light" ? palette.default.light : palette.segment.dark,
+    backgroundColor: palette.tabBarPill[scheme],
     color: tabColors("segmented", true, scheme).color,
   };
 }
@@ -372,16 +378,26 @@ export function checkboxColors(checked: boolean, scheme: Scheme) {
       };
 }
 
+export type SwitchSize = "sm" | "md";
+
 /**
- * Track and thumb size classes, and the track size in points for the hit slop.
- * Without larger text it is the web `Switch`: a `h-5 w-9` track (20 × 36,
- * with a 1 border) and a `size-4` thumb that moves `translate-x-4`. With larger
- * text it is the 0.3.4 size. `justify-center` on the track centres the thumb.
+ * Track and thumb size classes, the thumb offset off and on, and the track
+ * size in points for the hit slop. `justify-center` on the track centres the
+ * thumb. Without larger text:
+ * - `sm` is the web `Switch`: a `h-5 w-9` track (20 × 36, with a 1 border)
+ *   and a `size-4` thumb that moves `translate-x-4`.
+ * - `md` is the larger app switch some web apps set through `UiConfig.Switch`:
+ *   a `h-6 w-10` track (24 × 40, with a 1 border) and a `size-5` thumb that
+ *   sits at `translate-x-0.5` and moves to `translate-x-[18px]`.
+ * With larger text both are the 0.3.4 size.
  */
-export function switchSize(largerText: boolean) {
-  return largerText
-    ? { track: "h-8 w-14", thumb: "h-7 w-7", on: "translate-x-6", width: 56, height: 32 }
-    : { track: "h-5 w-9", thumb: "h-4 w-4", on: "translate-x-4", width: 36, height: 20 };
+export function switchSize(largerText: boolean, size: SwitchSize = "sm") {
+  if (largerText) {
+    return { track: "h-8 w-14", thumb: "h-7 w-7", off: "translate-x-0", on: "translate-x-6", width: 56, height: 32 };
+  }
+  return size === "md"
+    ? { track: "h-6 w-10", thumb: "h-5 w-5", off: "translate-x-0.5", on: "translate-x-[18px]", width: 40, height: 24 }
+    : { track: "h-5 w-9", thumb: "h-4 w-4", off: "translate-x-0", on: "translate-x-4", width: 36, height: 20 };
 }
 
 /**

package/src/entries/gesture-handler.ts

@@ -0,0 +1,4 @@
+// `@vvedantb/native-ui/gesture-handler`. Imports `react-native-gesture-handler`
+// (an optional peer): the only entry that does, so an app without it bundles
+// the `PanResponder` sheets as before.
+export { GestureHandlerProvider } from "../primitives/sheet-gesture";

package/src/entries/keyboard-controller.ts

@@ -0,0 +1,4 @@
+// `@vvedantb/native-ui/keyboard-controller`. Imports
+// `react-native-keyboard-controller` (an optional peer): the only entry that
+// does, so an app without it keeps React Native's `KeyboardAvoidingView`.
+export { KeyboardControllerProvider } from "../primitives/keyboard-controller";

package/src/entries/markdown.ts

@@ -2,4 +2,4 @@
 // `.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";
+export type { MarkdownHeadings, MarkdownProps } from "../markdown/Markdown";