@neasg/design-system 0.4.132 → 0.4.133

package/dist/checklist.d.ts

@@ -57,6 +57,9 @@ export interface ChecklistAttachmentsProps {
         key: string;
         name: string;
         url: string;
+        type?: string;
+        size?: number | string;
+        sizeBytes?: number;
     }[];
     onRemove?: (key: string) => void;
 }

package/dist/checklist.js

@@ -2,8 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-import { Camera, ChevronDown, ClipboardList, LoaderCircle, MessageSquareText, Trash2 } from "lucide-react";
+import { Camera, ChevronDown, ClipboardList, LoaderCircle, MessageSquareText } from "lucide-react";
 import { Button } from "./button";
+import { FileUploadStatusRow } from "./file-upload-status-row";
 import { Select } from "./select";
 import { Textarea } from "./textarea";
 import { Tooltip } from "./tooltip";
@@ -16,18 +17,24 @@ export function ChecklistSection({ title, progress, action, children, defaultOpe
 }
 export function ChecklistSelection({ title, description, typeOptions, subtypeOptions, type, subtype, onTypeChange, onSubtypeChange, disabled, loading, action }) {
     const Icon = loading ? LoaderCircle : ClipboardList;
-    return _jsxs("div", { "data-slot": "checklist-selection", "aria-busy": loading, className: "flex flex-col items-center gap-4 rounded-lg bg-muted/30 p-6 text-center", children: [_jsx(Icon, { "aria-hidden": "true", className: cn("size-8", loading && "animate-spin") }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", children: title }), _jsx("p", { className: "text-sm text-muted-foreground", children: description })] }), _jsxs("div", { className: "grid w-full max-w-md grid-cols-1 gap-[var(--layout-page-control-gap)] sm:grid-cols-2", children: [_jsx(Select, { label: "Type", hideLabel: true, placeholder: "Type", options: typeOptions, value: type, onValueChange: onTypeChange, disabled: disabled || loading }), _jsx(Select, { label: "Sub-Type", hideLabel: true, placeholder: "Sub-Type", options: subtypeOptions, value: subtype, onValueChange: onSubtypeChange, disabled: disabled || loading || !type })] }), action] });
+    return _jsxs("div", { "data-slot": "checklist-selection", "aria-busy": loading, className: "flex flex-col items-center gap-4 rounded-lg bg-muted/30 p-6 text-center", children: [_jsx(Icon, { "aria-hidden": "true", className: cn("size-8", loading && "animate-spin") }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", children: title }), _jsx("p", { className: "text-sm text-muted-foreground", children: description })] }), _jsxs("div", { className: "grid w-full max-w-md grid-cols-1 gap-[var(--space-2)] sm:grid-cols-2", children: [_jsx(Select, { label: "Type", hideLabel: true, placeholder: "Type", options: typeOptions, value: type, onValueChange: onTypeChange, disabled: disabled || loading }), _jsx(Select, { label: "Sub-Type", hideLabel: true, placeholder: "Sub-Type", options: subtypeOptions, value: subtype, onValueChange: onSubtypeChange, disabled: disabled || loading || !type })] }), action] });
 }
 export function ChecklistQuestion({ label, options, value, onValueChange, disabled, remarks, onRemarksChange, remarksLimit = 500, remarksMaxLength, remarksRequired = false, evidence, evidenceCount = 0 }) {
     const name = React.useId();
-    const [showRemarks, setShowRemarks] = React.useState(false);
-    const [showEvidence, setShowEvidence] = React.useState(false);
+    const [remarksOpen, setRemarksOpen] = React.useState(null);
+    const [evidenceOpen, setEvidenceOpen] = React.useState(null);
+    React.useEffect(() => {
+        if (remarksRequired)
+            setRemarksOpen(true);
+    }, [remarksRequired]);
+    const showRemarks = remarksOpen !== null && remarksOpen !== void 0 ? remarksOpen : (remarksRequired || Boolean(remarks.trim()));
+    const showEvidence = evidenceOpen !== null && evidenceOpen !== void 0 ? evidenceOpen : evidenceCount > 0;
     const remarksVisible = disabled ? Boolean(remarks.trim()) : showRemarks;
     const evidenceVisible = disabled ? evidenceCount > 0 : showEvidence;
     const remarksToggleLabel = showRemarks ? "Hide remarks" : "Show remarks";
     const evidenceToggleLabel = showEvidence ? "Hide photos" : "Show photos";
-    return _jsxs("div", { "data-slot": "checklist-question", className: "space-y-4 rounded-xl border border-border bg-card p-4 shadow-xs", children: [_jsx("p", { id: `${name}-label`, className: "text-sm font-medium", children: label }), _jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [_jsx("fieldset", { disabled: disabled, "aria-labelledby": `${name}-label`, className: cn("flex min-w-0 border-0 p-0", disabled && "opacity-50"), children: options.map((option, index) => _jsxs("label", { className: cn("relative cursor-pointer border border-input px-2.5 py-2 text-sm font-medium focus-within:z-10 focus-within:ring-2 focus-within:ring-ring", index > 0 && "-ml-px", index === 0 && "rounded-l-md", index === options.length - 1 && "rounded-r-md", disabled && "cursor-not-allowed", value === option.value ? option.tone === "negative" ? "bg-destructive/20" : option.tone === "positive" ? "bg-primary/20" : "bg-muted" : "bg-background"), children: [_jsx("input", { className: "absolute inset-0 size-full cursor-inherit opacity-0", type: "radio", name: name, value: option.value, checked: value === option.value, onChange: () => onValueChange(option.value) }), option.label] }, option.value)) }), !disabled ? _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Tooltip, { content: remarksToggleLabel, children: _jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", "aria-label": remarksToggleLabel, "aria-expanded": showRemarks, "aria-controls": `${name}-remarks`, onClick: () => setShowRemarks((open) => !open), children: _jsx(MessageSquareText, { "aria-hidden": "true", size: 16 }) }) }), evidence ? _jsx(Tooltip, { content: `${evidenceToggleLabel}${evidenceCount > 0 ? ` (${evidenceCount})` : ""}`, children: _jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", "aria-label": evidenceToggleLabel, "aria-expanded": showEvidence, "aria-controls": `${name}-evidence`, onClick: () => setShowEvidence((open) => !open), children: _jsx(Camera, { "aria-hidden": "true", size: 16 }) }) }) : null] }) : null] }), evidenceVisible && evidence ? _jsx("div", { id: `${name}-evidence`, children: evidence }) : null, remarksVisible ? _jsx("div", { id: `${name}-remarks`, children: disabled ? _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium", children: "Remarks" }), _jsx("p", { className: "whitespace-pre-wrap text-sm text-muted-foreground", children: remarks })] }) : _jsx(Textarea, { label: "Remarks", hideLabel: true, placeholder: "Type...", value: remarks, "aria-required": remarksRequired, rows: 5, onChange: (event) => onRemarksChange(event.target.value), maxWords: remarksMaxLength === undefined ? remarksLimit : undefined, maxLength: remarksMaxLength, showCount: remarksMaxLength !== undefined }) }) : null] });
+    return _jsxs("div", { "data-slot": "checklist-question", className: "space-y-4 rounded-xl border border-border bg-card p-4 shadow-xs", children: [_jsx("p", { id: `${name}-label`, className: "text-sm font-medium", children: label }), _jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [_jsx("fieldset", { disabled: disabled, "aria-labelledby": `${name}-label`, className: cn("flex min-w-0 border-0 p-0", disabled && "opacity-50"), children: options.map((option, index) => _jsxs("label", { className: cn("relative cursor-pointer border border-input px-2.5 py-2 text-sm font-medium focus-within:z-10 focus-within:ring-2 focus-within:ring-ring", index > 0 && "-ml-px", index === 0 && "rounded-l-md", index === options.length - 1 && "rounded-r-md", disabled && "cursor-not-allowed", value === option.value ? option.tone === "negative" ? "bg-destructive/20" : option.tone === "positive" ? "bg-primary/20" : "bg-muted" : "bg-background"), children: [_jsx("input", { className: "absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed", type: "radio", name: name, value: option.value, checked: value === option.value, onChange: () => onValueChange(option.value) }), option.label] }, option.value)) }), !disabled ? _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Tooltip, { content: remarksToggleLabel, children: _jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", "aria-label": remarksToggleLabel, "aria-expanded": showRemarks, "aria-controls": `${name}-remarks`, onClick: () => setRemarksOpen(!showRemarks), children: _jsx(MessageSquareText, { "aria-hidden": "true", size: 16 }) }) }), evidence ? _jsx(Tooltip, { content: `${evidenceToggleLabel}${evidenceCount > 0 ? ` (${evidenceCount})` : ""}`, children: _jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", "aria-label": evidenceToggleLabel, "aria-expanded": showEvidence, "aria-controls": `${name}-evidence`, onClick: () => setEvidenceOpen(!showEvidence), children: _jsx(Camera, { "aria-hidden": "true", size: 16 }) }) }) : null] }) : null] }), evidenceVisible && evidence ? _jsx("div", { id: `${name}-evidence`, children: evidence }) : null, remarksVisible ? _jsx("div", { id: `${name}-remarks`, children: disabled ? _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium", children: "Remarks" }), _jsx("p", { className: "whitespace-pre-wrap text-sm text-muted-foreground", children: remarks })] }) : _jsx(Textarea, { label: "Remarks", description: "Required when No or N/A is selected.", placeholder: "Type...", value: remarks, "aria-required": remarksRequired, rows: 5, onChange: (event) => { setRemarksOpen(true); onRemarksChange(event.target.value); }, maxWords: remarksMaxLength === undefined ? remarksLimit : undefined, maxLength: remarksMaxLength, showCount: remarksMaxLength !== undefined }) }) : null] });
 }
 export function ChecklistAttachments({ items, onRemove }) {
-    return _jsx("div", { className: "flex flex-wrap gap-2", children: items.map((item) => _jsxs("div", { className: "relative", children: [_jsx("a", { href: item.url, target: "_blank", rel: "noreferrer", children: _jsx("img", { src: item.url, alt: item.name, className: "size-20 rounded-md border border-border object-cover" }) }), onRemove ? _jsx(Button, { variant: "outline", size: "compactIcon", "aria-label": `Remove ${item.name}`, onClick: () => onRemove(item.key), children: _jsx(Trash2, { "aria-hidden": "true", size: 16 }) }) : null] }, item.key)) });
+    return _jsx("ul", { className: "space-y-2", children: items.map((item) => _jsx(FileUploadStatusRow, { file: { name: item.name, type: item.type, size: item.sizeBytes || item.size, status: "complete" }, href: item.url, onRemove: onRemove ? () => onRemove(item.key) : undefined }, item.key)) });
 }

package/dist/dialog.d.ts

@@ -9,10 +9,10 @@ export interface DialogAction extends Omit<ButtonProps, "children"> {
 }
 type DialogRenderable = React.ReactNode | ((helpers: DialogRenderHelpers) => React.ReactNode);
 export interface DialogProps {
-    variant?: "default" | "confirmation" | "routingConfirmation";
+    variant?: "default" | "confirmation";
     /** Standard dialogs are 512px wide; larger sizes are for complex editors. */
     size?: "standard" | "large" | "extraLarge" | "full";
-    /** Optional minimum height for dialogs whose content changes between steps. */
+    /** Minimum height; defaults to 11.25rem (180px at the default root font size). */
     minHeight?: React.CSSProperties["minHeight"];
     open?: boolean;
     defaultOpen?: boolean;

package/dist/dialog.js

@@ -32,7 +32,7 @@ function renderDialogAction({ action, close, defaultVariant, }) {
             }
         }, children: label }));
 }
