import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2026 GoodData Corporation
import { useId, } from "react";
import { accessibilityConfigToAttributes } from "../../typings/utilities.js";
import { bem } from "../@utils/bem.js";
import { UiIcon } from "../UiIcon/UiIcon.js";
import { UiIconButton } from "../UiIconButton/UiIconButton.js";
const { b, e } = bem("gd-ui-kit-text-input");
/**
 * Single-line text input with optional label and leading / trailing icons.
 * The kit's canonical text-field rendering: 32px height, 1px
 * complementary-4 border, inset shadow, primary-blue focus state.
 *
 * @internal
 */
export function UiTextInput({ type = "text", value, onChange, label, placeholder, iconBefore, iconAfter, onIconAfter, accessibilityConfig, disabled = false, autoFocus = false, onKeyDown, onFocus, onBlur, onClick, dataTestId, inputRef, wrapperRef, name, autoComplete, autoCapitalize, autoCorrect, }) {
    const id = useId();
    const { ariaLabel, ...restA11y } = accessibilityConfig ?? {};
    // When a visible <label> is present, the label provides the accessible name;
    // forwarding aria-label would override it (WCAG name-in-name mismatch).
    const inputA11y = label ? restA11y : { ...restA11y, ariaLabel };
    return (_jsxs("div", { ref: wrapperRef, className: b(), children: [label ? (_jsx("label", { className: e("label"), htmlFor: id, children: label })) : null, _jsxs("div", { className: e("field", { disabled }), children: [iconBefore ? (_jsx("span", { className: e("icon-before"), children: _jsx(UiIcon, { type: iconBefore, size: 14, color: "complementary-6" }) })) : null, _jsx("input", { ref: inputRef, id: id, name: name, type: type, className: e("input"), value: value, placeholder: placeholder, disabled: disabled, autoFocus: autoFocus, autoComplete: autoComplete, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, "data-testid": dataTestId, onChange: (event) => onChange(event.target.value), onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, onClick: onClick, ...accessibilityConfigToAttributes(inputA11y) }), onIconAfter ? (_jsx("span", { className: e("icon-after"), children: _jsx(UiIconButton, { icon: onIconAfter.icon, size: "xsmall", variant: "tertiary", onClick: onIconAfter.onClick, isDisabled: disabled, label: onIconAfter.ariaLabel, iconColor: "complementary-6" }) })) : iconAfter ? (_jsx("span", { className: e("icon-after"), children: _jsx(UiIcon, { type: iconAfter, size: 14, color: "complementary-6" }) })) : null] })
        ] }));
}
