npm - @ttoss/fsl-theme - Versions diffs - 1.1.12 → 1.1.14 - Mend

@ttoss/fsl-theme 1.1.12 → 1.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (91) hide show

package/dist/Types-BiBa17RL.d.cts +1427 -0
package/dist/Types-BiBa17RL.d.mts +1427 -0
package/dist/baseBundle-DxvXyhGa.mjs +17 -0
package/dist/baseBundle-iEFf5nqT.cjs +22 -0
package/dist/{esm/chunk-SE5Z52RE.js → createTheme-BLNYztZU.mjs} +76 -172
package/dist/createTheme-Cv6RP9D6.cjs +1825 -0
package/dist/css.cjs +48 -0
package/dist/{css.d.ts → css.d.cts} +67 -63
package/dist/css.d.mts +168 -0
package/dist/css.mjs +42 -0
package/dist/dataviz/index.cjs +45 -0
package/dist/dataviz/{index.d.ts → index.d.cts} +9 -5
package/dist/dataviz/index.d.mts +66 -0
package/dist/dataviz/index.mjs +39 -0
package/dist/dtcg.cjs +115 -0
package/dist/{dtcg.d.ts → dtcg.d.cts} +9 -7
package/dist/dtcg.d.mts +51 -0
package/dist/dtcg.mjs +112 -0
package/dist/helpers-4p4-QVt_.cjs +258 -0
package/dist/helpers-CaswNJMy.mjs +211 -0
package/dist/{index.d.ts → index-CsIjfw86.d.cts} +42 -34
package/dist/index-nJrjI0BA.d.mts +94 -0
package/dist/index.cjs +16 -0
package/dist/index.d.cts +6 -0
package/dist/index.d.mts +6 -0
package/dist/index.mjs +7 -0
package/dist/{react.d.ts → react-CGa6FlNL.d.cts} +130 -106
package/dist/react-DnKxR2gK.d.mts +370 -0
package/dist/react-EUwpdvY7.cjs +481 -0
package/dist/react.cjs +12 -0
package/dist/react.d.cts +4 -0
package/dist/react.d.mts +4 -0
package/dist/react.mjs +412 -0
package/dist/runtime-entry.cjs +9 -0
package/dist/runtime-entry.d.cts +3 -0
package/dist/runtime-entry.d.mts +3 -0
package/dist/runtime-entry.mjs +3 -0
package/dist/{runtime-entry.d.ts → ssrScript-BVysxDws.d.cts} +26 -23
package/dist/ssrScript-BVysxDws.d.mts +98 -0
package/dist/ssrScript-CRfrN8Pm.cjs +202 -0
package/dist/ssrScript-D3kGPQpi.mjs +179 -0
package/dist/themes/bruttal.cjs +75 -0
package/dist/themes/bruttal.d.cts +3 -0
package/dist/themes/bruttal.d.mts +3 -0
package/dist/themes/bruttal.mjs +72 -0
package/dist/themes/corporate.cjs +34 -0
package/dist/themes/corporate.d.cts +3 -0
package/dist/themes/corporate.d.mts +3 -0
package/dist/{esm/chunk-TPMN75JM.js → themes/corporate.mjs} +7 -5
package/dist/themes/oca.cjs +34 -0
package/dist/themes/oca.d.cts +3 -0
package/dist/themes/oca.d.mts +3 -0
package/dist/{esm/chunk-DU4QDQUC.js → themes/oca.mjs} +7 -5
package/dist/themes/ventures.cjs +34 -0
package/dist/themes/ventures.d.cts +3 -0
package/dist/themes/ventures.d.mts +3 -0
package/dist/{esm/chunk-BXKVVQEP.js → themes/ventures.mjs} +7 -5
package/dist/toCssVars-CYZCe-on.mjs +286 -0
package/dist/toCssVars-DudHKvt2.cjs +297 -0
package/dist/{esm/chunk-4Q4P3JBB.js → tokenRegistry-DjgSN3oU.mjs} +23 -20
package/dist/tokenRegistry-OhaJ9sPJ.cjs +199 -0
package/dist/vars.cjs +127 -0
package/dist/{vars.d.ts → vars.d.cts} +8 -7
package/dist/vars.d.mts +128 -0
package/dist/vars.mjs +123 -0
package/dist/withDataviz-B4pVsOwV.cjs +192 -0
package/dist/{esm/chunk-FBVUI2PK.js → withDataviz-DY5s7R51.mjs} +40 -12
package/package.json +6 -6
package/dist/Types-6tR0_2Ss.d.ts +0 -1452
package/dist/esm/chunk-5PWPAQMC.js +0 -9
package/dist/esm/chunk-HRNXVRS3.js +0 -54
package/dist/esm/chunk-IJGA42O6.js +0 -141
package/dist/esm/chunk-PQPQNZ73.js +0 -262
package/dist/esm/chunk-UMRQ4OTX.js +0 -11
package/dist/esm/chunk-VL6EGE6Z.js +0 -222
package/dist/esm/chunk-WVQSTQD5.js +0 -192
package/dist/esm/css.js +0 -6
package/dist/esm/dataviz/index.js +0 -19
package/dist/esm/dtcg.js +0 -65
package/dist/esm/index.js +0 -10
package/dist/esm/react.js +0 -8
package/dist/esm/runtime-entry.js +0 -4
package/dist/esm/themes/bruttal.js +0 -6
package/dist/esm/themes/corporate.js +0 -6
package/dist/esm/themes/oca.js +0 -6
package/dist/esm/themes/ventures.js +0 -6
package/dist/esm/vars.js +0 -28
package/dist/themes/bruttal.d.ts +0 -5
package/dist/themes/corporate.d.ts +0 -5
package/dist/themes/oca.d.ts +0 -5
package/dist/themes/ventures.d.ts +0 -5

