@proulr/sdui-components 0.1.18 → 0.1.20

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

@@ -1312,6 +1312,543 @@ export function AppChromeVisibilityOffGlyph({ color = m3Colors.onSurfaceVariant,
   );
 }
 
+export function AppChromeCheckGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size) + 0.2;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: size * 0.42,
+          height: size * 0.22,
+          borderLeftWidth: stroke,
+          borderBottomWidth: stroke,
+          borderColor: color,
+          transform: [{ rotate: '-45deg' }],
+          marginTop: -size * 0.06,
+        }}
+      />
+    </View>
+  );
+}
+
+export function AppChromeArrowRightGlyph({ color = m3Colors.onSurface, size = 24 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size);
+  const shaft = size * 0.5;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View style={{ width: shaft, height: stroke, backgroundColor: color, borderRadius: 1, marginRight: size * 0.08 }} />
+      <View
+        style={{
+          position: 'absolute',
+          width: size * 0.28,
+          height: size * 0.28,
+          borderTopWidth: stroke,
+          borderRightWidth: stroke,
+          borderColor: color,
+          transform: [{ rotate: '45deg' }],
+          right: size * 0.18,
+        }}
+      />
+    </View>
+  );
+}
+
+export function AppChromeArrowUpRightGlyph({ color = m3Colors.onSurfaceVariant, size = 16 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size);
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View style={{ position: 'absolute', width: size * 0.55, height: stroke, backgroundColor: color, transform: [{ rotate: '-45deg' }] }} />
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.18,
+          right: size * 0.18,
+          width: size * 0.32,
+          height: size * 0.32,
+          borderTopWidth: stroke,
+          borderRightWidth: stroke,
+          borderColor: color,
+        }}
+      />
+    </View>
+  );
+}
+
+export function AppChromeArrowDownRightGlyph({ color = m3Colors.onSurfaceVariant, size = 16 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size);
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View style={{ position: 'absolute', width: size * 0.55, height: stroke, backgroundColor: color, transform: [{ rotate: '45deg' }] }} />
+      <View
+        style={{
+          position: 'absolute',
+          bottom: size * 0.18,
+          right: size * 0.18,
+          width: size * 0.32,
+          height: size * 0.32,
+          borderBottomWidth: stroke,
+          borderRightWidth: stroke,
+          borderColor: color,
+        }}
+      />
+    </View>
+  );
+}
+
+export function AppChromeReplyGlyph({ color = m3Colors.onSurface, size = 24 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size);
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: size * 0.28,
+          height: size * 0.28,
+          borderLeftWidth: stroke,
+          borderBottomWidth: stroke,
+          borderColor: color,
+          transform: [{ rotate: '45deg' }],
+          marginRight: size * 0.2,
+          marginTop: -size * 0.08,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          width: size * 0.42,
+          height: size * 0.36,
+          borderRightWidth: stroke,
+          borderBottomWidth: stroke,
+          borderColor: color,
+          borderBottomRightRadius: size * 0.2,
+          right: size * 0.16,
+          top: size * 0.28,
+        }}
+      />
+    </View>
+  );
+}
+
+export function AppChromePendingGlyph({ color = m3Colors.onSurfaceVariant, size = 16 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size);
+  const dial = size * 0.72;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: dial,
+          height: dial,
+          borderRadius: dial / 2,
+          borderWidth: stroke,
+          borderColor: color,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <View style={{ position: 'absolute', width: stroke, height: dial * 0.28, backgroundColor: color, top: dial * 0.14, borderRadius: 1 }} />
+        <View
+          style={{
+            position: 'absolute',
+            width: dial * 0.22,
+            height: stroke,
+            backgroundColor: color,
+            borderRadius: 1,
+            transform: [{ rotate: '45deg' }],
+            top: dial * 0.36,
+            left: dial * 0.4,
+          }}
+        />
+      </View>
+    </View>
+  );
+}
+
+export function AppChromeDownloadGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size);
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View style={{ width: stroke, height: size * 0.42, backgroundColor: color, borderRadius: 1, marginBottom: size * 0.08 }} />
+      <View
+        style={{
+          position: 'absolute',
+          width: size * 0.28,
+          height: size * 0.28,
+          borderRightWidth: stroke,
+          borderBottomWidth: stroke,
+          borderColor: color,
+          transform: [{ rotate: '45deg' }],
+          top: size * 0.34,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          bottom: size * 0.14,
+          width: size * 0.5,
+          height: stroke,
+          backgroundColor: color,
+          borderRadius: 1,
+        }}
+      />
+    </View>
+  );
+}
+
+export function AppChromeRadioUncheckedGlyph({ color = m3Colors.onSurfaceVariant, size = 20 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size);
+  const ring = size * 0.72;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: ring,
+          height: ring,
+          borderRadius: ring / 2,
+          borderWidth: stroke,
+          borderColor: color,
+        }}
+      />
+    </View>
+  );
+}
+
+export function AppChromeCopyGlyph({ color = m3Colors.onSurface, size = 24 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size);
+  const sheet = size * 0.46;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.14,
+          left: size * 0.18,
+          width: sheet,
+          height: sheet * 1.15,
+          borderRadius: size * 0.06,
+          borderWidth: stroke,
+          borderColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.26,
+          left: size * 0.32,
+          width: sheet,
+          height: sheet * 1.15,
+          borderRadius: size * 0.06,
+          borderWidth: stroke,
+          borderColor: color,
+          backgroundColor: 'transparent',
+        }}
+      />
+    </View>
+  );
+}
+
+export function AppChromeAttachmentGlyph({ color = m3Colors.onSurfaceVariant, size = 16 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size);
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: size * 0.28,
+          height: size * 0.62,
+          borderRadius: size * 0.14,
+          borderWidth: stroke,
+          borderColor: color,
+          transform: [{ rotate: '35deg' }],
+        }}
+      />
+    </View>
+  );
+}
+
+export function AppChromePollGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
+  const barW = Math.max(2.2, size * 0.12);
+  const gap = size * 0.1;
+  return (
+    <View
+      style={{
+        width: size,
+        height: size,
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        justifyContent: 'center',
+        gap,
+        paddingBottom: size * 0.14,
+      }}
+    >
+      <View style={{ width: barW, height: size * 0.28, borderRadius: 1, backgroundColor: color }} />
+      <View style={{ width: barW, height: size * 0.48, borderRadius: 1, backgroundColor: color }} />
+      <View style={{ width: barW, height: size * 0.36, borderRadius: 1, backgroundColor: color }} />
+    </View>
+  );
+}
+
+export function AppChromeLockGlyph({ color = m3Colors.onSurface, size = 24 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size);
+  const body = size * 0.5;
+  const shackle = size * 0.34;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: shackle,
+          height: shackle * 0.7,
+          borderTopLeftRadius: shackle / 2,
+          borderTopRightRadius: shackle / 2,
+          borderWidth: stroke,
+          borderBottomWidth: 0,
+          borderColor: color,
+          marginBottom: -stroke,
+        }}
+      />
+      <View
+        style={{
+          width: body,
+          height: body * 0.72,
+          borderRadius: size * 0.08,
+          borderWidth: stroke,
+          borderColor: color,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <View style={{ width: size * 0.1, height: size * 0.14, borderRadius: 1, backgroundColor: color }} />
+      </View>
+    </View>
+  );
+}
+
+export function AppChromeVolumeOnGlyph({ color = m3Colors.onSurface, size = 24 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size);
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: size * 0.22,
+          height: size * 0.28,
+          backgroundColor: color,
+          borderRadius: 2,
+          marginRight: size * 0.22,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          left: size * 0.28,
+          width: 0,
+          height: 0,
+          borderTopWidth: size * 0.22,
+          borderBottomWidth: size * 0.22,
+          borderRightWidth: size * 0.2,
+          borderTopColor: 'transparent',
+          borderBottomColor: 'transparent',
+          borderRightColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          right: size * 0.12,
+          width: size * 0.28,
+          height: size * 0.28,
+          borderRadius: size * 0.14,
+          borderWidth: stroke,
+          borderColor: color,
+          borderLeftWidth: 0,
+        }}
+      />
+    </View>
+  );
+}
+
+export function AppChromeVolumeOffGlyph({ color = m3Colors.onSurface, size = 24 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size);
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <AppChromeVolumeOnGlyph color={color} size={size} />
+      <View
+        style={{
+          position: 'absolute',
+          width: size * 0.72,
+          height: stroke,
+          backgroundColor: color,
+          borderRadius: 1,
+          transform: [{ rotate: '-35deg' }],
+        }}
+      />
+    </View>
+  );
+}
+
+export function AppChromeInfoGlyph({ color = m3Colors.onSurface, size = 24 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size);
+  const ring = size * 0.78;
+  const dot = Math.max(2, size * 0.1);
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: ring,
+          height: ring,
+          borderRadius: ring / 2,
+          borderWidth: stroke,
+          borderColor: color,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <View style={{ width: dot, height: dot, borderRadius: dot / 2, backgroundColor: color, marginBottom: size * 0.06 }} />
+        <View style={{ width: stroke, height: size * 0.22, borderRadius: 1, backgroundColor: color }} />
+      </View>
+    </View>
+  );
+}
+
+export function AppChromeWarningGlyph({ color = m3Colors.error, size = 24 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size);
+  const dot = Math.max(2, size * 0.1);
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: 0,
+          height: 0,
+          borderLeftWidth: size * 0.38,
+          borderRightWidth: size * 0.38,
+          borderBottomWidth: size * 0.66,
+          borderLeftColor: 'transparent',
+          borderRightColor: 'transparent',
+          borderBottomColor: color,
+          opacity: 0.2,
+        }}
+      />
+      <View style={{ position: 'absolute', width: stroke, height: size * 0.22, backgroundColor: color, top: size * 0.28, borderRadius: 1 }} />
+      <View style={{ position: 'absolute', width: dot, height: dot, borderRadius: dot / 2, backgroundColor: color, bottom: size * 0.22 }} />
+    </View>
+  );
+}
+
+export function AppChromeSignalGlyph({ color = m3Colors.onSurfaceVariant, size = 24 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size);
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: size * 0.55,
+          height: size * 0.55,
+          borderRadius: size * 0.28,
+          borderWidth: stroke,
+          borderColor: color,
+          borderBottomWidth: 0,
+          borderLeftWidth: 0,
+          transform: [{ rotate: '-45deg' }],
+          marginTop: size * 0.1,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          width: size * 0.32,
+          height: size * 0.32,
+          borderRadius: size * 0.16,
+          borderWidth: stroke,
+          borderColor: color,
+          borderBottomWidth: 0,
+          borderLeftWidth: 0,
+          transform: [{ rotate: '-45deg' }],
+          top: size * 0.34,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          width: size * 0.12,
+          height: size * 0.12,
+          borderRadius: size * 0.06,
+          backgroundColor: color,
+          bottom: size * 0.22,
+        }}
+      />
+    </View>
+  );
+}
+
+export function AppChromeHourglassGlyph({ color = m3Colors.onSurfaceVariant, size = 24 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size);
+  const frame = size * 0.5;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View style={{ width: frame, height: stroke, backgroundColor: color, borderRadius: 1 }} />
+      <View
+        style={{
+          width: frame * 0.7,
+          height: size * 0.22,
+          borderLeftWidth: stroke,
+          borderRightWidth: stroke,
+          borderColor: color,
+          marginVertical: 1,
+        }}
+      />
+      <View style={{ width: frame * 0.35, height: stroke, backgroundColor: color, borderRadius: 1 }} />
+      <View
+        style={{
+          width: frame * 0.7,
+          height: size * 0.22,
+          borderLeftWidth: stroke,
+          borderRightWidth: stroke,
+          borderColor: color,
+          marginVertical: 1,
+        }}
+      />
+      <View style={{ width: frame, height: stroke, backgroundColor: color, borderRadius: 1 }} />
+    </View>
+  );
+}
+
+export function AppChromeBellGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size);
+  const body = size * 0.52;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: body * 0.28,
+          height: body * 0.18,
+          borderTopLeftRadius: body * 0.14,
+          borderTopRightRadius: body * 0.14,
+          borderWidth: stroke,
+          borderBottomWidth: 0,
+          borderColor: color,
+          marginBottom: -1,
+        }}
+      />
+      <View
+        style={{
+          width: body,
+          height: body * 0.7,
+          borderTopLeftRadius: body * 0.5,
+          borderTopRightRadius: body * 0.5,
+          borderWidth: stroke,
+          borderColor: color,
+        }}
+      />
+      <View style={{ width: body * 1.15, height: stroke, backgroundColor: color, borderRadius: 1, marginTop: 1 }} />
+      <View
+        style={{
+          width: body * 0.22,
+          height: body * 0.14,
+          borderBottomLeftRadius: body * 0.11,
+          borderBottomRightRadius: body * 0.11,
+          backgroundColor: color,
+          marginTop: 1,
+        }}
+      />
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
   crosshair: {
     position: 'absolute',

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

@@ -1,14 +1,23 @@
 import type { ComponentType } from 'react';
+import { isAppIconName, type AppIconName } from '../../catalog/app-icon-names';
 import { APP_ICON_SIZE } from './app-icon-size-catalog';
 import {
+  AppChromeArrowDownRightGlyph,
+  AppChromeArrowRightGlyph,
+  AppChromeArrowUpRightGlyph,
+  AppChromeAttachmentGlyph,
   AppChromeBackGlyph,
+  AppChromeBellGlyph,
   AppChromeBookmarkGlyph,
   AppChromeBoostGlyph,
   AppChromeChatGlyph,
+  AppChromeCheckGlyph,
   AppChromeChevronDownGlyph,
   AppChromeChevronRightGlyph,
   AppChromeCloseGlyph,
   AppChromeCommunitiesGlyph,
+  AppChromeCopyGlyph,
+  AppChromeDownloadGlyph,
   AppChromeEditGlyph,
   AppChromeEventsGlyph,
   AppChromeFireGlyph,
@@ -16,24 +25,30 @@ import {
   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,
@@ -46,8 +61,13 @@ import {
   AppChromeTabDiscoverGlyph,
   AppChromeTabFlashGlyph,
   AppChromeTabVibesGlyph,
+  AppChromeThumbsUpFilledGlyph,
+  AppChromeThumbsUpGlyph,
   AppChromeVisibilityGlyph,
   AppChromeVisibilityOffGlyph,
+  AppChromeVolumeOffGlyph,
+  AppChromeVolumeOnGlyph,
+  AppChromeWarningGlyph,
   type AppChromeGlyphProps,
 } from './app-glyphs';
 import {
@@ -60,61 +80,8 @@ import {
   ComposeVideoGlyph,
 } from './compose-glyphs';
 
-export type AppIconName =
-  | 'search'
-  | 'hunt'
-  | 'back'
-  | 'overflow'
-  | 'location'
-  | 'mic'
-  | 'send'
-  | 'chat'
-  | 'close'
-  | 'chevron-down'
-  | 'chevron-right'
-  | 'flip-camera'
-  | 'flash'
-  | 'gallery'
-  | 'video'
-  | 'camera'
-  | 'trash'
-  | 'globe'
-  | 'tab-discover'
-  | 'tab-vibes'
-  | 'tab-flash'
-  | 'tab-chat'
-  | 'boost'
-  | 'fire'
-  | 'settings'
-  | 'edit'
-  | 'incognito'
-  | 'events'
-  | 'shield'
-  | 'profile'
-  | 'bookmark'
-  | 'list'
-  | 'communities'
-  | 'star'
-  | 'sign-out'
-  | 'publish'
-  | 'story'
-  | 'story-music'
-  | 'story-sticker'
-  | 'story-text'
-  | 'story-effects'
-  | 'story-mention'
-  | 'repost'
-  | 'heart'
-  | 'heart-filled'
-  | 'thumbs-up'
-  | 'thumbs-up-filled'
-  | 'play'
-  | 'pause'
-  | 'plus'
-  | 'followers'
-  | 'mention'
-  | 'visibility'
-  | 'visibility-off';
+export type { AppIconName };
+export { isAppIconName };
 
 const ICON_REGISTRY: Record<AppIconName, ComponentType<AppChromeGlyphProps>> = {
   search: AppChromeSearchGlyph,
@@ -171,6 +138,25 @@ const ICON_REGISTRY: Record<AppIconName, ComponentType<AppChromeGlyphProps>> = {
   mention: ComposeMentionGlyph,
   visibility: AppChromeVisibilityGlyph,
   'visibility-off': AppChromeVisibilityOffGlyph,
+  check: AppChromeCheckGlyph,
+  'arrow-right': AppChromeArrowRightGlyph,
+  'arrow-up-right': AppChromeArrowUpRightGlyph,
+  'arrow-down-right': AppChromeArrowDownRightGlyph,
+  reply: AppChromeReplyGlyph,
+  pending: AppChromePendingGlyph,
+  download: AppChromeDownloadGlyph,
+  'radio-unchecked': AppChromeRadioUncheckedGlyph,
+  copy: AppChromeCopyGlyph,
+  attachment: AppChromeAttachmentGlyph,
+  poll: AppChromePollGlyph,
+  lock: AppChromeLockGlyph,
+  'volume-on': AppChromeVolumeOnGlyph,
+  'volume-off': AppChromeVolumeOffGlyph,
+  info: AppChromeInfoGlyph,
+  warning: AppChromeWarningGlyph,
+  signal: AppChromeSignalGlyph,
+  hourglass: AppChromeHourglassGlyph,
+  bell: AppChromeBellGlyph,
 };
 
 export type AppIconProps = {
@@ -181,6 +167,12 @@ export type AppIconProps = {
 
 export function AppIcon({ name, color, size = APP_ICON_SIZE.composer }: AppIconProps) {
   const Glyph = ICON_REGISTRY[name];
+  if (!Glyph) {
+    if (__DEV__) {
+      console.warn(`[AppIcon] unknown icon name: ${name}`);
+    }
+    return null;
+  }
   return <Glyph color={color} size={size} />;
 }