@zauru-sdk/components 1.0.112 → 1.0.114

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.114](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.113...v1.0.114) (2024-09-25)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
+## [1.0.113](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.112...v1.0.113) (2024-09-25)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
 ## [1.0.112](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.111...v1.0.112) (2024-09-19)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/Form/ReactZodForm/index.d.ts

@@ -7,6 +7,7 @@ type Props = {
     onSubmit?: SubmitHandler<FieldValues>;
     id?: string;
     method?: "post" | "put" | "delete" | "patch";
+    className?: string;
 };
 export declare const ReactZodForm: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default ReactZodForm;

package/dist/HOC/ValidateEmployeeAccess/index.d.ts

@@ -0,0 +1,5 @@
+export declare const ValidateEmployeeAccess: ({ children, permissionVariableName, showIfNoPermission, }: {
+    children: React.ReactNode;
+    permissionVariableName: string;
+    showIfNoPermission?: boolean | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/Layouts/errorLayout/index.d.ts

@@ -0,0 +1 @@
+export declare const ErrorLayout: () => import("react/jsx-runtime").JSX.Element;

package/dist/Layouts/index.d.ts

@@ -1 +1,2 @@
 export * from "./homeLayout/index.js";
+export * from "./errorLayout/index.js";

package/dist/SidePanel/index.d.ts

@@ -0,0 +1,21 @@
+import React, { ReactNode } from "react";
+/**
+ * SidePanel Component
+ *
+ * This component creates a collapsible side panel that can be toggled open and closed.
+ *
+ * @param {ReactNode} children - The content to be displayed inside the side panel.
+ * @param {boolean} [closeOnClickOutside=true] - If true, the panel will close when clicking outside of it.
+ * @param {number} [widthPercentage=25] - The width of the panel as a percentage of the viewport width.
+ * @param {string} [buttonIcon="chevron"] - The icon to use for the toggle button. Can be "chevron", "filter", or a custom ReactNode.
+ *
+ * @returns A toggleable side panel component.
+ */
+interface SidePanelProps {
+    children: ReactNode;
+    closeOnClickOutside?: boolean;
+    widthPercentage?: number;
+    buttonIcon?: "chevron" | "filter" | ReactNode;
+}
+declare const SidePanel: React.FC<SidePanelProps>;
+export default SidePanel;

package/dist/cjs/Buttons/Button.js

@@ -49,13 +49,13 @@ const Button = (props) => {
             .map((error) => error?.message?.toString())
             .join(", ")
         : "";
-    const buttonContent = ((0, jsx_runtime_1.jsx)("button", { type: type, name: "action", disabled: loading || disabled || (enableFormErrorsValidation && formHasErrors), value: name, onClick: onClickSave, className: `ml-2 ${loading || disabled || (enableFormErrorsValidation && formHasErrors)
-            ? " bg-opacity-25 "
-            : ""} ${loading
-            ? " cursor-progress"
-            : `${disabled || (enableFormErrorsValidation && formHasErrors)
-                ? ""
-                : `hover:${color.bg700}`}`} inline-flex justify-center rounded-md border border-transparent ${color.bg600} py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${color.ring500} focus:ring-offset-2 ${className}`, children: loading ? loadingText : inside }));
+    const buttonContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", name: "action", value: name }), (0, jsx_runtime_1.jsx)("button", { type: type, disabled: loading || disabled || (enableFormErrorsValidation && formHasErrors), onClick: onClickSave, className: `ml-2 ${loading || disabled || (enableFormErrorsValidation && formHasErrors)
+                    ? " bg-opacity-25 "
+                    : ""} ${loading
+                    ? " cursor-progress"
+                    : `${disabled || (enableFormErrorsValidation && formHasErrors)
+                        ? ""
+                        : `hover:${color.bg700}`}`} inline-flex justify-center rounded-md border border-transparent ${color.bg600} py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${color.ring500} focus:ring-offset-2 ${className}`, children: loading ? loadingText : inside })] }));
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(enableFormErrorsValidation && formHasErrors && errorMessage) ||
                 (enableFormErrorsDescriptions && errorMessage) ? ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-end mb-2", children: (0, jsx_runtime_1.jsx)("div", { className: "p-2 bg-red-100 border border-red-400 text-red-700 rounded-md shadow-sm", children: (0, jsx_runtime_1.jsx)("p", { className: "text-sm", children: errorMessage }) }) })) : null, buttonContent] }));
 };

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

@@ -26,7 +26,7 @@ const FormDatePicker = (props) => {
         setValue("");
         onChange && onChange("");
     };
-    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} ${className}`, 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.CalendarIconSVG, {}) }), (0, jsx_runtime_1.jsx)("input", { id: id, tabIndex: tabIndex, type: "date", value: value ?? "", pattern: "\\d{4}-\\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: (e) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [title && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${textColor} ${className}`, 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.CalendarIconSVG, {}) }), (0, jsx_runtime_1.jsx)("input", { id: id, tabIndex: tabIndex, type: "date", value: value ?? "", pattern: "\\d{4}-\\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: (e) => {
                             setValue(e.target.value);
                             onChange && onChange(e.target.value);
                             if (register) {

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

@@ -8,7 +8,7 @@ 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, } = 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),
@@ -23,9 +23,7 @@ const ReactZodForm = (props) => {
             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: onSubmit ? methods.handleSubmit(onSubmit) : undefined, 
-            //onSubmit={methods.handleSubmit(handleSubmit)}
-            method: method, id: id, children: children }) }));
+    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

