react-pdf-levelup 1.0.10 → 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.
package/dist/index.cjs CHANGED
@@ -76,9 +76,9 @@ __export(index_exports, {
76
76
  Img: () => Img_default,
77
77
  LayoutPDF: () => LayoutPDF_default,
78
78
  Left: () => Left,
79
- MakePDF: () => MakePDF_default,
80
79
  Mark: () => Mark,
81
80
  P: () => P,
81
+ QRCode: () => QRCode_default,
82
82
  Right: () => Right,
83
83
  Row: () => Row,
84
84
  Small: () => Small,
@@ -233,34 +233,10 @@ var LayoutPDF = ({
233
233
  };
234
234
  var LayoutPDF_default = LayoutPDF;
235
235
 
236
- // src/components/PDF/core/MakePDF.tsx
236
+ // src/components/PDF/core/Img.tsx
237
237
  var import_react2 = __toESM(require("react"), 1);
238
- var import_dynamic = __toESM(require("next/dynamic"), 1);
239
238
  var import_renderer2 = require("@react-pdf/renderer");
240
- var MakePDF = ({ namePDF = "documento.pdf", document, children = "Descargar PDF" }) => {
241
- if (typeof window === "undefined") {
242
- return null;
243
- }
244
- return /* @__PURE__ */ import_react2.default.createElement(import_renderer2.BlobProvider, { document }, ({ blob, url, loading, error }) => {
245
- if (loading) {
246
- return "Cargando documento...";
247
- }
248
- if (error) {
249
- return `Error: ${error.message}`;
250
- }
251
- let pdfURL = "";
252
- if (blob !== null) {
253
- pdfURL = URL.createObjectURL(blob);
254
- }
255
- return /* @__PURE__ */ import_react2.default.createElement("div", { className: "containerDownload" }, /* @__PURE__ */ import_react2.default.createElement("a", { href: pdfURL, download: namePDF }, children));
256
- });
257
- };
258
- var MakePDF_default = (0, import_dynamic.default)(() => Promise.resolve(MakePDF), { ssr: false });
259
-
260
- // src/components/PDF/core/Img.tsx
261
- var import_react3 = __toESM(require("react"), 1);
262
- var import_renderer3 = require("@react-pdf/renderer");
263
- var styles2 = import_renderer3.StyleSheet.create({
239
+ var styles2 = import_renderer2.StyleSheet.create({
264
240
  image: {
265
241
  width: "100%",
266
242
  height: "auto",
@@ -268,14 +244,14 @@ var styles2 = import_renderer3.StyleSheet.create({
268
244
  }
269
245
  });
270
246
  var Img = ({ src, alt, style }) => {
271
- return /* @__PURE__ */ import_react3.default.createElement(import_renderer3.Image, { src, style: [styles2.image, style] });
247
+ return /* @__PURE__ */ import_react2.default.createElement(import_renderer2.Image, { src, style: [styles2.image, style] });
272
248
  };
273
249
  var Img_default = Img;
274
250
 
275
251
  // src/components/PDF/core/Position.tsx
276
- var import_react4 = __toESM(require("react"), 1);
277
- var import_renderer4 = require("@react-pdf/renderer");
278
- var styles3 = import_renderer4.StyleSheet.create({
252
+ var import_react3 = __toESM(require("react"), 1);
253
+ var import_renderer3 = require("@react-pdf/renderer");
254
+ var styles3 = import_renderer3.StyleSheet.create({
279
255
  left: {
280
256
  textAlign: "left"
281
257
  },
@@ -287,19 +263,19 @@ var styles3 = import_renderer4.StyleSheet.create({
287
263
  }
288
264
  });
289
265
  var Left = ({ children, style }) => {
290
- return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.View, { style: [styles3.left, style] }, children);
266
+ return /* @__PURE__ */ import_react3.default.createElement(import_renderer3.View, { style: [styles3.left, style] }, children);
291
267
  };
292
268
  var Right = ({ children, style }) => {
293
- return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.View, { style: [styles3.right, style] }, children);
269
+ return /* @__PURE__ */ import_react3.default.createElement(import_renderer3.View, { style: [styles3.right, style] }, children);
294
270
  };
295
271
  var Center = ({ children, style }) => {
296
- return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.View, { style: [styles3.center, style] }, children);
272
+ return /* @__PURE__ */ import_react3.default.createElement(import_renderer3.View, { style: [styles3.center, style] }, children);
297
273
  };
298
274
 
299
275
  // src/components/PDF/core/Etiquetas.tsx
300
- var import_react5 = __toESM(require("react"), 1);
301
- var import_renderer5 = require("@react-pdf/renderer");
302
- var styles4 = import_renderer5.StyleSheet.create({
276
+ var import_react4 = __toESM(require("react"), 1);
277
+ var import_renderer4 = require("@react-pdf/renderer");
278
+ var styles4 = import_renderer4.StyleSheet.create({
303
279
  p: {
304
280
  fontSize: 12,
305
281
  marginBottom: 14,
@@ -369,58 +345,58 @@ var styles4 = import_renderer5.StyleSheet.create({
369
345
  }
370
346
  });
371
347
  var P = ({ children, style }) => {
372
- return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, { style: [styles4.p, style] }, children);
348
+ return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.p, style] }, children);
373
349
  };
374
350
  var H1 = ({ children, style }) => {
375
- return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, { style: [styles4.h1, style] }, children);
351
+ return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.h1, style] }, children);
376
352
  };
377
353
  var H2 = ({ children, style }) => {
378
- return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, { style: [styles4.h2, style] }, children);
354
+ return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.h2, style] }, children);
379
355
  };
380
356
  var H3 = ({ children, style }) => {
381
- return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, { style: [styles4.h3, style] }, children);
357
+ return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.h3, style] }, children);
382
358
  };
383
359
  var H4 = ({ children, style }) => {
384
- return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, { style: [styles4.h4, style] }, children);
360
+ return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.h4, style] }, children);
385
361
  };
386
362
  var H5 = ({ children, style }) => {
387
- return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, { style: [styles4.h5, style] }, children);
363
+ return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.h5, style] }, children);
388
364
  };
