@yahoo/uds 3.58.1 → 3.59.0-beta.1

package/dist/components/client/Avatar/utils.d.ts

@@ -0,0 +1,44 @@
+import { AvatarAbbreviationStrategy, AvatarSize, AvatarVariant, UniversalAvatarProps } from "../../../tokens/types.js";
+import "../../../tokens/index.js";
+import { getStyles } from "../../../styles/styler.js";
+
+//#region src/components/client/Avatar/utils.d.ts
+
+/**
+ * Generates an abbreviation from a name using a specified strategy.
+ *
+ * @param name - The full name.
+ * @param strategy - Abbreviation strategy key or custom function.
+ * @returns The generated abbreviation.
+ */
+declare const generateAvatarAbbreviation: (name?: string, strategy?: AvatarAbbreviationStrategy) => string;
+/**
+ * Builds the root CSS classes for the Avatar.
+ *
+ * @param size - The size of the Avatar.
+ * @returns A string of CSS classes.
+ */
+declare const buildAvatarRootClasses: (size?: UniversalAvatarProps["size"], styles?: Parameters<typeof getStyles>[0]) => string;
+declare const buildInlineSizeStyles: (customSize?: UniversalAvatarProps["customSize"]) => {
+  root: {
+    height: number;
+    width: number;
+  } | {
+    height?: undefined;
+    width?: undefined;
+  };
+  contents: {
+    boxSizing: "content-box";
+    height: number;
+    width: number;
+  } | {
+    boxSizing: "content-box";
+    height?: undefined;
+    width?: undefined;
+  };
+};
+declare const DEFAULT_AVATAR_VARIANT: AvatarVariant;
+declare const DEFAULT_AVATAR_SIZE: AvatarSize;
+//#endregion
+export { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, buildAvatarRootClasses, buildInlineSizeStyles, generateAvatarAbbreviation };
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/client/Avatar/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","names":[],"sources":["../../../../src/components/client/Avatar/utils.ts"],"sourcesContent":[],"mappings":";;;;;;;;;AASyB,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,IAAA,CAAA,CAAA,CAAA,GAAA,CAAA,IAAA,CAAA,IAAA;AA6B8B,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,QAAA,CAAA,CAAA,CAAA,YAAA,CAAA,QAAA,CAAA,GAAA,CAAA,EAAA,CAAA,MAAA,CAAA,QAAA;;;cAFjD,0BA0BK,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,QAAA,CAAA,CAAA,CAxBC,0BAwBD,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA;;AAAU,CAAA,CAAA,CAAA,MAAA,CAAA,GAAA,CAAA,IAAA,CAAA,GAAA,CAAA,OAAA,CAAA,GAAA,CAAA,GAAA,CAAA,MAAA;AAoB2C,CAAA;AAaT,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,IAAA,CAAA,CAAA,CAAA,GAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,MAAA;;;cAnCjD,gCACE,uCACG,kBAAkB;cAoBvB,qCAAsC;;;;;;;;;;;;;;;;;;cAatC,wBAAwB;cACxB,qBAAqB"}

package/dist/components/client/Avatar/utils.js