-function Dialog({ variant = "default", size = "standard", minHeight, open, defaultOpen, onOpenChange, modal, trigger, title, description, children, footer, primaryAction, secondaryAction, contentClassName, bodyClassName, hideCloseButton = false, closeOnOutsideClick = false, }) {
+function Dialog({ variant = "default", size = "standard", minHeight = "11.25rem", open, defaultOpen, onOpenChange, modal, trigger, title, description, children, footer, primaryAction, secondaryAction, contentClassName, bodyClassName, hideCloseButton = false, closeOnOutsideClick = false, }) {
     const [isOpen, setIsOpen] = useControllableOpen({
         open,
         defaultOpen,
@@ -45,15 +45,12 @@ function Dialog({ variant = "default", size = "standard", minHeight, open, defau
     const customFooter = resolveDialogRenderable(footer, helpers);
     const hasFooter = Boolean(customFooter || primaryAction || secondaryAction);
     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 } : {}), style: minHeight !== undefined ? { minHeight } : undefined, className: cn(isCompactConfirmation &&
-                    "gap-0 overflow-hidden rounded-xl p-0", isRoutingConfirmation &&
-                    "gap-0 rounded-overlay p-[var(--space-8)]", minHeight !== undefined && "flex flex-col", "w-[calc(100vw-32px)]", { standard: "max-w-[512px]", large: "max-w-3xl", extraLarge: "max-w-5xl", full: "max-w-[96rem]" }[size], contentClassName), hideCloseButton: hideCloseButton || isCompactConfirmation || isRoutingConfirmation, onPointerDownOutside: (event) => {
+                    "gap-0 overflow-hidden rounded-xl p-0", minHeight !== undefined && "flex flex-col", "w-[calc(100vw-32px)]", { standard: "max-w-[512px]", large: "max-w-3xl", extraLarge: "max-w-5xl", full: "max-w-[96rem]" }[size], contentClassName), hideCloseButton: hideCloseButton || isCompactConfirmation, onPointerDownOutside: (event) => {
                     if (!closeOnOutsideClick) {
                         event.preventDefault();
                     }
-                }, children: [_jsxs("div", { className: cn(isCompactConfirmation && "flex items-start gap-4 p-4"), children: [isCompactConfirmation ? (_jsx("div", { className: "rounded-lg bg-muted p-2", children: _jsx(CircleAlert, { "aria-hidden": "true", className: "size-6" }) })) : null, _jsxs(DialogHeader, { className: cn(isRoutingConfirmation && "gap-3 space-y-0"), children: [_jsx(DialogTitle, { className: cn(isRoutingConfirmation && "text-2xl leading-8"), children: title }), description ? (_jsx(DialogDescription, { className: cn(isRoutingConfirmation &&
-                                            "text-base leading-6 text-foreground"), children: description })) : null] })] }), body ? (_jsx("div", { className: cn("grid gap-4", minHeight !== undefined && "flex-1", isRoutingConfirmation && "mt-3 gap-[var(--space-8)]", bodyClassName), children: body })) : null, hasFooter ? (_jsx(DialogFooter, { className: cn(isCompactConfirmation && "border-t bg-muted/30 p-4", isRoutingConfirmation && "mt-[var(--space-8)] gap-3", minHeight !== undefined && "mt-auto"), children: customFooter !== null && customFooter !== void 0 ? customFooter : (_jsxs(_Fragment, { children: [secondaryAction
+                }, children: [_jsxs("div", { className: cn(isCompactConfirmation && "flex items-start gap-4 p-4"), children: [isCompactConfirmation ? (_jsx("div", { className: "rounded-lg bg-muted p-2", children: _jsx(CircleAlert, { "aria-hidden": "true", className: "size-6" }) })) : null, _jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), description ? (_jsx(DialogDescription, { children: description })) : null] })] }), body ? (_jsx("div", { className: cn("grid gap-4", minHeight !== undefined && "flex-1", bodyClassName), children: body })) : null, hasFooter ? (_jsx(DialogFooter, { className: cn(isCompactConfirmation && "border-t bg-muted/30 p-4", minHeight !== undefined && "mt-auto"), children: customFooter !== null && customFooter !== void 0 ? customFooter : (_jsxs(_Fragment, { children: [secondaryAction
                                     ? renderDialogAction({
                                         action: secondaryAction,
                                         close: helpers.close,

package/dist/editable-table.js

@@ -145,7 +145,7 @@ function EditableTable({ value, onChange, columns, isEditing = false, className,
                                                         insertRow: (nextRow, index = rowIndex + 1) => handleInsertRow(nextRow, index),
                                                         removeRow: () => handleDeleteRow(rowIndex),
                                                     })
-                                                    : null, isEditing ? (_jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", className: "text-muted-foreground hover:bg-destructive/10 hover:text-destructive focus-visible:text-destructive", onClick: () => handleDeleteRow(rowIndex), "aria-label": `Delete row ${rowIndex + 1}`, children: _jsx(TrashIcon, { size: 16 }) })) : null] }) })) : null] }, `row-${rowIndex}`)))) })] }) }), isEditing ? (_jsx(TableAddRow, { onClick: handleAddRow, children: addRowLabel })) : null] }));
+                                                    : null, isEditing ? (_jsx(Button, { type: "button", variant: "destructiveGhost", size: "compactIcon", onClick: () => handleDeleteRow(rowIndex), "aria-label": `Delete row ${rowIndex + 1}`, children: _jsx(TrashIcon, { size: 16 }) })) : null] }) })) : null] }, `row-${rowIndex}`)))) })] }) }), isEditing ? (_jsx(TableAddRow, { onClick: handleAddRow, children: addRowLabel })) : null] }));
 }
 EditableTable.displayName = "EditableTable";
 export { EditableTable };

