kynjal-cli 2.0.6

package/dist/templates/demo/parallax-scrollview/parallax-scrollview-profile.tsx

@@ -0,0 +1,144 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { ParallaxScrollView } from '@/components/ui/parallax-scrollview';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { Image } from 'expo-image';
+import { LinearGradient } from 'expo-linear-gradient';
+import React from 'react';
+
+export function ParallaxScrollViewProfile() {
+  return (
+    <ParallaxScrollView
+      headerHeight={320}
+      headerImage={
+        <View style={{ position: 'relative', width: '100%', height: '100%' }}>
+          <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',
+            }}
+            style={{ width: '100%', height: '100%' }}
+            contentFit='cover'
+          />
+          <LinearGradient
+            colors={['transparent', 'black']}
+            style={{
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              right: 0,
+              height: '80%',
+            }}
+          />
+          <View
+            style={{
+              position: 'absolute',
+              bottom: 20,
+              left: 0,
+              right: 0,
+              alignItems: 'center',
+              gap: 12,
+            }}
+          >
+            <Avatar size={90}>
+              <AvatarImage
+                source={{
+                  uri: 'https://avatars.githubusercontent.com/u/99088394?v=4',
+                }}
+              />
+              <AvatarFallback>JD</AvatarFallback>
+            </Avatar>
+            <View style={{ alignItems: 'center' }}>
+              <Text
+                style={{
+                  color: 'white',
+                  fontSize: 24,
+                  fontWeight: 'bold',
+                  textShadowColor: 'rgba(0,0,0,0.5)',
+                  textShadowOffset: { width: 1, height: 1 },
+                  textShadowRadius: 2,
+                }}
+              >
+                John Doe
+              </Text>
+              <Text
+                style={{
+                  color: '#e0e0e0',
+                  fontSize: 16,
+                  textShadowColor: 'rgba(0,0,0,0.5)',
+                  textShadowOffset: { width: 1, height: 1 },
+                  textShadowRadius: 2,
+                }}
+              >
+                Software Engineer
+              </Text>
+            </View>
+          </View>
+        </View>
+      }
+    >
+      <View style={{ gap: 20 }}>
+        <View style={{ gap: 8 }}>
+          <Text variant='title'>About</Text>
+          <Text>
+            Passionate software engineer with 5+ years of experience in mobile
+            and web development. Specialized in React Native, TypeScript, and
+            modern UI frameworks.
+          </Text>
+        </View>
+
+        <View style={{ gap: 8 }}>
+          <Text variant='title'>Skills</Text>
+          <View
+            style={{
+              flexDirection: 'row',
+              flexWrap: 'wrap',
+              gap: 8,
+            }}
+          >
+            {[
+              'React Native',
+              'TypeScript',
+              'Node.js',
+              'GraphQL',
+              'MongoDB',
+            ].map((skill) => (
+              <Badge variant='success' key={skill}>
+                {skill}
+              </Badge>
+            ))}
+          </View>
+        </View>
+
+        <View style={{ gap: 8 }}>
+          <Text variant='title'>Experience</Text>
+          <View style={{ gap: 12 }}>
+            <View>
+              <Text variant='subtitle'>Senior Mobile Developer</Text>
+              <Text variant='caption'>Tech Corp • 2022 - Present</Text>
+              <Text style={{ marginTop: 4 }}>
+                Leading mobile development team and architecting scalable React
+                Native applications.
+              </Text>
+            </View>
+            <View>
+              <Text variant='subtitle'>Frontend Developer</Text>
+              <Text variant='caption'>StartupXYZ • 2020 - 2022</Text>
+              <Text style={{ marginTop: 4 }}>
+                Built responsive web applications using React and modern
+                frontend technologies.
+              </Text>
+            </View>
+          </View>
+        </View>
+
+        <View style={{ gap: 8 }}>
+          <Text variant='title'>Contact</Text>
+          <Text>📧 john.doe@example.com</Text>
+          <Text>🌐 johndoe.dev</Text>
+          <Text>📱 LinkedIn: @johndoe</Text>
+        </View>
+      </View>
+    </ParallaxScrollView>
+  );
+}

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

