@proulr/sdui-components 0.1.37 → 0.1.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.37",
+  "version": "0.1.40",
   "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/catalog/index.ts

@@ -40,3 +40,8 @@ export {
   isAppIconName,
   type AppIconName,
 } from './app-icon-names';
+export {
+  STORY_TEXT_BACKGROUND_OPTIONS,
+  resolveStoryTextBackgroundOption,
+  type StoryTextBackgroundOption,
+} from './story-text-background-catalog';

package/src/catalog/story-text-background-catalog.ts

@@ -0,0 +1,28 @@
+export type StoryTextBackgroundOption = {
+  id: string;
+  backgroundColor: string;
+  textColor: string;
+};
+
+/** Fundos do composer de story em texto — fonte única de cores (sem hex nos apps). */
+export const STORY_TEXT_BACKGROUND_OPTIONS: StoryTextBackgroundOption[] = [
+  { id: 'fuchsia', backgroundColor: '#D946EF', textColor: '#FFFFFF' },
+  { id: 'cyan', backgroundColor: '#00E5FF', textColor: '#001018' },
+  { id: 'rose', backgroundColor: '#FF2D55', textColor: '#FFFFFF' },
+  { id: 'violet', backgroundColor: '#7C3AED', textColor: '#FFFFFF' },
+  { id: 'amber', backgroundColor: '#F59E0B', textColor: '#1A1200' },
+  { id: 'lime', backgroundColor: '#84CC16', textColor: '#102000' },
+  { id: 'sky', backgroundColor: '#38BDF8', textColor: '#001018' },
+  { id: 'slate', backgroundColor: '#1E293B', textColor: '#FFFFFF' },
+  { id: 'black', backgroundColor: '#000000', textColor: '#FFFFFF' },
+  { id: 'white', backgroundColor: '#FFFFFF', textColor: '#111111' },
+];
+
+export function resolveStoryTextBackgroundOption(
+  id: string,
+): StoryTextBackgroundOption {
+  return (
+    STORY_TEXT_BACKGROUND_OPTIONS.find((option) => option.id === id) ??
+    STORY_TEXT_BACKGROUND_OPTIONS[0]!
+  );
+}

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,

package/src/renderer/theme/proulr-theme.ts

@@ -34,6 +34,28 @@ export const m3Colors = {
   online: '#34FF88',
 } as const;
 
+/** Accent/soft por reação Flash (conteúdo) — fonte única, sem hex solto nos apps. */
+export const flashReactionColors = {
+  flash: { accent: m3Colors.secondary, soft: m3Colors.secondaryContainer },
+  fire: { accent: m3Colors.primary, soft: m3Colors.primaryContainer },
+  heart: { accent: '#FF6B8A', soft: 'rgba(255,107,138,0.22)' },
+  eyes: { accent: '#40C4FF', soft: 'rgba(64,196,255,0.22)' },
+  wave: { accent: '#FFD740', soft: 'rgba(255,215,64,0.22)' },
+  chat: { accent: '#B388FF', soft: 'rgba(179,136,255,0.22)' },
+} as const;
+
+/** Paleta estável para nome de remetente em grupos (estilo WhatsApp/Telegram). */
+export const chatGroupSenderPalette = [
+  m3Colors.primary,
+  m3Colors.secondary,
+  m3Colors.tertiary,
+  '#7C4DFF',
+  '#00BFA5',
+  '#FF6D00',
+  '#FF4081',
+  '#40C4FF',
+] as const;
+
 export const m3Shape = {
   cornerExtraSmall: 4,
   cornerSmall: 8,