kynjal-cli 2.0.6

package/dist/templates/demo/color-picker/color-picker-demo.tsx

@@ -0,0 +1,17 @@
+import { ColorPicker } from '@/components/ui/color-picker';
+import React, { useState } from 'react';
+
+export function ColorPickerDemo() {
+  const [color, setColor] = useState('#ff0000');
+
+  return (
+    <ColorPicker
+      value={color}
+      onColorChange={setColor}
+      onColorSelect={(selectedColor) => {
+        console.log('Color selected:', selectedColor);
+        setColor(selectedColor);
+      }}
+    />
+  );
+}

package/dist/templates/demo/color-picker/color-picker-disabled.tsx

@@ -0,0 +1,15 @@
+import { ColorPicker } from '@/components/ui/color-picker';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function ColorPickerDisabled() {
+  return (
+    <View style={{ alignItems: 'center', gap: 12 }}>
+      <ColorPicker value='#6c757d' disabled={true} swatchSize={48} />
+      <Text variant='caption' style={{ opacity: 0.6 }}>
+        Disabled Color Picker
+      </Text>
+    </View>
+  );
+}

package/dist/templates/demo/color-picker/color-picker-labeled.tsx

@@ -0,0 +1,84 @@
+import { ColorPicker } from '@/components/ui/color-picker';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function ColorPickerLabeled() {
+  const [backgroundColor, setBackgroundColor] = useState('#ffffff');
+  const [textColor, setTextColor] = useState('#333333');
+  const [borderColor, setBorderColor] = useState('#e1e5e9');
+
+  return (
+    <View style={{ gap: 20 }}>
+      {/* Background Color */}
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+        <ColorPicker
+          value={backgroundColor}
+          onColorChange={setBackgroundColor}
+          onColorSelect={setBackgroundColor}
+          swatchSize={40}
+        />
+        <View style={{ flex: 1 }}>
+          <Text variant='body' style={{ fontWeight: '600' }}>
+            Background Color
+          </Text>
+          <Text variant='caption' style={{ opacity: 0.7 }}>
+            {backgroundColor.toUpperCase()}
+          </Text>
+        </View>
+      </View>
+
+      {/* Text Color */}
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+        <ColorPicker
+          value={textColor}
+          onColorChange={setTextColor}
+          onColorSelect={setTextColor}
+          swatchSize={40}
+        />
+        <View style={{ flex: 1 }}>
+          <Text variant='body' style={{ fontWeight: '600' }}>
+            Text Color
+          </Text>
+          <Text variant='caption' style={{ opacity: 0.7 }}>
+            {textColor.toUpperCase()}
+          </Text>
+        </View>
+      </View>
+
+      {/* Border Color */}
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+        <ColorPicker
+          value={borderColor}
+          onColorChange={setBorderColor}
+          onColorSelect={setBorderColor}
+          swatchSize={40}
+        />
+        <View style={{ flex: 1 }}>
+          <Text variant='body' style={{ fontWeight: '600' }}>
+            Border Color
+          </Text>
+          <Text variant='caption' style={{ opacity: 0.7 }}>
+            {borderColor.toUpperCase()}
+          </Text>
+        </View>
+      </View>
+
+      {/* Preview */}
+      <View
+        style={{
+          padding: 16,
+          backgroundColor: backgroundColor,
+          borderWidth: 2,
+          borderColor: borderColor,
+          borderRadius: 8,
+          marginTop: 8,
+        }}
+      >
+        <Text style={{ color: textColor, textAlign: 'center' }}>
+          Preview with selected colors
+        </Text>
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/color-picker/color-picker-palette.tsx

@@ -0,0 +1,54 @@
+import { ColorPicker } from '@/components/ui/color-picker';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import React, { useState } from 'react';
+
+export function ColorPickerPalette() {
+  const cardColor = useColor('card');
+
+  const [colors, setColors] = useState([
+    '#FF6B6B',
+    '#4ECDC4',
+    '#45B7D1',
+    '#F9CA24',
+    '#6C5CE7',
+    '#A29BFE',
+    '#FD79A8',
+    '#00B894',
+  ]);
+
+  const updateColor = (index: number, newColor: string) => {
+    const newColors = [...colors];
+    newColors[index] = newColor;
+    setColors(newColors);
+  };
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 12,
+        justifyContent: 'center',
+        padding: 16,
+        backgroundColor: cardColor,
+        borderRadius: 12,
+      }}
+    >
+      {colors.map((color, index) => (
+        <View key={index} style={{ alignItems: 'center', gap: 4 }}>
+          <ColorPicker
+            value={color}
+            onColorChange={(newColor) => updateColor(index, newColor)}
+            onColorSelect={(newColor) => updateColor(index, newColor)}
+            swatchSize={36}
+          />
+          <Text variant='caption' style={{ fontSize: 10 }}>
+            {color.toUpperCase()}
+          </Text>
+        </View>
+      ))}
+    </View>
+  );
+}

