@dbcdk/react-components 0.0.168 → 0.0.169

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

@@ -1,263 +0,0 @@
-.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-start: 0;
-  padding-block-end: var(--spacing-lg);
-  gap: var(--spacing-md);
-}
-
-/* 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
-   ========================= */
-
-.tabs.outlined {
-  gap: var(--spacing-md);
-}
-
-.headerContainerOutlined {
-  padding-block-end: var(--spacing-xs);
-}
-
-.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-start: 0;
-    padding-block-end: 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

@@ -1,75 +0,0 @@
-'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.jsx(Menu.Menu.Header, { children: "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.d.ts

@@ -1,8 +0,0 @@
-import type { JSX } from 'react';
-import type { ButtonSize, ButtonVariant } from '../../components/button/Button';
-export interface ThemeButtonProps {
-    size?: ButtonSize;
-    variant?: ButtonVariant;
-}
-export declare function ThemeMenuSection(): JSX.Element;
-export declare function ThemeButton({ size, variant }: ThemeButtonProps): JSX.Element;

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

@@ -1,72 +0,0 @@
-'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__ */ jsx(Menu.Header, { children: "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

@@ -1,68 +0,0 @@
-'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.d.ts

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

package/dist/components/toast/Toast.js

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