@yahoo/uds 3.160.0 → 3.162.0

package/dist/components/client/Checkbox/CheckboxBase.js

@@ -0,0 +1,138 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { cx, getStyles } from "../../../styles/styler.js";
+import { FormLabel } from "../../FormLabel.js";
+import { VARIANT_ERROR_MAP, getIcon, isIndeterminate } from "./checkboxConstants.js";
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/client/Checkbox/CheckboxBase.tsx
+const CheckboxBase = forwardRef(function CheckboxBase({ id, checked: checkedProp, defaultChecked, onChange, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: _reduceMotion, disabled, required, hasError, className, style, slotProps, cssAnimationDuration, enableInteractionTracking = false, renderRoot, renderIndicator, ...checkboxProps }, parentRef) {
+	const generatedId = useId();
+	const uid = id ?? `uds-input-${generatedId}`;
+	const rootSlotProps = slotProps?.root ?? {};
+	const checkboxSlotProps = slotProps?.checkbox ?? {};
+	const iconSlotProps = slotProps?.icon ?? {};
+	const labelSlotProps = slotProps?.label ?? {};
+	const innerRef = useRef(null);
+	/**
+	* State
+	*/
+	const isControlled = checkedProp !== void 0;
+	const [checked, setChecked] = useState(isControlled ? checkedProp : defaultChecked);
+	const [isHovered, setIsHovered] = useState(false);
+	const [isPressed, setIsPressed] = useState(false);
+	/**
+	* Derived values
+	*/
+	const variant = useMemo(() => hasError ? VARIANT_ERROR_MAP[variantProp] : variantProp, [hasError, variantProp]);
+	const showHoverEffect = enableInteractionTracking && !disabled && isHovered;
+	const showPressedEffect = enableInteractionTracking && !disabled && isPressed;
+	/**
+	* Handlers
+	*/
+	const handleChange = useCallback((e) => {
+		onChange?.(e);
+		if (!isControlled) setChecked(e.target.checked);
+	}, [isControlled, onChange]);
+	const handleHoverStart = useCallback(() => {
+		if (enableInteractionTracking) setIsHovered(true);
+	}, [enableInteractionTracking]);
+	const handleHoverEnd = useCallback(() => {
+		if (enableInteractionTracking) setIsHovered(false);
+	}, [enableInteractionTracking]);
+	const handleTapStart = useCallback(() => {
+		if (enableInteractionTracking) setIsPressed(true);
+	}, [enableInteractionTracking]);
+	const handleTapEnd = useCallback(() => {
+		if (enableInteractionTracking) setIsPressed(false);
+	}, [enableInteractionTracking]);
+	/**
+	* Helpers
+	*/
+	const setDOMIndeterminate = (checked_) => {
+		if (!innerRef.current) return;
+		innerRef.current.indeterminate = isIndeterminate(checked_);
+	};
+	/**
+	* Effects
+	*/
+	useEffect(() => {
+		if (isControlled) setChecked(checkedProp);
+	}, [checkedProp, isControlled]);
+	useEffect(() => {
+		setDOMIndeterminate(checked);
+	}, [checked]);
+	const valueState = isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+	const classNames = {
+		root: getStyles({
+			checkboxSizeRoot: size,
+			checkboxVariantRoot: variant,
+			checkboxVariantValueRoot: valueState,
+			display: "flex",
+			flexDirection: labelPosition === "start" ? "row" : "row-reverse",
+			alignItems: "center",
+			className: cx({
+				"cursor-pointer": !disabled,
+				"cursor-default": disabled,
+				"opacity-50": disabled
+			}, className)
+		}),
+		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")
+	};
+	const input = /* @__PURE__ */ jsx("input", {
+		type: "checkbox",
+		tabIndex: 0,
+		...checkboxProps,
+		ref: (ref) => {
+			innerRef.current = ref;
+			setDOMIndeterminate(checked);
+			if (typeof parentRef === "function") parentRef(ref);
+			else if (parentRef !== null) parentRef.current = ref;
+		},
+		id: uid,
+		disabled,
+		required,
+		"aria-invalid": hasError,
+		checked: isControlled ? isIndeterminate(checked) ? false : checked : void 0,
+		defaultChecked: isControlled ? void 0 : defaultChecked,
+		onChange: handleChange,
+		className: classNames.htmlCheckbox
+	});
+	return renderRoot({
+		className: classNames.root,
+		style,
+		rootSlotProps,
+		hasLabel: Boolean(label),
+		isPressed,
+		onHoverStart: handleHoverStart,
+		onHoverEnd: handleHoverEnd,
+		onTapStart: handleTapStart,
+		onTapEnd: handleTapEnd,
+		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [renderIndicator({
+			size,
+			variant,
+			valueState,
+			checked,
+			disabled,
+			showHoverEffect,
+			showPressedEffect,
+			cssAnimationDuration,
+			checkIcon: getIcon(checked),
+			checkboxSlotProps,
+			iconSlotProps,
+			children: input
+		}), label && /* @__PURE__ */ jsx(FormLabel, {
+			as: "div",
+			variant: "inherit",
+			color: "inherit",
+			required,
+			label,
+			className: classNames.label,
+			...labelSlotProps
+		})] })
+	});
+});
+CheckboxBase.displayName = "CheckboxBase";
+//#endregion
+export { CheckboxBase };

