@hybridcore/ui 1.5.78 → 1.5.79

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

@@ -1,101 +1,117 @@
-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 = ({
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { TrendingUp as C, TrendingDown as S, Remove as z } from "@mui/icons-material";
+import { useTheme as j, Card as R, Stack as h, Box as o, Typography as s, alpha as t } from "@mui/material";
+const W = ({
   label: g,
-  value: h,
+  value: u,
   change: d,
-  changeType: u = "percentage",
-  trend: l,
-  icon: n,
-  iconPosition: s = "right",
+  changeType: m = "percentage",
+  trend: c,
+  icon: i,
+  iconPosition: n = "right",
   description: p,
   variant: b = "default",
-  sx: x
+  sx: f
 }) => {
-  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)
+  const r = j(), x = () => c === "up" ? /* @__PURE__ */ e(C, { sx: { fontSize: 16 } }) : c === "down" ? /* @__PURE__ */ e(S, { sx: { fontSize: 16 } }) : /* @__PURE__ */ e(z, { sx: { fontSize: 16 } }), y = () => c === "up" ? {
+    color: r.palette.success.main,
+    bgcolor: t(r.palette.success.main, 0.1)
+  } : c === "down" ? {
+    color: r.palette.error.main,
+    bgcolor: t(r.palette.error.main, 0.1)
   } : {
-    color: e.palette.text.secondary,
-    bgcolor: e.palette.action.hover
-  };
-  return /* @__PURE__ */ i(
-    z,
+    color: r.palette.text.secondary,
+    bgcolor: r.palette.action.hover
+  }, v = () => {
+    const l = {
+      p: 3,
+      borderRadius: 2,
+      boxShadow: 1,
+      transition: "all 0.3s",
+      "&:hover": { boxShadow: 3 },
+      border: 1
+    };
+    switch (b) {
+      case "primary":
+        return {
+          ...l,
+          bgcolor: t(r.palette.primary.main, 0.05),
+          borderColor: t(r.palette.primary.main, 0.2)
+        };
+      case "success":
+        return {
+          ...l,
+          bgcolor: t(r.palette.success.main, 0.05),
+          borderColor: t(r.palette.success.main, 0.2)
+        };
+      case "warning":
+        return {
+          ...l,
+          bgcolor: t(r.palette.warning.main, 0.05),
+          borderColor: t(r.palette.warning.main, 0.2)
+        };
+      case "danger":
+        return {
+          ...l,
+          bgcolor: t(r.palette.error.main, 0.05),
+          borderColor: t(r.palette.error.main, 0.2)
+        };
+      default:
+        return {
+          ...l,
+          bgcolor: "background.paper",
+          borderColor: "divider"
+        };
+    }
+  }, w = () => !i || !["top-left", "top-right", "bottom-left", "bottom-right"].includes(
+    n
+  ) ? null : /* @__PURE__ */ e(
+    o,
     {
       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: "absolute",
+        top: n.includes("top") ? 24 : void 0,
+        bottom: n.includes("bottom") ? 24 : void 0,
+        left: n.includes("left") ? 24 : void 0,
+        right: n.includes("right") ? 24 : void 0,
+        zIndex: 1
+      },
+      children: /* @__PURE__ */ e(
+        o,
+        {
+          sx: {
+            width: 48,
+            height: 48,
+            borderRadius: "50%",
+            bgcolor: "action.hover",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ e(i, { sx: { fontSize: 24, color: "text.secondary" } })
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ a(
+    R,
+    {
+      sx: {
+        ...v(),
         position: "relative",
         overflow: "hidden",
-        ...x
+        ...f
       },
       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,
+        w(),
+        /* @__PURE__ */ a(
+          h,
           {
             direction: "row",
             justifyContent: "space-between",
             alignItems: "flex-start",
             children: [
-              n && s === "left" && /* @__PURE__ */ r(o, { mr: 2, children: /* @__PURE__ */ r(
+              i && n === "left" && /* @__PURE__ */ e(o, { mr: 2, children: /* @__PURE__ */ e(
                 o,
                 {
                   sx: {
@@ -107,23 +123,23 @@ const V = ({
                     alignItems: "center",
                     justifyContent: "center"
                   },
-                  children: /* @__PURE__ */ r(n, { sx: { fontSize: 24, color: "text.secondary" } })
+                  children: /* @__PURE__ */ e(i, { 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,
+              /* @__PURE__ */ a(o, { flex: 1, children: [
+                /* @__PURE__ */ e(s, { variant: "subtitle2", color: "text.secondary", mb: 0.5, children: g }),
+                /* @__PURE__ */ e(
+                  s,
                   {
                     variant: "h4",
                     fontWeight: "bold",
                     color: "text.primary",
                     mb: 1,
-                    children: h
+                    children: u
                   }
                 ),
-                d !== void 0 && /* @__PURE__ */ i(m, { direction: "row", alignItems: "center", spacing: 1, children: [
-                  /* @__PURE__ */ i(
+                d !== void 0 && /* @__PURE__ */ a(h, { direction: "row", alignItems: "center", spacing: 1, children: [
+                  /* @__PURE__ */ a(
                     o,
                     {
                       sx: {
@@ -138,16 +154,16 @@ const V = ({
                         ...y()
                       },
                       children: [
-                        f(),
+                        x(),
                         d,
-                        u === "percentage" ? "%" : ""
+                        m === "percentage" ? "%" : ""
                       ]
                     }
                   ),
-                  p && /* @__PURE__ */ r(c, { variant: "caption", color: "text.secondary", children: p })
+                  p && /* @__PURE__ */ e(s, { variant: "caption", color: "text.secondary", children: p })
                 ] })
               ] }),
-              n && s === "right" && /* @__PURE__ */ r(o, { ml: 2, children: /* @__PURE__ */ r(
+              i && n === "right" && /* @__PURE__ */ e(o, { ml: 2, children: /* @__PURE__ */ e(
                 o,
                 {
                   sx: {
@@ -159,7 +175,7 @@ const V = ({
                     alignItems: "center",
                     justifyContent: "center"
                   },
-                  children: /* @__PURE__ */ r(n, { sx: { fontSize: 24, color: "text.secondary" } })
+                  children: /* @__PURE__ */ e(i, { sx: { fontSize: 24, color: "text.secondary" } })
                 }
               ) })
             ]
@@ -170,5 +186,5 @@ const V = ({
   );
 };
 export {
-  V as MetricCard
+  W as MetricCard
 };

package/dist/main.d.ts

@@ -672,7 +672,13 @@ export declare interface MetricCardProps {
     changeType?: MetricChangeType;
     trend?: MetricTrend;
     icon?: React.ElementType;
-    iconPosition?: "left" | "right" | "watermark";
+    iconPosition?:
+    | "left"
+    | "right"
+    | "top-left"
+    | "top-right"
+    | "bottom-left"
+    | "bottom-right";
     description?: string;
     variant?: MetricVariant;
     sx?: SxProps<Theme_2>;

package/package.json

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