Color Picker

import { ColorPicker } from "@/components/ui/color-picker";

export default function Example() {
  return <ColorPicker />;
}

"use client";

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

const ColorPicker = forwardRef(({ className, value, onValueChange, ...props }, ref) => {
  return (
    <div className={cn("flex items-center gap-3", className)}>
      <input
        ref={ref}
        type="color"
        value={value || "#000000"}
        onChange={(e) => onValueChange?.(e.target.value)}
        className="h-9 w-9 cursor-pointer rounded-md border border-input p-0.5"
        {...props}
      />
      <span className="text-sm font-mono text-muted-foreground">{value || "#000000"}</span>
    </div>
  );
});
ColorPicker.displayName = "ColorPicker";

export { ColorPicker };