@hgdc/ui 0.4.0 → 0.5.0

package/dist/date-range-picker.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Calendar03Icon from "@hugeicons/core-free-icons/Calendar03Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useId, useState } from "react";
+import { Button } from "./button.js";
+import { cn } from "./cn.js";
+import { Input } from "./input.js";
+import { Label } from "./label.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+const ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
+/** Une date ISO (`2026-10-15`) en `Date` locale à minuit, ou `null` si elle n'existe pas (31 février). */
+export function parseIsoDate(value) {
+    const match = ISO_DATE.exec(value);
+    if (!match)
+        return null;
+    const [year, month, day] = [Number(match[1]), Number(match[2]), Number(match[3])];
+    const date = new Date(year, month - 1, day);
+    return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day ? date : null;
+}
+/** Une `Date` en date ISO, dans le fuseau du navigateur. */
+export function toIsoDate(date) {
+    const pad = (n) => String(n).padStart(2, "0");
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+function shift(iso, days) {
+    const date = parseIsoDate(iso) ?? new Date();
+    date.setDate(date.getDate() + days);
+    return toIsoDate(date);
+}
+function lastDays(days) {
+    return (today) => ({ from: shift(today, -(days - 1)), to: today });
+}
+/** Périodes proposées par défaut : 7, 30 et 90 jours, ce mois-ci, le mois dernier. */
+export const DEFAULT_DATE_RANGE_PRESETS = [
+    { key: "7d", label: "7 derniers jours", range: lastDays(7) },
+    { key: "30d", label: "30 derniers jours", range: lastDays(30) },
+    { key: "90d", label: "90 derniers jours", range: lastDays(90) },
+    { key: "month", label: "Ce mois-ci", range: (today) => ({ from: `${today.slice(0, 8)}01`, to: today }) },
+    {
+        key: "last-month",
+        label: "Le mois dernier",
+        range: (today) => {
+            const first = parseIsoDate(`${today.slice(0, 8)}01`) ?? new Date();
+            const end = new Date(first.getFullYear(), first.getMonth(), 0);
+            return { from: toIsoDate(new Date(end.getFullYear(), end.getMonth(), 1)), to: toIsoDate(end) };
+        },
+    },
+];
+const rangeFormat = new Intl.DateTimeFormat("fr-CH", { day: "numeric", month: "short", year: "numeric" });
+/**
+ * « 1 au 15 oct. 2026 », « 28 sept. au 4 oct. 2026 » : le format de période d'`Intl`, son tiret
+ * remplacé par « au », plus lisible et sans tiret long dans l'interface.
+ */
+export function formatDateRange(range) {
+    const from = parseIsoDate(range.from);
+    const to = parseIsoDate(range.to);
+    if (!from || !to)
+        return "Période invalide";
+    if (range.from === range.to)
+        return rangeFormat.format(from);
+    return rangeFormat.formatRange(from, to).replace(/\s*[–—-]\s*/u, " au ");
+}
+/** Erreur d'une période saisie, ou `null` si elle tient. */
+export function validateDateRange(range, bounds = {}) {
+    if (!parseIsoDate(range.from) || !parseIsoDate(range.to))
+        return "Choisis une date de début et une date de fin.";
+    if (range.from > range.to)
+        return "La date de début doit précéder la date de fin.";
+    if (bounds.min && range.from < bounds.min)
+        return `Les données commencent le ${formatDateRange({ from: bounds.min, to: bounds.min })}.`;
+    if (bounds.max && range.to > bounds.max)
+        return `Choisis une fin au plus tard le ${formatDateRange({ from: bounds.max, to: bounds.max })}.`;
+    return null;
+}
+/**
+ * Choix d'une période pour un tableau de bord : des raccourcis (7, 30, 90 jours, mois) et une
+ * période libre en deux champs de date. Les champs sont ceux du navigateur, sans calendrier
+ * maison : clavier, lecteurs d'écran et sélecteur natif du téléphone fonctionnent d'office.
+ * Contrôlé : la période vit dans l'URL du produit.
+ */
+export function DateRangePicker({ value, onChange, presets = DEFAULT_DATE_RANGE_PRESETS, today: todayProp, min, max, label = "Période", className, }) {
+    // La date du navigateur, lue une fois au montage : un rendu ne doit pas dépendre de l'horloge.
+    const [browserToday] = useState(() => toIsoDate(new Date()));
+    const today = todayProp ?? browserToday;
+    const upper = max ?? today;
+    const [open, setOpen] = useState(false);
+    const [draft, setDraft] = useState(value);
+    const [error, setError] = useState(null);
+    const id = useId();
+    const activePreset = presets.find((p) => {
+        const r = p.range(today);
+        return r.from === value.from && r.to === value.to;
+    });
+    const summary = activePreset?.label ?? formatDateRange(value);
+    const onOpenChange = (next) => {
+        if (next) {
+            setDraft(value);
+            setError(null);
+        }
+        setOpen(next);
+    };
+    const apply = (event) => {
+        event.preventDefault();
+        const problem = validateDateRange(draft, { ...(min ? { min } : {}), max: upper });
+        setError(problem);
+        if (problem)
+            return;
+        onChange(draft, null);
+        setOpen(false);
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsxs(PopoverTrigger, { render: _jsx(Button, { variant: "outline", size: "sm", className: cn("justify-start", className) }), "aria-label": `${label} : ${summary}`, children: [_jsx(HugeiconsIcon, { icon: Calendar03Icon, "aria-hidden": true, "data-icon": "inline-start" }), _jsx("span", { className: "truncate", children: summary })] }), _jsx(PopoverContent, { align: "start", className: "w-[min(36rem,calc(100vw-1rem))] gap-0 p-0", "aria-label": label, children: _jsxs("div", { className: "grid sm:grid-cols-[12rem_1fr]", children: [_jsx("ul", { "aria-label": "Raccourcis", className: "grid content-start gap-0.5 border-b border-border p-1.5 sm:border-r sm:border-b-0", children: presets.map((preset) => {
+                                const pressed = preset.key === activePreset?.key;
+                                return (_jsx("li", { children: _jsx("button", { type: "button", "aria-pressed": pressed, onClick: () => {
+                                            onChange(preset.range(today), preset.key);
+                                            setOpen(false);
+                                        }, className: cn("flex min-h-10 w-full items-center rounded-xl px-3 text-left text-sm outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 lg:min-h-9", pressed && "bg-muted font-medium"), children: preset.label }) }, preset.key));
+                            }) }), _jsxs("form", { onSubmit: apply, noValidate: true, className: "grid content-start gap-3 p-4", children: [_jsx("p", { className: "text-sm font-medium", children: "P\u00E9riode libre" }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-from`, children: "Du" }), _jsx(Input, { id: `${id}-from`, type: "date", value: draft.from, ...(min ? { min } : {}), max: upper, "aria-invalid": error ? true : undefined, "aria-describedby": error ? `${id}-error` : undefined, onChange: (event) => setDraft((d) => ({ ...d, from: event.target.value })) })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-to`, children: "Au" }), _jsx(Input, { id: `${id}-to`, type: "date", value: draft.to, ...(min ? { min } : {}), max: upper, "aria-invalid": error ? true : undefined, "aria-describedby": error ? `${id}-error` : undefined, onChange: (event) => setDraft((d) => ({ ...d, to: event.target.value })) })] })] }), error ? (_jsx("p", { id: `${id}-error`, role: "alert", className: "soft-in text-sm text-destructive", children: error })) : null, _jsx(Button, { type: "submit", size: "sm", className: "justify-self-end", children: "Appliquer" })] })] }) })] }));
+}

