kynjal-cli 2.0.6

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

@@ -0,0 +1,104 @@
+import { Badge } from '@/components/ui/badge';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function BadgeSizes() {
+  return (
+    <View style={{ gap: 16 }}>
+      {/* Extra Small */}
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+        <Text style={{ width: 80, fontSize: 14 }}>Extra Small:</Text>
+        <Badge
+          style={{
+            paddingHorizontal: 6,
+            paddingVertical: 2,
+          }}
+          textStyle={{ fontSize: 11 }}
+        >
+          XS
+        </Badge>
+        <Badge
+          variant='success'
+          style={{
+            paddingHorizontal: 6,
+            paddingVertical: 2,
+          }}
+          textStyle={{ fontSize: 11 }}
+        >
+          New
+        </Badge>
+      </View>
+
+      {/* Small */}
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+        <Text style={{ width: 80, fontSize: 14 }}>Small:</Text>
+        <Badge
+          style={{
+            paddingHorizontal: 8,
+            paddingVertical: 4,
+          }}
+          textStyle={{ fontSize: 12 }}
+        >
+          Small
+        </Badge>
+        <Badge
+          variant='secondary'
+          style={{
+            paddingHorizontal: 8,
+            paddingVertical: 4,
+          }}
+          textStyle={{ fontSize: 12 }}
+        >
+          Beta
+        </Badge>
+      </View>
+
+      {/* Default */}
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+        <Text style={{ width: 80, fontSize: 14 }}>Default:</Text>
+        <Badge>Default</Badge>
+        <Badge variant='outline'>Outline</Badge>
+      </View>
+
+      {/* Large */}
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+        <Text style={{ width: 80, fontSize: 14 }}>Large:</Text>
+        <Badge
+          style={{
+            paddingHorizontal: 16,
+            paddingVertical: 8,
+          }}
+          textStyle={{ fontSize: 16, fontWeight: '600' }}
+        >
+          Large
+        </Badge>
+        <Badge
+          variant='destructive'
+          style={{
+            paddingHorizontal: 16,
+            paddingVertical: 8,
+          }}
+          textStyle={{ fontSize: 16, fontWeight: '600' }}
+        >
+          Important
+        </Badge>
+      </View>
+
+      {/* Extra Large */}
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+        <Text style={{ width: 80, fontSize: 14 }}>Extra Large:</Text>
+        <Badge
+          style={{
+            paddingHorizontal: 20,
+            paddingVertical: 10,
+            borderRadius: 12,
+          }}
+          textStyle={{ fontSize: 18, fontWeight: 'bold' }}
+        >
+          XL Badge
+        </Badge>
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,151 @@
+import { Badge } from '@/components/ui/badge';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function BadgeStatus() {
+  const users = [
+    { name: 'John Doe', status: 'online' },
+    { name: 'Jane Smith', status: 'away' },
+    { name: 'Bob Johnson', status: 'offline' },
+    { name: 'Alice Brown', status: 'busy' },
+  ];
+
+  const orders = [
+    { id: '#1234', status: 'pending' },
+    { id: '#1235', status: 'processing' },
+    { id: '#1236', status: 'shipped' },
+    { id: '#1237', status: 'delivered' },
+    { id: '#1238', status: 'cancelled' },
+  ];
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case 'online':
+        return <Badge variant='success'>Online</Badge>;
+      case 'away':
+        return (
+          <Badge
+            style={{ backgroundColor: '#f59e0b' }}
+            textStyle={{ color: 'white' }}
+          >
+            Away
+          </Badge>
+        );
+      case 'busy':
+        return <Badge variant='destructive'>Busy</Badge>;
+      case 'offline':
+        return <Badge variant='outline'>Offline</Badge>;
+      case 'pending':
+        return (
+          <Badge
+            style={{ backgroundColor: '#6b7280' }}
+            textStyle={{ color: 'white' }}
+          >
+            Pending
+          </Badge>
+        );
+      case 'processing':
+        return (
+          <Badge
+            style={{ backgroundColor: '#3b82f6' }}
+            textStyle={{ color: 'white' }}
+          >
+            Processing
+          </Badge>
+        );
+      case 'shipped':
+        return (
+          <Badge
+            style={{ backgroundColor: '#8b5cf6' }}
+            textStyle={{ color: 'white' }}
+          >
+            Shipped
+          </Badge>
+        );
+      case 'delivered':
+        return <Badge variant='success'>Delivered</Badge>;
+      case 'cancelled':
+        return <Badge variant='destructive'>Cancelled</Badge>;
+      default:
+        return <Badge variant='outline'>Unknown</Badge>;
+    }
+  };
+
+  return (
+    <View style={{ gap: 24 }}>
+      {/* User Status */}
+      <View>
+        <Text style={{ fontSize: 16, fontWeight: '600', marginBottom: 12 }}>
+          User Status
+        </Text>
+        <View style={{ gap: 8 }}>
+          {users.map((user, index) => (
+            <View
+              key={index}
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                paddingVertical: 4,
+              }}
+            >
+              <Text style={{ flex: 1 }}>{user.name}</Text>
+              {getStatusBadge(user.status)}
+            </View>
+          ))}
+        </View>
+      </View>
+
+      {/* Order Status */}
+      <View>
+        <Text style={{ fontSize: 16, fontWeight: '600', marginBottom: 12 }}>
+          Order Status
+        </Text>
+        <View style={{ gap: 8 }}>
+          {orders.map((order, index) => (
+            <View
+              key={index}
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                paddingVertical: 4,
+              }}
+            >
+              <Text style={{ flex: 1 }}>Order {order.id}</Text>
+              {getStatusBadge(order.status)}
+            </View>
+          ))}
+        </View>
+      </View>
+
+      {/* Priority Levels */}
+      <View>
+        <Text style={{ fontSize: 16, fontWeight: '600', marginBottom: 12 }}>
+          Priority Levels
+        </Text>
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+          <Badge
+            style={{ backgroundColor: '#ef4444' }}
+            textStyle={{ color: 'white', fontWeight: '600' }}
+          >
+            High Priority
+          </Badge>
+          <Badge
+            style={{ backgroundColor: '#f59e0b' }}
+            textStyle={{ color: 'white', fontWeight: '600' }}
+          >
+            Medium Priority
+          </Badge>
+          <Badge
+            style={{ backgroundColor: '#10b981' }}
+            textStyle={{ color: 'white', fontWeight: '600' }}
+          >
+            Low Priority
+          </Badge>
+        </View>
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,71 @@
+import { Badge } from '@/components/ui/badge';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function BadgeStyled() {
+  return (
+    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 12 }}>
+      {/* Custom colors */}
+      <Badge
+        style={{
+          backgroundColor: '#8b5cf6',
+          borderRadius: 16,
+        }}
+        textStyle={{ color: 'white', fontWeight: '600' }}
+      >
+        Purple
+      </Badge>
+
+      <Badge
+        style={{
+          backgroundColor: '#06b6d4',
+          borderRadius: 4,
+        }}
+        textStyle={{ color: 'white', fontSize: 13 }}
+      >
+        Cyan
+      </Badge>
+
+      <Badge
+        style={{
+          backgroundColor: '#f97316',
+          borderRadius: 20,
+          paddingHorizontal: 16,
+          paddingVertical: 8,
+        }}
+        textStyle={{ color: 'white', fontWeight: 'bold' }}
+      >
+        Orange
+      </Badge>
+
+      {/* Gradient-like effect with shadow */}
+      <Badge
+        style={{
+          backgroundColor: '#ec4899',
+          borderRadius: 12,
+          shadowColor: '#ec4899',
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.3,
+          shadowRadius: 4,
+          elevation: 4,
+        }}
+        textStyle={{ color: 'white', fontWeight: '600' }}
+      >
+        Pink
+      </Badge>
+
+      {/* Bordered with custom style */}
+      <Badge
+        variant='outline'
+        style={{
+          borderColor: '#10b981',
+          borderWidth: 2,
+          borderRadius: 8,
+        }}
+        textStyle={{ color: '#10b981', fontWeight: '600' }}
+      >
+        Green
+      </Badge>
+    </View>
+  );
+}

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

