@proulr/sdui-components 0.1.32 → 0.1.35

package/package.json

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

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

@@ -75,6 +75,8 @@ export const APP_ICON_NAMES = [
   'signal',
   'hourglass',
   'bell',
+  'share',
+  'gift',
 ] as const;
 
 export type AppIconName = (typeof APP_ICON_NAMES)[number];

package/src/renderer/ui/AppButton.tsx

@@ -9,6 +9,7 @@ export function AppButton({
   disabled,
   loading,
   compact,
+  testID,
 }: {
   label: string;
   onPress: () => void;
@@ -16,6 +17,7 @@ export function AppButton({
   disabled?: boolean;
   loading?: boolean;
   compact?: boolean;
+  testID?: string;
 }) {
   const isPrimary = variant === 'primary';
   const isSecondary = variant === 'secondary';
@@ -30,6 +32,8 @@ export function AppButton({
 
   return (
     <Pressable
+      testID={testID}
+      accessibilityRole="button"
       onPress={onPress}
       disabled={disabled || loading}
       style={({ pressed }) => [

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

@@ -1892,6 +1892,99 @@ export function AppChromeBellGlyph({ color = m3Colors.primary, size = 24 }: AppC
   );
 }
 
+/** Share / export — box with upward arrow. */
+export function AppChromeShareGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size);
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          position: 'absolute',
+          bottom: size * 0.18,
+          width: size * 0.62,
+          height: size * 0.42,
+          borderWidth: stroke,
+          borderTopWidth: 0,
+          borderColor: color,
+          borderBottomLeftRadius: size * 0.1,
+          borderBottomRightRadius: size * 0.1,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.16,
+          width: stroke,
+          height: size * 0.38,
+          backgroundColor: color,
+          borderRadius: 1,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.14,
+          width: size * 0.28,
+          height: size * 0.28,
+          borderLeftWidth: stroke,
+          borderTopWidth: stroke,
+          borderColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+    </View>
+  );
+}
+
+/** Gift / referral reward — box with ribbon. */
+export function AppChromeGiftGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size);
+  const box = size * 0.55;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: box,
+          height: box * 0.72,
+          marginTop: size * 0.12,
+          borderWidth: stroke,
+          borderColor: color,
+          borderRadius: size * 0.06,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.22,
+          width: box,
+          height: stroke,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.28,
+          width: stroke,
+          height: box * 0.72,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.1,
+          width: size * 0.22,
+          height: size * 0.16,
+          borderWidth: stroke,
+          borderColor: color,
+          borderRadius: size * 0.11,
+        }}
+      />
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
   crosshair: {
     position: 'absolute',

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

@@ -47,6 +47,8 @@ import {
   AppChromeRepostGlyph,
   AppChromeSearchGlyph,
   AppChromeSendGlyph,
+  AppChromeShareGlyph,
+  AppChromeGiftGlyph,
   AppChromeSettingsGlyph,
   AppChromeShieldGlyph,
   AppChromeSignalGlyph,
@@ -161,6 +163,8 @@ const ICON_REGISTRY: Record<AppIconName, ComponentType<AppChromeGlyphProps>> = {
   signal: AppChromeSignalGlyph,
   hourglass: AppChromeHourglassGlyph,
   bell: AppChromeBellGlyph,
+  share: AppChromeShareGlyph,
+  gift: AppChromeGiftGlyph,
 };
 
 export type AppIconProps = {