package/dist/react.mjs ADDED Viewed

@@ -0,0 +1,412 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { r as deepMerge, s as toFlatTokens } from "./helpers-CaswNJMy.mjs";
+import { getThemeStylesContent } from "./css.mjs";
+import { i as createThemeRuntime, t as getThemeScriptContent } from "./ssrScript-D3kGPQpi.mjs";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react.tsx
+const COARSE_QUERY = "(any-pointer: coarse)";
+/**
+* Subscribe to coarse-pointer media query changes.
+* Returns `true` when the device has at least one coarse pointer (touch).
+* Returns `false` on SSR or when `matchMedia` is unavailable (React Native).
+*/
+const useCoarsePointer = () => {
+  const [isCoarse, setIsCoarse] = React.useState(() => {
+    return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(COARSE_QUERY).matches : false;
+  });
+  React.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mql = window.matchMedia(COARSE_QUERY);
+    const handler = e => {
+      return setIsCoarse(e.matches);
+    };
+    mql.addEventListener("change", handler);
+    return () => {
+      return mql.removeEventListener("change", handler);
+    };
+  }, []);
+  return isCoarse;
+};
+/**
+* Apply coarse-pointer hit target overrides to a resolved token map.
+*
+* When `isCoarse` is true, replaces `semantic.sizing.hit.{step}` values with
+* the raw coarse values from `core.sizing.hit.coarse.{step}`. This mirrors
+* the `@media (any-pointer: coarse)` block that `toCssVars` emits for CSS
+* consumers — ensuring non-CSS consumers (React Native, canvas) get
+* touch-appropriate hit targets.
+*/
+const applyCoarseHitOverrides = (tokens, theme, isCoarse) => {
+  if (!isCoarse) return tokens;
+  const overrides = {
+    ...tokens
+  };
+  for (const [key, value] of Object.entries(theme.core.sizing.hit.coarse)) if (typeof value === "string") overrides[`semantic.sizing.hit.${key}`] = value;
+  return overrides;
+};
+const SemanticTokensCtx = React.createContext(null);
+/**
+* Resolves semantic tokens for the given bundle + mode combination.
+*/
+const resolveSemanticTokens = (bundle, resolvedMode) => {
+  if (resolvedMode === bundle.baseMode || !bundle.alternate?.semantic) return bundle.base.semantic;
+  return deepMerge(bundle.base.semantic, bundle.alternate.semantic);
+};
+const ResolvedTokensCtx = React.createContext(null);
+const ModeCtx = React.createContext(null);
+/**
+* React provider that manages theme switching via `createThemeRuntime`.
+*
+* Applies `data-tt-theme` and `data-tt-mode` on `<html>` (or `root`),
+* persists to localStorage, and listens to system color scheme changes.
+* When `theme` is provided, automatically injects CSS Custom Properties into
+* the document `<head>` via React 19 style hoisting.
+*
+* @example
+* ```tsx
+* import { ThemeProvider } from '@ttoss/fsl-theme/react';
+* import { createTheme } from '@ttoss/fsl-theme';
+*
+* const myTheme = createTheme();
+*
+* export const App = () => (
+*   <ThemeProvider theme={myTheme}>
+*     <YourApp />
+*   </ThemeProvider>
+* );
+* ```
+*/
+const ThemeProvider = ({
+  defaultMode,
+  storageKey,
+  theme,
+  themeId,
+  onModeChange,
+  root,
+  children
+}) => {
+  const runtimeRef = React.useRef(null);
+  const initDefaultMode = React.useRef(defaultMode);
+  const initStorageKey = React.useRef(storageKey);
+  const [state, setState] = React.useState(() => {
+    return {
+      mode: defaultMode ?? "system",
+      resolvedMode: (defaultMode ?? "system") === "system" ? "light" : defaultMode
+    };
+  });
+  React.useEffect(() => {
+    const runtime = createThemeRuntime({
+      defaultTheme: themeId,
+      defaultMode: initDefaultMode.current,
+      storageKey: initStorageKey.current,
+      root
+    });
+    runtimeRef.current = runtime;
+    setState(runtime.getState());
+    const unsubscribe = runtime.subscribe(setState);
+    return () => {
+      unsubscribe();
+      runtime.destroy();
+      runtimeRef.current = null;
+    };
+  }, [root, themeId]);
+  const setMode = React.useCallback(mode => {
+    runtimeRef.current?.setMode(mode);
+  }, []);
+  const semanticTokens = React.useMemo(() => {
+    return theme ? resolveSemanticTokens(theme, state.resolvedMode) : null;
+  }, [theme, state.resolvedMode]);
+  const isCoarse = useCoarsePointer();
+  const resolvedTokens = React.useMemo(() => {
+    if (!theme || !semanticTokens) return null;
+    const all = toFlatTokens({
+      core: theme.base.core,
+      semantic: semanticTokens
+    });
+    const result = {};
+    for (const [key, value] of Object.entries(all)) if (key.startsWith("semantic.")) result[key] = value;
+    return applyCoarseHitOverrides(result, theme.base, isCoarse);
+  }, [theme, semanticTokens, isCoarse]);
+  const cssContent = React.useMemo(() => {
+    return theme ? getThemeStylesContent(theme, themeId) : null;
+  }, [theme, themeId]);
+  const onModeChangeRef = React.useRef(onModeChange);
+  React.useEffect(() => {
+    onModeChangeRef.current = onModeChange;
+  });
+  const prevModeRef = React.useRef(null);
+  React.useEffect(() => {
+    const prev = prevModeRef.current;
+    prevModeRef.current = {
+      mode: state.mode,
+      resolvedMode: state.resolvedMode
+    };
+    if (prev === null) return;
+    if (prev.mode === state.mode && prev.resolvedMode === state.resolvedMode) return;
+    onModeChangeRef.current?.(state.mode, state.resolvedMode);
+  }, [state.mode, state.resolvedMode]);
+  const modeCtxValue = React.useMemo(() => {
+    return {
+      mode: state.mode,
+      resolvedMode: state.resolvedMode,
+      setMode
+    };
+  }, [state.mode, state.resolvedMode, setMode]);
+  const coreNode = /* @__PURE__ */jsx(ModeCtx.Provider, {
+    value: modeCtxValue,
+    children
+  });
+  if (theme) return /* @__PURE__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsx("style", {
+      precedence: "default",
+      children: cssContent
+    }), /* @__PURE__ */jsx(ResolvedTokensCtx.Provider, {
+      value: resolvedTokens,
+      children: /* @__PURE__ */jsx(SemanticTokensCtx.Provider, {
+        value: semanticTokens,
+        children: coreNode
+      })
+    })]
+  });
+  return coreNode;
+};
+const useColorMode = () => {
+  const context = React.useContext(ModeCtx);
+  if (!context) throw new Error("useColorMode must be used within a <ThemeProvider>");
+  return context;
+};
+/**
+* Access the current theme's **semantic tokens only** — the structural tree
+* with **unresolved** `TokenRef` values (e.g. `'{core.colors.brand.500}'`).
+*
+* ### Primary use cases
+* - Introspection and devtools
+* - Token path comparison (e.g. checking which tokens differ between themes)
+* - Passing to `createTheme` calls
+*
+* ### ✗ Do not use for styling
+* `TokenRef` values are reference strings, not CSS values. Using them in
+* inline styles produces silently broken rendering:
+*
+* ```tsx
+* // ✗ WRONG — tokens.colors.brand.main is '{core.colors.brand.main}', not '#FF0000'
+* <div style={{ color: tokens.colors.brand.main }} />
+*
+* // ✓ CSS consumers — use vars:
+* <div style={{ color: 'var(--tt-color-brand-main)' }} />
+*
+* // ✓ Non-CSS consumers (React Native, canvas) — use useResolvedTokens():
+* const resolved = useResolvedTokens();
+* <View style={{ backgroundColor: resolved['semantic.colors.action.primary.background.default'] }} />
+* ```
+*
+* Requires `<ThemeProvider theme={...}>`.
+*
+* @example
+* ```tsx
+* import { useTokens } from '@ttoss/fsl-theme/react';
+*
+* const Button = () => {
+*   const tokens = useTokens(); // introspection only
+*   // tokens.colors.action.primary.background.default → '{core.colors.brand.500}'
+*   return <button style={{ background: 'var(--tt-action-primary-background-default)' }} />;
+* };
+* ```
+*/
+const useTokens = () => {
+  const tokens = React.useContext(SemanticTokensCtx);
+  if (!React.useContext(ModeCtx)) throw new Error("useTokens must be used within a <ThemeProvider>");
+  if (tokens === null) throw new Error("useTokens requires a <ThemeProvider theme={...}>. Pass your theme bundle: <ThemeProvider theme={myTheme} />");
+  return tokens;
+};
+/**
+* Access fully resolved token values as a flat `Record<string, string | number>`.
+*
+* All `{ref}` indirections are resolved to their final raw values — hex colors,
+* px sizes, unitless numbers, etc. Keys use `semantic.*` dot-path notation.
+*
+* ### When to use
+* Use in non-CSS environments where CSS custom properties (`var()`) are not
+* available: React Native, canvas renderers, PDF generation, test assertions.
+*
+* ### ✗ Do not use for CSS rendering
+* CSS consumers should use `vars.*` instead for zero-JS rendering:
+*
+* ```tsx
+* // ✓ CSS (browser)
+* <div style={{ color: 'var(--tt-color-informational-primary-default)' }} />
+*
+* // ✓ Non-CSS (React Native, canvas)
+* const resolved = useResolvedTokens();
+* <View style={{ backgroundColor: resolved['semantic.colors.action.primary.background.default'] }} />
+* ```
+*
+* Requires `<ThemeProvider theme={...}>`.
+*
+* @example
+* ```tsx
+* import { useResolvedTokens } from '@ttoss/fsl-theme/react';
+*
+* const ReactNativeButton = () => {
+*   const resolved = useResolvedTokens();
+*   return (
+*     <View style={{ backgroundColor: resolved['semantic.colors.action.primary.background.default'] }}>
+*       <Text>Click</Text>
+*     </View>
+*   );
+* };
+* ```
+*/
+const useResolvedTokens = () => {
+  const resolved = React.useContext(ResolvedTokensCtx);
+  if (!React.useContext(ModeCtx)) throw new Error("useResolvedTokens must be used within a <ThemeProvider>");
+  if (resolved === null) throw new Error("useResolvedTokens requires a <ThemeProvider theme={...}>. Pass your theme bundle: <ThemeProvider theme={myTheme} />");
+  return resolved;
+};
+/**
+* Renders an inline `<script>` that prevents theme flash on SSR/SSG.
+*
+* Place in the `<head>` before stylesheets.
+*
+* @example
+* ```tsx
+* // Next.js app/layout.tsx
+* import { ThemeScript } from '@ttoss/fsl-theme/react';
+*
+* export default function RootLayout({ children }) {
+*   return (
+*     <html lang="en">
+*       <head>
+*         <ThemeScript defaultTheme="bruttal" />
+*       </head>
+*       <body>{children}</body>
+*     </html>
+*   );
+* }
+* ```
+*/
+const ThemeScript = ({
+  defaultTheme,
+  defaultMode,
+  storageKey,
+  nonce
+} = {}) => {
+  return /* @__PURE__ */jsx("script", {
+    nonce,
+    dangerouslySetInnerHTML: {
+      __html: getThemeScriptContent({
+        defaultTheme,
+        defaultMode,
+        storageKey
+      })
+    }
+  });
+};
+/**
+* Renders an inline `<style>` tag with all CSS Custom Properties for a theme
+* bundle — including coarse-pointer, reduced-motion, and container query
+* progressive enhancement blocks.
+*
+* Use as an escape hatch for SSR frameworks that need explicit `<head>` style
+* injection. In most React apps, `<ThemeProvider theme={...}>` already injects
+* styles automatically via React 19 style hoisting — no `<ThemeStyles>` needed.
+*
+* `dangerouslySetInnerHTML` is safe: content comes exclusively from
+* `toCssVars()` (a pure internal function) — no user input is interpolated.
+*
+* @example
+* ```tsx
+* // SSR escape hatch — no themeId needed for canonical 1-theme model
+* import { ThemeScript, ThemeStyles } from '@ttoss/fsl-theme/react';
+* import { createTheme } from '@ttoss/fsl-theme';
+*
+* const myTheme = createTheme();
+*
+* export default function RootLayout({ children }) {
+*   return (
+*     <html lang="en">
+*       <head>
+*         <ThemeScript />
+*         <ThemeStyles theme={myTheme} />
+*       </head>
+*       <body>
+*         <ThemeProvider theme={myTheme}>{children}</ThemeProvider>
+*       </body>
+*     </html>
+*   );
+* }
+* ```
+*
+* @example
+* ```tsx
+* // Multi-theme: explicit themeId for CSS scoping
+* <ThemeStyles theme={brandA} themeId="brand-a" />
+* <ThemeStyles theme={brandB} themeId="brand-b" />
+* ```
+*/
+const ThemeStyles = ({
+  theme,
+  themeId,
+  nonce
+}) => {
+  return /* @__PURE__ */jsx("style", {
+    nonce,
+    dangerouslySetInnerHTML: {
+      __html: getThemeStylesContent(theme, themeId)
+    }
+  });
+};
+/**
+* Convenience component that renders both `<ThemeScript>` and `<ThemeStyles>`
+* in a single line — the complete SSR `<head>` setup for flash-free theming.
+*
+* Use in SSR frameworks (Next.js, Remix) where you need explicit `<head>`
+* injection. In CSR apps, `<ThemeProvider theme={...}>` handles everything.
+*
+* @example
+* ```tsx
+* // Next.js app/layout.tsx
+* import { ThemeHead, ThemeProvider } from '@ttoss/fsl-theme/react';
+* import { createTheme } from '@ttoss/fsl-theme';
+*
+* const myTheme = createTheme();
+*
+* export default function RootLayout({ children }) {
+*   return (
+*     <html lang="en">
+*       <head>
+*         <ThemeHead theme={myTheme} />
+*       </head>
+*       <body>
+*         <ThemeProvider theme={myTheme}>{children}</ThemeProvider>
+*       </body>
+*     </html>
+*   );
+* }
+* ```
+*/
+const ThemeHead = ({
+  theme,
+  themeId,
+  nonce,
+  defaultMode,
+  storageKey
+}) => {
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsx(ThemeScript, {
+      defaultTheme: themeId,
+      defaultMode,
+      storageKey,
+      nonce
+    }), /* @__PURE__ */jsx(ThemeStyles, {
+      theme,
+      themeId,
+      nonce
+    })]
+  });
+};
+//#endregion
+export { ThemeHead, ThemeProvider, ThemeScript, ThemeStyles, useColorMode, useResolvedTokens, useTokens };

