@zauru-sdk/components 1.0.52 → 1.0.53

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

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileUploadField = exports.FileUploadFieldWithoutValidation = 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 FileUploadFieldWithoutValidation = (props) => {
+    const { id, name, title, helpText, hint, onChange, disabled = false, readOnly = false, error, fileTypes = [], showAvailableTypes = false, className, defaultValue = undefined, download = false, } = props;
+    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.jsx)("label", { htmlFor: name, className: `block mb-1 text-sm font-medium text-gray-700`, children: title })), " ", (0, jsx_runtime_1.jsx)("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: (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] })), !error && hintMessage && ((0, jsx_runtime_1.jsx)("p", { className: `mt-2 italic text-sm text-${color}-500`, children: hintMessage }))] }));
+};
+exports.FileUploadFieldWithoutValidation = FileUploadFieldWithoutValidation;
+const FileUploadField = (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.FileUploadFieldWithoutValidation, { ...props });
+};
+exports.FileUploadField = FileUploadField;

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

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@remix-run/react");
+const index_js_1 = require("../../Containers/index.js");
+const FormLayout = (props) => {
+    const { title, children, buttons, method, formId } = props;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Form, { id: formId, name: formId, method: method ?? "post", children: [title && ((0, jsx_runtime_1.jsx)("label", { className: "block text-sm font-medium text-gray-700 mb-3", children: title })), (0, jsx_runtime_1.jsxs)("div", { className: "shadow sm:overflow-hidden sm:rounded-md", children: [(0, jsx_runtime_1.jsx)("div", { className: "space-y-6 bg-white px-4 py-5 sm:p-6", children: children }), buttons && ((0, jsx_runtime_1.jsx)(index_js_1.ButtonSectionContainer, { children: buttons }))] })] }, formId));
+};
+exports.FormLayout = FormLayout;

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

