@geomak/ui 6.7.0 → 6.8.0

package/dist/index.cjs

@@ -1809,6 +1809,59 @@ function CardCarousel({
     )) })
   ] });
 }
+var VALUE_SIZE = {
+  sm: "text-xl",
+  md: "text-3xl",
+  lg: "text-4xl"
+};
+var TONE2 = {
+  good: "text-status-success",
+  bad: "text-status-error",
+  neutral: "text-foreground-muted"
+};
+var ArrowUp = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.2, "aria-hidden": "true", className: "h-3.5 w-3.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 19V5M5 12l7-7 7 7" }) });
+var ArrowDown = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.2, "aria-hidden": "true", className: "h-3.5 w-3.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 5v14M5 12l7 7 7-7" }) });
+function Statistic({
+  label,
+  value,
+  prefix,
+  suffix,
+  icon,
+  delta,
+  helpText,
+  size = "md",
+  align = "left",
+  className = "",
+  style
+}) {
+  const dir = delta?.direction ?? "neutral";
+  const positiveIsGood = delta?.positiveIsGood ?? true;
+  const deltaTone = dir === "neutral" ? "neutral" : dir === "up" === positiveIsGood ? "good" : "bad";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: ["flex gap-3", align === "center" ? "flex-col items-center text-center" : "items-start", className].filter(Boolean).join(" "),
+      style,
+      children: [
+        icon && align === "left" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-accent/10 text-accent", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-5 w-5 inline-flex items-center justify-center", children: icon }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-foreground-muted", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `mt-1 flex items-baseline gap-0.5 font-semibold text-foreground tabular-nums ${VALUE_SIZE[size]} ${align === "center" ? "justify-center" : ""}`, children: [
+            prefix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-muted text-[0.6em] font-medium self-center", children: prefix }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "leading-none", children: value }),
+            suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-muted text-[0.5em] font-medium self-center", children: suffix })
+          ] }),
+          delta && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `mt-1.5 flex items-center gap-1 text-sm font-medium ${align === "center" ? "justify-center" : ""} ${TONE2[deltaTone]}`, children: [
+            dir === "up" ? ArrowUp : dir === "down" ? ArrowDown : null,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: delta.value }),
+            delta.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-muted font-normal", children: delta.label })
+          ] }),
+          helpText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-xs text-foreground-muted", children: helpText })
+        ] })
+      ]
+    }
+  );
+}
 var NotificationContext = React16.createContext({
   open: () => void 0,
   close: () => void 0
@@ -7581,6 +7634,7 @@ exports.SkeletonCard = SkeletonCard;
 exports.SkeletonCircle = SkeletonCircle;
 exports.SkeletonText = SkeletonText;
 exports.Slider = Slider;
+exports.Statistic = Statistic;
 exports.Switch = Switch;
 exports.Table = Table;
 exports.Tabs = Tabs_default;