@zauru-sdk/components 1.0.116 → 1.0.119

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

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

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

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

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

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReactZodForm = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const zod_1 = require("@hookform/resolvers/zod");
-const react_1 = require("@remix-run/react");
-const react_hook_form_1 = require("react-hook-form");
-const zod_2 = require("zod");
-const emptySchema = zod_2.z.any();
-const ReactZodForm = (props) => {
-    const { children, method = "post", schema = emptySchema, onSubmit, id, className, } = props;
-    const submit = (0, react_1.useSubmit)();
-    const methods = (0, react_hook_form_1.useForm)({
-        resolver: (0, zod_1.zodResolver)(schema),
-        mode: "onSubmit",
-    });
-    const handleSubmit = (data, event) => {
-        if (onSubmit) {
-            onSubmit(data, event);
-        }
-        else {
-            // If no onSubmit is provided, use Remix's submit function
-            submit(event?.target, { method });
-        }
-    };
-    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, { ...methods, children: (0, jsx_runtime_1.jsx)(react_1.Form, { onSubmit: methods.handleSubmit(handleSubmit), method: method, id: id, className: className, children: children }) }));
-};
-exports.ReactZodForm = ReactZodForm;
-exports.default = exports.ReactZodForm;

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

@@ -1,176 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectField = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_1 = require("@zauru-sdk/icons");
-const react_1 = require("react");
-const index_js_1 = require("../../Skeletons/index.js");
-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 = false, } = 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)(defaultValue?.label || "");
-    const [showTooltip, setShowTooltip] = (0, react_1.useState)(false);
-    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 { register: tempRegister, formState: { errors }, setValue: setFormValue, } = (0, react_hook_form_1.useFormContext)() || { formState: {} };
-    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`;
-    const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
-    const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
-    (0, react_1.useEffect)(() => {
-        setFilteredOptions(options);
-    }, [options]);
-    (0, react_1.useEffect)(() => {
-        const handleClickOutside = (event) => {
-            if (selectRef.current &&
-                !selectRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        if (defaultValue) {
-            setValue(defaultValue);
-            setInputValue(defaultValue.label);
-            if (setFormValue) {
-                setFormValue(name || "", defaultValue.value);
-            }
-        }
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, []);
-    const handleInputChange = (e) => {
-        const newValue = e.target.value;
-        if (register) {
-            register.onChange(e);
-        }
-        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);
-            if (setFormValue) {
-                setFormValue(name || "", newValue.map((v) => v.value));
-            }
-        }
-        else {
-            setValue(option);
-            setInputValue(option.label);
-            onChange && onChange(option);
-            if (setFormValue) {
-                setFormValue(name || "", option.value);
-            }
-        }
-        setIsOpen(false);
-    };
-    const handleClear = () => {
-        if (isMulti) {
-            setValueMulti([]);
-            onChangeMulti && onChangeMulti([]);
-            if (setFormValue) {
-                setFormValue(name || "", []);
-            }
-        }
-        else {
-            setValue(null);
-            onChange && onChange(null);
-            if (setFormValue) {
-                setFormValue(name || "", "");
-            }
-        }
-        setInputValue("");
-    };
-    const handleBlur = () => {
-        setTimeout(() => {
-            if (isTabPressed &&
-                filteredOptions.length > 0 &&
-                !isEnterPressed &&
-                isSearching) {
-                if (highlightedIndex >= 0) {
-                    handleOptionClick(filteredOptions[highlightedIndex]);
-                }
-                else {
-                    handleOptionClick(filteredOptions[0]);
-                }
-            }
-            setIsTabPressed(false);
-            setIsEnterPressed(false);
-            setIsSearching(false);
-            setIsOpen(false);
-        }, 200);
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === "Tab") {
-            setIsTabPressed(true);
-        }
-        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]);
-        }
-        else if (e.key === "Backspace" && (value || valueMulti.length > 0)) {
-            e.preventDefault();
-            handleClear();
-            setInputValue("");
-            setFilteredOptions(options);
-            setIsOpen(true);
-        }
-    };
-    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, 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)("input", { type: "text", id: id, value: inputValue, onFocus: () => setIsOpen(true), 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...", autoComplete: "off", onChange: handleInputChange, onBlur: handleBlur, required: required }), (0, jsx_runtime_1.jsx)("input", { type: "hidden", ...(register ?? {}), name: name, value: isMulti
-                            ? valueMulti.map((v) => v.value).join(",")
-                            : value?.value || "" }), 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,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextArea = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-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`;
-    const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
-    const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-500`;
-    (0, react_1.useEffect)(() => {
-        setValue(defaultValue);
-    }, [defaultValue]);
-    if (hidden) {
-        return ((0, jsx_runtime_1.jsx)("textarea", { id: id ?? name, value: defaultValue, readOnly: true, hidden: true, ...(register ?? {}), name: name }));
-    }
-    const handleInputChange = (event) => {
-        if (register) {
-            register.onChange(event);
-        }
-        if (stopChangeEvents) {
-            event.stopPropagation();
-            event.preventDefault();
-        }
-        setValue(event.target.value);
-        onChange && onChange(event.target.value);
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && ((0, jsx_runtime_1.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`, ...(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,73 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextField = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_1 = require("@zauru-sdk/icons");
-const react_1 = require("react");
-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 }, setValue: setOnFormValue, } = (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`;
-    const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
-    const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
-    (0, react_1.useEffect)(() => {
-        if (setOnFormValue) {
-            setOnFormValue(name ?? "-1", defaultValue);
-        }
-        setValue(defaultValue);
-    }, [defaultValue]);
-    const handleInputChange = (event) => {
-        const newValue = event.target.value;
-        if (register) {
-            register.onChange(event);
-        }
-        if (stopChangeEvents) {
-            event.stopPropagation();
-            event.preventDefault();
-        }
-        setValue(newValue);
-        onChange && onChange(newValue, event);
-    };
-    const handleKeyDown = (event) => {
-        if (integer && type === "number") {
-            // Permitir solo números y teclas de control
-            const allowedKeys = [
-                "Backspace",
-                "ArrowLeft",
-                "ArrowRight",
-                "Delete",
-                "Enter",
-                "Tab",
-            ];
-            if (!allowedKeys.includes(event.key) && !/^[0-9]$/.test(event.key)) {
-                event.preventDefault();
-            }
-        }
-    };
-    if (hidden) {
-        return ((0, jsx_runtime_1.jsx)("input", { type: type, id: id ?? name, value: value, hidden: true, ...(register ?? {}), name: name, onChange: handleInputChange }));
-    }
-    const inputComponent = ((0, jsx_runtime_1.jsx)("input", { type: type, readOnly: isReadOnly, disabled: disabled, id: id ?? name, autoComplete: "off", value: value, onWheel: (e) => {
-            e.currentTarget.blur();
-        }, 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`, ...(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.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,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormTimePicker = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_1 = require("@zauru-sdk/icons");
-const react_1 = require("react");
-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`;
-    const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
-    const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
-    (0, react_1.useEffect)(() => {
-        setValue(defaultValue);
-    }, [defaultValue]);
-    const clearValue = () => {
-        setValue("");
-        onChange && onChange("");
-    };
-    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

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.YesNo = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-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, 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 = (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, 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

@@ -1,29 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Checkbox/index.js"), exports);
-__exportStar(require("./Checklist/index.js"), exports);
-__exportStar(require("./DatePicker/index.js"), exports);
-__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("./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("./ReactZodForm/index.js"), exports);

package/dist/cjs/HOC/ValidateEmployeeAccess/index.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ValidateEmployeeAccess = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const hooks_1 = require("@zauru-sdk/hooks");
-const react_1 = require("@remix-run/react");
-const ValidateEmployeeAccess = ({ children, permissionVariableName, showIfNoPermission = false, }) => {
-    const { data: employee } = (0, hooks_1.useGetEmployeeProfile)();
-    const variable_string = (0, hooks_1.useGetSessionAttribute)(permissionVariableName, "sessionVariable");
-    const variable = variable_string?.split(",");
-    const hasPermission = variable?.includes(employee?.id?.toString() || "-1");
-    if (showIfNoPermission && !hasPermission) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4", children: [(0, jsx_runtime_1.jsx)("img", { src: "/logo.png", alt: "Zauru Logo", className: "mb-8 h-20" }), (0, jsx_runtime_1.jsx)("h1", { className: "text-5xl font-extrabold text-red-500 mb-6", children: "\u00A1Acceso Denegado!" }), (0, jsx_runtime_1.jsx)("div", { className: "w-full max-w-2xl", children: (0, jsx_runtime_1.jsx)("p", { className: "text-2xl text-gray-300 mb-8 text-center", children: "Lo sentimos, no tienes permiso para acceder a esta p\u00E1gina." }) }), (0, jsx_runtime_1.jsx)(react_1.Link, { to: "/", className: "bg-blue-600 text-white py-3 px-8 rounded-full text-lg font-semibold hover:bg-blue-700 transition duration-300 transform hover:scale-105", children: "Regresar al inicio" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-12 text-gray-500", children: (0, jsx_runtime_1.jsx)("p", { children: "Si crees que esto es un error, por favor contacta a soporte." }) })] }));
-    }
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: hasPermission ? children : null });
-};
-exports.ValidateEmployeeAccess = ValidateEmployeeAccess;

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

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InfoLabel = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const InfoLabel = (props) => {
-    const { description, title, className } = props;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `block ${className}`, children: [(0, jsx_runtime_1.jsx)("label", { className: "inline text-sm font-medium text-gray-700", children: `${title.toUpperCase()} ` }), (0, jsx_runtime_1.jsx)("label", { className: "inline text-sm font-medium text-gray-500", children: description })] }));
-};
-exports.InfoLabel = InfoLabel;

package/dist/cjs/Labels/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./InfoLabel/index.js"), exports);

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

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ErrorLayout = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@remix-run/react");
-const ErrorLayout = () => {
-    const error = (0, react_1.useRouteError)();
-    return ((0, jsx_runtime_1.jsxs)("html", { lang: "es", className: "bg-gray-900 text-white", children: [(0, jsx_runtime_1.jsxs)("head", { children: [(0, jsx_runtime_1.jsx)("meta", { charSet: "utf-8" }), (0, jsx_runtime_1.jsx)("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }), (0, jsx_runtime_1.jsx)("title", { children: "\u00A1Ups! Algo sali\u00F3 mal" }), (0, jsx_runtime_1.jsx)(react_1.Meta, {}), (0, jsx_runtime_1.jsx)(react_1.Links, {})] }), (0, jsx_runtime_1.jsxs)("body", { className: "min-h-screen flex flex-col items-center justify-center p-4", children: [(0, jsx_runtime_1.jsx)("img", { src: "/logo.png", alt: "Zauru Logo", className: "mb-8 h-20" }), (0, jsx_runtime_1.jsx)("h1", { className: "text-5xl font-extrabold text-red-500 mb-6", children: "\u00A1Ups!" }), (0, jsx_runtime_1.jsx)("div", { className: "w-full max-w-2xl", children: (0, jsx_runtime_1.jsx)("p", { className: "text-2xl text-gray-300 mb-8 text-center", children: (0, react_1.isRouteErrorResponse)(error)
-                                ? `Error ${error.status}: ${error.statusText}`
-                                : error instanceof Error
-                                    ? error.message
-                                    : "Ha ocurrido un error inesperado" }) }), (0, jsx_runtime_1.jsx)(react_1.Link, { to: "/", className: "bg-blue-600 text-white py-3 px-8 rounded-full text-lg font-semibold hover:bg-blue-700 transition duration-300 transform hover:scale-105", children: "Regresar al inicio" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-12 text-gray-500", children: (0, jsx_runtime_1.jsx)("p", { children: "Si el problema persiste, por favor contacta a soporte." }) }), (0, jsx_runtime_1.jsx)(react_1.Scripts, {})] })] }));
-};
-exports.ErrorLayout = ErrorLayout;