@yahoo/uds 3.59.0-beta.1 → 3.60.0

package/dist/components/client/Button.cjs

@@ -1,226 +0,0 @@
-"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_createSlot = require('../../utils/createSlot.cjs');
-const require_components_Icon = require('../Icon.cjs');
-const require_components_IconSlot = require('../IconSlot.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");
-react = require_rolldown_runtime.__toESM(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/Button.tsx
-/**
-* **🖲️ A button element that can be used to trigger an action**
-*
-* @componentType Client component
-*
-* @description A button is a fundamental component used to trigger an action or event. Buttons are interactive elements that users can click, tap, or otherwise engage with to submit forms, open dialogues, or perform any other interaction within an application or website. Consider an IconButton for buttons that only contain an icon.
-*
-* @see The {@link https://uds.build/docs/components/button Button Docs} for more info
-*
-* @example
-* ```tsx
-* 'use client';
-* import { Button, HStack } from "@yahoo/uds";
-*
-* export function Demo() {
-*   return (
-*     <HStack gap="2">
-*       <Button onClick={console.log}>Save</Button>
-*       <Button variant="secondary" onClick={console.log}>Cancel</Button>
-*     </HStack>
-*   )
-* }
-* ```
-*
-* @usage
-* Buttons should be used to clearly indicate and initiate actions that users can take.
-*
-* @related [Icon](https://uds.build/docs/components/icon), [IconButton](https://uds.build/docs/components/icon-button), [Pressable](https://uds.build/docs/components/pressable)
-**/
-const Button = (0, react.forwardRef)(function Button$1({ variant, size: buttonSize, startIcon, endIcon, iconVariant, loading, disableEffects, children, asChild, type = "button", className, width,...rest }, forwardedRef) {
-	const ref = (0, react.useRef)(null);
-	(0, react.useImperativeHandle)(forwardedRef, () => ref.current);
-	const Slot = (0, react.useMemo)(() => require_utils_createSlot.createSlot(), []);
-	const MotionSlot = (0, react.useMemo)(() => motion_react.m.create(Slot), [Slot]);
-	const endVariant = endIcon ? "icon" : "hide";
-	const gapVariant = require_tokens_consts_buttonMotionTokens.getGapVariant({
-		startIcon,
-		endIcon,
-		loading
-	});
-	const startVariant = require_tokens_consts_buttonMotionTokens.getStartVariant({
-		loading,
-		startIcon
-	});
-	const { palette: buttonPalette_DEPRECATED, variant: buttonVariant_DEPRECATED } = (0, react.useMemo)(() => require_tokens_parseButtonVariants.parseDeprecatedButtonPaletteVariant({ flatVariant: variant }), [variant]);
-	const classNames = (0, react.useMemo)(() => ({
-		button: require_styles_styler.getStyles({
-			width,
-			buttonSize,
-			buttonVariant: buttonVariant_DEPRECATED,
-			buttonPalette: buttonPalette_DEPRECATED,
-			className: require_styles_styler.cx("uds-button", "uds-ring", "uds-hit-target", loading && "uds-button-loading", disableEffects && "uds-button-without-effects", gapVariant === "withIcon" && "uds-button-with-gap", className)
-		}),
-		content: "uds-button-content truncate",
-		iconContainer: "uds-button-icon-container flex overflow-clip",
-		loading: "uds-button-icon start-content animate-spin",
-		start: "uds-button-icon start-content",
-		end: "uds-button-icon end-content"
-	}), [
-		width,
-		buttonSize,
-		buttonVariant_DEPRECATED,
-		buttonPalette_DEPRECATED,
-		className,
-		loading,
-		disableEffects,
-		gapVariant
-	]);
-	const layoutVariant = (0, motion_react.useReducedMotion)() ? "smooth" : "subtle";
-	/**
-	* TODO see if we can get these to work as ReactElements like (ie <StartContent />)
-	* Animations aren't currently propagating if I do that
-	**/
-	const startContent = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
-		className: classNames.iconContainer,
-		initial: false,
-		variants: require_tokens_consts_buttonMotionTokens.iconContainerMotionVariants,
-		animate: startVariant,
-		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: "hide",
-				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"), startIcon && !loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
-				variants: require_tokens_consts_buttonMotionTokens.iconMotionVariants,
-				initial: "hide",
-				animate: "icon",
-				exit: "hide",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
-					className: classNames.start,
-					icon: startIcon,
-					iconProps: {
-						size: __yahoo_uds_fixtures.buttonIconSvgSize,
-						variant: iconVariant,
-						color: "current"
-					}
-				})
-			})]
-		})
-	}), [
-		classNames.iconContainer,
-		classNames.loading,
-		classNames.start,
-		startVariant,
-		loading,
-		iconVariant,
-		startIcon
-	]);
-	const endContent = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
-		className: classNames.iconContainer,
-		initial: false,
-		variants: require_tokens_consts_buttonMotionTokens.iconContainerMotionVariants,
-		animate: endVariant,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
-			initial: false,
-			mode: "popLayout",
-			children: endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
-				variants: require_tokens_consts_buttonMotionTokens.iconMotionVariants,
-				initial: "hide",
-				animate: "icon",
-				exit: "hide",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
-					className: classNames.end,
-					icon: endIcon,
-					iconProps: {
-						size: __yahoo_uds_fixtures.buttonIconSvgSize,
-						variant: iconVariant,
-						color: "current"
-					}
-				})
-			})
-		})
-	}), [
-		classNames.iconContainer,
-		classNames.end,
-		endIcon,
-		endVariant,
-		iconVariant
-	]);
-	const buttonVariants = (0, react.useMemo)(() => {
-		if (!disableEffects) return require_tokens_consts_buttonMotionTokens.buttonMotionVariants;
-		return {
-			...require_tokens_consts_buttonMotionTokens.buttonMotionVariants,
-			rest: {},
-			hover: {},
-			pressed: {}
-		};
-	}, [disableEffects]);
-	if (asChild && (0, react.isValidElement)(children)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
-		layoutSpeed: "3",
-		layoutVariant,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MotionSlot, {
-			type,
-			className: classNames.button,
-			initial: ["hide", gapVariant],
-			animate: gapVariant,
-			variants: buttonVariants,
-			whileHover: "hover",
-			whileTap: "pressed",
-			...rest,
-			children: (0, react.cloneElement)(children, children.props, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-				startContent,
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: classNames.content,
-					children: children.props.children
-				}),
-				endContent
-			] }))
-		})
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
-		layoutSpeed: "3",
-		layoutVariant,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(motion_react.m.button, {
-			ref,
-			type,
-			className: classNames.button,
-			initial: ["hide", gapVariant],
-			animate: gapVariant,
-			variants: buttonVariants,
-			whileHover: "hover",
-			whileTap: "pressed",
-			...rest,
-			children: [
-				startContent,
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: classNames.content,
-					children
-				}),
-				endContent
-			]
-		})
-	});
-});
-Button.displayName = "Button";
-
-//#endregion
-exports.Button = Button;

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

