/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
import { cx, getStyles } from "../../../styles/styler.js";
import { IconSlot } from "../../IconSlot.js";
import { Box } from "../../Box.js";
import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
import { SpringMotionConfig } from "../SpringMotionConfig.js";
import { useRtl } from "../../../hooks/useRtl.js";
import { SwitchBase } from "./SwitchBase.js";
import { forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import * as m from "motion/react-m";
//#region src/components/client/Switch/Switch.tsx
const MotionBox = m.create(Box);
MotionBox.displayName = "SwitchMotionBox";
const toggleTransition = {
	layoutVariant: "bouncy",
	layoutSpeed: "4"
};
/**
* **⚙️️ An switch.
*
* @componentType Client component
*
* @description
* A switch (also called a toggle) is a binary on/off input control. It is clickable or touchable on mobile devices allowing users to pick between two clearly opposite choices.
*
* @see
* Check out the {@link https://uds.build/docs/components/switch Switch Docs} for more info
*
* @usage
* - Forms: switch
*
* @example
* ```tsx
* 'use client';
* import { Switch } from "@yahoo/uds";
*
* <Switch label="Name" required />
*```
*
* @related [Checkbox](https://uds.build/docs/components/checkbox).
**/
const Switch = forwardRef(function Switch({ reduceMotion: forceReduceMotion, ...props }, parentRef) {
	const prefersReducedMotion = usePrefersReducedMotion();
	const isRtl = useRtl();
	const reduceMotion = forceReduceMotion ? "always" : "user";
	const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
	return /* @__PURE__ */ jsx(SwitchBase, {
		...props,
		ref: parentRef,
		cssAnimationDuration,
		enableHoverTracking: true,
		renderHandle: ({ size, isOn, isOnX, showHoverEffect, disabled, onIcon, offIcon, cssAnimationDuration, handleSlotProps }) => {
			const onX = isRtl ? `-${isOnX}` : isOnX;
			const motionInitialAndAnimate = {
				initial: {
					scale: 1,
					x: isOn ? onX : 0
				},
				animate: {
					scale: showHoverEffect ? 1.05 : 1,
					x: isOn ? onX : 0
				}
			};
			const classNames = {
				handle: getStyles({
					switchSizeHandle: size,
					className: cx("relative", "pointer-events-none", "uds-border-radius-full", "overflow-hidden")
				}),
				handleCircle: getStyles({
					switchVariantActiveHandle: isOn ? "on" : "off",
					switchVariantHandle: "default",
					className: cx("absolute", "top-0", "left-0", "right-0", "bottom-0", "opacity-95", !disabled && "group-hover:opacity-100", cssAnimationDuration, "transition-[background-color,box-shadow,opacity]")
				}),
				handleIcon: getStyles({
					switchSizeHandleIcon: size,
					switchVariantHandleIcon: "default",
					switchVariantActiveHandleIcon: isOn ? "on" : "off",
					className: cx("absolute", "opacity-0", "top-1/2", "left-1/2", "transform", "translate-x-[-50%]", "translate-y-[-50%]", cssAnimationDuration, "transition-opacity")
				})
			};
			return /* @__PURE__ */ jsx(SpringMotionConfig, {
				reducedMotion: reduceMotion,
				...toggleTransition,
				children: /* @__PURE__ */ jsxs(MotionBox, {
					className: classNames.handle,
					...motionInitialAndAnimate,
					...handleSlotProps,
					children: [
						/* @__PURE__ */ jsx(Box, { className: classNames.handleCircle }),
						onIcon && /* @__PURE__ */ jsx(IconSlot, {
							icon: onIcon,
							iconProps: {
								variant: "fill",
								size: "sm"
							},
							"data-testid": "on-icon",
							className: cx(classNames.handleIcon, isOn ? "opacity-100" : "opacity-0")
						}),
						offIcon && /* @__PURE__ */ jsx(IconSlot, {
							icon: offIcon,
							iconProps: {
								variant: "fill",
								size: "sm"
							},
							"data-testid": "off-icon",
							className: cx(classNames.handleIcon, !isOn ? "opacity-100" : "opacity-0")
						})
					]
				})
			});
		}
	});
});
Switch.displayName = "Switch";
//#endregion
export { Switch };
