@hgdc/ui 0.2.1 → 0.3.0

package/dist/skeleton.js

@@ -0,0 +1,47 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "./cn.js";
+/**
+ * Un bloc de chargement : il prend la forme exacte de ce qu'il remplace (hauteur d'une ligne,
+ * largeur d'un titre), pour que rien ne saute à l'arrivée des données. `bg-foreground/6` plutôt
+ * que `bg-muted` : posé sur une carte `surface`, qui est déjà `muted` en clair, il restait invisible.
+ */
+export function Skeleton({ className, ...props }) {
+    return (_jsx("div", { "aria-hidden": true, "data-slot": "skeleton", className: cn("skeleton-pulse rounded-xl bg-foreground/6", className), ...props }));
+}
+/**
+ * Faut-il montrer le squelette ? Il n'apparaît qu'après `delay` (200 ms) et, une fois là, reste
+ * au moins `minDuration` (400 ms) : une donnée qui arrive en 250 ms ne fait pas clignoter
+ * l'écran deux fois.
+ */
+export function usePendingVisibility(pending, { delay = 200, minDuration = 400 } = {}) {
+    const [visible, setVisible] = useState(false);
+    const shownAt = useRef(0);
+    useEffect(() => {
+        if (pending === visible)
+            return;
+        const wait = pending ? delay : Math.max(0, shownAt.current + minDuration - Date.now());
+        const timer = setTimeout(() => {
+            if (pending)
+                shownAt.current = Date.now();
+            setVisible(pending);
+        }, wait);
+        return () => clearTimeout(timer);
+    }, [pending, visible, delay, minDuration]);
+    return visible;
+}
+/**
+ * Le contenu, ou son squelette quand il se fait attendre. Pendant le délai, rien n'est rendu :
+ * une page qui répond vite passe directement du vide au contenu.
+ */
+export function Pending({ pending, fallback, children, delay, minDuration, }) {
+    const showFallback = usePendingVisibility(pending, {
+        ...(delay !== undefined ? { delay } : {}),
+        ...(minDuration !== undefined ? { minDuration } : {}),
+    });
+    if (showFallback)
+        return (_jsxs("div", { "aria-busy": "true", "data-slot": "pending", children: [_jsx("span", { className: "sr-only", role: "status", children: "Chargement" }), fallback] }));
+    if (pending)
+        return null;
+    return _jsx(_Fragment, { children: children });
+}

package/dist/stat.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+export type StatDelta = {
+    /** Déjà formatée : « 12 % », « +340 ». */
+    value: string;
+    direction: "up" | "down" | "flat";
+    /**
+     * Ce qui est bon pour ce chiffre. Une hausse des erreurs est mauvaise : `good: "down"`.
+     * Par défaut, la hausse est bonne.
+     */
+    good?: "up" | "down";
+    /** Période de comparaison : « vs 7 jours précédents ». */
+    label?: string;
+};
+/**
+ * Une métrique : libellé, valeur en chiffres de largeur fixe, variation. La variation dit son
+ * sens par la flèche et par un texte lu aux lecteurs d'écran, pas par la couleur seule.
+ */
+export declare function StatTile({ label, value, delta, hint, icon, className, children, }: {
+    label: ReactNode;
+    value: ReactNode;
+    delta?: StatDelta;
+    /** Une précision sous la valeur (« sur 30 jours »). */
+    hint?: ReactNode;
+    icon?: ReactNode;
+    className?: string;
+    /** Un petit graphique (`TimeChart` compact) sous la valeur. */
+    children?: ReactNode;
+}): React.JSX.Element;
+/** Rangée de métriques : une colonne sur téléphone, deux puis quatre en s'élargissant. */
+export declare function StatGrid({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/stat.js

@@ -0,0 +1,26 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrowDownRight01Icon from "@hugeicons/core-free-icons/ArrowDownRight01Icon";
+import ArrowUpRight01Icon from "@hugeicons/core-free-icons/ArrowUpRight01Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { cn } from "./cn.js";
+const DIRECTION_TEXT = { up: "en hausse de", down: "en baisse de" };
+/**
+ * Une métrique : libellé, valeur en chiffres de largeur fixe, variation. La variation dit son
+ * sens par la flèche et par un texte lu aux lecteurs d'écran, pas par la couleur seule.
+ */
+export function StatTile({ label, value, delta, hint, icon, className, children, }) {
+    return (_jsxs("div", { "data-slot": "stat-tile", className: cn("surface flex min-w-0 flex-col gap-2 rounded-3xl p-5", className), children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("p", { className: "truncate text-sm text-muted-foreground", children: label }), icon ? (_jsx("span", { "aria-hidden": true, className: "text-muted-foreground [&_svg:not([class*='size-'])]:size-4", children: icon })) : null] }), _jsx("p", { className: "font-heading text-2xl font-semibold tracking-tight tabular-nums sm:text-[28px]", children: value }), delta || hint ? (_jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 text-xs", children: [delta ? _jsx(StatDeltaText, { delta: delta }) : null, hint ? _jsx("span", { className: "text-muted-foreground", children: hint }) : null] })) : null, children] }));
+}
+function StatDeltaText({ delta }) {
+    const good = delta.good ?? "up";
+    const tone = delta.direction === "flat"
+        ? "text-muted-foreground"
+        : delta.direction === good
+            ? "text-status-active-ink"
+            : "text-destructive";
+    return (_jsxs("span", { "data-slot": "stat-delta", "data-direction": delta.direction, className: cn("inline-flex items-center gap-0.5 font-medium tabular-nums", tone), children: [delta.direction === "flat" ? null : (_jsx(HugeiconsIcon, { icon: delta.direction === "up" ? ArrowUpRight01Icon : ArrowDownRight01Icon, strokeWidth: 2, "aria-hidden": true, className: "size-3.5" })), delta.direction === "flat" ? ("Stable") : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "sr-only", children: [DIRECTION_TEXT[delta.direction], " "] }), delta.value] })), delta.label ? _jsx("span", { className: "ml-1 font-normal text-muted-foreground", children: delta.label }) : null] }));
+}
+/** Rangée de métriques : une colonne sur téléphone, deux puis quatre en s'élargissant. */
+export function StatGrid({ className, ...props }) {
+    return _jsx("div", { "data-slot": "stat-grid", className: cn("grid gap-3 sm:grid-cols-2 lg:grid-cols-4", className), ...props });
+}

