@yahoo/uds 3.160.0 → 3.162.0

package/dist/components/index.d.ts

@@ -30,7 +30,7 @@ import { BottomSheetHeader, BottomSheetHeaderProps } from "./client/BottomSheet/
 import { BottomSheetProvider, BottomSheetProviderProps } from "./client/BottomSheet/BottomSheetProvider.js";
 import { BottomSheetTrigger, BottomSheetTriggerProps } from "./client/BottomSheet/BottomSheetTrigger.js";
 import { Button, ButtonProps } from "./client/Button/Button.js";
-import { Checkbox, CheckboxProps } from "./client/Checkbox.js";
+import { Checkbox, CheckboxProps } from "./client/Checkbox/Checkbox.js";
 import { Chip, ChipProps } from "./client/Chip/Chip.js";
 import { ChipButton, ChipButtonProps } from "./client/Chip/ChipButton.js";
 import { ChipDismissible, ChipDismissibleProps } from "./client/Chip/ChipDismissible.js";

package/dist/components/index.js

@@ -30,7 +30,7 @@ import { BottomSheetProvider } from "./client/BottomSheet/BottomSheetProvider.js
 import { BottomSheetTrigger } from "./client/BottomSheet/BottomSheetTrigger.js";
 import { SpringMotionConfig } from "./client/SpringMotionConfig.js";
 import { Button } from "./client/Button/Button.js";
-import { Checkbox } from "./client/Checkbox.js";
+import { Checkbox } from "./client/Checkbox/Checkbox.js";
 import { ChipButton } from "./client/Chip/ChipButton.js";
 import { ChipDismissible } from "./client/Chip/ChipDismissible.js";
 import { ChipLink } from "./client/Chip/ChipLink.js";

package/dist/css-animation/Checkbox/Checkbox.cjs

@@ -0,0 +1,75 @@
+/*! © 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_Icon = require("../../components/Icon.cjs");
+const require_components_Box = require("../../components/Box.cjs");
+const require_components_client_Checkbox_CheckboxBase = require("../../components/client/Checkbox/CheckboxBase.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/css-animation/Checkbox/Checkbox.tsx
+/**
+* CSS-animation Checkbox variant. This component intentionally never imports motion.
+*
+* @componentType Client component
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Checkbox } from '@yahoo/uds/css-animation';
+*
+* <Checkbox label="Name" required />
+* ```
+*/
+const Checkbox = (0, react.forwardRef)(function Checkbox(props, parentRef) {
+	const cssAnimationDuration = "duration-120";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Checkbox_CheckboxBase.CheckboxBase, {
+		...props,
+		ref: parentRef,
+		cssAnimationDuration,
+		renderRoot: ({ className, style, rootSlotProps, hasLabel, children }) => {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(hasLabel ? "label" : "div", {
+				className: require_styles_styler.cx("group", className),
+				"data-testid": "container",
+				style,
+				tabIndex: -1,
+				...rootSlotProps,
+				children
+			});
+		},
+		renderIndicator: ({ size, variant, valueState, checked, disabled, cssAnimationDuration, checkIcon, checkboxSlotProps, iconSlotProps, children }) => {
+			const classNames = {
+				checkbox: require_styles_styler.getStyles({
+					checkboxSizeCheckbox: size,
+					checkboxVariantCheckbox: variant,
+					checkboxVariantValueCheckbox: valueState,
+					className: require_styles_styler.cx("uds-ring", "uds-ring-within", !disabled && "group-hover:scale-110", !disabled && "group-active:scale-90", cssAnimationDuration, "transition-[background-color,border-color,box-shadow,transform]")
+				}),
+				check: require_styles_styler.getStyles({
+					checkboxVariantCheckboxIcon: variant,
+					checkboxVariantValueCheckboxIcon: valueState,
+					className: require_styles_styler.cx("pointer-events-none", checked ? "opacity-100" : "opacity-0", Boolean(checked) && !disabled && "group-active:opacity-55", cssAnimationDuration, "transition-opacity")
+				})
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
+				position: "relative",
+				className: classNames.checkbox,
+				alignItems: "center",
+				justifyContent: "center",
+				flex: "none",
+				...checkboxSlotProps,
+				children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
+					name: checkIcon,
+					size: "sm",
+					className: classNames.check,
+					...iconSlotProps
+				})]
+			});
+		}
+	});
+});
+Checkbox.displayName = "Checkbox";
+//#endregion
+exports.Checkbox = Checkbox;