389
365
  var H6 = ({ children, style }) => {
390
- return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, { style: [styles4.h6, style] }, children);
366
+ return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.h6, style] }, children);
391
367
  };
392
368
  var Strong = ({ children, style }) => {
393
- return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, { style: [styles4.strong, style] }, children);
369
+ return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.strong, style] }, children);
394
370
  };
395
371
  var Em = ({ children, style }) => {
396
- return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, { style: [styles4.em, style] }, children);
372
+ return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.em, style] }, children);
397
373
  };
398
374
  var U = ({ children, style }) => {
399
- return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, { style: [styles4.u, style] }, children);
375
+ return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.u, style] }, children);
400
376
  };
401
377
  var Small = ({ children, style }) => {
402
- return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, { style: [styles4.small, style] }, children);
378
+ return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.small, style] }, children);
403
379
  };
404
380
  var Blockquote = ({ children, style }) => {
405
- return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, { style: [styles4.blockquote, style] }, children);
381
+ return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.blockquote, style] }, children);
406
382
  };
407
383
  var Mark = ({ children, style }) => {
408
- return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, { style: [styles4.mark, style] }, children);
384
+ return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.mark, style] }, children);
409
385
  };
410
386
  var A = ({ children, style, href }) => {
411
- return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Link, { src: href, style: [styles4.A, style] }, children);
387
+ return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Link, { src: href, style: [styles4.A, style] }, children);
412
388
  };
413
389
  var BR = ({ style }) => {
414
- return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, { style: [styles4.br, style] }, "\n");
390
+ return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [styles4.br, style] }, "\n");
415
391
  };
416
392
  var Span = ({ children, style }) => {
417
- return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, { style: [style] }, children);
393
+ return /* @__PURE__ */ import_react4.default.createElement(import_renderer4.Text, { style: [style] }, children);
418
394
  };
419
395
 
420
396
  // src/components/PDF/core/Tablet.tsx
421
- var import_react6 = __toESM(require("react"), 1);
422
- var import_renderer6 = require("@react-pdf/renderer");
423
- var styles5 = import_renderer6.StyleSheet.create({
397
+ var import_react5 = __toESM(require("react"), 1);
398
+ var import_renderer5 = require("@react-pdf/renderer");
399
+ var styles5 = import_renderer5.StyleSheet.create({
424
400
  table: {
425
401
  width: "100%",
426
402
  borderWidth: 1,
@@ -471,16 +447,16 @@ var cellSizeMapping = {
471
447
  large: styles5.cellLarge
472
448
  };
473
449
  var Table = ({ children, style }) => {
474
- return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles5.table, style] }, children);
450
+ return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.table, style] }, children);
475
451
  };
476
452
  var Thead = ({ children, style }) => {
477
- return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles5.thead, style] }, children);
453
+ return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.thead, style] }, children);
478
454
  };
479
455
  var Tbody = ({ children, style }) => {
480
- return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles5.tbody, style] }, children);
456
+ return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.tbody, style] }, children);
481
457
  };
482
458
  var Tr = ({ children, style }) => {
483
- return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles5.tr, style] }, children);
459
+ return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.tr, style] }, children);
484
460
  };
485
461
  var Th = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
486
462
  const spanWidth = colSpan ? `${100 / 3 * colSpan}%` : void 0;
@@ -488,7 +464,7 @@ var Th = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
488
464
  const customStyle = __spreadValues({
489
465
  width: width || spanWidth || (sizeStyle == null ? void 0 : sizeStyle.width)
490
466
  }, height !== void 0 && { height });
491
- return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles5.th, customStyle, style] }, /* @__PURE__ */ import_react6.default.createElement(import_renderer6.Text, null, children));
467
+ return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.th, customStyle, style] }, /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, null, children));
492
468
  };
493
469
  var Td = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
494
470
  const spanWidth = colSpan ? `${100 / 3 * colSpan}%` : void 0;
@@ -496,13 +472,13 @@ var Td = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
496
472
  const customStyle = __spreadValues({
497
473
  width: width || spanWidth || (sizeStyle == null ? void 0 : sizeStyle.width)
498
474
  }, height !== void 0 && { height });
499
- return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles5.td, customStyle, style] }, /* @__PURE__ */ import_react6.default.createElement(import_renderer6.Text, null, children));
475
+ return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.td, customStyle, style] }, /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, null, children));
500
476
  };
501
477
 
502
478
  // src/components/PDF/core/Grid.tsx
503
- var import_react7 = __toESM(require("react"), 1);
504
- var import_renderer7 = require("@react-pdf/renderer");
505
- var styles6 = import_renderer7.StyleSheet.create({
479
+ var import_react6 = __toESM(require("react"), 1);
480
+ var import_renderer6 = require("@react-pdf/renderer");
481
+ var styles6 = import_renderer6.StyleSheet.create({
506
482
  container: {
507
483
  width: "100%",
508
484
  paddingHorizontal: 20
@@ -530,52 +506,52 @@ var styles6 = import_renderer7.StyleSheet.create({
530
506
  col12: { width: "100%" }
531
507
  });
532
508
  var Container = ({ children, style }) => {
533
- return /* @__PURE__ */ import_react7.default.createElement(import_renderer7.View, { style: [styles6.container, style] }, children);
509
+ return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.container, style] }, children);
534
510
  };
535
511
  var Row = ({ children, style }) => {
536
- return /* @__PURE__ */ import_react7.default.createElement(import_renderer7.View, { style: [styles6.row, style] }, children);
512
+ return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.row, style] }, children);
537
513
  };
538
514
  var Col1 = ({ children, style }) => {
539
- return /* @__PURE__ */ import_react7.default.createElement(import_renderer7.View, { style: [styles6.col, styles6.col1, style] }, children);
515
+ return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col1, style] }, children);
540
516
  };
541
517
  var Col2 = ({ children, style }) => {
542
- return /* @__PURE__ */ import_react7.default.createElement(import_renderer7.View, { style: [styles6.col, styles6.col2, style] }, children);
518
+ return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col2, style] }, children);
543
519
  };
