@dbcdk/react-components 0.0.173 → 0.0.175

package/dist/client.cjs

@@ -18,6 +18,7 @@ var EnvironmentBanner = require('./components/environment-banner/EnvironmentBann
 var Footer = require('./components/page-layout/components/footer/Footer');
 var Input = require('./components/forms/input/Input');
 var SearchBox = require('./components/search-box/SearchBox');
+var useColorScheme = require('./hooks/useColorScheme');
 var useTheme = require('./hooks/useTheme');
 var usePersistentState = require('./hooks/usePersistentState');
 var Chip = require('./components/chip/Chip');
@@ -80,6 +81,7 @@ var StatePage = require('./components/state-page/StatePage');
 var StickyFooterLayout = require('./components/sticky-footer-layout/StickyFooterLayout');
 var Typeahead = require('./components/forms/typeahead/Typeahead');
 var useDeviceSize = require('./hooks/useDeviceSize');
+var ColorSchemeButton = require('./components/color-scheme-button/ColorSchemeButton');
 var ThemeButton = require('./components/theme-button/ThemeButton');
 var CopyButton = require('./components/copy-button/CopyButton');
 var Divider = require('./components/divider/Divider');
@@ -195,6 +197,12 @@ Object.keys(SearchBox).forEach(function (k) {
 		get: function () { return SearchBox[k]; }
 	});
 });
+Object.keys(useColorScheme).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return useColorScheme[k]; }
+	});
+});
 Object.keys(useTheme).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,
@@ -567,6 +575,12 @@ Object.keys(useDeviceSize).forEach(function (k) {
 		get: function () { return useDeviceSize[k]; }
 	});
 });
+Object.keys(ColorSchemeButton).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return ColorSchemeButton[k]; }
+	});
+});
 Object.keys(ThemeButton).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/client.d.ts

@@ -15,6 +15,7 @@ export * from './components/environment-banner/EnvironmentBanner';
 export * from './components/page-layout/components/footer/Footer';
 export * from './components/forms/input/Input';
 export * from './components/search-box/SearchBox';
+export * from './hooks/useColorScheme';
 export * from './hooks/useTheme';
 export * from './hooks/usePersistentState';
 export * from './components/chip/Chip';
@@ -77,6 +78,7 @@ export * from './components/state-page/StatePage';
 export * from './components/sticky-footer-layout/StickyFooterLayout';
 export * from './components/forms/typeahead/Typeahead';
 export * from './hooks/useDeviceSize';
+export * from './components/color-scheme-button/ColorSchemeButton';
 export * from './components/theme-button/ThemeButton';
 export * from './components/copy-button/CopyButton';
 export * from './components/divider/Divider';

package/dist/client.js

@@ -16,6 +16,7 @@ export * from './components/environment-banner/EnvironmentBanner';
 export * from './components/page-layout/components/footer/Footer';
 export * from './components/forms/input/Input';
 export * from './components/search-box/SearchBox';
+export * from './hooks/useColorScheme';
 export * from './hooks/useTheme';
 export * from './hooks/usePersistentState';
 export * from './components/chip/Chip';
@@ -78,6 +79,7 @@ export * from './components/state-page/StatePage';
 export * from './components/sticky-footer-layout/StickyFooterLayout';
 export * from './components/forms/typeahead/Typeahead';
 export * from './hooks/useDeviceSize';
+export * from './components/color-scheme-button/ColorSchemeButton';
 export * from './components/theme-button/ThemeButton';
 export * from './components/copy-button/CopyButton';
 export * from './components/divider/Divider';

package/dist/components/app-header/AppHeader.module.css

@@ -1,6 +1,6 @@
 .header {
   inline-size: 100%;
-  background-color: var(--color-bg-surface);
+  background-color: var(--color-navbar-bg);
 }
 
 .container {
@@ -16,7 +16,7 @@
   box-sizing: border-box;
 
   /* chrome */
-  color: var(--color-fg-default);
+  color: var(--color-navbar-fg);
 
   /* density-aware vertical rhythm */
   padding-block: calc(var(--control-padding-y) + var(--density));

package/dist/components/button/Button.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import type { Size } from '../../types/sizes.types';
-export type ButtonVariant = 'primary' | 'secondary' | 'outlined' | 'default' | 'inline' | 'success' | 'danger';
+export type ButtonVariant = 'primary' | 'secondary' | 'outlined' | 'default' | 'inline' | 'success' | 'danger'
+/** Ghost button using --color-navbar-fg tokens — only meaningful inside/near AppHeader */
+ | 'header';
 export type ButtonSize = Exclude<Size, 'xl'>;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;

package/dist/components/button/Button.module.css

@@ -252,6 +252,32 @@
   color: var(--button-bg-primary-hover);
 }
 