package/dist/components/client/Checkbox/checkboxConstants.cjs

@@ -0,0 +1,23 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../_virtual/_rolldown/runtime.cjs");
+let _yahoo_uds_icons = require("@yahoo/uds-icons");
+//#region src/components/client/Checkbox/checkboxConstants.ts
+const VARIANTS = ["primary", "secondary"];
+const SIZES = ["sm", "md"];
+const VARIANT_ERROR_MAP = {
+	primary: "alert",
+	secondary: "alert-secondary"
+};
+const isIndeterminate = (checked) => checked === "indeterminate";
+const getIcon = (checked) => {
+	if (isIndeterminate(checked)) return _yahoo_uds_icons.Minus;
+	return _yahoo_uds_icons.Check;
+};
+//#endregion
+exports.SIZES = SIZES;
+exports.VARIANTS = VARIANTS;
+exports.VARIANT_ERROR_MAP = VARIANT_ERROR_MAP;
+exports.getIcon = getIcon;
+exports.isIndeterminate = isIndeterminate;

package/dist/components/client/Checkbox/checkboxConstants.d.cts

@@ -0,0 +1,25 @@
+
+import { CheckboxValue, CheckboxVariant } from "../../../types/dist/index.cjs";
+import { IconVariant, SvgIconProps } from "../../../icons/dist/types.cjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Checkbox/checkboxConstants.d.ts
+declare const VARIANTS: ("primary" | "secondary")[];
+declare const SIZES: ("sm" | "md")[];
+declare const VARIANT_ERROR_MAP: Record<CheckboxVariant, 'alert' | 'alert-secondary'>;
+declare const isIndeterminate: (checked?: CheckboxValue) => checked is "indeterminate";
+declare const getIcon: (checked?: CheckboxValue) => {
+  ({
+    size,
+    variant
+  }: SvgIconProps): _$react_jsx_runtime0.JSX.Element;
+  metadata: {
+    name: string;
+    isSvgIcon: boolean;
+    variants: IconVariant[];
+    category: string;
+    tags: string[];
+  };
+};
+//#endregion
+export { SIZES, VARIANTS, VARIANT_ERROR_MAP, getIcon, isIndeterminate };

package/dist/components/client/Checkbox/checkboxConstants.d.ts

@@ -0,0 +1,26 @@
+
+"use client";
+import { CheckboxValue, CheckboxVariant } from "../../../types/dist/index.js";
+import { IconVariant, SvgIconProps } from "../../../icons/dist/types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Checkbox/checkboxConstants.d.ts
+declare const VARIANTS: ("primary" | "secondary")[];
+declare const SIZES: ("sm" | "md")[];
+declare const VARIANT_ERROR_MAP: Record<CheckboxVariant, 'alert' | 'alert-secondary'>;
+declare const isIndeterminate: (checked?: CheckboxValue) => checked is "indeterminate";
+declare const getIcon: (checked?: CheckboxValue) => {
+  ({
+    size,
+    variant
+  }: SvgIconProps): _$react_jsx_runtime0.JSX.Element;
+  metadata: {
+    name: string;
+    isSvgIcon: boolean;
+    variants: IconVariant[];
+    category: string;
+    tags: string[];
+  };
+};
+//#endregion
+export { SIZES, VARIANTS, VARIANT_ERROR_MAP, getIcon, isIndeterminate };

package/dist/components/client/Checkbox/checkboxConstants.js

@@ -0,0 +1,17 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { Check, Minus } from "@yahoo/uds-icons";
+//#region src/components/client/Checkbox/checkboxConstants.ts
+const VARIANTS = ["primary", "secondary"];
+const SIZES = ["sm", "md"];
+const VARIANT_ERROR_MAP = {
+	primary: "alert",
+	secondary: "alert-secondary"
+};
+const isIndeterminate = (checked) => checked === "indeterminate";
+const getIcon = (checked) => {
+	if (isIndeterminate(checked)) return Minus;
+	return Check;
+};
+//#endregion
+export { SIZES, VARIANTS, VARIANT_ERROR_MAP, getIcon, isIndeterminate };

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

