@dbcdk/react-components 0.0.1 → 0.0.3

package/dist/components/table/Table.cjs

@@ -0,0 +1,181 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var Checkbox = require('../checkbox/Checkbox');
+var react = require('react');
+var styles = require('./Table.module.css');
+var useViewportFill = require('../../hooks/useViewportFill');
+var Pagination = require('../pagination/Pagination');
+var SkeletonLoaderItem = require('../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Table({
+  data,
+  columns,
+  selectedRows,
+  onRowSelect,
+  onSortChange,
+  onRowClick,
+  sortBy,
+  sortDirection,
+  dataKey,
+  headerExtras,
+  columnStyles,
+  headerBelowRow,
+  striped,
+  fillViewport = false,
+  viewportBottomOffset = 0,
+  viewportMin = 120,
+  viewportIncludeMarginTop = false,
+  take,
+  skip,
+  totalItemsCount,
+  onPageChange,
+  loading,
+  variant = "filled",
+  size = "md"
+}) {
+  const filteredColumns = react.useMemo(() => columns.filter((c) => !c.hidden), [columns]);
+  const handlePageChange = react.useCallback(
+    (e) => {
+      onPageChange == null ? void 0 : onPageChange(e);
+    },
+    [onPageChange]
+  );
+  const getColStyle = (accessor, alignment) => {
+    const baseStyle = accessor ? columnStyles == null ? void 0 : columnStyles[String(accessor)] : void 0;
+    return {
+      textAlign: alignment != null ? alignment : "left",
+      ...baseStyle != null ? baseStyle : {}
+    };
+  };
+  const scrollRef = react.useRef(null);
+  const { style: viewportStyle } = useViewportFill.useViewportFill(scrollRef, {
+    bottomOffset: viewportBottomOffset + 60,
+    min: viewportMin,
+    includeMarginTop: viewportIncludeMarginTop
+  });
+  const tableEl = /* @__PURE__ */ jsxRuntime.jsxs("table", { className: `${styles__default.default.table} ${styles__default.default[variant]} ${styles__default.default[size]}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("thead", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        selectedRows && dataKey && /* @__PURE__ */ jsxRuntime.jsx("th", { className: "fitContent" }),
+        filteredColumns.map((column, index) => {
+          var _a;
+          const accessorKey = String((_a = column.accessor) != null ? _a : "");
+          const isActiveSort = sortBy === column.accessor;
+          const ariaSort = column.sortable && isActiveSort ? sortDirection === "asc" ? "ascending" : "descending" : "none";
+          const toggleSort = () => {
+            if (!onSortChange || !column.sortable) return;
+            const nextDir = !isActiveSort ? "asc" : sortDirection === "asc" ? "desc" : null;
+            onSortChange(column, nextDir);
+          };
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "th",
+            {
+              style: getColStyle(column.accessor, column.align),
+              "aria-sort": ariaSort,
+              className: `${styles__default.default.th} ${column.sortable ? styles__default.default.sortable : ""}`,
+              onClick: (e) => {
+                if (!column.sortable) return;
+                if (e.target instanceof HTMLElement && e.target.closest(".resizer")) return;
+                toggleSort();
+              },
+              role: column.sortable ? "button" : void 0,
+              tabIndex: column.sortable ? 0 : void 0,
+              onKeyDown: (e) => {
+                if (!column.sortable) return;
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  toggleSort();
+                }
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thInner, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.thLabel, children: column.header }),
+                column.sortable && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.sortIndicator, "aria-hidden": "true", children: [
+                  isActiveSort && sortDirection === "asc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, {}),
+                  isActiveSort && sortDirection === "desc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: styles__default.default.descending }),
+                  !isActiveSort && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: styles__default.default.descending })
+                ] }),
+                headerExtras == null ? void 0 : headerExtras({ column, index })
+              ] }) })
+            },
+            `${accessorKey}-${index}`
+          );
+        })
+      ] }),
+      headerBelowRow ? /* @__PURE__ */ jsxRuntime.jsx("tr", { className: styles__default.default.headerBelowRow, children: /* @__PURE__ */ jsxRuntime.jsx("th", { colSpan: filteredColumns.length, children: headerBelowRow }) }) : null
+    ] }),
+    loading && !data.length ? /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: `${styles__default.default.tBody} ${striped ? styles__default.default.striped : ""}`, children: Array.from({ length: take != null ? take : 5 }).map((_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: filteredColumns.map((column, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+      "td",
+      {
+        style: getColStyle(column.accessor, column.align),
+        className: `${styles__default.default.tableCell}`,
+        children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { height: 20, width: "100%" })
+      },
+      `loading-cell-${colIndex}`
+    )) }, `loading-row-${rowIndex}`)) }) : /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: `${styles__default.default.tBody} ${striped ? styles__default.default.striped : ""}`, children: data == null ? void 0 : data.map((row, rowIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "tr",
+      {
+        onClick: () => onRowClick == null ? void 0 : onRowClick(row),
+        className: `${onRowClick ? styles__default.default.clickableRow : ""} ${(selectedRows == null ? void 0 : selectedRows.has(row[dataKey])) ? styles__default.default.selectedRow : ""}`,
+        children: [
+          selectedRows && dataKey && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "fitContent", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Checkbox.Checkbox,
+            {
+              checked: selectedRows.has(row[dataKey]),
+              size: "sm",
+              onChange: () => onRowSelect == null ? void 0 : onRowSelect(row[dataKey], !selectedRows.has(row[dataKey]))
+            }
+          ) }),
+          filteredColumns.map((column) => {
+            var _a;
+            const accessorKey = String((_a = column.accessor) != null ? _a : "");
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "td",
+              {
+                style: getColStyle(column.accessor, column.align),
+                className: `${styles__default.default.tableCell} `,
+                children: column.render ? column.render(row) : row[accessorKey]
+              },
+              accessorKey
+            );
+          })
+        ]
+      },
+      `tableRow-${String(row[dataKey])}-${rowIndex} `
+    )) })
+  ] });
+  if (fillViewport) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, style: viewportStyle, className: styles__default.default.tableScroll, children: tableEl }),
+      onPageChange && /* @__PURE__ */ jsxRuntime.jsx(
+        Pagination.Pagination,
+        {
+          itemsCount: totalItemsCount,
+          take,
+          skip,
+          onPageChange: handlePageChange
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: [
+    tableEl,
+    " ",
+    onPageChange && /* @__PURE__ */ jsxRuntime.jsx(
+      Pagination.Pagination,
+      {
+        itemsCount: totalItemsCount,
+        take,
+        skip,
+        onPageChange: handlePageChange
+      }
+    )
+  ] });
+}
+
+exports.Table = Table;

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

@@ -0,0 +1,45 @@
+import { PageChangeEvent } from '../pagination/Pagination';
+type SortDirection = 'asc' | 'desc' | null;
+export interface ColumnItem<T> {
+    header: string;
+    accessor?: keyof T;
+    sortable?: boolean;
+    sortFunction?: (a: T, b: T) => -1 | 0 | 1;
+    render?: (item: T) => React.ReactNode;
+    hidden?: boolean;
+    align?: 'left' | 'right' | 'center';
+    fitContent?: boolean;
+}
+type HeaderExtrasArgs<T> = {
+    column: ColumnItem<T>;
+    index: number;
+};
+export type TableVariant = 'filled' | 'outlined';
+interface TableProps<T extends Record<string, any>> {
+    data: T[];
+    dataKey: keyof T;
+    columns: ColumnItem<T>[];
+    selectedRows?: Set<number | string>;
+    onRowClick?: (row: T) => void;
+    onRowSelect?: (rowIndex: number | string, isSelected: boolean) => void;
+    onSortChange?: (column: ColumnItem<T>, direction: SortDirection) => void;
+    sortBy?: keyof T;
+    sortDirection?: SortDirection;
+    loading?: boolean;
+    headerExtras?: (args: HeaderExtrasArgs<T>) => React.ReactNode;
+    columnStyles?: Partial<Record<string, React.CSSProperties>>;
+    headerBelowRow?: React.ReactNode;
+    striped?: boolean;
+    fillViewport?: boolean;
+    viewportBottomOffset?: number;
+    viewportMin?: number;
+    viewportIncludeMarginTop?: boolean;
+    take?: number;
+    skip?: number;
+    totalItemsCount?: number;
+    onPageChange?: (e: PageChangeEvent) => void;
+    variant?: TableVariant;
+    size?: 'sm' | 'md';
+}
+export declare function Table<T extends Record<string, any>>({ data, columns, selectedRows, onRowSelect, onSortChange, onRowClick, sortBy, sortDirection, dataKey, headerExtras, columnStyles, headerBelowRow, striped, fillViewport, viewportBottomOffset, viewportMin, viewportIncludeMarginTop, take, skip, totalItemsCount, onPageChange, loading, variant, size, }: TableProps<T>): JSX.Element;
+export {};

package/dist/components/table/Table.js

@@ -0,0 +1,175 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ArrowUp, ArrowDown } from 'lucide-react';
+import { Checkbox } from '../checkbox/Checkbox';
+import { useMemo, useCallback, useRef } from 'react';
+import styles from './Table.module.css';
+import { useViewportFill } from '../../hooks/useViewportFill';
+import { Pagination } from '../pagination/Pagination';
+import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+
+function Table({
+  data,
+  columns,
+  selectedRows,
+  onRowSelect,
+  onSortChange,
+  onRowClick,
+  sortBy,
+  sortDirection,
+  dataKey,
+  headerExtras,
+  columnStyles,
+  headerBelowRow,
+  striped,
+  fillViewport = false,
+  viewportBottomOffset = 0,
+  viewportMin = 120,
+  viewportIncludeMarginTop = false,
+  take,
+  skip,
+  totalItemsCount,
+  onPageChange,
+  loading,
+  variant = "filled",
+  size = "md"
+}) {
+  const filteredColumns = useMemo(() => columns.filter((c) => !c.hidden), [columns]);
+  const handlePageChange = useCallback(
+    (e) => {
+      onPageChange == null ? void 0 : onPageChange(e);
+    },
+    [onPageChange]
+  );
+  const getColStyle = (accessor, alignment) => {
+    const baseStyle = accessor ? columnStyles == null ? void 0 : columnStyles[String(accessor)] : void 0;
+    return {
+      textAlign: alignment != null ? alignment : "left",
+      ...baseStyle != null ? baseStyle : {}
+    };
+  };
+  const scrollRef = useRef(null);
+  const { style: viewportStyle } = useViewportFill(scrollRef, {
+    bottomOffset: viewportBottomOffset + 60,
+    min: viewportMin,
+    includeMarginTop: viewportIncludeMarginTop
+  });
+  const tableEl = /* @__PURE__ */ jsxs("table", { className: `${styles.table} ${styles[variant]} ${styles[size]}`, children: [
+    /* @__PURE__ */ jsxs("thead", { children: [
+      /* @__PURE__ */ jsxs("tr", { children: [
+        selectedRows && dataKey && /* @__PURE__ */ jsx("th", { className: "fitContent" }),
+        filteredColumns.map((column, index) => {
+          var _a;
+          const accessorKey = String((_a = column.accessor) != null ? _a : "");
+          const isActiveSort = sortBy === column.accessor;
+          const ariaSort = column.sortable && isActiveSort ? sortDirection === "asc" ? "ascending" : "descending" : "none";
+          const toggleSort = () => {
+            if (!onSortChange || !column.sortable) return;
+            const nextDir = !isActiveSort ? "asc" : sortDirection === "asc" ? "desc" : null;
+            onSortChange(column, nextDir);
+          };
+          return /* @__PURE__ */ jsx(
+            "th",
+            {
+              style: getColStyle(column.accessor, column.align),
+              "aria-sort": ariaSort,
+              className: `${styles.th} ${column.sortable ? styles.sortable : ""}`,
+              onClick: (e) => {
+                if (!column.sortable) return;
+                if (e.target instanceof HTMLElement && e.target.closest(".resizer")) return;
+                toggleSort();
+              },
+              role: column.sortable ? "button" : void 0,
+              tabIndex: column.sortable ? 0 : void 0,
+              onKeyDown: (e) => {
+                if (!column.sortable) return;
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  toggleSort();
+                }
+              },
+              children: /* @__PURE__ */ jsx("div", { className: styles.thInner, children: /* @__PURE__ */ jsxs("span", { children: [
+                /* @__PURE__ */ jsx("span", { className: styles.thLabel, children: column.header }),
+                column.sortable && /* @__PURE__ */ jsxs("span", { className: styles.sortIndicator, "aria-hidden": "true", children: [
+                  isActiveSort && sortDirection === "asc" && /* @__PURE__ */ jsx(ArrowUp, {}),
+                  isActiveSort && sortDirection === "desc" && /* @__PURE__ */ jsx(ArrowDown, { className: styles.descending }),
+                  !isActiveSort && /* @__PURE__ */ jsx(ArrowDown, { className: styles.descending })
+                ] }),
+                headerExtras == null ? void 0 : headerExtras({ column, index })
+              ] }) })
+            },
+            `${accessorKey}-${index}`
+          );
+        })
+      ] }),
+      headerBelowRow ? /* @__PURE__ */ jsx("tr", { className: styles.headerBelowRow, children: /* @__PURE__ */ jsx("th", { colSpan: filteredColumns.length, children: headerBelowRow }) }) : null
+    ] }),
+    loading && !data.length ? /* @__PURE__ */ jsx("tbody", { className: `${styles.tBody} ${striped ? styles.striped : ""}`, children: Array.from({ length: take != null ? take : 5 }).map((_, rowIndex) => /* @__PURE__ */ jsx("tr", { children: filteredColumns.map((column, colIndex) => /* @__PURE__ */ jsx(
+      "td",
+      {
+        style: getColStyle(column.accessor, column.align),
+        className: `${styles.tableCell}`,
+        children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: 20, width: "100%" })
+      },
+      `loading-cell-${colIndex}`
+    )) }, `loading-row-${rowIndex}`)) }) : /* @__PURE__ */ jsx("tbody", { className: `${styles.tBody} ${striped ? styles.striped : ""}`, children: data == null ? void 0 : data.map((row, rowIndex) => /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        onClick: () => onRowClick == null ? void 0 : onRowClick(row),
+        className: `${onRowClick ? styles.clickableRow : ""} ${(selectedRows == null ? void 0 : selectedRows.has(row[dataKey])) ? styles.selectedRow : ""}`,
+        children: [
+          selectedRows && dataKey && /* @__PURE__ */ jsx("td", { className: "fitContent", children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: selectedRows.has(row[dataKey]),
+              size: "sm",
+              onChange: () => onRowSelect == null ? void 0 : onRowSelect(row[dataKey], !selectedRows.has(row[dataKey]))
+            }
+          ) }),
+          filteredColumns.map((column) => {
+            var _a;
+            const accessorKey = String((_a = column.accessor) != null ? _a : "");
+            return /* @__PURE__ */ jsx(
+              "td",
+              {
+                style: getColStyle(column.accessor, column.align),
+                className: `${styles.tableCell} `,
+                children: column.render ? column.render(row) : row[accessorKey]
+              },
+              accessorKey
+            );
+          })
+        ]
+      },
+      `tableRow-${String(row[dataKey])}-${rowIndex} `
+    )) })
+  ] });
+  if (fillViewport) {
+    return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: [
+      /* @__PURE__ */ jsx("div", { ref: scrollRef, style: viewportStyle, className: styles.tableScroll, children: tableEl }),
+      onPageChange && /* @__PURE__ */ jsx(
+        Pagination,
+        {
+          itemsCount: totalItemsCount,
+          take,
+          skip,
+          onPageChange: handlePageChange
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: [
+    tableEl,
+    " ",
+    onPageChange && /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        itemsCount: totalItemsCount,
+        take,
+        skip,
+        onPageChange: handlePageChange
+      }
+    )
+  ] });
+}
+
+export { Table };

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

@@ -0,0 +1,143 @@
+.table {
+  inline-size: 100%;
+  max-inline-size: 100%;
+  overflow: visible;
+  border-collapse: collapse;
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  color: var(--color-text);
+  background: var(--color-surface);
+}
+
+.table.sm tr td,
+.table.sm th {
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-sm);
+  font-size: var(--font-size-xs);
+}
+
+.table thead {
+  position: sticky;
+  inset-block-start: 0;
+  background-color: var(--color-surface);
+  z-index: 10;
+}
+
+.table.filled thead th {
+  background-color: var(--color-surface-hover);
+}
+
+.clickableRow {
+  cursor: pointer;
+}
+.clickableRow:hover {
+  background-color: var(--color-surface-hover);
+}
+
+.selectedRow {
+  background-color: var(--color-bg-selected);
+}
+.selectedRow:hover {
+  background-color: var(--color-bg-selected-hover);
+}
+
+.th,
+th {
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
+  position: relative;
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-sm);
+  text-align: start;
+  background: inherit;
+  border-block-end: var(--border-width-thin) solid var(--color-border);
+}
+
+.th.sortable,
+th.sortable {
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    color var(--transition-fast) var(--ease-standard);
+}
+.th.sortable:hover,
+th.sortable:hover {
+  background-color: var(--color-surface-hover);
+}
+.th.sortable:focus-visible,
+th.sortable:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.sortIndicator svg {
+  inline-size: var(--icon-size);
+  block-size: var(--icon-size);
+}
+
+.th > .thInner {
+  display: inline-block;
+}
+.th > .thInner > span {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  inline-size: 100%;
+}
+
+.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);
+  text-align: start;
+  vertical-align: top;
+}
+
+.striped tr:nth-child(even) {
+  background-color: var(--color-surface-hover);
+}
+
+.td--numeric {
+  text-align: end;
+}
+.td--muted {
+  color: var(--color-text-muted);
+}
+.tr--hover:hover {
+  background-color: var(--color-surface-hover);
+}
+
+/* focus ring across the entire row, above sticky header and row backgrounds */
+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);
+}
+
+.tableScroll {
+  overflow: auto;
+  max-inline-size: 100%;
+  -webkit-overflow-scrolling: touch;
+}

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

@@ -0,0 +1,22 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./ColumnResizer.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const ColumnResizer = ({ id, handler }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "span",
+  {
+    className: styles__default.default.resizer,
+    onMouseDown: handler,
+    onTouchStart: handler,
+    role: "separator",
+    "aria-label": `Resize ${id}`
+  }
+);
+var ColumnResizer_default = ColumnResizer;
+
+module.exports = ColumnResizer_default;

package/dist/components/table/components/column-resizer/ColumnResizer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ColumnResizerProps {
+    id: string | number;
+    handler: (event: React.MouseEvent | React.TouchEvent) => void;
+}
+declare const ColumnResizer: React.FC<ColumnResizerProps>;
+export default ColumnResizer;

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

@@ -0,0 +1,16 @@
+import { 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 };

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

@@ -0,0 +1,13 @@
+.resizer {
+  display: inline-block;
+  width: 1px;
+  background-color: var(--opac-bg-default);
+  height: 60%;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+}

package/dist/components/tabs/Tabs.cjs

@@ -0,0 +1,74 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styles = require('./Tabs.module.css');
+var Headline = require('../headline/Headline');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Tabs({
+  variant,
+  header,
+  tabs,
+  activeIndex = 0,
+  onTabChange,
+  addition,
+  panelStyle
+}) {
+  const [currentIndex, setCurrentIndex] = react.useState(activeIndex);
+  react.useEffect(() => {
+    if (activeIndex !== void 0) {
+      setCurrentIndex(activeIndex);
+    }
+  }, [activeIndex]);
+  const setActiveTab = react.useCallback(
+    (index) => {
+      setCurrentIndex(index);
+    },
+    [setCurrentIndex]
+  );
+  const handleTabChange = react.useCallback(
+    (index) => {
+      if (!onTabChange) {
+        setActiveTab(index);
+      }
+      onTabChange == null ? void 0 : onTabChange(index);
+    },
+    [onTabChange]
+  );
+  const filteredTabs = react.useMemo(() => tabs.filter((tab) => !tab.hidden), [tabs]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grow-container", children: [
+    header && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.headerContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 2, children: header }),
+      addition
+    ] }),
+    /* @__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, children: filteredTabs.map((tab, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-index": index,
+          className: `${styles__default.default.tab} ${currentIndex === index ? styles__default.default.active : ""}`,
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              className: `${styles__default.default.tabButton}`,
+              onClick: () => handleTabChange(index),
+              disabled: tab.disabled,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: tab.headerIcon }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.header, children: tab.header })
+              ]
+            }
+          )
+        },
+        index
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.tabContent} scrollable`, children: tabs[currentIndex].content })
+    ] })
+  ] });
+}
+
+exports.Tabs = Tabs;