package/dist/css-animation/Checkbox/Checkbox.d.cts

@@ -0,0 +1,22 @@
+
+import { CheckboxProps as CheckboxProps$1 } from "../../components/client/Checkbox/types.cjs";
+import React from "react";
+
+//#region src/css-animation/Checkbox/Checkbox.d.ts
+type CheckboxProps = CheckboxProps$1;
+/**
+ * CSS-animation Checkbox variant. This component intentionally never imports motion.
+ *
+ * @componentType Client component
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Checkbox } from '@yahoo/uds/css-animation';
+ *
+ * <Checkbox label="Name" required />
+ * ```
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps$1 & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Checkbox, type CheckboxProps };

package/dist/css-animation/Checkbox/Checkbox.d.ts

@@ -0,0 +1,23 @@
+
+"use client";
+import { CheckboxProps as CheckboxProps$1 } from "../../components/client/Checkbox/types.js";
+import React from "react";
+
+//#region src/css-animation/Checkbox/Checkbox.d.ts
+type CheckboxProps = CheckboxProps$1;
+/**
+ * CSS-animation Checkbox variant. This component intentionally never imports motion.
+ *
+ * @componentType Client component
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Checkbox } from '@yahoo/uds/css-animation';
+ *
+ * <Checkbox label="Name" required />
+ * ```
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps$1 & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Checkbox, type CheckboxProps };

package/dist/css-animation/Checkbox/Checkbox.js

@@ -0,0 +1,72 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { cx, getStyles } from "../../styles/styler.js";
+import { Icon } from "../../components/Icon.js";
+import { Box } from "../../components/Box.js";
+import { CheckboxBase } from "../../components/client/Checkbox/CheckboxBase.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/css-animation/Checkbox/Checkbox.tsx
+/**
+* CSS-animation Checkbox variant. This component intentionally never imports motion.
+*
+* @componentType Client component
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Checkbox } from '@yahoo/uds/css-animation';
+*
+* <Checkbox label="Name" required />
+* ```
+*/
+const Checkbox = forwardRef(function Checkbox(props, parentRef) {
+	const cssAnimationDuration = "duration-120";
+	return /* @__PURE__ */ jsx(CheckboxBase, {
+		...props,
+		ref: parentRef,
+		cssAnimationDuration,
+		renderRoot: ({ className, style, rootSlotProps, hasLabel, children }) => {
+			return /* @__PURE__ */ jsx(hasLabel ? "label" : "div", {
+				className: cx("group", className),
+				"data-testid": "container",
+				style,
+				tabIndex: -1,
+				...rootSlotProps,
+				children
+			});
+		},
+		renderIndicator: ({ size, variant, valueState, checked, disabled, cssAnimationDuration, checkIcon, checkboxSlotProps, iconSlotProps, children }) => {
+			const classNames = {
+				checkbox: getStyles({
+					checkboxSizeCheckbox: size,
+					checkboxVariantCheckbox: variant,
+					checkboxVariantValueCheckbox: valueState,
+					className: cx("uds-ring", "uds-ring-within", !disabled && "group-hover:scale-110", !disabled && "group-active:scale-90", cssAnimationDuration, "transition-[background-color,border-color,box-shadow,transform]")
+				}),
+				check: getStyles({
+					checkboxVariantCheckboxIcon: variant,
+					checkboxVariantValueCheckboxIcon: valueState,
+					className: cx("pointer-events-none", checked ? "opacity-100" : "opacity-0", Boolean(checked) && !disabled && "group-active:opacity-55", cssAnimationDuration, "transition-opacity")
+				})
+			};
+			return /* @__PURE__ */ jsxs(Box, {
+				position: "relative",
+				className: classNames.checkbox,
+				alignItems: "center",
+				justifyContent: "center",
+				flex: "none",
+				...checkboxSlotProps,
+				children: [children, /* @__PURE__ */ jsx(Icon, {
+					name: checkIcon,
+					size: "sm",
+					className: classNames.check,
+					...iconSlotProps
+				})]
+			});
+		}
+	});
+});
+Checkbox.displayName = "Checkbox";
+//#endregion
+export { Checkbox };

