@proulr/sdui-components 0.1.18 → 0.1.20

package/src/renderer/ui/compose-audience-pill.tsx

@@ -1,4 +1,5 @@
 import { Pressable, StyleSheet, Text } from 'react-native';
+import { AppIcon } from './app-icon';
 import { fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
 
 export function ComposeAudiencePill({
@@ -17,7 +18,7 @@ export function ComposeAudiencePill({
       style={({ pressed }) => [styles.pill, pressed && onPress && { opacity: 0.82 }]}
     >
       <Text style={styles.label}>{label}</Text>
-      <Text style={styles.chevron}>{'\u25BE'}</Text>
+      <AppIcon name="chevron-down" size={14} color={m3Colors.onPrimaryContainer} />
     </Pressable>
   );
 }
@@ -39,9 +40,4 @@ const styles = StyleSheet.create({
     fontFamily: fonts.medium,
     fontSize: 13,
   },
-  chevron: {
-    color: m3Colors.onPrimaryContainer,
-    fontSize: 14,
-    marginTop: 1,
-  },
 });

package/src/renderer/ui/compose-media-carousel.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import { Image, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { AppIcon } from './app-icon';
 import { fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
 
 export type ComposeMediaCarouselItem = {
@@ -49,7 +50,7 @@ export function ComposeMediaCarousel({
               accessibilityLabel="Remover mídia"
               style={styles.removeBtn}
             >
-              <Text style={styles.removeIcon}>{'\u2715'}</Text>
+              <AppIcon name="close" size={14} color={m3Colors.onPrimary} />
             </Pressable>
           </View>
         ))}
@@ -102,11 +103,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  removeIcon: {
-    color: m3Colors.onPrimary,
-    fontSize: 14,
-    fontFamily: fonts.semibold,
-  },
   counter: {
     marginTop: spacing.xs,
     color: m3Colors.onSurfaceVariant,

package/src/renderer/ui/compose-reply-audience-sheet.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+import { AppIcon } from './app-icon';
 import { fonts, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
 
 export type ComposeReplyAudienceValue = 'everyone' | 'followers' | 'mentioned';
@@ -55,7 +56,7 @@ export function ComposeReplyAudienceSheet({
                 </View>
                 {selected ? (
                   <View style={styles.checkBadge}>
-                    <Text style={styles.checkMark}>{'\u2713'}</Text>
+                    <AppIcon name="check" size={14} color={m3Colors.onPrimary} />
                   </View>
                 ) : (
                   <View style={styles.checkSpacer} />
@@ -144,11 +145,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  checkMark: {
-    color: m3Colors.onPrimary,
-    fontSize: 14,
-    fontFamily: fonts.bold,
-  },
   checkSpacer: {
     width: 24,
   },

package/src/renderer/ui/floating-create-menu.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import { useCallback, useState } from 'react';
 import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+import { AppIcon, APP_ICON_SIZE } from './app-icon';
 import { fonts, m3Colors, m3Elevation, spacing } from '../theme/proulr-theme';
 
 export type FloatingCreateMenuAction = {
@@ -50,7 +51,11 @@ export function FloatingCreateMenu({
           pressed && { opacity: 0.9 },
         ]}
       >
-        <Text style={[styles.mainFabGlyph]}>{open ? '\u2715' : '\u002B'}</Text>
+        <AppIcon
+          name={open ? 'close' : 'plus'}
+          size={APP_ICON_SIZE.fab}
+          color={open ? m3Colors.onSurface : m3Colors.onSecondary}
+        />
       </Pressable>
 
       <Modal visible={open} transparent animationType="fade" onRequestClose={close}>
@@ -111,11 +116,6 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: m3Colors.outlineVariant,
   },
-  mainFabGlyph: {
-    color: m3Colors.onSecondary,
-    fontSize: 30,
-    fontFamily: fonts.bold,
-  },
   overlay: {
     flex: 1,
   },

package/src/renderer/ui/index.ts

@@ -21,14 +21,22 @@ export {
   ComposeVideoGlyph,
 } from './compose-glyphs';
 export {
+  AppChromeArrowDownRightGlyph,
+  AppChromeArrowRightGlyph,
+  AppChromeArrowUpRightGlyph,
+  AppChromeAttachmentGlyph,
   AppChromeBackGlyph,
+  AppChromeBellGlyph,
   AppChromeBookmarkGlyph,
   AppChromeBoostGlyph,
   AppChromeChatGlyph,
+  AppChromeCheckGlyph,
   AppChromeChevronDownGlyph,
   AppChromeChevronRightGlyph,
   AppChromeCloseGlyph,
   AppChromeCommunitiesGlyph,
+  AppChromeCopyGlyph,
+  AppChromeDownloadGlyph,
   AppChromeEditGlyph,
   AppChromeEventsGlyph,
   AppChromeFireGlyph,
@@ -36,24 +44,30 @@ export {
   AppChromeFlipCameraGlyph,
   AppChromeHeartFilledGlyph,
   AppChromeHeartGlyph,
-  AppChromeThumbsUpFilledGlyph,
-  AppChromeThumbsUpGlyph,
+  AppChromeHourglassGlyph,
   AppChromeHuntGlyph,
   AppChromeIncognitoGlyph,
+  AppChromeInfoGlyph,
   AppChromeListGlyph,
   AppChromeLocationGlyph,
+  AppChromeLockGlyph,
   AppChromeMicGlyph,
   AppChromeOverflowGlyph,
   AppChromePauseGlyph,
+  AppChromePendingGlyph,
   AppChromePlayGlyph,
   AppChromePlusGlyph,
+  AppChromePollGlyph,
   AppChromeProfileGlyph,
   AppChromePublishGlyph,
+  AppChromeRadioUncheckedGlyph,
+  AppChromeReplyGlyph,
   AppChromeRepostGlyph,
   AppChromeSearchGlyph,
   AppChromeSendGlyph,
   AppChromeSettingsGlyph,
   AppChromeShieldGlyph,
+  AppChromeSignalGlyph,
   AppChromeSignOutGlyph,
   AppChromeStarGlyph,
   AppChromeStoryEffectsGlyph,
@@ -66,9 +80,22 @@ export {
   AppChromeTabDiscoverGlyph,
   AppChromeTabFlashGlyph,
   AppChromeTabVibesGlyph,
+  AppChromeThumbsUpFilledGlyph,
+  AppChromeThumbsUpGlyph,
+  AppChromeVisibilityGlyph,
+  AppChromeVisibilityOffGlyph,
+  AppChromeVolumeOffGlyph,
+  AppChromeVolumeOnGlyph,
+  AppChromeWarningGlyph,
   type AppChromeGlyphProps,
 } from './app-glyphs';
-export { AppIcon, APP_ICON_SIZE, type AppIconName, type AppIconProps } from './app-icon';
+export {
+  AppIcon,
+  APP_ICON_SIZE,
+  isAppIconName,
+  type AppIconName,
+  type AppIconProps,
+} from './app-icon';
 export { ComposeMediaCarousel, type ComposeMediaCarouselItem } from './compose-media-carousel';
 export { ComposeMediaShortcut, COMPOSE_MEDIA_TILE_SIZE } from './compose-media-shortcut';
 export { ComposeRecentMediaGrid, type ComposeRecentMediaItem } from './compose-recent-media-grid';

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

@@ -1,4 +1,5 @@
 import { Text, View } from 'react-native';
+import { AppIcon } from './app-icon';
 import { m3Colors } from '../theme/proulr-theme';
 
 type GlyphProps = {
@@ -49,11 +50,7 @@ export function StoryTextGlyph({ color = m3Colors.onSurface, size = 28 }: GlyphP
 }
 
 export function StoryMusicGlyph({ color = m3Colors.onSurface, size = 28 }: GlyphProps) {
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <Text style={{ color, fontSize: size * 0.58 }}>{'\u266A'}</Text>
-    </View>
-  );
+  return <AppIcon name="story-music" color={color} size={size} />;
 }
 
 export function StoryCollageGlyph({ color = m3Colors.onSurface, size = 28 }: GlyphProps) {
@@ -111,11 +108,7 @@ export function StoryStickerGlyph({ color = m3Colors.onPrimary, size = 22 }: Gly
 }
 
 export function StoryEffectsGlyph({ color = m3Colors.onPrimary, size = 22 }: GlyphProps) {
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <Text style={{ color, fontSize: size * 0.62 }}>{'\u2728'}</Text>
-    </View>
-  );
+  return <AppIcon name="story-effects" color={color} size={size} />;
 }
 
 export function StoryMentionGlyph({ color = m3Colors.onPrimary, size = 22 }: GlyphProps) {

package/src/renderer/ui/story-surface-picker.tsx

@@ -1,4 +1,5 @@
 import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+import { AppIcon } from './app-icon';
 import { fonts, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
 
 export type StorySurfaceOption = {
@@ -46,7 +47,11 @@ export function StorySurfacePicker({
                   <Text style={styles.optionLabel}>{option.label}</Text>
                   <Text style={styles.optionHint}>{option.hint}</Text>
                 </View>
-                {selected ? <Text style={styles.check}>{'\u2713'}</Text> : null}
+                {selected ? (
+                  <View style={styles.checkWrap}>
+                    <AppIcon name="check" size={18} color={m3Colors.primary} />
+                  </View>
+                ) : null}
               </Pressable>
             );
           })}
@@ -115,10 +120,7 @@ const styles = StyleSheet.create({
     ...m3Type.bodySmall,
     marginTop: 2,
   },
-  check: {
-    color: m3Colors.primary,
-    fontSize: 18,
-    fontFamily: fonts.bold,
+  checkWrap: {
     marginLeft: spacing.sm,
   },
 });