react-pdf-levelup 2.0.20 → 2.0.21

package/README.md

@@ -1,54 +1,54 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config({
-  extends: [
-    // Remove ...tseslint.configs.recommended and replace with this
-    ...tseslint.configs.recommendedTypeChecked,
-    // Alternatively, use this for stricter rules
-    ...tseslint.configs.strictTypeChecked,
-    // Optionally, add this for stylistic rules
-    ...tseslint.configs.stylisticTypeChecked,
-  ],
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config({
-  plugins: {
-    // Add the react-x and react-dom plugins
-    'react-x': reactX,
-    'react-dom': reactDom,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended typescript rules
-    ...reactX.configs['recommended-typescript'].rules,
-    ...reactDom.configs.recommended.rules,
-  },
-})
-```
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+  extends: [
+    // Remove ...tseslint.configs.recommended and replace with this
+    ...tseslint.configs.recommendedTypeChecked,
+    // Alternatively, use this for stricter rules
+    ...tseslint.configs.strictTypeChecked,
+    // Optionally, add this for stylistic rules
+    ...tseslint.configs.stylisticTypeChecked,
+  ],
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config({
+  plugins: {
+    // Add the react-x and react-dom plugins
+    'react-x': reactX,
+    'react-dom': reactDom,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended typescript rules
+    ...reactX.configs['recommended-typescript'].rules,
+    ...reactDom.configs.recommended.rules,
+  },
+})
+```

package/dist/index.d.mts

@@ -57,15 +57,20 @@ interface TableProps {
 interface CellProps {
     children?: React$1.ReactNode;
     style?: any;
-    cellSize?: "small" | "medium" | "large";
     width?: string | number;
     height?: string | number;
     colSpan?: number;
+    isLast?: boolean;
+    isLastRow?: boolean;
+    isOdd?: boolean;
 }
 declare const Table: React$1.FC<TableProps>;
 declare const Thead: React$1.FC<TableProps>;
 declare const Tbody: React$1.FC<TableProps>;
-declare const Tr: React$1.FC<TableProps>;
+declare const Tr: React$1.FC<TableProps & {
+    isLastRow?: boolean;
+    isOdd?: boolean;
+}>;
 declare const Th: React$1.FC<CellProps>;
 declare const Td: React$1.FC<CellProps>;
 
@@ -104,19 +109,33 @@ interface PageElementProps {
 declare const Header: React$1.FC<PageElementProps>;
 declare const Footer: React$1.FC<PageElementProps>;
 
-interface QRProps {
-    value: string;
+interface QRCustomProps {
+    url: string;
     size?: number;
-    style?: any;
-    colorDark?: string;
-    colorLight?: string;
-    margin?: number;
+    colorData?: string;
+    colorDataBG?: string;
     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<QRProps>;
+declare const QR: React$1.FC<QRCustomProps>;
 
 interface ListProps {
     children: React$1.ReactNode;

package/dist/index.d.ts

@@ -57,15 +57,20 @@ interface TableProps {
 interface CellProps {
     children?: React$1.ReactNode;
     style?: any;
-    cellSize?: "small" | "medium" | "large";
     width?: string | number;
     height?: string | number;
     colSpan?: number;
+    isLast?: boolean;
+    isLastRow?: boolean;
+    isOdd?: boolean;
 }
 declare const Table: React$1.FC<TableProps>;
 declare const Thead: React$1.FC<TableProps>;
 declare const Tbody: React$1.FC<TableProps>;
-declare const Tr: React$1.FC<TableProps>;
+declare const Tr: React$1.FC<TableProps & {
+    isLastRow?: boolean;
+    isOdd?: boolean;
+}>;
 declare const Th: React$1.FC<CellProps>;
 declare const Td: React$1.FC<CellProps>;
 
@@ -104,19 +109,33 @@ interface PageElementProps {
 declare const Header: React$1.FC<PageElementProps>;
 declare const Footer: React$1.FC<PageElementProps>;
 
-interface QRProps {
-    value: string;
+interface QRCustomProps {
+    url: string;
     size?: number;
-    style?: any;
-    colorDark?: string;
-    colorLight?: string;
-    margin?: number;
+    colorData?: string;
+    colorDataBG?: string;
     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<QRProps>;
+declare const QR: React$1.FC<QRCustomProps>;
 
 interface ListProps {
     children: React$1.ReactNode;

package/dist/index.js

@@ -325,81 +325,100 @@ var styles5 = import_renderer5.StyleSheet.create({
     width: "100%",
     borderWidth: 1,
     borderColor: "#000",
-    overflow: "hidden",
     marginBottom: 20
   },
   thead: {
-    backgroundColor: "#f0f0f0"
+    backgroundColor: "#ccc"
   },
-  tbody: {},
   tr: {
-    flexDirection: "row",
-    borderBottomWidth: 1,
-    borderColor: "#000"
+    flexDirection: "row"
   },
-  th: {
-    paddingTop: 4,
+  textBold: {
     fontSize: 10,
     fontFamily: "Helvetica",
     fontWeight: "bold",
-    borderRight: 1,
-    borderColor: "#000",
-    textAlign: "center"
+    textAlign: "center",
+    paddingTop: 4
   },
-  td: {
-    paddingTop: 4,
-    paddingLeft: 8,
-    paddingRight: 8,
+  text: {
     fontSize: 10,
     fontFamily: "Helvetica",
-    borderRight: 1,
-    borderColor: "#000"
-    // borderTopWidth: 0,
-  },
-  cellSmall: {
-    width: "25%"
-  },
-  cellMedium: {
-    width: "33.33%"
+    paddingTop: 4,
+    paddingLeft: 8,
+    paddingRight: 8
   },
-  cellLarge: {
-    width: "50%"
+  zebraOdd: {
+    backgroundColor: "#eeeeee"
   }
 });
-var cellSizeMapping = {
-  small: styles5.cellSmall,
-  medium: styles5.cellMedium,
-  large: styles5.cellLarge
-};
-var Table = ({ children, style }) => {
-  return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.table, style] }, children);
-};
-var Thead = ({ children, style }) => {
-  return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.thead, style] }, children);
-};
+var Table = ({ children, style }) => /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.table, style] }, children);
+var Thead = ({ children, style }) => /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.thead, style] }, children);
 var Tbody = ({ children, style }) => {
-  return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.tbody, style] }, children);
-};
-var Tr = ({ children, style }) => {
-  return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.tr, style] }, children);
-};
-var Th = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
-  const spanWidth = colSpan ? `${100 / 3 * colSpan}%` : void 0;
-  const sizeStyle = cellSizeMapping[cellSize];
-  const customStyle = {
-    width: width || spanWidth || sizeStyle?.width,
+  const rows = import_react5.default.Children.toArray(children);
+  const count = rows.length;
+  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, rows.map(
+    (row, idx) => import_react5.default.cloneElement(row, {
+      isLastRow: idx === count - 1,
+      isOdd: idx % 2 === 1
+    })
+  ));
+};
+var Tr = ({
+  children,
+  style,
+  isLastRow = false,
+  isOdd = false
+}) => {
+  const elements = import_react5.default.Children.toArray(children);
+  const count = elements.length;
+  return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.tr, style] }, elements.map((child, idx) => {
+    const isLast = idx === count - 1;
+    const width = `${(100 / count).toFixed(2)}%`;
+    return import_react5.default.cloneElement(child, { width, isLast, isLastRow, isOdd });
+  }));
+};
+var Th = ({
+  children,
+  style,
+  width,
+  height,
+  colSpan,
+  isLast = false,
+  isLastRow = false
+}) => {
+  const baseWidth = typeof width === "string" && colSpan ? `${(parseFloat(width) * colSpan).toFixed(2)}%` : width;
+  const borders = {
+    borderRightWidth: isLast ? 0 : 1,
+    borderBottomWidth: isLastRow ? 0 : 1,
+    borderColor: "#000",
     ...height !== void 0 && { height }
   };
-  return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.th, customStyle, style] }, /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, null, children));
+  return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.textBold, { width: baseWidth }, borders, style] }, /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, null, children));
 };
