@semcore/mini-chart 0.29.0-prerelease.11 → 0.29.0-prerelease.14

package/CHANGELOG.md

@@ -2,11 +2,11 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [0.29.0] - 2025-03-03
+## [0.29.0] - 2025-03-14
 
-### Changed
+### Added
 
-- Version minor update due to children dependencies update (`@semcore/flex-box` [5.40.1 ~> 5.41.0], `@semcore/utils` [4.45.1 ~> 4.47.1], `@semcore/core` [2.38.1 ~> 2.39.0]).
+- Build for ESM.
 
 ## [0.28.1] - 2025-02-05
 

package/lib/esm/component/score/Donut.mjs

@@ -0,0 +1,103 @@
+import k from "@babel/runtime/helpers/esm/objectSpread2";
+import M from "@babel/runtime/helpers/esm/classCallCheck";
+import W from "@babel/runtime/helpers/esm/createClass";
+import G from "@babel/runtime/helpers/esm/inherits";
+import N from "@babel/runtime/helpers/esm/createSuper";
+import u from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled as R } from "@semcore/utils/lib/core/index";
+import C, { assignProps as P, sstyled as I, Component as j } from "@semcore/core";
+import r from "react";
+import { Box as F } from "@semcore/flex-box";
+import q from "@semcore/utils/lib/enhances/resolveColorEnhance";
+import { extractAriaProps as H } from "@semcore/utils/lib/ariaProps";
+var J = (
+  /*__reshadow_css_start__*/
+  (R.insert(
+    /*__inner_css_start__*/
+    "@keyframes pulse_18pnz{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_18pnz_gg_.__loading_18pnz_gg_,.___SLineGauge_18pnz_gg_.__loading_18pnz_gg_,.___STrendBar_18pnz_gg_.__loading_18pnz_gg_,.___STrendLine_18pnz_gg_.__loading_18pnz_gg_{animation-name:pulse_18pnz;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_18pnz_gg_.__semi_18pnz_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_18pnz_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_18pnz_gg_.__animate_18pnz_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}",
+    "18pnz_gg_"
+  ), {
+    __SLineGauge: "___SLineGauge_18pnz_gg_",
+    _loading: "__loading_18pnz_gg_",
+    __SDonutContainer: "___SDonutContainer_18pnz_gg_",
+    __STrendLine: "___STrendLine_18pnz_gg_",
+    __STrendBar: "___STrendBar_18pnz_gg_",
+    "@pulse": "pulse_18pnz",
+    _animate: "__animate_18pnz_gg_",
+    _semi: "__semi_18pnz_gg_"
+  })
+), p = /* @__PURE__ */ function(d) {
+  G(n, d);
+  var g = N(n);
+  function n() {
+    return M(this, n), g.apply(this, arguments);
+  }
+  return W(n, [{
+    key: "render",
+    value: function() {
+      var x = this.asProps, t, B = F, o = this.asProps, _ = o.value, b = o.styles, h = o.baseBgColor, E = h === void 0 ? "chart-grid-bar-chart-base-bg" : h, f = o.color, w = f === void 0 ? "chart-palette-order-1" : f, l = o.resolveColor, e = o.isSemiDonut, v = o.loading, m = e ? 6 : 4, i = e ? 9 : 10, a = e ? Math.PI * i : Math.PI * 2 * i, s = a * (_ / 100), S = a * ((100 - _) / 100), c = e ? a / (100 / 3) : a / 100, D = "".concat(S - 2 * c, " ").concat(c), y = "".concat(c, " ").concat(_ < 99 ? "".concat(D) : "", " ").concat(a);
+      e && (y = "".concat(c, " ").concat(_ < 95 ? "".concat(D) : "", " ").concat(a));
+      var L = e ? "0 0 24 12" : "0 0 24 24", T = -1 * (s + (e ? c : 0)), z = H(this.asProps), $ = z.__excludeProps, A = z.extractedAriaProps;
+      return t = I(b), /* @__PURE__ */ r.createElement(B, t.cn("SDonutContainer", k({}, P({
+        semi: e,
+        __excludeProps: $
+      }, x))), /* @__PURE__ */ r.createElement("svg", t.cn("svg", k({
+        width: "100%",
+        height: "100%",
+        viewBox: L,
+        fill: "none",
+        role: "img"
+      }, A)), /* @__PURE__ */ r.createElement("g", t.cn("g", {}), /* @__PURE__ */ r.createElement("circle", t.cn("circle", {
+        cx: "12",
+        cy: "12",
+        r: i,
+        strokeWidth: m,
+        stroke: l(E),
+        strokeDasharray: v ? void 0 : "".concat(S, " ").concat(a),
+        strokeDashoffset: T
+      })), !v && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("circle", t.cn("circle", {
+        cx: "12",
+        cy: "12",
+        r: i,
+        strokeWidth: m,
+        stroke: l(w),
+        strokeDasharray: "".concat(s, " ").concat(a),
+        strokeDashoffset: s
+      }), /* @__PURE__ */ r.createElement("animate", t.cn("animate", {
+        attributeName: "stroke-dashoffset",
+        values: "0;".concat(s)
+      }))), _ !== 100 && !e && /* @__PURE__ */ r.createElement("circle", t.cn("circle", {
+        cx: "12",
+        cy: "12",
+        r: i,
+        strokeWidth: m,
+        stroke: l("chart-grid-border"),
+        strokeDasharray: y,
+        strokeDashoffset: -1 * s
+      }))))));
+    }
+  }]), n;
+}(j);
+u(p, "enhance", [q()]);
+u(p, "style", J);
+u(p, "defaultProps", {
+  animate: !0
+});
+var K = C(p);
+K.displayName = "MiniChart.ScoreDonut";
+var O = C(p, {}, {
+  enhancements: [function() {
+    return {
+      wrapperProps: function(g) {
+        return P(g, {
+          isSemiDonut: !0
+        });
+      }
+    };
+  }]
+});
+O.displayName = "MiniChart.ScoreSemiDonut";
+export {
+  K as ScoreDonut,
+  O as ScoreSemiDonut
+};

