@neasg/design-system 0.4.95 → 0.4.113

package/README.md

@@ -331,3 +331,12 @@ GitHub Actions builds Storybook with `npm run build-storybook` to verify that
 the stories compile. The Chromatic publishing step is temporarily commented
 out in `.github/workflows/ci.yml` and can be uncommented when snapshot
 publishing is needed again.
+
+### Text length counters
+
+Use `showCount` with `maxLength` on `Input`, `SearchInput`, `CompoundSearchInput`, or `Textarea` for a character counter. Use `maxWords` on `Textarea` for a word counter; it takes precedence if both limits are supplied. Counters appear below the field, aligned right, as `count / limit`. The unit is available to screen readers without repeating a visible maximum-length hint. Native character limits remain enforced; word limits report validation errors without truncating text.
+
+```tsx
+const [reference, setReference] = React.useState("");
+<Input label="Reference" value={reference} onChange={(event) => setReference(event.target.value)} maxLength={50} showCount />
+```

package/dist/activity-card.d.ts

@@ -9,6 +9,8 @@ export interface ActivityCardProps extends Omit<React.HTMLAttributes<HTMLElement
     title: React.ReactNode;
     titleLines?: 1 | 2;
     meta?: React.ReactNode;
+    /** Optional supporting content rendered inside the card header. */
+    headerContent?: React.ReactNode;
     trailing?: React.ReactNode;
     href?: string;
     type?: "button" | "submit" | "reset";

package/dist/activity-card.js

@@ -38,7 +38,7 @@ function getActivityActorInitials(value) {
         .map((part) => part.charAt(0).toUpperCase())
         .join("");
 }
