@krosoft/react 0.0.74 → 0.0.75

package/dist/MetricCard-H--Bf1Ib.js

@@ -0,0 +1,64 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { c as m, g as u, h as f, d as p } from "./calendar-cHag6u-j.js";
+import "./index-BQOmHRsD.js";
+import { c as n } from "./index-gWiv5-6R.js";
+import "./select-Dv9bdUCB.js";
+import g from "react";
+import { formatNumber as h } from "@krosoft/core/helpers";
+import { useTranslation as N } from "react-i18next";
+const b = ({ titleKey: t, value: e, valueClassName: i, icon: d, iconClassName: s, description: l, descriptionClassName: c, onClick: a }) => {
+  const { t: x } = N();
+  return /* @__PURE__ */ o(m, { className: n(a ? "hover:border-primary cursor-pointer" : ""), onClick: a, children: [
+    /* @__PURE__ */ o(u, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+      /* @__PURE__ */ r(f, { className: "text-sm font-medium", children: x(t) }),
+      g.createElement(d, {
+        className: n("size-6 text-muted-foreground", s)
+      })
+    ] }),
+    /* @__PURE__ */ o(p, { children: [
+      /* @__PURE__ */ r("div", { className: n("text-2xl font-bold", i), children: h(e) }),
+      /* @__PURE__ */ r("p", { className: n("text-xs text-muted-foreground", c), children: l })
+    ] })
+  ] });
+}, $ = ({ stats: t }) => /* @__PURE__ */ r("div", { className: "grid gap-6 md:grid-cols-2 lg:grid-cols-4", children: t.map((e) => /* @__PURE__ */ r(
+  b,
+  {
+    titleKey: e.titleKey,
+    value: e.value,
+    valueClassName: e.valueClassName,
+    icon: e.icon,
+    iconClassName: e.iconClassName,
+    description: e.description,
+    descriptionClassName: e.descriptionClassName,
+    onClick: e.onClick
+  },
+  e.titleKey
+)) }), v = {
+  blue: "from-blue-500 to-cyan-500",
+  green: "from-green-500 to-emerald-500",
+  orange: "from-orange-500 to-yellow-500",
+  red: "from-red-500 to-pink-500",
+  purple: "from-purple-500 to-indigo-500"
+}, C = (t) => t === "up" ? "↗" : t === "down" ? "↘" : "→", w = (t) => t === "up" ? "text-green-600" : t === "down" ? "text-red-600" : "text-muted-foreground", E = ({ title: t, value: e, unit: i, icon: d, trend: s, trendValue: l, color: c = "blue", children: a }) => /* @__PURE__ */ o(m, { className: "relative overflow-hidden bg-card border shadow-lg hover:shadow-xl transition-all duration-300", children: [
+  /* @__PURE__ */ r("div", { className: "absolute inset-0 bg-white/5" }),
+  /* @__PURE__ */ o(u, { className: "flex flex-row items-center justify-between space-y-0 pb-2 relative z-10", children: [
+    /* @__PURE__ */ r(f, { className: "text-sm font-medium text-muted-foreground", children: t }),
+    /* @__PURE__ */ r("div", { className: `p-2 rounded-lg bg-gradient-to-br ${v[c]} shadow-lg`, children: /* @__PURE__ */ r(d, { className: "h-4 w-4 text-white" }) })
+  ] }),
+  /* @__PURE__ */ o(p, { className: "relative z-10", children: [
+    /* @__PURE__ */ o("div", { className: "flex items-baseline space-x-2", children: [
+      /* @__PURE__ */ r("div", { className: "text-2xl font-bold text-card-foreground", children: typeof e == "number" ? e.toFixed(1) : e }),
+      i && /* @__PURE__ */ r("div", { className: "text-sm text-muted-foreground font-medium", children: i })
+    ] }),
+    s && l && /* @__PURE__ */ o("div", { className: `flex items-center space-x-1 mt-2 text-xs ${w(s)}`, children: [
+      /* @__PURE__ */ r("span", { children: C(s) }),
+      /* @__PURE__ */ r("span", { children: l })
+    ] }),
+    a && /* @__PURE__ */ r("div", { className: "mt-4", children: a })
+  ] })
+] });
+export {
+  b as K,
+  E as M,
+  $ as a
+};

package/dist/components/core/cards/MetricCard.d.ts

