@darthrapid/react-native-color-picker 0.1.0

package/src/components/color-picker.tsx

@@ -0,0 +1,290 @@
+import React, {
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import {
+  Modal,
+  Pressable,
+  type DimensionValue,
+  type StyleProp,
+  type ViewStyle
+} from "react-native";
+import { PickerPanel } from "./picker-panel";
+import type { ColorPickerLabels, ColorPickerRef, TabId } from "../types/misc";
+import { DEFAULT_LABELS, themes } from "../shared/const";
+import { getContrastColor, hexToHsb, hsbToHex, isValidHex } from "../utils/colors";
+
+export type ColorPickerProps = {
+  /** Current color value (hex string) */
+  value?: string;
+  /** Called when color changes */
+  onChange?: (hex: string) => void;
+  /** Tabs to show (default: ["picker", "values", "recent"]) */
+  tabs?: TabId[];
+  /** Max recent colors (default: 16) */
+  maxRecentColors?: number;
+  /** Panel width in modal mode (default: 320). Accepts number or "100%". Ignored in inline mode. */
+  panelWidth?: DimensionValue;
+  /** Hue strip height (default: 28) */
+  hueStripHeight?: number;
+  /** Theme (default: "dark") */
+  theme?: "light" | "dark";
+  /** Disable touch input */
+  disabled?: boolean;
+  /** Style for the picker panel */
+  style?: StyleProp<ViewStyle>;
+  /** Swatch size (default: 48) */
+  swatchSize?: number;
+  /** Swatch border radius (default: 12) */
+  swatchBorderRadius?: number;
+  /** Style for the swatch trigger */
+  swatchStyle?: StyleProp<ViewStyle>;
+  /** Render inline instead of modal (default: false) */
+  inline?: boolean;
+  /** Override default labels for i18n */
+  labels?: ColorPickerLabels;
+  /** Style for modal wrapper */
+  modalStyle?: StyleProp<ViewStyle>;
+};
+
+export const ColorPicker = React.forwardRef<ColorPickerRef, ColorPickerProps>(
+  (
+    {
+      value = "#007AFF",
+      onChange,
+      tabs = ["picker", "values", "recent"],
+      maxRecentColors = 16,
+      panelWidth = "100%",
+      hueStripHeight = 28,
+      theme: themeName = "dark",
+      disabled = false,
+      style,
+      swatchSize = 48,
+      swatchBorderRadius = 12,
+      swatchStyle,
+      inline = false,
+      labels: userLabels,
+      modalStyle,
+    },
+    ref,
+  ) => {
+    const t = themes[themeName];
+    const labels = { ...DEFAULT_LABELS, ...userLabels };
+
+    const initial = hexToHsb(value);
+    const [hue, setHue] = useState(initial.h);
+    const [sat, setSat] = useState(initial.s);
+    const [bright, setBright] = useState(initial.b);
+    const [hexInput, setHexInput] = useState(value.toUpperCase());
+    const [recentColors, setRecentColors] = useState<string[]>([]);
+    const [modalVisible, setModalVisible] = useState(false);
+
+    const currentHex = hsbToHex(hue, sat, bright);
+    const contrastColor = getContrastColor(currentHex);
+
+    // Refs for stable handler closures
+    const hueRef = useRef(hue);
+    const satRef = useRef(sat);
+    const brightRef = useRef(bright);
+    hueRef.current = hue;
+    satRef.current = sat;
+    brightRef.current = bright;
+
+    // Sync hex input display — only update when NOT focused
+    const hexInputFocusedRef = useRef(false);
+    const currentHexRef = useRef(currentHex);
+    currentHexRef.current = currentHex;
+
+    if (!hexInputFocusedRef.current && hexInput !== currentHex.toUpperCase()) {
+      setHexInput(currentHex.toUpperCase());
+    }
+
+    // Sync from external value prop — only when parent actually changes value
+    const lastExternalValue = useRef(value);
+    if (value !== lastExternalValue.current) {
+      lastExternalValue.current = value;
+      if (isValidHex(value)) {
+        const hsb = hexToHsb(value);
+        // Only update if actually different to avoid loops
+        if (hsb.h !== hue || hsb.s !== sat || hsb.b !== bright) {
+          setHue(hsb.h);
+          setSat(hsb.s);
+          setBright(hsb.b);
+        }
+      }
+    }
+
+    const notifyChange = useCallback(
+      (h: number, s: number, b: number) => {
+        const hex = hsbToHex(h, s, b);
+        lastExternalValue.current = hex; // prevent sync-back
+        onChange?.(hex);
+      },
+      [onChange],
+    );
+
+    const addToRecent = useCallback(
+      (hex: string) => {
+        setRecentColors((prev) => {
+          const filtered = prev.filter((c) => c !== hex);
+          return [hex, ...filtered].slice(0, maxRecentColors);
+        });
+      },
+      [maxRecentColors],
+    );
+
+    const handleHueChange = useCallback(
+      (h: number) => {
+        setHue(h);
+        notifyChange(h, satRef.current, brightRef.current);
+      },
+      [notifyChange],
+    );
+
+    const handleSatBrightChange = useCallback(
+      ({ s, b }: { s: number; b: number }) => {
+        setSat(s);
+        setBright(b);
+        notifyChange(hueRef.current, s, b);
+      },
+      [notifyChange],
+    );
+
+    const handleHexSubmit = useCallback(() => {
+      const clean = hexInput.startsWith("#") ? hexInput : `#${hexInput}`;
+      if (isValidHex(clean)) {
+        const hsb = hexToHsb(clean);
+        setHue(hsb.h);
+        setSat(hsb.s);
+        setBright(hsb.b);
+        notifyChange(hsb.h, hsb.s, hsb.b);
+        addToRecent(clean);
+      } else {
+        setHexInput(currentHex.toUpperCase());
+      }
+    }, [hexInput, currentHex, notifyChange, addToRecent]);
+
+    const handleRecentSelect = useCallback(
+      (hex: string) => {
+        const hsb = hexToHsb(hex);
+        setHue(hsb.h);
+        setSat(hsb.s);
+        setBright(hsb.b);
+        notifyChange(hsb.h, hsb.s, hsb.b);
+      },
+      [notifyChange],
+    );
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        getColor: () => currentHex,
+        setColor: (hex: string) => {
+          if (!isValidHex(hex)) return;
+          const hsb = hexToHsb(hex);
+          setHue(hsb.h);
+          setSat(hsb.s);
+          setBright(hsb.b);
+          lastExternalValue.current = hex;
+          notifyChange(hsb.h, hsb.s, hsb.b);
+        },
+        clearRecent: () => setRecentColors([]),
+        open: () => setModalVisible(true),
+        close: () => setModalVisible(false),
+      }),
+      [currentHex, notifyChange],
+    );
+
+    const panelProps = {
+      hue,
+      sat,
+      bright,
+      currentHex,
+      contrastColor,
+      hexInput,
+      recentColors,
+      tabs,
+      hueStripHeight,
+      disabled,
+      t,
+      labels,
+      onHueChange: handleHueChange,
+      onSatBrightChange: handleSatBrightChange,
+      onHexInputChange: setHexInput,
+      onHexSubmit: handleHexSubmit,
+      onHexInputFocus: () => {
+        hexInputFocusedRef.current = true;
+      },
+      onHexInputBlur: () => {
+        hexInputFocusedRef.current = false;
+      },
+      onSaveRecent: () => addToRecent(currentHex),
+      onRecentSelect: handleRecentSelect,
+      onClearRecent: () => setRecentColors([]),
+    };
+
+    if (inline) {
+      return <PickerPanel {...panelProps} style={style} />;
+    }
+
+    return (
+      <>
+        <Pressable
+          onPress={() => setModalVisible(true)}
+          disabled={disabled}
+          style={[
+            {
+              width: swatchSize,
+              height: swatchSize,
+              borderRadius: swatchBorderRadius,
+              backgroundColor: currentHex,
+              borderWidth: 2,
+              borderColor: t.border,
+              shadowColor: "#000",
+              shadowOffset: { width: 0, height: 2 },
+              shadowOpacity: 0.15,
+              shadowRadius: 4,
+              elevation: 3,
+            },
+            swatchStyle,
+          ]}
+        />
+
+        <Modal
+          visible={modalVisible}
+          transparent
+          animationType="fade"
+          onRequestClose={() => setModalVisible(false)}
+        >
+          <Pressable
+            onPress={() => setModalVisible(false)}
+            style={[
+              {
+                flex: 1,
+                backgroundColor: t.overlay,
+                justifyContent: "center",
+                alignItems: "center",
+                padding: 20,
+              },
+              modalStyle,
+            ]}
+          >
+            <Pressable
+              onPress={() => {}}
+              style={{ width: "100%", alignItems: "center" }}
+            >
+              <PickerPanel
+                {...panelProps}
+                style={[{ width: panelWidth }, style]}
+              />
+            </Pressable>
+          </Pressable>
+        </Modal>
+      </>
+    );
+  },
+);
+
+ColorPicker.displayName = "ColorPicker";