-var Td = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
-  const spanWidth = colSpan ? `${100 / 3 * colSpan}%` : void 0;
-  const sizeStyle = cellSizeMapping[cellSize];
-  const customStyle = {
-    width: width || spanWidth || sizeStyle?.width,
+var Td = ({
+  children,
+  style,
+  width,
+  height,
+  colSpan,
+  isLast = false,
+  isLastRow = false,
+  isOdd = false
+}) => {
+  const baseWidth = typeof width === "string" && colSpan ? `${(parseFloat(width) * colSpan).toFixed(2)}%` : width;
+  const borders = {
+    borderRightWidth: isLast ? 0 : 1,
+    borderBottomWidth: isLastRow ? 0 : 1,
+    borderColor: "#000",
     ...height !== void 0 && { height }
   };
-  return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.td, customStyle, style] }, /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, null, children));
+  return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [
+    styles5.text,
+    isOdd && styles5.zebraOdd,
+    { width: baseWidth },
+    borders,
+    style
+  ] }, /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, null, children));
 };
 
 // src/components/core/Grid.tsx
@@ -508,154 +527,174 @@ 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_react9 = require("react");
-
-// src/components/core/QRGenerator.tsx
-var import_qrcode = __toESM(require("qrcode"));
-var generateQRAsBase64 = async ({
-  value,
-  size = 150,
-  colorDark = "#282828",
-  colorLight = "#ffffff",
-  margin = 0,
-  errorCorrectionLevel = "M"
-}) => {
-  try {
-    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 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 import_renderer8 = require("@react-pdf/renderer");
+var import_qr_code_styling = __toESM(require("qr-code-styling"));
 var QR = ({
-  value,
-  size = 150,
-  style,
-  colorDark = "#000000",
-  colorLight = "#ffffff",
-  margin = 0,
-  logo = "",
+  url,
+  size = 200,
+  colorData = "#000000",
+  colorDataBG = "#ffffff",
+  logo,
   logoWidth = 30,
-  logoHeight = 30,
-  errorCorrectionLevel = "M"
+  logoHeight,
+  margin = 0,
+  errorCorrectionLevel = "H",
+  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
 }) => {
-  const [qrDataUrl, setQrDataUrl] = (0, import_react9.useState)("");
+  const [qrDataURL, setQrDataURL] = (0, import_react9.useState)(null);
+  const actualLogoWidth = logoWidth || Math.floor(size * 0.2);
+  const actualLogoHeight = logoHeight || actualLogoWidth;
   (0, import_react9.useEffect)(() => {
-    const generateQR = async () => {
+    if (typeof window === "undefined") return;
+    const generateQRCode = async () => {
       try {
-        const baseQrDataUrl = await generateQRAsBase64({
-          value,
-          size,
-          colorDark,
-          colorLight,
-          margin,
-          errorCorrectionLevel: typeof errorCorrectionLevel === "number" ? errorLevelMap[errorCorrectionLevel] || "M" : errorCorrectionLevel
+        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
         });
-        if (logo && logoWidth && logoHeight) {
-          const qrWithLogo = await addLogoToQR(baseQrDataUrl, logo, logoWidth, logoHeight);
-          setQrDataUrl(qrWithLogo);
-        } else {
-          setQrDataUrl(baseQrDataUrl);
-        }
+        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 capturing QR code:", error);
+          }
+        }, 100);
       } 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);
+        console.error("Error generating QR code:", error);
       }
     };
-    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 } }));
+    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 || "/placeholder.svg", style: { width: size, height: size } }), logo && /* @__PURE__ */ import_react8.default.createElement(
+    import_renderer8.View,
+    {
+      style: {
+        position: "absolute",
+        width: logoContainerSize,
+        height: logoContainerSize,
+        backgroundColor: logoBG || colorDataBG,
+        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 || "/placeholder.svg",
+        style: {
+          objectFit: "contain",
+          width: actualLogoWidth,
+          height: actualLogoHeight || actualLogoWidth
+        }
+      }
+    )
+  ), !logo && logoText && /* @__PURE__ */ import_react8.default.createElement(
+    import_renderer8.View,
+    {
+      style: {
+        position: "absolute",
+        backgroundColor: textBackgroundColor,
+        padding: textPadding,
+        borderRadius: 4,
+        left: moveText + centerPosition - 20,
+        // Approximate center
+        top: centerPosition - 10
+        // Approximate center
+      }
+    },
+    /* @__PURE__ */ import_react8.default.createElement(
+      import_renderer8.Text,
+      {
+        style: {
+          color: textColor,
+          fontSize,
+          fontFamily,
+          fontWeight: textBold ? "bold" : "normal"
+        }
+      },
+      logoText
+    )
+  ));
 };
 var QR_default = QR;
 
 // src/components/core/Lista.tsx
 var import_react10 = __toESM(require("react"));
 var import_renderer9 = require("@react-pdf/renderer");
