@zauru-sdk/components 1.0.52 → 1.0.53

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

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextField, TextFieldWithoutValidation } from "../TextField/index.js";
+import { TripleFieldContainer } from "../FieldContainer/index.js";
+import { DoubleFieldContainer } from "../FieldContainer/index.js";
+import { YesNo } from "../YesNo/index.js";
+import { TextArea } from "../TextArea/index.js";
+import { SelectField } from "../SelectField/index.js";
+import { FileUploadField } from "../FileUpload/index.js";
+import { FormDatePicker } from "../DatePicker/index.js";
+import { FormTimePicker } from "../TimePicker/index.js";
+import { GenericDynamicTable } from "../../DynamicTable/GenericDynamicTable.js";
+import { getDepSelectOptions, getMunSelectOptions } from "@zauru-sdk/common";
+import { StaticAlert } from "../../Alerts/index.js";
+import { SubContainer } from "../../Containers/index.js";
+import { LineSeparator } from "../../LineSeparator/index.js";
+export function DynamicBaculoForm(props) {
+    const { form, options = { showDescription: false, showTitle: false }, formName = "", namesStr = "", defaultValues = [], showingRules = [], readOnly = false, } = props;
+    if (!form) {
+        return (_jsx(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 (_jsx(SubContainer, { title: field.name, children: _jsx(GenericDynamicTable, { name: "fixed_columns_table", columns: columns }) }, field.id));
+            }
+            case "zauru_data":
+                return (_jsx(TextFieldWithoutValidation, { title: `${field.required ? "*" : ""}${field.name}`, hint: field.hint, defaultValue: defaultValue?.value ?? field.default_value, disabled: true }, field.id));
+            case "hour":
+                return (_jsx(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 (_jsx(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 (_jsx(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 (_jsx(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 (_jsx(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 (_jsx(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 (_jsx(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 (_jsx(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 (_jsxs("div", { children: [_jsx(LineSeparator, {}), _jsx("h3", { className: "mb-10 text-3xl font-bold leading-8 text-gray-900", children: field.name })] }, field.id));
+            case "multi_line_text":
+                return (_jsx(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 = getDepSelectOptions();
+                return (_jsx(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 = getMunSelectOptions();
+                return (_jsx(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 (_jsx(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 (_jsx(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 (_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(_jsx(DoubleFieldContainer, { children: tempGroup }, i));
+                    }
+                    else if (tempGroup.length === 3) {
+                        fieldGroups.push(_jsx(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(_jsx(DoubleFieldContainer, { children: tempGroup }, i));
+                    }
+                    else if (tempGroup.length === 3) {
+                        fieldGroups.push(_jsx(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(_jsx(TripleFieldContainer, { children: tempGroup }, i));
+                    tempGroup = [];
+                }
+            }
+        });
+        return fieldGroups;
+    };
+    return (_jsx(SubContainer, { title: options?.showTitle ? form.name : undefined, description: options?.showDescription ? form.description : undefined, children: renderFields() }));
+}

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

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export 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 _jsx(_Fragment, {});
+    };
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: `grid md:grid-cols-2 sm:grid-cols-1 gap-4 ${className}`, style: alignCenter ? { alignItems: "center" } : {}, children: [_jsx("div", { className: "col-span-1", children: getChildren(0) }), _jsx("div", { className: "col-span-1", children: getChildren(1) })] }) }));
+};

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

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export 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 _jsx(_Fragment, {});
+    };
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: `grid lg:grid-cols-4 sm:grid-cols-2 xs:grid-cols-1 gap-4 ${className}`, style: { alignItems: "center" }, children: [_jsx("div", { className: "col-span-1", children: getChildren(0) }), _jsx("div", { className: "col-span-1", children: getChildren(1) }), _jsx("div", { className: "col-span-1", children: getChildren(2) }), _jsx("div", { className: "col-span-1", children: getChildren(3) })] }) }));
+};

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

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export 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 _jsx(_Fragment, {});
+    };
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: `grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 ${className}`, style: { alignItems: "center" }, children: [_jsx("div", { className: "col-span-1", children: getChildren(0) }), _jsx("div", { className: "col-span-1", children: getChildren(1) }), _jsx("div", { className: "col-span-1", children: getChildren(2) })] }) }));
+};

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

@@ -0,0 +1,3 @@
+export * from "./DoubleFieldContainer.js";
+export * from "./QuadrupleFieldContainer.js";
+export * from "./TripleFieldContainer.js";

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

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DownloadIconSVG, IdeaIconSVG } from "@zauru-sdk/icons";
+import { useAppSelector } from "@zauru-sdk/redux";
+import { useState } from "react";
+export 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] = useState(false);
+    if (typeof defaultValue == "string") {
+        if (download) {
+            return (_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 && (_jsx("label", { htmlFor: name, className: "block mb-1 text-sm font-medium text-gray-700", children: title })), " ", _jsx(DownloadIconSVG, {})] }));
+        }
+        return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && (_jsx("label", { htmlFor: name, className: `block mb-1 text-sm font-medium text-gray-700`, children: title })), " ", _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: _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 (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && (_jsx("label", { htmlFor: name, className: `block mb-1 text-sm font-medium text-${color}-700`, children: title })), _jsxs("div", { className: "flex relative items-center", children: [_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 && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] }) }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error] })), !error && hintMessage && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500`, children: hintMessage }))] }));
+};
+export const FileUploadField = (props) => {
+    const { formValidations } = useAppSelector((state) => state.formValidation);
+    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+    props = { ...props, error };
+    return _jsx(FileUploadFieldWithoutValidation, { ...props });
+};

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export 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 (_jsxs(_Fragment, { children: [showClear && (_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 && (_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 })), _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 })] }));
+};

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Form } from "@remix-run/react";
+import { ButtonSectionContainer } from "../../Containers/index.js";
+export const FormLayout = (props) => {
+    const { title, children, buttons, method, formId } = props;
+    return (_jsxs(Form, { id: formId, name: formId, method: method ?? "post", children: [title && (_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-3", children: title })), _jsxs("div", { className: "shadow sm:overflow-hidden sm:rounded-md", children: [_jsx("div", { className: "space-y-6 bg-white px-4 py-5 sm:p-6", children: children }), buttons && (_jsx(ButtonSectionContainer, { children: buttons }))] })] }, formId));
+};

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

@@ -0,0 +1,74 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { IdeaIconSVG } from "@zauru-sdk/icons";
+import { useAppSelector } from "@zauru-sdk/redux";
+import { useEffect, useState } from "react";
+import Select, { components } from "react-select";
+import { LoadingInputSkeleton } from "../../Skeletons/index.js";
+const Input = (props) => (_jsx(components.Input, { ...props, readOnly: props.selectProps.isReadOnly }));
+export 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] = useState(defaultValue || null);
+    const [valueMulti, setValueMulti] = useState(defaultValueMulti);
+    const [inputValue, setInputValue] = useState("");
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [isClient, setIsClient] = 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;
+    }
+    useEffect(() => {
+        setValue(defaultValue || null);
+    }, [defaultValue]);
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+    if (!isClient || loading || !documentRef) {
+        return (_jsxs(_Fragment, { children: [title && (_jsx("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: title })), _jsx(LoadingInputSkeleton, {}), helpText && (_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 = (_jsxs(_Fragment, { children: [_jsx(Select, { 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 && (_jsx("input", { hidden: true, readOnly: true, name: name, value: valueMulti.map((x) => x?.value).join(","), id: id }))] }));
+    return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && (_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 })), _jsxs("div", { className: "flex relative items-center", children: [selectComponent, helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] }) }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
+};
+export const SelectField = (props) => {
+    const { formValidations } = useAppSelector((state) => state.formValidation);
+    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+    props = { ...props, error };
+    return _jsx(SelectFieldWithoutValidation, { ...props });
+};

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAppSelector } from "@zauru-sdk/redux";
+import { useEffect, useState } from "react";
+export 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] = 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`;
+    useEffect(() => {
+        setValue(defaultValue);
+    }, [defaultValue]);
+    if (hidden) {
+        return (_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 (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && (_jsx("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: title })), _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 && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
+};
+//<reference> https://tailwindui.com/components/application-ui/forms/form-layouts
+export const TextArea = (props) => {
+    const { formValidations } = useAppSelector((state) => state.formValidation);
+    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+    props = { ...props, error };
+    return _jsx(TextAreaWithoutValidation, { ...props });
+};

package/dist/esm/Form/TextField/index.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IdeaIconSVG } from "@zauru-sdk/icons";
+import { useAppSelector } from "@zauru-sdk/redux";
+import { useEffect, useState } from "react";
+export const TextFieldWithoutValidation = (props) => {
+    const { id, name, defaultValue = "", hidden, type = "text", onChange, onKeyDown, disabled = false, readOnly = false, min, integer = false, stopChangeEvents, style, error, title, helpText, className, hint, } = props;
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [value, setValue] = 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`;
+    useEffect(() => {
+        setValue(defaultValue);
+    }, [defaultValue]);
+    if (hidden) {
+        return (_jsx("input", { type: type, id: id ?? name, name: name, value: defaultValue, readOnly: true, hidden: true }));
+    }
+    const handleInputChange = (event) => {
+        if (stopChangeEvents) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+        if (integer && type === "number") {
+            const value = event.target.value;
+            const isInteger = /^[0-9]*$/.test(value);
+            if (isInteger || value === "") {
+                setValue(value);
+                onChange && onChange(value, event);
+            }
+        }
+        else {
+            setValue(event.target.value);
+            onChange && onChange(event.target.value, event);
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (integer && type === "number") {
+            // Permitir solo números y teclas de control
+            const allowedKeys = [
+                "Backspace",
+                "ArrowLeft",
+                "ArrowRight",
+                "Delete",
+                "Enter",
+                "Tab",
+            ];
+            if (!allowedKeys.includes(event.key) && !/^[0-9]$/.test(event.key)) {
+                event.preventDefault();
+            }
+        }
+    };
+    const inputComponent = (_jsx("input", { type: type, name: name, readOnly: readOnly, disabled: disabled, id: id ?? name, autoComplete: "given-name", value: value, onWheel: (e) => {
+            e.currentTarget.blur();
+        }, step: type === "number" ? 0.01 : undefined, onChange: handleInputChange, onKeyDown: (event) => {
+            handleKeyDown(event);
+            onKeyDown && onKeyDown(event);
+        }, min: min, style: style, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm` }));
+    if (!error && !title) {
+        return _jsx("div", { className: `${className}`, children: inputComponent });
+    }
+    return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && (_jsx("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block mb-1 text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: title })), _jsxs("div", { className: "flex relative items-center", children: [inputComponent, helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] }) }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
+};
+export const TextField = (props) => {
+    const { formValidations } = useAppSelector((state) => state.formValidation);
+    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+    props = { ...props, error };
+    return _jsx(TextFieldWithoutValidation, { ...props });
+};

package/dist/esm/Form/TimePicker/index.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ClockIconSVG, CloseSvgIcon, IdeaIconSVG } from "@zauru-sdk/icons";
+import { useAppSelector } from "@zauru-sdk/redux";
+import { useEffect, useState } from "react";
+export const FormTimePickerWithoutValidation = (props) => {
+    const { id, name, title, defaultValue = "", hint, helpText, onChange, tabIndex, error, disabled = false, } = props;
+    const [value, setValue] = useState(defaultValue);
+    const [showTooltip, setShowTooltip] = 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`;
+    useEffect(() => {
+        setValue(defaultValue);
+    }, [defaultValue]);
+    const clearValue = () => {
+        setValue("");
+        onChange && onChange("");
+    };
+    return (_jsxs(_Fragment, { children: [title && (_jsx("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${textColor}`, children: title })), _jsxs("div", { className: "flex relative items-center", children: [_jsx("div", { className: "absolute left-0 flex items-center pl-3 pointer-events-none", children: _jsx(ClockIconSVG, {}) }), _jsx("input", { id: id, name: name, tabIndex: tabIndex, type: "time", onChange: (e) => {
+                            setValue(e.target.value);
+                            onChange && onChange(e.target.value);
+                        }, value: value, pattern: "\\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 && (_jsx("button", { type: "button", onClick: clearValue, className: "absolute right-0 mr-10", children: _jsx(CloseSvgIcon, {}) })), helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black", children: helpText }))] }) }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
+};
+export const FormTimePicker = (props) => {
+    const { formValidations } = useAppSelector((state) => state.formValidation);
+    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+    props = { ...props, error };
+    return _jsx(FormTimePickerWithoutValidation, { ...props });
+};

