@zauru-sdk/components 1.0.12 → 1.0.14

package/dist/DynamicTable/index.js

@@ -0,0 +1,193 @@
+import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useState } from "react";
+import { TextAreaWithoutValidation } from "../Form/TextArea";
+import { TextFieldWithoutValidation } from "../Form/TextField";
+import { CheckboxWithoutValidation } from "../Form/Checkbox";
+const DynamicTable = ({ forwardedRef, ...props }, ref) => {
+    const [tableData, setTableData] = useState({});
+    const { cellInputs, intersectionTitle, className, onChange, defaultValue, margins, } = props;
+    useEffect(() => {
+        if (onChange) {
+            onChange(JSON.stringify(tableData));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tableData]);
+    useEffect(() => {
+        if (defaultValue) {
+            initializeTable(defaultValue);
+        }
+        else {
+            initializeTableWithDefaults();
+        }
+    }, [defaultValue]);
+    const getRows = () => {
+        const rowsIds = Object.keys(tableData)
+            .filter((key) => key.startsWith("row"))
+            .map((key) => parseInt(key.slice(3)));
+        return rowsIds.sort().map((id) => ({ id }));
+    };
+    const getCols = () => {
+        const colsIds = Object.keys(tableData)
+            .filter((key) => key.startsWith("column"))
+            .map((key) => parseInt(key.slice(6)));
+        return colsIds.sort().map((id) => ({ id }));
+    };
+    const addRow = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const rows = getRows();
+        const lastId = rows[rows.length - 1].id;
+        handleInputChange(`row${lastId + 1}`, 1);
+    };
+    const addCol = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const cols = getCols();
+        const lastId = cols[cols.length - 1].id;
+        handleInputChange(`column${lastId + 1}`, 1);
+    };
+    const removeRow = (rowId) => {
+        const newRowData = { ...tableData };
+        for (const key in newRowData) {
+            if (key.startsWith(`row${rowId}`) || key.startsWith(`cell-${rowId}-`)) {
+                delete newRowData[key];
+            }
+        }
+        setTableData(newRowData);
+    };
+    const removeCol = (colId) => {
+        const newRowData = { ...tableData };
+        for (const key in newRowData) {
+            if (key.startsWith(`column${colId}`) || key.endsWith(`-${colId}`)) {
+                delete newRowData[key];
+            }
+        }
+        setTableData(newRowData);
+    };
+    const getTotalForRow = (rowId) => {
+        return Number(tableData[`row${rowId}`] ?? 0) ?? 0;
+    };
+    const getTotalForColumn = (colId) => {
+        return Number(tableData[`column${colId}`] ?? 0) ?? 0;
+    };
+    const getTotalForRows = () => {
+        return getRows()
+            .map((row) => getTotalForRow(row.id))
+            .reduce((a, b) => a + b, 0);
+    };
+    const getTotalForColumns = () => {
+        return getCols()
+            .map((col) => getTotalForColumn(col.id))
+            .reduce((a, b) => a + b, 0);
+    };
+    const getRowsCount = () => {
+        return getRows().length;
+    };
+    const getColumnsCount = () => {
+        return getCols().length;
+    };
+    const handleInputChange = (name, value) => {
+        setTableData((prevData) => ({ ...prevData, [name]: value }));
+    };
+    const handleValidation = (cellId, colId, rowId) => {
+        const headerValue = tableData[`column${colId}`];
+        const rowValue = tableData[`row${rowId}`];
+        if (props.onValidate && props.onValidate(headerValue, rowValue)) {
+            return handleInputChange(cellId, true);
+        }
+        return { stopUIChange: true };
+    };
+    const handleRemoveValidation = (cellId) => {
+        handleInputChange(cellId, false);
+    };
+    const initializeTableWithDefaults = () => {
+        const initialData = { row0: 1, column0: 1 };
+        setTableData(initialData);
+    };
+    const initializeTable = (tableJson) => {
+        try {
+            const initialData = JSON.parse(tableJson);
+            setTableData(initialData);
+        }
+        catch (error) {
+            console.error("Error al inicializar la tabla:", error);
+        }
+    };
+    const cellBordered = {
+        border: "1px solid #ccc",
+    };
+    const pastelGrayBackground = {
+        backgroundColor: "#B69E99",
+    };
+    const cellCenteredContent = {
+        textAlign: "center",
+        verticalAlign: "middle",
+    };
+    const renderTotalHeight = () => {
+        const sumaFilas = getRows()
+            .map((row) => getTotalForRow(row.id))
+            .reduce((a, b) => a + b, 0);
+        const sumTotalFilas = sumaFilas +
+            (margins?.marginTop ?? 0) +
+            (getRows().length - 1) * (margins?.verticalGap ?? 0);
+        return (_jsxs("div", { className: "ml-4 inline-block", children: [_jsxs("strong", { children: ["Total alto: ", sumTotalFilas, " "] }), margins && (_jsxs(_Fragment, { children: ["(Celdas: ", sumaFilas, " + M\u00E1rgen superior: ", margins?.marginTop ?? 0, " +", " ", getRows().length - 1, " Brechas verticales:", " ", Math.round((getRows().length - 1) * (margins?.verticalGap ?? 0)), ")"] }))] }));
+    };
+    const renderTotalWidth = () => {
+        const cols = getCols();
+        const sumaColumnas = cols
+            .map((col) => getTotalForColumn(col.id))
+            .reduce((a, b) => a + b, 0);
+        const sumaTotal = sumaColumnas +
+            (margins?.marginLeft ?? 0) +
+            (getCols().length - 1) * (margins?.horizontalGap ?? 0);
+        return (_jsxs("div", { className: "ml-4 inline-block", children: [_jsxs("strong", { children: ["Total ancho: ", sumaTotal, " "] }), margins && (_jsxs(_Fragment, { children: ["(Celdas: ", sumaColumnas, " + M\u00E1rgen izquierdo:", " ", margins?.marginLeft ?? 0, " + ", getCols().length - 1, " Brechas horizontales:", " ", Math.round((getCols().length - 1) * (margins?.horizontalGap ?? 0)), ")"] }))] }));
+    };
+    const renderHeader = () => {
+        const cols = getCols();
+        return (_jsxs("tr", { children: [_jsx("th", { className: "align-middle py-2 text-center", style: {
+                        ...cellBordered,
+                        ...pastelGrayBackground,
+                    }, children: intersectionTitle ?? "" }), cols.map((col) => (_jsx("th", { className: "align-middle py-2 text-center", style: { ...cellBordered, ...pastelGrayBackground }, children: _jsxs("div", { className: "inline-flex", children: [_jsx(TextFieldWithoutValidation, { style: { maxWidth: "45%", minWidth: "45%" }, name: `column${col.id}`, defaultValue: tableData[`column${col.id}`] || 1, type: "number", onChange: (value) => handleInputChange(`column${col.id}`, value) }), col.id > 0 && (_jsx("button", { className: "bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2", onClick: () => removeCol(col.id), children: "x" }))] }) }, col.id))), _jsx("th", { children: _jsx("button", { className: "bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded", onClick: addCol, children: "+" }) })] }));
+    };
+    const renderRow = (rowId) => {
+        const cols = getCols();
+        return (_jsxs("tr", { children: [_jsx("td", { className: "align-middle", style: {
+                        ...cellBordered,
+                        ...pastelGrayBackground,
+                        textOverflow: "ellipsis",
+                        msTextOverflow: "ellipsis",
+                        maxWidth: "200px",
+                    }, children: _jsxs("div", { className: "inline-flex", children: [_jsx(TextFieldWithoutValidation, { style: { maxWidth: "45%", minWidth: "45%" }, name: `row${rowId}`, defaultValue: tableData[`row${rowId}`] || 1, type: "number", onChange: (value) => handleInputChange(`row${rowId}`, value) }), rowId > 0 && (_jsx("button", { className: "bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2", onClick: () => {
+                                    removeRow(rowId);
+                                }, children: "x" }))] }) }), cols.map((col) => {
+                    const cellId = `cell-${rowId}-${col.id}`;
+                    const cellValidation = tableData[cellId] === true;
+                    if (!cellInputs)
+                        tableData[cellId] = cellValidation;
+                    return (_jsx("td", { id: cellId, style: { ...cellBordered, ...cellCenteredContent }, children: cellInputs ? (_jsx(TextAreaWithoutValidation, { name: cellId, defaultValue: tableData[cellId] || "", onChange: (value) => handleInputChange(cellId, value) })) : (_jsx(CheckboxWithoutValidation, { name: cellId, defaultValue: cellValidation, onChange: (value) => {
+                                if (value) {
+                                    return handleValidation(cellId, col.id, rowId);
+                                }
+                                else {
+                                    handleRemoveValidation(cellId);
+                                }
+                            } })) }, col.id));
+                }), rowId === 0 && (_jsx("td", { rowSpan: getRows().length, style: { maxWidth: "100px" }, children: renderTotalHeight() }))] }, rowId));
+    };
+    const renderRows = () => {
+        const rows = getRows();
+        return rows.map((row) => renderRow(row.id));
+    };
+    // Use el "useImperativeHandle" para que el componente padre pueda acceder a los métodos deseados
+    React.useImperativeHandle(forwardedRef, () => ({
+        getTotalForRows,
+        getTotalForColumns,
+        getColumnsCount,
+        getRowsCount,
+    }));
+    return (_jsx("div", { className: `${className}`, children: _jsxs("table", { className: "border-collapse", children: [_jsx("thead", { children: renderHeader() }), _jsx("tbody", { children: renderRows() }), _jsx("tfoot", { children: _jsxs("tr", { children: [_jsx("td", { children: _jsx("button", { className: "bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded", onClick: addRow, children: "+" }) }), _jsx("td", { colSpan: getCols().length + 1, className: "text-left align-middle", style: {
+                                    textOverflow: "ellipsis",
+                                    msTextOverflow: "ellipsis",
+                                }, children: renderTotalWidth() })] }) })] }) }));
+};
+export default React.forwardRef(DynamicTable);

