kynjal-cli 2.0.6

package/dist/templates/demo/card/card-stats.tsx

@@ -0,0 +1,33 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function CardStats() {
+  const stats = [
+    { title: 'Total Users', value: '12,543', change: '+12%' },
+    { title: 'Revenue', value: '$45,231', change: '+8%' },
+    { title: 'Orders', value: '1,234', change: '+23%' },
+    { title: 'Growth', value: '15.3%', change: '+4%' },
+  ];
+
+  return (
+    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 16 }}>
+      {stats.map((stat, index) => (
+        <Card key={index} style={{ flex: 1, minWidth: 150 }}>
+          <CardHeader>
+            <CardTitle style={{ fontSize: 16 }}>{stat.title}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Text style={{ fontSize: 24, fontWeight: 'bold', marginBottom: 4 }}>
+              {stat.value}
+            </Text>
+            <Text style={{ color: '#22c55e', fontSize: 14 }}>
+              {stat.change} from last month
+            </Text>
+          </CardContent>
+        </Card>
+      ))}
+    </View>
+  );
+}

package/dist/templates/demo/card/card-with-form.tsx

@@ -0,0 +1,76 @@
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import React, { useState } from 'react';
+import { TextInput } from 'react-native';
+
+export function CardWithForm() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const borderColor = useColor('border');
+  const backgroundColor = useColor('background');
+  const textColor = useColor('text');
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Sign In</CardTitle>
+        <CardDescription>
+          Enter your credentials to access your account.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <View style={{ gap: 16 }}>
+          <View>
+            <Text style={{ marginBottom: 8, fontWeight: '500' }}>Email</Text>
+            <TextInput
+              value={email}
+              onChangeText={setEmail}
+              placeholder='Enter your email'
+              style={{
+                borderWidth: 1,
+                borderColor,
+                borderRadius: 999,
+                padding: 12,
+                backgroundColor,
+                color: textColor,
+              }}
+              keyboardType='email-address'
+              autoCapitalize='none'
+            />
+          </View>
+          <View>
+            <Text style={{ marginBottom: 8, fontWeight: '500' }}>Password</Text>
+            <TextInput
+              value={password}
+              onChangeText={setPassword}
+              placeholder='Enter your password'
+              secureTextEntry
+              style={{
+                borderWidth: 1,
+                borderColor,
+                borderRadius: 999,
+                padding: 12,
+                backgroundColor,
+                color: textColor,
+              }}
+            />
+          </View>
+        </View>
+      </CardContent>
+      <CardFooter>
+        <Button variant='outline'>Cancel</Button>
+        <Button>Sign In</Button>
+      </CardFooter>
+    </Card>
+  );
+}

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

@@ -0,0 +1,43 @@
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+import { Image } from 'react-native';
+
+export function CardWithImage() {
+  return (
+    <Card>
+      <View style={{ borderRadius: 26, overflow: 'hidden', marginBottom: 16 }}>
+        <Image
+          source={{ uri: 'https://picsum.photos/350/200' }}
+          style={{ width: '100%', height: 300 }}
+          resizeMode='cover'
+        />
+      </View>
+      <CardHeader>
+        <CardTitle>Beautiful Landscape</CardTitle>
+        <CardDescription>
+          A stunning view captured in the mountains during golden hour.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Text>
+          This image showcases the beauty of nature with its vibrant colors and
+          serene atmosphere.
+        </Text>
+      </CardContent>
+      <CardFooter>
+        <Button variant='outline'>Share</Button>
+        <Button>Download</Button>
+      </CardFooter>
+    </Card>
+  );
+}

package/dist/templates/demo/carousel/carousel-arrows.tsx

@@ -0,0 +1,79 @@
+import { Carousel, CarouselItem } from '@/components/ui/carousel';
+import { Icon } from '@/components/ui/icon';
+import { Text } from '@/components/ui/text';
+import { Award, Heart, Star, Zap } from 'lucide-react-native';
+
+export function CarouselArrows() {
+  const slides = [
+    {
+      icon: Heart,
+      title: 'Loved by Users',
+      description: 'Thousands of happy customers worldwide trust our products.',
+      color: '#fee2e2',
+      bg: '#FF6B6B',
+    },
+    {
+      icon: Zap,
+      title: 'Lightning Fast',
+      description: 'Optimized for performance with smooth animations.',
+      color: '#f3e8ff',
+      bg: '#8b5cf6',
+    },
+    {
+      icon: Star,
+      title: 'Premium Quality',
+      description: 'Built with the highest standards and attention to detail.',
+      color: '#f59e0b',
+      bg: '#fef3c7',
+    },
+    {
+      icon: Award,
+      title: 'Award Winning',
+      description: 'Recognized for excellence in design and functionality.',
+      color: '#d1fae5',
+      bg: '#4ECDC4',
+    },
+  ];
+
+  return (
+    <Carousel showArrows showIndicators loop>
+      {slides.map((slide, index) => {
+        const name = slide.icon;
+        return (
+          <CarouselItem
+            key={index}
+            style={{
+              alignItems: 'center',
+              justifyContent: 'center',
+              minHeight: 220,
+              backgroundColor: slide.bg,
+              padding: 20,
+            }}
+          >
+            <Icon name={name} size={48} color={slide.color} />
+            <Text
+              variant='title'
+              style={{
+                color: slide.color,
+                marginTop: 16,
+                marginBottom: 8,
+              }}
+            >
+              {slide.title}
+            </Text>
+            <Text
+              style={{
+                textAlign: 'center',
+                color: slide.color,
+                fontSize: 14,
+                lineHeight: 20,
+              }}
+            >
+              {slide.description}
+            </Text>
+          </CarouselItem>
+        );
+      })}
+    </Carousel>
+  );
+}