@@ -0,0 +1,10 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_components_client_Checkbox_checkboxConstants = require("./checkboxConstants.cjs");
+const require_components_client_Checkbox_CheckboxBase = require("./CheckboxBase.cjs");
+const require_components_client_Checkbox_Checkbox = require("./Checkbox.cjs");
+exports.Checkbox = require_components_client_Checkbox_Checkbox.Checkbox;
+exports.CheckboxBase = require_components_client_Checkbox_CheckboxBase.CheckboxBase;
+exports.SIZES = require_components_client_Checkbox_checkboxConstants.SIZES;
+exports.VARIANTS = require_components_client_Checkbox_checkboxConstants.VARIANTS;

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

@@ -0,0 +1,6 @@
+
+import { SIZES, VARIANTS } from "./checkboxConstants.cjs";
+import { CheckboxChangeEvent, CheckboxValueState, DataAttributes } from "./types.cjs";
+import { Checkbox, CheckboxProps } from "./Checkbox.cjs";
+import { CheckboxBase, CheckboxBaseProps } from "./CheckboxBase.cjs";
+export { Checkbox, CheckboxBase, type CheckboxBaseProps, type CheckboxChangeEvent, type CheckboxProps, type CheckboxValueState, type DataAttributes, SIZES, VARIANTS };

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

@@ -0,0 +1,7 @@
+
+"use client";
+import { SIZES, VARIANTS } from "./checkboxConstants.js";
+import { CheckboxChangeEvent, CheckboxValueState, DataAttributes } from "./types.js";
+import { Checkbox, CheckboxProps } from "./Checkbox.js";
+import { CheckboxBase, CheckboxBaseProps } from "./CheckboxBase.js";
+export { Checkbox, CheckboxBase, type CheckboxBaseProps, type CheckboxChangeEvent, type CheckboxProps, type CheckboxValueState, type DataAttributes, SIZES, VARIANTS };

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

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

package/dist/components/client/Checkbox/types.cjs

@@ -0,0 +1,2 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";

package/dist/components/client/Checkbox/types.d.cts

@@ -0,0 +1,22 @@
+
+import { UniversalCheckboxProps } from "../../../types/dist/index.cjs";
+import React, { ChangeEvent } from "react";
+
+//#region src/components/client/Checkbox/types.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color'>;
+type CheckboxChangeEvent = ChangeEvent<HTMLInputElement>;
+type CheckboxValueState = 'checked' | 'unchecked' | 'indeterminate';
+interface CheckboxProps extends NativeInputProps, UniversalCheckboxProps {
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: DataAttributes;
+    checkbox?: DataAttributes;
+    icon?: DataAttributes;
+    label?: DataAttributes;
+  };
+}
+//#endregion
+export { type CheckboxChangeEvent, type CheckboxProps, type CheckboxValueState, type DataAttributes, type NativeInputProps };

package/dist/components/client/Checkbox/types.d.ts

@@ -0,0 +1,23 @@
+
+"use client";
+import { UniversalCheckboxProps } from "../../../types/dist/index.js";
+import React, { ChangeEvent } from "react";
+
+//#region src/components/client/Checkbox/types.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color'>;
+type CheckboxChangeEvent = ChangeEvent<HTMLInputElement>;
+type CheckboxValueState = 'checked' | 'unchecked' | 'indeterminate';
+interface CheckboxProps extends NativeInputProps, UniversalCheckboxProps {
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: DataAttributes;
+    checkbox?: DataAttributes;
+    icon?: DataAttributes;
+    label?: DataAttributes;
+  };
+}
+//#endregion
+export { type CheckboxChangeEvent, type CheckboxProps, type CheckboxValueState, type DataAttributes, type NativeInputProps };

package/dist/components/client/Checkbox/types.js

@@ -0,0 +1,2 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";

package/dist/components/client/Chip/ChipBase.cjs

@@ -6,16 +6,16 @@ const require_styles_styler = require("../../../styles/styler.cjs");
 const require_components_IconSlot = require("../../IconSlot.cjs");
 const require_components_Text = require("../../Text.cjs");
 const require_components_HStack = require("../../HStack.cjs");
