/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-6b06f3c
 * Released under the MIT license.
 */

import { jsx as _jsx } from "react/jsx-runtime";
import { useDOMRef } from '@react-spectrum/utils';
import { forwardRef } from 'react';
import { useCheckboxGroup } from 'react-aria';
import { useCheckboxGroupState } from 'react-stately';
import { useProviderProps } from '../../../provider.js';
import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty/index.js';
import { mergeProps } from '../../../utils/react/index.js';
import { castNullableArrayValue, } from '../../../utils/react/nullableValue.js';
import { FormContext, useFieldProps, useFormProps, wrapWithField, } from '../../form/index.js';
import { CheckboxGroupContext } from './context.js';
const CheckGroupElement = tasty({
    qa: 'CheckboxGroup',
    styles: {
        display: 'flex',
        placeItems: 'start',
        placeContent: 'start',
        flow: {
            '': 'column',
            horizontal: 'row wrap',
        },
        gap: {
            '': '1x',
            horizontal: '1x 2x',
        },
    },
});
function CheckboxGroup(props, ref) {
    props = castNullableArrayValue(props);
    props = useProviderProps(props);
    props = useFormProps(props);
    props = useFieldProps(props, {
        defaultValidationTrigger: 'onChange',
        valuePropsMapper: ({ value, onChange }) => ({
            value: value != null ? value : [],
            onChange: onChange,
        }),
    });
    let { id, isDisabled, isRequired, necessityIndicator, necessityLabel, label, extra, validationState, children, orientation = 'vertical', message, description, labelStyles, tooltip, labelProps: baseLabelProps, labelSuffix, inputStyles, form, ...otherProps } = props;
    let domRef = useDOMRef(ref);
    let styles = extractStyles(otherProps, CONTAINER_STYLES);
    let state = useCheckboxGroupState(props);
    let { groupProps, labelProps } = useCheckboxGroup(props, state);
    let radioGroup = (_jsx(CheckGroupElement, { id: id, styles: inputStyles, mods: {
            horizontal: orientation === 'horizontal',
        }, children: _jsx(FormContext.Provider, { value: {
                isDisabled,
                validationState,
            }, children: _jsx(CheckboxGroupContext.Provider, { value: state, children: children }) }) }));
    return wrapWithField(radioGroup, domRef, {
        ...props,
        children: null,
        fieldProps: groupProps,
        labelProps: mergeProps(baseLabelProps, labelProps),
    });
}
/**
 * Checkbox groups allow users to select a single option from a list of mutually exclusive options.
 * All possible options are exposed up front for users to compare.
 */
const _CheckboxGroup = forwardRef(CheckboxGroup);
_CheckboxGroup.cubeInputType = 'CheckboxGroup';
_CheckboxGroup.displayName = 'CheckboxGroup';
export { _CheckboxGroup as CheckboxGroup };

        