@krosoft/react 0.0.381 → 0.0.382

package/dist/components/core/layouts/AppPageHeader.js

@@ -0,0 +1,44 @@
+import { useKrosoftTranslation as e } from "../../../i18n/useKrosoftTranslation.js";
+import { Button as t } from "../../ui/button.js";
+import { AppActions as n } from "./AppActions.js";
+import { useDocumentTitle as r } from "../../../hooks/ui/useDocumentTitle.js";
+import { AppTitle as i } from "./AppTitle.js";
+import "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { ArrowLeftIcon as s } from "lucide-react";
+//#region src/components/core/layouts/AppPageHeader.tsx
+function c({ icon: c, titleKey: l, descriptionKey: u, actions: d, onBack: f, renderPreActions: p, className: m, inline: h }) {
+	let { t: g } = e();
+	return r(g(l)), /* @__PURE__ */ o("div", {
+		className: "flex flex-row items-center justify-between gap-3 md:gap-4",
+		children: [/* @__PURE__ */ o("div", {
+			className: "flex min-w-0 items-center gap-3 md:gap-4",
+			children: [
+				f && /* @__PURE__ */ a(t, {
+					variant: "ghost",
+					size: "icon",
+					className: "shrink-0",
+					onClick: f,
+					children: /* @__PURE__ */ a(s, { className: "h-4 w-4" })
+				}),
+				c && /* @__PURE__ */ a("div", {
+					className: "size-12 shrink-0 bg-blue-100 rounded-control flex items-center justify-center",
+					children: /* @__PURE__ */ a(c, { className: "h-6 w-6 text-blue-600" })
+				}),
+				/* @__PURE__ */ a(i, {
+					titleKey: l,
+					descriptionKey: u,
+					inline: h
+				})
+			]
+		}), /* @__PURE__ */ o("div", {
+			className: "flex shrink-0 items-center gap-2 md:gap-4",
+			children: [p && p(), /* @__PURE__ */ a(n, {
+				actions: d,
+				className: m
+			})]
+		})]
+	});
+}
+//#endregion
+export { c as AppPageHeader };

package/dist/{AppSubTitle-DI62BaaB.js → components/core/layouts/AppSubTitle.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./i18n-BhLphJa3.js";
-import { t } from "./AppActions-8HjAaTQK.js";
+import { useKrosoftTranslation as e } from "../../../i18n/useKrosoftTranslation.js";
+import { AppActions as t } from "./AppActions.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/core/layouts/AppSubTitle.tsx
 function i({ titleKey: i, actions: a, className: o }) {
@@ -16,4 +16,4 @@ function i({ titleKey: i, actions: a, className: o }) {
 	});
 }
 //#endregion
-export { i as t };
+export { i as AppSubTitle };

package/dist/{AppTitle-BXoTrXQc.js → components/core/layouts/AppTitle.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./tailwind.helper-CJaRYBmL.js";
-import { t } from "./i18n-BhLphJa3.js";
+import { cn as e } from "../../../helpers/tailwind.helper.js";
+import { useKrosoftTranslation as t } from "../../../i18n/useKrosoftTranslation.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/core/layouts/AppTitle.tsx
 function i({ titleKey: i, descriptionKey: a, isSubTitle: o, inline: s }) {
@@ -25,4 +25,4 @@ function i({ titleKey: i, descriptionKey: a, isSubTitle: o, inline: s }) {
 	});
 }
 //#endregion
-export { i as t };
+export { i as AppTitle };

package/dist/components/core/layouts/KpiCardsLayout.js

@@ -0,0 +1,8 @@
+import { KpiCards as e } from "../cards/KpiCards.js";
+import { SkeletonCards as t } from "../cards/SkeletonCards.js";
+import { ErrorState as n } from "../states/ErrorState.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/core/layouts/KpiCardsLayout.tsx
+var i = ({ stats: i, isLoading: a, error: o }) => a ? /* @__PURE__ */ r(t, { count: 4 }) : o ? /* @__PURE__ */ r(n, { message: o.message }) : /* @__PURE__ */ r(e, { stats: i });
+//#endregion
+export { i as KpiCardsLayout };

package/dist/components/core/layouts/index.js

