/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1fc5ad1 | Cube Dev Team */
import { extractStyles } from "../../../tasty/utils/styles.js";
import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
import { tasty } from "../../../tasty/tasty.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 { castNullableStringValue } from "../../../utils/react/nullableValue.js";
import { RadioContext } from "./context.js";
import { forwardRef } from "react";
import { jsx } from "react/jsx-runtime";
import { useRadioGroup } from "react-aria";
import { useDOMRef } from "@react-spectrum/utils";
import { useRadioGroupState } from "react-stately";

//#region src/components/fields/RadioGroup/RadioGroup.tsx
const RadioGroupElement = tasty({
	qa: "RadioGroup",
	styles: {
		display: "flex",
		placeItems: "stretch",
		placeContent: "stretch",
		flow: {
			"": "column",
			horizontal: "row wrap",
			"horizontal & tabs": "row"
		},
		padding: {
			"": "0",
			tabs: ".5x"
		},
		radius: "1cr",
		fill: {
			"": "#clear",
			"tabs | disabled": "#dark.06"
		},
		width: "max-content max-content initial",
		flexShrink: 0,
		gap: {
			"": "1x",
			tabs: ".5x"
		},
		whiteSpace: "nowrap"
	}
});
function RadioGroup(props, ref) {
	let orientation = props.orientation;
	props = castNullableStringValue(props);
	props = useProviderProps(props);
	props = useFormProps(props);
	props = useFieldProps(props, { defaultValidationTrigger: "onChange" });
	let { qa, id, isDisabled, isRequired, labelPosition = "top", isInvalid, children, styles, groupStyles, insideForm, labelProps: baseLabelProps, size, buttonType, type, form, ...otherProps } = props;
	let domRef = useDOMRef(ref);
	styles = extractStyles(otherProps, CONTAINER_STYLES, styles);
	let state = useRadioGroupState(props);
	if (orientation == null) orientation = type === "button" || type === "tabs" ? "horizontal" : "vertical";
	let { radioGroupProps: fieldProps, labelProps } = useRadioGroup({
		...props,
		orientation
	}, state);
	return wrapWithField(/* @__PURE__ */ jsx(RadioGroupElement, {
		id,
		qa: qa || "RadioGroup",
		styles,
		"data-input-type": "radiogroup",
		mods: {
			horizontal: orientation === "horizontal",
			"inside-form": insideForm,
			"side-label": labelPosition === "side",
			tabs: type === "tabs"
		},
		children: /* @__PURE__ */ jsx(FormContext.Provider, {
			value: {
				isRequired,
				isInvalid,
				isDisabled
			},
			children: /* @__PURE__ */ jsx(RadioContext.Provider, {
				value: {
					state,
					name: props.name,
					size,
					buttonType,
					type,
					isDisabled
				},
				children
			})
		})
	}), domRef, {
		...props,
		children: null,
		fieldProps,
		labelProps: mergeProps$1(baseLabelProps, labelProps)
	});
}
/**
* Radio 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 _RadioGroup = forwardRef(RadioGroup);
_RadioGroup.cubeInputType = "RadioGroup";
_RadioGroup.displayName = "RadioGroup";

//#endregion
export { _RadioGroup };
//# sourceMappingURL=RadioGroup.js.map