@hgdc/ui 0.3.0 → 0.5.0

package/README.md

@@ -39,35 +39,67 @@ Primitives déjà là : `avatar` `badge` `button` `dialog` `drawer` `dropdown-me
 
 ## Coque des consoles
 
-| Import         | Exemple                                                                                                                                                      |
-| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `app-shell`    | `<AppShell sidebarHeader={<OrgSwitcher …/>} nav={<SidebarNav label="Projet">…</SidebarNav>} sidebarFooter={<AccountMenu …/>}>`                               |
-|                | `<SidebarNavItem icon={Rocket01Icon} label="Déploiements" render={<Link to="/deployments" />} />`                                                            |
-| `org-switcher` | `<OrgSwitcher organizations={orgs} activeId={org.id} onSelect={go} createHref="/organisations/nouvelle" />`                                                  |
-| `account-menu` | `<AccountMenu user={user} onProfile={…} onSecurity={…} onSignOut={signOut} products={HGDC_PRODUCTS} />`                                                      |
-| `command-menu` | `<CommandMenu groups={[{ label: "Aller à", items }, { label: "Créer", items }, { label: "Changer", items }]} />` (`Ctrl+K`)                                  |
-| `kbd`          | `<KbdGroup><Kbd>Ctrl</Kbd><Kbd>K</Kbd></KbdGroup>`                                                                                                           |
-| `page-header`  | `<PageHeader title="Domaines" breadcrumbs={[{ label: "Acme", render: <Link to="/o/acme" /> }, { label: "Domaines" }]} actions={<Button>Ajouter</Button>} />` |
+| Import         | Exemple                                                                                                                                                                |
+| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `app-shell`    | `<AppShell sidebarHeader={<OrgSwitcher …/>} nav={<SidebarNav label="Projet">…</SidebarNav>} sidebarFooter={<AccountMenu …/>}>`                                         |
+|                | `<SidebarNavItem icon={Rocket01Icon} label="Déploiements" render={<Link to="/deployments" />} />`                                                                      |
+| `org-switcher` | `<OrgSwitcher organizations={orgs} activeId={org.id} onSelect={go} createHref="/organisations/nouvelle" />`                                                            |
+| `account-menu` | `<AccountMenu user={user} onProfile={…} onSecurity={…} onSignOut={signOut} product="Mail" />` : Account et les produits ouverts du catalogue, Mail coché               |
+| `command-menu` | `<CommandMenu groups={[{ label: "Aller à", items }, { label: "Créer", items }, { label: "Changer", items }]} />` (`Ctrl+K`), `<CommandMenuButton compact="mobile" …/>` |
+| `products`     | `HGDC_PRODUCTS` (mot, nom, sous-domaine, phrase, icône, état), `HGDC_ACCOUNT`, `productMenuEntries({ current: "Mail" })`                                               |
+| `kbd`          | `<KbdGroup><Kbd>Ctrl</Kbd><Kbd>K</Kbd></KbdGroup>`                                                                                                                     |
+| `page-header`  | `<PageHeader title="Domaines" breadcrumbs={[{ label: "Acme", render: <Link to="/o/acme" /> }, { label: "Domaines" }]} actions={<Button>Ajouter</Button>} />`           |
 
 La barre se réduit en rail (`Ctrl+B`, mémorisé) : poser `sidebarInitScript` dans le `<head>`. Le kit ne connaît ni routeur ni authentification : liens par `render={<Link />}`, actions par callbacks. Rôles d'organisation : `owner`, `admin`, `member` (Propriétaire, Admin, Membre).
 
 ## Contenu et données
 
-| Import          | Exemple                                                                                                                                                                                              |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `card`          | `<Card><CardHeader><CardTitle>Domaines</CardTitle><CardAction>…</CardAction></CardHeader><CardContent>…</CardContent><CardFooter>…</CardFooter></Card>`                                              |
-| `alert`         | `<Alert tone="warning" title="Quota presque atteint" action={<Button size="sm">Voir</Button>}>90 % utilisés.</Alert>`                                                                                |
-| `table`         | `<TableHead sort="descending" onSort={…}>Date</TableHead>`, `<TableRowLink render={<Link … />}>Production</TableRowLink>`, `<TableEmpty colSpan={4}>…</TableEmpty>`, `<TableSkeleton columns={4} />` |
-| `resource-list` | `<ResourceList><ResourceItem icon={…} title="Site vitrine" meta="acme.ch" badge={…} actions={…} href="/p/site" /></ResourceList>`                                                                    |
-| `stat`          | `<StatGrid><StatTile label="Erreurs" value="12" delta={{ value: "8 %", direction: "up", good: "down" }} /></StatGrid>`                                                                               |
-| `time-chart`    | `<TimeChart label="Envois par jour" timestamps={days} series={[{ key: "sent", label: "Envoyés", values }]} kind="bar" />`                                                                            |
-| `status`        | `<StatusBadge status="degraded" />` (Opérationnel, Dégradé, Panne, Maintenance, Inconnu)                                                                                                             |
-| `uptime-bar`    | `<UptimeBar days={[{ date, status: "operational", uptime: "100 %" }]} summary="99,95 % sur 90 jours" />`                                                                                             |
-| `timeline`      | `<Timeline entries={[{ id, title: "Résolu", time, status: "operational" }]} />`                                                                                                                      |
-| `relative-time` | `<RelativeTime date={deployment._creationTime} />` (« il y a 3 min », date exacte au survol)                                                                                                         |
-| `copy-button`   | `<Snippet value="bun add @hgdc/ui" prompt />`, `<CopyButton value={url} />`                                                                                                                          |
-| `secret-reveal` | `<SecretReveal label="Clé d'API" value={key} onDismiss={forget} />` : affichée une fois, puis retirée de la page                                                                                     |
-| `skeleton`      | `<Pending pending={isLoading} fallback={<TableSkeleton columns={3} />}>…</Pending>` : après 200 ms, tenu 400 ms au moins                                                                             |
+| Import          | Exemple                                                                                                                                                                                                                 |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `card`          | `<Card><CardHeader><CardTitle>Domaines</CardTitle><CardAction>…</CardAction></CardHeader><CardContent>…</CardContent><CardFooter>…</CardFooter></Card>`                                                                 |
+| `alert`         | `<Alert tone="warning" title="Quota presque atteint" action={<Button size="sm">Voir</Button>}>90 % utilisés.</Alert>`                                                                                                   |
+| `table`         | `<TableHead sort="descending" onSort={…}>Date</TableHead>`, `<TableRowLink render={<Link … />}>Production</TableRowLink>`, `<TableEmpty colSpan={4}>…</TableEmpty>`, `<TableSkeleton columns={4} />`                    |
+| `resource-list` | `<ResourceList><ResourceItem icon={…} title="Site vitrine" meta="acme.ch" badge={…} actions={…} href="/p/site" /></ResourceList>`                                                                                       |
+| `stat`          | `<StatGrid><StatTile label="Erreurs" value="12" delta={{ value: "8 %", direction: "up", good: "down" }} /></StatGrid>`                                                                                                  |
+| `time-chart`    | `<TimeChart label="Envois par jour" timestamps={days} series={[{ key: "sent", label: "Envoyés", values }]} kind="bar" lastIncomplete />` (dernier point en pointillés : la journée n'est pas finie)                     |
+| `status`        | `<StatusBadge status="degraded" />` (Opérationnel, Dégradé, Panne, Maintenance, Inconnu) ; hors services, `<StatusBadge tone="success" label="Remis" />` (`neutral`, `success`, `warning`, `danger`, `info`, `pending`) |
+| `uptime-bar`    | `<UptimeBar days={[{ date, status: "operational", uptime: "100 %" }]} summary="99,95 % sur 90 jours" />`                                                                                                                |
+| `timeline`      | `<Timeline entries={[{ id, title: "Résolu", time, status: "operational" }]} />`                                                                                                                                         |
+| `relative-time` | `<RelativeTime date={deployment._creationTime} />` (« il y a 3 min », date exacte au survol)                                                                                                                            |
+| `copy-button`   | `<Snippet value="bun add @hgdc/ui" prompt />`, `<CopyButton value={url} />`, `<CopyButton value={all} label="Tout copier" showLabel />`                                                                                 |
+| `progress`      | `<Progress label="Envoi de la campagne" value={120} max={400} />` (`value={null}` : durée inconnue), `<Meter label="E-mails ce mois" value={8600} max={10000} />` (orange puis rouge près de la limite)                 |
+| `rank-bar`      | `<RankBar label="Pages les plus vues" items={[{ key, label: "/tarifs", value: 640, render: <Link … /> }]} limit={5} />`                                                                                                 |
+| `secret-reveal` | `<SecretReveal label="Clé d'API" value={key} onDismiss={forget} />` : affichée une fois, puis retirée de la page                                                                                                        |
+| `skeleton`      | `<Pending pending={isLoading} fallback={<TableSkeleton columns={3} />}>…</Pending>` : après 200 ms, tenu 400 ms au moins                                                                                                |
+
+## Listes, journaux et retours
+
+| Import               | Exemple                                                                                                                                                    |
+| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `filter-bar`         | `<FilterBar search={{ value: q, onChange }} filters={[{ key: "status", label: "Statut", options }]} values={{ status }} onFilterChange={…} onReset={…} />` |
+| `data-table`         | `<DataTable label="Déploiements" rows={rows} columns={columns} rowKey={(d) => d.id} sort={sort} onSortChange={…} filters={<FilterBar …/>} loadMore={…} />` |
+| `dns-record-table`   | `<DnsRecordTable records={[{ type: "MX", name: "send", value, priority: 10, status: "pending" }]} />` (Vérifié, En attente, Échec, À ajouter)              |
+| `log-viewer`         | `<LogViewer lines={[{ id, time, level: "error", message }]} live />` : niveaux, recherche, « Suivre », copie ; seules les lignes visibles sont rendues     |
+| `sparkline`          | `<Sparkline label="Envois sur 7 jours" values={[3, 8, 5]} color={2} />`                                                                                    |
+| `middle-truncate`    | `<MiddleTruncate text={deployment.url} />` : « …/routes/index.tsx », texte entier dans la page                                                             |
+| `error-card`         | `<ErrorCard title="Impossible de charger les journaux" detail={message} reference={requestId} onRetry={refetch} />`                                        |
+| `destructive-dialog` | `<DestructiveDialog open={open} onOpenChange={setOpen} title="Supprimer le domaine" question="…" name="acme.ch" onConfirm={remove} />`                     |
+| `sonner`             | `<Toaster />` une fois, puis `toastUndo("Domaine retiré", { onUndo: restore })` ; `errorMessage(error)` pour un toast d'erreur                             |
+
+Filtres, tri et page vivent dans l'URL du produit : les composants sont contrôlés et ne connaissent pas le routeur.
+
+## Formulaires et réglages
+
+| Import              | Exemple                                                                                                                                                |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `settings-section`  | `<SettingsSection title="Nom de l'espace" description="…" dirty={changed} saving={saving} onSave={save}>…</SettingsSection>` : un Enregistrer par bloc |
+| `date-range-picker` | `<DateRangePicker value={{ from: "2026-10-01", to: "2026-10-15" }} onChange={(range, preset) => …} />` : raccourcis et période libre                   |
+| `date-time-field`   | `<DateTimeField value={sendAt} onChange={setSendAt} min={Date.now()} />` : millisecondes, heure du navigateur                                          |
+| `color-field`       | `<ColorField value="#7c3aed" onChange={…} />` : pastille, code hexadécimal, contraste avec le texte blanc et son verdict                               |
+| `money-field`       | `<MoneyField value={centimes} onChange={…} />` : CHF en centimes, « 1’250.50 », accepte « 12.– » ; `formatChf`, `parseMoney`                           |
+| `address-fields`    | `<AddressFields value={address} onChange={…} errors={validatePostalAddress(address)} />` : rue, numéro, NPA, localité, pays (facture QR)               |
+
+Les champs de date sont ceux du navigateur, sans calendrier maison (ADR 0006). Les fonctions pures (`parseMoney`, `contrastRatio`, `validatePostalAddress`, `formatDateRange`) s'importent seules, côté serveur aussi.
 
 ## Contrôles et surfaces flottantes
 

package/dist/account-menu.d.ts

@@ -1,3 +1,4 @@
+import { type IconSvgElement } from "@hugeicons/react";
 import type { ReactNode } from "react";
 export type HgdcProduct = {
     /** « HGDC Host ». */
@@ -5,6 +6,10 @@ export type HgdcProduct = {
     href: string;
     /** Le produit ouvert : coché, sans lien. */
     current?: boolean;
+    /** Icône du produit ; celle d'un tableau de bord par défaut. */
+    icon?: IconSvgElement;
+    /** Texte discret à droite : « Préversion ». */
+    hint?: string;
 };
 export type AccountUser = {
     name: string;
@@ -16,16 +21,24 @@ export type AccountUser = {
  * produits HGDC, déconnexion. `row` : avatar, nom et adresse (l'avatar seul en rail) ; `avatar` :
  * l'avatar seul, pour une barre du haut. Le produit passe les actions ; le thème passe par
  * `ThemeProvider`.
+ *
+ * « Produits HGDC » liste par défaut Account et les produits ouverts du catalogue
+ * (`productMenuEntries`, `@hgdc/ui/products`), avec `product` coché. `products` remplace cette
+ * liste ; `products={[]}` la retire.
  */
-export declare function AccountMenu({ user, onProfile, onSecurity, onShortcuts, onSignOut, products, children, variant, }: {
+export declare function AccountMenu({ user, onProfile, onSecurity, onShortcuts, onSignOut, products: productsProp, product: currentProduct, accountHref, children, variant, }: {
     user: AccountUser;
     onProfile?: () => void;
     onSecurity?: () => void;
     /** Ouvre l'aide des raccourcis clavier. */
     onShortcuts?: () => void;
     onSignOut: () => void;
-    /** Les produits de la famille, pour passer de l'un à l'autre. */
+    /** Les produits de la famille, pour passer de l'un à l'autre. Le catalogue du kit par défaut. */
     products?: Array<HgdcProduct>;
+    /** Mot du produit ouvert (« Mail »), coché dans la liste par défaut. */
+    product?: string;
+    /** Adresse d'Account dans la liste par défaut (un Account local en développement). */
+    accountHref?: string;
     /** Entrées propres au produit (« Administration »), après le profil. */
     children?: ReactNode;
     variant?: "row" | "avatar";

package/dist/account-menu.js

@@ -13,6 +13,7 @@ import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./dropdown-menu.js";
 import { MENU_LINK_ITEM } from "./org-switcher.js";
+import { productMenuEntries } from "./products.js";
 import { useTheme } from "./theme.js";
 const THEMES = ["light", "dark", "system"];
 function initials(name) {
@@ -28,12 +29,17 @@ function initials(name) {
  * produits HGDC, déconnexion. `row` : avatar, nom et adresse (l'avatar seul en rail) ; `avatar` :
  * l'avatar seul, pour une barre du haut. Le produit passe les actions ; le thème passe par
  * `ThemeProvider`.
+ *
+ * « Produits HGDC » liste par défaut Account et les produits ouverts du catalogue
+ * (`productMenuEntries`, `@hgdc/ui/products`), avec `product` coché. `products` remplace cette
+ * liste ; `products={[]}` la retire.
  */
-export function AccountMenu({ user, onProfile, onSecurity, onShortcuts, onSignOut, products, children, variant = "row", }) {
+export function AccountMenu({ user, onProfile, onSecurity, onShortcuts, onSignOut, products: productsProp, product: currentProduct, accountHref, children, variant = "row", }) {
     const { theme, setTheme } = useTheme();
+    const products = productsProp ?? productMenuEntries({ current: currentProduct, accountHref });
     return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: variant === "row" ? (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "flex w-full min-w-0 items-center gap-2.5 rounded-xl p-1.5 text-left outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-muted lg:hover:bg-shell-hover lg:aria-expanded:bg-shell-hover lg:rail:justify-center" })) : (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "touch-target grid size-9 place-items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring/50" })), children: [_jsxs(Avatar, { children: [user.image ? _jsx(AvatarImage, { src: user.image, alt: "" }) : null, _jsx(AvatarFallback, { className: "text-xs font-semibold uppercase", children: initials(user.name) })] }), variant === "row" ? (_jsxs("span", { className: "min-w-0 flex-1 lg:rail:hidden", children: [_jsx("span", { className: "block truncate text-sm font-medium", children: user.name }), _jsx("span", { className: "block truncate text-xs text-muted-foreground lg:text-shell-muted", children: user.email })] })) : null] }), _jsxs(DropdownMenuContent, { align: variant === "row" ? "start" : "end", side: variant === "row" ? "top" : "bottom", className: "w-64", children: [_jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuLabel, { children: [_jsx("span", { className: "block truncate text-foreground", children: user.name }), _jsx("span", { className: "block truncate", children: user.email })] }) }), _jsx(DropdownMenuSeparator, {}), onProfile ? (_jsxs(DropdownMenuItem, { onClick: onProfile, children: [_jsx(HugeiconsIcon, { icon: UserIcon, "aria-hidden": true }), "Profil"] })) : null, onSecurity ? (_jsxs(DropdownMenuItem, { onClick: onSecurity, children: [_jsx(HugeiconsIcon, { icon: SecurityLockIcon, "aria-hidden": true }), "S\u00E9curit\u00E9"] })) : null, children, _jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { children: [_jsx(HugeiconsIcon, { icon: theme === "dark" ? Moon02Icon : theme === "light" ? Sun03Icon : ComputerIcon, "aria-hidden": true }), "Th\u00E8me"] }), _jsx(DropdownMenuSubContent, { children: _jsxs(DropdownMenuRadioGroup, { value: theme, onValueChange: (value) => {
                                         const next = THEMES.find((t) => t === value);
                                         if (next)
                                             setTheme(next);
-                                    }, children: [_jsx(DropdownMenuRadioItem, { value: "light", children: "Clair" }), _jsx(DropdownMenuRadioItem, { value: "dark", children: "Sombre" }), _jsx(DropdownMenuRadioItem, { value: "system", children: "Syst\u00E8me" })] }) })] }), onShortcuts ? (_jsxs(DropdownMenuItem, { onClick: onShortcuts, children: [_jsx(HugeiconsIcon, { icon: KeyboardIcon, "aria-hidden": true }), "Raccourcis clavier", _jsx(DropdownMenuShortcut, { children: "?" })] })) : null, products?.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Produits HGDC" }), products.map((product) => product.current ? (_jsxs(DropdownMenuItem, { disabled: true, className: "data-disabled:opacity-100", children: [_jsx(HugeiconsIcon, { icon: DashboardSquare01Icon, "aria-hidden": true }), _jsx("span", { className: "flex-1", children: product.name }), _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Produit ouvert" })] }, product.name)) : (_jsxs(MenuPrimitive.LinkItem, { href: product.href, className: MENU_LINK_ITEM, children: [_jsx(HugeiconsIcon, { icon: DashboardSquare01Icon, "aria-hidden": true }), product.name] }, product.name)))] })] })) : null, _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: onSignOut, children: [_jsx(HugeiconsIcon, { icon: Logout01Icon, "aria-hidden": true }), "Se d\u00E9connecter"] })] })] }));
+                                    }, children: [_jsx(DropdownMenuRadioItem, { value: "light", children: "Clair" }), _jsx(DropdownMenuRadioItem, { value: "dark", children: "Sombre" }), _jsx(DropdownMenuRadioItem, { value: "system", children: "Syst\u00E8me" })] }) })] }), onShortcuts ? (_jsxs(DropdownMenuItem, { onClick: onShortcuts, children: [_jsx(HugeiconsIcon, { icon: KeyboardIcon, "aria-hidden": true }), "Raccourcis clavier", _jsx(DropdownMenuShortcut, { children: "?" })] })) : null, products.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Produits HGDC" }), products.map((product) => product.current ? (_jsxs(DropdownMenuItem, { disabled: true, className: "data-disabled:opacity-100", children: [_jsx(HugeiconsIcon, { icon: product.icon ?? DashboardSquare01Icon, "aria-hidden": true }), _jsx("span", { className: "flex-1", children: product.name }), _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Produit ouvert" })] }, product.name)) : (_jsxs(MenuPrimitive.LinkItem, { href: product.href, className: MENU_LINK_ITEM, children: [_jsx(HugeiconsIcon, { icon: product.icon ?? DashboardSquare01Icon, "aria-hidden": true }), _jsx("span", { className: "flex-1", children: product.name }), product.hint ? (_jsx("span", { className: "text-xs font-normal text-muted-foreground", children: product.hint })) : null] }, product.name)))] })] })) : null, _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: onSignOut, children: [_jsx(HugeiconsIcon, { icon: Logout01Icon, "aria-hidden": true }), "Se d\u00E9connecter"] })] })] }));
 }

package/dist/address-fields.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Adresse postale structurée, telle que la facture QR suisse l'exige depuis novembre 2025
+ * (adresse de type S) : rue et numéro séparés, NPA et localité séparés, pays en code ISO.
+ */
+export type PostalAddress = {
+    /** « Rue du Lac ». */
+    street: string;
+    /** « 12 », « 12b » ; vide pour une adresse sans numéro. */
+    number: string;
+    /** Complément : « c/o Acme SA », « Case postale 42 ». */
+    extra: string;
+    /** NPA : « 1003 ». */
+    postalCode: string;
+    /** « Lausanne ». */
+    locality: string;
+    /** Code ISO 3166-1 alpha-2 : « CH ». */
+    country: string;
+};
+export type AddressCountry = {
+    code: string;
+    label: string;
+};
+/** Pays proposés par défaut : la Suisse et le Liechtenstein, qui partagent les NPA à quatre chiffres. */
+export declare const DEFAULT_ADDRESS_COUNTRIES: ReadonlyArray<AddressCountry>;
+export declare const EMPTY_ADDRESS: PostalAddress;
+export type AddressErrors = Partial<Record<keyof PostalAddress, string>>;
+/**
+ * Erreurs d'une adresse, champ par champ ; objet vide si elle tient. Limites de longueur de la
+ * facture QR : 70 caractères pour la rue, 16 pour le numéro et le NPA, 35 pour la localité.
+ */
+export declare function validatePostalAddress(address: PostalAddress): AddressErrors;
+/** L'adresse sur trois lignes, comme sur une enveloppe : « Rue du Lac 12 », « c/o… », « 1003 Lausanne ». */
+export declare function formatPostalAddress(address: PostalAddress, countries?: ReadonlyArray<AddressCountry>): Array<string>;
+/**
+ * Les champs d'une adresse postale suisse : rue et numéro, complément, NPA et localité, pays.
+ * Chaque champ porte son `autocomplete` : le navigateur remplit tout d'un geste.
+ * Rue et numéro, puis NPA et localité, restent côte à côte jusque sur téléphone.
+ *
+ * Contrôlé ; `errors` vient de `validatePostalAddress` (à l'envoi, pas à chaque frappe).
+ */
+export declare function AddressFields({ value, onChange, errors, countries, legend, disabled, className, }: {
+    value: PostalAddress;
+    onChange: (address: PostalAddress) => void;
+    errors?: AddressErrors;
+    /** Un seul pays : le choix disparaît. */
+    countries?: ReadonlyArray<AddressCountry>;
+    legend?: string;
+    disabled?: boolean;
+    className?: string;
+}): React.JSX.Element;

package/dist/address-fields.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "./cn.js";
+import { Input } from "./input.js";
+import { Label } from "./label.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
+/** Pays proposés par défaut : la Suisse et le Liechtenstein, qui partagent les NPA à quatre chiffres. */
+export const DEFAULT_ADDRESS_COUNTRIES = [
+    { code: "CH", label: "Suisse" },
+    { code: "LI", label: "Liechtenstein" },
+];
+export const EMPTY_ADDRESS = {
+    street: "",
+    number: "",
+    extra: "",
+    postalCode: "",
+    locality: "",
+    country: "CH",
+};
+/**
+ * Erreurs d'une adresse, champ par champ ; objet vide si elle tient. Limites de longueur de la
+ * facture QR : 70 caractères pour la rue, 16 pour le numéro et le NPA, 35 pour la localité.
+ */
+export function validatePostalAddress(address) {
+    const errors = {};
+    const street = address.street.trim();
+    const postalCode = address.postalCode.trim();
+    const locality = address.locality.trim();
+    if (!street)
+        errors.street = "Indique la rue.";
+    else if (street.length > 70)
+        errors.street = "70 caractères au plus.";
+    if (address.number.trim().length > 16)
+        errors.number = "16 caractères au plus.";
+    if (!postalCode)
+        errors.postalCode = "Indique le NPA.";
+    else if ((address.country === "CH" || address.country === "LI") && !/^[1-9]\d{3}$/.test(postalCode))
+        errors.postalCode = "Le NPA a quatre chiffres.";
+    else if (postalCode.length > 16)
+        errors.postalCode = "16 caractères au plus.";
+    if (!locality)
+        errors.locality = "Indique la localité.";
+    else if (locality.length > 35)
+        errors.locality = "35 caractères au plus.";
+    if (!/^[A-Z]{2}$/.test(address.country))
+        errors.country = "Choisis un pays.";
+    return errors;
+}
+/** L'adresse sur trois lignes, comme sur une enveloppe : « Rue du Lac 12 », « c/o… », « 1003 Lausanne ». */
+export function formatPostalAddress(address, countries = DEFAULT_ADDRESS_COUNTRIES) {
+    const lines = [
+        [address.street.trim(), address.number.trim()].filter(Boolean).join(" "),
+        address.extra.trim(),
+        [address.postalCode.trim(), address.locality.trim()].filter(Boolean).join(" "),
+    ];
+    if (address.country !== "CH")
+        lines.push(countries.find((c) => c.code === address.country)?.label ?? address.country);
+    return lines.filter(Boolean);
+}
+function Part({ id, label, error, className, children, }) {
+    return (_jsxs("div", { className: cn("grid content-start gap-1.5", className), children: [_jsx(Label, { htmlFor: id, children: label }), children, error ? (_jsx("p", { id: `${id}-error`, role: "alert", className: "soft-in text-sm text-destructive", children: error })) : null] }));
+}
+/**
+ * Les champs d'une adresse postale suisse : rue et numéro, complément, NPA et localité, pays.
+ * Chaque champ porte son `autocomplete` : le navigateur remplit tout d'un geste.
+ * Rue et numéro, puis NPA et localité, restent côte à côte jusque sur téléphone.
+ *
+ * Contrôlé ; `errors` vient de `validatePostalAddress` (à l'envoi, pas à chaque frappe).
+ */
+export function AddressFields({ value, onChange, errors = {}, countries = DEFAULT_ADDRESS_COUNTRIES, legend = "Adresse", disabled, className, }) {
+    const base = useId();
+    const id = (key) => `${base}-${key}`;
+    const set = (key) => (event) => onChange({ ...value, [key]: event.target.value });
+    const invalid = (key) => errors[key] ? { "aria-invalid": true, "aria-describedby": `${id(key)}-error` } : {};
+    return (_jsxs("fieldset", { "data-slot": "address-fields", disabled: disabled, className: cn("grid gap-4", className), children: [_jsx("legend", { className: "mb-3 text-base font-medium", children: legend }), _jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_6rem] gap-3 sm:grid-cols-[minmax(0,1fr)_7rem] sm:gap-4", children: [_jsx(Part, { id: id("street"), label: "Rue", error: errors.street, children: _jsx(Input, { id: id("street"), value: value.street, onChange: set("street"), autoComplete: "address-line1", maxLength: 70, ...invalid("street") }) }), _jsx(Part, { id: id("number"), label: "Num\u00E9ro", error: errors.number, children: _jsx(Input, { id: id("number"), value: value.number, onChange: set("number"), autoComplete: "off", maxLength: 16, ...invalid("number") }) })] }), _jsx(Part, { id: id("extra"), label: "Compl\u00E9ment (facultatif)", error: errors.extra, children: _jsx(Input, { id: id("extra"), value: value.extra, onChange: set("extra"), autoComplete: "address-line2", placeholder: "c/o, case postale", ...invalid("extra") }) }), _jsxs("div", { className: "grid grid-cols-[6rem_minmax(0,1fr)] gap-3 sm:grid-cols-[7rem_minmax(0,1fr)] sm:gap-4", children: [_jsx(Part, { id: id("postalCode"), label: "NPA", error: errors.postalCode, children: _jsx(Input, { id: id("postalCode"), value: value.postalCode, onChange: set("postalCode"), autoComplete: "postal-code", inputMode: value.country === "CH" || value.country === "LI" ? "numeric" : "text", maxLength: 16, ...invalid("postalCode") }) }), _jsx(Part, { id: id("locality"), label: "Localit\u00E9", error: errors.locality, children: _jsx(Input, { id: id("locality"), value: value.locality, onChange: set("locality"), autoComplete: "address-level2", maxLength: 35, ...invalid("locality") }) })] }), countries.length > 1 ? (_jsx(Part, { id: id("country"), label: "Pays", error: errors.country, children: _jsxs(Select, { value: value.country, onValueChange: (next) => {
+                        if (next)
+                            onChange({ ...value, country: next });
+                    }, ...(disabled ? { disabled } : {}), children: [_jsx(SelectTrigger, { id: id("country"), ...invalid("country"), children: _jsx(SelectValue, { items: Object.fromEntries(countries.map((c) => [c.code, c.label])) }) }), _jsx(SelectContent, { children: countries.map((country) => (_jsx(SelectItem, { value: country.code, children: country.label }, country.code))) })] }) })) : null] }));
+}

package/dist/chart-path.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Tracés SVG partagés par `TimeChart` et `Sparkline`. Repère de `values.length` unités de large
+ * sur 100 de haut : le point `i` est au centre de sa colonne (`i + 0.5`), `min` en bas, `max` en
+ * haut. Le SVG s'étire ensuite (`preserveAspectRatio="none"`).
+ */
+/** Une ligne, interrompue là où une valeur manque (`null`). */
+export declare function linePath(values: ReadonlyArray<number | null>, max: number, min?: number): string;
+/** L'aire sous la ligne : une forme par segment continu, fermée sur le bas du repère. */
+export declare function areaPath(values: ReadonlyArray<number | null>, max: number, min?: number): string;

package/dist/chart-path.js

@@ -0,0 +1,46 @@
+/**
+ * Tracés SVG partagés par `TimeChart` et `Sparkline`. Repère de `values.length` unités de large
+ * sur 100 de haut : le point `i` est au centre de sa colonne (`i + 0.5`), `min` en bas, `max` en
+ * haut. Le SVG s'étire ensuite (`preserveAspectRatio="none"`).
+ */
+function y(value, min, max) {
+    const range = max - min;
+    return range > 0 ? 100 - ((value - min) / range) * 100 : 50;
+}
+/** Une ligne, interrompue là où une valeur manque (`null`). */
+export function linePath(values, max, min = 0) {
+    let d = "";
+    let open = false;
+    values.forEach((v, i) => {
+        if (v === null) {
+            open = false;
+            return;
+        }
+        d += `${open ? "L" : "M"}${i + 0.5} ${y(v, min, max)}`;
+        open = true;
+    });
+    return d;
+}
+/** L'aire sous la ligne : une forme par segment continu, fermée sur le bas du repère. */
+export function areaPath(values, max, min = 0) {
+    const parts = [];
+    let start = -1;
+    const close = (end) => {
+        if (start < 0)
+            return;
+        const top = values
+            .slice(start, end)
+            .map((v, j) => `${j === 0 ? "M" : "L"}${start + j + 0.5} ${y(v ?? min, min, max)}`)
+            .join("");
+        parts.push(`${top}L${end - 1 + 0.5} 100L${start + 0.5} 100Z`);
+        start = -1;
+    };
+    values.forEach((v, i) => {
+        if (v === null)
+            close(i);
+        else if (start < 0)
+            start = i;
+    });
+    close(values.length);
+    return parts.join("");
+}

package/dist/color-field.d.ts

@@ -0,0 +1,32 @@
+import { type StatusTone } from "./status.tsx";
+/** `#7c3aed`, `7C3AED` ou `#abc` en `#7c3aed`, ou `null` si ce n'est pas une couleur hexadécimale. */
+export declare function normalizeHexColor(value: string): string | null;
+/** Rapport de contraste WCAG 2 entre deux couleurs hexadécimales (1 à 21), ou `null` si l'une est invalide. */
+export declare function contrastRatio(a: string, b: string): number | null;
+/** Verdict d'un contraste pour du texte : 4,5:1 pour le texte courant, 3:1 pour le gros texte et les icônes (WCAG AA). */
+export declare function contrastVerdict(ratio: number): {
+    tone: StatusTone;
+    label: string;
+};
+/**
+ * Une couleur de marque : la pastille ouvre le sélecteur du navigateur, le champ accepte un code
+ * hexadécimal collé (`#7c3aed`). Sous le champ, le contraste avec `contrastWith` (le texte posé
+ * sur cette couleur, blanc par défaut) et son verdict : un bouton à l'accent d'un client doit
+ * rester lisible.
+ *
+ * La valeur rendue est toujours normalisée (`#rrggbb`) ; une saisie invalide n'appelle pas `onChange`
+ * et reprend la dernière couleur valable en quittant le champ.
+ */
+export declare function ColorField({ value, onChange, contrastWith, contrastLabel, className, "aria-label": ariaLabel, id: idProp, disabled, }: {
+    /** `#rrggbb`. */
+    value: string;
+    onChange: (value: string) => void;
+    /** Couleur comparée ; `null` retire le contrôle de contraste. */
+    contrastWith?: string | null;
+    /** Ce qu'est cette couleur comparée, dans la phrase : « Contraste avec le texte blanc ». */
+    contrastLabel?: string;
+    className?: string;
+    "aria-label"?: string;
+    id?: string;
+    disabled?: boolean;
+}): React.JSX.Element;

