@neasg/design-system 0.4.113 → 0.4.118

package/dist/button.d.ts

@@ -10,6 +10,8 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      * Use this for links or custom interactive elements that should look like a button.
      */
     asChild?: boolean;
+    /** Allow the label to wrap within its container and the button to grow in height. */
+    wrap?: boolean;
     /**
      * Shows a loading indicator, disables interaction, and sets `aria-busy`.
      * When used with `asChild`, the component also prevents click handling and sets `aria-disabled`.

package/dist/button.js

@@ -102,7 +102,7 @@ function attachAnimatedIconRefs(node, refs) {
     }
     return node;
 }
-const Button = React.forwardRef(({ className, variant, size, asChild = false, loading = false, loadingText, loadingIndicator, disabled, children, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, tabIndex, ...props }, ref) => {
+const Button = React.forwardRef(({ className, variant, size, asChild = false, wrap = false, loading = false, loadingText, loadingIndicator, disabled, children, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, tabIndex, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     const isDisabled = disabled || loading;
     const loadingLabel = loadingText !== null && loadingText !== void 0 ? loadingText : children;
@@ -147,7 +147,9 @@ const Button = React.forwardRef(({ className, variant, size, asChild = false, lo
         stopAnimatedIcons();
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     };
-    return (_jsx(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ref: ref, "aria-busy": loading || undefined, "aria-disabled": isDisabled || undefined, "data-loading": loading ? "" : undefined, "data-disabled": isDisabled ? "" : undefined, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, tabIndex: isDisabled && asChild ? -1 : tabIndex, disabled: !asChild ? isDisabled : undefined, ...props, children: content }));
+    return (_jsx(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size }), wrap && "h-auto max-w-full whitespace-normal break-words py-1.5", wrap && (size === "sm" || size === "compact" || size === "compactIcon"
+            ? "min-h-8"
+            : size === "comfortable" ? "min-h-[46px]" : "min-h-control"), className), ref: ref, "aria-busy": loading || undefined, "aria-disabled": isDisabled || undefined, "data-loading": loading ? "" : undefined, "data-disabled": isDisabled ? "" : undefined, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, tabIndex: isDisabled && asChild ? -1 : tabIndex, disabled: !asChild ? isDisabled : undefined, ...props, children: content }));
 });
 Button.displayName = "Button";
 export { Button, buttonVariants };

package/dist/card.d.ts

@@ -13,6 +13,8 @@ export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "t
     accent?: "primary";
     /** Optional visual affordance shown in the top-right corner, such as a filter icon. */
     icon?: React.ReactNode;
+    /** Interactive action beside the card title. */
+    headerAction?: React.ReactNode;
     /** Replaces title/stat/subMetric with skeleton placeholders while data is loading. */
     loading?: boolean;
 }

package/dist/card.js

@@ -55,7 +55,7 @@ function attachCardIconRef(node, ref) {
         ref: mergeRefs(node.ref, refCallback),
     });
 }
