@dbcdk/react-components 0.0.195 → 0.0.197

package/dist/styles.css

@@ -1,476 +1 @@
-@import './css-helper-classes/spacing.css';
-@import './css-helper-classes/flex.css';
-@import './css-helper-classes/typography.css';
-@import './css-helper-classes/scrollbar.css';
-
-* {
-  font-family: var(--font-family);
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  color: var(--color-fg-default);
-  background-color: var(--color-bg-page);
-  font-size: var(--font-size-sm);
-  margin: 0;
-}
-
-@media (min-height: 500px) {
-  body {
-    overflow-y: scroll;
-  }
-}
-
-h1 {
-  font-size: var(--font-size-xl);
-}
-
-h2 {
-  font-size: var(--font-size-lg);
-}
-
-h3 {
-  font-size: var(--font-size-md);
-}
-
-h4 {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-}
-
-body.dbc-app {
-  max-width: 1600px;
-}
-
-.dbc-overflow-auto {
-  overflow: auto;
-}
-
-.dbc-font-mono {
-  font-family: monospace;
-}
-
-.dbc-pulse {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--border-radius-round);
-  color: var(--color-primary-500, var(--color-brand));
-  transform-origin: center;
-}
-
-.dbc-pulse::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  animation: dbc-pulse 1.8s ease-out infinite;
-  pointer-events: none;
-}
-
-@keyframes dbc-pulse {
-  0% {
-    opacity: 0.2;
-  }
-  20% {
-    opacity: 0.55;
-  }
-  60% {
-    opacity: 0.15;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .dbc-pulse::after {
-    animation: none;
-  }
-}
-
-.dbc-table {
-  --card-label-width: 260px;
-
-  border-collapse: collapse;
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-normal);
-}
-
-/* Default compact table cell padding.
-   This applies to the first row too, avoiding uneven first-row spacing. */
-.dbc-table th,
-.dbc-table td {
-  padding-block: var(--spacing-xxs);
-  padding-inline: var(--spacing-xxs);
-  vertical-align: baseline;
-}
-
-.dbc-table th {
-  white-space: nowrap;
-  text-align: left;
-  max-width: var(--card-label-width);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: var(--font-size-table-header);
-  line-height: var(--line-height-table-header);
-  color: var(--table-header-fg);
-  letter-spacing: var(--letter-spacing-wide);
-  font-weight: normal;
-  /* A bit more breathing room between the label and its value than the
-     shared th/td padding-inline gives on its own. */
-  padding-right: var(--spacing-xs);
-}
-
-.dbc-table td {
-  min-width: 0;
-  margin: 0;
-  font-size: var(--font-size-sm);
-  color: var(--color-fg-default);
-  font-weight: var(--font-weight-default);
-  word-break: break-word;
-}
-
-/* Larger vertical padding (default is --spacing-xxs) */
-.dbc-table--md th,
-.dbc-table--md td {
-  padding-block: var(--spacing-xs);
-}
-
-/* --hover can go on the <table> (every row hovers) or directly on a <tr>
-   (opt in only specific rows, leaving the rest unaffected). */
-.dbc-table--hover tbody tr:hover,
-tr.dbc-table--hover:hover {
-  background-color: var(--color-bg-contextual);
-  cursor: pointer;
-}
-
-/* Round the hovered row's leading/trailing edge (tr itself can't take a
-   border-radius reliably in table layout) — same token as Menu.item's
-   hover background. */
-.dbc-table--hover tbody tr:hover th:first-child,
-.dbc-table--hover tbody tr:hover td:first-child,
-tr.dbc-table--hover:hover th:first-child,
-tr.dbc-table--hover:hover td:first-child {
-  border-top-left-radius: var(--border-radius-md);
-  border-bottom-left-radius: var(--border-radius-md);
-}
-
-.dbc-table--hover tbody tr:hover th:last-child,
-.dbc-table--hover tbody tr:hover td:last-child,
-tr.dbc-table--hover:hover th:last-child,
-tr.dbc-table--hover:hover td:last-child {
-  border-top-right-radius: var(--border-radius-md);
-  border-bottom-right-radius: var(--border-radius-md);
-}
-
-.dbc-table--clickableRow tbody tr:hover {
-  background-color: var(--color-bg-contextual);
-  cursor: pointer;
-}
-
-.dbc-table--striped tbody tr:nth-child(even) {
-  background-color: var(--table-row-bg-alt);
-}
-
-.dbc-table--striped.dbc-table--hover tbody tr:hover,
-.dbc-table--striped tr.dbc-table--hover:hover {
-  background-color: var(--table-row-bg-hover);
-}
-
-.dbc-full-width {
-  width: 100%;
-}
-
-/* Bordered table */
-
-.dbc-table--bordered {
-  width: auto;
-  border: var(--border-width-thin) solid var(--color-border-default);
-  border-collapse: collapse;
-}
-
-.dbc-table--bordered th,
-.dbc-table--bordered td {
-  border: var(--border-width-thin) solid var(--color-border-default);
-  padding: var(--spacing-xs) var(--spacing-sm);
-}
-
-.dbc-table--bordered thead th {
-  background-color: var(--color-bg-surface);
-}
-
-/* Alignment modifier */
-
-.dbc-table--align-middle,
-.dbc-table--align-middle th,
-.dbc-table--align-middle td {
-  vertical-align: middle;
-}
-
-/* Per-cell text alignment. Apply directly to a th/td to right-align that
-   column's header/content. */
-.dbc-table th.dbc-table--align-right,
-.dbc-table td.dbc-table--align-right {
-  text-align: right;
-}
-
-/* ==========================================================================
-   Text / utility classes
-   ========================================================================== */
-
-.dbc-highlight {
-  color: var(--color-highlight-fg, inherit);
-  background-color: var(--color-highlight-bg, var(--color-status-warning-bg));
-  font-family: inherit;
-  font-size: inherit;
-  border-radius: var(--border-radius-sm);
-  box-decoration-break: clone;
-  -webkit-box-decoration-break: clone;
-}
-
-.dbc-code {
-  color: var(--color-code-fg, inherit);
-  background-color: var(--color-code-bg, var(--color-bg-contextual));
-  border-radius: var(--border-radius-sm);
-  padding-inline: var(--spacing-xxs);
-  font-family: var(--font-family-mono);
-  font-size: 0.9em;
-  box-decoration-break: clone;
-  -webkit-box-decoration-break: clone;
-}
-
-.dbc-muted-text {
-  color: var(--color-fg-subtle);
-}
-
-.dbc-tabular-nums {
-  font-variant-numeric: tabular-nums;
-}
-
-.dbc-sm-text {
-  font-size: var(--font-size-sm);
-}
-
-.dbc-md-text {
-  font-size: var(--font-size-md);
-}
-
-.dbc-lg-text {
-  font-size: var(--font-size-lg);
-}
-
-.dbc-medium-text {
-  font-weight: var(--font-weight-medium);
-}
-
-.dbc-bold-text {
-  font-weight: var(--font-weight-bold);
-}
-
-.dbc-center-text {
-  text-align: center;
-}
-
-/* ==========================================================================
-   Layout utilities
-   ========================================================================== */
-
-@media screen and (min-height: 400px) {
-  body.dbc-app {
-    overflow: hidden;
-  }
-}
-
-.grow-container {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: auto;
-}
-
-.hideScrollBar {
-  scrollbar-width: none;
-}
-
-.hideScrollBar::-webkit-scrollbar {
-  display: none;
-}
-
-.fitContent {
-  white-space: nowrap !important;
-  width: 1% !important;
-  min-width: 1% !important;
-  max-width: 1% !important;
-}
-
-.dbc-full-height {
-  height: 100%;
-}
-
-.dbc-offset-height {
-  transform: translateY(-8vh);
-}
-
-/* ==========================================================================
-   Scrollbars
-   ========================================================================== */
-
-/* Firefox equivalent of the thin, muted webkit scrollbar below. */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-border-strong) transparent;
-}
-
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: var(--color-border-strong);
-  border-radius: 4px;
-  border: 2px solid var(--color-bg-surface);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: var(--color-fg-subtle);
-}
-
-/* ==========================================================================
-   Animations
-   ========================================================================== */
-
-.animate--expand {
-  animation: expand 0.15s ease-in-out forwards;
-}
-
-.animate--collapse {
-  animation: collapse 0.15s ease-in-out forwards;
-}
-
-.spin {
-  display: inline-block;
-  animation: spin 2s linear infinite;
-}
-
-@keyframes expand {
-  0% {
-    max-height: 0;
-  }
-
-  100% {
-    max-height: 100vh;
-  }
-}
-
-@keyframes collapse {
-  0% {
-    max-height: 100vh;
-  }
-
-  100% {
-    max-height: 0;
-  }
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* ==========================================================================
-   Accessibility
-   ========================================================================== */
-
-.srOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-
-/* ==========================================================================
-   Print
-   ========================================================================== */
-
-@media print {
-  /* --- What to print (only content explicitly opted in via
-     printSelection()'s NOT_PRINTABLE_ATTRIBUTE gate, or a Modal) --- */
-  body[data-not-printable='true'] > *:not([data-not-printable='false']):not([role='dialog']) {
-    display: none !important;
-  }
-  body [data-not-printable='true'] {
-    display: none !important;
-  }
-
-  /* --- Page setup --- */
-  @page {
-    size: A4;
-    margin: 12mm;
-  }
-
-  html,
-  body {
-    height: auto !important; /* avoid 100vh/100% truncation */
-    overflow: visible !important; /* allow pagination */
-  }
-  * {
-    overflow: visible !important;
-    transform: none !important;
-  }
-
-  /* Modal (components/overlay/modal/Modal) portals a position:fixed,
-     scroll-clipped overlay directly onto body, wrapping the actual
-     `role="dialog"` element. It has no class or attribute of its own to
-     target, but it's always body's direct child that contains the dialog,
-     so :has() reaches it. */
-  body > div:has([role='dialog']) {
-    position: static !important;
-    inset: auto !important;
-    overflow: visible !important;
-    padding: 0 !important;
-  }
-
-  [role='dialog'] {
-    position: static !important;
-    width: 100% !important;
-    max-width: none !important;
-    height: auto !important;
-    max-height: none !important;
-    overflow: visible !important;
-    transform: none !important;
-    contain: none !important;
-    box-shadow: none !important;
-  }
-
-  /* --- Page breaks --- */
-  /* Use this class on any element that should start on a new page. */
-  .dbc-page-break-before:not(:first-of-type) {
-    margin-top: 0 !important;
-    break-before: page !important;
-    page-break-before: always !important; /* legacy */
-  }
-  /* Utility to discourage breaking inside certain blocks. */
-  .dbc-avoid-break,
-  [role='dialog'] {
-    break-inside: auto !important;
-    page-break-inside: auto !important;
-  }
-}
+@import './styles/styles.css';

package/dist/tanstack-virtual.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var TanstackJsonViewer = require('./components/json-viewer/TanstackJsonViewer');
+
+
+
+Object.keys(TanstackJsonViewer).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return TanstackJsonViewer[k]; }
+	});
+});

