@papernote/ui 1.10.5 → 1.10.6

package/dist/index.esm.js

@@ -3346,7 +3346,7 @@ const toastStyles = {
         icon: jsx(Info, { className: "h-5 w-5 text-primary-600" }),
     },
 };
-function Toast({ id, type, title, message, duration = 5000, onClose }) {
+function Toast({ id, type, title, message, duration = 5000, onClose, action }) {
     const [isExiting, setIsExiting] = useState(false);
     const styles = toastStyles[type];
     const handleClose = useCallback(() => {
@@ -3355,13 +3355,19 @@ function Toast({ id, type, title, message, duration = 5000, onClose }) {
             onClose(id);
         }, 300); // Match animation duration
     }, [id, onClose]);
+    const handleAction = useCallback(() => {
+        if (action) {
+            action.onClick();
+            handleClose();
+        }
+    }, [action, handleClose]);
     useEffect(() => {
         const timer = setTimeout(() => {
             handleClose();
         }, duration);
         return () => clearTimeout(timer);
     }, [duration, handleClose]);
-    return (jsx("div", { className: `${styles.bg} ${styles.border} bg-subtle-grain rounded-lg shadow-lg p-4 min-w-[320px] max-w-md transition-all duration-300 ${isExiting ? 'opacity-0 translate-x-full' : 'opacity-100 translate-x-0 animate-slide-in-right'}`, 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: [jsx("h4", { className: "text-sm font-medium text-ink-900 mb-1", children: title }), jsx("p", { className: "text-sm text-ink-600", children: message })] }), jsx("button", { onClick: handleClose, className: "flex-shrink-0 text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Close notification", children: jsx(X, { className: "h-4 w-4" }) })] }) }));
+    return (jsx("div", { className: `${styles.bg} ${styles.border} bg-subtle-grain rounded-lg shadow-lg p-4 min-w-[320px] max-w-md transition-all duration-300 ${isExiting ? 'opacity-0 translate-x-full' : 'opacity-100 translate-x-0 animate-slide-in-right'}`, 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: [jsx("h4", { className: "text-sm font-medium text-ink-900 mb-1", children: title }), jsx("p", { className: "text-sm text-ink-600", children: message }), action && (jsx("button", { onClick: handleAction, className: "mt-2 text-sm font-medium text-accent-600 hover:text-accent-700 transition-colors", children: action.label }))] }), jsx("button", { onClick: handleClose, className: "flex-shrink-0 text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Close notification", children: jsx(X, { className: "h-4 w-4" }) })] }) }));
 }
 const positionStyles = {
     'top-right': 'top-20 right-6',
@@ -8096,6 +8102,289 @@ function SwipeableCard({ children, onSwipeRight, onSwipeLeft, rightAction = {
                 }, 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 })] }));
 }
 
