@yahoo/uds 3.58.2-beta.1 → 3.59.0-beta.2

package/dist/components/client/SpringMotionConfig.js

@@ -0,0 +1,99 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { motion } from "../../tokens/configs/motion.js";
+import { getMotionVar } from "../../utils/getMotionVar.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";
+
+//#region src/components/client/SpringMotionConfig.tsx
+const LAYOUT_VARIANT = "subtle";
+const LAYOUT_SPEED = "3";
+const COLOR_VARIANT = "smooth";
+const COLOR_SPEED = "3";
+const defaultLoadFeatures = () => import("@yahoo/uds/__private/motionFeatures/domAnimation").then(({ domAnimation }) => domAnimation);
+/**
+* **🎬 Spring Motion Config to define motion animations for all UDS components**
+*
+* @componentType Client component
+*
+* @description
+* The SpringConfig component provides a way to configure the spring animations for the entire application.
+* This component provides a way to use uds motion configs with Framer Motion.
+*/
+function SpringMotionConfig({ children, reducedMotion = "user", loadFeatures = defaultLoadFeatures, layoutVariant = LAYOUT_VARIANT, layoutSpeed = LAYOUT_SPEED, colorVariant = COLOR_VARIANT, colorSpeed = COLOR_SPEED }) {
+	const initialLayoutConfig = motion[layoutVariant][layoutSpeed];
+	const initialColorConfig = motion[colorVariant][colorSpeed];
+	const [layoutConfig, setLayoutConfig] = useState(initialLayoutConfig);
+	const [colorConfig, setColorConfig] = useState(initialColorConfig);
+	const colorVarConfig = {
+		variant: colorVariant,
+		speed: colorSpeed
+	};
+	const colorStiffnessVar = getMotionVar({
+		...colorVarConfig,
+		control: "stiffness"
+	});
+	const colorDampingVar = getMotionVar({
+		...colorVarConfig,
+		control: "damping"
+	});
+	const layoutVarConfig = {
+		variant: layoutVariant,
+		speed: layoutSpeed
+	};
+	const layoutStiffnessVar = getMotionVar({
+		...layoutVarConfig,
+		control: "stiffness"
+	});
+	const layoutDampingVar = getMotionVar({
+		...layoutVarConfig,
+		control: "damping"
+	});
+	useEffect(() => {
+		const globalComputedStyles = getComputedStyle(document.documentElement);
+		const layoutValues = {
+			type: "spring",
+			damping: Number(globalComputedStyles.getPropertyValue(layoutDampingVar)),
+			stiffness: Number(globalComputedStyles.getPropertyValue(layoutStiffnessVar))
+		};
+		const colorValues = {
+			type: "spring",
+			damping: Number(globalComputedStyles.getPropertyValue(colorDampingVar)),
+			stiffness: Number(globalComputedStyles.getPropertyValue(colorStiffnessVar))
+		};
+		setLayoutConfig(layoutValues);
+		setColorConfig(colorValues);
+	}, [
+		colorDampingVar,
+		colorStiffnessVar,
+		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,
+			reducedMotion,
+			children
+		})
+	});
+}
+SpringMotionConfig.displayName = "SpringMotionConfig";
+
+//#endregion
+export { SpringMotionConfig };
+//# sourceMappingURL=SpringMotionConfig.js.map

