@yahoo/uds 3.66.1 → 3.67.0-beta.1

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

@@ -0,0 +1,66 @@
+"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');
+let lodash_isFunction_js = require("lodash/isFunction.js");
+lodash_isFunction_js = require_rolldown_runtime.__toESM(lodash_isFunction_js);
+
+//#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 ((0, lodash_isFunction_js.default)(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 require_styles_styler.getStyles({
+		avatarSizeRoot: size,
+		...restStyles,
+		className: require_styles_styler.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
+exports.DEFAULT_AVATAR_SIZE = DEFAULT_AVATAR_SIZE;
+exports.DEFAULT_AVATAR_VARIANT = DEFAULT_AVATAR_VARIANT;
+exports.buildAvatarRootClasses = buildAvatarRootClasses;
+exports.buildInlineSizeStyles = buildInlineSizeStyles;
+exports.generateAvatarAbbreviation = generateAvatarAbbreviation;

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

@@ -0,0 +1,43 @@
+import { AvatarAbbreviationStrategy, AvatarSize, AvatarVariant, UniversalAvatarProps } from "../../../tokens/types.cjs";
+import "../../../tokens/index.cjs";
+import { getStyles } from "../../../styles/styler.cjs";
+
+//#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 };

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

@@ -0,0 +1,43 @@
+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 };

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

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

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,34 @@
+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 };

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

@@ -0,0 +1,34 @@
+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 };

package/dist/components/client/Badge.js

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