@m4l/components 0.1.40 → 0.1.41

package/components/ScrollToTop/index.e06f98f6.js

@@ -0,0 +1,12 @@
+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.5a8355d8.js

@@ -0,0 +1,133 @@
+import { S as SplitterLayout } from "../../react-splitter-layout.8b1655c8.js";
+import { styled } from "@mui/material/styles";
+import { jsx, jsxs } from "react/jsx-runtime";
+const WrapperSplit = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  position: "relative",
+  flexGrow: 1,
+  overflow: "hidden",
+  "& .splitter-layout": {
+    position: "absolute",
+    display: "flex",
+    flexDirection: "row",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden"
+  },
+  "& .splitter-layout .layout-pane": {
+    position: "relative",
+    flex: "0 0 auto",
+    overflow: "auto"
+  },
+  "& .splitter-layout .layout-pane.layout-pane-primary": {
+    flex: "1 1 auto"
+  },
+  "& .splitter-layout.layout-changing": {
+    cursor: "col-resize"
+  },
+  "& .splitter-layout > .layout-splitter": {
+    display: "flex",
+    alignItems: "center",
+    backgroundColor: theme.palette.divider,
+    boxSizing: "border-box",
+    backgroundClip: "padding-box",
+    width: "11px",
+    margin: "0 5px",
+    borderLeft: "5px solid hsla(0, 0%, 100%, 0)",
+    borderRight: "5px solid hsla(0, 0%, 100%, 0)",
+    cursor: "col-resize",
+    justifyContent: "center",
+    height: "100%"
+  },
+  "& .splitter-layout .layout-splitter:before": {
+    content: `""`,
+    height: "45px",
+    width: "4px",
+    top: "calc(50% - 22.5px)",
+    position: "absolute",
+    background: theme.palette.grey[500],
+    borderRadius: "6px"
+  },
+  "& .splitter-layout > .layout-splitter:hover": {
+    borderLeft: `5px solid ${theme.palette.grey[5008]}`,
+    borderRight: `5px solid ${theme.palette.grey[5008]}`
+  },
+  "& .splitter-layout.splitter-layout-vertical.layout-changing": {
+    cursor: "row-resize"
+  },
+  "& .splitter-layout.splitter-layout-vertical > .layout-splitter": {
+    height: "11px !important",
+    width: "100% !important",
+    margin: "5px 0",
+    borderTop: "5px solid hsla(0, 0%, 100%, 0)",
+    borderBottom: "5px solid hsla(0, 0%, 100%, 0)",
+    cursor: "row-resize"
+  },
+  "& .splitter-layout.splitter-layout-vertical .layout-splitter:before": {
+    width: "45px !important",
+    height: "4px !important",
+    left: "calc(50% - 22.5px)",
+    top: "unset"
+  },
+  "& .splitter-layout > .layout-splitter:hover:before, .splitter-layout.layout-changing >  .layout-splitter:before": {
+    background: theme.palette.primary.main
+  },
+  "& .splitter-layout.splitter-layout-vertical": {
+    flexDirection: "column"
+  },
+  "& .splitter-layout.splitter-layout-vertical > .layout-splitter:hover": {
+    borderTop: `5px solid ${theme.palette.grey[5008]}`,
+    borderBottom: `5px solid ${theme.palette.grey[5008]}`
+  }
+}));
+const SplitMaster = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  overflow: "hidden"
+}));
+const SplitDetail = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  overflow: "hidden",
+  position: "absolute",
+  left: "0px",
+  right: "0px",
+  top: "0px",
+  bottom: "0px"
+}));
+function SplitLayout(props) {
+  const {
+    splitPosition,
+    firstPart,
+    secondPart,
+    secondParrtInitialSize = 50,
+    percentage = true
+  } = props;
+  return /* @__PURE__ */ jsx(WrapperSplit, {
+    id: "WrapperSplit",
+    className: `split_${splitPosition}`,
+    children: /* @__PURE__ */ jsxs(SplitterLayout, {
+      vertical: splitPosition === "vertical",
+      percentage,
+      secondaryInitialSize: secondParrtInitialSize,
+      children: [/* @__PURE__ */ jsx(SplitMaster, {
+        id: "splitMaster",
+        children: typeof firstPart === "function" ? firstPart() : firstPart
+      }), splitPosition !== "none" && /* @__PURE__ */ jsx(SplitDetail, {
+        id: "detail2",
+        children: typeof secondPart === "function" ? secondPart() : secondPart
+      })]
+    })
+  });
+}
+export {
+  SplitLayout as S
+};

