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

@ttoss/fsl-theme 1.1.13 → 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.d.ts → react-CGa6FlNL.d.cts} RENAMED Viewed

@@ -1,84 +1,85 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import { ThemeMode, ResolvedMode, ThemeScriptConfig } from './runtime-entry.js';
-import { a as ThemeBundle, S as SemanticTokens } from './Types-6tR0_2Ss.js';
+import { n as SemanticTokens, r as ThemeBundle } from "./Types-BiBa17RL.cjs";
+import { a as ResolvedMode, o as ThemeMode, t as ThemeScriptConfig } from "./ssrScript-BVysxDws.cjs";
+import * as React from "react";
+//#region src/react.d.ts
 /**
  * Props for the `ThemeProvider` component.
  */
 interface ThemeProviderProps {
-    /** Mode to use when no persisted value is found. Only read on initial mount. @default 'system' */
-    defaultMode?: ThemeMode;
-    /** localStorage key for persistence. Only read on initial mount. @default 'tt-theme' */
-    storageKey?: string;
-    /**
-     * Theme identifier written to `data-tt-theme`. Reactive — changing this
-     * prop recreates the runtime and rewrites the attribute so the browser
-     * matches the scoped CSS (e.g. `[data-tt-theme="<id>"]`). Provide only
-     * for MFE / multi-theme CSS scoping (Storybook toolbar, runtime theme swap).
-     */
-    themeId?: string;
-    /**
-     * The theme bundle for the app — the canonical 1-theme / 2-mode model.
-     *
-     * Passing `theme` enables `useTokens()` and `useResolvedTokens()` for all
-     * descendants, and automatically injects the CSS Custom Properties `<style>`
-     * tag into the document head (React 19 hoisting).
-     *
-     * @example
-     * ```tsx
-     * import { createTheme } from '@ttoss/fsl-theme';
-     * import { ThemeProvider } from '@ttoss/fsl-theme/react';
-     *
-     * const myTheme = createTheme();
-     *
-     * <ThemeProvider theme={myTheme}>
-     *   <App />
-     * </ThemeProvider>
-     * ```
-     */
-    theme?: ThemeBundle;
-    /**
-     * Called after each mode transition. Does **not** fire on initial mount —
-     * only on subsequent user-triggered or system-triggered mode changes.
-     *
-     * Receives both `mode` (user intent: `'light' | 'dark' | 'system'`) and
-     * `resolvedMode` (actual: `'light' | 'dark'`), covering all integration
-     * needs in one callback.
-     *
-     * @example
-     * ```tsx
-     * <ThemeProvider
-     *   theme={myTheme}
-     *   onModeChange={(mode, resolvedMode) => {
-     *     analytics.track('modeChanged', { mode, resolvedMode });
-     *   }}
-     * >
-     * ```
-     */
-    onModeChange?: (mode: ThemeMode, resolvedMode: ResolvedMode) => void;
-    /**
-     * Root element to anchor `data-tt-theme` / `data-tt-mode` attributes.
-     * Defaults to `document.documentElement`. Pass a container element for
-     * Storybook isolation or micro-frontend use cases.
-     *
-     * Because the element is often `null` on the first render when passed via
-     * `ref.current`, `root` is reactive: the runtime is recreated once when
-     * it transitions from `undefined` to the actual element.
-     *
-     * @example
-     * ```tsx
-     * // Storybook decorator — isolates each story from <html>
-     * const rootRef = React.useRef<HTMLDivElement>(null);
-     * <div ref={rootRef}>
-     *   <ThemeProvider theme={myTheme} root={rootRef.current ?? undefined}>
-     *     <Story />
-     *   </ThemeProvider>
-     * </div>
-     * ```
-     */
-    root?: HTMLElement;
-    children: React.ReactNode;
+  /** Mode to use when no persisted value is found. Only read on initial mount. @default 'system' */
+  defaultMode?: ThemeMode;
+  /** localStorage key for persistence. Only read on initial mount. @default 'tt-theme' */
+  storageKey?: string;
+  /**
+   * Theme identifier written to `data-tt-theme`. Reactive — changing this
+   * prop recreates the runtime and rewrites the attribute so the browser
+   * matches the scoped CSS (e.g. `[data-tt-theme="<id>"]`). Provide only
+   * for MFE / multi-theme CSS scoping (Storybook toolbar, runtime theme swap).
+   */
+  themeId?: string;
+  /**
+   * The theme bundle for the app — the canonical 1-theme / 2-mode model.
+   *
+   * Passing `theme` enables `useTokens()` and `useResolvedTokens()` for all
+   * descendants, and automatically injects the CSS Custom Properties `<style>`
+   * tag into the document head (React 19 hoisting).
+   *
+   * @example
+   * ```tsx
+   * import { createTheme } from '@ttoss/fsl-theme';
+   * import { ThemeProvider } from '@ttoss/fsl-theme/react';
+   *
+   * const myTheme = createTheme();
+   *
+   * <ThemeProvider theme={myTheme}>
+   *   <App />
+   * </ThemeProvider>
+   * ```
+   */
+  theme?: ThemeBundle;
+  /**
+   * Called after each mode transition. Does **not** fire on initial mount —
+   * only on subsequent user-triggered or system-triggered mode changes.
+   *
+   * Receives both `mode` (user intent: `'light' | 'dark' | 'system'`) and
+   * `resolvedMode` (actual: `'light' | 'dark'`), covering all integration
+   * needs in one callback.
+   *
+   * @example
+   * ```tsx
+   * <ThemeProvider
+   *   theme={myTheme}
+   *   onModeChange={(mode, resolvedMode) => {
+   *     analytics.track('modeChanged', { mode, resolvedMode });
+   *   }}
+   * >
+   * ```
+   */
+  onModeChange?: (mode: ThemeMode, resolvedMode: ResolvedMode) => void;
+  /**
+   * Root element to anchor `data-tt-theme` / `data-tt-mode` attributes.
+   * Defaults to `document.documentElement`. Pass a container element for
+   * Storybook isolation or micro-frontend use cases.
+   *
+   * Because the element is often `null` on the first render when passed via
+   * `ref.current`, `root` is reactive: the runtime is recreated once when
+   * it transitions from `undefined` to the actual element.
+   *
+   * @example
+   * ```tsx
+   * // Storybook decorator — isolates each story from <html>
+   * const rootRef = React.useRef<HTMLDivElement>(null);
+   * <div ref={rootRef}>
+   *   <ThemeProvider theme={myTheme} root={rootRef.current ?? undefined}>
+   *     <Story />
+   *   </ThemeProvider>
+   * </div>
+   * ```
+   */
+  root?: HTMLElement;
+  children: React.ReactNode;
 }
 /**
  * React provider that manages theme switching via `createThemeRuntime`.
@@ -102,7 +103,15 @@ interface ThemeProviderProps {
  * );
  * ```
  */
