@dbcdk/react-components 0.0.4 → 0.0.5

package/dist/components/tabs/Tabs.cjs

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var styles = require('./Tabs.module.css');
 var Headline = require('../headline/Headline');
+var Chip = require('../chip/Chip');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -13,33 +14,44 @@ function Tabs({
   variant,
   header,
   tabs,
-  activeIndex = 0,
+  activeId,
   onTabChange,
+  manuallySetActiveTab,
   addition,
   panelStyle
 }) {
-  const [currentIndex, setCurrentIndex] = react.useState(activeIndex);
+  var _a;
+  const [currentId, setCurrentId] = react.useState(activeId);
   react.useEffect(() => {
-    if (activeIndex !== void 0) {
-      setCurrentIndex(activeIndex);
+    if (activeId !== void 0) {
+      setCurrentId(activeId);
     }
-  }, [activeIndex]);
+  }, [activeId]);
   const setActiveTab = react.useCallback(
-    (index) => {
-      setCurrentIndex(index);
+    (id) => {
+      setCurrentId(id);
     },
-    [setCurrentIndex]
+    [setCurrentId]
   );
   const handleTabChange = react.useCallback(
-    (index) => {
-      if (!onTabChange) {
-        setActiveTab(index);
+    (index, tab) => {
+      if (!manuallySetActiveTab) {
+        setActiveTab(tab.id);
       }
-      onTabChange == null ? void 0 : onTabChange(index);
+      onTabChange == null ? void 0 : onTabChange(index, tab);
     },
-    [onTabChange]
+    [onTabChange, manuallySetActiveTab, setActiveTab]
   );
   const filteredTabs = react.useMemo(() => tabs.filter((tab) => !tab.hidden), [tabs]);
+  const activeIndex = react.useMemo(() => {
+    var _a2, _b;
+    return (_b = filteredTabs.findIndex((tab) => tab.id === currentId)) != null ? _b : (_a2 = filteredTabs[0]) == null ? void 0 : _a2.id;
+  }, [currentId, filteredTabs]);
+  react.useEffect(() => {
+    if (activeIndex === -1 && filteredTabs.length > 0) {
+      setActiveTab(filteredTabs[0].id);
+    }
+  }, [activeIndex, filteredTabs, setActiveTab]);
   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 }),
@@ -50,23 +62,27 @@ function Tabs({
         "div",
         {
           "data-index": index,
-          className: `${styles__default.default.tab} ${currentIndex === index ? styles__default.default.active : ""}`,
+          className: `${styles__default.default.tab} ${activeIndex === index ? styles__default.default.active : ""}`,
           children: /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
               className: `${styles__default.default.tabButton}`,
-              onClick: () => handleTabChange(index),
+              onClick: () => handleTabChange(index, tab),
               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 })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.header, children: tab.header }),
+                tab.badge !== void 0 && tab.badge > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.badge, children: [
+                  " ",
+                  /* @__PURE__ */ jsxRuntime.jsx(Chip.Chip, { severity: "info", size: "sm", children: tab.badge.toLocaleString("da-DK") })
+                ] })
               ]
             }
           )
         },
         index
       )) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.tabContent} scrollable`, children: tabs[currentIndex].content })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.tabContent} scrollable`, children: (_a = filteredTabs[activeIndex]) == null ? void 0 : _a.content })
     ] })
   ] });
 }

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

@@ -1,18 +1,21 @@
 export type TabItem = {
     header: string;
+    id: string | number;
     headerIcon?: React.ReactNode;
     content: React.ReactNode;
     disabled?: boolean;
     hidden?: boolean;
+    badge?: number;
 };
 interface TabsProps {
     header?: string;
     variant: 'filled' | 'outlined';
     panelStyle?: boolean;
     tabs: TabItem[];
-    activeIndex?: number;
-    onTabChange?: (index: number) => void;
+    activeId?: number | string;
+    onTabChange?: (index: number, tabItem: TabItem) => void;
+    manuallySetActiveTab?: boolean;
     addition?: React.ReactNode;
 }
