@vvedantb/native-ui 0.6.1 → 0.7.0

package/README.md

@@ -23,6 +23,7 @@ Optional, only if you import those components:
 
 - `@gorhom/bottom-sheet` — `BottomSheetContainer`
 - `@react-native-community/datetimepicker` and `dayjs` — `DateTimeField`
+- `@clerk/clerk-expo`, `convex`, `expo-auth-session`, `expo-web-browser` and `expo-router` — `@vvedantb/native-ui/auth` (0.7.0). `expo-router` also for `@vvedantb/native-ui/expo-web-root`.
 - `react-native-svg` — the app marks (`APP_ICONS`, `Icon*`, `AppMark`, `AppWordmark`), `GoogleMark` and `PricingModal`. Apps with the icon peers above already have it: `lucide-react-native` and `@tabler/icons-react-native` both require it.
 
 Optional and loaded only when installed, so the package imports and runs without them:
@@ -75,10 +76,13 @@ The root entry exports everything. It still imports `BottomSheetContainer` and `
 | `@vvedantb/native-ui/date-time` | `DateTimeField`, `DateTimeFieldProps` (0.5.0) | `@react-native-community/datetimepicker`, `dayjs` (import) |
 | `@vvedantb/native-ui/ai` | The AI chat parts (from 0.4.0): `Conversation`, `Message`, `Reasoning`, `AgentTrace`, `ChainOfThought`, `ActivityStep`, `PromptInput`, `Suggestions`, `Sources`, `FileChip`, `Attachments`, `CodeBlock`, `ResponseText`, `Shimmer`, `Collapsible`, `useStreamingDisclosure` and their parts. See [AI chat](#ai-chat-040). Not on the root entry. | none |
 | `@vvedantb/native-ui/ai-gallery` | `AiChatGallery`, `AiChatSamples` (from 0.4.0) | none |
+| `@vvedantb/native-ui/auth` | From 0.7.0: `AuthProviders`, `SignInScreen`, `SignUpScreen`, `GoogleSignInButton`, `useGoogleSignIn`, `AuthScreen`, `OrDivider`, `FieldError`, `authErrorMessage` and their props types. See [Auth](#auth-070). Not on the root entry. | `@clerk/clerk-expo`, `convex`, `expo-auth-session`, `expo-web-browser`, `expo-router` (import) |
+| `@vvedantb/native-ui/expo-web-root` | From 0.7.0: `ExpoWebRoot`, `ExpoWebRootProps`, `ExpoWebRootViewport`, `EXPO_WEB_VIEWPORT`, `expoWebBackgroundCss`. Not on the root entry. | `expo-router` (import of `expo-router/html`) |
+| `@vvedantb/native-ui/tailwind-preset` | From 0.7.0, CommonJS for `tailwind.config.js`: `nativeUiPreset`, `nativeUiContent`, `cssVar`, `hslVar`, `rgbAlpha`, `cssVariables`, `schemeColors` and a default preset. See [Expo / NativeWind](#expo--nativewind). | `nativewind` (`require`, when installed) |
 
 "Loader" means the `require` inside `try` described above, so the entry bundles and runs without that peer. `@vvedantb/native-ui/gallery` imports the root entry; `@vvedantb/native-ui/ai-gallery` imports `/ai` only.
 
-The AI chat parts are only on `/ai`. Metro does not tree-shake by default, so on the root entry they would bundle into every app, with or without a chat.
+The AI chat parts are only on `/ai`, and the auth screens and Expo web root only on `/auth` and `/expo-web-root`. Metro does not tree-shake by default, so on the root entry they would bundle into every app, with or without a chat or sign-in.
 
 ```tsx
 import { FloatingTabBar } from "@vvedantb/native-ui/tab-bar";
@@ -93,18 +97,33 @@ The entries re-export the same source files, so they can be mixed: `NativeUiProv
 
 ## Expo / NativeWind
 
-Source-exported. Point Tailwind at the package so class names are generated, and set `darkMode: "class"` (see [Theme](#theme)):
+Source-exported. From 0.7.0 the preset sets up Tailwind for the package: it nests `nativewind/preset`, sets `darkMode: "class"` (see [Theme](#theme)), maps the Instrument Sans font classes and adds the colour keys the components and apps share. `nativeUiContent()` points Tailwind at the package source, at its real path, so class names are generated:
 
 ```js
 // tailwind.config.js
-darkMode: "class",
-content: [
-  "./app/**/*.{js,ts,tsx}",
-  "./components/**/*.{js,ts,tsx}",
-  "./node_modules/@vvedantb/native-ui/src/**/*.{js,ts,tsx}",
-],
+const { nativeUiPreset, nativeUiContent } = require("@vvedantb/native-ui/tailwind-preset");
+
+module.exports = {
+  content: ["./app/**/*.{js,ts,tsx}", "./components/**/*.{js,ts,tsx}", nativeUiContent()],
+  presets: [nativeUiPreset()],
+  // App colours, display fonts, keyframes and plugins (such as tailwindcss-animate) stay here.
+  theme: { extend: {} },
+};
 ```
 
+`nativeUiPreset(options)`:
+
+| Option | Default | Effect |
+| --- | --- | --- |
+| `darkMode` | `"class"` | `"media"` follows the system only. `ThemeToggle` and `setColorScheme` need `"class"`. |
+| `color` | `cssVar`, or `rgbAlpha` with `injectCssVariables` | Maps a variable name to a colour value. `cssVar` gives `var(--name)`, `hslVar` gives `hsl(var(--name))` and `rgbAlpha` gives `rgb(var(--name) / <alpha-value>)`. For another prefix, pass your own, such as ``(name) => `rgb(var(--color-${name}) / <alpha-value>)` ``. |
+| `injectCssVariables` | `false` | Writes every colour variable from `tokens.ts` and `palette.ts` as `r g b` channels, and `--radius` (16px), for light (`:root`) and dark (`.dark`, or the media query with `darkMode: "media"`). The app's `global.css` then needs no token block. |
+| `radiusVariable` | `injectCssVariables` | `rounded-lg`, `-md` and `-sm` from `var(--radius)`. |
+
+The colour keys are `background`, `foreground`, `border`, `input`, `ring`, `separator`, `surface` (`DEFAULT`, `foreground`, `secondary`, `tertiary`, `card`), `field` (`DEFAULT`, `placeholder`) and, each with `DEFAULT` and `foreground`, `primary`, `secondary`, `destructive`, `muted`, `accent`, `popover`, `card`, `danger`, `success`, `warning`, `default` and `overlay`. Each reads the variable of the same name (`surface.secondary` reads `--surface-secondary`; `muted.foreground` reads `--muted-foreground`). `borderWidth.hairline` is NativeWind's `hairlineWidth()`.
+
+Before 0.7.0, list the package in `content` by hand (`"./node_modules/@vvedantb/native-ui/src/**/*.{js,ts,tsx}"`) and set `darkMode: "class"`.
+
 Metro already resolves `node_modules`. In a pnpm monorepo, if a peer resolves to the wrong copy, add:
 
 ```js
