@neasg/design-system 0.4.14 → 0.4.15

package/dist/index.d.ts

@@ -11,8 +11,8 @@ export type { CardGridProps, CardListItemProps, CardListProps, CardProps, CardSp
 export type { BadgeProps } from "./badge";
 export { MessageAttachmentRow, MessageItem, MessageNewDivider, MessageThread, formatMessageDate, } from "./message-item";
 export type { MessageAttachmentRowProps, MessageItemAttachment, MessageItemData, MessageItemProps, MessageNewDividerProps, MessageThreadProps, } from "./message-item";
-export { NotificationItem, NotificationList, NotificationPopover, NotificationTrigger, } from "./notification";
-export type { NotificationAction, NotificationFilter, NotificationIcon, NotificationItemData, NotificationItemProps, NotificationKind, NotificationListProps, NotificationPopoverProps, NotificationTriggerProps, NotificationTone, } from "./notification";
+export { formatNotificationTimestamp, NotificationItem, NotificationList, NotificationPopover, NotificationTrigger, } from "./notification";
+export type { NotificationAction, NotificationFilter, NotificationIcon, NotificationItemData, NotificationItemProps, NotificationKind, NotificationListProps, NotificationPopoverProps, NotificationTimestamp, NotificationTriggerProps, NotificationTone, FormatNotificationTimestampOptions, } from "./notification";
 export { RoutingTimeline } from "./routing-timeline";
 export type { RoutingTimelineItem, RoutingTimelineItemKind, RoutingTimelineProps, } from "./routing-timeline";
 export { RichTextEditor, formatFileSize, replaceTemplateVariables, sanitizeRichTextHtml, } from "./rich-text-editor";
@@ -78,7 +78,7 @@ export { RadioGroup } from "./radio-group";
 export type { RadioGroupOption, RadioGroupProps } from "./radio-group";
 export { ScrollHint } from "./scroll-hint";
 export type { ScrollHintProps } from "./scroll-hint";
-export { TaskModeShell } from "./task-mode-shell";
+export { TaskModeShell, TASK_MODE_SHELL_ANIMATION_DURATION_MS, } from "./task-mode-shell";
 export type { TaskModeShellProps } from "./task-mode-shell";
 export { useFileUpload } from "./use-file-upload";
 export type { FileUploadProgress, FileUploadResult, FileUploadStatus, UseFileUploadOptions, UseFileUploadReturn, } from "./use-file-upload";
@@ -132,7 +132,7 @@ export type { TableColumnVisibilityMenuProps } from "./table-column-visibility";
 export { useTableSort } from "./use-table-sort";
 export type { UseTableSortOptions, UseTableSortReturn, } from "./use-table-sort";
 export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableRowSkeleton, TABLE_SKELETON_PRESETS, } from "./table";
-export type { TableColumn, TableColumnWidths, TableProps, TableRowTone, TableSortDirection, TableSortingProps, TableSkeletonConfig, TableRowSkeletonProps, } from "./table";
+export type { TableColumn, TableColumnWidths, TableProps, TableResizeMode, TableRowTone, TableSortDirection, TableSortingProps, TableSkeletonConfig, TableRowSkeletonProps, } from "./table";
 export { Tabs, TabsRoot, TabWithDropdown, type TabsItem, type TabsItemLabel, type TabsItemLabelProps, type TabsProps, TabsList, TabsTrigger, TabsContent, type TabWithDropdownProps, useTabsContext, type TabDropdownSection, } from "./tabs";
 export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider, type TooltipProps, } from "./tooltip";
 export { Toaster, toast } from "./toaster";

package/dist/index.js

@@ -5,7 +5,7 @@ export { Alert, AlertAction, AlertConsent, alertVariants } from "./alert";
 export { Badge, badgeVariants } from "./badge";
 export { Card, CardGrid, CardSplitGrid, CardList, CardListItem, } from "./card";
 export { MessageAttachmentRow, MessageItem, MessageNewDivider, MessageThread, formatMessageDate, } from "./message-item";
-export { NotificationItem, NotificationList, NotificationPopover, NotificationTrigger, } from "./notification";
+export { formatNotificationTimestamp, NotificationItem, NotificationList, NotificationPopover, NotificationTrigger, } from "./notification";
 export { RoutingTimeline } from "./routing-timeline";
 export { RichTextEditor, formatFileSize, replaceTemplateVariables, sanitizeRichTextHtml, } from "./rich-text-editor";
 export { Calendar, CalendarDayButton } from "./calendar";
@@ -40,7 +40,7 @@ export { FilterPopover, getFilterSelectionLabel } from "./filter-popover";
 export { Progress } from "./progress";
 export { RadioGroup } from "./radio-group";
 export { ScrollHint } from "./scroll-hint";
-export { TaskModeShell } from "./task-mode-shell";
+export { TaskModeShell, TASK_MODE_SHELL_ANIMATION_DURATION_MS, } from "./task-mode-shell";
 export { useFileUpload } from "./use-file-upload";
 export { Popover } from "./popover";
 export { PopoverMenuContent, PopoverMenuCheckboxItem, PopoverMenuHeader, PopoverMenuSection, PopoverMenuItem, PopoverMenuDivider, PopoverMenuFooter, PopoverMenuFooterAction, PopoverMenuFooterMeta, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuSearch, PopoverMenuScrollArea, PopoverMenuView, } from "./popover-menu";

package/dist/message-item.js

@@ -5,9 +5,11 @@ import { FileText } from "lucide-react";
 import { DownloadIcon } from "./animated-icons";
 import { AvatarProfile } from "./avatar";
 import { Badge } from "./badge";
+import { formatNotificationTimestamp } from "./notification";
 import { Separator } from "./separator";
 import { Typography } from "./typography";
 import { cn } from "./lib/utils";
+const MESSAGE_TIMESTAMP_REFRESH_MS = 60 * 1000;
 export const formatMessageDate = (date) => {
     const d = new Date(date);
     const hours = d.getHours();
@@ -52,6 +54,7 @@ export function MessageItem({ message, caseId, showNewBadge = false, newMessageL
     var _a;
     const messageRef = React.useRef(null);
     const [hasBeenViewed, setHasBeenViewed] = React.useState(message.isRead);
+    const [timestampNow, setTimestampNow] = React.useState(() => new Date());
     const isVisibleEnoughRef = React.useRef(false);
     const isOfficer = message.senderRole === "OFFICER";
     const isApplicant = message.senderRole === "APPLICANT";
@@ -116,6 +119,13 @@ export function MessageItem({ message, caseId, showNewBadge = false, newMessageL
         onMarkAsRead,
         onMarkedAsRead,
     ]);
+    React.useEffect(() => {
+        if (formatTimestamp) {
+            return;
+        }
+        const intervalId = window.setInterval(() => setTimestampNow(new Date()), MESSAGE_TIMESTAMP_REFRESH_MS);
+        return () => window.clearInterval(intervalId);
+    }, [formatTimestamp]);
     const senderName = isOfficer
         ? message.officerName || "Officer"
         : isApplicant
@@ -136,7 +146,9 @@ export function MessageItem({ message, caseId, showNewBadge = false, newMessageL
     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", className: "text-muted-foreground/60", 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] })] })] }));
+                                        : formatNotificationTimestamp(messageDate, {
+                                            now: timestampNow,
+                                        }) }) })] }), _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;

package/dist/notification.d.ts

@@ -8,6 +8,11 @@ export type NotificationIcon = React.ComponentType<{
     className?: string;
 }>;
 export type NotificationFilter = "all" | "unread";