package/dist/templates/demo/color-picker/color-picker-sizes.tsx

@@ -0,0 +1,39 @@
+import { ColorPicker } from '@/components/ui/color-picker';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function ColorPickerSizes() {
+  const [smallColor, setSmallColor] = useState('#ff6b6b');
+  const [mediumColor, setMediumColor] = useState('#4ecdc4');
+  const [largeColor, setLargeColor] = useState('#45b7d1');
+  const [xlColor, setXlColor] = useState('#f9ca24');
+
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+      <ColorPicker
+        value={smallColor}
+        onColorChange={setSmallColor}
+        onColorSelect={setSmallColor}
+        swatchSize={24}
+      />
+      <ColorPicker
+        value={mediumColor}
+        onColorChange={setMediumColor}
+        onColorSelect={setMediumColor}
+        swatchSize={32}
+      />
+      <ColorPicker
+        value={largeColor}
+        onColorChange={setLargeColor}
+        onColorSelect={setLargeColor}
+        swatchSize={48}
+      />
+      <ColorPicker
+        value={xlColor}
+        onColorChange={setXlColor}
+        onColorSelect={setXlColor}
+        swatchSize={64}
+      />
+    </View>
+  );
+}

package/dist/templates/demo/color-picker/color-picker-styled.tsx