@@ -0,0 +1,61 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { cx, getStyles } from "../../../styles/styler.js";
+import { isFunction } from "lodash-es";
+
+//#region src/components/client/Avatar/utils.ts
+/** Strategies for generating text abbreviation */
+const abbrevStrategies = {
+	first: (initials) => initials[0] ?? "",
+	last: (initials) => initials[initials.length - 1] ?? "",
+	firstAndLast: (initials) => initials.length === 1 ? initials[0] : `${initials[0]}${initials[initials.length - 1]}`,
+	firstTwo: (initials) => initials.slice(0, 2).join(""),
+	firstThree: (initials) => initials.slice(0, 3).join(""),
+	firstOfEach: (initials) => initials.join("")
+};
+/**
+* Generates an abbreviation from a name using a specified strategy.
+*
+* @param name - The full name.
+* @param strategy - Abbreviation strategy key or custom function.
+* @returns The generated abbreviation.
+*/
+const generateAvatarAbbreviation = (name, strategy = "firstAndLast") => {
+	if (!name) return "";
+	if (isFunction(strategy)) return strategy(name);
+	const initials = name.trim().split(/\s+/).map((word) => word[0].toUpperCase());
+	return abbrevStrategies[strategy](initials);
+};
+/**
+* Builds the root CSS classes for the Avatar.
+*
+* @param size - The size of the Avatar.
+* @returns A string of CSS classes.
+*/
+const buildAvatarRootClasses = (size = "md", styles) => {
+	const { className: stylesClassName,...restStyles } = styles ?? {};
+	return getStyles({
+		avatarSizeRoot: size,
+		...restStyles,
+		className: cx("shrink-0", "text-center", "inline-flex", "justify-center", "items-center", "overflow-visible", "truncate", stylesClassName)
+	});
+};
+const buildInlineSizeStyles = (customSize) => {
+	const rootStyles = customSize ? {
+		height: customSize,
+		width: customSize
+	} : {};
+	return {
+		root: rootStyles,
+		contents: {
+			...rootStyles,
+			boxSizing: "content-box"
+		}
+	};
+};
+const DEFAULT_AVATAR_VARIANT = "primary";
+const DEFAULT_AVATAR_SIZE = "md";
+
+//#endregion
+export { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, buildAvatarRootClasses, buildInlineSizeStyles, generateAvatarAbbreviation };
+//# sourceMappingURL=utils.js.map

