@proulr/sdui-components 0.1.20 → 0.1.21

package/package.json

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

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/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 (