@flanksource/clicky-ui
Version:
Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.
105 lines (104 loc) • 3.04 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { Avatar } from "./Avatar.js";
import { Icon } from "./Icon.js";
import { cn } from "../lib/utils.js";
import { resolveSize } from "../lib/size.js";
import { useDensityValue } from "../hooks/use-density.js";
function AvatarBadge({
alt,
label = alt,
initials,
avatarKind = "user",
avatarVariant = "duotone",
size = "lg",
title,
statusIcon,
statusTone = "neutral",
statusTitle,
comment,
borderColor,
className,
badgeClassName,
labelClassName,
commentClassName,
style,
badgeStyle
}) {
const density = useDensityValue();
const px = resolveSize(size, density);
return /* @__PURE__ */ jsxs(
"span",
{
className: cn("inline-flex max-w-[50ch] min-w-0 flex-col items-start", className),
style,
children: [
/* @__PURE__ */ jsxs(
"span",
{
className: cn(
"inline-flex max-w-[40ch] min-w-0 items-center gap-2 overflow-visible rounded-full border bg-background shadow-sm",
badgeClassName
),
style: {
height: px,
borderColor,
...badgeStyle
},
children: [
/* @__PURE__ */ jsx(
Avatar,
{
alt,
kind: avatarKind,
size,
title: title ?? alt,
variant: avatarVariant,
className: "relative z-10 -ml-px shrink-0",
...initials !== void 0 ? { initials } : {}
}
),
/* @__PURE__ */ jsx(
"span",
{
className: cn(
"min-w-0 flex-1 truncate font-medium leading-none text-foreground",
labelClassName
),
style: { fontSize: Math.max(11, Math.round(px * 0.32)) },
title: typeof label === "string" ? label : title ?? alt,
children: label
}
),
statusIcon && /* @__PURE__ */ jsx(
Icon,
{
name: statusIcon,
style: "badge",
size,
tone: statusTone,
className: "relative z-10 -mr-px shrink-0",
...statusTitle !== void 0 ? { title: statusTitle } : {}
}
)
]
}
),
comment && /* @__PURE__ */ jsx(
"span",
{
className: cn(
"mt-1 max-w-[50ch] overflow-hidden text-xs leading-snug text-muted-foreground [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:3]",
commentClassName
),
title: typeof comment === "string" ? comment : void 0,
children: comment
}
)
]
}
);
}
export {
AvatarBadge
};
//# sourceMappingURL=AvatarBadge.js.map