-const ActivityCard = React.forwardRef(({ as = "article", density = "default", icon, iconTone, title, titleLines = 2, meta, trailing, href, type, className, children, "data-slot": dataSlot, ...props }, ref) => {
+const ActivityCard = React.forwardRef(({ as = "article", density = "default", icon, iconTone, title, titleLines = 2, meta, headerContent, trailing, href, type, className, children, "data-slot": dataSlot, ...props }, ref) => {
     const Comp = as;
     return (_jsxs(Comp, { ref: ref, "data-slot": dataSlot !== null && dataSlot !== void 0 ? dataSlot : "activity-card", "data-activity-card": "", "data-density": density, href: as === "a" ? href : undefined, type: as === "button" ? (type !== null && type !== void 0 ? type : "button") : undefined, className: cn("min-w-0 overflow-hidden rounded-surface border border-border bg-card text-card-foreground shadow-sm", className), ...props, children: [_jsxs("header", { "data-slot": "activity-card-header", className: cn("flex items-center", density === "compact"
                     ? "min-h-[var(--space-12)] p-[var(--space-3)]"
@@ -50,7 +50,7 @@ const ActivityCard = React.forwardRef(({ as = "article", density = "default", ic
                                 : "pl-[16px]"), trailing &&
                             (density === "compact"
                                 ? "pr-[var(--space-3)]"
-                                : "pr-[32px]")), children: [_jsx(Typography, { as: "h3", variant: "label", className: cn("font-semibold", activityCardTitleLineClasses[titleLines]), children: title }), meta ? (_jsx(Typography, { as: "div", variant: "caption", className: "font-medium text-instructional", children: meta })) : null] }), trailing ? (_jsx("div", { "data-slot": "activity-card-trailing", className: "max-w-full shrink-0", children: trailing })) : null] }), children] }));
+                                : "pr-[32px]")), children: [_jsx(Typography, { as: "h3", variant: "label", className: cn("font-semibold", activityCardTitleLineClasses[titleLines]), children: title }), meta ? (_jsx(Typography, { as: "div", variant: "caption", className: "font-medium text-instructional", children: meta })) : null, headerContent ? (_jsx("div", { "data-slot": "activity-card-header-content", className: "mt-[var(--space-2)]", children: headerContent })) : null] }), trailing ? (_jsx("div", { "data-slot": "activity-card-trailing", className: "max-w-full shrink-0", children: trailing })) : null] }), children] }));
 });
 ActivityCard.displayName = "ActivityCard";
 const ActivityCardContent = React.forwardRef(({ density = "default", className, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "activity-card-content", "data-density": density, className: cn("border-t border-border", density === "compact"

package/dist/alert.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from "class-variance-authority";
 import { type ButtonProps } from "./button";
 import { type CheckboxProps } from "./checkbox";
 declare const alertVariants: (props?: ({
-    variant?: "destructive" | "info" | "success" | "warning" | null | undefined;
+    variant?: "warning" | "destructive" | "info" | "success" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof alertVariants> {
     title?: React.ReactNode;

package/dist/badge.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
-    variant?: "accent" | "muted" | "destructive" | "outline" | "secondary" | "info" | "success" | "warning" | null | undefined;
+    variant?: "accent" | "muted" | "warning" | "destructive" | "outline" | "secondary" | "info" | "success" | null | undefined;
     size?: "default" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**

package/dist/button.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "link" | "default" | "warning" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "sm" | "compact" | "comfortable" | "icon" | "compactIcon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/button.js

@@ -7,6 +7,7 @@ const buttonVariants = cva("inline-flex cursor-pointer items-center justify-cent
     variants: {
         variant: {
             default: "bg-button-primary text-button-primary-foreground hover:bg-button-primary-hover",
+            warning: "border border-[hsl(var(--status-warning-foreground))]/30 bg-[hsl(var(--status-warning))] text-[hsl(var(--status-warning-foreground))] hover:bg-[hsl(var(--status-warning))]/80 focus-visible:ring-[hsl(var(--status-warning-foreground))]",
             destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
             outline: "border border-[hsl(var(--button-outline-border))] bg-[hsl(var(--button-outline-background))] text-foreground hover:bg-[hsl(var(--button-outline-hover-background))] hover:text-accent-foreground",
             secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
@@ -146,7 +147,7 @@ const Button = React.forwardRef(({ className, variant, size, asChild = false, lo
         stopAnimatedIcons();
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     };
-    return (_jsx(Comp, { 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, 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/changelog-action-panel.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { type DashboardActionPanelProps } from "./layout";
+import { type NotificationItemData } from "./notification";
+export interface ChangelogActionPanelProps extends Omit<DashboardActionPanelProps, "children" | "headerSpacing" | "title"> {
+    title?: React.ReactNode;
+    notifications: NotificationItemData[];
+    isLoading?: boolean;
+    loadingLabel?: string;
+    emptyMessage?: React.ReactNode;
+    emptyDescription?: React.ReactNode;
+}
+/**
+ * Shared change-log panel. Consumers map their domain events to notification
+ * items; this component owns the complete list, loading, and empty-state UI.
+ */
+declare function ChangelogActionPanel({ title, subtitle, notifications, isLoading, loadingLabel, emptyMessage, emptyDescription, ...panelProps }: ChangelogActionPanelProps): import("react/jsx-runtime").JSX.Element;
+export { ChangelogActionPanel };

package/dist/changelog-action-panel.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { History } from "lucide-react";
+import { DashboardActionPanel, DashboardActionPanelEmptyState, DashboardRightPanelBody, } from "./layout";
+import { NotificationList, } from "./notification";
+import { Spinner } from "./spinner";
+/**
+ * Shared change-log panel. Consumers map their domain events to notification
+ * items; this component owns the complete list, loading, and empty-state UI.
+ */
+function ChangelogActionPanel({ title = "Change log", subtitle = "Review all activity recorded here.", notifications, isLoading = false, loadingLabel = "Loading change log", emptyMessage = "No change log entries yet", emptyDescription = "Changes will be recorded here.", ...panelProps }) {
+    return (_jsx(DashboardActionPanel, { headerSpacing: "comfortable", title: title, subtitle: subtitle, ...panelProps, children: _jsx(DashboardRightPanelBody, { spacing: "comfortable", topInset: "none", children: isLoading ? (_jsx("div", { "data-slot": "changelog-action-panel-loading", className: "absolute inset-0 flex items-center justify-center", children: _jsx(Spinner, { size: "md", label: loadingLabel }) })) : notifications.length === 0 ? (_jsx(DashboardActionPanelEmptyState, { icon: History, message: emptyMessage, description: emptyDescription })) : (_jsx(NotificationList, { density: "compact", notifications: notifications, descriptionLines: 3, emptyState: null, variant: "bordered" })) }) }));
+}
+export { ChangelogActionPanel };

package/dist/checklist.d.ts

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { type SelectOption } from "./select";
+export interface ChecklistPanelProps {
+    title: React.ReactNode;
+    action?: React.ReactNode;
+    children: React.ReactNode;
+}
+export declare function ChecklistPanel({ title, action, children }: ChecklistPanelProps): import("react/jsx-runtime").JSX.Element;
+export interface ChecklistSectionProps {
+    title: string;
+    progress?: string;
+    /** Independent control displayed beside the section chevron. */
+    action?: React.ReactNode;
+    children: React.ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export declare function ChecklistSection({ title, progress, action, children, defaultOpen, open, onOpenChange }: ChecklistSectionProps): import("react/jsx-runtime").JSX.Element;
+export interface ChecklistSelectionProps {
+    title: string;
+    description: string;
+    typeOptions: SelectOption[];
+    subtypeOptions: SelectOption[];
+    type: string;
+    subtype: string;
+    onTypeChange: (value: string) => void;
+    onSubtypeChange: (value: string) => void;
+    disabled?: boolean;
+    loading?: boolean;
+    action?: React.ReactNode;
+}
+export declare function ChecklistSelection({ title, description, typeOptions, subtypeOptions, type, subtype, onTypeChange, onSubtypeChange, disabled, loading, action }: ChecklistSelectionProps): import("react/jsx-runtime").JSX.Element;
+export interface ChecklistQuestionOption {
+    value: string;
+    label: string;
+    tone?: "positive" | "negative" | "neutral";
+}
+export interface ChecklistQuestionProps {
+    label: string;
+    options: ChecklistQuestionOption[];
+    value: string;
+    onValueChange: (value: string) => void;
+    disabled?: boolean;
+    remarks: string;
+    onRemarksChange: (value: string) => void;
+    remarksLimit?: number;
+    /** Count and limit characters instead of words when supplied. */
+    remarksMaxLength?: number;
+    remarksRequired?: boolean;
+    evidence?: React.ReactNode;
+    evidenceCount?: number;
+}
+export declare function ChecklistQuestion({ label, options, value, onValueChange, disabled, remarks, onRemarksChange, remarksLimit, remarksMaxLength, remarksRequired, evidence, evidenceCount }: ChecklistQuestionProps): import("react/jsx-runtime").JSX.Element;
+export interface ChecklistAttachmentsProps {
+    items: {
+        key: string;
+        name: string;
+        url: string;
+    }[];
+    onRemove?: (key: string) => void;
+}
+export declare function ChecklistAttachments({ items, onRemove }: ChecklistAttachmentsProps): import("react/jsx-runtime").JSX.Element;

package/dist/checklist.js

@@ -0,0 +1,30 @@
+"use client";
+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 { Button } from "./button";
+import { Select } from "./select";
+import { Textarea } from "./textarea";
+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] });
+}
+export function ChecklistSection({ title, progress, action, children, defaultOpen = false, open, onOpenChange }) {
+    return _jsxs(CollapsiblePrimitive.Root, { open: open, onOpenChange: onOpenChange, defaultOpen: defaultOpen, className: "border-b border-border last:border-0", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs(CollapsiblePrimitive.Trigger, { className: "group flex min-w-0 flex-1 items-center gap-1.5 py-3 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("span", { className: "text-base font-medium", children: title }), progress ? _jsx("span", { className: "text-sm text-muted-foreground", children: progress }) : null, !action ? _jsx(ChevronDown, { "aria-hidden": "true", className: "ml-auto size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" }) : null] }), action ? _jsxs(_Fragment, { children: [_jsx("div", { "data-slot": "checklist-section-action", className: "shrink-0", children: action }), _jsx(CollapsiblePrimitive.Trigger, { "aria-label": `Toggle ${title}`, className: "group py-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: _jsx(ChevronDown, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" }) })] }) : null] }), _jsx(CollapsiblePrimitive.Content, { className: "overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up motion-reduce:data-[state=open]:animate-none motion-reduce:data-[state=closed]:animate-none", children: _jsx("div", { className: "flex flex-col gap-4 pb-4", children: children }) })] });
+}
+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: "flex flex-wrap items-center justify-center gap-4", children: [_jsx(Select, { className: "w-auto", triggerClassName: "w-auto min-w-0", label: "Type", hideLabel: true, placeholder: "Type", options: typeOptions, value: type, onValueChange: onTypeChange, disabled: disabled || loading }), _jsx(Select, { className: "w-auto", triggerClassName: "w-auto min-w-0", 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();
+    React.useEffect(() => { if (remarksRequired)
+        setShowRemarks(true); }, [remarksRequired, value]);
+    const [showRemarks, setShowRemarks] = React.useState(Boolean(remarks));
+    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] });
+}
+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/compound-search-input.d.ts

@@ -1,5 +1,7 @@
 import * as React from "react";
 export interface CompoundSearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** Display a character counter when maxLength is set. */
+    showCount?: boolean;
     actions?: React.ReactNode;
     criteria?: React.ReactNode;
     selected?: boolean;

package/dist/compound-search-input.js

@@ -1,9 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { SearchIcon } from "lucide-react";
+import { FieldCounter } from "./field-counter";
 import { cn } from "./lib/utils";
-const CompoundSearchInput = React.forwardRef(({ actions, "aria-invalid": ariaInvalid, className, criteria, selected = false, ...props }, ref) => (_jsxs("div", { "data-slot": "compound-search-input", "data-selected": selected ? "true" : "false", className: cn("flex min-h-12 w-full min-w-0 flex-wrap items-center gap-1.5 rounded-control border border-input bg-background p-1.5 transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 data-[selected=true]:border-interactive data-[selected=true]:bg-highlight data-[selected=true]:ring-[3px] data-[selected=true]:ring-interactive/20", ariaInvalid === true || ariaInvalid === "true"
-        ? "border-destructive ring-destructive/20"
-        : undefined), children: [_jsx(SearchIcon, { "aria-hidden": "true", className: "ml-1.5 h-4 w-4 shrink-0 text-muted-foreground" }), criteria, _jsx("input", { ref: ref, "aria-invalid": ariaInvalid, className: cn("h-8 min-w-44 basis-52 flex-1 bg-transparent px-1.5 text-sm outline-none placeholder:text-muted-foreground", className), ...props }), actions ? (_jsx("span", { className: "ml-auto inline-flex h-8 shrink-0 items-center gap-1 text-muted-foreground", children: actions })) : null] })));
+const CompoundSearchInput = React.forwardRef(({ actions, showCount = false, value, defaultValue, onChange, "aria-invalid": ariaInvalid, className, criteria, selected = false, ...props }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "");
+    const generatedId = React.useId();
+    const limitId = showCount && props.maxLength !== undefined ? `search-limit-${generatedId}` : undefined;
+    return (_jsxs("div", { className: "grid gap-2", children: [_jsxs("div", { "data-slot": "compound-search-input", "data-selected": selected ? "true" : "false", className: cn("flex min-h-12 w-full min-w-0 flex-wrap items-center gap-1.5 rounded-control border border-input bg-background p-1.5 transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 data-[selected=true]:border-interactive data-[selected=true]:bg-highlight data-[selected=true]:ring-[3px] data-[selected=true]:ring-interactive/20", ariaInvalid === true || ariaInvalid === "true"
+                    ? "border-destructive ring-destructive/20"
+                    : undefined), children: [_jsx(SearchIcon, { "aria-hidden": "true", className: "ml-1.5 h-4 w-4 shrink-0 text-muted-foreground" }), criteria, _jsx("input", { ref: ref, "aria-invalid": ariaInvalid, className: cn("h-8 min-w-44 basis-52 flex-1 bg-transparent px-1.5 text-sm outline-none placeholder:text-muted-foreground", className), ...props, "aria-describedby": [props["aria-describedby"], limitId].filter(Boolean).join(" ") || undefined, value: value, defaultValue: defaultValue, onChange: (event) => {
+                            if (value === undefined)
+                                setUncontrolledValue(event.target.value);
+                            onChange === null || onChange === void 0 ? void 0 : onChange(event);
+                        } }), actions ? (_jsx("span", { className: "ml-auto inline-flex h-8 shrink-0 items-center gap-1 text-muted-foreground", children: actions })) : null] }), limitId && _jsx(FieldCounter, { id: limitId, count: String(value !== null && value !== void 0 ? value : uncontrolledValue).length, limit: props.maxLength })] }));
+});
 CompoundSearchInput.displayName = "CompoundSearchInput";
 export { CompoundSearchInput };

package/dist/date-input.js

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

package/dist/dialog.d.ts

@@ -9,6 +9,7 @@ export interface DialogAction extends Omit<ButtonProps, "children"> {
 }
 type DialogRenderable = React.ReactNode | ((helpers: DialogRenderHelpers) => React.ReactNode);
 export interface DialogProps {
+    variant?: "default" | "confirmation";
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -26,5 +27,5 @@ export interface DialogProps {
     /** Whether a pointer interaction outside the dialog closes it. */
     closeOnOutsideClick?: boolean;
 }
-declare function Dialog({ open, defaultOpen, onOpenChange, modal, trigger, title, description, children, footer, primaryAction, secondaryAction, contentClassName, bodyClassName, hideCloseButton, closeOnOutsideClick, }: DialogProps): import("react/jsx-runtime").JSX.Element;
+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;
 export { Dialog };

package/dist/dialog.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import * as React from "react";
 import { Button } from "./button";
 import { DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogSurface, DialogTitle, DialogTrigger, } from "./dialog-primitive";
+import { CircleAlert } from "lucide-react";
 import { cn } from "./lib/utils";
 function useControllableOpen({ open, defaultOpen, onOpenChange, }) {
     const [internalOpen, setInternalOpen] = React.useState(defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false);
@@ -31,7 +32,7 @@ function renderDialogAction({ action, close, defaultVariant, }) {
             }
         }, children: label }));
 }
-function Dialog({ open, defaultOpen, onOpenChange, modal, trigger, title, description, children, footer, primaryAction, secondaryAction, contentClassName, bodyClassName, hideCloseButton = false, closeOnOutsideClick = false, }) {
+function Dialog({ variant = "default", open, defaultOpen, onOpenChange, modal, trigger, title, description, children, footer, primaryAction, secondaryAction, contentClassName, bodyClassName, hideCloseButton = false, closeOnOutsideClick = false, }) {
     const [isOpen, setIsOpen] = useControllableOpen({
         open,
         defaultOpen,
@@ -43,11 +44,11 @@ function Dialog({ open, defaultOpen, onOpenChange, modal, trigger, title, descri
     const body = resolveDialogRenderable(children, helpers);
     const customFooter = resolveDialogRenderable(footer, helpers);
     const hasFooter = Boolean(customFooter || primaryAction || secondaryAction);
-    return (_jsxs(DialogRoot, { open: isOpen, onOpenChange: setIsOpen, modal: modal, children: [trigger ? _jsx(DialogTrigger, { asChild: true, children: trigger }) : null, _jsxs(DialogSurface, { ...(!description ? { "aria-describedby": undefined } : {}), className: contentClassName, hideCloseButton: hideCloseButton, onPointerDownOutside: (event) => {
+    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) => {
                     if (!closeOnOutsideClick) {
                         event.preventDefault();
                     }
-                }, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), description ? (_jsx(DialogDescription, { children: description })) : null] }), body ? _jsx("div", { className: cn("grid gap-4", bodyClassName), children: body }) : null, hasFooter ? (_jsx(DialogFooter, { children: customFooter !== null && customFooter !== void 0 ? customFooter : (_jsxs(_Fragment, { children: [secondaryAction
+                }, 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
                                     ? renderDialogAction({
                                         action: secondaryAction,
                                         close: helpers.close,

package/dist/dropdown-button.js

@@ -8,6 +8,7 @@ import { cn } from "./lib/utils";
 const splitButtonDividerClassNames = {
     default: "before:bg-button-primary-foreground/30",
     destructive: "before:bg-destructive-foreground/30",
+    warning: "before:bg-[hsl(var(--status-warning-foreground))]/30",
     outline: "before:bg-[hsl(var(--button-outline-border))]",
     secondary: "before:bg-secondary-foreground/20",
     ghost: "before:bg-border",

package/dist/editable-table.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Button } from "./button";
-import { PlusIcon } from "./animated-icons/plus";
+import { TableAddRow } from "./table-add-row";
 import { TrashIcon } from "./animated-icons/trash";
 import { Checkbox } from "./checkbox";
 import { EmptyState } from "./empty-state";
@@ -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 ? (_jsxs(Button, { type: "button", variant: "outline", onClick: handleAddRow, className: "w-full justify-center", children: [_jsx(PlusIcon, { size: 16 }), addRowLabel] })) : null] }));
+                                                    : 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] }));
 }
 EditableTable.displayName = "EditableTable";
 export { EditableTable };

package/dist/field-counter.d.ts

@@ -0,0 +1,7 @@
+/** Internal shared presentation for field length counters. */
+export declare function FieldCounter({ id, count, limit, unit }: {
+    id?: string;
+    count: number;
+    limit: number;
+    unit?: "words" | "characters";
+}): import("react/jsx-runtime").JSX.Element;

package/dist/field-counter.js

@@ -0,0 +1,5 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/** Internal shared presentation for field length counters. */
+export function FieldCounter({ id, count, limit, unit = "characters" }) {
+    return (_jsxs("div", { "data-slot": "field-counter", className: "flex items-start justify-between gap-3 text-sm text-muted-foreground", children: [_jsxs("span", { id: id, className: "sr-only", children: ["Maximum ", limit, " ", unit] }), _jsxs("span", { className: "ml-auto shrink-0 tabular-nums", "aria-live": "polite", "aria-atomic": "true", "aria-label": `${count} of ${limit} ${unit}`, children: [count, " / ", limit] })] }));
+}

package/dist/index.d.ts

@@ -9,16 +9,22 @@ export { AlertStack } from "./alert-stack";
 export type { AlertStackProps } from "./alert-stack";
 export { ActivityCard, ActivityCardActor, ActivityCardContent, } from "./activity-card";
 export type { ActivityCardActorProps, ActivityCardContentProps, ActivityCardDensity, ActivityCardIconTone, ActivityCardProps, } from "./activity-card";
+export { ChangelogActionPanel } from "./changelog-action-panel";
+export type { ChangelogActionPanelProps } from "./changelog-action-panel";
 export { Badge, badgeVariants } from "./badge";
 export { Card, CardGrid, CardSplitGrid, CardList, CardListItem, } from "./card";
 export type { CardGridProps, CardListItemProps, CardListProps, CardProps, CardSplitGridProps, } from "./card";
 export type { BadgeProps } from "./badge";
 export { MessageAttachmentRow, MessageItem, MessageNewDivider, MessageThread, formatMessageCardTimestamp, formatMessageDate, } from "./message-item";
 export type { MessageAttachmentRowProps, MessageItemAttachment, MessageItemData, MessageItemProps, MessageNewDividerProps, MessageThreadProps, } from "./message-item";
+export { MessageActionPanel } from "./message-action-panel";
+export type { MessageActionPanelProps } from "./message-action-panel";
 export { formatNotificationTimestamp, NotificationItem, NotificationList, NotificationPopover, NotificationTrigger, } from "./notification";
 export type { NotificationAction, NotificationFilter, NotificationIcon, NotificationItemData, NotificationItemProps, NotificationKind, NotificationListProps, NotificationPopoverProps, NotificationTimestamp, NotificationTriggerProps, NotificationTone, FormatNotificationTimestampOptions, } from "./notification";
 export { RoutingTimeline } from "./routing-timeline";
 export type { RoutingTimelineItem, RoutingTimelineItemKind, RoutingTimelineProps, } from "./routing-timeline";
+export { RoutingActionPanel } from "./routing-action-panel";
+export type { RoutingActionPanelProps } from "./routing-action-panel";
 export { RichTextEditor, formatFileSize, replaceTemplateVariables, sanitizeRichTextHtml, } from "./rich-text-editor";
 export type { AttachmentFile, RichTextEditorColor, RichTextEditorProps, RichTextEditorSendAction, RichTextEditorSendMetadata, RichTextEditorTemplate, TemplateContext, } from "./rich-text-editor";
 export { Calendar, CalendarDayButton } from "./calendar";
@@ -161,3 +167,7 @@ export type { CollapsibleProps } from "./collapsible";
 export { cn } from "./lib/utils";
 export { parseDateTime, formatDateTime } from "./lib/date-utils";
 export type { ParseDateTimeOptions } from "./lib/date-utils";
+export { ChecklistAttachments, ChecklistPanel, ChecklistSection, ChecklistSelection, ChecklistQuestion } from "./checklist";
+export type { ChecklistAttachmentsProps, ChecklistPanelProps, ChecklistSectionProps, ChecklistSelectionProps, ChecklistQuestionProps, ChecklistQuestionOption } from "./checklist";
+export { TableAddRow, type TableAddRowProps } from "./table-add-row";
+export { PopoverList, type PopoverListProps } from "./popover";

package/dist/index.js

@@ -4,11 +4,14 @@ export * from "./animated-icons";
 export { Alert, AlertAction, AlertConsent, alertVariants, } from "./alert";
 export { AlertStack } from "./alert-stack";
 export { ActivityCard, ActivityCardActor, ActivityCardContent, } from "./activity-card";
+export { ChangelogActionPanel } from "./changelog-action-panel";
 export { Badge, badgeVariants } from "./badge";
 export { Card, CardGrid, CardSplitGrid, CardList, CardListItem, } from "./card";
 export { MessageAttachmentRow, MessageItem, MessageNewDivider, MessageThread, formatMessageCardTimestamp, formatMessageDate, } from "./message-item";
+export { MessageActionPanel } from "./message-action-panel";
 export { formatNotificationTimestamp, NotificationItem, NotificationList, NotificationPopover, NotificationTrigger, } from "./notification";
 export { RoutingTimeline } from "./routing-timeline";
+export { RoutingActionPanel } from "./routing-action-panel";
 export { RichTextEditor, formatFileSize, replaceTemplateVariables, sanitizeRichTextHtml, } from "./rich-text-editor";
 export { Calendar, CalendarDayButton } from "./calendar";
 export { Checkbox } from "./checkbox";
@@ -84,3 +87,6 @@ export { Spinner, PageLoader, FullPageLoader } from "./spinner";
 export { Collapsible, CollapsibleSection } from "./collapsible";
 export { cn } from "./lib/utils";
 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";

package/dist/input.d.ts

@@ -1,6 +1,8 @@
 import * as React from "react";
 import { InputControl } from "./input-control";
 export interface InputProps extends Omit<React.ComponentProps<typeof InputControl>, "className"> {
+    /** Display a character counter when maxLength is set. */
+    showCount?: boolean;
     label: React.ReactNode;
     description?: React.ReactNode;
     error?: React.ReactNode;

package/dist/input.js

@@ -2,10 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
 import { InputControl } from "./input-control";
+import { FieldCounter } from "./field-counter";
 import { cn } from "./lib/utils";
-const Input = React.forwardRef(({ label, description, error, invalid = false, hideLabel = false, className, inputClassName, labelClassName, descriptionClassName, errorClassName, id, disabled, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, required, ...props }, ref) => {
+const Input = React.forwardRef(({ label, showCount = false, value, defaultValue, onChange, description, error, invalid = false, hideLabel = false, className, inputClassName, labelClassName, descriptionClassName, errorClassName, id, disabled, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, required, ...props }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "");
+    const count = String(value !== null && value !== void 0 ? value : uncontrolledValue).length;
     const generatedId = React.useId();
     const inputId = id !== null && id !== void 0 ? id : `input-${generatedId}`;
+    const limitId = showCount && props.maxLength !== undefined ? `${inputId}-limit` : undefined;
     const errorId = error ? `${inputId}-error` : undefined;
     const showDescription = Boolean(description) && !error;
     const descriptionId = showDescription ? `${inputId}-description` : undefined;
@@ -13,10 +17,14 @@ const Input = React.forwardRef(({ label, description, error, invalid = false, hi
         ariaInvalid === true ||
         ariaInvalid === "true" ||
         Boolean(error);
-    const describedBy = [ariaDescribedBy, descriptionId, errorId]
+    const describedBy = [ariaDescribedBy, descriptionId, errorId, limitId]
         .filter(Boolean)
         .join(" ") || undefined;
-    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, required: required, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsx(InputControl, { ref: ref, id: inputId, disabled: disabled, required: required, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": describedBy, className: inputClassName, ...props }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
+    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, required: required, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsx(InputControl, { ref: ref, id: inputId, disabled: disabled, required: required, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": describedBy, className: inputClassName, ...props, value: value, defaultValue: defaultValue, onChange: (event) => {
+                    if (value === undefined)
+                        setUncontrolledValue(event.target.value);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(event);
+                } }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, limitId && _jsx(FieldCounter, { id: limitId, count: count, limit: props.maxLength }), _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
 });
 Input.displayName = "Input";
 export { Input };

package/dist/message-action-panel.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { type DashboardActionPanelProps } from "./layout";
+export interface MessageActionPanelProps extends Omit<DashboardActionPanelProps, "children" | "headerSpacing" | "title"> {
+    title?: React.ReactNode;
+    children: React.ReactNode;
+}
+/**
+ * Shared message-panel frame. Message data and composer behaviour remain with
+ * the consuming application while this component keeps the panel UI stable.
+ */
+declare function MessageActionPanel({ title, subtitle, children, ...panelProps }: MessageActionPanelProps): import("react/jsx-runtime").JSX.Element;
+export { MessageActionPanel };

package/dist/message-action-panel.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DashboardActionPanel, } from "./layout";
+/**
+ * Shared message-panel frame. Message data and composer behaviour remain with
+ * the consuming application while this component keeps the panel UI stable.
+ */
+function MessageActionPanel({ title = "Messages", subtitle = "Find all correspondence here.", children, ...panelProps }) {
+    return (_jsx(DashboardActionPanel, { headerSpacing: "comfortable", title: title, subtitle: subtitle, ...panelProps, children: children }));
+}
+export { MessageActionPanel };

package/dist/notification.js

@@ -144,8 +144,12 @@ function NotificationItem({ notification, density = "default", variant = "row",
     };
     if (variant === "card") {
         const activityDensity = (_d = notification.activityDensity) !== null && _d !== void 0 ? _d : density;
-        const hasCardContent = notification.description !== undefined ||
-            notification.actor !== undefined ||
+        const hasDescription = notification.description !== undefined &&
+            notification.description !== null &&
+            notification.description !== "";
+        const actorBelongsInHeader = notification.actor !== undefined && !hasDescription && !hasActions;
+        const hasCardContent = hasDescription ||
+            (notification.actor !== undefined && !actorBelongsInHeader) ||
             hasActions;
         const activityElement = notification.href && !hasActions
             ? "a"
@@ -154,8 +158,8 @@ function NotificationItem({ notification, density = "default", variant = "row",
                 : "article";
         const unreadIndicator = isUnread && unreadLabel !== null ? (_jsx("span", { "data-slot": "notification-unread-indicator", className: "block size-2.5 rounded-full bg-primary ring-2 ring-background", children: _jsx("span", { className: "sr-only", children: unreadLabel }) })) : null;
         const cardTrailing = notification.badge || unreadIndicator ? (_jsxs("span", { className: "flex items-center gap-[var(--space-2)]", children: [notification.badge, unreadIndicator] })) : null;
-        return (_jsx(ActivityCard, { as: activityElement, "data-slot": "notification-item", "data-unread": isUnread ? "" : undefined, density: activityDensity, icon: _jsx(Icon, { className: activityDensity === "compact" ? "size-3.5" : "size-[24px]" }), iconTone: notification.iconAppearance === "plain" ? undefined : tone, title: notification.title, titleLines: labelLines, meta: meta, trailing: cardTrailing, href: notification.href, className: cn("group relative w-full text-left outline-none transition-colors", isUnread && "bg-primary/[0.045]", hasHoverSurface && "hover:bg-accent/70", isInteractive &&
-                "cursor-pointer focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", className), onClick: isInteractive ? handleClick : undefined, ...props, children: hasCardContent ? (_jsxs(ActivityCardContent, { density: activityDensity, children: [notification.description !== undefined ? (_jsx(Typography, { as: "div", variant: "bodySm", className: cn("text-left", isUnread ? "text-foreground/75" : "text-muted-foreground", descriptionLineClasses[descriptionLines]), children: notification.description })) : null, notification.actor !== undefined ? (_jsx(ActivityCardActor, { actor: notification.actor, label: actorLabel })) : null, hasActions ? (_jsx("div", { className: "flex flex-wrap gap-2", children: actions.map((action, index) => {
+        return (_jsx(ActivityCard, { as: activityElement, "data-slot": "notification-item", "data-unread": isUnread ? "" : undefined, density: activityDensity, icon: _jsx(Icon, { className: activityDensity === "compact" ? "size-3.5" : "size-[24px]" }), iconTone: notification.iconAppearance === "plain" ? undefined : tone, title: notification.title, titleLines: labelLines, meta: meta, headerContent: actorBelongsInHeader ? (_jsx(ActivityCardActor, { actor: notification.actor, label: actorLabel })) : undefined, trailing: cardTrailing, href: notification.href, className: cn("group relative w-full text-left outline-none transition-colors", isUnread && "bg-primary/[0.045]", hasHoverSurface && "hover:bg-accent/70", isInteractive &&
+                "cursor-pointer focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", className), onClick: isInteractive ? handleClick : undefined, ...props, children: hasCardContent ? (_jsxs(ActivityCardContent, { density: activityDensity, children: [hasDescription ? (_jsx(Typography, { as: "div", variant: "bodySm", className: cn("text-left", isUnread ? "text-foreground/75" : "text-muted-foreground", descriptionLineClasses[descriptionLines]), children: notification.description })) : null, notification.actor !== undefined && !actorBelongsInHeader ? (_jsx(ActivityCardActor, { actor: notification.actor, label: actorLabel })) : null, hasActions ? (_jsx("div", { className: "flex flex-wrap gap-2", children: actions.map((action, index) => {
                             var _a, _b;
                             return (_jsx(Button, { type: "button", variant: (_a = action.variant) !== null && _a !== void 0 ? _a : (index === 0 ? "outline" : "default"), size: "sm", disabled: action.disabled, className: cn("min-w-24", action.className), onClick: (event) => {
                                     var _a;

package/dist/page-section.d.ts

@@ -8,8 +8,9 @@ export interface PageSectionProps extends Omit<React.HTMLAttributes<HTMLElement>
     description?: React.ReactNode;
     headerAction?: React.ReactNode;
     titleAdornment?: React.ReactNode;
+    titleAdornmentSpacing?: "default" | "comfortable";
     headerClassName?: string;
     contentClassName?: string;
 }
-declare function PageSection({ title, description, headerAction, titleAdornment, className, headerClassName, contentClassName, children, ...props }: PageSectionProps): import("react/jsx-runtime").JSX.Element;
+declare function PageSection({ title, description, headerAction, titleAdornment, titleAdornmentSpacing, className, headerClassName, contentClassName, children, ...props }: PageSectionProps): import("react/jsx-runtime").JSX.Element;
 export { PageSection, PageSectionGroup };

package/dist/page-section.js

@@ -6,9 +6,9 @@ function PageSectionGroup({ variant = "divided", className, ...props }) {
     return (_jsx("div", { className: cn(variant === "divided" && "divide-y divide-border", variant === "cards" &&
             "space-y-4 [&>[data-slot=page-section]]:rounded-surface [&>[data-slot=page-section]]:border [&>[data-slot=page-section]]:border-border/70 [&>[data-slot=page-section]]:bg-card [&>[data-slot=page-section]]:p-5", className), ...props }));
 }
-function PageSection({ title, description, headerAction, titleAdornment, className, headerClassName, contentClassName, children, ...props }) {
+function PageSection({ title, description, headerAction, titleAdornment, titleAdornmentSpacing = "default", className, headerClassName, contentClassName, children, ...props }) {
     const renderedTitle = React.isValidElement(title) ? (title) : (_jsx(Typography, { as: "h3", variant: "subheading", children: title }));
     const renderedDescription = description == null ? null : React.isValidElement(description) ? (description) : (_jsx(Typography, { as: "p", variant: "caption", children: description }));
-    return (_jsxs("section", { "data-slot": "page-section", className: cn("py-6", className), ...props, children: [_jsxs("div", { className: cn("flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", headerClassName), children: [_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [renderedTitle, titleAdornment] }), renderedDescription] }), headerAction ? (_jsx("div", { className: "flex flex-wrap items-center justify-end gap-3 sm:shrink-0", children: headerAction })) : null] }), children ? (_jsx("div", { className: cn("pt-4", contentClassName), children: children })) : null] }));
+    return (_jsxs("section", { "data-slot": "page-section", className: cn("py-6", className), ...props, children: [_jsxs("div", { className: cn("flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", headerClassName), children: [_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsxs("div", { className: cn("flex flex-wrap items-center", titleAdornmentSpacing === "comfortable" ? "gap-4" : "gap-1.5"), children: [renderedTitle, titleAdornment] }), renderedDescription] }), headerAction ? (_jsx("div", { className: "flex flex-wrap items-center justify-end gap-3 sm:shrink-0", children: headerAction })) : null] }), children ? (_jsx("div", { className: cn("pt-4", contentClassName), children: children })) : null] }));
 }
 export { PageSection, PageSectionGroup };

package/dist/popover.d.ts

@@ -27,3 +27,8 @@ export interface PopoverTitleProps extends Omit<React.ComponentPropsWithoutRef<t
 }
 declare function PopoverTitle({ className, children, ...props }: PopoverTitleProps): import("react/jsx-runtime").JSX.Element;
 export { Popover, PopoverTitle };
+export interface PopoverListProps {
+    items: readonly string[];
+}
+/** Read-only information rows for a popover, without implying menu actions. */
+export declare function PopoverList({ items }: PopoverListProps): import("react/jsx-runtime").JSX.Element;

package/dist/popover.js

@@ -87,3 +87,7 @@ function PopoverTitle({ className, children, ...props }) {
     return (_jsx(Typography, { as: "p", variant: "label", "data-slot": "popover-title", className: className, ...props, children: children }));
 }
 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))) }));
+}

package/dist/rich-text-editor.js

@@ -351,11 +351,11 @@ export function RichTextEditor({ variant = "default", placeholder = "Type messag
         setTemplatePopoverOpen(false);
     };
     const hasSendActions = Boolean(sendActions === null || sendActions === void 0 ? void 0 : sendActions.length);
-    const sendAction = hasSendActions ? (_jsx(DropdownButton, { className: "w-full", align: "end", disabled: sendDisabled, label: isSending ? sendingLabel : sendLabel, leadingIcon: _jsx(SendIcon, { size: 16 }), split: true, onClick: () => {
+    const renderSendAction = ({ compact = false, fullWidth = false, } = {}) => hasSendActions ? (_jsx(DropdownButton, { className: fullWidth ? "w-full" : undefined, align: "end", disabled: sendDisabled, label: isSending ? sendingLabel : sendLabel, leadingIcon: _jsx(SendIcon, { size: 16 }), size: compact ? "sm" : undefined, split: true, onClick: () => {
             void handleSend();
         }, children: _jsx(PopoverMenuSection, { children: sendActions === null || sendActions === void 0 ? void 0 : sendActions.map((action) => (_jsx(PopoverMenuItem, { disabled: sendDisabled || action.disabled, onClick: () => {
                     void handleSend(action.metadata);
-                }, children: action.label }, action.id))) }) })) : (_jsxs(Button, { type: "button", className: "w-full", disabled: sendDisabled, onClick: () => {
+                }, children: action.label }, action.id))) }) })) : (_jsxs(Button, { type: "button", className: fullWidth ? "w-full" : undefined, size: compact ? "sm" : undefined, disabled: sendDisabled, "aria-label": isSending ? sendingLabel : sendLabel, onClick: () => {
             void handleSend();
         }, children: [_jsx(SendIcon, { size: 16 }), isSending ? sendingLabel : sendLabel] }));
     if (variant === "message") {
@@ -373,9 +373,7 @@ export function RichTextEditor({ variant = "default", placeholder = "Type messag
                                 }, children: _jsxs("div", { className: "flex items-end gap-2", children: [_jsx(Input, { ref: linkInputRef, label: "URL", id: "message-link-url", type: "url", placeholder: "https://example.com", value: linkUrl, onChange: (event) => setLinkUrl(event.target.value), onKeyDown: handleLinkKeyDown, inputClassName: "h-8 text-sm", autoFocus: true }), _jsx(Button, { type: "button", className: "h-8 px-3", onClick: handleLinkSubmit, disabled: !linkUrl.trim(), children: "Add" })] }) })] }), document.body), isFormattingOpen ? (_jsxs("div", { className: "flex flex-wrap items-center gap-[4px] border-t border-border px-[10px] py-[8px]", children: [_jsx(ToolbarIconButton, { label: "Bold", active: editor === null || editor === void 0 ? void 0 : editor.isActive("bold"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBold().run(), children: _jsx(BoldIcon, { size: 14 }) }), _jsx(ToolbarIconButton, { label: "Italic", active: editor === null || editor === void 0 ? void 0 : editor.isActive("italic"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleItalic().run(), children: _jsx(ItalicIcon, { size: 14 }) }), _jsx(ToolbarIconButton, { label: "Underline", active: editor === null || editor === void 0 ? void 0 : editor.isActive("underline"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleUnderline().run(), children: _jsx(UnderlineIcon, { size: 14 }) }), _jsx(ToolbarIconButton, { label: "Bullet list", active: editor === null || editor === void 0 ? void 0 : editor.isActive("bulletList"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBulletList().run(), children: _jsx(ListIcon, { size: 14 }) }), _jsx(ToolbarIconButton, { label: "Ordered list", active: editor === null || editor === void 0 ? void 0 : editor.isActive("orderedList"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleOrderedList().run(), children: _jsx(ListOrderedIcon, { size: 14 }) })] })) : null, _jsxs("div", { "data-slot": "message-composer-toolbar", className: "flex min-h-[52px] items-center justify-between px-[10px] py-[8px]", children: [_jsxs("div", { className: "flex items-center gap-[8px]", children: [_jsx(Tooltip, { content: `Attach files (max ${maxFileSizeLabel}) - ${acceptedFileTypesLabel}`, side: "top", contentClassName: "max-w-[240px] text-center", children: _jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", className: "h-[28px] w-[28px]", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, "aria-label": "Attach files", children: _jsx(PaperclipIcon, { size: 16 }) }) }), _jsxs("div", { className: "inline-flex h-[32px] overflow-hidden rounded-control border border-input bg-background", children: [_jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", className: "h-[32px] w-[32px] rounded-none border-r border-input", onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBold().run(), "aria-pressed": (_a = editor === null || editor === void 0 ? void 0 : editor.isActive("bold")) !== null && _a !== void 0 ? _a : false, "aria-label": "Bold", children: _jsx(BoldIcon, { size: 16 }) }), _jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", className: "h-[32px] w-[32px] rounded-none border-r border-input", onClick: openLinkMenu, "aria-label": "Add link", children: _jsx(LinkIcon, { size: 16 }) }), _jsx(Button, { type: "button", variant: "ghost", size: "compactIcon", className: "h-[32px] w-[32px] rounded-none", onClick: () => setIsFormattingOpen((open) => !open), "aria-expanded": isFormattingOpen, "aria-label": "Formatting options", children: _jsx(Baseline, { "aria-hidden": "true", className: "size-[16px]" }) })] })] }), _jsxs("div", { className: "flex items-center gap-[8px]", children: [showTemplates && (templates.length > 0 || templateCreateHref) ? (_jsxs(Popover, { open: templatePopoverOpen, onOpenChange: setTemplatePopoverOpen, align: "end", contentClassName: "w-96 p-0", trigger: _jsxs(Button, { type: "button", variant: "outline", size: "sm", children: ["Templates", _jsx(ChevronDownIcon, { size: 16 })] }), children: [_jsx("div", { className: "max-h-80 overflow-y-auto", children: templatesByCategory.map(({ category, templates }) => {
                                                 var _a;
                                                 return (_jsxs("div", { children: [_jsx("div", { className: "sticky top-0 bg-muted px-3 py-2 text-sm font-semibold text-foreground", children: (_a = templateCategoryLabels[category]) !== null && _a !== void 0 ? _a : category }), templates.map((template) => (_jsxs("button", { type: "button", className: "w-full border-b border-border/50 px-3 py-2 text-left text-sm transition-colors last:border-0 hover:bg-muted", onClick: () => applyTemplate(template), children: [_jsx("div", { className: "truncate font-medium", children: template.name }), template.description ? (_jsx("div", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: template.description })) : null] }, template.id)))] }, category));
-                                            }) }), templateCreateHref ? (_jsx("div", { className: "border-t p-2", children: _jsxs("a", { href: templateCreateHref, target: "_blank", rel: "noopener noreferrer", className: "flex w-full items-center justify-center gap-1.5 rounded-md px-3 py-2 text-sm text-interactive transition-colors hover:bg-muted", children: [_jsx(PlusIcon, { size: 16 }), templateCreateLabel] }) })) : null] })) : null, _jsx(Button, { type: "button", size: "sm", disabled: isSending || !onSend, "aria-label": isSending ? sendingLabel : sendLabel, onClick: () => {
-                                        void handleSend();
-                                    }, children: isSending ? sendingLabel : sendLabel })] })] })] }));
+                                            }) }), templateCreateHref ? (_jsx("div", { className: "border-t p-2", children: _jsxs("a", { href: templateCreateHref, target: "_blank", rel: "noopener noreferrer", className: "flex w-full items-center justify-center gap-1.5 rounded-md px-3 py-2 text-sm text-interactive transition-colors hover:bg-muted", children: [_jsx(PlusIcon, { size: 16 }), templateCreateLabel] }) })) : null] })) : null, renderSendAction({ compact: true })] })] })] }));
     }
     return (_jsxs("div", { ref: dropZoneRef, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, className: cn("overflow-hidden rounded-control border bg-background transition-all focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50", isExpanded && "shadow-md", isDragging && "border-2 border-primary bg-primary/5", className), children: [header && (_jsxs("div", { className: cn("flex items-center justify-between border-b bg-muted dark:bg-muted/30", inputControlPaddingClassName), children: [_jsx("div", { className: "flex-1", children: header }), _jsx("div", { className: "flex items-center gap-2", children: onExpandToggle && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-6 w-6", onClick: onExpandToggle, "aria-label": "Expand editor", children: _jsx(MaximizeIcon, { size: 14 }) })) })] })), _jsxs("div", { className: cn("bg-background transition-all", isExpanded ? "min-h-[200px]" : "min-h-[120px]"), children: [_jsx(EditorContent, { editor: editor, className: cn("text-sm", "[&_.ProseMirror]:min-h-[120px] [&_.ProseMirror]:outline-none", "[&_.ProseMirror_p.is-editor-empty:first-child::before]:text-muted-foreground", "[&_.ProseMirror_p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]", "[&_.ProseMirror_p.is-editor-empty:first-child::before]:float-left", "[&_.ProseMirror_p.is-editor-empty:first-child::before]:pointer-events-none", "[&_.ProseMirror_p.is-editor-empty:first-child::before]:h-0", "[&_.ProseMirror_ul]:my-2 [&_.ProseMirror_ul]:list-disc [&_.ProseMirror_ul]:pl-6", "[&_.ProseMirror_ol]:my-2 [&_.ProseMirror_ol]:list-decimal [&_.ProseMirror_ol]:pl-6", "[&_.ProseMirror_li]:my-1", "[&_.ProseMirror_ul_ul]:list-[circle] [&_.ProseMirror_ul_ul_ul]:list-[square]") }), linkPopoverOpen &&
                         linkMenuPosition &&
@@ -415,5 +413,5 @@ export function RichTextEditor({ variant = "default", placeholder = "Type messag
                                     }, children: color.value === "" && (_jsx("span", { className: "text-xs text-muted-foreground", children: "A" })) }, `bg-${color.name}`))) }) }), _jsx(ToolbarIconButton, { label: "Bullet list", active: editor === null || editor === void 0 ? void 0 : editor.isActive("bulletList"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBulletList().run(), children: _jsx(ListIcon, { size: 14 }) }), _jsx(ToolbarIconButton, { label: "Ordered list", active: editor === null || editor === void 0 ? void 0 : editor.isActive("orderedList"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleOrderedList().run(), children: _jsx(ListOrderedIcon, { size: 14 }) }), _jsx(Tooltip, { content: `Attach files (max ${maxFileSizeLabel}) - ${acceptedFileTypesLabel}`, side: "top", contentClassName: "max-w-[240px] text-center", children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-8 w-8", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, "aria-label": "Attach files", children: _jsx(PaperclipIcon, { size: 14 }) }) }), _jsx(ToolbarIconButton, { label: "Add link", active: editor === null || editor === void 0 ? void 0 : editor.isActive("link"), onClick: openLinkMenu, children: _jsx(LinkIcon, { size: 14 }) }), showTemplates && (templates.length > 0 || templateCreateHref) && (_jsx(_Fragment, { children: _jsxs(Popover, { open: templatePopoverOpen, onOpenChange: setTemplatePopoverOpen, align: "end", contentClassName: "w-96 p-0", trigger: _jsxs(Button, { type: "button", variant: "ghost", className: "h-8 gap-1 text-muted-foreground", children: ["Template", _jsx(ChevronDownIcon, { size: 14 })] }), children: [_jsx("div", { className: "max-h-80 overflow-y-auto", children: templatesByCategory.map(({ category, templates }) => {
                                             var _a;
                                             return (_jsxs("div", { children: [_jsx("div", { className: "sticky top-0 bg-muted px-3 py-2 text-sm font-semibold text-foreground", children: (_a = templateCategoryLabels[category]) !== null && _a !== void 0 ? _a : category }), templates.map((template) => (_jsxs("button", { type: "button", className: "w-full border-b border-border/50 px-3 py-2 text-left text-sm transition-colors last:border-0 hover:bg-muted", onClick: () => applyTemplate(template), children: [_jsx("div", { className: "truncate font-medium", children: template.name }), template.description && (_jsx("div", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: template.description }))] }, template.id)))] }, category));
-                                        }) }), templateCreateHref && (_jsx("div", { className: "border-t p-2", children: _jsxs("a", { href: templateCreateHref, target: "_blank", rel: "noopener noreferrer", className: "flex w-full items-center justify-center gap-1.5 rounded-md px-3 py-2 text-sm text-interactive transition-colors hover:bg-muted", children: [_jsx(PlusIcon, { size: 16 }), templateCreateLabel] }) }))] }) }))] }) }), _jsx("div", { className: "bg-muted px-3 pb-2 pt-1 dark:bg-background", children: sendAction })] }));
+                                        }) }), templateCreateHref && (_jsx("div", { className: "border-t p-2", children: _jsxs("a", { href: templateCreateHref, target: "_blank", rel: "noopener noreferrer", className: "flex w-full items-center justify-center gap-1.5 rounded-md px-3 py-2 text-sm text-interactive transition-colors hover:bg-muted", children: [_jsx(PlusIcon, { size: 16 }), templateCreateLabel] }) }))] }) }))] }) }), _jsx("div", { className: "bg-muted px-3 pb-2 pt-1 dark:bg-background", children: renderSendAction({ fullWidth: true }) })] }));
 }