-var styles9 = import_renderer9.StyleSheet.create({
+var styles8 = import_renderer9.StyleSheet.create({
   ul: {
     marginBottom: 10,
     paddingLeft: 15
@@ -725,7 +764,7 @@ var UL = ({ children, style, type = "disc" }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles9.ul, style] }, childrenWithBullets);
+  return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles8.ul, style] }, childrenWithBullets);
 };
 var OL = ({ children, style, type = "decimal", start = 1 }) => {
   const childrenWithNumbers = import_react10.default.Children.map(children, (child, index) => {
@@ -739,7 +778,7 @@ var OL = ({ children, style, type = "decimal", start = 1 }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles9.ol, style] }, childrenWithNumbers);
+  return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles8.ol, style] }, childrenWithNumbers);
 };
 var LI = ({ children, style, bulletType = "disc", isOrdered = false, index = 1, start = 1, value }) => {
   let marker;
@@ -749,7 +788,7 @@ var LI = ({ children, style, bulletType = "disc", isOrdered = false, index = 1,
   } else {
     marker = getBulletPoint(bulletType);
   }
-  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));
+  return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles8.li, style] }, /* @__PURE__ */ import_react10.default.createElement(import_renderer9.Text, { style: styles8.bulletPoint }, marker), /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: styles8.itemContent }, typeof children === "string" ? /* @__PURE__ */ import_react10.default.createElement(import_renderer9.Text, null, children) : children));
 };
 
 // src/components/core/index.tsx

