@ciridae/ui 0.17.0 → 1.0.1

package/dist/components/stages.d.ts

@@ -0,0 +1,97 @@
+import { type MenuItem } from "./menu.js";
+import type { Tone } from "./badge.js";
+import type { ComponentProps, ReactNode } from "react";
+/**
+ * Where a step stands: `done`; `current`, the reader's to do; `waiting` on someone else; `agent`,
+ * an agent is on it; `blocked`; `locked` until an earlier step lands; `todo`, ahead.
+ */
+export type StepStatus = "done" | "current" | "waiting" | "agent" | "blocked" | "locked" | "todo";
+export type StepDotProps = Omit<ComponentProps<"span">, "children"> & {
+    status: StepStatus;
+    /** `medium` 16px, `small` 14px on rows and the strip, `chip` 12px inside chips. */
+    size?: "chip" | "small" | "medium";
+    /** Drawn in place of the status icon, such as a count. */
+    children?: ReactNode;
+};
+/** A step's status as a dot; decorative, so the text beside it says the status. */
+export declare function StepDot({ status, size, className, children, ...props }: StepDotProps): import("@types/react").JSX.Element;
+export type Stage = {
+    id: string;
+    label: string;
+    /** Beside the label while there is room, such as the date the stage was reached. */
+    meta?: string;
+    status: StepStatus;
+};
+/** The stage a record is at: the first neither done nor ahead, else the last done, else the first. */
+export declare function currentStageIndex(stages: readonly Pick<Stage, "status">[]): number;
+export type StageStripProps = Omit<ComponentProps<"ol">, "children" | "defaultValue"> & {
+    stages: readonly Stage[];
+    /** The chosen stage's id; the current stage while neither this nor `defaultValue` is set. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (id: string) => void;
+    /** Past this many stages the strip windows itself around the current one. Defaults to 7. */
+    maxVisible?: number;
+};
+export declare function StageStrip({ stages, value, defaultValue, onValueChange, maxVisible, className, ...props }: StageStripProps): import("@types/react").JSX.Element;
+/** A step's button: it runs `onClick`, or with `popover` opens that popover anchored to it. */
+export type StepAction = {
+    label: ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    popover?: {
+        open: boolean;
+        onOpenChange: (open: boolean) => void;
+        content: ReactNode;
+    };
+};
+export type CurrentStepProps = Omit<ComponentProps<"div">, "title"> & {
+    /**
+     * What the step asks of the reader: `warning` theirs to do, `success` ready or landing,
+     * `info` an agent on it, `neutral` waiting on someone, `danger` stuck.
+     */
+    tone: Tone;
+    /** The header line, such as who it waits on and since when. */
+    meta: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    primary?: StepAction;
+    secondary?: StepAction;
+    /** A "Not sure?" menu beside the actions. */
+    help?: readonly MenuItem[];
+    /** Something is under way: a spinner replaces the dot. */
+    busy?: boolean;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+};
+/** The step the reader acts on: a tinted header that folds the card with its title and actions. */
+export declare function CurrentStep({ tone, meta, title, description, primary, secondary, help, busy, expanded: ownExpanded, defaultExpanded, onExpandedChange, className, ...props }: CurrentStepProps): import("@types/react").JSX.Element;
+export type ConfirmationRowProps = Omit<ComponentProps<"div">, "children"> & {
+    message: ReactNode;
+    /** When the move landed. */
+    at: number | Date;
+    onUndo?: () => void;
+    labels?: Partial<{
+        undo: string;
+    }>;
+};
+/** A move that just landed, with when and an undo. */
+export declare function ConfirmationRow({ message, at, onUndo, labels: ownLabels, className, ...props }: ConfirmationRowProps): import("@types/react").JSX.Element;
+export type ChecklistStep = {
+    id?: string;
+    label: ReactNode;
+    status: StepStatus;
+};
+export type ChecklistGroup = {
+    id: string;
+    label: ReactNode;
+    /** At the heading's end, such as when and by whom it was passed; its progress by default. */
+    meta?: ReactNode;
+    steps: readonly ChecklistStep[];
+};
+export type StageChecklistProps = Omit<ComponentProps<"div">, "children"> & {
+    groups: readonly ChecklistGroup[];
+};
+/** Checklists side by side, each under its label with its meta or how many of its steps are done. */
+export declare function StageChecklist({ groups, className, ...props }: StageChecklistProps): import("@types/react").JSX.Element;

