@neasg/design-system 0.4.35 → 0.4.95

package/dist/date-input.js

@@ -164,11 +164,11 @@ const DateInput = React.forwardRef((props, ref) => {
         }
     };
     const disabledDays = (date) => isDateOutsideBounds(date, minDate, maxDate);
-    const calendarContent = (_jsx(_Fragment, { children: props.mode === "range" ? (_jsx(Calendar, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, defaultMonth: (_b = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) !== null && _b !== void 0 ? _b : selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to, numberOfMonths: (_c = props.numberOfMonths) !== null && _c !== void 0 ? _c : 2, showOutsideDays: false, autoFocus: true })) : (_jsx(Calendar, { mode: "single", selected: selectedDate, onSelect: handleSelect, disabled: disabledDays, defaultMonth: selectedDate, autoFocus: true })) }));
+    const calendarContent = (_jsx(_Fragment, { children: props.mode === "range" ? (_jsx(Calendar, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, defaultMonth: (_b = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) !== null && _b !== void 0 ? _b : selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to, numberOfMonths: (_c = props.numberOfMonths) !== null && _c !== void 0 ? _c : 2, showOutsideDays: false, className: "[&_.rdp-month:not(:first-of-type)]:hidden sm:[&_.rdp-month:not(:first-of-type)]:flex", autoFocus: true })) : (_jsx(Calendar, { mode: "single", selected: selectedDate, onSelect: handleSelect, disabled: disabledDays, defaultMonth: selectedDate, autoFocus: true })) }));
     if (appearance === "inline") {
-        return (_jsxs("span", { className: cn("inline-flex", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(Popover, { open: open, onOpenChange: handleOpenChange, align: "start", title: popoverTitle, surface: popoverTitle ? "menu" : "panel", contentClassName: "w-auto p-0", trigger: _jsxs("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("inline-flex cursor-pointer items-baseline rounded-sm border-0 bg-transparent p-0 font-medium text-interactive underline decoration-interactive/40 underline-offset-4 transition-colors hover:decoration-interactive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", !displayValue && "text-muted-foreground decoration-border", isInvalid && "text-destructive decoration-destructive", triggerClassName), children: [_jsxs("span", { className: "sr-only", children: [label, ": "] }), _jsx("span", { children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder })] }), children: calendarContent }), showDescription ? (_jsx("span", { id: descriptionId, className: "sr-only", children: description })) : null, error ? (_jsx("span", { id: errorId, role: "alert", className: "sr-only", children: error })) : null] }));
+        return (_jsxs("span", { className: cn("inline-flex", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(Popover, { open: open, onOpenChange: handleOpenChange, align: "start", title: popoverTitle, surface: popoverTitle ? "menu" : "panel", collisionPadding: 8, contentClassName: "max-h-[var(--radix-popover-content-available-height)] w-auto overflow-auto p-0 [&_[data-slot=popover-title]]:px-3", trigger: _jsxs("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("inline-flex cursor-pointer items-baseline rounded-sm border-0 bg-transparent p-0 font-medium text-interactive underline decoration-interactive/40 underline-offset-4 transition-colors hover:decoration-interactive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", !displayValue && "text-muted-foreground decoration-border", isInvalid && "text-destructive decoration-destructive", triggerClassName), children: [_jsxs("span", { className: "sr-only", children: [label, ": "] }), _jsx("span", { children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder })] }), children: calendarContent }), showDescription ? (_jsx("span", { id: descriptionId, className: "sr-only", children: description })) : null, error ? (_jsx("span", { id: errorId, role: "alert", className: "sr-only", children: error })) : null] }));
     }
-    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs("div", { className: "relative", children: [_jsx(Popover, { open: open, onOpenChange: handleOpenChange, align: "start", title: popoverTitle, surface: popoverTitle ? "menu" : "panel", contentClassName: "w-auto p-0", trigger: _jsx("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn(inputControlClassName, "relative cursor-pointer pr-9 text-left", showClearButton && "pr-16", !displayValue && "text-muted-foreground", isInvalid && "border-destructive focus-visible:ring-destructive", triggerClassName), children: _jsx("span", { className: "block truncate", children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder }) }), children: calendarContent }), _jsxs("span", { "aria-hidden": showClearButton ? undefined : true, className: "pointer-events-none absolute inset-y-0 right-3 flex items-center gap-2 text-muted-foreground", children: [showClearButton ? (_jsx("button", { type: "button", "aria-label": resolvedClearLabel, onClick: handleClear, className: "pointer-events-auto inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed", children: _jsx(XIcon, { size: 14, className: "flex items-center justify-center" }) })) : null, _jsx(CalendarIcon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0", strokeWidth: 2 })] })] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
+    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs("div", { className: "relative", children: [_jsx(Popover, { open: open, onOpenChange: handleOpenChange, align: "start", title: popoverTitle, surface: popoverTitle ? "menu" : "panel", collisionPadding: 8, contentClassName: "max-h-[var(--radix-popover-content-available-height)] w-auto overflow-auto p-0 [&_[data-slot=popover-title]]:px-3", trigger: _jsx("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn(inputControlClassName, "relative cursor-pointer pr-9 text-left", showClearButton && "pr-16", !displayValue && "text-muted-foreground", isInvalid && "border-destructive focus-visible:ring-destructive", triggerClassName), children: _jsx("span", { className: "block truncate", children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder }) }), children: calendarContent }), _jsxs("span", { "aria-hidden": showClearButton ? undefined : true, className: "pointer-events-none absolute inset-y-0 right-3 flex items-center gap-2 text-muted-foreground", children: [showClearButton ? (_jsx("button", { type: "button", "aria-label": resolvedClearLabel, onClick: handleClear, className: "pointer-events-auto inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed", children: _jsx(XIcon, { size: 14, className: "flex items-center justify-center" }) })) : null, _jsx(CalendarIcon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0", strokeWidth: 2 })] })] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
 });
 DateInput.displayName = "DateInput";
 export { DateInput };

package/dist/dialog.d.ts

@@ -23,6 +23,8 @@ export interface DialogProps {
     contentClassName?: string;
     bodyClassName?: string;
     hideCloseButton?: boolean;
+    /** Whether a pointer interaction outside the dialog closes it. */
+    closeOnOutsideClick?: boolean;
 }
-declare function Dialog({ open, defaultOpen, onOpenChange, modal, trigger, title, description, children, footer, primaryAction, secondaryAction, contentClassName, bodyClassName, hideCloseButton, }: DialogProps): import("react/jsx-runtime").JSX.Element;
+declare function Dialog({ open, defaultOpen, onOpenChange, modal, trigger, title, description, children, footer, primaryAction, secondaryAction, contentClassName, bodyClassName, hideCloseButton, closeOnOutsideClick, }: DialogProps): import("react/jsx-runtime").JSX.Element;
 export { Dialog };

package/dist/dialog.js

@@ -31,7 +31,7 @@ function renderDialogAction({ action, close, defaultVariant, }) {
             }
         }, children: label }));
 }
-function Dialog({ open, defaultOpen, onOpenChange, modal, trigger, title, description, children, footer, primaryAction, secondaryAction, contentClassName, bodyClassName, hideCloseButton, }) {
+function Dialog({ open, defaultOpen, onOpenChange, modal, trigger, title, description, children, footer, primaryAction, secondaryAction, contentClassName, bodyClassName, hideCloseButton = false, closeOnOutsideClick = false, }) {
     const [isOpen, setIsOpen] = useControllableOpen({
         open,
         defaultOpen,
@@ -43,7 +43,11 @@ function Dialog({ open, defaultOpen, onOpenChange, modal, trigger, title, descri
     const body = resolveDialogRenderable(children, helpers);
     const customFooter = resolveDialogRenderable(footer, helpers);
     const hasFooter = Boolean(customFooter || primaryAction || secondaryAction);
-    return (_jsxs(DialogRoot, { open: isOpen, onOpenChange: setIsOpen, modal: modal, children: [trigger ? _jsx(DialogTrigger, { asChild: true, children: trigger }) : null, _jsxs(DialogSurface, { className: contentClassName, hideCloseButton: hideCloseButton, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), description ? (_jsx(DialogDescription, { children: description })) : null] }), body ? _jsx("div", { className: cn("grid gap-4", bodyClassName), children: body }) : null, hasFooter ? (_jsx(DialogFooter, { children: customFooter !== null && customFooter !== void 0 ? customFooter : (_jsxs(_Fragment, { children: [secondaryAction
+    return (_jsxs(DialogRoot, { open: isOpen, onOpenChange: setIsOpen, modal: modal, children: [trigger ? _jsx(DialogTrigger, { asChild: true, children: trigger }) : null, _jsxs(DialogSurface, { ...(!description ? { "aria-describedby": undefined } : {}), className: contentClassName, hideCloseButton: hideCloseButton, onPointerDownOutside: (event) => {
+                    if (!closeOnOutsideClick) {
+                        event.preventDefault();
+                    }
+                }, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), description ? (_jsx(DialogDescription, { children: description })) : null] }), body ? _jsx("div", { className: cn("grid gap-4", bodyClassName), children: body }) : null, hasFooter ? (_jsx(DialogFooter, { children: customFooter !== null && customFooter !== void 0 ? customFooter : (_jsxs(_Fragment, { children: [secondaryAction
                                     ? renderDialogAction({
                                         action: secondaryAction,
                                         close: helpers.close,

package/dist/draggable-tabs.js

@@ -3,12 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, } from "@dnd-kit/core";
 import { SortableContext, horizontalListSortingStrategy, sortableKeyboardCoordinates, useSortable, } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { GripVertical } from "lucide-react";
 import { XIcon } from "./animated-icons/x";
 import { Badge } from "./badge";
 import { GuidanceTip } from "./guidance-tip";
 import { cn } from "./lib/utils";
 import { Tooltip } from "./tooltip";
-function TabButton({ item, dragHandleProps, }) {
+function TabButton({ item, dragHandleProps, showDivider = false, }) {
     var _a, _b, _c;
     const isDraggable = Boolean(dragHandleProps);
     const labelClassName = item.labelClassName
@@ -16,17 +17,17 @@ function TabButton({ item, dragHandleProps, }) {
         : item.active
             ? "text-foreground"
             : "text-muted-foreground hover:text-foreground";
-    const content = (_jsxs("div", { className: cn("group flex items-center gap-1.5 border-b-2 px-2.5 transition-colors select-none", item.disabled
+    const content = (_jsxs("div", { className: cn("group/draggable-tab relative -mb-px flex items-center gap-1.5 border-b-[3px] px-2.5 transition-colors select-none", item.disabled
             ? "cursor-not-allowed opacity-50"
             : isDraggable
                 ? "cursor-grab active:cursor-grabbing"
                 : "cursor-pointer", item.active
             ? (_a = item.activeClassName) !== null && _a !== void 0 ? _a : "border-[hsl(var(--tab-indicator))] bg-transparent hover:bg-transparent"
-            : (_b = item.inactiveClassName) !== null && _b !== void 0 ? _b : "border-transparent hover:bg-[hsl(var(--tab-trigger-hover-background))]", item.className), ...dragHandleProps, children: [_jsxs("button", { type: "button", onClick: item.disabled ? undefined : item.onSelect, disabled: item.disabled, className: cn("flex cursor-pointer items-center gap-1.5 py-2 pr-1 text-sm font-medium whitespace-nowrap disabled:cursor-not-allowed", labelClassName), children: [item.badge ? (_jsx(Badge, { variant: item.badge.variant, bordered: item.badge.bordered, size: "icon", children: item.badge.label })) : null, item.leading, item.label, item.trailing] }), item.onClose ? (_jsx("button", { type: "button", onClick: (event) => {
+            : (_b = item.inactiveClassName) !== null && _b !== void 0 ? _b : "border-transparent hover:bg-[hsl(var(--tab-trigger-hover-background))]", item.className), ...dragHandleProps, children: [isDraggable ? (_jsx("span", { "data-slot": "draggable-tab-grip", "aria-hidden": "true", className: "pointer-events-none absolute left-0 top-1/2 z-10 inline-flex h-5 w-4 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded border border-border bg-background text-muted-foreground opacity-0 shadow-sm transition-opacity group-hover/draggable-tab:opacity-100 group-has-[:focus-visible]/draggable-tab:opacity-100", children: _jsx(GripVertical, { className: "h-3 w-3" }) })) : null, _jsxs("button", { type: "button", onClick: item.disabled ? undefined : item.onSelect, disabled: item.disabled, className: cn("flex cursor-pointer items-center gap-1.5 py-2 pr-1 text-sm font-medium whitespace-nowrap disabled:cursor-not-allowed", labelClassName), children: [item.badge ? (_jsx(Badge, { variant: item.badge.variant, bordered: item.badge.bordered, size: "icon", children: item.badge.label })) : null, item.leading, item.label, item.trailing] }), item.onClose ? (_jsx("button", { type: "button", onClick: (event) => {
                     var _a;
                     event.stopPropagation();
                     (_a = item.onClose) === null || _a === void 0 ? void 0 : _a.call(item);
-                }, className: cn("cursor-pointer rounded p-1 text-muted-foreground hover:text-foreground", item.closeButtonClassName), "aria-label": "Close tab", children: _jsx(XIcon, { size: 12 }) })) : null] }));
+                }, className: cn("cursor-pointer rounded p-1 text-muted-foreground hover:text-foreground", item.closeButtonClassName), "aria-label": "Close tab", children: _jsx(XIcon, { size: 12 }) })) : null, showDivider ? (_jsx("span", { "data-slot": "draggable-tab-divider", "aria-hidden": "true", className: "pointer-events-none absolute -right-0.5 top-1/2 h-4 w-px -translate-y-1/2 bg-[hsl(var(--layout-surface-border))]" })) : null] }));
     if (item.guidance) {
         return _jsx(GuidanceTip, { ...item.guidance, trigger: content });
     }
@@ -35,13 +36,13 @@ function TabButton({ item, dragHandleProps, }) {
     }
     return (_jsx(Tooltip, { content: item.tooltip, side: (_c = item.tooltipSide) !== null && _c !== void 0 ? _c : "bottom", contentClassName: item.tooltipContentClassName, children: content }));
 }
-function SortableTab({ item }) {
-    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: item.id });
+function SortableTab({ item, showDivider, }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: item.id, disabled: item.disabled });
     return (_jsx("div", { ref: setNodeRef, style: {
             transform: CSS.Transform.toString(transform),
             transition,
             zIndex: isDragging ? 50 : undefined,
-        }, className: cn(isDragging && "opacity-50 shadow-lg"), children: _jsx(TabButton, { item: item, dragHandleProps: { ...attributes, ...listeners } }) }));
+        }, className: cn(isDragging && "opacity-50 shadow-lg"), children: _jsx(TabButton, { item: item, showDivider: showDivider, dragHandleProps: item.disabled ? undefined : { ...attributes, ...listeners } }) }));
 }
 function DraggableTabs({ staticTabs = [], tabs, onReorder, className, ...props }) {
     const sensors = useSensors(useSensor(PointerSensor, {
@@ -61,6 +62,6 @@ function DraggableTabs({ staticTabs = [], tabs, onReorder, className, ...props }
             onReorder(oldIndex, newIndex);
         }
     };
-    return (_jsxs("div", { "data-slot": "draggable-tabs", className: cn("flex items-end gap-1 border-b overflow-x-auto overflow-y-hidden bg-transparent", "border-[hsl(var(--layout-surface-border))]", className), ...props, children: [staticTabs.map((tab) => (_jsx(TabButton, { item: tab }, tab.id))), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: tabs.map((tab) => tab.id), strategy: horizontalListSortingStrategy, children: tabs.map((tab) => (_jsx(SortableTab, { item: tab }, tab.id))) }) })] }));
+    return (_jsxs("div", { "data-slot": "draggable-tabs", className: cn("flex items-end gap-1 border-b overflow-x-auto overflow-y-hidden bg-transparent", "border-[hsl(var(--layout-surface-border))]", className), ...props, children: [staticTabs.map((tab, index) => (_jsx(TabButton, { item: tab, showDivider: index < staticTabs.length - 1 || tabs.length > 0 }, tab.id))), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: tabs.map((tab) => tab.id), strategy: horizontalListSortingStrategy, children: tabs.map((tab, index) => (_jsx(SortableTab, { item: tab, showDivider: index < tabs.length - 1 }, tab.id))) }) })] }));
 }
 export { DraggableTabs };

package/dist/index.d.ts

@@ -7,11 +7,13 @@ export { Alert, AlertAction, AlertConsent, alertVariants, } from "./alert";
 export type { AlertActionProps, AlertConsentProps, AlertProps, } from "./alert";
 export { AlertStack } from "./alert-stack";
 export type { AlertStackProps } from "./alert-stack";
+export { ActivityCard, ActivityCardActor, ActivityCardContent, } from "./activity-card";
+export type { ActivityCardActorProps, ActivityCardContentProps, ActivityCardDensity, ActivityCardIconTone, ActivityCardProps, } from "./activity-card";
 export { Badge, badgeVariants } from "./badge";
 export { Card, CardGrid, CardSplitGrid, CardList, CardListItem, } from "./card";
 export type { CardGridProps, CardListItemProps, CardListProps, CardProps, CardSplitGridProps, } from "./card";
 export type { BadgeProps } from "./badge";
-export { MessageAttachmentRow, MessageItem, MessageNewDivider, MessageThread, formatMessageDate, } from "./message-item";
+export { MessageAttachmentRow, MessageItem, MessageNewDivider, MessageThread, formatMessageCardTimestamp, formatMessageDate, } from "./message-item";
 export type { MessageAttachmentRowProps, MessageItemAttachment, MessageItemData, MessageItemProps, MessageNewDividerProps, MessageThreadProps, } from "./message-item";
 export { formatNotificationTimestamp, NotificationItem, NotificationList, NotificationPopover, NotificationTrigger, } from "./notification";
 export type { NotificationAction, NotificationFilter, NotificationIcon, NotificationItemData, NotificationItemProps, NotificationKind, NotificationListProps, NotificationPopoverProps, NotificationTimestamp, NotificationTriggerProps, NotificationTone, FormatNotificationTimestampOptions, } from "./notification";
@@ -30,6 +32,8 @@ export { DateInput } from "./date-input";
 export type { DateInputProps, DateInputRangeProps, DateInputSingleProps, DateRangeInputValue, } from "./date-input";
 export { CountBadge } from "./count-badge";
 export type { CountBadgeProps } from "./count-badge";
+export { StatusDot } from "./status-dot";
+export type { StatusDotProps, StatusDotSize, StatusDotVariant, } from "./status-dot";
 export { EmptyState } from "./empty-state";
 export type { EmptyStateProps } from "./empty-state";
 export { EditableTable } from "./editable-table";
@@ -90,6 +94,10 @@ export { PopoverMenuContent, PopoverMenuCheckboxItem, PopoverMenuHeader, Popover
 export type { PopoverMenuContentProps, PopoverMenuCheckboxItemProps, PopoverMenuHeaderProps, PopoverMenuSectionProps, PopoverMenuItemProps, PopoverMenuDividerProps, PopoverMenuFooterActionProps, PopoverMenuFooterMetaProps, PopoverMenuFooterProps, PopoverMenuGroupProps, PopoverMenuGroupLabelProps, PopoverMenuSearchProps, PopoverMenuScrollAreaProps, PopoverMenuViewProps, } from "./popover-menu";
 export { SearchInput } from "./search-input";
 export type { SearchInputProps } from "./search-input";
+export { CompoundSearchInput } from "./compound-search-input";
+export type { CompoundSearchInputProps } from "./compound-search-input";
+export { Autocomplete, AutocompleteOptions, AutocompletePopover, useAutocompleteController, } from "./autocomplete";
+export type { AutocompleteController, AutocompleteControllerOptions, AutocompleteOption, AutocompleteOptionGroup, AutocompleteOptionRenderState, AutocompleteOptionsProps, AutocompletePopoverProps, AutocompleteProps, AutocompleteStateContent, } from "./autocomplete";
 export { SectionNav } from "./section-nav";
 export type { SectionNavItem, SectionNavProps } from "./section-nav";
 export { GovtMasthead } from "./govt-masthead";
@@ -111,8 +119,8 @@ export type { TextareaProps } from "./textarea";
 export { DraggableTabs, type DraggableTabBadge, type DraggableTabGuidance, type DraggableTabItem, type DraggableTabsProps, } from "./draggable-tabs";
 export { Drawer, } from "./drawer";
 export type { DrawerAction, DrawerProps, DrawerSide } from "./drawer";
-export { DashboardContent, DashboardLayout, DashboardRightPanel, DashboardRightPanelBody, DashboardRightPanelHeader, DashboardRightPanelSection, DashboardRightPanelTabs, DashboardSidebar, DashboardSidebarProfile, DashboardSidebarProfilePopover, SidebarProvider, useSidebar, } from "./layout";
-export type { DashboardContentProps, DashboardLayoutProps, DashboardRightPanelBodyProps, DashboardRightPanelHeaderProps, DashboardRightPanelMode, DashboardRightPanelProps, DashboardRightPanelSectionProps, DashboardRightPanelTabsProps, DashboardSidebarNavDropdownItem, DashboardSidebarNavGroup, DashboardSidebarNavItem, DashboardSidebarNavLinkItem, DashboardSidebarProfileProps, DashboardSidebarProfilePopoverProps, } from "./layout";
+export { DashboardActionPanel, DashboardActionPanelEmptyState, DashboardContent, DashboardLayout, DashboardRightPanel, DashboardRightPanelBody, DashboardRightPanelHeader, DashboardRightPanelSection, DashboardRightPanelTabs, DashboardSidebar, DashboardSidebarProfile, DashboardSidebarProfilePopover, SidebarProvider, useSidebar, } from "./layout";
+export type { DashboardActionPanelProps, DashboardActionPanelEmptyStateProps, DashboardContentProps, DashboardLayoutProps, DashboardRightPanelBodyProps, DashboardRightPanelHeaderProps, DashboardRightPanelMode, DashboardRightPanelProps, DashboardRightPanelSectionProps, DashboardRightPanelTabsProps, DashboardSidebarNavDropdownItem, DashboardSidebarNavGroup, DashboardSidebarNavItem, DashboardSidebarNavLinkItem, DashboardSidebarProfileProps, DashboardSidebarProfilePopoverProps, } from "./layout";
 export { PageHeader } from "./page-header";
 export { PageLayout, PageLayoutContext, PageLayoutControls, PageLayoutHeader, PageLayoutSection, PageLayoutStack, PageLayoutTitle, pageLayoutGapClassNames, pageLayoutStackGapClassNames, } from "./page-layout";
 export type { PageLayoutGap, PageLayoutProps, PageLayoutStackGap, PageLayoutStackProps, PageLayoutTitleProps, } from "./page-layout";
@@ -134,7 +142,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, TableRowHeader, TableCaption, TableRowSkeleton, TABLE_SKELETON_PRESETS, } from "./table";
-export type { TableColumn, TableColumnWidths, TableProps, TableResizeMode, TableRowExpansionProps, TableRowTone, TableSortDirection, TableSortingProps, TableSkeletonConfig, TableRowSkeletonProps, } from "./table";
+export type { TableColumn, TableColumnWidths, TableProps, TableResizeMode, TableRowExpansionProps, TableRowIndicatorProps, TableRowTone, TableSortDirection, TableSortingProps, TableSkeletonConfig, TableRowSkeletonProps, } from "./table";
 export type { TableColumnFilter, TableColumnFilterOption, TableDateColumnFilter, TableDateRangeColumnFilter, TableOptionsColumnFilter, TableTextColumnFilter, } from "./table-column-filter";
 export { Tabs, SubTabs, TabsRoot, TabWithDropdown, type TabsItem, type TabsItemLabel, type TabsItemLabelProps, type TabsProps, type SubTabsItem, type SubTabsProps, TabsList, TabsTrigger, TabsContent, type TabWithDropdownProps, useTabsContext, type TabDropdownSection, } from "./tabs";
 export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider, type TooltipProps, } from "./tooltip";

package/dist/index.js

@@ -3,9 +3,10 @@ export { AvatarProfilePopover, AvatarProfilePopoverContent, AvatarProfilePopover
 export * from "./animated-icons";
 export { Alert, AlertAction, AlertConsent, alertVariants, } from "./alert";
 export { AlertStack } from "./alert-stack";
+export { ActivityCard, ActivityCardActor, ActivityCardContent, } from "./activity-card";
 export { Badge, badgeVariants } from "./badge";
 export { Card, CardGrid, CardSplitGrid, CardList, CardListItem, } from "./card";
-export { MessageAttachmentRow, MessageItem, MessageNewDivider, MessageThread, formatMessageDate, } from "./message-item";
+export { MessageAttachmentRow, MessageItem, MessageNewDivider, MessageThread, formatMessageCardTimestamp, formatMessageDate, } from "./message-item";
 export { formatNotificationTimestamp, NotificationItem, NotificationList, NotificationPopover, NotificationTrigger, } from "./notification";
 export { RoutingTimeline } from "./routing-timeline";
 export { RichTextEditor, formatFileSize, replaceTemplateVariables, sanitizeRichTextHtml, } from "./rich-text-editor";
@@ -15,6 +16,7 @@ export { Switch } from "./switch";
 export { ThemeSwitcher } from "./theme-switcher";
 export { DateInput } from "./date-input";
 export { CountBadge } from "./count-badge";
+export { StatusDot } from "./status-dot";
 export { EmptyState } from "./empty-state";
 export { EditableTable } from "./editable-table";
 export { EditButton } from "./edit-button";
@@ -46,6 +48,8 @@ export { useFileUpload } from "./use-file-upload";
 export { Popover, PopoverTitle } from "./popover";
 export { PopoverMenuContent, PopoverMenuCheckboxItem, PopoverMenuHeader, PopoverMenuSection, PopoverMenuItem, PopoverMenuDivider, PopoverMenuFooter, PopoverMenuFooterAction, PopoverMenuFooterMeta, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuSearch, PopoverMenuScrollArea, PopoverMenuView, } from "./popover-menu";
 export { SearchInput } from "./search-input";
+export { CompoundSearchInput } from "./compound-search-input";
+export { Autocomplete, AutocompleteOptions, AutocompletePopover, useAutocompleteController, } from "./autocomplete";
 export { SectionNav } from "./section-nav";
 export { GovtMasthead } from "./govt-masthead";
 export { GuidanceTip } from "./guidance-tip";
@@ -57,7 +61,7 @@ export { useViewportThreshold } from "./use-viewport-threshold";
 export { Textarea } from "./textarea";
 export { DraggableTabs, } from "./draggable-tabs";
 export { Drawer, } from "./drawer";
-export { DashboardContent, DashboardLayout, DashboardRightPanel, DashboardRightPanelBody, DashboardRightPanelHeader, DashboardRightPanelSection, DashboardRightPanelTabs, DashboardSidebar, DashboardSidebarProfile, DashboardSidebarProfilePopover, SidebarProvider, useSidebar, } from "./layout";
+export { DashboardActionPanel, DashboardActionPanelEmptyState, DashboardContent, DashboardLayout, DashboardRightPanel, DashboardRightPanelBody, DashboardRightPanelHeader, DashboardRightPanelSection, DashboardRightPanelTabs, DashboardSidebar, DashboardSidebarProfile, DashboardSidebarProfilePopover, SidebarProvider, useSidebar, } from "./layout";
 export { PageHeader } from "./page-header";
 export { PageLayout, PageLayoutContext, PageLayoutControls, PageLayoutHeader, PageLayoutSection, PageLayoutStack, PageLayoutTitle, pageLayoutGapClassNames, pageLayoutStackGapClassNames, } from "./page-layout";
 export { WorkspaceHeader } from "./workspace-header";

package/dist/label-value-grid.js

@@ -32,14 +32,14 @@ function LabelValueGrid({ items, columns = 4, density = "default", className, it
         const element = containerRef.current;
         if (!element)
             return;
-        const GAP_PX = 24;
         let frameId = null;
         const updateColumns = () => {
             const width = getAvailableWidth(element);
             if (width <= 0) {
                 return;
             }
-            setResolvedColumns(getResponsiveColumnCount(width, columns, resolvedMinColumnWidth, GAP_PX));
+            const columnGap = Number.parseFloat(window.getComputedStyle(element).columnGap) || 0;
+            setResolvedColumns(getResponsiveColumnCount(width, columns, resolvedMinColumnWidth, columnGap));
         };
         const requestUpdate = () => {
             if (frameId !== null) {
@@ -63,8 +63,10 @@ function LabelValueGrid({ items, columns = 4, density = "default", className, it
             window.removeEventListener("resize", requestUpdate);
             observer.disconnect();
         };
-    }, [columns, resolvedMinColumnWidth]);
-    return (_jsx("div", { ref: containerRef, className: cn("grid auto-rows-fr items-start gap-x-6 gap-y-6", className), style: {
+    }, [columns, density, resolvedMinColumnWidth]);
+    return (_jsx("div", { ref: containerRef, className: cn("grid items-start", density === "compact"
+            ? "auto-rows-auto gap-x-4 gap-y-3"
+            : "auto-rows-fr gap-x-6 gap-y-6", className), style: {
             ...style,
             gridTemplateColumns: `repeat(${resolvedColumns}, minmax(0, 1fr))`,
         }, ...props, children: resolvedItems.map((item, index) => {

package/dist/layout.d.ts

@@ -2,10 +2,13 @@ import * as React from "react";
 import { type AvatarProfileProps } from "./avatar";
 import { type AvatarProfilePopoverProps } from "./avatar-profile-popover";
 import { type CountBadgeProps } from "./count-badge";
+import { type EmptyStateProps } from "./empty-state";
 import { type TabsProps } from "./tabs";
 export type DashboardRightPanelMode = "responsive" | "persistent";
 type SidebarContextType = {
     isCollapsed: boolean;
+    isContentCollapsed: boolean;
+    isContentVisible: boolean;
     toggle: () => void;
     collapse: () => void;
 };
@@ -60,10 +63,14 @@ export interface DashboardSidebarProps extends React.HTMLAttributes<HTMLElement>
     logo?: React.ReactNode | ((context: {
         isCollapsed: boolean;
     }) => React.ReactNode);
+    /** Replaces the default expand chevron while the sidebar is collapsed. */
+    collapsedToggleIcon?: React.ReactNode;
     search?: React.ReactNode | ((context: {
         isCollapsed: boolean;
     }) => React.ReactNode);
     navGroups?: DashboardSidebarNavGroup[];
+    /** Shows a divider between sidebar search and navigation. */
+    showNavigationDivider?: boolean;
     footerItems?: DashboardSidebarNavItem[];
     footer?: React.ReactNode | ((context: {
         isCollapsed: boolean;
@@ -123,7 +130,7 @@ export interface DashboardSidebarProfilePopoverProps extends Omit<DashboardSideb
 }
 declare function DashboardSidebarProfile({ isCollapsed, ...props }: DashboardSidebarProfileProps): import("react/jsx-runtime").JSX.Element;
 declare function DashboardSidebarProfilePopover({ align, alignOffset, avoidCollisions, children, collisionPadding, contentClassName, defaultOpen, modal, onOpenChange, open, side, sideOffset, triggerAriaLabel, triggerClassName, ...profileProps }: DashboardSidebarProfilePopoverProps): import("react/jsx-runtime").JSX.Element;
-declare function DashboardSidebar({ className, children, logo, search, navGroups, footerItems, footer, toggleAriaLabel, ...props }: DashboardSidebarProps): import("react/jsx-runtime").JSX.Element;
+declare function DashboardSidebar({ className, children, logo, collapsedToggleIcon, search, navGroups, showNavigationDivider, footerItems, footer, toggleAriaLabel, ...props }: DashboardSidebarProps): import("react/jsx-runtime").JSX.Element;
 export interface DashboardContentProps extends React.HTMLAttributes<HTMLElement> {
     hasSidebar?: boolean;
     rightPanel?: React.ReactNode;
@@ -142,16 +149,38 @@ export interface DashboardContentProps extends React.HTMLAttributes<HTMLElement>
     surfaceClassName?: string;
 }
 export interface DashboardRightPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** `plain` uses the base background used by Figma two-panel workflows. */
+    surface?: "default" | "plain";
+}
+export interface DashboardActionPanelProps extends Omit<DashboardRightPanelProps, "surface" | "title"> {
+    /** Stable identity that can be used by a future movable-panel controller. */
+    panelId?: string;
+    headerSpacing?: DashboardRightPanelHeaderProps["spacing"];
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+    badge?: React.ReactNode;
+    action?: React.ReactNode;
+    headerChildren?: React.ReactNode;
+}
+export interface DashboardActionPanelEmptyStateProps extends EmptyStateProps {
 }
 export interface DashboardRightPanelHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Fixed 16px card inset for composed message panels. */
+    spacing?: "default" | "comfortable";
     title: React.ReactNode;
     subtitle?: React.ReactNode;
     badge?: React.ReactNode;
     action?: React.ReactNode;
 }
 export interface DashboardRightPanelBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Inset used by the panel body. `spacious` matches wide two-panel workflows. */
+    spacing?: "default" | "comfortable" | "spacious";
+    /** Removes the body top inset so the first item follows the panel header without a second gap. */
+    topInset?: "default" | "none";
     /** Fixed footer content such as a composer or action bar. */
     footer?: React.ReactNode;
+    /** Adds a full-width divider and an independently padded footer surface. */
+    footerVariant?: "inline" | "separated";
     /** Class names applied to the scrollable body content when `footer` is provided. */
     contentClassName?: string;
     /** Class names applied to the fixed footer wrapper. */
@@ -164,11 +193,15 @@ export interface DashboardRightPanelSectionProps extends Omit<React.HTMLAttribut
     descriptionClassName?: string;
 }
 export interface DashboardRightPanelTabsProps extends TabsProps {
+    /** Inset around the segmented tab list. */
+    spacing?: "default" | "spacious";
 }
 declare function DashboardRightPanelSection({ className, title, description, titleClassName, descriptionClassName, children, ...props }: DashboardRightPanelSectionProps): import("react/jsx-runtime").JSX.Element;
-declare function DashboardRightPanelTabs({ className, listWrapperClassName, panelClassName, ...props }: DashboardRightPanelTabsProps): import("react/jsx-runtime").JSX.Element;
-declare function DashboardRightPanel({ className, ...props }: DashboardRightPanelProps): import("react/jsx-runtime").JSX.Element;
-declare function DashboardRightPanelHeader({ className, title, subtitle, badge, action, children, ...props }: DashboardRightPanelHeaderProps): import("react/jsx-runtime").JSX.Element;
-declare function DashboardRightPanelBody({ className, contentClassName, footer, footerClassName, children, ...props }: DashboardRightPanelBodyProps): import("react/jsx-runtime").JSX.Element;
+declare function DashboardRightPanelTabs({ className, listWrapperClassName, panelClassName, spacing, size, ...props }: DashboardRightPanelTabsProps): import("react/jsx-runtime").JSX.Element;
+declare const DashboardRightPanel: React.ForwardRefExoticComponent<DashboardRightPanelProps & React.RefAttributes<HTMLDivElement>>;
+declare function DashboardRightPanelHeader({ className, spacing, title, subtitle, badge, action, children, ...props }: DashboardRightPanelHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare const DashboardActionPanel: React.ForwardRefExoticComponent<DashboardActionPanelProps & React.RefAttributes<HTMLDivElement>>;
+declare function DashboardActionPanelEmptyState(props: DashboardActionPanelEmptyStateProps): import("react/jsx-runtime").JSX.Element;
+declare function DashboardRightPanelBody({ className, contentClassName, footer, footerVariant, footerClassName, spacing, topInset, children, ...props }: DashboardRightPanelBodyProps): import("react/jsx-runtime").JSX.Element;
 declare function DashboardContent({ className, hasSidebar, rightPanel, rightPanelClassName, rightPanelFallbackTrigger, rightPanelMode, rightPanelResizable, rightPanelCollapsible, rightPanelCollapsed, defaultRightPanelCollapsed, onRightPanelCollapsedChange, rightPanelDefaultWidth, rightPanelMinWidth, rightPanelMaxWidth, rightPanelAutoCollapseSidebarBreakpoint, surfaceClassName, children, ...props }: DashboardContentProps): import("react/jsx-runtime").JSX.Element;
-export { DashboardLayout, DashboardSidebar, DashboardSidebarProfile, DashboardSidebarProfilePopover, DashboardContent, DashboardRightPanel, DashboardRightPanelHeader, DashboardRightPanelBody, DashboardRightPanelSection, DashboardRightPanelTabs, };
+export { DashboardLayout, DashboardSidebar, DashboardSidebarProfile, DashboardSidebarProfilePopover, DashboardContent, DashboardActionPanel, DashboardActionPanelEmptyState, DashboardRightPanel, DashboardRightPanelHeader, DashboardRightPanelBody, DashboardRightPanelSection, DashboardRightPanelTabs, };