kynjal-cli 2.0.6

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

@@ -0,0 +1,65 @@
+import { SearchBar } from '@/components/ui/searchbar';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function SearchBarStyled() {
+  const [query1, setQuery1] = useState('');
+  const [query2, setQuery2] = useState('');
+  const [query3, setQuery3] = useState('');
+
+  return (
+    <View style={{ gap: 16 }}>
+      {/* Rounded with gradient-like background */}
+      <SearchBar
+        placeholder='Rounded search...'
+        value={query1}
+        onChangeText={setQuery1}
+        containerStyle={{
+          borderRadius: 25,
+          borderWidth: 1.5,
+          borderColor: 'green',
+        }}
+        inputStyle={{
+          color: 'green',
+          fontWeight: '500',
+        }}
+      />
+
+      {/* Minimal flat design */}
+      <SearchBar
+        placeholder='Minimal search...'
+        value={query2}
+        onChangeText={setQuery2}
+        containerStyle={{
+          backgroundColor: 'transparent',
+          borderBottomWidth: 1,
+          borderBottomColor: '#374151',
+          borderRadius: 0,
+          paddingHorizontal: 0,
+        }}
+        inputStyle={{
+          fontSize: 16,
+          fontWeight: '400',
+        }}
+      />
+
+      {/* Dark theme with custom height */}
+      <SearchBar
+        placeholder='Custom dark search...'
+        value={query3}
+        onChangeText={setQuery3}
+        containerStyle={{
+          backgroundColor: '#1f2937',
+          borderRadius: 12,
+          height: 56,
+          borderWidth: 1,
+          borderColor: '#374151',
+        }}
+        inputStyle={{
+          color: '#f9fafb',
+          fontSize: 16,
+        }}
+      />
+    </View>
+  );
+}

package/dist/templates/demo/searchbar/searchbar-suggestions.tsx

@@ -0,0 +1,40 @@
+import { SearchBarWithSuggestions } from '@/components/ui/searchbar';
+import React, { useState } from 'react';
+
+export function SearchBarSuggestions() {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const suggestions = [
+    'React Native',
+    'React Navigation',
+    'React Hook Form',
+    'Redux Toolkit',
+    'Expo Router',
+    'TypeScript',
+    'JavaScript',
+    'Node.js',
+    'Next.js',
+    'Tailwind CSS',
+  ];
+
+  const handleSearch = (query: string) => {
+    console.log('Searching for:', query);
+  };
+
+  const handleSuggestionPress = (suggestion: string) => {
+    setSearchQuery(suggestion);
+    handleSearch(suggestion);
+  };
+
+  return (
+    <SearchBarWithSuggestions
+      placeholder='Type to see suggestions...'
+      value={searchQuery}
+      onChangeText={setSearchQuery}
+      onSearch={handleSearch}
+      suggestions={suggestions}
+      onSuggestionPress={handleSuggestionPress}
+      maxSuggestions={8}
+    />
+  );
+}

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

@@ -0,0 +1,35 @@
+import { Separator } from '@/components/ui/separator';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function SeparatorColors() {
+  return (
+    <View style={{ padding: 16 }}>
+      <Text variant='caption' style={{ marginBottom: 8 }}>
+        Default
+      </Text>
+      <Separator style={{ marginBottom: 16 }} />
+
+      <Text variant='caption' style={{ marginBottom: 8 }}>
+        Red
+      </Text>
+      <Separator style={{ backgroundColor: '#ef4444', marginBottom: 16 }} />
+
+      <Text variant='caption' style={{ marginBottom: 8 }}>
+        Blue
+      </Text>
+      <Separator style={{ backgroundColor: '#3b82f6', marginBottom: 16 }} />
+
+      <Text variant='caption' style={{ marginBottom: 8 }}>
+        Green
+      </Text>
+      <Separator style={{ backgroundColor: '#10b981', marginBottom: 16 }} />
+
+      <Text variant='caption' style={{ marginBottom: 8 }}>
+        Semi-transparent
+      </Text>
+      <Separator style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }} />
+    </View>
+  );
+}

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

