@ciridae/ui 0.17.0 → 1.0.1

package/dist/components/menu.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { CaretRightIcon, CheckIcon, DotsThreeIcon } from "@phosphor-icons/react";
+import { css, cx } from "#primitives/css";
+import { IconButton } from "./button.js";
+import { HotkeyLayer } from "./hotkeys.js";
+import { directional, icon, Spinner } from "./icon.js";
+import { ShortcutHint } from "./keycap.js";
+/* Flush, like the select menu: rows run edge to edge and the popup's corners clip them. */
+const popup = css({
+    minWidth: "overlay.menu",
+    padding: "none",
+    overflow: "hidden",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "action",
+    background: "bg.card",
+    color: "fg.primary",
+    textStyle: "body",
+    boxShadow: "card",
+});
+// A submenu joins its parent: the corner it opens from goes square, so the two read as one panel.
+const submenuPopup = css({
+    "&:is([data-side=right], [data-side=inline-end])": { borderStartStartRadius: "0" },
+    "&:is([data-side=left], [data-side=inline-start])": { borderStartEndRadius: "0" },
+});
+/** The positioner is the positioned element, so it carries the stacking order. */
+const positioner = css({ zIndex: "popover" });
+const item = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    minHeight: "menu.item",
+    paddingInline: "control.compactInline",
+    fontSize: "caption",
+    lineHeight: "body",
+    cursor: "pointer",
+    outline: "none",
+    "&[data-highlighted], &[data-popup-open]": { background: "bg.rowHover" },
+    "&[data-disabled]": { opacity: "disabled", cursor: "not-allowed" },
+    "& > [data-label]": { flex: "1", minWidth: "0" },
+    "& > [data-trailing]": { color: "fg.muted" },
+});
+const danger = css({ color: "accent.red" });
+/* Not an item: a row that names what the menu belongs to, such as the signed-in account. */
+const header = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    paddingInline: "control.compactInline",
+    paddingBlock: "control.compactBlock",
+    fontSize: "caption",
+    lineHeight: "compact",
+    cursor: "default",
+});
+const headerCopy = css({
+    display: "grid",
+    flex: "1",
+    minWidth: "0",
+    "& > *": { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+    "& > :first-child": { fontWeight: "medium" },
+    "& > :last-child:not(:first-child)": { color: "fg.muted" },
+});
+const groupHeading = css({
+    display: "flex",
+    alignItems: "center",
+    minHeight: "menu.item",
+    paddingInline: "control.compactInline",
+    color: "fg.muted",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    cursor: "default",
+});
+const itemMeta = css({
+    minWidth: "0",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    color: "fg.muted",
+});
+const separator = css({
+    height: "border.hairline",
+    background: "border.subtle",
+});
+export function Menu({ trigger, items, align = "start", ...rootProps }) {
+    return (_jsxs(BaseMenu.Root, { ...rootProps, children: [_jsx(BaseMenu.Trigger, { render: trigger }), _jsx(BaseMenu.Portal, { children: _jsx(HotkeyLayer, { children: _jsx(BaseMenu.Positioner, { className: positioner, sideOffset: 6, align: align, children: _jsx(BaseMenu.Popup, { className: popup, "data-ciridae-ui": "", children: _jsx(MenuItems, { items: items }) }) }) }) })] }));
+}
+/** The "more" button: an `IconButton` with three dots that opens a `Menu` of `items`. */
+export function OverflowMenu({ label, size = "medium", variant = "raised", align = "end", disabled, ref, ...props }) {
+    return (_jsx(Menu, { ...props, align: align, trigger: _jsx(IconButton, { ref: ref, "aria-label": label, size: size, variant: variant, disabled: disabled, children: _jsx(DotsThreeIcon, { className: icon({ size: size === "large" ? "medium" : "small" }), weight: "bold" }) }) }));
+}
+function MenuItems({ items }) {
+    return items.map((menuItem, index) => {
+        if ("separator" in menuItem)
+            return _jsx(BaseMenu.Separator, { className: separator }, index);
+        if ("group" in menuItem) {
+            return (_jsx("div", { className: groupHeading, role: "presentation", children: menuItem.label }, index));
+        }
+        if ("header" in menuItem) {
+            return (_jsxs("div", { className: header, role: "presentation", children: [menuItem.icon, _jsxs("span", { className: headerCopy, children: [_jsx("span", { children: menuItem.label }), menuItem.detail && _jsx("span", { children: menuItem.detail })] })] }, index));
+        }
+        if (menuItem.items) {
+            return (_jsxs(BaseMenu.SubmenuRoot, { children: [_jsxs(BaseMenu.SubmenuTrigger, { className: item, disabled: menuItem.disabled, children: [menuItem.icon, _jsx("span", { "data-label": "", children: menuItem.label }), _jsx(CaretRightIcon, { "data-trailing": "", className: cx(icon({ size: "tiny" }), directional) })] }), _jsx(BaseMenu.Portal, { children: _jsx(BaseMenu.Positioner, { className: positioner, sideOffset: 0, align: "start", alignOffset: -1, children: _jsx(BaseMenu.Popup, { className: cx(popup, submenuPopup), "data-ciridae-ui": "", children: _jsx(MenuItems, { items: menuItem.items }) }) }) })] }, menuItem.label));
+        }
+        const content = (_jsxs(_Fragment, { children: [menuItem.loading ? _jsx(Spinner, { "aria-hidden": "true" }) : menuItem.icon, _jsxs("span", { "data-label": "", children: [menuItem.label, menuItem.meta !== undefined && _jsxs("span", { className: itemMeta, children: [" ", menuItem.meta] })] }), menuItem.shortcut && _jsx(ShortcutHint, { "data-trailing": "", hotkey: menuItem.shortcut }), menuItem.checked && _jsx(CheckIcon, { "data-trailing": "", className: icon({ size: "small" }) })] }));
+        const className = cx(item, menuItem.variant === "danger" && danger);
+        if (menuItem.href !== undefined || menuItem.render !== undefined) {
+            return (_jsx(BaseMenu.LinkItem, { className: className, href: menuItem.href, render: menuItem.render, closeOnClick: true, onClick: menuItem.onSelect, children: content }, menuItem.label));
+        }
+        return (_jsx(BaseMenu.Item, { className: className, disabled: menuItem.disabled || menuItem.loading, onClick: menuItem.onSelect, children: content }, menuItem.label));
+    });
+}

package/dist/components/meter.d.ts

@@ -0,0 +1,14 @@
+import type { Tone } from "./badge.js";
+import type { ComponentProps, ReactNode } from "react";
+export type MeterProps = Omit<ComponentProps<"span">, "children"> & {
+    value: number;
+    /** 1 by default, so a share can be passed as is. */
+    max?: number;
+    /** `info` by default; `warning` once it nears the limit, say. */
+    tone?: Tone;
+    /** Names the meter for assistive tech, such as the job whose budget it is. */
+    label: string;
+    /** The figure shown above the track, such as "92%"; nothing is shown without it. */
+    valueLabel?: ReactNode;
+};
+export declare function Meter({ value, max, tone, label, valueLabel, className, ...props }: MeterProps): import("@types/react").JSX.Element;

package/dist/components/meter.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * A measured amount against its limit, such as a budget spent: a thin track filled to
+ * `value / max`, with the figure above it at the end. Past the limit the track stays full. It is
+ * phrasing content, so it can sit inside a row's button.
+ */
+import { css, cva, cx } from "#primitives/css";
+const meter = css({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-end",
+    gap: "layout.tightGap",
+    fontSize: "body",
+    fontWeight: "medium",
+    fontVariantNumeric: "tabular-nums",
+});
+const track = cva({
+    base: { width: "100%", height: "6px", borderRadius: "control", overflow: "hidden" },
+    variants: {
+        tone: {
+            neutral: { background: "bg.hover" },
+            info: { background: "bg.infoSubtle" },
+            success: { background: "bg.successSubtle" },
+            warning: { background: "bg.warningSubtle" },
+            danger: { background: "bg.errorSubtle" },
+        },
+    },
+});
+const fill = cva({
+    base: { display: "block", height: "100%", borderRadius: "control" },
+    variants: {
+        tone: {
+            neutral: { background: "fg.subtle" },
+            info: { background: "accent.blue" },
+            success: { background: "accent.green" },
+            warning: { background: "accent.yellow" },
+            danger: { background: "accent.red" },
+        },
+    },
+});
+export function Meter({ value, max = 1, tone = "info", label, valueLabel, className, ...props }) {
+    const share = max > 0 ? Math.min(Math.max(value / max, 0), 1) : 0;
+    return (_jsxs("span", { role: "meter", "aria-label": label, "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max, "aria-valuetext": typeof valueLabel === "string" ? valueLabel : undefined, ...props, className: cx(meter, className), "data-ciridae-ui": "", children: [valueLabel, _jsx("span", { className: track({ tone }), children: _jsx("span", { className: fill({ tone }), style: { width: `${share * 100}%` } }) })] }));
+}

package/dist/components/navigation.d.ts

@@ -0,0 +1,21 @@
+import { type CiridaeLabels } from "./locale.js";
+import type { ComponentProps, ReactNode } from "react";
+export type PaginationProps = Omit<ComponentProps<"nav">, "children"> & {
+    page: number;
+    pages: number;
+    onPageChange: (page: number) => void;
+    labels?: Partial<CiridaeLabels["pagination"]>;
+};
+export declare function Pagination({ page, pages, onPageChange, labels: ownLabels, className, ...props }: PaginationProps): import("@types/react").JSX.Element;
+export type EmptyStateProps = Omit<ComponentProps<"section">, "title"> & {
+    icon?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    /**
+     * `block` frames a page's or panel's empty state; `bare` is the same without the frame, its icon
+     * in a ring, for a table or card that frames it; `inline` is one muted line in a list.
+     */
+    variant?: "block" | "bare" | "inline";
+};
+export declare function EmptyState({ icon, title, description, action, variant, className, ...props }: EmptyStateProps): import("@types/react").JSX.Element;

package/dist/components/navigation.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css, cva, cx } from "#primitives/css";
+import { Button } from "./button.js";
+import { Heading } from "./layout.js";
+import { useCiridaeLocale } from "./locale.js";
+export function Pagination({ page, pages, onPageChange, labels: ownLabels, className, ...props }) {
+    const locale = useCiridaeLocale();
+    const labels = { ...locale.labels.pagination, ...ownLabels };
+    const visible = Array.from({ length: pages }, (_, index) => index + 1);
+    return (_jsxs("nav", { "aria-label": labels.label, ...props, className: cx(css({ display: "flex", gap: "layout.tightGap" }), className), "data-ciridae-ui": "", children: [_jsx(Button, { variant: "ghost", disabled: pages === 0 || page <= 1, onClick: () => onPageChange(Math.max(1, page - 1)), children: labels.previous }), visible.map((value) => (_jsx(Button, { variant: value === page ? "primary" : "ghost", "aria-current": value === page ? "page" : undefined, onClick: () => onPageChange(value), children: locale.formatNumber(value) }, value))), _jsx(Button, { variant: "ghost", disabled: pages === 0 || page >= pages, onClick: () => onPageChange(Math.min(pages, page + 1)), children: labels.next })] }));
+}
+const emptyState = cva({
+    base: { display: "grid", placeItems: "center", textAlign: "center" },
+    variants: {
+        variant: {
+            // A page or panel with nothing in it yet: a dashed frame with room for a heading.
+            block: {
+                minHeight: "emptyState.minimum",
+                padding: "panel.roomy",
+                border: "1px dashed token(colors.border.control)",
+                borderRadius: "inset",
+            },
+            // Inside a table or a card that frames it already: the icon in a ring, no frame of its own.
+            bare: {
+                justifyItems: "center",
+                gap: "layout.clusterGap",
+                paddingBlock: "panel.roomy",
+                paddingInline: "panel.comfortable",
+            },
+            // A list or section with nothing to show: one muted line, no frame.
+            inline: {
+                padding: "panel.default",
+                color: "fg.muted",
+                fontSize: "caption",
+                fontWeight: "medium",
+            },
+        },
+    },
+    defaultVariants: { variant: "block" },
+});
+const emptyRing = css({
+    display: "grid",
+    placeItems: "center",
+    width: "brand.logo",
+    height: "brand.logo",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "round",
+    background: "bg.field",
+    color: "fg.muted",
+    fontSize: "icon.small",
+});
+const emptyCopy = css({ display: "grid", gap: "control.iconGap", maxWidth: "card.centered" });
+const emptyDescription = css({
+    margin: "none",
+    color: "fg.muted",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "body",
+});
+const emptyActions = css({
+    display: "flex",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    gap: "layout.controlGap",
+});
+export function EmptyState({ icon, title, description, action, variant = "block", className, ...props }) {
+    if (variant === "inline") {
+        return (_jsxs("section", { ...props, "data-ciridae-ui": "", className: cx(emptyState({ variant }), className), children: [_jsxs("span", { className: css({ display: "inline-flex", alignItems: "center", gap: "control.iconGap" }), children: [icon, title] }), description && _jsx("span", { children: description }), action] }));
+    }
+    if (variant === "bare") {
+        return (_jsxs("section", { ...props, "data-ciridae-ui": "", className: cx(emptyState({ variant }), className), children: [icon && (_jsx("span", { className: emptyRing, "aria-hidden": "true", children: icon })), _jsxs("div", { className: emptyCopy, children: [_jsx(Heading, { level: 2, size: "small", children: title }), description && _jsx("p", { className: emptyDescription, children: description })] }), action && _jsx("div", { className: emptyActions, children: action })] }));
+    }
+    return (_jsx("section", { ...props, "data-ciridae-ui": "", className: cx(emptyState({ variant }), className), children: _jsxs("div", { className: css({ display: "grid", justifyItems: "center", gap: "layout.contentGap" }), children: [icon, _jsx(Heading, { level: 2, children: title }), description && _jsx("p", { className: css({ margin: "none", color: "fg.muted" }), children: description }), action] }) }));
+}

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

@@ -0,0 +1,47 @@
+import { type ReactElement } from "react";
+import { type IconButtonProps } from "./button.js";
+import { type CiridaeLabels } from "./locale.js";
+import type { UserChipProps } from "./user-chip.js";
+export type NotificationActor = Pick<UserChipProps, "name" | "kind" | "src" | "profile">;
+export type NotificationKind = "update" | "mention" | "assigned";
+export type Notification = {
+    id: string;
+    actor: NotificationActor;
+    /** What they did, read after their name: "signed INV-4819". */
+    text: string;
+    /** The record it is about, as "Invoice · INV-4819". */
+    record: string;
+    at: number;
+    read: boolean;
+    /** A mention of you, or something assigned to you; the tray's filters pick these out. */
+    kind?: NotificationKind;
+    /** One thing to do from the row, such as Approve, beside opening the record. */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+};
+export type NotificationTrayProps = {
+    /** The bell; the tray sets its badge to the unread count and opens from it. */
+    trigger: ReactElement<IconButtonProps>;
+    notifications: readonly Notification[];
+    /** Opens the notification's record; the host marks it read. */
+    onOpen: (notification: Notification) => void;
+    onMarkAllRead: () => void;
+    /** A link at the foot, such as the activity log. */
+    footerAction?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** `drawer` on a phone, where a popover has no room. */
+    placement?: "popover" | "drawer";
+    /** When now is, for the relative times and the Today group; the render's time otherwise. */
+    now?: number;
+    /** Rewords the tray's labels over the locale's. */
+    labels?: Partial<NotificationLabels>;
+    /** Whether the tray is open, for a host that opens it too, such as from a hotkey. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+export type NotificationLabels = CiridaeLabels["notifications"];
+export declare function NotificationTray({ trigger, notifications, onOpen, onMarkAllRead, footerAction, placement, now, labels: ownLabels, open: ownOpen, onOpenChange, }: NotificationTrayProps): import("@types/react").JSX.Element;

package/dist/components/notification-tray.js

@@ -0,0 +1,218 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * The notification tray: what happened on the records you follow, newest first, as a flush
+ * popover from the header's bell, or as a drawer on a phone. Each row is who did it, what they
+ * did, the record it is about and when; an unread row carries a dot, and a row can offer one
+ * action, such as Approve, beside opening its record. The host owns the notifications: it marks
+ * them read and opens their records. The bell's badge counts the unread ones.
+ */
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { ArrowRightIcon, BellIcon } from "@phosphor-icons/react";
+import { addDays, isSameDay } from "date-fns";
+import { cloneElement, useState } from "react";
+import { css, cx } from "#primitives/css";
+import { Button } from "./button.js";
+import { useControllableState } from "./controllable-state.js";
+import { Avatar } from "./data-display.js";
+import { Drawer, DrawerBody } from "./drawer.js";
+import { HotkeyLayer } from "./hotkeys.js";
+import { directional, icon } from "./icon.js";
+import { heading } from "./layout.js";
+import { useCiridaeLocale } from "./locale.js";
+import { TabsList, TabsRoot, TabsTab } from "./tabs.js";
+const FILTERS = [
+    { value: "all", label: "all", empty: "noNotifications" },
+    { value: "mentions", label: "mentions", empty: "noMentions" },
+    { value: "assigned", label: "assigned", empty: "nothingAssigned" },
+];
+function passesFilter(notification, filter) {
+    if (filter === "all")
+        return true;
+    return filter === "mentions" ? notification.kind === "mention" : notification.kind === "assigned";
+}
+/** "8 minutes ago", "yesterday", "3 days ago". */
+function relativeTime(at, now, locale) {
+    if (isSameDay(at, addDays(now, -1)))
+        return locale.labels.dates.yesterday;
+    return locale.formatRelative(at, now);
+}
+/* Flush, like a menu: the rows run edge to edge and the popup's corners clip them. */
+const positioner = css({ zIndex: "popover" });
+const popup = css({
+    display: "flex",
+    flexDirection: "column",
+    width: "overlay.tray",
+    maxWidth: "calc(100vw - token(spacing.layout.pageGap) * 2)",
+    padding: "none",
+    overflow: "hidden",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "action",
+    background: "bg.card",
+    color: "fg.primary",
+    textStyle: "body",
+    boxShadow: "card",
+    outline: "none",
+});
+const header = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "layout.controlGap",
+    paddingBlock: "panel.default",
+    paddingInlineStart: "panel.comfortable",
+    paddingInlineEnd: "panel.default",
+});
+const caughtUp = css({ color: "fg.muted", fontSize: "caption", fontWeight: "medium" });
+const filters = css({
+    paddingInline: "panel.comfortable",
+    paddingBottom: "layout.tightGap",
+    borderBottom: "1px solid token(colors.border.control)",
+});
+const list = css({
+    display: "grid",
+    alignContent: "start",
+    overflowY: "auto",
+    "&[data-placement=popover]": { maxHeight: "overlay.trayList" },
+});
+const groupLabel = css({
+    paddingTop: "control.block",
+    paddingBottom: "layout.tightGap",
+    paddingInline: "panel.comfortable",
+    color: "fg.muted",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+});
+const emptyLabel = css({
+    padding: "panel.roomy",
+    color: "fg.muted",
+    fontSize: "caption",
+    fontWeight: "medium",
+    textAlign: "center",
+});
+// Compact rows: the actor's avatar in its own column, one or two lines of caption text beside it.
+const row = css({
+    position: "relative",
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "layout.controlGap",
+    paddingBlock: "control.block",
+    paddingInline: "panel.comfortable",
+    _hover: { background: "bg.rowHover" },
+    "&:has(> [data-open]:focus-visible)": { background: "bg.rowHover" },
+});
+/* The whole row opens the record; the chip and the action sit above it with their own targets. */
+const openButton = css({
+    position: "absolute",
+    inset: "none",
+    border: "0",
+    background: "transparent",
+    cursor: "pointer",
+    outline: "none",
+    _focusVisible: { focusRing: "inset" },
+});
+const rowBody = css({
+    position: "relative",
+    display: "grid",
+    flex: "1",
+    minWidth: "0",
+    gap: "2px",
+    pointerEvents: "none",
+    "& button": { pointerEvents: "auto" },
+});
+const sentence = css({
+    color: "fg.secondary",
+    fontSize: "caption",
+    lineHeight: "compact",
+    letterSpacing: "compact",
+    "& > strong": { color: "fg.primary", fontWeight: "medium" },
+    "[data-unread] &": { color: "fg.primary" },
+});
+const meta = css({
+    color: "fg.muted",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+});
+const trailing = css({
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    flexShrink: "0",
+    minHeight: "avatar.small",
+});
+const unreadDot = css({
+    width: "indicator.live",
+    height: "indicator.live",
+    borderRadius: "round",
+    background: "accent.blue",
+});
+const footer = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    minHeight: "control.row",
+    paddingInline: "panel.comfortable",
+    border: "0",
+    borderTop: "1px solid token(colors.border.control)",
+    background: "transparent",
+    color: "fg.muted",
+    font: "inherit",
+    fontSize: "caption",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    textAlign: "start",
+    cursor: "pointer",
+    outline: "none",
+    _hover: { background: "bg.rowHover", color: "fg.primary" },
+    _focusVisible: { focusRing: "inset" },
+});
+export function NotificationTray({ trigger, notifications, onOpen, onMarkAllRead, footerAction, placement = "popover", now = Date.now(), labels: ownLabels, open: ownOpen, onOpenChange, }) {
+    const locale = useCiridaeLocale();
+    const labels = { ...locale.labels.notifications, ...ownLabels };
+    const [open, setOpen] = useControllableState(ownOpen, false, onOpenChange);
+    const [filter, setFilter] = useState("all");
+    const unreadCount = notifications.filter((notification) => !notification.read).length;
+    const bell = cloneElement(trigger, { badge: unreadCount });
+    const openRecord = (notification) => {
+        setOpen(false);
+        onOpen(notification);
+    };
+    const markAllRead = unreadCount > 0 ? (_jsx(Button, { variant: "ghost", onClick: onMarkAllRead, children: labels.markAllRead })) : (_jsx("span", { className: caughtUp, children: labels.allCaughtUp }));
+    const body = (_jsxs(_Fragment, { children: [_jsx(TabsRoot, { value: filter, onValueChange: (value) => {
+                    const next = FILTERS.find((candidate) => candidate.value === value);
+                    if (next)
+                        setFilter(next.value);
+                }, children: _jsx(TabsList, { variant: "text", className: filters, "aria-label": labels.show, children: FILTERS.map((candidate) => (_jsx(TabsTab, { value: candidate.value, children: labels[candidate.label] }, candidate.value))) }) }), _jsx(NotificationList, { notifications: notifications.filter((notification) => passesFilter(notification, filter)), empty: labels[FILTERS.find((candidate) => candidate.value === filter)?.empty ?? "noNotifications"], labels: labels, locale: locale, placement: placement, now: now, onOpen: openRecord }), footerAction && (_jsxs("button", { type: "button", className: footer, onClick: () => {
+                    setOpen(false);
+                    footerAction.onClick();
+                }, children: [footerAction.label, _jsx(ArrowRightIcon, { className: cx(icon({ size: "small" }), directional) })] }))] }));
+    if (placement === "drawer") {
+        return (_jsxs(_Fragment, { children: [cloneElement(bell, { onClick: () => setOpen(true) }), _jsx(Drawer, { open: open, onOpenChange: setOpen, title: labels.title, icon: _jsx(BellIcon, { className: icon({ size: "small" }), weight: "fill" }), actions: markAllRead, size: "narrow", children: _jsx(DrawerBody, { flush: true, children: body }) })] }));
+    }
+    return (_jsxs(BasePopover.Root, { open: open, onOpenChange: setOpen, children: [_jsx(BasePopover.Trigger, { render: bell }), _jsx(BasePopover.Portal, { children: _jsx(HotkeyLayer, { children: _jsx(BasePopover.Positioner, { className: positioner, sideOffset: 6, align: "end", children: _jsxs(BasePopover.Popup, { className: popup, "data-ciridae-ui": "", "aria-label": labels.title, children: [_jsxs("div", { className: header, children: [_jsx(BasePopover.Title, { className: heading({ size: "small" }), children: labels.title }), markAllRead] }), body] }) }) }) })] }));
+}
+/** The rows, newest first, under Today and Earlier; one label when there are none. */
+function NotificationList({ notifications, empty, placement, now, onOpen, labels, locale, }) {
+    const sorted = [...notifications].sort((left, right) => right.at - left.at);
+    const today = sorted.filter((notification) => isSameDay(notification.at, now));
+    const earlier = sorted.filter((notification) => !isSameDay(notification.at, now));
+    const groups = [
+        { label: labels.today, items: today },
+        { label: labels.earlier, items: earlier },
+    ];
+    return (_jsxs("div", { className: list, "data-placement": placement, role: "list", children: [sorted.length === 0 && _jsx("span", { className: emptyLabel, children: empty }), groups
+                .filter((group) => group.items.length > 0)
+                .map((group) => (_jsx(NotificationGroup, { label: group.label, children: group.items.map((notification) => (_jsx(NotificationRow, { notification: notification, now: now, onOpen: onOpen, labels: labels, locale: locale }, notification.id))) }, group.label)))] }));
+}
+function NotificationGroup({ label, children }) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: groupLabel, children: label }), children] }));
+}
+function NotificationRow({ notification, now, onOpen, labels, locale, }) {
+    const { actor, text, record, at, read, action } = notification;
+    return (_jsxs("div", { className: row, "data-unread": read ? undefined : "", role: "listitem", children: [_jsx("button", { type: "button", className: openButton, "data-open": "", "aria-label": labels.rowLabel(actor.name, text, record), onClick: () => onOpen(notification) }), _jsx(Avatar, { label: actor.name, kind: actor.kind, src: actor.src, size: "small", "aria-hidden": "true" }), _jsxs("div", { className: rowBody, children: [_jsx("span", { className: sentence, children: labels.sentence({ actor: _jsx("strong", { children: actor.name }), action: text }) }), _jsx("span", { className: meta, children: labels.meta({ record, time: relativeTime(at, now, locale) }) })] }), _jsxs("span", { className: trailing, children: [action && (_jsx(Button, { variant: "secondary", onClick: action.onClick, children: action.label })), !read && _jsx("span", { className: unreadDot, "aria-hidden": "true" })] })] }));
+}