-declare const ThemeProvider: ({ defaultMode, storageKey, theme, themeId, onModeChange, root, children, }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
+declare const ThemeProvider: ({
+  defaultMode,
+  storageKey,
+  theme,
+  themeId,
+  onModeChange,
+  root,
+  children
+}: ThemeProviderProps) => any;
 /**
  * Access mode state and the mode setter — without subscribing to theme changes.
  *
@@ -127,9 +136,9 @@ declare const ThemeProvider: ({ defaultMode, storageKey, theme, themeId, onModeC
  * ```
  */
 interface UseColorModeResult {
-    mode: ThemeMode;
-    resolvedMode: ResolvedMode;
-    setMode: (mode: ThemeMode) => void;
+  mode: ThemeMode;
+  resolvedMode: ResolvedMode;
+  setMode: (mode: ThemeMode) => void;
 }
 declare const useColorMode: () => UseColorModeResult;
 /**
@@ -214,8 +223,8 @@ declare const useResolvedTokens: () => Record<string, string | number>;
  * Props for the `ThemeScript` component.
  */
 interface ThemeScriptProps extends ThemeScriptConfig {
-    /** CSP nonce for the inline script. */
-    nonce?: string;
+  /** CSP nonce for the inline script. */
+  nonce?: string;
 }
 /**
  * Renders an inline `<script>` that prevents theme flash on SSR/SSG.
@@ -239,26 +248,31 @@ interface ThemeScriptProps extends ThemeScriptConfig {
  * }
  * ```
  */
-declare const ThemeScript: ({ defaultTheme, defaultMode, storageKey, nonce, }?: ThemeScriptProps) => react_jsx_runtime.JSX.Element;
+declare const ThemeScript: ({
+  defaultTheme,
+  defaultMode,
+  storageKey,
+  nonce
+}?: ThemeScriptProps) => any;
 /**
  * Props for the `ThemeStyles` component.
  */
 interface ThemeStylesProps {
-    /** The theme bundle to generate CSS for. */
-    theme: ThemeBundle;
-    /**
-     * Theme identifier for CSS scoping (`[data-tt-theme="<themeId>"]`).
-     *
-     * **Omit in the canonical 1-theme model** — CSS targets `:root` and the
-     * alternate mode selector becomes `:root[data-tt-mode="dark"]`. No theme
-     * name repetition required.
-     *
-     * Pass `themeId` only for multi-theme scenarios (Storybook, micro-frontends,
-     * apps with visual theme switching).
-     */
-    themeId?: string;
-    /** CSP nonce for the inline style tag. */
-    nonce?: string;
+  /** The theme bundle to generate CSS for. */
+  theme: ThemeBundle;
+  /**
+   * Theme identifier for CSS scoping (`[data-tt-theme="<themeId>"]`).
+   *
+   * **Omit in the canonical 1-theme model** — CSS targets `:root` and the
+   * alternate mode selector becomes `:root[data-tt-mode="dark"]`. No theme
+   * name repetition required.
+   *
+   * Pass `themeId` only for multi-theme scenarios (Storybook, micro-frontends,
+   * apps with visual theme switching).
+   */
+  themeId?: string;
+  /** CSP nonce for the inline style tag. */
+  nonce?: string;
 }
 /**
  * Renders an inline `<style>` tag with all CSS Custom Properties for a theme
@@ -302,15 +316,19 @@ interface ThemeStylesProps {
  * <ThemeStyles theme={brandB} themeId="brand-b" />
  * ```
  */
-declare const ThemeStyles: ({ theme, themeId, nonce }: ThemeStylesProps) => react_jsx_runtime.JSX.Element;
+declare const ThemeStyles: ({
+  theme,
+  themeId,
+  nonce
+}: ThemeStylesProps) => any;
 /**
  * Props for the `ThemeHead` component.
  */
 interface ThemeHeadProps extends ThemeStylesProps {
-    /** Mode to use when no persisted value is found. @default 'system' */
-    defaultMode?: ThemeMode;
-    /** localStorage key for persistence. Must match `ThemeProvider`'s `storageKey`. @default 'tt-theme' */
-    storageKey?: string;
+  /** Mode to use when no persisted value is found. @default 'system' */
+  defaultMode?: ThemeMode;
+  /** localStorage key for persistence. Must match `ThemeProvider`'s `storageKey`. @default 'tt-theme' */
+  storageKey?: string;
 }
 /**
  * Convenience component that renders both `<ThemeScript>` and `<ThemeStyles>`
@@ -341,6 +359,12 @@ interface ThemeHeadProps extends ThemeStylesProps {
  * }
  * ```
  */
-declare const ThemeHead: ({ theme, themeId, nonce, defaultMode, storageKey, }: ThemeHeadProps) => react_jsx_runtime.JSX.Element;
-export { ResolvedMode, ThemeHead, type ThemeHeadProps, ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeScript, type ThemeScriptProps, ThemeStyles, type ThemeStylesProps, type UseColorModeResult, useColorMode, useResolvedTokens, useTokens };
+declare const ThemeHead: ({
+  theme,
+  themeId,
+  nonce,
+  defaultMode,
+  storageKey
+}: ThemeHeadProps) => any;
+//#endregion
+export { ThemeScript as a, ThemeStylesProps as c, useResolvedTokens as d, useTokens as f, ThemeProviderProps as i, UseColorModeResult as l, ThemeHeadProps as n, ThemeScriptProps as o, ThemeProvider as r, ThemeStyles as s, ThemeHead as t, useColorMode as u };

package/dist/react-DnKxR2gK.d.mts ADDED Viewed

@@ -0,0 +1,370 @@
+import { n as SemanticTokens, r as ThemeBundle } from "./Types-BiBa17RL.mjs";
+import { a as ResolvedMode, o as ThemeMode, t as ThemeScriptConfig } from "./ssrScript-BVysxDws.mjs";
+import * as React from "react";
+//#region src/react.d.ts
+/**
+ * Props for the `ThemeProvider` component.
+ */
+interface ThemeProviderProps {
+  /** Mode to use when no persisted value is found. Only read on initial mount. @default 'system' */
+  defaultMode?: ThemeMode;
+  /** localStorage key for persistence. Only read on initial mount. @default 'tt-theme' */
+  storageKey?: string;
+  /**
+   * Theme identifier written to `data-tt-theme`. Reactive — changing this
+   * prop recreates the runtime and rewrites the attribute so the browser
+   * matches the scoped CSS (e.g. `[data-tt-theme="<id>"]`). Provide only
+   * for MFE / multi-theme CSS scoping (Storybook toolbar, runtime theme swap).
+   */
+  themeId?: string;
+  /**
+   * The theme bundle for the app — the canonical 1-theme / 2-mode model.
+   *
+   * Passing `theme` enables `useTokens()` and `useResolvedTokens()` for all
+   * descendants, and automatically injects the CSS Custom Properties `<style>`
+   * tag into the document head (React 19 hoisting).
+   *
+   * @example
+   * ```tsx
+   * import { createTheme } from '@ttoss/fsl-theme';
+   * import { ThemeProvider } from '@ttoss/fsl-theme/react';
+   *
+   * const myTheme = createTheme();
+   *
+   * <ThemeProvider theme={myTheme}>
+   *   <App />
+   * </ThemeProvider>
+   * ```
+   */
+  theme?: ThemeBundle;
+  /**
+   * Called after each mode transition. Does **not** fire on initial mount —
+   * only on subsequent user-triggered or system-triggered mode changes.
+   *
+   * Receives both `mode` (user intent: `'light' | 'dark' | 'system'`) and
+   * `resolvedMode` (actual: `'light' | 'dark'`), covering all integration
+   * needs in one callback.
+   *
+   * @example
+   * ```tsx
+   * <ThemeProvider
+   *   theme={myTheme}
+   *   onModeChange={(mode, resolvedMode) => {
+   *     analytics.track('modeChanged', { mode, resolvedMode });
+   *   }}
+   * >
+   * ```
+   */
+  onModeChange?: (mode: ThemeMode, resolvedMode: ResolvedMode) => void;
+  /**
+   * Root element to anchor `data-tt-theme` / `data-tt-mode` attributes.
+   * Defaults to `document.documentElement`. Pass a container element for
+   * Storybook isolation or micro-frontend use cases.
+   *
+   * Because the element is often `null` on the first render when passed via
+   * `ref.current`, `root` is reactive: the runtime is recreated once when
+   * it transitions from `undefined` to the actual element.
+   *
+   * @example
+   * ```tsx
+   * // Storybook decorator — isolates each story from <html>
+   * const rootRef = React.useRef<HTMLDivElement>(null);
+   * <div ref={rootRef}>
+   *   <ThemeProvider theme={myTheme} root={rootRef.current ?? undefined}>
+   *     <Story />
+   *   </ThemeProvider>
+   * </div>
+   * ```
+   */
+  root?: HTMLElement;
+  children: React.ReactNode;
+}
+/**
+ * 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>
+ * );
+ * ```
+ */
+declare const ThemeProvider: ({
+  defaultMode,
+  storageKey,
+  theme,
+  themeId,
+  onModeChange,
+  root,
+  children
+}: ThemeProviderProps) => any;
+/**
+ * Access mode state and the mode setter — without subscribing to theme changes.
+ *
+ * Consumers of `useColorMode()` only re-render on mode transitions, never on
+ * `themeId` changes. Use this for components that only need dark/light toggling
+ * (e.g. a sun/moon icon button) to avoid unnecessary re-renders.
+ *
+ * Must be used within a `<ThemeProvider>`.
+ *
+ * @example
+ * ```tsx
+ * import { useColorMode } from '@ttoss/fsl-theme/react';
+ *
+ * const DarkModeToggle = () => {
+ *   const { resolvedMode, setMode } = useColorMode();
+ *   return (
+ *     <button onClick={() => setMode(resolvedMode === 'dark' ? 'light' : 'dark')}>
+ *       {resolvedMode === 'dark' ? '☀️' : '🌙'}
+ *     </button>
+ *   );
+ * };
+ * ```
+ */
+interface UseColorModeResult {
+  mode: ThemeMode;
+  resolvedMode: ResolvedMode;
+  setMode: (mode: ThemeMode) => void;
+}
+declare const useColorMode: () => UseColorModeResult;
+/**
+ * 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)' }} />;
+ * };
+ * ```
+ */
+declare const useTokens: () => SemanticTokens;
+/**
+ * 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>
+ *   );
+ * };
+ * ```
+ */
+declare const useResolvedTokens: () => Record<string, string | number>;
+/**
+ * Props for the `ThemeScript` component.
+ */
+interface ThemeScriptProps extends ThemeScriptConfig {
+  /** CSP nonce for the inline script. */
+  nonce?: string;
+}
+/**
+ * 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>
+ *   );
+ * }
+ * ```
+ */
+declare const ThemeScript: ({
+  defaultTheme,
+  defaultMode,
+  storageKey,
+  nonce
+}?: ThemeScriptProps) => any;
+/**
+ * Props for the `ThemeStyles` component.
+ */
+interface ThemeStylesProps {
+  /** The theme bundle to generate CSS for. */
+  theme: ThemeBundle;
+  /**
+   * Theme identifier for CSS scoping (`[data-tt-theme="<themeId>"]`).
+   *
+   * **Omit in the canonical 1-theme model** — CSS targets `:root` and the
+   * alternate mode selector becomes `:root[data-tt-mode="dark"]`. No theme
+   * name repetition required.
+   *
+   * Pass `themeId` only for multi-theme scenarios (Storybook, micro-frontends,
+   * apps with visual theme switching).
+   */
+  themeId?: string;
+  /** CSP nonce for the inline style tag. */
+  nonce?: string;
+}
+/**
+ * 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" />
+ * ```
+ */
+declare const ThemeStyles: ({
+  theme,
+  themeId,
+  nonce
+}: ThemeStylesProps) => any;
+/**
+ * Props for the `ThemeHead` component.
+ */
+interface ThemeHeadProps extends ThemeStylesProps {
+  /** Mode to use when no persisted value is found. @default 'system' */
+  defaultMode?: ThemeMode;
+  /** localStorage key for persistence. Must match `ThemeProvider`'s `storageKey`. @default 'tt-theme' */
+  storageKey?: string;
+}
+/**
+ * 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>
+ *   );
+ * }
+ * ```
+ */
+declare const ThemeHead: ({
+  theme,
+  themeId,
+  nonce,
+  defaultMode,
+  storageKey
+}: ThemeHeadProps) => any;
+//#endregion
+export { ThemeScript as a, ThemeStylesProps as c, useResolvedTokens as d, useTokens as f, ThemeProviderProps as i, UseColorModeResult as l, ThemeHeadProps as n, ThemeScriptProps as o, ThemeProvider as r, ThemeStyles as s, ThemeHead as t, useColorMode as u };