@dbcdk/react-components 0.0.157 → 0.0.159

package/dist/components/accordion/components/AccordionRow.cjs

@@ -57,7 +57,7 @@ function AccordionRow({
   renderMode = "lazy"
 }) {
   const isDisabled = !!item.disabled;
-  const headlineWeight = isOpen ? variant === "outlined" ? 500 : 600 : variant === "outlined" ? 400 : 500;
+  const headlineWeight = variant === "outlined" ? 400 : 500;
   const buttonId = `${uid}-acc-btn-${index}`;
   const panelId = `${uid}-acc-panel-${index}`;
   const { innerRef, height, onTransitionEnd } = useCollapsibleHeight(isOpen, shouldAnimate);

package/dist/components/accordion/components/AccordionRow.js

@@ -51,7 +51,7 @@ function AccordionRow({
   renderMode = "lazy"
 }) {
   const isDisabled = !!item.disabled;
-  const headlineWeight = isOpen ? variant === "outlined" ? 500 : 600 : variant === "outlined" ? 400 : 500;
+  const headlineWeight = variant === "outlined" ? 400 : 500;
   const buttonId = `${uid}-acc-btn-${index}`;
   const panelId = `${uid}-acc-panel-${index}`;
   const { innerRef, height, onTransitionEnd } = useCollapsibleHeight(isOpen, shouldAnimate);

package/dist/components/breadcrumbs/Breadcrumbs.module.css

@@ -5,6 +5,7 @@
 .breadcrumbs ul {
   display: flex;
   align-items: center;
+  gap: var(--spacing-xs);
   list-style: none;
   margin: 0;
   padding: 0;
@@ -17,7 +18,7 @@
   gap: var(--spacing-xxs);
   padding-block: calc(var(--spacing-xxs) + var(--density));
   padding-inline: 0;
-  color: var(--color-fg-default);
+  color: var(--color-fg-muted);
   border-radius: var(--border-radius-sm);
   position: relative;
   transition:
@@ -27,7 +28,6 @@
 
 .breadcrumbs li:hover button {
   color: var(--color-fg-default);
-  background-color: var(--color-bg-contextual);
   cursor: pointer;
 }
 
@@ -39,14 +39,12 @@
 
 .breadcrumbs li[aria-current='page'] button,
 .breadcrumbs li:last-of-type button {
-  background-color: var(--color-bg-contextual) !important;
   font-weight: var(--font-weight-medium);
 }
 
 .separator {
   display: flex;
   align-items: center;
-  padding: 0 var(--spacing-xs);
   color: var(--color-fg-subtle);
   font-size: var(--font-size-md);
 }
@@ -62,8 +60,7 @@
   all: unset;
   color: inherit;
   border-radius: var(--border-radius-default);
-  background-color: var(--color-bg-contextual-subtle);
-  padding: var(--spacing-xxs) var(--spacing-sm);
+  padding-block: var(--spacing-xxs);
 }
 
 .breadcrumbs a:focus-visible,

package/dist/components/button/Button.module.css

@@ -2,7 +2,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-xxs);
 
   font-family: var(--font-family);
   font-size: var(--font-size-sm);

package/dist/components/forms/input/Input.module.css

@@ -464,3 +464,15 @@
   min-inline-size: calc(16px + (var(--spacing-xxs) * 2));
   min-block-size: calc(16px + (var(--spacing-xxs) * 2));
 }
+
+.clearSlot > * {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-fast) var(--ease-standard);
+}
+
+.field:hover .clearSlot > *,
+.field:focus-within .clearSlot > * {
+  opacity: 1;
+  pointer-events: auto;
+}

package/dist/components/forms/radio-buttons/RadioButtons.module.css

@@ -56,9 +56,16 @@
   transform: scale(1);
 }
 
