@darthrapid/react-native-color-picker 0.1.0

package/src/components/recent-tab.tsx

@@ -0,0 +1,90 @@
+import {
+  Pressable,
+  Text,
+  View
+} from "react-native";
+import type { ColorPickerLabels, Theme } from "../types/misc";
+
+type RecentTabProps = {
+  recentColors: string[];
+  disabled: boolean;
+  t: Theme;
+  labels: Required<ColorPickerLabels>;
+  onSelect: (hex: string) => void;
+  onClear: () => void;
+}
+
+export function RecentTab({
+  recentColors,
+  disabled,
+  t,
+  labels,
+  onSelect,
+  onClear,
+}: RecentTabProps) {
+  if (recentColors.length === 0) {
+    return (
+      <View
+        style={{
+          padding: 20,
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: 120,
+        }}
+      >
+        <Text style={{ color: t.textDim, fontSize: 14 }}>
+          {labels.noSavedColors}
+        </Text>
+        <Text style={{ color: t.textDim, fontSize: 12, marginTop: 4 }}>
+          {labels.noSavedColorsHint}
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={{ padding: 20, gap: 16 }}>
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <Text
+          style={{
+            color: t.textMuted,
+            fontSize: 11,
+            fontWeight: "700",
+            letterSpacing: 1,
+            textTransform: "uppercase",
+          }}
+        >
+          {labels.savedColors}
+        </Text>
+        <Pressable onPress={onClear}>
+          <Text style={{ color: t.textDim, fontSize: 12, fontWeight: "600" }}>
+            {labels.clearAll}
+          </Text>
+        </Pressable>
+      </View>
+      <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 10 }}>
+        {recentColors.map((c, i) => (
+          <Pressable
+            key={`${c}-${i}`}
+            onPress={() => onSelect(c)}
+            disabled={disabled}
+            style={{
+              width: 44,
+              height: 44,
+              borderRadius: 10,
+              backgroundColor: c,
+              borderWidth: 1,
+              borderColor: t.border,
+            }}
+          />
+        ))}
+      </View>
+    </View>
+  );
+}

package/src/components/sat-bright-pad.tsx