@@ -0,0 +1,14 @@
+import { Separator } from '@/components/ui/separator';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function SeparatorDemo() {
+  return (
+    <View style={{ padding: 16 }}>
+      <Text variant='body'>Above separator</Text>
+      <Separator style={{ marginVertical: 16 }} />
+      <Text variant='body'>Below separator</Text>
+    </View>
+  );
+}

package/dist/templates/demo/separator/separator-spacing.tsx

@@ -0,0 +1,26 @@
+import { Separator } from '@/components/ui/separator';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function SeparatorSpacing() {
+  return (
+    <View style={{ padding: 16 }}>
+      <Text variant='body'>Tight spacing</Text>
+      <Separator style={{ marginVertical: 4 }} />
+      <Text variant='body'>Content with minimal spacing</Text>
+
+      <Separator style={{ marginVertical: 12 }} />
+
+      <Text variant='body'>Normal spacing</Text>
+      <Separator style={{ marginVertical: 16 }} />
+      <Text variant='body'>Standard content spacing</Text>
+
+      <Separator style={{ marginVertical: 12 }} />
+
+      <Text variant='body'>Loose spacing</Text>
+      <Separator style={{ marginVertical: 24 }} />
+      <Text variant='body'>Generous content spacing</Text>
+    </View>
+  );
+}

package/dist/templates/demo/separator/separator-thickness.tsx

@@ -0,0 +1,30 @@
+import { Separator } from '@/components/ui/separator';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function SeparatorThickness() {
+  return (
+    <View style={{ padding: 16 }}>
+      <Text variant='caption' style={{ marginBottom: 8 }}>
+        Thin (1px)
+      </Text>
+      <Separator style={{ height: 1, marginBottom: 16 }} />
+
+      <Text variant='caption' style={{ marginBottom: 8 }}>
+        Medium (2px)
+      </Text>
+      <Separator style={{ height: 2, marginBottom: 16 }} />
+
+      <Text variant='caption' style={{ marginBottom: 8 }}>
+        Thick (4px)
+      </Text>
+      <Separator style={{ height: 4, marginBottom: 16 }} />
+
+      <Text variant='caption' style={{ marginBottom: 8 }}>
+        Extra thick (8px)
+      </Text>
+      <Separator style={{ height: 8 }} />
+    </View>
+  );
+}

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

@@ -0,0 +1,21 @@
+import { Separator } from '@/components/ui/separator';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function SeparatorVertical() {
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 16,
+        height: 60,
+      }}
+    >
+      <Text variant='body'>Left content</Text>
+      <Separator orientation='vertical' style={{ marginHorizontal: 16 }} />
+      <Text variant='body'>Right content</Text>
+    </View>
+  );
+}

package/dist/templates/demo/share/share-callbacks.tsx

@@ -0,0 +1,61 @@
+import { ShareButton } from '@/components/ui/share';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function ShareCallbacks() {
+  const [status, setStatus] = useState<string>('Ready to share');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleShareStart = () => {
+    setStatus('Starting share...');
+    setIsLoading(true);
+  };
+
+  const handleShareSuccess = (activityType?: string | null) => {
+    setStatus(
+      `Shared successfully${activityType ? ` via ${activityType}` : ''}!`
+    );
+    setIsLoading(false);
+
+    // Reset status after 3 seconds
+    setTimeout(() => setStatus('Ready to share'), 3000);
+  };
+
+  const handleShareError = (error: Error) => {
+    setStatus(`Share failed: ${error.message}`);
+    setIsLoading(false);
+
+    // Reset status after 3 seconds
+    setTimeout(() => setStatus('Ready to share'), 3000);
+  };
+
+  const handleShareDismiss = () => {
+    setStatus('Share cancelled');
+    setIsLoading(false);
+
+    // Reset status after 2 seconds
+    setTimeout(() => setStatus('Ready to share'), 2000);
+  };
+
+  return (
+    <View style={{ gap: 16 }}>
+      <Text style={{ fontWeight: '500' }}>Status: {status}</Text>
+
+      <ShareButton
+        content={{
+          message: 'Check out this awesome React Native component library!',
+          url: 'https://github.com/example/ui-library',
+          title: 'UI Component Library',
+        }}
+        loading={isLoading}
+        onShareStart={handleShareStart}
+        onShareSuccess={handleShareSuccess}
+        onShareError={handleShareError}
+        onShareDismiss={handleShareDismiss}
+      >
+        Share with Callbacks
+      </ShareButton>
+    </View>
+  );
+}