544
520
  var Col3 = ({ children, style }) => {
545
- return /* @__PURE__ */ import_react7.default.createElement(import_renderer7.View, { style: [styles6.col, styles6.col3, style] }, children);
521
+ return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col3, style] }, children);
546
522
  };
547
523
  var Col4 = ({ children, style }) => {
548
- return /* @__PURE__ */ import_react7.default.createElement(import_renderer7.View, { style: [styles6.col, styles6.col4, style] }, children);
524
+ return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col4, style] }, children);
549
525
  };
550
526
  var Col5 = ({ children, style }) => {
551
- return /* @__PURE__ */ import_react7.default.createElement(import_renderer7.View, { style: [styles6.col, styles6.col5, style] }, children);
527
+ return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col5, style] }, children);
552
528
  };
553
529
  var Col6 = ({ children, style }) => {
554
- return /* @__PURE__ */ import_react7.default.createElement(import_renderer7.View, { style: [styles6.col, styles6.col6, style] }, children);
530
+ return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col6, style] }, children);
555
531
  };
556
532
  var Col7 = ({ children, style }) => {
557
- return /* @__PURE__ */ import_react7.default.createElement(import_renderer7.View, { style: [styles6.col, styles6.col7, style] }, children);
533
+ return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col7, style] }, children);
558
534
  };
559
535
  var Col8 = ({ children, style }) => {
560
- return /* @__PURE__ */ import_react7.default.createElement(import_renderer7.View, { style: [styles6.col, styles6.col8, style] }, children);
536
+ return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col8, style] }, children);
561
537
  };
562
538
  var Col9 = ({ children, style }) => {
563
- return /* @__PURE__ */ import_react7.default.createElement(import_renderer7.View, { style: [styles6.col, styles6.col9, style] }, children);
539
+ return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col9, style] }, children);
564
540
  };
565
541
  var Col10 = ({ children, style }) => {
566
- return /* @__PURE__ */ import_react7.default.createElement(import_renderer7.View, { style: [styles6.col, styles6.col10, style] }, children);
542
+ return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col10, style] }, children);
567
543
  };
568
544
  var Col11 = ({ children, style }) => {
569
- return /* @__PURE__ */ import_react7.default.createElement(import_renderer7.View, { style: [styles6.col, styles6.col11, style] }, children);
545
+ return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col11, style] }, children);
570
546
  };
571
547
  var Col12 = ({ children, style }) => {
572
- return /* @__PURE__ */ import_react7.default.createElement(import_renderer7.View, { style: [styles6.col, styles6.col12, style] }, children);
548
+ return /* @__PURE__ */ import_react6.default.createElement(import_renderer6.View, { style: [styles6.col, styles6.col12, style] }, children);
573
549
  };
574
550
 
575
551
  // src/components/PDF/core/PageElements.tsx
