@hgdc/ui 0.2.0 → 0.2.1

package/README.md

@@ -41,7 +41,11 @@ Un sous-chemin par composant, sans fichier d'index : `import { Badge } from "@hg
 - Chrome monochrome, un seul accent violet : focus, lien, élément actif, un geste principal par écran.
 - Profondeur par la teinte : ni ombre ni bordure dans le flux, ombre réservée à ce qui flotte.
 - Boutons en pilule, champs et menus en `rounded-2xl`, cartes en `rounded-3xl`.
+- Au survol, seule la couleur change : ni ombre, ni zoom. Le rebond est réservé à l'appui.
+- Couleurs de statut : la couleur vive pour les pastilles, son encre (`text-status-active-ink`, `text-info-ink`…) pour le texte. L'information est bleue, le violet reste l'accent.
+- Chargement : l'anneau de la DA, `<Spinner />` dans un bouton, `<Spinner size={8} tone="accent" />` seul sur une page.
 - Un `Button` rendu en lien (`render={<Link />}`) reste un lien pour les lecteurs d'écran.
+- Référence de l'interface : Host. Couleur d'un client : `--brand-accent`.
 
 Mode d'emploi complet : [Adopter le kit](https://github.com/hugogebel-boop/hgdc-kit/blob/main/docs/guides/adopter-le-kit.md#7-interface). Décisions : [ADR 0005](https://github.com/hugogebel-boop/hgdc-kit/blob/main/docs/adr/0005-ui-css-brute-et-sous-chemins.md).
 

package/dist/badge.js

