beez-ui 0.6.2 → 0.8.0

package/dist/components/notification-bell.js

@@ -0,0 +1,338 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Header bell with an unread badge that opens the notification inbox: a popover on desktop and a
+* bottom sheet on mobile. Presentational: all state and callbacks come from the caller.
+*/
+import { useId, useState } from "react";
+import { BellIcon } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useIsHydrated } from "../hooks/use-is-hydrated.js";
+import { useIsMobile } from "../hooks/use-mobile.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { MOTION_EASE, MOTION_TIMING, SPRING_POP } from "../motion/tokens.js";
+import { AnimatedCount } from "./animated-count.js";
+import { Button } from "./button.js";
+import { NotificationPanel } from "./notification-panel.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { Sheet, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from "./sheet.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+/**
+* Surfaces the bell can render. `responsive` ships both until hydration, so a media query (the
+* 768px breakpoint of `useIsMobile`) shows the right one without a layout shift; once hydrated it
+* keeps only the surface matching the viewport, since both share the open state.
+*/
+export const NOTIFICATION_BELL_SURFACE = {
+	popover: "popover",
+	responsive: "responsive",
+	sheet: "sheet"
+};
+/** The badge shows up to this number; above it, "9+". */
+export const NOTIFICATION_BADGE_MAX = 9;
+/**
+* Visible badge text.
+* @param unreadCount - Unread notifications.
+* @returns "3" or "9+".
+*/
+export function formatUnreadBadge(unreadCount) {
+	return unreadCount > NOTIFICATION_BADGE_MAX ? `${NOTIFICATION_BADGE_MAX}+` : String(unreadCount);
+}
+/**
+* Default accessible name of the bell, announcing the unread count.
+* @param unreadCount - Unread notifications.
+* @returns "Notificaciones" or "Notificaciones, 3 sin leer".
+*/
+export function describeUnreadNotifications(unreadCount) {
+	if (unreadCount === 0) return "Notificaciones";
+	return `Notificaciones, ${formatUnreadBadge(unreadCount)} sin leer`;
+}
+const NOTIFICATION_BELL_DEFAULT_LABELS = {
+	title: "Notificaciones",
+	sheetDescription: "Avisos recientes de tu cuenta.",
+	describeUnread: describeUnreadNotifications
+};
+/** Scale the unread badge grows from and shrinks to when it appears or clears. */
+const BADGE_HIDDEN_SCALE = .4;
+const BADGE_MOTION = {
+	animate: {
+		opacity: 1,
+		scale: 1,
+		transition: SPRING_POP
+	},
+	exit: {
+		opacity: 0,
+		scale: BADGE_HIDDEN_SCALE,
+		transition: {
+			duration: MOTION_TIMING.exit,
+			ease: MOTION_EASE
+		}
+	},
+	initial: {
+		opacity: 0,
+		scale: BADGE_HIDDEN_SCALE
+	}
+};
+/** One short swing of the bell (out, back past rest, settling), played when the count grows. */
+const BELL_NUDGE_ROTATION_DEGREES = [
+	0,
+	-14,
+	10,
+	-4,
+	0
+];
+const BELL_NUDGE_TRANSITION = {
+	duration: MOTION_TIMING.pop,
+	ease: MOTION_EASE
+};
+/**
+* Highest value the rolling badge animates to. Every count above the visible maximum renders
+* "9+", so they share one value and never roll between identical labels.
+*/
+const BADGE_ROLL_CEILING = NOTIFICATION_BADGE_MAX + 1;
+/**
+* Counts how many times the unread count grew while mounted, adjusting state during render so
+* the swing starts in the same commit that shows the new badge.
+* @param unreadCount - Current unread notifications.
+* @returns Zero until the count grows, then the number of increases seen.
+*/
+function useUnreadIncreaseCount(unreadCount) {
+	const [previousUnreadCount, setPreviousUnreadCount] = useState(unreadCount);
+	const [increaseCount, setIncreaseCount] = useState(0);
+	if (previousUnreadCount !== unreadCount) {
+		if (unreadCount > previousUnreadCount) {
+			setIncreaseCount(_temp);
+		}
+		setPreviousUnreadCount(unreadCount);
+	}
+	return increaseCount;
+}
+function _temp(currentIncreaseCount) {
+	return currentIncreaseCount + 1;
+}
+/**
+* Renders the bell. Its accessible name carries the count and a polite live region announces
+* changes. Both surfaces trap focus while open and return it to the bell on close. Each surface
+* keeps a fixed slot in the tree, so dropping the inactive one after hydration never remounts the
+* active one. The root uses `display: contents`, so the triggers stay direct header items.
+* @param props - Surface, open state, unread count, panel data and optional labels.
+* @returns The bell and its inbox surfaces.
+*/
+export function NotificationBell(t0) {
+	const $ = _c(33);
+	let className;
+	let isOpen;
+	let labels;
+	let onOpenChange;
+	let panelLabels;
+	let panelProps;
+	let surface;
+	let unreadCount;
+	if ($[0] !== t0) {
+		({isOpen, onOpenChange, surface, unreadCount, labels, panelLabels, className, ...panelProps} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = isOpen;
+		$[3] = labels;
+		$[4] = onOpenChange;
+		$[5] = panelLabels;
+		$[6] = panelProps;
+		$[7] = surface;
+		$[8] = unreadCount;
+	} else {
+		className = $[1];
+		isOpen = $[2];
+		labels = $[3];
+		onOpenChange = $[4];
+		panelLabels = $[5];
+		panelProps = $[6];
+		surface = $[7];
+		unreadCount = $[8];
+	}
+	const resolvedLabels = {
+		...NOTIFICATION_BELL_DEFAULT_LABELS,
+		...labels
+	};
+	const shouldReduceMotion = usePrefersReducedMotion();
+	const titleId = useId();
+	const isHydrated = useIsHydrated();
+	const isMobile = useIsMobile();
+	const resolvedSurface = surface === NOTIFICATION_BELL_SURFACE.responsive && isHydrated ? isMobile ? NOTIFICATION_BELL_SURFACE.sheet : NOTIFICATION_BELL_SURFACE.popover : surface;
+	const isResponsive = resolvedSurface === NOTIFICATION_BELL_SURFACE.responsive;
+	const showsSheet = isResponsive || resolvedSurface === NOTIFICATION_BELL_SURFACE.sheet;
+	const showsPopover = isResponsive || resolvedSurface === NOTIFICATION_BELL_SURFACE.popover;
+	const accessibleLabel = resolvedLabels.describeUnread(unreadCount);
+	const unreadIncreaseCount = useUnreadIncreaseCount(unreadCount);
+	let t1;
+	if ($[9] !== shouldReduceMotion || $[10] !== unreadIncreaseCount) {
+		t1 = unreadIncreaseCount > 0 && !shouldReduceMotion ? { rotate: BELL_NUDGE_ROTATION_DEGREES } : undefined;
+		$[9] = shouldReduceMotion;
+		$[10] = unreadIncreaseCount;
+		$[11] = t1;
+	} else {
+		t1 = $[11];
+	}
+	let t2;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ _jsx(BellIcon, { "aria-hidden": "true" });
+		$[12] = t2;
+	} else {
+		t2 = $[12];
+	}
+	let t3;
+	if ($[13] !== t1 || $[14] !== unreadIncreaseCount) {
+		t3 = /* @__PURE__ */ _jsx(motion.span, {
+			animate: t1,
+			"aria-hidden": "true",
+			className: "inline-flex origin-[50%_10%]",
+			transition: BELL_NUDGE_TRANSITION,
+			children: t2
+		}, unreadIncreaseCount);
+		$[13] = t1;
+		$[14] = unreadIncreaseCount;
+		$[15] = t3;
+	} else {
+		t3 = $[15];
+	}
+	let t4;
+	if ($[16] !== unreadCount) {
+		t4 = unreadCount > 0 ? /* @__PURE__ */ _createElement(motion.span, {
+			...BADGE_MOTION,
+			"aria-hidden": "true",
+			className: "pointer-events-none absolute top-0 right-0 inline-flex h-5 min-w-5 translate-x-[35%] -translate-y-[30%] items-center justify-center rounded-full border-2 border-background bg-primary px-1 text-xs leading-none font-semibold text-primary-foreground tabular-nums",
+			key: "unread-badge"
+		}, /* @__PURE__ */ _jsx(AnimatedCount, {
+			format: formatUnreadBadge,
+			value: Math.min(unreadCount, BADGE_ROLL_CEILING)
+		})) : null;
+		$[16] = unreadCount;
+		$[17] = t4;
+	} else {
+		t4 = $[17];
+	}
+	let t5;
+	if ($[18] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: false,
+			children: t4
+		});
+		$[18] = t4;
+		$[19] = t5;
+	} else {
+		t5 = $[19];
+	}
+	let t6;
+	if ($[20] !== accessibleLabel || $[21] !== t3 || $[22] !== t5) {
+		t6 = /* @__PURE__ */ _jsxs(Button, {
+			"data-slot": "notification-bell-trigger",
+			"aria-label": accessibleLabel,
+			className: "relative pointer-coarse:min-h-10 pointer-coarse:min-w-10",
+			size: "icon",
+			type: "button",
+			variant: "ghost",
+			children: [t3, t5]
+		});
+		$[20] = accessibleLabel;
+		$[21] = t3;
+		$[22] = t5;
+		$[23] = t6;
+	} else {
+		t6 = $[23];
+	}
+	const trigger = t6;
+	let t7;
+	if ($[24] !== className) {
+		t7 = cn("contents", className);
+		$[24] = className;
+		$[25] = t7;
+	} else {
+		t7 = $[25];
+	}
+	const t8 = unreadCount > 0 ? accessibleLabel : "";
+	let t9;
+	if ($[26] !== t8) {
+		t9 = /* @__PURE__ */ _jsx("span", {
+			"aria-live": "polite",
+			className: "sr-only",
+			role: "status",
+			children: t8
+		});
+		$[26] = t8;
+		$[27] = t9;
+	} else {
+		t9 = $[27];
+	}
+	const t10 = showsPopover ? /* @__PURE__ */ _jsx("span", {
+		className: cn("contents", isResponsive && "max-md:hidden"),
+		children: /* @__PURE__ */ _jsxs(Popover, {
+			onOpenChange,
+			open: isOpen,
+			children: [/* @__PURE__ */ _jsx(PopoverTrigger, {
+				asChild: true,
+				children: trigger
+			}), /* @__PURE__ */ _jsx(PopoverContent, {
+				align: "end",
+				"aria-labelledby": titleId,
+				className: "flex max-h-[min(32rem,calc(100svh-5rem))] w-[min(24rem,calc(100vw-2rem))] flex-col overflow-hidden p-0",
+				children: /* @__PURE__ */ _jsx(NotificationPanel, {
+					...panelProps,
+					labels: panelLabels,
+					titleSlot: /* @__PURE__ */ _jsx("h2", {
+						className: "m-0 text-base font-semibold",
+						id: titleId,
+						children: resolvedLabels.title
+					}),
+					unreadCount
+				})
+			})]
+		})
+	}) : null;
+	const t11 = showsSheet ? /* @__PURE__ */ _jsx("span", {
+		className: cn("contents", isResponsive && "md:hidden"),
+		children: /* @__PURE__ */ _jsxs(Sheet, {
+			onOpenChange,
+			open: isOpen,
+			children: [/* @__PURE__ */ _jsx(SheetTrigger, {
+				asChild: true,
+				children: trigger
+			}), /* @__PURE__ */ _jsxs(SheetContent, {
+				className: "flex max-h-[85dvh] flex-col gap-0 overflow-hidden p-0 pb-[env(safe-area-inset-bottom)]",
+				side: "bottom",
+				children: [/* @__PURE__ */ _jsx(SheetDescription, {
+					className: "sr-only",
+					children: resolvedLabels.sheetDescription
+				}), /* @__PURE__ */ _jsx(NotificationPanel, {
+					...panelProps,
+					labels: panelLabels,
+					reservesCloseButtonSpace: true,
+					titleSlot: /* @__PURE__ */ _jsx(SheetTitle, {
+						className: "m-0 text-base font-semibold",
+						children: resolvedLabels.title
+					}),
+					unreadCount
+				})]
+			})]
+		})
+	}) : null;
+	let t12;
+	if ($[28] !== t10 || $[29] !== t11 || $[30] !== t7 || $[31] !== t9) {
+		t12 = /* @__PURE__ */ _jsxs("span", {
+			"data-slot": "notification-bell",
+			className: t7,
+			children: [
+				t9,
+				t10,
+				t11
+			]
+		});
+		$[28] = t10;
+		$[29] = t11;
+		$[30] = t7;
+		$[31] = t9;
+		$[32] = t12;
+	} else {
+		t12 = $[32];
+	}
+	return t12;
+}