-export declare function Tabs({ variant, header, tabs, activeIndex, onTabChange, addition, panelStyle, }: TabsProps): React.ReactNode;
+export declare function Tabs({ variant, header, tabs, activeId, onTabChange, manuallySetActiveTab, addition, panelStyle, }: TabsProps): React.ReactNode;
 export {};

package/dist/components/tabs/Tabs.js

@@ -2,38 +2,50 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import styles from './Tabs.module.css';
 import { Headline } from '../headline/Headline';
+import { Chip } from '../chip/Chip';
 
 function Tabs({
   variant,
   header,
   tabs,
-  activeIndex = 0,
+  activeId,
   onTabChange,
+  manuallySetActiveTab,
   addition,
   panelStyle
 }) {
-  const [currentIndex, setCurrentIndex] = useState(activeIndex);
+  var _a;
+  const [currentId, setCurrentId] = useState(activeId);
   useEffect(() => {
-    if (activeIndex !== void 0) {
-      setCurrentIndex(activeIndex);
+    if (activeId !== void 0) {
+      setCurrentId(activeId);
     }
-  }, [activeIndex]);
+  }, [activeId]);
   const setActiveTab = useCallback(
-    (index) => {
-      setCurrentIndex(index);
+    (id) => {
+      setCurrentId(id);
     },
-    [setCurrentIndex]
+    [setCurrentId]
   );
   const handleTabChange = useCallback(
-    (index) => {
-      if (!onTabChange) {
-        setActiveTab(index);
+    (index, tab) => {
+      if (!manuallySetActiveTab) {
+        setActiveTab(tab.id);
       }
-      onTabChange == null ? void 0 : onTabChange(index);
+      onTabChange == null ? void 0 : onTabChange(index, tab);
     },
-    [onTabChange]
+    [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 }),
@@ -44,23 +56,27 @@ function Tabs({
         "div",
         {
           "data-index": index,
-          className: `${styles.tab} ${currentIndex === index ? styles.active : ""}`,
+          className: `${styles.tab} ${activeIndex === index ? styles.active : ""}`,
           children: /* @__PURE__ */ jsxs(
             "button",
             {
               className: `${styles.tabButton}`,
-              onClick: () => handleTabChange(index),
+              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 })
+                /* @__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: tabs[currentIndex].content })
+      /* @__PURE__ */ jsx("div", { className: `${styles.tabContent} scrollable`, children: (_a = filteredTabs[activeIndex]) == null ? void 0 : _a.content })
     ] })
   ] });
 }

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

@@ -9,7 +9,7 @@
 /* ========== Filled variant ========== */
 .tabs.filled .tab.active {
   background: var(--opac-bg-brand);
-  color: var(--color-primary);
+  color: var(--color-brand);
   border: var(--border-width-thin) solid var(--opac-bg-dark);
   border-block-end: 0;
 }