-/* hover (only when not disabled) */
-.input:not(:disabled):hover + .radio {
-  border-color: var(--color-brand-hover);
+/* hover (only when not disabled/checked) — triggers from anywhere in the
+   control, not just the input itself, so hovering the label or an
+   interactive endAdornment (e.g. a menu trigger) also highlights the radio
+   icon. Reads a CSS variable (rather than a hardcoded color) so an
+   ancestor outside this module — e.g. a Menu row that already shows its
+   own hover feedback — can suppress this by setting the variable; that
+   works across CSS-module file boundaries where class-name hashing would
+   otherwise prevent one module's selectors from targeting another's. */
+.container:hover .radio:not(.disabled):not(.checked) {
+  border-color: var(--radio-hover-border-color, var(--color-brand-hover));
 }
 
 /* focus ring */

package/dist/components/headline/CollapsibleHeadline.cjs

@@ -61,6 +61,7 @@ function CollapsibleHeadline({
               shape: "round",
               type: "button",
               variant: "inline",
+              style: { padding: "var(--spacing-2xs)" },
               "aria-expanded": isExpanded,
               "aria-controls": panelId,
               onClick: handleToggle,

package/dist/components/headline/CollapsibleHeadline.js

@@ -55,6 +55,7 @@ function CollapsibleHeadline({
               shape: "round",
               type: "button",
               variant: "inline",
+              style: { padding: "var(--spacing-2xs)" },
               "aria-expanded": isExpanded,
               "aria-controls": panelId,
               onClick: handleToggle,

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

@@ -52,34 +52,10 @@
   display: contents;
 }
 
-/* CollapsibleHeadline toggle button */
-.toggleButton {
-  all: unset;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  padding: var(--spacing-2xs);
-  border-radius: var(--border-radius-sm);
-  cursor: pointer;
-  color: var(--color-fg-subtle);
-  transition: color var(--transition-fast) var(--ease-standard);
-}
-
-.toggleButton:hover {
-  color: var(--color-fg-default);
-}
-
-.toggleButton:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
 .toggleChevron {
   display: block;
-  width: var(--icon-size-md);
-  height: var(--icon-size-md);
+  width: 0.85em;
+  height: 0.85em;
   transition: transform var(--transition-normal) var(--ease-standard);
 }
 

package/dist/components/icon/Icon.cjs

@@ -17,11 +17,22 @@ const SeverityIcon = {
   brand: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, {}),
   accent: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, {})
 };
-function Icon({ severity, label, customIcon, size = "md" }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, "data-size": size, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.icon} ${severity ? styles__default.default[severity] : ""} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null }),
-    label && /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
-  ] });
+function Icon({
+  severity,
+  label,
+  customIcon,
+  size = "md",
+  iconPosition = "start"
+}) {
+  const iconEl = /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.icon} ${severity ? styles__default.default[severity] : ""} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null });
+  const labelEl = label && /* @__PURE__ */ jsxRuntime.jsx("span", { children: label });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.container, "data-size": size, children: iconPosition === "end" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    labelEl,
+    iconEl
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    iconEl,
+    labelEl
+  ] }) });
 }
 
 exports.Icon = Icon;

package/dist/components/icon/Icon.d.ts

@@ -2,11 +2,13 @@ import type { ReactNode, JSX } from 'react';
 import { Severity } from '../../constants/severity.types';
 export declare const SeverityIcon: Record<Severity, ReactNode>;
 type IconSize = 'xs' | 'md';
+type IconPosition = 'start' | 'end';
 interface IconProps {
     severity?: Severity;
     customIcon?: ReactNode;
     label?: string;
     size?: IconSize;
+    iconPosition?: IconPosition;
 }
-export declare function Icon({ severity, label, customIcon, size }: IconProps): JSX.Element;
+export declare function Icon({ severity, label, customIcon, size, iconPosition, }: IconProps): JSX.Element;
 export {};

package/dist/components/icon/Icon.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Sparkles, Building2, CircleAlert, Info, CircleX, CircleCheck } from 'lucide-react';
 import styles from './Icon.module.css';
 
@@ -11,11 +11,22 @@ const SeverityIcon = {
   brand: /* @__PURE__ */ jsx(Building2, {}),
   accent: /* @__PURE__ */ jsx(Sparkles, {})
 };
-function Icon({ severity, label, customIcon, size = "md" }) {
-  return /* @__PURE__ */ jsxs("div", { className: styles.container, "data-size": size, children: [
-    /* @__PURE__ */ jsx("span", { className: `${styles.icon} ${severity ? styles[severity] : ""} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null }),
-    label && /* @__PURE__ */ jsx("span", { children: label })
-  ] });
+function Icon({
+  severity,
+  label,
+  customIcon,
+  size = "md",
+  iconPosition = "start"
+}) {
+  const iconEl = /* @__PURE__ */ jsx("span", { className: `${styles.icon} ${severity ? styles[severity] : ""} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null });
+  const labelEl = label && /* @__PURE__ */ jsx("span", { children: label });
+  return /* @__PURE__ */ jsx("div", { className: styles.container, "data-size": size, children: iconPosition === "end" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    labelEl,
+    iconEl
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    iconEl,
+    labelEl
+  ] }) });
 }
 
 export { Icon, SeverityIcon };

