@zauru-sdk/components 1.0.99 → 1.0.100

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

@@ -1,74 +1,143 @@
 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 { useEffect, useState, useRef } from "react";
 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;
+import { useFormContext, Controller } from "react-hook-form";
+export 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] = useState(defaultValue || null);
     const [valueMulti, setValueMulti] = useState(defaultValueMulti);
-    const [inputValue, setInputValue] = useState("");
+    const [inputValue, setInputValue] = useState(defaultValue?.label || "");
     const [showTooltip, setShowTooltip] = useState(false);
-    const [isClient, setIsClient] = useState(typeof window !== "undefined");
-    const menuIsOpen = readOnly ? false : props?.menuIsOpen;
+    const [isOpen, setIsOpen] = useState(false);
+    const [filteredOptions, setFilteredOptions] = useState(options);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const selectRef = useRef(null);
+    const optionsRef = useRef(null);
+    const [isTabPressed, setIsTabPressed] = useState(false);
+    const [isEnterPressed, setIsEnterPressed] = useState(false);
+    const [isSearching, setIsSearching] = useState(false);
+    const { control, formState: { errors }, setValue: setFormValue, } = 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;
-    }
     useEffect(() => {
-        setValue(defaultValue || null);
-    }, [defaultValue]);
+        setFilteredOptions(options);
+    }, [options]);
     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 (_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);
+    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 handleOnChangeMulti = (selection) => {
-        if (Array.isArray(selection)) {
-            setValueMulti(selection);
-            onChangeMulti &&
-                onChangeMulti(selection);
+    const handleBlur = () => {
+        setTimeout(() => {
+            if (isTabPressed &&
+                filteredOptions.length > 0 &&
+                !isEnterPressed &&
+                isSearching) {
+                handleOptionClick(filteredOptions[0]);
+            }
+            setIsTabPressed(false);
+            setIsEnterPressed(false);
+            setIsSearching(false);
+            setIsOpen(false);
+        }, 200);
+    };
+    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 = (_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"
+    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 (_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 }))] }));
+    }
+    return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, ref: selectRef, children: [title && (_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 })), _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 });
+                    : "text-gray-700 dark:text-gray-500"}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "relative", children: [_jsx(Controller, { name: name || "", control: control, rules: { required }, defaultValue: defaultValue || (isMulti ? [] : null), render: ({ field }) => (_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) && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: "\u00D7" })), isOpen && !isReadOnly && (_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) => (_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 && (_jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: valueMulti.map((option, index) => (_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, _jsx("button", { type: "button", onClick: () => handleOptionClick(option), className: "ml-1 text-blue-600 hover:text-blue-800", children: "\u00D7" })] }, `${option.value}-${index}`))) })), helpText && (_jsx("div", { className: "flex items-center relative mt-1", 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?.message?.toString() || "Error desconocido"] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
 };

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

@@ -1,9 +1,14 @@
 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;
+import { useFormContext } from "react-hook-form";
+export 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] = useState(defaultValue);
+    const { register: tempRegister, formState: { errors }, } = 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`;
@@ -13,9 +18,12 @@ export const TextAreaWithoutValidation = (props) => {
         setValue(defaultValue);
     }, [defaultValue]);
     if (hidden) {
-        return (_jsx("textarea", { id: id ?? name, name: name, value: defaultValue, readOnly: true, hidden: true }));
+        return (_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();
@@ -23,14 +31,7 @@ export const TextAreaWithoutValidation = (props) => {
         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) => {
+    return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && (_jsxs("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _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 && (_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 });
+                }, 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 && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error.message?.toString()] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
 };

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

@@ -1,11 +1,19 @@
 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;
+import { useFormContext } from "react-hook-form";
+export 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] = useState(false);
     const [value, setValue] = useState(defaultValue);
+    const { register: tempRegister, formState: { errors }, } = 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`;
@@ -15,9 +23,12 @@ export const TextFieldWithoutValidation = (props) => {
         setValue(defaultValue);
     }, [defaultValue]);
     if (hidden) {
-        return (_jsx("input", { type: type, id: id ?? name, name: name, value: defaultValue, readOnly: true, hidden: true }));
+        return (_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();
@@ -51,20 +62,14 @@ export const TextFieldWithoutValidation = (props) => {
             }
         }
     };
