@zauru-sdk/components 1.0.98 → 1.0.100

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

@@ -1,102 +1,147 @@
 "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;
+exports.SelectField = 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 react_hook_form_1 = require("react-hook-form");
+const SelectField = (props) => {
+    const { id, name, title, defaultValue, defaultValueMulti = [], helpText, hint, options, onChange, onChangeMulti, isClearable = false, disabled = false, readOnly = false, isMulti = false, loading = false, className = "", onInputChange, required, } = 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 [inputValue, setInputValue] = (0, react_1.useState)(defaultValue?.label || "");
     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 [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [filteredOptions, setFilteredOptions] = (0, react_1.useState)(options);
+    const [highlightedIndex, setHighlightedIndex] = (0, react_1.useState)(-1);
+    const selectRef = (0, react_1.useRef)(null);
+    const optionsRef = (0, react_1.useRef)(null);
+    const [isTabPressed, setIsTabPressed] = (0, react_1.useState)(false);
+    const [isEnterPressed, setIsEnterPressed] = (0, react_1.useState)(false);
+    const [isSearching, setIsSearching] = (0, react_1.useState)(false);
+    const { control, formState: { errors }, setValue: setFormValue, } = (0, react_hook_form_1.useFormContext)() || { formState: {} };
+    const error = errors ? errors[props.name ?? "-1"] : undefined;
     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]);
