@dbcdk/react-components 0.0.5 → 0.0.7

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

@@ -1,3 +1,4 @@
+import type { ReactNode, JSX } from 'react';
 export type TableEmptyConfig = {
     /**
      * Whether to show the empty state at all.
@@ -7,13 +8,13 @@ export type TableEmptyConfig = {
     /**
      * Title + description text (defaults are your current Danish copy)
      */
-    title?: React.ReactNode;
-    description?: React.ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
     /**
      * Optional custom actions area. If provided, it will be rendered first.
      * Useful for passing your own buttons/links/etc.
      */
-    actions?: React.ReactNode;
+    actions?: ReactNode;
     /**
      * Convenience callbacks for built-in default buttons.
      * If provided, the corresponding button is shown (unless hidden via showBack/showRefresh).
@@ -28,8 +29,8 @@ export type TableEmptyConfig = {
     /**
      * Override default labels for default buttons
      */
-    backLabel?: React.ReactNode;
-    refreshLabel?: React.ReactNode;
+    backLabel?: ReactNode;
+    refreshLabel?: ReactNode;
     /**
      * Wrapper className for layout styling
      */

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

@@ -1,46 +1,27 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+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';
-import { SearchX, RefreshCw, ArrowLeft } from 'lucide-react';
-import styles from './EmptyState.module.css';
-
 const defaultEmptyConfig = {
-  enabled: true,
-  title: /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 3, children: "Hov, der er ingen data" }),
-  description: /* @__PURE__ */ jsx("span", { children: "Pr\xF8v at \xE6ndre dine filtre eller tilf\xF8je data." }),
-  showBack: true,
-  showRefresh: true,
-  backLabel: /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ArrowLeft, {}),
-    "Tilbage"
-  ] }),
-  refreshLabel: /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(RefreshCw, {}),
-    "Indl\xE6s igen"
-  ] }),
-  className: "dbc-flex dbc-flex-column dbc-justify-center dbc-items-center dbc-flex-grow "
+    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 ',
 };
-function TableEmptyState({ config }) {
-  const merged = {
-    ...defaultEmptyConfig,
-    ...config != null ? 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 /* @__PURE__ */ jsxs("div", { className: `${merged.className} ${styles.container}`, children: [
-    /* @__PURE__ */ jsxs("span", { className: "dbc-flex dbc-flex-column dbc-gap-sm dbc-items-center", children: [
-      /* @__PURE__ */ jsx(SearchX, { className: styles.icon }),
-      merged.title,
-      merged.description
-    ] }),
-    hasAnyActions && /* @__PURE__ */ jsxs("div", { className: "dbc-flex dbc-gap-sm", children: [
-      merged.actions,
-      showBack && /* @__PURE__ */ jsx(Button, { onClick: merged.onBack, className: "dbc-mr-xxs", children: merged.backLabel }),
-      showRefresh && /* @__PURE__ */ jsx(Button, { onClick: merged.onRefresh, children: merged.refreshLabel })
-    ] })
-  ] });
+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 })] }))] }));
 }
-
-export { TableEmptyState };

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

@@ -1,7 +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): React.ReactNode | JSX.Element;
+export declare function TableSettings({ viewMode, handleChangeViewMode }: TableSettingsProps): JSX.Element;
 export {};

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

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

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
 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>;

package/dist/components/table/tanstack.js

