@proulr/sdui-components 0.1.68 → 0.1.70

package/assets/icons/camera.svg

@@ -1,10 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
-  Camera — soft body plate, lens ring, flash nub.
+  Camera — landscape body with trapezoid viewfinder, lens, flash cuboid.
 -->
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path fill="currentColor" fill-opacity="0.3" d="M8.2 5.2h2.1l1.1-1.4h1.4l1.1 1.4h2.1A2.4 2.4 0 0 1 18.4 7.6v10a2.4 2.4 0 0 1-2.4 2.4H8.2A2.4 2.4 0 0 1 5.8 17.6v-10A2.4 2.4 0 0 1 8.2 5.2z" />
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="1.8" d="M8.2 5.8h2l1-1.2h1.6l1 1.2h2A1.8 1.8 0 0 1 17.6 7.6v10a1.8 1.8 0 0 1-1.8 1.8H8.2A1.8 1.8 0 0 1 6.4 17.6v-10A1.8 1.8 0 0 1 8.2 5.8z" />
-  <circle cx="12" cy="12.6" r="3.4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="1.8" />
-  <circle cx="12" cy="12.6" r="1.65" fill="currentColor" />
+  <path fill="currentColor" fill-opacity="0.3" d="M9 3.2 7.2 6H4.2A2.6 2.6 0 0 0 1.6 8.6v9.6A2.6 2.6 0 0 0 4.2 20.8h15.6a2.6 2.6 0 0 0 2.6-2.6V8.6A2.6 2.6 0 0 0 19.8 6h-3L15 3.2H9z" />
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="1.85" d="M9.1 3.9 7.4 6.5H4.4A1.9 1.9 0 0 0 2.5 8.4v9.4A1.9 1.9 0 0 0 4.4 19.7h15.2a1.9 1.9 0 0 0 1.9-1.9V8.4a1.9 1.9 0 0 0-1.9-1.9h-3l-1.7-2.6H9.1z" />
+  <circle cx="12" cy="13.1" r="3.65" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="1.85" />
+  <circle cx="12" cy="13.1" r="1.5" fill="currentColor" />
+  <rect x="5.35" y="8.35" width="2.55" height="1.9" rx="0.5" fill="currentColor" />
 </svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.68",
+  "version": "0.1.70",
   "type": "module",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",
@@ -39,7 +39,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@proulr/sdui-contract": "^0.1.15",
+    "@proulr/sdui-contract": "^0.1.16",
     "react-native-qrcode-svg": "^6.3.21"
   },
   "peerDependencies": {

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,

package/src/renderer/ui/generated/camera.tsx

@@ -1,5 +1,5 @@
 /* Generated by scripts/generate-app-icons.mjs — do not edit. */
-import Svg, { Circle, Path } from 'react-native-svg';
+import Svg, { Circle, Path, Rect } from 'react-native-svg';
 import { m3Colors } from '../../theme/proulr-theme';
 import type { AppIconGlyphProps } from '../app-icon-glyph-props';
 
@@ -9,10 +9,11 @@ export function CameraIcon({
 }: AppIconGlyphProps) {
   return (
     <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path fill={color} fillOpacity={0.3} d="M8.2 5.2h2.1l1.1-1.4h1.4l1.1 1.4h2.1A2.4 2.4 0 0 1 18.4 7.6v10a2.4 2.4 0 0 1-2.4 2.4H8.2A2.4 2.4 0 0 1 5.8 17.6v-10A2.4 2.4 0 0 1 8.2 5.2z" />
-      <Path stroke={color} strokeLinecap="round" strokeLinejoin="round" fill="none" strokeWidth={1.8} d="M8.2 5.8h2l1-1.2h1.6l1 1.2h2A1.8 1.8 0 0 1 17.6 7.6v10a1.8 1.8 0 0 1-1.8 1.8H8.2A1.8 1.8 0 0 1 6.4 17.6v-10A1.8 1.8 0 0 1 8.2 5.8z" />
-      <Circle cx={12} cy={12.6} r={3.4} stroke={color} strokeLinecap="round" strokeLinejoin="round" fill="none" strokeWidth={1.8} />
-      <Circle cx={12} cy={12.6} r={1.65} fill={color} />
+      <Path fill={color} fillOpacity={0.3} d="M9 3.2 7.2 6H4.2A2.6 2.6 0 0 0 1.6 8.6v9.6A2.6 2.6 0 0 0 4.2 20.8h15.6a2.6 2.6 0 0 0 2.6-2.6V8.6A2.6 2.6 0 0 0 19.8 6h-3L15 3.2H9z" />
+      <Path stroke={color} strokeLinecap="round" strokeLinejoin="round" fill="none" strokeWidth={1.85} d="M9.1 3.9 7.4 6.5H4.4A1.9 1.9 0 0 0 2.5 8.4v9.4A1.9 1.9 0 0 0 4.4 19.7h15.2a1.9 1.9 0 0 0 1.9-1.9V8.4a1.9 1.9 0 0 0-1.9-1.9h-3l-1.7-2.6H9.1z" />
+      <Circle cx={12} cy={13.1} r={3.65} stroke={color} strokeLinecap="round" strokeLinejoin="round" fill="none" strokeWidth={1.85} />
+      <Circle cx={12} cy={13.1} r={1.5} fill={color} />
+      <Rect x={5.35} y={8.35} width={2.55} height={1.9} rx={0.5} fill={color} />
     </Svg>
   );
 }