react-native-color-picker-palette 1.0.0

package/src/full/components/Saturation.tsx

@@ -0,0 +1,258 @@
+import React, { memo, useCallback, useMemo, useRef } from 'react';
+import {
+  View,
+  StyleSheet,
+  PanResponder,
+  GestureResponderEvent,
+} from 'react-native';
+import Svg, { Defs, RadialGradient, Stop, Circle, Path, G } from 'react-native-svg';
+import type { ISaturationProps } from '../../core/types';
+import { ColorService } from '../../core/services';
+import { clamp } from '../../core/utils';
+import { Thumb } from './Thumb';
+
+// Number of segments for perfect color wheel (360 = 1° per segment)
+const SEGMENT_COUNT = 360;
+
+/**
+ * Circular Color Wheel picker component
+ *
+ * Features:
+ * - Uses 360 SVG segments (perfect 1° precision)
+ * - Caches measurements for better performance
+ * - Angle around circle = Hue (0-360°)
+ * - Distance from center = Saturation (0-100%)
+ *
+ * @example
+ * ```tsx
+ * <Saturation
+ *   color={color}
+ *   onChange={handleChange}
+ *   size={250}
+ *   thumbSize={24}
+ * />
+ * ```
+ */
+export const Saturation = memo(
+  ({
+    color,
+    onChange,
+    onChangeComplete,
+    size,
+    thumbSize,
+    disabled = false,
+  }: ISaturationProps) => {
+    const containerRef = useRef<View>(null);
+    const measurementCache = useRef<{ x: number; y: number } | null>(null);
+
+    const radius = size / 2;
+    const effectiveRadius = radius - thumbSize / 2;
+
+    // Calculate thumb position from HSV values
+    const thumbPosition = useMemo(() => {
+      const angleRad = ((color.hsv.h - 90) * Math.PI) / 180;
+      const distance = (color.hsv.s / 100) * effectiveRadius;
+
+      const x = radius + Math.cos(angleRad) * distance - thumbSize / 2;
+      const y = radius + Math.sin(angleRad) * distance - thumbSize / 2;
+
+      return { x, y };
+    }, [color.hsv.h, color.hsv.s, radius, effectiveRadius, thumbSize]);
+
+    // Update measurement cache
+    const updateMeasurement = useCallback(() => {
+      return new Promise<{ x: number; y: number }>((resolve) => {
+        if (measurementCache.current) {
+          resolve(measurementCache.current);
+          return;
+        }
+        containerRef.current?.measureInWindow((x, y) => {
+          measurementCache.current = { x, y };
+          resolve({ x, y });
+        });
+      });
+    }, []);
+
+    // Convert touch coordinates to HSV
+    const updateColorFromPosition = useCallback(
+      async (pageX: number, pageY: number, isFinal: boolean) => {
+        const measurement = await updateMeasurement();
+
+        const x = pageX - measurement.x - radius;
+        const y = pageY - measurement.y - radius;
+
+        // Calculate angle (hue): 0° at top, clockwise
+        let angleDeg = (Math.atan2(y, x) * 180) / Math.PI + 90;
+        if (angleDeg < 0) angleDeg += 360;
+
+        // Calculate distance (saturation)
+        const distance = Math.min(Math.sqrt(x * x + y * y), effectiveRadius);
+        const saturation = (distance / effectiveRadius) * 100;
+
+        const nextColor = ColorService.convert('hsv', {
+          h: clamp(angleDeg, 0, 360),
+          s: clamp(saturation, 0, 100),
+          v: color.hsv.v,
+          a: color.hsv.a,
+        });
+
+        onChange(nextColor);
+
+        if (isFinal) {
+          onChangeComplete?.(nextColor);
+        }
+      },
+      [color.hsv.v, color.hsv.a, radius, effectiveRadius, onChange, onChangeComplete, updateMeasurement]
+    );
+
+    // Clear cache on layout change
+    const handleLayout = useCallback(() => {
+      measurementCache.current = null;
+    }, []);
+
+    // PanResponder for touch handling
+    const panResponder = useMemo(
+      () =>
+        PanResponder.create({
+          onStartShouldSetPanResponder: () => !disabled,
+          onMoveShouldSetPanResponder: () => !disabled,
+          onPanResponderGrant: (evt: GestureResponderEvent) => {
+            measurementCache.current = null;
+            updateColorFromPosition(
+              evt.nativeEvent.pageX,
+              evt.nativeEvent.pageY,
+              false
+            );
+          },
+          onPanResponderMove: (evt: GestureResponderEvent) => {
+            updateColorFromPosition(
+              evt.nativeEvent.pageX,
+              evt.nativeEvent.pageY,
+              false
+            );
+          },
+          onPanResponderRelease: (evt: GestureResponderEvent) => {
+            updateColorFromPosition(
+              evt.nativeEvent.pageX,
+              evt.nativeEvent.pageY,
+              true
+            );
+          },
+        }),
+      [disabled, updateColorFromPosition]
+    );
+
+    // Generate color wheel paths (360 segments - 1° per segment)
+    const colorWheelPaths = useMemo(() => {
+      const paths: { d: string; color: string }[] = [];
+      const angleStep = 360 / SEGMENT_COUNT;
+
+      for (let i = 0; i < SEGMENT_COUNT; i++) {
+        const startAngle = (i * angleStep - 90) * (Math.PI / 180);
+        const endAngle = ((i + 1) * angleStep - 90) * (Math.PI / 180);
+
+        const x1 = radius + Math.cos(startAngle) * radius;
+        const y1 = radius + Math.sin(startAngle) * radius;
+        const x2 = radius + Math.cos(endAngle) * radius;
+        const y2 = radius + Math.sin(endAngle) * radius;
+
+        // Use middle hue for the segment
+        const hue = (i + 0.5) * angleStep;
+
+        paths.push({
+          d: `M ${radius} ${radius} L ${x1} ${y1} A ${radius} ${radius} 0 0 1 ${x2} ${y2} Z`,
+          color: `hsl(${hue}, 100%, 50%)`,
+        });
+      }
+
+      return paths;
+    }, [radius]);
+
+    return (
+      <View
+        ref={containerRef}
+        onLayout={handleLayout}
+        style={[
+          styles.container,
+          {
+            width: size,
+            height: size,
+            opacity: disabled ? 0.5 : 1,
+          },
+        ]}
+        {...panResponder.panHandlers}
+      >
+        <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+          <Defs>
+            <RadialGradient
+              id="saturationGradient"
+              cx="50%"
+              cy="50%"
+              rx="50%"
+              ry="50%"
+            >
+              <Stop offset="0%" stopColor="#FFFFFF" stopOpacity="1" />
+              <Stop offset="100%" stopColor="#FFFFFF" stopOpacity="0" />
+            </RadialGradient>
+          </Defs>
+
+          {/* Color wheel segments */}
+          <G>
+            {colorWheelPaths.map((segment, index) => (
+              <Path
+                key={index}
+                d={segment.d}
+                fill={segment.color}
+                stroke={segment.color}
+                strokeWidth={1}
+              />
+            ))}
+          </G>
+
+          {/* Saturation overlay (white center fading out) */}
+          <Circle
+            cx={radius}
+            cy={radius}
+            r={radius}
+            fill="url(#saturationGradient)"
+          />
+
+          {/* Brightness overlay */}
+          <Circle
+            cx={radius}
+            cy={radius}
+            r={radius}
+            fill="#000000"
+            fillOpacity={1 - color.hsv.v / 100}
+          />
+        </Svg>
+
+        {/* Thumb indicator with selected color */}
+        <View
+          style={[
+            styles.thumbContainer,
+            {
+              left: thumbPosition.x,
+              top: thumbPosition.y,
+            },
+          ]}
+          pointerEvents="none"
+        >
+          <Thumb size={thumbSize} />
+        </View>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+  },
+  thumbContainer: {
+    position: 'absolute',
+    zIndex: 10,
+  },
+});
+
+Saturation.displayName = 'Saturation';

