tekivex-ui 2.0.0

package/src/components/TkxColorPicker.tsx

@@ -0,0 +1,633 @@
+import {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  type CSSProperties,
+  type ChangeEvent,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { useTheme } from '../themes';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export type ColorFormat = 'hex' | 'rgb' | 'hsl';
+
+export interface TkxColorPickerProps {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string, format: ColorFormat) => void;
+  format?: ColorFormat;
+  showAlpha?: boolean;
+  presets?: string[];
+  disabled?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  placeholder?: string;
+  label?: string;
+  style?: CSSProperties;
+  className?: string;
+}
+
+// ── Color math ────────────────────────────────────────────────────────────────
+
+function hexToHsl(hex: string): [number, number, number] {
+  let r = 0, g = 0, b = 0;
+  const clean = hex.replace('#', '');
+  if (clean.length === 3) {
+    r = parseInt(clean[0] + clean[0], 16);
+    g = parseInt(clean[1] + clean[1], 16);
+    b = parseInt(clean[2] + clean[2], 16);
+  } else if (clean.length >= 6) {
+    r = parseInt(clean.slice(0, 2), 16);
+    g = parseInt(clean.slice(2, 4), 16);
+    b = parseInt(clean.slice(4, 6), 16);
+  }
+  r /= 255; g /= 255; b /= 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  let h = 0, s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+      case g: h = ((b - r) / d + 2) / 6; break;
+      case b: h = ((r - g) / d + 4) / 6; break;
+    }
+  }
+  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
+}
+
+function hslToHex(h: number, s: number, l: number): string {
+  s /= 100; l /= 100;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12;
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color).toString(16).padStart(2, '0');
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}
+
+function hexToRgb(hex: string): [number, number, number] {
+  const clean = hex.replace('#', '');
+  const r = parseInt(clean.slice(0, 2), 16);
+  const g = parseInt(clean.slice(2, 4), 16);
+  const b = parseInt(clean.slice(4, 6), 16);
+  return [isNaN(r) ? 0 : r, isNaN(g) ? 0 : g, isNaN(b) ? 0 : b];
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+  return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+}
+
+function isValidHex(hex: string): boolean {
+  return /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(hex);
+}
+
+function formatColor(hex: string, alpha: number, format: ColorFormat): string {
+  if (format === 'hex') return alpha < 1 ? `${hex}${Math.round(alpha * 255).toString(16).padStart(2, '0')}` : hex;
+  const [r, g, b] = hexToRgb(hex);
+  if (format === 'rgb') return alpha < 1 ? `rgba(${r}, ${g}, ${b}, ${alpha.toFixed(2)})` : `rgb(${r}, ${g}, ${b})`;
+  const [h, s, l] = hexToHsl(hex);
+  if (format === 'hsl') return alpha < 1 ? `hsla(${h}, ${s}%, ${l}%, ${alpha.toFixed(2)})` : `hsl(${h}, ${s}%, ${l}%)`;
+  return hex;
+}
+
+// ── Default presets ───────────────────────────────────────────────────────────
+
+const DEFAULT_PRESETS = [
+  '#ef4444', '#f97316', '#eab308', '#22c55e', '#06b6d4',
+  '#3b82f6', '#8b5cf6', '#ec4899', '#ffffff', '#94a3b8',
+  '#475569', '#0f172a',
+];
+
+// ── Saturation/Brightness picker canvas ──────────────────────────────────────
+
+function SatBrightPicker({
+  hue,
+  sat,
+  bright,
+  onChange,
+}: {
+  hue: number;
+  sat: number;
+  bright: number;
+  onChange: (s: number, b: number) => void;
+}) {
+  const canvasRef = useRef<HTMLDivElement>(null);
+  const dragging = useRef(false);
+
+  const pick = useCallback((e: MouseEvent | React.MouseEvent) => {
+    const el = canvasRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+    onChange(Math.round(x * 100), Math.round((1 - y) * 100));
+  }, [onChange]);
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => { if (dragging.current) pick(e); };
+    const onUp = () => { dragging.current = false; };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+    return () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+  }, [pick]);
+
+  const thumbX = `${sat}%`;
+  const thumbY = `${100 - bright}%`;
+
+  return (
+    <div
+      ref={canvasRef}
+      style={{
+        position: 'relative',
+        width: '100%',
+        height: '160px',
+        borderRadius: '6px',
+        cursor: 'crosshair',
+        background: `hsl(${hue}, 100%, 50%)`,
+        flexShrink: 0,
+      }}
+      onMouseDown={(e) => { dragging.current = true; pick(e); }}
+    >
+      {/* White gradient left→right */}
+      <div style={{
+        position: 'absolute', inset: 0, borderRadius: '6px',
+        background: 'linear-gradient(to right, #ffffff, transparent)',
+      }} />
+      {/* Black gradient top→bottom */}
+      <div style={{
+        position: 'absolute', inset: 0, borderRadius: '6px',
+        background: 'linear-gradient(to bottom, transparent, #000000)',
+      }} />
+      {/* Thumb */}
+      <div style={{
+        position: 'absolute',
+        left: thumbX,
+        top: thumbY,
+        transform: 'translate(-50%, -50%)',
+        width: '14px',
+        height: '14px',
+        borderRadius: '50%',
+        border: '2px solid white',
+        boxShadow: '0 0 0 1px rgba(0,0,0,0.4)',
+        pointerEvents: 'none',
+        backgroundColor: hslToHex(hue, sat, bright / 2 + 25),
+      }} />
+    </div>
+  );
+}
+
+// ── Hue slider ────────────────────────────────────────────────────────────────
+
+function HueSlider({ hue, onChange }: { hue: number; onChange: (h: number) => void }) {
+  const trackRef = useRef<HTMLDivElement>(null);
+  const dragging = useRef(false);
+
+  const pick = useCallback((e: MouseEvent | React.MouseEvent) => {
+    const el = trackRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    onChange(Math.round(x * 360));
+  }, [onChange]);
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => { if (dragging.current) pick(e); };
+    const onUp = () => { dragging.current = false; };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+    return () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+  }, [pick]);
+
+  return (
+    <div
+      ref={trackRef}
+      style={{
+        position: 'relative',
+        height: '12px',
+        borderRadius: '6px',
+        cursor: 'pointer',
+        background: 'linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)',
+      }}
+      onMouseDown={(e) => { dragging.current = true; pick(e); }}
+    >
+      <div style={{
+        position: 'absolute',
+        left: `${(hue / 360) * 100}%`,
+        top: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: '16px',
+        height: '16px',
+        borderRadius: '50%',
+        border: '2px solid white',
+        boxShadow: '0 0 0 1px rgba(0,0,0,0.3)',
+        backgroundColor: `hsl(${hue}, 100%, 50%)`,
+        pointerEvents: 'none',
+      }} />
+    </div>
+  );
+}
+
+// ── Alpha slider ──────────────────────────────────────────────────────────────
+
+function AlphaSlider({ alpha, hex, onChange }: { alpha: number; hex: string; onChange: (a: number) => void }) {
+  const trackRef = useRef<HTMLDivElement>(null);
+  const dragging = useRef(false);
+
+  const pick = useCallback((e: MouseEvent | React.MouseEvent) => {
+    const el = trackRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    onChange(Math.round(x * 100) / 100);
+  }, [onChange]);
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => { if (dragging.current) pick(e); };
+    const onUp = () => { dragging.current = false; };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+    return () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+  }, [pick]);
+
+  const [r, g, b] = hexToRgb(hex);
+
+  return (
+    <div style={{ position: 'relative' }}>
+      {/* Checkerboard background */}
+      <div style={{
+        position: 'absolute', inset: 0, borderRadius: '6px',
+        backgroundImage: 'repeating-conic-gradient(#ccc 0% 25%, white 0% 50%)',
+        backgroundSize: '8px 8px',
+      }} />
+      <div
+        ref={trackRef}
+        style={{
+          position: 'relative',
+          height: '12px',
+          borderRadius: '6px',
+          cursor: 'pointer',
+          background: `linear-gradient(to right, rgba(${r},${g},${b},0), rgba(${r},${g},${b},1))`,
+        }}
+        onMouseDown={(e) => { dragging.current = true; pick(e); }}
+      >
+        <div style={{
+          position: 'absolute',
+          left: `${alpha * 100}%`,
+          top: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: '16px',
+          height: '16px',
+          borderRadius: '50%',
+          border: '2px solid white',
+          boxShadow: '0 0 0 1px rgba(0,0,0,0.3)',
+          backgroundColor: `rgba(${r},${g},${b},${alpha})`,
+          pointerEvents: 'none',
+        }} />
+      </div>
+    </div>
+  );
+}
+
+// ── Main component ────────────────────────────────────────────────────────────
+
+export function TkxColorPicker({
+  value,
+  defaultValue = '#3b82f6',
+  onChange,
+  format = 'hex',
+  showAlpha = false,
+  presets = DEFAULT_PRESETS,
+  disabled = false,
+  size = 'md',
+  placeholder,
+  label,
+  style,
+}: TkxColorPickerProps) {
+  const theme = useTheme();
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const controlled = value !== undefined;
+  const [internalHex, setInternalHex] = useState<string>(
+    controlled ? (value || defaultValue) : defaultValue
+  );
+  const hex = controlled ? (value || defaultValue) : internalHex;
+
+  const [alpha, setAlpha] = useState(1);
+  const [hexInput, setHexInput] = useState(hex);
+  const [popPos, setPopPos] = useState({ top: 0, left: 0 });
+
+  const [hue, sat, light] = hexToHsl(isValidHex(hex) ? hex : defaultValue);
+  // Convert HSL lightness → brightness for SB picker
+  // brightness ≈ lightness + saturation * min(lightness, 1-lightness)
+  const bright = Math.round(light + (sat / 100) * Math.min(light / 100, 1 - light / 100) * 100);
+
+  const updateColor = useCallback((newHex: string, newAlpha = alpha) => {
+    if (!isValidHex(newHex)) return;
+    setHexInput(newHex);
+    if (!controlled) setInternalHex(newHex);
+    onChange?.(formatColor(newHex, newAlpha, format), format);
+  }, [alpha, controlled, format, onChange]);
+
+  // Sync hexInput when value changes externally
+  useEffect(() => {
+    if (controlled && value && isValidHex(value)) {
+      setHexInput(value);
+    }
+  }, [controlled, value]);
+
+  // Position popover
+  const openPicker = () => {
+    if (disabled) return;
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const top = spaceBelow > 320 ? rect.bottom + 6 : rect.top - 326;
+    setPopPos({ top: top + window.scrollY, left: rect.left + window.scrollX });
+    setIsOpen(true);
+  };
+
+  // Close on outside click
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (
+        popoverRef.current && !popoverRef.current.contains(e.target as Node) &&
+        triggerRef.current && !triggerRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [isOpen]);
+
+  // Close on Escape
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') setIsOpen(false); };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [isOpen]);
+
+  const handleSatBright = (s: number, b: number) => {
+    // Convert SB + hue back to hex
+    // Using HSL approximation: L = B * (1 - S/2/100), S_hsl = (B - L) / min(L, 1-L)
+    const bNorm = b / 100;
+    const sNorm = s / 100;
+    const l = bNorm * (1 - sNorm / 2);
+    const sHsl = l === 0 || l === 1 ? 0 : (bNorm - l) / Math.min(l, 1 - l);
+    const newHex = hslToHex(hue, Math.round(sHsl * 100), Math.round(l * 100));
+    updateColor(newHex);
+  };
+
+  const handleHue = (newHue: number) => {
+    const newHex = hslToHex(newHue, sat, light);
+    updateColor(newHex);
+  };
+
+  const handleAlpha = (a: number) => {
+    setAlpha(a);
+    onChange?.(formatColor(hex, a, format), format);
+  };
+
+  const handleHexInput = (e: ChangeEvent<HTMLInputElement>) => {
+    const v = e.target.value;
+    setHexInput(v);
+    if (isValidHex(v)) updateColor(v);
+  };
+
+  const handleRgbInput = (channel: 'r' | 'g' | 'b', v: string) => {
+    const n = Math.max(0, Math.min(255, parseInt(v) || 0));
+    const [r, g, b] = hexToRgb(hex);
+    const newHex = channel === 'r' ? rgbToHex(n, g, b)
+      : channel === 'g' ? rgbToHex(r, n, b)
+      : rgbToHex(r, g, n);
+    updateColor(newHex);
+  };
+
+  const sizeMap = { sm: 28, md: 34, lg: 40 };
+  const swatchSize = sizeMap[size];
+  const [r, g, b] = hexToRgb(isValidHex(hex) ? hex : defaultValue);
+
+  const triggerStyle: CSSProperties = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '8px',
+    height: `${swatchSize}px`,
+    padding: '4px 10px 4px 6px',
+    borderRadius: '8px',
+    border: `1px solid ${theme.border}`,
+    backgroundColor: theme.surface,
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    opacity: disabled ? 0.5 : 1,
+    color: theme.text,
+    fontSize: '13px',
+    fontFamily: 'inherit',
+    transition: 'border-color 0.15s',
+    ...style,
+  };
+
+  const swatchStyle: CSSProperties = {
+    width: `${swatchSize - 8}px`,
+    height: `${swatchSize - 8}px`,
+    borderRadius: '4px',
+    backgroundColor: `rgba(${r},${g},${b},${alpha})`,
+    border: `1px solid ${theme.border}`,
+    flexShrink: 0,
+  };
+
+  const popStyle: CSSProperties = {
+    position: 'absolute',
+    top: popPos.top,
+    left: popPos.left,
+    zIndex: 9999,
+    width: '260px',
+    backgroundColor: theme.surface,
+    border: `1px solid ${theme.border}`,
+    borderRadius: '12px',
+    padding: '16px',
+    boxShadow: `0 8px 32px rgba(0,0,0,0.24)`,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '12px',
+  };
+
+  const inputStyle: CSSProperties = {
+    width: '100%',
+    padding: '6px 10px',
+    borderRadius: '6px',
+    border: `1px solid ${theme.border}`,
+    backgroundColor: theme.bg,
+    color: theme.text,
+    fontSize: '12px',
+    fontFamily: 'monospace',
+    outline: 'none',
+  };
+
+  const channelInputStyle: CSSProperties = {
+    flex: 1,
+    padding: '5px 6px',
+    borderRadius: '6px',
+    border: `1px solid ${theme.border}`,
+    backgroundColor: theme.bg,
+    color: theme.text,
+    fontSize: '11px',
+    textAlign: 'center',
+    fontFamily: 'monospace',
+    outline: 'none',
+  };
+
+  const presetDotStyle = (c: string): CSSProperties => ({
+    width: '20px',
+    height: '20px',
+    borderRadius: '50%',
+    backgroundColor: c,
+    border: c.toLowerCase() === hex.toLowerCase()
+      ? `2px solid ${theme.primary}`
+      : `1px solid ${theme.border}`,
+    cursor: 'pointer',
+    flexShrink: 0,
+    transition: 'transform 0.1s',
+  });
+
+  return (
+    <>
+      {label && (
+        <label style={{ display: 'block', fontSize: '13px', color: theme.text, marginBottom: '6px', fontWeight: 500 }}>
+          {label}
+        </label>
+      )}
+      <button
+        ref={triggerRef}
+        type="button"
+        style={triggerStyle}
+        onClick={openPicker}
+        disabled={disabled}
+        aria-label={`Color picker, current color ${hex}`}
+        aria-haspopup="dialog"
+        aria-expanded={isOpen}
+      >
+        <div style={swatchStyle} />
+        <span style={{ fontFamily: 'monospace', fontSize: '12px', color: theme.textMuted }}>
+          {placeholder ?? formatColor(isValidHex(hex) ? hex : defaultValue, alpha, format)}
+        </span>
+      </button>
+
+      {isOpen && createPortal(
+        <div
+          ref={popoverRef}
+          style={popStyle}
+          role="dialog"
+          aria-label="Color picker"
+        >
+          {/* Saturation/Brightness picker */}
+          <SatBrightPicker
+            hue={hue}
+            sat={sat}
+            bright={light}
+            onChange={handleSatBright}
+          />
+
+          {/* Hue slider */}
+          <HueSlider hue={hue} onChange={handleHue} />
+
+          {/* Alpha slider */}
+          {showAlpha && (
+            <AlphaSlider alpha={alpha} hex={isValidHex(hex) ? hex : defaultValue} onChange={handleAlpha} />
+          )}
+
+          {/* Hex input + preview swatch */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <div style={{
+              width: '28px', height: '28px', borderRadius: '6px', flexShrink: 0,
+              backgroundColor: `rgba(${r},${g},${b},${alpha})`,
+              border: `1px solid ${theme.border}`,
+            }} />
+            <input
+              style={inputStyle}
+              value={hexInput}
+              onChange={handleHexInput}
+              maxLength={7}
+              spellCheck={false}
+              aria-label="Hex color value"
+            />
+          </div>
+
+          {/* RGB inputs */}
+          <div style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
+            {(['r', 'g', 'b'] as const).map((ch) => {
+              const val = ch === 'r' ? r : ch === 'g' ? g : b;
+              return (
+                <div key={ch} style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '3px', alignItems: 'center' }}>
+                  <input
+                    style={channelInputStyle}
+                    type="number"
+                    min={0}
+                    max={255}
+                    value={val}
+                    onChange={(e) => handleRgbInput(ch, e.target.value)}
+                    aria-label={`${ch.toUpperCase()} channel`}
+                  />
+                  <span style={{ fontSize: '10px', color: theme.textMuted, textTransform: 'uppercase' }}>{ch}</span>
+                </div>
+              );
+            })}
+            {showAlpha && (
+              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '3px', alignItems: 'center' }}>
+                <input
+                  style={channelInputStyle}
+                  type="number"
+                  min={0}
+                  max={100}
+                  value={Math.round(alpha * 100)}
+                  onChange={(e) => handleAlpha(Math.max(0, Math.min(1, parseInt(e.target.value) / 100 || 0)))}
+                  aria-label="Alpha channel"
+                />
+                <span style={{ fontSize: '10px', color: theme.textMuted }}>A%</span>
+              </div>
+            )}
+          </div>
+
+          {/* Presets */}
+          {presets.length > 0 && (
+            <div>
+              <div style={{ fontSize: '11px', color: theme.textMuted, marginBottom: '6px', fontWeight: 500 }}>
+                Presets
+              </div>
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
+                {presets.map((c) => (
+                  <button
+                    key={c}
+                    type="button"
+                    style={presetDotStyle(c)}
+                    onClick={() => updateColor(c)}
+                    aria-label={`Select color ${c}`}
+                    onMouseEnter={(e) => { (e.currentTarget as HTMLButtonElement).style.transform = 'scale(1.15)'; }}
+                    onMouseLeave={(e) => { (e.currentTarget as HTMLButtonElement).style.transform = 'scale(1)'; }}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>,
+        document.body
+      )}
+    </>
+  );
+}