package/dist/Footer/Footer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-//import ConnectionState from "../ConnectionState";
 import { LoadingInputSkeleton } from "src";
+import ConnectionState from "src/ConnectionState/ConnectionState";
 const COLORS = {
     purple: "bg-purple-500",
     pink: "bg-pink-500",
@@ -21,5 +21,5 @@ export const Footer = ({ href, selectedColor, showConnection = false, }) => {
     if (!client) {
         return _jsx(LoadingInputSkeleton, {});
     }
-    return (_jsx("footer", { className: `inset-x-0 bottom-0 px-2 py-[20px] ${color}`, children: _jsx("div", { className: "px-4 mx-auto flex flex-wrap items-center justify-center", children: _jsxs("p", { className: "text-white text-[1.2rem]", children: [`Creado en `, " ", _jsx("a", { href: href, children: "Zauru" }), " ", `con ❤️ ${new Date().getFullYear()} v.3.2`] }) }) }));
+    return (_jsx("footer", { className: `inset-x-0 bottom-0 px-2 py-[20px] ${color}`, children: _jsxs("div", { className: "px-4 mx-auto flex flex-wrap items-center justify-center", children: [_jsxs("p", { className: "text-white text-[1.2rem]", children: [`Creado en `, " ", _jsx("a", { href: href, children: "Zauru" }), " ", `con ❤️ ${new Date().getFullYear()} v.3.2`] }), showConnection && (_jsx("div", { className: "ml-5", children: _jsx(ConnectionState, {}) }))] }) }));
 };

package/dist/Form/Checkbox/index.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+type Props = {
+    id?: string;
+    name?: string;
+    formName?: string;
+    label?: string;
+    defaultValue?: boolean;
+    onChange?: (value: boolean, event: React.ChangeEvent<HTMLInputElement>) => {
+        stopUIChange: boolean;
+    } | void;
+    disabled?: boolean;
+    error?: string | undefined;
+    borderColor?: string;
+};
+export declare const CheckboxWithoutValidation: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckBox: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Form/Checkbox/index.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAppSelector } from "@zauru-sdk/redux";
+import { useEffect, useState } from "react";
+export const CheckboxWithoutValidation = (props) => {
+    const { id, name, defaultValue = false, onChange, disabled = false, error, label, } = props;
+    const [checked, setChecked] = useState(defaultValue);
+    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 = (_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 (_jsxs("div", { className: "col-span-6 sm:col-span-3", children: [_jsxs("div", { className: `flex items-center ${borderColor}`, children: [inputComponent, label && (_jsx("label", { htmlFor: id ?? name, className: `ml-2 block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: label }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error] }))] }));
+};
+//<reference> https://tailwindui.com/components/application-ui/forms/form-layouts
+export const CheckBox = (props) => {
+    const { formValidations } = useAppSelector((state) => state.formValidation);
+    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+    props = { ...props, error };
+    return _jsx(CheckboxWithoutValidation, { ...props });
+};

package/dist/Form/Checklist/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export type ChecklistItem = {
+    id: string;
+    name: string;
+    label: string;
+    defaultValue?: boolean;
+    disabled?: boolean;
+};
+type ChecklistProps = {
+    items: ChecklistItem[];
+    onChange?: (name: string, value: boolean) => void;
+};
+export declare const Checklist: React.FC<ChecklistProps>;
+export {};

package/dist/Form/Checklist/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CheckboxWithoutValidation } from "../Checkbox";
+export const Checklist = ({ items, onChange }) => {
+    const handleCheckboxChange = (name, value) => {
+        if (onChange) {
+            onChange(name, value);
+        }
+    };
+    return (_jsx("div", { children: items.map((item) => (_jsx(CheckboxWithoutValidation, { ...item, onChange: (value) => handleCheckboxChange(item.name, value) }, item.id))) }));
+};

package/dist/Form/DatePicker/index.d.ts

@@ -0,0 +1,18 @@
+type Props = {
+    id?: string;
+    name: string;
+    formName?: string;
+    title?: string;
+    hint?: string;
+    helpText?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    isClearable?: boolean;
+    tabIndex?: number;
+    error?: string;
+    disabled?: boolean;
+    className?: string;
+};
+export declare const FormDatePickerWithoutValidation: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const FormDatePicker: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Form/DatePicker/index.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { CalendarIconSVG, CloseSvgIcon, IdeaIconSVG } from "@zauru-sdk/icons";
+import { useAppSelector } from "@zauru-sdk/redux";
+export const FormDatePickerWithoutValidation = (props) => {
+    const { id, name, title, defaultValue = "", hint, helpText, onChange, tabIndex, error, disabled = false, className = "", isClearable = 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} ${className}`, 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(CalendarIconSVG, {}) }), _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 && (_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 FormDatePicker = (props) => {
+    const { formValidations } = useAppSelector((state) => state.formValidation);
+    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+    props = { ...props, error };
+    return _jsx(FormDatePickerWithoutValidation, { ...props });
+};

package/dist/Form/DynamicBaculoForm/index.d.ts

@@ -0,0 +1,18 @@
+import { FormGraphQL, FormSubmissionValueGraphQL } from "@zauru-sdk/types";
+type Props = {
+    formName?: string;
+    form?: FormGraphQL;
+    options?: {
+        showTitle: boolean;
+        showDescription: boolean;
+    };
+    defaultValues?: FormSubmissionValueGraphQL[];
+    namesStr?: string;
+    showingRules?: {
+        name: string;
+        show: boolean;
+    }[];
+    readOnly?: boolean;
+};
+export declare function DynamicBaculoForm(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Form/DynamicBaculoForm/index.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextField, TextFieldWithoutValidation } from "../TextField";
+import { TripleFieldContainer } from "../FieldContainer/TripleFieldContainer";
+import { DoubleFieldContainer } from "../FieldContainer/DoubleFieldContainer";
+import YesNo from "../YesNo";
+import { TextArea } from "../TextArea";
+import { SelectField } from "../SelectField";
+import { FileUploadField } from "../FileUpload";
+import { FormDatePicker } from "../DatePicker";
+import { FormTimePicker } from "../TimePicker";
+import { LineSeparator, StaticAlert, SubContainer } from "src";
+import { GenericDynamicTable } from "src/DynamicTable/GenericDynamicTable";
+import { getDepSelectOptions, getMunSelectOptions } from "@zauru-sdk/common";
+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: defaultValue?.value === "true" ?? field.default_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/Form/FieldContainer/DoubleFieldContainer.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+type Props = {
+    children: React.ReactNode;
+    className?: string;
+    alignCenter?: boolean;
+};
+export declare const DoubleFieldContainer: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/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/Form/FieldContainer/QuadrupleFieldContainer.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+type Props = {
+    children: React.ReactNode;
+    className?: string;
+};
+export declare const QuadrupleFieldContainer: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/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/Form/FieldContainer/TripleFieldContainer.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+type Props = {
+    children: React.ReactNode;
+    className?: string;
+};
+export declare const TripleFieldContainer: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/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/Form/FieldContainer/index.d.ts

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

package/dist/Form/FieldContainer/index.js

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

package/dist/Form/FileUpload/index.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+type Props = {
+    id?: string;
+    name: string;
+    formName?: string;
+    title?: string;
+    helpText?: string;
+    hint?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: string | undefined;
+    fileTypes?: string[];
+    showAvailableTypes?: boolean;
+    className?: string;
+    defaultValue?: string | File;
+    download?: boolean;
+};
+export declare const FileUploadFieldWithoutValidation: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const FileUploadField: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};