package/src/components/hue-strip.tsx

@@ -0,0 +1,134 @@
+import React, {
+  useCallback,
+  useRef,
+  useState
+} from "react";
+import {
+  PanResponder,
+  View
+} from "react-native";
+import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg";
+import { hsbToHex } from "../utils/colors";
+
+type HueStripProps = {
+  hue: number;
+  height: number;
+  disabled: boolean;
+  thumbBorder: string;
+  onChange: (hue: number) => void;
+}
+
+export function HueStrip({
+  hue,
+  height,
+  disabled,
+  thumbBorder,
+  onChange,
+}: HueStripProps) {
+  const containerRef = useRef<React.ComponentRef<typeof View>>(null);
+  const originXRef = useRef(0);
+  const widthRef = useRef(0);
+  const disabledRef = useRef(disabled);
+  const onChangeRef = useRef(onChange);
+  disabledRef.current = disabled;
+  onChangeRef.current = onChange;
+
+  const [layoutWidth, setLayoutWidth] = useState(0);
+
+  const calcHue = useCallback((pageX: number) => {
+    const w = widthRef.current;
+    if (w === 0) return 0;
+    const x = Math.max(0, Math.min(pageX - originXRef.current, w));
+    return Math.round((x / w) * 360);
+  }, []);
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabledRef.current,
+      onStartShouldSetPanResponderCapture: () => !disabledRef.current,
+      onMoveShouldSetPanResponder: () => !disabledRef.current,
+      onMoveShouldSetPanResponderCapture: () => !disabledRef.current,
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderGrant: (evt) => {
+        const { pageX } = evt.nativeEvent;
+        containerRef.current?.measure((_x: number, _y: number, w: number, _h: number, ox: number) => {
+          originXRef.current = ox;
+          widthRef.current = w;
+          onChangeRef.current(calcHue(pageX));
+        });
+      },
+      onPanResponderMove: (evt) => {
+        onChangeRef.current(calcHue(evt.nativeEvent.pageX));
+      },
+    }),
+  ).current;
+
+  const hueColors = [
+    "#FF0000",
+    "#FFFF00",
+    "#00FF00",
+    "#00FFFF",
+    "#0000FF",
+    "#FF00FF",
+    "#FF0000",
+  ];
+  const thumbLeft = layoutWidth > 0 ? (hue / 360) * layoutWidth : 0;
+  const thumbSize = height + 6;
+
+  return (
+    <View
+      ref={containerRef}
+      onLayout={(e) => {
+        const w = e.nativeEvent.layout.width;
+        setLayoutWidth(w);
+        widthRef.current = w;
+      }}
+      style={{ width: "100%", height, overflow: "visible" }}
+      {...panResponder.panHandlers}
+    >
+      {layoutWidth > 0 && (
+        <>
+          <Svg width={layoutWidth} height={height}>
+            <Defs>
+              <LinearGradient id="hueGrad" x1="0" y1="0" x2="1" y2="0">
+                {hueColors.map((color, i) => (
+                  <Stop
+                    key={i}
+                    offset={`${(i / (hueColors.length - 1)) * 100}%`}
+                    stopColor={color}
+                  />
+                ))}
+              </LinearGradient>
+            </Defs>
+            <Rect
+              x="0"
+              y="0"
+              width={layoutWidth}
+              height={height}
+              rx={height / 2}
+              fill="url(#hueGrad)"
+            />
+          </Svg>
+          <View
+            style={{
+              position: "absolute",
+              left: thumbLeft - thumbSize / 2,
+              top: -3,
+              width: thumbSize,
+              height: thumbSize,
+              borderRadius: thumbSize / 2,
+              borderWidth: 3,
+              borderColor: thumbBorder,
+              backgroundColor: hsbToHex(hue, 100, 100),
+              shadowColor: "#000",
+              shadowOffset: { width: 0, height: 2 },
+              shadowOpacity: 0.3,
+              shadowRadius: 4,
+              elevation: 5,
+            }}
+          />
+        </>
+      )}
+    </View>
+  );
+}