package/lib/esm/component/score/Line.mjs

@@ -0,0 +1,104 @@
+import x from "@babel/runtime/helpers/esm/objectSpread2";
+import N from "@babel/runtime/helpers/esm/classCallCheck";
+import R from "@babel/runtime/helpers/esm/createClass";
+import X from "@babel/runtime/helpers/esm/inherits";
+import j from "@babel/runtime/helpers/esm/createSuper";
+import S from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled as z } from "@semcore/utils/lib/core/index";
+import F, { sstyled as y, assignProps as G, Component as M } from "@semcore/core";
+import e from "react";
+import { Box as l, Flex as q } from "@semcore/flex-box";
+import H from "@semcore/utils/lib/enhances/resolveColorEnhance";
+var J = (
+  /*__reshadow_css_start__*/
+  (z.insert(
+    /*__inner_css_start__*/
+    "@keyframes pulse_1lsyc{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_1lsyc{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_1lsyc_gg_.__loading_1lsyc_gg_,.___SLineGauge_1lsyc_gg_.__loading_1lsyc_gg_,.___STrendBar_1lsyc_gg_.__loading_1lsyc_gg_,.___STrendLine_1lsyc_gg_.__loading_1lsyc_gg_{animation-name:pulse_1lsyc;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_1lsyc_gg_{height:8px;background-color:var(--base-bg-color_1lsyc, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_1lsyc_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_1lsyc_gg_.__percent_1lsyc_gg_{width:var(--percent_1lsyc)}.___SLineSegmentItem_1lsyc_gg_.__color_1lsyc_gg_,.___SLineValue_1lsyc_gg_.__color_1lsyc_gg_{background-color:var(--color_1lsyc, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_1lsyc_gg_.__segments_1lsyc_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_1lsyc_gg_,.___SLineGaugeSegment_1lsyc_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_1lsyc_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_1lsyc_gg_{height:8px;background:0 0;border-right-color:var(--intergalactic-chart-grid-border, #ffffff);border-right-style:solid;border-right-width:1px;box-sizing:content-box}.___SAnimationLine_1lsyc_gg_{background-color:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9);transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out;animation-name:move-line_1lsyc;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}",
+    "1lsyc_gg_"
+  ), {
+    __SLineGauge: "___SLineGauge_1lsyc_gg_",
+    _loading: "__loading_1lsyc_gg_",
+    __SDonutContainer: "___SDonutContainer_1lsyc_gg_",
+    __STrendLine: "___STrendLine_1lsyc_gg_",
+    __STrendBar: "___STrendBar_1lsyc_gg_",
+    "@pulse": "pulse_1lsyc",
+    "--base-bg-color": "--base-bg-color_1lsyc",
+    __SLineValue: "___SLineValue_1lsyc_gg_",
+    _percent: "__percent_1lsyc_gg_",
+    "--percent": "--percent_1lsyc",
+    _color: "__color_1lsyc_gg_",
+    __SLineSegmentItem: "___SLineSegmentItem_1lsyc_gg_",
+    "--color": "--color_1lsyc",
+    _segments: "__segments_1lsyc_gg_",
+    __SLineGaugeSegment: "___SLineGaugeSegment_1lsyc_gg_",
+    __SAnimationLine: "___SAnimationLine_1lsyc_gg_",
+    "@move-line": "move-line_1lsyc"
+  })
+), c = /* @__PURE__ */ function(p) {
+  X(n, p);
+  var v = j(n);
+  function n() {
+    return N(this, n), v.apply(this, arguments);
+  }
+  return R(n, [{
+    key: "getSegmentProps",
+    value: function(t) {
+      var _ = this.asProps, s = _.children, L = _.resolveColor, a = 0;
+      e.Children.forEach(s, function(m) {
+        /* @__PURE__ */ e.isValidElement(m) && (a = a + m.props.value);
+      });
+      var g = a > 0 ? 100 * t.value / a : 0;
+      return {
+        w: "".concat(g, "%"),
+        "use:color": L(t.color)
+      };
+    }
+  }, {
+    key: "render",
+    value: function() {
+      var t = this.asProps, _, s = l, L = l, a = l, g = q, m = l, r = this.asProps, f = r.value, b = r.styles, E = r.color, P = E === void 0 ? "chart-palette-order-1" : E, k = r.baseBgColor, u = r.resolveColor, B = r.loading, T = r.children, $ = r.Children, w = r.animate;
+      if (T !== void 0) {
+        var i;
+        return i = y(b), /* @__PURE__ */ e.createElement(s, i.cn("SLineGauge", x({}, G({
+          segments: !0,
+          "base-bg-color": u(k)
+        }, t))), /* @__PURE__ */ e.createElement(g, i.cn("SLineGaugeSegment", {}), /* @__PURE__ */ e.createElement($, i.cn("Children", {}))), w && /* @__PURE__ */ e.createElement(a, i.cn("SAnimationLine", {})));
+      }
+      var o = this.asProps.segments, C = [];
+      if (o)
+        for (var d = 0; d < o; d++) {
+          var I, D = "calc((100% - ".concat(o - 1, "px) / ").concat(o, ")");
+          C.push((I = y(b), /* @__PURE__ */ e.createElement(m, I.cn("SLineSegmentItem", {
+            key: d,
+            color: d < f ? u(P) : void 0,
+            w: D
+          }))));
+        }
+      var V = "".concat(f, "%");
+      return o && (V = "".concat(f / o * 100, "%")), _ = y(b), /* @__PURE__ */ e.createElement(s, _.cn("SLineGauge", x({}, G({
+        "base-bg-color": u(k)
+      }, t))), !B && /* @__PURE__ */ e.createElement(L, _.cn("SLineValue", {
+        w: V,
+        color: u(P)
+      })), !!C.length && /* @__PURE__ */ e.createElement(g, _.cn("SLineGaugeSegment", {}), C), w && /* @__PURE__ */ e.createElement(a, _.cn("SAnimationLine", {})));
+    }
+  }]), n;
+}(M);
+S(c, "enhance", [H()]);
+S(c, "displayName", "ScoreLine");
+S(c, "style", J);
+S(c, "defaultProps", {
+  animate: !0
+});
+function A(p) {
+  var v = arguments[0], n, h = p.styles, t = l;
+  return n = y(h), /* @__PURE__ */ e.createElement(t, n.cn("SLineSegmentItem", x({}, G({}, v))));
+}
+A.displayName = "Segment";
+var K = F(c, {
+  Segment: A
+});
+K.displayName = "MiniChart.ScoreLine";
+export {
+  K as ScoreLine
+};

