@yahoo/uds 3.150.1-beta.1 → 3.152.0

package/dist/components/client/IconButton.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../../_virtual/_rolldown/runtime.cjs");
 const require_index = require("../../css-tokens/dist/index.cjs");
 const require_styles_styler = require("../../styles/styler.cjs");
+const require_utils_createSlot = require("../../utils/createSlot.cjs");
 const require_components_Icon = require("../Icon.cjs");
 const require_generateDefaultClassName = require("../../automated-config/dist/utils/generateDefaultClassName.cjs");
 require("./buttonConstants.cjs");
@@ -44,13 +45,15 @@ const defaultVariantIconClass = require_generateDefaultClassName.generateDefault
 * @related [Icon](https://uds.build/docs/components/icon), [Button](https://uds.build/docs/components/button), and [Pressable](https://uds.build/docs/components/pressable)
 *
 **/
-const IconButton = (0, react.forwardRef)(function IconButton({ variant, size, iconVariant, loading, disableEffects, name, slotProps, type = "button", htmlName, className, children, ...rest }, forwardedRef) {
+const IconButton = (0, react.forwardRef)(function IconButton({ variant, size, iconVariant, loading, disableEffects, name, asChild = false, slotProps, type = "button", htmlName, className, children, ...rest }, forwardedRef) {
 	const ref = (0, react.useRef)(null);
 	(0, react.useImperativeHandle)(forwardedRef, () => ref.current);
 	const { className: iconSlotClassName, ...iconSlotProps } = slotProps?.icon ?? {};
 	const prefersReducedMotion = (0, motion_react.useReducedMotion)();
 	const disableMotion = !!disableEffects || !!rest?.disabled;
 	const layoutVariant = (0, react.useMemo)(() => prefersReducedMotion ? "smooth" : "subtle", [prefersReducedMotion]);
+	const Slot = (0, react.useMemo)(() => require_utils_createSlot.createSlot(), []);
+	const MotionSlot = (0, react.useMemo)(() => motion_react.m.create(Slot), [Slot]);
 	const buttonVariants = (0, react.useMemo)(() => ({
 		rest: { scale: disableMotion ? 1 : `var(${require_index.BUTTON_SCALE_EFFECT_REST})` },
 		hover: { scale: disableMotion ? 1 : `var(${require_index.BUTTON_SCALE_EFFECT_HOVER})` },
@@ -78,6 +81,63 @@ const IconButton = (0, react.forwardRef)(function IconButton({ variant, size, ic
 		rootSizeClass,
 		rootVariantClass
 	]);
+	const iconContent = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(motion_react.AnimatePresence, {
+		initial: false,
+		mode: "popLayout",
+		children: [loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
+			variants: require_components_client_Button.loadingMotionVariants,
+			initial: "loading",
+			animate: "loading",
+			exit: "hide",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
+				size: "sm",
+				name: _yahoo_uds_icons.Progress,
+				variant: iconVariant,
+				color: "current",
+				className: styles.loadingIcon
+			})
+		}, "loading"), name && !loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
+			variants: require_components_client_Button.iconMotionVariants,
+			initial: "icon",
+			animate: "icon",
+			exit: "hide",
+			children: !asChild && children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
+				size: "sm",
+				name,
+				variant: iconVariant,
+				color: "current",
+				className: require_styles_styler.cx(styles.icon, iconSlotClassName),
+				...iconSlotProps
+			})
+		}, name.name)]
+	}), [
+		asChild,
+		children,
+		iconSlotClassName,
+		iconSlotProps,
+		iconVariant,
+		loading,
+		name,
+		styles
+	]);
+	if (asChild && (0, react.isValidElement)(children)) {
+		const childProps = children.props;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
+			layoutSpeed: "3",
+			layoutVariant,
+			reducedMotion: disableEffects ? "always" : "user",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MotionSlot, {
+				type,
+				className: styles.root,
+				initial: "icon",
+				variants: buttonVariants,
+				whileHover: "hover",
+				whileTap: "pressed",
+				...rest,
+				children: (0, react.cloneElement)(children, childProps, iconContent)
+			})
+		});
+	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
 		layoutSpeed: "3",
 		layoutVariant,
