kynjal-cli 2.0.6

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

@@ -0,0 +1,215 @@
+import { Button } from '@/components/ui/button';
+import { Carousel, CarouselItem, CarouselRef } from '@/components/ui/carousel';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { ChevronLeft, ChevronRight, RotateCcw } from 'lucide-react-native';
+import React, { useRef, useState } from 'react';
+
+export function CarouselManual() {
+  const totalSlides = 4;
+  const carouselRef = useRef<CarouselRef>(null);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const lessons = [
+    {
+      title: 'Introduction to React Native',
+      progress: 0,
+      duration: '15 min',
+      bg: '#9c27b0',
+      color: '#f3e5f5',
+    },
+    {
+      title: 'Component Architecture',
+      progress: 45,
+      duration: '20 min',
+      bg: '#ff5722',
+      color: '#fff3e0',
+    },
+    {
+      title: 'State Management',
+      progress: 75,
+      duration: '25 min',
+      bg: '#00bcd4',
+      color: '#e0f2f1',
+    },
+    {
+      title: 'Navigation Patterns',
+      progress: 100,
+      duration: '18 min',
+      bg: '#ff4081',
+      color: '#fce4ec',
+    },
+  ];
+
+  const handleGoToSlide = (index: number) => {
+    if (carouselRef.current?.goToSlide) {
+      carouselRef.current.goToSlide(index);
+    }
+  };
+
+  const handleGoToPrevious = () => {
+    if (currentIndex > 0) {
+      if (carouselRef.current?.goToPrevious) {
+        carouselRef.current.goToPrevious();
+      }
+    }
+  };
+
+  const handleGoToNext = () => {
+    if (currentIndex < totalSlides - 1) {
+      if (carouselRef.current?.goToNext) {
+        carouselRef.current.goToNext();
+      }
+    }
+  };
+
+  const handleReset = () => {
+    if (carouselRef.current?.goToSlide) {
+      carouselRef.current.goToSlide(0);
+    }
+  };
+
+  // Handle index changes from carousel (swipe gestures AND button presses)
+  const handleIndexChange = (index: number) => {
+    setCurrentIndex(index);
+  };
+
+  return (
+    <View style={{ gap: 16 }}>
+      {/* External Controls */}
+      <View
+        style={{
+          paddingHorizontal: 4,
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <Button
+          size='icon'
+          variant='outline'
+          icon={ChevronLeft}
+          onPress={handleGoToPrevious}
+          disabled={currentIndex === 0}
+        />
+
+        <View style={{ flexDirection: 'row', gap: 8 }}>
+          {Array.from({ length: totalSlides }).map((_, index) => (
+            <Button
+              key={index}
+              size='icon'
+              variant={currentIndex === index ? 'default' : 'outline'}
+              onPress={() => handleGoToSlide(index)}
+              style={{ minWidth: 40 }}
+            >
+              {`${index + 1}`}
+            </Button>
+          ))}
+        </View>
+
+        <Button
+          size='icon'
+          variant='outline'
+          icon={ChevronRight}
+          onPress={handleGoToNext}
+          disabled={currentIndex === totalSlides - 1}
+        />
+      </View>
+
+      {/* Carousel */}
+      <Carousel
+        ref={carouselRef}
+        showIndicators={false}
+        onIndexChange={handleIndexChange}
+      >
+        {lessons.map((lesson, index) => (
+          <CarouselItem
+            key={index}
+            style={{
+              padding: 24,
+              minHeight: 200,
+              backgroundColor: lesson.bg,
+              justifyContent: 'space-between',
+            }}
+          >
+            <View>
+              <Text
+                variant='title'
+                style={{
+                  color: lesson.color,
+                  fontSize: 20,
+                  marginBottom: 12,
+                }}
+              >
+                {lesson.title}
+              </Text>
+
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  gap: 8,
+                  marginBottom: 16,
+                }}
+              >
+                <Text style={{ color: lesson.color, fontSize: 14 }}>
+                  {lesson.duration}
+                </Text>
+                <View
+                  style={{
+                    width: 4,
+                    height: 4,
+                    borderRadius: 2,
+                    backgroundColor: lesson.color,
+                    opacity: 0.5,
+                  }}
+                />
+                <Text style={{ color: lesson.color, fontSize: 14 }}>
+                  {lesson.progress}% complete
+                </Text>
+              </View>
+            </View>
+
+            {/* Progress Bar */}
+            <View>
+              <View
+                style={{
+                  height: 16,
+                  backgroundColor: 'white',
+                  borderRadius: 999,
+                  overflow: 'hidden',
+                  marginBottom: 16,
+                }}
+              >
+                <View
+                  style={{
+                    height: '100%',
+                    width: `${lesson.progress}%`,
+                    backgroundColor: 'black',
+                    borderRadius: 999,
+                  }}
+                />
+              </View>
+
+              <Text
+                style={{
+                  color: lesson.color,
+                  fontSize: 14,
+                  textAlign: 'center',
+                  opacity: 0.8,
+                }}
+              >
+                Lesson {index + 1} of {totalSlides}
+              </Text>
+            </View>
+          </CarouselItem>
+        ))}
+      </Carousel>
+
+      {/* Reset Button */}
+      <Button size='sm' variant='ghost' icon={RotateCcw} onPress={handleReset}>
+        Reset to Start
+      </Button>
+    </View>
+  );
+}

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

