@vvedantb/native-ui 0.3.12 → 0.3.14

package/README.md

@@ -61,10 +61,11 @@ The root entry exports everything. It still imports `BottomSheetContainer` and `
 | `@vvedantb/native-ui/button` | `Button`, `ButtonProps`, `ButtonSize`, `ButtonVariant` | none |
 | `@vvedantb/native-ui/primitives` | `Button`, `Input`, `SearchInput`, `Textarea`, `Label`, `Select`, `Switch`, `LabeledSwitchRow`, `Checkbox`, `Card` and its parts, `Badge`, `StatusDot`, `Avatar`, `Separator`, `Progress`, `Spinner`, `Skeleton`, `EmptyState`, `ListRow`, `Chip`, `HeaderIconButton`, `Tabs`, `PillTabs`, `Dialog`, `AlertDialog`, `ConfirmDialog`, `Sheet`, `toast`, `Toaster` | `expo-blur`, `expo-haptics` (loaders) |
 | `@vvedantb/native-ui/search-input` | `SearchInput`, `SearchInputProps` | none |
+| `@vvedantb/native-ui/page-title` | `PageTitle`, `PageHeader`, `PageTitleProps`, `PageHeaderProps` (from 0.3.13) | none |
 | `@vvedantb/native-ui/toast` | `toast`, `Toaster`, `ToastOptions`, `ToastVariant` | none (from 0.3.12) |
 | `@vvedantb/native-ui/theme` | `NativeUiProvider`, `useNativeUi`, `useLargerText`, `useAccentColor`, `DEFAULT_ACCENT`, `tokens`, `palette`, `withAlpha`, `fontClass`, `cn`, `Colors` and the colour constants | none |
 | `@vvedantb/native-ui/floating` | `FloatingSurface`, `GlassSheetBackground`, `LiquidGlass`, `GlassBlurProvider`, `GlassBlurTarget`, `FloatingFAB`, `useReduceTransparency`, the floating metrics and styles | `expo-blur` (loader) |
-| `@vvedantb/native-ui/layout` | `ScreenContainer`, `SafeAreaContainer`, `SettingsSection`, `SettingsField`, `SettingsToggleRow`, `SettingsStack` | `expo-blur` (loader) |
+| `@vvedantb/native-ui/layout` | `ScreenContainer`, `SafeAreaContainer`, `PageTitle`, `PageHeader` and their props types, `SettingsSection`, `SettingsField`, `SettingsToggleRow`, `SettingsStack` | `expo-blur` (loader) |
 | `@vvedantb/native-ui/marketing` | `UpgradeToProCard`, `PricingModal` and the pricing types | none |
 | `@vvedantb/native-ui/ambient` | `AmbientBackground` | `expo-linear-gradient` (loader) |
 | `@vvedantb/native-ui/blur`, `/haptics` | the loaders | `expo-blur`, `expo-haptics` (loaders) |
@@ -78,6 +79,7 @@ import { FloatingTabBar } from "@vvedantb/native-ui/tab-bar";
 import { AppMark } from "@vvedantb/native-ui/brand";
 import { NativeUiProvider } from "@vvedantb/native-ui/theme";
 import { SearchInput } from "@vvedantb/native-ui/search-input";
+import { PageHeader } from "@vvedantb/native-ui/page-title";
 import { toast, Toaster } from "@vvedantb/native-ui/toast";
 ```
 
@@ -109,7 +111,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.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.
+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`.
 
 ## Theme
 
@@ -137,7 +139,7 @@ import { NativeUiProvider, Button, Card } from "@vvedantb/native-ui";
 | Overlays | `Dialog`, `AlertDialog`, `ConfirmDialog`, `Sheet` (RN `Modal`, each with the web part names), `BottomSheetContainer` (`@gorhom/bottom-sheet`) |
 | Feedback | `toast()` and `<Toaster />` |
 | Brand and upgrade | `APP_ICONS`, `IconVibot` and the other `Icon*`, `AppMark`, `AppWordmark`, `FAMILY_APPS`, `V_PRO_APP_BENEFITS`, `UpgradeToProCard`, `PricingModal` |
-| Settings and layout | `SettingsSection`, `SettingsField`, `SettingsToggleRow`, `SettingsStack`, `ScreenContainer`, `SafeAreaContainer`, `FloatingSurface`, `AmbientBackground` |
+| Settings and layout | `PageTitle`, `PageHeader` (0.3.13), `SettingsSection`, `SettingsField`, `SettingsToggleRow`, `SettingsStack`, `ScreenContainer`, `SafeAreaContainer`, `FloatingSurface`, `AmbientBackground` |
 
 Overlays hold their own open state, or take `open` and `onOpenChange`:
 
@@ -172,6 +174,15 @@ const [query, setQuery] = useState("");
 <SearchInput value={query} onChange={setQuery} label="Search apps" />
 ```
 
