@zauru-sdk/components 1.0.51 → 1.0.53

package/dist/cjs/Form/Checkbox/index.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckBox = exports.CheckboxWithoutValidation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const redux_1 = require("@zauru-sdk/redux");
+const react_1 = require("react");
+const CheckboxWithoutValidation = (props) => {
+    const { id, name, defaultValue = false, onChange, disabled = false, error, label, } = props;
+    const [checked, setChecked] = (0, react_1.useState)(defaultValue);
+    (0, react_1.useEffect)(() => {
+        setChecked(defaultValue);
+    }, [defaultValue]);
+    const handleInputChange = (event) => {
+        const isChecked = event.target.checked;
+        if (onChange) {
+            const result = onChange(isChecked, event);
+            if (result?.stopUIChange) {
+                return;
+            }
+        }
+        setChecked(isChecked);
+    };
+    const color = error ? "red" : "gray";
+    const borderColor = disabled ? "border-gray-300" : `border-${color}-500`;
+    const inputComponent = ((0, jsx_runtime_1.jsx)("input", { type: "checkbox", id: id ?? name, name: name, checked: checked, onChange: handleInputChange, className: `form-checkbox h-4 w-4 text-indigo-600 ${borderColor} focus:border-indigo-500 focus:ring-indigo-500`, disabled: disabled }));
+    if (!error && !label) {
+        return inputComponent;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "col-span-6 sm:col-span-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: `flex items-center ${borderColor}`, children: [inputComponent, label && ((0, jsx_runtime_1.jsx)("label", { htmlFor: id ?? name, className: `ml-2 block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: label }))] }), error && ((0, jsx_runtime_1.jsxs)("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Oops!" }), " ", error] }))] }));
+};
+exports.CheckboxWithoutValidation = CheckboxWithoutValidation;
+//<reference> https://tailwindui.com/components/application-ui/forms/form-layouts
+const CheckBox = (props) => {
+    const { formValidations } = (0, redux_1.useAppSelector)((state) => state.formValidation);
+    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+    props = { ...props, error };
+    return (0, jsx_runtime_1.jsx)(exports.CheckboxWithoutValidation, { ...props });
+};
+exports.CheckBox = CheckBox;

package/dist/cjs/Form/Checklist/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checklist = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const index_js_1 = require("../Checkbox/index.js");
+const Checklist = ({ items, onChange }) => {
+    const handleCheckboxChange = (name, value) => {
+        if (onChange) {
+            onChange(name, value);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { children: items.map((item) => ((0, jsx_runtime_1.jsx)(index_js_1.CheckboxWithoutValidation, { ...item, onChange: (value) => handleCheckboxChange(item.name, value) }, item.id))) }));
+};
+exports.Checklist = Checklist;

package/dist/cjs/Form/DatePicker/index.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormDatePicker = exports.FormDatePickerWithoutValidation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const icons_1 = require("@zauru-sdk/icons");
+const redux_1 = require("@zauru-sdk/redux");
+const FormDatePickerWithoutValidation = (props) => {
+    const { id, name, title, defaultValue = "", hint, helpText, onChange, tabIndex, error, disabled = false, className = "", isClearable = false, } = props;
+    const [value, setValue] = (0, react_1.useState)(defaultValue);
+    const [showTooltip, setShowTooltip] = (0, react_1.useState)(false);
+    const color = error ? "red" : "gray";
+    const isReadOnly = disabled;
+    const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
+    const textColor = isReadOnly ? "text-gray-500" : `text-${color}-500`;
+    const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
+    (0, react_1.useEffect)(() => {
+        setValue(defaultValue);
+    }, [defaultValue]);
+    const clearValue = () => {
+        setValue("");
+        onChange && onChange("");
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${textColor} ${className}`, children: title })), (0, jsx_runtime_1.jsxs)("div", { className: "flex relative items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute left-0 flex items-center pl-3 pointer-events-none", children: (0, jsx_runtime_1.jsx)(icons_1.CalendarIconSVG, {}) }), (0, jsx_runtime_1.jsx)("input", { id: id, name: name, tabIndex: tabIndex, type: "date", onChange: (e) => {
+                            setValue(e.target.value);
+                            onChange && onChange(e.target.value);
+                        }, value: value ?? "", pattern: "\\d{4}-\\d{2}-\\d{2}", className: `${bgColor} ${borderColor} ${textColor} text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5` }), value && isClearable && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: clearValue, className: "absolute right-0 mr-10", children: (0, jsx_runtime_1.jsx)(icons_1.CloseSvgIcon, {}) })), helpText && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center relative ml-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [(0, jsx_runtime_1.jsx)(icons_1.IdeaIconSVG, {}), showTooltip && ((0, jsx_runtime_1.jsx)("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black", children: helpText }))] }) }))] }), error && ((0, jsx_runtime_1.jsxs)("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Oops!" }), " ", error] })), !error && hint && ((0, jsx_runtime_1.jsx)("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
+};
+exports.FormDatePickerWithoutValidation = FormDatePickerWithoutValidation;
+const FormDatePicker = (props) => {
+    const { formValidations } = (0, redux_1.useAppSelector)((state) => state.formValidation);
+    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+    props = { ...props, error };
+    return (0, jsx_runtime_1.jsx)(exports.FormDatePickerWithoutValidation, { ...props });
+};
+exports.FormDatePicker = FormDatePicker;

package/dist/cjs/Form/DynamicBaculoForm/index.js

@@ -0,0 +1,144 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DynamicBaculoForm = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const index_js_1 = require("../TextField/index.js");
+const index_js_2 = require("../FieldContainer/index.js");
+const index_js_3 = require("../FieldContainer/index.js");
+const index_js_4 = require("../YesNo/index.js");
+const index_js_5 = require("../TextArea/index.js");
+const index_js_6 = require("../SelectField/index.js");
+const index_js_7 = require("../FileUpload/index.js");
+const index_js_8 = require("../DatePicker/index.js");
+const index_js_9 = require("../TimePicker/index.js");
+const GenericDynamicTable_js_1 = require("../../DynamicTable/GenericDynamicTable.js");
+const common_1 = require("@zauru-sdk/common");
+const index_js_10 = require("../../Alerts/index.js");
+const index_js_11 = require("../../Containers/index.js");
+const index_js_12 = require("../../LineSeparator/index.js");
+function DynamicBaculoForm(props) {
+    const { form, options = { showDescription: false, showTitle: false }, formName = "", namesStr = "", defaultValues = [], showingRules = [], readOnly = false, } = props;
+    if (!form) {
+        return ((0, jsx_runtime_1.jsx)(index_js_10.StaticAlert, { title: "No se encontr\u00F3 el formulario din\u00E1mico", description: `Ocurrió un error encontrando el formulario para ${formName}, contacte al administrador con este mensaje de error.`, type: "info" }));
+    }
+    const renderFieldComponent = (field) => {
+        const defaultValue = defaultValues?.find((x) => x.settings_form_field.print_var_name === field.print_var_name);
+        switch (field.field_type) {
+            case "fixed_rows_table":
+            case "fixed_columns_table": {
+                const columns = field.settings_form_field_table_headers?.map((x) => {
+                    return {
+                        label: x.name,
+                        name: `${namesStr}${x.id}_${field.id}`,
+                        type: x.cell_type === "yes_no" ? "checkbox" : "textField",
+                    };
+                }) ?? [];
+                return ((0, jsx_runtime_1.jsx)(index_js_11.SubContainer, { title: field.name, children: (0, jsx_runtime_1.jsx)(GenericDynamicTable_js_1.GenericDynamicTable, { name: "fixed_columns_table", columns: columns }) }, field.id));
+            }
+            case "zauru_data":
+                return ((0, jsx_runtime_1.jsx)(index_js_1.TextFieldWithoutValidation, { title: `${field.required ? "*" : ""}${field.name}`, hint: field.hint, defaultValue: defaultValue?.value ?? field.default_value, disabled: true }, field.id));
+            case "hour":
+                return ((0, jsx_runtime_1.jsx)(index_js_9.FormTimePicker, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, disabled: readOnly, defaultValue: defaultValue?.value }, field.id));
+            case "date":
+                return ((0, jsx_runtime_1.jsx)(index_js_8.FormDatePicker, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, disabled: readOnly, defaultValue: defaultValue?.value }, field.id));
+            case "file":
+                return ((0, jsx_runtime_1.jsx)(index_js_7.FileUploadField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, disabled: readOnly, defaultValue: defaultValue?.value, download: true }, field.id));
+            case "image":
+                return ((0, jsx_runtime_1.jsx)(index_js_7.FileUploadField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, showAvailableTypes: true, fileTypes: ["png", "jpg", "jpeg"], disabled: readOnly, defaultValue: defaultValue?.value }, field.id));
+            case "pdf":
+                return ((0, jsx_runtime_1.jsx)(index_js_7.FileUploadField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, showAvailableTypes: true, fileTypes: ["pdf"], disabled: readOnly, defaultValue: defaultValue?.value, download: true }, field.id));
+            case "email":
+            case "url":
+            case "text":
+            case "currency":
+            case "country":
+                return ((0, jsx_runtime_1.jsx)(index_js_1.TextField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, defaultValue: defaultValue?.value ?? field.default_value, disabled: readOnly }, field.id));
+            case "percentage":
+            case "number":
+                return ((0, jsx_runtime_1.jsx)(index_js_1.TextField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, defaultValue: defaultValue?.value ?? field.default_value, type: "number", disabled: readOnly }, field.id));
+            case "yes_no":
+                return ((0, jsx_runtime_1.jsx)(index_js_4.YesNo, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, disabled: readOnly, defaultValue: field.default_value === "true" || defaultValue?.value === "true" }, field.id));
+            case "section":
+                return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(index_js_12.LineSeparator, {}), (0, jsx_runtime_1.jsx)("h3", { className: "mb-10 text-3xl font-bold leading-8 text-gray-900", children: field.name })] }, field.id));
+            case "multi_line_text":
+                return ((0, jsx_runtime_1.jsx)(index_js_5.TextArea, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, defaultValue: defaultValue?.value ?? field.default_value, hint: field.hint, disabled: readOnly }, field.id));
+            case "gt_departamentos": {
+                const optionsDep = (0, common_1.getDepSelectOptions)();
+                return ((0, jsx_runtime_1.jsx)(index_js_6.SelectField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, isClearable: !field.required, options: optionsDep, disabled: readOnly, defaultValue: optionsDep.find((x) => x.value === defaultValue?.value) }, field.id));
+            }
+            case "gt_municipios": {
+                const options = (0, common_1.getMunSelectOptions)();
+                return ((0, jsx_runtime_1.jsx)(index_js_6.SelectField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, isClearable: !field.required, options: options, disabled: readOnly, defaultValue: options.find((x) => x.value === defaultValue?.value) }, field.id));
+            }
+            case "single_select_options": {
+                const formFieldOptions = field.settings_form_field_options?.map((x) => {
+                    return { label: x.label, value: x.value };
+                }) ?? [];
+                return ((0, jsx_runtime_1.jsx)(index_js_6.SelectField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, isClearable: !field.required, options: formFieldOptions, disabled: readOnly, defaultValue: formFieldOptions.find((x) => x.value === defaultValue?.value) }, field.id));
+            }
+            case "multi_select_options": {
+                const formFieldOptions2 = field.settings_form_field_options?.map((x) => {
+                    return { label: x.label, value: x.value };
+                }) ?? [];
+                const defaultValuesMulti = (() => {
+                    const values = defaultValue?.value?.split(",").map((str) => str.trim()) ?? [];
+                    return formFieldOptions2.filter((x) => values.includes(x.value));
+                })();
+                return ((0, jsx_runtime_1.jsx)(index_js_6.SelectField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, isClearable: !field.required, isMulti: true, options: formFieldOptions2, defaultValueMulti: defaultValuesMulti, disabled: readOnly }, field.id));
+            }
+            default:
+                return ((0, jsx_runtime_1.jsxs)("div", { children: ["Componente no encontrado para: ", field.field_type] }, field.id)); // o algún componente por defecto si lo prefieres
+        }
+    };
+    const renderFields = () => {
+        const fields = form.settings_form_fields;
+        const fieldGroups = [];
+        let tempGroup = [];
+        fields.forEach((field, i) => {
+            const rule = showingRules.find((x) => x.name === field.name);
+            if (!(rule && !rule.show)) {
+                const renderedField = renderFieldComponent(field);
+                if (renderedField === null) {
+                    return;
+                }
+                tempGroup.push(renderedField);
+                const isLastField = i === fields.length - 1;
+                const isSectionField = field.field_type === "section";
+                if (isSectionField) {
+                    tempGroup.pop();
+                    if (tempGroup.length === 1) {
+                        fieldGroups.push(tempGroup[0]);
+                    }
+                    else if (tempGroup.length === 2) {
+                        fieldGroups.push((0, jsx_runtime_1.jsx)(index_js_3.DoubleFieldContainer, { children: tempGroup }, i));
+                    }
+                    else if (tempGroup.length === 3) {
+                        fieldGroups.push((0, jsx_runtime_1.jsx)(index_js_2.TripleFieldContainer, { children: tempGroup }, i));
+                    }
+                    fieldGroups.push(renderedField);
+                    tempGroup = [];
+                }
+                else if (isLastField) {
+                    if (tempGroup.length === 1) {
+                        fieldGroups.push(tempGroup[0]);
+                    }
+                    else if (tempGroup.length === 2) {
+                        fieldGroups.push((0, jsx_runtime_1.jsx)(index_js_3.DoubleFieldContainer, { children: tempGroup }, i));
+                    }
+                    else if (tempGroup.length === 3) {
+                        fieldGroups.push((0, jsx_runtime_1.jsx)(index_js_2.TripleFieldContainer, { children: tempGroup }, i));
+                    }
+                    tempGroup = [];
+                }
+                else if (tempGroup.length === 3) {
+                    // Si hay 3 elementos en el grupo temporal y el siguiente campo no es 'section', se agrega a fieldGroups
+                    fieldGroups.push((0, jsx_runtime_1.jsx)(index_js_2.TripleFieldContainer, { children: tempGroup }, i));
+                    tempGroup = [];
+                }
+            }
+        });
+        return fieldGroups;
+    };
+    return ((0, jsx_runtime_1.jsx)(index_js_11.SubContainer, { title: options?.showTitle ? form.name : undefined, description: options?.showDescription ? form.description : undefined, children: renderFields() }));
+}
+exports.DynamicBaculoForm = DynamicBaculoForm;

package/dist/cjs/Form/FieldContainer/DoubleFieldContainer.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DoubleFieldContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DoubleFieldContainer = (props) => {
+    const { children, className, alignCenter = true } = props;
+    const getChildren = (index) => {
+        if (children && Array.isArray(children) && children[index]) {
+            return children[index];
+        }
+        if (children && index === 0) {
+            return children;
+        }
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: `grid md:grid-cols-2 sm:grid-cols-1 gap-4 ${className}`, style: alignCenter ? { alignItems: "center" } : {}, children: [(0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: getChildren(0) }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: getChildren(1) })] }) }));
+};
+exports.DoubleFieldContainer = DoubleFieldContainer;

package/dist/cjs/Form/FieldContainer/QuadrupleFieldContainer.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuadrupleFieldContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const QuadrupleFieldContainer = (props) => {
+    const { children, className } = props;
+    const getChildren = (index) => {
+        if (children && Array.isArray(children) && children[index]) {
+            return children[index];
+        }
+        if (children && index === 0) {
+            return children;
+        }
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: `grid lg:grid-cols-4 sm:grid-cols-2 xs:grid-cols-1 gap-4 ${className}`, style: { alignItems: "center" }, children: [(0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: getChildren(0) }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: getChildren(1) }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: getChildren(2) }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: getChildren(3) })] }) }));
+};
+exports.QuadrupleFieldContainer = QuadrupleFieldContainer;

package/dist/cjs/Form/FieldContainer/TripleFieldContainer.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TripleFieldContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TripleFieldContainer = (props) => {
+    const { children, className } = props;
+    const getChildren = (index) => {
+        if (children && Array.isArray(children) && children[index]) {
+            return children[index];
+        }
+        if (children && index === 0) {
+            return children;
+        }
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: `grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 ${className}`, style: { alignItems: "center" }, children: [(0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: getChildren(0) }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: getChildren(1) }), (0, jsx_runtime_1.jsx)("div", { className: "col-span-1", children: getChildren(2) })] }) }));
+};
+exports.TripleFieldContainer = TripleFieldContainer;

package/dist/cjs/Form/FieldContainer/index.js

@@ -0,0 +1,19 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DoubleFieldContainer.js"), exports);
+__exportStar(require("./QuadrupleFieldContainer.js"), exports);
+__exportStar(require("./TripleFieldContainer.js"), exports);

package/dist/cjs/Form/FileUpload/index.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileUploadField = exports.FileUploadFieldWithoutValidation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@zauru-sdk/icons");
+const redux_1 = require("@zauru-sdk/redux");
+const react_1 = require("react");
+const FileUploadFieldWithoutValidation = (props) => {
+    const { id, name, title, helpText, hint, onChange, disabled = false, readOnly = false, error, fileTypes = [], showAvailableTypes = false, className, defaultValue = undefined, download = false, } = props;
+    const [showTooltip, setShowTooltip] = (0, react_1.useState)(false);
+    if (typeof defaultValue == "string") {
+        if (download) {
+            return ((0, jsx_runtime_1.jsxs)("div", { role: "button", tabIndex: 0, onClick: () => {
+                    window.open(defaultValue, "_blank");
+                }, onKeyDown: (event) => {
+                    // Permite que el evento se active con la tecla Enter
+                    if (event.key === "Enter") {
+                        window.open(defaultValue, "_blank");
+                    }
+                }, children: [title && ((0, jsx_runtime_1.jsx)("label", { htmlFor: name, className: "block mb-1 text-sm font-medium text-gray-700", children: title })), " ", (0, jsx_runtime_1.jsx)(icons_1.DownloadIconSVG, {})] }));
+        }
+        return ((0, jsx_runtime_1.jsxs)("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && ((0, jsx_runtime_1.jsx)("label", { htmlFor: name, className: `block mb-1 text-sm font-medium text-gray-700`, children: title })), " ", (0, jsx_runtime_1.jsx)("div", { role: "button", tabIndex: 0, onClick: () => {
+                        window.open(defaultValue, "_blank");
+                    }, onKeyDown: (event) => {
+                        // Permite que el evento se active con la tecla Enter
+                        if (event.key === "Enter") {
+                            window.open(defaultValue, "_blank");
+                        }
+                    }, children: (0, jsx_runtime_1.jsx)("img", { src: defaultValue, alt: name, className: `h-48 w-48 inline mr-1 pb-1`, style: {
+                            stroke: "currentColor",
+                            strokeWidth: 2,
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            fill: "none",
+                            backgroundColor: "transparent",
+                        } }) })] }));
+    }
+    const handleInputChange = (event) => {
+        onChange && onChange(event);
+    };
+    let hintMessage = hint;
+    if (showAvailableTypes && fileTypes.length > 0) {
+        hintMessage = `${hint} Archivos permitidos: ${fileTypes.join(", ")}`;
+    }
+    const color = error ? "red" : "gray";
+    const isReadOnly = disabled || readOnly;
+    const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
+    const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
+    const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-500`;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && ((0, jsx_runtime_1.jsx)("label", { htmlFor: name, className: `block mb-1 text-sm font-medium text-${color}-700`, children: title })), (0, jsx_runtime_1.jsxs)("div", { className: "flex relative items-center", children: [(0, jsx_runtime_1.jsx)("input", { type: "file", name: name, id: id ?? name, disabled: disabled, readOnly: readOnly, accept: fileTypes.map((ft) => `.${ft}`).join(", "), onChange: handleInputChange, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm` }), helpText && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center relative ml-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [(0, jsx_runtime_1.jsx)(icons_1.IdeaIconSVG, {}), showTooltip && ((0, jsx_runtime_1.jsx)("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] }) }))] }), error && ((0, jsx_runtime_1.jsxs)("p", { className: `mt-2 text-sm text-${color}-600`, children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Oops!" }), " ", error] })), !error && hintMessage && ((0, jsx_runtime_1.jsx)("p", { className: `mt-2 italic text-sm text-${color}-500`, children: hintMessage }))] }));
+};
+exports.FileUploadFieldWithoutValidation = FileUploadFieldWithoutValidation;
+const FileUploadField = (props) => {
+    const { formValidations } = (0, redux_1.useAppSelector)((state) => state.formValidation);
+    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+    props = { ...props, error };
+    return (0, jsx_runtime_1.jsx)(exports.FileUploadFieldWithoutValidation, { ...props });
+};
+exports.FileUploadField = FileUploadField;

package/dist/cjs/Form/FormButtons/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormButtons = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FormButtons = (props) => {
+    const { saveTitle = "Guardar", saveName = "save", cancelTitle = "Cancelar", cancelName = "cancel", showCancel = true, showClear = false, clearName = "clear", clearTitle = "Limpiar", loading = false, onClickSave, loadingSaveText = "Guardando...", } = props;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showClear && ((0, jsx_runtime_1.jsx)("button", { type: "reset", name: "action", disabled: loading, value: clearName, className: `ml-5 ${loading ? " bg-opacity-25 cursor-progress" : ""} rounded-md border border-gray-300 bg-white py-2 px-3 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`, children: clearTitle })), showCancel && ((0, jsx_runtime_1.jsx)("button", { type: "button", name: "action", disabled: loading, value: cancelName, className: `${showClear ? "ml-2" : "ml-5"} ${loading ? " bg-opacity-25 cursor-progress" : ""} rounded-md border border-gray-300 bg-white py-2 px-3 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`, children: cancelTitle })), (0, jsx_runtime_1.jsx)("button", { type: "submit", name: "action", disabled: loading, value: saveName, onClick: onClickSave, className: `ml-2 ${loading ? " bg-opacity-25 cursor-progress" : "hover:bg-indigo-700"} inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`, children: loading ? loadingSaveText : saveTitle })] }));
+};
+exports.FormButtons = FormButtons;

package/dist/cjs/Form/FormLayout/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@remix-run/react");
+const index_js_1 = require("../../Containers/index.js");
+const FormLayout = (props) => {
+    const { title, children, buttons, method, formId } = props;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Form, { id: formId, name: formId, method: method ?? "post", children: [title && ((0, jsx_runtime_1.jsx)("label", { className: "block text-sm font-medium text-gray-700 mb-3", children: title })), (0, jsx_runtime_1.jsxs)("div", { className: "shadow sm:overflow-hidden sm:rounded-md", children: [(0, jsx_runtime_1.jsx)("div", { className: "space-y-6 bg-white px-4 py-5 sm:p-6", children: children }), buttons && ((0, jsx_runtime_1.jsx)(index_js_1.ButtonSectionContainer, { children: buttons }))] })] }, formId));
+};
+exports.FormLayout = FormLayout;

package/dist/cjs/Form/SelectField/index.js

@@ -0,0 +1,102 @@
+"use strict";
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectField = exports.SelectFieldWithoutValidation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@zauru-sdk/icons");
+const redux_1 = require("@zauru-sdk/redux");
+const react_1 = require("react");
+const react_select_1 = __importStar(require("react-select"));
+const index_js_1 = require("../../Skeletons/index.js");
+const Input = (props) => ((0, jsx_runtime_1.jsx)(react_select_1.components.Input, { ...props, readOnly: props.selectProps.isReadOnly }));
+const SelectFieldWithoutValidation = (props) => {
+    const { id, name, title, defaultValue, defaultValueMulti = [], helpText, hint, options, onChange, onChangeMulti, isClearable = false, error = false, disabled = false, readOnly = false, isMulti = false, loading = false, className = "", onInputChange, } = props;
+    const [value, setValue] = (0, react_1.useState)(defaultValue || null);
+    const [valueMulti, setValueMulti] = (0, react_1.useState)(defaultValueMulti);
+    const [inputValue, setInputValue] = (0, react_1.useState)("");
+    const [showTooltip, setShowTooltip] = (0, react_1.useState)(false);
+    const [isClient, setIsClient] = (0, react_1.useState)(typeof window !== "undefined");
+    const menuIsOpen = readOnly ? false : props?.menuIsOpen;
+    const color = error ? "red" : "gray";
+    let documentRef = null;
+    const isReadOnly = disabled || readOnly;
+    const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
+    const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
+    const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-500`;
+    if (typeof window !== "undefined") {
+        documentRef = document;
+    }
+    (0, react_1.useEffect)(() => {
+        setValue(defaultValue || null);
+    }, [defaultValue]);
+    (0, react_1.useEffect)(() => {
+        setIsClient(true);
+    }, []);
+    if (!isClient || loading || !documentRef) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: title })), (0, jsx_runtime_1.jsx)(index_js_1.LoadingInputSkeleton, {}), helpText && ((0, jsx_runtime_1.jsx)("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: helpText }))] }));
+    }
+    const handleOnChange = (selection) => {
+        // Verificar si el valor de selección es un objeto con propiedades 'value' y 'label'
+        if (typeof selection === "object" &&
+            selection !== null &&
+            "value" in selection &&
+            "label" in selection) {
+            setValue(selection);
+            onChange && onChange(selection);
+        }
+        else {
+            setValue(null);
+            onChange && onChange(null);
+        }
+    };
+    const handleOnChangeMulti = (selection) => {
+        if (Array.isArray(selection)) {
+            setValueMulti(selection);
+            onChangeMulti &&
+                onChangeMulti(selection);
+        }
+        else {
+            setValueMulti([]);
+            onChangeMulti && onChangeMulti([]);
+        }
+    };
+    const selectComponent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_select_1.default, { className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, id: isMulti ? undefined : id, instanceId: isMulti ? undefined : id, isDisabled: disabled, name: isMulti ? undefined : name, options: options, onChange: isMulti ? handleOnChangeMulti : handleOnChange, defaultValue: isMulti ? valueMulti : value, onInputChange: (newValue, actionMeta) => {
+                    setInputValue(newValue);
+                    onInputChange && onInputChange(newValue, actionMeta);
+                }, inputValue: inputValue, onMenuOpen: () => { }, onMenuClose: () => { }, menuPortalTarget: documentRef?.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 9999 }) }, isClearable: isClearable, isSearchable: true, components: { Input }, menuIsOpen: menuIsOpen, 
+                //windowThreshold={50}
+                isMulti: isMulti }), isMulti && ((0, jsx_runtime_1.jsx)("input", { hidden: true, readOnly: true, name: name, value: valueMulti.map((x) => x?.value).join(","), id: id }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && ((0, jsx_runtime_1.jsx)("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${color === "red"
+                    ? "text-red-700 dark:text-red-500"
+                    : "text-gray-700 dark:text-gray-500"}`, children: title })), (0, jsx_runtime_1.jsxs)("div", { className: "flex relative items-center", children: [selectComponent, helpText && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center relative ml-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [(0, jsx_runtime_1.jsx)(icons_1.IdeaIconSVG, {}), showTooltip && ((0, jsx_runtime_1.jsx)("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] }) }))] }), error && ((0, jsx_runtime_1.jsxs)("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Oops!" }), " ", error] })), !error && hint && ((0, jsx_runtime_1.jsx)("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
+};
+exports.SelectFieldWithoutValidation = SelectFieldWithoutValidation;
+const SelectField = (props) => {
+    const { formValidations } = (0, redux_1.useAppSelector)((state) => state.formValidation);
+    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+    props = { ...props, error };
+    return (0, jsx_runtime_1.jsx)(exports.SelectFieldWithoutValidation, { ...props });
+};
+exports.SelectField = SelectField;

package/dist/cjs/Form/TextArea/index.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextArea = exports.TextAreaWithoutValidation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const redux_1 = require("@zauru-sdk/redux");
+const react_1 = require("react");
+const TextAreaWithoutValidation = (props) => {
+    const { id, name, title, defaultValue = "", hidden, hint, onChange, onKeyDown, disabled = false, error = false, readOnly = false, rows, cols, stopChangeEvents, className = "", } = props;
+    const [value, setValue] = (0, react_1.useState)(defaultValue);
+    const color = error ? "red" : "gray";
+    const isReadOnly = disabled || readOnly;
+    const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
+    const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
+    const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-500`;
+    (0, react_1.useEffect)(() => {
+        setValue(defaultValue);
+    }, [defaultValue]);
+    if (hidden) {
+        return ((0, jsx_runtime_1.jsx)("textarea", { id: id ?? name, name: name, value: defaultValue, readOnly: true, hidden: true }));
+    }
+    const handleInputChange = (event) => {
+        if (stopChangeEvents) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+        setValue(event.target.value);
+        onChange && onChange(event.target.value);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && ((0, jsx_runtime_1.jsx)("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: title })), (0, jsx_runtime_1.jsx)("textarea", { name: name, readOnly: readOnly, disabled: disabled, id: id ?? name, autoComplete: "given-name", value: value, rows: rows, cols: cols, onChange: handleInputChange, onKeyDown: (event) => {
+                    onKeyDown && onKeyDown(event);
+                }, className: `mt-1 block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm` }), error && ((0, jsx_runtime_1.jsxs)("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Oops!" }), " ", error] })), !error && hint && ((0, jsx_runtime_1.jsx)("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
+};
+exports.TextAreaWithoutValidation = TextAreaWithoutValidation;
+//<reference> https://tailwindui.com/components/application-ui/forms/form-layouts
+const TextArea = (props) => {
+    const { formValidations } = (0, redux_1.useAppSelector)((state) => state.formValidation);
+    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+    props = { ...props, error };
+    return (0, jsx_runtime_1.jsx)(exports.TextAreaWithoutValidation, { ...props });
+};
+exports.TextArea = TextArea;