kynjal-cli 2.0.6

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

@@ -0,0 +1,70 @@
+import { Gallery, GalleryItem } from '@/components/ui/gallery';
+import React from 'react';
+
+const infoImages: 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 GalleryInfo() {
+  return (
+    <Gallery
+      items={infoImages}
+      columns={2}
+      spacing={16}
+      borderRadius={12}
+      aspectRatio={1}
+      showTitles={true}
+      showDescriptions={true}
+      showPages={true}
+      enableFullscreen={true}
+      enableZoom={true}
+    />
+  );
+}

package/dist/templates/demo/gallery/gallery-layouts.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 layoutImages: 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 GalleryLayouts() {
+  return (
+    <ScrollView
+      style={{ flex: 1 }}
+      contentContainerStyle={{
+        gap: 16,
+        paddingBottom: 32,
+      }}
+      showsVerticalScrollIndicator={false}
+    >
+      <View>
+        <Text variant='subtitle' style={{ marginBottom: 12 }}>
+          Single Column (Feed Style)
+        </Text>
+        <Gallery
+          items={layoutImages.slice(0, 3)}
+          columns={1}
+          spacing={16}
+          borderRadius={12}
+          aspectRatio={1.2}
+          showTitles={true}
+        />
+      </View>
+
+      <View>
+        <Text variant='subtitle' style={{ marginBottom: 12 }}>
+          Square Grid
+        </Text>
+        <Gallery
+          items={layoutImages}
+          columns={3}
+          spacing={4}
+          borderRadius={8}
+          aspectRatio={1}
+        />
+      </View>
+
+      <View>
+        <Text variant='subtitle' style={{ marginBottom: 12 }}>
+          Wide Thumbnails
+        </Text>
+        <Gallery
+          items={layoutImages.slice(0, 4)}
+          columns={2}
+          spacing={8}
+          borderRadius={16}
+          aspectRatio={1.5}
+        />
+      </View>
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,89 @@
+import { Gallery, GalleryItem } from '@/components/ui/gallery';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+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 GalleryOverlay() {
+  return (
+    <Gallery
+      items={sampleImages}
+      columns={2}
+      aspectRatio={1}
+      renderCustomOverlay={(item) => (
+        <View
+          style={{
+            position: 'absolute',
+            top: 8,
+            right: 8,
+            backgroundColor: 'rgba(0,0,0,0.7)',
+            borderRadius: 12,
+            paddingHorizontal: 8,
+            paddingVertical: 4,
+          }}
+        >
+          <Text
+            variant='caption'
+            style={{
+              color: 'white',
+              fontSize: 12,
+              fontWeight: 'bold',
+            }}
+          >
+            {item.title}
+          </Text>
+        </View>
+      )}
+    />
+  );
+}

package/dist/templates/demo/hello-wave/hello-wave-demo.tsx

@@ -0,0 +1,6 @@
+import { HelloWave } from '@/components/ui/hello-wave';
+import React from 'react';
+
+export function HellowWaveDemo() {
+  return <HelloWave>👋</HelloWave>;
+}

package/dist/templates/demo/icon/icon-colors.tsx

@@ -0,0 +1,39 @@
+import { Icon } from '@/components/ui/icon';
+import { View } from '@/components/ui/view';
+import { Circle } from 'lucide-react-native';
+import React from 'react';
+
+export function IconColors() {
+  const colors = [
+    '#FF6B6B', // Red
+    '#4ECDC4', // Teal
+    '#45B7D1', // Blue
+    '#96CEB4', // Green
+    '#FECA57', // Yellow
+    '#FF9FF3', // Pink
+    '#54A0FF', // Light Blue
+    '#5F27CD', // Purple
+  ];
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+        flexWrap: 'wrap',
+      }}
+    >
+      {colors.map((color, index) => (
+        <Icon
+          key={index}
+          name={Circle}
+          size={24}
+          color={color}
+          fill={color}
+          fillOpacity={0.2}
+        />
+      ))}
+    </View>
+  );
+}

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

