@zauru-sdk/components 1.0.52 → 1.0.53

package/dist/esm/NavBar/NavBar.js

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

package/dist/esm/NavBar/NavBar.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/NavBar/NavBar.utils.js

@@ -0,0 +1,58 @@
+export const 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/esm/NavBar/index.js

@@ -0,0 +1,3 @@
+export * from "./NavBar.js";
+export * from "./NavBar.types.js";
+export * from "./NavBar.utils.js";

package/dist/esm/ProgressBar/ProgressBar.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const ProgressBar = (props) => {
+    const { title, percent } = props;
+    return (_jsx(_Fragment, { children: percent && (_jsxs(_Fragment, { children: [title && _jsx("div", { className: "mb-1 text-lg font-medium", children: title }), _jsx("div", { className: "w-full h-6 bg-gray-200 rounded-full", children: _jsx("div", { className: "h-6 bg-blue-600 rounded-full", style: { width: `${percent}%` } }) })] })) }));
+};

package/dist/esm/ProgressBar/ProgressCircle.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+export const ProgressCircle = ({ total, completed, description, title, }) => {
+    const [percentage, setPercentage] = useState(0);
+    const strokeDasharray = 2 * Math.PI * 42; // radio del circulo
+    const progressColor = `rgba(${255 - 2.55 * percentage}, ${2.55 * percentage}, 0)`;
+    useEffect(() => {
+        if (total > 0) {
+            setPercentage((completed / total) * 100);
+        }
+        else {
+            setPercentage(100);
+        }
+    }, [total, completed]);
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center", children: [title && (_jsx("h2", { className: "mb-4 text-xl text-center text-gray-700", children: title })), _jsxs("svg", { width: "100", height: "100", className: "relative", children: [_jsx("circle", { r: "42", cx: "50", cy: "50", fill: "transparent", stroke: "#eee", strokeWidth: "8" }), _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%",
+                        } }), _jsx("text", { x: "50", y: "55", textAnchor: "middle", fill: progressColor, style: {
+                            fontSize: "16px",
+                            fontWeight: "bold",
+                        }, children: `${Math.round(percentage)}%` })] }), _jsx("p", { className: "mt-2 text-center text-gray-500", children: description })] }));
+};

package/dist/esm/ProgressBar/index.js

@@ -0,0 +1,2 @@
+export * from "./ProgressBar.js";
+export * from "./ProgressCircle.js";

package/dist/esm/Skeletons/LoadingInputSkeleton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const LoadingInputSkeleton = () => {
+    return (_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)",
+        } }));
+};

package/dist/esm/Skeletons/index.js

@@ -0,0 +1 @@
+export * from "./LoadingInputSkeleton.js";

package/dist/esm/Tab/Tab.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { redirect } from "@remix-run/node";
+import { Outlet } from "@remix-run/react";
+import React from "react";
+//<reference> https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/react/tabs/text
+export const Tabs = (props) => {
+    const { items } = props;
+    const [openTab, setOpenTab] = React.useState(1);
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "flex flex-wrap", children: _jsxs("div", { className: "w-full", children: [_jsx("ul", { className: "flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row", role: "tablist", children: items?.map((item, index) => {
+                            return (_jsx("li", { className: "mb-px mr-2 last:mr-0 flex-auto text-center", children: _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);
+                                        redirect(item.link);
+                                    }, "data-toggle": "tab", href: item.link, role: "tablist", children: item.title }, index) }, index));
+                        }) }), _jsx("div", { className: "relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded", children: _jsx("div", { className: "px-4 py-5 flex-auto", children: _jsx("div", { className: "tab-content tab-space", children: _jsx(Outlet, {}) }) }) })] }) }) }));
+};

package/dist/esm/Tab/index.js

@@ -0,0 +1 @@
+export * from "./Tab.js";

