@dbcdk/react-components 0.0.88 → 0.0.89

package/dist/hooks/useViewportFill.js

@@ -1,5 +1,5 @@
 'use client';
-import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 export function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop = false, watchRef } = {}) {
     const [maxHeight, setMaxHeight] = useState(min);
@@ -11,18 +11,22 @@ export function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMargi
         const rect = el.getBoundingClientRect();
         let top = rect.top;
         if (includeMarginTop) {
-            const mt = parseFloat(window.getComputedStyle(el).marginTop || '0') || 0;
-            top -= mt;
+            const marginTop = parseFloat(window.getComputedStyle(el).marginTop || '0') || 0;
+            top -= marginTop;
         }
         const next = Math.max(min, Math.floor(window.innerHeight - bottomOffset - top));
-        setMaxHeight(prev => (prev !== next ? next : prev));
+        setMaxHeight(prev => (prev === next ? prev : next));
     }, [ref, bottomOffset, min, includeMarginTop]);
     const scheduleMeasure = useCallback(() => {
         if (typeof window === 'undefined')
             return;
-        if (raf.current != null)
+        if (raf.current != null) {
             cancelAnimationFrame(raf.current);
-        raf.current = window.requestAnimationFrame(measure);
+        }
+        raf.current = window.requestAnimationFrame(() => {
+            raf.current = null;
+            measure();
+        });
     }, [measure]);
     useIsomorphicLayoutEffect(() => {
         measure();
@@ -34,39 +38,40 @@ export function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMargi
         const target = ref.current;
         const extra = (_a = watchRef === null || watchRef === void 0 ? void 0 : watchRef.current) !== null && _a !== void 0 ? _a : null;
         const parent = target.parentElement;
-        const onResizeOrScroll = () => scheduleMeasure();
+        const onResize = () => scheduleMeasure();
         const onTransitionOrAnimationEnd = () => scheduleMeasure();
-        window.addEventListener('resize', onResizeOrScroll);
-        window.addEventListener('scroll', onResizeOrScroll, { passive: true });
-        // Cheap and often enough for collapsible filter panels.
+        window.addEventListener('resize', onResize);
         document.addEventListener('transitionend', onTransitionOrAnimationEnd, true);
         document.addEventListener('animationend', onTransitionOrAnimationEnd, true);
-        let ro = null;
+        let resizeObserver = null;
         if ('ResizeObserver' in window) {
-            ro = new ResizeObserver(() => scheduleMeasure());
-            ro.observe(target);
-            if (parent && parent !== target)
-                ro.observe(parent);
-            if (extra && extra !== target && extra !== parent)
-                ro.observe(extra);
+            resizeObserver = new ResizeObserver(() => scheduleMeasure());
+            resizeObserver.observe(target);
+            if (parent && parent !== target) {
+                resizeObserver.observe(parent);
+            }
+            if (extra && extra !== target && extra !== parent) {
+                resizeObserver.observe(extra);
+            }
         }
         return () => {
-            window.removeEventListener('resize', onResizeOrScroll);
-            window.removeEventListener('scroll', onResizeOrScroll);
+            window.removeEventListener('resize', onResize);
             document.removeEventListener('transitionend', onTransitionOrAnimationEnd, true);
             document.removeEventListener('animationend', onTransitionOrAnimationEnd, true);
-            ro === null || ro === void 0 ? void 0 : ro.disconnect();
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
             if (raf.current != null) {
                 cancelAnimationFrame(raf.current);
+                raf.current = null;
             }
         };
     }, [ref, watchRef, scheduleMeasure]);
+    const style = useMemo(() => ({
+        maxHeight,
+        overflow: 'auto',
+    }), [maxHeight]);
     return {
         maxHeight,
-        style: {
-            maxHeight,
-            overflow: 'auto',
-        },
+        style,
         recompute: measure,
     };
 }

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './components/stack/Stack';
 export * from './components/button/Button';
 export * from './components/button-select/ButtonSelect';
 export * from './components/nav-bar/NavBar';