@@ -7,7 +7,7 @@ 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, } = 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 || "");
@@ -20,13 +20,18 @@ const SelectField = (props) => {
     const [isTabPressed, setIsTabPressed] = (0, react_1.useState)(false);
     const [isEnterPressed, setIsEnterPressed] = (0, react_1.useState)(false);
     const [isSearching, setIsSearching] = (0, react_1.useState)(false);
-    const { control, formState: { errors }, setValue: setFormValue, } = (0, react_hook_form_1.useFormContext)() || { formState: {} };
+    const { 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}-500`;
+    const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
     (0, react_1.useEffect)(() => {
         setFilteredOptions(options);
     }, [options]);
@@ -40,7 +45,9 @@ const SelectField = (props) => {
         if (defaultValue) {
             setValue(defaultValue);
             setInputValue(defaultValue.label);
-            setFormValue(name || "", defaultValue);
+            if (setFormValue) {
+                setFormValue(name || "", defaultValue.value);
+            }
         }
         document.addEventListener("mousedown", handleClickOutside);
         return () => {
@@ -49,6 +56,9 @@ const SelectField = (props) => {
     }, []);
     const handleInputChange = (e) => {
         const newValue = e.target.value;
+        if (register) {
+            register.onChange(e);
+        }
         setInputValue(newValue);
         onInputChange && onInputChange(newValue);
         setIsSearching(true);
@@ -61,13 +71,17 @@ const SelectField = (props) => {
                 : [...valueMulti, option];
             setValueMulti(newValue);
             onChangeMulti && onChangeMulti(newValue);
-            setFormValue(name || "", newValue);
+            if (setFormValue) {
+                setFormValue(name || "", newValue.map((v) => v.value));
+            }
         }
         else {
             setValue(option);
             setInputValue(option.label);
             onChange && onChange(option);
-            setFormValue(name || "", option);
+            if (setFormValue) {
+                setFormValue(name || "", option.value);
+            }
         }
         setIsOpen(false);
     };
@@ -75,12 +89,16 @@ const SelectField = (props) => {
         if (isMulti) {
             setValueMulti([]);
             onChangeMulti && onChangeMulti([]);
-            setFormValue(name || "", []);
+            if (setFormValue) {
+                setFormValue(name || "", []);
+            }
         }
         else {
             setValue(null);
             onChange && onChange(null);
-            setFormValue(name || "", null);
+            if (setFormValue) {
+                setFormValue(name || "", "");
+            }
         }
         setInputValue("");
     };
@@ -145,10 +163,9 @@ const SelectField = (props) => {
     }
     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)(react_hook_form_1.Controller, { name: name || "", control: control, rules: { required }, defaultValue: defaultValue || (isMulti ? [] : null), render: ({ field }) => ((0, jsx_runtime_1.jsx)("input", { ...field, type: "text", id: id, value: inputValue, onFocus: () => setIsOpen(true), onBlur: handleBlur, onKeyDown: handleKeyDown, readOnly: isReadOnly, disabled: disabled, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, placeholder: isMulti ? "Select options..." : "Select an option...", onChange: (e) => {
-                                field.onChange(e);
-                                handleInputChange(e);
-                            }, autoComplete: "off" })) }), 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
+                    : "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"

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

@@ -9,7 +9,7 @@ const TextField = (props) => {
     const { id, name, defaultValue = "", hidden, type = "text", onChange, onKeyDown, disabled = false, readOnly = false, min, integer = false, stopChangeEvents, style, title, helpText, className, hint, required, } = props;
     const [showTooltip, setShowTooltip] = (0, react_1.useState)(false);
     const [value, setValue] = (0, react_1.useState)(defaultValue);
-    const { register: tempRegister, formState: { errors }, } = (0, react_hook_form_1.useFormContext)() || { formState: {} }; // Obtener el contexto solo si existe
+    const { 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", {
@@ -21,11 +21,15 @@ const TextField = (props) => {
     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`;
+    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);
         }