package/dist/esm/Table/ZauruTable.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSearchParams } from "@remix-run/react";
+import { useEffect, useState } from "react";
+import { createTheme } from "react-data-table-component";
+import { SearchSVG } from "@zauru-sdk/icons";
+import * as ReactDataTableComponent from "react-data-table-component";
+const DataTable = ReactDataTableComponent.default;
+const customStyles = {
+    headCells: {
+        style: {
+            color: "#202124",
+            fontSize: "14px",
+            justifyContent: "left", // Alinea el texto a la izquierda
+            whiteSpace: "normal", // Permite el ajuste de texto
+            wordBreak: "break-word", // Asegura que las palabras se rompan correctamente para evitar desbordamientos
+            maxWidth: "150px", // Establece un ancho máximo para las celdas del encabezado
+        },
+    },
+    rows: {
+        highlightOnHoverStyle: {
+            backgroundColor: "rgb(230, 244, 244)",
+            borderBottomColor: "#FFFFFF",
+            borderRadius: "25px",
+            outline: "1px solid #FFFFFF",
+        },
+    },
+    pagination: {
+        style: {
+            border: "none",
+        },
+    },
+};
+createTheme("solarized", {
+    text: {
+        primary: "#002b36",
+        secondary: "#002b36",
+    },
+    background: {
+        default: "#f9f9f9",
+    },
+    context: {
+        background: "#cb4b16",
+        text: "#555555",
+    },
+    divider: {
+        default: "#e2e4ff",
+    },
+    action: {
+        button: "rgba(0,0,0,.54)",
+        hover: "rgba(0,0,0,.08)",
+        disabled: "rgba(0,0,0,.12)",
+    },
+    headRow: {
+        background: "black",
+    },
+});
+createTheme("subTable", {
+    text: {
+        primary: "#002b36",
+        secondary: "#002b36",
+    },
+    background: {
+        default: "#e9e9e9",
+    },
+    context: {
+        background: "#cb4b16",
+        text: "#555555",
+    },
+    divider: {
+        default: "#e2e4ff",
+    },
+    action: {
+        button: "rgba(0,0,0,.54)",
+        hover: "rgba(0,0,0,.08)",
+        disabled: "rgba(0,0,0,.12)",
+    },
+    headRow: {
+        background: "black",
+    },
+});
+//Documentación de la tabla https://react-data-table-component.netlify.app/?path=/docs/getting-started-intro--docs
+export const ZauruTable = (props) => {
+    const { columns, conditionalRowStyles, data, loading = false, pagination, search, expandable, theme, className, offlineSearch = [], whitOutPagination = false, ...others } = props;
+    const [, setSearchParams] = useSearchParams({
+        page: "1",
+        perPage: "10",
+        search: "",
+    });
+    const [filteredData, setFilteredData] = useState(data);
+    const [showTable, setShowTable] = useState(false);
+    useEffect(() => {
+        setShowTable(true);
+    }, []);
+    useEffect(() => {
+        setFilteredData(data);
+    }, [data]);
+    const subHeaderComponentMemo = (_jsxs(_Fragment, { children: [_jsx("input", { name: "search", type: "text", placeholder: search?.placeholderSearch ?? "Filtrar", "aria-label": "Search Input", className: "bg-gray-50 border border-gray-300 text-gray-900 rounded-lg px-2", onChange: (event) => {
+                    const searchTerm = event.target.value;
+                    if (offlineSearch.length > 0) {
+                        filterData(searchTerm);
+                    }
+                }, onBlur: (event) => {
+                    const searchTerm = event.target.value;
+                    if (offlineSearch.length <= 0 && search) {
+                        setSearchParams((prevState) => ({
+                            ...Object.fromEntries(prevState),
+                            search: searchTerm,
+                        }));
+                    }
+                } }), _jsx("button", { type: "button", name: "search", className: "px-2 font-bold", children: _jsx(SearchSVG, {}) })] }));
+    const filterData = (searchTerm) => {
+        if (!searchTerm || !offlineSearch || offlineSearch.length === 0) {
+            setFilteredData(data);
+            return;
+        }
+        const filtered = data.filter((item) => offlineSearch.some((field) => item[field] &&
+            item[field]
+                .toString()
+                .toLowerCase()
+                .includes(searchTerm.toLowerCase())));
+        setFilteredData(filtered);
+    };
+    const handlePageChange = (page) => {
+        //hacer el fetch de más datos
+        setSearchParams((prevState) => ({
+            ...Object.fromEntries(prevState),
+            page: page.toString(),
+        }));
+    };
+    const handlePerRowsChange = async (newPerPage, page) => {
+        //hacer el fetch de más datos
+        setSearchParams((prevState) => ({
+            ...Object.fromEntries(prevState),
+            perPage: newPerPage.toString(),
+        }));
+    };
+    if (!showTable) {
+        return _jsx(_Fragment, { children: "Loading..." });
+    }
+    //Textos en español de la tabla
+    const paginationComponentOptions = {
+        rowsPerPageText: "Filas por página",
+        rangeSeparatorText: "de",
+        selectAllRowsItem: true,
+        selectAllRowsItemText: "Todos",
+    };
+    const loadSubHeader = !!(search || offlineSearch.length > 0);
+    const subHeaderComponent = loadSubHeader ? subHeaderComponentMemo : undefined;
+    return (_jsx(DataTable, { className: className, subHeaderWrap: true, theme: theme ?? "solarized", columns: columns, conditionalRowStyles: conditionalRowStyles, data: filteredData, customStyles: customStyles, progressPending: loading, highlightOnHover: true, pointerOnHover: true, dense: true, striped: true, pagination: !whitOutPagination, persistTableHead: true, responsive: true, noHeader: true, expandableRows: !!expandable, expandableRowExpanded: expandable ? expandable.expandableRowExpanded : undefined, expandableRowsComponent: expandable ? expandable.expandableRowsComponent : undefined, subHeader: loadSubHeader, subHeaderComponent: subHeaderComponent, paginationServer: !!pagination, paginationTotalRows: pagination ? pagination.totalRows : undefined, onChangeRowsPerPage: pagination ? handlePerRowsChange : undefined, onChangePage: pagination ? handlePageChange : undefined, paginationComponentOptions: paginationComponentOptions, paginationRowsPerPageOptions: pagination?.rowsPerPageOptions ? pagination.rowsPerPageOptions : [10], ...others }));
+};

