@dbcdk/react-components 0.0.169 → 0.0.170

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

@@ -0,0 +1,29 @@
+import type { ColumnDef, ColumnSizingState, SortingState, VisibilityState } from '@tanstack/react-table';
+import { ColumnItem } from './Table.types';
+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, resolvedLayout?: Record<string, {
+    width?: number | string;
+}>): ColumnItem<T>[];
+export declare function sortingEqual(a: SortingState, b: SortingState): boolean;
+export declare function getSortPropsFromSorting(sorting: SortingState): {
+    sortById?: string;
+    sortDirection: 'asc' | 'desc' | null;
+};
+export declare function buildDistributedColumnWidths(args: {
+    table: any;
+    hasSelection: boolean;
+    hasContextMenu?: boolean;
+    defaultMinPx: number;
+    columnSizing: ColumnSizingState;
+    availableWidth: number;
+}): {
+    selectionWidth?: number;
+    contextMenuWidth?: number;
+    widths: Record<string, number>;
+    totalWidth: number;
+    availableWidth: number;
+    shouldOverflow: boolean;
+};
+export {};

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

@@ -0,0 +1,174 @@
+import { DEFAULT_COLUMN_PX, SELECTION_COLUMN_PX } from './table.utils';
+
+function getColumnId(def, index) {
+  const d = def;
+  if (d.id != null && String(d.id).length > 0) return String(d.id);
+  if (d.accessorKey != null && String(d.accessorKey).length > 0) return String(d.accessorKey);
+  return `col_${index}`;
+}
+function buildColumnVisibilityFromVisibleIds(defs, visibleColumnIds) {
+  if (!(visibleColumnIds == null ? 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;
+}
+function mapDefsToColumnItems(defs, columnVisibility, resolvedLayout = {}) {
+  return defs.map((def, index) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const id = getColumnId(def, index);
+    const accessorKey = def.accessorKey;
+    const accessorFn = def.accessorFn;
+    const cell = def.cell;
+    const meta = (_a = def.meta) != null ? _a : {};
+    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;
+    }
+    const isVisible = (_b = columnVisibility[id]) != null ? _b : true;
+    return {
+      id,
+      header: def.header,
+      accessor: accessorKey,
+      sortable: (_c = def.enableSorting) != null ? _c : !!accessorKey,
+      render,
+      hidden: !isVisible,
+      width: (_d = resolvedLayout[id]) == null ? void 0 : _d.width,
+      align: meta.align,
+      verticalAlign: meta.verticalAlign,
+      emptyPlaceholder: (_e = meta.emptyPlaceholder) != null ? _e : "-",
+      allowWrap: (_f = meta.allowWrap) != null ? _f : false,
+      severity: meta.severity,
+      divider: meta.divider,
+      allowOverflow: (_g = meta.allowOverflow) != null ? _g : false
+    };
+  });
+}
+function sortingEqual(a, b) {
+  const A = a == null ? void 0 : a[0];
+  const B = b == null ? void 0 : b[0];
+  if (!A && !B) return true;
+  if (!A || !B) return false;
+  return A.id === B.id && A.desc === B.desc;
+}
+function getSortPropsFromSorting(sorting) {
+  const s = sorting == null ? void 0 : sorting[0];
+  return {
+    sortById: s == null ? void 0 : s.id,
+    sortDirection: s ? s.desc ? "desc" : "asc" : null
+  };
+}
+function clamp(value, min, max) {
+  const lowerBounded = Math.max(min, value);
+  if (max == null || !Number.isFinite(max)) return lowerBounded;
+  return Math.min(lowerBounded, max);
+}
+function toIntegerTrackWidths(tracks, targetWidth) {
+  const floored = tracks.map((track) => ({
+    id: track.id,
+    width: Math.floor(track.width),
+    fraction: track.width - Math.floor(track.width)
+  }));
+  const baseTotal = floored.reduce((sum, track) => sum + track.width, 0);
+  let remainder = Math.max(0, targetWidth - baseTotal);
+  floored.slice().sort((a, b) => b.fraction - a.fraction).forEach((track) => {
+    if (remainder <= 0) return;
+    track.width += 1;
+    remainder -= 1;
+  });
+  return Object.fromEntries(floored.map((track) => [track.id, track.width]));
+}
+function buildDistributedColumnWidths(args) {
+  const {
+    table,
+    hasSelection,
+    hasContextMenu = false,
+    defaultMinPx,
+    columnSizing,
+    availableWidth
+  } = args;
+  const leaf = table.getVisibleLeafColumns();
+  const selectionWidth = hasSelection ? SELECTION_COLUMN_PX : 0;
+  const contextMenuWidth = hasContextMenu ? 0 : 0;
+  const tracks = leaf.map((c) => {
+    var _a, _b, _c, _d;
+    const def = c.columnDef;
+    const meta = (_a = def.meta) != null ? _a : {};
+    const min = Math.max(1, Number((_b = def.minSize) != null ? _b : defaultMinPx));
+    const max = def.maxSize != null ? Math.max(min, Number(def.maxSize)) : void 0;
+    const resizedPxRaw = columnSizing[c.id];
+    const resizedPx = resizedPxRaw != null ? Math.round(clamp(Number(resizedPxRaw), min, max)) : void 0;
+    if (resizedPx != null) {
+      return {
+        id: c.id,
+        width: resizedPx,
+        weight: 0,
+        max: resizedPx,
+        fixed: true
+      };
+    }
+    const rawWeight = Number((_d = (_c = meta.weight) != null ? _c : def.size) != null ? _d : DEFAULT_COLUMN_PX);
+    const weight = Number.isFinite(rawWeight) && rawWeight > 0 ? rawWeight : DEFAULT_COLUMN_PX;
+    return {
+      id: c.id,
+      width: min,
+      weight,
+      max,
+      fixed: false
+    };
+  });
+  const fixedWidth = selectionWidth + contextMenuWidth + tracks.reduce((sum, track) => sum + track.width, 0);
+  let remaining = Math.max(0, availableWidth - fixedWidth);
+  let active = tracks.filter(
+    (track) => !track.fixed && (track.max == null || track.width < track.max)
+  );
+  while (remaining > 0.5 && active.length > 0) {
+    const totalWeight = active.reduce((sum, track) => sum + track.weight, 0);
+    if (totalWeight <= 0) break;
+    let consumed = 0;
+    const nextActive = [];
+    for (const track of active) {
+      const share = remaining * track.weight / totalWeight;
+      const maxGrow = track.max == null ? share : Math.max(0, track.max - track.width);
+      const growth = Math.min(share, maxGrow);
+      track.width += growth;
+      consumed += growth;
+      if (track.max == null || track.width < track.max - 0.5) {
+        nextActive.push(track);
+      }
+    }
+    if (consumed <= 0.5) break;
+    remaining -= consumed;
+    active = nextActive;
+  }
+  const floatTrackTotal = tracks.reduce((sum, track) => sum + track.width, 0);
+  const maxTrackWidth = availableWidth - selectionWidth - contextMenuWidth;
+  const targetTrackWidth = Math.min(
+    floatTrackTotal <= maxTrackWidth ? Math.floor(floatTrackTotal) : Math.ceil(floatTrackTotal),
+    maxTrackWidth
+  );
+  const widths = toIntegerTrackWidths(tracks, targetTrackWidth);
+  const totalWidth = selectionWidth + contextMenuWidth + Object.values(widths).reduce((sum, width) => sum + width, 0);
+  return {
+    selectionWidth: hasSelection ? SELECTION_COLUMN_PX : void 0,
+    contextMenuWidth: hasContextMenu ? 0 : void 0,
+    widths,
+    totalWidth,
+    availableWidth,
+    shouldOverflow: totalWidth > availableWidth
+  };
+}
+
+export { buildColumnVisibilityFromVisibleIds, buildDistributedColumnWidths, getColumnId, getSortPropsFromSorting, mapDefsToColumnItems, sortingEqual };