+.header {
+  background-color: transparent;
+  color: var(--color-navbar-fg);
+  border-color: var(--color-navbar-border);
+}
+
+.header:hover {
+  background-color: color-mix(in srgb, var(--color-navbar-fg) 12%, transparent);
+}
+
+.header:focus-visible {
+  outline: none;
+  border-color: var(--color-navbar-fg);
+  box-shadow: inset 0 0 0 1px var(--color-navbar-fg);
+}
+
+.header.active {
+  background-color: color-mix(in srgb, var(--color-navbar-fg) 16%, transparent);
+  color: var(--color-navbar-fg);
+  border-color: var(--color-navbar-fg);
+}
+
+.header.active:hover {
+  background-color: color-mix(in srgb, var(--color-navbar-fg) 22%, transparent);
+}
+
 .button.xs {
   height: auto;
   min-block-size: 0;

package/dist/components/color-scheme-button/ColorSchemeButton.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 useColorScheme = require('../../hooks/useColorScheme');
+
+const COLOR_SCHEME_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 ColorSchemeMenuSection() {
+  const { colorScheme, switchColorScheme } = useColorScheme.useColorScheme();
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: "Udseende" }),
+    COLOR_SCHEME_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+      Menu.Menu.RadioItem,
+      {
+        name: "color-scheme",
+        value: option.value,
+        checked: colorScheme === option.value,
+        label: option.label,
+        onValueChange: (value) => switchColorScheme(value)
+      },
+      option.value
+    ))
+  ] });
+}
+function ColorSchemeButton({
+  size,
+  variant = "outlined"
+}) {
+  const { colorScheme, switchColorScheme } = useColorScheme.useColorScheme();
+  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 udseende",
+          "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" }),
+        COLOR_SCHEME_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: colorScheme === option.value, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => {
+              switchColorScheme(option.value);
+              close();
+            },
+            children: [
+              option.icon,
+              option.label
+            ]
+          }
+        ) }, option.value))
+      ] })
+    }
+  );
+}
+
+exports.ColorSchemeButton = ColorSchemeButton;
+exports.ColorSchemeMenuSection = ColorSchemeMenuSection;

package/dist/components/color-scheme-button/ColorSchemeButton.d.ts

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

package/dist/components/color-scheme-button/ColorSchemeButton.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 { useColorScheme } from '../../hooks/useColorScheme';
+
+const COLOR_SCHEME_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 ColorSchemeMenuSection() {
+  const { colorScheme, switchColorScheme } = useColorScheme();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Menu.Header, { children: "Udseende" }),
+    COLOR_SCHEME_OPTIONS.map((option) => /* @__PURE__ */ jsx(
+      Menu.RadioItem,
+      {
+        name: "color-scheme",
+        value: option.value,
+        checked: colorScheme === option.value,
+        label: option.label,
+        onValueChange: (value) => switchColorScheme(value)
+      },
+      option.value
+    ))
+  ] });
+}
+function ColorSchemeButton({
+  size,
+  variant = "outlined"
+}) {
+  const { colorScheme, switchColorScheme } = useColorScheme();
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      matchTriggerWidth: false,
+      minWidth: "140px",
+      trigger: (handleClick, chevron) => /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant,
+          size,
+          onClick: handleClick,
+          "aria-label": "Skift udseende",
+          "aria-haspopup": "menu",
+          children: [
+            /* @__PURE__ */ jsx(Palette, {}),
+            chevron
+          ]
+        }
+      ),
+      children: (close) => /* @__PURE__ */ jsxs(Menu, { children: [
+        /* @__PURE__ */ jsx(Menu.Header, { children: "Udseende" }),
+        COLOR_SCHEME_OPTIONS.map((option) => /* @__PURE__ */ jsx(Menu.Item, { active: colorScheme === option.value, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              switchColorScheme(option.value);
+              close();
+            },
+            children: [
+              option.icon,
+              option.label
+            ]
+          }
+        ) }, option.value))
+      ] })
+    }
+  );
+}
+
+export { ColorSchemeButton, ColorSchemeMenuSection };

package/dist/components/filter-field/FilterField.module.css

@@ -167,7 +167,7 @@
   z-index: 1;
   color: var(--color-fg-default);
   background: color-mix(in srgb, var(--color-bg-hover-subtle) 55%, transparent);
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-field-focus);
   outline: none;
 }
 
