@baseplate-dev/ui-components/dist/components/ui/color-picker-field/color-picker-field.js

Shared UI component library

'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useId } from 'react';
import { HexColorInput, HexColorPicker } from 'react-colorful';
import { useControllerMerged } from '#src/hooks/use-controller-merged.js';
import { buttonVariants, inputVariants } from '#src/styles/index.js';
import { cn } from '#src/utils/index.js';
import { FormControl, FormDescription, FormItem, FormLabel, FormMessage, } from '../form-item/form-item.js';
import { Popover, PopoverContent, PopoverTrigger } from '../popover/popover.js';
/**
 * Field with label and error states that wraps a ColorPicker component.
 */
function ColorPickerField({ className, wrapperClassName, disabled, placeholder, onChange, value, label, error, description, hideText, formatColorName, parseColor, serializeColor, ref, }) {
    const addWrapper = label ?? error ?? description;
    const id = useId();
    const hexValue = value ? (parseColor?.(value) ?? value) : undefined;
    const handleChange = (newHexValue) => {
        if (!newHexValue)
            return;
        const newColorValue = serializeColor?.(newHexValue) ?? newHexValue;
        onChange?.(newColorValue);
    };
    const inputComponent = (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { className: cn(buttonVariants({
                        variant: 'outline',
                        size: 'none',
                        justify: 'start',
                    }), className, 'flex h-8 items-center gap-2 px-2', hideText ? 'justify-center' : undefined, disabled ? 'opacity-75' : undefined), id: id, ref: ref, disabled: disabled, children: [hexValue && (_jsx("div", { className: "h-4 w-6 rounded-sm border border-border", style: {
                                backgroundColor: hexValue,
                            } })), hideText ? null : hexValue ? (_jsx("div", { children: formatColorName && value ? formatColorName(value) : hexValue })) : (_jsx("div", { className: "opacity-75", children: placeholder }))] }) }), _jsxs(PopoverContent, { sideOffset: 5, align: "start", collisionPadding: { bottom: 50 }, className: "space-y-2 rounded-md border border-border bg-white p-4", width: "none", children: [_jsx(HexColorInput, { className: cn(inputVariants(), 'p-2'), prefixed: true, color: hexValue ?? '', onChange: handleChange }), _jsx(HexColorPicker, { color: hexValue ?? '', onChange: handleChange })] })] }));
    if (addWrapper) {
        return (_jsxs(FormItem, { error: error, className: cn('flex gap-2', wrapperClassName), children: [_jsx(FormLabel, { children: label }), _jsx(FormControl, { children: inputComponent }), _jsx(FormDescription, { children: description }), _jsx(FormMessage, {})] }));
    }
    return inputComponent;
}
function ColorPickerFieldController({ control, name, ref, ...rest }) {
    const { field: fieldProps, fieldState: { error }, } = useControllerMerged({
        control,
        name,
    }, rest, ref);
    return _jsx(ColorPickerField, { error: error?.message, ...rest, ...fieldProps });
}
export { ColorPickerField, ColorPickerFieldController };
//# sourceMappingURL=color-picker-field.js.map