@proulr/sdui-components 0.1.19 → 0.1.21

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.19",
+  "version": "0.1.21",
+  "type": "module",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",
   "exports": {

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

@@ -18,6 +18,7 @@ export const APP_ICON_NAMES = [
   'camera',
   'trash',
   'globe',
+  'travel',
   'tab-discover',
   'tab-vibes',
   'tab-flash',

package/src/catalog/index.ts

@@ -1,5 +1,42 @@
-export * from './block-types';
-export * from './style-tokens';
-export * from './chat-emoji-catalog';
-export * from './flash-reaction-catalog';
-export * from './app-icon-names';
+/** Catalog entry — Node/BFF-safe (sem React Native). Requer `"type": "module"` no package. */
+export {
+  SDUI_BLOCK_TYPES,
+  isKnownBlockType,
+  type SduiBlockType,
+} from './block-types';
+export {
+  COLOR_TOKENS,
+  SHAPE_TOKENS,
+  SPACING_TOKENS,
+  TYPE_TOKENS,
+  type ColorToken,
+  type ShapeToken,
+  type SpacingToken,
+  type StyleWire,
+  type TypeToken,
+} from './style-tokens';
+export {
+  CHAT_EMOJI_CATEGORIES,
+  DEFAULT_QUICK_REACTIONS,
+  QUICK_REACTION_SLOTS,
+  allCatalogEmojis,
+  getEmojiCategory,
+  type EmojiCategory,
+  type EmojiCategoryId,
+} from './chat-emoji-catalog';
+export {
+  FLASH_FILTER_ALL_ACTION_ID,
+  FLASH_REACTIONS,
+  FLASH_REACTION_IDS,
+  flashFilterActionId,
+  getFlashReaction,
+  isFlashReactionId,
+  parseFlashInboxFilter,
+  type FlashReaction,
+  type FlashReactionId,
+} from './flash-reaction-catalog';
+export {
+  APP_ICON_NAMES,
+  isAppIconName,
+  type AppIconName,
+} from './app-icon-names';

package/src/renderer/blocks/SduiDiscoverBlocks.tsx

@@ -12,6 +12,7 @@ import {
 import { LinearGradient } from 'expo-linear-gradient';
 import type { SduiBlock } from '@proulr/sdui-contract';
 import { TextField as UiTextField } from '../ui/TextField';
+import { AppIcon } from '../ui/app-icon';
 import { colors, fonts, gradients, m3Colors, m3Elevation, m3Shape, spacing } from '../theme/proulr-theme';
 import { resolveDataRef, resolveDataRefString } from '../lib/resolve-data-ref';
 import { useSduiHybridRenderer } from '../sdui-hybrid-renderer-context';
@@ -128,6 +129,7 @@ export function SduiDiscoverProfileCardBlock({ block, data, onAction }: SduiBloc
       ) : null}
       {person.traveling ? (
         <View style={[styles.travelBadge, person.has_new_media ? styles.travelBadgeOffset : null]}>
+          <AppIcon name="travel" size={11} color={m3Colors.onSecondaryContainer} />
           <Text style={styles.travelBadgeText}>Viajando</Text>
         </View>
       ) : null}
@@ -411,6 +413,9 @@ const styles = StyleSheet.create({
     position: 'absolute',
     top: spacing.sm,
     right: spacing.sm,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
     backgroundColor: m3Colors.secondaryContainer,
     paddingHorizontal: 8,
     paddingVertical: 3,

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

@@ -76,6 +76,7 @@ import {
   ComposeGalleryGlyph,
   ComposeGlobeGlyph,
   ComposeMentionGlyph,
+  ComposeTravelGlyph,
   ComposeTrashGlyph,
   ComposeVideoGlyph,
 } from './compose-glyphs';
@@ -102,6 +103,7 @@ const ICON_REGISTRY: Record<AppIconName, ComponentType<AppChromeGlyphProps>> = {
   camera: ComposeCameraGlyph,
   trash: ComposeTrashGlyph,
   globe: ComposeGlobeGlyph,
+  travel: ComposeTravelGlyph,
   'tab-discover': AppChromeTabDiscoverGlyph,
   'tab-vibes': AppChromeTabVibesGlyph,
   'tab-flash': AppChromeTabFlashGlyph,

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

@@ -160,6 +160,44 @@ export function ComposeGlobeGlyph({ color = m3Colors.primary, size = 16 }: Glyph
   );
 }
 
+/** Mala / viagem — chrome badge. */
+export function ComposeTravelGlyph({ color = m3Colors.primary, size = 24 }: GlyphProps) {
+  const stroke = Math.max(1.4, size * 0.07);
+  const bodyW = size * 0.72;
+  const bodyH = size * 0.52;
+  const handleW = size * 0.34;
+  const handleH = size * 0.18;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: handleW,
+          height: handleH,
+          borderTopLeftRadius: handleW * 0.35,
+          borderTopRightRadius: handleW * 0.35,
+          borderWidth: stroke,
+          borderBottomWidth: 0,
+          borderColor: color,
+          marginBottom: -stroke,
+        }}
+      />
+      <View
+        style={{
+          width: bodyW,
+          height: bodyH,
+          borderRadius: size * 0.1,
+          borderWidth: stroke,
+          borderColor: color,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <View style={{ width: stroke, height: bodyH * 0.55, backgroundColor: color, borderRadius: 1 }} />
+      </View>
+    </View>
+  );
+}
+
 export function ComposeFollowersGlyph({ color = m3Colors.onPrimary, size = 20 }: GlyphProps) {
   const head = size * 0.22;
   return (