package/dist/templates/demo/share/share-custom-content.tsx

@@ -0,0 +1,53 @@
+import { ShareButton } from '@/components/ui/share';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function ShareCustomContent() {
+  return (
+    <View style={{ gap: 12 }}>
+      {/* Rich content with title and subject */}
+      <ShareButton
+        content={{
+          message:
+            'I found this amazing article about React Native development. You should definitely check it out!',
+          url: 'https://reactnative.dev/blog',
+          title: 'React Native Blog',
+          subject: 'Great React Native Article',
+        }}
+        options={{
+          dialogTitle: 'Share this article',
+        }}
+      >
+        Share Article
+      </ShareButton>
+
+      {/* App promotion */}
+      <ShareButton
+        content={{
+          message:
+            '🚀 Just discovered this incredible mobile app! The UI is amazing and it works perfectly on both iOS and Android. Download it now!',
+          url: 'https://apps.apple.com/app/example',
+          title: 'Amazing Mobile App',
+          subject: 'You need to try this app!',
+        }}
+        variant='secondary'
+      >
+        Share App
+      </ShareButton>
+
+      {/* Event invitation */}
+      <ShareButton
+        content={{
+          message:
+            "🎉 You're invited to our tech meetup! Join us for an evening of networking, learning, and great discussions about mobile development.",
+          url: 'https://meetup.com/event/123',
+          title: 'Tech Meetup Invitation',
+          subject: 'Join us at the Tech Meetup!',
+        }}
+        variant='outline'
+      >
+        Share Event
+      </ShareButton>
+    </View>
+  );
+}

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

@@ -0,0 +1,22 @@
+import { ShareButton } from '@/components/ui/share';
+import React from 'react';
+
+export function ShareDemo() {
+  return (
+    <ShareButton
+      content={{
+        message: 'Check out this amazing app!',
+        url: 'https://example.com',
+        title: 'Amazing App',
+      }}
+      onShareSuccess={(activityType) => {
+        console.log('Shared successfully:', activityType);
+      }}
+      onShareError={(error) => {
+        console.error('Share failed:', error);
+      }}
+    >
+      Share
+    </ShareButton>
+  );
+}

package/dist/templates/demo/share/share-hook.tsx

