@zauru-sdk/components 1.0.51 → 1.0.53

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

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

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormTimePicker = exports.FormTimePickerWithoutValidation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@zauru-sdk/icons");
+const redux_1 = require("@zauru-sdk/redux");
+const react_1 = require("react");
+const FormTimePickerWithoutValidation = (props) => {
+    const { id, name, title, defaultValue = "", hint, helpText, onChange, tabIndex, error, disabled = false, } = props;
+    const [value, setValue] = (0, react_1.useState)(defaultValue);
+    const [showTooltip, setShowTooltip] = (0, react_1.useState)(false);
+    const color = error ? "red" : "gray";
+    const isReadOnly = disabled;
+    const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
+    const textColor = isReadOnly ? "text-gray-500" : `text-${color}-500`;
+    const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
+    (0, react_1.useEffect)(() => {
+        setValue(defaultValue);
+    }, [defaultValue]);
+    const clearValue = () => {
+        setValue("");
+        onChange && onChange("");
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${textColor}`, children: title })), (0, jsx_runtime_1.jsxs)("div", { className: "flex relative items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute left-0 flex items-center pl-3 pointer-events-none", children: (0, jsx_runtime_1.jsx)(icons_1.ClockIconSVG, {}) }), (0, jsx_runtime_1.jsx)("input", { id: id, name: name, tabIndex: tabIndex, type: "time", onChange: (e) => {
+                            setValue(e.target.value);
+                            onChange && onChange(e.target.value);
+                        }, value: value, pattern: "\\d{2}:\\d{2}", className: `${bgColor} ${borderColor} ${textColor} text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5` }), value && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: clearValue, className: "absolute right-0 mr-10", children: (0, jsx_runtime_1.jsx)(icons_1.CloseSvgIcon, {}) })), helpText && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center relative ml-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [(0, jsx_runtime_1.jsx)(icons_1.IdeaIconSVG, {}), showTooltip && ((0, jsx_runtime_1.jsx)("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black", children: helpText }))] }) }))] }), error && ((0, jsx_runtime_1.jsxs)("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Oops!" }), " ", error] })), !error && hint && ((0, jsx_runtime_1.jsx)("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
+};
+exports.FormTimePickerWithoutValidation = FormTimePickerWithoutValidation;
+const FormTimePicker = (props) => {
+    const { formValidations } = (0, redux_1.useAppSelector)((state) => state.formValidation);
+    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+    props = { ...props, error };
+    return (0, jsx_runtime_1.jsx)(exports.FormTimePickerWithoutValidation, { ...props });
+};
+exports.FormTimePicker = FormTimePicker;

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

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

package/dist/cjs/Form/index.js

@@ -0,0 +1,29 @@
+"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("./FormLayout/index.js"), exports);
+__exportStar(require("./SelectField/index.js"), exports);
+__exportStar(require("./TextArea/index.js"), exports);
+__exportStar(require("./TextField/index.js"), exports);
+__exportStar(require("./TimePicker/index.js"), exports);
+__exportStar(require("./YesNo/index.js"), exports);

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

@@ -0,0 +1,9 @@
+"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

@@ -0,0 +1,17 @@
+"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/homeLayout/index.js

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

package/dist/cjs/Layouts/index.js

@@ -0,0 +1,17 @@
+"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("./homeLayout/index.js"), exports);

package/dist/cjs/LineSeparator/LineSeparator.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineSeparator = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LineSeparator = () => {
+    return (0, jsx_runtime_1.jsx)("hr", { className: "h-px my-8 bg-gray-200 border-0 dark:bg-gray-400" });
+};
+exports.LineSeparator = LineSeparator;

package/dist/cjs/LineSeparator/index.js

@@ -0,0 +1,17 @@
+"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("./LineSeparator.js"), exports);

package/dist/cjs/Modal/Modal.js

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

package/dist/cjs/Modal/index.js

@@ -0,0 +1,17 @@
+"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("./Modal.js"), exports);

package/dist/cjs/NavBar/NavBar.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavBar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const icons_1 = require("@zauru-sdk/icons");
+const NavBar_utils_js_1 = require("./NavBar.utils.js");
+const react_2 = require("@remix-run/react");
+const DropDownLinkButton = ({ text, path, icon, buttonHover, }) => ((0, jsx_runtime_1.jsx)(react_2.Link, { className: `block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 ${buttonHover ?? ""} dark:hover:bg-gray-700 dark:hover:text-white`, to: path, prefetch: "none", children: (0, jsx_runtime_1.jsxs)("div", { className: "mx-auto pt-2", children: [icon, (0, jsx_runtime_1.jsx)("span", { children: text })] }) }));
+const OptionsDropDownButton = ({ color, options, name }) => {
+    const [showOptionsMenu, setShowOptionsMenu] = (0, react_1.useState)(true);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "nav-item ml-auto", children: (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative inline-block", children: [(0, jsx_runtime_1.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 ?? (0, jsx_runtime_1.jsx)(icons_1.OpcionButtonSvgIcon, {}), (0, jsx_runtime_1.jsx)(icons_1.DropDownArrowSvgIcon, {})] }), (0, jsx_runtime_1.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 = [], }) => ((0, jsx_runtime_1.jsx)("li", { className: "nav-item", children: childrens.length > 0 ? ((0, jsx_runtime_1.jsx)(OptionsDropDownButton, { name: name, color: color, options: childrens.map((x, index) => ((0, jsx_runtime_1.jsx)(DropDownLinkButton, { text: x.name, path: x.link, buttonHover: "hover:bg-red-100" }, index))) })) : ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(react_2.Link, { className: "px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75", to: link, prefetch: "none", children: (0, jsx_runtime_1.jsxs)("div", { className: "mx-auto pt-2", children: [icon, (0, jsx_runtime_1.jsx)("span", { children: name })] }) }) })) }));
+const NavBar = ({ title, loggedIn, items, selectedColor, }) => {
+    const color = NavBar_utils_js_1.COLORS[selectedColor];
+    const [NavBarOpen, setNavBarOpen] = (0, react_1.useState)(false);
+    const options = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("ul", { children: loggedIn && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col sm:flex-row ", children: items
+                        .filter((item) => item.loggedIn)
+                        .map((item, index) => {
+                        const specialColor = item.color
+                            ? NavBar_utils_js_1.COLORS[item.color]
+                            : undefined;
+                        return ((0, jsx_runtime_1.jsx)(NavItem, { name: item.name, link: item.link, icon: item.icon, specialColor: specialColor, color: color, childrens: item.childrens?.map((x) => {
+                                return { ...x };
+                            }) }, index));
+                    }) })) }), (0, jsx_runtime_1.jsx)("ul", { className: "sm:flex sm:flex-col ml-auto lg:flex-row", children: loggedIn ? ((0, jsx_runtime_1.jsx)(OptionsDropDownButton, { color: color, options: [
+                        (0, jsx_runtime_1.jsx)(DropDownLinkButton, { text: "Cerrar Sesi\u00F3n", path: "/logout", icon: (0, jsx_runtime_1.jsx)(icons_1.LogoutDropDownSvgIcon, {}), buttonHover: "hover:bg-red-100" }, 0),
+                    ] })) : (items
+                    .filter((item) => !item.loggedIn)
+                    .map((item, index) => {
+                    return ((0, jsx_runtime_1.jsx)(NavItem, { name: item.name, link: item.link, icon: item.icon, color: color }, index));
+                })) })] }));
+    return ((0, jsx_runtime_1.jsx)("nav", { className: `py-3 ${color.bg600}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between ml-5 mr-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between w-full lg:w-auto", children: [(0, jsx_runtime_1.jsx)(react_2.Link, { className: "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white", to: "/home", prefetch: "none", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "inline-block mr-2 mb-2 align-middle", children: (0, jsx_runtime_1.jsx)("img", { className: "w-auto h-7", src: "/logo.png", alt: "logo-zauru" }) }), title] }) }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(icons_1.MenuAlt4Svg, { open: NavBarOpen }) })] }), (0, jsx_runtime_1.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 }), (0, jsx_runtime_1.jsx)("div", { className: "hidden lg:flex w-full lg:w-auto", children: options })] }) }));
+};
+exports.NavBar = NavBar;

package/dist/cjs/NavBar/NavBar.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/NavBar/NavBar.utils.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLORS = void 0;
+exports.COLORS = {
+    sky: {
+        bg900: "bg-sky-900",
+        bg700: "bg-sky-700",
+        bg600: "bg-sky-600",
+        bg500: "bg-sky-500",
+        ring600: "ring-sky-600",
+        ring500: "ring-sky-500",
+    },
+    purple: {
+        bg900: "bg-purple-900",
+        bg700: "bg-purple-700",
+        bg600: "bg-purple-600",
+        bg500: "bg-purple-500",
+        ring600: "ring-purple-600",
+        ring500: "ring-purple-500",
+    },
+    pink: {
+        bg900: "bg-pink-900",
+        bg700: "bg-pink-700",
+        bg600: "bg-pink-600",
+        bg500: "bg-pink-500",
+        ring600: "ring-pink-600",
+        ring500: "ring-pink-500",
+    },
+    slate: {
+        bg900: "bg-slate-900",
+        bg700: "bg-slate-700",
+        bg600: "bg-slate-600",
+        bg500: "bg-slate-500",
+        ring600: "ring-slate-600",
+        ring500: "ring-slate-500",
+    },
+    green: {
+        bg900: "bg-green-900",
+        bg700: "bg-green-700",
+        bg600: "bg-green-600",
+        bg500: "bg-green-500",
+        ring600: "ring-green-600",
+        ring500: "ring-green-500",
+    },
+    yellow: {
+        bg900: "bg-yellow-900",
+        bg700: "bg-yellow-700",
+        bg600: "bg-yellow-600",
+        bg500: "bg-yellow-500",
+        ring600: "ring-yellow-600",
+        ring500: "ring-yellow-500",
+    },
+    red: {
+        bg900: "bg-red-900",
+        bg700: "bg-red-700",
+        bg600: "bg-red-600",
+        bg500: "bg-red-500",
+        ring600: "ring-red-600",
+        ring500: "ring-red-500",
+    },
+};

package/dist/cjs/NavBar/index.js

@@ -0,0 +1,19 @@
+"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("./NavBar.js"), exports);
+__exportStar(require("./NavBar.types.js"), exports);
+__exportStar(require("./NavBar.utils.js"), exports);

package/dist/cjs/ProgressBar/ProgressBar.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressBar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ProgressBar = (props) => {
+    const { title, percent } = props;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: percent && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && (0, jsx_runtime_1.jsx)("div", { className: "mb-1 text-lg font-medium", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "w-full h-6 bg-gray-200 rounded-full", children: (0, jsx_runtime_1.jsx)("div", { className: "h-6 bg-blue-600 rounded-full", style: { width: `${percent}%` } }) })] })) }));
+};
+exports.ProgressBar = ProgressBar;

