@dbcdk/react-components 0.0.162 → 0.0.164

package/dist/components/headline/Headline.module.css

@@ -42,6 +42,10 @@
   min-width: 0; /* required for truncation inside flex */
 }
 
+h2.headline {
+  min-block-size: var(--component-size-md);
+}
+
 /* CollapsibleHeadline wrapper */
 .collapsibleRoot {
   display: flex;

package/dist/components/menu/Menu.cjs

@@ -428,6 +428,19 @@ const MenuHeader = React__namespace.forwardRef(
   )
 );
 MenuHeader.displayName = "Menu.Header";
+const MenuDescription = React__namespace.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "li",
+    {
+      ref,
+      role: "presentation",
+      className: [styles__default.default.description, className].filter(Boolean).join(" "),
+      ...props,
+      children
+    }
+  )
+);
+MenuDescription.displayName = "Menu.Description";
 const Menu = Object.assign(MenuBase, {
   Item: MenuItem,
   CheckItem: MenuCheckItem,
@@ -435,7 +448,8 @@ const Menu = Object.assign(MenuBase, {
   SwitchItem: MenuSwitchItem,
   Label: MenuLabel,
   Separator: MenuSeparator,
-  Header: MenuHeader
+  Header: MenuHeader,
+  Description: MenuDescription
 });
 
 exports.Menu = Menu;

package/dist/components/menu/Menu.d.ts

@@ -15,6 +15,9 @@ export type MenuSeparatorProps = React.LiHTMLAttributes<HTMLLIElement>;
 export interface MenuHeaderProps extends React.LiHTMLAttributes<HTMLLIElement> {
     children: React.ReactNode;
 }
+export interface MenuDescriptionProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    children: React.ReactNode;
+}
 export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
     children: React.ReactNode;
     active?: boolean;
@@ -94,5 +97,6 @@ export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.Ref
     SwitchItem: React.ForwardRefExoticComponent<MenuSwitchItemProps & React.RefAttributes<HTMLLIElement>>;
     Separator: React.ForwardRefExoticComponent<MenuSeparatorProps & React.RefAttributes<HTMLLIElement>>;
     Header: React.ForwardRefExoticComponent<MenuHeaderProps & React.RefAttributes<HTMLLIElement>>;
+    Description: React.ForwardRefExoticComponent<MenuDescriptionProps & React.RefAttributes<HTMLLIElement>>;
     Label: React.ForwardRefExoticComponent<MenuLabelProps & React.RefAttributes<HTMLSpanElement>>;
 };

package/dist/components/menu/Menu.js

@@ -403,6 +403,19 @@ const MenuHeader = React.forwardRef(
   )
 );
 MenuHeader.displayName = "Menu.Header";
+const MenuDescription = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref,
+      role: "presentation",
+      className: [styles.description, className].filter(Boolean).join(" "),
+      ...props,
+      children
+    }
+  )
+);
+MenuDescription.displayName = "Menu.Description";
 const Menu = Object.assign(MenuBase, {
   Item: MenuItem,
   CheckItem: MenuCheckItem,
@@ -410,7 +423,8 @@ const Menu = Object.assign(MenuBase, {
   SwitchItem: MenuSwitchItem,
   Label: MenuLabel,
   Separator: MenuSeparator,
-  Header: MenuHeader
+  Header: MenuHeader,
+  Description: MenuDescription
 });
 
 export { Menu };

package/dist/components/menu/Menu.module.css

@@ -251,6 +251,22 @@
   color: inherit;
 }
 
+.description {
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-md);
+  color: var(--color-fg-muted);
+  font-size: var(--font-size-xs);
+  font-weight: 400;
+  line-height: var(--line-height-normal);
+  text-transform: none;
+  letter-spacing: normal;
+  cursor: default;
+  user-select: text;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
 /* Gap between items */
 .gap {
   gap: var(--spacing-xs);

package/dist/components/nav-bar/NavBar.module.css

@@ -172,7 +172,7 @@
   gap: var(--spacing-xs);
   color: var(--color-fg-muted);
   font-family: var(--font-family);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-md);
   text-decoration: none;
   border-radius: var(--border-radius-default);
   padding-block: var(--spacing-xs);

package/dist/components/page-layout/PageLayout.module.css

@@ -219,6 +219,10 @@
   overflow: visible;
 }
 
