@neasg/design-system 0.4.8 → 0.4.10

package/dist/lib/date-utils.js

@@ -1,16 +1,96 @@
+const monthIndexes = {
+    jan: 0,
+    january: 0,
+    feb: 1,
+    february: 1,
+    mar: 2,
+    march: 2,
+    apr: 3,
+    april: 3,
+    may: 4,
+    jun: 5,
+    june: 5,
+    jul: 6,
+    july: 6,
+    aug: 7,
+    august: 7,
+    sep: 8,
+    sept: 8,
+    september: 8,
+    oct: 9,
+    october: 9,
+    nov: 10,
+    november: 10,
+    dec: 11,
+    december: 11,
+};
+function getHour24(hours, ampm) {
+    const parsedHours = Number.parseInt(hours, 10);
+    const normalizedAmpm = ampm.toUpperCase();
+    if (normalizedAmpm === "PM" && parsedHours !== 12) {
+        return parsedHours + 12;
+    }
+    if (normalizedAmpm === "AM" && parsedHours === 12) {
+        return 0;
+    }
+    return parsedHours;
+}
+function getValidDateTime(year, monthIndex, day, hour, minute) {
+    const date = new Date(year, monthIndex, day, hour, minute);
+    if (date.getFullYear() !== year ||
+        date.getMonth() !== monthIndex ||
+        date.getDate() !== day ||
+        date.getHours() !== hour ||
+        date.getMinutes() !== minute) {
+        return Number.NaN;
+    }
+    return date.getTime();
+}
 /**
- * Parse a date string in DD/MM/YYYY HH:MM AM/PM format to a timestamp (ms).
+ * Parse common CLIP date/time strings to a timestamp (ms).
+ *
+ * Supports numeric dates (`23/03/2025 01:51 AM`), compact meridiem times
+ * (`12/05/2026 10:00AM`), month-name dates (`13 Feb 2026, 03:13 PM`), and
+ * relative sandbox labels (`Today, 11:12 AM`, `Yesterday, 5:28 PM`).
  */
