@krosoft/react 0.0.95 → 0.0.97

package/dist/MetricCard-BjTGW3b2.js

@@ -0,0 +1,103 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { I as l, M as p, J as m, N as x } from "./toggle-group-iLf3T7oV.js";
+import { c } from "./index-gWiv5-6R.js";
+import { useTranslation as f } from "react-i18next";
+import { formatNumber as b } from "@krosoft/core/helpers";
+import "./alert-sHZy6NHC.js";
+import "./tooltip-CAu4DEhc.js";
+import "./select-zzSnHs9S.js";
+import "next-themes";
+import "react";
+const v = () => /* @__PURE__ */ s(l, { className: "animate-pulse", children: [
+  /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e("div", { className: "h-6 bg-muted rounded w-1/4" }) }),
+  /* @__PURE__ */ e(m, { children: /* @__PURE__ */ s("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ e("div", { className: "h-4 bg-muted rounded" }),
+    /* @__PURE__ */ e("div", { className: "h-4 bg-muted rounded w-3/4" })
+  ] }) })
+] }), H = ({ count: t = 1 }) => /* @__PURE__ */ e("div", { className: "grid gap-6", style: { gridTemplateColumns: `repeat(${t}, minmax(0, 1fr))` }, children: Array.from({ length: t }).map((r, a) => /* @__PURE__ */ e(v, {}, a)) }), J = ({ titleKey: t, icon: r, className: a, children: i }) => {
+  const { t: n } = f();
+  return /* @__PURE__ */ s(l, { className: c("bg-gray-50 dark:bg-gray-950", a), children: [
+    /* @__PURE__ */ e(p, { children: /* @__PURE__ */ s(x, { className: "flex items-center gap-2", children: [
+      r && /* @__PURE__ */ e(r, { className: "mr-2 size-4" }),
+      /* @__PURE__ */ e("span", { children: n(t) })
+    ] }) }),
+    /* @__PURE__ */ e(m, { children: i })
+  ] });
+}, C = ({
+  titleKey: t,
+  value: r,
+  valueClassName: a,
+  icon: i,
+  iconClassName: n,
+  description: g,
+  descriptionClassName: d,
+  onClick: o
+}) => {
+  const { t: u } = f();
+  return /* @__PURE__ */ s(l, { className: c(o !== void 0 ? "hover:border-primary cursor-pointer" : ""), onClick: o, children: [
+    /* @__PURE__ */ s(p, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+      /* @__PURE__ */ e(x, { className: "text-sm font-medium", children: u(t) }),
+      /* @__PURE__ */ e(i, { className: c("size-6 text-muted-foreground", n) })
+    ] }),
+    /* @__PURE__ */ s(m, { children: [
+      /* @__PURE__ */ e("div", { className: c("text-2xl font-bold", a), children: b(r) }),
+      /* @__PURE__ */ e("p", { className: c("text-xs text-muted-foreground", d), children: g })
+    ] })
+  ] });
+}, _ = ({ stats: t }) => /* @__PURE__ */ e("div", { className: "grid gap-6 md:grid-cols-2 lg:grid-cols-4", children: t.map((r) => /* @__PURE__ */ e(
+  C,
+  {
+    titleKey: r.titleKey,
+    value: r.value,
+    valueClassName: r.valueClassName,
+    icon: r.icon,
+    iconClassName: r.iconClassName,
+    description: r.description,
+    descriptionClassName: r.descriptionClassName,
+    onClick: r.onClick
+  },
+  r.titleKey
+)) }), w = {
+  blue: "bg-gradient-to-br from-blue-500 to-cyan-500 text-white",
+  green: "bg-gradient-to-br from-green-500 to-emerald-500 text-white",
+  orange: "bg-gradient-to-br from-orange-500 to-yellow-500 text-white",
+  red: "bg-gradient-to-br from-red-500 to-pink-500 text-white",
+  purple: "bg-gradient-to-br from-purple-500 to-indigo-500 text-white",
+  accent: "bg-accent/10 text-accent",
+  success: "bg-success/10 text-success",
+  info: "bg-info/10 text-info",
+  warning: "bg-warning/10 text-warning",
+  destructive: "bg-destructive/10 text-destructive"
+}, y = {
+  sm: "size-4",
+  md: "size-5",
+  lg: "size-6"
+}, z = (t) => t === "up" ? "↑" : t === "down" ? "↓" : "", K = (t) => t === "up" ? "text-green-600" : t === "down" ? "text-red-600" : "text-muted-foreground", q = ({ title: t, value: r, unit: a, subtitle: i, icon: n, iconSize: g = "md", trend: d, trendValue: o, color: u = "blue", children: h }) => {
+  const N = n;
+  return /* @__PURE__ */ e(l, { className: "relative overflow-hidden bg-card border shadow-lg hover:shadow-xl transition-all duration-300", children: /* @__PURE__ */ s(m, { className: "pt-6", children: [
+    /* @__PURE__ */ s("div", { className: "flex items-start justify-between", children: [
+      /* @__PURE__ */ s("div", { children: [
+        /* @__PURE__ */ e(x, { className: "text-sm font-medium text-muted-foreground", children: t }),
+        /* @__PURE__ */ s("div", { className: "flex items-baseline space-x-2 mt-1", children: [
+          /* @__PURE__ */ e("div", { className: "text-2xl font-bold text-card-foreground", children: typeof r == "number" ? r.toFixed(1) : r }),
+          a && /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground font-medium", children: a })
+        ] }),
+        i && /* @__PURE__ */ e("div", { className: "mt-1 text-xs text-muted-foreground", children: i }),
+        d && o && /* @__PURE__ */ s("div", { className: `flex items-center space-x-1 mt-2 text-xs ${K(d)}`, children: [
+          /* @__PURE__ */ e("span", { children: z(d) }),
+          /* @__PURE__ */ e("span", { children: o })
+        ] })
+      ] }),
+      /* @__PURE__ */ e("div", { className: `p-2 rounded-lg ${w[u]} shadow-lg`, children: /* @__PURE__ */ e(N, { className: y[g] }) })
+    ] }),
+    h && /* @__PURE__ */ e("div", { className: "mt-4", children: h })
+  ] }) });
+};
+export {
+  v as C,
+  J as D,
+  C as K,
+  q as M,
+  H as a,
+  _ as b
+};