package/components/SplitLayout/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SplitLayoutProps } from './types';
+export declare function SplitLayout(props: SplitLayoutProps): JSX.Element;

package/components/SplitLayout/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const WrapperSplit: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SplitMaster: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SplitDetail: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/SplitLayout/types.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export declare type SplitPosition = 'vertical' | 'horizontal' | 'none';
+export interface SplitLayoutProps {
+    splitPosition: SplitPosition;
+    percentage?: boolean;
+    secondParrtInitialSize?: number;
+    firstPart: ((props?: any) => JSX.Element) | ReactNode;
+    secondPart: ((props?: any) => JSX.Element) | ReactNode;
+}

package/components/WrapperComponent/index.5e872594.js

@@ -0,0 +1,18 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+function WrapperComponent(props) {
+  const {
+    children,
+    type = "fragment"
+  } = props;
+  if (type === "fragment") {
+    return /* @__PURE__ */ jsx(Fragment, {
+      children
+    });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [" ", children]
+  });
+}
+export {
+  WrapperComponent as W
+};

package/components/WrapperComponent/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { WrapperComponentProps } from './types';
+export declare function WrapperComponent(props: WrapperComponentProps): JSX.Element;

package/components/WrapperComponent/types.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export interface WrapperComponentProps {
+    children: ReactNode;
+    type?: 'fragment';
+}

package/components/animate/IconButtonAnimate/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IconButtonProps } from '@mui/material';
+export declare const IconButtonAnimate: import("react").ForwardRefExoticComponent<Omit<IconButtonProps<"button", {}>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/components/animate/IconButtonAnimate/types.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+export declare type AnimateWrapProp = {
+    children: ReactNode;
+    size: 'small' | 'medium' | 'large';
+};

package/components/animate/LoadingScreen/index.1d0c4307.js

@@ -0,0 +1,103 @@
+import { m } from "framer-motion";
+import { alpha } from "@mui/material/styles";
+import { styled, Box } from "@mui/material";
+import { L as Logo } from "../../../assets/Logo/index.228dcb5a.js";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+const RootStyle = styled("div", {
+  shouldForwardProp: (props) => props !== "variant"
+})(({
+  theme,
+  variant
+}) => ({
+  right: 0,
+  bottom: 0,
+  zIndex: 99999,
+  width: "100%",
+  height: "100%",
+  position: "fixed",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: theme.palette.background.default,
+  ...variant === "microfrontend" && {
+    position: "relative",
+    zIndex: 0
+  }
+}));
+function LoadingScreen(props) {
+  const {
+    isDashboard,
+    variant = "fullpage",
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: !isDashboard && /* @__PURE__ */ jsxs(RootStyle, {
+      variant,
+      ...other,
+      children: [/* @__PURE__ */ jsx(m.div, {
+        initial: {
+          rotateY: 0
+        },
+        animate: {
+          rotateY: 360
+        },
+        transition: {
+          duration: 2,
+          ease: "easeInOut",
+          repeatDelay: 1,
+          repeat: Infinity
+        },
+        children: /* @__PURE__ */ jsx(Logo, {
+          disabledLink: true,
+          sx: {
+            width: 32,
+            height: 32
+          }
+        })
+      }), /* @__PURE__ */ jsx(Box, {
+        component: m.div,
+        animate: {
+          scale: [1.2, 1, 1, 1.2, 1.2],
+          rotate: [270, 0, 0, 270, 270],
+          opacity: [0.25, 1, 1, 1, 0.25],
+          borderRadius: ["25%", "25%", "50%", "50%", "25%"]
+        },
+        transition: {
+          ease: "linear",
+          duration: 3.2,
+          repeat: Infinity
+        },
+        sx: {
+          width: 50,
+          height: 50,
+          borderRadius: "25%",
+          position: "absolute",
+          border: (theme) => `solid 3px ${alpha(theme.palette.primary.dark, 0.24)}`
+        }
+      }), /* @__PURE__ */ jsx(Box, {
+        component: m.div,
+        animate: {
+          scale: [1, 1.2, 1.2, 1, 1],
+          rotate: [0, 270, 270, 0, 0],
+          opacity: [1, 0.25, 0.25, 0.25, 1],
+          borderRadius: ["25%", "25%", "50%", "50%", "25%"]
+        },
+        transition: {
+          ease: "linear",
+          duration: 3.2,
+          repeat: Infinity
+        },
+        sx: {
+          width: 60,
+          height: 60,
+          borderRadius: "25%",
+          position: "absolute",
+          border: (theme) => `solid 8px ${alpha(theme.palette.primary.dark, 0.24)}`
+        }
+      })]
+    })
+  });
+}
+export {
+  LoadingScreen as L
+};