-export function parseDateTime(dateStr) {
-    const [datePart, timePart, ampm] = dateStr.split(" ");
-    const [day, month, year] = datePart.split("/");
-    const [hours, minutes] = timePart.split(":");
-    let hour = parseInt(hours);
-    if (ampm === "PM" && hour !== 12)
-        hour += 12;
-    if (ampm === "AM" && hour === 12)
-        hour = 0;
-    return new Date(parseInt(year), parseInt(month) - 1, parseInt(day), hour, parseInt(minutes)).getTime();
+export function parseDateTime(dateStr, options = {}) {
+    var _a;
+    const value = dateStr.trim();
+    const referenceDate = (_a = options.referenceDate) !== null && _a !== void 0 ? _a : new Date();
+    const timePattern = "(\\d{1,2}):(\\d{2})\\s*([ap]m)";
+    const numericMatch = value.match(new RegExp(`^(\\d{1,2})/(\\d{1,2})/(\\d{4}),?\\s+${timePattern}$`, "i"));
+    if (numericMatch) {
+        const [, day, month, year, hours, minutes, ampm] = numericMatch;
+        return getValidDateTime(Number.parseInt(year, 10), Number.parseInt(month, 10) - 1, Number.parseInt(day, 10), getHour24(hours, ampm), Number.parseInt(minutes, 10));
+    }
+    const monthNameMatch = value.match(new RegExp(`^(\\d{1,2})\\s+([a-z]+)\\s+(\\d{4}),?\\s+${timePattern}$`, "i"));
+    if (monthNameMatch) {
+        const [, day, monthName, year, hours, minutes, ampm] = monthNameMatch;
+        const monthIndex = monthIndexes[monthName.toLowerCase()];
+        if (monthIndex === undefined) {
+            return Number.NaN;
+        }
+        return getValidDateTime(Number.parseInt(year, 10), monthIndex, Number.parseInt(day, 10), getHour24(hours, ampm), Number.parseInt(minutes, 10));
+    }
+    const monthNameWithoutYearMatch = value.match(new RegExp(`^(\\d{1,2})\\s+([a-z]+),?\\s+${timePattern}$`, "i"));
+    if (monthNameWithoutYearMatch) {
+        const [, day, monthName, hours, minutes, ampm] = monthNameWithoutYearMatch;
+        const monthIndex = monthIndexes[monthName.toLowerCase()];
+        if (monthIndex === undefined) {
+            return Number.NaN;
+        }
+        return getValidDateTime(referenceDate.getFullYear(), monthIndex, Number.parseInt(day, 10), getHour24(hours, ampm), Number.parseInt(minutes, 10));
+    }
+    const relativeMatch = value.match(new RegExp(`^(today|yesterday),?\\s+${timePattern}$`, "i"));
+    if (relativeMatch) {
+        const [, relativeDay, hours, minutes, ampm] = relativeMatch;
+        const date = new Date(referenceDate.getFullYear(), referenceDate.getMonth(), referenceDate.getDate());
+        if (relativeDay.toLowerCase() === "yesterday") {
+            date.setDate(date.getDate() - 1);
+        }
+        return getValidDateTime(date.getFullYear(), date.getMonth(), date.getDate(), getHour24(hours, ampm), Number.parseInt(minutes, 10));
+    }
+    return Number.NaN;
 }
 /**
  * Format a Date object or ISO string to DD/MM/YYYY HH:MM AM/PM format.

package/dist/lib/utils.js

@@ -1,5 +1,12 @@
 import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
+const twMerge = extendTailwindMerge({
+    extend: {
+        theme: {
+            borderRadius: ["control", "surface", "overlay"],
+        },
+    },
+});
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }

package/dist/link.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "./lib/utils";
-const linkVariants = cva("rounded-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", {
+const linkVariants = cva("rounded-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", {
     variants: {
         variant: {
-            default: "text-primary underline-offset-4 hover:underline",
+            default: "text-primary underline-offset-4 hover:text-primary/85 hover:underline",
             subtle: "text-foreground underline-offset-4 hover:text-primary hover:underline",
             inherit: "text-inherit no-underline hover:no-underline",
         },

package/dist/message-item.d.ts

@@ -0,0 +1,62 @@
+import * as React from "react";
+export interface MessageItemAttachment {
+    name: string;
+    size?: string;
+    url?: string;
+    key?: string;
+}
+export interface MessageItemData {
+    id: string;
+    caseId?: string;
+    senderRole: "OFFICER" | "APPLICANT" | "SYSTEM";
+    officerName?: string | null;
+    officerRole?: string | null;
+    applicantEmail?: string | null;
+    applicantName?: string | null;
+    content: string;
+    attachments?: unknown[] | null;
+    isRead: boolean;
+    sentAt?: Date | null;
+    createdAt: Date;
+}
+export interface MessageItemProps {
+    message: MessageItemData;
+    caseId?: string;
+    showNewBadge?: boolean;
+    newMessageLabel?: React.ReactNode;
+    /** @deprecated Unread messages render a divider. Use `newMessageLabel` to customize its text. */
+    newIndicator?: React.ReactNode;
+    onMarkAsRead?: (message: MessageItemData) => Promise<boolean | void> | boolean | void;
+    onMarkedAsRead?: (message: MessageItemData) => void;
+    getAttachmentDownloadUrl?: (attachment: MessageItemAttachment, message: MessageItemData, caseId?: string) => string | null | undefined;
+    formatTimestamp?: (date: Date, message: MessageItemData) => React.ReactNode;
+    className?: string;
+    contentClassName?: string;
+}
+export interface MessageAttachmentRowProps extends React.HTMLAttributes<HTMLElement> {
+    attachment: MessageItemAttachment;
+    downloadUrl?: string | null;
+    downloadLabel?: string;
+}
+export interface MessageNewDividerProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+export interface MessageThreadProps {
+    messages: MessageItemData[];
+    caseId?: string;
+    showNewBadge?: boolean;
+    newMessageLabel?: React.ReactNode;
+    onMarkAsRead?: MessageItemProps["onMarkAsRead"];
+    onMarkedAsRead?: MessageItemProps["onMarkedAsRead"];
+    getAttachmentDownloadUrl?: MessageItemProps["getAttachmentDownloadUrl"];
+    formatTimestamp?: MessageItemProps["formatTimestamp"];
+    className?: string;
+    itemClassName?: string;
+    contentClassName?: string;
+}
+export declare const formatMessageDate: (date: Date) => string;
+export declare function MessageNewDivider({ children, className, }: MessageNewDividerProps): import("react/jsx-runtime").JSX.Element;
+export declare function MessageAttachmentRow({ attachment, downloadUrl, downloadLabel, className, ...props }: MessageAttachmentRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function MessageItem({ message, caseId, showNewBadge, newMessageLabel, onMarkAsRead, onMarkedAsRead, getAttachmentDownloadUrl, formatTimestamp, className, contentClassName, }: MessageItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function MessageThread({ messages, caseId, showNewBadge, newMessageLabel, onMarkAsRead, onMarkedAsRead, getAttachmentDownloadUrl, formatTimestamp, className, itemClassName, contentClassName, }: MessageThreadProps): import("react/jsx-runtime").JSX.Element;

package/dist/message-item.js

@@ -0,0 +1,148 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Download, FileText } from "lucide-react";
+import { AvatarProfile } from "./avatar";
+import { Badge } from "./badge";
+import { Separator } from "./separator";
+import { Typography } from "./typography";
+import { cn } from "./lib/utils";
+export const formatMessageDate = (date) => {
+    const d = new Date(date);
+    return d.toLocaleDateString("en-SG", {
+        day: "numeric",
+        month: "short",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+    });
+};
+function getInitials(name) {
+    if (!name)
+        return "";
+    return name
+        .split(/\s+/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((part) => { var _a, _b; return (_b = (_a = part[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== null && _b !== void 0 ? _b : ""; })
+        .join("");
+}
+function toHtmlContent(content) {
+    if (/<[a-z][\s\S]*>/i.test(content)) {
+        return content;
+    }
+    return content
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/\n/g, "<br>");
+}
+export function MessageNewDivider({ children = "New Message", className, }) {
+    return (_jsxs("div", { className: cn("mb-3 flex items-center gap-3 py-1", className), children: [_jsx(Separator, { "aria-hidden": "true", className: "flex-1" }), _jsx(Typography, { as: "span", variant: "caption", className: "shrink-0 px-2 font-medium text-muted-foreground", children: children }), _jsx(Separator, { "aria-hidden": "true", className: "flex-1" })] }));
+}
+export function MessageAttachmentRow({ attachment, downloadUrl, downloadLabel = `Download ${attachment.name}`, className, ...props }) {
+    const renderContent = (isInteractive) => (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground", children: _jsx(FileText, { className: "h-4 w-4" }) }), _jsxs("div", { className: "min-w-0 pr-1", children: [_jsx(Typography, { as: "p", variant: "bodySm", className: "line-clamp-2 font-medium", children: attachment.name }), attachment.size ? (_jsx(Typography, { as: "p", variant: "caption", children: attachment.size })) : null] }), _jsx("span", { "aria-hidden": "true", className: cn("flex h-8 w-8 shrink-0 items-center justify-center rounded-control border border-border bg-background text-muted-foreground transition-colors", isInteractive
+                    ? "group-hover:border-primary/40 group-hover:bg-primary/10 group-hover:text-primary group-focus-visible:border-primary/40 group-focus-visible:bg-primary/10 group-focus-visible:text-primary"
+                    : "opacity-60"), children: _jsx(Download, { className: "h-3.5 w-3.5" }) })] }));
+    if (downloadUrl) {
+        return (_jsx("a", { className: cn("group grid min-w-0 cursor-pointer grid-cols-[auto_minmax(0,1fr)_2.75rem] items-center gap-3 rounded-lg border border-border bg-card px-3 py-2 text-foreground no-underline shadow-sm transition hover:border-primary/50 hover:bg-primary/5 hover:no-underline hover:shadow-md focus-visible:border-primary/50 focus-visible:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", className), href: downloadUrl, target: "_blank", rel: "noopener noreferrer", download: attachment.name, "aria-label": downloadLabel, title: downloadLabel, ...props, children: renderContent(true) }));
+    }
+    return (_jsx("div", { className: cn("grid min-w-0 grid-cols-[auto_minmax(0,1fr)_2.75rem] items-center gap-3 rounded-lg border border-border bg-card px-3 py-2 shadow-sm", className), "aria-disabled": "true", ...props, children: renderContent(false) }));
+}
+export function MessageItem({ message, caseId, showNewBadge = false, newMessageLabel = "New Message", onMarkAsRead, onMarkedAsRead, getAttachmentDownloadUrl, formatTimestamp, className, contentClassName, }) {
+    var _a;
+    const messageRef = React.useRef(null);
+    const [hasBeenViewed, setHasBeenViewed] = React.useState(message.isRead);
+    const isVisibleEnoughRef = React.useRef(false);
+    const isOfficer = message.senderRole === "OFFICER";
+    const isApplicant = message.senderRole === "APPLICANT";
+    const isUnreadApplicant = isApplicant && !message.isRead;
+    const showUnreadDivider = showNewBadge && isUnreadApplicant;
+    React.useEffect(() => {
+        if (message.isRead ||
+            message.senderRole !== "APPLICANT" ||
+            hasBeenViewed ||
+            !onMarkAsRead) {
+            return;
+        }
+        const isPageActivelyVisible = () => {
+            if (typeof document === "undefined" || typeof window === "undefined") {
+                return false;
+            }
+            return document.visibilityState === "visible" && document.hasFocus();
+        };
+        const attemptMarkAsRead = () => {
+            if (!isVisibleEnoughRef.current ||
+                hasBeenViewed ||
+                !isPageActivelyVisible()) {
+                return;
+            }
+            setHasBeenViewed(true);
+            Promise.resolve(onMarkAsRead(message))
+                .then((result) => {
+                if (result !== false) {
+                    onMarkedAsRead === null || onMarkedAsRead === void 0 ? void 0 : onMarkedAsRead(message);
+                }
+            })
+                .catch(() => {
+                setHasBeenViewed(false);
+            });
+        };
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                isVisibleEnoughRef.current =
+                    entry.isIntersecting && entry.intersectionRatio >= 0.5;
+                attemptMarkAsRead();
+            });
+        }, { threshold: 0.5 });
+        if (messageRef.current) {
+            observer.observe(messageRef.current);
+        }
+        const handleVisibilityOrFocus = () => {
+            attemptMarkAsRead();
+        };
+        document.addEventListener("visibilitychange", handleVisibilityOrFocus);
+        window.addEventListener("focus", handleVisibilityOrFocus);
+        return () => {
+            observer.disconnect();
+            document.removeEventListener("visibilitychange", handleVisibilityOrFocus);
+            window.removeEventListener("focus", handleVisibilityOrFocus);
+        };
+    }, [
+        message,
+        message.id,
+        message.isRead,
+        message.senderRole,
+        hasBeenViewed,
+        onMarkAsRead,
+        onMarkedAsRead,
+    ]);
+    const senderName = isOfficer
+        ? message.officerName || "Officer"
+        : isApplicant
+            ? message.applicantName || message.applicantEmail || "Applicant"
+            : "System";
+    const initialsName = isOfficer
+        ? message.officerName || "Officer"
+        : isApplicant
+            ? message.applicantName || message.applicantEmail || "Applicant"
+            : "System";
+    const officerRole = isOfficer ? message.officerRole : undefined;
+    const senderProfileRole = isOfficer ? officerRole : undefined;
+    const hasSenderProfileRole = Boolean(senderProfileRole);
+    const attachments = (message.attachments || []);
+    const messageDate = (_a = message.sentAt) !== null && _a !== void 0 ? _a : message.createdAt;
+    const downloadCaseId = caseId !== null && caseId !== void 0 ? caseId : message.caseId;
+    const contentHtml = toHtmlContent(message.content);
+    const richContentClassName = cn("break-words leading-6", "[&_p]:my-0 [&_p+p]:mt-2", "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5", "[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5", "[&_li]:my-1", "[&_a]:text-primary [&_a]:underline [&_a:hover]:text-primary/80", "[&_h1]:mb-2 [&_h1]:mt-3 [&_h1]:text-xl [&_h1]:font-semibold", "[&_h2]:mb-2 [&_h2]:mt-3 [&_h2]:text-lg [&_h2]:font-semibold", "[&_h3]:mb-1.5 [&_h3]:mt-3 [&_h3]:text-base [&_h3]:font-semibold", "[&_h4]:mb-1.5 [&_h4]:mt-3 [&_h4]:font-semibold", "[&_h5]:mb-1.5 [&_h5]:mt-3 [&_h5]:font-semibold", "[&_h6]:mb-1.5 [&_h6]:mt-3 [&_h6]:font-semibold", "[&_blockquote]:my-2 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground", "[&_table]:my-2 [&_table]:w-full [&_table]:border-collapse", "[&_td]:border [&_td]:border-border [&_td]:p-2", "[&_th]:border [&_th]:border-border [&_th]:bg-[hsl(var(--table-header-background))] [&_th]:p-2 [&_th]:font-semibold", "[&_pre]:my-2 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:font-mono [&_pre]:text-[0.85em]", "[&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.85em]", "[&_pre_code]:bg-transparent [&_pre_code]:p-0", "[&_mark]:rounded-sm [&_mark]:bg-[hsl(var(--status-warning))] [&_mark]:px-0.5 [&_mark]:text-[hsl(var(--status-warning-foreground))]", "[&_img]:h-auto [&_img]:max-w-full", contentClassName);
+    return (_jsxs(_Fragment, { children: [showUnreadDivider && (_jsx(MessageNewDivider, { children: newMessageLabel })), _jsxs("article", { ref: messageRef, className: cn("min-w-0", className), children: [_jsxs("div", { className: "flex min-w-0 items-start justify-between gap-x-3 gap-y-1", children: [_jsx(AvatarProfile, { fallback: getInitials(initialsName), name: senderName, nameAs: "h3", nameTrailing: isApplicant ? (_jsx(Badge, { variant: "warning", bordered: true, children: "Applicant" })) : undefined, role: hasSenderProfileRole ? (_jsx("span", { "data-slot": "message-author-role", children: senderProfileRole })) : undefined, rolePlacement: "below", className: "min-w-0 flex-1 [column-gap:var(--space-3)]", avatarClassName: "h-9 w-9 shrink-0", fallbackClassName: "text-xs font-medium", nameClassName: "max-w-full whitespace-normal break-words [overflow-wrap:anywhere]" }), _jsx("time", { className: "shrink-0 whitespace-nowrap pt-0.5", dateTime: messageDate.toISOString(), children: _jsx(Typography, { as: "span", variant: "caption", children: formatTimestamp
+                                        ? formatTimestamp(messageDate, message)
+                                        : formatMessageDate(messageDate) }) })] }), _jsxs("div", { className: "ml-[calc(2.25rem+var(--space-3))] pt-2", children: [_jsx(Typography, { as: "div", variant: "bodySm", color: "inherit", className: richContentClassName, dangerouslySetInnerHTML: { __html: contentHtml } }), attachments.length > 0 ? (_jsx("div", { className: "mt-3 space-y-2", children: attachments.map((attachment, idx) => (_jsx(MessageAttachmentRow, { attachment: attachment, downloadUrl: getAttachmentDownloadUrl === null || getAttachmentDownloadUrl === void 0 ? void 0 : getAttachmentDownloadUrl(attachment, message, downloadCaseId) }, `${attachment.name}-${idx}`))) })) : null] })] })] }));
+}
+export function MessageThread({ messages, caseId, showNewBadge = false, newMessageLabel = "New Message", onMarkAsRead, onMarkedAsRead, getAttachmentDownloadUrl, formatTimestamp, className, itemClassName, contentClassName, }) {
+    var _a;
+    const firstUnreadMessageId = showNewBadge
+        ? (_a = messages.find((message) => message.senderRole === "APPLICANT" && !message.isRead)) === null || _a === void 0 ? void 0 : _a.id
+        : undefined;
+    return (_jsx("div", { className: cn("space-y-5", className), children: messages.map((message) => (_jsx(MessageItem, { message: message, caseId: caseId, showNewBadge: message.id === firstUnreadMessageId, newMessageLabel: newMessageLabel, onMarkAsRead: onMarkAsRead, onMarkedAsRead: onMarkedAsRead, getAttachmentDownloadUrl: getAttachmentDownloadUrl, formatTimestamp: formatTimestamp, className: itemClassName, contentClassName: contentClassName }, message.id))) }));
+}

