@alauda/doom/lib/login/FocusInput/index.js

Doctor Doom making docs.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { clsx } from 'clsx';
import { useCallback, useState } from 'react';
import { Input } from '../Input/index.js';
export const FocusInput = ({ Component = Input, className, style, placeholder, value, onFocus, onBlur, ...props }) => {
    const [active, setActive] = useState(!!value);
    const [focus, setFocus] = useState(false);
    const handleFocus = useCallback((ev) => {
        setActive(true);
        setFocus(true);
        onFocus?.(ev);
    }, [onFocus]);
    const handleBlur = useCallback((ev) => {
        setActive(!!ev.target.value);
        setFocus(false);
        onBlur?.(ev);
    }, [onBlur]);
    return (_jsxs("div", { className: clsx('focus-input', { 'focus-input--active': active, 'focus-input--focus': focus }, className), style: style, children: [_jsx(Component, { onFocus: handleFocus, onBlur: handleBlur, ...props }), _jsx("span", { className: "focus-input__placeholder", children: placeholder })] }));
};