@proulr/sdui-components 0.1.35 → 0.1.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.35",
+  "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.5"
+    "@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

@@ -49,6 +49,26 @@ type ButtonProps = LayoutProps & {
 
 export const Button: BdcComponent = (props) => layoutBlock('button', props as ButtonProps);
 
+type IconProps = LayoutProps & {
+  /** AppIconName kebab-case (catalog) — ex.: 'gift', 'share'. */
+  name: string;
+  size?: number;
+  /** ColorToken do tema M3 — ex.: 'primary', 'onSurfaceVariant'. */
+  color?: string;
+};
+
+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

@@ -3,9 +3,11 @@ export {
   Button,
   Card,
   Column,
+  Icon,
   InfoBanner,
   ListItem,
   NativeAd,
+  QrCode,
   Row,
   Screen,
   Scroll,

package/src/renderer/blocks/SduiPrimitiveBlocks.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native';
 import type { SduiBlock } from '@proulr/sdui-contract';
 import { AppButton } from '../ui/AppButton';
-import { colors, m3Type, spacing } from '../theme/proulr-theme';
+import { AppIcon, isAppIconName } from '../ui/app-icon';
+import { colors, m3Colors, m3Type, spacing } from '../theme/proulr-theme';
 import {
   resolveGapProp,
   resolvePaddingProp,
@@ -135,6 +136,27 @@ export function SduiButtonBlock({ block, onAction }: SduiBlockRenderProps) {
   );
 }
 
+/**
+ * Bloco genérico de ícone vetorial (AppIcon). Wire: `name` = AppIconName
+ * kebab-case, `size` em px, `color` = ColorToken do tema. O container aceita
+ * StyleWire (background, borda, padding) para composições tipo hero circle.
+ */
+export function SduiIconBlock({ block }: SduiBlockRenderProps) {
+  const name = typeof block.props.name === 'string' ? block.props.name : '';
+  if (!isAppIconName(name)) return null;
+
+  const size = typeof block.props.size === 'number' ? block.props.size : spacing.lg;
+  const colorToken = typeof block.props.color === 'string' ? block.props.color : undefined;
+  const color =
+    (colorToken ? m3Colors[colorToken as keyof typeof m3Colors] : undefined) ?? colors.onSurface;
+
+  return (
+    <View style={resolveViewStyleProps(block.props.style as Record<string, unknown>)}>
+      <AppIcon name={name} size={size} color={color} />
+    </View>
+  );
+}
+
 export function SduiSpacerBlock({ block }: SduiBlockRenderProps) {
   const height = typeof block.props.height === 'number' ? block.props.height : spacing.md;
   return <View style={{ height }} />;

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

@@ -3,6 +3,7 @@ import type { SduiBlock } from '@proulr/sdui-contract';
 import {
   SduiButtonBlock,
   SduiColumnBlock,
+  SduiIconBlock,
   SduiInfoBannerBlock,
   SduiRowBlock,
   SduiScrollBlock,
@@ -40,6 +41,7 @@ import {
   SduiSegmentedTabsBlock,
 } from './blocks/SduiInboxBlocks';
 import { SduiNativeAdBlock } from './blocks/SduiNativeAdBlock';
+import { SduiQrCodeBlock } from './blocks/SduiQrCodeBlock';
 import {
   SduiAlbumDetailBlock,
   SduiAlbumGridBlock,
@@ -74,6 +76,8 @@ const REGISTRY: Record<string, SduiBlockComponent> = {
   row: SduiRowBlock,
   scroll: SduiScrollBlock,
   button: SduiButtonBlock,
+  icon: SduiIconBlock,
+  qr_code: SduiQrCodeBlock,
   spacer: SduiSpacerBlock,
   info_banner: SduiInfoBannerBlock,
   native_ad: SduiNativeAdBlock,

package/src/renderer/theme/resolve-style-props.ts

@@ -69,6 +69,7 @@ export function resolveTextStyleProps(
     color: resolveColor(style.color),
     marginTop: resolveSpacing(style.margin_top),
     opacity: style.opacity,
+    textAlign: style.text_align,
   };
 }