@krosoft/react 0.0.76 → 0.0.78

package/dist/MetricCard-B1Y-27_U.js

@@ -0,0 +1,78 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import "./calendar-BMReToKR.js";
+import "./checkbox-BI6Lm_p-.js";
+import "./floating-ui.react-dom-BPCyLQfI.js";
+import { C as x, d as h, e as g, a as f } from "./card-7XPLAra3.js";
+import { c } from "./index-gWiv5-6R.js";
+import "./select-B-hcmC3K.js";
+import b from "react";
+import { formatNumber as N } from "@krosoft/core/helpers";
+import { useTranslation as v } from "react-i18next";
+const C = ({ titleKey: r, value: e, valueClassName: n, icon: a, iconClassName: d, description: l, descriptionClassName: i, onClick: o }) => {
+  const { t: m } = v();
+  return /* @__PURE__ */ s(x, { className: c(o ? "hover:border-primary cursor-pointer" : ""), onClick: o, children: [
+    /* @__PURE__ */ s(h, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+      /* @__PURE__ */ t(g, { className: "text-sm font-medium", children: m(r) }),
+      b.createElement(a, {
+        className: c("size-6 text-muted-foreground", d)
+      })
+    ] }),
+    /* @__PURE__ */ s(f, { children: [
+      /* @__PURE__ */ t("div", { className: c("text-2xl font-bold", n), children: N(e) }),
+      /* @__PURE__ */ t("p", { className: c("text-xs text-muted-foreground", i), children: l })
+    ] })
+  ] });
+}, R = ({ stats: r }) => /* @__PURE__ */ t("div", { className: "grid gap-6 md:grid-cols-2 lg:grid-cols-4", children: r.map((e) => /* @__PURE__ */ t(
+  C,
+  {
+    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
+)) }), 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"
+}, K = (r) => r === "up" ? "↑" : r === "down" ? "↓" : "", z = (r) => r === "up" ? "text-green-600" : r === "down" ? "text-red-600" : "text-muted-foreground", S = ({ title: r, value: e, unit: n, subtitle: a, icon: d, iconSize: l = "sm", trend: i, trendValue: o, color: m = "blue", children: u }) => {
+  const p = d;
+  return /* @__PURE__ */ t(x, { className: "relative overflow-hidden bg-card border shadow-lg hover:shadow-xl transition-all duration-300", children: /* @__PURE__ */ s(f, { className: "pt-6", children: [
+    /* @__PURE__ */ s("div", { className: "flex items-start justify-between", children: [
+      /* @__PURE__ */ s("div", { children: [
+        /* @__PURE__ */ t(g, { className: "text-sm font-medium text-muted-foreground", children: r }),
+        /* @__PURE__ */ s("div", { className: "flex items-baseline space-x-2 mt-1", children: [
+          /* @__PURE__ */ t("div", { className: "text-2xl font-bold text-card-foreground", children: typeof e == "number" ? e.toFixed(1) : e }),
+          n && /* @__PURE__ */ t("div", { className: "text-sm text-muted-foreground font-medium", children: n })
+        ] }),
+        a && /* @__PURE__ */ t("div", { className: "mt-1 text-xs text-muted-foreground", children: a }),
+        i && o && /* @__PURE__ */ s("div", { className: `flex items-center space-x-1 mt-2 text-xs ${z(i)}`, children: [
+          /* @__PURE__ */ t("span", { children: K(i) }),
+          /* @__PURE__ */ t("span", { children: o })
+        ] })
+      ] }),
+      /* @__PURE__ */ t("div", { className: `p-2 rounded-lg ${w[m]} shadow-lg`, children: /* @__PURE__ */ t(p, { className: y[l] }) })
+    ] }),
+    u && /* @__PURE__ */ t("div", { className: "mt-4", children: u })
+  ] }) });
+};
+export {
+  C as K,
+  S as M,
+  R as a
+};

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

@@ -1,23 +1,36 @@
 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";
+    readonly blue: "bg-gradient-to-br from-blue-500 to-cyan-500 text-white";
+    readonly green: "bg-gradient-to-br from-green-500 to-emerald-500 text-white";
+    readonly orange: "bg-gradient-to-br from-orange-500 to-yellow-500 text-white";
+    readonly red: "bg-gradient-to-br from-red-500 to-pink-500 text-white";
+    readonly purple: "bg-gradient-to-br from-purple-500 to-indigo-500 text-white";
+    readonly accent: "bg-accent/10 text-accent";
+    readonly success: "bg-success/10 text-success";
+    readonly info: "bg-info/10 text-info";
+    readonly warning: "bg-warning/10 text-warning";
+    readonly destructive: "bg-destructive/10 text-destructive";
 };
 export type MetricCardColor = keyof typeof colorClasses;