package/src/full/components/Thumb.tsx

@@ -0,0 +1,47 @@
+import React, { memo } from 'react';
+import { View, StyleSheet, ViewStyle } from 'react-native';
+
+interface ThumbProps {
+  size: number;
+  color?: string;
+  style?: ViewStyle;
+}
+
+/**
+ * Thumb component - Circle indicator for color pickers
+ *
+ * Features:
+ * - Shows the selected color inside (if provided)
+ * - White 2px border for visibility on any background
+ * - Shadow for depth
+ *
+ * @example
+ * ```tsx
+ * <Thumb size={24} color="#FF0000" />
+ * ```
+ */
+export const Thumb = memo(({ size, color, style }: ThumbProps) => {
+  const thumbStyle: ViewStyle = {
+    width: size,
+    height: size,
+    borderRadius: size / 2,
+    backgroundColor: color || 'transparent',
+  };
+
+  return <View style={[styles.thumb, thumbStyle, style]} />;
+});
+
+const styles = StyleSheet.create({
+  thumb: {
+    borderWidth: 2,
+    borderColor: '#FFFFFF',
+    // Shadow for visibility on any background
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.4,
+    shadowRadius: 2,
+    elevation: 4,
+  },
+});
+
+Thumb.displayName = 'Thumb';

package/src/full/components/Value.tsx