package/lib/esm/component/trend/Bar.mjs

@@ -0,0 +1,106 @@
+import k from "@babel/runtime/helpers/esm/toConsumableArray";
+import h from "@babel/runtime/helpers/esm/objectSpread2";
+import w from "@babel/runtime/helpers/esm/classCallCheck";
+import L from "@babel/runtime/helpers/esm/createClass";
+import A from "@babel/runtime/helpers/esm/inherits";
+import D from "@babel/runtime/helpers/esm/createSuper";
+import g from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled as E } from "@semcore/utils/lib/core/index";
+import v, { assignProps as y, sstyled as R } from "@semcore/core";
+import _ from "react";
+import G from "@semcore/utils/lib/enhances/resolveColorEnhance";
+import { Trend as N } from "./Trend.mjs";
+import { Box as $ } from "@semcore/flex-box";
+import { extractAriaProps as M } from "@semcore/utils/lib/ariaProps";
+var W = (
+  /*__reshadow_css_start__*/
+  (E.insert(
+    /*__inner_css_start__*/
+    "@keyframes pulse_382bi{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_382bi_gg_.__loading_382bi_gg_,.___SLineGauge_382bi_gg_.__loading_382bi_gg_,.___STrendBar_382bi_gg_.__loading_382bi_gg_,.___STrendLine_382bi_gg_.__loading_382bi_gg_{animation-name:pulse_382bi;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
+    "382bi_gg_"
+  ), {
+    __SLineGauge: "___SLineGauge_382bi_gg_",
+    _loading: "__loading_382bi_gg_",
+    __SDonutContainer: "___SDonutContainer_382bi_gg_",
+    __STrendLine: "___STrendLine_382bi_gg_",
+    __STrendBar: "___STrendBar_382bi_gg_",
+    "@pulse": "pulse_382bi"
+  })
+), o = /* @__PURE__ */ function(d) {
+  A(e, d);
+  var s = D(e);
+  function e() {
+    return w(this, e), s.apply(this, arguments);
+  }
+  return L(e, [{
+    key: "defaultData",
+    get: function() {
+      return [{
+        value: 20
+      }, {
+        value: 80
+      }, {
+        value: 45
+      }, {
+        value: 10
+      }];
+    }
+  }, {
+    key: "data",
+    get: function() {
+      var n = this.asProps, r = n.data, t = n.loading;
+      return t ? this.defaultData : r;
+    }
+  }, {
+    key: "render",
+    value: function() {
+      var n = this.asProps, r, t = this, b = $, a = this.asProps, S = a.styles, p = a.resolveColor, T = a.isHistogram, C = a.animate, B = a.loading, l = this.defaultWidth / this.data.length, m = M(this.asProps), x = m.__excludeProps, H = m.extractedAriaProps;
+      return r = R(S), /* @__PURE__ */ _.createElement(b, r.cn("STrendBar", h({}, y({
+        ref: this.containerRef,
+        __excludeProps: ["data"].concat(k(x))
+      }, n))), /* @__PURE__ */ _.createElement("svg", r.cn("svg", h({
+        width: "100%",
+        height: "100%",
+        viewBox: "0 0 ".concat(this.svgWidth, " ").concat(this.svgHeight),
+        role: "img"
+      }, H)), this.data.map(function(i, c) {
+        var f = p("chart-palette-order-other-data");
+        return i.color && (f = p(i.color)), /* @__PURE__ */ _.createElement("rect", {
+          key: c,
+          x: l * c,
+          y: t.defaultHeight - i.value,
+          width: T ? l : l * 0.8,
+          height: i.value,
+          fill: f
+        }, C && !B && /* @__PURE__ */ _.createElement("animate", {
+          attributeName: "y",
+          values: "".concat(t.defaultHeight, ";").concat(t.defaultHeight - i.value),
+          dur: "500ms"
+        }));
+      })));
+    }
+  }]), e;
+}(N);
+g(o, "enhance", [G()]);
+g(o, "style", W);
+g(o, "defaultProps", {
+  animate: !0
+});
+var P = v(o);
+P.displayName = "MiniChart.TrendBar";
+var ee = v(o, {}, {
+  enhancements: [function() {
+    return {
+      wrapperProps: function(s) {
+        return y(s, {
+          isHistogram: !0
+        });
+      }
+    };
+  }]
+});
+P.displayName = "MiniChart.TrendHistogram";
+export {
+  P as TrendBar,
+  ee as TrendHistogram
+};