@@ -0,0 +1,31 @@
+import { BottomSheet, useBottomSheet } from '@/components/ui/bottom-sheet';
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function BottomSheetDemo() {
+  const { isVisible, open, close } = useBottomSheet();
+
+  return (
+    <View>
+      <Button onPress={open}>Open Bottom Sheet</Button>
+
+      <BottomSheet
+        isVisible={isVisible}
+        onClose={close}
+        snapPoints={[0.3, 0.6, 0.9]}
+      >
+        <View style={{ gap: 16 }}>
+          <Text variant='title'>Welcome to Bottom Sheet</Text>
+          <Text>
+            This is a basic bottom sheet that supports gesture interactions. You
+            can drag it up and down to different snap points, or swipe down
+            quickly to dismiss it.
+          </Text>
+          <Button onPress={close}>Close</Button>
+        </View>
+      </BottomSheet>
+    </View>
+  );
+}

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

@@ -0,0 +1,72 @@
+import { BottomSheet, useBottomSheet } from '@/components/ui/bottom-sheet';
+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 BottomSheetForm() {
+  const { isVisible, open, close } = useBottomSheet();
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+
+  const handleSubmit = () => {
+    // Handle form submission
+    console.log('Form submitted:', { name, email });
+    close();
+  };
+
+  return (
+    <View>
+      <Button onPress={open}>Edit Profile</Button>
+
+      <BottomSheet
+        isVisible={isVisible}
+        onClose={close}
+        title='Edit Profile'
+        snapPoints={[0.6, 0.8]}
+        enableBackdropDismiss={false}
+      >
+        <View style={{ gap: 20 }}>
+          <View style={{ gap: 12 }}>
+            <Text variant='body'>Name</Text>
+            <Input
+              value={name}
+              onChangeText={setName}
+              variant='outline'
+              placeholder='Enter your name'
+            />
+          </View>
+
+          <View style={{ gap: 12 }}>
+            <Text variant='body'>Email</Text>
+            <Input
+              value={email}
+              onChangeText={setEmail}
+              variant='outline'
+              placeholder='Enter your email'
+              keyboardType='email-address'
+            />
+          </View>
+
+          <View
+            style={{
+              flex: 1,
+              width: '100%',
+              flexDirection: 'row',
+              gap: 12,
+              marginTop: 12,
+            }}
+          >
+            <Button variant='outline' onPress={close} style={{ flex: 1 }}>
+              Cancel
+            </Button>
+            <Button onPress={handleSubmit} style={{ flex: 2 }}>
+              Save
+            </Button>
+          </View>
+        </View>
+      </BottomSheet>
+    </View>
+  );
+}