package/dist/css-animation/Checkbox/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_css_animation_Checkbox_Checkbox = require("./Checkbox.cjs");
+exports.Checkbox = require_css_animation_Checkbox_Checkbox.Checkbox;

package/dist/css-animation/Checkbox/index.d.cts

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

package/dist/css-animation/Checkbox/index.d.ts

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

package/dist/css-animation/Checkbox/index.js

@@ -0,0 +1,4 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { Checkbox } from "./Checkbox.js";
+export { Checkbox };

package/dist/css-animation/Radio/Radio.cjs

@@ -0,0 +1,92 @@
+/*! © 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("../../components/Box.cjs");
+const require_components_client_Radio_RadioBase = require("../../components/client/Radio/RadioBase.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/css-animation/Radio/Radio.tsx
+/**
+* CSS-animation Radio variant. This component intentionally never imports motion.
+*
+* @componentType Client component
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Radio } from '@yahoo/uds/css-animation';
+*
+* <Radio label="Name" />
+* ```
+*/
+const Radio = (0, react.forwardRef)(function Radio(props, parentRef) {
+	const cssAnimationDuration = "duration-120";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Radio_RadioBase.RadioBase, {
+		...props,
+		ref: parentRef,
+		cssAnimationDuration,
+		renderRoot: ({ className, style, rootSlotProps, hasLabel, children }) => {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(hasLabel ? "label" : "div", {
+				className: require_styles_styler.cx("group", className),
+				"data-testid": "container",
+				style,
+				tabIndex: -1,
+				...rootSlotProps,
+				children
+			});
+		},
+		renderIndicator: ({ size, variant, checked, disabled, cssAnimationDuration, radioSlotProps, radioIconSlotProps, children }) => {
+			const classNames = {
+				radio: require_styles_styler.getStyles({
+					radioSizeRadio: size,
+					radioVariantRadio: variant,
+					radioVariantValueRadio: checked ? "checked" : "unchecked",
+					className: require_styles_styler.cx([
+						"border",
+						"uds-ring",
+						"uds-ring-within",
+						!disabled && "group-hover:scale-110",
+						!disabled && !checked && "group-active:scale-90",
+						!disabled && !checked && "group-active:uds-inset-shadow-lg-invert",
+						!disabled && checked && "group-hover:uds-inset-shadow-lg-invert",
+						cssAnimationDuration,
+						"transition-[background-color,border-color,transform]",
+						"transition-shadow"
+					])
+				}),
+				radioCircle: require_styles_styler.getStyles({
+					radioVariantRadioCircle: variant,
+					radioVariantValueRadioCircle: checked ? "checked" : "unchecked",
+					className: require_styles_styler.cx([
+						"pointer-events-none",
+						"w-[8px]",
+						"h-[8px]",
+						checked ? "opacity-100" : "opacity-0",
+						cssAnimationDuration,
+						"transition-opacity"
+					])
+				})
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
+				position: "relative",
+				borderRadius: "full",
+				alignItems: "center",
+				justifyContent: "center",
+				flex: "none",
+				className: classNames.radio,
+				...radioSlotProps,
+				children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+					borderRadius: "full",
+					className: classNames.radioCircle,
+					...radioIconSlotProps
+				})]
+			});
+		}
+	});
+});
+Radio.displayName = "Radio";
+//#endregion
+exports.Radio = Radio;