package/dist/multi-select.js

@@ -11,13 +11,16 @@ import { Typography } from "./typography";
 function MultiSelect({ label, options, value, onValueChange, placeholder = "Select options", description, error, invalid = false, disabled = false, hideLabel = false, searchable = false, searchPlaceholder = "Search...", maxVisibleTags = 2, className, triggerClassName, labelClassName, descriptionClassName, errorClassName, id, }) {
     const generatedId = React.useId();
     const selectId = id !== null && id !== void 0 ? id : `multi-select-${generatedId}`;
+    const labelId = `${selectId}-label`;
     const errorId = error ? `${selectId}-error` : undefined;
     const showDescription = Boolean(description) && !error;
     const descriptionId = showDescription ? `${selectId}-description` : undefined;
+    const listboxId = `${selectId}-listbox`;
     const isInvalid = invalid || Boolean(error);
     const [open, setOpen] = React.useState(false);
     const [searchQuery, setSearchQuery] = React.useState("");
     const containerRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
     const searchInputRef = React.useRef(null);
     const normalizedQuery = searchQuery.trim().toLowerCase();
     const filteredOptions = searchable && normalizedQuery
@@ -64,15 +67,38 @@ function MultiSelect({ label, options, value, onValueChange, placeholder = "Sele
             return () => document.removeEventListener("mousedown", handleClickOutside);
         }
     }, [open]);