package/dist/components/client/SpringMotionConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpringMotionConfig.js","names":[],"sources":["../../../src/components/client/SpringMotionConfig.tsx"],"sourcesContent":["import type { MotionVariant, MotionVariantSpeed } from '@yahoo/uds/tokens';\nimport type { LazyFeatureBundle, MotionConfigProps, Transition } from 'motion/react';\nimport { LazyMotion, MotionConfig } from 'motion/react';\nimport { useEffect, useMemo, useState } from 'react';\n\nimport { motion } from '../../tokens/configs/motion';\nimport { getMotionVar } from '../../utils/getMotionVar';\nimport { useAvoidMotionLibrary } from '../experimental/client/AvoidMotionLibraryProvider';\n\n// !NOTE: This is probably one of those _internal_ components\n\n/* -------------------------------------------------------------------------- */\n/*        Token defaults - these may one day come from the configurator       */\n/* -------------------------------------------------------------------------- */\nconst LAYOUT_VARIANT = 'subtle';\nconst LAYOUT_SPEED = '3';\nconst COLOR_VARIANT = 'smooth';\nconst COLOR_SPEED = '3';\n\n/* -------------------------------------------------------------------------- */\n/*                           Framer motion features                           */\n/* -------------------------------------------------------------------------- */\nconst defaultLoadFeatures = () =>\n  import('@yahoo/uds/__private/motionFeatures/domAnimation').then(\n    ({ domAnimation }) => domAnimation,\n  );\n\n/* -------------------------------------------------------------------------- */\n/*                Whooooof, finally the Spring Motion Component               */\n/* -------------------------------------------------------------------------- */\ninterface SpringMotionConfigProps extends Pick<MotionConfigProps, 'children' | 'reducedMotion'> {\n  /**\n   * The layout variant to use for the motion config.\n   * @default 'subtle'\n   */\n  layoutVariant?: MotionVariant;\n  /**\n   * The layout speed to use for the motion config.\n   * @default '3'\n   */\n  layoutSpeed?: MotionVariantSpeed;\n  /**\n   * The color variant to use for the motion config.\n   * @default 'smooth'\n   */\n  colorVariant?: MotionVariant;\n  /**\n   * The color speed to use for the motion config.\n   * @default '3'\n   */\n  colorSpeed?: MotionVariantSpeed;\n  /**\n   * A lazy feature bundle to load additional features.\n   * This is useful for reducing bundle size by loading only the necessary features.\n   */\n  loadFeatures?: LazyFeatureBundle;\n}\n\n/**\n * **🎬 Spring Motion Config to define motion animations for all UDS components**\n *\n * @componentType Client component\n *\n * @description\n * The SpringConfig component provides a way to configure the spring animations for the entire application.\n * This component provides a way to use uds motion configs with Framer Motion.\n */\nfunction SpringMotionConfig({\n  children,\n  reducedMotion = 'user',\n  loadFeatures = defaultLoadFeatures,\n  layoutVariant = LAYOUT_VARIANT,\n  layoutSpeed = LAYOUT_SPEED,\n  colorVariant = COLOR_VARIANT,\n  colorSpeed = COLOR_SPEED,\n}: SpringMotionConfigProps) {\n  const initialLayoutConfig = motion[layoutVariant][layoutSpeed];\n  const initialColorConfig = motion[colorVariant][colorSpeed];\n\n  // We need to store the values in state because they're read from the DOM\n  const [layoutConfig, setLayoutConfig] = useState(initialLayoutConfig);\n  const [colorConfig, setColorConfig] = useState(initialColorConfig);\n\n  /* -------------------------------------------------------------------------- */\n  /*              Color motion config (background, color, opacity)              */\n  /* -------------------------------------------------------------------------- */\n  const colorVarConfig = { variant: colorVariant, speed: colorSpeed };\n  const colorStiffnessVar = getMotionVar({ ...colorVarConfig, control: 'stiffness' });\n  const colorDampingVar = getMotionVar({ ...colorVarConfig, control: 'damping' });\n\n  /* -------------------------------------------------------------------------- */\n  /*                Layout motion config (scale, position, shape)               */\n  /* -------------------------------------------------------------------------- */\n  const layoutVarConfig = { variant: layoutVariant, speed: layoutSpeed };\n  const layoutStiffnessVar = getMotionVar({ ...layoutVarConfig, control: 'stiffness' });\n  const layoutDampingVar = getMotionVar({ ...layoutVarConfig, control: 'damping' });\n\n  useEffect(() => {\n    // getComputedStyle is only available in the browser, so we'll keep it inside the useEffect hook\n    const globalComputedStyles = getComputedStyle(document.documentElement);\n\n    // Get from the root (DOM)\n    const layoutValues = {\n      type: 'spring',\n      damping: Number(globalComputedStyles.getPropertyValue(layoutDampingVar)),\n      stiffness: Number(globalComputedStyles.getPropertyValue(layoutStiffnessVar)),\n    };\n    const colorValues = {\n      type: 'spring',\n      damping: Number(globalComputedStyles.getPropertyValue(colorDampingVar)),\n      stiffness: Number(globalComputedStyles.getPropertyValue(colorStiffnessVar)),\n    };\n\n    // Set motion states\n    setLayoutConfig(layoutValues);\n    setColorConfig(colorValues);\n  }, [colorDampingVar, colorStiffnessVar, layoutDampingVar, layoutStiffnessVar]);\n\n  const transition = useMemo(\n    () =>\n      ({\n        type: 'spring',\n        mass: 1, // Each motion component should define their own mass\n        ...layoutConfig, // Use layout as default transition\n        layout: layoutConfig,\n        // Setup Color animations\n        opacity: colorConfig,\n        color: colorConfig,\n        borderColor: colorConfig,\n        backgroundColor: colorConfig,\n      }) satisfies Transition,\n    [colorConfig, layoutConfig],\n  );\n\n  const avoidMotionLibrary = useAvoidMotionLibrary();\n  if (avoidMotionLibrary) {\n    return children;\n  }\n\n  return (\n    <LazyMotion features={loadFeatures} strict>\n      <MotionConfig transition={transition} reducedMotion={reducedMotion}>\n        {children}\n      </MotionConfig>\n    </LazyMotion>\n  );\n}\n\nSpringMotionConfig.displayName = 'SpringMotionConfig';\n\nexport { SpringMotionConfig, type SpringMotionConfigProps };\n"],"mappings":";;;;;;;;;AAcA,MAAM,iBAAiB;AACvB,MAAM,eAAe;AACrB,MAAM,gBAAgB;AACtB,MAAM,cAAc;AAKpB,MAAM,4BACJ,OAAO,oDAAoD,MACxD,EAAE,mBAAmB,aACvB;;;;;;;;;;AA0CH,SAAS,mBAAmB,EAC1B,UACA,gBAAgB,QAChB,eAAe,qBACf,gBAAgB,gBAChB,cAAc,cACd,eAAe,eACf,aAAa,eACa;CAC1B,MAAM,sBAAsB,OAAO,eAAe;CAClD,MAAM,qBAAqB,OAAO,cAAc;CAGhD,MAAM,CAAC,cAAc,mBAAmB,SAAS,oBAAoB;CACrE,MAAM,CAAC,aAAa,kBAAkB,SAAS,mBAAmB;CAKlE,MAAM,iBAAiB;EAAE,SAAS;EAAc,OAAO;EAAY;CACnE,MAAM,oBAAoB,aAAa;EAAE,GAAG;EAAgB,SAAS;EAAa,CAAC;CACnF,MAAM,kBAAkB,aAAa;EAAE,GAAG;EAAgB,SAAS;EAAW,CAAC;CAK/E,MAAM,kBAAkB;EAAE,SAAS;EAAe,OAAO;EAAa;CACtE,MAAM,qBAAqB,aAAa;EAAE,GAAG;EAAiB,SAAS;EAAa,CAAC;CACrF,MAAM,mBAAmB,aAAa;EAAE,GAAG;EAAiB,SAAS;EAAW,CAAC;AAEjF,iBAAgB;EAEd,MAAM,uBAAuB,iBAAiB,SAAS,gBAAgB;EAGvE,MAAM,eAAe;GACnB,MAAM;GACN,SAAS,OAAO,qBAAqB,iBAAiB,iBAAiB,CAAC;GACxE,WAAW,OAAO,qBAAqB,iBAAiB,mBAAmB,CAAC;GAC7E;EACD,MAAM,cAAc;GAClB,MAAM;GACN,SAAS,OAAO,qBAAqB,iBAAiB,gBAAgB,CAAC;GACvE,WAAW,OAAO,qBAAqB,iBAAiB,kBAAkB,CAAC;GAC5E;AAGD,kBAAgB,aAAa;AAC7B,iBAAe,YAAY;IAC1B;EAAC;EAAiB;EAAmB;EAAkB;EAAmB,CAAC;CAE9E,MAAM,aAAa,eAEd;EACC,MAAM;EACN,MAAM;EACN,GAAG;EACH,QAAQ;EAER,SAAS;EACT,OAAO;EACP,aAAa;EACb,iBAAiB;EAClB,GACH,CAAC,aAAa,aAAa,CAC5B;AAGD,KAD2B,uBAAuB,CAEhD,QAAO;AAGT,QACE,oBAAC;EAAW,UAAU;EAAc;YAClC,oBAAC;GAAyB;GAA2B;GAClD;IACY;GACJ;;AAIjB,mBAAmB,cAAc"}

