@vvedantb/native-ui 0.4.0 → 0.5.1

package/src/StatusDot.tsx

@@ -4,7 +4,10 @@ import { palette, withAlpha } from "./palette";
 import { tokens } from "./tokens";
 import { useScheme } from "./useScheme";
 
-/** The web `StatusTone`s. */
+/**
+ * The web `StatusTone`s, and `info` (native only, from 0.5.0): neutral news
+ * such as "synced" or "new", in blue.
+ */
 export type StatusTone =
   | "progress"
   | "business-review"
@@ -13,6 +16,7 @@ export type StatusTone =
   | "cancelled"
   | "active"
   | "critical"
+  | "info"
   | "neutral";
 
 export type StatusDotProps = ViewProps & {
@@ -22,6 +26,13 @@ export type StatusDotProps = ViewProps & {
   className?: string;
 };
 
+/**
+ * The `info` blue: Tailwind `blue-500` in light and the lighter `blue-400` in
+ * dark. Local to the dot: `tokens.css` has no `--info`, so it is not a
+ * `palette` key.
+ */
+const INFO = { light: "#3b82f6", dark: "#60a5fa" } as const;
+
 function toneColor(tone: StatusTone, scheme: "light" | "dark") {
   switch (tone) {
     case "progress":
@@ -37,6 +48,8 @@ function toneColor(tone: StatusTone, scheme: "light" | "dark") {
       return withAlpha(tokens.color.muted[scheme], 0.4);
     case "critical":
       return palette.danger[scheme];
+    case "info":
+      return INFO[scheme];
     default:
       return withAlpha(tokens.color.muted[scheme], 0.6);
   }

package/src/ThemeToggle.tsx

@@ -9,6 +9,10 @@ export type ThemeToggleProps = {
   testID?: string;
 };
 
+/** Logged when NativeWind's `setColorScheme` throws. */
+const DARK_MODE_CLASS_HINT =
+  'ThemeToggle could not set the colour scheme. NativeWind throws while Tailwind darkMode is "media" (the default): set darkMode: "class" in tailwind.config.js. See the @vvedantb/native-ui README, Theme.';
+
 /**
  * A `HeaderIconButton` that switches between light and dark with NativeWind's
  * `setColorScheme`, the scheme `useScheme` reads. It shows and names the
@@ -16,6 +20,10 @@ export type ThemeToggleProps = {
  * "Switch to light mode" in dark. The choice lasts only as long as NativeWind
  * keeps it; an app that restores it on the next launch stores
  * `useColorScheme().colorScheme` itself.
+ *
+ * `setColorScheme` throws unless the app sets Tailwind `darkMode: "class"`.
+ * The press then logs that fix with `console.error` and leaves the scheme as
+ * it is, instead of throwing from the press handler.
  */
 export function ThemeToggle({ testID }: ThemeToggleProps) {
   const { setColorScheme } = useColorScheme();
@@ -24,12 +32,16 @@ export function ThemeToggle({ testID }: ThemeToggleProps) {
   const next = scheme === "dark" ? "light" : "dark";
   const Icon = next === "dark" ? IconMoon : IconSun;
 
+  const toggle = () => {
+    try {
+      setColorScheme(next);
+    } catch (error) {
+      console.error(DARK_MODE_CLASS_HINT, error);
+    }
+  };
+
   return (
-    <HeaderIconButton
-      label={`Switch to ${next} mode`}
-      testID={testID}
-      onPress={() => setColorScheme(next)}
-    >
+    <HeaderIconButton label={`Switch to ${next} mode`} testID={testID} onPress={toggle}>
       <Icon size={largerText ? 26 : 22} color={tokens.color.foreground[scheme]} />
     </HeaderIconButton>
   );

package/src/brand/AppIcons.tsx

@@ -101,3 +101,5 @@ export const IconVmem = APP_ICONS.vmem;
 export const IconVerve = APP_ICONS.verve;
 export const IconVelth = APP_ICONS.velth;
 export const IconProjectV = APP_ICONS.projectv;
+export const IconEva = APP_ICONS.eva;
+export const IconBee = APP_ICONS.bee;

package/src/brand/AppWordmark.tsx

@@ -6,8 +6,8 @@ import { useScheme } from "../useScheme";
 import { APP_ICONS } from "./AppIcons";
 import type { AppName } from "./svg";
 
-/** The five product apps. `projectv` keeps its Michroma wordmark and never uses `AppWordmark`. */
-export type ProductAppName = Exclude<AppName, "projectv">;
+/** The five product apps. `projectv` keeps its Michroma wordmark and never uses `AppWordmark`. `eva` and `bee` are icons only. */
+export type ProductAppName = Exclude<AppName, "projectv" | "eva" | "bee">;
 
 export type AppWordmarkProps = {
   /** Which product app's name to show. The label is always the lowercase app id. */

package/src/brand/familyApps.ts

@@ -1,7 +1,10 @@
 import type { AppName } from "./svg";
 
+/** Apps in the Project V family. `eva` and `bee` have marks and icons but are not family apps. */
+export type FamilyAppName = Exclude<AppName, "eva" | "bee">;
+
 export type FamilyApp = {
-  app: AppName;
+  app: FamilyAppName;
   /** Display name. */
   name: string;
   /** Home page of the app. */
@@ -19,6 +22,6 @@ export const FAMILY_APPS: readonly FamilyApp[] = [
 ];
 
 /** Entry of `FAMILY_APPS` for an app. */
-export function familyApp(app: AppName): FamilyApp {
+export function familyApp(app: FamilyAppName): FamilyApp {
   return FAMILY_APPS.find((entry) => entry.app === app)!;
 }

package/src/brand/index.ts

@@ -1,7 +1,7 @@
 // `svg.ts`, `familyApps.ts` and `vProAppBenefits.ts` are byte-identical copies of
 // `@vvedantb/ui` `src/brand/` (pure data, no imports beyond each other). A test
 // in this package fails when they differ: change both together.
-export { APP_ICONS, IconProjectV, IconVelth, IconVerve, IconVhub, IconVibot, IconVmem } from "./AppIcons";
+export { APP_ICONS, IconBee, IconEva, IconProjectV, IconVelth, IconVerve, IconVhub, IconVibot, IconVmem } from "./AppIcons";
 export type { AppIconComponent, AppIconProps } from "./AppIcons";
 export { AppMark } from "./AppMark";
 export type { AppMarkProps } from "./AppMark";
@@ -31,6 +31,6 @@ export {
 } from "./svg";
 export type { AppMarkVariant, AppName, MarkShape } from "./svg";
 export { FAMILY_APPS, familyApp } from "./familyApps";
-export type { FamilyApp } from "./familyApps";
+export type { FamilyApp, FamilyAppName } from "./familyApps";
 export { V_PRO_APP_BENEFITS } from "./vProAppBenefits";
 export type { PricingPlanAppBenefit } from "./vProAppBenefits";

package/src/brand/svg.ts

@@ -1,7 +1,8 @@
 // Geometry and raw SVG strings for the family app marks. No imports, so the
 // asset script can load this file directly with Node.
 
-export const APP_NAMES = ["projectv", "vibot", "vhub", "vmem", "verve", "velth"] as const;
+/** Every mark. `eva` and `bee` are marks and icons only: they are not family apps, so `FAMILY_APPS` leaves them out. */
+export const APP_NAMES = ["projectv", "vibot", "vhub", "vmem", "verve", "velth", "eva", "bee"] as const;
 
 export type AppName = (typeof APP_NAMES)[number];
 
@@ -36,7 +37,9 @@ export function markLinecap(app: AppName): "butt" | "round" {
 /**
  * Glyphs sized by one rule: longest side = 512 * min(1.2, aspect^0.25), centred halfway between
  * the bounding-box centre and the centre of mass. `verve` and `velth` are the final vectors.
- * The others are traced from the approved 1024px renders.
+ * `vibot`, `vhub`, `vmem` and `projectv` are traced from the approved 1024px renders. `eva` (option A,
+ * a filled four-point star) and `bee` (option D, an orb with eyes, stripes and antennae) are the final
+ * vectors from their design sheet, as drawn there.
  */
 export const APP_MARKS: Record<AppName, MarkShape> = {
   projectv: {
@@ -77,6 +80,22 @@ export const APP_MARKS: Record<AppName, MarkShape> = {
       "M512 732.3C644.2 652.1 734.3 471.9 724.3 301.6C604.1 371.7 524 552 512 732.3Z",
     ],
   },
+  eva: {
+    kind: "fill",
+    paths: ["M242.9 512Q485.1 485.1 512 278.8Q538.9 485.1 781 512Q538.9 538.9 512 745.1Q485.1 538.9 242.9 512Z"],
+  },
+  bee: {
+    kind: "stroke",
+    paths: [
+      "M304 530.7A208.1 208.1 0 1 1 720.1 530.7A208.1 208.1 0 1 1 304 530.7",
+      "M447.5 414.2L447.5 445.4",
+      "M576.5 414.2L576.5 445.4",
+      "M306.3 561.9L717.7 561.9",
+      "M344 653.4L680 653.4",
+      "M468.3 341.4Q455.8 291.4 420.5 260.2",
+      "M555.7 341.4Q568.2 291.4 603.5 260.2",
+    ],
+  },
 };
 
 type Point = [number, number];
@@ -180,6 +199,7 @@ export function markBBox(app: AppName): Box {
  * (x 186 to 789, y 259.96 to 761.7) at side max(width, height) x 1.04 (about 4% padding), rounded outward.
  * All five use this side, so glyph scale stays equal. Only the size is shared: each app has its own origin in
  * `APP_MARK_VIEWBOX`. `projectv` is left out so its wide brand mark does not shrink the app glyphs.
+ * Historical: this union covers those five only. `eva` and `bee` reuse the 629 side but are not part of it.
  */
 export const APP_MARK_CROP_VIEWBOX = "173 197 629 629";
 
@@ -190,9 +210,9 @@ export const APP_MARK_CROP_VIEWBOX = "173 197 629 629";
 export const PROJECTV_MARK_VIEWBOX = "171.5 181 687 687";
 
 /**
- * Plain-mark viewBox per app. Always square. The five apps keep one 629 side (equal scale), and each origin is
- * `markBBox(app)` centre minus 314.5 on both axes, so every glyph sits centred in its own frame. `projectv` uses
- * its 687 frame, centre minus 343.5. Hardcoded; checked against `markBBox` in tests.
+ * Plain-mark viewBox per app. Always square. Every mark except `projectv` keeps one 629 side (equal scale), and each
+ * origin is `markBBox(app)` centre minus 314.5 on both axes, so every glyph sits centred in its own frame. `projectv`
+ * uses its 687 frame, centre minus 343.5. Hardcoded; checked against `markBBox` in tests.
  */
 export const APP_MARK_VIEWBOX: Record<AppName, string> = {
   projectv: PROJECTV_MARK_VIEWBOX,
@@ -201,6 +221,8 @@ export const APP_MARK_VIEWBOX: Record<AppName, string> = {
   vmem: "197.24772201231343 196.33100022273135 629 629",
   verve: "197.5 210.9 629 629",
   velth: "197.5 202.45 629 629",
+  eva: "197.45 197.45 629 629",
+  bee: "197.55 187.2807619340906 629 629",
 };
 
 /**
@@ -215,6 +237,8 @@ export const APP_MARK_VIEWBOX_START: Record<AppName, string> = {
   vmem: "255.5301217210191 196.33100022273135 629 629",
   verve: "260.4 210.9 629 629",
   velth: "273.9433593555699 202.45 629 629",
+  eva: "242.9 197.45 629 629",
+  bee: "278.94999999999993 187.2807619340906 629 629",
 };
 
 /** Width over height of a mark's viewBox. Always about 1, because the viewBoxes are square. Kept for API stability; do not use it for sizing. */

package/src/brand/vProAppBenefits.ts

@@ -2,7 +2,7 @@ import type { AppName } from "./svg";
 
 /** Benefits for one app, shown under that app's icon and name. */
 export type PricingPlanAppBenefit = {
-  app: Exclude<AppName, "projectv">;
+  app: Exclude<AppName, "projectv" | "eva" | "bee">;
   items: readonly string[];
 };
 

package/src/entries/date-time.ts

@@ -1,3 +1,4 @@
 // `@vvedantb/native-ui/date-time`. Imports
 // `@react-native-community/datetimepicker` and `dayjs`.
 export { DateTimeField } from "../DateTimeField";
+export type { DateTimeFieldProps } from "../DateTimeField";

package/src/entries/layout.ts

@@ -1,9 +1,13 @@
-// `@vvedantb/native-ui/layout`: screen containers, page headers and settings
-// chrome.
+// `@vvedantb/native-ui/layout`: screen containers, page headers, section
+// labels and settings chrome.
 export { SafeAreaContainer } from "../SafeAreaContainer";
 export { ScreenContainer } from "../ScreenContainer";
 export { PageTitle, PageHeader } from "../PageTitle";
 export type { PageTitleProps, PageHeaderProps } from "../PageTitle";
+export { StackPageHeader } from "../StackPageHeader";
+export type { StackPageHeaderProps } from "../StackPageHeader";
+export { SectionLabel } from "../SectionLabel";
+export type { SectionLabelProps } from "../SectionLabel";
 export { SettingsSection } from "../settings/SettingsSection";
 export { SettingsField } from "../settings/SettingsField";
 export { SettingsToggleRow } from "../settings/SettingsToggleRow";

package/src/entries/page-title.ts

@@ -1,4 +1,9 @@
-// `@vvedantb/native-ui/page-title`: `PageTitle` and `PageHeader` on their own.
-// Reaches no optional peer, not even a loader.
+// `@vvedantb/native-ui/page-title`: `PageTitle`, `PageHeader` and (from 0.5.0)
+// `StackPageHeader`. Reaches no optional peer, not even a loader.
+// `StackPageHeader` imports one Tabler icon (a required peer) for its back
+// button; Metro does not tree-shake by default, so that bundles the Tabler
+// package with this entry.
 export { PageTitle, PageHeader } from "../PageTitle";
 export type { PageTitleProps, PageHeaderProps } from "../PageTitle";
+export { StackPageHeader } from "../StackPageHeader";
+export type { StackPageHeaderProps } from "../StackPageHeader";

package/src/entries/primitives.ts

@@ -1,6 +1,8 @@
 // `@vvedantb/native-ui/primitives`: fields, display, tabs, overlays and
 // toasts. `BottomSheetContainer`, `DateTimeField` and `AmbientBackground` are
-// not here; they have their own entries.
+// not here; they have their own entries. `Text` and `TextClassContext` are the
+// `primitives/text` variants (from 0.5.0); they are not on the root entry.
+export { Text, TextClassContext } from "../primitives/text";
 export { Button } from "../Button";
 export type { ButtonProps, ButtonSize, ButtonVariant } from "../Button";
 export { Input } from "../Input";
@@ -23,6 +25,20 @@ export { Badge } from "../Badge";
 export type { BadgeProps, BadgeVariant } from "../Badge";
 export { StatusDot } from "../StatusDot";
 export type { StatusDotProps, StatusTone } from "../StatusDot";
+export { ColorSwatches } from "../ColorSwatches";
+export type { ColorSwatchesProps, ColorSwatchesSize } from "../ColorSwatches";
+export { StatGrid } from "../StatGrid";
+export type { StatGridItem, StatGridProps } from "../StatGrid";
+export { SectionLabel } from "../SectionLabel";
+export type { SectionLabelProps } from "../SectionLabel";
+export { SheetRow } from "../SheetRow";
+export type { SheetRowProps } from "../SheetRow";
+export { PageIndicator } from "../PageIndicator";
+export type { PageIndicatorProps } from "../PageIndicator";
+export { IconButton } from "../IconButton";
+export type { IconButtonProps, IconButtonSize, IconButtonVariant } from "../IconButton";
+export { CaptureButton } from "../CaptureButton";
+export type { CaptureButtonProps } from "../CaptureButton";
 export { Separator } from "../Separator";
 export type { SeparatorProps } from "../Separator";
 export { Progress } from "../Progress";
@@ -43,6 +59,7 @@ export type {
   TabsContentProps,
 } from "../Tabs";
 export { ListRow } from "../ListRow";
+export type { ListRowProps } from "../ListRow";
 export { HeaderIconButton } from "../HeaderIconButton";
 export { ThemeToggle } from "../ThemeToggle";
 export type { ThemeToggleProps } from "../ThemeToggle";
@@ -54,6 +71,7 @@ export {
   CardContent,
   CardFooter,
 } from "../Card";
+export type { CardProps } from "../Card";
 export { Skeleton, CardSkeleton } from "../Skeleton";
 export { EmptyState } from "../EmptyState";
 export type { EmptyStateVariant } from "../EmptyState";

package/src/examples/ParityGallery.tsx

@@ -1,11 +1,18 @@
 // Reference screen for the components that mirror `@vvedantb/ui`. Render it in
 // an Expo route to compare against the web: it needs the same NativeWind setup
 // as the rest of the package and a `SafeAreaProvider` above it. It always
-// renders the default sizes (larger text off), as the web does. Prices below
-// are placeholders, not real plan prices.
+// renders the default sizes (larger text off), as the web does. Prices, names
+// and figures below are placeholders, not real data.
 import { useState, type ReactNode } from "react";
 import { ScrollView, Text, View, type TextProps } from "react-native";
-import { IconInbox } from "@tabler/icons-react-native";
+import {
+  IconCopy,
+  IconInbox,
+  IconPhoto,
+  IconRefresh,
+  IconTrash,
+  IconX,
+} from "@tabler/icons-react-native";
 import {
   APP_ICONS,
   APP_NAMES,
@@ -18,12 +25,14 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
+  AmbientBackground,
   AppMark,
   AppWordmark,
   Avatar,
   AvatarFallback,
   Badge,
   Button,
+  CaptureButton,
   Card,
   CardContent,
   CardDescription,
@@ -32,7 +41,9 @@ import {
   CardTitle,
   CenteredSpinner,
   Checkbox,
+  ColorSwatches,
   ConfirmDialog,
+  DateTimeField,
   Dialog,
   DialogBody,
   DialogClose,
@@ -44,15 +55,20 @@ import {
   DialogTrigger,
   EmptyState,
   GoogleMark,
+  IconButton,
   Input,
   Label,
   LabeledSwitchRow,
+  ListRow,
+  NEUTRAL_900,
   NativeUiProvider,
   PageHeader,
+  PageIndicator,
   PageTitle,
   PricingModal,
   Progress,
   SearchInput,
+  SectionLabel,
   Select,
   Separator,
   Sheet,
@@ -60,10 +76,13 @@ import {
   SheetDescription,
   SheetFooter,
   SheetHeader,
+  SheetRow,
   SheetTitle,
   SheetTrigger,
   Skeleton,
   Spinner,
+  StackPageHeader,
+  StatGrid,
   StatusDot,
   Switch,
   Tabs,
@@ -75,6 +94,7 @@ import {
   Toaster,
   UpgradeToProCard,
   initials,
+  palette,
   toast,
   tokens,
   useNativeUi,
@@ -125,9 +145,13 @@ const STATUS_TONES: StatusTone[] = [
   "cancelled",
   "active",
   "critical",
+  "info",
   "neutral",
 ];
 
+const SWATCHES = ["#db2777", "#2563eb", "#16a34a", "#f59e0b", "#181818", "#ffffff"];
+const SWATCH_LABELS = ["Pink", "Blue", "Green", "Amber", "Black", "White"];
+
 // Space after the last section, so Card, Upgrade and Overlays can scroll to the
 // top of an 844-tall phone for screenshot crops.
 const GALLERY_END_SPACE = 720;
@@ -194,6 +218,13 @@ function GalleryScreen() {
   const [progress, setProgress] = useState(40);
   const [pricingOpen, setPricingOpen] = useState(false);
   const [confirmOpen, setConfirmOpen] = useState(false);
+  const [swatch, setSwatch] = useState(SWATCHES[0]!);
+  const [due, setDue] = useState<Date | null>(null);
+  const [when, setWhen] = useState(() => new Date());
+  const [muted, setMuted] = useState(false);
+  const [sort, setSort] = useState<"newest" | "name">("newest");
+  const [page, setPage] = useState(0);
+  const scheme = useScheme();
 
   return (
     <View className="flex-1">
@@ -367,6 +398,9 @@ function GalleryScreen() {
           <Card title="Today" description="Card props, as before.">
             <GalleryText>Body</GalleryText>
           </Card>
+          <Card title="Pressable" description="onPress makes the whole card a button." onPress={() => toast("Card pressed")}>
+            <GalleryText>Tap anywhere on the card.</GalleryText>
+          </Card>
           <Card>
             <CardHeader>
               <CardTitle>Composed</CardTitle>
@@ -515,6 +549,139 @@ function GalleryScreen() {
           </EmptyState.Root>
         </Section>
 
+        {/* 0.5.0: the Verve, vibot and Velth pieces. */}
+        <Section title="ColorSwatches">
+          <ColorSwatches
+            value={swatch}
+            onChange={setSwatch}
+            colors={SWATCHES}
+            labels={SWATCH_LABELS}
+            accessibilityLabel="Accent colour"
+          />
+          <ColorSwatches
+            value={swatch}
+            onChange={setSwatch}
+            colors={SWATCHES}
+            labels={SWATCH_LABELS}
+            accessibilityLabel="Accent colour"
+            size="sm"
+            disabled
+          />
+        </Section>
+
+        <Section title="DateTimeField">
+          {/* Date only, empty until picked, with a clear button once set. */}
+          <DateTimeField
+            mode="date"
+            value={due}
+            onChange={setDue}
+            placeholder="No due date"
+            onClear={() => setDue(null)}
+          />
+          <DateTimeField value={when} onChange={setWhen} />
+        </Section>
+
+        <Section title="ListRow">
+          {/* Long-press the first row for its second action. */}
+          <ListRow
+            title="Ada Lovelace"
+            meta="See you at nine"
+            leading={
+              <View>
+                <Avatar>
+                  <AvatarFallback>{initials("Ada Lovelace")}</AvatarFallback>
+                </Avatar>
+                <StatusDot tone="info" size="md" className="absolute right-0 top-0" />
+              </View>
+            }
+            titleEnd={<Badge variant="secondary">09:41</Badge>}
+            accessibilityLabel="Ada Lovelace, unread, 09:41"
+            onPress={() => toast("Open thread")}
+            onLongPress={() => toast("Thread actions")}
+          />
+          {/* The switch sits outside the pressable area: it toggles without opening the row. */}
+          <ListRow
+            title="Mute thread"
+            meta="Tap the row or the switch"
+            onPress={() => toast("Row pressed")}
+            control={<Switch checked={muted} onCheckedChange={setMuted} accessibilityLabel="Mute thread" />}
+          />
+        </Section>
+
+        <Section title="SectionLabel and StatGrid">
+          <SectionLabel>Today</SectionLabel>
+          <StatGrid
+            items={[
+              { label: "Done", value: "6" },
+              { label: "This week", value: "31" },
+              { label: "Streak", value: "12 days" },
+            ]}
+          />
+          <SectionLabel uppercase>Library</SectionLabel>
+          <StatGrid
+            columns={3}
+            items={[
+              { label: "Books", value: "24" },
+              { label: "Notes", value: "130" },
+              { label: "Clips", value: "8" },
+            ]}
+          />
+        </Section>
+
+        <Section title="SheetRow">
+          {/* Static rows on the sheet surface; in an app they sit in a `SheetContent`. */}
+          <View className="py-2" style={{ backgroundColor: palette.overlay[scheme], borderRadius: tokens.radius.lg }}>
+            <SheetRow icon={IconCopy} title="Copy link" onPress={() => toast("Copied")} />
+            <SheetRow icon={IconPhoto} title="Save image" detail="To your photo library" onPress={() => toast("Saved")} />
+            <SheetRow title="Newest first" active={sort === "newest"} onPress={() => setSort("newest")} />
+            <SheetRow title="By name" active={sort === "name"} onPress={() => setSort("name")} />
+            <SheetRow icon={IconPhoto} title="Export" detail="Needs V Pro" disabled />
+            <SheetRow icon={IconTrash} title="Delete" danger onPress={() => toast.error("Deleted")} />
+          </View>
+        </Section>
+
+        <Section title="PageIndicator">
+          <PageIndicator count={4} index={page} />
+          <PageIndicator count={4} index={page} onChange={setPage} />
+        </Section>
+
+        <Section title="StackPageHeader">
+          {/* `safeTop={false}`: the strip is not at the top of the screen. */}
+          <AmbientBackground className="flex-none overflow-hidden rounded-lg">
+            <StackPageHeader
+              title="Details"
+              description="Edited 2 min ago"
+              safeTop={false}
+              onBack={() => toast("Back")}
+              headerRight={<ThemeToggle />}
+            />
+          </AmbientBackground>
+          <AmbientBackground className="flex-none overflow-hidden rounded-lg">
+            <StackPageHeader title="A much longer page title that is cut off" safeTop={false} onBack={() => toast("Back")} />
+          </AmbientBackground>
+        </Section>
+
+        <Section title="Camera chrome">
+          {/* A dark stand-in for the live preview. */}
+          <View className="h-72 justify-between overflow-hidden rounded-lg p-4" style={{ backgroundColor: NEUTRAL_900 }}>
+            <View className="flex-row justify-between">
+              <IconButton variant="overlay" icon={IconX} label="Close camera" onPress={() => toast("Close")} />
+              <IconButton variant="overlay" icon={IconRefresh} label="Flip camera" onPress={() => toast("Flip")} />
+            </View>
+            <View className="flex-row items-center justify-between">
+              <IconButton variant="overlay" size="lg" icon={IconPhoto} label="Open library" onPress={() => toast("Library")} />
+              <CaptureButton onPress={() => toast.success("Captured")} />
+              <View style={{ width: 48 }} />
+            </View>
+          </View>
+          <View className="flex-row items-center gap-3">
+            <IconButton icon={IconCopy} label="Copy" size="sm" onPress={() => toast("Copied")} />
+            <IconButton icon={IconCopy} label="Copy" onPress={() => toast("Copied")} />
+            <IconButton icon={IconCopy} label="Copy" size="lg" onPress={() => toast("Copied")} />
+            <IconButton icon={IconTrash} label="Delete" disabled />
+          </View>
+        </Section>
+
         {/* The full chat screen, with the composer and keyboard, is `AiChatGallery` (`@vvedantb/native-ui/ai-gallery`). */}
         <Section title="AI chat">
           <AiChatSamples />

package/src/index.ts

@@ -59,6 +59,20 @@ export { Badge } from "./Badge";
 export type { BadgeProps, BadgeVariant } from "./Badge";
 export { StatusDot } from "./StatusDot";
 export type { StatusDotProps, StatusTone } from "./StatusDot";
+export { ColorSwatches } from "./ColorSwatches";
+export type { ColorSwatchesProps, ColorSwatchesSize } from "./ColorSwatches";
+export { StatGrid } from "./StatGrid";
+export type { StatGridItem, StatGridProps } from "./StatGrid";
+export { SectionLabel } from "./SectionLabel";
+export type { SectionLabelProps } from "./SectionLabel";
+export { SheetRow } from "./SheetRow";
+export type { SheetRowProps } from "./SheetRow";
+export { PageIndicator } from "./PageIndicator";
+export type { PageIndicatorProps } from "./PageIndicator";
+export { IconButton } from "./IconButton";
+export type { IconButtonProps, IconButtonSize, IconButtonVariant } from "./IconButton";
+export { CaptureButton } from "./CaptureButton";
+export type { CaptureButtonProps } from "./CaptureButton";
 export { Separator } from "./Separator";
 export type { SeparatorProps } from "./Separator";
 export { Progress } from "./Progress";
@@ -79,6 +93,7 @@ export type {
   TabsContentProps,
 } from "./Tabs";
 export { ListRow } from "./ListRow";
+export type { ListRowProps } from "./ListRow";
 export { HeaderIconButton } from "./HeaderIconButton";
 export { ThemeToggle } from "./ThemeToggle";
 export type { ThemeToggleProps } from "./ThemeToggle";
@@ -90,6 +105,7 @@ export {
   CardContent,
   CardFooter,
 } from "./Card";
+export type { CardProps } from "./Card";
 export { Skeleton, CardSkeleton } from "./Skeleton";
 export { EmptyState } from "./EmptyState";
 export type { EmptyStateVariant } from "./EmptyState";
@@ -136,11 +152,14 @@ export { Toaster } from "./Toast";
 export { toast } from "./toastStore";
 export type { ToastOptions, ToastVariant } from "./toastStore";
 export { DateTimeField } from "./DateTimeField";
+export type { DateTimeFieldProps } from "./DateTimeField";
 export { BottomSheetContainer } from "./BottomSheetContainer";
 export { SafeAreaContainer } from "./SafeAreaContainer";
 export { ScreenContainer } from "./ScreenContainer";
 export { PageTitle, PageHeader } from "./PageTitle";
 export type { PageTitleProps, PageHeaderProps } from "./PageTitle";
+export { StackPageHeader } from "./StackPageHeader";
+export type { StackPageHeaderProps } from "./StackPageHeader";
 export { SettingsSection } from "./settings/SettingsSection";
 export { SettingsField } from "./settings/SettingsField";
 export { SettingsToggleRow } from "./settings/SettingsToggleRow";

package/src/marketing/PricingModal.tsx

@@ -11,7 +11,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { IconCheck, IconX } from "@tabler/icons-react-native";
 import { APP_ICONS, IconProjectV } from "../brand/AppIcons";
 import type { ProductAppName } from "../brand/AppWordmark";
-import { familyApp } from "../brand/familyApps";
+import { familyApp, type FamilyAppName } from "../brand/familyApps";
 import type { AppName } from "../brand/svg";
 import { Button } from "../Button";
 import { cn } from "../cn";
@@ -41,8 +41,8 @@ export type PricingModalProps = {
   description?: string;
   /** Cards, top to bottom. */
   plans: readonly PricingPlan[];
-  /** App marks at the top left. */
-  apps?: readonly AppName[];
+  /** App marks at the top left. Family apps only: each links to its `FAMILY_APPS` site. */
+  apps?: readonly FamilyAppName[];
   /** App the modal is shown in. Its `appBenefits` group comes first. */
   currentApp?: ProductAppName;
   /** Centred headline, for example "One plan. Every V app." */