@@ -0,0 +1,52 @@
+import { ColorPicker } from '@/components/ui/color-picker';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function ColorPickerStyled() {
+  const [primaryColor, setPrimaryColor] = useState('#007AFF');
+  const [accentColor, setAccentColor] = useState('#FF3B30');
+
+  return (
+    <View style={{ gap: 20 }}>
+      {/* Rounded Square Style */}
+      <View style={{ alignItems: 'center', gap: 8 }}>
+        <ColorPicker
+          value={primaryColor}
+          onColorChange={setPrimaryColor}
+          onColorSelect={setPrimaryColor}
+          swatchSize={50}
+          style={{
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.25,
+            shadowRadius: 4,
+            elevation: 5,
+          }}
+        />
+        <Text variant='caption'>Primary Color</Text>
+      </View>
+
+      {/* With Custom Border */}
+      <View style={{ alignItems: 'center', gap: 8 }}>
+        <View
+          style={{
+            padding: 4,
+            borderRadius: 30,
+            borderWidth: 2,
+            borderColor: '#ddd',
+            backgroundColor: '#fff',
+          }}
+        >
+          <ColorPicker
+            value={accentColor}
+            onColorChange={setAccentColor}
+            onColorSelect={setAccentColor}
+            swatchSize={40}
+          />
+        </View>
+        <Text variant='caption'>Accent Color</Text>
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/color-picker/color-swatch-demo.tsx

@@ -0,0 +1,46 @@
+import { ColorSwatch } from '@/components/ui/color-picker';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function ColorSwatchDemo() {
+  const [selectedColor, setSelectedColor] = useState('#e74c3c');
+
+  const colors = [
+    '#e74c3c',
+    '#3498db',
+    '#2ecc71',
+    '#f39c12',
+    '#9b59b6',
+    '#1abc9c',
+    '#e67e22',
+    '#34495e',
+  ];
+
+  return (
+    <View style={{ alignItems: 'center', gap: 16 }}>
+      <View
+        style={{
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          gap: 8,
+          justifyContent: 'center',
+        }}
+      >
+        {colors.map((color) => (
+          <ColorSwatch
+            key={color}
+            color={color}
+            size={36}
+            onPress={() => setSelectedColor(color)}
+            style={{
+              borderWidth: selectedColor === color ? 3 : 2,
+              borderColor: selectedColor === color ? '#000' : 'transparent',
+            }}
+          />
+        ))}
+      </View>
+      <Text variant='body'>Selected: {selectedColor.toUpperCase()}</Text>
+    </View>
+  );
+}

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

@@ -0,0 +1,44 @@
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxTrigger,
+  ComboboxValue,
+  OptionType,
+} from '@/components/ui/combobox';
+import React, { useState } from 'react';
+
+const frameworks: OptionType[] = [
+  { value: 'react', label: 'React' },
+  { value: 'vue', label: 'Vue' },
+  { value: 'angular', label: 'Angular' },
+  { value: 'svelte', label: 'Svelte' },
+  { value: 'next', label: 'Next.js' },
+  { value: 'nuxt', label: 'Nuxt.js' },
+];
+
+export function ComboboxDemo() {
+  const [value, setValue] = useState<OptionType | null>(null);
+
+  return (
+    <Combobox value={value} onValueChange={setValue}>
+      <ComboboxTrigger>
+        <ComboboxValue placeholder='Select framework...' />
+      </ComboboxTrigger>
+      <ComboboxContent>
+        <ComboboxInput placeholder='Search frameworks...' />
+        <ComboboxList>
+          <ComboboxEmpty>No framework found.</ComboboxEmpty>
+          {frameworks.map((framework) => (
+            <ComboboxItem key={framework.value} value={framework.value}>
+              {framework.label}
+            </ComboboxItem>
+          ))}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  );
+}

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

@@ -0,0 +1,44 @@
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxTrigger,
+  ComboboxValue,
+  OptionType,
+} from '@/components/ui/combobox';
+import React, { useState } from 'react';
+
+const frameworks: OptionType[] = [
+  { value: 'react', label: 'React' },
+  { value: 'vue', label: 'Vue' },
+  { value: 'angular', label: 'Angular' },
+];
+
+export function ComboboxDisabled() {
+  const [value, setValue] = useState<OptionType | null>({
+    value: 'vue',
+    label: 'Vue',
+  });
+
+  return (
+    <Combobox value={value} onValueChange={setValue} disabled>
+      <ComboboxTrigger>
+        <ComboboxValue placeholder='Select framework...' />
+      </ComboboxTrigger>
+      <ComboboxContent>
+        <ComboboxInput placeholder='Search frameworks...' />
+        <ComboboxList>
+          <ComboboxEmpty>No framework found.</ComboboxEmpty>
+          {frameworks.map((framework) => (
+            <ComboboxItem key={framework.value} value={framework.value}>
+              {framework.label}
+            </ComboboxItem>
+          ))}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  );
+}

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

