@nuptechs/nup-xlsx-preview 1.0.0

package/dist/styles/print.css

@@ -0,0 +1,182 @@
+/**
+ * @aspect/nup-xlsx-preview - Print Styles
+ * Optimized for printing spreadsheets
+ */
+
+@media print {
+  /* Reset colors for print */
+  .nup-spreadsheet,
+  .nup-spreadsheet * {
+    background: white !important;
+    color: black !important;
+    box-shadow: none !important;
+  }
+
+  /* Container */
+  .nup-spreadsheet {
+    position: static !important;
+    width: 100% !important;
+    height: auto !important;
+    max-height: none !important;
+    overflow: visible !important;
+    border: none !important;
+    border-radius: 0 !important;
+    page-break-inside: auto;
+  }
+
+  /* Scroll container - remove scrolling */
+  .nup-scroll-container {
+    position: static !important;
+    overflow: visible !important;
+    height: auto !important;
+  }
+
+  /* Content */
+  .nup-content {
+    position: static !important;
+    width: auto !important;
+    height: auto !important;
+  }
+
+  /* Cells - use table layout for print */
+  .nup-cell {
+    position: static !important;
+    display: table-cell !important;
+    border: 0.5pt solid #999999 !important;
+    padding: 3pt 5pt !important;
+    font-size: 9pt !important;
+    white-space: normal !important;
+    word-wrap: break-word !important;
+    page-break-inside: avoid;
+  }
+
+  /* Headers */
+  .nup-header {
+    display: table-cell !important;
+    position: static !important;
+    background: #f0f0f0 !important;
+    border: 0.5pt solid #999999 !important;
+    font-weight: bold !important;
+    font-size: 8pt !important;
+  }
+
+  /* Selection styling - hide for print */
+  .nup-selection-border,
+  .nup-cell-selected,
+  .nup-cell-search-result,
+  .nup-cell-search-current {
+    background: white !important;
+    border-color: #999999 !important;
+  }
+
+  .nup-selection-border {
+    display: none !important;
+  }
+
+  /* Hide UI elements */
+  .nup-sheet-tabs,
+  .nup-search-bar,
+  .nup-resize-handle,
+  .nup-frozen-line-row,
+  .nup-frozen-line-col,
+  .nup-loading {
+    display: none !important;
+  }
+
+  /* Scrollbars */
+  .nup-scroll-container::-webkit-scrollbar {
+    display: none !important;
+  }
+
+  /* Page breaks */
+  .nup-print-page-break {
+    page-break-after: always;
+  }
+
+  /* Header rows repeat on each page */
+  .nup-print-header {
+    display: table-header-group !important;
+  }
+
+  /* Repeat column headers */
+  thead {
+    display: table-header-group;
+  }
+
+  /* Avoid orphan rows */
+  tr {
+    page-break-inside: avoid;
+    page-break-after: auto;
+  }
+
+  /* Print margins */
+  @page {
+    margin: 1cm;
+    size: A4 landscape;
+  }
+
+  /* First page */
+  @page :first {
+    margin-top: 1.5cm;
+  }
+
+  /* Left pages */
+  @page :left {
+    margin-left: 1.5cm;
+    margin-right: 1cm;
+  }
+
+  /* Right pages */
+  @page :right {
+    margin-left: 1cm;
+    margin-right: 1.5cm;
+  }
+
+  /* Grayscale print option */
+  .nup-print-grayscale {
+    filter: grayscale(100%);
+    -webkit-filter: grayscale(100%);
+  }
+
+  /* Compact print option */
+  .nup-print-compact .nup-cell {
+    padding: 1pt 3pt !important;
+    font-size: 8pt !important;
+  }
+
+  .nup-print-compact .nup-header {
+    font-size: 7pt !important;
+  }
+
+  /* Hide column/row headers for cleaner print */
+  .nup-print-no-headers .nup-header {
+    display: none !important;
+  }
+
+  .nup-print-no-headers .nup-corner {
+    display: none !important;
+  }
+
+  /* Grid lines option */
+  .nup-print-no-gridlines .nup-cell {
+    border: none !important;
+  }
+
+  .nup-print-no-gridlines .nup-header {
+    border: none !important;
+    border-bottom: 1pt solid #999999 !important;
+  }
+}
+
+/* Print preview styles (visible in normal view) */
+.nup-print-preview {
+  background: white;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  margin: 20px auto;
+  max-width: 297mm; /* A4 landscape width */
+}
+
+.nup-print-preview .nup-spreadsheet {
+  border: none;
+  border-radius: 0;
+}