package/dist/index.mjs

@@ -71,7 +71,7 @@ var LayoutPDF_default = LayoutPDF;
 
 // src/components/core/Img.tsx
 import React2 from "react";
-import { Image as Image2, StyleSheet as StyleSheet2 } from "@react-pdf/renderer";
+import { Image, 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(Image2, { src, style: [styles2.image, style] });
+  return /* @__PURE__ */ React2.createElement(Image, { src, style: [styles2.image, style] });
 };
 var Img_default = Img;
 
@@ -237,81 +237,100 @@ var styles5 = StyleSheet5.create({
     width: "100%",
     borderWidth: 1,
     borderColor: "#000",
-    overflow: "hidden",
     marginBottom: 20
   },
   thead: {
-    backgroundColor: "#f0f0f0"
+    backgroundColor: "#ccc"
   },
-  tbody: {},
   tr: {
-    flexDirection: "row",
-    borderBottomWidth: 1,
-    borderColor: "#000"
+    flexDirection: "row"
   },
-  th: {
-    paddingTop: 4,
+  textBold: {
     fontSize: 10,
     fontFamily: "Helvetica",
     fontWeight: "bold",
-    borderRight: 1,
-    borderColor: "#000",
-    textAlign: "center"
+    textAlign: "center",
+    paddingTop: 4
   },
-  td: {
-    paddingTop: 4,
-    paddingLeft: 8,
-    paddingRight: 8,
+  text: {
     fontSize: 10,
     fontFamily: "Helvetica",
-    borderRight: 1,
-    borderColor: "#000"
-    // borderTopWidth: 0,
-  },
-  cellSmall: {
-    width: "25%"
-  },
-  cellMedium: {
-    width: "33.33%"
+    paddingTop: 4,
+    paddingLeft: 8,
+    paddingRight: 8
   },
-  cellLarge: {
-    width: "50%"
+  zebraOdd: {
+    backgroundColor: "#eeeeee"
   }
 });
-var cellSizeMapping = {
-  small: styles5.cellSmall,
-  medium: styles5.cellMedium,
-  large: styles5.cellLarge
-};
-var Table = ({ children, style }) => {
-  return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.table, style] }, children);
-};
-var Thead = ({ children, style }) => {
-  return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.thead, style] }, children);
-};
+var Table = ({ children, style }) => /* @__PURE__ */ React5.createElement(View2, { style: [styles5.table, style] }, children);
+var Thead = ({ children, style }) => /* @__PURE__ */ React5.createElement(View2, { style: [styles5.thead, style] }, children);
 var Tbody = ({ children, style }) => {
-  return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.tbody, style] }, children);
-};
-var Tr = ({ children, style }) => {
-  return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.tr, style] }, children);
-};
-var Th = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
-  const spanWidth = colSpan ? `${100 / 3 * colSpan}%` : void 0;
-  const sizeStyle = cellSizeMapping[cellSize];
-  const customStyle = {
-    width: width || spanWidth || sizeStyle?.width,
+  const rows = React5.Children.toArray(children);
+  const count = rows.length;
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, rows.map(
+    (row, idx) => React5.cloneElement(row, {
+      isLastRow: idx === count - 1,
+      isOdd: idx % 2 === 1
+    })
+  ));
+};
+var Tr = ({
+  children,
+  style,
+  isLastRow = false,
+  isOdd = false
+}) => {
+  const elements = React5.Children.toArray(children);
+  const count = elements.length;
+  return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.tr, style] }, elements.map((child, idx) => {
+    const isLast = idx === count - 1;
+    const width = `${(100 / count).toFixed(2)}%`;
+    return React5.cloneElement(child, { width, isLast, isLastRow, isOdd });
+  }));
+};
+var Th = ({
+  children,
+  style,
+  width,
+  height,
+  colSpan,
+  isLast = false,
+  isLastRow = false
+}) => {
+  const baseWidth = typeof width === "string" && colSpan ? `${(parseFloat(width) * colSpan).toFixed(2)}%` : width;
+  const borders = {
+    borderRightWidth: isLast ? 0 : 1,
+    borderBottomWidth: isLastRow ? 0 : 1,
+    borderColor: "#000",
     ...height !== void 0 && { height }
   };
-  return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.th, customStyle, style] }, /* @__PURE__ */ React5.createElement(Text3, null, children));
+  return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.textBold, { width: baseWidth }, borders, style] }, /* @__PURE__ */ React5.createElement(Text3, null, children));
 };