package/dist/date-time-field.d.ts

@@ -0,0 +1,18 @@
+/** Un instant (millisecondes) en valeur de `<input type="datetime-local">`, à la minute, dans le fuseau du navigateur. */
+export declare function toDateTimeLocal(time: number): string;
+/** La valeur d'un champ `datetime-local` en instant (millisecondes), ou `null` si elle est vide ou invalide. */
+export declare function fromDateTimeLocal(value: string): number | null;
+/**
+ * Date et heure d'un envoi programmé, d'une fenêtre de maintenance : le champ du navigateur
+ * (sélecteur natif sur téléphone, clavier, lecteurs d'écran), avec la valeur en millisecondes
+ * comme Convex la stocke. L'heure est celle du navigateur, à la minute.
+ *
+ * Dans un `Field`, le libellé et la description se relient tout seuls.
+ */
+export declare function DateTimeField({ value, onChange, min, max, className, ...props }: Omit<React.ComponentProps<"input">, "type" | "value" | "onChange" | "min" | "max" | "defaultValue"> & {
+    value: number | null;
+    onChange: (value: number | null) => void;
+    /** Instant le plus tôt accepté (millisecondes) : `Date.now()` pour un envoi programmé. */
+    min?: number;
+    max?: number;
+}): React.JSX.Element;

