kynjal-cli 2.0.6

package/dist/templates/demo/link/link-types.tsx

@@ -0,0 +1,45 @@
+import { Link } from '@/components/ui/link';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function LinkTypes() {
+  return (
+    <View style={{ gap: 16 }}>
+      <View style={{ gap: 8 }}>
+        <Text style={{ fontWeight: '600', fontSize: 16 }}>
+          Internal Navigation
+        </Text>
+        <View style={{ gap: 6 }}>
+          <Link href='/'>Home Page</Link>
+          <Link href='/'>About Us</Link>
+          <Link href={{ pathname: '/', params: { id: '123' } }}>
+            Product Details
+          </Link>
+        </View>
+      </View>
+
+      <View style={{ gap: 8 }}>
+        <Text style={{ fontWeight: '600', fontSize: 16 }}>External URLs</Text>
+        <View style={{ gap: 6 }}>
+          <Link href='https://google.com'>Google</Link>
+          <Link href='http://example.com'>Example Site</Link>
+        </View>
+      </View>
+
+      <View style={{ gap: 8 }}>
+        <Text style={{ fontWeight: '600', fontSize: 16 }}>
+          Communication Links
+        </Text>
+        <View style={{ gap: 6 }}>
+          <Link href='mailto:hello@example.com'>Send Email</Link>
+          <Link href='tel:+1234567890'>Call Phone</Link>
+          <Link href='mailto:support@company.com?subject=Help Request'>
+            Email with Subject
+          </Link>
+          <Link href='sms:+1234567890'>Send SMS</Link>
+        </View>
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/media-picker/media-picker-demo.tsx

@@ -0,0 +1,16 @@
+import { MediaPicker } from '@/components/ui/media-picker';
+import React from 'react';
+
+export function MediaPickerDemo() {
+  return (
+    <MediaPicker
+      mediaType='all'
+      onSelectionChange={(assets) => {
+        console.log('Selected assets:', assets);
+      }}
+      onError={(error) => {
+        console.error('Media picker error:', error);
+      }}
+    />
+  );
+}

package/dist/templates/demo/media-picker/media-picker-gallery.tsx

@@ -0,0 +1,21 @@
+import { MediaAsset, MediaPicker } from '@/components/ui/media-picker';
+import { Folder } from 'lucide-react-native';
+import React, { useState } from 'react';
+
+export function MediaPickerGallery() {
+  const [selected, setSelected] = useState<MediaAsset[]>([]);
+
+  return (
+    <MediaPicker
+      mediaType='all'
+      gallery={true}
+      multiple={true}
+      maxSelection={8}
+      buttonText='Open Gallery'
+      icon={Folder}
+      variant='outline'
+      selectedAssets={selected}
+      onSelectionChange={setSelected}
+    />
+  );
+}

package/dist/templates/demo/media-picker/media-picker-images.tsx

@@ -0,0 +1,17 @@
+import { MediaPicker } from '@/components/ui/media-picker';
+import { Image } from 'lucide-react-native';
+import React from 'react';
+
+export function MediaPickerImages() {
+  return (
+    <MediaPicker
+      mediaType='image'
+      buttonText='Select Images'
+      icon={Image}
+      variant='outline'
+      onSelectionChange={(assets) => {
+        console.log('Selected images:', assets);
+      }}
+    />
+  );
+}

package/dist/templates/demo/media-picker/media-picker-multiple.tsx

@@ -0,0 +1,31 @@
+import { MediaPicker } from '@/components/ui/media-picker';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { Plus } from 'lucide-react-native';
+import React, { useState } from 'react';
+
+export function MediaPickerMultiple() {
+  const [selectedCount, setSelectedCount] = useState(0);
+
+  return (
+    <View style={{ gap: 12 }}>
+      <MediaPicker
+        mediaType='all'
+        multiple={true}
+        maxSelection={5}
+        buttonText={`Select Media (${selectedCount}/5)`}
+        icon={Plus}
+        onSelectionChange={(assets) => {
+          setSelectedCount(assets.length);
+          console.log('Selected assets:', assets);
+        }}
+      />
+
+      {selectedCount > 0 && (
+        <Text variant='caption'>
+          {selectedCount} item{selectedCount !== 1 ? 's' : ''} selected
+        </Text>
+      )}
+    </View>
+  );
+}

package/dist/templates/demo/media-picker/media-picker-preview.tsx

@@ -0,0 +1,39 @@
+import { MediaAsset, MediaPicker } from '@/components/ui/media-picker';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { ImageIcon } from 'lucide-react-native';
+import React, { useState } from 'react';
+
+export function MediaPickerPreview() {
+  const [assets, setAssets] = useState<MediaAsset[]>([]);
+
+  return (
+    <View style={{ gap: 16 }}>
+      <MediaPicker
+        mediaType='all'
+        multiple={true}
+        maxSelection={6}
+        showPreview={true}
+        previewSize={100}
+        buttonText='Add Media'
+        icon={ImageIcon}
+        selectedAssets={assets}
+        onSelectionChange={(newAssets) => {
+          setAssets(newAssets);
+          console.log('Assets with preview:', newAssets);
+        }}
+      />
+
+      {assets.length > 0 && (
+        <View>
+          <Text variant='caption'>
+            {assets.length} item{assets.length !== 1 ? 's' : ''} selected
+          </Text>
+          <Text variant='caption'>
+            Types: {assets.map((a) => a.type).join(', ')}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+}

package/dist/templates/demo/media-picker/media-picker-quality.tsx

@@ -0,0 +1,62 @@
+import { MediaPicker } from '@/components/ui/media-picker';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { Settings } from 'lucide-react-native';
+import React from 'react';
+
+export function MediaPickerQuality() {
+  return (
+    <View style={{ gap: 16 }}>
+      <View>
+        <Text variant='title' style={{ marginBottom: 8 }}>
+          High Quality
+        </Text>
+        <MediaPicker
+          mediaType='image'
+          quality='high'
+          buttonText='High Quality Images'
+          icon={Settings}
+          variant='outline'
+          size='sm'
+          onSelectionChange={(assets) => {
+            console.log('High quality assets:', assets);
+          }}
+        />
+      </View>
+
+      <View>
+        <Text variant='title' style={{ marginBottom: 8 }}>
+          Medium Quality
+        </Text>
+        <MediaPicker
+          mediaType='image'
+          quality='medium'
+          buttonText='Medium Quality Images'
+          icon={Settings}
+          variant='secondary'
+          size='sm'
+          onSelectionChange={(assets) => {
+            console.log('Medium quality assets:', assets);
+          }}
+        />
+      </View>
+
+      <View>
+        <Text variant='title' style={{ marginBottom: 8 }}>
+          Low Quality
+        </Text>
+        <MediaPicker
+          mediaType='image'
+          quality='low'
+          buttonText='Low Quality Images'
+          icon={Settings}
+          variant='ghost'
+          size='sm'
+          onSelectionChange={(assets) => {
+            console.log('Low quality assets:', assets);
+          }}
+        />
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/media-picker/media-picker-videos.tsx

@@ -0,0 +1,17 @@
+import { MediaPicker } from '@/components/ui/media-picker';
+import { Video } from 'lucide-react-native';
+import React from 'react';
+
+export function MediaPickerVideos() {
+  return (
+    <MediaPicker
+      mediaType='video'
+      buttonText='Select Videos'
+      icon={Video}
+      variant='secondary'
+      onSelectionChange={(assets) => {
+        console.log('Selected videos:', assets);
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,6 @@
+import { ModeToggle } from '@/components/ui/mode-toggle';
+import React from 'react';
+
+export function ModeToggleDemo() {
+  return <ModeToggle />;
+}

package/dist/templates/demo/onboarding/onboarding-custom-buttons.tsx

@@ -0,0 +1,41 @@
+import { Onboarding, OnboardingStep } from '@/components/ui/onboarding';
+import { Heart, Rocket, Target } from 'lucide-react-native';
+import React from 'react';
+
+export function OnboardingCustomButtons() {
+  const steps: OnboardingStep[] = [
+    {
+      id: '1',
+      title: '🎉 Welcome Aboard!',
+      description:
+        "We're thrilled to have you join our community of innovators and creators.",
+      icon: <Heart color='#ee5a52' size={100} />,
+    },
+    {
+      id: '2',
+      title: '🚀 Boost Your Productivity',
+      description:
+        'Discover powerful tools that will transform the way you work and collaborate.',
+      icon: <Rocket color='#4ecdc4' size={100} />,
+    },
+    {
+      id: '3',
+      title: '🎯 Achieve Your Goals',
+      description:
+        'Set ambitious targets and track your progress with our advanced analytics.',
+      icon: <Target color='#45b7d1' size={100} />,
+    },
+  ];
+
+  return (
+    <Onboarding
+      steps={steps}
+      onComplete={() => console.log('Custom buttons onboarding completed!')}
+      onSkip={() => console.log('Custom buttons onboarding skipped!')}
+      primaryButtonText='🚀 Launch App'
+      nextButtonText='👉 Continue'
+      backButtonText='👈 Back'
+      skipButtonText='⏭️ Skip for Now'
+    />
+  );
+}

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

@@ -0,0 +1,114 @@
+import { Onboarding, useOnboarding } from '@/components/ui/onboarding';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+
+export const OnboardingPresets = {
+  welcome: [
+    {
+      id: 'welcome',
+      title: 'Welcome to Our App',
+      description:
+        'Discover amazing features and get started with your journey.',
+      icon: <Text style={{ fontSize: 80 }}>👋</Text>,
+    },
+    {
+      id: 'features',
+      title: 'Powerful Features',
+      description:
+        'Experience cutting-edge functionality designed to make your life easier.',
+      icon: <Text style={{ fontSize: 80 }}>⚡</Text>,
+    },
+    {
+      id: 'personalize',
+      title: 'Personalize Your Experience',
+      description: 'Customize the app to match your preferences and workflow.',
+      icon: <Text style={{ fontSize: 80 }}>🎨</Text>,
+    },
+    {
+      id: 'ready',
+      title: "You're All Set!",
+      description:
+        "Everything is ready. Let's start exploring what you can achieve.",
+      icon: <Text style={{ fontSize: 80 }}>🚀</Text>,
+    },
+  ],
+
+  features: [
+    {
+      id: 'organize',
+      title: 'Stay Organized',
+      description: 'Keep all your important information in one secure place.',
+      icon: <Text style={{ fontSize: 80 }}>📋</Text>,
+    },
+    {
+      id: 'collaborate',
+      title: 'Collaborate Seamlessly',
+      description: 'Work together with your team in real-time, anywhere.',
+      icon: <Text style={{ fontSize: 80 }}>🤝</Text>,
+    },
+    {
+      id: 'automate',
+      title: 'Automate Your Workflow',
+      description: 'Set up smart automations to save time and reduce errors.',
+      icon: <Text style={{ fontSize: 80 }}>🤖</Text>,
+    },
+  ],
+
+  security: [
+    {
+      id: 'secure',
+      title: 'Your Data is Secure',
+      description:
+        'We use end-to-end encryption to keep your information safe.',
+      icon: <Text style={{ fontSize: 80 }}>🔒</Text>,
+    },
+    {
+      id: 'privacy',
+      title: 'Privacy First',
+      description: 'We never share your personal data with third parties.',
+      icon: <Text style={{ fontSize: 80 }}>🛡️</Text>,
+    },
+    {
+      id: 'control',
+      title: "You're in Control",
+      description: 'Manage your privacy settings and data preferences anytime.',
+      icon: <Text style={{ fontSize: 80 }}>⚙️</Text>,
+    },
+  ],
+};
+
+export function OnboardingDemo() {
+  const { hasCompletedOnboarding, completeOnboarding, skipOnboarding } =
+    useOnboarding();
+
+  if (hasCompletedOnboarding) {
+    return (
+      <View
+        style={{
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+          paddingHorizontal: 24,
+        }}
+      >
+        <Text variant='title'>Welcome Back!</Text>
+        <Text variant='body'>You've already completed the onboarding.</Text>
+      </View>
+    );
+  }
+
+  return (
+    <Onboarding
+      steps={OnboardingPresets.welcome}
+      onComplete={completeOnboarding}
+      onSkip={skipOnboarding}
+      showSkip={true}
+      showProgress={true}
+      swipeEnabled={true}
+      primaryButtonText='Get Started'
+      skipButtonText='Skip'
+      nextButtonText='Next'
+      backButtonText='Back'
+    />
+  );
+}

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

@@ -0,0 +1,97 @@
+import { Button } from '@/components/ui/button';
+import {
+  Onboarding,
+  OnboardingStep,
+  useOnboarding,
+} from '@/components/ui/onboarding';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+function MainApp() {
+  const { resetOnboarding } = useOnboarding();
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+        backgroundColor: '#f8fafc',
+      }}
+    >
+      <View style={{ alignItems: 'center', marginBottom: 40 }}>
+        {/* <Text>{}</Text> */}
+        <Text variant='heading' style={{ marginTop: 20, textAlign: 'center' }}>
+          Welcome to the App!
+        </Text>
+        <Text
+          variant='body'
+          style={{
+            marginTop: 12,
+            textAlign: 'center',
+            color: '#64748b',
+            lineHeight: 22,
+          }}
+        >
+          You've successfully completed the onboarding process. You can restart
+          it anytime using the button below.
+        </Text>
+      </View>
+
+      <Button
+        onPress={resetOnboarding}
+        variant='outline'
+        style={{ paddingHorizontal: 24 }}
+      >
+        🔄 Restart Onboarding
+      </Button>
+    </View>
+  );
+}
+
+function OnboardingFlow() {
+  const { completeOnboarding, skipOnboarding } = useOnboarding();
+
+  const steps: OnboardingStep[] = [
+    {
+      id: '1',
+      title: 'Hook-based State',
+      description:
+        'This onboarding uses the useOnboarding hook to manage state across your entire app.',
+      // icon: '🪝',
+    },
+    {
+      id: '2',
+      title: 'Persistent State',
+      description:
+        'The hook remembers your progress and can be used to control onboarding flow throughout your app.',
+      // icon: '📱',
+    },
+    {
+      id: '3',
+      title: 'Easy Integration',
+      description:
+        'Integrate onboarding state with your existing app navigation and user management.',
+      // icon: '🚀',
+    },
+  ];
+
+  return (
+    <Onboarding
+      steps={steps}
+      onComplete={completeOnboarding}
+      onSkip={skipOnboarding}
+      primaryButtonText='Complete & Continue'
+      nextButtonText='Next Step'
+      skipButtonText='Skip Demo'
+    />
+  );
+}
+
+export function OnboardingHook() {
+  const { hasCompletedOnboarding } = useOnboarding();
+
+  return hasCompletedOnboarding ? <MainApp /> : <OnboardingFlow />;
+}

package/dist/templates/demo/onboarding/onboarding-images.tsx

@@ -0,0 +1,70 @@
+import { Image } from '@/components/ui/image';
+import { Onboarding, OnboardingStep } from '@/components/ui/onboarding';
+import React from 'react';
+
+const WelcomeImage = () => (
+  <Image
+    source={{
+      uri: 'https://images.unsplash.com/photo-1637858868799-7f26a0640eb6?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    }}
+    width={300}
+    aspectRatio={1}
+    variant='circle'
+  />
+);
+
+const FeaturesImage = () => (
+  <Image
+    source={{
+      uri: 'https://images.unsplash.com/photo-1644190022446-04b99df7259a?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    }}
+    width={300}
+    aspectRatio={1}
+  />
+);
+
+const StartImage = () => (
+  <Image
+    source={{
+      uri: 'https://images.unsplash.com/photo-1575737698350-52e966f924d4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    }}
+    width={420}
+    aspectRatio={9 / 14}
+  />
+);
+
+export function OnboardingImages() {
+  const steps: OnboardingStep[] = [
+    {
+      id: '1',
+      title: 'Welcome to the Team',
+      description:
+        'Join thousands of users who have already discovered the power of our platform.',
+      image: <WelcomeImage />,
+    },
+    {
+      id: '2',
+      title: 'Powerful Features',
+      description:
+        'Access advanced tools and features that will help you achieve your goals faster.',
+      image: <FeaturesImage />,
+    },
+    {
+      id: '3',
+      title: 'Ready to Launch',
+      description:
+        "Everything is set up and ready. Let's start building something amazing together!",
+      image: <StartImage />,
+    },
+  ];
+
+  return (
+    <Onboarding
+      steps={steps}
+      onComplete={() => console.log('Onboarding with images completed!')}
+      onSkip={() => console.log('Onboarding with images skipped!')}
+      primaryButtonText="Let's Go"
+      nextButtonText='Continue'
+    />
+  );
+}

package/dist/templates/demo/onboarding/onboarding-no-skip.tsx

@@ -0,0 +1,62 @@
+import { Onboarding, OnboardingStep } from '@/components/ui/onboarding';
+import { Feather } from '@expo/vector-icons';
+import React from 'react';
+import { View } from 'react-native';
+
+const InfoIcon = ({ name, color }: { name: string; color: string }) => (
+  <View
+    style={{
+      padding: 20,
+      backgroundColor: `${color}20`,
+      borderRadius: 60,
+      borderWidth: 2,
+      borderColor: color,
+    }}
+  >
+    <Feather name={name as any} size={60} color={color} />
+  </View>
+);
+
+export function OnboardingNoSkip() {
+  const steps: OnboardingStep[] = [
+    {
+      id: '1',
+      title: 'Setup Your Profile',
+      description:
+        "Let's start by setting up your profile. This helps us personalize your experience.",
+      icon: <InfoIcon name='user' color='#8b5cf6' />,
+    },
+    {
+      id: '2',
+      title: 'Choose Preferences',
+      description:
+        'Select your preferences to customize the app according to your needs and workflow.',
+      icon: <InfoIcon name='settings' color='#06b6d4' />,
+    },
+    {
+      id: '3',
+      title: 'Enable Notifications',
+      description:
+        'Stay updated with important notifications. You can always change these settings later.',
+      icon: <InfoIcon name='bell' color='#f59e0b' />,
+    },
+    {
+      id: '4',
+      title: 'All Set!',
+      description:
+        "Congratulations! Your account is now ready. Let's dive in and explore the features.",
+      icon: <InfoIcon name='check-circle' color='#10b981' />,
+    },
+  ];
+
+  return (
+    <Onboarding
+      steps={steps}
+      onComplete={() => console.log('Required onboarding completed!')}
+      showSkip={false}
+      primaryButtonText='Complete Setup'
+      nextButtonText='Continue'
+      backButtonText='Previous'
+    />
+  );
+}