@@ -198,7 +198,7 @@
 }
 
 .valueWrapper:focus-within {
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-field-focus);
 }
 
 .invalid .valueWrapper:focus-within {

package/dist/components/forms/file-upload/FileUpload.module.css

@@ -26,15 +26,15 @@
 
 .dropzone:hover:not(.disabled) {
   background-color: var(--color-bg-selected);
-  border-color: var(--color-border-selected);
+  border-color: var(--color-field-focus);
   color: var(--color-fg-default);
 }
 
 .dragging {
   background-color: var(--color-bg-selected);
-  border-color: var(--color-border-selected);
+  border-color: var(--color-field-focus);
   color: var(--color-fg-default);
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-field-focus);
 }
 
 .hasError {

package/dist/components/forms/form-select/FormSelect.d.ts

@@ -10,7 +10,7 @@ export type FormSelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor
     onChange: (value: T) => void;
     placeholder?: string;
     size?: 'sm' | 'md' | 'lg';
-    variant?: 'outlined' | 'filled' | 'standalone';
+    variant?: 'outlined' | 'filled' | 'standalone' | 'header';
     onClear?: () => void;
     /**
      * Needed if T is an object and you want to use native select.

package/dist/components/forms/form-select/FormSelect.module.css

@@ -30,7 +30,7 @@
    ========================================= */
 
 .container:focus-within {
-  box-shadow: 0 0 0 2px var(--color-border-selected);
+  box-shadow: 0 0 0 2px var(--color-field-focus);
   z-index: 1;
 }
 
@@ -129,6 +129,25 @@
   background-color: transparent;
 }
 
+/* Ghost field for use inside/near AppHeader — only meaningful there */
+.header {
+  background-color: transparent;
+  border-color: var(--color-navbar-border);
+  color: var(--color-navbar-fg);
+}
+
+.header:hover:not(:disabled) {
+  background-color: color-mix(in srgb, var(--color-navbar-fg) 8%, transparent);
+}
+
+.container:focus-within .header {
+  border-color: var(--color-navbar-fg);
+}
+
+.field:has(.header) .chevron {
+  color: var(--color-navbar-fg-muted);
+}
+
 /* =========================================
    Sizes
    ========================================= */

package/dist/components/forms/input/Input.cjs