@@ -0,0 +1,158 @@
+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 SatBrightPadProps = {
+  hue: number;
+  sat: number;
+  bright: number;
+  disabled: boolean;
+  thumbBorder: string;
+  onChange: (vals: { s: number; b: number }) => void;
+}
+
+export function SatBrightPad({
+  hue,
+  sat,
+  bright,
+  disabled,
+  thumbBorder,
+  onChange,
+}: SatBrightPadProps) {
+  const containerRef = useRef<React.ComponentRef<typeof View>>(null);
+  const originRef = useRef<{ x: number; y: number } | null>(null);
+  const sizeRef = useRef(0);
+  const disabledRef = useRef(disabled);
+  const onChangeRef = useRef(onChange);
+  disabledRef.current = disabled;
+  onChangeRef.current = onChange;
+
+  const [layoutSize, setLayoutSize] = useState(0);
+
+  const calcValues = useCallback((pageX: number, pageY: number) => {
+    const s = sizeRef.current;
+    if (!originRef.current || s === 0) return null;
+    const x = Math.max(0, Math.min(pageX - originRef.current.x, s));
+    const y = Math.max(0, Math.min(pageY - originRef.current.y, s));
+    return {
+      s: Math.round((x / s) * 100),
+      b: Math.round(100 - (y / s) * 100),
+    };
+  }, []);
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabledRef.current,
+      onStartShouldSetPanResponderCapture: () => !disabledRef.current,
+      onMoveShouldSetPanResponder: () => !disabledRef.current,
+      onMoveShouldSetPanResponderCapture: () => !disabledRef.current,
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderGrant: (evt) => {
+        const { pageX, pageY } = evt.nativeEvent;
+        containerRef.current?.measure((_x: number, _y: number, w: number, _h: number, ox: number, oy: number) => {
+          originRef.current = { x: ox, y: oy };
+          sizeRef.current = w;
+          const vals = calcValues(pageX, pageY);
+          if (vals) onChangeRef.current(vals);
+        });
+      },
+      onPanResponderMove: (evt) => {
+        const { pageX, pageY } = evt.nativeEvent;
+        const vals = calcValues(pageX, pageY);
+        if (vals) onChangeRef.current(vals);
+      },
+    }),
+  ).current;
+
+  const thumbX = (sat / 100) * layoutSize;
+  const thumbY = ((100 - bright) / 100) * layoutSize;
+  const currentColor = hsbToHex(hue, sat, bright);
+  const hueColor = hsbToHex(hue, 100, 100);
+
+  return (
+    <View
+      ref={containerRef}
+      onLayout={(e) => {
+        const w = e.nativeEvent.layout.width;
+        setLayoutSize(w);
+        sizeRef.current = w;
+      }}
+      style={{
+        width: "100%",
+        aspectRatio: 1,
+        borderRadius: 12,
+        overflow: "hidden",
+      }}
+      {...panResponder.panHandlers}
+    >
+      {layoutSize > 0 && (
+        <>
+          <Svg
+            width={layoutSize}
+            height={layoutSize}
+            style={{ position: "absolute", top: 0, left: 0 }}
+          >
+            <Defs>
+              <LinearGradient id="grad_sat" x1="0" y1="0" x2="1" y2="0">
+                <Stop offset="0" stopColor="#FFFFFF" stopOpacity={1} />
+                <Stop offset="1" stopColor={hueColor} stopOpacity={1} />
+              </LinearGradient>
+            </Defs>
+            <Rect
+              x="0"
+              y="0"
+              width={layoutSize}
+              height={layoutSize}
+              fill="url(#grad_sat)"
+            />
+          </Svg>
+          <Svg
+            width={layoutSize}
+            height={layoutSize}
+            style={{ position: "absolute", top: 0, left: 0 }}
+          >
+            <Defs>
+              <LinearGradient id="grad_bright" x1="0" y1="0" x2="0" y2="1">
+                <Stop offset="0" stopColor="#000000" stopOpacity={0} />
+                <Stop offset="1" stopColor="#000000" stopOpacity={1} />
+              </LinearGradient>
+            </Defs>
+            <Rect
+              x="0"
+              y="0"
+              width={layoutSize}
+              height={layoutSize}
+              fill="url(#grad_bright)"
+            />
+          </Svg>
+          <View
+            style={{
+              position: "absolute",
+              left: thumbX - 12,
+              top: thumbY - 12,
+              width: 24,
+              height: 24,
+              borderRadius: 12,
+              borderWidth: 3,
+              borderColor: thumbBorder,
+              backgroundColor: currentColor,
+              shadowColor: "#000",
+              shadowOffset: { width: 0, height: 2 },
+              shadowOpacity: 0.4,
+              shadowRadius: 4,
+              elevation: 5,
+            }}
+          />
+        </>
+      )}
+    </View>
+  );
+}

package/src/components/tab-bar.tsx

