kynjal-cli 2.0.6

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

@@ -0,0 +1,13 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import React from 'react';
+
+export function AvatarDemo() {
+  return (
+    <Avatar>
+      <AvatarImage
+        source={{ uri: 'https://avatars.githubusercontent.com/u/99088394?v=4' }}
+      />
+      <AvatarFallback>AB</AvatarFallback>
+    </Avatar>
+  );
+}

package/dist/templates/demo/avatar/avatar-fallback.tsx

@@ -0,0 +1,25 @@
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function AvatarFallbackDemo() {
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+      <Avatar>
+        <AvatarFallback>JD</AvatarFallback>
+      </Avatar>
+
+      <Avatar>
+        <AvatarFallback>AB</AvatarFallback>
+      </Avatar>
+
+      <Avatar>
+        <AvatarFallback>MK</AvatarFallback>
+      </Avatar>
+
+      <Avatar>
+        <AvatarFallback>SL</AvatarFallback>
+      </Avatar>
+    </View>
+  );
+}

package/dist/templates/demo/avatar/avatar-group.tsx

@@ -0,0 +1,76 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function AvatarGroup() {
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+      <Avatar
+        size={48}
+        style={{
+          borderWidth: 2,
+          borderColor: 'white',
+          zIndex: 4,
+        }}
+      >
+        <AvatarImage
+          source={{
+            uri: 'https://avatars.githubusercontent.com/u/99088394?v=4',
+          }}
+        />
+        <AvatarFallback>AB</AvatarFallback>
+      </Avatar>
+
+      <Avatar
+        size={48}
+        style={{
+          borderWidth: 2,
+          borderColor: 'white',
+          marginLeft: -12,
+          zIndex: 3,
+        }}
+      >
+        <AvatarImage
+          source={{
+            uri: 'https://reactnative.dev/img/header_logo.svg',
+          }}
+        />
+        <AvatarFallback>AB</AvatarFallback>
+      </Avatar>
+
+      <Avatar
+        size={48}
+        style={{
+          borderWidth: 2,
+          borderColor: 'white',
+          marginLeft: -12,
+          zIndex: 2,
+        }}
+      >
+        <AvatarImage
+          source={{
+            uri: 'https://avatars.githubusercontent.com/u/12504344?s=200&v=4',
+          }}
+        />
+        <AvatarFallback>EX</AvatarFallback>
+      </Avatar>
+
+      <Avatar
+        size={48}
+        style={{
+          borderWidth: 2,
+          borderColor: 'white',
+          marginLeft: -12,
+          zIndex: 1,
+        }}
+      >
+        <AvatarFallback
+          style={{ backgroundColor: '#6b7280' }}
+          textStyle={{ color: 'white', fontSize: 12 }}
+        >
+          +5
+        </AvatarFallback>
+      </Avatar>
+    </View>
+  );
+}

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

@@ -0,0 +1,54 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function AvatarSizes() {
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+      <Avatar size={24}>
+        <AvatarImage
+          source={{
+            uri: 'https://avatars.githubusercontent.com/u/99088394?v=4',
+          }}
+        />
+        <AvatarFallback textStyle={{ fontSize: 10 }}>AB</AvatarFallback>
+      </Avatar>
+
+      <Avatar size={32}>
+        <AvatarImage
+          source={{
+            uri: 'https://avatars.githubusercontent.com/u/99088394?v=4',
+          }}
+        />
+        <AvatarFallback textStyle={{ fontSize: 12 }}>AB</AvatarFallback>
+      </Avatar>
+
+      <Avatar size={40}>
+        <AvatarImage
+          source={{
+            uri: 'https://avatars.githubusercontent.com/u/99088394?v=4',
+          }}
+        />
+        <AvatarFallback>AB</AvatarFallback>
+      </Avatar>
+
+      <Avatar size={56}>
+        <AvatarImage
+          source={{
+            uri: 'https://avatars.githubusercontent.com/u/99088394?v=4',
+          }}
+        />
+        <AvatarFallback textStyle={{ fontSize: 18 }}>AB</AvatarFallback>
+      </Avatar>
+
+      <Avatar size={72}>
+        <AvatarImage
+          source={{
+            uri: 'https://avatars.githubusercontent.com/u/99088394?v=4',
+          }}
+        />
+        <AvatarFallback textStyle={{ fontSize: 24 }}>AB</AvatarFallback>
+      </Avatar>
+    </View>
+  );
+}

package/dist/templates/demo/avatar/avatar-status.tsx

