@ttoss/fsl-theme 1.1.13 → 1.1.15

package/dist/css.cjs

@@ -0,0 +1,48 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+Object.defineProperty(exports, Symbol.toStringTag, {
+  value: 'Module'
+});
+const require_helpers = require('./helpers-4p4-QVt_.cjs');
+const require_toCssVars = require('./toCssVars-DudHKvt2.cjs');
+
+//#region src/css.ts
+/**
+* Returns the full CSS string for a theme bundle — all `--tt-*` custom
+* properties, coarse-pointer overrides, reduced-motion overrides, and
+* container query progressive enhancement — ready to inject into a
+* `<style>` tag or serve as a static `.css` file.
+*
+* Symmetric counterpart to `getThemeScriptContent()` for CSS.
+* Use `<ThemeStyles>` from `@ttoss/fsl-theme/react` for React apps.
+*
+* When `themeId` is omitted (canonical 1-theme model), CSS targets `:root` and
+* the alternate mode selector becomes `:root[data-tt-mode="dark"]`. Pass
+* `themeId` only for multi-theme scenarios (Storybook, micro-frontends).
+*
+* @example
+* ```ts
+* // Canonical: no themeId needed (CSS goes to :root)
+* import { createTheme } from '@ttoss/fsl-theme';
+* import { getThemeStylesContent } from '@ttoss/fsl-theme/css';
+*
+* const myBundle = createTheme();
+*
+* app.get('/theme.css', (_, res) => {
+*   res.type('text/css').send(getThemeStylesContent(myBundle));
+* });
+*
+* // Multi-theme: explicit themeId for scoping
+* res.type('text/css').send(getThemeStylesContent(myBundle, 'myTheme'));
+* ```
+*/
+const getThemeStylesContent = (bundle, themeId) => {
+  return require_toCssVars.toCssVars(bundle, {
+    themeId
+  }).toCssString();
+};
+
+//#endregion
+exports.getThemeStylesContent = getThemeStylesContent;
+exports.toCssVarName = require_toCssVars.toCssVarName;
+exports.toCssVars = require_toCssVars.toCssVars;
+exports.toFlatTokens = require_helpers.toFlatTokens;

package/dist/{css.d.ts → css.d.cts}

@@ -1,5 +1,7 @@
-import { T as ThemeTokens, a as ThemeBundle } from './Types-6tR0_2Ss.js';
 
+import { i as ThemeTokens, r as ThemeBundle } from "./Types-BiBa17RL.cjs";
+
+//#region src/roots/helpers.d.ts
 /**
  * Flatten a `ThemeTokens` into a `Record<string, string | number>` with
  * every `{ref}` recursively resolved to its final raw value where possible.
@@ -12,7 +14,7 @@ import { T as ThemeTokens, a as ThemeBundle } from './Types-6tR0_2Ss.js';
  * This is the universal primitive — every root is derived from this.
  */
 declare const toFlatTokens: (theme: ThemeTokens, options?: {
-    strict?: boolean;
+  strict?: boolean;
 }) => Record<string, string | number>;
 /**
  * A flat map of dot-path token keys to resolved raw values.
@@ -21,7 +23,8 @@ declare const toFlatTokens: (theme: ThemeTokens, options?: {
  * references are preserved as their original `{path}` string.
  */
 type FlatTokenMap = Record<string, string | number>;