package/dist/runtime-entry.cjs ADDED Viewed

@@ -0,0 +1,9 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+Object.defineProperty(exports, Symbol.toStringTag, {
+  value: 'Module'
+});
+const require_ssrScript = require('./ssrScript-CRfrN8Pm.cjs');
+exports.DATA_MODE_ATTR = require_ssrScript.DATA_MODE_ATTR;
+exports.DATA_THEME_ATTR = require_ssrScript.DATA_THEME_ATTR;
+exports.createThemeRuntime = require_ssrScript.createThemeRuntime;
+exports.getThemeScriptContent = require_ssrScript.getThemeScriptContent;

package/dist/runtime-entry.d.cts ADDED Viewed

@@ -0,0 +1,3 @@
+import { a as ResolvedMode, c as ThemeRuntimeConfig, i as DATA_THEME_ATTR, l as ThemeState, n as getThemeScriptContent, o as ThemeMode, r as DATA_MODE_ATTR, s as ThemeRuntime, t as ThemeScriptConfig, u as createThemeRuntime } from "./ssrScript-BVysxDws.cjs";
+export { DATA_MODE_ATTR, DATA_THEME_ATTR, type ResolvedMode, type ThemeMode, type ThemeRuntime, type ThemeRuntimeConfig, type ThemeScriptConfig, type ThemeState, createThemeRuntime, getThemeScriptContent };

