@hgdc/ui 0.2.0 → 0.3.0

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;

package/dist/uptime-bar.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SERVICE_STATUS_LABEL } from "./status.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { cn } from "./cn.js";
+const BAR = {
+    operational: "bg-status-operational",
+    degraded: "bg-status-degraded",
+    outage: "bg-status-outage",
+    maintenance: "bg-status-maintenance",
+    unknown: "bg-foreground/10",
+};
+const day = new Intl.DateTimeFormat("fr-CH", { weekday: "short", day: "numeric", month: "short" });
+function describe(entry) {
+    return [day.format(entry.date), SERVICE_STATUS_LABEL[entry.status], entry.uptime, entry.note]
+        .filter(Boolean)
+        .join(" · ");
+}
+/**
+ * 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 function UptimeBar({ days, label = "Disponibilité", summary, className, }) {
+    return (_jsxs("div", { "data-slot": "uptime-bar", className: cn("grid gap-2", className), children: [_jsx("ol", { "aria-label": label, className: "flex h-8 items-stretch gap-[2px]", children: days.map((entry) => (_jsx("li", { className: "flex min-w-0 flex-1", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("span", {}), className: cn("block w-full rounded-[3px] transition-opacity duration-(--duration-fast) ease-out hover:opacity-70 data-popup-open:opacity-70", BAR[entry.status]), children: _jsx("span", { className: "sr-only", children: describe(entry) }) }), _jsx(TooltipContent, { children: describe(entry) })] }) }, new Date(entry.date).toISOString()))) }), _jsxs("div", { "aria-hidden": true, className: "flex items-center justify-between gap-2 text-xs text-muted-foreground tabular-nums", children: [_jsx("span", { children: days.length > 0 ? `il y a ${days.length} jours` : null }), summary ? _jsx("span", { className: "text-foreground", children: summary }) : null, _jsx("span", { children: "Aujourd'hui" })] })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Interface de la H family : jetons de la DA, thèmes, polices et composants.",
   "license": "UNLICENSED",
   "homepage": "https://github.com/hugogebel-boop/hgdc-kit/tree/main/packages/ui#readme",

package/styles.css

@@ -18,6 +18,9 @@
 @source "./dist";
 
 @custom-variant dark (&:is(.dark *));
+/* Barre latérale réduite en rail : `data-sidebar="rail"` sur <html>, posé avant la première
+   peinture par `sidebarInitScript` (`@hgdc/ui/app-shell`). */
+@custom-variant rail (&:where([data-sidebar="rail"] *));
 
 /* Courbes et durées. Pas d'ease-in : il démarre lentement à l'instant où l'œil regarde. */
 @theme {
@@ -55,7 +58,6 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
-  --color-surface-hover: var(--surface-hover);
   --color-shell: var(--shell);
   --color-shell-foreground: var(--shell-foreground);
   --color-shell-muted: var(--shell-muted-foreground);
@@ -66,7 +68,26 @@
   --color-status-active: var(--status-active);
   --color-status-paused: var(--status-paused);
   --color-status-done: var(--status-done);
+  --color-status-active-ink: var(--status-active-ink);
+  --color-status-paused-ink: var(--status-paused-ink);
+  --color-info: var(--info);
+  --color-info-ink: var(--info-ink);
   --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-chart-6: var(--chart-6);
+  --color-status-operational: var(--status-operational);
+  --color-status-operational-ink: var(--status-operational-ink);
+  --color-status-degraded: var(--status-degraded);
+  --color-status-degraded-ink: var(--status-degraded-ink);
+  --color-status-outage: var(--status-outage);
+  --color-status-outage-ink: var(--status-outage-ink);
+  --color-status-maintenance: var(--status-maintenance);
+  --color-status-maintenance-ink: var(--status-maintenance-ink);
+  --color-status-unknown: var(--status-unknown);
+  --color-status-unknown-ink: var(--status-unknown-ink);
   --color-inverse: var(--inverse);
   --color-inverse-foreground: var(--inverse-foreground);
   --color-inverse-muted: var(--inverse-muted);
@@ -87,36 +108,63 @@
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
+  /* Synonymes gardés pour les primitives shadcn : ils suivent leur jeton de rôle. */
+  --popover: var(--card);
+  --popover-foreground: var(--card-foreground);
   /* Menus et sélecteurs (`floating.ts`) : fond opaque, un cran au-dessus de la carte en sombre. */
   --floating: oklch(1 0 0);
   --floating-muted: oklch(0.97 0 0);
   --primary: oklch(0.205 0 0);
   --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
+  --secondary: var(--muted);
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
   /* L=0.52 : 4,5:1 sur `muted`. */
   --muted-foreground: oklch(0.52 0 0);
-  --accent: oklch(0.55 0.25 296);
-  --accent-foreground: oklch(0.985 0 0);
+  /* `--brand-accent*` : couleur d’un client posée par le produit, sans toucher au kit. */
+  --accent: var(--brand-accent, oklch(0.55 0.25 296));
+  --accent-foreground: var(--brand-accent-foreground, oklch(0.985 0 0));
   --accent-soft: color-mix(in oklch, var(--accent) 10%, transparent);
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: var(--accent);
-  --surface-hover: oklch(0.945 0 0);
   /* Coque de l'application : barre latérale et en-tête. */
   --shell: oklch(0.955 0 0);
   --shell-foreground: oklch(0.145 0 0);
   --shell-muted-foreground: oklch(0.45 0 0);
   --shell-hover: oklch(0 0 0 / 5%);
   --shell-active: oklch(0 0 0 / 8%);
-  --chart-1: oklch(0.62 0.19 256);
+  /* Séries de graphique, dans cet ordre, jamais recyclées : une 7e série se replie en « Autres ».
+     Validées (daltonisme, écart entre voisines) sur `surface` en clair et sur `card` en sombre.
+     En clair, 2 à 5 passent sous 3:1 : un graphique les accompagne d'une légende et de libellés. */
+  --chart-1: oklch(0.575 0.163 255.5);
+  --chart-2: oklch(0.671 0.175 40.6);
+  --chart-3: oklch(0.669 0.141 162.1);
+  --chart-4: oklch(0.764 0.161 75.1);
+  --chart-5: oklch(0.716 0.141 357.4);
+  --chart-6: oklch(0.527 0.197 283.4);
+  /* Disponibilité d'un service : toujours avec un libellé (`StatusBadge`), jamais la couleur seule.
+     Chaque jeton suit une couleur de la DA, donc les deux thèmes. */
+  --status-operational: var(--status-active);
+  --status-operational-ink: var(--status-active-ink);
+  --status-degraded: var(--status-paused);
+  --status-degraded-ink: var(--status-paused-ink);
+  --status-outage: var(--destructive);
+  --status-outage-ink: var(--destructive);
+  --status-maintenance: var(--info);
+  --status-maintenance-ink: var(--info-ink);
+  --status-unknown: var(--muted-foreground);
+  --status-unknown-ink: var(--muted-foreground);
   --status-active: oklch(0.55 0.15 156);
   --status-paused: oklch(0.62 0.14 75);
   --status-done: oklch(0.52 0.2 293);
+  /* Encres : le texte d'un statut sur son lavis (4,5:1), la couleur vive restant aux pastilles. */
+  --status-active-ink: oklch(0.45 0.12 155);
+  --status-paused-ink: oklch(0.5 0.12 70);
+  /* Information : bleu, pour que le violet reste l'accent. */
+  --info: oklch(0.62 0.19 256);
+  --info-ink: oklch(0.48 0.17 256);
   --success: oklch(0.58 0.15 152);
   --success-foreground: oklch(0.985 0 0);
   /* Panneau inversé de la vitrine : encre sombre dans les deux thèmes. */
@@ -133,31 +181,36 @@
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.205 0 0);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
   --floating: oklch(0.255 0 0);
   --floating-muted: oklch(0.315 0 0);
   --primary: oklch(0.922 0 0);
   --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.269 0 0);
   --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.74 0.19 296);