package/dist/components/client/Avatar/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../../../src/components/client/Avatar/utils.ts"],"sourcesContent":["import { isFunction } from 'lodash';\nimport type { CSSProperties } from 'react';\n\nimport { cx, getStyles } from '../../../styles/styler';\nimport type {\n  AvatarAbbreviationStrategy,\n  AvatarSize,\n  AvatarVariant,\n  UniversalAvatarProps,\n} from '../../../tokens';\n\n/** Strategies for generating text abbreviation */\nconst abbrevStrategies: Record<\n  Extract<AvatarAbbreviationStrategy, string>,\n  (initials: string[]) => string\n> = {\n  first: (initials) => initials[0] ?? '',\n  last: (initials) => initials[initials.length - 1] ?? '',\n  firstAndLast: (initials) =>\n    initials.length === 1 ? initials[0] : `${initials[0]}${initials[initials.length - 1]}`,\n  firstTwo: (initials) => initials.slice(0, 2).join(''),\n  firstThree: (initials) => initials.slice(0, 3).join(''),\n  firstOfEach: (initials) => initials.join(''),\n};\n\n/* -------------------------------------------------------------------------- */\n/*                              Helper Functions                              */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Generates an abbreviation from a name using a specified strategy.\n *\n * @param name - The full name.\n * @param strategy - Abbreviation strategy key or custom function.\n * @returns The generated abbreviation.\n */\nconst generateAvatarAbbreviation = (\n  name?: string,\n  strategy: AvatarAbbreviationStrategy = 'firstAndLast',\n): string => {\n  if (!name) {\n    return '';\n  }\n\n  if (isFunction(strategy)) {\n    return strategy(name);\n  }\n\n  const words = name.trim().split(/\\s+/);\n  const initials = words.map((word) => word[0].toUpperCase());\n\n  return abbrevStrategies[strategy](initials);\n};\n\n/**\n * Builds the root CSS classes for the Avatar.\n *\n * @param size - The size of the Avatar.\n * @returns A string of CSS classes.\n */\nconst buildAvatarRootClasses = (\n  size: UniversalAvatarProps['size'] = 'md',\n  styles?: Parameters<typeof getStyles>[0],\n): string => {\n  const { className: stylesClassName, ...restStyles } = styles ?? {};\n\n  return getStyles({\n    avatarSizeRoot: size,\n    ...restStyles,\n    className: cx(\n      'shrink-0',\n      'text-center',\n      'inline-flex',\n      'justify-center',\n      'items-center',\n      'overflow-visible',\n      'truncate',\n      stylesClassName,\n    ),\n  });\n};\n\nconst buildInlineSizeStyles = (customSize?: UniversalAvatarProps['customSize']) => {\n  const rootStyles = customSize ? { height: customSize, width: customSize } : {};\n\n  return {\n    root: rootStyles,\n\n    contents: {\n      ...rootStyles,\n      boxSizing: 'content-box',\n    } satisfies CSSProperties,\n  };\n};\n\nconst DEFAULT_AVATAR_VARIANT: AvatarVariant = 'primary';\nconst DEFAULT_AVATAR_SIZE: AvatarSize = 'md';\n\nexport {\n  buildAvatarRootClasses,\n  buildInlineSizeStyles,\n  DEFAULT_AVATAR_SIZE,\n  DEFAULT_AVATAR_VARIANT,\n  generateAvatarAbbreviation,\n};\n"],"mappings":";;;;;;AAYA,MAAM,mBAGF;CACF,QAAQ,aAAa,SAAS,MAAM;CACpC,OAAO,aAAa,SAAS,SAAS,SAAS,MAAM;CACrD,eAAe,aACb,SAAS,WAAW,IAAI,SAAS,KAAK,GAAG,SAAS,KAAK,SAAS,SAAS,SAAS;CACpF,WAAW,aAAa,SAAS,MAAM,GAAG,EAAE,CAAC,KAAK,GAAG;CACrD,aAAa,aAAa,SAAS,MAAM,GAAG,EAAE,CAAC,KAAK,GAAG;CACvD,cAAc,aAAa,SAAS,KAAK,GAAG;CAC7C;;;;;;;;AAaD,MAAM,8BACJ,MACA,WAAuC,mBAC5B;AACX,KAAI,CAAC,KACH,QAAO;AAGT,KAAI,WAAW,SAAS,CACtB,QAAO,SAAS,KAAK;CAIvB,MAAM,WADQ,KAAK,MAAM,CAAC,MAAM,MAAM,CACf,KAAK,SAAS,KAAK,GAAG,aAAa,CAAC;AAE3D,QAAO,iBAAiB,UAAU,SAAS;;;;;;;;AAS7C,MAAM,0BACJ,OAAqC,MACrC,WACW;CACX,MAAM,EAAE,WAAW,gBAAiB,GAAG,eAAe,UAAU,EAAE;AAElE,QAAO,UAAU;EACf,gBAAgB;EAChB,GAAG;EACH,WAAW,GACT,YACA,eACA,eACA,kBACA,gBACA,oBACA,YACA,gBACD;EACF,CAAC;;AAGJ,MAAM,yBAAyB,eAAoD;CACjF,MAAM,aAAa,aAAa;EAAE,QAAQ;EAAY,OAAO;EAAY,GAAG,EAAE;AAE9E,QAAO;EACL,MAAM;EAEN,UAAU;GACR,GAAG;GACH,WAAW;GACZ;EACF;;AAGH,MAAM,yBAAwC;AAC9C,MAAM,sBAAkC"}

package/dist/components/client/Badge.cjs