package/dist/runtime-entry.d.mts ADDED Viewed

@@ -0,0 +1,3 @@
+import { a as ResolvedMode, c as ThemeRuntimeConfig, i as DATA_THEME_ATTR, l as ThemeState, n as getThemeScriptContent, o as ThemeMode, r as DATA_MODE_ATTR, s as ThemeRuntime, t as ThemeScriptConfig, u as createThemeRuntime } from "./ssrScript-BVysxDws.mjs";
+export { DATA_MODE_ATTR, DATA_THEME_ATTR, type ResolvedMode, type ThemeMode, type ThemeRuntime, type ThemeRuntimeConfig, type ThemeScriptConfig, type ThemeState, createThemeRuntime, getThemeScriptContent };

package/dist/runtime-entry.mjs ADDED Viewed

@@ -0,0 +1,3 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { i as createThemeRuntime, n as DATA_MODE_ATTR, r as DATA_THEME_ATTR, t as getThemeScriptContent } from "./ssrScript-D3kGPQpi.mjs";
+export { DATA_MODE_ATTR, DATA_THEME_ATTR, createThemeRuntime, getThemeScriptContent };

package/dist/{runtime-entry.d.ts → ssrScript-BVysxDws.d.cts} RENAMED Viewed

@@ -1,3 +1,5 @@
+//#region src/runtime.d.ts
 declare const DATA_THEME_ATTR = "data-tt-theme";
 declare const DATA_MODE_ATTR = "data-tt-mode";
 /**
@@ -12,30 +14,30 @@ type ResolvedMode = 'light' | 'dark';
  * Snapshot of the current theme state.
  */
 interface ThemeState {
-    mode: ThemeMode;
-    resolvedMode: ResolvedMode;
+  mode: ThemeMode;
+  resolvedMode: ResolvedMode;
 }
 /**
  * Configuration for `createThemeRuntime()`.
  */
 interface ThemeRuntimeConfig {
-    /** Theme identifier written to `data-tt-theme`. Provide only for MFE / multi-theme CSS scoping. When omitted, `data-tt-theme` is not written to the DOM. */
-    defaultTheme?: string;
-    /** Mode to use when no persisted value is found. @default 'system' */
-    defaultMode?: ThemeMode;
-    /** localStorage key for persistence. @default 'tt-theme' */
-    storageKey?: string;
-    /** Root element to apply data attributes to. @default document.documentElement */
-    root?: HTMLElement;
+  /** Theme identifier written to `data-tt-theme`. Provide only for MFE / multi-theme CSS scoping. When omitted, `data-tt-theme` is not written to the DOM. */
+  defaultTheme?: string;
+  /** Mode to use when no persisted value is found. @default 'system' */
+  defaultMode?: ThemeMode;
+  /** localStorage key for persistence. @default 'tt-theme' */
+  storageKey?: string;
+  /** Root element to apply data attributes to. @default document.documentElement */
+  root?: HTMLElement;
 }
 /**
  * Public API returned by `createThemeRuntime()`.
  */
 interface ThemeRuntime {
-    getState: () => ThemeState;
-    setMode: (mode: ThemeMode) => void;
-    subscribe: (listener: (state: ThemeState) => void) => () => void;
-    destroy: () => void;
+  getState: () => ThemeState;
+  setMode: (mode: ThemeMode) => void;
+  subscribe: (listener: (state: ThemeState) => void) => () => void;
+  destroy: () => void;
 }
 /**
  * Creates a framework-agnostic runtime that manages theme switching.
@@ -55,17 +57,18 @@ interface ThemeRuntime {
  * ```
  */
 declare const createThemeRuntime: (config?: ThemeRuntimeConfig) => ThemeRuntime;
