@proulr/sdui-components 0.1.65 → 0.1.67

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

@@ -1,439 +0,0 @@
-import { StyleSheet, Text, View } from 'react-native';
-import { m3Colors } from '../theme/proulr-theme';
-
-type GlyphProps = {
-  color?: string;
-  size?: number;
-};
-
-export function ComposeCloseGlyph({ color = m3Colors.onSurface, size = 18 }: GlyphProps) {
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View style={[styles.diag, { width: size, backgroundColor: color, transform: [{ rotate: '45deg' }] }]} />
-      <View style={[styles.diag, { width: size, backgroundColor: color, transform: [{ rotate: '-45deg' }] }]} />
-    </View>
-  );
-}
-
-export function ComposeCameraGlyph({ color = m3Colors.primary, size = 24 }: GlyphProps) {
-  const bodyW = size * 0.92;
-  const bodyH = size * 0.62;
-  const lens = size * 0.28;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: bodyW,
-          height: bodyH,
-          borderRadius: size * 0.12,
-          borderWidth: 1.8,
-          borderColor: color,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <View
-          style={{
-            width: lens,
-            height: lens,
-            borderRadius: lens / 2,
-            borderWidth: 1.8,
-            borderColor: color,
-          }}
-        />
-      </View>
-      <View
-        style={{
-          position: 'absolute',
-          top: size * 0.14,
-          right: size * 0.18,
-          width: size * 0.16,
-          height: size * 0.1,
-          borderRadius: 2,
-          backgroundColor: color,
-        }}
-      />
-    </View>
-  );
-}
-
-export function ComposeGalleryGlyph({ color = m3Colors.primary, size = 24 }: GlyphProps) {
-  const frame = size * 0.88;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: frame,
-          height: frame,
-          borderRadius: size * 0.14,
-          borderWidth: 1.8,
-          borderColor: color,
-          overflow: 'hidden',
-        }}
-      >
-        <View
-          style={{
-            position: 'absolute',
-            bottom: frame * 0.12,
-            left: frame * 0.1,
-            width: frame * 0.42,
-            height: frame * 0.22,
-            borderRadius: 2,
-            backgroundColor: color,
-          }}
-        />
-        <View
-          style={{
-            position: 'absolute',
-            top: frame * 0.16,
-            right: frame * 0.14,
-            width: frame * 0.18,
-            height: frame * 0.18,
-            borderRadius: frame * 0.09,
-            backgroundColor: color,
-          }}
-        />
-      </View>
-    </View>
-  );
-}
-
-export function ComposeVideoGlyph({ color = m3Colors.primary, size = 24 }: GlyphProps) {
-  const frame = size * 0.9;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: frame,
-          height: frame * 0.72,
-          borderRadius: size * 0.1,
-          borderWidth: 1.8,
-          borderColor: color,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <View
-          style={{
-            width: 0,
-            height: 0,
-            borderTopWidth: size * 0.14,
-            borderBottomWidth: size * 0.14,
-            borderLeftWidth: size * 0.22,
-            borderTopColor: 'transparent',
-            borderBottomColor: 'transparent',
-            borderLeftColor: color,
-            marginLeft: size * 0.04,
-          }}
-        />
-      </View>
-    </View>
-  );
-}
-
-export function ComposeGlobeGlyph({ color = m3Colors.primary, size = 16 }: GlyphProps) {
-  const diameter = size;
-  return (
-    <View
-      style={{
-        width: diameter,
-        height: diameter,
-        borderRadius: diameter / 2,
-        borderWidth: 1.4,
-        borderColor: color,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <View style={{ width: diameter * 0.55, height: 1.2, backgroundColor: color }} />
-      <View
-        style={{
-          position: 'absolute',
-          width: diameter * 0.42,
-          height: diameter * 0.72,
-          borderRadius: diameter * 0.21,
-          borderWidth: 1.2,
-          borderColor: color,
-        }}
-      />
-    </View>
-  );
-}
-
-/** Mala / viagem — chrome badge. */
-export function ComposeTravelGlyph({ color = m3Colors.primary, size = 24 }: GlyphProps) {
-  const stroke = Math.max(1.4, size * 0.07);
-  const bodyW = size * 0.72;
-  const bodyH = size * 0.52;
-  const handleW = size * 0.34;
-  const handleH = size * 0.18;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: handleW,
-          height: handleH,
-          borderTopLeftRadius: handleW * 0.35,
-          borderTopRightRadius: handleW * 0.35,
-          borderWidth: stroke,
-          borderBottomWidth: 0,
-          borderColor: color,
-          marginBottom: -stroke,
-        }}
-      />
-      <View
-        style={{
-          width: bodyW,
-          height: bodyH,
-          borderRadius: size * 0.1,
-          borderWidth: stroke,
-          borderColor: color,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <View style={{ width: stroke, height: bodyH * 0.55, backgroundColor: color, borderRadius: 1 }} />
-      </View>
-    </View>
-  );
-}
-
-export function ComposeFollowersGlyph({ color = m3Colors.onPrimary, size = 20 }: GlyphProps) {
-  const head = size * 0.22;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: head,
-          height: head,
-          borderRadius: head / 2,
-          backgroundColor: color,
-          marginBottom: 1,
-        }}
-      />
-      <View
-        style={{
-          width: size * 0.52,
-          height: size * 0.24,
-          borderTopLeftRadius: size * 0.26,
-          borderTopRightRadius: size * 0.26,
-          backgroundColor: color,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          right: size * 0.08,
-          bottom: size * 0.18,
-          width: size * 0.22,
-          height: size * 0.22,
-          borderRadius: size * 0.11,
-          borderWidth: 1.4,
-          borderColor: color,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <View
-          style={{
-            width: 0,
-            height: 0,
-            borderLeftWidth: size * 0.05,
-            borderRightWidth: size * 0.05,
-            borderBottomWidth: size * 0.08,
-            borderLeftColor: 'transparent',
-            borderRightColor: 'transparent',
-            borderBottomColor: color,
-            transform: [{ rotate: '-90deg' }],
-            marginLeft: size * 0.01,
-          }}
-        />
-      </View>
-    </View>
-  );
-}
-
-export function ComposeFollowingGlyph({ color = m3Colors.onPrimary, size = 20 }: GlyphProps) {
-  const head = size * 0.22;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: head,
-          height: head,
-          borderRadius: head / 2,
-          backgroundColor: color,
-          marginBottom: 1,
-        }}
-      />
-      <View
-        style={{
-          width: size * 0.52,
-          height: size * 0.24,
-          borderTopLeftRadius: size * 0.26,
-          borderTopRightRadius: size * 0.26,
-          backgroundColor: color,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          right: size * 0.1,
-          bottom: size * 0.2,
-          width: size * 0.18,
-          height: size * 0.1,
-          borderBottomWidth: 1.6,
-          borderRightWidth: 1.6,
-          borderColor: color,
-          transform: [{ rotate: '45deg' }],
-        }}
-      />
-    </View>
-  );
-}
-
-export function ComposeMentionGlyph({ color = m3Colors.onPrimary, size = 20 }: GlyphProps) {
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <Text style={{ color, fontSize: size * 0.72, fontWeight: '700', lineHeight: size * 0.8 }}>@</Text>
-    </View>
-  );
-}
-
-export function ComposeTrashGlyph({ color = m3Colors.primary, size = 22 }: GlyphProps) {
-  const binW = size * 0.62;
-  const binH = size * 0.58;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View style={{ width: binW * 1.1, height: 1.6, backgroundColor: color, marginBottom: 2 }} />
-      <View
-        style={{
-          width: binW,
-          height: binH,
-          borderBottomLeftRadius: 3,
-          borderBottomRightRadius: 3,
-          borderWidth: 1.6,
-          borderTopWidth: 0,
-          borderColor: color,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          top: size * 0.2,
-          width: binW * 0.42,
-          height: 1.6,
-          backgroundColor: color,
-        }}
-      />
-    </View>
-  );
-}
-
-export function ComposePostGlyph({ color = m3Colors.onPrimary, size = 24 }: GlyphProps) {
-  const stroke = Math.max(1.8, size * 0.075);
-  const frame = size * 0.74;
-  const plusLen = frame * 0.42;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: frame,
-          height: frame,
-          borderRadius: size * 0.12,
-          borderWidth: stroke,
-          borderColor: color,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <View style={{ width: plusLen, height: stroke, backgroundColor: color, borderRadius: 1 }} />
-        <View
-          style={{
-            position: 'absolute',
-            width: stroke,
-            height: plusLen,
-            backgroundColor: color,
-            borderRadius: 1,
-          }}
-        />
-      </View>
-    </View>
-  );
-}
-
-export function ComposeStoryGlyph({ color = m3Colors.primary, size = 22 }: GlyphProps) {
-  const ring = size * 0.82;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: ring,
-          height: ring,
-          borderRadius: ring / 2,
-          borderWidth: 2,
-          borderColor: color,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <View
-          style={{
-            width: ring * 0.42,
-            height: ring * 0.42,
-            borderRadius: ring * 0.21,
-            backgroundColor: color,
-          }}
-        />
-      </View>
-    </View>
-  );
-}
-
-export function ComposeLiveGlyph({ color = m3Colors.primary, size = 22 }: GlyphProps) {
-  const bodyW = size * 0.88;
-  const bodyH = size * 0.58;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: bodyW,
-          height: bodyH,
-          borderRadius: size * 0.1,
-          borderWidth: 1.8,
-          borderColor: color,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <View
-          style={{
-            width: bodyW * 0.24,
-            height: bodyH * 0.48,
-            borderRadius: 2,
-            backgroundColor: color,
-          }}
-        />
-      </View>
-      <View
-        style={{
-          position: 'absolute',
-          right: size * 0.04,
-          top: size * 0.2,
-          width: size * 0.14,
-          height: size * 0.1,
-          borderRadius: 2,
-          backgroundColor: color,
-        }}
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  diag: {
-    position: 'absolute',
-    height: 1.8,
-    borderRadius: 1,
-  },
-});