kynjal-cli 2.0.6

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

@@ -0,0 +1,114 @@
+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 AudioWaveformInteractive() {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [isSeeking, setIsSeeking] = useState(false);
+
+  // Sample audio data - more realistic pattern
+  const audioData = [
+    0.2, 0.4, 0.3, 0.6, 0.8, 0.5, 0.7, 0.9, 0.4, 0.3, 0.5, 0.7, 0.6, 0.8, 0.9,
+    0.7, 0.5, 0.3, 0.4, 0.6, 0.8, 0.9, 0.7, 0.5, 0.4, 0.6, 0.8, 0.7, 0.5, 0.3,
+    0.4, 0.6, 0.9, 0.8, 0.6, 0.4, 0.2, 0.3, 0.5, 0.7,
+  ];
+
+  // Auto-play simulation
+  useEffect(() => {
+    let interval: number;
+    if (isPlaying && !isSeeking) {
+      interval = setInterval(() => {
+        setProgress((prev) => {
+          if (prev >= 100) {
+            setIsPlaying(false);
+            return 100;
+          }
+          return prev + 1;
+        });
+      }, 100);
+    }
+    return () => clearInterval(interval);
+  }, [isPlaying, isSeeking]);
+
+  const handleSeek = (position: number) => {
+    setProgress(position);
+  };
+
+  const handleSeekStart = () => {
+    setIsSeeking(true);
+  };
+
+  const handleSeekEnd = () => {
+    setIsSeeking(false);
+  };
+
+  const togglePlayback = () => {
+    setIsPlaying(!isPlaying);
+  };
+
+  const formatTime = (percentage: number) => {
+    const totalSeconds = 180; // 3 minutes total
+    const currentSeconds = (percentage / 100) * totalSeconds;
+    const minutes = Math.floor(currentSeconds / 60);
+    const seconds = Math.floor(currentSeconds % 60);
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  };
+
+  return (
+    <View style={{ gap: 16 }}>
+      <AudioWaveform
+        data={audioData}
+        isPlaying={isPlaying}
+        progress={progress}
+        showProgress={true}
+        interactive={true}
+        onSeek={handleSeek}
+        onSeekStart={handleSeekStart}
+        onSeekEnd={handleSeekEnd}
+        height={80}
+        barCount={40}
+        barWidth={4}
+        barGap={2}
+        activeColor='#007AFF'
+        inactiveColor='#E5E5E7'
+      />
+
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginTop: 12,
+        }}
+      >
+        <Text variant='caption' style={{ opacity: 0.6 }}>
+          {formatTime(progress)}
+        </Text>
+        <Text variant='caption' style={{ opacity: 0.6 }}>
+          3:00
+        </Text>
+      </View>
+
+      <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+        <Button onPress={togglePlayback}>{isPlaying ? 'Pause' : 'Play'}</Button>
+
+        <Button
+          variant='outline'
+          onPress={() => setProgress(0)}
+          disabled={progress === 0}
+        >
+          Reset
+        </Button>
+
+        {isSeeking && (
+          <Text variant='caption' style={{ color: '#007AFF' }}>
+            Seeking...
+          </Text>
+        )}
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,223 @@
+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 AudioWaveformRealtime() {
+  const [isActive, setIsActive] = useState(false);
+  const [realtimeData, setRealtimeData] = useState<number[]>([]);
+  const [frequency, setFrequency] = useState(1);
+  const [amplitude, setAmplitude] = useState(0.5);
+
+  // Simulate real-time audio data with different patterns
+  useEffect(() => {
+    let interval: number;
+    if (isActive) {
+      interval = setInterval(() => {
+        const time = Date.now() / 1000;
+
+        // Generate different wave patterns based on frequency and amplitude
+        let newLevel = 0;
+
+        if (frequency === 1) {
+          // Sine wave
+          newLevel = Math.abs(Math.sin(time * 2) * amplitude);
+        } else if (frequency === 2) {
+          // Multiple frequencies combined
+          newLevel = Math.abs(
+            ((Math.sin(time * 3) +
+              Math.sin(time * 1.5) +
+              Math.sin(time * 0.8)) /
+              3) *
+              amplitude
+          );
+        } else {
+          // Random with trend
+          newLevel = Math.max(
+            0,
+            Math.min(1, Math.random() * amplitude + Math.sin(time * 0.5) * 0.3)
+          );
+        }
+
+        setRealtimeData((prev) => {
+          const newData = [...prev, newLevel];
+          // Keep only the last 60 data points for smooth animation
+          return newData.slice(-60);
+        });
+      }, 50);
+    }
+    return () => clearInterval(interval);
+  }, [isActive, frequency, amplitude]);
+
+  const resetData = () => {
+    setRealtimeData([]);
+  };
+
+  const patternButtons = [
+    { id: 1, label: 'Sine Wave', color: '#007AFF' },
+    { id: 2, label: 'Complex', color: '#34C759' },
+    { id: 3, label: 'Random', color: '#FF9500' },
+  ];
+
+  return (
+    <View style={{ gap: 16 }}>
+      <View
+        style={{
+          padding: 16,
+          backgroundColor: isActive
+            ? 'rgba(0, 122, 255, 0.05)'
+            : 'rgba(142, 142, 147, 0.05)',
+          borderRadius: 12,
+          borderWidth: 2,
+          borderColor: isActive ? '#007AFF' : '#E5E5E7',
+          borderStyle: isActive ? 'solid' : 'dashed',
+        }}
+      >
+        <Text variant='body' style={{ marginBottom: 12, fontWeight: 'bold' }}>
+          Real-time Audio Visualization
+        </Text>
+
+        <AudioWaveform
+          data={realtimeData}
+          isPlaying={isActive}
+          animated={true}
+          showProgress={false}
+          height={80}
+          barCount={60}
+          barWidth={2}
+          barGap={1}
+          activeColor={
+            frequency === 1
+              ? '#007AFF'
+              : frequency === 2
+              ? '#34C759'
+              : '#FF9500'
+          }
+          inactiveColor='#E5E5E7'
+        />
+
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginTop: 12,
+          }}
+        >
+          <Text variant='caption' style={{ opacity: 0.6 }}>
+            {realtimeData.length} data points
+          </Text>
+          <Text variant='caption' style={{ opacity: 0.6 }}>
+            {isActive ? 'Live' : 'Stopped'}
+          </Text>
+        </View>
+      </View>
+
+      {/* Controls */}
+      <View style={{ gap: 12 }}>
+        <View style={{ flexDirection: 'row', gap: 8 }}>
+          <Button
+            onPress={() => setIsActive(!isActive)}
+            style={{
+              backgroundColor: isActive ? '#FF3B30' : '#34C759',
+              flex: 1,
+            }}
+          >
+            {isActive ? 'Stop Stream' : 'Start Stream'}
+          </Button>
+          <Button
+            onPress={resetData}
+            variant='outline'
+            disabled={realtimeData.length === 0}
+          >
+            Clear
+          </Button>
+        </View>
+
+        {/* Pattern Selection */}
+        <View>
+          <Text variant='caption' style={{ marginBottom: 8, opacity: 0.7 }}>
+            Wave Pattern:
+          </Text>
+          <View style={{ flexDirection: 'row', gap: 8 }}>
+            {patternButtons.map((pattern) => (
+              <Button
+                key={pattern.id}
+                onPress={() => setFrequency(pattern.id)}
+                variant={frequency === pattern.id ? 'default' : 'outline'}
+                style={{
+                  flex: 1,
+                  backgroundColor:
+                    frequency === pattern.id ? pattern.color : 'transparent',
+                  borderColor: pattern.color,
+                }}
+              >
+                <Text
+                  style={{
+                    color: frequency === pattern.id ? 'white' : pattern.color,
+                    fontSize: 12,
+                  }}
+                >
+                  {pattern.label}
+                </Text>
+              </Button>
+            ))}
+          </View>
+        </View>
+
+        {/* Amplitude Control */}
+        <View>
+          <Text variant='caption' style={{ marginBottom: 8, opacity: 0.7 }}>
+            Amplitude: {Math.round(amplitude * 100)}%
+          </Text>
+          <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+            <Button
+              size='icon'
+              variant='outline'
+              onPress={() => setAmplitude(Math.max(0.1, amplitude - 0.1))}
+            >
+              -
+            </Button>
+            <View
+              style={{
+                flex: 1,
+                height: 4,
+                backgroundColor: '#E5E5E7',
+                borderRadius: 2,
+                overflow: 'hidden',
+              }}
+            >
+              <View
+                style={{
+                  width: `${amplitude * 100}%`,
+                  height: '100%',
+                  backgroundColor: '#007AFF',
+                }}
+              />
+            </View>
+            <Button
+              size='icon'
+              variant='outline'
+              onPress={() => setAmplitude(Math.min(1, amplitude + 0.1))}
+            >
+              +
+            </Button>
+          </View>
+        </View>
+      </View>
+
+      <View
+        style={{
+          padding: 12,
+          backgroundColor: 'rgba(255, 149, 0, 0.05)',
+          borderRadius: 8,
+        }}
+      >
+        <Text variant='caption' style={{ textAlign: 'center', opacity: 0.7 }}>
+          Simulates real-time audio input with different wave patterns
+        </Text>
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,100 @@
+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 AudioWaveformRecording() {
+  const [isRecording, setIsRecording] = useState(false);
+  const [recordingData, setRecordingData] = useState<number[]>([]);
+  const [duration, setDuration] = useState(0);
+
+  // Simulate recording with real-time audio levels
+  useEffect(() => {
+    let interval: number;
+    if (isRecording) {
+      interval = setInterval(() => {
+        // Generate random audio level (simulating microphone input)
+        const newLevel = Math.max(
+          0.1,
+          Math.random() * 0.9 + Math.sin(Date.now() / 200) * 0.2
+        );
+
+        setRecordingData((prev) => {
+          const newData = [...prev, newLevel];
+          // Keep only the last 50 data points
+          return newData.slice(-50);
+        });
+
+        setDuration((prev) => prev + 0.1);
+      }, 100);
+    }
+    return () => clearInterval(interval);
+  }, [isRecording]);
+
+  const toggleRecording = () => {
+    if (!isRecording) {
+      setRecordingData([]);
+      setDuration(0);
+    }
+    setIsRecording(!isRecording);
+  };
+
+  const formatDuration = (seconds: number) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  return (
+    <View style={{ gap: 16 }}>
+      <View
+        style={{
+          backgroundColor: isRecording ? '#FF3B30' : '#34C759',
+          padding: 12,
+          borderRadius: 12,
+          opacity: 0.1,
+        }}
+      />
+
+      <AudioWaveform
+        data={recordingData}
+        isPlaying={isRecording}
+        animated={true}
+        showProgress={false}
+        height={60}
+        barCount={50}
+        activeColor={isRecording ? '#FF3B30' : '#34C759'}
+        style={{
+          backgroundColor: isRecording
+            ? 'rgba(255, 59, 48, 0.05)'
+            : 'rgba(52, 199, 89, 0.05)',
+          borderRadius: 8,
+          paddingHorizontal: 8,
+        }}
+      />
+
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <Button
+          onPress={toggleRecording}
+          variant={isRecording ? 'destructive' : 'default'}
+        >
+          {isRecording ? 'Stop Recording' : 'Start Recording'}
+        </Button>
+        <Text variant='caption'>{formatDuration(duration)}</Text>
+      </View>
+
+      {recordingData.length > 0 && !isRecording && (
+        <Text variant='caption' style={{ textAlign: 'center', opacity: 0.6 }}>
+          Tap play to preview your recording
+        </Text>
+      )}
+    </View>
+  );
+}

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

