@hybridcore/ui 1.5.77 → 1.5.79

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

@@ -1,97 +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",
-  className: 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,
-    {
-      sx: { ...(() => {
-        const a = {
-          p: 3,
-          borderRadius: 2,
-          boxShadow: 1,
-          transition: "all 0.3s",
-          "&:hover": { boxShadow: 3 },
-          border: 1
+    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)
         };
-        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"
-            };
+      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: {
+        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" } })
         }
-      })(), position: "relative", overflow: "hidden" },
-      className: x,
+      )
+    }
+  );
+  return /* @__PURE__ */ a(
+    R,
+    {
+      sx: {
+        ...v(),
+        position: "relative",
+        overflow: "hidden",
+        ...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: {
@@ -103,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: {
@@ -134,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: {
@@ -155,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" } })
                 }
               ) })
             ]
@@ -166,5 +186,5 @@ const V = ({
   );
 };
 export {
-  V as MetricCard
+  W as MetricCard
 };

package/dist/main.d.ts

@@ -663,7 +663,7 @@ 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 const MetricCard: ({ label, value, change, changeType, trend, icon: Icon, iconPosition, description, variant, sx, }: MetricCardProps) => JSX_2.Element;
 
 export declare interface MetricCardProps {
     label: string;
@@ -672,10 +672,16 @@ 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;
-    className?: string;
+    sx?: SxProps<Theme_2>;
 }
 
 export declare type MetricChangeType = "percentage" | "absolute";

package/package.json

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