@proulr/sdui-components 0.1.41 → 0.1.44

package/package.json

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

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

@@ -116,6 +116,7 @@ export const colors = {
   onSurface: '#FFFFFF',
   onSurfaceVariant: '#A3A3A3',
   shadow: '#000',
+  whiteAlpha08: 'rgba(255,255,255,0.08)',
   whiteAlpha12: 'rgba(255,255,255,0.12)',
   whiteAlpha16: 'rgba(255,255,255,0.16)',
   whiteAlpha22: 'rgba(255,255,255,0.22)',
@@ -125,16 +126,30 @@ export const colors = {
   whiteAlpha72: 'rgba(255,255,255,0.72)',
   whiteAlpha78: 'rgba(255,255,255,0.78)',
   whiteAlpha82: 'rgba(255,255,255,0.82)',
+  whiteAlpha88: 'rgba(255,255,255,0.88)',
+  blackAlpha08: 'rgba(0,0,0,0.08)',
   blackAlpha10: 'rgba(0,0,0,0.1)',
+  blackAlpha12: 'rgba(0,0,0,0.12)',
   blackAlpha14: 'rgba(0,0,0,0.14)',
   blackAlpha18: 'rgba(0,0,0,0.18)',
   blackAlpha28: 'rgba(0,0,0,0.28)',
+  blackAlpha30: 'rgba(0,0,0,0.3)',
+  blackAlpha35: 'rgba(0,0,0,0.35)',
+  blackAlpha40: 'rgba(0,0,0,0.4)',
+  blackAlpha45: 'rgba(0,0,0,0.45)',
+  blackAlpha48: 'rgba(0,0,0,0.48)',
   blackAlpha38: 'rgba(0,0,0,0.38)',
   blackAlpha50: 'rgba(0,0,0,0.5)',
   blackAlpha55: 'rgba(0,0,0,0.55)',
+  blackAlpha60: 'rgba(0,0,0,0.6)',
+  blackAlpha62: 'rgba(0,0,0,0.62)',
+  blackAlpha72: 'rgba(0,0,0,0.72)',
   blackAlpha75: 'rgba(0,0,0,0.75)',
+  blackAlpha78: 'rgba(0,0,0,0.78)',
   blackAlpha80: 'rgba(0,0,0,0.8)',
   blackAlpha85: 'rgba(0,0,0,0.85)',
+  blackAlpha90: 'rgba(0,0,0,0.9)',
+  creamAlpha35: 'rgba(250,250,249,0.35)',
   creamAlpha72: 'rgba(250,250,249,0.72)',
   creamAlpha78: 'rgba(250,250,249,0.78)',
   creamAlpha82: 'rgba(250,250,249,0.82)',
@@ -169,8 +184,12 @@ export const gradients = {
   header: ['#2D0A35', '#D946EF'] as const,
   headerGlow: ['rgba(217,70,239,0.20)', 'rgba(217,70,239,0)'] as const,
   authHero: ['rgba(217,70,239,0.14)', 'rgba(0,229,255,0.06)', 'transparent'] as const,
+  authHeroWelcomeTop: [colors.blackAlpha62, colors.blackAlpha18, 'transparent'] as const,
+  authHeroWelcomeBottom: ['transparent', colors.blackAlpha12, colors.blackAlpha50] as const,
+  mediaHeroShade: ['transparent', colors.blackAlpha90] as const,
+  mediaBrowseShade: ['transparent', colors.blackAlpha78] as const,
   neonBorder: [colors.headerEnd, colors.accent] as const,
-  videoControlsShade: ['transparent', 'rgba(0,0,0,0.72)'] as const,
+  videoControlsShade: ['transparent', colors.blackAlpha72] as const,
   chromeScrollFadeBottom: [
     'transparent',
     'rgba(0,0,0,0.22)',