kynjal-cli 2.0.6

package/dist/templates/demo/tabs/tabs-vertical.tsx

@@ -0,0 +1,61 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function TabsVertical() {
+  return (
+    <Tabs defaultValue='profile' orientation='vertical'>
+      <TabsList>
+        <TabsTrigger value='profile'>🧑‍💼</TabsTrigger>
+        <TabsTrigger value='security'>🫆</TabsTrigger>
+        <TabsTrigger value='notifications'>🔔</TabsTrigger>
+        <TabsTrigger value='billing'>💰</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value='profile' style={{ flex: 1 }}>
+        <View style={{ marginHorizontal: 16 }}>
+          <Text variant='title' style={{ marginBottom: 8 }}>
+            Profile Information
+          </Text>
+          <Text variant='body'>
+            Update your personal information and profile picture.
+          </Text>
+        </View>
+      </TabsContent>
+
+      <TabsContent value='security' style={{ flex: 1 }}>
+        <View style={{ marginHorizontal: 16 }}>
+          <Text variant='title' style={{ marginBottom: 8 }}>
+            Security Settings
+          </Text>
+          <Text variant='body'>
+            Manage two-factor authentication and login security.
+          </Text>
+        </View>
+      </TabsContent>
+
+      <TabsContent value='notifications' style={{ flex: 1 }}>
+        <View style={{ marginHorizontal: 16 }}>
+          <Text variant='title' style={{ marginBottom: 8 }}>
+            Notification Preferences
+          </Text>
+          <Text variant='body'>
+            Configure how and when you receive notifications.
+          </Text>
+        </View>
+      </TabsContent>
+
+      <TabsContent value='billing' style={{ flex: 1 }}>
+        <View style={{ marginHorizontal: 16 }}>
+          <Text variant='title' style={{ marginBottom: 8 }}>
+            Billing & Subscription
+          </Text>
+          <Text variant='body'>
+            Manage your subscription and payment methods.
+          </Text>
+        </View>
+      </TabsContent>
+    </Tabs>
+  );
+}

package/dist/templates/demo/text/text-colors.tsx

