@wireservers-ui/react-natives 0.1.0

package/src/color-picker/color-picker-slider.tsx

@@ -0,0 +1,98 @@
+import React, { useCallback, useRef } from 'react';
+import { View, Platform } from 'react-native';
+import { useColorPickerContext } from './color-picker';
+import type { ColorPickerSliderProps } from './types';
+import { colorPickerSliderStyle } from './styles';
+import { hexToHsv, hsvToHex, clamp } from './color-utils';
+import { usePointerDrag } from './use-pointer-drag';
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+const rnSvg = require('react-native-svg');
+const Svg: React.ComponentType<any> = rnSvg.default || rnSvg.Svg;
+const Rect: React.ComponentType<any> = rnSvg.Rect;
+const Defs: React.ComponentType<any> = rnSvg.Defs;
+const SvgLinearGradient: React.ComponentType<any> = rnSvg.LinearGradient;
+const Stop: React.ComponentType<any> = rnSvg.Stop;
+/* eslint-enable @typescript-eslint/no-var-requires */
+
+const DEFAULT_HEIGHT = 200;
+const DEFAULT_WIDTH = 24;
+const HIT_SLOP = 14;
+const isWeb = Platform.OS === 'web';
+
+export const ColorPickerSlider = React.forwardRef<
+  React.ElementRef<typeof View>,
+  ColorPickerSliderProps
+>(({ className, height = DEFAULT_HEIGHT, width = DEFAULT_WIDTH, ...props }, ref) => {
+  const { color, onColorChange } = useColorPickerContext();
+
+  const { h, s, v } = hexToHsv(color);
+
+  const sRef = useRef(s);
+  const vRef = useRef(v);
+  sRef.current = s;
+  vRef.current = v;
+
+  const onColorChangeRef = useRef(onColorChange);
+  onColorChangeRef.current = onColorChange;
+
+  const heightRef = useRef(height);
+  heightRef.current = height;
+
+  const hueSelectorY = (h / 360) * height;
+
+  const hueSelYRef = useRef(hueSelectorY);
+  hueSelYRef.current = hueSelectorY;
+
+  const drag = usePointerDrag(
+    useCallback((_relX: number, relY: number) => {
+      const ht = heightRef.current;
+      const newH = clamp(relY / ht, 0, 1) * 360;
+      onColorChangeRef.current(hsvToHex(Math.round(newH), sRef.current, vRef.current));
+    }, []),
+    useCallback((_relX: number, relY: number) => {
+      return Math.abs(relY - hueSelYRef.current) <= HIT_SLOP;
+    }, []),
+  );
+
+  const webStyle = isWeb
+    ? { touchAction: 'none' as any, userSelect: 'none' as any }
+    : {};
+
+  return (
+    <View
+      ref={ref}
+      className={colorPickerSliderStyle({ class: className })}
+      style={{ width, height, borderRadius: 4, overflow: 'hidden', ...webStyle }}
+      {...drag.handlers}
+      {...props}
+    >
+      <Svg width={width} height={height} style={{ pointerEvents: 'none' as any }}>
+        <Defs>
+          <SvgLinearGradient id="cps-hueGrad" x1="0" y1="0" x2="0" y2="1">
+            <Stop offset="0" stopColor="#FF0000" />
+            <Stop offset="0.167" stopColor="#FFFF00" />
+            <Stop offset="0.333" stopColor="#00FF00" />
+            <Stop offset="0.5" stopColor="#00FFFF" />
+            <Stop offset="0.667" stopColor="#0000FF" />
+            <Stop offset="0.833" stopColor="#FF00FF" />
+            <Stop offset="1" stopColor="#FF0000" />
+          </SvgLinearGradient>
+        </Defs>
+        <Rect x={0} y={0} width={width} height={height} fill="url(#cps-hueGrad)" />
+        <Rect
+          x={0}
+          y={hueSelectorY - 2}
+          width={width}
+          height={4}
+          fill="none"
+          stroke="#FFFFFF"
+          strokeWidth={2}
+          rx={2}
+        />
+      </Svg>
+    </View>
+  );
+});
+
+ColorPickerSlider.displayName = 'ColorPickerSlider';

package/src/color-picker/color-picker.tsx

