kynjal-cli 2.0.6

package/dist/templates/demo/scroll-view/scroll-view-indicators.tsx

@@ -0,0 +1,91 @@
+import { ScrollView } from '@/components/ui/scroll-view';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import { BORDER_RADIUS } from '@/theme/globals';
+import React from 'react';
+
+export function ScrollViewIndicators() {
+  const card = useColor('card');
+
+  return (
+    <View style={{ gap: 16 }}>
+      {/* Vertical with indicators */}
+      <View>
+        <Text style={{ fontWeight: 'bold', marginBottom: 8 }}>
+          With Scroll Indicators
+        </Text>
+        <View
+          style={{
+            height: 200,
+            borderWidth: 1,
+            borderColor: '#e5e7eb',
+            borderRadius: BORDER_RADIUS,
+          }}
+        >
+          <ScrollView
+            contentContainerStyle={{ padding: 16, gap: 8 }}
+            showsVerticalScrollIndicator={true}
+            indicatorStyle='white'
+          >
+            {Array.from({ length: 12 }, (_, i) => (
+              <Text
+                key={i}
+                style={{
+                  padding: 12,
+                  backgroundColor: card,
+                  borderRadius: BORDER_RADIUS,
+                }}
+              >
+                Item {i + 1} - Scroll indicators visible
+              </Text>
+            ))}
+          </ScrollView>
+        </View>
+      </View>
+
+      {/* Horizontal without indicators */}
+      <View style={{ marginTop: 8 }}>
+        <Text style={{ fontWeight: 'bold', marginBottom: 8 }}>
+          Without Scroll Indicators
+        </Text>
+        <View
+          style={{
+            height: 150,
+            borderWidth: 1,
+            borderColor: '#e5e7eb',
+            borderRadius: BORDER_RADIUS,
+          }}
+        >
+          <ScrollView
+            horizontal={true}
+            contentContainerStyle={{
+              padding: 16,
+              gap: 12,
+              alignItems: 'center',
+            }}
+            showsHorizontalScrollIndicator={false}
+          >
+            {Array.from({ length: 8 }, (_, i) => (
+              <View
+                key={i}
+                style={{
+                  width: 80,
+                  height: 60,
+                  backgroundColor: '#fbbf24',
+                  borderRadius: BORDER_RADIUS,
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                }}
+              >
+                <Text style={{ color: 'white', fontWeight: 'bold' }}>
+                  {i + 1}
+                </Text>
+              </View>
+            ))}
+          </ScrollView>
+        </View>
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/scroll-view/scroll-view-inset.tsx

@@ -0,0 +1,116 @@
+import { ScrollView } from '@/components/ui/scroll-view';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import { BORDER_RADIUS } from '@/theme/globals';
+import React from 'react';
+
+export function ScrollViewInset() {
+  const card = useColor('card');
+
+  return (
+    <View style={{ gap: 16 }}>
+      {/* Standard ScrollView */}
+      <View>
+        <Text style={{ fontWeight: 'bold', marginBottom: 8 }}>
+          Standard Content
+        </Text>
+        <View
+          style={{
+            height: 150,
+            borderWidth: 1,
+            borderColor: '#e5e7eb',
+            borderRadius: BORDER_RADIUS,
+          }}
+        >
+          <ScrollView contentContainerStyle={{ padding: 16 }}>
+            {Array.from({ length: 8 }, (_, i) => (
+              <Text
+                key={i}
+                style={{
+                  padding: 12,
+                  marginBottom: 8,
+                  backgroundColor: card,
+                  borderRadius: BORDER_RADIUS,
+                }}
+              >
+                Standard item {i + 1}
+              </Text>
+            ))}
+          </ScrollView>
+        </View>
+      </View>
+
+      {/* ScrollView with content inset */}
+      <View>
+        <Text style={{ fontWeight: 'bold', marginBottom: 8 }}>
+          With Content Inset Adjustments
+        </Text>
+        <View
+          style={{
+            height: 150,
+            borderWidth: 1,
+            borderColor: '#e5e7eb',
+            borderRadius: BORDER_RADIUS,
+          }}
+        >
+          <ScrollView
+            contentContainerStyle={{
+              paddingTop: 32,
+              paddingBottom: 32,
+              paddingHorizontal: 24,
+            }}
+            contentInset={{ top: 20, bottom: 20 }}
+            contentInsetAdjustmentBehavior='automatic'
+          >
+            <View
+              style={{
+                padding: 16,
+                backgroundColor: '#ddd6fe',
+                borderRadius: BORDER_RADIUS,
+                marginBottom: 16,
+                borderWidth: 2,
+                borderColor: '#8b5cf6',
+              }}
+            >
+              <Text style={{ fontWeight: 'bold', color: '#5b21b6' }}>
+                Header with Inset
+              </Text>
+            </View>
+
+            {Array.from({ length: 6 }, (_, i) => (
+              <Text
+                key={i}
+                style={{
+                  padding: 12,
+                  marginBottom: 8,
+                  backgroundColor: '#fef3c7',
+                  borderRadius: BORDER_RADIUS,
+                  borderLeftWidth: 3,
+                  borderLeftColor: '#f59e0b',
+                }}
+              >
+                Inset adjusted item {i + 1}
+              </Text>
+            ))}
+
+            <View
+              style={{
+                padding: 16,
+                backgroundColor: '#dcfce7',
+                borderRadius: BORDER_RADIUS,
+                marginTop: 8,
+                borderWidth: 2,
+                borderColor: '#22c55e',
+              }}
+            >
+              <Text style={{ fontWeight: 'bold', color: '#15803d' }}>
+                Footer with Inset
+              </Text>
+            </View>
+          </ScrollView>
+        </View>
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/scroll-view/scroll-view-nested.tsx

@@ -0,0 +1,85 @@
+import { ScrollView } from '@/components/ui/scroll-view';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { BORDER_RADIUS } from '@/theme/globals';
+import React from 'react';
+
+export function ScrollViewNested() {
+  return (
+    <View
+      style={{
+        height: 300,
+        borderWidth: 1,
+        borderColor: '#e5e7eb',
+        borderRadius: BORDER_RADIUS,
+      }}
+    >
+      <ScrollView contentContainerStyle={{ padding: 16 }}>
+        <Text style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 16 }}>
+          Vertical Scroll
+        </Text>
+
+        {Array.from({ length: 3 }, (_, sectionIndex) => (
+          <View key={sectionIndex} style={{ marginBottom: 24 }}>
+            <Text style={{ fontSize: 16, fontWeight: '600', marginBottom: 12 }}>
+              Section {sectionIndex + 1}
+            </Text>
+
+            <View
+              style={{
+                height: 120,
+                borderWidth: 1,
+                borderColor: '#d1d5db',
+                borderRadius: BORDER_RADIUS,
+              }}
+            >
+              <ScrollView
+                horizontal={true}
+                contentContainerStyle={{
+                  padding: 12,
+                  gap: 12,
+                  alignItems: 'center',
+                }}
+                showsHorizontalScrollIndicator={true}
+              >
+                {Array.from({ length: 8 }, (_, itemIndex) => (
+                  <View
+                    key={itemIndex}
+                    style={{
+                      width: 80,
+                      height: 80,
+                      backgroundColor: '#3b82f6',
+                      borderRadius: BORDER_RADIUS,
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                    }}
+                  >
+                    <Text
+                      style={{
+                        color: 'white',
+                        fontSize: 12,
+                        fontWeight: 'bold',
+                      }}
+                    >
+                      {sectionIndex + 1}.{itemIndex + 1}
+                    </Text>
+                  </View>
+                ))}
+              </ScrollView>
+            </View>
+          </View>
+        ))}
+
+        <Text
+          style={{
+            padding: 16,
+            borderRadius: BORDER_RADIUS,
+            textAlign: 'center',
+          }}
+        >
+          End of scrollable content
+        </Text>
+      </ScrollView>
+    </View>
+  );
+}

package/dist/templates/demo/scroll-view/scroll-view-refresh.tsx

@@ -0,0 +1,81 @@
+import { ScrollView } from '@/components/ui/scroll-view';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import { BORDER_RADIUS } from '@/theme/globals';
+import React, { useCallback, useState } from 'react';
+import { RefreshControl } from 'react-native';
+
+export function ScrollViewRefresh() {
+  const card = useColor('card');
+  const green = useColor('green');
+
+  const [refreshing, setRefreshing] = useState(false);
+  const [lastRefresh, setLastRefresh] = useState(
+    new Date().toLocaleTimeString()
+  );
+
+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    setTimeout(() => {
+      setRefreshing(false);
+      setLastRefresh(new Date().toLocaleTimeString());
+    }, 2000);
+  }, []);
+
+  return (
+    <View
+      style={{
+        height: 300,
+        borderWidth: 1,
+        borderColor: '#e5e7eb',
+        borderRadius: BORDER_RADIUS,
+      }}
+    >
+      <ScrollView
+        contentContainerStyle={{ padding: 16 }}
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }
+      >
+        <View
+          style={{
+            padding: 16,
+            backgroundColor: green,
+            borderRadius: BORDER_RADIUS,
+            marginBottom: 16,
+          }}
+        >
+          <Text style={{ fontWeight: 'bold', color: '#000', marginBottom: 4 }}>
+            Pull to Refresh
+          </Text>
+          <Text style={{ color: '#047857' }}>
+            Last refreshed: {lastRefresh}
+          </Text>
+        </View>
+
+        {Array.from({ length: 15 }, (_, i) => (
+          <View
+            key={i}
+            style={{
+              padding: 16,
+              backgroundColor: card,
+              borderRadius: BORDER_RADIUS,
+              marginBottom: 8,
+              borderLeftWidth: 4,
+              borderLeftColor: '#3b82f6',
+            }}
+          >
+            <Text style={{ fontWeight: '600', marginBottom: 4 }}>
+              News Item {i + 1}
+            </Text>
+            <Text style={{ color: '#6b7280' }}>
+              This is a sample news item that demonstrates the pull-to-refresh
+              functionality.
+            </Text>
+          </View>
+        ))}
+      </ScrollView>
+    </View>
+  );
+}

