kynjal-cli 2.0.6

package/dist/templates/demo/progress/progress-media.tsx

@@ -0,0 +1,120 @@
+import { Progress } from '@/components/ui/progress';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+import { TouchableOpacity } from 'react-native';
+
+export function ProgressMedia() {
+  const [progress, setProgress] = useState(35);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [volume, setVolume] = useState(75);
+
+  const formatTime = (percent: number) => {
+    const totalSeconds = Math.floor((percent / 100) * 180); // 3 minute song
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  };
+
+  return (
+    <View style={{ gap: 20 }}>
+      {/* Media Player */}
+      <View
+        style={{
+          backgroundColor: '#1a1a1a',
+          borderRadius: 12,
+          padding: 16,
+          gap: 12,
+        }}
+      >
+        <View style={{ gap: 8 }}>
+          <Text variant='body' style={{ color: '#fff', fontWeight: '600' }}>
+            Song Title
+          </Text>
+          <Text variant='caption' style={{ color: '#999' }}>
+            Artist Name
+          </Text>
+        </View>
+
+        <View style={{ gap: 8 }}>
+          <Progress
+            value={progress}
+            interactive
+            height={4}
+            onValueChange={setProgress}
+            style={{ backgroundColor: '#333' }}
+          />
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+            }}
+          >
+            <Text variant='caption' style={{ color: '#999' }}>
+              {formatTime(progress)}
+            </Text>
+            <Text variant='caption' style={{ color: '#999' }}>
+              3:00
+            </Text>
+          </View>
+        </View>
+
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 20,
+          }}
+        >
+          <TouchableOpacity
+            style={{
+              width: 48,
+              height: 48,
+              borderRadius: 24,
+              backgroundColor: '#007AFF',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+            onPress={() => setIsPlaying(!isPlaying)}
+          >
+            <Text style={{ color: '#fff', fontSize: 20 }}>
+              {isPlaying ? '⏸️' : '▶️'}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {/* Volume Control */}
+      <View
+        style={{
+          backgroundColor: '#f8f9fa',
+          borderRadius: 8,
+          padding: 12,
+          gap: 8,
+        }}
+      >
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 12,
+          }}
+        >
+          <Text>🔊</Text>
+          <View style={{ flex: 1 }}>
+            <Progress
+              value={volume}
+              interactive
+              height={6}
+              onValueChange={setVolume}
+            />
+          </View>
+          <Text variant='caption' style={{ color: '#666' }}>
+            {Math.round(volume)}%
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/progress/progress-steps.tsx