package/dist/esm/Table/index.js

@@ -0,0 +1 @@
+export * from "./ZauruTable.js";

package/dist/esm/TaskList/TaskList.js

@@ -0,0 +1,35 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+export const Task = ({ task }) => {
+    const [isDescriptionOpen, setIsDescriptionOpen] = useState(false);
+    let statusIcon;
+    let taskStyle = {};
+    let bgColor;
+    switch (task.status) {
+        case "waiting":
+            statusIcon = "🕗"; // Icono de reloj (como un ejemplo, puedes reemplazarlo con un ícono o SVG real)
+            taskStyle = { opacity: 0.5 }; // estilo disabled
+            bgColor = "bg-gray-200"; // Color de fondo gris
+            break;
+        case "processing":
+            statusIcon = "⏳"; // Icono de reloj de arena
+            taskStyle = { fontWeight: "bold" }; // estilo negrita
+            bgColor = "bg-blue-200"; // Color de fondo azul
+            break;
+        case "done":
+            statusIcon = "✅"; // Icono de check
+            bgColor = "bg-green-200"; // Color de fondo verde
+            break;
+        case "error":
+            statusIcon = "❌"; // Icono de cruz
+            taskStyle = { color: "red" }; // estilo color rojo
+            bgColor = "bg-red-200"; // Color de fondo rojo
+            break;
+    }
+    return (_jsxs("div", { style: taskStyle, className: `${bgColor} rounded-lg p-3 mb-3 ${task.description ? "cursor-pointer" : ""}`, onClick: () => task.description && setIsDescriptionOpen(!isDescriptionOpen), children: [_jsxs("div", { className: "flex justify-between", children: [_jsxs("div", { children: [statusIcon, " ", task.title, " ", `${task.status === "processing" ? "..." : ""}`] }), task.description && _jsx("div", { children: "\u25BC" })] }), task.description && isDescriptionOpen && (_jsx("div", { className: "mt-2", children: task.description }))] }));
+};
+export const TaskList = ({ tasks }) => {
+    const completedTasks = tasks.filter((task) => task.status === "done" || task.status === "error").length;
+    const progressPercentage = (completedTasks / tasks.length) * 100;
+    return (_jsxs("div", { children: [tasks.map((task, index) => (_jsx(Task, { task: task }, index))), _jsx("div", { className: "h-2 bg-gray-200 rounded-lg mt-3", children: _jsx("div", { className: "bg-green-500 h-full rounded-lg", style: { width: `${progressPercentage}%`, transition: "width 0.5s" } }) })] }));
+};