@@ -0,0 +1,7 @@
+import { Icon } from '@/components/ui/icon';
+import { Heart } from 'lucide-react-native';
+import React from 'react';
+
+export function IconDemo() {
+  return <Icon name={Heart} size={24} />;
+}

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

@@ -0,0 +1,69 @@
+import { Icon } from '@/components/ui/icon';
+import { View } from '@/components/ui/view';
+import {
+  Bell,
+  Calendar,
+  Camera,
+  Download,
+  Edit,
+  Heart,
+  Home,
+  Mail,
+  Minus,
+  Plus,
+  Search,
+  Settings,
+  Star,
+  Trash,
+  Upload,
+  User,
+} from 'lucide-react-native';
+import React from 'react';
+
+export function IconGrid() {
+  const icons = [
+    Home,
+    Search,
+    Bell,
+    User,
+    Settings,
+    Heart,
+    Star,
+    Mail,
+    Calendar,
+    Camera,
+    Download,
+    Upload,
+    Edit,
+    Trash,
+    Plus,
+    Minus,
+  ];
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 16,
+      }}
+    >
+      {icons.map((IconComponent, index) => (
+        <View
+          key={index}
+          style={{
+            padding: 12,
+            backgroundColor: '#f8f9fa',
+            borderRadius: 8,
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 48,
+            height: 48,
+          }}
+        >
+          <Icon name={IconComponent} size={20} color='#495057' />
+        </View>
+      ))}
+    </View>
+  );
+}

package/dist/templates/demo/icon/icon-interactive.tsx

@@ -0,0 +1,66 @@
+import { Button } from '@/components/ui/button';
+import { Icon } from '@/components/ui/icon';
+import { View } from '@/components/ui/view';
+import { Bookmark, Heart, Share, ThumbsUp } from 'lucide-react-native';
+import React, { useState } from 'react';
+
+export function IconInteractive() {
+  const [liked, setLiked] = useState(false);
+  const [thumbsUp, setThumbsUp] = useState(false);
+  const [bookmarked, setBookmarked] = useState(false);
+
+  const iconButtons = [
+    {
+      icon: Heart,
+      active: liked,
+      onPress: () => setLiked(!liked),
+      activeColor: '#FF6B6B',
+      inactiveColor: '#888',
+    },
+    {
+      icon: ThumbsUp,
+      active: thumbsUp,
+      onPress: () => setThumbsUp(!thumbsUp),
+      activeColor: '#4ECDC4',
+      inactiveColor: '#888',
+    },
+    {
+      icon: Bookmark,
+      active: bookmarked,
+      onPress: () => setBookmarked(!bookmarked),
+      activeColor: '#FECA57',
+      inactiveColor: '#888',
+    },
+    {
+      icon: Share,
+      active: false,
+      onPress: () => {},
+      activeColor: '#45B7D1',
+      inactiveColor: '#888',
+    },
+  ];
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        gap: 20,
+        alignItems: 'center',
+      }}
+    >
+      {iconButtons.map(
+        ({ icon, active, onPress, activeColor, inactiveColor }, index) => (
+          <Button key={index} variant='ghost' size='icon' onPress={onPress}>
+            <Icon
+              name={icon}
+              size={24}
+              color={active ? activeColor : inactiveColor}
+              fill={active ? activeColor : 'transparent'}
+              fillOpacity={active ? 0.2 : 0}
+            />
+          </Button>
+        )
+      )}
+    </View>
+  );
+}

package/dist/templates/demo/icon/icon-sizes.tsx

@@ -0,0 +1,23 @@
+import { Icon } from '@/components/ui/icon';
+import { View } from '@/components/ui/view';
+import { Star } from 'lucide-react-native';
+import React from 'react';
+
+export function IconSizes() {
+  const sizes = [16, 20, 24, 32, 40, 48];
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 16,
+        flexWrap: 'wrap',
+      }}
+    >
+      {sizes.map((size) => (
+        <Icon key={size} name={Star} size={size} color='#FFD700' />
+      ))}
+    </View>
+  );
+}

package/dist/templates/demo/icon/icon-stroke.tsx

