@hybridcore/ui 1.5.78 → 1.5.80

package/dist/components/charts/highlighting-line-data/styled.js

@@ -0,0 +1,12 @@
+import { styled as t } from "@mui/material";
+const o = t("div", {
+  name: "MuiHighlightLineChart",
+  slot: "Root"
+})(({ ownerState: i }) => ({
+  position: "relative",
+  width: i.width,
+  height: i.height
+}));
+export {
+  o as HighlightLineChartRoot
+};

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

@@ -1,174 +1,60 @@
-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",
-  sx: 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",
-        ...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,
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { Stack as a } from "@mui/material";
+import * as g from "react";
+import { useMetricCardLogic as I } from "./logic.js";
+import { MetricCardRoot as u, MetricCardCornerIconContainer as w, MetricCardIconContainer as d, MetricCardContent as S, MetricCardLabel as v, MetricCardValue as y, MetricCardTrendContainer as b, MetricCardDescription as z } from "./styled.js";
+const k = g.forwardRef(
+  (s, l) => {
+    const {
+      label: h,
+      value: C,
+      change: i,
+      changeType: f,
+      Icon: t,
+      iconPosition: o,
+      description: c,
+      sx: p,
+      other: m,
+      ownerState: e,
+      TrendIcon: x,
+      showCornerIcon: M
+    } = I(s);
+    return /* @__PURE__ */ n(u, { ref: l, ownerState: e, sx: p, ...m, children: [
+      M && t && /* @__PURE__ */ r(w, { ownerState: e, children: /* @__PURE__ */ r(t, { sx: { fontSize: 24, color: "text.secondary" } }) }),
+      /* @__PURE__ */ n(
+        a,
+        {
+          direction: "row",
+          justifyContent: "space-between",
+          alignItems: "flex-start",
+          children: [
+            t && o === "left" && /* @__PURE__ */ r(d, { ownerState: e, children: /* @__PURE__ */ r(t, { sx: { fontSize: 24, color: "text.secondary" } }) }),
+            /* @__PURE__ */ n(S, { ownerState: e, children: [
+              /* @__PURE__ */ r(v, { variant: "subtitle2", ownerState: e, children: h }),
+              /* @__PURE__ */ r(y, { variant: "h4", ownerState: e, children: C }),
+              i !== void 0 && /* @__PURE__ */ n(a, { direction: "row", alignItems: "center", spacing: 1, children: [
+                /* @__PURE__ */ n(b, { ownerState: e, children: [
+                  /* @__PURE__ */ r(x, { sx: { fontSize: 16 } }),
+                  i,
+                  f === "percentage" ? "%" : ""
+                ] }),
+                c && /* @__PURE__ */ r(
+                  z,
                   {
-                    variant: "h4",
-                    fontWeight: "bold",
-                    color: "text.primary",
-                    mb: 1,
-                    children: h
+                    variant: "caption",
+                    ownerState: e,
+                    children: c
                   }
-                ),
-                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" } })
-                }
-              ) })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
+                )
+              ] })
+            ] }),
+            t && o === "right" && /* @__PURE__ */ r(d, { ownerState: e, children: /* @__PURE__ */ r(t, { sx: { fontSize: 24, color: "text.secondary" } }) })
+          ]
+        }
+      )
+    ] });
+  }
+);
 export {
-  V as MetricCard
+  k as MetricCard
 };

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

@@ -0,0 +1,46 @@
+import { Remove as f, TrendingUp as T, TrendingDown as w } from "@mui/icons-material";
+import { useThemeProps as b } from "@mui/material";
+const I = (s) => {
+  const n = b({ props: s, name: "MuiMetricCard" }), {
+    label: p,
+    value: a,
+    change: d,
+    changeType: r = "percentage",
+    trend: e,
+    icon: i,
+    iconPosition: o = "right",
+    description: g,
+    variant: c = "default",
+    sx: l,
+    ...m
+  } = n, h = {
+    ...n,
+    changeType: r,
+    iconPosition: o,
+    variant: c
+  };
+  let t = f;
+  e === "up" ? t = T : e === "down" && (t = w);
+  const u = !!i && ["top-left", "top-right", "bottom-left", "bottom-right"].includes(
+    o || ""
+  );
+  return {
+    label: p,
+    value: a,
+    change: d,
+    changeType: r,
+    trend: e,
+    Icon: i,
+    iconPosition: o,
+    description: g,
+    variant: c,
+    sx: l,
+    other: m,
+    ownerState: h,
+    TrendIcon: t,
+    showCornerIcon: u
+  };
+};
+export {
+  I as useMetricCardLogic
+};

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