package/dist/esm/TaskList/index.js

@@ -0,0 +1 @@
+export * from "./TaskList.js";

package/dist/esm/Titles/LabelArray.js

@@ -0,0 +1,7 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+//Component to show all information in an array
+export const LabelArray = ({ info }) => {
+    return (_jsx("div", { className: "divide-y divide-gray-100", children: info?.map((x) => {
+            return (_jsxs("div", { className: "my-1 pt-2", children: [_jsxs("p", { className: "inline font-bold text-lg", children: [x?.label, ": "] }), _jsx("p", { className: "inline text-lg", children: x?.value })] }, x?.label));
+        }) }));
+};

package/dist/esm/Titles/TableColumnTitle.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+//column title for datatables
+export const TableColumnTitle = ({ textContent }) => {
+    return (_jsx("p", { className: "font-bold text-sm line-clamp-3 text-center", children: textContent }));
+};

package/dist/esm/Titles/TitleH1.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+//H1 Title Component
+export const TitleH1 = ({ texto }) => {
+    return (_jsx("div", { className: "mb-1", children: _jsx("h1", { className: "text-4xl font-bold leading-normal mt-0 mb-2 text-zinc-800", children: texto }) }));
+};

package/dist/esm/Titles/TitleH2.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+//H2 Title Component
+export const TitleH2 = ({ texto }) => {
+    return (_jsx("div", { className: "py-1 ", children: _jsx("h2", { className: "text-2xl font-bold leading-normal mt-0 mb-2 text-zinc-800", children: texto }) }));
+};

package/dist/esm/Titles/TitleH3.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+//H3 Title Component
+export const TitleH3 = ({ texto }) => {
+    return (_jsx("div", { className: "py-1 ", children: _jsx("h3", { className: "text-xl leading-normal mt-0 mb-2 text-zinc-800", children: texto }) }));
+};

package/dist/esm/Titles/index.js

@@ -0,0 +1,5 @@
+export * from "./LabelArray.js";
+export * from "./TableColumnTitle.js";
+export * from "./TitleH1.js";
+export * from "./TitleH2.js";
+export * from "./TitleH3.js";

package/dist/esm/Tooltip/Tooltip.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+export const Tooltip = ({ children, text }) => {
+    const [show, setShow] = useState(false);
+    return (_jsxs("div", { className: "relative inline-block", children: [_jsx("div", { onMouseEnter: () => setShow(true), onMouseLeave: () => setShow(false), children: children }), show && (_jsxs("div", { className: "absolute z-10 bg-gray-700 text-white px-2 py-1 rounded-md bottom-full left-1/2 transform -translate-x-1/2", style: { whiteSpace: "nowrap", height: "2rem" }, children: [text, _jsx("div", { className: "absolute top-full left-1/2 transform -translate-x-1/2", style: {
+                            width: "0",
+                            height: "0",
+                            borderTop: "6px solid transparent",
+                            borderLeft: "6px solid transparent",
+                            borderRight: "6px solid transparent",
+                            borderBottom: "6px solid gray",
+                        } })] }))] }));
+};

