@proulr/sdui-components 0.1.33 → 0.1.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.33",
+  "version": "0.1.37",
   "type": "module",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",
@@ -37,7 +37,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@proulr/sdui-contract": "^0.1.5"
+    "@proulr/sdui-contract": "^0.1.10"
   },
   "peerDependencies": {
     "expo-blur": ">=15",

package/src/bdc/components/ui.tsx

@@ -49,6 +49,16 @@ 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 InfoBannerProps = LayoutProps & {
   message: string;
 };

package/src/bdc/index.ts

@@ -3,6 +3,7 @@ export {
   Button,
   Card,
   Column,
+  Icon,
   InfoBanner,
   ListItem,
   NativeAd,

package/src/catalog/app-icon-names.ts

@@ -75,6 +75,8 @@ export const APP_ICON_NAMES = [
   'signal',
   'hourglass',
   'bell',
+  'share',
+  'gift',
 ] as const;
 
 export type AppIconName = (typeof APP_ICON_NAMES)[number];

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/sdui-component-registry.tsx

@@ -3,6 +3,7 @@ import type { SduiBlock } from '@proulr/sdui-contract';
 import {
   SduiButtonBlock,
   SduiColumnBlock,
+  SduiIconBlock,
   SduiInfoBannerBlock,
   SduiRowBlock,
   SduiScrollBlock,
@@ -74,6 +75,7 @@ const REGISTRY: Record<string, SduiBlockComponent> = {
   row: SduiRowBlock,
   scroll: SduiScrollBlock,
   button: SduiButtonBlock,
+  icon: SduiIconBlock,
   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,
   };
 }
 

package/src/renderer/ui/app-glyphs.tsx

@@ -1892,6 +1892,99 @@ export function AppChromeBellGlyph({ color = m3Colors.primary, size = 24 }: AppC
   );
 }
 
+/** Share / export — box with upward arrow. */
+export function AppChromeShareGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size);
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          position: 'absolute',
+          bottom: size * 0.18,
+          width: size * 0.62,
+          height: size * 0.42,
+          borderWidth: stroke,
+          borderTopWidth: 0,
+          borderColor: color,
+          borderBottomLeftRadius: size * 0.1,
+          borderBottomRightRadius: size * 0.1,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.16,
+          width: stroke,
+          height: size * 0.38,
+          backgroundColor: color,
+          borderRadius: 1,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.14,
+          width: size * 0.28,
+          height: size * 0.28,
+          borderLeftWidth: stroke,
+          borderTopWidth: stroke,
+          borderColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+    </View>
+  );
+}
+
+/** Gift / referral reward — box with ribbon. */
+export function AppChromeGiftGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size);
+  const box = size * 0.55;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: box,
+          height: box * 0.72,
+          marginTop: size * 0.12,
+          borderWidth: stroke,
+          borderColor: color,
+          borderRadius: size * 0.06,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.22,
+          width: box,
+          height: stroke,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.28,
+          width: stroke,
+          height: box * 0.72,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.1,
+          width: size * 0.22,
+          height: size * 0.16,
+          borderWidth: stroke,
+          borderColor: color,
+          borderRadius: size * 0.11,
+        }}
+      />
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
   crosshair: {
     position: 'absolute',

package/src/renderer/ui/app-icon.tsx

@@ -47,6 +47,8 @@ import {
   AppChromeRepostGlyph,
   AppChromeSearchGlyph,
   AppChromeSendGlyph,
+  AppChromeShareGlyph,
+  AppChromeGiftGlyph,
   AppChromeSettingsGlyph,
   AppChromeShieldGlyph,
   AppChromeSignalGlyph,
@@ -161,6 +163,8 @@ const ICON_REGISTRY: Record<AppIconName, ComponentType<AppChromeGlyphProps>> = {
   signal: AppChromeSignalGlyph,
   hourglass: AppChromeHourglassGlyph,
   bell: AppChromeBellGlyph,
+  share: AppChromeShareGlyph,
+  gift: AppChromeGiftGlyph,
 };
 
 export type AppIconProps = {