npm - @zauru-sdk/components - Versions diffs - 1.0.11 → 1.0.13 - Mend

@zauru-sdk/components 1.0.11 → 1.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (163) hide show

package/CHANGELOG.md +16 -0
package/dist/Alerts/index.d.ts +2 -0
package/dist/Alerts/index.js +2 -0
package/dist/BlockUI/BlockUI.d.ts +8 -0
package/dist/BlockUI/BlockUI.js +8 -0
package/dist/BlockUI/index.d.ts +1 -0
package/dist/BlockUI/index.js +1 -0
package/dist/Buttons/Button.d.ts +15 -0
package/dist/Buttons/Button.js +43 -0
package/dist/Buttons/index.d.ts +1 -0
package/dist/Buttons/index.js +1 -0
package/dist/Card/Card.d.ts +8 -0
package/dist/Card/Card.js +5 -0
package/dist/Card/index.d.ts +1 -0
package/dist/Card/index.js +1 -0
package/dist/Containers/BodyContainer.d.ts +6 -0
package/dist/Containers/BodyContainer.js +5 -0
package/dist/Containers/ButtonSectionContainer.d.ts +8 -0
package/dist/Containers/ButtonSectionContainer.js +5 -0
package/dist/Containers/Container.d.ts +10 -0
package/dist/Containers/Container.js +6 -0
package/dist/Containers/DoubleContainer.d.ts +9 -0
package/dist/Containers/DoubleContainer.js +14 -0
package/dist/Containers/MainContainer.d.ts +6 -0
package/dist/Containers/MainContainer.js +5 -0
package/dist/Containers/OutletContainer.d.ts +6 -0
package/dist/Containers/OutletContainer.js +5 -0
package/dist/Containers/SubContainer.d.ts +10 -0
package/dist/Containers/SubContainer.js +6 -0
package/dist/Containers/index.d.ts +7 -0
package/dist/Containers/index.js +7 -0
package/dist/Footer/Footer.d.ts +7 -0
package/dist/Footer/Footer.js +25 -0
package/dist/Footer/index.d.ts +1 -0
package/dist/Footer/index.js +1 -0
package/dist/Labels/InfoLabel/index.d.ts +7 -0
package/dist/Labels/InfoLabel/index.js +5 -0
package/dist/Labels/index.d.ts +1 -0
package/dist/Labels/index.js +1 -0
package/dist/Layouts/homeLayout/index.d.ts +6 -0
package/dist/Layouts/homeLayout/index.js +10 -0
package/dist/Layouts/index.d.ts +1 -0
package/dist/Layouts/index.js +1 -0
package/dist/LineSeparator/LineSeparator.d.ts +1 -0
package/dist/LineSeparator/LineSeparator.js +4 -0
package/dist/LineSeparator/index.d.ts +1 -0
package/dist/LineSeparator/index.js +1 -0
package/dist/Modal/Modal.d.ts +10 -0
package/dist/Modal/Modal.js +32 -0
package/dist/Modal/index.d.ts +1 -0
package/dist/Modal/index.js +1 -0
package/dist/NavBar/NavBar.js +2 -2
package/dist/NavBar/index.d.ts +3 -0
package/dist/NavBar/index.js +3 -0
package/dist/ProgressBar/ProgressBar.d.ts +6 -0
package/dist/ProgressBar/ProgressBar.js +5 -0
package/dist/ProgressBar/ProgressCircle.d.ts +6 -0
package/dist/ProgressBar/ProgressCircle.js +22 -0
package/dist/ProgressBar/index.d.ts +2 -0
package/dist/ProgressBar/index.js +2 -0
package/dist/Skeletons/LoadingInputSkeleton.d.ts +1 -0
package/dist/Skeletons/LoadingInputSkeleton.js +8 -0
package/dist/Skeletons/index.d.ts +1 -0
package/dist/Skeletons/index.js +1 -0
package/dist/Tab/Tab.d.ts +9 -0
package/dist/Tab/Tab.js +19 -0
package/dist/Tab/index.d.ts +1 -0
package/dist/Tab/index.js +1 -0
package/dist/Table/ZauruTable.d.ts +25 -0
package/dist/Table/ZauruTable.js +148 -0
package/dist/Table/index.d.ts +1 -0
package/dist/Table/index.js +1 -0
package/dist/TaskList/TaskList.d.ts +14 -0
package/dist/TaskList/TaskList.js +35 -0
package/dist/TaskList/index.d.ts +1 -0
package/dist/TaskList/index.js +1 -0
package/dist/Titles/LabelArray.d.ts +4 -0
package/dist/Titles/LabelArray.js +7 -0
package/dist/Titles/TableColumnTitle.d.ts +4 -0
package/dist/Titles/TableColumnTitle.js +5 -0
package/dist/Titles/TitleH1.d.ts +1 -0
package/dist/Titles/TitleH1.js +5 -0
package/dist/Titles/TitleH2.d.ts +1 -0
package/dist/Titles/TitleH2.js +5 -0
package/dist/Titles/TitleH3.d.ts +1 -0
package/dist/Titles/TitleH3.js +5 -0
package/dist/Titles/index.d.ts +5 -0
package/dist/Titles/index.js +5 -0
package/dist/Tooltip/Tooltip.d.ts +7 -0
package/dist/Tooltip/Tooltip.js +14 -0
package/dist/Tooltip/index.d.ts +1 -0
package/dist/Tooltip/index.js +1 -0
package/dist/WithTooltip/WithTooltip.d.ts +7 -0
package/dist/WithTooltip/WithTooltip.js +5 -0
package/dist/WithTooltip/index.d.ts +1 -0
package/dist/WithTooltip/index.js +1 -0
package/dist/Wizards/StepWizard.d.ts +14 -0
package/dist/Wizards/StepWizard.js +14 -0
package/dist/Wizards/index.d.ts +1 -0
package/dist/Wizards/index.js +1 -0
package/dist/index.d.ts +19 -0
package/dist/index.js +21 -1
package/package.json +8 -5
package/src/Alerts/index.ts +2 -0
package/src/BlockUI/BlockUI.tsx +50 -0
package/src/BlockUI/index.tsx +1 -0
package/src/Buttons/Button.tsx +90 -0
package/src/Buttons/index.ts +1 -0
package/src/Card/Card.tsx +24 -0
package/src/Card/index.ts +1 -0
package/src/Containers/BodyContainer.tsx +14 -0
package/src/Containers/ButtonSectionContainer.tsx +21 -0
package/src/Containers/Container.tsx +39 -0
package/src/Containers/DoubleContainer.tsx +48 -0
package/src/Containers/MainContainer.tsx +17 -0
package/src/Containers/OutletContainer.tsx +14 -0
package/src/Containers/SubContainer.tsx +37 -0
package/src/Containers/index.ts +7 -0
package/src/Footer/Footer.tsx +61 -0
package/src/Footer/index.tsx +1 -0
package/src/Labels/InfoLabel/index.tsx +21 -0
package/src/Labels/index.tsx +1 -0
package/src/Layouts/homeLayout/index.tsx +34 -0
package/src/Layouts/index.ts +1 -0
package/src/LineSeparator/LineSeparator.tsx +3 -0
package/src/LineSeparator/index.tsx +1 -0
package/src/Modal/Modal.tsx +104 -0
package/src/Modal/index.tsx +1 -0
package/src/NavBar/NavBar.tsx +2 -2
package/src/NavBar/index.tsx +5 -0
package/src/ProgressBar/ProgressBar.tsx +25 -0
package/src/ProgressBar/ProgressCircle.tsx +75 -0
package/src/ProgressBar/index.tsx +2 -0
package/src/Skeletons/LoadingInputSkeleton.tsx +12 -0
package/src/Skeletons/index.ts +1 -0
package/src/Tab/Tab.tsx +63 -0
package/src/Tab/index.ts +1 -0
package/src/Table/ZauruTable.tsx +263 -0
package/src/Table/index.tsx +1 -0
package/src/TaskList/TaskList.tsx +88 -0
package/src/TaskList/index.ts +1 -0
package/src/Titles/LabelArray.tsx +17 -0
package/src/Titles/TableColumnTitle.tsx +9 -0
package/src/Titles/TitleH1.tsx +11 -0
package/src/Titles/TitleH2.tsx +10 -0
package/src/Titles/TitleH3.tsx +10 -0
package/src/Titles/index.ts +5 -0
package/src/Tooltip/Tooltip.tsx +42 -0
package/src/Tooltip/index.ts +1 -0
package/src/WithTooltip/WithTooltip.tsx +21 -0
package/src/WithTooltip/index.tsx +1 -0
package/src/Wizards/StepWizard.tsx +88 -0
package/src/Wizards/index.ts +1 -0
package/src/index.ts +21 -0
package/dist/Alerts/Alert.d.ts +0 -9
package/dist/Alerts/Alert.js +0 -97
package/dist/Icons/Icons.d.ts +0 -47
package/dist/Icons/Icons.js +0 -110
package/dist/Icons/StylesConstants.d.ts +0 -26
package/dist/Icons/StylesConstants.js +0 -34
package/src/Alerts/Alert.tsx +0 -149
package/src/Icons/Icons.tsx +0 -782
package/src/Icons/StylesConstants.tsx +0 -66