package/dist/esm/Tooltip/index.js

@@ -0,0 +1 @@
+export * from "./Tooltip.js";

package/dist/esm/WithTooltip/WithTooltip.js

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

package/dist/esm/WithTooltip/index.js

@@ -0,0 +1 @@
+export * from "./WithTooltip.js";

package/dist/esm/Wizards/StepWizard.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { LoadingInputSkeleton } from "../Skeletons/index.js";
+export const StepWizardComponent = ({ steps, showStepName = false, loading = false, }) => {
+    const [currentStep, setCurrentStep] = useState(0);
+    if (loading) {
+        return (_jsxs("div", { className: "lg:grid lg:grid-cols-10 gap-4", children: [_jsxs("div", { className: "lg:col-span-2", children: [_jsx("select", { className: "lg:hidden mb-5 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md", children: _jsx("option", {}) }), _jsx("div", { className: "hidden lg:block", children: _jsx(LoadingInputSkeleton, {}) })] }), _jsx("div", { className: "lg:col-span-8", children: _jsx(LoadingInputSkeleton, {}) })] }));
+    }
+    return (_jsxs("div", { className: "lg:grid lg:grid-cols-10 gap-4", children: [_jsxs("div", { className: "lg:col-span-2", children: [_jsx("select", { className: "lg:hidden mb-5 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md", onChange: (e) => setCurrentStep(parseInt(e.target.value)), value: currentStep, children: steps.map((step, index) => (_jsx("option", { value: index, children: showStepName ? step.stepName : `Step ${index + 1}` }, index))) }), _jsx("div", { className: "scroll-hidden hidden lg:block", children: steps.map((step, index) => (_jsx("div", { onClick: () => setCurrentStep(index), className: `py-2 px-4 mt-5 cursor-pointer rounded ${currentStep === index
+                                ? "bg-blue-500 text-white"
+                                : "text-blue-500 hover:bg-gray-100 border border-gray-300"} ${showStepName
+                                ? "text-wrap break-words"
+                                : "rounded-full w-8 h-8 flex items-center justify-center"}`, children: showStepName ? step.stepName : index + 1 }, index))) })] }), _jsx("div", { className: "lg:col-span-8", children: steps.map((step, index) => (_jsx("div", { className: currentStep === index ? "block" : "hidden", children: step.component }, index))) })] }));
+};

package/dist/esm/Wizards/index.js

@@ -0,0 +1 @@
+export * from "./StepWizard.js";

package/dist/esm/Zendesk/Chat.js

@@ -0,0 +1,63 @@
+import { useEffect } from "react";
+const canUseDOM = () => {
+    if (typeof window === "undefined" ||
+        !window.document ||
+        !window.document.createElement) {
+        return false;
+    }
+    return true;
+};
+export const logoutFromZendesk = () => {
+    if (canUseDOM() && window.zE) {
+        window.zE("messenger", "logoutUser");
+    }
+    else {
+        console.warn("Zendesk is not initialized yet");
+    }
+};
+export const ZendeskAPI = (...args) => {
+    if (canUseDOM() && window.zE) {
+        window.zE.apply(null, args);
+    }
+    else {
+        console.warn("Zendesk is not initialized yet");
+    }
+};
+export const Zendesk = (props) => {
+    const { defer, configuration, token, ...other } = props;
+    useEffect(() => {
+        const insertScript = () => {
+            const zendeskScript = document.createElement("script");
+            if (defer) {
+                zendeskScript.defer = true;
+            }
+            else {
+                zendeskScript.async = true;
+            }
+            zendeskScript.id = "ze-snippet";
+            zendeskScript.src = `https://static.zdassets.com/ekr/snippet.js?key=${configuration.zendeskChatKey}`;
+            zendeskScript.addEventListener("load", () => {
+                if (props.onLoaded) {
+                    props.onLoaded();
+                }
+                window.zE("messenger", "loginUser", function (callback) {
+                    callback(token);
+                });
+            });
+            document.body.appendChild(zendeskScript);
+            return zendeskScript; // Devolvemos la referencia del script
+        };
+        let script; // Guardamos la referencia del script aquí
+        if (canUseDOM() && !window.zE) {
+            script = insertScript();
+            window.zESettings = other;
+        }
+        return () => {
+            if (script) {
+                // Si el script existe, lo eliminamos del DOM
+                script.remove();
+            }
+        };
+    }, [props, defer, other, configuration, token]);
+    return null;
+};