package/dist/routing-action-panel.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { type DashboardActionPanelProps } from "./layout";
+import { type RoutingTimelineItem } from "./routing-timeline";
+import { type SelectOption } from "./select";
+export interface RoutingActionPanelProps extends Omit<DashboardActionPanelProps, "children"> {
+    items: RoutingTimelineItem[];
+    isLoading?: boolean;
+    loadingLabel?: string;
+    emptyMessage?: React.ReactNode;
+    emptyDescription?: React.ReactNode;
+    routeOptions: SelectOption[];
+    routeValue?: string;
+    routePlaceholder?: string;
+    routeDescription?: React.ReactNode;
+    routeDisabled?: boolean;
+    onRouteValueChange?: (value: string) => void;
+    /** Workflow-specific fields rendered before the route target. */
+    supplementaryFields?: React.ReactNode;
+    remarks: string;
+    remarksDescription?: React.ReactNode;
+    remarksPlaceholder?: string;
+    remarksRequired?: boolean;
+    remarksRows?: number;
+    /** Blocking validation messages, collapsed above the submit action. */
+    validationMessages?: readonly string[];
+    onRemarksChange: (value: string) => void;
+    submitLabel?: React.ReactNode;
+    submitDisabled?: boolean;
+    submitLoading?: boolean;
+    onSubmit: () => void;
+}
+/**
+ * Shared routing surface for constrained dashboard popovers and right panels.
+ * Consumers provide workflow data and actions; the component owns the complete
+ * visual composition so different records render routing consistently.
+ */
+declare function RoutingActionPanel({ items, isLoading, loadingLabel, emptyMessage, emptyDescription, routeOptions, routeValue, routePlaceholder, routeDescription, routeDisabled, onRouteValueChange, supplementaryFields, remarks, remarksDescription, remarksPlaceholder, remarksRequired, remarksRows, validationMessages, onRemarksChange, submitLabel, submitDisabled, submitLoading, onSubmit, ...panelProps }: RoutingActionPanelProps): import("react/jsx-runtime").JSX.Element;
+export { RoutingActionPanel };