@@ -1,50 +1,6 @@
-import { t as e } from "../../../i18n-BhLphJa3.js";
-import { i as t, t as n } from "../../../cards-DPzVebUM.js";
-import { c as r } from "../../../tooltip-_geGvbS7.js";
-import { t as i } from "../../../AppActions-8HjAaTQK.js";
-import { t as a } from "../../../AppSubTitle-DI62BaaB.js";
-import { t as o } from "../../../useDocumentTitle-VoQkict_.js";
-import { t as s } from "../../../AppTitle-BXoTrXQc.js";
-import { n as c } from "../../../states-CJ8xE_Nm.js";
-import "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { ArrowLeftIcon as d } from "lucide-react";
-//#region src/components/core/layouts/AppPageHeader.tsx
-function f({ icon: t, titleKey: n, descriptionKey: a, actions: c, onBack: f, renderPreActions: p, className: m, inline: h }) {
-	let { t: g } = e();
-	return o(g(n)), /* @__PURE__ */ u("div", {
-		className: "flex flex-row items-center justify-between gap-3 md:gap-4",
-		children: [/* @__PURE__ */ u("div", {
-			className: "flex min-w-0 items-center gap-3 md:gap-4",
-			children: [
-				f && /* @__PURE__ */ l(r, {
-					variant: "ghost",
-					size: "icon",
-					className: "shrink-0",
-					onClick: f,
-					children: /* @__PURE__ */ l(d, { className: "h-4 w-4" })
-				}),
-				t && /* @__PURE__ */ l("div", {
-					className: "size-12 shrink-0 bg-blue-100 rounded-control flex items-center justify-center",
-					children: /* @__PURE__ */ l(t, { className: "h-6 w-6 text-blue-600" })
-				}),
-				/* @__PURE__ */ l(s, {
-					titleKey: n,
-					descriptionKey: a,
-					inline: h
-				})
-			]
-		}), /* @__PURE__ */ u("div", {
-			className: "flex shrink-0 items-center gap-2 md:gap-4",
-			children: [p && p(), /* @__PURE__ */ l(i, {
-				actions: c,
-				className: m
-			})]
-		})]
-	});
-}
-//#endregion
-//#region src/components/core/layouts/KpiCardsLayout.tsx
-var p = ({ stats: e, isLoading: r, error: i }) => r ? /* @__PURE__ */ l(n, { count: 4 }) : i ? /* @__PURE__ */ l(c, { message: i.message }) : /* @__PURE__ */ l(t, { stats: e });
-//#endregion
-export { i as AppActions, f as AppPageHeader, a as AppSubTitle, s as AppTitle, p as KpiCardsLayout };
+import { AppActions as e } from "./AppActions.js";
+import { AppSubTitle as t } from "./AppSubTitle.js";
+import { AppTitle as n } from "./AppTitle.js";
+import { AppPageHeader as r } from "./AppPageHeader.js";
+import { KpiCardsLayout as i } from "./KpiCardsLayout.js";
+export { e as AppActions, r as AppPageHeader, t as AppSubTitle, n as AppTitle, i as KpiCardsLayout };

package/dist/components/core/markdown/AppMarkdown.js