package/dist/css-animation/Radio/Radio.d.cts

@@ -0,0 +1,22 @@
+
+import { RadioProps as RadioProps$1 } from "../../components/client/Radio/types.cjs";
+import React from "react";
+
+//#region src/css-animation/Radio/Radio.d.ts
+type RadioProps = RadioProps$1;
+/**
+ * CSS-animation Radio variant. This component intentionally never imports motion.
+ *
+ * @componentType Client component
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Radio } from '@yahoo/uds/css-animation';
+ *
+ * <Radio label="Name" />
+ * ```
+ */
+declare const Radio: React.ForwardRefExoticComponent<RadioProps$1 & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Radio, type RadioProps };

package/dist/css-animation/Radio/Radio.d.ts

@@ -0,0 +1,23 @@
+
+"use client";
+import { RadioProps as RadioProps$1 } from "../../components/client/Radio/types.js";
+import React from "react";
+
+//#region src/css-animation/Radio/Radio.d.ts
+type RadioProps = RadioProps$1;
+/**
+ * CSS-animation Radio variant. This component intentionally never imports motion.
+ *
+ * @componentType Client component
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Radio } from '@yahoo/uds/css-animation';
+ *
+ * <Radio label="Name" />
+ * ```
+ */
+declare const Radio: React.ForwardRefExoticComponent<RadioProps$1 & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Radio, type RadioProps };

package/dist/css-animation/Radio/Radio.js

@@ -0,0 +1,89 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { cx, getStyles } from "../../styles/styler.js";
+import { Box } from "../../components/Box.js";
+import { RadioBase } from "../../components/client/Radio/RadioBase.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/css-animation/Radio/Radio.tsx
+/**
+* CSS-animation Radio variant. This component intentionally never imports motion.
+*
+* @componentType Client component
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Radio } from '@yahoo/uds/css-animation';
+*
+* <Radio label="Name" />
+* ```
+*/
+const Radio = forwardRef(function Radio(props, parentRef) {
+	const cssAnimationDuration = "duration-120";
+	return /* @__PURE__ */ jsx(RadioBase, {
+		...props,
+		ref: parentRef,
+		cssAnimationDuration,
+		renderRoot: ({ className, style, rootSlotProps, hasLabel, children }) => {
+			return /* @__PURE__ */ jsx(hasLabel ? "label" : "div", {
+				className: cx("group", className),
+				"data-testid": "container",
+				style,
+				tabIndex: -1,
+				...rootSlotProps,
+				children
+			});
+		},
+		renderIndicator: ({ size, variant, checked, disabled, cssAnimationDuration, radioSlotProps, radioIconSlotProps, children }) => {
+			const classNames = {
+				radio: getStyles({
+					radioSizeRadio: size,
+					radioVariantRadio: variant,
+					radioVariantValueRadio: checked ? "checked" : "unchecked",
+					className: cx([
+						"border",
+						"uds-ring",
+						"uds-ring-within",
+						!disabled && "group-hover:scale-110",
+						!disabled && !checked && "group-active:scale-90",
+						!disabled && !checked && "group-active:uds-inset-shadow-lg-invert",
+						!disabled && checked && "group-hover:uds-inset-shadow-lg-invert",
+						cssAnimationDuration,
+						"transition-[background-color,border-color,transform]",
+						"transition-shadow"
+					])
+				}),
+				radioCircle: getStyles({
+					radioVariantRadioCircle: variant,
+					radioVariantValueRadioCircle: checked ? "checked" : "unchecked",
+					className: cx([
+						"pointer-events-none",
+						"w-[8px]",
+						"h-[8px]",
+						checked ? "opacity-100" : "opacity-0",
+						cssAnimationDuration,
+						"transition-opacity"
+					])
+				})
+			};
+			return /* @__PURE__ */ jsxs(Box, {
+				position: "relative",
+				borderRadius: "full",
+				alignItems: "center",
+				justifyContent: "center",
+				flex: "none",
+				className: classNames.radio,
+				...radioSlotProps,
+				children: [children, /* @__PURE__ */ jsx(Box, {
+					borderRadius: "full",
+					className: classNames.radioCircle,
+					...radioIconSlotProps
+				})]
+			});
+		}
+	});
+});
+Radio.displayName = "Radio";
+//#endregion
+export { Radio };

