/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-f1f3d22 | Cube Dev Team */
import { extractStyles } from "../../../tasty/utils/styles.js";
import { BLOCK_STYLES, OUTER_STYLES } from "../../../tasty/styles/list.js";
import { tasty } from "../../../tasty/tasty.js";
import { useId as useId$2 } from "../../../utils/react/useId.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 { LoadingIcon } from "../../../icons/LoadingIcon.js";
import { useProviderProps } from "../../../provider.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 { forwardRef, useRef } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { useHover, useSwitch } from "react-aria";
import { useFocusableRef } from "@react-spectrum/utils";
import { useToggleState } from "react-stately";

//#region src/components/fields/Switch/Switch.tsx
const SwitchWrapperElement = tasty({
	as: "label",
	styles: {
		display: "flex",
		position: "relative",
		placeItems: {
			"": "center stretch",
			"side-label": "baseline stretch"
		},
		gap: "1x",
		width: "max max-content",
		color: "#dark-02"
	}
});
const SwitchElement = tasty({
	qa: "Switch",
	styles: {
		boxSizing: "border-box",
		position: "relative",
		verticalAlign: "baseline",
		placeSelf: "center",
		radius: "round",
		fill: {
			"": "#white",
			checked: "#primary",
			disabled: "#border.5",
			"disabled & checked": "#border"
		},
		color: {
			"": "#dark-03",
			checked: "#white"
		},
		border: {
			"": "#dark-05",
			checked: "#primary-text",
			disabled: "#dark-05.5",
			invalid: "#danger"
		},
		width: {
			"": "5x 5x",
			"size=medium": "4x 4x",
			"size=small": "3x 3x"
		},
		height: {
			"": "3x 3x",
			"size=medium": "2.5x 2.5x",
			"size=small": "2x 2x"
		},
		outline: {
			"": "#primary-text.0",
			focused: "1bw #primary-text"
		},
		outlineOffset: 1,
		transition: "theme",
		cursor: "$pointer",
		Thumb: {
			position: "absolute",
			width: {
				"": "2x 2x",
				"size=medium": "1.5x 1.5x",
				"size=small": "1.25x 1.25x"
			},
			height: {
				"": "2x 2x",
				"size=medium": "1.5x 1.5x",
				"size=small": "1.25x 1.25x"
			},
			radius: "round",
			fill: {
				"": "currentColor",
				disabled: "#current.5",
				"disabled & checked": "#white.8"
			},
			top: {
				"": ".375x",
				"size=medium": ".375x",
				"size=small": ".25x"
			},
			left: {
				"": ".375x",
				"size=medium": ".375x",
				"size=small": ".25x",
				checked: "2.25x",
				"checked & size=medium": "1.75x",
				"checked & size=small": "1.25x"
			},
			transition: "left, theme",
			cursor: "$pointer"
		}
	}
});
function Switch(props, ref) {
	props = castNullableIsSelected(props);
	props = useProviderProps(props);
	props = useFormProps(props);
	props = useFieldProps(props, {
		defaultValidationTrigger: "onChange",
		valuePropsMapper: ({ value, onChange }) => ({
			isSelected: value != null ? value : false,
			isIndeterminate: false,
			onChange
		})
	});
	let { qa, isDisabled = false, children, label, labelStyles, insideForm, isLoading, labelPosition, inputStyles, validationState, size = "medium", form } = props;
	const id = useId$2(props.id);
	let styles = extractStyles(props, OUTER_STYLES);
	inputStyles = extractStyles(props, BLOCK_STYLES, inputStyles, void 0, ["styles"]);
	let { isFocused, focusProps } = useFocus$1({ isDisabled }, true);
	let { hoverProps, isHovered } = useHover({ isDisabled });
	let inputRef = useRef(null);
	let domRef = useFocusableRef(ref, inputRef);
	let { inputProps } = useSwitch(props, useToggleState(props), inputRef);
	const mods = {
		checked: inputProps.checked,
		disabled: isDisabled,
		hovered: isHovered,
		focused: isFocused,
		invalid: validationState === "invalid",
		valid: validationState === "valid",
		"inside-form": insideForm,
		"side-label": labelPosition === "side"
	};
	return wrapWithField(/* @__PURE__ */ jsxs(SwitchWrapperElement, {
		qa: "SwitchWrapper",
		mods,
		"data-size": size,
		styles,
		...hoverProps,
		children: [
			/* @__PURE__ */ jsx(HiddenInput, {
				qa: qa || "Switch",
				"data-input-type": "switch",
				...mergeProps$1(inputProps, focusProps),
				ref: inputRef,
				id
			}),
			/* @__PURE__ */ jsx(SwitchElement, {
				mods,
				"data-size": size,
				styles: inputStyles,
				children: /* @__PURE__ */ jsx("div", {
					"data-element": "Thumb",
					"aria-hidden": "true"
				})
			}),
			children ? /* @__PURE__ */ jsx(_Text, {
				nowrap: true,
				children
			}) : null,
			isLoading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [label ? /* @__PURE__ */ jsx(Fragment$1, { children: "\xA0" }) : null, /* @__PURE__ */ jsx(LoadingIcon, {})] }) : null
		]
	}), domRef, {
		...props,
		id,
		labelProps: {
			...props.labelProps,
			for: id
		},
		children: null,
		inputStyles
	});
}
/**
* Switches allow users to turn an individual option on or off.
* They are usually used to activate or deactivate a specific setting.
*/
let _Switch = forwardRef(Switch);
_Switch.cubeInputType = "Checkbox";
_Switch.displayName = "Switch";

//#endregion
export { _Switch, useSwitch };
//# sourceMappingURL=Switch.js.map