-
+//#endregion
+//#region src/roots/toCssVars.d.ts
 /**
  * Convert a full token path to a CSS custom property name.
  *
@@ -33,78 +36,78 @@ declare const toCssVarName: (tokenPath: string) => string;
  * Options for `toCssVars()`.
  */
 interface CssVarsOptions {
-    /**
-     * Theme identifier for scoping. Generates `[data-tt-theme="<themeId>"]` selector.
-     * When omitted, uses `:root`.
-     */
-    themeId?: string;
-    /**
-     * Mode for scoping. Adds `[data-tt-mode="<mode>"]` to the selector.
-     * Only effective when `themeId` is also set.
-     */
-    mode?: 'light' | 'dark';
-    /**
-     * Custom CSS selector override. Takes precedence over `themeId`/`mode`.
-     */
-    selector?: string;
-    /**
-     * Sets the `color-scheme` CSS property in the generated block.
-     * Helps native elements (inputs, scrollbars) respect the active mode.
-     */
-    colorScheme?: 'light' | 'dark' | 'light dark';
+  /**
+   * Theme identifier for scoping. Generates `[data-tt-theme="<themeId>"]` selector.
+   * When omitted, uses `:root`.
+   */
+  themeId?: string;
+  /**
+   * Mode for scoping. Adds `[data-tt-mode="<mode>"]` to the selector.
+   * Only effective when `themeId` is also set.
+   */
+  mode?: 'light' | 'dark';
+  /**
+   * Custom CSS selector override. Takes precedence over `themeId`/`mode`.
+   */
+  selector?: string;
+  /**
+   * Sets the `color-scheme` CSS property in the generated block.
+   * Helps native elements (inputs, scrollbars) respect the active mode.
+   */
+  colorScheme?: 'light' | 'dark' | 'light dark';
 }
 /**
  * Return type of `toCssVars()`.
  */
 interface CssVarsResult {
-    /** Flat map of CSS custom property names → values (original, including CQ units). */
-    cssVars: Record<string, string | number>;
-    /**
-     * Overrides for `hit.*` tokens when `any-pointer: coarse` is active.
-     * Apply these inside `@media (any-pointer: coarse) { :root { ... } }`.
-     * Emitted automatically by `toCssString()`.
-     */
-    coarseHitVars: Record<string, string>;
-    /**
-     * Overrides for semantic motion duration tokens under reduced-motion.
-     * All durations are set to `var(--tt-core-motion-duration-none)` (0ms).
-     * Apply these inside `@media (prefers-reduced-motion: reduce) { :root { ... } }`.
-     * Emitted automatically by `toCssString()`.
-     */
-    reducedMotionVars: Record<string, string>;
-    /**
-     * CSS vars whose values contain container query units (cqi, cqb, etc.).
-     * Emitted inside `@supports (width: 1cqi)` by `toCssString()`.
-     * The base block uses viewport-safe fallbacks for these vars.
-     */
-    containerQueryVars: Record<string, string | number>;
-    /** The CSS selector used for scoping. */
-    selector: string;
-    /** Generates a complete CSS block string. */
-    toCssString: () => string;
+  /** Flat map of CSS custom property names → values (original, including CQ units). */
+  cssVars: Record<string, string | number>;
+  /**
+   * Overrides for `hit.*` tokens when `any-pointer: coarse` is active.
+   * Apply these inside `@media (any-pointer: coarse) { :root { ... } }`.
+   * Emitted automatically by `toCssString()`.
+   */
+  coarseHitVars: Record<string, string>;
+  /**
+   * Overrides for semantic motion duration tokens under reduced-motion.
+   * All durations are set to `var(--tt-core-motion-duration-none)` (0ms).
+   * Apply these inside `@media (prefers-reduced-motion: reduce) { :root { ... } }`.
+   * Emitted automatically by `toCssString()`.
+   */
+  reducedMotionVars: Record<string, string>;
+  /**
+   * CSS vars whose values contain container query units (cqi, cqb, etc.).
+   * Emitted inside `@supports (width: 1cqi)` by `toCssString()`.
+   * The base block uses viewport-safe fallbacks for these vars.
+   */
+  containerQueryVars: Record<string, string | number>;
+  /** The CSS selector used for scoping. */
+  selector: string;
+  /** Generates a complete CSS block string. */
+  toCssString: () => string;
 }
 /**
  * Options for `bundleToCssVars()`.
  */
 interface BundleCssVarsOptions {
-    /**
-     * Theme identifier for scoping. Generates `[data-tt-theme="<themeId>"]` selectors.
-     * When omitted, CSS targets `:root` (canonical 1-theme model). The alternate mode
-     * selector becomes `:root[data-tt-mode="dark"]`. Use `themeId` only for
-     * multi-theme scenarios (Storybook, micro-frontends).
-     */
-    themeId?: string;
+  /**
+   * Theme identifier for scoping. Generates `[data-tt-theme="<themeId>"]` selectors.
+   * When omitted, CSS targets `:root` (canonical 1-theme model). The alternate mode
+   * selector becomes `:root[data-tt-mode="dark"]`. Use `themeId` only for
+   * multi-theme scenarios (Storybook, micro-frontends).
+   */
+  themeId?: string;
 }
 /**
  * Return type of `bundleToCssVars()`.
  */
 interface BundleCssVarsResult {
-    /** CSS result for the base mode (all vars). */
-    base: CssVarsResult;
-    /** CSS result for the alternate mode (diff-only vars). Undefined if no alternate. */
-    alternate?: CssVarsResult;
-    /** Generates a complete CSS string with base + alternate + coarse blocks. */
-    toCssString: () => string;
+  /** CSS result for the base mode (all vars). */
+  base: CssVarsResult;
+  /** CSS result for the alternate mode (diff-only vars). Undefined if no alternate. */
+  alternate?: CssVarsResult;
+  /** Generates a complete CSS string with base + alternate + coarse blocks. */
+  toCssString: () => string;
 }
 /**
  * Convert a theme (tokens or bundle) into CSS custom properties.
@@ -129,7 +132,8 @@ interface BundleCssVarsResult {
  */
 declare function toCssVars(theme: ThemeTokens, options?: CssVarsOptions): CssVarsResult;
 declare function toCssVars(bundle: ThemeBundle, options?: BundleCssVarsOptions): BundleCssVarsResult;
