import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Trash } from "lucide-react";
import { Button } from "../../cmp/button";
import { Input } from "../../cmp/input";
import { COLOR_PICKER_FALLBACK } from "../utils";
export function ColorPicker({ value, onChange, fallback = COLOR_PICKER_FALLBACK, allowEmpty = false, }) {
    const isEmpty = value === "";
    return (_jsxs("div", { className: "flex items-center gap-2 w-65", children: [_jsx("input", { className: "w-9 h-9 rounded-md aspect-square", type: "color", value: value || fallback, onChange: (event) => onChange(event.target.value) }), _jsx(Input, { className: "No color selected", value: value, onChange: (event) => onChange(event.target.value) }), allowEmpty && (_jsx(Button, { className: "h-8 w-8", variant: "destructive", disabled: isEmpty, onClick: () => onChange(""), children: _jsx(Trash, {}) }))] }));
}
