@papernote/ui 1.10.4 → 1.10.5

package/dist/index.js

@@ -2181,6 +2181,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.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 = React.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 (jsxRuntime.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.
  *
@@ -11530,14 +11810,17 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
                                 const columnKey = String(column.key);
                                 const dynamicWidth = columnWidths[columnKey];
                                 return (jsxRuntime.jsx("col", { style: getColumnStyle(column, dynamicWidth) }, index));
-                            })] }), jsxRuntime.jsx("thead", { className: `bg-paper-100 sticky top-0 z-10 ${headerClassName}`, children: jsxRuntime.jsxs("tr", { className: "table-header-row", children: [selectable && (jsxRuntime.jsx("th", { className: `sticky left-0 bg-paper-100 ${currentDensity.header} border-b ${borderColor} z-20 w-12 ${bordered ? `border ${borderColor}` : ''}`, children: jsxRuntime.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) && (jsxRuntime.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 && (jsxRuntime.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) => {
+                            })] }), jsxRuntime.jsx("thead", { className: `bg-paper-100 sticky top-0 z-10 ${headerClassName}`, children: jsxRuntime.jsxs("tr", { className: "table-header-row", children: [selectable && (jsxRuntime.jsx("th", { className: `sticky left-0 bg-paper-100 ${currentDensity.header} border-b ${borderColor} z-20 w-12 ${bordered ? `border ${borderColor}` : ''}`, children: jsxRuntime.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) && (jsxRuntime.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 && (jsxRuntime.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 = React.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 (jsxRuntime.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' : ''}
@@ -58377,6 +58660,7 @@ exports.Textarea = Textarea;
 exports.ThemeToggle = ThemeToggle;
 exports.TimePicker = TimePicker;
 exports.Timeline = Timeline;
+exports.TimezoneSelector = TimezoneSelector;
 exports.Toast = Toast;
 exports.ToastContainer = ToastContainer;
 exports.Tooltip = Tooltip;
@@ -58400,6 +58684,8 @@ exports.formatStatisticValue = formatStatisticValue;
 exports.formatStatistics = formatStatistics;
 exports.getFormula = getFormula;
 exports.getFormulasByCategory = getFormulasByCategory;
+exports.getLocalTimezone = getLocalTimezone;
+exports.isValidTimezone = isValidTimezone;
 exports.loadColumnOrder = loadColumnOrder;
 exports.loadColumnWidths = loadColumnWidths;
 exports.reorderArray = reorderArray;