@dbcdk/react-components 0.0.173 → 0.0.175

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

@@ -1,7 +1,7 @@
 .container {
   display: flex;
   align-items: center;
-  gap: var(--spacing-xl);
+  gap: var(--spacing-2xl);
   inline-size: 100%;
   box-sizing: border-box;
   flex-grow: 1;
@@ -40,7 +40,7 @@
   block-size: var(--component-size-md);
   border: none;
   background: transparent;
-  color: var(--color-fg-default);
+  color: var(--color-navbar-fg);
   border-radius: var(--border-radius-default);
   cursor: pointer;
   padding: 0;
@@ -48,12 +48,12 @@
 }
 
 .burgerButton:hover {
-  background-color: var(--color-bg-hover-subtle);
+  background-color: color-mix(in srgb, var(--color-navbar-fg) 12%, transparent);
 }
 
 .burgerButton:focus-visible {
   outline: none;
-  box-shadow: var(--focus-ring);
+  box-shadow: inset 0 0 0 1px var(--color-navbar-fg);
 }
 
 /* Mobile dropdown content */
@@ -170,7 +170,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-xs);
-  color: var(--color-fg-muted);
+  color: var(--color-navbar-fg-muted);
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
   text-decoration: none;
@@ -185,17 +185,17 @@
 
 /* Hover + focus */
 .link:hover {
-  color: var(--color-fg-default);
+  color: var(--color-navbar-fg);
 }
 .link:focus-visible {
   outline: none;
-  box-shadow: var(--focus-ring);
+  box-shadow: inset 0 0 0 1px var(--color-navbar-fg);
 }
 
 /* Active underline */
 .link.active,
 .link[aria-current='page'] {
-  color: var(--color-brand);
+  color: var(--color-navbar-brand);
   box-shadow: none;
 }
 
@@ -206,7 +206,7 @@
   inset-block-end: 0;
   inline-size: 0;
   block-size: 2px;
-  background-color: var(--color-border-strong);
+  background-color: var(--color-navbar-brand);
   transition: inline-size var(--transition-fast) var(--ease-standard);
 }
 
@@ -217,7 +217,7 @@
 .link.active::after,
 .link[aria-current='page']::after {
   inline-size: 100%;
-  background-color: var(--color-brand);
+  background-color: var(--color-navbar-brand);
 }
 
 /* Icons/images inside links */

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

@@ -161,7 +161,7 @@
 /* Regions */
 .header {
   min-width: 0;
-  background: var(--color-bg-surface);
+  background: var(--color-navbar-bg);
   border-bottom: var(--border-width-thin) solid var(--color-border-default);
   flex: 0 0 auto;
 }

package/dist/components/popover/Popover.cjs

