@dbcdk/react-components 0.0.103 → 0.0.104

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

@@ -0,0 +1,261 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: auto;
+  flex-grow: 1;
+}
+
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-block: var(--spacing-lg);
+  gap: var(--spacing-md);
+}
+
+.headerContainer.disableTopPadding {
+  padding-block-start: 0;
+}
+
+/* Outer wrapper for tablist + content */
+.tabs {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden;
+  min-height: 0;
+}
+
+/* Tablist */
+.tabList {
+  display: flex;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+/* Individual tab wrapper */
+.tab {
+  display: flex;
+  flex-direction: column;
+  border-radius: 0;
+  border-block-end: 2px solid var(--color-border-default);
+}
+
+.active {
+  border-block-end-color: var(--color-brand);
+}
+
+/* Button */
+.tabButton {
+  font-size: var(--font-size-sm);
+  color: inherit;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+
+  white-space: nowrap;
+
+  background: none;
+  border: 0;
+  border-radius: 0;
+
+  padding-block: var(--spacing-sm);
+  padding-inline: var(--spacing-md);
+
+  cursor: pointer;
+
+  transition:
+    color var(--transition-fast) var(--ease-standard),
+    background-color var(--transition-fast) var(--ease-standard),
+    border-color var(--transition-fast) var(--ease-standard);
+}
+
+.active .tabButton {
+}
+.tabButton:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.tabButton:disabled {
+  cursor: not-allowed;
+  color: var(--color-disabled-fg);
+}
+
+/* Icon + label */
+.icon {
+  display: inline-flex;
+  align-items: center;
+  color: inherit;
+}
+
+.icon svg {
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
+}
+
+.label {
+  display: inline-block;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Content panel */
+.tabContent {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+}
+
+.loadingContent {
+  display: flex;
+  width: 100%;
+  min-height: 12rem;
+  height: 100%;
+}
+
+/* =========================
+   Filled variant
+   ========================= */
+
+.filled {
+  gap: 0;
+}
+
+/* Outer container: layout only, no visible border — tab list is borderless */
+.tabs.filled {
+  border-radius: var(--border-radius-md);
+  background: var(--color-bg-surface);
+  overflow: hidden;
+}
+
+.filled .tabList {
+  border-block-end: 1px solid var(--color-border-subtle);
+  background: var(--color-bg-surface);
+  inline-size: 100%;
+}
+
+.filled .tab {
+  border: 1px solid transparent;
+  color: var(--color-fg-muted);
+  position: relative;
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    color var(--transition-fast) var(--ease-standard),
+    border-color var(--transition-fast) var(--ease-standard);
+}
+
+.filled .tab:not(.active):hover {
+  color: var(--color-brand);
+}
+
+/* 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. */
+.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);
+  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);
+}
+
+.filled .tabContent {
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border-subtle);
+  border-block-start: none;
+  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
+  box-shadow: var(--shadow-xs);
+  padding: var(--spacing-lg);
+}
+
+/* =========================
+   Outlined variant
+   ========================= */
+
+.outlined {
+  gap: var(--spacing-lg);
+}
+
+.outlined .tab {
+  color: var(--color-fg-muted);
+  border-block-end: 2px solid var(--color-border-default);
+  transition: color var(--transition-fast) var(--ease-standard);
+}
+
+.outlined .tab:not(.active):hover {
+  color: var(--color-brand);
+}
+
+.outlined .tab.active {
+  color: var(--color-brand);
+  border-block-end-color: var(--color-brand);
+}
+
+.outlined .tabContent {
+  background: transparent;
+  padding: 0;
+}
+
+/* =========================
+   Panel style modifier
+   ========================= */
+
+.panelStyle .tabList {
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-block-end: 0;
+}
+
+/* When panelStyle is on, tabs look “embedded” (no bottom border indicators) */
+.panelStyle .tab {
+  border-block-end: 0;
+}
+
+/* In filled mode, keep the filled content panel visuals (already handled above).
+   In outlined mode with panelStyle, give the content a panel container too. */
+.panelStyle.outlined .tabContent {
+  border: var(--border-width-thin) solid var(--color-border-default);
+  background: var(--color-bg-surface);
+  padding: var(--spacing-lg);
+}
+
+@media (max-width: 767px) {
+  .headerContainer {
+    padding-block: var(--spacing-md);
+  }
+
+  .tabButton {
+    padding-block: var(--spacing-sm);
+    padding-inline: var(--spacing-xs);
+  }
+
+  .tabs.filled {
+    border-radius: 0;
+    border-inline: 0;
+    box-shadow: none;
+  }
+
+  .filled .tabList {
+    inline-size: 100%;
+  }
+
+  .filled .tabContent,
+  .panelStyle.outlined .tabContent {
+    padding-block: var(--spacing-md);
+    padding-inline: var(--spacing-md);
+  }
+
+  .panelStyle .tabList {
+    border: 0;
+  }
+}

