@dbcdk/react-components 0.0.4 → 0.0.6

package/dist/hooks/useViewportFill.js

@@ -1,50 +1,57 @@
-import { useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
-
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop = false } = {}) {
-  const [maxHeight, setMaxHeight] = useState(0);
-  const raf = useRef(null);
-  const measure = useCallback(() => {
-    if (typeof window === "undefined" || !ref.current) return;
-    const el = ref.current;
-    const rect = el.getBoundingClientRect();
-    let top = rect.top;
-    if (includeMarginTop) {
-      const mt = parseFloat(getComputedStyle(el).marginTop || "0") || 0;
-      top -= mt;
-    }
-    const raw = window.innerHeight - bottomOffset - top;
-    const next = Math.max(min, Math.floor(raw));
-    setMaxHeight(next);
-  }, [ref, bottomOffset, min, includeMarginTop]);
-  useIsomorphicLayoutEffect(() => {
-    measure();
-  }, [measure]);
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const onFrame = () => {
-      if (raf.current) cancelAnimationFrame(raf.current);
-      raf.current = requestAnimationFrame(measure);
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+/**
+ * Computes the remaining viewport space below the element and returns a style
+ * with `maxHeight` + `overflow: auto`.
+ */
+export function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop = false } = {}) {
+    const [maxHeight, setMaxHeight] = useState(0);
+    const raf = useRef(null);
+    const measure = useCallback(() => {
+        if (typeof window === 'undefined' || !ref.current)
+            return;
+        const el = ref.current;
+        const rect = el.getBoundingClientRect();
+        let top = rect.top;
+        if (includeMarginTop) {
+            const mt = parseFloat(getComputedStyle(el).marginTop || '0') || 0;
+            top -= mt;
+        }
+        const raw = window.innerHeight - bottomOffset - top;
+        const next = Math.max(min, Math.floor(raw));
+        setMaxHeight(next);
+    }, [ref, bottomOffset, min, includeMarginTop]);
+    // Initial + dependency-triggered measurement
+    useIsomorphicLayoutEffect(() => {
+        measure();
+    }, [measure]);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const onFrame = () => {
+            if (raf.current)
+                cancelAnimationFrame(raf.current);
+            raf.current = requestAnimationFrame(measure);
+        };
+        window.addEventListener('scroll', onFrame, { passive: true });
+        window.addEventListener('resize', onFrame);
+        let ro = null;
+        if ('ResizeObserver' in window && ref.current) {
+            ro = new ResizeObserver(onFrame);
+            ro.observe(ref.current);
+        }
+        return () => {
+            window.removeEventListener('scroll', onFrame);
+            window.removeEventListener('resize', onFrame);
+            if (ro)
+                ro.disconnect();
+            if (raf.current)
+                cancelAnimationFrame(raf.current);
+        };
+    }, [measure, ref]);
+    return {
+        maxHeight,
+        style: { height: maxHeight, overflow: 'auto' },
+        recompute: measure,
     };
-    window.addEventListener("scroll", onFrame, { passive: true });
-    window.addEventListener("resize", onFrame);
-    let ro = null;
-    if ("ResizeObserver" in window && ref.current) {
-      ro = new ResizeObserver(onFrame);
-      ro.observe(ref.current);
-    }
-    return () => {
-      window.removeEventListener("scroll", onFrame);
-      window.removeEventListener("resize", onFrame);
-      if (ro) ro.disconnect();
-      if (raf.current) cancelAnimationFrame(raf.current);
-    };
-  }, [measure, ref]);
-  return {
-    maxHeight,
-    style: { height: maxHeight, overflow: "auto" },
-    recompute: measure
-  };
 }
-
-export { useViewportFill };

package/dist/index.d.ts

@@ -8,7 +8,7 @@ export * from './components/user-display/UserDisplay';
 export * from './components/tabs/Tabs';
 export * from './components/headline/Headline';
 export * from './components/page-layout/PageLayout';
-export * from './components/input/Input';
+export * from './components/forms/input/Input';
 export * from './components/search-box/SearchBox';
 export * from './hooks/useTheme';
 export * from './components/chip/Chip';
@@ -20,18 +20,44 @@ export * from './components/skeleton-loader/SkeletonLoader';
 export * from './components/page/Page';
 export * from './components/breadcrumbs/Breadcrumbs';
 export * from './components/circle/Circle';
-export * from './components/checkbox/Checkbox';
+export * from './components/forms/checkbox/Checkbox';
 export * from './components/table/Table';
 export * from './constants/severity.types';
