@yahoo/uds 3.66.0 → 3.67.0-beta.1

package/dist/components/client/Chip/ChipButton.d.cts

@@ -0,0 +1,13 @@
+import { UniversalChipButtonProps } from "../../../tokens/types.cjs";
+import "../../../tokens/index.cjs";
+import { ChipBaseProps } from "./ChipBase.cjs";
+import React from "react";
+
+//#region src/components/client/Chip/ChipButton.d.ts
+type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onToggle' | 'label'>;
+interface ChipButtonProps extends HtmlDivProps, Omit<UniversalChipButtonProps, 'type'> {
+  slotProps?: ChipBaseProps['slotProps'];
+}
+declare const ChipButton: React.ForwardRefExoticComponent<ChipButtonProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ChipButton, type ChipButtonProps };

package/dist/components/client/Chip/ChipButton.d.ts

@@ -0,0 +1,13 @@
+import { UniversalChipButtonProps } from "../../../tokens/types.js";
+import "../../../tokens/index.js";
+import { ChipBaseProps } from "./ChipBase.js";
+import React from "react";
+
+//#region src/components/client/Chip/ChipButton.d.ts
+type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onToggle' | 'label'>;
+interface ChipButtonProps extends HtmlDivProps, Omit<UniversalChipButtonProps, 'type'> {
+  slotProps?: ChipBaseProps['slotProps'];
+}
+declare const ChipButton: React.ForwardRefExoticComponent<ChipButtonProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ChipButton, type ChipButtonProps };

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

@@ -0,0 +1,34 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { getStyles } from "../../../styles/styler.js";
+import { mergeSlotProps } from "../../../utils/mergeSlotProps.js";
+import { ChipBase, VARIANT_DEFAULT } from "./ChipBase.js";
+import React, { forwardRef, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/client/Chip/ChipButton.tsx
+const ChipButton = forwardRef(function ChipButton$1({ variant = VARIANT_DEFAULT, slotProps, className, ...rest }, ref) {
+	const classNames = useMemo(() => ({
+		root: getStyles({
+			chipLinkVariantRoot: variant,
+			className
+		}),
+		icon: getStyles({ chipLinkVariantIcon: variant })
+	}), [className, variant]);
+	const mergedSlotProps = mergeSlotProps(slotProps, {
+		startIcon: { className: classNames.icon },
+		endIcon: { className: classNames.icon }
+	});
+	return /* @__PURE__ */ jsx(ChipBase, {
+		as: "button",
+		ref,
+		tabIndex: 0,
+		className: classNames.root,
+		slotProps: mergedSlotProps,
+		...rest
+	});
+});
+ChipButton.displayName = "ChipButton";
+
+//#endregion
+export { ChipButton };

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

@@ -0,0 +1,57 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_styles_styler = require('../../../styles/styler.cjs');
+const require_components_IconSlot = require('../../IconSlot.cjs');
+const require_utils_mergeSlotProps = require('../../../utils/mergeSlotProps.cjs');
+const require_components_client_Chip_ChipBase = require('./ChipBase.cjs');
+const require_components_client_Pressable = require('../Pressable.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let __yahoo_uds_icons = require("@yahoo/uds-icons");
+
+//#region src/components/client/Chip/ChipDismissible.tsx
+const ChipDismissible = (0, react.forwardRef)(function ChipDismissible$1({ dismissButtonAriaLabel, onDismiss, dismissIcon, variant = require_components_client_Chip_ChipBase.VARIANT_DEFAULT, disabled, slotProps, className, ...rest }, ref) {
+	const classNames = (0, react.useMemo)(() => ({
+		root: require_styles_styler.getStyles({
+			chipDismissibleVariantRoot: variant,
+			className
+		}),
+		icon: require_styles_styler.getStyles({ chipDismissibleVariantIcon: variant }),
+		iconPressable: require_styles_styler.cx("uds-chip-dismissible-button", "uds-hit-target")
+	}), [className, variant]);
+	/**
+	* Handlers
+	*/
+	const handleDismissClick = (0, react.useCallback)((e) => {
+		e.stopPropagation();
+		onDismiss?.();
+	}, [onDismiss]);
+	const mergedSlotProps = require_utils_mergeSlotProps.mergeSlotProps(slotProps, {
+		startIcon: { className: classNames.icon },
+		endIcon: { className: classNames.icon }
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Chip_ChipBase.ChipBase, {
+		ref,
+		disabled,
+		tabIndex: -1,
+		endIcon: (iconProps) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Pressable.Pressable, {
+			"aria-label": dismissButtonAriaLabel,
+			className: classNames.iconPressable,
+			onClick: handleDismissClick,
+			disabled,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				icon: dismissIcon ?? __yahoo_uds_icons.Cross,
+				iconProps
+			})
+		}),
+		className: classNames.root,
+		slotProps: mergedSlotProps,
+		...rest
+	});
+});
+ChipDismissible.displayName = "ChipDismissible";
+
+//#endregion
+exports.ChipDismissible = ChipDismissible;