@@ -0,0 +1,192 @@
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  PanResponder,
+  GestureResponderEvent,
+  LayoutChangeEvent,
+} from 'react-native';
+import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
+import type { IValueProps } from '../../core/types';
+import { ColorService } from '../../core/services';
+import { clamp } from '../../core/utils';
+import { Thumb } from './Thumb';
+
+/**
+ * Value/Brightness slider bar component
+ *
+ * Features:
+ * - Uses react-native-svg for smooth gradient
+ * - Horizontal bar from black to full brightness
+ * - Used with circle variant for brightness control
+ *
+ * @example
+ * ```tsx
+ * <Value
+ *   color={color}
+ *   onChange={handleChange}
+ *   barHeight={10}
+ *   thumbSize={24}
+ * />
+ * ```
+ */
+export const Value = memo(
+  ({
+    color,
+    onChange,
+    onChangeComplete,
+    barHeight,
+    thumbSize,
+    disabled = false,
+  }: IValueProps) => {
+    const containerRef = useRef<View>(null);
+    const [width, setWidth] = useState(1);
+    const measurementCache = useRef<number | null>(null);
+
+    // Calculate thumb position from value (v=100 should be at right)
+    const thumbPosition = useMemo(() => {
+      return (color.hsv.v / 100) * width;
+    }, [color.hsv.v, 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 value
+    const updateColorFromPosition = useCallback(
+      async (pageX: number, isFinal: boolean) => {
+        const wx = await updateMeasurement();
+        const x = clamp(pageX - wx, 0, width);
+        const value = (x / width) * 100;
+
+        const nextColor = ColorService.convert('hsv', {
+          ...color.hsv,
+          v: clamp(value, 0, 100),
+        });
+
+        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;
+    }, []);
+
+    // Full brightness color for gradient end
+    const { h, s } = color.hsv;
+    const fullBrightnessColor = `hsl(${h}, ${s}%, ${50 - s / 4}%)`;
+
+    // Calculate thumb color
+    const thumbColor = useMemo(() => {
+      const { h, s, v } = color.hsv;
+      const l = (v / 200) * (200 - s);
+      return `hsl(${h}, ${s}%, ${l}%)`;
+    }, [color.hsv.h, color.hsv.s, color.hsv.v]);
+
+    return (
+      <View
+        ref={containerRef}
+        style={[
+          styles.container,
+          {
+            height: barHeight + thumbSize,
+            opacity: disabled ? 0.5 : 1,
+          },
+        ]}
+        onLayout={handleLayout}
+        {...panResponder.panHandlers}
+      >
+        {/* Gradient bar using SVG */}
+        <View style={[styles.barContainer, { height: barHeight, top: thumbSize / 2 }]}>
+          <Svg width="100%" height={barHeight}>
+            <Defs>
+              <LinearGradient id="valueGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                <Stop offset="0%" stopColor="#000000" />
+                <Stop offset="100%" stopColor={fullBrightnessColor} />
+              </LinearGradient>
+            </Defs>
+            <Rect
+              x="0"
+              y="0"
+              width="100%"
+              height={barHeight}
+              rx={barHeight / 2}
+              ry={barHeight / 2}
+              fill="url(#valueGradient)"
+            />
+          </Svg>
+        </View>
+
+        {/* Thumb indicator - centered vertically with bar */}
+        <View
+          style={[
+            styles.thumbContainer,
+            {
+              left: thumbPosition - thumbSize / 2,
+              top: barHeight / 2,
+            },
+          ]}
+          pointerEvents="none"
+        >
+          <Thumb size={thumbSize} color={thumbColor} />
+        </View>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    width: '100%',
+  },
+  barContainer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    overflow: 'hidden',
+  },
+  thumbContainer: {
+    position: 'absolute',
+    zIndex: 10,
+  },
+});
+
+Value.displayName = 'Value';

package/src/full/components/index.ts

@@ -0,0 +1,8 @@
+export { ColorPicker } from './ColorPicker';
+export { Saturation } from './Saturation';
+export { RectangleSaturation } from './RectangleSaturation';
+export { Hue } from './Hue';
+export { Alpha } from './Alpha';
+export { Value } from './Value';
+export { Thumb } from './Thumb';
+export { Fields, HexField, RgbFields } from './Fields';

package/src/full/index.ts

@@ -0,0 +1,69 @@
+/**
+ * React Native Color Palette - Full Version
+ *
+ * This version uses react-native-svg for smooth gradients and
+ * precise color rendering.
+ *
+ * @example
+ * ```tsx
+ * import { ColorPicker, useColor } from 'react-native-color-palette';
+ *
+ * function MyComponent() {
+ *   const [color, setColor] = useColor('#FF0000');
+ *
+ *   return (
+ *     <ColorPicker
+ *       color={color}
+ *       onChange={setColor}
+ *       onChangeComplete={(color) => console.log('Selected:', color.hex)}
+ *       width={250}
+ *       barHeight={10}
+ *       thumbSize={24}
+ *       hideAlpha={false}
+ *       hideInput={false}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+
+// Main component
+export { ColorPicker } from './components';
+
+// Individual components for custom layouts
+export {
+  Saturation,
+  RectangleSaturation,
+  Hue,
+  Alpha,
+  Value,
+  Thumb,
+  Fields,
+  HexField,
+  RgbFields,
+} from './components';
+
+// Re-export core utilities
+export {
+  ColorService,
+  useColor,
+  useColorWithCallback,
+  useComponentLayout,
+} from '../core';
+
+// Re-export types
+export type {
+  IColor,
+  IRGB,
+  IHSV,
+  ColorModel,
+  IColorPickerProps,
+  ISaturationProps,
+  IRectangleSaturationProps,
+  IHueProps,
+  IAlphaProps,
+  IValueProps,
+  IThumbProps,
+  IFieldsProps,
+  ILayout,
+} from '../core';

package/src/index.ts

@@ -0,0 +1,19 @@
+/**
+ * React Native Color Palette
+ *
+ * A versatile color picker for React Native with two flavors:
+ * - Full version (default): Uses react-native-svg for smooth gradients
+ * - Lite version: Zero external dependencies, uses pure React Native Views
+ *
+ * @example
+ * ```tsx
+ * // Full version (requires react-native-svg)
+ * import { ColorPicker, useColor } from 'react-native-color-palette';
+ *
+ * // Lite version (no external dependencies)
+ * import { ColorPicker, useColor } from 'react-native-color-palette/lite';
+ * ```
+ */
+
+// Export everything from the full version as the default
+export * from './full';