package/dist/components/tabs/Tabs.cjs

@@ -0,0 +1,187 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var usePersistentState = require('../../hooks/usePersistentState');
+var styles = require('./Tabs.module.css');
+var Chip = require('../chip/Chip');
+var Headline = require('../headline/Headline');
+var SkeletonLoader = require('../skeleton-loader/SkeletonLoader');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const TabsItem = (_props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+};
+TabsItem.__TABS_SLOT__ = "Item";
+function getFirstEnabledId(items) {
+  var _a;
+  return (_a = items.find((t) => !t.hidden && !t.disabled)) == null ? void 0 : _a.id;
+}
+function isTabId(value) {
+  return typeof value === "string" || typeof value === "number";
+}
+function normalizeFromChildren(children) {
+  const items = [];
+  react.Children.forEach(children, (child) => {
+    if (!react.isValidElement(child)) return;
+    const t = child.type;
+    if ((t == null ? void 0 : t.__TABS_SLOT__) !== "Item") return;
+    const props = child.props;
+    items.push({
+      id: props.id,
+      header: props.header,
+      headerIcon: props.headerIcon,
+      disabled: props.disabled,
+      hidden: props.hidden,
+      badge: props.badge,
+      content: props.children
+    });
+  });
+  return items;
+}
+function Tabs({
+  header,
+  subheader,
+  variant,
+  panelStyle = false,
+  tabs,
+  value,
+  defaultValue,
+  storageKey,
+  onValueChange,
+  addition,
+  loading = false,
+  children
+}) {
+  const uid = react.useId();
+  const sourceTabs = react.useMemo(() => {
+    if (tabs && tabs.length) return tabs;
+    return normalizeFromChildren(children);
+  }, [tabs, children]);
+  const visibleTabs = react.useMemo(() => sourceTabs.filter((t) => !t.hidden), [sourceTabs]);
+  const isControlled = value !== void 0;
+  const fallbackValue = defaultValue != null ? defaultValue : getFirstEnabledId(visibleTabs);
+  const validateStoredTabId = react.useCallback(
+    (stored) => isTabId(stored) && visibleTabs.some((t) => t.id === stored && !t.disabled),
+    [visibleTabs]
+  );
+  const { value: internalValue, setValue: setInternalValue } = usePersistentState.usePersistentState({
+    initialValue: fallbackValue,
+    storageKey,
+    isControlled,
+    validate: validateStoredTabId
+  });
+  const currentValue = isControlled ? value : internalValue;
+  const activeIndex = react.useMemo(() => {
+    if (!visibleTabs.length) return -1;
+    const idx = visibleTabs.findIndex((t) => t.id === currentValue);
+    return idx >= 0 ? idx : 0;
+  }, [visibleTabs, currentValue]);
+  const activeTab = activeIndex >= 0 ? visibleTabs[activeIndex] : void 0;
+  const setValue = react.useCallback(
+    (nextId) => {
+      const idx = visibleTabs.findIndex((t) => t.id === nextId);
+      const tab = idx >= 0 ? visibleTabs[idx] : void 0;
+      if (!tab || tab.disabled) return;
+      if (!isControlled) setInternalValue(nextId);
+      onValueChange == null ? void 0 : onValueChange(nextId, tab, idx);
+    },
+    [visibleTabs, isControlled, onValueChange, setInternalValue]
+  );
+  react.useEffect(() => {
+    if (!visibleTabs.length) return;
+    const current = currentValue;
+    const stillValid = visibleTabs.some((t) => t.id === current && !t.disabled);
+    if (stillValid) return;
+    const next = getFirstEnabledId(visibleTabs);
+    if (next === void 0) return;
+    setValue(next);
+  }, [visibleTabs, currentValue, setValue]);
+  const onKeyDownTab = react.useCallback(
+    (e, index) => {
+      var _a;
+      const enabled = visibleTabs.filter((t) => !t.disabled);
+      if (!enabled.length) return;
+      const currentId = (_a = visibleTabs[index]) == null ? void 0 : _a.id;
+      const currentEnabledIndex = enabled.findIndex((t) => t.id === currentId);
+      const focusAndSelect = (enabledIndex) => {
+        const nextTab = enabled[enabledIndex];
+        if (!nextTab) return;
+        const btn = document.getElementById(
+          `${uid}-tab-${String(nextTab.id)}`
+        );
+        btn == null ? void 0 : btn.focus();
+        setValue(nextTab.id);
+      };
+      if (e.key === "ArrowRight") {
+        e.preventDefault();
+        focusAndSelect((currentEnabledIndex + 1) % enabled.length);
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        focusAndSelect((currentEnabledIndex - 1 + enabled.length) % enabled.length);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        focusAndSelect(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        focusAndSelect(enabled.length - 1);
+      }
+    },
+    [uid, visibleTabs, setValue]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.root, children: [
+    header ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: [
+          styles__default.default.headerContainer,
+          variant === "outlined" ? styles__default.default.headerContainerOutlined : ""
+        ].filter(Boolean).join(" "),
+        children: /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 2, subheader, addition, children: header })
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.tabs} ${styles__default.default[variant]} ${panelStyle ? styles__default.default.panelStyle : ""}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.tabList, role: "tablist", "aria-label": header != null ? header : "Tabs", children: visibleTabs.map((tab, index) => {
+        const selected = index === activeIndex;
+        const tabDomId = `${uid}-tab-${String(tab.id)}`;
+        const panelDomId = `${uid}-panel-${String(tab.id)}`;
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.tab} ${selected ? styles__default.default.active : ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            id: tabDomId,
+            type: "button",
+            className: styles__default.default.tabButton,
+            role: "tab",
+            "aria-selected": selected,
+            "aria-controls": panelDomId,
+            tabIndex: selected ? 0 : -1,
+            disabled: tab.disabled,
+            onClick: () => setValue(tab.id),
+            onKeyDown: (e) => onKeyDownTab(e, index),
+            children: [
+              tab.headerIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: tab.headerIcon }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: tab.header }),
+              tab.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.badge, children: /* @__PURE__ */ jsxRuntime.jsx(Chip.Chip, { size: "sm", children: tab.badge.toLocaleString("da-DK") }) }) : null
+            ]
+          }
+        ) }, tab.id);
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          id: activeTab ? `${uid}-panel-${String(activeTab.id)}` : void 0,
+          role: "tabpanel",
+          "aria-labelledby": activeTab ? `${uid}-tab-${String(activeTab.id)}` : void 0,
+          className: styles__default.default.tabContent,
+          children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.loadingContent, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoader.SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) }) : activeTab == null ? void 0 : activeTab.content
+        }
+      )
+    ] })
+  ] });
+}
+Tabs.Item = TabsItem;
+
+exports.Tabs = Tabs;

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

