kynjal-cli 2.0.6

package/dist/templates/demo/file-picker/file-picker-info.tsx

@@ -0,0 +1,192 @@
+import { FilePicker, SelectedFile } from '@/components/ui/file-picker';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import React, { useState } from 'react';
+
+export function FilePickerInfo() {
+  const card = useColor('card');
+  const [files, setFiles] = useState<SelectedFile[]>([]);
+  const [uploadProgress, setUploadProgress] = useState<any>({});
+
+  const handleFilesSelected = (selectedFiles: SelectedFile[]) => {
+    setFiles(selectedFiles);
+    // Simulate upload progress
+    selectedFiles.forEach((file, index) => {
+      let progress = 0;
+      const interval = setInterval(() => {
+        progress += Math.random() * 20;
+        if (progress >= 100) {
+          progress = 100;
+          clearInterval(interval);
+        }
+        setUploadProgress((prev: any) => ({
+          ...prev,
+          [index]: Math.min(progress, 100),
+        }));
+      }, 200);
+    });
+  };
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+
+  const getFileTypeIcon = (fileName: string) => {
+    const ext = fileName.split('.').pop()?.toLowerCase() || '';
+
+    const typeMap: Record<string, string> = {
+      pdf: '📄',
+      doc: '📝',
+      docx: '📝',
+      txt: '📄',
+      jpg: '🖼️',
+      jpeg: '🖼️',
+      png: '🖼️',
+      gif: '🖼️',
+      zip: '📦',
+      rar: '📦',
+      mp4: '🎥',
+      mp3: '🎵',
+    };
+
+    return typeMap[ext] || '📎';
+  };
+
+  return (
+    <View style={{ gap: 16 }}>
+      <FilePicker
+        onFilesSelected={handleFilesSelected}
+        onError={(error) => console.error('Error:', error)}
+        fileType='all'
+        multiple={true}
+        maxFiles={4}
+        maxSizeBytes={5 * 1024 * 1024} // 5MB
+        placeholder='Select files for detailed preview'
+        showFileInfo={true}
+      />
+
+      {files.length > 0 && (
+        <View>
+          <Text style={{ fontSize: 16, fontWeight: '600', marginBottom: 12 }}>
+            File Details
+          </Text>
+
+          {files.map((file, index) => (
+            <View
+              key={index}
+              style={{
+                padding: 16,
+                backgroundColor: card,
+                borderRadius: 12,
+                marginBottom: 12,
+
+                shadowColor: '#000',
+                shadowOffset: { width: 0, height: 2 },
+                shadowOpacity: 0.1,
+                shadowRadius: 4,
+                elevation: 2,
+              }}
+            >
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'flex-start',
+                  gap: 12,
+                }}
+              >
+                <Text style={{ fontSize: 24 }}>
+                  {getFileTypeIcon(file.name)}
+                </Text>
+
+                <View style={{ flex: 1 }}>
+                  <Text
+                    style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}
+                  >
+                    {file.name}
+                  </Text>
+
+                  <View style={{ gap: 2 }}>
+                    {file.size && (
+                      <Text variant='caption' style={{ fontSize: 14 }}>
+                        Size: {formatFileSize(file.size)}
+                      </Text>
+                    )}
+
+                    {file.mimeType && (
+                      <Text variant='caption' style={{ fontSize: 14 }}>
+                        Type: {file.mimeType}
+                      </Text>
+                    )}
+
+                    <Text variant='caption' style={{ fontSize: 14 }}>
+                      Status:{' '}
+                      {uploadProgress[index] >= 100
+                        ? 'Uploaded'
+                        : 'Uploading...'}
+                    </Text>
+                  </View>
+
+                  {/* Progress Bar */}
+                  {uploadProgress[index] !== undefined && (
+                    <View style={{ marginTop: 8 }}>
+                      <View
+                        style={{
+                          height: 4,
+                          backgroundColor: '#e0e0e0',
+                          borderRadius: 2,
+                          overflow: 'hidden',
+                        }}
+                      >
+                        <View
+                          style={{
+                            height: '100%',
+                            width: `${uploadProgress[index] || 0}%`,
+                            backgroundColor:
+                              uploadProgress[index] >= 100
+                                ? '#4CAF50'
+                                : '#2196F3',
+                            borderRadius: 2,
+                          }}
+                        />
+                      </View>
+                      <Text
+                        variant='caption'
+                        style={{ fontSize: 12, marginTop: 4 }}
+                      >
+                        {Math.round(uploadProgress[index] || 0)}%
+                      </Text>
+                    </View>
+                  )}
+                </View>
+              </View>
+            </View>
+          ))}
+
+          {/* Summary */}
+          <View
+            style={{
+              padding: 12,
+              backgroundColor: '#f0f8ff',
+              borderRadius: 8,
+              borderWidth: 1,
+              borderColor: '#e3f2fd',
+            }}
+          >
+            <Text style={{ fontSize: 14, fontWeight: '500', color: '#1976d2' }}>
+              Summary
+            </Text>
+            <Text style={{ fontSize: 14, color: '#1976d2' }}>
+              {files.length} file{files.length > 1 ? 's' : ''} • Total size:{' '}
+              {formatFileSize(
+                files.reduce((sum, file) => sum + (file.size || 0), 0)
+              )}
+            </Text>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}

