kynjal-cli 2.0.6

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

@@ -0,0 +1,35 @@
+import { StackedBarChart } from '@/components/charts/stacked-bar-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import React from 'react';
+
+const sampleData = [
+  { label: 'Product A', values: [45, 30, 25] },
+  { label: 'Product B', values: [60, 40, 35] },
+  { label: 'Product C', values: [55, 35, 30] },
+  { label: 'Product D', values: [70, 45, 40] },
+  { label: 'Product E', values: [50, 32, 28] },
+];
+
+const categories = ['Direct Sales', 'Online', 'Retail'];
+
+export function StackedBarChartHorizontal() {
+  return (
+    <ChartContainer
+      title='Product Sales by Channel'
+      description='Sales distribution across different channels'
+    >
+      <StackedBarChart
+        data={sampleData}
+        categories={categories}
+        horizontal={true}
+        config={{
+          height: 350,
+          showLabels: true,
+          showGrid: true,
+          animated: true,
+          duration: 1200,
+        }}
+      />
+    </ChartContainer>
+  );
+}

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

@@ -0,0 +1,42 @@
+import { StackedBarChart } from '@/components/charts/stacked-bar-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import React from 'react';
+
+const sampleData = [
+  { label: 'Jan', values: [220, 180, 140, 100, 80] },
+  { label: 'Feb', values: [240, 190, 150, 110, 85] },
+  { label: 'Mar', values: [260, 200, 160, 120, 90] },
+  { label: 'Apr', values: [280, 210, 170, 130, 95] },
+  { label: 'May', values: [300, 220, 180, 140, 100] },
+  { label: 'Jun', values: [320, 230, 190, 150, 105] },
+  { label: 'Jul', values: [340, 240, 200, 160, 110] },
+  { label: 'Aug', values: [360, 250, 210, 170, 115] },
+  { label: 'Sep', values: [380, 260, 220, 180, 120] },
+  { label: 'Oct', values: [400, 270, 230, 190, 125] },
+  { label: 'Nov', values: [420, 280, 240, 200, 130] },
+  { label: 'Dec', values: [440, 290, 250, 210, 135] },
+];
+
+const categories = ['Enterprise', 'Professional', 'Standard', 'Basic', 'Free'];
+
+export function StackedBarChartLarge() {
+  return (
+    <ChartContainer
+      title='Annual Subscription Revenue'
+      description='Monthly recurring revenue breakdown by subscription tier'
+    >
+      <StackedBarChart
+        data={sampleData}
+        categories={categories}
+        config={{
+          height: 400,
+          showLabels: true,
+          showGrid: true,
+          animated: true,
+          duration: 2000,
+          padding: 25,
+        }}
+      />
+    </ChartContainer>
+  );
+}

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

@@ -0,0 +1,43 @@
+import { StackedBarChart } from '@/components/charts/stacked-bar-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import React from 'react';
+
+const sampleData = [
+  { label: 'Mobile', values: [85, 45, 30, 20] },
+  { label: 'Desktop', values: [120, 80, 50, 35] },
+  { label: 'Tablet', values: [65, 35, 25, 15] },
+  { label: 'Smart TV', values: [40, 20, 15, 10] },
+];
+
+const categories = ['Chrome', 'Safari', 'Firefox', 'Edge'];
+
+// Custom colors for different browsers
+const customColors = [
+  '#4285F4', // Chrome blue
+  '#FF9500', // Safari orange
+  '#FF6611', // Firefox orange
+  '#0078D4', // Edge blue
+];
+
+export function StackedBarChartStyled() {
+  return (
+    <ChartContainer
+      title='Browser Usage by Device'
+      description='Browser market share across different device types'
+    >
+      <StackedBarChart
+        data={sampleData}
+        categories={categories}
+        colors={customColors}
+        config={{
+          height: 320,
+          showLabels: true,
+          showGrid: true,
+          animated: true,
+          duration: 1500,
+          padding: 30,
+        }}
+      />
+    </ChartContainer>
+  );
+}

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