-  --accent-foreground: oklch(0.205 0 0);
+  --accent: var(--brand-accent-dark, oklch(0.74 0.19 296));
+  --accent-foreground: var(--brand-accent-dark-foreground, oklch(0.205 0 0));
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --surface-hover: oklch(0.25 0 0);
   --shell: oklch(0.08 0 0);
   --shell-foreground: oklch(0.985 0 0);
   --shell-muted-foreground: oklch(0.708 0 0);
   --shell-hover: oklch(1 0 0 / 6%);
   --shell-active: oklch(1 0 0 / 12%);
-  --chart-1: oklch(0.68 0.16 256);
+  --chart-1: oklch(0.622 0.161 255.1);
+  --chart-2: oklch(0.622 0.173 40.1);
+  --chart-3: oklch(0.621 0.128 163.1);
+  --chart-4: oklch(0.67 0.143 73.2);
+  --chart-5: oklch(0.622 0.171 0.8);
+  --chart-6: oklch(0.67 0.145 286.8);
   --status-active: oklch(0.74 0.14 156);
   --status-paused: oklch(0.82 0.15 86);
   --status-done: oklch(0.68 0.17 293);
+  --status-active-ink: var(--status-active);
+  --status-paused-ink: var(--status-paused);
+  --info: oklch(0.7 0.16 256);
+  --info-ink: var(--info);
   --success: oklch(0.7 0.15 152);
   --success-foreground: oklch(0.16 0.02 152);
   --inverse: oklch(0.1 0 0);
@@ -209,15 +262,11 @@
 
 /* ── Surfaces ──────────────────────────────────────────────────────────── */
 
-/* Niveau 1 de la DA : une teinte, ni ombre ni bordure. `muted` en clair, `card` en sombre.
-   Dans la surface, un élément `muted` devient blanc au lieu de disparaître, sans carte dans
-   la carte. En utilitaire pour qu'un `hover:` posé sur la carte garde la main. */
+/* Niveau 1 de la DA : une teinte, ni ombre ni bordure. `muted` en clair, `card` en sombre
+   (un cran plus clair que la page). */
 @utility surface {
   background-color: var(--muted);
-  & > * {
-    --muted: var(--background);
-  }
-  .dark & {
+  :where(.dark) & {
     background-color: var(--card);
   }
 }
@@ -227,12 +276,12 @@
   background-color: var(--muted);
   transition: background-color var(--duration-fast) var(--ease-out);
   &:hover {
-    background-color: var(--surface-hover);
+    background-color: oklch(0.94 0 0);
   }
-  .dark & {
+  :where(.dark) & {
     background-color: var(--card);
   }
-  .dark &:hover {
+  :where(.dark) &:hover {
     background-color: var(--muted);
   }
 }