+export type NotificationTimestamp = string | number | Date;
+export interface FormatNotificationTimestampOptions {
+    now?: NotificationTimestamp;
+    locale?: string | string[];
+}
 export interface NotificationAction {
     id?: string;
     label: React.ReactNode;
@@ -21,6 +26,7 @@ export interface NotificationItemData {
     title: React.ReactNode;
     description?: React.ReactNode;
     meta?: React.ReactNode;
+    timestamp?: NotificationTimestamp;
     dateTime?: string;
     unread?: boolean;
     kind?: NotificationKind;
@@ -75,8 +81,9 @@ export interface NotificationTriggerProps extends Omit<ButtonProps, "children">
     label?: React.ReactNode;
     triggerVariant?: "default" | "sidebar";
 }
+declare function formatNotificationTimestamp(timestamp: NotificationTimestamp, { now, locale }?: FormatNotificationTimestampOptions): string;
 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, };
+export { formatNotificationTimestamp, NotificationItem, NotificationList, NotificationPopover, NotificationTrigger, };

package/dist/notification.js

@@ -32,6 +32,67 @@ const notificationToneClasses = {
     success: "border-status-success-foreground/20 bg-status-success text-status-success-foreground",
     warning: "border-status-warning-foreground/20 bg-status-warning text-status-warning-foreground",
 };