@@ -116,7 +135,7 @@ config.resolver.nodeModulesPaths = [
 ];
 ```
 
-The app must define NativeWind tokens (`bg-surface`, `bg-secondary`, pink utilities) and Instrument Sans font classes (`font-instrument-sans-*`). Accent pink stays in the app stylesheet. `Button`, `Input`, `Textarea`, the `Select` trigger, `Switch`, `Checkbox`, `Badge`, `Tabs` and `PillTabs` take their colours from `tokens` and `palette`, so they do not need `primary`, `input` or other theme keys. From 0.3.3 so does component text (titles, descriptions, labels, rows, toasts): it no longer uses `text-foreground` or `text-muted-foreground`, which stay light-mode colours in dark mode when an app defines `foreground` with a nested `dark` key. Override those colours with `style`, not `className`. App text needs the same care: `tokens.color.foreground[scheme]` reads in both schemes. From 0.5.0 the `ListRow`, `DateTimeField` and `HeaderIconButton` fills are styles too, so `ThemeToggle` and the `StackPageHeader` back button follow the scheme.
+Without the preset, the app must define NativeWind tokens (`bg-surface`, `bg-secondary`, pink utilities) and Instrument Sans font classes (`font-instrument-sans-*`). Accent pink stays in the app stylesheet. `Button`, `Input`, `Textarea`, the `Select` trigger, `Switch`, `Checkbox`, `Badge`, `Tabs` and `PillTabs` take their colours from `tokens` and `palette`, so they do not need `primary`, `input` or other theme keys. From 0.3.3 so does component text (titles, descriptions, labels, rows, toasts): it no longer uses `text-foreground` or `text-muted-foreground`, which stay light-mode colours in dark mode when an app defines `foreground` with a nested `dark` key. Override those colours with `style`, not `className`. App text needs the same care: `tokens.color.foreground[scheme]` reads in both schemes. From 0.5.0 the `ListRow`, `DateTimeField` and `HeaderIconButton` fills are styles too, so `ThemeToggle` and the `StackPageHeader` back button follow the scheme.
 
 From 0.3.5 text that uses `font-instrument-sans-medium` or `-semibold` also sets `fontWeight` as a style (`typeStyle` in `src/controlStyles.ts`). Where an app maps every `font-instrument-sans-*` class to one family with no weight, as Expo web does, the class alone draws Regular. A weight without the face class does not pick the Instrument Sans Medium or Semibold file, so set both. From 0.3.13 every title in the package pairs the two, the internal primitives included, and `tests/fontWeight.test.ts` fails on a face class without its weight, a weight without its face class, or a bare Tailwind `font-medium`, `font-semibold` or `font-bold`.
 
@@ -136,6 +155,62 @@ fontFamily: {
 
 A class mapped to a family the browser does not have, such as `["System"]`, with no generic fallback draws in the browser default, often a serif.
 
+### Expo web root (0.7.0)
+
+`app/+html.tsx` can be one component:
+
+```tsx
+import { ExpoWebRoot } from "@vvedantb/native-ui/expo-web-root";
+
+export default function Root({ children }: { children: React.ReactNode }) {
+  return <ExpoWebRoot>{children}</ExpoWebRoot>;
+}
+```
+
+It renders `<html lang="en">`, the charset, `X-UA-Compatible` and viewport meta tags, `ScrollViewStyleReset` from `expo-router/html`, a body background style and `<body>`. Props: `lang`; `viewport` (`"native"`, the default, stops pinch-zoom; `"accessible"` allows it; both set `viewport-fit=cover`); `scrollReset` (default `true`); `lightBackground` and `darkBackground` (default `tokens.color.background`); `head` for more `<head>` nodes. The dark fill follows `prefers-color-scheme` and the `html.dark` class.
+
+## Auth (0.7.0)
+
+`@vvedantb/native-ui/auth` has the Clerk and Convex providers and a sign-in and sign-up screen. It needs `@clerk/clerk-expo`, `expo-auth-session`, `expo-web-browser` and `expo-router`, and `convex` when you pass a Convex client.
+
+```tsx
+// app/_layout.tsx
+import { useAuth } from "@clerk/clerk-expo";
+import { tokenCache } from "@clerk/clerk-expo/token-cache";
+import { AuthProviders } from "@vvedantb/native-ui/auth";
+
+<AuthProviders publishableKey={publishableKey} tokenCache={tokenCache} convex={convex} useAuth={useAuth}>
+  <Stack screenOptions={{ headerShown: false }} />
+</AuthProviders>
+```
+
+`AuthProviders` nests `ClerkProvider`, `ConvexProviderWithClerk` (only with `convex`) and `ClerkLoaded` (with `loaded`, default `true`). Without `convex` the children sit under Clerk only. `clerk={false}` gives a plain `ConvexProvider`, for UI preview builds. The app reads its own key; the component checks nothing.
+
+```tsx
+// app/(auth)/sign-in.tsx
+import { SignInScreen } from "@vvedantb/native-ui/auth";
+
+export default function SignIn() {
+  return <SignInScreen scheme="myapp" signUpHref="/sign-up" />;
+}
+
+// app/(auth)/sign-up.tsx
+import { SignUpScreen } from "@vvedantb/native-ui/auth";
+
+export default function SignUp() {
+  return <SignUpScreen scheme="myapp" signInHref="/sign-in" minPasswordLength={8} />;
+}
+```
+
+- Email and password, and "Continue with Google" (`useSSO`, `oauth_google`, redirect `AuthSession.makeRedirectUri({ scheme, path: redirectPath })`; `redirectPath` defaults to `"sso-callback"`). Sign-up sends an email code and checks it before the session starts.
+- On success: `onSuccess()`, or `router.replace(afterAuthHref, replaceOptions)` (default `"/"`; for example `replaceOptions={{ withAnchor: true }}`).
+- `title`, `subtitle`, `showGoogle`, `googleLabel`, `errorDisplay` (`"toast"`, default, needs a `<Toaster />`; or `"inline"`), `testIDPrefix` (default the mode: `sign-in-email`, `sign-in-password`, `sign-in-submit`, `sign-in-google` and the rest).
+- `header` and `footer` slots for app chrome, such as a brand header or credit. The screen itself is neutral: background fill, title, subtitle, fields.
+- Messages are generic ("Sign in failed", "Invalid email or password", "Could not continue with Google") and never name the auth provider. `authErrorMessage(error, fallback)` shows an API error's own text only when it does not name it.
+- No forgot-password step. An app that needs one keeps its own screen.
+
+`GoogleSignInButton` (`scheme`, `redirectPath`, `afterAuthHref`, `replaceOptions`, `onSuccess`, `onError`, `label` and the `Button` props), `AuthScreen`, `OrDivider` and `FieldError` build custom screens. The module calls `WebBrowser.maybeCompleteAuthSession()` once when it loads, so the app no longer needs its own call.
+
 ## Theme
 
 Wrap the tree (inside your colour-scheme provider):

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@vvedantb/native-ui",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "license": "MIT",
-  "description": "Shared React Native / Expo UI primitives. Floating surfaces, forms, overlays, toasts, settings chrome, tab bar, AI chat parts and the family app marks.",
+  "description": "Shared React Native / Expo UI primitives. Floating surfaces, forms, overlays, toasts, settings chrome, tab bar, AI chat parts, the family app marks, a NativeWind preset, the Expo web root and Clerk + Convex auth screens.",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -93,6 +93,19 @@
       "types": "./src/haptics.ts",
       "default": "./src/haptics.ts"
     },
+    "./auth": {
+      "types": "./src/entries/auth.ts",
+      "default": "./src/entries/auth.ts"
+    },
+    "./expo-web-root": {
+      "types": "./src/entries/expo-web-root.ts",
+      "default": "./src/entries/expo-web-root.ts"
+    },
+    "./tailwind-preset": {
+      "types": "./src/tailwind-preset.d.cts",
+      "require": "./src/tailwind-preset.cjs",
+      "default": "./src/tailwind-preset.cjs"
+    },
     "./package.json": "./package.json"
   },
   "types": "./src/index.ts",
@@ -108,6 +121,7 @@
     "prepack": "node -e \"require('node:fs').accessSync('src/index.ts')\""
   },
   "peerDependencies": {
+    "@clerk/clerk-expo": "*",
     "@expo/vector-icons": "*",
     "@gorhom/bottom-sheet": ">=5",
     "@react-native-community/datetimepicker": "*",
@@ -117,11 +131,14 @@
     "@tabler/icons-react-native": "*",
     "class-variance-authority": ">=0.7.0",
     "clsx": ">=2.0.0",
+    "convex": "*",
     "dayjs": ">=1.11.0",
+    "expo-auth-session": "*",
     "expo-blur": "*",
     "expo-haptics": "*",
     "expo-linear-gradient": "*",
     "expo-router": "*",
+    "expo-web-browser": "*",
     "lucide-react-native": "*",
     "nativewind": ">=4.0.0",
     "react": ">=19.0.0",
@@ -133,15 +150,24 @@
     "tailwind-merge": ">=2.0.0"
   },
   "peerDependenciesMeta": {
+    "@clerk/clerk-expo": {
+      "optional": true
+    },
     "@gorhom/bottom-sheet": {
       "optional": true
     },
     "@react-native-community/datetimepicker": {
       "optional": true
     },
+    "convex": {
+      "optional": true
+    },
     "dayjs": {
       "optional": true
     },
+    "expo-auth-session": {
+      "optional": true
+    },
     "expo-blur": {
       "optional": true
     },
@@ -154,6 +180,9 @@
     "expo-router": {
       "optional": true
     },
+    "expo-web-browser": {
+      "optional": true
+    },
     "react-native-svg": {
       "optional": true
     }

package/src/ExpoWebRoot.tsx

@@ -0,0 +1,81 @@
+import type { ReactNode } from "react";
+import { ScrollViewStyleReset } from "expo-router/html";
+import { tokens } from "./tokens";
+
+/** `"native"` stops pinch-zoom so the page acts like the app; `"accessible"` allows it (WCAG 1.4.4). Both cover the notch. */
+export type ExpoWebRootViewport = "native" | "accessible";
+
+export const EXPO_WEB_VIEWPORT: Record<ExpoWebRootViewport, string> = {
+  native: "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover",
+  accessible: "width=device-width, initial-scale=1.0, viewport-fit=cover",
+};
+
+export type ExpoWebRootProps = {
+  children: ReactNode;
+  /** `<html lang>`. Default `"en"`. */
+  lang?: string;
+  /** Default `"native"`. */
+  viewport?: ExpoWebRootViewport;
+  /** `ScrollViewStyleReset`: no body scroll, so `ScrollView` works as on native. Default `true`. */
+  scrollReset?: boolean;
+  /** Body fill in light. Default `tokens.color.background.light`. */
+  lightBackground?: string;
+  /** Body fill in dark. Default `tokens.color.background.dark`. */
+  darkBackground?: string;
+  /** More `<head>` nodes, after the defaults. */
+  head?: ReactNode;
+};
+
+/**
+ * The body fill as raw CSS, so the background does not flash in dark mode
+ * before the app paints. Dark follows the system, and the NativeWind `dark`
+ * class on `<html>` when the app sets the scheme (`darkMode: "class"`).
+ */
+export function expoWebBackgroundCss(light: string, dark: string): string {
+  return `
+body {
+  background-color: ${light};
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: ${dark};
+  }
+}
+html.dark body {
+  background-color: ${dark};
+}`;
+}
+
+/**
+ * The root HTML for Expo web static rendering. Use it as the whole of
+ * `app/+html.tsx`:
+ *
+ *   export default function Root({ children }: { children: React.ReactNode }) {
+ *     return <ExpoWebRoot>{children}</ExpoWebRoot>;
+ *   }
+ *
+ * Runs in Node during the static render, with no DOM.
+ */
+export function ExpoWebRoot({
+  children,
+  lang = "en",
+  viewport = "native",
+  scrollReset = true,
+  lightBackground = tokens.color.background.light,
+  darkBackground = tokens.color.background.dark,
+  head,
+}: ExpoWebRootProps) {
+  return (
+    <html lang={lang}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content={EXPO_WEB_VIEWPORT[viewport]} />
+        {scrollReset ? <ScrollViewStyleReset /> : null}
+        <style dangerouslySetInnerHTML={{ __html: expoWebBackgroundCss(lightBackground, darkBackground) }} />
+        {head}
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

package/src/ai/code-block.tsx

@@ -27,7 +27,7 @@ export type CodeBlockCopyButtonProps = {
 /** Ghost copy button: the copy icon, then a check for `timeout` after a copy. */
 export function CodeBlockCopyButton({ code, onCopy, timeout = 2000, label = "Copy code" }: CodeBlockCopyButtonProps) {
   const [copied, setCopied] = useState(false);
-  const timer = useRef<number | undefined>(undefined);
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
   useEffect(() => () => clearTimeout(timer.current), []);
 

package/src/auth/AuthProviders.tsx

@@ -0,0 +1,55 @@
+import type { ReactNode } from "react";
+import { ClerkLoaded, ClerkProvider, useAuth as useClerkAuth, type TokenCache } from "@clerk/clerk-expo";
+import { ConvexProvider, type ConvexReactClient } from "convex/react";
+import { ConvexProviderWithClerk } from "convex/react-clerk";
+
+export type AuthProvidersProps = {
+  children: ReactNode;
+  /** The Clerk publishable key. The app reads it from its own config; this component does not check it. */
+  publishableKey?: string;
+  /** `tokenCache` from `@clerk/clerk-expo/token-cache`, so the session survives a restart. */
+  tokenCache?: TokenCache;
+  /** A Convex client. Without one, the children sit under Clerk only (vmem). */
+  convex?: ConvexReactClient | null;
+  /** `useAuth` from `@clerk/clerk-expo`, for `ConvexProviderWithClerk`. Default: the one this package imports. */
+  useAuth?: typeof useClerkAuth;
+  /** Wrap the children in `ClerkLoaded`, so they wait for the session. Default `true`. */
+  loaded?: boolean;
+  /**
+   * Default `true`. `false` drops Clerk: the children sit under a plain
+   * `ConvexProvider` (or nothing without `convex`), as the web
+   * `ConvexClerkProvider` does for UI preview builds.
+   */
+  clerk?: boolean;
+};
+
+/**
+ * The Clerk and Convex providers from the apps' root `_layout.tsx`:
+ * `ClerkProvider` › `ConvexProviderWithClerk` (with `convex`) › `ClerkLoaded`
+ * (with `loaded`) › children.
+ */
+export function AuthProviders({
+  children,
+  publishableKey,
+  tokenCache,
+  convex,
+  useAuth = useClerkAuth,
+  loaded = true,
+  clerk = true,
+}: AuthProvidersProps) {
+  if (!clerk) {
+    return convex ? <ConvexProvider client={convex}>{children}</ConvexProvider> : <>{children}</>;
+  }
+  const inner = loaded ? <ClerkLoaded>{children}</ClerkLoaded> : children;
+  return (
+    <ClerkProvider publishableKey={publishableKey} tokenCache={tokenCache}>
+      {convex ? (
+        <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
+          {inner}
+        </ConvexProviderWithClerk>
+      ) : (
+        inner
+      )}
+    </ClerkProvider>
+  );
+}

package/src/auth/AuthScreen.tsx

@@ -0,0 +1,97 @@
+import type { ReactNode } from "react";
+import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet, Text, View } from "react-native";
+import { cn } from "../cn";
+import { textStyle, typeStyle } from "../controlStyles";
+import { palette } from "../palette";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+
+export type AuthScreenProps = {
+  title: string;
+  subtitle?: string;
+  children: ReactNode;
+  /** Above the title, such as an app mark. App brand chrome goes here. */
+  header?: ReactNode;
+  /** Below the form, such as the "Don't have an account?" row. */
+  footer?: ReactNode;
+  testID?: string;
+  className?: string;
+};
+
+/**
+ * The sign-in and sign-up frame: a keyboard-avoiding scroll view on the
+ * background colour, with a title, subtitle and the form in a column of 16.
+ */
+export function AuthScreen({ title, subtitle, children, header, footer, testID, className }: AuthScreenProps) {
+  const scheme = useScheme();
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      className="flex-1"
+      style={{ backgroundColor: tokens.color.background[scheme] }}
+    >
+      <ScrollView
+        testID={testID}
+        className="flex-1"
+        contentContainerClassName={cn("grow justify-center px-6 py-12", className)}
+        keyboardShouldPersistTaps="handled"
+      >
+        <View className="w-full max-w-sm self-center gap-6">
+          {header}
+          <View className="gap-2">
+            <Text
+              accessibilityRole="header"
+              className="font-instrument-sans-semibold text-2xl"
+              style={[textStyle("foreground", scheme), typeStyle("semibold")]}
+            >
+              {title}
+            </Text>
+            {subtitle ? (
+              <Text className="font-instrument-sans text-base" style={textStyle("muted", scheme)}>
+                {subtitle}
+              </Text>
+            ) : null}
+          </View>
+          <View className="gap-4">{children}</View>
+          {footer ? <View className="flex-row flex-wrap items-center justify-center gap-1">{footer}</View> : null}
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+/** A separator, "or", a separator: between Google and the email fields. */
+export function OrDivider({ label = "or" }: { label?: string }) {
+  const scheme = useScheme();
+  const line = { height: StyleSheet.hairlineWidth, backgroundColor: tokens.color.separator[scheme] };
+  return (
+    <View
+      className="flex-row items-center gap-3"
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+    >
+      <View className="flex-1" style={line} />
+      <Text className="font-instrument-sans text-sm" style={textStyle("muted", scheme)}>
+        {label}
+      </Text>
+      <View className="flex-1" style={line} />
+    </View>
+  );
+}
+
+/** An inline error under a form, read out when it appears. Nothing without a message. */
+export function FieldError({ message, testID }: { message?: string | null; testID?: string }) {
+  const scheme = useScheme();
+  if (!message) return null;
+  return (
+    <Text
+      testID={testID}
+      accessibilityLiveRegion="polite"
+      accessibilityRole="alert"
+      className="font-instrument-sans text-sm"
+      style={{ color: palette.danger[scheme] }}
+    >
+      {message}
+    </Text>
+  );
+}

package/src/auth/GoogleSignInButton.tsx

@@ -0,0 +1,116 @@
+import { useEffect, useState } from "react";
+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 } from "expo-router";
+import { GoogleMark } from "../brand/GoogleMark";
+import { Button, type ButtonProps } from "../Button";
+import { toast } from "../toastStore";
+import { authErrorMessage } from "./authErrors";
+
+// Completes the Google browser session when the app reopens on the redirect.
+WebBrowser.maybeCompleteAuthSession();
+
+export const GOOGLE_ERROR_MESSAGE = "Could not continue with Google";
+
+export type AuthNavigationOptions = {
+  /** Where to go after a session starts. Default `"/"`. */
+  afterAuthHref?: string;
+  /** Passed to `router.replace`, such as `{ withAnchor: true }`. */
+  replaceOptions?: object;
+  /** Called after a session starts, in place of `router.replace`. */
+  onSuccess?: () => void;
+};
+
+export type GoogleSignInOptions = AuthNavigationOptions & {
+  /** The app URL scheme, such as `"vibot"`, for the redirect `scheme://sso-callback`. */
+  scheme: string;
+  /** Default `"sso-callback"`. */
+  redirectPath?: string;
+  /** Called with a message for the user. Default: an error toast. */
+  onError?: (message: string) => void;
+};
+
+/** Warms the Android custom tab while the screen is up, as the Expo guide suggests. */
+export function useWarmUpBrowser() {
+  useEffect(() => {
+    if (Platform.OS !== "android") return;
+    void WebBrowser.warmUpAsync().catch(() => {});
+    return () => {
+      void WebBrowser.coolDownAsync().catch(() => {});
+    };
+  }, []);
+}
+
+/** Starts the Google flow, sets the session and navigates. Returns `[start, busy]`. */
+export function useGoogleSignIn({
+  scheme,
+  redirectPath = "sso-callback",
+  afterAuthHref = "/",
+  replaceOptions,
+  onSuccess,
+  onError,
+}: GoogleSignInOptions): [() => Promise<void>, boolean] {
+  const { startSSOFlow } = useSSO();
+  const router = useRouter();
+  const [busy, setBusy] = useState(false);
+  const start = async () => {
+    if (busy) return;
+    setBusy(true);
+    try {
+      const { createdSessionId, setActive } = await startSSOFlow({
+        strategy: "oauth_google",
+        redirectUrl: AuthSession.makeRedirectUri({ scheme, path: redirectPath }),
+      });
+      // No session: the user closed the browser, or more steps are needed.
+      if (createdSessionId && setActive) {
+        await setActive({ session: createdSessionId });
+        if (onSuccess) onSuccess();
+        else router.replace(afterAuthHref, replaceOptions);
+      }
+    } catch (error) {
+      const message = authErrorMessage(error, GOOGLE_ERROR_MESSAGE);
+      if (onError) onError(message);
+      else toast.error(message);
+    } finally {
+      setBusy(false);
+    }
+  };
+  return [start, busy];
+}
+
+export type GoogleSignInButtonProps = GoogleSignInOptions &
+  Omit<ButtonProps, "onPress" | "children" | "leftIcon" | "loading"> & {
+    /** Default "Continue with Google". */
+    label?: string;
+  };
+
+/** An outline button with the Google mark that runs `useGoogleSignIn`. */
+export function GoogleSignInButton({
+  scheme,
+  redirectPath,
+  afterAuthHref,
+  replaceOptions,
+  onSuccess,
+  onError,
+  label = "Continue with Google",
+  testID = "google-sign-in",
+  variant = "outline",
+  ...props
+}: GoogleSignInButtonProps) {
+  useWarmUpBrowser();
+  const [start, busy] = useGoogleSignIn({ scheme, redirectPath, afterAuthHref, replaceOptions, onSuccess, onError });
+  return (
+    <Button
+      {...props}
+      testID={testID}
+      variant={variant}
+      leftIcon={<GoogleMark />}
+      loading={busy}
+      onPress={() => void start()}
+    >
+      {label}
+    </Button>
+  );
+}

