release: WRNexusJS 0.3.4

packages/ui/components/MetricGrid.wrn

@@ -2,26 +2,32 @@ component MetricGrid {
   props {
     label = "Platform metrics"
     metrics = []
+    compact = false
+    columns = 4
     class = ""
   }
 
   view {
-    <section class="px-4 sm:px-6 lg:px-8 {class}" aria-label="{label}">
-      <div class="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+    <section
+      class="wire-metric-grid-shell {compact ? 'wire-metric-grid-shell--compact' : ''} {class}"
+      aria-label="{label}"
+    >
+      <div
+        class="wire-metric-grid"
+        class:wire-metric-grid--compact='{compact}'
+        data-columns="{columns}"
+      >
         {#each metrics as metric}
-          <article class="flex min-h-40 flex-col justify-center rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-6 shadow-[var(--wire-shadow-1,0_1px_2px_rgb(0_0_0/0.05))]">
-            <strong class="text-3xl font-semibold leading-none tracking-[-0.04em] text-[var(--wire-color-text,#0f172a)] sm:text-4xl">
-              {metric.value}
-            </strong>
-            <span class="mt-4 font-semibold text-[var(--wire-color-text,#0f172a)]">{metric.label}</span>
+          <article class="wire-metric-card" class:wire-metric-card--compact='{compact}'>
+            <strong class="wire-metric-card__value">{metric.value}</strong>
+            <span class="wire-metric-card__label">{metric.label}</span>
+
             {#if metric.description}
-              <p class="mt-2 text-sm leading-6 text-[var(--wire-color-muted,#64748b)]">{metric.description}</p>
+              <p class="wire-metric-card__description">{metric.description}</p>
             {/if}
           </article>
         {:empty}
-          <p class="col-span-full rounded-2xl border border-dashed border-[var(--wire-color-border,#e2e8f0)] p-8 text-center text-[var(--wire-color-muted,#64748b)]">
-            No metrics available.
-          </p>
+          <p class="wire-metric-grid__empty">No metrics available.</p>
         {/each}
       </div>
     </section>