@yahoo/uds 3.159.1 → 3.160.0

package/dist/components/client/Button/ButtonBase.cjs

@@ -0,0 +1,120 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_styles_styler = require("../../../styles/styler.cjs");
+const require_utils_createSlot = require("../../../utils/createSlot.cjs");
+const require_generateDefaultClassName = require("../../../automated-config/dist/utils/generateDefaultClassName.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/client/Button/ButtonBase.tsx
+const defaultVariantRootClass = require_generateDefaultClassName.generateDefaultClassName("button", "variant", "root");
+const defaultVariantIconClass = require_generateDefaultClassName.generateDefaultClassName("button", "variant", "icon");
+const defaultSizeRootClass = require_generateDefaultClassName.generateDefaultClassName("button", "size", "root");
+const defaultSizeIconClass = require_generateDefaultClassName.generateDefaultClassName("button", "size", "icon");
+const ButtonBase = (0, react.forwardRef)(function ButtonBase({ size, variant, startIcon, endIcon, iconVariant, loading, disableEffects, children, asChild = false, slotProps, type = "button", className, width, renderStartContent, renderEndContent, renderRoot, ...rest }, forwardedRef) {
+	const { className: startIconClassName, ...startIconSlotProps } = slotProps?.startIcon ?? {};
+	const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
+	const { className: contentClassName, ...contentSlotProps } = slotProps?.content ?? {};
+	const gapVariant = loading || startIcon || endIcon ? "withIcon" : "withoutIcon";
+	const Slot = (0, react.useMemo)(() => require_utils_createSlot.createSlot(), []);
+	const rootSizeClass = (0, react.useMemo)(() => size ? require_styles_styler.getStyles({ buttonSizeRoot: 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({ buttonSizeIcon: 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.getStyles({
+			width,
+			className: require_styles_styler.cx([
+				"uds-ring",
+				"uds-hit-target",
+				"inline-flex max-w-full overflow-hidden justify-center items-center whitespace-nowrap select-none",
+				"[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",
+				gapVariant === "withIcon" && "uds-button-with-gap",
+				className
+			])
+		}),
+		iconContainer: require_styles_styler.cx(["flex shrink-0 overflow-clip uds-button-icon-container"]),
+		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
+		]) }),
+		content: require_styles_styler.cx(["min-w-0 truncate"])
+	}), [
+		className,
+		disableEffects,
+		gapVariant,
+		iconSizeClass,
+		iconVariantClass,
+		loading,
+		rest?.disabled,
+		rootSizeClass,
+		rootVariantClass,
+		width
+	]);
+	const iconRenderArgs = (0, react.useMemo)(() => ({
+		iconVariant,
+		loading,
+		startIcon,
+		endIcon,
+		iconClassName: styles.icon,
+		loadingIconClassName: styles.loadingIcon,
+		iconContainerClassName: styles.iconContainer,
+		startIconClassName,
+		endIconClassName,
+		startIconSlotProps,
+		endIconSlotProps
+	}), [
+		endIcon,
+		endIconClassName,
+		endIconSlotProps,
+		iconVariant,
+		loading,
+		startIcon,
+		startIconClassName,
+		startIconSlotProps,
+		styles.icon,
+		styles.iconContainer,
+		styles.loadingIcon
+	]);
+	return renderRoot({
+		asChild,
+		Slot,
+		children,
+		buttonRef: forwardedRef,
+		type,
+		rootClassName: styles.root,
+		rest,
+		contentClassName: require_styles_styler.cx(styles.content, contentClassName),
+		contentSlotProps,
+		startContent: renderStartContent(iconRenderArgs),
+		endContent: renderEndContent(iconRenderArgs)
+	});
+});
+ButtonBase.displayName = "ButtonBase";
+function renderButtonChildren(children, childProps, startContent, contentClassName, contentSlotProps, endContent) {
+	return (0, react.cloneElement)(children, childProps, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		startContent,
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: contentClassName,
+			...contentSlotProps,
+			children: children.props.children
+		}),
+		endContent
+	] }));
+}
+//#endregion
+exports.ButtonBase = ButtonBase;
+exports.renderButtonChildren = renderButtonChildren;