@@ -87,7 +87,7 @@ const Input = react.forwardRef(function Input2({
     focusOpenMode: tooltipOpenOnFocus ? "any" : "focus-visible",
     closeOnPointerDown: false
   });
-  const trailingButtonVariant = variant === "outlined" || variant === "standalone" ? "outlined" : "default";
+  const trailingButtonVariant = variant === "header" ? "header" : variant === "outlined" || variant === "standalone" ? "outlined" : "default";
   return /* @__PURE__ */ jsxRuntime.jsx(
     InputContainer.InputContainer,
     {

package/dist/components/forms/input/Input.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Size } from '../../../types/sizes.types';
 import type { InputContainerProps } from '../input-container/InputContainer';
-export type InputVariant = 'outlined' | 'surface' | 'subtle' | 'standalone' | 'embedded';
+export type InputVariant = 'outlined' | 'surface' | 'subtle' | 'standalone' | 'embedded' | 'header';
 export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'width'> & Omit<InputContainerProps, 'children' | 'htmlFor' | 'tooltip' | 'tooltipPlacement' | 'size'> & {
     icon?: React.ReactNode;
     autoFocus?: boolean;

package/dist/components/forms/input/Input.js

@@ -81,7 +81,7 @@ const Input = forwardRef(function Input2({
     focusOpenMode: tooltipOpenOnFocus ? "any" : "focus-visible",
     closeOnPointerDown: false
   });
-  const trailingButtonVariant = variant === "outlined" || variant === "standalone" ? "outlined" : "default";
+  const trailingButtonVariant = variant === "header" ? "header" : variant === "outlined" || variant === "standalone" ? "outlined" : "default";
   return /* @__PURE__ */ jsx(
     InputContainer,
     {

package/dist/components/forms/input/Input.module.css

@@ -106,8 +106,8 @@
 }
 
 .outlined:focus-within:not([aria-disabled='true']) {
-  border-color: var(--color-border-selected);
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+  border-color: var(--color-field-focus);
+  box-shadow: inset 0 0 0 1px var(--color-field-focus);
 }
 
 .surface {
@@ -122,8 +122,8 @@
 }
 
 .surface:focus-within:not([aria-disabled='true']) {
-  border-color: var(--color-border-selected);
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+  border-color: var(--color-field-focus);
+  box-shadow: inset 0 0 0 1px var(--color-field-focus);
 }
 
 /* Old filled/tinted behavior, now renamed subtle */
@@ -138,8 +138,8 @@
 }
 
 .subtle:focus-within:not([aria-disabled='true']) {
-  border-color: var(--color-border-selected);
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+  border-color: var(--color-field-focus);
+  box-shadow: inset 0 0 0 1px var(--color-field-focus);
 }
 
 .embedded {
@@ -176,11 +176,43 @@
 }
 
 .standalone:focus-within:not([aria-disabled='true']) {
-  border-color: var(--color-border-selected);
+  border-color: var(--color-field-focus);
   box-shadow:
     var(--shadow-xs),
     var(--shadow-md),
-    inset 0 0 0 1px var(--color-border-selected);
+    inset 0 0 0 1px var(--color-field-focus);
+}
+
+/* Ghost field for use inside/near AppHeader — only meaningful there */
+.header {
+  background-color: transparent;
+  border-color: var(--color-navbar-border);
+  color: var(--color-navbar-fg);
+}
+
+.header:hover:not([aria-disabled='true']) {
+  background-color: color-mix(in srgb, var(--color-navbar-fg) 8%, transparent);
+}
+
+.header:focus-within:not([aria-disabled='true']) {
+  border-color: var(--color-navbar-fg);
+  box-shadow: inset 0 0 0 1px var(--color-navbar-fg);
+}
+
+.header .input {
+  color: var(--color-navbar-fg);
+}
+
+.header .input::placeholder {
+  color: var(--color-navbar-fg-muted) !important;
+}
+
+.header .icon {
+  color: var(--color-navbar-fg-muted);
+}
+
+.header:focus-within .icon {
+  color: var(--color-navbar-fg);
 }
 
 /* =========================

package/dist/components/forms/text-area/Textarea.module.css

@@ -66,5 +66,6 @@
 
 .container textarea:focus-visible {
   outline: none;
-  border-color: var(--color-border-selected);
+  border-color: var(--color-field-focus);
+  box-shadow: inset 0 0 0 1px var(--color-field-focus);
 }

package/dist/components/forms/typeahead/Typeahead.cjs

@@ -635,6 +635,7 @@ function Typeahead({
           Popover.Popover,
           {
             open,
+            variant: variant === "header" ? "header" : "default",
             minWidth: popoverWidth != null ? popoverWidth : minWidth,
             matchTriggerWidth: true,
             fillTrigger: true,

package/dist/components/forms/typeahead/Typeahead.js

@@ -611,6 +611,7 @@ function Typeahead({
           Popover,
           {
             open,
+            variant: variant === "header" ? "header" : "default",
             minWidth: popoverWidth != null ? popoverWidth : minWidth,
             matchTriggerWidth: true,
             fillTrigger: true,

package/dist/components/hyperlink/Hyperlink.cjs

@@ -56,10 +56,11 @@ function Hyperlink(props) {
     disabled = false,
     ...rest
   } = props;
+  const variantClassName = variant === "secondary" ? styles__default.default.secondary : variant === "header" ? styles__default.default.header : styles__default.default.primary;
   const linkClassName = cx(
     styles__default.default.link,
     className,
-    variant === "secondary" ? styles__default.default.secondary : styles__default.default.primary,
+    variantClassName,
     inline ? "" : styles__default.default.block,
     disabled ? styles__default.default.disabled : ""
   );

package/dist/components/hyperlink/Hyperlink.d.ts

@@ -9,7 +9,8 @@ type BaseProps = {
      * Instead, it will clone its only child (e.g. Next <Link>) and apply styling/props to it.
      */
     asChild?: boolean;
-    variant?: 'primary' | 'secondary';
+    /** 'header' uses --color-navbar-fg tokens — only meaningful when rendered inside/near AppHeader */
+    variant?: 'primary' | 'secondary' | 'header';
     inline?: boolean;
     disabled?: boolean;
 };

package/dist/components/hyperlink/Hyperlink.js

@@ -31,10 +31,11 @@ function Hyperlink(props) {
     disabled = false,
     ...rest
   } = props;
+  const variantClassName = variant === "secondary" ? styles.secondary : variant === "header" ? styles.header : styles.primary;
   const linkClassName = cx(
     styles.link,
     className,
-    variant === "secondary" ? styles.secondary : styles.primary,
+    variantClassName,
     inline ? "" : styles.block,
     disabled ? styles.disabled : ""
   );

package/dist/components/hyperlink/Hyperlink.module.css

@@ -23,6 +23,22 @@
   color: var(--color-fg-default);
 }
 
+.link.header {
+  color: var(--color-navbar-fg-muted);
+}
+
+.link.header:hover {
+  color: var(--color-navbar-fg);
+}
+
+.link.header:active {
+  color: var(--color-navbar-fg);
+}
+
+.link.header:focus-visible {
+  outline-color: var(--color-navbar-fg);
+}
+
 .link:hover {
   color: var(--color-brand);
 }

package/dist/components/nav-bar/NavBar.cjs

@@ -82,6 +82,7 @@ function NavBar({
             fullWidth: false,
             autoFocusContent: true,
             anchorRef: navRef,
+            variant: "header",
             trigger: (toggle, _icon, open) => /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {

package/dist/components/nav-bar/NavBar.js

@@ -76,6 +76,7 @@ function NavBar({
             fullWidth: false,
             autoFocusContent: true,
             anchorRef: navRef,
+            variant: "header",
             trigger: (toggle, _icon, open) => /* @__PURE__ */ jsx(
               "button",
               {