package/dist/status.d.ts

@@ -0,0 +1,22 @@
+/** Disponibilité d'un service, vocabulaire fermé de la famille (Status, Host, Mail). */
+export type ServiceStatus = "operational" | "degraded" | "outage" | "maintenance" | "unknown";
+export declare const SERVICE_STATUS_LABEL: Record<ServiceStatus, string>;
+/**
+ * Le point d'un statut, décoratif (`aria-hidden`) : il accompagne toujours un libellé.
+ * `live` ajoute l'anneau qui s'élargit, pour ce qui est en cours (incident, vérification DNS).
+ */
+export declare function StatusDot({ status, live, className, }: {
+    status: ServiceStatus;
+    live?: boolean;
+    className?: string;
+}): React.JSX.Element;
+/**
+ * Un statut : point et libellé, jamais la couleur seule. Le libellé par défaut est celui de la
+ * famille ; un produit peut le préciser (« Panne partielle ») sans changer de couleur.
+ */
+export declare function StatusBadge({ status, label, live, className, }: {
+    status: ServiceStatus;
+    label?: string;
+    live?: boolean;
+    className?: string;
+}): React.JSX.Element;

package/dist/status.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+export const SERVICE_STATUS_LABEL = {
+    operational: "Opérationnel",
+    degraded: "Dégradé",
+    outage: "Panne",
+    maintenance: "Maintenance",
+    unknown: "Inconnu",
+};
+const DOT = {
+    operational: "bg-status-operational",
+    degraded: "bg-status-degraded",
+    outage: "bg-status-outage",
+    maintenance: "bg-status-maintenance",
+    unknown: "bg-status-unknown",
+};
+const BADGE = {
+    operational: "bg-status-operational/12 text-status-operational-ink",
+    degraded: "bg-status-degraded/15 text-status-degraded-ink",
+    outage: "bg-status-outage/10 text-status-outage-ink",
+    maintenance: "bg-status-maintenance/12 text-status-maintenance-ink",
+    unknown: "bg-foreground/[0.06] text-status-unknown-ink",
+};
+/**
+ * Le point d'un statut, décoratif (`aria-hidden`) : il accompagne toujours un libellé.
+ * `live` ajoute l'anneau qui s'élargit, pour ce qui est en cours (incident, vérification DNS).
+ */
+export function StatusDot({ status, live = false, className, }) {
+    return (_jsxs("span", { "aria-hidden": true, "data-slot": "status-dot", className: cn("relative inline-flex size-2 shrink-0", className), children: [live ? _jsx("span", { className: cn("absolute inset-0 live-ping rounded-full", DOT[status]) }) : null, _jsx("span", { className: cn("relative inline-flex size-full rounded-full", DOT[status]) })] }));
+}
+/**
+ * Un statut : point et libellé, jamais la couleur seule. Le libellé par défaut est celui de la
+ * famille ; un produit peut le préciser (« Panne partielle ») sans changer de couleur.
+ */
+export function StatusBadge({ status, label, live = false, className, }) {
+    return (_jsxs("span", { "data-slot": "status-badge", "data-status": status, className: cn("inline-flex w-fit items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap", BADGE[status], className), children: [_jsx(StatusDot, { status: status, live: live, className: "size-1.5" }), label ?? SERVICE_STATUS_LABEL[status]] }));
+}

package/dist/table.d.ts

