import * as css from '../theme/default/radio-group.m.css';
import theme from '../middleware/theme';
import { Radio } from '../radio/index';
import { create, tsx } from '@dojo/framework/core/vdom';
import { radioGroup } from './middleware';
const factory = create({ radioGroup, theme })
    .properties()
    .children();
export const RadioGroup = factory(function ({ children, properties, middleware: { radioGroup, theme } }) {
    const { name, options, onValue, value, initialValue, theme: themeCss, classes, variant } = properties();
    const [{ radios, label } = { radios: undefined, label: undefined }] = children();
    const radio = radioGroup(onValue, initialValue || '', value);
    const { root, legend } = theme.classes(css);
    function renderRadios() {
        if (radios) {
            return radios(name, radio, options);
        }
        return options.map(({ value, label }) => {
            const { checked } = radio(value);
            return (tsx(Radio, { checked: checked(), name: name, onValue: checked, value: value, theme: themeCss, classes: classes, variant: variant }, label || value));
        });
    }
    return (tsx("fieldset", { key: "root", classes: [theme.variant(), root], name: name },
        label && tsx("legend", { classes: legend }, label),
        renderRadios()));
});
export default RadioGroup;

/*# sourceMappingURL=index.mjs.map*/