/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d4ad2ea | Cube Dev Team */
import { extractStyles } from "../../../utils/styles.js";
import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
import { useProviderProps } from "../../../provider.js";
import { FormContext, useFormProps } from "../../form/Form/Form.js";
import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
import { wrapWithField } from "../../form/wrapper.js";
import { castNullableArrayValue } from "../../../utils/react/nullableValue.js";
import { CheckboxGroupContext } from "./context.js";
import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
import { forwardRef } from "react";
import { jsx } from "react/jsx-runtime";
import { useCheckboxGroup } from "react-aria";
import { useDOMRef } from "@react-spectrum/utils";
import { useCheckboxGroupState } from "react-stately";

//#region src/components/fields/Checkbox/CheckboxGroup.tsx
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
		})
	});
	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);
	extractStyles(otherProps, CONTAINER_STYLES);
	let state = useCheckboxGroupState(props);
	let { groupProps, labelProps } = useCheckboxGroup(props, state);
	return wrapWithField(/* @__PURE__ */ jsx(CheckGroupElement, {
		id,
		styles: inputStyles,
		mods: { horizontal: orientation === "horizontal" },
		children: /* @__PURE__ */ jsx(FormContext.Provider, {
			value: {
				isDisabled,
				validationState
			},
			children: /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, {
				value: state,
				children
			})
		})
	}), domRef, {
		...props,
		children: null,
		fieldProps: groupProps,
		labelProps: mergeProps$1(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";

//#endregion
export { _CheckboxGroup };
//# sourceMappingURL=CheckboxGroup.js.map