kynjal-cli 2.0.6

package/dist/templates/demo/sheet/sheet-filter.tsx

@@ -0,0 +1,191 @@
+import { Button } from '@/components/ui/button';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import { Filter } from 'lucide-react-native';
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+
+export function SheetFilter() {
+  const [open, setOpen] = useState(false);
+  const [filters, setFilters] = useState({
+    category: 'all',
+    price: 'all',
+    rating: 'all',
+    brand: 'all',
+  });
+
+  const textColor = useColor('text');
+  const mutedColor = useColor('textMuted');
+  const borderColor = useColor('border');
+
+  const filterOptions = {
+    category: [
+      { value: 'all', label: 'All Categories' },
+      { value: 'electronics', label: 'Electronics' },
+      { value: 'clothing', label: 'Clothing' },
+      { value: 'books', label: 'Books' },
+      { value: 'home', label: 'Home & Garden' },
+    ],
+    price: [
+      { value: 'all', label: 'Any Price' },
+      { value: 'under-25', label: 'Under $25' },
+      { value: '25-50', label: '$25 - $50' },
+      { value: '50-100', label: '$50 - $100' },
+      { value: 'over-100', label: 'Over $100' },
+    ],
+    rating: [
+      { value: 'all', label: 'Any Rating' },
+      { value: '4-plus', label: '4+ Stars' },
+      { value: '3-plus', label: '3+ Stars' },
+      { value: '2-plus', label: '2+ Stars' },
+    ],
+    brand: [
+      { value: 'all', label: 'All Brands' },
+      { value: 'apple', label: 'Apple' },
+      { value: 'samsung', label: 'Samsung' },
+      { value: 'nike', label: 'Nike' },
+      { value: 'adidas', label: 'Adidas' },
+    ],
+  };
+
+  const handleFilterChange = (
+    filterType: keyof typeof filters,
+    value: string
+  ) => {
+    setFilters((prev) => ({ ...prev, [filterType]: value }));
+  };
+
+  const handleApplyFilters = () => {
+    // Apply filters logic here
+    console.log('Applied filters:', filters);
+    setOpen(false);
+  };
+
+  const handleClearFilters = () => {
+    setFilters({
+      category: 'all',
+      price: 'all',
+      rating: 'all',
+      brand: 'all',
+    });
+  };
+
+  const renderFilterSection = (
+    title: string,
+    filterType: keyof typeof filters,
+    options: { value: string; label: string }[]
+  ) => (
+    <View style={styles.filterSection}>
+      <Text style={[styles.sectionTitle, { color: textColor }]}>{title}</Text>
+      <View style={styles.optionsContainer}>
+        {options.map((option) => (
+          <TouchableOpacity
+            key={option.value}
+            style={[
+              styles.option,
+              {
+                borderColor,
+                backgroundColor:
+                  filters[filterType] === option.value
+                    ? `${textColor}10`
+                    : 'transparent',
+              },
+            ]}
+            onPress={() => handleFilterChange(filterType, option.value)}
+          >
+            <Text
+              style={[
+                styles.optionText,
+                {
+                  color:
+                    filters[filterType] === option.value
+                      ? textColor
+                      : mutedColor,
+                },
+              ]}
+            >
+              {option.label}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button icon={Filter}>Filter</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Filter Products</SheetTitle>
+          <SheetDescription>
+            Refine your search results using the filters below.
+          </SheetDescription>
+        </SheetHeader>
+        <View style={styles.filterContainer}>
+          {renderFilterSection('Category', 'category', filterOptions.category)}
+          {renderFilterSection('Price Range', 'price', filterOptions.price)}
+          {renderFilterSection('Rating', 'rating', filterOptions.rating)}
+          {renderFilterSection('Brand', 'brand', filterOptions.brand)}
+
+          <View style={styles.buttonContainer}>
+            <Button style={styles.button} onPress={handleApplyFilters}>
+              Apply Filters
+            </Button>
+            <Button
+              variant='outline'
+              style={styles.button}
+              onPress={handleClearFilters}
+            >
+              Clear All
+            </Button>
+          </View>
+        </View>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+const styles = StyleSheet.create({
+  filterContainer: {
+    padding: 16,
+    gap: 24,
+  },
+  filterSection: {
+    gap: 12,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  optionsContainer: {
+    gap: 8,
+  },
+  option: {
+    padding: 12,
+    borderRadius: 8,
+    borderWidth: 1,
+  },
+  optionText: {
+    fontSize: 16,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    gap: 12,
+    marginTop: 12,
+  },
+  button: {
+    flex: 1,
+  },
+});

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

@@ -0,0 +1,170 @@
+import { Button } from '@/components/ui/button';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import React, { useState } from 'react';
+import { Alert, StyleSheet, TextInput } from 'react-native';
+
+export function SheetForm() {
+  const [open, setOpen] = useState(false);
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    message: '',
+  });
+
+  const textColor = useColor('text');
+  const backgroundColor = useColor('background');
+  const borderColor = useColor('border');
+  const mutedColor = useColor('textMuted');
+
+  const handleSubmit = () => {
+    if (!formData.name || !formData.email || !formData.message) {
+      Alert.alert('Error', 'Please fill in all fields');
+      return;
+    }
+
+    Alert.alert('Success', 'Form submitted successfully!');
+    setFormData({ name: '', email: '', message: '' });
+    setOpen(false);
+  };
+
+  const handleReset = () => {
+    setFormData({ name: '', email: '', message: '' });
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button>Open Contact Form</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Contact Us</SheetTitle>
+          <SheetDescription>
+            Fill out the form below and we'll get back to you soon.
+          </SheetDescription>
+        </SheetHeader>
+        <View style={styles.formContainer}>
+          <View style={styles.fieldContainer}>
+            <Text style={[styles.label, { color: textColor }]}>Name</Text>
+            <TextInput
+              style={[
+                styles.input,
+                {
+                  borderColor,
+                  backgroundColor,
+                  color: textColor,
+                },
+              ]}
+              value={formData.name}
+              onChangeText={(text) =>
+                setFormData((prev) => ({ ...prev, name: text }))
+              }
+              placeholder='Enter your name'
+              placeholderTextColor={mutedColor}
+            />
+          </View>
+
+          <View style={styles.fieldContainer}>
+            <Text style={[styles.label, { color: textColor }]}>Email</Text>
+            <TextInput
+              style={[
+                styles.input,
+                {
+                  borderColor,
+                  backgroundColor,
+                  color: textColor,
+                },
+              ]}
+              value={formData.email}
+              onChangeText={(text) =>
+                setFormData((prev) => ({ ...prev, email: text }))
+              }
+              placeholder='Enter your email'
+              placeholderTextColor={mutedColor}
+              keyboardType='email-address'
+              autoCapitalize='none'
+            />
+          </View>
+
+          <View style={styles.fieldContainer}>
+            <Text style={[styles.label, { color: textColor }]}>Message</Text>
+            <TextInput
+              style={[
+                styles.input,
+                styles.textArea,
+                {
+                  borderColor,
+                  backgroundColor,
+                  color: textColor,
+                },
+              ]}
+              value={formData.message}
+              onChangeText={(text) =>
+                setFormData((prev) => ({ ...prev, message: text }))
+              }
+              placeholder='Enter your message'
+              placeholderTextColor={mutedColor}
+              multiline
+              numberOfLines={4}
+              textAlignVertical='top'
+            />
+          </View>
+
+          <View style={styles.buttonContainer}>
+            <Button style={styles.button} onPress={handleSubmit}>
+              Submit
+            </Button>
+            <Button
+              variant='outline'
+              style={styles.button}
+              onPress={handleReset}
+            >
+              Reset
+            </Button>
+          </View>
+        </View>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+const styles = StyleSheet.create({
+  formContainer: {
+    padding: 24,
+    gap: 20,
+  },
+  fieldContainer: {
+    gap: 8,
+  },
+  label: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  input: {
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 16,
+  },
+  textArea: {
+    height: 100,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    gap: 12,
+    marginTop: 12,
+  },
+  button: {
+    flex: 1,
+  },
+});

package/dist/templates/demo/sheet/sheet-left.tsx

@@ -0,0 +1,39 @@
+import { Button } from '@/components/ui/button';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function SheetLeft() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen} side='left'>
+      <SheetTrigger asChild>
+        <Button>Open Left Sheet</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Left Side Sheet</SheetTitle>
+          <SheetDescription>
+            This sheet slides in from the left side of the screen.
+          </SheetDescription>
+        </SheetHeader>
+        <View style={{ padding: 24, gap: 16 }}>
+          <Text>
+            Left-side sheets are commonly used for navigation menus and primary
+            actions that need to be easily accessible.
+          </Text>
+          <Button onPress={() => setOpen(false)}>Close Sheet</Button>
+        </View>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/dist/templates/demo/sheet/sheet-navigation.tsx

@@ -0,0 +1,111 @@
+import { Button } from '@/components/ui/button';
+import { Icon } from '@/components/ui/icon';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import { Bell, Home, Mail, Search, Settings, User } from 'lucide-react-native';
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+
+export function SheetNavigation() {
+  const [open, setOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState('home');
+
+  const textColor = useColor('text');
+  const mutedColor = useColor('textMuted');
+  const borderColor = useColor('border');
+
+  const navigationItems = [
+    { id: 'home', label: 'Home', icon: Home },
+    { id: 'profile', label: 'Profile', icon: User },
+    { id: 'messages', label: 'Messages', icon: Mail },
+    { id: 'search', label: 'Search', icon: Search },
+    { id: 'notifications', label: 'Notifications', icon: Bell },
+    { id: 'settings', label: 'Settings', icon: Settings },
+  ];
+
+  const handleItemPress = (itemId: string) => {
+    setActiveItem(itemId);
+    setOpen(false);
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen} side='left'>
+      <SheetTrigger asChild>
+        <Button>Open Navigation</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Navigation Menu</SheetTitle>
+          <SheetDescription>
+            Navigate to different sections of the app.
+          </SheetDescription>
+        </SheetHeader>
+        <View style={styles.navigationContainer}>
+          {navigationItems.map((item) => {
+            const name = item.icon;
+            const isActive = activeItem === item.id;
+
+            return (
+              <TouchableOpacity
+                key={item.id}
+                style={[
+                  styles.navigationItem,
+                  {
+                    backgroundColor: isActive
+                      ? `${textColor}10`
+                      : 'transparent',
+                    borderColor,
+                  },
+                ]}
+                onPress={() => handleItemPress(item.id)}
+              >
+                <Icon
+                  name={name}
+                  size={20}
+                  color={isActive ? textColor : mutedColor}
+                />
+                <Text
+                  style={[
+                    styles.navigationText,
+                    { color: isActive ? textColor : mutedColor },
+                  ]}
+                >
+                  {item.label}
+                </Text>
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+const styles = StyleSheet.create({
+  navigationContainer: {
+    padding: 16,
+    gap: 8,
+  },
+  navigationItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    padding: 12,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: 'transparent',
+  },
+  navigationText: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+});

package/dist/templates/demo/skeleton/skeleton-card.tsx

@@ -0,0 +1,39 @@
+import { Skeleton } from '@/components/ui/skeleton';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import { BORDER_RADIUS } from '@/theme/globals';
+import React from 'react';
+
+export function SkeletonCard() {
+  const card = useColor('card');
+
+  return (
+    <View
+      style={{
+        padding: 16,
+        borderRadius: BORDER_RADIUS,
+        backgroundColor: card,
+        gap: 12,
+      }}
+    >
+      {/* Header */}
+      <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+        <Skeleton width={40} height={40} style={{ borderRadius: 20 }} />
+        <View style={{ flex: 1, gap: 4 }}>
+          <Skeleton width='60%' height={16} />
+          <Skeleton width='40%' height={12} />
+        </View>
+      </View>
+
+      {/* Content */}
+      <Skeleton width='100%' height={200} variant='rounded' />
+
+      {/* Footer */}
+      <View style={{ gap: 8 }}>
+        <Skeleton width='100%' height={16} />
+        <Skeleton width='80%' height={16} />
+        <Skeleton width='60%' height={16} />
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,6 @@
+import { Skeleton } from '@/components/ui/skeleton';
+import React from 'react';
+
+export function SkeletonDemo() {
+  return <Skeleton width={200} height={20} />;
+}

package/dist/templates/demo/skeleton/skeleton-list.tsx

@@ -0,0 +1,34 @@
+import { Skeleton } from '@/components/ui/skeleton';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import { BORDER_RADIUS } from '@/theme/globals';
+import React from 'react';
+
+export function SkeletonList() {
+  const card = useColor('card');
+
+  return (
+    <View
+      style={{
+        gap: 16,
+        padding: 16,
+        borderRadius: BORDER_RADIUS,
+        backgroundColor: card,
+      }}
+    >
+      {Array.from({ length: 5 }, (_, i) => (
+        <View
+          key={i}
+          style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}
+        >
+          <Skeleton width={50} height={50} style={{ borderRadius: 25 }} />
+          <View style={{ flex: 1, gap: 6 }}>
+            <Skeleton width='70%' height={16} />
+            <Skeleton width='50%' height={14} />
+            <Skeleton width='30%' height={12} />
+          </View>
+        </View>
+      ))}
+    </View>
+  );
+}

package/dist/templates/demo/skeleton/skeleton-profile.tsx

@@ -0,0 +1,53 @@
+import { Skeleton } from '@/components/ui/skeleton';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import { BORDER_RADIUS } from '@/theme/globals';
+import React from 'react';
+
+export function SkeletonProfile() {
+  const card = useColor('card');
+
+  return (
+    <View
+      style={{
+        alignItems: 'center',
+        gap: 16,
+        padding: 16,
+        borderRadius: BORDER_RADIUS,
+        backgroundColor: card,
+      }}
+    >
+      {/* Profile Picture */}
+      <Skeleton width={80} height={80} style={{ borderRadius: 40 }} />
+
+      {/* Name and Title */}
+      <View style={{ alignItems: 'center', gap: 8 }}>
+        <Skeleton width={150} height={20} />
+        <Skeleton width={100} height={16} />
+      </View>
+
+      {/* Stats */}
+      <View style={{ flexDirection: 'row', gap: 24 }}>
+        <View style={{ alignItems: 'center', gap: 4 }}>
+          <Skeleton width={30} height={18} />
+          <Skeleton width={50} height={14} />
+        </View>
+        <View style={{ alignItems: 'center', gap: 4 }}>
+          <Skeleton width={30} height={18} />
+          <Skeleton width={50} height={14} />
+        </View>
+        <View style={{ alignItems: 'center', gap: 4 }}>
+          <Skeleton width={30} height={18} />
+          <Skeleton width={50} height={14} />
+        </View>
+      </View>
+
+      {/* Bio */}
+      <View style={{ gap: 8, width: '100%' }}>
+        <Skeleton width='100%' height={16} />
+        <Skeleton width='90%' height={16} />
+        <Skeleton width='70%' height={16} />
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/skeleton/skeleton-shapes.tsx

@@ -0,0 +1,44 @@
+import { Skeleton } from '@/components/ui/skeleton';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import { BORDER_RADIUS } from '@/theme/globals';
+import React from 'react';
+
+export function SkeletonShapes() {
+  const card = useColor('card');
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 16,
+        padding: 16,
+        borderRadius: BORDER_RADIUS,
+        backgroundColor: card,
+      }}
+    >
+      {/* Circle */}
+      <Skeleton width={60} height={60} style={{ borderRadius: 30 }} />
+
+      {/* Square */}
+      <Skeleton width={60} height={60} style={{ borderRadius: 4 }} />
+
+      {/* Rounded Rectangle */}
+      <Skeleton width={120} height={60} style={{ borderRadius: 12 }} />
+
+      {/* Pill */}
+      <Skeleton width={100} height={30} style={{ borderRadius: 15 }} />
+
+      {/* Custom styled */}
+      <Skeleton
+        width={80}
+        height={80}
+        style={{
+          borderRadius: 20,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+    </View>
+  );
+}