-    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: selectId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs("div", { ref: containerRef, className: "relative", children: [_jsx("button", { type: "button", id: selectId, disabled: disabled, onClick: () => setOpen((prev) => !prev), "aria-expanded": open, "aria-haspopup": "listbox", "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("flex h-control w-full items-center gap-1.5 overflow-hidden rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", isInvalid ? "border-destructive" : "border-input", triggerClassName), children: selectedLabels.length > 0 ? (_jsxs(_Fragment, { children: [selectedLabels.slice(0, maxVisibleTags).map((opt) => (_jsxs(Badge, { variant: "secondary", className: "max-w-[10rem] shrink-0 justify-start gap-1 overflow-visible text-sm font-medium normal-case", children: [_jsx("span", { className: "min-w-0 truncate", children: opt.label }), _jsx("button", { type: "button", className: "inline-flex cursor-pointer items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: (e) => {
+    const handleTriggerKeyDown = React.useCallback((event) => {
+        if (disabled)
+            return;
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            setOpen((prev) => !prev);
+        }
+        else if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setOpen(true);
+        }
+        else if (event.key === "Escape") {
+            setOpen(false);
+        }
+    }, [disabled]);
+    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { id: labelId, htmlFor: selectId, className: cn(hideLabel && "sr-only", labelClassName), onClick: (event) => {
+                    var _a;
+                    event.preventDefault();
+                    (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }, children: label }), _jsxs("div", { ref: containerRef, className: "relative", children: [_jsx("div", { ref: triggerRef, role: "combobox", id: selectId, tabIndex: disabled ? -1 : 0, onClick: () => {
+                            if (!disabled) {
+                                setOpen((prev) => !prev);
+                            }
+                        }, onKeyDown: handleTriggerKeyDown, "aria-expanded": open, "aria-controls": listboxId, "aria-haspopup": "listbox", "aria-invalid": isInvalid ? "true" : undefined, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": labelId, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("flex h-control w-full cursor-pointer items-center gap-1.5 overflow-hidden rounded-control border border-input bg-background px-2.5 py-1.5 text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", isInvalid ? "border-destructive" : "border-input", disabled && "cursor-not-allowed opacity-50", triggerClassName), children: selectedLabels.length > 0 ? (_jsxs(_Fragment, { children: [selectedLabels.slice(0, maxVisibleTags).map((opt) => (_jsxs(Badge, { variant: "secondary", className: "max-w-[10rem] shrink-0 justify-start gap-1 overflow-visible text-sm font-medium", children: [_jsx("span", { className: "min-w-0 truncate", children: opt.label }), _jsx("button", { type: "button", className: "inline-flex cursor-pointer items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: (e) => {
                                                 e.stopPropagation();
                                                 removeOption(opt.value);
-                                            }, "aria-label": `Remove ${opt.label}`, children: _jsx(XIcon, { size: 12 }) })] }, opt.value))), selectedLabels.length > maxVisibleTags ? (_jsxs(Badge, { variant: "secondary", className: "shrink-0 text-sm font-medium normal-case", title: selectedLabels
+                                            }, "aria-label": `Remove ${opt.label}`, children: _jsx(XIcon, { size: 12 }) })] }, opt.value))), selectedLabels.length > maxVisibleTags ? (_jsxs(Badge, { variant: "secondary", className: "shrink-0 text-sm font-medium", title: selectedLabels
                                         .slice(maxVisibleTags)
                                         .map((o) => o.label)
-                                        .join(", "), children: ["+", selectedLabels.length - maxVisibleTags] })) : null] })) : (_jsx("span", { className: "text-muted-foreground", children: placeholder })) }), open ? (_jsxs("div", { className: "absolute z-50 mt-1 w-full rounded-md border bg-popover shadow-md", children: [searchable ? (_jsx("div", { className: "border-b px-2 py-1", children: _jsx(InputControl, { ref: searchInputRef, value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: searchPlaceholder, className: "h-8 border-0 bg-transparent px-2 py-0 text-sm shadow-none focus-visible:ring-0", onKeyDown: (e) => e.stopPropagation() }) })) : null, _jsx("div", { role: "listbox", "aria-label": typeof label === "string" ? label : "Options", "aria-multiselectable": "true", className: "max-h-64 overflow-y-auto p-1", children: filteredOptions.length > 0 ? (filteredOptions.map((option) => {
+                                        .join(", "), children: ["+", selectedLabels.length - maxVisibleTags] })) : null] })) : (_jsx("span", { className: "text-muted-foreground", children: placeholder })) }), open ? (_jsxs("div", { className: "absolute z-50 mt-1 w-full rounded-overlay border bg-popover shadow-md", children: [searchable ? (_jsx("div", { className: "border-b px-2 py-1", children: _jsx(InputControl, { ref: searchInputRef, value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: searchPlaceholder, className: "h-8 border-0 bg-transparent px-2 py-0 text-sm shadow-none focus-visible:ring-0", onKeyDown: (e) => e.stopPropagation() }) })) : null, _jsx("div", { id: listboxId, role: "listbox", "aria-label": typeof label === "string" ? label : "Options", "aria-multiselectable": "true", className: "max-h-64 overflow-y-auto p-1", children: filteredOptions.length > 0 ? (filteredOptions.map((option) => {
                                     const isSelected = value.includes(option.value);
-                                    return (_jsxs("button", { type: "button", role: "option", "aria-selected": isSelected, disabled: option.disabled, onClick: () => toggleOption(option.value), className: cn("flex min-h-control w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-2 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50", isSelected && "bg-accent"), children: [_jsx(Checkbox, { checked: isSelected, disabled: option.disabled, tabIndex: -1, readOnly: true, "aria-hidden": "true", className: "mt-0.5" }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { children: option.label }), option.description ? (_jsx(Typography, { as: "span", variant: "caption", children: option.description })) : null] })] }, option.value));
-                                })) : (_jsx("div", { className: "px-3 py-2 text-center text-sm text-muted-foreground", children: "No options found." })) })] })) : null] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
+                                    return (_jsxs("button", { type: "button", role: "option", "aria-selected": isSelected, disabled: option.disabled, onClick: () => toggleOption(option.value), className: cn("flex min-h-8 w-full cursor-pointer items-center gap-1.5 rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50", isSelected && "bg-accent"), children: [_jsx(Checkbox, { checked: isSelected, disabled: option.disabled, tabIndex: -1, readOnly: true, "aria-hidden": "true", className: "mt-0.5" }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { children: option.label }), option.description ? (_jsx(Typography, { as: "span", variant: "caption", children: option.description })) : null] })] }, option.value));
+                                })) : (_jsx("div", { className: "px-2.5 py-1.5 text-center text-sm text-muted-foreground", children: "No options found." })) })] })) : null] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
 }
 export { MultiSelect };