@@ -0,0 +1,31 @@
+import { TreeMapChart } from '@/components/charts/treemap-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 TreeMapChartDemo() {
+  return (
+    <ChartContainer
+      title='Department Performance'
+      description='Quarterly performance metrics by department'
+    >
+      <TreeMapChart
+        data={sampleData}
+        config={{
+          height: 300,
+          showLabels: true,
+          animated: true,
+          duration: 1000,
+        }}
+      />
+    </ChartContainer>
+  );
+}

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

@@ -0,0 +1,41 @@
+import { TreeMapChart } from '@/components/charts/treemap-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import React from 'react';
+
+const largeData = [
+  { label: 'North America', value: 1250 },
+  { label: 'Europe', value: 980 },
+  { label: 'Asia Pacific', value: 1450 },
+  { label: 'South America', value: 320 },
+  { label: 'Africa', value: 180 },
+  { label: 'Middle East', value: 240 },
+  { label: 'Oceania', value: 95 },
+  { label: 'Central Asia', value: 150 },
+  { label: 'Caribbean', value: 85 },
+  { label: 'Eastern Europe', value: 420 },
+  { label: 'Nordic', value: 280 },
+  { label: 'Southeast Asia', value: 650 },
+  { label: 'East Africa', value: 120 },
+  { label: 'West Africa', value: 200 },
+  { label: 'Central America', value: 110 },
+];
+
+export function TreeMapChartLarge() {
+  return (
+    <ChartContainer
+      title='Global Revenue Distribution'
+      description='Revenue breakdown across global regions'
+    >
+      <TreeMapChart
+        data={largeData}
+        config={{
+          height: 400,
+          padding: 12,
+          showLabels: true,
+          animated: true,
+          duration: 1500,
+        }}
+      />
+    </ChartContainer>
+  );
+}

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

@@ -0,0 +1,33 @@
+import { TreeMapChart } from '@/components/charts/treemap-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import React from 'react';
+
+const sampleData = [
+  { label: 'Product A', value: 250 },
+  { label: 'Product B', value: 180 },
+  { label: 'Product C', value: 320 },
+  { label: 'Product D', value: 90 },
+  { label: 'Product E', value: 150 },
+  { label: 'Product F', value: 45 },
+  { label: 'Product G', value: 210 },
+  { label: 'Product H', value: 75 },
+];
+
+export function TreeMapChartSample() {
+  return (
+    <ChartContainer
+      title='Product Sales Distribution'
+      description='Revenue breakdown by product category'
+    >
+      <TreeMapChart
+        data={sampleData}
+        config={{
+          height: 250,
+          showLabels: true,
+          animated: true,
+          duration: 800,
+        }}
+      />
+    </ChartContainer>
+  );
+}

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

@@ -0,0 +1,32 @@
+import { TreeMapChart } from '@/components/charts/treemap-chart';
+import { ChartContainer } from '@/components/charts/chart-container';
+import React from 'react';
+
+const styledData = [
+  { label: 'Mobile', value: 450, color: '#FF6B6B' },
+  { label: 'Desktop', value: 320, color: '#4ECDC4' },
+  { label: 'Tablet', value: 180, color: '#45B7D1' },
+  { label: 'Watch', value: 90, color: '#FFA07A' },
+  { label: 'TV', value: 150, color: '#98D8C8' },
+  { label: 'Other', value: 60, color: '#F7DC6F' },
+];
+
+export function TreeMapChartStyled() {
+  return (
+    <ChartContainer
+      title='Device Usage Analytics'
+      description='User engagement across different device types'
+    >
+      <TreeMapChart
+        data={styledData}
+        config={{
+          height: 350,
+          padding: 15,
+          showLabels: true,
+          animated: true,
+          duration: 1200,
+        }}
+      />
+    </ChartContainer>
+  );
+}

package/dist/templates/demo/checkbox/checkbox-custom-styling.tsx