package/dist/components/client/Chip/ChipDismissible.d.cts

@@ -0,0 +1,13 @@
+import { UniversalChipDismissibleProps } from "../../../tokens/types.cjs";
+import "../../../tokens/index.cjs";
+import { ChipBaseProps } from "./ChipBase.cjs";
+import React from "react";
+
+//#region src/components/client/Chip/ChipDismissible.d.ts
+type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onToggle' | 'label'>;
+interface ChipDismissibleProps extends HtmlDivProps, Omit<UniversalChipDismissibleProps, 'type'> {
+  slotProps?: ChipBaseProps['slotProps'];
+}
+declare const ChipDismissible: React.ForwardRefExoticComponent<ChipDismissibleProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ChipDismissible, type ChipDismissibleProps };

package/dist/components/client/Chip/ChipDismissible.d.ts

@@ -0,0 +1,13 @@
+import { UniversalChipDismissibleProps } from "../../../tokens/types.js";
+import "../../../tokens/index.js";
+import { ChipBaseProps } from "./ChipBase.js";
+import React from "react";
+
+//#region src/components/client/Chip/ChipDismissible.d.ts
+type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onToggle' | 'label'>;
+interface ChipDismissibleProps extends HtmlDivProps, Omit<UniversalChipDismissibleProps, 'type'> {
+  slotProps?: ChipBaseProps['slotProps'];
+}
+declare const ChipDismissible: React.ForwardRefExoticComponent<ChipDismissibleProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ChipDismissible, type ChipDismissibleProps };

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

@@ -0,0 +1,55 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { cx, getStyles } from "../../../styles/styler.js";
+import { IconSlot } from "../../IconSlot.js";
+import { mergeSlotProps } from "../../../utils/mergeSlotProps.js";
+import { ChipBase, VARIANT_DEFAULT } from "./ChipBase.js";
+import { Pressable } from "../Pressable.js";
+import React, { forwardRef, useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Cross } from "@yahoo/uds-icons";
+
+//#region src/components/client/Chip/ChipDismissible.tsx
+const ChipDismissible = forwardRef(function ChipDismissible$1({ dismissButtonAriaLabel, onDismiss, dismissIcon, variant = VARIANT_DEFAULT, disabled, slotProps, className, ...rest }, ref) {
+	const classNames = useMemo(() => ({
+		root: getStyles({
+			chipDismissibleVariantRoot: variant,
+			className
+		}),
+		icon: getStyles({ chipDismissibleVariantIcon: variant }),
+		iconPressable: cx("uds-chip-dismissible-button", "uds-hit-target")
+	}), [className, variant]);
+	/**
+	* Handlers
+	*/
+	const handleDismissClick = useCallback((e) => {
+		e.stopPropagation();
+		onDismiss?.();
+	}, [onDismiss]);
+	const mergedSlotProps = mergeSlotProps(slotProps, {
+		startIcon: { className: classNames.icon },
+		endIcon: { className: classNames.icon }
+	});
+	return /* @__PURE__ */ jsx(ChipBase, {
+		ref,
+		disabled,
+		tabIndex: -1,
+		endIcon: (iconProps) => /* @__PURE__ */ jsx(Pressable, {
+			"aria-label": dismissButtonAriaLabel,
+			className: classNames.iconPressable,
+			onClick: handleDismissClick,
+			disabled,
+			children: /* @__PURE__ */ jsx(IconSlot, {
+				icon: dismissIcon ?? Cross,
+				iconProps
+			})
+		}),
+		className: classNames.root,
+		slotProps: mergedSlotProps,
+		...rest
+	});
+});
+ChipDismissible.displayName = "ChipDismissible";
+
+//#endregion
+export { ChipDismissible };

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

