react-native-color-picker-palette 1.0.0

package/src/lite/components/Alpha.tsx

@@ -0,0 +1,228 @@
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  PanResponder,
+  GestureResponderEvent,
+  LayoutChangeEvent,
+} from 'react-native';
+import type { IAlphaProps } from '../../core/types';
+import { ColorService } from '../../core/services';
+import { clamp } from '../../core/utils';
+import { Thumb } from './Thumb';
+
+/**
+ * Alpha (transparency) slider bar component - Zero Dependencies Version
+ *
+ * Uses pure React Native Views for checkerboard and gradient.
+ * No react-native-svg required.
+ *
+ * @example
+ * ```tsx
+ * <Alpha
+ *   color={color}
+ *   onChange={handleChange}
+ *   barHeight={10}
+ *   thumbSize={24}
+ * />
+ * ```
+ */
+export const Alpha = memo(
+  ({
+    color,
+    onChange,
+    onChangeComplete,
+    barHeight,
+    thumbSize,
+    disabled = false,
+  }: IAlphaProps) => {
+    const containerRef = useRef<View>(null);
+    const [width, setWidth] = useState(1);
+    const measurementCache = useRef<number | null>(null);
+
+    // Calculate thumb position from alpha value (a=1 should be at right)
+    const thumbPosition = useMemo(() => {
+      return color.hsv.a * width;
+    }, [color.hsv.a, width]);
+
+    // Update measurement cache
+    const updateMeasurement = useCallback(() => {
+      return new Promise<number>((resolve) => {
+        if (measurementCache.current !== null) {
+          resolve(measurementCache.current);
+          return;
+        }
+        containerRef.current?.measureInWindow((x) => {
+          measurementCache.current = x;
+          resolve(x);
+        });
+      });
+    }, []);
+
+    // Convert touch position to alpha
+    const updateColorFromPosition = useCallback(
+      async (pageX: number, isFinal: boolean) => {
+        const wx = await updateMeasurement();
+        const x = clamp(pageX - wx, 0, width);
+        const alpha = x / width;
+
+        const nextColor = ColorService.convert('hsv', {
+          ...color.hsv,
+          a: clamp(alpha, 0, 1),
+        });
+
+        onChange(nextColor);
+
+        if (isFinal) {
+          onChangeComplete?.(nextColor);
+        }
+      },
+      [color.hsv, width, onChange, onChangeComplete, updateMeasurement]
+    );
+
+    // PanResponder for touch handling
+    const panResponder = useMemo(
+      () =>
+        PanResponder.create({
+          onStartShouldSetPanResponder: () => !disabled,
+          onMoveShouldSetPanResponder: () => !disabled,
+          onPanResponderGrant: (evt: GestureResponderEvent) => {
+            measurementCache.current = null;
+            updateColorFromPosition(evt.nativeEvent.pageX, false);
+          },
+          onPanResponderMove: (evt: GestureResponderEvent) => {
+            updateColorFromPosition(evt.nativeEvent.pageX, false);
+          },
+          onPanResponderRelease: (evt: GestureResponderEvent) => {
+            updateColorFromPosition(evt.nativeEvent.pageX, true);
+          },
+        }),
+      [disabled, updateColorFromPosition]
+    );
+
+    // Handle layout to get width and clear cache
+    const handleLayout = useCallback((event: LayoutChangeEvent) => {
+      setWidth(event.nativeEvent.layout.width);
+      measurementCache.current = null;
+    }, []);
+
+    // Generate alpha gradient using colored Views with varying opacity
+    const alphaGradientSegments = useMemo(() => {
+      const segments: JSX.Element[] = [];
+      const steps = Math.max(1, Math.round(width));
+      const { r, g, b } = color.rgb;
+
+      for (let i = 0; i < steps; i++) {
+        const alpha = i / (steps - 1 || 1);
+
+        segments.push(
+          <View
+            key={i}
+            style={[
+              styles.gradientSegment,
+              {
+                flex: 1,
+                backgroundColor: `rgba(${r}, ${g}, ${b}, ${alpha})`,
+              },
+            ]}
+          />
+        );
+      }
+
+      return segments;
+    }, [width, color.rgb.r, color.rgb.g, color.rgb.b]);
+
+    return (
+      <View
+        ref={containerRef}
+        style={[
+          styles.container,
+          {
+            height: barHeight + thumbSize,
+            opacity: disabled ? 0.5 : 1,
+          },
+        ]}
+        onLayout={handleLayout}
+        {...panResponder.panHandlers}
+      >
+        {/* Bar with checkerboard and gradient */}
+        <View style={[styles.barContainer, { height: barHeight, top: thumbSize / 2 }]}>
+          {/* Checkerboard background */}
+          <View style={[styles.checkerboard, { borderRadius: barHeight / 2 }]}>
+            {Array.from({ length: 2 }).map((_, rowIndex) => {
+              const checkerSize = barHeight / 2;
+              const cellCount = Math.ceil(width / checkerSize) + 1;
+              return (
+                <View key={rowIndex} style={[styles.checkerRow, { height: checkerSize }]}>
+                  {Array.from({ length: cellCount }).map((_, i) => (
+                    <View
+                      key={i}
+                      style={{
+                        width: checkerSize,
+                        height: checkerSize,
+                        backgroundColor: (i + rowIndex) % 2 === 0 ? '#FFFFFF' : '#CCCCCC',
+                      }}
+                    />
+                  ))}
+                </View>
+              );
+            })}
+          </View>
+
+          {/* Color gradient overlay using Views */}
+          <View style={[styles.gradientContainer, { borderRadius: barHeight / 2 }]}>
+            {alphaGradientSegments}
+          </View>
+        </View>
+
+        {/* Thumb indicator */}
+        <View
+          style={[
+            styles.thumbContainer,
+            {
+              left: thumbPosition - thumbSize / 2,
+              top: barHeight / 2,
+            },
+          ]}
+          pointerEvents="none"
+        >
+          <Thumb size={thumbSize} color={`rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.hsv.a})`} />
+        </View>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    width: '100%',
+  },
+  barContainer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    overflow: 'hidden',
+  },
+  checkerboard: {
+    ...StyleSheet.absoluteFillObject,
+    overflow: 'hidden',
+  },
+  checkerRow: {
+    flexDirection: 'row',
+  },
+  gradientContainer: {
+    ...StyleSheet.absoluteFillObject,
+    flexDirection: 'row',
+    overflow: 'hidden',
+  },
+  gradientSegment: {
+    height: '100%',
+  },
+  thumbContainer: {
+    position: 'absolute',
+    zIndex: 10,
+  },
+});
+
+Alpha.displayName = 'Alpha';