package/dist/components/client/Switch.cjs

@@ -0,0 +1,218 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_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_IconSlot = require('../IconSlot.cjs');
+const require_components_client_SpringMotionConfig = require('./SpringMotionConfig.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let motion_react = require("motion/react");
+
+//#region src/components/client/Switch.tsx
+const SIZE_MAP = {
+	md: { isOnX: 20 },
+	sm: { isOnX: 12 }
+};
+const MotionBox = motion_react.m.create(require_components_Box.Box);
+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$1({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, reduceMotion: forceReduceMotion, disabled, required, onFocus, onBlur, className, layerClassNames,...switchProps }, parentRef) {
+	const generatedId = (0, react.useId)();
+	const uid = id ?? `uds-input-${generatedId}`;
+	const innerRef = (0, react.useRef)(null);
+	/**
+	* State
+	*/
+	const isControlled = isOnProp !== void 0;
+	const [isOn, setIsOn] = (0, react.useState)(isControlled ? isOnProp : defaultIsOn);
+	const [isHovered, setIsHovered] = (0, react.useState)(false);
+	/**
+	* Derived values
+	*/
+	const showHoverEffect = (0, react.useMemo)(() => {
+		return !disabled && isHovered;
+	}, [disabled, isHovered]);
+	const { isOnX } = SIZE_MAP[size];
+	const motionInitialAndAnimate = (0, react.useMemo)(() => ({
+		initial: {
+			scale: 1,
+			x: isOn ? isOnX : 0
+		},
+		animate: {
+			scale: showHoverEffect ? 1.05 : 1,
+			x: isOn ? isOnX : 0
+		}
+	}), [
+		showHoverEffect,
+		isOn,
+		isOnX
+	]);
+	/**
+	* Handlers
+	*/
+	const handleChange = (0, react.useCallback)((e) => {
+		onChange?.(e);
+		if (!isControlled) setIsOn(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)(() => {
+		setIsHovered(true);
+	}, []);
+	const handleHoverEnd = (0, react.useCallback)(() => {
+		setIsHovered(false);
+	}, []);
+	const prefersReducedMotion = (0, motion_react.useReducedMotion)();
+	const reduceMotion = forceReduceMotion ? "always" : "user";
+	const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
+	/**
+	* Effects
+	*/
+	(0, react.useEffect)(() => {
+		if (isControlled) setIsOn(isOnProp);
+	}, [isOnProp, isControlled]);
+	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
+			}, layerClassNames?.root, 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]", layerClassNames?.switch)
+		}),
+		handle: require_styles_styler.getStyles({
+			switchSizeHandle: size,
+			className: require_styles_styler.cx("relative", "pointer-events-none", "rounded-full", "overflow-hidden", layerClassNames?.handle)
+		}),
+		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 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")
+		}),
+		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", layerClassNames?.label)
+	};
+	const RootElement = label ? motion_react.m.label : motion_react.m.div;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
+		reducedMotion: reduceMotion,
+		...toggleTransition,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RootElement, {
+			className: classNames.root,
+			"data-testid": "container",
+			onHoverStart: handleHoverStart,
+			onHoverEnd: handleHoverEnd,
+			tabIndex: -1,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionBox, {
+				className: classNames.switch,
+				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,
+					style: {}
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionBox, {
+					className: classNames.handle,
+					...motionInitialAndAnimate,
+					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")
+						})
+					]
+				})]
+			}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_FormLabel.FormLabel, {
+				as: "div",
+				variant: "inherit",
+				color: "inherit",
+				required,
+				label,
+				className: classNames.label
+			})]
+		})
+	});
+});
+Switch.displayName = "Switch";
+
+//#endregion
+exports.Switch = Switch;

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

