@m4l/components 0.1.18 → 0.1.20

package/components/animate/variants/fade.d.ts

@@ -1,5 +1,5 @@
 import { VariantsType } from '../type';
-export declare const varFade: (props?: VariantsType) => {
+export declare const varFade: (props?: VariantsType | undefined) => {
     in: {
         initial: {
             opacity: number;
@@ -8,14 +8,14 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: (props?: import("../type").TranEnterType | undefined) => {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
             opacity: number;
             transition: (props?: import("../type").TranExitType | undefined) => {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -29,7 +29,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -37,7 +37,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -51,7 +51,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -59,7 +59,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -73,7 +73,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -81,7 +81,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -95,7 +95,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -103,7 +103,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -115,14 +115,14 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -136,7 +136,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -144,7 +144,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -158,7 +158,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -166,7 +166,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -180,7 +180,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -188,7 +188,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -202,7 +202,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -210,7 +210,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };

package/components/animate/variants/transition.d.ts

@@ -1,13 +1,13 @@
 import { TranHoverType, TranEnterType, TranExitType } from '../type';
-export declare const varTranHover: (props?: TranHoverType) => {
+export declare const varTranHover: (props?: TranHoverType | undefined) => {
     duration: number;
-    ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+    ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
 };
-export declare const varTranEnter: (props?: TranEnterType) => {
+export declare const varTranEnter: (props?: TranEnterType | undefined) => {
     duration: number;
-    ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+    ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
 };
-export declare const varTranExit: (props?: TranExitType) => {
+export declare const varTranExit: (props?: TranExitType | undefined) => {
     duration: number;
-    ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+    ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
 };

package/components/{hook-form/FormProvider/index.936cbb98.js → contexts/RHFormContext/index.f8241292.js}

@@ -1,19 +1,20 @@
-import { useEffect as l } from "react";
+import { useEffect as t } from "react";
 import { useForm as f, FormProvider as m } from "react-hook-form";
-import { o as c } from "../../../node_modules.168cb897.js";
-import { styled as n } from "@mui/material/styles";
-import { jsx as a } from "react/jsx-runtime";
-const h = n("form")(({
+import { o as n } from "../../../node_modules.168cb897.js";
+import { styled as c } from "@mui/material/styles";
+import { jsx as l } from "react/jsx-runtime";
+const h = c("form")(({
   theme: e
 }) => ({
   display: "flex",
   marginBottom: e.spacing(1),
   flexDirection: "column",
   width: "100%",
-  overflow: "scroll",
-  maxWidth: e.stretch ? "unset" : "900px"
+  overflow: "auto",
+  maxWidth: e.stretch ? "unset" : "900px",
+  padding: e.spacing(3)
 }));
-function V(e) {
+function P(e) {
   const {
     children: d,
     onSubmit: i,
@@ -21,13 +22,13 @@ function V(e) {
     validationSchema: u,
     statusLoad: o = "ready"
   } = e, r = f({
-    resolver: c(u),
+    resolver: n(u),
     defaultValues: s
   });
-  return l(() => {
+  return t(() => {
     if (console.log("useEffect FormProvider reload_values_provider===", o), o === "reload_values_provider") {
-      Object.keys(s).forEach((t) => {
-        r.setValue(t, s[t], {
+      Object.keys(s).forEach((a) => {
+        r.setValue(a, s[a], {
           shouldValidate: !1,
           shouldDirty: !1,
           shouldTouch: !1
@@ -35,15 +36,15 @@ function V(e) {
       });
       return;
     }
-  }, [r, o, s]), l(() => {
+  }, [r, o, s]), t(() => {
     o === "ready" && (console.log("useEffect FormProvider Ready", o), r.setValue("statusLoad", "ready", {
       shouldValidate: !1,
       shouldDirty: !1,
       shouldTouch: !1
     }));
-  }, [o]), /* @__PURE__ */ a(m, {
+  }, [o]), /* @__PURE__ */ l(m, {
     ...r,
-    children: /* @__PURE__ */ a(h, {
+    children: /* @__PURE__ */ l(h, {
       id: "formProvider",
       onSubmit: r.handleSubmit(i),
       children: d
@@ -51,5 +52,5 @@ function V(e) {
   });
 }
 export {
-  V as F
+  P as R
 };

package/components/formatters/BooleanFormatter/{index.cca53b7f.js → index.3ec56305.js}

@@ -1,6 +1,6 @@
 import { useModuleDictionary as u, useEnvironment as _, getPropertyByString as p } from "@m4l/core";
 import l from "react";
-import { I as d } from "../../Icon/index.cbca79b0.js";
+import { I as d } from "../../Icon/index.f569765b.js";
 import { jsx as t } from "react/jsx-runtime";
 function g(r) {
   const {

package/components/formatters/DateFormatter/{index.ad8d9b8e.js → index.08d8823b.js}

@@ -1,6 +1,6 @@
 import c from "react";
 import { useEnvironment as p, useHostTools as u, getPropertyByString as d } from "@m4l/core";
-import "../../Icon/index.cbca79b0.js";
+import "../../Icon/index.f569765b.js";
 import "@mui/material/styles";
 import { jsx as f, Fragment as y } from "react/jsx-runtime";
 function g(a) {

package/components/formatters/{index.55856d65.js → index.6959c2de.js}

@@ -1,7 +1,7 @@
 import l from "react";
 import { jsx as m, Fragment as u } from "react/jsx-runtime";
 import { getPropertyByString as i } from "@m4l/core";
-import "../Icon/index.cbca79b0.js";
+import "../Icon/index.f569765b.js";
 import "@mui/material/styles";
 function _(e) {
   const {

package/components/hook-form/RHFAutocomplete/index.b7f11146.js

@@ -0,0 +1,146 @@
+import { useModuleDictionary as F, useModuleSkeleton as H } from "@m4l/core";
+import { useFormContext as M, Controller as $ } from "react-hook-form";
+import { Skeleton as O, Autocomplete as q, TextField as E } from "@mui/material";
+import { styled as l } from "@mui/material/styles";
+import { I as w } from "../../Image/index.c9da2d5a.js";
+import { useMemo as V } from "react";
+import { jsxs as T, jsx as i } from "react/jsx-runtime";
+const j = l("div")(() => ({
+  display: "flex",
+  width: "100%",
+  flexDirection: "column"
+})), D = l("div")(({
+  theme: e
+}) => ({
+  width: "100%",
+  display: "grid",
+  gridTemplateColumns: "1fr auto",
+  gridGap: e.spacing(2),
+  alignItems: "center",
+  height: `${e.spacing(4.5)}`,
+  border: `1px solid ${e.palette.divider}`,
+  borderRadius: `${e.spacing(1)}`,
+  padding: `0 ${e.spacing(2)}`,
+  [e.breakpoints.down("md")]: {
+    width: "100%"
+  }
+})), K = l("div")(({
+  theme: e
+}) => ({
+  display: "flex",
+  width: "100%",
+  "& .MuiAutocomplete-root": {
+    width: "100%"
+  },
+  "& .m4l_image": {
+    marginLeft: e.spacing(1.5)
+  }
+})), P = l("li")(({
+  theme: e
+}) => ({
+  "& .m4l_image": {
+    marginRight: e.spacing(1.5)
+  }
+}));
+function U(e, a, d) {
+  return function(n, s) {
+    return /* @__PURE__ */ T(P, {
+      ...n,
+      children: [/* @__PURE__ */ i(w, {
+        src: e(s),
+        width: a,
+        height: d
+      }), n.key]
+    });
+  };
+}
+function Y(e) {
+  const {
+    name: a,
+    getOptionLabel: d,
+    isOptionEqualToValue: u,
+    label: n,
+    skeletonWidth: s = 100,
+    skeletonHeight: b = "18px",
+    options: I,
+    disabled: v,
+    getOptionUrlImage: r,
+    imageWidth: c = "24px",
+    imageHeight: m = "24px",
+    onOpen: k,
+    onClose: _,
+    loading: L,
+    ...C
+  } = e, {
+    getLabel: g
+  } = F(), R = H(), {
+    control: S
+  } = M(), h = V(() => r !== void 0, [r]), y = (t) => t == null ? "" : d(t), f = (t) => t == null || r === void 0 ? "" : r(t), A = (t, o) => o == null || t === null ? !1 : u(t, o);
+  return R ? /* @__PURE__ */ i(j, {
+    children: /* @__PURE__ */ T(D, {
+      children: [/* @__PURE__ */ i(O, {
+        variant: "text",
+        width: s,
+        height: b
+      }, "sk1"), /* @__PURE__ */ i(O, {
+        variant: "circular",
+        width: 16,
+        height: 16
+      }, "sk2")]
+    })
+  }) : /* @__PURE__ */ i($, {
+    name: a,
+    control: S,
+    render: ({
+      field: {
+        onChange: t,
+        value: o
+      },
+      fieldState: {
+        error: x
+      }
+    }) => /* @__PURE__ */ i(K, {
+      className: "m4l_rhf_autocomplete",
+      children: /* @__PURE__ */ i(q, {
+        options: I,
+        getOptionLabel: y,
+        isOptionEqualToValue: A,
+        disableClearable: !0,
+        value: o || null,
+        onOpen: k,
+        onClose: _,
+        onChange: (p, W) => {
+          t(W);
+        },
+        loading: L,
+        loadingText: g("rhf_autocomplete.loading_options"),
+        disabled: v,
+        noOptionsText: g("rhf_autocomplete.no_options"),
+        renderOption: h ? U(f, c, m) : void 0,
+        renderInput: (p) => /* @__PURE__ */ i(E, {
+          ...p,
+          label: n,
+          fullWidth: !0,
+          SelectProps: {
+            native: !0
+          },
+          InputProps: {
+            ...p.InputProps,
+            startAdornment: h && o ? /* @__PURE__ */ i(w, {
+              src: f(o),
+              width: c,
+              height: m
+            }, "ImageTextField") : null
+          },
+          autoComplete: "off",
+          error: !!x,
+          helperText: x?.message,
+          ...C
+        })
+      })
+    })
+  });
+}
+export {
+  Y as R
+};

package/components/hook-form/RHFAutocomplete/index.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
-import { TextFieldProps } from '@mui/material';
 import type { RHFAutocompleteProps } from './types';
-export declare function RHFAutocomplete<T>(props: RHFAutocompleteProps<T> & TextFieldProps): JSX.Element;
+export declare function RHFAutocomplete<T>(props: RHFAutocompleteProps<T>): JSX.Element;

package/components/hook-form/RHFAutocomplete/styles.d.ts

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

package/components/hook-form/RHFAutocomplete/subcomponents/RenderOption/index.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+import { GetOptionString } from '../../types';
+export declare function withRenderOption<T>(getUrlImage: GetOptionString<T>, imageWidth: string, imageHeight: string): (optionProps: HTMLAttributes<HTMLLIElement>, option: T) => JSX.Element;

package/components/hook-form/RHFAutocomplete/subcomponents/RenderOption/styles.d.ts

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

package/components/hook-form/RHFAutocomplete/types.d.ts

@@ -1,12 +1,18 @@
-export interface SkeletonProps {
-    width?: string | number;
-    height?: string | number;
-}
-export interface RHFAutocompleteProps<T> {
+/// <reference types="react" />
+import { AutocompleteCloseReason, TextFieldProps } from '@mui/material';
+export declare type GetOptionString<T> = (option: T | null) => string;
+export declare type RHFAutocompleteProps<T> = {
     name: string;
     options: Array<T>;
     getOptionLabel: (option: T) => string;
+    getOptionUrlImage?: (option: T) => string;
     isOptionEqualToValue: (option: T, value: T) => boolean;
-    skeletonProps?: SkeletonProps;
+    skeletonWidth?: string | number;
+    skeletonHeight?: string | number;
     label: string;
-}
+    imageWidth?: string;
+    imageHeight?: string;
+    loading?: boolean;
+    onOpen?: (event: React.SyntheticEvent) => void;
+    onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason) => void;
+} & TextFieldProps;

package/components/hook-form/RHFAutocompleteAsync/index.97a5a66e.js

@@ -0,0 +1,51 @@
+import { useState as o, useEffect as p } from "react";
+import { useNetwork as y, getPropertyByString as A } from "@m4l/core";
+import { useFormContext as L } from "react-hook-form";
+import { R as k } from "../RHFAutocomplete/index.b7f11146.js";
+import { jsx as w } from "react/jsx-runtime";
+function j(l) {
+  const {
+    name: n,
+    endPoint: e,
+    timeout: f = 5e3,
+    parms: s,
+    resultField: c = "data",
+    isRemote: d = !0,
+    ...g
+  } = l, {
+    setValue: O
+  } = L(), {
+    networkOperation: R
+  } = y(), [F, r] = o([]), [h, i] = o(!1), [m, u] = o(!1), t = h && !m && !!e;
+  return p(() => {
+    m && (u(!1), r([]), O(n, null));
+  }, [s, e]), p(() => {
+    let a = !0;
+    if (!!t)
+      return R({
+        method: "GET",
+        endPoint: e,
+        timeout: f,
+        parms: s,
+        isRemote: d
+      }).then((x) => {
+        a && (r(A(x, c)), u(!0));
+      }), () => {
+        a = !1;
+      };
+  }, [t]), console.log("Loading", t), /* @__PURE__ */ w(k, {
+    name: n,
+    loading: t,
+    options: F,
+    onOpen: () => {
+      i(!0);
+    },
+    onClose: () => {
+      i(!1);
+    },
+    ...g
+  });
+}
+export {
+  j as R
+};

package/components/hook-form/RHFAutocompleteAsync/index.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
-import { TextFieldProps } from '@mui/material';
 import type { RHFAutocompleteAsyncProps } from './types';
-export declare function RHFAutocompleteAsync<T>(props: RHFAutocompleteAsyncProps<T> & TextFieldProps): JSX.Element;
+export declare function RHFAutocompleteAsync<T>(props: RHFAutocompleteAsyncProps<T>): JSX.Element;

package/components/hook-form/RHFAutocompleteAsync/types.d.ts

@@ -1,16 +1,8 @@
-export interface SkeletonProps {
-    width?: string | number;
-    height?: string | number;
-}
-export interface RHFAutocompleteAsyncProps<T> {
-    name: string;
-    getOptionLabel: (option: T) => string;
-    isOptionEqualToValue: (option: T, value: T) => boolean;
-    skeletonProps?: SkeletonProps;
+import { RHFAutocompleteProps } from '../RHFAutocomplete/types';
+export declare type RHFAutocompleteAsyncProps<T> = {
     endPoint: string;
     timeout?: number;
     parms?: Record<string, any>;
     resultField?: string;
-    label: string;
     isRemote?: boolean;
-}
+} & Omit<RHFAutocompleteProps<T>, 'options'>;

package/components/hook-form/RHFCheckbox/index.6a40e25f.js

@@ -0,0 +1,55 @@
+import { useFormContext as i, Controller as c } from "react-hook-form";
+import { styled as m } from "@mui/material/styles";
+import { styled as p, Skeleton as d, FormControlLabel as u, Checkbox as f } from "@mui/material";
+import { useModuleSkeleton as g } from "@m4l/core";
+import { jsx as e, jsxs as k, Fragment as x } from "react/jsx-runtime";
+const h = p("div")(() => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: "8px"
+})), C = () => /* @__PURE__ */ e(h, {
+  children: /* @__PURE__ */ e(d, {
+    variant: "rectangular"
+  })
+}), y = m("p")(({
+  theme: r
+}) => ({
+  ...r.typography.caption,
+  color: r.palette.error.main,
+  marginRight: 14,
+  marginLeft: 14
+}));
+function L({
+  name: r,
+  sizeCheck: n = "small",
+  ...l
+}) {
+  const {
+    control: s
+  } = i(), a = g();
+  return /* @__PURE__ */ e(u, {
+    control: /* @__PURE__ */ e(c, {
+      name: r,
+      control: s,
+      render: ({
+        field: t,
+        fieldState: {
+          error: o
+        }
+      }) => a ? /* @__PURE__ */ e(C, {}) : /* @__PURE__ */ k(x, {
+        children: [/* @__PURE__ */ e(f, {
+          size: n,
+          ...t,
+          checked: t.value
+        }), o?.message && /* @__PURE__ */ e(y, {
+          children: o?.message + ""
+        })]
+      })
+    }),
+    ...l
+  });
+}
+export {
+  L as R
+};

package/components/hook-form/RHFCheckbox/subcomponents/Skeleton/index.d.ts

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

package/components/hook-form/RHFCheckbox/subcomponents/Skeleton/styles.d.ts

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