-var Td = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
-  const spanWidth = colSpan ? `${100 / 3 * colSpan}%` : void 0;
-  const sizeStyle = cellSizeMapping[cellSize];
-  const customStyle = {
-    width: width || spanWidth || sizeStyle?.width,
+var Td = ({
+  children,
+  style,
+  width,
+  height,
+  colSpan,
+  isLast = false,
+  isLastRow = false,
+  isOdd = false
+}) => {
+  const baseWidth = typeof width === "string" && colSpan ? `${(parseFloat(width) * colSpan).toFixed(2)}%` : width;
+  const borders = {
+    borderRightWidth: isLast ? 0 : 1,
+    borderBottomWidth: isLastRow ? 0 : 1,
+    borderColor: "#000",
     ...height !== void 0 && { height }
   };
-  return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.td, customStyle, style] }, /* @__PURE__ */ React5.createElement(Text3, null, children));
+  return /* @__PURE__ */ React5.createElement(View2, { style: [
+    styles5.text,
+    isOdd && styles5.zebraOdd,
+    { width: baseWidth },
+    borders,
+    style
+  ] }, /* @__PURE__ */ React5.createElement(Text3, null, children));
 };
 
 // src/components/core/Grid.tsx
@@ -420,154 +439,174 @@ var Footer = ({ children, style, fixed = false }) => {
 
 // src/components/core/QR.tsx
 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 = "#282828",
-  colorLight = "#ffffff",
-  margin = 0,
-  errorCorrectionLevel = "M"
-}) => {
-  try {
-    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 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"
-};
+import { Image as Image2, View as View5, Text as Text5 } from "@react-pdf/renderer";
+import QRCodeStyling from "qr-code-styling";
 var QR = ({
-  value,
-  size = 150,
-  style,
-  colorDark = "#000000",
-  colorLight = "#ffffff",
-  margin = 0,
-  logo = "",
+  url,
+  size = 200,
+  colorData = "#000000",
+  colorDataBG = "#ffffff",
+  logo,
   logoWidth = 30,
-  logoHeight = 30,
-  errorCorrectionLevel = "M"
+  logoHeight,
+  margin = 0,
+  errorCorrectionLevel = "H",
+  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
 }) => {
-  const [qrDataUrl, setQrDataUrl] = useState("");
+  const [qrDataURL, setQrDataURL] = useState(null);
+  const actualLogoWidth = logoWidth || Math.floor(size * 0.2);
+  const actualLogoHeight = logoHeight || actualLogoWidth;
   useEffect(() => {
-    const generateQR = async () => {
+    if (typeof window === "undefined") return;
+    const generateQRCode = async () => {
       try {
-        const baseQrDataUrl = await generateQRAsBase64({
-          value,
-          size,
-          colorDark,
-          colorLight,
-          margin,
-          errorCorrectionLevel: typeof errorCorrectionLevel === "number" ? errorLevelMap[errorCorrectionLevel] || "M" : errorCorrectionLevel
+        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
         });
-        if (logo && logoWidth && logoHeight) {
-          const qrWithLogo = await addLogoToQR(baseQrDataUrl, logo, logoWidth, logoHeight);
-          setQrDataUrl(qrWithLogo);
-        } else {
-          setQrDataUrl(baseQrDataUrl);
-        }
+        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 capturing QR code:", error);
+          }
+        }, 100);
       } 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);
+        console.error("Error generating QR code:", error);
       }
     };
