@proulr/sdui-components 0.1.43 → 0.1.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.43",
+  "version": "0.1.44",
   "type": "module",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",

package/src/renderer/assets/image-assets.d.ts

@@ -0,0 +1,5 @@
+declare module '*.png' {
+  import type { ImageSourcePropType } from 'react-native';
+  const asset: ImageSourcePropType;
+  export default asset;
+}

package/src/renderer/blocks/SduiQrCodeBlock.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import QRCode from 'react-native-qrcode-svg';
-import { m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
+import brandMarkAsset from '../assets/proulr-brand-mark.png';
+import { gradients, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
 import { resolveViewStyleProps } from '../theme/resolve-style-props';
 import type { SduiBlockRenderProps } from './SduiPrimitiveBlocks';
 
 /**
  * Nametag de QR estilo "cartão de convite" (ref. Instagram): cartão claro
- * (inverseSurface) com QR de alto contraste e rótulo opcional (ex.: @handle).
+ * (inverseSurface) com QR customizado da marca — módulos no gradiente Proulr
+ * (roxo → fúcsia) e brand mark no centro (ECC alto para manter a leitura).
  * Wire: `value` = conteúdo do QR, `size` em px, `label` = texto sob o código.
  */
 export function SduiQrCodeBlock({ block }: SduiBlockRenderProps) {
@@ -24,8 +26,15 @@ export function SduiQrCodeBlock({ block }: SduiBlockRenderProps) {
       <QRCode
         value={value}
         size={size}
-        color={m3Colors.inverseOnSurface}
         backgroundColor={m3Colors.inverseSurface}
+        enableLinearGradient
+        linearGradient={[...gradients.brand]}
+        ecl="H"
+        logo={brandMarkAsset}
+        logoSize={Math.round(size * 0.22)}
+        logoBackgroundColor={m3Colors.inverseSurface}
+        logoMargin={Math.max(3, Math.round(size * 0.02))}
+        logoBorderRadius={m3Shape.cornerMedium}
       />
       {label ? <Text style={styles.label}>{label}</Text> : null}
     </View>