@papernote/ui 1.10.4 → 1.10.6

package/dist/index.esm.js

@@ -2161,6 +2161,286 @@ const validationMessageColors = {
     warning: 'text-warning-600',
 };
 
+/**
+ * Get the current UTC offset for a timezone
+ */
+function getTimezoneOffset(timezone) {
+    try {
+        const now = new Date();
+        const formatter = new Intl.DateTimeFormat('en-US', {
+            timeZone: timezone,
+            timeZoneName: 'longOffset',
+        });
+        const parts = formatter.formatToParts(now);
+        const tzPart = parts.find(p => p.type === 'timeZoneName');
+        if (tzPart?.value) {
+            // Extract offset from format like "GMT-05:00" or "GMT+05:30"
+            const match = tzPart.value.match(/GMT([+-]\d{2}:\d{2})/);
+            if (match) {
+                const offsetStr = match[1];
+                const [hours, minutes] = offsetStr.split(':').map(Number);
+                const sign = offsetStr.startsWith('-') ? -1 : 1;
+                const totalMinutes = sign * (Math.abs(hours) * 60 + minutes);
+                return {
+                    offset: `UTC${offsetStr}`,
+                    offsetMinutes: totalMinutes,
+                };
+            }
+            // Handle "GMT" (UTC+00:00)
+            if (tzPart.value === 'GMT') {
+                return { offset: 'UTC+00:00', offsetMinutes: 0 };
+            }
+        }
+        // Fallback: calculate manually
+        const utcDate = new Date(now.toLocaleString('en-US', { timeZone: 'UTC' }));
+        const tzDate = new Date(now.toLocaleString('en-US', { timeZone: timezone }));
+        const diffMinutes = (tzDate.getTime() - utcDate.getTime()) / 60000;
+        const hours = Math.floor(Math.abs(diffMinutes) / 60);
+        const mins = Math.abs(diffMinutes) % 60;
+        const sign = diffMinutes >= 0 ? '+' : '-';
+        const offset = `UTC${sign}${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}`;
+        return { offset, offsetMinutes: diffMinutes };
+    }
+    catch {
+        return { offset: 'UTC+00:00', offsetMinutes: 0 };
+    }
+}
+/**
+ * Comprehensive list of common timezones organized by region
+ */
+const TIMEZONE_DATA = {
+    Africa: [
+        'Africa/Cairo',
+        'Africa/Casablanca',
+        'Africa/Johannesburg',
+        'Africa/Lagos',
+        'Africa/Nairobi',
+        'Africa/Tunis',
+    ],
+    America: [
+        'America/Anchorage',
+        'America/Argentina/Buenos_Aires',
+        'America/Bogota',
+        'America/Caracas',
+        'America/Chicago',
+        'America/Denver',
+        'America/Halifax',
+        'America/Lima',
+        'America/Los_Angeles',
+        'America/Mexico_City',
+        'America/New_York',
+        'America/Phoenix',
+        'America/Santiago',
+        'America/Sao_Paulo',
+        'America/Toronto',
+        'America/Vancouver',
+    ],
+    Antarctica: [
+        'Antarctica/McMurdo',
+        'Antarctica/Palmer',
+        'Antarctica/Syowa',
+    ],
+    Asia: [
+        'Asia/Bangkok',
+        'Asia/Colombo',
+        'Asia/Dhaka',
+        'Asia/Dubai',
+        'Asia/Hong_Kong',
+        'Asia/Jakarta',
+        'Asia/Jerusalem',
+        'Asia/Karachi',
+        'Asia/Kathmandu',
+        'Asia/Kolkata',
+        'Asia/Kuala_Lumpur',
+        'Asia/Manila',
+        'Asia/Qatar',
+        'Asia/Riyadh',
+        'Asia/Seoul',
+        'Asia/Shanghai',
+        'Asia/Singapore',
+        'Asia/Taipei',
+        'Asia/Tehran',
+        'Asia/Tokyo',
+    ],
+    Atlantic: [
+        'Atlantic/Azores',
+        'Atlantic/Bermuda',
+        'Atlantic/Canary',
+        'Atlantic/Cape_Verde',
+        'Atlantic/Reykjavik',
+    ],
+    Australia: [
+        'Australia/Adelaide',
+        'Australia/Brisbane',
+        'Australia/Darwin',
+        'Australia/Hobart',
+        'Australia/Melbourne',
+        'Australia/Perth',
+        'Australia/Sydney',
+    ],
+    Europe: [
+        'Europe/Amsterdam',
+        'Europe/Athens',
+        'Europe/Berlin',
+        'Europe/Brussels',
+        'Europe/Bucharest',
+        'Europe/Budapest',
+        'Europe/Copenhagen',
+        'Europe/Dublin',
+        'Europe/Helsinki',
+        'Europe/Istanbul',
+        'Europe/Lisbon',
+        'Europe/London',
+        'Europe/Madrid',
+        'Europe/Moscow',
+        'Europe/Oslo',
+        'Europe/Paris',
+        'Europe/Prague',
+        'Europe/Rome',
+        'Europe/Stockholm',
+        'Europe/Vienna',
+        'Europe/Warsaw',
+        'Europe/Zurich',
+    ],
+    Indian: [
+        'Indian/Maldives',
+        'Indian/Mauritius',
+    ],
+    Pacific: [
+        'Pacific/Auckland',
+        'Pacific/Fiji',
+        'Pacific/Guam',
+        'Pacific/Honolulu',
+        'Pacific/Noumea',
+        'Pacific/Pago_Pago',
+        'Pacific/Tahiti',
+    ],
+};
+/**
+ * Region display names
+ */
+const REGION_LABELS = {
+    Africa: 'Africa',
+    America: 'Americas',
+    Antarctica: 'Antarctica',
+    Asia: 'Asia',
+    Atlantic: 'Atlantic',
+    Australia: 'Australia',
+    Europe: 'Europe',
+    Indian: 'Indian Ocean',
+    Pacific: 'Pacific',
+};
+/**
+ * Get the user's local timezone
+ */
+function getLocalTimezone() {
+    try {
+        return Intl.DateTimeFormat().resolvedOptions().timeZone;
+    }
+    catch {
+        return 'UTC';
+    }
+}
+/**
+ * Check if a timezone string is valid
+ */
+function isValidTimezone(timezone) {
+    try {
+        Intl.DateTimeFormat(undefined, { timeZone: timezone });
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * TimezoneSelector - A searchable dropdown for selecting timezones
+ *
+ * Provides a user-friendly way to select from IANA timezones, organized by
+ * geographic region with UTC offset display.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const [timezone, setTimezone] = useState('America/New_York');
+ *
+ * <TimezoneSelector
+ *   label="Select Timezone"
+ *   value={timezone}
+ *   onChange={setTimezone}
+ * />
+ * ```
+ *
+ * @example With local timezone detection
+ * ```tsx
+ * import { TimezoneSelector, getLocalTimezone } from 'notebook-ui';
+ *
+ * const [timezone, setTimezone] = useState(getLocalTimezone());
+ *
+ * <TimezoneSelector
+ *   value={timezone}
+ *   onChange={setTimezone}
+ *   includeUTC
+ *   clearable
+ * />
+ * ```
+ *
+ * @example Filter to specific regions
+ * ```tsx
+ * <TimezoneSelector
+ *   value={timezone}
+ *   onChange={setTimezone}
+ *   regions={['America', 'Europe']}
+ *   placeholder="Select US or European timezone..."
+ * />
+ * ```
+ */
+const TimezoneSelector = React__default.forwardRef(({ value, onChange, label, helperText, error, disabled = false, placeholder = 'Select timezone...', clearable = false, loading = false, size = 'md', includeUTC = true, regions, showOffset = true, }, ref) => {
+    // Build timezone options grouped by region
+    const groups = useMemo(() => {
+        const result = [];
+        // Add UTC as a special option at the top
+        if (includeUTC) {
+            result.push({
+                label: 'Universal',
+                options: [
+                    {
+                        value: 'UTC',
+                        label: showOffset ? 'UTC (UTC+00:00)' : 'UTC',
+                    },
+                ],
+            });
+        }
+        // Determine which regions to include
+        const activeRegions = regions || Object.keys(TIMEZONE_DATA);
+        // Build groups for each region
+        for (const region of activeRegions) {
+            const timezones = TIMEZONE_DATA[region];
+            if (!timezones)
+                continue;
+            // Build options with offset info and sort by offset
+            const options = timezones
+                .map(tz => {
+                const { offset, offsetMinutes } = getTimezoneOffset(tz);
+                const city = tz.split('/').pop()?.replace(/_/g, ' ') || tz;
+                return {
+                    value: tz,
+                    label: showOffset ? `${city} (${offset})` : city,
+                    offsetMinutes,
+                };
+            })
+                .sort((a, b) => a.offsetMinutes - b.offsetMinutes)
+                .map(({ value, label }) => ({ value, label }));
+            result.push({
+                label: REGION_LABELS[region],
+                options,
+            });
+        }
+        return result;
+    }, [includeUTC, regions, showOffset]);
+    return (jsx(Select, { ref: ref, groups: groups, value: value, onChange: onChange, label: label, helperText: helperText, error: error, disabled: disabled, placeholder: placeholder, clearable: clearable, loading: loading, size: size, searchable: true, virtualized: false }));
+});
+TimezoneSelector.displayName = 'TimezoneSelector';
+
 /**
  * Combobox component - searchable select with typeahead and custom value support.
  *
@@ -3066,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(() => {
@@ -3075,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',
@@ -7816,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
  *
@@ -11510,14 +12079,17 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
                                 const columnKey = String(column.key);
                                 const dynamicWidth = columnWidths[columnKey];
                                 return (jsx("col", { style: getColumnStyle(column, dynamicWidth) }, index));
-                            })] }), jsx("thead", { className: `bg-paper-100 sticky top-0 z-10 ${headerClassName}`, children: jsxs("tr", { className: "table-header-row", children: [selectable && (jsx("th", { className: `sticky left-0 bg-paper-100 ${currentDensity.header} border-b ${borderColor} z-20 w-12 ${bordered ? `border ${borderColor}` : ''}`, children: jsx("input", { type: "checkbox", checked: selectedRowsSet.size === data.length && data.length > 0, onChange: handleSelectAll, className: "w-4 h-4 text-accent-600 border-paper-300 rounded focus:ring-accent-400", "aria-label": "Select all rows" }) })), ((expandable || expandedRowConfig) && showExpandChevron) && (jsx("th", { className: `sticky left-0 bg-paper-100 px-2 ${currentDensity.header} border-b ${borderColor} z-19 w-10 ${bordered ? `border ${borderColor}` : ''}` })), allActions.length > 0 && (jsx("th", { className: `sticky left-0 bg-paper-100 ${currentDensity.header} text-center text-xs font-medium text-ink-700 uppercase tracking-wider border-b ${borderColor} z-20 ${bordered ? `border ${borderColor}` : ''}`, style: { width: '28px', padding: 0 } })), visibleColumns.map((column) => {
+                            })] }), jsx("thead", { className: `bg-paper-100 sticky top-0 z-10 ${headerClassName}`, children: jsxs("tr", { className: "table-header-row", children: [selectable && (jsx("th", { className: `sticky left-0 bg-paper-100 ${currentDensity.header} border-b ${borderColor} z-20 w-12 ${bordered ? `border ${borderColor}` : ''}`, children: jsx("input", { type: "checkbox", checked: selectedRowsSet.size === data.length && data.length > 0, onChange: handleSelectAll, className: "w-4 h-4 text-accent-600 border-paper-300 rounded focus:ring-accent-400", "aria-label": "Select all rows" }) })), ((expandable || expandedRowConfig) && showExpandChevron) && (jsx("th", { className: `sticky left-0 bg-paper-100 px-2 ${currentDensity.header} border-b ${borderColor} z-19 w-10 ${bordered ? `border ${borderColor}` : ''}` })), allActions.length > 0 && (jsx("th", { className: `sticky left-0 bg-paper-100 text-center text-xs font-medium text-ink-700 uppercase tracking-wider border-b ${borderColor} z-20 ${bordered ? `border ${borderColor}` : ''}`, style: { width: '28px', padding: '0' } })), visibleColumns.map((column, colIdx) => {
                                     const columnKey = String(column.key);
                                     const dynamicWidth = columnWidths[columnKey];
                                     const thRef = useRef(null);
                                     const isDragging = draggingColumn === columnKey;
                                     const isDragOver = dragOverColumn === columnKey;
+                                    // Reduce left padding on first column when there are action buttons (match body cells)
+                                    const isFirstColumn = colIdx === 0;
+                                    const headerPaddingClass = isFirstColumn && allActions.length > 0 ? 'pl-3' : '';
                                     return (jsxs("th", { ref: thRef, draggable: reorderable, onDragStart: (e) => reorderable && handleDragStart(e, columnKey), onDragOver: (e) => reorderable && handleDragOver(e, columnKey), onDragEnd: handleDragEnd, onDrop: (e) => reorderable && handleDrop(e, columnKey), className: `
-                    ${currentDensity.header} text-left border-b ${borderColor} ${bordered ? `border ${borderColor}` : ''} relative
+                    ${currentDensity.header} ${headerPaddingClass} text-left border-b ${borderColor} ${bordered ? `border ${borderColor}` : ''} relative
                     ${reorderable ? 'cursor-move' : ''}
                     ${isDragging ? 'opacity-50' : ''}
                     ${isDragOver ? 'bg-accent-100' : ''}
@@ -58193,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, 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 };
+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