/*! ratio-ui · design system for knowledge sharing · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
import { cn } from "../../utils/cn.js";
import { useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/core/Avatar/Avatar.tsx
var SIZE_CLASSES = {
	sm: "size-[30px] text-[13px]",
	md: "size-10 text-sm",
	lg: "size-11 text-lg"
};
function deriveInitials(name) {
	if (!name) return "";
	const parts = name.trim().split(/\s+/);
	if (parts.length === 0) return "";
	if (parts.length === 1) return parts[0].slice(0, 2).toLowerCase();
	return (parts[0][0] + parts[parts.length - 1][0]).toLowerCase();
}
/**
* User avatar — circular badge with serif italic initials over a
* primary-tinted radial gradient. Pass `src` to render a profile
* image; on load failure the component falls back to the initials
* underneath without showing a broken-image indicator.
*
* Pair with the `Menu.Trigger` (avatar pill in a navbar) and the
* identity header inside a user-menu dropdown — three sizes cover the
* common cases.
*
* @example
* ```tsx
* <Avatar name="Leo Losen" />                  // initials "ll"
* <Avatar name="Ola" initials="o" size="sm" /> // override + small
* <Avatar name="Ola" src="/avatar.jpg" size="lg" /> // image + lg
* ```
*/
var Avatar = ({ src, name, initials, size = "md", ariaLabel, className, testId }) => {
	const initialsText = initials ?? deriveInitials(name);
	const wrapperLabel = ariaLabel ?? name;
	const a11yProps = wrapperLabel ? {
		role: "img",
		"aria-label": wrapperLabel
	} : {};
	const [brokenSrc, setBrokenSrc] = useState(null);
	const showImage = Boolean(src) && brokenSrc !== src;
	return /* @__PURE__ */ jsxs("span", {
		className: cn("relative inline-flex items-center justify-center rounded-full overflow-hidden shrink-0", "text-(--text) font-serif italic font-medium tracking-tight", "bg-[radial-gradient(circle_at_30%_30%,color-mix(in_oklch,var(--primary)_25%,var(--surface)),color-mix(in_oklch,var(--primary)_12%,var(--surface)))]", "dark:bg-[radial-gradient(circle_at_30%_30%,color-mix(in_oklch,var(--primary)_10%,var(--surface)),color-mix(in_oklch,var(--primary)_4%,var(--surface)))]", SIZE_CLASSES[size], className),
		...a11yProps,
		"data-testid": testId,
		children: [initialsText && /* @__PURE__ */ jsx("span", {
			"aria-hidden": showImage,
			children: initialsText
		}), showImage && /* @__PURE__ */ jsx("img", {
			src,
			alt: "",
			onError: (e) => setBrokenSrc(e.currentTarget.getAttribute("src")),
			className: "absolute inset-0 size-full object-cover"
		})]
	});
};
Avatar.displayName = "Avatar";
//#endregion
export { Avatar };

//# sourceMappingURL=Avatar.js.map