package/dist/components/client/Button/ButtonBase.d.cts

@@ -0,0 +1,52 @@
+
+import { UniversalButtonProps } from "../../../types/dist/index.cjs";
+import { IconPropsWithSVGProps } from "../../../tokens/types.cjs";
+import React, { ForwardRefExoticComponent } from "react";
+
+//#region src/components/client/Button/ButtonBase.d.ts
+type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface ButtonProps extends HtmlButtonProps, UniversalButtonProps {
+  slotProps?: {
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    content?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
+  };
+}
+type ButtonIconRenderArgs = {
+  iconVariant: ButtonProps['iconVariant'];
+  loading?: boolean;
+  startIcon?: ButtonProps['startIcon'];
+  endIcon?: ButtonProps['endIcon'];
+  iconClassName: string;
+  loadingIconClassName: string;
+  iconContainerClassName: string;
+  startIconClassName?: string;
+  endIconClassName?: string;
+  startIconSlotProps: Partial<IconPropsWithSVGProps & DataAttributes>;
+  endIconSlotProps: Partial<IconPropsWithSVGProps & DataAttributes>;
+};
+type ButtonRootRenderArgs = {
+  asChild: boolean;
+  Slot: ForwardRefExoticComponent<HtmlButtonProps>;
+  children: React.ReactNode;
+  buttonRef: React.ForwardedRef<HTMLButtonElement>;
+  type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  rootClassName: string;
+  rest: Omit<ButtonProps, 'children' | 'slotProps' | 'asChild' | 'type' | 'className'>;
+  contentClassName: string;
+  contentSlotProps: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
+  startContent: React.ReactNode;
+  endContent: React.ReactNode;
+};
+interface ButtonBaseProps extends ButtonProps {
+  renderStartContent: (args: ButtonIconRenderArgs) => React.ReactNode;
+  renderEndContent: (args: ButtonIconRenderArgs) => React.ReactNode;
+  renderRoot: (args: ButtonRootRenderArgs) => React.ReactNode;
+}
+declare const ButtonBase: ForwardRefExoticComponent<ButtonBaseProps & React.RefAttributes<HTMLButtonElement>>;
+declare function renderButtonChildren(children: React.ReactNode, childProps: Record<string, unknown>, startContent: React.ReactNode, contentClassName: string, contentSlotProps: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>, endContent: React.ReactNode): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+//#endregion
+export { ButtonBase, type ButtonProps, type ButtonRootRenderArgs, renderButtonChildren };

package/dist/components/client/Button/ButtonBase.d.ts

@@ -0,0 +1,53 @@
+
+"use client";
+import { UniversalButtonProps } from "../../../types/dist/index.js";
+import { IconPropsWithSVGProps } from "../../../tokens/types.js";
+import React, { ForwardRefExoticComponent } from "react";
+
+//#region src/components/client/Button/ButtonBase.d.ts
+type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface ButtonProps extends HtmlButtonProps, UniversalButtonProps {
+  slotProps?: {
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    content?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
+  };
+}
+type ButtonIconRenderArgs = {
+  iconVariant: ButtonProps['iconVariant'];
+  loading?: boolean;
+  startIcon?: ButtonProps['startIcon'];
+  endIcon?: ButtonProps['endIcon'];
+  iconClassName: string;
+  loadingIconClassName: string;
+  iconContainerClassName: string;
+  startIconClassName?: string;
+  endIconClassName?: string;
+  startIconSlotProps: Partial<IconPropsWithSVGProps & DataAttributes>;
+  endIconSlotProps: Partial<IconPropsWithSVGProps & DataAttributes>;
+};
+type ButtonRootRenderArgs = {
+  asChild: boolean;
+  Slot: ForwardRefExoticComponent<HtmlButtonProps>;
+  children: React.ReactNode;
+  buttonRef: React.ForwardedRef<HTMLButtonElement>;
+  type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  rootClassName: string;
+  rest: Omit<ButtonProps, 'children' | 'slotProps' | 'asChild' | 'type' | 'className'>;
+  contentClassName: string;
+  contentSlotProps: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
+  startContent: React.ReactNode;
+  endContent: React.ReactNode;
+};
+interface ButtonBaseProps extends ButtonProps {
+  renderStartContent: (args: ButtonIconRenderArgs) => React.ReactNode;
+  renderEndContent: (args: ButtonIconRenderArgs) => React.ReactNode;
+  renderRoot: (args: ButtonRootRenderArgs) => React.ReactNode;
+}
+declare const ButtonBase: ForwardRefExoticComponent<ButtonBaseProps & React.RefAttributes<HTMLButtonElement>>;
+declare function renderButtonChildren(children: React.ReactNode, childProps: Record<string, unknown>, startContent: React.ReactNode, contentClassName: string, contentSlotProps: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>, endContent: React.ReactNode): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+//#endregion
+export { ButtonBase, type ButtonProps, type ButtonRootRenderArgs, renderButtonChildren };

