@m4l/components 0.1.13 → 0.1.15

package/components/PropertyValue/index.js

@@ -0,0 +1,142 @@
+import { styled } from "@mui/material/styles";
+import { Skeleton } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { useModuleSkeleton } from "@m4l/core";
+const WrapperPropertyValue = styled("div", {
+  shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
+})(({
+  propertyWidth,
+  isForm,
+  theme
+}) => ({
+  display: "grid",
+  gridTemplateColumns: "1fr",
+  alignItems: "flex-start",
+  width: "100%",
+  padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
+  ":hover": {
+    backgroundColor: isForm ? "unset" : theme.palette.grid?.rowHover
+  },
+  borderBottom: isForm ? "none" : `1px solid ${theme.palette.divider}`,
+  flexDirection: "column",
+  [theme.breakpoints.up("sm")]: {
+    gridTemplateColumns: propertyWidth ? `${propertyWidth}px 1fr` : "150px 1fr",
+    gap: theme.spacing(2),
+    alignItems: "center"
+  }
+}));
+const Property = styled("div", {
+  shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
+})(({
+  propertyWidth,
+  isForm,
+  theme
+}) => ({
+  width: "100%",
+  minWidth: "100%",
+  ...theme.typography.subtitle2,
+  color: theme.palette.text.primary,
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  position: "relative",
+  [theme.breakpoints.up("sm")]: {
+    borderRight: isForm ? "none" : `1px solid ${theme.palette.divider}`,
+    paddingRight: theme.spacing(2),
+    textAlign: "right",
+    width: propertyWidth || "150px",
+    minWidth: propertyWidth || "150px",
+    justifyContent: "flex-end"
+  },
+  overflow: "hidden",
+  overflowWrap: "break-word"
+}));
+const Value = styled("div", {
+  shouldForwardProp: (prop) => prop !== "valueWidth" && prop !== "valueHeight" && prop !== "withGrid"
+})(({
+  valueWidth,
+  valueHeight,
+  theme
+}) => ({
+  flexGrow: "1",
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  position: "relative",
+  padding: "1px",
+  maxWidth: `${valueWidth}%`,
+  width: `${valueWidth}%`,
+  height: valueHeight,
+  marginTop: theme.spacing(1),
+  [theme.breakpoints.up("sm")]: {
+    marginTop: "0px"
+  },
+  overflow: "hidden",
+  overflowWrap: "break-word"
+}));
+const SKTWrapperProperty = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "flex-end"
+}));
+function SKTProperty() {
+  return /* @__PURE__ */ jsx(SKTWrapperProperty, {
+    children: /* @__PURE__ */ jsx(Skeleton, {
+      variant: "text",
+      width: 68,
+      height: 14
+    })
+  });
+}
+function PropertyValue(props) {
+  const {
+    property,
+    value,
+    propertyWidth = 200,
+    valueHeight = "auto",
+    valueWidth = "100",
+    isForm
+  } = props;
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  const getValueW = () => {
+    if (valueWidth === "75" && isDesktop) {
+      return "75";
+    } else if (valueWidth === "75" && !isDesktop) {
+      return "100";
+    }
+    if (valueWidth === "50" && isDesktop) {
+      return "50";
+    } else if (valueWidth === "50" && !isDesktop) {
+      return "100";
+    }
+    if (valueWidth === "25" && isDesktop || valueWidth === "12.5" && isDesktop) {
+      return `${valueWidth}`;
+    }
+    if (valueWidth === "25" && !isDesktop) {
+      return "50";
+    }
+    if (valueWidth === "12.5" && !isDesktop) {
+      return "25";
+    }
+    return "100";
+  };
+  const valueW = getValueW();
+  return /* @__PURE__ */ jsxs(WrapperPropertyValue, {
+    id: "WrapperPropertyValue",
+    isForm,
+    propertyWidth,
+    children: [/* @__PURE__ */ jsx(Property, {
+      id: "Property",
+      isForm,
+      propertyWidth,
+      children: isSkeleton ? /* @__PURE__ */ jsx(SKTProperty, {}) : property
+    }), /* @__PURE__ */ jsx(Value, {
+      id: "Value",
+      valueWidth: valueW,
+      valueHeight,
+      children: value
+    })]
+  });
+}
+export { PropertyValue as P };

package/components/Resizeable/{index.45995d2b.js → index.js}