-export * from './components/text-area/Textarea';
+export * from './components/forms/text-area/Textarea';
 export * from './components/app-header/AppHeader';
 export * from './components/sidebar/Sidebar';
 export * from './utils/arrays/nested-filtering';
-export * from './components/multi-select/MultiSelect';
+export * from './components/forms/multi-select/MultiSelect';
 export * from './hooks/useViewportFill';
 export * from './utils/date/formatDate';
 export * from './components/filter-field/FilterField';
-export * from './components/select/Select';
+export * from './components/forms/select/Select';
 export * from './components/split-button/SplitButton';
-export * from './components/tooltip/Tooltip';
 export * from './components/segmented-progress-bar/SegmentedProgressBar';
+export * from './components/datetime-picker/DateTimePicker';
+export * from './components/overlay/modal/provider/ModalProvider';
+export * from './components/overlay/modal/Modal';
+export * from './components/toast/provider/ToastProvider';
+export * from './components/toast/Toast';
+export * from './components/attribute-chip/AttributeChip';
+export * from './components/split-pane/SplitPane';
+export * from './components/pagination/Pagination';
+export * from './components/meta-bar/MetaBar';
+export * from './components/code-block/CodeBlock';
+export * from './hooks/useTimeDuration';
+export * from './hooks/useSorting';
+export * from './hooks/usePagination';
+export * from './hooks/useTableData';
+export * from './hooks/useTableSelection';
+export * from './hooks/useTableSettings';
+export * from './components/table/components/table-settings/TableSettings';
+export * from './components/filtering/chip-multi-toggle/ChipMultiToggle';
+export * from './components/forms/checkbox-group/CheckboxGroup';
+export * from './components/table/tanstack';
+export * from './components/overlay/side-panel/SidePanel';
+export * from './components/overlay/side-panel/useSidePanel';
+export * from './components/forms/input-container/InputContainer';
+export * from './components/hyperlink/Hyperlink';
+export * from './components/overlay/tooltip/Tooltip';
+export * from './components/overlay/tooltip/TooltipProvider';
+export * from './components/overlay/tooltip/useTooltipTrigger';

package/dist/index.js

@@ -1,3 +1,4 @@
+'use client';
 export * from './components/button/Button';
 export * from './components/nav-bar/NavBar';
 export * from './components/avatar/Avatar';
@@ -8,7 +9,7 @@ export * from './components/user-display/UserDisplay';
 export * from './components/tabs/Tabs';
 export * from './components/headline/Headline';
 export * from './components/page-layout/PageLayout';
-export * from './components/input/Input';
+export * from './components/forms/input/Input';
 export * from './components/search-box/SearchBox';
 export * from './hooks/useTheme';
 export * from './components/chip/Chip';
@@ -20,18 +21,44 @@ export * from './components/skeleton-loader/SkeletonLoader';
 export * from './components/page/Page';
 export * from './components/breadcrumbs/Breadcrumbs';
 export * from './components/circle/Circle';
-export * from './components/checkbox/Checkbox';
+export * from './components/forms/checkbox/Checkbox';
 export * from './components/table/Table';
 export * from './constants/severity.types';
-export * from './components/text-area/Textarea';
+export * from './components/forms/text-area/Textarea';
 export * from './components/app-header/AppHeader';
 export * from './components/sidebar/Sidebar';
 export * from './utils/arrays/nested-filtering';
-export * from './components/multi-select/MultiSelect';
+export * from './components/forms/multi-select/MultiSelect';
 export * from './hooks/useViewportFill';
 export * from './utils/date/formatDate';
 export * from './components/filter-field/FilterField';
-export * from './components/select/Select';
+export * from './components/forms/select/Select';
 export * from './components/split-button/SplitButton';
-export * from './components/tooltip/Tooltip';
 export * from './components/segmented-progress-bar/SegmentedProgressBar';