package/dist/components/stages.js

@@ -0,0 +1,365 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * A record's path through its stages, and the work at the stage it is at. `StepDot` marks a
+ * step's status wherever one is listed; `StageStrip` is the path as one row of arrowed segments,
+ * each a button that chooses its stage; `CurrentStep` is the attention row for the step the
+ * reader acts on; `StageChecklist` lists what stages need; `ConfirmationRow` says a move landed.
+ */
+import { CaretDownIcon, CaretUpIcon, CheckIcon, LockIcon, MinusIcon, SparkleIcon, WarningCircleIcon, } from "@phosphor-icons/react";
+import { css, cva, cx } from "#primitives/css";
+import { Button } from "./button.js";
+import { useControllableState } from "./controllable-state.js";
+import { DateTime } from "./date-time.js";
+import { icon, Spinner } from "./icon.js";
+import { Cluster, MutedText } from "./layout.js";
+import { useCiridaeLocale } from "./locale.js";
+import { Menu } from "./menu.js";
+import { Popover } from "./overlays.js";
+/* Step dot: 16 on the strip, 14 on rows, 12 inside chips. */
+const stepDot = cva({
+    base: {
+        display: "inline-grid",
+        placeItems: "center",
+        flexShrink: "0",
+        borderRadius: "round",
+        border: "1px solid currentColor",
+        color: "fg.muted",
+        lineHeight: "tight",
+    },
+    variants: {
+        status: {
+            done: { background: "accent.green", borderColor: "accent.green", color: "fg.onAccent" },
+            current: { color: "accent.yellow" },
+            waiting: { color: "fg.muted" },
+            agent: { color: "accent.blue" },
+            blocked: { color: "accent.red" },
+            locked: { color: "fg.muted", opacity: "disabled" },
+            todo: { color: "border.panel" },
+        },
+        size: {
+            chip: { width: "avatar.micro", height: "avatar.micro", fontSize: "icon.tiny" },
+            small: { width: "control.knob", height: "control.knob", fontSize: "icon.tiny" },
+            medium: { width: "control.checkbox", height: "control.checkbox", fontSize: "icon.check" },
+        },
+    },
+    defaultVariants: { status: "todo", size: "medium" },
+});
+const stepDotCore = css({
+    width: "indicator.radio",
+    height: "indicator.radio",
+    borderRadius: "round",
+    background: "currentColor",
+});
+/** A step's status as a dot; decorative, so the text beside it says the status. */
+export function StepDot({ status, size = "medium", className, children, ...props }) {
+    return (_jsx("span", { "aria-hidden": "true", ...props, className: cx(stepDot({ status, size }), className), "data-ciridae-ui": "", children: children ?? (_jsxs(_Fragment, { children: [status === "done" && _jsx(CheckIcon, { weight: "bold" }), status === "current" && _jsx("span", { className: stepDotCore }), status === "waiting" && _jsx(MinusIcon, { weight: "bold" }), status === "agent" && _jsx(SparkleIcon, { weight: "fill" }), status === "blocked" && _jsx(WarningCircleIcon, { weight: "bold" }), status === "locked" && _jsx(LockIcon, { weight: "bold" })] })) }));
+}
+/*
+ * Stage strip: one enclosed row of arrowed segments, each filled with its state, every one a
+ * button that chooses its stage. Segments share the width; as the box narrows, dates go first,
+ * then every stage but the current and the chosen one folds to its dot. Past `maxVisible` the
+ * strip windows itself around the current stage: it, its neighbours and the chosen stage stay, and
+ * the runs between them fold into one counted segment each, which lists its stages when pressed.
+ * The window never moves with the choice, so a segment stays where it was clicked.
+ */
+const strip = css({
+    "--stage-arrow": "10px",
+    display: "flex",
+    alignItems: "stretch",
+    gap: "panel.hairline",
+    minWidth: "0",
+    height: "control.compact",
+    margin: "none",
+    padding: "none",
+    listStyle: "none",
+    containerType: "inline-size",
+    "@container (max-width: 720px)": { "& [data-stage-meta]": { display: "none" } },
+    "@container (max-width: 520px)": {
+        "& > li > :not([data-current], [aria-pressed=true])": {
+            flex: "0 0 auto",
+            "& [data-stage-label]": { display: "none" },
+        },
+        "& > li > [data-folded]": {
+            paddingInline: "calc(var(--stage-arrow) + token(spacing.layout.tightGap))",
+        },
+    },
+    "&[data-many]": {
+        // A folded run is a summary, so it takes only what its count needs.
+        "& > li > [data-run]": { flex: "0 0 auto" },
+        "@container (max-width: 1100px)": { "& [data-stage-meta]": { display: "none" } },
+        "@container (max-width: 480px)": {
+            "& > li > :not([data-current], [aria-pressed=true])": {
+                flex: "0 0 auto",
+                "& [data-stage-label]": { display: "none" },
+            },
+        },
+    },
+});
+const stripItem = css({ display: "contents" });
+const stage = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "control.iconGap",
+    flex: "1 1 0",
+    minWidth: "0",
+    // Each segment tucks under the previous one's point, so the gap between reads as one chevron.
+    marginInlineStart: "calc(var(--stage-arrow) * -1)",
+    paddingInline: "calc(var(--stage-arrow) + token(spacing.control.block))",
+    clipPath: "polygon(0 0, calc(100% - var(--stage-arrow)) 0, 100% 50%, calc(100% - var(--stage-arrow)) 100%, 0 100%, var(--stage-arrow) 50%)",
+    // The grey fill, not glass: glass is near-white in light and the stages ahead vanished.
+    background: "bg.fill",
+    color: "fg.secondary",
+    fontSize: "caption",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    whiteSpace: "nowrap",
+    // Each segment is its item's only child, so the ends are found from the list item.
+    "li:first-child > &": {
+        marginInlineStart: "0",
+        paddingInlineStart: "control.compactInline",
+        borderStartStartRadius: "action",
+        borderEndStartRadius: "action",
+        clipPath: "polygon(0 0, calc(100% - var(--stage-arrow)) 0, 100% 50%, calc(100% - var(--stage-arrow)) 100%, 0 100%)",
+    },
+    "li:last-child > &": {
+        paddingInlineEnd: "control.compactInline",
+        borderStartEndRadius: "action",
+        borderEndEndRadius: "action",
+        clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--stage-arrow) 50%)",
+    },
+    "&[data-state=done]": { background: "bg.successSubtle", color: "accent.green" },
+    "&[data-state=current]": { background: "bg.warningSubtle", color: "accent.yellow" },
+    "&[data-state=blocked]": { background: "bg.errorSubtle", color: "accent.red" },
+    "&[data-state=agent]": { background: "bg.infoSubtle", color: "accent.blue" },
+    "&[data-state=todo], &[data-state=locked]": {
+        color: "fg.muted",
+        // The dot's own hairline grey vanishes on the segment's fill.
+        "& > :first-child": { color: "fg.muted" },
+    },
+    // Every stage can be chosen: it takes the hover wash, and the chosen one keeps it.
+    border: "none",
+    font: "inherit",
+    cursor: "pointer",
+    _hover: { boxShadow: "inset 0 0 0 999px token(colors.bg.rowHover)" },
+    _focusVisible: { outline: "none", boxShadow: "inset 0 0 0 999px token(colors.bg.rowHover)" },
+    "&[aria-pressed=true]": { boxShadow: "inset 0 0 0 999px token(colors.bg.rowHover)" },
+    // A chosen stage ahead has no fill of its own, so its text lifts to show the choice.
+    "&[aria-pressed=true]:is([data-state=todo], [data-state=locked])": {
+        color: "fg.primary",
+        "& > :first-child": { color: "fg.primary" },
+    },
+});
+const stageLabel = css({ overflow: "hidden", textOverflow: "ellipsis" });
+const stageMeta = css({ flexShrink: "0", opacity: "0.7", fontSize: "code" });
+/* A folded run's dot carries its count instead of an icon. */
+const countDot = css({ fontSize: "icon.tiny", fontWeight: "medium", lineHeight: "1" });
+/** The stage a record is at: the first neither done nor ahead, else the last done, else the first. */
+export function currentStageIndex(stages) {
+    const active = stages.findIndex((item) => item.status !== "done" && item.status !== "todo" && item.status !== "locked");
+    if (active >= 0)
+        return active;
+    const lastDone = stages.map((item) => item.status).lastIndexOf("done");
+    return lastDone >= 0 ? lastDone : 0;
+}
+/** The strip's segments: every stage, or past `maxVisible` the window around the current one. */
+function stripItems(stages, maxVisible, currentIndex, selectedIndex) {
+    if (stages.length <= maxVisible) {
+        return stages.map((stage, index) => ({ kind: "stage", stage, index }));
+    }
+    const kept = new Set([currentIndex - 1, currentIndex, currentIndex + 1, selectedIndex]);
+    const items = [];
+    let run = [];
+    const closeRun = () => {
+        if (run.length === 1)
+            items.push({ kind: "stage", stage: stages[run[0]], index: run[0] });
+        if (run.length > 1) {
+            const done = run.every((index) => stages[index].status === "done");
+            items.push({ kind: "run", indices: run, status: done ? "done" : "todo" });
+        }
+        run = [];
+    };
+    stages.forEach((stage, index) => {
+        if (kept.has(index)) {
+            closeRun();
+            items.push({ kind: "stage", stage, index });
+        }
+        else {
+            run.push(index);
+        }
+    });
+    closeRun();
+    return items;
+}
+export function StageStrip({ stages, value, defaultValue, onValueChange, maxVisible = 7, className, ...props }) {
+    const { labels } = useCiridaeLocale();
+    const currentIndex = currentStageIndex(stages);
+    const [chosen, setChosen] = useControllableState(value, defaultValue ?? stages[currentIndex]?.id ?? "", onValueChange);
+    const chosenIndex = stages.findIndex((item) => item.id === chosen);
+    const selectedIndex = chosenIndex >= 0 ? chosenIndex : currentIndex;
+    const many = stages.length > maxVisible;
+    return (_jsx("ol", { "aria-label": labels.record.stages, ...props, className: cx(strip, className), "data-ciridae-ui": "", "data-many": many || undefined, children: stripItems(stages, maxVisible, currentIndex, selectedIndex).map((item) => item.kind === "stage" ? (_jsx("li", { className: stripItem, children: _jsxs("button", { type: "button", className: stage, "data-state": item.stage.status, "data-current": item.index === currentIndex || undefined, "data-folded": item.index !== currentIndex || undefined, title: item.stage.label, "aria-current": item.index === currentIndex ? "step" : undefined, "aria-pressed": item.index === selectedIndex, onClick: () => setChosen(item.stage.id), children: [_jsx(StepDot, { status: item.stage.status, size: "small" }), _jsx("span", { className: stageLabel, "data-stage-label": "", children: item.stage.label }), item.stage.meta && (_jsx("span", { className: stageMeta, "data-stage-meta": "", children: item.stage.meta }))] }) }, item.stage.id)) : (_jsx("li", { className: stripItem, children: _jsx(Menu, { trigger: _jsxs("button", { type: "button", className: stage, "data-state": item.status, "data-folded": "", "data-run": "", "aria-label": item.status === "done"
+                        ? labels.record.runDoneLabel(item.indices.length)
+                        : labels.record.runToGoLabel(item.indices.length), children: [_jsx(StepDot, { status: item.status, size: "small", className: countDot, children: item.indices.length }), _jsx("span", { className: stageLabel, "data-stage-label": "", children: item.status === "done" ? labels.record.runDone : labels.record.runToGo })] }), items: item.indices.map((index) => ({
+                    label: stages[index].label,
+                    icon: _jsx(StepDot, { status: stages[index].status, size: "small" }),
+                    onSelect: () => setChosen(stages[index].id),
+                })) }) }, `run-${item.indices[0]}`))) }));
+}
+/* Current step: the attention row, tinted to its tone, with the inner card when expanded. */
+const attentionRow = cva({
+    base: {
+        // The step card stacks by its own width, so a narrow record column stacks it as a phone does.
+        containerType: "inline-size",
+        display: "grid",
+        gap: "layout.tightGap",
+        padding: "layout.tightGap",
+        border: "1px solid token(colors.border.panel)",
+        borderRadius: "action",
+        background: "bg.glass",
+    },
+    variants: {
+        tone: {
+            warning: { borderColor: "border.glass", background: "bg.tinted" },
+            success: { borderColor: "border.glass", background: "bg.successSubtle" },
+            info: { borderColor: "border.glass", background: "bg.infoSubtle" },
+            neutral: {},
+            danger: { borderColor: "border.glass", background: "bg.errorSubtle" },
+        },
+    },
+});
+const attentionHeader = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    width: "100%",
+    height: "control.compact",
+    paddingInline: "control.block",
+    border: "none",
+    borderRadius: "control",
+    background: "transparent",
+    font: "inherit",
+    textAlign: "start",
+    cursor: "pointer",
+    _focusVisible: { focusRing: "inset" },
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    "&[data-tone=warning]": { color: "accent.yellow" },
+    "&[data-tone=success]": { color: "accent.green" },
+    "&[data-tone=info]": { color: "accent.blue" },
+    "&[data-tone=neutral]": { color: "fg.muted" },
+    "&[data-tone=danger]": { color: "accent.red" },
+});
+const attentionCard = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "layout.clusterGap",
+    padding: "panel.default",
+    border: "1px solid token(colors.border.glass)",
+    borderRadius: "control",
+    background: "bg.panel",
+    "@container (max-width: 560px)": { flexDirection: "column", alignItems: "stretch" },
+    _phone: { padding: "panel.compact" },
+});
+// A narrow card stacks the step's buttons full width, the main one first.
+const stepActions = css({
+    flexShrink: "0",
+    "@container (max-width: 560px)": { flexDirection: "column-reverse", alignItems: "stretch" },
+});
+const attentionTitle = css({
+    fontSize: "heading",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+});
+const attentionDescription = css({
+    color: "fg.secondary",
+    fontSize: "code",
+    fontWeight: "medium",
+    marginTop: "layout.tightGap",
+});
+const toneStatus = {
+    warning: "current",
+    success: "done",
+    info: "agent",
+    neutral: "waiting",
+    danger: "blocked",
+};
+function StepActionButton({ action, variant, }) {
+    const button = (_jsx(Button, { size: "medium", variant: variant, disabled: action.disabled, onClick: action.popover ? undefined : action.onClick, children: action.label }));
+    if (!action.popover)
+        return button;
+    return (_jsx(Popover, { trigger: button, open: action.popover.open, onOpenChange: action.popover.onOpenChange, children: action.popover.content }));
+}
+/** The step the reader acts on: a tinted header that folds the card with its title and actions. */
+export function CurrentStep({ tone, meta, title, description, primary, secondary, help, busy = false, expanded: ownExpanded, defaultExpanded = true, onExpandedChange, className, ...props }) {
+    const { labels } = useCiridaeLocale();
+    const [expanded, setExpanded] = useControllableState(ownExpanded, defaultExpanded, onExpandedChange);
+    return (_jsxs("div", { ...props, className: cx(attentionRow({ tone }), className), "data-ciridae-ui": "", children: [_jsxs("button", { type: "button", className: attentionHeader, "data-tone": tone, "aria-expanded": expanded, onClick: () => setExpanded(!expanded), children: [busy ? (_jsx(Spinner, { size: "compact", "aria-hidden": "true" })) : (_jsx(StepDot, { status: toneStatus[tone], size: "small" })), _jsx("span", { className: css({ flex: "1" }), children: meta }), expanded ? (_jsx(CaretUpIcon, { className: icon({ size: "compact" }) })) : (_jsx(CaretDownIcon, { className: icon({ size: "compact" }) }))] }), expanded && (_jsxs("div", { className: attentionCard, children: [_jsxs("div", { className: css({ minWidth: "0" }), children: [_jsx("div", { className: attentionTitle, children: title }), description !== undefined && _jsx("div", { className: attentionDescription, children: description })] }), (help || secondary || primary) && (_jsxs(Cluster, { gap: "4", className: stepActions, children: [help && (_jsx(Menu, { align: "end", trigger: _jsx(Button, { variant: "ghost", children: labels.record.notSure }), items: help })), secondary && (_jsx(StepActionButton, { action: secondary, variant: tone === "warning" ? "tinted" : "secondary" })), primary && _jsx(StepActionButton, { action: primary, variant: "primary" })] }))] }))] }));
+}
+/* Confirmation row. */
+const confirmation = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    minHeight: "control.default",
+    paddingInlineStart: "control.compactInline",
+    paddingInlineEnd: "control.block",
+    border: "1px solid token(colors.border.glass)",
+    borderRadius: "action",
+    background: "bg.successSubtle",
+    color: "accent.green",
+    fontSize: "code",
+    fontWeight: "medium",
+});
+/** A move that just landed, with when and an undo. */
+export function ConfirmationRow({ message, at, onUndo, labels: ownLabels, className, ...props }) {
+    const labels = { ...useCiridaeLocale().labels.record, ...ownLabels };
+    return (_jsxs("div", { role: "status", ...props, className: cx(confirmation, className), "data-ciridae-ui": "", children: [_jsx(StepDot, { status: "done", size: "small" }), _jsx("span", { className: css({ flex: "1" }), children: message }), _jsx(MutedText, { children: _jsx(DateTime, { value: at }) }), onUndo && (_jsx(Button, { variant: "secondary", onClick: onUndo, children: labels.undo }))] }));
+}
+/* Stage checklists: what each stage needs, needed or will need, as plain rows under its label. */
+const checklist = css({
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
+    gap: "layout.clusterGap",
+    paddingInline: "control.block",
+});
+const checklistGroup = css({ display: "grid", alignContent: "start", minWidth: "0" });
+const checklistHeading = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "layout.controlGap",
+    height: "control.shortcut",
+    margin: "none",
+    color: "fg.muted",
+    font: "inherit",
+    fontSize: "code",
+    fontWeight: "medium",
+});
+const checklistList = css({ display: "grid", margin: "none", padding: "none", listStyle: "none" });
+const checklistRow = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    minHeight: "control.shortcut",
+    color: "fg.secondary",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    "&[data-status=done]": { color: "fg.muted" },
+    "&[data-status=current]": { color: "fg.primary" },
+    "&[data-status=agent]": { color: "accent.blue" },
+    "&[data-status=blocked]": { color: "accent.red" },
+    "&[data-status=locked], &[data-status=todo]": { color: "fg.muted" },
+});
+/** Checklists side by side, each under its label with its meta or how many of its steps are done. */
+export function StageChecklist({ groups, className, ...props }) {
+    const { labels } = useCiridaeLocale();
+    return (_jsx("div", { ...props, className: cx(checklist, className), "data-ciridae-ui": "", children: groups.map(({ id, label, meta, steps }) => {
+            const done = steps.filter((step) => step.status === "done").length;
+            return (_jsxs("section", { className: checklistGroup, children: [_jsxs("h3", { className: checklistHeading, children: [label, _jsx("span", { children: meta ?? (steps.length > 0 && labels.record.checklistProgress(done, steps.length)) })] }), _jsx("ul", { className: checklistList, children: steps.map((step, index) => (_jsxs("li", { className: checklistRow, "data-status": step.status, children: [_jsx(StepDot, { status: step.status, size: "chip" }), step.label] }, step.id ?? index))) })] }, id));
+        }) }));
+}