package/src/lite/components/ColorPicker.tsx

@@ -0,0 +1,209 @@
+import React, { memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { IColorPickerProps } from '../../core/types';
+import { Saturation } from './Saturation';
+import { RectangleSaturation } from './RectangleSaturation';
+import { Hue } from './Hue';
+import { Alpha } from './Alpha';
+import { Value } from './Value';
+import { Fields } from './Fields';
+
+/**
+ * Main ColorPicker component (Lite version - Zero Dependencies)
+ *
+ * This version uses pure React Native Views instead of react-native-svg.
+ * No additional native dependencies required.
+ *
+ * Features:
+ * - Circular color wheel or rectangle for saturation/value selection
+ * - Horizontal hue bar
+ * - Horizontal alpha bar with checkerboard background
+ * - HEX and RGB input fields
+ * - Circle thumbs with white 2px border showing selected color
+ *
+ * @example
+ * ```tsx
+ * import { ColorPicker, useColor } from 'react-native-color-palette/lite';
+ *
+ * function MyComponent() {
+ *   const [color, setColor] = useColor('#FF0000');
+ *
+ *   return (
+ *     <ColorPicker
+ *       color={color}
+ *       onChange={setColor}
+ *       variant="rectangle"
+ *       onChangeComplete={(c) => console.log('Final color:', c.hex)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export const ColorPicker = memo(
+  ({
+    color,
+    onChange,
+    onChangeComplete,
+    variant = 'rectangle',
+    width = 250,
+    barHeight = 10,
+    thumbSize = 24,
+    hideHue = false,
+    hideAlpha = false,
+    hidePreview = false,
+    hideInput = false,
+    disabled = false,
+  }: IColorPickerProps) => {
+    // Rectangle height is 60% of width for better proportions
+    const rectangleHeight = width * 0.6;
+
+    return (
+      <View style={[styles.container, disabled && styles.disabled]}>
+        {/* Color picker (circle or rectangle) */}
+        <View style={styles.pickerContainer}>
+          {variant === 'circle' ? (
+            <Saturation
+              color={color}
+              onChange={onChange}
+              onChangeComplete={onChangeComplete}
+              size={width}
+              thumbSize={thumbSize}
+              disabled={disabled}
+            />
+          ) : (
+            <RectangleSaturation
+              color={color}
+              onChange={onChange}
+              onChangeComplete={onChangeComplete}
+              width={width}
+              height={rectangleHeight}
+              thumbSize={thumbSize}
+              disabled={disabled}
+            />
+          )}
+        </View>
+
+        {/* Color preview */}
+        {!hidePreview && (
+          <View style={styles.previewContainer}>
+            <View
+              style={[
+                styles.preview,
+                {
+                  backgroundColor: color.hex,
+                },
+              ]}
+            />
+            <View
+              style={[
+                styles.previewAlpha,
+                {
+                  backgroundColor: `rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.rgb.a})`,
+                },
+              ]}
+            />
+          </View>
+        )}
+
+        {/* Sliders section */}
+        <View style={styles.slidersContainer}>
+          {/* Hue slider - always shown for rectangle variant */}
+          {(!hideHue || variant === 'rectangle') && (
+            <View style={styles.sliderRow}>
+              <Hue
+                color={color}
+                onChange={onChange}
+                onChangeComplete={onChangeComplete}
+                barHeight={barHeight}
+                thumbSize={thumbSize}
+                disabled={disabled}
+              />
+            </View>
+          )}
+
+          {/* Value/Brightness slider - only for circle variant */}
+          {variant === 'circle' && (
+            <View style={styles.sliderRow}>
+              <Value
+                color={color}
+                onChange={onChange}
+                onChangeComplete={onChangeComplete}
+                barHeight={barHeight}
+                thumbSize={thumbSize}
+                disabled={disabled}
+              />
+            </View>
+          )}
+
+          {/* Alpha slider */}
+          {!hideAlpha && (
+            <View style={styles.sliderRow}>
+              <Alpha
+                color={color}
+                onChange={onChange}
+                onChangeComplete={onChangeComplete}
+                barHeight={barHeight}
+                thumbSize={thumbSize}
+                disabled={disabled}
+              />
+            </View>
+          )}
+        </View>
+
+        {/* Input fields */}
+        {!hideInput && (
+          <View style={styles.fieldsContainer}>
+            <Fields
+              color={color}
+              onChange={onChange}
+              onChangeComplete={onChangeComplete}
+              disabled={disabled}
+            />
+          </View>
+        )}
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    padding: 16,
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+  pickerContainer: {
+    marginBottom: 20,
+  },
+  previewContainer: {
+    flexDirection: 'row',
+    marginBottom: 20,
+    borderRadius: 8,
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: '#E0E0E0',
+  },
+  preview: {
+    width: 40,
+    height: 40,
+  },
+  previewAlpha: {
+    width: 40,
+    height: 40,
+  },
+  slidersContainer: {
+    width: '100%',
+    gap: 16,
+    marginBottom: 20,
+  },
+  sliderRow: {
+    width: '100%',
+  },
+  fieldsContainer: {
+    width: '100%',
+  },
+});
+
+ColorPicker.displayName = 'ColorPicker';