package/dist/tanstack-virtual.d.ts

@@ -0,0 +1 @@
+export * from './components/json-viewer/TanstackJsonViewer';

package/dist/tanstack-virtual.js

@@ -0,0 +1 @@
+export * from './components/json-viewer/TanstackJsonViewer';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.195",
+  "version": "0.0.197",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",
@@ -39,6 +39,11 @@
       "import": "./dist/tanstack.js",
       "require": "./dist/tanstack.cjs"
     },
+    "./tanstack-virtual": {
+      "types": "./dist/tanstack-virtual.d.ts",
+      "import": "./dist/tanstack-virtual.js",
+      "require": "./dist/tanstack-virtual.cjs"
+    },
     "./index.css": "./dist/index.css",
     "./package.json": "./package.json"
   },
@@ -55,6 +60,7 @@
     "rewrite:paths": "tsc-alias -p tsconfig.build.json",
     "dev": "tsup --config tsup.config.ts --watch",
     "test": "vitest run",
+    "test:package": "npm run build && node scripts/test-package.mjs",
     "prettier": "prettier . --write",
     "lint": "eslint \"src/**/*.{ts,tsx}\" --max-warnings=0",
     "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
@@ -68,6 +74,7 @@
   },
   "peerDependencies": {
     "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.14.13",
     "lucide-react": ">=0.543.0 <2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -75,6 +82,9 @@
   "peerDependenciesMeta": {
     "@tanstack/react-table": {
       "optional": true
+    },
+    "@tanstack/react-virtual": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -85,6 +95,7 @@
     "@storybook/react-vite": "^10.3.5",
     "@swc/core": "^1.15.11",
     "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.14.13",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.14",
@@ -102,6 +113,7 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "globals": "^17.3.0",
+    "glob": "^13.0.6",
     "identity-obj-proxy": "^3.0.0",
     "jsdom": "^29.0.2",
     "prettier": "^3.2.4",