@dbcdk/react-components 0.0.180 → 0.0.182

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

@@ -8,6 +8,7 @@ export type TabItem = {
     disabled?: boolean;
     hidden?: boolean;
     badge?: number | string;
+    removable?: boolean;
 };
 type TabsVariant = 'filled' | 'outlined';
 export interface TabsProps {
@@ -27,6 +28,10 @@ export interface TabsProps {
      */
     storageKey?: string;
     onValueChange?: (id: TabId, tab: TabItem, index: number) => void;
+    /** Called when a removable tab's remove button is pressed. The caller owns removing the tab. */
+    onRemoveTab?: (id: TabId, tab: TabItem, index: number) => void;
+    /** Shows an add-tab button and notifies the caller. The caller owns creating and selecting the tab. */
+    onAddTab?: () => void;
     addition?: ReactNode;
     loading?: boolean;
     /** Composition API */
@@ -39,13 +44,14 @@ export interface TabsItemProps {
     disabled?: boolean;
     hidden?: boolean;
     badge?: number;
+    removable?: boolean;
     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 function Tabs({ header, subheader, variant, panelStyle, tabs, value, defaultValue, storageKey, onValueChange, onRemoveTab, onAddTab, addition, loading, children, }: TabsProps): JSX.Element;
 export declare namespace Tabs {
     var Item: TabsItemComponent;
 }

package/dist/components/tabs/Tabs.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { X, Plus } from 'lucide-react';
 import { useId, useMemo, useCallback, useEffect, Children, isValidElement } from 'react';
 import { usePersistentState } from '../../hooks/usePersistentState';
 import styles from './Tabs.module.css';
@@ -31,6 +32,7 @@ function normalizeFromChildren(children) {
       disabled: props.disabled,
       hidden: props.hidden,
       badge: props.badge,
+      removable: props.removable,
       content: props.children
     });
   });
@@ -46,6 +48,8 @@ function Tabs({
   defaultValue,
   storageKey,
   onValueChange,
+  onRemoveTab,
+  onAddTab,
   addition,
   loading = false,
   children
@@ -138,31 +142,56 @@ function Tabs({
       }
     ) : 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(
+      /* @__PURE__ */ jsxs("div", { className: styles.tabList, children: [
+        /* @__PURE__ */ jsx("div", { className: styles.tabButtons, 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__ */ jsxs("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.removable && onRemoveTab ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: styles.removeTabButton,
+                "aria-label": `Fjern fane ${tab.header}`,
+                disabled: tab.disabled,
+                onClick: () => onRemoveTab(tab.id, tab, index),
+                children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+              }
+            ) : null
+          ] }, tab.id);
+        }) }),
+        onAddTab ? /* @__PURE__ */ jsx(
           "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
-            ]
+            className: styles.addTabButton,
+            onClick: onAddTab,
+            "aria-label": "Tilf\xF8j fane",
+            children: /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" })
           }
-        ) }, tab.id);
-      }) }),
+        ) : null
+      ] }),
       /* @__PURE__ */ jsx(
         "div",
         {

package/dist/components/tabs/Tabs.module.css

@@ -26,6 +26,11 @@
 
 /* Tablist */
 .tabList {
+  display: flex;
+  min-width: 0;
+}
+
+.tabButtons {
   display: flex;
   flex-wrap: wrap;
   min-width: 0;
@@ -34,7 +39,7 @@
 /* Individual tab wrapper */
 .tab {
   display: flex;
-  flex-direction: column;
+  align-items: stretch;
   border-radius: 0;
   border-block-end: 2px solid var(--color-border-default);
 }
@@ -82,6 +87,68 @@
   color: var(--color-disabled-fg);
 }
 
+.removeTabButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+
+  color: inherit;
+  background: none;
+  border: 0;
+  border-radius: 0;
+  padding-inline: var(--spacing-xs);
+  cursor: pointer;
+}
+
+.removeTabButton:hover {
+  color: var(--color-brand);
+}
+
+.removeTabButton:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.removeTabButton:disabled {
+  cursor: not-allowed;
+  color: var(--color-disabled-fg);
+}
+
+.removeTabButton svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}
+
+.addTabButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+
+  color: var(--color-fg-muted);
+  background: none;
+  border: 0;
+  border-radius: 0;
+  padding-inline: var(--spacing-md);
+  cursor: pointer;
+}
+
+.addTabButton:hover {
+  color: var(--color-fg-default);
+  background: var(--color-bg-hover-subtle);
+}
+
+.addTabButton:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.addTabButton svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}
+
 /* Icon + label */
 .icon {
   display: inline-flex;
@@ -125,7 +192,7 @@
   gap: 0;
 }
 
-/* Outer container: layout only, no visible border — tab list is borderless */
+/* Filled tabs mimic a browser tab strip: a muted toolbar with a raised active page. */
 .tabs.filled {
   border-radius: var(--border-radius-md);
   background: var(--color-bg-surface);
@@ -134,12 +201,26 @@
 
 .filled .tabList {
   border-block-end: 1px solid var(--color-border-subtle);
-  background: var(--color-bg-surface);
+  background: var(--color-bg-toolbar);
   inline-size: 100%;
 }
 
+.filled .tabButtons {
+  display: flex;
+}
+
+.filled .addTabButton {
+  border: 1px solid transparent;
+  border-block-end: 0;
+}
+
+.filled .addTabButton:hover {
+  background: var(--color-bg-toolbar-hover);
+}
+
 .filled .tab {
   border: 1px solid transparent;
+  border-block-end: 0;
   color: var(--color-fg-muted);
   position: relative;
   transition:
@@ -149,22 +230,21 @@
 }
 
 .filled .tab:not(.active):hover {
-  color: var(--color-brand);
+  background: var(--color-bg-toolbar-hover);
+  color: var(--color-fg-default);
 }
 
 /* Active tab physically overlaps the tabList separator by 1px so its
-   erased bottom border seamlessly merges with the panel below.
-   No top border — the outer container already provides the top edge. */
+   erased bottom border seamlessly merges with the panel below. */
 .filled .tab.active {
-  background: var(--opac-bg-brand);
-  border-inline-color: var(--color-border-subtle);
-  border-block-start-color: var(--color-border-subtle);
-  border-block-end-color: var(--opac-bg-brand);
+  background: var(--color-bg-surface);
+  border-color: var(--color-border-subtle);
+  border-block-end-color: var(--color-bg-surface);
   border-start-start-radius: var(--border-radius-md);
   border-start-end-radius: var(--border-radius-md);
   margin-block-end: -1px;
   z-index: 1;
-  color: var(--color-brand);
+  color: var(--color-fg-default);
 }
 
 .filled .tabContent {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.180",
+  "version": "0.0.182",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",