@proulr/sdui-components 0.1.37 → 0.1.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.37",
+  "version": "0.1.38",
   "type": "module",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",
@@ -37,7 +37,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@proulr/sdui-contract": "^0.1.10"
+    "@proulr/sdui-contract": "^0.1.10",
+    "react-native-qrcode-svg": "^6.3.21"
   },
   "peerDependencies": {
     "expo-blur": ">=15",
@@ -45,7 +46,8 @@
     "react": ">=19",
     "react-native": ">=0.85",
     "react-native-google-mobile-ads": ">=16",
-    "react-native-safe-area-context": ">=5"
+    "react-native-safe-area-context": ">=5",
+    "react-native-svg": ">=15"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -65,6 +67,9 @@
     },
     "react-native-safe-area-context": {
       "optional": true
+    },
+    "react-native-svg": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -82,6 +87,7 @@
     "react-native": "0.85.3",
     "react-native-google-mobile-ads": "^16.3.4",
     "react-native-safe-area-context": "~5.7.0",
+    "react-native-svg": "^15.15.5",
     "typescript": "~6.0.3",
     "vitest": "^3.2.7"
   },

package/src/bdc/components/ui.tsx

@@ -59,6 +59,16 @@ type IconProps = LayoutProps & {
 
 export const Icon: BdcComponent = (props) => layoutBlock('icon', props as IconProps);
 
+type QrCodeProps = LayoutProps & {
+  /** Conteúdo codificado no QR (URL de convite). */
+  value: string;
+  size?: number;
+  /** Rótulo exibido sob o QR (ex.: '@handle'). */
+  label?: string;
+};
+
+export const QrCode: BdcComponent = (props) => layoutBlock('qr_code', props as QrCodeProps);
+
 type InfoBannerProps = LayoutProps & {
   message: string;
 };

package/src/bdc/index.ts

@@ -7,6 +7,7 @@ export {
   InfoBanner,
   ListItem,
   NativeAd,
+  QrCode,
   Row,
   Screen,
   Scroll,

package/src/renderer/blocks/SduiQrCodeBlock.tsx

@@ -0,0 +1,51 @@
+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 { 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).
+ * Wire: `value` = conteúdo do QR, `size` em px, `label` = texto sob o código.
+ */
+export function SduiQrCodeBlock({ block }: SduiBlockRenderProps) {
+  const value = typeof block.props.value === 'string' ? block.props.value : '';
+  if (!value) return null;
+
+  const size = typeof block.props.size === 'number' ? block.props.size : 200;
+  const label = typeof block.props.label === 'string' ? block.props.label : '';
+
+  return (
+    <View
+      style={[styles.card, resolveViewStyleProps(block.props.style as Record<string, unknown>)]}
+    >
+      <QRCode
+        value={value}
+        size={size}
+        color={m3Colors.inverseOnSurface}
+        backgroundColor={m3Colors.inverseSurface}
+      />
+      {label ? <Text style={styles.label}>{label}</Text> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    alignSelf: 'center',
+    alignItems: 'center',
+    gap: spacing.lg,
+    backgroundColor: m3Colors.inverseSurface,
+    borderRadius: m3Shape.cornerExtraLarge,
+    paddingVertical: spacing.xl,
+    paddingHorizontal: spacing.xl,
+  },
+  label: {
+    ...m3Type.title,
+    color: m3Colors.inverseOnSurface,
+    letterSpacing: 2,
+    textTransform: 'uppercase',
+  },
+});

package/src/renderer/sdui-component-registry.tsx

@@ -41,6 +41,7 @@ import {
   SduiSegmentedTabsBlock,
 } from './blocks/SduiInboxBlocks';
 import { SduiNativeAdBlock } from './blocks/SduiNativeAdBlock';
+import { SduiQrCodeBlock } from './blocks/SduiQrCodeBlock';
 import {
   SduiAlbumDetailBlock,
   SduiAlbumGridBlock,
@@ -76,6 +77,7 @@ const REGISTRY: Record<string, SduiBlockComponent> = {
   scroll: SduiScrollBlock,
   button: SduiButtonBlock,
   icon: SduiIconBlock,
+  qr_code: SduiQrCodeBlock,
   spacer: SduiSpacerBlock,
   info_banner: SduiInfoBannerBlock,
   native_ad: SduiNativeAdBlock,