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

A Next/React ui-component libray.

'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;