import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@powerhousedao/design-system";
import { forwardRef, useId } from "react";
import { FormLabel } from "../form-label/form-label.js";
import { FormMessageList } from "../form-message/message-list.js";
import { withFieldValidation } from "../with-field-validation/with-field-validation.js";
import { RadioGroup } from "./radio-group.js";
import { Radio } from "./radio.js";
const RadioGroupFieldRaw = forwardRef(({ autoFocus, className, defaultValue, description, disabled, warnings = [], errors = [], id: propId, label, name, onChange, options = [], required, value, ...props }, ref) => {
    const hasLabel = label !== undefined;
    const hasError = errors.length > 0;
    const prefix = useId();
    const id = propId ?? `${prefix}-radio-group`;
    return (_jsxs(RadioGroup, { "aria-invalid": hasError, "aria-label": !hasLabel ? "Radio group" : undefined, "aria-required": required, autoFocus: autoFocus, className: cn("flex flex-col gap-2", className), defaultValue: defaultValue, id: id, name: name, onValueChange: (newValue) => {
            onChange?.(newValue);
        }, value: value, disabled: disabled, ...props, ref: ref, children: [hasLabel && (_jsx(FormLabel, { description: description, hasError: hasError, htmlFor: id, required: required, disabled: disabled, children: label })), options.map((option, index) => (_jsx("div", { className: "flex items-center gap-2", role: "presentation", children: _jsx(Radio, { id: `${prefix}-radio-${index}-${option.value}`, label: option.label, value: option.value, description: option.description, disabled: disabled || option.disabled, hasError: hasError }) }, `${prefix}-radio-${index}-${option.value}`))), warnings.length > 0 && (_jsx(FormMessageList, { messages: warnings, type: "warning" })), hasError && _jsx(FormMessageList, { messages: errors, type: "error" })] }));
});
export const RadioGroupField = forwardRef(function RadioGroupField(props, ref) {
    const Component = withFieldValidation(RadioGroupFieldRaw);
    return _jsx(Component, { ...props, ref: ref });
});
RadioGroupField.displayName = "RadioGroupField";
//# sourceMappingURL=radio-group-field.js.map