kynjal-cli 2.0.6

package/dist/templates/demo/bottom-sheet/bottom-sheet-title.tsx

@@ -0,0 +1,32 @@
+import { BottomSheet, useBottomSheet } from '@/components/ui/bottom-sheet';
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function BottomSheetTitle() {
+  const { isVisible, open, close } = useBottomSheet();
+
+  return (
+    <View>
+      <Button onPress={open}>Open Sheet with Title</Button>
+
+      <BottomSheet
+        isVisible={isVisible}
+        onClose={close}
+        title='Settings'
+        snapPoints={[0.4, 0.7]}
+      >
+        <View style={{ gap: 16 }}>
+          <Text>
+            This bottom sheet includes a title in the header area. The title is
+            centered and uses the theme's title text style.
+          </Text>
+          <Button variant='secondary' onPress={close}>
+            Done
+          </Button>
+        </View>
+      </BottomSheet>
+    </View>
+  );
+}

package/dist/templates/demo/button/button-animation.tsx

@@ -0,0 +1,28 @@
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function ButtonAnimation() {
+  return (
+    <View style={{ gap: 16 }}>
+      <View>
+        <Text style={{ marginBottom: 8, fontSize: 14, color: '#71717a' }}>
+          With Animation (default)
+        </Text>
+        <Button animation={true} onPress={() => {}}>
+          Animated Button
+        </Button>
+      </View>
+
+      <View>
+        <Text style={{ marginBottom: 8, fontSize: 14, color: '#71717a' }}>
+          Without Animation
+        </Text>
+        <Button animation={false} onPress={() => {}}>
+          Static Button
+        </Button>
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/button/button-custom.tsx

@@ -0,0 +1,52 @@
+import { Button } from '@/components/ui/button';
+import { View } from '@/components/ui/view';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Star } from 'lucide-react-native';
+
+export function ButtonCustom() {
+  return (
+    <View style={{ gap: 12, flexDirection: 'row', flexWrap: 'wrap' }}>
+      <Button
+        style={{ backgroundColor: '#8B5CF6', borderRadius: 12 }}
+        textStyle={{ color: 'white', fontWeight: 'bold' }}
+        onPress={() => {}}
+      >
+        Custom Purple
+      </Button>
+      <Button
+        variant='outline'
+        style={{
+          borderColor: '#F59E0B',
+          borderWidth: 2,
+          borderRadius: 20,
+        }}
+        textStyle={{ color: '#F59E0B', fontWeight: '600' }}
+        onPress={() => {}}
+      >
+        Custom Orange
+      </Button>
+
+      <LinearGradient
+        colors={['#FF6B6B', '#4ECDC4']}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 1 }}
+        style={{
+          borderRadius: 12,
+          overflow: 'hidden',
+          flex: 1,
+        }}
+      >
+        <Button
+          icon={Star}
+          style={{
+            backgroundColor: 'transparent',
+          }}
+          textStyle={{ color: 'white', fontWeight: 'bold' }}
+          onPress={() => {}}
+        >
+          Gradient Style
+        </Button>
+      </LinearGradient>
+    </View>
+  );
+}

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

@@ -0,0 +1,8 @@
+import { Button } from '@/components/ui/button';
+import React from 'react';
+
+export function ButtonDemo() {
+  return (
+    <Button onPress={() => console.log('Button pressed!')}>Click me</Button>
+  );
+}

package/dist/templates/demo/button/button-disabled.tsx

@@ -0,0 +1,21 @@
+import { Button } from '@/components/ui/button';
+import { View } from '@/components/ui/view';
+import { Lock } from 'lucide-react-native';
+import React from 'react';
+
+export function ButtonDisabled() {
+  return (
+    <View style={{ gap: 12, flexDirection: 'row', flexWrap: 'wrap' }}>
+      <Button disabled onPress={() => {}}>
+        Disabled
+      </Button>
+      <Button disabled variant='outline' onPress={() => {}}>
+        Disabled Outline
+      </Button>
+      <Button disabled variant='destructive' onPress={() => {}}>
+        Disabled Destructive
+      </Button>
+      <Button disabled size='icon' onPress={() => {}} icon={Lock} />
+    </View>
+  );
+}

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

@@ -0,0 +1,26 @@
+import { Button } from '@/components/ui/button';
+import { View } from '@/components/ui/view';
+import {
+  Heart,
+  MessageCircle,
+  MoreHorizontal,
+  Settings,
+  Share,
+} from 'lucide-react-native';
+import React from 'react';
+
+export function ButtonIconOnly() {
+  return (
+    <View style={{ gap: 12, flexDirection: 'row', flexWrap: 'wrap' }}>
+      <Button size='icon' icon={Settings} />
+
+      <Button size='icon' variant='outline' icon={Heart} />
+
+      <Button size='icon' variant='secondary' icon={Share} />
+
+      <Button size='icon' variant='ghost' icon={MoreHorizontal} />
+
+      <Button size='icon' variant='destructive' icon={MessageCircle} />
+    </View>
+  );
+}