@@ -71,3 +72,6 @@ export * from './components/sticky-footer-layout/StickyFooterLayout';
 export * from './components/forms/typeahead/Typeahead';
 export * from './hooks/useDeviceSize';
 export * from './components/theme-button/ThemeButton';
+export * from './components/copy-button/CopyButton';
+export * from './components/divider/Divider';
+export * from './components/grid/Grid';

package/dist/index.js

@@ -1,3 +1,4 @@
+export * from './components/stack/Stack';
 export * from './components/button/Button';
 export * from './components/button-select/ButtonSelect';
 export * from './components/nav-bar/NavBar';
@@ -71,3 +72,6 @@ export * from './components/sticky-footer-layout/StickyFooterLayout';
 export * from './components/forms/typeahead/Typeahead';
 export * from './hooks/useDeviceSize';
 export * from './components/theme-button/ThemeButton';
+export * from './components/copy-button/CopyButton';
+export * from './components/divider/Divider';
+export * from './components/grid/Grid';

package/dist/styles/css-helper-classes/flex.css

@@ -84,6 +84,18 @@
   gap: var(--spacing-xl);
 }
 
+.dbc-gap-2xl {
+  gap: var(--spacing-2xl);
+}
+
+.dbc-gap-3xl {
+  gap: var(--spacing-3xl);
+}
+
+.dbc-gap-4xl {
+  gap: var(--spacing-4xl);
+}
+
 .dbc-flex-grow {
   flex-grow: 1;
 }

package/dist/styles/css-helper-classes/spacing.css

@@ -1,4 +1,9 @@
 /* Margin - all axes */
+
+.dbc-m-0 {
+  margin: 0;
+}
+
 .dbc-m-xxs {
   margin: var(--spacing-xxs);
 }

package/dist/styles/styles.css

@@ -8,12 +8,14 @@
   font-weight: 400;
   font-style: normal;
 }
+
 @font-face {
   font-family: 'Roboto';
   src: url('./fonts/Roboto/Roboto-Medium.ttf') format('truetype');
   font-weight: 500;
   font-style: normal;
 }
