@ducor/form
Version:
form package
33 lines (32 loc) • 2.56 kB
JavaScript
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 { twMerge } from "tailwind-merge";
import { uuidv4 } from "./utils";
import Label from "./components/label";
import HelperText from "./components/helperText";
import Errors from "./components/errors";
export const Password = (_a) => {
var { name, label, withAsterisk, helperText, id, placeholder = "Enter your password", defaultValue = "", className, direction = "vertical", disabled } = _a, rest = __rest(_a, ["name", "label", "withAsterisk", "helperText", "id", "placeholder", "defaultValue", "className", "direction", "disabled"]);
const { control, formState: { errors }, } = useFormContext();
const controlId = id || uuidv4();
return (_jsxs("div", { className: twMerge("flex w-full", 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 space-y-2 ', children: [_jsx("div", { className: 'relative', children: _jsx(Controller, Object.assign({ name: name, control: control, defaultValue: defaultValue, rules: {
required: withAsterisk ? "This field is required" : false,
} }, rest, { render: ({ field }) => (_jsx("input", Object.assign({}, field, { type: 'password', id: controlId, placeholder: placeholder, disabled: disabled, 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] })] }));
};