+// Color classes for action backgrounds
+const getColorClass = (color) => {
+    const colorMap = {
+        destructive: 'bg-error-500',
+        warning: 'bg-warning-500',
+        success: 'bg-success-500',
+        primary: 'bg-accent-500',
+    };
+    return colorMap[color] || color;
+};
+/**
+ * SwipeableListItem - List item with swipe-to-action functionality
+ *
+ * Designed for mobile workflows with keyboard accessibility:
+ * - Swipe right to approve/confirm
+ * - Swipe left to dismiss/delete
+ * - Arrow keys for keyboard navigation
+ * - Async callback support with loading state
+ *
+ * @example
+ * ```tsx
+ * <SwipeableListItem
+ *   onSwipeRight={() => handleApprove()}
+ *   onSwipeLeft={() => handleDismiss()}
+ *   rightAction={{
+ *     icon: Check,
+ *     color: 'success',
+ *     label: 'Approve'
+ *   }}
+ *   leftAction={{
+ *     icon: X,
+ *     color: 'destructive',
+ *     label: 'Dismiss'
+ *   }}
+ * >
+ *   <div className="p-4">List item content</div>
+ * </SwipeableListItem>
+ * ```
+ */
+function SwipeableListItem({ children, onSwipeRight, onSwipeLeft, rightAction, leftAction, swipeThreshold = 100, disabled = false, className = '', }) {
+    const containerRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [offsetX, setOffsetX] = useState(0);
+    const [isTriggered, setIsTriggered] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [keyboardDirection, setKeyboardDirection] = useState(null);
+    const startX = useRef(0);
+    const startY = useRef(0);
+    const isHorizontalSwipe = useRef(null);
+    // Trigger haptic feedback
+    const triggerHaptic = useCallback((style = 'medium') => {
+        if ('vibrate' in navigator) {
+            const patterns = {
+                light: 10,
+                medium: 25,
+                heavy: [50, 30, 50],
+            };
+            navigator.vibrate(patterns[style]);
+        }
+    }, []);
+    // Execute action with async support
+    const executeAction = useCallback(async (direction) => {
+        const handler = direction === 'right' ? onSwipeRight : onSwipeLeft;
+        if (!handler)
+            return;
+        setIsLoading(true);
+        triggerHaptic('heavy');
+        // Animate out
+        const slideDistance = direction === 'right' ? window.innerWidth : -window.innerWidth;
+        setOffsetX(slideDistance);
+        try {
+            await handler();
+        }
+        finally {
+            // Reset state after animation
+            setTimeout(() => {
+                setOffsetX(0);
+                setIsTriggered(null);
+                setIsLoading(false);
+                setKeyboardDirection(null);
+            }, 200);
+        }
+    }, [onSwipeRight, onSwipeLeft, triggerHaptic]);
+    // Handle drag start
+    const handleDragStart = useCallback((clientX, clientY) => {
+        if (disabled || isLoading)
+            return;
+        setIsDragging(true);
+        startX.current = clientX;
+        startY.current = clientY;
+        isHorizontalSwipe.current = null;
+    }, [disabled, isLoading]);
+    // Handle drag move
+    const handleDragMove = useCallback((clientX, clientY) => {
+        if (!isDragging || disabled || isLoading)
+            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 && rightAction !== undefined;
+        const canSwipeLeft = onSwipeLeft !== undefined && leftAction !== 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, isLoading, onSwipeRight, onSwipeLeft, rightAction, leftAction, swipeThreshold, isTriggered, triggerHaptic]);
+    // Handle drag end
+    const handleDragEnd = useCallback(() => {
+        if (!isDragging)
+            return;
+        setIsDragging(false);
+        // Check if action should be triggered
+        if (Math.abs(offsetX) >= swipeThreshold) {
+            if (offsetX > 0 && onSwipeRight && rightAction) {
+                executeAction('right');
+                return;
+            }
+            else if (offsetX < 0 && onSwipeLeft && leftAction) {
+                executeAction('left');
+                return;
+            }
+        }
+        // Snap back
+        setOffsetX(0);
+        setIsTriggered(null);
+    }, [isDragging, offsetX, swipeThreshold, onSwipeRight, onSwipeLeft, rightAction, leftAction, executeAction]);
+    // 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]);
+    // Keyboard event handlers
+    const handleKeyDown = useCallback((e) => {
+        if (disabled || isLoading)
+            return;
+        const canSwipeRight = onSwipeRight !== undefined && rightAction !== undefined;
+        const canSwipeLeft = onSwipeLeft !== undefined && leftAction !== undefined;
+        switch (e.key) {
+            case 'ArrowRight':
+                if (canSwipeRight) {
+                    e.preventDefault();
+                    setKeyboardDirection('right');
+                    setOffsetX(swipeThreshold);
+                    setIsTriggered('right');
+                    triggerHaptic('medium');
+                }
+                break;
+            case 'ArrowLeft':
+                if (canSwipeLeft) {
+                    e.preventDefault();
+                    setKeyboardDirection('left');
+                    setOffsetX(-swipeThreshold);
+                    setIsTriggered('left');
+                    triggerHaptic('medium');
+                }
+                break;
+            case 'Enter':
+                if (keyboardDirection) {
+                    e.preventDefault();
+                    executeAction(keyboardDirection);
+                }
+                break;
+            case 'Escape':
+                if (keyboardDirection) {
+                    e.preventDefault();
+                    setKeyboardDirection(null);
+                    setOffsetX(0);
+                    setIsTriggered(null);
+                }
+                break;
+        }
+    }, [disabled, isLoading, onSwipeRight, onSwipeLeft, rightAction, leftAction, swipeThreshold, keyboardDirection, executeAction, triggerHaptic]);
+    // Reset keyboard state on blur
+    const handleBlur = useCallback(() => {
+        if (keyboardDirection) {
+            setKeyboardDirection(null);
+            setOffsetX(0);
+            setIsTriggered(null);
+        }
+    }, [keyboardDirection]);
+    // 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;
+    // Build aria-label
+    const ariaLabel = [
+        'Swipeable list item.',
+        rightAction && onSwipeRight ? `Swipe right or press Arrow Right to ${rightAction.label}.` : '',
+        leftAction && onSwipeLeft ? `Swipe left or press Arrow Left to ${leftAction.label}.` : '',
+        keyboardDirection ? `Press Enter to confirm or Escape to cancel.` : '',
+    ].filter(Boolean).join(' ');
+    return (jsxs("div", { ref: containerRef, className: `relative overflow-hidden ${className}`, children: [rightAction && onSwipeRight && (jsx("div", { className: `
+            absolute inset-y-0 left-0 flex items-center justify-start pl-6
+            ${getColorClass(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: isLoading && isTriggered === 'right' ? (jsx(Loader2, { className: "h-6 w-6 animate-spin" })) : (jsx(rightAction.icon, { className: "h-6 w-6" })) }) })), leftAction && onSwipeLeft && (jsx("div", { className: `
+            absolute inset-y-0 right-0 flex items-center justify-end pr-6
+            ${getColorClass(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: isLoading && isTriggered === 'left' ? (jsx(Loader2, { className: "h-6 w-6 animate-spin" })) : (jsx(leftAction.icon, { className: "h-6 w-6" })) }) })), jsx("div", { className: `
+          relative bg-white
+          ${isDragging ? '' : 'transition-transform duration-200 ease-out'}
+          ${disabled ? 'opacity-50 pointer-events-none' : ''}
+          ${keyboardDirection ? 'ring-2 ring-accent-500 ring-inset' : ''}
+        `, style: {
+                    transform: `translateX(${offsetX}px)`,
+                }, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, onBlur: handleBlur, role: "button", "aria-label": ariaLabel, tabIndex: disabled ? -1 : 0, children: children })] }));
+}
+
 /**
  * NotificationBanner - Dismissible banner for important alerts
  *
@@ -58476,5 +58765,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, 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, NotificationBell, 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, 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, useColumnReorder, useColumnResize, useCommandPalette, useConfirmDialog, useFABScroll, useFormContext, useIsDesktop, useIsMobile, useIsTablet, useIsTouchDevice, useMediaQuery, useMobileContext, useOrientation, usePrefersMobile, 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, NotificationBell, 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, 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, useColumnReorder, useColumnResize, useCommandPalette, useConfirmDialog, useFABScroll, useFormContext, useIsDesktop, useIsMobile, useIsTablet, useIsTouchDevice, useMediaQuery, useMobileContext, useOrientation, usePrefersMobile, useResponsiveCallback, useSafeAreaInsets, useViewportSize, withMobileContext };
 //# sourceMappingURL=index.esm.js.map