@dbcdk/react-components 0.0.4 → 0.0.6

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

@@ -5,33 +5,42 @@
   border-collapse: collapse;
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
-  color: var(--color-text);
-  background: var(--color-surface);
+  color: var(--color-fg-default);
+  background: var(--color-bg-surface);
 }
 
-.table.sm tr td,
-.table.sm th {
-  padding-block: var(--spacing-xxs);
-  padding-inline: var(--spacing-sm);
+.table.sm tr td {
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-md);
   font-size: var(--font-size-xs);
 }
 
+.table.sm th {
+  padding-inline: var(--spacing-md);
+}
+
 .table thead {
   position: sticky;
   inset-block-start: 0;
-  background-color: var(--color-surface);
+  background-color: var(--color-bg-surface);
   z-index: 10;
 }
 
-.table.filled thead th {
-  background-color: var(--color-surface-hover);
+.table.primary thead {
+  box-shadow: var(--shadow-md);
 }
 
 .clickableRow {
   cursor: pointer;
 }
+
+.allowWrap {
+  word-break: break-all !important;
+  overflow-wrap: anywhere !important;
+}
+
 .clickableRow:hover {
-  background-color: var(--color-surface-hover);
+  background-color: var(--color-bg-contextual);
 }
 
 .selectedRow {
@@ -41,20 +50,28 @@
   background-color: var(--color-bg-selected-hover);
 }
 
-.th,
-th {
-  color: var(--color-text-secondary);
+.nowrap {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.table .th {
+  color: var(--color-fg-muted);
+  font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
   position: relative;
   padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-sm);
+  padding-inline: var(--spacing-md);
   text-align: start;
   background: inherit;
-  border-block-end: var(--border-width-thin) solid var(--color-border);
+  white-space: nowrap;
+  min-width: unset;
+  max-width: unset;
+  vertical-align: middle;
 }
 
-.th.sortable,
-th.sortable {
+.th.sortable {
   cursor: pointer;
   user-select: none;
   transition:
@@ -63,7 +80,7 @@ th.sortable {
 }
 .th.sortable:hover,
 th.sortable:hover {
-  background-color: var(--color-surface-hover);
+  background-color: var(--color-bg-contextual);
 }
 .th.sortable:focus-visible,
 th.sortable:focus-visible {
@@ -71,9 +88,16 @@ th.sortable:focus-visible {
   box-shadow: var(--focus-ring);
 }
 
+.inActiveSort {
+  color: var(--color-fg-subtle);
+}
+
+.sortIndicator {
+  display: flex;
+}
 .sortIndicator svg {
-  inline-size: var(--icon-size);
-  block-size: var(--icon-size);
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
 }
 
 .th > .thInner {
@@ -86,57 +110,64 @@ th.sortable:focus-visible {
   inline-size: 100%;
 }
 
+.tBody::before {
+  content: '';
+  height: var(--spacing-xs);
+  display: block;
+}
+
 .tBody tr td,
-tbody tr td {
+.tbody tr td {
   position: relative;
   padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-sm);
-  border-block-end: var(--border-width-thin) solid var(--color-border);
+  border-block-end: var(--border-width-thin) solid var(--color-border-default);
   text-align: start;
   vertical-align: top;
+  overflow-wrap: break-word;
+  word-break: normal;
+}
+
+.tBody tr.severity {
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: left top;
+  background-image: linear-gradient(to right, var(--row-severity-color) 0 3px, transparent 3px);
 }
 
-.striped tr:nth-child(even) {
-  background-color: var(--color-surface-hover);
+.striped tr:nth-child(even):not(.selectedRow):not(:hover) {
+  background-color: var(--color-bg-surface-subtle);
 }
 
 .td--numeric {
   text-align: end;
 }
 .td--muted {
-  color: var(--color-text-muted);
+  color: var(--color-fg-muted);
+}
+
+.td .error {
+  color: var(--color-danger);
 }
 .tr--hover:hover {
-  background-color: var(--color-surface-hover);
+  background-color: var(--color-bg-contextual);
 }
 
-/* focus ring across the entire row, above sticky header and row backgrounds */
-tr:focus-within {
+.table .tbody tr:focus-within {
   outline: none;
   box-shadow: none;
 }
-tr:focus-within td::after {
-  content: '';
-  position: absolute;
-  inset-block-start: -2px;
-  inset-block-end: -2px;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  border-block-start: 2px solid var(--color-primary);
-  border-block-end: 2px solid var(--color-primary);
-  pointer-events: none;
-  z-index: 11;
-}
-tr:focus-within td:first-child::after {
-  inset-inline-start: -2px;
-  border-inline-start: 2px solid var(--color-primary);
-}
-tr:focus-within td:last-child::after {
-  inset-inline-end: -2px;
-  border-inline-end: 2px solid var(--color-primary);
+.table .tbody tr:focus-within {
+  outline: none;
+  box-shadow:
+    inset 2px 0 0 var(--color-brand),
+    inset -2px 0 0 var(--color-brand),
+    inset 0 2px 0 var(--color-brand),
+    inset 0 -2px 0 var(--color-brand);
 }
 
 .tableScroll {
+  position: relative;
   overflow: auto;
   max-inline-size: 100%;
   -webkit-overflow-scrolling: touch;

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

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

package/dist/components/table/components/empty-state/EmptyState.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode, JSX } from 'react';
+export type TableEmptyConfig = {
+    /**
+     * Whether to show the empty state at all.
+     * Default: true
+     */
+    enabled?: boolean;
+    /**
+     * Title + description text (defaults are your current Danish copy)
+     */
+    title?: ReactNode;
+    description?: ReactNode;
+    /**
+     * Optional custom actions area. If provided, it will be rendered first.
+     * Useful for passing your own buttons/links/etc.
+     */
+    actions?: ReactNode;
+    /**
+     * Convenience callbacks for built-in default buttons.
+     * If provided, the corresponding button is shown (unless hidden via showBack/showRefresh).
+     */
+    onBack?: () => void;
+    onRefresh?: () => void;
+    /**
+     * Control default buttons
+     */
+    showBack?: boolean;
+    showRefresh?: boolean;
+    /**
+     * Override default labels for default buttons
+     */
+    backLabel?: ReactNode;
+    refreshLabel?: ReactNode;
+    /**
+     * Wrapper className for layout styling
+     */
+    className?: string;
+};
+export declare function TableEmptyState({ config }: {
+    config?: TableEmptyConfig;
+}): JSX.Element | null;

package/dist/components/table/components/empty-state/EmptyState.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeft, RefreshCw, SearchX } from 'lucide-react';
+import styles from './EmptyState.module.css';
+import { Button } from '../../../button/Button';
+import { Headline } from '../../../headline/Headline';
+const defaultEmptyConfig = {
+    enabled: true,
+    title: (_jsx(Headline, { disableMargin: true, size: 3, children: "Hov, der er ingen data" })),
+    description: _jsx("span", { children: "Pr\u00F8v at \u00E6ndre dine filtre eller tilf\u00F8je data." }),
+    showBack: true,
+    showRefresh: true,
+    backLabel: (_jsxs(_Fragment, { children: [_jsx(ArrowLeft, {}), "Tilbage"] })),
+    refreshLabel: (_jsxs(_Fragment, { children: [_jsx(RefreshCw, {}), "Indl\u00E6s igen"] })),
+    className: 'dbc-flex dbc-flex-column dbc-justify-center dbc-items-center dbc-flex-grow ',
+};
+export function TableEmptyState({ config }) {
+    const merged = {
+        ...defaultEmptyConfig,
+        ...(config !== null && config !== void 0 ? config : {}),
+    };
+    if (!merged.enabled)
+        return null;
+    const showBack = merged.showBack && typeof merged.onBack === 'function';
+    const showRefresh = merged.showRefresh && typeof merged.onRefresh === 'function';
+    const hasAnyActions = Boolean(merged.actions) || showBack || showRefresh;
+    return (_jsxs("div", { className: `${merged.className} ${styles.container}`, children: [_jsxs("span", { className: "dbc-flex dbc-flex-column dbc-gap-sm dbc-items-center", children: [_jsx(SearchX, { className: styles.icon }), merged.title, merged.description] }), hasAnyActions && (_jsxs("div", { className: "dbc-flex dbc-gap-sm", children: [merged.actions, showBack && (_jsx(Button, { onClick: merged.onBack, className: "dbc-mr-xxs", children: merged.backLabel })), showRefresh && _jsx(Button, { onClick: merged.onRefresh, children: merged.refreshLabel })] }))] }));
+}

package/dist/components/table/components/empty-state/EmptyState.module.css

@@ -0,0 +1,16 @@
+.container {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(clamp(-32px, -6vh, -12px));
+  padding-top: 56px;
+  box-sizing: border-box;
+}
+
+.icon {
+  inline-size: var(--component-size-lg);
+  block-size: var(--component-size-lg);
+  color: var(--color-fg-muted);
+}

package/dist/components/table/components/table-settings/TableSettings.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+import { ViewMode } from '../../../../hooks/useTableSettings';
+interface TableSettingsProps {
+    handleChangeViewMode: (mode: ViewMode) => void;
+    viewMode: ViewMode;
+}
+export declare function TableSettings({ viewMode, handleChangeViewMode }: TableSettingsProps): JSX.Element;
+export {};

package/dist/components/table/components/table-settings/TableSettings.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ListChevronsDownUp, Settings } from 'lucide-react';
+import { Button } from '../../../button/Button';
+import { Menu } from '../../../menu/Menu';
+import { Popover } from '../../../popover/Popover';
+export function TableSettings({ viewMode, handleChangeViewMode }) {
+    const handleViewModeChange = (mode, close) => {
+        handleChangeViewMode(mode === 'compact' ? 'compact' : 'comfortable');
+        close === null || close === void 0 ? void 0 : close();
+    };
+    return (_jsx(Popover, { trigger: (onClick, icon) => (_jsxs(Button, { onClick: onClick, children: [_jsx(Settings, {}), icon] })), children: close => (_jsx(Menu, { children: _jsx(Menu.Item, { active: viewMode === 'compact', children: _jsxs("button", { type: "button", onClick: () => handleViewModeChange('compact', close), children: [_jsx(ListChevronsDownUp, {}), "Kompakt"] }) }) })) }));
+}

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

@@ -0,0 +1,14 @@
+import { type ColumnDef } from '@tanstack/react-table';
+import * as React from 'react';
+import { type TableProps, type TableVariant } from './Table';
+import { ViewMode } from '../../hooks/useTableSettings';
+type Filterable<T> = Array<keyof T>;
+export type TanstackTableProps<T extends Record<string, any>> = Omit<TableProps<T>, 'columns' | 'onSortChange' | 'sortById' | 'sortDirection' | 'headerBelowRow' | 'headerExtras' | 'columnStyles'> & {
+    columns: ReadonlyArray<ColumnDef<T, any>>;
+    filterable?: Filterable<T>;
+    onSortingChange?: (sortBy: string | number | symbol | null, direction: 'asc' | 'desc' | null) => void;
+    variant?: TableVariant;
+    viewMode?: ViewMode;
+};
+export declare function TanstackTable<T extends Record<string, any>>(props: TanstackTableProps<T>): React.ReactNode;
+export {};

package/dist/components/table/tanstack.js

@@ -0,0 +1,162 @@
+'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';
+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}`;
+}
+function mapDefsToColumnItems(defs) {
+    return defs.map((def, index) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        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;
+        }
+        return {
+            id,
+            header: def.header,
+            accessor: accessorKey,
+            sortable: (_a = def.enableSorting) !== null && _a !== void 0 ? _a : !!accessorKey,
+            render,
+            hidden: (_c = (_b = def.meta) === null || _b === void 0 ? void 0 : _b.hidden) !== null && _c !== void 0 ? _c : false,
+            align: (_e = (_d = def.meta) === null || _d === void 0 ? void 0 : _d.align) !== null && _e !== void 0 ? _e : undefined,
+            verticalAlign: (_g = (_f = def.meta) === null || _f === void 0 ? void 0 : _f.verticalAlign) !== null && _g !== void 0 ? _g : undefined,
+            fitContent: (_j = (_h = def.meta) === null || _h === void 0 ? void 0 : _h.fitContent) !== null && _j !== void 0 ? _j : false,
+            emptyPlaceholder: (_l = (_k = def.meta) === null || _k === void 0 ? void 0 : _k.emptyPlaceholder) !== null && _l !== void 0 ? _l : '-',
+            allowWrap: (_o = (_m = def.meta) === null || _m === void 0 ? void 0 : _m.allowWrap) !== null && _o !== void 0 ? _o : false,
+            fillWidth: (_q = (_p = def.meta) === null || _p === void 0 ? void 0 : _p.fillWidth) !== null && _q !== void 0 ? _q : false,
+            severity: (_s = (_r = def.meta) === null || _r === void 0 ? void 0 : _r.severity) !== null && _s !== void 0 ? _s : undefined,
+        };
+    });
+}
+export function TanstackTable(props) {
+    var _a, _b;
+    const { data, dataKey, columns, filterable = [], onSortingChange, ...tableProps } = props;
+    const [sorting, setSorting] = React.useState([]);
+    const [columnFilters, setColumnFilters] = React.useState([]);
+    const [columnSizing, setColumnSizing] = React.useState({});
+    const table = useReactTable({
+        data,
+        columns: columns,
+        state: { sorting, columnFilters, columnSizing },
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        onColumnSizingChange: setColumnSizing,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        enableColumnResizing: true,
+        columnResizeMode: 'onChange',
+        defaultColumn: {
+            enableResizing: true,
+            minSize: 80,
+            size: 180,
+            maxSize: 800,
+        },
+    });
+    const columnItems = React.useMemo(() => mapDefsToColumnItems(columns), [columns]);
+    const visibleData = React.useMemo(() => table.getRowModel().rows.map(r => r.original), [table]);
+    const s = (_a = table.getState().sorting) === null || _a === void 0 ? void 0 : _a[0];
+    const sortById = (_b = s === null || s === void 0 ? void 0 : s.id) !== null && _b !== void 0 ? _b : undefined;
+    const sortDirection = s ? (s.desc ? 'desc' : 'asc') : null;
+    const gridTemplateColumns = React.useMemo(() => {
+        return columnItems
+            .filter(ci => !ci.hidden)
+            .map(ci => {
+            var _a;
+            const col = table.getColumn(ci.id);
+            const w = (_a = col === null || col === void 0 ? void 0 : col.getSize) === null || _a === void 0 ? void 0 : _a.call(col);
+            if (ci.fillWidth)
+                return '1fr';
+            if (ci.fitContent)
+                return '1%';
+            return `${w !== null && w !== void 0 ? w : 180}px`;
+        })
+            .join(' ');
+    }, [columnItems, table]);
+    const columnStyles = React.useMemo(() => {
+        const styles = {};
+        for (const c of table.getAllLeafColumns()) {
+            const id = c.id;
+            const ci = columnItems.find(x => x.id === id);
+            if (ci === null || ci === void 0 ? void 0 : ci.fillWidth) {
+                styles[id] = { width: 'auto', minWidth: 0 };
+            }
+            else if (ci === null || ci === void 0 ? void 0 : ci.fitContent) {
+                styles[id] = { width: '1%', whiteSpace: 'nowrap' };
+            }
+            else {
+                const w = c.getSize();
+                styles[id] = { width: w, minWidth: w, maxWidth: w };
+            }
+        }
+        return styles;
+    }, [table, columnItems]);
+    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]);
+    const headerBelowRow = React.useMemo(() => {
+        if (!(filterable === null || filterable === void 0 ? void 0 : filterable.length))
+            return null;
+        return (_jsx("div", { style: { display: 'grid', gridTemplateColumns, gap: 8 }, children: columnItems
+                .filter(ci => !ci.hidden)
+                .map(ci => {
+                var _a;
+                const id = ci.id;
+                const isFilterable = filterable.includes(id);
+                if (!isFilterable)
+                    return _jsx("div", {}, id);
+                const col = table.getColumn(id);
+                const value = (_a = col === null || col === void 0 ? void 0 : col.getFilterValue()) !== null && _a !== void 0 ? _a : '';
+                return (_jsx("input", { value: value, placeholder: `Filter ${String(ci.header)}`, onChange: e => col === null || col === void 0 ? void 0 : col.setFilterValue(e.target.value), style: { width: '100%', padding: '4px 6px' } }, id));
+            }) }));
+    }, [columnItems, filterable, table, gridTemplateColumns]);
+    return (_jsx(Table, { ...tableProps, dataKey: dataKey, data: visibleData, columns: columnItems, sortById: sortById, sortDirection: sortDirection, onSortChange: (col, dir) => {
+            var _a, _b, _c;
+            const id = String(col.id);
+            if (!id)
+                return;
+            if (!dir)
+                table.setSorting([]);
+            else
+                table.setSorting([{ id, desc: dir === 'desc' }]);
+            onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange((_c = (_b = (_a = table.getState().sorting) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : null, dir);
+        }, headerExtras: headerExtras, columnStyles: columnStyles, headerBelowRow: headerBelowRow }));
+}

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

@@ -1,18 +1,22 @@
+import React from 'react';
 export type TabItem = {
     header: string;
+    id: string | number;
     headerIcon?: React.ReactNode;
     content: React.ReactNode;
     disabled?: boolean;
     hidden?: boolean;
+    badge?: number;
 };
 interface TabsProps {
     header?: string;
     variant: 'filled' | 'outlined';
     panelStyle?: boolean;
     tabs: TabItem[];
-    activeIndex?: number;
-    onTabChange?: (index: number) => void;
+    activeId?: number | string;
+    onTabChange?: (index: number, tabItem: TabItem) => void;
+    manuallySetActiveTab?: boolean;
     addition?: React.ReactNode;
 }
-export declare function Tabs({ variant, header, tabs, activeIndex, onTabChange, addition, panelStyle, }: TabsProps): React.ReactNode;
+export declare function Tabs({ variant, header, tabs, activeId, onTabChange, manuallySetActiveTab, addition, panelStyle, }: TabsProps): React.ReactNode;
 export {};

package/dist/components/tabs/Tabs.js

@@ -1,68 +1,35 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect, useCallback, useMemo } from 'react';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import styles from './Tabs.module.css';
+import { Chip } from '../chip/Chip';
 import { Headline } from '../headline/Headline';
-
-function Tabs({
-  variant,
-  header,
-  tabs,
-  activeIndex = 0,
-  onTabChange,
-  addition,
-  panelStyle
-}) {
-  const [currentIndex, setCurrentIndex] = useState(activeIndex);
-  useEffect(() => {
-    if (activeIndex !== void 0) {
-      setCurrentIndex(activeIndex);
-    }
-  }, [activeIndex]);
-  const setActiveTab = useCallback(
-    (index) => {
-      setCurrentIndex(index);
-    },
-    [setCurrentIndex]
-  );
-  const handleTabChange = useCallback(
-    (index) => {
-      if (!onTabChange) {
-        setActiveTab(index);
-      }
-      onTabChange == null ? void 0 : onTabChange(index);
-    },
-    [onTabChange]
-  );
-  const filteredTabs = useMemo(() => tabs.filter((tab) => !tab.hidden), [tabs]);
-  return /* @__PURE__ */ jsxs("div", { className: "grow-container", children: [
-    header && /* @__PURE__ */ jsxs("div", { className: styles.headerContainer, children: [
-      /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 2, children: header }),
-      addition
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: `${styles.tabs} ${styles[variant]} ${panelStyle ? styles.panelStyle : ""}`, children: [
-      /* @__PURE__ */ jsx("div", { className: styles.tabList, children: filteredTabs.map((tab, index) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          "data-index": index,
-          className: `${styles.tab} ${currentIndex === index ? styles.active : ""}`,
-          children: /* @__PURE__ */ jsxs(
-            "button",
-            {
-              className: `${styles.tabButton}`,
-              onClick: () => handleTabChange(index),
-              disabled: tab.disabled,
-              children: [
-                /* @__PURE__ */ jsx("span", { className: styles.icon, children: tab.headerIcon }),
-                /* @__PURE__ */ jsx("span", { className: styles.header, children: tab.header })
-              ]
-            }
-          )
-        },
-        index
-      )) }),
-      /* @__PURE__ */ jsx("div", { className: `${styles.tabContent} scrollable`, children: tabs[currentIndex].content })
-    ] })
-  ] });
+export function Tabs({ variant, header, tabs, activeId, onTabChange, manuallySetActiveTab, addition, panelStyle, }) {
+    var _a;
+    const [currentId, setCurrentId] = useState(activeId);
+    useEffect(() => {
+        if (activeId !== undefined) {
+            setCurrentId(activeId);
+        }
+    }, [activeId]);
+    const setActiveTab = useCallback((id) => {
+        setCurrentId(id);
+    }, [setCurrentId]);
+    const handleTabChange = useCallback((index, tab) => {
+        if (!manuallySetActiveTab) {
+            setActiveTab(tab.id);
+        }
+        onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(index, tab);
+    }, [onTabChange, manuallySetActiveTab, setActiveTab]);
+    const filteredTabs = useMemo(() => tabs.filter(tab => !tab.hidden), [tabs]);
+    const activeIndex = useMemo(() => {
+        var _a, _b;
+        return (_a = filteredTabs.findIndex(tab => tab.id === currentId)) !== null && _a !== void 0 ? _a : (_b = filteredTabs[0]) === null || _b === void 0 ? void 0 : _b.id;
+    }, [currentId, filteredTabs]);
+    useEffect(() => {
+        if (activeIndex === -1 && filteredTabs.length > 0) {
+            setActiveTab(filteredTabs[0].id);
+        }
+    }, [activeIndex, filteredTabs, setActiveTab]);
+    return (_jsxs("div", { className: "grow-container", children: [header && (_jsxs("div", { className: styles.headerContainer, children: [_jsx(Headline, { disableMargin: true, size: 2, children: header }), addition] })), _jsxs("div", { className: `${styles.tabs} ${styles[variant]} ${panelStyle ? styles.panelStyle : ''}`, children: [_jsx("div", { className: styles.tabList, children: filteredTabs.map((tab, index) => (_jsx("div", { "data-index": index, className: `${styles.tab} ${activeIndex === index ? styles.active : ''}`, children: _jsxs("button", { className: `${styles.tabButton}`, onClick: () => handleTabChange(index, tab), disabled: tab.disabled, children: [_jsx("span", { className: styles.icon, children: tab.headerIcon }), _jsx("span", { className: styles.header, children: tab.header }), tab.badge !== undefined && tab.badge > 0 && (_jsxs("span", { className: styles.badge, children: [' ', _jsx(Chip, { severity: "info", size: "sm", children: tab.badge.toLocaleString('da-DK') })] }))] }) }, index))) }), _jsx("div", { className: `${styles.tabContent} scrollable`, children: (_a = filteredTabs[activeIndex]) === null || _a === void 0 ? void 0 : _a.content })] })] }));
 }
-
-export { Tabs };