@yahoo/uds 3.133.2 → 3.134.0

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

@@ -0,0 +1,193 @@
+/*! © 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_components_client_Pressable = require("../Pressable.cjs");
+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_components_Scrim = require("../../Scrim.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");
+const require_components_client_Modal_ModalActions = require("./ModalActions.cjs");
+const require_components_client_Modal_ModalContent = require("./ModalContent.cjs");
+const require_components_client_Modal_ModalDescription = require("./ModalDescription.cjs");
+const require_components_client_Modal_ModalTitle = require("./ModalTitle.cjs");
+const require_components_client_Modal_utils = require("./utils.cjs");
+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 }) => {
+	const prevOpen = (0, react.useRef)(open);
+	const positionerRef = (0, react.useRef)(null);
+	const { size, variant, animationDuration, animationEasing, gutter } = require_components_client_Modal_UDSModalConfigProvider.useModalConfig();
+	const { in: durationIn, out: durationOut } = typeof animationDuration === "number" ? {
+		in: animationDuration,
+		out: animationDuration
+	} : animationDuration;
+	const { in: easingIn, out: easingOut } = typeof animationEasing === "string" ? {
+		in: animationEasing,
+		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;
+	(0, react.useEffect)(() => {
+		if (open && !prevOpen.current) onOpen?.();
+		prevOpen.current = open;
+	}, [open, onOpen]);
+	const [shouldLockScroll, setShouldLockScroll] = (0, react.useState)(open);
+	if (open && !shouldLockScroll) setShouldLockScroll(true);
+	(0, react.useEffect)(() => {
+		if (open) return;
+		const duration = reducedMotion ? 0 : durationOut;
+		const timer = window.setTimeout(() => setShouldLockScroll(false), duration);
+		return () => window.clearTimeout(timer);
+	}, [
+		open,
+		reducedMotion,
+		durationOut
+	]);
+	(0, react.useLayoutEffect)(() => {
+		if (!open) return;
+		const positioner = positionerRef.current;
+		const dialog = positioner?.firstElementChild;
+		if (!positioner || !dialog) return;
+		positioner.style.zIndex = getComputedStyle(dialog).zIndex;
+	}, [open]);
+	const hasTitleOrDescription = !!(modalTitle || titleProp || modalDescription || descriptionProp);
+	const shouldRenderHeader = !!(!hideDismissButton || hasTitleOrDescription);
+	const hasContent = !!(modalContent || contentProp);
+	const maxHeight = scrollBehavior === "inside" ? maxHeightProp : void 0;
+	const classNames = {
+		positioner: require_styles_styler.getStyles({
+			spacing: gutter,
+			className: require_styles_styler.cx("fixed inset-0 z-40", scrollBehavior === "outside" ? "overflow-y-auto" : "overflow-hidden", !reducedMotion && "transition-[opacity,visibility]", open ? "visible opacity-100" : "invisible opacity-0", modal === false && "pointer-events-none")
+		}),
+		root: require_styles_styler.getStyles({
+			modalSizeRoot: size,
+			modalVariantRoot: variant,
+			className: require_styles_styler.cx("z-40", "uds-bgBlurFallback", fullWidth ? "w-full" : "w-fit", fullHeight && scrollBehavior === "inside" ? "h-full" : "h-fit", "m-auto pointer-events-auto", scrollBehavior === "inside" && "overflow-hidden max-h-full", !reducedMotion && "transition-transform")
+		}),
+		header: require_styles_styler.getStyles({
+			modalSizeSpacingHorizontal: size,
+			modalSizeHeader: size,
+			flexDirection: "row-reverse",
+			justifyContent: "space-between",
+			alignItems: hideDismissButton ? "flex-end" : "flex-start"
+		}),
+		titleDescriptionWrapper: require_styles_styler.getStyles({ modalSizeTitleDescriptionWrapper: size }),
+		closeIconContainer: require_styles_styler.getStyles({
+			modalSizeCloseIconContainer: size,
+			borderRadius: "full",
+			className: require_styles_styler.cx(reducedMotion ? "duration-0" : "duration-120", "transition-[background-color]", "bg-carbon-15/0", "hover:bg-carbon-15/10", "active:bg-carbon-15/15", "uds-ring", "[translate:50%_-50%]")
+		}),
+		closeIcon: require_styles_styler.getStyles({
+			modalSizeCloseIcon: size,
+			modalVariantCloseIcon: variant
+		})
+	};
+	const backdrop = includeScrim ?? modal ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Scrim.Scrim, {
+		animateOpacity: true,
+		...slotProps?.scrim,
+		className: require_styles_styler.cx(!open && "pointer-events-none", slotProps?.scrim?.className),
+		style: {
+			...slotProps?.scrim?.style,
+			...!reducedMotion ? {
+				transitionDuration: `${open ? durationIn : durationOut}ms`,
+				transitionTimingFunction: open ? easingIn : easingOut
+			} : void 0
+		}
+	}) : false;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.Dialog, {
+		open,
+		onClose,
+		portal,
+		modal,
+		className: classNames.root,
+		backdrop,
+		preventBodyScroll: modal ? shouldLockScroll : false,
+		alwaysVisible: true,
+		autoFocusOnShow: (element) => {
+			if (scrollBehavior === "outside") {
+				element?.focus({ preventScroll: true });
+				positionerRef.current?.scrollTo(0, 0);
+				return false;
+			}
+			return true;
+		},
+		render: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+			...slotProps?.positioner,
+			ref: positionerRef,
+			className: require_styles_styler.cx(classNames.positioner, slotProps?.positioner?.className),
+			style: {
+				...slotProps?.positioner?.style,
+				...!reducedMotion ? {
+					transitionDuration: `${open ? durationIn : durationOut}ms`,
+					transitionTimingFunction: open ? easingIn : easingOut
+				} : void 0
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_VStack.VStack, {
+				...props,
+				...slotProps?.root,
+				className: require_styles_styler.cx(props.className, className, slotProps?.root?.className),
+				style: {
+					...props.style,
+					...style,
+					...slotProps?.root?.style,
+					maxWidth,
+					maxHeight,
+					...!reducedMotion ? {
+						transform: open ? "scale(1)" : "scale(0.95)",
+						transitionDuration: `${open ? durationIn : durationOut}ms`,
+						transitionTimingFunction: open ? easingIn : easingOut
+					} : void 0
+				}
+			})
+		}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_client_Modal_ModalContext.ModalContext.Provider, {
+			value: {
+				scrollBehavior,
+				shouldRenderHeader,
+				hasContent
+			},
+			children: [
+				shouldRenderHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_HStack.HStack, {
+					...slotProps?.header,
+					className: require_styles_styler.cx(classNames.header, slotProps?.header?.className),
+					children: [!hideDismissButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.DialogDismiss, {
+						render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Pressable.Pressable, {
+							"aria-label": closeAriaLabel,
+							onClick: (e) => onClose?.(e.nativeEvent),
+							...slotProps?.closeIconContainer,
+							className: require_styles_styler.cx(classNames.closeIconContainer, slotProps?.closeIconContainer?.className)
+						}),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+							icon: closeIcon,
+							iconProps: {
+								color: "inherit",
+								...slotProps?.closeIcon,
+								className: require_styles_styler.cx(classNames.closeIcon, slotProps?.closeIcon?.className)
+							}
+						})
+					}), hasTitleOrDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_VStack.VStack, {
+						...slotProps?.titleDescriptionWrapper,
+						className: require_styles_styler.cx(classNames.titleDescriptionWrapper, slotProps?.titleDescriptionWrapper?.className),
+						children: [modalTitle || (titleProp ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Modal_ModalTitle.ModalTitle, { children: titleProp }) : null), modalDescription || (descriptionProp ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Modal_ModalDescription.ModalDescription, { children: descriptionProp }) : null)]
+					})]
+				}),
+				modalContent || (contentProp ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Modal_ModalContent.ModalContent, { children: contentProp }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, { flexGrow: "1" })),
+				modalActions || (actionsProp ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Modal_ModalActions.ModalActions, { children: actionsProp }) : null)
+			]
+		})
+	});
+};
+Modal.displayName = "Modal";
+//#endregion
+exports.Modal = Modal;

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

@@ -0,0 +1,51 @@
+
+import { IconPropsWithSVGProps, UniversalModalProps } from "../../../types/dist/index.cjs";
+import { ScrimProps } from "../../Scrim.cjs";
+import { PressableProps } from "../Pressable.cjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Modal/Modal.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string | boolean;
+};
+interface ModalProps extends UniversalModalProps {
+  slotProps?: {
+    scrim?: Partial<ScrimProps & DataAttributes>;
+    root?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    positioner?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    header?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    titleDescriptionWrapper?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    closeIconContainer?: Partial<PressableProps & DataAttributes>;
+    closeIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
+}
+declare const Modal: {
+  ({
+    children,
+    open,
+    onClose,
+    onOpen,
+    portal,
+    modal,
+    includeScrim,
+    closeAriaLabel,
+    slotProps,
+    hideDismissButton,
+    reduceMotion: forceReduceMotion,
+    closeIcon,
+    maxWidth,
+    maxHeight: maxHeightProp,
+    fullWidth,
+    fullHeight,
+    title: titleProp,
+    description: descriptionProp,
+    content: contentProp,
+    actions: actionsProp,
+    scrollBehavior,
+    className,
+    style
+  }: ModalProps): _$react_jsx_runtime0.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Modal, type ModalProps };

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

@@ -0,0 +1,52 @@
+
+"use client";
+import { IconPropsWithSVGProps, UniversalModalProps } from "../../../types/dist/index.js";
+import { ScrimProps } from "../../Scrim.js";
+import { PressableProps } from "../Pressable.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Modal/Modal.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string | boolean;
+};
+interface ModalProps extends UniversalModalProps {
+  slotProps?: {
+    scrim?: Partial<ScrimProps & DataAttributes>;
+    root?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    positioner?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    header?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    titleDescriptionWrapper?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    closeIconContainer?: Partial<PressableProps & DataAttributes>;
+    closeIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
+}
+declare const Modal: {
+  ({
+    children,
+    open,
+    onClose,
+    onOpen,
+    portal,
+    modal,
+    includeScrim,
+    closeAriaLabel,
+    slotProps,
+    hideDismissButton,
+    reduceMotion: forceReduceMotion,
+    closeIcon,
+    maxWidth,
+    maxHeight: maxHeightProp,
+    fullWidth,
+    fullHeight,
+    title: titleProp,
+    description: descriptionProp,
+    content: contentProp,
+    actions: actionsProp,
+    scrollBehavior,
+    className,
+    style
+  }: ModalProps): _$react_jsx_runtime0.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Modal, type ModalProps };

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

@@ -0,0 +1,191 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { cx, getStyles } from "../../../styles/styler.js";
+import { Pressable } from "../Pressable.js";
+import { IconSlot } from "../../IconSlot.js";
+import { Box } from "../../Box.js";
+import { HStack } from "../../HStack.js";
+import { VStack } from "../../VStack.js";
+import { Scrim } from "../../Scrim.js";
+import { exposeAriakitScrollbarWidth } from "../../../utils/exposeAriakitScrollbarWidth.js";
+import { ModalContext } from "./ModalContext.js";
+import { useModalConfig } from "./UDSModalConfigProvider.js";
+import { ModalActions } from "./ModalActions.js";
+import { ModalContent } from "./ModalContent.js";
+import { ModalDescription } from "./ModalDescription.js";
+import { ModalTitle } from "./ModalTitle.js";
+import { separateChildren } from "./utils.js";
+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 }) => {
+	const prevOpen = useRef(open);
+	const positionerRef = useRef(null);
+	const { size, variant, animationDuration, animationEasing, gutter } = useModalConfig();
+	const { in: durationIn, out: durationOut } = typeof animationDuration === "number" ? {
+		in: animationDuration,
+		out: animationDuration
+	} : animationDuration;
+	const { in: easingIn, out: easingOut } = typeof animationEasing === "string" ? {
+		in: animationEasing,
+		out: animationEasing
+	} : animationEasing;
+	const { title: modalTitle, description: modalDescription, content: modalContent, actions: modalActions } = separateChildren(children);
+	const reducedMotion = useReducedMotion() || forceReduceMotion;
+	useEffect(() => {
+		if (open && !prevOpen.current) onOpen?.();
+		prevOpen.current = open;
+	}, [open, onOpen]);
+	const [shouldLockScroll, setShouldLockScroll] = useState(open);
+	if (open && !shouldLockScroll) setShouldLockScroll(true);
+	useEffect(() => {
+		if (open) return;
+		const duration = reducedMotion ? 0 : durationOut;
+		const timer = window.setTimeout(() => setShouldLockScroll(false), duration);
+		return () => window.clearTimeout(timer);
+	}, [
+		open,
+		reducedMotion,
+		durationOut
+	]);
+	useLayoutEffect(() => {
+		if (!open) return;
+		const positioner = positionerRef.current;
+		const dialog = positioner?.firstElementChild;
+		if (!positioner || !dialog) return;
+		positioner.style.zIndex = getComputedStyle(dialog).zIndex;
+	}, [open]);
+	const hasTitleOrDescription = !!(modalTitle || titleProp || modalDescription || descriptionProp);
+	const shouldRenderHeader = !!(!hideDismissButton || hasTitleOrDescription);
+	const hasContent = !!(modalContent || contentProp);
+	const maxHeight = scrollBehavior === "inside" ? maxHeightProp : void 0;
+	const classNames = {
+		positioner: getStyles({
+			spacing: gutter,
+			className: cx("fixed inset-0 z-40", scrollBehavior === "outside" ? "overflow-y-auto" : "overflow-hidden", !reducedMotion && "transition-[opacity,visibility]", open ? "visible opacity-100" : "invisible opacity-0", modal === false && "pointer-events-none")
+		}),
+		root: getStyles({
+			modalSizeRoot: size,
+			modalVariantRoot: variant,
+			className: cx("z-40", "uds-bgBlurFallback", fullWidth ? "w-full" : "w-fit", fullHeight && scrollBehavior === "inside" ? "h-full" : "h-fit", "m-auto pointer-events-auto", scrollBehavior === "inside" && "overflow-hidden max-h-full", !reducedMotion && "transition-transform")
+		}),
+		header: getStyles({
+			modalSizeSpacingHorizontal: size,
+			modalSizeHeader: size,
+			flexDirection: "row-reverse",
+			justifyContent: "space-between",
+			alignItems: hideDismissButton ? "flex-end" : "flex-start"
+		}),
+		titleDescriptionWrapper: getStyles({ modalSizeTitleDescriptionWrapper: size }),
+		closeIconContainer: getStyles({
+			modalSizeCloseIconContainer: size,
+			borderRadius: "full",
+			className: cx(reducedMotion ? "duration-0" : "duration-120", "transition-[background-color]", "bg-carbon-15/0", "hover:bg-carbon-15/10", "active:bg-carbon-15/15", "uds-ring", "[translate:50%_-50%]")
+		}),
+		closeIcon: getStyles({
+			modalSizeCloseIcon: size,
+			modalVariantCloseIcon: variant
+		})
+	};
+	const backdrop = includeScrim ?? modal ? /* @__PURE__ */ jsx(Scrim, {
+		animateOpacity: true,
+		...slotProps?.scrim,
+		className: cx(!open && "pointer-events-none", slotProps?.scrim?.className),
+		style: {
+			...slotProps?.scrim?.style,
+			...!reducedMotion ? {
+				transitionDuration: `${open ? durationIn : durationOut}ms`,
+				transitionTimingFunction: open ? easingIn : easingOut
+			} : void 0
+		}
+	}) : false;
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onClose,
+		portal,
+		modal,
+		className: classNames.root,
+		backdrop,
+		preventBodyScroll: modal ? shouldLockScroll : false,
+		alwaysVisible: true,
+		autoFocusOnShow: (element) => {
+			if (scrollBehavior === "outside") {
+				element?.focus({ preventScroll: true });
+				positionerRef.current?.scrollTo(0, 0);
+				return false;
+			}
+			return true;
+		},
+		render: (props) => /* @__PURE__ */ jsx(Box, {
+			...slotProps?.positioner,
+			ref: positionerRef,
+			className: cx(classNames.positioner, slotProps?.positioner?.className),
+			style: {
+				...slotProps?.positioner?.style,
+				...!reducedMotion ? {
+					transitionDuration: `${open ? durationIn : durationOut}ms`,
+					transitionTimingFunction: open ? easingIn : easingOut
+				} : void 0
+			},
+			children: /* @__PURE__ */ jsx(VStack, {
+				...props,
+				...slotProps?.root,
+				className: cx(props.className, className, slotProps?.root?.className),
+				style: {
+					...props.style,
+					...style,
+					...slotProps?.root?.style,
+					maxWidth,
+					maxHeight,
+					...!reducedMotion ? {
+						transform: open ? "scale(1)" : "scale(0.95)",
+						transitionDuration: `${open ? durationIn : durationOut}ms`,
+						transitionTimingFunction: open ? easingIn : easingOut
+					} : void 0
+				}
+			})
+		}),
+		children: /* @__PURE__ */ jsxs(ModalContext.Provider, {
+			value: {
+				scrollBehavior,
+				shouldRenderHeader,
+				hasContent
+			},
+			children: [
+				shouldRenderHeader && /* @__PURE__ */ jsxs(HStack, {
+					...slotProps?.header,
+					className: cx(classNames.header, slotProps?.header?.className),
+					children: [!hideDismissButton && /* @__PURE__ */ jsx(DialogDismiss, {
+						render: /* @__PURE__ */ jsx(Pressable, {
+							"aria-label": closeAriaLabel,
+							onClick: (e) => onClose?.(e.nativeEvent),
+							...slotProps?.closeIconContainer,
+							className: cx(classNames.closeIconContainer, slotProps?.closeIconContainer?.className)
+						}),
+						children: /* @__PURE__ */ jsx(IconSlot, {
+							icon: closeIcon,
+							iconProps: {
+								color: "inherit",
+								...slotProps?.closeIcon,
+								className: cx(classNames.closeIcon, slotProps?.closeIcon?.className)
+							}
+						})
+					}), hasTitleOrDescription && /* @__PURE__ */ jsxs(VStack, {
+						...slotProps?.titleDescriptionWrapper,
+						className: cx(classNames.titleDescriptionWrapper, slotProps?.titleDescriptionWrapper?.className),
+						children: [modalTitle || (titleProp ? /* @__PURE__ */ jsx(ModalTitle, { children: titleProp }) : null), modalDescription || (descriptionProp ? /* @__PURE__ */ jsx(ModalDescription, { children: descriptionProp }) : null)]
+					})]
+				}),
+				modalContent || (contentProp ? /* @__PURE__ */ jsx(ModalContent, { children: contentProp }) : /* @__PURE__ */ jsx(Box, { flexGrow: "1" })),
+				modalActions || (actionsProp ? /* @__PURE__ */ jsx(ModalActions, { children: actionsProp }) : null)
+			]
+		})
+	});
+};
+Modal.displayName = "Modal";
+//#endregion
+export { Modal };

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

