@doneisbetter/gds-theme 3.0.1 → 3.0.2

package/dist/chunk-E55P7FOX.mjs

@@ -0,0 +1,226 @@
+import {
+  applyGdsFontLane,
+  gdsTheme,
+  getGdsFontLanes,
+  getGdsThemePresets,
+  resolveGdsThemePreset
+} from "./chunk-TAPLA36E.mjs";
+
+// src/theme-runtime.ts
+import { useCallback, useEffect, useState } from "react";
+var defaultStorageKey = "gds-theme-preset-selection";
+function isThemePresetId(value) {
+  return typeof value === "string" && getGdsThemePresets().some((preset) => preset.id === value);
+}
+function isFontLaneId(value) {
+  return typeof value === "string" && getGdsFontLanes().some((lane) => lane.id === value);
+}
+function isScheme(value) {
+  return value === "light" || value === "dark" || value === "auto";
+}
+function resolveEffectiveScheme(preset, colorScheme) {
+  if (preset === "dark-public" || preset === "neon-night") {
+    return "dark";
+  }
+  return colorScheme;
+}
+function createGdsThemePresetSelection(stored = {}) {
+  const preset = isThemePresetId(stored.preset) ? stored.preset : "default";
+  const requestedColorScheme = isScheme(stored.colorScheme) ? stored.colorScheme : "light";
+  const colorScheme = resolveEffectiveScheme(preset, requestedColorScheme);
+  const fontLane = isFontLaneId(stored.fontLane) ? stored.fontLane : "inter";
+  const brandPrimary = typeof stored.brandPrimary === "string" ? stored.brandPrimary : "blue";
+  const brandFlatSurfaces = typeof stored.brandFlatSurfaces === "boolean" ? stored.brandFlatSurfaces : true;
+  const brandEditorialSerif = typeof stored.brandEditorialSerif === "boolean" ? stored.brandEditorialSerif : false;
+  const runtimeKey = `${preset}-${colorScheme}-${brandPrimary}-${brandFlatSurfaces}-${brandEditorialSerif}-${fontLane}`;
+  return {
+    preset,
+    colorScheme,
+    theme: applyGdsFontLane(resolveGdsThemePreset(preset, {
+      brandPrimary,
+      brandFlatSurfaces,
+      brandEditorialSerif
+    }), fontLane),
+    fontLane,
+    runtimeKey,
+    brandPrimary,
+    brandFlatSurfaces,
+    brandEditorialSerif
+  };
+}
+function readStoredSelection(storageKey, initialSelection) {
+  if (typeof window === "undefined") {
+    return createGdsThemePresetSelection(initialSelection);
+  }
+  try {
+    const stored = window.localStorage.getItem(storageKey);
+    return createGdsThemePresetSelection(stored ? JSON.parse(stored) : initialSelection);
+  } catch {
+    return createGdsThemePresetSelection(initialSelection);
+  }
+}
+function persistSelection(storageKey, selection) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  const stored = {
+    preset: selection.preset,
+    colorScheme: selection.colorScheme,
+    fontLane: selection.fontLane,
+    runtimeKey: selection.runtimeKey,
+    brandPrimary: selection.brandPrimary,
+    brandFlatSurfaces: selection.brandFlatSurfaces,
+    brandEditorialSerif: selection.brandEditorialSerif
+  };
+  try {
+    window.localStorage.setItem(storageKey, JSON.stringify(stored));
+  } catch {
+  }
+}
+function resolveDocumentScheme(selection) {
+  if (selection.colorScheme !== "auto") {
+    return selection.colorScheme;
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function applyDocumentRuntime(selection) {
+  document.documentElement.setAttribute("data-mantine-color-scheme", resolveDocumentScheme(selection));
+  document.documentElement.setAttribute("data-gds-theme-runtime", selection.runtimeKey ?? `${selection.preset}-${selection.colorScheme}`);
+  document.documentElement.setAttribute("data-gds-font-lane", selection.fontLane);
+}
+function useGdsThemePresetState({
+  storageKey = defaultStorageKey,
+  initialSelection,
+  applyToDocument = true
+} = {}) {
+  const [selection, setSelection] = useState(() => readStoredSelection(storageKey, initialSelection));
+  useEffect(() => {
+    if (applyToDocument) {
+      applyDocumentRuntime(selection);
+    }
+    persistSelection(storageKey, selection);
+    if (!applyToDocument || selection.colorScheme !== "auto") {
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => applyDocumentRuntime(selection);
+    mediaQuery.addEventListener("change", handleChange);
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, [applyToDocument, selection, storageKey]);
+  const setRuntimeSelection = useCallback((nextSelection) => {
+    setSelection(createGdsThemePresetSelection(nextSelection));
+  }, []);
+  const setPreset = useCallback((preset) => {
+    setSelection((current) => createGdsThemePresetSelection({ ...current, preset }));
+  }, []);
+  const setScheme = useCallback((colorScheme) => {
+    setSelection((current) => createGdsThemePresetSelection({ ...current, colorScheme }));
+  }, []);
+  const setFontLane = useCallback((fontLane) => {
+    setSelection((current) => createGdsThemePresetSelection({ ...current, fontLane }));
+  }, []);
+  const setBrandOptions = useCallback((options) => {
+    setSelection((current) => createGdsThemePresetSelection({ ...current, ...options }));
+  }, []);
+  const reset = useCallback(() => {
+    setSelection(createGdsThemePresetSelection(initialSelection));
+  }, [initialSelection]);
+  return {
+    selection,
+    setSelection: setRuntimeSelection,
+    setPreset,
+    setScheme,
+    setFontLane,
+    setBrandOptions,
+    reset
+  };
+}
+
+// src/i18n.ts
+import { createContext, useContext } from "react";
+var GdsI18nContext = createContext({
+  locale: "en",
+  messages: {}
+});
+function useGdsTranslation() {
+  const { messages, locale } = useContext(GdsI18nContext);
+  return {
+    t: (id, defaultMessage) => messages[id] || defaultMessage,
+    locale
+  };
+}
+
+// src/GdsProvider.tsx
+import { MantineProvider, DirectionProvider, Box } from "@mantine/core";
+import { ModalsProvider } from "@mantine/modals";
+import { Notifications } from "@mantine/notifications";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function GdsProvider({
+  children,
+  locale = "en",
+  messages = {},
+  theme = gdsTheme,
+  defaultColorScheme = "light",
+  forceColorScheme
+}) {
+  const isRtl = ["ar", "he"].includes(locale);
+  const dir = isRtl ? "rtl" : "ltr";
+  return /* @__PURE__ */ jsx(DirectionProvider, { initialDirection: dir, children: /* @__PURE__ */ jsx(GdsI18nContext.Provider, { value: { locale, messages }, children: /* @__PURE__ */ jsx(
+    MantineProvider,
+    {
+      theme,
+      withCssVariables: true,
+      withGlobalClasses: true,
+      defaultColorScheme,
+      forceColorScheme,
+      children: /* @__PURE__ */ jsx(ModalsProvider, { children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Notifications, {}),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            dir,
+            mih: "100vh",
+            h: "100%",
+            bg: "var(--mantine-color-body)",
+            c: "var(--mantine-color-text)",
+            style: { transition: "background-color 120ms ease, color 120ms ease" },
+            children
+          }
+        )
+      ] }) })
+    }
+  ) }) });
+}
+
+// src/notifications.ts
+import { notifications } from "@mantine/notifications";
+var toneColorMap = {
+  success: "teal",
+  error: "red",
+  warning: "yellow",
+  info: "blue",
+  neutral: "gray"
+};
+function showGdsNotification({
+  message,
+  title,
+  tone = "info",
+  autoClose
+}) {
+  notifications.show({
+    message,
+    title,
+    color: toneColorMap[tone],
+    autoClose
+  });
+}
+
+export {
+  createGdsThemePresetSelection,
+  useGdsThemePresetState,
+  useGdsTranslation,
+  GdsProvider,
+  showGdsNotification
+};

