@vvedantb/native-ui 0.3.12 → 0.3.13

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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/native-ui",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "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/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/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}
       />
     );