package/src/auth/SignInScreen.tsx

@@ -0,0 +1,302 @@
+import { useState, type ReactNode } from "react";
+import { Text, View } from "react-native";
+import { useSignIn, useSignUp } from "@clerk/clerk-expo";
+import { useRouter } from "expo-router";
+import { Button } from "../Button";
+import { textStyle } from "../controlStyles";
+import { Input } from "../Input";
+import { toast } from "../toastStore";
+import { useScheme } from "../useScheme";
+import { AuthScreen, FieldError, OrDivider } from "./AuthScreen";
+import { authErrorMessage } from "./authErrors";
+import { GoogleSignInButton, type AuthNavigationOptions } from "./GoogleSignInButton";
+
+export type SignInMode = "sign-in" | "sign-up";
+
+/** The messages the screen can show. Generic: none names a provider. */
+export const AUTH_MESSAGES = {
+  missingFields: "Enter your email and password",
+  signInFailed: "Sign in failed",
+  invalidCredentials: "Invalid email or password",
+  signUpFailed: "Could not create account",
+  verifyFailed: "Invalid code",
+  missingCode: "Enter the code from the email",
+  needsAnotherStep: "This account needs another step to sign in. Finish it on the web.",
+} as const;
+
+export type SignInScreenProps = AuthNavigationOptions & {
+  /** Default `"sign-in"`. `"sign-up"` creates the account and checks an emailed code. */
+  mode?: SignInMode;
+  /** Default "Welcome back", or "Create account" in `sign-up`. */
+  title?: string;
+  /** Default "Sign in to continue", or "Sign up to get started" in `sign-up`. */
+  subtitle?: string;
+  /** The app URL scheme, such as `"vibot"`, for the Google redirect `scheme://sso-callback`. */
+  scheme: string;
+  /** Default `"sso-callback"`. */
+  redirectPath?: string;
+  /** Default `true`. */
+  showGoogle?: boolean;
+  /** Default "Continue with Google". */
+  googleLabel?: string;
+  /** In `sign-in`: the "Sign up" link in the footer. No link without it. */
+  signUpHref?: string;
+  /** In `sign-up`: the "Sign in" link in the footer. No link without it. */
+  signInHref?: string;
+  /** Sign-up rejects a shorter password before sending it. Default: no check. */
+  minPasswordLength?: number;
+  /** Default `"toast"`. `"inline"` shows errors under the fields. */
+  errorDisplay?: "toast" | "inline";
+  /** Prefix for every `testID`: `sign-in-email`, `sign-in-password`, `sign-in-submit` and the rest. Default the mode. */
+  testIDPrefix?: string;
+  /** Above the title. App brand chrome goes here. */
+  header?: ReactNode;
+  /** Below the footer link row, such as an app credit. */
+  footer?: ReactNode;
+};
+
+/**
+ * Email and password, and Google, sign-in or sign-up. Sign-up sends an email
+ * code and checks it before the session starts. On success it calls
+ * `onSuccess`, or `router.replace(afterAuthHref, replaceOptions)`.
+ *
+ * Forgot-password is not here: an app that needs it keeps its own screen.
+ */
+export function SignInScreen({
+  mode = "sign-in",
+  title,
+  subtitle,
+  scheme,
+  redirectPath,
+  afterAuthHref = "/",
+  replaceOptions,
+  onSuccess,
+  showGoogle = true,
+  googleLabel,
+  signUpHref,
+  signInHref,
+  minPasswordLength,
+  errorDisplay = "toast",
+  testIDPrefix,
+  header,
+  footer,
+}: SignInScreenProps) {
+  const signInState = useSignIn();
+  const signUpState = useSignUp();
+  const router = useRouter();
+  const colorScheme = useScheme();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [code, setCode] = useState("");
+  const [pendingVerification, setPendingVerification] = useState(false);
+  const [error, setError] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const signUp = mode === "sign-up";
+  const id = (name: string) => `${testIDPrefix ?? mode}-${name}`;
+
+  const fail = (heading: string, message: string) => {
+    if (errorDisplay === "inline") setError(message);
+    else toast.error(heading, message === heading ? undefined : { description: message });
+  };
+
+  const done = () => {
+    if (onSuccess) onSuccess();
+    else router.replace(afterAuthHref, replaceOptions);
+  };
+
+  const onSignIn = async () => {
+    const { isLoaded, signIn, setActive } = signInState;
+    if (!isLoaded || !signIn || !setActive || submitting) return;
+    if (!email || !password) return fail(AUTH_MESSAGES.signInFailed, AUTH_MESSAGES.missingFields);
+    setSubmitting(true);
+    setError("");
+    try {
+      const attempt = await signIn.create({ identifier: email, password });
+      if (attempt.status === "complete" && attempt.createdSessionId) {
+        await setActive({ session: attempt.createdSessionId });
+        done();
+      } else {
+        fail(AUTH_MESSAGES.signInFailed, AUTH_MESSAGES.needsAnotherStep);
+      }
+    } catch (caught) {
+      fail(AUTH_MESSAGES.signInFailed, authErrorMessage(caught, AUTH_MESSAGES.invalidCredentials));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const onSignUp = async () => {
+    const { isLoaded, signUp: attempt } = signUpState;
+    if (!isLoaded || !attempt || submitting) return;
+    if (!email || !password) return fail(AUTH_MESSAGES.signUpFailed, AUTH_MESSAGES.missingFields);
+    if (minPasswordLength && password.length < minPasswordLength) {
+      return fail(AUTH_MESSAGES.signUpFailed, `Use at least ${minPasswordLength} characters for the password`);
+    }
+    setSubmitting(true);
+    setError("");
+    try {
+      await attempt.create({ emailAddress: email, password });
+      await attempt.prepareEmailAddressVerification({ strategy: "email_code" });
+      setPendingVerification(true);
+    } catch (caught) {
+      fail(AUTH_MESSAGES.signUpFailed, authErrorMessage(caught, AUTH_MESSAGES.signUpFailed));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const onVerify = async () => {
+    const { isLoaded, signUp: attempt, setActive } = signUpState;
+    if (!isLoaded || !attempt || !setActive || submitting) return;
+    if (!code) return fail(AUTH_MESSAGES.verifyFailed, AUTH_MESSAGES.missingCode);
+    setSubmitting(true);
+    setError("");
+    try {
+      const result = await attempt.attemptEmailAddressVerification({ code });
+      if (result.status === "complete" && result.createdSessionId) {
+        await setActive({ session: result.createdSessionId });
+        done();
+      } else {
+        fail(AUTH_MESSAGES.verifyFailed, AUTH_MESSAGES.needsAnotherStep);
+      }
+    } catch (caught) {
+      fail(AUTH_MESSAGES.verifyFailed, authErrorMessage(caught, AUTH_MESSAGES.verifyFailed));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const linkHref = signUp ? signInHref : signUpHref;
+  const footerRow = (
+    <>
+      {linkHref && !pendingVerification ? (
+        <>
+          <Text className="font-instrument-sans text-sm" style={textStyle("muted", colorScheme)}>
+            {signUp ? "Already have an account?" : "Don't have an account?"}
+          </Text>
+          <Button
+            testID={id(signUp ? "sign-in-link" : "sign-up-link")}
+            variant="link"
+            size="sm"
+            fullWidth={false}
+            onPress={() => router.push(linkHref)}
+          >
+            {signUp ? "Sign in" : "Sign up"}
+          </Button>
+        </>
+      ) : null}
+      {footer}
+    </>
+  );
+  const hasFooter = Boolean((linkHref && !pendingVerification) || footer);
+
+  if (pendingVerification) {
+    return (
+      <AuthScreen
+        testID={id("screen")}
+        title="Check your email"
+        subtitle="Enter the code we sent to your email."
+        header={header}
+        footer={hasFooter ? footerRow : undefined}
+      >
+        <Input
+          testID={id("code")}
+          accessibilityLabel="Verification code"
+          value={code}
+          placeholder="Verification code"
+          keyboardType="number-pad"
+          autoComplete="one-time-code"
+          textContentType="oneTimeCode"
+          autoFocus
+          returnKeyType="go"
+          onChangeText={setCode}
+          onSubmitEditing={() => void onVerify()}
+        />
+        <FieldError testID={id("error")} message={error} />
+        <Button testID={id("verify")} loading={submitting} onPress={() => void onVerify()}>
+          Verify
+        </Button>
+        <Button
+          testID={id("back")}
+          variant="ghost"
+          onPress={() => {
+            setPendingVerification(false);
+            setCode("");
+            setError("");
+          }}
+        >
+          Use a different email
+        </Button>
+      </AuthScreen>
+    );
+  }
+
+  return (
+    <AuthScreen
+      testID={id("screen")}
+      title={title ?? (signUp ? "Create account" : "Welcome back")}
+      subtitle={subtitle ?? (signUp ? "Sign up to get started" : "Sign in to continue")}
+      header={header}
+      footer={hasFooter ? footerRow : undefined}
+    >
+      {showGoogle ? (
+        <>
+          <GoogleSignInButton
+            testID={id("google")}
+            scheme={scheme}
+            redirectPath={redirectPath}
+            afterAuthHref={afterAuthHref}
+            replaceOptions={replaceOptions}
+            onSuccess={onSuccess}
+            onError={(message) => fail(message, message)}
+            label={googleLabel}
+            disabled={submitting}
+          />
+          <OrDivider />
+        </>
+      ) : null}
+      <Input
+        testID={id("email")}
+        accessibilityLabel="Email"
+        autoCapitalize="none"
+        autoComplete="email"
+        textContentType="emailAddress"
+        keyboardType="email-address"
+        returnKeyType="next"
+        value={email}
+        placeholder="Email"
+        onChangeText={setEmail}
+      />
+      <Input
+        testID={id("password")}
+        accessibilityLabel="Password"
+        autoCapitalize="none"
+        autoComplete={signUp ? "new-password" : "password"}
+        textContentType={signUp ? "newPassword" : "password"}
+        secureTextEntry
+        returnKeyType="go"
+        value={password}
+        placeholder="Password"
+        onChangeText={setPassword}
+        onSubmitEditing={() => void (signUp ? onSignUp() : onSignIn())}
+      />
+      <FieldError testID={id("error")} message={error} />
+      <Button
+        testID={id("submit")}
+        loading={submitting}
+        onPress={() => void (signUp ? onSignUp() : onSignIn())}
+      >
+        {signUp ? "Create account" : "Sign in"}
+      </Button>
+      {/* Bot protection mounts its widget here on web sign-up. */}
+      {signUp ? <View nativeID="clerk-captcha" /> : null}
+    </AuthScreen>
+  );
+}
+
+export type SignUpScreenProps = Omit<SignInScreenProps, "mode">;
+
+/** `SignInScreen` with `mode="sign-up"`. */
+export function SignUpScreen(props: SignUpScreenProps) {
+  return <SignInScreen {...props} mode="sign-up" />;
+}

package/src/auth/authErrors.ts

@@ -0,0 +1,19 @@
+import { isClerkAPIResponseError } from "@clerk/clerk-expo";
+
+/** Words that must not reach the user: the auth provider and stack names. */
+const PRODUCT_NAMES = /\b(clerk|convex)\b/i;
+
+/**
+ * A message to show for an auth error. An API error gives its first
+ * `longMessage` or `message` (such as "Password is incorrect."); anything
+ * else, or a message that names the provider, gives `fallback`. Never shows
+ * a raw exception message.
+ */
+export function authErrorMessage(error: unknown, fallback: string): string {
+  if (isClerkAPIResponseError(error)) {
+    const first = error.errors[0];
+    const message = first?.longMessage ?? first?.message;
+    if (message && !PRODUCT_NAMES.test(message)) return message;
+  }
+  return fallback;
+}

package/src/auth/index.ts

@@ -0,0 +1,22 @@
+// Clerk + Convex providers and the shared sign-in and sign-up screens. On
+// `@vvedantb/native-ui/auth` only: they import `@clerk/clerk-expo`, `convex`,
+// `expo-auth-session`, `expo-web-browser` and `expo-router`, and Metro does not
+// tree-shake.
+export { AuthProviders } from "./AuthProviders";
+export type { AuthProvidersProps } from "./AuthProviders";
+export { AuthScreen, OrDivider, FieldError } from "./AuthScreen";
+export type { AuthScreenProps } from "./AuthScreen";
+export { authErrorMessage } from "./authErrors";
+export {
+  GoogleSignInButton,
+  useGoogleSignIn,
+  useWarmUpBrowser,
+  GOOGLE_ERROR_MESSAGE,
+} from "./GoogleSignInButton";
+export type {
+  AuthNavigationOptions,
+  GoogleSignInOptions,
+  GoogleSignInButtonProps,
+} from "./GoogleSignInButton";
+export { SignInScreen, SignUpScreen, AUTH_MESSAGES } from "./SignInScreen";
+export type { SignInMode, SignInScreenProps, SignUpScreenProps } from "./SignInScreen";

package/src/entries/auth.ts

@@ -0,0 +1,5 @@
+// `@vvedantb/native-ui/auth`: `AuthProviders`, `SignInScreen`, `SignUpScreen`,
+// `GoogleSignInButton` and the auth frame. Not on the root entry: it imports
+// `@clerk/clerk-expo`, `convex`, `expo-auth-session`, `expo-web-browser` and
+// `expo-router`, and Metro does not tree-shake.
+export * from "../auth";

package/src/entries/expo-web-root.ts

@@ -0,0 +1,4 @@
+// `@vvedantb/native-ui/expo-web-root`: `ExpoWebRoot` for `app/+html.tsx`. Not on
+// the root entry: it imports `expo-router/html`, and Metro does not tree-shake.
+export { ExpoWebRoot, EXPO_WEB_VIEWPORT, expoWebBackgroundCss } from "../ExpoWebRoot";
+export type { ExpoWebRootProps, ExpoWebRootViewport } from "../ExpoWebRoot";

package/src/tailwind-preset.cjs

@@ -0,0 +1,248 @@
+/**
+ * `@vvedantb/native-ui/tailwind-preset`: the NativeWind / Tailwind preset the
+ * Expo apps share. CommonJS, because `tailwind.config.js` `require`s it and
+ * Tailwind loads it outside Metro.
+ *
+ *   const { nativeUiPreset, nativeUiContent } = require("@vvedantb/native-ui/tailwind-preset");
+ *   module.exports = {
+ *     content: ["./app/**\/*.{js,ts,tsx}", nativeUiContent()],
+ *     presets: [nativeUiPreset()],
+ *   };
+ *
+ * It nests `nativewind/preset`, so callers pass only this one. It sets
+ * `darkMode`, the Instrument Sans font classes, the colour keys native-ui
+ * classes use, `borderWidth.hairline` and, when asked, `borderRadius` from
+ * `--radius`.
+ * App colours, display fonts, keyframes and font-weight plugins stay in the
+ * app config.
+ *
+ * `color` maps a CSS variable name (without `--`) to a Tailwind colour, as the
+ * web `tokensPreset({ color })` of `@vvedantb/ui`. With `injectCssVariables`,
+ * the preset also writes those variables (light and dark) from `tokens.ts` and
+ * `palette.ts`, as space-separated RGB channels, and the default `color` is
+ * `rgbAlpha`.
+ */
+"use strict";
+
+const fs = require("node:fs");
+const path = require("node:path");
+
+/** `var(--name)`. */
+const cssVar = (name) => `var(--${name})`;
+/** `hsl(var(--name))`, for variables that hold `h s% l%` channels. */
+const hslVar = (name) => `hsl(var(--${name}))`;
+/** `rgb(var(--name) / <alpha-value>)`, for variables that hold `r g b` channels. Keeps opacity modifiers. */
+const rgbAlpha = (name) => `rgb(var(--${name}) / <alpha-value>)`;
+
+const INSTRUMENT_SANS = {
+  regular: "InstrumentSans_400Regular",
+  medium: "InstrumentSans_500Medium",
+  semibold: "InstrumentSans_600SemiBold",
+  bold: "InstrumentSans_700Bold",
+};
+
+/** The glob Tailwind scans for native-ui class names: this package's `src`, at its real path (pnpm symlinks resolve). */
+function nativeUiContent() {
+  return path.join(__dirname, "**/*.{js,ts,tsx}").split(path.sep).join("/");
+}
+
+/**
+ * Reads one `export const name = { … } as const;` object from a sibling
+ * `.ts` file. Plain object literals only, so no TypeScript loader is needed:
+ * `tokens.ts` and `palette.ts` stay the single source of the colours.
+ */
+function readConst(file, name) {
+  const source = fs.readFileSync(path.join(__dirname, file), "utf8");
+  const match = source.match(new RegExp(`export const ${name} = (\\{[\\s\\S]*?\\n\\}) as const;`));
+  if (!match) throw new Error(`@vvedantb/native-ui/tailwind-preset: no \`${name}\` object in ${file}`);
+  return new Function(`return (${match[1]});`)();
+}
+
+let cachedSchemeColors = null;
+
+/** CSS variable name → `{ light, dark }` hex, from `tokens.ts` and `palette.ts`. */
+function schemeColors() {
+  if (cachedSchemeColors) return cachedSchemeColors;
+  const tokens = readConst("tokens.ts", "tokens");
+  const palette = readConst("palette.ts", "palette");
+  const c = tokens.color;
+  cachedSchemeColors = {
+    background: c.background,
+    foreground: c.foreground,
+    border: c.border,
+    input: c.border,
+    ring: palette.primary,
+    separator: c.separator,
+    surface: c.surface,
+    "surface-foreground": c.foreground,
+    "surface-secondary": c.surfaceSecondary,
+    "surface-tertiary": palette.surfaceTertiary,
+    "surface-card": c.surfaceCard,
+    muted: c.muted,
+    "muted-foreground": c.muted,
+    primary: palette.primary,
+    "primary-foreground": palette.primaryForeground,
+    secondary: palette.default,
+    "secondary-foreground": palette.defaultForeground,
+    destructive: palette.danger,
+    "destructive-foreground": palette.dangerForeground,
+    accent: palette.primary,
+    "accent-foreground": palette.primaryForeground,
+    popover: palette.overlay,
+    "popover-foreground": palette.overlayForeground,
+    card: c.surfaceCard,
+    "card-foreground": c.foreground,
+    danger: palette.danger,
+    "danger-foreground": palette.dangerForeground,
+    success: palette.success,
+    "success-foreground": palette.successForeground,
+    warning: palette.warning,
+    "warning-foreground": palette.warningForeground,
+    default: palette.default,
+    "default-foreground": palette.defaultForeground,
+    overlay: palette.overlay,
+    "overlay-foreground": palette.overlayForeground,
+    field: c.surface,
+    "field-placeholder": palette.fieldPlaceholder,
+  };
+  return cachedSchemeColors;
+}
+
+/** `#rrggbb` as `r g b`. */
+function channels(hex) {
+  const n = Number.parseInt(hex.slice(1, 7), 16);
+  return `${(n >> 16) & 255} ${(n >> 8) & 255} ${n & 255}`;
+}
+
+/** `--name: r g b` for every colour in one scheme. */
+function cssVariables(scheme) {
+  return Object.fromEntries(
+    Object.entries(schemeColors()).map(([name, value]) => [`--${name}`, channels(value[scheme])]),
+  );
+}
+
+/** `--radius` from `tokens.radius.lg` (16), so `rounded-lg`, `-md` and `-sm` are 16, 14 and 12 as in `tokens.radius`. */
+function radiusVariable() {
+  return { "--radius": `${readConst("tokens.ts", "tokens").radius.lg}px` };
+}
+
+/** The Tailwind colour keys native-ui classes and the apps share. */
+function themeColors(v) {
+  return {
+    background: v("background"),
+    foreground: v("foreground"),
+    border: v("border"),
+    input: v("input"),
+    ring: v("ring"),
+    separator: v("separator"),
+    surface: {
+      DEFAULT: v("surface"),
+      foreground: v("surface-foreground"),
+      secondary: v("surface-secondary"),
+      tertiary: v("surface-tertiary"),
+      card: v("surface-card"),
+    },
+    primary: { DEFAULT: v("primary"), foreground: v("primary-foreground") },
+    secondary: { DEFAULT: v("secondary"), foreground: v("secondary-foreground") },
+    destructive: { DEFAULT: v("destructive"), foreground: v("destructive-foreground") },
+    muted: { DEFAULT: v("muted"), foreground: v("muted-foreground") },
+    accent: { DEFAULT: v("accent"), foreground: v("accent-foreground") },
+    popover: { DEFAULT: v("popover"), foreground: v("popover-foreground") },
+    card: { DEFAULT: v("card"), foreground: v("card-foreground") },
+    danger: { DEFAULT: v("danger"), foreground: v("danger-foreground") },
+    success: { DEFAULT: v("success"), foreground: v("success-foreground") },
+    warning: { DEFAULT: v("warning"), foreground: v("warning-foreground") },
+    default: { DEFAULT: v("default"), foreground: v("default-foreground") },
+    overlay: { DEFAULT: v("overlay"), foreground: v("overlay-foreground") },
+    field: { DEFAULT: v("field"), placeholder: v("field-placeholder") },
+  };
+}
+
+/** `nativewind/preset`, or none where NativeWind is not installed (this repository's tests). */
+function nestedPresets() {
+  try {
+    return [require("nativewind/preset")];
+  } catch {
+    return [];
+  }
+}
+
+/** `{ hairline: hairlineWidth() }` from `nativewind/theme`, or none without NativeWind. */
+function hairlineBorder() {
+  try {
+    const { hairlineWidth } = require("nativewind/theme");
+    return typeof hairlineWidth === "function" ? { hairline: hairlineWidth() } : {};
+  } catch {
+    return {};
+  }
+}
+
+/** A Tailwind plugin that writes the colour variables: `:root` (light) and the dark set for `darkMode`. */
+function cssVariablesPlugin(darkMode) {
+  return function nativeUiCssVariables({ addBase }) {
+    const dark = cssVariables("dark");
+    addBase(
+      darkMode === "media"
+        ? {
+            ":root": { ...cssVariables("light"), ...radiusVariable() },
+            "@media (prefers-color-scheme: dark)": { ":root": dark },
+          }
+        : {
+            ":root": { ...cssVariables("light"), ...radiusVariable() },
+            ".dark:root, .dark": dark,
+          },
+    );
+  };
+}
+
+/**
+ * The preset. Options:
+ * - `darkMode`: `"class"` (default; `ThemeToggle` and `setColorScheme` need it) or `"media"`.
+ * - `color`: CSS variable name → colour value. Default `cssVar`, or `rgbAlpha` with `injectCssVariables`.
+ * - `injectCssVariables`: write the colour variables and `--radius` from `tokens.ts` and `palette.ts`. Default `false`.
+ * - `radiusVariable`: `rounded-lg`, `-md` and `-sm` from `var(--radius)`, as vibot and Velth. Default: on with
+ *   `injectCssVariables`, else off, so an app without `--radius` keeps the Tailwind radii.
+ */
+function nativeUiPreset(options = {}) {
+  const darkMode = options.darkMode === "media" ? "media" : "class";
+  const inject = options.injectCssVariables === true;
+  const color = options.color || (inject ? rgbAlpha : cssVar);
+  const radius = options.radiusVariable ?? inject;
+  return {
+    darkMode,
+    presets: nestedPresets(),
+    theme: {
+      extend: {
+        colors: themeColors(color),
+        fontFamily: {
+          sans: [INSTRUMENT_SANS.regular],
+          "instrument-sans": [INSTRUMENT_SANS.regular],
+          "instrument-sans-medium": [INSTRUMENT_SANS.medium],
+          "instrument-sans-semibold": [INSTRUMENT_SANS.semibold],
+          "instrument-sans-bold": [INSTRUMENT_SANS.bold],
+        },
+        borderRadius: radius
+          ? {
+              lg: "var(--radius)",
+              md: "calc(var(--radius) - 2px)",
+              sm: "calc(var(--radius) - 4px)",
+            }
+          : {},
+        borderWidth: hairlineBorder(),
+      },
+    },
+    plugins: inject ? [cssVariablesPlugin(darkMode)] : [],
+  };
+}
+
+module.exports = {
+  nativeUiPreset,
+  nativeUiContent,
+  cssVar,
+  hslVar,
+  rgbAlpha,
+  cssVariables,
+  schemeColors,
+  INSTRUMENT_SANS,
+};
+module.exports.default = nativeUiPreset();

package/src/tailwind-preset.d.cts

@@ -0,0 +1,50 @@
+/** Maps a CSS variable name (without `--`) to a Tailwind colour value. */
+export type ColorFn = (name: string) => string;
+
+type Colors = { [key: string]: string | Colors };
+type CssDeclarations = Record<string, string>;
+type AddBase = (base: Record<string, CssDeclarations | Record<string, CssDeclarations>>) => void;
+
+export interface NativeUiPresetOptions {
+  /** Default `"class"`: `ThemeToggle` and NativeWind `setColorScheme` need it. */
+  darkMode?: "class" | "media";
+  /** Default `cssVar`, or `rgbAlpha` with `injectCssVariables`. */
+  color?: ColorFn;
+  /** Write the colour variables (as `r g b` channels) and `--radius` from `tokens.ts` and `palette.ts`. Default `false`. */
+  injectCssVariables?: boolean;
+  /** `rounded-lg`, `-md` and `-sm` from `var(--radius)`. Default: the value of `injectCssVariables`. */
+  radiusVariable?: boolean;
+}
+
+export interface NativeUiPreset {
+  darkMode: "class" | "media";
+  presets: unknown[];
+  theme: {
+    extend: {
+      colors: Colors;
+      fontFamily: Record<string, string[]>;
+      borderRadius: Record<string, string>;
+      borderWidth: Record<string, unknown>;
+    };
+  };
+  plugins: Array<(api: { addBase: AddBase }) => void>;
+}
+
+export declare const cssVar: ColorFn;
+export declare const hslVar: ColorFn;
+export declare const rgbAlpha: ColorFn;
+export declare const INSTRUMENT_SANS: {
+  regular: "InstrumentSans_400Regular";
+  medium: "InstrumentSans_500Medium";
+  semibold: "InstrumentSans_600SemiBold";
+  bold: "InstrumentSans_700Bold";
+};
+export declare function nativeUiPreset(options?: NativeUiPresetOptions): NativeUiPreset;
+/** Absolute glob of this package's `src/**\/*.{js,ts,tsx}`, for Tailwind `content`. */
+export declare function nativeUiContent(): string;
+/** CSS variable name → `{ light, dark }` hex, from `tokens.ts` and `palette.ts`. */
+export declare function schemeColors(): Record<string, { light: string; dark: string }>;
+/** `{ "--name": "r g b" }` for one scheme. */
+export declare function cssVariables(scheme: "light" | "dark"): CssDeclarations;
+declare const preset: NativeUiPreset;
+export default preset;