kynjal-cli 2.0.6

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

@@ -0,0 +1,66 @@
+import { HeatmapChart } from '@/components/charts/heatmap-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import React from 'react';
+
+// Generate large dataset
+const generateLargeDataset = () => {
+  const data = [];
+  const months = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+  ];
+  const hours = Array.from({ length: 24 }, (_, i) =>
+    i.toString().padStart(2, '0')
+  );
+
+  for (const month of months) {
+    for (const hour of hours) {
+      // Generate realistic activity data (higher during work hours)
+      const isWorkHour = parseInt(hour) >= 8 && parseInt(hour) <= 18;
+      const baseValue = isWorkHour ? 40 : 10;
+      const randomVariation = Math.random() * 30;
+      const value = Math.round(baseValue + randomVariation);
+
+      data.push({
+        row: month,
+        col: `${hour}:00`,
+        value,
+      });
+    }
+  }
+
+  return data;
+};
+
+const largeDataset = generateLargeDataset();
+
+export function HeatmapChartLarge() {
+  return (
+    <ChartContainer
+      title='Annual Activity Heatmap'
+      description='User activity patterns throughout the year by hour of day'
+    >
+      <HeatmapChart
+        data={largeDataset}
+        config={{
+          height: 400,
+          showLabels: false, // Disabled for large datasets
+          animated: true,
+          duration: 1500,
+          colorScale: ['#ecfdf5', '#10b981', '#065f46'],
+          padding: 40,
+        }}
+      />
+    </ChartContainer>
+  );
+}

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

@@ -0,0 +1,42 @@
+import { HeatmapChart } from '@/components/charts/heatmap-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import React from 'react';
+
+const sampleData = [
+  { row: 'Q1', col: 'Sales', value: 85 },
+  { row: 'Q1', col: 'Marketing', value: 72 },
+  { row: 'Q1', col: 'Support', value: 90 },
+  { row: 'Q1', col: 'Development', value: 78 },
+  { row: 'Q2', col: 'Sales', value: 92 },
+  { row: 'Q2', col: 'Marketing', value: 65 },
+  { row: 'Q2', col: 'Support', value: 88 },
+  { row: 'Q2', col: 'Development', value: 95 },
+  { row: 'Q3', col: 'Sales', value: 78 },
+  { row: 'Q3', col: 'Marketing', value: 83 },
+  { row: 'Q3', col: 'Support', value: 91 },
+  { row: 'Q3', col: 'Development', value: 87 },
+  { row: 'Q4', col: 'Sales', value: 96 },
+  { row: 'Q4', col: 'Marketing', value: 89 },
+  { row: 'Q4', col: 'Support', value: 94 },
+  { row: 'Q4', col: 'Development', value: 92 },
+];
+
+export function HeatmapChartSample() {
+  return (
+    <ChartContainer
+      title='Quarterly Performance Matrix'
+      description='Performance scores by department and quarter'
+    >
+      <HeatmapChart
+        data={sampleData}
+        config={{
+          height: 280,
+          showLabels: true,
+          animated: true,
+          duration: 800,
+          colorScale: ['#fef3c7', '#f59e0b', '#d97706'],
+        }}
+      />
+    </ChartContainer>
+  );
+}

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

@@ -0,0 +1,43 @@
+import { HeatmapChart } from '@/components/charts/heatmap-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import { useColor } from '@/hooks/useColor';
+import React from 'react';
+
+const sampleData = [
+  { row: 'Low', col: 'Low', value: 10 },
+  { row: 'Low', col: 'Medium', value: 25 },
+  { row: 'Low', col: 'High', value: 40 },
+  { row: 'Medium', col: 'Low', value: 30 },
+  { row: 'Medium', col: 'Medium', value: 55 },
+  { row: 'Medium', col: 'High', value: 70 },
+  { row: 'High', col: 'Low', value: 50 },
+  { row: 'High', col: 'Medium', value: 75 },
+  { row: 'High', col: 'High', value: 95 },
+];
+
+export function HeatmapChartStyled() {
+  const isDark = useColor('background') === '#000000';
+
+  const colorScale = isDark
+    ? ['#0f172a', '#1e293b', '#334155', '#64748b', '#94a3b8']
+    : ['#f8fafc', '#e2e8f0', '#cbd5e1', '#94a3b8', '#64748b'];
+
+  return (
+    <ChartContainer
+      title='Risk Assessment Matrix'
+      description='Risk levels across different probability and impact combinations'
+    >
+      <HeatmapChart
+        data={sampleData}
+        config={{
+          height: 250,
+          showLabels: true,
+          animated: true,
+          duration: 1200,
+          colorScale,
+          padding: 30,
+        }}
+      />
+    </ChartContainer>
+  );
+}

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

