@papernote/ui 1.7.7 → 1.8.0

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { forwardRef, useState, useEffect, useCallback, useRef, useId, useImperativeHandle, useMemo, Children, isValidElement, cloneElement, Component, createContext as createContext$1, useLayoutEffect, createElement, useContext, useReducer } from 'react';
-import { Loader2, X, EyeOff, Eye, AlertTriangle, CheckCircle, AlertCircle, ChevronDown, Search, Check, Minus, Star, Calendar as Calendar$1, ChevronLeft, ChevronRight, Clock, ChevronUp, Plus, TrendingUp, TrendingDown, Info, Trash2, ChevronsLeft, ChevronsRight, Circle, MoreVertical, GripVertical, Upload, Bold, Italic, Underline, List, ListOrdered, Code, Link, Home, FileText, Image, File as File$1, Menu as Menu$1, ArrowDown, User, Settings, LogOut, Moon, Sun, Bell, Edit, Trash, Pin, PinOff, Download, Save, ArrowUpDown, Filter, XCircle, BarChart3, MessageSquare } from 'lucide-react';
+import { Loader2, X, EyeOff, Eye, AlertTriangle, CheckCircle, AlertCircle, ChevronDown, Search, Check, Minus, Star, Calendar as Calendar$1, ChevronLeft, ChevronRight, Clock, ChevronUp, Plus, TrendingUp, TrendingDown, 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, User, 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';
 
@@ -2507,7 +2507,7 @@ const Card = forwardRef(({ children, variant = 'default', width = 'auto', classN
     const baseStyles = 'bg-white bg-subtle-grain border-2 border-paper-300 transition-shadow duration-200';
     const variantStyles = {
         default: 'rounded-xl shadow-lg p-8',
-        compact: 'rounded-lg shadow-md p-5',
+        compact: 'rounded-lg shadow-md p-3', // 12px padding for mobile-density layouts
         flat: 'rounded-lg p-5',
     };
     const widthStyles = {
@@ -2623,6 +2623,7 @@ function Separator({ orientation = 'horizontal', className = '', spacing = 'md',
  *
  * Spacing scale (use either `spacing` or `gap` prop - they're aliases):
  * - none: 0
+ * - tight: 0.25rem (1) - for mobile-density layouts
  * - xs: 0.5rem (2)
  * - sm: 0.75rem (3)
  * - md: 1.5rem (6)
@@ -2650,6 +2651,7 @@ const Stack = forwardRef(({ children, direction = 'vertical', spacing, gap, alig
     const spacingClasses = {
         vertical: {
             none: '',
+            tight: 'space-y-1', // 4px - for mobile-density layouts
             xs: 'space-y-2',
             sm: 'space-y-3',
             md: 'space-y-6',
@@ -2658,6 +2660,7 @@ const Stack = forwardRef(({ children, direction = 'vertical', spacing, gap, alig
         },
         horizontal: {
             none: '',
+            tight: 'space-x-1', // 4px - for mobile-density layouts
             xs: 'space-x-2',
             sm: 'space-x-3',
             md: 'space-x-6',
@@ -2955,7 +2958,7 @@ const GridItem = ({ colSpan, rowSpan, children, className = '', ...boxProps }) =
  * <Text ref={textRef}>Measurable text</Text>
  * ```
  */
-const Text = forwardRef(({ children, as: Component = 'p', size = 'base', weight = 'normal', color = 'primary', align = 'left', truncate = false, lineClamp, transform, className = '', ...htmlProps }, ref) => {
+const Text = forwardRef(({ children, as: Component = 'p', size = 'base', smSize, mdSize, lgSize, weight = 'normal', color = 'primary', align = 'left', truncate = false, lineClamp, transform, className = '', ...htmlProps }, ref) => {
     const sizeClasses = {
         xs: 'text-xs',
         sm: 'text-sm',
@@ -2964,6 +2967,31 @@ const Text = forwardRef(({ children, as: Component = 'p', size = 'base', weight
         xl: 'text-xl',
         '2xl': 'text-2xl',
     };
+    // Responsive size classes
+    const smSizeClasses = {
+        xs: 'sm:text-xs',
+        sm: 'sm:text-sm',
+        base: 'sm:text-base',
+        lg: 'sm:text-lg',
+        xl: 'sm:text-xl',
+        '2xl': 'sm:text-2xl',
+    };
+    const mdSizeClasses = {
+        xs: 'md:text-xs',
+        sm: 'md:text-sm',
+        base: 'md:text-base',
+        lg: 'md:text-lg',
+        xl: 'md:text-xl',
+        '2xl': 'md:text-2xl',
+    };
+    const lgSizeClasses = {
+        xs: 'lg:text-xs',
+        sm: 'lg:text-sm',
+        base: 'lg:text-base',
+        lg: 'lg:text-lg',
+        xl: 'lg:text-xl',
+        '2xl': 'lg:text-2xl',
+    };
     const weightClasses = {
         normal: 'font-normal',
         medium: 'font-medium',
@@ -3001,6 +3029,9 @@ const Text = forwardRef(({ children, as: Component = 'p', size = 'base', weight
     // Build class list
     const classes = [
         sizeClasses[size],
+        smSize ? smSizeClasses[smSize] : '',
+        mdSize ? mdSizeClasses[mdSize] : '',
+        lgSize ? lgSizeClasses[lgSize] : '',
         weightClasses[weight],
         colorClasses[color],
         alignClasses[align],
@@ -3107,24 +3138,48 @@ 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 heightPresets = {
-    sm: '33vh',
-    md: '50vh',
-    lg: '75vh',
-    full: '90vh',
-};
-function BottomSheet({ isOpen, onClose, children, title, height = 'md', showHandle = true, showCloseButton = true, closeOnOverlayClick = true, closeOnEscape = true, className = '', }) {
-    const titleId = useId();
+/**
+ * BottomSheet - Mobile-friendly modal that slides up from the bottom
+ *
+ * Designed for mobile contexts with touch-friendly interactions:
+ * - Drag handle for swipe-to-dismiss
+ * - Snap points for partial expansion
+ * - Sticky action area at thumb zone
+ *
+ * @example
+ * ```tsx
+ * <BottomSheet open={isOpen} onClose={() => setIsOpen(false)}>
+ *   <BottomSheetHeader>
+ *     <Text weight="bold">Transaction Details</Text>
+ *   </BottomSheetHeader>
+ *   <BottomSheetContent>
+ *     {content}
+ *   </BottomSheetContent>
+ *   <BottomSheetActions>
+ *     <Button fullWidth>Approve</Button>
+ *   </BottomSheetActions>
+ * </BottomSheet>
+ * ```
+ */
+function BottomSheet({ open, isOpen, onClose, children, title, height = 'auto', maxHeight = '90vh', snapPoints, closeOnOverlayClick = true, closeOnEscape = true, showHandle = true, showCloseButton = true, preventScroll = true, className = '', }) {
+    // Support both 'open' and 'isOpen' props for flexibility
+    const isSheetOpen = open ?? isOpen ?? false;
+    // Height presets for convenience
+    const heightPresets = {
+        sm: '40vh',
+        md: '60vh',
+        lg: '80vh',
+        full: '100vh',
+    };
+    const sheetRef = useRef(null);
     const [isDragging, setIsDragging] = useState(false);
     const [dragOffset, setDragOffset] = useState(0);
-    const [currentHeight] = useState(typeof height === 'string' && height in heightPresets
-        ? heightPresets[height]
-        : height);
-    const sheetRef = useRef(null);
-    const startYRef = useRef(0);
-    // Close on Escape
+    const [currentSnapIndex, setCurrentSnapIndex] = useState(snapPoints?.length ? snapPoints.length - 1 : 0);
+    const startY = useRef(0);
+    const startOffset = useRef(0);
+    // Handle escape key
     useEffect(() => {
-        if (!isOpen || !closeOnEscape)
+        if (!isSheetOpen || !closeOnEscape)
             return;
         const handleEscape = (e) => {
             if (e.key === 'Escape') {
@@ -3133,77 +3188,132 @@ function BottomSheet({ isOpen, onClose, children, title, height = 'md', showHand
         };
         document.addEventListener('keydown', handleEscape);
         return () => document.removeEventListener('keydown', handleEscape);
-    }, [isOpen, closeOnEscape, onClose]);
-    // Prevent body scroll when open
+    }, [open, closeOnEscape, onClose]);
+    // Prevent body scroll
     useEffect(() => {
-        if (isOpen) {
-            document.body.style.overflow = 'hidden';
-        }
-        else {
-            document.body.style.overflow = '';
-        }
+        if (!isSheetOpen || !preventScroll)
+            return;
+        const originalOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
         return () => {
-            document.body.style.overflow = '';
+            document.body.style.overflow = originalOverflow;
         };
-    }, [isOpen]);
-    const handleOverlayClick = (e) => {
-        if (closeOnOverlayClick && e.target === e.currentTarget) {
-            onClose();
-        }
-    };
-    const handleDragStart = (e) => {
+    }, [open, preventScroll]);
+    // Handle drag start
+    const handleDragStart = useCallback((clientY) => {
         setIsDragging(true);
-        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
-        startYRef.current = clientY;
-    };
-    const handleDragMove = (e) => {
+        startY.current = clientY;
+        startOffset.current = dragOffset;
+    }, [dragOffset]);
+    // Handle drag move
+    const handleDragMove = useCallback((clientY) => {
+        if (!isDragging)
+            return;
+        const delta = clientY - startY.current;
+        const newOffset = Math.max(0, startOffset.current + delta);
+        setDragOffset(newOffset);
+    }, [isDragging]);
+    // Handle drag end
+    const handleDragEnd = useCallback(() => {
         if (!isDragging)
             return;
-        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
-        const offset = clientY - startYRef.current;
-        // Only allow dragging down
-        if (offset > 0) {
-            setDragOffset(offset);
-        }
-    };
-    const handleDragEnd = () => {
         setIsDragging(false);
-        // Close if dragged down more than 150px
-        if (dragOffset > 150) {
-            onClose();
+        const threshold = 100; // pixels to trigger close
+        if (dragOffset > threshold) {
+            // If we have snap points, snap to next lower point or close
+            if (snapPoints && currentSnapIndex > 0) {
+                setCurrentSnapIndex(currentSnapIndex - 1);
+                setDragOffset(0);
+            }
+            else {
+                onClose();
+                setDragOffset(0);
+            }
+        }
+        else {
+            // Snap back
+            setDragOffset(0);
         }
-        setDragOffset(0);
+    }, [isDragging, dragOffset, snapPoints, currentSnapIndex, onClose]);
+    // Touch event handlers
+    const handleTouchStart = (e) => {
+        handleDragStart(e.touches[0].clientY);
+    };
+    const handleTouchMove = (e) => {
+        handleDragMove(e.touches[0].clientY);
+    };
+    const handleTouchEnd = () => {
+        handleDragEnd();
+    };
+    // Mouse event handlers (for desktop testing)
+    const handleMouseDown = (e) => {
+        handleDragStart(e.clientY);
     };
     useEffect(() => {
         if (!isDragging)
             return;
-        const handleMove = (e) => handleDragMove(e);
-        const handleEnd = () => handleDragEnd();
-        document.addEventListener('touchmove', handleMove);
-        document.addEventListener('mousemove', handleMove);
-        document.addEventListener('touchend', handleEnd);
-        document.addEventListener('mouseup', handleEnd);
+        const handleMouseMove = (e) => {
+            handleDragMove(e.clientY);
+        };
+        const handleMouseUp = () => {
+            handleDragEnd();
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
         return () => {
-            document.removeEventListener('touchmove', handleMove);
-            document.removeEventListener('mousemove', handleMove);
-            document.removeEventListener('touchend', handleEnd);
-            document.removeEventListener('mouseup', handleEnd);
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
         };
-    }, [isDragging, dragOffset]);
-    if (!isOpen)
+    }, [isDragging, handleDragMove, handleDragEnd]);
+    // Calculate height based on snap points or presets
+    const getSheetHeight = () => {
+        if (snapPoints && snapPoints[currentSnapIndex]) {
+            return snapPoints[currentSnapIndex];
+        }
+        if (typeof height === 'number') {
+            return `${height}px`;
+        }
+        // Check for preset heights
+        if (typeof height === 'string' && heightPresets[height]) {
+            return heightPresets[height];
+        }
+        return height;
+    };
+    if (!isSheetOpen)
         return null;
-    return (jsxs("div", { className: "fixed inset-0 z-50 flex items-end", onClick: handleOverlayClick, children: [jsx("div", { className: `
+    const sheetContent = (jsxs("div", { className: "fixed inset-0 z-50", children: [jsx("div", { className: `
           absolute inset-0 bg-black/50 transition-opacity duration-300
-          ${isOpen ? 'opacity-100' : 'opacity-0'}
-        ` }), jsxs("div", { ref: sheetRef, className: `
-          relative w-full bg-white rounded-t-2xl shadow-2xl
+          ${isSheetOpen ? 'opacity-100' : 'opacity-0'}
+        `, onClick: closeOnOverlayClick ? onClose : undefined, "aria-hidden": "true" }), jsxs("div", { ref: sheetRef, className: `
+          absolute bottom-0 left-0 right-0
+          bg-white rounded-t-2xl shadow-2xl
           transition-transform duration-300 ease-out
-          ${isOpen ? 'translate-y-0' : 'translate-y-full'}
+          ${isDragging ? 'transition-none' : ''}
           ${className}
         `, style: {
-                    height: currentHeight,
+                    height: getSheetHeight(),
+                    maxHeight,
                     transform: `translateY(${dragOffset}px)`,
-                }, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, children: [showHandle && (jsx("div", { className: "py-3 cursor-grab active:cursor-grabbing", onTouchStart: handleDragStart, onMouseDown: handleDragStart, children: jsx("div", { className: "w-12 h-1.5 bg-ink-300 rounded-full mx-auto" }) })), (title || showCloseButton) && (jsxs("div", { className: "px-6 py-4 border-b border-ink-200 flex items-center justify-between", children: [title && (jsx("h2", { id: titleId, className: "text-lg font-semibold text-ink-900", children: title })), showCloseButton && (jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors ml-auto", "aria-label": "Close", children: jsx(X, { className: "h-5 w-5" }) }))] })), jsx("div", { className: "overflow-y-auto flex-1 p-6", children: children })] })] }));
+                }, role: "dialog", "aria-modal": "true", children: [showHandle && (jsx("div", { className: "flex justify-center pt-3 pb-2 cursor-grab active:cursor-grabbing touch-none", onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, onMouseDown: handleMouseDown, children: jsx("div", { className: "w-10 h-1 bg-paper-300 rounded-full" }) })), title && (jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-paper-200", children: [jsx("h2", { className: "text-lg font-medium text-ink-900", children: title }), showCloseButton && (jsx("button", { onClick: onClose, className: "p-1 rounded-full text-ink-500 hover:text-ink-700 hover:bg-paper-100 transition-colors", "aria-label": "Close", children: jsx(X, { className: "h-5 w-5" }) }))] })), jsx("div", { className: "flex flex-col h-full overflow-hidden", children: children })] })] }));
+    return createPortal(sheetContent, document.body);
+}
+/**
+ * BottomSheetHeader - Header section with title and optional close button
+ */
+function BottomSheetHeader({ children, className = '' }) {
+    return (jsx("div", { className: `flex items-center justify-between px-4 py-3 border-b border-paper-200 ${className}`, children: children }));
+}
+/**
+ * BottomSheetContent - Scrollable content area
+ */
+function BottomSheetContent({ children, className = '' }) {
+    return (jsx("div", { className: `flex-1 overflow-y-auto px-4 py-4 ${className}`, children: children }));
+}
+/**
+ * BottomSheetActions - Sticky footer for action buttons (thumb zone)
+ */
+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 = {
@@ -7338,6 +7448,598 @@ function Hide({ children, above, below, only, className = '' }) {
     return (jsx("div", { className: `${visibilityClasses} ${className}`, children: children }));
 }
 
+/**
+ * HorizontalScroll - Horizontally scrollable container with peek indicators
+ *
+ * Designed for mobile carousels of cards with:
+ * - Touch-friendly momentum scrolling
+ * - Peek hint showing more items exist
+ * - Optional snap scrolling
+ * - Navigation arrows for desktop
+ *
+ * @example
+ * ```tsx
+ * <HorizontalScroll gap="md" peekAmount={24} showIndicators>
+ *   <Card>Bill 1</Card>
+ *   <Card>Bill 2</Card>
+ *   <Card>Bill 3</Card>
+ * </HorizontalScroll>
+ * ```
+ */
+function HorizontalScroll({ children, gap = 'md', peekAmount = 24, showIndicators = false, snapToItem = true, showArrows = 'hover', scrollBehavior = 'smooth', className = '', scrollClassName = '', }) {
+    const scrollRef = useRef(null);
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [itemCount, setItemCount] = useState(0);
+    const [isHovered, setIsHovered] = useState(false);
+    // Gap classes
+    const gapClasses = {
+        none: 'gap-0',
+        sm: 'gap-2',
+        md: 'gap-4',
+        lg: 'gap-6',
+    };
+    const gapStyle = typeof gap === 'number' ? { gap: `${gap}px` } : {};
+    const gapClass = typeof gap === 'string' ? gapClasses[gap] : '';
+    // Check scroll position and update state
+    const checkScrollPosition = useCallback(() => {
+        const container = scrollRef.current;
+        if (!container)
+            return;
+        const { scrollLeft, scrollWidth, clientWidth } = container;
+        setCanScrollLeft(scrollLeft > 0);
+        setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 1);
+        // Calculate active index based on scroll position
+        if (showIndicators && container.children.length > 0) {
+            const children = Array.from(container.children);
+            const containerRect = container.getBoundingClientRect();
+            const containerCenter = containerRect.left + containerRect.width / 2;
+            let closestIndex = 0;
+            let closestDistance = Infinity;
+            children.forEach((child, index) => {
+                const childRect = child.getBoundingClientRect();
+                const childCenter = childRect.left + childRect.width / 2;
+                const distance = Math.abs(childCenter - containerCenter);
+                if (distance < closestDistance) {
+                    closestDistance = distance;
+                    closestIndex = index;
+                }
+            });
+            setActiveIndex(closestIndex);
+        }
+    }, [showIndicators]);
+    // Initialize and handle resize
+    useEffect(() => {
+        const container = scrollRef.current;
+        if (!container)
+            return;
+        setItemCount(React__default.Children.count(children));
+        checkScrollPosition();
+        const resizeObserver = new ResizeObserver(() => {
+            checkScrollPosition();
+        });
+        resizeObserver.observe(container);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [children, checkScrollPosition]);
+    // Handle scroll event
+    useEffect(() => {
+        const container = scrollRef.current;
+        if (!container)
+            return;
+        const handleScroll = () => {
+            checkScrollPosition();
+        };
+        container.addEventListener('scroll', handleScroll, { passive: true });
+        return () => {
+            container.removeEventListener('scroll', handleScroll);
+        };
+    }, [checkScrollPosition]);
+    // Scroll by one item
+    const scrollByItem = (direction) => {
+        const container = scrollRef.current;
+        if (!container)
+            return;
+        const children = Array.from(container.children);
+        if (children.length === 0)
+            return;
+        const firstChild = children[0];
+        const itemWidth = firstChild.offsetWidth;
+        const gapValue = typeof gap === 'number' ? gap :
+            gap === 'sm' ? 8 : gap === 'md' ? 16 : gap === 'lg' ? 24 : 0;
+        const scrollAmount = itemWidth + gapValue;
+        container.scrollBy({
+            left: direction === 'left' ? -scrollAmount : scrollAmount,
+            behavior: scrollBehavior,
+        });
+    };
+    // Scroll to specific index
+    const scrollToIndex = (index) => {
+        const container = scrollRef.current;
+        if (!container)
+            return;
+        const children = Array.from(container.children);
+        if (index < 0 || index >= children.length)
+            return;
+        const child = children[index];
+        child.scrollIntoView({
+            behavior: scrollBehavior,
+            block: 'nearest',
+            inline: 'center',
+        });
+    };
+    const showLeftArrow = showArrows === 'always' || (showArrows === 'hover' && isHovered);
+    const showRightArrow = showArrows === 'always' || (showArrows === 'hover' && isHovered);
+    return (jsxs("div", { className: `relative ${className}`, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [showLeftArrow && canScrollLeft && (jsx("button", { onClick: () => scrollByItem('left'), className: "\n            absolute left-0 top-1/2 -translate-y-1/2 z-10\n            w-10 h-10 flex items-center justify-center\n            bg-white/90 backdrop-blur-sm rounded-full shadow-lg\n            text-ink-600 hover:text-ink-900 hover:bg-white\n            transition-all duration-200\n            -ml-2\n          ", "aria-label": "Scroll left", children: jsx(ChevronLeft, { className: "h-5 w-5" }) })), jsx("div", { ref: scrollRef, className: `
+          flex overflow-x-auto scrollbar-hide
+          ${gapClass}
+          ${snapToItem ? 'snap-x snap-mandatory' : ''}
+          ${scrollClassName}
+        `, style: {
+                    ...gapStyle,
+                    paddingRight: peekAmount > 0 ? `${peekAmount}px` : undefined,
+                    scrollPaddingLeft: '0px',
+                    scrollPaddingRight: `${peekAmount}px`,
+                }, children: React__default.Children.map(children, (child, index) => (jsx("div", { className: `flex-shrink-0 ${snapToItem ? 'snap-start' : ''}`, children: child }, index))) }), showRightArrow && canScrollRight && (jsx("button", { onClick: () => scrollByItem('right'), className: "\n            absolute right-0 top-1/2 -translate-y-1/2 z-10\n            w-10 h-10 flex items-center justify-center\n            bg-white/90 backdrop-blur-sm rounded-full shadow-lg\n            text-ink-600 hover:text-ink-900 hover:bg-white\n            transition-all duration-200\n            -mr-2\n          ", "aria-label": "Scroll right", children: jsx(ChevronRight, { className: "h-5 w-5" }) })), showIndicators && itemCount > 1 && (jsx("div", { className: "flex justify-center gap-1.5 mt-3", children: Array.from({ length: itemCount }).map((_, index) => (jsx("button", { onClick: () => scrollToIndex(index), className: `
+                w-2 h-2 rounded-full transition-all duration-200
+                ${index === activeIndex
+                        ? 'bg-accent-500 w-4'
+                        : 'bg-paper-300 hover:bg-paper-400'}
+              `, "aria-label": `Go to item ${index + 1}`, "aria-current": index === activeIndex ? 'true' : 'false' }, index))) }))] }));
+}
+
+/**
+ * SwipeableCard - Card component with swipe-to-action functionality
+ *
+ * Designed for mobile approval workflows:
+ * - Swipe right to approve/confirm
+ * - Swipe left to see options/alternatives
+ * - Visual feedback showing action being revealed
+ * - Haptic feedback on mobile devices
+ *
+ * @example
+ * ```tsx
+ * <SwipeableCard
+ *   onSwipeRight={() => handleApprove()}
+ *   onSwipeLeft={() => handleShowOptions()}
+ *   rightAction={{
+ *     icon: <Check />,
+ *     color: 'success',
+ *     label: 'Approve'
+ *   }}
+ *   leftAction={{
+ *     icon: <MoreHorizontal />,
+ *     color: 'neutral',
+ *     label: 'Options'
+ *   }}
+ * >
+ *   <TransactionContent />
+ * </SwipeableCard>
+ * ```
+ */
+function SwipeableCard({ children, onSwipeRight, onSwipeLeft, rightAction = {
+    icon: jsx(Check, { className: "h-6 w-6" }),
+    color: 'success',
+    label: 'Approve',
+}, leftAction = {
+    icon: jsx(MoreHorizontal, { className: "h-6 w-6" }),
+    color: 'neutral',
+    label: 'Options',
+}, swipeThreshold = 100, hapticFeedback = true, disabled = false, onSwipeStart, onSwipeEnd, className = '', }) {
+    const cardRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [offsetX, setOffsetX] = useState(0);
+    const [isTriggered, setIsTriggered] = useState(null);
+    const startX = useRef(0);
+    const startY = useRef(0);
+    const isHorizontalSwipe = useRef(null);
+    // Color classes for action backgrounds
+    const colorClasses = {
+        success: 'bg-success-500',
+        error: 'bg-error-500',
+        warning: 'bg-warning-500',
+        neutral: 'bg-paper-400',
+        primary: 'bg-accent-500',
+    };
+    // Trigger haptic feedback
+    const triggerHaptic = useCallback((style = 'medium') => {
+        if (!hapticFeedback)
+            return;
+        // Use Vibration API if available
+        if ('vibrate' in navigator) {
+            const patterns = {
+                light: 10,
+                medium: 25,
+                heavy: [50, 30, 50],
+            };
+            navigator.vibrate(patterns[style]);
+        }
+    }, [hapticFeedback]);
+    // Handle drag start
+    const handleDragStart = useCallback((clientX, clientY) => {
+        if (disabled)
+            return;
+        setIsDragging(true);
+        startX.current = clientX;
+        startY.current = clientY;
+        isHorizontalSwipe.current = null;
+        onSwipeStart?.();
+    }, [disabled, onSwipeStart]);
+    // Handle drag move
+    const handleDragMove = useCallback((clientX, clientY) => {
+        if (!isDragging || disabled)
+            return;
+        const deltaX = clientX - startX.current;
+        const deltaY = clientY - startY.current;
+        // Determine if this is a horizontal swipe on first significant movement
+        if (isHorizontalSwipe.current === null) {
+            const absDeltaX = Math.abs(deltaX);
+            const absDeltaY = Math.abs(deltaY);
+            if (absDeltaX > 10 || absDeltaY > 10) {
+                isHorizontalSwipe.current = absDeltaX > absDeltaY;
+            }
+        }
+        // Only process horizontal swipes
+        if (isHorizontalSwipe.current !== true)
+            return;
+        // Check if we should allow this direction
+        const canSwipeRight = onSwipeRight !== undefined;
+        const canSwipeLeft = onSwipeLeft !== undefined;
+        let newOffset = deltaX;
+        // Limit swipe direction based on available actions
+        if (!canSwipeRight && deltaX > 0)
+            newOffset = 0;
+        if (!canSwipeLeft && deltaX < 0)
+            newOffset = 0;
+        // Add resistance when exceeding threshold
+        const maxSwipe = swipeThreshold * 1.5;
+        if (Math.abs(newOffset) > swipeThreshold) {
+            const overflow = Math.abs(newOffset) - swipeThreshold;
+            const resistance = overflow * 0.3;
+            newOffset = newOffset > 0
+                ? swipeThreshold + resistance
+                : -(swipeThreshold + resistance);
+            newOffset = Math.max(-maxSwipe, Math.min(maxSwipe, newOffset));
+        }
+        setOffsetX(newOffset);
+        // Check for threshold crossing and trigger haptic
+        const newTriggered = Math.abs(newOffset) >= swipeThreshold
+            ? (newOffset > 0 ? 'right' : 'left')
+            : null;
+        if (newTriggered !== isTriggered) {
+            if (newTriggered) {
+                triggerHaptic('medium');
+            }
+            setIsTriggered(newTriggered);
+        }
+    }, [isDragging, disabled, onSwipeRight, onSwipeLeft, swipeThreshold, isTriggered, triggerHaptic]);
+    // Handle drag end
+    const handleDragEnd = useCallback(() => {
+        if (!isDragging)
+            return;
+        setIsDragging(false);
+        onSwipeEnd?.();
+        // Check if action should be triggered
+        if (Math.abs(offsetX) >= swipeThreshold) {
+            if (offsetX > 0 && onSwipeRight) {
+                triggerHaptic('heavy');
+                // Animate card away then call handler
+                setOffsetX(window.innerWidth);
+                setTimeout(() => {
+                    onSwipeRight();
+                    setOffsetX(0);
+                    setIsTriggered(null);
+                }, 200);
+                return;
+            }
+            else if (offsetX < 0 && onSwipeLeft) {
+                triggerHaptic('heavy');
+                setOffsetX(-window.innerWidth);
+                setTimeout(() => {
+                    onSwipeLeft();
+                    setOffsetX(0);
+                    setIsTriggered(null);
+                }, 200);
+                return;
+            }
+        }
+        // Snap back
+        setOffsetX(0);
+        setIsTriggered(null);
+    }, [isDragging, offsetX, swipeThreshold, onSwipeRight, onSwipeLeft, onSwipeEnd, triggerHaptic]);
+    // Touch event handlers
+    const handleTouchStart = (e) => {
+        handleDragStart(e.touches[0].clientX, e.touches[0].clientY);
+    };
+    const handleTouchMove = (e) => {
+        handleDragMove(e.touches[0].clientX, e.touches[0].clientY);
+        // Prevent vertical scroll if horizontal swipe
+        if (isHorizontalSwipe.current === true) {
+            e.preventDefault();
+        }
+    };
+    const handleTouchEnd = () => {
+        handleDragEnd();
+    };
+    // Mouse event handlers (for desktop testing)
+    const handleMouseDown = (e) => {
+        handleDragStart(e.clientX, e.clientY);
+    };
+    useEffect(() => {
+        if (!isDragging)
+            return;
+        const handleMouseMove = (e) => {
+            handleDragMove(e.clientX, e.clientY);
+        };
+        const handleMouseUp = () => {
+            handleDragEnd();
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isDragging, handleDragMove, handleDragEnd]);
+    // Calculate action opacity based on swipe distance
+    const rightActionOpacity = offsetX > 0 ? Math.min(1, offsetX / swipeThreshold) : 0;
+    const leftActionOpacity = offsetX < 0 ? Math.min(1, Math.abs(offsetX) / swipeThreshold) : 0;
+    return (jsxs("div", { className: `relative overflow-hidden rounded-lg ${className}`, children: [onSwipeRight && (jsx("div", { className: `
+            absolute inset-y-0 left-0 flex items-center justify-start pl-6
+            ${colorClasses[rightAction.color]}
+            transition-opacity duration-100
+          `, style: {
+                    opacity: rightActionOpacity,
+                    width: Math.abs(offsetX) + 20,
+                }, "aria-hidden": "true", children: jsx("div", { className: `
+              text-white transform transition-transform duration-200
+              ${isTriggered === 'right' ? 'scale-125' : 'scale-100'}
+            `, children: rightAction.icon }) })), onSwipeLeft && (jsx("div", { className: `
+            absolute inset-y-0 right-0 flex items-center justify-end pr-6
+            ${colorClasses[leftAction.color]}
+            transition-opacity duration-100
+          `, style: {
+                    opacity: leftActionOpacity,
+                    width: Math.abs(offsetX) + 20,
+                }, "aria-hidden": "true", children: jsx("div", { className: `
+              text-white transform transition-transform duration-200
+              ${isTriggered === 'left' ? 'scale-125' : 'scale-100'}
+            `, children: leftAction.icon }) })), jsx("div", { ref: cardRef, className: `
+          relative bg-white
+          ${isDragging ? '' : 'transition-transform duration-200 ease-out'}
+          ${disabled ? 'opacity-50 pointer-events-none' : ''}
+        `, style: {
+                    transform: `translateX(${offsetX}px)`,
+                }, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, onMouseDown: handleMouseDown, role: "button", "aria-label": `Swipeable card. ${onSwipeRight ? `Swipe right to ${rightAction.label}.` : ''} ${onSwipeLeft ? `Swipe left to ${leftAction.label}.` : ''}`, tabIndex: disabled ? -1 : 0, children: children })] }));
+}
+
+/**
+ * NotificationBanner - Dismissible banner for important alerts
+ *
+ * Displays at top of screen for alerts that need attention but aren't blocking:
+ * - Money Found alerts
+ * - System messages
+ * - Promotional info
+ *
+ * @example
+ * ```tsx
+ * <NotificationBanner
+ *   variant="warning"
+ *   icon={<DollarSign />}
+ *   title="Found $33.98 in potential savings"
+ *   description="Tap to review"
+ *   action={{
+ *     label: "Review",
+ *     onClick: handleReview
+ *   }}
+ *   onDismiss={() => setShowBanner(false)}
+ * />
+ * ```
+ */
+function NotificationBanner({ variant = 'info', icon, title, description, action, onDismiss, dismissible = true, sticky = false, className = '', }) {
+    const bannerRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [offsetX, setOffsetX] = useState(0);
+    const [isDismissed, setIsDismissed] = useState(false);
+    const startX = useRef(0);
+    // Default icons based on variant
+    const defaultIcons = {
+        info: jsx(Info, { className: "h-5 w-5" }),
+        success: jsx(CheckCircle, { className: "h-5 w-5" }),
+        warning: jsx(AlertTriangle, { className: "h-5 w-5" }),
+        error: jsx(AlertCircle, { className: "h-5 w-5" }),
+    };
+    // Color classes
+    const variantClasses = {
+        info: 'bg-gradient-to-r from-primary-50 to-primary-100 border-primary-200 text-primary-900',
+        success: 'bg-gradient-to-r from-success-50 to-success-100 border-success-200 text-success-900',
+        warning: 'bg-gradient-to-r from-warning-50 to-warning-100 border-warning-200 text-warning-900',
+        error: 'bg-gradient-to-r from-error-50 to-error-100 border-error-200 text-error-900',
+    };
+    const iconColorClasses = {
+        info: 'text-primary-600',
+        success: 'text-success-600',
+        warning: 'text-warning-600',
+        error: 'text-error-600',
+    };
+    const buttonClasses = {
+        info: 'bg-primary-600 hover:bg-primary-700 text-white',
+        success: 'bg-success-600 hover:bg-success-700 text-white',
+        warning: 'bg-warning-600 hover:bg-warning-700 text-white',
+        error: 'bg-error-600 hover:bg-error-700 text-white',
+    };
+    // Handle swipe dismiss
+    const handleDragStart = useCallback((clientX) => {
+        if (!dismissible)
+            return;
+        setIsDragging(true);
+        startX.current = clientX;
+    }, [dismissible]);
+    const handleDragMove = useCallback((clientX) => {
+        if (!isDragging)
+            return;
+        const delta = clientX - startX.current;
+        setOffsetX(delta);
+    }, [isDragging]);
+    const handleDragEnd = useCallback(() => {
+        if (!isDragging)
+            return;
+        setIsDragging(false);
+        const threshold = 100;
+        if (Math.abs(offsetX) > threshold) {
+            // Animate out
+            setOffsetX(offsetX > 0 ? window.innerWidth : -window.innerWidth);
+            setIsDismissed(true);
+            setTimeout(() => {
+                onDismiss?.();
+            }, 200);
+        }
+        else {
+            // Snap back
+            setOffsetX(0);
+        }
+    }, [isDragging, offsetX, onDismiss]);
+    // Touch handlers
+    const handleTouchStart = (e) => {
+        handleDragStart(e.touches[0].clientX);
+    };
+    const handleTouchMove = (e) => {
+        handleDragMove(e.touches[0].clientX);
+    };
+    const handleTouchEnd = () => {
+        handleDragEnd();
+    };
+    // Mouse handlers for desktop testing
+    const handleMouseDown = (e) => {
+        if (dismissible) {
+            handleDragStart(e.clientX);
+        }
+    };
+    useEffect(() => {
+        if (!isDragging)
+            return;
+        const handleMouseMove = (e) => {
+            handleDragMove(e.clientX);
+        };
+        const handleMouseUp = () => {
+            handleDragEnd();
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isDragging, handleDragMove, handleDragEnd]);
+    if (isDismissed)
+        return null;
+    return (jsx("div", { ref: bannerRef, className: `
+        w-full border-b
+        ${variantClasses[variant]}
+        ${sticky ? 'sticky top-0 z-40' : ''}
+        ${isDragging ? '' : 'transition-transform duration-200 ease-out'}
+        ${className}
+      `, style: {
+            transform: `translateX(${offsetX}px)`,
+            opacity: Math.max(0, 1 - Math.abs(offsetX) / 200),
+        }, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, onMouseDown: handleMouseDown, role: "alert", children: jsxs("div", { className: "flex items-center gap-3 px-4 py-3", children: [jsx("div", { className: `flex-shrink-0 ${iconColorClasses[variant]}`, children: icon || defaultIcons[variant] }), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("p", { className: "text-sm font-medium truncate", children: title }), description && (jsx("p", { className: "text-xs opacity-80 truncate", children: description }))] }), action && (jsx("button", { onClick: action.onClick, className: `
+              flex-shrink-0 px-3 py-1.5 text-xs font-medium rounded-md
+              transition-colors duration-200
+              ${buttonClasses[variant]}
+            `, children: action.label })), onDismiss && (jsx("button", { onClick: onDismiss, className: "flex-shrink-0 p-1 rounded-full hover:bg-black/10 transition-colors duration-200", "aria-label": "Dismiss notification", children: jsx(X, { className: "h-4 w-4" }) }))] }) }));
+}
+
+/**
+ * CompactStat - Single stat display optimized for mobile
+ *
+ * Designed for dashboard stats in 2-column mobile layouts:
+ * - Compact presentation with value, label, and optional trend
+ * - Responsive sizing
+ * - Trend indicators with color coding
+ *
+ * @example
+ * ```tsx
+ * <Grid columns={2} gap="sm">
+ *   <CompactStat
+ *     value="$62,329"
+ *     label="Net Worth"
+ *     trend={{
+ *       direction: 'up',
+ *       value: '+$1,247',
+ *       color: 'success'
+ *     }}
+ *   />
+ *   <CompactStat
+ *     value="$4,521"
+ *     label="Monthly Income"
+ *   />
+ * </Grid>
+ * ```
+ */
+function CompactStat({ value, label, trend, size = 'md', align = 'left', className = '', }) {
+    // Size classes
+    const sizeClasses = {
+        sm: {
+            value: 'text-lg font-semibold',
+            label: 'text-xs',
+            trend: 'text-xs',
+            icon: 'h-3 w-3',
+        },
+        md: {
+            value: 'text-xl font-semibold',
+            label: 'text-sm',
+            trend: 'text-xs',
+            icon: 'h-3.5 w-3.5',
+        },
+        lg: {
+            value: 'text-2xl font-bold',
+            label: 'text-sm',
+            trend: 'text-sm',
+            icon: 'h-4 w-4',
+        },
+    };
+    // Alignment classes
+    const alignClasses = {
+        left: 'text-left',
+        center: 'text-center',
+        right: 'text-right',
+    };
+    // Trend color classes
+    const getTrendColor = (trend) => {
+        if (trend.color) {
+            const colorMap = {
+                success: 'text-success-600',
+                error: 'text-error-600',
+                warning: 'text-warning-600',
+                neutral: 'text-ink-500',
+            };
+            return colorMap[trend.color];
+        }
+        // Default colors based on direction
+        const directionColors = {
+            up: 'text-success-600',
+            down: 'text-error-600',
+            neutral: 'text-ink-500',
+        };
+        return directionColors[trend.direction];
+    };
+    // Trend icons
+    const TrendIcon = trend ? {
+        up: TrendingUp,
+        down: TrendingDown,
+        neutral: Minus,
+    }[trend.direction] : null;
+    const sizes = sizeClasses[size];
+    return (jsxs("div", { className: `${alignClasses[align]} ${className}`, children: [jsx("div", { className: `${sizes.value} text-ink-900 tracking-tight`, children: value }), jsx("div", { className: `${sizes.label} text-ink-500 mt-0.5`, children: label }), trend && (jsxs("div", { className: `
+          flex items-center gap-1 mt-1
+          ${align === 'center' ? 'justify-center' : ''}
+          ${align === 'right' ? 'justify-end' : ''}
+          ${sizes.trend} ${getTrendColor(trend)}
+        `, children: [TrendIcon && jsx(TrendIcon, { className: sizes.icon }), jsx("span", { children: trend.value })] }))] }));
+}
+
 /**
  * Hook to detect breadcrumb navigation and trigger callbacks.
  * Use this in host components to reset state when a breadcrumb is clicked.
@@ -7621,7 +8323,7 @@ function StepIndicator({ steps, currentStep, variant = 'horizontal', onStepClick
             }) }) }));
 }
 
-function Badge({ children, variant = 'neutral', size = 'md', icon, onRemove, className = '', dot = false, }) {
+function Badge({ children, variant = 'neutral', size = 'md', icon, onRemove, className = '', dot = false, pill = false, }) {
     const variantStyles = {
         success: 'bg-success-50 text-success-700 border-success-200',
         warning: 'bg-warning-50 text-warning-700 border-warning-200',
@@ -7641,6 +8343,12 @@ function Badge({ children, variant = 'neutral', size = 'md', icon, onRemove, cla
         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',
@@ -7662,9 +8370,10 @@ function Badge({ children, variant = 'neutral', size = 'md', icon, onRemove, cla
     }
     // Regular badge
     return (jsxs("span", { className: `
-        inline-flex items-center rounded-full border font-medium
+        inline-flex items-center border font-medium
+        ${pill ? 'rounded-full' : 'rounded-full'}
         ${variantStyles[variant]}
-        ${sizeStyles[size]}
+        ${pill ? pillSizeStyles[size] : sizeStyles[size]}
         ${className}
       `, children: [icon && jsx("span", { className: iconSize[size], children: icon }), jsx("span", { children: children }), onRemove && (jsx("button", { onClick: onRemove, className: "ml-1 hover:opacity-70 transition-opacity", "aria-label": "Remove badge", children: jsx(X, { className: iconSize[size] }) }))] }));
 }
@@ -7772,8 +8481,10 @@ function Progress({ value, variant = 'linear', size = 'md', color = 'primary', s
         warning: 'bg-warning-100',
         error: 'bg-error-100',
     };
+    // Normalize 'ring' to 'circular'
+    const normalizedVariant = variant === 'ring' ? 'circular' : variant;
     // Linear progress
-    if (variant === 'linear') {
+    if (normalizedVariant === 'linear') {
         const heightClasses = {
             sm: 'h-1',
             md: 'h-2',
@@ -8705,94 +9416,112 @@ function useFABScroll(threshold = 10) {
 }
 
 /**
- * PullToRefresh - Mobile pull-to-refresh gesture handler
+ * PullToRefresh - Pull-down refresh indicator and handler for mobile lists
  *
- * Wraps content and provides native-feeling pull-to-refresh functionality.
- * Only activates when scrolled to top of content.
- *
- * @example Basic usage
- * ```tsx
- * <PullToRefresh onRefresh={async () => {
- *   await fetchLatestData();
- * }}>
- *   <div className="min-h-screen">
- *     {content}
- *   </div>
- * </PullToRefresh>
- * ```
+ * Wraps content to enable pull-to-refresh behavior on mobile:
+ * - Pull down to trigger refresh
+ * - Visual feedback showing progress
+ * - Custom content for each state
  *
- * @example With custom threshold
+ * @example
  * ```tsx
- * <PullToRefresh
- *   onRefresh={handleRefresh}
- *   pullThreshold={100}
- *   maxPull={150}
- * >
- *   {content}
+ * <PullToRefresh onRefresh={async () => { await syncData(); }}>
+ *   <TransactionList transactions={transactions} />
  * </PullToRefresh>
  * ```
  */
-function PullToRefresh({ children, onRefresh, disabled = false, pullThreshold = 80, maxPull = 120, loadingIndicator, pullIndicator, className = '', }) {
+function PullToRefresh({ children, onRefresh, threshold = 80, disabled = false, pullingContent, releaseContent, refreshingContent, completeContent, className = '', }) {
+    const containerRef = useRef(null);
     const [state, setState] = useState('idle');
     const [pullDistance, setPullDistance] = useState(0);
-    const containerRef = useRef(null);
     const startY = useRef(0);
     const currentY = useRef(0);
-    // Check if at top of scroll container
+    const isDragging = useRef(false);
+    // Check if content is at top (can pull to refresh)
     const isAtTop = useCallback(() => {
         const container = containerRef.current;
         if (!container)
             return false;
-        return container.scrollTop <= 0;
+        // Check if the scrollable content is at the top
+        const scrollableParent = container.querySelector('[data-ptr-scrollable]') || container;
+        return scrollableParent.scrollTop <= 0;
     }, []);
-    // Handle touch start
+    // Handle pull start
     const handleTouchStart = useCallback((e) => {
-        if (disabled || state === 'refreshing' || !isAtTop())
+        if (disabled || state === 'refreshing')
+            return;
+        if (!isAtTop())
             return;
+        isDragging.current = true;
         startY.current = e.touches[0].clientY;
-        currentY.current = startY.current;
+        currentY.current = e.touches[0].clientY;
     }, [disabled, state, isAtTop]);
-    // Handle touch move
+    // Handle pull move
     const handleTouchMove = useCallback((e) => {
-        if (disabled || state === 'refreshing')
-            return;
-        if (startY.current === 0)
+        if (!isDragging.current || disabled || state === 'refreshing')
             return;
         currentY.current = e.touches[0].clientY;
-        const diff = currentY.current - startY.current;
-        // Only allow pulling down when at top
-        if (diff > 0 && isAtTop()) {
-            // Apply resistance - pull slows down as distance increases
-            const resistance = 0.5;
-            const adjustedPull = Math.min(diff * resistance, maxPull);
-            setPullDistance(adjustedPull);
-            setState(adjustedPull >= pullThreshold ? 'ready' : 'pulling');
-            // Prevent default scroll when pulling
-            if (adjustedPull > 0) {
-                e.preventDefault();
-            }
+        const delta = currentY.current - startY.current;
+        // Only activate pull-to-refresh when pulling down
+        if (delta < 0) {
+            isDragging.current = false;
+            setPullDistance(0);
+            setState('idle');
+            return;
+        }
+        // Check if we're at the top before allowing pull
+        if (!isAtTop()) {
+            isDragging.current = false;
+            return;
+        }
+        // Apply resistance to pull
+        const resistance = 0.5;
+        const resistedDelta = delta * resistance;
+        const maxPull = threshold * 2;
+        const clampedDelta = Math.min(resistedDelta, maxPull);
+        setPullDistance(clampedDelta);
+        // Update state based on pull distance
+        if (clampedDelta >= threshold) {
+            setState('ready');
+        }
+        else if (clampedDelta > 0) {
+            setState('pulling');
+        }
+        // Prevent default scroll when pulling
+        if (delta > 0 && isAtTop()) {
+            e.preventDefault();
         }
-    }, [disabled, state, isAtTop, maxPull, pullThreshold]);
-    // Handle touch end
+    }, [disabled, state, threshold, isAtTop]);
+    // Handle pull end
     const handleTouchEnd = useCallback(async () => {
-        if (disabled || state === 'refreshing')
+        if (!isDragging.current)
             return;
-        if (state === 'ready') {
+        isDragging.current = false;
+        if (state === 'ready' && pullDistance >= threshold) {
             setState('refreshing');
-            setPullDistance(pullThreshold); // Hold at threshold while refreshing
+            setPullDistance(threshold * 0.6); // Settle at a smaller height while refreshing
             try {
                 await onRefresh();
+                setState('complete');
+                // Show complete state briefly
+                setTimeout(() => {
+                    setState('idle');
+                    setPullDistance(0);
+                }, 500);
             }
             catch (error) {
                 console.error('Refresh failed:', error);
+                setState('idle');
+                setPullDistance(0);
             }
+        }
+        else {
+            // Snap back
             setState('idle');
+            setPullDistance(0);
         }
-        setPullDistance(0);
-        startY.current = 0;
-        currentY.current = 0;
-    }, [disabled, state, pullThreshold, onRefresh]);
-    // Attach touch listeners
+    }, [state, pullDistance, threshold, onRefresh]);
+    // Attach touch event listeners
     useEffect(() => {
         const container = containerRef.current;
         if (!container)
@@ -8806,99 +9535,41 @@ function PullToRefresh({ children, onRefresh, disabled = false, pullThreshold =
             container.removeEventListener('touchend', handleTouchEnd);
         };
     }, [handleTouchStart, handleTouchMove, handleTouchEnd]);
-    // Calculate indicator opacity and rotation
-    const progress = Math.min(pullDistance / pullThreshold, 1);
-    const rotation = progress * 180;
-    // Default loading indicator
-    const defaultLoadingIndicator = (jsx(Loader2, { className: "h-6 w-6 text-accent-600 animate-spin" }));
-    // Default pull indicator
-    const defaultPullIndicator = (jsx("div", { className: `
-        transition-transform duration-200
-        ${state === 'ready' ? 'text-accent-600' : 'text-ink-400'}
-      `, style: { transform: `rotate(${rotation}deg)` }, children: jsx(ArrowDown, { className: "h-6 w-6" }) }));
-    return (jsxs("div", { ref: containerRef, className: `relative overflow-auto ${className}`, style: { touchAction: pullDistance > 0 ? 'none' : 'auto' }, children: [jsx("div", { className: `
-          absolute left-0 right-0 flex items-center justify-center
-          transition-all duration-200 overflow-hidden
-          ${state === 'idle' && pullDistance === 0 ? 'opacity-0' : 'opacity-100'}
+    // Calculate progress percentage
+    const progress = Math.min(1, pullDistance / threshold);
+    // Default content for each state
+    const defaultPullingContent = (jsxs("div", { className: "flex flex-col items-center gap-1", children: [jsx(ArrowDown, { className: "h-5 w-5 text-ink-400 transition-transform duration-200", style: { transform: `rotate(${progress * 180}deg)` } }), jsx("span", { className: "text-xs text-ink-500", children: "Pull to refresh" })] }));
+    const defaultReleaseContent = (jsxs("div", { className: "flex flex-col items-center gap-1", children: [jsx(ArrowDown, { className: "h-5 w-5 text-accent-500 rotate-180" }), jsx("span", { className: "text-xs text-accent-600 font-medium", children: "Release to refresh" })] }));
+    const defaultRefreshingContent = (jsxs("div", { className: "flex flex-col items-center gap-1", children: [jsx(Loader2, { className: "h-5 w-5 text-accent-500 animate-spin" }), jsx("span", { className: "text-xs text-ink-500", children: "Refreshing..." })] }));
+    const defaultCompleteContent = (jsxs("div", { className: "flex flex-col items-center gap-1", children: [jsx(Check, { className: "h-5 w-5 text-success-500" }), jsx("span", { className: "text-xs text-success-600", children: "Done!" })] }));
+    // Get content based on current state
+    const getIndicatorContent = () => {
+        switch (state) {
+            case 'pulling':
+                return pullingContent || defaultPullingContent;
+            case 'ready':
+                return releaseContent || defaultReleaseContent;
+            case 'refreshing':
+                return refreshingContent || defaultRefreshingContent;
+            case 'complete':
+                return completeContent || defaultCompleteContent;
+            default:
+                return null;
+        }
+    };
+    return (jsxs("div", { ref: containerRef, className: `relative overflow-hidden ${className}`, children: [jsx("div", { className: `
+          absolute top-0 left-0 right-0
+          flex items-center justify-center
+          bg-paper-50
+          transition-all duration-200 ease-out
+          ${state === 'idle' ? 'opacity-0' : 'opacity-100'}
         `, style: {
-                    height: `${pullDistance}px`,
-                    top: 0,
-                    zIndex: 10,
-                }, children: jsx("div", { className: `
-            w-10 h-10 rounded-full bg-white shadow-md
-            flex items-center justify-center
-            transition-transform duration-200
-            ${state === 'refreshing' ? 'scale-100' : progress < 0.3 ? 'scale-75' : 'scale-100'}
-          `, children: state === 'refreshing'
-                        ? (loadingIndicator || defaultLoadingIndicator)
-                        : (pullIndicator || defaultPullIndicator) }) }), jsx("div", { className: "transition-transform duration-200", style: {
+                    height: pullDistance,
+                    transform: state === 'idle' ? 'translateY(-100%)' : 'translateY(0)',
+                }, children: getIndicatorContent() }), jsx("div", { className: "transition-transform duration-200 ease-out", style: {
                     transform: `translateY(${pullDistance}px)`,
                 }, children: children })] }));
 }
-/**
- * usePullToRefresh - Hook for custom pull-to-refresh implementations
- *
- * @example
- * ```tsx
- * const { pullDistance, isRefreshing, bind } = usePullToRefresh({
- *   onRefresh: async () => {
- *     await fetchData();
- *   }
- * });
- *
- * return (
- *   <div {...bind}>
- *     {isRefreshing && <Spinner />}
- *     {content}
- *   </div>
- * );
- * ```
- */
-function usePullToRefresh({ onRefresh, pullThreshold = 80, maxPull = 120, disabled = false, }) {
-    const [pullDistance, setPullDistance] = useState(0);
-    const [isRefreshing, setIsRefreshing] = useState(false);
-    const startY = useRef(0);
-    const handleTouchStart = useCallback((e) => {
-        if (disabled || isRefreshing)
-            return;
-        startY.current = e.touches[0].clientY;
-    }, [disabled, isRefreshing]);
-    const handleTouchMove = useCallback((e) => {
-        if (disabled || isRefreshing || startY.current === 0)
-            return;
-        const diff = e.touches[0].clientY - startY.current;
-        if (diff > 0) {
-            const adjustedPull = Math.min(diff * 0.5, maxPull);
-            setPullDistance(adjustedPull);
-        }
-    }, [disabled, isRefreshing, maxPull]);
-    const handleTouchEnd = useCallback(async () => {
-        if (disabled || isRefreshing)
-            return;
-        if (pullDistance >= pullThreshold) {
-            setIsRefreshing(true);
-            try {
-                await onRefresh();
-            }
-            finally {
-                setIsRefreshing(false);
-            }
-        }
-        setPullDistance(0);
-        startY.current = 0;
-    }, [disabled, isRefreshing, pullDistance, pullThreshold, onRefresh]);
-    return {
-        pullDistance,
-        isRefreshing,
-        isReady: pullDistance >= pullThreshold,
-        progress: Math.min(pullDistance / pullThreshold, 1),
-        bind: {
-            onTouchStart: handleTouchStart,
-            onTouchMove: handleTouchMove,
-            onTouchEnd: handleTouchEnd,
-        },
-    };
-}
 
 function Logo({ size = 'md', showText = true, text = 'Commora', className = '', }) {
     const sizes = {
@@ -10401,44 +11072,52 @@ function getAugmentedNamespace(n) {
  * (A1, A1:C5, ...)
  */
 
-let Collection$3 = class Collection {
+var collection;
+var hasRequiredCollection;
+
+function requireCollection () {
+	if (hasRequiredCollection) return collection;
+	hasRequiredCollection = 1;
+	class Collection {
 
-    constructor(data, refs) {
-        if (data == null && refs == null) {
-            this._data = [];
-            this._refs = [];
-        } else {
-            if (data.length !== refs.length)
-                throw Error('Collection: data length should match references length.');
-            this._data = data;
-            this._refs = refs;
-        }
-    }
+	    constructor(data, refs) {
+	        if (data == null && refs == null) {
+	            this._data = [];
+	            this._refs = [];
+	        } else {
+	            if (data.length !== refs.length)
+	                throw Error('Collection: data length should match references length.');
+	            this._data = data;
+	            this._refs = refs;
+	        }
+	    }
 
-    get data() {
-        return this._data;
-    }
+	    get data() {
+	        return this._data;
+	    }
 
-    get refs() {
-        return this._refs;
-    }
+	    get refs() {
+	        return this._refs;
+	    }
 
-    get length() {
-        return this._data.length;
-    }
+	    get length() {
+	        return this._data.length;
+	    }
 
-    /**
-     * Add data and references to this collection.
-     * @param {{}} obj - data
-     * @param {{}} ref - reference
-     */
-    add(obj, ref) {
-        this._data.push(obj);
-        this._refs.push(ref);
-    }
-};
+	    /**
+	     * Add data and references to this collection.
+	     * @param {{}} obj - data
+	     * @param {{}} ref - reference
+	     */
+	    add(obj, ref) {
+	        this._data.push(obj);
+	        this._refs.push(ref);
+	    }
+	}
 
-var collection = Collection$3;
+	collection = Collection;
+	return collection;
+}
 
 var helpers;
 var hasRequiredHelpers;
@@ -10447,7 +11126,7 @@ function requireHelpers () {
 	if (hasRequiredHelpers) return helpers;
 	hasRequiredHelpers = 1;
 	const FormulaError = requireError();
-	const Collection = collection;
+	const Collection = requireCollection();
 
 	const Types = {
 	    NUMBER: 0,
@@ -20101,7 +20780,7 @@ var engineering = EngineeringFunctions;
 
 const FormulaError$b = requireError();
 const {FormulaHelpers: FormulaHelpers$8, Types: Types$6, WildCard, Address: Address$3} = requireHelpers();
-const Collection$2 = collection;
+const Collection$2 = requireCollection();
 const H$5 = FormulaHelpers$8;
 
 const ReferenceFunctions$1 = {
@@ -31729,7 +32408,7 @@ var parsing = {
 const FormulaError$4 = requireError();
 const {Address: Address$1} = requireHelpers();
 const {Prefix: Prefix$1, Postfix: Postfix$1, Infix: Infix$1, Operators: Operators$1} = operators;
-const Collection$1 = collection;
+const Collection$1 = requireCollection();
 const MAX_ROW$1 = 1048576, MAX_COLUMN$1 = 16384;
 const {NotAllInputParsedException} = require$$4;
 
@@ -32491,7 +33170,7 @@ var hooks$1 = {
 const FormulaError$2 = requireError();
 const {FormulaHelpers: FormulaHelpers$1, Types, Address} = requireHelpers();
 const {Prefix, Postfix, Infix, Operators} = operators;
-const Collection = collection;
+const Collection = requireCollection();
 const MAX_ROW = 1048576, MAX_COLUMN = 16384;
 
 let Utils$1 = class Utils {
@@ -56981,5 +57660,5 @@ function Responsive({ mobile, tablet, desktop, }) {
     return jsx(Fragment, { children: mobile || tablet || desktop });
 }
 
-export { Accordion, ActionBar, ActionBarCenter, ActionBarLeft, ActionBarRight, ActionButton, AdminModal, Alert, AlertDialog, AppLayout, Autocomplete, Avatar, BREAKPOINTS, Badge, BottomNavigation, BottomNavigationSpacer, BottomSheet, Box, Breadcrumbs, Button, ButtonGroup, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardView, Carousel, Checkbox, CheckboxList, Chip, ChipGroup, Collapsible, ColorPicker, Combobox, ComingSoon, CommandPalette, 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, HoverCard, InfiniteScroll, Input, KanbanBoard, Layout, Loading, LoadingOverlay, Logo, MarkdownEditor, MaskedInput, Menu, MenuDivider, MobileHeader, MobileHeaderSpacer, MobileLayout, MobileOnly, MobileProvider, Modal, ModalFooter, MultiSelect, NotificationBar, NotificationIndicator, NumberInput, Page, PageHeader, PageLayout, PageNavigation, Pagination, PasswordInput, Popover, Progress, PullToRefresh, QueryTransparency, RadioGroup, Rating, Responsive, RichTextEditor, SearchBar, SearchableList, Select, Separator, Show, Sidebar, SidebarGroup, Skeleton, SkeletonCard$1 as SkeletonCard, SkeletonTable, Slider, Spreadsheet, SpreadsheetReport, Stack, StatCard, StatItem, StatsCardGrid, StatsGrid, StatusBadge, StatusBar, StepIndicator, Stepper, SwipeActions, Switch, Tabs, Text, Textarea, ThemeToggle, TimePicker, Timeline, Toast, ToastContainer, Tooltip, Transfer, TreeView, TwoColumnContent, UserProfileButton, addErrorMessage, addInfoMessage, addSuccessMessage, addWarningMessage, calculateColumnWidth, createActionsSection, createFiltersSection, createMultiSheetExcel, createPageControlsSection, createQueryDetailsSection, exportDataTableToExcel, exportToExcel, formatStatisticValue, formatStatistics, getFormula, getFormulasByCategory, loadColumnOrder, loadColumnWidths, reorderArray, saveColumnOrder, saveColumnWidths, searchFormulas, statusManager, useBreadcrumbReset, useBreakpoint, useBreakpointValue, useColumnReorder, useColumnResize, useCommandPalette, useConfirmDialog, useFABScroll, useFormContext, useIsDesktop, useIsMobile, useIsTablet, useIsTouchDevice, useMediaQuery, useMobileContext, useOrientation, usePrefersMobile, usePullToRefresh, useResponsiveCallback, useSafeAreaInsets, useViewportSize, withMobileContext };
+export { Accordion, ActionBar, ActionBarCenter, ActionBarLeft, ActionBarRight, ActionButton, 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, Checkbox, CheckboxList, Chip, ChipGroup, 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, KanbanBoard, Layout, Loading, LoadingOverlay, Logo, MarkdownEditor, MaskedInput, Menu, MenuDivider, MobileHeader, MobileHeaderSpacer, MobileLayout, MobileOnly, MobileProvider, Modal, ModalFooter, MultiSelect, NotificationBanner, NotificationBar, NotificationIndicator, NumberInput, Page, PageHeader, PageLayout, PageNavigation, Pagination, PasswordInput, Popover, Progress, PullToRefresh, QueryTransparency, RadioGroup, Rating, Responsive, RichTextEditor, SearchBar, SearchableList, Select, Separator, Show, Sidebar, SidebarGroup, Skeleton, SkeletonCard$1 as SkeletonCard, SkeletonTable, Slider, Spreadsheet, SpreadsheetReport, Stack, StatCard, StatItem, StatsCardGrid, StatsGrid, StatusBadge, StatusBar, StepIndicator, Stepper, SwipeActions, SwipeableCard, Switch, Tabs, Text, Textarea, ThemeToggle, TimePicker, Timeline, Toast, ToastContainer, Tooltip, Transfer, TreeView, TwoColumnContent, UserProfileButton, addErrorMessage, addInfoMessage, addSuccessMessage, addWarningMessage, calculateColumnWidth, createActionsSection, createFiltersSection, createMultiSheetExcel, createPageControlsSection, createQueryDetailsSection, exportDataTableToExcel, exportToExcel, formatStatisticValue, formatStatistics, getFormula, getFormulasByCategory, loadColumnOrder, loadColumnWidths, reorderArray, saveColumnOrder, saveColumnWidths, searchFormulas, statusManager, useBreadcrumbReset, useBreakpoint, useBreakpointValue, useColumnReorder, useColumnResize, useCommandPalette, useConfirmDialog, useFABScroll, useFormContext, useIsDesktop, useIsMobile, useIsTablet, useIsTouchDevice, useMediaQuery, useMobileContext, useOrientation, usePrefersMobile, useResponsiveCallback, useSafeAreaInsets, useViewportSize, withMobileContext };
 //# sourceMappingURL=index.esm.js.map