package/dist/templates/demo/button/button-loading.tsx

@@ -0,0 +1,23 @@
+import { Button } from '@/components/ui/button';
+import { View } from '@/components/ui/view';
+import { Save } from 'lucide-react-native';
+import React from 'react';
+
+export function ButtonLoading() {
+  return (
+    <View style={{ gap: 12, flexDirection: 'row', flexWrap: 'wrap' }}>
+      <Button loading onPress={() => {}}>
+        Loading...
+      </Button>
+      <Button loading variant='outline' onPress={() => {}}>
+        Please wait
+      </Button>
+      <Button loading variant='destructive' onPress={() => {}}>
+        Deleting...
+      </Button>
+      <Button loading size='icon' onPress={() => {}}>
+        <Save size={20} color='white' />
+      </Button>
+    </View>
+  );
+}

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

@@ -0,0 +1,19 @@
+import { Button } from '@/components/ui/button';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function ButtonSizes() {
+  return (
+    <View style={{ gap: 12, alignItems: 'flex-start' }}>
+      <Button size='sm' onPress={() => {}}>
+        Small
+      </Button>
+      <Button size='default' onPress={() => {}}>
+        Default
+      </Button>
+      <Button size='lg' onPress={() => {}}>
+        Large
+      </Button>
+    </View>
+  );
+}

package/dist/templates/demo/button/button-variants.tsx

@@ -0,0 +1,33 @@
+import { Button } from '@/components/ui/button';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function ButtonVariants() {
+  return (
+    <View style={{ gap: 12 }}>
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+        <Button variant='default' onPress={() => {}} style={{ flex: 1 }}>
+          Default
+        </Button>
+        <Button variant='destructive' onPress={() => {}} style={{ flex: 2 }}>
+          Destructive
+        </Button>
+      </View>
+      <Button variant='success' onPress={() => {}}>
+        Success
+      </Button>
+      <Button variant='outline' onPress={() => {}}>
+        Outline
+      </Button>
+      <Button variant='secondary' onPress={() => {}}>
+        Secondary
+      </Button>
+      <Button variant='ghost' onPress={() => {}}>
+        Ghost
+      </Button>
+      <Button variant='link' onPress={() => {}}>
+        Link
+      </Button>
+    </View>
+  );
+}

package/dist/templates/demo/button/button-with-icons.tsx

@@ -0,0 +1,23 @@
+import { Button } from '@/components/ui/button';
+import { View } from '@/components/ui/view';
+import { Download, Mail, Plus, Search } from 'lucide-react-native';
+import React from 'react';
+
+export function ButtonWithIcons() {
+  return (
+    <View style={{ gap: 12, flexDirection: 'row', flexWrap: 'wrap' }}>
+      <Button icon={Download} onPress={() => {}}>
+        Download
+      </Button>
+      <Button icon={Mail} variant='outline' onPress={() => {}}>
+        Email
+      </Button>
+      <Button icon={Plus} variant='success' onPress={() => {}}>
+        Add Item
+      </Button>
+      <Button icon={Search} variant='secondary' onPress={() => {}}>
+        Search
+      </Button>
+    </View>
+  );
+}

package/dist/templates/demo/camera/camera-custom-controls.tsx

@@ -0,0 +1,25 @@
+import { Camera } from '@/components/ui/camera';
+import React from 'react';
+import { Alert } from 'react-native';
+
+export function CameraCustomControls() {
+  const handleCapture = ({ uri, type }: { uri: string; type: string }) => {
+    Alert.alert('Capture Complete', `${type} saved successfully`);
+  };
+
+  const handleVideoCapture = ({ uri, type }: { uri: string; type: string }) => {
+    Alert.alert('Recording Complete', `Video saved successfully`);
+  };
+
+  return (
+    <Camera
+      facing='front'
+      enableTorch={false}
+      timerOptions={[0, 5, 15]}
+      maxVideoDuration={30}
+      onCapture={handleCapture}
+      onVideoCapture={handleVideoCapture}
+      style={{ height: 400, borderRadius: 12 }}
+    />
+  );
+}

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

@@ -0,0 +1,21 @@
+import { Camera } from '@/components/ui/camera';
+import React from 'react';
+import { Alert } from 'react-native';
+
+export function CameraDemo() {
+  const handleCapture = ({ uri, type }: { uri: string; type: string }) => {
+    Alert.alert('Picture Captured', `Saved to: ${uri}`);
+  };
+
+  const handleVideoCapture = ({ uri, type }: { uri: string; type: string }) => {
+    Alert.alert('Video Recorded', `Saved to: ${uri}`);
+  };
+
+  return (
+    <Camera
+      onCapture={handleCapture}
+      onVideoCapture={handleVideoCapture}
+      style={{ height: 400 }}
+    />
+  );
+}