+const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
-let motion_react = require("motion/react");
 //#region src/components/client/Chip/ChipBase.tsx
 const SIZE_DEFAULT = "md";
 const VARIANT_DEFAULT = "primary";
 const MAX_WIDTH_DEFAULT = 200;
 const ChipBase = (0, react.forwardRef)(function ChipBase({ size = SIZE_DEFAULT, minWidth, maxWidth = MAX_WIDTH_DEFAULT, startIcon, endIcon, as: As = "div", reduceMotion: forceReduceMotion, disabled = false, className, slotProps, children, ...rest }, ref) {
-	const cssAnimationDuration = (0, motion_react.useReducedMotion)() || forceReduceMotion ? "duration-0" : "duration-120";
+	const cssAnimationDuration = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion() || forceReduceMotion ? "duration-0" : "duration-120";
 	const { className: textClassName, ...textProps } = slotProps?.text ?? {};
 	const { className: startIconClassName, ...startIconProps } = slotProps?.startIcon ?? {};
 	const { className: endIconClassName, ...endIconProps } = slotProps?.endIcon ?? {};

package/dist/components/client/Chip/ChipBase.js

@@ -4,15 +4,15 @@ import { cx, getStyles } from "../../../styles/styler.js";
 import { IconSlot } from "../../IconSlot.js";
 import { Text } from "../../Text.js";
 import { HStack } from "../../HStack.js";
+import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
 import { forwardRef, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useReducedMotion } from "motion/react";
 //#region src/components/client/Chip/ChipBase.tsx
 const SIZE_DEFAULT = "md";
 const VARIANT_DEFAULT = "primary";
 const MAX_WIDTH_DEFAULT = 200;
 const ChipBase = forwardRef(function ChipBase({ size = SIZE_DEFAULT, minWidth, maxWidth = MAX_WIDTH_DEFAULT, startIcon, endIcon, as: As = "div", reduceMotion: forceReduceMotion, disabled = false, className, slotProps, children, ...rest }, ref) {
-	const cssAnimationDuration = useReducedMotion() || forceReduceMotion ? "duration-0" : "duration-120";
+	const cssAnimationDuration = usePrefersReducedMotion() || forceReduceMotion ? "duration-0" : "duration-120";
 	const { className: textClassName, ...textProps } = slotProps?.text ?? {};
 	const { className: startIconClassName, ...startIconProps } = slotProps?.startIcon ?? {};
 	const { className: endIconClassName, ...endIconProps } = slotProps?.endIcon ?? {};

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

@@ -5,6 +5,7 @@ require("../../../_virtual/_rolldown/runtime.cjs");
 const require_index = require("../../../css-tokens/dist/index.cjs");
 const require_utils_createSlot = require("../../../utils/createSlot.cjs");
 const require_components_Icon = require("../../Icon.cjs");
+const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
 const require_components_client_SpringMotionConfig = require("../SpringMotionConfig.cjs");
 require("../Button/buttonConstants.cjs");
 const require_components_client_Button_Button = require("../Button/Button.cjs");
@@ -20,7 +21,7 @@ let motion_react = require("motion/react");
 * @componentType Client component
 */
 const IconButton = (0, react.forwardRef)(function IconButton(props, forwardedRef) {
-	const prefersReducedMotion = (0, motion_react.useReducedMotion)();
+	const prefersReducedMotion = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion();
 	const disableMotion = !!props.disableEffects || !!props.disabled;
 	const layoutVariant = (0, react.useMemo)(() => prefersReducedMotion ? "smooth" : "subtle", [prefersReducedMotion]);
 	const Slot = (0, react.useMemo)(() => require_utils_createSlot.createSlot(), []);

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

@@ -3,6 +3,7 @@
 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";
@@ -10,7 +11,7 @@ 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, useReducedMotion } from "motion/react";
+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**
@@ -18,7 +19,7 @@ import { AnimatePresence, m, useReducedMotion } from "motion/react";
 * @componentType Client component
 */
 const IconButton = forwardRef(function IconButton(props, forwardedRef) {
-	const prefersReducedMotion = useReducedMotion();
+	const prefersReducedMotion = usePrefersReducedMotion();
 	const disableMotion = !!props.disableEffects || !!props.disabled;
 	const layoutVariant = useMemo(() => prefersReducedMotion ? "smooth" : "subtle", [prefersReducedMotion]);
 	const Slot = useMemo(() => createSlot(), []);

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/Menu/Menu.ItemCheckbox.d.cts

@@ -131,6 +131,6 @@ interface MenuItemCheckboxProps extends Omit<PressableProps, 'asChild'>, HtmlBut
  *
  * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
  **/
-declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "hideEndIcon" | "rootProps"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "rootProps" | "hideEndIcon"> & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { MenuItemCheckbox, type MenuItemCheckboxProps };

package/dist/components/client/Menu/Menu.ItemCheckbox.d.ts

@@ -132,6 +132,6 @@ interface MenuItemCheckboxProps extends Omit<PressableProps, 'asChild'>, HtmlBut
  *
  * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
  **/
-declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "hideEndIcon" | "rootProps"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "rootProps" | "hideEndIcon"> & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { MenuItemCheckbox, type MenuItemCheckboxProps };

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/Popover/UDSPopoverConfigProvider.d.cts

@@ -29,7 +29,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
   gap: SpacingAlias;
   dismissButtonSpacing: SpacingAlias;
   dismissIconSize: number;
-  ariaKitPlacement: ("bottom-start" | "bottom-end" | "top-start" | "top-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
+  ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("top" | "bottom" | "left" | "right") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
   animationDuration: number;
 };
 //#endregion