package/components/animate/LoadingScreen/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { LoadingScreenProps } from './types';
+export declare function LoadingScreen(props: LoadingScreenProps): JSX.Element;
+export default LoadingScreen;

package/components/animate/LoadingScreen/styles.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { RootStyleProps } from './types';
+export declare const RootStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & RootStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/animate/LoadingScreen/types.d.ts

@@ -0,0 +1,6 @@
+export declare type LoadingScreenVariant = 'fullpage' | 'microfrontend';
+export declare type RootStyleProps = Pick<LoadingScreenProps, 'variant'>;
+export declare type LoadingScreenProps = {
+    isDashboard?: boolean;
+    variant?: LoadingScreenVariant;
+};

package/components/animate/MotionContainer/index.8d9f9d80.js

@@ -0,0 +1,33 @@
+import { m } from "framer-motion";
+import { Box } from "@mui/material";
+import { v as varContainer } from "../variants/container.11f82b76.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/MotionContainer/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { MotionProps } from 'framer-motion';
+import { BoxProps } from '@mui/material';
+declare type IProps = BoxProps & MotionProps;
+export interface Props extends IProps {
+    animate?: boolean;
+    action?: boolean;
+}
+export declare function MotionContainer({ animate, action, children, ...other }: Props): JSX.Element;
+export {};

package/components/animate/MotionLazyContainer/index.572dd012.js

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

package/components/animate/MotionLazyContainer/index.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+declare type Props = {
+    children: ReactNode;
+};
+export declare function MotionLazyContainer({ children }: Props): JSX.Element;
+export {};

package/components/animate/PropagateLoader/index.be5b02c3.js

@@ -0,0 +1,30 @@
+import { styled, useTheme } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { P as PropagateLoader$1 } from "../../../node_modules.416f1da3.js";
+const WrapperPropageteLoader = styled("div")(({
+  theme
+}) => ({
+  right: 0,
+  bottom: 0,
+  zIndex: 99999,
+  width: "100%",
+  height: "100%",
+  position: "fixed",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: theme.palette.background.default
+}));
+const PropagateLoader = () => {
+  const {
+    palette
+  } = useTheme();
+  return /* @__PURE__ */ jsx(WrapperPropageteLoader, {
+    children: /* @__PURE__ */ jsx(PropagateLoader$1, {
+      color: palette.primary.main
+    })
+  });
+};
+export {
+  PropagateLoader as P
+};

package/components/animate/PropagateLoader/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PropagateLoader: () => JSX.Element;

package/components/animate/PropagateLoader/syles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const WrapperPropageteLoader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/animate/features.0fbf41e1.js

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

package/components/animate/features.d.ts

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

package/components/animate/index.d.ts

@@ -0,0 +1,6 @@
+export * from './variants';
+export { IconButtonAnimate } from './IconButtonAnimate';
+export { MotionContainer } from './MotionContainer';
+export { MotionLazyContainer } from './MotionLazyContainer';
+export { LoadingScreen } from './LoadingScreen';
+export { PropagateLoader } from './PropagateLoader';

package/components/animate/type.d.ts

