npm - react-pdf-levelup - Versions diffs - 2.0.25 → 2.0.26 - Mend

react-pdf-levelup 2.0.25 → 2.0.26

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 (5) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -109,33 +109,19 @@ interface PageElementProps {
 declare const Header: React$1.FC<PageElementProps>;
 declare const Footer: React$1.FC<PageElementProps>;
-interface QRCustomProps {
-    url: string;
+interface QRProps {
+    value: string;
     size?: number;
-    colorData?: string;
-    colorDataBG?: string;
+    style?: any;
+    colorDark?: string;
+    colorLight?: string;
+    margin?: number;
     logo?: string;
     logoWidth?: number;
     logoHeight?: number;
-    margin?: number;
     errorCorrectionLevel?: "L" | "M" | "Q" | "H";
-    style?: any;
-    dotType?: "rounded" | "dots" | "classy" | "classy-rounded" | "square" | "extra-rounded";
-    cornerSquareType?: "square" | "dot" | "extra-rounded";
-    cornerDotType?: "square" | "dot";
-    cornerSquareColor?: string;
-    cornerDotColor?: string;
-    logoBG?: string;
-    logoText?: string;
-    moveText?: number;
-    textColor?: string;
-    fontSize?: number;
-    fontFamily?: string;
-    textBackgroundColor?: string;
-    textPadding?: number;
-    textBold?: boolean;
 }
-declare const QR: React$1.FC<QRCustomProps>;
+declare const QR: React$1.FC<QRProps>;
 interface ListProps {
     children: React$1.ReactNode;

package/dist/index.d.ts CHANGED Viewed

@@ -109,33 +109,19 @@ interface PageElementProps {
 declare const Header: React$1.FC<PageElementProps>;
 declare const Footer: React$1.FC<PageElementProps>;
-interface QRCustomProps {
-    url: string;
+interface QRProps {
+    value: string;
     size?: number;
-    colorData?: string;
-    colorDataBG?: string;
+    style?: any;
+    colorDark?: string;
+    colorLight?: string;
+    margin?: number;
     logo?: string;
     logoWidth?: number;
     logoHeight?: number;
-    margin?: number;
     errorCorrectionLevel?: "L" | "M" | "Q" | "H";
-    style?: any;
-    dotType?: "rounded" | "dots" | "classy" | "classy-rounded" | "square" | "extra-rounded";
-    cornerSquareType?: "square" | "dot" | "extra-rounded";
-    cornerDotType?: "square" | "dot";
-    cornerSquareColor?: string;
-    cornerDotColor?: string;
-    logoBG?: string;
-    logoText?: string;
-    moveText?: number;
-    textColor?: string;
-    fontSize?: number;
-    fontFamily?: string;
-    textBackgroundColor?: string;
-    textPadding?: number;
-    textBold?: boolean;
 }
-declare const QR: React$1.FC<QRCustomProps>;
+declare const QR: React$1.FC<QRProps>;
 interface ListProps {
     children: React$1.ReactNode;

package/dist/index.js CHANGED Viewed

@@ -528,195 +528,153 @@ var Footer = ({ children, style, fixed = false }) => {
 // src/components/core/QR.tsx
 var import_react8 = __toESM(require("react"));
 var import_renderer8 = require("@react-pdf/renderer");
-var import_qr_code_styling = __toESM(require("qr-code-styling"));
-if (typeof window === "undefined" && typeof process !== "undefined") {
+var import_react9 = require("react");
+// src/components/core/QRGenerator.tsx
+var import_qrcode = __toESM(require("qrcode"));
+var generateQRAsBase64 = async ({
+  value,
+  size = 150,
+  colorDark = "#000000",
+  colorLight = "#ffffff",
+  margin = 0,
+  errorCorrectionLevel = "M"
+}) => {
   try {
-    import("jsdom").then((jsdom) => {
-      const { JSDOM } = jsdom;
-      import("canvas").then((canvas) => {
-        const { Canvas, Image: CanvasImage } = canvas;
-        const { window: domWindow } = new JSDOM("<!DOCTYPE html><html><body></body></html>");
-        global.window = domWindow;
-        global.document = domWindow.document;
-        global.HTMLElement = domWindow.HTMLElement;
-        global.HTMLCanvasElement = Canvas;
-        global.CanvasRenderingContext2D = Canvas;
-        global.Image = CanvasImage;
-      }).catch((err) => {
-        console.error("Error loading canvas:", err);
-      });
-    }).catch((err) => {
-      console.error("Error loading jsdom:", err);
-    });
+    const options = {
+      errorCorrectionLevel,
+      type: "image/png",
+      quality: 0.92,
+      margin,
+      color: {
+        dark: colorDark,
+        light: colorLight
+      },
+      width: size
+    };
+    const qrDataUrl = import_qrcode.default.toDataURL(value, options);
+    return qrDataUrl;
   } catch (error) {
-    console.error("Error setting up Node.js environment:", error);
+    console.error("Error generando QR:", error);
+    return "";
+  }
+};
+var addLogoToQR = async (qrDataUrl, logoUrl, logoWidth, logoHeight) => {
+  return new Promise((resolve) => {
+    if (!qrDataUrl || !logoUrl) {
+      resolve(qrDataUrl);
+      return;
+    }
+    try {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        resolve(qrDataUrl);
+        return;
+      }
+      const qrImage = new Image();
+      qrImage.crossOrigin = "anonymous";
+      qrImage.onload = () => {
+        canvas.width = qrImage.width;
+        canvas.height = qrImage.height;
+        ctx.drawImage(qrImage, 0, 0, canvas.width, canvas.height);
+        const logoImage = new Image();
+        logoImage.crossOrigin = "anonymous";
+        logoImage.onload = () => {
+          const x = (canvas.width - logoWidth) / 2;
+          const y = (canvas.height - logoHeight) / 2;
+          ctx.fillStyle = "#FFFFFF";
+          ctx.fillRect(x - 5, y - 5, logoWidth + 10, logoHeight + 10);
+          ctx.drawImage(logoImage, x, y, logoWidth, logoHeight);
+          const finalQrDataUrl = canvas.toDataURL("image/png");
+          resolve(finalQrDataUrl);
+        };
+        logoImage.onerror = () => {
+          console.error("Error cargando el logo");
+          resolve(qrDataUrl);
+        };
+        logoImage.src = logoUrl;
+      };
+      qrImage.onerror = () => {
+        console.error("Error cargando el QR");
+        resolve("");
+      };
+      qrImage.src = qrDataUrl;
+    } catch (error) {
+      console.error("Error procesando el QR con logo:", error);
+      resolve(qrDataUrl);
+    }
+  });
+};
+// src/components/core/QR.tsx
+var styles8 = import_renderer8.StyleSheet.create({
+  qrContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    margin: 10
   }
-}
+});
+var errorLevelMap = {
+  0: "L",
+  1: "M",
+  2: "Q",
+  3: "H"
+};
 var QR = ({
-  url,
-  size = 200,
-  colorData = "#000000",
-  colorDataBG = "#ffffff",
-  logo,
-  logoWidth = 30,
-  logoHeight,
-  margin = 0,
-  errorCorrectionLevel = "H",
+  value,
+  size = 150,
   style,
-  dotType = "square",
-  cornerSquareType = "square",
-  cornerDotType = "square",
-  cornerSquareColor,
-  cornerDotColor,
-  logoBG = colorDataBG,
-  logoText,
-  moveText = 0,
-  textColor = colorData,
-  fontSize = 12,
-  fontFamily = "Helvetica",
-  textBackgroundColor = colorDataBG,
-  textPadding = 1,
-  textBold = true
+  colorDark = "#000000",
+  colorLight = "#ffffff",
+  margin = 0,
+  logo = "",
+  logoWidth = 30,
+  logoHeight = 30,
+  errorCorrectionLevel = "M"
 }) => {
-  const [qrDataURL, setQrDataURL] = (0, import_react8.useState)(null);
-  const actualLogoWidth = logoWidth || Math.floor(size * 0.2);
-  const actualLogoHeight = logoHeight || actualLogoWidth;
-  (0, import_react8.useEffect)(() => {
-    if (typeof window === "undefined") {
-      return;
-    }
-    const generateQRCode = async () => {
+  const [qrDataUrl, setQrDataUrl] = (0, import_react9.useState)("");
+  (0, import_react9.useEffect)(() => {
+    const generateQR = async () => {
       try {
-        const qrCode = new import_qr_code_styling.default({
-          width: size,
-          height: size,
-          type: "canvas",
-          data: url,
-          dotsOptions: {
-            color: colorData,
-            type: dotType
-          },
-          cornersSquareOptions: {
-            color: cornerSquareColor || colorData,
-            type: cornerSquareType
-          },
-          cornersDotOptions: {
-            color: cornerDotColor || colorData,
-            type: cornerDotType
-          },
-          backgroundOptions: {
-            color: colorDataBG
-          },
-          qrOptions: {
-            errorCorrectionLevel
-          },
-          margin
+        const baseQrDataUrl = await generateQRAsBase64({
+          value,
+          size,
+          colorDark,
+          colorLight,
+          margin,
+          errorCorrectionLevel: typeof errorCorrectionLevel === "number" ? errorLevelMap[errorCorrectionLevel] || "M" : errorCorrectionLevel
         });
-        const container = document.createElement("div");
-        container.style.position = "absolute";
-        container.style.top = "-9999px";
-        container.style.left = "-9999px";
-        document.body.appendChild(container);
-        qrCode.append(container);
-        setTimeout(() => {
-          try {
-            const qrCanvas = container.querySelector("canvas");
-            if (qrCanvas) {
-              const canvas = document.createElement("canvas");
-              canvas.width = size;
-              canvas.height = size;
-              const ctx = canvas.getContext("2d");
-              if (ctx) {
-                ctx.drawImage(qrCanvas, 0, 0);
-                const dataURL = canvas.toDataURL("image/png");
-                setQrDataURL(dataURL);
-              }
-            }
-            document.body.removeChild(container);
-          } catch (error) {
-            console.error("Error capturando QR:", error);
-          }
-        }, 100);
+        if (logo && logoWidth && logoHeight) {
+          const qrWithLogo = await addLogoToQR(baseQrDataUrl, logo, logoWidth, logoHeight);
+          setQrDataUrl(qrWithLogo);
+        } else {
+          setQrDataUrl(baseQrDataUrl);
+        }
       } catch (error) {
         console.error("Error generando QR:", error);
+        const fallbackUrl2 = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(
+          value
+        )}&size=${size}x${size}&color=${encodeURIComponent(colorDark.replace("#", ""))}&bgcolor=${encodeURIComponent(
+          colorLight.replace("#", "")
+        )}`;
+        setQrDataUrl(fallbackUrl2);
       }
     };
-    generateQRCode();
-  }, [
-    url,
-    size,
-    colorData,
-    colorDataBG,
-    margin,
-    errorCorrectionLevel,
-    dotType,
-    cornerSquareType,
-    cornerDotType,
-    cornerSquareColor,
-    cornerDotColor,
-    logoBG
-  ]);
-  if (!qrDataURL) return null;
-  const centerPosition = size / 2;
-  const logoContainerSize = Math.max(actualLogoWidth, actualLogoHeight) + 10;
-  return /* @__PURE__ */ import_react8.default.createElement(import_renderer8.View, { style: { width: size, height: size, position: "relative", ...style } }, /* @__PURE__ */ import_react8.default.createElement(import_renderer8.Image, { src: qrDataURL, style: { width: size, height: size } }), logo && /* @__PURE__ */ import_react8.default.createElement(
-    import_renderer8.View,
-    {
-      style: {
-        position: "absolute",
-        width: logoContainerSize,
-        height: logoContainerSize,
-        backgroundColor: logoBG,
-        left: centerPosition - logoContainerSize / 2,
-        top: centerPosition - logoContainerSize / 2,
-        borderRadius: 100,
-        border: `5px solid ${colorData}`,
-        padding: 0
-      }
-    },
-    /* @__PURE__ */ import_react8.default.createElement(
-      import_renderer8.Image,
-      {
-        src: logo,
-        style: {
-          objectFit: "contain",
-          width: actualLogoWidth,
-          height: actualLogoHeight
-        }
-      }
-    )
-  ), !logo && logoText && /* @__PURE__ */ import_react8.default.createElement(
-    import_renderer8.View,
-    {
-      style: {
-        position: "absolute",
-        backgroundColor: textBackgroundColor,
-        padding: textPadding,
-        borderRadius: 4,
-        left: moveText + centerPosition - 20,
-        top: centerPosition - 10
-      }
-    },
-    /* @__PURE__ */ import_react8.default.createElement(
-      import_renderer8.Text,
-      {
-        style: {
-          color: textColor,
-          fontSize,
-          fontFamily,
-          fontWeight: textBold ? "bold" : "normal"
-        }
-      },
-      logoText
-    )
-  ));
+    generateQR();
+  }, [value, size, colorDark, colorLight, margin, logo, logoWidth, logoHeight, errorCorrectionLevel]);
+  const fallbackUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(
+    value
+  )}&size=${size}x${size}`;
+  return /* @__PURE__ */ import_react8.default.createElement(import_renderer8.View, { style: [styles8.qrContainer, style] }, /* @__PURE__ */ import_react8.default.createElement(import_renderer8.Image, { src: qrDataUrl || fallbackUrl, style: { width: size, height: size } }));
 };
 var QR_default = QR;
 // src/components/core/Lista.tsx
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_renderer9 = require("@react-pdf/renderer");
-var styles8 = import_renderer9.StyleSheet.create({
+var styles9 = import_renderer9.StyleSheet.create({
   ul: {
     marginBottom: 10,
     paddingLeft: 15
@@ -776,9 +734,9 @@ var toRoman = (num) => {
   return romanNumerals[3][Math.floor(num / 1e3)] + romanNumerals[2][Math.floor(num % 1e3 / 100)] + romanNumerals[1][Math.floor(num % 100 / 10)] + romanNumerals[0][num % 10];
 };
 var UL = ({ children, style, type = "disc" }) => {
-  const childrenWithBullets = import_react9.default.Children.map(children, (child, index) => {
-    if (import_react9.default.isValidElement(child)) {
-      return import_react9.default.cloneElement(child, {
+  const childrenWithBullets = import_react10.default.Children.map(children, (child, index) => {
+    if (import_react10.default.isValidElement(child)) {
+      return import_react10.default.cloneElement(child, {
         bulletType: type,
         isOrdered: false,
         index: index + 1
@@ -786,12 +744,12 @@ var UL = ({ children, style, type = "disc" }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ import_react9.default.createElement(import_renderer9.View, { style: [styles8.ul, style] }, childrenWithBullets);
+  return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles9.ul, style] }, childrenWithBullets);
 };
 var OL = ({ children, style, type = "decimal", start = 1 }) => {
-  const childrenWithNumbers = import_react9.default.Children.map(children, (child, index) => {
-    if (import_react9.default.isValidElement(child)) {
-      return import_react9.default.cloneElement(child, {
+  const childrenWithNumbers = import_react10.default.Children.map(children, (child, index) => {
+    if (import_react10.default.isValidElement(child)) {
+      return import_react10.default.cloneElement(child, {
         bulletType: type,
         isOrdered: true,
         index: index + 1,
@@ -800,7 +758,7 @@ var OL = ({ children, style, type = "decimal", start = 1 }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ import_react9.default.createElement(import_renderer9.View, { style: [styles8.ol, style] }, childrenWithNumbers);
+  return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles9.ol, style] }, childrenWithNumbers);
 };
 var LI = ({ children, style, bulletType = "disc", isOrdered = false, index = 1, start = 1, value }) => {
   let marker;
@@ -810,7 +768,7 @@ var LI = ({ children, style, bulletType = "disc", isOrdered = false, index = 1,
   } else {
     marker = getBulletPoint(bulletType);
   }
-  return /* @__PURE__ */ import_react9.default.createElement(import_renderer9.View, { style: [styles8.li, style] }, /* @__PURE__ */ import_react9.default.createElement(import_renderer9.Text, { style: styles8.bulletPoint }, marker), /* @__PURE__ */ import_react9.default.createElement(import_renderer9.View, { style: styles8.itemContent }, typeof children === "string" ? /* @__PURE__ */ import_react9.default.createElement(import_renderer9.Text, null, children) : children));
+  return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles9.li, style] }, /* @__PURE__ */ import_react10.default.createElement(import_renderer9.Text, { style: styles9.bulletPoint }, marker), /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: styles9.itemContent }, typeof children === "string" ? /* @__PURE__ */ import_react10.default.createElement(import_renderer9.Text, null, children) : children));
 };
 // src/components/core/index.tsx
@@ -845,13 +803,13 @@ var decodeBase64Pdf_default = decodeBase64Pdf;
 // src/functions/generatePDF.ts
 var import_renderer10 = require("@react-pdf/renderer");
-var import_react10 = require("react");
+var import_react11 = require("react");
 var generatePDF = async ({ template: Template, data }) => {
   try {
     if (!Template) {
       throw new Error("Template not provided");
     }
-    const MyDocument = (0, import_react10.createElement)(Template, { data });
+    const MyDocument = (0, import_react11.createElement)(Template, { data });
     const stream = await (0, import_renderer10.renderToStream)(MyDocument);
     const base64String = await new Promise((resolve, reject) => {
       const chunks = [];

package/dist/index.mjs CHANGED Viewed

@@ -71,7 +71,7 @@ var LayoutPDF_default = LayoutPDF;
 // src/components/core/Img.tsx
 import React2 from "react";
-import { Image, StyleSheet as StyleSheet2 } from "@react-pdf/renderer";
+import { Image as Image2, StyleSheet as StyleSheet2 } from "@react-pdf/renderer";
 var styles2 = StyleSheet2.create({
   image: {
     width: "100%",
@@ -80,7 +80,7 @@ var styles2 = StyleSheet2.create({
   }
 });
 var Img = ({ src, style }) => {
-  return /* @__PURE__ */ React2.createElement(Image, { src, style: [styles2.image, style] });
+  return /* @__PURE__ */ React2.createElement(Image2, { src, style: [styles2.image, style] });
 };
 var Img_default = Img;
@@ -438,197 +438,155 @@ var Footer = ({ children, style, fixed = false }) => {
 };
 // src/components/core/QR.tsx
-import React8, { useEffect, useState } from "react";
-import { Image as Image2, View as View5, Text as Text5 } from "@react-pdf/renderer";
-import QRCodeStyling from "qr-code-styling";
-if (typeof window === "undefined" && typeof process !== "undefined") {
+import React8 from "react";
+import { Image as Image3, StyleSheet as StyleSheet8, View as View5 } from "@react-pdf/renderer";
+import { useEffect, useState } from "react";
+// src/components/core/QRGenerator.tsx
+import QRCode from "qrcode";
+var generateQRAsBase64 = async ({
+  value,
+  size = 150,
+  colorDark = "#000000",
+  colorLight = "#ffffff",
+  margin = 0,
+  errorCorrectionLevel = "M"
+}) => {
   try {
-    import("jsdom").then((jsdom) => {
-      const { JSDOM } = jsdom;
-      import("canvas").then((canvas) => {
-        const { Canvas, Image: CanvasImage } = canvas;
-        const { window: domWindow } = new JSDOM("<!DOCTYPE html><html><body></body></html>");
-        global.window = domWindow;
-        global.document = domWindow.document;
-        global.HTMLElement = domWindow.HTMLElement;
-        global.HTMLCanvasElement = Canvas;
-        global.CanvasRenderingContext2D = Canvas;
-        global.Image = CanvasImage;
-      }).catch((err) => {
-        console.error("Error loading canvas:", err);
-      });
-    }).catch((err) => {
-      console.error("Error loading jsdom:", err);
-    });
+    const options = {
+      errorCorrectionLevel,
+      type: "image/png",
+      quality: 0.92,
+      margin,
+      color: {
+        dark: colorDark,
+        light: colorLight
+      },
+      width: size
+    };
+    const qrDataUrl = QRCode.toDataURL(value, options);
+    return qrDataUrl;
   } catch (error) {
-    console.error("Error setting up Node.js environment:", error);
+    console.error("Error generando QR:", error);
+    return "";
   }
-}
+};
+var addLogoToQR = async (qrDataUrl, logoUrl, logoWidth, logoHeight) => {
+  return new Promise((resolve) => {
+    if (!qrDataUrl || !logoUrl) {
+      resolve(qrDataUrl);
+      return;
+    }
+    try {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        resolve(qrDataUrl);
+        return;
+      }
+      const qrImage = new Image();
+      qrImage.crossOrigin = "anonymous";
+      qrImage.onload = () => {
+        canvas.width = qrImage.width;
+        canvas.height = qrImage.height;
+        ctx.drawImage(qrImage, 0, 0, canvas.width, canvas.height);
+        const logoImage = new Image();
+        logoImage.crossOrigin = "anonymous";
+        logoImage.onload = () => {
+          const x = (canvas.width - logoWidth) / 2;
+          const y = (canvas.height - logoHeight) / 2;
+          ctx.fillStyle = "#FFFFFF";
+          ctx.fillRect(x - 5, y - 5, logoWidth + 10, logoHeight + 10);
+          ctx.drawImage(logoImage, x, y, logoWidth, logoHeight);
+          const finalQrDataUrl = canvas.toDataURL("image/png");
+          resolve(finalQrDataUrl);
+        };
+        logoImage.onerror = () => {
+          console.error("Error cargando el logo");
+          resolve(qrDataUrl);
+        };
+        logoImage.src = logoUrl;
+      };
+      qrImage.onerror = () => {
+        console.error("Error cargando el QR");
+        resolve("");
+      };
+      qrImage.src = qrDataUrl;
+    } catch (error) {
+      console.error("Error procesando el QR con logo:", error);
+      resolve(qrDataUrl);
+    }
+  });
+};
+// src/components/core/QR.tsx
+var styles8 = StyleSheet8.create({
+  qrContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    margin: 10
+  }
+});
+var errorLevelMap = {
+  0: "L",
+  1: "M",
+  2: "Q",
+  3: "H"
+};
 var QR = ({
-  url,
-  size = 200,
-  colorData = "#000000",
-  colorDataBG = "#ffffff",
-  logo,
-  logoWidth = 30,
-  logoHeight,
-  margin = 0,
-  errorCorrectionLevel = "H",
+  value,
+  size = 150,
   style,
-  dotType = "square",
-  cornerSquareType = "square",
-  cornerDotType = "square",
-  cornerSquareColor,
-  cornerDotColor,
-  logoBG = colorDataBG,
-  logoText,
-  moveText = 0,
-  textColor = colorData,
-  fontSize = 12,
-  fontFamily = "Helvetica",
-  textBackgroundColor = colorDataBG,
-  textPadding = 1,
-  textBold = true
+  colorDark = "#000000",
+  colorLight = "#ffffff",
+  margin = 0,
+  logo = "",
+  logoWidth = 30,
+  logoHeight = 30,
+  errorCorrectionLevel = "M"
 }) => {
-  const [qrDataURL, setQrDataURL] = useState(null);
-  const actualLogoWidth = logoWidth || Math.floor(size * 0.2);
-  const actualLogoHeight = logoHeight || actualLogoWidth;
+  const [qrDataUrl, setQrDataUrl] = useState("");
   useEffect(() => {
-    if (typeof window === "undefined") {
-      return;
-    }
-    const generateQRCode = async () => {
+    const generateQR = async () => {
       try {
-        const qrCode = new QRCodeStyling({
-          width: size,
-          height: size,
-          type: "canvas",
-          data: url,
-          dotsOptions: {
-            color: colorData,
-            type: dotType
-          },
-          cornersSquareOptions: {
-            color: cornerSquareColor || colorData,
-            type: cornerSquareType
-          },
-          cornersDotOptions: {
-            color: cornerDotColor || colorData,
-            type: cornerDotType
-          },
-          backgroundOptions: {
-            color: colorDataBG
-          },
-          qrOptions: {
-            errorCorrectionLevel
-          },
-          margin
+        const baseQrDataUrl = await generateQRAsBase64({
+          value,
+          size,
+          colorDark,
+          colorLight,
+          margin,
+          errorCorrectionLevel: typeof errorCorrectionLevel === "number" ? errorLevelMap[errorCorrectionLevel] || "M" : errorCorrectionLevel
         });
-        const container = document.createElement("div");
-        container.style.position = "absolute";
-        container.style.top = "-9999px";
-        container.style.left = "-9999px";
-        document.body.appendChild(container);
-        qrCode.append(container);
-        setTimeout(() => {
-          try {
-            const qrCanvas = container.querySelector("canvas");
-            if (qrCanvas) {
-              const canvas = document.createElement("canvas");
-              canvas.width = size;
-              canvas.height = size;
-              const ctx = canvas.getContext("2d");
-              if (ctx) {
-                ctx.drawImage(qrCanvas, 0, 0);
-                const dataURL = canvas.toDataURL("image/png");
-                setQrDataURL(dataURL);
-              }
-            }
-            document.body.removeChild(container);
-          } catch (error) {
-            console.error("Error capturando QR:", error);
-          }
-        }, 100);
+        if (logo && logoWidth && logoHeight) {
+          const qrWithLogo = await addLogoToQR(baseQrDataUrl, logo, logoWidth, logoHeight);
+          setQrDataUrl(qrWithLogo);
+        } else {
+          setQrDataUrl(baseQrDataUrl);
+        }
       } catch (error) {
         console.error("Error generando QR:", error);
+        const fallbackUrl2 = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(
+          value
+        )}&size=${size}x${size}&color=${encodeURIComponent(colorDark.replace("#", ""))}&bgcolor=${encodeURIComponent(
+          colorLight.replace("#", "")
+        )}`;
+        setQrDataUrl(fallbackUrl2);
       }
     };
-    generateQRCode();
-  }, [
-    url,
-    size,
-    colorData,
-    colorDataBG,
-    margin,
-    errorCorrectionLevel,
-    dotType,
-    cornerSquareType,
-    cornerDotType,
-    cornerSquareColor,
-    cornerDotColor,
-    logoBG
-  ]);
-  if (!qrDataURL) return null;
-  const centerPosition = size / 2;
-  const logoContainerSize = Math.max(actualLogoWidth, actualLogoHeight) + 10;
-  return /* @__PURE__ */ React8.createElement(View5, { style: { width: size, height: size, position: "relative", ...style } }, /* @__PURE__ */ React8.createElement(Image2, { src: qrDataURL, style: { width: size, height: size } }), logo && /* @__PURE__ */ React8.createElement(
-    View5,
-    {
-      style: {
-        position: "absolute",
-        width: logoContainerSize,
-        height: logoContainerSize,
-        backgroundColor: logoBG,
-        left: centerPosition - logoContainerSize / 2,
-        top: centerPosition - logoContainerSize / 2,
-        borderRadius: 100,
-        border: `5px solid ${colorData}`,
-        padding: 0
-      }
-    },
-    /* @__PURE__ */ React8.createElement(
-      Image2,
-      {
-        src: logo,
-        style: {
-          objectFit: "contain",
-          width: actualLogoWidth,
-          height: actualLogoHeight
-        }
-      }
-    )
-  ), !logo && logoText && /* @__PURE__ */ React8.createElement(
-    View5,
-    {
-      style: {
-        position: "absolute",
-        backgroundColor: textBackgroundColor,
-        padding: textPadding,
-        borderRadius: 4,
-        left: moveText + centerPosition - 20,
-        top: centerPosition - 10
-      }
-    },
-    /* @__PURE__ */ React8.createElement(
-      Text5,
-      {
-        style: {
-          color: textColor,
-          fontSize,
-          fontFamily,
-          fontWeight: textBold ? "bold" : "normal"
-        }
-      },
-      logoText
-    )
-  ));
+    generateQR();
+  }, [value, size, colorDark, colorLight, margin, logo, logoWidth, logoHeight, errorCorrectionLevel]);
+  const fallbackUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(
+    value
+  )}&size=${size}x${size}`;
+  return /* @__PURE__ */ React8.createElement(View5, { style: [styles8.qrContainer, style] }, /* @__PURE__ */ React8.createElement(Image3, { src: qrDataUrl || fallbackUrl, style: { width: size, height: size } }));
 };
 var QR_default = QR;
 // src/components/core/Lista.tsx
 import React9 from "react";
-import { View as View6, Text as Text6, StyleSheet as StyleSheet8 } from "@react-pdf/renderer";
-var styles8 = StyleSheet8.create({
+import { View as View6, Text as Text5, StyleSheet as StyleSheet9 } from "@react-pdf/renderer";
+var styles9 = StyleSheet9.create({
   ul: {
     marginBottom: 10,
     paddingLeft: 15
@@ -698,7 +656,7 @@ var UL = ({ children, style, type = "disc" }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ React9.createElement(View6, { style: [styles8.ul, style] }, childrenWithBullets);
+  return /* @__PURE__ */ React9.createElement(View6, { style: [styles9.ul, style] }, childrenWithBullets);
 };
 var OL = ({ children, style, type = "decimal", start = 1 }) => {
   const childrenWithNumbers = React9.Children.map(children, (child, index) => {
@@ -712,7 +670,7 @@ var OL = ({ children, style, type = "decimal", start = 1 }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ React9.createElement(View6, { style: [styles8.ol, style] }, childrenWithNumbers);
+  return /* @__PURE__ */ React9.createElement(View6, { style: [styles9.ol, style] }, childrenWithNumbers);
 };
 var LI = ({ children, style, bulletType = "disc", isOrdered = false, index = 1, start = 1, value }) => {
   let marker;
@@ -722,11 +680,11 @@ var LI = ({ children, style, bulletType = "disc", isOrdered = false, index = 1,
   } else {
     marker = getBulletPoint(bulletType);
   }
-  return /* @__PURE__ */ React9.createElement(View6, { style: [styles8.li, style] }, /* @__PURE__ */ React9.createElement(Text6, { style: styles8.bulletPoint }, marker), /* @__PURE__ */ React9.createElement(View6, { style: styles8.itemContent }, typeof children === "string" ? /* @__PURE__ */ React9.createElement(Text6, null, children) : children));
+  return /* @__PURE__ */ React9.createElement(View6, { style: [styles9.li, style] }, /* @__PURE__ */ React9.createElement(Text5, { style: styles9.bulletPoint }, marker), /* @__PURE__ */ React9.createElement(View6, { style: styles9.itemContent }, typeof children === "string" ? /* @__PURE__ */ React9.createElement(Text5, null, children) : children));
 };
 // src/components/core/index.tsx
-import { View as View7, Text as Text7, StyleSheet as StyleSheet9, Font } from "@react-pdf/renderer";
+import { View as View7, Text as Text6, StyleSheet as StyleSheet10, Font } from "@react-pdf/renderer";
 // src/functions/decodeBase64Pdf.ts
 var decodeBase64Pdf = (base64, fileName) => {
@@ -818,11 +776,11 @@ export {
   Small,
   Span,
   Strong,
-  StyleSheet9 as StyleSheet,
+  StyleSheet10 as StyleSheet,
   Table,
   Tbody,
   Td,
-  Text7 as Text,
+  Text6 as Text,
   Th,
   Thead,
   Tr,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "react-pdf-levelup",
-  "version": "2.0.25",
+  "version": "2.0.26",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -20,16 +20,14 @@
   },
   "peerDependencies": {
     "@react-pdf/renderer": "^4.3.0",
-    "qr-code-styling": "^1.9.2",
+    "qrcode": "^1.5.4",
     "react": "^18",
     "react-dom": "^18"
   },
   "dependencies": {
     "@babel/standalone": "^7.23.10",
     "@monaco-editor/react": "^4.7.0",
-    "canvas": "^3.1.0",
     "i": "^0.3.7",
-    "jsdom": "^26.1.0",
     "lucide-react": "^0.485.0",
     "npm": "^11.3.0",
     "react-router-dom": "^7.4.1",
@@ -39,7 +37,7 @@
   "devDependencies": {
     "@eslint/js": "^9.21.0",
     "@react-pdf/types": "^2.9.0",
-    "@types/jsdom": "^21.1.7",
+    "@types/qrcode": "^1.5.5",
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react": "^4.3.4",