@@ -1,41 +0,0 @@
-import { UniversalButtonProps } from "../../tokens/types.cjs";
-import "../../tokens/index.cjs";
-import React, { ForwardRefExoticComponent } from "react";
-import { HTMLMotionProps } from "motion/react";
-
-//#region src/components/client/Button.d.ts
-type HtmlButtonProps = Omit<HTMLMotionProps<'button'>, 'color' | 'name'> & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
-interface ButtonProps extends HtmlButtonProps, UniversalButtonProps {}
-/**
- * **🖲️ A button element that can be used to trigger an action**
- *
- * @componentType Client component
- *
- * @description A button is a fundamental component used to trigger an action or event. Buttons are interactive elements that users can click, tap, or otherwise engage with to submit forms, open dialogues, or perform any other interaction within an application or website. Consider an IconButton for buttons that only contain an icon.
- *
- * @see The {@link https://uds.build/docs/components/button Button Docs} for more info
- *
- * @example
- * ```tsx
- * 'use client';
- * import { Button, HStack } from "@yahoo/uds";
- *
- * export function Demo() {
- *   return (
- *     <HStack gap="2">
- *       <Button onClick={console.log}>Save</Button>
- *       <Button variant="secondary" onClick={console.log}>Cancel</Button>
- *     </HStack>
- *   )
- * }
- * ```
- *
- * @usage
- * Buttons should be used to clearly indicate and initiate actions that users can take.
- *
- * @related [Icon](https://uds.build/docs/components/icon), [IconButton](https://uds.build/docs/components/icon-button), [Pressable](https://uds.build/docs/components/pressable)
- **/
-declare const Button: ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-//#endregion
-export { Button, type ButtonProps };
-//# sourceMappingURL=Button.d.cts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Button.d.cts","names":[],"sources":["../../../src/components/client/Button.tsx"],"sourcesContent":[],"mappings":";;;;;;KA8BK,eAAA,CAAA,CAAA,CAAkB,KAAK,+CAC1B,KAAK,KAAA,CAAM,qBAAqB;UAExB,WAAA,CAAA,OAAA,CAAoB,iBAAiB,sBAnBhC;;;;;;;AAiBT,CAAA;AAE6D,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,CAAA,CAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,CAAA,IAAA,CAAA,UAAA,CAAA,MAAA,CAAA,MAAA,CAAA,IAAA,CAAA,CAAA,GAAA,CAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;cA+B7D,QAAM,0BAAA,KAAA,sBAAA,KAAA,CAAA,cAAA"}

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

