@rinzai/zen 0.13.0 → 0.15.0

package/dist/docs/money-input.md

@@ -0,0 +1,169 @@
+# Money Input
+
+Amounts in any currency and locale, with shorthand like 1.5L or 10k and sums like 120+45.50, exact to the paisa, and typed in other currencies, converted at your rates. Built on Input Group.
+
+```tsx
+import { MoneyInput, MoneyCurrencyMenu, MoneyConversionHint } from '@rinzai/zen';
+```
+
+## Examples
+
+### Default
+
+```tsx
+import { formatMoney, MoneyInput } from '@rinzai/zen';
+import { useState } from 'react';
+
+/** Try 1.5L, 2cr, 10k or 1,52,000. Commits on blur or Enter; Escape reverts. */
+export default function Default() {
+    const [amount, setAmount] = useState<number | null>(15200000);
+    return (
+        <div className="flex w-64 flex-col gap-2">
+            <MoneyInput aria-label="Amount" value={amount} onValueChange={setAmount} currency="INR" locale="en-IN" />
+            <p className="text-muted-foreground mt-0! text-xs">
+                Value: {amount === null ? 'empty' : `${amount} paise (${formatMoney(amount, 'INR', 'en-IN')})`}
+            </p>
+        </div>
+    );
+}
+```
+
+### Dollars
+
+```tsx
+import { MoneyInput } from '@rinzai/zen';
+import { useState } from 'react';
+
+/** Any currency and locale; `allowEmpty` makes an empty field mean null. */
+export default function Dollars() {
+    const [amount, setAmount] = useState<number | null>(null);
+    return (
+        <MoneyInput
+            aria-label="Budget"
+            value={amount}
+            onValueChange={setAmount}
+            currency="USD"
+            locale="en-US"
+            allowEmpty
+            className="w-64"
+        />
+    );
+}
+```
+
+### Convert
+
+```tsx
+import { type ForeignAmount, formatMoney, MoneyInput, type RateTable } from '@rinzai/zen';
+import { useState } from 'react';
+
+// Your app fetches these (e.g. the ECB's daily rates, from your server); here, a fixed sample.
+const SAMPLE: RateTable = {
+    base: 'EUR',
+    date: '2026-09-29',
+    rates: { INR: 98.4, USD: 1.17, GBP: 0.87, AED: 4.3, SGD: 1.5, JPY: 172.6 },
+};
+const loadRates = () => new Promise<RateTable>((done) => setTimeout(() => done(SAMPLE), 600));
+
+/** Pick another currency from the symbol and type in it: it's converted into rupees at the loaded rate, and the original is kept. */
+export default function Convert() {
+    const [amount, setAmount] = useState<number | null>(3274000);
+    const [original, setOriginal] = useState<ForeignAmount | null>(null);
+    return (
+        <div className="flex w-72 flex-col gap-2">
+            <MoneyInput
+                aria-label="Amount"
+                value={amount}
+                onValueChange={setAmount}
+                currency="INR"
+                locale="en-IN"
+                convert={{
+                    currencies: ['USD', 'EUR', 'GBP', 'AED', 'SGD', 'JPY'],
+                    loadRates,
+                    source: 'ECB',
+                    onForeign: setOriginal,
+                }}
+            />
+            <p className="text-muted-foreground mt-0! text-xs">
+                Saved: {amount === null ? 'empty' : formatMoney(amount, 'INR', 'en-IN')}
+                {original && `, typed as ${formatMoney(original.amount, original.currency, 'en-IN')}`}
+            </p>
+        </div>
+    );
+}
+```
+
+### Compact
+
+```tsx
+import { MoneyInput } from '@rinzai/zen';
+import { useState } from 'react';
+
+/** `compact`: shorter and right-aligned, for editing inside table rows. */
+export default function Compact() {
+    const [amount, setAmount] = useState<number | null>(1640000);
+    return (
+        <MoneyInput
+            compact
+            aria-label="Groceries"
+            value={amount}
+            onValueChange={setAmount}
+            currency="INR"
+            locale="en-IN"
+            className="w-36"
+        />
+    );
+}
+```
+
+## API reference
+
+### MoneyInput
+
+Amount input in one currency. Shows grouped digits for the locale (1,52,000
+for en-IN) and accepts shorthand: 1.5L, 2cr, 10k, 1.2m, and sums: 120+45.50,
+3*12.99. Commits on blur or Enter; Escape reverts. Values are integer minor
+units (paise, cents), or null when empty.
+
+With `convert`, the symbol becomes a currency switch: type an amount in e.g.
+USD and it's converted at the rates you load (in the browser; the amount is
+never sent anywhere). Replace the symbol with `start`, or build your own field
+from useMoneyInput, MoneyCurrencyMenu and MoneyConversionHint.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `currency` (required) | `string` |  | ISO 4217 code, e.g. "INR", "USD". |
+| `allowEmpty` | `boolean` |  |  |
+| `allowNegative` | `boolean` |  |  |
+| `compact` | `boolean` | `false` | Smaller still and right-aligned, for editing inside table rows. |
+| `convert` | `CurrencyConversion` |  | Let people type in another currency, converted at the rates you load. |
+| `defaultValue` | `number \| null` |  | The first amount, when the field keeps its own. |
+| `end` | `ReactNode` |  | Content after the input, e.g. a unit or a clear button. |
+| `live` | `boolean` |  | For forms: report the amount (converted, when typed in another currency) on every keystroke instead of on blur, so a Save button can never miss it. Invalid text reports null. |
+| `locale` | `string` |  | Decides digit grouping and the symbol, e.g. "en-IN" (1,52,000) or "en-US" (152,000). Defaults to the LocaleProvider's. |
+| `onCancel` | `(() => void)` |  | Called on Escape, after reverting. |
+| `onValueChange` | `((value: number \| null) => void)` |  |  |
+| `size` | `"default" \| "lg" \| "sm"` |  | Height, matching Button's: sm (32px), default (40px) or lg (44px). |
+| `start` | `ReactNode` |  | Replaces the currency symbol (or the currency switch), e.g. with your own. |
+| `value` | `number \| null` |  | Amount in minor units (paise, cents), or null when empty, when you keep it. |
+
+### MoneyCurrencyMenu
+
+The currency switch for a converting field (`convert`): shows the symbol, or
+the code of the foreign currency being typed in, and opens a menu of your
+currency and the ones with a rate. Put it in an InputGroup's start slot.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `money` (required) | `{ inputProps: { readonly type: "text"; readonly inputMode: "decimal"; readonly autoComplete: "off"; readonly spellCheck: false; readonly value: string; readonly 'aria-invalid': true \| undefined; ... 4 more ...; readonly onKeyDown: (e: KeyboardEvent<...>) => void; }; ... 10 more ...; conversion: { ...; } \| null; }` |  |  |
+| `className` | `string` |  |  |
+
+### MoneyConversionHint
+
+The line under a converting field: getting the rate, the rate and what the
+typed amount comes to, or what the last amount was converted from.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `money` (required) | `{ inputProps: { readonly type: "text"; readonly inputMode: "decimal"; readonly autoComplete: "off"; readonly spellCheck: false; readonly value: string; readonly 'aria-invalid': true \| undefined; ... 4 more ...; readonly onKeyDown: (e: KeyboardEvent<...>) => void; }; ... 10 more ...; conversion: { ...; } \| null; }` |  |  |
+| `className` | `string` |  |  |