@@ -0,0 +1,52 @@
+import type { JSX, ReactNode } from 'react';
+export type TabId = string | number;
+export type TabItem = {
+    header: string;
+    id: TabId;
+    headerIcon?: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+    hidden?: boolean;
+    badge?: number | string;
+};
+type TabsVariant = 'filled' | 'outlined';
+export interface TabsProps {
+    header?: string;
+    subheader?: ReactNode;
+    variant: TabsVariant;
+    panelStyle?: boolean;
+    /** Data-driven API */
+    tabs?: TabItem[];
+    /** Controlled */
+    value?: TabId;
+    /** Uncontrolled initial */
+    defaultValue?: TabId;
+    /**
+     * Persist the active tab id in localStorage when used uncontrolled.
+     * Ignored in controlled mode.
+     */
+    storageKey?: string;
+    onValueChange?: (id: TabId, tab: TabItem, index: number) => void;
+    addition?: ReactNode;
+    loading?: boolean;
+    /** 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, subheader, variant, panelStyle, tabs, value, defaultValue, storageKey, onValueChange, addition, loading, children, }: TabsProps): JSX.Element;
+export declare namespace Tabs {
+    var Item: TabsItemComponent;
+}
+export {};

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,181 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useId, useMemo, useCallback, useEffect, Children, isValidElement } from 'react';
+import { usePersistentState } from '../../hooks/usePersistentState';
+import styles from './Tabs.module.css';
+import { Chip } from '../chip/Chip';
+import { Headline } from '../headline/Headline';
+import { SkeletonLoader } from '../skeleton-loader/SkeletonLoader';
+
+const TabsItem = (_props) => {
+  return /* @__PURE__ */ jsx(Fragment, {});
+};
+TabsItem.__TABS_SLOT__ = "Item";
+function getFirstEnabledId(items) {
+  var _a;
+  return (_a = items.find((t) => !t.hidden && !t.disabled)) == null ? void 0 : _a.id;
+}
+function isTabId(value) {
+  return typeof value === "string" || typeof value === "number";
+}
+function normalizeFromChildren(children) {
+  const items = [];
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    const t = child.type;
+    if ((t == null ? void 0 : t.__TABS_SLOT__) !== "Item") return;
+    const props = child.props;
+    items.push({
+      id: props.id,
+      header: props.header,
+      headerIcon: props.headerIcon,
+      disabled: props.disabled,
+      hidden: props.hidden,
+      badge: props.badge,
+      content: props.children
+    });
+  });
+  return items;
+}
+function Tabs({
+  header,
+  subheader,
+  variant,
+  panelStyle = false,
+  tabs,
+  value,
+  defaultValue,
+  storageKey,
+  onValueChange,
+  addition,
+  loading = false,
+  children
+}) {
+  const uid = useId();
+  const sourceTabs = useMemo(() => {
+    if (tabs && tabs.length) return tabs;
+    return normalizeFromChildren(children);
+  }, [tabs, children]);
+  const visibleTabs = useMemo(() => sourceTabs.filter((t) => !t.hidden), [sourceTabs]);
+  const isControlled = value !== void 0;
+  const fallbackValue = defaultValue != null ? defaultValue : getFirstEnabledId(visibleTabs);
+  const validateStoredTabId = useCallback(
+    (stored) => isTabId(stored) && visibleTabs.some((t) => t.id === stored && !t.disabled),
+    [visibleTabs]
+  );
+  const { value: internalValue, setValue: setInternalValue } = usePersistentState({
+    initialValue: fallbackValue,
+    storageKey,
+    isControlled,
+    validate: validateStoredTabId
+  });
+  const currentValue = isControlled ? value : internalValue;
+  const activeIndex = useMemo(() => {
+    if (!visibleTabs.length) return -1;
+    const idx = visibleTabs.findIndex((t) => t.id === currentValue);
+    return idx >= 0 ? idx : 0;
+  }, [visibleTabs, currentValue]);
+  const activeTab = activeIndex >= 0 ? visibleTabs[activeIndex] : void 0;
+  const setValue = useCallback(
+    (nextId) => {
+      const idx = visibleTabs.findIndex((t) => t.id === nextId);
+      const tab = idx >= 0 ? visibleTabs[idx] : void 0;
+      if (!tab || tab.disabled) return;
+      if (!isControlled) setInternalValue(nextId);
+      onValueChange == null ? void 0 : onValueChange(nextId, tab, idx);
+    },
+    [visibleTabs, isControlled, onValueChange, setInternalValue]
+  );
+  useEffect(() => {
+    if (!visibleTabs.length) return;
+    const current = currentValue;
+    const stillValid = visibleTabs.some((t) => t.id === current && !t.disabled);
+    if (stillValid) return;
+    const next = getFirstEnabledId(visibleTabs);
+    if (next === void 0) return;
+    setValue(next);
+  }, [visibleTabs, currentValue, setValue]);
+  const onKeyDownTab = useCallback(
+    (e, index) => {
+      var _a;
+      const enabled = visibleTabs.filter((t) => !t.disabled);
+      if (!enabled.length) return;
+      const currentId = (_a = visibleTabs[index]) == null ? void 0 : _a.id;
+      const currentEnabledIndex = enabled.findIndex((t) => t.id === currentId);
+      const focusAndSelect = (enabledIndex) => {
+        const nextTab = enabled[enabledIndex];
+        if (!nextTab) return;
+        const btn = document.getElementById(
+          `${uid}-tab-${String(nextTab.id)}`
+        );
+        btn == null ? void 0 : btn.focus();
+        setValue(nextTab.id);
+      };
+      if (e.key === "ArrowRight") {
+        e.preventDefault();
+        focusAndSelect((currentEnabledIndex + 1) % enabled.length);
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        focusAndSelect((currentEnabledIndex - 1 + enabled.length) % enabled.length);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        focusAndSelect(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        focusAndSelect(enabled.length - 1);
+      }
+    },
+    [uid, visibleTabs, setValue]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: styles.root, children: [
+    header ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: [
+          styles.headerContainer,
+          variant === "outlined" ? styles.headerContainerOutlined : ""
+        ].filter(Boolean).join(" "),
+        children: /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 2, subheader, addition, children: header })
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs("div", { className: `${styles.tabs} ${styles[variant]} ${panelStyle ? styles.panelStyle : ""}`, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.tabList, role: "tablist", "aria-label": header != null ? header : "Tabs", children: visibleTabs.map((tab, index) => {
+        const selected = index === activeIndex;
+        const tabDomId = `${uid}-tab-${String(tab.id)}`;
+        const panelDomId = `${uid}-panel-${String(tab.id)}`;
+        return /* @__PURE__ */ jsx("div", { className: `${styles.tab} ${selected ? styles.active : ""}`, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            id: tabDomId,
+            type: "button",
+            className: styles.tabButton,
+            role: "tab",
+            "aria-selected": selected,
+            "aria-controls": panelDomId,
+            tabIndex: selected ? 0 : -1,
+            disabled: tab.disabled,
+            onClick: () => setValue(tab.id),
+            onKeyDown: (e) => onKeyDownTab(e, index),
+            children: [
+              tab.headerIcon ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: tab.headerIcon }) : null,
+              /* @__PURE__ */ jsx("span", { className: styles.label, children: tab.header }),
+              tab.badge ? /* @__PURE__ */ jsx("span", { className: styles.badge, children: /* @__PURE__ */ jsx(Chip, { size: "sm", children: tab.badge.toLocaleString("da-DK") }) }) : null
+            ]
+          }
+        ) }, tab.id);
+      }) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: activeTab ? `${uid}-panel-${String(activeTab.id)}` : void 0,
+          role: "tabpanel",
+          "aria-labelledby": activeTab ? `${uid}-tab-${String(activeTab.id)}` : void 0,
+          className: styles.tabContent,
+          children: loading ? /* @__PURE__ */ jsx("div", { className: styles.loadingContent, children: /* @__PURE__ */ jsx(SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) }) : activeTab == null ? void 0 : activeTab.content
+        }
+      )
+    ] })
+  ] });
+}
+Tabs.Item = TabsItem;
+
+export { Tabs };