@yahoo/uds 3.159.2 → 3.161.0

package/dist/components/client/IconButton/IconButton.js

@@ -0,0 +1,103 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST } from "../../../css-tokens/dist/index.js";
+import { createSlot } from "../../../utils/createSlot.js";
+import { Icon } from "../../Icon.js";
+import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
+import { SpringMotionConfig } from "../SpringMotionConfig.js";
+import "../Button/buttonConstants.js";
+import { iconMotionVariants, loadingMotionVariants } from "../Button/Button.js";
+import { IconButtonBase, renderIconButtonAsChild } from "./IconButtonBase.js";
+import { Progress } from "@yahoo/uds-icons";
+import { forwardRef, isValidElement, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, m } from "motion/react";
+//#region src/components/client/IconButton/IconButton.tsx
+/**
+* **⚙️️ An icon button element that can be used to trigger an action**
+*
+* @componentType Client component
+*/
+const IconButton = forwardRef(function IconButton(props, forwardedRef) {
+	const prefersReducedMotion = usePrefersReducedMotion();
+	const disableMotion = !!props.disableEffects || !!props.disabled;
+	const layoutVariant = useMemo(() => prefersReducedMotion ? "smooth" : "subtle", [prefersReducedMotion]);
+	const Slot = useMemo(() => createSlot(), []);
+	const MotionSlot = useMemo(() => m.create(Slot), [Slot]);
+	const buttonVariants = useMemo(() => ({
+		rest: { scale: disableMotion ? 1 : `var(${BUTTON_SCALE_EFFECT_REST})` },
+		hover: { scale: disableMotion ? 1 : `var(${BUTTON_SCALE_EFFECT_HOVER})` },
+		pressed: { scale: disableMotion ? 1 : `var(${BUTTON_SCALE_EFFECT_PRESSED})` }
+	}), [disableMotion]);
+	return /* @__PURE__ */ jsx(IconButtonBase, {
+		...props,
+		ref: forwardedRef,
+		renderIconContent: ({ asChild, loading, name, iconVariant, children, iconClassName, loadingIconClassName, iconSlotClassName, iconSlotProps }) => /* @__PURE__ */ jsxs(AnimatePresence, {
+			initial: false,
+			mode: "popLayout",
+			children: [loading && /* @__PURE__ */ jsx(m.span, {
+				variants: loadingMotionVariants,
+				initial: "loading",
+				animate: "loading",
+				exit: "hide",
+				children: /* @__PURE__ */ jsx(Icon, {
+					size: "sm",
+					name: Progress,
+					variant: iconVariant,
+					color: "current",
+					className: loadingIconClassName
+				})
+			}, "loading"), name && !loading && /* @__PURE__ */ jsx(m.span, {
+				variants: iconMotionVariants,
+				initial: "icon",
+				animate: "icon",
+				exit: "hide",
+				children: !asChild && children || /* @__PURE__ */ jsx(Icon, {
+					size: "sm",
+					name,
+					variant: iconVariant,
+					color: "current",
+					className: [iconClassName, iconSlotClassName].filter(Boolean).join(" "),
+					...iconSlotProps
+				})
+			}, name.name)]
+		}),
+		renderRoot: ({ asChild, children, buttonRef, type, htmlName, rootClassName, rest, iconContent }) => {
+			if (asChild && isValidElement(children)) return /* @__PURE__ */ jsx(SpringMotionConfig, {
+				layoutSpeed: "3",
+				layoutVariant,
+				reducedMotion: props.disableEffects ? "always" : "user",
+				children: /* @__PURE__ */ jsx(MotionSlot, {
+					type,
+					className: rootClassName,
+					initial: "icon",
+					variants: buttonVariants,
+					whileHover: "hover",
+					whileTap: "pressed",
+					...rest,
+					children: renderIconButtonAsChild(children, iconContent)
+				})
+			});
+			return /* @__PURE__ */ jsx(SpringMotionConfig, {
+				layoutSpeed: "3",
+				layoutVariant,
+				reducedMotion: props.disableEffects ? "always" : "user",
+				children: /* @__PURE__ */ jsx(m.button, {
+					ref: buttonRef,
+					type,
+					className: rootClassName,
+					name: htmlName,
+					initial: "icon",
+					variants: buttonVariants,
+					whileHover: "hover",
+					whileTap: "pressed",
+					...rest,
+					children: iconContent
+				})
+			});
+		}
+	});
+});
+IconButton.displayName = "IconButton";
+//#endregion
+export { IconButton };

