@smitch/fluid/lib/passwordinput/PasswordInput.js

A lightweight, Tailwind-powered React/Next.js UI component library.

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { twMerge } from "tailwind-merge";
import { FaEye, FaEyeSlash } from "react-icons/fa";
import { Input, Button, Label } from "..";
var PasswordInput = function (_a) {
    var _b = _a.name, name = _b === void 0 ? "password" : _b, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.label, label = _d === void 0 ? "Password" : _d, _e = _a.size, size = _e === void 0 ? "md" : _e, _f = _a.rounded, rounded = _f === void 0 ? "md" : _f, placeholder = _a.placeholder, autocomplete = _a.autocomplete, pattern = _a.pattern, inputStyles = _a.inputStyles, _g = _a.hint, hint = _g === void 0 ? true : _g, title = _a.title, _h = _a.required, required = _h === void 0 ? true : _h, _j = _a.layout, layout = _j === void 0 ? "col" : _j, onInputChange = _a.onInputChange;
    var _k = useState("password"), type = _k[0], setType = _k[1];
    var toggleType = function () {
        setType(function (prevType) { return (prevType === "password" ? "text" : "password"); });
    };
    var handleChange = function (e) {
        if (!onInputChange)
            return;
        var value = e.target.value;
        onInputChange(value);
    };
    return (_jsxs(Label, { label: label, className: twMerge("label-pwd group", className), size: size, required: required, layout: layout, children: [_jsx(Input, { name: name, id: name, type: type, pattern: pattern, "data-testid": "input-".concat(name), className: "password ".concat(inputStyles), size: size, placeholder: placeholder, autocomplete: autocomplete, rounded: rounded, title: title, hint: hint, required: required, onChange: handleChange }), _jsx(Button, { onClick: toggleType, className: "absolute right-2 top-4 !p-0", size: size, layout: "circle", btnBackground: "transparent", btnColor: "info", title: "Toggle password visiblity", children: type !== "password" ? _jsx(FaEye, {}) : _jsx(FaEyeSlash, {}) })] }));
};
export default PasswordInput;
//# sourceMappingURL=PasswordInput.js.map