@proulr/sdui-components 0.1.35 → 0.1.37

package/package.json

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