@@ -33,18 +37,8 @@ const TextField = (props) => {
             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);
-        }
+        setValue(newValue);
+        onChange && onChange(newValue, event);
     };
     const handleKeyDown = (event) => {
         if (integer && type === "number") {
@@ -63,9 +57,9 @@ const TextField = (props) => {
         }
     };
     if (hidden) {
-        return ((0, jsx_runtime_1.jsx)("input", { type: "hidden", id: id ?? name, value: value, readOnly: true, hidden: true, ...(register ?? {}), name: name, onChange: handleInputChange }));
+        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: readOnly, disabled: disabled, id: id ?? name, autoComplete: "given-name", value: value, onWheel: (e) => {
+    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);

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

@@ -17,7 +17,7 @@ const FormTimePicker = (props) => {
     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 textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
     const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
     (0, react_1.useEffect)(() => {
         setValue(defaultValue);

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

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

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

package/dist/cjs/Layouts/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./homeLayout/index.js"), exports);
+__exportStar(require("./errorLayout/index.js"), exports);

package/dist/cjs/SidePanel/index.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const framer_motion_1 = require("framer-motion");
+// SVG icon for the left-pointing chevron
+const ChevronLeftIcon = () => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "h-6 w-6", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M7.72 12.53a.75.75 0 010-1.06l7.5-7.5a.75.75 0 111.06 1.06L9.31 12l6.97 6.97a.75.75 0 11-1.06 1.06l-7.5-7.5z", clipRule: "evenodd" }) }));
+// SVG icon for the right-pointing chevron
+const ChevronRightIcon = () => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "h-6 w-6", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z", clipRule: "evenodd" }) }));
+// SVG icon for the filter (bars filter icon)
+const FilterIcon = () => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "h-6 w-6", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M3 6a1 1 0 011-1h16a1 1 0 110 2H4a1 1 0 01-1-1zm0 6a1 1 0 011-1h10a1 1 0 110 2H4a1 1 0 01-1-1zm0 6a1 1 0 011-1h4a1 1 0 110 2H4a1 1 0 01-1-1z", clipRule: "evenodd" }) }));
+const SidePanel = ({ children, closeOnClickOutside = true, widthPercentage = 25, buttonIcon = "chevron", }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const panelRef = (0, react_1.useRef)(null);
+    const togglePanel = () => {
+        setIsOpen(!isOpen);
+    };
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (closeOnClickOutside &&
+                panelRef.current &&
+                !panelRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [closeOnClickOutside]);
+    const renderIcon = () => {
+        if (typeof buttonIcon === "string") {
+            switch (buttonIcon) {
+                case "chevron":
+                    return isOpen ? (0, jsx_runtime_1.jsx)(ChevronRightIcon, {}) : (0, jsx_runtime_1.jsx)(ChevronLeftIcon, {});
+                case "filter":
+                    return (0, jsx_runtime_1.jsx)(FilterIcon, {});
+                default:
+                    return (0, jsx_runtime_1.jsx)(ChevronLeftIcon, {});
+            }
+        }
+        else {
+            return buttonIcon;
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isOpen && ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { ref: panelRef, initial: { x: "100%" }, animate: { x: 0 }, exit: { x: "100%" }, transition: { type: "spring", stiffness: 300, damping: 30 }, className: "fixed top-0 right-0 h-full bg-white shadow-lg z-[9999] overflow-y-auto", style: { width: `${widthPercentage}%` }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: togglePanel, className: "absolute top-4 left-4 p-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors", children: (0, jsx_runtime_1.jsx)(ChevronRightIcon, {}) }), (0, jsx_runtime_1.jsx)("div", { className: "p-6 mt-16", children: children })] })) }), !isOpen && ((0, jsx_runtime_1.jsx)("button", { onClick: togglePanel, className: "fixed top-1/2 right-0 transform -translate-y-1/2 bg-indigo-600 text-white p-3 rounded-l-lg shadow-md hover:bg-indigo-700 transition-colors z-[10000]", children: renderIcon() }))] }));
+};
+exports.default = SidePanel;