-
+//#endregion
+//#region src/css.d.ts
 /**
  * Returns the full CSS string for a theme bundle — all `--tt-*` custom
  * properties, coarse-pointer overrides, reduced-motion overrides, and
@@ -160,5 +164,5 @@ declare function toCssVars(bundle: ThemeBundle, options?: BundleCssVarsOptions):
  * ```
  */
 declare const getThemeStylesContent: (bundle: ThemeBundle, themeId?: string) => string;
-
-export { type BundleCssVarsOptions, type BundleCssVarsResult, type CssVarsOptions, type CssVarsResult, type FlatTokenMap, getThemeStylesContent, toCssVarName, toCssVars, toFlatTokens };
+//#endregion
+export { type BundleCssVarsOptions, type BundleCssVarsResult, type CssVarsOptions, type CssVarsResult, type FlatTokenMap, getThemeStylesContent, toCssVarName, toCssVars, toFlatTokens };

package/dist/css.d.mts

@@ -0,0 +1,168 @@
+
+import { i as ThemeTokens, r as ThemeBundle } from "./Types-BiBa17RL.mjs";
+
+//#region src/roots/helpers.d.ts
+/**
+ * Flatten a `ThemeTokens` into a `Record<string, string | number>` with
+ * every `{ref}` recursively resolved to its final raw value where possible.
+ *
+ * By default, unresolvable references (missing target or circular dependency)
+ * are preserved as-is in the output. Pass `{ strict: true }` to instead throw
+ * on any unresolved reference — useful in tests and build steps that must
+ * fail loudly on palette drift.
+ *
+ * This is the universal primitive — every root is derived from this.
+ */
+declare const toFlatTokens: (theme: ThemeTokens, options?: {
+  strict?: boolean;
+}) => Record<string, string | number>;
+/**
+ * A flat map of dot-path token keys to resolved raw values.
+ *
+ * Most `{ref}` values are recursively resolved. Unresolvable or circular
+ * references are preserved as their original `{path}` string.
+ */
+type FlatTokenMap = Record<string, string | number>;
+//#endregion
+//#region src/roots/toCssVars.d.ts
+/**
+ * Convert a full token path to a CSS custom property name.
+ *
+ * `core.colors.brand.500` → `--tt-core-colors-brand-500`
+ * `semantic.colors.action.primary.background.default` → `--tt-colors-action-primary-background-default`
+ */
+declare const toCssVarName: (tokenPath: string) => string;
+/**
+ * Options for `toCssVars()`.
+ */
+interface CssVarsOptions {
+  /**
+   * Theme identifier for scoping. Generates `[data-tt-theme="<themeId>"]` selector.
+   * When omitted, uses `:root`.
+   */
+  themeId?: string;
+  /**
+   * Mode for scoping. Adds `[data-tt-mode="<mode>"]` to the selector.
+   * Only effective when `themeId` is also set.
+   */
+  mode?: 'light' | 'dark';
+  /**
+   * Custom CSS selector override. Takes precedence over `themeId`/`mode`.
+   */
+  selector?: string;
+  /**
+   * Sets the `color-scheme` CSS property in the generated block.
+   * Helps native elements (inputs, scrollbars) respect the active mode.
+   */
+  colorScheme?: 'light' | 'dark' | 'light dark';
+}
+/**
+ * Return type of `toCssVars()`.
+ */
+interface CssVarsResult {
+  /** Flat map of CSS custom property names → values (original, including CQ units). */
+  cssVars: Record<string, string | number>;
+  /**
+   * Overrides for `hit.*` tokens when `any-pointer: coarse` is active.
+   * Apply these inside `@media (any-pointer: coarse) { :root { ... } }`.
+   * Emitted automatically by `toCssString()`.
+   */
+  coarseHitVars: Record<string, string>;
+  /**
+   * Overrides for semantic motion duration tokens under reduced-motion.
+   * All durations are set to `var(--tt-core-motion-duration-none)` (0ms).
+   * Apply these inside `@media (prefers-reduced-motion: reduce) { :root { ... } }`.
+   * Emitted automatically by `toCssString()`.
+   */
+  reducedMotionVars: Record<string, string>;
+  /**
+   * CSS vars whose values contain container query units (cqi, cqb, etc.).
+   * Emitted inside `@supports (width: 1cqi)` by `toCssString()`.
+   * The base block uses viewport-safe fallbacks for these vars.
+   */
+  containerQueryVars: Record<string, string | number>;
+  /** The CSS selector used for scoping. */
+  selector: string;
+  /** Generates a complete CSS block string. */
+  toCssString: () => string;
+}
+/**
+ * Options for `bundleToCssVars()`.
+ */
+interface BundleCssVarsOptions {
+  /**
+   * Theme identifier for scoping. Generates `[data-tt-theme="<themeId>"]` selectors.
+   * When omitted, CSS targets `:root` (canonical 1-theme model). The alternate mode
+   * selector becomes `:root[data-tt-mode="dark"]`. Use `themeId` only for
+   * multi-theme scenarios (Storybook, micro-frontends).
+   */
+  themeId?: string;
+}
+/**
+ * Return type of `bundleToCssVars()`.
+ */
+interface BundleCssVarsResult {
+  /** CSS result for the base mode (all vars). */
+  base: CssVarsResult;
+  /** CSS result for the alternate mode (diff-only vars). Undefined if no alternate. */
+  alternate?: CssVarsResult;
+  /** Generates a complete CSS string with base + alternate + coarse blocks. */
+  toCssString: () => string;
+}
+/**
+ * Convert a theme (tokens or bundle) into CSS custom properties.
+ *
+ * **Overload 1 — ThemeTokens**: returns a single `CssVarsResult`.
+ * **Overload 2 — ThemeBundle**: returns a `BundleCssVarsResult` with
+ * base + alternate blocks and optimized diff output.
+ *
+ * @example
+ * ```ts
+ * import { toCssVars } from '@ttoss/fsl-theme/css';
+ * import { createTheme } from '@ttoss/fsl-theme';
+ *
+ * const myBundle = createTheme();
+ *
+ * // Single theme tokens
+ * const css = toCssVars(myBundle.base).toCssString();
+ *
+ * // Full bundle (base + dark alternate)
+ * const bundleCss = toCssVars(myBundle, { themeId: 'default' }).toCssString();
+ * ```
+ */
+declare function toCssVars(theme: ThemeTokens, options?: CssVarsOptions): CssVarsResult;
+declare function toCssVars(bundle: ThemeBundle, options?: BundleCssVarsOptions): BundleCssVarsResult;
+//#endregion
+//#region src/css.d.ts
+/**
+ * Returns the full CSS string for a theme bundle — all `--tt-*` custom
+ * properties, coarse-pointer overrides, reduced-motion overrides, and
+ * container query progressive enhancement — ready to inject into a
+ * `<style>` tag or serve as a static `.css` file.
+ *
+ * Symmetric counterpart to `getThemeScriptContent()` for CSS.
+ * Use `<ThemeStyles>` from `@ttoss/fsl-theme/react` for React apps.
+ *
+ * When `themeId` is omitted (canonical 1-theme model), CSS targets `:root` and
+ * the alternate mode selector becomes `:root[data-tt-mode="dark"]`. Pass
+ * `themeId` only for multi-theme scenarios (Storybook, micro-frontends).
+ *
+ * @example
+ * ```ts
+ * // Canonical: no themeId needed (CSS goes to :root)
+ * import { createTheme } from '@ttoss/fsl-theme';
+ * import { getThemeStylesContent } from '@ttoss/fsl-theme/css';
+ *
+ * const myBundle = createTheme();
+ *
+ * app.get('/theme.css', (_, res) => {
+ *   res.type('text/css').send(getThemeStylesContent(myBundle));
+ * });
+ *
+ * // Multi-theme: explicit themeId for scoping
+ * res.type('text/css').send(getThemeStylesContent(myBundle, 'myTheme'));
+ * ```
+ */
+declare const getThemeStylesContent: (bundle: ThemeBundle, themeId?: string) => string;
+//#endregion
+export { type BundleCssVarsOptions, type BundleCssVarsResult, type CssVarsOptions, type CssVarsResult, type FlatTokenMap, getThemeStylesContent, toCssVarName, toCssVars, toFlatTokens };

