@hgdc/ui 0.29.0 → 0.30.1

package/dist/project-switcher.d.ts

@@ -28,7 +28,7 @@ export declare function ProjectMark({ project, className, }: {
  * pendant le chargement : le déclencheur montre déjà `activeName` (le segment de l'URL), le menu
  * reste utilisable pour « Tous les projets » et « Nouveau projet ».
  */
-export declare function ProjectSwitcher({ projects, activeId, activeName, onSelect, allHref, createHref, onCreate, renderLink, createLabel, className, }: {
+export declare function ProjectSwitcher({ projects, activeId, activeName, onSelect, allHref, createHref, onCreate, renderLink, noun, createLabel, className, }: {
     projects: ReadonlyArray<SwitcherProject> | undefined;
     /** Le projet ouvert ; `null` ou absent : « Tous les projets ». */
     activeId?: string | null;
@@ -43,6 +43,11 @@ export declare function ProjectSwitcher({ projects, activeId, activeName, onSele
     onCreate?: () => void;
     /** Rend un lien du routeur du produit ; par défaut un `<a href>`. */
     renderLink?: (href: string) => ReactElement;
+    /** Ce que l'on choisit, nom masculin : `{ one: "site", many: "sites" }` pour Analytics. */
+    noun?: {
+        one: string;
+        many: string;
+    };
     createLabel?: string;
     className?: string;
 }): React.JSX.Element;

package/dist/project-switcher.js

@@ -39,10 +39,12 @@ function SwitcherEntry({ href, onSelect, renderLink, children, }) {
  * pendant le chargement : le déclencheur montre déjà `activeName` (le segment de l'URL), le menu
  * reste utilisable pour « Tous les projets » et « Nouveau projet ».
  */
-export function ProjectSwitcher({ projects, activeId, activeName, onSelect, allHref, createHref, onCreate, renderLink, createLabel = "Nouveau projet", className, }) {
+export function ProjectSwitcher({ projects, activeId, activeName, onSelect, allHref, createHref, onCreate, renderLink, noun = { one: "projet", many: "projets" }, createLabel = `Nouveau ${noun.one}`, className, }) {
+    const capitalized = (word) => word.charAt(0).toUpperCase() + word.slice(1);
+    const all = `Tous les ${noun.many}`;
     const hasActive = activeId !== undefined && activeId !== null;
     const current = hasActive ? projects?.find((p) => p.id === activeId) : undefined;
-    const label = hasActive ? (current?.name ?? activeName ?? "") : "Tous les projets";
+    const label = hasActive ? (current?.name ?? activeName ?? "") : all;
     const canCreate = createHref !== undefined || onCreate !== undefined;
-    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx("button", { type: "button", "aria-label": hasActive ? `Projet ${label}, changer de projet` : "Tous les projets, changer de projet", className: cn("flex h-10 max-w-full min-w-0 items-center gap-2 rounded-xl px-2.5 text-sm font-medium 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 coarse:h-11", className) }), children: [hasActive ? (current ? (_jsx(ProjectMark, { project: current })) : (_jsx("span", { "aria-hidden": true, className: "size-6 shrink-0 rounded-md bg-muted skeleton-pulse" }))) : (_jsx(HugeiconsIcon, { icon: DashboardSquare01Icon, "aria-hidden": true, className: "size-4.5 shrink-0 text-muted-foreground" })), _jsx("span", { className: "min-w-0 truncate", children: label }), _jsx(HugeiconsIcon, { icon: UnfoldMoreIcon, "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" })] }), _jsxs(DropdownMenuContent, { align: "start", className: "w-72 max-w-[calc(100vw-2rem)]", children: [_jsxs(SwitcherEntry, { href: allHref, onSelect: () => onSelect?.(null), renderLink: renderLink, children: [_jsx(HugeiconsIcon, { icon: DashboardSquare01Icon, "aria-hidden": true, className: "size-4" }), _jsx("span", { className: "flex-1", children: "Tous les projets" }), hasActive ? null : _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Vue active", className: "size-4" })] }), projects?.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Projets" }), projects.map((project) => (_jsxs(SwitcherEntry, { href: project.href, onSelect: () => onSelect?.(project.id), renderLink: renderLink, children: [_jsx(ProjectMark, { project: project }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: project.name }), project.id === activeId ? (_jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Projet actif", className: "size-4" })) : null] }, project.id)))] })] })) : null, canCreate ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(SwitcherEntry, { href: createHref, onSelect: onCreate, renderLink: renderLink, children: [_jsx(HugeiconsIcon, { icon: PlusSignIcon, "aria-hidden": true, className: "size-4" }), createLabel] })] })) : null] })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx("button", { type: "button", "aria-label": hasActive ? `${capitalized(noun.one)} ${label}, changer de ${noun.one}` : `${all}, changer de ${noun.one}`, className: cn("flex h-10 max-w-full min-w-0 items-center gap-2 rounded-xl px-2.5 text-sm font-medium 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 coarse:h-11", className) }), children: [hasActive ? (current ? (_jsx(ProjectMark, { project: current })) : (_jsx("span", { "aria-hidden": true, className: "size-6 shrink-0 rounded-md bg-muted skeleton-pulse" }))) : (_jsx(HugeiconsIcon, { icon: DashboardSquare01Icon, "aria-hidden": true, className: "size-4.5 shrink-0 text-muted-foreground" })), _jsx("span", { className: "min-w-0 truncate", children: label }), _jsx(HugeiconsIcon, { icon: UnfoldMoreIcon, "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" })] }), _jsxs(DropdownMenuContent, { align: "start", className: "w-72 max-w-[calc(100vw-2rem)]", children: [_jsxs(SwitcherEntry, { href: allHref, onSelect: () => onSelect?.(null), renderLink: renderLink, children: [_jsx(HugeiconsIcon, { icon: DashboardSquare01Icon, "aria-hidden": true, className: "size-4" }), _jsx("span", { className: "flex-1", children: all }), hasActive ? null : _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Vue active", className: "size-4" })] }), projects?.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: capitalized(noun.many) }), projects.map((project) => (_jsxs(SwitcherEntry, { href: project.href, onSelect: () => onSelect?.(project.id), renderLink: renderLink, children: [_jsx(ProjectMark, { project: project }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: project.name }), project.id === activeId ? (_jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": `${capitalized(noun.one)} actif`, className: "size-4" })) : null] }, project.id)))] })] })) : null, canCreate ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(SwitcherEntry, { href: createHref, onSelect: onCreate, renderLink: renderLink, children: [_jsx(HugeiconsIcon, { icon: PlusSignIcon, "aria-hidden": true, className: "size-4" }), createLabel] })] })) : null] })] }));
 }

package/dist/time-chart.js

@@ -27,6 +27,13 @@ export function niceScale(max, ticks = 4) {
     const step = nice * magnitude;
     return { max: Math.ceil(max / step) * step, step };
 }
+/** Lignes lues par les lecteurs d'écran au plus : au-delà, un échantillon régulier, premier et dernier inclus. */
+const SR_SAMPLE_SIZE = 60;
+function sampleIndices(n) {
+    if (n <= SR_SAMPLE_SIZE)
+        return Array.from({ length: n }, (_, i) => i);
+    return Array.from({ length: SR_SAMPLE_SIZE }, (_, k) => Math.round((k * (n - 1)) / (SR_SAMPLE_SIZE - 1)));
+}
 /**
  * Série temporelle en SVG, sans bibliothèque : lignes (aire sous la courbe pour une série seule)
  * ou barres empilées. Le SVG s'étire à la largeur de son conteneur ; les traits gardent 2 px
@@ -88,5 +95,5 @@ export function TimeChart({ timestamps, series, kind = "line", height = 200, com
                                                         return v > 0 ? (_jsx("rect", { x: i + 0.15, y: base, width: 0.7, height: h, fill: color(si), opacity: (active === null || active === i ? 1 : 0.55) * (i === incompleteIndex ? 0.5 : 1) }, `${s.key}-${i}`)) : null;
                                                     });
                                                 })
-                                                : series.map((s, si) => (_jsxs("g", { children: [series.length === 1 ? (_jsx("path", { d: areaPath(s.values, scale.max), fill: color(si), opacity: 0.1 })) : null, _jsx("path", { d: linePath(incompleteIndex < 0 ? s.values : s.values.map((v, i) => (i === incompleteIndex ? null : v)), scale.max), fill: "none", stroke: color(si), strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" }), incompleteIndex >= 0 ? (_jsx("path", { "data-slot": "time-chart-incomplete", d: linePath(s.values.map((v, i) => (i >= incompleteIndex - 1 ? v : null)), scale.max), fill: "none", stroke: color(si), strokeWidth: 2, strokeDasharray: "3 4", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" })) : null] }, s.key))), active !== null ? (_jsx("line", { x1: active + 0.5, x2: active + 0.5, y1: 0, y2: 100, vectorEffect: "non-scaling-stroke", className: "stroke-foreground/25", strokeWidth: 1 })) : null] }), active !== null && activeTime !== undefined ? (_jsxs("div", { "data-slot": "time-chart-tooltip", className: cn("pointer-events-none absolute top-0 z-10 grid min-w-36 gap-1 rounded-xl bg-popover px-3 py-2 text-xs shadow-lg shadow-black/10 [--popover:var(--floating)]", (active + 0.5) / n > 0.6 ? "-translate-x-[calc(100%+0.75rem)]" : "translate-x-3"), style: { left: `${((active + 0.5) / n) * 100}%` }, children: [_jsxs("p", { className: "font-medium", children: [formatTime(activeTime), active === incompleteIndex ? (_jsx("span", { className: "ml-1.5 font-normal text-muted-foreground", children: "En cours" })) : null] }), series.map((s, si) => (_jsxs("p", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-[2px]", style: { background: color(si) } }), _jsx("span", { className: "flex-1 text-muted-foreground", children: s.label }), _jsx("span", { className: "font-medium tabular-nums", children: s.values[active] === null ? "-" : formatValue(s.values[active] ?? 0) })] }, s.key)))] })) : null] }), xLabels.length > 0 ? (_jsx("div", { "aria-hidden": true, className: "relative h-4 text-[11px] text-muted-foreground tabular-nums", children: xLabels.map((i, k) => (_jsx("span", { className: cn("absolute", k === 0 ? "left-0" : k === xLabels.length - 1 ? "right-0" : "-translate-x-1/2"), style: k === 0 || k === xLabels.length - 1 ? undefined : { left: `${((i + 0.5) / n) * 100}%` }, children: timestamps[i] !== undefined ? formatTime(timestamps[i]) : null }, i))) })) : null] })] }), _jsxs("table", { className: "sr-only", children: [_jsx("caption", { children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Date" }), series.map((s) => (_jsx("th", { scope: "col", children: s.label }, s.key)))] }) }), _jsx("tbody", { children: timestamps.map((t, i) => (_jsxs("tr", { children: [_jsxs("th", { scope: "row", children: [formatTime(t), i === incompleteIndex ? " (en cours)" : ""] }), series.map((s) => (_jsx("td", { children: s.values[i] === null ? "-" : formatValue(s.values[i] ?? 0) }, s.key)))] }, t))) })] })] }));
+                                                : series.map((s, si) => (_jsxs("g", { children: [series.length === 1 ? (_jsx("path", { d: areaPath(s.values, scale.max), fill: color(si), opacity: 0.1 })) : null, _jsx("path", { d: linePath(incompleteIndex < 0 ? s.values : s.values.map((v, i) => (i === incompleteIndex ? null : v)), scale.max), fill: "none", stroke: color(si), strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" }), incompleteIndex >= 0 ? (_jsx("path", { "data-slot": "time-chart-incomplete", d: linePath(s.values.map((v, i) => (i >= incompleteIndex - 1 ? v : null)), scale.max), fill: "none", stroke: color(si), strokeWidth: 2, strokeDasharray: "3 4", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" })) : null] }, s.key))), active !== null ? (_jsx("line", { x1: active + 0.5, x2: active + 0.5, y1: 0, y2: 100, vectorEffect: "non-scaling-stroke", className: "stroke-foreground/25", strokeWidth: 1 })) : null] }), active !== null && activeTime !== undefined ? (_jsxs("div", { "data-slot": "time-chart-tooltip", className: cn("pointer-events-none absolute top-0 z-10 grid min-w-36 gap-1 rounded-xl bg-popover px-3 py-2 text-xs shadow-lg shadow-black/10 [--popover:var(--floating)]", (active + 0.5) / n > 0.6 ? "-translate-x-[calc(100%+0.75rem)]" : "translate-x-3"), style: { left: `${((active + 0.5) / n) * 100}%` }, children: [_jsxs("p", { className: "font-medium", children: [formatTime(activeTime), active === incompleteIndex ? (_jsx("span", { className: "ml-1.5 font-normal text-muted-foreground", children: "En cours" })) : null] }), series.map((s, si) => (_jsxs("p", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-[2px]", style: { background: color(si) } }), _jsx("span", { className: "flex-1 text-muted-foreground", children: s.label }), _jsx("span", { className: "font-medium tabular-nums", children: s.values[active] === null ? "-" : formatValue(s.values[active] ?? 0) })] }, s.key)))] })) : null] }), xLabels.length > 0 ? (_jsx("div", { "aria-hidden": true, className: "relative h-4 text-[11px] text-muted-foreground tabular-nums", children: xLabels.map((i, k) => (_jsx("span", { className: cn("absolute", k === 0 ? "left-0" : k === xLabels.length - 1 ? "right-0" : "-translate-x-1/2"), style: k === 0 || k === xLabels.length - 1 ? undefined : { left: `${((i + 0.5) / n) * 100}%` }, children: timestamps[i] !== undefined ? formatTime(timestamps[i]) : null }, i))) })) : null] })] }), _jsx("div", { className: "sr-only", children: _jsxs("table", { children: [_jsx("caption", { children: n > SR_SAMPLE_SIZE ? `${label} (${n} mesures, échantillon de ${SR_SAMPLE_SIZE})` : label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Date" }), series.map((s) => (_jsx("th", { scope: "col", children: s.label }, s.key)))] }) }), _jsx("tbody", { children: sampleIndices(n).map((i) => (_jsxs("tr", { children: [_jsxs("th", { scope: "row", children: [formatTime(timestamps[i] ?? 0), i === incompleteIndex ? " (en cours)" : ""] }), series.map((s) => (_jsx("td", { children: s.values[i] === null ? "-" : formatValue(s.values[i] ?? 0) }, s.key)))] }, timestamps[i]))) })] }) })] }));
 }

package/package.json

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