@validationcloud/fractal-ui 1.51.0 → 1.53.0

package/dist/components/echarts-renderer/mavrik-theme.d.ts

@@ -1,3 +1,5 @@
+import { EChartsOption } from 'echarts';
+/** Default Mavrik theme with vertical gradients (for vertical bars and other charts) */
 export declare const MAVRIK_THEME: {
     readonly name: "mavrik";
     readonly config: {
@@ -63,6 +65,7 @@ export declare const MAVRIK_THEME: {
             axisLabel: {
                 show: boolean;
                 color: string;
+                hideOverlap: boolean;
             };
             nameLocation: string;
             nameTextStyle: {
@@ -84,6 +87,7 @@ export declare const MAVRIK_THEME: {
             axisLabel: {
                 show: boolean;
                 color: string;
+                hideOverlap: boolean;
             };
             nameLocation: string;
             nameTextStyle: {
@@ -109,6 +113,7 @@ export declare const MAVRIK_THEME: {
             axisLabel: {
                 show: boolean;
                 color: string;
+                hideOverlap: boolean;
             };
             nameLocation: string;
             nameTextStyle: {
@@ -137,6 +142,7 @@ export declare const MAVRIK_THEME: {
             axisLabel: {
                 show: boolean;
                 color: string;
+                hideOverlap: boolean;
             };
             nameLocation: string;
             nameTextStyle: {
@@ -225,3 +231,243 @@ export declare const MAVRIK_THEME: {
         };
     };
 };
+/** Mavrik theme variant with horizontal gradients (for horizontal bar charts) */
+export declare const MAVRIK_THEME_HORIZONTAL: {
+    readonly name: "mavrik-horizontal";
+    readonly config: {
+        color: {
+            type: string;
+            x: number;
+            y: number;
+            x2: number;
+            y2: number;
+            colorStops: {
+                offset: number;
+                color: string;
+            }[];
+        }[];
+        backgroundColor: string;
+        textStyle: {
+            fontFamily: string;
+            fontWeight: number;
+        };
+        title: {
+            top: number;
+            left: number;
+            textStyle: {
+                color: string;
+                fontSize: number;
+                fontWeight: number;
+            };
+            subtextStyle: {
+                color: string;
+            };
+        };
+        line: {
+            itemStyle: {
+                borderWidth: number;
+            };
+            lineStyle: {
+                width: number;
+            };
+            areaStyle: {
+                opacity: number;
+            };
+            showSymbol: boolean;
+            symbolSize: number;
+            symbol: string;
+            smooth: boolean;
+            sampling: string;
+        };
+        bar: {
+            barGap: string;
+            barCategoryGap: string;
+        };
+        categoryAxis: {
+            axisLine: {
+                show: boolean;
+                lineStyle: {
+                    color: string;
+                    type: string;
+                };
+            };
+            axisTick: {
+                show: boolean;
+            };
+            axisLabel: {
+                show: boolean;
+                color: string;
+                hideOverlap: boolean;
+            };
+            nameLocation: string;
+            nameTextStyle: {
+                color: string;
+                fontSize: number;
+                fontWeight: number;
+            };
+            splitLine: {
+                show: boolean;
+            };
+        };
+        valueAxis: {
+            axisLine: {
+                show: boolean;
+            };
+            axisTick: {
+                show: boolean;
+            };
+            axisLabel: {
+                show: boolean;
+                color: string;
+                hideOverlap: boolean;
+            };
+            nameLocation: string;
+            nameTextStyle: {
+                color: string;
+                fontSize: number;
+                fontWeight: number;
+            };
+            splitLine: {
+                show: boolean;
+                lineStyle: {
+                    color: string[];
+                    type: string;
+                };
+            };
+        };
+        logAxis: {
+            axisLine: {
+                show: boolean;
+            };
+            axisTick: {
+                show: boolean;
+            };
+            axisLabel: {
+                show: boolean;
+                color: string;
+                hideOverlap: boolean;
+            };
+            nameLocation: string;
+            nameTextStyle: {
+                color: string;
+                fontSize: number;
+                fontWeight: number;
+            };
+            splitLine: {
+                show: boolean;
+                lineStyle: {
+                    color: string[];
+                    type: string;
+                };
+            };
+        };
+        timeAxis: {
+            axisLine: {
+                show: boolean;
+                lineStyle: {
+                    color: string;
+                };
+            };
+            axisTick: {
+                show: boolean;
+            };
+            axisLabel: {
+                show: boolean;
+                color: string;
+                hideOverlap: boolean;
+            };
+            nameLocation: string;
+            nameTextStyle: {
+                color: string;
+                fontSize: number;
+                fontWeight: number;
+            };
+            splitLine: {
+                show: boolean;
+            };
+        };
+        legend: {
+            top: number;
+            left: string;
+            right: number;
+            icon: string;
+            itemGap: number;
+            itemWidth: number;
+            itemHeight: number;
+            textStyle: {
+                color: string;
+                fontSize: number;
+            };
+        };
+        grid: {
+            top: number;
+            left: number;
+            right: number;
+            bottom: number;
+            outerBoundsMode: string;
+            outerBoundsContain: string;
+        };
+        dataZoom: {
+            backgroundColor: string;
+            borderColor: string;
+            borderRadius: number;
+            dataBackground: {
+                lineStyle: {
+                    color: string;
+                    width: number;
+                };
+                areaStyle: {
+                    color: string;
+                };
+            };
+            selectedDataBackground: {
+                lineStyle: {
+                    color: string;
+                    width: number;
+                };
+                areaStyle: {
+                    color: string;
+                };
+            };
+            fillerColor: string;
+            handleStyle: {
+                color: string;
+                borderColor: string;
+            };
+            moveHandleStyle: {
+                color: string;
+            };
+            brushStyle: {
+                color: string;
+            };
+            emphasis: {
+                handleStyle: {
+                    color: string;
+                    borderColor: string;
+                };
+            };
+            handleSize: string;
+            textStyle: {
+                color: string;
+            };
+        };
+        markPoint: {
+            label: {
+                color: string;
+            };
+            emphasis: {
+                label: {
+                    color: string;
+                };
+            };
+        };
+    };
+};
+export type MavrikTheme = typeof MAVRIK_THEME | typeof MAVRIK_THEME_HORIZONTAL;
+/**
+ * Selects the appropriate Mavrik theme variant based on chart options.
+ *
+ * - Returns horizontal gradient theme for horizontal bar charts
+ * - Returns vertical gradient theme for all other chart types
+ */
+export declare function selectMavrikTheme(option: EChartsOption): MavrikTheme;

package/dist/components/echarts-renderer/mavrik-theme.js

@@ -1,11 +1,23 @@
-import { isEChartsThemeOption as r } from "./echarts-theme-option.js";
-import o from "./mavrik-theme.json.js";
-if (!r(o))
+import { hasHorizontalBars as t } from "./detect-horizontal-bars.js";
+import { isEChartsThemeOption as o } from "./echarts-theme-option.js";
+import r from "./mavrik-theme-horizontal.json.js";
+import i from "./mavrik-theme.json.js";
+if (!o(i))
   throw new Error("Invalid mavrik theme configuration");
-const t = {
+if (!o(r))
+  throw new Error("Invalid mavrik horizontal theme configuration");
+const e = {
   name: "mavrik",
-  config: o
+  config: i
+}, m = {
+  name: "mavrik-horizontal",
+  config: r
 };
+function l(n) {
+  return t(n) ? m : e;
+}
 export {
-  t as MAVRIK_THEME
+  e as MAVRIK_THEME,
+  m as MAVRIK_THEME_HORIZONTAL,
+  l as selectMavrikTheme
 };

package/dist/components/echarts-renderer/mavrik-theme.json.d.ts

@@ -102,7 +102,8 @@ declare const _default: {
     },
     "axisLabel": {
       "show": true,
-      "color": "#A7A9AD"
+      "color": "#A7A9AD",
+      "hideOverlap": true
     },
     "nameLocation": "middle",
     "nameTextStyle": {
@@ -123,7 +124,8 @@ declare const _default: {
     },
     "axisLabel": {
       "show": true,
-      "color": "#A7A9AD"
+      "color": "#A7A9AD",
+      "hideOverlap": true
     },
     "nameLocation": "middle",
     "nameTextStyle": {
@@ -134,7 +136,9 @@ declare const _default: {
     "splitLine": {
       "show": true,
       "lineStyle": {
-        "color": ["#3A3D46"],
+        "color": [
+          "#3A3D46"
+        ],
         "type": "dashed"
       }
     }
@@ -148,7 +152,8 @@ declare const _default: {
     },
     "axisLabel": {
       "show": true,
-      "color": "#A7A9AD"
+      "color": "#A7A9AD",
+      "hideOverlap": true
     },
     "nameLocation": "middle",
     "nameTextStyle": {
@@ -159,7 +164,9 @@ declare const _default: {
     "splitLine": {
       "show": true,
       "lineStyle": {
-        "color": ["#3A3D46"],
+        "color": [
+          "#3A3D46"
+        ],
         "type": "dashed"
       }
     }
@@ -176,7 +183,8 @@ declare const _default: {
     },
     "axisLabel": {
       "show": true,
-      "color": "#A7A9AD"
+      "color": "#A7A9AD",
+      "hideOverlap": true
     },
     "nameLocation": "middle",
     "nameTextStyle": {
@@ -205,7 +213,7 @@ declare const _default: {
     "top": 132,
     "left": 32,
     "right": 32,
-    "bottom": 70,
+    "bottom": 32,
     "outerBoundsMode": "same",
     "outerBoundsContain": "axisLabel"
   },

package/dist/components/echarts-renderer/mavrik-theme.json.js

@@ -1,33 +1,33 @@
-const o = [{ type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#C14E64" }, { offset: 1, color: "#DF687D" }] }, { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#FFFFFF" }, { offset: 1, color: "#FFFFFF" }] }, { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#1E6FDA" }, { offset: 1, color: "#3F8CFF" }] }], e = "#242731", t = { fontFamily: "Poppins, sans-serif", fontWeight: 500 }, l = { top: 32, left: 32, textStyle: { color: "#FFFFFF", fontSize: 16, fontWeight: 600 }, subtextStyle: { color: "#A7A9AD" } }, i = { itemStyle: { borderWidth: 1 }, lineStyle: { width: 2 }, areaStyle: { opacity: 0.15 }, showSymbol: !1, symbolSize: 5, symbol: "circle", smooth: !1, sampling: "lttb" }, a = { barGap: "25%", barCategoryGap: "25%" }, s = { axisLine: { show: !0, lineStyle: { color: "#3A3D46", type: "dashed" } }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD" }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !1 } }, r = { axisLine: { show: !1 }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD" }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !0, lineStyle: { color: ["#3A3D46"], type: "dashed" } } }, n = { axisLine: { show: !1 }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD" }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !0, lineStyle: { color: ["#3A3D46"], type: "dashed" } } }, c = { axisLine: { show: !0, lineStyle: { color: "#3A3D46" } }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD" }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !1 } }, A = { top: 82, left: "auto", right: 32, icon: "circle", itemGap: 22, itemWidth: 12, itemHeight: 12, textStyle: { color: "#A7A9AD", fontSize: 11 } }, y = { top: 132, left: 32, right: 32, bottom: 70, outerBoundsMode: "same", outerBoundsContain: "axisLabel" }, d = { backgroundColor: "rgba(36, 39, 49, 0)", borderColor: "#3A3D46", borderRadius: 4, dataBackground: { lineStyle: { color: "#606060", width: 1 }, areaStyle: { color: "rgba(96, 96, 96, 0.3)" } }, selectedDataBackground: { lineStyle: { color: "#b36674", width: 1 }, areaStyle: { color: "rgba(164, 91, 105, 0.5)" } }, fillerColor: "rgba(82, 45, 52, 0.35)", handleStyle: { color: "#C14E64", borderColor: "#C14E64" }, moveHandleStyle: { color: "#b36674" }, brushStyle: { color: "rgba(95, 58, 65, 0.2)" }, emphasis: { handleStyle: { color: "rgb(209, 123, 140)", borderColor: "rgb(209, 123, 140)" } }, handleSize: "100%", textStyle: { color: "#A7A9AD" } }, f = { label: { color: "#A7A9AD" }, emphasis: { label: { color: "#FFFFFF" } } }, h = {
+const o = [{ type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#C14E64" }, { offset: 1, color: "#DF687D" }] }, { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#FFFFFF" }, { offset: 1, color: "#FFFFFF" }] }, { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#1E6FDA" }, { offset: 1, color: "#3F8CFF" }] }], e = "#242731", t = { fontFamily: "Poppins, sans-serif", fontWeight: 500 }, l = { top: 32, left: 32, textStyle: { color: "#FFFFFF", fontSize: 16, fontWeight: 600 }, subtextStyle: { color: "#A7A9AD" } }, r = { itemStyle: { borderWidth: 1 }, lineStyle: { width: 2 }, areaStyle: { opacity: 0.15 }, showSymbol: !1, symbolSize: 5, symbol: "circle", smooth: !1, sampling: "lttb" }, i = { barGap: "25%", barCategoryGap: "25%" }, a = { axisLine: { show: !0, lineStyle: { color: "#3A3D46", type: "dashed" } }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD", hideOverlap: !0 }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !1 } }, s = { axisLine: { show: !1 }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD", hideOverlap: !0 }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !0, lineStyle: { color: ["#3A3D46"], type: "dashed" } } }, n = { axisLine: { show: !1 }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD", hideOverlap: !0 }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !0, lineStyle: { color: ["#3A3D46"], type: "dashed" } } }, c = { axisLine: { show: !0, lineStyle: { color: "#3A3D46" } }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD", hideOverlap: !0 }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !1 } }, d = { top: 82, left: "auto", right: 32, icon: "circle", itemGap: 22, itemWidth: 12, itemHeight: 12, textStyle: { color: "#A7A9AD", fontSize: 11 } }, h = { top: 132, left: 32, right: 32, bottom: 32, outerBoundsMode: "same", outerBoundsContain: "axisLabel" }, A = { backgroundColor: "rgba(36, 39, 49, 0)", borderColor: "#3A3D46", borderRadius: 4, dataBackground: { lineStyle: { color: "#606060", width: 1 }, areaStyle: { color: "rgba(96, 96, 96, 0.3)" } }, selectedDataBackground: { lineStyle: { color: "#b36674", width: 1 }, areaStyle: { color: "rgba(164, 91, 105, 0.5)" } }, fillerColor: "rgba(82, 45, 52, 0.35)", handleStyle: { color: "#C14E64", borderColor: "#C14E64" }, moveHandleStyle: { color: "#b36674" }, brushStyle: { color: "rgba(95, 58, 65, 0.2)" }, emphasis: { handleStyle: { color: "rgb(209, 123, 140)", borderColor: "rgb(209, 123, 140)" } }, handleSize: "100%", textStyle: { color: "#A7A9AD" } }, y = { label: { color: "#A7A9AD" }, emphasis: { label: { color: "#FFFFFF" } } }, f = {
   color: o,
   backgroundColor: e,
   textStyle: t,
   title: l,
-  line: i,
-  bar: a,
-  categoryAxis: s,
-  valueAxis: r,
+  line: r,
+  bar: i,
+  categoryAxis: a,
+  valueAxis: s,
   logAxis: n,
   timeAxis: c,
-  legend: A,
-  grid: y,
-  dataZoom: d,
-  markPoint: f
+  legend: d,
+  grid: h,
+  dataZoom: A,
+  markPoint: y
 };
 export {
   e as backgroundColor,
-  a as bar,
-  s as categoryAxis,
+  i as bar,
+  a as categoryAxis,
   o as color,
-  d as dataZoom,
-  h as default,
-  y as grid,
-  A as legend,
-  i as line,
+  A as dataZoom,
+  f as default,
+  h as grid,
+  d as legend,
+  r as line,
   n as logAxis,
-  f as markPoint,
+  y as markPoint,
   t as textStyle,
   c as timeAxis,
   l as title,
-  r as valueAxis
+  s as valueAxis
 };

package/dist/components/echarts-renderer/sanitize-chart-options.d.ts

@@ -0,0 +1,6 @@
+import { EChartsOption } from 'echarts';
+/**
+ * Removes problematic interactive components from chart options.
+ * These components have known issues with ECharts' cleanup lifecycle.
+ */
+export declare function sanitizeChartOptions(option: EChartsOption): EChartsOption;

package/dist/components/echarts-renderer/sanitize-chart-options.js

@@ -0,0 +1,9 @@
+const n = /* @__PURE__ */ new Set(["axisPointer"]);
+function i(t) {
+  return Object.fromEntries(
+    Object.entries(t).filter(([e]) => !n.has(e))
+  );
+}
+export {
+  i as sanitizeChartOptions
+};

package/dist/components/echarts-renderer/use-chart-instance.d.ts

@@ -9,7 +9,6 @@ export type UseChartInstanceProps = {
 };
 export type UseChartInstanceReturn = {
     containerRef: React.RefObject<HTMLDivElement | null>;
-    isReady: boolean;
     downloadChart: () => Promise<void>;
 };
 /**

package/dist/components/echarts-renderer/use-chart-instance.js

@@ -1,46 +1,63 @@
 "use client";
-import { init as f, registerTheme as h } from "echarts";
-import { useRef as i, useState as w, useEffect as d, useCallback as g } from "react";
-const u = /* @__PURE__ */ new Set();
-function R(e, n) {
-  u.has(e) || (h(e, n), u.add(e));
-}
-function b({ options: e, theme: n }) {
-  const o = i(null), c = i(null), [s, a] = w(!1);
-  d(() => {
-    if (!o.current) return;
-    n && R(n.name, n.config);
-    const r = f(o.current, n?.name, {
-      renderer: "svg"
-    });
-    c.current = r, r.setOption(e), a(!0);
-    const t = new ResizeObserver(() => {
-      r.resize();
+import { useRef as d, useState as I, useEffect as w, useCallback as W } from "react";
+import { calculateTitleLayout as p } from "./calculate-title-layout.js";
+import { sanitizeChartOptions as g } from "./sanitize-chart-options.js";
+import { addWatermarkToOptions as h } from "./watermark-graphic.js";
+const z = /* @__PURE__ */ new Set();
+function D({ options: i, theme: t }) {
+  const e = d(null), c = d(null), O = d(i), m = d(t?.config), [y, R] = I(!1);
+  O.current = i, m.current = t?.config, w(() => {
+    const s = e.current;
+    if (!s) return;
+    let n = !0, r;
+    const C = new ResizeObserver((o) => {
+      const a = o[0], u = c.current;
+      if (!a || !u) return;
+      const f = a.contentRect.width, l = g(O.current), v = h(
+        p(l, f, m.current)
+      );
+      u.setOption(v), u.resize();
     });
-    return t.observe(o.current), () => {
-      t.disconnect(), r.dispose(), c.current = null, a(!1);
+    return C.observe(s), (async () => {
+      try {
+        const o = await import("echarts");
+        if (!n || !e.current) return;
+        t && !z.has(t.name) && (o.registerTheme(t.name, t.config), z.add(t.name));
+        const a = o.getInstanceByDom(e.current);
+        a && a.dispose(), r = o.init(e.current, t?.name, {
+          renderer: "svg"
+        }), c.current = r;
+        const u = e.current.clientWidth, f = g(i), l = h(
+          p(f, u, t?.config)
+        );
+        r.setOption(l), r.resize(), R(!0);
+      } catch (o) {
+        console.error("Failed to load echarts", o);
+      }
+    })(), () => {
+      n = !1, C.disconnect(), r && r.dispose(), c.current = null, R(!1);
     };
-  }, [e, n]), d(() => {
-    !c.current || !s || c.current.setOption(e);
-  }, [e, s]);
-  const l = g(async () => {
-    if (!c.current)
-      throw new Error("Chart is not initialized");
-    try {
-      const r = c.current.getDataURL({
-        type: "svg"
-      }), t = document.createElement("a");
-      t.download = `chart-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.svg`, t.href = r, document.body.appendChild(t), t.click(), document.body.removeChild(t);
-    } catch (r) {
-      throw console.error("Failed to download chart:", r), new Error("Failed to download chart");
-    }
+  }, [t, i]), w(() => {
+    if (!y || !c.current || !e.current) return;
+    const s = e.current.clientWidth, n = g(i), r = h(
+      p(n, s, t?.config)
+    );
+    c.current.setOption(r);
+  }, [y, i, t?.config]);
+  const b = W(async () => {
+    if (!c.current) return;
+    const s = c.current.getDataURL({
+      type: "png",
+      pixelRatio: 2,
+      backgroundColor: "#fff"
+    }), n = document.createElement("a");
+    n.download = `chart-${(/* @__PURE__ */ new Date()).toISOString()}.png`, n.href = s, document.body.appendChild(n), n.click(), document.body.removeChild(n);
   }, []);
   return {
-    containerRef: o,
-    isReady: s,
-    downloadChart: l
+    containerRef: e,
+    downloadChart: b
   };
 }
 export {
-  b as useChartInstance
+  D as useChartInstance
 };

package/dist/components/echarts-renderer/watermark-graphic.d.ts

@@ -0,0 +1,12 @@
+import { GraphicComponentOption } from 'echarts';
+/**
+ * Watermark graphic element for ECharts charts.
+ * This is applied via setOption(), not via theme (themes don't properly merge graphic components).
+ */
+export declare const WATERMARK_GRAPHIC: GraphicComponentOption;
+/**
+ * Merges watermark graphic into existing ECharts options.
+ */
+export declare function addWatermarkToOptions<T extends {
+    graphic?: GraphicComponentOption | GraphicComponentOption[];
+}>(options: T): T;

package/dist/components/echarts-renderer/watermark-graphic.js

@@ -0,0 +1,25 @@
+import o from "../../assets/vc-logo.svg.js";
+const a = 210, c = 24, i = {
+  type: "image",
+  left: "center",
+  top: "middle",
+  style: {
+    image: o,
+    width: a,
+    height: c
+  },
+  z: 100,
+  silent: !0
+};
+function s(r) {
+  const e = r.graphic;
+  let t;
+  return e === void 0 ? t = i : Array.isArray(e) ? t = [...e, i] : t = [e, i], {
+    ...r,
+    graphic: t
+  };
+}
+export {
+  i as WATERMARK_GRAPHIC,
+  s as addWatermarkToOptions
+};

package/dist/index.d.ts

@@ -6,7 +6,8 @@ export { EChartsRenderer, type EChartsRendererProps, type EChartsRendererRef, ty
 export { EChartsThemeOption, isEChartsThemeOption } from './components/echarts-renderer/echarts-theme-option';
 export { EChartsChartOption, isEChartsChartOption } from './components/echarts-renderer/echarts-chart-option';
 export { useChartInstance, type UseChartInstanceProps, type UseChartInstanceReturn, } from './components/echarts-renderer/use-chart-instance';
-export { MAVRIK_THEME } from './components/echarts-renderer/mavrik-theme';
+export { MavrikChart, type MavrikChartProps } from './components/echarts-renderer/mavrik-chart';
+export { MAVRIK_THEME, MAVRIK_THEME_HORIZONTAL } from './components/echarts-renderer/mavrik-theme';
 export { ClientModal } from './components/client-modal/client-modal';
 export { CopyButton } from './components/copy-button/copy-button';
 export { DecoratedIcon } from './components/decorated-icon/decorated-icon';