package/dist/esm/Form/YesNo/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useAppSelector } from "@zauru-sdk/redux";
+import { useState } from "react";
+export const YesNo = (props) => {
+    const { id, name, title, defaultValue = false, helpText, onChange, disabled, } = props;
+    const { formValidations } = useAppSelector((state) => state.formValidation);
+    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+    const [value, setValue] = useState(defaultValue);
+    const color = error ? "red" : "gray";
+    const handleOnChange = () => {
+        if (disabled)
+            return; // No hacer nada si está deshabilitado
+        const newValue = !value;
+        setValue(newValue);
+        onChange && onChange(newValue);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("label", { className: `relative inline-flex items-center cursor-pointer ${disabled ? "opacity-50" : ""}`, children: [_jsx("input", { type: "checkbox", id: id ?? name, name: name, checked: value, value: value.toString(), className: "sr-only peer", onChange: handleOnChange, disabled: disabled }), value.toString() === "false" && (_jsx("input", { type: "hidden", name: name, value: "false" })), _jsx("div", { className: "w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600" }), _jsx("span", { className: "ml-3 text-sm font-medium text-gray-900", children: title })] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error] })), !error && helpText && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: helpText }))] }));
+};

package/dist/esm/Form/index.js

@@ -0,0 +1,13 @@
+export * from "./Checkbox/index.js";
+export * from "./Checklist/index.js";
+export * from "./DatePicker/index.js";
+export * from "./DynamicBaculoForm/index.js";
+export * from "./FieldContainer/index.js";
+export * from "./FileUpload/index.js";
+export * from "./FormButtons/index.js";
+export * from "./FormLayout/index.js";
+export * from "./SelectField/index.js";
+export * from "./TextArea/index.js";
+export * from "./TextField/index.js";
+export * from "./TimePicker/index.js";
+export * from "./YesNo/index.js";

