Color

import { Button } from "@oration/canon/components/button";import { Checkbox } from "@oration/canon/components/checkbox";import { FilterChip } from "@oration/canon/components/filter-chip";import { StatusLabel } from "@oration/canon/components/status-dot";import { Switch } from "@oration/canon/components/switch";import { toast } from "@oration/canon/components/toast";import { cn } from "@oration/canon/lib/utils";import { CalendarIcon } from "lucide-react";import * as React from "react";import { AnatomyMarker } from "@/components/design/kit/lists";export function IndigoMap() {    const invoices = [        {            id: "inv_8F3K2QW7",            supplier: "Northwind Freight",            amount: "$18,240.00",        },        { id: "inv_2J9D4MX1", supplier: "Halcyon", amount: "$12,940.50" },        { id: "inv_7Q1L8RZ3", supplier: "Orchard Street", amount: "$4,310.00" },    ];    const [selected, setSelected] = React.useState<Set<string>>(        () => new Set(["inv_8F3K2QW7", "inv_2J9D4MX1"]),    );    const [mark, setMark] = React.useState(true);    const [filtered, setFiltered] = React.useState(true);    const toggle = (id: string) =>        setSelected((current) => {            const next = new Set(current);            if (next.has(id)) next.delete(id);            else next.add(id);            return next;        });    const marker = (n: number, className: string) =>        mark ? (            <AnatomyMarker n={n} className={cn("absolute z-10", className)} />        ) : null;    return (        <div className="flex w-full max-w-lg flex-col gap-3">            <Switch                label="Number every indigo"                checked={mark}                onCheckedChange={setMark}            />            <div className="flex flex-col overflow-hidden rounded-xl bg-card shadow-border">                <div className="flex h-11 items-center justify-between gap-2 border-b border-border px-3">                    <div className="relative flex items-center gap-2">                        <span className="text-13 font-medium text-foreground">                            Payment run, Friday                        </span>                        <StatusLabel tone="primary" className="text-[13px]">                            Running                        </StatusLabel>                        {marker(1, "-top-3 right-0")}                    </div>                    <span className="relative flex items-center gap-1.5 text-xs text-muted-foreground">                        <span                            className="size-1.5 rounded-full bg-primary"                            aria-hidden="true"                        />                        2 unread                        {marker(2, "-top-3 -left-3")}                    </span>                </div>                <div className="relative flex min-h-11 items-center px-3 py-2">                    {filtered ? (                        <FilterChip                            icon={                                <CalendarIcon                                    aria-hidden="true"                                    className="size-3.5 text-muted-foreground"                                />                            }                            field="Due"                            valuesLabel="This week"                            multiple={false}                            onRemove={() => setFiltered(false)}                        />                    ) : (                        <Button                            type="button"                            variant="ghost"                            size="sm"                            onClick={() => setFiltered(true)}                        >                            Add filter                        </Button>                    )}                    {filtered ? marker(3, "top-0 left-1.5") : null}                </div>                <ul className="border-t border-border">                    {invoices.map((invoice, index) => {                        const isSelected = selected.has(invoice.id);                        return (                            <li                                key={invoice.id}                                className={cn(                                    "relative flex h-9 items-center gap-3 border-b border-border px-3 text-13 last:border-b-0",                                    isSelected                                        ? "bg-primary/6"                                        : "hover:bg-surface",                                )}                            >                                <Checkbox                                    checked={isSelected}                                    onCheckedChange={() => toggle(invoice.id)}                                    aria-label={`Select ${invoice.supplier}`}                                />                                <span className="min-w-0 flex-1 truncate text-foreground">                                    {invoice.supplier}                                </span>                                <span className="font-mono text-xs text-muted-foreground">                                    {invoice.id}                                </span>                                <span className="w-24 text-right font-medium text-foreground tabular-nums">                                    {invoice.amount}                                </span>                                {index === 0 && isSelected                                    ? marker(4, "top-0.5 -left-2.5")                                    : null}                            </li>                        );                    })}                </ul>                <div className="relative flex items-center justify-between gap-2 border-t border-border px-3 py-2.5">                    <span className="text-xs text-muted-foreground tabular-nums">                        {selected.size} of {invoices.length} selected                    </span>                    <div className="flex gap-2">                        <Button type="button" variant="outline" size="sm">                            Export CSV                        </Button>                        <Button                            type="button"                            size="sm"                            disabled={selected.size === 0}                            onClick={() =>                                toast.add({                                    title: `${selected.size} invoices approved`,                                    description:                                        "They join Friday's payment run on Oct 2.",                                })                            }                        >                            Approve {selected.size}                        </Button>                    </div>                    {marker(5, "-top-2.5 right-1")}                </div>            </div>        </div>    );}

