@zauru-sdk/components 1.0.11 → 1.0.12

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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,3 @@
+export * from "./ErrorBoundaryAlert/ErrorBoundaryAlert";
+export * from "./Alert";
+export * from "./StaticAlert";

package/dist/Alerts/index.js

@@ -0,0 +1,3 @@
+export * from "./ErrorBoundaryAlert/ErrorBoundaryAlert";
+export * from "./Alert";
+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/Chat/ChatLayout.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { FormDocumentType } from "@zauru-sdk/types";
+interface ChatLayoutProps {
+    children?: React.ReactNode;
+    sendingMessage?: boolean;
+    formConfig?: {
+        document_type: FormDocumentType;
+        form_id: number;
+        document_id: number;
+        id_number?: string;
+        reference?: string;
+        attachmentFieldId: number;
+        messageFieldId: number;
+    };
+}
+export declare const ChatLayout: React.FC<ChatLayoutProps>;
+export {};

package/dist/Chat/ChatLayout.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { AttachmentIconSVG, SendMessageIcon, SpinnerSvg } from "../Icons/Icons";
+import LoadingInputSkeleton from "../Skeletons/LoadingInputSkeleton";
+import { TextField } from "../Form";
+import { Form } from "@remix-run/react";
+export const ChatLayout = ({ children, sendingMessage = false, formConfig = undefined, }) => {
+    const refAttachment = useRef(null);
+    const [formValues, setFormValues] = useState({ image: null });
+    const handleAttachmentClick = () => {
+        if (refAttachment.current) {
+            refAttachment.current.click();
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col h-full", children: [_jsx("div", { className: "flex flex-col-reverse overflow-y-auto p-4 bg-gray-100 border border-gray-200 rounded-lg grow max-h-[65vh]", children: children }), _jsxs(Form, { id: "formRef", encType: "multipart/form-data", method: "post", children: [formConfig ? (_jsxs(_Fragment, { children: [_jsx(TextField, { hidden: true, name: "reference", defaultValue: formConfig.reference ?? "" }), _jsx(TextField, { hidden: true, name: "form_id", defaultValue: formConfig.form_id }), _jsx(TextField, { hidden: true, name: "document_id", defaultValue: formConfig.document_id }), _jsx(TextField, { hidden: true, name: "document_type", defaultValue: formConfig.document_type }), _jsx(TextField, { hidden: true, name: "id_number", defaultValue: formConfig?.id_number ?? "" })] })) : (_jsx(_Fragment, {})), _jsxs("div", { className: "mt-4 flex", children: [sendingMessage ? (_jsx(LoadingInputSkeleton, {})) : (_jsx("input", { name: `message${formConfig?.messageFieldId
+                                    ? `_${formConfig?.messageFieldId}`
+                                    : ""}`, type: "text", placeholder: "Escribe un mensaje...", className: "form-input px-4 py-2 border border-gray-300 rounded-l-lg grow" })), _jsx("button", { onClick: handleAttachmentClick, className: `${formValues?.image ? "bg-blue-500" : ""} hover:bg-blue-700 text-white font-bold py-2 px-4`, type: "button", children: _jsx(AttachmentIconSVG, {}) }), _jsx("button", { className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-r-lg", type: "submit", name: "action", value: "sendMessage", children: sendingMessage ? _jsx(SpinnerSvg, {}) : _jsx(SendMessageIcon, {}) })] }), _jsx("input", { ref: refAttachment, hidden: true, name: `attachment${formConfig?.attachmentFieldId
+                            ? `_${formConfig?.attachmentFieldId}`
+                            : ""}`, type: "file", accept: ".jpg, .png, .jpeg, .png", onChange: (e) => {
+                            if (e.target.value && e.target.value !== "") {
+                                setFormValues({ ...formValues, image: e.target.value });
+                            }
+                            else {
+                                setFormValues({ ...formValues, image: null });
+                            }
+                        } })] })] }));
+};

package/dist/Chat/ChatMessageHistory.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    author: string;
+    content: string;
+    date?: string;
+    onLike?: (like: boolean) => void;
+    onUpdateComment?: (text: string, itsNew?: boolean) => void;
+    id: string;
+    commentOwner?: boolean;
+    imageLink?: string;
+};
+export declare const ChatMessageHistory: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Chat/ChatMessageHistory.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { CheckIconSVG, PencilSvg } from "../Icons/Icons";
+export const ChatMessageHistory = (props) => {
+    const { author, content, onLike, onUpdateComment, id, commentOwner = false, date, imageLink, } = props;
+    const initials = author ? author[0].toUpperCase() : "A";
+    const [isUpdating, setIsUpdating] = useState(false);
+    const [updatedContent, setUpdatedContent] = useState(content);
+    const textAreaRef = useRef(null);
+    const [shouldPulse, setShouldPulse] = useState(false);
+    useEffect(() => {
+        if (isUpdating && textAreaRef.current) {
+            textAreaRef.current.style.height = "auto";
+            textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
+            textAreaRef.current.focus();
+        }
+    }, [isUpdating]);
+    // Efecto secundario que se ejecuta cada vez que 'isUpdating' cambia
+    useEffect(() => {
+        // Activar la animación
+        setShouldPulse(true);
+        // Establecer un temporizador para eliminar la clase después de que la animación se haya completado
+        const timer = setTimeout(() => {
+            setShouldPulse(false);
+        }, 15000); // Tiempo total de la animación
+        // Limpiar el temporizador si el componente se desmonta o si 'isUpdating' cambia de nuevo antes de que la animación se complete
+        return () => clearTimeout(timer);
+    }, [isUpdating]);
+    const handleUpdate = (e) => {
+        if (e.target.value.length <= 254) {
+            setUpdatedContent(e.target.value);
+        }
+    };
+    const handleUpdateClick = () => {
+        if (isUpdating) {
+            if (textAreaRef.current) {
+                textAreaRef.current.blur();
+            }
+            //onUpdateComment && onUpdateComment(updatedContent, itsNew);
+        }
+        setIsUpdating(!isUpdating);
+    };
+    return (_jsxs("div", { className: "p-1 rounded-xl flex items-center space-x-4 relative", children: [commentOwner && (_jsx("div", { className: "absolute top-2 right-2", children: _jsx("button", { onClick: handleUpdateClick, className: `${shouldPulse ? "animate-custom-pulse" : ""}`, children: isUpdating ? _jsx(CheckIconSVG, {}) : _jsx(PencilSvg, {}) }) })), _jsx("div", { className: `w-[0%] lg:w-[8%] h-16 bg-purple-300 rounded-full flex items-center justify-center overflow-hidden text-white text-xl font-bold`, children: initials }), _jsxs("div", { className: "flex flex-col justify-between h-full w-[92%]", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex flex-row space-x-2", children: [_jsx("div", { className: "text-xl font-medium text-black", children: author }), _jsx("div", { className: "text-xl font-medium text-gray-500", children: date && _jsxs(_Fragment, { children: [" - ", date] }) })] }), isUpdating ? (_jsx("textarea", { ref: textAreaRef, className: "bg-gray-100 rounded p-2 w-full resize-none", value: updatedContent, onChange: handleUpdate, maxLength: 254, placeholder: "Deja tus buenos deseos..." })) : (_jsx("p", { className: "text-gray-500", children: updatedContent }))] }), _jsx("div", { className: "flex justify-end items-center", children: _jsx("button", { onClick: () => { }, children: _jsx(_Fragment, {}) }) })] }), imageLink && (_jsx("div", { className: `w-[25%] flex items-center justify-center overflow-hidden text-white text-xl font-bold`, children: _jsx("div", { onClick: () => {
+                        return window.open(imageLink, "_blank");
+                    }, children: _jsx("img", { src: imageLink, alt: "IMG_CHAT", className: `h-48 w-48 inline mr-1 pb-1`, style: {
+                            stroke: "currentColor",
+                            strokeWidth: 2,
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            fill: "none",
+                            backgroundColor: "transparent",
+                        } }) }) }))] }));
+};

package/dist/Chat/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ChatLayout";
+export * from "./ChatMessageHistory";

package/dist/Chat/index.js

@@ -0,0 +1,2 @@
+export * from "./ChatLayout";
+export * from "./ChatMessageHistory";

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/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;