@hgdc/ui 0.2.1 → 0.4.0

package/dist/resource-list.d.ts

@@ -0,0 +1,31 @@
+import type { ReactElement, ReactNode } from "react";
+/**
+ * Liste de ressources (projets, domaines, clés, moniteurs) : une carte `surface`, une ligne par
+ * ressource, séparées d'un filet. La forme des listes de Host, plus lisible qu'un tableau quand
+ * chaque ressource tient en un titre et une ligne de méta.
+ */
+export declare function ResourceList({ className, surface, ...props }: React.ComponentProps<"ul"> & {
+    surface?: boolean;
+}): React.JSX.Element;
+/**
+ * Une ressource : icône, titre, méta, badge, actions. Avec `href` ou `render`, le titre devient
+ * le lien de la ligne, étiré sur toute sa surface ; les actions restent cliquables au-dessus.
+ */
+export declare function ResourceItem({ icon, title, meta, badge, actions, href, render, className, }: {
+    /** Icône, favicon ou marque, dans une tuile de 40 px. */
+    icon?: ReactNode;
+    title: ReactNode;
+    /** Une ligne de contexte : adresse, date, auteur. Tronquée si trop longue. */
+    meta?: ReactNode;
+    badge?: ReactNode;
+    /** Boutons-icônes ou menu « … ». */
+    actions?: ReactNode;
+    href?: string;
+    /** Lien du routeur du produit : `render={<Link to="…" />}`. */
+    render?: ReactElement;
+    className?: string;
+}): React.JSX.Element;
+/** Lignes de chargement à la forme d'un `ResourceItem` avec icône. */
+export declare function ResourceListSkeleton({ rows }: {
+    rows?: number;
+}): React.JSX.Element;