@@ -0,0 +1,136 @@
+import { styled as n, alpha as i, Stack as l, Typography as e } from "@mui/material";
+const p = n("div", {
+  name: "MuiMetricCard",
+  slot: "Root"
+})(({ theme: o, ownerState: a }) => {
+  const t = {
+    position: "relative",
+    overflow: "hidden",
+    padding: o.spacing(3),
+    borderRadius: o.shape.borderRadius * 2,
+    boxShadow: o.shadows[1],
+    transition: "all 0.3s",
+    "&:hover": { boxShadow: o.shadows[3] },
+    border: `1px solid ${o.palette.divider}`,
+    backgroundColor: o.palette.background.paper
+  };
+  let r = {};
+  switch (a.variant) {
+    case "primary":
+      r = {
+        backgroundColor: i(o.palette.primary.main, 0.05),
+        borderColor: i(o.palette.primary.main, 0.2)
+      };
+      break;
+    case "success":
+      r = {
+        backgroundColor: i(o.palette.success.main, 0.05),
+        borderColor: i(o.palette.success.main, 0.2)
+      };
+      break;
+    case "warning":
+      r = {
+        backgroundColor: i(o.palette.warning.main, 0.05),
+        borderColor: i(o.palette.warning.main, 0.2)
+      };
+      break;
+    case "danger":
+      r = {
+        backgroundColor: i(o.palette.error.main, 0.05),
+        borderColor: i(o.palette.error.main, 0.2)
+      };
+      break;
+    default:
+      r = {
+        backgroundColor: o.palette.background.paper,
+        borderColor: o.palette.divider
+      };
+      break;
+  }
+  return {
+    ...t,
+    ...r
+  };
+}), g = n(l, {
+  name: "MuiMetricCard",
+  slot: "Content"
+})(() => ({
+  flex: 1
+})), u = n(e, {
+  name: "MuiMetricCard",
+  slot: "Label"
+})(({ theme: o }) => ({
+  color: o.palette.text.secondary,
+  marginBottom: o.spacing(0.5)
+})), C = n(e, {
+  name: "MuiMetricCard",
+  slot: "Value"
+})(({ theme: o }) => ({
+  color: o.palette.text.primary,
+  fontWeight: "bold",
+  marginBottom: o.spacing(1)
+})), b = n("div", {
+  name: "MuiMetricCard",
+  slot: "TrendContainer"
+})(({ theme: o, ownerState: a }) => {
+  let t = o.palette.text.secondary, r = o.palette.action.hover;
+  return a.trend === "up" ? (t = o.palette.success.main, r = i(o.palette.success.main, 0.1)) : a.trend === "down" && (t = o.palette.error.main, r = i(o.palette.error.main, 0.1)), {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: o.spacing(0.5),
+    padding: o.spacing(0.5, 1),
+    borderRadius: 10,
+    ...o.typography.caption,
+    fontWeight: 500,
+    color: t,
+    backgroundColor: r
+  };
+}), M = n(e, {
+  name: "MuiMetricCard",
+  slot: "Description"
+})(({ theme: o }) => ({
+  color: o.palette.text.secondary
+})), y = n("div", {
+  name: "MuiMetricCard",
+  slot: "Icon"
+})(({ theme: o, ownerState: a }) => ({
+  width: 48,
+  height: 48,
+  borderRadius: "50%",
+  backgroundColor: o.palette.action.hover,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  marginRight: a.iconPosition === "left" ? o.spacing(2) : 0,
+  marginLeft: a.iconPosition === "right" ? o.spacing(2) : 0
+})), v = n("div", {
+  name: "MuiMetricCard",
+  slot: "CornerIcon"
+})(({ theme: o, ownerState: a }) => {
+  var t, r, c, d;
+  return {
+    position: "absolute",
+    top: (t = a.iconPosition) != null && t.includes("top") ? 24 : void 0,
+    bottom: (r = a.iconPosition) != null && r.includes("bottom") ? 24 : void 0,
+    left: (c = a.iconPosition) != null && c.includes("left") ? 24 : void 0,
+    right: (d = a.iconPosition) != null && d.includes("right") ? 24 : void 0,
+    zIndex: 1,
+    width: 48,
+    height: 48,
+    borderRadius: "50%",
+    backgroundColor: o.palette.action.hover,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  };
+});
+export {
+  g as MetricCardContent,
+  v as MetricCardCornerIconContainer,
+  M as MetricCardDescription,
+  y as MetricCardIconContainer,
+  u as MetricCardLabel,
+  p as MetricCardRoot,
+  b as MetricCardTrendContainer,
+  C as MetricCardValue
+};