@@ -0,0 +1,50 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { ReactNode } from "react";
+/**
+ * Tableau de données. Posé sur une carte `surface` par défaut (`surface={false}` dans une carte
+ * qui en a déjà une), il défile horizontalement dans son cadre sur téléphone : la page, elle,
+ * ne défile jamais de côté.
+ */
+declare function Table({ className, surface, containerClassName, ...props }: React.ComponentProps<"table"> & {
+    surface?: boolean;
+    containerClassName?: string;
+}): React.JSX.Element;
+declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;
+declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;
+/**
+ * Une ligne. Avec un `TableRowLink` dedans, toute la ligne devient cliquable : survol teinté,
+ * lien étiré sur la ligne. Le lien reste un vrai lien (Tab, Entrée, clic milieu, « ouvrir dans
+ * un nouvel onglet »), là où un `onClick` sur `<tr>` n'en offrirait aucun.
+ */
+declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): React.JSX.Element;
+export type SortDirection = "ascending" | "descending" | "none";
+/**
+ * En-tête de colonne. Triable avec `onSort` : un bouton, l'état dans `aria-sort` (lu par les
+ * lecteurs d'écran) et une flèche. Le tri lui-même reste au produit, idéalement dans l'URL.
+ */
+declare function TableHead({ className, children, sort, onSort, numeric, ...props }: React.ComponentProps<"th"> & {
+    sort?: SortDirection;
+    onSort?: () => void;
+    /** Colonne de chiffres : alignée à droite, chiffres de largeur fixe. */
+    numeric?: boolean;
+}): React.JSX.Element;
+declare function TableCell({ className, numeric, ...props }: React.ComponentProps<"td"> & {
+    numeric?: boolean;
+}): React.JSX.Element;
+/**
+ * Le lien d'une ligne, dans sa première cellule : son libellé est le nom de la ressource, et son
+ * pseudo-élément couvre toute la ligne. `render={<Link to="…" />}` pour le routeur du produit.
+ */
+declare function TableRowLink({ className, render, ...props }: useRender.ComponentProps<"a">): React.JSX.Element;
+/** Aucune ligne : une phrase, et de quoi en créer une. Occupe toute la largeur du tableau. */
+declare function TableEmpty({ colSpan, children, className, }: {
+    colSpan: number;
+    children: ReactNode;
+    className?: string;
+}): React.JSX.Element;
+/** Lignes de chargement à la forme des vraies : même hauteur, même nombre de colonnes. */
+declare function TableSkeleton({ rows, columns }: {
+    rows?: number;
+    columns: number;
+}): React.JSX.Element;
+export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableRowLink, TableEmpty, TableSkeleton };

package/dist/table.js

