@m4l/components 0.1.40 → 0.1.41

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

@@ -0,0 +1,279 @@
+import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { useFormContext, Controller } from "react-hook-form";
+import { styled as styled$1, Skeleton, Autocomplete, TextField, CircularProgress } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { I as Image } from "../../Image/index.93d5f37f.js";
+import { useMemo, useState, useEffect } from "react";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+const WrapperAutocomplete = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  "& .MuiAutocomplete-root": {
+    width: "100%"
+  },
+  "& .m4l_image": {
+    marginLeft: theme.spacing(1.5)
+  }
+}));
+const WrapperOption = styled("li")(({
+  theme
+}) => ({
+  "& .m4l_image": {
+    marginRight: theme.spacing(1.5)
+  }
+}));
+function withRenderOption(getUrlImage, imageWidth, imageHeight) {
+  return function RenderOption(optionProps, option) {
+    return /* @__PURE__ */ jsxs(WrapperOption, {
+      ...optionProps,
+      children: [/* @__PURE__ */ jsx(Image, {
+        src: getUrlImage(option),
+        width: imageWidth,
+        height: imageHeight
+      }), optionProps.key]
+    });
+  };
+}
+const WrapperSkeletonRHFAutocomplete = styled$1("div")(({
+  theme
+}) => ({
+  width: "100%",
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  height: `${theme.spacing(4.5)}`,
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: `${theme.spacing(1)}`,
+  padding: `0 ${theme.spacing(2)}`,
+  overflow: "hidden",
+  [theme.breakpoints.down("md")]: {
+    width: "100%"
+  }
+}));
+const SkeletonContainerText = styled$1("div")(({
+  theme
+}) => ({
+  width: "100%",
+  height: "auto",
+  overflow: "hidden",
+  margin: theme.spacing(1.5)
+}));
+const SkeletonRHFAutocomplete = (props) => {
+  const {
+    withImage,
+    skeletonWidth,
+    skeletonHeight,
+    imageWidth,
+    imageHeight
+  } = props;
+  if (withImage) {
+    return /* @__PURE__ */ jsxs(WrapperSkeletonRHFAutocomplete, {
+      children: [/* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: imageWidth,
+        height: imageHeight,
+        sx: {
+          minWidth: imageWidth
+        }
+      }), /* @__PURE__ */ jsx(SkeletonContainerText, {
+        children: /* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: skeletonWidth,
+          height: skeletonHeight
+        })
+      }), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: 16,
+        height: 16,
+        sx: {
+          minWidth: "16px"
+        }
+      })]
+    });
+  }
+  return /* @__PURE__ */ jsxs(WrapperSkeletonRHFAutocomplete, {
+    children: [/* @__PURE__ */ jsx(SkeletonContainerText, {
+      sx: {
+        marginLeft: "0px"
+      },
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: skeletonWidth,
+        height: skeletonHeight
+      })
+    }), /* @__PURE__ */ jsx(Skeleton, {
+      variant: "circular",
+      width: 16,
+      height: 16,
+      sx: {
+        minWidth: "16px"
+      }
+    })]
+  });
+};
+function RHFAutocomplete(props) {
+  const {
+    name,
+    getOptionLabel,
+    isOptionEqualToValue,
+    label,
+    skeletonWidth = 100,
+    skeletonHeight = "18px",
+    options,
+    disabled,
+    getOptionUrlImage,
+    imageWidth = "24px",
+    imageHeight = "24px",
+    onOpen,
+    onClose,
+    loading,
+    onChangeFilterParmsLocal,
+    ...other
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const {
+    control
+  } = useFormContext();
+  const withImage = useMemo(() => getOptionUrlImage !== void 0, [getOptionUrlImage]);
+  const [open, setOpen] = useState(false);
+  const onCloseLocal = (event, reason) => {
+    setOpen(false);
+    if (onClose)
+      onClose(event, reason);
+  };
+  const onOpenLocal = (event) => {
+    setOpen(true);
+    if (onOpen)
+      onOpen(event);
+  };
+  const getOptionLabelLocal = (option) => {
+    if (option === void 0 || option === null) {
+      return "";
+    }
+    return getOptionLabel(option);
+  };
+  const getOptionUrlImageLocal = (option) => {
+    if (option === void 0 || option === null || getOptionUrlImage === void 0) {
+      return "";
+    }
+    return getOptionUrlImage(option);
+  };
+  const isOptionEqualToValueLocal = (option, value) => {
+    if (value === void 0 || value === null || option === null) {
+      return false;
+    }
+    return isOptionEqualToValue(option, value);
+  };
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonRHFAutocomplete, {
+      withImage,
+      skeletonWidth,
+      skeletonHeight,
+      imageWidth,
+      imageHeight
+    });
+  }
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field: {
+        onChange,
+        value
+      },
+      fieldState: {
+        error
+      }
+    }) => {
+      const [inputValue, setInputValue] = useState(getOptionLabelLocal(value));
+      useEffect(() => {
+        if (!open && value === null && inputValue !== "") {
+          setInputValue("");
+        }
+        if (!open && value !== null && options.length === 0 && onChangeFilterParmsLocal) {
+          onChangeFilterParmsLocal(getOptionLabelLocal(value), "reset");
+        }
+      }, [value]);
+      const checkKeyDown = (e) => {
+        if (e.code === "Enter")
+          e.preventDefault();
+      };
+      return /* @__PURE__ */ jsx(WrapperAutocomplete, {
+        className: "m4l_rhf_autocomplete",
+        children: /* @__PURE__ */ jsx(Autocomplete, {
+          onKeyDown: checkKeyDown,
+          autoComplete: true,
+          autoSelect: false,
+          options,
+          getOptionLabel: getOptionLabelLocal,
+          inputValue,
+          clearOnBlur: false,
+          onInputChange: (_event, newValue, reason) => {
+            if (reason === "input") {
+              setInputValue(newValue);
+              if (onChangeFilterParmsLocal) {
+                onChangeFilterParmsLocal(newValue, reason);
+              }
+            }
+            onChange(null);
+          },
+          isOptionEqualToValue: isOptionEqualToValueLocal,
+          disableClearable: true,
+          value: value || null,
+          onOpen: onOpenLocal,
+          onClose: onCloseLocal,
+          onChange: (_e, val) => {
+            setInputValue(getOptionLabelLocal(val));
+            onChange(val);
+          },
+          filterOptions: onChangeFilterParmsLocal ? (x) => x : void 0,
+          loading,
+          loadingText: getLabel("rhf_autocomplete.loading_options"),
+          disabled,
+          noOptionsText: getLabel("rhf_autocomplete.no_options"),
+          renderOption: withImage ? withRenderOption(getOptionUrlImageLocal, imageWidth, imageHeight) : void 0,
+          renderInput: (params) => {
+            return /* @__PURE__ */ jsx(TextField, {
+              ...params,
+              label,
+              fullWidth: true,
+              SelectProps: {
+                native: true
+              },
+              InputProps: {
+                ...params.InputProps,
+                startAdornment: withImage && value ? /* @__PURE__ */ jsx(Image, {
+                  src: getOptionUrlImageLocal(value),
+                  width: imageWidth,
+                  height: imageHeight
+                }, "ImageTextField") : null,
+                endAdornment: /* @__PURE__ */ jsxs(Fragment, {
+                  children: [loading ? /* @__PURE__ */ jsx(CircularProgress, {
+                    color: "inherit",
+                    size: 20
+                  }) : null, params.InputProps.endAdornment]
+                })
+              },
+              autoComplete: "off",
+              error: !!error,
+              helperText: error?.message,
+              ...other
+            });
+          }
+        })
+      });
+    }
+  });
+}
+function getRHFAutocompleteComponentsDictionary() {
+  return ["rhf_autocomplete"];
+}
+export {
+  RHFAutocomplete as R,
+  getRHFAutocompleteComponentsDictionary as g
+};

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+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/subcomponents/Skeleton/index.d.ts

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

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

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

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