package/dist/components/notification-panel.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Content of a notification inbox: header with "mark all as read", the list, and the loading,
+ * error and empty states. Presentational: items, statuses and callbacks come from the caller.
+ */
+import type { ReactNode } from "react";
+export declare const NOTIFICATION_PANEL_STATUS: {
+    readonly error: "error";
+    readonly idle: "idle";
+    readonly loaded: "loaded";
+    readonly loading: "loading";
+};
+export type NotificationPanelStatus = (typeof NOTIFICATION_PANEL_STATUS)[keyof typeof NOTIFICATION_PANEL_STATUS];
+/** Presentation of one inbox item, already resolved by the application. */
+export interface NotificationPanelItem {
+    id: string;
+    title: string;
+    /** Secondary line, such as when or where. */
+    detail?: string;
+    /** Short creation stamp, such as "12 may · 18:00". */
+    sentAtLabel?: string;
+    /** In-app destination; navigates through the configured router adapter. */
+    href: string;
+    isUnread: boolean;
+}
+export interface NotificationPanelLabels {
+    markAllRead: string;
+    loading: string;
+    error: string;
+    retry: string;
+    empty: string;
+    emptyHint: string;
+    /** Visually hidden prefix of unread items. */
+    unreadPrefix: string;
+}
+export declare const NOTIFICATION_PANEL_DEFAULT_LABELS: NotificationPanelLabels;
+export interface NotificationPanelProps {
+    notifications: readonly NotificationPanelItem[];
+    listStatus: NotificationPanelStatus;
+    unreadCount: number;
+    isMarkingAll: boolean;
+    onMarkAllRead: () => void;
+    onRetry: () => void;
+    onSelectNotification: (notificationId: string) => void;
+    /** Heading rendered by the surface (popover or sheet title). */
+    titleSlot: ReactNode;
+    /** Leaves room for a sheet close button at the end of the header. */
+    reservesCloseButtonSpace?: boolean;
+    labels?: Partial<NotificationPanelLabels>;
+    className?: string;
+}
+/**
+ * Renders the inbox. Unread items keep a dot that fades out when they are read.
+ * @param props - Items, load status, callbacks, title slot and optional labels.
+ * @returns The panel.
+ */
+export declare function NotificationPanel({ notifications, listStatus, unreadCount, isMarkingAll, onMarkAllRead, onRetry, onSelectNotification, titleSlot, reservesCloseButtonSpace, labels, className, }: NotificationPanelProps): import("react").JSX.Element;

