kynjal-cli 2.0.6

package/dist/templates/demo/avoid-keyboard/avoid-keyboard-form.tsx

@@ -0,0 +1,175 @@
+import { AvoidKeyboard } from '@/components/ui/avoid-keyboard';
+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 { Mail, Lock, User, Phone, MessageSquare } from 'lucide-react-native';
+import React, { useState } from 'react';
+import { ScrollView } from 'react-native';
+
+export function AvoidKeyboardForm() {
+  const [formData, setFormData] = useState({
+    first: '',
+    last: '',
+    email: '',
+    phone: '',
+    password: '',
+    confrim: '',
+    message: '',
+  });
+
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const validateForm = () => {
+    const newErrors: Record<string, string> = {};
+
+    if (!formData.first.trim()) {
+      newErrors.first = 'Name is required';
+    }
+
+    if (!formData.email.trim()) {
+      newErrors.email = 'Email is required';
+    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
+      newErrors.email = 'Please enter a valid email';
+    }
+
+    if (!formData.password.trim()) {
+      newErrors.password = 'Password is required';
+    } else if (formData.password.length < 6) {
+      newErrors.password = 'Password must be at least 6 characters';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = () => {
+    if (validateForm()) {
+      // Form is valid
+      console.log('Form submitted:', formData);
+      // Reset form
+      setFormData({
+        first: '',
+        last: '',
+        email: '',
+        phone: '',
+        password: '',
+        confrim: '',
+        message: '',
+      });
+      setErrors({});
+    }
+  };
+
+  const updateField = (field: keyof typeof formData, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    // Clear error when user starts typing
+    if (errors[field]) {
+      setErrors((prev) => ({ ...prev, [field]: '' }));
+    }
+  };
+
+  return (
+    <View style={{ flex: 1 }}>
+      {/* Header */}
+      <View style={{ padding: 20 }}>
+        <Text variant='title' style={{ marginBottom: 8 }}>
+          Registration Form
+        </Text>
+        <Text variant='body' style={{ opacity: 0.7 }}>
+          Fill out the form below. Notice how the keyboard avoidance keeps
+          inputs visible.
+        </Text>
+      </View>
+
+      {/* Form Content */}
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={{ padding: 20, gap: 16 }}
+        keyboardShouldPersistTaps='handled'
+      >
+        <Input
+          label='Frist Name'
+          placeholder='Enter your first name'
+          icon={User}
+          value={formData.first}
+          onChangeText={(value) => updateField('first', value)}
+          error={errors.first}
+        />
+
+        <Input
+          label='Last Name'
+          placeholder='Enter your last name'
+          icon={User}
+          value={formData.last}
+          onChangeText={(value) => updateField('last', value)}
+          error={errors.last}
+        />
+
+        <Input
+          label='Email'
+          placeholder='Enter your email'
+          icon={Mail}
+          value={formData.email}
+          onChangeText={(value) => updateField('email', value)}
+          error={errors.email}
+          keyboardType='email-address'
+          autoCapitalize='none'
+        />
+
+        <Input
+          label='Confirm'
+          placeholder='Confirm your email'
+          icon={Mail}
+          value={formData.email}
+          onChangeText={(value) => updateField('email', value)}
+          error={errors.email}
+          keyboardType='email-address'
+          autoCapitalize='none'
+        />
+
+        <Input
+          label='Phone'
+          placeholder='Enter your phone number'
+          icon={Phone}
+          value={formData.phone}
+          onChangeText={(value) => updateField('phone', value)}
+          error={errors.phone}
+          keyboardType='phone-pad'
+        />
+
+        <Input
+          label='Password'
+          placeholder='Create a password'
+          icon={Lock}
+          value={formData.password}
+          onChangeText={(value) => updateField('password', value)}
+          error={errors.password}
+          secureTextEntry
+        />
+
+        <Input
+          label='Confirm'
+          placeholder='Confirm password'
+          icon={Lock}
+          value={formData.confrim}
+          onChangeText={(value) => updateField('confrim', value)}
+          error={errors.confrim}
+          secureTextEntry
+        />
+
+        <Button onPress={handleSubmit} style={{ marginBottom: 20 }}>
+          Create Account
+        </Button>
+
+        <Text variant='caption' style={{ textAlign: 'center', opacity: 0.6 }}>
+          By creating an account, you agree to our Terms of Service and Privacy
+          Policy.
+        </Text>
+      </ScrollView>
+
+      {/* Keyboard avoidance for the form */}
+      <AvoidKeyboard />
+    </View>
+  );
+}

package/dist/templates/demo/avoid-keyboard/avoid-keyboard-offset.tsx

@@ -0,0 +1,31 @@
+import { AvoidKeyboard } from '@/components/ui/avoid-keyboard';
+import { Input } from '@/components/ui/input';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function AvoidKeyboardOffset() {
+  return (
+    <View style={{ flex: 1, padding: 20 }}>
+      <Text variant='title' style={{ marginBottom: 20 }}>
+        With Extra Offset
+      </Text>
+
+      <Text variant='body' style={{ marginBottom: 30, opacity: 0.7 }}>
+        This example adds 40px of extra spacing above the keyboard for better
+        visual separation.
+      </Text>
+
+      {/* Spacer to push input toward bottom */}
+      <View style={{ flex: 1 }} />
+
+      <Input
+        placeholder='Notice the extra space above keyboard...'
+        label='Message'
+      />
+
+      {/* Add 40px extra spacing above keyboard */}
+      <AvoidKeyboard offset={40} />
+    </View>
+  );
+}

package/dist/templates/demo/avoid-keyboard/avoid-keyboard-playground.tsx

@@ -0,0 +1,252 @@
+import { AvoidKeyboard } from '@/components/ui/avoid-keyboard';
+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 { useKeyboardHeight } from '@/hooks/useKeyboardHeight';
+import { useColor } from '@/hooks/useColor';
+import { Settings, Keyboard, Smartphone } from 'lucide-react-native';
+import React, { useState } from 'react';
+import { ScrollView, Switch } from 'react-native';
+
+export function AvoidKeyboardPlayground() {
+  const [message, setMessage] = useState('');
+  const [offset, setOffset] = useState(20);
+  const [duration, setDuration] = useState(0);
+  const [showStats, setShowStats] = useState(false);
+
+  const card = useColor('card');
+
+  // Get keyboard stats for debugging
+  const { keyboardHeight, isKeyboardVisible, keyboardAnimationDuration } =
+    useKeyboardHeight();
+
+  const presetOffsets = [0, 10, 20, 40, 60];
+  const presetDurations = [0, 100, 250, 500];
+
+  return (
+    <View style={{ flex: 1 }}>
+      {/* Controls */}
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={{ padding: 20 }}
+        keyboardShouldPersistTaps='handled'
+      >
+        {/* Header */}
+        <View
+          style={{
+            padding: 20,
+          }}
+        >
+          <Text variant='title' style={{ marginBottom: 8 }}>
+            AvoidKeyboard Playground
+          </Text>
+          <Text variant='body' style={{ opacity: 0.7 }}>
+            Test different configurations and see real-time keyboard stats
+          </Text>
+        </View>
+
+        {/* Debug Stats Toggle */}
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: 20,
+            padding: 16,
+            backgroundColor: card,
+            borderRadius: 8,
+          }}
+        >
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 8,
+            }}
+          >
+            <Settings size={16} color='#666' />
+            <Text variant='body'>Show Keyboard Stats</Text>
+          </View>
+          <Switch value={showStats} onValueChange={setShowStats} />
+        </View>
+
+        {/* Keyboard Stats */}
+        {showStats && (
+          <View
+            style={{
+              marginBottom: 20,
+              padding: 16,
+              backgroundColor: card,
+              borderRadius: 8,
+            }}
+          >
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                marginBottom: 8,
+                gap: 8,
+              }}
+            >
+              <Keyboard
+                size={16}
+                color={isKeyboardVisible ? '#4CAF50' : '#666'}
+              />
+              <Text variant='subtitle' style={{ fontWeight: '600' }}>
+                Keyboard Status
+              </Text>
+            </View>
+            <Text variant='caption' style={{ marginBottom: 4 }}>
+              Visible: {isKeyboardVisible ? '✅ Yes' : '❌ No'}
+            </Text>
+            <Text variant='caption' style={{ marginBottom: 4 }}>
+              Height: {keyboardHeight}px
+            </Text>
+            <Text variant='caption'>
+              Animation Duration: {keyboardAnimationDuration}ms
+            </Text>
+          </View>
+        )}
+
+        {/* Offset Controls */}
+        <View style={{ marginBottom: 20 }}>
+          <Text
+            variant='subtitle'
+            style={{ marginBottom: 12, fontWeight: '600' }}
+          >
+            Offset Configuration
+          </Text>
+          <Text variant='caption' style={{ marginBottom: 12, opacity: 0.7 }}>
+            Extra space above keyboard: {offset}px
+          </Text>
+
+          <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+            {presetOffsets.map((value) => (
+              <Button
+                key={value}
+                size='sm'
+                variant={offset === value ? 'default' : 'secondary'}
+                onPress={() => setOffset(value)}
+              >
+                {`${value}px`}
+              </Button>
+            ))}
+          </View>
+        </View>
+
+        {/* Duration Controls */}
+        <View style={{ marginBottom: 20 }}>
+          <Text
+            variant='subtitle'
+            style={{ marginBottom: 12, fontWeight: '600' }}
+          >
+            Animation Duration
+          </Text>
+          <Text variant='caption' style={{ marginBottom: 12, opacity: 0.7 }}>
+            Extra animation time: {duration}ms
+          </Text>
+          <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+            {presetDurations.map((value) => (
+              <Button
+                key={value}
+                variant={duration === value ? 'default' : 'secondary'}
+                size='sm'
+                onPress={() => setDuration(value)}
+              >
+                {value === 0 ? 'Default' : `${value}ms`}
+              </Button>
+            ))}
+          </View>
+        </View>
+
+        {/* Usage Examples */}
+        <View style={{ marginBottom: 20 }}>
+          <Text
+            variant='subtitle'
+            style={{ marginBottom: 12, fontWeight: '600' }}
+          >
+            Code Example
+          </Text>
+          <View
+            style={{
+              padding: 16,
+              backgroundColor: card,
+              borderRadius: 8,
+            }}
+          >
+            <Text style={{ fontFamily: 'monospace' }}>
+              {`<AvoidKeyboard${offset > 0 ? ` offset={${offset}}` : ''}${
+                duration > 0 ? ` duration={${duration}}` : ''
+              } />`}
+            </Text>
+          </View>
+        </View>
+
+        {/* Spacer to push test input to bottom */}
+        <View style={{ height: 100 }} />
+      </ScrollView>
+
+      {/* Test Input Area */}
+      <View
+        style={{
+          padding: 20,
+          backgroundColor: card,
+          shadowColor: '#000',
+          shadowOffset: { width: 0, height: -2 },
+          shadowOpacity: 0.1,
+          shadowRadius: 4,
+          elevation: 8,
+        }}
+      >
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginBottom: 12,
+            gap: 8,
+          }}
+        >
+          <Smartphone size={16} color='#666' />
+          <Text variant='subtitle' style={{ fontWeight: '600' }}>
+            Test Input
+          </Text>
+        </View>
+
+        <Input
+          value={message}
+          onChangeText={setMessage}
+          placeholder='Tap here to test keyboard avoidance...'
+          variant='outline'
+          type='textarea'
+          rows={3}
+        />
+
+        <View style={{ flexDirection: 'row', gap: 8, marginTop: 12 }}>
+          <Button
+            variant='secondary'
+            size='sm'
+            onPress={() => setMessage('')}
+            style={{ flex: 1 }}
+          >
+            Clear
+          </Button>
+          <Button
+            size='sm'
+            onPress={() =>
+              setMessage(
+                'This is a test message to see how the keyboard avoidance works with different configurations!'
+              )
+            }
+            style={{ flex: 1 }}
+          >
+            Fill Text
+          </Button>
+        </View>
+      </View>
+
+      {/* The actual AvoidKeyboard component */}
+      <AvoidKeyboard offset={offset} duration={duration} />
+    </View>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { Badge } from '@/components/ui/badge';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function BadgeDemo() {
+  return (
+    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 12 }}>
+      <Badge>Default</Badge>
+      <Badge variant='secondary'>Secondary</Badge>
+      <Badge variant='destructive'>Destructive</Badge>
+      <Badge variant='outline'>Outline</Badge>
+      <Badge variant='success'>Success</Badge>
+    </View>
+  );
+}

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