package/src/Card/Card.tsx ADDED Viewed

@@ -0,0 +1,24 @@
+import React from "react";
+type Props = {
+  children: React.ReactNode;
+  title?: string;
+  className?: string;
+};
+export const Card = (props: Props) => {
+  const { children, title, className } = props;
+  return (
+    <div
+      className={`p-4 space-y-3 shadow sm:overflow-hidden sm:rounded-md ${className}`}
+    >
+      {title && (
+        <label className="inline text-lg font-medium text-gray-700">
+          {`${title.toUpperCase()}`}
+        </label>
+      )}
+      {children}
+    </div>
+  );
+};

package/src/Card/index.ts ADDED Viewed

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

package/src/Containers/BodyContainer.tsx ADDED Viewed

@@ -0,0 +1,14 @@
+import React from "react";
+type Props = {
+  children: React.ReactNode;
+};
+export const BodyContainer = (props: Props) => {
+  const { children } = props;
+  return (
+    <>
+      <body className="flex flex-col min-h-screen m-0">{children}</body>
+    </>
+  );
+};

package/src/Containers/ButtonSectionContainer.tsx ADDED Viewed

@@ -0,0 +1,21 @@
+import React from "react";
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+  whitBg?: boolean;
+};
+export const ButtonSectionContainer = (props: Props) => {
+  const { children, className, whitBg = true } = props;
+  return (
+    <div
+      className={`${
+        whitBg ? "bg-gray-50" : ""
+      } px-4 py-3 text-right sm:px-6 ${className}`}
+    >
+      {children}
+    </div>
+  );
+};