@@ -0,0 +1,195 @@
+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 AudioWaveformStyled() {
+  const [isPlaying1, setIsPlaying1] = useState(false);
+  const [isPlaying2, setIsPlaying2] = useState(false);
+  const [isPlaying3, setIsPlaying3] = useState(false);
+  const [progress1, setProgress1] = useState(35);
+  const [progress2, setProgress2] = useState(60);
+  const [progress3, setProgress3] = useState(80);
+
+  const musicData = [
+    0.1, 0.3, 0.5, 0.4, 0.6, 0.8, 0.7, 0.9, 0.6, 0.4, 0.5, 0.7, 0.8, 0.9, 0.7,
+    0.5, 0.3, 0.4, 0.6, 0.8, 0.9, 0.7, 0.5, 0.4, 0.6, 0.8, 0.7, 0.5, 0.3, 0.4,
+  ];
+
+  const voiceData = [
+    0.2, 0.4, 0.3, 0.5, 0.4, 0.6, 0.5, 0.7, 0.4, 0.3, 0.5, 0.4, 0.6, 0.5, 0.4,
+    0.3, 0.4, 0.5, 0.6, 0.4, 0.3, 0.5, 0.4, 0.3, 0.4, 0.5, 0.4, 0.3, 0.2, 0.3,
+  ];
+
+  const podcastData = [
+    0.3, 0.5, 0.4, 0.6, 0.5, 0.4, 0.6, 0.7, 0.5, 0.4, 0.6, 0.5, 0.7, 0.6, 0.5,
+    0.4, 0.5, 0.6, 0.7, 0.5, 0.4, 0.6, 0.5, 0.4, 0.5, 0.6, 0.5, 0.4, 0.3, 0.4,
+  ];
+
+  return (
+    <View style={{ gap: 24 }}>
+      {/* Music Style - Vibrant gradient colors */}
+      <View
+        style={{
+          padding: 16,
+          backgroundColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          borderRadius: 16,
+          shadowColor: '#667eea',
+          shadowOffset: { width: 0, height: 4 },
+          shadowOpacity: 0.3,
+          shadowRadius: 8,
+        }}
+      >
+        <Text
+          variant='body'
+          style={{ color: 'white', marginBottom: 12, fontWeight: 'bold' }}
+        >
+          🎵 Music Track
+        </Text>
+        <AudioWaveform
+          data={musicData}
+          isPlaying={isPlaying1}
+          progress={progress1}
+          showProgress={true}
+          interactive={true}
+          onSeek={setProgress1}
+          height={60}
+          barCount={30}
+          barWidth={4}
+          barGap={3}
+          activeColor='#FFD700'
+          inactiveColor='rgba(255, 255, 255, 0.3)'
+        />
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            marginTop: 12,
+          }}
+        >
+          <Button
+            onPress={() => setIsPlaying1(!isPlaying1)}
+            style={{ backgroundColor: 'rgba(255, 255, 255, 0.2)' }}
+          >
+            {isPlaying1 ? '⏸️' : '▶️'}
+          </Button>
+          <Text style={{ color: 'white', opacity: 0.8 }}>2:15 / 3:45</Text>
+        </View>
+      </View>
+
+      {/* Voice Message Style - Clean and minimal */}
+      <View
+        style={{
+          padding: 16,
+          backgroundColor: 'teal',
+          borderRadius: 12,
+          borderLeftWidth: 4,
+          borderLeftColor: '#34C759',
+        }}
+      >
+        <Text variant='body' style={{ marginBottom: 12, fontWeight: '600' }}>
+          🎙️ Voice Message
+        </Text>
+        <AudioWaveform
+          data={voiceData}
+          isPlaying={isPlaying2}
+          progress={progress2}
+          showProgress={true}
+          interactive={true}
+          onSeek={setProgress2}
+          height={40}
+          barCount={25}
+          barWidth={3}
+          barGap={2}
+          activeColor='#34C759'
+          inactiveColor='#E5E5E7'
+        />
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginTop: 8,
+          }}
+        >
+          <Button
+            onPress={() => setIsPlaying2(!isPlaying2)}
+            variant='outline'
+            style={{
+              borderColor: '#34C759',
+              borderRadius: 20,
+              paddingHorizontal: 16,
+            }}
+          >
+            {isPlaying2 ? 'Pause' : 'Play'}
+          </Button>
+          <Text variant='caption'>0:45</Text>
+        </View>
+      </View>
+
+      {/* Podcast Style - Professional dark theme */}
+      <View
+        style={{
+          padding: 16,
+          backgroundColor: '#1C1C1E',
+          borderRadius: 12,
+          borderWidth: 1,
+          borderColor: '#2C2C2E',
+        }}
+      >
+        <Text
+          variant='body'
+          style={{ color: 'white', marginBottom: 12, fontWeight: 'bold' }}
+        >
+          🎧 Podcast Episode
+        </Text>
+        <AudioWaveform
+          data={podcastData}
+          isPlaying={isPlaying3}
+          progress={progress3}
+          showProgress={true}
+          interactive={true}
+          onSeek={setProgress3}
+          height={70}
+          barCount={35}
+          barWidth={2}
+          barGap={1}
+          activeColor='#FF6B6B'
+          inactiveColor='#48484A'
+        />
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginTop: 12,
+          }}
+        >
+          <View style={{ flexDirection: 'row', gap: 8 }}>
+            <Button
+              onPress={() => setIsPlaying3(!isPlaying3)}
+              style={{
+                backgroundColor: '#FF6B6B',
+                borderRadius: 8,
+                paddingHorizontal: 12,
+              }}
+            >
+              {isPlaying3 ? '⏸️' : '▶️'}
+            </Button>
+            <Button
+              variant='outline'
+              style={{
+                borderColor: '#48484A',
+                borderRadius: 8,
+              }}
+            >
+              1.5x
+            </Button>
+          </View>
+          <Text style={{ color: 'white', opacity: 0.6 }}>45:30 / 58:15</Text>
+        </View>
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/avatar/avatar-bordered.tsx

