kynjal-cli 2.0.6

package/dist/templates/demo/image/image-error.tsx

@@ -0,0 +1,50 @@
+import { Image } from '@/components/ui/image';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function ImageError() {
+  return (
+    <View style={{ gap: 16 }}>
+      <View style={{ gap: 8 }}>
+        <Text variant='caption'>Default Error Fallback</Text>
+        <Image
+          source={{ uri: 'https://invalid-url-that-will-fail.com/image.jpg' }}
+          width={200}
+          height={150}
+        />
+      </View>
+
+      <View style={{ gap: 8 }}>
+        <Text variant='caption'>Custom Error Message</Text>
+        <Image
+          source={{ uri: 'https://another-invalid-url.com/image.jpg' }}
+          width={200}
+          height={150}
+          errorFallbackText='Oops! Image not found'
+        />
+      </View>
+
+      <View style={{ gap: 8 }}>
+        <Text variant='caption'>No Error Fallback</Text>
+        <Image
+          source={{ uri: 'https://yet-another-invalid-url.com/image.jpg' }}
+          width={200}
+          height={150}
+          showErrorFallback={false}
+        />
+      </View>
+
+      <View style={{ gap: 8 }}>
+        <Text variant='caption'>Circle Variant with Error</Text>
+        <Image
+          source={{ uri: 'https://broken-image-url.com/avatar.jpg' }}
+          width={100}
+          height={100}
+          variant='circle'
+          errorFallbackText='No Avatar'
+        />
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/image/image-gallery.tsx

@@ -0,0 +1,65 @@
+import { Image } from '@/components/ui/image';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+import { ScrollView } from 'react-native';
+
+export function ImageGallery() {
+  const images = [
+    'https://picsum.photos/300/200?random=10',
+    'https://picsum.photos/300/200?random=11',
+    'https://picsum.photos/300/200?random=12',
+    'https://picsum.photos/300/200?random=13',
+    'https://picsum.photos/300/200?random=14',
+    'https://picsum.photos/300/200?random=15',
+  ];
+
+  return (
+    <View style={{ gap: 16 }}>
+      <Text variant='caption'>Grid Gallery</Text>
+      <View
+        style={{
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          gap: 8,
+          justifyContent: 'space-between',
+        }}
+      >
+        {images.slice(0, 4).map((uri, index) => (
+          <Image
+            key={index}
+            source={{ uri }}
+            width={90}
+            height={90}
+            style={{ borderRadius: 8 }}
+          />
+        ))}
+      </View>
+
+      <Text variant='caption'>Horizontal Scroll Gallery</Text>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ gap: 12 }}
+      >
+        {images.map((uri, index) => (
+          <Image
+            key={index}
+            source={{ uri }}
+            width={150}
+            height={100}
+            style={{ borderRadius: 8 }}
+          />
+        ))}
+      </ScrollView>
+
+      <Text variant='caption'>Featured Image</Text>
+      <Image
+        source={{ uri: 'https://picsum.photos/800/400?random=99' }}
+        width='100%'
+        aspectRatio={2}
+        style={{ borderRadius: 12 }}
+      />
+    </View>
+  );
+}

package/dist/templates/demo/image/image-loading.tsx

