kynjal-cli 2.0.6

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

@@ -0,0 +1,347 @@
+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 { LucideProps } from 'lucide-react-native';
+import React from 'react';
+import { TextStyle, TouchableOpacity, ViewStyle } from 'react-native';
+
+type ToggleVariant = 'default' | 'outline';
+type ToggleSize = 'default' | 'icon';
+
+interface ToggleProps {
+  children: React.ReactNode;
+  pressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+  variant?: ToggleVariant;
+  size?: ToggleSize;
+  disabled?: boolean;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+}
+
+export function Toggle({
+  children,
+  pressed = false,
+  onPressedChange,
+  variant = 'default',
+  size = 'icon',
+  disabled = false,
+  style,
+  textStyle,
+}: ToggleProps) {
+  const primaryColor = useColor('primary');
+  const primaryForegroundColor = useColor('primaryForeground');
+  const secondaryColor = useColor('secondary');
+  const secondaryForegroundColor = useColor('secondaryForeground');
+  const borderColor = useColor('border');
+
+  const handlePress = () => {
+    if (!disabled) {
+      onPressedChange?.(!pressed);
+    }
+  };
+
+  const getToggleStyle = (): ViewStyle => {
+    const baseStyle: ViewStyle = {
+      borderRadius: CORNERS,
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'row',
+    };
+
+    // Size variants - following button component pattern
+    switch (size) {
+      case 'icon':
+        Object.assign(baseStyle, {
+          width: HEIGHT,
+          height: HEIGHT,
+        });
+        break;
+      default:
+        Object.assign(baseStyle, { height: HEIGHT, paddingHorizontal: 32 });
+    }
+
+    // State and variant styles - following button component pattern
+    if (pressed) {
+      switch (variant) {
+        case 'outline':
+          return {
+            ...baseStyle,
+            backgroundColor: primaryColor,
+            borderWidth: 1,
+            borderColor: primaryColor,
+          };
+        default:
+          return {
+            ...baseStyle,
+            backgroundColor: primaryColor,
+          };
+      }
+    } else {
+      switch (variant) {
+        case 'outline':
+          return {
+            ...baseStyle,
+            backgroundColor: 'transparent',
+            borderWidth: 1,
+            borderColor: borderColor,
+          };
+        default:
+          return {
+            ...baseStyle,
+            backgroundColor: secondaryColor,
+          };
+      }
+    }
+  };
+
+  const getToggleTextStyle = (): TextStyle => {
+    const baseTextStyle: TextStyle = {
+      fontSize: FONT_SIZE,
+      fontWeight: '500',
+    };
+
+    if (pressed) {
+      switch (variant) {
+        case 'outline':
+          return { ...baseTextStyle, color: primaryForegroundColor };
+        default:
+          return { ...baseTextStyle, color: primaryForegroundColor };
+      }
+    } else {
+      switch (variant) {
+        case 'outline':
+          return { ...baseTextStyle, color: primaryColor };
+        default:
+          return { ...baseTextStyle, color: secondaryForegroundColor };
+      }
+    }
+  };
+
+  const toggleStyle = getToggleStyle();
+  const finalTextStyle = getToggleTextStyle();
+
+  return (
+    <TouchableOpacity
+      style={[toggleStyle, disabled && { opacity: 0.5 }, style]}
+      onPress={handlePress}
+      disabled={disabled}
+      activeOpacity={0.8}
+    >
+      {typeof children === 'string' ? (
+        <Text style={[finalTextStyle, textStyle]}>{children}</Text>
+      ) : (
+        children
+      )}
+    </TouchableOpacity>
+  );
+}
+
+type ToggleGroupType = 'single' | 'multiple';
+type ToggleGroupVariant = 'default' | 'outline';
+type ToggleGroupSize = 'default' | 'icon';
+
+interface ToggleGroupItem {
+  value: string;
+  label: string;
+  icon?: React.ComponentType<LucideProps>;
+  disabled?: boolean;
+}
+
+interface ToggleGroupProps {
+  type?: ToggleGroupType;
+  value?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  items: ToggleGroupItem[];
+  variant?: ToggleGroupVariant;
+  size?: ToggleGroupSize;
+  disabled?: boolean;
+  style?: ViewStyle;
+  orientation?: 'horizontal' | 'vertical';
+}
+
+export function ToggleGroup({
+  type = 'single',
+  value,
+  onValueChange,
+  items,
+  variant = 'default',
+  size = 'default',
+  disabled = false,
+  style,
+  orientation = 'horizontal',
+}: ToggleGroupProps) {
+  const borderColor = useColor('border');
+  const primaryColor = useColor('primary');
+  const primaryForegroundColor = useColor('primaryForeground');
+  const secondaryForegroundColor = useColor('secondaryForeground');
+
+  const handleItemPress = (itemValue: string) => {
+    if (disabled) return;
+
+    if (type === 'single') {
+      // Single selection
+      const newValue = value === itemValue ? undefined : itemValue;
+      onValueChange?.(newValue || '');
+    } else {
+      // Multiple selection
+      const currentValues = Array.isArray(value) ? value : [];
+      const newValues = currentValues.includes(itemValue)
+        ? currentValues.filter((v) => v !== itemValue)
+        : [...currentValues, itemValue];
+      onValueChange?.(newValues);
+    }
+  };
+
+  const isItemPressed = (itemValue: string): boolean => {
+    if (type === 'single') {
+      return value === itemValue;
+    } else {
+      return Array.isArray(value) && value.includes(itemValue);
+    }
+  };
+
+  const containerStyle: ViewStyle = {
+    flexDirection: orientation === 'horizontal' ? 'row' : 'column',
+    borderWidth: 1,
+    borderColor: borderColor,
+    borderRadius: CORNERS,
+    overflow: 'hidden',
+    backgroundColor: 'transparent',
+  };
+
+  const getItemStyle = (index: number): ViewStyle => {
+    const isLast = index === items.length - 1;
+
+    const itemStyle: ViewStyle = {
+      flex: orientation === 'horizontal' ? 1 : 0,
+      borderRadius: 0,
+      borderWidth: 0,
+      borderRightWidth: orientation === 'horizontal' && !isLast ? 1 : 0,
+      borderBottomWidth: orientation === 'vertical' && !isLast ? 1 : 0,
+      borderColor: borderColor,
+    };
+
+    return itemStyle;
+  };
+
+  return (
+    <View style={[containerStyle, style]}>
+      {items.map((item, index) => (
+        <Toggle
+          key={item.value}
+          pressed={isItemPressed(item.value)}
+          onPressedChange={() => handleItemPress(item.value)}
+          variant={variant}
+          size={size}
+          disabled={disabled || item.disabled}
+          style={getItemStyle(index)}
+        >
+          {item.icon && item.label ? (
+            <View
+              style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}
+            >
+              <Icon
+                name={item.icon}
+                size={16}
+                strokeWidth={2.5}
+                color={
+                  isItemPressed(item.value)
+                    ? primaryForegroundColor
+                    : variant === 'outline'
+                    ? primaryColor
+                    : secondaryForegroundColor
+                }
+              />
+              <Text
+                style={{
+                  color: isItemPressed(item.value)
+                    ? primaryForegroundColor
+                    : variant === 'outline'
+                    ? primaryColor
+                    : secondaryForegroundColor,
+                }}
+              >
+                {item.label}
+              </Text>
+            </View>
+          ) : item.icon ? (
+            <Icon
+              name={item.icon}
+              size={16}
+              strokeWidth={2.5}
+              color={
+                isItemPressed(item.value)
+                  ? primaryForegroundColor
+                  : variant === 'outline'
+                  ? primaryColor
+                  : secondaryForegroundColor
+              }
+            />
+          ) : (
+            <Text
+              style={{
+                color: isItemPressed(item.value)
+                  ? primaryForegroundColor
+                  : variant === 'outline'
+                  ? primaryColor
+                  : secondaryForegroundColor,
+              }}
+            >
+              {item.label}
+            </Text>
+          )}
+        </Toggle>
+      ))}
+    </View>
+  );
+}
+
+// Convenience components for common use cases
+export function ToggleGroupSingle({
+  value,
+  onValueChange,
+  ...props
+}: Omit<ToggleGroupProps, 'type' | 'value' | 'onValueChange'> & {
+  value?: string;
+  onValueChange?: (value: string) => void;
+}) {
+  const handleValueChange = (newValue: string | string[]) => {
+    // For single selection, we know it will always be a string
+    onValueChange?.(newValue as string);
+  };
+
+  return (
+    <ToggleGroup
+      type='single'
+      value={value}
+      onValueChange={handleValueChange}
+      {...props}
+    />
+  );
+}
+
+export function ToggleGroupMultiple({
+  value,
+  onValueChange,
+  ...props
+}: Omit<ToggleGroupProps, 'type' | 'value' | 'onValueChange'> & {
+  value?: string[];
+  onValueChange?: (value: string[]) => void;
+}) {
+  const handleValueChange = (newValue: string | string[]) => {
+    // For multiple selection, we know it will always be a string array
+    onValueChange?.(newValue as string[]);
+  };
+
+  return (
+    <ToggleGroup
+      type='multiple'
+      value={value}
+      onValueChange={handleValueChange}
+      {...props}
+    />
+  );
+}