package/dist/components/stat-card.d.ts

@@ -0,0 +1,34 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { ComponentProps, ReactNode } from "react";
+export type TrendProps = {
+    direction: "up" | "down" | "flat";
+    /** The color, apart from the direction, since a fall in what is owed is good. */
+    tone?: "good" | "bad" | "neutral";
+    arrow?: boolean;
+    children: ReactNode;
+};
+export declare function Trend({ direction, tone, arrow, children }: TrendProps): import("@types/react").JSX.Element;
+export type SparklineProps = Omit<ComponentProps<"div">, "children"> & {
+    values: readonly number[];
+    /** The value at the box's foot; by default far enough under the lowest that the line floats. */
+    low?: number;
+    /** The value at the box's top; the highest by default. */
+    high?: number;
+    strokeWidth?: number;
+    endPointSize?: number;
+};
+/** A run of values as a line filling its box; decorative, as the figure beside it says what it shows. */
+export declare function Sparkline({ values, low: ownLow, high: ownHigh, strokeWidth, endPointSize, className, ...props }: SparklineProps): import("@types/react").JSX.Element;
+export type MetricCardProps = Omit<useRender.ComponentProps<"div">, "children" | "onSelect"> & {
+    label: ReactNode;
+    value: ReactNode;
+    /** How the figure changed, under it; `arrow={false}` for a line that is not a change. */
+    change?: TrendProps;
+    /** The figure's recent run, beside it. */
+    sparkline?: readonly number[];
+    /** Makes the card a button, such as one that opens the list it counts. */
+    onSelect?: () => void;
+    /** Makes the card a link; a router's link as `render` routes it. */
+    href?: string;
+};
+export declare function MetricCard({ label, value, change, sparkline, onSelect, href, render, className, ...props }: MetricCardProps): import("@types/react").ReactElement<unknown, string | import("@types/react").JSXElementConstructor<any>>;