@@ -0,0 +1,4 @@
+import { RHFAutocompleteProps } from '../../types';
+export interface SkeletonRHFAutocompleteProps extends Pick<RHFAutocompleteProps<any>, 'skeletonWidth' | 'skeletonHeight' | 'imageWidth' | 'imageHeight'> {
+    withImage: boolean;
+}

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { AutocompleteCloseReason, AutocompleteInputChangeReason, 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;
+    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;
+    onChangeFilterParmsLocal?: (newValue: string, reason: AutocompleteInputChangeReason) => void;
+} & TextFieldProps;

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

@@ -0,0 +1,3 @@
+import { Dictionary } from '@m4l/core';
+export declare function getRHFAutocompleteAsyncComponentsDictionary(): string[];
+export declare const defaultRHFAutocompleteAsyncDictionary: Dictionary;

package/components/hook-form/RHFAutocompleteAsync/index.ca696cce.js

@@ -0,0 +1,87 @@
+import { useState, useCallback, useEffect } from "react";
+import { useNetwork, getPropertyByString } from "@m4l/core";
+import debounce from "lodash/debounce";
+import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.de93fe01.js";
+import { jsx } from "react/jsx-runtime";
+function RHFAutocompleteAsync(props) {
+  const {
+    name,
+    endPoint,
+    timeout = 5e3,
+    parms,
+    resultField = "data",
+    isRemote = true,
+    onChangeFilterParms,
+    ...other
+  } = props;
+  const {
+    networkOperation
+  } = useNetwork();
+  const [options, setOptions] = useState([]);
+  const [open, setOpen] = useState(false);
+  const [loading, setIsloading] = useState(false);
+  const [canLoadOptions, setCanLoadOptions] = useState(true);
+  const [filterParms, setFilterParms] = useState({});
+  const debouncedFilter = useCallback(debounce((newFilterParms) => {
+    setCanLoadOptions(true);
+    setFilterParms(newFilterParms);
+  }, 300), []);
+  const onChangeFilterParmsLocal = (newValue) => {
+    if (onChangeFilterParms) {
+      debouncedFilter(onChangeFilterParms(newValue));
+    }
+  };
+  useEffect(() => {
+    setCanLoadOptions(true);
+  }, [parms, endPoint]);
+  useEffect(() => {
+    if (!open || loading) {
+      return;
+    }
+    if (!canLoadOptions) {
+      return;
+    }
+    setIsloading(true);
+    setOptions([]);
+    setCanLoadOptions(false);
+    networkOperation({
+      method: "GET",
+      endPoint,
+      timeout,
+      parms: {
+        ...parms,
+        ...filterParms
+      },
+      isRemote
+    }).then((response) => {
+      const newOptions = getPropertyByString(response, resultField);
+      setOptions(newOptions);
+    }).catch(() => {
+      setCanLoadOptions(true);
+    }).finally(() => {
+      setIsloading(false);
+    });
+    return () => {
+    };
+  }, [open, parms, filterParms, endPoint]);
+  return /* @__PURE__ */ jsx(RHFAutocomplete, {
+    name,
+    loading,
+    options,
+    onChangeFilterParmsLocal: onChangeFilterParms ? onChangeFilterParmsLocal : void 0,
+    onOpen: () => {
+      setOpen(true);
+    },
+    onClose: () => {
+      setOpen(false);
+    },
+    ...other
+  });
+}
+function getRHFAutocompleteAsyncComponentsDictionary() {
+  return getRHFAutocompleteComponentsDictionary();
+}
+export {
+  RHFAutocompleteAsync as R,
+  getRHFAutocompleteAsyncComponentsDictionary as g
+};

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

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

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

