@yahoo/uds 3.58.1 → 3.59.0-beta.1

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

@@ -0,0 +1,52 @@
+"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 };
+//# sourceMappingURL=ChipToggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChipToggle.js","names":["ChipToggle"],"sources":["../../../../src/components/client/Chip/ChipToggle.tsx"],"sourcesContent":["import type { ForwardedRef } from 'react';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\n\nimport { getStyles } from '../../../styles/styler';\nimport type { UniversalChipToggleProps } from '../../../tokens';\nimport { mergeSlotProps } from '../../../utils/mergeSlotProps';\nimport type { ChipBaseProps } from './ChipBase';\nimport { ChipBase, VARIANT_DEFAULT } from './ChipBase';\n\ntype HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'label' | 'onToggle'>;\n\ninterface ChipToggleProps extends UniversalChipToggleProps, HtmlDivProps {\n  slotProps?: ChipBaseProps['slotProps'];\n}\n\nconst ChipToggle = forwardRef<HTMLDivElement, ChipToggleProps>(function ChipToggle(\n  {\n    isToggled = false,\n    onToggle,\n    onClick,\n    variant = VARIANT_DEFAULT,\n    slotProps,\n    className,\n    role = 'checkbox',\n    ...rest\n  }: ChipToggleProps,\n  ref,\n) {\n  const classNames = useMemo(\n    () => ({\n      root: getStyles({\n        chipToggleVariantRoot: variant,\n        chipToggleVariantActiveRoot: isToggled ? 'on' : 'off',\n        className,\n      }),\n\n      icon: getStyles({\n        chipToggleVariantIcon: variant,\n      }),\n    }),\n    [className, isToggled, variant],\n  );\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      onToggle?.(!isToggled);\n      onClick?.(e);\n    },\n    [isToggled, onClick, onToggle],\n  );\n\n  const mergedSlotProps = mergeSlotProps(slotProps, {\n    startIcon: { className: classNames.icon },\n    endIcon: { className: classNames.icon },\n  });\n\n  // If a user passes a role other than checkbox or switch, they should also manage aria attributes, if applicable, themselves.\n  const isCheckboxOrSwitch = role === 'checkbox' || role === 'switch';\n\n  return (\n    <ChipBase\n      ref={ref as ForwardedRef<HTMLDivElement>}\n      as=\"button\"\n      role={role}\n      aria-checked={isCheckboxOrSwitch ? isToggled : undefined}\n      onClick={handleClick}\n      className={classNames.root}\n      slotProps={mergedSlotProps}\n      // Required for Safari to render a focus ring\n      tabIndex={0}\n      {...rest}\n    />\n  );\n});\n\n// Need to re-set this because of the forwardRef wrapper\nChipToggle.displayName = 'ChipToggle';\n\nexport { ChipToggle, type ChipToggleProps };\n"],"mappings":";;;;;;;;AAeA,MAAM,aAAa,WAA4C,SAASA,aACtE,EACE,YAAY,OACZ,UACA,SACA,UAAU,iBACV,WACA,WACA,OAAO,WACP,GAAG,QAEL,KACA;CACA,MAAM,aAAa,eACV;EACL,MAAM,UAAU;GACd,uBAAuB;GACvB,6BAA6B,YAAY,OAAO;GAChD;GACD,CAAC;EAEF,MAAM,UAAU,EACd,uBAAuB,SACxB,CAAC;EACH,GACD;EAAC;EAAW;EAAW;EAAQ,CAChC;CAED,MAAM,cAAc,aACjB,MAAwC;AACvC,aAAW,CAAC,UAAU;AACtB,YAAU,EAAE;IAEd;EAAC;EAAW;EAAS;EAAS,CAC/B;CAED,MAAM,kBAAkB,eAAe,WAAW;EAChD,WAAW,EAAE,WAAW,WAAW,MAAM;EACzC,SAAS,EAAE,WAAW,WAAW,MAAM;EACxC,CAAC;CAGF,MAAM,qBAAqB,SAAS,cAAc,SAAS;AAE3D,QACE,oBAAC;EACM;EACL,IAAG;EACG;EACN,gBAAc,qBAAqB,YAAY;EAC/C,SAAS;EACT,WAAW,WAAW;EACtB,WAAW;EAEX,UAAU;EACV,GAAI;GACJ;EAEJ;AAGF,WAAW,cAAc"}

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,127 @@
+"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_Icon = require('../Icon.cjs');
+const require_tokens_parseButtonVariants = require('../../tokens/parseButtonVariants.cjs');
+const require_tokens_consts_buttonMotionTokens = require('../../tokens/consts/buttonMotionTokens.cjs');
+const require_components_client_SpringMotionConfig = require('./SpringMotionConfig.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
+/**
+* **⚙️️ 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: iconButtonSize, iconVariant, loading, disableEffects, name, type = "button", htmlName, className, children,...rest }, forwardedRef) {
+	const ref = (0, react.useRef)(null);
+	(0, react.useImperativeHandle)(forwardedRef, () => ref.current);
+	const { palette: buttonPalette_DEPRECATED, variant: buttonVariant_DEPRECATED } = require_tokens_parseButtonVariants.parseDeprecatedButtonPaletteVariant({ flatVariant: variant });
+	const classNames = (0, react.useMemo)(() => ({
+		button: require_styles_styler.getStyles({
+			buttonVariant: buttonVariant_DEPRECATED,
+			buttonPalette: buttonPalette_DEPRECATED,
+			iconButtonSize,
+			className: require_styles_styler.cx("uds-icon-button", "uds-button", "uds-ring", "uds-hit-target", loading && "uds-button-loading", disableEffects && "uds-button-without-effects", className)
+		}),
+		loading: "uds-button-icon start-content animate-spin",
+		icon: "uds-button-icon start-content"
+	}), [
+		buttonPalette_DEPRECATED,
+		buttonVariant_DEPRECATED,
+		className,
+		disableEffects,
+		iconButtonSize,
+		loading
+	]);
+	const prefersReducedMotion = (0, motion_react.useReducedMotion)();
+	const layoutVariant = (0, react.useMemo)(() => prefersReducedMotion ? "smooth" : "subtle", [prefersReducedMotion]);
+	const buttonVariants = (0, react.useMemo)(() => {
+		const { rest: rest$1, hover, pressed } = require_tokens_consts_buttonMotionTokens.buttonMotionVariants;
+		if (disableEffects) return {
+			rest: {},
+			hover: {},
+			pressed: {}
+		};
+		return {
+			rest: rest$1,
+			hover,
+			pressed
+		};
+	}, [disableEffects]);
+	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: classNames.button,
+			initial: "icon",
+			variants: buttonVariants,
+			whileHover: "hover",
+			whileTap: "pressed",
+			name: htmlName,
+			...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_tokens_consts_buttonMotionTokens.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: classNames.loading
+					})
+				}, "loading"), name && !loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
+					variants: require_tokens_consts_buttonMotionTokens.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: classNames.icon
+					})
+				}, name.name)]
+			})
+		})
+	});
+});
+IconButton.displayName = "IconButton";
+
+//#endregion
+exports.IconButton = IconButton;

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

@@ -0,0 +1,38 @@
+import { UniversalIconButtonProps } from "../../tokens/types.cjs";
+import "../../tokens/index.cjs";
+import * as react23 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: react23.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & react23.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { IconButton, type IconButtonProps };
+//# sourceMappingURL=IconButton.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.cts","names":[],"sources":["../../../src/components/client/IconButton.tsx"],"sourcesContent":[],"mappings":";;;;;;KAiBK,eAAA,CAAA,CAAA,CAAkB,KAAK,KAAA,CAAM,qBAAqB,wCACrD,KAAK;UACG,eAAA,CAAA,OAAA,CAAwB,iBAAiB;;AAfC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,IAAA,CAAA,MAAA,CAAA,OAAA,CAAA,IAAA,CAAA,GAAA,CAAA,EAAA,CAAA,IAAA,CAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,MAAA,CAAA;;;;;;;AAc9C,CAAA,CAAA,CAAA,KAAA,CAAA,GAAA,CAAA,GAAA,CAAA,CAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,CAAA,IAAA,CAAA,UAAA,CAAA,IAAA,CAAA,MAAA,CAAA,UAAA,CAAA,IAAA,CAAA,CAAA,GAAA,CAAA,IAAA,CAAA;AACqE,CAAA;;;;;;;;;;;;;;;;;cA6BrE,YAAU,OAAA,CAAA,0BAAA,KAAA,0BAAA,OAAA,CAAA,cAAA"}

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

@@ -0,0 +1,38 @@
+import { UniversalIconButtonProps } from "../../tokens/types.js";
+import "../../tokens/index.js";
+import * as react0 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: react0.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & react0.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { IconButton, type IconButtonProps };
+//# sourceMappingURL=IconButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","names":[],"sources":["../../../src/components/client/IconButton.tsx"],"sourcesContent":[],"mappings":";;;;;;KAiBK,eAAA,CAAA,CAAA,CAAkB,KAAK,KAAA,CAAM,qBAAqB,wCACrD,KAAK;UACG,eAAA,CAAA,OAAA,CAAwB,iBAAiB;;AAfC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,IAAA,CAAA,MAAA,CAAA,OAAA,CAAA,IAAA,CAAA,GAAA,CAAA,EAAA,CAAA,IAAA,CAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,MAAA,CAAA;;;;;;;AAc9C,CAAA,CAAA,CAAA,KAAA,CAAA,GAAA,CAAA,GAAA,CAAA,CAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,CAAA,IAAA,CAAA,UAAA,CAAA,IAAA,CAAA,MAAA,CAAA,UAAA,CAAA,IAAA,CAAA,CAAA,GAAA,CAAA,IAAA,CAAA;AACqE,CAAA;;;;;;;;;;;;;;;;;cA6BrE,YAAU,MAAA,CAAA,0BAAA,KAAA,0BAAA,MAAA,CAAA,cAAA"}

package/dist/components/client/IconButton.js

@@ -0,0 +1,127 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { cx, getStyles } from "../../styles/styler.js";
+import { Icon } from "../Icon.js";
+import { parseDeprecatedButtonPaletteVariant } from "../../tokens/parseButtonVariants.js";
+import { buttonMotionVariants, iconMotionVariants, loadingMotionVariants } from "../../tokens/consts/buttonMotionTokens.js";
+import { SpringMotionConfig } from "./SpringMotionConfig.js";
+import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
+import { buttonIconSvgSize } from "@yahoo/uds/fixtures";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Progress } from "@yahoo/uds-icons";
+import { AnimatePresence, m, useReducedMotion } from "motion/react";
+
+//#region src/components/client/IconButton.tsx
+/**
+* **⚙️️ 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 = forwardRef(function IconButton$1({ variant, size: iconButtonSize, iconVariant, loading, disableEffects, name, type = "button", htmlName, className, children,...rest }, forwardedRef) {
+	const ref = useRef(null);
+	useImperativeHandle(forwardedRef, () => ref.current);
+	const { palette: buttonPalette_DEPRECATED, variant: buttonVariant_DEPRECATED } = parseDeprecatedButtonPaletteVariant({ flatVariant: variant });
+	const classNames = useMemo(() => ({
+		button: getStyles({
+			buttonVariant: buttonVariant_DEPRECATED,
+			buttonPalette: buttonPalette_DEPRECATED,
+			iconButtonSize,
+			className: cx("uds-icon-button", "uds-button", "uds-ring", "uds-hit-target", loading && "uds-button-loading", disableEffects && "uds-button-without-effects", className)
+		}),
+		loading: "uds-button-icon start-content animate-spin",
+		icon: "uds-button-icon start-content"
+	}), [
+		buttonPalette_DEPRECATED,
+		buttonVariant_DEPRECATED,
+		className,
+		disableEffects,
+		iconButtonSize,
+		loading
+	]);
+	const prefersReducedMotion = useReducedMotion();
+	const layoutVariant = useMemo(() => prefersReducedMotion ? "smooth" : "subtle", [prefersReducedMotion]);
+	const buttonVariants$1 = useMemo(() => {
+		const { rest: rest$1, hover, pressed } = buttonMotionVariants;
+		if (disableEffects) return {
+			rest: {},
+			hover: {},
+			pressed: {}
+		};
+		return {
+			rest: rest$1,
+			hover,
+			pressed
+		};
+	}, [disableEffects]);
+	return /* @__PURE__ */ jsx(SpringMotionConfig, {
+		layoutSpeed: "3",
+		layoutVariant,
+		reducedMotion: disableEffects ? "always" : "user",
+		children: /* @__PURE__ */ jsx(m.button, {
+			ref,
+			type,
+			className: classNames.button,
+			initial: "icon",
+			variants: buttonVariants$1,
+			whileHover: "hover",
+			whileTap: "pressed",
+			name: htmlName,
+			...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: buttonIconSvgSize,
+						name: Progress,
+						variant: iconVariant,
+						color: "current",
+						className: classNames.loading
+					})
+				}, "loading"), name && !loading && /* @__PURE__ */ jsx(m.span, {
+					variants: iconMotionVariants,
+					initial: "icon",
+					animate: "icon",
+					exit: "hide",
+					children: children || /* @__PURE__ */ jsx(Icon, {
+						size: buttonIconSvgSize,
+						name,
+						variant: iconVariant,
+						color: "current",
+						className: classNames.icon
+					})
+				}, name.name)]
+			})
+		})
+	});
+});
+IconButton.displayName = "IconButton";
+
+//#endregion
+export { IconButton };
+//# sourceMappingURL=IconButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","names":["IconButton","layoutVariant: MotionVariant","buttonVariants"],"sources":["../../../src/components/client/IconButton.tsx"],"sourcesContent":["import { buttonIconSvgSize } from '@yahoo/uds/fixtures';\nimport type { MotionVariant, UniversalIconButtonProps } from '@yahoo/uds/tokens';\nimport { parseDeprecatedButtonPaletteVariant } from '@yahoo/uds/tokens';\nimport { Progress } from '@yahoo/uds-icons';\nimport type { HTMLMotionProps } from 'motion/react';\nimport { AnimatePresence, m, useReducedMotion } from 'motion/react';\nimport { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';\n\nimport { cx, getStyles } from '../../styles/styler';\nimport {\n  buttonMotionVariants,\n  iconMotionVariants,\n  loadingMotionVariants,\n} from '../../tokens/consts/buttonMotionTokens';\nimport { Icon } from '../Icon';\nimport { SpringMotionConfig } from './SpringMotionConfig';\n\ntype HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'> &\n  Omit<HTMLMotionProps<'button'>, 'name'>;\ninterface IconButtonProps extends HtmlButtonProps, UniversalIconButtonProps {}\n\n/**\n * **⚙️️ An icon button element that can be used to trigger an action**\n *\n * @componentType Client component\n *\n * @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.\n *\n * @see\n * Check out the {@link https://uds.build/docs/components/icon-button IconButton Docs} for more info\n *\n * @usage\n * - 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.\n * - If you need a button that is used to trigger a non-critical action.\n *\n * @example\n * ```tsx\n * 'use client';\n * import { IconButton } from \"@yahoo/uds\";\n * import { AddFolder } from \"@yahoo/uds-icons\";\n *\n * <IconButton name={AddFolder} variant=\"primary\" />\n * ```\n *\n * @related [Icon](https://uds.build/docs/components/icon), [Button](https://uds.build/docs/components/button), and [Pressable](https://uds.build/docs/components/pressable)\n *\n **/\n\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  {\n    // Button config props\n    variant,\n    size: iconButtonSize,\n    // Icon props\n    iconVariant,\n    // State props\n    loading,\n    disableEffects,\n    // Misc props\n    name,\n    // HTML props (className, disabled, aria-*, data-*, onClick, etc.)\n    type = 'button',\n    htmlName,\n    className,\n    children,\n    ...rest\n  }: IconButtonProps,\n  forwardedRef,\n) {\n  /* ------------------------------- Setup refs ------------------------------- */\n  const ref = useRef<HTMLButtonElement>(null);\n  useImperativeHandle(forwardedRef, () => ref.current as HTMLButtonElement);\n\n  /* ---------------------------- Setup classNames ---------------------------- */\n  const { palette: buttonPalette_DEPRECATED, variant: buttonVariant_DEPRECATED } =\n    parseDeprecatedButtonPaletteVariant({ flatVariant: variant });\n\n  const classNames = useMemo(\n    () => ({\n      button: getStyles({\n        // We're still using the button config props here\n        buttonVariant: buttonVariant_DEPRECATED,\n        buttonPalette: buttonPalette_DEPRECATED,\n        // Icon button specific props\n        iconButtonSize,\n        className: cx(\n          // Base class name\n          'uds-icon-button',\n          // Extend button\n          'uds-button',\n          // Focus ring\n          'uds-ring',\n          // Minimum hit target of 44px\n          'uds-hit-target',\n          // State\n          loading && 'uds-button-loading',\n          disableEffects && 'uds-button-without-effects',\n          // Consumer class names\n          className,\n        ),\n      }),\n      loading: 'uds-button-icon start-content animate-spin',\n      icon: 'uds-button-icon start-content',\n    }),\n    [\n      buttonPalette_DEPRECATED,\n      buttonVariant_DEPRECATED,\n      className,\n      disableEffects,\n      iconButtonSize,\n      loading,\n    ],\n  );\n\n  /* --------------------- Motion config setup for button --------------------- */\n  const prefersReducedMotion = useReducedMotion();\n  const layoutVariant: MotionVariant = useMemo(\n    () => (prefersReducedMotion ? 'smooth' : 'subtle'),\n    [prefersReducedMotion],\n  );\n\n  const buttonVariants = useMemo(() => {\n    const { rest, hover, pressed } = buttonMotionVariants;\n\n    // Return empty variants if effects are disabled\n    if (disableEffects) {\n      return { rest: {}, hover: {}, pressed: {} };\n    }\n\n    return { rest, hover, pressed };\n  }, [disableEffects]);\n\n  /* -------------------------------------------------------------------------- */\n  /*                               The IconButton                               */\n  /* -------------------------------------------------------------------------- */\n  return (\n    <SpringMotionConfig\n      layoutSpeed=\"3\"\n      layoutVariant={layoutVariant}\n      reducedMotion={disableEffects ? 'always' : 'user'}\n    >\n      <m.button\n        ref={ref}\n        type={type}\n        className={classNames.button}\n        initial=\"icon\"\n        variants={buttonVariants}\n        whileHover=\"hover\"\n        whileTap=\"pressed\"\n        name={htmlName}\n        {...rest}\n      >\n        <AnimatePresence initial={false} mode=\"popLayout\">\n          {loading && (\n            <m.span\n              key=\"loading\"\n              variants={loadingMotionVariants}\n              initial=\"loading\"\n              animate=\"loading\"\n              exit=\"hide\"\n            >\n              <Icon\n                size={buttonIconSvgSize}\n                name={Progress}\n                variant={iconVariant}\n                color=\"current\"\n                className={classNames.loading}\n              />\n            </m.span>\n          )}\n          {name && !loading && (\n            <m.span\n              key={name.name}\n              variants={iconMotionVariants}\n              initial=\"icon\"\n              animate=\"icon\"\n              exit=\"hide\"\n            >\n              {children || (\n                <Icon\n                  size={buttonIconSvgSize}\n                  name={name}\n                  variant={iconVariant}\n                  color=\"current\"\n                  className={classNames.icon}\n                />\n              )}\n            </m.span>\n          )}\n        </AnimatePresence>\n      </m.button>\n    </SpringMotionConfig>\n  );\n});\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton, type IconButtonProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,MAAM,aAAa,WAA+C,SAASA,aACzE,EAEE,SACA,MAAM,gBAEN,aAEA,SACA,gBAEA,MAEA,OAAO,UACP,UACA,WACA,SACA,GAAG,QAEL,cACA;CAEA,MAAM,MAAM,OAA0B,KAAK;AAC3C,qBAAoB,oBAAoB,IAAI,QAA6B;CAGzE,MAAM,EAAE,SAAS,0BAA0B,SAAS,6BAClD,oCAAoC,EAAE,aAAa,SAAS,CAAC;CAE/D,MAAM,aAAa,eACV;EACL,QAAQ,UAAU;GAEhB,eAAe;GACf,eAAe;GAEf;GACA,WAAW,GAET,mBAEA,cAEA,YAEA,kBAEA,WAAW,sBACX,kBAAkB,8BAElB,UACD;GACF,CAAC;EACF,SAAS;EACT,MAAM;EACP,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAGD,MAAM,uBAAuB,kBAAkB;CAC/C,MAAMC,gBAA+B,cAC5B,uBAAuB,WAAW,UACzC,CAAC,qBAAqB,CACvB;CAED,MAAMC,mBAAiB,cAAc;EACnC,MAAM,EAAE,cAAM,OAAO,YAAY;AAGjC,MAAI,eACF,QAAO;GAAE,MAAM,EAAE;GAAE,OAAO,EAAE;GAAE,SAAS,EAAE;GAAE;AAG7C,SAAO;GAAE;GAAM;GAAO;GAAS;IAC9B,CAAC,eAAe,CAAC;AAKpB,QACE,oBAAC;EACC,aAAY;EACG;EACf,eAAe,iBAAiB,WAAW;YAE3C,oBAAC,EAAE;GACI;GACC;GACN,WAAW,WAAW;GACtB,SAAQ;GACR,UAAUA;GACV,YAAW;GACX,UAAS;GACT,MAAM;GACN,GAAI;aAEJ,qBAAC;IAAgB,SAAS;IAAO,MAAK;eACnC,WACC,oBAAC,EAAE;KAED,UAAU;KACV,SAAQ;KACR,SAAQ;KACR,MAAK;eAEL,oBAAC;MACC,MAAM;MACN,MAAM;MACN,SAAS;MACT,OAAM;MACN,WAAW,WAAW;OACtB;OAZE,UAaG,EAEV,QAAQ,CAAC,WACR,oBAAC,EAAE;KAED,UAAU;KACV,SAAQ;KACR,SAAQ;KACR,MAAK;eAEJ,YACC,oBAAC;MACC,MAAM;MACA;MACN,SAAS;MACT,OAAM;MACN,WAAW,WAAW;OACtB;OAbC,KAAK,KAeH;KAEK;IACT;GACQ;EAEvB;AAEF,WAAW,cAAc"}