npm - @eduardoalvarez/arrecife - Versions diffs - 0.5.1 → 0.6.0 - Mend

@eduardoalvarez/arrecife 0.5.1 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (66) hide show

package/CHANGELOG.md +45 -0
package/README.md +706 -470
package/dist/brand/index.cjs +112 -95
package/dist/brand/index.d.cts +40 -39
package/dist/brand/index.d.ts +40 -39
package/dist/brand/index.js +5 -4
package/dist/catalog-D13txprv.d.cts +78 -0
package/dist/catalog-D13txprv.d.ts +78 -0
package/dist/chart/index.cjs +100 -83
package/dist/chart/index.d.cts +66 -66
package/dist/chart/index.d.ts +66 -66
package/dist/chart/index.js +14 -12
package/dist/chunk-25YNFCIF.js +141 -0
package/dist/{chunk-YZ2SDOVZ.js → chunk-6O3KWB6P.js} +30 -30
package/dist/chunk-CKRSQPTX.js +36 -0
package/dist/{chunk-ZEOQKRQ7.js → chunk-DKCN7BAL.js} +1 -1
package/dist/chunk-GCRII2KQ.js +86 -0
package/dist/chunk-JMOOFZ3B.js +42 -0
package/dist/chunk-O4TAH7YJ.js +276 -0
package/dist/chunk-ODBFN44D.js +45 -0
package/dist/{chunk-VPT32GPG.js → chunk-PMN7NR3G.js} +2 -2
package/dist/chunk-XKYHTOUJ.js +27 -0
package/dist/form/index.cjs +109 -92
package/dist/form/index.d.cts +43 -42
package/dist/form/index.d.ts +43 -42
package/dist/form/index.js +25 -23
package/dist/index.cjs +1047 -914
package/dist/index.d.cts +769 -777
package/dist/index.d.ts +769 -777
package/dist/index.js +608 -660
package/dist/{label-DuTvJGxD.d.ts → label-MgHFKnFy.d.cts} +3 -3
package/dist/{label-DuTvJGxD.d.cts → label-MgHFKnFy.d.ts} +3 -3
package/dist/og/index.cjs +130 -130
package/dist/og/index.d.cts +93 -89
package/dist/og/index.d.ts +93 -89
package/dist/og/index.js +106 -106
package/dist/shiki/index.cjs +28 -30
package/dist/shiki/index.d.cts +4 -4
package/dist/shiki/index.d.ts +4 -4
package/dist/shiki/index.js +12 -12
package/dist/theme/index.cjs +97 -0
package/dist/theme/index.d.cts +144 -0
package/dist/theme/index.d.ts +144 -0
package/dist/theme/index.js +2 -0
package/dist/tokens/index.cjs +133 -86
package/dist/tokens/index.d.cts +246 -161
package/dist/tokens/index.d.ts +246 -161
package/dist/tokens/index.js +2 -2
package/dist/tokens/theme.css +133 -98
package/dist/variants/index.cjs +192 -0
package/dist/variants/index.d.cts +192 -0
package/dist/variants/index.d.ts +192 -0
package/dist/variants/index.js +3 -0
package/llms.txt +810 -744
package/package.json +20 -11
package/dist/catalogo-Du5ID-Hi.d.cts +0 -77
package/dist/catalogo-Du5ID-Hi.d.ts +0 -77
package/dist/chunk-E3OMP2DL.js +0 -36
package/dist/chunk-KPZNNMV5.js +0 -83
package/dist/chunk-NHS7ETKJ.js +0 -27
package/dist/chunk-TSPJOM6K.js +0 -229
package/dist/chunk-UOWIDFCB.js +0 -81
package/dist/tema/index.cjs +0 -94
package/dist/tema/index.d.cts +0 -110
package/dist/tema/index.d.ts +0 -110
package/dist/tema/index.js +0 -2

package/dist/tokens/index.js CHANGED Viewed

