import { t as e } from "../../utils-B7XIe3qq.js";
import { t } from "../../x-BleQvk5v.js";
import { Button as n } from "../primitives/button.js";
import { useStorage as r } from "../hooks/useStorage.js";
import { useEffect as i, useState as a } from "react";
import { jsx as o, jsxs as s } from "react/jsx-runtime";
//#region src/react/feedback/notification-banner.tsx
var c = {
	info: "bg-accent-cyan/10 border-accent-cyan/30 text-accent-cyan",
	warning: "bg-accent-amber/10 border-accent-amber/30 text-accent-amber",
	critical: "bg-accent-rose/10 border-accent-rose/30 text-accent-rose",
	success: "bg-accent-emerald/10 border-accent-emerald/30 text-accent-emerald"
}, l = {
	info: "text-accent-cyan",
	warning: "text-accent-amber",
	critical: "text-accent-rose",
	success: "text-accent-emerald"
};
function u({ severity: e = "info", title: t, children: n, dismissible: a, persistKey: s, actionLabel: c, onAction: l, actionHref: u, className: d }) {
	let [p, m, h] = r(s, { defaultValue: !1 });
	return i(() => {}, [s, h]), p ? null : /* @__PURE__ */ o(f, {
		severity: e,
		title: t,
		dismissible: a,
		actionLabel: c,
		onAction: l,
		actionHref: u,
		className: d,
		onDismiss: () => {
			m(!0);
		},
		children: n
	});
}
function d({ severity: e = "info", title: t, children: n, dismissible: r, actionLabel: i, onAction: s, actionHref: c, className: l }) {
	let [u, d] = a(!1);
	return u ? null : /* @__PURE__ */ o(f, {
		severity: e,
		title: t,
		dismissible: r,
		actionLabel: i,
		onAction: s,
		actionHref: c,
		className: l,
		onDismiss: () => {
			d(!0);
		},
		children: n
	});
}
function f({ severity: r, title: i, children: a, dismissible: u, actionLabel: d, onAction: f, actionHref: p, className: m, onDismiss: h }) {
	let g = r === "warning" || r === "critical";
	return /* @__PURE__ */ o("div", {
		role: g ? "alert" : "status",
		"aria-live": g ? "assertive" : "polite",
		"data-slot": "notification-banner",
		"data-severity": r,
		className: e("w-full border-b px-4 py-3", c[r], m),
		children: /* @__PURE__ */ s("div", {
			className: "mx-auto flex max-w-7xl items-center justify-between gap-3",
			children: [/* @__PURE__ */ s("div", {
				className: "flex flex-1 flex-wrap items-center gap-x-3 gap-y-1 text-sm",
				children: [i && /* @__PURE__ */ o("span", {
					className: "font-semibold",
					children: i
				}), /* @__PURE__ */ o("span", {
					className: "opacity-90",
					children: a
				})]
			}), /* @__PURE__ */ s("div", {
				className: "flex flex-shrink-0 items-center gap-2",
				children: [(d ?? p) && (p ? /* @__PURE__ */ o("a", {
					href: p,
					className: e("text-sm font-medium underline-offset-4 hover:underline", l[r]),
					children: d ?? "Learn more"
				}) : /* @__PURE__ */ o("button", {
					type: "button",
					onClick: f,
					className: e("text-sm font-medium underline-offset-4 hover:underline", l[r]),
					children: d
				})), u && /* @__PURE__ */ o(n, {
					variant: "ghost",
					size: "icon-sm",
					type: "button",
					onClick: h,
					"aria-label": "Dismiss notification",
					className: "shrink-0 opacity-70 hover:opacity-100",
					children: /* @__PURE__ */ o(t, {
						className: "size-4",
						"aria-hidden": "true"
					})
				})]
			})]
		})
	});
}
function p(e) {
	return e.persistKey ? /* @__PURE__ */ o(u, {
		...e,
		persistKey: e.persistKey
	}) : /* @__PURE__ */ o(d, { ...e });
}
//#endregion
export { p as NotificationBanner };

//# sourceMappingURL=notification-banner.js.map