-const Card = React.forwardRef(({ title, description, variant = "default", size = "default", stat, subMetric, footer, active, accent, icon, loading = false, children, className, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, role, tabIndex, "aria-pressed": ariaPressed, ...props }, ref) => {
+const Card = React.forwardRef(({ title, description, variant = "default", size = "default", stat, subMetric, footer, active, accent, icon, headerAction, loading = false, children, className, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, role, tabIndex, "aria-pressed": ariaPressed, ...props }, ref) => {
     const interactive = Boolean(onClick);
     const hasStat = stat !== undefined;
     const iconRef = React.useRef(null);
@@ -111,7 +111,7 @@ const Card = React.forwardRef(({ title, description, variant = "default", size =
             "border-[hsl(var(--card-border))] shadow-[inset_4px_0_0_0_hsl(var(--primary))]", interactive &&
             "cursor-pointer transition-[border-color,background-color,box-shadow,transform] duration-150 ease-out hover:border-primary/50 hover:bg-primary/5 hover:shadow-md motion-safe:hover:-translate-y-0.5 motion-safe:active:translate-y-0 motion-safe:active:scale-[0.99] focus-visible:border-primary/50 focus-visible:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", className), ...props, children: [_jsxs("div", { className: cn("relative flex flex-col gap-2", size === "default" && "p-4", size === "compact" && "p-3", showIcon && size === "default" && "pr-12", showIcon && size === "compact" && "pr-10"), children: [showIcon ? (_jsx("span", { "aria-hidden": "true", "data-slot": "card-icon", className: cn("pointer-events-none absolute right-3 top-3 inline-flex size-7 items-center justify-center rounded-control border border-[hsl(var(--card-border))] bg-background/80 text-muted-foreground shadow-sm transition-[background-color,color,transform] duration-150 ease-out group-hover/card:scale-105 group-hover/card:bg-highlight group-hover/card:text-highlight-foreground group-focus-visible/card:bg-highlight group-focus-visible/card:text-highlight-foreground motion-reduce:transition-colors [&_svg]:size-3.5", size === "compact" && "right-2.5 top-2.5 size-6 [&_svg]:size-3", active &&
                             "border-primary/30 bg-highlight text-highlight-foreground", variant === "gradient" &&
-                            "border-white/25 bg-white/10 text-current group-hover/card:bg-white/20 group-hover/card:text-current group-focus-visible/card:bg-white/20 group-focus-visible/card:text-current"), children: renderedIcon })) : null, loading ? (_jsx(Skeleton, { className: "h-3.5 w-24" })) : (renderedTitle), loading
+                            "border-white/25 bg-white/10 text-current group-hover/card:bg-white/20 group-hover/card:text-current group-focus-visible/card:bg-white/20 group-focus-visible/card:text-current"), children: renderedIcon })) : null, loading ? (_jsx(Skeleton, { className: "h-3.5 w-24" })) : (headerAction ? (_jsxs("div", { className: "flex items-start justify-between gap-3", children: [renderedTitle, _jsx("div", { className: "shrink-0", children: headerAction })] })) : renderedTitle), loading
                         ? description != null && _jsx(Skeleton, { className: "h-5 w-40" })
                         : renderedDescription, loading ? (stat !== undefined && _jsx(Skeleton, { className: "h-8 w-20" })) : stat ? (_jsx(Typography, { as: "p", variant: "title", color: variant === "gradient" ? "inherit" : undefined, children: stat })) : null, loading ? (subMetric !== undefined && _jsx(Skeleton, { className: "h-5 w-28" })) : subMetric ? (_jsx(Typography, { as: "p", variant: "caption", color: variant === "gradient" ? "inherit" : undefined, className: variant === "gradient" ? "opacity-80" : undefined, children: subMetric })) : null] }), children ? (_jsx("div", { className: cn(size === "default" && "p-4 pt-0", size === "compact" && "p-3 pt-0"), children: children })) : null, footer ? (_jsx("div", { className: cn("flex items-center", size === "default" && "p-4 pt-0", size === "compact" && "p-3 pt-0"), children: footer })) : null] }));
 });

package/dist/checklist.js