@@ -0,0 +1,91 @@
+import { Button } from '@/components/ui/button';
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxTrigger,
+  ComboboxValue,
+  OptionType,
+} from '@/components/ui/combobox';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+const roles: OptionType[] = [
+  { value: 'frontend', label: 'Frontend Developer' },
+  { value: 'backend', label: 'Backend Developer' },
+  { value: 'fullstack', label: 'Full Stack Developer' },
+  { value: 'mobile', label: 'Mobile Developer' },
+  { value: 'devops', label: 'DevOps Engineer' },
+  { value: 'qa', label: 'QA Engineer' },
+  { value: 'designer', label: 'UI/UX Designer' },
+];
+
+export function ComboboxForm() {
+  const [selectedRole, setSelectedRole] = useState<OptionType | null>(null);
+  const [error, setError] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleSubmit = () => {
+    if (!selectedRole) {
+      setError('Please select a role');
+      return;
+    }
+    setError('');
+    setSubmitted(true);
+
+    // In a real app, you would submit `selectedRole.value`
+    console.log('Submitting role:', selectedRole.value);
+
+    // Reset after 2 seconds
+    setTimeout(() => {
+      setSubmitted(false);
+      // 4. Reset the state back to `null`, not an empty string
+      setSelectedRole(null);
+    }, 2000);
+  };
+
+  return (
+    <View style={{ gap: 16 }}>
+      <View>
+        <Text style={{ marginBottom: 8, fontWeight: '600' }}>Job Role *</Text>
+        <Combobox
+          value={selectedRole}
+          onValueChange={(value) => {
+            setSelectedRole(value);
+            if (value) {
+              setError('');
+            }
+          }}
+        >
+          <ComboboxTrigger error={!!error}>
+            <ComboboxValue placeholder='Select your role...' />
+          </ComboboxTrigger>
+          <ComboboxContent>
+            <ComboboxInput placeholder='Search roles...' />
+            <ComboboxList>
+              <ComboboxEmpty>No role found.</ComboboxEmpty>
+              {roles.map((role) => (
+                <ComboboxItem key={role.value} value={role.value}>
+                  {role.label}
+                </ComboboxItem>
+              ))}
+            </ComboboxList>
+          </ComboboxContent>
+        </Combobox>
+        {error && (
+          <Text style={{ color: 'red', fontSize: 12, marginTop: 4 }}>
+            {error}
+          </Text>
+        )}
+      </View>
+
+      <Button onPress={handleSubmit} disabled={submitted}>
+        {submitted ? 'Submitted!' : 'Submit'}
+      </Button>
+    </View>
+  );
+}

package/dist/templates/demo/combobox/combobox-groups.tsx

@@ -0,0 +1,51 @@
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxTrigger,
+  ComboboxValue,
+  OptionType,
+} from '@/components/ui/combobox';
+import React, { useState } from 'react';
+
+export function ComboboxGroups() {
+  const [value, setValue] = useState<OptionType | null>(null);
+
+  return (
+    <Combobox value={value} onValueChange={setValue}>
+      <ComboboxTrigger>
+        <ComboboxValue placeholder='Select technology...' />
+      </ComboboxTrigger>
+      <ComboboxContent>
+        <ComboboxInput placeholder='Search technologies...' />
+        <ComboboxList>
+          <ComboboxEmpty>No technology found.</ComboboxEmpty>
+
+          <ComboboxGroup heading='Frontend Frameworks'>
+            <ComboboxItem value='react'>React</ComboboxItem>
+            <ComboboxItem value='vue'>Vue</ComboboxItem>
+            <ComboboxItem value='angular'>Angular</ComboboxItem>
+            <ComboboxItem value='svelte'>Svelte</ComboboxItem>
+          </ComboboxGroup>
+
+          <ComboboxGroup heading='Backend Frameworks'>
+            <ComboboxItem value='express'>Express.js</ComboboxItem>
+            <ComboboxItem value='fastify'>Fastify</ComboboxItem>
+            <ComboboxItem value='nestjs'>NestJS</ComboboxItem>
+            <ComboboxItem value='koa'>Koa</ComboboxItem>
+          </ComboboxGroup>
+
+          <ComboboxGroup heading='Mobile'>
+            <ComboboxItem value='react-native'>React Native</ComboboxItem>
+            <ComboboxItem value='flutter'>Flutter</ComboboxItem>
+            <ComboboxItem value='ionic'>Ionic</ComboboxItem>
+          </ComboboxGroup>
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  );
+}

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