@@ -0,0 +1,38 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_styles_styler = require('../../../styles/styler.cjs');
+const require_utils_mergeSlotProps = require('../../../utils/mergeSlotProps.cjs');
+const require_components_client_Chip_ChipBase = require('./ChipBase.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/client/Chip/ChipLink.tsx
+const ChipLink = (0, react.forwardRef)(function ChipLink$1({ variant = require_components_client_Chip_ChipBase.VARIANT_DEFAULT, href, disabled, slotProps, className, ...rest }, ref) {
+	const classNames = (0, react.useMemo)(() => ({
+		root: require_styles_styler.getStyles({
+			chipLinkVariantRoot: variant,
+			className
+		}),
+		icon: require_styles_styler.getStyles({ chipLinkVariantIcon: variant })
+	}), [className, variant]);
+	const mergedSlotProps = require_utils_mergeSlotProps.mergeSlotProps(slotProps, {
+		startIcon: { className: classNames.icon },
+		endIcon: { className: classNames.icon }
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Chip_ChipBase.ChipBase, {
+		as: "a",
+		ref,
+		disabled,
+		className: classNames.root,
+		slotProps: mergedSlotProps,
+		tabIndex: 0,
+		...rest,
+		href: disabled ? void 0 : href
+	});
+});
+ChipLink.displayName = "ChipLink";
+
+//#endregion
+exports.ChipLink = ChipLink;

package/dist/components/client/Chip/ChipLink.d.cts

@@ -0,0 +1,13 @@
+import { UniversalChipLinkProps } from "../../../tokens/types.cjs";
+import "../../../tokens/index.cjs";
+import { ChipBaseProps } from "./ChipBase.cjs";
+import React from "react";
+
+//#region src/components/client/Chip/ChipLink.d.ts
+type HtmlAnchorProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'type'>;
+interface ChipLinkProps extends HtmlAnchorProps, Omit<UniversalChipLinkProps, 'type'> {
+  slotProps?: ChipBaseProps['slotProps'];
+}
+declare const ChipLink: React.ForwardRefExoticComponent<ChipLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+//#endregion
+export { ChipLink, type ChipLinkProps };

package/dist/components/client/Chip/ChipLink.d.ts

@@ -0,0 +1,13 @@
+import { UniversalChipLinkProps } from "../../../tokens/types.js";
+import "../../../tokens/index.js";
+import { ChipBaseProps } from "./ChipBase.js";
+import React from "react";
+
+//#region src/components/client/Chip/ChipLink.d.ts
+type HtmlAnchorProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'type'>;
+interface ChipLinkProps extends HtmlAnchorProps, Omit<UniversalChipLinkProps, 'type'> {
+  slotProps?: ChipBaseProps['slotProps'];
+}
+declare const ChipLink: React.ForwardRefExoticComponent<ChipLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+//#endregion
+export { ChipLink, type ChipLinkProps };

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

@@ -0,0 +1,36 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { getStyles } from "../../../styles/styler.js";
+import { mergeSlotProps } from "../../../utils/mergeSlotProps.js";
+import { ChipBase, VARIANT_DEFAULT } from "./ChipBase.js";
+import React, { forwardRef, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/client/Chip/ChipLink.tsx
+const ChipLink = forwardRef(function ChipLink$1({ variant = VARIANT_DEFAULT, href, disabled, slotProps, className, ...rest }, ref) {
+	const classNames = useMemo(() => ({
+		root: getStyles({
+			chipLinkVariantRoot: variant,
+			className
+		}),
+		icon: getStyles({ chipLinkVariantIcon: variant })
+	}), [className, variant]);
+	const mergedSlotProps = mergeSlotProps(slotProps, {
+		startIcon: { className: classNames.icon },
+		endIcon: { className: classNames.icon }
+	});
+	return /* @__PURE__ */ jsx(ChipBase, {
+		as: "a",
+		ref,
+		disabled,
+		className: classNames.root,
+		slotProps: mergedSlotProps,
+		tabIndex: 0,
+		...rest,
+		href: disabled ? void 0 : href
+	});
+});
+ChipLink.displayName = "ChipLink";
+
+//#endregion
+export { ChipLink };

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

@@ -0,0 +1,53 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_styles_styler = require('../../../styles/styler.cjs');
+const require_utils_mergeSlotProps = require('../../../utils/mergeSlotProps.cjs');
+const require_components_client_Chip_ChipBase = require('./ChipBase.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/client/Chip/ChipToggle.tsx
+const ChipToggle = (0, react.forwardRef)(function ChipToggle$1({ isToggled = false, onToggle, onClick, variant = require_components_client_Chip_ChipBase.VARIANT_DEFAULT, slotProps, className, role = "checkbox", ...rest }, ref) {
+	const classNames = (0, react.useMemo)(() => ({
+		root: require_styles_styler.getStyles({
+			chipToggleVariantRoot: variant,
+			chipToggleVariantActiveRoot: isToggled ? "on" : "off",
+			className
+		}),
+		icon: require_styles_styler.getStyles({ chipToggleVariantIcon: variant })
+	}), [
+		className,
+		isToggled,
+		variant
+	]);
+	const handleClick = (0, react.useCallback)((e) => {
+		onToggle?.(!isToggled);
+		onClick?.(e);
+	}, [
+		isToggled,
+		onClick,
+		onToggle
+	]);
+	const mergedSlotProps = require_utils_mergeSlotProps.mergeSlotProps(slotProps, {
+		startIcon: { className: classNames.icon },
+		endIcon: { className: classNames.icon }
+	});
+	const isCheckboxOrSwitch = role === "checkbox" || role === "switch";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Chip_ChipBase.ChipBase, {
+		ref,
+		as: "button",
+		role,
+		"aria-checked": isCheckboxOrSwitch ? isToggled : void 0,
+		onClick: handleClick,
+		className: classNames.root,
+		slotProps: mergedSlotProps,
+		tabIndex: 0,
+		...rest
+	});
+});
+ChipToggle.displayName = "ChipToggle";
+
+//#endregion
+exports.ChipToggle = ChipToggle;

package/dist/components/client/Chip/ChipToggle.d.cts

@@ -0,0 +1,13 @@
+import { UniversalChipToggleProps } from "../../../tokens/types.cjs";
+import "../../../tokens/index.cjs";
+import { ChipBaseProps } from "./ChipBase.cjs";
+import React from "react";
+
+//#region src/components/client/Chip/ChipToggle.d.ts
+type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'label' | 'onToggle'>;
+interface ChipToggleProps extends UniversalChipToggleProps, HtmlDivProps {
+  slotProps?: ChipBaseProps['slotProps'];
+}
+declare const ChipToggle: React.ForwardRefExoticComponent<ChipToggleProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ChipToggle, type ChipToggleProps };

package/dist/components/client/Chip/ChipToggle.d.ts

@@ -0,0 +1,13 @@
+import { UniversalChipToggleProps } from "../../../tokens/types.js";
+import "../../../tokens/index.js";
+import { ChipBaseProps } from "./ChipBase.js";
+import React from "react";
+
+//#region src/components/client/Chip/ChipToggle.d.ts
+type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'label' | 'onToggle'>;
+interface ChipToggleProps extends UniversalChipToggleProps, HtmlDivProps {
+  slotProps?: ChipBaseProps['slotProps'];
+}
+declare const ChipToggle: React.ForwardRefExoticComponent<ChipToggleProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ChipToggle, type ChipToggleProps };

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

@@ -0,0 +1,51 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { getStyles } from "../../../styles/styler.js";
+import { mergeSlotProps } from "../../../utils/mergeSlotProps.js";
+import { ChipBase, VARIANT_DEFAULT } from "./ChipBase.js";
+import React, { forwardRef, useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/client/Chip/ChipToggle.tsx
+const ChipToggle = forwardRef(function ChipToggle$1({ isToggled = false, onToggle, onClick, variant = VARIANT_DEFAULT, slotProps, className, role = "checkbox", ...rest }, ref) {
+	const classNames = useMemo(() => ({
+		root: getStyles({
+			chipToggleVariantRoot: variant,
+			chipToggleVariantActiveRoot: isToggled ? "on" : "off",
+			className
+		}),
+		icon: getStyles({ chipToggleVariantIcon: variant })
+	}), [
+		className,
+		isToggled,
+		variant
+	]);
+	const handleClick = useCallback((e) => {
+		onToggle?.(!isToggled);
+		onClick?.(e);
+	}, [
+		isToggled,
+		onClick,
+		onToggle
+	]);
+	const mergedSlotProps = mergeSlotProps(slotProps, {
+		startIcon: { className: classNames.icon },
+		endIcon: { className: classNames.icon }
+	});
+	const isCheckboxOrSwitch = role === "checkbox" || role === "switch";
+	return /* @__PURE__ */ jsx(ChipBase, {
+		ref,
+		as: "button",
+		role,
+		"aria-checked": isCheckboxOrSwitch ? isToggled : void 0,
+		onClick: handleClick,
+		className: classNames.root,
+		slotProps: mergedSlotProps,
+		tabIndex: 0,
+		...rest
+	});
+});
+ChipToggle.displayName = "ChipToggle";
+
+//#endregion
+export { ChipToggle };

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

@@ -0,0 +1,13 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_components_client_Chip_ChipButton = require('./ChipButton.cjs');
+const require_components_client_Chip_ChipDismissible = require('./ChipDismissible.cjs');
+const require_components_client_Chip_ChipLink = require('./ChipLink.cjs');
+const require_components_client_Chip_ChipToggle = require('./ChipToggle.cjs');
+const require_components_client_Chip_Chip = require('./Chip.cjs');
+
+exports.Chip = require_components_client_Chip_Chip.Chip;
+exports.ChipButton = require_components_client_Chip_ChipButton.ChipButton;
+exports.ChipDismissible = require_components_client_Chip_ChipDismissible.ChipDismissible;
+exports.ChipLink = require_components_client_Chip_ChipLink.ChipLink;
+exports.ChipToggle = require_components_client_Chip_ChipToggle.ChipToggle;

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

@@ -0,0 +1,6 @@
+import { Chip, ChipProps } from "./Chip.cjs";
+import { ChipButton, ChipButtonProps } from "./ChipButton.cjs";
+import { ChipDismissible, ChipDismissibleProps } from "./ChipDismissible.cjs";
+import { ChipLink, ChipLinkProps } from "./ChipLink.cjs";
+import { ChipToggle, ChipToggleProps } from "./ChipToggle.cjs";
+export { Chip, ChipButton, type ChipButtonProps, ChipDismissible, type ChipDismissibleProps, ChipLink, type ChipLinkProps, type ChipProps, ChipToggle, type ChipToggleProps };

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

@@ -0,0 +1,6 @@
+import { Chip, ChipProps } from "./Chip.js";
+import { ChipButton, ChipButtonProps } from "./ChipButton.js";
+import { ChipDismissible, ChipDismissibleProps } from "./ChipDismissible.js";
+import { ChipLink, ChipLinkProps } from "./ChipLink.js";
+import { ChipToggle, ChipToggleProps } from "./ChipToggle.js";
+export { Chip, ChipButton, type ChipButtonProps, ChipDismissible, type ChipDismissibleProps, ChipLink, type ChipLinkProps, type ChipProps, ChipToggle, type ChipToggleProps };

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

@@ -0,0 +1,9 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { ChipButton } from "./ChipButton.js";
+import { ChipDismissible } from "./ChipDismissible.js";
+import { ChipLink } from "./ChipLink.js";
+import { ChipToggle } from "./ChipToggle.js";
+import { Chip } from "./Chip.js";
+
+export { Chip, ChipButton, ChipDismissible, ChipLink, ChipToggle };

package/dist/components/client/IconButton.cjs

@@ -0,0 +1,129 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_tokens_consts_cssTokens = require('../../tokens/consts/cssTokens.cjs');
+const require_styles_styler = require('../../styles/styler.cjs');
+const require_components_Icon = require('../Icon.cjs');
+const require_tokens_automation_utils_index = require('../../tokens/automation/utils/index.cjs');
+const require_components_client_SpringMotionConfig = require('./SpringMotionConfig.cjs');
+const require_components_client_Button = require('./Button.cjs');
+let react = require("react");
+let __yahoo_uds_fixtures = require("@yahoo/uds/fixtures");
+let react_jsx_runtime = require("react/jsx-runtime");
+let __yahoo_uds_icons = require("@yahoo/uds-icons");
+let motion_react = require("motion/react");
+
+//#region src/components/client/IconButton.tsx
+const defaultSizeRootClass = require_tokens_automation_utils_index.generateDefaultClassName("iconbutton", "size", "root");
+const defaultSizeIconClass = require_tokens_automation_utils_index.generateDefaultClassName("iconbutton", "size", "icon");
+const defaultVariantRootClass = require_tokens_automation_utils_index.generateDefaultClassName("button", "variant", "root");
+const defaultVariantIconClass = require_tokens_automation_utils_index.generateDefaultClassName("button", "variant", "icon");
+/**
+* **⚙️️ An icon button element that can be used to trigger an action**
+*
+* @componentType Client component
+*
+* @description An icon button is essentially an interactive icon. They should be used to display an icon which, when clicked, allows the user to trigger an action. Icon buttons provide additional features such hover states, focus states, and pressable functionality.
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/icon-button IconButton Docs} for more info
+*
+* @usage
+* - When you need a button that is represented by an icon rather than text. This is useful in compact spaces, toolbars, or when the action is commonly understood through a visual symbol.
+* - If you need a button that is used to trigger a non-critical action.
+*
+* @example
+* ```tsx
+* 'use client';
+* import { IconButton } from "@yahoo/uds";
+* import { AddFolder } from "@yahoo/uds-icons";
+*
+* <IconButton name={AddFolder} variant="primary" />
+* ```
+*
+* @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$1({ variant, size, iconVariant, loading, disableEffects, name, type = "button", htmlName, className, children, ...rest }, forwardedRef) {
+	const ref = (0, react.useRef)(null);
+	(0, react.useImperativeHandle)(forwardedRef, () => ref.current);
+	const prefersReducedMotion = (0, motion_react.useReducedMotion)();
+	const disableMotion = !!disableEffects || !!rest?.disabled;
+	const layoutVariant = (0, react.useMemo)(() => prefersReducedMotion ? "smooth" : "subtle", [prefersReducedMotion]);
+	const buttonVariants = (0, react.useMemo)(() => ({
+		rest: { scale: disableMotion ? 1 : `var(${require_tokens_consts_cssTokens.BUTTON_SCALE_EFFECT_REST})` },
+		hover: { scale: disableMotion ? 1 : `var(${require_tokens_consts_cssTokens.BUTTON_SCALE_EFFECT_HOVER})` },
+		pressed: { scale: disableMotion ? 1 : `var(${require_tokens_consts_cssTokens.BUTTON_SCALE_EFFECT_PRESSED})` }
+	}), [disableMotion]);
+	const rootSizeClass = (0, react.useMemo)(() => size ? require_styles_styler.getStyles({ iconbuttonSizeRoot: size }) : defaultSizeRootClass, [size]);
+	const rootVariantClass = (0, react.useMemo)(() => variant ? require_styles_styler.getStyles({ buttonVariantRoot: variant }) : defaultVariantRootClass, [variant]);
+	const iconSizeClass = (0, react.useMemo)(() => size ? require_styles_styler.getStyles({ iconbuttonSizeIcon: size }) : defaultSizeIconClass, [size]);
+	const iconVariantClass = (0, react.useMemo)(() => variant ? require_styles_styler.getStyles({ buttonVariantIcon: variant }) : defaultVariantIconClass, [variant]);
+	const styles = (0, react.useMemo)(() => ({
+		root: require_styles_styler.cx("uds-ring", "uds-hit-target", "inline-flex overflow-hidden justify-center items-center", "[transform-origin:center]", "[backface-visibility:hidden]", "[transition-property:color,background-color,border-color, box-shadow,text-decoration-color,fill,stroke]", "[transition-timing-function:cubic-bezier(0,0,0.2,1)]", "[transition-duration:220ms]", rootSizeClass, rootVariantClass, rest?.disabled && "cursor-not-allowed", loading && "uds-button-loading", disableEffects && "uds-button-without-effects", className),
+		icon: require_styles_styler.getStyles({ className: require_styles_styler.cx(iconSizeClass, iconVariantClass) }),
+		loadingIcon: require_styles_styler.getStyles({ className: require_styles_styler.cx([
+			"animate-spin",
+			iconSizeClass,
+			iconVariantClass
+		]) })
+	}), [
+		className,
+		disableEffects,
+		iconSizeClass,
+		iconVariantClass,
+		loading,
+		rest?.disabled,
+		rootSizeClass,
+		rootVariantClass
+	]);
+	return /* @__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)(motion_react.m.button, {
+			ref,
+			type,
+			className: styles.root,
+			name: htmlName,
+			initial: "icon",
+			variants: buttonVariants,
+			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: __yahoo_uds_fixtures.buttonIconSvgSize,
+						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: __yahoo_uds_fixtures.buttonIconSvgSize,
+						name,
+						variant: iconVariant,
+						color: "current",
+						className: styles.icon
+					})
+				}, name.name)]
+			})
+		})
+	});
+});
+IconButton.displayName = "IconButton";
+
+//#endregion
+exports.IconButton = IconButton;

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

@@ -0,0 +1,37 @@
+import { UniversalIconButtonProps } from "../../tokens/types.cjs";
+import "../../tokens/index.cjs";
+import * as react36 from "react";
+import { HTMLMotionProps } from "motion/react";
+
+//#region src/components/client/IconButton.d.ts
+type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'> & Omit<HTMLMotionProps<'button'>, 'name'>;
+interface IconButtonProps extends HtmlButtonProps, UniversalIconButtonProps {}
+/**
+ * **⚙️️ An icon button element that can be used to trigger an action**
+ *
+ * @componentType Client component
+ *
+ * @description An icon button is essentially an interactive icon. They should be used to display an icon which, when clicked, allows the user to trigger an action. Icon buttons provide additional features such hover states, focus states, and pressable functionality.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/icon-button IconButton Docs} for more info
+ *
+ * @usage
+ * - When you need a button that is represented by an icon rather than text. This is useful in compact spaces, toolbars, or when the action is commonly understood through a visual symbol.
+ * - If you need a button that is used to trigger a non-critical action.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { IconButton } from "@yahoo/uds";
+ * import { AddFolder } from "@yahoo/uds-icons";
+ *
+ * <IconButton name={AddFolder} variant="primary" />
+ * ```
+ *
+ * @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: react36.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & react36.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { IconButton, type IconButtonProps };