package/dist/templates/demo/scroll-view/scroll-view-styled.tsx

@@ -0,0 +1,91 @@
+import { ScrollView } from '@/components/ui/scroll-view';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function ScrollViewStyled() {
+  return (
+    <View style={{ height: 300, borderRadius: 16, overflow: 'hidden' }}>
+      <ScrollView
+        style={{
+          backgroundColor: '#1f2937',
+          borderRadius: 16,
+        }}
+        contentContainerStyle={{
+          padding: 20,
+          gap: 16,
+        }}
+        showsVerticalScrollIndicator={true}
+      >
+        <View
+          style={{
+            padding: 20,
+            backgroundColor: '#374151',
+            borderRadius: 12,
+            borderWidth: 1,
+            borderColor: '#4b5563',
+          }}
+        >
+          <Text
+            style={{
+              color: '#f9fafb',
+              fontSize: 18,
+              fontWeight: 'bold',
+              marginBottom: 8,
+            }}
+          >
+            🌙 Dark Theme ScrollView
+          </Text>
+          <Text style={{ color: '#d1d5db' }}>
+            This ScrollView uses custom dark styling with rounded corners and
+            shadows.
+          </Text>
+        </View>
+
+        {Array.from({ length: 12 }, (_, i) => (
+          <View
+            key={i}
+            style={{
+              padding: 16,
+              backgroundColor: i % 2 === 0 ? '#6366f1' : '#8b5cf6',
+              borderRadius: 12,
+              shadowColor: '#000',
+              shadowOffset: { width: 0, height: 4 },
+              shadowOpacity: 0.3,
+              shadowRadius: 8,
+              elevation: 6,
+            }}
+          >
+            <Text
+              style={{
+                color: 'white',
+                fontWeight: 'bold',
+                fontSize: 16,
+                marginBottom: 4,
+              }}
+            >
+              Card {i + 1}
+            </Text>
+            <Text style={{ color: '#e5e7eb', opacity: 0.9 }}>
+              Beautiful custom styled card with gradient-like colors and
+              shadows.
+            </Text>
+          </View>
+        ))}
+
+        <View
+          style={{
+            padding: 20,
+            backgroundColor: '#059669',
+            borderRadius: 12,
+            alignItems: 'center',
+          }}
+        >
+          <Text style={{ color: 'white', fontWeight: 'bold' }}>
+            ✨ End of styled content
+          </Text>
+        </View>
+      </ScrollView>
+    </View>
+  );
+}