package/dist/components/client/Button/ButtonBase.js

@@ -0,0 +1,116 @@
+/*! © 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";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/client/Button/ButtonBase.tsx
+const defaultVariantRootClass = generateDefaultClassName("button", "variant", "root");
+const defaultVariantIconClass = generateDefaultClassName("button", "variant", "icon");
+const defaultSizeRootClass = generateDefaultClassName("button", "size", "root");
+const defaultSizeIconClass = generateDefaultClassName("button", "size", "icon");
+const ButtonBase = forwardRef(function ButtonBase({ size, variant, startIcon, endIcon, iconVariant, loading, disableEffects, children, asChild = false, slotProps, type = "button", className, width, renderStartContent, renderEndContent, renderRoot, ...rest }, forwardedRef) {
+	const { className: startIconClassName, ...startIconSlotProps } = slotProps?.startIcon ?? {};
+	const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
+	const { className: contentClassName, ...contentSlotProps } = slotProps?.content ?? {};
+	const gapVariant = loading || startIcon || endIcon ? "withIcon" : "withoutIcon";
+	const Slot = useMemo(() => createSlot(), []);
+	const rootSizeClass = useMemo(() => size ? getStyles({ buttonSizeRoot: size }) : defaultSizeRootClass, [size]);
+	const rootVariantClass = useMemo(() => variant ? getStyles({ buttonVariantRoot: variant }) : defaultVariantRootClass, [variant]);
+	const iconSizeClass = useMemo(() => size ? getStyles({ buttonSizeIcon: size }) : defaultSizeIconClass, [size]);
+	const iconVariantClass = useMemo(() => variant ? getStyles({ buttonVariantIcon: variant }) : defaultVariantIconClass, [variant]);
+	const styles = useMemo(() => ({
+		root: getStyles({
+			width,
+			className: cx([
+				"uds-ring",
+				"uds-hit-target",
+				"inline-flex max-w-full overflow-hidden justify-center items-center whitespace-nowrap select-none",
+				"[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",
+				gapVariant === "withIcon" && "uds-button-with-gap",
+				className
+			])
+		}),
+		iconContainer: cx(["flex shrink-0 overflow-clip uds-button-icon-container"]),
+		icon: getStyles({ className: cx([iconSizeClass, iconVariantClass]) }),
+		loadingIcon: getStyles({ className: cx([
+			"animate-spin",
+			iconSizeClass,
+			iconVariantClass
+		]) }),
+		content: cx(["min-w-0 truncate"])
+	}), [
+		className,
+		disableEffects,
+		gapVariant,
+		iconSizeClass,
+		iconVariantClass,
+		loading,
+		rest?.disabled,
+		rootSizeClass,
+		rootVariantClass,
+		width
+	]);
+	const iconRenderArgs = useMemo(() => ({
+		iconVariant,
+		loading,
+		startIcon,
+		endIcon,
+		iconClassName: styles.icon,
+		loadingIconClassName: styles.loadingIcon,
+		iconContainerClassName: styles.iconContainer,
+		startIconClassName,
+		endIconClassName,
+		startIconSlotProps,
+		endIconSlotProps
+	}), [
+		endIcon,
+		endIconClassName,
+		endIconSlotProps,
+		iconVariant,
+		loading,
+		startIcon,
+		startIconClassName,
+		startIconSlotProps,
+		styles.icon,
+		styles.iconContainer,
+		styles.loadingIcon
+	]);
+	return renderRoot({
+		asChild,
+		Slot,
+		children,
+		buttonRef: forwardedRef,
+		type,
+		rootClassName: styles.root,
+		rest,
+		contentClassName: cx(styles.content, contentClassName),
+		contentSlotProps,
+		startContent: renderStartContent(iconRenderArgs),
+		endContent: renderEndContent(iconRenderArgs)
+	});
+});
+ButtonBase.displayName = "ButtonBase";
+function renderButtonChildren(children, childProps, startContent, contentClassName, contentSlotProps, endContent) {
+	return cloneElement(children, childProps, /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		startContent,
+		/* @__PURE__ */ jsx("span", {
+			className: contentClassName,
+			...contentSlotProps,
+			children: children.props.children
+		}),
+		endContent
+	] }));
+}
+//#endregion
+export { ButtonBase, renderButtonChildren };

