"use client";
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_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_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({ 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;