package/dist/css-animation/Radio/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_css_animation_Radio_Radio = require("./Radio.cjs");
+exports.Radio = require_css_animation_Radio_Radio.Radio;

package/dist/css-animation/Radio/index.d.cts

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

package/dist/css-animation/Radio/index.d.ts

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

package/dist/css-animation/Radio/index.js

@@ -0,0 +1,4 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { Radio } from "./Radio.js";
+export { Radio };

package/dist/css-animation/index.cjs

@@ -2,8 +2,12 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_css_animation_Button_Button = require("./Button/Button.cjs");
+const require_css_animation_Checkbox_Checkbox = require("./Checkbox/Checkbox.cjs");
 const require_css_animation_IconButton_IconButton = require("./IconButton/IconButton.cjs");
+const require_css_animation_Radio_Radio = require("./Radio/Radio.cjs");
 const require_css_animation_Switch_Switch = require("./Switch/Switch.cjs");
 exports.Button = require_css_animation_Button_Button.Button;
+exports.Checkbox = require_css_animation_Checkbox_Checkbox.Checkbox;
 exports.IconButton = require_css_animation_IconButton_IconButton.IconButton;
+exports.Radio = require_css_animation_Radio_Radio.Radio;
 exports.Switch = require_css_animation_Switch_Switch.Switch;

package/dist/css-animation/index.d.cts

@@ -2,6 +2,8 @@
 import { ButtonProps } from "../components/client/Button/Button.cjs";
 import { IconButtonProps } from "../components/client/IconButton/IconButton.cjs";
 import { Button } from "./Button/Button.cjs";
+import { Checkbox, CheckboxProps } from "./Checkbox/Checkbox.cjs";
 import { IconButton } from "./IconButton/IconButton.cjs";
+import { Radio, RadioProps } from "./Radio/Radio.cjs";
 import { Switch, SwitchProps } from "./Switch/Switch.cjs";
-export { Button, type ButtonProps, IconButton, type IconButtonProps, Switch, type SwitchProps };
+export { Button, type ButtonProps, Checkbox, type CheckboxProps, IconButton, type IconButtonProps, Radio, type RadioProps, Switch, type SwitchProps };

package/dist/css-animation/index.d.ts

@@ -3,6 +3,8 @@
 import { ButtonProps } from "../components/client/Button/Button.js";
 import { IconButtonProps } from "../components/client/IconButton/IconButton.js";
 import { Button } from "./Button/Button.js";
+import { Checkbox, CheckboxProps } from "./Checkbox/Checkbox.js";
 import { IconButton } from "./IconButton/IconButton.js";
+import { Radio, RadioProps } from "./Radio/Radio.js";
 import { Switch, SwitchProps } from "./Switch/Switch.js";
-export { Button, type ButtonProps, IconButton, type IconButtonProps, Switch, type SwitchProps };
+export { Button, type ButtonProps, Checkbox, type CheckboxProps, IconButton, type IconButtonProps, Radio, type RadioProps, Switch, type SwitchProps };

package/dist/css-animation/index.js

@@ -1,6 +1,8 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
 import { Button } from "./Button/Button.js";
+import { Checkbox } from "./Checkbox/Checkbox.js";
 import { IconButton } from "./IconButton/IconButton.js";
+import { Radio } from "./Radio/Radio.js";
 import { Switch } from "./Switch/Switch.js";
-export { Button, IconButton, Switch };
+export { Button, Checkbox, IconButton, Radio, Switch };

package/dist/hooks/usePrefersReducedMotion.cjs

@@ -4,21 +4,33 @@ require("../_virtual/_rolldown/runtime.cjs");
 let react = require("react");
 //#region src/hooks/usePrefersReducedMotion.ts
 const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