package/dist/templates/demo/camera/camera-picture-only.tsx

@@ -0,0 +1,17 @@
+import { Camera } from '@/components/ui/camera';
+import React from 'react';
+import { Alert } from 'react-native';
+
+export function CameraPictureOnly() {
+  const handleCapture = ({ uri, type }: { uri: string; type: string }) => {
+    Alert.alert('Photo Captured', 'Picture saved to gallery');
+  };
+
+  return (
+    <Camera
+      enableVideo={false}
+      onCapture={handleCapture}
+      style={{ height: 400 }}
+    />
+  );
+}

package/dist/templates/demo/camera/camera-settings.tsx

@@ -0,0 +1,29 @@
+import { Camera } from '@/components/ui/camera';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+import { Alert } from 'react-native';
+
+export function CameraSettings() {
+  const handleCapture = ({ uri, type }: { uri: string; type: string }) => {
+    Alert.alert('Settings Demo', 'Captured with current settings applied');
+  };
+
+  const handleVideoCapture = ({ uri, type }: { uri: string; type: string }) => {
+    Alert.alert('Settings Demo', 'Recorded with current settings applied');
+  };
+
+  return (
+    <View style={{ gap: 8 }}>
+      <Text variant='body' style={{ textAlign: 'center', opacity: 0.7 }}>
+        Tap the settings icon to access grid, sound, aspect ratio, and timer
+        controls
+      </Text>
+      <Camera
+        onCapture={handleCapture}
+        onVideoCapture={handleVideoCapture}
+        style={{ height: 400 }}
+      />
+    </View>
+  );
+}

package/dist/templates/demo/camera/camera-timer.tsx

@@ -0,0 +1,22 @@
+import { Camera } from '@/components/ui/camera';
+import React from 'react';
+import { Alert } from 'react-native';
+
+export function CameraTimer() {
+  const handleCapture = ({ uri, type }: { uri: string; type: string }) => {
+    Alert.alert('Timer Capture', 'Photo captured after countdown!');
+  };
+
+  const handleVideoCapture = ({ uri, type }: { uri: string; type: string }) => {
+    Alert.alert('Timer Recording', 'Video started after countdown!');
+  };
+
+  return (
+    <Camera
+      timerOptions={[0, 3, 5, 10, 15]}
+      onCapture={handleCapture}
+      onVideoCapture={handleVideoCapture}
+      style={{ height: 400 }}
+    />
+  );
+}

package/dist/templates/demo/camera/camera-video.tsx

@@ -0,0 +1,25 @@
+import { Camera } from '@/components/ui/camera';
+import React from 'react';
+import { Alert } from 'react-native';
+
+export function CameraVideo() {
+  const handleCapture = ({ uri, type }: { uri: string; type: string }) => {
+    Alert.alert(
+      'Picture Taken',
+      `Saved: ${uri.substring(uri.lastIndexOf('/') + 1)}`
+    );
+  };
+
+  const handleVideoCapture = ({ uri, type }: { uri: string; type: string }) => {
+    Alert.alert('Video Recorded', `Duration: ${uri ? 'Success' : 'Failed'}`);
+  };
+
+  return (
+    <Camera
+      maxVideoDuration={120}
+      onCapture={handleCapture}
+      onVideoCapture={handleVideoCapture}
+      style={{ height: 400 }}
+    />
+  );
+}

package/dist/templates/demo/camera/camera-zoom.tsx

@@ -0,0 +1,21 @@
+import { Camera } from '@/components/ui/camera';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+import { Alert } from 'react-native';
+
+export function CameraZoom() {
+  const handleCapture = ({ uri, type }: { uri: string; type: string }) => {
+    Alert.alert('Zoomed Capture', 'Photo taken with current zoom level');
+  };
+
+  return (
+    <View style={{ gap: 8 }}>
+      <Text variant='body' style={{ textAlign: 'center', opacity: 0.7 }}>
+        Pinch to zoom • Double tap for quick zoom • Tap zoom button to cycle
+        levels
+      </Text>
+      <Camera onCapture={handleCapture} style={{ height: 400 }} />
+    </View>
+  );
+}

package/dist/templates/demo/camera-preview/camera-preview-demo.tsx

@@ -0,0 +1,5 @@
+import { CameraPreview } from '@/components/ui/camera-preview';
+
+export function CameraPreviewDemo() {
+  return <CameraPreview />;
+}

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