package/lib/esm/component/trend/Line.mjs

@@ -0,0 +1,140 @@
+import w from "@babel/runtime/helpers/esm/toConsumableArray";
+import y from "@babel/runtime/helpers/esm/objectSpread2";
+import A from "@babel/runtime/helpers/esm/classCallCheck";
+import E from "@babel/runtime/helpers/esm/createClass";
+import R from "@babel/runtime/helpers/esm/inherits";
+import H from "@babel/runtime/helpers/esm/createSuper";
+import g from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled as W } from "@semcore/utils/lib/core/index";
+import b, { assignProps as C, sstyled as $ } from "@semcore/core";
+import r from "react";
+import D from "@semcore/utils/lib/enhances/resolveColorEnhance";
+import B from "@semcore/utils/lib/uniqueID";
+import { Trend as j } from "./Trend.mjs";
+import { Box as G } from "@semcore/flex-box";
+import { extractAriaProps as N } from "@semcore/utils/lib/ariaProps";
+var M = (
+  /*__reshadow_css_start__*/
+  (W.insert(
+    /*__inner_css_start__*/
+    "@keyframes pulse_382bi{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_382bi_gg_.__loading_382bi_gg_,.___SLineGauge_382bi_gg_.__loading_382bi_gg_,.___STrendBar_382bi_gg_.__loading_382bi_gg_,.___STrendLine_382bi_gg_.__loading_382bi_gg_{animation-name:pulse_382bi;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
+    "382bi_gg_"
+  ), {
+    __SLineGauge: "___SLineGauge_382bi_gg_",
+    _loading: "__loading_382bi_gg_",
+    __SDonutContainer: "___SDonutContainer_382bi_gg_",
+    __STrendLine: "___STrendLine_382bi_gg_",
+    __STrendBar: "___STrendBar_382bi_gg_",
+    "@pulse": "pulse_382bi"
+  })
+), l = /* @__PURE__ */ function(u) {
+  R(s, u);
+  var d = H(s);
+  function s() {
+    return A(this, s), d.apply(this, arguments);
+  }
+  return E(s, [{
+    key: "defaultData",
+    get: function() {
+      return [15, 70, 20, 85, 20];
+    }
+  }, {
+    key: "lastPointRadius",
+    get: function() {
+      var e;
+      return (e = this.asProps.lastPointRadius) !== null && e !== void 0 ? e : 6;
+    }
+  }, {
+    key: "data",
+    get: function() {
+      var e = this.asProps, t = e.data, o = e.loading;
+      return o ? this.defaultData : t;
+    }
+  }, {
+    key: "svgWidth",
+    get: function() {
+      return this.asProps.lastPointColor ? this.defaultWidth + this.lastPointRadius : this.defaultWidth;
+    }
+  }, {
+    key: "svgHeight",
+    get: function() {
+      return this.asProps.lastPointColor ? this.defaultHeight + this.lastPointRadius : this.defaultHeight;
+    }
+  }, {
+    key: "color",
+    get: function() {
+      var e = this.asProps, t = e.resolveColor, o = e.color, i = o === void 0 ? "chart-palette-order-1" : o, n = e.loading;
+      return t(n ? "skeleton-bg" : i);
+    }
+  }, {
+    key: "render",
+    value: function() {
+      for (var e = this.asProps, t, o = G, i = this.asProps, n = i.uid, S = i.withArea, k = i.animate, p = i.lastPointColor, m = i.resolveColor, f = i.loading, T = i.styles, h = [], _ = this.data.length, P = this.defaultWidth / (_ - 1), c = 0; c < _; c++)
+        h.push("".concat(P * c, ",").concat(this.defaultHeight - this.data[c]));
+      var v = N(this.asProps), x = v.__excludeProps, L = v.extractedAriaProps;
+      return t = $(T), /* @__PURE__ */ r.createElement(o, t.cn("STrendLine", y({}, C({
+        ref: this.containerRef,
+        __excludeProps: ["data"].concat(w(x))
+      }, e))), /* @__PURE__ */ r.createElement("svg", t.cn("svg", y({
+        width: "100%",
+        height: "100%",
+        viewBox: "0 0 ".concat(this.svgWidth, " ").concat(this.svgHeight),
+        role: "img"
+      }, L)), /* @__PURE__ */ r.createElement("polyline", t.cn("polyline", {
+        points: h.join(" "),
+        stroke: this.color,
+        strokeWidth: "4",
+        fill: "none",
+        clipPath: "url(#".concat(n, ")")
+      })), S && /* @__PURE__ */ r.createElement("polyline", t.cn("polyline", {
+        points: "0,".concat(this.defaultHeight, " ").concat(h.join(" "), " ").concat(this.defaultWidth, ",").concat(this.defaultHeight),
+        fill: this.color,
+        fillOpacity: 0.2,
+        clipPath: "url(#".concat(n, ")")
+      })), p && !f && /* @__PURE__ */ r.createElement("circle", t.cn("circle", {
+        cx: P * (_ - 1),
+        cy: this.defaultHeight - this.data[_ - 1],
+        r: this.lastPointRadius,
+        fill: m(p),
+        stroke: m("chart-grid-border"),
+        strokeWidth: 4,
+        clipPath: "url(#".concat(n, ")")
+      })), k && !f && /* @__PURE__ */ r.createElement("clipPath", t.cn("clipPath", {
+        id: n
+      }), /* @__PURE__ */ r.createElement("rect", t.cn("rect", {
+        x: "0",
+        y: "0",
+        width: "100%",
+        height: "100%",
+        fill: "black"
+      }), /* @__PURE__ */ r.createElement("animate", t.cn("animate", {
+        dur: "500ms",
+        attributeName: "width",
+        values: "0;100%"
+      }))))));
+    }
+  }]), s;
+}(j);
+g(l, "enhance", [D(), B()]);
+g(l, "style", M);
+g(l, "defaultProps", {
+  animate: !0
+});
+var q = b(l);
+q.displayName = "MiniChart.TrendLine";
+var I = b(l, {}, {
+  enhancements: [function() {
+    return {
+      wrapperProps: function(d) {
+        return C(d, {
+          withArea: !0
+        });
+      }
+    };
+  }]
+});
+I.displayName = "MiniChart.TrendArea";
+export {
+  I as TrendArea,
+  q as TrendLine
+};