package/dist/components/client/{buttonConstants.cjs → Button/buttonConstants.cjs}

@@ -1,7 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-//#region src/components/client/buttonConstants.ts
+//#region src/components/client/Button/buttonConstants.ts
 /** The icon size used for icons in Button and IconButton components */
 const buttonIconSvgSize = "sm";
 //#endregion

package/dist/components/client/Button/buttonConstants.d.cts

@@ -0,0 +1,7 @@
+
+import { ButtonSize } from "../../../types/dist/index.cjs";
+//#region src/components/client/Button/buttonConstants.d.ts
+/** The icon size used for icons in Button and IconButton components */
+declare const buttonIconSvgSize: ButtonSize;
+//#endregion
+export { buttonIconSvgSize };

package/dist/components/client/Button/buttonConstants.d.ts

@@ -0,0 +1,8 @@
+
+"use client";
+import { ButtonSize } from "../../../types/dist/index.js";
+//#region src/components/client/Button/buttonConstants.d.ts
+/** The icon size used for icons in Button and IconButton components */
+declare const buttonIconSvgSize: ButtonSize;
+//#endregion
+export { buttonIconSvgSize };

package/dist/components/client/{buttonConstants.js → Button/buttonConstants.js}

@@ -1,6 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
-//#region src/components/client/buttonConstants.ts
+//#region src/components/client/Button/buttonConstants.ts
 /** The icon size used for icons in Button and IconButton components */
 const buttonIconSvgSize = "sm";
 //#endregion

package/dist/components/client/Button/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_Button_ButtonBase = require("./ButtonBase.cjs");
+const require_components_client_Button_Button = require("./Button.cjs");
+exports.Button = require_components_client_Button_Button.Button;
+exports.ButtonBase = require_components_client_Button_ButtonBase.ButtonBase;
+exports.iconMotionVariants = require_components_client_Button_Button.iconMotionVariants;
+exports.loadingMotionVariants = require_components_client_Button_Button.loadingMotionVariants;
+exports.renderButtonChildren = require_components_client_Button_ButtonBase.renderButtonChildren;

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

@@ -0,0 +1,4 @@
+
+import { ButtonBase, ButtonRootRenderArgs, renderButtonChildren } from "./ButtonBase.cjs";
+import { Button, ButtonProps, iconMotionVariants, loadingMotionVariants } from "./Button.cjs";
+export { Button, ButtonBase, type ButtonProps, type ButtonRootRenderArgs, iconMotionVariants, loadingMotionVariants, renderButtonChildren };

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

@@ -0,0 +1,5 @@
+
+"use client";
+import { ButtonBase, ButtonRootRenderArgs, renderButtonChildren } from "./ButtonBase.js";
+import { Button, ButtonProps, iconMotionVariants, loadingMotionVariants } from "./Button.js";
+export { Button, ButtonBase, type ButtonProps, type ButtonRootRenderArgs, iconMotionVariants, loadingMotionVariants, renderButtonChildren };

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

@@ -0,0 +1,5 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { ButtonBase, renderButtonChildren } from "./ButtonBase.js";
+import { Button, iconMotionVariants, loadingMotionVariants } from "./Button.js";
+export { Button, ButtonBase, iconMotionVariants, loadingMotionVariants, renderButtonChildren };

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