package/dist/date-time-field.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from "./input.js";
+/** Un instant (millisecondes) en valeur de `<input type="datetime-local">`, à la minute, dans le fuseau du navigateur. */
+export function toDateTimeLocal(time) {
+    const date = new Date(time);
+    const pad = (n) => String(n).padStart(2, "0");
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+const LOCAL = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2}))?$/;
+/** La valeur d'un champ `datetime-local` en instant (millisecondes), ou `null` si elle est vide ou invalide. */
+export function fromDateTimeLocal(value) {
+    const match = LOCAL.exec(value);
+    if (!match)
+        return null;
+    const [year, month, day, hour, minute, second] = match.slice(1).map((part) => Number(part ?? 0));
+    const date = new Date(year, month - 1, day, hour, minute, second);
+    // `Date` corrige un 31 février en 3 mars : une date qui n'existe pas est refusée.
+    if (date.getMonth() !== month - 1 || date.getDate() !== day)
+        return null;
+    return date.getTime();
+}
+/**
+ * Date et heure d'un envoi programmé, d'une fenêtre de maintenance : le champ du navigateur
+ * (sélecteur natif sur téléphone, clavier, lecteurs d'écran), avec la valeur en millisecondes
+ * comme Convex la stocke. L'heure est celle du navigateur, à la minute.
+ *
+ * Dans un `Field`, le libellé et la description se relient tout seuls.
+ */
+export function DateTimeField({ value, onChange, min, max, className, ...props }) {
+    return (_jsx(Input, { ...props, type: "datetime-local", step: 60, value: value === null ? "" : toDateTimeLocal(value), ...(min !== undefined ? { min: toDateTimeLocal(min) } : {}), ...(max !== undefined ? { max: toDateTimeLocal(max) } : {}), onChange: (event) => onChange(fromDateTimeLocal(event.target.value)), ...(className !== undefined ? { className } : {}) }));
+}

package/dist/money-field.d.ts

@@ -0,0 +1,31 @@
+/** Des centimes en montant suisse : `125050` → « 1’250.50 », `-500` → « -5.00 ». */
+export declare function formatMoney(centimes: number): string;
+/** Comme `formatMoney`, précédé de la devise : « CHF 1’250.50 ». */
+export declare function formatChf(centimes: number): string;
+export type MoneyParse = {
+    ok: true;
+    centimes: number | null;
+} | {
+    ok: false;
+};
+/**
+ * Lit un montant saisi, en centimes, sans passer par les flottants. Accepte les écritures d'ici :
+ * « 1’250.50 », « 1'250,50 », « 1 250.5 », « CHF 12.– », « 12.- ». Vide : `centimes: null`.
+ * Plus de deux décimales, deux virgules ou des lettres : `ok: false`.
+ */
+export declare function parseMoney(text: string): MoneyParse;
+/**
+ * Un montant en francs suisses, stocké en centimes (entier) : prix, budget, seuil d'alerte. Le
+ * champ accepte les écritures courantes (apostrophe, virgule, « 12.– ») et se remet au format
+ * suisse en quittant le champ. Clavier numérique sur téléphone.
+ *
+ * Une saisie invalide ou hors bornes n'appelle pas `onChange` et s'explique sous le champ.
+ */
+export declare function MoneyField({ value, onChange, min, max, className, id: idProp, ...props }: Omit<React.ComponentProps<"input">, "value" | "onChange" | "min" | "max" | "type" | "defaultValue"> & {
+    /** En centimes ; `null` : vide. */
+    value: number | null;
+    onChange: (centimes: number | null) => void;
+    /** En centimes, `0` par défaut (pas de montant négatif) ; `null` : sans borne. */
+    min?: number | null;
+    max?: number;
+}): React.JSX.Element;