@@ -0,0 +1,35 @@
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Text } from '@/components/ui/text';
+import React from 'react';
+
+export function CardDemo() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>
+          This is a description of the card content. It provides additional
+          context about what this card contains.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Text>
+          This is the main content area of the card. You can put any content
+          here including text, images, forms, or other components.
+        </Text>
+      </CardContent>
+      <CardFooter>
+        <Button variant='outline'>Cancel</Button>
+        <Button style={{ flex: 1 }}>Confirm</Button>
+      </CardFooter>
+    </Card>
+  );
+}

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

@@ -0,0 +1,51 @@
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Icon } from '@/components/ui/icon';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { Bell } from 'lucide-react-native';
+import React from 'react';
+
+export function CardNotification() {
+  return (
+    <Card style={{ maxWidth: 400 }}>
+      <CardHeader>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+          <View
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 20,
+              backgroundColor: '#3b82f6',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Icon name={Bell} color='white' size={20} />
+          </View>
+          <View style={{ flex: 1 }}>
+            <CardTitle>New Notification</CardTitle>
+            <CardDescription>2 minutes ago</CardDescription>
+          </View>
+        </View>
+      </CardHeader>
+      <CardContent>
+        <Text>
+          You have a new message from John Doe. Click to view the full
+          conversation and respond.
+        </Text>
+      </CardContent>
+      <CardFooter>
+        <Button variant='outline'>Dismiss</Button>
+        <Button>View Message</Button>
+      </CardFooter>
+    </Card>
+  );
+}

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

@@ -0,0 +1,115 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Icon } from '@/components/ui/icon';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { Check } from 'lucide-react-native';
+import React from 'react';
+
+export function CardPricing() {
+  const plans = [
+    {
+      name: 'Basic',
+      price: '$9',
+      description: 'Perfect for individuals',
+      features: ['1 Project', '5GB Storage', 'Email Support'],
+      popular: false,
+    },
+    {
+      name: 'Pro',
+      price: '$29',
+      description: 'Best for small teams',
+      features: [
+        '10 Projects',
+        '100GB Storage',
+        // 'Priority Support',
+        // 'Advanced Analytics',
+      ],
+      popular: true,
+    },
+    {
+      name: 'Enterprise',
+      price: '$99',
+      description: 'For large organizations',
+      features: [
+        'Unlimited Projects',
+        '1TB Storage',
+        // '24/7 Support',
+        // 'Custom Integrations',
+      ],
+      popular: false,
+    },
+  ];
+
+  return (
+    <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap' }}>
+      {plans.map((plan, index) => (
+        <Card
+          key={index}
+          style={{
+            flex: 1,
+            minWidth: 250,
+            borderWidth: plan.popular ? 2 : 1,
+            borderColor: plan.popular ? '#3b82f6' : undefined,
+          }}
+        >
+          <CardHeader>
+            <View style={{ alignItems: 'center' }}>
+              {plan.popular && (
+                <View
+                  style={{
+                    backgroundColor: '#3b82f6',
+                    paddingHorizontal: 12,
+                    paddingVertical: 4,
+                    borderRadius: 12,
+                    marginBottom: 8,
+                  }}
+                >
+                  <Text
+                    style={{ color: 'white', fontSize: 12, fontWeight: '600' }}
+                  >
+                    POPULAR
+                  </Text>
+                </View>
+              )}
+              <CardTitle>{plan.name}</CardTitle>
+              <CardDescription>{plan.description}</CardDescription>
+              <Text style={{ fontSize: 32, fontWeight: 'bold', marginTop: 8 }}>
+                {plan.price}
+                <Text style={{ fontSize: 16, fontWeight: 'normal' }}>
+                  /month
+                </Text>
+              </Text>
+            </View>
+          </CardHeader>
+          <CardContent>
+            <View style={{ gap: 8 }}>
+              {plan.features.map((feature, featureIndex) => (
+                <View
+                  key={featureIndex}
+                  style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}
+                >
+                  <Icon name={Check} color='#22c55e' size={16} />
+                  <Text>{feature}</Text>
+                </View>
+              ))}
+            </View>
+          </CardContent>
+          {/* <CardFooter>
+            <Button
+              variant={plan.popular ? 'default' : 'outline'}
+              style={{ width: '100%' }}
+            >
+              Get Started
+            </Button>
+          </CardFooter> */}
+        </Card>
+      ))}
+    </View>
+  );
+}

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

@@ -0,0 +1,16 @@
+import { Card, CardContent } from '@/components/ui/card';
+import { Text } from '@/components/ui/text';
+import React from 'react';
+
+export function CardSimple() {
+  return (
+    <Card>
+      <CardContent>
+        <Text>
+          A simple card with just content. Perfect for displaying basic
+          information or messages.
+        </Text>
+      </CardContent>
+    </Card>
+  );
+}