+.horizontal .content {
+  padding-top: var(--spacing-lg);
+}
+
 .footer {
   min-width: 0;
   background: var(--color-bg-surface-subtle);

package/dist/components/tabs/Tabs.cjs

@@ -53,7 +53,6 @@ function Tabs({
   storageKey,
   onValueChange,
   addition,
-  disableTopPadding,
   loading = false,
   children
 }) {
@@ -139,8 +138,7 @@ function Tabs({
       {
         className: [
           styles__default.default.headerContainer,
-          variant === "outlined" ? styles__default.default.headerContainerOutlined : "",
-          disableTopPadding ? styles__default.default.disableTopPadding : ""
+          variant === "outlined" ? styles__default.default.headerContainerOutlined : ""
         ].filter(Boolean).join(" "),
         children: /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 2, subheader, addition, children: header })
       }

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

@@ -28,7 +28,6 @@ export interface TabsProps {
     storageKey?: string;
     onValueChange?: (id: TabId, tab: TabItem, index: number) => void;
     addition?: ReactNode;
-    disableTopPadding?: boolean;
     loading?: boolean;
     /** Composition API */
     children?: ReactNode;
@@ -46,7 +45,7 @@ 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, disableTopPadding, loading, children, }: TabsProps): JSX.Element;
+export declare function Tabs({ header, subheader, variant, panelStyle, tabs, value, defaultValue, storageKey, onValueChange, addition, loading, children, }: TabsProps): JSX.Element;
 export declare namespace Tabs {
     var Item: TabsItemComponent;
 }

package/dist/components/tabs/Tabs.js

@@ -47,7 +47,6 @@ function Tabs({
   storageKey,
   onValueChange,
   addition,
-  disableTopPadding,
   loading = false,
   children
 }) {
@@ -133,8 +132,7 @@ function Tabs({
       {
         className: [
           styles.headerContainer,
-          variant === "outlined" ? styles.headerContainerOutlined : "",
-          disableTopPadding ? styles.disableTopPadding : ""
+          variant === "outlined" ? styles.headerContainerOutlined : ""
         ].filter(Boolean).join(" "),
         children: /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 2, subheader, addition, children: header })
       }

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

@@ -10,12 +10,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-block: var(--spacing-lg);
-  gap: var(--spacing-md);
-}
-
-.headerContainer.disableTopPadding {
   padding-block-start: 0;
+  padding-block-end: var(--spacing-lg);
+  gap: var(--spacing-md);
 }
 
 /* Outer wrapper for tablist + content */
@@ -188,12 +185,7 @@
 }
 
 .headerContainerOutlined {
-  padding-block-start: var(--spacing-sm);
-  padding-block-end: 0;
-}
-
-.headerContainerOutlined.disableTopPadding {
-  padding-block-start: 0;
+  padding-block-end: var(--spacing-xs);
 }
 
 .outlined .tab {
@@ -240,7 +232,8 @@
 
 @media (max-width: 767px) {
   .headerContainer {
-    padding-block: var(--spacing-md);
+    padding-block-start: 0;
+    padding-block-end: var(--spacing-md);
   }
 
   .tabButton {

package/dist/hooks/usePersistentState.cjs

@@ -2,35 +2,55 @@
 'use strict';
 
 var react = require('react');
+var cookie_utils = require('../utils/cookie.utils');
 var localStorage_utils = require('../utils/localStorage.utils');
 
+function readStorage(storage, key) {
+  return storage === "cookie" ? cookie_utils.readCookie(key) : localStorage_utils.readLocalStorage(key);
+}
+function writeStorage(storage, key, value, maxAgeSeconds) {
+  if (storage === "cookie") {
+    cookie_utils.writeCookie(key, value, maxAgeSeconds);
+  } else {
+    localStorage_utils.writeLocalStorage(key, value);
+  }
+}
 function usePersistentState({
   initialValue,
   storageKey,
   isControlled = false,
-  validate
+  validate,
+  storage = "localStorage",
+  hydration = "effect",
+  maxAgeSeconds
 }) {
   const shouldHydrate = !isControlled && Boolean(storageKey);
-  const [didHydrate, setDidHydrate] = react.useState(() => !shouldHydrate);
-  const [value, setValue] = react.useState(initialValue);
-  const hydrated = !shouldHydrate || didHydrate;
+  const sync = hydration === "sync";
   const validateRef = react.useRef(validate);
+  const [didHydrate, setDidHydrate] = react.useState(() => !shouldHydrate || sync);
+  const [value, setValue] = react.useState(() => {
+    if (!shouldHydrate || !sync) return initialValue;
+    const stored = readStorage(storage, storageKey);
+    const currentValidate = validateRef.current;
+    return currentValidate == null || currentValidate(stored) ? stored : initialValue;
+  });
+  const hydrated = !shouldHydrate || didHydrate;
   react.useEffect(() => {
     validateRef.current = validate;
   }, [validate]);
   react.useEffect(() => {
-    if (!storageKey || !shouldHydrate) return;
-    const stored = localStorage_utils.readLocalStorage(storageKey);
+    if (!storageKey || !shouldHydrate || sync) return;
+    const stored = readStorage(storage, storageKey);
     const currentValidate = validateRef.current;
     const nextValue = currentValidate == null || currentValidate(stored) ? stored : initialValue;
     setValue(nextValue);
     setDidHydrate(true);
-  }, [initialValue, shouldHydrate, storageKey]);
+  }, [initialValue, shouldHydrate, storageKey, storage, sync]);
   react.useEffect(() => {
     if (isControlled || !storageKey) return;
     if (!hydrated) return;
-    localStorage_utils.writeLocalStorage(storageKey, value);
-  }, [hydrated, isControlled, storageKey, value]);
+    writeStorage(storage, storageKey, value, maxAgeSeconds);
+  }, [hydrated, isControlled, storageKey, storage, maxAgeSeconds, value]);
   return {
     value,
     setValue,

package/dist/hooks/usePersistentState.d.ts

@@ -1,13 +1,33 @@
 import { Dispatch, SetStateAction } from 'react';
+export type PersistentStateStorage = 'localStorage' | 'cookie';
+/**
+ * 'effect' (default): the stored value is read in a useEffect after mount,
+ * so `value` starts as `initialValue` on every render — including the
+ * first client render of a component that was server-rendered — and only
+ * updates once the effect runs. This is what makes it hydration-safe.
+ *
+ * 'sync': the stored value is read synchronously during the initial
+ * render, so there's no post-mount update and no flash of `initialValue`.
+ * Only use this for components that are never part of an SSR/hydration
+ * pass (e.g. mounted purely client-side, behind a data-loading gate) —
+ * otherwise the server and the first client render will disagree and
+ * React will emit a hydration mismatch and force a visible patch-up,
+ * which is the exact flash this mode is meant to avoid.
+ */
+export type PersistentStateHydration = 'effect' | 'sync';
 export interface UsePersistentStateOptions<T> {
     initialValue: T;
     storageKey?: string;
     isControlled?: boolean;
     validate?: (value: unknown) => value is T;
+    storage?: PersistentStateStorage;
+    hydration?: PersistentStateHydration;
+    /** Only used when storage is 'cookie'. Defaults to one year. */
+    maxAgeSeconds?: number;
 }
 export interface UsePersistentStateResult<T> {
     value: T;
     setValue: Dispatch<SetStateAction<T>>;
     hydrated: boolean;
 }
-export declare function usePersistentState<T>({ initialValue, storageKey, isControlled, validate, }: UsePersistentStateOptions<T>): UsePersistentStateResult<T>;
+export declare function usePersistentState<T>({ initialValue, storageKey, isControlled, validate, storage, hydration, maxAgeSeconds, }: UsePersistentStateOptions<T>): UsePersistentStateResult<T>;

package/dist/hooks/usePersistentState.js

@@ -1,34 +1,54 @@
 'use client';
-import { useState, useRef, useEffect } from 'react';
+import { useRef, useState, useEffect } from 'react';
+import { readCookie, writeCookie } from '../utils/cookie.utils';
 import { readLocalStorage, writeLocalStorage } from '../utils/localStorage.utils';
 
+function readStorage(storage, key) {
+  return storage === "cookie" ? readCookie(key) : readLocalStorage(key);
+}
+function writeStorage(storage, key, value, maxAgeSeconds) {
+  if (storage === "cookie") {
+    writeCookie(key, value, maxAgeSeconds);
+  } else {
+    writeLocalStorage(key, value);
+  }
+}
 function usePersistentState({
   initialValue,
   storageKey,
   isControlled = false,
-  validate
+  validate,
+  storage = "localStorage",
+  hydration = "effect",
+  maxAgeSeconds
 }) {
   const shouldHydrate = !isControlled && Boolean(storageKey);
-  const [didHydrate, setDidHydrate] = useState(() => !shouldHydrate);
-  const [value, setValue] = useState(initialValue);
-  const hydrated = !shouldHydrate || didHydrate;
+  const sync = hydration === "sync";
   const validateRef = useRef(validate);
+  const [didHydrate, setDidHydrate] = useState(() => !shouldHydrate || sync);
+  const [value, setValue] = useState(() => {
+    if (!shouldHydrate || !sync) return initialValue;
+    const stored = readStorage(storage, storageKey);
+    const currentValidate = validateRef.current;
+    return currentValidate == null || currentValidate(stored) ? stored : initialValue;
+  });
+  const hydrated = !shouldHydrate || didHydrate;
   useEffect(() => {
     validateRef.current = validate;
   }, [validate]);
   useEffect(() => {
-    if (!storageKey || !shouldHydrate) return;
-    const stored = readLocalStorage(storageKey);
+    if (!storageKey || !shouldHydrate || sync) return;
+    const stored = readStorage(storage, storageKey);
     const currentValidate = validateRef.current;
     const nextValue = currentValidate == null || currentValidate(stored) ? stored : initialValue;
     setValue(nextValue);
     setDidHydrate(true);
-  }, [initialValue, shouldHydrate, storageKey]);
+  }, [initialValue, shouldHydrate, storageKey, storage, sync]);
   useEffect(() => {
     if (isControlled || !storageKey) return;
     if (!hydrated) return;
-    writeLocalStorage(storageKey, value);
-  }, [hydrated, isControlled, storageKey, value]);
+    writeStorage(storage, storageKey, value, maxAgeSeconds);
+  }, [hydrated, isControlled, storageKey, storage, maxAgeSeconds, value]);
   return {
     value,
     setValue,

package/dist/utils/cookie.utils.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+const ONE_YEAR_SECONDS = 60 * 60 * 24 * 365;
+function isBrowser() {
+  return typeof document !== "undefined";
+}
+function readCookie(name) {
+  if (!isBrowser()) return void 0;
+  try {
+    const match = document.cookie.split("; ").find((row) => row.startsWith(`${name}=`));
+    if (match == null) return void 0;
+    const raw = decodeURIComponent(match.slice(name.length + 1));
+    try {
+      return JSON.parse(raw);
+    } catch {
+      return raw;
+    }
+  } catch {
+    return void 0;
+  }
+}
+function writeCookie(name, value, maxAgeSeconds = ONE_YEAR_SECONDS) {
+  if (!isBrowser()) return;
+  try {
+    if (value === void 0) {
+      removeCookie(name);
+      return;
+    }
+    const raw = typeof value === "string" ? value : JSON.stringify(value);
+    document.cookie = `${name}=${encodeURIComponent(raw)}; path=/; max-age=${maxAgeSeconds}`;
+  } catch {
+  }
+}
+function removeCookie(name) {
+  if (!isBrowser()) return;
+  try {
+    document.cookie = `${name}=; path=/; max-age=0`;
+  } catch {
+  }
+}
+
+exports.readCookie = readCookie;
+exports.removeCookie = removeCookie;
+exports.writeCookie = writeCookie;

package/dist/utils/cookie.utils.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Safely read from a cookie.
+ * - Returns undefined if not in browser or the cookie is missing
+ * - Returns parsed JSON if the value is JSON
+ * - Returns plain string if not JSON
+ * - Never throws
+ */
+export declare function readCookie<T = unknown>(name: string): T | string | undefined;
+/**
+ * Safely write a cookie.
+ * - Automatically JSON.stringifies objects/arrays/booleans/numbers
+ * - Stores plain strings as-is
+ * - Never throws
+ */
+export declare function writeCookie(name: string, value: unknown, maxAgeSeconds?: number): void;
+/**
+ * Remove a cookie safely
+ */
+export declare function removeCookie(name: string): void;

package/dist/utils/cookie.utils.js

@@ -0,0 +1,40 @@
+const ONE_YEAR_SECONDS = 60 * 60 * 24 * 365;
+function isBrowser() {
+  return typeof document !== "undefined";
+}
+function readCookie(name) {
+  if (!isBrowser()) return void 0;
+  try {
+    const match = document.cookie.split("; ").find((row) => row.startsWith(`${name}=`));
+    if (match == null) return void 0;
+    const raw = decodeURIComponent(match.slice(name.length + 1));
+    try {
+      return JSON.parse(raw);
+    } catch {
+      return raw;
+    }
+  } catch {
+    return void 0;
+  }
+}
+function writeCookie(name, value, maxAgeSeconds = ONE_YEAR_SECONDS) {
+  if (!isBrowser()) return;
+  try {
+    if (value === void 0) {
+      removeCookie(name);
+      return;
+    }
+    const raw = typeof value === "string" ? value : JSON.stringify(value);
+    document.cookie = `${name}=${encodeURIComponent(raw)}; path=/; max-age=${maxAgeSeconds}`;
+  } catch {
+  }
+}
+function removeCookie(name) {
+  if (!isBrowser()) return;
+  try {
+    document.cookie = `${name}=; path=/; max-age=0`;
+  } catch {
+  }
+}
+
+export { readCookie, removeCookie, writeCookie };

package/package.json

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