+export * from './components/datetime-picker/DateTimePicker';
+export * from './components/overlay/modal/provider/ModalProvider';
+export * from './components/overlay/modal/Modal';
+export * from './components/toast/provider/ToastProvider';
+export * from './components/toast/Toast';
+export * from './components/attribute-chip/AttributeChip';
+export * from './components/split-pane/SplitPane';
+export * from './components/pagination/Pagination';
+export * from './components/meta-bar/MetaBar';
+export * from './components/code-block/CodeBlock';
+export * from './hooks/useTimeDuration';
+export * from './hooks/useSorting';
+export * from './hooks/usePagination';
+export * from './hooks/useTableData';
+export * from './hooks/useTableSelection';
+export * from './hooks/useTableSettings';
+export * from './components/table/components/table-settings/TableSettings';
+export * from './components/filtering/chip-multi-toggle/ChipMultiToggle';
+export * from './components/forms/checkbox-group/CheckboxGroup';
+export * from './components/table/tanstack';
+export * from './components/overlay/side-panel/SidePanel';
+export * from './components/overlay/side-panel/useSidePanel';
+export * from './components/forms/input-container/InputContainer';
+export * from './components/hyperlink/Hyperlink';
+export * from './components/overlay/tooltip/Tooltip';
+export * from './components/overlay/tooltip/TooltipProvider';
+export * from './components/overlay/tooltip/useTooltipTrigger';

package/dist/src/styles/styles.css

@@ -1,4 +1,6 @@
 @import './css-helper-classes/spacing.css';
+@import './css-helper-classes/flex.css';
+@import './css-helper-classes/typography.css';
 
 @font-face {
   font-family: 'Roboto';
@@ -25,8 +27,8 @@
 }
 
 body {
-  color: var(--color-text);
-  background-color: var(--color-background);
+  color: var(--color-fg-default);
+  background-color: var(--color-bg-page);
   --density: var(--density-comfortable);
 }
 
@@ -42,10 +44,72 @@ h3 {
   font-size: var(--font-size-lg);
 }
 
+h4 {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+}
+
 body.dbc-app {
   max-width: 1600px;
 }
 