@@ -0,0 +1,42 @@
+import { UniversalSwitchProps } from "../../tokens/types.cjs";
+import "../../tokens/index.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'>;
+interface SwitchProps extends NativeInputProps, UniversalSwitchProps {
+  layerClassNames?: {
+    root?: string;
+    switch?: string;
+    handle?: string;
+    label?: string;
+  };
+}
+/**
+ * **⚙️️ 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).
+ **/
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Switch, type SwitchProps };
+//# sourceMappingURL=Switch.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.cts","names":[],"sources":["../../../src/components/client/Switch.tsx"],"sourcesContent":[],"mappings":";;;;;KAWK,gBAAA,CAAA,CAAA,CAAmB,KACtB,KAAA,CAAM,oBAAoB;UAMlB,WAAA,CAAA,OAAA,CAAoB,kBAAkB;;IAP3C,IAAA,CAAA,CAAA,CAAA,MAAA;IACuB,MAAA,CAAA,CAAA,CAAA,MAAA;IAApB,MAAA,CAAA,CAAA,CAAA,MAAA;IADgB,KAAA,CAAA,CAAA,CAAA,MAAA;EAAI,CAAA;AAAA;AAOwC,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;cAoD9D,QAAM,KAAA,CAAA,0BAAA,cAAA,KAAA,CAAA,cAAA"}

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