@@ -0,0 +1,9 @@
+import { RHFAutocompleteProps } from '../RHFAutocomplete/types';
+export declare type RHFAutocompleteAsyncProps<T> = {
+    endPoint: string;
+    timeout?: number;
+    parms?: Record<string, any>;
+    resultField?: string;
+    isRemote?: boolean;
+    onChangeFilterParms?: (newValue: string) => Record<string, any>;
+} & Omit<RHFAutocompleteProps<T>, 'options' | 'onChangeSearchInput'>;

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

@@ -0,0 +1,68 @@
+import { useFormContext, Controller } from "react-hook-form";
+import { styled as styled$1 } from "@mui/material/styles";
+import { styled, Skeleton, FormControlLabel, Checkbox } from "@mui/material";
+import { useModuleSkeleton } from "@m4l/core";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+const WrapperSkeletonCheckBox = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "36px",
+  height: "36px"
+}));
+const SkeletonCheckBox = () => {
+  return /* @__PURE__ */ jsx(WrapperSkeletonCheckBox, {
+    children: /* @__PURE__ */ jsx(Skeleton, {
+      variant: "rounded",
+      width: "18px",
+      height: "18px"
+    })
+  });
+};
+const ErrorLabel = styled$1("p")(({
+  theme
+}) => ({
+  ...theme.typography.caption,
+  color: theme.palette.error.main,
+  marginRight: 14,
+  marginLeft: 14
+}));
+function RHFCheckbox({
+  name,
+  sizeCheck = "small",
+  ...other
+}) {
+  const {
+    control
+  } = useFormContext();
+  const isSkeleton = useModuleSkeleton();
+  return /* @__PURE__ */ jsx(FormControlLabel, {
+    control: /* @__PURE__ */ jsx(Controller, {
+      name,
+      control,
+      render: ({
+        field,
+        fieldState: {
+          error
+        }
+      }) => {
+        if (isSkeleton) {
+          return /* @__PURE__ */ jsx(SkeletonCheckBox, {});
+        }
+        return /* @__PURE__ */ jsxs(Fragment, {
+          children: [/* @__PURE__ */ jsx(Checkbox, {
+            size: sizeCheck,
+            ...field,
+            checked: field.value
+          }), error?.message && /* @__PURE__ */ jsx(ErrorLabel, {
+            children: error?.message + ""
+          })]
+        });
+      }
+    }),
+    ...other
+  });
+}
+export {
+  RHFCheckbox as R
+};

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { RHFCheckboxProps } from './types';
+export declare const ErrorLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare function RHFCheckbox({ name, sizeCheck, ...other }: RHFCheckboxProps): JSX.Element;

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>, {}>;

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

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

