react-native-color-picker-palette 1.0.0

package/src/lite/components/Saturation.tsx

@@ -0,0 +1,289 @@
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  PanResponder,
+  GestureResponderEvent,
+  LayoutChangeEvent,
+} from 'react-native';
+import type { ISaturationProps } from '../../core/types';
+import { ColorService } from '../../core/services';
+import { clamp } from '../../core/utils';
+import { Thumb } from './Thumb';
+
+/**
+ * Circular Color Wheel - Zero Dependencies Version
+ *
+ * Uses pure React Native Views to create the color wheel.
+ * No react-native-svg required.
+ *
+ * @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 [isLayoutReady, setIsLayoutReady] = useState(false);
+
+    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;
+
+        let angleDeg = (Math.atan2(y, x) * 180) / Math.PI + 90;
+        if (angleDeg < 0) angleDeg += 360;
+
+        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]
+    );
+
+    // Handle layout
+    const handleLayout = useCallback((event: LayoutChangeEvent) => {
+      measurementCache.current = null;
+      setIsLayoutReady(true);
+    }, []);
+
+    // PanResponder
+    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 hue wheel segments (360 Views for smooth gradient)
+    const colorWheelSegments = useMemo(() => {
+      const segments: JSX.Element[] = [];
+      const segmentCount = 360;
+      const angleStep = 360 / segmentCount;
+
+      for (let i = 0; i < segmentCount; i++) {
+        const hue = i * angleStep;
+        const rotation = hue - 90;
+
+        segments.push(
+          <View
+            key={i}
+            style={[
+              styles.segment,
+              {
+                width: size,
+                height: size,
+                transform: [{ rotate: `${rotation}deg` }],
+              },
+            ]}
+          >
+            <View
+              style={[
+                styles.segmentInner,
+                {
+                  width: radius + 2,
+                  height: radius * Math.tan((angleStep * Math.PI) / 360) * 2 + 4,
+                  backgroundColor: `hsl(${hue}, 100%, 50%)`,
+                },
+              ]}
+            />
+          </View>
+        );
+      }
+
+      return segments;
+    }, [size, radius]);
+
+    // Saturation overlay - small constant opacity per circle, accumulates linearly
+    const saturationOverlay = useMemo(() => {
+      const circles: JSX.Element[] = [];
+      const steps = 50;
+      const opacityPerCircle = 2.5 / steps;
+
+      for (let i = 1; i <= steps; i++) {
+        const scale = 1 - i / steps;
+
+        if (scale > 0.01) {
+          circles.push(
+            <View
+              key={i}
+              style={[
+                styles.saturationCircle,
+                {
+                  width: size * scale,
+                  height: size * scale,
+                  borderRadius: (size * scale) / 2,
+                  backgroundColor: `rgba(255, 255, 255, ${opacityPerCircle})`,
+                },
+              ]}
+            />
+          );
+        }
+      }
+
+      return circles;
+    }, [size]);
+
+    return (
+      <View
+        ref={containerRef}
+        onLayout={handleLayout}
+        style={[
+          styles.container,
+          {
+            width: size,
+            height: size,
+            borderRadius: radius,
+            opacity: disabled ? 0.5 : 1,
+          },
+        ]}
+        {...panResponder.panHandlers}
+      >
+        {/* Color wheel segments */}
+        <View style={[styles.wheelContainer, { borderRadius: radius }]}>
+          {colorWheelSegments}
+        </View>
+
+        {/* Saturation overlay (white gradient to center) */}
+        <View style={[styles.saturationContainer, { borderRadius: radius }]}>
+          {saturationOverlay}
+        </View>
+
+        {/* Brightness overlay */}
+        <View
+          style={[
+            styles.brightnessOverlay,
+            {
+              borderRadius: radius,
+              backgroundColor: `rgba(0, 0, 0, ${1 - color.hsv.v / 100})`,
+            },
+          ]}
+        />
+
+        {/* Thumb */}
+        <View
+          style={[
+            styles.thumbContainer,
+            {
+              left: thumbPosition.x,
+              top: thumbPosition.y,
+            },
+          ]}
+          pointerEvents="none"
+        >
+          <Thumb size={thumbSize} />
+        </View>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    overflow: 'hidden',
+    backgroundColor: '#808080',
+  },
+  wheelContainer: {
+    ...StyleSheet.absoluteFillObject,
+    overflow: 'hidden',
+  },
+  segment: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+  segmentInner: {
+    position: 'absolute',
+    right: 0,
+  },
+  saturationContainer: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+  },
+  saturationCircle: {
+    position: 'absolute',
+  },
+  brightnessOverlay: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  thumbContainer: {
+    position: 'absolute',
+    zIndex: 10,
+  },
+});
+
+Saturation.displayName = 'Saturation';

package/src/lite/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/lite/components/Value.tsx

@@ -0,0 +1,201 @@
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  PanResponder,
+  GestureResponderEvent,
+  LayoutChangeEvent,
+} from 'react-native';
+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 - Zero Dependencies Version
+ *
+ * Uses pure React Native Views to create the brightness gradient.
+ * No react-native-svg required.
+ *
+ * @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;
+    }, []);
+
+    // Generate brightness gradient using Views (black to full color)
+    const valueSegments = useMemo(() => {
+      const segments: JSX.Element[] = [];
+      const steps = Math.max(1, Math.round(width));
+      const { h, s } = color.hsv;
+
+      for (let i = 0; i < steps; i++) {
+        const value = (i / steps) * 100;
+        // HSV to HSL conversion for display
+        const l = (value / 200) * (200 - s);
+
+        segments.push(
+          <View
+            key={i}
+            style={[
+              styles.segment,
+              {
+                flex: 1,
+                backgroundColor: `hsl(${h}, ${s}%, ${l}%)`,
+              },
+            ]}
+          />
+        );
+      }
+
+      return segments;
+    }, [width, color.hsv.h, color.hsv.s]);
+
+    // 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 colored Views */}
+        <View style={[styles.barContainer, { height: barHeight, top: thumbSize / 2, borderRadius: barHeight / 2 }]}>
+          {valueSegments}
+        </View>
+
+        {/* Thumb indicator */}
+        <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,
+    flexDirection: 'row',
+    overflow: 'hidden',
+  },
+  segment: {
+    height: '100%',
+  },
+  thumbContainer: {
+    position: 'absolute',
+    zIndex: 10,
+  },
+});
+
+Value.displayName = 'Value';

package/src/lite/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/lite/index.ts

@@ -0,0 +1,75 @@
+/**
+ * React Native Color Palette - Lite Version (Zero Dependencies)
+ *
+ * This version uses pure React Native Views instead of react-native-svg.
+ * No additional native dependencies required!
+ *
+ * Benefits:
+ * - No native linking required
+ * - Smaller bundle size
+ * - Works with Expo out of the box
+ * - No pod install needed
+ *
+ * @example
+ * ```tsx
+ * import { ColorPicker, useColor } from 'react-native-color-palette/lite';
+ *
+ * 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';