@ducor/form/dist/select.js

form package

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Controller, useFormContext } from "react-hook-form";
import { uuidv4 } from "./utils";
import Label from "./components/label";
import { twMerge } from "tailwind-merge";
import Errors from "./components/errors";
import HelperText from "./components/helperText";
export const Select = ({ name, label, options, withAsterisk, helperText, id, direction = "vertical", defaultValue, placeholder, disabled, multiple, className, }) => {
    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', children: _jsx(Controller, { name: name, control: control, rules: {
                                required: withAsterisk ? "This field is required" : false,
                            }, defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : (multiple ? [] : ""), render: (_a) => {
                                var _b = _a.field, { ref } = _b, field = __rest(_b, ["ref"]);
                                return (_jsxs("select", Object.assign({}, field, { id: controlId, ref: ref, multiple: multiple, disabled: disabled, className: twMerge("w-full p-2 rounded-lg outline-none text-gray-700 border dark:text-gray-200", 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), children: [placeholder && (_jsx("option", { value: '', disabled: true, children: placeholder })), options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, className: twMerge("text-gray-700", option.disabled && "text-gray-400"), children: option.label }, option.value)))] })));
                            } }) }), helperText && _jsx(HelperText, { helperText: helperText }), errors[name] && _jsx(Errors, { value: errors[name] })] })] }));
};