@@ -0,0 +1,106 @@
+"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_HStack = require('../HStack.cjs');
+const require_components_IconSlot = require('../IconSlot.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/client/Badge.tsx
+const BASE_CLASS = "uds-badge";
+const VARIANT_BASE_CLASS = "uds-badge-variant";
+const SIZE_BASE_CLASS = "uds-badge-size";
+const ICON_SIZE_BASE_CLASS = "uds-badge-iconSize";
+const ICON_COLOR_BASE_CLASS = "uds-badge-iconColor";
+const MAX_WIDTH_DEFAULT = 200;
+/**
+* **⚙️️ A badge.
+*
+* @componentType Client component
+*
+* @description
+* Badges show notifications, counts, or status information on navigation items and icons.
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/badge Badge Docs} for more info
+*
+* @usage
+* - ???
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Badge } from "@yahoo/uds";
+*
+* <Badge>Label</Badge>
+*```
+*
+* @related [Chip](https://uds.build/docs/components/chip).
+**/
+const Badge = (0, react.forwardRef)(function Badge$1({ variant = "primary", size = "md", minWidth, maxWidth = MAX_WIDTH_DEFAULT, startIcon, endIcon, backgroundColor, color, iconColor, borderColor, children, className,...rest }, ref) {
+	const rootStyles = require_styles_styler.getStyles({
+		badgeSizeRoot: size,
+		badgeVariantRoot: variant,
+		className: require_styles_styler.cx([
+			BASE_CLASS,
+			VARIANT_BASE_CLASS,
+			SIZE_BASE_CLASS,
+			className
+		])
+	});
+	const iconStyles = require_styles_styler.getStyles({
+		badgeVariantIcon: variant,
+		badgeSizeIcon: size,
+		className: require_styles_styler.cx([ICON_SIZE_BASE_CLASS, ICON_COLOR_BASE_CLASS])
+	});
+	const containerStyles = (0, react.useMemo)(() => ({
+		...minWidth ? { minWidth: `${minWidth}px` } : {},
+		...maxWidth === "full" ? {} : { maxWidth: `${maxWidth}px` },
+		...backgroundColor ? { backgroundColor } : {},
+		...borderColor ? { borderColor } : {},
+		...color ? { color } : {}
+	}), [
+		backgroundColor,
+		borderColor,
+		color,
+		maxWidth,
+		minWidth
+	]);
+	const iconProps = (0, react.useMemo)(() => ({
+		variant: "fill",
+		style: { ...iconColor ? { color: iconColor } : {} }
+	}), [iconColor]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_HStack.HStack, {
+		ref,
+		gap: "2",
+		display: "inline-flex",
+		alignItems: "center",
+		className: rootStyles,
+		style: containerStyles,
+		...rest,
+		children: [
+			startIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				icon: startIcon,
+				iconProps,
+				"data-testid": "start-icon",
+				className: iconStyles
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "flex-1 truncate whitespace-nowrap text-center",
+				children
+			}),
+			endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				icon: endIcon,
+				iconProps,
+				"data-testid": "end-icon",
+				className: iconStyles
+			})
+		]
+	});
+});
+Badge.displayName = "Badge";
+
+//#endregion
+exports.Badge = Badge;

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

@@ -0,0 +1,35 @@
+import { UniversalBadgeProps } from "../../tokens/types.cjs";
+import "../../tokens/index.cjs";
+import React from "react";
+
+//#region src/components/client/Badge.d.ts
+type HtmlDivProps = React.HTMLAttributes<HTMLDivElement>;
+interface BadgeProps extends HtmlDivProps, UniversalBadgeProps {}
+/**
+ * **⚙️️ A badge.
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Badges show notifications, counts, or status information on navigation items and icons.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/badge Badge Docs} for more info
+ *
+ * @usage
+ * - ???
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Badge } from "@yahoo/uds";
+ *
+ * <Badge>Label</Badge>
+ *```
+ *
+ * @related [Chip](https://uds.build/docs/components/chip).
+ **/
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Badge, type BadgeProps };
+//# sourceMappingURL=Badge.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.cts","names":[],"sources":["../../../src/components/client/Badge.tsx"],"sourcesContent":[],"mappings":";;;;;KAeK,YAAA,CAAA,CAAA,CAAe,KAAA,CAAM,eAAe;UAE/B,UAAA,CAAA,OAAA,CAAmB,cAAc;AAdwC,CAAA,CAAA;AAY3C,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA;AAEsB,CAAA;;;;;;;;;;;;;;;;;;;;;;cA4BxD,OAAK,KAAA,CAAA,0BAAA,aAAA,KAAA,CAAA,cAAA"}

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