@@ -1,41 +0,0 @@
-import { UniversalButtonProps } from "../../tokens/types.js";
-import "../../tokens/index.js";
-import React, { ForwardRefExoticComponent } from "react";
-import { HTMLMotionProps } from "motion/react";
-
-//#region src/components/client/Button.d.ts
-type HtmlButtonProps = Omit<HTMLMotionProps<'button'>, 'color' | 'name'> & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
-interface ButtonProps extends HtmlButtonProps, UniversalButtonProps {}
-/**
- * **🖲️ A button element that can be used to trigger an action**
- *
- * @componentType Client component
- *
- * @description A button is a fundamental component used to trigger an action or event. Buttons are interactive elements that users can click, tap, or otherwise engage with to submit forms, open dialogues, or perform any other interaction within an application or website. Consider an IconButton for buttons that only contain an icon.
- *
- * @see The {@link https://uds.build/docs/components/button Button Docs} for more info
- *
- * @example
- * ```tsx
- * 'use client';
- * import { Button, HStack } from "@yahoo/uds";
- *
- * export function Demo() {
- *   return (
- *     <HStack gap="2">
- *       <Button onClick={console.log}>Save</Button>
- *       <Button variant="secondary" onClick={console.log}>Cancel</Button>
- *     </HStack>
- *   )
- * }
- * ```
- *
- * @usage
- * Buttons should be used to clearly indicate and initiate actions that users can take.
- *
- * @related [Icon](https://uds.build/docs/components/icon), [IconButton](https://uds.build/docs/components/icon-button), [Pressable](https://uds.build/docs/components/pressable)
- **/
-declare const Button: ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-//#endregion
-export { Button, type ButtonProps };
-//# sourceMappingURL=Button.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Button.d.ts","names":[],"sources":["../../../src/components/client/Button.tsx"],"sourcesContent":[],"mappings":";;;;;;KA8BK,eAAA,CAAA,CAAA,CAAkB,KAAK,+CAC1B,KAAK,KAAA,CAAM,qBAAqB;UAExB,WAAA,CAAA,OAAA,CAAoB,iBAAiB,sBAnBhC;;;;;;;AAiBT,CAAA;AAE6D,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,CAAA,CAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,CAAA,IAAA,CAAA,UAAA,CAAA,MAAA,CAAA,MAAA,CAAA,IAAA,CAAA,CAAA,GAAA,CAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;cA+B7D,QAAM,0BAAA,KAAA,sBAAA,KAAA,CAAA,cAAA"}

package/dist/components/client/Button.js

