dynamic-modal 1.1.19 → 1.1.21

package/dist/components/portal/portal.js

@@ -1,41 +1,9 @@
-"use strict";
 'use client';
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+"use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Portal = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const Portal = (props) => {
     const ref = (0, react_1.useRef)(null);
@@ -59,6 +27,6 @@ const Portal = (props) => {
     }, [mounted, props.closeTime, props.portalOpen, props.portalTag]);
     if (!mounted && !ref.current)
         return null;
-    return (0, react_dom_1.createPortal)(react_1.default.createElement("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-xs'}` }, props.children), ref.current);
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.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);
 };
 exports.Portal = Portal;

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

@@ -1,4 +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) => React.JSX.Element;
+export declare const ComponentState: ({ children, components, }: IComponentStateProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,44 +1,12 @@
-"use strict";
 'use client';
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+"use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentState = exports.ComponentStateContext = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 exports.ComponentStateContext = (0, react_1.createContext)({});
 const ComponentState = ({ children, components, }) => {
     const value = (0, react_1.useMemo)(() => components, [components]);
-    return (react_1.default.createElement(exports.ComponentStateContext.Provider, { value: value }, children));
+    return ((0, jsx_runtime_1.jsx)(exports.ComponentStateContext.Provider, { value: value, children: children }));
 };
 exports.ComponentState = ComponentState;

package/dist/hooks/modal-handler.js

@@ -1,5 +1,5 @@
-"use strict";
 'use client';
+"use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useModalHandler = useModalHandler;
 const react_1 = require("react");

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

@@ -1,5 +1,5 @@
-"use strict";
 'use client';
+"use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const general_util_1 = require("../util/general/general.util");

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

@@ -1,5 +1,5 @@
-"use strict";
 'use client';
+"use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const general_util_1 = require("../util/general/general.util");

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

@@ -1,5 +1,5 @@
-"use strict";
 'use client';
+"use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const general_util_1 = require("../util/general/general.util");

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { default as DynamicModal } from './src/modal';
+export type { IModalConfigLoader, IModalConfigProps, IModalRenderCondition, IModalField, IModalLiveDataCondition } from './src/interfaces/modal';
+export { useModalHandler } from './src/hooks/modal-handler';
+export { ComponentState, ComponentStateContext } from './src/context/component/component-state';
+export type { IComponentState } from './src/interfaces/component-state';

package/dist/index.js

@@ -0,0 +1,4 @@
+'use client';
+export { default as DynamicModal } from './src/modal';
+export { useModalHandler } from './src/hooks/modal-handler';
+export { ComponentState, ComponentStateContext } from './src/context/component/component-state';

package/dist/interfaces/make-description.d.ts

@@ -2,10 +2,11 @@ import { CSSProperties, FC } from 'react';
 import { IFieldProps } from './field';
 export interface IMakeDescription {
     elementType: 'text';
-    text: string;
+    text?: string;
     containerStyle?: CSSProperties;
     textStyle?: CSSProperties;
     Icon?: FC;
+    elements?: Array<Record<'text', string> & Record<'style', CSSProperties>>;
 }
 export interface IMakeDescriptionProps extends IFieldProps {
     element: Omit<IMakeDescription, 'elementType'>;

package/dist/modal.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { IModal } from './interfaces/modal';
-export declare const Modal: ({ open, close, config }: IModal) => React.JSX.Element | null;
+export declare const Modal: ({ open, close, config }: IModal) => import("react/jsx-runtime").JSX.Element | null;
 export default Modal;

package/dist/modal.js

@@ -1,44 +1,13 @@
-"use strict";
 'use client';
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+"use strict";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const portal_1 = require("./components/portal/portal");
 const make_toggle_1 = __importDefault(require("./components/make-toggle/make-toggle"));
@@ -53,12 +22,20 @@ const make_custom_upload_1 = __importDefault(require("./components/make-custom-u
 const make_watcher_1 = __importDefault(require("./components/make-watcher/make-watcher"));
 const make_table_1 = __importDefault(require("./components/make-table/make-table"));
 const Modal = ({ open, close, config }) => {
-    const { ModalButtonAction, ModalButtonCancel } = (0, react_1.useContext)(component_state_1.ComponentStateContext);
-    const [modalReady, setModalReady] = (0, react_1.useState)(undefined);
-    const [defaultLoaded, setDefaultLoaded] = (0, react_1.useState)(false);
+    const { ModalButtonAction, ModalButtonCancel } = (0, react_2.useContext)(component_state_1.ComponentStateContext);
+    const [modalReady, setModalReady] = (0, react_2.useState)(undefined);
+    const [defaultLoaded, setDefaultLoaded] = (0, react_2.useState)(false);
     const { control, handleSubmit, getValues, unregister, setValue, watch, trigger, reset, getFieldState, } = (0, react_hook_form_1.useForm)();
     const formValueHandler = (element) => {
-        if (['group', 'upload', 'custom-upload', 'text'].includes(element.elementType))
+        if ([
+            'group',
+            'upload',
+            'custom-upload',
+            'text',
+            'description',
+            'watcher',
+            'table',
+        ].includes(element.elementType))
             return;
         if (!element.defaultValue && element.renderIf) {
             unregister(element.name);
@@ -106,7 +83,7 @@ const Modal = ({ open, close, config }) => {
             setValue,
             unregister,
         };
-        return elementType === 'input' ? (react_1.default.createElement(make_input_1.default, { ...props, key: `modal-input-${index}`, element: element })) : elementType === 'select' ? (react_1.default.createElement(make_select_1.default, { ...props, key: `modal-select-${index}`, element: element })) : elementType === 'textarea' ? (react_1.default.createElement(make_textarea_1.default, { ...props, key: `modal-textarea-${index}`, element: element })) : elementType === 'toggle' ? (react_1.default.createElement(make_toggle_1.default, { ...props, key: `modal-toggle-${index}`, element: element })) : elementType === 'text' ? (react_1.default.createElement(make_description_1.default, { ...props, key: `modal-text-${index}`, element: element })) : elementType === 'upload' ? (react_1.default.createElement(make_upload_1.default, { ...props, key: `modal-upload-${index}`, element: element })) : elementType === 'custom-upload' ? (react_1.default.createElement(make_custom_upload_1.default, { ...props, key: `modal-custom-upload-${index}`, element: element })) : elementType === 'watcher' ? (react_1.default.createElement(make_watcher_1.default, { ...props, key: `modal-watcher-${index}`, element: element })) : elementType === 'button' ? (react_1.default.createElement(make_button_1.default, { ...props, key: `modal-button-${index}`, element: element, getValues: getValues })) : elementType === 'table' ? (react_1.default.createElement(make_table_1.default, { ...props, key: `modal-table-${index}`, element: element })) : null;
+        return elementType === 'input' ? ((0, react_1.createElement)(make_input_1.default, { ...props, key: `modal-input-${index}`, element: element })) : elementType === 'select' ? ((0, react_1.createElement)(make_select_1.default, { ...props, key: `modal-select-${index}`, element: element })) : elementType === 'textarea' ? ((0, react_1.createElement)(make_textarea_1.default, { ...props, key: `modal-textarea-${index}`, element: element })) : elementType === 'toggle' ? ((0, react_1.createElement)(make_toggle_1.default, { ...props, key: `modal-toggle-${index}`, element: element })) : elementType === 'text' ? ((0, react_1.createElement)(make_description_1.default, { ...props, key: `modal-text-${index}`, element: element })) : elementType === 'upload' ? ((0, react_1.createElement)(make_upload_1.default, { ...props, key: `modal-upload-${index}`, element: element })) : elementType === 'custom-upload' ? ((0, react_1.createElement)(make_custom_upload_1.default, { ...props, key: `modal-custom-upload-${index}`, element: element })) : elementType === 'watcher' ? ((0, react_1.createElement)(make_watcher_1.default, { ...props, key: `modal-watcher-${index}`, element: element })) : elementType === 'button' ? ((0, react_1.createElement)(make_button_1.default, { ...props, key: `modal-button-${index}`, element: element, getValues: getValues })) : elementType === 'table' ? ((0, react_1.createElement)(make_table_1.default, { ...props, key: `modal-table-${index}`, element: element })) : null;
     };
     const closeHandler = () => {
         if (modalReady?.onClose)
@@ -137,46 +114,29 @@ const Modal = ({ open, close, config }) => {
         modalReady?.out({ ...(modalReady?.reservedData ?? {}), ...data });
         closeHandler();
     };
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (open && !modalReady)
             setModalReady(config);
     }, [config, modalReady, open]);
     if (!modalReady)
         return null;
-    return (react_1.default.createElement(portal_1.Portal, { closeTime: 200, portalOpen: open, portalTag: '#modal-portal', useBlur: modalReady.useBlur },
-        react_1.default.createElement("div", { className: "rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px]", style: modalReady.style },
-            react_1.default.createElement("form", { className: "flex flex-col p-4 gap-4", autoComplete: "off", onSubmit: handleSubmit(actionHandler) },
-                react_1.default.createElement("h2", { className: "text-bold text-center border-b pb-4 font-semibold" }, modalReady.title),
-                react_1.default.createElement("div", { className: "flex flex-col gap-4 py-4", style: {
-                        overflowY: modalReady.overFlowBody ? 'auto' : undefined,
-                        height: modalReady.overFlowBody,
-                        minHeight: modalReady.minHeightBody,
-                    } }, modalReady.fields.map((element, index) => {
-                    const isEndOfRender = index + 1 === modalReady.fields.length;
-                    if (element.elementType === 'group') {
-                        return (react_1.default.createElement("div", { key: `modal-group-${index}`, className: "flex flex-col w-full gap-2" },
-                            element.title && (react_1.default.createElement("h3", { className: "font-bold border-b-2 pb-2 mb-2" }, element.title)),
-                            react_1.default.createElement("div", { key: `modal-group-${index}`, className: "flex gap-4 w-full", style: element.style }, element.groups
-                                .filter((sub) => [
-                                'input',
-                                'select',
-                                'toggle',
-                                'multiselect',
-                                'upload',
-                                'custom-upload',
-                                'watcher',
-                                'button',
-                                'autocomplete',
-                            ].includes(sub.elementType))
-                                .map((sub, subIndex) => getRender(sub, index + subIndex, isEndOfRender)))));
-                    }
-                    else {
-                        return getRender(element, index, isEndOfRender);
-                    }
-                })),
-                react_1.default.createElement("div", { className: "flex gap-4 items-center justify-center border-t p-2", style: modalReady?.actions.containerStyle },
-                    modalReady.actions.cancel && (react_1.default.createElement(ModalButtonCancel, { ...modalReady.actions.cancel, onClick: closeHandler })),
-                    getUseSubmit(modalReady) ? (react_1.default.createElement(ModalButtonAction, { ...modalReady.actions.action, type: "submit" })) : (react_1.default.createElement(ModalButtonAction, { ...modalReady.actions.action, onClick: manualSubmit, type: "button" })))))));
+    return ((0, jsx_runtime_1.jsx)(portal_1.Portal, { closeTime: 200, portalOpen: open, portalTag: '#modal-portal', useBlur: modalReady.useBlur, children: (0, jsx_runtime_1.jsx)("div", { className: `rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px] ${modalReady.useBlur && 'shadow-md border border-gray-200'}`, style: modalReady.style, children: (0, jsx_runtime_1.jsxs)("form", { className: "flex flex-col p-4 gap-4", autoComplete: "off", onSubmit: handleSubmit(actionHandler), children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-bold text-center border-b pb-4 font-semibold", children: modalReady.title }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-4 py-4", style: {
+                            overflowY: modalReady.overFlowBody ? 'auto' : undefined,
+                            height: modalReady.overFlowBody,
+                            minHeight: modalReady.minHeightBody,
+                        }, children: modalReady.fields.map((element, index) => {
+                            const isEndOfRender = index + 1 === modalReady.fields.length;
+                            if (element.elementType === 'group') {
+                                const groupElements = element.groups
+                                    .filter((sub) => !['group', 'watcher', 'table'].includes(sub.elementType))
+                                    .map((sub, subIndex) => getRender(sub, index + subIndex, isEndOfRender));
+                                const hideDiv = groupElements.filter((render) => render).length === 0;
+                                return ((0, jsx_runtime_1.jsxs)("div", { className: `flex flex-col w-full gap-2 ${hideDiv && 'hidden'}`, children: [element.title && ((0, jsx_runtime_1.jsx)("h3", { className: "font-bold border-b-2 pb-2 mb-2", children: element.title })), (0, jsx_runtime_1.jsx)("div", { className: "flex gap-4 w-full", style: element.style, children: groupElements.map((component) => component) })] }, `modal-group-${index}`));
+                            }
+                            else {
+                                return getRender(element, index, isEndOfRender);
+                            }
+                        }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-4 items-center justify-center border-t p-2", style: modalReady?.actions.containerStyle, children: [modalReady.actions.cancel && ((0, jsx_runtime_1.jsx)(ModalButtonCancel, { ...modalReady.actions.cancel, onClick: closeHandler })), getUseSubmit(modalReady) ? ((0, jsx_runtime_1.jsx)(ModalButtonAction, { ...modalReady.actions.action, type: "submit" })) : ((0, jsx_runtime_1.jsx)(ModalButtonAction, { ...modalReady.actions.action, onClick: manualSubmit, type: "button" }))] })] }) }) }));
 };
 exports.Modal = Modal;
 exports.default = exports.Modal;

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

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

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

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const InputUpload = ({ onChange, readAsArrayBuffer, read, helpText, label, ...props }) => {
+    const onChangeHandler = (event) => {
+        if (read && event.target.files) {
+            readFileBlob(event.target.files[0], false)
+                .then((result) => onChange(result))
+                .catch((err) => {
+                console.error('file read error', err);
+                onChange({ name: '', size: 0, data: '' });
+            });
+        }
+        else {
+            onChange(event.target.files);
+        }
+    };
+    const readFileBlob = (blob, image) => {
+        return new Promise((resolve, reject) => {
+            const fileReader = new FileReader();
+            if (image)
+                fileReader.readAsDataURL(blob);
+            else if (readAsArrayBuffer)
+                fileReader.readAsArrayBuffer(blob);
+            else
+                fileReader.readAsText(blob);
+            fileReader.onload = () => {
+                const fileResult = {
+                    name: blob.name,
+                    size: blob.size,
+                    data: fileReader.result,
+                };
+                resolve(fileResult);
+            };
+            fileReader.onerror = (error) => {
+                reject(error);
+            };
+        });
+    };
+    return (_jsxs("div", { className: "flex flex-col w-full gap-1 text-center", children: [label && (_jsx("label", { className: "block mb-2 text-sm font-medium text-gray-900 dark:text-white", htmlFor: `file-input-${props.id}`, children: label })), _jsx("input", { className: "file:transition-all file:delay-150 block w-full text-sm text-slate-500\n        file:mr-4 file:py-2 file:px-4 file:rounded-md\n        file:border-0 file:text-sm file:font-semibold\n        file:bg-gray-100 file:text-blue-600\n        hover:file:bg-blue-700 hover:file:text-white cursor-pointer disabled:cursor-not-allowed", "aria-describedby": `file-input-${props.id}-help`, id: `file-input-${props.id}`, type: "file", onChange: onChangeHandler, ...props }), _jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-300 text-start", id: `file-input-${props.id}-help`, children: helpText?.toUpperCase() })] }));
+};
+export default InputUpload;

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

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

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useId } from 'react';
+import { ComponentStateContext } from '../../context/component/component-state';
+const MakeButton = ({ element, getValues }) => {
+    const { Button } = useContext(ComponentStateContext);
+    const elementId = useId();
+    return (_jsx(Button, { ...element, id: elementId, onClick: () => {
+            const formData = getValues();
+            if (element.onClick)
+                element.onClick(formData);
+        } }));
+};
+export default MakeButton;

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

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

package/dist/src/components/make-custom-upload/make-custom-upload.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 MakeCustomUpload = ({ element, control, watch, unregister, }) => {
+    const { CustomUpload } = 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(CustomUpload, { ...inputProps, name: elementName, id: elementId, onChange: onChange, value: value ?? '', invalid: invalid, error: error, disabled: element.disabled ?? !enable })) }));
+};
+export default MakeCustomUpload;

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

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

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

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MakeDescription = ({ element: { text, Icon, containerStyle, textStyle, elements }, }) => {
+    return (_jsxs("div", { className: "flex gap-4 w-full h-auto text-xs text-center p-2 border-1 rounded-md", style: containerStyle, children: [Icon && _jsx(Icon, {}), text && !elements && _jsx("p", { style: textStyle, children: text }), !text && elements && (_jsx("p", { style: textStyle, children: elements.map((fragment, index) => (_jsx("span", { style: fragment.style, children: fragment.text }, `desc-fragment-${index}`))) }))] }));
+};
+export default MakeDescription;

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

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

package/dist/src/components/make-input/make-input.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 MakeInput = ({ element, control, watch, unregister, }) => {
+    const { Input } = 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(Input, { ...inputProps, name: elementName, id: elementId, onChange: onChange, value: value ?? '', invalid: invalid, error: error, disabled: element.disabled ?? !enable })) }));
+};
+export default MakeInput;

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

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

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

@@ -0,0 +1,78 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useId, useState } 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';
+import useLiveData from '../../hooks/use-live-data';
+const MakeSelect = ({ element, control, watch, setValue, unregister, }) => {
+    const { Select } = useContext(ComponentStateContext);
+    const { name: elementName, validation: { required, message, regex, ...otherValidation }, enableIf, renderIf, liveData: elementLiveData, ...inputProps } = element;
+    const [liveSearching, setLiveSearching] = useState(false);
+    const { checkLiveData, liveData, setLiveData } = useLiveData({
+        elementLiveData,
+    });
+    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);
+                    }
+                });
+            }
+            if (elementLiveData) {
+                setLiveSearching(true);
+                checkLiveData(formData, { name, type })
+                    .then((options) => {
+                    if (options === undefined || options === null)
+                        return;
+                    setLiveData(options);
+                    setValue(elementName, options);
+                })
+                    .finally(() => {
+                    setLiveSearching(false);
+                });
+            }
+        });
+        return () => unsubscribe();
+    }, [watch, render, enable, liveData]);
+    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(Select, { ...inputProps, id: elementId, name: elementName, onChange: onChange, value: value, invalid: invalid, error: error, disabled: element.disabled ?? !enable, liveSearching: liveSearching, options: liveData || (element.options ?? []) })) }));
+};
+export default MakeSelect;