kynjal-cli 2.0.6

package/dist/templates/components/ui/checkbox.tsx

@@ -0,0 +1,82 @@
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import { BORDER_RADIUS } from '@/theme/globals';
+import { Check } from 'lucide-react-native';
+import React from 'react';
+import { TextStyle, TouchableOpacity } from 'react-native';
+
+interface CheckboxProps {
+  checked: boolean;
+  label?: string;
+  error?: string;
+  disabled?: boolean;
+  labelStyle?: TextStyle;
+  onCheckedChange: (checked: boolean) => void;
+}
+
+export function Checkbox({
+  checked,
+  error,
+  disabled = false,
+  label,
+  labelStyle,
+  onCheckedChange,
+}: CheckboxProps) {
+  const primary = useColor('primary');
+  const primaryForegroundColor = useColor('primaryForeground');
+  const danger = useColor('red');
+  const borderColor = useColor('border');
+
+  return (
+    <TouchableOpacity
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        opacity: disabled ? 0.5 : 1,
+        paddingVertical: 4,
+      }}
+      onPress={() => !disabled && onCheckedChange(!checked)}
+      disabled={disabled}
+    >
+      <View
+        style={{
+          width: BORDER_RADIUS,
+          height: BORDER_RADIUS,
+          borderRadius: BORDER_RADIUS,
+          borderWidth: 1.5,
+          borderColor: checked ? primary : borderColor,
+          backgroundColor: checked ? primary : 'transparent',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginRight: label ? 8 : 0,
+        }}
+      >
+        {checked && (
+          <Check
+            size={16}
+            color={primaryForegroundColor}
+            strokeWidth={3}
+            strokeLinecap='round'
+          />
+        )}
+      </View>
+      {label && (
+        <Text
+          variant='caption'
+          numberOfLines={1}
+          ellipsizeMode='tail'
+          style={[
+            {
+              color: error ? danger : primary,
+            },
+            labelStyle,
+          ]}
+          pointerEvents='none'
+        >
+          {label}
+        </Text>
+      )}
+    </TouchableOpacity>
+  );
+}

package/dist/templates/components/ui/collapsible.tsx

@@ -0,0 +1,46 @@
+import { Icon } from '@/components/ui/icon';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { ChevronRight } from 'lucide-react-native';
+import { PropsWithChildren, useState } from 'react';
+import { TouchableOpacity } from 'react-native';
+
+export function Collapsible({
+  children,
+  title,
+}: PropsWithChildren & { title: string }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <View>
+      <TouchableOpacity
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 6,
+        }}
+        onPress={() => setIsOpen((value) => !value)}
+        activeOpacity={0.8}
+      >
+        <Icon
+          name={ChevronRight}
+          size={18}
+          style={{ transform: [{ rotate: isOpen ? '90deg' : '0deg' }] }}
+        />
+
+        <Text variant='subtitle'>{title}</Text>
+      </TouchableOpacity>
+
+      {isOpen && (
+        <View
+          style={{
+            marginTop: 6,
+            marginLeft: 24,
+          }}
+        >
+          {children}
+        </View>
+      )}
+    </View>
+  );
+}

package/dist/templates/components/ui/color-picker.tsx