package/dist/notification.d.ts

@@ -0,0 +1,82 @@
+import * as React from "react";
+import { type ButtonProps } from "./button";
+import { type CountBadgeProps } from "./count-badge";
+import { type PopoverProps } from "./popover";
+export type NotificationKind = "assignment" | "message" | "request" | "review" | "system";
+export type NotificationTone = "accent" | "destructive" | "info" | "muted" | "success" | "warning";
+export type NotificationIcon = React.ComponentType<{
+    className?: string;
+}>;
+export type NotificationFilter = "all" | "unread";
+export interface NotificationAction {
+    id?: string;
+    label: React.ReactNode;
+    variant?: ButtonProps["variant"];
+    disabled?: boolean;
+    className?: string;
+    onClick?: (notification: NotificationItemData, event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export interface NotificationItemData {
+    id: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    meta?: React.ReactNode;
+    dateTime?: string;
+    unread?: boolean;
+    kind?: NotificationKind;
+    tone?: NotificationTone;
+    icon?: NotificationIcon;
+    href?: string;
+    actions?: NotificationAction[];
+}
+export interface NotificationItemProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "onSelect" | "title"> {
+    notification: NotificationItemData;
+    density?: "compact" | "default";
+    labelLines?: 1 | 2;
+    descriptionLines?: 1 | 2 | 3;
+    unreadLabel?: React.ReactNode;
+    onSelect?: (notification: NotificationItemData) => void;
+}
+export interface NotificationListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    notifications: NotificationItemData[];
+    density?: "compact" | "default";
+    variant?: "bordered" | "plain";
+    labelLines?: 1 | 2;
+    descriptionLines?: 1 | 2 | 3;
+    unreadLabel?: React.ReactNode;
+    emptyState?: React.ReactNode;
+    itemClassName?: string;
+    onNotificationClick?: (notification: NotificationItemData) => void;
+}
+export interface NotificationPopoverProps extends Omit<PopoverProps, "children" | "surface" | "title"> {
+    notifications: NotificationItemData[];
+    title?: React.ReactNode;
+    filter?: NotificationFilter;
+    defaultFilter?: NotificationFilter;
+    onFilterChange?: (filter: NotificationFilter) => void;
+    showFilterTabs?: boolean;
+    height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    emptyState?: React.ReactNode;
+    listClassName?: string;
+    itemClassName?: string;
+    unreadLabel?: React.ReactNode;
+    markAllAsReadLabel?: React.ReactNode;
+    onNotificationClick?: (notification: NotificationItemData) => void;
+    onMarkAllAsRead?: () => void;
+}
+export interface NotificationTriggerProps extends Omit<ButtonProps, "children"> {
+    count?: number;
+    countMax?: number;
+    countSize?: CountBadgeProps["size"];
+    hideCountWhenZero?: boolean;
+    isCollapsed?: boolean;
+    label?: React.ReactNode;
+    triggerVariant?: "default" | "sidebar";
+}
+declare const NotificationTrigger: React.ForwardRefExoticComponent<NotificationTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare function NotificationItem({ notification, density, labelLines, descriptionLines, unreadLabel, className, onClick, onSelect, ...props }: NotificationItemProps): import("react/jsx-runtime").JSX.Element;
+declare function NotificationList({ notifications, density, variant, labelLines, descriptionLines, unreadLabel, emptyState, itemClassName, className, onNotificationClick, ...props }: NotificationListProps): import("react/jsx-runtime").JSX.Element;
+declare function NotificationPopover({ trigger, notifications, title, filter, defaultFilter, onFilterChange, showFilterTabs, height, minHeight, maxHeight, emptyState, listClassName, itemClassName, unreadLabel, markAllAsReadLabel, onNotificationClick, onMarkAllAsRead, contentClassName, align, ...popoverProps }: NotificationPopoverProps): import("react/jsx-runtime").JSX.Element;
+export { NotificationItem, NotificationList, NotificationPopover, NotificationTrigger, };