package/dist/components/theme-button/ThemeButton.cjs

@@ -0,0 +1,78 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var Button = require('../../components/button/Button');
+var Menu = require('../../components/menu/Menu');
+var Popover = require('../../components/popover/Popover');
+var useTheme = require('../../hooks/useTheme');
+
+const THEME_OPTIONS = [
+  { value: "system", label: "System", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Monitor, { size: 16 }) },
+  { value: "light", label: "Lyst", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { size: 16 }) },
+  { value: "dark", label: "M\xF8rkt", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { size: 16 }) }
+];
+function ThemeMenuSection() {
+  const { theme, switchTheme } = useTheme.useTheme();
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, {}),
+      "Udseende"
+    ] }),
+    THEME_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+      Menu.Menu.RadioItem,
+      {
+        name: "theme",
+        value: option.value,
+        checked: theme === option.value,
+        label: option.label,
+        onValueChange: (value) => switchTheme(value)
+      },
+      option.value
+    ))
+  ] });
+}
+function ThemeButton({ size, variant = "outlined" }) {
+  const { theme, switchTheme } = useTheme.useTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popover.Popover,
+    {
+      matchTriggerWidth: false,
+      minWidth: "140px",
+      trigger: (handleClick, chevron) => /* @__PURE__ */ jsxRuntime.jsxs(
+        Button.Button,
+        {
+          variant,
+          size,
+          onClick: handleClick,
+          "aria-label": "Skift tema",
+          "aria-haspopup": "menu",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, {}),
+            chevron
+          ]
+        }
+      ),
+      children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: "Udseende" }),
+        THEME_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: theme === option.value, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => {
+              switchTheme(option.value);
+              close();
+            },
+            children: [
+              option.icon,
+              option.label
+            ]
+          }
+        ) }, option.value))
+      ] })
+    }
+  );
+}
+
+exports.ThemeButton = ThemeButton;
+exports.ThemeMenuSection = ThemeMenuSection;

package/dist/components/theme-button/ThemeButton.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Palette, Monitor, Sun, Moon } from 'lucide-react';
+import { Button } from '../../components/button/Button';
+import { Menu } from '../../components/menu/Menu';
+import { Popover } from '../../components/popover/Popover';
+import { useTheme } from '../../hooks/useTheme';
+
+const THEME_OPTIONS = [
+  { value: "system", label: "System", icon: /* @__PURE__ */ jsx(Monitor, { size: 16 }) },
+  { value: "light", label: "Lyst", icon: /* @__PURE__ */ jsx(Sun, { size: 16 }) },
+  { value: "dark", label: "M\xF8rkt", icon: /* @__PURE__ */ jsx(Moon, { size: 16 }) }
+];
+function ThemeMenuSection() {
+  const { theme, switchTheme } = useTheme();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Menu.Header, { children: [
+      /* @__PURE__ */ jsx(Palette, {}),
+      "Udseende"
+    ] }),
+    THEME_OPTIONS.map((option) => /* @__PURE__ */ jsx(
+      Menu.RadioItem,
+      {
+        name: "theme",
+        value: option.value,
+        checked: theme === option.value,
+        label: option.label,
+        onValueChange: (value) => switchTheme(value)
+      },
+      option.value
+    ))
+  ] });
+}
+function ThemeButton({ size, variant = "outlined" }) {
+  const { theme, switchTheme } = useTheme();
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      matchTriggerWidth: false,
+      minWidth: "140px",
+      trigger: (handleClick, chevron) => /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant,
+          size,
+          onClick: handleClick,
+          "aria-label": "Skift tema",
+          "aria-haspopup": "menu",
+          children: [
+            /* @__PURE__ */ jsx(Palette, {}),
+            chevron
+          ]
+        }
+      ),
+      children: (close) => /* @__PURE__ */ jsxs(Menu, { children: [
+        /* @__PURE__ */ jsx(Menu.Header, { children: "Udseende" }),
+        THEME_OPTIONS.map((option) => /* @__PURE__ */ jsx(Menu.Item, { active: theme === option.value, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              switchTheme(option.value);
+              close();
+            },
+            children: [
+              option.icon,
+              option.label
+            ]
+          }
+        ) }, option.value))
+      ] })
+    }
+  );
+}
+
+export { ThemeButton, ThemeMenuSection };

package/dist/components/toast/Toast.cjs