-    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 } }));
+    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 || "/placeholder.svg", style: { width: size, height: size } }), logo && /* @__PURE__ */ React8.createElement(
+    View5,
+    {
+      style: {
+        position: "absolute",
+        width: logoContainerSize,
+        height: logoContainerSize,
+        backgroundColor: logoBG || colorDataBG,
+        left: centerPosition - logoContainerSize / 2,
+        top: centerPosition - logoContainerSize / 2,
+        borderRadius: 100,
+        border: `5px solid ${colorData}`,
+        padding: 0
+      }
+    },
+    /* @__PURE__ */ React8.createElement(
+      Image2,
+      {
+        src: logo || "/placeholder.svg",
+        style: {
+          objectFit: "contain",
+          width: actualLogoWidth,
+          height: actualLogoHeight || actualLogoWidth
+        }
+      }
+    )
+  ), !logo && logoText && /* @__PURE__ */ React8.createElement(
+    View5,
+    {
+      style: {
+        position: "absolute",
+        backgroundColor: textBackgroundColor,
+        padding: textPadding,
+        borderRadius: 4,
+        left: moveText + centerPosition - 20,
+        // Approximate center
+        top: centerPosition - 10
+        // Approximate center
+      }
+    },
+    /* @__PURE__ */ React8.createElement(
+      Text5,
+      {
+        style: {
+          color: textColor,
+          fontSize,
+          fontFamily,
+          fontWeight: textBold ? "bold" : "normal"
+        }
+      },
+      logoText
+    )
+  ));
 };
 var QR_default = QR;
 
 // src/components/core/Lista.tsx
 import React9 from "react";
