kaleido-ui 0.1.49 → 0.1.51

package/dist/native/index.cjs

@@ -234,7 +234,7 @@ function KaleidoThemeProvider({
 var import_wdk_uikit_react_native2 = require("@tetherto/wdk-uikit-react-native");
 
 // src/native/components/qr-code.tsx
-var import_react = require("react");
+var import_react = __toESM(require("react"), 1);
 var import_react_native = require("react-native");
 var import_react_native_svg = __toESM(require("react-native-svg"), 1);
 var import_qr = __toESM(require("qr"), 1);
@@ -308,7 +308,7 @@ var LogoPaths = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_r
   ),
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.Path, { d: "M274.479 0.104797H411.786L274.533 137.411H137.226L274.479 0.104797Z", fill: "#17B581" })
 ] });
-function QrCode({
+function QrCodeImpl({
   value,
   size = 160,
   color = "#040404",
@@ -327,6 +327,9 @@ function QrCode({
     const logoZoneSize = logoModules % 2 === 0 ? logoModules + 1 : logoModules;
     const els = [];
     const dotRadius = moduleSize * 0.42;
+    const r = Math.round(dotRadius * 100) / 100;
+    const d2r = r * 2;
+    let dataPath = "";
     for (let row = 0; row < n; row++) {
       for (let col = 0; col < n; col++) {
         if (isFinderPattern(row, col, n)) continue;
@@ -334,23 +337,26 @@ function QrCode({
         if (!matrix[row][col]) continue;
         const cx = quietZone + col * moduleSize + moduleSize / 2;
         const cy = quietZone + row * moduleSize + moduleSize / 2;
-        els.push(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.Circle, { cx, cy, r: dotRadius, fill: fg }, `d-${row}-${col}`));
+        dataPath += `M${cx - r} ${cy}a${r} ${r} 0 1 0 ${d2r} 0a${r} ${r} 0 1 0 ${-d2r} 0Z`;
       }
     }
+    if (dataPath) {
+      els.push(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.Path, { d: dataPath, fill: fg }, "data"));
+    }
     const finderPositions = [
       [0, 0],
       [0, n - 7],
       [n - 7, 0]
     ];
-    for (const [r, c] of finderPositions) {
+    for (const [r2, c] of finderPositions) {
       els.push(
         ...renderFinderPattern(
           quietZone + c * moduleSize,
-          quietZone + r * moduleSize,
+          quietZone + r2 * moduleSize,
           moduleSize,
           fg,
           bg,
-          `fp-${r}-${c}`
+          `fp-${r2}-${c}`
         )
       );
     }
@@ -372,6 +378,7 @@ function QrCode({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.View, { style: { width: size, height: size }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_svg.default, { width: size, height: size, viewBox: `0 0 ${svgSize} ${svgSize}`, children: elements }) });
 }
+var QrCode = import_react.default.memo(QrCodeImpl);
 
 // src/native/components/status-badge.tsx
 var import_react_native2 = require("react-native");

package/dist/native/index.d.cts

@@ -65,7 +65,8 @@ interface QrCodeProps {
     /** Background color used for finder eyes + logo disc. Default white. */
     backgroundColor?: string;
 }
-declare function QrCode({ value, size, color, backgroundColor, }: QrCodeProps): react_jsx_runtime.JSX.Element;
+declare function QrCodeImpl({ value, size, color, backgroundColor, }: QrCodeProps): react_jsx_runtime.JSX.Element;
+declare const QrCode: React.MemoExoticComponent<typeof QrCodeImpl>;
 
 type StatusType = 'success' | 'pending' | 'failed' | 'completed' | 'error';
 interface StatusBadgeProps {

package/dist/native/index.d.ts

@@ -65,7 +65,8 @@ interface QrCodeProps {
     /** Background color used for finder eyes + logo disc. Default white. */
     backgroundColor?: string;
 }
-declare function QrCode({ value, size, color, backgroundColor, }: QrCodeProps): react_jsx_runtime.JSX.Element;
+declare function QrCodeImpl({ value, size, color, backgroundColor, }: QrCodeProps): react_jsx_runtime.JSX.Element;
+declare const QrCode: React.MemoExoticComponent<typeof QrCodeImpl>;
 
 type StatusType = 'success' | 'pending' | 'failed' | 'completed' | 'error';
 interface StatusBadgeProps {

package/dist/native/index.js

@@ -171,7 +171,7 @@ import {
 } from "@tetherto/wdk-uikit-react-native";
 
 // src/native/components/qr-code.tsx
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { View } from "react-native";
 import Svg, { Rect, Circle, G, Path } from "react-native-svg";
 import encodeQR from "qr";
@@ -245,7 +245,7 @@ var LogoPaths = () => /* @__PURE__ */ jsxs(Fragment, { children: [
   ),
   /* @__PURE__ */ jsx2(Path, { d: "M274.479 0.104797H411.786L274.533 137.411H137.226L274.479 0.104797Z", fill: "#17B581" })
 ] });
-function QrCode({
+function QrCodeImpl({
   value,
   size = 160,
   color = "#040404",
@@ -264,6 +264,9 @@ function QrCode({
     const logoZoneSize = logoModules % 2 === 0 ? logoModules + 1 : logoModules;
     const els = [];
     const dotRadius = moduleSize * 0.42;
+    const r = Math.round(dotRadius * 100) / 100;
+    const d2r = r * 2;
+    let dataPath = "";
     for (let row = 0; row < n; row++) {
       for (let col = 0; col < n; col++) {
         if (isFinderPattern(row, col, n)) continue;
@@ -271,23 +274,26 @@ function QrCode({
         if (!matrix[row][col]) continue;
         const cx = quietZone + col * moduleSize + moduleSize / 2;
         const cy = quietZone + row * moduleSize + moduleSize / 2;
-        els.push(/* @__PURE__ */ jsx2(Circle, { cx, cy, r: dotRadius, fill: fg }, `d-${row}-${col}`));
+        dataPath += `M${cx - r} ${cy}a${r} ${r} 0 1 0 ${d2r} 0a${r} ${r} 0 1 0 ${-d2r} 0Z`;
       }
     }
+    if (dataPath) {
+      els.push(/* @__PURE__ */ jsx2(Path, { d: dataPath, fill: fg }, "data"));
+    }
     const finderPositions = [
       [0, 0],
       [0, n - 7],
       [n - 7, 0]
     ];
-    for (const [r, c] of finderPositions) {
+    for (const [r2, c] of finderPositions) {
       els.push(
         ...renderFinderPattern(
           quietZone + c * moduleSize,
-          quietZone + r * moduleSize,
+          quietZone + r2 * moduleSize,
           moduleSize,
           fg,
           bg,
-          `fp-${r}-${c}`
+          `fp-${r2}-${c}`
         )
       );
     }
@@ -309,6 +315,7 @@ function QrCode({
   }
   return /* @__PURE__ */ jsx2(View, { style: { width: size, height: size }, children: /* @__PURE__ */ jsx2(Svg, { width: size, height: size, viewBox: `0 0 ${svgSize} ${svgSize}`, children: elements }) });
 }
+var QrCode = React.memo(QrCodeImpl);
 
 // src/native/components/status-badge.tsx
 import { View as View2, Text, StyleSheet } from "react-native";