@@ -0,0 +1,450 @@
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import { BORDER_RADIUS, CORNERS, HEIGHT } from '@/theme/globals';
+import { LinearGradient as ExpoLinearGradient } from 'expo-linear-gradient';
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  Dimensions,
+  Modal,
+  StyleSheet,
+  TouchableOpacity,
+  ViewStyle,
+} from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+
+const { width: screenWidth } = Dimensions.get('window');
+const PICKER_SIZE = screenWidth - 40;
+const HUE_BAR_HEIGHT = 40;
+const KNOB_SIZE = 40;
+
+// Color utility functions
+const hsvToRgb = (h: number, s: number, v: number) => {
+  const c = v * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = v - c;
+  let r = 0,
+    g = 0,
+    b = 0;
+
+  if (0 <= h && h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (60 <= h && h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (120 <= h && h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (180 <= h && h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (240 <= h && h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else if (300 <= h && h < 360) {
+    r = c;
+    g = 0;
+    b = x;
+  }
+
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((b + m) * 255),
+  };
+};
+
+const rgbToHex = (r: number, g: number, b: number) => {
+  return `#${r.toString(16).padStart(2, '0')}${g
+    .toString(16)
+    .padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+};
+
+const hexToRgb = (hex: string) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : { r: 0, g: 0, b: 0 };
+};
+
+const rgbToHsv = (r: number, g: number, b: number) => {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const diff = max - min;
+
+  let h = 0;
+  if (diff !== 0) {
+    if (max === r) {
+      h = ((g - b) / diff) % 6;
+    } else if (max === g) {
+      h = (b - r) / diff + 2;
+    } else {
+      h = (r - g) / diff + 4;
+    }
+  }
+  h = Math.round(h * 60);
+  if (h < 0) h += 360;
+
+  const s = max === 0 ? 0 : diff / max;
+  const v = max;
+
+  return { h, s, v };
+};
+
+interface ColorSwatchProps {
+  color: string;
+  size?: number;
+  style?: ViewStyle;
+  onPress?: () => void;
+}
+
+export const ColorSwatch: React.FC<ColorSwatchProps> = ({
+  color,
+  size = 32,
+  style,
+  onPress,
+}) => {
+  const borderColor = useColor('border');
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={[
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          backgroundColor: color,
+          borderWidth: 2,
+          borderColor,
+        },
+        style,
+      ]}
+      activeOpacity={onPress ? 0.8 : 1}
+    />
+  );
+};
+
+interface ColorPickerProps {
+  value?: string;
+  onColorChange?: (color: string) => void;
+  onColorSelect?: (color: string) => void;
+  swatchSize?: number;
+  disabled?: boolean;
+  style?: ViewStyle;
+}
+
+export const ColorPicker: React.FC<ColorPickerProps> = ({
+  value = '#ff0000',
+  onColorChange,
+  onColorSelect,
+  swatchSize = HEIGHT,
+  disabled = false,
+  style,
+}) => {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [currentColor, setCurrentColor] = useState(value);
+  const [pureHueColor, setPureHueColor] = useState('#ff0000');
+
+  const backgroundColor = useColor('background');
+  const card = useColor('card');
+  const borderColor = useColor('border');
+  const textColor = useColor('text');
+
+  // Initialize HSV values from the current color
+  const rgb = hexToRgb(currentColor);
+  const initialHsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+
+  const hue = useSharedValue(initialHsv.h);
+  const saturation = useSharedValue(initialHsv.s);
+  const brightness = useSharedValue(initialHsv.v);
+
+  const updateColor = useCallback(
+    (h: number, s: number, v: number) => {
+      const rgb = hsvToRgb(h, s, v);
+      const hex = rgbToHex(rgb.r, rgb.g, rgb.b);
+      setCurrentColor(hex);
+      onColorChange?.(hex);
+
+      // Update pure hue color for the saturation/brightness picker
+      const pureRgb = hsvToRgb(h, 1, 1);
+      const pureHex = rgbToHex(pureRgb.r, pureRgb.g, pureRgb.b);
+      setPureHueColor(pureHex);
+    },
+    [onColorChange]
+  );
+
+  // Update pure hue color when modal opens
+  useEffect(() => {
+    if (isModalVisible) {
+      const rgb = hexToRgb(currentColor);
+      const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+      hue.value = hsv.h;
+      saturation.value = hsv.s;
+      brightness.value = hsv.v;
+
+      const pureRgb = hsvToRgb(hsv.h, 1, 1);
+      const pureHex = rgbToHex(pureRgb.r, pureRgb.g, pureRgb.b);
+      setPureHueColor(pureHex);
+    }
+  }, [isModalVisible, currentColor]);
+
+  // Hue bar gesture using new Gesture API
+  const hueGesture = Gesture.Pan().onUpdate((event) => {
+    const newX = Math.max(
+      0,
+      Math.min(PICKER_SIZE - KNOB_SIZE, event.x - KNOB_SIZE / 2)
+    );
+    const newHue = (newX / (PICKER_SIZE - KNOB_SIZE)) * 360;
+    hue.value = newHue;
+    runOnJS(updateColor)(newHue, saturation.value, brightness.value);
+  });
+
+  // Saturation/Brightness picker gesture using new Gesture API
+  const pickerGesture = Gesture.Pan().onUpdate((event) => {
+    const newX = Math.max(
+      0,
+      Math.min(PICKER_SIZE - KNOB_SIZE, event.x - KNOB_SIZE / 2)
+    );
+    const newY = Math.max(
+      0,
+      Math.min(PICKER_SIZE - KNOB_SIZE, event.y - KNOB_SIZE / 2)
+    );
+
+    const newSaturation = newX / (PICKER_SIZE - KNOB_SIZE);
+    const newBrightness = 1 - newY / (PICKER_SIZE - KNOB_SIZE);
+
+    saturation.value = newSaturation;
+    brightness.value = newBrightness;
+
+    runOnJS(updateColor)(hue.value, newSaturation, newBrightness);
+  });
+
+  const hueKnobStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: (hue.value / 360) * (PICKER_SIZE - KNOB_SIZE) }],
+  }));
+
+  const pickerKnobStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: saturation.value * (PICKER_SIZE - KNOB_SIZE) },
+      { translateY: (1 - brightness.value) * (PICKER_SIZE - KNOB_SIZE) },
+    ],
+  }));
+
+  const handleColorSelect = () => {
+    onColorSelect?.(currentColor);
+    setIsModalVisible(false);
+  };
+
+  const handleCancel = () => {
+    setCurrentColor(value);
+    setIsModalVisible(false);
+  };
+
+  return (
+    <View style={style}>
+      <ColorSwatch
+        color={currentColor}
+        size={swatchSize}
+        onPress={disabled ? undefined : () => setIsModalVisible(true)}
+      />
+
+      <Modal
+        visible={isModalVisible}
+        animationType='slide'
+        presentationStyle='pageSheet'
+        onRequestClose={handleCancel}
+      >
+        <View style={[styles.modalContainer, { backgroundColor: card }]}>
+          <View style={styles.header}>
+            <TouchableOpacity onPress={handleCancel}>
+              <Text>Cancel</Text>
+            </TouchableOpacity>
+            <Text variant='title'>Choose Color</Text>
+            <TouchableOpacity onPress={handleColorSelect}>
+              <Text>Done</Text>
+            </TouchableOpacity>
+          </View>
+
+          <View style={styles.content}>
+            {/* Color Preview */}
+            <View
+              style={{
+                height: 80,
+                width: '100%',
+                alignItems: 'center',
+                marginBottom: 30,
+                justifyContent: 'center',
+                borderRadius: BORDER_RADIUS,
+                backgroundColor: currentColor,
+              }}
+            >
+              <Text
+                variant='caption'
+                style={{ color: textColor, fontWeight: 'bold' }}
+              >
+                {currentColor.toUpperCase()}
+              </Text>
+            </View>
+
+            {/* Saturation/Brightness Picker */}
+            <View style={styles.pickerContainer}>
+              <GestureDetector gesture={pickerGesture}>
+                <View style={{ width: PICKER_SIZE, height: PICKER_SIZE }}>
+                  {/* Base color layer */}
+                  <View
+                    style={[
+                      styles.colorBase,
+                      { backgroundColor: pureHueColor },
+                    ]}
+                  />
+
+                  {/* Saturation gradient (white to transparent, left to right) */}
+                  <ExpoLinearGradient
+                    colors={['rgba(255,255,255,1)', 'rgba(255,255,255,0)']}
+                    start={{ x: 0, y: 0 }}
+                    end={{ x: 1, y: 0 }}
+                    style={styles.gradientLayer}
+                  />
+
+                  {/* Brightness gradient (transparent to black, top to bottom) */}
+                  <ExpoLinearGradient
+                    colors={['rgba(0,0,0,0)', 'rgba(0,0,0,1)']}
+                    start={{ x: 0, y: 0 }}
+                    end={{ x: 0, y: 1 }}
+                    style={styles.gradientLayer}
+                  />
+
+                  <Animated.View style={[styles.pickerKnob, pickerKnobStyle]} />
+                </View>
+              </GestureDetector>
+            </View>
+
+            {/* Hue Bar */}
+            <View style={styles.hueContainer}>
+              <GestureDetector gesture={hueGesture}>
+                <Animated.View>
+                  <Svg width={PICKER_SIZE} height={HUE_BAR_HEIGHT}>
+                    <Defs>
+                      <LinearGradient
+                        id='hue'
+                        x1='0%'
+                        y1='0%'
+                        x2='100%'
+                        y2='0%'
+                      >
+                        <Stop offset='0%' stopColor='#ff0000' />
+                        <Stop offset='16.66%' stopColor='#ffff00' />
+                        <Stop offset='33.33%' stopColor='#00ff00' />
+                        <Stop offset='50%' stopColor='#00ffff' />
+                        <Stop offset='66.66%' stopColor='#0000ff' />
+                        <Stop offset='83.33%' stopColor='#ff00ff' />
+                        <Stop offset='100%' stopColor='#ff0000' />
+                      </LinearGradient>
+                    </Defs>
+                    <Rect
+                      width={PICKER_SIZE}
+                      height={HUE_BAR_HEIGHT}
+                      fill='url(#hue)'
+                      rx={10}
+                    />
+                  </Svg>
+
+                  <Animated.View style={[styles.hueKnob, hueKnobStyle]} />
+                </Animated.View>
+              </GestureDetector>
+            </View>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+  },
+  content: {
+    flex: 1,
+    padding: 20,
+    alignItems: 'center',
+  },
+  pickerContainer: {
+    marginBottom: 30,
+    borderRadius: BORDER_RADIUS,
+    overflow: 'hidden',
+  },
+  colorBase: {
+    position: 'absolute',
+    width: PICKER_SIZE,
+    height: PICKER_SIZE,
+    borderRadius: BORDER_RADIUS,
+  },
+  gradientLayer: {
+    position: 'absolute',
+    width: PICKER_SIZE,
+    height: PICKER_SIZE,
+    borderRadius: 12,
+  },
+  pickerKnob: {
+    position: 'absolute',
+    width: KNOB_SIZE,
+    height: KNOB_SIZE,
+    borderRadius: CORNERS,
+    backgroundColor: 'white',
+    borderWidth: 1,
+    borderColor: '#000',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  hueContainer: {
+    borderRadius: CORNERS,
+    overflow: 'hidden',
+  },
+  hueKnob: {
+    position: 'absolute',
+    width: KNOB_SIZE,
+    height: KNOB_SIZE,
+    borderRadius: CORNERS,
+    backgroundColor: 'white',
+    opacity: 0.5,
+    borderWidth: 2,
+    borderColor: '#000',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+});