@@ -0,0 +1,35 @@
+import { UniversalBadgeProps } from "../../tokens/types.js";
+import "../../tokens/index.js";
+import React from "react";
+
+//#region src/components/client/Badge.d.ts
+type HtmlDivProps = React.HTMLAttributes<HTMLDivElement>;
+interface BadgeProps extends HtmlDivProps, UniversalBadgeProps {}
+/**
+ * **⚙️️ A badge.
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Badges show notifications, counts, or status information on navigation items and icons.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/badge Badge Docs} for more info
+ *
+ * @usage
+ * - ???
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Badge } from "@yahoo/uds";
+ *
+ * <Badge>Label</Badge>
+ *```
+ *
+ * @related [Chip](https://uds.build/docs/components/chip).
+ **/
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Badge, type BadgeProps };
+//# sourceMappingURL=Badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","names":[],"sources":["../../../src/components/client/Badge.tsx"],"sourcesContent":[],"mappings":";;;;;KAeK,YAAA,CAAA,CAAA,CAAe,KAAA,CAAM,eAAe;UAE/B,UAAA,CAAA,OAAA,CAAmB,cAAc;AAdwC,CAAA,CAAA;AAY3C,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA;AAEsB,CAAA;;;;;;;;;;;;;;;;;;;;;;cA4BxD,OAAK,KAAA,CAAA,0BAAA,aAAA,KAAA,CAAA,cAAA"}

package/dist/components/client/Badge.js

