@squad-sports/react-native 1.3.1

package/src/components/audio/recording/AudioRecording.tsx

@@ -0,0 +1,232 @@
+/**
+ * Audio recording components — full recording stack.
+ * Ported from squad-demo/src/components/audio/recording-footer/.
+ * Components: RecordButton, PlaybackButton, SendButton, RecordingTimer, RecordingFooter.
+ */
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { View, Text, StyleSheet, Pressable, Animated } from 'react-native';
+import { Audio } from 'expo-av';
+import { Colors } from '../../../theme/ThemeContext';
+
+// --- RecordButton ---
+export function RecordButton({
+  isRecording,
+  onPressIn,
+  onPressOut,
+  color = Colors.purple1,
+}: { isRecording: boolean; onPressIn: () => void; onPressOut: () => void; color?: string }) {
+  const pulseAnim = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    if (isRecording) {
+      Animated.loop(Animated.sequence([
+        Animated.timing(pulseAnim, { toValue: 1.15, duration: 800, useNativeDriver: true }),
+        Animated.timing(pulseAnim, { toValue: 1, duration: 800, useNativeDriver: true }),
+      ])).start();
+    } else {
+      pulseAnim.stopAnimation();
+      pulseAnim.setValue(1);
+    }
+  }, [isRecording, pulseAnim]);
+
+  return (
+    <Animated.View style={{ transform: [{ scale: pulseAnim }] }}>
+      <Pressable
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        style={[styles.recordButton, isRecording && styles.recordButtonActive, { borderColor: isRecording ? Colors.red : color }]}
+        accessibilityRole="button"
+        accessibilityLabel={isRecording ? 'Stop recording' : 'Start recording'}
+      >
+        {isRecording ? (
+          <View style={styles.stopIcon} />
+        ) : (
+          <View style={[styles.micIcon, { backgroundColor: color }]} />
+        )}
+      </Pressable>
+    </Animated.View>
+  );
+}
+
+// --- PlaybackButton ---
+export function PlaybackButton({
+  isPlaying,
+  onPress,
+}: { isPlaying: boolean; onPress: () => void }) {
+  return (
+    <Pressable style={styles.playbackButton} onPress={onPress} accessibilityRole="button" accessibilityLabel={isPlaying ? 'Pause' : 'Play'}>
+      {isPlaying ? (
+        <View style={styles.pauseIcon}>
+          <View style={styles.pauseBar} />
+          <View style={styles.pauseBar} />
+        </View>
+      ) : (
+        <View style={styles.playIcon} />
+      )}
+    </Pressable>
+  );
+}
+
+// --- SendButton ---
+export function SendButton({ onPress, disabled, color = Colors.purple1 }: { onPress: () => void; disabled?: boolean; color?: string }) {
+  return (
+    <Pressable
+      style={[styles.sendButton, { backgroundColor: disabled ? Colors.gray3 : color }]}
+      onPress={onPress}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityLabel="Send"
+    >
+      <Text style={[styles.sendIcon, { color: disabled ? Colors.gray6 : Colors.gray1 }]}>{'>'}</Text>
+    </Pressable>
+  );
+}
+
+// --- RecordingTimer ---
+export function RecordingTimer({ seconds }: { seconds: number }) {
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return (
+    <Text style={styles.timer} accessibilityLabel={`Recording: ${m} minutes ${s} seconds`}>
+      {m}:{s.toString().padStart(2, '0')}
+    </Text>
+  );
+}
+
+// --- Waveform ---
+export function Waveform({ levels, progress = 0, color = Colors.white }: { levels?: number[]; progress?: number; color?: string }) {
+  const bars = levels ?? Array.from({ length: 30 }, () => Math.random());
+  const filledBars = Math.floor(bars.length * progress);
+
+  return (
+    <View style={styles.waveformContainer}>
+      {bars.map((level, i) => (
+        <View
+          key={i}
+          style={[
+            styles.waveformBar,
+            { height: 4 + level * 20, backgroundColor: i < filledBars ? color : Colors.gray5 },
+          ]}
+        />
+      ))}
+    </View>
+  );
+}
+
+// --- RecordingFooter ---
+export interface RecordingFooterProps {
+  onRecordingComplete: (uri: string, durationMs: number) => void;
+  onCancel?: () => void;
+  primaryColor?: string;
+  disabled?: boolean;
+}
+
+export function RecordingFooter({ onRecordingComplete, onCancel, primaryColor = Colors.purple1, disabled }: RecordingFooterProps) {
+  const [state, setState] = useState<'idle' | 'recording' | 'preview'>('idle');
+  const [seconds, setSeconds] = useState(0);
+  const [recordingUri, setRecordingUri] = useState<string | null>(null);
+  const recordingRef = useRef<Audio.Recording | null>(null);
+  const timerRef = useRef<ReturnType<typeof setInterval> | undefined>(undefined);
+
+  const startRecording = useCallback(async () => {
+    try {
+      const { status } = await Audio.requestPermissionsAsync();
+      if (status !== 'granted') return;
+      await Audio.setAudioModeAsync({ allowsRecordingIOS: true, playsInSilentModeIOS: true });
+      const recording = new Audio.Recording();
+      await recording.prepareToRecordAsync(Audio.RecordingOptionsPresets.HIGH_QUALITY);
+      await recording.startAsync();
+      recordingRef.current = recording;
+      setState('recording');
+      setSeconds(0);
+      timerRef.current = setInterval(() => setSeconds(s => s + 1), 1000);
+    } catch {}
+  }, []);
+
+  const stopRecording = useCallback(async () => {
+    if (timerRef.current) clearInterval(timerRef.current);
+    try {
+      if (recordingRef.current) {
+        await recordingRef.current.stopAndUnloadAsync();
+        const uri = recordingRef.current.getURI();
+        setRecordingUri(uri);
+        recordingRef.current = null;
+        setState('preview');
+      }
+    } catch { setState('idle'); }
+  }, []);
+
+  const handleSend = useCallback(() => {
+    if (recordingUri) {
+      onRecordingComplete(recordingUri, seconds * 1000);
+      setRecordingUri(null);
+      setState('idle');
+      setSeconds(0);
+    }
+  }, [recordingUri, seconds, onRecordingComplete]);
+
+  const handleCancel = useCallback(() => {
+    setRecordingUri(null);
+    setState('idle');
+    setSeconds(0);
+    onCancel?.();
+  }, [onCancel]);
+
+  if (disabled) return null;
+
+  return (
+    <View style={styles.footer}>
+      {state === 'idle' && (
+        <RecordButton isRecording={false} onPressIn={startRecording} onPressOut={() => {}} color={primaryColor} />
+      )}
+      {state === 'recording' && (
+        <View style={styles.recordingRow}>
+          <Pressable onPress={handleCancel} style={styles.cancelButton}>
+            <Text style={styles.cancelText}>x</Text>
+          </Pressable>
+          <View style={styles.recordingCenter}>
+            <View style={styles.recordingDot} />
+            <RecordingTimer seconds={seconds} />
+          </View>
+          <Pressable onPress={stopRecording} style={[styles.stopButton, { backgroundColor: primaryColor }]}>
+            <View style={styles.stopIconSmall} />
+          </Pressable>
+        </View>
+      )}
+      {state === 'preview' && (
+        <View style={styles.previewRow}>
+          <Pressable onPress={handleCancel} style={styles.cancelButton}>
+            <Text style={styles.cancelText}>x</Text>
+          </Pressable>
+          <RecordingTimer seconds={seconds} />
+          <SendButton onPress={handleSend} color={primaryColor} />
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  recordButton: { width: 64, height: 64, borderRadius: 32, borderWidth: 3, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(110,130,231,0.1)' },
+  recordButtonActive: { backgroundColor: 'rgba(255,68,120,0.1)' },
+  micIcon: { width: 18, height: 28, borderRadius: 9 },
+  stopIcon: { width: 20, height: 20, borderRadius: 4, backgroundColor: Colors.red },
+  playbackButton: { width: 44, height: 44, borderRadius: 22, backgroundColor: Colors.white, justifyContent: 'center', alignItems: 'center' },
+  pauseIcon: { flexDirection: 'row', gap: 3 },
+  pauseBar: { width: 3, height: 14, backgroundColor: Colors.gray1, borderRadius: 1 },
+  playIcon: { width: 0, height: 0, borderLeftWidth: 10, borderTopWidth: 6, borderBottomWidth: 6, borderLeftColor: Colors.gray1, borderTopColor: 'transparent', borderBottomColor: 'transparent', marginLeft: 2 },
+  sendButton: { width: 44, height: 44, borderRadius: 22, justifyContent: 'center', alignItems: 'center' },
+  sendIcon: { fontSize: 18, fontWeight: '700' },
+  timer: { color: Colors.white, fontSize: 16, fontVariant: ['tabular-nums'], fontWeight: '300' },
+  waveformContainer: { flexDirection: 'row', alignItems: 'center', gap: 2, height: 24 },
+  waveformBar: { width: 3, borderRadius: 1.5 },
+  footer: { padding: 16, alignItems: 'center' },
+  recordingRow: { flexDirection: 'row', alignItems: 'center', gap: 16, width: '100%' },
+  recordingCenter: { flex: 1, flexDirection: 'row', alignItems: 'center', gap: 8, justifyContent: 'center' },
+  recordingDot: { width: 10, height: 10, borderRadius: 5, backgroundColor: Colors.red },
+  cancelButton: { width: 40, height: 40, borderRadius: 20, backgroundColor: Colors.gray3, justifyContent: 'center', alignItems: 'center' },
+  cancelText: { color: Colors.white, fontSize: 18, fontWeight: '300' },
+  stopButton: { width: 40, height: 40, borderRadius: 20, justifyContent: 'center', alignItems: 'center' },
+  stopIconSmall: { width: 14, height: 14, borderRadius: 2, backgroundColor: Colors.white },
+  previewRow: { flexDirection: 'row', alignItems: 'center', gap: 16, width: '100%', justifyContent: 'space-between' },
+});

package/src/components/communities/CommunityComponents.tsx

@@ -0,0 +1,78 @@
+/**
+ * Community components.
+ * Ported from squad-demo/src/components/communities/*.
+ */
+import React from 'react';
+import { View, Text, StyleSheet, Pressable, FlatList } from 'react-native';
+import { Colors } from '../../theme/ThemeContext';
+import { BodyRegular, BodySmall, SubtitleSmall } from '../ux/text/Typography';
+
+// --- CommunityRow ---
+export function CommunityRow({
+  id, name, color, isSelected, onPress,
+}: { id: string; name: string; color?: string; isSelected?: boolean; onPress?: () => void }) {
+  const dotColor = color ?? Colors.purple1;
+  return (
+    <Pressable style={[styles.row, isSelected && [styles.rowSelected, { borderColor: dotColor }]]} onPress={onPress}>
+      <View style={[styles.dot, { backgroundColor: dotColor }]} />
+      <BodyRegular style={styles.rowName}>{name}</BodyRegular>
+      {isSelected && <Text style={[styles.check, { color: dotColor }]}>v</Text>}
+    </Pressable>
+  );
+}
+
+// --- CommunityTag ---
+export function CommunityTag({ name, color = Colors.purple1 }: { name: string; color?: string }) {
+  return (
+    <View style={[styles.tag, { backgroundColor: color }]}>
+      <Text style={styles.tagText}>{name.substring(0, 3).toUpperCase()}</Text>
+    </View>
+  );
+}
+
+// --- CommunityBottomSheet ---
+export function CommunityBottomSheet({
+  communities, selectedId, onSelect,
+}: { communities: Array<{ id: string; name: string; color?: string }>; selectedId?: string; onSelect: (id: string) => void }) {
+  return (
+    <FlatList
+      data={communities}
+      keyExtractor={item => item.id}
+      renderItem={({ item }) => (
+        <CommunityRow
+          id={item.id}
+          name={item.name}
+          color={item.color}
+          isSelected={item.id === selectedId}
+          onPress={() => onSelect(item.id)}
+        />
+      )}
+      contentContainerStyle={styles.list}
+    />
+  );
+}
+
+// --- OnboardingCommunitySelector ---
+export function OnboardingCommunitySelector({
+  communities, selectedId, onSelect,
+}: { communities: Array<{ id: string; name: string; color?: string }>; selectedId?: string; onSelect: (id: string) => void }) {
+  return (
+    <View style={styles.selectorContainer}>
+      {communities.map(c => (
+        <CommunityRow key={c.id} {...c} isSelected={c.id === selectedId} onPress={() => onSelect(c.id)} />
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center', padding: 16, backgroundColor: Colors.gray2, borderRadius: 12, borderWidth: 2, borderColor: 'transparent', marginBottom: 8 },
+  rowSelected: { backgroundColor: 'rgba(110,130,231,0.1)' },
+  dot: { width: 32, height: 32, borderRadius: 16, marginRight: 12 },
+  rowName: { color: Colors.white, flex: 1, fontWeight: '600' },
+  check: { fontSize: 18, fontWeight: '700' },
+  tag: { borderRadius: 6, paddingHorizontal: 6, paddingVertical: 2 },
+  tagText: { color: Colors.white, fontSize: 8, fontWeight: '800' },
+  list: { padding: 16 },
+  selectorContainer: { gap: 8 },
+});

package/src/components/dialogs/AllDialogs.tsx

@@ -0,0 +1,123 @@
+/**
+ * All dialog components.
+ * Ported from squad-demo/src/components/dialogs/*.
+ * 17 dialog types: permission dialogs, confirmations, introductions.
+ */
+import React from 'react';
+import { View, Text, StyleSheet, Pressable, Linking } from 'react-native';
+import { Colors } from '../../theme/ThemeContext';
+import Button from '../ux/buttons/Button';
+import { TitleSmall, BodyRegular } from '../ux/text/Typography';
+
+// --- Base Dialog ---
+interface BaseDialogProps {
+  visible: boolean;
+  title: string;
+  message: string;
+  icon?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  destructive?: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+function BaseDialog({ visible, title, message, icon, confirmLabel = 'OK', cancelLabel = 'Cancel', destructive, onConfirm, onCancel }: BaseDialogProps) {
+  if (!visible) return null;
+  return (
+    <View style={styles.overlay} accessibilityRole="alert">
+      <View style={styles.dialog}>
+        {icon && <View style={styles.iconCircle}><Text style={styles.icon}>{icon}</Text></View>}
+        <TitleSmall style={styles.title}>{title}</TitleSmall>
+        <BodyRegular style={styles.message}>{message}</BodyRegular>
+        <View style={styles.buttons}>
+          <Button style={[styles.confirmBtn, destructive && styles.destructiveBtn]} onPress={onConfirm}>
+            <Text style={[styles.confirmText, destructive && styles.destructiveText]}>{confirmLabel}</Text>
+          </Button>
+          <Button style={styles.cancelBtn} onPress={onCancel}>
+            <Text style={styles.cancelText}>{cancelLabel}</Text>
+          </Button>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+// --- Permission Dialogs ---
+export function MicrophonePermissionDialog({ visible, onAllow, onDeny }: { visible: boolean; onAllow: () => void; onDeny: () => void }) {
+  return <BaseDialog visible={visible} title="Microphone Access" message="Squad needs microphone access to record freestyles and voice messages." icon="M" confirmLabel="Allow" onConfirm={onAllow} onCancel={onDeny} />;
+}
+
+export function CameraPermissionDialog({ visible, onAllow, onDeny }: { visible: boolean; onAllow: () => void; onDeny: () => void }) {
+  return <BaseDialog visible={visible} title="Camera Access" message="Squad needs camera access to take profile photos." icon="C" confirmLabel="Allow" onConfirm={onAllow} onCancel={onDeny} />;
+}
+
+export function ImagesPermissionDialog({ visible, onAllow, onDeny }: { visible: boolean; onAllow: () => void; onDeny: () => void }) {
+  return <BaseDialog visible={visible} title="Photo Library" message="Squad needs access to your photos for your profile picture." icon="I" confirmLabel="Allow" onConfirm={onAllow} onCancel={onDeny} />;
+}
+
+export function ContactPermissionDialog({ visible, onAllow, onDeny }: { visible: boolean; onAllow: () => void; onDeny: () => void }) {
+  return <BaseDialog visible={visible} title="Contacts Access" message="Squad can find your friends who are already on the app." icon="P" confirmLabel="Allow" onConfirm={onAllow} onCancel={onDeny} />;
+}
+
+export function NotificationsPermissionDialog({ visible, onAllow, onDeny }: { visible: boolean; onAllow: () => void; onDeny: () => void }) {
+  return <BaseDialog visible={visible} title="Notifications" message="Get notified when you receive messages, calls, and squad updates." icon="N" confirmLabel="Allow" onConfirm={onAllow} onCancel={onDeny} />;
+}
+
+// --- Confirmation Dialogs ---
+export function DeleteConfirmationDialog({ visible, onConfirm, onCancel }: { visible: boolean; onConfirm: () => void; onCancel: () => void }) {
+  return <BaseDialog visible={visible} title="Delete" message="Are you sure? This action cannot be undone." confirmLabel="Delete" destructive onConfirm={onConfirm} onCancel={onCancel} />;
+}
+
+export function BlockConfirmationDialog({ visible, userName, onConfirm, onCancel }: { visible: boolean; userName: string; onConfirm: () => void; onCancel: () => void }) {
+  return <BaseDialog visible={visible} title="Block User" message={`Are you sure you want to block ${userName}? They won't be able to contact you.`} confirmLabel="Block" destructive onConfirm={onConfirm} onCancel={onCancel} />;
+}
+
+export function UnblockConfirmationDialog({ visible, userName, onConfirm, onCancel }: { visible: boolean; userName: string; onConfirm: () => void; onCancel: () => void }) {
+  return <BaseDialog visible={visible} title="Unblock User" message={`Unblock ${userName}?`} confirmLabel="Unblock" onConfirm={onConfirm} onCancel={onCancel} />;
+}
+
+export function FlagConfirmationDialog({ visible, onConfirm, onCancel }: { visible: boolean; onConfirm: () => void; onCancel: () => void }) {
+  return <BaseDialog visible={visible} title="Report Content" message="Are you sure you want to report this content? Our team will review it." confirmLabel="Report" destructive onConfirm={onConfirm} onCancel={onCancel} />;
+}
+
+export function RemoveFromSquadDialog({ visible, userName, onConfirm, onCancel }: { visible: boolean; userName: string; onConfirm: () => void; onCancel: () => void }) {
+  return <BaseDialog visible={visible} title="Remove from Squad" message={`Remove ${userName} from your squad?`} confirmLabel="Remove" destructive onConfirm={onConfirm} onCancel={onCancel} />;
+}
+
+export function NoConnectionDialog({ visible, onDismiss }: { visible: boolean; onDismiss: () => void }) {
+  return <BaseDialog visible={visible} title="No Connection" message="Please check your internet connection and try again." confirmLabel="OK" onConfirm={onDismiss} onCancel={onDismiss} />;
+}
+
+// --- Special Dialogs ---
+export function VersionUpgradeDialog({ visible, onUpdate, onDismiss, hardLock = false }: { visible: boolean; onUpdate: () => void; onDismiss: () => void; hardLock?: boolean }) {
+  return <BaseDialog visible={visible} title="Update Available" message={hardLock ? "A required update is available. Please update to continue." : "A new version is available with improvements."} confirmLabel="Update" cancelLabel={hardLock ? "" : "Later"} onConfirm={onUpdate} onCancel={onDismiss} />;
+}
+
+export function CollectEmailDialog({ visible, onSubmit, onDismiss }: { visible: boolean; onSubmit: (email: string) => void; onDismiss: () => void }) {
+  return <BaseDialog visible={visible} title="Stay Connected" message="Enter your email to receive important updates about your squad." confirmLabel="Submit" onConfirm={() => onSubmit('')} onCancel={onDismiss} />;
+}
+
+export function ProgressCongratulationDialog({ visible, title, message, onDismiss }: { visible: boolean; title: string; message: string; onDismiss: () => void }) {
+  return <BaseDialog visible={visible} title={title} message={message} confirmLabel="Awesome!" onConfirm={onDismiss} onCancel={onDismiss} />;
+}
+
+export function SquadLineInvitationDialog({ visible, callerName, onAccept, onDecline }: { visible: boolean; callerName: string; onAccept: () => void; onDecline: () => void }) {
+  return <BaseDialog visible={visible} title="Squad Line" message={`${callerName} is inviting you to a call`} confirmLabel="Accept" cancelLabel="Decline" onConfirm={onAccept} onCancel={onDecline} />;
+}
+
+const styles = StyleSheet.create({
+  overlay: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0,0,0,0.7)', justifyContent: 'center', alignItems: 'center', zIndex: 9999, padding: 32 },
+  dialog: { backgroundColor: Colors.gray2, borderRadius: 20, padding: 32, width: '100%', maxWidth: 340, alignItems: 'center' },
+  iconCircle: { width: 56, height: 56, borderRadius: 28, backgroundColor: Colors.purple1, justifyContent: 'center', alignItems: 'center', marginBottom: 16 },
+  icon: { color: Colors.white, fontSize: 24, fontWeight: '700' },
+  title: { color: Colors.white, marginBottom: 8, textAlign: 'center' },
+  message: { color: Colors.gray6, textAlign: 'center', marginBottom: 24 },
+  buttons: { width: '100%', gap: 8 },
+  confirmBtn: { height: 48, borderRadius: 24, backgroundColor: Colors.purple1, justifyContent: 'center', alignItems: 'center' },
+  confirmText: { color: Colors.gray1, fontSize: 15, fontWeight: '600' },
+  destructiveBtn: { backgroundColor: Colors.red },
+  destructiveText: { color: Colors.white },
+  cancelBtn: { height: 48, justifyContent: 'center', alignItems: 'center' },
+  cancelText: { color: Colors.gray6, fontSize: 15 },
+});

package/src/components/dialogs/ConfirmDialog.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { Colors } from '../../theme/ThemeContext';
+import Button from '../ux/buttons/Button';
+import { TitleSmall, BodyRegular } from '../ux/text/Typography';
+
+interface ConfirmDialogProps {
+  visible: boolean;
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  destructive?: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function ConfirmDialog({
+  visible,
+  title,
+  message,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  destructive = false,
+  onConfirm,
+  onCancel,
+}: ConfirmDialogProps) {
+  if (!visible) return null;
+
+  return (
+    <View style={styles.overlay}>
+      <View style={styles.dialog}>
+        <TitleSmall style={styles.title}>{title}</TitleSmall>
+        <BodyRegular style={styles.message}>{message}</BodyRegular>
+
+        <View style={styles.buttons}>
+          <Button
+            style={[styles.confirmButton, destructive && styles.destructiveButton]}
+            onPress={onConfirm}
+          >
+            <Text style={[styles.confirmText, destructive && styles.destructiveText]}>
+              {confirmLabel}
+            </Text>
+          </Button>
+          <Button style={styles.cancelButton} onPress={onCancel}>
+            <Text style={styles.cancelText}>{cancelLabel}</Text>
+          </Button>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.7)',
+    justifyContent: 'center', alignItems: 'center',
+    zIndex: 9999, padding: 32,
+  },
+  dialog: {
+    backgroundColor: Colors.gray2, borderRadius: 20,
+    padding: 32, width: '100%', maxWidth: 340, alignItems: 'center',
+  },
+  title: { color: Colors.white, marginBottom: 8, textAlign: 'center' },
+  message: { color: Colors.gray6, textAlign: 'center', marginBottom: 24 },
+  buttons: { width: '100%', gap: 8 },
+  confirmButton: {
+    height: 48, borderRadius: 24, backgroundColor: Colors.purple1,
+    justifyContent: 'center', alignItems: 'center',
+  },
+  confirmText: { color: Colors.gray1, fontSize: 15, fontWeight: '600' },
+  destructiveButton: { backgroundColor: Colors.red },
+  destructiveText: { color: Colors.white },
+  cancelButton: { height: 48, justifyContent: 'center', alignItems: 'center' },
+  cancelText: { color: Colors.gray6, fontSize: 15 },
+});

package/src/components/dialogs/PermissionDialog.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { View, Text, StyleSheet, Linking, Platform } from 'react-native';
+import { Colors } from '../../theme/ThemeContext';
+import Button from '../ux/buttons/Button';
+import { TitleSmall, BodyRegular } from '../ux/text/Typography';
+
+export type PermissionType = 'microphone' | 'camera' | 'contacts' | 'notifications' | 'photos';
+
+interface PermissionDialogProps {
+  type: PermissionType;
+  visible: boolean;
+  onAllow: () => void;
+  onDeny: () => void;
+  isDenied?: boolean;
+}
+
+const PERMISSION_CONFIG: Record<PermissionType, { icon: string; title: string; description: string }> = {
+  microphone: {
+    icon: 'M',
+    title: 'Microphone Access',
+    description: 'Squad needs microphone access to record freestyles and voice messages.',
+  },
+  camera: {
+    icon: 'C',
+    title: 'Camera Access',
+    description: 'Squad needs camera access to take profile photos.',
+  },
+  contacts: {
+    icon: 'P',
+    title: 'Contacts Access',
+    description: 'Squad can find your friends who are already on the app.',
+  },
+  notifications: {
+    icon: 'N',
+    title: 'Notifications',
+    description: 'Get notified when you receive messages, calls, and squad updates.',
+  },
+  photos: {
+    icon: 'I',
+    title: 'Photo Library',
+    description: 'Squad needs access to your photos to set your profile picture.',
+  },
+};
+
+export function PermissionDialog({
+  type,
+  visible,
+  onAllow,
+  onDeny,
+  isDenied = false,
+}: PermissionDialogProps) {
+  if (!visible) return null;
+
+  const config = PERMISSION_CONFIG[type];
+
+  return (
+    <View style={styles.overlay}>
+      <View style={styles.dialog}>
+        <View style={styles.iconContainer}>
+          <Text style={styles.icon}>{config.icon}</Text>
+        </View>
+
+        <TitleSmall style={styles.title}>{config.title}</TitleSmall>
+        <BodyRegular style={styles.description}>{config.description}</BodyRegular>
+
+        <View style={styles.buttons}>
+          {isDenied ? (
+            <>
+              <Button style={styles.settingsButton} onPress={() => Linking.openSettings()}>
+                <Text style={styles.settingsText}>Open Settings</Text>
+              </Button>
+              <Button style={styles.laterButton} onPress={onDeny}>
+                <Text style={styles.laterText}>Not Now</Text>
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button style={styles.allowButton} onPress={onAllow}>
+                <Text style={styles.allowText}>Allow</Text>
+              </Button>
+              <Button style={styles.laterButton} onPress={onDeny}>
+                <Text style={styles.laterText}>Not Now</Text>
+              </Button>
+            </>
+          )}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.7)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 9999,
+    padding: 32,
+  },
+  dialog: {
+    backgroundColor: Colors.gray2,
+    borderRadius: 20,
+    padding: 32,
+    width: '100%',
+    maxWidth: 340,
+    alignItems: 'center',
+  },
+  iconContainer: {
+    width: 64, height: 64, borderRadius: 32,
+    backgroundColor: Colors.purple1, justifyContent: 'center', alignItems: 'center',
+    marginBottom: 20,
+  },
+  icon: { color: Colors.white, fontSize: 28, fontWeight: '700' },
+  title: { color: Colors.white, marginBottom: 8, textAlign: 'center' },
+  description: { color: Colors.gray6, textAlign: 'center', marginBottom: 24 },
+  buttons: { width: '100%', gap: 8 },
+  allowButton: {
+    height: 48, borderRadius: 24, backgroundColor: Colors.purple1,
+    justifyContent: 'center', alignItems: 'center',
+  },
+  allowText: { color: Colors.gray1, fontSize: 15, fontWeight: '600' },
+  settingsButton: {
+    height: 48, borderRadius: 24, backgroundColor: Colors.purple1,
+    justifyContent: 'center', alignItems: 'center',
+  },
+  settingsText: { color: Colors.gray1, fontSize: 15, fontWeight: '600' },
+  laterButton: {
+    height: 48, justifyContent: 'center', alignItems: 'center',
+  },
+  laterText: { color: Colors.gray6, fontSize: 15 },
+});