@m4l/components 0.1.40 → 0.1.41

package/components/hook-form/RHFMultiCheckbox/index.2680b3b6.js

@@ -0,0 +1,34 @@
+import { useFormContext, Controller } from "react-hook-form";
+import { FormGroup, FormControlLabel, Checkbox } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+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/RHFMultiCheckbox/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { RHFMultiCheckboxProps } from './types';
+export declare function RHFMultiCheckbox({ name, options, ...other }: RHFMultiCheckboxProps): JSX.Element;

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

@@ -0,0 +1,10 @@
+import { FormControlLabelProps } from '@mui/material';
+export interface RHFCheckboxProps extends Omit<FormControlLabelProps, 'control'> {
+    name: string;
+    sizeCheck?: 'small' | 'medium';
+    isSkeleton?: boolean;
+}
+export interface RHFMultiCheckboxProps extends Omit<FormControlLabelProps, 'control' | 'label'> {
+    name: string;
+    options: string[];
+}

package/components/hook-form/RHFPeriod/index.3772295b.js

@@ -0,0 +1,55 @@
+import { styled } from "@mui/material";
+import { useFormContext, Controller } from "react-hook-form";
+import { E as ErrorLabel } from "../../ErrorLabel/index.c8615f16.js";
+import { P as Period } from "../../Period/index.abe445bd.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const Wrapper = styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "flex-start",
+  gap: theme.spacing(1)
+}));
+const RHFPeriod = (props) => {
+  const {
+    name,
+    readOnly,
+    skeletonWidth,
+    skeletonHeight
+  } = props;
+  const {
+    control
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field: {
+        onChange,
+        value
+      },
+      fieldState: {
+        error
+      }
+    }) => {
+      return /* @__PURE__ */ jsxs(Wrapper, {
+        children: [/* @__PURE__ */ jsx(Period, {
+          value,
+          onChange,
+          error: !!error,
+          readOnly,
+          skeletonWidth,
+          skeletonHeight
+        }), error && /* @__PURE__ */ jsx(ErrorLabel, {
+          message: error.message || ""
+        })]
+      });
+    }
+  });
+};
+export {
+  RHFPeriod as R
+};

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { PeriodProps, PeriodVariant } from '../../../components/Period/types';
+export interface RHFPeriodProps extends Pick<PeriodProps, 'readOnly' | 'skeletonWidth' | 'skeletonHeight'> {
+    name: string;
+    variant?: PeriodVariant;
+}

package/components/hook-form/RHFRadioGroup/index.b3335e13.js

@@ -0,0 +1,43 @@
+import { useFormContext, Controller } from "react-hook-form";
+import { RadioGroup, FormControlLabel, Radio, FormHelperText } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RHFRadioGroup({
+  name,
+  options,
+  getOptionLabel,
+  ...other
+}) {
+  const {
+    control
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field,
+      fieldState: {
+        error
+      }
+    }) => /* @__PURE__ */ jsxs("div", {
+      children: [/* @__PURE__ */ jsx(RadioGroup, {
+        ...field,
+        row: true,
+        ...other,
+        children: options.map((option, index) => /* @__PURE__ */ jsx(FormControlLabel, {
+          value: option,
+          control: /* @__PURE__ */ jsx(Radio, {}),
+          label: getOptionLabel?.length ? getOptionLabel[index] : option
+        }, option))
+      }), !!error && /* @__PURE__ */ jsx(FormHelperText, {
+        error: true,
+        sx: {
+          px: 2
+        },
+        children: error.message
+      })]
+    })
+  });
+}
+export {
+  RHFRadioGroup as R
+};

package/components/hook-form/RHFRadioGroup.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { RadioGroupProps } from '@mui/material';
+interface IProps {
+    name: string;
+    options: string[];
+    getOptionLabel?: string[];
+}
+export declare function RHFRadioGroup({ name, options, getOptionLabel, ...other }: IProps & RadioGroupProps): JSX.Element;
+export {};

