kit-ui/components/pastel/ColorPicker.tsx

'use client';

import { HexColorPicker } from 'react-colorful';
import { Input } from '@/components/ui/input';
import { cn } from '@/lib/utils/cn';
import { hexToRgb } from '@/lib/pastel/utils/color';

interface ColorPickerProps {
  color: string;
  onChange: (color: string) => void;
  className?: string;
}

export function ColorPicker({ color, onChange, className }: ColorPickerProps) {
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    // Allow partial input while typing
    onChange(value);
  };

  // Determine text color based on background brightness
  const getContrastColor = (hex: string) => {
    const rgb = hexToRgb(hex);
    if (!rgb) return 'inherit';
    const brightness = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
    return brightness > 128 ? '#000000' : '#ffffff';
  };

  const textColor = getContrastColor(color);

  return (
    <div className={cn('flex flex-col items-center justify-center space-y-4', className)}>
      <div className="w-full max-w-[200px] space-y-4">
        <HexColorPicker color={color} onChange={onChange} className="!w-full" />
        <div className="space-y-2">
          <label htmlFor="color-input" className="text-sm font-medium">
            Color Value
          </label>
          <Input
            id="color-input"
            type="text"
            value={color}
            onChange={handleInputChange}
            placeholder="#ff0099 or rgb(255, 0, 153)"
            className="font-mono transition-colors duration-200"
            style={{
              backgroundColor: color,
              color: textColor,
              borderColor: textColor === '#000000' ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.2)'
            }}
          />
        </div>
      </div>
    </div>
  );
}