@neasg/design-system 0.4.8 → 0.4.10

package/dist/file-upload-status-toast.js

@@ -0,0 +1,136 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, CheckCircle2, Paperclip, Trash2, X, } from "lucide-react";
+import { Button } from "./button";
+import { cn } from "./lib/utils";
+import { Progress } from "./progress";
+import { toast } from "./toaster";
+import { Typography } from "./typography";
+const DEFAULT_TOAST_ID = "file-upload-status";
+function formatUploadFileSize(size) {
+    if (typeof size === "string")
+        return size;
+    if (typeof size !== "number")
+        return "";
+    if (size === 0)
+        return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.min(Math.floor(Math.log(size) / Math.log(k)), sizes.length - 1);
+    return `${parseFloat((size / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+function getProgress(uploadProgress, fileName) {
+    if (!uploadProgress)
+        return undefined;
+    if (Array.isArray(uploadProgress)) {
+        return uploadProgress.find((progress) => progress.name === fileName);
+    }
+    return uploadProgress.get(fileName);
+}
+function normalizeFiles({ files, uploadProgress, }) {
+    return files.map((file) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const progress = getProgress(uploadProgress, file.name);
+        const result = (_a = progress === null || progress === void 0 ? void 0 : progress.result) !== null && _a !== void 0 ? _a : file.result;
+        return {
+            ...file,
+            progress: (_c = (_b = progress === null || progress === void 0 ? void 0 : progress.progress) !== null && _b !== void 0 ? _b : file.progress) !== null && _c !== void 0 ? _c : 0,
+            status: (_e = (_d = progress === null || progress === void 0 ? void 0 : progress.status) !== null && _d !== void 0 ? _d : file.status) !== null && _e !== void 0 ? _e : "pending",
+            error: (_f = progress === null || progress === void 0 ? void 0 : progress.error) !== null && _f !== void 0 ? _f : file.error,
+            result,
+            size: (_g = result === null || result === void 0 ? void 0 : result.size) !== null && _g !== void 0 ? _g : file.size,
+            type: (_h = result === null || result === void 0 ? void 0 : result.type) !== null && _h !== void 0 ? _h : file.type,
+        };
+    });
+}
+function pluralize(count, singular, plural = `${singular}s`) {
+    return `${count} ${count === 1 ? singular : plural}`;
+}
+function getDefaultTitle(files) {
+    const failed = files.filter((file) => file.status === "error").length;
+    const uploading = files.filter((file) => file.status === "pending" || file.status === "uploading").length;
+    const complete = files.filter((file) => file.status === "complete").length;
+    if (failed > 0)
+        return `${pluralize(failed, "file")} failed to upload`;
+    if (uploading > 0)
+        return `Uploading ${pluralize(files.length, "file")}`;
+    if (complete === files.length && files.length > 0) {
+        return `Uploaded ${pluralize(files.length, "file")}`;
+    }
+    return "File upload status";
+}
+function getDefaultDescription(files) {
+    const complete = files.filter((file) => file.status === "complete").length;
+    const failed = files.filter((file) => file.status === "error").length;
+    const uploading = files.filter((file) => file.status === "uploading").length;
+    const pending = files.filter((file) => file.status === "pending").length;
+    const parts = [
+        complete > 0 ? `${complete} complete` : null,
+        uploading > 0 ? `${uploading} uploading` : null,
+        pending > 0 ? `${pending} pending` : null,
+        failed > 0 ? `${failed} failed` : null,
+    ].filter(Boolean);
+    return parts.length > 0 ? parts.join(" / ") : undefined;
+}
+function getStatusIcon(status) {
+    if (status === "complete") {
+        return (_jsx(CheckCircle2, { "aria-hidden": "true", className: "h-4 w-4 text-[hsl(var(--status-success-foreground))]" }));
+    }
+    if (status === "error") {
+        return (_jsx(AlertCircle, { "aria-hidden": "true", className: "h-4 w-4 text-[hsl(var(--status-destructive-foreground))]" }));
+    }
+    return (_jsx(Paperclip, { "aria-hidden": "true", className: "h-4 w-4 text-muted-foreground" }));
+}
+function FileUploadStatusRow({ file, onCancel, onRemove, }) {
+    var _a;
+    const isUploading = file.status === "uploading";
+    const isPending = file.status === "pending";
+    const isComplete = file.status === "complete";
+    const isError = file.status === "error";
+    const sizeLabel = formatUploadFileSize(file.size);
+    const canCancel = (isUploading || isPending) && onCancel;
+    const canRemove = (isComplete || isError) && onRemove;
+    const action = canCancel ? "cancel" : canRemove ? "remove" : null;
+    return (_jsxs("li", { className: cn("rounded-control border bg-background px-2.5 py-2", isError && "border-destructive/80 bg-destructive/5"), children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center", children: getStatusIcon(file.status) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(Typography, { as: "p", variant: "label", className: cn("truncate", isComplete && "text-[hsl(var(--status-success-foreground))]"), title: file.name, children: file.name }), isError ? (_jsx(Typography, { as: "p", variant: "bodySm", className: "mt-0.5 text-destructive", children: (_a = file.error) !== null && _a !== void 0 ? _a : "Upload failed" })) : null] }), sizeLabel ? (_jsx(Typography, { as: "span", variant: "bodySm", className: "shrink-0 text-muted-foreground", children: sizeLabel })) : null, action ? (_jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", className: "h-7 w-7 shrink-0", onClick: () => {
+                            if (action === "cancel") {
+                                onCancel === null || onCancel === void 0 ? void 0 : onCancel(file);
+                            }
+                            else {
+                                onRemove === null || onRemove === void 0 ? void 0 : onRemove(file);
+                            }
+                        }, "aria-label": action === "cancel"
+                            ? `Cancel upload for ${file.name}`
+                            : `Remove ${file.name}`, children: action === "cancel" ? (_jsx(X, { "aria-hidden": "true" })) : (_jsx(Trash2, { "aria-hidden": "true" })) })) : null] }), (isUploading || isPending) ? (_jsx(Progress, { className: "mt-2", value: file.progress, size: "sm", label: `Uploading ${file.name}` })) : null] }));
+}
+export function FileUploadStatusToast({ files, uploadProgress, title, description, className, onCancel, onRemove, onDismiss, }) {
+    const normalizedFiles = normalizeFiles({ files, uploadProgress });
+    const resolvedTitle = title !== null && title !== void 0 ? title : getDefaultTitle(normalizedFiles);
+    const resolvedDescription = description !== null && description !== void 0 ? description : getDefaultDescription(normalizedFiles);
+    return (_jsxs("section", { className: cn("w-[min(40rem,calc(100vw-2rem))] overflow-hidden rounded-overlay border border-border bg-background text-foreground shadow-overlay", className), "aria-label": "File upload status", children: [_jsxs("div", { className: "flex items-start gap-3 border-b px-3 py-2.5", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(Typography, { as: "p", variant: "label", className: "truncate", children: resolvedTitle }), resolvedDescription ? (_jsx(Typography, { as: "p", variant: "caption", className: "mt-0.5", children: resolvedDescription })) : null] }), onDismiss ? (_jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", className: "h-7 w-7 shrink-0", onClick: onDismiss, "aria-label": "Dismiss file upload status", children: _jsx(X, { "aria-hidden": "true" }) })) : null] }), _jsx("ul", { className: "max-h-80 space-y-2 overflow-y-auto p-2.5", children: normalizedFiles.map((file, index) => {
+                    var _a;
+                    return (_jsx(FileUploadStatusRow, { file: file, onCancel: onCancel, onRemove: onRemove }, `${file.name}-${(_a = file.size) !== null && _a !== void 0 ? _a : "unknown"}-${index}`));
+                }) })] }));
+}
+export function showFileUploadStatusToast({ id = DEFAULT_TOAST_ID, duration = Number.POSITIVE_INFINITY, dismissible = true, onDismiss, ...props }) {
+    if (props.files.length === 0) {
+        toast.dismiss(id);
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+        return id;
+    }
+    return toast.custom((toastId) => (_jsx(FileUploadStatusToast, { ...props, onDismiss: dismissible
+            ? () => {
+                toast.dismiss(toastId);
+                onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+            }
+            : undefined })), {
+        id,
+        duration,
+        dismissible,
+        onDismiss,
+        classNames: {
+            toast: "!block !rounded-none !border-0 !bg-transparent !p-0 !pr-0 !shadow-none",
+            content: "!block !min-w-0 !flex-none !gap-0",
+            title: "!block !font-normal !leading-normal !text-foreground",
+        },
+    });
+}

package/dist/file-upload.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useCallback, useState } from "react";
-import { File, ImageIcon } from "lucide-react";
+import { File as FileIcon, ImageIcon } from "lucide-react";
 import { CheckIcon } from "./animated-icons/check";
 import { FileTextIcon } from "./animated-icons/file-text";
 import { UploadIcon } from "./animated-icons/upload";
@@ -10,6 +10,7 @@ import { XIcon } from "./animated-icons/x";
 import { Button } from "./button";
 import { cn } from "./lib/utils";
 import { Progress } from "./progress";
+import { Typography } from "./typography";
 const DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024;
 function formatFileSize(bytes) {
     if (bytes === 0)
@@ -21,12 +22,12 @@ function formatFileSize(bytes) {
 }
 function getFileIcon(file) {
     if (file.type.startsWith("image/")) {
-        return _jsx(ImageIcon, { className: "h-4 w-4 text-blue-500" });
+        return _jsx(ImageIcon, { className: "h-4 w-4 text-muted-foreground" });
     }
     if (file.type === "application/pdf") {
-        return _jsx(FileTextIcon, { className: "text-red-500", size: 16 });
+        return _jsx(FileTextIcon, { className: "text-muted-foreground", size: 16 });
     }
-    return _jsx(File, { className: "h-4 w-4 text-muted-foreground" });
+    return _jsx(FileIcon, { className: "h-4 w-4 text-muted-foreground" });
 }
 export function FileUpload({ accept, maxSize = DEFAULT_MAX_FILE_SIZE, maxFiles = 10, onFilesChange, value = [], disabled = false, className, uploadProgress, }) {
     const [isDragOver, setIsDragOver] = useState(false);
@@ -89,15 +90,15 @@ export function FileUpload({ accept, maxSize = DEFAULT_MAX_FILE_SIZE, maxFiles =
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
     }, []);
     const fileInput = (_jsx("input", { ref: inputRef, type: "file", accept: accept, multiple: maxFiles > 1, onChange: handleInputChange, disabled: disabled, className: "hidden" }));
-    return (_jsxs("div", { className: cn("space-y-3", className), children: [fileInput, _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onClick: openFilePicker, className: cn("relative flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-dashed p-6 transition-colors", isDragOver && !disabled
+    return (_jsxs("div", { className: cn("space-y-2", className), children: [fileInput, _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onClick: openFilePicker, className: cn("relative flex cursor-pointer flex-col items-center justify-center gap-1.5 rounded-surface border border-dashed p-4 transition-colors", isDragOver && !disabled
                     ? "border-primary bg-primary/5"
-                    : "border-muted-foreground/25 hover:border-muted-foreground/50", disabled && "cursor-not-allowed opacity-50"), children: [_jsx(UploadIcon, { className: cn(isDragOver ? "text-primary" : "text-muted-foreground"), size: 32 }), _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-sm font-medium", children: isDragOver ? "Drop files here" : "Drag & drop files here" }), _jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: ["or click to browse (max ", formatFileSize(maxSize), " each)"] })] })] }), error ? _jsx("p", { className: "text-sm text-destructive", children: error }) : null, value.length > 0 ? (_jsx("div", { className: "space-y-2", children: value.map((file, index) => {
+                    : "border-muted-foreground/25 hover:border-muted-foreground/50", disabled && "cursor-not-allowed opacity-50"), children: [_jsx(UploadIcon, { className: cn(isDragOver ? "text-primary" : "text-muted-foreground"), size: 28 }), _jsxs("div", { className: "text-center", children: [_jsx(Typography, { as: "p", variant: "label", children: isDragOver ? "Drop files here" : "Drag & drop files here" }), _jsxs(Typography, { as: "p", variant: "caption", className: "mt-1", children: ["or click to browse (max ", formatFileSize(maxSize), " each)"] })] })] }), error ? (_jsx(Typography, { as: "p", variant: "bodySm", className: "text-destructive", children: error })) : null, value.length > 0 ? (_jsx("div", { className: "space-y-2", children: value.map((file, index) => {
                     var _a;
                     const progress = uploadProgress === null || uploadProgress === void 0 ? void 0 : uploadProgress.get(file.name);
                     const isUploading = (progress === null || progress === void 0 ? void 0 : progress.status) === "uploading";
                     const isComplete = (progress === null || progress === void 0 ? void 0 : progress.status) === "complete";
                     const isError = (progress === null || progress === void 0 ? void 0 : progress.status) === "error";
-                    return (_jsxs("div", { className: "rounded-md border bg-muted/30 px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-3", children: [getFileIcon(file), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium", children: file.name }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [formatFileSize(file.size), isUploading && ` • ${progress === null || progress === void 0 ? void 0 : progress.progress}%`, isComplete && " • Complete", isError && ` • ${(progress === null || progress === void 0 ? void 0 : progress.error) || "Error"}`] })] }), isComplete ? (_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center text-green-500", children: _jsx(CheckIcon, { size: 16 }) })) : (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-6 w-6 shrink-0", onClick: (e) => {
+                    return (_jsxs("div", { className: "rounded-control border bg-muted/30 px-2.5 py-1.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [getFileIcon(file), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(Typography, { as: "p", variant: "label", className: "truncate", children: file.name }), _jsxs(Typography, { as: "p", variant: "caption", children: [formatFileSize(file.size), isUploading && ` • ${progress === null || progress === void 0 ? void 0 : progress.progress}%`, isComplete && " • Complete", isError && ` • ${(progress === null || progress === void 0 ? void 0 : progress.error) || "Error"}`] })] }), isComplete ? (_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center text-[hsl(var(--status-success-foreground))]", children: _jsx(CheckIcon, { size: 16 }) })) : (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-6 w-6 shrink-0", onClick: (e) => {
                                             e.stopPropagation();
                                             removeFile(index);
                                         }, disabled: disabled || isUploading, "aria-label": `Remove ${file.name}`, children: _jsx(XIcon, { size: 16 }) }))] }), (isUploading ||

package/dist/filter-popover.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { type PopoverProps } from "./popover";
+export interface FilterPopoverOption {
+    id: string;
+    label: React.ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+    searchValue?: string;
+    ariaLabel?: string;
+    onSelect?: () => void;
+}
+export interface FilterPopoverGroup {
+    id: string;
+    label: React.ReactNode;
+    options: FilterPopoverOption[];
+    selectedCount?: number;
+    selectionLabel?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    emptyLabel?: React.ReactNode;
+    ariaLabel?: string;
+}
+export interface FilterPopoverProps extends Pick<PopoverProps, "align" | "defaultOpen" | "modal" | "onOpenChange" | "open" | "side"> {
+    groups: FilterPopoverGroup[];
+    selectedCount?: number;
+    trigger?: React.ReactElement;
+    triggerLabel?: React.ReactNode;
+    groupListLabel?: React.ReactNode;
+    resetLabel?: React.ReactNode;
+    emptyLabel?: React.ReactNode;
+    onReset?: () => void;
+    contentClassName?: string;
+    maxHeight?: string;
+}
+declare function getFilterSelectionLabel(count: number): string;
+declare function FilterPopover({ align, contentClassName, defaultOpen, emptyLabel, groupListLabel, groups, maxHeight, modal, onOpenChange, onReset, open, resetLabel, selectedCount, side, trigger, triggerLabel, }: FilterPopoverProps): import("react/jsx-runtime").JSX.Element;
+export { FilterPopover, getFilterSelectionLabel };

package/dist/filter-popover.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronLeft, ChevronRight, SlidersHorizontal } from "lucide-react";
+import { Button } from "./button";
+import { CountBadge } from "./count-badge";
+import { cn } from "./lib/utils";
+import { Popover } from "./popover";
+import { PopoverMenuFooter, PopoverMenuFooterAction, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuItem, PopoverMenuScrollArea, PopoverMenuSearch, PopoverMenuSection, PopoverMenuView, } from "./popover-menu";
+import { Typography } from "./typography";
+function getText(value) {
+    if (typeof value === "string" || typeof value === "number") {
+        return String(value);
+    }
+    return undefined;
+}
+function getOptionSearchValue(option) {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = option.searchValue) !== null && _a !== void 0 ? _a : option.ariaLabel) !== null && _b !== void 0 ? _b : getText(option.label)) !== null && _c !== void 0 ? _c : option.id;
+}
+function getGroupLabel(group) {
+    var _a, _b;
+    return (_b = (_a = group.ariaLabel) !== null && _a !== void 0 ? _a : getText(group.label)) !== null && _b !== void 0 ? _b : group.id;
+}
+function getGroupSelectedCount(group) {
+    var _a;
+    return ((_a = group.selectedCount) !== null && _a !== void 0 ? _a : group.options.filter((option) => option.selected).length);
+}
+function getFilterSelectionLabel(count) {
+    if (count === 0) {
+        return "Any";
+    }
+    return count === 1 ? "1 selected" : `${count} selected`;
+}
+function FilterPopover({ align = "start", contentClassName, defaultOpen, emptyLabel = "No options found.", groupListLabel = "Filter by", groups, maxHeight = "max-h-80", modal, onOpenChange, onReset, open, resetLabel = "Reset filters", selectedCount, side, trigger, triggerLabel = "Filters", }) {
+    var _a, _b, _c, _d, _e;
+    const [activeGroupId, setActiveGroupId] = React.useState(null);
+    const [transitionDirection, setTransitionDirection] = React.useState("forward");
+    const [query, setQuery] = React.useState("");
+    const activeGroup = (_a = groups.find((group) => group.id === activeGroupId)) !== null && _a !== void 0 ? _a : null;
+    const resolvedSelectedCount = selectedCount !== null && selectedCount !== void 0 ? selectedCount : groups.reduce((total, group) => total + getGroupSelectedCount(group), 0);
+    const normalizedQuery = query.trim().toLowerCase();
+    const filteredOptions = activeGroup && normalizedQuery
+        ? activeGroup.options.filter((option) => getOptionSearchValue(option).toLowerCase().includes(normalizedQuery))
+        : (_b = activeGroup === null || activeGroup === void 0 ? void 0 : activeGroup.options) !== null && _b !== void 0 ? _b : [];
+    React.useEffect(() => {
+        setQuery("");
+    }, [activeGroupId]);
+    React.useEffect(() => {
+        if (!activeGroupId) {
+            return;
+        }
+        if (!groups.some((group) => group.id === activeGroupId)) {
+            setActiveGroupId(null);
+        }
+    }, [activeGroupId, groups]);
+    const showGroup = (groupId) => {
+        setTransitionDirection("forward");
+        setActiveGroupId(groupId);
+    };
+    const showFilterGroups = () => {
+        setTransitionDirection("backward");
+        setActiveGroupId(null);
+    };
+    const defaultTrigger = (_jsxs(Button, { type: "button", variant: "outline", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), triggerLabel, resolvedSelectedCount > 0 ? (_jsx(CountBadge, { count: resolvedSelectedCount, size: "sm" })) : null] }));
+    return (_jsxs(Popover, { align: align, contentClassName: cn("w-[360px]", contentClassName), defaultOpen: defaultOpen, modal: modal, onOpenChange: onOpenChange, open: open, side: side, surface: "menu", trigger: trigger !== null && trigger !== void 0 ? trigger : defaultTrigger, children: [_jsx(PopoverMenuView, { className: "-mx-1 -mt-1 px-1 pt-1", direction: transitionDirection, viewKey: activeGroup ? `group-${activeGroup.id}` : "filter-groups", children: activeGroup ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "-mx-1 -mt-1 border-b p-1", children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "w-full justify-start", onClick: showFilterGroups, children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), activeGroup.label] }) }), activeGroup.searchable ? (_jsx(PopoverMenuSearch, { value: query, onChange: (event) => setQuery(event.target.value), placeholder: (_c = activeGroup.searchPlaceholder) !== null && _c !== void 0 ? _c : `Search ${getGroupLabel(activeGroup).toLowerCase()}...`, "aria-label": (_d = activeGroup.searchPlaceholder) !== null && _d !== void 0 ? _d : `Search ${getGroupLabel(activeGroup).toLowerCase()}` })) : null, _jsx(PopoverMenuScrollArea, { maxHeight: maxHeight, children: _jsx(PopoverMenuSection, { children: filteredOptions.length ? (filteredOptions.map((option) => (_jsx(PopoverMenuItem, { active: option.selected, "aria-label": option.ariaLabel, "aria-pressed": option.selected, disabled: option.disabled, onClick: option.onSelect, children: option.label }, option.id)))) : (_jsx(Typography, { as: "p", variant: "caption", className: "px-2 py-2", children: (_e = activeGroup.emptyLabel) !== null && _e !== void 0 ? _e : emptyLabel })) }) })] })) : (_jsx(PopoverMenuScrollArea, { maxHeight: maxHeight, children: _jsxs(PopoverMenuGroup, { children: [_jsx(PopoverMenuGroupLabel, { children: groupListLabel }), _jsx(PopoverMenuSection, { children: groups.map((group) => {
+                                    var _a;
+                                    const groupSelectedCount = getGroupSelectedCount(group);
+                                    const selectionLabel = (_a = group.selectionLabel) !== null && _a !== void 0 ? _a : getFilterSelectionLabel(groupSelectedCount);
+                                    return (_jsxs(PopoverMenuItem, { "aria-label": `${getGroupLabel(group)}, ${selectionLabel}`, onClick: () => showGroup(group.id), children: [_jsx(Typography, { as: "span", variant: "bodySm", className: "min-w-0 flex-1 truncate text-left", children: group.label }), groupSelectedCount > 0 ? (_jsx(CountBadge, { count: groupSelectedCount, size: "sm" })) : null, _jsx(ChevronRight, { className: "h-4 w-4 shrink-0 text-muted-foreground" })] }, group.id));
+                                }) })] }) })) }), onReset ? (_jsx(PopoverMenuFooter, { children: _jsx(PopoverMenuFooterAction, { onClick: onReset, children: resetLabel }) })) : null] }));
+}
+export { FilterPopover, getFilterSelectionLabel };

package/dist/filter-toggle.js

@@ -2,7 +2,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "./lib/utils";
-const filterToggleVariants = cva("inline-flex cursor-pointer select-none items-center justify-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+const filterToggleVariants = cva("inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-control border px-2.5 py-1 text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", {
     variants: {
         variant: {
             default: "",
@@ -18,6 +18,6 @@ const filterToggleVariants = cva("inline-flex cursor-pointer select-none items-c
         selected: false,
     },
 });
-const FilterToggle = React.forwardRef(({ className, variant, selected = false, icon, children, ...props }, ref) => (_jsxs("button", { ref: ref, className: cn(filterToggleVariants({ variant, selected, className })), ...props, children: [icon, children] })));
+const FilterToggle = React.forwardRef(({ className, variant, selected = false, icon, children, type = "button", ...props }, ref) => (_jsxs("button", { ref: ref, type: type, className: cn(filterToggleVariants({ variant, selected, className })), ...props, children: [icon, children] })));
 FilterToggle.displayName = "FilterToggle";
 export { FilterToggle, filterToggleVariants };

package/dist/index.d.ts

@@ -1,25 +1,37 @@
 export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, } from "./avatar";
-export type { AvatarProps, AvatarProfileProps, AvatarRootProps, } from "./avatar";
+export type { AvatarProps, AvatarSize, AvatarProfileProps, AvatarRootProps, } from "./avatar";
 export * from "./animated-icons";
-export { Alert, alertVariants } from "./alert";
-export type { AlertProps } from "./alert";
+export { Alert, AlertAction, AlertConsent, alertVariants } from "./alert";
+export type { AlertActionProps, AlertConsentProps, AlertProps } from "./alert";
 export { Badge, badgeVariants } from "./badge";
-export { Card } from "./card";
-export type { CardProps } from "./card";
+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 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 { RoutingTimeline } from "./routing-timeline";
+export type { RoutingTimelineItem, RoutingTimelineItemKind, RoutingTimelineProps, } from "./routing-timeline";
+export { RichTextEditor, formatFileSize, replaceTemplateVariables, sanitizeRichTextHtml, } from "./rich-text-editor";
+export type { AttachmentFile, RichTextEditorColor, RichTextEditorProps, RichTextEditorSendAction, RichTextEditorSendMetadata, RichTextEditorTemplate, TemplateContext, } from "./rich-text-editor";
 export { Calendar, CalendarDayButton } from "./calendar";
 export { Checkbox } from "./checkbox";
 export type { CheckboxProps } from "./checkbox";
 export { Switch } from "./switch";
 export type { SwitchProps } from "./switch";
+export { ThemeSwitcher } from "./theme-switcher";
+export type { ThemeSwitcherProps } from "./theme-switcher";
 export { DateInput } from "./date-input";
-export type { DateInputProps } from "./date-input";
+export type { DateInputProps, DateInputRangeProps, DateInputSingleProps, DateRangeInputValue, } from "./date-input";
 export { CountBadge } from "./count-badge";
 export type { CountBadgeProps } from "./count-badge";
 export { EmptyState } from "./empty-state";
 export type { EmptyStateProps } from "./empty-state";
 export { EditableTable } from "./editable-table";
 export type { EditableTableColumn, EditableTableProps, EditableTableRowActionContext, } from "./editable-table";
+export { EditButton } from "./edit-button";
+export type { EditButtonProps } from "./edit-button";
 export { EmailInput } from "./email-input";
 export type { EmailInputProps, EmailInputValidator, EmailInputValidatorHelpers, } from "./email-input";
 export { Input } from "./input";
@@ -42,22 +54,36 @@ export { BackButton } from "./back-button";
 export type { BackButtonProps } from "./back-button";
 export { Button, buttonVariants } from "./button";
 export type { ButtonProps } from "./button";
+export { DropdownButton } from "./dropdown-button";
+export type { DropdownButtonProps } from "./dropdown-button";
+export { CloseButton } from "./close-button";
+export type { CloseButtonProps } from "./close-button";
 export { Link, linkVariants } from "./link";
 export type { LinkProps } from "./link";
 export { Dialog } from "./dialog";
 export type { DialogAction, DialogProps } from "./dialog";
 export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, } from "./command";
-export { CommandSearch, type CommandSearchFilter, type CommandSearchItem, type CommandSearchProps, type CommandSearchSection, } from "./command-search";
+export { CommandSearch, type CommandSearchFilter, type CommandSearchItem, type CommandSearchProps, type CommandSearchSection, type CommandSearchShowAllResultsLabel, } from "./command-search";
 export { FileUpload } from "./file-upload";
 export type { FileUploadProps } from "./file-upload";
+export { FileUploadStatusToast, showFileUploadStatusToast, } from "./file-upload-status-toast";
+export type { FileUploadStatusToastFile, FileUploadStatusToastProps, ShowFileUploadStatusToastOptions, } from "./file-upload-status-toast";
+export { FilterPopover, getFilterSelectionLabel } from "./filter-popover";
+export type { FilterPopoverGroup, FilterPopoverOption, FilterPopoverProps, } from "./filter-popover";
 export { Progress } from "./progress";
 export type { ProgressProps } from "./progress";
+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 type { TaskModeShellProps } from "./task-mode-shell";
 export { useFileUpload } from "./use-file-upload";
 export type { FileUploadProgress, FileUploadResult, FileUploadStatus, UseFileUploadOptions, UseFileUploadReturn, } from "./use-file-upload";
 export { Popover } from "./popover";
 export type { PopoverProps } from "./popover";
-export { PopoverMenuContent, PopoverMenuHeader, PopoverMenuSection, PopoverMenuItem, PopoverMenuDivider, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuSearch, PopoverMenuScrollArea, } from "./popover-menu";
-export type { PopoverMenuContentProps, PopoverMenuHeaderProps, PopoverMenuSectionProps, PopoverMenuItemProps, PopoverMenuDividerProps, PopoverMenuGroupProps, PopoverMenuGroupLabelProps, PopoverMenuSearchProps, PopoverMenuScrollAreaProps, } from "./popover-menu";
+export { PopoverMenuContent, PopoverMenuCheckboxItem, PopoverMenuHeader, PopoverMenuSection, PopoverMenuItem, PopoverMenuDivider, PopoverMenuFooter, PopoverMenuFooterAction, PopoverMenuFooterMeta, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuSearch, PopoverMenuScrollArea, PopoverMenuView, } from "./popover-menu";
+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 { SectionNav } from "./section-nav";
@@ -74,12 +100,14 @@ export { useViewportThreshold } from "./use-viewport-threshold";
 export type { UseViewportThresholdOptions, UseViewportThresholdReturn, } from "./use-viewport-threshold";
 export { Textarea } from "./textarea";
 export type { TextareaProps } from "./textarea";
-export { DraggableTabs, type DraggableTabItem, type DraggableTabsProps, } from "./draggable-tabs";
+export { DraggableTabs, type DraggableTabBadge, type DraggableTabItem, type DraggableTabsProps, } from "./draggable-tabs";
 export { Drawer, } from "./drawer";
 export type { DrawerAction, DrawerProps, DrawerSide } from "./drawer";
-export { DashboardLayout, DashboardSidebar, useSidebar, } from "./layout";
-export type { DashboardLayoutProps, DashboardSidebarNavDropdownItem, DashboardSidebarNavGroup, DashboardSidebarNavItem, DashboardSidebarNavLinkItem, } from "./layout";
+export { DashboardContent, DashboardLayout, DashboardRightPanel, DashboardRightPanelBody, DashboardRightPanelHeader, DashboardRightPanelSection, DashboardRightPanelTabs, DashboardSidebar, DashboardSidebarProfile, SidebarProvider, useSidebar, } from "./layout";
+export type { DashboardContentProps, DashboardLayoutProps, DashboardRightPanelBodyProps, DashboardRightPanelHeaderProps, DashboardRightPanelMode, DashboardRightPanelProps, DashboardRightPanelSectionProps, DashboardRightPanelTabsProps, DashboardSidebarNavDropdownItem, DashboardSidebarNavGroup, DashboardSidebarNavItem, DashboardSidebarNavLinkItem, DashboardSidebarProfileProps, } from "./layout";
 export { PageHeader } from "./page-header";
+export { WorkspaceHeader } from "./workspace-header";
+export type { WorkspaceHeaderProps } from "./workspace-header";
 export { PageSection, PageSectionGroup } from "./page-section";
 export type { PageSectionGroupProps, PageSectionProps } from "./page-section";
 export { Typography, typographyVariants } from "./typography";
@@ -90,11 +118,13 @@ export { Pagination } from "./pagination";
 export type { PaginationProps } from "./pagination";
 export { TableToolbar } from "./table-toolbar";
 export type { TableToolbarProps } from "./table-toolbar";
+export { TableColumnVisibilityMenu } from "./table-column-visibility";
+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, TableProps, TableSortDirection, TableSortingProps, TableSkeletonConfig, TableRowSkeletonProps, } from "./table";
-export { Tabs, TabsRoot, TabWithDropdown, type TabsItem, type TabsProps, TabsList, TabsTrigger, TabsContent, type TabWithDropdownProps, useTabsContext, type TabDropdownSection, } from "./tabs";
+export type { TableColumn, TableProps, 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";
 export type { ToasterProps } from "./toaster";
@@ -110,3 +140,4 @@ export { Collapsible, CollapsibleSection } from "./collapsible";
 export type { CollapsibleProps } from "./collapsible";
 export { cn } from "./lib/utils";
 export { parseDateTime, formatDateTime } from "./lib/date-utils";
+export type { ParseDateTimeOptions } from "./lib/date-utils";

package/dist/index.js

@@ -1,15 +1,21 @@
 export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, } from "./avatar";
 export * from "./animated-icons";
-export { Alert, alertVariants } from "./alert";
+export { Alert, AlertAction, AlertConsent, alertVariants } from "./alert";
 export { Badge, badgeVariants } from "./badge";
-export { Card } from "./card";
+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 { RoutingTimeline } from "./routing-timeline";
+export { RichTextEditor, formatFileSize, replaceTemplateVariables, sanitizeRichTextHtml, } from "./rich-text-editor";
 export { Calendar, CalendarDayButton } from "./calendar";
 export { Checkbox } from "./checkbox";
 export { Switch } from "./switch";
+export { ThemeSwitcher } from "./theme-switcher";
 export { DateInput } from "./date-input";
 export { CountBadge } from "./count-badge";
 export { EmptyState } from "./empty-state";
 export { EditableTable } from "./editable-table";
+export { EditButton } from "./edit-button";
 export { EmailInput } from "./email-input";
 export { Input } from "./input";
 export { Select } from "./select";
@@ -21,15 +27,22 @@ export { LabelValueGrid } from "./label-value-grid";
 export { Breadcrumb, BreadcrumbNav, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, } from "./breadcrumb";
 export { BackButton } from "./back-button";
 export { Button, buttonVariants } from "./button";
+export { DropdownButton } from "./dropdown-button";
+export { CloseButton } from "./close-button";
 export { Link, linkVariants } from "./link";
 export { Dialog } from "./dialog";
 export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, } from "./command";
 export { CommandSearch, } from "./command-search";
 export { FileUpload } from "./file-upload";
+export { FileUploadStatusToast, showFileUploadStatusToast, } from "./file-upload-status-toast";
+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 { useFileUpload } from "./use-file-upload";
 export { Popover } from "./popover";
-export { PopoverMenuContent, PopoverMenuHeader, PopoverMenuSection, PopoverMenuItem, PopoverMenuDivider, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuSearch, PopoverMenuScrollArea, } from "./popover-menu";
+export { PopoverMenuContent, PopoverMenuCheckboxItem, PopoverMenuHeader, PopoverMenuSection, PopoverMenuItem, PopoverMenuDivider, PopoverMenuFooter, PopoverMenuFooterAction, PopoverMenuFooterMeta, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuSearch, PopoverMenuScrollArea, PopoverMenuView, } from "./popover-menu";
 export { SearchInput } from "./search-input";
 export { SectionNav } from "./section-nav";
 export { GovtMasthead } from "./govt-masthead";
@@ -40,14 +53,16 @@ export { useViewportThreshold } from "./use-viewport-threshold";
 export { Textarea } from "./textarea";
 export { DraggableTabs, } from "./draggable-tabs";
 export { Drawer, } from "./drawer";
-export { DashboardLayout, DashboardSidebar, useSidebar, } from "./layout";
+export { DashboardContent, DashboardLayout, DashboardRightPanel, DashboardRightPanelBody, DashboardRightPanelHeader, DashboardRightPanelSection, DashboardRightPanelTabs, DashboardSidebar, DashboardSidebarProfile, SidebarProvider, useSidebar, } from "./layout";
 export { PageHeader } from "./page-header";
+export { WorkspaceHeader } from "./workspace-header";
 export { PageSection, PageSectionGroup } from "./page-section";
 export { Typography, typographyVariants } from "./typography";
 export { neaPalette, semanticColorTokens, typographyTokens, radiusTokens, spacingTokens, layoutTokens, } from "./theme";
 export { neaDesignSystemContent, neaTailwindPreset, } from "./tailwind-preset";
 export { Pagination } from "./pagination";
 export { TableToolbar } from "./table-toolbar";
+export { TableColumnVisibilityMenu } from "./table-column-visibility";
 export { useTableSort } from "./use-table-sort";
 export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableRowSkeleton, TABLE_SKELETON_PRESETS, } from "./table";
 export { Tabs, TabsRoot, TabWithDropdown, TabsList, TabsTrigger, TabsContent, useTabsContext, } from "./tabs";

package/dist/input-control.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
-declare const inputControlClassName = "h-control w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-sm transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-8 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20";
+declare const inputControlPaddingClassName = "px-3 py-2";
+declare const inputControlClassName = "h-control w-full min-w-0 rounded-control border border-input bg-transparent px-3 py-2 text-sm transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20";
 declare const InputControl: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export { InputControl, inputControlClassName };
+export { InputControl, inputControlClassName, inputControlPaddingClassName };

package/dist/input-control.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "./lib/utils";
-const inputControlClassName = "h-control w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-sm transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-8 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20";
+const inputControlPaddingClassName = "px-3 py-2";
+const inputControlClassName = `h-control w-full min-w-0 rounded-control border border-input bg-transparent ${inputControlPaddingClassName} text-sm transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20`;
 const InputControl = React.forwardRef(({ className, type = "text", ...props }, ref) => (_jsx("input", { ref: ref, type: type, "data-slot": "input", className: cn(inputControlClassName, className), ...props })));
 InputControl.displayName = "InputControl";
-export { InputControl, inputControlClassName };
+export { InputControl, inputControlClassName, inputControlPaddingClassName };

package/dist/label-value-grid.d.ts

@@ -5,11 +5,13 @@ export interface LabelValueGridItem extends LabelValueProps {
 }
 export interface LabelValueGridProps extends React.HTMLAttributes<HTMLDivElement> {
     items: LabelValueGridItem[];
-    columns?: 1 | 2 | 3 | 4;
+    columns?: 1 | 2 | 3 | 4 | 5 | 6;
+    density?: "default" | "compact";
     itemClassName?: string;
     minColumnWidth?: number;
+    hideIfEmpty?: boolean;
     loading?: boolean;
     loadingItems?: number;
 }
-declare function LabelValueGrid({ items, columns, className, itemClassName, minColumnWidth, loading, loadingItems, style, ...props }: LabelValueGridProps): import("react/jsx-runtime").JSX.Element;
+declare function LabelValueGrid({ items, columns, density, className, itemClassName, minColumnWidth, hideIfEmpty, loading, loadingItems, style, ...props }: LabelValueGridProps): import("react/jsx-runtime").JSX.Element;
 export { LabelValueGrid };

package/dist/label-value-grid.js

@@ -11,7 +11,8 @@ function getAvailableWidth(element) {
     var _a, _b, _c, _d, _e, _f;
     return Math.max(element.getBoundingClientRect().width, element.clientWidth, element.offsetWidth, (_b = (_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0, (_d = (_c = element.parentElement) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 0, (_f = (_e = element.parentElement) === null || _e === void 0 ? void 0 : _e.offsetWidth) !== null && _f !== void 0 ? _f : 0);
 }
-function LabelValueGrid({ items, columns = 4, className, itemClassName, minColumnWidth = 192, loading = false, loadingItems = 4, style, ...props }) {
+function LabelValueGrid({ items, columns = 4, density = "default", className, itemClassName, minColumnWidth, hideIfEmpty = false, loading = false, loadingItems = 4, style, ...props }) {
+    const resolvedMinColumnWidth = minColumnWidth !== null && minColumnWidth !== void 0 ? minColumnWidth : (density === "compact" ? 140 : 192);
     const resolvedItems = React.useMemo(() => {
         if (!loading)
             return items;
@@ -38,7 +39,7 @@ function LabelValueGrid({ items, columns = 4, className, itemClassName, minColum
             if (width <= 0) {
                 return;
             }
-            setResolvedColumns(getResponsiveColumnCount(width, columns, minColumnWidth, GAP_PX));
+            setResolvedColumns(getResponsiveColumnCount(width, columns, resolvedMinColumnWidth, GAP_PX));
         };
         const requestUpdate = () => {
             if (frameId !== null) {
@@ -62,13 +63,13 @@ function LabelValueGrid({ items, columns = 4, className, itemClassName, minColum
             window.removeEventListener("resize", requestUpdate);
             observer.disconnect();
         };
-    }, [columns, minColumnWidth]);
-    return (_jsx("div", { ref: containerRef, className: cn("grid auto-rows-fr items-start gap-x-6 gap-y-3", className), style: {
+    }, [columns, resolvedMinColumnWidth]);
+    return (_jsx("div", { ref: containerRef, className: cn("grid auto-rows-fr items-start gap-x-6 gap-y-6", className), style: {
             ...style,
             gridTemplateColumns: `repeat(${resolvedColumns}, minmax(0, 1fr))`,
         }, ...props, children: resolvedItems.map((item, index) => {
-            var _a;
-            return (_jsx(LabelValue, { ...item, className: cn("min-w-0", itemClassName, item.className) }, (_a = item.id) !== null && _a !== void 0 ? _a : `${item.label}-${index}`));
+            var _a, _b;
+            return (_jsx(LabelValue, { ...item, hideIfEmpty: (_a = item.hideIfEmpty) !== null && _a !== void 0 ? _a : hideIfEmpty, className: cn("min-w-0", itemClassName, item.className) }, (_b = item.id) !== null && _b !== void 0 ? _b : `${item.label}-${index}`));
         }) }));
 }
 export { LabelValueGrid };