@@ -0,0 +1,120 @@
+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 { Minus, TrendingDown, TrendingUp } from 'lucide-react-native';
+import React from 'react';
+
+export function CarouselNoIndicators() {
+  const textColor = useColor('text');
+
+  const stats = [
+    {
+      title: 'Revenue',
+      value: '$24,500',
+      change: '+12.5%',
+      trend: 'up',
+      color: '#10b981',
+    },
+    {
+      title: 'Users',
+      value: '8,432',
+      change: '+5.2%',
+      trend: 'up',
+      color: '#3b82f6',
+    },
+    {
+      title: 'Orders',
+      value: '1,248',
+      change: '-2.1%',
+      trend: 'down',
+      color: '#ef4444',
+    },
+    {
+      title: 'Conversion',
+      value: '3.8%',
+      change: '0.0%',
+      trend: 'neutral',
+      color: '#6b7280',
+    },
+  ];
+
+  const getTrendIcon = (trend: string) => {
+    switch (trend) {
+      case 'up':
+        return TrendingUp;
+      case 'down':
+        return TrendingDown;
+      default:
+        return Minus;
+    }
+  };
+
+  return (
+    <Carousel showArrows showIndicators={false} loop>
+      {stats.map((stat, index) => {
+        const TrendIcon = getTrendIcon(stat.trend);
+        return (
+          <CarouselItem key={index}>
+            <View
+              style={{
+                alignItems: 'center',
+                justifyContent: 'center',
+                minHeight: 180,
+                padding: 24,
+              }}
+            >
+              <Text
+                style={{
+                  color: textColor,
+                  opacity: 0.7,
+                  fontSize: 14,
+                  marginBottom: 8,
+                  textTransform: 'uppercase',
+                  letterSpacing: 1,
+                }}
+              >
+                {stat.title}
+              </Text>
+
+              <Text
+                variant='title'
+                style={{
+                  color: textColor,
+                  fontSize: 32,
+                  fontWeight: 'bold',
+                  marginBottom: 12,
+                }}
+              >
+                {stat.value}
+              </Text>
+
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  gap: 4,
+                  backgroundColor: `${stat.color}15`,
+                  paddingHorizontal: 12,
+                  paddingVertical: 6,
+                  borderRadius: 20,
+                }}
+              >
+                <TrendIcon size={16} color={stat.color} />
+                <Text
+                  style={{
+                    color: stat.color,
+                    fontSize: 14,
+                    fontWeight: '600',
+                  }}
+                >
+                  {stat.change}
+                </Text>
+              </View>
+            </View>
+          </CarouselItem>
+        );
+      })}
+    </Carousel>
+  );
+}