+//#endregion
+//#region src/ssrScript.d.ts
 /**
  * Configuration for the SSR bootstrap script.
  */
 interface ThemeScriptConfig {
-    /** Theme identifier written to `data-tt-theme`. When omitted, `data-tt-theme` is not written. */
-    defaultTheme?: string;
-    /** Mode to use when no persisted value is found. @default 'system' */
-    defaultMode?: ThemeMode;
-    /** localStorage key. Must match the runtime's `storageKey`. @default 'tt-theme' */
-    storageKey?: string;
+  /** Theme identifier written to `data-tt-theme`. When omitted, `data-tt-theme` is not written. */
+  defaultTheme?: string;
+  /** Mode to use when no persisted value is found. @default 'system' */
+  defaultMode?: ThemeMode;
+  /** localStorage key. Must match the runtime's `storageKey`. @default 'tt-theme' */
+  storageKey?: string;
 }
 /**
  * Returns self-contained JavaScript code that prevents theme flash on SSR/SSG.
@@ -91,5 +94,5 @@ interface ThemeScriptConfig {
  * ```
  */
 declare const getThemeScriptContent: (config?: ThemeScriptConfig) => string;
-export { DATA_MODE_ATTR, DATA_THEME_ATTR, type ResolvedMode, type ThemeMode, type ThemeRuntime, type ThemeRuntimeConfig, type ThemeScriptConfig, type ThemeState, createThemeRuntime, getThemeScriptContent };
+//#endregion
+export { ResolvedMode as a, ThemeRuntimeConfig as c, DATA_THEME_ATTR as i, ThemeState as l, getThemeScriptContent as n, ThemeMode as o, DATA_MODE_ATTR as r, ThemeRuntime as s, ThemeScriptConfig as t, createThemeRuntime as u };