package/dist/components/client/IconButton/IconButtonBase.cjs

@@ -0,0 +1,68 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_styles_styler = require("../../../styles/styler.cjs");
+const require_utils_createSlot = require("../../../utils/createSlot.cjs");
+const require_generateDefaultClassName = require("../../../automated-config/dist/utils/generateDefaultClassName.cjs");
+let react = require("react");
+//#region src/components/client/IconButton/IconButtonBase.tsx
+const defaultSizeRootClass = require_generateDefaultClassName.generateDefaultClassName("iconbutton", "size", "root");
+const defaultSizeIconClass = require_generateDefaultClassName.generateDefaultClassName("iconbutton", "size", "icon");
+const defaultVariantRootClass = require_generateDefaultClassName.generateDefaultClassName("button", "variant", "root");
+const defaultVariantIconClass = require_generateDefaultClassName.generateDefaultClassName("button", "variant", "icon");
+const IconButtonBase = (0, react.forwardRef)(function IconButtonBase({ variant, size, iconVariant, loading, disableEffects, name, asChild = false, slotProps, type = "button", htmlName, className, children, renderIconContent, renderRoot, ...rest }, forwardedRef) {
+	const { className: iconSlotClassName, ...iconSlotProps } = slotProps?.icon ?? {};
+	const Slot = (0, react.useMemo)(() => require_utils_createSlot.createSlot(), []);
+	const rootSizeClass = (0, react.useMemo)(() => size ? require_styles_styler.getStyles({ iconbuttonSizeRoot: size }) : defaultSizeRootClass, [size]);
+	const rootVariantClass = (0, react.useMemo)(() => variant ? require_styles_styler.getStyles({ buttonVariantRoot: variant }) : defaultVariantRootClass, [variant]);
+	const iconSizeClass = (0, react.useMemo)(() => size ? require_styles_styler.getStyles({ iconbuttonSizeIcon: size }) : defaultSizeIconClass, [size]);
+	const iconVariantClass = (0, react.useMemo)(() => variant ? require_styles_styler.getStyles({ buttonVariantIcon: variant }) : defaultVariantIconClass, [variant]);
+	const styles = (0, react.useMemo)(() => ({
+		root: require_styles_styler.cx("uds-ring", "uds-hit-target", "inline-flex overflow-hidden justify-center items-center", "[transform-origin:center]", "[backface-visibility:hidden]", "[transition-property:color,background-color,border-color,box-shadow,text-decoration-color,fill,stroke]", "[transition-timing-function:cubic-bezier(0,0,0.2,1)]", "[transition-duration:220ms]", rootSizeClass, rootVariantClass, rest?.disabled && "cursor-not-allowed", loading && "uds-button-loading", disableEffects && "uds-button-without-effects", className),
+		icon: require_styles_styler.getStyles({ className: require_styles_styler.cx(iconSizeClass, iconVariantClass) }),
+		loadingIcon: require_styles_styler.getStyles({ className: require_styles_styler.cx([
+			"animate-spin",
+			iconSizeClass,
+			iconVariantClass
+		]) })
+	}), [
+		className,
+		disableEffects,
+		iconSizeClass,
+		iconVariantClass,
+		loading,
+		rest?.disabled,
+		rootSizeClass,
+		rootVariantClass
+	]);
+	return renderRoot({
+		asChild,
+		Slot,
+		children,
+		buttonRef: forwardedRef,
+		type,
+		htmlName,
+		rootClassName: styles.root,
+		rest,
+		iconContent: renderIconContent({
+			asChild,
+			loading,
+			name,
+			iconVariant,
+			children,
+			iconClassName: styles.icon,
+			loadingIconClassName: styles.loadingIcon,
+			iconSlotClassName,
+			iconSlotProps
+		})
+	});
+});
+IconButtonBase.displayName = "IconButtonBase";
+function renderIconButtonAsChild(children, content) {
+	const childProps = children.props;
+	return (0, react.cloneElement)(children, childProps, content);
+}
+//#endregion
+exports.IconButtonBase = IconButtonBase;
+exports.renderIconButtonAsChild = renderIconButtonAsChild;