package/dist/routing-action-panel.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Route } from "lucide-react";
+import { Button } from "./button";
+import { DashboardActionPanel, DashboardActionPanelEmptyState, DashboardRightPanelBody, } from "./layout";
+import { RoutingTimeline, } from "./routing-timeline";
+import { Select } from "./select";
+import { Spinner } from "./spinner";
+import { Textarea } from "./textarea";
+/**
+ * Shared routing surface for constrained dashboard popovers and right panels.
+ * Consumers provide workflow data and actions; the component owns the complete
+ * visual composition so different records render routing consistently.
+ */
+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, remarks, remarksDescription, remarksPlaceholder = "Type remarks", remarksRequired = false, remarksRows = 2, validationMessages = [], onRemarksChange, submitLabel = "Route", submitDisabled = false, submitLoading = false, onSubmit, ...panelProps }) {
+    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", disabled: routeDisabled || submitDisabled || validationMessages.length > 0, loading: submitLoading, onClick: onSubmit, children: [_jsx(Route, { "aria-hidden": "true", className: "size-4" }), submitLabel] }) })] }));
+    return (_jsx(DashboardActionPanel, { headerSpacing: "comfortable", ...panelProps, children: _jsx(DashboardRightPanelBody, { spacing: "comfortable", topInset: "none", footerVariant: "separated", footer: footer, children: isLoading ? (_jsx("div", { "data-slot": "routing-action-panel-loading", className: "absolute inset-0 flex items-center justify-center", children: _jsx(Spinner, { size: "md", label: loadingLabel }) })) : items.length === 0 ? (_jsx(DashboardActionPanelEmptyState, { icon: Route, message: emptyMessage, description: emptyDescription })) : (_jsx(RoutingTimeline, { density: "compact", items: items })) }) }));
+}
+export { RoutingActionPanel };

