/** @license MIT | @cube-dev/ui-kit v0.135.1 | Cube Dev Team */
import { extractStyles } from "../../../utils/styles.js";
import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
import { _Text } from "../../content/Text.js";
import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
import { Icon } from "../../../icons/Icon.js";
import { useProviderProps } from "../../../provider.js";
import { INLINE_LABEL_STYLES, 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 { wrapWithField } from "../../form/wrapper.js";
import { castNullableIsSelected } from "../../../utils/react/nullableValue.js";
import { HiddenInput } from "../../HiddenInput.js";
import { CheckboxGroupContext } from "./context.js";
import { _CheckboxGroup } from "./CheckboxGroup.js";
import { CONTAINER_STYLES, Element, filterBaseProps, tasty } from "@tenphi/tasty";
import { forwardRef, useContext, useMemo, useRef } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { useCheckbox, useCheckboxGroupItem, useHover } from "react-aria";
import { useFocusableRef } from "@react-spectrum/utils";
import { useToggleState } from "react-stately";
import { IconCheck, IconMinus } from "@tabler/icons-react";

//#region src/components/fields/Checkbox/Checkbox.tsx
const CheckboxWrapperElement = tasty({
	as: "label",
	qa: "CheckboxWrapper",
	styles: {
		position: "relative",
		display: "flex",
		placeItems: "center start",
		placeContent: "baseline",
		gap: "1x",
		flow: "row",
		preset: "default",
		cursor: "$pointer",
		width: "max max-content",
		color: "#dark-02"
	}
});
const CheckboxElement = tasty({
	qa: "Checkbox",
	styles: {
		display: "grid",
		placeItems: "center",
		radius: ".5r",
		fill: {
			"": "#white",
			"checked | indeterminate": "#primary",
			"invalid & !checked": "#white",
			"invalid & checked": "#danger",
			disabled: "#dark.12"
		},
		color: {
			"": "#white",
			"disabled & !checked & !indeterminate": "#clear"
		},
		border: {
			"": "#dark.30",
			invalid: "#danger",
			"disabled | ((indeterminate | checked) & !invalid)": "#clear"
		},
		width: "(2x - 2bw)",
		height: "(2x - 2bw)",
		outline: {
			"": "#primary-text.0",
			focused: "1bw #primary-text"
		},
		outlineOffset: 1,
		transition: "theme"
	}
});
function Checkbox(props, ref) {
	let groupState = useContext(CheckboxGroupContext);
	props = castNullableIsSelected(props);
	let originalProps = props;
	props = useProviderProps(props);
	props = useFormProps(props);
	props = useFieldProps(props, {
		defaultValidationTrigger: "onChange",
		valuePropsMapper: ({ value, onChange }) => ({
			isSelected: value ?? false,
			isIndeterminate: false,
			onChange
		}),
		unsafe__isDisabled: !!groupState
	});
	let { qa, isIndeterminate = false, isDisabled = false, insideForm, isRequired, children, label, validationState, labelProps, labelStyles, labelPosition, inputStyles, isHidden, form, ...otherProps } = props;
	let styles = extractStyles(props, CONTAINER_STYLES);
	labelStyles = useMemo(() => ({
		...!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES,
		...labelStyles
	}), [groupState, labelStyles]);
	let { isFocused, focusProps } = useFocus$1({ isDisabled }, true);
	let { hoverProps, isHovered } = useHover({ isDisabled });
	let inputRef = useRef(null);
	let domRef = useFocusableRef(ref, inputRef);
	const toggleState = useToggleState(props);
	let { inputProps } = groupState ? useCheckboxGroupItem({
		...props,
		value: props.value || "",
		isRequired: originalProps.isRequired,
		validationState: originalProps.validationState
	}, groupState, inputRef) : useCheckbox({
		...props,
		...typeof label === "string" && label.trim() ? { "aria-label": label } : {}
	}, toggleState, inputRef);
	let markIcon = isIndeterminate ? /* @__PURE__ */ jsx(Icon, {
		size: 12,
		stroke: 3,
		children: /* @__PURE__ */ jsx(IconMinus, {})
	}) : /* @__PURE__ */ jsx(Icon, {
		size: 12,
		stroke: 3,
		children: /* @__PURE__ */ jsx(IconCheck, {})
	});
	if (groupState) {
		for (let key of [
			"isSelected",
			"defaultSelected",
			"isEmphasized"
		]) if (originalProps[key] != null) console.warn(`CubeUIKit: ${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`);
		if (props.value == null) console.warn("CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.");
	}
	const mods = {
		checked: inputProps.checked,
		indeterminate: isIndeterminate,
		invalid: validationState === "invalid",
		valid: validationState === "valid",
		disabled: isDisabled,
		hovered: isHovered,
		focused: isFocused,
		"side-label": labelPosition === "side",
		"inside-form": insideForm
	};
	const checkbox = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(HiddenInput, {
		qa: qa || "Checkbox",
		"data-input-type": "checkbox",
		...mergeProps$1(inputProps, focusProps),
		ref: inputRef
	}), /* @__PURE__ */ jsx(CheckboxElement, {
		mods,
		styles: inputStyles,
		children: markIcon
	})] });
	const checkboxField = /* @__PURE__ */ jsxs(CheckboxWrapperElement, {
		isHidden,
		mods,
		children: [checkbox, children && /* @__PURE__ */ jsx(_Text, {
			nowrap: true,
			children
		})]
	});
	if (!groupState) return wrapWithField(checkboxField, domRef, {
		...props,
		children: null,
		inputStyles
	});
	return /* @__PURE__ */ jsxs(CheckboxWrapperElement, {
		styles,
		isHidden,
		...hoverProps,
		...filterBaseProps(otherProps),
		ref: domRef,
		children: [checkbox, label ?? children ? /* @__PURE__ */ jsx(Element, {
			styles: labelStyles,
			mods: {
				invalid: validationState === "invalid",
				valid: validationState === "valid",
				disabled: isDisabled
			},
			...labelProps ? filterBaseProps(labelProps) : void 0,
			children: label ?? children
		}) : null]
	});
}
/**
* Checkboxes allow users to select multiple items from a list of individual items,
* or to mark one individual item as selected.
*/
let _Checkbox = forwardRef(Checkbox);
_Checkbox.cubeInputType = "Checkbox";
let __Checkbox = Object.assign(_Checkbox, { Group: _CheckboxGroup });
__Checkbox.displayName = "Checkbox";

//#endregion
export { __Checkbox, useCheckbox };
//# sourceMappingURL=Checkbox.js.map