@m4l/components 0.0.22 → 0.0.25

package/dist/components/Icon/index.d.ts

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

package/dist/components/Icon/index.js

@@ -0,0 +1,26 @@
+import { styled } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+const MaskIcon = styled("div", {
+  shouldForwardProp: (props) => props !== "src" && props !== "width" && props !== "height" && props !== "bgColor"
+})((props) => ({
+  WebkitMask: `url(${props.src}) no-repeat`,
+  mask: `url(${props.src}) no-repeat`,
+  width: props.width === void 0 ? "20px" : props.width,
+  height: props.height === void 0 ? "20px" : props.height,
+  backgroundColor: props.bgColor === "active" ? props.theme.palette.action.active : props.bgColor === "selected" ? props.theme.palette.primary.main : props.bgColor === "info" ? props.theme.palette.info.main : props.bgColor === "warning" ? props.theme.palette.warning.main : props.bgColor === "error" ? props.theme.palette.error.main : props.bgColor
+}));
+function Icon(props) {
+  const {
+    src = "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/commons/assets/icons/default.svg",
+    width = "20px",
+    height = "20px",
+    bgColor = "active"
+  } = props;
+  return /* @__PURE__ */ jsx(MaskIcon, {
+    src,
+    width,
+    height,
+    bgColor
+  });
+}
+export { Icon as I };

package/dist/components/Icon/styles.d.ts

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

package/dist/components/Icon/types.d.ts

@@ -0,0 +1,6 @@
+export interface IconProps {
+    src: string;
+    width?: number | string;
+    height?: number | string;
+    bgColor?: string | 'info' | 'warning' | 'error' | 'active' | 'disabled';
+}

package/dist/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/dist/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/dist/components/animate/index.d.ts

@@ -1,3 +1,4 @@
 export * from './variants';
 export { IconButtonAnimate } from './IconButtonAnimate';
+export { MotionContainer } from './MotionContainer';
 export { MotionLazyContainer } from './MotionLazyContainer';

package/dist/components/animate/variants/bounce.d.ts

@@ -0,0 +1,136 @@
+import { VariantsType } from '../type';
+export declare const varBounce: (props?: VariantsType | undefined) => {
+    in: {
+        initial: {};
+        animate: {
+            scale: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | number[];
+            };
+        };
+        exit: {
+            scale: number[];
+            opacity: number[];
+        };
+    };
+    inUp: {
+        initial: {};
+        animate: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | number[];
+            };
+        };
+        exit: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | number[];
+            };
+        };
+    };
+    inDown: {
+        initial: {};
+        animate: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | number[];
+            };
+        };
+        exit: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | number[];
+            };
+        };
+    };
+    inLeft: {
+        initial: {};
+        animate: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | number[];
+            };
+        };
+        exit: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | number[];
+            };
+        };
+    };
+    inRight: {
+        initial: {};
+        animate: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | number[];
+            };
+        };
+        exit: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | number[];
+            };
+        };
+    };
+    out: {
+        animate: {
+            scale: number[];
+            opacity: number[];
+        };
+    };
+    outUp: {
+        animate: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+        };
+    };
+    outDown: {
+        animate: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+        };
+    };
+    outLeft: {
+        animate: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+        };
+    };
+    outRight: {
+        animate: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+        };
+    };
+};

package/dist/components/animate/variants/bounce.js

@@ -0,0 +1,97 @@
+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: 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 };

package/dist/components/animate/variants/container.d.ts

@@ -0,0 +1,19 @@
+export declare type Props = {
+    staggerIn?: number;
+    delayIn?: number;
+    staggerOut?: number;
+};
+export declare const varContainer: (props?: Props | undefined) => {
+    animate: {
+        transition: {
+            staggerChildren: number;
+            delayChildren: number;
+        };
+    };
+    exit: {
+        transition: {
+            staggerChildren: number;
+            staggerDirection: number;
+        };
+    };
+};

package/dist/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 };

package/dist/components/animate/variants/index.d.ts

@@ -1,2 +1,4 @@
 export * from './fade';
+export * from './bounce';
+export * from './container';
 export * from './transition';

package/dist/components/index.d.ts

@@ -9,6 +9,7 @@ export type { RowKey } from '../components/DataGrid/types';
 export { getGridComponentsDictionary } from '../components/DataGrid/dictionary';
 export * from '../components/FormActions';
 export * from '../components/FormActions/dictionary';
+export * from '../components/Icon';
 export * from '../components/Image';
 export * from '../components/LanguagePopover';
 export * from '../components/Loadable';

package/dist/components/mui_extended/LoadingButton/index.d.ts

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

package/dist/components/mui_extended/LoadingButton/index.js