package/lib/esm/component/trend/Trend.mjs

@@ -0,0 +1,66 @@
+import f from "@babel/runtime/helpers/esm/classCallCheck";
+import u from "@babel/runtime/helpers/esm/createClass";
+import a from "@babel/runtime/helpers/esm/assertThisInitialized";
+import c from "@babel/runtime/helpers/esm/inherits";
+import d from "@babel/runtime/helpers/esm/createSuper";
+import s from "@babel/runtime/helpers/esm/defineProperty";
+import m from "react";
+import { Component as p } from "@semcore/core";
+var R = /* @__PURE__ */ function(h) {
+  c(n, h);
+  var o = d(n);
+  function n() {
+    for (var e, t = arguments.length, r = new Array(t), i = 0; i < t; i++)
+      r[i] = arguments[i];
+    return f(this, n), e = o.call.apply(o, [this].concat(r)), s(a(e), "state", {
+      width: 200,
+      height: 100
+    }), s(a(e), "containerRef", /* @__PURE__ */ m.createRef()), e;
+  }
+  return u(n, [{
+    key: "componentDidMount",
+    value: function() {
+      this.setSizes();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function(t) {
+      (t.w !== this.props.w || t.h !== this.props.h || t.data !== this.props.data) && this.setSizes();
+    }
+  }, {
+    key: "defaultWidth",
+    get: function() {
+      var t = this.state, r = t.width, i = t.height;
+      return r / i * this.defaultHeight;
+    }
+  }, {
+    key: "defaultHeight",
+    get: function() {
+      return 100;
+    }
+  }, {
+    key: "svgWidth",
+    get: function() {
+      return this.defaultWidth;
+    }
+  }, {
+    key: "svgHeight",
+    get: function() {
+      return this.defaultHeight;
+    }
+  }, {
+    key: "setSizes",
+    value: function() {
+      if (this.containerRef.current) {
+        var t = this.containerRef.current.getBoundingClientRect(), r = t.width, i = t.height;
+        r > 0 && i > 0 && this.setState({
+          width: r,
+          height: i
+        });
+      }
+    }
+  }]), n;
+}(p);
+export {
+  R as Trend
+};

package/lib/esm/index.mjs

@@ -0,0 +1,16 @@
+import { ScoreSemiDonut as r, ScoreDonut as o } from "./component/score/Donut.mjs";
+import { ScoreLine as e } from "./component/score/Line.mjs";
+import { TrendLine as m, TrendArea as i } from "./component/trend/Line.mjs";
+import { TrendBar as t, TrendHistogram as n } from "./component/trend/Bar.mjs";
+var S = {
+  TrendLine: m,
+  TrendArea: i,
+  TrendBar: t,
+  TrendHistogram: n,
+  ScoreSemiDonut: r,
+  ScoreDonut: o,
+  ScoreLine: e
+};
+export {
+  S as default
+};

package/package.json

@@ -1,19 +1,24 @@
 {
   "name": "@semcore/mini-chart",
   "description": "Semrush MiniChart Component",
-  "version": "0.29.0-prerelease.11",
+  "version": "0.29.0-prerelease.14",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
   "sideEffects": false,
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
+  "exports": {
+    "require": "./lib/cjs/index.js",
+    "import": "./lib/esm/index.mjs",
+    "types": "./lib/types/index.d.ts"
+  },
   "dependencies": {
-    "@semcore/flex-box": "5.41.0-prerelease.11",
-    "@semcore/utils": "4.47.1-prerelease.11"
+    "@semcore/flex-box": "5.41.0-prerelease.14",
+    "@semcore/utils": "4.48.0-prerelease.14"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.39.0-prerelease.11",
+    "@semcore/core": "^2.39.0-prerelease.14",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },
@@ -27,6 +32,6 @@
     "@semcore/testing-utils": "1.0.0"
   },
   "scripts": {
-    "build": "pnpm semcore-builder --source=ts"
+    "build": "pnpm semcore-builder --source=ts && pnpm vite build"
   }
 }

package/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig, mergeConfig } from 'vite';
+
+import viteConfig from '../../commonVite.config';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    build: {
+      lib: {
+        entry: './src/index.ts',
+      },
+      rollupOptions: {
+        external: ['react', 'react-dom', 'react/jsx-runtime', /@babel\/runtime\/*/, /@semcore\/*/],
+      },
+    },
+  }),
+);