@@ -1,225 +0,0 @@
-"use client";
-/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
-import { cx, getStyles } from "../../styles/styler.js";
-import { createSlot } from "../../utils/createSlot.js";
-import { Icon } from "../Icon.js";
-import { IconSlot } from "../IconSlot.js";
-import { parseDeprecatedButtonPaletteVariant } from "../../tokens/parseButtonVariants.js";
-import { buttonMotionVariants, getGapVariant, getStartVariant, iconContainerMotionVariants, iconMotionVariants, loadingMotionVariants } from "../../tokens/consts/buttonMotionTokens.js";
-import { SpringMotionConfig } from "./SpringMotionConfig.js";
-import React, { cloneElement, forwardRef, isValidElement, useImperativeHandle, useMemo, useRef } from "react";
-import { buttonIconSvgSize } from "@yahoo/uds/fixtures";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Progress } from "@yahoo/uds-icons";
-import { AnimatePresence, m, useReducedMotion } from "motion/react";
-
-//#region src/components/client/Button.tsx
-/**
-* **🖲️ A button element that can be used to trigger an action**
-*
-* @componentType Client component
-*
-* @description A button is a fundamental component used to trigger an action or event. Buttons are interactive elements that users can click, tap, or otherwise engage with to submit forms, open dialogues, or perform any other interaction within an application or website. Consider an IconButton for buttons that only contain an icon.
-*
-* @see The {@link https://uds.build/docs/components/button Button Docs} for more info
-*
-* @example
-* ```tsx
-* 'use client';
-* import { Button, HStack } from "@yahoo/uds";
-*
-* export function Demo() {
-*   return (
-*     <HStack gap="2">
-*       <Button onClick={console.log}>Save</Button>
-*       <Button variant="secondary" onClick={console.log}>Cancel</Button>
-*     </HStack>
-*   )
-* }
-* ```
-*
-* @usage
-* Buttons should be used to clearly indicate and initiate actions that users can take.
-*
-* @related [Icon](https://uds.build/docs/components/icon), [IconButton](https://uds.build/docs/components/icon-button), [Pressable](https://uds.build/docs/components/pressable)
-**/
-const Button = forwardRef(function Button$1({ variant, size: buttonSize, startIcon, endIcon, iconVariant, loading, disableEffects, children, asChild, type = "button", className, width,...rest }, forwardedRef) {
-	const ref = useRef(null);
-	useImperativeHandle(forwardedRef, () => ref.current);
-	const Slot = useMemo(() => createSlot(), []);
-	const MotionSlot = useMemo(() => m.create(Slot), [Slot]);
-	const endVariant = endIcon ? "icon" : "hide";
-	const gapVariant = getGapVariant({
-		startIcon,
-		endIcon,
-		loading
-	});
-	const startVariant = getStartVariant({
-		loading,
-		startIcon
-	});
-	const { palette: buttonPalette_DEPRECATED, variant: buttonVariant_DEPRECATED } = useMemo(() => parseDeprecatedButtonPaletteVariant({ flatVariant: variant }), [variant]);
-	const classNames = useMemo(() => ({
-		button: getStyles({
-			width,
-			buttonSize,
-			buttonVariant: buttonVariant_DEPRECATED,
-			buttonPalette: buttonPalette_DEPRECATED,
-			className: cx("uds-button", "uds-ring", "uds-hit-target", loading && "uds-button-loading", disableEffects && "uds-button-without-effects", gapVariant === "withIcon" && "uds-button-with-gap", className)
-		}),
-		content: "uds-button-content truncate",
-		iconContainer: "uds-button-icon-container flex overflow-clip",
-		loading: "uds-button-icon start-content animate-spin",
-		start: "uds-button-icon start-content",
-		end: "uds-button-icon end-content"
-	}), [
-		width,
-		buttonSize,
-		buttonVariant_DEPRECATED,
-		buttonPalette_DEPRECATED,
-		className,
-		loading,
-		disableEffects,
-		gapVariant
-	]);
-	const layoutVariant = useReducedMotion() ? "smooth" : "subtle";
-	/**
-	* TODO see if we can get these to work as ReactElements like (ie <StartContent />)
-	* Animations aren't currently propagating if I do that
-	**/
-	const startContent = useMemo(() => /* @__PURE__ */ jsx(m.span, {
-		className: classNames.iconContainer,
-		initial: false,
-		variants: iconContainerMotionVariants,
-		animate: startVariant,
-		children: /* @__PURE__ */ jsxs(AnimatePresence, {
-			initial: false,
-			mode: "popLayout",
-			children: [loading && /* @__PURE__ */ jsx(m.span, {
-				variants: loadingMotionVariants,
-				initial: "hide",
-				animate: "loading",
-				exit: "hide",
-				children: /* @__PURE__ */ jsx(Icon, {
-					size: buttonIconSvgSize,
-					name: Progress,
-					variant: iconVariant,
-					color: "current",
-					className: classNames.loading
-				})
-			}, "loading"), startIcon && !loading && /* @__PURE__ */ jsx(m.span, {
-				variants: iconMotionVariants,
-				initial: "hide",
-				animate: "icon",
-				exit: "hide",
-				children: /* @__PURE__ */ jsx(IconSlot, {
-					className: classNames.start,
-					icon: startIcon,
-					iconProps: {
-						size: buttonIconSvgSize,
-						variant: iconVariant,
-						color: "current"
-					}
-				})
-			})]
-		})
-	}), [
-		classNames.iconContainer,
-		classNames.loading,
-		classNames.start,
-		startVariant,
-		loading,
-		iconVariant,
-		startIcon
-	]);
-	const endContent = useMemo(() => /* @__PURE__ */ jsx(m.span, {
-		className: classNames.iconContainer,
-		initial: false,
-		variants: iconContainerMotionVariants,
-		animate: endVariant,
-		children: /* @__PURE__ */ jsx(AnimatePresence, {
-			initial: false,
-			mode: "popLayout",
-			children: endIcon && /* @__PURE__ */ jsx(m.span, {
-				variants: iconMotionVariants,
-				initial: "hide",
-				animate: "icon",
-				exit: "hide",
-				children: /* @__PURE__ */ jsx(IconSlot, {
-					className: classNames.end,
-					icon: endIcon,
-					iconProps: {
-						size: buttonIconSvgSize,
-						variant: iconVariant,
-						color: "current"
-					}
-				})
-			})
-		})
-	}), [
-		classNames.iconContainer,
-		classNames.end,
-		endIcon,
-		endVariant,
-		iconVariant
-	]);
-	const buttonVariants$1 = useMemo(() => {
-		if (!disableEffects) return buttonMotionVariants;
-		return {
-			...buttonMotionVariants,
-			rest: {},
-			hover: {},
-			pressed: {}
-		};
-	}, [disableEffects]);
-	if (asChild && isValidElement(children)) return /* @__PURE__ */ jsx(SpringMotionConfig, {
-		layoutSpeed: "3",
-		layoutVariant,
-		children: /* @__PURE__ */ jsx(MotionSlot, {
-			type,
-			className: classNames.button,
-			initial: ["hide", gapVariant],
-			animate: gapVariant,
-			variants: buttonVariants$1,
-			whileHover: "hover",
-			whileTap: "pressed",
-			...rest,
-			children: cloneElement(children, children.props, /* @__PURE__ */ jsxs(Fragment, { children: [
-				startContent,
-				/* @__PURE__ */ jsx("span", {
-					className: classNames.content,
-					children: children.props.children
-				}),
-				endContent
-			] }))
-		})
-	});
-	return /* @__PURE__ */ jsx(SpringMotionConfig, {
-		layoutSpeed: "3",
-		layoutVariant,
-		children: /* @__PURE__ */ jsxs(m.button, {
-			ref,
-			type,
-			className: classNames.button,
-			initial: ["hide", gapVariant],
-			animate: gapVariant,
-			variants: buttonVariants$1,
-			whileHover: "hover",
-			whileTap: "pressed",
-			...rest,
-			children: [
-				startContent,
-				/* @__PURE__ */ jsx("span", {
-					className: classNames.content,
-					children
-				}),
-				endContent
-			]
-		})
-	});
-});
-Button.displayName = "Button";
-
-//#endregion
-export { Button };
-//# sourceMappingURL=Button.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Button.js","names":["Button","layoutVariant: MotionVariant","buttonVariants"],"sources":["../../../src/components/client/Button.tsx"],"sourcesContent":["import { buttonIconSvgSize } from '@yahoo/uds/fixtures';\nimport type { MotionVariant, UniversalButtonProps } 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 type { ForwardRefExoticComponent } from 'react';\nimport React, {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { cx, getStyles } from '../../styles/styler';\nimport {\n  buttonMotionVariants,\n  getGapVariant,\n  getStartVariant,\n  iconContainerMotionVariants,\n  iconMotionVariants,\n  loadingMotionVariants,\n} from '../../tokens/consts/buttonMotionTokens';\nimport { createSlot } from '../../utils/createSlot';\nimport { Icon } from '../Icon';\nimport { IconSlot } from '../IconSlot';\nimport { SpringMotionConfig } from './SpringMotionConfig';\n\ntype HtmlButtonProps = Omit<HTMLMotionProps<'button'>, 'color' | 'name'> &\n  Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;\n\ninterface ButtonProps extends HtmlButtonProps, UniversalButtonProps {}\n\n/**\n * **🖲️ A button element that can be used to trigger an action**\n *\n * @componentType Client component\n *\n * @description A button is a fundamental component used to trigger an action or event. Buttons are interactive elements that users can click, tap, or otherwise engage with to submit forms, open dialogues, or perform any other interaction within an application or website. Consider an IconButton for buttons that only contain an icon.\n *\n * @see The {@link https://uds.build/docs/components/button Button Docs} for more info\n *\n * @example\n * ```tsx\n * 'use client';\n * import { Button, HStack } from \"@yahoo/uds\";\n *\n * export function Demo() {\n *   return (\n *     <HStack gap=\"2\">\n *       <Button onClick={console.log}>Save</Button>\n *       <Button variant=\"secondary\" onClick={console.log}>Cancel</Button>\n *     </HStack>\n *   )\n * }\n * ```\n *\n * @usage\n * Buttons should be used to clearly indicate and initiate actions that users can take.\n *\n * @related [Icon](https://uds.build/docs/components/icon), [IconButton](https://uds.build/docs/components/icon-button), [Pressable](https://uds.build/docs/components/pressable)\n **/\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    // Button config props\n    variant,\n    size: buttonSize,\n    // Icon props\n    startIcon,\n    endIcon,\n    iconVariant,\n    // State props\n    loading,\n    disableEffects,\n    // Misc props\n    children,\n    asChild,\n    // HTML props (className, disabled, aria-*, data-*, onClick, etc.)\n    type = 'button',\n    className,\n    // Size props\n    width,\n    ...rest\n  },\n  forwardedRef,\n) {\n  /* ------------------------------- Setup refs ------------------------------- */\n  const ref = useRef<HTMLButtonElement>(null);\n  useImperativeHandle(forwardedRef, () => ref.current as HTMLButtonElement);\n\n  /* --------------------------- Create motion slot --------------------------- */\n  const Slot = useMemo(() => createSlot<ForwardRefExoticComponent<HtmlButtonProps>>(), []);\n  const MotionSlot = useMemo(() => m.create(Slot), [Slot]);\n\n  /* -------------------------------- Variants -------------------------------- */\n  const endVariant = endIcon ? 'icon' : 'hide';\n  const gapVariant = getGapVariant({ startIcon, endIcon, loading });\n  const startVariant = getStartVariant({ loading, startIcon });\n\n  const { palette: buttonPalette_DEPRECATED, variant: buttonVariant_DEPRECATED } = useMemo(\n    () => parseDeprecatedButtonPaletteVariant({ flatVariant: variant }),\n    [variant],\n  );\n\n  /* ---------------------------- Setup classNames ---------------------------- */\n  const classNames = useMemo(\n    () => ({\n      button: getStyles({\n        width,\n        buttonSize,\n        buttonVariant: buttonVariant_DEPRECATED,\n        buttonPalette: buttonPalette_DEPRECATED,\n        className: cx(\n          // Base class name\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          gapVariant === 'withIcon' && 'uds-button-with-gap',\n\n          // Consumer class names\n          className,\n        ),\n      }),\n      content: 'uds-button-content truncate',\n      iconContainer: 'uds-button-icon-container flex overflow-clip',\n      loading: 'uds-button-icon start-content animate-spin',\n      start: 'uds-button-icon start-content',\n      end: 'uds-button-icon end-content',\n    }),\n    [\n      width,\n      buttonSize,\n      buttonVariant_DEPRECATED,\n      buttonPalette_DEPRECATED,\n      className,\n      loading,\n      disableEffects,\n      gapVariant,\n    ],\n  );\n\n  /* --------------------- Motion config setup for button --------------------- */\n  const prefersReducedMotion = useReducedMotion();\n  const layoutVariant: MotionVariant = prefersReducedMotion ? 'smooth' : 'subtle';\n\n  /* -------------------------- Start and end content ------------------------- */\n\n  /**\n   * TODO see if we can get these to work as ReactElements like (ie <StartContent />)\n   * Animations aren't currently propagating if I do that\n   **/\n\n  const startContent = useMemo(\n    () => (\n      <m.span\n        className={classNames.iconContainer}\n        initial={false}\n        variants={iconContainerMotionVariants}\n        animate={startVariant}\n      >\n        <AnimatePresence initial={false} mode=\"popLayout\">\n          {loading && (\n            <m.span\n              key=\"loading\"\n              variants={loadingMotionVariants}\n              initial=\"hide\"\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          {startIcon && !loading && (\n            <m.span variants={iconMotionVariants} initial=\"hide\" animate=\"icon\" exit=\"hide\">\n              <IconSlot\n                className={classNames.start}\n                icon={startIcon}\n                iconProps={{\n                  size: buttonIconSvgSize,\n                  variant: iconVariant,\n                  color: 'current',\n                }}\n              />\n            </m.span>\n          )}\n        </AnimatePresence>\n      </m.span>\n    ),\n    [\n      classNames.iconContainer,\n      classNames.loading,\n      classNames.start,\n      startVariant,\n      loading,\n      iconVariant,\n      startIcon,\n    ],\n  );\n\n  const endContent = useMemo(\n    () => (\n      <m.span\n        className={classNames.iconContainer}\n        initial={false}\n        variants={iconContainerMotionVariants}\n        animate={endVariant}\n      >\n        <AnimatePresence initial={false} mode=\"popLayout\">\n          {endIcon && (\n            <m.span variants={iconMotionVariants} initial=\"hide\" animate=\"icon\" exit=\"hide\">\n              <IconSlot\n                className={classNames.end}\n                icon={endIcon}\n                iconProps={{\n                  size: buttonIconSvgSize,\n                  variant: iconVariant,\n                  color: 'current',\n                }}\n              />\n            </m.span>\n          )}\n        </AnimatePresence>\n      </m.span>\n    ),\n    [classNames.iconContainer, classNames.end, endIcon, endVariant, iconVariant],\n  );\n\n  const buttonVariants = useMemo(() => {\n    if (!disableEffects) {\n      return buttonMotionVariants;\n    }\n    return {\n      ...buttonMotionVariants,\n      rest: {},\n      hover: {},\n      pressed: {},\n    };\n  }, [disableEffects]);\n\n  /* -------------------------------------------------------------------------- */\n  /*                                 The button                                 */\n  /* -------------------------------------------------------------------------- */\n\n  /* ---------------------------------- TODO ---------------------------------- */\n  /* ----------------------------- Button asChild ----------------------------- */\n  /* ------------ Remove this cloneElement stuff when UD-734 lands ------------ */\n  if (asChild && isValidElement(children)) {\n    return (\n      <SpringMotionConfig layoutSpeed=\"3\" layoutVariant={layoutVariant}>\n        <MotionSlot\n          type={type}\n          className={classNames.button}\n          initial={['hide', gapVariant]}\n          animate={gapVariant}\n          variants={buttonVariants}\n          whileHover=\"hover\"\n          whileTap=\"pressed\"\n          {...rest}\n        >\n          {cloneElement(\n            children,\n            children.props,\n            <>\n              {startContent}\n              <span className={classNames.content}>{children.props.children}</span>\n              {endContent}\n            </>,\n          )}\n        </MotionSlot>\n      </SpringMotionConfig>\n    );\n  }\n  /* -------------------------------- End TODO -------------------------------- */\n\n  /* ----------------------------- Standard button ---------------------------- */\n  return (\n    <SpringMotionConfig layoutSpeed=\"3\" layoutVariant={layoutVariant}>\n      <m.button\n        ref={ref}\n        type={type}\n        className={classNames.button}\n        initial={['hide', gapVariant]}\n        animate={gapVariant}\n        variants={buttonVariants}\n        whileHover=\"hover\"\n        whileTap=\"pressed\"\n        {...rest}\n      >\n        {startContent}\n        <span className={classNames.content}>{children}</span>\n        {endContent}\n      </m.button>\n    </SpringMotionConfig>\n  );\n});\n\nButton.displayName = 'Button';\n\nexport { Button, type ButtonProps };\n"],"mappings":"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"}