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";
const { b, e } = bem("gd-ui-kit-radio");
/**
 * Standalone radio control — renders a native `<input type="radio">` for
 * accessibility and a custom 14px circle for the visual. The input is overlaid
 * on the circle, so clicking the circle toggles it. Renders no wrapping
 * `<label>`: an optional inline label is a sibling associated via `htmlFor`,
 * which lets `UiRadioRow` supply its own label without nesting.
 *
 * @internal
 */
export function UiRadio({ checked, onChange = () => { }, name, value, disabled = false, accessibilityConfig, tabIndex, label, id, dataTestId, }) {
    const generatedId = useId();
    const inputId = id ?? generatedId;
    return (_jsxs("span", { className: b(), children: [
            _jsxs("span", { className: e("control"), children: [
                    _jsx("input", { id: inputId, type: "radio", className: e("input"), checked: checked, onChange: onChange, disabled: disabled, name: name, value: value, tabIndex: tabIndex, "data-testid": dataTestId, ...accessibilityConfigToAttributes(accessibilityConfig) }), _jsx("span", { className: e("circle", { checked, disabled }), "aria-hidden": "true" })
                ] }), label ? (_jsx("label", { className: e("label"), htmlFor: inputId, children: label })) : null] }));
}
