@hybridcore/ui 1.5.74 → 1.5.77

package/dist/components/metric-card/index.js

@@ -0,0 +1,170 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { TrendingUp as w, TrendingDown as v, Remove as S } from "@mui/icons-material";
+import { useTheme as C, Card as z, Box as o, Stack as m, Typography as c, alpha as t } from "@mui/material";
+const V = ({
+  label: g,
+  value: h,
+  change: d,
+  changeType: u = "percentage",
+  trend: l,
+  icon: n,
+  iconPosition: s = "right",
+  description: p,
+  variant: b = "default",
+  className: x
+}) => {
+  const e = C(), f = () => l === "up" ? /* @__PURE__ */ r(w, { sx: { fontSize: 16 } }) : l === "down" ? /* @__PURE__ */ r(v, { sx: { fontSize: 16 } }) : /* @__PURE__ */ r(S, { sx: { fontSize: 16 } }), y = () => l === "up" ? {
+    color: e.palette.success.main,
+    bgcolor: t(e.palette.success.main, 0.1)
+  } : l === "down" ? {
+    color: e.palette.error.main,
+    bgcolor: t(e.palette.error.main, 0.1)
+  } : {
+    color: e.palette.text.secondary,
+    bgcolor: e.palette.action.hover
+  };
+  return /* @__PURE__ */ i(
+    z,
+    {
+      sx: { ...(() => {
+        const a = {
+          p: 3,
+          borderRadius: 2,
+          boxShadow: 1,
+          transition: "all 0.3s",
+          "&:hover": { boxShadow: 3 },
+          border: 1
+        };
+        switch (b) {
+          case "primary":
+            return {
+              ...a,
+              bgcolor: t(e.palette.primary.main, 0.05),
+              borderColor: t(e.palette.primary.main, 0.2)
+            };
+          case "success":
+            return {
+              ...a,
+              bgcolor: t(e.palette.success.main, 0.05),
+              borderColor: t(e.palette.success.main, 0.2)
+            };
+          case "warning":
+            return {
+              ...a,
+              bgcolor: t(e.palette.warning.main, 0.05),
+              borderColor: t(e.palette.warning.main, 0.2)
+            };
+          case "danger":
+            return {
+              ...a,
+              bgcolor: t(e.palette.error.main, 0.05),
+              borderColor: t(e.palette.error.main, 0.2)
+            };
+          default:
+            return {
+              ...a,
+              bgcolor: "background.paper",
+              borderColor: "divider"
+            };
+        }
+      })(), position: "relative", overflow: "hidden" },
+      className: x,
+      children: [
+        n && s === "watermark" && /* @__PURE__ */ r(
+          o,
+          {
+            sx: {
+              position: "absolute",
+              right: -20,
+              bottom: -20,
+              opacity: 0.05,
+              transform: "rotate(-15deg)",
+              pointerEvents: "none"
+            },
+            children: /* @__PURE__ */ r(n, { sx: { fontSize: 120, color: "text.primary" } })
+          }
+        ),
+        /* @__PURE__ */ i(
+          m,
+          {
+            direction: "row",
+            justifyContent: "space-between",
+            alignItems: "flex-start",
+            children: [
+              n && s === "left" && /* @__PURE__ */ r(o, { mr: 2, children: /* @__PURE__ */ r(
+                o,
+                {
+                  sx: {
+                    width: 48,
+                    height: 48,
+                    borderRadius: "50%",
+                    bgcolor: "action.hover",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: /* @__PURE__ */ r(n, { sx: { fontSize: 24, color: "text.secondary" } })
+                }
+              ) }),
+              /* @__PURE__ */ i(o, { flex: 1, children: [
+                /* @__PURE__ */ r(c, { variant: "subtitle2", color: "text.secondary", mb: 0.5, children: g }),
+                /* @__PURE__ */ r(
+                  c,
+                  {
+                    variant: "h4",
+                    fontWeight: "bold",
+                    color: "text.primary",
+                    mb: 1,
+                    children: h
+                  }
+                ),
+                d !== void 0 && /* @__PURE__ */ i(m, { direction: "row", alignItems: "center", spacing: 1, children: [
+                  /* @__PURE__ */ i(
+                    o,
+                    {
+                      sx: {
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: 0.5,
+                        px: 1,
+                        py: 0.5,
+                        borderRadius: 10,
+                        typography: "caption",
+                        fontWeight: "medium",
+                        ...y()
+                      },
+                      children: [
+                        f(),
+                        d,
+                        u === "percentage" ? "%" : ""
+                      ]
+                    }
+                  ),
+                  p && /* @__PURE__ */ r(c, { variant: "caption", color: "text.secondary", children: p })
+                ] })
+              ] }),
+              n && s === "right" && /* @__PURE__ */ r(o, { ml: 2, children: /* @__PURE__ */ r(
+                o,
+                {
+                  sx: {
+                    width: 48,
+                    height: 48,
+                    borderRadius: "50%",
+                    bgcolor: "action.hover",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: /* @__PURE__ */ r(n, { sx: { fontSize: 24, color: "text.secondary" } })
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  V as MetricCard
+};

package/dist/main.d.ts

@@ -663,6 +663,32 @@ export declare namespace Map_2 {
     }
 }
 
+export declare const MetricCard: ({ label, value, change, changeType, trend, icon: Icon, iconPosition, description, variant, className, }: MetricCardProps) => JSX_2.Element;
+
+export declare interface MetricCardProps {
+    label: string;
+    value: string | number;
+    change?: number;
+    changeType?: MetricChangeType;
+    trend?: MetricTrend;
+    icon?: React.ElementType;
+    iconPosition?: "left" | "right" | "watermark";
+    description?: string;
+    variant?: MetricVariant;
+    className?: string;
+}
+
+export declare type MetricChangeType = "percentage" | "absolute";
+
+export declare type MetricTrend = "up" | "down" | "neutral";
+
+export declare type MetricVariant =
+| "default"
+| "primary"
+| "success"
+| "warning"
+| "danger";
+
 declare type MousePosition = {
     top: number;
     left: number;

package/dist/main.js

@@ -26,17 +26,18 @@ import { S as Oe } from "./utils-Bq0ye5vf.js";
 import { LinearIndicator as Se } from "./components/linear-indicator/index.js";
 import { Loading as He } from "./components/loading/index.js";
 import { i as Be } from "./index-JrtqxUdI.js";
-import { PaginatedList as Ie } from "./components/paginated-list/index.js";
-import { PhoneInput as je } from "./components/phone-input/index.js";
-import { SearchInput as We } from "./components/search-input/index.js";
-import { Tabs as Ue } from "./components/tabs/index.js";
-import { TemplateFilters as Ze } from "./components/template-filters/index.js";
-import { TemplateForm as Je } from "./components/template-form/index.js";
-import { TemplatePropertyFilters as _e } from "./components/template-property-filters/index.js";
-import { Property as Ge } from "./components/template-property-filters/property.js";
-import { TreeSelect as Qe } from "./components/tree-select/index.js";
-import { TreeViewFilter as Xe } from "./components/treeview-filter/index.js";
-import { Uploader as er } from "./components/uploader/index.js";
+import { MetricCard as Ie } from "./components/metric-card/index.js";
+import { PaginatedList as je } from "./components/paginated-list/index.js";
+import { PhoneInput as We } from "./components/phone-input/index.js";
+import { SearchInput as Ue } from "./components/search-input/index.js";
+import { Tabs as Ze } from "./components/tabs/index.js";
+import { TemplateFilters as Je } from "./components/template-filters/index.js";
+import { TemplateForm as _e } from "./components/template-form/index.js";
+import { TemplatePropertyFilters as Ge } from "./components/template-property-filters/index.js";
+import { Property as Qe } from "./components/template-property-filters/property.js";
+import { TreeSelect as Xe } from "./components/tree-select/index.js";
+import { TreeViewFilter as er } from "./components/treeview-filter/index.js";
+import { Uploader as sr } from "./components/uploader/index.js";
 import { a as dt } from "./objectWithoutPropertiesLoose-DJteAcBH.js";
 import C from "dayjs";
 import { h as U, j as z } from "./createTheme-DrgvKMA_.js";
@@ -418,19 +419,20 @@ export {
   He as Loading,
   Ct as LocalizationProvider,
   Be as Map,
-  Ie as PaginatedList,
-  je as PhoneInput,
-  Ge as PropertyFilterInput,
-  We as SearchInput,
+  Ie as MetricCard,
+  je as PaginatedList,
+  We as PhoneInput,
+  Qe as PropertyFilterInput,
+  Ue as SearchInput,
   ie as SecurityLevel,
-  Ue as Tabs,
-  Ze as TemplateFilters,
-  Je as TemplateForm,
-  _e as TemplatePropertyFilters,
+  Ze as Tabs,
+  Je as TemplateFilters,
+  _e as TemplateForm,
+  Ge as TemplatePropertyFilters,
   Ht as ThemeProvider,
-  Qe as TreeSelect,
-  Xe as TreeViewFilter,
-  er as Uploader,
+  Xe as TreeSelect,
+  er as TreeViewFilter,
+  sr as Uploader,
   Rt as alert,
   Xt as confirm,
   Ft as createTheme

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hybridcore/ui",
   "description": "Hybrid Core UI Library",
-  "version": "1.5.74",
+  "version": "1.5.77",
   "author": "Hybrid Core",
   "license": "ISC",
   "type": "module",