@dbcdk/react-components 0.0.106 → 0.0.108

package/dist/components/card/Card.module.css

@@ -124,6 +124,8 @@
 
 /* Body */
 .body {
+  display: flex;
+  flex-direction: column;
   min-width: 0;
   flex: 1 1 auto;
 }

package/dist/components/circle/Circle.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var Tooltip = require('../../components/overlay/tooltip/Tooltip');
 var styles = require('./Circle.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -10,12 +11,13 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 function Circle({
   severity,
   children,
+  tooltip,
   glow,
   muted,
   pulse,
   size = "sm"
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.container, "data-size": size, children: [
+  const inner = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.container, "data-size": size, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
@@ -28,6 +30,10 @@ function Circle({
     ),
     children
   ] });
+  if (tooltip) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltip, children: inner });
+  }
+  return inner;
 }
 
 exports.Circle = Circle;

package/dist/components/circle/Circle.d.ts

@@ -4,10 +4,11 @@ type CircleSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg';
 interface CircleProps {
     severity: Severity;
     children?: ReactNode;
+    tooltip?: ReactNode;
     glow?: boolean;
     muted?: boolean;
     pulse?: boolean;
     size?: CircleSize;
 }
-export declare function Circle({ severity, children, glow, muted, pulse, size, }: CircleProps): JSX.Element;
+export declare function Circle({ severity, children, tooltip, glow, muted, pulse, size, }: CircleProps): JSX.Element;
 export {};

package/dist/components/circle/Circle.js