+From 0.3.13 `PageTitle` is the web page title, the type on the web `Breadcrumb` (`text-xl font-semibold leading-tight tracking-tight`): Instrument Sans 600 at 20 / 25 with -0.5 letter spacing (-0.025em), in the foreground colour. It sets the semibold face class and `fontWeight: "600"` together, so it is not drawn Regular on Android or Expo web. It is a header for VoiceOver and TalkBack, one line (pass `numberOfLines={0}` to wrap), and scales with the system font size. `PageHeader` is a tab-root title row: `PageTitle` at the start and an optional `action` at the end, which keeps its width while a long title is cut off. It has the `ScreenContainer` side padding (`px-4`) and a row at least 56 high, so tabs with and without an action put their titles at the same height. It pads the top by the safe-area inset; pass `safeTop={false}` under a native header or inside a view that already pads it. Give a `Button` in `action` `fullWidth={false}`.
+
+```tsx
+<PageHeader
+  title="Apps"
+  action={<Button variant="ghost" size="sm" fullWidth={false} onPress={updateAll}>Update all</Button>}
+/>
+```
+
 Toasts need one `<Toaster />` inside `SafeAreaProvider`, after the navigator. Then call `toast("Saved")`, `toast.error("Failed")` or `toast.loading("Syncing")` from anywhere. Pass the returned id to replace a toast (`toast.success("Synced", { id })`). On iOS toasts show over modals; on Android a `Modal` covers them.
 
 From 0.3.12 a toast looks like the web `SonnerToaster` at its default density with `toastIcons="filled24"`: the filled 24 success, info, warning and error icons (the web paths, in `palette` colours), a `text-sm` medium title, `px-4 py-3`, radius 16, and the flat overlay fill with a 1 px ring and a light shadow (`smooth-shadow-ring-md`). Toasts no longer blur.
@@ -186,6 +197,8 @@ The components keep the web sizes on screen and reach a 44 pt touch target with
 
 Text scales with the system font size. Labelled controls have minimum heights, so a large Dynamic Type size grows them instead of clipping the label (the `SearchInput` lock grows with the font scale); only the `FloatingTabBar` labels are capped (1.5×), to fit the fixed bar. With Reduce Motion on, dialogs, sheets, toasts, the `Select` popover, `PricingModal`, `Progress` and `Skeleton` do not animate. Dialogs, sheets, toasts, `FloatingTabBar` and `FloatingFAB` stay inside the safe-area insets, and dialog and sheet fields stay above the keyboard on iOS and Android.
 
+The brand marks (`APP_ICONS`, the `Icon*` exports and `AppMark`) are images named by `title`, and hidden from assistive tech without one. From 0.3.14 they set the props each platform reads: `accessibilityRole="image"` and `accessibilityLabel` on iOS and Android, `role="img"` and `aria-label` on web. Without a title they set `accessibilityElementsHidden` and `importantForAccessibility="no-hide-descendants"` on native and `aria-hidden` on web. `testID` is `data-testid` on web. On web `react-native-svg` passes its props straight to the DOM `<svg>`, and React Native Web does not map `accessible`, the `accessibility*` props or `testID` there. So do not put them on an `Svg` or on a Tabler icon: put them on the parent `View` or `Pressable`. The package draws no Lucide icon, as a Lucide icon always sets `testID` on its `Svg`. On web the `Select` options are Radix DOM nodes, so from 0.3.14 they take their name and test id as `aria-label` and `data-testid` there, and as `accessibilityLabel` and `testID` on iOS and Android.
+
 ## Floating UI / Android shadows
 
 Do not put `elevation` or NativeWind `shadow-*` on nested or translucent chrome. `floatingShadow` is iOS `shadow*` and Android/web `boxShadow`. `FloatingSurface` clips on an inner view.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/native-ui",