package/dist/color-field.js

@@ -0,0 +1,80 @@
+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";
+import { StatusBadge } from "./status.js";
+/** `#7c3aed`, `7C3AED` ou `#abc` en `#7c3aed`, ou `null` si ce n'est pas une couleur hexadécimale. */
+export function normalizeHexColor(value) {
+    const hex = value.trim().replace(/^#/, "").toLowerCase();
+    if (/^[0-9a-f]{3}$/.test(hex))
+        return `#${hex
+            .split("")
+            .map((c) => c + c)
+            .join("")}`;
+    return /^[0-9a-f]{6}$/.test(hex) ? `#${hex}` : null;
+}
+function luminance(hex) {
+    const channels = [1, 3, 5].map((i) => Number.parseInt(hex.slice(i, i + 2), 16) / 255);
+    const [r, g, b] = channels.map((c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+/** Rapport de contraste WCAG 2 entre deux couleurs hexadécimales (1 à 21), ou `null` si l'une est invalide. */
+export function contrastRatio(a, b) {
+    const x = normalizeHexColor(a);
+    const y = normalizeHexColor(b);
+    if (!x || !y)
+        return null;
+    const [light, dark] = [luminance(x), luminance(y)].sort((m, n) => n - m);
+    return (light + 0.05) / (dark + 0.05);
+}
+/** Verdict d'un contraste pour du texte : 4,5:1 pour le texte courant, 3:1 pour le gros texte et les icônes (WCAG AA). */
+export function contrastVerdict(ratio) {
+    if (ratio >= 4.5)
+        return { tone: "success", label: "Lisible" };
+    if (ratio >= 3)
+        return { tone: "warning", label: "Gros texte seulement" };
+    return { tone: "danger", label: "Illisible" };
+}
+const ratioFormat = new Intl.NumberFormat("fr-CH", { maximumFractionDigits: 1, minimumFractionDigits: 1 });
+/**
+ * Une couleur de marque : la pastille ouvre le sélecteur du navigateur, le champ accepte un code
+ * hexadécimal collé (`#7c3aed`). Sous le champ, le contraste avec `contrastWith` (le texte posé
+ * sur cette couleur, blanc par défaut) et son verdict : un bouton à l'accent d'un client doit
+ * rester lisible.
+ *
+ * La valeur rendue est toujours normalisée (`#rrggbb`) ; une saisie invalide n'appelle pas `onChange`
+ * et reprend la dernière couleur valable en quittant le champ.
+ */
+export function ColorField({ value, onChange, contrastWith = "#ffffff", contrastLabel = "le texte blanc", className, "aria-label": ariaLabel, id: idProp, disabled, }) {
+    const fieldId = useFieldId();
+    const fieldDescribedBy = useFieldDescribedBy();
+    const ownId = useId();
+    const id = idProp ?? fieldId ?? ownId;
+    const [text, setText] = useState(value);
+    // Une valeur changée par le produit (réinitialisation) remplace la saisie en cours.
+    const [shown, setShown] = useState(value);
+    if (shown !== value) {
+        setShown(value);
+        setText(value);
+    }
+    const ratio = contrastWith ? contrastRatio(value, contrastWith) : null;
+    const verdict = ratio !== null ? contrastVerdict(ratio) : null;
+    const contrastId = `${id}-contrast`;
+    const describedBy = [fieldDescribedBy, ratio !== null ? contrastId : null].filter(Boolean).join(" ") || undefined;
+    // Pendant la frappe, seul un code complet (6 chiffres) est transmis : « #7c3 » deviendrait
+    // « #77cc33 » sous les doigts. La forme courte se développe en quittant le champ.
+    const commit = (next, complete = /^#?[0-9a-f]{6}$/i.test(next.trim())) => {
+        setText(next);
+        const normalized = complete ? normalizeHexColor(next) : null;
+        if (normalized && normalized !== value)
+            onChange(normalized);
+    };
+    return (_jsxs("div", { "data-slot": "color-field", className: cn("grid gap-2", className), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("label", { className: cn("relative grid size-11 shrink-0 cursor-pointer place-items-center rounded-2xl ring-1 ring-border/70 ring-inset focus-within:ring-2 focus-within:ring-ring lg:size-10", disabled && "pointer-events-none opacity-50"), style: { background: value }, children: [_jsx("span", { className: "sr-only", children: "Choisir dans le s\u00E9lecteur de couleur" }), _jsx("input", { type: "color", value: normalizeHexColor(value) ?? "#000000", disabled: disabled, onChange: (event) => commit(event.target.value), className: "absolute inset-0 size-full cursor-pointer opacity-0" })] }), _jsx(Input, { id: id, value: text, disabled: disabled, spellCheck: false, autoComplete: "off", inputMode: "text", maxLength: 7, placeholder: "#7c3aed", ...(ariaLabel !== undefined ? { "aria-label": ariaLabel } : {}), "aria-describedby": describedBy, onChange: (event) => commit(event.target.value), onBlur: () => {
+                            const normalized = normalizeHexColor(text);
+                            if (normalized)
+                                commit(normalized, true);
+                            else
+                                setText(value);
+                        }, className: "max-w-36 font-mono uppercase" })] }), ratio !== null && verdict ? (_jsxs("p", { id: contrastId, className: "flex flex-wrap items-center gap-2 text-sm text-muted-foreground", children: [_jsxs("span", { children: ["Contraste avec ", contrastLabel, " :", " ", _jsxs("span", { className: "font-medium text-foreground tabular-nums", children: [ratioFormat.format(ratio), ":1"] })] }), _jsx(StatusBadge, { tone: verdict.tone, label: verdict.label, live: false })] })) : null] }));
+}

