dynamic-modal 1.1.19 → 1.1.21

package/dist/src/components/make-table/make-table.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IMakeTableProps } from '../../interfaces/make-table';
+declare const MakeTable: FC<IMakeTableProps>;
+export default MakeTable;

package/dist/src/components/make-table/make-table.js

@@ -0,0 +1,100 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import useRenderIf from '../../hooks/use-render-if';
+import { ComponentStateContext } from '../../context/component/component-state';
+import useLiveData from '../../hooks/use-live-data';
+import { Controller } from 'react-hook-form';
+const MakeTable = ({ element, watch, control, setValue }) => {
+    const [liveSearching, setLiveSearching] = useState(false);
+    const [selected, setSelected] = useState('');
+    const [rowSelected, setRowSelected] = useState(new Map());
+    const { Select } = useContext(ComponentStateContext);
+    const { Button } = useContext(ComponentStateContext);
+    const { selectTitleName, selectValueName, selectActionName, selectPlaceholder, renderIf, columns, name: elementName, data, liveData: elementLiveData, style, buttonStyle } = element;
+    const { checkLiveData, liveData, setLiveData } = useLiveData({
+        elementLiveData,
+    });
+    const { checkRender, render, setRender } = useRenderIf({
+        elementRenderIf: renderIf,
+    });
+    const addToTable = useCallback((selected) => {
+        if (selected === '')
+            return;
+        const elementSelected = data.find((e) => e[selectValueName] === selected);
+        if (elementSelected) {
+            const currentElements = new Map(rowSelected.entries());
+            currentElements.set(selected, elementSelected);
+            setValue(elementName, Array.from(currentElements.values()));
+            setRowSelected(currentElements);
+            setSelected('');
+        }
+    }, [data, rowSelected, setRowSelected, setSelected]);
+    const tableButtonAction = useCallback((row, isDeleteAction, action) => {
+        const id = row[selectValueName];
+        if (isDeleteAction) {
+            const currentElements = new Map(rowSelected.entries());
+            currentElements.delete(id);
+            setRowSelected(currentElements);
+            return;
+        }
+        if (action)
+            action(row);
+    }, [rowSelected, setRowSelected]);
+    useEffect(() => {
+        const { unsubscribe } = watch((formData, { name, type }) => {
+            if (!name)
+                return;
+            if (renderIf) {
+                checkRender(formData, { name, type }).then((renderStatus) => {
+                    if (renderStatus === undefined || renderStatus === null)
+                        return;
+                    if (render !== renderStatus) {
+                        setRender(!!renderStatus);
+                    }
+                });
+            }
+            if (elementLiveData) {
+                setLiveSearching(true);
+                checkLiveData(formData, { name, type })
+                    .then((options) => {
+                    if (options === undefined || options === null)
+                        return;
+                    setLiveData(options);
+                })
+                    .finally(() => {
+                    setLiveSearching(false);
+                });
+            }
+        });
+        return () => unsubscribe();
+    }, [watch, render, liveData]);
+    if (!render)
+        return null;
+    const selectOptions = useMemo(() => {
+        return data.map((e) => {
+            const id = e[selectValueName];
+            const name = e[selectTitleName];
+            return {
+                id,
+                name
+            };
+        });
+    }, [data]);
+    const keyColumns = useMemo(() => {
+        return columns.map((e) => e.title);
+    }, [columns]);
+    const tableData = useMemo(() => {
+        return Array.from(rowSelected.values());
+    }, [rowSelected]);
+    return (_jsxs("div", { className: 'flex flex-col gap-2', style: { ...style }, children: [_jsxs("div", { className: "flex w-full justify-between gap-4", children: [_jsx(Controller, { control: control, name: elementName, defaultValue: [], render: ({ field: { value } }) => (_jsx("input", { type: 'hidden', value: value })) }), _jsx(Select, { name: 'table-select-field', placeholder: selectPlaceholder, isSearch: true, value: selected, invalid: false, options: liveData || selectOptions, liveSearching: liveSearching, onChange: (selected) => {
+                            setSelected(selected);
+                        } }), _jsx(Button, { style: buttonStyle, text: selectActionName, onClick: () => addToTable(selected) })] }), _jsxs("table", { className: "text-[11px] w-full shadow-md sm:rounded-lg", children: [_jsx("thead", { className: "sticky top-0 text-gray-700 bg-gray-50 text-center z-10", children: _jsx("tr", { children: keyColumns.map((title) => (_jsx("th", { scope: 'col', className: 'px-6 py-3', children: title }))) }) }), _jsx("tbody", { children: tableData.map((row, index) => {
+                            return (_jsx("tr", { className: "bg-white border-b hover:bg-gray-50 text-center", children: columns.map(({ Icon, isButton, action, isDeleteAction, style, ...column }) => {
+                                    if (!isButton)
+                                        return (_jsx("td", { className: 'px-6 py-4', style: style, children: row[column.key] ?? '' }));
+                                    return (_jsx("td", { children: _jsx("button", { className: 'p-2 rounded-md text-lg', onClick: () => { tableButtonAction(row, isDeleteAction, action); }, style: style, children: Icon && _jsx(Icon, {}) }) }));
+                                }) }, `row-${row[selectValueName]}-i-${index}`));
+                        }) })] })] }));
+};
+export default MakeTable;

