kynjal-cli 2.0.6

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

@@ -0,0 +1,133 @@
+import { Text } from '@/components/ui/text';
+import { useColor } from '@/hooks/useColor';
+import { BORDER_RADIUS, CORNERS, FONT_SIZE } from '@/theme/globals';
+import React from 'react';
+import { TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native';
+
+export interface RadioOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+interface RadioGroupProps {
+  options: RadioOption[];
+  value?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+  orientation?: 'vertical' | 'horizontal';
+  style?: ViewStyle;
+  optionStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+}
+
+interface RadioButtonProps {
+  option: RadioOption;
+  selected: boolean;
+  onPress: () => void;
+  disabled?: boolean;
+  style?: ViewStyle;
+  labelStyle?: TextStyle;
+}
+
+export function RadioButton({
+  option,
+  selected,
+  onPress,
+  disabled = false,
+  style,
+  labelStyle,
+}: RadioButtonProps) {
+  const primaryColor = useColor('primary');
+  const borderColor = useColor('border');
+  const textColor = useColor('text');
+  const mutedColor = useColor('textMuted');
+
+  const isDisabled = disabled || option.disabled;
+
+  const radioButtonStyle: ViewStyle = {
+    width: BORDER_RADIUS,
+    height: BORDER_RADIUS,
+    borderRadius: CORNERS,
+    borderWidth: 1.5,
+    borderColor: selected ? primaryColor : borderColor,
+    backgroundColor: 'transparent',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12,
+  };
+
+  const innerCircleStyle: ViewStyle = {
+    width: 16,
+    height: 16,
+    borderRadius: CORNERS,
+    backgroundColor: selected ? primaryColor : 'transparent',
+  };
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 4,
+    paddingHorizontal: 4,
+    opacity: isDisabled ? 0.5 : 1,
+  };
+
+  const textStyle: TextStyle = {
+    color: isDisabled ? mutedColor : textColor,
+    fontSize: FONT_SIZE,
+    fontWeight: '400',
+    lineHeight: 24,
+  };
+
+  return (
+    <TouchableOpacity
+      style={[containerStyle, style]}
+      onPress={onPress}
+      disabled={isDisabled}
+      activeOpacity={0.7}
+    >
+      <View style={radioButtonStyle}>
+        <View style={innerCircleStyle} />
+      </View>
+      <Text style={[textStyle, labelStyle]}>{option.label}</Text>
+    </TouchableOpacity>
+  );
+}
+
+export function RadioGroup({
+  options,
+  value,
+  onValueChange,
+  disabled = false,
+  orientation = 'vertical',
+  style,
+  optionStyle,
+  labelStyle,
+}: RadioGroupProps) {
+  const containerStyle: ViewStyle = {
+    flexDirection: orientation === 'horizontal' ? 'row' : 'column',
+    gap: orientation === 'horizontal' ? 16 : 4,
+  };
+
+  const handlePress = (optionValue: string) => {
+    if (onValueChange && !disabled) {
+      onValueChange(optionValue);
+    }
+  };
+
+  return (
+    <View style={[containerStyle, style]}>
+      {options.map((option) => (
+        <RadioButton
+          key={option.value}
+          option={option}
+          selected={value === option.value}
+          onPress={() => handlePress(option.value)}
+          disabled={disabled}
+          style={optionStyle}
+          labelStyle={labelStyle}
+        />
+      ))}
+    </View>
+  );
+}

package/dist/templates/components/ui/scroll-view.tsx

@@ -0,0 +1,14 @@
+import { forwardRef } from 'react';
+import { ScrollView as RNScrollView, ScrollViewProps } from 'react-native';
+
+export const ScrollView = forwardRef<RNScrollView, ScrollViewProps>(
+  ({ style, ...otherProps }, ref) => {
+    return (
+      <RNScrollView
+        ref={ref}
+        style={[{ backgroundColor: 'transparent' }, style]}
+        {...otherProps}
+      />
+    );
+  }
+);

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

