@proulr/sdui-components 0.1.69 → 0.1.70

package/package.json

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

package/src/renderer/blocks/SduiDiscoverBlocks.tsx

@@ -282,11 +282,11 @@ export function SduiChipBlock({ block, onAction }: SduiBlockRenderProps) {
   const active = readBooleanProp(block, 'active');
   const variant = readStringProp(block, 'variant') ?? 'default';
   const isHeader = variant === 'on_header';
-  const displayLabel = glyph ? `${glyph} ${label}` : label;
 
   return (
     <Chip
-      label={displayLabel}
+      label={label}
+      icon={glyph}
       active={active}
       disabled={!actionId}
       variant={isHeader ? 'onHeader' : 'default'}

package/src/renderer/ui/Chip.tsx

@@ -1,5 +1,6 @@
 import { Pressable, StyleSheet, Text } from 'react-native';
 import { colors, fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+import { AppIcon, isAppIconName } from './app-icon';
 
 export function Chip({
   label,
@@ -7,12 +8,14 @@ export function Chip({
   onPress,
   variant = 'default',
   disabled,
+  icon,
 }: {
   label: string;
   active?: boolean;
   onPress?: () => void;
   variant?: 'default' | 'onHeader';
   disabled?: boolean;
+  icon?: string;
 }) {
   const isHeader = variant === 'onHeader';
 
@@ -32,12 +35,15 @@ export function Chip({
       ? colors.textOnAccent
       : m3Colors.onSurfaceVariant;
 
+  const iconName = icon && isAppIconName(icon) ? icon : null;
+
   return (
     <Pressable
       onPress={onPress}
       disabled={disabled}
       style={[styles.chip, isHeader && styles.chipOnHeader, containerStyle]}
     >
+      {iconName ? <AppIcon name={iconName} size={isHeader ? 14 : 15} color={textColor} /> : null}
       <Text
         style={{
           color: textColor,
@@ -53,6 +59,9 @@ export function Chip({
 
 const styles = StyleSheet.create({
   chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
     paddingHorizontal: spacing.sm,
     paddingVertical: spacing.sm,
     borderRadius: m3Shape.cornerSmall,