package/dist/src/components/make-textarea/make-textarea.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IMakeTextareaProps } from '../../interfaces/make-textarea';
+declare const MakeTextarea: FC<IMakeTextareaProps>;
+export default MakeTextarea;

package/dist/src/components/make-textarea/make-textarea.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useId } from 'react';
+import { Controller } from 'react-hook-form';
+import { ComponentStateContext } from '../../context/component/component-state';
+import useEnableIf from '../../hooks/use-enable-if';
+import useRenderIf from '../../hooks/use-render-if';
+const MakeTextarea = ({ element, control, watch, unregister, }) => {
+    const { Textarea } = useContext(ComponentStateContext);
+    const { name: elementName, validation: { required, message, regex, ...otherValidation }, enableIf, renderIf, ...inputProps } = element;
+    const { checkEnable, enable, setEnable } = useEnableIf({
+        elementEnableIf: enableIf,
+    });
+    const { checkRender, render, setRender } = useRenderIf({
+        elementRenderIf: renderIf,
+    });
+    const elementId = useId();
+    useEffect(() => {
+        const { unsubscribe } = watch((formData, { name, type }) => {
+            if (!name)
+                return;
+            if (enableIf) {
+                checkEnable(formData, { name, type }).then((enableStatus) => {
+                    if (enableStatus === undefined || enableStatus === null)
+                        return;
+                    if (enable !== enableStatus)
+                        setEnable(enableStatus);
+                });
+            }
+            if (renderIf) {
+                checkRender(formData, { name, type }).then((renderStatus) => {
+                    if (renderStatus === undefined || renderStatus === null)
+                        return;
+                    if (render !== renderStatus) {
+                        if (render && !renderStatus)
+                            unregister(elementName);
+                        setRender(!!renderStatus);
+                    }
+                });
+            }
+        });
+        return () => unsubscribe();
+    }, [watch, render, enable]);
+    if (!render)
+        return null;
+    return (_jsx(Controller, { name: elementName, control: control, rules: {
+            required: {
+                value: required,
+                message: message ?? '',
+            },
+            pattern: regex
+                ? {
+                    value: regex,
+                    message: message ?? '',
+                }
+                : undefined,
+            ...otherValidation,
+        }, render: ({ field: { onChange, value }, fieldState: { invalid, error }, }) => (_jsx(Textarea, { ...inputProps, id: elementId, name: elementName, onChange: onChange, value: value ?? '', invalid: invalid, error: error, disabled: element.disabled ?? !enable })) }));
+};
+export default MakeTextarea;

package/dist/src/components/make-toggle/make-toggle.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IMakeToggleProps } from '../../interfaces/make-toggle';
+declare const MakeToggle: FC<IMakeToggleProps>;
+export default MakeToggle;