@@ -0,0 +1,71 @@
+import { Button } from '@/components/ui/button';
+import { useShare } from '@/components/ui/share';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function ShareHook() {
+  const { shareText, shareUrl, shareContent } = useShare();
+  const [status, setStatus] = useState<string>('Choose a sharing method');
+
+  const handleShareText = async () => {
+    try {
+      setStatus('Sharing text...');
+      await shareText(
+        'Hello from the useShare hook! This is just a plain text message.'
+      );
+      setStatus('Text shared successfully!');
+    } catch (error) {
+      setStatus(`Failed to share text: ${(error as Error).message}`);
+    }
+  };
+
+  const handleShareUrl = async () => {
+    try {
+      setStatus('Sharing URL...');
+      await shareUrl(
+        'https://reactnative.dev',
+        'Check out the official React Native documentation!'
+      );
+      setStatus('URL shared successfully!');
+    } catch (error) {
+      setStatus(`Failed to share URL: ${(error as Error).message}`);
+    }
+  };
+
+  const handleShareContent = async () => {
+    try {
+      setStatus('Sharing content...');
+      await shareContent({
+        message:
+          '🚀 Just built an amazing React Native app with this component library!',
+        url: 'https://github.com/example/ui-library',
+        title: 'Amazing UI Library',
+        subject: 'Check out this UI library',
+      });
+      setStatus('Content shared successfully!');
+    } catch (error) {
+      setStatus(`Failed to share content: ${(error as Error).message}`);
+    }
+  };
+
+  return (
+    <View style={{ gap: 16 }}>
+      <Text style={{ fontWeight: '500', textAlign: 'center' }}>{status}</Text>
+
+      <View style={{ gap: 8 }}>
+        <Button onPress={handleShareText} variant='outline'>
+          Share Text Only
+        </Button>
+
+        <Button onPress={handleShareUrl} variant='secondary'>
+          Share URL with Message
+        </Button>
+
+        <Button onPress={handleShareContent} variant='default'>
+          Share Rich Content
+        </Button>
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,42 @@
+import { ShareButton } from '@/components/ui/share';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function ShareIconOnly() {
+  const shareContent = {
+    message: 'Check out this amazing content!',
+    url: 'https://example.com',
+  };
+
+  return (
+    <View style={{ flexDirection: 'row', gap: 8 }}>
+      <ShareButton
+        content={shareContent}
+        size='icon'
+        variant='default'
+        iconSize={18}
+      />
+
+      <ShareButton
+        content={shareContent}
+        size='icon'
+        variant='secondary'
+        iconSize={18}
+      />
+
+      <ShareButton
+        content={shareContent}
+        size='icon'
+        variant='outline'
+        iconSize={18}
+      />
+
+      <ShareButton
+        content={shareContent}
+        size='icon'
+        variant='ghost'
+        iconSize={20}
+      />
+    </View>
+  );
+}

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

@@ -0,0 +1,28 @@
+import { ShareButton } from '@/components/ui/share';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function ShareSizes() {
+  const shareContent = {
+    message: 'Check out this amazing content!',
+    url: 'https://example.com',
+  };
+
+  return (
+    <View style={{ gap: 12, alignItems: 'center' }}>
+      <ShareButton content={shareContent} size='sm'>
+        Small
+      </ShareButton>
+
+      <ShareButton content={shareContent} size='default'>
+        Default
+      </ShareButton>
+
+      <ShareButton content={shareContent} size='lg'>
+        Large
+      </ShareButton>
+
+      <ShareButton content={shareContent} size='icon' iconSize={20} />
+    </View>
+  );
+}

package/dist/templates/demo/share/share-url-only.tsx

@@ -0,0 +1,24 @@
+import { ShareButton } from '@/components/ui/share';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function ShareUrlOnly() {
+  return (
+    <View style={{ gap: 12 }}>
+      <ShareButton content={{ url: 'https://github.com' }} variant='outline'>
+        Share GitHub
+      </ShareButton>
+
+      <ShareButton
+        content={{ url: 'https://reactnative.dev' }}
+        variant='secondary'
+      >
+        Share React Native Docs
+      </ShareButton>
+
+      <ShareButton content={{ url: 'https://expo.dev' }} variant='ghost'>
+        Share Expo
+      </ShareButton>
+    </View>
+  );
+}

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

@@ -0,0 +1,38 @@
+import { ShareButton } from '@/components/ui/share';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function ShareVariants() {
+  const shareContent = {
+    message: 'Check out this amazing content!',
+    url: 'https://example.com',
+  };
+
+  return (
+    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 12 }}>
+      <ShareButton content={shareContent} variant='default'>
+        Default
+      </ShareButton>
+
+      <ShareButton content={shareContent} variant='secondary'>
+        Secondary
+      </ShareButton>
+
+      <ShareButton content={shareContent} variant='outline'>
+        Outline
+      </ShareButton>
+
+      <ShareButton content={shareContent} variant='ghost'>
+        Ghost
+      </ShareButton>
+
+      <ShareButton content={shareContent} variant='link'>
+        Link
+      </ShareButton>
+
+      <ShareButton content={shareContent} variant='destructive'>
+        Destructive
+      </ShareButton>
+    </View>
+  );
+}

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

@@ -0,0 +1,38 @@
+import { Button } from '@/components/ui/button';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function SheetDemo() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger>Open Sheet</SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Welcome to the Sheet</SheetTitle>
+          <SheetDescription>
+            This is a basic sheet component that slides in from the right side
+            of the screen.
+          </SheetDescription>
+        </SheetHeader>
+        <View style={{ padding: 24, gap: 16 }}>
+          <Text>
+            This sheet can contain any content you need. It's perfect for
+            navigation menus, forms, settings, or detailed information.
+          </Text>
+          <Button onPress={() => setOpen(false)}>Close Sheet</Button>
+        </View>
+      </SheetContent>
+    </Sheet>
+  );
+}