package/dist/search-input.d.ts

@@ -1,6 +1,8 @@
 import * as React from "react";
 import { InputControl } from "./input-control";
 export interface SearchInputProps extends Omit<React.ComponentProps<typeof InputControl>, "onChange" | "type" | "value"> {
+    /** Display a character counter when maxLength is set. */
+    showCount?: boolean;
     value: string;
     onValueChange: (value: string) => void;
     label?: React.ReactNode;

package/dist/search-input.js

@@ -4,9 +4,10 @@ import * as React from "react";
 import { XIcon } from "./animated-icons/x";
 import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
 import { InputControl } from "./input-control";
+import { FieldCounter } from "./field-counter";
 import { cn } from "./lib/utils";
 import { SearchInputShell } from "./search-input-shell";
-const SearchInput = React.forwardRef(({ value, onValueChange, label = "Search", hideLabel = true, description, error, invalid = false, selected = false, placeholder = "Search...", containerClassName, labelClassName, descriptionClassName, errorClassName, onSearch, searchDelay = 300, searchOnChange = true, searchOnEnter = true, className, id, disabled, onKeyDown, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
+const SearchInput = React.forwardRef(({ value, showCount = false, onValueChange, label = "Search", hideLabel = true, description, error, invalid = false, selected = false, placeholder = "Search...", containerClassName, labelClassName, descriptionClassName, errorClassName, onSearch, searchDelay = 300, searchOnChange = true, searchOnEnter = true, className, id, disabled, onKeyDown, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
     const searchTimeoutRef = React.useRef();
     React.useEffect(() => {
         return () => {
@@ -17,6 +18,7 @@ const SearchInput = React.forwardRef(({ value, onValueChange, label = "Search",
     }, []);
     const generatedId = React.useId();
     const inputId = id !== null && id !== void 0 ? id : `search-input-${generatedId}`;
+    const limitId = showCount && props.maxLength !== undefined ? `${inputId}-limit` : undefined;
     const errorId = error ? `${inputId}-error` : undefined;
     const showDescription = Boolean(description) && !error;
     const descriptionId = showDescription ? `${inputId}-description` : undefined;
@@ -24,7 +26,7 @@ const SearchInput = React.forwardRef(({ value, onValueChange, label = "Search",
         ariaInvalid === true ||
         ariaInvalid === "true" ||
         Boolean(error);
-    const describedBy = [ariaDescribedBy, descriptionId, errorId]
+    const describedBy = [ariaDescribedBy, descriptionId, errorId, limitId]
         .filter(Boolean)
         .join(" ") || undefined;
     const runSearch = React.useCallback((nextValue) => {
@@ -67,7 +69,7 @@ const SearchInput = React.forwardRef(({ value, onValueChange, label = "Search",
     return (_jsxs(Field, { className: containerClassName, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs(SearchInputShell, { children: [_jsx(InputControl, { ref: ref, id: inputId, type: "text", placeholder: placeholder, value: value, onChange: handleChange, onKeyDown: handleKeyDown, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": describedBy, "data-selected": selected ? "true" : undefined, className: cn("bg-background pl-8 pr-7 data-[selected=true]:border-interactive data-[selected=true]:bg-highlight data-[selected=true]:ring-[3px] data-[selected=true]:ring-interactive/20", className), ...props }), value ? (_jsx("button", { type: "button", onClick: () => {
                             onValueChange("");
                             runSearch("");
-                        }, disabled: disabled, className: "absolute right-1.5 top-1/2 -translate-y-1/2 cursor-pointer rounded-sm p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:pointer-events-none", "aria-label": "Clear search", children: _jsx(XIcon, { size: 14 }) })) : null] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
+                        }, disabled: disabled, className: "absolute right-1.5 top-1/2 -translate-y-1/2 cursor-pointer rounded-sm p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:pointer-events-none", "aria-label": "Clear search", children: _jsx(XIcon, { size: 14 }) })) : null] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, limitId && _jsx(FieldCounter, { id: limitId, count: value.length, limit: props.maxLength }), _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
 });
 SearchInput.displayName = "SearchInput";
 export { SearchInput };

package/dist/table-add-row.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export interface TableAddRowProps {
+    children?: React.ReactNode;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    disabled?: boolean;
+}
+/** Shared full-width add action beneath editable tables. */
+export declare function TableAddRow({ children, onClick, disabled }: TableAddRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/table-add-row.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "./button";
+import { PlusIcon } from "./animated-icons/plus";
+/** Shared full-width add action beneath editable tables. */
+export function TableAddRow({ children = "Add Row", onClick, disabled }) {
+    return (_jsxs(Button, { type: "button", variant: "outline", onClick: onClick, disabled: disabled, className: "w-full justify-center", children: [_jsx(PlusIcon, { size: 16 }), children] }));
+}

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", 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 [&_[data-slot=button]]:px-0", wrap ? "whitespace-normal" : "whitespace-nowrap", overflowContainmentClassName({ containOverflow, wrap }), className), style: getTableColumnSizingStyle({
         style,
         width,
         minWidth,

package/dist/tailwind-preset.js

@@ -147,6 +147,14 @@ export const neaTailwindPreset = {
                 12: "var(--space-12)",
             },
             keyframes: {
+                "collapsible-down": {
+                    from: { height: "0" },
+                    to: { height: "var(--radix-collapsible-content-height)" },
+                },
+                "collapsible-up": {
+                    from: { height: "var(--radix-collapsible-content-height)" },
+                    to: { height: "0" },
+                },
                 "accordion-down": {
                     from: { height: "0" },
                     to: { height: "var(--radix-accordion-content-height)" },
@@ -157,6 +165,8 @@ export const neaTailwindPreset = {
                 },
             },
             animation: {
+                "collapsible-down": "collapsible-down 0.2s ease-out",
+                "collapsible-up": "collapsible-up 0.2s ease-out",
                 "accordion-down": "accordion-down 0.2s ease-out",
                 "accordion-up": "accordion-up 0.2s ease-out",
             },

package/dist/textarea.d.ts

@@ -4,6 +4,10 @@ export interface TextareaProps extends Omit<React.ComponentProps<typeof Textarea
     label: React.ReactNode;
     size?: "default" | "comfortable";
     description?: React.ReactNode;
+    /** Show a word counter and validate this limit without truncating the entered text. */
+    maxWords?: number;
+    /** Display a character counter for maxLength; maxWords takes precedence. */
+    showCount?: boolean;
     error?: React.ReactNode;
     invalid?: boolean;
     hideLabel?: boolean;

package/dist/textarea.js

@@ -2,12 +2,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
 import { inputControlPaddingClassName } from "./input-control";
+import { FieldCounter } from "./field-counter";
 import { cn } from "./lib/utils";
 const TextareaControl = React.forwardRef(({ className, ...props }, ref) => (_jsx("textarea", { ref: ref, "data-slot": "textarea", className: cn("flex min-h-16 w-full rounded-control border border-input bg-background text-sm transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20", inputControlPaddingClassName, className), ...props })));
 TextareaControl.displayName = "TextareaControl";
-const Textarea = React.forwardRef(({ label, size = "default", description, error, invalid = false, hideLabel = false, className, textareaClassName, labelClassName, descriptionClassName, errorClassName, id, disabled, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
+const Textarea = React.forwardRef(({ label, size = "default", description, maxWords, showCount = false, value, defaultValue, onChange, error: suppliedError, invalid = false, hideLabel = false, className, textareaClassName, labelClassName, descriptionClassName, errorClassName, id, disabled, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "");
+    const text = String(value !== null && value !== void 0 ? value : uncontrolledValue);
+    const words = text.trim() ? text.trim().split(/\s+/).length : 0;
+    const hasWordLimit = maxWords !== undefined;
+    const error = suppliedError || (hasWordLimit && words > maxWords
+        ? `Use ${maxWords} words or fewer.`
+        : undefined);
     const generatedId = React.useId();
     const textareaId = id !== null && id !== void 0 ? id : `textarea-${generatedId}`;
+    const limit = maxWords !== null && maxWords !== void 0 ? maxWords : (showCount ? props.maxLength : undefined);
+    const wordLimitId = limit !== undefined ? `${textareaId}-word-limit` : undefined;
     const errorId = error ? `${textareaId}-error` : undefined;
     const showDescription = Boolean(description) && !error;
     const descriptionId = showDescription ? `${textareaId}-description` : undefined;
@@ -15,11 +25,15 @@ const Textarea = React.forwardRef(({ label, size = "default", description, error
         ariaInvalid === true ||
         ariaInvalid === "true" ||
         Boolean(error);
-    const describedBy = [ariaDescribedBy, descriptionId, errorId]
+    const describedBy = [ariaDescribedBy, descriptionId, errorId, wordLimitId]
         .filter(Boolean)
         .join(" ") || undefined;
     return (_jsxs(Field, { className: cn(size === "comfortable" && "gap-[8px]", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: textareaId, className: cn(size === "comfortable" && "text-[16px] leading-[24px]", hideLabel && "sr-only", labelClassName), children: label }), _jsx(TextareaControl, { ref: ref, id: textareaId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": describedBy, className: cn(size === "comfortable" &&
-                    "min-h-[76px] px-[16px] py-[12px] text-[16px] leading-[24px]", textareaClassName), ...props }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: cn(size === "comfortable" && "text-[14px] leading-[20px]", descriptionClassName), children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
+                    "min-h-[76px] px-[16px] py-[12px] text-[16px] leading-[24px]", textareaClassName), ...props, value: value, defaultValue: defaultValue, onChange: (event) => {
+                    if (value === undefined)
+                        setUncontrolledValue(event.target.value);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(event);
+                } }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: cn(size === "comfortable" && "text-[14px] leading-[20px]", descriptionClassName), children: description })) : null, limit !== undefined && _jsx(FieldCounter, { id: wordLimitId, count: hasWordLimit ? words : text.length, limit: limit, unit: hasWordLimit ? "words" : "characters" }), _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
 });
 Textarea.displayName = "Textarea";
 export { Textarea };

package/package.json

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