package/components/hook-form/RHFSelect/index.b6ca8bb2.js

@@ -0,0 +1,36 @@
+import { useFormContext, Controller } from "react-hook-form";
+import { TextField } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+function RHFSelect({
+  name,
+  children,
+  ...other
+}) {
+  const {
+    control
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field,
+      fieldState: {
+        error
+      }
+    }) => /* @__PURE__ */ jsx(TextField, {
+      ...field,
+      select: true,
+      fullWidth: true,
+      SelectProps: {
+        native: true
+      },
+      error: !!error,
+      helperText: error?.message,
+      ...other,
+      children
+    })
+  });
+}
+export {
+  RHFSelect as R
+};

package/components/hook-form/RHFSelect.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TextFieldProps } from '@mui/material';
+interface IProps {
+    name: string;
+    children: any;
+}
+export declare function RHFSelect({ name, children, ...other }: IProps & TextFieldProps): JSX.Element;
+export {};

package/components/hook-form/RHFTextField/index.b17d68f4.js

@@ -0,0 +1,146 @@
+import { useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { styled, Skeleton, TextField, InputAdornment } from "@mui/material";
+import { forwardRef, useState } from "react";
+import { I as IconButton } from "../../mui_extended/IconButton/index.82f16572.js";
+import { useFormContext, Controller } from "react-hook-form";
+import { jsx, jsxs } from "react/jsx-runtime";
+const WrapperSkeletonRHFTextField = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  height: "42.25px",
+  alignItems: "center",
+  justifyContent: "space-between",
+  border: `1px solid ${theme.palette.divider}`,
+  padding: "12px 14px",
+  borderRadius: theme.spacing(1)
+}));
+const SkeletonTextField = (props) => {
+  const {
+    skeletonWidth,
+    skeletonHeight,
+    skeletonVariant
+  } = props;
+  if (skeletonVariant === "text") {
+    return /* @__PURE__ */ jsx(WrapperSkeletonRHFTextField, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: skeletonWidth,
+        height: skeletonHeight
+      })
+    });
+  }
+  return /* @__PURE__ */ jsxs(WrapperSkeletonRHFTextField, {
+    children: [/* @__PURE__ */ jsx(Skeleton, {
+      variant: "text",
+      width: skeletonWidth,
+      height: skeletonHeight
+    }), /* @__PURE__ */ jsx(Skeleton, {
+      variant: "circular",
+      width: "20px",
+      height: "20px"
+    })]
+  });
+};
+const RHFTextField = forwardRef((props, inputRef) => {
+  const {
+    name: nameRHF,
+    autoComplete = "off",
+    skeletonWidth = "100%",
+    skeletonHeight = "18px",
+    type,
+    skeletonVariant = "text",
+    ...other
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  const {
+    control
+  } = useFormContext();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonTextField, {
+      skeletonWidth,
+      skeletonHeight,
+      skeletonVariant
+    });
+  }
+  return /* @__PURE__ */ jsx(Controller, {
+    name: nameRHF,
+    control,
+    render: ({
+      field: {
+        onChange,
+        onBlur,
+        value,
+        name,
+        ref
+      },
+      fieldState: {
+        error
+      }
+    }) => {
+      const onInternalChange = (event) => {
+        if (type === "number") {
+          if (event.target.value) {
+            onChange(Number(event.target.value));
+            return;
+          }
+        }
+        onChange(event);
+      };
+      return /* @__PURE__ */ jsx(
+        TextField,
+        {
+          inputRef,
+          autoComplete,
+          onChange: onInternalChange,
+          onBlur,
+          value: value || "",
+          name,
+          ref,
+          fullWidth: true,
+          error: !!error,
+          helperText: error?.message,
+          type,
+          ...other
+        }
+      );
+    }
+  });
+});
+RHFTextField.displayName = "RHFTextField";
+const RHFTextFieldPassword = (props) => {
+  const {
+    name,
+    label,
+    skeletonWidth,
+    skeletonHeight
+  } = props;
+  const [showPassword, setShowPassword] = useState(false);
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  return /* @__PURE__ */ jsx(RHFTextField, {
+    name,
+    label,
+    type: showPassword ? "text" : "password",
+    skeletonVariant: "password",
+    autoComplete: "on",
+    skeletonWidth,
+    skeletonHeight,
+    InputProps: {
+      endAdornment: /* @__PURE__ */ jsx(InputAdornment, {
+        position: "end",
+        children: /* @__PURE__ */ jsx(IconButton, {
+          onClick: () => setShowPassword(!showPassword),
+          src: showPassword ? `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye.svg` : `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye_off.svg`
+        })
+      })
+    }
+  });
+};
+export {
+  RHFTextField as R,
+  RHFTextFieldPassword as a
+};

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { RHFTextFieldProps } from './types';
+export declare const RHFTextField: import("react").ForwardRefExoticComponent<(Omit<RHFTextFieldProps & import("@mui/material").StandardTextFieldProps, "ref"> | Omit<RHFTextFieldProps & import("@mui/material").FilledTextFieldProps, "ref"> | Omit<RHFTextFieldProps & import("@mui/material").OutlinedTextFieldProps, "ref">) & import("react").RefAttributes<HTMLInputElement>>;

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { RHFTextFieldProps } from '../../types';
+export declare type SkeletonTextFieldProps = Omit<RHFTextFieldProps, 'name'>;

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

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

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

