@dbcdk/react-components 0.0.167 → 0.0.169

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

@@ -1,29 +0,0 @@
-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

@@ -1,174 +0,0 @@
-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

@@ -1,187 +0,0 @@
-'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

@@ -1,52 +0,0 @@
-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

@@ -1,181 +0,0 @@
-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 };