kaleido-ui 0.1.48 → 0.1.50

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";

package/dist/web/index.cjs

@@ -1805,6 +1805,7 @@ function AssetCard({
   logoUri,
   balanceVisible = true,
   accentColor,
+  status,
   onClick,
   className
 }) {
@@ -1853,7 +1854,7 @@ function AssetCard({
               /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex flex-nowrap gap-1 mt-1", children: networks.map((network) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(NetworkBadge, { network, size: "sm" }, network)) })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "min-w-0 max-w-[45%] text-right", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex min-w-0 max-w-[45%] flex-col items-end text-right", children: [
             /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               "p",
               {
@@ -1862,7 +1863,8 @@ function AssetCard({
                 children: displayShown
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "mt-0.5 truncate text-tiny font-medium uppercase tracking-wide text-muted-foreground", children: ticker })
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "mt-0.5 truncate text-tiny font-medium uppercase tracking-wide text-muted-foreground", children: ticker }),
+            status && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StatusBadge, { status, className: "mt-2" })
           ] })
         ] })
       ]
@@ -3323,6 +3325,7 @@ function WalletAssetList({
         logoUri: item.logoUri,
         balanceVisible: item.balanceVisible,
         accentColor: item.accentColor,
+        status: item.status,
         onClick: item.onClick
       },
       item.id

package/dist/web/index.d.cts

@@ -228,10 +228,12 @@ interface AssetCardProps {
     balanceVisible?: boolean;
     /** Accent color hex for the card gradient. Pass a token from `kaleido-ui/tokens` (e.g. `colors.network.bitcoin`). */
     accentColor?: string;
+    /** Optional state badge for assets that are present but not currently spendable. */
+    status?: StatusType;
     onClick?: () => void;
     className?: string;
 }
-declare function AssetCard({ ticker, name, displayBalance, networks, logoUri, balanceVisible, accentColor, onClick, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
+declare function AssetCard({ ticker, name, displayBalance, networks, logoUri, balanceVisible, accentColor, status, onClick, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
 
 interface TransactionCardProps {
     /** Direction of the transaction */
@@ -580,6 +582,7 @@ interface WalletAssetListItem {
     logoUri?: string;
     balanceVisible?: boolean;
     accentColor?: string;
+    status?: StatusType;
     onClick?: () => void;
 }
 interface WalletAssetListEmptyState {

package/dist/web/index.d.ts

@@ -228,10 +228,12 @@ interface AssetCardProps {
     balanceVisible?: boolean;
     /** Accent color hex for the card gradient. Pass a token from `kaleido-ui/tokens` (e.g. `colors.network.bitcoin`). */
     accentColor?: string;
+    /** Optional state badge for assets that are present but not currently spendable. */
+    status?: StatusType;
     onClick?: () => void;
     className?: string;
 }
-declare function AssetCard({ ticker, name, displayBalance, networks, logoUri, balanceVisible, accentColor, onClick, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
+declare function AssetCard({ ticker, name, displayBalance, networks, logoUri, balanceVisible, accentColor, status, onClick, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
 
 interface TransactionCardProps {
     /** Direction of the transaction */
@@ -580,6 +582,7 @@ interface WalletAssetListItem {
     logoUri?: string;
     balanceVisible?: boolean;
     accentColor?: string;
+    status?: StatusType;
     onClick?: () => void;
 }
 interface WalletAssetListEmptyState {

package/dist/web/index.js

@@ -1638,6 +1638,7 @@ function AssetCard({
   logoUri,
   balanceVisible = true,
   accentColor,
+  status,
   onClick,
   className
 }) {
@@ -1686,7 +1687,7 @@ function AssetCard({
               /* @__PURE__ */ jsx19("div", { className: "flex flex-nowrap gap-1 mt-1", children: networks.map((network) => /* @__PURE__ */ jsx19(NetworkBadge, { network, size: "sm" }, network)) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs8("div", { className: "min-w-0 max-w-[45%] text-right", children: [
+          /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 max-w-[45%] flex-col items-end text-right", children: [
             /* @__PURE__ */ jsx19(
               "p",
               {
@@ -1695,7 +1696,8 @@ function AssetCard({
                 children: displayShown
               }
             ),
-            /* @__PURE__ */ jsx19("p", { className: "mt-0.5 truncate text-tiny font-medium uppercase tracking-wide text-muted-foreground", children: ticker })
+            /* @__PURE__ */ jsx19("p", { className: "mt-0.5 truncate text-tiny font-medium uppercase tracking-wide text-muted-foreground", children: ticker }),
+            status && /* @__PURE__ */ jsx19(StatusBadge, { status, className: "mt-2" })
           ] })
         ] })
       ]
@@ -3162,6 +3164,7 @@ function WalletAssetList({
         logoUri: item.logoUri,
         balanceVisible: item.balanceVisible,
         accentColor: item.accentColor,
+        status: item.status,
         onClick: item.onClick
       },
       item.id

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaleido-ui",
-  "version": "0.1.48",
+  "version": "0.1.50",
   "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
   "license": "MIT",
   "type": "module",