package/dist/docs/month-picker.md

@@ -0,0 +1,80 @@
+# Month Picker
+
+A field showing a month that opens a year and a 12-month grid, with optional limits and clearing.
+
+```tsx
+import { MonthPicker } from '@rinzai/zen';
+```
+
+## Examples
+
+### Default
+
+```tsx
+import { MonthPicker } from '@rinzai/zen';
+import { useState } from 'react';
+
+export default function Default() {
+    const [month, setMonth] = useState<string | null>('2026-09');
+    return <MonthPicker aria-label="Month" value={month} onValueChange={setMonth} locale="en-IN" className="w-48" />;
+}
+```
+
+### Range
+
+```tsx
+import { addMonths, MonthPicker } from '@rinzai/zen';
+import { useState } from 'react';
+
+/** A start and an optional end: the end can't come before the start, and can be cleared. */
+export default function Range() {
+    const [start, setStart] = useState<string | null>('2026-10');
+    const [end, setEnd] = useState<string | null>('2027-09');
+    return (
+        <div className="flex items-end gap-3">
+            <label className="flex flex-col gap-2 text-sm font-medium">
+                Starts
+                <MonthPicker value={start} onValueChange={setStart} locale="en-US" className="w-40" />
+            </label>
+            <label className="flex flex-col gap-2 text-sm font-medium">
+                Ends
+                <MonthPicker
+                    value={end}
+                    onValueChange={setEnd}
+                    locale="en-US"
+                    min={start ? addMonths(start, 1) : undefined}
+                    placeholder="No end"
+                    clearable
+                    clearLabel="No end"
+                    className="w-40"
+                />
+            </label>
+        </div>
+    );
+}
+```
+
+## API reference
+
+### MonthPicker
+
+Month selector: a field showing "Sep 2026" that opens a year and a 12-month
+grid. Months are "YYYY-MM" strings. When `clearable`, the popup also offers
+`clearLabel` (e.g. "No end") to empty it. With `name`, it's submitted with a form.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className` | `string` |  | Classes for the trigger (e.g. a width, instead of the default full width). |
+| `clearable` | `boolean` | `false` | Offers a clear option in the popup (shown when a month is set); clearing reports null. |
+| `clearLabel` | `string` |  |  |
+| `defaultValue` | `string \| null` | `null` | The first month, when the picker keeps its own. |
+| `disabled` | `boolean` | `false` |  |
+| `id` | `string` |  |  |
+| `locale` | `string` |  | Decides month names and format, e.g. "en-IN". Defaults to the LocaleProvider's. |
+| `max` | `string` |  | Latest month that can be picked. |
+| `min` | `string` |  | Earliest month that can be picked ("YYYY-MM"). |
+| `name` | `string` |  | Form field name: the month ("YYYY-MM") is submitted with the form. |
+| `onValueChange` | `((month: string \| null) => void)` |  |  |
+| `placeholder` | `string` |  |  |
+| `size` | `"default" \| "lg" \| "sm"` | `default` | Height, matching Button's: sm (32px), default (40px) or lg (44px). |
+| `value` | `string \| null` |  | "YYYY-MM", or null for none, when you keep it. |

