@m4l/components 0.2.35 → 0.2.36

package/components/hook-form/RHFCheckbox/index.c32278fa.js

@@ -0,0 +1,142 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useFormContext, Controller } from "react-hook-form";
+import { styled, Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { H as HelperText } from "../../HelperText/index.81c5d349.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { useModuleSkeleton } from "@m4l/core";
+import { useFormFocus } from "../../../index.js";
+import { C as CheckBox } from "../../mui_extended/CheckBox.256169f0.js";
+const RHFCheckboxRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LRHFCheckbox?.styleOverrides
+}));
+styled("div")(() => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: "8px"
+}));
+styled(Skeleton)(() => ({
+  width: "20px",
+  height: "20px",
+  borderRadius: "4px"
+}));
+const ContainerCheckTypography = styled("div")(() => ({
+  display: "flex",
+  alignItems: "center"
+}));
+generateUtilityClasses("M4LRHFCheckbox", [
+  "root",
+  "checkTypography",
+  "skeleton",
+  "small",
+  "medium",
+  "stateDisabled",
+  "stateError",
+  "isFocus",
+  "isTabSelected"
+]);
+function getRHFCheckboxUtilityClass(slot) {
+  return generateUtilityClass("M4LRHFCheckbox", slot);
+}
+const useUtilityClasses = (ownerState) => {
+  const slots = {
+    root: [
+      "root",
+      ownerState.isFocus && "isFocus",
+      ownerState.isTabSelected && "isTabSelected",
+      ownerState.sizeCheck === "small" && "small",
+      ownerState.sizeCheck === "medium" && "medium",
+      ownerState.disabled && "stateDisabled",
+      ownerState.error && "stateError"
+    ],
+    skeleton: ["skeleton"],
+    checkTypography: [
+      "checkTypography",
+      ownerState.sizeCheck === "small" ? "small" : "medium",
+      ownerState.disabled && "stateDisabled"
+    ]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFCheckboxUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const RHFCHEKCBOX_PREFIX = "RHFCheckbox";
+const getNameDataTestId = (KEY, NAME) => {
+  return `${RHFCHEKCBOX_PREFIX}-${NAME}-${KEY}`;
+};
+function RHFCheckbox(props) {
+  const {
+    name,
+    sizeCheck = "small",
+    label,
+    disabled = false,
+    mandatory,
+    mandatoryMessage,
+    helperMessage
+  } = props;
+  const {
+    control,
+    formState: { errors }
+  } = useFormContext();
+  const isSkeleton = useModuleSkeleton();
+  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
+  const isDesktop = useResponsiveDesktop();
+  const ownerState = {
+    isFocus: !isSkeleton ? isFocus : false,
+    isTabSelected: !isSkeleton ? isTabSelected : false,
+    sizeCheck: !isDesktop ? "medium" : sizeCheck,
+    disabled,
+    error: errors[name] ? true : false
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(
+    RHFCheckboxRoot,
+    {
+      className: classes.root,
+      onFocus: handlerFocus,
+      onBlur: handlerOnBlur,
+      onKeyUp: handlerOnKeyUp,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root", name) } : {},
+      children: /* @__PURE__ */ jsx(
+        Controller,
+        {
+          name,
+          control,
+          render: ({ field: { onChange, value }, fieldState: { error } }) => {
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                ContainerCheckTypography,
+                {
+                  className: classes.checkTypography,
+                  ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("checkTypography", name) } : {},
+                  children: /* @__PURE__ */ jsx(
+                    CheckBox,
+                    {
+                      size: sizeCheck,
+                      onChange,
+                      checked: value,
+                      disabled: disabled ? true : false,
+                      disableRipple: true,
+                      label,
+                      mandatory,
+                      mandatoryMessage,
+                      helperMessage,
+                      htmlFor: name
+                    }
+                  )
+                }
+              ),
+              error?.message && /* @__PURE__ */ jsx(HelperText, { variant: "error", message: error?.message + "" })
+            ] });
+          }
+        }
+      )
+    }
+  );
+}
+export {
+  RHFCheckbox as R
+};

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const RHFCheckboxRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperSKTRHFCheckbox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTCheckSkeleton: import("@emotion/styled").StyledComponent<{
+    animation?: false | "pulse" | "wave" | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").SkeletonClasses> | undefined;
+    height?: string | number | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "text" | "rectangular" | "rounded" | "circular" | undefined;
+    width?: string | number | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "children" | "width" | "height" | keyof import("@mui/material/OverridableComponent").CommonProps | "animation" | "sx" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ContainerCheckTypography: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/hook-form/RHFCheckbox/test/utils.d.ts

@@ -1,2 +1,2 @@
-import { RHFCheckboxClassesKey } from "../classes/types";
+import { RHFCheckboxClassesKey } from '../classes/types';
 export declare const getNameDataTestId: (KEY: RHFCheckboxClassesKey, NAME: string) => string;

package/components/hook-form/RHFColorPicker/classes/types.d.ts

@@ -1,4 +1,4 @@
-import { useUtilityClasses } from ".";
+import { useUtilityClasses } from '.';
 export interface RHFColorPickerClassesType {
     root: string;
     popoverRoot: string;

package/components/hook-form/RHFColorPicker/index.8c939bfd.js

@@ -0,0 +1,191 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { useFormContext, useWatch, Controller } from "react-hook-form";
+import { useModuleSkeleton, useEnvironment, useModuleDictionary } from "@m4l/core";
+import { SketchPicker } from "react-color";
+import { H as HelperText } from "../../HelperText/index.81c5d349.js";
+import { generateUtilityClasses, generateUtilityClass, styled, Skeleton } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { useTheme } from "@mui/material/styles";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { useFormFocus } from "../../../index.js";
+import { F as FieldLabel } from "../../FieldLabel/index.2622ee40.js";
+import { P as Popover } from "../../mui_extended/Popover/index.4e7340b4.js";
+import { I as Icon } from "../../Icon/index.ee7b85c9.js";
+import { B as Button } from "../../mui_extended/Button/index.5395d101.js";
+const componentName = "M4LRHFColorPicker";
+const colorPickerClasses = generateUtilityClasses(componentName, [
+  "root",
+  "popoverRoot",
+  "containerFieldColor",
+  "fieldColor",
+  "containerPicker",
+  "skeleton",
+  "sizeSmall",
+  "sizeMedium",
+  "isFocus",
+  "isTabSelected"
+]);
+function getRHFColorPickerUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = (owmerState) => {
+  const slots = {
+    root: [
+      "root",
+      owmerState.isFocus && "isFocus",
+      owmerState.isTabSelected && "isTabSelected",
+      owmerState.size === "small" && "sizeSmall",
+      owmerState.size === "medium" && "sizeMedium"
+    ],
+    popoverRoot: ["popoverRoot"],
+    containerFieldColor: ["containerFieldColor"],
+    fieldColor: ["boxColor"],
+    containerPicker: ["containerPicker"],
+    skeleton: ["skeleton"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFColorPickerUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const RHFColorPickerRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LRHFColorPicker?.styleOverrides
+}));
+const RHFColorPickerSkeleton = (props) => {
+  const { label } = props;
+  return /* @__PURE__ */ jsxs("div", { className: colorPickerClasses.skeleton, children: [
+    label && /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "30%", height: "14px" }),
+    /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        className: colorPickerClasses.skeleton,
+        variant: "rectangular",
+        width: 20,
+        height: 20
+      }
+    )
+  ] });
+};
+const RHFColorPicker = (props) => {
+  const { name, size = "small", label, mandatory, mandatoryMessage, helperMessage } = props;
+  const { control, setValue, trigger } = useFormContext();
+  const isSkeleton = useModuleSkeleton();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
+  const theme = useTheme();
+  const currentColor = useWatch({
+    name,
+    control
+  });
+  const isDesktop = useResponsiveDesktop();
+  const [tempColor, setTempColor] = useState(() => currentColor || "#ffffff");
+  const [anchorEl, setAnchorEl] = useState(null);
+  const { getLabel } = useModuleDictionary();
+  const handleColorChange = (color) => {
+    setTempColor(color.hex);
+  };
+  const handleApprove = () => {
+    setAnchorEl(null);
+    if (tempColor !== currentColor) {
+      setValue(name, tempColor);
+      trigger(name);
+    }
+  };
+  const ownerState = {
+    isFocus: !isSkeleton ? isFocus : false,
+    isTabSelected: !isSkeleton ? isTabSelected : false,
+    size: isDesktop ? size : "medium"
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(
+    RHFColorPickerRoot,
+    {
+      className: classes.root,
+      tabIndex: 0,
+      onFocus: handlerFocus,
+      onBlur: handlerOnBlur,
+      onKeyUp: handlerOnKeyUp,
+      children: !isSkeleton ? /* @__PURE__ */ jsx(
+        Controller,
+        {
+          name,
+          control,
+          defaultValue: "",
+          render: ({ field: { value }, fieldState: { error } }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+            label && /* @__PURE__ */ jsx(
+              FieldLabel,
+              {
+                label,
+                mandatory,
+                mandatoryMessage,
+                helperMessage
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                className: classes.containerFieldColor,
+                onClick: (event) => setAnchorEl(event.currentTarget),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: classes.fieldColor,
+                      style: {
+                        backgroundColor: value
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      src: `${host_static_assets}/${environment_assets}/frontend/components/rhfcolorpicker/assets/icons/chevron_right.svg`
+                    }
+                  )
+                ]
+              }
+            ),
+            error?.message && /* @__PURE__ */ jsx(HelperText, { variant: "error", message: error?.message + "" }),
+            /* @__PURE__ */ jsx(
+              Popover,
+              {
+                open: Boolean(anchorEl),
+                arrowType: "top-center",
+                className: classes.popoverRoot,
+                anchorEl,
+                onClose: () => setAnchorEl(null),
+                anchorOrigin: {
+                  vertical: "bottom",
+                  horizontal: "center"
+                },
+                transformOrigin: {
+                  vertical: "top",
+                  horizontal: "center"
+                },
+                sx: {
+                  mt: "12px",
+                  ml: -1.25,
+                  ...theme.components?.M4LRHFColorPickerPopoverRoot?.styleOverrides
+                },
+                children: /* @__PURE__ */ jsxs("div", { className: classes.containerPicker, children: [
+                  /* @__PURE__ */ jsx(SketchPicker, { color: tempColor, onChange: handleColorChange, disableAlpha: true }),
+                  /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: handleApprove, children: getLabel("rhfcolorpicker.accept") })
+                ] })
+              }
+            )
+          ] })
+        }
+      ) : /* @__PURE__ */ jsx(RHFColorPickerSkeleton, { label })
+    }
+  );
+};
+function getRHFColorPickerComponentsDictionary() {
+  return ["rhfcolorpicker"];
+}
+export {
+  RHFColorPicker as R,
+  getRHFColorPickerComponentsDictionary as g
+};

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

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

