@papernote/ui 1.10.19 → 1.10.21

package/dist/index.js

@@ -4905,6 +4905,7 @@ Stack.displayName = 'Stack';
  * </Text>
  *
  * <Text color="warning">Warning message</Text>
+ * <Text color="caution">Caution message (informational, not alarming)</Text>
  *
  * // With ref
  * const textRef = useRef<HTMLParagraphElement>(null);
@@ -4959,6 +4960,7 @@ const Text = React.forwardRef(({ children, as: Component = 'p', size = 'base', s
         error: 'text-error-600',
         success: 'text-success-600',
         warning: 'text-warning-600',
+        caution: 'text-warning-700',
     };
     const alignClasses = {
         left: 'text-left',
@@ -5833,6 +5835,10 @@ function Alert({ variant = 'info', title, children, onClose, className = '', act
             container: 'bg-warning-50 border-warning-200 text-warning-900',
             icon: jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-5 w-5 text-warning-600" }),
         },
+        caution: {
+            container: 'bg-warning-100 border-warning-200 text-warning-800',
+            icon: jsxRuntime.jsx(lucideReact.Info, { className: "h-5 w-5 text-warning-700" }),
+        },
         info: {
             container: 'bg-primary-50 border-primary-200 text-primary-900',
             icon: jsxRuntime.jsx(lucideReact.Info, { className: "h-5 w-5 text-primary-600" }),
@@ -5846,6 +5852,7 @@ function Alert({ variant = 'info', title, children, onClose, className = '', act
                 success: 'bg-success-600 text-white hover:bg-success-700',
                 error: 'bg-error-600 text-white hover:bg-error-700',
                 warning: 'bg-warning-600 text-white hover:bg-warning-700',
+                caution: 'bg-warning-700 text-white hover:bg-warning-800',
                 info: 'bg-primary-600 text-white hover:bg-primary-700',
             };
             return `${base} ${variantClasses[variant]}`;
@@ -5855,6 +5862,7 @@ function Alert({ variant = 'info', title, children, onClose, className = '', act
             success: 'bg-white border border-success-300 text-success-700 hover:bg-success-50',
             error: 'bg-white border border-error-300 text-error-700 hover:bg-error-50',
             warning: 'bg-white border border-warning-300 text-warning-700 hover:bg-warning-50',
+            caution: 'bg-white border border-warning-300 text-warning-800 hover:bg-warning-50',
             info: 'bg-white border border-primary-300 text-primary-700 hover:bg-primary-50',
         };
         return `${base} ${variantClasses[variant]}`;
@@ -9500,6 +9508,7 @@ function Badge({ children, variant = 'neutral', size = 'md', icon, onRemove, cla
         success: 'bg-success-50 text-success-700 border-success-200',
         warning: 'bg-warning-50 text-warning-700 border-warning-200',
         error: 'bg-error-50 text-error-700 border-error-200',
+        caution: 'bg-warning-100 text-warning-800 border-warning-200',
         info: 'bg-primary-50 text-primary-700 border-primary-200',
         neutral: 'bg-paper-100 text-ink-700 border-paper-300',
     };
@@ -9507,6 +9516,7 @@ function Badge({ children, variant = 'neutral', size = 'md', icon, onRemove, cla
         success: 'bg-success-500',
         warning: 'bg-warning-500',
         error: 'bg-error-500',
+        caution: 'bg-warning-700',
         info: 'bg-primary-500',
         neutral: 'bg-ink-400',
     };
@@ -15047,44 +15057,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;
@@ -15093,7 +15111,7 @@ function requireHelpers () {
 	if (hasRequiredHelpers) return helpers;
 	hasRequiredHelpers = 1;
 	const FormulaError = requireError();
-	const Collection = collection;
+	const Collection = requireCollection();
 
 	const Types = {
 	    NUMBER: 0,
@@ -24747,7 +24765,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 = {
@@ -36375,7 +36393,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;
 
@@ -37137,7 +37155,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 {
@@ -39534,6 +39552,217 @@ const DataGrid = React.forwardRef(({ data: initialData, columns, onChange, rowHe
 });
 DataGrid.displayName = 'DataGrid';
 
+/**
+ * Default currency formatter
+ */
+const defaultFormatValue = (value) => {
+    if (value === null || value === undefined)
+        return '-';
+    return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    }).format(value);
+};
+/**
+ * Transform flat data into pivoted structure
+ */
+function pivotData(data, rowField, columnField, valueField, columnLabels, sortColumns, sortRows) {
+    // Extract unique row and column values
+    const rowSet = new Set();
+    const columnSet = new Set();
+    const valueMap = new Map();
+    for (const row of data) {
+        const rowValue = String(row[rowField] ?? '');
+        const colValue = row[columnField];
+        const val = row[valueField];
+        if (rowValue)
+            rowSet.add(rowValue);
+        if (colValue !== undefined && colValue !== null)
+            columnSet.add(colValue);
+        // Create composite key for the cell
+        const key = `${rowValue}|||${colValue}`;
+        const numVal = typeof val === 'number' ? val : parseFloat(String(val)) || 0;
+        valueMap.set(key, (valueMap.get(key) || 0) + numVal);
+    }
+    // Sort row labels
+    let rowLabels = Array.from(rowSet);
+    if (sortRows !== false) {
+        rowLabels.sort((a, b) => a.localeCompare(b));
+    }
+    // Sort column keys
+    let columnKeys = Array.from(columnSet);
+    if (sortColumns === 'label') {
+        columnKeys.sort((a, b) => {
+            const labelA = columnLabels?.[a] ?? String(a);
+            const labelB = columnLabels?.[b] ?? String(b);
+            return labelA.localeCompare(labelB);
+        });
+    }
+    else if (sortColumns !== 'none') {
+        // Default: sort by value (numeric if possible)
+        columnKeys.sort((a, b) => {
+            const numA = typeof a === 'number' ? a : parseFloat(String(a));
+            const numB = typeof b === 'number' ? b : parseFloat(String(b));
+            if (!isNaN(numA) && !isNaN(numB))
+                return numA - numB;
+            return String(a).localeCompare(String(b));
+        });
+    }
+    // Build column labels array
+    const colLabels = columnKeys.map((k) => columnLabels?.[k] ?? String(k));
+    // Build the matrix
+    const matrix = [];
+    const rowTotals = [];
+    const rowAverages = [];
+    const columnTotals = new Array(columnKeys.length).fill(0);
+    let grandTotal = 0;
+    for (const rowLabel of rowLabels) {
+        const rowData = [];
+        let rowSum = 0;
+        let rowCount = 0;
+        for (let colIdx = 0; colIdx < columnKeys.length; colIdx++) {
+            const colKey = columnKeys[colIdx];
+            const key = `${rowLabel}|||${colKey}`;
+            const value = valueMap.get(key) ?? null;
+            rowData.push(value);
+            if (value !== null) {
+                rowSum += value;
+                rowCount++;
+                columnTotals[colIdx] += value;
+                grandTotal += value;
+            }
+        }
+        matrix.push(rowData);
+        rowTotals.push(rowSum);
+        rowAverages.push(rowCount > 0 ? rowSum / rowCount : 0);
+    }
+    return {
+        rowLabels,
+        columnLabels: colLabels,
+        columnKeys,
+        matrix,
+        rowTotals,
+        rowAverages,
+        columnTotals,
+        grandTotal,
+    };
+}
+/**
+ * PivotTable Component
+ */
+function PivotTable({ data, rowField, columnField, valueField, columnLabels, rowLabel = '', formatValue = defaultFormatValue, showRowTotals = true, showRowAverages = false, showColumnTotals = true, className = '', sortColumns = 'value', sortRows = true, emptyValue = '-', }) {
+    const pivoted = React.useMemo(() => pivotData(data, rowField, columnField, valueField, columnLabels, sortColumns, sortRows), [data, rowField, columnField, valueField, columnLabels, sortColumns, sortRows]);
+    const formatCell = (value) => {
+        if (value === null || value === undefined)
+            return emptyValue;
+        return formatValue(value);
+    };
+    // Calculate column totals row average
+    const columnTotalsAverage = pivoted.columnTotals.length > 0
+        ? pivoted.columnTotals.reduce((a, b) => a + b, 0) / pivoted.columnTotals.length
+        : 0;
+    return (jsxRuntime.jsx("div", { className: `pivot-table-container ${className}`, style: { overflowX: 'auto' }, children: jsxRuntime.jsxs("table", { style: {
+                width: '100%',
+                borderCollapse: 'collapse',
+                fontSize: '14px',
+                fontFamily: 'inherit',
+            }, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { style: { backgroundColor: '#f8fafc', borderBottom: '2px solid #e2e8f0' }, children: [jsxRuntime.jsx("th", { style: {
+                                    padding: '12px 16px',
+                                    textAlign: 'left',
+                                    fontWeight: 600,
+                                    color: '#334155',
+                                    position: 'sticky',
+                                    left: 0,
+                                    backgroundColor: '#f8fafc',
+                                    zIndex: 1,
+                                    minWidth: '150px',
+                                }, children: rowLabel }), pivoted.columnLabels.map((label, idx) => (jsxRuntime.jsx("th", { style: {
+                                    padding: '12px 16px',
+                                    textAlign: 'right',
+                                    fontWeight: 600,
+                                    color: '#334155',
+                                    minWidth: '100px',
+                                    whiteSpace: 'nowrap',
+                                }, children: label }, idx))), showRowTotals && (jsxRuntime.jsx("th", { style: {
+                                    padding: '12px 16px',
+                                    textAlign: 'right',
+                                    fontWeight: 700,
+                                    color: '#1e40af',
+                                    backgroundColor: '#eff6ff',
+                                    minWidth: '100px',
+                                }, children: "Total" })), showRowAverages && (jsxRuntime.jsx("th", { style: {
+                                    padding: '12px 16px',
+                                    textAlign: 'right',
+                                    fontWeight: 700,
+                                    color: '#166534',
+                                    backgroundColor: '#f0fdf4',
+                                    minWidth: '100px',
+                                }, children: "Average" }))] }) }), jsxRuntime.jsxs("tbody", { children: [pivoted.rowLabels.map((rowLabel, rowIdx) => (jsxRuntime.jsxs("tr", { style: {
+                                borderBottom: '1px solid #e2e8f0',
+                                backgroundColor: rowIdx % 2 === 0 ? '#ffffff' : '#f8fafc',
+                            }, children: [jsxRuntime.jsx("td", { style: {
+                                        padding: '10px 16px',
+                                        fontWeight: 500,
+                                        color: '#1e293b',
+                                        position: 'sticky',
+                                        left: 0,
+                                        backgroundColor: rowIdx % 2 === 0 ? '#ffffff' : '#f8fafc',
+                                        zIndex: 1,
+                                    }, children: rowLabel }), pivoted.matrix[rowIdx].map((value, colIdx) => (jsxRuntime.jsx("td", { style: {
+                                        padding: '10px 16px',
+                                        textAlign: 'right',
+                                        color: value === null ? '#94a3b8' : '#334155',
+                                        fontVariantNumeric: 'tabular-nums',
+                                    }, children: formatCell(value) }, colIdx))), showRowTotals && (jsxRuntime.jsx("td", { style: {
+                                        padding: '10px 16px',
+                                        textAlign: 'right',
+                                        fontWeight: 600,
+                                        color: '#1e40af',
+                                        backgroundColor: '#eff6ff',
+                                        fontVariantNumeric: 'tabular-nums',
+                                    }, children: formatCell(pivoted.rowTotals[rowIdx]) })), showRowAverages && (jsxRuntime.jsx("td", { style: {
+                                        padding: '10px 16px',
+                                        textAlign: 'right',
+                                        fontWeight: 600,
+                                        color: '#166534',
+                                        backgroundColor: '#f0fdf4',
+                                        fontVariantNumeric: 'tabular-nums',
+                                    }, children: formatCell(pivoted.rowAverages[rowIdx]) }))] }, rowIdx))), showColumnTotals && (jsxRuntime.jsxs("tr", { style: {
+                                borderTop: '2px solid #e2e8f0',
+                                backgroundColor: '#f1f5f9',
+                                fontWeight: 600,
+                            }, children: [jsxRuntime.jsx("td", { style: {
+                                        padding: '12px 16px',
+                                        fontWeight: 700,
+                                        color: '#1e293b',
+                                        position: 'sticky',
+                                        left: 0,
+                                        backgroundColor: '#f1f5f9',
+                                        zIndex: 1,
+                                    }, children: "Total" }), pivoted.columnTotals.map((total, idx) => (jsxRuntime.jsx("td", { style: {
+                                        padding: '12px 16px',
+                                        textAlign: 'right',
+                                        color: '#1e293b',
+                                        fontVariantNumeric: 'tabular-nums',
+                                    }, children: formatCell(total) }, idx))), showRowTotals && (jsxRuntime.jsx("td", { style: {
+                                        padding: '12px 16px',
+                                        textAlign: 'right',
+                                        fontWeight: 700,
+                                        color: '#1e40af',
+                                        backgroundColor: '#dbeafe',
+                                        fontVariantNumeric: 'tabular-nums',
+                                    }, children: formatCell(pivoted.grandTotal) })), showRowAverages && (jsxRuntime.jsx("td", { style: {
+                                        padding: '12px 16px',
+                                        textAlign: 'right',
+                                        fontWeight: 700,
+                                        color: '#166534',
+                                        backgroundColor: '#dcfce7',
+                                        fontVariantNumeric: 'tabular-nums',
+                                    }, children: formatCell(columnTotalsAverage) }))] }))] })] }) }));
+}
+
 // Color mapping for action buttons
 const colorClasses = {
     primary: 'bg-accent-500 text-white',
@@ -59815,6 +60044,11 @@ const statusConfig = {
         defaultLabel: 'Warning',
         className: 'bg-warning-100 text-warning-800',
     },
+    caution: {
+        icon: lucideReact.Info,
+        defaultLabel: 'Caution',
+        className: 'bg-warning-100 text-warning-700',
+    },
     overdue: {
         icon: lucideReact.AlertCircle,
         defaultLabel: 'Overdue',
@@ -61773,6 +62007,7 @@ exports.PageNavigation = PageNavigation;
 exports.Pagination = Pagination;
 exports.PasswordInput = PasswordInput;
 exports.PermissionBadge = PermissionBadge;
+exports.PivotTable = PivotTable;
 exports.Popover = Popover;
 exports.PriorityAlertBanner = PriorityAlertBanner;
 exports.Progress = Progress;