576
- var import_react8 = __toESM(require("react"), 1);
577
- var import_renderer8 = require("@react-pdf/renderer");
578
- var styles7 = import_renderer8.StyleSheet.create({
552
+ var import_react7 = __toESM(require("react"), 1);
553
+ var import_renderer7 = require("@react-pdf/renderer");
554
+ var styles7 = import_renderer7.StyleSheet.create({
579
555
  header: {
580
556
  position: "absolute",
581
557
  top: 20,
@@ -598,11 +574,150 @@ var styles7 = import_renderer8.StyleSheet.create({
598
574
  }
599
575
  });
600
576
  var Header = ({ children, style, fixed = false }) => {
601
- return /* @__PURE__ */ import_react8.default.createElement(import_renderer8.View, { style: [styles7.header, style], fixed }, typeof children === "string" ? /* @__PURE__ */ import_react8.default.createElement(import_renderer8.Text, null, children) : children);
577
+ return /* @__PURE__ */ import_react7.default.createElement(import_renderer7.View, { style: [styles7.header, style], fixed }, typeof children === "string" ? /* @__PURE__ */ import_react7.default.createElement(import_renderer7.Text, null, children) : children);
602
578
  };
603
579
  var Footer = ({ children, style, fixed = false }) => {
604
- return /* @__PURE__ */ import_react8.default.createElement(import_renderer8.View, { style: [styles7.footer, style], fixed }, typeof children === "string" ? /* @__PURE__ */ import_react8.default.createElement(import_renderer8.Text, null, children) : children);
580
+ return /* @__PURE__ */ import_react7.default.createElement(import_renderer7.View, { style: [styles7.footer, style], fixed }, typeof children === "string" ? /* @__PURE__ */ import_react7.default.createElement(import_renderer7.Text, null, children) : children);
581
+ };
582
+
583
+ // src/components/PDF/core/QRCode.tsx
584
+ var import_react8 = __toESM(require("react"), 1);
585
+ var import_react9 = require("react");
586
+ var import_renderer8 = require("@react-pdf/renderer");
587
+ var import_qr_code_styling = __toESM(require("qr-code-styling"), 1);
588
+ var styles8 = import_renderer8.StyleSheet.create({
589
+ qrContainer: {
590
+ position: "relative",
591
+ alignItems: "center",
592
+ justifyContent: "center"
593
+ }
594
+ });
595
+ var QRCode = ({
596
+ value,
597
+ size = 150,
598
+ dotsColor = "#000000",
599
+ dotsGradient,
600
+ backgroundColor = "#ffffff",
601
+ dotsType = "square",
602
+ cornersType = "square",
603
+ cornersSquareColor,
604
+ cornersDotColor,
605
+ logo,
606
+ logoSize = 30,
607
+ logoBackgroundColor,
608
+ logoMargin = 5,
609
+ errorCorrectionLevel = "M",
610
+ margin = 10,
611
+ style
612
+ }) => {
613
+ const [qrDataURL, setQrDataURL] = (0, import_react9.useState)("");
614
+ const qrCodeRef = (0, import_react9.useRef)(null);
615
+ (0, import_react9.useEffect)(() => {
616
+ if (typeof window !== "undefined" && !qrCodeRef.current) {
617
+ qrCodeRef.current = new import_qr_code_styling.default({
618
+ width: 300,
619
+ height: 300,
620
+ type: "canvas",
621
+ data: "Initial",
622
+ dotsOptions: {
623
+ type: "square",
624
+ color: "#000000"
625
+ },
626
+ cornersSquareOptions: {
627
+ type: "square"
628
+ },
629
+ cornersDotOptions: {
630
+ type: "square"
631
+ },
632
+ backgroundOptions: {
633
+ color: "#ffffff"
634
+ },
635
+ imageOptions: {
636
+ crossOrigin: "anonymous",
637
+ margin: 5
638
+ }
639
+ });
640
+ }
641
+ const generateQRCode = async () => {
642
+ if (typeof window === "undefined" || !qrCodeRef.current) return;
643
+ try {
644
+ const options = {
645
+ width: size,
646
+ height: size,
647
+ data: value,
648
+ margin,
649
+ qrOptions: {
650
+ errorCorrectionLevel
651
+ },
652
+ dotsOptions: {
653
+ type: dotsType,
654
+ color: dotsColor
655
+ },
656
+ cornersSquareOptions: {
657
+ type: cornersType,
658
+ color: cornersSquareColor || dotsColor
659
+ },
660
+ cornersDotOptions: {
661
+ type: cornersType,
662
+ color: cornersDotColor || dotsColor
663
+ },
664
+ backgroundOptions: {
665
+ color: backgroundColor
666
+ }
667
+ };
668
+ if (dotsGradient && dotsGradient.length === 2) {
669
+ options.dotsOptions.gradient = {
670
+ type: "linear",
671
+ colorStops: [
672
+ { offset: 0, color: dotsGradient[0] },
673
+ { offset: 1, color: dotsGradient[1] }
674
+ ]
675
+ };
676
+ }
677
+ if (logo) {
678
+ options.image = logo;
679
+ options.imageOptions = {
680
+ hideBackgroundDots: true,
681
+ imageSize: logoSize / size,
682
+ crossOrigin: "anonymous",
683
+ margin: logoMargin
684
+ };
685
+ if (logoBackgroundColor) {
686
+ options.imageOptions.margin = logoMargin;
687
+ }
688
+ }
689
+ qrCodeRef.current.update(options);
690
+ const dataURL = await qrCodeRef.current.getDataUrl();
691
+ setQrDataURL(dataURL);
692
+ } catch (error) {
693
+ console.error("Error generating QR code:", error);
694
+ }
695
+ };
696
+ generateQRCode();
697
+ }, [
698
+ value,
699
+ size,
700
+ dotsColor,
701
+ dotsGradient,
702
+ backgroundColor,
703
+ dotsType,
704
+ cornersType,
705
+ cornersSquareColor,
706
+ cornersDotColor,
707
+ logo,
708
+ logoSize,
709
+ logoBackgroundColor,
710
+ logoMargin,
711
+ errorCorrectionLevel,
712
+ margin
713
+ ]);
714
+ const containerStyle = __spreadValues(__spreadProps(__spreadValues({}, styles8.qrContainer), {
715
+ width: size,
716
+ height: size
717
+ }), style);
718
+ return /* @__PURE__ */ import_react8.default.createElement(import_renderer8.View, { style: containerStyle }, qrDataURL ? /* @__PURE__ */ import_react8.default.createElement(import_renderer8.Image, { src: qrDataURL || "/placeholder.svg", style: { width: size, height: size } }) : null);
605
719
  };
720
+ var QRCode_default = QRCode;
606
721
  // Annotate the CommonJS export names for ESM import in node:
607
722
  0 && (module.exports = {
608
723
  A,
@@ -634,9 +749,9 @@ var Footer = ({ children, style, fixed = false }) => {
634
749
  Img,
635
750
  LayoutPDF,
636
751
  Left,
637
- MakePDF,
638
752
  Mark,
639
753
  P,
754
+ QRCode,
640
755
  Right,
641
756
  Row,
642
757
  Small,
package/dist/index.d.cts CHANGED
@@ -20,13 +20,6 @@ interface LayoutPDFProps {
20
20
  }
21
21
  declare const LayoutPDF: React.FC<LayoutPDFProps>;
22
22
 
23
- interface MakePDFProps {
24
- namePDF?: string;
25
- document: React.ReactElement;
26
- children?: React.ReactNode;
27
- }
28
- declare const _default: React.ComponentType<MakePDFProps>;
29
-
30
23
  interface ImgProps {
31
24
  src?: string;
32
25
  alt?: string;
@@ -120,4 +113,24 @@ interface PageElementProps {
120
113
  declare const Header: React.FC<PageElementProps>;
121
114
  declare const Footer: React.FC<PageElementProps>;
122
115
 
123
- export { A, BR, Blockquote, Center, Col1, Col10, Col11, Col12, Col2, Col3, Col4, Col5, Col6, Col7, Col8, Col9, Container, Em, Footer, H1, H2, H3, H4, H5, H6, Header, Img, LayoutPDF, Left, _default as MakePDF, Mark, P, Right, Row, Small, Span, Strong, Table, Tbody, Td, Th, Thead, Tr, U };
116
+ interface QRCodeProps {
117
+ value: string;
118
+ size?: number;
119
+ dotsColor?: string;
120
+ dotsGradient?: [string, string];
121
+ backgroundColor?: string;
122
+ dotsType?: "square" | "dots" | "rounded" | "classy" | "classy-rounded" | "extra-rounded";
123
+ cornersType?: "square" | "dots" | "rounded" | "extra-rounded";
124
+ cornersSquareColor?: string;
125
+ cornersDotColor?: string;
126
+ logo?: string;
127
+ logoSize?: number;
128
+ logoBackgroundColor?: string;
129
+ logoMargin?: number;
130
+ errorCorrectionLevel?: "L" | "M" | "Q" | "H";
131
+ margin?: number;
132
+ style?: any;
133
+ }
134
+ declare const QRCode: React.FC<QRCodeProps>;
135
+
136
+ export { A, BR, Blockquote, Center, Col1, Col10, Col11, Col12, Col2, Col3, Col4, Col5, Col6, Col7, Col8, Col9, Container, Em, Footer, H1, H2, H3, H4, H5, H6, Header, Img, LayoutPDF, Left, Mark, P, QRCode, Right, Row, Small, Span, Strong, Table, Tbody, Td, Th, Thead, Tr, U };
package/dist/index.d.ts CHANGED
@@ -20,13 +20,6 @@ interface LayoutPDFProps {
20
20
  }
21
21
  declare const LayoutPDF: React.FC<LayoutPDFProps>;
22
22
 
23
- interface MakePDFProps {
24
- namePDF?: string;
25
- document: React.ReactElement;
26
- children?: React.ReactNode;
27
- }
28
- declare const _default: React.ComponentType<MakePDFProps>;
29
-
30
23
  interface ImgProps {
31
24
  src?: string;
32
25
  alt?: string;
@@ -120,4 +113,24 @@ interface PageElementProps {
120
113
  declare const Header: React.FC<PageElementProps>;
121
114
  declare const Footer: React.FC<PageElementProps>;
122
115
 
123
- export { A, BR, Blockquote, Center, Col1, Col10, Col11, Col12, Col2, Col3, Col4, Col5, Col6, Col7, Col8, Col9, Container, Em, Footer, H1, H2, H3, H4, H5, H6, Header, Img, LayoutPDF, Left, _default as MakePDF, Mark, P, Right, Row, Small, Span, Strong, Table, Tbody, Td, Th, Thead, Tr, U };
116
+ interface QRCodeProps {
117
+ value: string;
118
+ size?: number;
119
+ dotsColor?: string;
120
+ dotsGradient?: [string, string];
121
+ backgroundColor?: string;
122
+ dotsType?: "square" | "dots" | "rounded" | "classy" | "classy-rounded" | "extra-rounded";
123
+ cornersType?: "square" | "dots" | "rounded" | "extra-rounded";
124
+ cornersSquareColor?: string;
125
+ cornersDotColor?: string;
126
+ logo?: string;
127
+ logoSize?: number;
128
+ logoBackgroundColor?: string;
129
+ logoMargin?: number;
130
+ errorCorrectionLevel?: "L" | "M" | "Q" | "H";
131
+ margin?: number;
132
+ style?: any;
133
+ }
134
+ declare const QRCode: React.FC<QRCodeProps>;
135
+
136
+ export { A, BR, Blockquote, Center, Col1, Col10, Col11, Col12, Col2, Col3, Col4, Col5, Col6, Col7, Col8, Col9, Container, Em, Footer, H1, H2, H3, H4, H5, H6, Header, Img, LayoutPDF, Left, Mark, P, QRCode, Right, Row, Small, Span, Strong, Table, Tbody, Td, Th, Thead, Tr, U };
package/dist/index.js CHANGED
@@ -157,32 +157,8 @@ var LayoutPDF = ({
157
157
  };
158
158
  var LayoutPDF_default = LayoutPDF;
159
159
 
160
- // src/components/PDF/core/MakePDF.tsx
161
- import React2 from "react";
162
- import dynamic from "next/dynamic";
163
- import { BlobProvider } from "@react-pdf/renderer";
164
- var MakePDF = ({ namePDF = "documento.pdf", document, children = "Descargar PDF" }) => {
165
- if (typeof window === "undefined") {
166
- return null;
167
- }
168
- return /* @__PURE__ */ React2.createElement(BlobProvider, { document }, ({ blob, url, loading, error }) => {
169
- if (loading) {
170
- return "Cargando documento...";
171
- }
172
- if (error) {
173
- return `Error: ${error.message}`;
174
- }
175
- let pdfURL = "";
176
- if (blob !== null) {
177
- pdfURL = URL.createObjectURL(blob);
178
- }
179
- return /* @__PURE__ */ React2.createElement("div", { className: "containerDownload" }, /* @__PURE__ */ React2.createElement("a", { href: pdfURL, download: namePDF }, children));
180
- });
181
- };
182
- var MakePDF_default = dynamic(() => Promise.resolve(MakePDF), { ssr: false });
183
-
184
160
  // src/components/PDF/core/Img.tsx
185
- import React3 from "react";
161
+ import React2 from "react";
186
162
  import { Image, StyleSheet as StyleSheet2 } from "@react-pdf/renderer";
187
163
  var styles2 = StyleSheet2.create({
188
164
  image: {
@@ -192,12 +168,12 @@ var styles2 = StyleSheet2.create({
192
168
  }
193
169
  });
194
170
  var Img = ({ src, alt, style }) => {
195
- return /* @__PURE__ */ React3.createElement(Image, { src, style: [styles2.image, style] });
171
+ return /* @__PURE__ */ React2.createElement(Image, { src, style: [styles2.image, style] });
196
172
  };
197
173
  var Img_default = Img;
198
174
 
199
175
  // src/components/PDF/core/Position.tsx
200
- import React4 from "react";
176
+ import React3 from "react";
201
177
  import { View, StyleSheet as StyleSheet3 } from "@react-pdf/renderer";
202
178
  var styles3 = StyleSheet3.create({
203
179
  left: {
@@ -211,17 +187,17 @@ var styles3 = StyleSheet3.create({
211
187
  }
212
188
  });
213
189
  var Left = ({ children, style }) => {
214
- return /* @__PURE__ */ React4.createElement(View, { style: [styles3.left, style] }, children);
190
+ return /* @__PURE__ */ React3.createElement(View, { style: [styles3.left, style] }, children);
215
191
  };
216
192
  var Right = ({ children, style }) => {
217
- return /* @__PURE__ */ React4.createElement(View, { style: [styles3.right, style] }, children);
193
+ return /* @__PURE__ */ React3.createElement(View, { style: [styles3.right, style] }, children);
218
194
  };
219
195
  var Center = ({ children, style }) => {
220
- return /* @__PURE__ */ React4.createElement(View, { style: [styles3.center, style] }, children);
196
+ return /* @__PURE__ */ React3.createElement(View, { style: [styles3.center, style] }, children);
221
197
  };
222
198
 
223
199
  // src/components/PDF/core/Etiquetas.tsx
224
- import React5 from "react";
200
+ import React4 from "react";
225
201
  import { Text as Text2, StyleSheet as StyleSheet4, Link } from "@react-pdf/renderer";
226
202
  var styles4 = StyleSheet4.create({
227
203
  p: {
@@ -293,56 +269,56 @@ var styles4 = StyleSheet4.create({
293
269
  }
294
270
  });
295
271
  var P = ({ children, style }) => {
296
- return /* @__PURE__ */ React5.createElement(Text2, { style: [styles4.p, style] }, children);
272
+ return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.p, style] }, children);
297
273
  };
298
274
  var H1 = ({ children, style }) => {
299
- return /* @__PURE__ */ React5.createElement(Text2, { style: [styles4.h1, style] }, children);
275
+ return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.h1, style] }, children);
300
276
  };
301
277
  var H2 = ({ children, style }) => {
302
- return /* @__PURE__ */ React5.createElement(Text2, { style: [styles4.h2, style] }, children);
278
+ return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.h2, style] }, children);
303
279
  };
304
280
  var H3 = ({ children, style }) => {
305
- return /* @__PURE__ */ React5.createElement(Text2, { style: [styles4.h3, style] }, children);
281
+ return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.h3, style] }, children);
306
282
  };
307
283
  var H4 = ({ children, style }) => {
308
- return /* @__PURE__ */ React5.createElement(Text2, { style: [styles4.h4, style] }, children);
284
+ return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.h4, style] }, children);
309
285
  };
310
286
  var H5 = ({ children, style }) => {
311
- return /* @__PURE__ */ React5.createElement(Text2, { style: [styles4.h5, style] }, children);
287
+ return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.h5, style] }, children);
312
288
  };