-  "version": "0.3.12",
+  "version": "0.3.14",
   "license": "MIT",
   "description": "Shared React Native / Expo UI primitives. Floating surfaces, forms, overlays, toasts, settings chrome, tab bar and the family app marks.",
   "type": "module",
@@ -37,6 +37,10 @@
       "types": "./src/entries/search-input.ts",
       "default": "./src/entries/search-input.ts"
     },
+    "./page-title": {
+      "types": "./src/entries/page-title.ts",
+      "default": "./src/entries/page-title.ts"
+    },
     "./toast": {
       "types": "./src/entries/toast.ts",
       "default": "./src/entries/toast.ts"

package/src/PageTitle.tsx

@@ -0,0 +1,81 @@
+import type { ReactNode } from "react";
+import { Text, View, type TextProps, type ViewProps } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { cn } from "./cn";
+import {
+  PAGE_HEADER_HEIGHT,
+  PAGE_TITLE_CLASS,
+  pageTitleStyle,
+  textStyle,
+} from "./controlStyles";
+import { useScheme } from "./useScheme";
+
+export type PageTitleProps = TextProps & { className?: string };
+
+/**
+ * The web page title (`Breadcrumb`: `text-xl font-semibold leading-tight
+ * tracking-tight`): Instrument Sans 600 at 20 / 25 with -0.5 letter spacing,
+ * in the scheme's foreground. A header for VoiceOver and TalkBack. One line,
+ * cut off at the end as the web `truncate`; pass `numberOfLines={0}` to wrap.
+ * It scales with the system font size.
+ */
+export function PageTitle({ className, style, ...props }: PageTitleProps) {
+  const scheme = useScheme();
+  return (
+    <Text
+      accessibilityRole="header"
+      numberOfLines={1}
+      className={cn(PAGE_TITLE_CLASS, className)}
+      style={[textStyle("foreground", scheme), pageTitleStyle(), style]}
+      {...props}
+    />
+  );
+}
+
+export type PageHeaderProps = Omit<ViewProps, "children"> & {
+  /** The page title, drawn with `PageTitle`. */
+  title: string;
+  /**
+   * Content at the end of the row, such as an "Update all" `Button` (pass it
+   * `fullWidth={false}`). It keeps its width; a long title is cut off instead.
+   */
+  action?: ReactNode;
+  /**
+   * Pad the top by the safe-area inset. Default `true`, for a header at the top
+   * of a screen with no navigation header. Pass `false` under a native header
+   * or inside a view that already pads the inset.
+   */
+  safeTop?: boolean;
+  className?: string;
+  /** Classes on the title. */
+  titleClassName?: string;
+};
+
+/**
+ * A screen's title row: `PageTitle` at the start and an optional `action` at
+ * the end, with the `ScreenContainer` side padding (`px-4`). The row is at
+ * least `PAGE_HEADER_HEIGHT` (56) high below the top inset, so tab roots with
+ * and without an action put their titles at the same height.
+ */
+export function PageHeader({
+  title,
+  action,
+  safeTop = true,
+  className,
+  titleClassName,
+  style,
+  ...props
+}: PageHeaderProps) {
+  const insets = useSafeAreaInsets();
+  const top = safeTop ? insets.top : 0;
+  return (
+    <View
+      className={cn("flex-row items-center justify-between gap-3 px-4", className)}
+      style={[{ paddingTop: top, minHeight: top + PAGE_HEADER_HEIGHT }, style]}
+      {...props}
+    >
+      <PageTitle className={cn("min-w-0 flex-1", titleClassName)}>{title}</PageTitle>
+      {action ? <View className="shrink-0">{action}</View> : null}
+    </View>
+  );
+}

package/src/Select.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Platform } from "react-native";
 import {
   NativeSelectScrollView,
   Select as PrimitiveSelect,
@@ -17,6 +18,7 @@ import {
   typeStyle,
 } from "./controlStyles";
 import { palette } from "./palette";
+import { selectItemA11yProps } from "./selectA11y";
 import { useLargerText } from "./theme";
 import { useScheme } from "./useScheme";
 
@@ -138,10 +140,11 @@ function Select<TValue = string | number | null>({
                 ? `${testID}-${String(option.value ?? "null")}`
                 : undefined;
               return (
+                // On web the item is a Radix DOM node: the name and test id
+                // go as `aria-label` and `data-testid` there.
                 <SelectItem
                   key={`${String(option.value)}-${option.label}`}
-                  testID={optionId}
-                  accessibilityLabel={option.label}
+                  {...selectItemA11yProps({ label: option.label, testID: optionId }, Platform.OS)}
                   label={option.label}
                   value={String(option.value ?? NULL_SENTINEL)}
                 />

package/src/brand/AppIcons.tsx

@@ -1,5 +1,6 @@
-import type { StyleProp, ViewStyle } from "react-native";
+import { Platform, type StyleProp, type ViewStyle } from "react-native";
 import Svg, { G, Path } from "react-native-svg";
+import { svgA11yProps } from "../svgA11y";
 import { tokens } from "../tokens";
 import { useScheme } from "../useScheme";
 import {
@@ -19,10 +20,11 @@ export type AppIconProps = {
   color?: string;
   /** Stroke width in rendered points, for stroke glyphs. Default: the glyph's own weight. Fill glyphs ignore it. */
   stroke?: number;
-  /** Accessible name. Without it the icon is hidden from assistive tech. */
+  /** Accessible name. Without it the icon is hidden from assistive tech. On web: `role="img"` and `aria-label`, or `aria-hidden`. */
   title?: string;
   /** `"center"` (default) centres the glyph in its square. `"start"` left-aligns its ink, for vertical lists. */
   align?: "center" | "start";
+  /** Set as `data-testid` on web, where `Svg` does not map `testID`. */
   testID?: string;
   style?: StyleProp<ViewStyle>;
 };
@@ -70,12 +72,7 @@ function createAppIcon(app: AppName, displayName: string): AppIconComponent {
           align === "start" ? APP_MARK_VIEWBOX_START[app] : APP_MARK_VIEWBOX[app]
         }
         preserveAspectRatio="xMidYMid meet"
-        accessible={Boolean(title)}
-        accessibilityRole={title ? "image" : undefined}
-        accessibilityLabel={title}
-        accessibilityElementsHidden={!title}
-        importantForAccessibility={title ? "auto" : "no-hide-descendants"}
-        testID={testID}
+        {...svgA11yProps({ title, testID }, Platform.OS)}
         style={style}
       >
         <G {...glyphProps}>

package/src/brand/AppMark.tsx

@@ -1,5 +1,6 @@
-import type { StyleProp, ViewStyle } from "react-native";
+import { Platform, type StyleProp, type ViewStyle } from "react-native";
 import Svg, { G, Path, Rect } from "react-native-svg";
+import { svgA11yProps } from "../svgA11y";
 import { APP_ICONS } from "./AppIcons";
 import {
   APP_MARKS,
@@ -18,8 +19,9 @@ export type AppMarkProps = {
   variant?: AppMarkVariant;
   /** Width and height in points. Default 24. */
   size?: number;
-  /** Accessible name. Without it the mark is hidden from assistive tech. */
+  /** Accessible name. Without it the mark is hidden from assistive tech. On web: `role="img"` and `aria-label`, or `aria-hidden`. */
   title?: string;
+  /** Set as `data-testid` on web, where `Svg` does not map `testID`. */
   testID?: string;
   style?: StyleProp<ViewStyle>;
 };
@@ -64,12 +66,7 @@ export function AppMark({
       height={size}
       viewBox={MARK_VIEWBOX}
       preserveAspectRatio="xMidYMid meet"
-      accessible={Boolean(title)}
-      accessibilityRole={title ? "image" : undefined}
-      accessibilityLabel={title}
-      accessibilityElementsHidden={!title}
-      importantForAccessibility={title ? "auto" : "no-hide-descendants"}
-      testID={testID}
+      {...svgA11yProps({ title, testID }, Platform.OS)}
       style={style}
     >
       <Rect width={1024} height={1024} rx={TILE_RADIUS} fill={tone.bg} />

package/src/controlStyles.ts

@@ -3,9 +3,9 @@
  * `Checkbox`, `Tabs`, `Card` and component text, taken from `palette` and
  * `tokens` instead of NativeWind theme keys (`bg-primary`, `bg-input`,
  * `text-foreground`) that apps do not define, or define without a dark value.
- * Also text weights and sizes as styles, the `SearchInput` metrics, the
- * compact window test for dialogs and the touch-target maths. No React Native import, so the tests can load
- * this file.
+ * Also text weights and sizes as styles, the page title type, the
+ * `SearchInput` metrics, the compact window test for dialogs and the
+ * touch-target maths. No React Native import, so the tests can load this file.
  */
 import { palette, withAlpha } from "./palette";
 import { tokens } from "./tokens";
@@ -148,6 +148,41 @@ export function sizeStyle(size: TextSize, leading?: "tight" | "snug") {
   return { fontSize, lineHeight: leading ? fontSize * LEADING[leading] : lineHeight };
 }
 
+/** Tailwind `tracking-tight`, in em. */
+const TRACKING = { tight: -0.025 } as const;
+
+/**
+ * Letter spacing of a `tracking-*` class at `fontSize`, as a style in points.
+ * React Native has no `em`: `tracking-tight` (-0.025em) at 20 is -0.5.
+ */
+export function trackingStyle(fontSize: number, tracking: keyof typeof TRACKING) {
+  return { letterSpacing: fontSize * TRACKING[tracking] };
+}
+
+/**
+ * The web page title, `text-xl font-semibold leading-tight tracking-tight` on
+ * the `Breadcrumb` nav (`breadcrumb.tsx`), with the Instrument Sans semibold
+ * face for `font-semibold`. `PageTitle` sets `pageTitleStyle()` beside it.
+ */
+export const PAGE_TITLE_CLASS = "font-instrument-sans-semibold text-xl leading-tight tracking-tight";
+
+/**
+ * `PAGE_TITLE_CLASS` as a style: Instrument Sans 600 at 20 / 25 with -0.5
+ * letter spacing. On Android and Expo web the face class alone can draw
+ * Regular (see `typeStyle`).
+ */
+export function pageTitleStyle() {
+  const size = sizeStyle("text-xl", "tight");
+  return { ...size, ...typeStyle("semibold"), ...trackingStyle(size.fontSize, "tight") };
+}
+
+/**
+ * Height of the `PageHeader` row below the top inset, in points. A minimum,
+ * so the title sits at the same height with or without an action, and still
+ * grows with the system font size. Native only: the web title has no row.
+ */
+export const PAGE_HEADER_HEIGHT = 56;
+
 /**
  * The web `COMPACT_OVERLAY_QUERY`, `(max-width: 639px), (max-height: 500px)`:
  * phones, and short landscape windows such as 844 × 390.

package/src/entries/layout.ts

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

package/src/entries/page-title.ts

@@ -0,0 +1,4 @@
+// `@vvedantb/native-ui/page-title`: `PageTitle` and `PageHeader` on their own.
+// Reaches no optional peer, not even a loader.
+export { PageTitle, PageHeader } from "../PageTitle";
+export type { PageTitleProps, PageHeaderProps } from "../PageTitle";

package/src/examples/ParityGallery.tsx

@@ -47,6 +47,8 @@ import {
   Label,
   LabeledSwitchRow,
   NativeUiProvider,
+  PageHeader,
+  PageTitle,
   PricingModal,
   Progress,
   SearchInput,
@@ -187,6 +189,21 @@ function GalleryScreen() {
         contentContainerClassName="gap-8 px-4 pt-4"
         contentContainerStyle={{ paddingBottom: GALLERY_END_SPACE }}
       >
+        <Section title="Page title">
+          <PageTitle>Updates</PageTitle>
+          {/* `safeTop={false}` and `px-0`: here the header is not at the top of the screen, and the scroll view pads the sides. */}
+          <PageHeader
+            title="Apps"
+            safeTop={false}
+            className="px-0"
+            action={
+              <Button variant="ghost" size="sm" fullWidth={false} onPress={() => toast("Updating all apps")}>
+                Update all
+              </Button>
+            }
+          />
+        </Section>
+
         <Section title="Brand">
           {(["vibot", "verve", "velth", "vmem", "vhub"] as const).map((app) => (
             <AppWordmark key={app} app={app} />

package/src/index.ts

@@ -137,6 +137,8 @@ export { DateTimeField } 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 { SettingsSection } from "./settings/SettingsSection";
 export { SettingsField } from "./settings/SettingsField";
 export { SettingsToggleRow } from "./settings/SettingsToggleRow";

package/src/primitives/button.tsx

@@ -47,7 +47,9 @@ const buttonVariants = cva(
   },
 );
 
-const buttonTextVariants = cva("text-sm font-medium text-foreground", {
+// No weight: a class context cannot carry the `typeStyle` that a face class
+// needs, so `Button` sets the medium face and its weight on its label.
+const buttonTextVariants = cva("text-sm text-foreground", {
   variants: {
     variant: {
       default: "text-primary-foreground",

package/src/primitives/card.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { View } from "react-native";
 import { Text, TextClassContext } from "./text";
 import { cn } from "../cn";
+import { typeStyle } from "../controlStyles";
 
 type CardViewProps = React.ComponentPropsWithoutRef<typeof View> & {
   className?: string;
@@ -40,13 +41,15 @@ const CardHeader = React.forwardRef<
 const CardTitle = React.forwardRef<
   React.ElementRef<typeof Text>,
   React.ComponentPropsWithoutRef<typeof Text> & { className?: string }
->(({ className, ...props }, ref) => {
+>(({ className, style, ...props }, ref) => {
+  // The web `font-semibold`: the semibold face, with its weight as a style.
   return (
     <Text
       ref={ref}
       role="heading"
       aria-level={3}
-      className={cn("font-semibold leading-none", className)}
+      className={cn("font-instrument-sans-semibold leading-none", className)}
+      style={[typeStyle("semibold"), style]}
       {...props}
     />
   );

package/src/primitives/icon.tsx

@@ -1,8 +1,10 @@
 import * as React from "react";
-import type { LucideIcon, LucideProps } from "lucide-react-native";
+import type { IconProps as TablerIconProps } from "@tabler/icons-react-native";
 
-type IconProps = LucideProps & {
-  as: LucideIcon;
+// Tabler, not Lucide: a Lucide icon always sets `testID` on its `Svg`, which
+// on web is a DOM `<svg>`, so React logs it as an unknown DOM prop.
+type IconProps = TablerIconProps & {
+  as: React.ComponentType<TablerIconProps>;
   className?: string;
 };
 

package/src/primitives/select.tsx

@@ -1,10 +1,7 @@
 import * as SelectPrimitive from "@rn-primitives/select";
-import {
-  Check,
-  ChevronDown,
-  ChevronDownIcon,
-  ChevronUpIcon,
-} from "lucide-react-native";
+// Tabler, not Lucide: a Lucide icon always sets `testID` on its `Svg`, which
+// on web is a DOM `<svg>`, so React logs it as an unknown DOM prop.
+import { IconCheck, IconChevronDown, IconChevronUp } from "@tabler/icons-react-native";
 import * as React from "react";
 import { Platform, ScrollView, StyleSheet, Text, View } from "react-native";
 import { FadeIn, FadeOut } from "react-native-reanimated";
@@ -72,7 +69,7 @@ const SelectTrigger = React.forwardRef<
       {...props}
     >
       <>{children}</>
-      <ChevronDown size={16} color={tokens.color.muted[scheme]} />
+      <IconChevronDown size={16} color={tokens.color.muted[scheme]} />
     </SelectPrimitive.Trigger>
   );
 });
@@ -153,6 +150,11 @@ const SelectLabel = React.forwardRef<
   );
 });
 
+/**
+ * On web `SelectPrimitive.Item` passes these props to a Radix DOM node, not a
+ * React Native view, so give it `aria-label` and `data-testid` there, not
+ * `accessibilityLabel` or `testID` (`selectItemA11yProps`).
+ */
 type SelectItemProps = React.ComponentPropsWithoutRef<
   typeof SelectPrimitive.Item
 > & {
@@ -177,7 +179,7 @@ const SelectItem = React.forwardRef<
     >
       <View className="absolute right-2 size-3.5 items-center justify-center">
         <SelectPrimitive.ItemIndicator>
-          <Check size={16} color={tokens.color.muted[scheme]} />
+          <IconCheck size={16} color={tokens.color.muted[scheme]} />
         </SelectPrimitive.ItemIndicator>
       </View>
       <SelectPrimitive.ItemText
@@ -220,7 +222,7 @@ function SelectScrollUpButton(
       className="items-center justify-center py-1"
       {...props}
     >
-      <ChevronUpIcon size={16} color="#737373" />
+      <IconChevronUp size={16} color="#737373" />
     </SelectPrimitive.ScrollUpButton>
   );
 }
@@ -239,7 +241,7 @@ function SelectScrollDownButton(
       className="items-center justify-center py-1"
       {...props}
     >
-      <ChevronDownIcon size={16} color="#737373" />
+      <IconChevronDown size={16} color="#737373" />
     </SelectPrimitive.ScrollDownButton>
   );
 }

package/src/primitives/text.tsx

@@ -3,6 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { Platform, Text as RNText, type Role } from "react-native";
 import { cn } from "../cn";
+import { typeStyle } from "../controlStyles";
 
 const textVariants = cva(
   cn(
@@ -16,27 +17,27 @@ const textVariants = cva(
       variant: {
         default: "",
         h1: cn(
-          "text-4xl font-extrabold tracking-tight",
+          "text-4xl font-instrument-sans-semibold tracking-tight",
           Platform.select({ web: "scroll-m-20" }),
         ),
         h2: cn(
-          "text-3xl font-semibold tracking-tight border-border border-b pb-2",
+          "text-3xl font-instrument-sans-semibold tracking-tight border-border border-b pb-2",
           Platform.select({ web: "scroll-m-20" }),
         ),
         h3: cn(
-          "text-2xl font-semibold tracking-tight",
+          "text-2xl font-instrument-sans-semibold tracking-tight",
           Platform.select({ web: "scroll-m-20" }),
         ),
         h4: cn(
-          "text-xl font-semibold tracking-tight",
+          "text-xl font-instrument-sans-semibold tracking-tight",
           Platform.select({ web: "scroll-m-20" }),
         ),
         p: "leading-7",
         blockquote: "border-l-2 border-border pl-4 italic",
-        code: "bg-muted rounded px-[0.3rem] py-[0.2rem] text-sm font-semibold",
+        code: "bg-muted rounded px-[0.3rem] py-[0.2rem] text-sm font-instrument-sans-semibold",
         lead: "text-xl text-muted-foreground",
-        large: "text-lg font-semibold",
-        small: "text-sm font-medium",
+        large: "text-lg font-instrument-sans-semibold",
+        small: "text-sm font-instrument-sans-medium",
         muted: "text-sm text-muted-foreground",
       },
     },
@@ -65,6 +66,20 @@ const ARIA_LEVEL: Partial<Record<TextVariant, string>> = {
   h4: "4",
 };
 
+// The weight of each variant's `font-instrument-sans-*` class, set as a style
+// beside it (`typeStyle`): where an app maps every one of those classes to one
+// family, the class alone draws Regular. Headings are semibold, as the web
+// titles; `h1` was `font-extrabold` before 0.3.13.
+const WEIGHT: Partial<Record<TextVariant, ReturnType<typeof typeStyle>>> = {
+  h1: typeStyle("semibold"),
+  h2: typeStyle("semibold"),
+  h3: typeStyle("semibold"),
+  h4: typeStyle("semibold"),
+  code: typeStyle("semibold"),
+  large: typeStyle("semibold"),
+  small: typeStyle("medium"),
+};
+
 const TextClassContext = React.createContext<string | undefined>(undefined);
 
 type TextProps = React.ComponentPropsWithoutRef<typeof RNText> &
@@ -74,9 +89,10 @@ type TextProps = React.ComponentPropsWithoutRef<typeof RNText> &
   };
 
 const Text = React.forwardRef<React.ElementRef<typeof RNText>, TextProps>(
-  ({ className, asChild = false, variant = "default", ...props }, ref) => {
+  ({ className, asChild = false, variant = "default", style, ...props }, ref) => {
     const textClass = React.useContext(TextClassContext);
     const Component = asChild ? Slot.Text : RNText;
+    const weight = variant ? WEIGHT[variant] : undefined;
 
     return (
       <Component
@@ -84,6 +100,7 @@ const Text = React.forwardRef<React.ElementRef<typeof RNText>, TextProps>(
         className={cn(textVariants({ variant }), textClass, className)}
         role={variant ? ROLE[variant] : undefined}
         aria-level={variant ? ARIA_LEVEL[variant] : undefined}
+        style={weight ? [weight, style] : style}
         {...props}
       />
     );

package/src/selectA11y.ts

@@ -0,0 +1,26 @@
+/**
+ * Accessibility and test props for a `Select` option. On web
+ * `@rn-primitives/select` passes the props of its `Item` through a `Slot` to
+ * the Radix `Select.Item`, a DOM `<div>`. React Native Web never sees them, so
+ * React logs `accessibilityLabel` and `testID` there as unknown DOM props. Web
+ * gets `aria-label` and `data-testid`; iOS and Android keep the native props.
+ * No React Native import, so the tests can load this file.
+ */
+
+export type SelectItemA11yProps =
+  | { "aria-label": string; "data-testid"?: string }
+  | { accessibilityLabel: string; testID?: string };
+
+/**
+ * Spread on the `SelectItem`. Pass `Platform.OS` as `os`. Without `testID` the
+ * result has no test id key, not one set to `undefined`.
+ */
+export function selectItemA11yProps(
+  { label, testID }: { label: string; testID?: string },
+  os: string,
+): SelectItemA11yProps {
+  if (os === "web") {
+    return testID === undefined ? { "aria-label": label } : { "aria-label": label, "data-testid": testID };
+  }
+  return testID === undefined ? { accessibilityLabel: label } : { accessibilityLabel: label, testID };
+}

package/src/svgA11y.ts

@@ -0,0 +1,43 @@
+/**
+ * Accessibility and test props for a `react-native-svg` `Svg`. React Native
+ * Web maps `accessible`, the `accessibility*` props and `testID` on `View`
+ * and `Text`, but on web `Svg` is a DOM `<svg>` that takes its props as they
+ * are, so React logs each one as an unknown DOM prop. Web gets ARIA and
+ * `data-testid`; iOS and Android keep the native props. No React Native
+ * import, so the tests can load this file.
+ */
+
+export type SvgA11yProps =
+  | { role: "img"; "aria-label": string; "data-testid"?: string }
+  | { "aria-hidden": true; "data-testid"?: string }
+  | { accessible: true; accessibilityRole: "image"; accessibilityLabel: string; testID?: string }
+  | {
+      accessible: false;
+      accessibilityElementsHidden: true;
+      importantForAccessibility: "no-hide-descendants";
+      testID?: string;
+    };
+
+/**
+ * Spread on the `Svg`. With `title` it is an image with that name; without it,
+ * it is hidden from assistive tech. Pass `Platform.OS` as `os`. Without
+ * `testID` the result has no test id key, not one set to `undefined`.
+ */
+export function svgA11yProps(
+  { title, testID }: { title?: string; testID?: string },
+  os: string,
+): SvgA11yProps {
+  if (os === "web") {
+    const id = testID === undefined ? {} : { "data-testid": testID };
+    return title ? { role: "img", "aria-label": title, ...id } : { "aria-hidden": true, ...id };
+  }
+  const id = testID === undefined ? {} : { testID };
+  return title
+    ? { accessible: true, accessibilityRole: "image", accessibilityLabel: title, ...id }
+    : {
+        accessible: false,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        ...id,
+      };
+}