beez-ui 0.7.0 → 0.8.0

package/dist/components/month-grid.js

@@ -0,0 +1,301 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { cn } from "../lib/utils.js";
+import { createMonthGridDays, groupItemsByDateKey, splitCalendarWeeks } from "../lib/month-grid.js";
+import { PresenceSwap } from "./presence-swap.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+const MONTH_GRID_DEFAULT_LABELS = {
+	table: "Calendario mensual",
+	today: "Hoy",
+	cancelled: "Cancelado",
+	dayItems: "Eventos del día",
+	dayButton: (dayLabel, itemCount) => `${dayLabel}: ${itemCount} ${itemCount === 1 ? "evento" : "eventos"}`,
+	weekDays: [
+		"Lun",
+		"Mar",
+		"Mié",
+		"Jue",
+		"Vie",
+		"Sáb",
+		"Dom"
+	]
+};
+/** Dots shown per day on phones before the "+N" overflow indicator. */
+const DAY_DOTS_MAX = 3;
+const DEFAULT_LOCALE = "es-AR";
+const NO_ITEMS = [];
+/** Day keys are formatted at noon UTC so no time zone shifts them to a neighbour day. */
+const DAY_KEY_NOON_SUFFIX = "T12:00:00Z";
+/**
+* Builds the CSS variables carrying an item's colors.
+* @param item - Item with optional colors.
+* @returns Inline style with the defined variables.
+*/
+function buildItemColorStyle(item) {
+	return {
+		...item.accentColor ? { "--beez-item-accent": item.accentColor } : {},
+		...item.surfaceColor ? { "--beez-item-surface": item.surfaceColor } : {}
+	};
+}
+/**
+* Formats a day key as a long, readable date.
+* @param dateKey - `YYYY-MM-DD` key.
+* @param locale - BCP 47 locale.
+* @returns For example "miércoles, 6 de mayo".
+*/
+function formatLongDayLabel(dateKey, locale) {
+	return new Intl.DateTimeFormat(locale, {
+		weekday: "long",
+		day: "numeric",
+		month: "long",
+		timeZone: "UTC"
+	}).format(new Date(dateKey + DAY_KEY_NOON_SUFFIX));
+}
+/**
+* Renders the month as an accessible table with today marked (`aria-current="date"`).
+* @param props - Month, items, selection callbacks and optional labels.
+* @returns The month grid and its phone day summary.
+*/
+export function MonthGrid(t0) {
+	const $ = _c(53);
+	const { month, items, onSelectItem, todayKey: t1, weekStartsOn: t2, activeDayKey: t3, onSelectDay, renderDaySummary, locale: t4, labels, className } = t0;
+	const todayKey = t1 === undefined ? null : t1;
+	const weekStartsOn = t2 === undefined ? 1 : t2;
+	const activeDayKey = t3 === undefined ? null : t3;
+	const locale = t4 === undefined ? DEFAULT_LOCALE : t4;
+	let T0;
+	let T1;
+	let activeDayItems;
+	let renderItemButton;
+	let resolvedLabels;
+	let t10;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	let t9;
+	if ($[0] !== activeDayKey || $[1] !== className || $[2] !== items || $[3] !== labels || $[4] !== locale || $[5] !== month || $[6] !== onSelectDay || $[7] !== onSelectItem || $[8] !== todayKey || $[9] !== weekStartsOn) {
+		resolvedLabels = {
+			...MONTH_GRID_DEFAULT_LABELS,
+			...labels
+		};
+		const weekDayLabels = weekStartsOn === 0 ? [...resolvedLabels.weekDays.slice(-1), ...resolvedLabels.weekDays.slice(0, -1)] : resolvedLabels.weekDays;
+		let t11;
+		if ($[21] !== month || $[22] !== weekStartsOn) {
+			t11 = splitCalendarWeeks(createMonthGridDays(month, weekStartsOn));
+			$[21] = month;
+			$[22] = weekStartsOn;
+			$[23] = t11;
+		} else {
+			t11 = $[23];
+		}
+		const weeks = t11;
+		let t12;
+		if ($[24] !== items) {
+			t12 = groupItemsByDateKey(items, _temp);
+			$[24] = items;
+			$[25] = t12;
+		} else {
+			t12 = $[25];
+		}
+		const itemsByDay = t12;
+		let t13;
+		if ($[26] !== activeDayKey || $[27] !== itemsByDay) {
+			t13 = activeDayKey ? itemsByDay[activeDayKey] ?? [] : [];
+			$[26] = activeDayKey;
+			$[27] = itemsByDay;
+			$[28] = t13;
+		} else {
+			t13 = $[28];
+		}
+		activeDayItems = t13;
+		renderItemButton = (item_0, className_0) => /* @__PURE__ */ _jsxs("button", {
+			"data-slot": "month-grid-item",
+			"data-past": item_0.isPast || undefined,
+			"data-cancelled": item_0.isCancelled || undefined,
+			className: cn("w-full cursor-pointer rounded-[0.45rem] border border-[color-mix(in_oklab,var(--beez-item-accent,var(--primary))_35%,var(--border))] border-l-[3px] border-l-[var(--beez-item-accent,var(--primary))] bg-[var(--beez-item-surface,var(--background))] p-[0.35rem] text-left text-[0.8rem] font-bold text-foreground [overflow-wrap:anywhere] [-webkit-tap-highlight-color:transparent] transition-[border-color,background-color,scale] hover:border-[color-mix(in_oklab,var(--beez-item-accent,var(--primary))_60%,var(--border))] active:scale-[0.98] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring", "data-cancelled:border-border data-cancelled:bg-muted/60 data-cancelled:font-semibold data-cancelled:text-muted-foreground data-past:border-border data-past:bg-muted/60 data-past:font-semibold data-past:text-muted-foreground", className_0),
+			style: buildItemColorStyle(item_0),
+			type: "button",
+			onClick: () => onSelectItem(item_0),
+			children: [
+				item_0.leading,
+				item_0.timeLabel ? /* @__PURE__ */ _jsxs("span", {
+					className: "font-semibold text-muted-foreground tabular-nums",
+					children: [" ", item_0.timeLabel]
+				}) : null,
+				/* @__PURE__ */ _jsxs("span", {
+					className: cn(item_0.isCancelled && "line-through"),
+					children: [" ", item_0.title]
+				}),
+				item_0.isCancelled ? /* @__PURE__ */ _jsx("span", {
+					className: "block text-[0.72rem] font-bold",
+					children: resolvedLabels.cancelled
+				}) : null
+			]
+		}, item_0.id);
+		t9 = "month-grid";
+		if ($[29] !== className) {
+			t10 = cn("grid min-w-0 gap-5", className);
+			$[29] = className;
+			$[30] = t10;
+		} else {
+			t10 = $[30];
+		}
+		T1 = Table;
+		t6 = resolvedLabels.table;
+		t7 = "w-full table-fixed border border-border md:min-w-[42rem]";
+		t8 = /* @__PURE__ */ _jsx(TableHeader, { children: /* @__PURE__ */ _jsx(TableRow, { children: weekDayLabels.map(_temp2) }) });
+		T0 = TableBody;
+		t5 = weeks.map((week) => /* @__PURE__ */ _jsx(TableRow, { children: week.map((day) => {
+			const isToday = day.dateKey === todayKey;
+			const dayItems = itemsByDay[day.dateKey] ?? NO_ITEMS;
+			return /* @__PURE__ */ _jsxs(TableCell, {
+				"aria-current": isToday ? "date" : undefined,
+				className: cn("h-32 w-[calc(100%/7)] border-l border-border align-top whitespace-normal max-md:h-auto max-md:min-h-14 max-md:p-[0.2rem]", isToday && "bg-[color-mix(in_oklab,var(--primary)_6%,var(--background))]"),
+				children: [
+					/* @__PURE__ */ _jsxs("span", {
+						className: cn("inline-flex size-7 items-center justify-center rounded-full font-bold tabular-nums max-md:size-6 max-md:text-[0.8rem]", !day.isCurrentMonth && "font-medium text-muted-foreground", isToday && "bg-primary text-primary-foreground"),
+						children: [day.dayNumber, isToday ? /* @__PURE__ */ _jsxs("span", {
+							className: "sr-only",
+							children: [" ", resolvedLabels.today]
+						}) : null]
+					}),
+					dayItems.length > 0 && onSelectDay ? /* @__PURE__ */ _jsxs("button", {
+						"aria-label": resolvedLabels.dayButton(formatLongDayLabel(day.dateKey, locale), dayItems.length),
+						"aria-pressed": activeDayKey === day.dateKey,
+						className: "mt-[0.2rem] hidden min-h-6 w-full cursor-pointer flex-wrap items-center justify-center gap-[0.2rem] rounded-[0.4rem] border-0 bg-transparent py-[0.2rem] text-muted-foreground [-webkit-tap-highlight-color:transparent] transition-[background-color,scale] active:scale-[0.94] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring aria-pressed:bg-[color-mix(in_oklab,var(--primary)_14%,var(--background))] max-md:flex",
+						type: "button",
+						onClick: () => onSelectDay(day.dateKey),
+						children: [dayItems.slice(0, DAY_DOTS_MAX).map(_temp3), dayItems.length > DAY_DOTS_MAX ? /* @__PURE__ */ _jsxs("span", {
+							"aria-hidden": true,
+							className: "text-[0.65rem] leading-none font-semibold tabular-nums",
+							children: ["+", dayItems.length - DAY_DOTS_MAX]
+						}) : null]
+					}) : null,
+					/* @__PURE__ */ _jsx("div", {
+						className: cn("mt-[0.35rem] grid gap-[0.35rem]", onSelectDay && "max-md:hidden"),
+						children: dayItems.map((item_2) => renderItemButton(item_2, ""))
+					})
+				]
+			}, day.dateKey);
+		}) }, week[0].dateKey));
+		$[0] = activeDayKey;
+		$[1] = className;
+		$[2] = items;
+		$[3] = labels;
+		$[4] = locale;
+		$[5] = month;
+		$[6] = onSelectDay;
+		$[7] = onSelectItem;
+		$[8] = todayKey;
+		$[9] = weekStartsOn;
+		$[10] = T0;
+		$[11] = T1;
+		$[12] = activeDayItems;
+		$[13] = renderItemButton;
+		$[14] = resolvedLabels;
+		$[15] = t10;
+		$[16] = t5;
+		$[17] = t6;
+		$[18] = t7;
+		$[19] = t8;
+		$[20] = t9;
+	} else {
+		T0 = $[10];
+		T1 = $[11];
+		activeDayItems = $[12];
+		renderItemButton = $[13];
+		resolvedLabels = $[14];
+		t10 = $[15];
+		t5 = $[16];
+		t6 = $[17];
+		t7 = $[18];
+		t8 = $[19];
+		t9 = $[20];
+	}
+	let t11;
+	if ($[31] !== T0 || $[32] !== t5) {
+		t11 = /* @__PURE__ */ _jsx(T0, { children: t5 });
+		$[31] = T0;
+		$[32] = t5;
+		$[33] = t11;
+	} else {
+		t11 = $[33];
+	}
+	let t12;
+	if ($[34] !== T1 || $[35] !== t11 || $[36] !== t6 || $[37] !== t7 || $[38] !== t8) {
+		t12 = /* @__PURE__ */ _jsxs(T1, {
+			"aria-label": t6,
+			className: t7,
+			children: [t8, t11]
+		});
+		$[34] = T1;
+		$[35] = t11;
+		$[36] = t6;
+		$[37] = t7;
+		$[38] = t8;
+		$[39] = t12;
+	} else {
+		t12 = $[39];
+	}
+	let t13;
+	if ($[40] !== activeDayItems || $[41] !== activeDayKey || $[42] !== locale || $[43] !== onSelectDay || $[44] !== renderDaySummary || $[45] !== renderItemButton || $[46] !== resolvedLabels) {
+		t13 = onSelectDay ? /* @__PURE__ */ _jsx("div", {
+			className: "hidden min-w-0 empty:hidden max-md:grid",
+			children: activeDayKey && activeDayItems.length > 0 ? /* @__PURE__ */ _jsx(PresenceSwap, {
+				presenceKey: activeDayKey,
+				children: renderDaySummary ? renderDaySummary(activeDayKey, activeDayItems) : /* @__PURE__ */ _jsxs("section", {
+					"aria-label": resolvedLabels.dayItems,
+					className: "grid gap-2",
+					children: [/* @__PURE__ */ _jsx("h3", {
+						className: "m-0 text-sm font-semibold first-letter:uppercase",
+						children: formatLongDayLabel(activeDayKey, locale)
+					}), activeDayItems.map((item_3) => renderItemButton(item_3, "text-sm"))]
+				})
+			}) : null
+		}) : null;
+		$[40] = activeDayItems;
+		$[41] = activeDayKey;
+		$[42] = locale;
+		$[43] = onSelectDay;
+		$[44] = renderDaySummary;
+		$[45] = renderItemButton;
+		$[46] = resolvedLabels;
+		$[47] = t13;
+	} else {
+		t13 = $[47];
+	}
+	let t14;
+	if ($[48] !== t10 || $[49] !== t12 || $[50] !== t13 || $[51] !== t9) {
+		t14 = /* @__PURE__ */ _jsxs("div", {
+			"data-slot": t9,
+			className: t10,
+			children: [t12, t13]
+		});
+		$[48] = t10;
+		$[49] = t12;
+		$[50] = t13;
+		$[51] = t9;
+		$[52] = t14;
+	} else {
+		t14 = $[52];
+	}
+	return t14;
+}
+function _temp3(item_1) {
+	return /* @__PURE__ */ _jsx("span", {
+		"aria-hidden": true,
+		className: cn("size-[0.4rem] rounded-full bg-[var(--beez-item-accent,var(--primary))]", item_1.isPast && "bg-muted-foreground", item_1.isCancelled && "border border-muted-foreground bg-transparent"),
+		style: buildItemColorStyle(item_1)
+	}, item_1.id);
+}
+function _temp2(dayLabel) {
+	return /* @__PURE__ */ _jsx(TableHead, {
+		className: "border-l border-border text-center text-[0.8rem] font-semibold text-muted-foreground max-md:px-[0.15rem] max-md:text-[0.7rem]",
+		children: dayLabel
+	}, dayLabel);
+}
+function _temp(item) {
+	return item.dateKey;
+}

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

