react-native-color-picker-palette 1.0.0

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

@@ -0,0 +1,53 @@
+import React, { memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { IFieldsProps } from '../../../core/types';
+import { HexField } from './HexField';
+import { RgbFields } from './RgbFields';
+
+/**
+ * Color input fields container
+ */
+export const Fields = memo(
+  ({
+    color,
+    onChange,
+    onChangeComplete,
+    disabled = false,
+  }: IFieldsProps) => {
+    return (
+      <View style={styles.container}>
+        <View style={styles.hexContainer}>
+          <HexField
+            color={color}
+            onChange={onChange}
+            onChangeComplete={onChangeComplete}
+            disabled={disabled}
+          />
+        </View>
+        <View style={styles.rgbContainer}>
+          <RgbFields
+            color={color}
+            onChange={onChange}
+            onChangeComplete={onChangeComplete}
+            disabled={disabled}
+          />
+        </View>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    gap: 12,
+    alignItems: 'flex-end',
+  },
+  hexContainer: { flex: 1 },
+  rgbContainer: { flex: 2 },
+});
+
+Fields.displayName = 'Fields';
+
+export { HexField } from './HexField';
+export { RgbFields } from './RgbFields';

package/src/lite/components/Hue.tsx

@@ -0,0 +1,192 @@
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  PanResponder,
+  GestureResponderEvent,
+  LayoutChangeEvent,
+} from 'react-native';
+import type { IHueProps } from '../../core/types';
+import { ColorService } from '../../core/services';
+import { clamp } from '../../core/utils';
+import { Thumb } from './Thumb';
+
+/**
+ * Hue slider bar component - Zero Dependencies Version
+ *
+ * Uses pure React Native Views to create the rainbow gradient.
+ * No react-native-svg required.
+ *
+ * @example
+ * ```tsx
+ * <Hue
+ *   color={color}
+ *   onChange={handleChange}
+ *   barHeight={10}
+ *   thumbSize={24}
+ * />
+ * ```
+ */
+export const Hue = memo(
+  ({
+    color,
+    onChange,
+    onChangeComplete,
+    barHeight,
+    thumbSize,
+    disabled = false,
+  }: IHueProps) => {
+    const containerRef = useRef<View>(null);
+    const [width, setWidth] = useState(1);
+    const measurementCache = useRef<number | null>(null);
+
+    // Calculate thumb position from hue value
+    const thumbPosition = useMemo(() => {
+      return (color.hsv.h / 360) * width;
+    }, [color.hsv.h, 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 hue
+    const updateColorFromPosition = useCallback(
+      async (pageX: number, isFinal: boolean) => {
+        const wx = await updateMeasurement();
+        const x = clamp(pageX - wx, 0, width);
+        const hue = (x / width) * 360;
+
+        const nextColor = ColorService.convert('hsv', {
+          ...color.hsv,
+          h: clamp(hue, 0, 360),
+          s: 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 rainbow gradient using colored Views (1 pixel per segment)
+    const hueSegments = useMemo(() => {
+      const segments: JSX.Element[] = [];
+      const steps = Math.max(1, Math.round(width));
+
+      for (let i = 0; i < steps; i++) {
+        const hue = (i / steps) * 360;
+
+        segments.push(
+          <View
+            key={i}
+            style={[
+              styles.segment,
+              {
+                flex: 1,
+                backgroundColor: `hsl(${hue}, 100%, 50%)`,
+              },
+            ]}
+          />
+        );
+      }
+
+      return segments;
+    }, [width]);
+
+    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 }]}>
+          {hueSegments}
+        </View>
+
+        {/* Thumb indicator - centered vertically with bar */}
+        <View
+          style={[
+            styles.thumbContainer,
+            {
+              left: thumbPosition - thumbSize / 2,
+              top: barHeight / 2,
+            },
+          ]}
+          pointerEvents="none"
+        >
+          <Thumb size={thumbSize} color={`hsl(${color.hsv.h}, 100%, 50%)`} />
+        </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,
+  },
+});
+
+Hue.displayName = 'Hue';

package/src/lite/components/RectangleSaturation.tsx

@@ -0,0 +1,238 @@
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  PanResponder,
+  GestureResponderEvent,
+  LayoutChangeEvent,
+} from 'react-native';
+import type { IRectangleSaturationProps } from '../../core/types';
+import { ColorService } from '../../core/services';
+import { clamp } from '../../core/utils';
+import { Thumb } from './Thumb';
+
+/**
+ * Rectangle Saturation/Value Picker - Zero Dependencies Version
+ *
+ * Uses pure React Native Views for gradients.
+ * No react-native-svg required.
+ *
+ * Layout:
+ * - Top-right: Current hue at full saturation (100% S, 100% V)
+ * - Top-left: White (0% S, 100% V)
+ * - Bottom-left: Black (0% S, 0% V)
+ * - Bottom-right: Black (100% S, 0% V)
+ *
+ * X-axis: Saturation (0% to 100%)
+ * Y-axis: Value/Brightness (100% to 0%)
+ *
+ * @example
+ * ```tsx
+ * <RectangleSaturation
+ *   color={color}
+ *   onChange={handleChange}
+ *   width={250}
+ *   height={150}
+ *   thumbSize={24}
+ * />
+ * ```
+ */
+export const RectangleSaturation = memo(
+  ({
+    color,
+    onChange,
+    onChangeComplete,
+    width,
+    height,
+    thumbSize,
+    disabled = false,
+  }: IRectangleSaturationProps) => {
+    // Key: steps = dimension (1 pixel per segment) avoids all sub-pixel gaps
+    const horizontalSteps = width;
+    const verticalSteps = height;
+    const containerRef = useRef<View>(null);
+    const measurementCache = useRef<{ x: number; y: number } | null>(null);
+    const [isLayoutReady, setIsLayoutReady] = useState(false);
+
+    // Calculate thumb position from HSV values
+    const thumbPosition = useMemo(() => {
+      const x = (color.hsv.s / 100) * width - thumbSize / 2;
+      const y = ((100 - color.hsv.v) / 100) * height - thumbSize / 2;
+      return { x: clamp(x, -thumbSize / 2, width - thumbSize / 2), y: clamp(y, -thumbSize / 2, height - thumbSize / 2) };
+    }, [color.hsv.s, color.hsv.v, width, height, 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 = clamp(pageX - measurement.x, 0, width);
+        const y = clamp(pageY - measurement.y, 0, height);
+
+        const saturation = (x / width) * 100;
+        const value = 100 - (y / height) * 100;
+
+        const nextColor = ColorService.convert('hsv', {
+          h: color.hsv.h,
+          s: clamp(saturation, 0, 100),
+          v: clamp(value, 0, 100),
+          a: color.hsv.a,
+        });
+
+        onChange(nextColor);
+
+        if (isFinal) {
+          onChangeComplete?.(nextColor);
+        }
+      },
+      [color.hsv.h, color.hsv.a, width, height, 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 white gradient overlay (left to right: white to transparent)
+    const whiteGradient = useMemo(() => {
+      const segments: JSX.Element[] = [];
+      for (let i = 0; i < horizontalSteps; i++) {
+        const opacity = 1 - i / horizontalSteps;
+        segments.push(
+          <View
+            key={`white-${i}`}
+            style={{
+              flex: 1,
+              backgroundColor: `rgba(255, 255, 255, ${opacity})`,
+            }}
+          />
+        );
+      }
+      return segments;
+    }, [horizontalSteps]);
+
+    // Generate black gradient overlay (top to bottom: transparent to black)
+    const blackGradient = useMemo(() => {
+      const segments: JSX.Element[] = [];
+      for (let i = 0; i < verticalSteps; i++) {
+        const opacity = i / verticalSteps;
+        segments.push(
+          <View
+            key={`black-${i}`}
+            style={{
+              flex: 1,
+              backgroundColor: `rgba(0, 0, 0, ${opacity})`,
+            }}
+          />
+        );
+      }
+      return segments;
+    }, [verticalSteps]);
+
+    // Current hue color at full saturation
+    const hueColor = `hsl(${color.hsv.h}, 100%, 50%)`;
+
+    return (
+      <View
+        ref={containerRef}
+        onLayout={handleLayout}
+        style={[
+          styles.container,
+          {
+            width,
+            height,
+            opacity: disabled ? 0.5 : 1,
+          },
+        ]}
+        {...panResponder.panHandlers}
+      >
+        {/* Base hue color */}
+        <View style={[styles.hueLayer, { backgroundColor: hueColor }]} />
+
+        {/* White gradient (horizontal: left white to right transparent) */}
+        <View style={styles.whiteGradientContainer}>
+          {whiteGradient}
+        </View>
+
+        {/* Black gradient (vertical: top transparent to bottom black) */}
+        <View style={styles.blackGradientContainer}>
+          {blackGradient}
+        </View>
+
+        {/* Thumb */}
+        <View
+          style={[
+            styles.thumbContainer,
+            {
+              left: thumbPosition.x,
+              top: thumbPosition.y,
+            },
+          ]}
+          pointerEvents="none"
+        >
+          <Thumb size={thumbSize} color={color.hex} />
+        </View>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
+  hueLayer: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  whiteGradientContainer: {
+    ...StyleSheet.absoluteFillObject,
+    flexDirection: 'row',
+  },
+  blackGradientContainer: {
+    ...StyleSheet.absoluteFillObject,
+    flexDirection: 'column',
+  },
+  thumbContainer: {
+    position: 'absolute',
+    zIndex: 10,
+  },
+});
+
+RectangleSaturation.displayName = 'RectangleSaturation';