@@ -1,3 +1,3 @@
-export { tokens } from '../chunk-VPT32GPG.js';
-export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, sintaxis, size, spacing, tagline, typeScale } from '../chunk-TSPJOM6K.js';
+export { tokens } from '../chunk-PMN7NR3G.js';
+export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, size, spacing, syntax, tagline, typeScale } from '../chunk-O4TAH7YJ.js';
 import '../chunk-MLKGABMK.js';

package/dist/tokens/theme.css CHANGED Viewed

@@ -1,25 +1,25 @@
 /*
- * GENERADO por scripts/build-tokens.mjs desde src/tokens/tokens.ts.
- * No lo edites a mano: se regenera en cada build.
+ * GENERATED by scripts/build-tokens.mjs from src/tokens/tokens.ts.
+ * Do not edit by hand: it is regenerated on every build.
  *
- * Uso en un proyecto Tailwind v4:
+ * Usage in a Tailwind v4 project:
  *   @import "tailwindcss";
  *   @import "@eduardoalvarez/arrecife/tokens/theme.css";
  *
- * El modo oscuro es el primario y es el default. Un proyecto en modo claro
- * declara data-theme="light" en <html>.
+ * Dark is the primary mode and the default. A project in light mode
+ * declares data-theme="light" on <html>.
  *
- * Las familias tipográficas se declaran por nombre: el proyecto carga
- * Bricolage Grotesque, Geist y JetBrains Mono como prefiera.
+ * Font families are declared by name: the project loads Bricolage
+ * Grotesque, Geist and JetBrains Mono however it prefers.
  */