@@ -0,0 +1,82 @@
+import { Picker } from '@/components/ui/picker';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function PickerAdvanced() {
+  const [plan, setPlan] = useState<string>('');
+
+  const sections = [
+    {
+      title: 'Individual Plans',
+      options: [
+        {
+          label: 'Basic',
+          value: 'basic',
+          description: '$9/month - Perfect for individuals',
+        },
+        {
+          label: 'Pro',
+          value: 'pro',
+          description: '$19/month - Advanced features included',
+        },
+      ],
+    },
+    {
+      title: 'Team Plans',
+      options: [
+        {
+          label: 'Team',
+          value: 'team',
+          description: '$39/month - Collaboration tools',
+        },
+        {
+          label: 'Enterprise',
+          value: 'enterprise',
+          description: '$99/month - Full enterprise features',
+        },
+        {
+          label: 'Custom',
+          value: 'custom',
+          description: 'Contact us for pricing',
+          disabled: true,
+        },
+      ],
+    },
+  ];
+
+  return (
+    <View style={{ gap: 16 }}>
+      <Picker
+        sections={sections}
+        value={plan}
+        onValueChange={setPlan}
+        placeholder='Select a plan...'
+        modalTitle='Subscription Plans'
+        searchable
+        searchPlaceholder='Search plans...'
+        variant='outline'
+      />
+
+      {plan && (
+        <View
+          style={{
+            padding: 12,
+            backgroundColor: '#f0f9ff',
+            borderRadius: 8,
+            borderWidth: 1,
+            borderColor: '#0284c7',
+          }}
+        >
+          <Text style={{ color: '#0284c7', fontWeight: '500' }}>
+            Selected:{' '}
+            {
+              sections.flatMap((s) => s.options).find((o) => o.value === plan)
+                ?.label
+            }
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+}

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

@@ -0,0 +1,22 @@
+import { Picker } from '@/components/ui/picker';
+import React, { useState } from 'react';
+
+export function PickerDemo() {
+  const [value, setValue] = useState<string>('');
+
+  const options = [
+    { label: 'Apple', value: 'apple' },
+    { label: 'Banana', value: 'banana' },
+    { label: 'Orange', value: 'orange' },
+    { label: 'Grape', value: 'grape' },
+  ];
+
+  return (
+    <Picker
+      options={options}
+      value={value}
+      onValueChange={setValue}
+      placeholder='Select a fruit...'
+    />
+  );
+}

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

@@ -0,0 +1,81 @@
+import { Button } from '@/components/ui/button';
+import { Picker } from '@/components/ui/picker';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function PickerForm() {
+  const [category, setCategory] = useState<string>('');
+  const [priority, setPriority] = useState<string>('');
+  const [errors, setErrors] = useState<{
+    category?: string;
+    priority?: string;
+  }>({});
+
+  const categories = [
+    { label: 'Bug Report', value: 'bug' },
+    { label: 'Feature Request', value: 'feature' },
+    { label: 'General Inquiry', value: 'general' },
+  ];
+
+  const priorities = [
+    { label: 'Low', value: 'low' },
+    { label: 'Medium', value: 'medium' },
+    { label: 'High', value: 'high' },
+    { label: 'Critical', value: 'critical' },
+  ];
+
+  const handleSubmit = () => {
+    const newErrors: { category?: string; priority?: string } = {};
+
+    if (!category) {
+      newErrors.category = 'Please select a category';
+    }
+
+    if (!priority) {
+      newErrors.priority = 'Please select a priority';
+    }
+
+    setErrors(newErrors);
+
+    if (Object.keys(newErrors).length === 0) {
+      // Form is valid
+      console.log('Form submitted:', { category, priority });
+    }
+  };
+
+  return (
+    <View style={{ gap: 16 }}>
+      <Picker
+        options={categories}
+        value={category}
+        onValueChange={(value) => {
+          setCategory(value);
+          if (errors.category) {
+            setErrors((prev) => ({ ...prev, category: undefined }));
+          }
+        }}
+        placeholder='Select category...'
+        label='Category'
+        error={errors.category}
+        variant='outline'
+      />
+
+      <Picker
+        options={priorities}
+        value={priority}
+        onValueChange={(value) => {
+          setPriority(value);
+          if (errors.priority) {
+            setErrors((prev) => ({ ...prev, priority: undefined }));
+          }
+        }}
+        placeholder='Select priority...'
+        label='Priority'
+        error={errors.priority}
+        variant='outline'
+      />
+
+      <Button onPress={handleSubmit}>Submit Ticket</Button>
+    </View>
+  );
+}

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

@@ -0,0 +1,26 @@
+import { Picker } from '@/components/ui/picker';
+import React, { useState } from 'react';
+
+export function PickerMultiple() {
+  const [values, setValues] = useState<string[]>([]);
+
+  const options = [
+    { label: 'JavaScript', value: 'js' },
+    { label: 'TypeScript', value: 'ts' },
+    { label: 'Python', value: 'py' },
+    { label: 'Java', value: 'java' },
+    { label: 'C++', value: 'cpp' },
+    { label: 'Rust', value: 'rust' },
+  ];
+
+  return (
+    <Picker
+      options={options}
+      values={values}
+      onValuesChange={setValues}
+      placeholder='Select languages...'
+      multiple
+      modalTitle='Programming Languages'
+    />
+  );
+}

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

@@ -0,0 +1,31 @@
+import { Picker } from '@/components/ui/picker';
+import React, { useState } from 'react';
+
+export function PickerSearchable() {
+  const [value, setValue] = useState<string>('');
+
+  const options = [
+    { label: 'United States', value: 'us' },
+    { label: 'Canada', value: 'ca' },
+    { label: 'United Kingdom', value: 'uk' },
+    { label: 'Germany', value: 'de' },
+    { label: 'France', value: 'fr' },
+    { label: 'Japan', value: 'jp' },
+    { label: 'Australia', value: 'au' },
+    { label: 'Brazil', value: 'br' },
+    { label: 'India', value: 'in' },
+    { label: 'China', value: 'cn' },
+  ];
+
+  return (
+    <Picker
+      options={options}
+      value={value}
+      onValueChange={setValue}
+      placeholder='Select a country...'
+      searchable
+      searchPlaceholder='Search countries...'
+      modalTitle='Countries'
+    />
+  );
+}

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

@@ -0,0 +1,35 @@
+import { Picker } from '@/components/ui/picker';
+import React, { useState } from 'react';
+
+export function PickerSections() {
+  const [value, setValue] = useState<string>('');
+
+  const sections = [
+    {
+      title: 'Fruits',
+      options: [
+        { label: 'Apple', value: 'apple' },
+        { label: 'Banana', value: 'banana' },
+        { label: 'Orange', value: 'orange' },
+      ],
+    },
+    {
+      title: 'Vegetables',
+      options: [
+        { label: 'Carrot', value: 'carrot' },
+        { label: 'Broccoli', value: 'broccoli' },
+        { label: 'Spinach', value: 'spinach' },
+      ],
+    },
+  ];
+
+  return (
+    <Picker
+      sections={sections}
+      value={value}
+      onValueChange={setValue}
+      placeholder='Select an item...'
+      modalTitle='Choose Food'
+    />
+  );
+}

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

@@ -0,0 +1,63 @@
+import { Picker } from '@/components/ui/picker';
+import { MapPin, Settings, User } from 'lucide-react-native';
+import React, { useState } from 'react';
+
+export function PickerStyled() {
+  const [location, setLocation] = useState<string>('');
+  const [user, setUser] = useState<string>('');
+  const [setting, setSetting] = useState<string>('');
+
+  const locations = [
+    { label: 'New York', value: 'ny' },
+    { label: 'Los Angeles', value: 'la' },
+    { label: 'Chicago', value: 'chi' },
+  ];
+
+  const users = [
+    { label: 'John Doe', value: 'john' },
+    { label: 'Jane Smith', value: 'jane' },
+    { label: 'Bob Johnson', value: 'bob' },
+  ];
+
+  const settings = [
+    { label: 'Notifications', value: 'notifications' },
+    { label: 'Privacy', value: 'privacy' },
+    { label: 'Account', value: 'account' },
+  ];
+
+  return (
+    <>
+      <Picker
+        options={locations}
+        value={location}
+        onValueChange={setLocation}
+        placeholder='Select location...'
+        icon={MapPin}
+        label='Location'
+        variant='outline'
+      />
+
+      <Picker
+        options={users}
+        value={user}
+        onValueChange={setUser}
+        placeholder='Select user...'
+        icon={User}
+        label='User'
+        variant='filled'
+        style={{ marginTop: 16 }}
+      />
+
+      <Picker
+        options={settings}
+        value={setting}
+        onValueChange={setSetting}
+        placeholder='Select setting...'
+        icon={Settings}
+        label='Settings'
+        variant='group'
+        style={{ marginTop: 16 }}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,60 @@
+import { Picker } from '@/components/ui/picker';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function PickerVariants() {
+  const [outlineValue, setOutlineValue] = useState<string>('');
+  const [filledValue, setFilledValue] = useState<string>('');
+  const [groupValue, setGroupValue] = useState<string>('');
+
+  const options = [
+    { label: 'Small', value: 'sm' },
+    { label: 'Medium', value: 'md' },
+    { label: 'Large', value: 'lg' },
+    { label: 'Extra Large', value: 'xl' },
+  ];
+
+  return (
+    <View style={{ gap: 20 }}>
+      <View>
+        <Text variant='caption' style={{ marginBottom: 8 }}>
+          Outline Variant
+        </Text>
+        <Picker
+          options={options}
+          value={outlineValue}
+          onValueChange={setOutlineValue}
+          placeholder='Select size...'
+          variant='outline'
+        />
+      </View>
+
+      <View>
+        <Text variant='caption' style={{ marginBottom: 8 }}>
+          Filled Variant
+        </Text>
+        <Picker
+          options={options}
+          value={filledValue}
+          onValueChange={setFilledValue}
+          placeholder='Select size...'
+          variant='filled'
+        />
+      </View>
+
+      <View>
+        <Text variant='caption' style={{ marginBottom: 8 }}>
+          Group Variant
+        </Text>
+        <Picker
+          options={options}
+          value={groupValue}
+          onValueChange={setGroupValue}
+          placeholder='Select size...'
+          variant='group'
+        />
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/popover/popover-alignment.tsx

@@ -0,0 +1,92 @@
+import { Button } from '@/components/ui/button';
+import {
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function PopoverAlignment() {
+  return (
+    <View style={{ gap: 24, alignItems: 'center' }}>
+      <View style={{ gap: 16 }}>
+        <Text variant='title'>Bottom Side Alignment</Text>
+        <View style={{ flexDirection: 'row', gap: 16 }}>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button>Start</Button>
+            </PopoverTrigger>
+            <PopoverContent side='bottom' align='start'>
+              <PopoverBody>
+                <Text>Aligned to start (left)</Text>
+              </PopoverBody>
+            </PopoverContent>
+          </Popover>
+
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button>Center</Button>
+            </PopoverTrigger>
+            <PopoverContent side='bottom' align='center'>
+              <PopoverBody>
+                <Text>Aligned to center</Text>
+              </PopoverBody>
+            </PopoverContent>
+          </Popover>
+
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button>End</Button>
+            </PopoverTrigger>
+            <PopoverContent side='bottom' align='end'>
+              <PopoverBody>
+                <Text>Aligned to end (right)</Text>
+              </PopoverBody>
+            </PopoverContent>
+          </Popover>
+        </View>
+      </View>
+
+      <View style={{ gap: 16 }}>
+        <Text variant='title'>Right Side Alignment</Text>
+        <View style={{ gap: 16 }}>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button>Start</Button>
+            </PopoverTrigger>
+            <PopoverContent side='right' align='start'>
+              <PopoverBody>
+                <Text>Aligned to start (top)</Text>
+              </PopoverBody>
+            </PopoverContent>
+          </Popover>
+
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button>Center</Button>
+            </PopoverTrigger>
+            <PopoverContent side='right' align='center'>
+              <PopoverBody>
+                <Text>Aligned to center</Text>
+              </PopoverBody>
+            </PopoverContent>
+          </Popover>
+
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button>End</Button>
+            </PopoverTrigger>
+            <PopoverContent side='right' align='end'>
+              <PopoverBody>
+                <Text>Aligned to end (bottom)</Text>
+              </PopoverBody>
+            </PopoverContent>
+          </Popover>
+        </View>
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/popover/popover-controlled.tsx

@@ -0,0 +1,53 @@
+import { Button } from '@/components/ui/button';
+import {
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function PopoverControlled() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <View style={{ gap: 16, alignItems: 'center' }}>
+      <View style={{ flexDirection: 'row', gap: 12 }}>
+        <Button
+          variant={isOpen ? 'default' : 'outline'}
+          onPress={() => setIsOpen(true)}
+        >
+          Open
+        </Button>
+        <Button
+          variant={!isOpen ? 'default' : 'outline'}
+          onPress={() => setIsOpen(false)}
+        >
+          Close
+        </Button>
+      </View>
+
+      <Text>Status: {isOpen ? 'Open' : 'Closed'}</Text>
+
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverTrigger asChild>
+          <Button>Controlled Popover</Button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <PopoverHeader>
+            <Text variant='title'>Controlled Popover</Text>
+          </PopoverHeader>
+          <PopoverBody>
+            <Text>
+              This popover's state is controlled externally. You can open and
+              close it using the buttons above or by clicking the trigger.
+            </Text>
+          </PopoverBody>
+        </PopoverContent>
+      </Popover>
+    </View>
+  );
+}