package/dist/money-field.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { cn } from "./cn.js";
+import { useFieldDescribedBy, useFieldId } from "./field.js";
+import { Input } from "./input.js";
+/** Apostrophe typographique, séparateur des milliers en Suisse : « 1’250.50 ». */
+const GROUP = "’";
+/** Des centimes en montant suisse : `125050` → « 1’250.50 », `-500` → « -5.00 ». */
+export function formatMoney(centimes) {
+    const sign = centimes < 0 ? "-" : "";
+    const abs = Math.abs(Math.round(centimes));
+    const francs = String(Math.floor(abs / 100)).replace(/\B(?=(\d{3})+(?!\d))/g, GROUP);
+    return `${sign}${francs}.${String(abs % 100).padStart(2, "0")}`;
+}
+/** Comme `formatMoney`, précédé de la devise : « CHF 1’250.50 ». */
+export function formatChf(centimes) {
+    return `CHF ${formatMoney(centimes)}`;
+}
+/**
+ * Lit un montant saisi, en centimes, sans passer par les flottants. Accepte les écritures d'ici :
+ * « 1’250.50 », « 1'250,50 », « 1 250.5 », « CHF 12.– », « 12.- ». Vide : `centimes: null`.
+ * Plus de deux décimales, deux virgules ou des lettres : `ok: false`.
+ */
+export function parseMoney(text) {
+    const compact = text
+        .replace(/^\s*(CHF|Fr\.)\s*/i, "")
+        // `\s` couvre aussi les espaces insécables qu'Intl met entre les milliers.
+        .replace(/[\s'’]/g, "")
+        .replace(/\.[-–—]$/, "")
+        .replace(",", ".");
+    if (compact === "")
+        return { ok: true, centimes: null };
+    const match = /^(-?)(\d*)(?:\.(\d{0,2}))?$/.exec(compact);
+    if (!match || (match[2] === "" && !match[3]))
+        return { ok: false };
+    const francs = Number(match[2] || "0");
+    const cents = Number((match[3] ?? "").padEnd(2, "0"));
+    const centimes = francs * 100 + cents;
+    if (!Number.isSafeInteger(centimes))
+        return { ok: false };
+    return { ok: true, centimes: match[1] && centimes !== 0 ? -centimes : centimes };
+}
+/**
+ * Un montant en francs suisses, stocké en centimes (entier) : prix, budget, seuil d'alerte. Le
+ * champ accepte les écritures courantes (apostrophe, virgule, « 12.– ») et se remet au format
+ * suisse en quittant le champ. Clavier numérique sur téléphone.
+ *
+ * Une saisie invalide ou hors bornes n'appelle pas `onChange` et s'explique sous le champ.
+ */
+export function MoneyField({ value, onChange, min = 0, max, className, id: idProp, ...props }) {
+    const fieldId = useFieldId();
+    const fieldDescribedBy = useFieldDescribedBy();
+    const ownId = useId();
+    const id = idProp ?? fieldId ?? ownId;
+    const errorId = `${id}-money-error`;
+    const display = (centimes) => (centimes === null ? "" : formatMoney(centimes));
+    const [text, setText] = useState(display(value));
+    const [shown, setShown] = useState(value);
+    const [error, setError] = useState(null);
+    // Un montant changé par le produit (réinitialisation) remplace la saisie.
+    if (shown !== value) {
+        setShown(value);
+        const parsed = parseMoney(text);
+        if (!parsed.ok || parsed.centimes !== value)
+            setText(display(value));
+    }
+    const check = (next) => {
+        const parsed = parseMoney(next);
+        if (!parsed.ok)
+            return { error: "Montant invalide. Écris par exemple 1’250.50." };
+        const { centimes } = parsed;
+        if (centimes !== null && min !== null && centimes < min)
+            return { error: `Au moins ${formatChf(min)}.` };
+        if (centimes !== null && max !== undefined && centimes > max)
+            return { error: `Au plus ${formatChf(max)}.` };
+        return { centimes };
+    };
+    const describedBy = [props["aria-describedby"] ?? fieldDescribedBy, error ? errorId : null].filter(Boolean).join(" ");
+    return (_jsxs("div", { "data-slot": "money-field", className: cn("grid gap-1.5", className), children: [_jsxs("div", { className: "relative", children: [_jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute inset-y-0 left-3.5 flex items-center text-sm text-muted-foreground", children: "CHF" }), _jsx(Input, { ...props, id: id, type: "text", inputMode: "decimal", autoComplete: "off", value: text, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy || undefined, onChange: (event) => {
+                            const next = event.target.value;
+                            setText(next);
+                            const result = check(next);
+                            if ("error" in result)
+                                return;
+                            setError(null);
+                            if (result.centimes !== value) {
+                                setShown(result.centimes);
+                                onChange(result.centimes);
+                            }
+                        }, onBlur: (event) => {
+                            props.onBlur?.(event);
+                            const result = check(text);
+                            if ("error" in result)
+                                return setError(result.error);
+                            setError(null);
+                            setText(display(result.centimes));
+                        }, className: "pl-12 text-right tabular-nums" })] }), error ? (_jsx("p", { id: errorId, role: "alert", className: "soft-in text-sm text-destructive", children: error })) : null] }));
+}

package/dist/products.d.ts

@@ -0,0 +1,44 @@
+import type { IconSvgElement } from "@hugeicons/react";
+/** Où en est un produit : seul ce qui répond s'ouvre depuis les menus. */
+export type ProductStage = "live" | "preview" | "soon";
+export declare const PRODUCT_STAGE_LABEL: Readonly<Record<ProductStage, string>>;
+/** Un produit de la famille, tel que la vision le décrit. */
+export type HgdcCatalogProduct = {
+    /** Le mot de « HGDC <mot> » : « Host ». */
+    word: string;
+    /** « HGDC Host ». */
+    name: string;
+    /** « host.hgdc.ch ». */
+    subdomain: string;
+    href: string;
+    /** Une phrase, au tutoiement. */
+    pitch: string;
+    icon: IconSvgElement;
+    stage: ProductStage;
+};
+/** HGDC Account : le compte commun (profil, sécurité, organisations), hors du catalogue des produits. */
+export declare const HGDC_ACCOUNT: HgdcCatalogProduct;
+/** Les produits de la famille, dans leur ordre d'affichage. Account n'en fait pas partie (`HGDC_ACCOUNT`). */
+export declare const HGDC_PRODUCTS: ReadonlyArray<HgdcCatalogProduct>;
+/** Vrai si le produit répond déjà (en service ou en préversion). */
+export declare function isProductOpen(item: Pick<HgdcCatalogProduct, "stage">): boolean;
+/** Une entrée du menu « Produits HGDC » d'`AccountMenu`. */
+export type ProductMenuEntry = {
+    name: string;
+    href: string;
+    /** Le produit ouvert : coché, sans lien. */
+    current?: boolean;
+    icon?: IconSvgElement;
+    /** Texte discret à droite : « Préversion ». */
+    hint?: string;
+};
+/**
+ * Les entrées du menu du compte : Account d'abord, puis les produits ouverts. `current` est le
+ * mot du produit affiché (« Mail ») : il est coché. `accountHref` remplace l'adresse d'Account
+ * (un Account local en développement).
+ */
+export declare function productMenuEntries(options?: {
+    current?: string | undefined;
+    accountHref?: string | undefined;
+    catalog?: ReadonlyArray<HgdcCatalogProduct> | undefined;
+}): Array<ProductMenuEntry>;