@@ -0,0 +1,105 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { cx, getStyles } from "../../styles/styler.js";
+import { HStack } from "../HStack.js";
+import { IconSlot } from "../IconSlot.js";
+import React, { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/client/Badge.tsx
+const BASE_CLASS = "uds-badge";
+const VARIANT_BASE_CLASS = "uds-badge-variant";
+const SIZE_BASE_CLASS = "uds-badge-size";
+const ICON_SIZE_BASE_CLASS = "uds-badge-iconSize";
+const ICON_COLOR_BASE_CLASS = "uds-badge-iconColor";
+const MAX_WIDTH_DEFAULT = 200;
+/**
+* **⚙️️ A badge.
+*
+* @componentType Client component
+*
+* @description
+* Badges show notifications, counts, or status information on navigation items and icons.
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/badge Badge Docs} for more info
+*
+* @usage
+* - ???
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Badge } from "@yahoo/uds";
+*
+* <Badge>Label</Badge>
+*```
+*
+* @related [Chip](https://uds.build/docs/components/chip).
+**/
+const Badge = forwardRef(function Badge$1({ variant = "primary", size = "md", minWidth, maxWidth = MAX_WIDTH_DEFAULT, startIcon, endIcon, backgroundColor, color, iconColor, borderColor, children, className,...rest }, ref) {
+	const rootStyles = getStyles({
+		badgeSizeRoot: size,
+		badgeVariantRoot: variant,
+		className: cx([
+			BASE_CLASS,
+			VARIANT_BASE_CLASS,
+			SIZE_BASE_CLASS,
+			className
+		])
+	});
+	const iconStyles = getStyles({
+		badgeVariantIcon: variant,
+		badgeSizeIcon: size,
+		className: cx([ICON_SIZE_BASE_CLASS, ICON_COLOR_BASE_CLASS])
+	});
+	const containerStyles = useMemo(() => ({
+		...minWidth ? { minWidth: `${minWidth}px` } : {},
+		...maxWidth === "full" ? {} : { maxWidth: `${maxWidth}px` },
+		...backgroundColor ? { backgroundColor } : {},
+		...borderColor ? { borderColor } : {},
+		...color ? { color } : {}
+	}), [
+		backgroundColor,
+		borderColor,
+		color,
+		maxWidth,
+		minWidth
+	]);
+	const iconProps = useMemo(() => ({
+		variant: "fill",
+		style: { ...iconColor ? { color: iconColor } : {} }
+	}), [iconColor]);
+	return /* @__PURE__ */ jsxs(HStack, {
+		ref,
+		gap: "2",
+		display: "inline-flex",
+		alignItems: "center",
+		className: rootStyles,
+		style: containerStyles,
+		...rest,
+		children: [
+			startIcon && /* @__PURE__ */ jsx(IconSlot, {
+				icon: startIcon,
+				iconProps,
+				"data-testid": "start-icon",
+				className: iconStyles
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "flex-1 truncate whitespace-nowrap text-center",
+				children
+			}),
+			endIcon && /* @__PURE__ */ jsx(IconSlot, {
+				icon: endIcon,
+				iconProps,
+				"data-testid": "end-icon",
+				className: iconStyles
+			})
+		]
+	});
+});
+Badge.displayName = "Badge";
+
+//#endregion
+export { Badge };
+//# sourceMappingURL=Badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","names":["BASE_CLASS: BaseSelector<typeof BadgeConfig>","Badge"],"sources":["../../../src/components/client/Badge.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport { cx, getStyles } from '../../styles/styler';\nimport type { BadgeConfig, BaseSelector, UniversalBadgeProps } from '../../tokens';\nimport { HStack } from '../HStack';\nimport type { IconSlotProps } from '../IconSlot';\nimport { IconSlot } from '../IconSlot';\n\n// TODO: we might not need these base classes with the new system\nconst BASE_CLASS: BaseSelector<typeof BadgeConfig> = 'uds-badge';\nconst VARIANT_BASE_CLASS = 'uds-badge-variant';\nconst SIZE_BASE_CLASS = 'uds-badge-size';\nconst ICON_SIZE_BASE_CLASS = 'uds-badge-iconSize';\nconst ICON_COLOR_BASE_CLASS = 'uds-badge-iconColor';\n\ntype HtmlDivProps = React.HTMLAttributes<HTMLDivElement>;\n\ninterface BadgeProps extends HtmlDivProps, UniversalBadgeProps {}\n\nconst MAX_WIDTH_DEFAULT = 200;\n\n/**\n * **⚙️️ A badge.\n *\n * @componentType Client component\n *\n * @description\n * Badges show notifications, counts, or status information on navigation items and icons.\n *\n * @see\n * Check out the {@link https://uds.build/docs/components/badge Badge Docs} for more info\n *\n * @usage\n * - ???\n *\n * @example\n * ```tsx\n * 'use client';\n * import { Badge } from \"@yahoo/uds\";\n *\n * <Badge>Label</Badge>\n *```\n *\n * @related [Chip](https://uds.build/docs/components/chip).\n **/\nconst Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(\n  {\n    variant = 'primary',\n    size = 'md',\n    minWidth,\n    maxWidth = MAX_WIDTH_DEFAULT,\n    startIcon,\n    endIcon,\n    backgroundColor,\n    color,\n    iconColor,\n    borderColor,\n    children,\n    className,\n    ...rest\n  }: BadgeProps,\n  ref,\n) {\n  const rootStyles = getStyles({\n    badgeSizeRoot: size,\n    badgeVariantRoot: variant,\n    className: cx([BASE_CLASS, VARIANT_BASE_CLASS, SIZE_BASE_CLASS, className]),\n  });\n\n  const iconStyles = getStyles({\n    badgeVariantIcon: variant,\n    badgeSizeIcon: size,\n    className: cx([ICON_SIZE_BASE_CLASS, ICON_COLOR_BASE_CLASS]),\n  });\n\n  const containerStyles = useMemo(\n    () => ({\n      ...(minWidth ? { minWidth: `${minWidth}px` } : {}),\n      ...(maxWidth === 'full' ? {} : { maxWidth: `${maxWidth}px` }),\n      ...(backgroundColor ? { backgroundColor } : {}),\n      ...(borderColor ? { borderColor } : {}),\n      ...(color ? { color } : {}),\n    }),\n    [backgroundColor, borderColor, color, maxWidth, minWidth],\n  );\n\n  const iconProps = useMemo(\n    (): IconSlotProps['iconProps'] => ({\n      variant: 'fill',\n      style: {\n        ...(iconColor ? { color: iconColor } : {}),\n      },\n    }),\n    [iconColor],\n  );\n\n  return (\n    <HStack\n      ref={ref}\n      gap=\"2\"\n      display=\"inline-flex\"\n      alignItems=\"center\"\n      className={rootStyles}\n      style={containerStyles}\n      {...rest}\n    >\n      {startIcon && (\n        <IconSlot\n          icon={startIcon}\n          iconProps={iconProps}\n          data-testid=\"start-icon\"\n          className={iconStyles}\n        />\n      )}\n\n      <span className=\"flex-1 truncate whitespace-nowrap text-center\">{children}</span>\n\n      {endIcon && (\n        <IconSlot\n          icon={endIcon}\n          iconProps={iconProps}\n          data-testid=\"end-icon\"\n          className={iconStyles}\n        />\n      )}\n    </HStack>\n  );\n});\n\n// Need to re-set this because of the forwardRef wrapper\nBadge.displayName = 'Badge';\n\nexport { Badge, type BadgeProps };\n"],"mappings":";;;;;;;;AASA,MAAMA,aAA+C;AACrD,MAAM,qBAAqB;AAC3B,MAAM,kBAAkB;AACxB,MAAM,uBAAuB;AAC7B,MAAM,wBAAwB;AAM9B,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;AA0B1B,MAAM,QAAQ,WAAuC,SAASC,QAC5D,EACE,UAAU,WACV,OAAO,MACP,UACA,WAAW,mBACX,WACA,SACA,iBACA,OACA,WACA,aACA,UACA,UACA,GAAG,QAEL,KACA;CACA,MAAM,aAAa,UAAU;EAC3B,eAAe;EACf,kBAAkB;EAClB,WAAW,GAAG;GAAC;GAAY;GAAoB;GAAiB;GAAU,CAAC;EAC5E,CAAC;CAEF,MAAM,aAAa,UAAU;EAC3B,kBAAkB;EAClB,eAAe;EACf,WAAW,GAAG,CAAC,sBAAsB,sBAAsB,CAAC;EAC7D,CAAC;CAEF,MAAM,kBAAkB,eACf;EACL,GAAI,WAAW,EAAE,UAAU,GAAG,SAAS,KAAK,GAAG,EAAE;EACjD,GAAI,aAAa,SAAS,EAAE,GAAG,EAAE,UAAU,GAAG,SAAS,KAAK;EAC5D,GAAI,kBAAkB,EAAE,iBAAiB,GAAG,EAAE;EAC9C,GAAI,cAAc,EAAE,aAAa,GAAG,EAAE;EACtC,GAAI,QAAQ,EAAE,OAAO,GAAG,EAAE;EAC3B,GACD;EAAC;EAAiB;EAAa;EAAO;EAAU;EAAS,CAC1D;CAED,MAAM,YAAY,eACmB;EACjC,SAAS;EACT,OAAO,EACL,GAAI,YAAY,EAAE,OAAO,WAAW,GAAG,EAAE,EAC1C;EACF,GACD,CAAC,UAAU,CACZ;AAED,QACE,qBAAC;EACM;EACL,KAAI;EACJ,SAAQ;EACR,YAAW;EACX,WAAW;EACX,OAAO;EACP,GAAI;;GAEH,aACC,oBAAC;IACC,MAAM;IACK;IACX,eAAY;IACZ,WAAW;KACX;GAGJ,oBAAC;IAAK,WAAU;IAAiD;KAAgB;GAEhF,WACC,oBAAC;IACC,MAAM;IACK;IACX,eAAY;IACZ,WAAW;KACX;;GAEG;EAEX;AAGF,MAAM,cAAc"}

package/dist/components/client/Button.cjs

@@ -0,0 +1,226 @@
+"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;