@@ -92,36 +152,7 @@ const IconButton = (0, react.forwardRef)(function IconButton({ variant, size, ic
 			whileHover: "hover",
 			whileTap: "pressed",
 			...rest,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(motion_react.AnimatePresence, {
-				initial: false,
-				mode: "popLayout",
-				children: [loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
-					variants: require_components_client_Button.loadingMotionVariants,
-					initial: "loading",
-					animate: "loading",
-					exit: "hide",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
-						size: "sm",
-						name: _yahoo_uds_icons.Progress,
-						variant: iconVariant,
-						color: "current",
-						className: styles.loadingIcon
-					})
-				}, "loading"), name && !loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
-					variants: require_components_client_Button.iconMotionVariants,
-					initial: "icon",
-					animate: "icon",
-					exit: "hide",
-					children: children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
-						size: "sm",
-						name,
-						variant: iconVariant,
-						color: "current",
-						className: require_styles_styler.cx(styles.icon, iconSlotClassName),
-						...iconSlotProps
-					})
-				}, name.name)]
-			})
+			children: iconContent
 		})
 	});
 });

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

@@ -1,6 +1,7 @@
 
 import { IconPropsWithSVGProps, UniversalIconButtonProps } from "../../tokens/types.cjs";
 import * as _$react from "react";
+import { ForwardRefExoticComponent } from "react";
 import { HTMLMotionProps } from "motion/react";
 
 //#region src/components/client/IconButton.d.ts