@@ -0,0 +1,137 @@
+import { Progress } from '@/components/ui/progress';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+import { TouchableOpacity } from 'react-native';
+
+export function ProgressSteps() {
+  const [currentStep, setCurrentStep] = useState(2);
+
+  const steps = ['Account Setup', 'Personal Info', 'Verification', 'Complete'];
+
+  const progress = (currentStep / (steps.length - 1)) * 100;
+
+  return (
+    <View style={{ gap: 20 }}>
+      {/* Step Progress */}
+      <View style={{ gap: 16 }}>
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <Text variant='title'>Setup Progress</Text>
+          <Text variant='caption' style={{ color: '#666' }}>
+            Step {currentStep + 1} of {steps.length}
+          </Text>
+        </View>
+
+        <Progress value={progress} height={8} />
+
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            marginTop: 8,
+          }}
+        >
+          {steps.map((step, index) => (
+            <View
+              key={index}
+              style={{
+                alignItems: 'center',
+                flex: 1,
+              }}
+            >
+              <View
+                style={{
+                  width: 24,
+                  height: 24,
+                  borderRadius: 12,
+                  backgroundColor: index <= currentStep ? '#007AFF' : '#e5e7eb',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  marginBottom: 8,
+                }}
+              >
+                <Text
+                  variant='caption'
+                  style={{
+                    color: index <= currentStep ? '#fff' : '#666',
+                    fontWeight: '600',
+                  }}
+                >
+                  {index < currentStep ? '✓' : index + 1}
+                </Text>
+              </View>
+              <Text
+                variant='caption'
+                style={{
+                  color: index <= currentStep ? '#000' : '#999',
+                  fontWeight: index === currentStep ? '600' : '400',
+                  textAlign: 'center',
+                }}
+              >
+                {step}
+              </Text>
+            </View>
+          ))}
+        </View>
+      </View>
+
+      {/* Controls */}
+      <View
+        style={{
+          flexDirection: 'row',
+          gap: 12,
+          justifyContent: 'center',
+        }}
+      >
+        <TouchableOpacity
+          style={{
+            paddingHorizontal: 16,
+            paddingVertical: 8,
+            backgroundColor: currentStep > 0 ? '#007AFF' : '#e5e7eb',
+            borderRadius: 6,
+          }}
+          onPress={() => setCurrentStep(Math.max(0, currentStep - 1))}
+          disabled={currentStep === 0}
+        >
+          <Text
+            style={{
+              color: currentStep > 0 ? '#fff' : '#999',
+              fontWeight: '500',
+            }}
+          >
+            Previous
+          </Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={{
+            paddingHorizontal: 16,
+            paddingVertical: 8,
+            backgroundColor:
+              currentStep < steps.length - 1 ? '#007AFF' : '#e5e7eb',
+            borderRadius: 6,
+          }}
+          onPress={() =>
+            setCurrentStep(Math.min(steps.length - 1, currentStep + 1))
+          }
+          disabled={currentStep === steps.length - 1}
+        >
+          <Text
+            style={{
+              color: currentStep < steps.length - 1 ? '#fff' : '#999',
+              fontWeight: '500',
+            }}
+          >
+            Next
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,18 @@
+import { RadioGroup } from '@/components/ui/radio';
+import React, { useState } from 'react';
+
+export function RadioDemo() {
+  const [value, setValue] = useState('option1');
+
+  return (
+    <RadioGroup
+      options={[
+        { label: 'Default', value: 'option1' },
+        { label: 'Comfortable', value: 'option2' },
+        { label: 'Compact', value: 'option3' },
+      ]}
+      value={value}
+      onValueChange={setValue}
+    />
+  );
+}

package/dist/templates/demo/radio/radio-disabled.tsx

