'use strict';

var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
var React = require('react');
var inputField_module = require('./input-field.module.css.cjs');

const InputField = React.forwardRef(({ className, disabled, label, helperText, placeholder, error, leadingIcon, trailingIcon, optional, prefix, suffix, width, ...props }, ref) => {
    const prefixRef = React.useRef(null);
    const suffixRef = React.useRef(null);
    const [prefixWidth, setPrefixWidth] = React.useState(0);
    const [suffixWidth, setSuffixWidth] = React.useState(0);
    React.useEffect(() => {
        if (prefixRef.current && prefix) {
            const width = prefixRef.current.getBoundingClientRect().width;
            setPrefixWidth(width);
        }
    }, [prefix]);
    React.useEffect(() => {
        if (suffixRef.current && suffix) {
            const width = suffixRef.current.getBoundingClientRect().width;
            setSuffixWidth(width);
        }
    }, [suffix]);
    return (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: inputField_module.default.container, style: { width: width || '100%' }, children: [label && (jsxRuntime.jsxRuntimeExports.jsxs("label", { className: clsx.clsx(inputField_module.default.label, disabled && inputField_module.default["label-disabled"]), children: [label, optional && jsxRuntime.jsxRuntimeExports.jsx("span", { className: inputField_module.default.optional, children: "(optional)" })] })), jsxRuntime.jsxRuntimeExports.jsxs("div", { className: inputField_module.default.inputWrapper, children: [leadingIcon && jsxRuntime.jsxRuntimeExports.jsx("span", { className: inputField_module.default.leadingIcon, children: leadingIcon }), prefix && jsxRuntime.jsxRuntimeExports.jsx("span", { ref: prefixRef, className: inputField_module.default.prefix, children: prefix }), jsxRuntime.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.clsx(inputField_module.default.inputField, leadingIcon && inputField_module.default.hasLeadingIcon, trailingIcon && inputField_module.default.hasTrailingIcon, error && inputField_module.default["input-error"], disabled && inputField_module.default["input-disabled"], className), "aria-invalid": !!error, placeholder: placeholder, disabled: disabled, ...props }), suffix && jsxRuntime.jsxRuntimeExports.jsx("span", { ref: suffixRef, className: inputField_module.default.suffix, children: suffix }), trailingIcon && jsxRuntime.jsxRuntimeExports.jsx("span", { className: inputField_module.default.trailingIcon, children: trailingIcon })] }), (error || helperText) && (jsxRuntime.jsxRuntimeExports.jsx("span", { className: clsx.clsx(inputField_module.default.helperText, error && inputField_module.default["helperText-error"], disabled && inputField_module.default["helperText-disabled"]), children: error || helperText }))] }));
});
InputField.displayName = "InputField";

exports.InputField = InputField;
//# sourceMappingURL=input-field.cjs.map