313
289
  var H6 = ({ children, style }) => {
314
- return /* @__PURE__ */ React5.createElement(Text2, { style: [styles4.h6, style] }, children);
290
+ return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.h6, style] }, children);
315
291
  };
316
292
  var Strong = ({ children, style }) => {
317
- return /* @__PURE__ */ React5.createElement(Text2, { style: [styles4.strong, style] }, children);
293
+ return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.strong, style] }, children);
318
294
  };
319
295
  var Em = ({ children, style }) => {
320
- return /* @__PURE__ */ React5.createElement(Text2, { style: [styles4.em, style] }, children);
296
+ return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.em, style] }, children);
321
297
  };
322
298
  var U = ({ children, style }) => {
323
- return /* @__PURE__ */ React5.createElement(Text2, { style: [styles4.u, style] }, children);
299
+ return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.u, style] }, children);
324
300
  };
325
301
  var Small = ({ children, style }) => {
326
- return /* @__PURE__ */ React5.createElement(Text2, { style: [styles4.small, style] }, children);
302
+ return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.small, style] }, children);
327
303
  };
328
304
  var Blockquote = ({ children, style }) => {
329
- return /* @__PURE__ */ React5.createElement(Text2, { style: [styles4.blockquote, style] }, children);
305
+ return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.blockquote, style] }, children);
330
306
  };