@@ -0,0 +1,26 @@
+declare type EaseType = 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | 'circIn' | 'circOut' | 'circInOut' | 'backIn' | 'backOut' | 'backInOut' | 'anticipate' | number[];
+export declare type VariantsType = {
+    distance?: number;
+    durationIn?: number;
+    durationOut?: number;
+    easeIn?: EaseType;
+    easeOut?: EaseType;
+};
+export declare type TranHoverType = {
+    duration?: number;
+    ease?: EaseType;
+};
+export declare type TranEnterType = {
+    durationIn?: number;
+    easeIn?: EaseType;
+};
+export declare type TranExitType = {
+    durationOut?: number;
+    easeOut?: EaseType;
+};
+export declare type BackgroundType = {
+    colors?: string[];
+    duration?: number;
+    ease?: EaseType;
+};
+export {};

package/components/animate/variants/bounce.784aaaaa.js

@@ -0,0 +1,99 @@
+import { v as varTranEnter, a as varTranExit } from "./transition.bd46b9ce.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: varTranEnter({ durationIn, easeIn })
+      },
+      exit: {
+        scale: [0.9, 1.1, 0.3],
+        opacity: [1, 1, 0]
+      }
+    },
+    inUp: {
+      initial: {},
+      animate: {
+        y: [720, -24, 12, -4, 0],
+        scaleY: [4, 0.9, 0.95, 0.985, 1],
+        opacity: [0, 1, 1, 1, 1],
+        transition: { ...varTranEnter({ durationIn, easeIn }) }
+      },
+      exit: {
+        y: [12, -24, 720],
+        scaleY: [0.985, 0.9, 3],
+        opacity: [1, 1, 0],
+        transition: varTranExit({ durationOut, easeOut })
+      }
+    },
+    inDown: {
+      initial: {},
+      animate: {
+        y: [-720, 24, -12, 4, 0],
+        scaleY: [4, 0.9, 0.95, 0.985, 1],
+        opacity: [0, 1, 1, 1, 1],
+        transition: varTranEnter({ durationIn, easeIn })
+      },
+      exit: {
+        y: [-12, 24, -720],
+        scaleY: [0.985, 0.9, 3],
+        opacity: [1, 1, 0],
+        transition: varTranExit({ durationOut, easeOut })
+      }
+    },
+    inLeft: {
+      initial: {},
+      animate: {
+        x: [-720, 24, -12, 4, 0],
+        scaleX: [3, 1, 0.98, 0.995, 1],
+        opacity: [0, 1, 1, 1, 1],
+        transition: varTranEnter({ durationIn, easeIn })
+      },
+      exit: {
+        x: [0, 24, -720],
+        scaleX: [1, 0.9, 2],
+        opacity: [1, 1, 0],
+        transition: varTranExit({ durationOut, easeOut })
+      }
+    },
+    inRight: {
+      initial: {},
+      animate: {
+        x: [720, -24, 12, -4, 0],
+        scaleX: [3, 1, 0.98, 0.995, 1],
+        opacity: [0, 1, 1, 1, 1],
+        transition: varTranEnter({ durationIn, easeIn })
+      },
+      exit: {
+        x: [0, -24, 720],
+        scaleX: [1, 0.9, 2],
+        opacity: [1, 1, 0],
+        transition: varTranExit({ durationOut, easeOut })
+      }
+    },
+    out: {
+      animate: { scale: [0.9, 1.1, 0.3], opacity: [1, 1, 0] }
+    },
+    outUp: {
+      animate: { y: [-12, 24, -720], scaleY: [0.985, 0.9, 3], opacity: [1, 1, 0] }
+    },
+    outDown: {
+      animate: { y: [12, -24, 720], scaleY: [0.985, 0.9, 3], opacity: [1, 1, 0] }
+    },
+    outLeft: {
+      animate: { x: [0, 24, -720], scaleX: [1, 0.9, 2], opacity: [1, 1, 0] }
+    },
+    outRight: {
+      animate: { x: [0, -24, 720], scaleX: [1, 0.9, 2], opacity: [1, 1, 0] }
+    }
+  };
+};
+export {
+  varBounce as v
+};