package/dist/templates/demo/charts/area-chart/area-chart-demo.tsx

@@ -0,0 +1,33 @@
+import { AreaChart } from '@/components/charts/area-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import React from 'react';
+
+const sampleData = [
+  { x: 'Jan', y: 100, label: 'January' },
+  { x: 'Feb', y: 120, label: 'February' },
+  { x: 'Mar', y: 90, label: 'March' },
+  { x: 'Apr', y: 140, label: 'April' },
+  { x: 'May', y: 110, label: 'May' },
+  { x: 'Jun', y: 130, label: 'June' },
+];
+
+export function AreaChartDemo() {
+  return (
+    <ChartContainer
+      title='Website Traffic'
+      description='Daily visitors with gradient fill'
+    >
+      <AreaChart
+        data={sampleData}
+        config={{
+          height: 200,
+          showGrid: true,
+          showLabels: false,
+          animated: true,
+          duration: 1800,
+          gradient: true,
+        }}
+      />
+    </ChartContainer>
+  );
+}

package/dist/templates/demo/charts/area-chart/area-chart-interactive.tsx

@@ -0,0 +1,36 @@
+import { AreaChart } from '@/components/charts/area-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import React from 'react';
+
+const sampleData = [
+  { x: 'Jan', y: 4000, label: 'January' },
+  { x: 'Feb', y: 3000, label: 'February' },
+  { x: 'Mar', y: 5000, label: 'March' },
+  { x: 'Apr', y: 4500, label: 'April' },
+  { x: 'May', y: 6000, label: 'May' },
+  { x: 'Jun', y: 7200, label: 'June' },
+  { x: 'Jul', y: 6800, label: 'July' },
+];
+
+export function AreaChartInteractive() {
+  return (
+    <ChartContainer
+      title='Interactive User Engagement'
+      description='Touch to explore monthly user activity'
+    >
+      <AreaChart
+        data={sampleData}
+        config={{
+          height: 250,
+          showGrid: true,
+          showLabels: true,
+          animated: true,
+          duration: 1500,
+          interactive: true,
+          showYLabels: true,
+          yLabelCount: 5,
+        }}
+      />
+    </ChartContainer>
+  );
+}

package/dist/templates/demo/charts/area-chart/area-chart-large.tsx

@@ -0,0 +1,41 @@
+import { AreaChart } from '@/components/charts/area-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import React from 'react';
+
+const sampleData = [
+  { x: 'Jan', y: 65000, label: 'January' },
+  { x: 'Feb', y: 80000, label: 'February' },
+  { x: 'Mar', y: 75000, label: 'March' },
+  { x: 'Apr', y: 95000, label: 'April' },
+  { x: 'May', y: 110000, label: 'May' },
+  { x: 'Jun', y: 125000, label: 'June' },
+  { x: 'Jul', y: 140000, label: 'July' },
+  { x: 'Aug', y: 135000, label: 'August' },
+  { x: 'Sep', y: 150000, label: 'September' },
+  { x: 'Oct', y: 165000, label: 'October' },
+  { x: 'Nov', y: 180000, label: 'November' },
+  { x: 'Dec', y: 195000, label: 'December' },
+];
+
+export function AreaChartLarge() {
+  return (
+    <ChartContainer
+      title='Annual Revenue Growth'
+      description='Comprehensive yearly performance data'
+    >
+      <AreaChart
+        data={sampleData}
+        config={{
+          height: 280,
+          showGrid: true,
+          showLabels: false,
+          animated: true,
+          duration: 2500,
+          showYLabels: true,
+          yLabelCount: 7,
+          padding: 20,
+        }}
+      />
+    </ChartContainer>
+  );
+}