package/dist/products.js

@@ -0,0 +1,47 @@
+import Activity01Icon from "@hugeicons/core-free-icons/Activity01Icon";
+import Analytics01Icon from "@hugeicons/core-free-icons/Analytics01Icon";
+import BookOpen01Icon from "@hugeicons/core-free-icons/BookOpen01Icon";
+import Briefcase01Icon from "@hugeicons/core-free-icons/Briefcase01Icon";
+import Mail01Icon from "@hugeicons/core-free-icons/Mail01Icon";
+import Rocket01Icon from "@hugeicons/core-free-icons/Rocket01Icon";
+import UserCircleIcon from "@hugeicons/core-free-icons/UserCircleIcon";
+export const PRODUCT_STAGE_LABEL = {
+    live: "En service",
+    preview: "Préversion",
+    soon: "Bientôt",
+};
+function product(word, pitch, icon, stage) {
+    const subdomain = `${word.toLowerCase()}.hgdc.ch`;
+    return { word, name: `HGDC ${word}`, subdomain, href: `https://${subdomain}`, pitch, icon, stage };
+}
+/** HGDC Account : le compte commun (profil, sécurité, organisations), hors du catalogue des produits. */
+export const HGDC_ACCOUNT = product("Account", "Ton compte HGDC : profil, sécurité et organisations, pour tous les produits.", UserCircleIcon, "live");
+/** Les produits de la famille, dans leur ordre d'affichage. Account n'en fait pas partie (`HGDC_ACCOUNT`). */
+export const HGDC_PRODUCTS = [
+    product("Host", "Ton site en ligne, déployé à chaque modification.", Rocket01Icon, "preview"),
+    product("Mail", "Tes e-mails, newsletters et formulaires, envoyés depuis ton adresse.", Mail01Icon, "live"),
+    product("Portal", "Un espace partagé où ton client suit son projet, signe et paie.", Briefcase01Icon, "soon"),
+    product("Status", "La surveillance de tes sites et ta page de statut.", Activity01Icon, "soon"),
+    product("Analytics", "Tes visiteurs mesurés, sans cookies ni bannière.", Analytics01Icon, "soon"),
+    product("Docs", "Ta documentation en ligne, avec un assistant qui y répond.", BookOpen01Icon, "soon"),
+];
+/** Vrai si le produit répond déjà (en service ou en préversion). */
+export function isProductOpen(item) {
+    return item.stage !== "soon";
+}
+/**
+ * Les entrées du menu du compte : Account d'abord, puis les produits ouverts. `current` est le
+ * mot du produit affiché (« Mail ») : il est coché. `accountHref` remplace l'adresse d'Account
+ * (un Account local en développement).
+ */
+export function productMenuEntries(options = {}) {
+    const current = options.current?.toLowerCase();
+    const account = { ...HGDC_ACCOUNT, href: options.accountHref ?? HGDC_ACCOUNT.href };
+    return [account, ...(options.catalog ?? HGDC_PRODUCTS).filter(isProductOpen)].map((item) => ({
+        name: item.name,
+        href: item.href,
+        icon: item.icon,
+        ...(item.word.toLowerCase() === current ? { current: true } : {}),
+        ...(item.stage === "preview" ? { hint: PRODUCT_STAGE_LABEL.preview } : {}),
+    }));
+}