package/dist/templates/demo/bottom-sheet/bottom-sheet-list.tsx

@@ -0,0 +1,57 @@
+import { BottomSheet, useBottomSheet } from '@/components/ui/bottom-sheet';
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+import { FlatList, TouchableOpacity } from 'react-native';
+
+const items = [
+  { id: '1', title: 'Photos', subtitle: '1,234 items' },
+  { id: '2', title: 'Videos', subtitle: '56 items' },
+  { id: '3', title: 'Documents', subtitle: '89 items' },
+  { id: '4', title: 'Audio', subtitle: '23 items' },
+  { id: '5', title: 'Downloads', subtitle: '12 items' },
+  { id: '6', title: 'Archives', subtitle: '4 items' },
+];
+
+export function BottomSheetList() {
+  const { isVisible, open, close } = useBottomSheet();
+
+  const renderItem = ({ item }: { item: (typeof items)[0] }) => (
+    <TouchableOpacity
+      style={{
+        padding: 16,
+        borderBottomWidth: 1,
+        borderBottomColor: 'rgba(0,0,0,0.1)',
+      }}
+      onPress={() => console.log('Selected:', item.title)}
+    >
+      <Text variant='body' style={{ fontWeight: '600' }}>
+        {item.title}
+      </Text>
+      <Text variant='caption' style={{ marginTop: 2 }}>
+        {item.subtitle}
+      </Text>
+    </TouchableOpacity>
+  );
+
+  return (
+    <View>
+      <Button onPress={open}>Browse Files</Button>
+
+      <BottomSheet
+        isVisible={isVisible}
+        onClose={close}
+        title='File Browser'
+        snapPoints={[0.5, 0.8]}
+      >
+        <FlatList
+          data={items}
+          renderItem={renderItem}
+          keyExtractor={(item) => item.id}
+          showsVerticalScrollIndicator={false}
+        />
+      </BottomSheet>
+    </View>
+  );
+}

package/dist/templates/demo/bottom-sheet/bottom-sheet-menu.tsx

