@pos-360/horizon 0.23.0 → 0.25.0

package/dist/{chunk-3TY2CM2C.mjs → chunk-BFDGIY6V.mjs}

@@ -117,6 +117,159 @@ var Dashboard = forwardRef(
   }
 );
 Dashboard.displayName = "Dashboard";
+var TrendBadge = ({ trend, size }) => {
+  const Icon = trend.direction === "up" ? TrendingUp : trend.direction === "down" ? TrendingDown : Minus;
+  const iconSize = size === "sm" ? "w-3 h-3" : "w-3.5 h-3.5";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center gap-1 px-2 py-0.5 rounded-hz-full font-medium",
+        size === "sm" && "text-xs",
+        size === "md" && "text-xs",
+        size === "lg" && "text-sm",
+        trend.direction === "up" && "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400",
+        trend.direction === "down" && "bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400",
+        trend.direction === "neutral" && "bg-gray-100 text-gray-600 dark:bg-neutral-800 dark:text-gray-400"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: iconSize }),
+        /* @__PURE__ */ jsx("span", { children: trend.value === null ? "N/A" : `${Math.abs(trend.value).toFixed(1)}%` })
+      ]
+    }
+  );
+};
+var StatDisplay = forwardRef(
+  ({ data, size = "md", className }, ref) => {
+    const { value, label, trend, prefix = "", suffix = "" } = data;
+    const formattedValue = useMemo(() => {
+      if (typeof value === "number") {
+        return value.toLocaleString("en-US", {
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 2
+        });
+      }
+      return value;
+    }, [value]);
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col", className), children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "span",
+          size: "xs",
+          color: "muted",
+          className: "uppercase tracking-wide",
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "font-bold text-gray-900 dark:text-gray-100 mt-0.5 font-mono",
+            size === "sm" && "text-lg",
+            size === "md" && "text-xl",
+            size === "lg" && "text-2xl"
+          ),
+          children: [
+            prefix,
+            formattedValue,
+            suffix
+          ]
+        }
+      ),
+      trend && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1", children: [
+        /* @__PURE__ */ jsx(TrendBadge, { trend, size }),
+        trend.label && /* @__PURE__ */ jsx(Text, { as: "span", size: "xs", color: "muted", children: trend.label })
+      ] })
+    ] });
+  }
+);
+StatDisplay.displayName = "StatDisplay";
+var KPI_CARD_ROWS = {
+  /** A single standard KpiCard (~80px) */
+  standard: 2,
+  /** The featured/hero variant (~110px) */
+  featured: 3,
+  /**
+   * A KpiCardGroup with one featured card + one row of supporting cards (~250px).
+   * Add 2 for each additional row of supporting cards.
+   */
+  group: 6
+};
+var LARGE_PANEL_HEADER_ROWS = 1;
+function KpiCardGroup({
+  cards,
+  featured,
+  columns = 4,
+  gap = 4,
+  className
+}) {
+  const colClass = {
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-2 md:grid-cols-4",
+    5: "grid-cols-2 md:grid-cols-5"
+  };
+  const gapClass = `gap-${gap}`;
+  const featuredCard = featured ? cards.find((c) => c.id === featured) : null;
+  const supportingCards = featured ? cards.filter((c) => c.id !== featured) : cards;
+  const supportingCols = Math.min(supportingCards.length, columns);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", gapClass, className), children: [
+    featuredCard && /* @__PURE__ */ jsx(KpiCard, { ...featuredCard, featured: true }),
+    supportingCards.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("grid", colClass[supportingCols], gapClass), children: supportingCards.map((card) => /* @__PURE__ */ jsx(KpiCard, { ...card, featured: false }, card.id)) })
+  ] });
+}
+function KpiCard({
+  label,
+  value,
+  prefix,
+  suffix,
+  trend,
+  size = "md",
+  featured = false,
+  className
+}) {
+  const formattedValue = useMemo(() => {
+    if (typeof value === "number") {
+      return value.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 2 });
+    }
+    return value;
+  }, [value]);
+  if (featured) {
+    const Icon = trend?.direction === "up" ? TrendingUp : trend?.direction === "down" ? TrendingDown : Minus;
+    return /* @__PURE__ */ jsxs("div", { className: cn("p-4", className), children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wide text-blue-500 dark:text-blue-400", children: label }),
+      /* @__PURE__ */ jsxs("p", { className: "text-4xl font-bold text-gray-900 dark:text-gray-100 mt-1 font-mono leading-none", children: [
+        prefix,
+        formattedValue,
+        suffix
+      ] }),
+      trend && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-2", children: [
+        /* @__PURE__ */ jsxs("span", { className: cn(
+          "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium",
+          trend.direction === "up" && "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400",
+          trend.direction === "down" && "bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400",
+          trend.direction === "neutral" && "bg-gray-100 text-gray-600 dark:bg-neutral-800 dark:text-gray-400"
+        ), children: [
+          /* @__PURE__ */ jsx(Icon, { className: "w-3 h-3" }),
+          trend.value === null ? "N/A" : `${Math.abs(trend.value).toFixed(1)}%`
+        ] }),
+        trend.label && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: trend.label })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn(
+    "bg-white dark:bg-neutral-900 border border-gray-100 dark:border-neutral-800 rounded-lg p-4",
+    className
+  ), children: /* @__PURE__ */ jsx(
+    StatDisplay,
+    {
+      data: { label, value, prefix, suffix, trend },
+      size
+    }
+  ) });
+}
 var breakpoints2 = {
   sm: 640,
   md: 768,
@@ -191,78 +344,6 @@ var DashboardPanel = forwardRef(
   }
 );
 DashboardPanel.displayName = "DashboardPanel";
