@yahoo/uds 3.159.1 → 3.160.0

package/dist/components/client/Button.js

@@ -1,321 +0,0 @@
-/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-"use client";
-import { BUTTON_GAP_VAR, BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST } from "../../css-tokens/dist/index.js";
-import { cx, getStyles } from "../../styles/styler.js";
-import { createSlot } from "../../utils/createSlot.js";
-import { Icon } from "../Icon.js";
-import { IconSlot } from "../IconSlot.js";
-import { generateDefaultClassName } from "../../automated-config/dist/utils/generateDefaultClassName.js";
-import "./buttonConstants.js";
-import { SpringMotionConfig } from "./SpringMotionConfig.js";
-import { Progress } from "@yahoo/uds-icons";
-import { cloneElement, forwardRef, isValidElement, useImperativeHandle, useMemo, useRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { AnimatePresence, m, useReducedMotion } from "motion/react";
-//#region src/components/client/Button.tsx
-const iconContainerMotionVariants = {
-	hide: {
-		display: "none",
-		width: "0px",
-		opacity: 0
-	},
-	loading: {
-		display: "flex",
-		width: "auto",
-		opacity: 1
-	},
-	icon: {
-		display: "flex",
-		width: "auto",
-		opacity: 1
-	}
-};
-const SCALE_DOWN = .7;
-const hiddenState = {
-	scale: SCALE_DOWN,
-	opacity: 0
-};
-const visibleState = {
-	scale: [
-		SCALE_DOWN,
-		SCALE_DOWN,
-		1
-	],
-	opacity: [
-		0,
-		0,
-		1
-	],
-	transition: { times: [
-		0,
-		.5,
-		1
-	] }
-};
-const iconMotionVariants = {
-	hide: hiddenState,
-	icon: visibleState,
-	loading: hiddenState
-};
-const loadingMotionVariants = {
-	hide: hiddenState,
-	icon: hiddenState,
-	loading: visibleState
-};
-function getGapVariant({ startIcon, endIcon, loading }) {
-	if (loading || startIcon || endIcon) return "withIcon";
-	return "withoutIcon";
-}
-function getStartVariant({ loading, startIcon }) {
-	if (loading) return "loading";
-	if (startIcon) return "icon";
-	return "hide";
-}
-const defaultVariantRootClass = generateDefaultClassName("button", "variant", "root");
-const defaultVariantIconClass = generateDefaultClassName("button", "variant", "icon");
-const defaultSizeRootClass = generateDefaultClassName("button", "size", "root");
-const defaultSizeIconClass = generateDefaultClassName("button", "size", "icon");
-/**
-* **🖲️ 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({ size, variant, startIcon, endIcon, iconVariant, loading, disableEffects, children, asChild = false, slotProps, type = "button", className, width, ...rest }, forwardedRef) {
-	const ref = useRef(null);
-	useImperativeHandle(forwardedRef, () => ref.current);
-	const { className: startIconClassName, ...startIconSlotProps } = slotProps?.startIcon ?? {};
-	const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
-	const { className: contentClassName, ...contentSlotProps } = slotProps?.content ?? {};
-	const prefersReducedMotion = useReducedMotion();
-	const disableMotion = !!disableEffects || !!rest?.disabled;
-	const layoutVariant = prefersReducedMotion ? "smooth" : "subtle";
-	const endVariant = endIcon ? "icon" : "hide";
-	const gapVariant = getGapVariant({
-		startIcon,
-		endIcon,
-		loading
-	});
-	const startVariant = getStartVariant({
-		loading,
-		startIcon
-	});
-	const Slot = useMemo(() => createSlot(), []);
-	const MotionSlot = useMemo(() => m.create(Slot), [Slot]);
-	const buttonVariants = useMemo(() => ({
-		rest: { scale: disableMotion ? 1 : `var(${BUTTON_SCALE_EFFECT_REST})` },
-		hover: { scale: disableMotion ? 1 : `var(${BUTTON_SCALE_EFFECT_HOVER})` },
-		pressed: { scale: disableMotion ? 1 : `var(${BUTTON_SCALE_EFFECT_PRESSED})` },
-		withIcon: { columnGap: `var(${BUTTON_GAP_VAR})` },
-		withoutIcon: { columnGap: "0px" }
-	}), [disableMotion]);
-	const rootSizeClass = useMemo(() => size ? getStyles({ buttonSizeRoot: size }) : defaultSizeRootClass, [size]);
-	const rootVariantClass = useMemo(() => variant ? getStyles({ buttonVariantRoot: variant }) : defaultVariantRootClass, [variant]);
-	const iconSizeClass = useMemo(() => size ? getStyles({ buttonSizeIcon: size }) : defaultSizeIconClass, [size]);
-	const iconVariantClass = useMemo(() => variant ? getStyles({ buttonVariantIcon: variant }) : defaultVariantIconClass, [variant]);
-	const styles = useMemo(() => ({
-		root: getStyles({
-			width,
-			className: cx([
-				"uds-ring",
-				"uds-hit-target",
-				"inline-flex max-w-full overflow-hidden justify-center items-center whitespace-nowrap select-none",
-				"[transform-origin:center]",
-				"[backface-visibility:hidden]",
-				"[transition-property:color,background-color,border-color,box-shadow,text-decoration-color,fill,stroke]",
-				"[transition-timing-function:cubic-bezier(0,0,0.2,1)]",
-				"[transition-duration:220ms]",
-				rootSizeClass,
-				rootVariantClass,
-				rest?.disabled && "cursor-not-allowed",
-				loading && "uds-button-loading",
-				disableEffects && "uds-button-without-effects",
-				gapVariant === "withIcon" && "uds-button-with-gap",
-				className
-			])
-		}),
-		iconContainer: "flex shrink-0 overflow-clip uds-button-icon-container",
-		icon: getStyles({ className: cx([iconSizeClass, iconVariantClass]) }),
-		loadingIcon: getStyles({ className: cx([
-			"animate-spin",
-			iconSizeClass,
-			iconVariantClass
-		]) }),
-		content: cx(["min-w-0 truncate"])
-	}), [
-		className,
-		disableEffects,
-		gapVariant,
-		iconSizeClass,
-		iconVariantClass,
-		loading,
-		rest?.disabled,
-		rootSizeClass,
-		rootVariantClass,
-		width
-	]);
-	const startContent = useMemo(() => /* @__PURE__ */ jsx(m.span, {
-		className: styles.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, {
-					className: styles.loadingIcon,
-					size: "sm",
-					name: Progress,
-					variant: iconVariant,
-					color: "current"
-				})
-			}, "loading"), startIcon && !loading && /* @__PURE__ */ jsx(m.span, {
-				variants: iconMotionVariants,
-				initial: "hide",
-				animate: "icon",
-				exit: "hide",
-				children: /* @__PURE__ */ jsx(IconSlot, {
-					className: cx(styles.icon, startIconClassName),
-					icon: startIcon,
-					iconProps: {
-						size: "sm",
-						variant: iconVariant,
-						color: "current"
-					},
-					...startIconSlotProps
-				})
-			})]
-		})
-	}), [
-		styles,
-		iconVariant,
-		loading,
-		startIcon,
-		startVariant,
-		startIconClassName,
-		startIconSlotProps
-	]);
-	const endContent = useMemo(() => /* @__PURE__ */ jsx(m.span, {
-		className: styles.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: cx(styles.icon, endIconClassName),
-					icon: endIcon,
-					iconProps: {
-						size: "sm",
-						variant: iconVariant,
-						color: "current"
-					},
-					...endIconSlotProps
-				})
-			})
-		})
-	}), [
-		endIcon,
-		styles,
-		iconVariant,
-		endVariant,
-		endIconClassName,
-		endIconSlotProps
-	]);
-	if (asChild && isValidElement(children)) {
-		const childProps = children.props;
-		return /* @__PURE__ */ jsx(SpringMotionConfig, {
-			layoutSpeed: "3",
-			layoutVariant,
-			children: /* @__PURE__ */ jsx(MotionSlot, {
-				type,
-				className: styles.root,
-				initial: ["rest", gapVariant],
-				animate: [
-					"hide",
-					"rest",
-					gapVariant
-				],
-				variants: buttonVariants,
-				whileHover: "hover",
-				whileTap: "pressed",
-				...rest,
-				children: cloneElement(children, childProps, /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					startContent,
-					/* @__PURE__ */ jsx("span", {
-						className: cx(styles.content, contentClassName),
-						...contentSlotProps,
-						children: children.props.children
-					}),
-					endContent
-				] }))
-			})
-		});
-	}
-	return /* @__PURE__ */ jsx(SpringMotionConfig, {
-		layoutSpeed: "3",
-		layoutVariant,
-		children: /* @__PURE__ */ jsxs(m.button, {
-			ref,
-			type,
-			className: styles.root,
-			initial: ["rest", gapVariant],
-			animate: [
-				"hide",
-				"rest",
-				gapVariant
-			],
-			variants: buttonVariants,
-			whileHover: "hover",
-			whileTap: "pressed",
-			...rest,
-			children: [
-				startContent,
-				/* @__PURE__ */ jsx("span", {
-					className: cx(styles.content, contentClassName),
-					...contentSlotProps,
-					children
-				}),
-				endContent
-			]
-		})
-	});
-});
-Button.displayName = "Button";
-//#endregion
-export { Button, iconMotionVariants, loadingMotionVariants };