@@ -1,168 +1,162 @@
-import { jsx } from 'react/jsx-runtime';
+'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 { useReactTable, getFilteredRowModel, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
-import { Table } from './Table';
 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}`;
+    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, _i, _j, _k, _l, _m, _n, _o, _p, _q;
-    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) : void 0
-      });
-    } 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 : !!accessorKey,
-      render,
-      hidden: (_c = (_b = def.meta) == null ? void 0 : _b.hidden) != null ? _c : false,
-      align: (_e = (_d = def.meta) == null ? void 0 : _d.align) != null ? _e : void 0,
-      verticalAlign: (_g = (_f = def.meta) == null ? void 0 : _f.verticalAlign) != null ? _g : void 0,
-      fitContent: (_i = (_h = def.meta) == null ? void 0 : _h.fitContent) != null ? _i : false,
-      emptyPlaceholder: (_k = (_j = def.meta) == null ? void 0 : _j.emptyPlaceholder) != null ? _k : "-",
-      allowWrap: (_m = (_l = def.meta) == null ? void 0 : _l.allowWrap) != null ? _m : false,
-      fillWidth: (_o = (_n = def.meta) == null ? void 0 : _n.fillWidth) != null ? _o : false,
-      severity: (_q = (_p = def.meta) == null ? void 0 : _p.severity) != null ? _q : void 0
-    };
-  });
+    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,
+        };
+    });
 }
-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,
-    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, data]
-  );
-  const s = (_a = table.getState().sorting) == null ? void 0 : _a[0];
-  const sortById = (_b = s == null ? void 0 : s.id) != null ? _b : void 0;
-  const sortDirection = s ? s.desc ? "desc" : "asc" : null;
-  const gridTemplateColumns = React.useMemo(() => {
-    return columnItems.filter((ci) => !ci.hidden).map((ci) => {
-      var _a2;
-      const col = table.getColumn(ci.id);
-      const w = (_a2 = col == null ? void 0 : col.getSize) == null ? void 0 : _a2.call(col);
-      if (ci.fillWidth) return "1fr";
-      if (ci.fitContent) return "1%";
-      return `${w != null ? w : 180}px`;
-    }).join(" ");
-  }, [columnItems, table, table.getState().columnSizing]);
-  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 ? void 0 : ci.fillWidth) {
-        styles[id] = { width: "auto", minWidth: 0 };
-      } else if (ci == null ? 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, table.getState().columnSizing, columnItems]);
-  const headerExtras = React.useCallback(
-    ({ index }) => {
-      var _a2, _b2, _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 = (_b2 = (_a2 = header.column).getCanResize) == null ? void 0 : _b2.call(_a2)) != null ? _c : false;
-      const handler = (_d = header.getResizeHandler) == null ? void 0 : _d.call(header);
-      if (!canResize || !handler) return null;
-      return /* @__PURE__ */ jsx(ColumnResizer, { id: header.column.id, handler });
-    },
-    [table]
-  );
-  const headerBelowRow = React.useMemo(() => {
-    if (!(filterable == null ? void 0 : filterable.length)) return null;
-    return /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns, gap: 8 }, children: columnItems.filter((ci) => !ci.hidden).map((ci) => {
-      var _a2;
-      const id = ci.id;
-      const isFilterable = filterable.includes(id);
-      if (!isFilterable) return /* @__PURE__ */ jsx("div", {}, id);
-      const col = table.getColumn(id);
-      const value = (_a2 = col == null ? void 0 : col.getFilterValue()) != null ? _a2 : "";
-      return /* @__PURE__ */ jsx(
-        "input",
-        {
-          value,
-          placeholder: `Filter ${String(ci.header)}`,
-          onChange: (e) => col == null ? void 0 : col.setFilterValue(e.target.value),
-          style: { width: "100%", padding: "4px 6px" }
+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,
         },
-        id
-      );
-    }) });
-  }, [columnItems, filterable, table, table.getState().columnFilters, gridTemplateColumns]);
-  return /* @__PURE__ */ jsx(
-    Table,
-    {
-      ...tableProps,
-      dataKey,
-      data: visibleData,
-      columns: columnItems,
-      sortById,
-      sortDirection,
-      onSortChange: (col, dir) => {
-        var _a2, _b2, _c;
-        const id = String(col.id);
-        if (!id) return;
-        if (!dir) table.setSorting([]);
-        else table.setSorting([{ id, desc: dir === "desc" }]);
-        onSortingChange == null ? void 0 : onSortingChange((_c = (_b2 = (_a2 = table.getState().sorting) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.id) != null ? _c : null, dir);
-      },
-      headerExtras,
-      columnStyles,
-      headerBelowRow
-    }
-  );
+    });
+    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 }));
 }
-
-export { TanstackTable };

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

@@ -1,3 +1,4 @@
+import React from 'react';
 export type TabItem = {
     header: string;
     id: string | number;

package/dist/components/tabs/Tabs.js

@@ -1,84 +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 { Headline } from '../headline/Headline';
 import { Chip } from '../chip/Chip';
-
-function Tabs({
-  variant,
-  header,
-  tabs,
-  activeId,
-  onTabChange,
-  manuallySetActiveTab,
-  addition,
-  panelStyle
-}) {
-  var _a;
-  const [currentId, setCurrentId] = useState(activeId);
-  useEffect(() => {
-    if (activeId !== void 0) {
-      setCurrentId(activeId);
-    }
-  }, [activeId]);
-  const setActiveTab = useCallback(
-    (id) => {
-      setCurrentId(id);
-    },
-    [setCurrentId]
-  );
-  const handleTabChange = useCallback(
-    (index, tab) => {
-      if (!manuallySetActiveTab) {
-        setActiveTab(tab.id);
-      }
-      onTabChange == null ? void 0 : onTabChange(index, tab);
-    },
-    [onTabChange, manuallySetActiveTab, setActiveTab]
-  );
-  const filteredTabs = useMemo(() => tabs.filter((tab) => !tab.hidden), [tabs]);
-  const activeIndex = useMemo(() => {
-    var _a2, _b;
-    return (_b = filteredTabs.findIndex((tab) => tab.id === currentId)) != null ? _b : (_a2 = filteredTabs[0]) == null ? void 0 : _a2.id;
-  }, [currentId, filteredTabs]);
-  useEffect(() => {
-    if (activeIndex === -1 && filteredTabs.length > 0) {
-      setActiveTab(filteredTabs[0].id);
-    }
-  }, [activeIndex, filteredTabs, setActiveTab]);
-  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} ${activeIndex === index ? styles.active : ""}`,
-          children: /* @__PURE__ */ jsxs(
-            "button",
-            {
-              className: `${styles.tabButton}`,
-              onClick: () => handleTabChange(index, tab),
-              disabled: tab.disabled,
-              children: [
-                /* @__PURE__ */ jsx("span", { className: styles.icon, children: tab.headerIcon }),
-                /* @__PURE__ */ jsx("span", { className: styles.header, children: tab.header }),
-                tab.badge !== void 0 && tab.badge > 0 && /* @__PURE__ */ jsxs("span", { className: styles.badge, children: [
-                  " ",
-                  /* @__PURE__ */ jsx(Chip, { severity: "info", size: "sm", children: tab.badge.toLocaleString("da-DK") })
-                ] })
-              ]
-            }
-          )
-        },
-        index
-      )) }),
-      /* @__PURE__ */ jsx("div", { className: `${styles.tabContent} scrollable`, children: (_a = filteredTabs[activeIndex]) == null ? void 0 : _a.content })
-    ] })
-  ] });
+import { Headline } from '../headline/Headline';
+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 };

package/dist/components/toast/Toast.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Severity } from '@/constants/severity.types';
+import { Severity } from '../../constants/severity.types';
 export type ToastActionConfig = {
     label: string;
     onClick?: () => void;