@neasg/design-system 0.4.118 → 0.4.121

package/dist/dialog.d.ts

@@ -10,6 +10,8 @@ export interface DialogAction extends Omit<ButtonProps, "children"> {
 type DialogRenderable = React.ReactNode | ((helpers: DialogRenderHelpers) => React.ReactNode);
 export interface DialogProps {
     variant?: "default" | "confirmation" | "routingConfirmation";
+    /** Standard dialogs are 32rem wide; larger sizes are for complex editors. */
+    size?: "standard" | "large" | "extraLarge" | "full";
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -27,5 +29,5 @@ export interface DialogProps {
     /** Whether a pointer interaction outside the dialog closes it. */
     closeOnOutsideClick?: boolean;
 }
-declare function Dialog({ variant, open, defaultOpen, onOpenChange, modal, trigger, title, description, children, footer, primaryAction, secondaryAction, contentClassName, bodyClassName, hideCloseButton, closeOnOutsideClick, }: DialogProps): import("react/jsx-runtime").JSX.Element;
+declare function Dialog({ variant, size, 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

@@ -32,7 +32,7 @@ function renderDialogAction({ action, close, defaultVariant, }) {
             }
         }, children: label }));
 }
-function Dialog({ variant = "default", open, defaultOpen, onOpenChange, modal, trigger, title, description, children, footer, primaryAction, secondaryAction, contentClassName, bodyClassName, hideCloseButton = false, closeOnOutsideClick = false, }) {
+function Dialog({ variant = "default", size = "standard", open, defaultOpen, onOpenChange, modal, trigger, title, description, children, footer, primaryAction, secondaryAction, contentClassName, bodyClassName, hideCloseButton = false, closeOnOutsideClick = false, }) {
     const [isOpen, setIsOpen] = useControllableOpen({
         open,
         defaultOpen,
@@ -47,8 +47,8 @@ function Dialog({ variant = "default", open, defaultOpen, onOpenChange, modal, t
     const isCompactConfirmation = variant === "confirmation";
     const isRoutingConfirmation = variant === "routingConfirmation";
     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: cn(isCompactConfirmation &&
-                    "max-w-sm gap-0 overflow-hidden rounded-xl p-0", isRoutingConfirmation &&
-                    "max-w-[40rem] gap-0 rounded-overlay p-[var(--space-8)]", contentClassName), hideCloseButton: hideCloseButton || isCompactConfirmation || isRoutingConfirmation, onPointerDownOutside: (event) => {
+                    "gap-0 overflow-hidden rounded-xl p-0", isRoutingConfirmation &&
+                    "gap-0 rounded-overlay p-[var(--space-8)]", "w-[calc(100vw-2rem)]", { standard: "max-w-lg", large: "max-w-3xl", extraLarge: "max-w-5xl", full: "max-w-[96rem]" }[size], contentClassName), hideCloseButton: hideCloseButton || isCompactConfirmation || isRoutingConfirmation, onPointerDownOutside: (event) => {
                     if (!closeOnOutsideClick) {
                         event.preventDefault();
                     }

package/dist/empty-state.d.ts

@@ -2,6 +2,8 @@ import * as React from "react";
 export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Muted panel treatment for section empty states. */
     variant?: "default" | "muted";
+    /** Controls spacing between the icon, copy, and action. */
+    density?: "default" | "compact";
     message: React.ReactNode;
     description?: React.ReactNode;
     icon?: React.ComponentType<{
@@ -9,5 +11,5 @@ export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
     }>;
     action?: React.ReactNode;
 }
-declare function EmptyState({ variant, message, description, icon: Icon, action, className, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+declare function EmptyState({ variant, density, message, description, icon: Icon, action, className, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
 export { EmptyState };

package/dist/empty-state.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "./lib/utils";
 import { Typography } from "./typography";
-function EmptyState({ variant = "default", message, description, icon: Icon, action, className, ...props }) {
-    return (_jsxs("div", { className: cn("flex flex-col items-center justify-center whitespace-normal px-6 py-10 text-center", variant === "muted" && "rounded-lg bg-muted/30", className), ...props, children: [Icon ? (_jsx(Icon, { className: "mb-4 h-10 w-10 stroke-[1.5] text-muted-foreground/70" })) : null, _jsxs("div", { className: "max-w-full space-y-1.5", children: [_jsx(Typography, { as: "p", variant: "bodySm", className: "font-semibold", children: message }), description ? (_jsx(Typography, { as: "p", variant: "caption", className: "mx-auto max-w-md", children: description })) : null] }), action ? _jsx("div", { className: "pt-6", children: action }) : null] }));
+function EmptyState({ variant = "default", density = "default", message, description, icon: Icon, action, className, ...props }) {
+    return (_jsxs("div", { className: cn("flex flex-col items-center justify-center whitespace-normal px-6 py-10 text-center", variant === "muted" && "rounded-lg bg-muted/30", className), ...props, children: [Icon ? (_jsx(Icon, { className: cn("h-10 w-10 stroke-[1.5] text-muted-foreground/70", density === "compact" ? "mb-2" : "mb-4") })) : null, _jsxs("div", { className: "max-w-full space-y-1.5", children: [_jsx(Typography, { as: "p", variant: "bodySm", className: "font-semibold", children: message }), description ? (_jsx(Typography, { as: "p", variant: "caption", className: "mx-auto max-w-md", children: description })) : null] }), action ? _jsx("div", { className: density === "compact" ? "pt-4" : "pt-6", children: action }) : null] }));
 }
 export { EmptyState };

package/dist/file-upload-status-row.d.ts

@@ -0,0 +1,14 @@
+import type { FileUploadStatus } from "./use-file-upload";
+export declare function FileUploadStatusRow({ file, onCancel, onRemove, disabled, }: {
+    file: {
+        name: string;
+        type?: string;
+        size?: number | string;
+        status?: FileUploadStatus;
+        progress?: number;
+        error?: string;
+    };
+    onCancel?: () => void;
+    onRemove?: () => void;
+    disabled?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, CheckCircle2, File, FileText, ImageIcon, Trash2, X } from "lucide-react";
+import { Button } from "./button";
+import { cn } from "./lib/utils";
+import { Progress } from "./progress";
+import { Typography } from "./typography";
+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 getStatusIcon(status, type) {
+    if (status === "complete") {
+        return (_jsx(CheckCircle2, { "aria-hidden": "true", className: "size-5 text-[hsl(var(--status-success-foreground))]" }));
+    }
+    if (status === "error") {
+        return (_jsx(AlertCircle, { "aria-hidden": "true", className: "size-5 text-[hsl(var(--status-destructive-foreground))]" }));
+    }
+    const Icon = (type === null || type === void 0 ? void 0 : type.startsWith("image/")) ? ImageIcon : type === "application/pdf" ? FileText : File;
+    return (_jsx(Icon, { "aria-hidden": "true", className: "size-5 text-muted-foreground" }));
+}
+export function FileUploadStatusRow({ file, onCancel, onRemove, disabled = false, }) {
+    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 = !isUploading && 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: "grid grid-cols-[1.5rem_minmax(0,1fr)_auto_1.75rem] min-h-7 items-start gap-x-2", children: [_jsx("span", { className: "flex h-7 w-6 shrink-0 items-center justify-center", children: getStatusIcon(file.status, file.type) }), _jsxs("div", { className: "flex min-w-0 flex-col gap-1 py-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: "caption", className: "break-words text-xs leading-4 text-destructive", children: (_a = file.error) !== null && _a !== void 0 ? _a : "Upload failed" })) : null] }), sizeLabel ? (_jsx(Typography, { as: "span", variant: "bodySm", className: "col-start-3 mt-1.5 whitespace-nowrap text-xs leading-4 text-muted-foreground", children: sizeLabel })) : null, action ? (_jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", className: "col-start-4 h-7 w-7 shrink-0", disabled: disabled, onClick: (event) => {
+                            event.stopPropagation();
+                            if (action === "cancel") {
+                                onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+                            }
+                            else {
+                                onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+                            }
+                        }, "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] }));
+}

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

@@ -1,24 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertCircle, CheckCircle2, Paperclip, Trash2, X, } from "lucide-react";
+import { X } from "lucide-react";
+import { FileUploadStatusRow } from "./file-upload-status-row";
 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;
@@ -34,6 +22,7 @@ function normalizeFiles({ files, uploadProgress, }) {
         const result = (_a = progress === null || progress === void 0 ? void 0 : progress.result) !== null && _a !== void 0 ? _a : file.result;
         return {
             ...file,
+            name: file.name,
             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,
@@ -72,43 +61,15 @@ function getDefaultDescription(files) {
     ].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) => {
+    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 text-xs leading-4", 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}`));
+                    return (_jsx(FileUploadStatusRow, { file: file, onCancel: onCancel ? () => onCancel(file) : undefined, onRemove: onRemove && (file.status === "complete" || file.status === "error")
+                            ? () => onRemove(file)
+                            : undefined }, `${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 }) {

package/dist/file-upload.js

@@ -2,14 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useCallback, useState } from "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";
-import { XIcon } from "./animated-icons/x";
-import { Button } from "./button";
 import { cn } from "./lib/utils";
-import { Progress } from "./progress";
+import { FileUploadStatusRow } from "./file-upload-status-row";
 import { Typography } from "./typography";
 const DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024;
 function formatFileSize(bytes) {
@@ -20,15 +15,6 @@ function formatFileSize(bytes) {
     const i = Math.floor(Math.log(bytes) / Math.log(k));
     return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
 }
-function getFileIcon(file) {
-    if (file.type.startsWith("image/")) {
-        return _jsx(ImageIcon, { className: "size-6 shrink-0 text-muted-foreground" });
-    }
-    if (file.type === "application/pdf") {
-        return _jsx(FileTextIcon, { className: "shrink-0 text-muted-foreground", size: 24 });
-    }
-    return _jsx(FileIcon, { className: "size-6 shrink-0 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);
     const [error, setError] = useState(null);
@@ -92,16 +78,15 @@ export function FileUpload({ accept, maxSize = DEFAULT_MAX_FILE_SIZE, maxFiles =
     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-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-interactive" : "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;
+                    : "border-muted-foreground/25 hover:border-muted-foreground/50", disabled && "cursor-not-allowed opacity-50"), children: [_jsx(UploadIcon, { className: cn(isDragOver ? "text-interactive" : "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("ul", { className: "space-y-2", children: value.map((file, index) => {
                     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-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 ||
-                                (progress && progress.status === "pending")) && (_jsx("div", { className: "mt-2", children: _jsx(Progress, { value: (_a = progress === null || progress === void 0 ? void 0 : progress.progress) !== null && _a !== void 0 ? _a : 0, size: "sm", variant: isError ? "error" : "default", label: `Uploading ${file.name}` }) }))] }, `${file.name}-${file.size}-${index}`));
+                    return (_jsx(FileUploadStatusRow, { file: {
+                            name: file.name,
+                            type: file.type,
+                            size: file.size,
+                            status: progress === null || progress === void 0 ? void 0 : progress.status,
+                            progress: progress === null || progress === void 0 ? void 0 : progress.progress,
+                            error: progress === null || progress === void 0 ? void 0 : progress.error,
+                        }, disabled: disabled, onRemove: () => removeFile(index) }, `${file.name}-${file.size}-${index}`));
                 }) })) : null] }));
 }

package/dist/label-value-grid.js

@@ -66,7 +66,9 @@ function LabelValueGrid({ items, columns = 4, density = "default", className, it
     }, [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: {
+            : resolvedColumns === 1
+                ? "auto-rows-auto gap-x-6 gap-y-6"
+                : "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/popover.d.ts

@@ -13,7 +13,8 @@ export interface PopoverProps extends Pick<PopoverRootProps, "defaultOpen" | "mo
     children: React.ReactNode;
     /** Visible popover heading. Also labels the popover for assistive technology. */
     title?: React.ReactNode;
-    surface?: "panel" | "menu" | "message";
+    /** List surfaces scroll at the overlay edge and stay within the available viewport height. */
+    surface?: "panel" | "menu" | "message" | "list";
     /** Controls whether Tab stays within the popover or closes it and continues in the page Tab order. */
     tabBehavior?: PopoverTabBehavior;
     contentClassName?: string;

package/dist/popover.js

@@ -79,7 +79,7 @@ function Popover({ defaultOpen, modal, onOpenChange, open, trigger, virtualAncho
         contentOnCloseAutoFocus === null || contentOnCloseAutoFocus === void 0 ? void 0 : contentOnCloseAutoFocus(event);
         handleCloseAutoFocus(event);
     }, [contentOnCloseAutoFocus, handleCloseAutoFocus]);
-    return (_jsxs(PopoverRoot, { modal: modal, onOpenChange: setOpen, open: currentOpen, children: [virtualAnchorRef ? (_jsx(PopoverAnchor, { virtualRef: virtualAnchorRef })) : null, triggerTooltip ? (_jsx(Tooltip, { content: triggerTooltip, side: triggerTooltipSide, sideOffset: triggerTooltipSideOffset, contentClassName: triggerTooltipClassName, children: triggerElement })) : (triggerElement), _jsxs(PopoverContent, { ref: contentRef, align: align, sideOffset: sideOffset, "aria-labelledby": titleId !== null && titleId !== void 0 ? titleId : contentProps["aria-labelledby"], className: cn(surface === "menu" && "overflow-hidden p-1", surface === "message" && "overflow-hidden p-0", contentClassName), style: style, ...contentProps, onCloseAutoFocus: handleContentCloseAutoFocus, onKeyDown: handleContentKeyDown, onKeyDownCapture: handleContentKeyDownCapture, children: [title ? (_jsx(PopoverTitle, { id: titleId, className: cn(surface === "menu"
+    return (_jsxs(PopoverRoot, { modal: modal, onOpenChange: setOpen, open: currentOpen, children: [virtualAnchorRef ? (_jsx(PopoverAnchor, { virtualRef: virtualAnchorRef })) : null, triggerTooltip ? (_jsx(Tooltip, { content: triggerTooltip, side: triggerTooltipSide, sideOffset: triggerTooltipSideOffset, contentClassName: triggerTooltipClassName, children: triggerElement })) : (triggerElement), _jsxs(PopoverContent, { ref: contentRef, align: align, sideOffset: sideOffset, "aria-labelledby": titleId !== null && titleId !== void 0 ? titleId : contentProps["aria-labelledby"], className: cn(surface === "menu" && "overflow-hidden p-1", surface === "message" && "overflow-hidden p-0", surface === "list" && "max-h-[min(18rem,var(--radix-popover-content-available-height))] overflow-y-auto overscroll-contain", contentClassName), style: style, ...contentProps, onCloseAutoFocus: handleContentCloseAutoFocus, onKeyDown: handleContentKeyDown, onKeyDownCapture: handleContentKeyDownCapture, children: [title ? (_jsx(PopoverTitle, { id: titleId, className: cn(surface === "menu"
                             ? "px-2 py-1.5"
                             : "-mx-4 -mt-4 mb-4 border-b px-4 py-3"), children: title })) : null, children] })] }));
 }
@@ -89,5 +89,5 @@ function PopoverTitle({ className, children, ...props }) {
 export { Popover, PopoverTitle };
 /** Read-only information rows for a popover, without implying menu actions. */
 export function PopoverList({ items }) {
-    return (_jsx("ul", { "data-slot": "popover-list", className: "max-h-64 space-y-3 overflow-y-auto text-sm text-foreground", children: items.map((item, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { "aria-hidden": "true", className: "mt-2 size-1 shrink-0 rounded-full bg-muted-foreground" }), _jsx("span", { className: "min-w-0 break-words", children: item })] }, index))) }));
+    return (_jsx("ul", { "data-slot": "popover-list", className: "space-y-3 text-sm text-foreground", children: items.map((item, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { "aria-hidden": "true", className: "mt-2 size-1 shrink-0 rounded-full bg-muted-foreground" }), _jsx("span", { className: "min-w-0 break-words", children: item })] }, index))) }));
 }

package/dist/table.js

@@ -171,7 +171,7 @@ const TableHead = React.forwardRef(({ className, style, width, minWidth, maxWidt
         treatWidthAsMinWidth,
     }), ...props })));
 TableHead.displayName = "TableHead";
-const TableCell = React.forwardRef(({ className, style, width, minWidth, maxWidth, wrap = false, treatWidthAsMinWidth, containOverflow, ...props }, ref) => (_jsx("td", { ref: ref, className: cn("h-12 px-4 py-[4px] align-middle text-card-foreground [&:has([role=checkbox])]:pr-0 [&_[data-slot=button]]:px-0", wrap ? "whitespace-normal" : "whitespace-nowrap", overflowContainmentClassName({ containOverflow, wrap }), className), style: getTableColumnSizingStyle({
+const TableCell = React.forwardRef(({ className, style, width, minWidth, maxWidth, wrap = false, treatWidthAsMinWidth, containOverflow, ...props }, ref) => (_jsx("td", { ref: ref, className: cn("h-12 px-4 py-[4px] align-middle text-card-foreground [&:has([role=checkbox])]:pr-0 [&:not([data-slot=table-empty-cell])_[data-slot=button]]:px-0", wrap ? "whitespace-normal" : "whitespace-nowrap", overflowContainmentClassName({ containOverflow, wrap }), className), style: getTableColumnSizingStyle({
         style,
         width,
         minWidth,
@@ -746,7 +746,7 @@ function Table({ accessibleLabel, columns, rows, getRowKey, emptyState = (_jsx(T
                                             })] }), isExpanded ? (_jsx(TableRow, { id: expandedContentId, "data-slot": "table-expanded-row", className: "bg-[hsl(var(--table-row-striped-background))] hover:bg-[hsl(var(--table-row-striped-background))]", children: _jsx(TableCell, { colSpan: Math.max(visibleColumns.length +
                                                 (hasRowIndicatorColumn ? 1 : 0) +
                                                 (hasExpansionColumn ? 1 : 0), 1), className: "h-auto whitespace-normal p-4", children: rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.renderExpandedContent(row, rowIndex) }) })) : null] }, rowKey));
-                        })) : (_jsx(TableRow, { className: "cursor-default hover:bg-card", children: _jsx(TableCell, { colSpan: Math.max(visibleColumns.length +
+                        })) : (_jsx(TableRow, { className: "cursor-default hover:bg-card", children: _jsx(TableCell, { "data-slot": "table-empty-cell", colSpan: Math.max(visibleColumns.length +
                                     (hasRowIndicatorColumn ? 1 : 0) +
                                     (hasExpansionColumn ? 1 : 0), 1), className: "p-6", children: resolvedEmptyState }) })) })] }), _jsx("div", { role: "status", className: "sr-only", children: loading ? loadingLabel : null })] }));
     const reorderableContainer = reorderableColumns ? (_jsx(DndContext, { sensors: columnReorderSensors, collisionDetection: closestCenter, onDragEnd: handleColumnDragEnd, children: _jsx(SortableContext, { items: reorderableColumnIds, strategy: horizontalListSortingStrategy, children: container }) })) : (container);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.4.118",
+  "version": "0.4.121",
   "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
   "repository": {
     "type": "git",