@@ -0,0 +1,42 @@
+import { UniversalSwitchProps } from "../../tokens/types.js";
+import "../../tokens/index.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'>;
+interface SwitchProps extends NativeInputProps, UniversalSwitchProps {
+  layerClassNames?: {
+    root?: string;
+    switch?: string;
+    handle?: string;
+    label?: string;
+  };
+}
+/**
+ * **⚙️️ 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).
+ **/
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Switch, type SwitchProps };
+//# sourceMappingURL=Switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","names":[],"sources":["../../../src/components/client/Switch.tsx"],"sourcesContent":[],"mappings":";;;;;KAWK,gBAAA,CAAA,CAAA,CAAmB,KACtB,KAAA,CAAM,oBAAoB;UAMlB,WAAA,CAAA,OAAA,CAAoB,kBAAkB;;IAP3C,IAAA,CAAA,CAAA,CAAA,MAAA;IACuB,MAAA,CAAA,CAAA,CAAA,MAAA;IAApB,MAAA,CAAA,CAAA,CAAA,MAAA;IADgB,KAAA,CAAA,CAAA,CAAA,MAAA;EAAI,CAAA;AAAA;AAOwC,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;cAoD9D,QAAM,KAAA,CAAA,0BAAA,cAAA,KAAA,CAAA,cAAA"}

package/dist/components/client/Switch.js