package/dist/css.mjs

@@ -0,0 +1,42 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { s as toFlatTokens } from "./helpers-CaswNJMy.mjs";
+import { n as toCssVars, t as toCssVarName } from "./toCssVars-CYZCe-on.mjs";
+
+//#region src/css.ts
+/**
+* Returns the full CSS string for a theme bundle — all `--tt-*` custom
+* properties, coarse-pointer overrides, reduced-motion overrides, and
+* container query progressive enhancement — ready to inject into a
+* `<style>` tag or serve as a static `.css` file.
+*
+* Symmetric counterpart to `getThemeScriptContent()` for CSS.
+* Use `<ThemeStyles>` from `@ttoss/fsl-theme/react` for React apps.
+*
+* When `themeId` is omitted (canonical 1-theme model), CSS targets `:root` and
+* the alternate mode selector becomes `:root[data-tt-mode="dark"]`. Pass
+* `themeId` only for multi-theme scenarios (Storybook, micro-frontends).
+*
+* @example
+* ```ts
+* // Canonical: no themeId needed (CSS goes to :root)
+* import { createTheme } from '@ttoss/fsl-theme';
+* import { getThemeStylesContent } from '@ttoss/fsl-theme/css';
+*
+* const myBundle = createTheme();
+*
+* app.get('/theme.css', (_, res) => {
+*   res.type('text/css').send(getThemeStylesContent(myBundle));
+* });
+*
+* // Multi-theme: explicit themeId for scoping
+* res.type('text/css').send(getThemeStylesContent(myBundle, 'myTheme'));
+* ```
+*/
+const getThemeStylesContent = (bundle, themeId) => {
+  return toCssVars(bundle, {
+    themeId
+  }).toCssString();
+};
+
+//#endregion
+export { getThemeStylesContent, toCssVarName, toCssVars, toFlatTokens };

