@m4l/components 0.0.23 → 0.0.24

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/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,3 @@
 export * from './fade';
+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/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,7 +8,6 @@ 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";
@@ -27,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";
@@ -41,7 +42,9 @@ 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 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.23",
+  "version": "0.0.24",
   "license": "UNLICENSED",
   "scripts": {
     "dev": "vite",