@@ -0,0 +1,162 @@
+import React, { useState } from 'react';
+import { View, Pressable, Text, TextInput, Modal } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type {
+  ColorPickerProps,
+  ColorPickerTriggerProps,
+  ColorPickerContentProps,
+  ColorPickerSwatchProps,
+  ColorPickerInputProps,
+  ColorPickerContextValue,
+} from './types';
+import {
+  colorPickerTriggerStyle,
+  colorPickerSwatchPreviewStyle,
+  colorPickerContentStyle,
+  colorPickerSwatchStyle,
+  colorPickerInputStyle,
+} from './styles';
+import { BRAND_COLOR } from '../utils/brand';
+
+export const [ColorPickerProvider, useColorPickerContext] =
+  createComponentContext<ColorPickerContextValue>('ColorPicker');
+
+export const ColorPicker: React.FC<ColorPickerProps> = ({
+  isOpen: controlledOpen,
+  onOpenChange,
+  value,
+  onChange,
+  defaultValue = BRAND_COLOR,
+  children,
+}) => {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const [internalColor, setInternalColor] = useState(defaultValue);
+  const isOpen =
+    controlledOpen !== undefined ? controlledOpen : internalOpen;
+  const color = value !== undefined ? value : internalColor;
+  const onToggle = () => {
+    const next = !isOpen;
+    setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  const onClose = () => {
+    setInternalOpen(false);
+    onOpenChange?.(false);
+  };
+  const onColorChange = (c: string) => {
+    setInternalColor(c);
+    onChange?.(c);
+  };
+  return (
+    <ColorPickerProvider
+      value={{ isOpen, onToggle, onClose, color, onColorChange }}
+    >
+      {children}
+    </ColorPickerProvider>
+  );
+};
+ColorPicker.displayName = 'ColorPicker';
+
+export const ColorPickerTrigger = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  ColorPickerTriggerProps
+>(({ className, children, ...props }, ref) => {
+  const { onToggle, color } = useColorPickerContext();
+  return (
+    <Pressable
+      ref={ref}
+      onPress={onToggle}
+      className={colorPickerTriggerStyle({ class: className })}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <View
+            className={colorPickerSwatchPreviewStyle({})}
+            style={{ backgroundColor: color }}
+          />
+          <Text
+            style={{
+              fontSize: 14,
+              color: '#374151',
+              fontFamily: 'monospace',
+            }}
+          >
+            {color}
+          </Text>
+        </>
+      )}
+    </Pressable>
+  );
+});
+ColorPickerTrigger.displayName = 'ColorPickerTrigger';
+
+export const ColorPickerContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  ColorPickerContentProps
+>(({ className, children, ...props }, ref) => {
+  const { isOpen, onClose } = useColorPickerContext();
+  if (!isOpen) return null;
+  return (
+    <Modal
+      visible={isOpen}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}
+    >
+      <Pressable
+        style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
+        onPress={onClose}
+      >
+        <Pressable onPress={(e) => e.stopPropagation()}>
+          <View
+            ref={ref}
+            className={colorPickerContentStyle({ class: className })}
+            {...props}
+          >
+            {children}
+          </View>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+});
+ColorPickerContent.displayName = 'ColorPickerContent';
+
+export const ColorPickerSwatch = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  ColorPickerSwatchProps
+>(({ className, color: swatchColor, ...props }, ref) => {
+  const { color, onColorChange } = useColorPickerContext();
+  const isSelected = color === swatchColor;
+  return (
+    <Pressable
+      ref={ref}
+      onPress={() => onColorChange(swatchColor)}
+      className={colorPickerSwatchStyle({ isSelected, class: className })}
+      style={{ backgroundColor: swatchColor }}
+      accessibilityRole="button"
+      accessibilityLabel={swatchColor}
+      {...props}
+    />
+  );
+});
+ColorPickerSwatch.displayName = 'ColorPickerSwatch';
+
+export const ColorPickerInput = React.forwardRef<
+  React.ElementRef<typeof TextInput>,
+  ColorPickerInputProps
+>(({ className, ...props }, ref) => {
+  const { color, onColorChange, onClose } = useColorPickerContext();
+  return (
+    <TextInput
+      ref={ref}
+      value={color}
+      onChangeText={onColorChange}
+      onSubmitEditing={onClose}
+      className={colorPickerInputStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+ColorPickerInput.displayName = 'ColorPickerInput';

package/src/color-picker/color-utils.ts

@@ -0,0 +1,215 @@
+/**
+ * Pure color conversion utilities for the ColorPicker.
+ * All functions are dependency-free and work on all platforms.
+ */
+
+/** Convert a hex string (#RRGGBB or #RGB) to { r, g, b } (0-255 each). */
+export function hexToRgb(hex: string): { r: number; g: number; b: number } {
+  let h = hex.replace('#', '');
+  if (h.length === 3) {
+    h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+  }
+  const num = parseInt(h, 16);
+  return {
+    r: (num >> 16) & 255,
+    g: (num >> 8) & 255,
+    b: num & 255,
+  };
+}
+
+/** Convert { r, g, b } (0-255) to a 6-digit hex string with # prefix. */
+export function rgbToHex(r: number, g: number, b: number): string {
+  const toHex = (n: number) =>
+    Math.round(Math.min(255, Math.max(0, n)))
+      .toString(16)
+      .padStart(2, '0');
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+}
+
+/** Convert { r, g, b } (0-255) to { h, s, l } where h is 0-360, s and l are 0-100. */
+export function rgbToHsl(
+  r: number,
+  g: number,
+  b: number,
+): { h: number; s: number; l: number } {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const l = (max + min) / 2;
+
+  if (max === min) {
+    return { h: 0, s: 0, l: Math.round(l * 100) };
+  }
+
+  const d = max - min;
+  const s = d / (1 - Math.abs(2 * l - 1));
+  let h: number;
+
+  if (max === rn) {
+    h = ((gn - bn) / d + (gn < bn ? 6 : 0)) * 60;
+  } else if (max === gn) {
+    h = ((bn - rn) / d + 2) * 60;
+  } else {
+    h = ((rn - gn) / d + 4) * 60;
+  }
+
+  return {
+    h: Math.round(h) % 360,
+    s: Math.round(s * 100),
+    l: Math.round(l * 100),
+  };
+}
+
+/** Convert { h, s, l } (h: 0-360, s: 0-100, l: 0-100) to { r, g, b } (0-255). */
+export function hslToRgb(
+  h: number,
+  s: number,
+  l: number,
+): { r: number; g: number; b: number } {
+  const sn = s / 100;
+  const ln = l / 100;
+
+  if (sn === 0) {
+    const v = Math.round(ln * 255);
+    return { r: v, g: v, b: v };
+  }
+
+  const hue2rgb = (p: number, q: number, t: number): number => {
+    let tt = t;
+    if (tt < 0) tt += 1;
+    if (tt > 1) tt -= 1;
+    if (tt < 1 / 6) return p + (q - p) * 6 * tt;
+    if (tt < 1 / 2) return q;
+    if (tt < 2 / 3) return p + (q - p) * (2 / 3 - tt) * 6;
+    return p;
+  };
+
+  const q = ln < 0.5 ? ln * (1 + sn) : ln + sn - ln * sn;
+  const p = 2 * ln - q;
+  const hn = h / 360;
+
+  return {
+    r: Math.round(hue2rgb(p, q, hn + 1 / 3) * 255),
+    g: Math.round(hue2rgb(p, q, hn) * 255),
+    b: Math.round(hue2rgb(p, q, hn - 1 / 3) * 255),
+  };
+}
+
+/** Convert { r, g, b } (0-255) to { h, s, v } where h is 0-360, s and v are 0-100. */
+export function rgbToHsv(
+  r: number,
+  g: number,
+  b: number,
+): { h: number; s: number; v: number } {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const d = max - min;
+  const v = max;
+
+  if (max === 0) {
+    return { h: 0, s: 0, v: 0 };
+  }
+
+  const s = d / max;
+  let h: number;
+
+  if (d === 0) {
+    h = 0;
+  } else if (max === rn) {
+    h = ((gn - bn) / d + (gn < bn ? 6 : 0)) * 60;
+  } else if (max === gn) {
+    h = ((bn - rn) / d + 2) * 60;
+  } else {
+    h = ((rn - gn) / d + 4) * 60;
+  }
+
+  return {
+    h: Math.round(h) % 360,
+    s: Math.round(s * 100),
+    v: Math.round(v * 100),
+  };
+}
+
+/** Convert { h, s, v } (h: 0-360, s: 0-100, v: 0-100) to { r, g, b } (0-255). */
+export function hsvToRgb(
+  h: number,
+  s: number,
+  v: number,
+): { r: number; g: number; b: number } {
+  const sn = s / 100;
+  const vn = v / 100;
+  const c = vn * sn;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = vn - c;
+
+  let r1: number, g1: number, b1: number;
+
+  if (h < 60) {
+    [r1, g1, b1] = [c, x, 0];
+  } else if (h < 120) {
+    [r1, g1, b1] = [x, c, 0];
+  } else if (h < 180) {
+    [r1, g1, b1] = [0, c, x];
+  } else if (h < 240) {
+    [r1, g1, b1] = [0, x, c];
+  } else if (h < 300) {
+    [r1, g1, b1] = [x, 0, c];
+  } else {
+    [r1, g1, b1] = [c, 0, x];
+  }
+
+  return {
+    r: Math.round((r1 + m) * 255),
+    g: Math.round((g1 + m) * 255),
+    b: Math.round((b1 + m) * 255),
+  };
+}
+
+/** Extract HSV from a hex color string. */
+export function hexToHsv(hex: string): { h: number; s: number; v: number } {
+  const { r, g, b } = hexToRgb(hex);
+  return rgbToHsv(r, g, b);
+}
+
+/** Convert HSV to a hex color string. */
+export function hsvToHex(h: number, s: number, v: number): string {
+  const { r, g, b } = hsvToRgb(h, s, v);
+  return rgbToHex(r, g, b);
+}
+
+/** Extract hue (0-360) from a hex color string. */
+export function hexToHue(hex: string): number {
+  const { r, g, b } = hexToRgb(hex);
+  return rgbToHsl(r, g, b).h;
+}
+
+/** Given a hue (0-360) and an existing hex color, return a new hex with the new hue
+ *  but preserving the original saturation and lightness. If the color is achromatic
+ *  (gray), defaults to full saturation at 50% lightness. */
+export function replaceHue(hex: string, newHue: number): string {
+  const { r, g, b } = hexToRgb(hex);
+  let { s, l } = rgbToHsl(r, g, b);
+  // If achromatic, use vivid defaults so the wheel produces a visible color
+  if (s === 0) {
+    s = 100;
+    l = 50;
+  }
+  const rgb = hslToRgb(newHue, s, l);
+  return rgbToHex(rgb.r, rgb.g, rgb.b);
+}
+
+/** Convert a hue (0-360) to a fully-saturated hex color (hsl(hue, 100%, 50%)). */
+export function hueToHex(hue: number): string {
+  const { r, g, b } = hslToRgb(hue, 100, 50);
+  return rgbToHex(r, g, b);
+}
+
+/** Clamp a value between min and max. */
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}

package/src/color-picker/index.ts

@@ -0,0 +1,34 @@
+export {
+  ColorPicker,
+  ColorPickerProvider,
+  useColorPickerContext,
+  ColorPickerTrigger,
+  ColorPickerContent,
+  ColorPickerSwatch,
+  ColorPickerInput,
+} from './color-picker';
+export { ColorPickerBox } from './color-picker-box';
+export { ColorPickerSlider } from './color-picker-slider';
+export type {
+  ColorPickerProps,
+  ColorPickerTriggerProps,
+  ColorPickerContentProps,
+  ColorPickerSwatchProps,
+  ColorPickerInputProps,
+  ColorPickerBoxProps,
+  ColorPickerSliderProps,
+  ColorPickerContextValue,
+} from './types';
+export {
+  hexToRgb,
+  rgbToHex,
+  rgbToHsl,
+  hslToRgb,
+  rgbToHsv,
+  hsvToRgb,
+  hexToHsv,
+  hsvToHex,
+  hexToHue,
+  replaceHue,
+  hueToHex,
+} from './color-utils';

package/src/color-picker/styles.ts

@@ -0,0 +1,32 @@
+import { tv } from 'tailwind-variants';
+
+export const colorPickerTriggerStyle = tv({
+  base: 'flex-row items-center gap-2 border border-outline-300 rounded-lg bg-background-0 h-10 px-3',
+  variants: {},
+});
+export const colorPickerSwatchPreviewStyle = tv({
+  base: 'h-5 w-5 rounded-full border border-outline-200',
+  variants: {},
+});
+export const colorPickerContentStyle = tv({
+  base: 'bg-background-0 rounded-xl p-4 shadow-hard-2 border border-outline-100 gap-3',
+  variants: {},
+});
+export const colorPickerSwatchStyle = tv({
+  base: 'h-8 w-8 rounded-full border-2 border-transparent',
+  variants: {
+    isSelected: { true: 'border-primary-500' },
+  },
+});
+export const colorPickerInputStyle = tv({
+  base: 'border border-outline-300 rounded-lg bg-background-0 h-10 px-3 text-sm text-typography-900 font-mono',
+  variants: {},
+});
+export const colorPickerBoxStyle = tv({
+  base: '',
+  variants: {},
+});
+export const colorPickerSliderStyle = tv({
+  base: '',
+  variants: {},
+});

package/src/color-picker/types.ts

@@ -0,0 +1,49 @@
+import type { View, Pressable, TextInput } from 'react-native';
+
+export interface ColorPickerContextValue {
+  isOpen: boolean;
+  onToggle: () => void;
+  onClose: () => void;
+  color: string;
+  onColorChange: (color: string) => void;
+}
+
+export interface ColorPickerProps {
+  isOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  value?: string;
+  onChange?: (color: string) => void;
+  defaultValue?: string;
+  children: React.ReactNode;
+}
+export interface ColorPickerTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}
+export interface ColorPickerContentProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+export interface ColorPickerSwatchProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+  color: string;
+}
+export interface ColorPickerInputProps
+  extends React.ComponentPropsWithoutRef<typeof TextInput> {
+  className?: string;
+}
+export interface ColorPickerBoxProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  /** Size of the saturation-value square in pixels. Default: 200. */
+  size?: number;
+}
+export interface ColorPickerSliderProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  /** Height of the hue slider in pixels. Default: 200. */
+  height?: number;
+  /** Width of the hue slider in pixels. Default: 24. */
+  width?: number;
+}