-const usePrefersReducedMotion = () => {
-	const [prefersReducedMotion, setPrefersReducedMotion] = (0, react.useState)(false);
-	(0, react.useEffect)(() => {
-		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
-		const mediaQueryList = window.matchMedia(REDUCED_MOTION_QUERY);
-		const updatePreference = () => {
-			setPrefersReducedMotion(mediaQueryList.matches);
-		};
-		updatePreference();
-		mediaQueryList.addEventListener("change", updatePreference);
-		return () => {
-			mediaQueryList.removeEventListener("change", updatePreference);
-		};
-	}, []);
-	return prefersReducedMotion;
+/**
+* Module-level singleton store so every consumer of the hook shares a single
+* MediaQueryList `change` listener instead of registering one per hook instance.
+*/
+const subscribers = /* @__PURE__ */ new Set();
+let mediaQueryList = null;
+const getMediaQueryList = () => {
+	if (!mediaQueryList && typeof window !== "undefined" && typeof window.matchMedia === "function") mediaQueryList = window.matchMedia(REDUCED_MOTION_QUERY);
+	return mediaQueryList;
 };
+const notifySubscribers = () => {
+	subscribers.forEach((notify) => notify());
+};
+const subscribe = (notify) => {
+	const currentMediaQueryList = getMediaQueryList();
+	if (currentMediaQueryList && subscribers.size === 0) currentMediaQueryList.addEventListener("change", notifySubscribers);
+	subscribers.add(notify);
+	return () => {
+		subscribers.delete(notify);
+		if (subscribers.size === 0 && mediaQueryList) {
+			mediaQueryList.removeEventListener("change", notifySubscribers);
+			mediaQueryList = null;
+		}
+	};
+};
+const getSnapshot = () => getMediaQueryList()?.matches ?? false;
+const getServerSnapshot = () => false;
+const usePrefersReducedMotion = () => (0, react.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
 //#endregion
 exports.usePrefersReducedMotion = usePrefersReducedMotion;

package/dist/hooks/usePrefersReducedMotion.js

@@ -1,22 +1,34 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
 //#region src/hooks/usePrefersReducedMotion.ts
 const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
-const usePrefersReducedMotion = () => {
-	const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
-	useEffect(() => {
-		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
-		const mediaQueryList = window.matchMedia(REDUCED_MOTION_QUERY);
-		const updatePreference = () => {
-			setPrefersReducedMotion(mediaQueryList.matches);
-		};
-		updatePreference();
-		mediaQueryList.addEventListener("change", updatePreference);
-		return () => {
-			mediaQueryList.removeEventListener("change", updatePreference);
-		};
-	}, []);
-	return prefersReducedMotion;
+/**
+* Module-level singleton store so every consumer of the hook shares a single
+* MediaQueryList `change` listener instead of registering one per hook instance.
+*/
+const subscribers = /* @__PURE__ */ new Set();
+let mediaQueryList = null;
+const getMediaQueryList = () => {
+	if (!mediaQueryList && typeof window !== "undefined" && typeof window.matchMedia === "function") mediaQueryList = window.matchMedia(REDUCED_MOTION_QUERY);
+	return mediaQueryList;
 };
+const notifySubscribers = () => {
+	subscribers.forEach((notify) => notify());
+};
+const subscribe = (notify) => {
+	const currentMediaQueryList = getMediaQueryList();
+	if (currentMediaQueryList && subscribers.size === 0) currentMediaQueryList.addEventListener("change", notifySubscribers);
+	subscribers.add(notify);
+	return () => {
+		subscribers.delete(notify);
+		if (subscribers.size === 0 && mediaQueryList) {
+			mediaQueryList.removeEventListener("change", notifySubscribers);
+			mediaQueryList = null;
+		}
+	};
+};
+const getSnapshot = () => getMediaQueryList()?.matches ?? false;
+const getServerSnapshot = () => false;
+const usePrefersReducedMotion = () => useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 //#endregion
 export { usePrefersReducedMotion };