package/dist/templates/demo/file-picker/file-picker-single.tsx

@@ -0,0 +1,35 @@
+import { FilePicker, SelectedFile } from '@/components/ui/file-picker';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function FilePickerSingle() {
+  const [selectedFile, setSelectedFile] = useState<SelectedFile[]>([]);
+
+  return (
+    <View style={{ gap: 12 }}>
+      <FilePicker
+        onFilesSelected={setSelectedFile}
+        onError={(error) => console.error('Error:', error)}
+        fileType='document'
+        multiple={false}
+        maxFiles={1}
+        maxSizeBytes={2 * 1024 * 1024} // 2MB
+        placeholder='Select a document'
+        showFileInfo={true}
+      />
+
+      {selectedFile.length > 0 && (
+        <View style={{ padding: 12, borderRadius: 8 }}>
+          <Text style={{ fontWeight: '500' }}>Selected File:</Text>
+          <Text style={{ fontSize: 14 }}>{selectedFile[0].name}</Text>
+          {selectedFile[0].size && (
+            <Text style={{ fontSize: 12, opacity: 0.7 }}>
+              {(selectedFile[0].size / 1024).toFixed(1)} KB
+            </Text>
+          )}
+        </View>
+      )}
+    </View>
+  );
+}

package/dist/templates/demo/file-picker/file-picker-styled.tsx