package/dist/cjs/index.js

@@ -39,3 +39,5 @@ __exportStar(require("./Tooltip/index.js"), exports);
 __exportStar(require("./WithTooltip/index.js"), exports);
 __exportStar(require("./Wizards/index.js"), exports);
 __exportStar(require("./Zendesk/index.js"), exports);
+__exportStar(require("./HOC/ValidateEmployeeAccess/index.js"), exports);
+__exportStar(require("./SidePanel/index.js"), exports);

package/dist/esm/Buttons/Button.js

@@ -46,13 +46,13 @@ export const Button = (props) => {
             .map((error) => error?.message?.toString())
             .join(", ")
         : "";
-    const buttonContent = (_jsx("button", { type: type, name: "action", disabled: loading || disabled || (enableFormErrorsValidation && formHasErrors), value: name, onClick: onClickSave, className: `ml-2 ${loading || disabled || (enableFormErrorsValidation && formHasErrors)
-            ? " bg-opacity-25 "
-            : ""} ${loading
-            ? " cursor-progress"
-            : `${disabled || (enableFormErrorsValidation && formHasErrors)
-                ? ""
-                : `hover:${color.bg700}`}`} inline-flex justify-center rounded-md border border-transparent ${color.bg600} py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${color.ring500} focus:ring-offset-2 ${className}`, children: loading ? loadingText : inside }));
+    const buttonContent = (_jsxs(_Fragment, { children: [_jsx("input", { type: "hidden", name: "action", value: name }), _jsx("button", { type: type, disabled: loading || disabled || (enableFormErrorsValidation && formHasErrors), onClick: onClickSave, className: `ml-2 ${loading || disabled || (enableFormErrorsValidation && formHasErrors)
+                    ? " bg-opacity-25 "
+                    : ""} ${loading
+                    ? " cursor-progress"
+                    : `${disabled || (enableFormErrorsValidation && formHasErrors)
+                        ? ""
+                        : `hover:${color.bg700}`}`} inline-flex justify-center rounded-md border border-transparent ${color.bg600} py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${color.ring500} focus:ring-offset-2 ${className}`, children: loading ? loadingText : inside })] }));
     return (_jsxs(_Fragment, { children: [(enableFormErrorsValidation && formHasErrors && errorMessage) ||
                 (enableFormErrorsDescriptions && errorMessage) ? (_jsx("div", { className: "flex flex-col items-end mb-2", children: _jsx("div", { className: "p-2 bg-red-100 border border-red-400 text-red-700 rounded-md shadow-sm", children: _jsx("p", { className: "text-sm", children: errorMessage }) }) })) : null, buttonContent] }));
 };

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { CalendarIconSVG, CloseSvgIcon, IdeaIconSVG } from "@zauru-sdk/icons";
 import { useFormContext } from "react-hook-form";