package/src/Containers/Container.tsx ADDED Viewed

@@ -0,0 +1,39 @@
+import React from "react";
+type Props = {
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+  className?: string;
+  rightContent?: React.ReactNode;
+};
+export const Container = (props: Props) => {
+  const { title, description, children, className = "", rightContent } = props;
+  const titleInfo = (
+    <>
+      {title && (
+        <h3 className="text-3xl font-bold leading-8 text-gray-900">{title}</h3>
+      )}
+      {description && (
+        <p className="mt-1 text-md text-gray-600">{description}</p>
+      )}
+    </>
+  );
+  return (
+    <>
+      <div className={`mx-2 ${className}`}>
+        {rightContent && (
+          <div className="flex justify-between items-center">
+            <div>{titleInfo}</div>
+            <div>{rightContent}</div>
+          </div>
+        )}
+        {!rightContent && titleInfo}
+        <div className="mt-5 space-y-5">{children}</div>
+      </div>
+    </>
+  );
+};

package/src/Containers/DoubleContainer.tsx ADDED Viewed

@@ -0,0 +1,48 @@
+import React from "react";
+type Props = {
+  title?: string;
+  description?: string;
+  className?: string;
+  children: React.ReactNode;
+};
+export const DoubleContainer = (props: Props) => {
+  const { title, description, className = "", children } = props;
+  const getChildren = (index: number) => {
+    if (children && Array.isArray(children) && children[index]) {
+      return children[index];
+    }
+    if (children && index === 0) {
+      return children;
+    }
+    return <></>;
+  };
+  return (
+    <>
+      <div className={`mx-2 ${className}`}>
+        {/* Font sizes https://tailwindcss.com/docs/font-size */}
+        {title && (
+          <h3 className="text-3xl font-bold leading-8 text-gray-900">
+            {title}
+          </h3>
+        )}
+        {description && (
+          <p className="mt-1 text-md text-gray-600">{description}</p>
+        )}
+        <div className="grid xl:grid-cols-3 md:grid-cols-1 gap-4">
+          <div className="xl:col-span-2 md:col-span-1 mt-5">
+            {getChildren(0)}
+          </div>
+          <div className="xl:col-span-1 md:col-span-1 mt-5">
+            {getChildren(1)}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

package/src/Containers/MainContainer.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+import React from "react";
+type Props = {
+  children: React.ReactNode;
+};
+export const MainContainer = (props: Props) => {
+  const { children } = props;
+  return (
+    <>
+      <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}
+      </div>
+    </>
+  );
+};

package/src/Containers/OutletContainer.tsx ADDED Viewed

@@ -0,0 +1,14 @@
+import React from "react";
+type Props = {
+  children: React.ReactNode;
+};
+export const OutletContainer = (props: Props) => {
+  const { children } = props;
+  return (
+    <>
+      <div className="flex-1 overflow-x-auto">{children}</div>
+    </>
+  );
+};

package/src/Containers/SubContainer.tsx ADDED Viewed

@@ -0,0 +1,37 @@
+import React from "react";
+type Props = {
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+  className?: string;
+  rightContent?: React.ReactNode;
+};
+export const SubContainer = (props: Props) => {
+  const { title, description, children, className = "", rightContent } = props;
+  const titleInfo = (
+    <>
+      {title && (
+        <h3 className="text-xl font-bold leading-8 text-gray-900">{title}</h3>
+      )}
+      {description && (
+        <p className="mt-1 text-md text-gray-600">{description}</p>
+      )}
+    </>
+  );
+  return (
+    <div className={`${className}`}>
+      {rightContent && (
+        <div className="flex justify-between items-center">
+          <div>{titleInfo}</div>
+          <div>{rightContent}</div>
+        </div>
+      )}
+      {!rightContent && titleInfo}
+      <div className="mt-5 space-y-3">{children}</div>
+    </div>
+  );
+};

package/src/Containers/index.ts ADDED Viewed

@@ -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/src/Footer/Footer.tsx ADDED Viewed

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from "react";
+//import ConnectionState from "../ConnectionState";
+import { LoadingInputSkeleton } from "src";
+type FooterProps = {
+  href: string;
+  showConnection?: boolean;
+  selectedColor:
+    | "purple"
+    | "pink"
+    | "indigo"
+    | "cyan"
+    | "slate"
+    | "green"
+    | "red"
+    | "sky";
+};
+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,
+}: FooterProps) => {
+  const [client, setIsClient] = useState(false);
+  const color = COLORS[selectedColor];
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+  if (!client) {
+    return <LoadingInputSkeleton />;
+  }
+  return (
+    <footer className={`inset-x-0 bottom-0 px-2 py-[20px] ${color}`}>
+      <div className="px-4 mx-auto flex flex-wrap items-center justify-center">
+        <p className="text-white text-[1.2rem]">
+          {`Creado en `} <a href={href}>Zauru</a>{" "}
+          {`con ❤️ ${new Date().getFullYear()} v.3.2`}
+        </p>
+        {/* {showConnection && (
+          <div className="ml-5">
+            <ConnectionState />
+          </div>
+        )} */}
+      </div>
+    </footer>
+  );
+};