package/dist/docs/navigation-menu.md

@@ -0,0 +1,157 @@
+# Navigation Menu
+
+A site’s navigation: links, and labels that open glass panels of links on hover or click, switching at once between them; works with any router.
+
+```tsx
+import { NavigationMenu, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@rinzai/zen';
+```
+
+## Examples
+
+### Default
+
+```tsx
+import {
+    NavigationMenu,
+    NavigationMenuContent,
+    NavigationMenuItem,
+    NavigationMenuLink,
+    NavigationMenuTrigger,
+} from '@rinzai/zen';
+
+/**
+ * A site's top navigation: rest the pointer on Plan or Reports (or click, or
+ * Tab to one and press Enter) for its panel; once one is open, moving to the
+ * other switches at once.
+ */
+export default function Default() {
+    return (
+        <NavigationMenu aria-label="Site">
+            <NavigationMenuItem>
+                <NavigationMenuLink href="#overview" active>
+                    Overview
+                </NavigationMenuLink>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+                <NavigationMenuTrigger>Plan</NavigationMenuTrigger>
+                <NavigationMenuContent className="grid w-[26rem] grid-cols-2 gap-1">
+                    <NavigationMenuLink href="#budgets" description="Limits for each category, month by month.">
+                        Budgets
+                    </NavigationMenuLink>
+                    <NavigationMenuLink href="#goals" description="Savings with a target and a date.">
+                        Goals
+                    </NavigationMenuLink>
+                    <NavigationMenuLink href="#bills" description="What's due, and when it repeats.">
+                        Bills
+                    </NavigationMenuLink>
+                    <NavigationMenuLink href="#planner" description="The year ahead, item by item.">
+                        Planner
+                    </NavigationMenuLink>
+                </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+                <NavigationMenuTrigger>Reports</NavigationMenuTrigger>
+                <NavigationMenuContent className="flex w-60 flex-col">
+                    <NavigationMenuLink href="#spending">Spending</NavigationMenuLink>
+                    <NavigationMenuLink href="#income">Income</NavigationMenuLink>
+                    <NavigationMenuLink href="#net-worth">Net worth</NavigationMenuLink>
+                </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+                <NavigationMenuLink href="#help">Help</NavigationMenuLink>
+            </NavigationMenuItem>
+        </NavigationMenu>
+    );
+}
+```
+
+### Router
+
+```tsx
+import {
+    NavigationMenu,
+    NavigationMenuContent,
+    NavigationMenuItem,
+    NavigationMenuLink,
+    NavigationMenuTrigger,
+} from '@rinzai/zen';
+import { useState } from 'react';
+
+const ACCOUNTS = ['Everyday', 'Savings', 'Credit card'];
+
+/**
+ * With your router: `asChild` puts each link's look and wiring on your own
+ * Link (a button stands in for one here), and `active` follows the page.
+ */
+export default function Router() {
+    const [page, setPage] = useState('Everyday');
+    return (
+        <div className="flex flex-col items-center gap-4">
+            <NavigationMenu aria-label="Accounts">
+                <NavigationMenuItem>
+                    <NavigationMenuTrigger>Accounts</NavigationMenuTrigger>
+                    <NavigationMenuContent className="flex w-48 flex-col">
+                        {ACCOUNTS.map((name) => (
+                            <NavigationMenuLink key={name} asChild active={page === name}>
+                                <button type="button" className="text-start" onClick={() => setPage(name)}>
+                                    {name}
+                                </button>
+                            </NavigationMenuLink>
+                        ))}
+                    </NavigationMenuContent>
+                </NavigationMenuItem>
+            </NavigationMenu>
+            <p className="text-muted-foreground mt-0! text-sm">Showing {page}</p>
+        </div>
+    );
+}
+```
+
+## API reference
+
+### NavigationMenu
+
+A site's navigation: links, and labels that open panels of links below
+them, on hover (after `openDelay`; at once while another is open) or with a
+click or Enter. Escape, a click outside or Tab moving on closes it. Fill it
+with NavigationMenuItems, each a NavigationMenuLink, or a
+NavigationMenuTrigger and a NavigationMenuContent. Name it with
+`aria-label` when there's more than one nav on the page.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `closeDelay` | `number` | `200` | How long a panel opened by the pointer stays after it leaves, in ms (time to reach the panel). |
+| `openDelay` | `number` | `150` | How long the pointer rests on a label before its panel opens, in ms. |
+
+### NavigationMenuItem
+
+One place in the menu: a link, or a label with its panel.
+
+No props of its own; it accepts the props of the element it renders.
+
+### NavigationMenuTrigger
+
+The label that opens its item's panel; a chevron after it turns over while it's open.
+
+No props of its own; it accepts the props of the element it renders.
+
+### NavigationMenuContent
+
+The panel: glass, below its label (above it if there's no room), lined up with its start. Lay out its links as you like.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `align` | `"center" \| "end" \| "start"` | `start` |  |
+| `offset` | `number` | `8` | Gap below the label, in px. |
+
+### NavigationMenuLink
+
+A link: one of the bar's labels at the top, or a row in a panel (with an
+optional `description` under its text). `active` marks the page you're on.
+With `asChild`, your router's link instead of an `<a>`.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `active` | `boolean` |  | The page it leads to is the one you're on. |
+| `asChild` | `boolean` |  | Put its props on your own link (the single child), e.g. a router's Link. |
+| `description` | `string` |  | In a panel, a line under the link's text. |