331
307
  var Mark = ({ children, style }) => {
332
- return /* @__PURE__ */ React5.createElement(Text2, { style: [styles4.mark, style] }, children);
308
+ return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.mark, style] }, children);
333
309
  };
334
310
  var A = ({ children, style, href }) => {
335
- return /* @__PURE__ */ React5.createElement(Link, { src: href, style: [styles4.A, style] }, children);
311
+ return /* @__PURE__ */ React4.createElement(Link, { src: href, style: [styles4.A, style] }, children);
336
312
  };
337
313
  var BR = ({ style }) => {
338
- return /* @__PURE__ */ React5.createElement(Text2, { style: [styles4.br, style] }, "\n");
314
+ return /* @__PURE__ */ React4.createElement(Text2, { style: [styles4.br, style] }, "\n");
339
315
  };
340
316
  var Span = ({ children, style }) => {
341
- return /* @__PURE__ */ React5.createElement(Text2, { style: [style] }, children);
317
+ return /* @__PURE__ */ React4.createElement(Text2, { style: [style] }, children);
342
318
  };
343
319
 
344
320
  // src/components/PDF/core/Tablet.tsx
345
- import React6 from "react";
321
+ import React5 from "react";
346
322
  import { View as View2, Text as Text3, StyleSheet as StyleSheet5 } from "@react-pdf/renderer";
347
323
  var styles5 = StyleSheet5.create({
348
324
  table: {
@@ -395,16 +371,16 @@ var cellSizeMapping = {
395
371
  large: styles5.cellLarge
396
372
  };
397
373
  var Table = ({ children, style }) => {
398
- return /* @__PURE__ */ React6.createElement(View2, { style: [styles5.table, style] }, children);
374
+ return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.table, style] }, children);
399
375
  };
400
376
  var Thead = ({ children, style }) => {
401
- return /* @__PURE__ */ React6.createElement(View2, { style: [styles5.thead, style] }, children);
377
+ return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.thead, style] }, children);
402
378
  };
403
379
  var Tbody = ({ children, style }) => {
404
- return /* @__PURE__ */ React6.createElement(View2, { style: [styles5.tbody, style] }, children);
380
+ return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.tbody, style] }, children);
405
381
  };
406
382
  var Tr = ({ children, style }) => {
407
- return /* @__PURE__ */ React6.createElement(View2, { style: [styles5.tr, style] }, children);
383
+ return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.tr, style] }, children);
408
384
  };
409
385
  var Th = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
410
386
  const spanWidth = colSpan ? `${100 / 3 * colSpan}%` : void 0;
@@ -412,7 +388,7 @@ var Th = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
412
388
  const customStyle = __spreadValues({
413
389
  width: width || spanWidth || (sizeStyle == null ? void 0 : sizeStyle.width)
414
390
  }, height !== void 0 && { height });