package/src/Footer/index.tsx ADDED Viewed

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

package/src/Labels/InfoLabel/index.tsx ADDED Viewed

@@ -0,0 +1,21 @@
+import React from "react";
+type Props = {
+  description: string;
+  title: string;
+  className?: string;
+};
+export const InfoLabel = (props: Props) => {
+  const { description, title, className } = props;
+  return (
+    <div className={`block ${className}`}>
+      <label className="inline text-sm font-medium text-gray-700">
+        {`${title.toUpperCase()} `}
+      </label>
+      <label className="inline text-sm font-medium text-gray-500">
+        {description}
+      </label>
+    </div>
+  );
+};

package/src/Labels/index.tsx ADDED Viewed

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

package/src/Layouts/homeLayout/index.tsx ADDED Viewed

@@ -0,0 +1,34 @@
+type Props = {
+  title?: string;
+  description?: string;
+};
+export const HomeLayout = ({ title, description }: Props) => {
+  return (
+    <div
+      className="bg-cover bg-center h-screen"
+      style={{ backgroundImage: 'url("/wallpaper.webp")' }}
+    >
+      <div className="flex flex-col h-screen justify-center items-center">
+        <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",
+          }}
+        >
+          {title ?? <>Bienvenido, inicie sesión para continuar.</>}
+        </h1>
+        <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",
+          }}
+        >
+          {description ?? <>Web app, realizada en Zauru.</>}
+        </p>
+      </div>
+    </div>
+  );
+};

package/src/Layouts/index.ts ADDED Viewed

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

