@orangecheck/design 0.7.2 → 0.7.4

package/dist/primitives.mjs

@@ -1366,7 +1366,16 @@ function StatBlock({ label, value, sub, delta, tone = "default", className }) {
   const toneClass = tone === "success" ? "text-success" : tone === "warning" ? "text-warning" : tone === "destructive" ? "text-destructive" : "text-foreground";
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
     /* @__PURE__ */ jsx("span", { className: "label-mono text-[10px]", children: label }),
-    /* @__PURE__ */ jsx("span", { className: cn("font-display text-2xl leading-none", toneClass), children: value }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "font-display text-2xl font-bold tracking-tight tabular-nums",
+          toneClass
+        ),
+        children: value
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
       sub && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-mono text-[11px] tracking-wide lowercase", children: sub }),
       delta && /* @__PURE__ */ jsxs(
@@ -1419,10 +1428,19 @@ var BORDER_TONE = {
   primary: "border-primary/40 text-primary",
   info: "border-info/40 text-info"
 };
+var FILL_TONE = {
+  success: "bg-success/10",
+  warning: "bg-warning/10",
+  destructive: "bg-destructive/10",
+  muted: "bg-muted/30",
+  primary: "bg-primary/10",
+  info: "bg-info/10"
+};
 function StatusPill({
   label,
   tone = "muted",
   variant = "plain",
+  filled = false,
   icon,
   className
 }) {
@@ -1433,6 +1451,7 @@ function StatusPill({
         className: cn(
           "inline-flex items-center gap-1.5 border px-1.5 py-0.5 font-mono text-[9px] tracking-widest uppercase",
           BORDER_TONE[tone],
+          filled && FILL_TONE[tone],
           className
         ),
         children: [
@@ -1459,6 +1478,7 @@ function StatusPill({
 }
 function makeStatusPill(map, options) {
   const variant = options?.variant ?? "plain";
+  const filled = options?.filled ?? false;
   const fallbackTone = options?.fallbackTone ?? "muted";
   function DomainStatusPill({ status, className }) {
     const spec = map[status];
@@ -1468,6 +1488,7 @@ function makeStatusPill(map, options) {
         tone: spec?.tone ?? fallbackTone,
         label: spec?.label ?? status,
         icon: spec?.icon,
+        filled,
         variant,
         className
       }