@@ -0,0 +1,23 @@
+import type { LucideIcon } from "lucide-react";
+import * as React from "react";
+declare const colorClasses: {
+    readonly blue: "from-blue-500 to-cyan-500";
+    readonly green: "from-green-500 to-emerald-500";
+    readonly orange: "from-orange-500 to-yellow-500";
+    readonly red: "from-red-500 to-pink-500";
+    readonly purple: "from-purple-500 to-indigo-500";
+};
+export type MetricCardColor = keyof typeof colorClasses;
+export interface MetricCardProps {
+    title: string;
+    value: string | number;
+    unit?: string;
+    icon: LucideIcon;
+    trend?: "up" | "down" | "stable";
+    trendValue?: string;
+    color?: MetricCardColor;
+    children?: React.ReactNode;
+}
+export declare const MetricCard: ({ title, value, unit, icon: Icon, trend, trendValue, color, children }: MetricCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MetricCard.d.ts.map

package/dist/components/core/cards/MetricCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricCard.d.ts","sourceRoot":"","sources":["../../../../src/components/core/cards/MetricCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,QAAA,MAAM,YAAY;;;;;;CAMR,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAcD,eAAO,MAAM,UAAU,GAAI,wEAAiF,eAAe,4CA6B1H,CAAC"}

package/dist/components/core/cards/index.d.ts

@@ -1,4 +1,6 @@
 export { KpiCard } from "./KpiCard";
 export type { KpiCardProps } from "./KpiCard";
 export { KpiCards } from "./KpiCards";
+export { MetricCard } from "./MetricCard";
+export type { MetricCardProps, MetricCardColor } from "./MetricCard";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/core/cards/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/core/cards/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/core/cards/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/core/cards/index.js

@@ -1,5 +1,6 @@
-import { K as p, a as s } from "../../../KpiCards-Bp6EAsf7.js";
+import { K as s, a as d, M as i } from "../../../MetricCard-H--Bf1Ib.js";
 export {
-  p as KpiCard,
-  s as KpiCards
+  s as KpiCard,
+  d as KpiCards,
+  i as MetricCard
 };

package/dist/components/core/index.js

@@ -1,16 +1,17 @@
-import { K as e, a as o } from "../../KpiCards-Bp6EAsf7.js";
-import { D as s, S as p } from "../../DateRangePicker-BAn4LMHi.js";
-import { E as m, L as f } from "../../LoadingState-C0uS6aGT.js";
-import { S as x, T as d } from "../../Topbar-CFALRIJn.js";
-import { T as c } from "../../ThemeSelector-DQmkKmzE.js";
+import { K as e, a as o, M as t } from "../../MetricCard-H--Bf1Ib.js";
+import { D as p, S } from "../../DateRangePicker-BAn4LMHi.js";
+import { E as m, L as d } from "../../LoadingState-C0uS6aGT.js";
+import { S as x, T as c } from "../../Topbar-CFALRIJn.js";
+import { T as n } from "../../ThemeSelector-DQmkKmzE.js";
 export {
-  s as DateRangePicker,
+  p as DateRangePicker,
   m as ErrorState,
   e as KpiCard,
   o as KpiCards,
-  f as LoadingState,
-  p as SearchInput,
+  d as LoadingState,
+  t as MetricCard,
+  S as SearchInput,
   x as Sidebar,
-  c as ThemeSelector,
-  d as Topbar
+  n as ThemeSelector,
+  c as Topbar
 };

package/dist/components/index.js

@@ -1,50 +1,51 @@
-import { K as t, a as r } from "../KpiCards-Bp6EAsf7.js";
-import { D as o, S as i } from "../DateRangePicker-BAn4LMHi.js";
-import { E as p, L as n } from "../LoadingState-C0uS6aGT.js";
-import { S as d, T as S } from "../Topbar-CFALRIJn.js";
-import { T as C } from "../ThemeSelector-DQmkKmzE.js";
-import { A as f, a as b, b as x, C as g, c as u, d as A, e as D, f as B, g as I, h as V, I as h, T as K, i as L, j as k, k as E, l as P, m as j, n as v } from "../calendar-cHag6u-j.js";
+import { K as t, a as r, M as s } from "../MetricCard-H--Bf1Ib.js";
+import { D as i, S as l } from "../DateRangePicker-BAn4LMHi.js";
+import { E as c, L as d } from "../LoadingState-C0uS6aGT.js";
+import { S, T } from "../Topbar-CFALRIJn.js";
+import { T as m } from "../ThemeSelector-DQmkKmzE.js";
+import { A as b, a as x, b as g, C as u, c as A, d as D, e as B, f as I, g as V, h, I as K, T as L, i as k, j as E, k as M, l as P, m as j, n as v } from "../calendar-cHag6u-j.js";
 import { B as F, b as G } from "../index-BQOmHRsD.js";
 import { B as R, b as q } from "../badge-C4pCH7IL.js";
-import { S as z, a as J, b as M, c as N, d as O, e as Q, f as U, g as W } from "../select-Dv9bdUCB.js";
+import { S as z, a as J, b as N, c as O, d as Q, e as U, f as W, g as X } from "../select-Dv9bdUCB.js";
 export {
-  f as Alert,
-  b as AlertDescription,
-  x as AlertTitle,
+  b as Alert,
+  x as AlertDescription,
+  g as AlertTitle,
   R as Badge,
   F as Button,
-  g as Calendar,
-  u as Card,
-  A as CardContent,
-  D as CardDescription,
-  B as CardFooter,
-  I as CardHeader,
-  V as CardTitle,
-  o as DateRangePicker,
-  p as ErrorState,
-  h as Input,
+  u as Calendar,
+  A as Card,
+  D as CardContent,
+  B as CardDescription,
+  I as CardFooter,
+  V as CardHeader,
+  h as CardTitle,
+  i as DateRangePicker,
+  c as ErrorState,
+  K as Input,
   t as KpiCard,
   r as KpiCards,
-  n as LoadingState,
-  i as SearchInput,
+  d as LoadingState,
+  s as MetricCard,
+  l as SearchInput,
   z as Select,
   J as SelectContent,
-  M as SelectGroup,
-  N as SelectItem,
-  O as SelectLabel,
-  Q as SelectSeparator,
-  U as SelectTrigger,
-  W as SelectValue,
-  d as Sidebar,
-  C as ThemeSelector,
-  K as Toast,
-  L as ToastAction,
-  k as ToastClose,
-  E as ToastDescription,
+  N as SelectGroup,
+  O as SelectItem,
+  Q as SelectLabel,
+  U as SelectSeparator,
+  W as SelectTrigger,
+  X as SelectValue,
+  S as Sidebar,
+  m as ThemeSelector,
+  L as Toast,
+  k as ToastAction,
+  E as ToastClose,
+  M as ToastDescription,
   P as ToastProvider,
   j as ToastTitle,
   v as ToastViewport,
-  S as Topbar,
+  T as Topbar,
   q as badgeVariants,
   G as buttonVariants
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krosoft/react",
-  "version": "0.0.74",
+  "version": "0.0.75",
   "description": "Krosoft shared React package",
   "type": "module",
   "scripts": {

package/dist/KpiCards-Bp6EAsf7.js

@@ -1,40 +0,0 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import { c as p, g as f, h as u, d as C } from "./calendar-cHag6u-j.js";
-import "./index-BQOmHRsD.js";
-import { c as a } from "./index-gWiv5-6R.js";
-import "./select-Dv9bdUCB.js";
-import N from "react";
-import { formatNumber as x } from "@krosoft/core/helpers";
-import { useTranslation as h } from "react-i18next";
-const g = ({ titleKey: i, value: e, valueClassName: l, icon: m, iconClassName: c, description: t, descriptionClassName: n, onClick: o }) => {
-  const { t: d } = h();
-  return /* @__PURE__ */ s(p, { className: a(o ? "hover:border-primary cursor-pointer" : ""), onClick: o, children: [
-    /* @__PURE__ */ s(f, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-      /* @__PURE__ */ r(u, { className: "text-sm font-medium", children: d(i) }),
-      N.createElement(m, {
-        className: a("size-6 text-muted-foreground", c)
-      })
-    ] }),
-    /* @__PURE__ */ s(C, { children: [
-      /* @__PURE__ */ r("div", { className: a("text-2xl font-bold", l), children: x(e) }),
-      /* @__PURE__ */ r("p", { className: a("text-xs text-muted-foreground", n), children: t })
-    ] })
-  ] });
-}, k = ({ stats: i }) => /* @__PURE__ */ r("div", { className: "grid gap-6 md:grid-cols-2 lg:grid-cols-4", children: i.map((e) => /* @__PURE__ */ r(
-  g,
-  {
-    titleKey: e.titleKey,
-    value: e.value,
-    valueClassName: e.valueClassName,
-    icon: e.icon,
-    iconClassName: e.iconClassName,
-    description: e.description,
-    descriptionClassName: e.descriptionClassName,
-    onClick: e.onClick
-  },
-  e.titleKey
-)) });
-export {
-  g as K,
-  k as a
-};