package/components/hook-form/RHFColorPicker/subcomponents/Skeleton/types.d.ts

@@ -1,3 +1,2 @@
-import { RHFColorPickerProps } from "../../types";
-export interface RHFColorPickerSkeletoProps extends Pick<RHFColorPickerProps, 'label'> {
-}
+import { RHFColorPickerProps } from '../../types';
+export declare type RHFColorPickerSkeletoProps = Pick<RHFColorPickerProps, 'label'>;

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

@@ -1,16 +1,16 @@
-import { FieldLabelProps } from "../../FieldLabel/types";
+import { FieldLabelProps } from '../../FieldLabel/types';
 export interface RHFColorPickerProps extends Omit<FieldLabelProps, 'label'> {
     /**
-    * Nombre de etiqueta del campo
-    */
+     * Nombre de etiqueta del campo
+     */
     label?: string;
     /**
-    * Identificador del campo dentro del formulario de react hook form
-    */
+     * Identificador del campo dentro del formulario de react hook form
+     */
     name: string;
     /**
-    * Variaciones de tamaño para el componente
-    */
+     * Variaciones de tamaño para el componente
+     */
     size?: 'small' | 'medium';
 }
 export interface OwnerState extends Pick<RHFColorPickerProps, 'size'> {

package/components/hook-form/RHFDateTime/classes/types.d.ts

@@ -1,4 +1,4 @@
-import { useUtilityClasses } from ".";
+import { useUtilityClasses } from '.';
 export interface RHFDateTimeClassesType {
     root: string;
     skeleton: string;

package/components/hook-form/RHFDateTime/index.ac27deab.js

@@ -0,0 +1,190 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useFormContext, Controller } from "react-hook-form";
+import { DateTimePicker } from "@mui/x-date-pickers";
+import { useEnvironment, useModuleSkeleton } from "@m4l/core";
+import { Skeleton, generateUtilityClasses, generateUtilityClass, styled } from "@mui/material";
+import { useFormatter, useResponsiveDesktop } from "@m4l/graphics";
+import { useState, useEffect } from "react";
+import { unstable_composeClasses } from "@mui/base";
+import clsx from "clsx";
+import { H as HelperText } from "../../HelperText/index.81c5d349.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+import { useFormFocus } from "../../../index.js";
+import { F as FieldLabel } from "../../FieldLabel/index.2622ee40.js";
+import { I as Icon } from "../../Icon/index.ee7b85c9.js";
+const SkeletonRHFDateTime = (props) => {
+  const { skeletonWidth, skeletonHeight, className, label } = props;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    label && /* @__PURE__ */ jsx(Skeleton, { variant: "text", height: "14px", width: "30%" }),
+    /* @__PURE__ */ jsxs("div", { className: className.skeleton, children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: skeletonWidth, height: skeletonHeight }),
+      /* @__PURE__ */ jsx(Skeleton, { variant: "circular" })
+    ] })
+  ] });
+};
+const componentName = "M4LRHFDateTime";
+generateUtilityClasses(componentName, [
+  "root",
+  "skeleton",
+  "small",
+  "medium",
+  "isFocus",
+  "isTabSelected",
+  "isDisabled",
+  "variantInfo",
+  "variantSuccess",
+  "variantWarning",
+  "variantError"
+]);
+function getRHFCheckboxUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = (ownerState) => {
+  const slots = {
+    root: [
+      "root",
+      ownerState.size === "small" && "small",
+      ownerState.size === "medium" && "medium",
+      ownerState.isFocus && "isFocus",
+      ownerState.isTabSelected && "isTabSelected",
+      ownerState.disabled && "isDisabled",
+      ownerState.variant === "info" && "variantInfo",
+      ownerState.variant === "success" && "variantSuccess",
+      ownerState.variant === "warning" && "variantWarning",
+      ownerState.variant === "error" && "variantError"
+    ],
+    skeleton: ["skeleton"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFCheckboxUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const RHFDateTimeRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LRHFDateTime?.styleOverrides
+}));
+const RHFDATETIME_PREFIX = "RHFDateTime";
+const getNameRHFDateTimeDataTestId = (KEY) => {
+  return `${RHFDATETIME_PREFIX}-${KEY}`;
+};
+function RHFDateTime(props) {
+  const {
+    name: nameRHF,
+    disabled,
+    size = "small",
+    variant,
+    skeletonWidth = "50%",
+    skeletonHeight = 14,
+    className,
+    label,
+    helperMessage,
+    mandatory,
+    mandatoryMessage
+  } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const resourceIcon = () => {
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        src: `${host_static_assets}/${environment_assets}/frontend/components/rhfdate/ended_at.svg`
+      }
+    );
+  };
+  const [currentVariant, setCurrentVariant] = useState(void 0);
+  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
+  const {
+    control,
+    formState: { errors }
+  } = useFormContext();
+  useEffect(() => {
+    if (errors[nameRHF]) {
+      setCurrentVariant("error");
+    } else if (variant) {
+      setCurrentVariant(variant);
+    } else {
+      setCurrentVariant(void 0);
+    }
+  }, [errors[nameRHF], variant, control]);
+  const isSkeleton = useModuleSkeleton();
+  const {
+    dateFormatter: { datetimeFormat }
+  } = useFormatter();
+  const isDesktop = useResponsiveDesktop();
+  const ownerState = {
+    isFocus: !isSkeleton ? isFocus : false,
+    isTabSelected: !isSkeleton ? isTabSelected : false,
+    disabled,
+    size: isDesktop ? size : "medium",
+    variant: currentVariant
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(
+    RHFDateTimeRoot,
+    {
+      className: clsx(classes.root, className),
+      tabIndex: 0,
+      onFocus: handlerFocus,
+      onBlur: handlerOnBlur,
+      onKeyUp: handlerOnKeyUp,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameRHFDateTimeDataTestId("root") } : {},
+      children: !isSkeleton ? /* @__PURE__ */ jsx(
+        Controller,
+        {
+          name: nameRHF,
+          control,
+          render: ({ field: { value, onChange, ref }, fieldState: { error } }) => {
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              label && /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  label,
+                  mandatory,
+                  mandatoryMessage,
+                  helperMessage
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                DateTimePicker,
+                {
+                  sx: {
+                    "& .MuiTouchRipple-root": {
+                      display: "none"
+                    }
+                  },
+                  inputRef: ref,
+                  ampm: true,
+                  value,
+                  onChange: (newValue) => {
+                    onChange(newValue);
+                  },
+                  slots: {
+                    openPickerIcon: resourceIcon
+                  },
+                  slotProps: {
+                    textField: {
+                      onFocus: handlerFocus,
+                      onBlur: handlerOnBlur
+                    },
+                    field: { format: datetimeFormat }
+                  }
+                }
+              ),
+              error?.message && /* @__PURE__ */ jsx(HelperText, { variant: "error", message: error?.message + "" })
+            ] });
+          }
+        }
+      ) : /* @__PURE__ */ jsx(
+        SkeletonRHFDateTime,
+        {
+          skeletonWidth,
+          skeletonHeight,
+          className: classes,
+          label
+        }
+      )
+    }
+  );
+}
+export {
+  RHFDateTime as R
+};

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

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

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