@@ -0,0 +1,102 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectField = exports.SelectFieldWithoutValidation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@zauru-sdk/icons");
+const redux_1 = require("@zauru-sdk/redux");
+const react_1 = require("react");
+const react_select_1 = __importStar(require("react-select"));
+const index_js_1 = require("../../Skeletons/index.js");
+const Input = (props) => ((0, jsx_runtime_1.jsx)(react_select_1.components.Input, { ...props, readOnly: props.selectProps.isReadOnly }));
+const SelectFieldWithoutValidation = (props) => {
+    const { id, name, title, defaultValue, defaultValueMulti = [], helpText, hint, options, onChange, onChangeMulti, isClearable = false, error = false, disabled = false, readOnly = false, isMulti = false, loading = false, className = "", onInputChange, } = props;
+    const [value, setValue] = (0, react_1.useState)(defaultValue || null);
+    const [valueMulti, setValueMulti] = (0, react_1.useState)(defaultValueMulti);
+    const [inputValue, setInputValue] = (0, react_1.useState)("");
+    const [showTooltip, setShowTooltip] = (0, react_1.useState)(false);
+    const [isClient, setIsClient] = (0, react_1.useState)(typeof window !== "undefined");
+    const menuIsOpen = readOnly ? false : props?.menuIsOpen;
+    const color = error ? "red" : "gray";
+    let documentRef = null;
+    const isReadOnly = disabled || readOnly;
+    const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
+    const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
+    const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-500`;
+    if (typeof window !== "undefined") {
+        documentRef = document;
+    }
+    (0, react_1.useEffect)(() => {
+        setValue(defaultValue || null);
+    }, [defaultValue]);
+    (0, react_1.useEffect)(() => {
+        setIsClient(true);
+    }, []);
+    if (!isClient || loading || !documentRef) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: title })), (0, jsx_runtime_1.jsx)(index_js_1.LoadingInputSkeleton, {}), helpText && ((0, jsx_runtime_1.jsx)("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: helpText }))] }));
+    }
+    const handleOnChange = (selection) => {
+        // Verificar si el valor de selección es un objeto con propiedades 'value' y 'label'
+        if (typeof selection === "object" &&
+            selection !== null &&
+            "value" in selection &&
+            "label" in selection) {
+            setValue(selection);
+            onChange && onChange(selection);
+        }
+        else {
+            setValue(null);
+            onChange && onChange(null);
+        }
+    };
+    const handleOnChangeMulti = (selection) => {
+        if (Array.isArray(selection)) {
+            setValueMulti(selection);
+            onChangeMulti &&
+                onChangeMulti(selection);
+        }
+        else {
+            setValueMulti([]);
+            onChangeMulti && onChangeMulti([]);
+        }
+    };
+    const selectComponent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_select_1.default, { className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, id: isMulti ? undefined : id, instanceId: isMulti ? undefined : id, isDisabled: disabled, name: isMulti ? undefined : name, options: options, onChange: isMulti ? handleOnChangeMulti : handleOnChange, defaultValue: isMulti ? valueMulti : value, onInputChange: (newValue, actionMeta) => {
+                    setInputValue(newValue);
+                    onInputChange && onInputChange(newValue, actionMeta);
+                }, inputValue: inputValue, onMenuOpen: () => { }, onMenuClose: () => { }, menuPortalTarget: documentRef?.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 9999 }) }, isClearable: isClearable, isSearchable: true, components: { Input }, menuIsOpen: menuIsOpen, 
+                //windowThreshold={50}
+                isMulti: isMulti }), isMulti && ((0, jsx_runtime_1.jsx)("input", { hidden: true, readOnly: true, name: name, value: valueMulti.map((x) => x?.value).join(","), id: id }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && ((0, jsx_runtime_1.jsx)("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${color === "red"
+                    ? "text-red-700 dark:text-red-500"
+                    : "text-gray-700 dark:text-gray-500"}`, children: title })), (0, jsx_runtime_1.jsxs)("div", { className: "flex relative items-center", children: [selectComponent, helpText && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center relative ml-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [(0, jsx_runtime_1.jsx)(icons_1.IdeaIconSVG, {}), showTooltip && ((0, jsx_runtime_1.jsx)("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] }) }))] }), error && ((0, jsx_runtime_1.jsxs)("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Oops!" }), " ", error] })), !error && hint && ((0, jsx_runtime_1.jsx)("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
+};
+exports.SelectFieldWithoutValidation = SelectFieldWithoutValidation;
+const SelectField = (props) => {
+    const { formValidations } = (0, redux_1.useAppSelector)((state) => state.formValidation);
+    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+    props = { ...props, error };
+    return (0, jsx_runtime_1.jsx)(exports.SelectFieldWithoutValidation, { ...props });
+};
+exports.SelectField = SelectField;

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextArea = exports.TextAreaWithoutValidation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const redux_1 = require("@zauru-sdk/redux");
+const react_1 = require("react");
+const TextAreaWithoutValidation = (props) => {
+    const { id, name, title, defaultValue = "", hidden, hint, onChange, onKeyDown, disabled = false, error = false, readOnly = false, rows, cols, stopChangeEvents, className = "", } = props;
+    const [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)("textarea", { id: id ?? name, name: name, value: defaultValue, readOnly: true, hidden: true }));
+    }
+    const handleInputChange = (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.jsx)("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: title })), (0, jsx_runtime_1.jsx)("textarea", { name: name, readOnly: readOnly, disabled: disabled, id: id ?? name, autoComplete: "given-name", value: value, rows: rows, cols: cols, onChange: handleInputChange, onKeyDown: (event) => {
+                    onKeyDown && onKeyDown(event);
+                }, className: `mt-1 block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm` }), error && ((0, jsx_runtime_1.jsxs)("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Oops!" }), " ", error] })), !error && hint && ((0, jsx_runtime_1.jsx)("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
+};
+exports.TextAreaWithoutValidation = TextAreaWithoutValidation;
+//<reference> https://tailwindui.com/components/application-ui/forms/form-layouts
+const TextArea = (props) => {
+    const { formValidations } = (0, redux_1.useAppSelector)((state) => state.formValidation);
+    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+    props = { ...props, error };
+    return (0, jsx_runtime_1.jsx)(exports.TextAreaWithoutValidation, { ...props });
+};
+exports.TextArea = TextArea;

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 });