@@ -0,0 +1,34 @@
+import { ChartContainer } from '@/components/charts/chart-container';
+import { LineChart } from '@/components/charts/line-chart';
+import React from 'react';
+
+const sampleData = [
+  { x: 1, y: 10, label: 'Jan' },
+  { x: 2, y: 25, label: 'Feb' },
+  { x: 3, y: 15, label: 'Mar' },
+  { x: 4, y: 40, label: 'Apr' },
+  { x: 5, y: 30, label: 'May' },
+  { x: 6, y: 55, label: 'Jun' },
+  { x: 7, y: 45, label: 'Jul' },
+];
+
+export function LineChartDemo() {
+  return (
+    <ChartContainer
+      title='Revenue Trend'
+      description='Monthly revenue growth over time'
+    >
+      <LineChart
+        data={sampleData}
+        config={{
+          height: 220,
+          showGrid: true,
+          showLabels: true,
+          animated: true,
+          duration: 1500,
+          interactive: true,
+        }}
+      />
+    </ChartContainer>
+  );
+}

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

@@ -0,0 +1,35 @@
+import { ChartContainer } from '@/components/charts/chart-container';
+import { LineChart } from '@/components/charts/line-chart';
+import React from 'react';
+
+const sampleData = [
+  { x: 'Q1', y: 45, label: 'Q1 2024' },
+  { x: 'Q2', y: 67, label: 'Q2 2024' },
+  { x: 'Q3', y: 52, label: 'Q3 2024' },
+  { x: 'Q4', y: 89, label: 'Q4 2024' },
+  { x: 'Q1', y: 95, label: 'Q1 2025' },
+  { x: 'Q2', y: 110, label: 'Q2 2025' },
+];
+
+export function LineChartInteractive() {
+  return (
+    <ChartContainer
+      title='Interactive Revenue Chart'
+      description='Touch and drag to explore data points'
+    >
+      <LineChart
+        data={sampleData}
+        config={{
+          height: 240,
+          showGrid: true,
+          showLabels: true,
+          animated: true,
+          duration: 1200,
+          interactive: true,
+          showYLabels: true,
+          yLabelCount: 6,
+        }}
+      />
+    </ChartContainer>
+  );
+}

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