@@ -1,15 +1,17 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { Tooltip } from '../../components/overlay/tooltip/Tooltip';
 import styles from './Circle.module.css';
 
 function Circle({
   severity,
   children,
+  tooltip,
   glow,
   muted,
   pulse,
   size = "sm"
 }) {
-  return /* @__PURE__ */ jsxs("span", { className: styles.container, "data-size": size, children: [
+  const inner = /* @__PURE__ */ jsxs("span", { className: styles.container, "data-size": size, children: [
     /* @__PURE__ */ jsx(
       "span",
       {
@@ -22,6 +24,10 @@ function Circle({
     ),
     children
   ] });
+  if (tooltip) {
+    return /* @__PURE__ */ jsx(Tooltip, { content: tooltip, children: inner });
+  }
+  return inner;
 }
 
 export { Circle };

package/dist/components/forms/input/Input.cjs

@@ -24,6 +24,7 @@ function mergeRefs(...refs) {
 }
 const Input = react.forwardRef(function Input2({
   label,
+  labelAction,
   error,
   helpText,
   orientation = "vertical",
@@ -90,7 +91,7 @@ const Input = react.forwardRef(function Input2({
     InputContainer.InputContainer,
     {
       label,
-      labelAction: inputProps.labelAction,
+      labelAction,
       htmlFor: inputId,
       fullWidth,
       error,

package/dist/components/forms/input/Input.js

@@ -18,6 +18,7 @@ function mergeRefs(...refs) {
 }
 const Input = forwardRef(function Input2({
   label,
+  labelAction,
   error,
   helpText,
   orientation = "vertical",
@@ -84,7 +85,7 @@ const Input = forwardRef(function Input2({
     InputContainer,
     {
       label,
-      labelAction: inputProps.labelAction,
+      labelAction,
       htmlFor: inputId,
       fullWidth,
       error,

package/dist/components/forms/text-area/Textarea.cjs

@@ -32,6 +32,7 @@ const Textarea = function Textarea2({
   labelWidth = "160px",
   fullWidth = false,
   required,
+  labelAction,
   // Native textarea props
   className,
   ...rest
@@ -101,6 +102,7 @@ const Textarea = function Textarea2({
       labelWidth,
       fullWidth,
       required,
+      labelAction,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {

package/dist/components/forms/text-area/Textarea.js

@@ -26,6 +26,7 @@ const Textarea = function Textarea2({
   labelWidth = "160px",
   fullWidth = false,
   required,
+  labelAction,
   // Native textarea props
   className,
   ...rest
@@ -95,6 +96,7 @@ const Textarea = function Textarea2({
       labelWidth,
       fullWidth,
       required,
+      labelAction,
       children: /* @__PURE__ */ jsx(
         "div",
         {

package/dist/components/grid/Grid.cjs

@@ -15,12 +15,25 @@ const GAP_TOKEN = {
   lg: "var(--spacing-lg)",
   xl: "var(--spacing-xl)"
 };
-function Grid({ children, gap = "md", equalHeight = false, className, style }) {
+function Grid({
+  children,
+  gap = "md",
+  equalHeight = false,
+  maxWidth,
+  className,
+  style
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: [styles__default.default.grid, equalHeight && styles__default.default.equalHeight, className].filter(Boolean).join(" "),
-      style: { gap: GAP_TOKEN[gap], ...style },
+      style: {
+        gap: GAP_TOKEN[gap],
+        ...(maxWidth == null ? void 0 : maxWidth.base) != null ? { "--max-width-base": maxWidth.base } : {},
+        ...(maxWidth == null ? void 0 : maxWidth.md) != null ? { "--max-width-md": maxWidth.md } : {},
+        ...(maxWidth == null ? void 0 : maxWidth.lg) != null ? { "--max-width-lg": maxWidth.lg } : {},
+        ...style
+      },
       children
     }
   );

package/dist/components/grid/Grid.d.ts

@@ -1,14 +1,20 @@
 import type { CSSProperties, ReactNode } from 'react';
 export type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface GridMaxWidth {
+    base?: string;
+    md?: string;
+    lg?: string;
+}
 export interface GridProps {
     children?: ReactNode;
     gap?: GridGap;
     /** Stretch direct children so cards/items in the same row get equal height */
     equalHeight?: boolean;
+    maxWidth?: GridMaxWidth;
     className?: string;
     style?: CSSProperties;
 }
-export declare function Grid({ children, gap, equalHeight, className, style }: GridProps): import("react/jsx-runtime").JSX.Element;
+export declare function Grid({ children, gap, equalHeight, maxWidth, className, style, }: GridProps): import("react/jsx-runtime").JSX.Element;
 export interface GridItemProps {
     children?: ReactNode;
     /** Default span: <768px */

package/dist/components/grid/Grid.js

@@ -9,12 +9,25 @@ const GAP_TOKEN = {
   lg: "var(--spacing-lg)",
   xl: "var(--spacing-xl)"
 };
-function Grid({ children, gap = "md", equalHeight = false, className, style }) {
+function Grid({
+  children,
+  gap = "md",
+  equalHeight = false,
+  maxWidth,
+  className,
+  style
+}) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: [styles.grid, equalHeight && styles.equalHeight, className].filter(Boolean).join(" "),
-      style: { gap: GAP_TOKEN[gap], ...style },
+      style: {
+        gap: GAP_TOKEN[gap],
+        ...(maxWidth == null ? void 0 : maxWidth.base) != null ? { "--max-width-base": maxWidth.base } : {},
+        ...(maxWidth == null ? void 0 : maxWidth.md) != null ? { "--max-width-md": maxWidth.md } : {},
+        ...(maxWidth == null ? void 0 : maxWidth.lg) != null ? { "--max-width-lg": maxWidth.lg } : {},
+        ...style
+      },
       children
     }
   );

package/dist/components/grid/Grid.module.css

@@ -2,6 +2,7 @@
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
   align-items: start;
+  max-width: var(--max-width-base);
 }
 
 .equalHeight {
@@ -23,12 +24,20 @@
 }
 
 @media (min-width: 768px) {
+  .grid {
+    max-width: var(--max-width-md, var(--max-width-base));
+  }
+
   .item {
     grid-column: span var(--span-md, var(--span-base, 12));
   }
 }
 
 @media (min-width: 1200px) {
+  .grid {
+    max-width: var(--max-width-lg, var(--max-width-md, var(--max-width-base)));
+  }
+
   .item {
     grid-column: span var(--span-lg, var(--span-md, var(--span-base, 12)));
   }

package/dist/components/headline/Headline.cjs

@@ -45,7 +45,7 @@ function Headline({
           },
           className: headlineClassName,
           children: [
-            icon || severity$1 && !marker ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: icon, severity: severity$1 }) }) : null,
+            icon || severity$1 && !marker ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: icon, severity: icon ? void 0 : severity$1 }) }) : null,
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: textClassName, children })
           ]
         }

package/dist/components/headline/Headline.js

@@ -39,7 +39,7 @@ function Headline({
           },
           className: headlineClassName,
           children: [
-            icon || severity && !marker ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(Icon, { customIcon: icon, severity }) }) : null,
+            icon || severity && !marker ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(Icon, { customIcon: icon, severity: icon ? void 0 : severity }) }) : null,
             /* @__PURE__ */ jsx("span", { className: textClassName, children })
           ]
         }

package/dist/components/headline/Headline.module.css

@@ -1,5 +1,6 @@
 .headlineContainer {
   display: flex;
+  flex: 1 1 auto;
   align-items: flex-start;
   gap: var(--spacing-lg);
   max-width: 100%;
@@ -25,6 +26,7 @@
 .headline {
   position: relative;
   display: inline-flex;
+  flex: 1 1 auto;
   align-items: center;
   gap: var(--spacing-xs);
   margin-block: var(--spacing-xs);
@@ -131,7 +133,7 @@
 
 .addition {
   display: flex;
-  flex: 1 1 auto;
+  flex: 0 0 auto;
   min-width: 0;
   align-items: center;
 }

package/dist/components/metric-tile/MetricTile.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var client = require('../../client');
+var styles = require('./MetricTile.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function MetricTile({
+  severity,
+  label,
+  value,
+  tooltip,
+  size = "md",
+  width
+}) {
+  const style = width != null ? { width: typeof width === "number" ? `${width}px` : width } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(client.Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.tile, "data-severity": severity, "data-size": size, style, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.value, children: value })
+  ] }) });
+}
+
+exports.MetricTile = MetricTile;

package/dist/components/metric-tile/MetricTile.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode, JSX } from 'react';
+import { Severity } from '../../constants/severity.types';
+type MetricTileSize = 'sm' | 'md' | 'lg';
+interface MetricTileProps {
+    severity: Severity;
+    label: string;
+    value: string | number;
+    tooltip?: ReactNode;
+    size?: MetricTileSize;
+    width?: number | string;
+}
+export declare function MetricTile({ severity, label, value, tooltip, size, width, }: MetricTileProps): JSX.Element;
+export {};

package/dist/components/metric-tile/MetricTile.js

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Tooltip } from '../../client';
+import styles from './MetricTile.module.css';
+
+function MetricTile({
+  severity,
+  label,
+  value,
+  tooltip,
+  size = "md",
+  width
+}) {
+  const style = width != null ? { width: typeof width === "number" ? `${width}px` : width } : void 0;
+  return /* @__PURE__ */ jsx(Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsxs("span", { className: styles.tile, "data-severity": severity, "data-size": size, style, children: [
+    /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
+    /* @__PURE__ */ jsx("span", { className: styles.value, children: value })
+  ] }) });
+}
+
+export { MetricTile };

package/dist/components/metric-tile/MetricTile.module.css

@@ -0,0 +1,95 @@
+.tile {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2xs);
+  padding: var(--spacing-sm) var(--spacing-md);
+  min-width: 72px;
+  overflow: hidden;
+  box-sizing: border-box;
+  border-radius: var(--border-radius-md);
+  font-family: var(--font-family);
+  cursor: default;
+}
+
+.tile[data-size='sm'] {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  min-width: 56px;
+  border-radius: var(--border-radius-sm);
+}
+
+.tile[data-size='lg'] {
+  padding: var(--spacing-md) var(--spacing-lg);
+  min-width: 96px;
+  border-radius: var(--border-radius-lg);
+}
+
+.tile[data-severity='success'] {
+  background-color: var(--color-status-success-bg);
+  color: var(--color-status-success-fg);
+}
+
+.tile[data-severity='error'] {
+  background-color: var(--color-status-error-bg);
+  color: var(--color-status-error-fg);
+}
+
+.tile[data-severity='warning'] {
+  background-color: var(--color-status-warning-bg);
+  color: var(--color-status-warning-fg);
+}
+
+.tile[data-severity='info'] {
+  background-color: var(--color-status-info-bg);
+  color: var(--color-status-info-fg);
+}
+
+.tile[data-severity='neutral'] {
+  background-color: var(--color-bg-toolbar);
+  color: var(--color-fg-default);
+}
+
+.tile[data-severity='brand'] {
+  background-color: var(--color-brand);
+  color: var(--color-fg-on-brand);
+}
+
+.label {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+  line-height: 1;
+  opacity: 0.85;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.value {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+  line-height: 1;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.tile[data-size='sm'] .label {
+  font-size: var(--font-size-sm);
+}
+
+.tile[data-size='sm'] .value {
+  font-size: var(--font-size-sm);
+}
+
+.tile[data-size='lg'] .label {
+  font-size: var(--font-size-sm);
+}
+
+.tile[data-size='lg'] .value {
+  font-size: var(--font-size-xl);
+}

package/dist/components/pagination/Pagination.cjs

@@ -22,7 +22,8 @@ function Pagination({
   onPageChange,
   pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
   showFirstLast = true,
-  showGoToPage = true
+  showGoToPage = true,
+  showPageSize = true
 }) {
   const popoverRef = react.useRef(null);
   const pageSizeRef = react.useRef(null);
@@ -131,7 +132,7 @@ function Pagination({
         ) }, page)) })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    showPageSize && /* @__PURE__ */ jsxRuntime.jsx(
       Popover.Popover,
       {
         ref: pageSizeRef,

package/dist/components/pagination/Pagination.d.ts

@@ -15,6 +15,7 @@ interface PaginationProps {
     pageSizeOptions?: number[];
     showFirstLast?: boolean;
     showGoToPage?: boolean;
+    showPageSize?: boolean;
 }
-export declare function Pagination({ itemsCount, skip, take, onPageChange, pageSizeOptions, showFirstLast, showGoToPage, }: PaginationProps): ReactNode;
+export declare function Pagination({ itemsCount, skip, take, onPageChange, pageSizeOptions, showFirstLast, showGoToPage, showPageSize, }: PaginationProps): ReactNode;
 export {};

package/dist/components/pagination/Pagination.js

@@ -16,7 +16,8 @@ function Pagination({
   onPageChange,
   pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
   showFirstLast = true,
-  showGoToPage = true
+  showGoToPage = true,
+  showPageSize = true
 }) {
   const popoverRef = useRef(null);
   const pageSizeRef = useRef(null);
@@ -125,7 +126,7 @@ function Pagination({
         ) }, page)) })
       }
     ),
-    /* @__PURE__ */ jsx(
+    showPageSize && /* @__PURE__ */ jsx(
       Popover,
       {
         ref: pageSizeRef,

package/dist/components/stack/Stack.cjs

@@ -22,10 +22,18 @@ const Stack = react.forwardRef(function Stack2({
   mobileAlign,
   mobileJustify,
   mobileWrap = false,
+  maxWidth,
   className,
+  style,
   ...rest
 }, ref) {
   const Tag = as != null ? as : "div";
+  const resolvedStyle = maxWidth != null ? {
+    ...maxWidth.base != null ? { "--max-width-base": maxWidth.base } : {},
+    ...maxWidth.md != null ? { "--max-width-md": maxWidth.md } : {},
+    ...maxWidth.lg != null ? { "--max-width-lg": maxWidth.lg } : {},
+    ...style
+  } : style;
   const classes = [
     "dbc-flex",
     direction === "column" ? "dbc-flex-column" : void 0,
@@ -39,9 +47,10 @@ const Stack = react.forwardRef(function Stack2({
     mobileAlign ? styles__default.default[`mobileAlign${mobileAlign.charAt(0).toUpperCase()}${mobileAlign.slice(1)}`] : void 0,
     mobileJustify ? styles__default.default[`mobileJustify${mobileJustify.charAt(0).toUpperCase()}${mobileJustify.slice(1)}`] : void 0,
     mobileWrap ? styles__default.default.mobileWrap : void 0,
+    maxWidth != null ? styles__default.default.maxWidth : void 0,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { ref, className: classes, ...rest });
+  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { ref, className: classes, style: resolvedStyle, ...rest });
 });
 
 exports.Stack = Stack;

package/dist/components/stack/Stack.d.ts

@@ -1,4 +1,5 @@
 import React, { ElementType } from 'react';
+import type { GridMaxWidth } from '../../components/grid/Grid';
 type GapSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
 type StackDirection = 'row' | 'column';
 type StackAlign = 'start' | 'center' | 'end';
@@ -15,6 +16,7 @@ type StackOwnProps = {
     mobileAlign?: StackAlign;
     mobileJustify?: StackJustify;
     mobileWrap?: boolean;
+    maxWidth?: GridMaxWidth;
 };
 export type StackProps<C extends ElementType = 'div'> = StackOwnProps & {
     as?: C;

package/dist/components/stack/Stack.js

@@ -16,10 +16,18 @@ const Stack = forwardRef(function Stack2({
   mobileAlign,
   mobileJustify,
   mobileWrap = false,
+  maxWidth,
   className,
+  style,
   ...rest
 }, ref) {
   const Tag = as != null ? as : "div";
+  const resolvedStyle = maxWidth != null ? {
+    ...maxWidth.base != null ? { "--max-width-base": maxWidth.base } : {},
+    ...maxWidth.md != null ? { "--max-width-md": maxWidth.md } : {},
+    ...maxWidth.lg != null ? { "--max-width-lg": maxWidth.lg } : {},
+    ...style
+  } : style;
   const classes = [
     "dbc-flex",
     direction === "column" ? "dbc-flex-column" : void 0,
@@ -33,9 +41,10 @@ const Stack = forwardRef(function Stack2({
     mobileAlign ? styles[`mobileAlign${mobileAlign.charAt(0).toUpperCase()}${mobileAlign.slice(1)}`] : void 0,
     mobileJustify ? styles[`mobileJustify${mobileJustify.charAt(0).toUpperCase()}${mobileJustify.slice(1)}`] : void 0,
     mobileWrap ? styles.mobileWrap : void 0,
+    maxWidth != null ? styles.maxWidth : void 0,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(Tag, { ref, className: classes, ...rest });
+  return /* @__PURE__ */ jsx(Tag, { ref, className: classes, style: resolvedStyle, ...rest });
 });
 
 export { Stack };

package/dist/components/stack/Stack.module.css

@@ -1,3 +1,19 @@
+.maxWidth {
+  max-width: var(--max-width-base);
+}
+
+@media (min-width: 768px) {
+  .maxWidth {
+    max-width: var(--max-width-md, var(--max-width-base));
+  }
+}
+
+@media (min-width: 1200px) {
+  .maxWidth {
+    max-width: var(--max-width-lg, var(--max-width-md, var(--max-width-base)));
+  }
+}
+
 @media (max-width: 767px) {
   .mobileDirectionRow {
     flex-direction: row;

package/dist/components/table/Table.cjs

@@ -46,6 +46,8 @@ function Table({
   totalItemsCount,
   paginationPlacement = "bottom",
   showFirstLast = false,
+  showGoToPage,
+  showPageSize,
   pageSizeOptions,
   getRowSeverity,
   onRowClick,
@@ -116,6 +118,8 @@ function Table({
           skip,
           onPageChange: handlePageChange,
           showFirstLast,
+          showGoToPage,
+          showPageSize,
           pageSizeOptions
         }
       )
@@ -199,7 +203,7 @@ function Table({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "dbc-flex dbc-flex-column dbc-gap-md",
+      className: "dbc-flex dbc-flex-column dbc-gap-md dbc-flex-grow",
       style: {
         flexFlow: paginationPlacement === "top" ? "column-reverse" : "column",
         position: "relative"

package/dist/components/table/Table.d.ts

@@ -1,4 +1,4 @@
 import type { JSX } from 'react';
 import type { TableProps } from './Table.types';
-export declare function Table<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, selectionMode, allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant, size, viewMode, striped, fillViewport, fillViewportBottomOffset, containScrolling, stickyHeader, tableWidth, tableRootRef, measuringLayout, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, pageSizeOptions, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
+export declare function Table<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, selectionMode, allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant, size, viewMode, striped, fillViewport, fillViewportBottomOffset, containScrolling, stickyHeader, tableWidth, tableRootRef, measuringLayout, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, showGoToPage, showPageSize, pageSizeOptions, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
 export type { ColumnItem } from './Table.types';

package/dist/components/table/Table.js

@@ -40,6 +40,8 @@ function Table({
   totalItemsCount,
   paginationPlacement = "bottom",
   showFirstLast = false,
+  showGoToPage,
+  showPageSize,
   pageSizeOptions,
   getRowSeverity,
   onRowClick,
@@ -110,6 +112,8 @@ function Table({
           skip,
           onPageChange: handlePageChange,
           showFirstLast,
+          showGoToPage,
+          showPageSize,
           pageSizeOptions
         }
       )
@@ -193,7 +197,7 @@ function Table({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "dbc-flex dbc-flex-column dbc-gap-md",
+      className: "dbc-flex dbc-flex-column dbc-gap-md dbc-flex-grow",
       style: {
         flexFlow: paginationPlacement === "top" ? "column-reverse" : "column",
         position: "relative"

package/dist/components/table/Table.module.css

@@ -46,6 +46,19 @@
 }
 
 .tableRoot {
+  --table-component-header-bg: var(--table-header-bg);
+  --table-component-header-fg: var(--table-header-fg);
+  --table-component-header-border: var(--table-border-header);
+  --table-component-header-font-weight: var(--font-weight-medium);
+  --table-component-row-bg: var(--table-row-bg);
+  --table-component-row-bg-alt: var(--table-row-bg-alt);
+  --table-component-row-bg-hover: var(--table-row-bg-hover);
+  --table-component-row-bg-selected: var(--table-row-bg-selected);
+  --table-component-row-bg-selected-hover: var(--table-row-bg-selected-hover);
+  --table-component-cell-fg: var(--table-cell-fg);
+  --table-component-cell-border: var(--table-border-subtle);
+  --table-component-divider: var(--table-divider);
+
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
@@ -55,6 +68,31 @@
   max-inline-size: 100%;
 }
 
+.primary {
+}
+
+.embedded {
+  --table-component-header-bg: transparent;
+  --table-component-header-fg: var(--color-fg-subtle);
+  --table-component-header-border: transparent;
+  --table-component-header-font-weight: var(--font-weight-default);
+  --table-component-row-bg: transparent;
+  --table-component-row-bg-alt: color-mix(
+    in srgb,
+    var(--color-bg-contextual-subtle) 55%,
+    transparent
+  );
+  --table-component-row-bg-hover: var(--color-bg-contextual-subtle);
+  --table-component-row-bg-selected: color-mix(in srgb, var(--color-bg-selected) 55%, transparent);
+  --table-component-row-bg-selected-hover: color-mix(
+    in srgb,
+    var(--color-bg-selected-hover) 60%,
+    transparent
+  );
+  --table-component-cell-border: color-mix(in srgb, var(--table-border-subtle) 65%, transparent);
+  --table-component-divider: color-mix(in srgb, var(--table-divider) 75%, transparent);
+}
+
 .measuringLayout {
   visibility: hidden;
 }
@@ -64,20 +102,19 @@
   min-block-size: 0;
   min-inline-size: 0;
   overflow: auto;
-  background: var(--table-row-bg);
+  background: var(--table-component-row-bg);
   -webkit-overflow-scrolling: touch;
 }
 
 .tableElement {
   inline-size: 100%;
-  min-inline-size: 100%;
   border-collapse: separate;
   border-spacing: 0;
   table-layout: fixed;
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
-  color: var(--table-cell-fg);
-  background: var(--table-row-bg);
+  color: var(--table-component-cell-fg);
+  background: var(--table-component-row-bg);
 }
 
 .header {
@@ -102,7 +139,7 @@
 }
 
 .body .row:first-child .cell {
-  border-block-start: var(--spacing-xs) solid var(--table-row-bg);
+  border-block-start: var(--spacing-xs) solid var(--table-component-row-bg);
 }
 
 .headerCell,
@@ -116,15 +153,15 @@
 
 .headerCell {
   vertical-align: middle;
-  background-color: var(--table-header-bg);
-  border-block-end: 1px solid var(--table-border-header);
+  background-color: var(--table-component-header-bg);
+  border-block-end: 1px solid var(--table-component-header-border);
   padding-block: var(--spacing-xxs);
   padding-inline: var(--spacing-sm);
   font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--table-component-header-font-weight);
   letter-spacing: var(--letter-spacing-wide);
   text-transform: uppercase;
-  color: var(--table-header-fg);
+  color: var(--table-component-header-fg);
   white-space: nowrap;
 }
 
@@ -137,8 +174,8 @@
 .cell {
   padding-block: 6px;
   padding-inline: var(--spacing-sm);
-  border-block-end: 1px solid var(--table-border-subtle);
-  background: var(--table-row-bg);
+  border-block-end: 1px solid var(--table-component-cell-border);
+  background: var(--table-component-row-bg);
   overflow: hidden;
   line-height: 20px;
 }
@@ -242,19 +279,19 @@
 }
 
 .row:hover > .cell {
-  background-color: var(--table-row-bg-hover);
+  background-color: var(--table-component-row-bg-hover);
 }
 
 .selectedRow > .cell {
-  background-color: var(--table-row-bg-selected);
+  background-color: var(--table-component-row-bg-selected);
 }
 
 .selectedRow:hover > .cell {
-  background-color: var(--table-row-bg-selected-hover);
+  background-color: var(--table-component-row-bg-selected-hover);
 }
 
 .striped > .row:nth-child(even):not(.selectedRow):not(:hover) > .cell {
-  background-color: var(--table-row-bg-alt);
+  background-color: var(--table-component-row-bg-alt);
 }
 
 .row:focus-within > .cell {
@@ -520,7 +557,7 @@
   top: 8px;
   bottom: 8px;
   width: 1px;
-  background: var(--table-divider);
+  background: var(--table-component-divider);
 }
 
 .dividerRight::after {
@@ -530,5 +567,5 @@
   top: 8px;
   bottom: 8px;
   width: 1px;
-  background: var(--table-divider);
+  background: var(--table-component-divider);
 }

package/dist/components/table/Table.types.d.ts

@@ -56,6 +56,8 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     totalItemsCount?: number;
     paginationPlacement?: 'top' | 'bottom';
     showFirstLast?: boolean;
+    showGoToPage?: boolean;
+    showPageSize?: boolean;
     pageSizeOptions?: number[];
     getRowSeverity?: (row: T) => Severity | undefined;
     onRowClick?: (row: T) => void;

package/dist/components/table/TanstackTable.cjs

@@ -97,7 +97,17 @@ function TanstackTable(props) {
       window.addEventListener("resize", updateWidth);
       return () => window.removeEventListener("resize", updateWidth);
     }
-    const observer = new ResizeObserver(() => updateWidth());
+    const observer = new ResizeObserver((entries) => {
+      var _a, _b, _c;
+      const entry = entries[0];
+      if (!entry) {
+        updateWidth();
+        return;
+      }
+      const contentWidth = (_c = (_b = (_a = entry.contentBoxSize) == null ? void 0 : _a[0]) == null ? void 0 : _b.inlineSize) != null ? _c : entry.contentRect.width;
+      const next = Math.floor(contentWidth);
+      setAvailableWidth(next > 0 ? next : void 0);
+    });
     observer.observe(el);
     return () => observer.disconnect();
   }, []);

package/dist/components/table/TanstackTable.js

@@ -72,7 +72,17 @@ function TanstackTable(props) {
       window.addEventListener("resize", updateWidth);
       return () => window.removeEventListener("resize", updateWidth);
     }
-    const observer = new ResizeObserver(() => updateWidth());
+    const observer = new ResizeObserver((entries) => {
+      var _a, _b, _c;
+      const entry = entries[0];
+      if (!entry) {
+        updateWidth();
+        return;
+      }
+      const contentWidth = (_c = (_b = (_a = entry.contentBoxSize) == null ? void 0 : _a[0]) == null ? void 0 : _b.inlineSize) != null ? _c : entry.contentRect.width;
+      const next = Math.floor(contentWidth);
+      setAvailableWidth(next > 0 ? next : void 0);
+    });
     observer.observe(el);
     return () => observer.disconnect();
   }, []);

package/dist/components/table/tanstackTable.utils.cjs

@@ -148,9 +148,16 @@ function buildDistributedColumnWidths(args) {
     active = nextActive;
   }
   const floatTrackTotal = tracks.reduce((sum, track) => sum + track.width, 0);
-  const targetTrackWidth = floatTrackTotal <= availableWidth - selectionWidth ? Math.floor(floatTrackTotal) : Math.ceil(floatTrackTotal);
+  const maxTrackWidth = availableWidth - selectionWidth;
+  const targetTrackWidth = Math.min(
+    floatTrackTotal <= maxTrackWidth ? Math.floor(floatTrackTotal) : Math.ceil(floatTrackTotal),
+    maxTrackWidth
+  );
   const widths = toIntegerTrackWidths(tracks, targetTrackWidth);
-  const totalWidth = selectionWidth + Object.values(widths).reduce((sum, width) => sum + width, 0);
+  const totalWidth = Math.min(
+    selectionWidth + Object.values(widths).reduce((sum, width) => sum + width, 0),
+    availableWidth
+  );
   return {
     selectionWidth: hasSelection ? table_utils.SELECTION_COLUMN_PX : void 0,
     widths,

package/dist/components/table/tanstackTable.utils.js

@@ -146,9 +146,16 @@ function buildDistributedColumnWidths(args) {
     active = nextActive;
   }
   const floatTrackTotal = tracks.reduce((sum, track) => sum + track.width, 0);
-  const targetTrackWidth = floatTrackTotal <= availableWidth - selectionWidth ? Math.floor(floatTrackTotal) : Math.ceil(floatTrackTotal);
+  const maxTrackWidth = availableWidth - selectionWidth;
+  const targetTrackWidth = Math.min(
+    floatTrackTotal <= maxTrackWidth ? Math.floor(floatTrackTotal) : Math.ceil(floatTrackTotal),
+    maxTrackWidth
+  );
   const widths = toIntegerTrackWidths(tracks, targetTrackWidth);
-  const totalWidth = selectionWidth + Object.values(widths).reduce((sum, width) => sum + width, 0);
+  const totalWidth = Math.min(
+    selectionWidth + Object.values(widths).reduce((sum, width) => sum + width, 0),
+    availableWidth
+  );
   return {
     selectionWidth: hasSelection ? SELECTION_COLUMN_PX : void 0,
     widths,

package/dist/index.cjs

@@ -24,6 +24,7 @@ var FadeOverlay = require('./components/overlay/fade-overlay/FadeOverlay');
 var InputContainer = require('./components/forms/input-container/InputContainer');
 var Divider = require('./components/divider/Divider');
 var Grid = require('./components/grid/Grid');
+var MetricTile = require('./components/metric-tile/MetricTile');
 
 
 
@@ -171,3 +172,9 @@ Object.keys(Grid).forEach(function (k) {
 		get: function () { return Grid[k]; }
 	});
 });
+Object.keys(MetricTile).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return MetricTile[k]; }
+	});
+});

package/dist/index.css

@@ -38,6 +38,7 @@
 @import './components/media-card/MediaCard.module.css';
 @import './components/menu/Menu.module.css';
 @import './components/meta-bar/MetaBar.module.css';
+@import './components/metric-tile/MetricTile.module.css';
 @import './components/nav-bar/NavBar.module.css';
 @import './components/overlay/fade-overlay/FadeOverlay.module.css';
 @import './components/overlay/modal/Modal.module.css';

package/dist/index.d.ts

@@ -22,3 +22,4 @@ export * from './components/overlay/fade-overlay/FadeOverlay';
 export * from './components/forms/input-container/InputContainer';
 export * from './components/divider/Divider';
 export * from './components/grid/Grid';
+export * from './components/metric-tile/MetricTile';

package/dist/index.js

@@ -22,3 +22,4 @@ export * from './components/overlay/fade-overlay/FadeOverlay';
 export * from './components/forms/input-container/InputContainer';
 export * from './components/divider/Divider';
 export * from './components/grid/Grid';
+export * from './components/metric-tile/MetricTile';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.106",
+  "version": "0.0.108",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",