package/src/components/picker-panel.tsx

@@ -0,0 +1,176 @@
+import { useState } from "react";
+import {
+  Pressable,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle
+} from "react-native";
+import type { ColorPickerLabels, TabId, Theme } from "../types/misc";
+import { PickerTab } from "./picker-tab";
+import { RecentTab } from "./recent-tab";
+import { TabBar } from "./tab-bar";
+import { ValuesTab } from "./values-tab";
+
+type PickerPanelProps = {
+  hue: number;
+  sat: number;
+  bright: number;
+  currentHex: string;
+  contrastColor: string;
+  hexInput: string;
+  recentColors: string[];
+  tabs: TabId[];
+  hueStripHeight: number;
+  disabled: boolean;
+  t: Theme;
+  labels: Required<ColorPickerLabels>;
+  onHueChange: (h: number) => void;
+  onSatBrightChange: (vals: { s: number; b: number }) => void;
+  onHexInputChange: (text: string) => void;
+  onHexSubmit: () => void;
+  onHexInputFocus: () => void;
+  onHexInputBlur: () => void;
+  onSaveRecent: () => void;
+  onRecentSelect: (hex: string) => void;
+  onClearRecent: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function PickerPanel({
+  hue,
+  sat,
+  bright,
+  currentHex,
+  contrastColor,
+  hexInput,
+  recentColors,
+  tabs,
+  hueStripHeight,
+  disabled,
+  t,
+  onHueChange,
+  onSatBrightChange,
+  onHexInputChange,
+  onHexSubmit,
+  onHexInputFocus,
+  onHexInputBlur,
+  onSaveRecent,
+  onRecentSelect,
+  onClearRecent,
+  labels,
+  style,
+}: PickerPanelProps) {
+  const [activeTab, setActiveTab] = useState<TabId>(tabs[0]!);
+
+  return (
+    <View
+      style={[
+        { backgroundColor: t.background, borderRadius: 20, overflow: "hidden" },
+        style,
+      ]}
+    >
+      {/* Color preview header */}
+      <View
+        style={{
+          height: 64,
+          backgroundColor: currentHex,
+          justifyContent: "flex-end",
+          paddingHorizontal: 16,
+          paddingBottom: 12,
+        }}
+      >
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+          }}
+        >
+          <Text
+            style={{
+              fontSize: 18,
+              fontWeight: "700",
+              color: contrastColor,
+              fontVariant: ["tabular-nums"],
+              letterSpacing: 0.5,
+            }}
+          >
+            {currentHex.toUpperCase()}
+          </Text>
+          <Pressable
+            onPress={onSaveRecent}
+            style={({ pressed }) => ({
+              backgroundColor: pressed
+                ? contrastColor === "#FFFFFF"
+                  ? "rgba(255,255,255,0.5)"
+                  : "rgba(0,0,0,0.3)"
+                : contrastColor === "#FFFFFF"
+                  ? "rgba(255,255,255,0.2)"
+                  : "rgba(0,0,0,0.1)",
+              paddingHorizontal: 12,
+              paddingVertical: 5,
+              borderRadius: 8,
+            })}
+          >
+            <Text
+              style={{ color: contrastColor, fontSize: 12, fontWeight: "600" }}
+            >
+              {labels.save}
+            </Text>
+          </Pressable>
+        </View>
+      </View>
+
+      {/* Tab bar */}
+      {tabs.length > 1 && (
+        <TabBar
+          tabs={tabs}
+          active={activeTab}
+          onSelect={setActiveTab}
+          t={t}
+          labels={labels}
+        />
+      )}
+
+      {/* Tab content */}
+      {activeTab === "picker" && (
+        <PickerTab
+          hue={hue}
+          sat={sat}
+          bright={bright}
+          hueStripHeight={hueStripHeight}
+          disabled={disabled}
+          t={t}
+          onHueChange={onHueChange}
+          onSatBrightChange={onSatBrightChange}
+        />
+      )}
+      {activeTab === "values" && (
+        <ValuesTab
+          hue={hue}
+          sat={sat}
+          bright={bright}
+          currentHex={currentHex}
+          hexInput={hexInput}
+          disabled={disabled}
+          t={t}
+          onHexInputChange={onHexInputChange}
+          onHexSubmit={onHexSubmit}
+          onHexInputFocus={onHexInputFocus}
+          onHexInputBlur={onHexInputBlur}
+        />
+      )}
+      {activeTab === "recent" && (
+        <RecentTab
+          recentColors={recentColors}
+          disabled={disabled}
+          t={t}
+          labels={labels}
+          onSelect={onRecentSelect}
+          onClear={onClearRecent}
+        />
+      )}
+    </View>
+  );
+}