@@ -0,0 +1,134 @@
+import { cn as e } from "../../../helpers/tailwind.helper.js";
+import { rehypeVersionSlug as t } from "../../../helpers/markdown.helper.js";
+import { AppMarkdownHeading as n } from "./AppMarkdownHeading.js";
+import { useEffect as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { useLocation as a, useNavigate as o } from "react-router-dom";
+import s from "react-markdown";
+import c from "rehype-slug";
+import l from "remark-gfm";
+//#region src/components/core/markdown/AppMarkdown.tsx
+var u = ({ content: u, headingAnchors: d = !0 }) => {
+	let f = a(), p = o(), { hash: m } = f;
+	r(() => {
+		if (!d || !m) return;
+		let e = decodeURIComponent(m.slice(1)), t = requestAnimationFrame(() => {
+			document.getElementById(e)?.scrollIntoView({
+				behavior: "smooth",
+				block: "start"
+			});
+		});
+		return () => {
+			cancelAnimationFrame(t);
+		};
+	}, [
+		d,
+		m,
+		u
+	]);
+	let h = (e, t) => {
+		let n = decodeURIComponent(t.slice(1)), r = document.getElementById(n);
+		r && (e.preventDefault(), d ? p({
+			search: f.search,
+			hash: t
+		}) : r.scrollIntoView({
+			behavior: "smooth",
+			block: "start"
+		}));
+	};
+	return /* @__PURE__ */ i(s, {
+		remarkPlugins: [l],
+		rehypePlugins: [c, t],
+		components: {
+			h1: ({ id: e, children: t }) => /* @__PURE__ */ i("h1", {
+				id: e,
+				className: "text-2xl font-bold text-foreground mt-2 mb-4 first:mt-0 scroll-mt-4",
+				children: t
+			}),
+			h2: ({ id: t, children: r }) => /* @__PURE__ */ i(n, {
+				anchor: d,
+				level: 2,
+				id: t,
+				className: e("text-xl font-semibold text-foreground mt-8 mb-3 border-b pb-2 scroll-mt-4", !d && "first:mt-0"),
+				children: r
+			}),
+			h3: ({ id: e, children: t }) => /* @__PURE__ */ i(n, {
+				anchor: d,
+				level: 3,
+				id: e,
+				className: "text-base font-semibold text-foreground mt-6 mb-2 scroll-mt-4",
+				children: t
+			}),
+			h4: ({ id: e, children: t }) => /* @__PURE__ */ i(n, {
+				anchor: d,
+				level: 4,
+				id: e,
+				className: "text-sm font-semibold text-foreground mt-4 mb-2 scroll-mt-4",
+				children: t
+			}),
+			p: ({ children: e }) => /* @__PURE__ */ i("p", {
+				className: "text-sm text-foreground leading-relaxed mb-3",
+				children: e
+			}),
+			a: ({ href: e, children: t }) => {
+				let n = e?.startsWith("#");
+				return /* @__PURE__ */ i("a", {
+					href: e,
+					target: n ? void 0 : "_blank",
+					rel: n ? void 0 : "noopener noreferrer",
+					onClick: n && e ? (t) => {
+						h(t, e);
+					} : void 0,
+					className: "text-primary underline underline-offset-2 hover:opacity-80",
+					children: t
+				});
+			},
+			ul: ({ children: e }) => /* @__PURE__ */ i("ul", {
+				className: "list-disc pl-6 mb-3 space-y-1 text-sm text-foreground",
+				children: e
+			}),
+			ol: ({ children: e }) => /* @__PURE__ */ i("ol", {
+				className: "list-decimal pl-6 mb-3 space-y-1 text-sm text-foreground",
+				children: e
+			}),
+			blockquote: ({ children: e }) => /* @__PURE__ */ i("blockquote", {
+				className: "border-l-4 border-muted-foreground/30 bg-muted/50 px-4 py-2 mb-3 text-sm text-muted-foreground [&>p]:mb-0",
+				children: e
+			}),
+			code: ({ className: e, children: t }) => e ? /* @__PURE__ */ i("code", {
+				className: `${e} block text-xs font-mono`,
+				children: t
+			}) : /* @__PURE__ */ i("code", {
+				className: "text-xs font-mono bg-muted px-1.5 py-0.5 rounded",
+				children: t
+			}),
+			pre: ({ children: e }) => /* @__PURE__ */ i("pre", {
+				className: "bg-muted rounded-md p-4 mb-3 overflow-x-auto",
+				children: e
+			}),
+			table: ({ children: e }) => /* @__PURE__ */ i("div", {
+				className: "overflow-x-auto mb-3",
+				children: /* @__PURE__ */ i("table", {
+					className: "w-full text-sm border-collapse",
+					children: e
+				})
+			}),
+			thead: ({ children: e }) => /* @__PURE__ */ i("thead", {
+				className: "border-b",
+				children: e
+			}),
+			th: ({ children: e }) => /* @__PURE__ */ i("th", {
+				className: "text-left font-semibold text-foreground px-3 py-2",
+				children: e
+			}),
+			td: ({ children: e }) => /* @__PURE__ */ i("td", {
+				className: "border-b border-muted px-3 py-2 text-foreground",
+				children: e
+			}),
+			hr: () => /* @__PURE__ */ i("hr", { className: "my-6 border-muted" })
+		},
+		children: u
+	});
+};
+//#endregion
+export { u as AppMarkdown };

package/dist/components/core/markdown/AppMarkdownHeading.js

@@ -0,0 +1,45 @@
+import { cn as e } from "../../../helpers/tailwind.helper.js";
+import { useKrosoftTranslation as t } from "../../../i18n/useKrosoftTranslation.js";
+import { useNotifications as n } from "../../../hooks/ui/useNotifications.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { LinkIcon as a } from "lucide-react";
+import { useLocation as o, useNavigate as s } from "react-router-dom";
+//#region src/components/core/markdown/AppMarkdownHeading.tsx
+var c = {
+	2: "h2",
+	3: "h3",
+	4: "h4"
+}, l = ({ level: l, className: u, id: d, anchor: f = !0, children: p }) => {
+	let { t: m } = t(), { showSuccess: h, showError: g } = n(), _ = o(), v = s(), y = c[l];
+	if (!f || !d) return /* @__PURE__ */ r(y, {
+		id: d,
+		className: u,
+		children: p
+	});
+	let b = async () => {
+		v({
+			search: _.search,
+			hash: `#${d}`
+		}, { replace: !0 });
+		let e = `${window.location.origin}${_.pathname}${_.search}#${d}`;
+		try {
+			await navigator.clipboard.writeText(e), h(m("markdown.linkCopied"));
+		} catch {
+			g(m("markdown.linkCopyError"));
+		}
+	};
+	return /* @__PURE__ */ i(y, {
+		id: d,
+		className: e("group", u),
+		children: [p, /* @__PURE__ */ r("button", {
+			type: "button",
+			onClick: () => void b(),
+			title: m("markdown.copyLink"),
+			"aria-label": m("markdown.copyLink"),
+			className: "ml-2 inline-flex align-middle text-muted-foreground transition-opacity hover:text-primary md:opacity-0 md:group-hover:opacity-100 md:focus-visible:opacity-100",
+			children: /* @__PURE__ */ r(a, { className: "size-4" })
+		})]
+	});
+};
+//#endregion
+export { l as AppMarkdownHeading };

package/dist/components/core/markdown/index.js

@@ -1 +1 @@
-export { t as AppMarkdown } from "../../../AppMarkdown-CAxm82x0.js";
+export { AppMarkdown } from "./AppMarkdown.js";

package/dist/components/core/navbar/GlobalSearch.js

@@ -0,0 +1,128 @@
+import { cn as e } from "../../../helpers/tailwind.helper.js";
+import { useKrosoftTranslation as t } from "../../../i18n/useKrosoftTranslation.js";
+import { Button as n } from "../../ui/button.js";
+import { CommandDialog as r, CommandEmpty as i, CommandGroup as a, CommandInput as o, CommandItem as s, CommandList as c } from "../../ui/command.js";
+import * as l from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { ClockIcon as p, LoaderCircleIcon as m, SearchIcon as h, XIcon as g } from "lucide-react";
+//#region src/components/core/navbar/GlobalSearch.tsx
+var _ = ({ groups: _, search: v, onSearch: y, onSelect: b, loading: x = !1, open: S, onOpenChange: C, trigger: w = !0, triggerLabel: T, shortcut: E = !0, shortcutLabel: D = "Ctrl+K", history: O, onHistorySelect: k, onHistoryRemove: A, historyHeading: j, removeFromHistoryLabel: M, placeholder: N, emptyLabel: P, loadingLabel: F, title: I, description: L, hint: R, className: z }) => {
+	let { t: B } = t(), [V, H] = l.useState(!1), U = S !== void 0, W = U ? S : V, G = l.useCallback((e) => {
+		U || H(e), C?.(e);
+	}, [U, C]);
+	l.useEffect(() => {
+		if (!E) return;
+		let e = (e) => {
+			e.key.toLowerCase() === "k" && (e.metaKey || e.ctrlKey) && (e.preventDefault(), G(!W));
+		};
+		return window.addEventListener("keydown", e), () => {
+			window.removeEventListener("keydown", e);
+		};
+	}, [
+		E,
+		W,
+		G
+	]);
+	let K = (e) => {
+		G(!1), y(""), b(e);
+	}, q = _.some((e) => e.items.length > 0), J = O ?? [], Y = v.trim() === "" && J.length > 0;
+	return /* @__PURE__ */ f(u, { children: [w && /* @__PURE__ */ d(n, {
+		variant: "ghost",
+		size: "icon",
+		"aria-label": T ?? B("search.trigger"),
+		title: E ? `${T ?? B("search.trigger")} (${D})` : T ?? B("search.trigger"),
+		className: "rounded-full",
+		onClick: () => {
+			G(!0);
+		},
+		children: /* @__PURE__ */ d(h, { className: "size-4" })
+	}), /* @__PURE__ */ f(r, {
+		open: W,
+		onOpenChange: G,
+		title: I ?? B("search.globalTitle"),
+		description: L ?? B("search.globalDescription"),
+		shouldFilter: !1,
+		className: z,
+		children: [
+			/* @__PURE__ */ d(o, {
+				value: v,
+				onValueChange: y,
+				placeholder: N ?? B("search.placeholder")
+			}),
+			/* @__PURE__ */ f(c, { children: [
+				x && /* @__PURE__ */ f("div", {
+					className: "flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground",
+					children: [/* @__PURE__ */ d(m, { className: "size-4 animate-spin" }), F ?? B("search.loading")]
+				}),
+				!q && !Y && !x && /* @__PURE__ */ d(i, { children: P ?? B("states.noResultDot") }),
+				Y && /* @__PURE__ */ d(a, {
+					heading: j ?? B("search.historyTitle"),
+					children: J.map((e) => /* @__PURE__ */ f(s, {
+						value: `history-${e}`,
+						className: "gap-3 px-2 py-2",
+						onSelect: () => {
+							k?.(e);
+						},
+						children: [
+							/* @__PURE__ */ d("span", {
+								className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground",
+								children: /* @__PURE__ */ d(p, { className: "size-4" })
+							}),
+							/* @__PURE__ */ d("span", {
+								className: "min-w-0 flex-1 truncate font-medium",
+								children: e
+							}),
+							A && /* @__PURE__ */ d(n, {
+								type: "button",
+								variant: "ghost",
+								size: "icon",
+								className: "size-7 shrink-0 text-muted-foreground hover:text-destructive",
+								"aria-label": M ?? B("search.removeFromHistory"),
+								title: M ?? B("search.removeFromHistory"),
+								onPointerDown: (e) => {
+									e.preventDefault(), e.stopPropagation();
+								},
+								onClick: (t) => {
+									t.stopPropagation(), A(e);
+								},
+								children: /* @__PURE__ */ d(g, { className: "size-4" })
+							})
+						]
+					}, `history-${e}`))
+				}),
+				_.map((t) => t.items.length === 0 ? null : /* @__PURE__ */ d(a, {
+					heading: t.heading,
+					children: t.items.map((t) => {
+						let n = t.icon;
+						return /* @__PURE__ */ f(s, {
+							value: t.key,
+							className: "gap-3 px-2 py-2",
+							onSelect: () => {
+								K(t);
+							},
+							children: [n && /* @__PURE__ */ d("span", {
+								className: e("flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground", t.iconClassName),
+								children: /* @__PURE__ */ d(n, { className: "size-4" })
+							}), /* @__PURE__ */ f("span", {
+								className: "flex min-w-0 flex-1 flex-col",
+								children: [/* @__PURE__ */ d("span", {
+									className: "truncate font-medium",
+									children: t.label
+								}), t.description !== void 0 && t.description !== "" && /* @__PURE__ */ d("span", {
+									className: "truncate text-xs text-muted-foreground",
+									children: t.description
+								})]
+							})]
+						}, t.key);
+					})
+				}, t.heading))
+			] }),
+			R !== void 0 && q && !x && /* @__PURE__ */ d("div", {
+				className: "border-t border-border p-2 text-center text-xs text-muted-foreground",
+				children: R
+			})
+		]
+	})] });
+};
+//#endregion
+export { _ as GlobalSearch };

package/dist/components/core/navbar/NotificationsBell.js

@@ -0,0 +1,133 @@
+import { cn as e } from "../../../helpers/tailwind.helper.js";
+import { useKrosoftTranslation as t } from "../../../i18n/useKrosoftTranslation.js";
+import { Button as n } from "../../ui/button.js";
+import { Popover as r, PopoverContent as i, PopoverTrigger as a } from "../../ui/popover.js";
+import { ScrollArea as o } from "../../ui/scroll-area.js";
+import * as s from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { BellIcon as u, Trash2Icon as d } from "lucide-react";
+//#region src/components/core/navbar/NotificationsBell.tsx
+var f = 9, p = ({ items: p, onSelect: m, onMarkAllAsRead: h, onRemove: g, onSeeAll: _, isLoading: v = !1, unreadCount: y, maxBadgeCount: b = f, open: x, onOpenChange: S, triggerLabel: C, title: w, emptyLabel: T, loadingLabel: E, markAllAsReadLabel: D, removeLabel: O, seeAllLabel: k, className: A, contentClassName: j, badgeClassName: M, itemClassName: N, unreadItemClassName: P }) => {
+	let { t: F } = t(), [I, L] = s.useState(!1), R = x !== void 0, z = R ? x : I, B = (e) => {
+		R || L(e), S?.(e);
+	}, V = y ?? p.filter((e) => !e.read).length, H = C ?? F("notifications.trigger"), U = (e) => {
+		B(!1), m?.(e);
+	};
+	return /* @__PURE__ */ l(r, {
+		open: z,
+		onOpenChange: B,
+		children: [/* @__PURE__ */ c(a, {
+			asChild: !0,
+			children: /* @__PURE__ */ l(n, {
+				type: "button",
+				variant: "ghost",
+				size: "icon",
+				className: e("relative rounded-control", A),
+				"aria-label": V > 0 ? `${H} (${String(V)})` : H,
+				title: H,
+				children: [/* @__PURE__ */ c(u, { className: "size-4" }), V > 0 && /* @__PURE__ */ c("span", {
+					className: e("absolute right-1 top-1 flex size-4 items-center justify-center rounded-full bg-primary text-[10px] font-bold leading-none text-primary-foreground", M),
+					children: V > b ? `${String(b)}+` : V
+				})]
+			})
+		}), /* @__PURE__ */ l(i, {
+			align: "end",
+			className: e("w-80 p-0", j),
+			children: [
+				/* @__PURE__ */ l("div", {
+					className: "flex items-center justify-between gap-2 border-b px-3 py-2",
+					children: [/* @__PURE__ */ c("span", {
+						className: "text-sm font-medium",
+						children: w ?? F("notifications.title")
+					}), h && V > 0 && /* @__PURE__ */ c(n, {
+						type: "button",
+						variant: "ghost",
+						size: "sm",
+						className: "h-7 text-xs",
+						onClick: h,
+						children: D ?? F("notifications.markAllAsRead")
+					})]
+				}),
+				v && /* @__PURE__ */ c("p", {
+					className: "px-3 py-6 text-center text-sm text-muted-foreground",
+					children: E ?? F("states.loading")
+				}),
+				!v && p.length === 0 && /* @__PURE__ */ c("p", {
+					className: "px-3 py-6 text-center text-sm text-muted-foreground",
+					children: T ?? F("notifications.empty")
+				}),
+				!v && p.length > 0 && /* @__PURE__ */ c(o, {
+					viewportClassName: "max-h-96",
+					children: /* @__PURE__ */ c("ul", {
+						className: "divide-y",
+						children: p.map((t) => {
+							let r = t.icon;
+							return /* @__PURE__ */ l("li", {
+								className: e("flex items-start gap-2 px-3 py-2", !t.read && (P ?? "bg-accent/40"), N),
+								children: [/* @__PURE__ */ l("button", {
+									type: "button",
+									className: "flex min-w-0 flex-1 items-start gap-2 rounded-sm text-left focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+									onClick: () => {
+										U(t);
+									},
+									children: [r && /* @__PURE__ */ c("span", {
+										className: e("mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground", t.iconClassName),
+										children: /* @__PURE__ */ c(r, { className: "size-3.5" })
+									}), /* @__PURE__ */ l("span", {
+										className: "min-w-0 flex-1 space-y-0.5",
+										children: [
+											/* @__PURE__ */ l("span", {
+												className: "flex items-center gap-2",
+												children: [!t.read && /* @__PURE__ */ c("span", {
+													className: "size-1.5 shrink-0 rounded-full bg-primary",
+													"aria-hidden": !0
+												}), /* @__PURE__ */ c("span", {
+													className: e("truncate text-sm", !t.read && "font-medium"),
+													children: t.title
+												})]
+											}),
+											t.description && /* @__PURE__ */ c("span", {
+												className: "block text-xs text-muted-foreground",
+												children: t.description
+											}),
+											t.date && /* @__PURE__ */ c("span", {
+												className: "block text-xs text-muted-foreground/60",
+												children: t.date
+											})
+										]
+									})]
+								}), g && /* @__PURE__ */ c(n, {
+									type: "button",
+									variant: "ghost",
+									size: "icon",
+									className: "size-7 shrink-0 text-muted-foreground hover:text-destructive",
+									onClick: () => {
+										g(t);
+									},
+									"aria-label": O ?? F("notifications.remove"),
+									title: O ?? F("notifications.remove"),
+									children: /* @__PURE__ */ c(d, { className: "size-3.5" })
+								})]
+							}, t.key);
+						})
+					})
+				}),
+				_ && /* @__PURE__ */ c("div", {
+					className: "border-t p-1",
+					children: /* @__PURE__ */ c(n, {
+						type: "button",
+						variant: "ghost",
+						size: "sm",
+						className: "h-8 w-full justify-center text-xs font-medium",
+						onClick: () => {
+							B(!1), _?.();
+						},
+						children: k ?? F("notifications.seeAll")
+					})
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { p as NotificationsBell };