package/dist/file-upload-list.d.ts

@@ -0,0 +1,15 @@
+export interface UploadedFile {
+    id: string;
+    name: string;
+    type?: string;
+    size?: number | string;
+    href?: string;
+}
+export interface FileUploadListProps {
+    files: UploadedFile[];
+    onRemove?: (id: string) => void;
+    disabled?: boolean;
+    label?: string;
+}
+/** Saved files, using the same rows as the uploader. */
+export declare function FileUploadList({ files, onRemove, disabled, label }: FileUploadListProps): import("react/jsx-runtime").JSX.Element;

package/dist/file-upload-list.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FileUploadStatusRow } from "./file-upload-status-row";
+/** Saved files, using the same rows as the uploader. */
+export function FileUploadList({ files, onRemove, disabled, label = "Uploaded files" }) {
+    return _jsx("ul", { "aria-label": label, className: "space-y-2", children: files.map(file => _jsx(FileUploadStatusRow, { file: { ...file, status: "complete" }, href: file.href, disabled: disabled, onRemove: onRemove ? () => onRemove(file.id) : undefined }, file.id)) });
+}

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

@@ -1,5 +1,5 @@
 import type { FileUploadStatus } from "./use-file-upload";
-export declare function FileUploadStatusRow({ file, onCancel, onRemove, disabled, }: {
+export declare function FileUploadStatusRow({ file, href, onCancel, onRemove, disabled, }: {
     file: {
         name: string;
         type?: string;
@@ -8,6 +8,8 @@ export declare function FileUploadStatusRow({ file, onCancel, onRemove, disabled
         progress?: number;
         error?: string;
     };
+    /** Optional destination for an uploaded file name. */
+    href?: string;
     onCancel?: () => void;
     onRemove?: () => void;
     disabled?: boolean;

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

@@ -27,7 +27,7 @@ function getStatusIcon(status, type) {
     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, }) {
+export function FileUploadStatusRow({ file, href, onCancel, onRemove, disabled = false, }) {
     var _a;
     const isUploading = file.status === "uploading";
     const isPending = file.status === "pending";
@@ -39,7 +39,7 @@ export function FileUploadStatusRow({ file, onCancel, onRemove, disabled = false
     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: cn("grid min-h-7 items-start gap-x-2", action
                     ? "grid-cols-[1.5rem_minmax(0,1fr)_auto_1.75rem]"
-                    : "grid-cols-[1.5rem_minmax(0,1fr)_auto]"), 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) => {
+                    : "grid-cols-[1.5rem_minmax(0,1fr)_auto]"), 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: [href ? (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", className: "min-w-0 truncate underline-offset-4 hover:underline", children: _jsx(Typography, { as: "span", variant: "label", className: cn("truncate", isComplete && "text-[hsl(var(--status-success-foreground))]"), title: file.name, children: file.name }) })) : (_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: action === "remove" ? "destructiveGhost" : "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();

package/dist/index.d.ts

@@ -174,3 +174,5 @@ export type { ChecklistAttachmentsProps, ChecklistPanelProps, ChecklistSectionPr
 export { TableAddRow, type TableAddRowProps } from "./table-add-row";
 export { PopoverList, type PopoverListProps } from "./popover";
 export { StatusBanner, type StatusBannerProps } from "./status-banner";
+export { FileUploadList } from "./file-upload-list";
+export type { FileUploadListProps, UploadedFile } from "./file-upload-list";

package/dist/index.js

@@ -93,3 +93,4 @@ export { ChecklistAttachments, ChecklistPanel, ChecklistSection, ChecklistSelect
 export { TableAddRow } from "./table-add-row";
 export { PopoverList } from "./popover";
 export { StatusBanner } from "./status-banner";
+export { FileUploadList } from "./file-upload-list";

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

@@ -7,11 +7,13 @@ export interface LabelValueGridProps extends React.HTMLAttributes<HTMLDivElement
     items: LabelValueGridItem[];
     columns?: 1 | 2 | 3 | 4 | 5 | 6;
     density?: "default" | "compact";
+    /** Controls whether every grid row shares one height or sizes to its content. */
+    rowSizing?: "equal" | "natural";
     itemClassName?: string;
     minColumnWidth?: number;
     hideIfEmpty?: boolean;
     loading?: boolean;
     loadingItems?: number;
 }
-declare function LabelValueGrid({ items, columns, density, className, itemClassName, minColumnWidth, hideIfEmpty, loading, loadingItems, style, ...props }: LabelValueGridProps): import("react/jsx-runtime").JSX.Element;
+declare function LabelValueGrid({ items, columns, density, rowSizing, 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,7 @@ 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, density = "default", className, itemClassName, minColumnWidth, hideIfEmpty = false, loading = false, loadingItems = 4, style, ...props }) {
+function LabelValueGrid({ items, columns = 4, density = "default", rowSizing = "equal", 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)
@@ -66,7 +66,7 @@ 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"
-            : resolvedColumns === 1
+            : resolvedColumns === 1 || rowSizing === "natural"
                 ? "auto-rows-auto gap-x-6 gap-y-6"
                 : "auto-rows-fr gap-x-6 gap-y-6", className), style: {
             ...style,

package/dist/routing-action-panel.js

@@ -16,6 +16,6 @@ import { Textarea } from "./textarea";
 function RoutingActionPanel({ items, isLoading = false, loadingLabel = "Loading routing activity", emptyMessage = "No routing activity yet", emptyDescription = "Workflow routes will appear here.", routeOptions, routeValue, routePlaceholder = "Select Officer Role", routeDescription, routeDisabled = false, onRouteValueChange, supplementaryFields, context, remarks, remarksDescription, remarksPlaceholder = "Type remarks", remarksRequired = false, remarksRows = 2, validationMessages = [], onRemarksChange, submitLabel = "Route", submitDisabled = false, submitLoading = false, onSubmit, ...panelProps }) {
     const RoutingEmptyState = context ? EmptyState : DashboardActionPanelEmptyState;
     const footer = (_jsxs("div", { "data-slot": "routing-action-panel-form", className: "grid gap-[var(--space-4)]", children: [supplementaryFields, _jsx(Select, { label: "Route To", options: routeOptions, value: routeValue, placeholder: routePlaceholder, disabled: routeDisabled || submitLoading, description: routeDescription, onValueChange: onRouteValueChange }), _jsx(Textarea, { label: "Remarks", value: remarks, onChange: (event) => onRemarksChange(event.target.value), placeholder: remarksPlaceholder, description: remarksDescription, disabled: routeDisabled || submitLoading, required: remarksRequired, rows: remarksRows }), validationMessages.length > 0 ? (_jsxs("details", { className: "text-sm text-muted-foreground", children: [_jsxs("summary", { className: "cursor-pointer font-medium text-foreground", children: [validationMessages.length, " required ", validationMessages.length === 1 ? "item" : "items", " remaining \u2014 view details"] }), _jsx("ul", { className: "mt-2 max-h-40 list-disc space-y-1 overflow-y-auto pl-5", children: validationMessages.map((message, index) => _jsx("li", { children: message }, index)) })] })) : null, _jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", size: "default", disabled: routeDisabled || submitDisabled || validationMessages.length > 0, loading: submitLoading, loadingText: submitLabel, onClick: onSubmit, children: [_jsx(Route, { "aria-hidden": "true", className: "size-4" }), submitLabel] }) })] }));
-    return (_jsx(DashboardActionPanel, { headerSpacing: "comfortable", ...panelProps, children: _jsxs(DashboardRightPanelBody, { spacing: "comfortable", topInset: "none", footerVariant: "separated", footer: footer, children: [context ? (_jsx("div", { "data-slot": "routing-action-panel-context", className: "mb-[var(--space-4)] grid min-w-0 gap-[var(--space-3)] whitespace-pre-wrap [overflow-wrap:anywhere]", children: context })) : null, isLoading ? (_jsx("div", { "data-slot": "routing-action-panel-loading", className: context ? "flex items-center justify-center py-[var(--space-4)]" : "absolute inset-0 flex items-center justify-center", children: _jsx(Spinner, { size: "md", label: loadingLabel }) })) : items.length === 0 ? (_jsx(RoutingEmptyState, { icon: Route, message: emptyMessage, description: emptyDescription })) : (_jsx(RoutingTimeline, { density: "compact", items: items }))] }) }));
+    return (_jsx(DashboardActionPanel, { headerSpacing: "comfortable", ...panelProps, children: _jsxs(DashboardRightPanelBody, { spacing: "comfortable", topInset: "none", footerVariant: "separated", footerClassName: "max-h-[50%] overflow-y-auto overscroll-contain", footer: footer, children: [context ? (_jsx("div", { "data-slot": "routing-action-panel-context", className: "mb-[var(--space-4)] grid min-w-0 gap-[var(--space-3)] whitespace-pre-wrap [overflow-wrap:anywhere]", children: context })) : null, isLoading ? (_jsx("div", { "data-slot": "routing-action-panel-loading", className: context ? "flex items-center justify-center py-[var(--space-4)]" : "absolute inset-0 flex items-center justify-center", children: _jsx(Spinner, { size: "md", label: loadingLabel }) })) : items.length === 0 ? (_jsx(RoutingEmptyState, { icon: Route, message: emptyMessage, description: emptyDescription })) : (_jsx(RoutingTimeline, { density: "compact", items: items }))] }) }));
 }
 export { RoutingActionPanel };

package/package.json

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