import { create, tsx } from '@dojo/framework/core/vdom';
import { checkboxGroup } from './middleware';
import { Checkbox } from '../checkbox/index';
import theme from '../middleware/theme';
import * as css from '../theme/default/checkbox-group.m.css';
const factory = create({ checkboxGroup, theme })
    .properties()
    .children();
export const CheckboxGroup = factory(function CheckboxGroup({ children, properties, middleware: { checkboxGroup, theme } }) {
    const { name, options, onValue, initialValue, value, classes, theme: themeProp, variant, disabled } = properties();
    const [{ checkboxes, label } = { checkboxes: undefined, label: undefined }] = children();
    const checkbox = checkboxGroup(onValue, initialValue, value);
    const { root, legend } = theme.classes(css);
    function renderCheckboxes() {
        if (checkboxes) {
            return checkboxes(name, checkbox, options, !!disabled);
        }
        return options.map(({ value, label }) => {
            const { checked } = checkbox(value);
            return (tsx(Checkbox, { name: name, value: value, checked: checked(), onValue: checked, classes: classes, theme: themeProp, variant: variant, disabled: disabled }, label || value));
        });
    }
    return (tsx("fieldset", { key: "root", classes: [theme.variant(), root], name: name },
        label && tsx("legend", { classes: legend }, label),
        renderCheckboxes()));
});
export default CheckboxGroup;

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