package/src/LineSeparator/LineSeparator.tsx ADDED Viewed

@@ -0,0 +1,3 @@
+export const LineSeparator = () => {
+  return <hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-400"></hr>;
+};

package/src/LineSeparator/index.tsx ADDED Viewed

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

package/src/Modal/Modal.tsx ADDED Viewed

@@ -0,0 +1,104 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+export type ModalOption = "OK" | "CANCEL" | null;
+type ModalParams = {
+  title: string;
+  description: React.ReactNode;
+  okButtonText?: string;
+  showOptions?: boolean;
+};
+export const createModal = ({
+  title,
+  description,
+  okButtonText,
+  showOptions = true,
+}: ModalParams): Promise<ModalOption> => {
+  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 = () => (
+      <div className="relative w-auto my-6 mx-auto max-w-3xl">
+        <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+          <div className="flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t">
+            <h3 className="text-3xl font-semibold">{title}</h3>
+            <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">
+              <span className="close-button" onClick={handleClose}>
+                &times;
+              </span>
+            </button>
+          </div>
+          <div className="relative p-6 flex-auto">{description}</div>
+          {showOptions && (
+            <div className="flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b">
+              <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}
+              >
+                Cancelar
+              </button>
+              <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}
+              >
+                {okButtonText ?? "Aceptar"}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+    const root = createRoot(modalWrapper);
+    root.render(<ModalContent />);
+  });
+};

package/src/Modal/index.tsx ADDED Viewed

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

package/src/NavBar/NavBar.tsx CHANGED Viewed

@@ -4,7 +4,7 @@ import {
   LogoutDropDownSvgIcon,
   MenuAlt4Svg,
   OpcionButtonSvgIcon,
-} from "../Icons/Icons";
+} from "@zauru-sdk/icons";
 import { COLORS } from "./NavBar.utils";
 import type {
   ColorInterface,
@@ -202,7 +202,7 @@ export const NavBar = ({
             type="button"
             onClick={() => setNavBarOpen(!NavBarOpen)}
           >
-            <MenuAlt4Svg NavBarOpen={NavBarOpen} setNavBarOpen={undefined} />
+            <MenuAlt4Svg open={NavBarOpen} />
           </button>
         </div>
         {/* Menú para dispositivos móviles */}

package/src/NavBar/index.tsx ADDED Viewed

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

package/src/ProgressBar/ProgressBar.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+import React from "react";
+type Props = {
+  title?: string;
+  percent?: string;
+};
+export const ProgressBar = (props: Props) => {
+  const { title, percent } = props;
+  return (
+    <>
+      {percent && (
+        <>
+          {title && <div className="mb-1 text-lg font-medium">{title}</div>}
+          <div className="w-full h-6 bg-gray-200 rounded-full">
+            <div
+              className="h-6 bg-blue-600 rounded-full"
+              style={{ width: `${percent}%` }}
+            ></div>
+          </div>
+        </>
+      )}
+    </>
+  );
+};

package/src/ProgressBar/ProgressCircle.tsx ADDED Viewed

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from "react";
+export const ProgressCircle = ({
+  total,
+  completed,
+  description,
+  title,
+}: {
+  total: number;
+  completed: number;
+  description: string;
+  title?: string;
+}) => {
+  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 (
+    <div className="flex flex-col items-center justify-center">
+      {title && (
+        <h2 className="mb-4 text-xl text-center text-gray-700">{title}</h2>
+      )}
+      <svg width="100" height="100" className="relative">
+        <circle
+          r="42"
+          cx="50"
+          cy="50"
+          fill="transparent"
+          stroke="#eee"
+          strokeWidth="8"
+        />
+        <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%",
+          }}
+        />
+        <text
+          x="50"
+          y="55"
+          textAnchor="middle"
+          fill={progressColor}
+          style={{
+            fontSize: "16px",
+            fontWeight: "bold",
+          }}
+        >
+          {`${Math.round(percentage)}%`}
+        </text>
+      </svg>
+      <p className="mt-2 text-center text-gray-500">{description}</p>
+    </div>
+  );
+};

package/src/ProgressBar/index.tsx ADDED Viewed

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

package/src/Skeletons/LoadingInputSkeleton.tsx ADDED Viewed

@@ -0,0 +1,12 @@
+export const LoadingInputSkeleton = () => {
+  return (
+    <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/src/Skeletons/index.ts ADDED Viewed

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