package/dist/command-menu.d.ts

@@ -47,10 +47,12 @@ export declare function CommandMenu({ groups, open: openProp, onOpenChange, plac
 }): React.JSX.Element;
 /**
  * Le bouton qui ouvre la palette, pour la souris et le doigt : « Rechercher » et le raccourci.
- * Dans la barre latérale ou l'en-tête.
+ * Dans la barre latérale ou l'en-tête. `compact` : la loupe seule, dans un carré de 36 px, le
+ * libellé devenant le nom accessible ; `"mobile"` ne compacte que sous `lg`, sans JavaScript.
  */
-export declare function CommandMenuButton({ onClick, label, className, }: {
+export declare function CommandMenuButton({ onClick, label, compact, className, }: {
     onClick: () => void;
     label?: string;
+    compact?: boolean | "mobile";
     className?: string;
 }): React.JSX.Element;

package/dist/command-menu.js

@@ -69,11 +69,13 @@ function noop() { }
 function subscribeNever() {
     return noop;
 }
+const COMPACT = "w-9 max-w-none justify-center px-0";
 /**
  * Le bouton qui ouvre la palette, pour la souris et le doigt : « Rechercher » et le raccourci.
- * Dans la barre latérale ou l'en-tête.
+ * Dans la barre latérale ou l'en-tête. `compact` : la loupe seule, dans un carré de 36 px, le
+ * libellé devenant le nom accessible ; `"mobile"` ne compacte que sous `lg`, sans JavaScript.
  */
-export function CommandMenuButton({ onClick, label = "Rechercher", className, }) {
+export function CommandMenuButton({ onClick, label = "Rechercher", compact = false, className, }) {
     const apple = useSyncExternalStore(subscribeNever, isApplePlatform, () => false);
-    return (_jsxs("button", { type: "button", onClick: onClick, "aria-keyshortcuts": "Control+K Meta+K", className: cn("touch-target flex h-9 w-full max-w-sm min-w-0 items-center gap-2 rounded-xl bg-foreground/[0.05] px-3 text-sm text-muted-foreground outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-foreground/[0.08] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50", className), children: [_jsx(HugeiconsIcon, { icon: Search01Icon, strokeWidth: 2, "aria-hidden": true, className: "size-4 shrink-0" }), _jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: label }), _jsxs(KbdGroup, { "aria-hidden": true, className: "max-lg:hidden", children: [_jsx(Kbd, { children: apple ? "⌘" : "Ctrl" }), _jsx(Kbd, { children: "K" })] })] }));
+    return (_jsxs("button", { type: "button", onClick: onClick, "aria-keyshortcuts": "Control+K Meta+K", ...(compact === true ? { "aria-label": label, title: label } : {}), "data-compact": compact === false ? undefined : String(compact), className: cn("touch-target flex h-9 w-full max-w-sm min-w-0 items-center gap-2 rounded-xl bg-foreground/[0.05] px-3 text-sm text-muted-foreground outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-foreground/[0.08] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50", compact === true && COMPACT, compact === "mobile" && "max-lg:w-9 max-lg:max-w-none max-lg:justify-center max-lg:px-0", className), children: [_jsx(HugeiconsIcon, { icon: Search01Icon, strokeWidth: 2, "aria-hidden": true, className: "size-4 shrink-0" }), _jsx("span", { className: cn("min-w-0 flex-1 truncate text-left", compact === true && "sr-only", compact === "mobile" && "max-lg:sr-only"), children: label }), _jsxs(KbdGroup, { "aria-hidden": true, className: cn("max-lg:hidden", compact === true && "hidden"), children: [_jsx(Kbd, { children: apple ? "⌘" : "Ctrl" }), _jsx(Kbd, { children: "K" })] })] }));
 }

package/dist/copy-button.d.ts

@@ -5,11 +5,14 @@ export declare function useCopy(): {
 };
 /**
  * Bouton-icône qui copie une valeur ; l'icône devient une coche, et « Copié » est annoncé aux
- * lecteurs d'écran.
+ * lecteurs d'écran. `showLabel` écrit le libellé à côté de l'icône (« Tout copier »), pour une
+ * copie qui n'est pas collée à sa valeur : tout un bloc d'enregistrements DNS, un journal.
  */
-export declare function CopyButton({ value, label, className, }: {
+export declare function CopyButton({ value, label, showLabel, className, }: {
     value: string;
     label?: string;
+    /** Libellé visible, qui devient « Copié » le temps de la confirmation. */
+    showLabel?: boolean;
     className?: string;
 }): React.JSX.Element;
 /**

package/dist/copy-button.js

@@ -30,10 +30,13 @@ export function useCopy() {
 }
 /**
  * Bouton-icône qui copie une valeur ; l'icône devient une coche, et « Copié » est annoncé aux
- * lecteurs d'écran.
+ * lecteurs d'écran. `showLabel` écrit le libellé à côté de l'icône (« Tout copier »), pour une
+ * copie qui n'est pas collée à sa valeur : tout un bloc d'enregistrements DNS, un journal.
  */
-export function CopyButton({ value, label = "Copier", className, }) {
+export function CopyButton({ value, label = "Copier", showLabel = false, className, }) {
     const { copied, copy } = useCopy();
+    if (showLabel)
+        return (_jsxs("button", { type: "button", onClick: () => void copy(value), "data-copied": copied || undefined, className: cn("touch-target inline-flex h-8 shrink-0 pressable items-center gap-1.5 rounded-full px-3 text-sm font-medium text-muted-foreground outline-none hover:bg-foreground/[0.06] hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50", copied && "text-status-active-ink hover:text-status-active-ink", className), children: [_jsx(HugeiconsIcon, { icon: copied ? Tick02Icon : Copy01Icon, "aria-hidden": true, className: "size-4 pop-in" }, copied ? "ok" : "copy"), _jsxs("span", { className: "inline-grid", children: [_jsx("span", { className: cn("col-start-1 row-start-1", copied && "invisible"), children: label }), _jsx("span", { "aria-hidden": true, className: cn("col-start-1 row-start-1", !copied && "invisible"), children: "Copi\u00E9" })] }), _jsx("span", { className: "sr-only", "aria-live": "polite", children: copied ? "Copié" : "" })] }));
     return (_jsxs("button", { type: "button", "aria-label": copied ? "Copié" : label, title: copied ? "Copié" : label, onClick: () => void copy(value), className: cn("touch-target grid size-8 shrink-0 pressable 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", copied && "text-status-active-ink hover:text-status-active-ink", className), children: [_jsx(HugeiconsIcon, { icon: copied ? Tick02Icon : Copy01Icon, "aria-hidden": true, className: "size-4 pop-in" }, copied ? "ok" : "copy"), _jsx("span", { className: "sr-only", "aria-live": "polite", children: copied ? "Copié" : "" })] }));
 }
 /**