kynjal-cli 2.0.6

package/dist/templates/demo/alert/alert-advanced-demo.tsx

@@ -0,0 +1,132 @@
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  showConfirmAlert,
+  showNativeAlert,
+} from '@/components/ui/alert';
+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 AlertAdvancedDemo() {
+  const [showVisualAlert, setShowVisualAlert] = useState(false);
+  const [alertType, setAlertType] = useState<'success' | 'error' | null>(null);
+
+  const handleAsyncOperation = async () => {
+    // Show loading state
+    setShowVisualAlert(true);
+    setAlertType(null);
+
+    try {
+      // Simulate async operation
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+
+      // Show success
+      setAlertType('success');
+
+      // Auto hide after 3 seconds
+      setTimeout(() => {
+        setShowVisualAlert(false);
+        setAlertType(null);
+      }, 3000);
+    } catch (error) {
+      setAlertType('error');
+    }
+  };
+
+  const handleDeleteWithConfirmation = () => {
+    showConfirmAlert(
+      'Delete Item',
+      'This action cannot be undone. Are you sure you want to delete this item?',
+      () => {
+        // First confirmation passed, show second confirmation for critical action
+        showConfirmAlert(
+          'Final Confirmation',
+          'This will permanently delete the item and all associated data. This cannot be undone.',
+          () => {
+            console.log('Item deleted');
+          },
+          () => {
+            console.log('Delete cancelled at final step');
+          }
+        );
+      },
+      () => {
+        console.log('Delete cancelled');
+      }
+    );
+  };
+
+  const handleComplexAlert = () => {
+    showNativeAlert({
+      title: 'Choose Your Action',
+      message: 'What would you like to do with this item?',
+      buttons: [
+        {
+          text: 'Edit',
+          onPress: () => console.log('Edit selected'),
+        },
+        {
+          text: 'Share',
+          onPress: () => console.log('Share selected'),
+        },
+        {
+          text: 'Archive',
+          onPress: () => console.log('Archive selected'),
+        },
+        {
+          text: 'Delete',
+          onPress: () => handleDeleteWithConfirmation(),
+          style: 'destructive',
+        },
+        {
+          text: 'Cancel',
+          onPress: () => console.log('Cancelled'),
+          style: 'cancel',
+        },
+      ],
+    });
+  };
+
+  return (
+    <View style={{ gap: 16 }}>
+      {/* Dynamic Visual Alert */}
+      {showVisualAlert && (
+        <Alert variant={alertType === 'error' ? 'destructive' : 'default'}>
+          <AlertTitle>
+            {alertType === null && 'Processing...'}
+            {alertType === 'success' && 'Success!'}
+            {alertType === 'error' && 'Error'}
+          </AlertTitle>
+          <AlertDescription>
+            {alertType === null && 'Please wait while we process your request.'}
+            {alertType === 'success' &&
+              'Your operation completed successfully.'}
+            {alertType === 'error' && 'Something went wrong. Please try again.'}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <View style={{ gap: 12 }}>
+        <Button onPress={handleAsyncOperation} variant='secondary'>
+          Simulate Async Operation
+        </Button>
+
+        <Button onPress={handleComplexAlert} variant='outline'>
+          Show Complex Alert
+        </Button>
+
+        <Button onPress={handleDeleteWithConfirmation} variant='destructive'>
+          Delete with Double Confirmation
+        </Button>
+      </View>
+
+      <Text variant='caption' style={{ opacity: 0.7, marginTop: 8 }}>
+        These demo demonstrate advanced patterns like chained confirmations,
+        dynamic visual alerts, and complex multi-option native alerts.
+      </Text>
+    </View>
+  );
+}

package/dist/templates/demo/alert/alert-confirm-demo.tsx

@@ -0,0 +1,20 @@
+import { showConfirmAlert } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import React from 'react';
+
+export function AlertConfirmDemo() {
+  const handleConfirmAlert = () => {
+    showConfirmAlert(
+      'Confirm Action',
+      'Are you sure you want to proceed with this action?',
+      () => console.log('Action confirmed'),
+      () => console.log('Action cancelled')
+    );
+  };
+
+  return (
+    <Button onPress={handleConfirmAlert} variant='success'>
+      Show Confirm Alert
+    </Button>
+  );
+}

package/dist/templates/demo/alert/alert-custom-demo.tsx

@@ -0,0 +1,29 @@
+import { showNativeAlert } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import React from 'react';
+
+export function AlertCustomDemo() {
+  const handleCustomAlert = () => {
+    showNativeAlert({
+      title: 'Custom Alert',
+      message: 'This is a custom native alert with multiple options',
+      buttons: [
+        {
+          text: 'Option 1',
+          onPress: () => console.log('Option 1 selected'),
+        },
+        {
+          text: 'Option 2',
+          onPress: () => console.log('Option 2 selected'),
+        },
+        {
+          text: 'Cancel',
+          onPress: () => console.log('Cancelled'),
+          style: 'cancel',
+        },
+      ],
+    });
+  };
+
+  return <Button onPress={handleCustomAlert}>Show Custom Alert</Button>;
+}

package/dist/templates/demo/alert/alert-demo.tsx

@@ -0,0 +1,25 @@
+import { createTwoButtonAlert } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import React from 'react';
+
+export function AlertDemo() {
+  const handleTwoButtonAlert = () => {
+    createTwoButtonAlert({
+      title: 'Two Button Alert',
+      message: 'This is a two-button alert example',
+      buttons: [
+        {
+          text: 'Cancel',
+          onPress: () => console.log('Cancel Pressed'),
+          style: 'cancel',
+        },
+        {
+          text: 'OK',
+          onPress: () => console.log('OK Pressed'),
+        },
+      ],
+    });
+  };
+
+  return <Button onPress={handleTwoButtonAlert}>Show Two Button Alert</Button>;
+}

package/dist/templates/demo/alert/alert-error-demo.tsx

@@ -0,0 +1,17 @@
+import { showErrorAlert } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import React from 'react';
+
+export function AlertErrorDemo() {
+  const handleErrorAlert = () => {
+    showErrorAlert('Error', 'Something went wrong. Please try again.', () =>
+      console.log('Error acknowledged')
+    );
+  };
+
+  return (
+    <Button onPress={handleErrorAlert} variant='destructive'>
+      Show Error Alert
+    </Button>
+  );
+}

package/dist/templates/demo/alert/alert-success-demo.tsx

@@ -0,0 +1,19 @@
+import { showSuccessAlert } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import React from 'react';
+
+export function AlertSuccessDemo() {
+  const handleSuccessAlert = () => {
+    showSuccessAlert(
+      'Success!',
+      'Your action was completed successfully.',
+      () => console.log('Success acknowledged')
+    );
+  };
+
+  return (
+    <Button onPress={handleSuccessAlert} variant='secondary'>
+      Show Success Alert
+    </Button>
+  );
+}

package/dist/templates/demo/alert/alert-three-button-demo.tsx

@@ -0,0 +1,33 @@
+import { createThreeButtonAlert } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import React from 'react';
+
+export function AlertThreeButtonDemo() {
+  const handleThreeButtonAlert = () => {
+    createThreeButtonAlert({
+      title: 'Three Button Alert',
+      message: 'This is a three-button alert example',
+      buttons: [
+        {
+          text: 'Ask me later',
+          onPress: () => console.log('Ask me later pressed'),
+        },
+        {
+          text: 'Cancel',
+          onPress: () => console.log('Cancel Pressed'),
+          style: 'cancel',
+        },
+        {
+          text: 'OK',
+          onPress: () => console.log('OK Pressed'),
+        },
+      ],
+    });
+  };
+
+  return (
+    <Button onPress={handleThreeButtonAlert} variant='outline'>
+      Show Three Button Alert
+    </Button>
+  );
+}

package/dist/templates/demo/alert/alert-visual-demo.tsx

@@ -0,0 +1,22 @@
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function AlertVisualDemo() {
+  return (
+    <View>
+      <Alert>
+        <AlertTitle>Visual Alert</AlertTitle>
+        <AlertDescription>
+          This is a default visual alert that appears inline with your content.
+        </AlertDescription>
+      </Alert>
+
+      <Text variant='caption' style={{ marginTop: 16 }}>
+        Visual alerts appear inline with your content, while native alerts
+        appear as system dialogs on top of your app.
+      </Text>
+    </View>
+  );
+}

package/dist/templates/demo/alert/alert-visual-destructive-demo.tsx

@@ -0,0 +1,22 @@
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function AlertVisualDestructiveDemo() {
+  return (
+    <View>
+      <Alert variant='destructive' style={{ marginBottom: 24 }}>
+        <AlertTitle>Destructive Alert</AlertTitle>
+        <AlertDescription>
+          This is a destructive visual alert for error messages.
+        </AlertDescription>
+      </Alert>
+
+      <Text variant='caption' style={{ marginTop: 16 }}>
+        Visual alerts appear inline with your content, while native alerts
+        appear as system dialogs on top of your app.
+      </Text>
+    </View>
+  );
+}

package/dist/templates/demo/alert-dialog/alert-dialog-custom.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { AlertDialog, useAlertDialog } from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import { View } from '@/components/ui/view';
+import { Text } from '@/components/ui/text';
+
+export function AlertDialogCustomDemo() {
+  const dialog = useAlertDialog();
+
+  return (
+    <View>
+      <Button variant='outline' onPress={dialog.open}>
+        Custom Dialog
+      </Button>
+
+      <AlertDialog
+        isVisible={dialog.isVisible}
+        onClose={dialog.close}
+        confirmText='Continue'
+        cancelText='Go Back'
+        onConfirm={() => {
+          console.log('Continued');
+          dialog.close();
+        }}
+        onCancel={dialog.close}
+        style={{ borderRadius: 24 }}
+      >
+        <View style={{ alignItems: 'center', padding: 16 }}>
+          <Text style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 8 }}>
+            Custom Content
+          </Text>
+          <Text style={{ textAlign: 'center', marginBottom: 16 }}>
+            This dialog contains custom content instead of using the title and
+            description props.
+          </Text>
+        </View>
+      </AlertDialog>
+    </View>
+  );
+}