@@ -0,0 +1,50 @@
+import { Image } from '@/components/ui/image';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function ImageLoading() {
+  return (
+    <View style={{ gap: 16 }}>
+      <View style={{ gap: 8 }}>
+        <Text variant='caption'>Small Loading Indicator</Text>
+        <Image
+          source={{ uri: 'https://picsum.photos/400/300?random=1' }}
+          width={200}
+          height={150}
+          loadingIndicatorSize='small'
+        />
+      </View>
+
+      <View style={{ gap: 8 }}>
+        <Text variant='caption'>Large Loading Indicator</Text>
+        <Image
+          source={{ uri: 'https://picsum.photos/400/300?random=2' }}
+          width={200}
+          height={150}
+          loadingIndicatorSize='large'
+        />
+      </View>
+
+      <View style={{ gap: 8 }}>
+        <Text variant='caption'>Custom Loading Color</Text>
+        <Image
+          source={{ uri: 'https://picsum.photos/400/300?random=3' }}
+          width={200}
+          height={150}
+          loadingIndicatorColor='#FF6B6B'
+        />
+      </View>
+
+      <View style={{ gap: 8 }}>
+        <Text variant='caption'>No Loading Indicator</Text>
+        <Image
+          source={{ uri: 'https://picsum.photos/400/300?random=4' }}
+          width={200}
+          height={150}
+          showLoadingIndicator={false}
+        />
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/image/image-responsive.tsx

@@ -0,0 +1,53 @@
+import { Image } from '@/components/ui/image';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function ImageResponsive() {
+  return (
+    <View style={{ gap: 16 }}>
+      <View style={{ gap: 8 }}>
+        <Text variant='caption'>Full Width (Container Responsive)</Text>
+
+        <Image
+          source={{ uri: 'https://picsum.photos/800/300?random=20' }}
+          aspectRatio={8 / 3}
+        />
+      </View>
+
+      <View style={{ gap: 8 }}>
+        <Text variant='caption'>Percentage Width</Text>
+        <View style={{ flexDirection: 'row', gap: 8 }}>
+          <Image
+            source={{ uri: 'https://picsum.photos/400/300?random=21' }}
+            width='48%'
+            aspectRatio={4 / 3}
+          />
+          <Image
+            source={{ uri: 'https://picsum.photos/400/300?random=22' }}
+            width='48%'
+            aspectRatio={4 / 3}
+          />
+        </View>
+      </View>
+
+      <View style={{ gap: 8 }}>
+        <Text variant='caption'>Flex Layout</Text>
+        <View style={{ flexDirection: 'row', gap: 8 }}>
+          <View style={{ flex: 2 }}>
+            <Image
+              source={{ uri: 'https://picsum.photos/600/400?random=23' }}
+              aspectRatio={3 / 2}
+            />
+          </View>
+          <View style={{ flex: 1 }}>
+            <Image
+              source={{ uri: 'https://picsum.photos/300/400?random=24' }}
+              aspectRatio={3 / 4}
+            />
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,54 @@
+import { Image } from '@/components/ui/image';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function ImageSizes() {
+  return (
+    <View style={{ gap: 16 }}>
+      <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+        <Image
+          source={{ uri: 'https://picsum.photos/150/150' }}
+          width={50}
+          height={50}
+        />
+        <Image
+          source={{ uri: 'https://picsum.photos/151/151' }}
+          width={75}
+          height={75}
+        />
+        <Image
+          source={{ uri: 'https://picsum.photos/152/152' }}
+          width={100}
+          height={100}
+        />
+        <Image
+          source={{ uri: 'https://picsum.photos/153/153' }}
+          width={125}
+          height={125}
+        />
+      </View>
+
+      <View style={{ gap: 8 }}>
+        <Text variant='caption'>Aspect Ratio Examples</Text>
+        <View style={{ flexDirection: 'row', gap: 12 }}>
+          <Image
+            source={{ uri: 'https://picsum.photos/400/300' }}
+            width={120}
+            aspectRatio={4 / 3}
+          />
+          <Image
+            source={{ uri: 'https://picsum.photos/300/400' }}
+            width={120}
+            aspectRatio={3 / 4}
+          />
+          <Image
+            source={{ uri: 'https://picsum.photos/500/300' }}
+            width={120}
+            aspectRatio={16 / 9}
+          />
+        </View>
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,46 @@
+import { Image } from '@/components/ui/image';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function ImageVariants() {
+  return (
+    <View style={{ gap: 16 }}>
+      <View style={{ alignItems: 'center', gap: 8 }}>
+        <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',
+          }}
+          variant='rounded'
+          width={200}
+          aspectRatio={1}
+        />
+        <Text variant='caption'>Rounded</Text>
+      </View>
+
+      <View style={{ alignItems: 'center', gap: 8 }}>
+        <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={200}
+          height={200}
+          variant='circle'
+        />
+        <Text variant='caption'>Circle</Text>
+      </View>
+
+      <View style={{ alignItems: 'center', gap: 8 }}>
+        <Image
+          source={{
+            uri: 'https://images.unsplash.com/photo-1667830867718-da7f5a45d20d?q=80&w=1064&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+          }}
+          width={200}
+          height={200}
+          variant='default'
+        />
+        <Text variant='caption'>Default</Text>
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,9 @@
+import { Input } from '@/components/ui/input';
+import { User } from 'lucide-react-native';
+import React from 'react';
+
+export function InputDemo() {
+  return (
+    <Input label='Username' placeholder='Enter your username' icon={User} />
+  );
+}

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

@@ -0,0 +1,18 @@
+import { Input } from '@/components/ui/input';
+import { View } from '@/components/ui/view';
+import { Mail, User } from 'lucide-react-native';
+import React from 'react';
+
+export function InputDisabled() {
+  return (
+    <View style={{ gap: 16 }}>
+      <Input
+        label='Username'
+        placeholder='This input is disabled'
+        icon={User}
+        disabled
+      />
+      <Input label='Email' value='john@example.com' icon={Mail} disabled />
+    </View>
+  );
+}

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

@@ -0,0 +1,159 @@
+import { Button } from '@/components/ui/button';
+import { GroupedInput, GroupedInputItem, Input } from '@/components/ui/input';
+import { View } from '@/components/ui/view';
+import {
+  Calendar,
+  CreditCard,
+  Lock,
+  Mail,
+  Phone,
+  User,
+} from 'lucide-react-native';
+import React, { useState } from 'react';
+
+export function InputForm() {
+  const [formData, setFormData] = useState({
+    firstName: '',
+    lastName: '',
+    email: '',
+    password: '',
+    confirmPassword: '',
+    phone: '',
+    cardNumber: '',
+    expiryDate: '',
+    cvv: '',
+  });
+
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const validateForm = () => {
+    const newErrors: Record<string, string> = {};
+
+    if (!formData.firstName) newErrors.firstName = 'First name is required';
+    if (!formData.email) newErrors.email = 'Email is required';
+    else if (!formData.email.includes('@'))
+      newErrors.email = 'Invalid email format';
+    if (!formData.password) newErrors.password = 'Password is required';
+    else if (formData.password.length < 6)
+      newErrors.password = 'Password must be at least 6 characters';
+    if (formData.password !== formData.confirmPassword)
+      newErrors.confirmPassword = 'Passwords do not match';
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = () => {
+    if (validateForm()) {
+      alert('Form submitted successfully!');
+    }
+  };
+
+  return (
+    <View style={{ gap: 24 }}>
+      <GroupedInput title='Account Information'>
+        <GroupedInputItem
+          label='First Name'
+          placeholder='John'
+          icon={User}
+          value={formData.firstName}
+          onChangeText={(text) =>
+            setFormData((prev) => ({ ...prev, firstName: text }))
+          }
+          error={errors.firstName}
+        />
+        <GroupedInputItem
+          label='Last Name'
+          placeholder='Doe'
+          icon={User}
+          value={formData.lastName}
+          onChangeText={(text) =>
+            setFormData((prev) => ({ ...prev, lastName: text }))
+          }
+        />
+        <GroupedInputItem
+          label='Email'
+          placeholder='john@example.com'
+          icon={Mail}
+          value={formData.email}
+          onChangeText={(text) =>
+            setFormData((prev) => ({ ...prev, email: text }))
+          }
+          error={errors.email}
+          keyboardType='email-address'
+        />
+        <GroupedInputItem
+          label='Phone'
+          placeholder='+1 (555) 123-4567'
+          icon={Phone}
+          value={formData.phone}
+          onChangeText={(text) =>
+            setFormData((prev) => ({ ...prev, phone: text }))
+          }
+          keyboardType='phone-pad'
+        />
+      </GroupedInput>
+
+      <View style={{ gap: 16 }}>
+        <Input
+          label='Password'
+          placeholder='Create password'
+          icon={Lock}
+          value={formData.password}
+          onChangeText={(text) =>
+            setFormData((prev) => ({ ...prev, password: text }))
+          }
+          error={errors.password}
+          secureTextEntry
+          variant='outline'
+        />
+        <Input
+          label='Confirm Password'
+          placeholder='Confirm password'
+          icon={Lock}
+          value={formData.confirmPassword}
+          onChangeText={(text) =>
+            setFormData((prev) => ({ ...prev, confirmPassword: text }))
+          }
+          error={errors.confirmPassword}
+          secureTextEntry
+          variant='outline'
+        />
+      </View>
+
+      <GroupedInput title='Payment Information'>
+        <GroupedInputItem
+          label='Card Number'
+          placeholder='1234 5678 9012 3456'
+          icon={CreditCard}
+          value={formData.cardNumber}
+          onChangeText={(text) =>
+            setFormData((prev) => ({ ...prev, cardNumber: text }))
+          }
+          keyboardType='numeric'
+        />
+        <GroupedInputItem
+          label='Expiry Date'
+          placeholder='MM/YY'
+          icon={Calendar}
+          value={formData.expiryDate}
+          onChangeText={(text) =>
+            setFormData((prev) => ({ ...prev, expiryDate: text }))
+          }
+          keyboardType='numeric'
+        />
+        <GroupedInputItem
+          label='CVV'
+          placeholder='123'
+          value={formData.cvv}
+          onChangeText={(text) =>
+            setFormData((prev) => ({ ...prev, cvv: text }))
+          }
+          keyboardType='numeric'
+        />
+      </GroupedInput>
+
+      <Button onPress={handleSubmit}>Submit Form</Button>
+    </View>
+  );
+}

package/dist/templates/demo/input/input-grouped.tsx

@@ -0,0 +1,28 @@
+import { GroupedInput, GroupedInputItem } from '@/components/ui/input';
+import { Mail, MapPin, Phone, User } from 'lucide-react-native';
+import React from 'react';
+
+export function InputGrouped() {
+  return (
+    <GroupedInput title='Personal Information'>
+      <GroupedInputItem label='Name' placeholder='John Doe' icon={User} />
+      <GroupedInputItem
+        label='Email'
+        placeholder='john@example.com'
+        icon={Mail}
+        keyboardType='email-address'
+      />
+      <GroupedInputItem
+        label='Phone'
+        placeholder='+1 (555) 123-4567'
+        icon={Phone}
+        keyboardType='phone-pad'
+      />
+      <GroupedInputItem
+        label='Address'
+        placeholder='123 Main St'
+        icon={MapPin}
+      />
+    </GroupedInput>
+  );
+}

package/dist/templates/demo/input/input-icons.tsx

@@ -0,0 +1,30 @@
+import { Input } from '@/components/ui/input';
+import { View } from '@/components/ui/view';
+import { Lock, Mail, Phone, Search } from 'lucide-react-native';
+import React from 'react';
+
+export function InputIcons() {
+  return (
+    <View style={{ gap: 16 }}>
+      <Input
+        label='Email'
+        placeholder='john@example.com'
+        icon={Mail}
+        keyboardType='email-address'
+      />
+      <Input
+        label='Password'
+        placeholder='Enter password'
+        icon={Lock}
+        secureTextEntry
+      />
+      <Input label='Search' placeholder='Search anything...' icon={Search} />
+      <Input
+        label='Phone'
+        placeholder='+1 (555) 123-4567'
+        icon={Phone}
+        keyboardType='phone-pad'
+      />
+    </View>
+  );
+}

package/dist/templates/demo/input/input-right-components.tsx

@@ -0,0 +1,65 @@
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import { Copy, Eye, EyeOff, Search } from 'lucide-react-native';
+import React, { useState } from 'react';
+import { Pressable } from 'react-native';
+
+export function InputRightComponents() {
+  const muted = useColor('mutedForeground');
+
+  const [copied, setCopied] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+
+  const handleCopy = () => {
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <View style={{ gap: 16 }}>
+      <Input
+        label='Search'
+        placeholder='Search with button...'
+        icon={Search}
+        rightComponent={
+          <Button size='icon' variant='secondary'>
+            <Text variant='caption'>Go</Text>
+          </Button>
+        }
+      />
+
+      <Input
+        label='Password'
+        placeholder='Toggle visibility'
+        secureTextEntry={!showPassword}
+        rightComponent={
+          <Pressable onPress={() => setShowPassword(!showPassword)}>
+            {showPassword ? (
+              <EyeOff size={22} color={muted} />
+            ) : (
+              <Eye size={22} color={muted} />
+            )}
+          </Pressable>
+        }
+      />
+
+      <Input
+        label='API Key'
+        placeholder='sk-1234567890abcdef'
+        rightComponent={
+          <Pressable onPress={handleCopy}>
+            <View
+              style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}
+            >
+              <Copy size={18} color={muted} />
+              <Text variant='caption'>{copied ? 'Copied!' : 'Copy'}</Text>
+            </View>
+          </Pressable>
+        }
+      />
+    </View>
+  );
+}

package/dist/templates/demo/input/input-validation.tsx

@@ -0,0 +1,39 @@
+import { Input } from '@/components/ui/input';
+import { View } from '@/components/ui/view';
+import { Lock, Mail } from 'lucide-react-native';
+import React, { useState } from 'react';
+
+export function InputValidation() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const emailError =
+    email && !email.includes('@') ? 'Please enter a valid email address' : '';
+  const passwordError =
+    password && password.length < 6
+      ? 'Password must be at least 6 characters'
+      : '';
+
+  return (
+    <View style={{ gap: 16 }}>
+      <Input
+        label='Email'
+        placeholder='Enter your email'
+        icon={Mail}
+        value={email}
+        onChangeText={setEmail}
+        error={emailError}
+        keyboardType='email-address'
+      />
+      <Input
+        label='Password'
+        placeholder='Enter password'
+        icon={Lock}
+        value={password}
+        onChangeText={setPassword}
+        error={passwordError}
+        secureTextEntry
+      />
+    </View>
+  );
+}