@@ -0,0 +1,78 @@
+import { FilePicker } from '@/components/ui/file-picker';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function FilePickerStyled() {
+  return (
+    <View style={{ gap: 16 }}>
+      {/* Primary Style */}
+      <View>
+        <Text style={{ marginBottom: 8, fontWeight: '500' }}>
+          Primary Style
+        </Text>
+
+        <FilePicker
+          variant='ghost'
+          onFilesSelected={(files) => console.log('Primary files:', files)}
+          onError={(error) => console.error('Error:', error)}
+          fileType='all'
+          multiple={true}
+          maxFiles={3}
+          placeholder='Upload files'
+          style={{
+            borderWidth: 2,
+            borderColor: '#007AFF',
+            borderRadius: 12,
+            // backgroundColor: '#f0f8ff',
+          }}
+        />
+      </View>
+
+      {/* Minimal Style */}
+      <View>
+        <Text style={{ marginBottom: 8, fontWeight: '500' }}>
+          Minimal Style
+        </Text>
+        <FilePicker
+          variant='ghost'
+          onFilesSelected={(files) => console.log('Minimal files:', files)}
+          onError={(error) => console.error('Error:', error)}
+          fileType='image'
+          multiple={false}
+          maxFiles={1}
+          placeholder='Choose image'
+          style={{
+            borderWidth: 1,
+            borderStyle: 'dashed',
+            borderColor: '#ccc',
+            borderRadius: 8,
+            backgroundColor: 'transparent',
+          }}
+        />
+      </View>
+
+      {/* Success Style */}
+      <View>
+        <Text style={{ marginBottom: 8, fontWeight: '500' }}>
+          Success Style
+        </Text>
+        <FilePicker
+          variant='ghost'
+          onFilesSelected={(files) => console.log('Success files:', files)}
+          onError={(error) => console.error('Error:', error)}
+          fileType='document'
+          multiple={true}
+          maxFiles={5}
+          placeholder='Select documents'
+          style={{
+            borderWidth: 2,
+            borderColor: '#34C759',
+            borderRadius: 16,
+            // backgroundColor: '#f0fff4',
+          }}
+        />
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/file-picker/file-picker-validation.tsx

@@ -0,0 +1,61 @@
+import { FilePicker, SelectedFile } from '@/components/ui/file-picker';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function FilePickerValidation() {
+  const [error, setError] = useState('');
+  const [files, setFiles] = useState<SelectedFile[]>([]);
+
+  return (
+    <View style={{ gap: 12 }}>
+      <FilePicker
+        onFilesSelected={(files) => {
+          setFiles(files);
+          setError('');
+        }}
+        onError={setError}
+        fileType='all'
+        multiple={true}
+        maxFiles={2}
+        maxSizeBytes={1 * 1024 * 1024} // 1MB limit
+        allowedExtensions={['pdf', 'doc', 'docx', 'txt']}
+        placeholder='Select (PDF, DOC, DOCX, TXT only)'
+        showFileInfo={true}
+      />
+
+      {error && (
+        <View
+          style={{
+            padding: 12,
+            backgroundColor: '#ffeaea',
+            borderRadius: 8,
+            borderWidth: 1,
+            borderColor: '#ffcaca',
+          }}
+        >
+          <Text style={{ color: '#d32f2f', fontSize: 14 }}>{error}</Text>
+        </View>
+      )}
+
+      {files.length > 0 && !error && (
+        <View
+          style={{
+            padding: 12,
+            backgroundColor: '#e8f5e8',
+            borderRadius: 8,
+            borderWidth: 1,
+            borderColor: '#c8e6c9',
+          }}
+        >
+          <Text style={{ color: '#2e7d32', fontSize: 14, fontWeight: '500' }}>
+            ✓ Files validated successfully
+          </Text>
+          <Text style={{ color: '#2e7d32', fontSize: 12, marginTop: 4 }}>
+            {files.length} file{files.length > 1 ? 's' : ''} ready for upload
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+}

package/dist/templates/demo/gallery/gallery-controls.tsx

@@ -0,0 +1,85 @@
+import { Gallery, GalleryItem } from '@/components/ui/gallery';
+import React from 'react';
+import { Alert } from 'react-native';
+
+const controlImages: GalleryItem[] = [
+  {
+    id: '1',
+    uri: 'https://images.unsplash.com/photo-1637858868799-7f26a0640eb6?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    title: 'City Skyline',
+    description: 'Modern architecture at sunset',
+    thumbnail:
+      'https://images.unsplash.com/photo-1637858868799-7f26a0640eb6?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  },
+  {
+    id: '2',
+    uri: 'https://images.unsplash.com/photo-1644190022446-04b99df7259a?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    title: 'Winter Wonderland',
+    description: 'Snow-covered peaks and pristine wilderness',
+    thumbnail:
+      'https://images.unsplash.com/photo-1644190022446-04b99df7259a?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  },
+  {
+    id: '3',
+    uri: 'https://images.unsplash.com/photo-1717732596477-04f8c5d53387?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    title: 'Ocean Waves',
+    description: 'Peaceful ocean scene with rolling waves',
+    thumbnail:
+      'https://images.unsplash.com/photo-1717732596477-04f8c5d53387?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  },
+  {
+    id: '4',
+    uri: 'https://images.unsplash.com/photo-1575737698350-52e966f924d4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    title: 'Forest Path',
+    description: 'A winding path through ancient trees',
+    thumbnail:
+      'https://images.unsplash.com/photo-1575737698350-52e966f924d4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  },
+  {
+    id: '5',
+    uri: 'https://images.unsplash.com/photo-1667830867718-da7f5a45d20d?q=80&w=1064&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    title: 'Desert Dunes',
+    description: 'Golden sand dunes stretching to the horizon',
+    thumbnail:
+      'https://images.unsplash.com/photo-1667830867718-da7f5a45d20d?q=80&w=1064&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  },
+  {
+    id: '6',
+    uri: 'https://images.unsplash.com/photo-1593085512500-5d55148d6f0d?q=80&w=2334&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    title: 'Beautiful Landscape',
+    description: 'A stunning view of mountains and valleys',
+    thumbnail:
+      'https://images.unsplash.com/photo-1593085512500-5d55148d6f0d?q=80&w=2334&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  },
+];
+
+export function GalleryControls() {
+  const handleDownload = (item: GalleryItem) => {
+    Alert.alert('Download', `Downloading: ${item.title || 'Image'}`, [
+      { text: 'OK' },
+    ]);
+  };
+
+  const handleShare = (item: GalleryItem) => {
+    Alert.alert('Share', `Sharing: ${item.title || 'Image'}`, [{ text: 'OK' }]);
+  };
+
+  return (
+    <Gallery
+      items={controlImages}
+      columns={2}
+      spacing={12}
+      borderRadius={12}
+      aspectRatio={1}
+      showTitles={true}
+      showDescriptions={true}
+      showPages={true}
+      enableFullscreen={true}
+      enableZoom={true}
+      enableDownload={true}
+      enableShare={true}
+      onDownload={handleDownload}
+      onShare={handleShare}
+    />
+  );
+}

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

@@ -0,0 +1,66 @@
+import { Gallery, GalleryItem } from '@/components/ui/gallery';
+import React from 'react';
+
+const sampleImages: GalleryItem[] = [
+  {
+    id: '1',
+    uri: 'https://images.unsplash.com/photo-1637858868799-7f26a0640eb6?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    title: 'City Skyline',
+    description: 'Modern architecture at sunset',
+    thumbnail:
+      'https://images.unsplash.com/photo-1637858868799-7f26a0640eb6?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  },
+  {
+    id: '2',
+    uri: 'https://images.unsplash.com/photo-1644190022446-04b99df7259a?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    title: 'Winter Wonderland',
+    description: 'Snow-covered peaks and pristine wilderness',
+    thumbnail:
+      'https://images.unsplash.com/photo-1644190022446-04b99df7259a?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  },
+  {
+    id: '3',
+    uri: 'https://images.unsplash.com/photo-1717732596477-04f8c5d53387?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    title: 'Ocean Waves',
+    description: 'Peaceful ocean scene with rolling waves',
+    thumbnail:
+      'https://images.unsplash.com/photo-1717732596477-04f8c5d53387?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  },
+  {
+    id: '4',
+    uri: 'https://images.unsplash.com/photo-1575737698350-52e966f924d4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    title: 'Forest Path',
+    description: 'A winding path through ancient trees',
+    thumbnail:
+      'https://images.unsplash.com/photo-1575737698350-52e966f924d4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  },
+  {
+    id: '5',
+    uri: 'https://images.unsplash.com/photo-1667830867718-da7f5a45d20d?q=80&w=1064&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    title: 'Desert Dunes',
+    description: 'Golden sand dunes stretching to the horizon',
+    thumbnail:
+      'https://images.unsplash.com/photo-1667830867718-da7f5a45d20d?q=80&w=1064&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  },
+  {
+    id: '6',
+    uri: 'https://images.unsplash.com/photo-1593085512500-5d55148d6f0d?q=80&w=2334&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    title: 'Beautiful Landscape',
+    description: 'A stunning view of mountains and valleys',
+    thumbnail:
+      'https://images.unsplash.com/photo-1593085512500-5d55148d6f0d?q=80&w=2334&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  },
+];
+
+export function GalleryDemo() {
+  return (
+    <Gallery
+      items={sampleImages}
+      columns={2}
+      spacing={8}
+      borderRadius={12}
+      enableFullscreen={true}
+      enableZoom={true}
+    />
+  );
+}

package/dist/templates/demo/gallery/gallery-grid.tsx

@@ -0,0 +1,109 @@
+import { Gallery, GalleryItem } from '@/components/ui/gallery';
+import { ScrollView } from '@/components/ui/scroll-view';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+const gridImages: GalleryItem[] = [
+  {
+    id: '1',
+    uri: 'https://images.unsplash.com/photo-1637858868799-7f26a0640eb6?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    title: 'City Skyline',
+    description: 'Modern architecture at sunset',
+    thumbnail:
+      'https://images.unsplash.com/photo-1637858868799-7f26a0640eb6?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  },
+  {
+    id: '2',
+    uri: 'https://images.unsplash.com/photo-1644190022446-04b99df7259a?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    title: 'Winter Wonderland',
+    description: 'Snow-covered peaks and pristine wilderness',
+    thumbnail:
+      'https://images.unsplash.com/photo-1644190022446-04b99df7259a?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  },
+  {
+    id: '3',
+    uri: 'https://images.unsplash.com/photo-1717732596477-04f8c5d53387?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    title: 'Ocean Waves',
+    description: 'Peaceful ocean scene with rolling waves',
+    thumbnail:
+      'https://images.unsplash.com/photo-1717732596477-04f8c5d53387?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  },
+  {
+    id: '4',
+    uri: 'https://images.unsplash.com/photo-1575737698350-52e966f924d4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    title: 'Forest Path',
+    description: 'A winding path through ancient trees',
+    thumbnail:
+      'https://images.unsplash.com/photo-1575737698350-52e966f924d4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  },
+  {
+    id: '5',
+    uri: 'https://images.unsplash.com/photo-1667830867718-da7f5a45d20d?q=80&w=1064&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    title: 'Desert Dunes',
+    description: 'Golden sand dunes stretching to the horizon',
+    thumbnail:
+      'https://images.unsplash.com/photo-1667830867718-da7f5a45d20d?q=80&w=1064&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  },
+  {
+    id: '6',
+    uri: 'https://images.unsplash.com/photo-1593085512500-5d55148d6f0d?q=80&w=2334&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    title: 'Beautiful Landscape',
+    description: 'A stunning view of mountains and valleys',
+    thumbnail:
+      'https://images.unsplash.com/photo-1593085512500-5d55148d6f0d?q=80&w=2334&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  },
+];
+
+export function GalleryGrid() {
+  return (
+    <ScrollView
+      style={{ flex: 1 }}
+      contentContainerStyle={{
+        gap: 16,
+        paddingBottom: 32,
+      }}
+      showsVerticalScrollIndicator={false}
+    >
+      <View style={{ flex: 1 }}>
+        <Text variant='subtitle' style={{ marginBottom: 12 }}>
+          4 Columns, No Spacing
+        </Text>
+        <Gallery
+          items={gridImages}
+          columns={4}
+          spacing={0}
+          borderRadius={0}
+          aspectRatio={1}
+        />
+      </View>
+
+      <View style={{ flex: 1 }}>
+        <Text variant='subtitle' style={{ marginBottom: 12 }}>
+          3 Columns with Spacing
+        </Text>
+
+        <Gallery
+          items={gridImages.slice(0, 6)}
+          columns={3}
+          spacing={12}
+          borderRadius={8}
+          aspectRatio={1.2}
+        />
+      </View>
+
+      <View style={{ flex: 1 }}>
+        <Text variant='subtitle' style={{ marginBottom: 12 }}>
+          2 Columns, Large Spacing
+        </Text>
+        <Gallery
+          items={gridImages.slice(0, 4)}
+          columns={2}
+          spacing={20}
+          borderRadius={16}
+          aspectRatio={0.8}
+        />
+      </View>
+    </ScrollView>
+  );
+}