package/dist/dataviz/index.cjs

@@ -0,0 +1,45 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+Object.defineProperty(exports, Symbol.toStringTag, {
+  value: 'Module'
+});
+const require_react = require('../react-EUwpdvY7.cjs');
+const require_withDataviz = require('../withDataviz-B4pVsOwV.cjs');
+
+//#region src/dataviz/useDatavizTokens.ts
+/**
+* Access the current theme's **dataviz semantic tokens**.
+*
+* Requires `<ThemeProvider theme={...}>` with a bundle whose theme includes
+* the dataviz extension (`core.dataviz` + `semantic.dataviz`).
+*
+* Throws a descriptive error when the active theme has no dataviz extension,
+* making misconfiguration immediately visible during development.
+*
+* @example
+* ```tsx
+* import { useDatavizTokens } from '@ttoss/fsl-theme/dataviz';
+*
+* const ChartLegend = ({ categories }: { categories: string[] }) => {
+*   const dataviz = useDatavizTokens();
+*   // Full type-safety, no optional chaining
+*   return categories.map((name, i) => (
+*     <span key={name} style={{ color: `var(--tt-dataviz-color-series-${i + 1})` }}>
+*       {name}
+*     </span>
+*   ));
+* };
+* ```
+*
+* @see {@link useTokens} — access full semantic tokens (dataviz will be on `tokens.dataviz?`)
+*/
+const useDatavizTokens = () => {
+  const tokens = require_react.useTokens();
+  if (!tokens.dataviz) throw new Error("useDatavizTokens: the active theme does not include the dataviz extension.\nWrap your bundle with withDataviz before passing it to ThemeProvider:\n\n  import { withDataviz } from \"@ttoss/fsl-theme/dataviz\";\n  export const myTheme = withDataviz(createTheme({ ... }));");
+  return tokens.dataviz;
+};
+
+//#endregion
+exports.coreDataviz = require_withDataviz.coreDataviz;
+exports.semanticDataviz = require_withDataviz.semanticDataviz;
+exports.useDatavizTokens = useDatavizTokens;
+exports.withDataviz = require_withDataviz.withDataviz;