@@ -0,0 +1,4 @@
+import { RHFTextFieldProps } from '../RHFTextField/types';
+export interface RHFTextFieldPasswordProps extends RHFTextFieldProps {
+    label: string;
+}

package/components/hook-form/RHFUpload/RHFUploadImage/index.d.ts

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

package/components/hook-form/RHFUpload/RHFUploadImage/styles.d.ts

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

package/components/hook-form/RHFUpload/RHFUploadImage/subcomponents/UploadImage/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { UploadImageProps } from './types';
+export default function UploadImage({ error, file, helperText, sx, ...other }: UploadImageProps): JSX.Element;

package/components/hook-form/RHFUpload/RHFUploadImage/subcomponents/UploadImage/styles.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const WrapperUploadImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DropZoneStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PlaceholderStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerUploadBody: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Containermessage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerTitle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerDescription: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerConditions: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerPlaceHolder: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperFileImage: 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/RHFUpload/RHFUploadImage/subcomponents/UploadImage/subcomponents/Skeleton/index.d.ts

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

package/components/hook-form/RHFUpload/RHFUploadImage/subcomponents/UploadImage/subcomponents/Skeleton/styles.d.ts

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

package/components/hook-form/RHFUpload/RHFUploadImage/subcomponents/UploadImage/types.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { DropzoneOptions } from 'react-dropzone';
+import type { SxProps } from '@mui/material';
+import type { Theme } from '@mui/material/styles';
+import { CustomFile } from '../../../types';
+export interface UploadImageProps extends DropzoneOptions {
+    error?: boolean;
+    file: CustomFile | string | null;
+    helperText?: ReactNode;
+    sx?: SxProps<Theme>;
+}

package/components/hook-form/RHFUpload/RHFUploadImage/types.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { DropzoneOptions } from 'react-dropzone';
+import { CustomFile } from '../types';
+import type { SxProps } from '@mui/material';
+import type { Theme } from '@mui/material/styles';
+export interface UploadImageProps extends DropzoneOptions {
+    error?: boolean;
+    file: CustomFile | string | null;
+    helperText?: ReactNode;
+    sx?: SxProps<Theme>;
+}
+export interface RHFUploadImageProps extends Omit<UploadImageProps, 'file' | 'onDrop'> {
+    name: string;
+}