@yahoo/uds 3.159.2 → 3.161.0

package/dist/components/client/SpringMotionConfig.js

@@ -2,7 +2,6 @@
 "use client";
 import { getMotionVar } from "../../css-tokens/dist/index.js";
 import { SPRING_MOTION_DEFAULTS, motion } from "../../motion-tokens/dist/index.js";
-import { useAvoidMotionLibrary } from "../experimental/client/AvoidMotionLibraryProvider.js";
 import { useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { LazyMotion, MotionConfig } from "motion/react";
@@ -70,22 +69,20 @@ function SpringMotionConfig({ children, reducedMotion = "user", loadFeatures = d
 		layoutDampingVar,
 		layoutStiffnessVar
 	]);
-	const transition = useMemo(() => ({
-		type: "spring",
-		mass: 1,
-		...layoutConfig,
-		layout: layoutConfig,
-		opacity: colorConfig,
-		color: colorConfig,
-		borderColor: colorConfig,
-		backgroundColor: colorConfig
-	}), [colorConfig, layoutConfig]);
-	if (useAvoidMotionLibrary()) return children;
 	return /* @__PURE__ */ jsx(LazyMotion, {
 		features: loadFeatures,
 		strict: true,
 		children: /* @__PURE__ */ jsx(MotionConfig, {
-			transition,
+			transition: useMemo(() => ({
+				type: "spring",
+				mass: 1,
+				...layoutConfig,
+				layout: layoutConfig,
+				opacity: colorConfig,
+				color: colorConfig,
+				borderColor: colorConfig,
+				backgroundColor: colorConfig
+			}), [colorConfig, layoutConfig]),
 			reducedMotion,
 			children
 		})

package/dist/components/client/Switch/Switch.cjs

@@ -0,0 +1,119 @@
+/*! © 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_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 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 motionInitialAndAnimate = {
+				initial: {
+					scale: 1,
+					x: isOn ? isOnX : 0
+				},
+				animate: {
+					scale: showHoverEffect ? 1.05 : 1,
+					x: isOn ? isOnX : 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;

package/dist/components/client/{Switch.d.cts → Switch/Switch.d.cts}

@@ -1,21 +1,9 @@
 
-import { UniversalSwitchProps } from "../../types/dist/index.cjs";
+import { SwitchProps as SwitchProps$1 } from "./types.cjs";
 import React from "react";
 
-//#region src/components/client/Switch.d.ts
-type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color' | 'defaultChecked' | 'children'>;
-type DataAttributes = {
-  [name: `data-${string}`]: string;
-};
-interface SwitchProps extends NativeInputProps, UniversalSwitchProps {
-  /** Props to be passed into various slots within the component. */
-  slotProps?: {
-    root?: DataAttributes;
-    switch?: DataAttributes;
-    handle?: DataAttributes;
-    label?: DataAttributes;
-  };
-}
+//#region src/components/client/Switch/Switch.d.ts
+type SwitchProps = SwitchProps$1;
 /**
  * **⚙️️ An switch.
  *
@@ -40,6 +28,6 @@ interface SwitchProps extends NativeInputProps, UniversalSwitchProps {
  *
  * @related [Checkbox](https://uds.build/docs/components/checkbox).
  **/
-declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps$1 & React.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { Switch, type SwitchProps };

package/dist/components/client/{Switch.d.ts → Switch/Switch.d.ts}

@@ -1,22 +1,10 @@
 
 "use client";
-import { UniversalSwitchProps } from "../../types/dist/index.js";
+import { SwitchProps as SwitchProps$1 } from "./types.js";
 import React from "react";
 
-//#region src/components/client/Switch.d.ts
-type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color' | 'defaultChecked' | 'children'>;
-type DataAttributes = {
-  [name: `data-${string}`]: string;
-};
-interface SwitchProps extends NativeInputProps, UniversalSwitchProps {
-  /** Props to be passed into various slots within the component. */
-  slotProps?: {
-    root?: DataAttributes;
-    switch?: DataAttributes;
-    handle?: DataAttributes;
-    label?: DataAttributes;
-  };
-}
+//#region src/components/client/Switch/Switch.d.ts
+type SwitchProps = SwitchProps$1;
 /**
  * **⚙️️ An switch.
  *
@@ -41,6 +29,6 @@ interface SwitchProps extends NativeInputProps, UniversalSwitchProps {
  *
  * @related [Checkbox](https://uds.build/docs/components/checkbox).
  **/
-declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps$1 & React.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { Switch, type SwitchProps };

package/dist/components/client/Switch/Switch.js

@@ -0,0 +1,115 @@
+/*! © 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 { 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 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 motionInitialAndAnimate = {
+				initial: {
+					scale: 1,
+					x: isOn ? isOnX : 0
+				},
+				animate: {
+					scale: showHoverEffect ? 1.05 : 1,
+					x: isOn ? isOnX : 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 };

package/dist/components/client/Switch/SwitchBase.cjs

@@ -0,0 +1,129 @@
+/*! © 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_Box = require("../../Box.cjs");
+const require_components_FormLabel = require("../../FormLabel.cjs");
+const require_components_client_Switch_switchStyles = require("./switchStyles.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/client/Switch/SwitchBase.tsx
+const SwitchBase = (0, react.forwardRef)(function SwitchBase({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, disabled, required, onFocus, onBlur, className, style, slotProps, cssAnimationDuration, enableHoverTracking = false, renderHandle, ...switchProps }, parentRef) {
+	const generatedId = (0, react.useId)();
+	const uid = id ?? `uds-input-${generatedId}`;
+	const rootSlotProps = slotProps?.root ?? {};
+	const switchSlotProps = slotProps?.switch ?? {};
+	const handleSlotProps = slotProps?.handle ?? {};
+	const labelSlotProps = slotProps?.label ?? {};
+	const innerRef = (0, react.useRef)(null);
+	const isControlled = isOnProp !== void 0;
+	const [uncontrolledIsOn, setUncontrolledIsOn] = (0, react.useState)(defaultIsOn ?? false);
+	const [isHovered, setIsHovered] = (0, react.useState)(false);
+	const showHoverEffect = (0, react.useMemo)(() => {
+		return enableHoverTracking && !disabled && isHovered;
+	}, [
+		disabled,
+		enableHoverTracking,
+		isHovered
+	]);
+	const { isOnX, isOnTranslateClass } = require_components_client_Switch_switchStyles.SIZE_MAP[size];
+	const isOn = isControlled ? isOnProp ?? false : uncontrolledIsOn;
+	const handleChange = (0, react.useCallback)((e) => {
+		onChange?.(e);
+		if (!isControlled) setUncontrolledIsOn(e.target.checked);
+	}, [isControlled, onChange]);
+	const handleFocus = (0, react.useCallback)((e) => {
+		onFocus?.(e);
+	}, [onFocus]);
+	const handleBlur = (0, react.useCallback)((e) => {
+		onBlur?.(e);
+	}, [onBlur]);
+	const handleHoverStart = (0, react.useCallback)(() => {
+		if (enableHoverTracking) setIsHovered(true);
+	}, [enableHoverTracking]);
+	const handleHoverEnd = (0, react.useCallback)(() => {
+		if (enableHoverTracking) setIsHovered(false);
+	}, [enableHoverTracking]);
+	const classNames = {
+		root: require_styles_styler.getStyles({
+			switchSizeRoot: size,
+			switchVariantRoot: "default",
+			switchVariantActiveRoot: isOn ? "on" : "off",
+			display: "flex",
+			flexDirection: labelPosition === "start" ? "row" : "row-reverse",
+			alignItems: "center",
+			className: require_styles_styler.cx("group", {
+				"cursor-pointer": !disabled,
+				"cursor-default": disabled,
+				"opacity-50": disabled
+			}, className)
+		}),
+		switch: require_styles_styler.getStyles({
+			switchVariantSwitch: "default",
+			switchSizeSwitch: size,
+			switchVariantActiveSwitch: isOn ? "on" : "off",
+			borderRadius: "full",
+			position: "relative",
+			alignItems: "center",
+			className: require_styles_styler.cx("uds-ring", "uds-ring-within", cssAnimationDuration, "transition-[background-color,box-shadow]")
+		}),
+		htmlCheckbox: require_styles_styler.cx("cursor-[inherit]", "absolute", "opacity-0", "top-1/2", "left-1/2", "w-[calc(100%+2px)]", "h-[calc(100%+2px)]", "transform", "translate-x-[-50%]", "translate-y-[-50%]"),
+		label: require_styles_styler.cx(labelPosition === "start" ? "text-start" : "text-end")
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(label ? "label" : "div", {
+		className: classNames.root,
+		"data-testid": "container",
+		style,
+		tabIndex: -1,
+		onPointerEnter: handleHoverStart,
+		onPointerLeave: handleHoverEnd,
+		...rootSlotProps,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
+			className: classNames.switch,
+			...switchSlotProps,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "checkbox",
+				tabIndex: 0,
+				...switchProps,
+				ref: (ref) => {
+					innerRef.current = ref;
+					if (typeof parentRef === "function") parentRef(ref);
+					else if (parentRef !== null) parentRef.current = ref;
+				},
+				onFocus: handleFocus,
+				onBlur: handleBlur,
+				id: uid,
+				disabled,
+				required,
+				checked: isControlled ? isOn : void 0,
+				defaultChecked: isControlled ? void 0 : defaultIsOn,
+				onChange: handleChange,
+				className: classNames.htmlCheckbox
+			}), renderHandle({
+				size,
+				isOn,
+				isOnX,
+				isOnTranslateClass,
+				showHoverEffect,
+				disabled,
+				onIcon,
+				offIcon,
+				cssAnimationDuration,
+				handleSlotProps
+			})]
+		}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_FormLabel.FormLabel, {
+			as: "div",
+			variant: "inherit",
+			color: "inherit",
+			required,
+			label,
+			className: classNames.label,
+			...labelSlotProps
+		})]
+	});
+});
+SwitchBase.displayName = "SwitchBase";
+//#endregion
+exports.SwitchBase = SwitchBase;

package/dist/components/client/Switch/SwitchBase.d.cts

@@ -0,0 +1,29 @@
+
+import { DataAttributes, SwitchProps } from "./types.cjs";
+import React, { ReactNode } from "react";
+
+//#region src/components/client/Switch/SwitchBase.d.ts
+type RenderHandleArgs = {
+  size: NonNullable<SwitchProps['size']>;
+  isOn: boolean;
+  isOnX: string;
+  isOnTranslateClass: string;
+  showHoverEffect: boolean;
+  disabled?: boolean;
+  onIcon?: SwitchProps['onIcon'];
+  offIcon?: SwitchProps['offIcon'];
+  cssAnimationDuration: string;
+  handleSlotProps?: DataAttributes;
+};
+type SwitchBaseProps = SwitchProps & {
+  cssAnimationDuration: string;
+  enableHoverTracking?: boolean;
+  renderHandle: (args: RenderHandleArgs) => ReactNode;
+};
+declare const SwitchBase: React.ForwardRefExoticComponent<SwitchProps & {
+  cssAnimationDuration: string;
+  enableHoverTracking?: boolean;
+  renderHandle: (args: RenderHandleArgs) => ReactNode;
+} & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { SwitchBase, type SwitchBaseProps };

package/dist/components/client/Switch/SwitchBase.d.ts

@@ -0,0 +1,30 @@
+
+"use client";
+import { DataAttributes, SwitchProps } from "./types.js";
+import React, { ReactNode } from "react";
+
+//#region src/components/client/Switch/SwitchBase.d.ts
+type RenderHandleArgs = {
+  size: NonNullable<SwitchProps['size']>;
+  isOn: boolean;
+  isOnX: string;
+  isOnTranslateClass: string;
+  showHoverEffect: boolean;
+  disabled?: boolean;
+  onIcon?: SwitchProps['onIcon'];
+  offIcon?: SwitchProps['offIcon'];
+  cssAnimationDuration: string;
+  handleSlotProps?: DataAttributes;
+};
+type SwitchBaseProps = SwitchProps & {
+  cssAnimationDuration: string;
+  enableHoverTracking?: boolean;
+  renderHandle: (args: RenderHandleArgs) => ReactNode;
+};
+declare const SwitchBase: React.ForwardRefExoticComponent<SwitchProps & {
+  cssAnimationDuration: string;
+  enableHoverTracking?: boolean;
+  renderHandle: (args: RenderHandleArgs) => ReactNode;
+} & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { SwitchBase, type SwitchBaseProps };

package/dist/components/client/Switch/SwitchBase.js

@@ -0,0 +1,126 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { cx, getStyles } from "../../../styles/styler.js";
+import { Box } from "../../Box.js";
+import { FormLabel } from "../../FormLabel.js";
+import { SIZE_MAP } from "./switchStyles.js";
+import { forwardRef, useCallback, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/client/Switch/SwitchBase.tsx
+const SwitchBase = forwardRef(function SwitchBase({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, disabled, required, onFocus, onBlur, className, style, slotProps, cssAnimationDuration, enableHoverTracking = false, renderHandle, ...switchProps }, parentRef) {
+	const generatedId = useId();
+	const uid = id ?? `uds-input-${generatedId}`;
+	const rootSlotProps = slotProps?.root ?? {};
+	const switchSlotProps = slotProps?.switch ?? {};
+	const handleSlotProps = slotProps?.handle ?? {};
+	const labelSlotProps = slotProps?.label ?? {};
+	const innerRef = useRef(null);
+	const isControlled = isOnProp !== void 0;
+	const [uncontrolledIsOn, setUncontrolledIsOn] = useState(defaultIsOn ?? false);
+	const [isHovered, setIsHovered] = useState(false);
+	const showHoverEffect = useMemo(() => {
+		return enableHoverTracking && !disabled && isHovered;
+	}, [
+		disabled,
+		enableHoverTracking,
+		isHovered
+	]);
+	const { isOnX, isOnTranslateClass } = SIZE_MAP[size];
+	const isOn = isControlled ? isOnProp ?? false : uncontrolledIsOn;
+	const handleChange = useCallback((e) => {
+		onChange?.(e);
+		if (!isControlled) setUncontrolledIsOn(e.target.checked);
+	}, [isControlled, onChange]);
+	const handleFocus = useCallback((e) => {
+		onFocus?.(e);
+	}, [onFocus]);
+	const handleBlur = useCallback((e) => {
+		onBlur?.(e);
+	}, [onBlur]);
+	const handleHoverStart = useCallback(() => {
+		if (enableHoverTracking) setIsHovered(true);
+	}, [enableHoverTracking]);
+	const handleHoverEnd = useCallback(() => {
+		if (enableHoverTracking) setIsHovered(false);
+	}, [enableHoverTracking]);
+	const classNames = {
+		root: getStyles({
+			switchSizeRoot: size,
+			switchVariantRoot: "default",
+			switchVariantActiveRoot: isOn ? "on" : "off",
+			display: "flex",
+			flexDirection: labelPosition === "start" ? "row" : "row-reverse",
+			alignItems: "center",
+			className: cx("group", {
+				"cursor-pointer": !disabled,
+				"cursor-default": disabled,
+				"opacity-50": disabled
+			}, className)
+		}),
+		switch: getStyles({
+			switchVariantSwitch: "default",
+			switchSizeSwitch: size,
+			switchVariantActiveSwitch: isOn ? "on" : "off",
+			borderRadius: "full",
+			position: "relative",
+			alignItems: "center",
+			className: cx("uds-ring", "uds-ring-within", cssAnimationDuration, "transition-[background-color,box-shadow]")
+		}),
+		htmlCheckbox: cx("cursor-[inherit]", "absolute", "opacity-0", "top-1/2", "left-1/2", "w-[calc(100%+2px)]", "h-[calc(100%+2px)]", "transform", "translate-x-[-50%]", "translate-y-[-50%]"),
+		label: cx(labelPosition === "start" ? "text-start" : "text-end")
+	};
+	return /* @__PURE__ */ jsxs(label ? "label" : "div", {
+		className: classNames.root,
+		"data-testid": "container",
+		style,
+		tabIndex: -1,
+		onPointerEnter: handleHoverStart,
+		onPointerLeave: handleHoverEnd,
+		...rootSlotProps,
+		children: [/* @__PURE__ */ jsxs(Box, {
+			className: classNames.switch,
+			...switchSlotProps,
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "checkbox",
+				tabIndex: 0,
+				...switchProps,
+				ref: (ref) => {
+					innerRef.current = ref;
+					if (typeof parentRef === "function") parentRef(ref);
+					else if (parentRef !== null) parentRef.current = ref;
+				},
+				onFocus: handleFocus,
+				onBlur: handleBlur,
+				id: uid,
+				disabled,
+				required,
+				checked: isControlled ? isOn : void 0,
+				defaultChecked: isControlled ? void 0 : defaultIsOn,
+				onChange: handleChange,
+				className: classNames.htmlCheckbox
+			}), renderHandle({
+				size,
+				isOn,
+				isOnX,
+				isOnTranslateClass,
+				showHoverEffect,
+				disabled,
+				onIcon,
+				offIcon,
+				cssAnimationDuration,
+				handleSlotProps
+			})]
+		}), label && /* @__PURE__ */ jsx(FormLabel, {
+			as: "div",
+			variant: "inherit",
+			color: "inherit",
+			required,
+			label,
+			className: classNames.label,
+			...labelSlotProps
+		})]
+	});
+});
+SwitchBase.displayName = "SwitchBase";
+//#endregion
+export { SwitchBase };

package/dist/components/client/Switch/index.cjs

@@ -0,0 +1,5 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_components_client_Switch_Switch = require("./Switch.cjs");
+exports.Switch = require_components_client_Switch_Switch.Switch;

package/dist/components/client/Switch/index.d.cts

@@ -0,0 +1,3 @@
+
+import { Switch, SwitchProps } from "./Switch.cjs";
+export { Switch, type SwitchProps };

package/dist/components/client/Switch/index.d.ts

@@ -0,0 +1,4 @@
+
+"use client";
+import { Switch, SwitchProps } from "./Switch.js";
+export { Switch, type SwitchProps };