+declare const iconSizeClasses: {
+    readonly sm: "size-4";
+    readonly md: "size-5";
+    readonly lg: "size-6";
+};
+export type MetricCardIconSize = keyof typeof iconSizeClasses;
 export interface MetricCardProps {
     title: string;
     value: string | number;
     unit?: string;
+    subtitle?: string;
     icon: LucideIcon;
+    iconSize?: MetricCardIconSize;
     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 declare const MetricCard: ({ title, value, unit, subtitle, icon, iconSize, 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

@@ -1 +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"}
+{"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;;;;;;;;;;;CAWR,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,QAAA,MAAM,eAAe;;;;CAIX,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,eAAe,CAAC;AAE9D,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,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,sFAAsG,eAAe,4CA6B/I,CAAC"}

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

@@ -1,4 +1,4 @@
-import { K as s, a as d, M as i } from "../../../MetricCard-88djqC4o.js";
+import { K as s, a as d, M as i } from "../../../MetricCard-B1Y-27_U.js";
 export {
   s as KpiCard,
   d as KpiCards,

package/dist/components/core/index.js

@@ -1,4 +1,4 @@
-import { K as r, a as s, M as t } from "../../MetricCard-88djqC4o.js";
+import { K as r, a as s, M as t } from "../../MetricCard-B1Y-27_U.js";
 import { D as T, S as l } from "../../DateRangePicker-rrXXEYz8.js";
 import { C as i, a as d, E as n, L as p } from "../../LoadingState-CqRLmkxn.js";
 import { D as c, T as m, a as f, b as x, c as C, d as D, e as g, u as k } from "../../DataTable-CjFA9p4V.js";

package/dist/components/index.js

@@ -1,4 +1,4 @@
-import { K as s, a as t, M as r } from "../MetricCard-88djqC4o.js";
+import { K as s, a as t, M as r } from "../MetricCard-B1Y-27_U.js";
 import { D as l, S as i } from "../DateRangePicker-rrXXEYz8.js";
 import { C as d, a as n, E as c, L as p } from "../LoadingState-CqRLmkxn.js";
 import { D as C, T as S, a as f, b as m, c as x, d as g, e as u, u as D } from "../DataTable-CjFA9p4V.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krosoft/react",
-  "version": "0.0.76",
+  "version": "0.0.78",
   "description": "Krosoft shared React package",
   "type": "module",
   "scripts": {
@@ -31,7 +31,7 @@
   },
   "peerDependencies": {
     "@krosoft/core": ">=0.0.1",
-    "next-themes": ">=0.4.0",
+    "next-themes": ">=0.4.6",
     "react": ">=18.3.1",
     "react-i18next": ">=17.0.8"
   },
@@ -51,14 +51,14 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "date-fns": "^4.2.1",
+    "date-fns": "^4.3.0",
     "lucide-react": "^1.16.0",
     "react-day-picker": "^10.0.1",
     "tailwind-merge": "^2.6.1"
   },
   "devDependencies": {
     "@krosoft/core": "^0.0.37",
-    "@krosoft/tooling-eslint-react": "^0.0.18",
+    "@krosoft/tooling-eslint-react": "^0.0.20",
     "@krosoft/tooling-prettier": "^0.0.14",
     "@krosoft/tooling-tsconfig-react": "^0.0.10",
     "@storybook/addon-essentials": "^8.6.18",

package/dist/MetricCard-88djqC4o.js

@@ -1,66 +0,0 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import "./calendar-BMReToKR.js";
-import "./checkbox-BI6Lm_p-.js";
-import "./floating-ui.react-dom-BPCyLQfI.js";
-import { C as m, d as p, e as u, a as f } from "./card-7XPLAra3.js";
-import { c as n } from "./index-gWiv5-6R.js";
-import "./select-B-hcmC3K.js";
-import g from "react";
-import { formatNumber as N } from "@krosoft/core/helpers";
-import { useTranslation as h } from "react-i18next";
-const b = ({ titleKey: t, value: e, valueClassName: i, icon: d, iconClassName: s, description: l, descriptionClassName: c, onClick: a }) => {
-  const { t: x } = h();
-  return /* @__PURE__ */ o(m, { className: n(a ? "hover:border-primary cursor-pointer" : ""), onClick: a, children: [
-    /* @__PURE__ */ o(p, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-      /* @__PURE__ */ r(u, { className: "text-sm font-medium", children: x(t) }),
-      g.createElement(d, {
-        className: n("size-6 text-muted-foreground", s)
-      })
-    ] }),
-    /* @__PURE__ */ o(f, { children: [
-      /* @__PURE__ */ r("div", { className: n("text-2xl font-bold", i), children: N(e) }),
-      /* @__PURE__ */ r("p", { className: n("text-xs text-muted-foreground", c), children: l })
-    ] })
-  ] });
-}, F = ({ 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
-)) }), C = {
-  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"
-}, v = (t) => t === "up" ? "↗" : t === "down" ? "↘" : "→", w = (t) => t === "up" ? "text-green-600" : t === "down" ? "text-red-600" : "text-muted-foreground", H = ({ 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(p, { className: "flex flex-row items-center justify-between space-y-0 pb-2 relative z-10", children: [
-    /* @__PURE__ */ r(u, { className: "text-sm font-medium text-muted-foreground", children: t }),
-    /* @__PURE__ */ r("div", { className: `p-2 rounded-lg bg-gradient-to-br ${C[c]} shadow-lg`, children: /* @__PURE__ */ r(d, { className: "size-4 text-white" }) })
-  ] }),
-  /* @__PURE__ */ o(f, { 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: v(s) }),
-      /* @__PURE__ */ r("span", { children: l })
-    ] }),
-    a && /* @__PURE__ */ r("div", { className: "mt-4", children: a })
-  ] })
-] });
-export {
-  b as K,
-  H as M,
-  F as a
-};