package/dist/components/paginated-list/index.js

@@ -1,122 +1,95 @@
-import { jsxs as c, jsx as o, Fragment as p } from "react/jsx-runtime";
-import { List as y, Box as j, Divider as P, ListItem as z, ListItemText as A, Typography as B, Button as u, TablePagination as F } from "@mui/material";
-import G from "lodash";
-import { useState as g } from "react";
-import { Container as M } from "../container/index.js";
-const U = [5, 10, 25, 50];
-function K({
-  title: f,
-  data: l = [],
-  payload: n,
-  totalCount: v,
-  onChange: s,
-  onItemClick: t,
-  sx: w
-}) {
-  const [m, h] = g(0), [b, L] = g(5), [R, x] = g([]), a = (n == null ? void 0 : n.pageNumber) !== void 0 ? n.pageNumber : m, i = (n == null ? void 0 : n.rows) !== void 0 ? n.rows : b, T = (e, r) => {
-    h(r), s && s({ ...n, pageNumber: r, rows: i });
-  }, _ = (e) => {
-    const r = parseInt(e.target.value, 10);
-    L(r), h(0), s && s({ ...n, pageNumber: 0, rows: r });
-  }, D = (e) => (r) => {
-    r.stopPropagation(), x((d) => [...d, e]);
-  }, N = (e) => (r) => {
-    r.stopPropagation(), x((d) => d.filter((O) => O !== e));
-  }, S = s ? v || 0 : l.length, E = s ? l : l.slice(a * i, (a + 1) * i);
-  return /* @__PURE__ */ c(
-    M,
-    {
-      title: f,
-      headerSx: {
-        py: 2,
-        px: 3
-      },
-      contentSx: {
-        p: "0px !important",
-        display: "flex",
-        flexDirection: "column",
-        flex: 1,
-        overflow: "hidden"
-      },
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-        ...w
-      },
-      children: [
-        /* @__PURE__ */ o(y, { disablePadding: !0, sx: { flex: 1, overflowY: "auto" }, children: E.map((e, r) => /* @__PURE__ */ c(j, { children: [
-          r === 0 && /* @__PURE__ */ o(P, { component: "li" }),
-          /* @__PURE__ */ o(
-            z,
-            {
-              onClick: () => t == null ? void 0 : t(e),
-              sx: {
-                cursor: t ? "pointer" : "default",
-                "&:hover": t ? { backgroundColor: "action.hover" } : void 0
-              },
-              children: /* @__PURE__ */ o(
-                A,
+import { jsxs as i, jsx as n, Fragment as a } from "react/jsx-runtime";
+import { Box as f, Divider as s, ListItem as w, ListItemIcon as T, ListItemText as R, Typography as _, Button as c, TablePagination as b } from "@mui/material";
+import I from "lodash";
+import { usePaginatedListLogic as O } from "./logic.js";
+import { PaginatedListRoot as k, PaginatedListHeader as D, PaginatedListContent as E, PaginatedListList as S, PaginatedListPagination as j } from "./styled.js";
+const z = [5, 10, 25, 50];
+function M(l) {
+  const {
+    title: t,
+    displayData: p,
+    count: g,
+    page: h,
+    rowsPerPage: P,
+    expanded: L,
+    handleChangePage: x,
+    handleChangeRowsPerPage: m,
+    readMore: u,
+    showLess: y,
+    onItemClick: o,
+    ownerState: r,
+    sx: v,
+    other: C
+  } = O(l);
+  return /* @__PURE__ */ i(k, { ownerState: r, sx: v, elevation: 4, ...C, children: [
+    t && /* @__PURE__ */ n(D, { title: t, ownerState: r }),
+    /* @__PURE__ */ i(E, { ownerState: r, children: [
+      /* @__PURE__ */ n(S, { disablePadding: !0, ownerState: r, children: p.map((e, d) => /* @__PURE__ */ i(f, { children: [
+        d === 0 && /* @__PURE__ */ n(s, { component: "li" }),
+        /* @__PURE__ */ i(
+          w,
+          {
+            onClick: () => o == null ? void 0 : o(e),
+            sx: {
+              cursor: o ? "pointer" : "default",
+              "&:hover": o ? { backgroundColor: "action.hover" } : void 0
+            },
+            children: [
+              e.icon && /* @__PURE__ */ n(T, { children: e.icon }),
+              /* @__PURE__ */ n(
+                R,
                 {
                   primary: e.title,
                   secondaryTypographyProps: {
                     component: "div"
                   },
-                  secondary: /* @__PURE__ */ o(p, { children: /* @__PURE__ */ o(B, { variant: "body2", children: R.includes(e.id) ? /* @__PURE__ */ c(p, { children: [
+                  secondary: /* @__PURE__ */ n(a, { children: /* @__PURE__ */ n(_, { variant: "body2", children: L.includes(e.id) ? /* @__PURE__ */ i(a, { children: [
                     e.description,
-                    /* @__PURE__ */ o(
-                      u,
+                    /* @__PURE__ */ n(
+                      c,
                       {
                         variant: "text",
                         size: "small",
                         sx: { py: 0, px: 1 },
-                        onClick: N(e.id),
+                        onClick: y(e.id),
                         children: "show less"
                       }
                     )
-                  ] }) : /* @__PURE__ */ c(p, { children: [
-                    G.truncate(e.description, { length: 100 }),
-                    e.description && e.description.length > 100 && /* @__PURE__ */ o(
-                      u,
+                  ] }) : /* @__PURE__ */ i(a, { children: [
+                    I.truncate(e.description, { length: 100 }),
+                    e.description && e.description.length > 100 && /* @__PURE__ */ n(
+                      c,
                       {
                         variant: "text",
                         size: "small",
                         sx: { py: 0, px: 1 },
-                        onClick: D(e.id),
+                        onClick: u(e.id),
                         children: "read more"
                       }
                     )
                   ] }) }) })
                 }
               )
-            }
-          ),
-          /* @__PURE__ */ o(P, { component: "li" })
-        ] }, e.id || r)) }),
-        /* @__PURE__ */ o(
-          "div",
-          {
-            style: {
-              borderTop: "1px solid lightgray"
-            },
-            children: /* @__PURE__ */ o(
-              F,
-              {
-                component: "div",
-                count: S,
-                page: a,
-                rowsPerPage: i,
-                rowsPerPageOptions: U,
-                onPageChange: T,
-                onRowsPerPageChange: _
-              }
-            )
+            ]
           }
-        )
-      ]
-    }
-  );
+        ),
+        /* @__PURE__ */ n(s, { component: "li" })
+      ] }, e.id || d)) }),
+      /* @__PURE__ */ n(j, { ownerState: r, children: /* @__PURE__ */ n(
+        b,
+        {
+          component: "div",
+          count: g,
+          page: h,
+          rowsPerPage: P,
+          rowsPerPageOptions: z,
+          onPageChange: x,
+          onRowsPerPageChange: m
+        }
+      ) })
+    ] })
+  ] });
 }
 export {
-  K as PaginatedList
+  M as PaginatedList
 };

package/dist/components/paginated-list/logic.js

@@ -0,0 +1,45 @@
+import { useThemeProps as D } from "@mui/material";
+import { useState as g } from "react";
+const _ = (l) => {
+  const i = D({ props: l, name: "MuiPaginatedList" }), {
+    title: u,
+    data: a = [],
+    payload: e,
+    totalCount: m,
+    onChange: t,
+    onItemClick: w,
+    sx: d,
+    ...h
+  } = i, [L, p] = g(0), [f, C] = g(5), [b, P] = g([]), r = (e == null ? void 0 : e.pageNumber) !== void 0 ? e.pageNumber : L, n = (e == null ? void 0 : e.rows) !== void 0 ? e.rows : f, v = (s, o) => {
+    p(o), t && t({ ...e, pageNumber: o, rows: n });
+  }, x = (s) => {
+    const o = parseInt(s.target.value, 10);
+    C(o), p(0), t && t({ ...e, pageNumber: 0, rows: o });
+  }, N = (s) => (o) => {
+    o.stopPropagation(), P((c) => [...c, s]);
+  }, R = (s) => (o) => {
+    o.stopPropagation(), P((c) => c.filter((k) => k !== s));
+  }, I = t ? m || 0 : a.length, M = t ? a : a.slice(r * n, (r + 1) * n), S = {
+    ...i
+  };
+  return {
+    title: u,
+    data: a,
+    displayData: M,
+    count: I,
+    page: r,
+    rowsPerPage: n,
+    expanded: b,
+    handleChangePage: v,
+    handleChangeRowsPerPage: x,
+    readMore: N,
+    showLess: R,
+    onItemClick: w,
+    ownerState: S,
+    sx: d,
+    other: h
+  };
+};
+export {
+  _ as usePaginatedListLogic
+};