package/dist/src/components/make-toggle/make-toggle.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useId } from 'react';
+import { Controller } from 'react-hook-form';
+import { ComponentStateContext } from '../../context/component/component-state';
+import useEnableIf from '../../hooks/use-enable-if';
+import useRenderIf from '../../hooks/use-render-if';
+const MakeToggle = ({ element, control, watch, unregister, }) => {
+    const { Toggle } = useContext(ComponentStateContext);
+    const { name: elementName, validation: { required, message, regex, ...otherValidation }, enableIf, renderIf, ...inputProps } = element;
+    const { checkEnable, enable, setEnable } = useEnableIf({
+        elementEnableIf: enableIf,
+    });
+    const { checkRender, render, setRender } = useRenderIf({
+        elementRenderIf: renderIf,
+    });
+    const elementId = useId();
+    useEffect(() => {
+        const { unsubscribe } = watch((formData, { name, type }) => {
+            if (!name)
+                return;
+            if (enableIf) {
+                checkEnable(formData, { name, type }).then((enableStatus) => {
+                    if (enableStatus === undefined || enableStatus === null)
+                        return;
+                    if (enable !== enableStatus)
+                        setEnable(enableStatus);
+                });
+            }
+            if (renderIf) {
+                checkRender(formData, { name, type }).then((renderStatus) => {
+                    if (renderStatus === undefined || renderStatus === null)
+                        return;
+                    if (render !== renderStatus) {
+                        if (render && !renderStatus)
+                            unregister(elementName);
+                        setRender(!!renderStatus);
+                    }
+                });
+            }
+        });
+        return () => unsubscribe();
+    }, [watch, render, enable]);
+    if (!render)
+        return null;
+    return (_jsx(Controller, { control: control, name: elementName, rules: {
+            required: {
+                value: required,
+                message: message ?? '',
+            },
+            pattern: regex
+                ? {
+                    value: regex,
+                    message: message ?? '',
+                }
+                : undefined,
+            ...otherValidation,
+        }, render: ({ field: { onChange, value }, fieldState: { invalid, error }, }) => (_jsx(Toggle, { ...inputProps, id: elementId, name: elementName, onChange: onChange, value: value ?? '', invalid: invalid, error: error, disabled: element.disabled ?? !enable })) }));
+};
+export default MakeToggle;

package/dist/src/components/make-upload/make-upload.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IMakeUploadProps } from '../../interfaces/make-upload';
+declare const MakeUpload: FC<IMakeUploadProps>;
+export default MakeUpload;

package/dist/src/components/make-upload/make-upload.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useId } from 'react';
+import { Controller } from 'react-hook-form';
+import InputUpload from '../input-upload/input-upload';
+import useEnableIf from '../../hooks/use-enable-if';
+import useRenderIf from '../../hooks/use-render-if';
+const MakeUpload = ({ element, control, watch, unregister, }) => {
+    const { name: elementName, validation: { required, message, regex, ...otherValidation }, enableIf, renderIf, ...inputProps } = element;
+    const { checkEnable, enable, setEnable } = useEnableIf({
+        elementEnableIf: enableIf,
+    });
+    const { checkRender, render, setRender } = useRenderIf({
+        elementRenderIf: renderIf,
+    });
+    const elementId = useId();
+    useEffect(() => {
+        const { unsubscribe } = watch((formData, { name, type }) => {
+            if (!name)
+                return;
+            if (enableIf) {
+                checkEnable(formData, { name, type }).then((enableStatus) => {
+                    if (enableStatus === undefined || enableStatus === null)
+                        return;
+                    if (enable !== enableStatus)
+                        setEnable(enableStatus);
+                });
+            }
+            if (renderIf) {
+                checkRender(formData, { name, type }).then((renderStatus) => {
+                    if (renderStatus === undefined || renderStatus === null)
+                        return;
+                    if (render !== renderStatus) {
+                        if (render && !renderStatus)
+                            unregister(elementName);
+                        setRender(!!renderStatus);
+                    }
+                });
+            }
+        });
+        return () => unsubscribe();
+    }, [watch, render, enable]);
+    if (!render)
+        return null;
+    return (_jsx(Controller, { control: control, name: elementName, rules: {
+            required: {
+                value: required,
+                message: message ?? '',
+            },
+            pattern: regex
+                ? {
+                    value: regex,
+                    message: message ?? '',
+                }
+                : undefined,
+            ...otherValidation,
+        }, render: ({ field: { onChange } }) => (_jsx(InputUpload, { ...inputProps, id: elementId, name: elementName, onChange: onChange, disabled: element.disabled ?? !enable })) }));
+};
+export default MakeUpload;

package/dist/src/components/make-watcher/make-watcher.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IMakeWatcherProps } from '../../interfaces/make-watcher';
+declare const MakeWatcher: FC<IMakeWatcherProps>;
+export default MakeWatcher;

