react-glide-table 1.0.1 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-glide-table",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/zpxlffjrm/react-glide-table.git"
@@ -10,6 +10,10 @@
   },
   "homepage": "https://github.com/zpxlffjrm/react-glide-table#readme",
   "type": "module",
+  "license": "MIT",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -18,36 +22,38 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
-    },
-    "./style.css": "./dist/style.css"
+    }
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "tsup && node scripts/build-css.mjs",
+    "dev": "vite --config playground/vite.config.ts",
+    "build": "tsup",
     "test": "vitest run",
     "typecheck": "tsc"
   },
   "peerDependencies": {
-    "@tanstack/react-table": "^8.0.0",
-    "@tanstack/react-virtual": "^3.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
-  "devDependencies": {
+  "dependencies": {
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.14.7",
+    "@tanstack/react-virtual": "^3.14.7"
+  },
+  "devDependencies": {
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.3",
     "jsdom": "^29.1.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
+    "vite": "^8.1.5",
     "vitest": "^4.1.10"
   }
 }

package/dist/style.css

@@ -1,404 +0,0 @@
-:root {
-  --color-neutral-border-default: #e5e7eb;
-  --color-neutral-bg-surface: #ffffff;
-  --color-neutral-bg-app: #f9fafb;
-  --color-neutral-text-primary: #111827;
-  --color-neutral-text-secondary: #4b5563;
-  --color-neutral-text-muted: #6b7280;
-  --color-neutral-text-placeholder: #9ca3af;
-  --color-neutral-text-default: #1f2937;
-  --color-brand-primary: #2563eb;
-  --color-brand-accent: #2563eb;
-  --color-brand-surface: #eff6ff;
-  --spacing-xs: 4px;
-  --spacing-sm: 6px;
-  --spacing-md: 8px;
-  --spacing-lg: 12px;
-  --spacing-xl: 16px;
-  --spacing-3xl: 24px;
-  --spacing-5xl: 32px;
-  --spacing-7xl: 48px;
-  --radius-sm: 4px;
-  --radius-md: 6px;
-}
-
-
-.DataTableJSX {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  border-radius: var(--radius-md);
-  border: 1px solid var(--color-neutral-border-default);
-  background-color: var(--color-neutral-bg-surface);
-}
-
-.DataTableJSX--pending {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 240px;
-}
-
-.DataTableJSX--pending .data-table-loading-text {
-  font-size: 14px;
-  color: var(--color-neutral-text-muted);
-}
-
-.DataTableJSX--with-pagination {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom: 0;
-}
-
-.DataTableJSX .data-table-scroll {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-}
-
-.DataTableJSX .data-table {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-}
-
-.DataTableJSX .data-table-head {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  background-color: var(--color-neutral-bg-app);
-}
-
-.DataTableJSX .data-table-head-row {
-  height: 40px;
-}
-
-.DataTableJSX .data-table-head-cell {
-  border-bottom: 1px solid var(--color-neutral-border-default);
-  padding: 0 var(--spacing-md);
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--color-neutral-text-muted);
-}
-
-.DataTableJSX .data-table-body {
-  user-select: none;
-}
-
-.DataTableJSX .data-table-empty-cell {
-  height: 96px;
-  border-bottom: 1px solid var(--color-neutral-border-default);
-  padding: 0 var(--spacing-md);
-  text-align: center;
-  font-size: 14px;
-  color: var(--color-neutral-text-muted);
-}
-
-.DataTableJSX .data-table-virtual-spacer-cell {
-  padding: 0;
-  border: 0;
-}
-
-.DataTableJSX .cell-align-left {
-  text-align: left;
-}
-
-.DataTableJSX .cell-align-center {
-  text-align: center;
-}
-
-.DataTableJSX .cell-align-right {
-  text-align: right;
-}
-
-
-.DataTableRowJSX {
-  min-height: 44px;
-  background-color: var(--color-neutral-bg-surface);
-  transition: background-color 0.15s ease;
-}
-
-.DataTableRowJSX.row-hoverable:hover {
-  background-color: var(--color-neutral-border-default);
-}
-
-.DataTableRowJSX.row-hovered {
-  background-color: var(--color-neutral-border-default);
-}
-
-.DataTableRowJSX.is-selected {
-  background-color: var(--color-brand-primary);
-  color: #ffffff;
-}
-
-.DataTableRowJSX.is-selected * {
-  color: #ffffff;
-}
-
-.DataTableRowJSX.is-expandable {
-  cursor: pointer;
-}
-
-.DataTableRowJSX .data-table-cell {
-  position: relative;
-  border-bottom: 1px solid var(--color-neutral-border-default);
-  padding: 0 var(--spacing-md);
-  font-size: 14px;
-  font-weight: 400;
-}
-
-.DataTableRowJSX .data-table-cell.is-group-selected {
-  background-color: var(--color-brand-primary);
-  color: #ffffff;
-}
-
-.DataTableRowJSX .data-table-cell.is-group-selected * {
-  color: #ffffff;
-}
-
-.DataTableRowJSX .data-table-cell.is-group-hovered {
-  background-color: var(--color-neutral-border-default);
-}
-
-.DataTableRowJSX .data-table-cell.cell-selection-fill {
-  background-color: var(--color-brand-surface);
-  color: #000000;
-}
-
-.DataTableRowJSX .data-table-cell.is-editable {
-  cursor: text;
-}
-
-.DataTableRowJSX .cell-align-left {
-  text-align: left;
-}
-
-.DataTableRowJSX .cell-align-center {
-  text-align: center;
-}
-
-.DataTableRowJSX .cell-align-right {
-  text-align: right;
-}
-
-.DataTableRowJSX .cell-edit-input {
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-  height: 32px;
-  padding: 0 var(--spacing-xs);
-  border: 0;
-  border-radius: var(--radius-sm);
-  background-color: var(--color-neutral-bg-surface);
-  font-size: 14px;
-  color: var(--color-neutral-text-default);
-  outline: none;
-  user-select: text;
-}
-
-.DataTableRowJSX .expand-cell {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-xs);
-}
-
-.DataTableRowJSX .expand-cell-content {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  gap: var(--spacing-xs);
-}
-
-.DataTableRowJSX .expand-cell-indent {
-  flex-shrink: 0;
-  width: 20px;
-  text-align: center;
-  font-size: 20px;
-  line-height: 1;
-}
-
-.DataTableRowJSX .expand-cell-value {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.DataTableRowJSX .expand-toggle-button {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--color-neutral-text-muted);
-  cursor: pointer;
-}
-
-.DataTableRowJSX .expand-toggle-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.DataTableRowJSX .fill-handle {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  z-index: 10;
-  width: 8px;
-  height: 8px;
-  background-color: var(--color-brand-primary);
-  cursor: crosshair;
-}
-
-
-.DataTableToolbarJSX {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-md);
-  height: 48px;
-  padding: 0 var(--spacing-5xl);
-  border-bottom: 1px solid var(--color-neutral-border-default);
-}
-
-.DataTableToolbarJSX .toolbar-left {
-  display: flex;
-  min-width: 0;
-  flex: 1;
-  align-items: center;
-  gap: var(--spacing-7xl);
-}
-
-.DataTableToolbarJSX .toolbar-count {
-  flex-shrink: 0;
-  font-size: 16px;
-  font-weight: 600;
-  letter-spacing: -0.1px;
-}
-
-.DataTableToolbarJSX .toolbar-count-primary {
-  color: var(--color-neutral-text-primary);
-}
-
-.DataTableToolbarJSX .toolbar-count-placeholder {
-  color: var(--color-neutral-text-placeholder);
-}
-
-.DataTableToolbarJSX .toolbar-right {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  gap: var(--spacing-7xl);
-}
-
-.DataTableToolbarJSX .toolbar-selection {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--color-brand-accent);
-}
-
-.DataTableToolbarJSX .toolbar-actions {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  gap: var(--spacing-lg);
-}
-
-
-.TableJSX {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-
-.TablePaginationJSX {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-md);
-  height: 48px;
-  padding: 0 var(--spacing-5xl);
-  border-top: 1px solid var(--color-neutral-border-default);
-  border-radius: 0 0 var(--radius-md) var(--radius-md);
-  border: 1px solid var(--color-neutral-border-default);
-  border-top: 0;
-  background-color: var(--color-neutral-bg-surface);
-}
-
-.TablePaginationJSX .pagination-button {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-xs) var(--spacing-xl);
-  border: 1px solid var(--color-neutral-border-default);
-  border-radius: var(--radius-sm);
-  background-color: var(--color-neutral-bg-surface);
-  color: var(--color-neutral-text-secondary);
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1.4;
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-
-.TablePaginationJSX .pagination-button:hover:not(:disabled) {
-  background-color: var(--color-neutral-bg-app);
-}
-
-.TablePaginationJSX .pagination-button:disabled {
-  opacity: 0.4;
-  pointer-events: none;
-  cursor: not-allowed;
-}
-
-.TablePaginationJSX .pagination-button-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.TablePaginationJSX .pagination-label {
-  min-width: 72px;
-  text-align: center;
-  font-size: 14px;
-  color: var(--color-neutral-text-secondary);
-}
-
-
-.SortableHeaderJSX {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  padding: 0;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  font: inherit;
-}
-
-.SortableHeaderJSX.is-active {
-  color: var(--color-neutral-text-primary);
-}
-
-.SortableHeaderJSX.is-inactive {
-  color: var(--color-neutral-text-muted);
-}
-
-.SortableHeaderJSX .sortable-header-icon {
-  flex-shrink: 0;
-  width: 14px;
-  height: 14px;
-}