@@ -0,0 +1,54 @@
+/*! © 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_components_HStack = require("../../HStack.cjs");
+const require_components_client_Modal_ModalContext = require("./ModalContext.cjs");
+const require_components_client_Modal_UDSModalConfigProvider = require("./UDSModalConfigProvider.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/client/Modal/ModalActions.tsx
+const ModalActions = ({ children, asChild = void 0, startContent, slotProps }) => {
+	const { size } = require_components_client_Modal_UDSModalConfigProvider.useModalConfig();
+	const { hasContent, shouldRenderHeader } = require_components_client_Modal_ModalContext.useInternalModalContext();
+	const classNames = {
+		actions: require_styles_styler.getStyles({
+			modalSizeSpacingHorizontal: size,
+			modalSizeActions: size,
+			flexDirection: "row-reverse",
+			justifyContent: "space-between",
+			alignItems: "center"
+		}),
+		actionsInner: require_styles_styler.getStyles({
+			flexDirection: "row-reverse",
+			alignItems: "center",
+			className: require_styles_styler.cx("gap-[inherit]")
+		}),
+		startContent: require_styles_styler.getStyles({
+			alignItems: "center",
+			className: require_styles_styler.cx("gap-[inherit]")
+		})
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_HStack.HStack, {
+		...slotProps?.root,
+		className: require_styles_styler.cx(classNames.actions, slotProps?.root?.className),
+		style: {
+			paddingTop: !hasContent && shouldRenderHeader ? 0 : void 0,
+			...slotProps?.root?.style
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_HStack.HStack, {
+			asChild,
+			...slotProps?.actionsInner,
+			className: require_styles_styler.cx(classNames.actionsInner, slotProps?.actionsInner?.className),
+			children
+		}), startContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_HStack.HStack, {
+			...slotProps?.startContent,
+			className: require_styles_styler.cx(classNames.startContent, slotProps?.startContent?.className),
+			children: startContent
+		})]
+	});
+};
+ModalActions.displayName = "ModalActions";
+ModalActions.__modalSlot = "actions";
+//#endregion
+exports.ModalActions = ModalActions;

package/dist/components/client/Modal/ModalActions.d.cts

@@ -0,0 +1,27 @@
+
+import { UniversalModalActionsProps } from "../../../types/dist/index.cjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Modal/ModalActions.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string | boolean;
+};
+type ModalActionsProps = UniversalModalActionsProps & {
+  slotProps?: {
+    root?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    actionsInner?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    startContent?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+  };
+};
+declare const ModalActions: {
+  ({
+    children,
+    asChild,
+    startContent,
+    slotProps
+  }: ModalActionsProps): _$react_jsx_runtime0.JSX.Element;
+  displayName: string;
+  __modalSlot: "actions";
+};
+//#endregion
+export { ModalActions, type ModalActionsProps };

package/dist/components/client/Modal/ModalActions.d.ts

@@ -0,0 +1,28 @@
+
+"use client";
+import { UniversalModalActionsProps } from "../../../types/dist/index.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Modal/ModalActions.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string | boolean;
+};
+type ModalActionsProps = UniversalModalActionsProps & {
+  slotProps?: {
+    root?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    actionsInner?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    startContent?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+  };
+};
+declare const ModalActions: {
+  ({
+    children,
+    asChild,
+    startContent,
+    slotProps
+  }: ModalActionsProps): _$react_jsx_runtime0.JSX.Element;
+  displayName: string;
+  __modalSlot: "actions";
+};
+//#endregion
+export { ModalActions, type ModalActionsProps };

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

@@ -0,0 +1,52 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { cx, getStyles } from "../../../styles/styler.js";
+import { HStack } from "../../HStack.js";
+import { useInternalModalContext } from "./ModalContext.js";
+import { useModalConfig } from "./UDSModalConfigProvider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/client/Modal/ModalActions.tsx
+const ModalActions = ({ children, asChild = void 0, startContent, slotProps }) => {
+	const { size } = useModalConfig();
+	const { hasContent, shouldRenderHeader } = useInternalModalContext();
+	const classNames = {
+		actions: getStyles({
+			modalSizeSpacingHorizontal: size,
+			modalSizeActions: size,
+			flexDirection: "row-reverse",
+			justifyContent: "space-between",
+			alignItems: "center"
+		}),
+		actionsInner: getStyles({
+			flexDirection: "row-reverse",
+			alignItems: "center",
+			className: cx("gap-[inherit]")
+		}),
+		startContent: getStyles({
+			alignItems: "center",
+			className: cx("gap-[inherit]")
+		})
+	};
+	return /* @__PURE__ */ jsxs(HStack, {
+		...slotProps?.root,
+		className: cx(classNames.actions, slotProps?.root?.className),
+		style: {
+			paddingTop: !hasContent && shouldRenderHeader ? 0 : void 0,
+			...slotProps?.root?.style
+		},
+		children: [/* @__PURE__ */ jsx(HStack, {
+			asChild,
+			...slotProps?.actionsInner,
+			className: cx(classNames.actionsInner, slotProps?.actionsInner?.className),
+			children
+		}), startContent && /* @__PURE__ */ jsx(HStack, {
+			...slotProps?.startContent,
+			className: cx(classNames.startContent, slotProps?.startContent?.className),
+			children: startContent
+		})]
+	});
+};
+ModalActions.displayName = "ModalActions";
+ModalActions.__modalSlot = "actions";
+//#endregion
+export { ModalActions };