package/dist/docs/number-field.md

@@ -0,0 +1,129 @@
+# Number Field
+
+A number to type or step with − and +, the arrow keys and Page Up and Down: shown the locale’s way, as a percentage or a unit, and kept within bounds. Each change says whether it was a step (and by how much) or typed, and onValueCommit fires once it’s finished.
+
+```tsx
+import { NumberField } from '@rinzai/zen';
+```
+
+## Examples
+
+### Default
+
+```tsx
+import { Field, NumberField } from '@rinzai/zen';
+
+/** Type, use − and +, or ↑↓: kept between 1 and 12. */
+export default function Default() {
+    return (
+        <Field label="Split between" hint="People sharing the bill" className="w-56">
+            <NumberField defaultValue={2} min={1} max={12} />
+        </Field>
+    );
+}
+```
+
+### Formats
+
+```tsx
+import { Field, NumberField } from '@rinzai/zen';
+import { useState } from 'react';
+
+/** `formatOptions` shows it as a percentage, a unit or with set decimals, and reads it back typed that way. */
+export default function Formats() {
+    const [rate, setRate] = useState<number | null>(0.065);
+    return (
+        <div className="flex w-56 flex-col gap-4">
+            <Field label="Interest rate">
+                <NumberField
+                    value={rate}
+                    onValueChange={setRate}
+                    step={0.0025}
+                    min={0}
+                    max={0.3}
+                    formatOptions={{ style: 'percent', minimumFractionDigits: 2 }}
+                />
+            </Field>
+            <Field label="Distance">
+                <NumberField
+                    defaultValue={12.5}
+                    step={0.5}
+                    min={0}
+                    formatOptions={{ style: 'unit', unit: 'kilometer' }}
+                />
+            </Field>
+        </div>
+    );
+}
+```
+
+### Steps
+
+```tsx
+import { Field, NumberField } from '@rinzai/zen';
+import { useState } from 'react';
+
+const clamp = (n: number) => Math.min(10, Math.max(0, n));
+
+/**
+ * A count kept somewhere else, such as a server another device also changes.
+ * `onValueCommit` says how each change came about: − + and ↑↓ send their step
+ * (`delta`), added to whatever the count is by then; a typed number is sent
+ * once, on Enter or on leaving the field.
+ */
+export default function Steps() {
+    const [count, setCount] = useState(3);
+    const [sent, setSent] = useState<string | null>(null);
+    return (
+        <Field label="Episodes watched" hint={sent ? `Sent ${sent}` : 'Out of 10'} className="w-56">
+            <NumberField
+                value={count}
+                min={0}
+                max={10}
+                size="sm"
+                onValueCommit={(n, change) => {
+                    if (change.reason === 'step') {
+                        setCount((now) => clamp(now + change.delta));
+                        setSent(change.delta > 0 ? `+${change.delta}` : `−${-change.delta}`);
+                    } else {
+                        setCount(n ?? 0);
+                        setSent(String(n ?? 0));
+                    }
+                }}
+            />
+        </Field>
+    );
+}
+```
+
+## API reference
+
+### NumberField
+
+A number to type or step: − and + on either side, ↑↓ by `step`, Page Up and
+Page Down by `largeStep`, Home and End to `min` and `max`. Shown in the
+locale's way (`formatOptions`: a percentage, a unit, decimals) and read back
+from what's typed in it, digits, separators and all. Kept within `min` and
+`max` once you leave the field; empty is null.
+
+Each change says how it came about: `{ reason: 'step', delta }` for − +,
+↑↓ and Page Up/Down, `'input'` for typing, `'limit'` for Home and End. So a
+step can be sent on as a step, and the number kept by whoever owns it.
+`onValueCommit` fires once per finished change: each step, and what's typed
+on Enter or on leaving the field.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `defaultValue` | `number \| null` | `null` | The first number, when the field keeps its own. |
+| `formatOptions` | `NumberFormatOptions` |  | How it's shown, as for Intl.NumberFormat: { style: 'percent' }, { maximumFractionDigits: 2 }, a unit. |
+| `invalid` | `boolean` |  | Show the field in its error state. |
+| `largeStep` | `number` | `step * 10` | What Page Up and Page Down do. Default ten steps. |
+| `locale` | `string` |  | Defaults to the LocaleProvider's. |
+| `max` | `number` |  |  |
+| `min` | `number` |  |  |
+| `name` | `string` |  | Form field name: the number is submitted under it. |
+| `onValueChange` | `((value: number \| null, details: NumberFieldChange) => void)` |  | Every change, typing included; `details` says how it came about. |
+| `onValueCommit` | `((value: number \| null, details: NumberFieldChange) => void)` |  | Each finished change: a step, Home or End, or what's typed, on Enter or on leaving the field. |
+| `size` | `"default" \| "lg" \| "sm"` | `default` | Height, matching Button's. |
+| `step` | `number` | `1` | What ↑↓ and − + add or take away. Default 1. |
+| `value` | `number \| null` |  | The number, or null for empty, when you keep it. |