package/dist/templates/demo/scroll-view/scroll-view-vertical.tsx

@@ -0,0 +1,50 @@
+import { ScrollView } from '@/components/ui/scroll-view';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { BORDER_RADIUS } from '@/theme/globals';
+import React from 'react';
+
+export function ScrollViewVertical() {
+  const colors = [
+    '#ef4444',
+    '#f97316',
+    '#eab308',
+    '#22c55e',
+    '#3b82f6',
+    '#8b5cf6',
+    '#ec4899',
+  ];
+
+  return (
+    <View
+      style={{
+        height: 300,
+        borderWidth: 1,
+        borderColor: '#e5e7eb',
+        borderRadius: BORDER_RADIUS,
+      }}
+    >
+      <ScrollView
+        contentContainerStyle={{ padding: 16, gap: 12 }}
+        showsVerticalScrollIndicator={true}
+      >
+        {Array.from({ length: 15 }, (_, i) => (
+          <View
+            key={i}
+            style={{
+              height: 80,
+              backgroundColor: colors[i % colors.length],
+              borderRadius: 12,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <Text style={{ color: 'white', fontWeight: 'bold', fontSize: 16 }}>
+              Card {i + 1}
+            </Text>
+          </View>
+        ))}
+      </ScrollView>
+    </View>
+  );
+}

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

@@ -0,0 +1,19 @@
+import { SearchBar } from '@/components/ui/searchbar';
+import React, { useState } from 'react';
+
+export function SearchBarDemo() {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const handleSearch = (query: string) => {
+    console.log('Searching for:', query);
+  };
+
+  return (
+    <SearchBar
+      placeholder='Search for anything...'
+      value={searchQuery}
+      onChangeText={setSearchQuery}
+      onSearch={handleSearch}
+    />
+  );
+}

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

@@ -0,0 +1,36 @@
+import { Icon } from '@/components/ui/icon';
+import { SearchBar } from '@/components/ui/searchbar';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import { Filter, MapPin, User } from 'lucide-react-native';
+import React, { useState } from 'react';
+
+export function SearchBarIcons() {
+  const [locationQuery, setLocationQuery] = useState('');
+  const [userQuery, setUserQuery] = useState('');
+  const icon = useColor('icon');
+
+  return (
+    <View style={{ gap: 16 }}>
+      {/* Location search with map pin icon */}
+      <SearchBar
+        placeholder='Search locations...'
+        value={locationQuery}
+        onChangeText={setLocationQuery}
+        leftIcon={<Icon name={MapPin} size={16} color={icon} />}
+        onSearch={(query) => console.log('Location search:', query)}
+      />
+
+      {/* User search with custom icons */}
+      <SearchBar
+        placeholder='Search users...'
+        value={userQuery}
+        onChangeText={setUserQuery}
+        leftIcon={<Icon name={User} size={16} color={icon} />}
+        rightIcon={<Icon name={Filter} size={16} color={icon} />}
+        showClearButton={false}
+        onSearch={(query) => console.log('User search:', query)}
+      />
+    </View>
+  );
+}

package/dist/templates/demo/searchbar/searchbar-instant.tsx

@@ -0,0 +1,58 @@
+import { SearchBar } from '@/components/ui/searchbar';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function SearchBarInstant() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<string[]>([]);
+
+  const mockData = [
+    'Apple',
+    'Banana',
+    'Cherry',
+    'Date',
+    'Elderberry',
+    'Fig',
+    'Grape',
+    'Honeydew',
+    'Kiwi',
+    'Lemon',
+  ];
+
+  const handleInstantSearch = (query: string) => {
+    if (query.trim()) {
+      const results = mockData.filter((item) =>
+        item.toLowerCase().includes(query.toLowerCase())
+      );
+      setSearchResults(results);
+    } else {
+      setSearchResults([]);
+    }
+  };
+
+  return (
+    <View style={{ gap: 16 }}>
+      <SearchBar
+        placeholder='Instant search (no debounce)...'
+        value={searchQuery}
+        onChangeText={setSearchQuery}
+        onSearch={handleInstantSearch}
+        debounceMs={0} // No debounce for instant search
+      />
+
+      {searchResults.length > 0 && (
+        <View style={{ gap: 8 }}>
+          <Text variant='caption' style={{ opacity: 0.7 }}>
+            Found {searchResults.length} results:
+          </Text>
+          {searchResults.map((result, index) => (
+            <Text key={index} style={{ paddingLeft: 16 }}>
+              • {result}
+            </Text>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+}

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

@@ -0,0 +1,28 @@
+import { SearchBar } from '@/components/ui/searchbar';
+import React, { useState } from 'react';
+
+export function SearchBarLoading() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSearch = (query: string) => {
+    if (query.trim()) {
+      setLoading(true);
+      // Simulate API call
+      setTimeout(() => {
+        setLoading(false);
+        console.log('Search completed for:', query);
+      }, 2000);
+    }
+  };
+
+  return (
+    <SearchBar
+      placeholder='Search with loading state...'
+      value={searchQuery}
+      onChangeText={setSearchQuery}
+      onSearch={handleSearch}
+      loading={loading}
+    />
+  );
+}

package/dist/templates/demo/searchbar/searchbar-no-clear.tsx

@@ -0,0 +1,20 @@
+import { SearchBar } from '@/components/ui/searchbar';
+import React, { useState } from 'react';
+
+export function SearchBarNoClear() {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const handleSearch = (query: string) => {
+    console.log('Searching without clear button:', query);
+  };
+
+  return (
+    <SearchBar
+      placeholder='Search without clear button...'
+      value={searchQuery}
+      onChangeText={setSearchQuery}
+      onSearch={handleSearch}
+      showClearButton={false}
+    />
+  );
+}