@@ -1,8 +1,8 @@
-import { styled as n } from "@mui/material/styles";
-import { R as i } from "../../react-resizable.5277deaf.js";
-import { jsx as l } from "react/jsx-runtime";
-const g = n(i)(({
-  theme: e
+import { styled } from "@mui/material/styles";
+import { R as ResizableBox } from "../../react-resizable.js";
+import { jsx } from "react/jsx-runtime";
+const WrapperResizeable = styled(ResizableBox)(({
+  theme
 }) => ({
   "&.react-resizable": {
     position: "relative",
@@ -17,7 +17,7 @@ const g = n(i)(({
     backgroundRepeat: "no-repeat",
     backgroundOrigin: "content-box",
     boxSizing: "border-box",
-    backgroundColor: e.palette.action.active,
+    backgroundColor: theme.palette.action.active,
     mask: `url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' focusable='false' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;%7D%0A%3C/style%3E%3Cg id='Grupo_5256'%3E%3C/g%3E%3Cpath class='st0' d='z'/%3E%3Cg%3E%3Cpolygon points='21.9,21.9 15.8,21.9 15.8,19.9 19.9,19.9 19.9,15.9 21.9,15.9 '/%3E%3C/g%3E%3C/svg%3E%0A")`,
     backgroundImage: `url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' focusable='false' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;%7D%0A%3C/style%3E%3Cg id='Grupo_5256'%3E%3C/g%3E%3Cpath class='st0' d='z'/%3E%3Cg%3E%3Cpolygon points='21.9,21.9 15.8,21.9 15.8,19.9 19.9,19.9 19.9,15.9 21.9,15.9 '/%3E%3C/g%3E%3C/svg%3E%0A")`,
     backgroundPosition: "bottom right",
@@ -73,22 +73,20 @@ const g = n(i)(({
     transform: "rotate(45deg)"
   }
 }));
-function x(e) {
+function Resizeable(props) {
   const {
-    children: a,
-    width: s,
-    height: o,
-    maxHeigth: r,
-    maxWidth: t
-  } = e;
-  return /* @__PURE__ */ l(g, {
-    width: s,
-    height: o,
-    maxConstraints: r && t ? [t, r] : void 0,
+    children,
+    width,
+    height,
+    maxHeigth,
+    maxWidth
+  } = props;
+  return /* @__PURE__ */ jsx(WrapperResizeable, {
+    width,
+    height,
+    maxConstraints: maxHeigth && maxWidth ? [maxWidth, maxHeigth] : void 0,
     resizeHandles: ["se", "nw"],
-    children: a
+    children
   });
 }
-export {
-  x as R
-};
+export { Resizeable as R };

package/components/ScrollBar/index.js

@@ -0,0 +1,52 @@
+import SimpleBarReact from "simplebar-react";
+import { styled, alpha } from "@mui/material/styles";
+import { Box } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+const RootStyle = styled("div")(() => ({
+  flexGrow: 1,
+  height: "100%",
+  overflow: "hidden"
+}));
+const SimpleBarStyle = styled(SimpleBarReact)(({
+  theme
+}) => ({
+  maxHeight: "100%",
+  "& .simplebar-scrollbar": {
+    "&:before": {
+      backgroundColor: alpha(theme.palette.grey[600], 0.48)
+    },
+    "&.simplebar-visible:before": {
+      opacity: 1
+    }
+  },
+  "& .simplebar-track.simplebar-vertical": {
+    width: 10
+  },
+  "& .simplebar-track.simplebar-horizontal .simplebar-scrollbar": {
+    height: 6
+  },
+  "& .simplebar-mask": {
+    zIndex: "inherit"
+  }
+}));
+function ScrollBar({
+  children
+}) {
+  const userAgent = typeof navigator === "undefined" ? "SSR" : navigator.userAgent;
+  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(Box, {
+      sx: {
+        overflowX: "auto"
+      },
+      children
+    });
+  }
+  return /* @__PURE__ */ jsx(RootStyle, {
+    children: /* @__PURE__ */ jsx(SimpleBarStyle, {
+      autoHide: false,
+      children
+    })
+  });
+}
+export { ScrollBar as S };

package/components/ScrollToTop/index.js

@@ -0,0 +1,10 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+function ScrollToTop() {
+  const { pathname } = useLocation();
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+  return null;
+}
+export { ScrollToTop as S };

package/components/SplitLayout/{index.4032673d.js → index.js}

@@ -1,8 +1,8 @@
-import { S as s } from "../../react-splitter-layout.7810ac1b.js";
-import { styled as r } from "@mui/material/styles";
-import { jsx as l, jsxs as n } from "react/jsx-runtime";
-const u = r("div")(({
-  theme: t
+import { S as SplitterLayout } from "../../react-splitter-layout.js";
+import { styled } from "@mui/material/styles";
+import { jsx, jsxs } from "react/jsx-runtime";
+const WrapperSplit = styled("div")(({
+  theme
 }) => ({
   display: "flex",
   flexDirection: "column",
@@ -31,7 +31,7 @@ const u = r("div")(({
   "& .splitter-layout > .layout-splitter": {
     display: "flex",
     alignItems: "center",
-    backgroundColor: t.palette.divider,
+    backgroundColor: theme.palette.divider,
     boxSizing: "border-box",
     backgroundClip: "padding-box",
     width: "11px",
@@ -43,17 +43,17 @@ const u = r("div")(({
     height: "100%"
   },
   "& .splitter-layout .layout-splitter:before": {
-    content: '""',
+    content: `""`,
     height: "45px",
     width: "4px",
     top: "calc(50% - 22.5px)",
     position: "absolute",
-    background: t.palette.grey[500],
+    background: theme.palette.grey[500],
     borderRadius: "6px"
   },
   "& .splitter-layout > .layout-splitter:hover": {
-    borderLeft: `5px solid ${t.palette.grey[5008]}`,
-    borderRight: `5px solid ${t.palette.grey[5008]}`
+    borderLeft: `5px solid ${theme.palette.grey[5008]}`,
+    borderRight: `5px solid ${theme.palette.grey[5008]}`
   },
   "& .splitter-layout.splitter-layout-vertical.layout-changing": {
     cursor: "row-resize"
@@ -73,23 +73,25 @@ const u = r("div")(({
     top: "unset"
   },
   "& .splitter-layout > .layout-splitter:hover:before, .splitter-layout.layout-changing >  .layout-splitter:before": {
-    background: t.palette.primary.main
+    background: theme.palette.primary.main
   },
   "& .splitter-layout.splitter-layout-vertical": {
     flexDirection: "column"
   },
   "& .splitter-layout.splitter-layout-vertical > .layout-splitter:hover": {
-    borderTop: `5px solid ${t.palette.grey[5008]}`,
-    borderBottom: `5px solid ${t.palette.grey[5008]}`
+    borderTop: `5px solid ${theme.palette.grey[5008]}`,
+    borderBottom: `5px solid ${theme.palette.grey[5008]}`
   }
-})), d = r("div")(() => ({
+}));
+const SplitMaster = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
   position: "relative",
   width: "100%",
   height: "100%",
   overflow: "hidden"
-})), c = r("div")(() => ({
+}));
+const SplitDetail = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
   justifyContent: "center",
@@ -101,31 +103,29 @@ const u = r("div")(({
   top: "0px",
   bottom: "0px"
 }));
-function h(t) {
+function SplitLayout(props) {
   const {
-    splitPosition: e,
-    firstPart: o,
-    secondPart: i,
-    secondParrtInitialSize: a = 50,
-    percentage: p = !0
-  } = t;
-  return /* @__PURE__ */ l(u, {
+    splitPosition,
+    firstPart,
+    secondPart,
+    secondParrtInitialSize = 50,
+    percentage = true
+  } = props;
+  return /* @__PURE__ */ jsx(WrapperSplit, {
     id: "WrapperSplit",
-    className: `split_${e}`,
-    children: /* @__PURE__ */ n(s, {
-      vertical: e === "vertical",
-      percentage: p,
-      secondaryInitialSize: a,
-      children: [/* @__PURE__ */ l(d, {
+    className: `split_${splitPosition}`,
+    children: /* @__PURE__ */ jsxs(SplitterLayout, {
+      vertical: splitPosition === "vertical",
+      percentage,
+      secondaryInitialSize: secondParrtInitialSize,
+      children: [/* @__PURE__ */ jsx(SplitMaster, {
         id: "splitMaster",
-        children: typeof o == "function" ? o() : o
-      }), e !== "none" && /* @__PURE__ */ l(c, {
+        children: typeof firstPart === "function" ? firstPart() : firstPart
+      }), splitPosition !== "none" && /* @__PURE__ */ jsx(SplitDetail, {
         id: "detail2",
-        children: typeof i == "function" ? i() : i
+        children: typeof secondPart === "function" ? secondPart() : secondPart
       })]
     })
   });
 }
-export {
-  h as S
-};
+export { SplitLayout as S };

package/components/animate/LoadingScreen/{index.f1cec7db.js → index.js}

@@ -1,10 +1,10 @@
-import { m as r } from "framer-motion";
-import { styled as d, alpha as o } from "@mui/material/styles";
-import { Box as a } from "@mui/material";
-import { L as s } from "../../../assets/Logo/index.228dcb5a.js";
-import { jsx as t, Fragment as p, jsxs as l } from "react/jsx-runtime";
-const m = d("div")(({
-  theme: e
+import { m } from "framer-motion";
+import { styled, alpha } from "@mui/material/styles";
+import { Box } from "@mui/material";
+import { L as Logo } from "../../../assets/Logo/index.js";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+const RootStyle = styled("div")(({
+  theme
 }) => ({
   right: 0,
   bottom: 0,
@@ -15,16 +15,16 @@ const m = d("div")(({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  backgroundColor: e.palette.background.default
+  backgroundColor: theme.palette.background.default
 }));
-function x({
-  isDashboard: e,
-  ...n
+function LoadingScreen({
+  isDashboard,
+  ...other
 }) {
-  return /* @__PURE__ */ t(p, {
-    children: !e && /* @__PURE__ */ l(m, {
-      ...n,
-      children: [/* @__PURE__ */ t(r.div, {
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: !isDashboard && /* @__PURE__ */ jsxs(RootStyle, {
+      ...other,
+      children: [/* @__PURE__ */ jsx(m.div, {
         initial: {
           rotateY: 0
         },
@@ -35,17 +35,17 @@ function x({
           duration: 2,
           ease: "easeInOut",
           repeatDelay: 1,
-          repeat: 1 / 0
+          repeat: Infinity
         },
-        children: /* @__PURE__ */ t(s, {
-          disabledLink: !0,
+        children: /* @__PURE__ */ jsx(Logo, {
+          disabledLink: true,
           sx: {
             width: 32,
             height: 32
           }
         })
-      }), /* @__PURE__ */ t(a, {
-        component: r.div,
+      }), /* @__PURE__ */ jsx(Box, {
+        component: m.div,
         animate: {
           scale: [1.2, 1, 1, 1.2, 1.2],
           rotate: [270, 0, 0, 270, 270],
@@ -55,17 +55,17 @@ function x({
         transition: {
           ease: "linear",
           duration: 3.2,
-          repeat: 1 / 0
+          repeat: Infinity
         },
         sx: {
           width: 50,
           height: 50,
           borderRadius: "25%",
           position: "absolute",
-          border: (i) => `solid 3px ${o(i.palette.primary.dark, 0.24)}`
+          border: (theme) => `solid 3px ${alpha(theme.palette.primary.dark, 0.24)}`
         }
-      }), /* @__PURE__ */ t(a, {
-        component: r.div,
+      }), /* @__PURE__ */ jsx(Box, {
+        component: m.div,
         animate: {
           scale: [1, 1.2, 1.2, 1, 1],
           rotate: [0, 270, 270, 0, 0],
@@ -75,19 +75,17 @@ function x({
         transition: {
           ease: "linear",
           duration: 3.2,
-          repeat: 1 / 0
+          repeat: Infinity
         },
         sx: {
           width: 60,
           height: 60,
           borderRadius: "25%",
           position: "absolute",
-          border: (i) => `solid 8px ${o(i.palette.primary.dark, 0.24)}`
+          border: (theme) => `solid 8px ${alpha(theme.palette.primary.dark, 0.24)}`
         }
       })]
     })
   });
 }
-export {
-  x as L
-};
+export { LoadingScreen as L };

package/components/animate/MotionContainer/index.js

@@ -0,0 +1,31 @@
+import { m } from "framer-motion";
+import { Box } from "@mui/material";
+import { v as varContainer } from "../variants/container.js";
+import { jsx } from "react/jsx-runtime";
+function MotionContainer({
+  animate,
+  action = false,
+  children,
+  ...other
+}) {
+  if (action) {
+    return /* @__PURE__ */ jsx(Box, {
+      component: m.div,
+      initial: false,
+      animate: animate ? "animate" : "exit",
+      variants: varContainer(),
+      ...other,
+      children
+    });
+  }
+  return /* @__PURE__ */ jsx(Box, {
+    component: m.div,
+    initial: "initial",
+    animate: "animate",
+    exit: "exit",
+    variants: varContainer(),
+    ...other,
+    children
+  });
+}
+export { MotionContainer as M };

package/components/animate/MotionLazyContainer/index.js

@@ -0,0 +1,13 @@
+import { LazyMotion } from "framer-motion";
+import { jsx } from "react/jsx-runtime";
+const loadFeatures = () => import("../features.js").then((res) => res.default);
+function MotionLazyContainer({
+  children
+}) {
+  return /* @__PURE__ */ jsx(LazyMotion, {
+    strict: true,
+    features: loadFeatures,
+    children
+  });
+}
+export { MotionLazyContainer as M };

package/components/animate/features.js

@@ -0,0 +1,2 @@
+import { domMax } from "framer-motion";
+export { domMax as default } from "framer-motion";

package/components/animate/variants/{bounce.784aaaaa.js → bounce.js}

@@ -1,13 +1,16 @@
-import { v as i, a as c } from "./transition.bd46b9ce.js";
-const r = (n) => {
-  const a = n?.durationIn, e = n?.durationOut, t = n?.easeIn, o = n?.easeOut;
+import { v as varTranEnter, a as varTranExit } from "./transition.js";
+const varBounce = (props) => {
+  const durationIn = props?.durationIn;
+  const durationOut = props?.durationOut;
+  const easeIn = props?.easeIn;
+  const easeOut = props?.easeOut;
   return {
     in: {
       initial: {},
       animate: {
         scale: [0.3, 1.1, 0.9, 1.03, 0.97, 1],
         opacity: [0, 1, 1, 1, 1, 1],
-        transition: i({ durationIn: a, easeIn: t })
+        transition: varTranEnter({ durationIn, easeIn })
       },
       exit: {
         scale: [0.9, 1.1, 0.3],
@@ -20,13 +23,13 @@ const r = (n) => {
         y: [720, -24, 12, -4, 0],
         scaleY: [4, 0.9, 0.95, 0.985, 1],
         opacity: [0, 1, 1, 1, 1],
-        transition: { ...i({ durationIn: a, easeIn: t }) }
+        transition: { ...varTranEnter({ durationIn, easeIn }) }
       },
       exit: {
         y: [12, -24, 720],
         scaleY: [0.985, 0.9, 3],
         opacity: [1, 1, 0],
-        transition: c({ durationOut: e, easeOut: o })
+        transition: varTranExit({ durationOut, easeOut })
       }
     },
     inDown: {
@@ -35,13 +38,13 @@ const r = (n) => {
         y: [-720, 24, -12, 4, 0],
         scaleY: [4, 0.9, 0.95, 0.985, 1],
         opacity: [0, 1, 1, 1, 1],
-        transition: i({ durationIn: a, easeIn: t })
+        transition: varTranEnter({ durationIn, easeIn })
       },
       exit: {
         y: [-12, 24, -720],
         scaleY: [0.985, 0.9, 3],
         opacity: [1, 1, 0],
-        transition: c({ durationOut: e, easeOut: o })
+        transition: varTranExit({ durationOut, easeOut })
       }
     },
     inLeft: {
@@ -50,13 +53,13 @@ const r = (n) => {
         x: [-720, 24, -12, 4, 0],
         scaleX: [3, 1, 0.98, 0.995, 1],
         opacity: [0, 1, 1, 1, 1],
-        transition: i({ durationIn: a, easeIn: t })
+        transition: varTranEnter({ durationIn, easeIn })
       },
       exit: {
         x: [0, 24, -720],
         scaleX: [1, 0.9, 2],
         opacity: [1, 1, 0],
-        transition: c({ durationOut: e, easeOut: o })
+        transition: varTranExit({ durationOut, easeOut })
       }
     },
     inRight: {
@@ -65,13 +68,13 @@ const r = (n) => {
         x: [720, -24, 12, -4, 0],
         scaleX: [3, 1, 0.98, 0.995, 1],
         opacity: [0, 1, 1, 1, 1],
-        transition: i({ durationIn: a, easeIn: t })
+        transition: varTranEnter({ durationIn, easeIn })
       },
       exit: {
         x: [0, -24, 720],
         scaleX: [1, 0.9, 2],
         opacity: [1, 1, 0],
-        transition: c({ durationOut: e, easeOut: o })
+        transition: varTranExit({ durationOut, easeOut })
       }
     },
     out: {
@@ -91,6 +94,4 @@ const r = (n) => {
     }
   };
 };
-export {
-  r as v
-};
+export { varBounce as v };

package/components/animate/variants/container.js

@@ -0,0 +1,20 @@
+const varContainer = (props) => {
+  const staggerIn = props?.staggerIn || 0.05;
+  const delayIn = props?.staggerIn || 0.05;
+  const staggerOut = props?.staggerIn || 0.05;
+  return {
+    animate: {
+      transition: {
+        staggerChildren: staggerIn,
+        delayChildren: delayIn
+      }
+    },
+    exit: {
+      transition: {
+        staggerChildren: staggerOut,
+        staggerDirection: -1
+      }
+    }
+  };
+};
+export { varContainer as v };