package/dist/templates/demo/alert-dialog/alert-dialog-demo.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { AlertDialog, useAlertDialog } from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import { View } from '@/components/ui/view';
+
+export function AlertDialogDemo() {
+  const dialog = useAlertDialog();
+
+  return (
+    <View>
+      <Button onPress={dialog.open}>Show Dialog</Button>
+
+      <AlertDialog
+        isVisible={dialog.isVisible}
+        onClose={dialog.close}
+        title='Are you absolutely sure?'
+        description='This action cannot be undone. This will permanently delete your account and remove your data from our servers.'
+        confirmText='Yes, delete'
+        cancelText='Cancel'
+        onConfirm={() => {
+          console.log('Account deleted');
+          dialog.close();
+        }}
+        onCancel={dialog.close}
+      />
+    </View>
+  );
+}

package/dist/templates/demo/alert-dialog/alert-dialog-destructive.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { AlertDialog, useAlertDialog } from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import { View } from '@/components/ui/view';
+
+export function AlertDialogDestructiveDemo() {
+  const dialog = useAlertDialog();
+
+  return (
+    <View>
+      <Button variant='destructive' onPress={dialog.open}>
+        Delete Item
+      </Button>
+
+      <AlertDialog
+        isVisible={dialog.isVisible}
+        onClose={dialog.close}
+        title='Delete Item'
+        description='Are you sure you want to delete this item? This action cannot be undone.'
+        confirmText='Delete'
+        cancelText='Cancel'
+        onConfirm={() => {
+          console.log('Item deleted');
+          dialog.close();
+        }}
+        onCancel={dialog.close}
+      />
+    </View>
+  );
+}

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

