kynjal-cli 2.0.6

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

@@ -0,0 +1,51 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import { Text } from '@/components/ui/text';
+import React from 'react';
+
+export function AccordionMultiple() {
+  return (
+    <Accordion type='multiple' defaultValue={['item-1', 'item-2']}>
+      <AccordionItem value='item-1'>
+        <AccordionTrigger>Frontend Technologies</AccordionTrigger>
+        <AccordionContent>
+          <Text>
+            Modern frontend development includes React, Vue, Angular, and many
+            other frameworks that help build interactive user interfaces.
+          </Text>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value='item-2'>
+        <AccordionTrigger>Backend Technologies</AccordionTrigger>
+        <AccordionContent>
+          <Text>
+            Backend development involves server-side technologies like Node.js,
+            Python, Java, and databases to handle data and business logic.
+          </Text>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value='item-3'>
+        <AccordionTrigger>Mobile Development</AccordionTrigger>
+        <AccordionContent>
+          <Text>
+            Mobile development can be done natively with Swift/Kotlin or with
+            cross-platform solutions like React Native, Flutter, or Xamarin.
+          </Text>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value='item-4'>
+        <AccordionTrigger>DevOps & Cloud</AccordionTrigger>
+        <AccordionContent>
+          <Text>
+            DevOps practices and cloud platforms like AWS, Azure, and GCP help
+            deploy, scale, and maintain applications efficiently.
+          </Text>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}

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

@@ -0,0 +1,51 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import { Text } from '@/components/ui/text';
+import React from 'react';
+
+export function AccordionNonCollapsible() {
+  return (
+    <Accordion type='single' defaultValue='step-1'>
+      <AccordionItem value='step-1'>
+        <AccordionTrigger>Step 1: Planning</AccordionTrigger>
+        <AccordionContent>
+          <Text>
+            Start by defining your project requirements and creating a detailed
+            plan. This includes wireframing and technical specifications.
+          </Text>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value='step-2'>
+        <AccordionTrigger>Step 2: Development</AccordionTrigger>
+        <AccordionContent>
+          <Text>
+            Begin the development process by setting up your environment and
+            implementing the core features according to your plan.
+          </Text>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value='step-3'>
+        <AccordionTrigger>Step 3: Testing</AccordionTrigger>
+        <AccordionContent>
+          <Text>
+            Thoroughly test your application across different devices and
+            scenarios to ensure it works as expected.
+          </Text>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value='step-4'>
+        <AccordionTrigger>Step 4: Deployment</AccordionTrigger>
+        <AccordionContent>
+          <Text>
+            Deploy your application to production and monitor its performance.
+            Set up analytics and error tracking.
+          </Text>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}

package/dist/templates/demo/accordion/accordion-single.tsx

@@ -0,0 +1,45 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import { Text } from '@/components/ui/text';
+import React from 'react';
+
+export function AccordionSingle() {
+  return (
+    <Accordion type='single' collapsible>
+      <AccordionItem value='item-1'>
+        <AccordionTrigger>What is React Native?</AccordionTrigger>
+        <AccordionContent>
+          <Text>
+            React Native is a framework for building native mobile applications
+            using React. It allows you to create mobile apps for iOS and Android
+            using JavaScript and React components.
+          </Text>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value='item-2'>
+        <AccordionTrigger>What is Expo?</AccordionTrigger>
+        <AccordionContent>
+          <Text>
+            Expo is a platform for making universal native apps that run on
+            Android, iOS, and the web. It provides a set of tools and services
+            built around React Native.
+          </Text>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value='item-3'>
+        <AccordionTrigger>What is TypeScript?</AccordionTrigger>
+        <AccordionContent>
+          <Text>
+            TypeScript is a programming language developed by Microsoft. It is a
+            strict syntactical superset of JavaScript and adds optional static
+            type checking to the language.
+          </Text>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}

package/dist/templates/demo/accordion/accordion-styled.tsx

@@ -0,0 +1,55 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import { BORDER_RADIUS } from '@/theme/globals';
+import React from 'react';
+
+export function AccordionStyled() {
+  const card = useColor('card');
+
+  return (
+    <View
+      style={{
+        padding: 16,
+        backgroundColor: card,
+        borderRadius: BORDER_RADIUS,
+      }}
+    >
+      <Accordion type='single' collapsible>
+        <AccordionItem value='features'>
+          <AccordionTrigger>🚀 Features</AccordionTrigger>
+          <AccordionContent style={{ paddingLeft: 8 }}>
+            <Text>
+              • Cross-platform compatibility{'\n'}• TypeScript support{'\n'}•
+              Theme system integration{'\n'}• Customizable animations
+            </Text>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value='performance'>
+          <AccordionTrigger>⚡ Performance</AccordionTrigger>
+          <AccordionContent style={{ paddingLeft: 8 }}>
+            <Text>
+              • Optimized rendering{'\n'}• Minimal re-renders{'\n'}• Smooth
+              animations{'\n'}• Memory efficient
+            </Text>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value='accessibility'>
+          <AccordionTrigger>♿ Accessibility</AccordionTrigger>
+          <AccordionContent style={{ paddingLeft: 8 }}>
+            <Text>
+              • Screen reader support{'\n'}• Keyboard navigation{'\n'}• Focus
+              management{'\n'}• ARIA attributes
+            </Text>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </View>
+  );
+}

package/dist/templates/demo/action-sheet/action-sheet-demo.tsx

@@ -0,0 +1,37 @@
+import { ActionSheet } from '@/components/ui/action-sheet';
+import { Button } from '@/components/ui/button';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function ActionSheetDemo() {
+  const [visible, setVisible] = useState(false);
+
+  const options = [
+    {
+      title: 'Edit',
+      onPress: () => console.log('Edit pressed'),
+    },
+    {
+      title: 'Share',
+      onPress: () => console.log('Share pressed'),
+    },
+    {
+      title: 'Delete',
+      onPress: () => console.log('Delete pressed'),
+      destructive: true,
+    },
+  ];
+
+  return (
+    <View>
+      <Button onPress={() => setVisible(true)}>Show Action Sheet</Button>
+      <ActionSheet
+        visible={visible}
+        onClose={() => setVisible(false)}
+        title='Choose an action'
+        message='Select one of the options below'
+        options={options}
+      />
+    </View>
+  );
+}

package/dist/templates/demo/action-sheet/action-sheet-destructive.tsx

@@ -0,0 +1,44 @@
+import { ActionSheet } from '@/components/ui/action-sheet';
+import { Button } from '@/components/ui/button';
+import { Icon } from '@/components/ui/icon';
+import { AlertTriangle, Trash2 } from 'lucide-react-native';
+import React, { useState } from 'react';
+
+export function ActionSheetDestructive() {
+  const [visible, setVisible] = useState(false);
+
+  const options = [
+    {
+      title: 'Remove from Library',
+      onPress: () => console.log('Remove from library'),
+      destructive: true,
+    },
+    {
+      title: 'Delete Permanently',
+      onPress: () => console.log('Delete permanently'),
+      destructive: true,
+      icon: <Icon name={Trash2} size={20} />,
+    },
+    {
+      title: 'Report Content',
+      onPress: () => console.log('Report content'),
+      destructive: true,
+      icon: <Icon name={AlertTriangle} size={20} />,
+    },
+  ];
+
+  return (
+    <>
+      <Button variant='destructive' onPress={() => setVisible(true)}>
+        Destructive Actions
+      </Button>
+      <ActionSheet
+        visible={visible}
+        onClose={() => setVisible(false)}
+        title='Are you sure?'
+        message='These actions cannot be undone'
+        options={options}
+      />
+    </>
+  );
+}

package/dist/templates/demo/action-sheet/action-sheet-disabled.tsx

@@ -0,0 +1,50 @@
+import { ActionSheet } from '@/components/ui/action-sheet';
+import { Button } from '@/components/ui/button';
+import { Icon } from '@/components/ui/icon';
+import { Copy, Edit, Share, Trash2 } from 'lucide-react-native';
+import React, { useState } from 'react';
+
+export function ActionSheetDisabled() {
+  const [visible, setVisible] = useState(false);
+
+  const options = [
+    {
+      title: 'Edit',
+      onPress: () => console.log('Edit pressed'),
+      icon: <Icon name={Edit} size={20} />,
+    },
+    {
+      title: 'Copy',
+      onPress: () => console.log('Copy pressed'),
+      icon: <Icon name={Copy} size={20} />,
+      disabled: true,
+    },
+    {
+      title: 'Share',
+      onPress: () => console.log('Share pressed'),
+      icon: <Icon name={Share} size={20} />,
+      disabled: true,
+    },
+    {
+      title: 'Delete',
+      onPress: () => console.log('Delete pressed'),
+      destructive: true,
+      icon: <Icon name={Trash2} size={20} />,
+    },
+  ];
+
+  return (
+    <>
+      <Button onPress={() => setVisible(true)}>
+        Show with Disabled Options
+      </Button>
+      <ActionSheet
+        visible={visible}
+        onClose={() => setVisible(false)}
+        title='Document Actions'
+        message='Some actions are not available'
+        options={options}
+      />
+    </>
+  );
+}

package/dist/templates/demo/action-sheet/action-sheet-hook.tsx

@@ -0,0 +1,63 @@
+import { useActionSheet } from '@/components/ui/action-sheet';
+import { Button } from '@/components/ui/button';
+import { Icon } from '@/components/ui/icon';
+import { View } from '@/components/ui/view';
+import { Camera, FileText, Image, Mic } from 'lucide-react-native';
+import React from 'react';
+
+export function ActionSheetHook() {
+  const { show, ActionSheet } = useActionSheet();
+
+  const showMediaOptions = () => {
+    show({
+      title: 'Add Media',
+      message: 'Choose the type of media to add',
+      options: [
+        {
+          title: 'Take Photo',
+          onPress: () => console.log('Take photo'),
+          icon: <Icon name={Camera} size={20} />,
+        },
+        {
+          title: 'Choose from Gallery',
+          onPress: () => console.log('Choose from gallery'),
+          icon: <Icon name={Image} size={20} />,
+        },
+        {
+          title: 'Record Audio',
+          onPress: () => console.log('Record audio'),
+          icon: <Icon name={Mic} size={20} />,
+        },
+        {
+          title: 'Add Document',
+          onPress: () => console.log('Add document'),
+          icon: <Icon name={FileText} size={20} />,
+        },
+      ],
+    });
+  };
+
+  const showConfirmation = () => {
+    show({
+      title: 'Confirm Action',
+      message: 'This action cannot be undone',
+      options: [
+        {
+          title: 'Yes, Continue',
+          onPress: () => console.log('Confirmed'),
+          destructive: true,
+        },
+      ],
+    });
+  };
+
+  return (
+    <View style={{ gap: 12 }}>
+      <Button onPress={showMediaOptions}>Add Media</Button>
+      <Button variant='outline' onPress={showConfirmation}>
+        Show Confirmation
+      </Button>
+      {ActionSheet}
+    </View>
+  );
+}

package/dist/templates/demo/action-sheet/action-sheet-icons.tsx

@@ -0,0 +1,47 @@
+import { ActionSheet } from '@/components/ui/action-sheet';
+import { Button } from '@/components/ui/button';
+import { Icon } from '@/components/ui/icon';
+import { Download, Edit, Share, Trash2 } from 'lucide-react-native';
+import React, { useState } from 'react';
+
+export function ActionSheetIcons() {
+  const [visible, setVisible] = useState(false);
+
+  const options = [
+    {
+      title: 'Edit',
+      onPress: () => console.log('Edit pressed'),
+      icon: <Icon name={Edit} size={20} />,
+    },
+    {
+      title: 'Share',
+      onPress: () => console.log('Share pressed'),
+      icon: <Icon name={Share} size={20} />,
+    },
+    {
+      title: 'Download',
+      onPress: () => console.log('Download pressed'),
+      icon: <Icon name={Download} size={20} />,
+    },
+    {
+      title: 'Delete',
+      onPress: () => console.log('Delete pressed'),
+      destructive: true,
+      icon: <Icon name={Trash2} size={20} />,
+    },
+  ];
+
+  return (
+    <>
+      <Button onPress={() => setVisible(true)}>
+        Show Action Sheet with Icons
+      </Button>
+      <ActionSheet
+        visible={visible}
+        onClose={() => setVisible(false)}
+        title='File Actions'
+        options={options}
+      />
+    </>
+  );
+}

package/dist/templates/demo/action-sheet/action-sheet-long.tsx

@@ -0,0 +1,105 @@
+import { ActionSheet } from '@/components/ui/action-sheet';
+import { Button } from '@/components/ui/button';
+import { Icon } from '@/components/ui/icon';
+import {
+  Archive,
+  Bookmark,
+  Copy,
+  Download,
+  Edit,
+  EyeOff,
+  Flag,
+  Heart,
+  Pin,
+  Send,
+  Share,
+  Star,
+  Trash2,
+} from 'lucide-react-native';
+import React, { useState } from 'react';
+
+export function ActionSheetLong() {
+  const [visible, setVisible] = useState(false);
+
+  const options = [
+    {
+      title: 'Edit Document',
+      onPress: () => console.log('Edit'),
+      icon: <Icon name={Edit} size={20} />,
+    },
+    {
+      title: 'Share',
+      onPress: () => console.log('Share'),
+      icon: <Icon name={Share} size={20} />,
+    },
+    {
+      title: 'Download',
+      onPress: () => console.log('Download'),
+      icon: <Icon name={Download} size={20} />,
+    },
+    {
+      title: 'Copy Link',
+      onPress: () => console.log('Copy link'),
+      icon: <Icon name={Copy} size={20} />,
+    },
+    {
+      title: 'Archive',
+      onPress: () => console.log('Archive'),
+      icon: <Icon name={Archive} size={20} />,
+    },
+    {
+      title: 'Pin to Top',
+      onPress: () => console.log('Pin'),
+      icon: <Icon name={Pin} size={20} />,
+    },
+    {
+      title: 'Add to Favorites',
+      onPress: () => console.log('Favorite'),
+      icon: <Icon name={Heart} size={20} />,
+    },
+    {
+      title: 'Rate & Review',
+      onPress: () => console.log('Rate'),
+      icon: <Icon name={Star} size={20} />,
+    },
+    {
+      title: 'Bookmark',
+      onPress: () => console.log('Bookmark'),
+      icon: <Icon name={Bookmark} size={20} />,
+    },
+    {
+      title: 'Send Message',
+      onPress: () => console.log('Send message'),
+      icon: <Icon name={Send} size={20} />,
+    },
+    {
+      title: 'Hide from Feed',
+      onPress: () => console.log('Hide'),
+      icon: <Icon name={EyeOff} size={20} />,
+    },
+    {
+      title: 'Report Issue',
+      onPress: () => console.log('Report'),
+      icon: <Icon name={Flag} size={20} />,
+    },
+    {
+      title: 'Delete',
+      onPress: () => console.log('Delete'),
+      destructive: true,
+      icon: <Icon name={Trash2} size={20} />,
+    },
+  ];
+
+  return (
+    <>
+      <Button onPress={() => setVisible(true)}>Show Long List</Button>
+      <ActionSheet
+        visible={visible}
+        onClose={() => setVisible(false)}
+        title='All Actions'
+        message='Scroll to see all available options'
+        options={options}
+      />
+    </>
+  );
+}

package/dist/templates/demo/action-sheet/action-sheet-styled.tsx

@@ -0,0 +1,52 @@
+import { ActionSheet } from '@/components/ui/action-sheet';
+import { Button } from '@/components/ui/button';
+import { Icon } from '@/components/ui/icon';
+import { Bookmark, Heart, Send, Star } from 'lucide-react-native';
+import React, { useState } from 'react';
+
+export function ActionSheetStyled() {
+  const [visible, setVisible] = useState(false);
+
+  const options = [
+    {
+      title: 'Add to Favorites',
+      onPress: () => console.log('Add to favorites'),
+      icon: <Icon name={Heart} size={20} color='#FF6B6B' />,
+    },
+    {
+      title: 'Rate this Item',
+      onPress: () => console.log('Rate item'),
+      icon: <Icon name={Star} size={20} color='#FFD93D' />,
+    },
+    {
+      title: 'Save for Later',
+      onPress: () => console.log('Save for later'),
+      icon: <Icon name={Bookmark} size={20} color='#4ECDC4' />,
+    },
+    {
+      title: 'Share with Friends',
+      onPress: () => console.log('Share with friends'),
+      icon: <Icon name={Send} size={20} color='#45B7D1' />,
+    },
+  ];
+
+  return (
+    <>
+      <Button variant='secondary' onPress={() => setVisible(true)}>
+        Custom Styled Sheet
+      </Button>
+      <ActionSheet
+        visible={visible}
+        onClose={() => setVisible(false)}
+        title='✨ Quick Actions'
+        message='Choose how you want to interact with this item'
+        options={options}
+        cancelButtonTitle='Maybe Later'
+        style={{
+          borderTopLeftRadius: 24,
+          borderTopRightRadius: 24,
+        }}
+      />
+    </>
+  );
+}