package/dist/styles/themes.css

@@ -0,0 +1,202 @@
+/**
+ * @aspect/nup-xlsx-preview - Theme Definitions
+ * 7 themes: 4 light, 2 dark, 1 accessible
+ */
+
+/* === LIGHT THEMES === */
+
+/* Theme: Default (Google Sheets inspired) */
+.nup-theme-default {
+  --nup-background: #ffffff;
+  --nup-foreground: #202124;
+  --nup-grid: #e0e0e0;
+  --nup-border: #dadce0;
+  --nup-cell-bg: #ffffff;
+  --nup-cell-hover: #f8f9fa;
+  --nup-header-bg: #f8f9fa;
+  --nup-header-fg: #5f6368;
+  --nup-header-selected-bg: #e8f0fe;
+  --nup-selection-border: #1a73e8;
+  --nup-selection-bg: rgba(26, 115, 232, 0.08);
+  --nup-frozen-border: #dadce0;
+  --nup-scrollbar-track: #f1f1f1;
+  --nup-scrollbar-thumb: #c1c1c1;
+  --nup-scrollbar-thumb-hover: #a8a8a8;
+  --nup-search-bg: #fff59d;
+  --nup-search-current-bg: #ffb300;
+  --nup-font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --nup-font-size: 13px;
+}
+
+/* Theme: Excel Classic */
+.nup-theme-excel {
+  --nup-background: #ffffff;
+  --nup-foreground: #000000;
+  --nup-grid: #d4d4d4;
+  --nup-border: #b4b4b4;
+  --nup-cell-bg: #ffffff;
+  --nup-cell-hover: #f0f0f0;
+  --nup-header-bg: #f0f0f0;
+  --nup-header-fg: #000000;
+  --nup-header-selected-bg: #cce4f7;
+  --nup-selection-border: #217346;
+  --nup-selection-bg: rgba(33, 115, 70, 0.1);
+  --nup-frozen-border: #9bc2e6;
+  --nup-scrollbar-track: #f0f0f0;
+  --nup-scrollbar-thumb: #c0c0c0;
+  --nup-scrollbar-thumb-hover: #a0a0a0;
+  --nup-search-bg: #ffff00;
+  --nup-search-current-bg: #ff9632;
+  --nup-font-family: 'Calibri', 'Segoe UI', sans-serif;
+  --nup-font-size: 11px;
+}
+
+/* Theme: Modern */
+.nup-theme-modern {
+  --nup-background: #fafafa;
+  --nup-foreground: #18181b;
+  --nup-grid: #e4e4e7;
+  --nup-border: #d4d4d8;
+  --nup-cell-bg: #ffffff;
+  --nup-cell-hover: #f4f4f5;
+  --nup-header-bg: #f4f4f5;
+  --nup-header-fg: #71717a;
+  --nup-header-selected-bg: #dbeafe;
+  --nup-selection-border: #3b82f6;
+  --nup-selection-bg: rgba(59, 130, 246, 0.08);
+  --nup-frozen-border: #a1a1aa;
+  --nup-scrollbar-track: #f4f4f5;
+  --nup-scrollbar-thumb: #d4d4d8;
+  --nup-scrollbar-thumb-hover: #a1a1aa;
+  --nup-search-bg: #fef08a;
+  --nup-search-current-bg: #fbbf24;
+  --nup-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --nup-font-size: 13px;
+}
+
+/* Theme: Minimal */
+.nup-theme-minimal {
+  --nup-background: #ffffff;
+  --nup-foreground: #27272a;
+  --nup-grid: #f4f4f5;
+  --nup-border: #e4e4e7;
+  --nup-cell-bg: #ffffff;
+  --nup-cell-hover: #fafafa;
+  --nup-header-bg: #ffffff;
+  --nup-header-fg: #a1a1aa;
+  --nup-header-selected-bg: #f4f4f5;
+  --nup-selection-border: #18181b;
+  --nup-selection-bg: rgba(24, 24, 27, 0.04);
+  --nup-frozen-border: #e4e4e7;
+  --nup-scrollbar-track: #ffffff;
+  --nup-scrollbar-thumb: #e4e4e7;
+  --nup-scrollbar-thumb-hover: #d4d4d8;
+  --nup-search-bg: #fef9c3;
+  --nup-search-current-bg: #fde047;
+  --nup-font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
+  --nup-font-size: 13px;
+}
+
+/* === DARK THEMES === */
+
+/* Theme: Dark */
+.nup-theme-dark {
+  --nup-background: #1e1e1e;
+  --nup-foreground: #d4d4d4;
+  --nup-grid: #3c3c3c;
+  --nup-border: #4a4a4a;
+  --nup-cell-bg: #252526;
+  --nup-cell-hover: #2a2d2e;
+  --nup-header-bg: #252526;
+  --nup-header-fg: #858585;
+  --nup-header-selected-bg: #264f78;
+  --nup-selection-border: #0078d4;
+  --nup-selection-bg: rgba(0, 120, 212, 0.2);
+  --nup-frozen-border: #4a4a4a;
+  --nup-scrollbar-track: #1e1e1e;
+  --nup-scrollbar-thumb: #4a4a4a;
+  --nup-scrollbar-thumb-hover: #5a5a5a;
+  --nup-search-bg: #613a00;
+  --nup-search-current-bg: #a86400;
+  --nup-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --nup-font-size: 13px;
+}
+
+/* Theme: Midnight */
+.nup-theme-midnight {
+  --nup-background: #0d1117;
+  --nup-foreground: #c9d1d9;
+  --nup-grid: #21262d;
+  --nup-border: #30363d;
+  --nup-cell-bg: #0d1117;
+  --nup-cell-hover: #161b22;
+  --nup-header-bg: #161b22;
+  --nup-header-fg: #8b949e;
+  --nup-header-selected-bg: #1f6feb33;
+  --nup-selection-border: #58a6ff;
+  --nup-selection-bg: rgba(88, 166, 255, 0.15);
+  --nup-frozen-border: #30363d;
+  --nup-scrollbar-track: #0d1117;
+  --nup-scrollbar-thumb: #30363d;
+  --nup-scrollbar-thumb-hover: #484f58;
+  --nup-search-bg: #634700;
+  --nup-search-current-bg: #9e6a00;
+  --nup-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --nup-font-size: 13px;
+}
+
+/* === ACCESSIBLE THEME (WCAG AAA) === */
+
+/* Theme: High Contrast */
+.nup-theme-accessible {
+  --nup-background: #ffffff;
+  --nup-foreground: #000000;
+  --nup-grid: #000000;
+  --nup-border: #000000;
+  --nup-cell-bg: #ffffff;
+  --nup-cell-hover: #e6e6e6;
+  --nup-header-bg: #e6e6e6;
+  --nup-header-fg: #000000;
+  --nup-header-selected-bg: #0078d4;
+  --nup-selection-border: #0000ff;
+  --nup-selection-bg: rgba(0, 0, 255, 0.15);
+  --nup-frozen-border: #000000;
+  --nup-scrollbar-track: #e6e6e6;
+  --nup-scrollbar-thumb: #666666;
+  --nup-scrollbar-thumb-hover: #333333;
+  --nup-search-bg: #ffff00;
+  --nup-search-current-bg: #ff6600;
+  --nup-font-family: Arial, Helvetica, sans-serif;
+  --nup-font-size: 14px;
+}
+
+/* Accessible theme selected state overrides */
+.nup-theme-accessible .nup-header-selected {
+  color: #ffffff;
+}
+
+/* === COLORBLIND-FRIENDLY VARIANTS === */
+
+/* Deuteranopia (red-green) */
+.nup-colorblind-deuteranopia {
+  --nup-selection-border: #0077bb;
+  --nup-selection-bg: rgba(0, 119, 187, 0.12);
+  --nup-search-bg: #ddcc77;
+  --nup-search-current-bg: #cc6677;
+}
+
+/* Protanopia (red-green) */
+.nup-colorblind-protanopia {
+  --nup-selection-border: #33bbee;
+  --nup-selection-bg: rgba(51, 187, 238, 0.12);
+  --nup-search-bg: #ee7733;
+  --nup-search-current-bg: #cc3311;
+}
+
+/* Tritanopia (blue-yellow) */
+.nup-colorblind-tritanopia {
+  --nup-selection-border: #ee3377;
+  --nup-selection-bg: rgba(238, 51, 119, 0.12);
+  --nup-search-bg: #009988;
+  --nup-search-current-bg: #ee7733;
+}