package/dist/components/icon/Icon.module.css

@@ -8,7 +8,7 @@
 }
 
 .container[data-size='xs'] {
-  gap: 0;
+  gap: var(--spacing-2xs);
   font-size: var(--font-size-xs);
 }
 

package/dist/components/menu/Menu.module.css

@@ -133,6 +133,18 @@
   background-color: var(--color-bg-toolbar-hover);
 }
 
+/* The row already conveys hover via the background color above, covering
+   the whole item consistently. Suppress RadioButton's own icon hover
+   border here — otherwise it only lights up when the pointer happens to
+   be over the icon/label/endAdornment rather than anywhere in the row.
+   RadioButton's hashed class names can't be targeted directly from this
+   module, so this relies on a CSS custom property that RadioButton's own
+   hover rule reads — custom properties inherit through the DOM regardless
+   of CSS-module class hashing. */
+.row:hover > .interactiveChild {
+  --radio-hover-border-color: var(--color-border-default);
+}
+
 /* Focus ring: support both cases */
 .interactive:focus-visible {
   outline: none;

package/dist/components/nav-bar/NavBar.cjs

@@ -48,7 +48,10 @@ function NavBar({
   });
   const productNameContent = productName ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(logo.Logo, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 1, children: productName })
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.productNameLabel, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.productNameSquare }),
+      /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 1, children: productName })
+    ] })
   ] }) : null;
   const productNameNode = (() => {
     if (!productName || !productNameContent) return null;

package/dist/components/nav-bar/NavBar.js

@@ -42,7 +42,10 @@ function NavBar({
   });
   const productNameContent = productName ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Logo, {}),
-    /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 1, children: productName })
+    /* @__PURE__ */ jsxs("span", { className: styles.productNameLabel, children: [
+      /* @__PURE__ */ jsx("span", { className: styles.productNameSquare }),
+      /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 1, children: productName })
+    ] })
   ] }) : null;
   const productNameNode = (() => {
     if (!productName || !productNameContent) return null;

package/dist/components/nav-bar/NavBar.module.css

@@ -111,6 +111,24 @@
   color: inherit;
   text-decoration: none;
 }
+
+.productNameLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  color: var(--color-fg-default);
+}
+
+.productNameSquare {
+  inline-size: 5px;
+  block-size: 5px;
+  flex: 0 0 auto;
+  background-color: var(--color-logo);
+}
+
+.productNameLabel h1 {
+  font-size: var(--font-size-sm);
+}
 .productName svg {
   inline-size: auto;
   block-size: var(--icon-size-md);

package/dist/components/sidebar/Sidebar.cjs

@@ -6,6 +6,7 @@ var SidebarProvider = require('./providers/SidebarProvider');
 
 function Sidebar({
   items,
+  productName,
   productLogo,
   activeLink,
   version,
@@ -21,6 +22,7 @@ function Sidebar({
   return /* @__PURE__ */ jsxRuntime.jsx(SidebarProvider.SidebarProvider, { items, children: /* @__PURE__ */ jsxRuntime.jsx(
     SidebarContainer.SidebarContainer,
     {
+      productName,
       productLogo,
       activeLink,
       version,

package/dist/components/sidebar/Sidebar.d.ts

@@ -19,5 +19,5 @@ interface SidebarProps {
     minWidth?: number;
     storageKey?: string;
 }
-export declare function Sidebar({ items, productLogo, activeLink, version, hideSearch, searchPlaceholder, showSettings, footer, resizable, defaultWidth, minWidth, storageKey, }: SidebarProps): JSX.Element;
+export declare function Sidebar({ items, productName, productLogo, activeLink, version, hideSearch, searchPlaceholder, showSettings, footer, resizable, defaultWidth, minWidth, storageKey, }: SidebarProps): JSX.Element;
 export {};

package/dist/components/sidebar/Sidebar.js

@@ -4,6 +4,7 @@ import { SidebarProvider } from './providers/SidebarProvider';
 
 function Sidebar({
   items,
+  productName,
   productLogo,
   activeLink,
   version,
@@ -19,6 +20,7 @@ function Sidebar({
   return /* @__PURE__ */ jsx(SidebarProvider, { items, children: /* @__PURE__ */ jsx(
     SidebarContainer,
     {
+      productName,
       productLogo,
       activeLink,
       version,

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.cjs

@@ -6,6 +6,7 @@ var lucideReact = require('lucide-react');
 var react = require('react');
 var logo = require('../../../../assets/logo');
 var Button = require('../../../../components/button/Button');
+var Headline = require('../../../../components/headline/Headline');
 var SidebarItems = require('../../../../components/sidebar/components/sidebar-items/SidebarItems');
 var SidenavFiltering = require('../../../../components/sidebar/components/sidenav-filteirng/SidenavFiltering');
 var SidebarProvider = require('../../../../components/sidebar/providers/SidebarProvider');
@@ -43,6 +44,7 @@ function removeStoredWidth(key) {
 }
 function SidebarContainer({
   logo: logo$1,
+  productName,
   productLogo,
   activeLink,
   version,
@@ -165,7 +167,10 @@ function SidebarContainer({
       style: containerStyle,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.header, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.productHeader, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.productLogo, children: productLogo }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.productGroup, children: productLogo ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.productLogo, children: productLogo }) : productName && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.productNameLabel, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.productNameSquare }),
+            /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 1, allowWrap: false, children: productName })
+          ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx(
             Button.Button,
             {

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.d.ts

@@ -14,5 +14,5 @@ interface SidebarContainerProps {
     minWidth?: number;
     storageKey?: string;
 }
-export declare function SidebarContainer({ logo, productLogo, activeLink, version, hideSearch, searchPlaceholder, showSettings, footer, resizable, defaultWidth, minWidth, storageKey, }: SidebarContainerProps): JSX.Element;
+export declare function SidebarContainer({ logo, productName, productLogo, activeLink, version, hideSearch, searchPlaceholder, showSettings, footer, resizable, defaultWidth, minWidth, storageKey, }: SidebarContainerProps): JSX.Element;
 export {};

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.js

@@ -4,6 +4,7 @@ import { PanelLeftOpen, PanelLeft } from 'lucide-react';
 import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import { Logo } from '../../../../assets/logo';
 import { Button } from '../../../../components/button/Button';
+import { Headline } from '../../../../components/headline/Headline';
 import { SidebarItems } from '../../../../components/sidebar/components/sidebar-items/SidebarItems';
 import SidenavFiltering from '../../../../components/sidebar/components/sidenav-filteirng/SidenavFiltering';
 import { useSidebar } from '../../../../components/sidebar/providers/SidebarProvider';
@@ -36,6 +37,7 @@ function removeStoredWidth(key) {
 }
 function SidebarContainer({
   logo,
+  productName,
   productLogo,
   activeLink,
   version,
@@ -158,7 +160,10 @@ function SidebarContainer({
       style: containerStyle,
       children: [
         /* @__PURE__ */ jsx("div", { className: styles.header, children: /* @__PURE__ */ jsxs("div", { className: styles.productHeader, children: [
-          /* @__PURE__ */ jsx("div", { className: styles.productLogo, children: productLogo }),
+          /* @__PURE__ */ jsx("div", { className: styles.productGroup, children: productLogo ? /* @__PURE__ */ jsx("div", { className: styles.productLogo, children: productLogo }) : productName && /* @__PURE__ */ jsxs("span", { className: styles.productNameLabel, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.productNameSquare }),
+            /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 1, allowWrap: false, children: productName })
+          ] }) }),
           /* @__PURE__ */ jsx(
             Button,
             {

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.module.css

@@ -64,6 +64,15 @@
   flex-grow: 1;
 }
 
+/* Product logo + name group */
+.productGroup {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  min-width: 0;
+  overflow: hidden;
+}
+
 /* Product logo container */
 .productLogo {
   display: flex;
@@ -73,6 +82,25 @@
   min-width: 0;
 }
 
+.productNameLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  color: var(--color-fg-default);
+  min-width: 0;
+}
+
+.productNameSquare {
+  inline-size: 7px;
+  block-size: 7px;
+  flex: 0 0 auto;
+  background-color: var(--color-logo);
+}
+
+.productNameLabel h1 {
+  font-size: var(--font-size-md);
+}
+
 /* Let wrapper elements such as Next.js <Link> inherit the logo sizing context */
 .productLogo > * {
   display: flex;
@@ -245,8 +273,8 @@
 }
 
 /* === Collapsed header behavior ===
-   Hide product logo entirely so the collapse button can truly center. */
-.container.collapsed .productLogo {
+   Hide product logo + name entirely so the collapse button can truly center. */
+.container.collapsed .productGroup {
   display: none;
 }
 

package/dist/components/table/Table.cjs

@@ -31,7 +31,6 @@ function Table({
   variant = "primary",
   size = "md",
   viewMode,
-  striped,
   fillViewport = false,
   fillViewportBottomOffset = 16,
   containScrolling = true,
@@ -53,6 +52,7 @@ function Table({
   getRowSeverity,
   getContextMenuItems,
   showContextMenuOnHover = true,
+  expandableRows = false,
   onRowClick,
   onRowMouseEnter,
   onRowSelect,
@@ -67,6 +67,18 @@ function Table({
   const tableRootRefWrapper = react.useRef(tableRootRef);
   const hasSelection = Boolean(selectedRows && onRowSelect);
   const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
+  const [expandedRows, setExpandedRows] = react.useState(() => /* @__PURE__ */ new Set());
+  const handleToggleRowExpand = react.useCallback((rowId) => {
+    setExpandedRows((prev) => {
+      const next = new Set(prev);
+      if (next.has(rowId)) {
+        next.delete(rowId);
+      } else {
+        next.add(rowId);
+      }
+      return next;
+    });
+  }, []);
   const paginationOffset = hasPagination ? 72 : 0;
   const { style: viewportFillStyle, maxHeight } = useViewportFill.useViewportFill(internalTableRootRef, {
     bottomOffset: fillViewportBottomOffset + paginationOffset,
@@ -94,7 +106,6 @@ function Table({
       data,
       dataKey,
       columns: visibleColumns,
-      striped,
       selectedRows,
       hasSelection,
       selectionMode,
@@ -103,9 +114,12 @@ function Table({
       getRowSeverity,
       getContextMenuItems,
       showContextMenuOnHover,
+      expandableRows,
+      expandedRows,
       onRowClick,
       onRowMouseEnter,
-      onRowSelect
+      onRowSelect,
+      onToggleRowExpand: handleToggleRowExpand
     }
   );
   const paginationEl = hasPagination ? /* @__PURE__ */ jsxRuntime.jsx(

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, showGoToPage, showPageSize, pageSizeOptions, showHeader, getRowSeverity, getContextMenuItems, showContextMenuOnHover, 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, fillViewport, fillViewportBottomOffset, containScrolling, stickyHeader, tableWidth, tableRootRef, measuringLayout, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, showGoToPage, showPageSize, pageSizeOptions, showHeader, getRowSeverity, getContextMenuItems, showContextMenuOnHover, expandableRows, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
 export type { ColumnItem } from './Table.types';

package/dist/components/table/Table.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMemo, useId, useRef, useCallback } from 'react';
+import { useMemo, useId, useRef, useState, useCallback } from 'react';
 import { Pagination } from '../../components/pagination/Pagination';
 import { SkeletonLoader } from '../../components/skeleton-loader/SkeletonLoader';
 import { useViewportFill } from '../../hooks/useViewportFill';
@@ -25,7 +25,6 @@ function Table({
   variant = "primary",
   size = "md",
   viewMode,
-  striped,
   fillViewport = false,
   fillViewportBottomOffset = 16,
   containScrolling = true,
@@ -47,6 +46,7 @@ function Table({
   getRowSeverity,
   getContextMenuItems,
   showContextMenuOnHover = true,
+  expandableRows = false,
   onRowClick,
   onRowMouseEnter,
   onRowSelect,
@@ -61,6 +61,18 @@ function Table({
   const tableRootRefWrapper = useRef(tableRootRef);
   const hasSelection = Boolean(selectedRows && onRowSelect);
   const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
+  const [expandedRows, setExpandedRows] = useState(() => /* @__PURE__ */ new Set());
+  const handleToggleRowExpand = useCallback((rowId) => {
+    setExpandedRows((prev) => {
+      const next = new Set(prev);
+      if (next.has(rowId)) {
+        next.delete(rowId);
+      } else {
+        next.add(rowId);
+      }
+      return next;
+    });
+  }, []);
   const paginationOffset = hasPagination ? 72 : 0;
   const { style: viewportFillStyle, maxHeight } = useViewportFill(internalTableRootRef, {
     bottomOffset: fillViewportBottomOffset + paginationOffset,
@@ -88,7 +100,6 @@ function Table({
       data,
       dataKey,
       columns: visibleColumns,
-      striped,
       selectedRows,
       hasSelection,
       selectionMode,
@@ -97,9 +108,12 @@ function Table({
       getRowSeverity,
       getContextMenuItems,
       showContextMenuOnHover,
+      expandableRows,
+      expandedRows,
       onRowClick,
       onRowMouseEnter,
-      onRowSelect
+      onRowSelect,
+      onToggleRowExpand: handleToggleRowExpand
     }
   );
   const paginationEl = hasPagination ? /* @__PURE__ */ jsx(