@@ -0,0 +1,50 @@
+import { type NotificationPanelProps } from "./notification-panel.js";
+/**
+ * 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 declare const NOTIFICATION_BELL_SURFACE: {
+    readonly popover: "popover";
+    readonly responsive: "responsive";
+    readonly sheet: "sheet";
+};
+export type NotificationBellSurface = (typeof NOTIFICATION_BELL_SURFACE)[keyof typeof NOTIFICATION_BELL_SURFACE];
+/** The badge shows up to this number; above it, "9+". */
+export declare const NOTIFICATION_BADGE_MAX = 9;
+/**
+ * Visible badge text.
+ * @param unreadCount - Unread notifications.
+ * @returns "3" or "9+".
+ */
+export declare function formatUnreadBadge(unreadCount: number): string;
+/**
+ * Default accessible name of the bell, announcing the unread count.
+ * @param unreadCount - Unread notifications.
+ * @returns "Notificaciones" or "Notificaciones, 3 sin leer".
+ */
+export declare function describeUnreadNotifications(unreadCount: number): string;
+export interface NotificationBellLabels {
+    title: string;
+    /** Visually hidden description of the mobile sheet. */
+    sheetDescription: string;
+    /** Accessible name of the bell for a given unread count. */
+    describeUnread: (unreadCount: number) => string;
+}
+export type NotificationBellProps = Omit<NotificationPanelProps, "titleSlot" | "reservesCloseButtonSpace" | "labels"> & {
+    /** Desktop popover, mobile bottom sheet, or both before hydration. */
+    surface: NotificationBellSurface;
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+    labels?: Partial<NotificationBellLabels>;
+    panelLabels?: NotificationPanelProps["labels"];
+};
+/**
+ * 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 declare function NotificationBell({ isOpen, onOpenChange, surface, unreadCount, labels, panelLabels, className, ...panelProps }: NotificationBellProps): import("react").JSX.Element;

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;
+}