-var TrendBadge = ({ trend, size }) => {
-  const Icon = trend.direction === "up" ? TrendingUp : trend.direction === "down" ? TrendingDown : Minus;
-  const iconSize = size === "sm" ? "w-3 h-3" : "w-3.5 h-3.5";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "inline-flex items-center gap-1 px-2 py-0.5 rounded-hz-full font-medium",
-        size === "sm" && "text-xs",
-        size === "md" && "text-xs",
-        size === "lg" && "text-sm",
-        trend.direction === "up" && "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400",
-        trend.direction === "down" && "bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400",
-        trend.direction === "neutral" && "bg-gray-100 text-gray-600 dark:bg-neutral-800 dark:text-gray-400"
-      ),
-      children: [
-        /* @__PURE__ */ jsx(Icon, { className: iconSize }),
-        /* @__PURE__ */ jsxs("span", { children: [
-          Math.abs(trend.value).toFixed(1),
-          "%"
-        ] })
-      ]
-    }
-  );
-};
-var StatDisplay = forwardRef(
-  ({ data, size = "md", className }, ref) => {
-    const { value, label, trend, prefix = "", suffix = "" } = data;
-    const formattedValue = useMemo(() => {
-      if (typeof value === "number") {
-        return value.toLocaleString("en-US", {
-          minimumFractionDigits: 0,
-          maximumFractionDigits: 2
-        });
-      }
-      return value;
-    }, [value]);
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col", className), children: [
-      /* @__PURE__ */ jsx(
-        Text,
-        {
-          as: "span",
-          size: "xs",
-          color: "muted",
-          className: "uppercase tracking-wide",
-          children: label
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "span",
-        {
-          className: cn(
-            "font-bold text-gray-900 dark:text-gray-100 mt-0.5",
-            size === "sm" && "text-lg",
-            size === "md" && "text-xl",
-            size === "lg" && "text-2xl"
-          ),
-          children: [
-            prefix,
-            formattedValue,
-            suffix
-          ]
-        }
-      ),
-      trend && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1", children: [
-        /* @__PURE__ */ jsx(TrendBadge, { trend, size }),
-        trend.label && /* @__PURE__ */ jsx(Text, { as: "span", size: "xs", color: "muted", children: trend.label })
-      ] })
-    ] });
-  }
-);
-StatDisplay.displayName = "StatDisplay";
 var defaultColors = [
   "#3b82f6",
   // blue-500
@@ -891,10 +972,7 @@ var TrendIndicator = ({ trend }) => {
       ),
       children: [
         /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4" }),
-        /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold", children: [
-          Math.abs(trend.value).toFixed(1),
-          "%"
-        ] })
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: trend.value === null ? "N/A" : `${Math.abs(trend.value).toFixed(1)}%` })
       ]
     }
   );
@@ -2619,6 +2697,6 @@ var SideNavFooter = forwardRef(
 );
 SideNavFooter.displayName = "SideNavFooter";
 
-export { AnimatedButton, ChartRenderer, CompactPanel, Dashboard, DashboardPanel, Input, LargePanel, MediumPanel, SideNav, SideNavFooter, SideNavHeader, SideNavItem, SideNavSection, StatDisplay, TableRenderer, TemplateSelector, TextButton, Toast, useDashboardContext, useSideNavContext };
-//# sourceMappingURL=chunk-3TY2CM2C.mjs.map
-//# sourceMappingURL=chunk-3TY2CM2C.mjs.map
+export { AnimatedButton, ChartRenderer, CompactPanel, Dashboard, DashboardPanel, Input, KPI_CARD_ROWS, KpiCard, KpiCardGroup, LARGE_PANEL_HEADER_ROWS, LargePanel, MediumPanel, SideNav, SideNavFooter, SideNavHeader, SideNavItem, SideNavSection, StatDisplay, TableRenderer, TemplateSelector, TextButton, Toast, useDashboardContext, useSideNavContext };
+//# sourceMappingURL=chunk-BFDGIY6V.mjs.map
+//# sourceMappingURL=chunk-BFDGIY6V.mjs.map