package/src/color-picker/use-pointer-drag.ts

@@ -0,0 +1,80 @@
+import { useCallback, useRef } from 'react';
+import { Platform } from 'react-native';
+
+const isWeb = Platform.OS === 'web';
+
+/**
+ * Hook that returns pointer event handler props to spread on a View.
+ * Uses React synthetic pointer events (supported by RN Web) instead of
+ * native DOM listeners, avoiding ref-timing and Responder-system issues.
+ *
+ * Uses setPointerCapture via e.currentTarget so drags that leave the
+ * element still fire. Manages cursor: restCursor -> grab (near handle) -> grabbing (dragging).
+ */
+export function usePointerDrag(
+  onDrag: (relX: number, relY: number) => void,
+  isNearHandle: (relX: number, relY: number) => boolean,
+  restCursor: string = 'default',
+) {
+  const dragCb = useRef(onDrag);
+  dragCb.current = onDrag;
+  const hitTestCb = useRef(isNearHandle);
+  hitTestCb.current = isNearHandle;
+  const dragging = useRef(false);
+
+  const onPointerDown = useCallback((e: any) => {
+    e.preventDefault();
+    const el = e.currentTarget;
+    if (el?.setPointerCapture) {
+      el.setPointerCapture(e.pointerId);
+    }
+    if (el?.style) el.style.cursor = 'grabbing';
+    dragging.current = true;
+    const rect = el?.getBoundingClientRect?.();
+    if (rect) {
+      dragCb.current(e.clientX - rect.left, e.clientY - rect.top);
+    }
+  }, []);
+
+  const onPointerMove = useCallback((e: any) => {
+    const el = e.currentTarget;
+    const rect = el?.getBoundingClientRect?.();
+    if (!rect) return;
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    if (dragging.current) {
+      dragCb.current(x, y);
+    } else if (el?.style) {
+      el.style.cursor = hitTestCb.current(x, y) ? 'grab' : restCursor;
+    }
+  }, [restCursor]);
+
+  const onPointerUp = useCallback((e: any) => {
+    dragging.current = false;
+    const el = e.currentTarget;
+    if (el?.releasePointerCapture) {
+      try { el.releasePointerCapture(e.pointerId); } catch (_) { /* already released */ }
+    }
+    const rect = el?.getBoundingClientRect?.();
+    if (rect && el?.style) {
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      el.style.cursor = hitTestCb.current(x, y) ? 'grab' : restCursor;
+    }
+  }, [restCursor]);
+
+  const onContextMenu = useCallback((e: any) => {
+    e.preventDefault();
+  }, []);
+
+  if (!isWeb) return { handlers: {} };
+
+  return {
+    handlers: {
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onContextMenu,
+    },
+  };
+}

package/src/container/container.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { ContainerProps } from './types';
+import { containerStyle } from './styles';
+
+export const Container = React.forwardRef<
+  React.ElementRef<typeof View>,
+  ContainerProps
+>(({ className, size, centered, ...props }, ref) => {
+  return (
+    <View
+      ref={ref}
+      className={containerStyle({ size, centered, class: className })}
+      {...props}
+    />
+  );
+});
+
+Container.displayName = 'Container';

package/src/container/index.ts

@@ -0,0 +1,2 @@
+export { Container } from './container';
+export type { ContainerProps, ContainerSize } from './types';