package/dist/src/components/make-watcher/make-watcher.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useId, useState } from 'react';
+import { ComponentStateContext } from '../../context/component/component-state';
+const MakeWatcher = ({ element, watch }) => {
+    const [value, setValue] = useState('');
+    const { Input } = useContext(ComponentStateContext);
+    const { watchList, style, ...watcherProps } = element;
+    const elementId = useId();
+    useEffect(() => {
+        const { unsubscribe } = watch((formData, { name }) => {
+            if (!name)
+                return;
+            if (watchList.includes(name)) {
+                const watchValue = [];
+                watchList.forEach((watchName) => {
+                    const fragment = formData[watchName];
+                    if (fragment)
+                        watchValue.push(fragment);
+                });
+                setValue(watchValue.join(' '));
+            }
+        });
+        return () => unsubscribe();
+    }, [watch]);
+    return (_jsx(Input, { ...watcherProps, name: `watcher-${elementId}`, id: elementId, value: value ?? '', onChange: () => { }, invalid: false, disabled: true, style: style }));
+};
+export default MakeWatcher;

package/dist/src/components/portal/portal.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { IPortal } from '../../interfaces/portal';
+export declare const Portal: FC<IPortal>;

package/dist/src/components/portal/portal.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+export const Portal = (props) => {
+    const ref = useRef(null);
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        if (mounted && !props.portalOpen && props.closeTime > 0) {
+            const timeoutId = setTimeout(() => {
+                setMounted(false);
+                ref.current = null;
+            }, props.closeTime);
+            return () => clearTimeout(timeoutId);
+        }
+        else if (mounted && !props.portalOpen) {
+            setMounted(false);
+            ref.current = null;
+        }
+        else if (!mounted && props.portalOpen) {
+            ref.current = document.querySelector(props.portalTag ?? '#portal');
+            setMounted(true);
+        }
+    }, [mounted, props.closeTime, props.portalOpen, props.portalTag]);
+    if (!mounted && !ref.current)
+        return null;
+    return createPortal(_jsx("div", { className: `transition-all delay-100 fixed top-0 left-0 w-full h-full grid place-items-center bg-black bg-opacity-40 z-20 ${props.useBlur && 'backdrop-blur-sm'}`, children: props.children }), ref.current);
+};

package/dist/src/context/component/component-state.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IComponentState, IComponentStateProps } from '../../interfaces/component-state';
+export declare const ComponentStateContext: React.Context<IComponentState>;
+export declare const ComponentState: ({ children, components, }: IComponentStateProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/context/component/component-state.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, createContext } from 'react';
+export const ComponentStateContext = createContext({});
+export const ComponentState = ({ children, components, }) => {
+    const value = useMemo(() => components, [components]);
+    return (_jsx(ComponentStateContext.Provider, { value: value, children: children }));
+};

package/dist/src/hooks/modal-handler.d.ts

@@ -0,0 +1,7 @@
+import { IModal, IModalConfigProps } from '../interfaces/modal';
+interface IModalHandler {
+    openModal: (config: IModalConfigProps) => void;
+    modalProps: IModal;
+}
+export declare function useModalHandler(): IModalHandler;
+export {};

package/dist/src/hooks/modal-handler.js

@@ -0,0 +1,25 @@
+'use client';
+import { useState } from 'react';
+export function useModalHandler() {
+    const initialState = {
+        modalProps: {
+            config: {},
+            close: () => { },
+            open: false,
+        },
+        openModal: () => { },
+    };
+    const [modalConfig, setModalConfig] = useState(initialState);
+    const openModal = (config) => {
+        if (!config) {
+            alert(`¡WARNING! this modal was not returned config, please check before use`);
+            return;
+        }
+        setModalConfig({ openModal, modalProps: { config, open: true, close } });
+    };
+    const closeModal = () => setModalConfig(initialState);
+    return {
+        openModal,
+        modalProps: { ...modalConfig.modalProps, close: closeModal },
+    };
+}

package/dist/src/hooks/use-enable-if.d.ts