package/src/lite/components/Fields/HexField.tsx

@@ -0,0 +1,103 @@
+import React, { memo, useState, useCallback, useEffect } from 'react';
+import { View, TextInput, Text, StyleSheet } from 'react-native';
+import type { IFieldsProps } from '../../../core/types';
+import { ColorService } from '../../../core/services';
+
+/**
+ * Hex color input field
+ *
+ * Features:
+ * - Shows and edits hex value (e.g., #FF5500)
+ * - Validates input on blur
+ * - Auto-capitalizes and adds # prefix
+ */
+export const HexField = memo(
+  ({
+    color,
+    onChange,
+    onChangeComplete,
+    disabled = false,
+  }: IFieldsProps) => {
+    const [inputValue, setInputValue] = useState(color.hex);
+    const [isFocused, setIsFocused] = useState(false);
+
+    useEffect(() => {
+      if (!isFocused) {
+        setInputValue(color.hex);
+      }
+    }, [color.hex, isFocused]);
+
+    const handleChangeText = useCallback((text: string) => {
+      let value = text.toUpperCase();
+      if (!value.startsWith('#')) {
+        value = '#' + value;
+      }
+      value = value.slice(0, 9);
+      setInputValue(value);
+    }, []);
+
+    const handleBlur = useCallback(() => {
+      setIsFocused(false);
+      const hexRegex = /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/;
+
+      if (hexRegex.test(inputValue)) {
+        const nextColor = ColorService.convert('hex', inputValue);
+        onChange(nextColor);
+        onChangeComplete?.(nextColor);
+      } else {
+        setInputValue(color.hex);
+      }
+    }, [inputValue, color.hex, onChange, onChangeComplete]);
+
+    const handleFocus = useCallback(() => {
+      setIsFocused(true);
+    }, []);
+
+    return (
+      <View style={styles.container}>
+        <Text style={styles.label}>HEX</Text>
+        <TextInput
+          style={[styles.input, disabled && styles.inputDisabled]}
+          value={inputValue}
+          onChangeText={handleChangeText}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          editable={!disabled}
+          autoCapitalize="characters"
+          autoCorrect={false}
+          maxLength={9}
+          placeholder="#000000"
+          placeholderTextColor="#999999"
+          numberOfLines={1}
+        />
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  label: {
+    fontSize: 10,
+    fontWeight: '600',
+    color: '#666666',
+    marginBottom: 4,
+    textAlign: 'center',
+  },
+  input: {
+    height: 36,
+    borderWidth: 1,
+    borderColor: '#E0E0E0',
+    borderRadius: 6,
+    fontSize: 14,
+    color: '#333333',
+    backgroundColor: '#FFFFFF',
+    textAlign: 'center',
+  },
+  inputDisabled: {
+    backgroundColor: '#F5F5F5',
+    color: '#999999',
+  },
+});
+
+HexField.displayName = 'HexField';

package/src/lite/components/Fields/RgbFields.tsx

@@ -0,0 +1,138 @@
+import React, { memo, useState, useCallback, useEffect } from 'react';
+import { View, TextInput, Text, StyleSheet } from 'react-native';
+import type { IFieldsProps } from '../../../core/types';
+import { ColorService } from '../../../core/services';
+import { clamp, safeParseInt } from '../../../core/utils';
+
+interface RgbInputProps {
+  label: string;
+  value: number;
+  onChange: (value: number) => void;
+  onComplete: () => void;
+  disabled?: boolean;
+}
+
+const RgbInput = memo(
+  ({ label, value, onChange, onComplete, disabled }: RgbInputProps) => {
+    const [inputValue, setInputValue] = useState(String(value));
+    const [isFocused, setIsFocused] = useState(false);
+
+    useEffect(() => {
+      if (!isFocused) {
+        setInputValue(String(value));
+      }
+    }, [value, isFocused]);
+
+    const handleChangeText = useCallback((text: string) => {
+      const numericValue = text.replace(/[^0-9]/g, '');
+      setInputValue(numericValue);
+    }, []);
+
+    const handleBlur = useCallback(() => {
+      setIsFocused(false);
+      const numValue = clamp(safeParseInt(inputValue), 0, 255);
+      setInputValue(String(numValue));
+      onChange(numValue);
+      onComplete();
+    }, [inputValue, onChange, onComplete]);
+
+    const handleFocus = useCallback(() => {
+      setIsFocused(true);
+    }, []);
+
+    return (
+      <View style={styles.inputContainer}>
+        <Text style={styles.label}>{label}</Text>
+        <TextInput
+          style={[styles.input, disabled && styles.inputDisabled]}
+          value={inputValue}
+          onChangeText={handleChangeText}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          editable={!disabled}
+          keyboardType="number-pad"
+          maxLength={3}
+          placeholder="0"
+          placeholderTextColor="#999999"
+        />
+      </View>
+    );
+  }
+);
+
+/**
+ * RGB color input fields
+ */
+export const RgbFields = memo(
+  ({
+    color,
+    onChange,
+    onChangeComplete,
+    disabled = false,
+  }: IFieldsProps) => {
+    const handleRChange = useCallback(
+      (r: number) => {
+        const nextColor = ColorService.convert('rgb', { ...color.rgb, r });
+        onChange(nextColor);
+      },
+      [color.rgb, onChange]
+    );
+
+    const handleGChange = useCallback(
+      (g: number) => {
+        const nextColor = ColorService.convert('rgb', { ...color.rgb, g });
+        onChange(nextColor);
+      },
+      [color.rgb, onChange]
+    );
+
+    const handleBChange = useCallback(
+      (b: number) => {
+        const nextColor = ColorService.convert('rgb', { ...color.rgb, b });
+        onChange(nextColor);
+      },
+      [color.rgb, onChange]
+    );
+
+    const handleComplete = useCallback(() => {
+      onChangeComplete?.(color);
+    }, [color, onChangeComplete]);
+
+    return (
+      <View style={styles.container}>
+        <RgbInput label="R" value={color.rgb.r} onChange={handleRChange} onComplete={handleComplete} disabled={disabled} />
+        <RgbInput label="G" value={color.rgb.g} onChange={handleGChange} onComplete={handleComplete} disabled={disabled} />
+        <RgbInput label="B" value={color.rgb.b} onChange={handleBChange} onComplete={handleComplete} disabled={disabled} />
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: { flexDirection: 'row', gap: 8 },
+  inputContainer: { flex: 1 },
+  label: {
+    fontSize: 10,
+    fontWeight: '600',
+    color: '#666666',
+    marginBottom: 4,
+    textAlign: 'center',
+  },
+  input: {
+    height: 36,
+    borderWidth: 1,
+    borderColor: '#E0E0E0',
+    borderRadius: 6,
+    paddingHorizontal: 8,
+    fontSize: 14,
+    color: '#333333',
+    backgroundColor: '#FFFFFF',
+    textAlign: 'center',
+  },
+  inputDisabled: {
+    backgroundColor: '#F5F5F5',
+    color: '#999999',
+  },
+});
+
+RgbFields.displayName = 'RgbFields';