@ducor/form/dist/color-picker.js

form package

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useFormContext, Controller } from "react-hook-form";
import { twMerge } from "tailwind-merge";
import { uuidv4 } from "./utils";
import Errors from "./components/errors";
import Label from "./components/label";
import HelperText from "./components/helperText";
export const ColorPicker = ({ label, withAsterisk, direction = "vertical", name, helperText, id, defaultValue = "#000000", className, disabled, }) => {
    const { control, formState: { errors }, } = useFormContext();
    const controlId = id || uuidv4();
    return (_jsxs("div", { className: twMerge("flex", direction === "horizontal"
            ? "flex-row items-center gap-4"
            : "flex-col gap-2"), children: [label && (_jsx(Label, { id: controlId, label: label, withAsterisk: withAsterisk })), _jsxs("div", { className: 'w-full', children: [_jsx("div", { className: 'relative flex items-center gap-2', children: _jsx(Controller, { name: name, control: control, defaultValue: defaultValue, rules: {
                                required: withAsterisk ? "This field is required" : false,
                            }, render: ({ field }) => (_jsxs(_Fragment, { children: [_jsx("input", Object.assign({ id: controlId, type: 'color', disabled: disabled }, field, { className: twMerge("w-12 h-10 border border-gray-300  rounded-md cursor-pointer", disabled && "opacity-50 cursor-not-allowed", errors[name] && "border-red-500", className) })), _jsx("input", { type: 'text', value: field.value, onChange: (e) => {
                                            const value = e.target.value;
                                            field.onChange(value);
                                        }, disabled: disabled, readOnly: true, className: twMerge("w-full p-2 rounded-lg outline-none text-gray-700 dark:text-gray-200 border ", disabled
                                            ? "bg-gray-100 cursor-not-allowed border-gray-300"
                                            : errors[name]
                                                ? "border-red-500 focus:border-red-500"
                                                : "border-gray-300 focus:border-black", className) })] })) }) }), helperText && _jsx(HelperText, { helperText: helperText }), errors[name] && _jsx(Errors, { value: errors[name] })] })] }));
};