-/* El modo se elige con data-theme. El oscuro es el primario, así que es el
-   default: un proyecto claro declara data-theme="light" en <html>. */
+/* The mode is chosen with data-theme. Dark is primary, so it is the default:
+   a light project declares data-theme="light" on <html>. */
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 @custom-variant light (&:where([data-theme="light"], [data-theme="light"] *));
 @theme {
-  /* --- color · modo oscuro (default) ------------------------------------ */
+  /* --- color · dark mode (default) ------------------------------------- */
   --color-background: #091319;
   --color-surface: #10202B;
   --color-surface-raised: #17303E;
@@ -38,19 +38,22 @@
   --color-success: #4FB477;
   --color-warning: #E8A33D;
   --color-error: #E15757;
+  --color-danger: #F4736B;
+  --color-danger-hover: #F78D86;
+  --color-danger-on: #2B0A08;
-  /* --- marca · iguales en los dos modos ---------------------------------- */
+  /* --- brand · identical in both modes ----------------------------------- */
   --color-brand-body: #3E7CB1;
   --color-brand-spots: #C2D7E7;
   --color-brand-hull: #0B1524;
-  /* --- series de gráfica · modo oscuro (default) --------------------------- */
-  --color-serie-1: #35D6C0;
-  --color-serie-2: #F2A65A;
-  --color-serie-3: #3E7CB1;
-  --color-serie-4: #71919C;
+  /* --- chart series · dark mode (default) -------------------------------- */
+  --color-series-1: #35D6C0;
+  --color-series-2: #F2A65A;
+  --color-series-3: #3E7CB1;
+  --color-series-4: #71919C;
-  /* --- tipografía --------------------------------------------------------- */
+  /* --- typography --------------------------------------------------------- */
   --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
   --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
   --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
@@ -99,7 +102,7 @@
   --text-eyebrow: 12px;
   --text-eyebrow--letter-spacing: 0.12em;
-  /* --- forma y ritmo ------------------------------------------------------ */
+  /* --- shape and rhythm --------------------------------------------------- */
   --radius-chip: 6px;
   --radius-control: 10px;
   --radius-card: 14px;
@@ -117,6 +120,7 @@
   --spacing-control-md: 22px;
   --spacing-control-lg: 30px;
   --spacing-control-icon: 42px;
+  --spacing-control-icon-sm: 32px;
   --spacing-nav: 64px;
   --container-content: 760px;
@@ -128,17 +132,17 @@
   --duration-standard: 150ms;
   --ease-standard: ease-out;
-  /* --- degradados · modo oscuro (default) --------------------------------- */
+  /* --- gradients · dark mode (default) ----------------------------------- */
   --gradient-hero: linear-gradient(160deg, #091319 60%, #0D2129 100%);
-  --gradient-seccion: linear-gradient(150deg, #10202B 0%, #0D2129 100%);
+  --gradient-section: linear-gradient(150deg, #10202B 0%, #0D2129 100%);
   --gradient-og: linear-gradient(145deg, #091319 55%, #0D2129 100%);
 }
-/* --- color por modo, anidable ---------------------------------------------
-   Los dos modos se emiten como bloques propios, no solo el claro. Así un
-   subárbol puede declarar el modo contrario al de la página y todo lo de dentro
-   lo respeta: es lo que necesita un bloque de código, que va sobre casco en los
-   dos temas y por tanto siempre lleva tinta clara encima. */
+/* --- color per mode, nestable ----------------------------------------------
+   Both modes are emitted as their own blocks, not just light. That way a subtree
+   can declare the opposite mode to the page and everything inside honours it:
+   which is what a code block needs, since it sits on hull in both themes and
+   therefore always carries light ink on top. */
 [data-theme='dark'] {
   --color-background: #091319;
   --color-surface: #10202B;
@@ -158,14 +162,17 @@
   --color-success: #4FB477;
   --color-warning: #E8A33D;
   --color-error: #E15757;
+  --color-danger: #F4736B;
+  --color-danger-hover: #F78D86;
+  --color-danger-on: #2B0A08;
-  --color-serie-1: #35D6C0;
-  --color-serie-2: #F2A65A;
-  --color-serie-3: #3E7CB1;
-  --color-serie-4: #71919C;
+  --color-series-1: #35D6C0;
+  --color-series-2: #F2A65A;
+  --color-series-3: #3E7CB1;
+  --color-series-4: #71919C;
   --gradient-hero: linear-gradient(160deg, #091319 60%, #0D2129 100%);
-  --gradient-seccion: linear-gradient(150deg, #10202B 0%, #0D2129 100%);
+  --gradient-section: linear-gradient(150deg, #10202B 0%, #0D2129 100%);
   --gradient-og: linear-gradient(145deg, #091319 55%, #0D2129 100%);
 }
@@ -188,34 +195,39 @@
   --color-success: #0F6B52;
   --color-warning: #8D6111;
   --color-error: #C0392B;
+  --color-danger: #C0392B;
+  --color-danger-hover: #A32F22;
+  --color-danger-on: #FFF6F4;
-  --color-serie-1: #0D7C6F;
-  --color-serie-2: #A65B27;
-  --color-serie-3: #3E7CB1;
-  --color-serie-4: #626A75;
+  --color-series-1: #0D7C6F;
+  --color-series-2: #A65B27;
+  --color-series-3: #3E7CB1;
+  --color-series-4: #626A75;
   --gradient-hero: linear-gradient(160deg, #F6F2EA 60%, #EFE9DE 100%);
-  --gradient-seccion: linear-gradient(150deg, #FFFFFF 0%, #EFE9DE 100%);
+  --gradient-section: linear-gradient(150deg, #FFFFFF 0%, #EFE9DE 100%);
   --gradient-og: linear-gradient(145deg, #F6F2EA 55%, #EFE9DE 100%);
 }
-/* --- los dos degradados del sistema, como utilidad --------------------------
-   Son los dos únicos bloques con degradado: el hero y el panel de sección. Que
-   sean utilidades y no clases arbitrarias es lo que impide que cada proyecto
-   escriba su propio ángulo. Siguen el modo porque leen la custom property. */
-@utility degradado-hero {
+/* --- the system's two gradients, as utilities -------------------------------
+   They are the only two blocks with a gradient: the hero and the section panel.
+   Making them utilities rather than arbitrary classes is what stops each project
+   from writing its own angle. They follow the mode because they read the custom
+   property. */
+@utility gradient-hero {
   background-image: var(--gradient-hero);
 }
-@utility degradado-seccion {
-  background-image: var(--gradient-seccion);
+@utility gradient-section {
+  background-image: var(--gradient-section);
 }
-/* --- la tercera excepción de movimiento: el shimmer del skeleton ------------
-   El sistema no anima, y esta es la tercera y última salvedad, junto al spinner
-   del botón y el panel lateral. Todas son realimentación de PROGRESO, no de
-   estado: un bloque quieto y un bloque que nunca va a cargar se ven igual.
+/* --- the third motion exception: the skeleton shimmer -----------------------
+   The system does not animate, and this is the third exception, alongside the
+   button spinner and the side panel. All of them are feedback about PROGRESS,
+   not about state: a block that is still and a block that will never load look
+   identical.
-   1.4s lineal, del documento. Va detrás de motion-safe en el componente. */
+   1.4s linear, from the document. It sits behind motion-safe in the component. */
 @keyframes arrecife-shimmer {
   from { background-position: 200% 0; }
   to { background-position: -200% 0; }
@@ -232,76 +244,99 @@
   animation: arrecife-shimmer 1.4s linear infinite;
 }
-/* --- la excepción del plegable ----------------------------------------------
-   La cuarta y, como las otras tres, no es «queda mejor»: un plegable que revela
-   contenido sin transición hace SALTAR todo lo que tiene debajo, y quien acaba
-   de pulsar pierde el sitio en la página. Es la misma categoría que el panel
-   lateral —un panel que entra desde un borde se desliza por definición— y no la
-   de una animación de entrada, que es lo que el sistema no admite: aquí no
-   aparece nada nuevo en pantalla, se abre un hueco.
-   La altura la publica Radix en --radix-accordion-content-height. Dura lo que
-   dura todo lo demás y usa la misma curva, así que no estrena un tiempo. En el
-   componente va detrás de motion-safe. */
-@keyframes arrecife-despliega {
+/* --- the fifth exception: the caret of the CLI signature --------------------
+   A terminal prompt with a caret that does not blink is a terminal that has
+   hung. The caret is the one piece of the footer that says the signature is a
+   prompt and not a decorative string, and a still block reads as a typo.
+   step-end and not a fade: a real caret is on or off, and easing it turns a
+   terminal into a pulsing dot. 1.06s is the cadence of a VT100 and of the site
+   this comes from.
+   It is the only exception that is not feedback about progress, and it earns its
+   place on the other half of the criterion the other four share: it is not
+   decoration, it is what makes the piece legible as what it is. Behind
+   motion-safe, where the caret stays solid — which is a caret at rest, not a
+   missing one. See docs/decisions.md § 23. */
+@keyframes arrecife-caret {
+  0%, 50% { opacity: 1; }
+  50.01%, 100% { opacity: 0; }
+}
+@utility caret {
+  animation: arrecife-caret 1.06s step-end infinite;
+}
+/* --- the accordion exception -----------------------------------------------
+   The fourth one and, like the other three, it is not «it looks better»: a
+   disclosure that reveals content with no transition makes everything below it
+   JUMP, and whoever just clicked loses their place on the page. It is the same
+   category as the side panel — a panel entering from an edge slides by
+   definition — and not an entrance animation, which is what the system rejects:
+   nothing new appears on screen here, a gap opens.
+   Radix publishes the height as --radix-accordion-content-height. It lasts as
+   long as everything else and uses the same curve, so it introduces no new
+   timing. In the component it sits behind motion-safe. */
+@keyframes arrecife-expand {
   from { height: 0; }
   to { height: var(--radix-accordion-content-height); }
 }
-@keyframes arrecife-repliega {
+@keyframes arrecife-collapse {
   from { height: var(--radix-accordion-content-height); }
   to { height: 0; }
 }
-@utility desplegar {
-  animation: arrecife-despliega var(--duration-standard) var(--ease-standard);
+@utility expand {
+  animation: arrecife-expand var(--duration-standard) var(--ease-standard);
 }
-@utility replegar {
-  animation: arrecife-repliega var(--duration-standard) var(--ease-standard);
+@utility collapse {
+  animation: arrecife-collapse var(--duration-standard) var(--ease-standard);
 }
-/* --- la excepción del panel lateral -----------------------------------------
-   Un panel que entra desde un borde se desliza por definición: quieto sería un
-   modal descentrado. Es la segunda y última excepción a "nada de
-   desplazamiento", y se aprobó a sabiendas.
-   Dura lo que dura todo lo demás y usa la misma curva, así que no introduce un
-   tiempo nuevo. En el componente va detrás de motion-safe. */
-@keyframes arrecife-entra-derecha { from { translate: 100% 0; } }
-@keyframes arrecife-sale-derecha { to { translate: 100% 0; } }
-@keyframes arrecife-entra-izquierda { from { translate: -100% 0; } }
-@keyframes arrecife-sale-izquierda { to { translate: -100% 0; } }
-@keyframes arrecife-entra-arriba { from { translate: 0 -100%; } }
-@keyframes arrecife-sale-arriba { to { translate: 0 -100%; } }
-@keyframes arrecife-entra-abajo { from { translate: 0 100%; } }
-@keyframes arrecife-sale-abajo { to { translate: 0 100%; } }
-@utility deslizar-entra-derecha {
-  animation: arrecife-entra-derecha var(--duration-standard) var(--ease-standard);
+/* --- the side panel exception ----------------------------------------------
+   A panel entering from an edge slides by definition: held still it would be an
+   off-centre modal. It is the second exception to "no displacement", and it was
+   approved knowingly.
+   It lasts as long as everything else and uses the same curve, so it introduces
+   no new timing. In the component it sits behind motion-safe. */
+@keyframes arrecife-slide-in-right { from { translate: 100% 0; } }
+@keyframes arrecife-slide-out-right { to { translate: 100% 0; } }
+@keyframes arrecife-slide-in-left { from { translate: -100% 0; } }
+@keyframes arrecife-slide-out-left { to { translate: -100% 0; } }
+@keyframes arrecife-slide-in-top { from { translate: 0 -100%; } }
+@keyframes arrecife-slide-out-top { to { translate: 0 -100%; } }
+@keyframes arrecife-slide-in-bottom { from { translate: 0 100%; } }
+@keyframes arrecife-slide-out-bottom { to { translate: 0 100%; } }
+@utility slide-in-right {
+  animation: arrecife-slide-in-right var(--duration-standard) var(--ease-standard);
 }
-@utility deslizar-sale-derecha {
-  animation: arrecife-sale-derecha var(--duration-standard) var(--ease-standard);
+@utility slide-out-right {
+  animation: arrecife-slide-out-right var(--duration-standard) var(--ease-standard);
 }
-@utility deslizar-entra-izquierda {
-  animation: arrecife-entra-izquierda var(--duration-standard) var(--ease-standard);
+@utility slide-in-left {
+  animation: arrecife-slide-in-left var(--duration-standard) var(--ease-standard);
 }
-@utility deslizar-sale-izquierda {
-  animation: arrecife-sale-izquierda var(--duration-standard) var(--ease-standard);
+@utility slide-out-left {
+  animation: arrecife-slide-out-left var(--duration-standard) var(--ease-standard);
 }
-@utility deslizar-entra-arriba {
-  animation: arrecife-entra-arriba var(--duration-standard) var(--ease-standard);
+@utility slide-in-top {
+  animation: arrecife-slide-in-top var(--duration-standard) var(--ease-standard);
 }
-@utility deslizar-sale-arriba {
-  animation: arrecife-sale-arriba var(--duration-standard) var(--ease-standard);
+@utility slide-out-top {
+  animation: arrecife-slide-out-top var(--duration-standard) var(--ease-standard);
 }
-@utility deslizar-entra-abajo {
-  animation: arrecife-entra-abajo var(--duration-standard) var(--ease-standard);
+@utility slide-in-bottom {
+  animation: arrecife-slide-in-bottom var(--duration-standard) var(--ease-standard);
 }
-@utility deslizar-sale-abajo {
-  animation: arrecife-sale-abajo var(--duration-standard) var(--ease-standard);
+@utility slide-out-bottom {
+  animation: arrecife-slide-out-bottom var(--duration-standard) var(--ease-standard);
 }
-/* La única transición del sistema, como utilidad. Los estados se comunican con
-   borde y color, no con movimiento: esta clase no puede animar otra cosa. */
+/* The system's only transition, as a utility. States are communicated with
+   border and color, not with movement: this class cannot animate anything else. */
 @utility transition-standard {
   transition-property: color, background-color, border-color, fill, stroke;
   transition-duration: var(--duration-standard);

package/dist/variants/index.cjs ADDED Viewed

@@ -0,0 +1,192 @@
+'use strict';
+var classVarianceAuthority = require('class-variance-authority');
+// src/variants/button.ts
+var button = classVarianceAuthority.cva(
+  [
+    "inline-flex cursor-pointer items-center justify-center gap-step-xs whitespace-nowrap select-none",
+    "rounded-control font-sans font-medium",
+    "transition-standard",
+    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "bg-accent text-accent-on hover:bg-accent-hover",
+          "light:bg-brand-hull light:text-accent-on light:hover:bg-text-secondary"
+        ],
+        conversion: "bg-warm text-warm-on hover:bg-warm-hover",
+        secondary: [
+          "border-hairline-hover border bg-transparent text-text-primary",
+          "hover:border-accent hover:text-accent"
+        ],
+        tertiary: [
+          "bg-transparent font-mono font-normal text-text-secondary",
+          "hover:text-accent hover:underline hover:underline-offset-4"
+        ],
+        /** Irreversible only. Never for «cancel» on a form. */
+        destructive: "bg-danger text-danger-on hover:bg-danger-hover",
+        destructiveOutline: [
+          "border-danger text-danger border bg-transparent",
+          "hover:bg-danger hover:text-danger-on"
+        ]
+      },
+      size: {
+        sm: "h-8 px-control-sm text-label",
+        md: "h-10 px-control-md text-ui",
+        lg: "h-12 px-control-lg text-lead",
+        /** A 42×42 square, no text. `aria-label` is mandatory on it. */
+        icon: "size-control-icon p-0",
+        /** 32×32, for a table row. Same height as `sm`, and same mandatory `aria-label`. */
+        "icon-sm": "size-control-icon-sm p-0"
+      }
+    },
+    compoundVariants: [
+      /**
+       * The tertiary has no box: neither horizontal padding nor control height.
+       * It goes here rather than as `px-0` on the variant so it beats the size's
+       * `px-*` without depending on the order cva concatenates classes in.
+       */
+      { variant: "tertiary", size: ["sm", "md", "lg"], class: "h-auto px-0" }
+    ],
+    defaultVariants: { variant: "primary", size: "md" }
+  }
+);
+var badge = classVarianceAuthority.cva(
+  ["inline-flex items-center gap-step-xs", "rounded-chip px-step-xs py-0.5", "font-sans text-tag", "transition-standard"],
+  {
+    variants: {
+      variant: {
+        neutral: "bg-surface-raised text-text-secondary",
+        accent: "bg-accent/8 text-text-primary",
+        warm: "bg-warm/8 text-text-primary",
+        success: "bg-success/8 text-text-primary",
+        warning: "bg-warning/8 text-text-primary",
+        error: "bg-error/8 text-text-primary"
+      }
+    },
+    defaultVariants: { variant: "neutral" }
+  }
+);
+var category = classVarianceAuthority.cva(
+  [
+    "inline-flex items-center gap-step-xs",
+    "rounded-pill px-step-sm py-0.5",
+    "font-mono text-chip",
+    "border transition-standard"
+  ],
+  {
+    variants: {
+      active: {
+        false: "border-warm/28 bg-transparent text-warm",
+        true: "border-warm bg-warm text-warm-on"
+      }
+    },
+    defaultVariants: { active: false }
+  }
+);
+var metric = ["inline-flex items-center gap-step-xs", "rounded-pill", "font-mono text-chip text-text-muted"];
+var text = classVarianceAuthority.cva("", {
+  variants: {
+    variant: {
+      display: "text-display font-display",
+      // Large metrics: 46px of display. It is the only scale designed for a
+      // number, which is why its line height is 1.
+      stat: "text-stat font-display",
+      h1: "text-h1 font-display",
+      h2: "text-h2 font-display",
+      h3: "text-h3 font-display",
+      body: "text-body font-sans",
+      // 17px: the deck on interior pages and the large button.
+      lead: "text-lead font-sans",
+      ui: "text-ui font-sans",
+      label: "text-label font-sans",
+      // The two badge scales. `tag` is status (sans 12.5/500) and `chip` is
+      // category and metric (mono 11.5). Neither transforms the text.
+      tag: "text-tag font-sans",
+      chip: "text-chip font-mono",
+      // Mono with NO transform: dates, paths, versions, file names and the
+      // footer signature. It is the step that was missing, and the reason every
+      // call site ended up writing `variant="eyebrow" className="normal-case"`.
+      meta: "text-meta font-mono",
+      // `uppercase` does not fit in a size token: text-transform is not a
+      // modifier of --text-*. Which is why the variant sets it, not theme.css.
+      eyebrow: "text-eyebrow font-mono uppercase"
+    },
+    tone: {
+      primary: "text-text-primary",
+      secondary: "text-text-secondary",
+      muted: "text-text-muted",
+      accent: "text-accent",
+      warm: "text-warm",
+      success: "text-success",
+      warning: "text-warning",
+      error: "text-error"
+    }
+  },
+  defaultVariants: { variant: "body", tone: "primary" }
+});
+var alert = classVarianceAuthority.cva("w-full rounded-card border p-step-md font-sans text-ui", {
+  variants: {
+    variant: {
+      accent: "text-text-secondary",
+      success: "text-text-secondary",
+      warning: "text-text-secondary",
+      error: "text-text-secondary"
+    },
+    emphasis: {
+      subtle: "",
+      strong: ""
+    }
+  },
+  compoundVariants: [
+    { variant: "accent", emphasis: "subtle", class: "border-accent/22 bg-accent/8" },
+    { variant: "success", emphasis: "subtle", class: "border-success/22 bg-success/8" },
+    { variant: "warning", emphasis: "subtle", class: "border-warning/22 bg-warning/8" },
+    { variant: "error", emphasis: "subtle", class: "border-error/22 bg-error/8" },
+    { variant: "accent", emphasis: "strong", class: "border-accent bg-accent/10" },
+    { variant: "success", emphasis: "strong", class: "border-success bg-success/10" },
+    { variant: "warning", emphasis: "strong", class: "border-warning bg-warning/10" },
+    { variant: "error", emphasis: "strong", class: "border-error bg-error/10" }
+  ],
+  defaultVariants: { variant: "accent", emphasis: "subtle" }
+});
+var avatar = classVarianceAuthority.cva(
+  "relative flex shrink-0 overflow-hidden rounded-pill bg-surface-raised border border-hairline",
+  {
+    variants: {
+      size: {
+        sm: "size-8",
+        md: "size-10",
+        lg: "size-14",
+        xl: "size-24"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+// src/variants/card.ts
+var CARD_SURFACE = "rounded-card border-hairline bg-surface border";
+var CARD_HOVER = "transition-standard hover:border-hairline-hover";
+var CARD = [
+  "group block cursor-pointer",
+  CARD_SURFACE,
+  CARD_HOVER,
+  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+];
+exports.CARD = CARD;
+exports.CARD_HOVER = CARD_HOVER;
+exports.CARD_SURFACE = CARD_SURFACE;
+exports.alertVariants = alert;
+exports.avatarVariants = avatar;
+exports.badgeVariants = badge;
+exports.buttonVariants = button;
+exports.categoryBadgeVariants = category;
+exports.metricBadgeVariants = metric;
+exports.textVariants = text;