@@ -0,0 +1,33 @@
+import { Badge } from '@/components/ui/badge';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function BadgeIcons() {
+  return (
+    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 12 }}>
+      <Badge>★ Featured</Badge>
+
+      <Badge variant='success'>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+          <Text style={{ fontSize: 12 }}>✓</Text>
+          <Text>Verified</Text>
+        </View>
+      </Badge>
+
+      <Badge variant='destructive'>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+          <Text style={{ fontSize: 12 }}>⚠</Text>
+          <Text>Alert</Text>
+        </View>
+      </Badge>
+
+      <Badge variant='outline'>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+          <Text style={{ fontSize: 12 }}>🔔</Text>
+          <Text>Notification</Text>
+        </View>
+      </Badge>
+    </View>
+  );
+}

package/dist/templates/demo/badge/badge-interactive.tsx

@@ -0,0 +1,81 @@
+import { Badge } from '@/components/ui/badge';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+import { TouchableOpacity } from 'react-native';
+
+export function BadgeInteractive() {
+  const [tags, setTags] = useState(['React', 'TypeScript', 'Expo', 'Mobile']);
+  const [selectedCategory, setSelectedCategory] = useState('All');
+
+  const categories = ['All', 'Work', 'Personal', 'Important'];
+
+  const removeTag = (tagToRemove: string) => {
+    setTags(tags.filter((tag) => tag !== tagToRemove));
+  };
+
+  return (
+    <View style={{ gap: 20 }}>
+      {/* Dismissible tags */}
+      <View>
+        <Text style={{ marginBottom: 8, fontWeight: '600' }}>
+          Tags (tap to remove):
+        </Text>
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+          {tags.map((tag) => (
+            <TouchableOpacity key={tag} onPress={() => removeTag(tag)}>
+              <Badge variant='secondary'>
+                <View
+                  style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}
+                >
+                  <Text>{tag}</Text>
+                  <Text style={{ fontSize: 14 }}>×</Text>
+                </View>
+              </Badge>
+            </TouchableOpacity>
+          ))}
+        </View>
+      </View>
+
+      {/* Selectable categories */}
+      <View>
+        <Text style={{ marginBottom: 8, fontWeight: '600' }}>Categories:</Text>
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+          {categories.map((category) => (
+            <TouchableOpacity
+              key={category}
+              onPress={() => setSelectedCategory(category)}
+            >
+              <Badge
+                variant={selectedCategory === category ? 'default' : 'outline'}
+                style={{
+                  opacity: selectedCategory === category ? 1 : 0.7,
+                }}
+              >
+                {category}
+              </Badge>
+            </TouchableOpacity>
+          ))}
+        </View>
+      </View>
+
+      {/* Toggle badges */}
+      <View>
+        <Text style={{ marginBottom: 8, fontWeight: '600' }}>
+          Filter Options:
+        </Text>
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+          <TouchableOpacity>
+            <Badge variant='success'>Active</Badge>
+          </TouchableOpacity>
+          <TouchableOpacity>
+            <Badge variant='outline'>Completed</Badge>
+          </TouchableOpacity>
+          <TouchableOpacity>
+            <Badge variant='destructive'>Archived</Badge>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/badge/badge-notifications.tsx

@@ -0,0 +1,96 @@
+import { Badge } from '@/components/ui/badge';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function BadgeNotifications() {
+  return (
+    <View style={{ gap: 16 }}>
+      {/* Small notification counters */}
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <Text>Messages</Text>
+          <Badge
+            style={{
+              minWidth: 20,
+              height: 20,
+              paddingHorizontal: 6,
+              paddingVertical: 2,
+            }}
+            textStyle={{ fontSize: 12 }}
+          >
+            3
+          </Badge>
+        </View>
+
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <Text>Notifications</Text>
+          <Badge
+            variant='destructive'
+            style={{
+              width: 20,
+              height: 20,
+              paddingHorizontal: 0,
+              paddingVertical: 0,
+              borderRadius: 999,
+            }}
+            textStyle={{ fontSize: 12 }}
+          >
+            12
+          </Badge>
+        </View>
+      </View>
+
+      {/* Dot indicators */}
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <Text>Online</Text>
+          <Badge
+            variant='success'
+            style={{
+              width: 8,
+              height: 8,
+              borderRadius: 4,
+              paddingHorizontal: 0,
+              paddingVertical: 0,
+            }}
+          >
+            <View />
+          </Badge>
+        </View>
+
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <Text>Away</Text>
+          <Badge
+            style={{
+              backgroundColor: '#f59e0b',
+              width: 8,
+              height: 8,
+              borderRadius: 4,
+              paddingHorizontal: 0,
+              paddingVertical: 0,
+            }}
+          >
+            <View />
+          </Badge>
+        </View>
+
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <Text>Offline</Text>
+          <Badge
+            variant='outline'
+            style={{
+              width: 8,
+              height: 8,
+              borderRadius: 4,
+              paddingHorizontal: 0,
+              paddingVertical: 0,
+            }}
+          >
+            <View />
+          </Badge>
+        </View>
+      </View>
+    </View>
+  );
+}