package/dist/components/notification-panel.js

@@ -0,0 +1,281 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { BellOffIcon, CheckCheckIcon } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { cn } from "../lib/utils.js";
+import { MOTION_EASE, MOTION_TIMING } from "../motion/tokens.js";
+import { AnimatedListItem } from "./animated-list-item.js";
+import { Button } from "./button.js";
+import { Link } from "./link.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const NOTIFICATION_PANEL_STATUS = {
+	error: "error",
+	idle: "idle",
+	loaded: "loaded",
+	loading: "loading"
+};
+export const NOTIFICATION_PANEL_DEFAULT_LABELS = {
+	markAllRead: "Marcar todas como leídas",
+	loading: "Cargando notificaciones…",
+	error: "No pudimos cargar tus notificaciones.",
+	retry: "Reintentar",
+	empty: "No tenés notificaciones.",
+	emptyHint: "Te avisamos acá cuando cambie algo que te importa.",
+	unreadPrefix: "No leída: "
+};
+/** Body regions fade in when they mount, so the new state is in the DOM at once. */
+const REGION_FADE_CLASS_NAME = "animate-in fade-in duration-180";
+const MARK_ALL_FADE = {
+	animate: { opacity: 1 },
+	exit: { opacity: 0 },
+	initial: { opacity: 0 },
+	transition: {
+		duration: MOTION_TIMING.enter,
+		ease: MOTION_EASE
+	}
+};
+/**
+* Picks the body region: the list whenever there are items (a background refresh never hides
+* them), otherwise the state of the last load.
+* @param hasNotifications - Whether the inbox has at least one item.
+* @param listStatus - Status of the latest list load.
+* @returns The region to render.
+*/
+function resolvePanelView(hasNotifications, listStatus) {
+	if (hasNotifications) return "list";
+	if (listStatus === NOTIFICATION_PANEL_STATUS.loading) return "loading";
+	if (listStatus === NOTIFICATION_PANEL_STATUS.error) return "error";
+	if (listStatus === NOTIFICATION_PANEL_STATUS.loaded) return "empty";
+	return "idle";
+}
+/**
+* Renders the inbox. Unread items keep a dot that fades out when they are read.
+* @param props - Items, load status, callbacks, title slot and optional labels.
+* @returns The panel.
+*/
+export function NotificationPanel(t0) {
+	const $ = _c(42);
+	const { notifications, listStatus, unreadCount, isMarkingAll, onMarkAllRead, onRetry, onSelectNotification, titleSlot, reservesCloseButtonSpace: t1, labels, className } = t0;
+	const reservesCloseButtonSpace = t1 === undefined ? false : t1;
+	let t2;
+	if ($[0] !== labels) {
+		t2 = {
+			...NOTIFICATION_PANEL_DEFAULT_LABELS,
+			...labels
+		};
+		$[0] = labels;
+		$[1] = t2;
+	} else {
+		t2 = $[1];
+	}
+	const resolvedLabels = t2;
+	const t3 = notifications.length > 0;
+	let t4;
+	if ($[2] !== listStatus || $[3] !== t3) {
+		t4 = resolvePanelView(t3, listStatus);
+		$[2] = listStatus;
+		$[3] = t3;
+		$[4] = t4;
+	} else {
+		t4 = $[4];
+	}
+	const panelView = t4;
+	let t5;
+	if ($[5] !== className) {
+		t5 = cn("flex min-h-0 min-w-0 flex-col", className);
+		$[5] = className;
+		$[6] = t5;
+	} else {
+		t5 = $[6];
+	}
+	const t6 = reservesCloseButtonSpace && "pr-12";
+	let t7;
+	if ($[7] !== t6) {
+		t7 = cn("flex flex-wrap items-center justify-between gap-2 border-b border-border px-4 py-3", t6);
+		$[7] = t6;
+		$[8] = t7;
+	} else {
+		t7 = $[8];
+	}
+	let t8;
+	if ($[9] !== isMarkingAll || $[10] !== onMarkAllRead || $[11] !== resolvedLabels || $[12] !== unreadCount) {
+		t8 = unreadCount > 0 ? /* @__PURE__ */ _jsx(motion.span, {
+			className: "-mr-2 inline-flex",
+			...MARK_ALL_FADE,
+			children: /* @__PURE__ */ _jsxs(Button, {
+				className: "text-[0.8rem] text-muted-foreground",
+				disabled: isMarkingAll,
+				onClick: onMarkAllRead,
+				size: "sm",
+				type: "button",
+				variant: "ghost",
+				children: [/* @__PURE__ */ _jsx(CheckCheckIcon, { "aria-hidden": "true" }), resolvedLabels.markAllRead]
+			})
+		}, "mark-all") : null;
+		$[9] = isMarkingAll;
+		$[10] = onMarkAllRead;
+		$[11] = resolvedLabels;
+		$[12] = unreadCount;
+		$[13] = t8;
+	} else {
+		t8 = $[13];
+	}
+	let t9;
+	if ($[14] !== t8) {
+		t9 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: false,
+			children: t8
+		});
+		$[14] = t8;
+		$[15] = t9;
+	} else {
+		t9 = $[15];
+	}
+	let t10;
+	if ($[16] !== t7 || $[17] !== t9 || $[18] !== titleSlot) {
+		t10 = /* @__PURE__ */ _jsxs("div", {
+			className: t7,
+			children: [titleSlot, t9]
+		});
+		$[16] = t7;
+		$[17] = t9;
+		$[18] = titleSlot;
+		$[19] = t10;
+	} else {
+		t10 = $[19];
+	}
+	let t11;
+	if ($[20] !== panelView || $[21] !== resolvedLabels) {
+		t11 = panelView === "loading" ? /* @__PURE__ */ _jsx("p", {
+			className: cn("m-0 grid justify-items-start gap-3 p-4 text-[0.9rem] text-muted-foreground", REGION_FADE_CLASS_NAME),
+			role: "status",
+			children: resolvedLabels.loading
+		}) : null;
+		$[20] = panelView;
+		$[21] = resolvedLabels;
+		$[22] = t11;
+	} else {
+		t11 = $[22];
+	}
+	let t12;
+	if ($[23] !== onRetry || $[24] !== panelView || $[25] !== resolvedLabels) {
+		t12 = panelView === "error" ? /* @__PURE__ */ _jsxs("div", {
+			className: cn("grid justify-items-start gap-3 p-4 text-[0.9rem] text-muted-foreground", REGION_FADE_CLASS_NAME),
+			role: "alert",
+			children: [/* @__PURE__ */ _jsx("p", {
+				className: "m-0",
+				children: resolvedLabels.error
+			}), /* @__PURE__ */ _jsx(Button, {
+				onClick: onRetry,
+				size: "sm",
+				type: "button",
+				variant: "outline",
+				children: resolvedLabels.retry
+			})]
+		}) : null;
+		$[23] = onRetry;
+		$[24] = panelView;
+		$[25] = resolvedLabels;
+		$[26] = t12;
+	} else {
+		t12 = $[26];
+	}
+	let t13;
+	if ($[27] !== panelView || $[28] !== resolvedLabels) {
+		t13 = panelView === "empty" ? /* @__PURE__ */ _jsxs("div", {
+			className: cn("grid justify-items-center gap-[0.35rem] px-5 py-8 text-center text-[0.9rem] text-muted-foreground", REGION_FADE_CLASS_NAME),
+			children: [
+				/* @__PURE__ */ _jsx(BellOffIcon, {
+					"aria-hidden": "true",
+					className: "mb-1 size-6 opacity-80"
+				}),
+				/* @__PURE__ */ _jsx("p", {
+					className: "m-0",
+					children: resolvedLabels.empty
+				}),
+				/* @__PURE__ */ _jsx("p", {
+					className: "m-0 max-w-72 text-[0.8rem]",
+					children: resolvedLabels.emptyHint
+				})
+			]
+		}) : null;
+		$[27] = panelView;
+		$[28] = resolvedLabels;
+		$[29] = t13;
+	} else {
+		t13 = $[29];
+	}
+	let t14;
+	if ($[30] !== notifications || $[31] !== onSelectNotification || $[32] !== panelView || $[33] !== resolvedLabels) {
+		t14 = panelView === "list" ? /* @__PURE__ */ _jsx("ul", {
+			className: cn("m-0 min-h-0 list-none overflow-y-auto overscroll-contain py-1", REGION_FADE_CLASS_NAME),
+			children: /* @__PURE__ */ _jsx(AnimatePresence, {
+				initial: false,
+				children: notifications.map((notification) => /* @__PURE__ */ _jsx(AnimatedListItem, {
+					className: "[&+&]:border-t [&+&]:border-border/60",
+					children: /* @__PURE__ */ _jsxs(Link, {
+						className: cn("grid grid-cols-[0.5rem_minmax(0,1fr)] items-start gap-3 px-4 py-3 text-foreground no-underline outline-none [-webkit-tap-highlight-color:transparent] transition-[background-color,box-shadow] focus-visible:bg-accent focus-visible:shadow-[inset_0_0_0_2px_var(--ring)] active:bg-accent [@media(hover:hover)]:hover:bg-accent", notification.isUnread && "bg-primary/6"),
+						href: notification.href,
+						onClick: () => onSelectNotification(notification.id),
+						children: [/* @__PURE__ */ _jsx("span", {
+							"aria-hidden": "true",
+							"data-unread": notification.isUnread || undefined,
+							className: "mt-[0.4rem] size-2 scale-50 rounded-full bg-primary opacity-0 transition-[opacity,scale] data-unread:scale-100 data-unread:opacity-100"
+						}), /* @__PURE__ */ _jsxs("span", {
+							className: "grid min-w-0 gap-[0.15rem]",
+							children: [
+								notification.isUnread ? /* @__PURE__ */ _jsx("span", {
+									className: "sr-only",
+									children: resolvedLabels.unreadPrefix
+								}) : null,
+								/* @__PURE__ */ _jsx("span", {
+									className: "text-[0.9rem] leading-[1.35] font-medium [overflow-wrap:anywhere]",
+									children: notification.title
+								}),
+								notification.detail ? /* @__PURE__ */ _jsx("span", {
+									className: "text-[0.8rem] leading-[1.4] text-muted-foreground [overflow-wrap:anywhere]",
+									children: notification.detail
+								}) : null,
+								notification.sentAtLabel ? /* @__PURE__ */ _jsx("span", {
+									className: "text-xs text-muted-foreground",
+									children: notification.sentAtLabel
+								}) : null
+							]
+						})]
+					})
+				}, notification.id))
+			})
+		}) : null;
+		$[30] = notifications;
+		$[31] = onSelectNotification;
+		$[32] = panelView;
+		$[33] = resolvedLabels;
+		$[34] = t14;
+	} else {
+		t14 = $[34];
+	}
+	let t15;
+	if ($[35] !== t10 || $[36] !== t11 || $[37] !== t12 || $[38] !== t13 || $[39] !== t14 || $[40] !== t5) {
+		t15 = /* @__PURE__ */ _jsxs("div", {
+			"data-slot": "notification-panel",
+			className: t5,
+			children: [
+				t10,
+				t11,
+				t12,
+				t13,
+				t14
+			]
+		});
+		$[35] = t10;
+		$[36] = t11;
+		$[37] = t12;
+		$[38] = t13;
+		$[39] = t14;
+		$[40] = t5;
+		$[41] = t15;
+	} else {
+		t15 = $[41];
+	}
+	return t15;
+}

package/dist/components/open-in-browser-cta.d.ts

@@ -0,0 +1,22 @@
+export interface OpenInBrowserCtaCopy {
+    title: string;
+    description: string;
+    iosButtonLabel: string;
+    iosHint: string;
+    manualHint: string;
+}
+export interface OpenInBrowserCtaProps {
+    /** Absolute https URL to continue with, such as the sign-in page. */
+    url: string;
+    /** iOS gets a Safari deep link; other platforms get manual steps. */
+    isIos: boolean;
+    copy?: Partial<OpenInBrowserCtaCopy>;
+    className?: string;
+}
+/**
+ * Renders the handoff section. The URL is selectable with one tap, since copying is the only
+ * universal escape from embedded browsers.
+ * @param props - Destination URL, platform and optional copy.
+ * @returns The call to action.
+ */
+export declare function OpenInBrowserCta({ url, isIos, copy, className }: OpenInBrowserCtaProps): import("react").JSX.Element;