website refactor

apps/website/components/dashboard/DashboardKpiRow.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Grid } from '@/ui/Grid';
+
+interface KpiItem {
+  label: string;
+  value: string | number;
+  color?: string;
+}
+
+interface DashboardKpiRowProps {
+  items: KpiItem[];
+}
+
+/**
+ * DashboardKpiRow
+ * 
+ * A horizontal row of key performance indicators with telemetry styling.
+ * Uses UI primitives to comply with architectural constraints.
+ */
+export function DashboardKpiRow({ items }: DashboardKpiRowProps) {
+  return (
+    <Grid responsiveGridCols={{ base: 2, md: 3, lg: 6 }} gap={4}>
+      {items.map((item, index) => (
+        <Box key={index} borderLeft pl={4} borderColor="var(--color-outline)">
+          <Text 
+            size="xs" 
+            weight="bold" 
+            uppercase 
+            letterSpacing="tighter" 
+            color="var(--color-text-low)"
+            block
+          >
+            {item.label}
+          </Text>
+          <Text 
+            size="xl" 
+            font="mono" 
+            weight="bold"
+            color={item.color || 'var(--color-text-high)'}
+          >
+            {item.value}
+          </Text>
+        </Box>
+      ))}
+    </Grid>
+  );
+}