@papernote/ui 1.10.21 → 1.10.23

package/dist/styles.css

@@ -350,7 +350,7 @@
   --tw-contain-style:  ;
 }
 
-/* ! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com */
+/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */
 
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -3512,6 +3512,20 @@ input:checked + .slider:before{
   background-color: rgb(110 109 94 / var(--tw-bg-opacity, 1));
 }
 
+.bg-amber-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
+}
+
+.bg-amber-100\/50{
+  background-color: rgb(254 243 199 / 0.5);
+}
+
+.bg-amber-50{
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
+}
+
 .bg-black{
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
@@ -3534,6 +3548,20 @@ input:checked + .slider:before{
   background-color: currentColor;
 }
 
+.bg-emerald-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
+}
+
+.bg-emerald-100\/50{
+  background-color: rgb(209 250 229 / 0.5);
+}
+
+.bg-emerald-50{
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
+}
+
 .bg-error-100{
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
@@ -3656,6 +3684,20 @@ input:checked + .slider:before{
   background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
 }
 
+.bg-pink-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 231 243 / var(--tw-bg-opacity, 1));
+}
+
+.bg-pink-100\/50{
+  background-color: rgb(252 231 243 / 0.5);
+}
+
+.bg-pink-50{
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 242 248 / var(--tw-bg-opacity, 1));
+}
+
 .bg-primary-100{
   --tw-bg-opacity: 1;
   background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
@@ -3689,6 +3731,20 @@ input:checked + .slider:before{
   background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
 }
 
+.bg-sky-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
+}
+
+.bg-sky-100\/50{
+  background-color: rgb(224 242 254 / 0.5);
+}
+
+.bg-sky-50{
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1));
+}
+
 .bg-slate-50\/80{
   background-color: rgb(248 250 252 / 0.8);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papernote/ui",
-  "version": "1.10.21",
+  "version": "1.10.23",
   "type": "module",
   "description": "A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive",
   "main": "dist/index.js",
@@ -77,7 +77,7 @@
     "rollup-plugin-dts": "^6.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.0",
-    "storybook": "^10.0.8",
+    "storybook": "^10.1.11",
     "tailwindcss": "^3.4.0",
     "ts-jest": "^29.4.5",
     "tslib": "^2.6.0",
@@ -111,5 +111,8 @@
     "canvas-confetti": "^1.9.4",
     "react-spreadsheet": "^0.10.1",
     "xlsx": "^0.18.5"
+  },
+  "overrides": {
+    "esbuild": "^0.25.0"
   }
 }

package/src/components/DataGrid.tsx

@@ -76,6 +76,10 @@ export interface DataGridColumn {
     prefix?: string;
     suffix?: string;
   };