package/dist/components/client/IconButton.cjs

@@ -1,161 +0,0 @@
-/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-"use client";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../../_virtual/_rolldown/runtime.cjs");
-const require_index = require("../../css-tokens/dist/index.cjs");
-const require_styles_styler = require("../../styles/styler.cjs");
-const require_utils_createSlot = require("../../utils/createSlot.cjs");
-const require_components_Icon = require("../Icon.cjs");
-const require_generateDefaultClassName = require("../../automated-config/dist/utils/generateDefaultClassName.cjs");
-require("./buttonConstants.cjs");
-const require_components_client_SpringMotionConfig = require("./SpringMotionConfig.cjs");
-const require_components_client_Button = require("./Button.cjs");
-let _yahoo_uds_icons = require("@yahoo/uds-icons");
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-let motion_react = require("motion/react");
-//#region src/components/client/IconButton.tsx
-const defaultSizeRootClass = require_generateDefaultClassName.generateDefaultClassName("iconbutton", "size", "root");
-const defaultSizeIconClass = require_generateDefaultClassName.generateDefaultClassName("iconbutton", "size", "icon");
-const defaultVariantRootClass = require_generateDefaultClassName.generateDefaultClassName("button", "variant", "root");
-const defaultVariantIconClass = require_generateDefaultClassName.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({ variant, size, iconVariant, loading, disableEffects, name, asChild = false, slotProps, type = "button", htmlName, className, children, ...rest }, forwardedRef) {
-	const ref = (0, react.useRef)(null);
-	(0, react.useImperativeHandle)(forwardedRef, () => ref.current);
-	const { className: iconSlotClassName, ...iconSlotProps } = slotProps?.icon ?? {};
-	const prefersReducedMotion = (0, motion_react.useReducedMotion)();
-	const disableMotion = !!disableEffects || !!rest?.disabled;
-	const layoutVariant = (0, react.useMemo)(() => prefersReducedMotion ? "smooth" : "subtle", [prefersReducedMotion]);
-	const Slot = (0, react.useMemo)(() => require_utils_createSlot.createSlot(), []);
-	const MotionSlot = (0, react.useMemo)(() => motion_react.m.create(Slot), [Slot]);
-	const buttonVariants = (0, react.useMemo)(() => ({
-		rest: { scale: disableMotion ? 1 : `var(${require_index.BUTTON_SCALE_EFFECT_REST})` },
-		hover: { scale: disableMotion ? 1 : `var(${require_index.BUTTON_SCALE_EFFECT_HOVER})` },
-		pressed: { scale: disableMotion ? 1 : `var(${require_index.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
-	]);
-	const iconContent = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(motion_react.AnimatePresence, {
-		initial: false,
-		mode: "popLayout",
-		children: [loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
-			variants: require_components_client_Button.loadingMotionVariants,
-			initial: "loading",
-			animate: "loading",
-			exit: "hide",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
-				size: "sm",
-				name: _yahoo_uds_icons.Progress,
-				variant: iconVariant,
-				color: "current",
-				className: styles.loadingIcon
-			})
-		}, "loading"), name && !loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
-			variants: require_components_client_Button.iconMotionVariants,
-			initial: "icon",
-			animate: "icon",
-			exit: "hide",
-			children: !asChild && children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
-				size: "sm",
-				name,
-				variant: iconVariant,
-				color: "current",
-				className: require_styles_styler.cx(styles.icon, iconSlotClassName),
-				...iconSlotProps
-			})
-		}, name.name)]
-	}), [
-		asChild,
-		children,
-		iconSlotClassName,
-		iconSlotProps,
-		iconVariant,
-		loading,
-		name,
-		styles
-	]);
-	if (asChild && (0, react.isValidElement)(children)) {
-		const childProps = children.props;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
-			layoutSpeed: "3",
-			layoutVariant,
-			reducedMotion: disableEffects ? "always" : "user",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MotionSlot, {
-				type,
-				className: styles.root,
-				initial: "icon",
-				variants: buttonVariants,
-				whileHover: "hover",
-				whileTap: "pressed",
-				...rest,
-				children: (0, react.cloneElement)(children, childProps, iconContent)
-			})
-		});
-	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
-		layoutSpeed: "3",
-		layoutVariant,
-		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: iconContent
-		})
-	});
-});
-IconButton.displayName = "IconButton";
-//#endregion
-exports.IconButton = IconButton;

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

@@ -1,46 +0,0 @@
-
-import { IconPropsWithSVGProps, UniversalIconButtonProps } from "../../tokens/types.cjs";
-import * as _$react from "react";
-import { ForwardRefExoticComponent } from "react";
-import { HTMLMotionProps } from "motion/react";
-
-//#region src/components/client/IconButton.d.ts
-type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'> & Omit<HTMLMotionProps<'button'>, 'name'>;
-type DataAttributes = {
-  [name: `data-${string}`]: string;
-};
-interface IconButtonProps extends HtmlButtonProps, UniversalIconButtonProps {
-  /** Props to be passed into various slots within the component. */
-  slotProps?: {
-    icon?: Partial<IconPropsWithSVGProps & DataAttributes>;
-  };
-}
-/**
- * **⚙️️ 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: ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
-//#endregion
-export { IconButton, type IconButtonProps };

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

@@ -1,47 +0,0 @@
-
-"use client";
-import { IconPropsWithSVGProps, UniversalIconButtonProps } from "../../tokens/types.js";
-import * as _$react from "react";
-import { ForwardRefExoticComponent } from "react";
-import { HTMLMotionProps } from "motion/react";
-
-//#region src/components/client/IconButton.d.ts
-type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'> & Omit<HTMLMotionProps<'button'>, 'name'>;
-type DataAttributes = {
-  [name: `data-${string}`]: string;
-};
-interface IconButtonProps extends HtmlButtonProps, UniversalIconButtonProps {
-  /** Props to be passed into various slots within the component. */
-  slotProps?: {
-    icon?: Partial<IconPropsWithSVGProps & DataAttributes>;
-  };
-}
-/**
- * **⚙️️ 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: ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
-//#endregion
-export { IconButton, type IconButtonProps };