@@ -1,4 +1,4 @@
-import { FieldLabelProps } from "../../FieldLabel/types";
+import { FieldLabelProps } from '../../FieldLabel/types';
 export interface RHFDateTimeProps extends Omit<FieldLabelProps, 'label'> {
     skeletonWidth?: string | number;
     skeletonHeight?: string | number;

package/components/hook-form/RHFMultiCheckbox/index.437e6ba3.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { useFormContext, Controller } from "react-hook-form";
+import { FormGroup, FormControlLabel, Checkbox } from "@mui/material";
+function RHFMultiCheckbox({ name, options, ...other }) {
+  const { control } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field }) => {
+        const onSelected = (option) => field.value.includes(option) ? field.value.filter((value) => value !== option) : [...field.value, option];
+        return /* @__PURE__ */ jsx(FormGroup, { children: options.map((option) => /* @__PURE__ */ jsx(
+          FormControlLabel,
+          {
+            control: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: field.value.includes(option),
+                onChange: () => field.onChange(onSelected(option))
+              }
+            ),
+            label: option,
+            ...other
+          },
+          option
+        )) });
+      }
+    }
+  );
+}
+export {
+  RHFMultiCheckbox as R
+};

package/components/hook-form/RHFPeriod/classes/types.d.ts

@@ -1,4 +1,4 @@
-import { RHFPeriodUtilityClasses } from ".";
+import { RHFPeriodUtilityClasses } from '.';
 export interface RHFPeriodClassesType {
     root: string;
     isFocus: string;