@cytario/design 1.11.1 → 1.13.0

package/dist/index.js

@@ -24,8 +24,8 @@ var variantStyles = {
   ].join(" "),
   ghost: [
     "bg-transparent text-[var(--color-text-primary)]",
-    "hover:bg-[var(--color-neutral-100)]",
-    "pressed:bg-[var(--color-neutral-200)]"
+    "hover:bg-[var(--color-surface-hover)]",
+    "pressed:bg-[var(--color-surface-pressed)]"
   ].join(" "),
   destructive: [
     "bg-[var(--color-action-danger)] text-[var(--color-text-inverse)]",
@@ -232,7 +232,7 @@ function Tooltip({
           "bg-[var(--color-surface-overlay)] backdrop-blur-sm",
           "text-[var(--color-text-inverse)] text-sm",
           "px-3 py-1.5",
-          "rounded-md",
+          "rounded-[var(--border-radius-md)]",
           "max-w-xs",
           "entering:animate-in entering:fade-in entering:duration-150",
           "exiting:animate-out exiting:fade-out exiting:duration-100",
@@ -555,13 +555,13 @@ function Select({
       isDisabled,
       isRequired,
       isInvalid: hasError,
-      className: ["flex flex-col gap-1", className].filter(Boolean).join(" "),
+      className: ["flex flex-col gap-[var(--spacing-1)]", className].filter(Boolean).join(" "),
       children: [
         /* @__PURE__ */ jsxs5(
           Label2,
           {
             className: [
-              "text-sm font-[var(--font-weight-medium)] text-[var(--color-text-primary)]"
+              "text-[length:var(--font-size-sm)] font-[var(--font-weight-medium)] text-[var(--color-text-primary)]"
             ].join(" "),
             children: [
               label,
@@ -595,7 +595,7 @@ function Select({
             ]
           }
         ),
-        hasError && /* @__PURE__ */ jsx7("span", { className: "text-sm text-[var(--color-text-danger)]", children: errorMessage }),
+        hasError && /* @__PURE__ */ jsx7("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-danger)]", children: errorMessage }),
         /* @__PURE__ */ jsx7(
           Popover,
           {
@@ -760,7 +760,7 @@ function Dialog({
           className: [
             "w-full mx-4",
             sizeStyles2[size],
-            "bg-[var(--color-surface-default)] rounded-lg shadow-xl max-h-[85vh] flex flex-col",
+            "bg-[var(--color-surface-default)] rounded-[var(--border-radius-lg)] shadow-xl max-h-[85vh] flex flex-col",
             "data-[entering]:animate-in data-[entering]:zoom-in-95 data-[entering]:fade-in",
             "data-[exiting]:animate-out data-[exiting]:zoom-out-95 data-[exiting]:fade-out",
             className
@@ -771,7 +771,7 @@ function Dialog({
                 Heading,
                 {
                   slot: "title",
-                  className: "text-lg font-semibold text-[var(--color-text-primary)]",
+                  className: "text-[length:var(--font-size-lg)] font-[number:var(--font-weight-semibold)] text-[var(--color-text-primary)]",
                   children: title
                 }
               ),
@@ -781,7 +781,7 @@ function Dialog({
                   type: "button",
                   onClick: close,
                   className: [
-                    "inline-flex items-center justify-center rounded-md p-1",
+                    "inline-flex items-center justify-center rounded-[var(--border-radius-sm)] p-1",
                     "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-muted)]",
                     "outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
                     "transition-colors"
@@ -860,7 +860,7 @@ function ToastItem({
       role: "status",
       "aria-live": "polite",
       className: [
-        "flex items-start gap-3 rounded-lg border px-4 py-3 shadow-md",
+        "flex items-start gap-[var(--spacing-3)] rounded-[var(--border-radius-lg)] border px-[var(--spacing-4)] py-[var(--spacing-3)] shadow-md",
         "min-w-[320px] max-w-[420px]",
         "transition-all duration-200",
         isExiting ? "translate-x-full opacity-0" : "translate-x-0 opacity-100 animate-in slide-in-from-right",
@@ -868,13 +868,13 @@ function ToastItem({
       ].join(" "),
       children: [
         /* @__PURE__ */ jsx10(IconComponent, { size: 20, className: ["shrink-0 mt-0.5", config.iconClass].join(" "), "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx10("p", { className: "flex-1 text-sm font-medium", children: toast.message }),
+        /* @__PURE__ */ jsx10("p", { className: "flex-1 text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)]", children: toast.message }),
         /* @__PURE__ */ jsx10(
           "button",
           {
             type: "button",
             onClick: dismiss,
-            className: "shrink-0 rounded p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
+            className: "shrink-0 rounded-[var(--border-radius-sm)] p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
             "aria-label": "Dismiss",
             children: /* @__PURE__ */ jsx10(X2, { size: 16, "aria-hidden": "true" })
           }
@@ -947,12 +947,12 @@ function EmptyState({
     "div",
     {
       className: [
-        "flex flex-col items-center text-center py-12 px-6",
+        "flex flex-col items-center text-center py-[var(--spacing-12)] px-[var(--spacing-6)]",
         className
       ].filter(Boolean).join(" "),
       children: [
         icon && /* @__PURE__ */ jsx11(Icon, { icon, size: "xl", className: "text-[var(--color-text-tertiary)]" }),
-        /* @__PURE__ */ jsx11("h3", { className: "text-lg font-semibold text-[var(--color-text-primary)] mt-4", children: title }),
+        /* @__PURE__ */ jsx11("h3", { className: "text-[length:var(--font-size-lg)] font-[number:var(--font-weight-semibold)] text-[var(--color-text-primary)] mt-4", children: title }),
         description && /* @__PURE__ */ jsx11("p", { className: "text-sm text-[var(--color-text-secondary)] mt-2 max-w-sm", children: description }),
         action && /* @__PURE__ */ jsx11("div", { className: "mt-6", children: action })
       ]
@@ -1294,17 +1294,17 @@ var defaultSizeMap = {
   h6: "xs"
 };
 var sizeStyles3 = {
-  xs: "text-sm",
-  sm: "text-base",
-  md: "text-lg",
-  lg: "text-xl",
-  xl: "text-2xl",
-  "2xl": "text-3xl",
-  "3xl": "text-4xl"
+  xs: "text-[length:var(--font-size-sm)]",
+  sm: "text-[length:var(--font-size-base)]",
+  md: "text-[length:var(--font-size-lg)]",
+  lg: "text-[length:var(--font-size-xl)]",
+  xl: "text-[length:var(--font-size-2xl)]",
+  "2xl": "text-[length:var(--font-size-3xl)]",
+  "3xl": "text-[length:var(--font-size-4xl)]"
 };
 var weightStyles = {
-  semibold: "font-semibold",
-  bold: "font-bold"
+  semibold: "font-[number:var(--font-weight-semibold)]",
+  bold: "font-[number:var(--font-weight-bold)]"
 };
 function Heading2({
   as: Tag = "h2",
@@ -1407,7 +1407,7 @@ function Breadcrumbs({ items, className }) {
                   "flex items-center gap-1",
                   isLast ? "min-w-0" : "shrink-0"
                 ].join(" "),
-                children: isLast ? /* @__PURE__ */ jsx22("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: item.label }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
+                children: isLast ? /* @__PURE__ */ jsx22("span", { className: "font-[number:var(--font-weight-medium)] text-[var(--color-text-primary)] truncate", children: item.label }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
                   /* @__PURE__ */ jsx22(
                     Link2,
                     {
@@ -1536,18 +1536,18 @@ var variantStyles3 = {
   default: {
     base: [
       "bg-transparent text-[var(--color-text-primary)]",
-      "hover:bg-[var(--color-neutral-100)]",
-      "pressed:bg-[var(--color-neutral-200)]"
+      "hover:bg-[var(--color-surface-hover)]",
+      "pressed:bg-[var(--color-surface-pressed)]"
     ].join(" "),
-    selected: "bg-[var(--color-neutral-200)] text-[var(--color-text-primary)]"
+    selected: "bg-[var(--color-surface-pressed)] text-[var(--color-text-primary)]"
   },
   primary: {
     base: [
       "bg-transparent text-[var(--color-text-primary)]",
-      "hover:bg-[var(--color-neutral-100)]",
-      "pressed:bg-[var(--color-neutral-200)]"
+      "hover:bg-[var(--color-surface-hover)]",
+      "pressed:bg-[var(--color-surface-pressed)]"
     ].join(" "),
-    selected: "bg-[var(--color-teal-500)] text-[var(--color-text-inverse)]"
+    selected: "bg-[var(--color-action-primary-active)] text-[var(--color-text-inverse)]"
   },
   outlined: {
     base: [
@@ -1605,7 +1605,7 @@ function Menu({ items, children, className }) {
       Popover2,
       {
         className: [
-          "bg-[var(--color-surface-primary)] rounded-[var(--border-radius-md)]",
+          "bg-[var(--color-surface-default)] rounded-[var(--border-radius-md)]",
           "shadow-lg border border-[var(--color-border-default)]",
           "py-1 min-w-48",
           "entering:animate-in entering:fade-in entering:zoom-in-95",
@@ -1631,8 +1631,8 @@ function Menu({ items, children, className }) {
                 className: [
                   "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
                   "transition-colors",
-                  "focus:bg-[var(--color-neutral-100)]",
-                  "hover:bg-[var(--color-neutral-100)]",
+                  "focus:bg-[var(--color-surface-muted)]",
+                  "hover:bg-[var(--color-surface-muted)]",
                   "disabled:opacity-50 disabled:pointer-events-none",
                   item.isDanger ? "text-[var(--color-text-danger)]" : "text-[var(--color-text-primary)]"
                 ].filter(Boolean).join(" "),
@@ -1807,14 +1807,14 @@ function getTabVariantStyles(variant, state) {
         "text-[var(--color-teal-700)] font-[var(--font-weight-semibold)]",
         // Bottom indicator via pseudo-element
         "after:absolute after:bottom-[-1px] after:left-0 after:right-0 after:h-0.5 after:bg-[var(--color-teal-600)]"
-      ].join(" ") : state.isPressed ? "text-[var(--color-text-primary)] bg-[var(--color-neutral-100)]" : state.isHovered ? "text-[var(--color-text-primary)] bg-[var(--color-neutral-50)]" : "text-[var(--color-text-secondary)] bg-transparent"
+      ].join(" ") : state.isPressed ? "text-[var(--color-text-primary)] bg-[var(--color-surface-muted)]" : state.isHovered ? "text-[var(--color-text-primary)] bg-[var(--color-surface-subtle)]" : "text-[var(--color-text-secondary)] bg-transparent"
     ];
   }
   return [
     // Shape
     "rounded-[var(--border-radius-md)]",
     // Color states
-    state.isSelected ? "text-[var(--color-text-primary)] font-[var(--font-weight-semibold)] bg-[var(--color-surface-default)] shadow-sm" : state.isPressed ? "text-[var(--color-text-primary)] bg-[var(--color-neutral-50)] shadow-none" : state.isHovered ? "text-[var(--color-text-primary)] bg-[var(--color-neutral-200)]" : "text-[var(--color-text-secondary)] bg-transparent"
+    state.isSelected ? "text-[var(--color-text-primary)] font-[var(--font-weight-semibold)] bg-[var(--color-surface-default)] shadow-sm" : state.isPressed ? "text-[var(--color-text-primary)] bg-[var(--color-surface-subtle)] shadow-none" : state.isHovered ? "text-[var(--color-text-primary)] bg-[var(--color-surface-pressed)]" : "text-[var(--color-text-secondary)] bg-transparent"
   ];
 }
 function TabPanel({ className, ...props }) {
@@ -2146,20 +2146,20 @@ import { AlertCircle, Database, Info as Info2 } from "lucide-react";
 import { twMerge as twMerge7 } from "tailwind-merge";
 import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 var statusDotStyles = {
-  connected: "bg-emerald-500",
-  error: "bg-red-500",
-  loading: "bg-amber-500 animate-pulse"
+  connected: "bg-[var(--color-status-success)]",
+  error: "border-2 border-[var(--color-status-danger)] bg-transparent",
+  loading: "bg-[var(--color-status-warning)] animate-pulse"
 };
 var providerConfig = {
-  aws: { label: "AWS", color: "bg-orange-100 text-orange-700" },
-  azure: { label: "Azure", color: "bg-blue-100 text-blue-700" },
-  gcp: { label: "GCP", color: "bg-sky-100 text-sky-700" },
-  minio: { label: "MinIO", color: "bg-red-100 text-red-700" }
+  aws: { label: "AWS", color: "bg-[var(--color-badge-purple-bg)] text-[var(--color-badge-purple-text)]" },
+  azure: { label: "Azure", color: "bg-[var(--color-badge-teal-bg)] text-[var(--color-badge-teal-text)]" },
+  gcp: { label: "GCP", color: "bg-[var(--color-badge-slate-bg)] text-[var(--color-badge-slate-text)]" },
+  minio: { label: "MinIO", color: "bg-[var(--color-badge-rose-bg)] text-[var(--color-badge-rose-text)]" }
 };
 function ProviderBadge({ provider }) {
   const config = providerConfig[provider.toLowerCase()];
   const label = config?.label ?? provider;
-  const colorClass = config?.color ?? "bg-neutral-100 text-neutral-700";
+  const colorClass = config?.color ?? "bg-[var(--color-badge-neutral-bg)] text-[var(--color-badge-neutral-text)]";
   return /* @__PURE__ */ jsx30(
     "span",
     {
@@ -2172,7 +2172,7 @@ function ProviderBadge({ provider }) {
   );
 }
 function PreviewArea({
-  status,
+  status = "connected",
   errorMessage,
   children
 }) {
@@ -2180,16 +2180,16 @@ function PreviewArea({
     return /* @__PURE__ */ jsx30("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx30(Spinner, { size: "lg", "aria-label": "Loading connection" }) });
   }
   if (status === "error") {
-    return /* @__PURE__ */ jsxs20("div", { className: "flex h-full flex-col items-center justify-center gap-2 bg-red-950/20 px-4", children: [
+    return /* @__PURE__ */ jsxs20("div", { className: "flex h-full flex-col items-center justify-center gap-2 bg-[var(--color-surface-danger)] px-4", children: [
       /* @__PURE__ */ jsx30(
         Icon,
         {
           icon: AlertCircle,
           size: "lg",
-          className: "text-red-400"
+          className: "text-[var(--color-text-danger)]"
         }
       ),
-      errorMessage && /* @__PURE__ */ jsx30("p", { className: "text-center text-xs text-red-300", children: errorMessage })
+      errorMessage && /* @__PURE__ */ jsx30("p", { className: "text-center text-xs text-[var(--color-text-danger)]", children: errorMessage })
     ] });
   }
   if (children) {
@@ -2200,7 +2200,7 @@ function PreviewArea({
     {
       icon: Database,
       size: "xl",
-      className: "text-[var(--color-neutral-600)]"
+      className: "text-[var(--color-text-secondary)]"
     }
   ) });
 }
@@ -2220,7 +2220,7 @@ function StorageConnectionCard({
     /* @__PURE__ */ jsx30("div", { className: "aspect-[4/3] bg-[var(--color-neutral-900)] overflow-hidden rounded-t-[var(--border-radius-lg)]", children: /* @__PURE__ */ jsx30(PreviewArea, { status, errorMessage, children }) }),
     /* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-1.5 border-t border-[var(--color-border-default)] bg-[var(--color-surface-default)] px-3 py-2.5 rounded-b-[var(--border-radius-lg)]", children: [
       /* @__PURE__ */ jsxs20("div", { className: "flex items-start gap-2", children: [
-        /* @__PURE__ */ jsx30(
+        status && /* @__PURE__ */ jsx30(
           "span",
           {
             className: twMerge7(
@@ -2245,10 +2245,10 @@ function StorageConnectionCard({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 pl-4", children: [
-        /* @__PURE__ */ jsx30(ProviderBadge, { provider }),
-        region && /* @__PURE__ */ jsx30("span", { className: "shrink-0 text-xs text-[var(--color-text-secondary)]", children: region }),
-        imageCount != null && status === "connected" && /* @__PURE__ */ jsxs20("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-[var(--color-text-tertiary)]", children: [
+      (provider || imageCount != null && (!status || status === "connected")) && /* @__PURE__ */ jsxs20("div", { className: twMerge7("flex items-center gap-2", status && "pl-4"), children: [
+        provider && /* @__PURE__ */ jsx30(ProviderBadge, { provider }),
+        provider && region && /* @__PURE__ */ jsx30("span", { className: "shrink-0 text-xs text-[var(--color-text-secondary)]", children: region }),
+        imageCount != null && (!status || status === "connected") && /* @__PURE__ */ jsxs20("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-[var(--color-text-tertiary)]", children: [
           imageCount,
           " ",
           imageCount === 1 ? "image" : "images"
@@ -2269,6 +2269,424 @@ function StorageConnectionCard({
   return /* @__PURE__ */ jsx30("div", { className: baseStyles, children: cardContent });
 }
 
+// src/components/Badge/Badge.tsx
+import { twMerge as twMerge8 } from "tailwind-merge";
+import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
+var variantStyles4 = {
+  neutral: "bg-[var(--color-badge-neutral-bg)] text-[var(--color-badge-neutral-text)]",
+  purple: "bg-[var(--color-badge-purple-bg)] text-[var(--color-badge-purple-text)]",
+  teal: "bg-[var(--color-badge-teal-bg)] text-[var(--color-badge-teal-text)]",
+  rose: "bg-[var(--color-badge-rose-bg)] text-[var(--color-badge-rose-text)]",
+  slate: "bg-[var(--color-badge-slate-bg)] text-[var(--color-badge-slate-text)]",
+  green: "bg-[var(--color-badge-green-bg)] text-[var(--color-badge-green-text)]",
+  amber: "bg-[var(--color-badge-amber-bg)] text-[var(--color-badge-amber-text)]"
+};
+var sizeStyles7 = {
+  sm: "px-1.5 py-0.5",
+  md: "px-2 py-0.5"
+};
+var iconSizeMap4 = {
+  sm: 12,
+  md: 14
+};
+function Badge({
+  children,
+  variant = "neutral",
+  size = "sm",
+  icon: IconComponent,
+  className
+}) {
+  return /* @__PURE__ */ jsxs21(
+    "span",
+    {
+      className: twMerge8(
+        "inline-flex items-center gap-1 rounded-[var(--border-radius-full)]",
+        "text-[length:var(--font-size-xs)] font-[number:var(--font-weight-medium)] leading-[var(--line-height-tight)]",
+        variantStyles4[variant],
+        sizeStyles7[size],
+        className
+      ),
+      children: [
+        IconComponent && /* @__PURE__ */ jsx31(IconComponent, { size: iconSizeMap4[size], "aria-hidden": "true" }),
+        children
+      ]
+    }
+  );
+}
+
+// src/components/Card/Card.tsx
+import { twMerge as twMerge9 } from "tailwind-merge";
+import { Fragment as Fragment9, jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+var paddingStyles = {
+  none: "p-0",
+  sm: "p-3",
+  md: "p-4",
+  lg: "p-6"
+};
+function Card({
+  children,
+  header,
+  footer,
+  padding = "md",
+  href,
+  interactive = false,
+  className
+}) {
+  const isInteractive = interactive || !!href;
+  const containerClass = twMerge9(
+    "bg-[var(--color-surface-default)] border border-[var(--color-border-default)] rounded-[var(--border-radius-lg)] overflow-hidden shadow-sm",
+    isInteractive && "transition-shadow hover:shadow-md hover:border-[var(--color-border-focus)] cursor-pointer",
+    href && "block focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 outline-none",
+    className
+  );
+  const content = /* @__PURE__ */ jsxs22(Fragment9, { children: [
+    header && /* @__PURE__ */ jsx32(
+      "div",
+      {
+        className: twMerge9(
+          "border-b border-[var(--color-border-default)]",
+          paddingStyles[padding]
+        ),
+        children: header
+      }
+    ),
+    /* @__PURE__ */ jsx32("div", { className: paddingStyles[padding], children }),
+    footer && /* @__PURE__ */ jsx32(
+      "div",
+      {
+        className: twMerge9(
+          "border-t border-[var(--color-border-default)]",
+          paddingStyles[padding]
+        ),
+        children: footer
+      }
+    )
+  ] });
+  if (href) {
+    return /* @__PURE__ */ jsx32("a", { href, className: containerClass, children: content });
+  }
+  return /* @__PURE__ */ jsx32("div", { className: containerClass, children: content });
+}
+
+// src/components/DeltaIndicator/DeltaIndicator.tsx
+import { ArrowUp, ArrowDown, Minus } from "lucide-react";
+import { twMerge as twMerge10 } from "tailwind-merge";
+import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+function getDirection(current, previous) {
+  const diff = current - previous;
+  if (diff > 0) return "increase";
+  if (diff < 0) return "decrease";
+  return "flat";
+}
+function formatCurrency(value) {
+  const abs = Math.abs(value);
+  const sign = value >= 0 ? "+" : "-";
+  if (abs < 1e3) {
+    return `${sign}$${abs.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+  }
+  return `${sign}$${abs.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`;
+}
+function formatPercentage(current, previous) {
+  if (previous === 0) return null;
+  const pct = (current - previous) / Math.abs(previous) * 100;
+  const sign = pct >= 0 ? "+" : "";
+  return `${sign}${pct.toFixed(1)}%`;
+}
+var directionColors = {
+  increase: "text-[var(--color-delta-increase-text)]",
+  decrease: "text-[var(--color-delta-decrease-text)]",
+  flat: "text-[var(--color-delta-flat-text)]"
+};
+var reverseDirectionColors = {
+  increase: "text-[var(--color-delta-decrease-text)]",
+  decrease: "text-[var(--color-delta-increase-text)]",
+  flat: "text-[var(--color-delta-flat-text)]"
+};
+var directionIcons = {
+  increase: ArrowUp,
+  decrease: ArrowDown,
+  flat: Minus
+};
+var directionBgColors = {
+  increase: "bg-[var(--color-delta-increase-bg)]",
+  decrease: "bg-[var(--color-delta-decrease-bg)]",
+  flat: "bg-[var(--color-delta-flat-bg)]"
+};
+function DeltaIndicator({
+  current,
+  previous,
+  format = "combined",
+  mode = "inline",
+  label,
+  reverseColor = false,
+  unavailable = false,
+  unavailableText = "N/A",
+  className
+}) {
+  if (unavailable) {
+    return /* @__PURE__ */ jsxs23(
+      "span",
+      {
+        className: twMerge10(
+          "inline-flex items-center gap-1 font-[number:var(--font-weight-medium)]",
+          "text-[var(--color-text-tertiary)]",
+          className
+        ),
+        children: [
+          label && /* @__PURE__ */ jsx33("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
+          unavailableText
+        ]
+      }
+    );
+  }
+  const diff = current - previous;
+  const direction = getDirection(current, previous);
+  const colorStyles = reverseColor ? reverseDirectionColors[direction] : directionColors[direction];
+  const IconComponent = directionIcons[direction];
+  const isNew = previous === 0 && current > 0;
+  let valueText;
+  if (format === "currency") {
+    valueText = formatCurrency(diff);
+    if (isNew) valueText = `${formatCurrency(diff)} (new)`;
+  } else if (format === "percentage") {
+    const pct = formatPercentage(current, previous);
+    valueText = pct ?? formatCurrency(diff);
+    if (isNew) valueText = "New";
+  } else {
+    const pct = formatPercentage(current, previous);
+    if (isNew) {
+      valueText = `${formatCurrency(diff)} (new)`;
+    } else if (pct) {
+      valueText = `${formatCurrency(diff)} (${pct})`;
+    } else {
+      valueText = formatCurrency(diff);
+    }
+  }
+  const isPill = mode === "pill";
+  return /* @__PURE__ */ jsxs23(
+    "span",
+    {
+      className: twMerge10(
+        "inline-flex items-center gap-1 font-[number:var(--font-weight-medium)]",
+        colorStyles,
+        isPill && [
+          "rounded-[var(--border-radius-full)] px-2 py-0.5",
+          "text-[length:var(--font-size-xs)]",
+          directionBgColors[direction]
+        ],
+        className
+      ),
+      children: [
+        label && /* @__PURE__ */ jsx33("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
+        /* @__PURE__ */ jsx33(IconComponent, { size: 14, "aria-hidden": true }),
+        valueText
+      ]
+    }
+  );
+}
+
+// src/components/ProgressBar/ProgressBar.tsx
+import { twMerge as twMerge11 } from "tailwind-merge";
+import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+var fillStyles = {
+  brand: "bg-[var(--color-progress-fill)]",
+  success: "bg-[var(--color-progress-fill-success)]",
+  warning: "bg-[var(--color-progress-fill-warning)]",
+  danger: "bg-[var(--color-progress-fill-danger)]",
+  neutral: "bg-[var(--color-text-secondary)]"
+};
+var sizeStyles8 = {
+  sm: "h-1.5",
+  md: "h-3",
+  lg: "h-4"
+};
+function ProgressBar({
+  value,
+  label,
+  description,
+  variant = "brand",
+  size = "md",
+  showValue = true,
+  className
+}) {
+  const clampedValue = Math.min(100, Math.max(0, value));
+  return /* @__PURE__ */ jsxs24("div", { className: twMerge11("w-full", className), children: [
+    (label || description || showValue) && /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsx34("span", { className: "text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)] text-[var(--color-text-primary)]", children: label }),
+      /* @__PURE__ */ jsx34("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)]", children: description ?? (showValue ? `${clampedValue}%` : null) })
+    ] }),
+    /* @__PURE__ */ jsx34(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuenow": clampedValue,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": label ?? "Progress",
+        className: twMerge11(
+          "w-full rounded-[var(--border-radius-full)] bg-[var(--color-progress-track)]",
+          sizeStyles8[size]
+        ),
+        children: /* @__PURE__ */ jsx34(
+          "div",
+          {
+            className: twMerge11(
+              "h-full rounded-[var(--border-radius-full)] transition-all duration-300",
+              fillStyles[variant]
+            ),
+            style: { width: `${clampedValue}%` }
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/components/Banner/Banner.tsx
+import { useState as useState3 } from "react";
+import {
+  Info as Info3,
+  AlertTriangle,
+  AlertCircle as AlertCircle2,
+  CheckCircle2,
+  X as X3
+} from "lucide-react";
+import { twMerge as twMerge12 } from "tailwind-merge";
+import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
+var variantConfig2 = {
+  info: {
+    icon: Info3,
+    containerClass: "bg-[var(--color-banner-info-bg)] border-[var(--color-banner-info-border)] text-[var(--color-banner-info-text)]",
+    iconClass: "text-[var(--color-banner-info-icon)]",
+    role: "status"
+  },
+  warning: {
+    icon: AlertTriangle,
+    containerClass: "bg-[var(--color-banner-warning-bg)] border-[var(--color-banner-warning-border)] text-[var(--color-banner-warning-text)]",
+    iconClass: "text-[var(--color-banner-warning-icon)]",
+    role: "alert"
+  },
+  danger: {
+    icon: AlertCircle2,
+    containerClass: "bg-[var(--color-banner-danger-bg)] border-[var(--color-banner-danger-border)] text-[var(--color-banner-danger-text)]",
+    iconClass: "text-[var(--color-banner-danger-icon)]",
+    role: "alert"
+  },
+  success: {
+    icon: CheckCircle2,
+    containerClass: "bg-[var(--color-banner-success-bg)] border-[var(--color-banner-success-border)] text-[var(--color-banner-success-text)]",
+    iconClass: "text-[var(--color-banner-success-icon)]",
+    role: "status"
+  }
+};
+function Banner({
+  children,
+  variant = "info",
+  title,
+  icon,
+  dismissible = false,
+  onDismiss,
+  className
+}) {
+  const [dismissed, setDismissed] = useState3(false);
+  if (dismissed) return null;
+  const config = variantConfig2[variant];
+  const IconComponent = icon ?? config.icon;
+  const handleDismiss = () => {
+    setDismissed(true);
+    onDismiss?.();
+  };
+  return /* @__PURE__ */ jsxs25(
+    "div",
+    {
+      role: config.role,
+      className: twMerge12(
+        "flex items-start gap-[var(--spacing-3)] rounded-[var(--border-radius-lg)] border px-[var(--spacing-4)] py-[var(--spacing-3)]",
+        "text-[length:var(--font-size-sm)]",
+        config.containerClass,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx35(
+          IconComponent,
+          {
+            size: 20,
+            className: twMerge12("shrink-0 mt-0.5", config.iconClass),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxs25("div", { className: "flex-1", children: [
+          title && /* @__PURE__ */ jsxs25("span", { className: "font-[number:var(--font-weight-medium)]", children: [
+            title,
+            " \u2014 "
+          ] }),
+          children
+        ] }),
+        dismissible && /* @__PURE__ */ jsx35(
+          "button",
+          {
+            type: "button",
+            onClick: handleDismiss,
+            className: "shrink-0 rounded-[var(--border-radius-sm)] p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
+            "aria-label": "Dismiss",
+            children: /* @__PURE__ */ jsx35(X3, { size: 16, "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/MetricCard/MetricCard.tsx
+import { twMerge as twMerge13 } from "tailwind-merge";
+import { Fragment as Fragment10, jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
+var sizeConfig = {
+  sm: {
+    padding: "p-3",
+    labelClass: "text-[length:var(--font-size-xs)]",
+    valueClass: "text-[length:var(--font-size-xl)]"
+  },
+  md: {
+    padding: "p-4",
+    labelClass: "text-[length:var(--font-size-sm)]",
+    valueClass: "text-[length:var(--font-size-2xl)]"
+  }
+};
+function MetricCard({
+  label,
+  value,
+  secondary,
+  href,
+  size = "md",
+  className
+}) {
+  const config = sizeConfig[size];
+  const containerClass = twMerge13(
+    "bg-[var(--color-surface-default)] border border-[var(--color-border-default)] rounded-[var(--border-radius-lg)] shadow-sm",
+    config.padding,
+    href && "block transition-shadow hover:shadow-md hover:border-[var(--color-border-focus)] focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 outline-none",
+    className
+  );
+  const content = /* @__PURE__ */ jsxs26(Fragment10, { children: [
+    /* @__PURE__ */ jsx36("div", { className: twMerge13(config.labelClass, "text-[var(--color-text-secondary)]"), children: label }),
+    /* @__PURE__ */ jsx36(
+      "div",
+      {
+        className: twMerge13(
+          config.valueClass,
+          "font-[number:var(--font-weight-semibold)] text-[var(--color-text-primary)] mt-1 tabular-nums"
+        ),
+        children: value
+      }
+    ),
+    secondary && /* @__PURE__ */ jsx36("div", { className: "mt-1 text-sm", children: secondary })
+  ] });
+  if (href) {
+    return /* @__PURE__ */ jsx36("a", { href, className: containerClass, children: content });
+  }
+  return /* @__PURE__ */ jsx36("div", { className: containerClass, children: content });
+}
+
 // src/tokens/tokens.ts
 var ColorPurple50 = "#f5f0fa";
 var ColorPurple100 = "#ead9f5";
@@ -2320,6 +2738,16 @@ var ColorSlate600 = "#475569";
 var ColorSlate700 = "#334155";
 var ColorSlate800 = "#1e293b";
 var ColorSlate900 = "#0f172a";
+var ColorAmber50 = "#fffbeb";
+var ColorAmber100 = "#fef3c7";
+var ColorAmber200 = "#fde68a";
+var ColorAmber300 = "#fcd34d";
+var ColorAmber400 = "#fbbf24";
+var ColorAmber500 = "#f59e0b";
+var ColorAmber600 = "#d97706";
+var ColorAmber700 = "#b45309";
+var ColorAmber800 = "#92400e";
+var ColorAmber900 = "#78350f";
 var ColorNeutral0 = "#ffffff";
 var ColorNeutral50 = "#f9fafb";
 var ColorNeutral100 = "#f3f4f6";
@@ -2369,6 +2797,7 @@ var ColorSurfaceWarning = "#fffbeb";
 var ColorSurfaceInfo = "#f8fafc";
 var ColorSurfaceOverlay = "#000000cc";
 var ColorSurfaceHover = "#f3f4f6";
+var ColorSurfacePressed = "#e5e7eb";
 var ColorSurfaceSelected = "#edf9f9";
 var ColorSurfaceSelectedHover = "#d0f0f0";
 var ColorBorderDefault = "#e5e7eb";
@@ -2381,6 +2810,54 @@ var ColorBorderSuccess = "#16a34a";
 var ColorBorderInfo = "#94a3b8";
 var ColorBorderWarning = "#d97706";
 var ColorOverlayBackdrop = "#00000066";
+var ColorStatusSuccess = "#22c55e";
+var ColorStatusDanger = "#f43f5e";
+var ColorStatusWarning = "#d97706";
+var ColorStatusInfo = "#64748b";
+var ColorDeltaIncreaseBg = "#fff1f2";
+var ColorDeltaIncreaseText = "#be123c";
+var ColorDeltaIncreaseIcon = "#f43f5e";
+var ColorDeltaDecreaseBg = "#f0fdf4";
+var ColorDeltaDecreaseText = "#15803d";
+var ColorDeltaDecreaseIcon = "#22c55e";
+var ColorDeltaFlatBg = "#f3f4f6";
+var ColorDeltaFlatText = "#6b7280";
+var ColorDeltaFlatIcon = "#9ca3af";
+var ColorProgressTrack = "#e5e7eb";
+var ColorProgressFill = "#6b2695";
+var ColorProgressFillSuccess = "#22c55e";
+var ColorProgressFillWarning = "#f59e0b";
+var ColorProgressFillDanger = "#f43f5e";
+var ColorBannerInfoBg = "#f8fafc";
+var ColorBannerInfoText = "#334155";
+var ColorBannerInfoBorder = "#e2e8f0";
+var ColorBannerInfoIcon = "#64748b";
+var ColorBannerWarningBg = "#fffbeb";
+var ColorBannerWarningText = "#92400e";
+var ColorBannerWarningBorder = "#fde68a";
+var ColorBannerWarningIcon = "#f59e0b";
+var ColorBannerDangerBg = "#fff1f2";
+var ColorBannerDangerText = "#be123c";
+var ColorBannerDangerBorder = "#fecdd3";
+var ColorBannerDangerIcon = "#f43f5e";
+var ColorBannerSuccessBg = "#f0fdf4";
+var ColorBannerSuccessText = "#15803d";
+var ColorBannerSuccessBorder = "#bbf7d0";
+var ColorBannerSuccessIcon = "#22c55e";
+var ColorBadgePurpleBg = "#ead9f5";
+var ColorBadgePurpleText = "#5c2483";
+var ColorBadgeTealBg = "#d0f0f0";
+var ColorBadgeTealText = "#217d7e";
+var ColorBadgeSlateBg = "#f1f5f9";
+var ColorBadgeSlateText = "#334155";
+var ColorBadgeRoseBg = "#ffe4e6";
+var ColorBadgeRoseText = "#be123c";
+var ColorBadgeNeutralBg = "#f3f4f6";
+var ColorBadgeNeutralText = "#374151";
+var ColorBadgeGreenBg = "#dcfce7";
+var ColorBadgeGreenText = "#15803d";
+var ColorBadgeAmberBg = "#fef3c7";
+var ColorBadgeAmberText = "#b45309";
 var Spacing1 = "4px";
 var Spacing2 = "8px";
 var Spacing3 = "12px";
@@ -2414,6 +2891,8 @@ var LineHeightTight = 1.25;
 var LineHeightNormal = 1.5;
 var LineHeightRelaxed = 1.625;
 export {
+  Badge,
+  Banner,
   BorderRadiusFull,
   BorderRadiusLg,
   BorderRadiusMd,
@@ -2423,6 +2902,7 @@ export {
   Breadcrumbs,
   Button,
   ButtonLink,
+  Card,
   Cell,
   Checkbox,
   ColorActionDanger,
@@ -2438,6 +2918,46 @@ export {
   ColorActionSecondaryHover,
   ColorActionSuccess,
   ColorActionSuccessHover,
+  ColorAmber100,
+  ColorAmber200,
+  ColorAmber300,
+  ColorAmber400,
+  ColorAmber50,
+  ColorAmber500,
+  ColorAmber600,
+  ColorAmber700,
+  ColorAmber800,
+  ColorAmber900,
+  ColorBadgeAmberBg,
+  ColorBadgeAmberText,
+  ColorBadgeGreenBg,
+  ColorBadgeGreenText,
+  ColorBadgeNeutralBg,
+  ColorBadgeNeutralText,
+  ColorBadgePurpleBg,
+  ColorBadgePurpleText,
+  ColorBadgeRoseBg,
+  ColorBadgeRoseText,
+  ColorBadgeSlateBg,
+  ColorBadgeSlateText,
+  ColorBadgeTealBg,
+  ColorBadgeTealText,
+  ColorBannerDangerBg,
+  ColorBannerDangerBorder,
+  ColorBannerDangerIcon,
+  ColorBannerDangerText,
+  ColorBannerInfoBg,
+  ColorBannerInfoBorder,
+  ColorBannerInfoIcon,
+  ColorBannerInfoText,
+  ColorBannerSuccessBg,
+  ColorBannerSuccessBorder,
+  ColorBannerSuccessIcon,
+  ColorBannerSuccessText,
+  ColorBannerWarningBg,
+  ColorBannerWarningBorder,
+  ColorBannerWarningIcon,
+  ColorBannerWarningText,
   ColorBorderAccent,
   ColorBorderBrand,
   ColorBorderDanger,
@@ -2449,6 +2969,15 @@ export {
   ColorBorderWarning,
   ColorBrandAccent,
   ColorBrandPrimary,
+  ColorDeltaDecreaseBg,
+  ColorDeltaDecreaseIcon,
+  ColorDeltaDecreaseText,
+  ColorDeltaFlatBg,
+  ColorDeltaFlatIcon,
+  ColorDeltaFlatText,
+  ColorDeltaIncreaseBg,
+  ColorDeltaIncreaseIcon,
+  ColorDeltaIncreaseText,
   ColorGreen100,
   ColorGreen200,
   ColorGreen300,
@@ -2473,6 +3002,11 @@ export {
   ColorNeutral900,
   ColorNeutral950,
   ColorOverlayBackdrop,
+  ColorProgressFill,
+  ColorProgressFillDanger,
+  ColorProgressFillSuccess,
+  ColorProgressFillWarning,
+  ColorProgressTrack,
   ColorPurple100,
   ColorPurple200,
   ColorPurple300,
@@ -2503,6 +3037,10 @@ export {
   ColorSlate700,
   ColorSlate800,
   ColorSlate900,
+  ColorStatusDanger,
+  ColorStatusInfo,
+  ColorStatusSuccess,
+  ColorStatusWarning,
   ColorSurfaceAccent,
   ColorSurfaceBrand,
   ColorSurfaceDanger,
@@ -2511,6 +3049,7 @@ export {
   ColorSurfaceInfo,
   ColorSurfaceMuted,
   ColorSurfaceOverlay,
+  ColorSurfacePressed,
   ColorSurfaceSelected,
   ColorSurfaceSelectedHover,
   ColorSurfaceSubtle,
@@ -2537,6 +3076,7 @@ export {
   ColorTextTertiary,
   ColorTextWarning,
   Column,
+  DeltaIndicator,
   Dialog,
   EmptyState,
   Field,
@@ -2573,9 +3113,11 @@ export {
   LineHeightTight,
   Link,
   Menu,
+  MetricCard,
   Popover3 as Popover,
   PopoverContent,
   PopoverTrigger,
+  ProgressBar,
   Radio,
   RadioButton,
   RadioGroup,