@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/business/setup-checklist.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, ChevronDown, Lock, X, ArrowRight, Undo2, Rocket } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { SmartLink } from "../lib/provider.js";
+import { Button, IconButton } from "../components/button.js";
+import { ProgressCircle } from "../components/progress.js";
+import { Skeleton } from "../components/skeleton.js";
+export const setupChecklistLabels = {
+    title: "Get started",
+    progress: "{done} of {total} complete",
+    progressShort: "{done}/{total}",
+    dismiss: "Hide setup guide",
+    reopen: "Setup guide · {done} of {total}",
+    skip: "Skip for now",
+    undoSkip: "Undo skip",
+    optional: "Optional",
+    todo: "not started",
+    in_progress: "in progress",
+    done: "done",
+    skipped: "skipped",
+    locked: "locked",
+    itemName: "{title}, {status}",
+    allDone: "You're all set",
+    allDoneBody: "Everything is in place. You can hide this guide; it stays in Help.",
+    hide: "Hide guide",
+    details: "{title} details",
+};
+function counts(items) {
+    const required = items.filter((i) => !i.optional);
+    const done = items.filter((i) => i.status === "done" || i.status === "skipped").length;
+    const allDone = required.every((i) => i.status === "done" || i.status === "skipped");
+    return { done, total: items.length, allDone };
+}
+/**
+ * A "Get started" panel: ordered setup steps with progress, deep-link actions, skip, lock and
+ * dismiss. Completion comes from the app (pass the new `status`); focus never jumps when a
+ * step completes on its own.
+ *
+ * ```tsx
+ * <SetupChecklist items={steps} onSkip={skip} dismissed={hidden} onDismissedChange={setHidden} />
+ * {hidden ? <SetupChecklistLauncher items={steps} onOpen={() => setHidden(false)} /> : null}
+ * ```
+ */
+export const SetupChecklist = React.forwardRef(function SetupChecklist({ title, description, items, onSkip, onUndoSkip, dismissed, onDismissedChange, variant = "card", expandFirstIncomplete = true, onAllDone, loading, labels, className, ...props }, ref) {
+    const t = useLabels("setupChecklist", setupChecklistLabels, labels);
+    const { done, total, allDone } = counts(items);
+    const firstOpen = items.find((i) => (i.status === "todo" || i.status === "in_progress") && !i.locked)?.id;
+    const [open, setOpen] = React.useState(expandFirstIncomplete ? (firstOpen ?? null) : null);
+    const headingId = React.useId();
+    const wasDone = React.useRef(allDone);
+    const [live, setLive] = React.useState("");
+    const prevDone = React.useRef(done);
+    React.useEffect(() => {
+        if (allDone && !wasDone.current)
+            onAllDone?.();
+        wasDone.current = allDone;
+    }, [allDone, onAllDone]);
+    React.useEffect(() => {
+        if (prevDone.current !== done)
+            setLive(t("progress", { done, total }));
+        prevDone.current = done;
+    }, [done, total, t]);
+    // When the open step completes, move the disclosure (not focus) to the next unfinished step.
+    React.useEffect(() => {
+        const cur = items.find((i) => i.id === open);
+        if (cur && (cur.status === "done" || cur.status === "skipped") && expandFirstIncomplete)
+            setOpen(firstOpen ?? null);
+    }, [items]); // eslint-disable-line react-hooks/exhaustive-deps
+    if (dismissed)
+        return null;
+    return (_jsxs("section", { ref: ref, "aria-labelledby": headingId, "data-slot": "setup-checklist", "data-variant": variant, "data-complete": allDone ? "" : undefined, className: cn("vui-setup flex min-w-0 flex-col", variant === "card" && "rounded-ui-lg surface", variant === "popover" && "w-[22rem] max-w-full rounded-ui-lg surface-popover", variant === "sidebar" && "text-[13px]", className), ...props, children: [_jsxs("header", { className: cn("flex items-start gap-3", variant === "sidebar" ? "px-1 pb-3" : "border-b border-line px-4 py-3.5"), children: [_jsx(ProgressCircle, { value: total ? (done / total) * 100 : 0, size: variant === "sidebar" ? "sm" : "md", "aria-label": t("progress", { done, total }), className: "shrink-0", children: variant === "sidebar" || (loading && !total) ? undefined : _jsx("span", { className: "font-mono text-[11px] font-medium text-fg tabular", children: t("progressShort", { done, total }) }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h2", { id: headingId, className: cn("font-semibold tracking-[-0.01em] text-fg", variant === "sidebar" ? "text-[13px]" : "text-[15px]"), children: title ?? t("title") }), loading && !total && description == null ? (_jsx(Skeleton, { className: "mt-1.5 h-3 w-24" })) : (_jsx("p", { className: "mt-0.5 text-xs text-fg-muted tabular", children: description ?? t("progress", { done, total }) }))] }), onDismissedChange ? (_jsx(IconButton, { label: t("dismiss"), size: "sm", variant: "ghost", onClick: () => onDismissedChange(true), className: "-me-1.5 -mt-0.5", children: _jsx(X, {}) })) : null] }), _jsx("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": true, children: live }), loading ? (_jsx("div", { className: "flex flex-col gap-3 p-4", "aria-busy": true, children: [0, 1, 2].map((i) => (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { shape: "circle", className: "size-5" }), _jsx(Skeleton, { className: "h-3.5 flex-1" })] }, i))) })) : allDone ? (_jsxs("div", { className: "flex flex-col items-start gap-2 px-4 py-5", "data-slot": "setup-checklist-complete", children: [_jsx("span", { className: "inline-flex size-9 items-center justify-center rounded-full bg-accent-soft text-accent-ink", "aria-hidden": true, children: _jsx(Rocket, { className: "size-4" }) }), _jsx("p", { className: "text-sm font-semibold text-fg", children: t("allDone") }), _jsx("p", { className: "text-[13px] text-fg-muted", children: t("allDoneBody") }), onDismissedChange ? (_jsx(Button, { size: "sm", variant: "secondary", className: "mt-1", onClick: () => onDismissedChange(true), children: t("hide") })) : null] })) : (_jsx("ol", { className: cn("m-0 flex list-none flex-col p-0", variant === "sidebar" ? "gap-0.5" : "p-1.5"), "data-slot": "setup-checklist-items", children: items.map((item, i) => (_jsx(SetupChecklistItem, { item: item, index: i, open: open === item.id, current: item.id === firstOpen, onToggle: () => setOpen((o) => (o === item.id ? null : item.id)), onSkip: onSkip, onUndoSkip: onUndoSkip, compact: variant === "sidebar", t: t }, item.id))) }))] }));
+});
+function StatusMark({ status, locked, index }) {
+    return (_jsx("span", { "aria-hidden": true, "data-status": status, className: cn("vui-setup-mark inline-flex size-5 shrink-0 items-center justify-center rounded-full text-[10px] font-semibold tabular transition-[background-color,box-shadow] duration-200 [&_svg]:size-3", status === "done" && "tone-success bg-(--tone) text-scene", status === "in_progress" && "bg-surface text-accent-ink shadow-[inset_0_0_0_1.5px_var(--accent-ink)]", status === "todo" && !locked && "text-fg-subtle shadow-[inset_0_0_0_1.5px_var(--track)]", status === "skipped" && "border-[1.5px] border-dashed border-field-border text-fg-subtle", locked && "bg-selected text-fg-subtle"), children: status === "done" ? _jsx(Check, { strokeWidth: 3 }) : locked ? _jsx(Lock, {}) : status === "skipped" ? null : index + 1 }));
+}
+function SetupChecklistItem({ item, index, open, current, onToggle, onSkip, onUndoSkip, compact, t }) {
+    const locked = !!item.locked && item.status !== "done";
+    const statusText = locked ? t("locked") : t(item.status);
+    const panelId = React.useId();
+    const finished = item.status === "done" || item.status === "skipped";
+    const hasDetails = !!(item.description || item.action || item.locked || (!finished && onSkip && item.optional) || (item.status === "skipped" && onUndoSkip) || (!finished && onSkip));
+    return (_jsxs("li", { "data-slot": "setup-checklist-item", "data-status": item.status, "data-current": current && !finished ? "" : undefined, className: cn("vui-setup-item rounded-ui transition-colors", current && !finished && !compact && "bg-accent-soft/50"), children: [_jsx("h3", { className: "m-0 text-inherit font-normal", children: _jsxs("button", { type: "button", "aria-expanded": hasDetails ? open : undefined, "aria-controls": hasDetails ? panelId : undefined, onClick: hasDetails ? onToggle : undefined, className: cn("focus-ring flex w-full items-center gap-3 rounded-ui text-start", compact ? "px-1 py-1.5" : "px-2.5 py-2.5", hasDetails && "hover:bg-hover"), children: [_jsx(StatusMark, { status: item.status, locked: locked, index: index }), _jsxs("span", { className: cn("min-w-0 flex-1 text-sm", finished ? "text-fg-muted" : "text-fg", item.status === "done" && "line-through decoration-fg-subtle/60", item.status === "skipped" && "italic"), children: [item.title, _jsxs("span", { className: "sr-only", children: [", ", statusText] })] }), item.optional && !finished ? _jsx("span", { className: "text-[11px] text-fg-subtle", children: t("optional") }) : null, item.estimate && !finished && !compact ? _jsx("span", { className: "font-mono text-[11px] text-fg-subtle tabular", children: item.estimate }) : null, hasDetails ? _jsx(ChevronDown, { "aria-hidden": true, className: cn("size-4 shrink-0 text-fg-subtle transition-transform duration-200", open && "rotate-180") }) : null] }) }), hasDetails ? (_jsxs("div", { id: panelId, hidden: !open, className: cn("vui-setup-panel", compact ? "ps-8 pb-2" : "ps-[2.875rem] pe-3 pb-3"), children: [item.description ? _jsx("p", { className: "text-[13px] text-fg-muted", children: item.description }) : null, locked ? (_jsxs("p", { className: "mt-1.5 flex items-center gap-1.5 text-xs text-fg-subtle", children: [_jsx(Lock, { "aria-hidden": true, className: "size-3" }), " ", item.locked.reason] })) : null, _jsxs("div", { className: "mt-2.5 flex flex-wrap items-center gap-2 empty:hidden", children: [item.action && !finished ? (item.action.href ? (_jsx(Button, { asChild: true, size: "sm", variant: current ? "primary" : "secondary", disabled: locked, children: _jsxs(SmartLink, { href: item.action.href, children: [item.action.label, " ", _jsx(ArrowRight, { className: "rtl:rotate-180" })] }) })) : (_jsxs(Button, { size: "sm", variant: current ? "primary" : "secondary", disabled: locked, onClick: item.action.onSelect, children: [item.action.label, " ", _jsx(ArrowRight, { className: "rtl:rotate-180" })] }))) : null, !finished && onSkip ? (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => onSkip(item.id), children: t("skip") })) : null, item.status === "skipped" && onUndoSkip ? (_jsxs(Button, { size: "sm", variant: "ghost", onClick: () => onUndoSkip(item.id), children: [_jsx(Undo2, {}), " ", t("undoSkip")] })) : null] })] })) : null] }));
+}
+/** A pill that reopens a dismissed checklist: "Setup guide · 3 of 6". */
+export const SetupChecklistLauncher = React.forwardRef(function SetupChecklistLauncher({ items, onOpen, floating, labels, className, ...props }, ref) {
+    const t = useLabels("setupChecklist", setupChecklistLabels, labels);
+    const { done, total } = counts(items);
+    return (_jsxs("button", { ref: ref, type: "button", "data-slot": "setup-checklist-launcher", onClick: onOpen, className: cn("focus-ring inline-flex h-9 items-center gap-2 rounded-full surface-popover ps-1.5 pe-3.5 text-[13px] font-medium text-fg transition-[transform,box-shadow] duration-150 motion-safe:hover:-translate-y-px", floating && "fixed end-5 bottom-5 z-40", className), ...props, children: [_jsx(ProgressCircle, { value: total ? (done / total) * 100 : 0, size: "sm", "aria-hidden": true, className: "size-6" }), t("reopen", { done, total })] }));
+});

package/dist/business/signer-status.d.ts

@@ -0,0 +1,53 @@
+import * as React from "react";
+export type SignerState = "waiting" | "sent" | "viewed" | "signed" | "declined";
+export interface Signer {
+    id: string;
+    name: string;
+    email?: string;
+    /** "Client", "Account manager", "Witness". */
+    role?: string;
+    status: SignerState;
+    /** When the current status happened (ISO date-time). */
+    at?: string;
+    /** Decline reason or a note. */
+    note?: React.ReactNode;
+    /** Avatar image. */
+    avatarSrc?: string;
+}
+export declare const signerStatusLabels: {
+    title: string;
+    summary: string;
+    declinedSummary: string;
+    complete: string;
+    waiting: string;
+    sent: string;
+    viewed: string;
+    signed: string;
+    declined: string;
+    remind: string;
+    remindName: string;
+    reminded: string;
+    order: string;
+};
+export type SignerStatusLabels = typeof signerStatusLabels;
+export interface SignerStatusProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    signers: Signer[];
+    /** Signers sign in list order — numbers the rows and draws the chain. */
+    sequential?: boolean;
+    /** Heading. Default "Signatures"; `null` hides the header row. */
+    title?: React.ReactNode;
+    /** Shows "Remind" on sent / viewed rows. Resolve to show "Reminder sent". */
+    onRemind?: (signer: Signer) => void | Promise<void>;
+    /** Fixed reference time for relative dates (epoch ms) — tests, screenshots. */
+    now?: number;
+    labels?: Partial<SignerStatusLabels>;
+}
+/**
+ * E-signature progress for a quote, contract or offer letter: who signs, in which order,
+ * where each person is (sent, viewed, signed, declined) and when — with a reminder action.
+ *
+ * ```tsx
+ * <SignerStatus sequential signers={contract.signers} onRemind={(s) => api.remind(s.id)} />
+ * ```
+ */
+export declare const SignerStatus: React.ForwardRefExoticComponent<SignerStatusProps & React.RefAttributes<HTMLDivElement>>;

package/dist/business/signer-status.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { BellRing, Check, Clock3, Eye, Send, X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useFormat } from "../lib/locale.js";
+import { Avatar } from "../components/avatar.js";
+import { Button } from "../components/button.js";
+export const signerStatusLabels = {
+    title: "Signatures",
+    summary: "{signed} of {total} signed",
+    declinedSummary: "Declined by {name}",
+    complete: "Fully signed",
+    waiting: "Waiting",
+    sent: "Sent",
+    viewed: "Viewed",
+    signed: "Signed",
+    declined: "Declined",
+    remind: "Remind",
+    remindName: "Send a reminder to {name}",
+    reminded: "Reminder sent",
+    order: "Signs {position}",
+};
+const stateIcon = {
+    waiting: Clock3,
+    sent: Send,
+    viewed: Eye,
+    signed: Check,
+    declined: X,
+};
+const stateTone = {
+    waiting: "text-fg-subtle",
+    sent: "tone-info tone-soft",
+    viewed: "tone-warning tone-soft",
+    signed: "tone-success tone-soft",
+    declined: "tone-danger tone-soft",
+};
+/**
+ * E-signature progress for a quote, contract or offer letter: who signs, in which order,
+ * where each person is (sent, viewed, signed, declined) and when — with a reminder action.
+ *
+ * ```tsx
+ * <SignerStatus sequential signers={contract.signers} onRemind={(s) => api.remind(s.id)} />
+ * ```
+ */
+export const SignerStatus = React.forwardRef(function SignerStatus({ signers, sequential, title, onRemind, now, labels, className, ...props }, ref) {
+    const t = useLabels("signerStatus", signerStatusLabels, labels);
+    const f = useFormat();
+    const titleId = React.useId();
+    const [reminded, setReminded] = React.useState({});
+    const signed = signers.filter((s) => s.status === "signed").length;
+    const declined = signers.find((s) => s.status === "declined");
+    const total = signers.length;
+    const heading = title === undefined ? t("title") : title;
+    const summary = declined ? t("declinedSummary", { name: declined.name }) : signed === total && total > 0 ? t("complete") : t("summary", { signed: f.number(signed), total: f.number(total) });
+    const remind = async (s) => {
+        if (!onRemind)
+            return;
+        setReminded((r) => ({ ...r, [s.id]: "busy" }));
+        try {
+            await onRemind(s);
+            setReminded((r) => ({ ...r, [s.id]: "done" }));
+        }
+        catch {
+            setReminded(({ [s.id]: _drop, ...rest }) => rest);
+        }
+    };
+    return (_jsxs("section", { ref: ref, "data-slot": "signer-status", "aria-labelledby": heading ? titleId : undefined, className: cn("grid gap-3", className), ...props, children: [heading ? (_jsxs("header", { className: "grid gap-2", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsx("h3", { id: titleId, className: "text-sm font-medium text-fg", children: heading }), _jsx("span", { className: cn("text-xs tabular", declined ? "text-danger" : signed === total ? "text-success" : "text-fg-muted"), children: summary })] }), _jsx("div", { "aria-hidden": "true", className: "flex gap-1", children: signers.map((s) => (_jsx("span", { className: cn("h-1 flex-1 rounded-full", s.status === "signed" ? "bg-success" : s.status === "declined" ? "bg-danger" : s.status === "viewed" ? "bg-warning" : s.status === "sent" ? "bg-info" : "bg-track") }, s.id))) })] })) : null, _jsx("ol", { className: "grid", children: signers.map((s, i) => {
+                    const Icon = stateIcon[s.status];
+                    const canRemind = onRemind && (s.status === "sent" || s.status === "viewed");
+                    const r = reminded[s.id];
+                    const when = s.at ? f.relative(s.at, now != null ? { now } : undefined) : null;
+                    return (_jsxs("li", { "data-state": s.status, className: "relative flex items-start gap-3 py-2.5 not-last:border-b not-last:border-line", children: [_jsxs("span", { className: "relative shrink-0", children: [_jsx(Avatar, { name: s.name, src: s.avatarSrc, size: "sm" }), sequential ? (_jsx("span", { "aria-hidden": "true", className: "absolute -end-1 -bottom-1 grid size-4 place-items-center rounded-full bg-surface text-[10px] font-semibold text-fg-muted ring-1 ring-line tabular", children: i + 1 })) : null] }), _jsxs("div", { className: "grid min-w-0 flex-1 gap-0.5", children: [_jsxs("p", { className: "flex min-w-0 items-baseline gap-2 text-[13px]", children: [_jsx("span", { className: "truncate font-medium text-fg", children: s.name }), s.role ? _jsx("span", { className: "truncate text-xs text-fg-subtle", children: s.role }) : null, sequential ? _jsx("span", { className: "sr-only", children: t("order", { position: i + 1 }) }) : null] }), s.email ? _jsx("p", { className: "truncate text-xs text-fg-muted", children: s.email }) : null, s.note ? _jsx("div", { className: "mt-1 text-xs text-fg-muted", children: s.note }) : null] }), _jsxs("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [_jsxs("span", { className: cn("inline-flex h-5 items-center gap-1 rounded-full px-1.5 text-[11px] font-medium [&_svg]:size-3", stateTone[s.status]), children: [_jsx(Icon, { "aria-hidden": "true" }), t(s.status)] }), when ? (_jsx("time", { dateTime: s.at, title: f.dateTime(s.at), className: "text-[11px] text-fg-subtle tabular", suppressHydrationWarning: true, children: when })) : null, canRemind ? (r === "done" ? (_jsxs("span", { role: "status", className: "inline-flex items-center gap-1 text-[11px] text-fg-muted", children: [_jsx(Check, { "aria-hidden": "true", className: "size-3" }), t("reminded")] })) : (_jsxs(Button, { size: "xs", variant: "ghost", className: "-me-1.5", loading: r === "busy", "aria-label": t("remindName", { name: s.name }), onClick: () => remind(s), children: [_jsx(BellRing, { "aria-hidden": "true" }), t("remind")] }))) : null] })] }, s.id));
+                }) })] }));
+});

package/dist/charts/area-chart.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { type ChartProps } from "./chart-shell.js";
+import { type ChartColor } from "./utils.js";
+export interface ChartReference {
+    y: number;
+    label?: string;
+    color?: ChartColor;
+    /** Which side of the line the label sits on. Default `"below"`; use `"above"` to keep it clear of data under the line (control limits). */
+    labelPosition?: "above" | "below";
+}
+export interface AreaChartProps<T extends object> extends Omit<ChartProps<T>, "children"> {
+    /** Keys to draw. Default: every config key. */
+    series?: string[];
+    stack?: "none" | "stacked" | "percent";
+    curve?: "monotone" | "linear" | "step";
+    /** Gradient (default), flat tint, or no fill (lines only). */
+    fill?: "gradient" | "solid" | "none";
+    /** Horizontal reference lines (targets, averages). */
+    reference?: ChartReference[];
+    /** A previous-period series: dashed, unfilled, never stacked. */
+    compare?: {
+        key: string;
+    };
+    /** Hide the value axis (sparkline-like cards). */
+    hideYAxis?: boolean;
+}
+/**
+ * Volume or trend over time. One line of code for the common case; colours, formatting, legend,
+ * tooltip, states and the table alternative come from the Chart frame.
+ *
+ * ```tsx
+ * <AreaChart title="Visits" data={rows} x="date" config={{ visits: { label: "Visits" } }} height="md" />
+ * ```
+ */
+export declare function AreaChart<T extends object>({ series, stack, curve, fill, reference, compare, hideYAxis, ...props }: AreaChartProps<T>): React.JSX.Element;

package/dist/charts/area-chart.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Area, AreaChart as RAreaChart } from "recharts";
+import { Chart, useChart } from "./chart-shell.js";
+import { ChartFrame, ChartGrid, ChartReferenceLine, ChartTooltip, ChartXAxis, ChartYAxis, usePointClick } from "./chart.js";
+import { patternDash, seriesColor } from "./utils.js";
+/**
+ * Volume or trend over time. One line of code for the common case; colours, formatting, legend,
+ * tooltip, states and the table alternative come from the Chart frame.
+ *
+ * ```tsx
+ * <AreaChart title="Visits" data={rows} x="date" config={{ visits: { label: "Visits" } }} height="md" />
+ * ```
+ */
+export function AreaChart({ series, stack = "none", curve = "monotone", fill = "gradient", reference, compare, hideYAxis, ...props }) {
+    return (_jsx(Chart, { skeleton: "area", ...props, children: _jsx(AreaPlot, { series: series, stack: stack, curve: curve, fill: fill, reference: reference, compare: compare, hideYAxis: hideYAxis }) }));
+}
+function AreaPlot({ series: keys, stack, curve, fill, reference, compare, hideYAxis }) {
+    const chart = useChart();
+    const onClick = usePointClick();
+    const all = chart.series.filter((s) => (keys ? keys.includes(s.key) : true));
+    const visible = all.filter((s) => !chart.isHidden(s.key));
+    const stacked = stack !== "none";
+    const percent = stack === "percent";
+    const single = chart.data.length === 1;
+    const type = curve === "step" ? "stepAfter" : curve;
+    const stackKeys = visible.filter((s) => s.key !== compare?.key).map((s) => s.key);
+    return (_jsx(ChartFrame, { children: _jsxs(RAreaChart, { data: chart.data, stackOffset: percent ? "expand" : undefined, margin: { top: 6, right: 18, bottom: 0, left: 0 }, onClick: onClick, style: onClick ? { cursor: "pointer" } : undefined, children: [_jsx("defs", { children: all.map((s) => (_jsxs("linearGradient", { id: `${chart.idPrefix}-${s.index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: seriesColor(s.key), "data-top": "", stopOpacity: 0.45 }), _jsx("stop", { offset: "95%", stopColor: seriesColor(s.key), stopOpacity: 0 })] }, s.key))) }), _jsx(ChartGrid, {}), _jsx(ChartXAxis, {}), _jsx(ChartYAxis, { hide: hideYAxis, keys: stackKeys, stacked: stacked, format: percent ? "percent" : undefined, tickFormatter: percent ? (v) => chart.f.percent(v, { maximumFractionDigits: 0 }) : undefined }), _jsx(ChartTooltip, { showTotal: stacked && !percent, showShare: percent, indicator: fill === "none" ? "line" : undefined }), reference?.map((r, i) => _jsx(ChartReferenceLine, { y: r.y, label: r.label, color: r.color, labelPosition: r.labelPosition }, i)), all.map((s) => {
+                    const isCompare = s.key === compare?.key;
+                    const fillValue = isCompare || fill === "none" ? "transparent" : fill === "solid" ? `color-mix(in oklch, ${seriesColor(s.key)} 22%, transparent)` : `url(#${chart.idPrefix}-${s.index})`;
+                    return (_jsx(Area, { dataKey: s.key, name: s.label, type: type, hide: chart.isHidden(s.key), stackId: stacked && !isCompare ? "stack" : undefined, stroke: seriesColor(s.key), strokeWidth: isCompare ? 1.5 : 2, strokeDasharray: isCompare ? "4 4" : patternDash(s.pattern), fill: fillValue, fillOpacity: 1, connectNulls: false, dot: single ? { r: 3, fill: seriesColor(s.key), strokeWidth: 0 } : false, activeDot: { r: 4, strokeWidth: 2, stroke: "var(--chart-tooltip)", fill: seriesColor(s.key) }, isAnimationActive: chart.animate, animationDuration: 600 }, s.key));
+                })] }) }));
+}

package/dist/charts/bar-chart.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { type ChartProps } from "./chart-shell.js";
+import type { ChartReference } from "./area-chart.js";
+export interface BarChartProps<T extends object> extends Omit<ChartProps<T>, "children"> {
+    /** Keys to draw. Default: every config key. */
+    series?: string[];
+    /** `vertical` = columns (default), `horizontal` = rows growing from inline-start (rankings). */
+    layout?: "vertical" | "horizontal";
+    stack?: "none" | "stacked" | "percent";
+    /** Corner radius in px. Stacked bars round the outer segment only. Default 4. */
+    radius?: number;
+    /** Rows for which this returns true keep full colour; the rest are dimmed. */
+    highlight?: (row: T) => boolean;
+    /** Values printed on the bars. */
+    valueLabels?: boolean;
+    barSize?: "auto" | number;
+    reference?: ChartReference[];
+}
+/**
+ * Category comparison: grouped, stacked or 100% stacked; columns or ranked rows. Negative values get
+ * a prominent zero line.
+ *
+ * ```tsx
+ * <BarChart title="Won deals by rep" data={reps} x="rep" layout="horizontal" config={{ won: { label: "Won", format: "currency" } }} />
+ * ```
+ */
+export declare function BarChart<T extends object>({ series, layout, stack, radius, highlight, valueLabels, barSize, reference, ...props }: BarChartProps<T>): React.JSX.Element;

package/dist/charts/bar-chart.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Bar, BarChart as RBarChart, Cell, LabelList, ReferenceLine } from "recharts";
+import { Chart, useChart } from "./chart-shell.js";
+import { ChartFrame, ChartGrid, ChartReferenceLine, ChartTooltip, ChartXAxis, ChartYAxis, useValueAxisWidth } from "./chart.js";
+import { estimateAxisWidth, extent, formatValue, seriesColor } from "./utils.js";
+/**
+ * Category comparison: grouped, stacked or 100% stacked; columns or ranked rows. Negative values get
+ * a prominent zero line.
+ *
+ * ```tsx
+ * <BarChart title="Won deals by rep" data={reps} x="rep" layout="horizontal" config={{ won: { label: "Won", format: "currency" } }} />
+ * ```
+ */
+export function BarChart({ series, layout = "vertical", stack = "none", radius = 4, highlight, valueLabels, barSize = "auto", reference, ...props }) {
+    return (_jsx(Chart, { skeleton: layout === "horizontal" ? "bar-horizontal" : "bar", ...props, children: _jsx(BarPlot, { series: series, layout: layout, stack: stack, radius: radius, highlight: highlight, valueLabels: valueLabels, barSize: barSize, reference: reference }) }));
+}
+function BarPlot({ series: keys, layout, stack, radius = 4, highlight, valueLabels, barSize, reference }) {
+    const chart = useChart();
+    const all = chart.series.filter((s) => (keys ? keys.includes(s.key) : true));
+    const visible = all.filter((s) => !chart.isHidden(s.key));
+    const stacked = stack !== "none";
+    const percent = stack === "percent";
+    const horizontal = layout === "horizontal";
+    const [min] = extent(chart.data, visible.map((s) => s.key), stacked);
+    const valueWidth = useValueAxisWidth(visible.map((s) => s.key), { stacked, percent });
+    const categoryWidth = React.useMemo(() => (horizontal && chart.x ? Math.min(160, estimateAxisWidth(chart.data.map((r) => chart.formatX(r[chart.x])), 12)) : 0), [horizontal, chart]);
+    // A time series (dates on x) legitimately has many bars; the hint is for long category lists.
+    const timeAxis = (typeof chart.xFormat === "object" && chart.xFormat !== null && ("date" in chart.xFormat || "relative" in chart.xFormat)) ||
+        (chart.x != null && typeof chart.data[0]?.[chart.x] === "string" && /^\d{4}-\d{2}-\d{2}/.test(chart.data[0][chart.x])) ||
+        (chart.x != null && (chart.data[0]?.[chart.x] instanceof Date || typeof chart.data[0]?.[chart.x] === "number" && chart.data[0][chart.x] > 1e11));
+    if (process.env.NODE_ENV !== "production" && chart.data.length > 20 && !horizontal && !timeAxis) {
+        console.warn("[vamos-ui] BarChart: more than 20 categories — use layout=\"horizontal\" or group the tail into \"Other\".");
+    }
+    const lastKey = visible[visible.length - 1]?.key;
+    const r = (key) => {
+        if (stacked && key !== lastKey)
+            return [0, 0, 0, 0];
+        return horizontal ? [0, radius, radius, 0] : [radius, radius, 0, 0];
+    };
+    const tickPercent = (v) => chart.f.percent(v, { maximumFractionDigits: 0 });
+    return (_jsx(ChartFrame, { children: _jsxs(RBarChart, { data: chart.data, layout: horizontal ? "vertical" : "horizontal", stackOffset: percent ? "expand" : min < 0 && stacked ? "sign" : undefined, margin: { top: valueLabels && !horizontal ? 18 : 6, right: valueLabels && horizontal ? 48 : 8, bottom: 0, left: 0 }, barCategoryGap: horizontal ? "22%" : "28%", barGap: 3, children: [_jsx(ChartGrid, { vertical: horizontal, horizontal: !horizontal }), horizontal ? (_jsxs(_Fragment, { children: [_jsx(ChartXAxis, { type: "number", niceTicks: "snap125", dataKey: undefined, tickFormatter: percent ? tickPercent : (v) => chart.formatTick(v), minTickGap: 24 }), _jsx(ChartYAxis, { type: "category", dataKey: chart.x, width: categoryWidth, tickFormatter: (v) => chart.formatX(v), interval: 0 })] })) : (_jsxs(_Fragment, { children: [_jsx(ChartXAxis, {}), _jsx(ChartYAxis, { width: valueWidth, tickFormatter: percent ? tickPercent : undefined })] })), _jsx(ChartTooltip, { cursor: { fill: "var(--hover)" }, showTotal: stacked && !percent, showShare: percent }), min < 0 ? (horizontal ? _jsx(ReferenceLine, { x: 0, stroke: "var(--fg-subtle)", strokeWidth: 1 }) : _jsx(ReferenceLine, { y: 0, stroke: "var(--fg-subtle)", strokeWidth: 1 })) : null, reference?.map((ref, i) => (horizontal ? _jsx(ChartReferenceLine, { x: ref.y, label: ref.label, color: ref.color }, i) : _jsx(ChartReferenceLine, { y: ref.y, label: ref.label, color: ref.color, labelPosition: ref.labelPosition }, i))), all.map((s) => (_jsxs(Bar, { dataKey: s.key, name: s.label, hide: chart.isHidden(s.key), stackId: stacked ? "stack" : undefined, fill: seriesColor(s.key), radius: r(s.key), barSize: barSize === "auto" ? undefined : barSize, maxBarSize: horizontal ? 22 : 44, isAnimationActive: chart.animate, animationDuration: 500, onClick: chart.onPointClick ? (_, index) => chart.data[index] && chart.onPointClick?.(chart.data[index], s.key) : undefined, style: chart.onPointClick ? { cursor: "pointer" } : undefined, children: [highlight
+                            ? chart.data.map((row, i) => (_jsx(Cell, { fill: highlight(row) ? seriesColor(s.key) : `color-mix(in oklch, ${seriesColor(s.key)} 35%, transparent)` }, i)))
+                            : null, valueLabels && (!stacked || s.key === lastKey) ? (_jsx(LabelList, { dataKey: s.key, position: horizontal ? "right" : "top", offset: 6, className: "vui-chart-value-label", formatter: (v) => formatValue(chart.f, chart.config[s.key]?.format, v, { compact: true }) })) : null] }, s.key)))] }) }));
+}

package/dist/charts/bar-list.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { type ChartLabels } from "./chart-shell.js";
+import { type ChartColor, type FormatSpec } from "./utils.js";
+export interface BarListItem {
+    key: string;
+    label: React.ReactNode;
+    /** Plain-text label for sorting and the accessible row text, when `label` is not a string. */
+    textLabel?: string;
+    value: number;
+    href?: string;
+    icon?: React.ReactNode;
+    /** Change vs the previous period, as a ratio (`0.12` → "+12%"). */
+    delta?: number;
+}
+export interface BarListProps extends Omit<React.HTMLAttributes<HTMLOListElement>, "onClick"> {
+    data: BarListItem[];
+    format?: FormatSpec;
+    /** Bar colour token. Default: the accent tint (`accent-soft`). */
+    color?: ChartColor;
+    /** Show the top N; the rest become "Other (12)". */
+    max?: number;
+    sort?: "desc" | "asc" | "none";
+    /** Adds each row's share of the total. */
+    showShare?: boolean;
+    /** Row activation. Rows with `href` render as links instead. */
+    onItemClick?: (item: BarListItem) => void;
+    size?: "sm" | "md";
+    /** `filled` puts the label on the bar; `track` draws a thin bar under the label. */
+    variant?: "filled" | "track";
+    loading?: boolean;
+    /** Rows of the loading skeleton. Default 5. */
+    loadingRows?: number;
+    /** Shown when `data` is empty. */
+    emptyMessage?: React.ReactNode;
+    labels?: Partial<ChartLabels>;
+    /** Accessible name of the list. */
+    "aria-label"?: string;
+}
+/**
+ * A ranked list with proportional bars — top pages, lead sources, referrers. Plain DOM (no chart
+ * library), so it is cheap enough for every dashboard card.
+ *
+ * ```tsx
+ * <BarList aria-label="Top sources" data={[{ key: "google", label: "Google", value: 4120 }]} showShare />
+ * ```
+ */
+export declare const BarList: React.ForwardRefExoticComponent<BarListProps & React.RefAttributes<HTMLOListElement>>;

package/dist/charts/bar-list.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowDownRight, ArrowUpRight } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useFormat, useLocale } from "../lib/locale.js";
+import { useLabels } from "../lib/labels.js";
+import { getCollator } from "../lib/text.js";
+import { Skeleton } from "../components/skeleton.js";
+import { chartLabels } from "./chart-shell.js";
+import { formatValue, resolveChartColor } from "./utils.js";
+const textOf = (item) => item.textLabel ?? (typeof item.label === "string" ? item.label : item.key);
+/**
+ * A ranked list with proportional bars — top pages, lead sources, referrers. Plain DOM (no chart
+ * library), so it is cheap enough for every dashboard card.
+ *
+ * ```tsx
+ * <BarList aria-label="Top sources" data={[{ key: "google", label: "Google", value: 4120 }]} showShare />
+ * ```
+ */
+export const BarList = React.forwardRef(function BarList({ data, format = "number", color, max, sort = "desc", showShare, onItemClick, size = "md", variant = "filled", loading, loadingRows = 5, emptyMessage, labels, className, ...props }, ref) {
+    const f = useFormat();
+    const { locale } = useLocale();
+    const t = useLabels("chart", chartLabels, labels);
+    const rows = React.useMemo(() => {
+        const collator = getCollator(locale);
+        const sorted = sort === "none" ? [...data] : [...data].sort((a, b) => (sort === "desc" ? b.value - a.value : a.value - b.value) || collator.compare(textOf(a), textOf(b)));
+        if (max && sorted.length > max) {
+            const rest = sorted.slice(max);
+            const other = { key: "__other", label: t("otherCount", { count: rest.length }), value: rest.reduce((s, r) => s + r.value, 0) };
+            return [...sorted.slice(0, max), other];
+        }
+        return sorted;
+    }, [data, sort, max, locale, t]);
+    const total = rows.reduce((s, r) => s + Math.max(0, r.value), 0);
+    const top = rows.reduce((m, r) => Math.max(m, r.value), 0) || 1;
+    const rowH = size === "sm" ? "h-7" : "h-8";
+    const barColor = color ? resolveChartColor(color) : undefined;
+    if (loading)
+        return (_jsxs("div", { "aria-busy": true, className: cn("grid gap-1.5", className), children: [_jsx("span", { role: "status", className: "sr-only", children: t("loading") }), Array.from({ length: loadingRows }, (_, i) => (_jsx(Skeleton, { className: cn(rowH), style: { width: `${96 - i * (70 / loadingRows)}%` } }, i)))] }));
+    if (!rows.length)
+        return _jsx("p", { className: cn("py-6 text-center text-[13px] text-fg-muted", className), children: emptyMessage ?? t("empty") });
+    return (_jsx("ol", { ref: ref, "data-slot": "bar-list", "data-variant": variant, className: cn("vui-bar-list grid gap-1", size === "sm" ? "text-[12.5px]" : "text-[13px]", className), ...props, children: rows.map((item) => {
+            const width = `${Math.max(0, (item.value / top) * 100)}%`;
+            const valueText = formatValue(f, format, item.value);
+            const share = total ? f.percent(item.value / total) : undefined;
+            const deltaText = item.delta !== undefined ? `${item.delta >= 0 ? "+" : "−"}${f.percent(Math.abs(item.delta))}` : undefined;
+            const srText = [textOf(item), valueText, showShare ? share : undefined, deltaText].filter(Boolean).join(", ");
+            const isOther = item.key === "__other";
+            const interactive = Boolean(item.href || (onItemClick && !isOther));
+            const inner = (_jsxs(_Fragment, { children: [variant === "filled" ? (_jsx("span", { "aria-hidden": true, className: cn("vui-bar-list-bar absolute inset-y-0 start-0 rounded-ui-sm", !barColor && "bg-accent-soft", isOther && "opacity-60"), style: { width, ...(barColor ? { background: `color-mix(in oklch, ${barColor} 24%, transparent)` } : null) } })) : null, _jsxs("span", { className: "relative flex min-w-0 flex-1 items-center gap-2 ps-2.5", children: [item.icon ? _jsx("span", { className: "flex size-4 shrink-0 items-center justify-center [&>img]:size-4 [&>img]:rounded-[3px] [&>svg]:size-3.5 text-fg-muted", children: item.icon }) : null, _jsx("span", { className: cn("truncate", isOther ? "text-fg-muted" : "text-fg"), title: textOf(item), children: item.label })] }), variant === "track" ? (_jsx("span", { "aria-hidden": true, className: "absolute inset-x-2.5 bottom-0.5 h-1 overflow-hidden rounded-full bg-track", children: _jsx("span", { className: cn("block h-full rounded-full", !barColor && "bg-accent-ink"), style: { width, ...(barColor ? { background: barColor } : null) } }) })) : null, _jsxs("span", { className: "relative flex shrink-0 items-center gap-3 pe-2.5 font-mono text-[12.5px] tabular", children: [item.delta !== undefined ? _jsx(BarListDelta, { value: item.delta, format: (v) => f.percent(Math.abs(v)) }) : null, _jsx("span", { className: "text-fg", children: valueText }), showShare ? _jsx("span", { className: "w-11 text-end text-fg-subtle", children: share }) : null] })] }));
+            const rowClass = cn("relative flex w-full items-center gap-3 rounded-ui-sm text-start", rowH, variant === "track" && "pb-1.5");
+            return (_jsxs("li", { className: "relative", children: [interactive ? null : _jsx("span", { className: "sr-only", children: srText }), item.href ? (_jsx("a", { href: item.href, "aria-label": srText, className: cn(rowClass, "transition-colors focus-ring hover:bg-hover"), children: inner })) : onItemClick && !isOther ? (_jsx("button", { type: "button", "aria-label": srText, onClick: () => onItemClick(item), className: cn(rowClass, "transition-colors focus-ring hover:bg-hover"), children: inner })) : (_jsx("div", { "aria-hidden": true, className: rowClass, children: inner }))] }, item.key));
+        }) }));
+});
+function BarListDelta({ value, format }) {
+    const up = value >= 0;
+    const Icon = up ? ArrowUpRight : ArrowDownRight;
+    return (_jsxs("span", { className: cn("inline-flex items-center gap-0.5 text-[11.5px]", up ? "text-success" : "text-danger"), children: [_jsx(Icon, { "aria-hidden": true, className: "size-3" }), up ? "+" : "−", format(value)] }));
+}