-import { View as View6, Text as Text5, StyleSheet as StyleSheet9 } from "@react-pdf/renderer";
-var styles9 = StyleSheet9.create({
+import { View as View6, Text as Text6, StyleSheet as StyleSheet8 } from "@react-pdf/renderer";
+var styles8 = StyleSheet8.create({
   ul: {
     marginBottom: 10,
     paddingLeft: 15
@@ -637,7 +676,7 @@ var UL = ({ children, style, type = "disc" }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ React9.createElement(View6, { style: [styles9.ul, style] }, childrenWithBullets);
+  return /* @__PURE__ */ React9.createElement(View6, { style: [styles8.ul, style] }, childrenWithBullets);
 };
 var OL = ({ children, style, type = "decimal", start = 1 }) => {
   const childrenWithNumbers = React9.Children.map(children, (child, index) => {
@@ -651,7 +690,7 @@ var OL = ({ children, style, type = "decimal", start = 1 }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ React9.createElement(View6, { style: [styles9.ol, style] }, childrenWithNumbers);
+  return /* @__PURE__ */ React9.createElement(View6, { style: [styles8.ol, style] }, childrenWithNumbers);
 };
 var LI = ({ children, style, bulletType = "disc", isOrdered = false, index = 1, start = 1, value }) => {
   let marker;
@@ -661,11 +700,11 @@ var LI = ({ children, style, bulletType = "disc", isOrdered = false, index = 1,
   } else {
     marker = getBulletPoint(bulletType);
   }
-  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));
+  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));
 };
 
 // src/components/core/index.tsx
-import { View as View7, Text as Text6, StyleSheet as StyleSheet10, Font } from "@react-pdf/renderer";
+import { View as View7, Text as Text7, StyleSheet as StyleSheet9, Font } from "@react-pdf/renderer";
 
 // src/functions/decodeBase64Pdf.ts
 var decodeBase64Pdf = (base64, fileName) => {
@@ -757,11 +796,11 @@ export {
   Small,
   Span,
   Strong,
-  StyleSheet10 as StyleSheet,
+  StyleSheet9 as StyleSheet,
   Table,
   Tbody,
   Td,
-  Text6 as Text,
+  Text7 as Text,
   Th,
   Thead,
   Tr,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-pdf-levelup",
-  "version": "2.0.20",
+  "version": "2.0.21",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -18,16 +18,18 @@
     "publicar": "npm run upVersion && npm run update-jsx && npm run build-lib && npm publish",
     "demo": "ts-node ./src/useExample/index.ts"
   },
+  "peerDependencies": {
+    "@react-pdf/renderer": "^4.3.0",
+    "react": "^18",
+    "react-dom": "^18",
+    "qr-code-styling": "^1.9.2"
+  },
   "dependencies": {
     "@babel/standalone": "^7.23.10",
     "@monaco-editor/react": "^4.7.0",
-    "@react-pdf/renderer": "^4.3.0",
-    "easyqrcodejs": "^4.6.2",
+    "i": "^0.3.7",
     "lucide-react": "^0.485.0",
-    "qrcode": "^1.5.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-pdf-levelup": "^2.0.18",
+    "npm": "^11.3.0",
     "react-router-dom": "^7.4.1",
     "rimraf": "^6.0.1",
     "ts-node": "^10.9.2"
@@ -35,7 +37,6 @@
   "devDependencies": {
     "@eslint/js": "^9.21.0",
     "@react-pdf/types": "^2.9.0",
-    "@types/qrcode": "^1.5.5",
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react": "^4.3.4",
@@ -44,6 +45,7 @@
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
     "json": "^11.0.0",
+    "react-pdf-levelup": "^2.0.18",
     "tsup": "^8.4.0",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1",