import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
import { forwardRef, useRef, useState, useEffect } from 'react';
import styles from './inputField.module.css.js';

const InputField = forwardRef(({ className, disabled, label, helperText, placeholder, error, leadingIcon, trailingIcon, optional, prefix, suffix, width, ...props }, ref) => {
    const prefixRef = useRef(null);
    const suffixRef = useRef(null);
    const [prefixWidth, setPrefixWidth] = useState(0);
    const [suffixWidth, setSuffixWidth] = useState(0);
    useEffect(() => {
        if (prefixRef.current && prefix) {
            const width = prefixRef.current.getBoundingClientRect().width;
            setPrefixWidth(width);
        }
    }, [prefix]);
    useEffect(() => {
        if (suffixRef.current && suffix) {
            const width = suffixRef.current.getBoundingClientRect().width;
            setSuffixWidth(width);
        }
    }, [suffix]);
    return (jsxRuntimeExports.jsxs("div", { className: styles.container, style: { width: width || '100%' }, children: [label && (jsxRuntimeExports.jsxs("label", { className: clsx(styles.label, disabled && styles["label-disabled"]), children: [label, optional && jsxRuntimeExports.jsx("span", { className: styles.optional, children: "(optional)" })] })), jsxRuntimeExports.jsxs("div", { className: styles.inputWrapper, children: [leadingIcon && jsxRuntimeExports.jsx("span", { className: styles.leadingIcon, children: leadingIcon }), prefix && jsxRuntimeExports.jsx("span", { ref: prefixRef, className: styles.prefix, children: prefix }), jsxRuntimeExports.jsx("input", { ref: ref, style: {
                            paddingLeft: prefix ? `calc(${prefixWidth}px + var(--rs-space-3))` : undefined,
                            paddingRight: suffix ? `calc(${suffixWidth}px + var(--rs-space-3))` : undefined,
                        }, className: clsx(styles.inputField, leadingIcon && styles.hasLeadingIcon, trailingIcon && styles.hasTrailingIcon, error && styles["input-error"], disabled && styles["input-disabled"], className), "aria-invalid": !!error, placeholder: placeholder, disabled: disabled, ...props }), suffix && jsxRuntimeExports.jsx("span", { ref: suffixRef, className: styles.suffix, children: suffix }), trailingIcon && jsxRuntimeExports.jsx("span", { className: styles.trailingIcon, children: trailingIcon })] }), (error || helperText) && (jsxRuntimeExports.jsx("span", { className: clsx(styles.helperText, error && styles["helperText-error"], disabled && styles["helperText-disabled"]), children: error || helperText }))] }));
});
InputField.displayName = "InputField";

export { InputField };
//# sourceMappingURL=inputField.js.map