@@ -0,0 +1,68 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrowDown01Icon from "@hugeicons/core-free-icons/ArrowDown01Icon";
+import ArrowUp01Icon from "@hugeicons/core-free-icons/ArrowUp01Icon";
+import ArrowUpDownIcon from "@hugeicons/core-free-icons/ArrowUpDownIcon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "./cn.js";
+import { Skeleton } from "./skeleton.js";
+/**
+ * Tableau de données. Posé sur une carte `surface` par défaut (`surface={false}` dans une carte
+ * qui en a déjà une), il défile horizontalement dans son cadre sur téléphone : la page, elle,
+ * ne défile jamais de côté.
+ */
+function Table({ className, surface = true, containerClassName, ...props }) {
+    return (_jsx("div", { "data-slot": "table-container", className: cn("relative w-full overflow-x-auto", surface && "surface rounded-3xl", containerClassName), children: _jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom border-collapse text-sm", className), ...props }) }));
+}
+function TableHeader({ className, ...props }) {
+    return _jsx("thead", { "data-slot": "table-header", className: cn(className), ...props });
+}
+function TableBody({ className, ...props }) {
+    return _jsx("tbody", { "data-slot": "table-body", className: cn(className), ...props });
+}
+/**
+ * Une ligne. Avec un `TableRowLink` dedans, toute la ligne devient cliquable : survol teinté,
+ * lien étiré sur la ligne. Le lien reste un vrai lien (Tab, Entrée, clic milieu, « ouvrir dans
+ * un nouvel onglet »), là où un `onClick` sur `<tr>` n'en offrirait aucun.
+ */
+function TableRow({ className, ...props }) {
+    return (_jsx("tr", { "data-slot": "table-row", className: cn("relative border-t border-foreground/5 transition-colors duration-(--duration-fast) ease-out", "[[data-slot=table-header]_&]:border-t-0", "has-data-[slot=table-row-link]:hover:bg-foreground/[0.03] has-data-[slot=table-row-link]:has-focus-visible:bg-foreground/[0.03]", "data-[state=selected]:bg-foreground/[0.04]", className), ...props }));
+}
+/**
+ * En-tête de colonne. Triable avec `onSort` : un bouton, l'état dans `aria-sort` (lu par les
+ * lecteurs d'écran) et une flèche. Le tri lui-même reste au produit, idéalement dans l'URL.
+ */
+function TableHead({ className, children, sort, onSort, numeric = false, ...props }) {
+    const sortable = onSort !== undefined;
+    const direction = sort ?? "none";
+    return (_jsx("th", { "data-slot": "table-head", scope: "col", "aria-sort": sortable ? direction : undefined, className: cn("h-11 px-4 text-left align-middle text-xs font-medium whitespace-nowrap text-muted-foreground first:pl-5 last:pr-5", numeric && "text-right", className), ...props, children: sortable ? (_jsxs("button", { type: "button", onClick: onSort, className: cn("-mx-1.5 inline-flex items-center gap-1 rounded-md px-1.5 py-1 outline-none transition-colors duration-(--duration-fast) ease-out hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50", direction !== "none" && "text-foreground", numeric && "flex-row-reverse"), children: [children, _jsx(HugeiconsIcon, { icon: direction === "ascending" ? ArrowUp01Icon : direction === "descending" ? ArrowDown01Icon : ArrowUpDownIcon, strokeWidth: 2, "aria-hidden": true, className: cn("size-3.5 shrink-0", direction === "none" && "opacity-50") })] })) : (children) }));
+}
+function TableCell({ className, numeric = false, ...props }) {
+    return (_jsx("td", { "data-slot": "table-cell", className: cn("px-4 py-3 align-middle first:pl-5 last:pr-5", numeric && "text-right tabular-nums", 
+        // Un bouton ou un menu dans une ligne cliquable passe au-dessus du lien étiré.
+        "[&_a:not([data-slot=table-row-link])]:relative [&_a:not([data-slot=table-row-link])]:z-1 [&_button]:relative [&_button]:z-1", className), ...props }));
+}
+/**
+ * Le lien d'une ligne, dans sa première cellule : son libellé est le nom de la ressource, et son
+ * pseudo-élément couvre toute la ligne. `render={<Link to="…" />}` pour le routeur du produit.
+ */
+function TableRowLink({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: "a",
+        render,
+        props: mergeProps({
+            "data-slot": "table-row-link",
+            className: cn("font-medium outline-none after:absolute after:inset-0 after:content-[''] focus-visible:after:ring-2 focus-visible:after:ring-ring/50 focus-visible:after:ring-inset", className),
+        }, props),
+    });
+}
+/** Aucune ligne : une phrase, et de quoi en créer une. Occupe toute la largeur du tableau. */
+function TableEmpty({ colSpan, children, className, }) {
+    return (_jsx("tr", { "data-slot": "table-empty", children: _jsx("td", { colSpan: colSpan, className: cn("px-5 py-12 text-center text-sm text-muted-foreground", className), children: children }) }));
+}
+/** Lignes de chargement à la forme des vraies : même hauteur, même nombre de colonnes. */
+function TableSkeleton({ rows = 5, columns }) {
+    return (_jsx(_Fragment, { children: Array.from({ length: rows }, (_, row) => (_jsx("tr", { "data-slot": "table-skeleton", "aria-hidden": true, className: "border-t border-foreground/5", children: Array.from({ length: columns }, (_, col) => (_jsx("td", { className: "px-4 py-3 first:pl-5 last:pr-5", children: _jsx(Skeleton, { className: cn("h-4 rounded-md", col === 0 ? "w-3/4" : "w-1/2") }) }, col))) }, row))) }));
+}
+export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableRowLink, TableEmpty, TableSkeleton };

package/dist/tabs.d.ts

@@ -0,0 +1,16 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+/**
+ * Onglets d'une même page (Aperçu, Journal, Réglages). Flèches pour passer d'un onglet à
+ * l'autre, Tab pour entrer dans le panneau. L'onglet ouvert a sa place dans l'URL quand on
+ * partage la page : `value` et `onValueChange` contrôlés par le routeur, ou des liens
+ * (`render={<Link to="…" />}` et `nativeButton={false}` sur `TabsTab`).
+ */
+declare function Tabs({ className, ...props }: TabsPrimitive.Root.Props): React.JSX.Element;
+/**
+ * La rangée d'onglets. L'onglet ouvert est marqué d'une pastille teintée qui glisse de l'un à
+ * l'autre, monochrome comme la barre latérale : l'accent reste au focus.
+ */
+declare function TabsList({ className, children, ...props }: TabsPrimitive.List.Props): React.JSX.Element;
+declare function TabsTab({ className, ...props }: TabsPrimitive.Tab.Props): React.JSX.Element;
+declare function TabsPanel({ className, ...props }: TabsPrimitive.Panel.Props): React.JSX.Element;
+export { Tabs, TabsList, TabsTab, TabsPanel };

package/dist/tabs.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cn } from "./cn.js";
+/**
+ * Onglets d'une même page (Aperçu, Journal, Réglages). Flèches pour passer d'un onglet à
+ * l'autre, Tab pour entrer dans le panneau. L'onglet ouvert a sa place dans l'URL quand on
+ * partage la page : `value` et `onValueChange` contrôlés par le routeur, ou des liens
+ * (`render={<Link to="…" />}` et `nativeButton={false}` sur `TabsTab`).
+ */
+function Tabs({ className, ...props }) {
+    return _jsx(TabsPrimitive.Root, { "data-slot": "tabs", className: cn("grid gap-6", className), ...props });
+}
+/**
+ * La rangée d'onglets. L'onglet ouvert est marqué d'une pastille teintée qui glisse de l'un à
+ * l'autre, monochrome comme la barre latérale : l'accent reste au focus.
+ */
+function TabsList({ className, children, ...props }) {
+    return (_jsxs(TabsPrimitive.List, { "data-slot": "tabs-list", className: cn("relative z-0 flex w-fit max-w-full items-center gap-1 overflow-x-auto [scrollbar-width:none]", className), ...props, children: [children, _jsx(TabsPrimitive.Indicator, { "data-slot": "tabs-indicator", className: "absolute top-(--active-tab-top) left-0 -z-1 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) rounded-full bg-foreground/[0.07] transition-[translate,width] duration-(--duration-base) ease-out motion-reduce:transition-none" })] }));
+}
+function TabsTab({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Tab, { "data-slot": "tabs-tab", className: cn("touch-target flex h-9 shrink-0 items-center justify-center gap-1.5 rounded-full px-3.5 text-sm font-medium whitespace-nowrap text-muted-foreground", "transition-colors duration-(--duration-fast) ease-out outline-none select-none", "hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 data-active:text-foreground", "data-disabled:pointer-events-none data-disabled:opacity-50", "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+function TabsPanel({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Panel, { "data-slot": "tabs-panel", className: cn("rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-ring/50", className), ...props }));
+}
+export { Tabs, TabsList, TabsTab, TabsPanel };

package/dist/time-chart.d.ts

@@ -0,0 +1,40 @@
+export type TimeSeries = {
+    /** Identifiant stable : la couleur suit la série, jamais son rang dans un filtre. */
+    key: string;
+    label: string;
+    /** Une valeur par horodatage de `timestamps` ; `null` : pas de mesure (la ligne s'interrompt). */
+    values: Array<number | null>;
+};
+/** Six teintes de la DA (`--chart-1` à `--chart-6`), dans l'ordre, jamais recyclées. */
+export declare const CHART_COLORS: ReadonlyArray<string>;
+/**
+ * Un maximum « rond » pour l'axe des valeurs, et ses graduations : 0, 25, 50, 75, 100 plutôt que
+ * 0, 23,7, 47,4. `ticks` est le nombre d'intervalles visé.
+ */
+export declare function niceScale(max: number, ticks?: number): {
+    max: number;
+    step: number;
+};
+/**
+ * Série temporelle en SVG, sans bibliothèque : lignes (aire sous la courbe pour une série seule)
+ * ou barres empilées. Le SVG s'étire à la largeur de son conteneur ; les traits gardent 2 px
+ * (`non-scaling-stroke`) et les textes restent en HTML, nets à toute taille.
+ *
+ * Survol ou flèches du clavier : un repère vertical et une infobulle avec chaque valeur. Les
+ * lecteurs d'écran ont un tableau des données. Légende dès deux séries.
+ */
+export declare function TimeChart({ timestamps, series, kind, height, compact, label, formatValue, formatTime, emptyLabel, className, }: {
+    timestamps: Array<number>;
+    series: Array<TimeSeries>;
+    kind?: "line" | "bar";
+    /** Hauteur de la zone de tracé, en pixels. */
+    height?: number;
+    /** Sans axes, grille ni légende : la courbe seule, sous un `StatTile`. */
+    compact?: boolean;
+    /** Ce que montre le graphique, pour les lecteurs d'écran : « Envois par jour ». */
+    label: string;
+    formatValue?: (value: number) => string;
+    formatTime?: (time: number) => string;
+    emptyLabel?: string;
+    className?: string;
+}): React.JSX.Element;

package/dist/time-chart.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "./cn.js";
+/** Six teintes de la DA (`--chart-1` à `--chart-6`), dans l'ordre, jamais recyclées. */
+export const CHART_COLORS = [
+    "var(--chart-1)",
+    "var(--chart-2)",
+    "var(--chart-3)",
+    "var(--chart-4)",
+    "var(--chart-5)",
+    "var(--chart-6)",
+];
+const number = new Intl.NumberFormat("fr-CH");
+const dayMonth = new Intl.DateTimeFormat("fr-CH", { day: "numeric", month: "short" });
+/**
+ * Un maximum « rond » pour l'axe des valeurs, et ses graduations : 0, 25, 50, 75, 100 plutôt que
+ * 0, 23,7, 47,4. `ticks` est le nombre d'intervalles visé.
+ */
+export function niceScale(max, ticks = 4) {
+    if (!(max > 0))
+        return { max: 1, step: 0.25 };
+    const raw = max / ticks;
+    const magnitude = 10 ** Math.floor(Math.log10(raw));
+    const residual = raw / magnitude;
+    const nice = residual <= 1 ? 1 : residual <= 2 ? 2 : residual <= 2.5 ? 2.5 : residual <= 5 ? 5 : 10;
+    const step = nice * magnitude;
+    return { max: Math.ceil(max / step) * step, step };
+}
+function linePath(values, max) {
+    let d = "";
+    let open = false;
+    values.forEach((v, i) => {
+        if (v === null) {
+            open = false;
+            return;
+        }
+        const x = i + 0.5;
+        const y = 100 - (v / max) * 100;
+        d += `${open ? "L" : "M"}${x} ${y}`;
+        open = true;
+    });
+    return d;
+}
+function areaPath(values, max) {
+    // Une aire par segment continu, fermée sur l'axe.
+    const parts = [];
+    let start = -1;
+    const close = (end) => {
+        if (start < 0)
+            return;
+        const segment = values.slice(start, end);
+        const top = segment
+            .map((v, j) => `${j === 0 ? "M" : "L"}${start + j + 0.5} ${100 - ((v ?? 0) / max) * 100}`)
+            .join("");
+        parts.push(`${top}L${end - 1 + 0.5} 100L${start + 0.5} 100Z`);
+        start = -1;
+    };
+    values.forEach((v, i) => {
+        if (v === null)
+            close(i);
+        else if (start < 0)
+            start = i;
+    });
+    close(values.length);
+    return parts.join("");
+}
+/**
+ * Série temporelle en SVG, sans bibliothèque : lignes (aire sous la courbe pour une série seule)
+ * ou barres empilées. Le SVG s'étire à la largeur de son conteneur ; les traits gardent 2 px
+ * (`non-scaling-stroke`) et les textes restent en HTML, nets à toute taille.
+ *
+ * Survol ou flèches du clavier : un repère vertical et une infobulle avec chaque valeur. Les
+ * lecteurs d'écran ont un tableau des données. Légende dès deux séries.
+ */
+export function TimeChart({ timestamps, series, kind = "line", height = 200, compact = false, label, formatValue = (v) => number.format(v), formatTime = (t) => dayMonth.format(t), emptyLabel = "Aucune donnée sur cette période.", className, }) {
+    const [active, setActive] = useState(null);
+    const n = timestamps.length;
+    const hasData = n > 0 && series.some((s) => s.values.some((v) => v !== null));
+    if (!hasData)
+        return (_jsx("div", { "data-slot": "time-chart", "data-state": "empty", style: { height }, className: cn("grid place-items-center rounded-2xl bg-foreground/[0.03] text-sm text-muted-foreground", className), children: emptyLabel }));
+    const totals = timestamps.map((_, i) => kind === "bar"
+        ? series.reduce((sum, s) => sum + (s.values[i] ?? 0), 0)
+        : Math.max(0, ...series.map((s) => s.values[i] ?? 0)));
+    const scale = niceScale(Math.max(0, ...totals));
+    const ticks = Array.from({ length: Math.round(scale.max / scale.step) + 1 }, (_, i) => i * scale.step);
+    const color = (index) => CHART_COLORS[index % CHART_COLORS.length] ?? "currentColor";
+    const indexFromPointer = (event) => {
+        const rect = event.currentTarget.getBoundingClientRect();
+        const ratio = (event.clientX - rect.left) / rect.width;
+        return Math.min(n - 1, Math.max(0, Math.floor(ratio * n)));
+    };
+    const onKeyDown = (event) => {
+        const moves = { ArrowLeft: -1, ArrowRight: 1, Home: -n, End: n };
+        if (event.key === "Escape")
+            return setActive(null);
+        const move = moves[event.key];
+        if (move === undefined)
+            return;
+        event.preventDefault();
+        setActive((current) => Math.min(n - 1, Math.max(0, (current ?? (move > 0 ? -1 : n)) + move)));
+    };
+    const activeTime = active !== null ? timestamps[active] : undefined;
+    const describe = (i) => {
+        const t = timestamps[i];
+        const values = series
+            .map((s) => `${s.label} ${s.values[i] == null ? "pas de mesure" : formatValue(s.values[i] ?? 0)}`)
+            .join(", ");
+        return t === undefined ? values : `${formatTime(t)} : ${values}`;
+    };
+    const xLabels = compact ? [] : [0, Math.floor((n - 1) / 2), n - 1].filter((v, i, a) => a.indexOf(v) === i);
+    return (_jsxs("figure", { "data-slot": "time-chart", className: cn("grid gap-3", className), children: [!compact && series.length > 1 ? (_jsx("figcaption", { className: "flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground", children: series.map((s, i) => (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("span", { "aria-hidden": true, className: "size-2.5 rounded-[3px]", style: { background: color(i) } }), s.label] }, s.key))) })) : null, _jsxs("div", { className: cn("grid", !compact && "grid-cols-[auto_minmax(0,1fr)] gap-x-2"), children: [!compact ? (_jsx("div", { "aria-hidden": true, className: "relative w-10 text-right text-[11px] text-muted-foreground tabular-nums", style: { height }, children: ticks.map((t) => (_jsx("span", { className: "absolute right-0 -translate-y-1/2", style: { top: `${100 - (t / scale.max) * 100}%` }, children: formatValue(t) }, t))) })) : null, _jsxs("div", { className: "grid gap-1.5", children: [_jsxs("div", { 
+                                // Un curseur sur le temps : les flèches le déplacent d'un point, et chaque position se
+                                // lit en entier (date et valeurs).
+                                role: "slider", tabIndex: 0, "aria-label": label, "aria-orientation": "horizontal", "aria-valuemin": 0, "aria-valuemax": n - 1, "aria-valuenow": active ?? n - 1, "aria-valuetext": describe(active ?? n - 1), onPointerMove: (event) => setActive(indexFromPointer(event)), onPointerLeave: () => setActive(null), onKeyDown: onKeyDown, onBlur: () => setActive(null), className: "relative rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/50", style: { height }, children: [_jsxs("svg", { viewBox: `0 0 ${n} 100`, preserveAspectRatio: "none", "aria-hidden": true, className: "absolute inset-0 size-full overflow-visible", children: [!compact
+                                                ? ticks.map((t) => (_jsx("line", { x1: 0, x2: n, y1: 100 - (t / scale.max) * 100, y2: 100 - (t / scale.max) * 100, vectorEffect: "non-scaling-stroke", className: t === 0 ? "stroke-foreground/15" : "stroke-foreground/[0.06]", strokeWidth: 1 }, t)))
+                                                : null, kind === "bar"
+                                                ? timestamps.map((_, i) => {
+                                                    let base = 100;
+                                                    return series.map((s, si) => {
+                                                        const v = s.values[i] ?? 0;
+                                                        const h = (v / scale.max) * 100;
+                                                        base -= h;
+                                                        return v > 0 ? (_jsx("rect", { x: i + 0.15, y: base, width: 0.7, height: h, fill: color(si), opacity: active === null || active === i ? 1 : 0.55 }, `${s.key}-${i}`)) : null;
+                                                    });
+                                                })
+                                                : series.map((s, si) => (_jsxs("g", { children: [series.length === 1 ? (_jsx("path", { d: areaPath(s.values, scale.max), fill: color(si), opacity: 0.1 })) : null, _jsx("path", { d: linePath(s.values, scale.max), fill: "none", stroke: color(si), strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" })] }, s.key))), active !== null ? (_jsx("line", { x1: active + 0.5, x2: active + 0.5, y1: 0, y2: 100, vectorEffect: "non-scaling-stroke", className: "stroke-foreground/25", strokeWidth: 1 })) : null] }), active !== null && activeTime !== undefined ? (_jsxs("div", { "data-slot": "time-chart-tooltip", className: cn("pointer-events-none absolute top-0 z-10 grid min-w-36 gap-1 rounded-xl bg-popover px-3 py-2 text-xs shadow-lg shadow-black/10 [--popover:var(--floating)]", (active + 0.5) / n > 0.6 ? "-translate-x-[calc(100%+0.75rem)]" : "translate-x-3"), style: { left: `${((active + 0.5) / n) * 100}%` }, children: [_jsx("p", { className: "font-medium", children: formatTime(activeTime) }), series.map((s, si) => (_jsxs("p", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-[2px]", style: { background: color(si) } }), _jsx("span", { className: "flex-1 text-muted-foreground", children: s.label }), _jsx("span", { className: "font-medium tabular-nums", children: s.values[active] === null ? "-" : formatValue(s.values[active] ?? 0) })] }, s.key)))] })) : null] }), xLabels.length > 0 ? (_jsx("div", { "aria-hidden": true, className: "relative h-4 text-[11px] text-muted-foreground tabular-nums", children: xLabels.map((i, k) => (_jsx("span", { className: cn("absolute", k === 0 ? "left-0" : k === xLabels.length - 1 ? "right-0" : "-translate-x-1/2"), style: k === 0 || k === xLabels.length - 1 ? undefined : { left: `${((i + 0.5) / n) * 100}%` }, children: timestamps[i] !== undefined ? formatTime(timestamps[i]) : null }, i))) })) : null] })] }), _jsxs("table", { className: "sr-only", children: [_jsx("caption", { children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Date" }), series.map((s) => (_jsx("th", { scope: "col", children: s.label }, s.key)))] }) }), _jsx("tbody", { children: timestamps.map((t, i) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: formatTime(t) }), series.map((s) => (_jsx("td", { children: s.values[i] === null ? "-" : formatValue(s.values[i] ?? 0) }, s.key)))] }, t))) })] })] }));
+}

package/dist/timeline.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import { type ServiceStatus } from "./status.tsx";
+export type TimelineEntry = {
+    id: string;
+    /** « Identifié », « Correctif déployé », « Résolu ». */
+    title: ReactNode;
+    description?: ReactNode;
+    /** Instant de l'étape, affiché en relatif avec la date exacte au survol. */
+    time: number | Date;
+    /** Couleur du point ; sans statut, un point neutre. */
+    status?: ServiceStatus;
+};
+/**
+ * Historique d'un incident, d'un envoi, d'un déploiement : une étape par ligne, reliées par un
+ * fil. Le produit les passe dans l'ordre voulu (le plus récent d'abord, d'habitude).
+ */
+export declare function Timeline({ entries, now, className, }: {
+    entries: Array<TimelineEntry>;
+    now?: number;
+    className?: string;
+}): React.JSX.Element;

package/dist/timeline.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RelativeTime } from "./relative-time.js";
+import { StatusDot } from "./status.js";
+import { cn } from "./cn.js";
+/**
+ * Historique d'un incident, d'un envoi, d'un déploiement : une étape par ligne, reliées par un
+ * fil. Le produit les passe dans l'ordre voulu (le plus récent d'abord, d'habitude).
+ */
+export function Timeline({ entries, now, className, }) {
+    return (_jsx("ol", { "data-slot": "timeline", className: cn("grid", className), children: entries.map((entry, index) => (_jsxs("li", { className: "relative grid grid-cols-[1rem_minmax(0,1fr)] gap-x-3 pb-6 last:pb-0", children: [index < entries.length - 1 ? (_jsx("span", { "aria-hidden": true, className: "absolute top-5 bottom-0 left-[calc(0.5rem-0.5px)] w-px bg-foreground/10" })) : null, _jsx("span", { className: "flex h-5 items-center justify-center", children: entry.status ? (_jsx(StatusDot, { status: entry.status, className: "size-2.5" })) : (_jsx("span", { "aria-hidden": true, className: "size-2.5 rounded-full bg-foreground/20" })) }), _jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2", children: [_jsx("p", { className: "text-sm font-medium", children: entry.title }), _jsx("span", { className: "text-xs text-muted-foreground", children: _jsx(RelativeTime, { date: entry.time, ...(now !== undefined ? { now } : {}) }) })] }), entry.description ? _jsx("div", { className: "mt-1 text-sm text-muted-foreground", children: entry.description }) : null] })] }, entry.id))) }));
+}

package/dist/tooltip.d.ts

@@ -0,0 +1,15 @@
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+/**
+ * Infobulle : le nom d'un bouton-icône ou d'un raccourci, pour la souris et le clavier. Jamais
+ * une information indispensable : elle n'existe pas au doigt (Base UI la coupe sur écran
+ * tactile). Le déclencheur porte toujours un `aria-label` qui dit la même chose. Pour une
+ * explication à lire, c'est un `Popover`.
+ *
+ * Un `TooltipProvider` autour de l'application : passée la première, les infobulles voisines
+ * s'ouvrent aussitôt, sans animation.
+ */
+declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.Props): React.JSX.Element;
+declare const Tooltip: typeof TooltipPrimitive.Root;
+declare const TooltipTrigger: typeof TooltipPrimitive.Trigger;
+declare function TooltipContent({ className, side, sideOffset, align, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, "side" | "sideOffset" | "align">): React.JSX.Element;
+export { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent };

package/dist/tooltip.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { FLOATING_COLLISION_AVOIDANCE, FLOATING_COLLISION_PADDING, FLOATING_MAX_WIDTH } from "./floating.js";
+import { cn } from "./cn.js";
+/**
+ * Infobulle : le nom d'un bouton-icône ou d'un raccourci, pour la souris et le clavier. Jamais
+ * une information indispensable : elle n'existe pas au doigt (Base UI la coupe sur écran
+ * tactile). Le déclencheur porte toujours un `aria-label` qui dit la même chose. Pour une
+ * explication à lire, c'est un `Popover`.
+ *
+ * Un `TooltipProvider` autour de l'application : passée la première, les infobulles voisines
+ * s'ouvrent aussitôt, sans animation.
+ */
+function TooltipProvider({ delay = 500, ...props }) {
+    return _jsx(TooltipPrimitive.Provider, { delay: delay, ...props });
+}
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+function TooltipContent({ className, side = "top", sideOffset = 6, align = "center", children, ...props }) {
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { className: "isolate z-50", side: side, sideOffset: sideOffset, align: align, collisionPadding: FLOATING_COLLISION_PADDING, collisionAvoidance: FLOATING_COLLISION_AVOIDANCE, children: _jsx(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", className: cn(FLOATING_MAX_WIDTH, 
+                // Encre inversée : une étiquette courte, lisible sur n'importe quel fond. Elle flotte,
+                // elle a donc une ombre, douce.
+                "w-fit max-w-xs origin-(--transform-origin) rounded-xl bg-foreground px-2.5 py-1.5 text-xs font-medium text-balance text-background shadow-lg shadow-black/10", "transition-[scale,opacity] duration-(--duration-fast) ease-out data-ending-style:scale-[0.97] data-ending-style:opacity-0 data-ending-style:duration-(--duration-instant) data-instant:transition-none data-starting-style:scale-[0.97] data-starting-style:opacity-0", "[&_kbd]:bg-background/15 [&_kbd]:text-background", className), ...props, children: children }) }) }));
+}
+export { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent };

package/dist/uptime-bar.d.ts

@@ -0,0 +1,24 @@
+import { type ServiceStatus } from "./status.tsx";
+export type UptimeDay = {
+    /** Le jour, en millisecondes ou en `Date`. */
+    date: number | Date;
+    /** Le pire statut du jour. `unknown` : pas de mesure (service plus récent que la période). */
+    status: ServiceStatus;
+    /** Disponibilité du jour, déjà formatée : « 99,98 % ». */
+    uptime?: string;
+    /** Ce qui s'est passé : « Panne de 12 min, base de données ». */
+    note?: string;
+};
+/**
+ * Une barre par jour, du plus ancien au plus récent, comme les pages de statut de référence.
+ * Chaque barre a sa couleur et, au survol, une infobulle en texte (jour, statut, disponibilité,
+ * note). Les lecteurs d'écran lisent la liste des jours, dont chacun dit son statut en mots.
+ */
+export declare function UptimeBar({ days, label, summary, className, }: {
+    days: Array<UptimeDay>;
+    /** Nom de la liste pour les lecteurs d'écran. */
+    label?: string;
+    /** Au centre de la légende : « 99,95 % sur 90 jours ». */
+    summary?: string;
+    className?: string;
+}): React.JSX.Element;