@@ -0,0 +1,61 @@
+import { BottomSheet, useBottomSheet } from '@/components/ui/bottom-sheet';
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import { TouchableOpacity } from 'react-native';
+
+const menuItems = [
+  { id: 'edit', title: 'Edit', icon: '✏️' },
+  { id: 'share', title: 'Share', icon: '📤' },
+  { id: 'copy', title: 'Copy Link', icon: '🔗' },
+  { id: 'bookmark', title: 'Bookmark', icon: '🔖' },
+  { id: 'delete', title: 'Delete', icon: '🗑️', destructive: true },
+];
+
+export function BottomSheetMenu() {
+  const { isVisible, open, close } = useBottomSheet();
+
+  const textColor = useColor('text');
+  const destructiveColor = useColor('destructive');
+
+  const handleMenuAction = (action: string) => {
+    console.log('Menu action:', action);
+    close();
+  };
+
+  return (
+    <View>
+      <Button onPress={open}>Show Menu</Button>
+
+      <BottomSheet isVisible={isVisible} onClose={close} snapPoints={[0.4]}>
+        <View>
+          {menuItems.map((item, index) => (
+            <TouchableOpacity
+              key={item.id}
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                padding: 16,
+                borderBottomWidth: index < menuItems.length - 1 ? 1 : 0,
+                borderBottomColor: 'rgba(0,0,0,0.1)',
+              }}
+              onPress={() => handleMenuAction(item.id)}
+            >
+              <Text style={{ fontSize: 20, marginRight: 16 }}>{item.icon}</Text>
+              <Text
+                variant='body'
+                style={{
+                  flex: 1,
+                  color: item.destructive ? destructiveColor : textColor,
+                }}
+              >
+                {item.title}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+      </BottomSheet>
+    </View>
+  );
+}

package/dist/templates/demo/bottom-sheet/bottom-sheet-no-dismiss.tsx

@@ -0,0 +1,41 @@
+import { BottomSheet, useBottomSheet } from '@/components/ui/bottom-sheet';
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function BottomSheetNoDismiss() {
+  const { isVisible, open, close } = useBottomSheet();
+
+  return (
+    <View>
+      <Button onPress={open}>Important Action</Button>
+
+      <BottomSheet
+        isVisible={isVisible}
+        onClose={close}
+        title='Confirm Action'
+        snapPoints={[0.4]}
+        enableBackdropDismiss={false}
+      >
+        <View style={{ gap: 16 }}>
+          <Text>
+            This bottom sheet cannot be dismissed by tapping the backdrop. You
+            must use one of the action buttons below.
+          </Text>
+          <Text variant='caption' style={{ fontStyle: 'italic' }}>
+            This is useful for critical confirmations or required actions.
+          </Text>
+          <View style={{ flexDirection: 'row', gap: 12, marginTop: 12 }}>
+            <Button variant='outline' onPress={close} style={{ flex: 1 }}>
+              Cancel
+            </Button>
+            <Button variant='destructive' onPress={close} style={{ flex: 1 }}>
+              Confirm
+            </Button>
+          </View>
+        </View>
+      </BottomSheet>
+    </View>
+  );
+}

package/dist/templates/demo/bottom-sheet/bottom-sheet-snap-points.tsx

@@ -0,0 +1,37 @@
+import { BottomSheet, useBottomSheet } from '@/components/ui/bottom-sheet';
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function BottomSheetSnapPoints() {
+  const { isVisible, open, close } = useBottomSheet();
+
+  return (
+    <View>
+      <Button onPress={open}>Custom Snap Points</Button>
+
+      <BottomSheet
+        isVisible={isVisible}
+        onClose={close}
+        title='Custom Heights'
+        snapPoints={[0.2, 0.5, 0.8, 0.95]}
+      >
+        <View style={{ gap: 16 }}>
+          <Text variant='title'>Multiple Snap Points</Text>
+          <Text>
+            This sheet has four different snap points: 20%, 50%, 80%, and 95% of
+            screen height. Try dragging to see how it snaps to each position.
+          </Text>
+          <View style={{ gap: 12 }}>
+            <Text variant='body'>Available heights:</Text>
+            <Text>• 20% - Peek view</Text>
+            <Text>• 50% - Medium height</Text>
+            <Text>• 80% - Large view</Text>
+            <Text>• 95% - Nearly fullscreen</Text>
+          </View>
+        </View>
+      </BottomSheet>
+    </View>
+  );
+}

package/dist/templates/demo/bottom-sheet/bottom-sheet-styled.tsx

@@ -0,0 +1,50 @@
+import { BottomSheet, useBottomSheet } from '@/components/ui/bottom-sheet';
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import React from 'react';
+
+export function BottomSheetStyled() {
+  const { isVisible, open, close } = useBottomSheet();
+  const accentColor = useColor('blue');
+
+  return (
+    <View>
+      <Button onPress={open}>Styled Sheet</Button>
+
+      <BottomSheet
+        isVisible={isVisible}
+        onClose={close}
+        title='Custom Styling'
+        snapPoints={[0.5, 0.8]}
+        style={{
+          borderTopWidth: 3,
+          borderTopColor: accentColor,
+        }}
+      >
+        <View style={{ gap: 16 }}>
+          <View
+            style={{
+              backgroundColor: accentColor + '20',
+              padding: 16,
+              borderRadius: 12,
+            }}
+          >
+            <Text variant='title' style={{ color: accentColor }}>
+              Premium Feature
+            </Text>
+            <Text style={{ marginTop: 8 }}>
+              This bottom sheet has custom styling including a colored border
+              and accent-colored content areas.
+            </Text>
+          </View>
+
+          <Button variant='success' onPress={close}>
+            Get Started
+          </Button>
+        </View>
+      </BottomSheet>
+    </View>
+  );
+}