package/dist/esm/Labels/InfoLabel/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const InfoLabel = (props) => {
+    const { description, title, className } = props;
+    return (_jsxs("div", { className: `block ${className}`, children: [_jsx("label", { className: "inline text-sm font-medium text-gray-700", children: `${title.toUpperCase()} ` }), _jsx("label", { className: "inline text-sm font-medium text-gray-500", children: description })] }));
+};

package/dist/esm/Labels/index.js

@@ -0,0 +1 @@
+export * from "./InfoLabel/index.js";

package/dist/esm/Layouts/homeLayout/index.js

@@ -0,0 +1,10 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const HomeLayout = ({ title, description }) => {
+    return (_jsx("div", { className: "bg-cover bg-center h-screen", style: { backgroundImage: 'url("/wallpaper.webp")' }, children: _jsxs("div", { className: "flex flex-col h-screen justify-center items-center", children: [_jsx("h1", { className: "text-6xl md:text-7xl lg:text-8xl text-white font-bold mb-6 text-center", style: {
+                        textShadow: "0.5px 0.5px 1px #000000",
+                        WebkitTextStroke: "2px #000000",
+                    }, children: title ?? _jsx(_Fragment, { children: "Bienvenido, inicie sesi\u00F3n para continuar." }) }), _jsx("p", { className: "text-xl md:text-2xl lg:text-3xl text-white text-center max-w-md mb-12", style: {
+                        textShadow: "0.5px 0.5px 1px #000000",
+                        WebkitTextStroke: "1px #000000",
+                    }, children: description ?? _jsx(_Fragment, { children: "Web app, realizada en Zauru." }) })] }) }));
+};