@@ -96,7 +96,8 @@ const Popover = React.forwardRef(function Popover2({
   autoFocusContent = false,
   returnFocus = true,
   anchorRef,
-  overlayRef
+  overlayRef,
+  variant = "default"
 }, ref) {
   const internalId = React.useId();
   const resolvedContentId = contentId != null ? contentId : `popover-${internalId}`;
@@ -266,7 +267,8 @@ const Popover = React.forwardRef(function Popover2({
     if (lastCloseReasonRef.current === "outside") return;
     (_b = (_a = triggerElRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
   }, [isOpen, returnFocus]);
-  const icon = isOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "dbc-muted-text", size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "dbc-muted-text", size: 20 });
+  const chevronClassName = variant === "header" ? styles__default.default.chevronHeader : "dbc-muted-text";
+  const icon = isOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: chevronClassName, size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: chevronClassName, size: 20 });
   const setOverlayRef = React__namespace.useCallback(
     (node) => {
       assignRef(overlayRef, node);

package/dist/components/popover/Popover.d.ts

@@ -18,6 +18,8 @@ export interface PopoverProps {
     returnFocus?: boolean;
     anchorRef?: React.RefObject<HTMLElement | null>;
     overlayRef?: React.Ref<HTMLDivElement>;
+    /** 'header' colors the built-in chevron icon with --color-navbar-fg tokens — only meaningful inside/near AppHeader */
+    variant?: 'default' | 'header';
 }
 export interface PopoverHandle {
     close: () => void;

package/dist/components/popover/Popover.js

@@ -72,7 +72,8 @@ const Popover = forwardRef(function Popover2({
   autoFocusContent = false,
   returnFocus = true,
   anchorRef,
-  overlayRef
+  overlayRef,
+  variant = "default"
 }, ref) {
   const internalId = useId();
   const resolvedContentId = contentId != null ? contentId : `popover-${internalId}`;
@@ -242,7 +243,8 @@ const Popover = forwardRef(function Popover2({
     if (lastCloseReasonRef.current === "outside") return;
     (_b = (_a = triggerElRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
   }, [isOpen, returnFocus]);
-  const icon = isOpen ? /* @__PURE__ */ jsx(ChevronUp, { className: "dbc-muted-text", size: 20 }) : /* @__PURE__ */ jsx(ChevronDown, { className: "dbc-muted-text", size: 20 });
+  const chevronClassName = variant === "header" ? styles.chevronHeader : "dbc-muted-text";
+  const icon = isOpen ? /* @__PURE__ */ jsx(ChevronUp, { className: chevronClassName, size: 20 }) : /* @__PURE__ */ jsx(ChevronDown, { className: chevronClassName, size: 20 });
   const setOverlayRef = React.useCallback(
     (node) => {
       assignRef(overlayRef, node);

package/dist/components/popover/Popover.module.css

@@ -40,6 +40,7 @@
   position: fixed;
   border: 1px solid var(--color-border-subtle);
   background-color: var(--color-bg-surface);
+  color: var(--color-fg-default);
   border-radius: var(--border-radius-lg);
   padding: var(--spacing-xxs);
   z-index: var(--z-popover);
@@ -50,3 +51,7 @@
 .content[hidden] {
   display: none;
 }
+
+.chevronHeader {
+  color: var(--color-navbar-fg-muted);
+}

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

@@ -7,36 +7,43 @@ var Button = require('../../components/button/Button');
 var Menu = require('../../components/menu/Menu');
 var Popover = require('../../components/popover/Popover');
 var useTheme = require('../../hooks/useTheme');
+var types = require('../../styles/themes/types');
 
-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();
+function ThemeMenuSection({ themes, hrefs }) {
+  const { theme, switchTheme } = useTheme.useTheme({
+    defaultTheme: themes[0],
+    hrefs
+  });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: "Udseende" }),
-    THEME_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: "Tema" }),
+    themes.map((id) => /* @__PURE__ */ jsxRuntime.jsx(
       Menu.Menu.RadioItem,
       {
         name: "theme",
-        value: option.value,
-        checked: theme === option.value,
-        label: option.label,
-        onValueChange: (value) => switchTheme(value)
+        value: id,
+        checked: theme === id,
+        label: types.THEME_LABELS[id],
+        onValueChange: () => switchTheme(id)
       },
-      option.value
+      id
     ))
   ] });
 }
-function ThemeButton({ size, variant = "outlined" }) {
-  const { theme, switchTheme } = useTheme.useTheme();
+function ThemeButton({
+  themes,
+  hrefs,
+  size,
+  variant = "outlined"
+}) {
+  const { theme, switchTheme } = useTheme.useTheme({
+    defaultTheme: themes[0],
+    hrefs
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
     Popover.Popover,
     {
       matchTriggerWidth: false,
-      minWidth: "140px",
+      minWidth: "160px",
       trigger: (handleClick, chevron) => /* @__PURE__ */ jsxRuntime.jsxs(
         Button.Button,
         {
@@ -52,20 +59,20 @@ function ThemeButton({ size, variant = "outlined" }) {
         }
       ),
       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(
+        /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: "Tema" }),
+        themes.map((id) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: theme === id, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             onClick: () => {
-              switchTheme(option.value);
+              switchTheme(id);
               close();
             },
             children: [
-              option.icon,
-              option.label
+              types.THEME_LABELS[id],
+              theme === id && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 16 })
             ]
           }
-        ) }, option.value))
+        ) }, id))
       ] })
     }
   );

package/dist/components/theme-button/ThemeButton.d.ts

@@ -1,8 +1,14 @@
 import type { JSX } from 'react';
 import type { ButtonSize, ButtonVariant } from '../../components/button/Button';
