kynjal-cli 2.0.6

package/dist/templates/demo/audio-player/audio-player-styled.tsx

@@ -0,0 +1,32 @@
+import { AudioPlayer } from '@/components/ui/audio-player';
+import { useColor } from '@/hooks/useColor';
+
+export function AudioPlayerStyled() {
+  const blue = useColor('indigo');
+
+  const sampleAudioUrl =
+    'https://www.thesoundarchive.com/ringtones/old-phone-ringing.wav';
+
+  return (
+    <AudioPlayer
+      source={{ uri: sampleAudioUrl }}
+      showControls={true}
+      showWaveform={true}
+      showTimer={true}
+      showProgressBar={true}
+      autoPlay={false}
+      style={{
+        borderRadius: 20,
+        shadowColor: '#000',
+        shadowOffset: {
+          width: 0,
+          height: 4,
+        },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+        elevation: 5,
+        backgroundColor: blue,
+      }}
+    />
+  );
+}

package/dist/templates/demo/audio-player/audio-player-waveform.tsx

@@ -0,0 +1,17 @@
+import { AudioPlayer } from '@/components/ui/audio-player';
+
+export function AudioPlayerWaveform() {
+  const sampleAudioUrl =
+    'https://www.thesoundarchive.com/ringtones/old-phone-ringing.wav';
+
+  return (
+    <AudioPlayer
+      source={{ uri: sampleAudioUrl }}
+      showControls={true}
+      showWaveform={true}
+      showTimer={true}
+      showProgressBar={false}
+      autoPlay={false}
+    />
+  );
+}

package/dist/templates/demo/audio-recorder/audio-recorder-callbacks.tsx

@@ -0,0 +1,65 @@
+import { AudioRecorder } from '@/components/ui/audio-recorder';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useState } from 'react';
+
+export function AudioRecorderCallbacks() {
+  const [status, setStatus] = useState('Ready to record');
+  const [recordingCount, setRecordingCount] = useState(0);
+
+  const handleRecordingStart = () => {
+    setStatus('🔴 Recording in progress...');
+    console.log('Recording started');
+  };
+
+  const handleRecordingStop = () => {
+    setStatus('✅ Recording stopped');
+    console.log('Recording stopped');
+  };
+
+  const handleRecordingComplete = (uri: string) => {
+    setRecordingCount((prev) => prev + 1);
+    setStatus(`📁 Recording #${recordingCount + 1} saved`);
+
+    // Reset status after 3 seconds
+    setTimeout(() => setStatus('Ready to record'), 3000);
+  };
+
+  const getOrdinalSuffix = (num: number) => {
+    const lastDigit = num % 10;
+    const lastTwoDigits = num % 100;
+
+    if (lastTwoDigits >= 11 && lastTwoDigits <= 13) return 'th';
+    if (lastDigit === 1) return 'st';
+    if (lastDigit === 2) return 'nd';
+    if (lastDigit === 3) return 'rd';
+    return 'th';
+  };
+
+  return (
+    <View style={{ width: '100%' }}>
+      <Text
+        variant='body'
+        style={{ marginBottom: 16, textAlign: 'center', fontWeight: '500' }}
+      >
+        Status: {status}
+      </Text>
+
+      <AudioRecorder
+        quality='high'
+        showWaveform={true}
+        showTimer={true}
+        maxDuration={180} // 3 minutes
+        onRecordingStart={handleRecordingStart}
+        onRecordingStop={handleRecordingStop}
+        onRecordingComplete={handleRecordingComplete}
+      />
+
+      {recordingCount > 0 && (
+        <Text variant='caption' style={{ marginTop: 12, textAlign: 'center' }}>
+          Total recordings: {recordingCount}
+        </Text>
+      )}
+    </View>
+  );
+}

package/dist/templates/demo/audio-recorder/audio-recorder-cloud.tsx