import { Meter } from "@oration/canon/components/meter";import { SegmentedControl } from "@oration/canon/components/segmented-control";import { cn } from "@oration/canon/lib/utils";import * as React from "react";export function ForecastStack() {    const [quarter, setQuarter] = React.useState<keyof typeof quarters>("q4");    const data = quarters[quarter];    const max = 2.4;    const parts = [        { label: "Closed won", value: data.won, className: "bg-ink-80" },        { label: "Commit", value: data.commit, className: "bg-ink-45" },        { label: "Best case", value: data.best, className: "bg-ink-15" },    ];    const money = (n: number) => `$${n.toFixed(2)}M`;    return (        <div className="flex w-full max-w-md flex-col gap-4 rounded-xl bg-card p-4 shadow-border">            <div className="flex items-center justify-between gap-3">                <div className="flex flex-col">                    <span className="text-sm font-semibold text-foreground">                        Forecast                    </span>                    <span className="text-xs text-muted-foreground">                        Maya Okafor, VP of Revenue                    </span>                </div>                <SegmentedControl<keyof typeof quarters>                    label="Quarter"                    value={quarter}                    onValueChange={setQuarter}                    options={[                        { value: "q3", label: "Q3" },                        { value: "q4", label: "Q4" },                    ]}                />            </div>            <Meter                label={`Forecast against a ${money(data.target)} target`}                max={max}                target={data.target}                size="lg"                segments={parts}            />            <ul className="flex flex-col gap-1.5">                {parts.map((part) => (                    <li                        key={part.label}                        className="flex items-center gap-2 text-13"                    >                        <span                            aria-hidden="true"                            className={cn(                                "size-2 shrink-0 rounded-[2px]",                                part.className,                            )}                        />                        <span className="flex-1 text-foreground">                            {part.label}                        </span>                        <span className="font-medium text-foreground tabular-nums">                            {money(part.value)}                        </span>                    </li>                ))}                <li className="flex items-center gap-2 border-t border-border pt-1.5 text-13">                    <span                        aria-hidden="true"                        className="h-2.5 w-0.5 shrink-0 rounded-full bg-foreground"                    />                    <span className="flex-1 text-muted-foreground">Target</span>                    <span className="text-muted-foreground tabular-nums">                        {money(data.target)}                    </span>                </li>            </ul>        </div>    );}

import { Button } from "@oration/canon/components/button";import { Meter } from "@oration/canon/components/meter";import { cn } from "@oration/canon/lib/utils";import { CheckIcon } from "lucide-react";import * as React from "react";export function StageTrack() {    const [current, setCurrent] = React.useState(2);    const [credits, setCredits] = React.useState(6200);    return (        <div className="flex w-full max-w-md flex-col gap-5 rounded-xl bg-card p-4 shadow-border">            <div className="flex flex-col gap-2">                <div className="flex items-baseline justify-between gap-3">                    <span className="text-sm font-semibold text-foreground">                        Halcyon renewal                    </span>                    <span className="text-xs text-muted-foreground">                        {stages[current]}                    </span>                </div>                <div className="flex gap-1">                    {stages.map((stage, index) => (                        <button                            key={stage}                            type="button"                            aria-label={`Move to ${stage}`}                            aria-pressed={index === current}                            onClick={() => setCurrent(index)}                            className="group flex min-w-0 flex-1 flex-col gap-1.5 rounded-sm text-left outline-none"                        >                            <span                                className={cn(                                    "h-1 w-full rounded-full transition-colors duration-150 ease-out",                                    index < current && "bg-ink-25",                                    index === current && "bg-ink-80",                                    index > current &&                                        "bg-muted group-hover:bg-ink-15",                                )}                            />                            <span                                className={cn(                                    "items-center gap-1 truncate text-xs sm:flex",                                    index === current                                        ? "flex font-medium text-foreground"                                        : "hidden text-muted-foreground",                                )}                            >                                {index < current ? (                                    <CheckIcon                                        aria-hidden="true"                                        className="size-3 shrink-0"                                    />                                ) : null}                                <span className="truncate">{stage}</span>                            </span>                        </button>                    ))}                </div>            </div>            <div className="flex flex-col gap-2">                <div className="flex items-baseline justify-between gap-3 text-13">                    <span className="text-foreground">Enrichment credits</span>                    <span className="text-muted-foreground tabular-nums">                        {credits.toLocaleString("en-US")} of 10,000                    </span>                </div>                <Meter                    label="Enrichment credits used"                    value={credits}                    max={10000}                />                <div className="flex items-center justify-between">                    <span className="text-2xs text-muted-foreground">                        Resets Oct 1                    </span>                    <Button                        type="button"                        variant="outline"                        size="sm"                        onClick={() =>                            setCredits((value) => Math.min(10000, value + 900))                        }                    >                        Enrich 900 rows                    </Button>                </div>            </div>        </div>    );}

import { cn } from "@oration/canon/lib/utils";import * as React from "react";export function AppMarks() {    const [active, setActive] =        React.useState<(typeof apps)[number]["id"]>("crm");    return (        <div className="grid w-full max-w-xl gap-3 sm:grid-cols-2">            {(["light", "dark"] as const).map((mode) => (                <div                    key={mode}                    className={cn(                        mode,                        "flex flex-col gap-0.5 rounded-xl bg-sidebar p-2 shadow-border",                    )}                >                    <span className="px-2 pt-1 pb-1.5 text-xs font-medium text-muted-foreground">                        {mode === "light" ? "Light" : "Dark"}                    </span>                    {apps.map((app) => {                        const isActive = app.id === active;                        const Icon = app.icon;                        return (                            <button                                key={app.id}                                type="button"                                aria-pressed={isActive}                                onClick={() => setActive(app.id)}                                className={cn(                                    "relative flex h-7 items-center gap-2.5 rounded-md px-2 text-left text-13 text-sidebar-foreground outline-none transition-colors duration-150 ease-out hover:bg-sidebar-accent focus-visible:ring-3 focus-visible:ring-ring/40",                                    isActive &&                                        "bg-sidebar-accent font-medium text-foreground",                                )}                            >                                {isActive ? (                                    <span                                        aria-hidden="true"                                        className="absolute top-1.5 -left-2 h-4 w-[3px] rounded-full"                                        style={{                                            background: app.mark,                                            boxShadow: `0 0 8px -1px color-mix(in oklch, ${app.mark} 55%, transparent)`,                                        }}                                    />                                ) : null}                                <Icon                                    aria-hidden="true"                                    className={cn(                                        "size-4",                                        isActive                                            ? "text-foreground"                                            : "text-muted-foreground",                                    )}                                />                                {app.label}                            </button>                        );                    })}                </div>            ))}        </div>    );}