kynjal-cli 2.0.6 → 3.1.0-alpha.44

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

@@ -1,191 +0,0 @@
-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

@@ -1,170 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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>
-  );
-}