@dbcdk/react-components 0.0.12 → 0.0.14

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

@@ -1,3 +1,5 @@
+/* Table.module.css (updated) */
+
 /* =========================
    Base table
    ========================= */
@@ -11,6 +13,7 @@
   font-size: var(--font-size-sm);
   color: var(--color-fg-default);
   background: var(--color-bg-surface);
+  table-layout: auto;
 }
 
 .tableScroll {
@@ -26,7 +29,7 @@
 
 .table thead {
   position: sticky;
-  inset-block-start: 0;
+  top: 0;
   z-index: 10;
   background-color: var(--color-bg-surface);
 }
@@ -62,7 +65,6 @@
 
   /* Width control */
   min-width: 0;
-  max-width: var(--card-label-width);
 }
 
 /* Small variant: header padding */
@@ -70,28 +72,56 @@
   padding-inline: var(--spacing-md);
 }
 
-/* Sortable header behavior */
-.th.sortable {
+/* Header layout */
+.th > .thInner {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  inline-size: 100%;
+}
+
+/* Actual interactive control for sorting */
+.thButton {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  inline-size: 100%;
+
   cursor: pointer;
   user-select: none;
-  transition:
-    background-color var(--transition-fast) var(--ease-standard),
-    color var(--transition-fast) var(--ease-standard);
+
+  /* make it feel like a button */
+  border-radius: var(--border-radius-default);
+  padding-block: 2px;
+  padding-inline: 2px;
 }
 
-.th.sortable:hover,
-th.sortable:hover {
+.thButton:hover {
   background-color: var(--color-bg-contextual);
 }
 
-.th.sortable:focus-visible,
-th.sortable:focus-visible {
+.thButton:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
 
+.thLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-grow: 1;
+}
+
+.thExtras {
+  margin-inline-start: auto;
+  display: inline-flex;
+  align-items: center;
+}
+
 .inActiveSort {
   color: var(--color-fg-subtle);
+  opacity: 0.4;
 }
 
 .sortIndicator {
@@ -103,17 +133,6 @@ th.sortable:focus-visible {
   block-size: var(--icon-size-sm);
 }
 
-.th > .thInner {
-  display: inline-block;
-}
-
-.th > .thInner > span {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xxs);
-  inline-size: 100%;
-}
-
 /* =========================
    Body + cells
    ========================= */
@@ -150,37 +169,24 @@ th.sortable:focus-visible {
    Selection column
    ========================= */
 
-/*
-  Default (no severity rails):
-  Remove ALL inline padding for selection/checkbox cells in both header + body.
-
-  We deliberately use padding-inline (shorthand) so it reliably beats other
-  padding-inline shorthands (like .table.sm .tBody tr td).
-*/
-
-/* Body selection cells (covers td with .selectionCell even if markup differs) */
 .tBody tr td.selectionCell,
 .table .tBody tr td.selectionCell,
 .table td.selectionCell {
   padding-inline: var(--spacing-xxs);
 }
 
-/* Header selection cells:
-   - covers your .th class
-   - AND real <th> elements that might not have the .th class */
 .table .th.selectionCell,
 .table th.selectionCell,
 th.selectionCell {
-  padding-inline: var(--spacing-xxs);
+  width: 34px !important;
 }
 
-/* Override the .table.sm .tBody tr td padding-inline (must be as-specific or more) */
+/* Override the .table.sm .tBody tr td padding-inline */
 .table.sm .tBody tr td.selectionCell,
 .table.table.sm .tBody tr td.selectionCell {
   padding-inline: var(--spacing-xxs);
 }
 
-/* If severity rails are enabled, reserve a left gutter (still no right padding) */
 .table.severityTable .tBody tr td.selectionCell,
 .table.severityTable td.selectionCell,
 .table.severityTable .th.selectionCell,
@@ -189,7 +195,6 @@ th.selectionCell {
   padding-inline-start: 14px;
 }
 
-/* Ensure severityTable also wins in sm */
 .table.sm.severityTable .tBody tr td.selectionCell,
 .table.table.sm.severityTable .tBody tr td.selectionCell,
 .table.sm.severityTable .th.selectionCell,
@@ -227,8 +232,8 @@ th.selectionCell {
   background-color: var(--color-bg-surface-subtle);
 }
 
-/* Focus ring */
-.table .tbody tr:focus-within {
+/* Focus ring (fix selector: .tBody, not .tbody) */
+.table .tBody tr:focus-within {
   outline: none;
   box-shadow:
     inset 2px 0 0 var(--color-brand),
@@ -272,7 +277,6 @@ th.selectionCell {
   position: relative;
 }
 
-/* Only render the rail when the table actually uses severity rails */
 .table.severityTable .tBody tr.severity td:first-child::before {
   content: '';
   position: absolute;
@@ -288,7 +292,6 @@ th.selectionCell {
   z-index: 0;
 }
 
-/* keep checkbox/content above the rail */
 .table.severityTable .tBody tr.severity td:first-child > * {
   position: relative;
   z-index: 1;

package/dist/components/table/{tanstack.d.ts → TanstackTable.d.ts}

@@ -1,4 +1,4 @@
-import { type ColumnDef } from '@tanstack/react-table';
+import { type ColumnDef, type SortingState } from '@tanstack/react-table';
 import * as React from 'react';
 import { type TableProps, type TableVariant } from './Table';
 import { ViewMode } from '../../hooks/useTableSettings';
@@ -6,19 +6,12 @@ type Filterable<T> = Array<keyof T>;
 export type TanstackTableProps<T extends Record<string, any>> = Omit<TableProps<T>, 'columns' | 'onSortChange' | 'sortById' | 'sortDirection' | 'headerBelowRow' | 'headerExtras' | 'columnStyles' | 'toolbar'> & {
     columns: ReadonlyArray<ColumnDef<T, any>>;
     filterable?: Filterable<T>;
-    onSortingChange?: (sortBy: string | number | symbol | null, direction: 'asc' | 'desc' | null) => void;
-    initialSortBy?: string;
-    initialSortDirection?: 'asc' | 'desc';
+    sorting?: SortingState;
+    manualSorting?: boolean;
+    onSortingChange?: (next: SortingState) => void;
+    optimisticSortingUi?: boolean;
     variant?: TableVariant;
     viewMode?: ViewMode;
-    /**
-     * TanStack-agnostic column visibility input.
-     *
-     * If provided, this list is the single source of truth for which columns are visible.
-     * If not provided (or empty), defaults are derived from ColumnDef meta.hidden.
-     *
-     * NOTE: Passing [] is treated as "unset" and will fall back to defaults.
-     */
     visibleColumnIds?: string[];
 };
 export declare function TanstackTable<T extends Record<string, any>>(props: TanstackTableProps<T>): React.ReactNode;

package/dist/components/table/TanstackTable.js

@@ -0,0 +1,84 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, } from '@tanstack/react-table';
+import * as React from 'react';
+import ColumnResizer from './components/column-resizer/ColumnResizer';
+import { Table } from './Table';
+import { buildColumnVisibilityFromVisibleIds, mapDefsToColumnItems, sortingEqual, getSortPropsFromSorting, buildColumnStyles, columnItemsToIdSet, } from './tanstackTable.utils';
+export function TanstackTable(props) {
+    const { data, dataKey, columns, filterable = [], sorting: controlledSorting, onSortingChange, optimisticSortingUi = true, visibleColumnIds, manualSorting, ...tableProps } = props;
+    const isControlledSorting = controlledSorting != null;
+    const [uiSorting, setUiSorting] = React.useState(controlledSorting !== null && controlledSorting !== void 0 ? controlledSorting : []);
+    React.useEffect(() => {
+        if (!isControlledSorting)
+            return;
+        if (sortingEqual(uiSorting, controlledSorting))
+            return;
+        setUiSorting(controlledSorting);
+    }, [isControlledSorting, controlledSorting, uiSorting]);
+    const columnVisibility = React.useMemo(() => buildColumnVisibilityFromVisibleIds(columns, visibleColumnIds), [columns, visibleColumnIds]);
+    const [columnFilters, setColumnFilters] = React.useState([]);
+    const [columnSizing, setColumnSizing] = React.useState({});
+    const table = useReactTable({
+        data,
+        columns: columns,
+        state: {
+            sorting: uiSorting,
+            columnFilters,
+            columnSizing,
+            columnVisibility,
+        },
+        onSortingChange: updater => {
+            const next = typeof updater === 'function' ? updater(uiSorting) : updater;
+            if (optimisticSortingUi)
+                setUiSorting(next);
+            onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(next);
+        },
+        onColumnFiltersChange: setColumnFilters,
+        onColumnSizingChange: setColumnSizing,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        manualSorting: manualSorting !== null && manualSorting !== void 0 ? manualSorting : false,
+        enableColumnResizing: true,
+        columnResizeMode: 'onChange',
+        defaultColumn: {
+            enableResizing: true,
+            minSize: 80,
+            size: 180,
+            maxSize: 300,
+        },
+    });
+    const columnItems = React.useMemo(() => mapDefsToColumnItems(columns, columnVisibility), [columns, columnVisibility]);
+    const allowedIds = React.useMemo(() => columnItemsToIdSet(columnItems), [columnItems]);
+    const visibleData = table.getRowModel().rows.map(r => r.original);
+    const { sortById, sortDirection } = getSortPropsFromSorting(uiSorting);
+    const columnStyles = React.useMemo(() => {
+        const leafCols = table.getAllLeafColumns();
+        return buildColumnStyles(leafCols, allowedIds, { minWidth: 80, maxWidth: 800 });
+    }, [table, columnSizing, allowedIds]);
+    const handleSortChange = React.useCallback((column, direction) => {
+        // Translate Table's direction -> TanStack SortingState
+        const next = direction == null ? [] : [{ id: column.id, desc: direction === 'desc' }];
+        // Mirror TanStack's onSortingChange behavior
+        if (optimisticSortingUi)
+            setUiSorting(next);
+        onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(next);
+        // If you are doing server-side sorting, you likely also want:
+        // table.resetPageIndex?.() or external pagination reset (depends on your setup)
+    }, [optimisticSortingUi, onSortingChange]);
+    const headerExtras = React.useCallback(({ index }) => {
+        var _a, _b, _c, _d;
+        const headerGroups = table.getHeaderGroups();
+        const leafHeaders = headerGroups.length > 0 ? headerGroups[headerGroups.length - 1].headers : [];
+        const header = leafHeaders[index];
+        if (!header)
+            return null;
+        const canResize = (_c = (_b = (_a = header.column).getCanResize) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : false;
+        const handler = (_d = header.getResizeHandler) === null || _d === void 0 ? void 0 : _d.call(header);
+        if (!canResize || !handler)
+            return null;
+        return _jsx(ColumnResizer, { id: header.column.id, handler: handler });
+    }, [table]);
+    return (_jsx(Table, { ...tableProps, onSortChange: handleSortChange, dataKey: dataKey, data: visibleData, columns: columnItems, sortById: sortById, sortDirection: sortDirection, columnStyles: columnStyles, headerExtras: headerExtras }));
+}

package/dist/components/table/components/column-resizer/ColumnResizer.js

@@ -1,5 +1,5 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import styles from './ColumnResizer.module.css';
-const ColumnResizer = ({ id, handler }) => (_jsx("span", { className: styles.resizer, onMouseDown: handler, onTouchStart: handler, role: "separator", "aria-label": `Resize ${id}` }));
+const ColumnResizer = ({ id, handler }) => (_jsx("span", { className: styles.resizer, "data-resizer": "true", onMouseDown: handler, onTouchStart: handler, role: "separator", "aria-orientation": "vertical", "aria-label": `Resize ${id}` }));
 export default ColumnResizer;

package/dist/components/table/components/column-resizer/ColumnResizer.module.css

@@ -1,13 +1,23 @@
 .resizer {
-  display: inline-block;
-  width: 1px;
-  background-color: var(--opac-bg-default);
-  height: 60%;
   position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
+  right: -6px; /* extend hit area into both columns */
+  top: 0;
+  height: 100%;
+  width: 12px; /* big invisible hit area */
   cursor: col-resize;
   user-select: none;
   touch-action: none;
+  z-index: 20;
+}
+
+.resizer::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 1px; /* visual thickness */
+  height: 60%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: var(--opac-bg-default);
 }

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

@@ -0,0 +1,17 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { ColumnItem } from './Table';
+export type SortDirection = 'asc' | 'desc' | null;
+export declare function getVisibleColumns<T>(columns: Array<ColumnItem<T>>): Array<ColumnItem<T>>;
+export declare function getColumnStyle(columnId: string, columnStyles: Partial<Record<string, CSSProperties>> | undefined, alignment?: 'left' | 'right' | 'center', verticalAlignment?: 'top' | 'middle' | 'bottom'): CSSProperties;
+export declare function getHeaderLabel(header: string | (() => ReactNode)): ReactNode;
+export declare function isActiveSort(sortById: string | undefined, columnId: string): boolean;
+export declare function getAriaSort(sortable: boolean | undefined, active: boolean, direction: SortDirection): 'ascending' | 'descending' | 'none';
+export declare function getNextSortDirection(sortable: boolean | undefined, active: boolean, currentDirection: SortDirection): SortDirection;
+export declare function shouldToggleOnKey(key: string): boolean;
+export declare function isModifierClick(e: {
+    metaKey?: boolean;
+    ctrlKey?: boolean;
+}): boolean;
+export declare function shouldAllowWrap(columnAllowWrap: boolean | undefined, isRowSelected: boolean, viewMode?: 'wrapped' | string): boolean;
+export declare function getCellDisplayValue<T extends Record<string, any>>(row: T, column: ColumnItem<T>): ReactNode;
+export declare function getRowKey(rowId: string | number): string;

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

@@ -0,0 +1,61 @@
+export function getVisibleColumns(columns) {
+    return columns.filter(c => !c.hidden);
+}
+export function getColumnStyle(columnId, columnStyles, alignment, verticalAlignment) {
+    var _a;
+    const baseStyle = columnStyles === null || columnStyles === void 0 ? void 0 : columnStyles[columnId];
+    return {
+        ...(baseStyle !== null && baseStyle !== void 0 ? baseStyle : {}),
+        ...(alignment === 'right' ? { fontVariantNumeric: 'tabular-nums' } : null),
+        verticalAlign: verticalAlignment !== null && verticalAlignment !== void 0 ? verticalAlignment : 'top',
+        textAlign: alignment !== null && alignment !== void 0 ? alignment : 'left',
+        minWidth: (_a = baseStyle === null || baseStyle === void 0 ? void 0 : baseStyle.minWidth) !== null && _a !== void 0 ? _a : 0,
+    };
+}
+export function getHeaderLabel(header) {
+    return typeof header === 'function' ? header() : header;
+}
+export function isActiveSort(sortById, columnId) {
+    return sortById === columnId;
+}
+export function getAriaSort(sortable, active, direction) {
+    if (!sortable)
+        return 'none';
+    if (!active)
+        return 'none';
+    return direction === 'asc' ? 'ascending' : 'descending';
+}
+export function getNextSortDirection(sortable, active, currentDirection) {
+    if (!sortable)
+        return null;
+    if (!active)
+        return 'asc';
+    if (currentDirection === 'asc')
+        return 'desc';
+    return null;
+}
+export function shouldToggleOnKey(key) {
+    return key === 'Enter' || key === ' ';
+}
+export function isModifierClick(e) {
+    return Boolean(e.metaKey || e.ctrlKey);
+}
+export function shouldAllowWrap(columnAllowWrap, isRowSelected, viewMode) {
+    return Boolean(columnAllowWrap || isRowSelected || viewMode === 'wrapped');
+}
+export function getCellDisplayValue(row, column) {
+    var _a;
+    const empty = (_a = column.emptyPlaceholder) !== null && _a !== void 0 ? _a : '';
+    if (column.render) {
+        const rendered = column.render(row);
+        return rendered || empty;
+    }
+    if (column.accessor) {
+        const value = row[column.accessor];
+        return value || empty;
+    }
+    return null;
+}
+export function getRowKey(rowId) {
+    return `tableRow-${String(rowId)}`;
+}

package/dist/components/table/tanstackTable.utils.d.ts

@@ -0,0 +1,22 @@
+import type { ColumnDef, SortingState, VisibilityState, Column } from '@tanstack/react-table';
+import type { CSSProperties } from 'react';
+import type { ColumnItem } from './Table';
+type AnyRecord = Record<string, any>;
+export declare function getColumnId<T>(def: ColumnDef<T, any>, index: number): string;
+export declare function buildColumnVisibilityFromVisibleIds<T>(defs: ReadonlyArray<ColumnDef<T, any>>, visibleColumnIds?: string[]): VisibilityState;
+export declare function mapDefsToColumnItems<T extends AnyRecord>(defs: ReadonlyArray<ColumnDef<T, any>>, columnVisibility: VisibilityState): ColumnItem<T>[];
+export declare function sortingEqual(a: SortingState, b: SortingState): boolean;
+export declare function getSortPropsFromSorting(sorting: SortingState): {
+    sortById?: string;
+    sortDirection: 'asc' | 'desc' | null;
+};
+/**
+ * Builds `columnStyles` where TanStack is source of truth.
+ * Keep this util pure by passing in the leaf columns and the set of allowed IDs.
+ */
+export declare function buildColumnStyles(leafColumns: Array<Pick<Column<any, any>, 'id' | 'getSize' | 'columnDef'>>, allowedIds: Set<string>, defaults?: {
+    minWidth: number;
+    maxWidth: number;
+}): Record<string, CSSProperties>;
+export declare function columnItemsToIdSet<T>(items: Array<ColumnItem<T>>): Set<string>;
+export {};

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

@@ -0,0 +1,104 @@
+export function getColumnId(def, index) {
+    const d = def;
+    if (d.id != null && String(d.id).length)
+        return String(d.id);
+    if (d.accessorKey != null && String(d.accessorKey).length)
+        return String(d.accessorKey);
+    return `col_${index}`;
+}
+export function buildColumnVisibilityFromVisibleIds(defs, visibleColumnIds) {
+    if (!(visibleColumnIds === null || visibleColumnIds === void 0 ? void 0 : visibleColumnIds.length))
+        return {};
+    const visible = new Set(visibleColumnIds);
+    const next = {};
+    defs.forEach((def, index) => {
+        const id = getColumnId(def, index);
+        next[id] = visible.has(id);
+    });
+    return next;
+}
+export function mapDefsToColumnItems(defs, columnVisibility) {
+    return defs.map((def, index) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        const id = getColumnId(def, index);
+        const accessorKey = def.accessorKey;
+        const accessorFn = def.accessorFn;
+        const cell = def.cell;
+        let render;
+        if (typeof cell === 'function') {
+            render = (row) => cell({
+                row: { original: row },
+                getValue: () => accessorKey != null
+                    ? row[accessorKey]
+                    : accessorFn
+                        ? accessorFn(row)
+                        : undefined,
+            });
+        }
+        else if (accessorFn) {
+            render = (row) => accessorFn(row);
+        }
+        else if (accessorKey != null) {
+            render = (row) => row[accessorKey];
+        }
+        else {
+            render = () => null;
+        }
+        const isVisible = (_a = columnVisibility[id]) !== null && _a !== void 0 ? _a : true;
+        return {
+            id,
+            header: def.header,
+            accessor: accessorKey,
+            sortable: (_b = def.enableSorting) !== null && _b !== void 0 ? _b : !!accessorKey,
+            render,
+            hidden: !isVisible,
+            align: (_d = (_c = def.meta) === null || _c === void 0 ? void 0 : _c.align) !== null && _d !== void 0 ? _d : undefined,
+            verticalAlign: (_f = (_e = def.meta) === null || _e === void 0 ? void 0 : _e.verticalAlign) !== null && _f !== void 0 ? _f : undefined,
+            emptyPlaceholder: (_h = (_g = def.meta) === null || _g === void 0 ? void 0 : _g.emptyPlaceholder) !== null && _h !== void 0 ? _h : '-',
+            allowWrap: (_k = (_j = def.meta) === null || _j === void 0 ? void 0 : _j.allowWrap) !== null && _k !== void 0 ? _k : false,
+            severity: (_m = (_l = def.meta) === null || _l === void 0 ? void 0 : _l.severity) !== null && _m !== void 0 ? _m : undefined,
+        };
+    });
+}
+export function sortingEqual(a, b) {
+    const A = a === null || a === void 0 ? void 0 : a[0];
+    const B = b === null || b === void 0 ? void 0 : b[0];
+    if (!A && !B)
+        return true;
+    if (!A || !B)
+        return false;
+    return A.id === B.id && A.desc === B.desc;
+}
+export function getSortPropsFromSorting(sorting) {
+    const s = sorting === null || sorting === void 0 ? void 0 : sorting[0];
+    return {
+        sortById: s === null || s === void 0 ? void 0 : s.id,
+        sortDirection: s ? (s.desc ? 'desc' : 'asc') : null,
+    };
+}
+/**
+ * Builds `columnStyles` where TanStack is source of truth.
+ * Keep this util pure by passing in the leaf columns and the set of allowed IDs.
+ */
+export function buildColumnStyles(leafColumns, allowedIds, defaults = { minWidth: 80, maxWidth: 800 }) {
+    var _a, _b;
+    const styles = {};
+    for (const c of leafColumns) {
+        const id = c.id;
+        if (!allowedIds.has(id))
+            continue;
+        const anyDef = c.columnDef;
+        styles[id] = {
+            width: c.getSize(),
+            minWidth: (_a = anyDef.minSize) !== null && _a !== void 0 ? _a : defaults.minWidth,
+            maxWidth: (_b = anyDef.maxSize) !== null && _b !== void 0 ? _b : defaults.maxWidth,
+        };
+    }
+    return styles;
+}
+export function columnItemsToIdSet(items) {
+    const s = new Set();
+    for (const c of items)
+        s.add(c.id);
+    return s;
+}

package/dist/components/tabs/Tabs.d.ts

@@ -1,22 +1,45 @@
-import React from 'react';
+import type { JSX, ReactNode } from 'react';
+export type TabId = string | number;
 export type TabItem = {
     header: string;
-    id: string | number;
-    headerIcon?: React.ReactNode;
-    content: React.ReactNode;
+    id: TabId;
+    headerIcon?: ReactNode;
+    content: ReactNode;
     disabled?: boolean;
     hidden?: boolean;
     badge?: number;
 };
-interface TabsProps {
+type TabsVariant = 'filled' | 'outlined';
+export interface TabsProps {
     header?: string;
-    variant: 'filled' | 'outlined';
+    variant: TabsVariant;
     panelStyle?: boolean;
-    tabs: TabItem[];
-    activeId?: number | string;
-    onTabChange?: (index: number, tabItem: TabItem) => void;
-    manuallySetActiveTab?: boolean;
-    addition?: React.ReactNode;
+    /** Data-driven API */
+    tabs?: TabItem[];
+    /** Controlled */
+    value?: TabId;
+    /** Uncontrolled initial */
+    defaultValue?: TabId;
+    onValueChange?: (id: TabId, tab: TabItem, index: number) => void;
+    addition?: ReactNode;
+    /** Composition API */
+    children?: ReactNode;
+}
+export interface TabsItemProps {
+    id: TabId;
+    header: string;
+    headerIcon?: ReactNode;
+    disabled?: boolean;
+    hidden?: boolean;
+    badge?: number;
+    children?: ReactNode;
+}
+type SlotName = 'Item';
+type TabsItemComponent = ((props: TabsItemProps) => JSX.Element) & {
+    __TABS_SLOT__?: SlotName;
+};
+export declare function Tabs({ header, variant, panelStyle, tabs, value, defaultValue, onValueChange, addition, children, }: TabsProps): JSX.Element;
+export declare namespace Tabs {
+    var Item: TabsItemComponent;
 }
-export declare function Tabs({ variant, header, tabs, activeId, onTabChange, manuallySetActiveTab, addition, panelStyle, }: TabsProps): React.ReactNode;
 export {};