-    const inputComponent = (_jsx("input", { type: type, name: name, readOnly: readOnly, disabled: disabled, id: id ?? name, autoComplete: "given-name", value: value, onWheel: (e) => {
+    const inputComponent = (_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 _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 });
+    return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && (_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 && _jsx("span", { className: "text-red-500", children: "*" })] })), _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.message?.toString()] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
 };

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

@@ -1,11 +1,16 @@
 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;
+import { useFormContext } from "react-hook-form";
+export const FormTimePicker = (props) => {
+    const { id, name, title, defaultValue = "", hint, helpText, onChange, tabIndex, disabled = false, required = false, } = props;
     const [value, setValue] = useState(defaultValue);
     const [showTooltip, setShowTooltip] = useState(false);
+    const { register: tempRegister, formState: { errors }, } = 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`;
@@ -18,14 +23,12 @@ export const FormTimePickerWithoutValidation = (props) => {
         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 });
+    const handleOnChange = (e) => {
+        setValue(e.target.value);
+        onChange && onChange(e.target.value);
+        if (register) {
+            register.onChange(e);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [title && (_jsxs("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${textColor}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _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, 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 && (_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.message?.toString()] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
 };

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

@@ -1,18 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useAppSelector } from "@zauru-sdk/redux";
 import { useState } from "react";
+import { useFormContext } from "react-hook-form";
 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 { id, name, title, defaultValue = false, helpText, onChange, disabled, required, } = props;
+    const { register: tempRegister, formState: { errors }, } = 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] = 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 (_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 }))] }));
+    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, checked: value, value: value.toString(), className: "sr-only peer", disabled: disabled, ...(register ?? {}), name: name, onChange: handleOnChange }), 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 }), required && _jsx("span", { className: "text-red-500", children: "*" })] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error.message?.toString()] })), !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

@@ -5,10 +5,9 @@ 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";
-export * from "./RadioButtonGroup/index.js";
+export * from "./ReactZodForm/index.js";

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

@@ -1,10 +1,47 @@
-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." }) })] }) }));
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Form } from "@remix-run/react";
+export 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 (_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: [_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` }), _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` }), _jsx("div", { className: `absolute top-1/2 left-1/4 w-48 h-48 ${getColorClasses(400)} rounded-full opacity-30` }), _jsx("div", { className: `absolute top-1/3 right-1/4 w-32 h-32 ${getColorClasses(500)} rounded-full opacity-25` }), _jsx("div", { className: `absolute bottom-1/4 left-1/3 w-40 h-40 ${getColorClasses(400)} rounded-full opacity-20` }), _jsx("div", { className: `absolute top-3/4 right-1/2 w-24 h-24 ${getColorClasses(600)} rounded-full opacity-15` }), _jsxs("div", { className: "sm:mx-auto sm:w-full sm:max-w-md relative z-10", children: [_jsx("img", { className: "mx-auto h-12 w-auto", src: "/logo.png", alt: "Zauru Logo" }), _jsx("h2", { className: "mt-6 text-center text-3xl font-extrabold text-gray-900", children: title ?? "Bienvenido" }), _jsx("p", { className: "mt-2 text-center text-sm text-gray-600", children: description ?? "Inicie sesión para acceder a su cuenta" })] }), loading ? (_jsx(_Fragment, {})) : (_jsx("div", { className: "mt-8 sm:mx-auto sm:w-full sm:max-w-md relative z-10", children: _jsx("div", { className: "bg-white bg-opacity-90 py-8 px-4 shadow-lg sm:rounded-lg sm:px-10", children: _jsx(Form, { className: "space-y-6", method: "post", action: "/login", children: _jsx("div", { children: _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" }) }) }) }) }))] }));
 };

package/dist/esm/Modal/Modal.js

@@ -25,8 +25,7 @@ export const createModal = ({ title, description, okButtonText, showOptions = tr
         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 = () => (_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: content }), 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 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/NavBar/NavBar.js

@@ -8,25 +8,20 @@ const OptionsDropDownButton = ({ color, options, name }) => {
     const [showOptionsMenu, setShowOptionsMenu] = useState(true);
     return (_jsx("div", { className: "nav-item ml-auto", children: _jsx("div", { className: "flex justify-center", children: _jsxs("div", { className: "relative inline-block", children: [_jsxs("button", { onClick: () => setShowOptionsMenu(!showOptionsMenu), className: `relative flex items-center p-2 text-xs text-white ${color.bg700} active:${color.bg900} border border-transparent rounded-full uppercase focus:ring-opacity-40 focus:outline-none`, children: [name ?? _jsx(OpcionButtonSvgIcon, {}), _jsx(DropDownArrowSvgIcon, {})] }), _jsx("div", { className: "absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-800", hidden: showOptionsMenu, onMouseLeave: () => setShowOptionsMenu(true), children: options.map((option) => option) })] }) }) }));
 };
-const NavItem = ({ name, link, icon, color, specialColor, childrens = [], }) => (_jsx("li", { className: "nav-item", children: childrens.length > 0 ? (_jsx(OptionsDropDownButton, { name: name, color: color, options: childrens.map((x, index) => (_jsx(DropDownLinkButton, { text: x.name, path: x.link, buttonHover: "hover:bg-red-100" }, index))) })) : (_jsx("div", { className: `${specialColor ? specialColor.bg700 : color.bg700} container text-white w-56 sm:w-auto h-10 text-sm py-1 uppercase rounded shadow hover:shadow-lg outline-none rounded-full focus:outline-none my-auto sm:my-0 sm:mr-1 mb-1 ease-linear transition-all duration-150 `, children: _jsx(Link, { className: "px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75", to: link, prefetch: "none", children: _jsxs("div", { className: "mx-auto pt-2", children: [icon, _jsx("span", { children: name })] }) }) })) }));
+const NavItem = ({ name, link, icon, color, specialColor, childrens = [], }) => (_jsx("li", { className: "nav-item", children: childrens.length > 0 ? (_jsx(OptionsDropDownButton, { name: name, color: color, options: childrens.map((x, index) => (_jsx(DropDownLinkButton, { text: x.name, path: x.link, buttonHover: "hover:bg-red-100" }, index))) })) : (_jsx("div", { className: `${specialColor ? specialColor.bg700 : color.bg700} container text-white w-full sm:w-auto h-10 text-sm py-1 uppercase shadow hover:shadow-lg outline-none rounded-full focus:outline-none my-auto sm:my-0 sm:mr-1 mb-1 ease-linear transition-all duration-150 `, children: _jsx(Link, { className: "px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75", to: link, prefetch: "none", children: _jsxs("div", { className: "mx-auto pt-2", children: [icon, _jsx("span", { children: name })] }) }) })) }));
 export const NavBar = ({ title, loggedIn, items, selectedColor, }) => {
     const color = COLORS[selectedColor];
     const [NavBarOpen, setNavBarOpen] = useState(false);
-    const options = (_jsxs(_Fragment, { children: [_jsx("ul", { children: loggedIn && (_jsx("div", { className: "flex flex-col sm:flex-row ", children: items
-                        .filter((item) => item.loggedIn)
-                        .map((item, index) => {
-                        const specialColor = item.color
-                            ? COLORS[item.color]
-                            : undefined;
-                        return (_jsx(NavItem, { name: item.name, link: item.link, icon: item.icon, specialColor: specialColor, color: color, childrens: item.childrens?.map((x) => {
-                                return { ...x };
-                            }) }, index));
-                    }) })) }), _jsx("ul", { className: "sm:flex sm:flex-col ml-auto lg:flex-row", children: loggedIn ? (_jsx(OptionsDropDownButton, { color: color, options: [
+    const renderNavItems = (items) => (_jsx("div", { className: "flex flex-col lg:flex-row w-full", children: items.map((item, index) => {
+            const specialColor = item.color
+                ? COLORS[item.color]
+                : undefined;
+            return (_jsx(NavItem, { name: item.name, link: item.link, icon: item.icon, specialColor: specialColor, color: color, childrens: item.childrens?.map((x) => {
+                    return { ...x };
+                }) }, index));
+        }) }));
+    const options = (_jsxs(_Fragment, { children: [_jsx("ul", { className: "w-full lg:flex lg:items-center", children: renderNavItems(items.filter((item) => item.loggedIn === loggedIn)) }), _jsx("ul", { className: "sm:flex sm:flex-col lg:flex-row ml-auto", children: loggedIn && (_jsx(OptionsDropDownButton, { color: color, options: [
                         _jsx(DropDownLinkButton, { text: "Cerrar Sesi\u00F3n", path: "/logout", icon: _jsx(LogoutDropDownSvgIcon, {}), buttonHover: "hover:bg-red-100" }, 0),
-                    ] })) : (items
-                    .filter((item) => !item.loggedIn)
-                    .map((item, index) => {
-                    return (_jsx(NavItem, { name: item.name, link: item.link, icon: item.icon, color: color }, index));
-                })) })] }));
-    return (_jsx("nav", { className: `py-3 ${color.bg600}`, children: _jsxs("div", { className: "flex items-center justify-between ml-5 mr-5", children: [_jsxs("div", { className: "flex justify-between w-full lg:w-auto", children: [_jsx(Link, { className: "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white", to: "/home", prefetch: "none", children: _jsxs(_Fragment, { children: [_jsx("div", { className: "inline-block mr-2 mb-2 align-middle", children: _jsx("img", { className: "w-auto h-7", src: "/logo.png", alt: "logo-zauru" }) }), title] }) }), _jsx("button", { className: `rounded lg:hidden focus:outline-none focus:ring focus:${color.ring600} focus:ring-opacity-50`, "aria-label": "Toggle mobile menu", type: "button", onClick: () => setNavBarOpen(!NavBarOpen), children: _jsx(MenuAlt4Svg, { open: NavBarOpen }) })] }), _jsx("div", { className: `lg:hidden absolute top-0 left-0 z-50 w-64 h-full ${color.bg700} shadow-lg transform ${NavBarOpen ? "translate-x-0" : "-translate-x-full"} transition-transform duration-300 ease-in-out`, children: options }), _jsx("div", { className: "hidden lg:flex w-full lg:w-auto", children: options })] }) }));
+                    ] })) })] }));
+    return (_jsx("nav", { className: `py-3 ${color.bg600}`, children: _jsxs("div", { className: "flex items-center justify-between ml-5 mr-5", children: [_jsxs("div", { className: "flex justify-between w-full lg:w-auto", children: [_jsx(Link, { className: "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white", to: "/home", prefetch: "none", children: _jsxs(_Fragment, { children: [_jsx("div", { className: "inline-block mr-2 mb-2 align-middle", children: _jsx("img", { className: "w-auto h-7", src: "/logo.png", alt: "logo-zauru" }) }), title] }) }), _jsx("button", { className: `rounded lg:hidden focus:outline-none focus:ring focus:${color.ring600} focus:ring-opacity-50`, "aria-label": "Toggle mobile menu", type: "button", onClick: () => setNavBarOpen(!NavBarOpen), children: _jsx(MenuAlt4Svg, { open: NavBarOpen }) })] }), _jsx("div", { className: `lg:hidden fixed top-0 left-0 z-50 w-64 h-full ${color.bg700} shadow-lg transform ${NavBarOpen ? "translate-x-0" : "-translate-x-full"} transition-transform duration-300 ease-in-out overflow-y-auto`, children: _jsx("div", { className: "p-4", children: options }) }), _jsx("div", { className: "hidden lg:flex lg:items-center w-full lg:w-auto", children: options })] }) }));
 };

package/dist/esm/Table/ZauruTable.js

@@ -10,10 +10,17 @@ const customStyles = {
         style: {
             color: "#202124",
             fontSize: "14px",
-            justifyContent: "left", // Alinea el texto a la izquierda
-            whiteSpace: "normal", // Permite el ajuste de texto
-            wordBreak: "break-word", // Asegura que las palabras se rompan correctamente para evitar desbordamientos
-            maxWidth: "150px", // Establece un ancho máximo para las celdas del encabezado
+            justifyContent: "left",
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+            maxWidth: "250px",
+            padding: "4px", // Add some padding
+        },
+    },
+    cells: {
+        style: {
+            whiteSpace: "normal", // Allow wrapping for cell content
+            wordBreak: "break-word",
         },
     },
     rows: {

package/dist/esm/WithTooltip/WithTooltip.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const WithTooltip = (props) => {
     const { children, text } = props;
-    return (_jsx(_Fragment, { children: _jsxs("span", { className: "group relative", children: [children, _jsx("span", { className: "pointer-events-none absolute -top-10 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-black px-2 py-1 text-white opacity-0 transition z-50 before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-black before:content-[''] group-hover:opacity-100 before:z-50", children: text })] }) }));
+    return (_jsxs("div", { className: "group relative inline-block", children: [children, _jsx("div", { className: "pointer-events-none absolute left-1/2 -translate-x-1/2 bottom-full mb-2 opacity-0 transition-opacity duration-300 group-hover:opacity-100", children: _jsxs("div", { className: "relative bg-black text-white text-sm rounded py-1 px-2 text-wrap w-40", children: [text, _jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-black" })] }) })] }));
 };