/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
const require_styles_styler = require("../../../styles/styler.cjs");
const require_components_IconSlot = require("../../IconSlot.cjs");
const require_components_Box = require("../../Box.cjs");
const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
const require_components_client_SpringMotionConfig = require("../SpringMotionConfig.cjs");
const require_hooks_useRtl = require("../../../hooks/useRtl.cjs");
const require_components_client_Switch_SwitchBase = require("./SwitchBase.cjs");
let react = require("react");
react = require_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
let motion_react_m = require("motion/react-m");
motion_react_m = require_runtime.__toESM(motion_react_m);
//#region src/components/client/Switch/Switch.tsx
const MotionBox = motion_react_m.create(require_components_Box.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 = (0, react.forwardRef)(function Switch({ reduceMotion: forceReduceMotion, ...props }, parentRef) {
	const prefersReducedMotion = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion();
	const isRtl = require_hooks_useRtl.useRtl();
	const reduceMotion = forceReduceMotion ? "always" : "user";
	const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Switch_SwitchBase.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: require_styles_styler.getStyles({
					switchSizeHandle: size,
					className: require_styles_styler.cx("relative", "pointer-events-none", "uds-border-radius-full", "overflow-hidden")
				}),
				handleCircle: require_styles_styler.getStyles({
					switchVariantActiveHandle: isOn ? "on" : "off",
					switchVariantHandle: "default",
					className: require_styles_styler.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: require_styles_styler.getStyles({
					switchSizeHandleIcon: size,
					switchVariantHandleIcon: "default",
					switchVariantActiveHandleIcon: isOn ? "on" : "off",
					className: require_styles_styler.cx("absolute", "opacity-0", "top-1/2", "left-1/2", "transform", "translate-x-[-50%]", "translate-y-[-50%]", cssAnimationDuration, "transition-opacity")
				})
			};
			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
				reducedMotion: reduceMotion,
				...toggleTransition,
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionBox, {
					className: classNames.handle,
					...motionInitialAndAnimate,
					...handleSlotProps,
					children: [
						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, { className: classNames.handleCircle }),
						onIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
							icon: onIcon,
							iconProps: {
								variant: "fill",
								size: "sm"
							},
							"data-testid": "on-icon",
							className: require_styles_styler.cx(classNames.handleIcon, isOn ? "opacity-100" : "opacity-0")
						}),
						offIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
							icon: offIcon,
							iconProps: {
								variant: "fill",
								size: "sm"
							},
							"data-testid": "off-icon",
							className: require_styles_styler.cx(classNames.handleIcon, !isOn ? "opacity-100" : "opacity-0")
						})
					]
				})
			});
		}
	});
});
Switch.displayName = "Switch";
//#endregion
exports.Switch = Switch;
