@zauru-sdk/components 1.0.11 → 1.0.13

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.13](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.12...v1.0.13) (2024-03-21)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
+## [1.0.12](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.11...v1.0.12) (2024-03-21)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
 ## [1.0.11](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.10...v1.0.11) (2024-03-18)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/Alerts/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ErrorBoundaryAlert/ErrorBoundaryAlert";
+export * from "./StaticAlert";

package/dist/Alerts/index.js

@@ -0,0 +1,2 @@
+export * from "./ErrorBoundaryAlert/ErrorBoundaryAlert";
+export * from "./StaticAlert";

package/dist/BlockUI/BlockUI.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+type Props = {
+    children: React.ReactNode;
+    active: boolean;
+    loadingText?: string;
+};
+export declare const BlockUI: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/BlockUI/BlockUI.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const BlockUI = (props) => {
+    const { children, active, loadingText } = props;
+    if (!active) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return (_jsx("div", { children: _jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute bg-gray-100 bg-opacity-20 z-10 h-full w-full flex items-center justify-center", children: _jsxs("div", { className: "flex items-center", children: [_jsx("span", { className: "text-3xl mr-4", children: loadingText }), _jsxs("svg", { className: "animate-spin h-5 w-5 text-gray-600", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })] }) }), children] }) }));
+};

package/dist/BlockUI/index.d.ts

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

package/dist/BlockUI/index.js

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

package/dist/Buttons/Button.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+type Props = {
+    type?: "reset" | "button" | "submit" | undefined;
+    title?: string;
+    name?: string;
+    onClickSave?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    loading?: boolean;
+    loadingText?: string;
+    selectedColor?: "indigo" | "green" | "red" | "yellow";
+    children?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+};
+export declare const Button: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Buttons/Button.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Button = (props) => {
+    const { type = "submit", loading = false, loadingText = "Guardando...", title = "Guardar", name = "save", onClickSave, selectedColor = "indigo", children, className = "", disabled = false, } = props;
+    const COLORS = {
+        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",
+        },
+        indigo: {
+            bg900: "bg-indigo-900",
+            bg700: "bg-indigo-700",
+            bg600: "bg-indigo-600",
+            bg500: "bg-indigo-500",
+            ring600: "ring-indigo-600",
+            ring500: "ring-indigo-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",
+        },
+        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",
+        },
+    };
+    const color = COLORS[selectedColor];
+    const inside = children ?? title;
+    return (_jsx("button", { type: type, name: "action", disabled: loading || disabled, value: name, onClick: onClickSave, className: `ml-2 ${loading || disabled ? " bg-opacity-25 " : ""} ${loading
+            ? " cursor-progress"
+            : `${disabled ? "" : `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 }));
+};

package/dist/Buttons/index.d.ts

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

package/dist/Buttons/index.js

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

package/dist/Card/Card.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+type Props = {
+    children: React.ReactNode;
+    title?: string;
+    className?: string;
+};
+export declare const Card: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Card/Card.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Card = (props) => {
+    const { children, title, className } = props;
+    return (_jsxs("div", { className: `p-4 space-y-3 shadow sm:overflow-hidden sm:rounded-md ${className}`, children: [title && (_jsx("label", { className: "inline text-lg font-medium text-gray-700", children: `${title.toUpperCase()}` })), children] }));
+};

package/dist/Card/index.d.ts

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

package/dist/Card/index.js

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

package/dist/Containers/BodyContainer.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type Props = {
+    children: React.ReactNode;
+};
+export declare const BodyContainer: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Containers/BodyContainer.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export const BodyContainer = (props) => {
+    const { children } = props;
+    return (_jsx(_Fragment, { children: _jsx("body", { className: "flex flex-col min-h-screen m-0", children: children }) }));
+};

package/dist/Containers/ButtonSectionContainer.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+type Props = {
+    children: React.ReactNode;
+    className?: string;
+    whitBg?: boolean;
+};
+export declare const ButtonSectionContainer: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Containers/ButtonSectionContainer.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ButtonSectionContainer = (props) => {
+    const { children, className, whitBg = true } = props;
+    return (_jsx("div", { className: `${whitBg ? "bg-gray-50" : ""} px-4 py-3 text-right sm:px-6 ${className}`, children: children }));
+};

package/dist/Containers/Container.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+type Props = {
+    title?: string;
+    description?: string;
+    children: React.ReactNode;
+    className?: string;
+    rightContent?: React.ReactNode;
+};
+export declare const Container: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Containers/Container.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const Container = (props) => {
+    const { title, description, children, className = "", rightContent } = props;
+    const titleInfo = (_jsxs(_Fragment, { children: [title && (_jsx("h3", { className: "text-3xl font-bold leading-8 text-gray-900", children: title })), description && (_jsx("p", { className: "mt-1 text-md text-gray-600", children: description }))] }));
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: `mx-2 ${className}`, children: [rightContent && (_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("div", { children: titleInfo }), _jsx("div", { children: rightContent })] })), !rightContent && titleInfo, _jsx("div", { className: "mt-5 space-y-5", children: children })] }) }));
+};

package/dist/Containers/DoubleContainer.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+type Props = {
+    title?: string;
+    description?: string;
+    className?: string;
+    children: React.ReactNode;
+};
+export declare const DoubleContainer: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Containers/DoubleContainer.js

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DoubleContainer = (props) => {
+    const { title, description, className = "", children } = props;
+    const getChildren = (index) => {
+        if (children && Array.isArray(children) && children[index]) {
+            return children[index];
+        }
+        if (children && index === 0) {
+            return children;
+        }
+        return _jsx(_Fragment, {});
+    };
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: `mx-2 ${className}`, children: [title && (_jsx("h3", { className: "text-3xl font-bold leading-8 text-gray-900", children: title })), description && (_jsx("p", { className: "mt-1 text-md text-gray-600", children: description })), _jsxs("div", { className: "grid xl:grid-cols-3 md:grid-cols-1 gap-4", children: [_jsx("div", { className: "xl:col-span-2 md:col-span-1 mt-5", children: getChildren(0) }), _jsx("div", { className: "xl:col-span-1 md:col-span-1 mt-5", children: getChildren(1) })] })] }) }));
+};

package/dist/Containers/MainContainer.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type Props = {
+    children: React.ReactNode;
+};
+export declare const MainContainer: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Containers/MainContainer.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export const MainContainer = (props) => {
+    const { children } = props;
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "md:p-10 p-0 mt-10 ml-2 mr-2 mb-10 md:mt-0 md:ml-0 md:mr-0 md:mb-0", children: children }) }));
+};

package/dist/Containers/OutletContainer.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type Props = {
+    children: React.ReactNode;
+};
+export declare const OutletContainer: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Containers/OutletContainer.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export const OutletContainer = (props) => {
+    const { children } = props;
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "flex-1 overflow-x-auto", children: children }) }));
+};

package/dist/Containers/SubContainer.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+type Props = {
+    title?: string;
+    description?: string;
+    children: React.ReactNode;
+    className?: string;
+    rightContent?: React.ReactNode;
+};
+export declare const SubContainer: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Containers/SubContainer.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const SubContainer = (props) => {
+    const { title, description, children, className = "", rightContent } = props;
+    const titleInfo = (_jsxs(_Fragment, { children: [title && (_jsx("h3", { className: "text-xl font-bold leading-8 text-gray-900", children: title })), description && (_jsx("p", { className: "mt-1 text-md text-gray-600", children: description }))] }));
+    return (_jsxs("div", { className: `${className}`, children: [rightContent && (_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("div", { children: titleInfo }), _jsx("div", { children: rightContent })] })), !rightContent && titleInfo, _jsx("div", { className: "mt-5 space-y-3", children: children })] }));
+};

package/dist/Containers/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./BodyContainer";
+export * from "./ButtonSectionContainer";
+export * from "./Container";
+export * from "./DoubleContainer";
+export * from "./MainContainer";
+export * from "./OutletContainer";
+export * from "./SubContainer";

package/dist/Containers/index.js

@@ -0,0 +1,7 @@
+export * from "./BodyContainer";
+export * from "./ButtonSectionContainer";
+export * from "./Container";
+export * from "./DoubleContainer";
+export * from "./MainContainer";
+export * from "./OutletContainer";
+export * from "./SubContainer";

package/dist/Footer/Footer.d.ts

@@ -0,0 +1,7 @@
+type FooterProps = {
+    href: string;
+    showConnection?: boolean;
+    selectedColor: "purple" | "pink" | "indigo" | "cyan" | "slate" | "green" | "red" | "sky";
+};
+export declare const Footer: ({ href, selectedColor, showConnection, }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Footer/Footer.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+//import ConnectionState from "../ConnectionState";
+import { LoadingInputSkeleton } from "src";
+const COLORS = {
+    purple: "bg-purple-500",
+    pink: "bg-pink-500",
+    indigo: "bg-indigo-500",
+    cyan: "bg-cyan-500",
+    slate: "bg-slate-500",
+    green: "bg-green-500",
+    red: "bg-red-500",
+    sky: "bg-sky-500",
+};
+export const Footer = ({ href, selectedColor, showConnection = false, }) => {
+    const [client, setIsClient] = useState(false);
+    const color = COLORS[selectedColor];
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+    if (!client) {
+        return _jsx(LoadingInputSkeleton, {});
+    }
+    return (_jsx("footer", { className: `inset-x-0 bottom-0 px-2 py-[20px] ${color}`, children: _jsx("div", { className: "px-4 mx-auto flex flex-wrap items-center justify-center", children: _jsxs("p", { className: "text-white text-[1.2rem]", children: [`Creado en `, " ", _jsx("a", { href: href, children: "Zauru" }), " ", `con ❤️ ${new Date().getFullYear()} v.3.2`] }) }) }));
+};

package/dist/Footer/index.d.ts

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

package/dist/Footer/index.js

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

package/dist/Labels/InfoLabel/index.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    description: string;
+    title: string;
+    className?: string;
+};
+export declare const InfoLabel: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Labels/InfoLabel/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const InfoLabel = (props) => {
+    const { description, title, className } = props;
+    return (_jsxs("div", { className: `block ${className}`, children: [_jsx("label", { className: "inline text-sm font-medium text-gray-700", children: `${title.toUpperCase()} ` }), _jsx("label", { className: "inline text-sm font-medium text-gray-500", children: description })] }));
+};

package/dist/Labels/index.d.ts

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

package/dist/Labels/index.js

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

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

@@ -0,0 +1,6 @@
+type Props = {
+    title?: string;
+    description?: string;
+};
+export declare const HomeLayout: ({ title, description }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Layouts/homeLayout/index.js

@@ -0,0 +1,10 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const HomeLayout = ({ title, description }) => {
+    return (_jsx("div", { className: "bg-cover bg-center h-screen", style: { backgroundImage: 'url("/wallpaper.webp")' }, children: _jsxs("div", { className: "flex flex-col h-screen justify-center items-center", children: [_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 ?? _jsx(_Fragment, { children: "Bienvenido, inicie sesi\u00F3n para continuar." }) }), _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 ?? _jsx(_Fragment, { children: "Web app, realizada en Zauru." }) })] }) }));
+};

package/dist/Layouts/index.d.ts

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

package/dist/Layouts/index.js

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

package/dist/LineSeparator/LineSeparator.d.ts

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

package/dist/LineSeparator/LineSeparator.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const LineSeparator = () => {
+    return _jsx("hr", { className: "h-px my-8 bg-gray-200 border-0 dark:bg-gray-400" });
+};

package/dist/LineSeparator/index.d.ts

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

package/dist/LineSeparator/index.js

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

package/dist/Modal/Modal.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export type ModalOption = "OK" | "CANCEL" | null;
+type ModalParams = {
+    title: string;
+    description: React.ReactNode;
+    okButtonText?: string;
+    showOptions?: boolean;
+};
+export declare const createModal: ({ title, description, okButtonText, showOptions, }: ModalParams) => Promise<ModalOption>;
+export {};

package/dist/Modal/Modal.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createRoot } from "react-dom/client";
+export 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 = () => (_jsx("div", { className: "relative w-auto my-6 mx-auto max-w-3xl", children: _jsxs("div", { className: "border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none", children: [_jsxs("div", { className: "flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t", children: [_jsx("h3", { className: "text-3xl font-semibold", children: title }), _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: _jsx("span", { className: "close-button", onClick: handleClose, children: "\u00D7" }) })] }), _jsx("div", { className: "relative p-6 flex-auto", children: description }), showOptions && (_jsxs("div", { className: "flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b", children: [_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" }), _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 = createRoot(modalWrapper);
+        root.render(_jsx(ModalContent, {}));
+    });
+};

package/dist/Modal/index.d.ts

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

package/dist/Modal/index.js

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

package/dist/NavBar/NavBar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from "react";
-import { DropDownArrowSvgIcon, LogoutDropDownSvgIcon, MenuAlt4Svg, OpcionButtonSvgIcon, } from "../Icons/Icons";
+import { DropDownArrowSvgIcon, LogoutDropDownSvgIcon, MenuAlt4Svg, OpcionButtonSvgIcon, } from "@zauru-sdk/icons";
 import { COLORS } from "./NavBar.utils";
 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 })] }) }));
@@ -28,5 +28,5 @@ export const NavBar = ({ title, loggedIn, items, selectedColor, }) => {
                     .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, { NavBarOpen: NavBarOpen, setNavBarOpen: undefined }) })] }), _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 })] }) }));
+    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/NavBar/index.d.ts

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

package/dist/NavBar/index.js

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

package/dist/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    title?: string;
+    percent?: string;
+};
+export declare const ProgressBar: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/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/ProgressBar/ProgressCircle.d.ts

@@ -0,0 +1,6 @@
+export declare const ProgressCircle: ({ total, completed, description, title, }: {
+    total: number;
+    completed: number;
+    description: string;
+    title?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/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/ProgressBar/index.d.ts

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

package/dist/ProgressBar/index.js

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

package/dist/Skeletons/LoadingInputSkeleton.d.ts

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

package/dist/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/Skeletons/index.d.ts

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

package/dist/Skeletons/index.js

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

package/dist/Tab/Tab.d.ts

@@ -0,0 +1,9 @@
+export type TabItem = {
+    title: string;
+    link: string;
+};
+type Props = {
+    items: Array<TabItem>;
+};
+export declare const Tabs: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/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/Tab/index.d.ts

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

package/dist/Tab/index.js

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