import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from 'react';
import { styled, vui } from '../core';
import { cs, filterUndefined } from '../utils';
import { CheckboxGroupProvider } from './context';
export const CheckboxGroupBase = styled.divBox `
  display: flex;
  flex-direction: column;
`;
/**
 * Organizes layout and display of multiple checkboxes as a row or column.
 * Exposes some props to the children via context.
 */
export const CheckboxGroup = vui((props, ref) => {
    const { className, defaultValue, disabled, isRow, name, onBlur, onChange, onFocus, size, variant, ...rest } = props;
    const context = useMemo(() => filterUndefined({ defaultValue, disabled, name, onBlur, onChange, onFocus, size, variant }), [defaultValue, disabled, name, onBlur, onChange, onFocus, size, variant]);
    const aliasedProps = filterUndefined({
        flexDirection: isRow ? 'row' : undefined,
    });
    return (_jsx(CheckboxGroupProvider, { value: context, children: _jsx(CheckboxGroupBase, { className: cs('vui-checkboxGroup', className), ref: ref, ...aliasedProps, ...rest }) }));
});
CheckboxGroup.displayName = 'CheckboxGroup';
export default CheckboxGroup;
//# sourceMappingURL=checkboxGroup.js.map