+  /** Column group identifier for visual banding (e.g., "SalesAmount" groups base column with comparison variants) */
+  group?: string;
+  /** Variant type within a group: "current", "prior", "variance", "variancePct" */
+  variant?: 'current' | 'prior' | 'variance' | 'variancePct';
 }
 
 /**
@@ -195,6 +199,34 @@ const colIndexToLetter = (index: number): string => {
 // Note: parseRef is available for future formula reference parsing
 // const parseRef = (ref: string): { row: number; col: number } | null => { ... }
 
+/**
+ * Color banding for column groups (e.g., comparison columns)
+ * Alternates between color sets to visually distinguish groups
+ */
+const COLUMN_GROUP_COLORS = [
+  { header: 'bg-sky-100', cell: 'bg-sky-50', cellAlt: 'bg-sky-100/50' },
+  { header: 'bg-amber-100', cell: 'bg-amber-50', cellAlt: 'bg-amber-100/50' },
+  { header: 'bg-emerald-100', cell: 'bg-emerald-50', cellAlt: 'bg-emerald-100/50' },
+  { header: 'bg-pink-100', cell: 'bg-pink-50', cellAlt: 'bg-pink-100/50' },
+];
+
+/**
+ * Build a map of group names to color indices for column banding
+ */
+const buildGroupColorMap = (columns: DataGridColumn[]): Map<string, number> => {
+  const groupColorMap = new Map<string, number>();
+  let colorIndex = 0;
+
+  for (const col of columns) {
+    if (col.group && !groupColorMap.has(col.group)) {
+      groupColorMap.set(col.group, colorIndex % COLUMN_GROUP_COLORS.length);
+      colorIndex++;
+    }
+  }
+
+  return groupColorMap;
+};
+
 /**
  * DataGrid - Excel-like data grid component with formulas
  *
@@ -291,6 +323,41 @@ export const DataGrid = forwardRef<DataGridHandle, DataGridProps>(
       return 0;
     }, [frozenRowsState, selectedCell]);
 
+    // Build group color map for column banding
+    const groupColorMap = useMemo(() => buildGroupColorMap(columns), [columns]);
+
+    // Get header background class for a column (considers group banding)
+    const getHeaderBgClass = useCallback(
+      (column: DataGridColumn): string => {
+        if (column.group) {
+          const colorIdx = groupColorMap.get(column.group);
+          if (colorIdx !== undefined) {
+            return COLUMN_GROUP_COLORS[colorIdx].header;
+          }
+        }
+        return 'bg-stone-100';
+      },
+      [groupColorMap]
+    );
+
+    // Get cell background class for a column (considers group banding and zebra)
+    const getCellBgClass = useCallback(
+      (column: DataGridColumn, isZebra: boolean, isFrozenCol: boolean): string => {
+        if (column.group) {
+          const colorIdx = groupColorMap.get(column.group);
+          if (colorIdx !== undefined) {
+            const colors = COLUMN_GROUP_COLORS[colorIdx];
+            return isZebra ? colors.cellAlt : colors.cell;
+          }
+        }
+        // Default behavior
+        if (isZebra && isFrozenCol) return 'bg-paper-50';
+        if (isFrozenCol) return 'bg-white';
+        return '';
+      },
+      [groupColorMap]
+    );
+
     // Check if a specific row is frozen
     const isRowFrozen = useCallback(
       (rowIndex: number) => {
@@ -821,11 +888,12 @@ export const DataGrid = forwardRef<DataGridHandle, DataGridProps>(
                 {columns.map((column, colIndex) => {
                   const isFrozen = colIndex < frozenColumns;
                   const leftOffset = rowHeaders ? 50 + columns.slice(0, colIndex).reduce((sum, c) => sum + (c.width || 100), 0) : columns.slice(0, colIndex).reduce((sum, c) => sum + (c.width || 100), 0);
+                  const headerBgClass = getHeaderBgClass(column);
 
                   return (
                     <th
                       key={column.key}
-                      className={`${cellPadding} border-b border-r border-stone-200 bg-stone-100 font-semibold text-ink-600 text-${column.align || 'left'} ${
+                      className={`${cellPadding} border-b border-r border-stone-200 ${headerBgClass} font-semibold text-ink-600 text-${column.align || 'left'} ${
                         isFrozen ? 'sticky z-30' : ''
                       }`}
                       style={{
@@ -944,17 +1012,16 @@ export const DataGrid = forwardRef<DataGridHandle, DataGridProps>(
                       const leftOffset = rowHeaders
                         ? 50 + columns.slice(0, colIndex).reduce((sum, c) => sum + (c.width || 100), 0)
                         : columns.slice(0, colIndex).reduce((sum, c) => sum + (c.width || 100), 0);
+                      const cellBgClass = getCellBgClass(column, isZebra, isFrozenCol);
 
                       return (
                         <td
                           key={colIndex}
                           className={`${cellPadding} border-b border-r border-stone-200 text-${
                             column?.align || 'left'
-                          } ${isFrozenCol ? 'sticky z-10' : ''} ${
-                            isZebra && isFrozenCol ? 'bg-paper-50' : isFrozenCol ? 'bg-white' : ''
-                          } ${isSelected ? 'ring-2 ring-inset ring-primary-500' : ''} ${
-                            hasFormula ? 'bg-blue-50' : ''
-                          } ${cell?.className || ''}`}
+                          } ${isFrozenCol ? 'sticky z-10' : ''} ${cellBgClass} ${
+                            isSelected ? 'ring-2 ring-inset ring-primary-500' : ''
+                          } ${hasFormula ? 'bg-blue-50' : ''} ${cell?.className || ''}`}
                           style={{
                             left: isFrozenCol ? leftOffset : undefined,
                             minWidth: column?.minWidth || 80,