415
- return /* @__PURE__ */ React6.createElement(View2, { style: [styles5.th, customStyle, style] }, /* @__PURE__ */ React6.createElement(Text3, null, children));
391
+ return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.th, customStyle, style] }, /* @__PURE__ */ React5.createElement(Text3, null, children));
416
392
  };
417
393
  var Td = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
418
394
  const spanWidth = colSpan ? `${100 / 3 * colSpan}%` : void 0;
@@ -420,11 +396,11 @@ var Td = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
420
396
  const customStyle = __spreadValues({
421
397
  width: width || spanWidth || (sizeStyle == null ? void 0 : sizeStyle.width)
422
398
  }, height !== void 0 && { height });
423
- return /* @__PURE__ */ React6.createElement(View2, { style: [styles5.td, customStyle, style] }, /* @__PURE__ */ React6.createElement(Text3, null, children));
399
+ return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.td, customStyle, style] }, /* @__PURE__ */ React5.createElement(Text3, null, children));
424
400
  };
425
401
 
426
402
  // src/components/PDF/core/Grid.tsx
427
- import React7 from "react";
403
+ import React6 from "react";
428
404
  import { View as View3, StyleSheet as StyleSheet6 } from "@react-pdf/renderer";
429
405
  var styles6 = StyleSheet6.create({
430
406
  container: {
@@ -454,50 +430,50 @@ var styles6 = StyleSheet6.create({
454
430
  col12: { width: "100%" }
455
431
  });
456
432
  var Container = ({ children, style }) => {
457
- return /* @__PURE__ */ React7.createElement(View3, { style: [styles6.container, style] }, children);
433
+ return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.container, style] }, children);
458
434
  };
459
435
  var Row = ({ children, style }) => {
460
- return /* @__PURE__ */ React7.createElement(View3, { style: [styles6.row, style] }, children);
436
+ return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.row, style] }, children);
461
437
  };
462
438
  var Col1 = ({ children, style }) => {
463
- return /* @__PURE__ */ React7.createElement(View3, { style: [styles6.col, styles6.col1, style] }, children);
439
+ return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col1, style] }, children);
464
440
  };
465
441
  var Col2 = ({ children, style }) => {
466
- return /* @__PURE__ */ React7.createElement(View3, { style: [styles6.col, styles6.col2, style] }, children);
442
+ return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col2, style] }, children);
467
443
  };
468
444
  var Col3 = ({ children, style }) => {
469
- return /* @__PURE__ */ React7.createElement(View3, { style: [styles6.col, styles6.col3, style] }, children);
445
+ return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col3, style] }, children);
470
446
  };
471
447
  var Col4 = ({ children, style }) => {
472
- return /* @__PURE__ */ React7.createElement(View3, { style: [styles6.col, styles6.col4, style] }, children);
448
+ return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col4, style] }, children);
473
449
  };
474
450
  var Col5 = ({ children, style }) => {
475
- return /* @__PURE__ */ React7.createElement(View3, { style: [styles6.col, styles6.col5, style] }, children);
451
+ return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col5, style] }, children);
476
452
  };
477
453
  var Col6 = ({ children, style }) => {
478
- return /* @__PURE__ */ React7.createElement(View3, { style: [styles6.col, styles6.col6, style] }, children);
454
+ return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col6, style] }, children);
479
455
  };
480
456
  var Col7 = ({ children, style }) => {
481
- return /* @__PURE__ */ React7.createElement(View3, { style: [styles6.col, styles6.col7, style] }, children);
457
+ return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col7, style] }, children);
482
458
  };
483
459
  var Col8 = ({ children, style }) => {
484
- return /* @__PURE__ */ React7.createElement(View3, { style: [styles6.col, styles6.col8, style] }, children);
460
+ return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col8, style] }, children);
485
461
  };
486
462
  var Col9 = ({ children, style }) => {
487
- return /* @__PURE__ */ React7.createElement(View3, { style: [styles6.col, styles6.col9, style] }, children);
463
+ return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col9, style] }, children);
488
464
  };
489
465
  var Col10 = ({ children, style }) => {
490
- return /* @__PURE__ */ React7.createElement(View3, { style: [styles6.col, styles6.col10, style] }, children);
466
+ return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col10, style] }, children);
491
467
  };
492
468
  var Col11 = ({ children, style }) => {
493
- return /* @__PURE__ */ React7.createElement(View3, { style: [styles6.col, styles6.col11, style] }, children);
469
+ return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col11, style] }, children);
494
470
  };
495
471
  var Col12 = ({ children, style }) => {
496
- return /* @__PURE__ */ React7.createElement(View3, { style: [styles6.col, styles6.col12, style] }, children);
472
+ return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col12, style] }, children);
497
473
  };
498
474
 
499
475
  // src/components/PDF/core/PageElements.tsx
500
- import React8 from "react";
476
+ import React7 from "react";
501
477
  import { Text as Text4, View as View4, StyleSheet as StyleSheet7 } from "@react-pdf/renderer";
