Typography

export function Typefaces() {    return (        <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-2">            <div className="flex min-w-0 flex-col gap-4 rounded-xl bg-card p-4 shadow-border">                <div className="flex items-baseline justify-between gap-3">                    <p className="text-sm font-semibold text-foreground">                        Geist Sans                    </p>                    <p className="text-xs text-muted-foreground">                        Everything a person reads                    </p>                </div>                <p                    aria-hidden="true"                    className="text-[4.5rem] leading-none font-semibold tracking-[-0.03em] text-foreground"                >                    Aa                </p>                <div className="flex flex-col gap-1 rounded-[10px] bg-muted/70 px-3 py-2">                    <p className="text-13 text-foreground">                        ABCDEFGHIJKLMNOPQRSTUVWXYZ                    </p>                    <p className="text-13 text-foreground">                        abcdefghijklmnopqrstuvwxyz                    </p>                    <p className="text-13 text-foreground tabular-nums">                        0123456789 $12,480.00 92%                    </p>                </div>                <p className="text-13 text-pretty text-muted-foreground">                    Halcyon approved the October remittance for 48 suppliers.                </p>            </div>            <div className="flex min-w-0 flex-col gap-4 rounded-xl bg-card p-4 shadow-border">                <div className="flex items-baseline justify-between gap-3">                    <p className="text-sm font-semibold text-foreground">                        Geist Mono                    </p>                    <p className="text-xs text-muted-foreground">                        What a machine wrote                    </p>                </div>                <p                    aria-hidden="true"                    className="font-mono text-[4.5rem] leading-none font-medium tracking-[-0.04em] text-foreground"                >                    Aa                </p>                <div className="flex flex-col gap-1 rounded-[10px] bg-muted/70 px-3 py-2">                    <p className="truncate font-mono text-xs leading-5 text-foreground">                        inv_8F3K2QW7                    </p>                    <p className="truncate font-mono text-xs leading-5 text-foreground">                        {"{{supplier_name}}"}                    </p>                    <p className="truncate font-mono text-xs leading-5 text-foreground">                        +14155550123                    </p>                </div>                <p className="text-13 text-pretty text-muted-foreground">                    Record and run IDs, keys, variables and timecodes.                </p>            </div>        </div>    );}

import { SegmentedControl } from "@oration/canon/components/segmented-control";import { cn } from "@oration/canon/lib/utils";import * as React from "react";export function TabularFigures() {    const [figures, setFigures] = React.useState<"tabular" | "proportional">(        "proportional",    );    const [credits, setCredits] = React.useState(1204);    React.useEffect(() => {        const timer = window.setInterval(() => {            setCredits((value) =>                value <= 1040                    ? 1204                    : value - 1 - Math.floor(Math.random() * 9),            );        }, 600);        return () => window.clearInterval(timer);    }, []);    const total = payees.reduce((sum, payee) => sum + payee.amount, 0);    const nums = figures === "tabular" ? "tabular-nums" : "proportional-nums";    return (        <div className="flex w-full max-w-md flex-col items-center gap-4">            <SegmentedControl                label="Figure style"                value={figures}                onValueChange={setFigures}                options={[                    { value: "proportional", label: "Proportional" },                    { value: "tabular", label: "Tabular" },                ]}            />            <div className="flex w-full flex-col overflow-hidden rounded-xl bg-card shadow-border">                <div className="flex items-center justify-between gap-3 border-b border-border px-4 py-3">                    <p className="text-sm font-semibold text-foreground">                        Friday payment run                    </p>                    <p className="text-13 text-muted-foreground">                        Credits left{" "}                        <span                            className={cn("font-medium text-foreground", nums)}                        >                            {credits.toLocaleString("en-US")}                        </span>                    </p>                </div>                <table className="w-full text-13">                    <caption className="sr-only">                        Payees in the Friday payment run                    </caption>                    <thead>                        <tr className="border-b border-border">                            <th                                scope="col"                                className="h-8 px-4 text-left text-xs font-medium text-muted-foreground"                            >                                Supplier                            </th>                            <th                                scope="col"                                className="h-8 px-4 text-right text-xs font-medium text-muted-foreground"                            >                                Amount                            </th>                        </tr>                    </thead>                    <tbody>                        {payees.map((payee) => (                            <tr                                key={payee.supplier}                                className="border-b border-border"                            >                                <td className="h-9 px-4 text-foreground">                                    {payee.supplier}                                </td>                                <td                                    className={cn(                                        "h-9 px-4 text-right text-foreground",                                        nums,                                    )}                                >                                    {usd.format(payee.amount)}                                </td>                            </tr>                        ))}                    </tbody>                    <tfoot>                        <tr>                            <td className="h-9 px-4 text-xs text-muted-foreground">                                Total                            </td>                            <td                                className={cn(                                    "h-9 px-4 text-right font-medium text-foreground",                                    nums,                                )}                            >                                {usd.format(total)}                            </td>                        </tr>                    </tfoot>                </table>            </div>        </div>    );}

import { SegmentedControl } from "@oration/canon/components/segmented-control";import { cn } from "@oration/canon/lib/utils";import * as React from "react";export function Wrapping() {    const [wrap, setWrap] = React.useState<"canon" | "browser">("browser");    const canon = wrap === "canon";    return (        <div className="flex w-full flex-col items-center gap-4">            <SegmentedControl                label="Text wrapping"                value={wrap}                onValueChange={setWrap}                options={[                    { value: "browser", label: "Browser default" },                    { value: "canon", label: "Balance and pretty" },                ]}            />            <div className="flex w-full max-w-[21rem] flex-col gap-1.5 rounded-xl bg-card p-4 shadow-border">                <p                    className={cn(                        "text-sm font-semibold text-foreground",                        canon ? "text-balance" : "text-wrap",                    )}                >                    Approve 14 invoices from Northwind Freight before Friday                </p>                <p                    className={cn(                        "text-13 text-muted-foreground",                        canon ? "text-pretty" : "text-wrap",                    )}                >                    Nora matched each one to a purchase order and a receipt. Two                    are above the supplier's usual amount.                </p>            </div>        </div>    );}

import { SegmentedControl } from "@oration/canon/components/segmented-control";import { cn } from "@oration/canon/lib/utils";import * as React from "react";export function Truncation() {    const [mode, setMode] = React.useState<"truncate" | "clamp" | "wrap">(        "truncate",    );    return (        <div className="flex w-full flex-col items-center gap-4">            <SegmentedControl                label="Overflow treatment"                value={mode}                onValueChange={setMode}                options={[                    { value: "truncate", label: "Truncate" },                    { value: "clamp", label: "Clamp to 2 lines" },                    { value: "wrap", label: "Wrap" },                ]}            />            <ul className="flex w-full max-w-[22rem] flex-col rounded-xl bg-card p-2 shadow-border">                {suppliers.map((supplier) => (                    <li                        key={supplier.name}                        className="flex min-w-0 flex-col gap-0.5 rounded-md px-2 py-2 hover:bg-muted"                    >                        <span                            title={                                mode === "truncate" ? supplier.name : undefined                            }                            className={cn(                                "text-13 font-medium text-foreground",                                mode === "truncate" && "truncate",                            )}                        >                            {supplier.name}                        </span>                        <span                            className={cn(                                "text-xs text-muted-foreground",                                mode === "truncate" && "truncate",                                mode === "clamp" && "line-clamp-2",                            )}                        >                            {supplier.memo}                        </span>                    </li>                ))}            </ul>        </div>    );}

export function HeadingOutline() {    return (        <div className="flex w-full max-w-lg flex-col gap-4">            <div className="flex items-baseline gap-3">                <code className="w-6 shrink-0 font-mono text-xs text-muted-foreground">                    h1                </code>                <p className="text-xl font-semibold tracking-[-0.015em] text-foreground">                    Northwind Freight                </p>            </div>            <div className="flex flex-col gap-3 rounded-xl bg-card p-4 shadow-border">                <div className="flex items-baseline gap-3">                    <code className="w-6 shrink-0 font-mono text-xs text-muted-foreground">                        h2                    </code>                    <div className="flex min-w-0 flex-1 items-baseline justify-between gap-3">                        <p className="text-sm font-semibold text-foreground">                            Open invoices                        </p>                        <span className="text-xs text-muted-foreground">                            View all                        </span>                    </div>                </div>                <div className="flex flex-col gap-1.5 rounded-[10px] bg-muted/70 px-3 py-2">                    <div className="flex items-baseline gap-3">                        <code className="w-6 shrink-0 font-mono text-xs text-muted-foreground">                            h3                        </code>                        <p className="text-13 font-medium text-foreground">                            Due this week                        </p>                    </div>                    <p className="pl-9 text-13 text-muted-foreground tabular-nums">                        3 invoices, $24,112.40                    </p>                </div>            </div>        </div>    );}