package/dist/templates/demo/carousel/carousel-cards.tsx

@@ -0,0 +1,146 @@
+import { Carousel, CarouselItem } from '@/components/ui/carousel';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import { Calendar, MapPin, User } from 'lucide-react-native';
+import React from 'react';
+
+export function CarouselCards() {
+  const cardColor = useColor('card');
+  const textColor = useColor('text');
+  const primaryColor = useColor('primary');
+
+  const events = [
+    {
+      title: 'Tech Summit',
+      location: 'New York, NY',
+      date: 'Apr 8-10, 2024',
+      attendees: 2100,
+      category: 'Technology',
+      color: '#10b981',
+    },
+    {
+      title: 'Creative Workshop',
+      location: 'Los Angeles, CA',
+      date: 'May 22-23, 2024',
+      attendees: 850,
+      category: 'Creative',
+      color: '#f59e0b',
+    },
+    {
+      title: 'Design Conference 2024',
+      location: 'San Francisco, CA',
+      date: 'Mar 15-17, 2024',
+      attendees: 1250,
+      category: 'Design',
+      color: '#3b82f6',
+    },
+  ];
+
+  return (
+    <Carousel showIndicators>
+      {events.map((event, index) => (
+        <CarouselItem key={index}>
+          <View style={{ padding: 20 }}>
+            {/* Category Badge */}
+            <View
+              style={{
+                alignSelf: 'flex-start',
+                backgroundColor: event.color,
+                paddingHorizontal: 12,
+                paddingVertical: 4,
+                borderRadius: 12,
+                marginBottom: 16,
+              }}
+            >
+              <Text
+                style={{
+                  color: 'white',
+                  fontSize: 12,
+                  fontWeight: '600',
+                }}
+              >
+                {event.category}
+              </Text>
+            </View>
+
+            {/* Event Title */}
+            <Text
+              variant='title'
+              style={{
+                color: textColor,
+                fontSize: 20,
+                marginBottom: 16,
+                lineHeight: 28,
+              }}
+            >
+              {event.title}
+            </Text>
+
+            {/* Event Details */}
+            <View style={{ gap: 12 }}>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  gap: 8,
+                }}
+              >
+                <MapPin size={16} color={primaryColor} />
+                <Text style={{ color: textColor, flex: 1 }}>
+                  {event.location}
+                </Text>
+              </View>
+
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  gap: 8,
+                }}
+              >
+                <Calendar size={16} color={primaryColor} />
+                <Text style={{ color: textColor, flex: 1 }}>{event.date}</Text>
+              </View>
+
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  gap: 8,
+                }}
+              >
+                <User size={16} color={primaryColor} />
+                <Text style={{ color: textColor, flex: 1 }}>
+                  {event.attendees.toLocaleString()} attendees
+                </Text>
+              </View>
+            </View>
+
+            {/* Action Button */}
+            <View
+              style={{
+                backgroundColor: event.color,
+                borderRadius: 8,
+                paddingVertical: 12,
+                paddingHorizontal: 16,
+                marginTop: 20,
+                alignItems: 'center',
+              }}
+            >
+              <Text
+                style={{
+                  color: 'white',
+                  fontWeight: '600',
+                  fontSize: 16,
+                }}
+              >
+                Learn More
+              </Text>
+            </View>
+          </View>
+        </CarouselItem>
+      ))}
+    </Carousel>
+  );
+}

package/dist/templates/demo/carousel/carousel-custom-width.tsx