package/dist/cjs/ProgressBar/ProgressCircle.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressCircle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ProgressCircle = ({ total, completed, description, title, }) => {
+    const [percentage, setPercentage] = (0, react_1.useState)(0);
+    const strokeDasharray = 2 * Math.PI * 42; // radio del circulo
+    const progressColor = `rgba(${255 - 2.55 * percentage}, ${2.55 * percentage}, 0)`;
+    (0, react_1.useEffect)(() => {
+        if (total > 0) {
+            setPercentage((completed / total) * 100);
+        }
+        else {
+            setPercentage(100);
+        }
+    }, [total, completed]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center", children: [title && ((0, jsx_runtime_1.jsx)("h2", { className: "mb-4 text-xl text-center text-gray-700", children: title })), (0, jsx_runtime_1.jsxs)("svg", { width: "100", height: "100", className: "relative", children: [(0, jsx_runtime_1.jsx)("circle", { r: "42", cx: "50", cy: "50", fill: "transparent", stroke: "#eee", strokeWidth: "8" }), (0, jsx_runtime_1.jsx)("circle", { r: "42", cx: "50", cy: "50", fill: "transparent", stroke: progressColor, strokeWidth: "8", strokeDasharray: strokeDasharray, strokeDashoffset: strokeDasharray - strokeDasharray * (percentage / 100), strokeLinecap: "round", style: {
+                            transform: "rotate(-90deg)",
+                            transformOrigin: "50% 50%",
+                        } }), (0, jsx_runtime_1.jsx)("text", { x: "50", y: "55", textAnchor: "middle", fill: progressColor, style: {
+                            fontSize: "16px",
+                            fontWeight: "bold",
+                        }, children: `${Math.round(percentage)}%` })] }), (0, jsx_runtime_1.jsx)("p", { className: "mt-2 text-center text-gray-500", children: description })] }));
+};
+exports.ProgressCircle = ProgressCircle;

