@zauru-sdk/components 1.0.11 → 1.0.13

package/dist/Table/ZauruTable.d.ts

@@ -0,0 +1,25 @@
+import type { TableProps } from "react-data-table-component";
+import { ExpandableRowsComponent } from "react-data-table-component/dist/DataTable/types";
+type Props = TableProps<any> & {
+    columns: any;
+    conditionalRowStyles?: any;
+    data: any[];
+    loading?: boolean;
+    pagination?: {
+        totalRows: number;
+        rowsPerPageOptions: number[];
+    };
+    whitOutPagination?: boolean;
+    offlineSearch?: string[];
+    search?: {
+        placeholderSearch?: string;
+    };
+    expandable?: {
+        expandableRowExpanded?: (row: any) => boolean;
+        expandableRowsComponent?: ExpandableRowsComponent<any>;
+    };
+    theme?: "solarized" | "subTable";
+    className?: string;
+};
+export declare const ZauruTable: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Table/ZauruTable.js

@@ -0,0 +1,148 @@
+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 DataTable, { createTheme } from "react-data-table-component";
+import { SearchSVG } from "@zauru-sdk/icons";
+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/Table/index.d.ts

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

package/dist/Table/index.js

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

package/dist/TaskList/TaskList.d.ts

@@ -0,0 +1,14 @@
+export type TaskType = {
+    title: string;
+    description?: string;
+    status: "waiting" | "processing" | "done" | "error";
+};
+type TaskProps = {
+    task: TaskType;
+};
+export declare const Task: ({ task }: TaskProps) => import("react/jsx-runtime").JSX.Element;
+type TaskModalProps = {
+    tasks: TaskType[];
+};
+export declare const TaskList: ({ tasks }: TaskModalProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

package/dist/TaskList/index.js

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

package/dist/Titles/LabelArray.d.ts

@@ -0,0 +1,4 @@
+import { SelectFieldOption } from "@zauru-sdk/types";
+export declare const LabelArray: ({ info }: {
+    info: SelectFieldOption[];
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/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/Titles/TableColumnTitle.d.ts

@@ -0,0 +1,4 @@
+export type tableColumnTitleProps = {
+    textContent: String;
+};
+export declare const TableColumnTitle: ({ textContent }: tableColumnTitleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/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/Titles/TitleH1.d.ts

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

package/dist/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/Titles/TitleH2.d.ts

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

package/dist/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/Titles/TitleH3.d.ts

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

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

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

package/dist/Titles/index.js

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

package/dist/Tooltip/Tooltip.d.ts

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

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

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

package/dist/Tooltip/index.js

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

package/dist/WithTooltip/WithTooltip.d.ts

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

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

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

package/dist/WithTooltip/index.js

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

package/dist/Wizards/StepWizard.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import React from "react";
+export type StepWizard = {
+    index: number;
+    stepName: string;
+    component: ReactNode;
+};
+interface StepWizardProps {
+    steps: StepWizard[];
+    showStepName?: boolean;
+    loading?: boolean;
+}
+export declare const StepWizardComponent: React.FC<StepWizardProps>;
+export {};

package/dist/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 "src";
+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/Wizards/index.d.ts

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

package/dist/Wizards/index.js

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

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+export * from "./Alerts";
+export * from "./BlockUI";
+export * from "./Buttons";
+export * from "./Card";
+export * from "./Containers";
+export * from "./Footer";
+export * from "./Labels";
+export * from "./Layouts";
+export * from "./LineSeparator";
+export * from "./Modal";
+export * from "./NavBar";
+export * from "./Skeletons";
+export * from "./Tab";
+export * from "./Table";
+export * from "./TaskList";
+export * from "./Titles";
+export * from "./Tooltip";
+export * from "./WithTooltip";
+export * from "./Wizards";

package/dist/index.js

@@ -1 +1,21 @@
-"use strict";
+export * from "./Alerts";
+export * from "./BlockUI";
+export * from "./Buttons";
+export * from "./Card";
+//export * from "./Chat";
+export * from "./Containers";
+export * from "./Footer";
+export * from "./Labels";
+export * from "./Layouts";
+export * from "./LineSeparator";
+export * from "./Modal";
+export * from "./NavBar";
+export * from "./Skeletons";
+export * from "./Tab";
+export * from "./Table";
+export * from "./TaskList";
+export * from "./Titles";
+export * from "./Tooltip";
+export * from "./WithTooltip";
+export * from "./Wizards";
+//export * from "./Zendesk";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -31,11 +31,14 @@
   "dependencies": {
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/react": "^2.8.1",
+    "@zauru-sdk/common": "^1.0.13",
     "@zauru-sdk/graphql": "^1.0.9",
-    "@zauru-sdk/services": "^1.0.10",
-    "@zauru-sdk/types": "^1.0.10",
-    "@zauru-sdk/utils": "^1.0.10",
+    "@zauru-sdk/icons": "^1.0.13",
+    "@zauru-sdk/services": "^1.0.13",
+    "@zauru-sdk/types": "^1.0.13",
+    "@zauru-sdk/utils": "^1.0.13",
     "framer-motion": "^11.0.8",
+    "jsonwebtoken": "9.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
@@ -45,5 +48,5 @@
   "engines": {
     "node": ">=18.0.0"
   },
-  "gitHead": "d296471a4450a74c505269079769dabfab983749"
+  "gitHead": "9bca61fddd7c538e7f95a489d59436b5557c61cc"
 }

package/src/Alerts/index.ts

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

package/src/BlockUI/BlockUI.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  active: boolean;
+  loadingText?: string;
+};
+
+export const BlockUI = (props: Props) => {
+  const { children, active, loadingText } = props;
+
+  if (!active) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div>
+      <div className="relative">
+        <div className="absolute bg-gray-100 bg-opacity-20 z-10 h-full w-full flex items-center justify-center">
+          <div className="flex items-center">
+            <span className="text-3xl mr-4">{loadingText}</span>
+            {/* <!-- loading icon --> */}
+            <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"
+            >
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+              ></circle>
+              <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"
+              ></path>
+            </svg>
+            {/* <!-- end loading icon --> */}
+          </div>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/BlockUI/index.tsx

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

package/src/Buttons/Button.tsx

@@ -0,0 +1,90 @@
+import type { ColorInterface } from "../NavBar/NavBar.types";
+
+type Props = {
+  type?: "reset" | "button" | "submit" | undefined;
+  title?: string;
+  name?: string;
+  onClickSave?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  //Cargando...
+  loading?: boolean;
+  loadingText?: string;
+  selectedColor?: "indigo" | "green" | "red" | "yellow";
+  children?: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+};
+
+export const Button = (props: 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: ColorInterface = COLORS[selectedColor];
+
+  const inside = children ?? title;
+
+  return (
+    <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}`}
+    >
+      {loading ? loadingText : inside}
+    </button>
+  );
+};

package/src/Buttons/index.ts

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