package/dist/progress.d.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+/**
+ * L'avancement d'une tâche qui finit : import, build, envoi d'une campagne. `value={null}` :
+ * durée inconnue, une barre qui glisse (immobile si le mouvement est réduit). Base UI pose
+ * `role="progressbar"` et ses valeurs `aria`.
+ *
+ * Pour une quantité dans une plage (quota, stockage), `Meter`.
+ */
+export declare function Progress({ label, value, max, valueText, showValue, className, }: {
+    /** Ce qui avance, visible et nom accessible : « Envoi de la campagne ». */
+    label: ReactNode;
+    value: number | null;
+    max?: number;
+    /** Texte de la valeur, lu aussi par les lecteurs d'écran : « 120 sur 400 e-mails ». Pourcentage par défaut. */
+    valueText?: string;
+    showValue?: boolean;
+    className?: string;
+}): React.JSX.Element;
+/** Seuils d'une jauge : au-delà de `warning`, orange ; au-delà de `danger`, rouge. En fraction de `max`. */
+export type MeterThresholds = {
+    warning?: number;
+    danger?: number;
+};
+/**
+ * Une quantité dans une plage connue : quota d'envoi du mois, stockage, sièges. La couleur passe
+ * à l'orange puis au rouge près de la limite, et le texte dit toujours la valeur : jamais la
+ * couleur seule. Base UI pose `role="meter"`.
+ */
+export declare function Meter({ label, value, max, valueText, thresholds, className, }: {
+    /** « E-mails envoyés ce mois ». */
+    label: ReactNode;
+    value: number;
+    max?: number;
+    /** « 8’200 sur 10’000 ». Pourcentage par défaut. */
+    valueText?: string;
+    thresholds?: MeterThresholds;
+    className?: string;
+}): React.JSX.Element;

package/dist/progress.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Meter as MeterPrimitive } from "@base-ui/react/meter";
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
+import { cn } from "./cn.js";
+const TRACK = "relative h-1.5 w-full overflow-hidden rounded-full bg-foreground/[0.08]";
+const LABEL = "text-sm font-medium";
+const VALUE = "text-sm text-muted-foreground tabular-nums";
+/**
+ * L'avancement d'une tâche qui finit : import, build, envoi d'une campagne. `value={null}` :
+ * durée inconnue, une barre qui glisse (immobile si le mouvement est réduit). Base UI pose
+ * `role="progressbar"` et ses valeurs `aria`.
+ *
+ * Pour une quantité dans une plage (quota, stockage), `Meter`.
+ */
+export function Progress({ label, value, max = 100, valueText, showValue = true, className, }) {
+    return (_jsxs(ProgressPrimitive.Root, { "data-slot": "progress", value: value, max: max, locale: "fr-CH", ...(valueText !== undefined ? { getAriaValueText: () => valueText } : {}), className: cn("grid grid-cols-[1fr_auto] items-baseline gap-x-3 gap-y-2", className), children: [_jsx(ProgressPrimitive.Label, { className: LABEL, children: label }), showValue && value !== null ? (_jsx(ProgressPrimitive.Value, { className: VALUE, children: (formatted) => valueText ?? formatted })) : (_jsx("span", {})), _jsx(ProgressPrimitive.Track, { className: cn(TRACK, "col-span-2"), children: _jsx(ProgressPrimitive.Indicator, { className: cn("block h-full rounded-full bg-primary transition-[width] duration-(--duration-base) ease-out", "data-indeterminate:absolute data-indeterminate:inset-y-0 data-indeterminate:w-1/3 data-indeterminate:progress-slide") }) })] }));
+}
+/**
+ * Une quantité dans une plage connue : quota d'envoi du mois, stockage, sièges. La couleur passe
+ * à l'orange puis au rouge près de la limite, et le texte dit toujours la valeur : jamais la
+ * couleur seule. Base UI pose `role="meter"`.
+ */
+export function Meter({ label, value, max = 100, valueText, thresholds = { warning: 0.8, danger: 0.95 }, className, }) {
+    const ratio = max > 0 ? value / max : 0;
+    const level = thresholds.danger !== undefined && ratio >= thresholds.danger
+        ? "danger"
+        : thresholds.warning !== undefined && ratio >= thresholds.warning
+            ? "warning"
+            : "normal";
+    return (_jsxs(MeterPrimitive.Root, { "data-slot": "meter", "data-level": level, value: Math.min(Math.max(value, 0), max), max: max, locale: "fr-CH", ...(valueText !== undefined ? { getAriaValueText: () => valueText } : {}), className: cn("grid grid-cols-[1fr_auto] items-baseline gap-x-3 gap-y-2", className), children: [_jsx(MeterPrimitive.Label, { className: LABEL, children: label }), _jsx(MeterPrimitive.Value, { className: VALUE, children: (formatted) => valueText ?? formatted }), _jsx(MeterPrimitive.Track, { className: cn(TRACK, "col-span-2"), children: _jsx(MeterPrimitive.Indicator, { className: cn("block h-full rounded-full transition-[width] duration-(--duration-base) ease-out", level === "danger" ? "bg-destructive" : level === "warning" ? "bg-status-degraded" : "bg-primary") }) })] }));
+}