@@ -0,0 +1,64 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function AvatarBordered() {
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+      <Avatar
+        size={64}
+        style={{
+          borderWidth: 4,
+          borderColor: '#3b82f6',
+          shadowColor: '#3b82f6',
+          shadowOffset: { width: 0, height: 4 },
+          shadowOpacity: 0.3,
+          shadowRadius: 8,
+          elevation: 8,
+        }}
+      >
+        <AvatarImage
+          source={{
+            uri: 'https://avatars.githubusercontent.com/u/99088394?v=4',
+          }}
+        />
+        <AvatarFallback>AB</AvatarFallback>
+      </Avatar>
+
+      <Avatar
+        size={64}
+        style={{
+          borderWidth: 4,
+          borderColor: '#10b981',
+          shadowColor: '#10b981',
+          shadowOffset: { width: 0, height: 4 },
+          shadowOpacity: 0.3,
+          shadowRadius: 8,
+          elevation: 8,
+        }}
+      >
+        <AvatarFallback>BNA</AvatarFallback>
+      </Avatar>
+
+      <Avatar
+        size={64}
+        style={{
+          borderWidth: 4,
+          borderColor: '#f59e0b',
+          shadowColor: '#f59e0b',
+          shadowOffset: { width: 0, height: 4 },
+          shadowOpacity: 0.3,
+          shadowRadius: 8,
+          elevation: 8,
+        }}
+      >
+        <AvatarImage
+          source={{
+            uri: 'https://avatars.githubusercontent.com/u/12504344?s=200&v=4',
+          }}
+        />
+        <AvatarFallback>EX</AvatarFallback>
+      </Avatar>
+    </View>
+  );
+}