@@ -0,0 +1,76 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function AvatarStatus() {
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 24 }}>
+      <View style={{ position: 'relative' }}>
+        <Avatar size={56}>
+          <AvatarImage
+            source={{
+              uri: 'https://avatars.githubusercontent.com/u/99088394?v=4',
+            }}
+          />
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+        <View
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            right: 0,
+            width: 16,
+            height: 16,
+            borderRadius: 8,
+            backgroundColor: '#10b981',
+            borderWidth: 2,
+            borderColor: 'white',
+          }}
+        />
+      </View>
+
+      <View style={{ position: 'relative' }}>
+        <Avatar size={56}>
+          <AvatarFallback>BNA</AvatarFallback>
+        </Avatar>
+        <View
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            right: 0,
+            width: 16,
+            height: 16,
+            borderRadius: 8,
+            backgroundColor: '#ef4444',
+            borderWidth: 2,
+            borderColor: 'white',
+          }}
+        />
+      </View>
+
+      <View style={{ position: 'relative' }}>
+        <Avatar size={56}>
+          <AvatarImage
+            source={{
+              uri: 'https://avatars.githubusercontent.com/u/12504344?s=200&v=4',
+            }}
+          />
+          <AvatarFallback>EX</AvatarFallback>
+        </Avatar>
+        <View
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            right: 0,
+            width: 16,
+            height: 16,
+            borderRadius: 8,
+            backgroundColor: '#f59e0b',
+            borderWidth: 2,
+            borderColor: 'white',
+          }}
+        />
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,64 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function AvatarStyled() {
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+      <Avatar
+        size={56}
+        style={{
+          borderWidth: 3,
+          borderColor: '#3b82f6',
+        }}
+      >
+        <AvatarImage
+          source={{
+            uri: 'https://avatars.githubusercontent.com/u/99088394?v=4',
+          }}
+        />
+        <AvatarFallback
+          style={{ backgroundColor: '#3b82f6' }}
+          textStyle={{ color: 'white', fontWeight: 'bold' }}
+        >
+          AB
+        </AvatarFallback>
+      </Avatar>
+
+      <Avatar
+        size={56}
+        style={{
+          borderWidth: 3,
+          borderColor: '#10b981',
+        }}
+      >
+        <AvatarFallback
+          style={{ backgroundColor: '#10b981' }}
+          textStyle={{ color: 'white', fontWeight: 'bold' }}
+        >
+          BNA
+        </AvatarFallback>
+      </Avatar>
+
+      <Avatar
+        size={56}
+        style={{
+          borderWidth: 3,
+          borderColor: '#f59e0b',
+        }}
+      >
+        <AvatarImage
+          source={{
+            uri: 'https://avatars.githubusercontent.com/u/12504344?s=200&v=4',
+          }}
+        />
+        <AvatarFallback
+          style={{ backgroundColor: '#f59e0b' }}
+          textStyle={{ color: 'white', fontWeight: 'bold' }}
+        >
+          EX
+        </AvatarFallback>
+      </Avatar>
+    </View>
+  );
+}

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

@@ -0,0 +1,176 @@
+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 { useColor } from '@/hooks/useColor';
+import { Send, SendHorizonal } from 'lucide-react-native';
+import React, { useState } from 'react';
+import { FlatList, Pressable } from 'react-native';
+
+interface Message {
+  id: string;
+  text: string;
+  isUser: boolean;
+  timestamp: Date;
+}
+
+export function AvoidKeyboardChat() {
+  const card = useColor('card');
+  const blue = useColor('blue');
+
+  const [messages, setMessages] = useState<Message[]>([
+    {
+      id: '1',
+      text: 'Hey! How are you doing?',
+      isUser: false,
+      timestamp: new Date(Date.now() - 300000),
+    },
+    {
+      id: '2',
+      text: "Hi there! I'm doing great, thanks for asking!",
+      isUser: true,
+      timestamp: new Date(Date.now() - 240000),
+    },
+    {
+      id: '3',
+      text: "That's wonderful to hear! Any exciting plans for today?",
+      isUser: false,
+      timestamp: new Date(Date.now() - 180000),
+    },
+    {
+      id: '4',
+      text: "Actually yes! I'm working on some new React Native components.",
+      isUser: true,
+      timestamp: new Date(Date.now() - 120000),
+    },
+  ]);
+  const [inputText, setInputText] = useState('');
+
+  const sendMessage = () => {
+    if (inputText.trim()) {
+      const newMessage: Message = {
+        id: Date.now().toString(),
+        text: inputText.trim(),
+        isUser: true,
+        timestamp: new Date(),
+      };
+      setMessages((prev) => [...prev, newMessage]);
+      setInputText('');
+
+      // Simulate response after a delay
+      setTimeout(() => {
+        const responses = [
+          'That sounds interesting!',
+          'Tell me more about that.',
+          "Cool! How's it going?",
+          'Nice work!',
+        ];
+        const response: Message = {
+          id: (Date.now() + 1).toString(),
+          text: responses[Math.floor(Math.random() * responses.length)],
+          isUser: false,
+          timestamp: new Date(),
+        };
+        setMessages((prev) => [...prev, response]);
+      }, 1000);
+    }
+  };
+
+  const renderMessage = ({ item }: { item: Message }) => (
+    <View
+      style={{
+        marginBottom: 12,
+        alignItems: item.isUser ? 'flex-end' : 'flex-start',
+      }}
+    >
+      <View
+        style={{
+          maxWidth: '80%',
+          padding: 12,
+          borderRadius: 16,
+          backgroundColor: item.isUser ? blue : '#F2F2F7',
+        }}
+      >
+        <Text
+          style={{
+            color: item.isUser ? 'white' : '#000',
+            fontSize: 16,
+          }}
+        >
+          {item.text}
+        </Text>
+        <Text
+          style={{
+            color: item.isUser ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.5)',
+            fontSize: 12,
+            marginTop: 4,
+          }}
+        >
+          {item.timestamp.toLocaleTimeString([], {
+            hour: '2-digit',
+            minute: '2-digit',
+          })}
+        </Text>
+      </View>
+    </View>
+  );
+
+  return (
+    <View style={{ flex: 1 }}>
+      {/* Header */}
+      <View
+        style={{
+          paddingHorizontal: 16,
+          paddingBottom: 16,
+        }}
+      >
+        <Text variant='title'>Chat Demo</Text>
+        <Text variant='caption' style={{ opacity: 0.6, marginTop: 4 }}>
+          Real-time chat with keyboard avoidance
+        </Text>
+      </View>
+
+      {/* Messages */}
+      <FlatList
+        data={messages}
+        renderItem={renderMessage}
+        keyExtractor={(item) => item.id}
+        style={{ flex: 1 }}
+        contentContainerStyle={{ padding: 16 }}
+        showsVerticalScrollIndicator={false}
+      />
+
+      {/* Input Area */}
+      <View
+        style={{
+          flexDirection: 'row',
+          padding: 16,
+          gap: 12,
+          backgroundColor: card,
+        }}
+      >
+        <View style={{ flex: 1 }}>
+          <Input
+            value={inputText}
+            onChangeText={setInputText}
+            placeholder='Type a message...'
+            variant='outline'
+            onSubmitEditing={sendMessage}
+            returnKeyType='send'
+          />
+        </View>
+        <Button
+          onPress={sendMessage}
+          variant={inputText.trim() ? 'success' : 'outline'}
+          size='icon'
+        >
+          <SendHorizonal size={20} color='white' />
+        </Button>
+      </View>
+
+      {/* Keyboard avoidance with extra space for better UX */}
+      <AvoidKeyboard />
+    </View>
+  );
+}

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