+        setFilteredOptions(options);
+    }, [options]);
     (0, react_1.useEffect)(() => {
-        setIsClient(true);
+        const handleClickOutside = (event) => {
+            if (selectRef.current &&
+                !selectRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (defaultValue) {
+            setValue(defaultValue);
+            setInputValue(defaultValue.label);
+            setFormValue(name || "", defaultValue);
+        }
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
     }, []);
-    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);
+    const handleInputChange = (e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        onInputChange && onInputChange(newValue);
+        setIsSearching(true);
+        setFilteredOptions(options.filter((option) => option.label.toLowerCase().includes(newValue.toLowerCase())));
+    };
+    const handleOptionClick = (option) => {
+        if (isMulti) {
+            const newValue = valueMulti.some((v) => v.value === option.value)
+                ? valueMulti.filter((v) => v.value !== option.value)
+                : [...valueMulti, option];
+            setValueMulti(newValue);
+            onChangeMulti && onChangeMulti(newValue);
+            setFormValue(name || "", newValue);
+        }
+        else {
+            setValue(option);
+            setInputValue(option.label);
+            onChange && onChange(option);
+            setFormValue(name || "", option);
+        }
+        setIsOpen(false);
+    };
+    const handleClear = () => {
+        if (isMulti) {
+            setValueMulti([]);
+            onChangeMulti && onChangeMulti([]);
+            setFormValue(name || "", []);
         }
         else {
             setValue(null);
             onChange && onChange(null);
+            setFormValue(name || "", null);
         }
+        setInputValue("");
+    };
+    const handleBlur = () => {
+        setTimeout(() => {
+            if (isTabPressed &&
+                filteredOptions.length > 0 &&
+                !isEnterPressed &&
+                isSearching) {
+                handleOptionClick(filteredOptions[0]);
+            }
+            setIsTabPressed(false);
+            setIsEnterPressed(false);
+            setIsSearching(false);
+            setIsOpen(false);
+        }, 200);
     };
-    const handleOnChangeMulti = (selection) => {
-        if (Array.isArray(selection)) {
-            setValueMulti(selection);
-            onChangeMulti &&
-                onChangeMulti(selection);
+    const handleKeyDown = (e) => {
+        if (e.key === "Tab") {
+            setIsTabPressed(true);
         }
-        else {
-            setValueMulti([]);
-            onChangeMulti && onChangeMulti([]);
+        else if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setHighlightedIndex((prevIndex) => prevIndex < filteredOptions.length - 1 ? prevIndex + 1 : 0);
+            scrollToHighlightedOption();
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setHighlightedIndex((prevIndex) => prevIndex > 0 ? prevIndex - 1 : filteredOptions.length - 1);
+            scrollToHighlightedOption();
+        }
+        else if (e.key === "Enter" && highlightedIndex !== -1) {
+            e.preventDefault();
+            setIsEnterPressed(true);
+            handleOptionClick(filteredOptions[highlightedIndex]);
         }
     };
-    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"
+    const scrollToHighlightedOption = () => {
+        if (optionsRef.current && optionsRef.current.children[highlightedIndex]) {
+            const highlightedOption = optionsRef.current.children[highlightedIndex];
+            highlightedOption.scrollIntoView({
+                block: "center",
+                inline: "center",
+                behavior: "smooth",
+            });
+        }
+    };
+    if (loading) {
+        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 }))] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `col-span-6 sm:col-span-3 ${className}`, ref: selectRef, children: [title && ((0, jsx_runtime_1.jsxs)("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 });
+                    : "text-gray-700 dark:text-gray-500"}`, children: [title, required && (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "*" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name || "", control: control, rules: { required }, defaultValue: defaultValue || (isMulti ? [] : null), render: ({ field }) => ((0, jsx_runtime_1.jsx)("input", { ...field, type: "text", id: id, value: inputValue, onFocus: () => setIsOpen(true), onBlur: handleBlur, onKeyDown: handleKeyDown, readOnly: isReadOnly, disabled: disabled, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, placeholder: isMulti ? "Select options..." : "Select an option...", onChange: (e) => {
+                                field.onChange(e);
+                                handleInputChange(e);
+                            } })) }), isClearable && (value || valueMulti.length > 0) && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: "\u00D7" })), isOpen && !isReadOnly && ((0, jsx_runtime_1.jsx)("ul", { ref: optionsRef, className: "absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm", children: filteredOptions.map((option, index) => ((0, jsx_runtime_1.jsx)("li", { className: `cursor-pointer select-none relative py-2 pl-3 pr-9 ${(isMulti
+                                ? valueMulti.some((v) => v.value === option.value)
+                                : value?.value === option.value)
+                                ? "text-white bg-indigo-600"
+                                : index === highlightedIndex
+                                    ? "text-black bg-sky-200"
+                                    : "text-gray-900"}`, onClick: () => handleOptionClick(option), onMouseEnter: () => setHighlightedIndex(index), onMouseLeave: () => setHighlightedIndex(-1), children: option.label }, `${option.value}-${index}`))) }))] }), isMulti && ((0, jsx_runtime_1.jsx)("div", { className: "mt-2 flex flex-wrap gap-2", children: valueMulti.map((option, index) => ((0, jsx_runtime_1.jsxs)("span", { className: "bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded", children: [option.label, (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => handleOptionClick(option), className: "ml-1 text-blue-600 hover:text-blue-800", children: "\u00D7" })] }, `${option.value}-${index}`))) })), helpText && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center relative mt-1", 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?.message?.toString() || "Error desconocido"] })), !error && hint && ((0, jsx_runtime_1.jsx)("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
 };
 exports.SelectField = SelectField;

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

@@ -1,12 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextArea = exports.TextAreaWithoutValidation = void 0;
+exports.TextArea = 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 react_hook_form_1 = require("react-hook-form");
+const TextArea = (props) => {
+    const { id, name, title, defaultValue = "", hidden, hint, onChange, onKeyDown, disabled = false, readOnly = false, rows, cols, stopChangeEvents, className = "", required, } = props;
     const [value, setValue] = (0, react_1.useState)(defaultValue);
+    const { register: tempRegister, formState: { errors }, } = (0, react_hook_form_1.useFormContext)() || { formState: {} }; // Obtener el contexto solo si existe
+    const error = errors ? errors[props.name ?? "-1"] : undefined;
+    const register = tempRegister
+        ? tempRegister(props.name ?? "-1", { required })
+        : undefined; // Solo usar register si está disponible
     const color = error ? "red" : "gray";
     const isReadOnly = disabled || readOnly;
     const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
@@ -16,9 +21,12 @@ const TextAreaWithoutValidation = (props) => {
         setValue(defaultValue);
     }, [defaultValue]);
     if (hidden) {
-        return ((0, jsx_runtime_1.jsx)("textarea", { id: id ?? name, name: name, value: defaultValue, readOnly: true, hidden: true }));
+        return ((0, jsx_runtime_1.jsx)("textarea", { id: id ?? name, value: defaultValue, readOnly: true, hidden: true, ...(register ?? {}), name: name }));
     }
     const handleInputChange = (event) => {
+        if (register) {
+            register.onChange(event);
+        }
         if (stopChangeEvents) {
             event.stopPropagation();
             event.preventDefault();
@@ -26,16 +34,8 @@ const TextAreaWithoutValidation = (props) => {
         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) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: [title, required && (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "*" })] })), (0, jsx_runtime_1.jsx)("textarea", { readOnly: readOnly, disabled: disabled, id: id ?? name, autoComplete: "given-name", value: value, rows: rows, cols: cols, 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 });
+                }, className: `mt-1 block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, ...(register ?? {}), name: name, onChange: handleInputChange }), 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.message?.toString()] })), !error && hint && ((0, jsx_runtime_1.jsx)("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
 };
 exports.TextArea = TextArea;

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

@@ -1,14 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextField = exports.TextFieldWithoutValidation = void 0;
+exports.TextField = 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 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 react_hook_form_1 = require("react-hook-form");
+const TextField = (props) => {
+    const { id, name, defaultValue = "", hidden, type = "text", onChange, onKeyDown, disabled = false, readOnly = false, min, integer = false, stopChangeEvents, style, title, helpText, className, hint, required, } = props;
     const [showTooltip, setShowTooltip] = (0, react_1.useState)(false);
     const [value, setValue] = (0, react_1.useState)(defaultValue);
+    const { register: tempRegister, formState: { errors }, } = (0, react_hook_form_1.useFormContext)() || { formState: {} }; // Obtener el contexto solo si existe
+    const error = errors ? errors[props.name ?? "-1"] : undefined;
+    const register = tempRegister
+        ? tempRegister(props.name ?? "-1", {
+            valueAsNumber: props.type === "number",
+            required,
+        })
+        : undefined; // Solo usar register si está disponible
     const color = error ? "red" : "gray";
     const isReadOnly = disabled || readOnly;
     const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
@@ -18,9 +26,12 @@ const TextFieldWithoutValidation = (props) => {
         setValue(defaultValue);
     }, [defaultValue]);
     if (hidden) {
-        return ((0, jsx_runtime_1.jsx)("input", { type: type, id: id ?? name, name: name, value: defaultValue, readOnly: true, hidden: true }));
+        return ((0, jsx_runtime_1.jsx)("input", { type: type, id: id ?? name, value: defaultValue, readOnly: true, hidden: true, ...(register ?? {}), name: name }));
     }
     const handleInputChange = (event) => {
+        if (register) {
+            register.onChange(event);
+        }
         if (stopChangeEvents) {
             event.stopPropagation();
             event.preventDefault();
@@ -54,22 +65,15 @@ const TextFieldWithoutValidation = (props) => {
             }
         }
     };
-    const inputComponent = ((0, jsx_runtime_1.jsx)("input", { type: type, name: name, readOnly: readOnly, disabled: disabled, id: id ?? name, autoComplete: "given-name", value: value, onWheel: (e) => {
+    const inputComponent = ((0, jsx_runtime_1.jsx)("input", { type: type, 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) => {
+        }, step: type === "number" ? 0.01 : undefined, 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` }));
+        }, 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`, ...(register ?? {}), name: name, onChange: handleInputChange }));
     if (!error && !title) {
         return (0, jsx_runtime_1.jsx)("div", { className: `${className}`, children: inputComponent });
     }
-    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 mb-1 text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: title })), (0, jsx_runtime_1.jsxs)("div", { className: "flex relative items-center", children: [inputComponent, 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.TextFieldWithoutValidation = TextFieldWithoutValidation;
-const TextField = (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.TextFieldWithoutValidation, { ...props });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block mb-1 text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: [title, required && (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "*" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex relative items-center", children: [inputComponent, 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.message?.toString()] })), !error && hint && ((0, jsx_runtime_1.jsx)("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
 };
 exports.TextField = TextField;

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

@@ -1,14 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormTimePicker = exports.FormTimePickerWithoutValidation = void 0;
+exports.FormTimePicker = 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 FormTimePickerWithoutValidation = (props) => {
-    const { id, name, title, defaultValue = "", hint, helpText, onChange, tabIndex, error, disabled = false, } = props;
+const react_hook_form_1 = require("react-hook-form");
+const FormTimePicker = (props) => {
+    const { id, name, title, defaultValue = "", hint, helpText, onChange, tabIndex, disabled = false, required = false, } = props;
     const [value, setValue] = (0, react_1.useState)(defaultValue);
     const [showTooltip, setShowTooltip] = (0, react_1.useState)(false);
+    const { register: tempRegister, formState: { errors }, } = (0, react_hook_form_1.useFormContext)() || { formState: {} }; // Obtener el contexto solo si existe
+    const error = errors ? errors[props.name ?? "-1"] : undefined;
+    const register = tempRegister
+        ? tempRegister(props.name ?? "-1", { required })
+        : undefined; // Solo usar register si está disponible
     const color = error ? "red" : "gray";
     const isReadOnly = disabled;
     const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
@@ -21,16 +26,13 @@ const FormTimePickerWithoutValidation = (props) => {
         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}`, 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.ClockIconSVG, {}) }), (0, jsx_runtime_1.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 && ((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.FormTimePickerWithoutValidation = FormTimePickerWithoutValidation;
-const FormTimePicker = (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.FormTimePickerWithoutValidation, { ...props });
+    const handleOnChange = (e) => {
+        setValue(e.target.value);
+        onChange && onChange(e.target.value);
+        if (register) {
+            register.onChange(e);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${textColor}`, children: [title, required && (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "*" })] })), (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.ClockIconSVG, {}) }), (0, jsx_runtime_1.jsx)("input", { id: id, tabIndex: tabIndex, type: "time", 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`, ...(register ?? {}), name: name, onChange: handleOnChange }), value && ((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.message?.toString()] })), !error && hint && ((0, jsx_runtime_1.jsx)("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
 };
 exports.FormTimePicker = FormTimePicker;

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

@@ -2,21 +2,27 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.YesNo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const redux_1 = require("@zauru-sdk/redux");
 const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
 const YesNo = (props) => {
-    const { id, name, title, defaultValue = false, helpText, onChange, disabled, } = props;
-    const { formValidations } = (0, redux_1.useAppSelector)((state) => state.formValidation);
-    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+    const { id, name, title, defaultValue = false, helpText, onChange, disabled, required, } = props;
+    const { register: tempRegister, formState: { errors }, } = (0, react_hook_form_1.useFormContext)() || { formState: {} }; // Obtener el contexto solo si existe
+    const error = errors ? errors[props.name ?? "-1"] : undefined;
+    const register = tempRegister
+        ? tempRegister(props.name ?? "-1", { required })
+        : undefined; // Solo usar register si está disponible
     const [value, setValue] = (0, react_1.useState)(defaultValue);
     const color = error ? "red" : "gray";
-    const handleOnChange = () => {
+    const handleOnChange = (e) => {
         if (disabled)
             return; // No hacer nada si está deshabilitado
+        if (register) {
+            register.onChange(e);
+        }
         const newValue = !value;
         setValue(newValue);
         onChange && onChange(newValue);
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("label", { className: `relative inline-flex items-center cursor-pointer ${disabled ? "opacity-50" : ""}`, children: [(0, jsx_runtime_1.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" && ((0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: "false" })), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-3 text-sm font-medium text-gray-900", children: title })] }), 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 && helpText && ((0, jsx_runtime_1.jsx)("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: helpText }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("label", { className: `relative inline-flex items-center cursor-pointer ${disabled ? "opacity-50" : ""}`, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", id: id ?? name, checked: value, value: value.toString(), className: "sr-only peer", disabled: disabled, ...(register ?? {}), name: name, onChange: handleOnChange }), value.toString() === "false" && ((0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: "false" })), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-3 text-sm font-medium text-gray-900", children: title }), required && (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "*" })] }), 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.message?.toString()] })), !error && helpText && ((0, jsx_runtime_1.jsx)("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: helpText }))] }));
 };
 exports.YesNo = YesNo;

package/dist/cjs/Form/index.js

@@ -21,10 +21,9 @@ __exportStar(require("./DynamicBaculoForm/index.js"), exports);
 __exportStar(require("./FieldContainer/index.js"), exports);
 __exportStar(require("./FileUpload/index.js"), exports);
 __exportStar(require("./FormButtons/index.js"), exports);
-__exportStar(require("./FormLayout/index.js"), exports);
 __exportStar(require("./SelectField/index.js"), exports);
 __exportStar(require("./TextArea/index.js"), exports);
 __exportStar(require("./TextField/index.js"), exports);
 __exportStar(require("./TimePicker/index.js"), exports);
 __exportStar(require("./YesNo/index.js"), exports);
-__exportStar(require("./RadioButtonGroup/index.js"), exports);
+__exportStar(require("./ReactZodForm/index.js"), exports);

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

@@ -2,13 +2,50 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HomeLayout = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const HomeLayout = ({ title, description }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { className: "bg-cover bg-center h-screen", style: { backgroundImage: 'url("/wallpaper.webp")' }, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col h-screen justify-center items-center", children: [(0, jsx_runtime_1.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 ?? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Bienvenido, inicie sesi\u00F3n para continuar." }) }), (0, jsx_runtime_1.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 ?? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Web app, realizada en Zauru." }) })] }) }));
+const react_1 = require("@remix-run/react");
+const HomeLayout = ({ title, description, loading, color = "green", }) => {
+    const getColorClasses = (shade) => {
+        switch (color) {
+            case "blue":
+                return `bg-blue-${shade}`;
+            case "red":
+                return `bg-red-${shade}`;
+            case "purple":
+                return `bg-purple-${shade}`;
+            case "yellow":
+                return `bg-yellow-${shade}`;
+            default:
+                return `bg-green-${shade}`;
+        }
+    };
+    const getGradientClasses = () => {
+        switch (color) {
+            case "blue":
+                return "from-blue-100 to-blue-200";
+            case "red":
+                return "from-red-100 to-red-200";
+            case "purple":
+                return "from-purple-100 to-purple-200";
+            case "yellow":
+                return "from-yellow-100 to-yellow-200";
+            default:
+                return "from-green-100 to-green-200";
+        }
+    };
+    const getButtonClasses = () => {
+        switch (color) {
+            case "blue":
+                return "bg-blue-600 hover:bg-blue-700 focus:ring-blue-500";
+            case "red":
+                return "bg-red-600 hover:bg-red-700 focus:ring-red-500";
+            case "purple":
+                return "bg-purple-600 hover:bg-purple-700 focus:ring-purple-500";
+            case "yellow":
+                return "bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-500";
+            default:
+                return "bg-green-600 hover:bg-green-700 focus:ring-green-500";
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `min-h-screen bg-gradient-to-br ${getGradientClasses()} flex flex-col justify-center py-12 sm:px-6 lg:px-8 relative overflow-hidden`, children: [(0, jsx_runtime_1.jsx)("div", { className: `absolute top-0 left-0 w-64 h-64 ${getColorClasses(500)} rounded-full -translate-x-1/2 -translate-y-1/2 opacity-50` }), (0, jsx_runtime_1.jsx)("div", { className: `absolute bottom-0 right-0 w-96 h-96 ${getColorClasses(600)} rounded-full translate-x-1/3 translate-y-1/3 opacity-40` }), (0, jsx_runtime_1.jsx)("div", { className: `absolute top-1/2 left-1/4 w-48 h-48 ${getColorClasses(400)} rounded-full opacity-30` }), (0, jsx_runtime_1.jsx)("div", { className: `absolute top-1/3 right-1/4 w-32 h-32 ${getColorClasses(500)} rounded-full opacity-25` }), (0, jsx_runtime_1.jsx)("div", { className: `absolute bottom-1/4 left-1/3 w-40 h-40 ${getColorClasses(400)} rounded-full opacity-20` }), (0, jsx_runtime_1.jsx)("div", { className: `absolute top-3/4 right-1/2 w-24 h-24 ${getColorClasses(600)} rounded-full opacity-15` }), (0, jsx_runtime_1.jsxs)("div", { className: "sm:mx-auto sm:w-full sm:max-w-md relative z-10", children: [(0, jsx_runtime_1.jsx)("img", { className: "mx-auto h-12 w-auto", src: "/logo.png", alt: "Zauru Logo" }), (0, jsx_runtime_1.jsx)("h2", { className: "mt-6 text-center text-3xl font-extrabold text-gray-900", children: title ?? "Bienvenido" }), (0, jsx_runtime_1.jsx)("p", { className: "mt-2 text-center text-sm text-gray-600", children: description ?? "Inicie sesión para acceder a su cuenta" })] }), loading ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})) : ((0, jsx_runtime_1.jsx)("div", { className: "mt-8 sm:mx-auto sm:w-full sm:max-w-md relative z-10", children: (0, jsx_runtime_1.jsx)("div", { className: "bg-white bg-opacity-90 py-8 px-4 shadow-lg sm:rounded-lg sm:px-10", children: (0, jsx_runtime_1.jsx)(react_1.Form, { className: "space-y-6", method: "post", action: "/login", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("button", { type: "submit", className: `w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white ${getButtonClasses()} transition duration-150 ease-in-out`, children: "Inicie sesi\u00F3n con Zauru" }) }) }) }) }))] }));
 };
 exports.HomeLayout = HomeLayout;

package/dist/cjs/Modal/Modal.js

@@ -28,8 +28,7 @@ const createModal = ({ title, description, okButtonText, showOptions = true, })
         modalOverlay.classList.add("fixed", "inset-0", "bg-black", "opacity-50", "z-40");
         document.body.appendChild(modalOverlay);
         document.body.appendChild(modalWrapper);
-        const content = typeof description === "function" ? description() : description;
-        const ModalContent = () => ((0, jsx_runtime_1.jsx)("div", { className: "relative w-auto my-6 mx-auto max-w-3xl", children: (0, jsx_runtime_1.jsxs)("div", { className: "border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-3xl font-semibold", children: title }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("span", { className: "close-button", onClick: handleClose, children: "\u00D7" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "relative p-6 flex-auto", children: content }), showOptions && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b", children: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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 ModalContent = () => ((0, jsx_runtime_1.jsx)("div", { className: "relative w-auto my-6 mx-auto max-w-3xl", children: (0, jsx_runtime_1.jsxs)("div", { className: "border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-3xl font-semibold", children: title }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("span", { className: "close-button", onClick: handleClose, children: "\u00D7" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "relative p-6 flex-auto", children: description }), showOptions && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b", children: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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 = (0, client_1.createRoot)(modalWrapper);
         root.render((0, jsx_runtime_1.jsx)(ModalContent, {}));
     });