@@ -0,0 +1,89 @@
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxTrigger,
+  ComboboxValue,
+  OptionType,
+} from '@/components/ui/combobox';
+import React, { useState } from 'react';
+
+// For clarity, define a more specific type for the dataset items
+interface LargeDatasetItem extends OptionType {
+  searchValue: string;
+}
+
+// Generate a large dataset
+const generateLargeDataset = (): LargeDatasetItem[] => {
+  const categories = [
+    'Technology',
+    'Science',
+    'Arts',
+    'Sports',
+    'Business',
+    'Health',
+  ];
+  const adjectives = [
+    'Amazing',
+    'Innovative',
+    'Creative',
+    'Dynamic',
+    'Efficient',
+    'Modern',
+  ];
+  const nouns = [
+    'Solution',
+    'Platform',
+    'System',
+    'Framework',
+    'Tool',
+    'Service',
+  ];
+
+  const items: LargeDatasetItem[] = [];
+  for (let i = 0; i < 200; i++) {
+    const category = categories[i % categories.length];
+    const adjective = adjectives[Math.floor(Math.random() * adjectives.length)];
+    const noun = nouns[Math.floor(Math.random() * nouns.length)];
+
+    items.push({
+      value: `item-${i}`,
+      label: `${adjective} ${category} ${noun} ${i + 1}`,
+      searchValue: `${category} ${adjective} ${noun}`,
+    });
+  }
+
+  return items;
+};
+
+const largeDataset = generateLargeDataset();
+
+export function ComboboxLarge() {
+  const [value, setValue] = useState<OptionType | null>(null);
+
+  return (
+    <Combobox value={value} onValueChange={setValue}>
+      <ComboboxTrigger>
+        <ComboboxValue placeholder='Search from 200+ items...' />
+      </ComboboxTrigger>
+      <ComboboxContent maxHeight={300}>
+        <ComboboxInput placeholder='Type to search...' />
+        <ComboboxList>
+          <ComboboxEmpty>No items found in dataset.</ComboboxEmpty>
+          {largeDataset.map((item) => (
+            <ComboboxItem
+              key={item.value}
+              value={item.value}
+              searchValue={item.searchValue}
+            >
+              {item.label}
+            </ComboboxItem>
+          ))}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  );
+}

package/dist/templates/demo/combobox/combobox-multiple.tsx

@@ -0,0 +1,48 @@
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxTrigger,
+  ComboboxValue,
+  OptionType,
+} from '@/components/ui/combobox';
+import React, { useState } from 'react';
+
+const skills: OptionType[] = [
+  { value: 'javascript', label: 'JavaScript' },
+  { value: 'typescript', label: 'TypeScript' },
+  { value: 'react', label: 'React' },
+  { value: 'vue', label: 'Vue' },
+  { value: 'angular', label: 'Angular' },
+  { value: 'nodejs', label: 'Node.js' },
+  { value: 'python', label: 'Python' },
+  { value: 'java', label: 'Java' },
+  { value: 'csharp', label: 'C#' },
+  { value: 'go', label: 'Go' },
+];
+
+export function ComboboxMultiple() {
+  const [values, setValues] = useState<OptionType[]>([]);
+
+  return (
+    <Combobox multiple values={values} onValuesChange={setValues}>
+      <ComboboxTrigger>
+        <ComboboxValue placeholder='Select skills...' />
+      </ComboboxTrigger>
+      <ComboboxContent>
+        <ComboboxInput placeholder='Search skills...' />
+        <ComboboxList>
+          <ComboboxEmpty>No skill found.</ComboboxEmpty>
+          {skills.map((skill) => (
+            <ComboboxItem key={skill.value} value={skill.value}>
+              {skill.label}
+            </ComboboxItem>
+          ))}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  );
+}