@@ -5,9 +5,9 @@ const badgeVariants = cva("inline-flex w-fit items-center gap-1 rounded-full px-
     variants: {
         tone: {
             neutral: "bg-muted text-muted-foreground",
-            success: "bg-status-active/15 text-status-active",
-            warning: "bg-status-paused/15 text-status-paused",
-            info: "bg-status-done/15 text-status-done",
+            success: "bg-status-active/15 text-status-active-ink",
+            warning: "bg-status-paused/15 text-status-paused-ink",
+            info: "bg-info/12 text-info-ink",
             destructive: "bg-destructive/10 text-destructive",
         },
     },

package/dist/button.js

@@ -22,17 +22,18 @@ const buttonVariants = cva(
 // regarde à cet instant précis ; la relâche revient en 300 ms avec un petit
 // rebond (`--ease-bounce`, révision du 2026-09-24).
 //
-// Au survol d'un vrai pointeur (`hover:` ne s'applique qu'aux pointeurs
-// fins en Tailwind v4), le bouton s'avance d'un rien (1.02), comme sur le
-// site ; aucune ombre, jamais : ce qui répond au survol est la couleur et
-// l'échelle.
+// Au survol, seule la couleur change : ni ombre, ni échelle. Le zoom de
+// 1.02 faisait clignoter le libellé (le texte passe sur un calque GPU au
+// lissage différent pendant l'animation, puis revient), et la couleur, qui
+// suivait la courbe à rebond, dépassait sa cible : un éclair sur `ghost`.
+// La couleur suit donc `--ease-out` en 150 ms ; le rebond reste à l'échelle.
 //
 // Ni bordure transparente ni `bg-clip-padding` (retirés le 2026-09-27) : le
 // fond s'arrêtait un pixel avant le bord, et dans une feuille du bas posée à
 // une coordonnée fractionnaire (hauteur en `svh`, glissement), iOS laissait
 // voir ce pixel comme un filet sombre en haut de la pilule, en thème sombre.
 // Le focus et l'erreur passent par l'anneau seul.
-"group/button touch-target inline-flex shrink-0 items-center justify-center rounded-full text-sm font-medium whitespace-nowrap [transition-property:color,background-color,opacity,scale,box-shadow] duration-(--duration-slow) ease-(--ease-bounce) outline-none select-none focus-visible:ring-3 focus-visible:ring-ring/50 active:scale-[0.96] active:duration-(--duration-instant) active:ease-out disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-3 aria-invalid:ring-destructive/40 data-[pressed]:scale-[0.96] data-[pressed]:duration-(--duration-instant) data-[pressed]:ease-out motion-safe:hover:scale-[1.02] dark:aria-invalid:ring-destructive/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+"group/button touch-target inline-flex shrink-0 items-center justify-center rounded-full text-sm font-medium whitespace-nowrap [transition:color_var(--duration-fast)_var(--ease-out),background-color_var(--duration-fast)_var(--ease-out),box-shadow_var(--duration-fast)_var(--ease-out),opacity_var(--duration-fast)_var(--ease-out),scale_var(--duration-slow)_var(--ease-bounce)] outline-none select-none focus-visible:ring-3 focus-visible:ring-ring/50 active:scale-[0.96] active:duration-(--duration-instant) active:ease-out disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-3 aria-invalid:ring-destructive/40 data-[pressed]:scale-[0.96] data-[pressed]:duration-(--duration-instant) data-[pressed]:ease-out dark:aria-invalid:ring-destructive/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variants: {
         variant: {
             default: "bg-primary text-primary-foreground hover:bg-primary/85",

package/dist/segmented-control.js

@@ -13,9 +13,7 @@ import { cn } from "./cn.js";
  * signification reste atteignable, elle n'occupe plus la place.
  */
 export function SegmentedControl({ value, onValueChange, options, size = "md", label, className, }) {
-    return (_jsx("div", { role: "group", "aria-label": label, className: cn(
-        // Fond `muted` plutôt qu'un contour (ADR 0013).
-        "inline-flex w-fit max-w-full shrink-0 overflow-hidden rounded-3xl bg-muted p-1", className), children: options.map((opt) => {
+    return (_jsx("div", { role: "group", "aria-label": label, className: cn("inline-flex w-fit max-w-full shrink-0 overflow-hidden rounded-3xl border border-border bg-background p-1", className), children: options.map((opt) => {
             const active = value === opt.value;
             return (_jsx("button", { type: "button", "aria-pressed": active, "aria-label": opt.icon ? opt.label : undefined, title: opt.icon ? opt.label : undefined, onClick: () => onValueChange(opt.value), className: cn(
                 // Pas de flex-1 : une demi-colonne trop étroite rend le segment

package/dist/sonner.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Alert02Icon from "@hugeicons/core-free-icons/Alert02Icon";
 import CheckmarkCircle02Icon from "@hugeicons/core-free-icons/CheckmarkCircle02Icon";
 import InformationCircleIcon from "@hugeicons/core-free-icons/InformationCircleIcon";
-import Loading03Icon from "@hugeicons/core-free-icons/Loading03Icon";
 import MultiplicationSignCircleIcon from "@hugeicons/core-free-icons/MultiplicationSignCircleIcon";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { Toaster as Sonner } from "sonner";
+import { Spinner } from "./spinner.js";
 import { useTheme } from "./theme.js";
 function Toaster(props) {
     const { theme } = useTheme();
@@ -18,7 +18,7 @@ function Toaster(props) {
             info: _jsx(HugeiconsIcon, { icon: InformationCircleIcon, strokeWidth: 2, className: "size-4" }),
             warning: _jsx(HugeiconsIcon, { icon: Alert02Icon, strokeWidth: 2, className: "size-4" }),
             error: _jsx(HugeiconsIcon, { icon: MultiplicationSignCircleIcon, strokeWidth: 2, className: "size-4" }),
-            loading: _jsx(HugeiconsIcon, { icon: Loading03Icon, strokeWidth: 2, className: "size-4 animate-spin" }),
+            loading: (_jsx("span", { "aria-hidden": true, children: _jsx(Spinner, {}) })),
         }, style: {
             "--normal-bg": "var(--popover)",
             "--normal-text": "var(--popover-foreground)",

package/dist/spinner.d.ts

@@ -1,9 +1,20 @@
+declare const SIZES: {
+    readonly 3: "size-3";
+    readonly 4: "size-4";
+    readonly 5: "size-5";
+    readonly 6: "size-6";
+    readonly 8: "size-8";
+};
 /**
- * Inline spinner - Hugeicons `Loading03Icon` + animate-spin.
- * Hugeicons gardent l'identite DA, contrairement a un raw SVG ou un Tailwind border-spin.
+ * L'anneau d'attente de la DA : un arc arrondi qui tourne sur une piste à peine visible, le
+ * même que la page d'attente du portail. Dans un bouton ou une ligne, il prend la couleur du
+ * texte (`tone="current"`) ; seul sur une page, il prend l'accent (`tone="accent"`).
+ * Mouvement réduit : l'arc ne tourne plus, il respire.
  */
-export declare function Spinner({ className, label, size, }: {
+export declare function Spinner({ className, label, size, tone, }: {
     className?: string;
     label?: string;
-    size?: 3 | 4 | 5 | 6;
+    size?: keyof typeof SIZES;
+    tone?: "current" | "accent";
 }): React.JSX.Element;
+export {};

package/dist/spinner.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Loading03Icon from "@hugeicons/core-free-icons/Loading03Icon";
-import { HugeiconsIcon } from "@hugeicons/react";
 import { cn } from "./cn.js";
+const SIZES = { 3: "size-3", 4: "size-4", 5: "size-5", 6: "size-6", 8: "size-8" };
 /**
- * Inline spinner - Hugeicons `Loading03Icon` + animate-spin.
- * Hugeicons gardent l'identite DA, contrairement a un raw SVG ou un Tailwind border-spin.
+ * L'anneau d'attente de la DA : un arc arrondi qui tourne sur une piste à peine visible, le
+ * même que la page d'attente du portail. Dans un bouton ou une ligne, il prend la couleur du
+ * texte (`tone="current"`) ; seul sur une page, il prend l'accent (`tone="accent"`).
+ * Mouvement réduit : l'arc ne tourne plus, il respire.
  */
-export function Spinner({ className, label, size = 4, }) {
-    return (_jsxs("span", { className: cn("inline-flex items-center gap-2", className), children: [_jsx(HugeiconsIcon, { icon: Loading03Icon, strokeWidth: 2, className: cn("animate-spin", size === 3 && "size-3", size === 4 && "size-4", size === 5 && "size-5", size === 6 && "size-6") }), label ? _jsx("span", { children: label }) : null] }));
+export function Spinner({ className, label, size = 4, tone = "current", }) {
+    return (_jsxs("span", { role: "status", className: cn("inline-flex items-center gap-2", className), children: [_jsxs("svg", { viewBox: "0 0 32 32", fill: "none", "aria-hidden": true, className: cn("shrink-0", SIZES[size]), children: [_jsx("circle", { cx: "16", cy: "16", r: "13", strokeWidth: "4", className: "stroke-current opacity-15" }), _jsx("circle", { cx: "16", cy: "16", r: "13", strokeWidth: "4", strokeLinecap: "round", strokeDasharray: "22 60", className: cn("origin-center animate-spin motion-reduce:animate-pulse", tone === "accent" ? "stroke-accent" : "stroke-current") })] }), label ? _jsx("span", { children: label }) : _jsx("span", { className: "sr-only", children: "Chargement" })] }));
 }

package/package.json

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

package/styles.css

@@ -55,7 +55,6 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
-  --color-surface-hover: var(--surface-hover);
   --color-shell: var(--shell);
   --color-shell-foreground: var(--shell-foreground);
   --color-shell-muted: var(--shell-muted-foreground);
@@ -66,6 +65,10 @@
   --color-status-active: var(--status-active);
   --color-status-paused: var(--status-paused);
   --color-status-done: var(--status-done);
+  --color-status-active-ink: var(--status-active-ink);
+  --color-status-paused-ink: var(--status-paused-ink);
+  --color-info: var(--info);
+  --color-info-ink: var(--info-ink);
   --color-chart-1: var(--chart-1);
   --color-inverse: var(--inverse);
   --color-inverse-foreground: var(--inverse-foreground);
@@ -87,26 +90,27 @@
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
+  /* Synonymes gardés pour les primitives shadcn : ils suivent leur jeton de rôle. */
+  --popover: var(--card);
+  --popover-foreground: var(--card-foreground);
   /* Menus et sélecteurs (`floating.ts`) : fond opaque, un cran au-dessus de la carte en sombre. */
   --floating: oklch(1 0 0);
   --floating-muted: oklch(0.97 0 0);
   --primary: oklch(0.205 0 0);
   --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
+  --secondary: var(--muted);
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
   /* L=0.52 : 4,5:1 sur `muted`. */
   --muted-foreground: oklch(0.52 0 0);
-  --accent: oklch(0.55 0.25 296);
-  --accent-foreground: oklch(0.985 0 0);
+  /* `--brand-accent*` : couleur d’un client posée par le produit, sans toucher au kit. */
+  --accent: var(--brand-accent, oklch(0.55 0.25 296));
+  --accent-foreground: var(--brand-accent-foreground, oklch(0.985 0 0));
   --accent-soft: color-mix(in oklch, var(--accent) 10%, transparent);
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: var(--accent);
-  --surface-hover: oklch(0.945 0 0);
   /* Coque de l'application : barre latérale et en-tête. */
   --shell: oklch(0.955 0 0);
   --shell-foreground: oklch(0.145 0 0);
@@ -117,6 +121,12 @@
   --status-active: oklch(0.55 0.15 156);
   --status-paused: oklch(0.62 0.14 75);
   --status-done: oklch(0.52 0.2 293);
+  /* Encres : le texte d'un statut sur son lavis (4,5:1), la couleur vive restant aux pastilles. */
+  --status-active-ink: oklch(0.45 0.12 155);
+  --status-paused-ink: oklch(0.5 0.12 70);
+  /* Information : bleu, pour que le violet reste l'accent. */
+  --info: oklch(0.62 0.19 256);
+  --info-ink: oklch(0.48 0.17 256);
   --success: oklch(0.58 0.15 152);
   --success-foreground: oklch(0.985 0 0);
   /* Panneau inversé de la vitrine : encre sombre dans les deux thèmes. */
@@ -133,22 +143,18 @@
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.205 0 0);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
   --floating: oklch(0.255 0 0);
   --floating-muted: oklch(0.315 0 0);
   --primary: oklch(0.922 0 0);
   --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.269 0 0);
   --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.74 0.19 296);
-  --accent-foreground: oklch(0.205 0 0);
+  --accent: var(--brand-accent-dark, oklch(0.74 0.19 296));
+  --accent-foreground: var(--brand-accent-dark-foreground, oklch(0.205 0 0));
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --surface-hover: oklch(0.25 0 0);
   --shell: oklch(0.08 0 0);
   --shell-foreground: oklch(0.985 0 0);
   --shell-muted-foreground: oklch(0.708 0 0);
@@ -158,6 +164,10 @@
   --status-active: oklch(0.74 0.14 156);
   --status-paused: oklch(0.82 0.15 86);
   --status-done: oklch(0.68 0.17 293);
+  --status-active-ink: var(--status-active);
+  --status-paused-ink: var(--status-paused);
+  --info: oklch(0.7 0.16 256);
+  --info-ink: var(--info);
   --success: oklch(0.7 0.15 152);
   --success-foreground: oklch(0.16 0.02 152);
   --inverse: oklch(0.1 0 0);
@@ -209,15 +219,11 @@
 
 /* ── Surfaces ──────────────────────────────────────────────────────────── */
 
-/* Niveau 1 de la DA : une teinte, ni ombre ni bordure. `muted` en clair, `card` en sombre.
-   Dans la surface, un élément `muted` devient blanc au lieu de disparaître, sans carte dans
-   la carte. En utilitaire pour qu'un `hover:` posé sur la carte garde la main. */
+/* Niveau 1 de la DA : une teinte, ni ombre ni bordure. `muted` en clair, `card` en sombre
+   (un cran plus clair que la page). */
 @utility surface {
   background-color: var(--muted);
-  & > * {
-    --muted: var(--background);
-  }
-  .dark & {
+  :where(.dark) & {
     background-color: var(--card);
   }
 }
@@ -227,12 +233,12 @@
   background-color: var(--muted);
   transition: background-color var(--duration-fast) var(--ease-out);
   &:hover {
-    background-color: var(--surface-hover);
+    background-color: oklch(0.94 0 0);
   }
-  .dark & {
+  :where(.dark) & {
     background-color: var(--card);
   }
-  .dark &:hover {
+  :where(.dark) &:hover {
     background-color: var(--muted);
   }
 }