@@ -6,6 +6,7 @@ import { Camera, ChevronDown, ClipboardList, LoaderCircle, MessageSquareText, Tr
 import { Button } from "./button";
 import { Select } from "./select";
 import { Textarea } from "./textarea";
+import { Tooltip } from "./tooltip";
 import { cn } from "./lib/utils";
 export function ChecklistPanel({ title, action, children }) {
     return _jsxs("div", { "data-slot": "checklist-panel", className: "rounded-xl border border-border bg-card p-4 shadow-xs", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between gap-4", children: [_jsx("h3", { className: "text-base font-medium text-card-foreground", children: title }), action] }), children] });
@@ -19,11 +20,11 @@ export function ChecklistSelection({ title, description, typeOptions, subtypeOpt
 }
 export function ChecklistQuestion({ label, options, value, onValueChange, disabled, remarks, onRemarksChange, remarksLimit = 500, remarksMaxLength, remarksRequired = false, evidence, evidenceCount = 0 }) {
     const name = React.useId();
-    React.useEffect(() => { if (remarksRequired)
-        setShowRemarks(true); }, [remarksRequired, value]);
-    const [showRemarks, setShowRemarks] = React.useState(Boolean(remarks));
+    const [showRemarks, setShowRemarks] = React.useState(false);
     const [showEvidence, setShowEvidence] = React.useState(false);
-    return _jsxs("div", { "data-slot": "checklist-question", className: "rounded-xl border border-border bg-card p-4 shadow-xs", children: [_jsx("p", { id: `${name}-label`, className: "mb-4 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)) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "compactIcon", "aria-label": "Add remarks", disabled: disabled, onClick: () => setShowRemarks(true), children: _jsx(MessageSquareText, { "aria-hidden": "true", size: 16 }) }), _jsx(Button, { variant: "ghost", size: "compactIcon", "aria-label": "Add photos", disabled: disabled, onClick: () => setShowEvidence((open) => !open), children: _jsx(Camera, { "aria-hidden": "true", size: 16 }) })] })] }), showRemarks || remarks ? _jsx("div", { className: "mt-2 space-y-2", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(Textarea, { label: "Remarks", hideLabel: true, placeholder: "Type...", value: remarks, disabled: disabled, rows: 2, onChange: (event) => onRemarksChange(event.target.value), maxWords: remarksMaxLength === undefined ? remarksLimit : undefined, maxLength: remarksMaxLength, showCount: remarksMaxLength !== undefined }) }), _jsx(Button, { variant: "ghost", size: "compactIcon", "aria-label": "Remove remarks", disabled: disabled, onClick: () => { onRemarksChange(""); setShowRemarks(false); }, children: _jsx(Trash2, { "aria-hidden": "true", size: 16 }) })] }) }) : null, (showEvidence || evidenceCount > 0) && evidence ? _jsx("div", { className: "mt-2", children: evidence }) : null] });
+    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)) }), _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] })] }), showEvidence && evidence ? _jsx("div", { id: `${name}-evidence`, children: evidence }) : null, showRemarks ? _jsx("div", { id: `${name}-remarks`, children: _jsx(Textarea, { label: "Remarks", hideLabel: true, placeholder: "Type...", value: remarks, disabled: disabled, "aria-required": remarksRequired, rows: 5, onChange: (event) => 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)) });

package/dist/dialog.d.ts

@@ -9,7 +9,7 @@ export interface DialogAction extends Omit<ButtonProps, "children"> {
 }
 type DialogRenderable = React.ReactNode | ((helpers: DialogRenderHelpers) => React.ReactNode);
 export interface DialogProps {
-    variant?: "default" | "confirmation";
+    variant?: "default" | "confirmation" | "routingConfirmation";
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;

package/dist/dialog.js

@@ -44,11 +44,16 @@ function Dialog({ variant = "default", open, defaultOpen, onOpenChange, modal, t
     const body = resolveDialogRenderable(children, helpers);
     const customFooter = resolveDialogRenderable(footer, helpers);
     const hasFooter = Boolean(customFooter || primaryAction || secondaryAction);
-    return (_jsxs(DialogRoot, { open: isOpen, onOpenChange: setIsOpen, modal: modal, children: [trigger ? _jsx(DialogTrigger, { asChild: true, children: trigger }) : null, _jsxs(DialogSurface, { ...(!description ? { "aria-describedby": undefined } : {}), className: cn(variant === "confirmation" && "max-w-sm gap-0 overflow-hidden rounded-xl p-0", contentClassName), hideCloseButton: hideCloseButton || variant === "confirmation", onPointerDownOutside: (event) => {
+    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) => {
                     if (!closeOnOutsideClick) {
                         event.preventDefault();
                     }
-                }, children: [_jsxs("div", { className: cn(variant === "confirmation" && "flex items-start gap-4 p-4"), children: [variant === "confirmation" ? _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", bodyClassName), children: body }) : null, hasFooter ? (_jsx(DialogFooter, { className: variant === "confirmation" ? "border-t bg-muted/30 p-4" : undefined, 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, { 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", 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"), children: customFooter !== null && customFooter !== void 0 ? customFooter : (_jsxs(_Fragment, { children: [secondaryAction
                                     ? renderDialogAction({
                                         action: secondaryAction,
                                         close: helpers.close,

package/dist/editable-table.js

@@ -4,7 +4,7 @@ import { Button } from "./button";
 import { TableAddRow } from "./table-add-row";
 import { TrashIcon } from "./animated-icons/trash";
 import { Checkbox } from "./checkbox";
-import { EmptyState } from "./empty-state";
+import { TableEmptyState } from "./table-empty-state";
 import { InputControl } from "./input-control";
 import { TableRoot as Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "./table";
 import { cn } from "./lib/utils";
@@ -121,7 +121,7 @@ function EditableTable({ value, onChange, columns, isEditing = false, className,
     const checkableColumnWidth = checkableHeader ? "9rem" : "48px";
     return (_jsxs("div", { className: cn("space-y-2", className), children: [_jsx("div", { className: "overflow-x-auto rounded-surface border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [checkable ? (_jsx(TableHead, { width: checkableColumnWidth, minWidth: checkableColumnWidth, children: checkableHeader })) : null, columns.map((column, index) => (_jsx(TableHead, { width: column.width, minWidth: getColumnMinWidth(column), children: _jsx("div", { className: "whitespace-nowrap", children: column.header }) }, `header-${index}`))), hasActionsColumn ? (_jsx(TableHead, { width: renderRowActions ? undefined : "72px", minWidth: renderRowActions ? "120px" : "72px" })) : null] }) }), _jsx(TableBody, { children: value.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length +
                                         (checkable ? 1 : 0) +
-                                        (hasActionsColumn ? 1 : 0), className: "p-0", children: _jsx(EmptyState, { message: "No data available", description: "There are no rows to display in this table yet.", className: "border-0 bg-transparent px-0 py-[var(--space-6)]" }) }) })) : (value.map((row, rowIndex) => (_jsxs(TableRow, { className: rowIndex % 2 === 0
+                                        (hasActionsColumn ? 1 : 0), className: "p-0", children: _jsx(TableEmptyState, {}) }) })) : (value.map((row, rowIndex) => (_jsxs(TableRow, { className: rowIndex % 2 === 0
                                     ? "bg-[hsl(var(--table-row-striped-background))]"
                                     : undefined, children: [checkable ? (_jsx(TableCell, { width: checkableColumnWidth, minWidth: checkableColumnWidth, children: _jsx("div", { className: "flex items-center", onClick: (event) => event.stopPropagation(), children: _jsx(Checkbox, { checked: Boolean(row[activeField]), disabled: !isEditing, onChange: isEditing
                                                     ? (event) => handleToggleRow(rowIndex, event.currentTarget.checked)

package/dist/empty-state.d.ts

@@ -1,5 +1,7 @@
 import * as React from "react";
 export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Muted panel treatment for section empty states. */
+    variant?: "default" | "muted";
     message: React.ReactNode;
     description?: React.ReactNode;
     icon?: React.ComponentType<{
@@ -7,5 +9,5 @@ export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
     }>;
     action?: React.ReactNode;
 }
-declare function EmptyState({ message, description, icon: Icon, action, className, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+declare function EmptyState({ variant, 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({ message, description, icon: Icon, action, className, ...props }) {
-    return (_jsxs("div", { className: cn("flex flex-col items-center justify-center px-6 py-10 text-center", className), ...props, children: [Icon ? (_jsx(Icon, { className: "mb-4 h-10 w-10 stroke-[1.5] text-muted-foreground/70" })) : null, _jsxs("div", { className: "space-y-1.5", children: [_jsx(Typography, { as: "p", variant: "bodySm", className: "font-semibold", children: message }), description ? (_jsx(Typography, { as: "p", variant: "caption", className: "max-w-md", children: description })) : null] }), action ? _jsx("div", { className: "pt-6", children: action }) : null] }));
+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] }));
 }
 export { EmptyState };

package/dist/file-upload.js

@@ -22,12 +22,12 @@ function formatFileSize(bytes) {
 }
 function getFileIcon(file) {
     if (file.type.startsWith("image/")) {
-        return _jsx(ImageIcon, { className: "h-4 w-4 text-muted-foreground" });
+        return _jsx(ImageIcon, { className: "size-6 shrink-0 text-muted-foreground" });
     }
     if (file.type === "application/pdf") {
-        return _jsx(FileTextIcon, { className: "text-muted-foreground", size: 16 });
+        return _jsx(FileTextIcon, { className: "shrink-0 text-muted-foreground", size: 24 });
     }
-    return _jsx(FileIcon, { className: "h-4 w-4 text-muted-foreground" });
+    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);

package/dist/index.d.ts

@@ -40,6 +40,7 @@ export { CountBadge } from "./count-badge";
 export type { CountBadgeProps } from "./count-badge";
 export { StatusDot } from "./status-dot";
 export type { StatusDotProps, StatusDotSize, StatusDotVariant, } from "./status-dot";
+export { TableEmptyState } from "./table-empty-state";
 export { EmptyState } from "./empty-state";
 export type { EmptyStateProps } from "./empty-state";
 export { EditableTable } from "./editable-table";
@@ -171,3 +172,4 @@ export { ChecklistAttachments, ChecklistPanel, ChecklistSection, ChecklistSelect
 export type { ChecklistAttachmentsProps, ChecklistPanelProps, ChecklistSectionProps, ChecklistSelectionProps, ChecklistQuestionProps, ChecklistQuestionOption } from "./checklist";
 export { TableAddRow, type TableAddRowProps } from "./table-add-row";
 export { PopoverList, type PopoverListProps } from "./popover";
+export { StatusBanner, type StatusBannerProps } from "./status-banner";

package/dist/index.js

@@ -20,6 +20,7 @@ export { ThemeSwitcher } from "./theme-switcher";
 export { DateInput } from "./date-input";
 export { CountBadge } from "./count-badge";
 export { StatusDot } from "./status-dot";
+export { TableEmptyState } from "./table-empty-state";
 export { EmptyState } from "./empty-state";
 export { EditableTable } from "./editable-table";
 export { EditButton } from "./edit-button";
@@ -90,3 +91,4 @@ export { parseDateTime, formatDateTime } from "./lib/date-utils";
 export { ChecklistAttachments, ChecklistPanel, ChecklistSection, ChecklistSelection, ChecklistQuestion } from "./checklist";
 export { TableAddRow } from "./table-add-row";
 export { PopoverList } from "./popover";
+export { StatusBanner } from "./status-banner";

package/dist/status-banner.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export interface StatusBannerProps extends React.HTMLAttributes<HTMLDivElement> {
+    label: string;
+    detail?: React.ReactNode;
+    icon?: React.ComponentType<{
+        className?: string;
+        "aria-hidden"?: React.AriaAttributes["aria-hidden"];
+    }>;
+    trailingIcon?: React.ComponentType<{
+        className?: string;
+        "aria-hidden"?: React.AriaAttributes["aria-hidden"];
+    }>;
+}
+/** Compact primary-colour status strip for an ongoing activity. */
+export declare function StatusBanner({ label, detail, icon: Icon, trailingIcon: TrailingIcon, className, ...props }: StatusBannerProps): import("react/jsx-runtime").JSX.Element;

package/dist/status-banner.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./lib/utils";
+/** Compact primary-colour status strip for an ongoing activity. */
+export function StatusBanner({ label, detail, icon: Icon, trailingIcon: TrailingIcon, className, ...props }) {
+    return (_jsxs("div", { ...props, className: cn("flex w-full items-center justify-center gap-2 rounded-none border border-border bg-primary px-4 py-1.5 text-sm text-primary-foreground shadow-sm", className), children: [Icon ? _jsx(Icon, { className: "h-4 w-4 shrink-0", "aria-hidden": true }) : null, _jsx("span", { className: "font-medium", children: label }), detail, TrailingIcon ? (_jsx(TrailingIcon, { className: "h-4 w-4 shrink-0 opacity-50", "aria-hidden": true })) : null] }));
+}

package/dist/table-empty-state.d.ts

@@ -0,0 +1,3 @@
+import { type EmptyStateProps } from "./empty-state";
+/** Shared empty-table presentation, with an icon and explanatory copy by default. */
+export declare function TableEmptyState({ message, description, icon, ...props }: Partial<EmptyStateProps>): import("react/jsx-runtime").JSX.Element;

package/dist/table-empty-state.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Inbox } from "lucide-react";
+import { EmptyState } from "./empty-state";
+/** Shared empty-table presentation, with an icon and explanatory copy by default. */
+export function TableEmptyState({ message = "No data available", description = "There are no rows to display in this table yet.", icon = Inbox, ...props }) {
+    return _jsx(EmptyState, { ...props, message: message, description: description, icon: icon });
+}

package/dist/table.js

@@ -6,7 +6,7 @@ import { CSS } from "@dnd-kit/utilities";
 import { ArrowUpDown, ChevronRight } from "lucide-react";
 import { ArrowDownIcon } from "./animated-icons/arrow-down";
 import { ArrowUpIcon } from "./animated-icons/arrow-up";
-import { EmptyState } from "./empty-state";
+import { TableEmptyState } from "./table-empty-state";
 import { Pagination } from "./pagination";
 import { Skeleton } from "./skeleton";
 import { TableColumnFilterControl, } from "./table-column-filter";
@@ -399,7 +399,7 @@ function getColumnPairResizeRange(column, nextColumn, columnWidths) {
         maxWidth: Math.round(currentWidth + maxDelta),
     };
 }
-function Table({ accessibleLabel, columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { message: "No data available", description: "There are no rows to display in this table yet.", className: "border-0 bg-transparent px-0 py-6" })), toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, minHeight, sorting, pagination, loading = false, loadingLabel = "Loading table data", loadingRows = 5, visibleColumnKeys, resizableColumns = false, columnResizeMode = "pair", columnWidths, defaultColumnWidths, onColumnWidthsChange, renderColumnResizeHandle, tableLayout, centerEmptyState = false, emptyStateMinHeight = DEFAULT_CENTERED_EMPTY_STATE_MIN_HEIGHT, striped = false, rowIndicator, rowExpansion, reorderableColumns = false, onColumnOrderChange, onScroll, style, ...props }) {
+function Table({ accessibleLabel, columns, rows, getRowKey, emptyState = (_jsx(TableEmptyState, {})), toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, minHeight, sorting, pagination, loading = false, loadingLabel = "Loading table data", loadingRows = 5, visibleColumnKeys, resizableColumns = false, columnResizeMode = "pair", columnWidths, defaultColumnWidths, onColumnWidthsChange, renderColumnResizeHandle, tableLayout, centerEmptyState = false, emptyStateMinHeight = DEFAULT_CENTERED_EMPTY_STATE_MIN_HEIGHT, striped = false, rowIndicator, rowExpansion, reorderableColumns = false, onColumnOrderChange, onScroll, style, ...props }) {
     var _a;
     const visibleColumns = getVisibleColumns(columns, visibleColumnKeys);
     const hasRowIndicatorColumn = Boolean(rowIndicator);

package/package.json

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