@letanure/resend-cli/dist/src/components/forms/TextInput.js

A command-line interface for Resend email API

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Text, useInput } from 'ink';
import { useState } from 'react';
export const TextInput = ({ label, value, onChange, placeholder = '', helpText, isFocused = false, error, labelWidth = 22, disabled = false, }) => {
    const [cursorPosition, setCursorPosition] = useState(value.length);
    useInput((input, key) => {
        if (!isFocused || disabled) {
            return;
        }
        if (key.leftArrow) {
            setCursorPosition(Math.max(0, cursorPosition - 1));
        }
        else if (key.rightArrow) {
            setCursorPosition(Math.min(value.length, cursorPosition + 1));
        }
        else if (key.backspace || key.delete) {
            if (cursorPosition > 0) {
                const newValue = value.slice(0, cursorPosition - 1) + value.slice(cursorPosition);
                onChange(newValue);
                setCursorPosition(cursorPosition - 1);
            }
        }
        else if (input && !key.ctrl && !key.meta) {
            const newValue = value.slice(0, cursorPosition) + input + value.slice(cursorPosition);
            onChange(newValue);
            setCursorPosition(cursorPosition + input.length);
        }
    });
    const displayValue = value || placeholder;
    const showCursor = isFocused && !disabled;
    const borderColor = disabled ? 'gray' : error ? 'red' : isFocused ? 'cyan' : 'gray';
    const dimBorder = disabled || !!(error && !isFocused);
    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: labelWidth, justifyContent: "flex-start", alignItems: "center", children: _jsx(Text, { bold: true, color: disabled ? 'gray' : isFocused ? 'cyan' : 'white', dimColor: disabled, children: label }) }), _jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { children: _jsx(Box, { width: 60, children: Array.from({ length: 60 }).map((_, i) => {
                                        const uniqueKey = `input-${label}-pos-${i}`;
                                        if (showCursor && i === cursorPosition) {
                                            return (_jsx(Text, { color: "white", children: "\u2502" }, uniqueKey));
                                        }
                                        if (i < displayValue.length) {
                                            return (_jsx(Text, { color: value ? (disabled ? 'gray' : 'white') : 'gray', dimColor: disabled, children: displayValue[i] }, uniqueKey));
                                        }
                                        return _jsx(Text, { children: " " }, uniqueKey);
                                    }) }) }), _jsx(Box, { children: _jsx(Text, { color: borderColor, dimColor: dimBorder, children: '─'.repeat(60) }) })] })] }), !error && helpText && isFocused && (_jsx(Box, { marginLeft: labelWidth, children: _jsx(Text, { dimColor: true, color: "gray", children: helpText }) })), error && (_jsx(Box, { marginLeft: labelWidth, children: _jsx(Text, { color: "red", children: error }) })), !error && !(helpText && isFocused) && _jsx(Box, { marginBottom: 1 })] }));
};
//# sourceMappingURL=TextInput.js.map