@@ -0,0 +1,34 @@
+import { Checkbox } from '@/components/ui/checkbox';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function CheckboxCustomStyling() {
+  const [checked1, setChecked1] = useState(false);
+  const [checked2, setChecked2] = useState(true);
+
+  return (
+    <View style={{ gap: 16 }}>
+      <Checkbox
+        checked={checked1}
+        onCheckedChange={setChecked1}
+        label='Custom styled checkbox'
+        labelStyle={{
+          fontSize: 18,
+          fontWeight: '600',
+          color: '#6366f1',
+        }}
+      />
+
+      <Checkbox
+        checked={checked2}
+        onCheckedChange={setChecked2}
+        label='Another custom style'
+        labelStyle={{
+          fontSize: 16,
+          fontStyle: 'italic',
+          color: '#10b981',
+        }}
+      />
+    </View>
+  );
+}

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

@@ -0,0 +1,14 @@
+import { Checkbox } from '@/components/ui/checkbox';
+import React, { useState } from 'react';
+
+export function CheckboxDemo() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <Checkbox
+      checked={checked}
+      onCheckedChange={setChecked}
+      label='Accept terms and conditions'
+    />
+  );
+}

package/dist/templates/demo/checkbox/checkbox-group.tsx

@@ -0,0 +1,44 @@
+import { Checkbox } from '@/components/ui/checkbox';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function CheckboxGroup() {
+  const [selectedItems, setSelectedItems] = useState<string[]>([]);
+
+  const items = [
+    { id: 'notifications', label: 'Email notifications' },
+    { id: 'marketing', label: 'Marketing emails' },
+    { id: 'updates', label: 'Product updates' },
+    { id: 'newsletter', label: 'Weekly newsletter' },
+  ];
+
+  const handleItemChange = (itemId: string, checked: boolean) => {
+    if (checked) {
+      setSelectedItems((prev) => [...prev, itemId]);
+    } else {
+      setSelectedItems((prev) => prev.filter((id) => id !== itemId));
+    }
+  };
+
+  return (
+    <View style={{ gap: 16 }}>
+      <Text variant='subtitle'>Subscription Preferences</Text>
+
+      <View style={{ gap: 12 }}>
+        {items.map((item) => (
+          <Checkbox
+            key={item.id}
+            checked={selectedItems.includes(item.id)}
+            onCheckedChange={(checked) => handleItemChange(item.id, checked)}
+            label={item.label}
+          />
+        ))}
+      </View>
+
+      <Text variant='caption' style={{ marginTop: 8 }}>
+        Selected: {selectedItems.length} item(s)
+      </Text>
+    </View>
+  );
+}

package/dist/templates/demo/checkbox/checkbox-states.tsx

@@ -0,0 +1,37 @@
+import { Checkbox } from '@/components/ui/checkbox';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function CheckboxStates() {
+  const [checked1, setChecked1] = useState(false);
+  const [checked2, setChecked2] = useState(true);
+  const [checked3, setChecked3] = useState(false);
+
+  return (
+    <View style={{ gap: 16 }}>
+      <Text variant='subtitle' style={{ marginBottom: 8 }}>
+        Different States
+      </Text>
+
+      <Checkbox
+        checked={checked1}
+        onCheckedChange={setChecked1}
+        label='Unchecked'
+      />
+
+      <Checkbox
+        checked={checked2}
+        onCheckedChange={setChecked2}
+        label='Checked'
+      />
+
+      <Checkbox
+        checked={checked3}
+        onCheckedChange={setChecked3}
+        label='Disabled'
+        disabled
+      />
+    </View>
+  );
+}

package/dist/templates/demo/checkbox/checkbox-with-error.tsx

@@ -0,0 +1,24 @@
+import { Checkbox } from '@/components/ui/checkbox';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function CheckboxWithError() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <View style={{ gap: 8 }}>
+      <Checkbox
+        checked={checked}
+        onCheckedChange={setChecked}
+        label='I agree to the terms'
+        error='You must accept the terms to continue'
+      />
+      {!checked && (
+        <Text variant='caption' style={{ color: 'red', marginLeft: 28 }}>
+          You must accept the terms to continue
+        </Text>
+      )}
+    </View>
+  );
+}