package/dist/resource-list.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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";
+/**
+ * Liste de ressources (projets, domaines, clés, moniteurs) : une carte `surface`, une ligne par
+ * ressource, séparées d'un filet. La forme des listes de Host, plus lisible qu'un tableau quand
+ * chaque ressource tient en un titre et une ligne de méta.
+ */
+export function ResourceList({ className, surface = true, ...props }) {
+    return (_jsx("ul", { "data-slot": "resource-list", className: cn("overflow-hidden", surface && "surface rounded-3xl", className), ...props }));
+}
+/**
+ * Une ressource : icône, titre, méta, badge, actions. Avec `href` ou `render`, le titre devient
+ * le lien de la ligne, étiré sur toute sa surface ; les actions restent cliquables au-dessus.
+ */
+export function ResourceItem({ icon, title, meta, badge, actions, href, render, className, }) {
+    const linked = href !== undefined || render !== undefined;
+    return (_jsxs("li", { "data-slot": "resource-item", className: cn("relative flex min-h-16 items-center gap-3 px-4 py-3 transition-colors duration-(--duration-fast) ease-out not-first:border-t not-first:border-foreground/5 sm:gap-4 sm:px-5", linked && "hover:bg-foreground/[0.03] has-focus-visible:bg-foreground/[0.03]", className), children: [icon ? (_jsx("span", { "aria-hidden": true, className: "grid size-10 shrink-0 place-items-center overflow-hidden rounded-xl bg-background text-muted-foreground dark:bg-muted [&_svg:not([class*='size-'])]:size-5", children: icon })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium", children: linked ? (_jsx(ResourceLink, { href: href, render: render, children: title })) : (title) }), meta ? _jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: meta }) : null] }), badge ? _jsx("div", { className: "hidden shrink-0 sm:block", children: badge }) : null, actions ? _jsx("div", { className: "relative z-1 flex shrink-0 items-center gap-1", children: actions }) : null] }));
+}
+function ResourceLink({ href, render, children, }) {
+    return useRender({
+        defaultTagName: "a",
+        render,
+        props: mergeProps({
+            "data-slot": "resource-link",
+            className: "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",
+        }, href !== undefined ? { href, children } : { children }),
+    });
+}
+/** Lignes de chargement à la forme d'un `ResourceItem` avec icône. */
+export function ResourceListSkeleton({ rows = 4 }) {
+    return (_jsx("ul", { "aria-hidden": true, "data-slot": "resource-list-skeleton", className: "surface overflow-hidden rounded-3xl", children: Array.from({ length: rows }, (_, i) => (_jsxs("li", { className: "flex min-h-16 items-center gap-4 px-5 py-3 not-first:border-t not-first:border-foreground/5", children: [_jsx(Skeleton, { className: "size-10 shrink-0" }), _jsxs("div", { className: "grid flex-1 gap-2", children: [_jsx(Skeleton, { className: "h-4 w-1/3 rounded-md" }), _jsx(Skeleton, { className: "h-3 w-1/2 rounded-md" })] })] }, i))) }));
+}

package/dist/secret-reveal.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Un secret qui ne s'affiche qu'une fois (clé d'API, jeton) : masqué à l'écran tant qu'on ne
+ * demande pas à le voir, copiable sans l'afficher, puis retiré de la page quand la personne
+ * confirme l'avoir mis de côté. Le produit, lui, n'en garde que l'empreinte.
+ */
+export declare function SecretReveal({ value, label, onDismiss, className, }: {
+    value: string;
+    /** Ce qu'est le secret : « Clé d'API », « Jeton de déploiement ». */
+    label?: string;
+    /** Appelé quand la personne confirme l'avoir copié : le produit oublie la valeur en clair. */
+    onDismiss?: () => void;
+    className?: string;
+}): React.JSX.Element;

package/dist/secret-reveal.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ViewIcon from "@hugeicons/core-free-icons/ViewIcon";
+import ViewOffIcon from "@hugeicons/core-free-icons/ViewOffIcon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useId, useState } from "react";
+import { Alert } from "./alert.js";
+import { Button } from "./button.js";
+import { CopyButton } from "./copy-button.js";
+import { cn } from "./cn.js";
+const MASK = "•".repeat(24);
+/**
+ * Un secret qui ne s'affiche qu'une fois (clé d'API, jeton) : masqué à l'écran tant qu'on ne
+ * demande pas à le voir, copiable sans l'afficher, puis retiré de la page quand la personne
+ * confirme l'avoir mis de côté. Le produit, lui, n'en garde que l'empreinte.
+ */
+export function SecretReveal({ value, label = "Clé secrète", onDismiss, className, }) {
+    const [visible, setVisible] = useState(false);
+    const [dismissed, setDismissed] = useState(false);
+    const id = useId();
+    if (dismissed)
+        return (_jsxs("div", { "data-slot": "secret-reveal", "data-state": "dismissed", className: cn("grid gap-2", className), children: [_jsx("p", { className: "text-sm font-medium", children: label }), _jsxs("p", { className: "rounded-2xl bg-foreground/[0.05] px-4 py-3 font-mono text-[13px] text-muted-foreground", children: [_jsx("span", { "aria-hidden": true, children: MASK }), _jsx("span", { className: "sr-only", children: "Valeur masqu\u00E9e" })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Cette valeur n'est plus affich\u00E9e. Pour en obtenir une nouvelle, cr\u00E9e une autre cl\u00E9." })] }));
+    return (_jsxs("div", { "data-slot": "secret-reveal", "data-state": "shown", className: cn("grid gap-3", className), children: [_jsx(Alert, { tone: "warning", title: "Copie-la maintenant", children: "Tu ne pourras plus la revoir une fois cette fen\u00EAtre ferm\u00E9e." }), _jsxs("div", { className: "grid gap-2", children: [_jsx("p", { id: id, className: "text-sm font-medium", children: label }), _jsxs("div", { className: "flex min-w-0 items-center gap-1 rounded-2xl bg-foreground/[0.05] py-1.5 pr-1.5 pl-4", children: [_jsx("code", { "aria-labelledby": id, className: "min-w-0 flex-1 truncate py-1 font-mono text-[13px]", children: visible ? value : MASK }), _jsx("button", { type: "button", onClick: () => setVisible((v) => !v), "aria-label": visible ? "Masquer" : "Afficher", "aria-pressed": visible, title: visible ? "Masquer" : "Afficher", className: "touch-target grid size-8 shrink-0 place-items-center rounded-lg text-muted-foreground outline-none hover:bg-foreground/[0.06] hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50", children: _jsx(HugeiconsIcon, { icon: visible ? ViewOffIcon : ViewIcon, "aria-hidden": true, className: "size-4" }) }), _jsx(CopyButton, { value: value, label: `Copier : ${label}` })] })] }), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { variant: "outline", onClick: () => {
+                        setDismissed(true);
+                        onDismiss?.();
+                    }, children: "C'est copi\u00E9" }) })] }));
+}

package/dist/skeleton.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+/**
+ * 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 declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export type PendingTiming = {
+    /** Attente avant d'afficher le squelette : une réponse rapide n'en montre aucun (ms). */
+    delay?: number;
+    /** Durée minimale d'affichage d'un squelette apparu, pour qu'il ne clignote pas (ms). */
+    minDuration?: number;
+};
+/**
+ * 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 declare function usePendingVisibility(pending: boolean, { delay, minDuration }?: PendingTiming): boolean;
+/**
+ * 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 declare function Pending({ pending, fallback, children, delay, minDuration, }: PendingTiming & {
+    pending: boolean;
+    fallback: ReactNode;
+    children?: ReactNode;
+}): React.JSX.Element | null;

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/sonner.d.ts

@@ -1,3 +1,22 @@
 import { type ToasterProps } from "sonner";
 declare function Toaster(props: ToasterProps): React.JSX.Element;
-export { Toaster };
+/**
+ * Retour d'une action réversible, avec « Annuler » pendant quelques secondes : on agit tout de
+ * suite (mise à jour optimiste), sans boîte de confirmation, et on laisse revenir en arrière.
+ * Une action qui ne se rattrape pas passe par `DestructiveDialog`.
+ *
+ * `onUndo` défait l'action. `onCommit`, s'il est donné, part quand le toast se ferme sans
+ * annulation (délai écoulé, fermé à la main) : pour une action différée, envoyée seulement
+ * une fois le délai passé. Rend l'identifiant du toast (`toast.dismiss(id)`).
+ */
+declare function toastUndo(message: React.ReactNode, { onUndo, onCommit, description, duration, undoLabel, }: {
+    onUndo: () => unknown;
+    onCommit?: () => unknown;
+    description?: React.ReactNode;
+    /** En millisecondes ; Sonner met le délai en pause au survol et quand l'onglet est caché. */
+    duration?: number;
+    undoLabel?: string;
+}): string | number;
+/** Le message d'une erreur, lisible : celui de l'`Error`, sinon une phrase générique. */
+declare function errorMessage(error: unknown, fallback?: string): string;
+export { Toaster, toastUndo, errorMessage };

package/dist/sonner.js

@@ -4,7 +4,7 @@ import CheckmarkCircle02Icon from "@hugeicons/core-free-icons/CheckmarkCircle02I
 import InformationCircleIcon from "@hugeicons/core-free-icons/InformationCircleIcon";
 import MultiplicationSignCircleIcon from "@hugeicons/core-free-icons/MultiplicationSignCircleIcon";
 import { HugeiconsIcon } from "@hugeicons/react";
-import { Toaster as Sonner } from "sonner";
+import { Toaster as Sonner, toast } from "sonner";
 import { Spinner } from "./spinner.js";
 import { useTheme } from "./theme.js";
 function Toaster(props) {
@@ -30,4 +30,45 @@ function Toaster(props) {
             },
         }, ...props }));
 }
-export { Toaster };
+/**
+ * Retour d'une action réversible, avec « Annuler » pendant quelques secondes : on agit tout de
+ * suite (mise à jour optimiste), sans boîte de confirmation, et on laisse revenir en arrière.
+ * Une action qui ne se rattrape pas passe par `DestructiveDialog`.
+ *
+ * `onUndo` défait l'action. `onCommit`, s'il est donné, part quand le toast se ferme sans
+ * annulation (délai écoulé, fermé à la main) : pour une action différée, envoyée seulement
+ * une fois le délai passé. Rend l'identifiant du toast (`toast.dismiss(id)`).
+ */
+function toastUndo(message, { onUndo, onCommit, description, duration = 6000, undoLabel = "Annuler", }) {
+    let settled = false;
+    const commit = () => {
+        if (settled)
+            return;
+        settled = true;
+        void onCommit?.();
+    };
+    return toast(message, {
+        description,
+        duration,
+        action: {
+            label: undoLabel,
+            onClick: () => {
+                if (settled)
+                    return;
+                settled = true;
+                void onUndo();
+            },
+        },
+        onAutoClose: commit,
+        onDismiss: commit,
+    });
+}
+/** Le message d'une erreur, lisible : celui de l'`Error`, sinon une phrase générique. */
+function errorMessage(error, fallback = "Quelque chose n'a pas marché. Réessaie.") {
+    if (error instanceof Error && error.message.trim() !== "")
+        return error.message;
+    if (typeof error === "string" && error.trim() !== "")
+        return error;
+    return fallback;
+}
+export { Toaster, toastUndo, errorMessage };

package/dist/sparkline.d.ts

@@ -0,0 +1,21 @@
+/** Ce que la courbe dit, en une phrase, pour qui ne la voit pas. */
+export declare function describeSparkline(label: string, values: ReadonlyArray<number | null>, format?: (value: number) => string): string;
+/**
+ * Tendance en un trait, sans axe ni info-bulle, à côté d'un chiffre (ligne de tableau, `StatTile`).
+ * L'échelle va du minimum au maximum de la série : c'est la forme qui compte, pas le zéro. Pour lire
+ * des valeurs, c'est `TimeChart`. Les lecteurs d'écran entendent l'étendue et la dernière valeur.
+ */
+export declare function Sparkline({ values, label, color, area, height, formatValue, className, }: {
+    /** Du plus ancien au plus récent ; `null` : pas de mesure, le trait s'interrompt. */
+    values: ReadonlyArray<number | null>;
+    /** Ce que mesure la courbe : « Envois sur 7 jours ». */
+    label: string;
+    /** Teinte `--chart-1` à `--chart-6`. */
+    color?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Lavis sous la courbe. */
+    area?: boolean;
+    /** En pixels ; la largeur suit le conteneur. */
+    height?: number;
+    formatValue?: (value: number) => string;
+    className?: string;
+}): React.JSX.Element;

package/dist/sparkline.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { areaPath, linePath } from "./chart-path.js";
+import { cn } from "./cn.js";
+import { CHART_COLORS } from "./time-chart.js";
+const number = new Intl.NumberFormat("fr-CH");
+/** Ce que la courbe dit, en une phrase, pour qui ne la voit pas. */
+export function describeSparkline(label, values, format = (v) => number.format(v)) {
+    const known = values.filter((v) => v !== null);
+    const last = known.at(-1);
+    if (last === undefined)
+        return `${label} : aucune donnée`;
+    return `${label} : de ${format(Math.min(...known))} à ${format(Math.max(...known))}, dernière valeur ${format(last)}`;
+}
+/**
+ * Tendance en un trait, sans axe ni info-bulle, à côté d'un chiffre (ligne de tableau, `StatTile`).
+ * L'échelle va du minimum au maximum de la série : c'est la forme qui compte, pas le zéro. Pour lire
+ * des valeurs, c'est `TimeChart`. Les lecteurs d'écran entendent l'étendue et la dernière valeur.
+ */
+export function Sparkline({ values, label, color = 1, area = true, height = 32, formatValue, className, }) {
+    const known = values.filter((v) => v !== null);
+    const min = Math.min(...known);
+    const max = Math.max(...known);
+    const stroke = CHART_COLORS[color - 1] ?? "currentColor";
+    const description = describeSparkline(label, values, formatValue);
+    // Une série plate se dessine au milieu ; une marge en haut et en bas garde le trait entier.
+    const [lo, hi] = max > min ? [min, max] : [min - 1, max + 1];
+    return (_jsx("span", { "data-slot": "sparkline", role: "img", "aria-label": description, style: { height }, className: cn("inline-block w-24 min-w-0 align-middle", className), children: known.length > 0 ? (_jsxs("svg", { "aria-hidden": true, viewBox: `0 -6 ${values.length} 112`, preserveAspectRatio: "none", className: "block size-full overflow-visible", children: [area ? _jsx("path", { d: areaPath(values, hi, lo), fill: stroke, opacity: 0.12 }) : null, _jsx("path", { d: linePath(values, hi, lo), fill: "none", stroke: stroke, strokeWidth: 1.5, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" })] })) : (_jsx("span", { "aria-hidden": true, className: "flex size-full items-center", children: _jsx("span", { className: "h-px w-full bg-foreground/10" }) })) }));
+}

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 };