@@ -0,0 +1,104 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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_components_client_SpringMotionConfig = require("../SpringMotionConfig.cjs");
+require("../Button/buttonConstants.cjs");
+const require_components_client_Button_Button = require("../Button/Button.cjs");
+const require_components_client_IconButton_IconButtonBase = require("./IconButtonBase.cjs");
+let _yahoo_uds_icons = require("@yahoo/uds-icons");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let motion_react = require("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 = (0, react.forwardRef)(function IconButton(props, forwardedRef) {
+	const prefersReducedMotion = (0, motion_react.useReducedMotion)();
+	const disableMotion = !!props.disableEffects || !!props.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})` },
+		pressed: { scale: disableMotion ? 1 : `var(${require_index.BUTTON_SCALE_EFFECT_PRESSED})` }
+	}), [disableMotion]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_IconButton_IconButtonBase.IconButtonBase, {
+		...props,
+		ref: forwardedRef,
+		renderIconContent: ({ asChild, loading, name, iconVariant, children, iconClassName, loadingIconClassName, iconSlotClassName, iconSlotProps }) => /* @__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_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: loadingIconClassName
+				})
+			}, "loading"), name && !loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
+				variants: require_components_client_Button_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: [iconClassName, iconSlotClassName].filter(Boolean).join(" "),
+					...iconSlotProps
+				})
+			}, name.name)]
+		}),
+		renderRoot: ({ asChild, children, buttonRef, type, htmlName, rootClassName, rest, iconContent }) => {
+			if (asChild && (0, react.isValidElement)(children)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
+				layoutSpeed: "3",
+				layoutVariant,
+				reducedMotion: props.disableEffects ? "always" : "user",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MotionSlot, {
+					type,
+					className: rootClassName,
+					initial: "icon",
+					variants: buttonVariants,
+					whileHover: "hover",
+					whileTap: "pressed",
+					...rest,
+					children: require_components_client_IconButton_IconButtonBase.renderIconButtonAsChild(children, iconContent)
+				})
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
+				layoutSpeed: "3",
+				layoutVariant,
+				reducedMotion: props.disableEffects ? "always" : "user",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.button, {
+					ref: buttonRef,
+					type,
+					className: rootClassName,
+					name: htmlName,
+					initial: "icon",
+					variants: buttonVariants,
+					whileHover: "hover",
+					whileTap: "pressed",
+					...rest,
+					children: iconContent
+				})
+			});
+		}
+	});
+});
+IconButton.displayName = "IconButton";
+//#endregion
+exports.IconButton = IconButton;

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

@@ -0,0 +1,17 @@
+
+import { IconButtonProps as IconButtonProps$1 } from "./IconButtonBase.cjs";
+import * as _$react from "react";
+import { ForwardRefExoticComponent } from "react";
+import { HTMLMotionProps } from "motion/react";
+
+//#region src/components/client/IconButton/IconButton.d.ts
+type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'> & Omit<HTMLMotionProps<'button'>, 'name'>;
+type IconButtonProps = IconButtonProps$1 & HtmlButtonProps;
+/**
+ * **⚙️️ An icon button element that can be used to trigger an action**
+ *
+ * @componentType Client component
+ */
+declare const IconButton: ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { IconButton, type IconButtonProps };

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

@@ -0,0 +1,18 @@
+
+"use client";
+import { IconButtonProps as IconButtonProps$1 } from "./IconButtonBase.js";
+import * as _$react from "react";
+import { ForwardRefExoticComponent } from "react";
+import { HTMLMotionProps } from "motion/react";
+
+//#region src/components/client/IconButton/IconButton.d.ts
+type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'> & Omit<HTMLMotionProps<'button'>, 'name'>;
+type IconButtonProps = IconButtonProps$1 & HtmlButtonProps;
+/**
+ * **⚙️️ An icon button element that can be used to trigger an action**
+ *
+ * @componentType Client component
+ */
+declare const IconButton: ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { IconButton, type IconButtonProps };

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

@@ -0,0 +1,102 @@
+/*! © 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 { 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, useReducedMotion } 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 = useReducedMotion();
+	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 };