@@ -23,7 +23,7 @@
 }
 .tabs.filled .tab {
   border: var(--border-width-thin) solid transparent;
-  color: var(--color-text-muted);
+  color: var(--color-fg-muted);
   font-size: var(--font-size-sm);
   z-index: 3;
   transition:
@@ -33,11 +33,11 @@
   border-start-end-radius: var(--border-radius-default);
 }
 .tabs.filled .tab:not(.active):hover {
-  color: var(--color-primary);
+  color: var(--color-brand);
 }
 .tabs.filled .tabContent {
   border: var(--border-width-thin) solid var(--opac-bg-dark);
-  background: var(--color-background);
+  background: var(--color-bg-surface);
   padding: var(--spacing-lg);
   flex-grow: 1;
   overflow: auto;
@@ -45,7 +45,7 @@
 
 /* ========== Panel style variant ========== */
 .panelStyle .tabList {
-  border: var(--border-width-thin) solid var(--color-border);
+  border: var(--border-width-thin) solid var(--color-border-default);
   border-block-end: 0;
 }
 .panelStyle .tab.active {
@@ -90,10 +90,10 @@
   display: flex;
   flex-direction: column;
   border-radius: 0;
-  border-block-end: 2px solid var(--color-border);
+  border-block-end: 2px solid var(--color-border-default);
 }
 .tab.active {
-  border-block-end-color: var(--color-primary);
+  border-block-end-color: var(--color-brand);
 }
 
 .tab .icon {
@@ -101,8 +101,8 @@
   color: inherit;
 }
 .tab .icon svg {
-  inline-size: var(--icon-size);
-  block-size: var(--icon-size);
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
 }
 
 .headerContainer {

package/dist/components/toast/Toast.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Button = require('../button/Button');
+var lucideReact = require('lucide-react');
+var styles = require('./Toast.module.css');
+var Headline = require('../headline/Headline');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Toast({
+  title,
+  message,
+  severity = "info",
+  action,
+  onClose
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.toast} ${styles__default.default[severity]}`, role: "status", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.content, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Headline.Headline,
+        {
+          size: 4,
+          severity: title ? severity : void 0,
+          disableMargin: true,
+          addition: onClose && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            Button.Button,
+            {
+              type: "button",
+              variant: "inline",
+              "aria-label": "Dismiss notification",
+              onClick: onClose,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: styles__default.default.closeIcon, "aria-hidden": "true" })
+            }
+          ) }),
+          children: title
+        }
+      ),
+      message && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.message, children: message })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.actions, children: action && /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { type: "button", variant: "primary", onClick: action.onClick, children: action.label }) })
+  ] });
+}
+
+exports.Toast = Toast;

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

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+import { Severity } from '@/constants/severity.types';
+export type ToastActionConfig = {
+    label: string;
+    onClick?: () => void;
+};
+export type ToastProps = {
+    title?: ReactNode;
+    message?: ReactNode;
+    severity: Severity;
+    action?: ToastActionConfig;
+    onClose?: () => void;
+};
+export declare function Toast({ title, message, severity, action, onClose, }: ToastProps): React.ReactNode;

package/dist/components/toast/Toast.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button } from '../button/Button';
+import { X } from 'lucide-react';
+import styles from './Toast.module.css';
+import { Headline } from '../headline/Headline';
+
+function Toast({
+  title,
+  message,
+  severity = "info",
+  action,
+  onClose
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: `${styles.toast} ${styles[severity]}`, role: "status", children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
+      /* @__PURE__ */ jsx(
+        Headline,
+        {
+          size: 4,
+          severity: title ? severity : void 0,
+          disableMargin: true,
+          addition: onClose && /* @__PURE__ */ jsx("div", { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "inline",
+              "aria-label": "Dismiss notification",
+              onClick: onClose,
+              children: /* @__PURE__ */ jsx(X, { className: styles.closeIcon, "aria-hidden": "true" })
+            }
+          ) }),
+          children: title
+        }
+      ),
+      message && /* @__PURE__ */ jsx("div", { className: styles.message, children: message })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.actions, children: action && /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", onClick: action.onClick, children: action.label }) })
+  ] });
+}
+
+export { Toast };

package/dist/components/toast/Toast.module.css

@@ -0,0 +1,101 @@
+.container {
+  position: fixed;
+  inset-inline-end: var(--spacing-lg);
+  inset-block-start: var(--spacing-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  z-index: var(--z-toast);
+  min-width: 280px;
+}
+
+@media (max-width: var(--bp-sm)) {
+  .container {
+    inset-inline: var(--spacing-md);
+    inset-block-end: var(--spacing-md);
+  }
+}
+
+.toast {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-md);
+  border-radius: var(--border-radius-md);
+  box-shadow: var(--shadow-md);
+  background-color: var(--color-bg-surface);
+  border: var(--border-width-thin) solid var(--color-border-default);
+  font-family: var(--font-family);
+  max-width: 360px;
+  animation: toast-enter var(--transition-normal) var(--ease-standard);
+  border-left-width: var(--border-width-thick);
+}
+
+.info {
+  border-left-color: var(--color-status-info-border);
+}
+
+.success {
+  border-left-color: var(--color-status-success-border);
+}
+
+.warning {
+  border-left-color: var(--color-status-warning-border);
+}
+
+.error {
+  border-left-color: var(--color-status-error-border);
+}
+
+.iconContainer {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+}
+
+.content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.title {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+}
+
+.message {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-xs);
+}
+
+.closeIcon {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+}
+
+/* Simple enter animation */
+@keyframes toast-enter {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/dist/components/toast/provider/ToastProvider.cjs

@@ -0,0 +1,98 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Toast = require('../Toast');
+var styles = require('../Toast.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const ToastContext = react.createContext(void 0);
+function ToastProvider({
+  children,
+  defaultDuration = 1e4
+}) {
+  const [toasts, setToasts] = react.useState([]);
+  const timeouts = react.useRef(/* @__PURE__ */ new Map());
+  const clearTimeoutForId = (id) => {
+    const timeoutId = timeouts.current.get(id);
+    if (timeoutId) {
+      window.clearTimeout(timeoutId);
+      timeouts.current.delete(id);
+    }
+  };
+  const hideToast = react.useCallback((id) => {
+    clearTimeoutForId(id);
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const scheduleAutoDismiss = react.useCallback(
+    (toast) => {
+      var _a;
+      const duration = (_a = toast.duration) != null ? _a : defaultDuration;
+      if (!duration || duration <= 0) return;
+      clearTimeoutForId(toast.id);
+      const timeoutId = window.setTimeout(() => {
+        hideToast(toast.id);
+      }, duration);
+      timeouts.current.set(toast.id, timeoutId);
+    },
+    [defaultDuration, hideToast]
+  );
+  const showToast = react.useCallback(
+    (config) => {
+      var _a, _b, _c;
+      const id = (_c = (_b = config.id) != null ? _b : (_a = crypto.randomUUID) == null ? void 0 : _a.call(crypto)) != null ? _c : `${Date.now()}-${Math.random()}`;
+      const toast = { ...config, id };
+      setToasts((prev) => [...prev, toast]);
+      scheduleAutoDismiss(toast);
+      return id;
+    },
+    [scheduleAutoDismiss]
+  );
+  const clearToasts = react.useCallback(() => {
+    toasts.forEach((t) => clearTimeoutForId(t.id));
+    setToasts([]);
+  }, [toasts]);
+  react.useEffect(
+    () => () => {
+      toasts.forEach((t) => clearTimeoutForId(t.id));
+    },
+    [toasts]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { showToast, hideToast, clearToasts }, children: [
+    children,
+    toasts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.container, "aria-live": "polite", "aria-atomic": "false", children: toasts.map((toast) => {
+      var _a;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Toast.Toast,
+        {
+          title: toast.title,
+          message: toast.message,
+          severity: (_a = toast.severity) != null ? _a : "info",
+          action: toast.action && {
+            label: toast.action.label,
+            onClick: () => {
+              var _a2, _b;
+              (_b = (_a2 = toast.action) == null ? void 0 : _a2.onClick) == null ? void 0 : _b.call(_a2);
+              hideToast(toast.id);
+            }
+          },
+          onClose: () => hideToast(toast.id)
+        },
+        toast.id
+      );
+    }) })
+  ] });
+}
+function useToast() {
+  const ctx = react.useContext(ToastContext);
+  if (!ctx) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return ctx;
+}
+
+exports.ToastProvider = ToastProvider;
+exports.useToast = useToast;

package/dist/components/toast/provider/ToastProvider.d.ts

@@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react';
+import { ToastActionConfig } from '../Toast';
+import { Severity } from '@/constants/severity.types';
+export type ToastConfig = {
+    id?: string;
+    title?: ReactNode;
+    message?: ReactNode;
+    severity?: Severity;
+    action?: ToastActionConfig;
+    duration?: number;
+};
+type ToastContextValue = {
+    showToast: (config: ToastConfig) => string;
+    hideToast: (id: string) => void;
+    clearToasts: () => void;
+};
+type ToastProviderProps = {
+    children: ReactNode;
+    defaultDuration?: number;
+};
+export declare function ToastProvider({ children, defaultDuration, }: ToastProviderProps): React.ReactNode;
+export declare function useToast(): ToastContextValue;
+export {};