package/dist/rank-bar.d.ts

@@ -0,0 +1,28 @@
+import type { ReactElement, ReactNode } from "react";
+export type RankItem = {
+    /** Identifiant stable de la ligne. */
+    key: string;
+    label: ReactNode;
+    value: number;
+    /** Icône ou pastille avant le libellé (drapeau, favicon), décorative. */
+    icon?: ReactNode;
+    /** La ligne mène au détail : `<Link to="…" />` ou `<a href="…" />`. */
+    render?: ReactElement;
+};
+/**
+ * Classement d'un tableau de bord : pages les plus vues, domaines qui envoient le plus, pays.
+ * Une ligne par élément, triée du plus grand au plus petit, sa barre proportionnelle au premier.
+ * Une liste ordonnée : le rang se lit sans la barre, et chaque valeur s'écrit.
+ */
+export declare function RankBar({ label, items, limit, formatValue, valueLabel, emptyLabel, className, }: {
+    /** Nom de la liste pour les lecteurs d'écran : « Pages les plus vues ». */
+    label: string;
+    items: ReadonlyArray<RankItem>;
+    /** Nombre de lignes affichées ; le reste n'est pas rendu (le produit offre « Tout voir »). */
+    limit?: number;
+    formatValue?: (value: number) => string;
+    /** En-tête de la colonne des valeurs, visible : « Visites ». */
+    valueLabel?: ReactNode;
+    emptyLabel?: ReactNode;
+    className?: string;
+}): React.JSX.Element;

package/dist/rank-bar.js

@@ -0,0 +1,31 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "./cn.js";
+const number = new Intl.NumberFormat("fr-CH");
+function RankRow({ item, max, formatValue, }) {
+    const width = max > 0 ? Math.max(0, Math.min(1, item.value / max)) : 0;
+    const content = (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, "data-slot": "rank-bar-fill", className: "absolute inset-y-0 left-0 rounded-lg bg-foreground/[0.06] transition-[width] duration-(--duration-base) ease-out", style: { width: `${width * 100}%` } }), _jsxs("span", { className: "relative flex min-w-0 flex-1 items-center gap-2", children: [item.icon ? (_jsx("span", { "aria-hidden": true, className: "grid size-4 shrink-0 place-items-center", children: item.icon })) : null, _jsx("span", { className: "min-w-0 truncate", children: item.label })] }), _jsx("span", { className: "relative shrink-0 font-medium tabular-nums", children: formatValue(item.value) })] }));
+    const row = "relative flex min-h-9 items-center gap-3 rounded-lg px-2.5 text-sm";
+    const link = useRender({
+        render: item.render,
+        enabled: item.render !== undefined,
+        props: {
+            className: cn(row, "outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-foreground/[0.04] focus-visible:ring-2 focus-visible:ring-ring/50"),
+            children: content,
+        },
+    });
+    return _jsx("li", { children: link ?? _jsx("div", { className: row, children: content }) });
+}
+/**
+ * Classement d'un tableau de bord : pages les plus vues, domaines qui envoient le plus, pays.
+ * Une ligne par élément, triée du plus grand au plus petit, sa barre proportionnelle au premier.
+ * Une liste ordonnée : le rang se lit sans la barre, et chaque valeur s'écrit.
+ */
+export function RankBar({ label, items, limit, formatValue = (v) => number.format(v), valueLabel, emptyLabel = "Rien à classer sur cette période.", className, }) {
+    const sorted = [...items].sort((a, b) => b.value - a.value);
+    const shown = limit === undefined ? sorted : sorted.slice(0, limit);
+    const max = shown[0]?.value ?? 0;
+    if (shown.length === 0)
+        return (_jsx("p", { "data-slot": "rank-bar", "data-state": "empty", className: cn("py-6 text-center text-sm text-muted-foreground", className), children: emptyLabel }));
+    return (_jsxs("div", { "data-slot": "rank-bar", className: cn("grid gap-1", className), children: [valueLabel ? (_jsx("p", { "aria-hidden": true, className: "flex justify-end px-2.5 text-xs text-muted-foreground", children: valueLabel })) : null, _jsx("ol", { "aria-label": label, className: "grid gap-1", children: shown.map((item) => (_jsx(RankRow, { item: item, max: max, formatValue: formatValue }, item.key))) })] }));
+}

package/dist/settings-section.d.ts