package/dist/client.d.mts

@@ -1,7 +1,38 @@
-export { GdsFontLane, GdsFontLaneId, GdsThemePreset, GdsThemePresetId, applyGdsFontLane, createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, getGdsFontLanes, getGdsThemePresets, resolveGdsFontLane, resolveGdsThemePreset, withGdsMotion } from './server.mjs';
+import { GdsThemePresetId, GdsFontLaneId } from './server.mjs';
+export { GdsFontLane, GdsThemePreset, applyGdsFontLane, createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, getGdsFontLanes, getGdsThemePresets, resolveGdsFontLane, resolveGdsThemePreset, withGdsMotion } from './server.mjs';
+import { MantineThemeOverride } from '@mantine/core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { MantineThemeOverride } from '@mantine/core';
+
+type GdsThemeScheme = 'light' | 'dark' | 'auto';
+interface GdsStoredThemePresetState {
+    preset: GdsThemePresetId;
+    colorScheme: GdsThemeScheme;
+    fontLane: GdsFontLaneId;
+    runtimeKey?: string;
+    brandPrimary?: string;
+    brandFlatSurfaces?: boolean;
+    brandEditorialSerif?: boolean;
+}
+interface GdsThemePresetSelection extends GdsStoredThemePresetState {
+    theme: MantineThemeOverride;
+}
+interface UseGdsThemePresetStateOptions {
+    storageKey?: string;
+    initialSelection?: Partial<GdsStoredThemePresetState>;
+    applyToDocument?: boolean;
+}
+interface UseGdsThemePresetStateResult {
+    selection: GdsThemePresetSelection;
+    setSelection: (selection: Partial<GdsStoredThemePresetState>) => void;
+    setPreset: (preset: GdsThemePresetId) => void;
+    setScheme: (scheme: GdsThemeScheme) => void;
+    setFontLane: (fontLane: GdsFontLaneId) => void;
+    setBrandOptions: (options: Pick<GdsStoredThemePresetState, 'brandPrimary' | 'brandFlatSurfaces' | 'brandEditorialSerif'>) => void;
+    reset: () => void;
+}
+declare function createGdsThemePresetSelection(stored?: Partial<GdsStoredThemePresetState>): GdsThemePresetSelection;
+declare function useGdsThemePresetState({ storageKey, initialSelection, applyToDocument, }?: UseGdsThemePresetStateOptions): UseGdsThemePresetStateResult;
 
 interface GdsProviderProps {
     children: React.ReactNode;
@@ -36,4 +67,4 @@ interface GdsNotificationOptions {
 }
 declare function showGdsNotification({ message, title, tone, autoClose, }: GdsNotificationOptions): void;
 
-export { type GdsNotificationOptions, type GdsNotificationTone, GdsProvider, type GdsProviderProps, showGdsNotification, useGdsTranslation };
+export { GdsFontLaneId, type GdsNotificationOptions, type GdsNotificationTone, GdsProvider, type GdsProviderProps, type GdsStoredThemePresetState, GdsThemePresetId, type GdsThemePresetSelection, type GdsThemeScheme, type UseGdsThemePresetStateOptions, type UseGdsThemePresetStateResult, createGdsThemePresetSelection, showGdsNotification, useGdsThemePresetState, useGdsTranslation };

package/dist/client.d.ts

@@ -1,7 +1,38 @@
-export { GdsFontLane, GdsFontLaneId, GdsThemePreset, GdsThemePresetId, applyGdsFontLane, createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, getGdsFontLanes, getGdsThemePresets, resolveGdsFontLane, resolveGdsThemePreset, withGdsMotion } from './server.js';
+import { GdsThemePresetId, GdsFontLaneId } from './server.js';
+export { GdsFontLane, GdsThemePreset, applyGdsFontLane, createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, getGdsFontLanes, getGdsThemePresets, resolveGdsFontLane, resolveGdsThemePreset, withGdsMotion } from './server.js';
+import { MantineThemeOverride } from '@mantine/core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { MantineThemeOverride } from '@mantine/core';
+
+type GdsThemeScheme = 'light' | 'dark' | 'auto';
+interface GdsStoredThemePresetState {
+    preset: GdsThemePresetId;
+    colorScheme: GdsThemeScheme;
+    fontLane: GdsFontLaneId;
+    runtimeKey?: string;
+    brandPrimary?: string;
+    brandFlatSurfaces?: boolean;
+    brandEditorialSerif?: boolean;
+}
+interface GdsThemePresetSelection extends GdsStoredThemePresetState {
+    theme: MantineThemeOverride;
+}
+interface UseGdsThemePresetStateOptions {
+    storageKey?: string;
+    initialSelection?: Partial<GdsStoredThemePresetState>;
+    applyToDocument?: boolean;
+}
+interface UseGdsThemePresetStateResult {
+    selection: GdsThemePresetSelection;
+    setSelection: (selection: Partial<GdsStoredThemePresetState>) => void;
+    setPreset: (preset: GdsThemePresetId) => void;
+    setScheme: (scheme: GdsThemeScheme) => void;
+    setFontLane: (fontLane: GdsFontLaneId) => void;
+    setBrandOptions: (options: Pick<GdsStoredThemePresetState, 'brandPrimary' | 'brandFlatSurfaces' | 'brandEditorialSerif'>) => void;
+    reset: () => void;
+}
+declare function createGdsThemePresetSelection(stored?: Partial<GdsStoredThemePresetState>): GdsThemePresetSelection;
+declare function useGdsThemePresetState({ storageKey, initialSelection, applyToDocument, }?: UseGdsThemePresetStateOptions): UseGdsThemePresetStateResult;
 
 interface GdsProviderProps {
     children: React.ReactNode;
@@ -36,4 +67,4 @@ interface GdsNotificationOptions {
 }
 declare function showGdsNotification({ message, title, tone, autoClose, }: GdsNotificationOptions): void;
 
-export { type GdsNotificationOptions, type GdsNotificationTone, GdsProvider, type GdsProviderProps, showGdsNotification, useGdsTranslation };
+export { GdsFontLaneId, type GdsNotificationOptions, type GdsNotificationTone, GdsProvider, type GdsProviderProps, type GdsStoredThemePresetState, GdsThemePresetId, type GdsThemePresetSelection, type GdsThemeScheme, type UseGdsThemePresetStateOptions, type UseGdsThemePresetStateResult, createGdsThemePresetSelection, showGdsNotification, useGdsThemePresetState, useGdsTranslation };

package/dist/client.js

@@ -22,6 +22,7 @@ var client_exports = {};
 __export(client_exports, {
   GdsProvider: () => GdsProvider,
   applyGdsFontLane: () => applyGdsFontLane,
+  createGdsThemePresetSelection: () => createGdsThemePresetSelection,
   createPublicBrandTheme: () => createPublicBrandTheme,
   extendGdsTheme: () => extendGdsTheme,
   gdsDarkPublicTheme: () => gdsDarkPublicTheme,
@@ -33,6 +34,7 @@ __export(client_exports, {
   resolveGdsFontLane: () => resolveGdsFontLane,
   resolveGdsThemePreset: () => resolveGdsThemePreset,
   showGdsNotification: () => showGdsNotification,
+  useGdsThemePresetState: () => useGdsThemePresetState,
   useGdsTranslation: () => useGdsTranslation,
   withGdsMotion: () => withGdsMotion
 });
@@ -378,19 +380,151 @@ function applyGdsFontLane(theme, laneId) {
   });
 }
 
+// src/theme-runtime.ts
+var import_react = require("react");
+var defaultStorageKey = "gds-theme-preset-selection";
+function isThemePresetId(value) {
+  return typeof value === "string" && getGdsThemePresets().some((preset) => preset.id === value);
+}
+function isFontLaneId(value) {
+  return typeof value === "string" && getGdsFontLanes().some((lane) => lane.id === value);
+}
+function isScheme(value) {
+  return value === "light" || value === "dark" || value === "auto";
+}
+function resolveEffectiveScheme(preset, colorScheme) {
+  if (preset === "dark-public" || preset === "neon-night") {
+    return "dark";
+  }
+  return colorScheme;
+}
+function createGdsThemePresetSelection(stored = {}) {
+  const preset = isThemePresetId(stored.preset) ? stored.preset : "default";
+  const requestedColorScheme = isScheme(stored.colorScheme) ? stored.colorScheme : "light";
+  const colorScheme = resolveEffectiveScheme(preset, requestedColorScheme);
+  const fontLane = isFontLaneId(stored.fontLane) ? stored.fontLane : "inter";
+  const brandPrimary = typeof stored.brandPrimary === "string" ? stored.brandPrimary : "blue";
+  const brandFlatSurfaces = typeof stored.brandFlatSurfaces === "boolean" ? stored.brandFlatSurfaces : true;
+  const brandEditorialSerif = typeof stored.brandEditorialSerif === "boolean" ? stored.brandEditorialSerif : false;
+  const runtimeKey = `${preset}-${colorScheme}-${brandPrimary}-${brandFlatSurfaces}-${brandEditorialSerif}-${fontLane}`;
+  return {
+    preset,
+    colorScheme,
+    theme: applyGdsFontLane(resolveGdsThemePreset(preset, {
+      brandPrimary,
+      brandFlatSurfaces,
+      brandEditorialSerif
+    }), fontLane),
+    fontLane,
+    runtimeKey,
+    brandPrimary,
+    brandFlatSurfaces,
+    brandEditorialSerif
+  };
+}
+function readStoredSelection(storageKey, initialSelection) {
+  if (typeof window === "undefined") {
+    return createGdsThemePresetSelection(initialSelection);
+  }
+  try {
+    const stored = window.localStorage.getItem(storageKey);
+    return createGdsThemePresetSelection(stored ? JSON.parse(stored) : initialSelection);
+  } catch {
+    return createGdsThemePresetSelection(initialSelection);
+  }
+}
+function persistSelection(storageKey, selection) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  const stored = {
+    preset: selection.preset,
+    colorScheme: selection.colorScheme,
+    fontLane: selection.fontLane,
+    runtimeKey: selection.runtimeKey,
+    brandPrimary: selection.brandPrimary,
+    brandFlatSurfaces: selection.brandFlatSurfaces,
+    brandEditorialSerif: selection.brandEditorialSerif
+  };
+  try {
+    window.localStorage.setItem(storageKey, JSON.stringify(stored));
+  } catch {
+  }
+}
+function resolveDocumentScheme(selection) {
+  if (selection.colorScheme !== "auto") {
+    return selection.colorScheme;
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function applyDocumentRuntime(selection) {
+  document.documentElement.setAttribute("data-mantine-color-scheme", resolveDocumentScheme(selection));
+  document.documentElement.setAttribute("data-gds-theme-runtime", selection.runtimeKey ?? `${selection.preset}-${selection.colorScheme}`);
+  document.documentElement.setAttribute("data-gds-font-lane", selection.fontLane);
+}
+function useGdsThemePresetState({
+  storageKey = defaultStorageKey,
+  initialSelection,
+  applyToDocument = true
+} = {}) {
+  const [selection, setSelection] = (0, import_react.useState)(() => readStoredSelection(storageKey, initialSelection));
+  (0, import_react.useEffect)(() => {
+    if (applyToDocument) {
+      applyDocumentRuntime(selection);
+    }
+    persistSelection(storageKey, selection);
+    if (!applyToDocument || selection.colorScheme !== "auto") {
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => applyDocumentRuntime(selection);
+    mediaQuery.addEventListener("change", handleChange);
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, [applyToDocument, selection, storageKey]);
+  const setRuntimeSelection = (0, import_react.useCallback)((nextSelection) => {
+    setSelection(createGdsThemePresetSelection(nextSelection));
+  }, []);
+  const setPreset = (0, import_react.useCallback)((preset) => {
+    setSelection((current) => createGdsThemePresetSelection({ ...current, preset }));
+  }, []);
+  const setScheme = (0, import_react.useCallback)((colorScheme) => {
+    setSelection((current) => createGdsThemePresetSelection({ ...current, colorScheme }));
+  }, []);
+  const setFontLane = (0, import_react.useCallback)((fontLane) => {
+    setSelection((current) => createGdsThemePresetSelection({ ...current, fontLane }));
+  }, []);
+  const setBrandOptions = (0, import_react.useCallback)((options) => {
+    setSelection((current) => createGdsThemePresetSelection({ ...current, ...options }));
+  }, []);
+  const reset = (0, import_react.useCallback)(() => {
+    setSelection(createGdsThemePresetSelection(initialSelection));
+  }, [initialSelection]);
+  return {
+    selection,
+    setSelection: setRuntimeSelection,
+    setPreset,
+    setScheme,
+    setFontLane,
+    setBrandOptions,
+    reset
+  };
+}
+
 // src/GdsProvider.tsx
 var import_core3 = require("@mantine/core");
 var import_modals = require("@mantine/modals");
 var import_notifications = require("@mantine/notifications");
 
 // src/i18n.ts
-var import_react = require("react");
-var GdsI18nContext = (0, import_react.createContext)({
+var import_react2 = require("react");
+var GdsI18nContext = (0, import_react2.createContext)({
   locale: "en",
   messages: {}
 });
 function useGdsTranslation() {
-  const { messages, locale } = (0, import_react.useContext)(GdsI18nContext);
+  const { messages, locale } = (0, import_react2.useContext)(GdsI18nContext);
   return {
     t: (id, defaultMessage) => messages[id] || defaultMessage,
     locale
@@ -462,6 +596,7 @@ function showGdsNotification({
 0 && (module.exports = {
   GdsProvider,
   applyGdsFontLane,
+  createGdsThemePresetSelection,
   createPublicBrandTheme,
   extendGdsTheme,
   gdsDarkPublicTheme,
@@ -473,6 +608,7 @@ function showGdsNotification({
   resolveGdsFontLane,
   resolveGdsThemePreset,
   showGdsNotification,
+  useGdsThemePresetState,
   useGdsTranslation,
   withGdsMotion
 });

package/dist/client.mjs

@@ -1,8 +1,10 @@
 import {
   GdsProvider,
+  createGdsThemePresetSelection,
   showGdsNotification,
+  useGdsThemePresetState,
   useGdsTranslation
-} from "./chunk-7B3MG4NV.mjs";
+} from "./chunk-E55P7FOX.mjs";
 import {
   applyGdsFontLane,
   createPublicBrandTheme,
@@ -20,6 +22,7 @@ import {
 export {
   GdsProvider,
   applyGdsFontLane,
+  createGdsThemePresetSelection,
   createPublicBrandTheme,
   extendGdsTheme,
   gdsDarkPublicTheme,
@@ -31,6 +34,7 @@ export {
   resolveGdsFontLane,
   resolveGdsThemePreset,
   showGdsNotification,
+  useGdsThemePresetState,
   useGdsTranslation,
   withGdsMotion
 };

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 export { GdsFontLane, GdsFontLaneId, GdsThemePreset, GdsThemePresetId, applyGdsFontLane, createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, getGdsFontLanes, getGdsThemePresets, resolveGdsFontLane, resolveGdsThemePreset, withGdsMotion } from './server.mjs';
-export { GdsNotificationOptions, GdsNotificationTone, GdsProvider, GdsProviderProps, showGdsNotification, useGdsTranslation } from './client.mjs';
+export { GdsNotificationOptions, GdsNotificationTone, GdsProvider, GdsProviderProps, GdsStoredThemePresetState, GdsThemePresetSelection, GdsThemeScheme, UseGdsThemePresetStateOptions, UseGdsThemePresetStateResult, createGdsThemePresetSelection, showGdsNotification, useGdsThemePresetState, useGdsTranslation } from './client.mjs';
 import '@mantine/core';
 import 'react/jsx-runtime';
 import 'react';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { GdsFontLane, GdsFontLaneId, GdsThemePreset, GdsThemePresetId, applyGdsFontLane, createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, getGdsFontLanes, getGdsThemePresets, resolveGdsFontLane, resolveGdsThemePreset, withGdsMotion } from './server.js';
-export { GdsNotificationOptions, GdsNotificationTone, GdsProvider, GdsProviderProps, showGdsNotification, useGdsTranslation } from './client.js';
+export { GdsNotificationOptions, GdsNotificationTone, GdsProvider, GdsProviderProps, GdsStoredThemePresetState, GdsThemePresetSelection, GdsThemeScheme, UseGdsThemePresetStateOptions, UseGdsThemePresetStateResult, createGdsThemePresetSelection, showGdsNotification, useGdsThemePresetState, useGdsTranslation } from './client.js';
 import '@mantine/core';
 import 'react/jsx-runtime';
 import 'react';

package/dist/index.js

@@ -22,6 +22,7 @@ var index_exports = {};
 __export(index_exports, {
   GdsProvider: () => GdsProvider,
   applyGdsFontLane: () => applyGdsFontLane,
+  createGdsThemePresetSelection: () => createGdsThemePresetSelection,
   createPublicBrandTheme: () => createPublicBrandTheme,
   extendGdsTheme: () => extendGdsTheme,
   gdsDarkPublicTheme: () => gdsDarkPublicTheme,
@@ -33,6 +34,7 @@ __export(index_exports, {
   resolveGdsFontLane: () => resolveGdsFontLane,
   resolveGdsThemePreset: () => resolveGdsThemePreset,
   showGdsNotification: () => showGdsNotification,
+  useGdsThemePresetState: () => useGdsThemePresetState,
   useGdsTranslation: () => useGdsTranslation,
   withGdsMotion: () => withGdsMotion
 });
@@ -378,19 +380,151 @@ function applyGdsFontLane(theme, laneId) {
   });
 }
 
+// src/theme-runtime.ts
+var import_react = require("react");
+var defaultStorageKey = "gds-theme-preset-selection";
+function isThemePresetId(value) {
+  return typeof value === "string" && getGdsThemePresets().some((preset) => preset.id === value);
+}
+function isFontLaneId(value) {
+  return typeof value === "string" && getGdsFontLanes().some((lane) => lane.id === value);
+}
+function isScheme(value) {
+  return value === "light" || value === "dark" || value === "auto";
+}
+function resolveEffectiveScheme(preset, colorScheme) {
+  if (preset === "dark-public" || preset === "neon-night") {
+    return "dark";
+  }
+  return colorScheme;
+}
+function createGdsThemePresetSelection(stored = {}) {
+  const preset = isThemePresetId(stored.preset) ? stored.preset : "default";
+  const requestedColorScheme = isScheme(stored.colorScheme) ? stored.colorScheme : "light";
+  const colorScheme = resolveEffectiveScheme(preset, requestedColorScheme);
+  const fontLane = isFontLaneId(stored.fontLane) ? stored.fontLane : "inter";
+  const brandPrimary = typeof stored.brandPrimary === "string" ? stored.brandPrimary : "blue";
+  const brandFlatSurfaces = typeof stored.brandFlatSurfaces === "boolean" ? stored.brandFlatSurfaces : true;
+  const brandEditorialSerif = typeof stored.brandEditorialSerif === "boolean" ? stored.brandEditorialSerif : false;
+  const runtimeKey = `${preset}-${colorScheme}-${brandPrimary}-${brandFlatSurfaces}-${brandEditorialSerif}-${fontLane}`;
+  return {
+    preset,
+    colorScheme,
+    theme: applyGdsFontLane(resolveGdsThemePreset(preset, {
+      brandPrimary,
+      brandFlatSurfaces,
+      brandEditorialSerif
+    }), fontLane),
+    fontLane,
+    runtimeKey,
+    brandPrimary,
+    brandFlatSurfaces,
+    brandEditorialSerif
+  };
+}
+function readStoredSelection(storageKey, initialSelection) {
+  if (typeof window === "undefined") {
+    return createGdsThemePresetSelection(initialSelection);
+  }
+  try {
+    const stored = window.localStorage.getItem(storageKey);
+    return createGdsThemePresetSelection(stored ? JSON.parse(stored) : initialSelection);
+  } catch {
+    return createGdsThemePresetSelection(initialSelection);
+  }
+}
+function persistSelection(storageKey, selection) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  const stored = {
+    preset: selection.preset,
+    colorScheme: selection.colorScheme,
+    fontLane: selection.fontLane,
+    runtimeKey: selection.runtimeKey,
+    brandPrimary: selection.brandPrimary,
+    brandFlatSurfaces: selection.brandFlatSurfaces,
+    brandEditorialSerif: selection.brandEditorialSerif
+  };
+  try {
+    window.localStorage.setItem(storageKey, JSON.stringify(stored));
+  } catch {
+  }
+}
+function resolveDocumentScheme(selection) {
+  if (selection.colorScheme !== "auto") {
+    return selection.colorScheme;
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function applyDocumentRuntime(selection) {
+  document.documentElement.setAttribute("data-mantine-color-scheme", resolveDocumentScheme(selection));
+  document.documentElement.setAttribute("data-gds-theme-runtime", selection.runtimeKey ?? `${selection.preset}-${selection.colorScheme}`);
+  document.documentElement.setAttribute("data-gds-font-lane", selection.fontLane);
+}
+function useGdsThemePresetState({
+  storageKey = defaultStorageKey,
+  initialSelection,
+  applyToDocument = true
+} = {}) {
+  const [selection, setSelection] = (0, import_react.useState)(() => readStoredSelection(storageKey, initialSelection));
+  (0, import_react.useEffect)(() => {
+    if (applyToDocument) {
+      applyDocumentRuntime(selection);
+    }
+    persistSelection(storageKey, selection);
+    if (!applyToDocument || selection.colorScheme !== "auto") {
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => applyDocumentRuntime(selection);
+    mediaQuery.addEventListener("change", handleChange);
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, [applyToDocument, selection, storageKey]);
+  const setRuntimeSelection = (0, import_react.useCallback)((nextSelection) => {
+    setSelection(createGdsThemePresetSelection(nextSelection));
+  }, []);
+  const setPreset = (0, import_react.useCallback)((preset) => {
+    setSelection((current) => createGdsThemePresetSelection({ ...current, preset }));
+  }, []);
+  const setScheme = (0, import_react.useCallback)((colorScheme) => {
+    setSelection((current) => createGdsThemePresetSelection({ ...current, colorScheme }));
+  }, []);
+  const setFontLane = (0, import_react.useCallback)((fontLane) => {
+    setSelection((current) => createGdsThemePresetSelection({ ...current, fontLane }));
+  }, []);
+  const setBrandOptions = (0, import_react.useCallback)((options) => {
+    setSelection((current) => createGdsThemePresetSelection({ ...current, ...options }));
+  }, []);
+  const reset = (0, import_react.useCallback)(() => {
+    setSelection(createGdsThemePresetSelection(initialSelection));
+  }, [initialSelection]);
+  return {
+    selection,
+    setSelection: setRuntimeSelection,
+    setPreset,
+    setScheme,
+    setFontLane,
+    setBrandOptions,
+    reset
+  };
+}
+
 // src/GdsProvider.tsx
 var import_core3 = require("@mantine/core");
 var import_modals = require("@mantine/modals");
 var import_notifications = require("@mantine/notifications");
 
 // src/i18n.ts
-var import_react = require("react");
-var GdsI18nContext = (0, import_react.createContext)({
+var import_react2 = require("react");
+var GdsI18nContext = (0, import_react2.createContext)({
   locale: "en",
   messages: {}
 });
 function useGdsTranslation() {
-  const { messages, locale } = (0, import_react.useContext)(GdsI18nContext);
+  const { messages, locale } = (0, import_react2.useContext)(GdsI18nContext);
   return {
     t: (id, defaultMessage) => messages[id] || defaultMessage,
     locale
@@ -462,6 +596,7 @@ function showGdsNotification({
 0 && (module.exports = {
   GdsProvider,
   applyGdsFontLane,
+  createGdsThemePresetSelection,
   createPublicBrandTheme,
   extendGdsTheme,
   gdsDarkPublicTheme,
@@ -473,6 +608,7 @@ function showGdsNotification({
   resolveGdsFontLane,
   resolveGdsThemePreset,
   showGdsNotification,
+  useGdsThemePresetState,
   useGdsTranslation,
   withGdsMotion
 });

package/dist/index.mjs

@@ -1,8 +1,10 @@
 import {
   GdsProvider,
+  createGdsThemePresetSelection,
   showGdsNotification,
+  useGdsThemePresetState,
   useGdsTranslation
-} from "./chunk-7B3MG4NV.mjs";
+} from "./chunk-E55P7FOX.mjs";
 import {
   applyGdsFontLane,
   createPublicBrandTheme,
@@ -20,6 +22,7 @@ import {
 export {
   GdsProvider,
   applyGdsFontLane,
+  createGdsThemePresetSelection,
   createPublicBrandTheme,
   extendGdsTheme,
   gdsDarkPublicTheme,
@@ -31,6 +34,7 @@ export {
   resolveGdsFontLane,
   resolveGdsThemePreset,
   showGdsNotification,
+  useGdsThemePresetState,
   useGdsTranslation,
   withGdsMotion
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doneisbetter/gds-theme",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/dist/chunk-7B3MG4NV.mjs

@@ -1,88 +0,0 @@
-import {
-  gdsTheme
-} from "./chunk-TAPLA36E.mjs";
-
-// src/i18n.ts
-import { createContext, useContext } from "react";
-var GdsI18nContext = createContext({
-  locale: "en",
-  messages: {}
-});
-function useGdsTranslation() {
-  const { messages, locale } = useContext(GdsI18nContext);
-  return {
-    t: (id, defaultMessage) => messages[id] || defaultMessage,
-    locale
-  };
-}
-
-// src/GdsProvider.tsx
-import { MantineProvider, DirectionProvider, Box } from "@mantine/core";
-import { ModalsProvider } from "@mantine/modals";
-import { Notifications } from "@mantine/notifications";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function GdsProvider({
-  children,
-  locale = "en",
-  messages = {},
-  theme = gdsTheme,
-  defaultColorScheme = "light",
-  forceColorScheme
-}) {
-  const isRtl = ["ar", "he"].includes(locale);
-  const dir = isRtl ? "rtl" : "ltr";
-  return /* @__PURE__ */ jsx(DirectionProvider, { initialDirection: dir, children: /* @__PURE__ */ jsx(GdsI18nContext.Provider, { value: { locale, messages }, children: /* @__PURE__ */ jsx(
-    MantineProvider,
-    {
-      theme,
-      withCssVariables: true,
-      withGlobalClasses: true,
-      defaultColorScheme,
-      forceColorScheme,
-      children: /* @__PURE__ */ jsx(ModalsProvider, { children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Notifications, {}),
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            dir,
-            mih: "100vh",
-            h: "100%",
-            bg: "var(--mantine-color-body)",
-            c: "var(--mantine-color-text)",
-            style: { transition: "background-color 120ms ease, color 120ms ease" },
-            children
-          }
-        )
-      ] }) })
-    }
-  ) }) });
-}
-
-// src/notifications.ts
-import { notifications } from "@mantine/notifications";
-var toneColorMap = {
-  success: "teal",
-  error: "red",
-  warning: "yellow",
-  info: "blue",
-  neutral: "gray"
-};
-function showGdsNotification({
-  message,
-  title,
-  tone = "info",
-  autoClose
-}) {
-  notifications.show({
-    message,
-    title,
-    color: toneColorMap[tone],
-    autoClose
-  });
-}
-
-export {
-  useGdsTranslation,
-  GdsProvider,
-  showGdsNotification
-};