-export interface ThemeButtonProps {
+import type { ThemeHrefs, ThemeId } from '../../hooks/useTheme';
+export interface ThemeMenuSectionProps {
+    /** Every theme to offer as an option. The first entry is treated as the default. */
+    themes: readonly ThemeId[];
+    hrefs?: ThemeHrefs;
+}
+export interface ThemeButtonProps extends ThemeMenuSectionProps {
     size?: ButtonSize;
     variant?: ButtonVariant;
 }
-export declare function ThemeMenuSection(): JSX.Element;
-export declare function ThemeButton({ size, variant }: ThemeButtonProps): JSX.Element;
+export declare function ThemeMenuSection({ themes, hrefs }: ThemeMenuSectionProps): JSX.Element;
+export declare function ThemeButton({ themes, hrefs, size, variant, }: ThemeButtonProps): JSX.Element;

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

@@ -1,40 +1,47 @@
 'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Palette, Monitor, Sun, Moon } from 'lucide-react';
+import { Check, Palette } 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';
+import { THEME_LABELS } from '../../styles/themes/types';
 
-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();
+function ThemeMenuSection({ themes, hrefs }) {
+  const { theme, switchTheme } = useTheme({
+    defaultTheme: themes[0],
+    hrefs
+  });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Menu.Header, { children: "Udseende" }),
-    THEME_OPTIONS.map((option) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Menu.Header, { children: "Tema" }),
+    themes.map((id) => /* @__PURE__ */ jsx(
       Menu.RadioItem,
       {
         name: "theme",
-        value: option.value,
-        checked: theme === option.value,
-        label: option.label,
-        onValueChange: (value) => switchTheme(value)
+        value: id,
+        checked: theme === id,
+        label: THEME_LABELS[id],
+        onValueChange: () => switchTheme(id)
       },
-      option.value
+      id
     ))
   ] });
 }
-function ThemeButton({ size, variant = "outlined" }) {
-  const { theme, switchTheme } = useTheme();
+function ThemeButton({
+  themes,
+  hrefs,
+  size,
+  variant = "outlined"
+}) {
+  const { theme, switchTheme } = useTheme({
+    defaultTheme: themes[0],
+    hrefs
+  });
   return /* @__PURE__ */ jsx(
     Popover,
     {
       matchTriggerWidth: false,
-      minWidth: "140px",
+      minWidth: "160px",
       trigger: (handleClick, chevron) => /* @__PURE__ */ jsxs(
         Button,
         {
@@ -50,20 +57,20 @@ function ThemeButton({ size, variant = "outlined" }) {
         }
       ),
       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(
+        /* @__PURE__ */ jsx(Menu.Header, { children: "Tema" }),
+        themes.map((id) => /* @__PURE__ */ jsx(Menu.Item, { active: theme === id, children: /* @__PURE__ */ jsxs(
           "button",
           {
             onClick: () => {
-              switchTheme(option.value);
+              switchTheme(id);
               close();
             },
             children: [
-              option.icon,
-              option.label
+              THEME_LABELS[id],
+              theme === id && /* @__PURE__ */ jsx(Check, { size: 16 })
             ]
           }
-        ) }, option.value))
+        ) }, id))
       ] })
     }
   );

package/dist/components/theme-script/ThemeScript.cjs

@@ -1,22 +1,60 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var colorScheme_constants = require('../../utils/color-scheme.constants');
 var theme_constants = require('../../utils/theme.constants');
 