@@ -0,0 +1,22 @@
+import { AudioPlayer } from '@/components/ui/audio-player';
+
+export function AudioPlayerAutoplay() {
+  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={true}
+      onPlaybackStatusUpdate={(status) => {
+        if (status.isLoaded && status.playing) {
+          console.log('Auto-playing audio');
+        }
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,21 @@
+import { AudioPlayer } from '@/components/ui/audio-player';
+
+export function AudioPlayerDemo() {
+  // Sample audio URL - replace with your actual audio source
+  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}
+      onPlaybackStatusUpdate={(status) => {
+        console.log('Playback status:', status);
+      }}
+    />
+  );
+}

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

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

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

@@ -0,0 +1,158 @@
+import { AudioPlayer } from '@/components/ui/audio-player';
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import {
+  Heart,
+  MoreHorizontal,
+  Shuffle,
+  SkipBack,
+  SkipForward,
+} from 'lucide-react-native';
+import React, { useState } from 'react';
+import { Image, StyleSheet } from 'react-native';
+
+export function AudioPlayerMusic() {
+  const [isLiked, setIsLiked] = useState(false);
+  const sampleAudioUrl =
+    'https://www.thesoundarchive.com/ringtones/old-phone-ringing.wav';
+
+  return (
+    <View style={styles.musicPlayer}>
+      {/* Album Art */}
+      <View style={styles.albumArtContainer}>
+        <Image
+          source={{
+            uri: 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=200&h=200&fit=crop&crop=center',
+          }}
+          style={styles.albumArt}
+        />
+      </View>
+
+      {/* Track Information */}
+      <View style={styles.trackInfo}>
+        <Text variant='body' style={styles.trackTitle}>
+          Midnight Waves
+        </Text>
+        <Text variant='caption' style={styles.artistName}>
+          Ocean Sounds Orchestra
+        </Text>
+      </View>
+
+      {/* Action Buttons */}
+      <View style={styles.actionButtons}>
+        <Button
+          variant='ghost'
+          size='icon'
+          onPress={() => setIsLiked(!isLiked)}
+          style={styles.actionButton}
+        >
+          <Heart
+            size={20}
+            color={isLiked ? '#ff6b6b' : '#666'}
+            fill={isLiked ? '#ff6b6b' : 'transparent'}
+          />
+        </Button>
+        <Button variant='ghost' size='icon' style={styles.actionButton}>
+          <MoreHorizontal size={20} color='#666' />
+        </Button>
+      </View>
+
+      {/* Audio Player */}
+      <AudioPlayer
+        source={{ uri: sampleAudioUrl }}
+        showControls={true}
+        showWaveform={true}
+        showTimer={true}
+        showProgressBar={false}
+        autoPlay={false}
+        style={styles.playerContainer}
+      />
+
+      {/* Additional Controls */}
+      <View style={styles.additionalControls}>
+        <Button variant='ghost' size='icon' style={styles.controlButton}>
+          <Shuffle size={18} color='#666' />
+        </Button>
+        <Button variant='ghost' size='icon' style={styles.controlButton}>
+          <SkipBack size={18} color='#666' />
+        </Button>
+        <View style={styles.spacer} />
+        <Button variant='ghost' size='icon' style={styles.controlButton}>
+          <SkipForward size={18} color='#666' />
+        </Button>
+        <Button variant='ghost' size='icon' style={styles.controlButton}>
+          <Shuffle size={18} color='#666' />
+        </Button>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  musicPlayer: {
+    backgroundColor: '#F2F2F7',
+    borderRadius: 16,
+    padding: 20,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+  albumArtContainer: {
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  albumArt: {
+    width: 120,
+    height: 120,
+    borderRadius: 12,
+  },
+  trackInfo: {
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  trackTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    marginBottom: 4,
+    color: '#1a1a1a',
+  },
+  artistName: {
+    fontSize: 14,
+    color: '#666',
+  },
+  actionButtons: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: 8,
+    marginBottom: 16,
+  },
+  actionButton: {
+    width: 36,
+    height: 36,
+  },
+  playerContainer: {
+    backgroundColor: 'transparent',
+    margin: 0,
+    padding: 0,
+    marginBottom: 16,
+  },
+  additionalControls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  controlButton: {
+    width: 36,
+    height: 36,
+  },
+  spacer: {
+    width: 40,
+  },
+});

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

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