@papernote/ui 1.10.14 → 1.10.16

package/dist/index.esm.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { forwardRef, useState, useRef, useEffect, useCallback, useId, useImperativeHandle, useMemo, Children, isValidElement, cloneElement, Component, createContext as createContext$1, useContext, useLayoutEffect, createElement, useReducer } from 'react';
-import { Loader2, Check, X, EyeOff, Eye, AlertTriangle, CheckCircle, AlertCircle, ChevronDown, Search, Minus, Star, Calendar as Calendar$1, ChevronLeft, ChevronRight, Clock, ChevronUp, Plus, TrendingUp, TrendingDown, Lightbulb, Sparkles, PartyPopper, Flame, Shield, Pencil, User, Users, Activity, Mail, Send, Info, Trash2, ChevronsLeft, ChevronsRight, Circle, MoreVertical, GripVertical, Upload, Bold, Italic, Underline, List, ListOrdered, Code, Link, MoreHorizontal, Home, FileText, Image, File as File$1, Menu as Menu$1, ArrowDown, Settings, LogOut, Moon, Sun, Bell, ExternalLink, Edit, Trash, Pin, PinOff, Download, Save, ArrowUpDown, Filter, XCircle, BarChart3, MessageSquare } from 'lucide-react';
+import { Loader2, Check, X, EyeOff, Eye, AlertTriangle, CheckCircle, AlertCircle, ChevronDown, Search, Minus, Star, Calendar as Calendar$1, ChevronLeft, ChevronRight, Clock, ChevronUp, Plus, TrendingUp, TrendingDown, Lightbulb, Sparkles, PartyPopper, Flame, Shield, Pencil, User, Users, Activity, Mail, Send, Info, Trash2, HelpCircle, ChevronsLeft, ChevronsRight, Circle, MoreVertical, GripVertical, Upload, Bold, Italic, Underline, List, ListOrdered, Code, Link, ExternalLink, MoreHorizontal, Home, FileText, Image, File as File$1, Menu as Menu$1, ArrowDown, Settings, LogOut, Moon, Sun, Bell, Edit, Trash, Pin, PinOff, Download, Save, ArrowUpDown, Filter, XCircle, BarChart3, MessageSquare } from 'lucide-react';
 import { createPortal } from 'react-dom';