package/dist/templates/demo/charts/area-chart/area-chart-styled.tsx

@@ -0,0 +1,51 @@
+import { AreaChart } from '@/components/charts/area-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import { useColor } from '@/hooks/useColor';
+import React from 'react';
+
+const sampleData = [
+  { x: 'Week 1', y: 850, label: 'Week 1' },
+  { x: 'Week 2', y: 1200, label: 'Week 2' },
+  { x: 'Week 3', y: 980, label: 'Week 3' },
+  { x: 'Week 4', y: 1450, label: 'Week 4' },
+  { x: 'Week 5', y: 1100, label: 'Week 5' },
+  { x: 'Week 6', y: 1650, label: 'Week 6' },
+];
+
+export function AreaChartStyled() {
+  const borderColor = useColor('border');
+  const backgroundColor = useColor('card');
+
+  return (
+    <ChartContainer
+      title='Weekly Sales Volume'
+      description='Styled area chart with custom appearance'
+      style={{
+        borderWidth: 1,
+        borderColor: borderColor,
+        backgroundColor: backgroundColor,
+        borderRadius: 16,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.15,
+        shadowRadius: 12,
+        elevation: 6,
+        margin: 8,
+      }}
+    >
+      <AreaChart
+        data={sampleData}
+        config={{
+          height: 220,
+          showGrid: true,
+          showLabels: true,
+          animated: true,
+          duration: 1800,
+          showYLabels: true,
+          yLabelCount: 6,
+          padding: 24,
+        }}
+      />
+    </ChartContainer>
+  );
+}

package/dist/templates/demo/charts/bar-chart/bar-chart-demo.tsx

@@ -0,0 +1,31 @@
+import { ChartContainer } from '@/components/charts/chart-container';
+import { BarChart } from '@/components/charts/bar-chart';
+import React from 'react';
+
+const sampleData = [
+  { label: 'Jan', value: 65, color: '#3b82f6' },
+  { label: 'Feb', value: 78, color: '#ef4444' },
+  { label: 'Mar', value: 52, color: '#10b981' },
+  { label: 'Apr', value: 91, color: '#f59e0b' },
+  { label: 'May', value: 73, color: '#8b5cf6' },
+  { label: 'Jun', value: 85, color: '#06b6d4' },
+];
+
+export function BarChartDemo() {
+  return (
+    <ChartContainer
+      title='Monthly Sales'
+      description='Product sales performance by month'
+    >
+      <BarChart
+        data={sampleData}
+        config={{
+          height: 220,
+          showLabels: true,
+          animated: true,
+          duration: 1000,
+        }}
+      />
+    </ChartContainer>
+  );
+}

package/dist/templates/demo/charts/bar-chart/bar-chart-minimal.tsx

@@ -0,0 +1,26 @@
+import { BarChart } from '@/components/charts/bar-chart';
+import React from 'react';
+
+const sampleData = [
+  { label: 'A', value: 30 },
+  { label: 'B', value: 50 },
+  { label: 'C', value: 25 },
+  { label: 'D', value: 70 },
+  { label: 'E', value: 45 },
+  { label: 'F', value: 60 },
+];
+
+export function BarChartMinimal() {
+  return (
+    <BarChart
+      data={sampleData}
+      config={{
+        height: 150,
+        showLabels: false,
+        animated: true,
+        duration: 600,
+        padding: 10,
+      }}
+    />
+  );
+}

package/dist/templates/demo/charts/bar-chart/bar-chart-sample.tsx