@@ -0,0 +1,85 @@
+import { Carousel, CarouselItem } from '@/components/ui/carousel';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import React from 'react';
+import { Dimensions } from 'react-native';
+
+const { width: screenWidth } = Dimensions.get('window');
+
+export function CarouselCustomWidth() {
+  const cardColor = useColor('card');
+  const textColor = useColor('text');
+
+  const products = [
+    { id: 1, name: 'Wireless Headphones', price: '$99.99', rating: '4.8' },
+    { id: 2, name: 'Smart Watch', price: '$199.99', rating: '4.9' },
+    { id: 3, name: 'Bluetooth Speaker', price: '$79.99', rating: '4.7' },
+    { id: 4, name: 'Phone Case', price: '$24.99', rating: '4.6' },
+    { id: 5, name: 'Wireless Charger', price: '$39.99', rating: '4.8' },
+  ];
+
+  return (
+    <View>
+      <Carousel
+        itemWidth={screenWidth * 0.7}
+        spacing={16}
+        showIndicators={false}
+      >
+        {products.map((product) => (
+          <CarouselItem
+            key={product.id}
+            style={{
+              backgroundColor: cardColor,
+              minHeight: 160,
+              padding: 20,
+            }}
+          >
+            <View style={{ flex: 1, justifyContent: 'space-between' }}>
+              <View>
+                <Text
+                  variant='title'
+                  style={{
+                    color: textColor,
+                    fontSize: 18,
+                    marginBottom: 8,
+                  }}
+                >
+                  {product.name}
+                </Text>
+                <Text
+                  style={{
+                    color: textColor,
+                    opacity: 0.7,
+                    marginBottom: 12,
+                  }}
+                >
+                  ⭐ {product.rating} rating
+                </Text>
+              </View>
+              <Text
+                variant='title'
+                style={{
+                  color: '#10b981',
+                  fontSize: 20,
+                  fontWeight: 'bold',
+                }}
+              >
+                {product.price}
+              </Text>
+            </View>
+          </CarouselItem>
+        ))}
+      </Carousel>
+
+      <Text
+        variant='caption'
+        style={{
+          marginTop: 16,
+        }}
+      >
+        Swipe to see more products →
+      </Text>
+    </View>
+  );
+}

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

@@ -0,0 +1,57 @@
+import { Carousel, CarouselItem } from '@/components/ui/carousel';
+import { Text } from '@/components/ui/text';
+
+export function CarouselDemo() {
+  return (
+    <Carousel
+      showIndicators={true}
+      showArrows={true}
+      autoPlay={true}
+      loop={true}
+    >
+      {slides.map((slide) => (
+        <CarouselItem
+          key={slide.id}
+          style={{
+            minHeight: 200,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <Text variant='subtitle'>{slide.title}</Text>
+          <Text
+            style={{
+              marginTop: 8,
+              opacity: 0.7,
+            }}
+          >
+            {slide.content}
+          </Text>
+        </CarouselItem>
+      ))}
+    </Carousel>
+  );
+}
+
+const slides = [
+  {
+    id: 1,
+    title: 'Full Width Slide 1',
+    content: 'This slide takes the full width of the container',
+  },
+  {
+    id: 2,
+    title: 'Full Width Slide 2',
+    content: 'Perfect for hero sections and main content',
+  },
+  {
+    id: 3,
+    title: 'Full Width Slide 3',
+    content: 'Uses paging for smooth navigation',
+  },
+  {
+    id: 4,
+    title: 'Full Width Slide 4',
+    content: 'Default behavior - no spacing needed',
+  },
+];

package/dist/templates/demo/carousel/carousel-images.tsx

@@ -0,0 +1,83 @@
+import { Carousel, CarouselItem } from '@/components/ui/carousel';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { BORDER_RADIUS } from '@/theme/globals';
+import { Image } from 'expo-image';
+import React from 'react';
+
+export function CarouselImages() {
+  const images = [
+    {
+      uri: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop',
+      title: 'Mountain Landscape',
+      description: 'Breathtaking mountain views',
+    },
+    {
+      uri: 'https://images.unsplash.com/photo-1439066615861-d1af74d74000?w=400&h=300&fit=crop',
+      title: 'Forest Path',
+      description: 'Peaceful forest walking trail',
+    },
+    {
+      uri: 'https://images.unsplash.com/photo-1501436513145-30f24e19fcc4?w=400&h=300&fit=crop',
+      title: 'Ocean Sunset',
+      description: 'Golden hour by the sea',
+    },
+    {
+      uri: 'https://images.unsplash.com/photo-1500375592092-40eb2168fd21?w=400&h=300&fit=crop',
+      title: 'Desert Dunes',
+      description: 'Vast desert landscape',
+    },
+  ];
+
+  return (
+    <Carousel autoPlay autoPlayInterval={5000} showIndicators showArrows loop>
+      {images.map((image, index) => (
+        <CarouselItem key={index} style={{ padding: 0 }}>
+          <View style={{ position: 'relative' }}>
+            <Image
+              source={{ uri: image.uri }}
+              style={{
+                width: '100%',
+                height: 240,
+                borderRadius: BORDER_RADIUS,
+              }}
+              contentFit='cover'
+            />
+            <View
+              style={{
+                position: 'absolute',
+                bottom: 0,
+                left: 0,
+                right: 0,
+                backgroundColor: 'rgba(0,0,0,0.6)',
+                borderBottomLeftRadius: BORDER_RADIUS,
+                borderBottomRightRadius: BORDER_RADIUS,
+                padding: 16,
+              }}
+            >
+              <Text
+                variant='title'
+                style={{
+                  color: 'white',
+                  fontSize: 18,
+                  marginBottom: 4,
+                }}
+              >
+                {image.title}
+              </Text>
+              <Text
+                style={{
+                  color: 'white',
+                  opacity: 0.9,
+                  fontSize: 14,
+                }}
+              >
+                {image.description}
+              </Text>
+            </View>
+          </View>
+        </CarouselItem>
+      ))}
+    </Carousel>
+  );
+}