package/dist/docs/page-header.md

@@ -0,0 +1,44 @@
+# Page Header
+
+Eyebrow, aurora title and lead paragraph for the top of a page.
+
+```tsx
+import { PageHeader } from '@rinzai/zen';
+```
+
+## Examples
+
+### Default
+
+```tsx
+import { buttonVariants, PageHeader } from '@rinzai/zen';
+
+export default function Default() {
+    return (
+        <PageHeader eyebrow="Budget" title="Month overview" lead="Where your money went in September, and what's left.">
+            <div className="flex gap-3">
+                <a href="#add" className={buttonVariants()}>
+                    Add entry
+                </a>
+                <a href="#export" className={buttonVariants({ variant: 'outline' })}>
+                    Export
+                </a>
+            </div>
+        </PageHeader>
+    );
+}
+```
+
+## API reference
+
+### PageHeader
+
+Top of a page: a small eyebrow label, the title in the aurora gradient, and a lead paragraph.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` (required) | `ReactNode` |  |  |
+| `children` | `ReactNode` |  | Anything after the lead, e.g. a row of buttons. |
+| `className` | `string` |  |  |
+| `eyebrow` | `ReactNode` |  |  |
+| `lead` | `ReactNode` |  |  |

package/dist/docs/page-transition.md

@@ -0,0 +1,93 @@
+# Page Transition
+
+The old page fades out as the new one rises in, when your router changes page in a view transition.
+
+```tsx
+import { PageTransition } from '@rinzai/zen';
+```
+
+## Examples
+
+### Default
+
+```tsx
+import { PageTransition, Pill, PillIndicator, Pills, Stat, StatRow } from '@rinzai/zen';
+import { useState } from 'react';
+import { flushSync } from 'react-dom';
+
+const PAGES = {
+    overview: {
+        title: 'Overview',
+        stats: [
+            ['Net', '$2,410'],
+            ['Spent', '$1,845'],
+        ],
+    },
+    budgets: {
+        title: 'Budgets',
+        stats: [
+            ['On track', '4 of 5'],
+            ['Left', '$655'],
+        ],
+    },
+    goals: {
+        title: 'Goals',
+        stats: [
+            ['Saved', '$12,940'],
+            ['Next', 'Holiday'],
+        ],
+    },
+} as const;
+type Page = keyof typeof PAGES;
+
+/** A router does this for you (React Router: `viewTransition` on a Link); here, by hand. */
+export default function Default() {
+    const [page, setPage] = useState<Page>('overview');
+    const go = (next: Page) => {
+        if (!document.startViewTransition) return setPage(next);
+        document.startViewTransition(() => flushSync(() => setPage(next)));
+    };
+    return (
+        <div className="flex w-full max-w-md flex-col gap-4">
+            <nav aria-label="Pages">
+                <Pills>
+                    <PillIndicator />
+                    {(Object.keys(PAGES) as Page[]).map((p) => (
+                        <Pill
+                            key={p}
+                            href={`#${p}`}
+                            active={p === page}
+                            onClick={(e) => {
+                                e.preventDefault();
+                                go(p);
+                            }}
+                        >
+                            {PAGES[p].title}
+                        </Pill>
+                    ))}
+                </Pills>
+            </nav>
+            <PageTransition>
+                <h3 className="mb-3 text-lg font-semibold">{PAGES[page].title}</h3>
+                <StatRow className="sm:grid-cols-2!">
+                    {PAGES[page].stats.map(([label, value]) => (
+                        <Stat key={label} label={label} value={value} />
+                    ))}
+                </StatRow>
+            </PageTransition>
+        </div>
+    );
+}
+```
+
+## API reference
+
+### PageTransition
+
+The page's content, which changes between pages: wrap your route's outlet in
+it, and when the router changes page in a view transition (React Router's
+`viewTransition`, or document.startViewTransition yourself) the old page
+fades out as the new one rises in, while everything outside (header, nav)
+stays still. One per page.
+
+No props of its own; it accepts the props of the element it renders.