@@ -0,0 +1,47 @@
+import { RadioGroup } from '@/components/ui/radio';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function RadioDisabled() {
+  const [value1, setValue1] = useState('option1');
+  const [value2, setValue2] = useState('option2');
+
+  return (
+    <View style={{ gap: 24 }}>
+      {/* Some disabled options */}
+      <View>
+        <Text style={{ marginBottom: 12, fontWeight: '500' }}>
+          With disabled options
+        </Text>
+        <RadioGroup
+          options={[
+            { label: 'Available', value: 'option1' },
+            { label: 'Disabled', value: 'option2', disabled: true },
+            { label: 'Available', value: 'option3' },
+            { label: 'Disabled', value: 'option4', disabled: true },
+          ]}
+          value={value1}
+          onValueChange={setValue1}
+        />
+      </View>
+
+      {/* Entire group disabled */}
+      <View>
+        <Text style={{ marginBottom: 12, fontWeight: '500' }}>
+          Entire group disabled
+        </Text>
+        <RadioGroup
+          disabled
+          options={[
+            { label: 'Option 1', value: 'option1' },
+            { label: 'Option 2', value: 'option2' },
+            { label: 'Option 3', value: 'option3' },
+          ]}
+          value={value2}
+          onValueChange={setValue2}
+        />
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,82 @@
+import { Button } from '@/components/ui/button';
+import { RadioGroup } from '@/components/ui/radio';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+import { Alert } from 'react-native';
+
+export function RadioForm() {
+  const [experience, setExperience] = useState('');
+  const [notification, setNotification] = useState('email');
+  const [theme, setTheme] = useState('system');
+
+  const handleSubmit = () => {
+    if (!experience) {
+      Alert.alert('Error', 'Please select your experience level');
+      return;
+    }
+
+    Alert.alert(
+      'Form Submitted',
+      `Experience: ${experience}\nNotifications: ${notification}\nTheme: ${theme}`
+    );
+  };
+
+  return (
+    <View style={{ paddingVertical: 16, gap: 24 }}>
+      <Text style={{ fontSize: 18, fontWeight: '600' }}>User Preferences</Text>
+
+      <View>
+        <Text style={{ marginBottom: 12, fontWeight: '500', fontSize: 16 }}>
+          Experience Level *
+        </Text>
+        <RadioGroup
+          options={[
+            { label: 'Beginner', value: 'beginner' },
+            { label: 'Intermediate', value: 'intermediate' },
+            { label: 'Advanced', value: 'advanced' },
+            { label: 'Expert', value: 'expert' },
+          ]}
+          value={experience}
+          onValueChange={setExperience}
+        />
+      </View>
+
+      <View>
+        <Text style={{ marginBottom: 12, fontWeight: '500', fontSize: 16 }}>
+          Notification Preference
+        </Text>
+        <RadioGroup
+          options={[
+            { label: 'Email notifications', value: 'email' },
+            { label: 'Push notifications', value: 'push' },
+            { label: 'SMS notifications', value: 'sms' },
+            { label: 'No notifications', value: 'none' },
+          ]}
+          value={notification}
+          onValueChange={setNotification}
+        />
+      </View>
+
+      <View>
+        <Text style={{ marginBottom: 12, fontWeight: '500', fontSize: 16 }}>
+          Theme Preference
+        </Text>
+        <RadioGroup
+          orientation='horizontal'
+          options={[
+            { label: 'Light', value: 'light' },
+            { label: 'Dark', value: 'dark' },
+            { label: 'System', value: 'system' },
+          ]}
+          value={theme}
+          onValueChange={setTheme}
+        />
+      </View>
+
+      <Button onPress={handleSubmit} style={{ marginTop: 8 }}>
+        Save Preferences
+      </Button>
+    </View>
+  );
+}

package/dist/templates/demo/radio/radio-horizontal.tsx

@@ -0,0 +1,19 @@
+import { RadioGroup } from '@/components/ui/radio';
+import React, { useState } from 'react';
+
+export function RadioHorizontal() {
+  const [value, setValue] = useState('small');
+
+  return (
+    <RadioGroup
+      orientation='horizontal'
+      options={[
+        { label: 'Small', value: 'small' },
+        { label: 'Medium', value: 'medium' },
+        { label: 'Large', value: 'large' },
+      ]}
+      value={value}
+      onValueChange={setValue}
+    />
+  );
+}

package/dist/templates/demo/radio/radio-large.tsx

@@ -0,0 +1,27 @@
+import { RadioGroup } from '@/components/ui/radio';
+import React, { useState } from 'react';
+
+export function RadioLarge() {
+  const [value, setValue] = useState('option1');
+
+  return (
+    <RadioGroup
+      options={[
+        { label: 'Large Option One', value: 'option1' },
+        { label: 'Large Option Two', value: 'option2' },
+        { label: 'Large Option Three', value: 'option3' },
+      ]}
+      value={value}
+      onValueChange={setValue}
+      style={{ gap: 12 }}
+      optionStyle={{
+        paddingVertical: 12,
+      }}
+      labelStyle={{
+        fontSize: 18,
+        fontWeight: '500',
+        lineHeight: 28,
+      }}
+    />
+  );
+}

package/dist/templates/demo/radio/radio-single.tsx

@@ -0,0 +1,36 @@
+import { RadioButton } from '@/components/ui/radio';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function RadioSingle() {
+  const [selectedValue, setSelectedValue] = useState('option2');
+
+  const options = [
+    { label: 'First Option', value: 'option1' },
+    { label: 'Second Option', value: 'option2' },
+    { label: 'Third Option', value: 'option3' },
+    { label: 'Disabled Option', value: 'option4', disabled: true },
+  ];
+
+  return (
+    <View style={{ gap: 16 }}>
+      <Text style={{ fontWeight: '500', fontSize: 16 }}>
+        Individual Radio Buttons
+      </Text>
+
+      <View style={{ gap: 8 }}>
+        {options.map((option) => (
+          <RadioButton
+            key={option.value}
+            option={option}
+            selected={selectedValue === option.value}
+            onPress={() => setSelectedValue(option.value)}
+          />
+        ))}
+      </View>
+
+      <Text variant='caption'>Selected: {selectedValue}</Text>
+    </View>
+  );
+}

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

@@ -0,0 +1,77 @@
+import { RadioGroup } from '@/components/ui/radio';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import React, { useState } from 'react';
+
+export function RadioStyled() {
+  const green = useColor('green');
+  const card = useColor('card');
+
+  const [value1, setValue1] = useState('red');
+  const [value2, setValue2] = useState('plan1');
+
+  return (
+    <View style={{ gap: 24 }}>
+      {/* Custom colors */}
+      <View>
+        <Text style={{ marginBottom: 12, fontWeight: '500' }}>
+          Card-like options
+        </Text>
+        <RadioGroup
+          options={[
+            { label: 'Red Theme', value: 'red' },
+            { label: 'Blue Theme', value: 'blue' },
+            { label: 'Green Theme', value: 'green' },
+          ]}
+          value={value1}
+          onValueChange={setValue1}
+          optionStyle={{
+            paddingVertical: 12,
+            paddingHorizontal: 12,
+            backgroundColor: card,
+            borderRadius: 8,
+            marginBottom: 4,
+          }}
+          labelStyle={{
+            fontSize: 16,
+            fontWeight: '500',
+          }}
+        />
+      </View>
+
+      {/* Card-like styling */}
+      <View>
+        <Text style={{ marginBottom: 12, fontWeight: '500' }}>
+          Custom styling
+        </Text>
+        <RadioGroup
+          options={[
+            { label: 'Basic Plan - $9/month', value: 'plan1' },
+            { label: 'Pro Plan - $19/month', value: 'plan2' },
+            { label: 'Enterprise - $49/month', value: 'plan3' },
+          ]}
+          value={value2}
+          onValueChange={setValue2}
+          optionStyle={{
+            paddingVertical: 16,
+            paddingHorizontal: 16,
+            backgroundColor: green,
+            borderRadius: 12,
+            marginBottom: 8,
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.05,
+            shadowRadius: 2,
+            elevation: 1,
+          }}
+          labelStyle={{
+            fontSize: 15,
+            fontWeight: '500',
+            color: '#1f2937',
+          }}
+        />
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,37 @@
+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 ScrollViewDemo() {
+  const card = useColor('card');
+
+  return (
+    <View
+      style={{
+        height: 200,
+        borderWidth: 1,
+        borderColor: card,
+        borderRadius: BORDER_RADIUS,
+      }}
+    >
+      <ScrollView style={{ padding: 16 }}>
+        {Array.from({ length: 20 }, (_, i) => (
+          <Text
+            key={i}
+            style={{
+              marginBottom: 8,
+              padding: 12,
+              backgroundColor: card,
+              borderRadius: 6,
+            }}
+          >
+            Scrollable item {i + 1}
+          </Text>
+        ))}
+      </ScrollView>
+    </View>
+  );
+}

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

@@ -0,0 +1,57 @@
+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 ScrollViewHorizontal() {
+  const gradients = [
+    ['#ff9a9e', '#fecfef'],
+    ['#a18cd1', '#fbc2eb'],
+    ['#fad0c4', '#ffd1ff'],
+    ['#ffecd2', '#fcb69f'],
+    ['#a8edea', '#fed6e3'],
+    ['#d299c2', '#fef9d7'],
+    ['#89f7fe', '#66a6ff'],
+  ];
+
+  return (
+    <View
+      style={{
+        height: 150,
+        borderWidth: 1,
+        borderColor: '#e5e7eb',
+        borderRadius: BORDER_RADIUS,
+      }}
+    >
+      <ScrollView
+        horizontal={true}
+        contentContainerStyle={{ padding: 16, gap: 16, alignItems: 'center' }}
+        showsHorizontalScrollIndicator={true}
+      >
+        {Array.from({ length: 10 }, (_, i) => (
+          <View
+            key={i}
+            style={{
+              width: 120,
+              height: 100,
+              backgroundColor: gradients[i % gradients.length][0],
+              borderRadius: 12,
+              justifyContent: 'center',
+              alignItems: 'center',
+              shadowColor: '#000',
+              shadowOffset: { width: 0, height: 2 },
+              shadowOpacity: 0.1,
+              shadowRadius: 4,
+              elevation: 3,
+            }}
+          >
+            <Text style={{ color: 'white', fontWeight: 'bold', fontSize: 14 }}>
+              Item {i + 1}
+            </Text>
+          </View>
+        ))}
+      </ScrollView>
+    </View>
+  );
+}