502
478
  var styles7 = StyleSheet7.create({
503
479
  header: {
@@ -522,11 +498,150 @@ var styles7 = StyleSheet7.create({
522
498
  }
523
499
  });
524
500
  var Header = ({ children, style, fixed = false }) => {
525
- return /* @__PURE__ */ React8.createElement(View4, { style: [styles7.header, style], fixed }, typeof children === "string" ? /* @__PURE__ */ React8.createElement(Text4, null, children) : children);
501
+ return /* @__PURE__ */ React7.createElement(View4, { style: [styles7.header, style], fixed }, typeof children === "string" ? /* @__PURE__ */ React7.createElement(Text4, null, children) : children);
526
502
  };
527
503
  var Footer = ({ children, style, fixed = false }) => {
528
- return /* @__PURE__ */ React8.createElement(View4, { style: [styles7.footer, style], fixed }, typeof children === "string" ? /* @__PURE__ */ React8.createElement(Text4, null, children) : children);
504
+ return /* @__PURE__ */ React7.createElement(View4, { style: [styles7.footer, style], fixed }, typeof children === "string" ? /* @__PURE__ */ React7.createElement(Text4, null, children) : children);
505
+ };
506
+
507
+ // src/components/PDF/core/QRCode.tsx
508
+ import React8 from "react";
509
+ import { useEffect, useState, useRef } from "react";
510
+ import { Image as Image2, StyleSheet as StyleSheet8, View as View5 } from "@react-pdf/renderer";
511
+ import QRCodeStyling from "qr-code-styling";
512
+ var styles8 = StyleSheet8.create({
513
+ qrContainer: {
514
+ position: "relative",
515
+ alignItems: "center",
516
+ justifyContent: "center"
517
+ }
518
+ });
519
+ var QRCode = ({
520
+ value,
521
+ size = 150,
522
+ dotsColor = "#000000",
523
+ dotsGradient,
524
+ backgroundColor = "#ffffff",
525
+ dotsType = "square",
526
+ cornersType = "square",
527
+ cornersSquareColor,
528
+ cornersDotColor,
529
+ logo,
530
+ logoSize = 30,
531
+ logoBackgroundColor,
532
+ logoMargin = 5,
533
+ errorCorrectionLevel = "M",
534
+ margin = 10,
535
+ style
536
+ }) => {
537
+ const [qrDataURL, setQrDataURL] = useState("");
538
+ const qrCodeRef = useRef(null);
539
+ useEffect(() => {
540
+ if (typeof window !== "undefined" && !qrCodeRef.current) {
541
+ qrCodeRef.current = new QRCodeStyling({
542
+ width: 300,
543
+ height: 300,
544
+ type: "canvas",
545
+ data: "Initial",
546
+ dotsOptions: {
547
+ type: "square",
548
+ color: "#000000"
549
+ },
550
+ cornersSquareOptions: {
551
+ type: "square"
552
+ },
553
+ cornersDotOptions: {
554
+ type: "square"
555
+ },
556
+ backgroundOptions: {
557
+ color: "#ffffff"
558
+ },
559
+ imageOptions: {
560
+ crossOrigin: "anonymous",
561
+ margin: 5
562
+ }
563
+ });
564
+ }
565
+ const generateQRCode = async () => {
566
+ if (typeof window === "undefined" || !qrCodeRef.current) return;
567
+ try {
568
+ const options = {
569
+ width: size,
570
+ height: size,
571
+ data: value,
572
+ margin,
573
+ qrOptions: {
574
+ errorCorrectionLevel
575
+ },
576
+ dotsOptions: {
577
+ type: dotsType,
578
+ color: dotsColor
579
+ },
580
+ cornersSquareOptions: {
581
+ type: cornersType,
582
+ color: cornersSquareColor || dotsColor
583
+ },
584
+ cornersDotOptions: {
585
+ type: cornersType,
586
+ color: cornersDotColor || dotsColor
587
+ },
588
+ backgroundOptions: {
589
+ color: backgroundColor
590
+ }
591
+ };
592
+ if (dotsGradient && dotsGradient.length === 2) {
593
+ options.dotsOptions.gradient = {
594
+ type: "linear",
595
+ colorStops: [
596
+ { offset: 0, color: dotsGradient[0] },
597
+ { offset: 1, color: dotsGradient[1] }
598
+ ]
599
+ };
600
+ }
601
+ if (logo) {
602
+ options.image = logo;
603
+ options.imageOptions = {
604
+ hideBackgroundDots: true,
605
+ imageSize: logoSize / size,
606
+ crossOrigin: "anonymous",
607
+ margin: logoMargin
608
+ };
609
+ if (logoBackgroundColor) {
610
+ options.imageOptions.margin = logoMargin;
611
+ }
612
+ }
613
+ qrCodeRef.current.update(options);
614
+ const dataURL = await qrCodeRef.current.getDataUrl();
615
+ setQrDataURL(dataURL);
616
+ } catch (error) {
617
+ console.error("Error generating QR code:", error);
618
+ }
619
+ };
620
+ generateQRCode();
621
+ }, [
622
+ value,
623
+ size,
624
+ dotsColor,
625
+ dotsGradient,
626
+ backgroundColor,
627
+ dotsType,
628
+ cornersType,
629
+ cornersSquareColor,
630
+ cornersDotColor,
631
+ logo,
632
+ logoSize,
633
+ logoBackgroundColor,
634
+ logoMargin,
635
+ errorCorrectionLevel,
636
+ margin
637
+ ]);
638
+ const containerStyle = __spreadValues(__spreadProps(__spreadValues({}, styles8.qrContainer), {
639
+ width: size,
640
+ height: size
641
+ }), style);
642
+ return /* @__PURE__ */ React8.createElement(View5, { style: containerStyle }, qrDataURL ? /* @__PURE__ */ React8.createElement(Image2, { src: qrDataURL || "/placeholder.svg", style: { width: size, height: size } }) : null);
529
643
  };
644
+ var QRCode_default = QRCode;
530
645
  export {
531
646
  A,
532
647
  BR,
@@ -557,9 +672,9 @@ export {
557
672
  Img_default as Img,
558
673
  LayoutPDF_default as LayoutPDF,
559
674
  Left,
560
- MakePDF_default as MakePDF,
561
675
  Mark,
562
676
  P,
677
+ QRCode_default as QRCode,
563
678
  Right,
564
679
  Row,
565
680
  Small,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-pdf-levelup",
3
- "version": "1.0.10",
3
+ "version": "1.0.13",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "type": "module",
@@ -26,6 +26,8 @@
26
26
  "lucide-react": "^0.477.0",
27
27
  "next": "14.2.24",
28
28
  "next-transpile-modules": "^10.0.1",
29
+ "qr-code-styling": "^1.9.1",
30
+ "qrcode": "^1.5.4",
29
31
  "react": "^18",
30
32
  "react-dom": "^18",
31
33
  "react-pdf": "^9.2.1"
@@ -33,6 +35,7 @@
33
35
  "devDependencies": {
34
36
  "@react-pdf/types": "^2.9.0",
35
37
  "@types/node": "^20",
38
+ "@types/qrcode": "^1.5.5",
36
39
  "@types/react": "^18",
37
40
  "@types/react-dom": "^18",
38
41
  "eslint": "^8",