package/dist/dataviz/{index.d.ts → index.d.cts}

@@ -1,5 +1,7 @@
-import { C as CoreDataviz, b as SemanticDataviz, a as ThemeBundle } from '../Types-6tR0_2Ss.js';
 
+import { o as CoreDataviz, r as ThemeBundle, s as SemanticDataviz } from "../Types-BiBa17RL.cjs";
+
+//#region src/dataviz/baseTheme.d.ts
 /**
  * **Default** dataviz encoding primitives — non-color, value-only.
  *
@@ -7,7 +9,8 @@ import { C as CoreDataviz, b as SemanticDataviz, a as ThemeBundle } from '../Typ
  */
 declare const coreDataviz: CoreDataviz;
 declare const semanticDataviz: SemanticDataviz;
-
+//#endregion
+//#region src/dataviz/useDatavizTokens.d.ts
 /**
  * Access the current theme's **dataviz semantic tokens**.
  *
@@ -35,7 +38,8 @@ declare const semanticDataviz: SemanticDataviz;
  * @see {@link useTokens} — access full semantic tokens (dataviz will be on `tokens.dataviz?`)
  */
 declare const useDatavizTokens: () => SemanticDataviz;
-
+//#endregion
+//#region src/dataviz/withDataviz.d.ts
 /**
  * Extend a `ThemeBundle` with the dataviz token layer.
  *
@@ -58,5 +62,5 @@ declare const useDatavizTokens: () => SemanticDataviz;
  * ```
  */
 declare const withDataviz: (bundle: ThemeBundle) => ThemeBundle;
-
-export { CoreDataviz, SemanticDataviz, coreDataviz, semanticDataviz, useDatavizTokens, withDataviz };
+//#endregion
+export { type CoreDataviz, type SemanticDataviz, coreDataviz, semanticDataviz, useDatavizTokens, withDataviz };

package/dist/dataviz/index.d.mts