package/dist/components/stat-card.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Figures for a dashboard. `MetricCard` is one figure: its label, its value, how it changed
+ * (`Trend`) and its recent run (`Sparkline`); it can open what it counts. `Sparkline` is a blue
+ * line over a flat tinted area that stretches to its box: the stroke keeps its width and the end
+ * point is HTML, so neither distorts.
+ */
+import { useRender } from "@base-ui/react/use-render";
+import { ArrowDownIcon, ArrowRightIcon, ArrowUpIcon } from "@phosphor-icons/react";
+import { css, cx } from "#primitives/css";
+import { icon } from "./icon.js";
+import { cardSurface } from "./panel.js";
+/* A change beside a figure: which way it moved, and separately whether that is good. */
+const trend = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "layout.tightGap",
+    minWidth: "0",
+    fontSize: "code",
+    fontWeight: "medium",
+    "&[data-tone=good]": { color: "accent.green" },
+    "&[data-tone=bad]": { color: "accent.red" },
+    "&[data-tone=neutral]": { color: "fg.muted" },
+    "& > svg": { flexShrink: "0" },
+});
+const trendText = css({ minWidth: "0", overflow: "hidden", textOverflow: "ellipsis" });
+const TREND_ARROWS = { up: ArrowUpIcon, down: ArrowDownIcon, flat: ArrowRightIcon };
+export function Trend({ direction, tone = "neutral", arrow = true, children }) {
+    const Arrow = TREND_ARROWS[direction];
+    return (_jsxs("span", { className: trend, "data-tone": tone, "data-ciridae-ui": "", children: [arrow && _jsx(Arrow, { className: icon({ size: "compact" }), weight: "bold", "aria-hidden": "true" }), _jsx("span", { className: trendText, children: children })] }));
+}
+/* Sparkline: drawn into a 100x100 box that stretches to its container. */
+const plot = css({ position: "relative", color: "accent.blue" });
+const svg = css({
+    position: "absolute",
+    inset: "0",
+    width: "100%",
+    height: "100%",
+    overflow: "visible",
+});
+const endPoint = css({
+    position: "absolute",
+    borderRadius: "round",
+    background: "accent.blue",
+    borderStyle: "solid",
+    borderColor: "bg.card",
+    translate: "-50% -50%",
+});
+/** A run of values as a line filling its box; decorative, as the figure beside it says what it shows. */
+export function Sparkline({ values, low: ownLow, high: ownHigh, strokeWidth = 1.5, endPointSize = 6, className, ...props }) {
+    const lowest = Math.min(...values);
+    const high = ownHigh ?? Math.max(...values);
+    const low = ownLow ?? lowest - (high - lowest) * 0.4;
+    const span = high - low || 1;
+    const tops = values.map((value) => 100 - ((value - low) / span) * 100);
+    const step = 100 / Math.max(values.length - 1, 1);
+    const points = tops.map((top, index) => `${index * step},${top}`).join(" ");
+    const lastTop = tops[tops.length - 1] ?? 100;
+    return (_jsxs("div", { "aria-hidden": "true", ...props, className: cx(plot, className), "data-ciridae-ui": "", children: [_jsxs("svg", { className: svg, viewBox: "0 0 100 100", preserveAspectRatio: "none", children: [_jsx("polygon", { points: `0,100 ${points} 100,100`, fill: "currentColor", fillOpacity: 0.08 }), _jsx("polyline", { points: points, fill: "none", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" })] }), _jsx("span", { className: endPoint, style: {
+                    insetInlineStart: "100%",
+                    top: `${lastTop}%`,
+                    width: endPointSize,
+                    height: endPointSize,
+                    borderWidth: strokeWidth,
+                } })] }));
+}
+/* Metric card: a figure with its change, and its run beside it. */
+const metricCard = css(cardSurface, {
+    display: "flex",
+    gap: "layout.contentGap",
+    padding: "panel.comfortable",
+    color: "fg.primary",
+    font: "inherit",
+    textAlign: "start",
+    textDecoration: "none",
+    lineHeight: "tight",
+    "&:is(button, a)": { cursor: "pointer", _hover: { borderColor: "border.glass" } },
+    _focusVisible: { focusRing: "outer" },
+    "& > [data-sparkline]": {
+        width: "84px",
+        height: "25px",
+        flexShrink: "0",
+        alignSelf: "flex-end",
+    },
+});
+const metricCopy = css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "layout.controlGap",
+    flex: "1",
+    minWidth: "0",
+});
+const metricLabel = css({ fontSize: "code", fontWeight: "medium" });
+const metricValue = css({
+    fontSize: "heading.page",
+    fontWeight: "medium",
+    lineHeight: "tight",
+    fontVariantNumeric: "tabular-nums",
+});
+export function MetricCard({ label, value, change, sparkline, onSelect, href, render, className, ...props }) {
+    return useRender({
+        defaultTagName: href !== undefined ? "a" : onSelect !== undefined ? "button" : "div",
+        render,
+        props: {
+            ...(href !== undefined
+                ? { href }
+                : onSelect !== undefined
+                    ? { type: "button" }
+                    : {}),
+            ...props,
+            onClick: onSelect,
+            className: cx(metricCard, className),
+            "data-ciridae-ui": "",
+            children: (_jsxs(_Fragment, { children: [_jsxs("span", { className: metricCopy, children: [_jsx("span", { className: metricLabel, children: label }), _jsx("span", { className: metricValue, children: value }), change && _jsx(Trend, { ...change })] }), sparkline && _jsx(Sparkline, { values: sparkline, "data-sparkline": "" })] })),
+        },
+    });
+}

package/dist/components/status-banner.d.ts

@@ -0,0 +1,17 @@
+import type { Tone } from "./badge.js";
+import type { ComponentProps, ReactNode } from "react";
+export type StatusBannerProps = Omit<ComponentProps<"div">, "title"> & {
+    /** The message. */
+    title: ReactNode;
+    /** More about it, continuing on the same line in muted text. */
+    description?: ReactNode;
+    tone?: Tone;
+    /** `filled` for a state that blocks the reader; a `danger` banner is filled by default. */
+    emphasis?: "inline" | "filled";
+    /** A link or text button at the end of the message, such as Retry. */
+    action?: ReactNode;
+    onDismiss?: () => void;
+    /** The locale's "Dismiss" by default. */
+    dismissLabel?: string;
+};
+export declare function StatusBanner({ title, description, tone, emphasis, action, onDismiss, dismissLabel, className, ...props }: StatusBannerProps): import("@types/react").JSX.Element;