+const MINUTE_MS = 60 * 1000;
+const HOUR_MS = 60 * MINUTE_MS;
+const DAY_MS = 24 * HOUR_MS;
+const WEEK_MS = 7 * DAY_MS;
+const NOTIFICATION_TIMESTAMP_REFRESH_MS = MINUTE_MS;
+function parseNotificationTimestamp(timestamp) {
+    if (timestamp === undefined) {
+        return undefined;
+    }
+    const date = timestamp instanceof Date
+        ? timestamp
+        : typeof timestamp === "number"
+            ? new Date(timestamp)
+            : new Date(timestamp);
+    return Number.isFinite(date.getTime()) ? date : undefined;
+}
+function formatNotificationTimestamp(timestamp, { now = new Date(), locale } = {}) {
+    const date = parseNotificationTimestamp(timestamp);
+    const nowDate = parseNotificationTimestamp(now);
+    if (!date || !nowDate) {
+        return "";
+    }
+    const elapsedMs = nowDate.getTime() - date.getTime();
+    const absoluteElapsedMs = Math.abs(elapsedMs);
+    const isPast = elapsedMs >= 0;
+    if (absoluteElapsedMs < MINUTE_MS) {
+        return "Just now";
+    }
+    const tense = isPast ? "ago" : "from now";
+    if (absoluteElapsedMs < HOUR_MS) {
+        const minutes = Math.round(absoluteElapsedMs / MINUTE_MS);
+        return `${minutes} min ${tense}`;
+    }
+    if (absoluteElapsedMs < DAY_MS) {
+        const hours = Math.round(absoluteElapsedMs / HOUR_MS);
+        return `${hours}h ${tense}`;
+    }
+    if (isPast && absoluteElapsedMs < 2 * DAY_MS) {
+        return "Yesterday";
+    }
+    if (absoluteElapsedMs < WEEK_MS) {
+        const days = Math.round(absoluteElapsedMs / DAY_MS);
+        return `${days} days ${tense}`;
+    }
+    return new Intl.DateTimeFormat(locale, {
+        day: "numeric",
+        month: "short",
+        ...(date.getFullYear() === nowDate.getFullYear() ? {} : { year: "numeric" }),
+    }).format(date);
+}
+function useNotificationTimestampNow(timestamp) {
+    const [now, setNow] = React.useState(() => new Date());
+    React.useEffect(() => {
+        if (timestamp === undefined) {
+            return;
+        }
+        const intervalId = window.setInterval(() => setNow(new Date()), NOTIFICATION_TIMESTAMP_REFRESH_MS);
+        return () => window.clearInterval(intervalId);
+    }, [timestamp]);
+    return now;
+}
 const NotificationTrigger = React.forwardRef(({ count = 0, countMax = 9, countSize = "md", hideCountWhenZero = true, isCollapsed = false, label = "Notifications", triggerVariant = "default", className, size, variant = "ghost", "aria-label": ariaLabel, ...props }, ref) => {
     const resolvedAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (isCollapsed && typeof label === "string" ? label : undefined);
     return (_jsxs(Button, { ref: ref, type: "button", variant: variant, size: size !== null && size !== void 0 ? size : (isCollapsed ? "icon" : "default"), "aria-label": resolvedAriaLabel, className: cn("relative", triggerVariant === "sidebar" &&
@@ -58,7 +119,7 @@ function getNotificationTone(notification) {
     return ((_a = notification.tone) !== null && _a !== void 0 ? _a : notificationKindTones[(_b = notification.kind) !== null && _b !== void 0 ? _b : "system"]);
 }
 function NotificationItem({ notification, density = "default", labelLines = 2, descriptionLines = 2, unreadLabel = "Unread", className, onClick, onSelect, ...props }) {
-    var _a;
+    var _a, _b, _c;
     const Icon = getNotificationIcon(notification);
     const tone = getNotificationTone(notification);
     const isUnread = Boolean(notification.unread);
@@ -66,14 +127,21 @@ function NotificationItem({ notification, density = "default", labelLines = 2, d
     const hasActions = actions.length > 0;
     const isInteractive = Boolean(!hasActions && (notification.href || onClick || onSelect));
     const hasHoverSurface = isInteractive || hasActions;
-    const meta = notification.meta ? (notification.dateTime ? (_jsx("time", { dateTime: notification.dateTime, children: notification.meta })) : (_jsx("span", { children: notification.meta }))) : null;
+    const timestamp = notification.timestamp;
+    const now = useNotificationTimestampNow(timestamp);
+    const formattedTimestamp = timestamp !== undefined
+        ? formatNotificationTimestamp(timestamp, { now })
+        : undefined;
+    const metaContent = (_b = notification.meta) !== null && _b !== void 0 ? _b : formattedTimestamp;
+    const timestampDateTime = (_c = parseNotificationTimestamp(timestamp)) === null || _c === void 0 ? void 0 : _c.toISOString();
+    const meta = metaContent ? (timestampDateTime || notification.dateTime ? (_jsx("time", { dateTime: timestampDateTime !== null && timestampDateTime !== void 0 ? timestampDateTime : notification.dateTime, children: metaContent })) : (_jsx("span", { children: metaContent }))) : null;
     const handleClick = (event) => {
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
         if (!event.defaultPrevented) {
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(notification);
         }
     };
-    const content = (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: cn("mt-0.5 flex shrink-0 items-center justify-center rounded-control border", density === "compact" ? "h-7 w-7" : "h-8 w-8", notificationToneClasses[tone]), children: _jsx(Icon, { className: density === "compact" ? "h-3.5 w-3.5" : "h-4 w-4" }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-start gap-3", children: [_jsx(Typography, { as: "span", variant: "bodySm", className: cn("min-w-0 text-left text-foreground", isUnread ? "font-semibold" : "font-medium", labelLineClasses[labelLines]), children: notification.title }), meta || (isUnread && unreadLabel !== null) ? (_jsxs("span", { className: "flex min-w-0 shrink-0 items-center justify-end gap-1.5 text-right", children: [meta ? (_jsx(Typography, { as: "span", variant: "caption", className: "min-w-0 max-w-24 truncate whitespace-nowrap text-muted-foreground/60", children: meta })) : null, isUnread && unreadLabel !== null ? (_jsx("span", { "data-slot": "notification-unread-indicator", className: "mt-1 h-2.5 w-2.5 shrink-0 rounded-full bg-primary ring-2 ring-background", children: _jsx("span", { className: "sr-only", children: unreadLabel }) })) : null] })) : null] }), notification.description !== undefined ? (_jsx(Typography, { as: "span", variant: "caption", className: cn("mt-1.5 block text-left", isUnread ? "text-foreground/75" : "text-muted-foreground", descriptionLineClasses[descriptionLines]), children: notification.description })) : null, hasActions ? (_jsx("span", { className: "mt-4 flex flex-wrap gap-2", children: actions.map((action, index) => {
+    const content = (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: cn("mt-0.5 flex shrink-0 items-center justify-center rounded-control border", density === "compact" ? "h-7 w-7" : "h-8 w-8", notificationToneClasses[tone]), children: _jsx(Icon, { className: density === "compact" ? "h-3.5 w-3.5" : "h-4 w-4" }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-start gap-3", children: [_jsx(Typography, { as: "span", variant: "bodySm", className: cn("min-w-0 text-left text-foreground", isUnread ? "font-semibold" : "font-medium", labelLineClasses[labelLines]), children: notification.title }), meta || (isUnread && unreadLabel !== null) ? (_jsxs("span", { className: "flex min-w-0 shrink-0 items-center justify-end gap-1.5 text-right", children: [meta ? (_jsx(Typography, { as: "span", variant: "caption", className: "shrink-0 whitespace-nowrap text-muted-foreground/70", children: meta })) : null, isUnread && unreadLabel !== null ? (_jsx("span", { "data-slot": "notification-unread-indicator", className: "mt-1 h-2.5 w-2.5 shrink-0 rounded-full bg-primary ring-2 ring-background", children: _jsx("span", { className: "sr-only", children: unreadLabel }) })) : null] })) : null] }), notification.description !== undefined ? (_jsx(Typography, { as: "span", variant: "caption", className: cn("mt-1.5 block text-left", isUnread ? "text-foreground/75" : "text-muted-foreground", descriptionLineClasses[descriptionLines]), children: notification.description })) : null, hasActions ? (_jsx("span", { className: "mt-4 flex flex-wrap gap-2", children: actions.map((action, index) => {
                             var _a, _b;
                             return (_jsx(Button, { type: "button", variant: (_a = action.variant) !== null && _a !== void 0 ? _a : (index === 0 ? "outline" : "default"), size: "sm", disabled: action.disabled, className: cn("min-w-24", action.className), onClick: (event) => {
                                     var _a;
@@ -118,4 +186,4 @@ function NotificationPopover({ trigger, notifications, title = "Notifications",
                             { value: "unread", label: "Unread", content: null },
                         ] })) : null] }), _jsx(PopoverMenuDivider, { className: "mx-0 my-0 shrink-0 bg-border/90" }), _jsx(PopoverMenuScrollArea, { maxHeight: "max-h-none", className: "scrollbar-none min-h-0 flex-1 space-y-0", children: _jsx(NotificationList, { notifications: visibleNotifications, variant: "plain", emptyState: resolvedEmptyState, itemClassName: cn("py-3", itemClassName), unreadLabel: unreadLabel, onNotificationClick: onNotificationClick, className: cn("gap-0", listClassName) }) }), onMarkAllAsRead ? (_jsx(PopoverMenuFooter, { inset: "flush", className: "border-border/80", children: _jsx(PopoverMenuFooterAction, { onClick: onMarkAllAsRead, disabled: resolvedUnreadCount === 0, children: markAllAsReadLabel }) })) : null] }));
 }
-export { NotificationItem, NotificationList, NotificationPopover, NotificationTrigger, };
+export { formatNotificationTimestamp, NotificationItem, NotificationList, NotificationPopover, NotificationTrigger, };

package/dist/popover.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { type TooltipProps } from "./tooltip";
 type PopoverRootProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>;
 type PopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>;
 export interface PopoverProps extends Pick<PopoverRootProps, "defaultOpen" | "modal" | "onOpenChange" | "open">, Omit<PopoverContentProps, "children" | "className"> {
@@ -7,6 +8,10 @@ export interface PopoverProps extends Pick<PopoverRootProps, "defaultOpen" | "mo
     children: React.ReactNode;
     surface?: "panel" | "menu";
     contentClassName?: string;
+    triggerTooltip?: React.ReactNode;
+    triggerTooltipSide?: TooltipProps["side"];
+    triggerTooltipSideOffset?: TooltipProps["sideOffset"];
+    triggerTooltipClassName?: TooltipProps["contentClassName"];
 }
-declare function Popover({ defaultOpen, modal, onOpenChange, open, trigger, children, surface, contentClassName, align, sideOffset, ...contentProps }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+declare function Popover({ defaultOpen, modal, onOpenChange, open, trigger, children, surface, contentClassName, triggerTooltip, triggerTooltipSide, triggerTooltipSideOffset, triggerTooltipClassName, align, sideOffset, ...contentProps }: PopoverProps): import("react/jsx-runtime").JSX.Element;
 export { Popover };

package/dist/popover.js

@@ -2,7 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "./lib/utils";
 import { PopoverContent, PopoverRoot, PopoverTrigger, } from "./popover-primitive";
-function Popover({ defaultOpen, modal, onOpenChange, open, trigger, children, surface = "panel", contentClassName, align = "center", sideOffset = 4, ...contentProps }) {
-    return (_jsxs(PopoverRoot, { defaultOpen: defaultOpen, modal: modal, onOpenChange: onOpenChange, open: open, children: [_jsx(PopoverTrigger, { asChild: true, children: trigger }), _jsx(PopoverContent, { align: align, sideOffset: sideOffset, className: cn(surface === "menu" && "overflow-hidden p-1", contentClassName), ...contentProps, children: children })] }));
+import { Tooltip } from "./tooltip";
+function Popover({ defaultOpen, modal, onOpenChange, open, trigger, children, surface = "panel", contentClassName, triggerTooltip, triggerTooltipSide, triggerTooltipSideOffset, triggerTooltipClassName, align = "center", sideOffset = 4, ...contentProps }) {
+    const triggerElement = _jsx(PopoverTrigger, { asChild: true, children: trigger });
+    return (_jsxs(PopoverRoot, { defaultOpen: defaultOpen, modal: modal, onOpenChange: onOpenChange, open: open, children: [triggerTooltip ? (_jsx(Tooltip, { content: triggerTooltip, side: triggerTooltipSide, sideOffset: triggerTooltipSideOffset, contentClassName: triggerTooltipClassName, children: triggerElement })) : (triggerElement), _jsx(PopoverContent, { align: align, sideOffset: sideOffset, className: cn(surface === "menu" && "overflow-hidden p-1", contentClassName), ...contentProps, children: children })] }));
 }
 export { Popover };

package/dist/table-column-visibility.d.ts

@@ -11,6 +11,7 @@ export interface TableColumnVisibilityMenuProps<Row> extends PopoverPlacementPro
     trigger?: React.ReactElement;
     triggerLabel?: string;
     triggerClassName?: string;
+    triggerTooltip?: React.ReactNode;
     contentClassName?: string;
     className?: string;
     title?: React.ReactNode;
@@ -19,5 +20,5 @@ export interface TableColumnVisibilityMenuProps<Row> extends PopoverPlacementPro
     emptyMessage?: React.ReactNode;
     minVisibleColumns?: number;
 }
-declare function TableColumnVisibilityMenu<Row>({ columns, visibleColumnKeys, onVisibleColumnKeysChange, defaultVisibleColumnKeys, trigger, triggerLabel, triggerClassName, contentClassName, className, title, searchPlaceholder, restoreDefaultsLabel, emptyMessage, minVisibleColumns, align, sideOffset, side, }: TableColumnVisibilityMenuProps<Row>): import("react/jsx-runtime").JSX.Element;
+declare function TableColumnVisibilityMenu<Row>({ columns, visibleColumnKeys, onVisibleColumnKeysChange, defaultVisibleColumnKeys, trigger, triggerLabel, triggerClassName, triggerTooltip, contentClassName, className, title, searchPlaceholder, restoreDefaultsLabel, emptyMessage, minVisibleColumns, align, sideOffset, side, }: TableColumnVisibilityMenuProps<Row>): import("react/jsx-runtime").JSX.Element;
 export { TableColumnVisibilityMenu };

package/dist/table-column-visibility.js

@@ -52,7 +52,8 @@ function SortableColumnOption({ columnKey, label, checked, disabled, onToggle, }
                     ? "cursor-grab active:cursor-grabbing"
                     : "cursor-not-allowed opacity-40"), ...(checked ? { ...attributes, ...listeners } : {}), children: _jsx(GripVertical, { className: "h-4 w-4", "aria-hidden": "true" }) }), _jsx(Checkbox, { id: checkboxId, checked: checked, disabled: disabled, onChange: onToggle, "aria-label": label }), _jsx("label", { htmlFor: checkboxId, className: cn("min-w-0 flex-1 cursor-pointer truncate", disabled && "cursor-not-allowed text-muted-foreground"), children: label })] }));
 }
-function TableColumnVisibilityMenu({ columns, visibleColumnKeys, onVisibleColumnKeysChange, defaultVisibleColumnKeys, trigger, triggerLabel = "Customize columns", triggerClassName, contentClassName, className, title = "Customize columns", searchPlaceholder = "Search columns", restoreDefaultsLabel = "Restore defaults", emptyMessage = "No columns found", minVisibleColumns = 1, align = "end", sideOffset = 4, side, }) {
+function TableColumnVisibilityMenu({ columns, visibleColumnKeys, onVisibleColumnKeysChange, defaultVisibleColumnKeys, trigger, triggerLabel = "Customize columns", triggerClassName, triggerTooltip, contentClassName, className, title = "Customize columns", searchPlaceholder = "Search columns", restoreDefaultsLabel = "Restore defaults", emptyMessage = "No columns found", minVisibleColumns = 1, align = "end", sideOffset = 4, side, }) {
+    const resolvedTriggerTooltip = triggerTooltip === undefined && !trigger ? triggerLabel : triggerTooltip;
     const [query, setQuery] = React.useState("");
     const sensors = useSensors(useSensor(PointerSensor, {
         activationConstraint: {
@@ -111,7 +112,7 @@ function TableColumnVisibilityMenu({ columns, visibleColumnKeys, onVisibleColumn
         commitVisibleColumnKeys(arrayMove(currentKeys, oldIndex, newIndex));
     }, [commitVisibleColumnKeys, currentKeys]);
     const defaultTrigger = (_jsx(Button, { type: "button", variant: "outline", size: "icon", "aria-label": triggerLabel, className: triggerClassName, children: _jsx(Columns3, { "aria-hidden": "true" }) }));
-    return (_jsx(Popover, { trigger: trigger !== null && trigger !== void 0 ? trigger : defaultTrigger, align: align, side: side, sideOffset: sideOffset, contentClassName: cn("w-80 p-0", contentClassName), "aria-labelledby": title ? titleId : undefined, children: _jsxs("div", { className: cn("flex max-h-96 flex-col", className), children: [_jsxs("div", { className: "border-b p-2", children: [_jsx("label", { htmlFor: searchInputId, className: "sr-only", children: searchPlaceholder }), _jsx(SearchInputShell, { children: _jsx(InputControl, { id: searchInputId, value: query, onChange: (event) => setQuery(event.target.value), placeholder: searchPlaceholder, className: "h-8 bg-background pl-8 pr-2" }) })] }), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto p-1", children: [title ? (_jsx(PopoverMenuGroupLabel, { id: titleId, children: title })) : null, filteredColumns.length ? (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: filteredColumns.map((column) => column.key), strategy: verticalListSortingStrategy, children: filteredColumns.map((column) => {
+    return (_jsx(Popover, { trigger: trigger !== null && trigger !== void 0 ? trigger : defaultTrigger, triggerTooltip: resolvedTriggerTooltip, align: align, side: side, sideOffset: sideOffset, contentClassName: cn("w-80 p-0", contentClassName), "aria-labelledby": title ? titleId : undefined, children: _jsxs("div", { className: cn("flex max-h-96 flex-col", className), children: [_jsxs("div", { className: "border-b p-2", children: [_jsx("label", { htmlFor: searchInputId, className: "sr-only", children: searchPlaceholder }), _jsx(SearchInputShell, { children: _jsx(InputControl, { id: searchInputId, value: query, onChange: (event) => setQuery(event.target.value), placeholder: searchPlaceholder, className: "h-8 bg-background pl-8 pr-2" }) })] }), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto p-1", children: [title ? (_jsx(PopoverMenuGroupLabel, { id: titleId, children: title })) : null, filteredColumns.length ? (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: filteredColumns.map((column) => column.key), strategy: verticalListSortingStrategy, children: filteredColumns.map((column) => {
                                     const label = getColumnVisibilityLabel(column);
                                     const checked = visibleColumnKeySet.has(column.key);
                                     const disabled = checked && visibleColumnCount <= requiredVisibleColumns;

package/dist/table.d.ts

@@ -8,6 +8,7 @@ interface TableContainerProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const TableContainer: React.ForwardRefExoticComponent<TableContainerProps & React.RefAttributes<HTMLDivElement>>;
 export type TableColumnWidths = Record<string, number>;
+export type TableResizeMode = "pair" | "grow";
 declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
@@ -130,6 +131,8 @@ export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElemen
     rowTone?: TableRowTone | ((row: Row, index: number) => TableRowTone | undefined);
     /** Constrains the table container height so the table body scrolls instead of the surrounding surface. */
     maxHeight?: React.CSSProperties["maxHeight"];
+    /** Sets a minimum table container height. */
+    minHeight?: React.CSSProperties["minHeight"];
     sorting?: TableSortingProps;
     pagination?: Omit<PaginationProps, "className">;
     loading?: boolean;
@@ -138,6 +141,8 @@ export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElemen
     visibleColumnKeys?: readonly string[];
     /** When true, every column is resizable unless its column config sets `resizable: false`. */
     resizableColumns?: boolean;
+    /** `pair` preserves total table width; `grow` resizes one column and lets the table widen. */
+    columnResizeMode?: TableResizeMode;
     /** Controlled pixel widths keyed by column key. */
     columnWidths?: TableColumnWidths;
     /** Initial pixel widths keyed by column key for uncontrolled resizing. */
@@ -146,10 +151,16 @@ export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElemen
     onColumnWidthsChange?: (columnWidths: TableColumnWidths) => void;
     /** Optional hook for decorating resize handles without replacing table sizing behavior. */
     renderColumnResizeHandle?: (props: TableColumnResizeHandleRenderProps<Row>) => React.ReactNode;
+    /** Forces the browser table layout mode. Resizable tables always use fixed layout. */
+    tableLayout?: "auto" | "fixed";
+    /** Centers the empty state inside the table body when there are no rows. */
+    centerEmptyState?: boolean;
+    /** Minimum height for the centered empty-state area. */
+    emptyStateMinHeight?: React.CSSProperties["minHeight"];
     /** When true, applies alternating row backgrounds for easier scanning. */
     striped?: boolean;
     /** When set, rows become interactive: cursor-pointer, hover highlight, and click handling. */
     onRowClick?: (row: Row, index: number) => void;
 }
-declare function Table<Row>({ columns, rows, getRowKey, emptyState, toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, sorting, pagination, loading, loadingRows, visibleColumnKeys, resizableColumns, columnWidths, defaultColumnWidths, onColumnWidthsChange, renderColumnResizeHandle, striped, onRowClick, onScroll, style, ...props }: TableProps<Row>): import("react/jsx-runtime").JSX.Element;
+declare function Table<Row>({ columns, rows, getRowKey, emptyState, toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, minHeight, sorting, pagination, loading, loadingRows, visibleColumnKeys, resizableColumns, columnResizeMode, columnWidths, defaultColumnWidths, onColumnWidthsChange, renderColumnResizeHandle, tableLayout, centerEmptyState, emptyStateMinHeight, striped, onRowClick, onScroll, style, ...props }: TableProps<Row>): import("react/jsx-runtime").JSX.Element;
 export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, SortableTableHead, TableRowSkeleton, };

package/dist/table.js

@@ -14,6 +14,9 @@ TableContainer.displayName = "TableContainer";
 const DEFAULT_COLUMN_RESIZE_MIN_WIDTH = 64;
 const DEFAULT_COLUMN_RESIZE_START_WIDTH = 160;
 const COLUMN_RESIZE_KEYBOARD_STEP = 16;
+const TABLE_MIN_WIDTH_CSS_VAR = "--table-min-width";
+const DEFAULT_TABLE_MIN_HEIGHT = "var(--table-min-height, var(--app-table-min-height, 24rem))";
+const DEFAULT_CENTERED_EMPTY_STATE_MIN_HEIGHT = "calc(var(--table-min-height, var(--app-table-min-height, 24rem)) - var(--table-empty-state-offset, var(--app-table-empty-state-offset, 5.75rem)))";
 function getTableColumnSizingStyle({ style, width, minWidth, maxWidth, treatWidthAsMinWidth = true, }) {
     const resolvedMinWidth = minWidth !== null && minWidth !== void 0 ? minWidth : (treatWidthAsMinWidth ? width : undefined);
     return {
@@ -101,6 +104,28 @@ function getColumnResizeBaseWidth(column, columnWidths, elementWidth) {
     var _a, _b, _c, _d;
     return ((_d = (_c = (_b = (_a = columnWidths[column.key]) !== null && _a !== void 0 ? _a : parsePixelSize(column.width)) !== null && _b !== void 0 ? _b : (elementWidth && elementWidth > 0 ? elementWidth : undefined)) !== null && _c !== void 0 ? _c : parsePixelSize(column.minWidth)) !== null && _d !== void 0 ? _d : DEFAULT_COLUMN_RESIZE_START_WIDTH);
 }
+function hasColumnWidthOverrides(columnWidths) {
+    return Object.keys(columnWidths).length > 0;
+}
+function getMeasuredColumnWidths(resizeHandle, columns, fallbackColumnWidths) {
+    const table = resizeHandle.closest("table");
+    const headerCells = table === null || table === void 0 ? void 0 : table.querySelectorAll("thead th");
+    if (!(headerCells === null || headerCells === void 0 ? void 0 : headerCells.length)) {
+        return fallbackColumnWidths;
+    }
+    return columns.reduce((widths, column, index) => {
+        var _a;
+        const measuredWidth = (_a = headerCells.item(index)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
+        widths[column.key] =
+            measuredWidth && Number.isFinite(measuredWidth) && measuredWidth > 0
+                ? Math.round(measuredWidth)
+                : getColumnResizeBaseWidth(column, fallbackColumnWidths);
+        return widths;
+    }, {});
+}
+function getTableMinWidth(columns, columnWidths) {
+    return columns.reduce((total, column) => total + getColumnResizeBaseWidth(column, columnWidths), 0);
+}
 function getColumnResizeLabel(column) {
     if (column.visibilityLabel) {
         return column.visibilityLabel;
@@ -243,6 +268,26 @@ const TableColumnResizeHandle = React.forwardRef(function TableColumnResizeHandl
                 : COLUMN_RESIZE_KEYBOARD_STEP);
         }, className: cn("group absolute right-0 top-0 z-[1] flex h-full w-4 cursor-col-resize touch-none items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className), children: _jsx("span", { "aria-hidden": "true", className: "h-6 w-px rounded-full bg-[hsl(var(--table-border))] transition-colors group-hover:bg-primary group-focus-visible:bg-primary" }) }));
 });
+const TableColumnGrowResizeHandle = React.forwardRef(function TableColumnGrowResizeHandle({ column, currentWidth, minWidth, maxWidth, onResizeStart, onResizeByKeyboard, className, onClick, ...props }, ref) {
+    const label = getColumnResizeLabel(column);
+    return (_jsx("button", { ...props, ref: ref, type: "button", "aria-label": `Resize ${label} column`, title: `Resize ${label} column`, "aria-valuenow": currentWidth, "aria-valuemin": minWidth, "aria-valuemax": maxWidth, onPointerDown: (event) => onResizeStart(column, event), onClick: (event) => {
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+            if (event.defaultPrevented) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+        }, onKeyDown: (event) => {
+            if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            onResizeByKeyboard(column, event.key === "ArrowLeft"
+                ? -COLUMN_RESIZE_KEYBOARD_STEP
+                : COLUMN_RESIZE_KEYBOARD_STEP);
+        }, className: cn("group absolute right-0 top-0 z-[1] flex h-full w-4 cursor-col-resize touch-none items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className), children: _jsx("span", { "aria-hidden": "true", className: "h-6 w-px rounded-full bg-[hsl(var(--table-border))] transition-colors group-hover:bg-primary group-focus-visible:bg-primary" }) }));
+});
 function getDefaultSkeleton(column) {
     var _a, _b;
     return {
@@ -282,15 +327,21 @@ function getVisibleColumns(columns, visibleColumnKeys) {
 function isStickyResizeBoundary(column, nextColumn) {
     return Boolean(column.sticky === "right" || nextColumn.sticky);
 }
-function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { message: "No data available", description: "There are no rows to display in this table yet.", className: "border-0 bg-transparent px-0 py-6" })), toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, sorting, pagination, loading = false, loadingRows = 5, visibleColumnKeys, resizableColumns = false, columnWidths, defaultColumnWidths, onColumnWidthsChange, renderColumnResizeHandle, striped = false, onRowClick, onScroll, style, ...props }) {
+function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { message: "No data available", description: "There are no rows to display in this table yet.", className: "border-0 bg-transparent px-0 py-6" })), toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, minHeight, sorting, pagination, loading = false, loadingRows = 5, visibleColumnKeys, resizableColumns = false, columnResizeMode = "pair", columnWidths, defaultColumnWidths, onColumnWidthsChange, renderColumnResizeHandle, tableLayout, centerEmptyState = false, emptyStateMinHeight = DEFAULT_CENTERED_EMPTY_STATE_MIN_HEIGHT, striped = false, onRowClick, onScroll, style, ...props }) {
     const visibleColumns = getVisibleColumns(columns, visibleColumnKeys);
+    const isGrowResizeMode = columnResizeMode === "grow";
     const isColumnResizingEnabled = resizableColumns || visibleColumns.some((column) => column.resizable);
     // Use auto layout by default so the browser can grow a column to contain its
     // nowrap header. Resizable columns need fixed layout so neighbour columns do
     // not redistribute width while a handle is dragged.
-    const shouldUseFixedLayout = isColumnResizingEnabled;
+    const shouldUseFixedLayout = tableLayout === "fixed" || isColumnResizingEnabled;
     const [uncontrolledColumnWidths, setUncontrolledColumnWidths] = React.useState(() => ({ ...(defaultColumnWidths !== null && defaultColumnWidths !== void 0 ? defaultColumnWidths : {}) }));
     const resolvedColumnWidths = columnWidths !== null && columnWidths !== void 0 ? columnWidths : uncontrolledColumnWidths;
+    const hasResolvedColumnWidths = hasColumnWidthOverrides(resolvedColumnWidths);
+    const growTableMinWidth = isGrowResizeMode
+        ? getTableMinWidth(visibleColumns, resolvedColumnWidths)
+        : undefined;
+    const resolvedMinHeight = minHeight !== null && minHeight !== void 0 ? minHeight : (centerEmptyState ? DEFAULT_TABLE_MIN_HEIGHT : undefined);
     const columnWidthsRef = React.useRef(resolvedColumnWidths);
     const resizeCleanupRef = React.useRef(null);
     const tableContainerRef = React.useRef(null);
@@ -355,6 +406,17 @@ function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { mess
     const resizeColumnByKeyboard = React.useCallback((column, nextColumn, delta) => {
         resizeColumnPairByDelta(column, nextColumn, delta);
     }, [resizeColumnPairByDelta]);
+    const resizeGrowColumn = React.useCallback((column, width, baseColumnWidths = columnWidthsRef.current) => {
+        const nextWidth = clampColumnResizeWidth(column, width);
+        commitColumnWidths((currentColumnWidths) => ({
+            ...currentColumnWidths,
+            ...baseColumnWidths,
+            [column.key]: nextWidth,
+        }));
+    }, [commitColumnWidths]);
+    const resizeGrowColumnByKeyboard = React.useCallback((column, delta) => {
+        resizeGrowColumn(column, getColumnResizeBaseWidth(column, columnWidthsRef.current) + delta);
+    }, [resizeGrowColumn]);
     const startColumnResize = React.useCallback((column, nextColumn, event) => {
         var _a;
         event.preventDefault();
@@ -375,13 +437,47 @@ function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { mess
         const cleanup = () => {
             ownerDocument.removeEventListener("pointermove", handlePointerMove);
             ownerDocument.removeEventListener("pointerup", handlePointerUp);
+            ownerDocument.removeEventListener("pointercancel", handlePointerUp);
             ownerDocument.documentElement.style.cursor = previousCursor;
             resizeCleanupRef.current = null;
         };
         resizeCleanupRef.current = cleanup;
         ownerDocument.addEventListener("pointermove", handlePointerMove);
         ownerDocument.addEventListener("pointerup", handlePointerUp);
+        ownerDocument.addEventListener("pointercancel", handlePointerUp);
     }, [resizeColumnPairByDelta]);
+    const startGrowColumnResize = React.useCallback((column, event) => {
+        var _a, _b;
+        event.preventDefault();
+        event.stopPropagation();
+        (_a = resizeCleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(resizeCleanupRef);
+        const ownerDocument = event.currentTarget.ownerDocument;
+        const startX = event.clientX;
+        const startColumnWidths = hasColumnWidthOverrides(columnWidthsRef.current)
+            ? columnWidthsRef.current
+            : getMeasuredColumnWidths(event.currentTarget, visibleColumns, columnWidthsRef.current);
+        const startWidth = (_b = startColumnWidths[column.key]) !== null && _b !== void 0 ? _b : getColumnResizeBaseWidth(column, startColumnWidths);
+        const previousCursor = ownerDocument.documentElement.style.cursor;
+        ownerDocument.documentElement.style.cursor = "col-resize";
+        const handlePointerMove = (pointerEvent) => {
+            resizeGrowColumn(column, startWidth + pointerEvent.clientX - startX, startColumnWidths);
+        };
+        const handlePointerUp = () => {
+            var _a;
+            (_a = resizeCleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(resizeCleanupRef);
+        };
+        const cleanup = () => {
+            ownerDocument.removeEventListener("pointermove", handlePointerMove);
+            ownerDocument.removeEventListener("pointerup", handlePointerUp);
+            ownerDocument.removeEventListener("pointercancel", handlePointerUp);
+            ownerDocument.documentElement.style.cursor = previousCursor;
+            resizeCleanupRef.current = null;
+        };
+        resizeCleanupRef.current = cleanup;
+        ownerDocument.addEventListener("pointermove", handlePointerMove);
+        ownerDocument.addEventListener("pointerup", handlePointerUp);
+        ownerDocument.addEventListener("pointercancel", handlePointerUp);
+    }, [resizeGrowColumn, visibleColumns]);
     const renderResizeHandle = React.useCallback((column, columnIndex) => {
         var _a, _b;
         const nextColumn = visibleColumns[columnIndex + 1];
@@ -394,18 +490,25 @@ function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { mess
         if (stickyResizeBoundary) {
             return null;
         }
-        const handle = (_jsx(TableColumnResizeHandle, { column: column, nextColumn: nextColumn, currentWidth: getResolvedResizableColumnWidth(column, resolvedColumnWidths), minWidth: getColumnResizeMinWidth(column), maxWidth: Number.isFinite(getColumnResizeMaxWidth(column))
-                ? getColumnResizeMaxWidth(column)
-                : undefined, onResizeStart: startColumnResize, onResizeByKeyboard: resizeColumnByKeyboard }));
+        const currentWidth = isGrowResizeMode
+            ? getColumnResizeBaseWidth(column, resolvedColumnWidths)
+            : getResolvedResizableColumnWidth(column, resolvedColumnWidths);
+        const maxWidth = Number.isFinite(getColumnResizeMaxWidth(column))
+            ? getColumnResizeMaxWidth(column)
+            : undefined;
+        const handle = isGrowResizeMode ? (_jsx(TableColumnGrowResizeHandle, { column: column, currentWidth: currentWidth, minWidth: getColumnResizeMinWidth(column), maxWidth: maxWidth, onResizeStart: startGrowColumnResize, onResizeByKeyboard: resizeGrowColumnByKeyboard })) : (_jsx(TableColumnResizeHandle, { column: column, nextColumn: nextColumn, currentWidth: currentWidth, minWidth: getColumnResizeMinWidth(column), maxWidth: maxWidth, onResizeStart: startColumnResize, onResizeByKeyboard: resizeColumnByKeyboard }));
         if (renderColumnResizeHandle) {
             return renderColumnResizeHandle({ column, nextColumn, handle });
         }
         return handle;
     }, [
+        isGrowResizeMode,
         resizableColumns,
         renderColumnResizeHandle,
+        resizeGrowColumnByKeyboard,
         resizeColumnByKeyboard,
         resolvedColumnWidths,
+        startGrowColumnResize,
         startColumnResize,
         visibleColumns,
     ]);
@@ -413,10 +516,18 @@ function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { mess
         onScroll === null || onScroll === void 0 ? void 0 : onScroll(event);
         updateStickyScrollState(event.currentTarget);
     }, [onScroll, updateStickyScrollState]);
+    const resolvedEmptyState = centerEmptyState ? (_jsx("div", { "data-slot": "table-empty-state", className: "flex w-full min-w-0 items-center justify-center whitespace-normal text-center [&>*]:mx-auto", style: { minHeight: emptyStateMinHeight }, children: emptyState })) : (emptyState);
     const container = (_jsx(TableContainer, { ref: tableContainerRef, onScroll: handleTableContainerScroll, className: cn("w-full", loading && "pointer-events-none select-none", className, containerClassName), style: {
             ...style,
+            ...(growTableMinWidth !== undefined
+                ? { [TABLE_MIN_WIDTH_CSS_VAR]: `${growTableMinWidth}px` }
+                : {}),
             ...(maxHeight !== undefined ? { maxHeight } : {}),
-        }, ...props, children: _jsxs(TableRoot, { className: cn(shouldUseFixedLayout && "table-fixed", tableClassName), children: [caption ? _jsx(TableCaption, { children: caption }) : null, _jsx("colgroup", { children: visibleColumns.map((column) => (_jsx("col", { style: getTableColumnSizingStyle({
+            ...(resolvedMinHeight !== undefined ? { minHeight: resolvedMinHeight } : {}),
+        }, ...props, children: _jsxs(TableRoot, { className: cn(shouldUseFixedLayout && "table-fixed", isGrowResizeMode &&
+                (hasResolvedColumnWidths
+                    ? "w-[var(--table-min-width)]"
+                    : "min-w-[var(--table-min-width)]"), tableClassName), children: [caption ? _jsx(TableCaption, { children: caption }) : null, _jsx("colgroup", { children: visibleColumns.map((column) => (_jsx("col", { style: getTableColumnSizingStyle({
                             width: getRenderedColumnWidth({
                                 column,
                                 columnWidths: resolvedColumnWidths,
@@ -458,7 +569,7 @@ function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { mess
                                     : null);
                                 return (_jsx(TableCell, { width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), wrap: column.wrap, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, className: cn(alignClassName(column.align), stickyClassName(column.sticky, "cell", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.cellClassName), children: value }, column.key));
                             }) }, getRowKey(row, rowIndex)));
-                    })) : (_jsx(TableRow, { className: "cursor-default hover:bg-card", children: _jsx(TableCell, { colSpan: Math.max(visibleColumns.length, 1), className: "p-6", children: emptyState }) })) })] }) }));
+                    })) : (_jsx(TableRow, { className: "cursor-default hover:bg-card", children: _jsx(TableCell, { colSpan: Math.max(visibleColumns.length, 1), className: "p-6", children: resolvedEmptyState }) })) })] }) }));
     if (!pagination) {
         return (_jsxs("div", { className: "space-y-4", children: [toolbar, container] }));
     }

package/dist/task-mode-shell.d.ts

@@ -1,13 +1,17 @@
 import * as React from "react";
+import { type BackButtonProps } from "./back-button";
+export declare const TASK_MODE_SHELL_ANIMATION_DURATION_MS = 250;
 export interface TaskModeShellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
-    header: React.ReactNode;
+    header?: React.ReactNode;
     children: React.ReactNode;
     loadingProgress?: number;
     showLoadingBar?: boolean;
     loadingLabel?: string;
     ready?: boolean;
     exiting?: boolean;
+    backButtonProps?: BackButtonProps;
     headerClassName?: string;
+    headerContentClassName?: string;
     contentOffsetClassName?: string;
     bodyClassName?: string;
     mainPanelClassName?: string;

package/dist/task-mode-shell.js

@@ -3,26 +3,39 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { GripVertical } from "lucide-react";
 import { cn } from "./lib/utils";
+import { BackButton } from "./back-button";
 import { rightPanelEdgeClassName, rightPanelEdgeClosedClassName, rightPanelEdgeDividerClassName, rightPanelEdgeOpenClassName, rightPanelResizeHandleSurfaceClassName, } from "./layout-right-panel-edge";
 import { Progress } from "./progress";
 const TASK_MODE_SIDE_PANEL_DEFAULT_SIZE = 50;
 const TASK_MODE_SIDE_PANEL_MIN_SIZE = 28;
 const TASK_MODE_SIDE_PANEL_MAX_SIZE = 72;
 const TASK_MODE_SIDE_PANEL_SIZE_CSS_VAR = "--task-mode-side-panel-size";
+export const TASK_MODE_SHELL_ANIMATION_DURATION_MS = 250;
 function clampSidePanelSize(size, minSize, maxSize) {
     return Math.min(Math.max(size, minSize), maxSize);
 }
 function getResizableSplitTemplate() {
     return `minmax(0, calc(100% - var(${TASK_MODE_SIDE_PANEL_SIZE_CSS_VAR}))) minmax(0, var(${TASK_MODE_SIDE_PANEL_SIZE_CSS_VAR}))`;
 }
-export const TaskModeShell = React.forwardRef(({ className, header, children, loadingProgress = 0, showLoadingBar = false, loadingLabel = "Loading task", ready = true, exiting = false, headerClassName, contentOffsetClassName = "pt-16", bodyClassName, mainPanelClassName, sidePanel, sidePanelOpen = false, sidePanelClassName, sidePanelAriaLabel, sidePanelResizable = false, sidePanelDefaultSize = TASK_MODE_SIDE_PANEL_DEFAULT_SIZE, sidePanelMinSize = TASK_MODE_SIDE_PANEL_MIN_SIZE, sidePanelMaxSize = TASK_MODE_SIDE_PANEL_MAX_SIZE, splitDividerClassName, ...props }, ref) => {
+export const TaskModeShell = React.forwardRef(({ className, header, children, loadingProgress = 0, showLoadingBar = false, loadingLabel = "Loading task", ready = true, exiting = false, backButtonProps, headerClassName, headerContentClassName, contentOffsetClassName = "pt-16", bodyClassName, mainPanelClassName, sidePanel, sidePanelOpen = false, sidePanelClassName, sidePanelAriaLabel, sidePanelResizable = false, sidePanelDefaultSize = TASK_MODE_SIDE_PANEL_DEFAULT_SIZE, sidePanelMinSize = TASK_MODE_SIDE_PANEL_MIN_SIZE, sidePanelMaxSize = TASK_MODE_SIDE_PANEL_MAX_SIZE, splitDividerClassName, ...props }, ref) => {
     const hasSidePanel = sidePanel !== undefined && sidePanel !== null;
+    const hasHeaderContent = header !== undefined && header !== null;
     const splitOpen = hasSidePanel && sidePanelOpen;
     const splitContainerRef = React.useRef(null);
+    const [entered, setEntered] = React.useState(false);
     const resolvedSidePanelMinSize = Math.min(sidePanelMinSize, sidePanelMaxSize);
     const resolvedSidePanelMaxSize = Math.max(sidePanelMinSize, sidePanelMaxSize);
     const [sidePanelSize, setSidePanelSize] = React.useState(() => clampSidePanelSize(sidePanelDefaultSize, resolvedSidePanelMinSize, resolvedSidePanelMaxSize));
     const sidePanelSizeRef = React.useRef(sidePanelSize);
+    const taskModeVisible = entered && ready && !exiting;
+    const taskModeState = exiting
+        ? "exiting"
+        : taskModeVisible
+            ? "entered"
+            : "entering";
+    React.useEffect(() => {
+        setEntered(true);
+    }, []);
     React.useEffect(() => {
         sidePanelSizeRef.current = sidePanelSize;
     }, [sidePanelSize]);
@@ -96,9 +109,10 @@ export const TaskModeShell = React.forwardRef(({ className, header, children, lo
         sidePanelResizable,
         splitOpen,
     ]);
-    return (_jsxs("div", { ref: ref, className: cn("relative min-h-screen w-full bg-background text-foreground", className), ...props, children: [showLoadingBar || loadingProgress > 0 ? (_jsx(Progress, { value: loadingProgress, size: "xs", shape: "square", label: loadingLabel, className: cn("absolute left-0 top-0 z-50 transition-opacity duration-300 ease-out", showLoadingBar ? "opacity-100" : "pointer-events-none opacity-0"), trackClassName: "bg-transparent", indicatorClassName: "bg-emerald-600" })) : null, _jsxs("div", { className: cn("transition-all duration-[250ms] ease-out", ready && !exiting
-                    ? "translate-y-0 opacity-100"
-                    : "translate-y-4 opacity-0"), children: [_jsx("header", { className: cn("fixed left-0 right-0 top-0 z-30 border-b bg-background", headerClassName), children: header }), _jsx("main", { className: cn("w-full", contentOffsetClassName), children: hasSidePanel ? (_jsxs("div", { ref: splitContainerRef, className: cn("relative grid min-h-0 w-full overflow-hidden transition-[grid-template-columns] duration-300 ease-in-out", bodyClassName), style: splitStyle, children: [_jsx("section", { className: cn("min-h-0 min-w-0", mainPanelClassName), children: children }), _jsx("aside", { "aria-hidden": !splitOpen, "aria-label": sidePanelAriaLabel, className: cn("min-h-0 min-w-0 bg-[hsl(var(--layout-right-panel-background))] transition-[border-color,box-shadow,opacity] duration-300 ease-in-out", rightPanelEdgeClassName, sidePanelClassName, splitOpen
+    const renderedHeader = backButtonProps ? (_jsxs("div", { className: cn("flex h-14 items-center justify-between gap-4 px-6", headerContentClassName), children: [_jsx(BackButton, { ...backButtonProps, className: cn("text-base", backButtonProps.className) }), hasHeaderContent ? (_jsx("div", { className: "flex min-w-0 items-center gap-2", children: header })) : null] })) : (header);
+    return (_jsxs("div", { ref: ref, className: cn("relative min-h-screen w-full bg-background text-foreground", className), ...props, children: [showLoadingBar || loadingProgress > 0 ? (_jsx(Progress, { value: loadingProgress, size: "xs", shape: "square", label: loadingLabel, className: cn("absolute left-0 top-0 z-50 transition-opacity duration-300 ease-out", showLoadingBar ? "opacity-100" : "pointer-events-none opacity-0"), trackClassName: "bg-transparent", indicatorClassName: "bg-emerald-600" })) : null, _jsxs("div", { "data-slot": "task-mode-shell-content", "data-state": taskModeState, className: cn("motion-safe:transition-[opacity,transform] motion-safe:[transition-duration:250ms] motion-safe:ease-out motion-reduce:transition-none", taskModeVisible
+                    ? "opacity-100 motion-safe:translate-y-0 motion-safe:scale-100"
+                    : "pointer-events-none opacity-0 motion-safe:translate-y-3 motion-safe:scale-[0.99]"), children: [_jsx("header", { className: cn("fixed left-0 right-0 top-0 z-30 border-b bg-background", headerClassName), children: renderedHeader }), _jsx("main", { className: cn("w-full", contentOffsetClassName), children: hasSidePanel ? (_jsxs("div", { ref: splitContainerRef, className: cn("relative grid min-h-0 w-full overflow-hidden transition-[grid-template-columns] duration-300 ease-in-out", bodyClassName), style: splitStyle, children: [_jsx("section", { className: cn("min-h-0 min-w-0", mainPanelClassName), children: children }), _jsx("aside", { "aria-hidden": !splitOpen, "aria-label": sidePanelAriaLabel, className: cn("min-h-0 min-w-0 bg-[hsl(var(--layout-right-panel-background))] transition-[border-color,box-shadow,opacity] duration-300 ease-in-out", rightPanelEdgeClassName, sidePanelClassName, splitOpen
                                         ? ["opacity-100", rightPanelEdgeOpenClassName]
                                         : [
                                             "pointer-events-none overflow-hidden opacity-0",

package/dist/toaster.js

@@ -1,27 +1,48 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { CheckCircle2, CircleAlert, CircleX, Info } from "lucide-react";
 import { Toaster as SonnerToaster, toast } from "sonner";
 import { buttonVariants } from "./button";
 import { XIcon } from "./animated-icons/x";
 import { cn } from "./lib/utils";
 import { typographyVariants } from "./typography";
+const toastActionClassName = "!ml-0 !mr-0 !mt-0 !self-start !justify-self-start";
+const toastLayoutStyle = {
+    display: "grid",
+    gridTemplateColumns: "auto var(--space-2) auto minmax(0, 1fr)",
+    alignItems: "start",
+    columnGap: "0",
+    rowGap: "var(--space-2)",
+    "--toast-button-margin-start": "0px",
+    "--toast-button-margin-end": "0px",
+    "--toast-icon-margin-start": "0px",
+    "--toast-icon-margin-end": "0px",
+    "--toast-svg-margin-start": "0px",
+    "--toast-svg-margin-end": "0px",
+};
 function Toaster({ position = "top-right", visibleToasts = 3, closeButton = true, duration = 4000, }) {
     return (_jsx(SonnerToaster, { position: position, visibleToasts: visibleToasts, closeButton: closeButton, duration: duration, icons: {
+            success: _jsx(CheckCircle2, { "aria-hidden": "true", className: "h-4 w-4" }),
+            info: _jsx(Info, { "aria-hidden": "true", className: "h-4 w-4" }),
+            warning: _jsx(CircleAlert, { "aria-hidden": "true", className: "h-4 w-4" }),
+            error: _jsx(CircleX, { "aria-hidden": "true", className: "h-4 w-4" }),
             close: _jsx(XIcon, { size: 14 }),
         }, toastOptions: {
+            unstyled: true,
+            style: toastLayoutStyle,
             classNames: {
-                toast: "group relative border border-border bg-background text-foreground shadow-md rounded-overlay p-3 pr-9 flex items-start gap-2",
-                content: "min-w-0 flex-1 gap-1",
-                title: cn(typographyVariants({ variant: "bodySm" }), "font-medium"),
-                description: cn(typographyVariants({ variant: "bodySm" }), "text-muted-foreground"),
-                icon: "mt-0.5 text-muted-foreground",
-                actionButton: cn(buttonVariants({ variant: "link" }), "!h-auto !min-h-0 !self-start !p-0 !text-sm !font-medium !text-primary !no-underline hover:!text-primary/80 hover:!no-underline"),
-                cancelButton: cn(buttonVariants({ variant: "link" }), "!h-auto !min-h-0 !self-start !bg-transparent !p-0 !text-sm !font-medium !text-muted-foreground !no-underline hover:!bg-transparent hover:!text-foreground hover:!no-underline"),
-                closeButton: "!absolute !left-auto !right-2 !top-2 !h-6 !w-6 !translate-x-0 !translate-y-0 !rounded-control !border-0 !bg-transparent !text-muted-foreground hover:!bg-accent hover:!text-foreground",
-                success: "border-[hsl(var(--status-success-foreground))]/20 [&_[data-icon]]:text-[hsl(var(--status-success-foreground))]",
-                error: "border-destructive/20 [&_[data-icon]]:text-[hsl(var(--status-destructive-foreground))]",
-                warning: "border-[hsl(var(--status-warning-foreground))]/20 [&_[data-icon]]:text-[hsl(var(--status-warning-foreground))]",
-                info: "border-[hsl(var(--status-info-foreground))]/20 [&_[data-icon]]:text-[hsl(var(--status-info-foreground))]",
+                toast: "group relative !grid w-[var(--width)] !grid-cols-[auto_var(--space-2)_auto_minmax(0,1fr)] !items-start !gap-x-0 !gap-y-2 !rounded-overlay !border !border-border/80 !bg-popover !p-3 !pr-10 !text-popover-foreground !shadow-overlay-strong [&_[data-action]]:col-start-1 [&_[data-button]]:row-start-2 [&_[data-button]]:!ml-0 [&_[data-button]]:!mr-0 [&_[data-cancel]]:col-start-1 [&_[data-content]]:col-span-full [&_[data-content]]:col-start-1 [&_[data-content]]:row-start-1 [&_[data-icon]]:col-start-1 [&_[data-icon]]:row-start-1 [&:has([data-cancel])_[data-action]]:col-start-3 [&:has([data-icon])]:!grid-cols-[auto_var(--space-3)_auto_var(--space-2)_auto_minmax(0,1fr)] [&:has([data-icon])_[data-action]]:col-start-3 [&:has([data-icon])_[data-cancel]]:col-start-3 [&:has([data-icon])_[data-content]]:col-start-3 [&:has([data-icon]):has([data-cancel])_[data-action]]:col-start-5",
+                content: "flex min-w-0 flex-col gap-1",
+                title: cn(typographyVariants({ variant: "bodySm" }), "!font-medium !text-popover-foreground"),
+                description: cn(typographyVariants({ variant: "bodySm" }), "!text-muted-foreground"),
+                icon: "!mx-0 flex !h-8 !w-8 shrink-0 !items-center !justify-center self-start rounded-control !border !border-border !bg-muted !text-muted-foreground [&>svg]:!m-0 [&>svg]:!h-4 [&>svg]:!w-4",
+                actionButton: cn(buttonVariants({ variant: "default", size: "compact" }), toastActionClassName, "!bg-primary !text-primary-foreground hover:!bg-primary/90"),
+                cancelButton: cn(buttonVariants({ variant: "outline", size: "compact" }), toastActionClassName, "!border-[hsl(var(--button-outline-border))] !bg-[hsl(var(--button-outline-background))] !text-foreground hover:!bg-[hsl(var(--button-outline-hover-background))]"),
+                closeButton: "!absolute !left-auto !right-2.5 !top-2.5 !flex !h-6 !w-6 !translate-x-0 !translate-y-0 !items-center !justify-center !rounded-control !border-0 !bg-transparent !text-muted-foreground hover:!bg-accent hover:!text-foreground",
+                success: "border-[hsl(var(--status-success-foreground))]/20 [&_[data-icon]]:!border-status-success-foreground/20 [&_[data-icon]]:!bg-status-success [&_[data-icon]]:!text-status-success-foreground",
+                error: "border-destructive/20 [&_[data-icon]]:!border-status-destructive-foreground/20 [&_[data-icon]]:!bg-status-destructive [&_[data-icon]]:!text-status-destructive-foreground",
+                warning: "border-[hsl(var(--status-warning-foreground))]/20 [&_[data-icon]]:!border-status-warning-foreground/20 [&_[data-icon]]:!bg-status-warning [&_[data-icon]]:!text-status-warning-foreground",
+                info: "border-[hsl(var(--status-info-foreground))]/20 [&_[data-icon]]:!border-status-info-foreground/20 [&_[data-icon]]:!bg-status-info [&_[data-icon]]:!text-status-info-foreground",
             },
         } }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.4.14",
+  "version": "0.4.15",
   "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
   "license": "UNLICENSED",
   "type": "module",