import React, { forwardRef, useCallback } from "react";
import { contrastColor } from "../utils/colors.js";
import { ColorDisplay, LabelWrapper } from "./ColorPicker.styled.js";
const ColorPicker = forwardRef(({ error, css, className, variant, label, value = "transparent", children, onChange, ...inputProps }, ref) => {
    const style = {
        "--selected-color": value,
        ...(value.startsWith("#") ? { color: contrastColor(value) } : {}),
    };
    const wrapperProps = { className };
    if (css) {
        wrapperProps.css = css;
    }
    const handleChange = useCallback((e) => {
        if (inputProps.readOnly) {
            return;
        }
        onChange === null || onChange === void 0 ? void 0 : onChange(e);
    }, [inputProps.readOnly, onChange]);
    return (React.createElement(LabelWrapper, { ...wrapperProps, "data-error": error },
        React.createElement("input", { type: "color", value: value, onChange: handleChange, ref: ref, ...inputProps }),
        React.createElement(ColorDisplay, { css: style, variant: variant }, label)));
});
ColorPicker.displayName = "ColorPicker";
ColorPicker.toString = () => LabelWrapper.toString();
const ColorPickerColorDisplaySelector = ColorDisplay.toString();
export { ColorPicker, ColorPickerColorDisplaySelector };
//# sourceMappingURL=ColorPicker.js.map