@@ -0,0 +1,28 @@
+import { LineChart } from '@/components/charts/line-chart';
+import React from 'react';
+
+const sampleData = [
+  { x: 1, y: 20 },
+  { x: 2, y: 45 },
+  { x: 3, y: 28 },
+  { x: 4, y: 67 },
+  { x: 5, y: 89 },
+  { x: 6, y: 34 },
+];
+
+export function LineChartMinimal() {
+  return (
+    <LineChart
+      data={sampleData}
+      config={{
+        height: 160,
+        showGrid: false,
+        showLabels: false,
+        animated: true,
+        duration: 800,
+        showYLabels: false,
+        padding: 16,
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,51 @@
+import { ChartContainer } from '@/components/charts/chart-container';
+import { LineChart } from '@/components/charts/line-chart';
+import { useColor } from '@/hooks/useColor';
+import React from 'react';
+
+const sampleData = [
+  { x: 'Mon', y: 23, label: 'Monday' },
+  { x: 'Tue', y: 45, label: 'Tuesday' },
+  { x: 'Wed', y: 67, label: 'Wednesday' },
+  { x: 'Thu', y: 34, label: 'Thursday' },
+  { x: 'Fri', y: 89, label: 'Friday' },
+  { x: 'Sat', y: 56, label: 'Saturday' },
+  { x: 'Sun', y: 78, label: 'Sunday' },
+];
+
+export function LineChartStyled() {
+  const borderColor = useColor('border');
+  const backgroundColor = useColor('card');
+
+  return (
+    <ChartContainer
+      title='Weekly Performance'
+      description='Styled chart with custom appearance'
+      style={{
+        borderWidth: 1,
+        borderColor: borderColor,
+        backgroundColor: backgroundColor,
+        borderRadius: 12,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+        elevation: 4,
+      }}
+    >
+      <LineChart
+        data={sampleData}
+        config={{
+          height: 200,
+          showGrid: true,
+          showLabels: true,
+          animated: true,
+          duration: 2000,
+          showYLabels: true,
+          yLabelCount: 4,
+          padding: 24,
+        }}
+      />
+    </ChartContainer>
+  );
+}

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

@@ -0,0 +1,31 @@
+import { PieChart } from '@/components/charts/pie-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import React from 'react';
+
+const sampleData = [
+  { label: 'Sales', value: 120 },
+  { label: 'Marketing', value: 98 },
+  { label: 'Support', value: 86 },
+  { label: 'Development', value: 140 },
+  { label: 'Design', value: 75 },
+  { label: 'HR', value: 65 },
+];
+
+export function PieChartDemo() {
+  return (
+    <ChartContainer
+      title='Department Performance'
+      description='Quarterly performance metrics by department'
+    >
+      <PieChart
+        data={sampleData}
+        config={{
+          height: 300,
+          showLabels: true,
+          animated: true,
+          duration: 1000,
+        }}
+      />
+    </ChartContainer>
+  );
+}

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

@@ -0,0 +1,31 @@
+import { PieChart } from '@/components/charts/pie-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import React from 'react';
+
+const largeData = [
+  { label: 'North America', value: 35 },
+  { label: 'Europe', value: 28 },
+  { label: 'Asia Pacific', value: 22 },
+  { label: 'Latin America', value: 8 },
+  { label: 'Middle East', value: 4 },
+  { label: 'Africa', value: 3 },
+];
+
+export function PieChartLarge() {
+  return (
+    <ChartContainer
+      title='Global Revenue Distribution'
+      description='Revenue breakdown by geographical regions'
+    >
+      <PieChart
+        data={largeData}
+        config={{
+          height: 350,
+          showLabels: true,
+          animated: true,
+          duration: 1500,
+        }}
+      />
+    </ChartContainer>
+  );
+}

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

@@ -0,0 +1,29 @@
+import { PieChart } from '@/components/charts/pie-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import React from 'react';
+
+const sampleData = [
+  { label: 'Mobile', value: 45 },
+  { label: 'Desktop', value: 35 },
+  { label: 'Tablet', value: 15 },
+  { label: 'Other', value: 5 },
+];
+
+export function PieChartSample() {
+  return (
+    <ChartContainer
+      title='Traffic Sources'
+      description='Website traffic distribution by device type'
+    >
+      <PieChart
+        data={sampleData}
+        config={{
+          height: 250,
+          showLabels: true,
+          animated: true,
+          duration: 800,
+        }}
+      />
+    </ChartContainer>
+  );
+}

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

@@ -0,0 +1,35 @@
+import { PieChart } from '@/components/charts/pie-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import { useColor } from '@/hooks/useColor';
+import React from 'react';
+
+export function PieChartStyled() {
+  const primaryColor = useColor('primary');
+  const successColor = useColor('green');
+  const warningColor = useColor('orange');
+  const errorColor = useColor('red');
+
+  const styledData = [
+    { label: 'Completed', value: 65, color: successColor },
+    { label: 'In Progress', value: 20, color: primaryColor },
+    { label: 'Pending', value: 10, color: warningColor },
+    { label: 'Failed', value: 5, color: errorColor },
+  ];
+
+  return (
+    <ChartContainer
+      title='Project Status'
+      description='Current project completion status overview'
+    >
+      <PieChart
+        data={styledData}
+        config={{
+          height: 280,
+          showLabels: true,
+          animated: true,
+          duration: 1200,
+        }}
+      />
+    </ChartContainer>
+  );
+}

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

@@ -0,0 +1,31 @@
+import { PolarAreaChart } from '@/components/charts/polar-area-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import React from 'react';
+
+const sampleData = [
+  { label: 'Sales', value: 120 },
+  { label: 'Marketing', value: 98 },
+  { label: 'Support', value: 86 },
+  { label: 'Development', value: 140 },
+  { label: 'Design', value: 75 },
+  { label: 'HR', value: 65 },
+];
+
+export function PolarAreaChartDemo() {
+  return (
+    <ChartContainer
+      title='Department Performance'
+      description='Quarterly performance metrics by department'
+    >
+      <PolarAreaChart
+        data={sampleData}
+        config={{
+          height: 300,
+          showLabels: true,
+          animated: true,
+          duration: 1000,
+        }}
+      />
+    </ChartContainer>
+  );
+}

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

@@ -0,0 +1,37 @@
+import { PolarAreaChart } from '@/components/charts/polar-area-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import React from 'react';
+
+const largeDataset = [
+  { label: 'Q1 Sales', value: 185 },
+  { label: 'Q2 Sales', value: 220 },
+  { label: 'Q3 Sales', value: 195 },
+  { label: 'Q4 Sales', value: 240 },
+  { label: 'Marketing', value: 156 },
+  { label: 'Support', value: 134 },
+  { label: 'Development', value: 189 },
+  { label: 'Design', value: 123 },
+  { label: 'HR', value: 98 },
+  { label: 'Finance', value: 145 },
+  { label: 'Operations', value: 167 },
+  { label: 'Research', value: 112 },
+];
+
+export function PolarAreaChartLarge() {
+  return (
+    <ChartContainer
+      title='Annual Performance Overview'
+      description='Comprehensive performance metrics across all departments and quarters'
+    >
+      <PolarAreaChart
+        data={largeDataset}
+        config={{
+          height: 400,
+          showLabels: true,
+          animated: true,
+          duration: 2000,
+        }}
+      />
+    </ChartContainer>
+  );
+}

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

@@ -0,0 +1,44 @@
+import { PolarAreaChart } from '@/components/charts/polar-area-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import { useColor } from '@/hooks/useColor';
+import React from 'react';
+
+const skillsData = [
+  { label: 'JavaScript', value: 95 },
+  { label: 'React', value: 88 },
+  { label: 'TypeScript', value: 82 },
+  { label: 'Node.js', value: 78 },
+  { label: 'Python', value: 65 },
+];
+
+export function PolarAreaChartSample() {
+  const primaryColor = useColor('primary');
+  const blueColor = useColor('blue');
+  const greenColor = useColor('green');
+  const orangeColor = useColor('orange');
+  const purpleColor = useColor('purple');
+
+  const dataWithColors = skillsData.map((item, index) => ({
+    ...item,
+    color: [primaryColor, blueColor, greenColor, orangeColor, purpleColor][
+      index
+    ],
+  }));
+
+  return (
+    <ChartContainer
+      title='Skills Assessment'
+      description='Technical skills proficiency levels'
+    >
+      <PolarAreaChart
+        data={dataWithColors}
+        config={{
+          height: 280,
+          showLabels: true,
+          animated: true,
+          duration: 1200,
+        }}
+      />
+    </ChartContainer>
+  );
+}

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

@@ -0,0 +1,37 @@
+import { PolarAreaChart } from '@/components/charts/polar-area-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import { useColor } from '@/hooks/useColor';
+import React from 'react';
+
+const marketData = [
+  { label: 'Mobile Apps', value: 45, color: '#FF6B6B' },
+  { label: 'Web Apps', value: 38, color: '#4ECDC4' },
+  { label: 'Desktop', value: 25, color: '#45B7D1' },
+  { label: 'IoT', value: 18, color: '#96CEB4' },
+  { label: 'AI/ML', value: 32, color: '#FFEAA7' },
+  { label: 'Blockchain', value: 15, color: '#DDA0DD' },
+];
+
+export function PolarAreaChartStyled() {
+  return (
+    <ChartContainer
+      title='Market Share Analysis'
+      description='Technology sector market distribution'
+    >
+      <PolarAreaChart
+        data={marketData}
+        config={{
+          height: 320,
+          showLabels: true,
+          animated: true,
+          duration: 1500,
+        }}
+        style={{
+          backgroundColor: 'rgba(0, 0, 0, 0.02)',
+          borderRadius: 12,
+          padding: 16,
+        }}
+      />
+    </ChartContainer>
+  );
+}

package/dist/templates/demo/charts/progress-ring-chart/progress-ring-chart-demo.tsx

@@ -0,0 +1,25 @@
+import { ProgressRingChart } from '@/components/charts/progress-ring-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import React from 'react';
+
+export function ProgressRingChartDemo() {
+  return (
+    <ChartContainer
+      title='Goal Progress'
+      description='Track your progress towards your goals'
+    >
+      <ProgressRingChart
+        progress={75}
+        size={120}
+        strokeWidth={8}
+        config={{
+          animated: true,
+          duration: 1000,
+          gradient: false,
+        }}
+        showLabel={true}
+        label='Completion Rate'
+      />
+    </ChartContainer>
+  );
+}

package/dist/templates/demo/charts/progress-ring-chart/progress-ring-chart-large.tsx

@@ -0,0 +1,26 @@
+import { ProgressRingChart } from '@/components/charts/progress-ring-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import React from 'react';
+
+export function ProgressRingChartLarge() {
+  return (
+    <ChartContainer
+      title='Annual Revenue Target'
+      description='Track progress towards annual revenue goals'
+    >
+      <ProgressRingChart
+        progress={87}
+        size={200}
+        strokeWidth={16}
+        config={{
+          animated: true,
+          duration: 2500,
+          gradient: true,
+        }}
+        showLabel={true}
+        label='Revenue Target'
+        centerText='$2.6M'
+      />
+    </ChartContainer>
+  );
+}

package/dist/templates/demo/charts/progress-ring-chart/progress-ring-chart-sample.tsx

@@ -0,0 +1,26 @@
+import { ProgressRingChart } from '@/components/charts/progress-ring-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import React from 'react';
+
+export function ProgressRingChartSample() {
+  return (
+    <ChartContainer
+      title='Daily Steps'
+      description='Track your daily step count'
+    >
+      <ProgressRingChart
+        progress={68}
+        size={140}
+        strokeWidth={10}
+        config={{
+          animated: true,
+          duration: 1500,
+          gradient: false,
+        }}
+        showLabel={true}
+        label='Daily Goal'
+        centerText='6,800'
+      />
+    </ChartContainer>
+  );
+}