@undp/design-system-react/dist/Bubble.js

React based design system for UNDP

import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./dist-CQzJbxrW.js";
import { t as n } from "./dist-DxuGUd9a.js";
import { jsx as r } from "react/jsx-runtime";
//#region src/components/ui/bubble.tsx
function i({ className: t, ...n }) {
	return /* @__PURE__ */ r("div", {
		"data-slot": "bubble-group",
		className: e("flex min-w-0 flex-col gap-2", t),
		...n
	});
}
var a = t("group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full", {
	variants: { variant: {
		primary: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-content-reverse [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary-hover",
		secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-content-reverse [&>[data-slot=bubble-content]:is(button,a):hover]:bg-secondary-hover",
		tertiary: "*:data-[slot=bubble-content]:bg-tertiary *:data-[slot=bubble-content]:text-content-primary [&>[data-slot=bubble-content]:is(button,a):hover]:bg-tertiary-hover",
		quaternary: "*:data-[slot=bubble-content]:bg-quaternary *:data-[slot=bubble-content]:text-content-primary [&>[data-slot=bubble-content]:is(button,a):hover]:bg-quaternary-hover",
		success: "*:data-[slot=bubble-content]:bg-success *:data-[slot=bubble-content]:text-content-reverse [&>[data-slot=bubble-content]:is(button,a):hover]:bg-success-hover",
		warning: "*:data-[slot=bubble-content]:bg-warning *:data-[slot=bubble-content]:text-content-primary [&>[data-slot=bubble-content]:is(button,a):hover]:bg-warning-hover",
		info: "*:data-[slot=bubble-content]:bg-info *:data-[slot=bubble-content]:text-content-reverse [&>[data-slot=bubble-content]:is(button,a):hover]:bg-info-hover",
		outline: "*:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:border *:data-[slot=bubble-content]:border-stroke *:data-[slot=bubble-content]:text-content-primary [&>[data-slot=bubble-content]:is(button,a):hover]:border-stroke-hover",
		error: "*:data-[slot=bubble-content]:bg-error *:data-[slot=bubble-content]:text-content-reverse [&>[data-slot=bubble-content]:is(button,a):hover]:bg-error-hover",
		surface: "*:data-[slot=bubble-content]:bg-surface *:data-[slot=bubble-content]:text-content-primary [&>[data-slot=bubble-content]:is(button,a):hover]:bg-surface-hover",
		"surface-2xs": "*:data-[slot=bubble-content]:bg-surface-2xs *:data-[slot=bubble-content]:text-content-primary [&>[data-slot=bubble-content]:is(button,a):hover]:bg-surface-xs",
		"surface-xs": "*:data-[slot=bubble-content]:bg-surface-xs *:data-[slot=bubble-content]:text-content-primary [&>[data-slot=bubble-content]:is(button,a):hover]:bg-surface-sm",
		"surface-sm": "*:data-[slot=bubble-content]:bg-surface-sm *:data-[slot=bubble-content]:text-content-primary [&>[data-slot=bubble-content]:is(button,a):hover]:bg-surface-md",
		"surface-md": "*:data-[slot=bubble-content]:bg-surface-md *:data-[slot=bubble-content]:text-content-primary [&>[data-slot=bubble-content]:is(button,a):hover]:bg-surface-lg",
		"surface-lg": "*:data-[slot=bubble-content]:bg-surface-lg *:data-[slot=bubble-content]:text-content-primary [&>[data-slot=bubble-content]:is(button,a):hover]:bg-surface-xl",
		"surface-xl": "*:data-[slot=bubble-content]:bg-surface-xl *:data-[slot=bubble-content]:text-content-reverse [&>[data-slot=bubble-content]:is(button,a):hover]:bg-surface-2xl",
		"surface-2xl": "*:data-[slot=bubble-content]:bg-surface-2xl *:data-[slot=bubble-content]:text-content-reverse [&>[data-slot=bubble-content]:is(button,a):hover]:bg-surface-3xl",
		"surface-3xl": "*:data-[slot=bubble-content]:bg-surface-3xl *:data-[slot=bubble-content]:text-content-reverse [&>[data-slot=bubble-content]:is(button,a):hover]:bg-surface-4xl",
		"surface-4xl": "*:data-[slot=bubble-content]:bg-surface-4xl *:data-[slot=bubble-content]:text-content-reverse"
	} },
	defaultVariants: { variant: "primary" }
});
function o({ variant: t, align: n = "start", className: i, ...o }) {
	return /* @__PURE__ */ r("div", {
		"data-slot": "bubble",
		"data-variant": t,
		"data-align": n,
		className: e(a({ variant: t }), i),
		...o
	});
}
function s({ asChild: t = !1, className: i, ...a }) {
	return /* @__PURE__ */ r(t ? n : "div", {
		"data-slot": "bubble-content",
		className: e("wrap-break-word w-fit min-w-0 max-w-full overflow-hidden rounded-3xl border border-transparent px-3 py-2.5 text-sm leading-lg group-data-[align=end]/bubble:self-end [button,a]:outline-none [button,a]:transition-colors [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/30 [button]:text-left", i),
		...a
	});
}
var c = t("absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-surface border border-stroke px-1.5 py-0.5 text-sm has-[button]:p-0", {
	variants: {
		side: {
			top: "top-0 -translate-y-3/4",
			bottom: "bottom-0 translate-y-3/4"
		},
		align: {
			start: "left-3",
			end: "right-3"
		}
	},
	defaultVariants: {
		side: "bottom",
		align: "end"
	}
});
function l({ side: t = "bottom", align: n = "end", className: i, ...a }) {
	return /* @__PURE__ */ r("div", {
		"data-slot": "bubble-reactions",
		"data-align": n,
		"data-side": t,
		className: e(c({
			side: t,
			align: n
		}), i),
		...a
	});
}
//#endregion
export { o as Bubble, s as BubbleContent, i as BubbleGroup, l as BubbleReactions };

//# sourceMappingURL=Bubble.js.map