@@ -0,0 +1,66 @@
+
+import { o as CoreDataviz, r as ThemeBundle, s as SemanticDataviz } from "../Types-BiBa17RL.mjs";
+
+//#region src/dataviz/baseTheme.d.ts
+/**
+ * **Default** dataviz encoding primitives — non-color, value-only.
+ *
+ * Analytical color comes from `core.colors.*` — see `semanticDataviz` below.
+ */
+declare const coreDataviz: CoreDataviz;
+declare const semanticDataviz: SemanticDataviz;
+//#endregion
+//#region src/dataviz/useDatavizTokens.d.ts
+/**
+ * Access the current theme's **dataviz semantic tokens**.
+ *
+ * Requires `<ThemeProvider theme={...}>` with a bundle whose theme includes
+ * the dataviz extension (`core.dataviz` + `semantic.dataviz`).
+ *
+ * Throws a descriptive error when the active theme has no dataviz extension,
+ * making misconfiguration immediately visible during development.
+ *
+ * @example
+ * ```tsx
+ * import { useDatavizTokens } from '@ttoss/fsl-theme/dataviz';
+ *
+ * const ChartLegend = ({ categories }: { categories: string[] }) => {
+ *   const dataviz = useDatavizTokens();
+ *   // Full type-safety, no optional chaining
+ *   return categories.map((name, i) => (
+ *     <span key={name} style={{ color: `var(--tt-dataviz-color-series-${i + 1})` }}>
+ *       {name}
+ *     </span>
+ *   ));
+ * };
+ * ```
+ *
+ * @see {@link useTokens} — access full semantic tokens (dataviz will be on `tokens.dataviz?`)
+ */
+declare const useDatavizTokens: () => SemanticDataviz;
+//#endregion
+//#region src/dataviz/withDataviz.d.ts
+/**
+ * Extend a `ThemeBundle` with the dataviz token layer.
+ *
+ * Applies `core.dataviz` (encoding primitives) and `semantic.dataviz` on top
+ * of the bundle's base theme. Semantic color mappings reference `core.colors.*`
+ * from the base theme, so brand-aligned dataviz palettes are automatic.
+ * The dark-mode alternate (if any) is preserved as-is.
+ *
+ * @param bundle - Bundle to extend (return value of `createTheme`).
+ * @returns A new `ThemeBundle` with dataviz tokens included.
+ *
+ * @example
+ * ```ts
+ * import { createTheme } from '@ttoss/fsl-theme';
+ * import { withDataviz } from '@ttoss/fsl-theme/dataviz';
+ *
+ * export const myTheme = withDataviz(createTheme({
+ *   overrides: { core: { colors: { brand: { 500: '#FF0000' } } } },
+ * }));
+ * ```
+ */
+declare const withDataviz: (bundle: ThemeBundle) => ThemeBundle;
+//#endregion
+export { type CoreDataviz, type SemanticDataviz, coreDataviz, semanticDataviz, useDatavizTokens, withDataviz };

package/dist/dataviz/index.mjs

@@ -0,0 +1,39 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { n as coreDataviz, r as semanticDataviz, t as withDataviz } from "../withDataviz-DY5s7R51.mjs";
+import { useTokens } from "../react.mjs";
+
+//#region src/dataviz/useDatavizTokens.ts
+/**
+* Access the current theme's **dataviz semantic tokens**.
+*
+* Requires `<ThemeProvider theme={...}>` with a bundle whose theme includes
+* the dataviz extension (`core.dataviz` + `semantic.dataviz`).
+*
+* Throws a descriptive error when the active theme has no dataviz extension,
+* making misconfiguration immediately visible during development.
+*
+* @example
+* ```tsx
+* import { useDatavizTokens } from '@ttoss/fsl-theme/dataviz';
+*
+* const ChartLegend = ({ categories }: { categories: string[] }) => {
+*   const dataviz = useDatavizTokens();
+*   // Full type-safety, no optional chaining
+*   return categories.map((name, i) => (
+*     <span key={name} style={{ color: `var(--tt-dataviz-color-series-${i + 1})` }}>
+*       {name}
+*     </span>
+*   ));
+* };
+* ```
+*
+* @see {@link useTokens} — access full semantic tokens (dataviz will be on `tokens.dataviz?`)
+*/
+const useDatavizTokens = () => {
+  const tokens = useTokens();
+  if (!tokens.dataviz) throw new Error("useDatavizTokens: the active theme does not include the dataviz extension.\nWrap your bundle with withDataviz before passing it to ThemeProvider:\n\n  import { withDataviz } from \"@ttoss/fsl-theme/dataviz\";\n  export const myTheme = withDataviz(createTheme({ ... }));");
+  return tokens.dataviz;
+};
+
+//#endregion
+export { coreDataviz, semanticDataviz, useDatavizTokens, withDataviz };