package/src/components/picker-tab.tsx

@@ -0,0 +1,48 @@
+import {
+  View
+} from "react-native";
+import type { Theme } from "../types/misc";
+import { HueStrip } from "./hue-strip";
+import { SatBrightPad } from "./sat-bright-pad";
+
+type PickerTabProps = {
+  hue: number;
+  sat: number;
+  bright: number;
+  hueStripHeight: number;
+  disabled: boolean;
+  t: Theme;
+  onHueChange: (h: number) => void;
+  onSatBrightChange: (vals: { s: number; b: number }) => void;
+}
+
+export function PickerTab({
+  hue,
+  sat,
+  bright,
+  hueStripHeight,
+  disabled,
+  t,
+  onHueChange,
+  onSatBrightChange,
+}: PickerTabProps) {
+  return (
+    <View style={{ gap: 16, padding: 20 }}>
+      <SatBrightPad
+        hue={hue}
+        sat={sat}
+        bright={bright}
+        disabled={disabled}
+        thumbBorder={t.thumbBorder}
+        onChange={onSatBrightChange}
+      />
+      <HueStrip
+        hue={hue}
+        height={hueStripHeight}
+        disabled={disabled}
+        thumbBorder={t.thumbBorder}
+        onChange={onHueChange}
+      />
+    </View>
+  );
+}