@@ -23,7 +23,7 @@ export const FormDatePicker = (props) => {
         setValue("");
         onChange && onChange("");
     };
-    return (_jsxs(_Fragment, { children: [title && (_jsxs("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${textColor} ${className}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "flex relative items-center", children: [_jsx("div", { className: "absolute left-0 flex items-center pl-3 pointer-events-none", children: _jsx(CalendarIconSVG, {}) }), _jsx("input", { id: id, tabIndex: tabIndex, type: "date", value: value ?? "", pattern: "\\d{4}-\\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: (e) => {
+    return (_jsxs("div", { children: [title && (_jsxs("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${textColor} ${className}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "flex relative items-center", children: [_jsx("div", { className: "absolute left-0 flex items-center pl-3 pointer-events-none", children: _jsx(CalendarIconSVG, {}) }), _jsx("input", { id: id, tabIndex: tabIndex, type: "date", value: value ?? "", pattern: "\\d{4}-\\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: (e) => {
                             setValue(e.target.value);
                             onChange && onChange(e.target.value);
                             if (register) {

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

@@ -5,7 +5,7 @@ import { FormProvider, useForm, } from "react-hook-form";
 import { z } from "zod";
 const emptySchema = z.any();
 export const ReactZodForm = (props) => {
-    const { children, method = "post", schema = emptySchema, onSubmit, id, } = props;
+    const { children, method = "post", schema = emptySchema, onSubmit, id, className, } = props;
     const submit = useSubmit();
     const methods = useForm({
         resolver: zodResolver(schema),
@@ -20,8 +20,6 @@ export const ReactZodForm = (props) => {
             submit(event?.target, { method });
         }
     };
-    return (_jsx(FormProvider, { ...methods, children: _jsx(Form, { onSubmit: onSubmit ? methods.handleSubmit(onSubmit) : undefined, 
-            //onSubmit={methods.handleSubmit(handleSubmit)}
-            method: method, id: id, children: children }) }));
+    return (_jsx(FormProvider, { ...methods, children: _jsx(Form, { onSubmit: methods.handleSubmit(handleSubmit), method: method, id: id, className: className, children: children }) }));
 };
 export default ReactZodForm;

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

@@ -2,9 +2,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { IdeaIconSVG } from "@zauru-sdk/icons";
 import { useEffect, useState, useRef } from "react";
 import { LoadingInputSkeleton } from "../../Skeletons/index.js";
-import { useFormContext, Controller } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
 export const SelectField = (props) => {
-    const { id, name, title, defaultValue, defaultValueMulti = [], helpText, hint, options, onChange, onChangeMulti, isClearable = false, disabled = false, readOnly = false, isMulti = false, loading = false, className = "", onInputChange, required, } = props;
+    const { 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] = useState(defaultValue || null);
     const [valueMulti, setValueMulti] = useState(defaultValueMulti);
     const [inputValue, setInputValue] = useState(defaultValue?.label || "");
@@ -17,13 +17,18 @@ export const SelectField = (props) => {
     const [isTabPressed, setIsTabPressed] = useState(false);
     const [isEnterPressed, setIsEnterPressed] = useState(false);
     const [isSearching, setIsSearching] = useState(false);
-    const { control, formState: { errors }, setValue: setFormValue, } = useFormContext() || { formState: {} };
+    const { register: tempRegister, formState: { errors }, setValue: setFormValue, } = 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}-500`;
+    const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
     useEffect(() => {
         setFilteredOptions(options);
     }, [options]);
@@ -37,7 +42,9 @@ export const SelectField = (props) => {
         if (defaultValue) {
             setValue(defaultValue);
             setInputValue(defaultValue.label);
-            setFormValue(name || "", defaultValue);
+            if (setFormValue) {
+                setFormValue(name || "", defaultValue.value);
+            }
         }
         document.addEventListener("mousedown", handleClickOutside);
         return () => {
@@ -46,6 +53,9 @@ export const SelectField = (props) => {
     }, []);
     const handleInputChange = (e) => {
         const newValue = e.target.value;
+        if (register) {
+            register.onChange(e);
+        }
         setInputValue(newValue);
         onInputChange && onInputChange(newValue);
         setIsSearching(true);
@@ -58,13 +68,17 @@ export const SelectField = (props) => {
                 : [...valueMulti, option];
             setValueMulti(newValue);
             onChangeMulti && onChangeMulti(newValue);
-            setFormValue(name || "", newValue);
+            if (setFormValue) {
+                setFormValue(name || "", newValue.map((v) => v.value));
+            }
         }
         else {
             setValue(option);
             setInputValue(option.label);
             onChange && onChange(option);
-            setFormValue(name || "", option);
+            if (setFormValue) {
+                setFormValue(name || "", option.value);
+            }
         }
         setIsOpen(false);
     };
@@ -72,12 +86,16 @@ export const SelectField = (props) => {
         if (isMulti) {
             setValueMulti([]);
             onChangeMulti && onChangeMulti([]);
-            setFormValue(name || "", []);
+            if (setFormValue) {
+                setFormValue(name || "", []);
+            }
         }
         else {
             setValue(null);
             onChange && onChange(null);
-            setFormValue(name || "", null);
+            if (setFormValue) {
+                setFormValue(name || "", "");
+            }
         }
         setInputValue("");
     };
@@ -142,10 +160,9 @@ export const SelectField = (props) => {
     }
     return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, ref: selectRef, children: [title && (_jsxs("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${color === "red"
                     ? "text-red-700 dark:text-red-500"
-                    : "text-gray-700 dark:text-gray-500"}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "relative", children: [_jsx(Controller, { name: name || "", control: control, rules: { required }, defaultValue: defaultValue || (isMulti ? [] : null), render: ({ field }) => (_jsx("input", { ...field, type: "text", id: id, value: inputValue, onFocus: () => setIsOpen(true), onBlur: handleBlur, onKeyDown: handleKeyDown, readOnly: isReadOnly, disabled: disabled, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, placeholder: isMulti ? "Select options..." : "Select an option...", onChange: (e) => {
-                                field.onChange(e);
-                                handleInputChange(e);
-                            }, autoComplete: "off" })) }), isClearable && (value || valueMulti.length > 0) && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: "\u00D7" })), isOpen && !isReadOnly && (_jsx("ul", { ref: optionsRef, className: "absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm", children: filteredOptions.map((option, index) => (_jsx("li", { className: `cursor-pointer select-none relative py-2 pl-3 pr-9 ${(isMulti
+                    : "text-gray-700 dark:text-gray-500"}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "relative", children: [_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 }), _jsx("input", { type: "hidden", ...(register ?? {}), name: name, value: isMulti
+                            ? valueMulti.map((v) => v.value).join(",")
+                            : value?.value || "" }), isClearable && (value || valueMulti.length > 0) && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: "\u00D7" })), isOpen && !isReadOnly && (_jsx("ul", { ref: optionsRef, className: "absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm", children: filteredOptions.map((option, index) => (_jsx("li", { className: `cursor-pointer select-none relative py-2 pl-3 pr-9 ${(isMulti
                                 ? valueMulti.some((v) => v.value === option.value)
                                 : value?.value === option.value)
                                 ? "text-white bg-indigo-600"