@@ -0,0 +1,241 @@
+import { Icon } from '@/components/ui/icon';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import { CORNERS, FONT_SIZE, HEIGHT } from '@/theme/globals';
+import { Search, X } from 'lucide-react-native';
+import React, { useCallback, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  TextInput,
+  TextInputProps,
+  TextStyle,
+  TouchableOpacity,
+  ViewStyle,
+} from 'react-native';
+
+interface SearchBarProps extends Omit<TextInputProps, 'style'> {
+  loading?: boolean;
+  onSearch?: (query: string) => void;
+  onClear?: () => void;
+  showClearButton?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  containerStyle?: ViewStyle | ViewStyle[];
+  inputStyle?: TextStyle | TextStyle[];
+  debounceMs?: number;
+}
+
+export function SearchBar({
+  loading = false,
+  onSearch,
+  onClear,
+  showClearButton = true,
+  leftIcon,
+  rightIcon,
+  containerStyle,
+  inputStyle,
+  debounceMs = 300,
+  placeholder = 'Search...',
+  value,
+  onChangeText,
+  ...props
+}: SearchBarProps) {
+  const [internalValue, setInternalValue] = useState(value || '');
+  const debounceRef = useRef<NodeJS.Timeout | null>(null);
+  const inputRef = useRef<TextInput>(null);
+
+  // Theme colors
+  const cardColor = useColor('card');
+  const textColor = useColor('text');
+  const muted = useColor('textMuted');
+  const icon = useColor('icon');
+
+  // Handle text change with debouncing
+  const handleTextChange = useCallback(
+    (text: string) => {
+      setInternalValue(text);
+      onChangeText?.(text);
+
+      if (onSearch && debounceMs > 0) {
+        if (debounceRef.current) {
+          clearTimeout(debounceRef.current);
+        }
+        (debounceRef.current as any) = setTimeout(() => {
+          onSearch(text);
+        }, debounceMs);
+      } else if (onSearch) {
+        onSearch(text);
+      }
+    },
+    [onChangeText, onSearch, debounceMs]
+  );
+
+  // Handle clear button press
+  const handleClear = useCallback(() => {
+    setInternalValue('');
+    onChangeText?.('');
+    onClear?.();
+    onSearch?.('');
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+  }, [onChangeText, onClear, onSearch]);
+
+  // Get container style based on variant and size
+  const baseStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: cardColor,
+    height: HEIGHT,
+    paddingHorizontal: 16,
+    borderRadius: CORNERS,
+  };
+
+  const baseInputStyle = {
+    flex: 1,
+    fontSize: FONT_SIZE,
+    color: textColor,
+    marginHorizontal: 8,
+  };
+
+  const displayValue = value !== undefined ? value : internalValue;
+  const showClear = showClearButton && displayValue.length > 0;
+
+  return (
+    <View style={[baseStyle, containerStyle]}>
+      {/* Left Icon */}
+      {leftIcon || <Icon name={Search} size={16} color={muted} />}
+
+      {/* Text Input */}
+      <TextInput
+        ref={inputRef}
+        style={[baseInputStyle, inputStyle]}
+        placeholder={placeholder}
+        placeholderTextColor={muted}
+        value={displayValue}
+        onChangeText={handleTextChange}
+        {...props}
+      />
+
+      {/* Loading Indicator */}
+      {loading && (
+        <ActivityIndicator
+          size='small'
+          color={muted}
+          style={{ marginRight: 4 }}
+        />
+      )}
+
+      {/* Clear Button */}
+      {showClear && !loading && (
+        <TouchableOpacity
+          onPress={handleClear}
+          style={{
+            backgroundColor: icon,
+            padding: 4,
+            borderRadius: CORNERS,
+            opacity: 0.6,
+          }}
+          activeOpacity={0.7}
+        >
+          <Icon name={X} size={16} color={cardColor} strokeWidth={2} />
+        </TouchableOpacity>
+      )}
+
+      {/* Right Icon */}
+      {rightIcon && !showClear && !loading && rightIcon}
+    </View>
+  );
+}
+
+// SearchBar with suggestions dropdown
+interface SearchBarWithSuggestionsProps extends SearchBarProps {
+  suggestions?: string[];
+  onSuggestionPress?: (suggestion: string) => void;
+  maxSuggestions?: number;
+  showSuggestions?: boolean;
+}
+
+export function SearchBarWithSuggestions({
+  suggestions = [],
+  onSuggestionPress,
+  maxSuggestions = 5,
+  showSuggestions = true,
+  containerStyle,
+  ...searchBarProps
+}: SearchBarWithSuggestionsProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const cardColor = useColor('card');
+  const borderColor = useColor('border');
+
+  const filteredSuggestions = suggestions
+    .filter((suggestion) =>
+      suggestion
+        .toLowerCase()
+        .includes((searchBarProps.value || '').toLowerCase())
+    )
+    .slice(0, maxSuggestions);
+
+  const shouldShowSuggestions =
+    showSuggestions &&
+    isExpanded &&
+    filteredSuggestions.length > 0 &&
+    (searchBarProps.value || '').length > 0;
+
+  const handleSuggestionPress = (suggestion: string) => {
+    onSuggestionPress?.(suggestion);
+    setIsExpanded(false);
+  };
+
+  return (
+    <View style={[{ width: '100%' }, containerStyle]}>
+      <SearchBar
+        {...searchBarProps}
+        onFocus={(e) => {
+          setIsExpanded(true);
+          searchBarProps.onFocus?.(e);
+        }}
+        onBlur={(e) => {
+          // Delay hiding suggestions to allow for suggestion tap
+          setTimeout(() => setIsExpanded(false), 150);
+          searchBarProps.onBlur?.(e);
+        }}
+      />
+
+      {/* Suggestions Dropdown */}
+      {shouldShowSuggestions && (
+        <View
+          style={{
+            position: 'absolute',
+            top: '100%',
+            left: 0,
+            right: 0,
+            backgroundColor: cardColor,
+            marginTop: 8,
+            borderRadius: 12,
+            maxHeight: 200,
+            zIndex: 999,
+          }}
+        >
+          {filteredSuggestions.map((suggestion, index) => (
+            <TouchableOpacity
+              key={`${suggestion}-${index}`}
+              onPress={() => handleSuggestionPress(suggestion)}
+              style={{
+                paddingHorizontal: 16,
+                paddingVertical: 12,
+                borderBottomWidth:
+                  index < filteredSuggestions.length - 1 ? 0.6 : 0,
+                borderBottomColor: borderColor,
+              }}
+              activeOpacity={0.7}
+            >
+              <Text>{suggestion}</Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+}

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

@@ -0,0 +1,30 @@
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+interface SeparatorProps {
+  orientation?: 'horizontal' | 'vertical';
+  style?: ViewStyle;
+}
+
+export function Separator({
+  orientation = 'horizontal',
+  style,
+}: SeparatorProps) {
+  const borderColor = useColor('border');
+
+  return (
+    <View
+      style={[
+        {
+          backgroundColor: borderColor,
+          ...(orientation === 'horizontal'
+            ? { height: 1, width: '100%' }
+            : { width: 1, height: '100%' }),
+        },
+        style,
+      ]}
+    />
+  );
+}