-import { useInRouterContext, useNavigate, useLocation, Link as Link$1 } from 'react-router-dom';
+import { Link as Link$1, useInRouterContext, useNavigate, useLocation } from 'react-router-dom';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {
@@ -702,7 +702,7 @@ function usePrefersMobile() {
 }
 
 // Size classes for trigger button
-const sizeClasses$a = {
+const sizeClasses$b = {
     sm: 'h-8 text-sm py-1',
     md: 'h-10 text-base py-2',
     lg: 'h-12 text-base py-3 min-h-touch', // 44px touch target
@@ -1019,14 +1019,14 @@ const Select = forwardRef((props, ref) => {
     if (useNativeSelect) {
         return (jsxs("div", { className: "w-full", children: [label && (jsx("label", { id: labelId, className: "label", children: label })), jsxs("div", { className: "relative", children: [jsxs("select", { ref: nativeSelectRef, value: value || '', onChange: (e) => onChange?.(e.target.value), disabled: disabled, className: `
               input w-full appearance-none pr-10
-              ${sizeClasses$a[effectiveSize]}
+              ${sizeClasses$b[effectiveSize]}
               ${error ? 'border-error-400 focus:border-error-400 focus:ring-error-400' : ''}
               ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
             `, "aria-labelledby": label ? labelId : undefined, "aria-invalid": error ? 'true' : undefined, "aria-describedby": error ? errorId : (helperText ? helperTextId : undefined), children: [jsx("option", { value: "", disabled: true, children: placeholder }), options.map((opt) => (jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))), groups.map((group) => (jsx("optgroup", { label: group.label, children: group.options.map((opt) => (jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))) }, group.label)))] }), jsx(ChevronDown, { className: "absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-ink-500 pointer-events-none" })] }), error && (jsx("p", { id: errorId, className: "mt-2 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsx("p", { id: helperTextId, className: "mt-2 text-xs text-ink-600", children: helperText }))] }));
     }
     return (jsxs("div", { className: "w-full", children: [label && (jsx("label", { id: labelId, className: "label", children: label })), jsx("div", { ref: selectRef, className: "relative", children: jsxs("button", { ref: buttonRef, type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `
             input w-full flex items-center justify-between px-3
-            ${sizeClasses$a[effectiveSize]}
+            ${sizeClasses$b[effectiveSize]}
             ${error ? 'border-error-400 focus:border-error-400 focus:ring-error-400' : ''}
             ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
           `, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? placeholder : undefined, "aria-activedescendant": activeDescendant, "aria-invalid": error ? 'true' : undefined, "aria-describedby": error ? errorId : (helperText ? helperTextId : undefined), "aria-disabled": disabled, children: [jsxs("span", { className: `flex items-center gap-2 ${selectedOption ? 'text-ink-800' : 'text-ink-400'}`, children: [loading && jsx(Loader2, { className: "h-4 w-4 animate-spin text-ink-500" }), !loading && selectedOption?.icon && jsx("span", { children: selectedOption.icon }), selectedOption ? selectedOption.label : placeholder] }), jsxs("div", { className: "flex items-center gap-1", children: [clearable && value && (jsx("button", { type: "button", onClick: (e) => {
@@ -1171,7 +1171,7 @@ const Switch = forwardRef(({ checked, onChange, label, description, disabled = f
 Switch.displayName = 'Switch';
 
 // Size classes for textarea
-const sizeClasses$9 = {
+const sizeClasses$a = {
     sm: 'px-3 py-2 text-sm',
     md: 'px-4 py-3 text-sm',
     lg: 'px-4 py-3.5 text-base', // Larger padding and text for mobile
@@ -1259,7 +1259,7 @@ const Textarea = forwardRef(({ label, helperText, validationState, validationMes
               bg-white bg-subtle-grain transition-all duration-200
               focus:outline-none focus:ring-2 ${getResizeClass()}
               disabled:bg-paper-100 disabled:text-ink-400 disabled:cursor-not-allowed disabled:opacity-60
-              ${sizeClasses$9[effectiveSize]}
+              ${sizeClasses$a[effectiveSize]}
               ${getValidationClasses()}
               ${loading ? 'pr-10' : ''}
               ${className}
@@ -4586,7 +4586,7 @@ function BottomSheetActions({ children, className = '' }) {
     return (jsx("div", { className: `flex flex-col gap-2 px-4 py-4 border-t border-paper-200 bg-white ${className}`, children: children }));
 }
 
-const sizeClasses$8 = {
+const sizeClasses$9 = {
     sm: 'max-w-md',
     md: 'max-w-lg',
     lg: 'max-w-2xl',
@@ -4726,7 +4726,7 @@ function Modal({ isOpen, onClose, title, children, size = 'md', showCloseButton
         return createPortal(jsx(BottomSheet, { isOpen: isOpen, onClose: onClose, title: title, height: mobileHeight, showHandle: mobileShowHandle, showCloseButton: showCloseButton, children: children }), document.body);
     }
     // Render as standard modal on desktop
-    const modalContent = (jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in", onMouseDown: handleBackdropMouseDown, onClick: handleBackdropClick, children: jsxs("div", { ref: modalRef, className: `${sizeClasses$8[size]} w-full bg-white bg-subtle-grain rounded-xl shadow-2xl border border-paper-200 ${getAnimationClass()}`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: [jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-paper-200", children: [jsx("h3", { id: titleId, className: "text-lg font-medium text-ink-900", children: title }), showCloseButton && (jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Close modal", children: jsx(X, { className: "h-5 w-5" }) }))] }), jsx("div", { className: `px-6 py-4 ${scrollable || maxHeight ? 'overflow-y-auto' : ''}`, style: {
+    const modalContent = (jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in", onMouseDown: handleBackdropMouseDown, onClick: handleBackdropClick, children: jsxs("div", { ref: modalRef, className: `${sizeClasses$9[size]} w-full bg-white bg-subtle-grain rounded-xl shadow-2xl border border-paper-200 ${getAnimationClass()}`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: [jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-paper-200", children: [jsx("h3", { id: titleId, className: "text-lg font-medium text-ink-900", children: title }), showCloseButton && (jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Close modal", children: jsx(X, { className: "h-5 w-5" }) }))] }), jsx("div", { className: `px-6 py-4 ${scrollable || maxHeight ? 'overflow-y-auto' : ''}`, style: {
                         maxHeight: maxHeight || (scrollable ? 'calc(100vh - 200px)' : undefined),
                     }, children: children })] }) }));
     return createPortal(modalContent, document.body);
@@ -5789,7 +5789,7 @@ function Alert({ variant = 'info', title, children, onClose, className = '', act
     return (jsx("div", { className: `rounded-lg border p-4 ${styles.container} ${className}`, role: "alert", children: jsxs("div", { className: "flex items-start gap-3", children: [jsx("div", { className: "flex-shrink-0 mt-0.5", children: styles.icon }), jsxs("div", { className: "flex-1 min-w-0", children: [title && jsx("h4", { className: "text-sm font-medium mb-1", children: title }), jsx("div", { className: "text-sm", children: children }), actions.length > 0 && (jsx("div", { className: "flex gap-2 mt-3", children: actions.map((action, index) => (jsx("button", { onClick: action.onClick, className: getButtonStyles(action.variant), children: action.label }, index))) }))] }), onClose && (jsx("button", { onClick: onClose, className: "flex-shrink-0 text-current opacity-70 hover:opacity-100 transition-opacity", "aria-label": "Close alert", children: jsx(X, { className: "h-4 w-4" }) }))] }) }));
 }
 
-const sizeClasses$7 = {
+const sizeClasses$8 = {
     left: {
         sm: 'w-64',
         md: 'w-96',
@@ -5868,7 +5868,7 @@ function Drawer({ isOpen, onClose, title, children, placement = 'right', size =
     const isHorizontal = placement === 'left' || placement === 'right';
     return (jsxs("div", { className: "fixed inset-0 z-50 flex", children: [showOverlay && (jsx("div", { className: "fixed inset-0 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in", onClick: handleOverlayClick, "aria-hidden": "true" })), jsxs("div", { className: `
           fixed ${placementClasses[placement]}
-          ${sizeClasses$7[placement][size]}
+          ${sizeClasses$8[placement][size]}
           bg-white border-paper-200 shadow-2xl
           ${isHorizontal ? 'border-r' : 'border-b'}
           ${animationClasses[placement].enter}
@@ -6010,6 +6010,16 @@ function useConfirmDialog() {
     };
 }
 
+const sizeClasses$7 = {
+    sm: 'h-3.5 w-3.5',
+    md: 'h-4 w-4',
+    lg: 'h-5 w-5',
+};
+function HelpTooltip({ content, icon = 'help', size = 'md', position = 'top', className = '', }) {
+    const IconComponent = icon === 'info' ? Info : HelpCircle;
+    return (jsx(Tooltip, { content: content, position: position, children: jsx("span", { className: `inline-flex items-center justify-center text-ink-400 hover:text-ink-600 cursor-help transition-colors ${className}`, role: "button", "aria-label": "Help", tabIndex: 0, children: jsx(IconComponent, { className: sizeClasses$7[size] }) }) }));
+}
+
 function Popover({ trigger: triggerElement, children, placement = 'bottom', triggerMode = 'click', showArrow = true, offset = 8, open: controlledOpen, onOpenChange, closeOnClickOutside = true, closeOnEscape = true, showDelay = 0, hideDelay = 0, className = '', disabled = false, }) {
     const [internalOpen, setInternalOpen] = useState(false);
     const [position, setPosition] = useState({ top: 0, left: 0 });
@@ -9350,6 +9360,370 @@ function Collapsible({ trigger, children, defaultOpen = false, open: controlledO
             ` }))] }), jsx("div", { id: "collapsible-content", ref: contentRef, className: "overflow-hidden transition-all duration-300 ease-in-out", style: { height: `${height}px` }, "aria-hidden": !isOpen, children: jsx("div", { className: contentClassName, children: children }) })] }));
 }
 
+function Badge({ children, variant = 'neutral', size = 'md', icon, onRemove, className = '', dot = false, pill = false, truncate = false, maxWidth, animate = false, }) {
+    const variantStyles = {
+        success: 'bg-success-50 text-success-700 border-success-200',
+        warning: 'bg-warning-50 text-warning-700 border-warning-200',
+        error: 'bg-error-50 text-error-700 border-error-200',
+        info: 'bg-primary-50 text-primary-700 border-primary-200',
+        neutral: 'bg-paper-100 text-ink-700 border-paper-300',
+    };
+    const dotVariantStyles = {
+        success: 'bg-success-500',
+        warning: 'bg-warning-500',
+        error: 'bg-error-500',
+        info: 'bg-primary-500',
+        neutral: 'bg-ink-400',
+    };
+    const sizeStyles = {
+        sm: 'px-2 py-0.5 text-xs gap-1',
+        md: 'px-3 py-1 text-xs gap-1.5',
+        lg: 'px-3 py-1.5 text-sm gap-2',
+    };
+    // Pill variant has tighter horizontal padding and fully rounded ends
+    const pillSizeStyles = {
+        sm: 'px-1.5 py-0.5 text-xs gap-1',
+        md: 'px-2 py-0.5 text-xs gap-1',
+        lg: 'px-2.5 py-1 text-sm gap-1.5',
+    };
+    const dotSizeStyles = {
+        sm: 'h-1.5 w-1.5',
+        md: 'h-2 w-2',
+        lg: 'h-2.5 w-2.5',
+    };
+    const iconSize = {
+        sm: 'h-3 w-3',
+        md: 'h-3.5 w-3.5',
+        lg: 'h-4 w-4',
+    };
+    // Dot variant - just a colored circle
+    if (dot) {
+        return (jsx("span", { className: `
+          inline-block rounded-full
+          ${dotVariantStyles[variant]}
+          ${dotSizeStyles[size]}
+          ${animate ? 'animate-fade-in' : ''}
+          ${className}
+        `, "aria-label": `${variant} indicator` }));
+    }
+    // Regular badge
+    return (jsxs("span", { className: `
+        inline-flex items-center border font-medium whitespace-nowrap
+        ${pill ? 'rounded-full' : 'rounded-full'}
+        ${variantStyles[variant]}
+        ${pill ? pillSizeStyles[size] : sizeStyles[size]}
+        ${truncate ? 'max-w-full overflow-hidden' : ''}
+        ${animate ? 'animate-fade-in' : ''}
+        ${className}
+      `, style: maxWidth ? { maxWidth } : undefined, children: [icon && jsx("span", { className: `${iconSize[size]} flex-shrink-0`, children: icon }), jsx("span", { className: truncate ? 'truncate' : '', children: children }), onRemove && (jsx("button", { onClick: onRemove, className: "ml-1 hover:opacity-70 transition-opacity flex-shrink-0", "aria-label": "Remove badge", children: jsx(X, { className: iconSize[size] }) }))] }));
+}
+
+/**
+ * CollapsibleSection - A card-style collapsible container for dashboard sections
+ *
+ * Wraps content with a styled header that includes title, optional icon, badge count,
+ * and "View All" navigation. Supports both controlled and uncontrolled modes for
+ * localStorage persistence via onOpenChange callback.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <CollapsibleSection
+ *   title="Upcoming Bills"
+ *   badge={5}
+ *   badgeVariant="warning"
+ *   viewAllHref="/bills"
+ * >
+ *   <BillsList bills={upcomingBills} />
+ * </CollapsibleSection>
+ * ```
+ *
+ * @example With localStorage persistence
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(() =>
+ *   localStorage.getItem('section-open') !== 'false'
+ * );
+ *
+ * <CollapsibleSection
+ *   title="Pending Items"
+ *   badge={pendingCount}
+ *   open={isOpen}
+ *   onOpenChange={(open) => {
+ *     setIsOpen(open);
+ *     localStorage.setItem('section-open', String(open));
+ *   }}
+ * >
+ *   {children}
+ * </CollapsibleSection>
+ * ```
+ */
+function CollapsibleSection({ title, icon, badge, badgeVariant = 'neutral', viewAllHref, viewAllLabel = 'View All', onViewAll, defaultOpen = true, open: controlledOpen, onOpenChange, children, className = '', }) {
+    const isControlled = controlledOpen !== undefined;
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const isOpen = isControlled ? controlledOpen : internalOpen;
+    const contentRef = useRef(null);
+    const [height, setHeight] = useState(0);
+    const handleToggle = () => {
+        const newOpen = !isOpen;
+        if (!isControlled) {
+            setInternalOpen(newOpen);
+        }
+        onOpenChange?.(newOpen);
+    };
+    const handleViewAllClick = (e) => {
+        if (onViewAll) {
+            e.preventDefault();
+            onViewAll();
+        }
+    };
+    // Update height when content changes or open state changes
+    useEffect(() => {
+        if (!contentRef.current)
+            return;
+        if (isOpen) {
+            const contentHeight = contentRef.current.scrollHeight;
+            setHeight(contentHeight);
+        }
+        else {
+            setHeight(0);
+        }
+    }, [isOpen, children]);
+    // Recalculate height when window resizes
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleResize = () => {
+            if (contentRef.current) {
+                setHeight(contentRef.current.scrollHeight);
+            }
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [isOpen]);
+    const ViewAllContent = (jsxs(Fragment, { children: [jsx("span", { children: viewAllLabel }), jsx(ExternalLink, { className: "h-3.5 w-3.5" })] }));
+    return (jsxs("div", { className: `
+        bg-white bg-subtle-grain border-2 border-paper-300 rounded-xl shadow-sm
+        ${className}
+      `, children: [jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-paper-200", children: [jsxs("button", { type: "button", onClick: handleToggle, className: "flex items-center gap-3 text-left flex-1 min-w-0 group", "aria-expanded": isOpen, children: [jsx(ChevronDown, { className: `
+              h-5 w-5 text-ink-400 transition-transform duration-200 flex-shrink-0
+              group-hover:text-ink-600
+              ${isOpen ? 'rotate-0' : '-rotate-90'}
+            ` }), icon && (jsx("span", { className: "flex-shrink-0 text-ink-500", children: icon })), jsx("span", { className: "font-medium text-ink-900 truncate", children: title }), badge !== undefined && (jsx(Badge, { variant: badgeVariant, size: "sm", pill: true, children: badge }))] }), (viewAllHref || onViewAll) && (viewAllHref ? (jsx(Link$1, { to: viewAllHref, onClick: onViewAll ? handleViewAllClick : undefined, className: "flex items-center gap-1.5 text-sm text-primary-600 hover:text-primary-700 font-medium flex-shrink-0 ml-4", children: ViewAllContent })) : (jsx("button", { onClick: onViewAll, className: "flex items-center gap-1.5 text-sm text-primary-600 hover:text-primary-700 font-medium flex-shrink-0 ml-4", children: ViewAllContent })))] }), jsx("div", { ref: contentRef, className: "overflow-hidden transition-all duration-300 ease-in-out", style: { height: `${height}px` }, "aria-hidden": !isOpen, children: jsx("div", { className: "p-5", children: children }) })] }));
+}
+
+/**
+ * SummaryCard - Dashboard metric card with trend indicators and actions
+ *
+ * Displays a key metric with optional trend indicator, subtitle, and quick actions.
+ * Suitable for dashboard grids showing financial summaries, goal progress, etc.
+ *
+ * @example Basic metric
+ * ```tsx
+ * <SummaryCard
+ *   title="Net Worth"
+ *   icon={<Wallet className="h-5 w-5" />}
+ *   value={125000}
+ *   valuePrefix="$"
+ *   trend={{ direction: 'up', value: '12.5%', label: 'vs last month' }}
+ * />
+ * ```
+ *
+ * @example With actions
+ * ```tsx
+ * <SummaryCard
+ *   title="Monthly Income"
+ *   value="$8,500"
+ *   trend={{ direction: 'up', value: '+$500' }}
+ *   subtitle="3 income sources"
+ *   actions={[
+ *     { label: 'View Details', href: '/income' },
+ *     { label: 'Add Income', onClick: openAddModal }
+ *   ]}
+ * />
+ * ```
+ *
+ * @example Clickable card
+ * ```tsx
+ * <SummaryCard
+ *   title="Goals Progress"
+ *   value="3/5"
+ *   valueSuffix=" completed"
+ *   href="/goals"
+ *   subtitle="2 goals due this month"
+ * />
+ * ```
+ */
+function SummaryCard({ title, icon, value, valuePrefix, valueSuffix, trend, subtitle, href, onClick, actions = [], className = '', loading = false, }) {
+    const isClickable = !!(href || onClick);
+    const handleCardClick = () => {
+        if (onClick) {
+            onClick();
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (isClickable && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            handleCardClick();
+        }
+    };
+    const getTrendColor = (direction) => {
+        switch (direction) {
+            case 'up':
+                return 'text-success-600';
+            case 'down':
+                return 'text-error-600';
+            case 'neutral':
+                return 'text-ink-500';
+        }
+    };
+    const getTrendIcon = (direction) => {
+        switch (direction) {
+            case 'up':
+                return jsx(TrendingUp, { className: "h-4 w-4" });
+            case 'down':
+                return jsx(TrendingDown, { className: "h-4 w-4" });
+            case 'neutral':
+                return jsx(Minus, { className: "h-4 w-4" });
+        }
+    };
+    const cardContent = (jsxs(Fragment, { children: [jsxs("div", { className: "flex items-center gap-2 mb-3", children: [icon && (jsx("span", { className: "flex-shrink-0 text-ink-500", children: icon })), jsx("span", { className: "text-sm font-medium text-ink-600 truncate", children: title }), isClickable && (jsx(ChevronRight, { className: "h-4 w-4 text-ink-400 ml-auto flex-shrink-0" }))] }), jsxs("div", { className: "text-3xl font-semibold text-ink-900 tracking-tight", children: [valuePrefix, typeof value === 'number' ? value.toLocaleString() : value, valueSuffix && (jsx("span", { className: "text-lg font-normal text-ink-500", children: valueSuffix }))] }), trend && (jsxs("div", { className: `flex items-center gap-1.5 mt-2 text-sm font-medium ${getTrendColor(trend.direction)}`, children: [getTrendIcon(trend.direction), jsx("span", { children: trend.value }), trend.label && (jsx("span", { className: "text-ink-500 font-normal", children: trend.label }))] })), subtitle && (jsx("div", { className: "text-sm text-ink-500 mt-2", children: subtitle })), actions.length > 0 && (jsx("div", { className: "flex flex-wrap gap-3 mt-4 pt-3 border-t border-paper-200", children: actions.map((action, index) => {
+                    const actionContent = (jsx("span", { className: "text-sm font-medium text-primary-600 hover:text-primary-700", children: action.label }));
+                    return action.href ? (jsx(Link$1, { to: action.href, onClick: (e) => e.stopPropagation(), children: actionContent }, index)) : (jsx("button", { onClick: (e) => {
+                            e.stopPropagation();
+                            action.onClick?.();
+                        }, className: "text-sm font-medium text-primary-600 hover:text-primary-700", children: action.label }, index));
+                }) }))] }));
+    const cardProps = {
+        variant: 'compact',
+        loading,
+        className: `${className} ${isClickable ? 'cursor-pointer' : ''}`,
+        hoverable: isClickable,
+        ...(onClick && !href && {
+            onClick: handleCardClick,
+            role: 'button',
+            tabIndex: 0,
+            onKeyDown: handleKeyDown,
+        }),
+    };
+    // If href is provided, wrap in Link
+    if (href) {
+        return (jsx(Link$1, { to: href, className: "block", children: jsx(Card, { ...cardProps, children: cardContent }) }));
+    }
+    return (jsx(Card, { ...cardProps, children: cardContent }));
+}
+
+/**
+ * PriorityAlertBanner - Displays urgent/action-required alerts
+ *
+ * Shows a stack of priority alerts at the top of a page. Supports multiple
+ * severity levels, dismissible alerts, and navigation to related pages.
+ * Auto-hides when no alerts are present.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <PriorityAlertBanner
+ *   alerts={[
+ *     { id: '1', severity: 'error', message: 'overdue bills', count: 3, href: '/bills' },
+ *     { id: '2', severity: 'warning', message: 'Bank sync failed', dismissible: true }
+ *   ]}
+ *   onDismiss={(id) => dismissAlert(id)}
+ * />
+ * ```
+ *
+ * @example Sticky at top of page
+ * ```tsx
+ * <PriorityAlertBanner
+ *   alerts={alerts}
+ *   onDismiss={handleDismiss}
+ *   sticky
+ * />
+ * ```
+ */
+function PriorityAlertBanner({ alerts, onDismiss, sticky = false, className = '', }) {
+    // Don't render if no alerts
+    if (alerts.length === 0) {
+        return null;
+    }
+    const getSeverityStyles = (severity) => {
+        switch (severity) {
+            case 'error':
+                return {
+                    container: 'bg-error-50 border-error-200 text-error-900',
+                    icon: jsx(AlertCircle, { className: "h-5 w-5 text-error-600 flex-shrink-0" }),
+                    hoverBg: 'hover:bg-error-100',
+                    dismissHover: 'hover:text-error-700 hover:bg-error-100',
+                };
+            case 'warning':
+                return {
+                    container: 'bg-warning-50 border-warning-200 text-warning-900',
+                    icon: jsx(AlertTriangle, { className: "h-5 w-5 text-warning-600 flex-shrink-0" }),
+                    hoverBg: 'hover:bg-warning-100',
+                    dismissHover: 'hover:text-warning-700 hover:bg-warning-100',
+                };
+            case 'info':
+                return {
+                    container: 'bg-primary-50 border-primary-200 text-primary-900',
+                    icon: jsx(Info, { className: "h-5 w-5 text-primary-600 flex-shrink-0" }),
+                    hoverBg: 'hover:bg-primary-100',
+                    dismissHover: 'hover:text-primary-700 hover:bg-primary-100',
+                };
+        }
+    };
+    const formatAlertContent = (alert) => {
+        const parts = [];
+        if (alert.count !== undefined) {
+            parts.push(alert.count.toString());
+        }
+        if (alert.amount !== undefined) {
+            parts.push(new Intl.NumberFormat('en-US', {
+                style: 'currency',
+                currency: 'USD',
+            }).format(alert.amount));
+        }
+        if (parts.length > 0) {
+            return `${parts.join(' • ')} ${alert.message}`;
+        }
+        return alert.message;
+    };
+    const renderAlert = (alert) => {
+        const styles = getSeverityStyles(alert.severity);
+        const isClickable = !!(alert.href || alert.onClick);
+        const content = formatAlertContent(alert);
+        const alertContent = (jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [styles.icon, jsx("span", { className: "text-sm font-medium truncate", children: content }), isClickable && (jsx(ChevronRight, { className: "h-4 w-4 opacity-60 flex-shrink-0" }))] }));
+        const handleClick = (e) => {
+            if (alert.onClick) {
+                e.preventDefault();
+                alert.onClick();
+            }
+        };
+        const handleDismiss = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onDismiss?.(alert.id);
+        };
+        const containerClassName = `
+      flex items-center gap-2 px-4 py-3 border-b last:border-b-0
+      ${styles.container}
+      ${isClickable ? `cursor-pointer ${styles.hoverBg} transition-colors` : ''}
+    `;
+        const dismissButton = alert.dismissible && onDismiss && (jsx("button", { onClick: handleDismiss, className: `
+          p-1 rounded-md opacity-70 hover:opacity-100 transition-all
+          ${styles.dismissHover}
+        `, "aria-label": "Dismiss alert", children: jsx(X, { className: "h-4 w-4" }) }));
+        if (alert.href) {
+            return (jsxs(Link$1, { to: alert.href, onClick: alert.onClick ? handleClick : undefined, className: containerClassName, children: [alertContent, dismissButton] }, alert.id));
+        }
+        if (alert.onClick) {
+            return (jsxs("button", { onClick: handleClick, className: `${containerClassName} w-full text-left`, children: [alertContent, dismissButton] }, alert.id));
+        }
+        return (jsxs("div", { className: containerClassName, children: [alertContent, dismissButton] }, alert.id));
+    };
+    return (jsx("div", { className: `
+        bg-white border border-paper-300 rounded-lg shadow-sm overflow-hidden
+        ${sticky ? 'sticky top-0 z-50' : ''}
+        ${className}
+      `, role: "alert", "aria-live": "polite", children: alerts.map(renderAlert) }));
+}
+
 const sizeClasses$2 = {
     sm: {
         header: 'h-10 px-3',
@@ -10881,64 +11255,6 @@ function Breadcrumbs({ items, showHome = true }) {
             })] }));
 }
 
-function Badge({ children, variant = 'neutral', size = 'md', icon, onRemove, className = '', dot = false, pill = false, truncate = false, maxWidth, animate = false, }) {
-    const variantStyles = {
-        success: 'bg-success-50 text-success-700 border-success-200',
-        warning: 'bg-warning-50 text-warning-700 border-warning-200',
-        error: 'bg-error-50 text-error-700 border-error-200',
-        info: 'bg-primary-50 text-primary-700 border-primary-200',
-        neutral: 'bg-paper-100 text-ink-700 border-paper-300',
-    };
-    const dotVariantStyles = {
-        success: 'bg-success-500',
-        warning: 'bg-warning-500',
-        error: 'bg-error-500',
-        info: 'bg-primary-500',
-        neutral: 'bg-ink-400',
-    };
-    const sizeStyles = {
-        sm: 'px-2 py-0.5 text-xs gap-1',
-        md: 'px-3 py-1 text-xs gap-1.5',
-        lg: 'px-3 py-1.5 text-sm gap-2',
-    };
-    // Pill variant has tighter horizontal padding and fully rounded ends
-    const pillSizeStyles = {
-        sm: 'px-1.5 py-0.5 text-xs gap-1',
-        md: 'px-2 py-0.5 text-xs gap-1',
-        lg: 'px-2.5 py-1 text-sm gap-1.5',
-    };
-    const dotSizeStyles = {
-        sm: 'h-1.5 w-1.5',
-        md: 'h-2 w-2',
-        lg: 'h-2.5 w-2.5',
-    };
-    const iconSize = {
-        sm: 'h-3 w-3',
-        md: 'h-3.5 w-3.5',
-        lg: 'h-4 w-4',
-    };
-    // Dot variant - just a colored circle
-    if (dot) {
-        return (jsx("span", { className: `
-          inline-block rounded-full
-          ${dotVariantStyles[variant]}
-          ${dotSizeStyles[size]}
-          ${animate ? 'animate-fade-in' : ''}
-          ${className}
-        `, "aria-label": `${variant} indicator` }));
-    }
-    // Regular badge
-    return (jsxs("span", { className: `
-        inline-flex items-center border font-medium whitespace-nowrap
-        ${pill ? 'rounded-full' : 'rounded-full'}
-        ${variantStyles[variant]}
-        ${pill ? pillSizeStyles[size] : sizeStyles[size]}
-        ${truncate ? 'max-w-full overflow-hidden' : ''}
-        ${animate ? 'animate-fade-in' : ''}
-        ${className}
-      `, style: maxWidth ? { maxWidth } : undefined, children: [icon && jsx("span", { className: `${iconSize[size]} flex-shrink-0`, children: icon }), jsx("span", { className: truncate ? 'truncate' : '', children: children }), onRemove && (jsx("button", { onClick: onRemove, className: "ml-1 hover:opacity-70 transition-opacity flex-shrink-0", "aria-label": "Remove badge", children: jsx(X, { className: iconSize[size] }) }))] }));
-}
-
 const TabsContext = createContext$1(null);
 function useTabsContext() {
     const context = useContext(TabsContext);
@@ -60992,5 +61308,5 @@ function Responsive({ mobile, tablet, desktop, }) {
     return jsx(Fragment, { children: mobile || tablet || desktop });
 }
 
-export { Accordion, AchievementBadge, AchievementUnlock, ActionBar, ActionBarCenter, ActionBarLeft, ActionBarRight, ActionButton, ActivityFeed, AdminModal, Alert, AlertDialog, AppLayout, Autocomplete, Avatar, BREAKPOINTS, Badge, BottomNavigation, BottomNavigationSpacer, BottomSheet, BottomSheetActions, BottomSheetContent, BottomSheetHeader, Box, Breadcrumbs, Button, ButtonGroup, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardView, Carousel, Celebration, Checkbox, CheckboxList, Chip, ChipGroup, CollaboratorAvatars, Collapsible, ColorPicker, Combobox, ComingSoon, CommandPalette, CompactStat, ConfirmDialog, ContextMenu, ControlBar, CurrencyDisplay, CurrencyInput, Dashboard, DashboardContent, DashboardHeader, DataGrid, DataTable, DataTableCardView, DateDisplay, DatePicker, DateRangePicker, DateTimePicker, DesktopOnly, Drawer, DrawerFooter, DropZone, Dropdown, DropdownTrigger, EmptyState, ErrorBoundary, ExpandablePanel, ExpandablePanelContainer, ExpandablePanelSpacer, ExpandableRowButton, ExpandableToolbar, ExpandedRowEditForm, ExportButton, FORMULA_CATEGORIES, FORMULA_DEFINITIONS, FORMULA_NAMES, FieldArray, FileUpload, FilterBar, FilterControls, FilterStatusBanner, FloatingActionButton, Form, FormContext, FormControl, FormWizard, Grid, GridItem, Hide, HorizontalScroll, HoverCard, InfiniteScroll, Input, InviteCard, KanbanBoard, Layout, Loading, LoadingOverlay, Logo, MarkdownEditor, MaskedInput, Menu, MenuDivider, MobileHeader, MobileHeaderSpacer, MobileLayout, MobileOnly, MobileProvider, Modal, ModalFooter, MotivationalMessage, MultiSelect, NotificationBanner, NotificationBar, NotificationBell, NotificationIndicator, NumberInput, Page, PageHeader, PageLayout, PageNavigation, Pagination, PasswordInput, PermissionBadge, Popover, Progress, ProgressCelebration, PullToRefresh, QueryTransparency, RadioGroup, Rating, Responsive, RichTextEditor, SearchBar, SearchableList, Select, Separator, SharedBadge, Show, Sidebar, SidebarGroup, Skeleton, SkeletonCard$1 as SkeletonCard, SkeletonTable, Slider, Spreadsheet, SpreadsheetReport, Stack, StatCard, StatItem, StatsCardGrid, StatsGrid, StatusBadge, StatusBar, StepIndicator, Stepper, StreakBadge, SuccessCheck, SwipeActions, SwipeableCard, SwipeableListItem, Switch, Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger, Text, Textarea, ThemeToggle, TimePicker, Timeline, TimezoneSelector, Toast, ToastContainer, Tooltip, Transfer, TreeView, TwoColumnContent, UserProfileButton, addErrorMessage, addInfoMessage, addSuccessMessage, addWarningMessage, calculateColumnWidth, createActionsSection, createFiltersSection, createMultiSheetExcel, createPageControlsSection, createQueryDetailsSection, exportDataTableToExcel, exportToExcel, formatStatisticValue, formatStatistics, getFormula, getFormulasByCategory, getLocalTimezone, isValidTimezone, loadColumnOrder, loadColumnWidths, reorderArray, saveColumnOrder, saveColumnWidths, searchFormulas, statusManager, useBreadcrumbReset, useBreakpoint, useBreakpointValue, useCelebration, useColumnReorder, useColumnResize, useCommandPalette, useConfirmDialog, useDelighters, useFABScroll, useFormContext, useIsDesktop, useIsMobile, useIsTablet, useIsTouchDevice, useMediaQuery, useMobileContext, useOrientation, usePrefersMobile, useResponsiveCallback, useSafeAreaInsets, useViewportSize, withMobileContext };
+export { Accordion, AchievementBadge, AchievementUnlock, ActionBar, ActionBarCenter, ActionBarLeft, ActionBarRight, ActionButton, ActivityFeed, AdminModal, Alert, AlertDialog, AppLayout, Autocomplete, Avatar, BREAKPOINTS, Badge, BottomNavigation, BottomNavigationSpacer, BottomSheet, BottomSheetActions, BottomSheetContent, BottomSheetHeader, Box, Breadcrumbs, Button, ButtonGroup, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardView, Carousel, Celebration, Checkbox, CheckboxList, Chip, ChipGroup, CollaboratorAvatars, Collapsible, CollapsibleSection, ColorPicker, Combobox, ComingSoon, CommandPalette, CompactStat, ConfirmDialog, ContextMenu, ControlBar, CurrencyDisplay, CurrencyInput, Dashboard, DashboardContent, DashboardHeader, DataGrid, DataTable, DataTableCardView, DateDisplay, DatePicker, DateRangePicker, DateTimePicker, DesktopOnly, Drawer, DrawerFooter, DropZone, Dropdown, DropdownTrigger, EmptyState, ErrorBoundary, ExpandablePanel, ExpandablePanelContainer, ExpandablePanelSpacer, ExpandableRowButton, ExpandableToolbar, ExpandedRowEditForm, ExportButton, FORMULA_CATEGORIES, FORMULA_DEFINITIONS, FORMULA_NAMES, FieldArray, FileUpload, FilterBar, FilterControls, FilterStatusBanner, FloatingActionButton, Form, FormContext, FormControl, FormWizard, Grid, GridItem, HelpTooltip, Hide, HorizontalScroll, HoverCard, InfiniteScroll, Input, InviteCard, KanbanBoard, Layout, Loading, LoadingOverlay, Logo, MarkdownEditor, MaskedInput, Menu, MenuDivider, MobileHeader, MobileHeaderSpacer, MobileLayout, MobileOnly, MobileProvider, Modal, ModalFooter, MotivationalMessage, MultiSelect, NotificationBanner, NotificationBar, NotificationBell, NotificationIndicator, NumberInput, Page, PageHeader, PageLayout, PageNavigation, Pagination, PasswordInput, PermissionBadge, Popover, PriorityAlertBanner, Progress, ProgressCelebration, PullToRefresh, QueryTransparency, RadioGroup, Rating, Responsive, RichTextEditor, SearchBar, SearchableList, Select, Separator, SharedBadge, Show, Sidebar, SidebarGroup, Skeleton, SkeletonCard$1 as SkeletonCard, SkeletonTable, Slider, Spreadsheet, SpreadsheetReport, Stack, StatCard, StatItem, StatsCardGrid, StatsGrid, StatusBadge, StatusBar, StepIndicator, Stepper, StreakBadge, SuccessCheck, SummaryCard, SwipeActions, SwipeableCard, SwipeableListItem, Switch, Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger, Text, Textarea, ThemeToggle, TimePicker, Timeline, TimezoneSelector, Toast, ToastContainer, Tooltip, Transfer, TreeView, TwoColumnContent, UserProfileButton, addErrorMessage, addInfoMessage, addSuccessMessage, addWarningMessage, calculateColumnWidth, createActionsSection, createFiltersSection, createMultiSheetExcel, createPageControlsSection, createQueryDetailsSection, exportDataTableToExcel, exportToExcel, formatStatisticValue, formatStatistics, getFormula, getFormulasByCategory, getLocalTimezone, isValidTimezone, loadColumnOrder, loadColumnWidths, reorderArray, saveColumnOrder, saveColumnWidths, searchFormulas, statusManager, useBreadcrumbReset, useBreakpoint, useBreakpointValue, useCelebration, useColumnReorder, useColumnResize, useCommandPalette, useConfirmDialog, useDelighters, useFABScroll, useFormContext, useIsDesktop, useIsMobile, useIsTablet, useIsTouchDevice, useMediaQuery, useMobileContext, useOrientation, usePrefersMobile, useResponsiveCallback, useSafeAreaInsets, useViewportSize, withMobileContext };
 //# sourceMappingURL=index.esm.js.map