@@ -0,0 +1,37 @@
+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 { useKeyboardHeight } from '@/hooks/useKeyboardHeight';
+import React from 'react';
+
+export function AvoidKeyboardDemo() {
+  const { keyboardHeight, isKeyboardVisible, keyboardAnimationDuration } =
+    useKeyboardHeight();
+
+  return (
+    <View style={{ flex: 1, padding: 20 }}>
+      <Text variant='title' style={{ marginBottom: 20 }}>
+        Basic Keyboard Avoidance
+      </Text>
+
+      <Text variant='body' style={{ marginBottom: 30, opacity: 0.7 }}>
+        Tap the input below to see the keyboard avoidance in action. The content
+        will smoothly move up to keep the input visible.
+      </Text>
+
+      {/* Spacer to push input toward bottom */}
+
+      <View style={{ flex: 1 }}>
+        <Text>Keyboard Height: {keyboardHeight}</Text>
+        <Text>Keyboard Visible: {isKeyboardVisible ? 'Yes' : 'No'}</Text>
+        <Text>Animation Duration: {keyboardAnimationDuration}ms</Text>
+      </View>
+
+      <Input placeholder='Type your message here...' label='Message' />
+
+      {/* This will create space to avoid the keyboard */}
+      <AvoidKeyboard />
+    </View>
+  );
+}

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

@@ -0,0 +1,62 @@
+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 React, { useState } from 'react';
+
+export function AvoidKeyboardDuration() {
+  const [duration, setDuration] = useState(0);
+
+  const durations = [
+    { label: 'Default', value: 0 },
+    { label: 'Fast (100ms)', value: 100 },
+    { label: 'Slow (500ms)', value: 500 },
+    { label: 'Very Slow (1000ms)', value: 1000 },
+  ];
+
+  return (
+    <View style={{ flex: 1, padding: 20 }}>
+      <Text variant='title' style={{ marginBottom: 20 }}>
+        Custom Animation Duration
+      </Text>
+
+      <Text variant='body' style={{ marginBottom: 20, opacity: 0.7 }}>
+        Choose different animation speeds to see how it affects the keyboard
+        avoidance:
+      </Text>
+
+      <View
+        style={{
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          gap: 8,
+          marginBottom: 20,
+        }}
+      >
+        {durations.map((item) => (
+          <Button
+            key={item.value}
+            variant={duration === item.value ? 'default' : 'secondary'}
+            size='sm'
+            onPress={() => setDuration(item.value)}
+          >
+            {item.label}
+          </Button>
+        ))}
+      </View>
+
+      <Text variant='caption' style={{ marginBottom: 30, opacity: 0.6 }}>
+        Current duration: {duration}ms extra
+      </Text>
+
+      {/* Spacer to push input toward bottom */}
+      <View style={{ flex: 1 }} />
+
+      <Input placeholder='Tap to test animation speed...' label='Test Input' />
+
+      {/* Use custom duration */}
+      <AvoidKeyboard duration={duration} />
+    </View>
+  );
+}