"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface ColorPickerProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
  value?: string;
  onChange?: (value: string) => void;
  swatches?: string[];
}

const DEFAULT_SWATCHES = [
  "hsl(var(--primary))",
  "hsl(var(--secondary))",
  "hsl(var(--accent))",
  "hsl(var(--muted))",
  "hsl(var(--card))",
  "hsl(var(--border))",
  "hsl(var(--foreground))",
  "hsl(var(--background))",
];

export const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(
  ({ className, value, onChange, swatches = DEFAULT_SWATCHES, ...props }, ref) => {
    const [internalValue, setInternalValue] = React.useState(
      "hsl(var(--primary))"
    );

    const color = value ?? internalValue;

    const updateColor = (next: string) => {
      if (!value) {
        setInternalValue(next);
      }
      onChange?.(next);
    };

    const handleTextChange = (next: string) => {
      updateColor(next);
    };

    return (
      <div
        ref={ref}
        className={cn("w-full max-w-sm space-y-4", className)}
        {...props}
      >
        <div className="flex items-center gap-3">
          <div
            className="h-12 w-12 rounded-lg border border-border"
            style={{ backgroundColor: color }}
          />
          <div className="flex flex-1 items-center gap-2">
            <input
              type="text"
              value={color}
              onChange={(event) => handleTextChange(event.target.value)}
              className="flex-1 rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/20"
              placeholder="hsl(var(--primary))"
            />
          </div>
        </div>

        <div className="space-y-2">
          <p className="text-xs font-semibold text-muted-foreground">
            Suggested swatches
          </p>
          <div className="flex flex-wrap gap-2">
            {swatches.map((swatch) => (
              <button
                key={swatch}
                type="button"
                onClick={() => updateColor(swatch)}
                className={cn(
                  "h-8 w-8 rounded-full border border-border transition",
                  swatch === color && "ring-2 ring-primary/30"
                )}
                style={{ backgroundColor: swatch }}
                aria-label={`Select ${swatch}`}
              />
            ))}
          </div>
        </div>
      </div>
    );
  }
);

ColorPicker.displayName = "ColorPicker";
Color Picker

Dependencies

Files

Installation