+.dbc-table {
+  --card-label-width: 260px;
+  border-collapse: collapse;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  tr + tr th,
+  tr + tr td {
+    padding-block: var(--spacing-xxs);
+  }
+
+  th {
+    white-space: nowrap;
+    color: var(--color-fg-subtle);
+    font-weight: var(--font-weight-default);
+    padding-right: var(--spacing-lg);
+    vertical-align: top;
+    text-align: left;
+  }
+
+  td {
+    color: var(--color-fg-default);
+    vertical-align: top;
+    min-width: 0;
+  }
+
+  th {
+    max-width: var(--card-label-width);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.dbc-table--bordered {
+  width: auto;
+  border: 1px solid var(--color-border-default);
+}
+
+.dbc-table--bordered th,
+.dbc-table--bordered td {
+  border: 1px 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;
+  }
+}
+
 @media screen and (min-height: 400px) {
   .body.dbc-app {
     overflow: hidden;
@@ -55,10 +119,17 @@ body.dbc-app {
 .grow-container {
   display: flex;
   flex-direction: column;
-  flex-grow: 1;
+  flex: 1;
   overflow: auto;
 }
 
+.hideScrollBar {
+  scrollbar-width: none; /* Firefox */
+}
+.hideScrollBar::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
 /* Apply globally */
 ::-webkit-scrollbar {
   width: 10px; /* or thinner: 6px */
@@ -69,13 +140,13 @@ body.dbc-app {
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: var(--opac-bg-dark); /* neutral gray thumb */
+  background-color: var(--color-border-strong);
   border-radius: 4px; /* rounded for modern look */
-  border: 2px solid #f9fafb; /* creates padding effect */
+  border: 2px solid var(--color-bg-surface); /* creates padding effect */
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #9ca3af; /* darker gray on hover */
+  background-color: var(--color-fg-subtle);
 }
 
 .animate--expand {
@@ -87,9 +158,20 @@ body.dbc-app {
 }
 
 .fitContent {
-  white-space: nowrap;
-  width: 1%;
+  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);
 }
+
 /* Animations */
 @keyframes expand {
   0% {
@@ -122,3 +204,14 @@ body.dbc-app {
   display: inline-block;
   animation: spin 2s linear infinite;
 }
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}

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

@@ -0,0 +1,101 @@
+.dbc-flex {
+  display: flex;
+}
+
+.dbc-inline-flex {
+  display: inline-flex;
+}
+
+.dbc-flex-row {
+  flex-direction: row;
+}
+.dbc-flex-column {
+  flex-direction: column;
+}
+
+.dbc-flex-wrap {
+  flex-wrap: wrap;
+}
+.dbc-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.dbc-justify-start {
+  justify-content: flex-start;
+}
+.dbc-justify-center {
+  justify-content: center;
+}
+.dbc-justify-end {
+  justify-content: flex-end;
+}
+.dbc-justify-between {
+  justify-content: space-between;
+}
+.dbc-justify-around {
+  justify-content: space-around;
+}
+.dbc-justify-evenly {
+  justify-content: space-evenly;
+}
+
+.dbc-items-start {
+  align-items: flex-start;
+}
+.dbc-items-center {
+  align-items: center;
+}
+.dbc-items-end {
+  align-items: flex-end;
+}
+.dbc-items-stretch {
+  align-items: stretch;
+}
+
+.dbc-self-start {
+  align-self: flex-start;
+}
+.dbc-self-center {
+  align-self: center;
+}
+.dbc-self-end {
+  align-self: flex-end;
+}
+.dbc-self-stretch {
+  align-self: stretch;
+}
+
+.dbc-gap-xxs {
+  gap: var(--spacing-xxs);
+}
+.dbc-gap-xs {
+  gap: var(--spacing-xs);
+}
+.dbc-gap-sm {
+  gap: var(--spacing-sm);
+}
+.dbc-gap-md {
+  gap: var(--spacing-md);
+}
+.dbc-gap-lg {
+  gap: var(--spacing-lg);
+}
+.dbc-gap-xl {
+  gap: var(--spacing-xl);
+}
+
+.dbc-flex-grow {
+  flex-grow: 1;
+}
+.dbc-flex-shrink {
+  flex-shrink: 1;
+}
+.dbc-flex-none {
+  flex: none;
+}
+
+.dbc-flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

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

@@ -0,0 +1,7 @@
+.dbc-muted-text {
+  color: var(--color-text-muted);
+}
+
+.dbc-strong-text {
+  font-weight: var(--font-weight-semibold);
+}

package/dist/styles/styles.css

@@ -1,4 +1,6 @@
 @import './css-helper-classes/spacing.css';
+@import './css-helper-classes/flex.css';
+@import './css-helper-classes/typography.css';
 
 @font-face {
   font-family: 'Roboto';
@@ -25,8 +27,8 @@
 }
 
 body {
-  color: var(--color-text);
-  background-color: var(--color-background);
+  color: var(--color-fg-default);
+  background-color: var(--color-bg-page);
   --density: var(--density-comfortable);
 }
 
@@ -42,10 +44,72 @@ h3 {
   font-size: var(--font-size-lg);
 }
 
+h4 {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+}
+
 body.dbc-app {
   max-width: 1600px;
 }
 
+.dbc-table {
+  --card-label-width: 260px;
+  border-collapse: collapse;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  tr + tr th,
+  tr + tr td {
+    padding-block: var(--spacing-xxs);
+  }
+
+  th {
+    white-space: nowrap;
+    color: var(--color-fg-subtle);
+    font-weight: var(--font-weight-default);
+    padding-right: var(--spacing-lg);
+    vertical-align: top;
+    text-align: left;
+  }
+
+  td {
+    color: var(--color-fg-default);
+    vertical-align: top;
+    min-width: 0;
+  }
+
+  th {
+    max-width: var(--card-label-width);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.dbc-table--bordered {
+  width: auto;
+  border: 1px solid var(--color-border-default);
+}
+
+.dbc-table--bordered th,
+.dbc-table--bordered td {
+  border: 1px 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;
+  }
+}
+
 @media screen and (min-height: 400px) {
   .body.dbc-app {
     overflow: hidden;
@@ -55,10 +119,17 @@ body.dbc-app {
 .grow-container {
   display: flex;
   flex-direction: column;
-  flex-grow: 1;
+  flex: 1;
   overflow: auto;
 }
 
+.hideScrollBar {
+  scrollbar-width: none; /* Firefox */
+}
+.hideScrollBar::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
 /* Apply globally */
 ::-webkit-scrollbar {
   width: 10px; /* or thinner: 6px */
@@ -69,13 +140,13 @@ body.dbc-app {
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: var(--opac-bg-dark); /* neutral gray thumb */
+  background-color: var(--color-border-strong);
   border-radius: 4px; /* rounded for modern look */
-  border: 2px solid #f9fafb; /* creates padding effect */
+  border: 2px solid var(--color-bg-surface); /* creates padding effect */
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #9ca3af; /* darker gray on hover */
+  background-color: var(--color-fg-subtle);
 }
 
 .animate--expand {
@@ -87,9 +158,20 @@ body.dbc-app {
 }
 
 .fitContent {
-  white-space: nowrap;
-  width: 1%;
+  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);
 }
+
 /* Animations */
 @keyframes expand {
   0% {
@@ -122,3 +204,14 @@ body.dbc-app {
   display: inline-block;
   animation: spin 2s linear infinite;
 }
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}