@@ -0,0 +1,10 @@
+import { IModalRenderCondition } from '../interfaces/modal';
+export interface IRenderIfProps {
+    elementEnableIf?: IModalRenderCondition;
+}
+declare const useEnableIf: ({ elementEnableIf }: IRenderIfProps) => {
+    enable: boolean;
+    checkEnable: (formData: Record<string, unknown>, { name }: Record<"name", string> & Record<"type", string | undefined>) => Promise<boolean | undefined>;
+    setEnable: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+export default useEnableIf;

package/dist/src/hooks/use-enable-if.js

@@ -0,0 +1,36 @@
+'use client';
+import { useState } from 'react';
+import { liveDataHandler } from '../util/general/general.util';
+const useEnableIf = ({ elementEnableIf }) => {
+    const [enable, setEnable] = useState(() => {
+        return elementEnableIf === undefined;
+    });
+    const checkEnable = async (formData, { name }) => {
+        const targetFieldData = formData[name];
+        // if (
+        //   targetFieldData === undefined ||
+        //   targetFieldData === '' ||
+        //   targetFieldData === null
+        // )
+        //   return false;
+        const enableIfConfig = elementEnableIf;
+        const isLiveEnable = !!enableIfConfig?.action && !!enableIfConfig.condition;
+        if (isLiveEnable && enableIfConfig.condition.includes(name)) {
+            const enableStatus = await liveDataHandler(targetFieldData, formData, enableIfConfig.action);
+            return enableStatus;
+        }
+        else {
+            const enableConditionList = Object.keys(elementEnableIf);
+            if (enableConditionList.includes(name)) {
+                const enableStatus = enableIfConfig[name].includes(targetFieldData) || enableIfConfig[name].includes('*');
+                return enableStatus;
+            }
+        }
+    };
+    return {
+        enable,
+        checkEnable,
+        setEnable,
+    };
+};
+export default useEnableIf;

package/dist/src/hooks/use-live-data.d.ts

@@ -0,0 +1,11 @@
+import { IModalLiveDataCondition } from '../interfaces/modal';
+import { IOption } from '../interfaces/option';
+export interface ILiveDataProps {
+    elementLiveData?: IModalLiveDataCondition;
+}
+declare const useLiveData: ({ elementLiveData }: ILiveDataProps) => {
+    liveData: IOption[] | undefined;
+    checkLiveData: (formData: Record<string, unknown>, { name }: Record<"name", string> & Record<"type", string | undefined>) => Promise<IOption[] | null>;
+    setLiveData: import("react").Dispatch<import("react").SetStateAction<IOption[] | undefined>>;
+};
+export default useLiveData;

package/dist/src/hooks/use-live-data.js

@@ -0,0 +1,23 @@
+'use client';
+import { useState } from 'react';
+import { liveDataAction } from '../util/general/general.util';
+const useLiveData = ({ elementLiveData }) => {
+    const [liveData, setLiveData] = useState(undefined);
+    const checkLiveData = async (formData, { name }) => {
+        const targetFieldData = formData[name];
+        const liveDataConfig = elementLiveData;
+        const isLiveData = !!liveDataConfig?.action && !!liveDataConfig.condition;
+        if (!isLiveData)
+            return null;
+        if (liveDataConfig.condition.includes(name)) {
+            return await liveDataAction(targetFieldData, formData, liveDataConfig.action);
+        }
+        return null;
+    };
+    return {
+        liveData,
+        checkLiveData,
+        setLiveData,
+    };
+};
+export default useLiveData;

package/dist/src/hooks/use-render-if.d.ts

@@ -0,0 +1,10 @@
+import { IModalRenderCondition } from '../interfaces/modal';
+export interface IRenderIfProps {
+    elementRenderIf?: IModalRenderCondition;
+}
+declare const useRenderIf: ({ elementRenderIf }: IRenderIfProps) => {
+    render: boolean;
+    checkRender: (formData: Record<string, unknown>, { name }: Record<"name", string> & Record<"type", string | undefined>) => Promise<boolean | undefined>;
+    setRender: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+export default useRenderIf;

package/dist/src/hooks/use-render-if.js

@@ -0,0 +1,36 @@
+'use client';
+import { useState } from 'react';
+import { liveDataHandler } from '../util/general/general.util';
+const useRenderIf = ({ elementRenderIf }) => {
+    const [render, setRender] = useState(() => {
+        return elementRenderIf === undefined;
+    });
+    const checkRender = async (formData, { name }) => {
+        const targetFieldData = formData[name];
+        // if (
+        //   targetFieldData === undefined ||
+        //   targetFieldData === '' ||
+        //   targetFieldData === null
+        // )
+        //   return false;
+        const renderIfConfig = elementRenderIf;
+        const isLiveRender = !!renderIfConfig?.action && !!renderIfConfig?.condition;
+        if (isLiveRender && renderIfConfig.condition.includes(name)) {
+            const renderStatus = await liveDataHandler(targetFieldData, formData, renderIfConfig.action);
+            return renderStatus;
+        }
+        else {
+            const renderConditionList = Object.keys(elementRenderIf);
+            if (renderConditionList.includes(name)) {
+                const renderStatus = renderIfConfig[name].includes(targetFieldData) || renderIfConfig[name].includes('*');
+                return renderStatus;
+            }
+        }
+    };
+    return {
+        render,
+        checkRender,
+        setRender,
+    };
+};
+export default useRenderIf;

package/dist/src/interfaces/component-state.d.ts

@@ -0,0 +1,29 @@
+import { FC, PropsWithChildren } from 'react';
+import { FieldError } from 'react-hook-form';
+import { IOption } from './option';
+import { IMakeInput } from './make-input';
+import { IMakeButton } from './make-button';
+import { IMakeSelect } from './make-select';
+import { IMakeTextarea } from './make-textarea';
+import { IMakeToggle } from './make-toggle';
+import { IMakeCustomUpload } from './make-custom-upload';
+export interface IComponentAditionalProps {
+    onChange: (...event: any[]) => void;
+    value: any;
+    invalid: boolean;
+    error?: FieldError;
+    liveSearching?: boolean;
+}
+export interface IComponentState {
+    ModalButtonCancel: FC<Omit<IMakeButton, 'elementType'>>;
+    ModalButtonAction: FC<Omit<IMakeButton, 'elementType'>>;
+    Button: FC<Omit<IMakeButton, 'elementType'>>;
+    Input: FC<Omit<IMakeInput, 'elementType' | 'validation' | 'renderIf' | 'enableIf'> & IComponentAditionalProps>;
+    CustomUpload: FC<Omit<IMakeCustomUpload, 'elementType' | 'validation' | 'renderIf' | 'enableIf'> & IComponentAditionalProps>;
+    Select: FC<Omit<IMakeSelect, 'elementType' | 'validation' | 'renderIf' | 'enableIf'> & IComponentAditionalProps & Record<'options', Array<IOption>>>;
+    Textarea: FC<Omit<IMakeTextarea, 'elementType' | 'validation' | 'renderIf' | 'enableIf'> & IComponentAditionalProps>;
+    Toggle: FC<Omit<IMakeToggle, 'elementType' | 'validation' | 'renderIf' | 'enableIf'> & IComponentAditionalProps>;
+}
+export interface IComponentStateProps extends PropsWithChildren {
+    components: IComponentState;
+}

package/dist/src/interfaces/component-state.js

@@ -0,0 +1 @@
+export {};

package/dist/src/interfaces/custom-upload.d.ts

@@ -0,0 +1,12 @@
+import { ChangeEvent, CSSProperties } from 'react';
+export interface ICustomUpload {
+    id?: string;
+    value?: string;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    accept?: string;
+    label?: string;
+    helpText?: string;
+    style?: CSSProperties;
+    name: string;
+    disabled?: boolean;
+}

package/dist/src/interfaces/custom-upload.js

@@ -0,0 +1 @@
+export {};

package/dist/src/interfaces/field.d.ts

@@ -0,0 +1,33 @@
+import { CSSProperties } from 'react';
+import { Control, FieldValues, UseFormSetValue, UseFormUnregister, UseFormWatch } from 'react-hook-form';
+import { IModalRenderCondition } from './modal';
+export interface IValidationBase<T> {
+    value: T;
+    message: string;
+}
+export interface IField {
+    name: string;
+    id?: string;
+    label?: string;
+    style?: CSSProperties;
+    placeholder?: string;
+    defaultValue?: any;
+    renderIf?: IModalRenderCondition;
+    enableIf?: IModalRenderCondition;
+    validation: {
+        required: boolean;
+        regex?: RegExp;
+        message?: string;
+        maxLength?: IValidationBase<number>;
+        minLength?: IValidationBase<number>;
+        min?: IValidationBase<number | string>;
+        max?: IValidationBase<number | string>;
+    };
+    disabled?: boolean;
+}
+export interface IFieldProps {
+    control: Control<FieldValues, unknown>;
+    watch: UseFormWatch<FieldValues>;
+    setValue: UseFormSetValue<FieldValues>;
+    unregister: UseFormUnregister<FieldValues>;
+}

package/dist/src/interfaces/field.js

@@ -0,0 +1 @@
+export {};