package/dist/ssrScript-BVysxDws.d.mts ADDED Viewed

@@ -0,0 +1,98 @@
+//#region src/runtime.d.ts
+declare const DATA_THEME_ATTR = "data-tt-theme";
+declare const DATA_MODE_ATTR = "data-tt-mode";
+/**
+ * Theme mode. `'system'` delegates to the OS `prefers-color-scheme` preference.
+ */
+type ThemeMode = 'light' | 'dark' | 'system';
+/**
+ * Resolved mode — always `'light'` or `'dark'` (never `'system'`).
+ */
+type ResolvedMode = 'light' | 'dark';
+/**
+ * Snapshot of the current theme state.
+ */
+interface ThemeState {
+  mode: ThemeMode;
+  resolvedMode: ResolvedMode;
+}
+/**
+ * Configuration for `createThemeRuntime()`.
+ */
+interface ThemeRuntimeConfig {
+  /** Theme identifier written to `data-tt-theme`. Provide only for MFE / multi-theme CSS scoping. When omitted, `data-tt-theme` is not written to the DOM. */
+  defaultTheme?: string;
+  /** Mode to use when no persisted value is found. @default 'system' */
+  defaultMode?: ThemeMode;
+  /** localStorage key for persistence. @default 'tt-theme' */
+  storageKey?: string;
+  /** Root element to apply data attributes to. @default document.documentElement */
+  root?: HTMLElement;
+}
+/**
+ * Public API returned by `createThemeRuntime()`.
+ */
+interface ThemeRuntime {
+  getState: () => ThemeState;
+  setMode: (mode: ThemeMode) => void;
+  subscribe: (listener: (state: ThemeState) => void) => () => void;
+  destroy: () => void;
+}
+/**
+ * Creates a framework-agnostic runtime that manages theme switching.
+ *
+ * - Sets `data-tt-mode` (and `data-tt-theme` when `defaultTheme` is provided) attributes on the root element.
+ * - Updates `style.colorScheme` for native dark/light UI.
+ * - Persists `{ mode }` to localStorage.
+ * - Listens to `prefers-color-scheme` media query when mode is `'system'`.
+ * - Pub/sub pattern for state changes.
+ *
+ * @example
+ * ```ts
+ * const runtime = createThemeRuntime({ defaultMode: 'dark' });
+ * runtime.setMode('system');
+ * const unsub = runtime.subscribe(console.log);
+ * runtime.destroy();
+ * ```
+ */
+declare const createThemeRuntime: (config?: ThemeRuntimeConfig) => ThemeRuntime;
+//#endregion
+//#region src/ssrScript.d.ts
+/**
+ * Configuration for the SSR bootstrap script.
+ */
+interface ThemeScriptConfig {
+  /** Theme identifier written to `data-tt-theme`. When omitted, `data-tt-theme` is not written. */
+  defaultTheme?: string;
+  /** Mode to use when no persisted value is found. @default 'system' */
+  defaultMode?: ThemeMode;
+  /** localStorage key. Must match the runtime's `storageKey`. @default 'tt-theme' */
+  storageKey?: string;
+}
+/**
+ * Returns self-contained JavaScript code that prevents theme flash on SSR/SSG.
+ *
+ * Insert the returned string into an inline `<script>` tag in the `<head>`,
+ * before any stylesheets or the app bundle.
+ *
+ * @example
+ * ```tsx
+ * // Next.js app/layout.tsx
+ * import { getThemeScriptContent } from '@ttoss/fsl-theme/runtime';
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <html lang="en">
+ *       <head>
+ *         <script dangerouslySetInnerHTML={{ __html: getThemeScriptContent() }} />
+ *       </head>
+ *       <body>{children}</body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ */
+declare const getThemeScriptContent: (config?: ThemeScriptConfig) => string;
+//#endregion
+export { ResolvedMode as a, ThemeRuntimeConfig as c, DATA_THEME_ATTR as i, ThemeState as l, getThemeScriptContent as n, ThemeMode as o, DATA_MODE_ATTR as r, ThemeRuntime as s, ThemeScriptConfig as t, createThemeRuntime as u };