@@ -0,0 +1,217 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { cx, getStyles } from "../../styles/styler.js";
+import { Box } from "../Box.js";
+import { FormLabel } from "../FormLabel.js";
+import { IconSlot } from "../IconSlot.js";
+import { SpringMotionConfig } from "./SpringMotionConfig.js";
+import React, { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { m, useReducedMotion } from "motion/react";
+
+//#region src/components/client/Switch.tsx
+const SIZE_MAP = {
+	md: { isOnX: 20 },
+	sm: { isOnX: 12 }
+};
+const MotionBox = m.create(Box);
+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$1({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, reduceMotion: forceReduceMotion, disabled, required, onFocus, onBlur, className, layerClassNames,...switchProps }, parentRef) {
+	const generatedId = useId();
+	const uid = id ?? `uds-input-${generatedId}`;
+	const innerRef = useRef(null);
+	/**
+	* State
+	*/
+	const isControlled = isOnProp !== void 0;
+	const [isOn, setIsOn] = useState(isControlled ? isOnProp : defaultIsOn);
+	const [isHovered, setIsHovered] = useState(false);
+	/**
+	* Derived values
+	*/
+	const showHoverEffect = useMemo(() => {
+		return !disabled && isHovered;
+	}, [disabled, isHovered]);
+	const { isOnX } = SIZE_MAP[size];
+	const motionInitialAndAnimate = useMemo(() => ({
+		initial: {
+			scale: 1,
+			x: isOn ? isOnX : 0
+		},
+		animate: {
+			scale: showHoverEffect ? 1.05 : 1,
+			x: isOn ? isOnX : 0
+		}
+	}), [
+		showHoverEffect,
+		isOn,
+		isOnX
+	]);
+	/**
+	* Handlers
+	*/
+	const handleChange = useCallback((e) => {
+		onChange?.(e);
+		if (!isControlled) setIsOn(e.target.checked);
+	}, [isControlled, onChange]);
+	const handleFocus = useCallback((e) => {
+		onFocus?.(e);
+	}, [onFocus]);
+	const handleBlur = useCallback((e) => {
+		onBlur?.(e);
+	}, [onBlur]);
+	const handleHoverStart = useCallback(() => {
+		setIsHovered(true);
+	}, []);
+	const handleHoverEnd = useCallback(() => {
+		setIsHovered(false);
+	}, []);
+	const prefersReducedMotion = useReducedMotion();
+	const reduceMotion = forceReduceMotion ? "always" : "user";
+	const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
+	/**
+	* Effects
+	*/
+	useEffect(() => {
+		if (isControlled) setIsOn(isOnProp);
+	}, [isOnProp, isControlled]);
+	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
+			}, layerClassNames?.root, 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]", layerClassNames?.switch)
+		}),
+		handle: getStyles({
+			switchSizeHandle: size,
+			className: cx("relative", "pointer-events-none", "rounded-full", "overflow-hidden", layerClassNames?.handle)
+		}),
+		handleCircle: getStyles({
+			switchVariantActiveHandle: isOn ? "on" : "off",
+			switchVariantHandle: "default",
+			className: cx("absolute", "top-0", "left-0", "right-0", "bottom-0", "opacity-95 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")
+		}),
+		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", layerClassNames?.label)
+	};
+	const RootElement = label ? m.label : m.div;
+	return /* @__PURE__ */ jsx(SpringMotionConfig, {
+		reducedMotion: reduceMotion,
+		...toggleTransition,
+		children: /* @__PURE__ */ jsxs(RootElement, {
+			className: classNames.root,
+			"data-testid": "container",
+			onHoverStart: handleHoverStart,
+			onHoverEnd: handleHoverEnd,
+			tabIndex: -1,
+			children: [/* @__PURE__ */ jsxs(MotionBox, {
+				className: classNames.switch,
+				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,
+					style: {}
+				}), /* @__PURE__ */ jsxs(MotionBox, {
+					className: classNames.handle,
+					...motionInitialAndAnimate,
+					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")
+						})
+					]
+				})]
+			}), label && /* @__PURE__ */ jsx(FormLabel, {
+				as: "div",
+				variant: "inherit",
+				color: "inherit",
+				required,
+				label,
+				className: classNames.label
+			})]
+		})
+	});
+});
+Switch.displayName = "Switch";
+
+//#endregion
+export { Switch };
+//# sourceMappingURL=Switch.js.map