@@ -0,0 +1,40 @@
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function TextColors() {
+  return (
+    <View style={{ gap: 16 }}>
+      <Text variant='subtitle' style={{ marginBottom: 8 }}>
+        Custom Color Examples
+      </Text>
+
+      <Text variant='body' lightColor='#3b82f6' darkColor='#60a5fa'>
+        This text uses custom blue colors for light and dark themes
+      </Text>
+
+      <Text variant='body' lightColor='#10b981' darkColor='#34d399'>
+        This text uses custom green colors for light and dark themes
+      </Text>
+
+      <Text variant='body' lightColor='#f59e0b' darkColor='#fbbf24'>
+        This text uses custom amber colors for light and dark themes
+      </Text>
+
+      <Text variant='body' lightColor='#ef4444' darkColor='#f87171'>
+        This text uses custom red colors for light and dark themes
+      </Text>
+
+      <Text variant='body' lightColor='#8b5cf6' darkColor='#a78bfa'>
+        This text uses custom purple colors for light and dark themes
+      </Text>
+
+      <View style={{ marginTop: 16 }}>
+        <Text variant='caption'>
+          Note: These colors automatically adapt based on the current theme
+          (light/dark mode)
+        </Text>
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,19 @@
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function TextDemo() {
+  return (
+    <View style={{ gap: 16 }}>
+      <Text variant='heading'>Heading Text</Text>
+      <Text variant='title'>Title Text</Text>
+      <Text variant='subtitle'>Subtitle Text</Text>
+      <Text variant='body'>
+        This is body text that demonstrates the default styling for regular
+        content.
+      </Text>
+      <Text variant='caption'>Caption text for additional information</Text>
+      <Text variant='link'>Link text with underline</Text>
+    </View>
+  );
+}

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

@@ -0,0 +1,60 @@
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function TextVariants() {
+  return (
+    <View style={{ gap: 20 }}>
+      <View>
+        <Text variant='caption' style={{ marginBottom: 4 }}>
+          HEADING (28px, weight 700)
+        </Text>
+        <Text variant='heading'>
+          The quick brown fox jumps over the lazy dog
+        </Text>
+      </View>
+
+      <View>
+        <Text variant='caption' style={{ marginBottom: 4 }}>
+          TITLE (24px, weight 700)
+        </Text>
+        <Text variant='title'>The quick brown fox jumps over the lazy dog</Text>
+      </View>
+
+      <View>
+        <Text variant='caption' style={{ marginBottom: 4 }}>
+          SUBTITLE (19px, weight 600)
+        </Text>
+        <Text variant='subtitle'>
+          The quick brown fox jumps over the lazy dog
+        </Text>
+      </View>
+
+      <View>
+        <Text variant='caption' style={{ marginBottom: 4 }}>
+          BODY (16px, weight 400)
+        </Text>
+        <Text variant='body'>
+          The quick brown fox jumps over the lazy dog. This is the default text
+          variant used for body content and regular paragraphs.
+        </Text>
+      </View>
+
+      <View>
+        <Text variant='caption' style={{ marginBottom: 4 }}>
+          CAPTION (16px, weight 400, muted)
+        </Text>
+        <Text variant='caption'>
+          The quick brown fox jumps over the lazy dog
+        </Text>
+      </View>
+
+      <View>
+        <Text variant='caption' style={{ marginBottom: 4 }}>
+          LINK (16px, weight 500, underlined)
+        </Text>
+        <Text variant='link'>The quick brown fox jumps over the lazy dog</Text>
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/toast/toast-actions.tsx

@@ -0,0 +1,51 @@
+import { Button } from '@/components/ui/button';
+import { useToast } from '@/components/ui/toast';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function ToastActions() {
+  const { toast } = useToast();
+
+  const showToastWithAction = () => {
+    toast({
+      title: 'New message received',
+      description: 'You have a new message from John Doe.',
+      variant: 'info',
+      action: {
+        label: 'View',
+        onPress: () => {
+          console.log('View action pressed');
+          // Navigate to message or perform action
+        },
+      },
+    });
+  };
+
+  const showUndoToast = () => {
+    toast({
+      title: 'Item deleted',
+      description: 'The item has been removed from your list.',
+      variant: 'warning',
+      duration: 8000, // Longer duration for undo action
+      action: {
+        label: 'Undo',
+        onPress: () => {
+          console.log('Undo action pressed');
+          // Restore the deleted item
+        },
+      },
+    });
+  };
+
+  return (
+    <View style={{ gap: 12 }}>
+      <Button onPress={showToastWithAction} variant='outline'>
+        Show with Action
+      </Button>
+
+      <Button onPress={showUndoToast} variant='outline'>
+        Show Undo Toast
+      </Button>
+    </View>
+  );
+}

package/dist/templates/demo/toast/toast-compact.tsx

@@ -0,0 +1,66 @@
+import { Button } from '@/components/ui/button';
+import { useToast } from '@/components/ui/toast';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function ToastCompact() {
+  const { toast } = useToast();
+
+  return (
+    <View style={{ gap: 12 }}>
+      <Button
+        onPress={() =>
+          toast({
+            variant: 'success',
+          })
+        }
+        variant='success'
+      >
+        Success Icon Only
+      </Button>
+
+      <Button
+        onPress={() =>
+          toast({
+            variant: 'error',
+          })
+        }
+        variant='destructive'
+      >
+        Error Icon Only
+      </Button>
+
+      <Button
+        onPress={() =>
+          toast({
+            variant: 'warning',
+          })
+        }
+        variant='secondary'
+      >
+        Warning Icon Only
+      </Button>
+
+      <Button
+        onPress={() =>
+          toast({
+            variant: 'info',
+          })
+        }
+        variant='outline'
+      >
+        Info Icon Only
+      </Button>
+
+      <Button
+        onPress={() =>
+          toast({
+            title: 'Title only',
+          })
+        }
+      >
+        Title Only
+      </Button>
+    </View>
+  );
+}

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

@@ -0,0 +1,18 @@
+import { Button } from '@/components/ui/button';
+import { useToast } from '@/components/ui/toast';
+import React from 'react';
+
+export function ToastDemo() {
+  const { toast } = useToast();
+
+  const showToast = () => {
+    toast({
+      title: 'Toast Notification',
+      description:
+        'This is a basic toast notification with title and description.',
+      variant: 'default',
+    });
+  };
+
+  return <Button onPress={showToast}>Show Toast</Button>;
+}

package/dist/templates/demo/toast/toast-duration.tsx

@@ -0,0 +1,68 @@
+import { Button } from '@/components/ui/button';
+import { useToast } from '@/components/ui/toast';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function ToastDuration() {
+  const { toast } = useToast();
+
+  return (
+    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 12 }}>
+      <Button
+        onPress={() =>
+          toast({
+            title: 'Quick toast',
+            description: 'This disappears in 2 seconds',
+            duration: 2000,
+            variant: 'info',
+          })
+        }
+        variant='outline'
+      >
+        2 seconds
+      </Button>
+
+      <Button
+        onPress={() =>
+          toast({
+            title: 'Standard toast',
+            description: 'This disappears in 4 seconds',
+            duration: 4000,
+            variant: 'default',
+          })
+        }
+        variant='outline'
+      >
+        4 seconds (default)
+      </Button>
+
+      <Button
+        onPress={() =>
+          toast({
+            title: 'Long toast',
+            description: 'This disappears in 8 seconds',
+            duration: 8000,
+            variant: 'warning',
+          })
+        }
+        variant='outline'
+      >
+        8 seconds
+      </Button>
+
+      <Button
+        onPress={() =>
+          toast({
+            title: 'Persistent toast',
+            description: "This won't disappear automatically",
+            duration: 0, // No auto-dismiss
+            variant: 'error',
+          })
+        }
+        variant='outline'
+      >
+        Persistent
+      </Button>
+    </View>
+  );
+}

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

@@ -0,0 +1,65 @@
+import { Button } from '@/components/ui/button';
+import { useToast } from '@/components/ui/toast';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function ToastMultiple() {
+  const { toast, dismissAll } = useToast();
+
+  const showMultipleToasts = () => {
+    const variants = ['success', 'warning', 'error', 'info'] as const;
+    const messages = [
+      { title: 'Success!', description: 'Operation completed successfully' },
+      { title: 'Warning', description: 'Please check your input' },
+      { title: 'Error', description: 'Something went wrong' },
+      { title: 'Info', description: "Here's some information" },
+    ];
+
+    variants.forEach((variant, index) => {
+      setTimeout(() => {
+        toast({
+          ...messages[index],
+          variant,
+          duration: 6000,
+        });
+      }, index * 500); // Stagger the toasts
+    });
+  };
+
+  const showBatchToasts = () => {
+    // Show multiple toasts at once
+    toast({
+      title: 'First toast',
+      description: 'This is the first toast',
+      variant: 'success',
+    });
+
+    toast({
+      title: 'Second toast',
+      description: 'This is the second toast',
+      variant: 'info',
+    });
+
+    toast({
+      title: 'Third toast',
+      description: 'This is the third toast',
+      variant: 'warning',
+    });
+  };
+
+  return (
+    <View style={{ gap: 12 }}>
+      <Button onPress={showMultipleToasts} variant='outline'>
+        Show Staggered Toasts
+      </Button>
+
+      <Button onPress={showBatchToasts} variant='outline'>
+        Show Batch Toasts
+      </Button>
+
+      <Button onPress={dismissAll} variant='destructive'>
+        Dismiss All Toasts
+      </Button>
+    </View>
+  );
+}

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

@@ -0,0 +1,45 @@
+import { Button } from '@/components/ui/button';
+import { useToast } from '@/components/ui/toast';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function ToastVariants() {
+  const { success, error, warning, info } = useToast();
+
+  return (
+    <View style={{ gap: 12 }}>
+      <Button
+        onPress={() =>
+          success('Success!', 'Your action was completed successfully.')
+        }
+        variant='success'
+      >
+        Success
+      </Button>
+
+      <Button
+        onPress={() =>
+          error('Error!', 'Something went wrong. Please try again.')
+        }
+        variant='destructive'
+      >
+        Error
+      </Button>
+
+      <Button
+        onPress={() =>
+          warning('Warning!', 'Please review your input before continuing.')
+        }
+        variant='secondary'
+      >
+        Warning
+      </Button>
+
+      <Button
+        onPress={() => info('Info', "Here's some helpful information for you.")}
+      >
+        Info
+      </Button>
+    </View>
+  );
+}

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

@@ -0,0 +1,13 @@
+import { Toggle } from '@/components/ui/toggle';
+import { Bold } from 'lucide-react-native';
+import React, { useState } from 'react';
+
+export function ToggleDemo() {
+  const [pressed, setPressed] = useState(false);
+
+  return (
+    <Toggle pressed={pressed} onPressedChange={setPressed}>
+      <Bold size={16} />
+    </Toggle>
+  );
+}

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

@@ -0,0 +1,23 @@
+import { Toggle } from '@/components/ui/toggle';
+import { View } from '@/components/ui/view';
+import { Bold, Italic } from 'lucide-react-native';
+import React from 'react';
+
+export function ToggleDisabled() {
+  return (
+    <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+      <Toggle pressed={false} disabled>
+        <Bold size={16} />
+      </Toggle>
+      <Toggle pressed={true} disabled>
+        <Italic size={16} />
+      </Toggle>
+      <Toggle pressed={false} disabled variant='outline'>
+        <Bold size={16} />
+      </Toggle>
+      <Toggle pressed={true} disabled variant='outline'>
+        <Italic size={16} />
+      </Toggle>
+    </View>
+  );
+}

package/dist/templates/demo/toggle/toggle-group-multiple.tsx

@@ -0,0 +1,22 @@
+import { ToggleGroupMultiple } from '@/components/ui/toggle';
+import { Bold, Italic, Underline } from 'lucide-react-native';
+import React, { useState } from 'react';
+
+export function ToggleGroupMultipleDemo() {
+  const [value, setValue] = useState(['bold']);
+
+  const items = [
+    { value: 'bold', label: 'Bold', icon: Bold },
+    { value: 'italic', label: 'Italic', icon: Italic },
+    { value: 'underline', label: 'Underline', icon: Underline },
+  ];
+
+  return (
+    <ToggleGroupMultiple
+      value={value}
+      onValueChange={setValue}
+      items={items}
+      size='icon'
+    />
+  );
+}

package/dist/templates/demo/toggle/toggle-group-outline.tsx

@@ -0,0 +1,23 @@
+import { ToggleGroupSingle } from '@/components/ui/toggle';
+import { Bold, Italic, Underline } from 'lucide-react-native';
+import React, { useState } from 'react';
+
+export function ToggleGroupOutline() {
+  const [value, setValue] = useState('bold');
+
+  const items = [
+    { value: 'bold', label: 'Bold', icon: Bold },
+    { value: 'italic', label: 'Italic', icon: Italic },
+    { value: 'underline', label: 'Underline', icon: Underline },
+  ];
+
+  return (
+    <ToggleGroupSingle
+      value={value}
+      onValueChange={setValue}
+      items={items}
+      variant='outline'
+      size='default'
+    />
+  );
+}

package/dist/templates/demo/toggle/toggle-group-single.tsx

@@ -0,0 +1,22 @@
+import { ToggleGroupSingle } from '@/components/ui/toggle';
+import { AlignCenter, AlignLeft, AlignRight } from 'lucide-react-native';
+import React, { useState } from 'react';
+
+export function ToggleGroupSingleDemo() {
+  const [value, setValue] = useState('left');
+
+  const items = [
+    { value: 'left', label: 'Left', icon: AlignLeft },
+    { value: 'center', label: 'Center', icon: AlignCenter },
+    { value: 'right', label: 'Right', icon: AlignRight },
+  ];
+
+  return (
+    <ToggleGroupSingle
+      value={value}
+      onValueChange={setValue}
+      items={items}
+      size='icon'
+    />
+  );
+}

package/dist/templates/demo/toggle/toggle-group-vertical.tsx

@@ -0,0 +1,23 @@
+import { ToggleGroupSingle } from '@/components/ui/toggle';
+import { AlignCenter, AlignLeft, AlignRight } from 'lucide-react-native';
+import React, { useState } from 'react';
+
+export function ToggleGroupVertical() {
+  const [value, setValue] = useState('left');
+
+  const items = [
+    { value: 'left', label: 'Left Align', icon: AlignLeft },
+    { value: 'center', label: 'Center Align', icon: AlignCenter },
+    { value: 'right', label: 'Right Align', icon: AlignRight },
+  ];
+
+  return (
+    <ToggleGroupSingle
+      value={value}
+      onValueChange={setValue}
+      items={items}
+      orientation='vertical'
+      size='default'
+    />
+  );
+}

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

@@ -0,0 +1,20 @@
+import { Toggle } from '@/components/ui/toggle';
+import { View } from '@/components/ui/view';
+import { Bold } from 'lucide-react-native';
+import React, { useState } from 'react';
+
+export function ToggleSizes() {
+  const [pressed1, setPressed1] = useState(false);
+  const [pressed2, setPressed2] = useState(true);
+
+  return (
+    <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+      <Toggle pressed={pressed1} onPressedChange={setPressed1} size='icon'>
+        <Bold size={16} />
+      </Toggle>
+      <Toggle pressed={pressed2} onPressedChange={setPressed2} size='default'>
+        Bold
+      </Toggle>
+    </View>
+  );
+}

package/dist/templates/demo/toggle/toggle-text.tsx

@@ -0,0 +1,28 @@
+import { Toggle } from '@/components/ui/toggle';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function ToggleText() {
+  const [pressed1, setPressed1] = useState(false);
+  const [pressed2, setPressed2] = useState(true);
+  const [pressed3, setPressed3] = useState(false);
+
+  return (
+    <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+      <Toggle pressed={pressed1} onPressedChange={setPressed1} size='default'>
+        Bold
+      </Toggle>
+      <Toggle
+        pressed={pressed2}
+        onPressedChange={setPressed2}
+        size='default'
+        variant='outline'
+      >
+        Italic
+      </Toggle>
+      <Toggle pressed={pressed3} onPressedChange={setPressed3} size='default'>
+        Underline
+      </Toggle>
+    </View>
+  );
+}