@@ -0,0 +1,35 @@
+import { LoadingButton as LoadingButton$1 } from "@mui/lab";
+import { Skeleton } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { jsx } from "react/jsx-runtime";
+const WrapperSKTLoadingButton = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  borderRadius: theme.spacing(1),
+  overflow: "hidden"
+}));
+const SKTLoadingButton = () => /* @__PURE__ */ jsx(WrapperSKTLoadingButton, {
+  id: "WrapperSKTLoadingButton",
+  children: /* @__PURE__ */ jsx(Skeleton, {
+    variant: "rectangular",
+    width: "100%",
+    height: "48px"
+  })
+});
+const LoadingButton = (props) => {
+  const {
+    isSkeleton,
+    children,
+    ...other
+  } = props;
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTLoadingButton, {});
+  }
+  return /* @__PURE__ */ jsx(LoadingButton$1, {
+    ...other,
+    children
+  });
+};
+export { LoadingButton as L };

package/dist/components/mui_extended/LoadingButton/skeleton.d.ts

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

package/dist/components/mui_extended/LoadingButton/styles.d.ts

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

package/dist/components/mui_extended/LoadingButton/types.d.ts

@@ -0,0 +1,5 @@
+import { LoadingButtonProps } from '@mui/lab';
+export interface MuiLabLoadingButtonProps extends LoadingButtonProps {
+    isSkeleton?: boolean;
+    children?: any;
+}

package/dist/components/mui_extended/index.d.ts

@@ -4,6 +4,7 @@ export { Breadcrumbs } from './Breadcrumbs';
 export type { TLink } from './Breadcrumbs/types';
 export { IconButton } from './IconButton';
 export { LinkWithRoute } from './LinkWithRoute';
+export { LoadingButton } from './LoadingButton';
 export { MenuActions } from './MenuActions';
 export type { MenuAction, ComponentActionProps } from './MenuActions/types';
 export { MenuPopover } from './MenuPopover';

package/dist/index.js

@@ -1,5 +1,6 @@
 export { I as IconButton, a as IconButtonAnimate } from "./components/mui_extended/IconButton/index.js";
 import "framer-motion";
+import "@mui/material";
 import "react/jsx-runtime";
 import "react";
 import "react-hook-form";
@@ -7,11 +8,11 @@ export { F as FormProvider } from "./components/hook-form/FormProvider/index.js"
 import "react-router-dom";
 import "@m4l/core";
 import "@mui/lab";
-import "@mui/material";
 export { M as ModalContext, a as ModalProvider } from "./contexts/ModalContext/index.js";
 export { R as RHFAutocompleteAsync } from "./components/hook-form/RHFAutocompleteAsync/index.js";
 export { R as RHFCheckbox } from "./components/hook-form/RHFCheckbox/index.js";
 export { R as RHFTextField } from "./components/hook-form/RHFTextField/index.js";
+export { L as LoadingButton } from "./components/mui_extended/LoadingButton/index.js";
 export { M as MenuPopover } from "./components/mui_extended/MenuPopover/index.js";
 export { M as MenuActions } from "./components/mui_extended/MenuActions/index.js";
 export { P as Pager, g as getPagerComponentsDictionary } from "./components/mui_extended/Pager/index.js";
@@ -26,6 +27,7 @@ import "react-dnd";
 import "react-dnd-html5-backend";
 import "date-fns";
 export { F as FormActions, d as defaultActionsDictionary, g as getActionnsComponentsDictionary } from "./components/FormActions/index.js";
+export { I as Icon } from "./components/Icon/index.js";
 import "./react-draggable.js";
 export { M as ModalDialog, d as defaultModalDialogDictionary, g as getModalDialogComponentsDictionary } from "./components/ModalDialog/index.js";
 export { R as Resizeable } from "./components/Resizeable/index.js";
@@ -40,7 +42,10 @@ export { S as ScrollBar } from "./components/ScrollBar/index.js";
 import "./react-splitter-layout.js";
 export { S as SplitLayout } from "./components/SplitLayout/index.js";
 export { v as varFade } from "./components/animate/variants/fade.js";
+export { v as varBounce } from "./components/animate/variants/bounce.js";
+export { v as varContainer } from "./components/animate/variants/container.js";
 export { v as varTranEnter, a as varTranExit, b as varTranHover } from "./components/animate/variants/transition.js";
+export { M as MotionContainer } from "./components/animate/MotionContainer/index.js";
 export { M as MotionLazyContainer } from "./components/animate/MotionLazyContainer/index.js";
 export { R as RHFMultiCheckbox } from "./components/hook-form/RHFMultiCheckbox/index.js";
 export { R as RHFSelect } from "./components/hook-form/RHFSelect.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@m4l/components",
   "private": false,
-  "version": "0.0.22",
+  "version": "0.0.25",
   "license": "UNLICENSED",
   "scripts": {
     "dev": "vite",