package/dist/components/client/IconButton/IconButtonBase.d.cts

@@ -0,0 +1,45 @@
+
+import { IconPropsWithSVGProps, UniversalIconButtonProps } from "../../../tokens/types.cjs";
+import * as _$react from "react";
+import { ForwardRefExoticComponent } from "react";
+
+//#region src/components/client/IconButton/IconButtonBase.d.ts
+type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface IconButtonProps extends HtmlButtonProps, UniversalIconButtonProps {
+  slotProps?: {
+    icon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
+}
+type IconButtonRenderArgs = {
+  asChild: boolean;
+  loading?: boolean;
+  name?: IconButtonProps['name'];
+  iconVariant: IconButtonProps['iconVariant'];
+  children: React.ReactNode;
+  iconClassName: string;
+  loadingIconClassName: string;
+  iconSlotClassName?: string;
+  iconSlotProps: Partial<IconPropsWithSVGProps & DataAttributes>;
+};
+type IconButtonRootRenderArgs = {
+  asChild: boolean;
+  Slot: ForwardRefExoticComponent<HtmlButtonProps>;
+  children: React.ReactNode;
+  buttonRef: React.ForwardedRef<HTMLButtonElement>;
+  type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  htmlName?: string;
+  rootClassName: string;
+  rest: Record<string, unknown>;
+  iconContent: React.ReactNode;
+};
+interface IconButtonBaseProps extends IconButtonProps {
+  renderIconContent: (args: IconButtonRenderArgs) => React.ReactNode;
+  renderRoot: (args: IconButtonRootRenderArgs) => React.ReactNode;
+}
+declare const IconButtonBase: ForwardRefExoticComponent<IconButtonBaseProps & _$react.RefAttributes<HTMLButtonElement>>;
+declare function renderIconButtonAsChild(children: React.ReactNode, content: React.ReactNode): _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>>;
+//#endregion
+export { IconButtonBase, type IconButtonProps, type IconButtonRootRenderArgs, renderIconButtonAsChild };

package/dist/components/client/IconButton/IconButtonBase.d.ts

@@ -0,0 +1,46 @@
+
+"use client";
+import { IconPropsWithSVGProps, UniversalIconButtonProps } from "../../../tokens/types.js";
+import * as _$react from "react";
+import { ForwardRefExoticComponent } from "react";
+
+//#region src/components/client/IconButton/IconButtonBase.d.ts
+type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface IconButtonProps extends HtmlButtonProps, UniversalIconButtonProps {
+  slotProps?: {
+    icon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
+}
+type IconButtonRenderArgs = {
+  asChild: boolean;
+  loading?: boolean;
+  name?: IconButtonProps['name'];
+  iconVariant: IconButtonProps['iconVariant'];
+  children: React.ReactNode;
+  iconClassName: string;
+  loadingIconClassName: string;
+  iconSlotClassName?: string;
+  iconSlotProps: Partial<IconPropsWithSVGProps & DataAttributes>;
+};
+type IconButtonRootRenderArgs = {
+  asChild: boolean;
+  Slot: ForwardRefExoticComponent<HtmlButtonProps>;
+  children: React.ReactNode;
+  buttonRef: React.ForwardedRef<HTMLButtonElement>;
+  type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  htmlName?: string;
+  rootClassName: string;
+  rest: Record<string, unknown>;
+  iconContent: React.ReactNode;
+};
+interface IconButtonBaseProps extends IconButtonProps {
+  renderIconContent: (args: IconButtonRenderArgs) => React.ReactNode;
+  renderRoot: (args: IconButtonRootRenderArgs) => React.ReactNode;
+}
+declare const IconButtonBase: ForwardRefExoticComponent<IconButtonBaseProps & _$react.RefAttributes<HTMLButtonElement>>;
+declare function renderIconButtonAsChild(children: React.ReactNode, content: React.ReactNode): _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>>;
+//#endregion
+export { IconButtonBase, type IconButtonProps, type IconButtonRootRenderArgs, renderIconButtonAsChild };

package/dist/components/client/IconButton/IconButtonBase.js

@@ -0,0 +1,65 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { cx, getStyles } from "../../../styles/styler.js";
+import { createSlot } from "../../../utils/createSlot.js";
+import { generateDefaultClassName } from "../../../automated-config/dist/utils/generateDefaultClassName.js";
+import { cloneElement, forwardRef, useMemo } from "react";
+//#region src/components/client/IconButton/IconButtonBase.tsx
+const defaultSizeRootClass = generateDefaultClassName("iconbutton", "size", "root");
+const defaultSizeIconClass = generateDefaultClassName("iconbutton", "size", "icon");
+const defaultVariantRootClass = generateDefaultClassName("button", "variant", "root");
+const defaultVariantIconClass = generateDefaultClassName("button", "variant", "icon");
+const IconButtonBase = forwardRef(function IconButtonBase({ variant, size, iconVariant, loading, disableEffects, name, asChild = false, slotProps, type = "button", htmlName, className, children, renderIconContent, renderRoot, ...rest }, forwardedRef) {
+	const { className: iconSlotClassName, ...iconSlotProps } = slotProps?.icon ?? {};
+	const Slot = useMemo(() => createSlot(), []);
+	const rootSizeClass = useMemo(() => size ? getStyles({ iconbuttonSizeRoot: size }) : defaultSizeRootClass, [size]);
+	const rootVariantClass = useMemo(() => variant ? getStyles({ buttonVariantRoot: variant }) : defaultVariantRootClass, [variant]);
+	const iconSizeClass = useMemo(() => size ? getStyles({ iconbuttonSizeIcon: size }) : defaultSizeIconClass, [size]);
+	const iconVariantClass = useMemo(() => variant ? getStyles({ buttonVariantIcon: variant }) : defaultVariantIconClass, [variant]);
+	const styles = useMemo(() => ({
+		root: cx("uds-ring", "uds-hit-target", "inline-flex overflow-hidden justify-center items-center", "[transform-origin:center]", "[backface-visibility:hidden]", "[transition-property:color,background-color,border-color,box-shadow,text-decoration-color,fill,stroke]", "[transition-timing-function:cubic-bezier(0,0,0.2,1)]", "[transition-duration:220ms]", rootSizeClass, rootVariantClass, rest?.disabled && "cursor-not-allowed", loading && "uds-button-loading", disableEffects && "uds-button-without-effects", className),
+		icon: getStyles({ className: cx(iconSizeClass, iconVariantClass) }),
+		loadingIcon: getStyles({ className: cx([
+			"animate-spin",
+			iconSizeClass,
+			iconVariantClass
+		]) })
+	}), [
+		className,
+		disableEffects,
+		iconSizeClass,
+		iconVariantClass,
+		loading,
+		rest?.disabled,
+		rootSizeClass,
+		rootVariantClass
+	]);
+	return renderRoot({
+		asChild,
+		Slot,
+		children,
+		buttonRef: forwardedRef,
+		type,
+		htmlName,
+		rootClassName: styles.root,
+		rest,
+		iconContent: renderIconContent({
+			asChild,
+			loading,
+			name,
+			iconVariant,
+			children,
+			iconClassName: styles.icon,
+			loadingIconClassName: styles.loadingIcon,
+			iconSlotClassName,
+			iconSlotProps
+		})
+	});
+});
+IconButtonBase.displayName = "IconButtonBase";
+function renderIconButtonAsChild(children, content) {
+	const childProps = children.props;
+	return cloneElement(children, childProps, content);
+}
+//#endregion
+export { IconButtonBase, renderIconButtonAsChild };

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

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

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

@@ -0,0 +1,4 @@
+
+import { IconButtonBase, IconButtonRootRenderArgs, renderIconButtonAsChild } from "./IconButtonBase.cjs";
+import { IconButton, IconButtonProps } from "./IconButton.cjs";
+export { IconButton, IconButtonBase, type IconButtonProps, type IconButtonRootRenderArgs, renderIconButtonAsChild };

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

@@ -0,0 +1,5 @@
+
+"use client";
+import { IconButtonBase, IconButtonRootRenderArgs, renderIconButtonAsChild } from "./IconButtonBase.js";
+import { IconButton, IconButtonProps } from "./IconButton.js";
+export { IconButton, IconButtonBase, type IconButtonProps, type IconButtonRootRenderArgs, renderIconButtonAsChild };

package/dist/components/client/IconButton/index.js

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

package/dist/components/client/Input/Input.cjs

@@ -7,13 +7,13 @@ const require_components_IconSlot = require("../../IconSlot.cjs");
 const require_components_Box = require("../../Box.cjs");
 const require_components_HStack = require("../../HStack.cjs");
 const require_components_VStack = require("../../VStack.cjs");
+const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
 const require_components_client_AnimateHeightChange = require("../AnimateHeightChange.cjs");
 const require_components_client_Input_InputHelpTextInternal = require("./InputHelpTextInternal.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lodash_isFunction_js = require("lodash/isFunction.js");
 lodash_isFunction_js = require_runtime.__toESM(lodash_isFunction_js);
-let motion_react = require("motion/react");
 //#region src/components/client/Input/Input.tsx
 function setNativeInputValue(input, next) {
 	(Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set)?.call(input, next);
@@ -132,7 +132,7 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
 		onFocus,
 		slotProps
 	]);
-	const layoutVariant = (0, motion_react.useReducedMotion)() ? "smooth" : "bouncy";
+	const layoutVariant = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion() ? "smooth" : "bouncy";
 	const reduceMotion = forceReduceMotion ? "always" : "user";
 	const isInteractive = !readOnly && !disabled;
 	const classNames = {

package/dist/components/client/Input/Input.js

@@ -5,12 +5,12 @@ import { IconSlot } from "../../IconSlot.js";
 import { Box } from "../../Box.js";
 import { HStack } from "../../HStack.js";
 import { VStack } from "../../VStack.js";
+import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
 import { AnimateHeightChange } from "../AnimateHeightChange.js";
 import { InputHelpTextInternal as InputHelpTextInternalMemo } from "./InputHelpTextInternal.js";
 import { forwardRef, memo, useCallback, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { isFunction } from "lodash-es";
-import { useReducedMotion } from "motion/react";
 //#region src/components/client/Input/Input.tsx
 function setNativeInputValue(input, next) {
 	(Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set)?.call(input, next);
@@ -129,7 +129,7 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
 		onFocus,
 		slotProps
 	]);
-	const layoutVariant = useReducedMotion() ? "smooth" : "bouncy";
+	const layoutVariant = usePrefersReducedMotion() ? "smooth" : "bouncy";
 	const reduceMotion = forceReduceMotion ? "always" : "user";
 	const isInteractive = !readOnly && !disabled;
 	const classNames = {

package/dist/components/client/Modal/ManagedModal.cjs

@@ -2,6 +2,7 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../../../_virtual/_rolldown/runtime.cjs");
+const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
 const require_components_client_Modal_modalStore = require("./modalStore.cjs");
 const require_components_client_Modal_UDSModalConfigProvider = require("./UDSModalConfigProvider.cjs");
 const require_components_client_Modal_ModalActions = require("./ModalActions.cjs");
@@ -11,12 +12,11 @@ const require_components_client_Modal_ModalTitle = require("./ModalTitle.cjs");
 const require_components_client_Modal_Modal = require("./Modal.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-let motion_react = require("motion/react");
 //#region src/components/client/Modal/ManagedModal.tsx
 const ManagedModal = ({ slot }) => {
 	const { animationDuration } = require_components_client_Modal_UDSModalConfigProvider.useModalConfig();
 	const durationOut = typeof animationDuration === "number" ? animationDuration : animationDuration.out;
-	const exitDuration = (0, motion_react.useReducedMotion)() || slot.props.reduceMotion ? 0 : durationOut;
+	const exitDuration = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion() || slot.props.reduceMotion ? 0 : durationOut;
 	(0, react.useEffect)(() => {
 		if (!slot.closing) return;
 		const ownerId = slot.ownerId;

package/dist/components/client/Modal/ManagedModal.js

@@ -1,5 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
+import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
 import { closeModalEntry, removeModalEntry } from "./modalStore.js";
 import { useModalConfig } from "./UDSModalConfigProvider.js";
 import { ModalActions } from "./ModalActions.js";
@@ -9,12 +10,11 @@ import { ModalTitle } from "./ModalTitle.js";
 import { Modal } from "./Modal.js";
 import { useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useReducedMotion } from "motion/react";
 //#region src/components/client/Modal/ManagedModal.tsx
 const ManagedModal = ({ slot }) => {
 	const { animationDuration } = useModalConfig();
 	const durationOut = typeof animationDuration === "number" ? animationDuration : animationDuration.out;
-	const exitDuration = useReducedMotion() || slot.props.reduceMotion ? 0 : durationOut;
+	const exitDuration = usePrefersReducedMotion() || slot.props.reduceMotion ? 0 : durationOut;
 	useEffect(() => {
 		if (!slot.closing) return;
 		const ownerId = slot.ownerId;

package/dist/components/client/Modal/Modal.cjs

@@ -9,6 +9,7 @@ const require_components_Box = require("../../Box.cjs");
 const require_components_HStack = require("../../HStack.cjs");
 const require_components_VStack = require("../../VStack.cjs");
 const require_components_Scrim = require("../../Scrim.cjs");
+const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
 const require_utils_exposeAriakitScrollbarWidth = require("../../../utils/exposeAriakitScrollbarWidth.cjs");
 const require_components_client_Modal_ModalContext = require("./ModalContext.cjs");
 const require_components_client_Modal_UDSModalConfigProvider = require("./UDSModalConfigProvider.cjs");
@@ -21,7 +22,6 @@ let _yahoo_uds_icons = require("@yahoo/uds-icons");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _ariakit_react = require("@ariakit/react");
-let motion_react = require("motion/react");
 //#region src/components/client/Modal/Modal.tsx
 require_utils_exposeAriakitScrollbarWidth.exposeAriakitScrollbarWidth();
 const Modal = ({ children, open, onClose, onOpen, portal = true, modal = true, includeScrim, closeAriaLabel = "Close", slotProps, hideDismissButton = false, reduceMotion: forceReduceMotion = false, closeIcon = _yahoo_uds_icons.Cross, maxWidth = "auto", maxHeight: maxHeightProp = "auto", fullWidth = false, fullHeight = false, title: titleProp, description: descriptionProp, content: contentProp, actions: actionsProp, scrollBehavior = "outside", className, style }) => {
@@ -37,7 +37,7 @@ const Modal = ({ children, open, onClose, onOpen, portal = true, modal = true, i
 		out: animationEasing
 	} : animationEasing;
 	const { title: modalTitle, description: modalDescription, content: modalContent, actions: modalActions } = require_components_client_Modal_utils.separateChildren(children);
-	const reducedMotion = (0, motion_react.useReducedMotion)() || forceReduceMotion;
+	const reducedMotion = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion() || forceReduceMotion;
 	(0, react.useEffect)(() => {
 		if (open && !prevOpen.current) onOpen?.();
 		prevOpen.current = open;

package/dist/components/client/Modal/Modal.js

@@ -7,6 +7,7 @@ import { Box } from "../../Box.js";
 import { HStack } from "../../HStack.js";
 import { VStack } from "../../VStack.js";
 import { Scrim } from "../../Scrim.js";
+import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
 import { exposeAriakitScrollbarWidth } from "../../../utils/exposeAriakitScrollbarWidth.js";
 import { ModalContext } from "./ModalContext.js";
 import { useModalConfig } from "./UDSModalConfigProvider.js";
@@ -19,7 +20,6 @@ import { Cross } from "@yahoo/uds-icons";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog, DialogDismiss } from "@ariakit/react";
-import { useReducedMotion } from "motion/react";
 //#region src/components/client/Modal/Modal.tsx
 exposeAriakitScrollbarWidth();
 const Modal = ({ children, open, onClose, onOpen, portal = true, modal = true, includeScrim, closeAriaLabel = "Close", slotProps, hideDismissButton = false, reduceMotion: forceReduceMotion = false, closeIcon = Cross, maxWidth = "auto", maxHeight: maxHeightProp = "auto", fullWidth = false, fullHeight = false, title: titleProp, description: descriptionProp, content: contentProp, actions: actionsProp, scrollBehavior = "outside", className, style }) => {
@@ -35,7 +35,7 @@ const Modal = ({ children, open, onClose, onOpen, portal = true, modal = true, i
 		out: animationEasing
 	} : animationEasing;
 	const { title: modalTitle, description: modalDescription, content: modalContent, actions: modalActions } = separateChildren(children);
-	const reducedMotion = useReducedMotion() || forceReduceMotion;
+	const reducedMotion = usePrefersReducedMotion() || forceReduceMotion;
 	useEffect(() => {
 		if (open && !prevOpen.current) onOpen?.();
 		prevOpen.current = open;

package/dist/components/client/Popover/Popover.cjs

@@ -2,12 +2,12 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../../../_virtual/_rolldown/runtime.cjs");
+const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
 const require_components_client_Popover_PopoverContext = require("./PopoverContext.cjs");
 const require_components_client_Popover_UDSPopoverConfigProvider = require("./UDSPopoverConfigProvider.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _ariakit_react = require("@ariakit/react");
-let motion_react = require("motion/react");
 //#region src/components/client/Popover/Popover.tsx
 const POPOVER_OPEN_EVENT = "uds:popover-open";
 /**
@@ -61,7 +61,7 @@ function Popover({ children, placement, open, defaultOpen = false, portal = true
 		return () => document.removeEventListener(POPOVER_OPEN_EVENT, handler);
 	}, [id, store]);
 	const isControlled = open !== void 0;
-	const reducedMotion = (0, motion_react.useReducedMotion)() || forceReduceMotion;
+	const reducedMotion = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion() || forceReduceMotion;
 	const animationDuration = reducedMotion ? 0 : animationDurationConfig;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Popover_PopoverContext.PopoverInternalContext.Provider, {
 		value: {

package/dist/components/client/Popover/Popover.js

@@ -1,11 +1,11 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
+import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
 import { PopoverInternalContext } from "./PopoverContext.js";
 import { usePopoverConfig } from "./UDSPopoverConfigProvider.js";
 import { useCallback, useEffect, useId } from "react";
 import { jsx } from "react/jsx-runtime";
 import { PopoverProvider, usePopoverStore } from "@ariakit/react";
-import { useReducedMotion } from "motion/react";
 //#region src/components/client/Popover/Popover.tsx
 const POPOVER_OPEN_EVENT = "uds:popover-open";
 /**
@@ -59,7 +59,7 @@ function Popover({ children, placement, open, defaultOpen = false, portal = true
 		return () => document.removeEventListener(POPOVER_OPEN_EVENT, handler);
 	}, [id, store]);
 	const isControlled = open !== void 0;
-	const reducedMotion = useReducedMotion() || forceReduceMotion;
+	const reducedMotion = usePrefersReducedMotion() || forceReduceMotion;
 	const animationDuration = reducedMotion ? 0 : animationDurationConfig;
 	return /* @__PURE__ */ jsx(PopoverInternalContext.Provider, {
 		value: {

package/dist/components/client/Radio/Radio.cjs

@@ -5,6 +5,7 @@ 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_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
 const require_components_client_SpringMotionConfig = require("../SpringMotionConfig.cjs");
 const require_components_client_Radio_useRadioGroup = require("./useRadioGroup.cjs");
 let react = require("react");
@@ -117,7 +118,7 @@ const Radio = (0, react.forwardRef)(function Radio({ id, name: nameProp, label,
 	const handleTapEnd = (0, react.useCallback)(() => {
 		setIsPressed(false);
 	}, []);
-	const prefersReducedMotion = (0, motion_react.useReducedMotion)();
+	const prefersReducedMotion = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion();
 	const reduceMotion = forceReduceMotion ? "always" : "user";
 	const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
 	const classNames = {

package/dist/components/client/Radio/Radio.js

@@ -3,11 +3,12 @@
 import { cx, getStyles } from "../../../styles/styler.js";
 import { Box } from "../../Box.js";
 import { FormLabel } from "../../FormLabel.js";
+import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
 import { SpringMotionConfig } from "../SpringMotionConfig.js";
 import { useRadioGroup } from "./useRadioGroup.js";
 import { forwardRef, useCallback, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { m, useReducedMotion } from "motion/react";
+import { m } from "motion/react";
 //#region src/components/client/Radio/Radio.tsx
 const RADIO_VARIANTS = ["primary", "secondary"];
 const RADIO_SIZES = ["sm", "md"];
@@ -114,7 +115,7 @@ const Radio = forwardRef(function Radio({ id, name: nameProp, label, labelPositi
 	const handleTapEnd = useCallback(() => {
 		setIsPressed(false);
 	}, []);
-	const prefersReducedMotion = useReducedMotion();
+	const prefersReducedMotion = usePrefersReducedMotion();
 	const reduceMotion = forceReduceMotion ? "always" : "user";
 	const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
 	const classNames = {

package/dist/components/client/SpringMotionConfig.cjs

@@ -4,7 +4,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../../_virtual/_rolldown/runtime.cjs");
 const require_index = require("../../css-tokens/dist/index.cjs");
 const require_index$1 = require("../../motion-tokens/dist/index.cjs");
-const require_components_experimental_client_AvoidMotionLibraryProvider = require("../experimental/client/AvoidMotionLibraryProvider.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let motion_react = require("motion/react");
@@ -72,22 +71,20 @@ function SpringMotionConfig({ children, reducedMotion = "user", loadFeatures = d
 		layoutDampingVar,
 		layoutStiffnessVar
 	]);
-	const transition = (0, react.useMemo)(() => ({
-		type: "spring",
-		mass: 1,
-		...layoutConfig,
-		layout: layoutConfig,
-		opacity: colorConfig,
-		color: colorConfig,
-		borderColor: colorConfig,
-		backgroundColor: colorConfig
-	}), [colorConfig, layoutConfig]);
-	if (require_components_experimental_client_AvoidMotionLibraryProvider.useAvoidMotionLibrary()) return children;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.LazyMotion, {
 		features: loadFeatures,
 		strict: true,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.MotionConfig, {
-			transition,
+			transition: (0, react.useMemo)(() => ({
+				type: "spring",
+				mass: 1,
+				...layoutConfig,
+				layout: layoutConfig,
+				opacity: colorConfig,
+				color: colorConfig,
+				borderColor: colorConfig,
+				backgroundColor: colorConfig
+			}), [colorConfig, layoutConfig]),
 			reducedMotion,
 			children
 		})