-function buildThemeInitScript(defaultTheme) {
-  return `(function(){try{
-  var KEY=${JSON.stringify(theme_constants.THEME_STORAGE_KEY)};
-  var VARIANTS=${JSON.stringify(theme_constants.THEME_VARIANTS)};
-  function isVariant(x){return !!x && VARIANTS.indexOf(x)!==-1}
+function buildInitScript(defaultColorScheme, hrefs, defaultTheme, linkId, storageKey) {
+  const hrefById = {};
+  for (const [id, href] of Object.entries(hrefs)) {
+    if (id !== defaultTheme && href) hrefById[id] = href;
+  }
+  const themeBlock = defaultTheme === void 0 ? "" : `try{
+  var THEME_KEY=${JSON.stringify(storageKey)};
+  var THEME_DEFAULT=${JSON.stringify(defaultTheme)};
+  var HREFS=${JSON.stringify(hrefById)};
+  var LINK_ID=${JSON.stringify(linkId)};
+  var resolvedTheme=getCookie(THEME_KEY);
+  if(!resolvedTheme){try{resolvedTheme=localStorage.getItem(THEME_KEY)}catch(e){}}
+  if(!resolvedTheme)resolvedTheme=THEME_DEFAULT;
+  if(resolvedTheme!==THEME_DEFAULT&&HREFS[resolvedTheme]){
+    var link=document.createElement('link');
+    link.id=LINK_ID;
+    link.rel='stylesheet';
+    link.href=HREFS[resolvedTheme];
+    document.head.appendChild(link);
+  }
+  document.documentElement.dataset.productTheme=resolvedTheme;
+}catch(e){}`;
+  return `(function(){
   function getCookie(name){var m=document.cookie.match(new RegExp('(?:^|; )'+name+'=([^;]*)'));return m?decodeURIComponent(m[1]):null}
-  var resolved=${JSON.stringify(defaultTheme)};
-  var fromCookie=getCookie(KEY);
-  if(isVariant(fromCookie)){resolved=fromCookie}else{try{var fromStorage=localStorage.getItem(KEY);if(isVariant(fromStorage))resolved=fromStorage}catch(e){}}
-  document.documentElement.dataset.theme=resolved;
-}catch(e){}})();`;
+  try{
+  var SCHEME_KEY=${JSON.stringify(colorScheme_constants.COLOR_SCHEME_STORAGE_KEY)};
+  var SCHEMES=${JSON.stringify(colorScheme_constants.COLOR_SCHEMES)};
+  function isScheme(x){return !!x && SCHEMES.indexOf(x)!==-1}
+  var resolvedScheme=${JSON.stringify(defaultColorScheme)};
+  var fromCookie=getCookie(SCHEME_KEY);
+  if(isScheme(fromCookie)){resolvedScheme=fromCookie}else{try{var fromStorage=localStorage.getItem(SCHEME_KEY);if(isScheme(fromStorage))resolvedScheme=fromStorage}catch(e){}}
+  document.documentElement.dataset.theme=resolvedScheme;
+  }catch(e){}
+  ${themeBlock}
+})();`;
 }
