@pagamio/frontend-commons-lib/lib/components/ui/TextField.js

Pagamio library for Frontend reusable components like the form engine and table container

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Label, TextInput } from 'flowbite-react';
import { HiEye, HiEyeOff } from 'react-icons/hi';
import { useState } from 'react';
/**
 * A reusable and customizable text input field component.
 * Supports regular text inputs, password inputs, and other HTML input types.
 * Includes optional error states, helper text, and password visibility toggle.
 *
 * @example
 * ```tsx
 * // Regular text input
 * <TextField
 *   value={username}
 *   setValue={setUsername}
 *   name="username"
 *   label="Username"
 *   placeholder="Enter your username"
 *   error={!!usernameError}
 *   helperText={usernameError}
 * />
 *
 * // Password input with visibility toggle
 * <TextField
 *   value={password}
 *   setValue={setPassword}
 *   name="password"
 *   label="Password"
 *   placeholder="Enter your password"
 *   type="password"
 *   error={!!passwordError}
 *   helperText={passwordError}
 * />
 * ```
 */
const TextField = ({ value, placeholder, name, type = 'text', label, error = false, setValue, helperText, onBlur, onKeyDown, }) => {
    const [showPassword, setShowPassword] = useState(false);
    // Determine the input type based on whether it's a password field and visibility toggle state
    const inputType = type === 'password' && showPassword ? 'text' : type;
    return (_jsxs("div", { className: "flex flex-col gap-y-2", children: [_jsx(Label, { htmlFor: name, children: label }), _jsxs("div", { className: "relative", children: [_jsx(TextInput, { id: name, color: error ? 'failure' : 'gray', name: name, placeholder: placeholder, type: inputType, required: true, value: value, onChange: (e) => setValue(e.target.value), onBlur: onBlur, onKeyDown: onKeyDown, helperText: helperText && _jsx("span", { className: "text-red-500", children: helperText }) }), type === 'password' && (_jsx("button", { type: "button", onClick: () => setShowPassword(!showPassword), className: "absolute right-3 top-[0.625rem] text-gray-500 hover:text-gray-700", children: showPassword ? _jsx(HiEyeOff, { className: "h-5 w-5" }) : _jsx(HiEye, { className: "h-5 w-5" }) }))] })] }));
};
export default TextField;