package/components/hook-form/RHFDateTime/index.7f1cbd85.js

@@ -0,0 +1,106 @@
+import { useFormContext, Controller } from "react-hook-form";
+import { Skeleton, TextField } from "@mui/material";
+import { DateTimePicker } from "@mui/x-date-pickers";
+import { useModuleSkeleton } from "@m4l/core";
+import { styled } from "@mui/material/styles";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useFormatter } from "@m4l/graphics";
+const SKTRHFWrapperTextField = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  height: "42.25px",
+  alignItems: "center",
+  justifyContent: "space-between",
+  border: `1px solid ${theme.palette.divider}`,
+  padding: "0 14px",
+  borderRadius: theme.spacing(0.5)
+}));
+const SkeletonRHFDateTime = (props) => {
+  const {
+    skeletonWidth,
+    skeletonHeight
+  } = props;
+  return /* @__PURE__ */ jsxs(SKTRHFWrapperTextField, {
+    children: [/* @__PURE__ */ jsx(Skeleton, {
+      variant: "text",
+      width: skeletonWidth,
+      height: skeletonHeight
+    }), /* @__PURE__ */ jsx(Skeleton, {
+      variant: "circular",
+      width: "20px",
+      height: "20px"
+    })]
+  });
+};
+function RHFDateTime(props) {
+  const {
+    name,
+    autoComplete = "off",
+    skeletonWidth = "50%",
+    skeletonHeight = 14,
+    withMask = true
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  const {
+    control
+  } = useFormContext();
+  const {
+    dateFormatter: {
+      datetimeFormat,
+      datetimeMask
+    }
+  } = useFormatter();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonRHFDateTime, {
+      skeletonWidth,
+      skeletonHeight
+    });
+  }
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field: {
+        value,
+        onChange
+      },
+      fieldState: {
+        error
+      }
+    }) => {
+      return /* @__PURE__ */ jsx(DateTimePicker, {
+        ampm: false,
+        ...(() => {
+          return withMask ? {
+            inputFormat: datetimeFormat,
+            mask: datetimeMask
+          } : {};
+        })(),
+        label: "",
+        value,
+        onChange: (newValue) => {
+          onChange(newValue);
+        },
+        renderInput: (params) => {
+          const checkKeyDown = (e) => {
+            if (e.code === "Enter")
+              e.preventDefault();
+          };
+          return /* @__PURE__ */ jsx(TextField, {
+            ...params,
+            autoComplete,
+            fullWidth: true,
+            error: !!error,
+            helperText: error?.message,
+            onKeyDown: checkKeyDown
+          });
+        }
+      });
+    }
+  });
+}
+export {
+  RHFDateTime as R
+};

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

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

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

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

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SKTRHFWrapperTextField: 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/RHFDateTime/subcomponents/Skeleton/types.d.ts

@@ -0,0 +1,2 @@
+import { RHFDateTimeProps } from '../../types';
+export declare type SkeletonRHFDateTimeProps = Pick<RHFDateTimeProps, 'skeletonWidth' | 'skeletonHeight'>;