@nomosui/react 0.4.0 → 0.5.0

package/tokens/theme.css

@@ -5,7 +5,14 @@
  *
  * L'app l'importe (`src/styles/globals.css`) et le build des vues l'inline
  * (`src/mcp/view.css`) : une seule définition du raccord, deux rendus.
+ *
+ * Le paquet est consommé compilé : les classes des composants vivent dans `dist`, que le
+ * Tailwind du consommateur ne scanne pas (il ignore `node_modules`). Cette source déclare
+ * le paquet à lui-même — sans elle, un consommateur qui ne scanne que son propre code perd
+ * `bg-popover`, `z-popover`, `shadow-md`… et la surcouche se rend transparente (ADR 0027).
  */
+@source '../dist/index.js';
+
 @theme {
   /*
     La densité (ADR 0008) multiplie l'échelle d'espacement : toutes les marges, tous les
@@ -43,6 +50,7 @@
   --color-card-foreground: hsl(var(--nomos-color-card-foreground));
 
   --color-brand: var(--nomos-color-brand);
+  --color-scrim: hsl(var(--nomos-color-scrim));
 
   --color-status-info: hsl(var(--nomos-color-status-info));
   --color-status-info-ink: hsl(var(--nomos-color-status-info-ink));
@@ -61,3 +69,200 @@
   --radius-md: var(--nomos-radius-field);
   --radius-sm: var(--nomos-radius-chip);
 }
+
+/*
+  L'empilement et le mouvement (ADR 0027). Les noms sont ceux du cœur, les valeurs sont
+  des tokens : `z-overlay` lit `--nomos-z-overlay`, chaque animation lit une durée et une
+  courbe. Aucune valeur de temps n'est écrite ici — une app les remplace par le skin.
+  `prefers-reduced-motion` neutralise les animations sans toucher au reste.
+*/
+@utility z-overlay {
+  z-index: var(--nomos-z-overlay);
+}
+@utility z-popover {
+  z-index: var(--nomos-z-popover);
+}
+@utility z-tooltip {
+  z-index: var(--nomos-z-tooltip);
+}
+@utility z-toast {
+  z-index: var(--nomos-z-toast);
+}
+
+@keyframes nomos-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes nomos-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes nomos-content-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes nomos-content-out {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+@keyframes nomos-slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes nomos-slide-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes nomos-slide-in-top {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes nomos-slide-in-bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes nomos-slide-out-right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+@keyframes nomos-slide-out-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+@keyframes nomos-slide-out-top {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+@keyframes nomos-slide-out-bottom {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+@utility animate-overlay-in {
+  animation: nomos-fade-in var(--nomos-motion-duration-base) var(--nomos-motion-ease-out) both;
+}
+@utility animate-overlay-out {
+  animation: nomos-fade-out var(--nomos-motion-duration-fast) var(--nomos-motion-ease-in) both;
+}
+@utility animate-content-in {
+  animation: nomos-content-in var(--nomos-motion-duration-base) var(--nomos-motion-ease-out) both;
+}
+@utility animate-content-out {
+  animation: nomos-content-out var(--nomos-motion-duration-fast) var(--nomos-motion-ease-in) both;
+}
+@utility animate-slide-in-right {
+  animation: nomos-slide-in-right var(--nomos-motion-duration-slow) var(--nomos-motion-ease-out) both;
+}
+@utility animate-slide-in-left {
+  animation: nomos-slide-in-left var(--nomos-motion-duration-slow) var(--nomos-motion-ease-out) both;
+}
+@utility animate-slide-in-top {
+  animation: nomos-slide-in-top var(--nomos-motion-duration-slow) var(--nomos-motion-ease-out) both;
+}
+@utility animate-slide-in-bottom {
+  animation: nomos-slide-in-bottom var(--nomos-motion-duration-slow) var(--nomos-motion-ease-out) both;
+}
+@utility animate-slide-out-right {
+  animation: nomos-slide-out-right var(--nomos-motion-duration-slow) var(--nomos-motion-ease-in) both;
+}
+@utility animate-slide-out-left {
+  animation: nomos-slide-out-left var(--nomos-motion-duration-slow) var(--nomos-motion-ease-in) both;
+}
+@utility animate-slide-out-top {
+  animation: nomos-slide-out-top var(--nomos-motion-duration-slow) var(--nomos-motion-ease-in) both;
+}
+@utility animate-slide-out-bottom {
+  animation: nomos-slide-out-bottom var(--nomos-motion-duration-slow) var(--nomos-motion-ease-in) both;
+}
+
+/*
+  Le repli de hauteur (`Collapsible`, `Accordion`) : la hauteur mesurée par Radix arrive
+  par `--nomos-collapse-height`, que le composant relie à sa variable Radix. Le mouvement
+  reste celui des tokens (ADR 0027).
+*/
+@keyframes nomos-collapse-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--nomos-collapse-height);
+  }
+}
+@keyframes nomos-collapse-up {
+  from {
+    height: var(--nomos-collapse-height);
+  }
+  to {
+    height: 0;
+  }
+}
+@utility animate-collapse-down {
+  animation: nomos-collapse-down var(--nomos-motion-duration-base) var(--nomos-motion-ease-out);
+}
+@utility animate-collapse-up {
+  animation: nomos-collapse-up var(--nomos-motion-duration-base) var(--nomos-motion-ease-in);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-overlay-in,
+  .animate-overlay-out,
+  .animate-content-in,
+  .animate-content-out,
+  .animate-collapse-down,
+  .animate-collapse-up,
+  [class*='animate-slide-'] {
+    animation: none;
+  }
+}

package/tokens/tokens.generated.css

@@ -27,6 +27,7 @@
     --nomos-color-input: 240 8% 19%;
     --nomos-color-ring: 174 100% 39%;
     --nomos-color-brand: #00c9b1;
+    --nomos-color-scrim: 0 0% 0% / 0.8;
     --nomos-color-status-info: 199 89% 48%;
     --nomos-color-status-info-ink: 198 93% 74%;
     --nomos-color-status-progress: 258 90% 66%;
@@ -43,6 +44,16 @@
     --nomos-radius-control: 0.625rem;
     --nomos-radius-field: 0.5rem;
     --nomos-radius-chip: 0.375rem;
+    --nomos-z-overlay: 50;
+    --nomos-z-popover: 60;
+    --nomos-z-tooltip: 70;
+    --nomos-z-toast: 80;
+    --nomos-motion-duration-fast: 150ms;
+    --nomos-motion-duration-base: 250ms;
+    --nomos-motion-duration-slow: 400ms;
+    --nomos-motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+    --nomos-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --nomos-motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
     --nomos-space-hairline: 2px;
     --nomos-space-tight: 4px;
     --nomos-space-snug: 8px;
@@ -92,6 +103,7 @@
       --nomos-color-input: 240 6% 85%;
       --nomos-color-ring: 174 100% 35%;
       --nomos-color-brand: #00c9b1;
+      --nomos-color-scrim: 0 0% 0% / 0.8;
       --nomos-color-status-info: 199 89% 48%;
       --nomos-color-status-info-ink: 201 96% 32%;
       --nomos-color-status-progress: 258 90% 66%;
@@ -108,6 +120,16 @@
       --nomos-radius-control: 0.625rem;
       --nomos-radius-field: 0.5rem;
       --nomos-radius-chip: 0.375rem;
+      --nomos-z-overlay: 50;
+      --nomos-z-popover: 60;
+      --nomos-z-tooltip: 70;
+      --nomos-z-toast: 80;
+      --nomos-motion-duration-fast: 150ms;
+      --nomos-motion-duration-base: 250ms;
+      --nomos-motion-duration-slow: 400ms;
+      --nomos-motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+      --nomos-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
+      --nomos-motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
       --nomos-space-hairline: 2px;
       --nomos-space-tight: 4px;
       --nomos-space-snug: 8px;
@@ -156,6 +178,7 @@
     --nomos-color-input: 240 8% 19%;
     --nomos-color-ring: 174 100% 39%;
     --nomos-color-brand: #00c9b1;
+    --nomos-color-scrim: 0 0% 0% / 0.8;
     --nomos-color-status-info: 199 89% 48%;
     --nomos-color-status-info-ink: 198 93% 74%;
     --nomos-color-status-progress: 258 90% 66%;
@@ -172,6 +195,16 @@
     --nomos-radius-control: 0.625rem;
     --nomos-radius-field: 0.5rem;
     --nomos-radius-chip: 0.375rem;
+    --nomos-z-overlay: 50;
+    --nomos-z-popover: 60;
+    --nomos-z-tooltip: 70;
+    --nomos-z-toast: 80;
+    --nomos-motion-duration-fast: 150ms;
+    --nomos-motion-duration-base: 250ms;
+    --nomos-motion-duration-slow: 400ms;
+    --nomos-motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+    --nomos-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --nomos-motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
     --nomos-space-hairline: 2px;
     --nomos-space-tight: 4px;
     --nomos-space-snug: 8px;
@@ -219,6 +252,7 @@
     --nomos-color-input: 240 6% 85%;
     --nomos-color-ring: 174 100% 35%;
     --nomos-color-brand: #00c9b1;
+    --nomos-color-scrim: 0 0% 0% / 0.8;
     --nomos-color-status-info: 199 89% 48%;
     --nomos-color-status-info-ink: 201 96% 32%;
     --nomos-color-status-progress: 258 90% 66%;
@@ -235,6 +269,16 @@
     --nomos-radius-control: 0.625rem;
     --nomos-radius-field: 0.5rem;
     --nomos-radius-chip: 0.375rem;
+    --nomos-z-overlay: 50;
+    --nomos-z-popover: 60;
+    --nomos-z-tooltip: 70;
+    --nomos-z-toast: 80;
+    --nomos-motion-duration-fast: 150ms;
+    --nomos-motion-duration-base: 250ms;
+    --nomos-motion-duration-slow: 400ms;
+    --nomos-motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+    --nomos-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --nomos-motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
     --nomos-space-hairline: 2px;
     --nomos-space-tight: 4px;
     --nomos-space-snug: 8px;

package/tokens/tokens.json

@@ -84,6 +84,11 @@
       "brand-teal": {
         "$description": "Le teal de marque, conservé en hexadécimal : il vient d'une identité (ADR 0001) et non d'une rampe calculée.",
         "400": { "$type": "color", "$value": "#00c9b1" }
+      },
+      "scrim": {
+        "$description": "Le voile posé sous une couche flottante. Porté en HSL à quatre composantes (teinte, saturation, clarté, alpha) pour que l'opacité fasse partie du token et non d'une classe (ADR 0027) — `bg-black/80` en dur disparaît.",
+        "$type": "color",
+        "$value": { "colorSpace": "hsl", "components": [0, 0, 0, 0.8] }
       }
     },
     "space": {
@@ -103,6 +108,26 @@
       "field": { "$type": "dimension", "$value": { "value": 0.5, "unit": "rem" } },
       "chip": { "$type": "dimension", "$value": { "value": 0.375, "unit": "rem" } }
     },
+    "z": {
+      "$description": "L'ordre d'empilement des couches flottantes, nommé par usage (ADR 0027). L'échelle est en dizaines : de la place reste entre deux paliers pour un besoin local.",
+      "overlay": { "$type": "number", "$value": 50 },
+      "popover": { "$type": "number", "$value": 60 },
+      "tooltip": { "$type": "number", "$value": 70 },
+      "toast": { "$type": "number", "$value": 80 }
+    },
+    "motion": {
+      "$description": "Les durées et les courbes des transitions (ADR 0027). Le mouvement est un token : le cœur le règle, une app le remplace, et `prefers-reduced-motion` le neutralise en CSS.",
+      "duration": {
+        "fast": { "$type": "duration", "$value": { "value": 150, "unit": "ms" } },
+        "base": { "$type": "duration", "$value": { "value": 250, "unit": "ms" } },
+        "slow": { "$type": "duration", "$value": { "value": 400, "unit": "ms" } }
+      },
+      "ease": {
+        "standard": { "$type": "cubicBezier", "$value": [0.4, 0, 0.2, 1] },
+        "in": { "$type": "cubicBezier", "$value": [0.4, 0, 1, 1] },
+        "out": { "$type": "cubicBezier", "$value": [0, 0, 0.2, 1] }
+      }
+    },
     "type": {
       "$description": "L'échelle typographique : des tailles nommées par leur rôle, chacune avec sa hauteur de ligne.",
       "size": {
@@ -158,6 +183,7 @@
       "input": { "$type": "color", "$value": { "dark": "{primitive.color.ink.750}", "light": "{primitive.color.paper.200}" } },
       "ring": { "$type": "color", "$value": { "dark": "{primitive.color.teal.500}", "light": "{primitive.color.teal.600}" } },
       "brand": { "$type": "color", "$value": { "dark": "{primitive.color.brand-teal.400}", "light": "{primitive.color.brand-teal.400}" } },
+      "scrim": { "$type": "color", "$value": { "dark": "{primitive.color.scrim}", "light": "{primitive.color.scrim}" } },
       "status-info": { "$type": "color", "$value": { "dark": "{primitive.color.status.info.500}", "light": "{primitive.color.status.info.500}" } },
       "status-info-ink": { "$type": "color", "$value": { "dark": "{primitive.color.status.info.300}", "light": "{primitive.color.status.info.700}" } },
       "status-progress": { "$type": "color", "$value": { "dark": "{primitive.color.status.progress.500}", "light": "{primitive.color.status.progress.500}" } },
@@ -178,6 +204,26 @@
       "field": { "$type": "dimension", "$value": { "dark": "{primitive.radius.field}", "light": "{primitive.radius.field}" } },
       "chip": { "$type": "dimension", "$value": { "dark": "{primitive.radius.chip}", "light": "{primitive.radius.chip}" } }
     },
+    "z": {
+      "$description": "L'ordre d'empilement tel que les composants le lisent (ADR 0027). Les modes ne le séparent pas ; un skin peut toutefois le remplacer, l'emplacement est sémantique.",
+      "overlay": { "$type": "number", "$value": { "dark": "{primitive.z.overlay}", "light": "{primitive.z.overlay}" } },
+      "popover": { "$type": "number", "$value": { "dark": "{primitive.z.popover}", "light": "{primitive.z.popover}" } },
+      "tooltip": { "$type": "number", "$value": { "dark": "{primitive.z.tooltip}", "light": "{primitive.z.tooltip}" } },
+      "toast": { "$type": "number", "$value": { "dark": "{primitive.z.toast}", "light": "{primitive.z.toast}" } }
+    },
+    "motion": {
+      "$description": "Le mouvement sémantique : durées et courbes que les overlays emploient (ADR 0027). Les modes ne le séparent pas.",
+      "duration": {
+        "fast": { "$type": "duration", "$value": { "dark": "{primitive.motion.duration.fast}", "light": "{primitive.motion.duration.fast}" } },
+        "base": { "$type": "duration", "$value": { "dark": "{primitive.motion.duration.base}", "light": "{primitive.motion.duration.base}" } },
+        "slow": { "$type": "duration", "$value": { "dark": "{primitive.motion.duration.slow}", "light": "{primitive.motion.duration.slow}" } }
+      },
+      "ease": {
+        "standard": { "$type": "cubicBezier", "$value": { "dark": "{primitive.motion.ease.standard}", "light": "{primitive.motion.ease.standard}" } },
+        "in": { "$type": "cubicBezier", "$value": { "dark": "{primitive.motion.ease.in}", "light": "{primitive.motion.ease.in}" } },
+        "out": { "$type": "cubicBezier", "$value": { "dark": "{primitive.motion.ease.out}", "light": "{primitive.motion.ease.out}" } }
+      }
+    },
     "space": {
       "$description": "L'espacement sémantique : ce que les composants lisent. La densité (ADR 0008) le multipliera en une passe, ici les deux modes portent la même valeur.",
       "hairline": { "$type": "dimension", "$value": { "dark": "{primitive.space.hairline}", "light": "{primitive.space.hairline}" } },

package/tokens/tokens.resource.json

@@ -33,6 +33,7 @@
       "--nomos-color-input": "240 8% 19%",
       "--nomos-color-ring": "174 100% 39%",
       "--nomos-color-brand": "#00c9b1",
+      "--nomos-color-scrim": "0 0% 0% / 0.8",
       "--nomos-color-status-info": "199 89% 48%",
       "--nomos-color-status-info-ink": "198 93% 74%",
       "--nomos-color-status-progress": "258 90% 66%",
@@ -49,6 +50,16 @@
       "--nomos-radius-control": "0.625rem",
       "--nomos-radius-field": "0.5rem",
       "--nomos-radius-chip": "0.375rem",
+      "--nomos-z-overlay": "50",
+      "--nomos-z-popover": "60",
+      "--nomos-z-tooltip": "70",
+      "--nomos-z-toast": "80",
+      "--nomos-motion-duration-fast": "150ms",
+      "--nomos-motion-duration-base": "250ms",
+      "--nomos-motion-duration-slow": "400ms",
+      "--nomos-motion-ease-standard": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "--nomos-motion-ease-in": "cubic-bezier(0.4, 0, 1, 1)",
+      "--nomos-motion-ease-out": "cubic-bezier(0, 0, 0.2, 1)",
       "--nomos-space-hairline": "2px",
       "--nomos-space-tight": "4px",
       "--nomos-space-snug": "8px",
@@ -94,6 +105,7 @@
       "--nomos-color-input": "240 6% 85%",
       "--nomos-color-ring": "174 100% 35%",
       "--nomos-color-brand": "#00c9b1",
+      "--nomos-color-scrim": "0 0% 0% / 0.8",
       "--nomos-color-status-info": "199 89% 48%",
       "--nomos-color-status-info-ink": "201 96% 32%",
       "--nomos-color-status-progress": "258 90% 66%",
@@ -110,6 +122,16 @@
       "--nomos-radius-control": "0.625rem",
       "--nomos-radius-field": "0.5rem",
       "--nomos-radius-chip": "0.375rem",
+      "--nomos-z-overlay": "50",
+      "--nomos-z-popover": "60",
+      "--nomos-z-tooltip": "70",
+      "--nomos-z-toast": "80",
+      "--nomos-motion-duration-fast": "150ms",
+      "--nomos-motion-duration-base": "250ms",
+      "--nomos-motion-duration-slow": "400ms",
+      "--nomos-motion-ease-standard": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "--nomos-motion-ease-in": "cubic-bezier(0.4, 0, 1, 1)",
+      "--nomos-motion-ease-out": "cubic-bezier(0, 0, 0.2, 1)",
       "--nomos-space-hairline": "2px",
       "--nomos-space-tight": "4px",
       "--nomos-space-snug": "8px",