package/dist/components/overlays.d.ts

@@ -0,0 +1,107 @@
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import { type ComponentProps, type ReactElement, type ReactNode } from "react";
+export type DialogProps = Omit<ComponentProps<typeof BaseDialog.Root>, "children"> & {
+    /** Omit for a dialog opened only through controlled `open`. */
+    trigger?: ReactElement;
+    /** Restore focus to an external control, such as a menu trigger, when this dialog closes. */
+    finalFocus?: ComponentProps<typeof BaseDialog.Popup>["finalFocus"];
+    title: ReactNode;
+    /**
+     * `hidden` keeps the title for assistive technology only, for content that already names
+     * itself, such as a wizard's result.
+     */
+    titleVisibility?: "visible" | "hidden";
+    /** An identifying mark beside the title, such as the provider being connected. */
+    icon?: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    actions?: ReactNode;
+    /** Footer actions kept at its start, away from the primary action, such as Back. */
+    leadingActions?: ReactNode;
+    /**
+     * What the dialog is, which sets how it is dismissed: a `form` has a footer Cancel beside its
+     * submit action; `info` is read-only and closes from an X beside the title; a `wizard` closes
+     * from the same X, leaving the footer to its steps' actions and `leadingActions` such as Back.
+     */
+    kind?: "form" | "info" | "wizard";
+    /** Override the dismiss location independently of the dialog's content kind. */
+    dismiss?: "header" | "footer";
+    /** Disables user dismissal, including X, Cancel, Escape, and backdrop. */
+    closable?: boolean;
+    /** Blocks dismissal while an operation is running. */
+    pending?: boolean;
+    /** The form owns dirty state. Dirty dialogs ignore Escape/backdrop; explicit dismissal stays in its chosen location. */
+    dirty?: boolean;
+    /** Overrides the dismiss label: the footer button's text for a form, the X's name otherwise. */
+    closeLabel?: string;
+    /**
+     * `narrow` matches a centered form card, for a dialog over one; `wide` fits content such as code
+     * blocks that a form-width dialog would wrap.
+     */
+    size?: "narrow" | "regular" | "wide";
+    /** Keeps the tallest height within a wizard step (or while open), so filtering does not shrink it. */
+    holdHeight?: boolean;
+    /**
+     * A panel beside the title, body, and actions, flush to the dialog's edges, such as a setup
+     * guide; it widens the dialog and stacks below on a narrow screen.
+     */
+    aside?: {
+        label: string;
+        content: ReactNode;
+    };
+};
+export declare function Dialog({ trigger, finalFocus, title, titleVisibility, icon: titleIcon, description, children, actions, leadingActions, kind, dismiss, closable, pending, dirty, closeLabel: ownCloseLabel, size, holdHeight, aside, onOpenChange, ...rootProps }: DialogProps): import("@types/react").JSX.Element;
+export type AlertDialogProps = Omit<ComponentProps<typeof BaseAlertDialog.Root>, "children" | "actionsRef"> & {
+    /** Omit for a dialog opened only through controlled `open`. */
+    trigger?: ReactElement;
+    title: ReactNode;
+    children?: ReactNode;
+    confirmLabel: ReactNode;
+    cancelLabel?: ReactNode;
+    /**
+     * Runs the confirmed action. A returned promise keeps the dialog open with the confirm button
+     * loading until it settles: it closes on success and stays open on failure, so the reader can
+     * retry or cancel.
+     */
+    onConfirm: () => void | Promise<unknown>;
+    /** `danger` presents the confirming action as destructive, in the danger button. */
+    variant?: "default" | "danger";
+};
+/**
+ * A confirmation the reader must answer. Unlike `Dialog` it carries the
+ * `alertdialog` role and ignores an outside click, so the decision is made
+ * through one of the two actions rather than by clicking away. Escape still
+ * closes it, which Base UI keeps as the cancelling path, except while an
+ * async confirmation is pending.
+ */
+export declare function AlertDialog({ trigger, title, children, confirmLabel, cancelLabel, onConfirm, variant, onOpenChange, ...rootProps }: AlertDialogProps): import("@types/react").JSX.Element;
+export type PopoverProps = Omit<ComponentProps<typeof BasePopover.Root>, "children"> & {
+    /** The button that opens it. Leave it out and pass `anchor` to open it from elsewhere, such as a menu item. */
+    trigger?: ReactElement;
+    /** What it points at when it has no trigger of its own, such as the menu button it was chosen from. */
+    anchor?: Element | null;
+    children: ReactNode;
+    /**
+     * `compact` tightens the inset for a panel of compact controls; `flush` drops it, so rows run
+     * edge to edge like a menu's.
+     */
+    density?: "regular" | "compact" | "flush";
+    /** A fixed width for a small form, such as a filter or an export; it fits its content when left out. */
+    width?: "narrow" | "regular" | "wide";
+    /** Which edge of the trigger it lines up with. */
+    align?: "start" | "center" | "end";
+    /**
+     * Also opens while the trigger is hovered, after a short delay, and closes soon after the
+     * pointer leaves. Focus moves into it only when a keyboard opened it.
+     */
+    openOnHover?: boolean;
+};
+export declare function Popover({ trigger, anchor, children, density, width, align, openOnHover, ...rootProps }: PopoverProps): import("@types/react").JSX.Element;
+export type TooltipProps = Omit<ComponentProps<typeof BaseTooltip.Root>, "children"> & {
+    children: ReactElement;
+    content: ReactNode;
+};
+export declare function Tooltip({ children, content, ...rootProps }: TooltipProps): import("@types/react").JSX.Element;