beez-ui 0.6.2 → 0.8.0

package/dist/components/month-grid.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Month grid of dated items, such as events or deadlines. Wide screens show one pill per item;
+ * phones show one dot per item and list the selected day under the grid.
+ */
+import { type ReactNode } from "react";
+import { type CalendarWeekStart } from "../lib/month-grid.js";
+/** Presentation of one dated item, already resolved by the application. */
+export interface MonthGridItem {
+    id: string;
+    /** `YYYY-MM-DD` day the item belongs to, in the zone the application displays. */
+    dateKey: string;
+    title: string;
+    /** Short start time, such as "18:00". */
+    timeLabel?: string;
+    /** Past items are muted. */
+    isPast?: boolean;
+    /** Cancelled items are struck through, muted and labelled. */
+    isCancelled?: boolean;
+    /** CSS color of the dot and the pill accent. Defaults to the primary color. */
+    accentColor?: string;
+    /** CSS color of the pill surface. Defaults to the background. */
+    surfaceColor?: string;
+    /** Leading content of the pill, such as a type badge or icon. */
+    leading?: ReactNode;
+}
+export interface MonthGridLabels {
+    table: string;
+    today: string;
+    cancelled: string;
+    /** Accessible name of the phone summary of the selected day. */
+    dayItems: string;
+    /** Accessible name of a phone day button. */
+    dayButton: (dayLabel: string, itemCount: number) => string;
+    /** Seven weekday headers, Monday first; rotated when the week starts on Sunday. */
+    weekDays: readonly string[];
+}
+export interface MonthGridProps<TItem extends MonthGridItem> {
+    /** Visible `YYYY-MM` month. */
+    month: string;
+    items: readonly TItem[];
+    onSelectItem: (item: TItem) => void;
+    /** `YYYY-MM-DD` key of today, or null before hydration. */
+    todayKey?: string | null;
+    weekStartsOn?: CalendarWeekStart;
+    /** Day whose items are listed under the grid on phones. */
+    activeDayKey?: string | null;
+    onSelectDay?: (dayKey: string) => void;
+    /** Renders the phone summary of the selected day. Defaults to a list of item buttons. */
+    renderDaySummary?: (dayKey: string, dayItems: readonly TItem[]) => ReactNode;
+    locale?: string;
+    labels?: Partial<MonthGridLabels>;
+    className?: string;
+}
+/**
+ * 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 declare function MonthGrid<TItem extends MonthGridItem>({ month, items, onSelectItem, todayKey, weekStartsOn, activeDayKey, onSelectDay, renderDaySummary, locale, labels, className, }: MonthGridProps<TItem>): import("react").JSX.Element;

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;