package/dist/esm/Layouts/index.js

@@ -0,0 +1 @@
+export * from "./homeLayout/index.js";

package/dist/esm/LineSeparator/LineSeparator.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const LineSeparator = () => {
+    return _jsx("hr", { className: "h-px my-8 bg-gray-200 border-0 dark:bg-gray-400" });
+};

package/dist/esm/LineSeparator/index.js

@@ -0,0 +1 @@
+export * from "./LineSeparator.js";

package/dist/esm/Modal/Modal.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createRoot } from "react-dom/client";
+export const createModal = ({ title, description, okButtonText, showOptions = true, }) => {
+    return new Promise((resolve) => {
+        const handleClose = () => {
+            resolve(null);
+            removeModal();
+        };
+        const handleOk = () => {
+            resolve("OK");
+            removeModal();
+        };
+        const handleCancel = () => {
+            resolve("CANCEL");
+            removeModal();
+        };
+        const removeModal = () => {
+            document.body.removeChild(modalWrapper);
+            document.body.removeChild(modalOverlay);
+        };
+        const modalWrapper = document.createElement("div");
+        modalWrapper.classList.add("justify-center", "items-center", "flex", "overflow-x-hidden", "overflow-y-auto", "fixed", "inset-0", "z-50", "outline-none", "focus:outline-none");
+        // Crear capa de fondo detrás del modal
+        const modalOverlay = document.createElement("div");
+        modalOverlay.classList.add("fixed", "inset-0", "bg-black", "opacity-50", "z-40");
+        document.body.appendChild(modalOverlay);
+        document.body.appendChild(modalWrapper);
+        const ModalContent = () => (_jsx("div", { className: "relative w-auto my-6 mx-auto max-w-3xl", children: _jsxs("div", { className: "border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none", children: [_jsxs("div", { className: "flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t", children: [_jsx("h3", { className: "text-3xl font-semibold", children: title }), _jsx("button", { className: "p-1 ml-auto bg-transparent border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none", children: _jsx("span", { className: "close-button", onClick: handleClose, children: "\u00D7" }) })] }), _jsx("div", { className: "relative p-6 flex-auto", children: description }), showOptions && (_jsxs("div", { className: "flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b", children: [_jsx("button", { className: "cancel-button text-red-700 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150", type: "button", onClick: handleCancel, children: "Cancelar" }), _jsx("button", { className: "ok-button bg-emerald-700 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150", type: "button", onClick: handleOk, children: okButtonText ?? "Aceptar" })] }))] }) }));
+        const root = createRoot(modalWrapper);
+        root.render(_jsx(ModalContent, {}));
+    });
+};

package/dist/esm/Modal/index.js

@@ -0,0 +1 @@
+export * from "./Modal.js";