@@ -0,0 +1,59 @@
+import {
+  Pressable,
+  Text,
+  View
+} from "react-native";
+import type { ColorPickerLabels, TabId, Theme } from "../types/misc";
+
+type TabBarProps = {
+  tabs: TabId[];
+  active: TabId;
+  onSelect: (tab: TabId) => void;
+  t: Theme;
+  labels: Required<ColorPickerLabels>;
+}
+
+export function TabBar({
+  tabs,
+  active,
+  onSelect,
+  t,
+  labels,
+}: TabBarProps) {
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        borderBottomWidth: 1,
+        borderBottomColor: t.border,
+      }}
+    >
+      {tabs.map((tab) => {
+        const isActive = tab === active;
+        return (
+          <Pressable
+            key={tab}
+            onPress={() => onSelect(tab)}
+            style={{
+              flex: 1,
+              paddingVertical: 12,
+              alignItems: "center",
+              borderBottomWidth: 2,
+              borderBottomColor: isActive ? t.tabIndicator : "transparent",
+            }}
+          >
+            <Text
+              style={{
+                fontSize: 13,
+                fontWeight: "600",
+                color: isActive ? t.tabActive : t.tabInactive,
+              }}
+            >
+              {labels[tab]}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

package/src/components/values-tab.tsx

@@ -0,0 +1,166 @@
+import {
+  Text,
+  TextInput,
+  View
+} from "react-native";
+import type { Theme } from "../types/misc";
+import { hexToRgb } from "../utils/colors";
+
+type ValuesTabProps = {
+  hue: number;
+  sat: number;
+  bright: number;
+  currentHex: string;
+  hexInput: string;
+  disabled: boolean;
+  t: Theme;
+  onHexInputChange: (text: string) => void;
+  onHexSubmit: () => void;
+  onHexInputFocus: () => void;
+  onHexInputBlur: () => void;
+}
+
+export function ValuesTab({
+  hue,
+  sat,
+  bright,
+  currentHex,
+  hexInput,
+  disabled,
+  t,
+  onHexInputChange,
+  onHexSubmit,
+  onHexInputFocus,
+  onHexInputBlur,
+}: ValuesTabProps) {
+  const rgb = hexToRgb(currentHex);
+
+  return (
+    <View style={{ padding: 20, gap: 16 }}>
+      {/* Hex input */}
+      <View style={{ flexDirection: "row", gap: 8 }}>
+        <TextInput
+          value={hexInput}
+          onChangeText={onHexInputChange}
+          onBlur={() => {
+            onHexInputBlur();
+            onHexSubmit();
+          }}
+          onFocus={onHexInputFocus}
+          onSubmitEditing={onHexSubmit}
+          maxLength={7}
+          autoCapitalize="characters"
+          autoCorrect={false}
+          editable={!disabled}
+          style={{
+            flex: 1,
+            backgroundColor: t.inputBg,
+            borderWidth: 1,
+            borderColor: t.border,
+            borderRadius: 10,
+            paddingHorizontal: 14,
+            paddingVertical: 12,
+            color: t.text,
+            fontSize: 16,
+            fontWeight: "500",
+            fontVariant: ["tabular-nums"],
+          }}
+        />
+        <View
+          style={{
+            width: 48,
+            height: 48,
+            borderRadius: 10,
+            backgroundColor: currentHex,
+            borderWidth: 1,
+            borderColor: t.border,
+          }}
+        />
+      </View>
+
+      {/* RGB */}
+      <View style={{ flexDirection: "row", gap: 8 }}>
+        {[
+          { label: "R", value: rgb.r, color: "#FF6B6B" },
+          { label: "G", value: rgb.g, color: "#51CF66" },
+          { label: "B", value: rgb.b, color: "#339AF0" },
+        ].map(({ label, value: val, color }) => (
+          <View
+            key={label}
+            style={{
+              flex: 1,
+              backgroundColor: t.surface,
+              borderRadius: 10,
+              paddingVertical: 10,
+              alignItems: "center",
+            }}
+          >
+            <Text
+              style={{
+                color,
+                fontSize: 10,
+                fontWeight: "700",
+                letterSpacing: 1,
+              }}
+            >
+              {label}
+            </Text>
+            <Text
+              style={{
+                color: t.text,
+                fontSize: 20,
+                fontWeight: "600",
+                fontVariant: ["tabular-nums"],
+                marginTop: 2,
+              }}
+            >
+              {val}
+            </Text>
+          </View>
+        ))}
+      </View>
+
+      {/* HSB */}
+      <View style={{ flexDirection: "row", gap: 8 }}>
+        {[
+          { label: "H", value: `${hue}°` },
+          { label: "S", value: `${sat}%` },
+          { label: "B", value: `${bright}%` },
+        ].map(({ label, value: val }) => (
+          <View
+            key={label}
+            style={{
+              flex: 1,
+              backgroundColor: t.surface,
+              borderRadius: 10,
+              paddingVertical: 10,
+              alignItems: "center",
+            }}
+          >
+            <Text
+              style={{
+                color: t.textMuted,
+                fontSize: 10,
+                fontWeight: "700",
+                letterSpacing: 1,
+              }}
+            >
+              {label}
+            </Text>
+            <Text
+              style={{
+                color: t.text,
+                fontSize: 20,
+                fontWeight: "600",
+                fontVariant: ["tabular-nums"],
+                marginTop: 2,
+              }}
+            >
+              {val}
+            </Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+}

package/src/index.tsx

@@ -0,0 +1,2 @@
+export { ColorPicker, type ColorPickerProps } from "./components/color-picker";
+export type { ColorPickerRef, ColorPickerLabels } from "./types/misc";

package/src/shared/const.ts

@@ -0,0 +1,43 @@
+import type { ColorPickerLabels } from "../types/misc";
+
+export const DEFAULT_LABELS: Required<ColorPickerLabels> = {
+  picker: "Picker",
+  values: "Values",
+  recent: "Recent",
+  save: "Save",
+  savedColors: "Saved Colors",
+  clearAll: "Clear All",
+  noSavedColors: "No saved colors yet",
+  noSavedColorsHint: 'Tap "Save" to add colors here',
+};
+
+export const themes = {
+  dark: {
+    background: "#1A1A2E",
+    surface: "rgba(255,255,255,0.06)",
+    border: "rgba(255,255,255,0.08)",
+    text: "#FFFFFF",
+    textMuted: "rgba(255,255,255,0.4)",
+    textDim: "rgba(255,255,255,0.2)",
+    inputBg: "rgba(255,255,255,0.08)",
+    thumbBorder: "#FFFFFF",
+    overlay: "rgba(0,0,0,0.6)",
+    tabActive: "#FFFFFF",
+    tabInactive: "rgba(255,255,255,0.3)",
+    tabIndicator: "#FFFFFF",
+  },
+  light: {
+    background: "#FFFFFF",
+    surface: "rgba(0,0,0,0.04)",
+    border: "rgba(0,0,0,0.08)",
+    text: "#000000",
+    textMuted: "rgba(0,0,0,0.5)",
+    textDim: "rgba(0,0,0,0.2)",
+    inputBg: "rgba(0,0,0,0.05)",
+    thumbBorder: "#FFFFFF",
+    overlay: "rgba(0,0,0,0.4)",
+    tabActive: "#000000",
+    tabInactive: "rgba(0,0,0,0.3)",
+    tabIndicator: "#000000",
+  },
+};

package/src/types/misc.ts

@@ -0,0 +1,24 @@
+import type { themes } from "../shared/const";
+
+export type ColorPickerRef = {
+  getColor: () => string;
+  setColor: (hex: string) => void;
+  clearRecent: () => void;
+  open: () => void;
+  close: () => void;
+};
+
+export type TabId = "picker" | "values" | "recent";
+
+export type ColorPickerLabels = {
+  picker?: string;
+  values?: string;
+  recent?: string;
+  save?: string;
+  savedColors?: string;
+  clearAll?: string;
+  noSavedColors?: string;
+  noSavedColorsHint?: string;
+};
+
+export type Theme = (typeof themes)["dark"];

package/src/utils/colors.ts

@@ -0,0 +1,57 @@
+export function hsbToHex(h: number, s: number, b: number): string {
+  const s1 = s / 100;
+  const b1 = b / 100;
+  const k = (n: number) => (n + h / 60) % 6;
+  const f = (n: number) =>
+    b1 * (1 - s1 * Math.max(0, Math.min(k(n), 4 - k(n), 1)));
+  const toHex = (v: number) =>
+    Math.round(v * 255)
+      .toString(16)
+      .padStart(2, "0");
+  return `#${toHex(f(5))}${toHex(f(3))}${toHex(f(1))}`;
+}
+
+export function hexToHsb(hex: string): { h: number; s: number; b: number } {
+  const clean = hex.replace("#", "");
+  const full =
+    clean.length === 3
+      ? clean
+        .split("")
+        .map((c) => c + c)
+        .join("")
+      : clean;
+  const r = parseInt(full.slice(0, 2), 16) / 255;
+  const g = parseInt(full.slice(2, 4), 16) / 255;
+  const b = parseInt(full.slice(4, 6), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const d = max - min;
+  let h = 0;
+  if (d !== 0) {
+    if (max === r) h = ((g - b) / d + 6) % 6;
+    else if (max === g) h = (b - r) / d + 2;
+    else h = (r - g) / d + 4;
+    h *= 60;
+  }
+  const s = max === 0 ? 0 : (d / max) * 100;
+  return { h: Math.round(h), s: Math.round(s), b: Math.round(max * 100) };
+}
+
+export function hexToRgb(hex: string): { r: number; g: number; b: number } {
+  const clean = hex.replace("#", "");
+  return {
+    r: parseInt(clean.slice(0, 2), 16),
+    g: parseInt(clean.slice(2, 4), 16),
+    b: parseInt(clean.slice(4, 6), 16),
+  };
+}
+
+export function isValidHex(hex: string): boolean {
+  return /^#?[0-9A-Fa-f]{6}$/.test(hex);
+}
+
+export function getContrastColor(hex: string): string {
+  const { r, g, b } = hexToRgb(hex);
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.5 ? "#000000" : "#FFFFFF";
+}