package/dist/esm/Zendesk/index.js

@@ -0,0 +1,2 @@
+export * from "./Chat.js";
+export * from "./zendesk.config.js";

package/dist/esm/Zendesk/zendesk.config.js

@@ -0,0 +1,24 @@
+import jwt from "jsonwebtoken";
+export function zendeskJwt(current_user, configuration) {
+    // get the INFO
+    const jwtSecret = configuration.zendeskJWTSecret;
+    const jwtKey = configuration.zendeskJWTKey;
+    const expiresIn = Math.floor(Date.now() / 1000) + 60 * 60 * 24; // Expires in 1 day
+    // create the payload
+    const payload = {
+        external_id: "z" +
+            current_user.selected_entity_id.toString() +
+            "-" +
+            current_user.id.toString(),
+        email: current_user.email,
+        name: current_user.name,
+        organization_id: current_user.selected_entity_id.toString(),
+        scope: "user",
+        exp: expiresIn,
+    };
+    const jwtHeader = { kid: jwtKey, typ: "JWT", alg: "HS256" };
+    return jwt.sign(payload, jwtSecret, {
+        algorithm: "HS256",
+        header: jwtHeader,
+    });
+}

package/dist/esm/index.js

@@ -0,0 +1,24 @@
+export * from "./Alerts/index.js";
+export * from "./BlockUI/index.js";
+export * from "./Buttons/index.js";
+export * from "./Card/index.js";
+export * from "./ConnectionState/index.js";
+export * from "./Chat/index.js";
+export * from "./Containers/index.js";
+export * from "./DynamicTable/index.js";
+export * from "./Footer/index.js";
+export * from "./Form/index.js";
+export * from "./Labels/index.js";
+export * from "./Layouts/index.js";
+export * from "./LineSeparator/index.js";
+export * from "./Modal/index.js";
+export * from "./NavBar/index.js";
+export * from "./Skeletons/index.js";
+export * from "./Tab/index.js";
+export * from "./Table/index.js";
+export * from "./TaskList/index.js";
+export * from "./Titles/index.js";
+export * from "./Tooltip/index.js";
+export * from "./WithTooltip/index.js";
+export * from "./Wizards/index.js";
+export * from "./Zendesk/index.js";

package/dist/esm/tailwind.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+    content: ["./app/**/*.{ts,tsx,jsx,js}"],
+    theme: {
+        extend: {},
+    },
+    plugins: [require("@tailwindcss/forms")],
+};
+export {};

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+export * from "./Alerts/index.js";
+export * from "./BlockUI/index.js";
+export * from "./Buttons/index.js";
+export * from "./Card/index.js";
+export * from "./ConnectionState/index.js";
+export * from "./Chat/index.js";
+export * from "./Containers/index.js";
+export * from "./DynamicTable/index.js";
+export * from "./Footer/index.js";
+export * from "./Form/index.js";
+export * from "./Labels/index.js";
+export * from "./Layouts/index.js";
+export * from "./LineSeparator/index.js";
+export * from "./Modal/index.js";
+export * from "./NavBar/index.js";
+export * from "./Skeletons/index.js";
+export * from "./Tab/index.js";
+export * from "./Table/index.js";
+export * from "./TaskList/index.js";
+export * from "./Titles/index.js";
+export * from "./Tooltip/index.js";
+export * from "./WithTooltip/index.js";
+export * from "./Wizards/index.js";
+export * from "./Zendesk/index.js";

package/dist/tailwind.config.d.ts

@@ -0,0 +1 @@
+export {};