@@ -40,6 +41,6 @@ interface IconButtonProps extends HtmlButtonProps, UniversalIconButtonProps {
  * @related [Icon](https://uds.build/docs/components/icon), [Button](https://uds.build/docs/components/button), and [Pressable](https://uds.build/docs/components/pressable)
  *
  **/
-declare const IconButton: _$react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
+declare const IconButton: ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { IconButton, type IconButtonProps };

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

@@ -2,6 +2,7 @@
 "use client";
 import { IconPropsWithSVGProps, UniversalIconButtonProps } from "../../tokens/types.js";
 import * as _$react from "react";
+import { ForwardRefExoticComponent } from "react";
 import { HTMLMotionProps } from "motion/react";
 
 //#region src/components/client/IconButton.d.ts
@@ -41,6 +42,6 @@ interface IconButtonProps extends HtmlButtonProps, UniversalIconButtonProps {
  * @related [Icon](https://uds.build/docs/components/icon), [Button](https://uds.build/docs/components/button), and [Pressable](https://uds.build/docs/components/pressable)
  *
  **/
-declare const IconButton: _$react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
+declare const IconButton: ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { IconButton, type IconButtonProps };

package/dist/components/client/IconButton.js

@@ -2,13 +2,14 @@
 "use client";
 import { BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST } from "../../css-tokens/dist/index.js";
 import { cx, getStyles } from "../../styles/styler.js";
+import { createSlot } from "../../utils/createSlot.js";
 import { Icon } from "../Icon.js";
 import { generateDefaultClassName } from "../../automated-config/dist/utils/generateDefaultClassName.js";
 import "./buttonConstants.js";
 import { SpringMotionConfig } from "./SpringMotionConfig.js";
 import { iconMotionVariants, loadingMotionVariants } from "./Button.js";
 import { Progress } from "@yahoo/uds-icons";
-import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
+import { cloneElement, forwardRef, isValidElement, useImperativeHandle, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, m, useReducedMotion } from "motion/react";
 //#region src/components/client/IconButton.tsx
@@ -42,13 +43,15 @@ const defaultVariantIconClass = generateDefaultClassName("button", "variant", "i
 * @related [Icon](https://uds.build/docs/components/icon), [Button](https://uds.build/docs/components/button), and [Pressable](https://uds.build/docs/components/pressable)
 *
 **/
-const IconButton = forwardRef(function IconButton({ variant, size, iconVariant, loading, disableEffects, name, slotProps, type = "button", htmlName, className, children, ...rest }, forwardedRef) {
+const IconButton = forwardRef(function IconButton({ variant, size, iconVariant, loading, disableEffects, name, asChild = false, slotProps, type = "button", htmlName, className, children, ...rest }, forwardedRef) {
 	const ref = useRef(null);
 	useImperativeHandle(forwardedRef, () => ref.current);
 	const { className: iconSlotClassName, ...iconSlotProps } = slotProps?.icon ?? {};
 	const prefersReducedMotion = useReducedMotion();
 	const disableMotion = !!disableEffects || !!rest?.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})` },
@@ -76,6 +79,63 @@ const IconButton = forwardRef(function IconButton({ variant, size, iconVariant,
 		rootSizeClass,
 		rootVariantClass
 	]);
+	const iconContent = useMemo(() => /* @__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: styles.loadingIcon
+			})
+		}, "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: cx(styles.icon, iconSlotClassName),
+				...iconSlotProps
+			})
+		}, name.name)]
+	}), [
+		asChild,
+		children,
+		iconSlotClassName,
+		iconSlotProps,
+		iconVariant,
+		loading,
+		name,
+		styles
+	]);
+	if (asChild && isValidElement(children)) {
+		const childProps = children.props;
+		return /* @__PURE__ */ jsx(SpringMotionConfig, {
+			layoutSpeed: "3",
+			layoutVariant,
+			reducedMotion: disableEffects ? "always" : "user",
+			children: /* @__PURE__ */ jsx(MotionSlot, {
+				type,
+				className: styles.root,
+				initial: "icon",
+				variants: buttonVariants,
+				whileHover: "hover",
+				whileTap: "pressed",
+				...rest,
+				children: cloneElement(children, childProps, iconContent)
+			})
+		});
+	}
 	return /* @__PURE__ */ jsx(SpringMotionConfig, {
 		layoutSpeed: "3",
 		layoutVariant,
@@ -90,36 +150,7 @@ const IconButton = forwardRef(function IconButton({ variant, size, iconVariant,
 			whileHover: "hover",
 			whileTap: "pressed",
 			...rest,
-			children: /* @__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: styles.loadingIcon
-					})
-				}, "loading"), name && !loading && /* @__PURE__ */ jsx(m.span, {
-					variants: iconMotionVariants,
-					initial: "icon",
-					animate: "icon",
-					exit: "hide",
-					children: children || /* @__PURE__ */ jsx(Icon, {
-						size: "sm",
-						name,
-						variant: iconVariant,
-						color: "current",
-						className: cx(styles.icon, iconSlotClassName),
-						...iconSlotProps
-					})
-				}, name.name)]
-			})
+			children: iconContent
 		})
 	});
 });

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

@@ -0,0 +1,52 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../_virtual/_rolldown/runtime.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");
+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_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;
+	(0, react.useEffect)(() => {
+		if (!slot.closing) return;
+		const ownerId = slot.ownerId;
+		const timer = window.setTimeout(() => require_components_client_Modal_modalStore.removeModalEntry(ownerId), exitDuration);
+		return () => window.clearTimeout(timer);
+	}, [
+		slot.closing,
+		slot.ownerId,
+		exitDuration
+	]);
+	const { onClose, title, description, content, actions, ...modalProps } = slot.props;
+	const { actionStartContent } = slot.options;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_client_Modal_Modal.Modal, {
+		...modalProps,
+		open: slot.open,
+		onClose: (event) => {
+			onClose?.(event);
+			require_components_client_Modal_modalStore.closeModalEntry(slot.ownerId);
+		},
+		children: [
+			title != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Modal_ModalTitle.ModalTitle, { children: title }) : null,
+			description != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Modal_ModalDescription.ModalDescription, { children: description }) : null,
+			content != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Modal_ModalContent.ModalContent, { children: content }) : null,
+			actions != null || actionStartContent != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Modal_ModalActions.ModalActions, {
+				startContent: actionStartContent,
+				children: actions
+			}) : null
+		]
+	});
+};
+ManagedModal.displayName = "ManagedModal";
+//#endregion
+exports.ManagedModal = ManagedModal;

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

@@ -0,0 +1,16 @@
+
+import { ModalSlotState } from "./modalStore.cjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Modal/ManagedModal.d.ts
+interface ManagedModalProps {
+  slot: ModalSlotState;
+}
+declare const ManagedModal: {
+  ({
+    slot
+  }: ManagedModalProps): _$react_jsx_runtime0.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { ManagedModal };

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

@@ -0,0 +1,17 @@
+
+"use client";
+import { ModalSlotState } from "./modalStore.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Modal/ManagedModal.d.ts
+interface ManagedModalProps {
+  slot: ModalSlotState;
+}
+declare const ManagedModal: {
+  ({
+    slot
+  }: ManagedModalProps): _$react_jsx_runtime0.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { ManagedModal };

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

@@ -0,0 +1,50 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { closeModalEntry, removeModalEntry } from "./modalStore.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 { 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;
+	useEffect(() => {
+		if (!slot.closing) return;
+		const ownerId = slot.ownerId;
+		const timer = window.setTimeout(() => removeModalEntry(ownerId), exitDuration);
+		return () => window.clearTimeout(timer);
+	}, [
+		slot.closing,
+		slot.ownerId,
+		exitDuration
+	]);
+	const { onClose, title, description, content, actions, ...modalProps } = slot.props;
+	const { actionStartContent } = slot.options;
+	return /* @__PURE__ */ jsxs(Modal, {
+		...modalProps,
+		open: slot.open,
+		onClose: (event) => {
+			onClose?.(event);
+			closeModalEntry(slot.ownerId);
+		},
+		children: [
+			title != null ? /* @__PURE__ */ jsx(ModalTitle, { children: title }) : null,
+			description != null ? /* @__PURE__ */ jsx(ModalDescription, { children: description }) : null,
+			content != null ? /* @__PURE__ */ jsx(ModalContent, { children: content }) : null,
+			actions != null || actionStartContent != null ? /* @__PURE__ */ jsx(ModalActions, {
+				startContent: actionStartContent,
+				children: actions
+			}) : null
+		]
+	});
+};
+ManagedModal.displayName = "ManagedModal";
+//#endregion
+export { ManagedModal };

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

@@ -0,0 +1,17 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_components_client_Modal_modalStore = require("./modalStore.cjs");
+const require_components_client_Modal_ManagedModal = require("./ManagedModal.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/client/Modal/ModalPortal.tsx
+const ModalPortal = () => {
+	const slot = (0, react.useSyncExternalStore)(require_components_client_Modal_modalStore.subscribe, require_components_client_Modal_modalStore.getSnapshot, require_components_client_Modal_modalStore.getSnapshot);
+	if (!slot) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Modal_ManagedModal.ManagedModal, { slot }, slot.slotId);
+};
+ModalPortal.displayName = "ModalPortal";
+//#endregion
+exports.ModalPortal = ModalPortal;

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

@@ -0,0 +1,10 @@
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Modal/ModalPortal.d.ts
+declare const ModalPortal: {
+  (): _$react_jsx_runtime0.JSX.Element | null;
+  displayName: string;
+};
+//#endregion
+export { ModalPortal };

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

@@ -0,0 +1,11 @@
+
+"use client";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Modal/ModalPortal.d.ts
+declare const ModalPortal: {
+  (): _$react_jsx_runtime0.JSX.Element | null;
+  displayName: string;
+};
+//#endregion
+export { ModalPortal };

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

@@ -0,0 +1,15 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { getSnapshot, subscribe } from "./modalStore.js";
+import { ManagedModal } from "./ManagedModal.js";
+import { useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/client/Modal/ModalPortal.tsx
+const ModalPortal = () => {
+	const slot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+	if (!slot) return null;
+	return /* @__PURE__ */ jsx(ManagedModal, { slot }, slot.slotId);
+};
+ModalPortal.displayName = "ModalPortal";
+//#endregion
+export { ModalPortal };

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

@@ -0,0 +1,18 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_components_client_Modal_modalStore = require("./modalStore.cjs");
+//#region src/components/client/Modal/createModal.tsx
+function createModal(args) {
+	const id = require_components_client_Modal_modalStore.addModalEntry(args);
+	return {
+		update(next) {
+			require_components_client_Modal_modalStore.updateModalEntry(id, next);
+		},
+		close() {
+			require_components_client_Modal_modalStore.closeModalEntry(id);
+		}
+	};
+}
+//#endregion
+exports.createModal = createModal;

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

@@ -0,0 +1,11 @@
+
+import { CreateModalArgs } from "./modalStore.cjs";
+
+//#region src/components/client/Modal/createModal.d.ts
+interface ModalAPI {
+  update(args: Partial<CreateModalArgs>): void;
+  close(): void;
+}
+declare function createModal(args: CreateModalArgs): ModalAPI;
+//#endregion
+export { type ModalAPI, createModal };

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

@@ -0,0 +1,12 @@
+
+"use client";
+import { CreateModalArgs } from "./modalStore.js";
+
+//#region src/components/client/Modal/createModal.d.ts
+interface ModalAPI {
+  update(args: Partial<CreateModalArgs>): void;
+  close(): void;
+}
+declare function createModal(args: CreateModalArgs): ModalAPI;
+//#endregion
+export { type ModalAPI, createModal };

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

@@ -0,0 +1,17 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { addModalEntry, closeModalEntry, updateModalEntry } from "./modalStore.js";
+//#region src/components/client/Modal/createModal.tsx
+function createModal(args) {
+	const id = addModalEntry(args);
+	return {
+		update(next) {
+			updateModalEntry(id, next);
+		},
+		close() {
+			closeModalEntry(id);
+		}
+	};
+}
+//#endregion
+export { createModal };

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

@@ -1,16 +1,20 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_components_client_Modal_createModal = require("./createModal.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_Modal = require("./Modal.cjs");
+const require_components_client_Modal_ModalPortal = require("./ModalPortal.cjs");
 exports.Modal = require_components_client_Modal_Modal.Modal;
 exports.ModalActions = require_components_client_Modal_ModalActions.ModalActions;
 exports.ModalContent = require_components_client_Modal_ModalContent.ModalContent;
 exports.ModalDescription = require_components_client_Modal_ModalDescription.ModalDescription;
+exports.ModalPortal = require_components_client_Modal_ModalPortal.ModalPortal;
 exports.ModalTitle = require_components_client_Modal_ModalTitle.ModalTitle;
 exports.UDSModalConfigProvider = require_components_client_Modal_UDSModalConfigProvider.UDSModalConfigProvider;
+exports.createModal = require_components_client_Modal_createModal.createModal;
 exports.useModalConfig = require_components_client_Modal_UDSModalConfigProvider.useModalConfig;

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

@@ -1,8 +1,10 @@
 
+import { ModalAPI, createModal } from "./createModal.cjs";
 import { ModalActions, ModalActionsProps } from "./ModalActions.cjs";
 import { ModalContent, ModalContentProps } from "./ModalContent.cjs";
 import { ModalDescription, ModalDescriptionProps } from "./ModalDescription.cjs";
+import { ModalPortal } from "./ModalPortal.cjs";
 import { ModalTitle, ModalTitleProps } from "./ModalTitle.cjs";
 import { UDSModalConfigProvider, UDSModalConfigProviderProps, useModalConfig } from "./UDSModalConfigProvider.cjs";
 import { Modal, ModalProps } from "./Modal.cjs";
-export { Modal, ModalActions, type ModalActionsProps, ModalContent, type ModalContentProps, ModalDescription, type ModalDescriptionProps, type ModalProps, ModalTitle, type ModalTitleProps, UDSModalConfigProvider, type UDSModalConfigProviderProps, useModalConfig };
+export { Modal, type ModalAPI, ModalActions, type ModalActionsProps, ModalContent, type ModalContentProps, ModalDescription, type ModalDescriptionProps, ModalPortal, type ModalProps, ModalTitle, type ModalTitleProps, UDSModalConfigProvider, type UDSModalConfigProviderProps, createModal, useModalConfig };

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

@@ -1,9 +1,11 @@
 
 "use client";
+import { ModalAPI, createModal } from "./createModal.js";
 import { ModalActions, ModalActionsProps } from "./ModalActions.js";
 import { ModalContent, ModalContentProps } from "./ModalContent.js";
 import { ModalDescription, ModalDescriptionProps } from "./ModalDescription.js";
+import { ModalPortal } from "./ModalPortal.js";
 import { ModalTitle, ModalTitleProps } from "./ModalTitle.js";
 import { UDSModalConfigProvider, UDSModalConfigProviderProps, useModalConfig } from "./UDSModalConfigProvider.js";
 import { Modal, ModalProps } from "./Modal.js";
-export { Modal, ModalActions, type ModalActionsProps, ModalContent, type ModalContentProps, ModalDescription, type ModalDescriptionProps, type ModalProps, ModalTitle, type ModalTitleProps, UDSModalConfigProvider, type UDSModalConfigProviderProps, useModalConfig };
+export { Modal, type ModalAPI, ModalActions, type ModalActionsProps, ModalContent, type ModalContentProps, ModalDescription, type ModalDescriptionProps, ModalPortal, type ModalProps, ModalTitle, type ModalTitleProps, UDSModalConfigProvider, type UDSModalConfigProviderProps, createModal, useModalConfig };

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

@@ -1,9 +1,11 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
+import { createModal } from "./createModal.js";
 import { UDSModalConfigProvider, 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 { Modal } from "./Modal.js";
-export { Modal, ModalActions, ModalContent, ModalDescription, ModalTitle, UDSModalConfigProvider, useModalConfig };
+import { ModalPortal } from "./ModalPortal.js";
+export { Modal, ModalActions, ModalContent, ModalDescription, ModalPortal, ModalTitle, UDSModalConfigProvider, createModal, useModalConfig };