@@ -0,0 +1,40 @@
+import { type ReactNode } from "react";
+/**
+ * Un bloc de réglages : titre, description, champs, et un pied avec son propre bouton
+ * Enregistrer. Chaque bloc s'enregistre seul : on ne perd pas la saisie d'un bloc en validant
+ * un autre, et l'erreur dit lequel a échoué. Repris de la page de réglages de Host.
+ *
+ * Avec `onSave`, le bloc est un formulaire : Entrée dans un champ enregistre, le bouton reste
+ * grisé tant que `dirty` est faux et tourne pendant `saving`. Sans `onSave`, `footer` reçoit
+ * les actions telles quelles (« Supprimer le projet » d'un bloc `tone="danger"`).
+ *
+ * ```tsx
+ * <SettingsSection
+ *   title="Nom de l'espace"
+ *   description="Visible par les membres et dans les e-mails d'invitation."
+ *   dirty={name !== initial}
+ *   saving={saving}
+ *   onSave={save}
+ * >
+ *   <Field><FieldLabel>Nom</FieldLabel><Input value={name} onChange={…} /></Field>
+ * </SettingsSection>
+ * ```
+ */
+export declare function SettingsSection({ title, description, children, footer, footerNote, tone, onSave, dirty, saving, saveLabel, className, }: {
+    title: string;
+    description?: ReactNode;
+    children?: ReactNode;
+    /** Actions du pied, à la place du bouton Enregistrer (ou avant lui avec `onSave`). */
+    footer?: ReactNode;
+    /** Texte discret à gauche du pied : « Appliqué au prochain déploiement. » */
+    footerNote?: ReactNode;
+    /** `danger` : la zone des actions irréversibles, cerclée de rouge. */
+    tone?: "default" | "danger";
+    /** Enregistre le bloc et affiche lui-même son erreur (toast, `FieldError`) : rien ne l'attrape ici. */
+    onSave?: () => void | Promise<void>;
+    /** Faux : rien n'a changé, le bouton reste grisé. */
+    dirty?: boolean;
+    saving?: boolean;
+    saveLabel?: string;
+    className?: string;
+}): React.JSX.Element;

package/dist/settings-section.js

@@ -0,0 +1,48 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Button } from "./button.js";
+import { cn } from "./cn.js";
+/**
+ * Un bloc de réglages : titre, description, champs, et un pied avec son propre bouton
+ * Enregistrer. Chaque bloc s'enregistre seul : on ne perd pas la saisie d'un bloc en validant
+ * un autre, et l'erreur dit lequel a échoué. Repris de la page de réglages de Host.
+ *
+ * Avec `onSave`, le bloc est un formulaire : Entrée dans un champ enregistre, le bouton reste
+ * grisé tant que `dirty` est faux et tourne pendant `saving`. Sans `onSave`, `footer` reçoit
+ * les actions telles quelles (« Supprimer le projet » d'un bloc `tone="danger"`).
+ *
+ * ```tsx
+ * <SettingsSection
+ *   title="Nom de l'espace"
+ *   description="Visible par les membres et dans les e-mails d'invitation."
+ *   dirty={name !== initial}
+ *   saving={saving}
+ *   onSave={save}
+ * >
+ *   <Field><FieldLabel>Nom</FieldLabel><Input value={name} onChange={…} /></Field>
+ * </SettingsSection>
+ * ```
+ */
+export function SettingsSection({ title, description, children, footer, footerNote, tone = "default", onSave, dirty = true, saving = false, saveLabel = "Enregistrer", className, }) {
+    const titleId = useId();
+    const descriptionId = useId();
+    const hasFooter = Boolean(footer || footerNote || onSave);
+    const body = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid gap-4 p-5 sm:p-6", children: [_jsxs("div", { children: [_jsx("h2", { id: titleId, className: "text-base font-semibold text-balance", children: title }), description ? (_jsx("p", { id: descriptionId, className: "mt-1 max-w-prose text-sm text-pretty text-muted-foreground", children: description })) : null] }), children] }), hasFooter ? (_jsxs("div", { "data-slot": "settings-section-footer", className: "flex flex-wrap items-center justify-end gap-3 border-t border-border bg-muted/40 px-5 py-3 sm:px-6", children: [footerNote ? _jsx("p", { className: "mr-auto text-sm text-muted-foreground", children: footerNote }) : null, footer, onSave ? (_jsx(Button, { type: "submit", size: "sm", disabled: !dirty, isLoading: saving, children: saveLabel })) : null] })) : null] }));
+    const shared = {
+        "data-slot": "settings-section",
+        "data-tone": tone,
+        "aria-labelledby": titleId,
+        ...(description ? { "aria-describedby": descriptionId } : {}),
+        className: cn("overflow-hidden rounded-3xl surface", tone === "danger" && "ring-1 ring-destructive/30", className),
+    };
+    if (!onSave)
+        return _jsx("section", { ...shared, children: body });
+    const submit = (event) => {
+        event.preventDefault();
+        if (!dirty || saving)
+            return;
+        void onSave();
+    };
+    // Un `<form>` nommé par son titre a le rôle « form » : il apparaît dans les repères du lecteur d'écran.
+    return (_jsx("form", { ...shared, onSubmit: submit, children: body }));
+}