@@ -0,0 +1,68 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var styles = require('./Toast.module.css');
+var Button = require('../button/Button');
+var Headline = require('../headline/Headline');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Toast({
+  title,
+  subheader,
+  message,
+  severity = "info",
+  action,
+  onClose
+}) {
+  const showHeader = Boolean(title);
+  const showMessage = Boolean(message);
+  const canClose = severity !== "neutral";
+  const isDismissibleNeutral = severity === "neutral" && Boolean(onClose);
+  const CloseButton = onClose && canClose ? /* @__PURE__ */ jsxRuntime.jsx(
+    Button.Button,
+    {
+      type: "button",
+      variant: "inline",
+      shape: "round",
+      className: styles__default.default.closeButton,
+      "aria-label": "Dismiss notification",
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: styles__default.default.closeIcon, "aria-hidden": "true" })
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `${styles__default.default.toast} ${styles__default.default[severity]} ${isDismissibleNeutral ? styles__default.default.dismissibleNeutral : ""}`,
+      role: "status",
+      onClick: isDismissibleNeutral ? onClose : void 0,
+      onKeyDown: isDismissibleNeutral ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClose == null ? void 0 : onClose();
+        }
+      } : void 0,
+      tabIndex: isDismissibleNeutral ? 0 : void 0,
+      "aria-label": isDismissibleNeutral ? "Luk notifikation" : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.content, children: [
+          showHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.row, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { size: 4, severity, disableMargin: true, subheader, children: title }),
+            CloseButton
+          ] }),
+          showMessage && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.row, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.message, children: message }),
+            !showHeader && CloseButton
+          ] })
+        ] }),
+        action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.actions, children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { type: "button", variant: "primary", onClick: action.onClick, children: action.label }) })
+      ]
+    }
+  );
+}
+
+exports.Toast = Toast;

package/dist/components/toast/Toast.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { X } from 'lucide-react';
+import styles from './Toast.module.css';
+import { Button } from '../button/Button';
+import { Headline } from '../headline/Headline';
+
+function Toast({
+  title,
+  subheader,
+  message,
+  severity = "info",
+  action,
+  onClose
+}) {
+  const showHeader = Boolean(title);
+  const showMessage = Boolean(message);
+  const canClose = severity !== "neutral";
+  const isDismissibleNeutral = severity === "neutral" && Boolean(onClose);
+  const CloseButton = onClose && canClose ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "inline",
+      shape: "round",
+      className: styles.closeButton,
+      "aria-label": "Dismiss notification",
+      onClick: onClose,
+      children: /* @__PURE__ */ jsx(X, { className: styles.closeIcon, "aria-hidden": "true" })
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${styles.toast} ${styles[severity]} ${isDismissibleNeutral ? styles.dismissibleNeutral : ""}`,
+      role: "status",
+      onClick: isDismissibleNeutral ? onClose : void 0,
+      onKeyDown: isDismissibleNeutral ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClose == null ? void 0 : onClose();
+        }
+      } : void 0,
+      tabIndex: isDismissibleNeutral ? 0 : void 0,
+      "aria-label": isDismissibleNeutral ? "Luk notifikation" : void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
+          showHeader && /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
+            /* @__PURE__ */ jsx(Headline, { size: 4, severity, disableMargin: true, subheader, children: title }),
+            CloseButton
+          ] }),
+          showMessage && /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
+            /* @__PURE__ */ jsx("div", { className: styles.message, children: message }),
+            !showHeader && CloseButton
+          ] })
+        ] }),
+        action && /* @__PURE__ */ jsx("div", { className: styles.actions, children: /* @__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,161 @@
+.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;
+  word-break: break-word;
+}
+
+@media (max-width: 640px) {
+  .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);
+}
+
+/* Severity accents */
+.info {
+  border-left-color: var(--color-status-info-border);
+}
+
+.brand {
+  border-left-color: var(--color-brand);
+}
+
+.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);
+}
+
+.neutral {
+  background-color: var(--color-bg-inverse);
+  color: var(--color-fg-inverse);
+  border-left-width: 0;
+  min-width: 50px;
+  max-width: 200px;
+  width: fit-content;
+  align-self: flex-end;
+}
+
+.dismissibleNeutral {
+  cursor: pointer;
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    transform 60ms ease;
+}
+
+.dismissibleNeutral:hover {
+  background-color: color-mix(in srgb, var(--color-bg-inverse) 92%, white);
+}
+
+.dismissibleNeutral:active {
+  transform: translateY(1px);
+}
+
+.dismissibleNeutral:focus-visible {
+  outline: 2px solid var(--color-fg-inverse);
+  outline-offset: 2px;
+}
+
+/* Layout */
+.content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xxs);
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  min-width: 0;
+}
+
+/* Long-text handling suitable for toasts */
+.title,
+.message {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: normal;
+}
+
+/* Optional: clamp to avoid giant toasts */
+.title {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.message {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+}
+
+/* Close button stays aligned at the end of the row */
+.closeButton {
+  margin-inline-start: auto;
+  flex: 0 0 auto;
+  align-self: flex-start;
+}
+
+.closeIcon {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-xs);
+}
+
+/* Simple enter animation */
+@keyframes toast-enter {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}