docs: add detailed stories for StatCard component

Author: aaronbassett

packages/component-library/src/StatCard/index.stories.module.scss

@@ -0,0 +1,136 @@
+@use "../theme";
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: theme.spacing(4);
+  align-items: start;
+}
+
+.dashboard {
+  display: flex;
+  flex-direction: column;
+  gap: theme.spacing(6);
+}
+
+.mainStats {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: theme.spacing(4);
+}
+
+.secondaryStats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: theme.spacing(4);
+}
+
+.greenIcon {
+  color: theme.color("states", "success", "normal");
+}
+
+.blueIcon {
+  color: theme.color("states", "info", "normal");
+}
+
+.redIcon {
+  color: theme.color("states", "error", "normal");
+}
+
+.yellowIcon {
+  color: theme.color("states", "warning", "normal");
+}
+
+.miniChart {
+  padding-top: theme.spacing(2);
+  font-size: theme.font-size("sm");
+  color: theme.color("muted");
+}
+
+.trendIndicator {
+  display: flex;
+  align-items: center;
+  gap: theme.spacing(2);
+  padding-top: theme.spacing(2);
+  font-size: theme.font-size("sm");
+  color: theme.color("paragraph");
+}
+
+.networkBreakdown {
+  display: flex;
+  gap: theme.spacing(4);
+  padding-top: theme.spacing(2);
+  font-size: theme.font-size("sm");
+  color: theme.color("muted");
+}
+
+.progressContainer {
+  padding-top: theme.spacing(3);
+}
+
+.progressBar {
+  width: 100%;
+  height: 8px;
+  background-color: theme.color("background", "secondary");
+  border-radius: theme.border-radius("full");
+  overflow: hidden;
+}
+
+.progressFill {
+  height: 100%;
+  background-color: theme.color("states", "success", "normal");
+  border-radius: theme.border-radius("full");
+  transition: width 0.3s ease;
+  
+  &[data-progress="98.5"] {
+    width: 98.5%;
+  }
+}
+
+.progressLabels {
+  display: flex;
+  justify-content: space-between;
+  margin-top: theme.spacing(1);
+  font-size: theme.font-size("xs");
+  color: theme.color("muted");
+}
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    theme.color("background", "secondary") 25%,
+    theme.color("border") 50%,
+    theme.color("background", "secondary") 75%
+  );
+  background-size: 200% 100%;
+  animation: loading 1.5s infinite;
+  border-radius: theme.border-radius("sm");
+  padding: theme.spacing(1) theme.spacing(2);
+}
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid theme.color("border");
+  border-top: 2px solid theme.color("highlight");
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}