package/dist/cjs/ProgressBar/index.js

@@ -0,0 +1,18 @@
+"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("./ProgressBar.js"), exports);
+__exportStar(require("./ProgressCircle.js"), exports);

package/dist/cjs/Skeletons/LoadingInputSkeleton.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingInputSkeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LoadingInputSkeleton = () => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "w-full h-full bg-gray-300 animate-pulse rounded", style: {
+            maxWidth: "100%",
+            height: "40px",
+            boxShadow: "0px 0px 0px 1px rgba(0, 0, 0, 0.1)",
+        } }));
+};
+exports.LoadingInputSkeleton = LoadingInputSkeleton;

package/dist/cjs/Skeletons/index.js

@@ -0,0 +1,17 @@
+"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("./LoadingInputSkeleton.js"), exports);

package/dist/cjs/Tab/Tab.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tabs = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const node_1 = require("@remix-run/node");
+const react_1 = require("@remix-run/react");
+const react_2 = __importDefault(require("react"));
+//<reference> https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/react/tabs/text
+const Tabs = (props) => {
+    const { items } = props;
+    const [openTab, setOpenTab] = react_2.default.useState(1);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap", children: (0, jsx_runtime_1.jsxs)("div", { className: "w-full", children: [(0, jsx_runtime_1.jsx)("ul", { className: "flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row", role: "tablist", children: items?.map((item, index) => {
+                            return ((0, jsx_runtime_1.jsx)("li", { className: "mb-px mr-2 last:mr-0 flex-auto text-center", children: (0, jsx_runtime_1.jsx)("a", { className: "text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal " +
+                                        (openTab === index
+                                            ? "text-white bg-red-600"
+                                            : "text-red-600 bg-white"), onClick: (e) => {
+                                        e.preventDefault();
+                                        setOpenTab(index);
+                                        (0, node_1.redirect)(item.link);
+                                    }, "data-toggle": "tab", href: item.link, role: "tablist", children: item.title }, index) }, index));
+                        }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded", children: (0, jsx_runtime_1.jsx)("div", { className: "px-4 py-5 flex-auto", children: (0, jsx_runtime_1.jsx)("div", { className: "tab-content tab-space", children: (0, jsx_runtime_1.jsx)(react_1.Outlet, {}) }) }) })] }) }) }));
+};
+exports.Tabs = Tabs;

package/dist/cjs/Tab/index.js

@@ -0,0 +1,17 @@
+"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("./Tab.js"), exports);