@@ -0,0 +1,30 @@
+import { ChartContainer } from '@/components/charts/chart-container';
+import { BarChart } from '@/components/charts/bar-chart';
+import React from 'react';
+
+const sampleData = [
+  { label: 'Product A', value: 120, color: '#3b82f6' },
+  { label: 'Product B', value: 98, color: '#ef4444' },
+  { label: 'Product C', value: 86, color: '#10b981' },
+  { label: 'Product D', value: 74, color: '#f59e0b' },
+  { label: 'Product E', value: 65, color: '#8b5cf6' },
+];
+
+export function BarChartSample() {
+  return (
+    <ChartContainer
+      title='Product Performance'
+      description='Sales performance by product category'
+    >
+      <BarChart
+        data={sampleData}
+        config={{
+          height: 250,
+          showLabels: true,
+          animated: true,
+          duration: 1200,
+        }}
+      />
+    </ChartContainer>
+  );
+}

package/dist/templates/demo/charts/bubble-chart/bubble-chart-demo.tsx

@@ -0,0 +1,34 @@
+import { ChartContainer } from '@/components/charts/chart-container';
+import { BubbleChart } from '@/components/charts/bubble-chart';
+import React from 'react';
+
+const sampleData = [
+  { x: 10, y: 20, size: 15, label: 'A' },
+  { x: 25, y: 30, size: 25, label: 'B' },
+  { x: 40, y: 15, size: 30, label: 'C' },
+  { x: 35, y: 45, size: 20, label: 'D' },
+  { x: 60, y: 25, size: 18, label: 'E' },
+  { x: 50, y: 40, size: 22, label: 'F' },
+  { x: 15, y: 35, size: 28, label: 'G' },
+  { x: 70, y: 50, size: 16, label: 'H' },
+];
+
+export function BubbleChartDemo() {
+  return (
+    <ChartContainer
+      title='Performance vs Efficiency'
+      description='Team performance metrics with bubble sizes representing team size'
+    >
+      <BubbleChart
+        data={sampleData}
+        config={{
+          height: 300,
+          showGrid: true,
+          showLabels: true,
+          animated: true,
+          duration: 1200,
+        }}
+      />
+    </ChartContainer>
+  );
+}

package/dist/templates/demo/charts/bubble-chart/bubble-chart-minimal.tsx

@@ -0,0 +1,26 @@
+import { BubbleChart } from '@/components/charts/bubble-chart';
+import React from 'react';
+
+const minimalData = [
+  { x: 20, y: 30, size: 25 },
+  { x: 40, y: 45, size: 35 },
+  { x: 60, y: 25, size: 20 },
+  { x: 35, y: 55, size: 30 },
+  { x: 70, y: 40, size: 15 },
+];
+
+export function BubbleChartMinimal() {
+  return (
+    <BubbleChart
+      data={minimalData}
+      config={{
+        height: 200,
+        showGrid: false,
+        showLabels: false,
+        animated: true,
+        duration: 1000,
+        padding: 10,
+      }}
+    />
+  );
+}

package/dist/templates/demo/charts/bubble-chart/bubble-chart-sample.tsx

@@ -0,0 +1,32 @@
+import { ChartContainer } from '@/components/charts/chart-container';
+import { BubbleChart } from '@/components/charts/bubble-chart';
+import React from 'react';
+
+const sampleData = [
+  { x: 20, y: 30, size: 45, label: 'Sales', color: '#FF6B6B' },
+  { x: 35, y: 25, size: 35, label: 'Marketing', color: '#4ECDC4' },
+  { x: 50, y: 40, size: 25, label: 'Dev', color: '#45B7D1' },
+  { x: 65, y: 35, size: 30, label: 'Support', color: '#96CEB4' },
+  { x: 40, y: 50, size: 20, label: 'HR', color: '#FFEAA7' },
+  { x: 25, y: 45, size: 15, label: 'Finance', color: '#DDA0DD' },
+];
+
+export function BubbleChartSample() {
+  return (
+    <ChartContainer
+      title='Department Analytics'
+      description='Bubble chart showing department metrics'
+    >
+      <BubbleChart
+        data={sampleData}
+        config={{
+          height: 320,
+          showGrid: true,
+          showLabels: true,
+          animated: true,
+          duration: 1500,
+        }}
+      />
+    </ChartContainer>
+  );
+}