@@ -0,0 +1,67 @@
+import { AudioRecorder } from '@/components/ui/audio-recorder';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+import { ActivityIndicator } from 'react-native';
+
+export function AudioRecorderCloud() {
+  const [uploading, setUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+
+  const simulateCloudUpload = async (uri: string): Promise<string> => {
+    return new Promise((resolve) => {
+      setUploading(true);
+      setUploadProgress(0);
+
+      const interval = setInterval(() => {
+        setUploadProgress((prev) => {
+          if (prev >= 100) {
+            clearInterval(interval);
+            setUploading(false);
+            resolve(
+              `https://cloud-storage.example.com/audio/${Date.now()}.m4a`
+            );
+            return 100;
+          }
+          return prev + 10;
+        });
+      }, 200);
+    });
+  };
+
+  const handleRecordingComplete = async (uri: string) => {
+    try {
+      const cloudUrl = await simulateCloudUpload(uri);
+
+      console.log(`Recording uploaded to cloud storage!\n\nURL: ${cloudUrl}`);
+
+      setUploadProgress(0);
+    } catch (error) {
+      console.log('Failed to upload recording to cloud storage.');
+
+      setUploading(false);
+      setUploadProgress(0);
+    }
+  };
+
+  return (
+    <View style={{ width: '100%' }}>
+      <AudioRecorder
+        quality='high'
+        showWaveform={true}
+        showTimer={true}
+        maxDuration={600} // 10 minutes
+        onRecordingComplete={handleRecordingComplete}
+      />
+
+      {uploading && (
+        <View style={{ marginTop: 16, alignItems: 'center' }}>
+          <ActivityIndicator size='small' />
+          <Text variant='caption' style={{ marginTop: 8 }}>
+            Uploading... {uploadProgress}%
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+}

package/dist/templates/demo/audio-recorder/audio-recorder-demo.tsx

@@ -0,0 +1,27 @@
+import { AudioRecorder } from '@/components/ui/audio-recorder';
+
+export function AudioRecorderDemo() {
+  const handleRecordingComplete = (uri: string) => {
+    console.log('Recording saved to:', uri);
+  };
+
+  const handleRecordingStart = () => {
+    console.log('Recording started');
+  };
+
+  const handleRecordingStop = () => {
+    console.log('Recording stopped');
+  };
+
+  return (
+    <AudioRecorder
+      quality='high'
+      showWaveform={true}
+      showTimer={true}
+      maxDuration={300} // 5 minutes
+      onRecordingComplete={handleRecordingComplete}
+      onRecordingStart={handleRecordingStart}
+      onRecordingStop={handleRecordingStop}
+    />
+  );
+}

package/dist/templates/demo/audio-recorder/audio-recorder-hq.tsx

@@ -0,0 +1,24 @@
+import { AudioRecorder } from '@/components/ui/audio-recorder';
+import { RecordingPresets } from 'expo-audio';
+
+export function AudioRecorderHQ() {
+  const handleRecordingComplete = (uri: string) => {
+    console.log('HQ recording saved:', uri);
+  };
+
+  return (
+    <AudioRecorder
+      quality='high'
+      showWaveform={true}
+      showTimer={true}
+      maxDuration={1800} // 30 minutes
+      customRecordingOptions={{
+        ...RecordingPresets.HIGH_QUALITY,
+        sampleRate: 48000,
+        bitRate: 192000,
+        numberOfChannels: 2,
+      }}
+      onRecordingComplete={handleRecordingComplete}
+    />
+  );
+}

package/dist/templates/demo/audio-recorder/audio-recorder-interview.tsx

@@ -0,0 +1,98 @@
+import { AudioRecorder } from '@/components/ui/audio-recorder';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { RecordingPresets } from 'expo-audio';
+import React, { useState } from 'react';
+import { Alert, StyleSheet } from 'react-native';
+
+export function AudioRecorderInterview() {
+  const [interviewTitle, setInterviewTitle] = useState('');
+  const [isRecording, setIsRecording] = useState(false);
+
+  const handleRecordingStart = () => {
+    setIsRecording(true);
+    const title = `Interview ${new Date().toLocaleDateString()}`;
+    setInterviewTitle(title);
+  };
+
+  const handleRecordingStop = () => {
+    setIsRecording(false);
+  };
+
+  const handleRecordingComplete = (uri: string) => {
+    Alert.alert(
+      '🎤 Interview Complete',
+      `"${interviewTitle}" has been recorded and saved.\n\nDuration: Available in file metadata\nQuality: High (48kHz, Stereo)`,
+      [{ text: 'Save & Exit' }]
+    );
+  };
+
+  return (
+    <View style={{ width: '100%' }}>
+      <View style={styles.interviewHeader}>
+        <Text variant='title' style={styles.interviewTitle}>
+          {interviewTitle || 'Ready for Interview'}
+        </Text>
+
+        <View
+          style={[styles.statusBadge, isRecording && styles.recordingBadge]}
+        >
+          <Text
+            style={[styles.statusText, isRecording && styles.recordingText]}
+          >
+            {isRecording ? '🔴 LIVE' : '⏸️ READY'}
+          </Text>
+        </View>
+      </View>
+
+      <AudioRecorder
+        quality='high'
+        showWaveform={true}
+        showTimer={true}
+        maxDuration={7200} // 2 hours for long interviews
+        customRecordingOptions={{
+          ...RecordingPresets.HIGH_QUALITY,
+          sampleRate: 48000,
+          bitRate: 128000,
+          numberOfChannels: 2,
+          isMeteringEnabled: true,
+        }}
+        onRecordingStart={handleRecordingStart}
+        onRecordingStop={handleRecordingStop}
+        onRecordingComplete={handleRecordingComplete}
+      />
+
+      <Text variant='caption' style={{ marginTop: 12, textAlign: 'center' }}>
+        Maximum duration: 2 hours • High quality stereo recording
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  interviewHeader: {
+    marginBottom: 16,
+    alignItems: 'center',
+  },
+  interviewTitle: {
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  statusBadge: {
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 12,
+    backgroundColor: '#f3f4f6',
+  },
+  recordingBadge: {
+    backgroundColor: '#fef2f2',
+  },
+  statusText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#6b7280',
+  },
+  recordingText: {
+    color: '#dc2626',
+  },
+});

package/dist/templates/demo/audio-recorder/audio-recorder-minimal.tsx

@@ -0,0 +1,17 @@
+import { AudioRecorder } from '@/components/ui/audio-recorder';
+
+export function AudioRecorderMinimal() {
+  const handleRecordingComplete = (uri: string) => {
+    console.log('Your audio has been recorded.', uri);
+  };
+
+  return (
+    <AudioRecorder
+      quality='low'
+      showWaveform={false}
+      showTimer={true}
+      maxDuration={60} // 1 minute
+      onRecordingComplete={handleRecordingComplete}
+    />
+  );
+}

package/dist/templates/demo/audio-recorder/audio-recorder-styled.tsx

@@ -0,0 +1,29 @@
+import { AudioRecorder } from '@/components/ui/audio-recorder';
+
+export function AudioRecorderStyled() {
+  const handleRecordingComplete = (uri: string) => {
+    console.log('🎵 Recording Complete', uri);
+  };
+
+  return (
+    <AudioRecorder
+      quality='high'
+      showWaveform={true}
+      showTimer={true}
+      maxDuration={300}
+      style={{
+        backgroundColor: 'transparent',
+        borderWidth: 2,
+        borderColor: 'red',
+        borderRadius: 20,
+        padding: 24,
+        shadowColor: 'red',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.1,
+        shadowRadius: 12,
+        elevation: 8,
+      }}
+      onRecordingComplete={handleRecordingComplete}
+    />
+  );
+}

package/dist/templates/demo/audio-recorder/audio-recorder-voice.tsx

@@ -0,0 +1,18 @@
+import { AudioRecorder } from '@/components/ui/audio-recorder';
+
+export function AudioRecorderVoice() {
+  const handleRecordingComplete = (uri: string) => {
+    // Here you could add the voice note to a list or send it
+    console.log('Voice note saved:', uri);
+  };
+
+  return (
+    <AudioRecorder
+      quality='low'
+      showWaveform={true}
+      showTimer={true}
+      maxDuration={120} // 2 minutes for voice notes
+      onRecordingComplete={handleRecordingComplete}
+    />
+  );
+}

package/dist/templates/demo/audio-waveform/audio-waveform-compact.tsx

@@ -0,0 +1,127 @@
+import { AudioWaveform } from '@/components/ui/audio-waveform';
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function AudioWaveformCompact() {
+  const [isPlaying1, setIsPlaying1] = useState(false);
+  const [isPlaying2, setIsPlaying2] = useState(false);
+  const [isPlaying3, setIsPlaying3] = useState(false);
+  const [progress1, setProgress1] = useState(20);
+  const [progress2, setProgress2] = useState(45);
+  const [progress3, setProgress3] = useState(70);
+
+  // Compact chat message data
+  const messageData1 = [
+    0.3, 0.5, 0.4, 0.6, 0.3, 0.4, 0.5, 0.3, 0.4, 0.6, 0.5, 0.3, 0.4, 0.5, 0.3,
+  ];
+  const messageData2 = [
+    0.2, 0.4, 0.6, 0.5, 0.3, 0.5, 0.4, 0.6, 0.3, 0.4, 0.5, 0.4, 0.3, 0.2, 0.3,
+  ];
+  const messageData3 = [
+    0.4, 0.6, 0.5, 0.7, 0.4, 0.3, 0.5, 0.6, 0.4, 0.5, 0.6, 0.5, 0.4, 0.3, 0.4,
+  ];
+
+  const MessageBubble = ({
+    data,
+    isPlaying,
+    setIsPlaying,
+    progress,
+    setProgress,
+    duration,
+    sent = false,
+  }: {
+    data: number[];
+    isPlaying: boolean;
+    setIsPlaying: (playing: boolean) => void;
+    progress: number;
+    setProgress: (progress: number) => void;
+    duration: string;
+    sent?: boolean;
+  }) => (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: sent ? 'flex-end' : 'flex-start',
+        backgroundColor: sent ? '#007AFF' : '#F0F0F0',
+        borderRadius: 18,
+        padding: 8,
+        maxWidth: '80%',
+        gap: 8,
+      }}
+    >
+      <Button
+        onPress={() => setIsPlaying(!isPlaying)}
+        variant='ghost'
+        size='icon'
+      >
+        {isPlaying ? '⏸️' : '▶️'}
+      </Button>
+
+      <View style={{ flex: 1 }}>
+        <AudioWaveform
+          data={data}
+          isPlaying={isPlaying}
+          progress={progress}
+          showProgress={true}
+          interactive={true}
+          onSeek={setProgress}
+          height={24}
+          barCount={15}
+          barWidth={2}
+          barGap={1}
+          activeColor={sent ? 'white' : '#007AFF'}
+          inactiveColor={sent ? 'rgba(255, 255, 255, 0.4)' : '#C7C7CC'}
+        />
+      </View>
+
+      <Text
+        style={{
+          color: sent ? 'rgba(255, 255, 255, 0.8)' : '#8E8E93',
+          fontSize: 11,
+          minWidth: 28,
+        }}
+      >
+        {duration}
+      </Text>
+    </View>
+  );
+
+  return (
+    <View style={{ gap: 16 }}>
+      <View style={{ gap: 12 }}>
+        <MessageBubble
+          data={messageData1}
+          isPlaying={isPlaying1}
+          setIsPlaying={setIsPlaying1}
+          progress={progress1}
+          setProgress={setProgress1}
+          duration='0:12'
+          sent={false}
+        />
+
+        <MessageBubble
+          data={messageData2}
+          isPlaying={isPlaying2}
+          setIsPlaying={setIsPlaying2}
+          progress={progress2}
+          setProgress={setProgress2}
+          duration='0:08'
+          sent={true}
+        />
+
+        <MessageBubble
+          data={messageData3}
+          isPlaying={isPlaying3}
+          setIsPlaying={setIsPlaying3}
+          progress={progress3}
+          setProgress={setProgress3}
+          duration='0:15'
+          sent={false}
+        />
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/audio-waveform/audio-waveform-demo.tsx

@@ -0,0 +1,56 @@
+import { AudioWaveform } from '@/components/ui/audio-waveform';
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useEffect, useState } from 'react';
+
+export function AudioWaveformDemo() {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [progress, setProgress] = useState(0);
+
+  // Simulate audio playback progress
+  useEffect(() => {
+    let interval: number;
+    if (isPlaying) {
+      interval = setInterval(() => {
+        setProgress((prev) => {
+          if (prev >= 100) {
+            setIsPlaying(false);
+            return 0;
+          }
+          return prev + 2;
+        });
+      }, 100);
+    }
+    return () => clearInterval(interval);
+  }, [isPlaying]);
+
+  const handleSeek = (position: number) => {
+    setProgress(position);
+  };
+
+  const togglePlayback = () => {
+    setIsPlaying(!isPlaying);
+  };
+
+  return (
+    <View style={{ gap: 16 }}>
+      <AudioWaveform
+        isPlaying={isPlaying}
+        progress={progress}
+        showProgress={true}
+        interactive={true}
+        onSeek={handleSeek}
+        height={60}
+        barCount={40}
+      />
+
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+        <Button onPress={togglePlayback} style={{ flex: 0 }}>
+          {isPlaying ? 'Pause' : 'Play'}
+        </Button>
+        <Text variant='caption'>{Math.round(progress)}% Complete</Text>
+      </View>
+    </View>
+  );
+}