package/dist/templates/demo/checkbox/checkbox-without-label.tsx

@@ -0,0 +1,8 @@
+import { Checkbox } from '@/components/ui/checkbox';
+import React, { useState } from 'react';
+
+export function CheckboxWithoutLabel() {
+  const [checked, setChecked] = useState(false);
+
+  return <Checkbox checked={checked} onCheckedChange={setChecked} />;
+}

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

@@ -0,0 +1,16 @@
+import { Collapsible } from '@/components/ui/collapsible';
+import { Text } from '@/components/ui/text';
+import React from 'react';
+
+export function CollapsibleDemo() {
+  return (
+    <Collapsible title='What is React Native?'>
+      <Text variant='body'>
+        React Native is an open-source UI software framework created by Meta. It
+        is used to develop applications for Android, iOS, macOS, tvOS, Web,
+        Windows and UWP by enabling developers to use React's framework along
+        with native platform capabilities.
+      </Text>
+    </Collapsible>
+  );
+}

package/dist/templates/demo/collapsible/collapsible-faq.tsx

@@ -0,0 +1,45 @@
+import { Collapsible } from '@/components/ui/collapsible';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function CollapsibleFAQ() {
+  const faqs = [
+    {
+      question: 'How do I reset my password?',
+      answer:
+        "You can reset your password by clicking on the 'Forgot Password' link on the login page. Enter your email address and we'll send you instructions to reset your password.",
+    },
+    {
+      question: 'Can I cancel my subscription anytime?',
+      answer:
+        'Yes, you can cancel your subscription at any time from your account settings. Your subscription will remain active until the end of your current billing period.',
+    },
+    {
+      question: 'Is my data secure?',
+      answer:
+        'We take data security seriously. All data is encrypted in transit and at rest. We follow industry best practices and comply with relevant data protection regulations.',
+    },
+    {
+      question: 'How do I contact support?',
+      answer:
+        'You can reach our support team through the in-app chat, email us at support@example.com, or call our toll-free number during business hours.',
+    },
+  ];
+
+  return (
+    <View style={{ gap: 16 }}>
+      <Text variant='subtitle' style={{ marginBottom: 8 }}>
+        Frequently Asked Questions
+      </Text>
+
+      <View style={{ gap: 12 }}>
+        {faqs.map((faq, index) => (
+          <Collapsible key={index} title={faq.question}>
+            <Text variant='body'>{faq.answer}</Text>
+          </Collapsible>
+        ))}
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/collapsible/collapsible-multiple.tsx

@@ -0,0 +1,34 @@
+import { Collapsible } from '@/components/ui/collapsible';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function CollapsibleMultiple() {
+  return (
+    <View style={{ gap: 16 }}>
+      <Collapsible title='Getting Started'>
+        <Text variant='body'>
+          To get started with React Native, you'll need to set up your
+          development environment. This includes installing Node.js, React
+          Native CLI, and either Android Studio or Xcode.
+        </Text>
+      </Collapsible>
+
+      <Collapsible title='Components'>
+        <Text variant='body'>
+          React Native provides many built-in components like View, Text,
+          ScrollView, TextInput, and more. You can also create custom components
+          to build your app's interface.
+        </Text>
+      </Collapsible>
+
+      <Collapsible title='Navigation'>
+        <Text variant='body'>
+          For navigation between screens, React Navigation is the most popular
+          solution. It provides stack, tab, and drawer navigation patterns that
+          work seamlessly with React Native.
+        </Text>
+      </Collapsible>
+    </View>
+  );
+}

package/dist/templates/demo/collapsible/collapsible-nested.tsx

@@ -0,0 +1,39 @@
+import { Collapsible } from '@/components/ui/collapsible';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function CollapsibleNested() {
+  return (
+    <Collapsible title='Mobile Development'>
+      <Text variant='body' style={{ marginBottom: 16 }}>
+        Mobile development encompasses various platforms and technologies:
+      </Text>
+
+      <View style={{ gap: 12 }}>
+        <Collapsible title='iOS Development'>
+          <Text variant='body'>
+            iOS development primarily uses Swift or Objective-C with Xcode as
+            the main development environment. Apps are distributed through the
+            Apple App Store.
+          </Text>
+        </Collapsible>
+
+        <Collapsible title='Android Development'>
+          <Text variant='body'>
+            Android development can be done with Java, Kotlin, or cross-platform
+            frameworks. Android Studio is the official IDE, and apps are
+            distributed through Google Play Store.
+          </Text>
+        </Collapsible>
+
+        <Collapsible title='Cross-Platform'>
+          <Text variant='body'>
+            Cross-platform frameworks like React Native, Flutter, and Xamarin
+            allow you to write code once and deploy to multiple platforms.
+          </Text>
+        </Collapsible>
+      </View>
+    </Collapsible>
+  );
+}

package/dist/templates/demo/collapsible/collapsible-with-content.tsx

@@ -0,0 +1,53 @@
+import { Checkbox } from '@/components/ui/checkbox';
+import { Collapsible } from '@/components/ui/collapsible';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function CollapsibleWithContent() {
+  const [preferences, setPreferences] = useState({
+    darkMode: false,
+    notifications: true,
+    analytics: false,
+  });
+
+  return (
+    <View style={{ gap: 16 }}>
+      <Collapsible title='App Settings'>
+        <View style={{ gap: 12 }}>
+          <Checkbox
+            checked={preferences.darkMode}
+            onCheckedChange={(checked) =>
+              setPreferences((prev) => ({ ...prev, darkMode: checked }))
+            }
+            label='Enable dark mode'
+          />
+
+          <Checkbox
+            checked={preferences.notifications}
+            onCheckedChange={(checked) =>
+              setPreferences((prev) => ({ ...prev, notifications: checked }))
+            }
+            label='Push notifications'
+          />
+
+          <Checkbox
+            checked={preferences.analytics}
+            onCheckedChange={(checked) =>
+              setPreferences((prev) => ({ ...prev, analytics: checked }))
+            }
+            label='Analytics tracking'
+          />
+        </View>
+      </Collapsible>
+
+      <Collapsible title='Account Information'>
+        <View style={{ gap: 8 }}>
+          <Text variant='body'>Email: user@example.com</Text>
+          <Text variant='body'>Member since: January 2024</Text>
+          <Text variant='body'>Subscription: Premium</Text>
+        </View>
+      </Collapsible>
+    </View>
+  );
+}

package/dist/templates/demo/color-picker/color-picker-colors.tsx

@@ -0,0 +1,36 @@
+import { ColorPicker } from '@/components/ui/color-picker';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function ColorPickerColors() {
+  const [redColor, setRedColor] = useState('#e74c3c');
+  const [greenColor, setGreenColor] = useState('#2ecc71');
+  const [blueColor, setBlueColor] = useState('#3498db');
+  const [purpleColor, setPurpleColor] = useState('#9b59b6');
+  const [orangeColor, setOrangeColor] = useState('#f39c12');
+
+  const colorData = [
+    { name: 'Red', color: redColor, setter: setRedColor },
+    { name: 'Green', color: greenColor, setter: setGreenColor },
+    { name: 'Blue', color: blueColor, setter: setBlueColor },
+    { name: 'Purple', color: purpleColor, setter: setPurpleColor },
+    { name: 'Orange', color: orangeColor, setter: setOrangeColor },
+  ];
+
+  return (
+    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 16 }}>
+      {colorData.map(({ name, color, setter }) => (
+        <View key={name} style={{ alignItems: 'center', gap: 8 }}>
+          <ColorPicker
+            value={color}
+            onColorChange={setter}
+            onColorSelect={setter}
+            swatchSize={40}
+          />
+          <Text variant='caption'>{name}</Text>
+        </View>
+      ))}
+    </View>
+  );
+}