+
 @font-face {
   font-family: 'Roboto';
   src: url('./fonts/Roboto/Roboto-Bold.ttf') format('truetype');
@@ -62,26 +64,29 @@ body.dbc-app {
   font-family: monospace;
 }
 
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
 .dbc-table {
   --card-label-width: 260px;
+
   border-collapse: collapse;
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
 }
 
-.dbc-table--hover tr:hover {
-  background-color: var(--color-bg-contextual);
-}
-
-.dbc-table tr + tr th,
-.dbc-table tr + tr td {
+/* 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);
+  vertical-align: baseline;
 }
 
 .dbc-table th {
   white-space: nowrap;
   text-align: left;
-  vertical-align: top;
   max-width: var(--card-label-width);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -93,29 +98,120 @@ body.dbc-app {
   padding-right: var(--spacing-lg);
 }
 
-/* VALUES (td) → match .metaValue */
 .dbc-table td {
-  vertical-align: top;
   min-width: 0;
-
-  margin: 0; /* harmless on td, keeps parity with metaValue */
+  margin: 0;
   font-size: var(--font-size-sm);
   color: var(--color-fg-default);
   font-weight: var(--font-weight-default);
-
   word-break: break-word;
 }
 
-/* Optional: baseline alignment closer to metaRow */
-.dbc-table th,
-.dbc-table td {
-  vertical-align: baseline;
+.dbc-table--hover tr:hover {
+  background-color: var(--color-bg-contextual);
+}
+
+.dbc-table--striped tbody tr:nth-child(even) {
+  background-color: var(--table-row-bg-alt);
+}
+
+.dbc-table--striped.dbc-table--hover tbody tr: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;
+}
+
+/* Matrix / comparison table */
+
+.dbc-table--matrix {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.dbc-table--matrix th,
+.dbc-table--matrix td {
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-bottom: var(--border-width-thin) solid var(--table-border-subtle);
+}
+
+.dbc-table--matrix thead th {
+  color: var(--table-header-fg);
+  background-color: transparent;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--letter-spacing-wide);
+  text-transform: uppercase;
+}
+
+.dbc-table--matrix tbody th {
+  color: var(--color-fg-default);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.dbc-table--matrix td {
+  color: var(--table-cell-fg);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.dbc-table--matrix th:not(:first-child) {
+  text-align: right;
+}
+
+.dbc-table--matrix tr:last-child th,
+.dbc-table--matrix tr:last-child td {
+  border-bottom: 0;
+}
+
+.dbc-table--matrix-group-header th {
+  border-bottom: 0;
+  text-align: center;
+}
+
+.dbc-table--matrix-group-header th:first-child {
+  text-align: left;
+}
+
+.dbc-table--matrix-current {
+  background-color: color-mix(in srgb, var(--color-bg-selected) 45%, var(--color-bg-surface));
+}
+
+/* ==========================================================================
+   Text / utility classes
+   ========================================================================== */
+
 .dbc-highlight {
   color: var(--color-highlight-fg, inherit);
   background-color: var(--color-highlight-bg, var(--color-status-warning-bg));
@@ -141,34 +237,12 @@ body.dbc-app {
   font-weight: var(--font-weight-medium);
 }
 
-.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);
-}
-
-.dbc-table--align-middle {
-  vertical-align: middle;
-  th {
-    vertical-align: middle;
-  }
-  td {
-    vertical-align: middle;
-  }
-}
+/* ==========================================================================
+   Layout utilities
+   ========================================================================== */
 
 @media screen and (min-height: 400px) {
-  .body.dbc-app {
+  body.dbc-app {
     overflow: hidden;
   }
 }
@@ -181,15 +255,34 @@ body.dbc-app {
 }
 
 .hideScrollBar {
-  scrollbar-width: none; /* Firefox */
+  scrollbar-width: none;
 }
+
 .hideScrollBar::-webkit-scrollbar {
-  display: none; /* Chrome, Safari, Opera */
+  display: none;
 }
 
-/* Apply globally */
+.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
+   ========================================================================== */
+
 ::-webkit-scrollbar {
-  width: 10px; /* or thinner: 6px */
+  width: 10px;
 }
 
 ::-webkit-scrollbar-track {
@@ -198,14 +291,18 @@ body.dbc-app {
 
 ::-webkit-scrollbar-thumb {
   background-color: var(--color-border-strong);
-  border-radius: 4px; /* rounded for modern look */
-  border: 2px solid var(--color-bg-surface); /* creates padding effect */
+  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;
 }
@@ -214,26 +311,16 @@ body.dbc-app {
   animation: collapse 0.15s ease-in-out forwards;
 }
 
-.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);
+.spin {
+  display: inline-block;
+  animation: spin 2s linear infinite;
 }
 
-/* Animations */
 @keyframes expand {
   0% {
     max-height: 0;
   }
+
   100% {
     max-height: 100vh;
   }
@@ -243,6 +330,7 @@ body.dbc-app {
   0% {
     max-height: 100vh;
   }
+
   100% {
     max-height: 0;
   }
@@ -252,15 +340,15 @@ body.dbc-app {
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
 }
 
-.spin {
-  display: inline-block;
-  animation: spin 2s linear infinite;
-}
+/* ==========================================================================
+   Accessibility
+   ========================================================================== */
 
 .srOnly {
   position: absolute;

package/dist/styles/themes/dbc/colors.css

@@ -144,6 +144,16 @@ html {
   --color-status-info-border: var(--dbc-info-300);
   --color-status-info-fg: var(--dbc-info-700);
 
+  /* Chart colors */
+  --color-chart-empty: var(--color-bg-surface-strong);
+  --color-chart-neutral: color-mix(in srgb, var(--color-fg-default) 15%, var(--color-bg-surface));
+  --color-chart-blue: var(--dbc-blue-500);
+  --color-chart-green: var(--dbc-green-500);
+  --color-chart-amber: var(--dbc-amber-400);
+  --color-chart-pink: var(--dbc-pink-500);
+  --color-chart-sky: var(--dbc-info-500);
+  --color-chart-red: var(--dbc-red-300);
+
   /* Disabled */
   --color-disabled-bg: var(--dbc-neutral-100);
   --color-disabled-fg: light-dark(#9ca3af, #6b7280);