@@ -0,0 +1,34 @@
+import { Icon } from '@/components/ui/icon';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { Zap } from 'lucide-react-native';
+import React from 'react';
+
+export function IconStroke() {
+  const strokeWeights = [
+    { weight: 1, label: 'Light' },
+    { weight: 1.5, label: 'Regular' },
+    { weight: 2, label: 'Medium' },
+    { weight: 2.5, label: 'Bold' },
+  ];
+
+  return (
+    <View style={{ gap: 16 }}>
+      {strokeWeights.map(({ weight, label }) => (
+        <View
+          key={weight}
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 12,
+          }}
+        >
+          <Icon name={Zap} size={24} strokeWidth={weight} color='#F39C12' />
+          <Text variant='body' style={{ minWidth: 60 }}>
+            {label}
+          </Text>
+        </View>
+      ))}
+    </View>
+  );
+}

package/dist/templates/demo/icon/icon-themed.tsx

@@ -0,0 +1,57 @@
+import { Icon } from '@/components/ui/icon';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { Monitor, Moon, Palette, Sun } from 'lucide-react-native';
+import React from 'react';
+
+export function IconThemed() {
+  const themedIcons = [
+    {
+      icon: Sun,
+      label: 'Light Theme',
+      lightColor: '#FFA500',
+      darkColor: '#FFD700',
+    },
+    {
+      icon: Moon,
+      label: 'Dark Theme',
+      lightColor: '#4A5568',
+      darkColor: '#E2E8F0',
+    },
+    {
+      icon: Monitor,
+      label: 'System',
+      lightColor: '#2D3748',
+      darkColor: '#F7FAFC',
+    },
+    {
+      icon: Palette,
+      label: 'Custom',
+      lightColor: '#E53E3E',
+      darkColor: '#FC8181',
+    },
+  ];
+
+  return (
+    <View style={{ gap: 16 }}>
+      {themedIcons.map(({ icon, label, lightColor, darkColor }, index) => (
+        <View
+          key={index}
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 12,
+          }}
+        >
+          <Icon
+            name={icon}
+            size={24}
+            lightColor={lightColor}
+            darkColor={darkColor}
+          />
+          <Text variant='body'>{label}</Text>
+        </View>
+      ))}
+    </View>
+  );
+}

package/dist/templates/demo/image/image-content-fit.tsx

@@ -0,0 +1,67 @@
+import { Image } from '@/components/ui/image';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function ImageContentFit() {
+  const imageUri = 'https://picsum.photos/600/400?random=30';
+
+  return (
+    <View style={{ gap: 16 }}>
+      <View style={{ gap: 8 }}>
+        <Text variant='caption'>Cover (Default)</Text>
+
+        <Image
+          source={{ uri: imageUri }}
+          width={150}
+          height={100}
+          contentFit='cover'
+        />
+      </View>
+
+      <View style={{ gap: 8 }}>
+        <Text variant='caption'>Contain</Text>
+
+        <Image
+          source={{ uri: imageUri }}
+          width={150}
+          height={100}
+          contentFit='contain'
+        />
+      </View>
+
+      <View style={{ gap: 8 }}>
+        <Text variant='caption'>Fill</Text>
+
+        <Image
+          source={{ uri: imageUri }}
+          width={150}
+          height={100}
+          contentFit='fill'
+        />
+      </View>
+
+      <View style={{ gap: 8 }}>
+        <Text variant='caption'>Scale Down</Text>
+
+        <Image
+          source={{ uri: 'https://picsum.photos/100/80?random=31' }}
+          width={150}
+          height={100}
+          contentFit='scale-down'
+        />
+      </View>
+
+      <View style={{ gap: 8 }}>
+        <Text variant='caption'>None</Text>
+
+        <Image
+          source={{ uri: 'https://picsum.photos/100/60?random=32' }}
+          width={150}
+          height={100}
+          contentFit='none'
+        />
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,12 @@
+import { Image } from '@/components/ui/image';
+
+export function ImageDemo() {
+  return (
+    <Image
+      source={{
+        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',
+      }}
+      aspectRatio={1}
+    />
+  );
+}