/** @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 { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
import { useProviderProps } from "../../../provider.js";
import { _Item } from "../../content/Item/Item.js";
import { INLINE_LABEL_STYLES } from "../../form/Label.js";
import { useFormProps } from "../../form/Form/Form.js";
import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
import { RADIO_SIZE_MAP } from "../../navigation/Tabs/types.js";
import { HiddenInput } from "../../HiddenInput.js";
import { useRadioProvider } from "./context.js";
import { _RadioGroup } from "./RadioGroup.js";
import { OUTER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
import { forwardRef, useMemo, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { useHover, useRadio } from "react-aria";
import { useFocusableRef } from "@react-spectrum/utils";

//#region src/components/fields/RadioGroup/Radio.tsx
const RadioButtonElement = tasty(_Item, {
	qa: "RadioButton",
	as: "label",
	styles: {
		preset: "t3m",
		lineHeight: "1em",
		flexGrow: 1,
		gridTemplate: "\"icon prefix label suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content",
		placeContent: "center",
		Label: { placeSelf: {
			"": "center start",
			"!has-prefix & !has-suffix & !has-icon & !has-right-icon": "center"
		} }
	}
});
const TabRadioButtonSelectedElement = tasty(RadioButtonElement, { styles: {
	fill: "#white",
	shadow: "$item-shadow"
} });
const RadioWrapperElement = tasty({
	as: "label",
	qa: "RadioWrapper",
	styles: {
		position: "relative",
		display: "grid",
		placeItems: "center start",
		placeContent: "center start",
		gap: "1x",
		flow: "column",
		preset: "default",
		width: "min-content",
		margin: {
			"": "1x right",
			button: "0"
		},
		zIndex: {
			"": "initial",
			checked: 1
		},
		flexGrow: 1
	}
});
const RadioNormalElement = tasty({ styles: {
	display: "grid",
	placeItems: "center",
	radius: "round",
	fill: {
		"": "#white",
		disabled: "#dark.04"
	},
	color: {
		"": "#clear",
		checked: "#primary",
		"invalid & checked": "#danger-text",
		"disabled | !checked": "#clear",
		"disabled & checked": "#dark.12"
	},
	border: {
		"": "#dark-04",
		checked: "#primary-text",
		invalid: "#danger-text.50",
		disabled: "#dark.12"
	},
	width: "2x",
	height: "2x",
	outline: {
		"": "#primary-text.0",
		focused: "1bw #primary-text"
	},
	outlineOffset: 1,
	transition: "theme",
	whiteSpace: "nowrap",
	RadioCircle: {
		display: "block",
		radius: "round",
		width: "1x",
		height: "1x",
		fill: "currentColor"
	}
} });
const RadioCircleElement = /* @__PURE__ */ jsx("div", { "data-element": "RadioCircle" });
const RadioLabelElement = tasty({
	qa: "RadioLabel",
	styles: INLINE_LABEL_STYLES
});
function Radio(props, ref) {
	props = useProviderProps(props);
	props = useFormProps(props);
	props = useFieldProps(props, { defaultValidationTrigger: "onChange" });
	let { qa, isDisabled, isInvalid, children, label, autoFocus, labelStyles, labelProps, type, buttonType, size, icon, rightIcon, prefix, suffix, description, tooltip, hotkeys, "aria-label": ariaLabel, form, ...otherProps } = props;
	label = label || children;
	let styles = extractStyles(otherProps, OUTER_STYLES);
	labelStyles = {
		...INLINE_LABEL_STYLES,
		...labelStyles
	};
	let radioGroupProps = useRadioProvider();
	let state = radioGroupProps && radioGroupProps.state;
	let name = radioGroupProps && radioGroupProps.name;
	let contextSize = radioGroupProps?.size;
	let contextButtonType = radioGroupProps?.buttonType;
	let contextType = radioGroupProps?.type;
	let contextIsDisabled = radioGroupProps?.isDisabled;
	if (!state) throw new Error("CubeUI: The Radio button is used outside the RadioGroup.");
	let effectiveType = type ?? contextType ?? "radio";
	let isButton = effectiveType === "button" || effectiveType === "tabs";
	let effectiveSize = size ?? contextSize ?? "medium";
	if (effectiveType === "tabs" && isButton) effectiveSize = RADIO_SIZE_MAP[effectiveSize === "large" ? "large" : "medium"];
	let effectiveButtonType;
	if (effectiveType === "tabs") effectiveButtonType = "neutral";
	else {
		const baseButtonType = buttonType ?? contextButtonType ?? "outline";
		if (baseButtonType === "primary") effectiveButtonType = state.selectedValue === props.value ? "primary" : "secondary";
		else effectiveButtonType = baseButtonType;
	}
	let effectiveIsDisabled = isDisabled ?? contextIsDisabled ?? false;
	let { isFocused, focusProps } = useFocus$1({ isDisabled: effectiveIsDisabled }, true);
	let { hoverProps, isHovered } = useHover({ isDisabled: effectiveIsDisabled });
	let inputRef = useRef(null);
	let domRef = useFocusableRef(ref, inputRef);
	let { inputProps, isDisabled: isRadioDisabled, isSelected: isRadioSelected } = useRadio({
		name,
		...props,
		isDisabled: effectiveIsDisabled
	}, state, inputRef);
	const mods = useMemo(() => ({
		checked: isRadioSelected,
		invalid: !!isInvalid,
		disabled: isRadioDisabled,
		hovered: isHovered,
		button: isButton,
		focused: isFocused,
		tabs: effectiveType === "tabs"
	}), [
		isRadioSelected,
		isInvalid,
		isRadioDisabled,
		isHovered,
		isButton,
		isFocused,
		effectiveType
	]);
	if (isButton) return /* @__PURE__ */ jsxs(isRadioSelected && contextType === "tabs" ? TabRadioButtonSelectedElement : RadioButtonElement, {
		ref: domRef,
		type: effectiveButtonType,
		theme: isInvalid ? "danger" : "default",
		size: effectiveSize,
		icon,
		rightIcon,
		prefix,
		suffix,
		description,
		tooltip,
		hotkeys,
		isSelected: isRadioSelected,
		isDisabled: isRadioDisabled,
		mods,
		styles,
		...mergeProps$1(hoverProps, focusProps),
		children: [/* @__PURE__ */ jsx(HiddenInput, {
			qa: qa || "Radio",
			"data-input-type": "radio",
			"aria-label": ariaLabel,
			...inputProps,
			ref: inputRef,
			form: null,
			mods: {
				button: isButton,
				disabled: isRadioDisabled
			}
		}), label]
	});
	return /* @__PURE__ */ jsxs(RadioWrapperElement, {
		styles,
		...hoverProps,
		ref: domRef,
		mods,
		"data-type": type,
		children: [
			/* @__PURE__ */ jsx(HiddenInput, {
				qa: qa || "Radio",
				"data-input-type": "radio",
				"aria-label": ariaLabel,
				...mergeProps$1(inputProps, focusProps),
				ref: inputRef,
				mods: { button: isButton }
			}),
			/* @__PURE__ */ jsx(RadioNormalElement, {
				"data-element": "Input",
				mods,
				"data-type": type,
				children: RadioCircleElement
			}),
			label && /* @__PURE__ */ jsx(RadioLabelElement, {
				mods,
				styles: labelStyles,
				...labelProps ? filterBaseProps(labelProps) : void 0,
				children: label
			})
		]
	});
}
/**
* Radio buttons 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 _Radio = forwardRef(Radio);
const Tabs = tasty(_RadioGroup, { type: "tabs" });
const ButtonGroup = tasty(_RadioGroup, { type: "button" });
const __Radio = Object.assign(_Radio, {
	Group: _RadioGroup,
	Tabs,
	ButtonGroup,
	Button: _Radio
});
__Radio.displayName = "Radio";

//#endregion
export { __Radio, useRadio };
//# sourceMappingURL=Radio.js.map