-function ThemeScript({ defaultTheme = "system" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("script", { dangerouslySetInnerHTML: { __html: buildThemeInitScript(defaultTheme) } });
+function ThemeScript({
+  defaultColorScheme = "system",
+  defaultTheme,
+  hrefs = {},
+  linkId = theme_constants.THEME_LINK_ID,
+  storageKey = theme_constants.THEME_STORAGE_KEY
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "script",
+    {
+      dangerouslySetInnerHTML: {
+        __html: buildInitScript(defaultColorScheme, hrefs, defaultTheme, linkId, storageKey)
+      }
+    }
+  );
 }
 
 exports.ThemeScript = ThemeScript;

package/dist/components/theme-script/ThemeScript.d.ts

@@ -1,25 +1,48 @@
-import type { ThemeVariant } from '../../utils/theme.constants';
+import type { ThemeHrefs, ThemeId } from '../../styles/themes/types';
+import type { ColorScheme } from '../../utils/color-scheme.constants';
 export interface ThemeScriptProps {
-    /** Theme applied when nothing is stored yet. Defaults to 'system'. */
-    defaultTheme?: ThemeVariant;
+    /** Color scheme applied when nothing is stored yet. Defaults to 'system'. */
+    defaultColorScheme?: ColorScheme;
+    /**
+     * The product theme the app already loads via a normal static import. Omit
+     * entirely if the app only ever ships one theme (e.g. just dbc) — no
+     * `data-product-theme` handling happens at all in that case.
+     */
+    defaultTheme?: ThemeId;
+    /** Per-theme CSS URL, for any theme not already loaded some other way. */
+    hrefs?: ThemeHrefs;
+    /** DOM id for the `<link>` this script (and useTheme) manage. */
+    linkId?: string;
+    storageKey?: string;
 }
 /**
- * Renders a blocking inline <script> that reads the persisted theme (cookie,
- * falling back to localStorage) and sets `data-theme` on <html> synchronously
- * — before the page paints and before React hydrates.
+ * Renders a blocking inline <script> that restores both the persisted color
+ * scheme (light/dark/system) and, if `defaultTheme` is given, the persisted
+ * product theme — synchronously, before the page paints and before React
+ * hydrates. One tag covers both axes, so most apps only ever need this one
+ * component in `<head>`.
  *
- * `useTheme()` alone cannot prevent a flash of the wrong theme on load: its
- * resolution runs inside a `useEffect`, which by definition only fires after
- * the first render has already been committed (and, server-side, there is no
- * `document` to read a cookie from at all). Closing that gap requires code
- * that runs outside React's render lifecycle — this component is that code.
+ * Neither `useColorScheme()` nor `useTheme()` alone can prevent a flash of
+ * the wrong value on load: their resolution runs inside a `useEffect`, which
+ * only fires after the first render has already been committed (and,
+ * server-side, there is no `document` to read a cookie from at all). Closing
+ * that gap requires code that runs outside React's render lifecycle — this
+ * component is that code.
  *
  * Place it as early as possible in <head>, e.g. in Next.js's `_document.js`:
  *
  * ```tsx
  * <Head>
+ *   <ThemeScript defaultTheme="filmstriben" />
+ * </Head>
+ * ```
+ *
+ * Or, for an app with only one product theme (no `defaultTheme` needed):
+ *
+ * ```tsx
+ * <Head>
  *   <ThemeScript />
  * </Head>
  * ```
  */
-export declare function ThemeScript({ defaultTheme }: ThemeScriptProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeScript({ defaultColorScheme, defaultTheme, hrefs, linkId, storageKey, }: ThemeScriptProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/theme-script/ThemeScript.js

@@ -1,20 +1,58 @@
 import { jsx } from 'react/jsx-runtime';
-import { THEME_STORAGE_KEY, THEME_VARIANTS } from '../../utils/theme.constants';
+import { COLOR_SCHEME_STORAGE_KEY, COLOR_SCHEMES } from '../../utils/color-scheme.constants';
+import { THEME_LINK_ID, THEME_STORAGE_KEY } from '../../utils/theme.constants';
 
-function buildThemeInitScript(defaultTheme) {
-  return `(function(){try{
-  var KEY=${JSON.stringify(THEME_STORAGE_KEY)};
-  var VARIANTS=${JSON.stringify(THEME_VARIANTS)};
-  function isVariant(x){return !!x && VARIANTS.indexOf(x)!==-1}
+function buildInitScript(defaultColorScheme, hrefs, defaultTheme, linkId, storageKey) {
+  const hrefById = {};
+  for (const [id, href] of Object.entries(hrefs)) {
+    if (id !== defaultTheme && href) hrefById[id] = href;
+  }
+  const themeBlock = defaultTheme === void 0 ? "" : `try{
+  var THEME_KEY=${JSON.stringify(storageKey)};
+  var THEME_DEFAULT=${JSON.stringify(defaultTheme)};
+  var HREFS=${JSON.stringify(hrefById)};
+  var LINK_ID=${JSON.stringify(linkId)};
+  var resolvedTheme=getCookie(THEME_KEY);
+  if(!resolvedTheme){try{resolvedTheme=localStorage.getItem(THEME_KEY)}catch(e){}}
+  if(!resolvedTheme)resolvedTheme=THEME_DEFAULT;
+  if(resolvedTheme!==THEME_DEFAULT&&HREFS[resolvedTheme]){
+    var link=document.createElement('link');
+    link.id=LINK_ID;
+    link.rel='stylesheet';
+    link.href=HREFS[resolvedTheme];
+    document.head.appendChild(link);
+  }
+  document.documentElement.dataset.productTheme=resolvedTheme;
+}catch(e){}`;
+  return `(function(){
   function getCookie(name){var m=document.cookie.match(new RegExp('(?:^|; )'+name+'=([^;]*)'));return m?decodeURIComponent(m[1]):null}
-  var resolved=${JSON.stringify(defaultTheme)};
-  var fromCookie=getCookie(KEY);
-  if(isVariant(fromCookie)){resolved=fromCookie}else{try{var fromStorage=localStorage.getItem(KEY);if(isVariant(fromStorage))resolved=fromStorage}catch(e){}}
-  document.documentElement.dataset.theme=resolved;
-}catch(e){}})();`;
+  try{
+  var SCHEME_KEY=${JSON.stringify(COLOR_SCHEME_STORAGE_KEY)};
+  var SCHEMES=${JSON.stringify(COLOR_SCHEMES)};
+  function isScheme(x){return !!x && SCHEMES.indexOf(x)!==-1}
+  var resolvedScheme=${JSON.stringify(defaultColorScheme)};
+  var fromCookie=getCookie(SCHEME_KEY);
+  if(isScheme(fromCookie)){resolvedScheme=fromCookie}else{try{var fromStorage=localStorage.getItem(SCHEME_KEY);if(isScheme(fromStorage))resolvedScheme=fromStorage}catch(e){}}
+  document.documentElement.dataset.theme=resolvedScheme;
+  }catch(e){}
+  ${themeBlock}
+})();`;
 }
-function ThemeScript({ defaultTheme = "system" }) {
-  return /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: buildThemeInitScript(defaultTheme) } });
+function ThemeScript({
+  defaultColorScheme = "system",
+  defaultTheme,
+  hrefs = {},
+  linkId = THEME_LINK_ID,
+  storageKey = THEME_STORAGE_KEY
+}) {
+  return /* @__PURE__ */ jsx(
+    "script",
+    {
+      dangerouslySetInnerHTML: {
+        __html: buildInitScript(defaultColorScheme, hrefs, defaultTheme, linkId, storageKey)
+      }
+    }
+  );
 }
 
 export { ThemeScript };

package/dist/hooks/useColorScheme.cjs

@@ -0,0 +1,74 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var colorScheme_constants = require('../utils/color-scheme.constants');
+var cookie_utils = require('../utils/cookie.utils');
+var localStorage_utils = require('../utils/localStorage.utils');
+
+function persistColorScheme(id) {
+  localStorage_utils.writeLocalStorage(colorScheme_constants.COLOR_SCHEME_STORAGE_KEY, id);
+  cookie_utils.writeCookie(colorScheme_constants.COLOR_SCHEME_STORAGE_KEY, id);
+}
+function getDomColorScheme() {
+  return document.documentElement.dataset.theme;
+}
+function applyColorScheme(id) {
+  document.documentElement.dataset.theme = id;
+}
+let currentColorScheme = null;
+let resolved = false;
+const listeners = /* @__PURE__ */ new Set();
+function notify() {
+  listeners.forEach((listener) => listener());
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function getSnapshot() {
+  return currentColorScheme;
+}
+function getServerSnapshot() {
+  return null;
+}
+function resolveInitialColorScheme(initialColorScheme) {
+  const fromDomAttribute = getDomColorScheme();
+  let resolvedColorScheme = colorScheme_constants.isColorScheme(fromDomAttribute) ? fromDomAttribute : initialColorScheme;
+  const fromCookie = cookie_utils.readCookie(colorScheme_constants.COLOR_SCHEME_STORAGE_KEY);
+  if (colorScheme_constants.isColorScheme(fromCookie)) {
+    resolvedColorScheme = fromCookie;
+  } else {
+    const fromStorage = localStorage_utils.readLocalStorage(colorScheme_constants.COLOR_SCHEME_STORAGE_KEY);
+    if (colorScheme_constants.isColorScheme(fromStorage)) resolvedColorScheme = fromStorage;
+  }
+  return resolvedColorScheme;
+}
+function ensureResolved(initialColorScheme) {
+  if (resolved) return;
+  resolved = true;
+  const value = resolveInitialColorScheme(initialColorScheme);
+  applyColorScheme(value);
+  persistColorScheme(value);
+  currentColorScheme = value;
+  notify();
+}
+function switchColorScheme(id) {
+  applyColorScheme(id);
+  persistColorScheme(id);
+  currentColorScheme = id;
+  resolved = true;
+  notify();
+  return id;
+}
+function useColorScheme(initialColorScheme = "system") {
+  react.useEffect(() => {
+    ensureResolved(initialColorScheme);
+  }, [initialColorScheme]);
+  const colorScheme = react.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return { colorScheme, switchColorScheme };
+}
+
+exports.useColorScheme = useColorScheme;

package/dist/hooks/useColorScheme.d.ts

@@ -0,0 +1,6 @@
+import type { ColorScheme } from '../utils/color-scheme.constants';
+export type { ColorScheme };
+export declare function useColorScheme(initialColorScheme?: ColorScheme): {
+    colorScheme: ColorScheme | null;
+    switchColorScheme: (id: ColorScheme) => ColorScheme;
+};