package/package.json

@@ -0,0 +1,131 @@
+{
+  "name": "@nuptechs/nup-xlsx-preview",
+  "version": "1.0.0",
+  "description": "Ultra-light Excel visualization component with virtual scrolling, themes, and framework adapters",
+  "author": "Aspect",
+  "license": "Commercial",
+  "keywords": [
+    "excel",
+    "xlsx",
+    "spreadsheet",
+    "preview",
+    "viewer",
+    "virtual-scroll",
+    "react",
+    "vue",
+    "typescript"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./react": {
+      "import": {
+        "types": "./dist/adapters/react.d.ts",
+        "default": "./dist/adapters/react.js"
+      },
+      "require": {
+        "types": "./dist/adapters/react.d.ts",
+        "default": "./dist/adapters/react.cjs"
+      }
+    },
+    "./vue": {
+      "import": {
+        "types": "./dist/adapters/vue.d.ts",
+        "default": "./dist/adapters/vue.js"
+      },
+      "require": {
+        "types": "./dist/adapters/vue.d.ts",
+        "default": "./dist/adapters/vue.cjs"
+      }
+    },
+    "./vanilla": {
+      "import": {
+        "types": "./dist/adapters/vanilla.d.ts",
+        "default": "./dist/adapters/vanilla.js"
+      },
+      "require": {
+        "types": "./dist/adapters/vanilla.d.ts",
+        "default": "./dist/adapters/vanilla.cjs"
+      }
+    },
+    "./styles/base.css": "./dist/styles/base.css",
+    "./styles/themes.css": "./dist/styles/themes.css",
+    "./styles/print.css": "./dist/styles/print.css",
+    "./styles": "./dist/styles/index.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "tsup && npm run build:css",
+    "build:css": "mkdir -p dist/styles && cp src/styles/*.css dist/styles/ && cat src/styles/base.css src/styles/themes.css src/styles/print.css > dist/styles/index.css",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint src --ext .ts,.tsx",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "@aspect/nup-xlsx-core": "^1.0.0",
+    "@aspect/nup-xlsx-tokens": "^1.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "vue": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@aspect/nup-xlsx-core": {
+      "optional": true
+    },
+    "@aspect/nup-xlsx-tokens": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^1.0.0",
+    "vue": "^3.4.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aspect/nup-xlsx-suite.git",
+    "directory": "packages/nup-xlsx-preview"
+  },
+  "bugs": {
+    "url": "https://github.com/aspect/nup-xlsx-suite/issues"
+  },
+  "homepage": "https://github.com/aspect/nup-xlsx-suite/tree/main/packages/nup-xlsx-preview#readme"
+}