@semcore/mini-chart 0.29.4 → 0.30.0-prerelease.0

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

@@ -1,51 +1,49 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled } from "@semcore/utils/lib/core/index";
-import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
+import { sstyled, assignProps, Component, createComponent } from "@semcore/core";
+import { Box, Flex } from "@semcore/base-components";
+import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
 import React from "react";
-import { Box, Flex } from "@semcore/flex-box";
-import resolveColorEnhance from "@semcore/utils/lib/enhances/resolveColorEnhance";
 /*!__reshadow-styles__:"./line.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_13rvt{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_13rvt{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_13rvt_gg_.__loading_13rvt_gg_,.___SLineGauge_13rvt_gg_.__loading_13rvt_gg_,.___STrendBar_13rvt_gg_.__loading_13rvt_gg_,.___STrendLine_13rvt_gg_.__loading_13rvt_gg_{animation-name:pulse_13rvt;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_13rvt_gg_{height:8px;background-color:var(--base-bg-color_13rvt, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_13rvt_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_13rvt_gg_.__percent_13rvt_gg_{width:var(--percent_13rvt)}.___SLineSegmentItem_13rvt_gg_.__color_13rvt_gg_,.___SLineValue_13rvt_gg_.__color_13rvt_gg_{background-color:var(--color_13rvt, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_13rvt_gg_.__segments_13rvt_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_13rvt_gg_,.___SLineGaugeSegment_13rvt_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_13rvt_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_13rvt_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_13rvt_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_13rvt;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}",
+    "@keyframes pulse_776hj{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_776hj{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_776hj_gg_.__loading_776hj_gg_,.___SLineGauge_776hj_gg_.__loading_776hj_gg_,.___STrendBar_776hj_gg_.__loading_776hj_gg_,.___STrendLine_776hj_gg_.__loading_776hj_gg_{animation-name:pulse_776hj;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_776hj_gg_{height:8px;background-color:var(--base-bg-color_776hj, var(--intergalactic-chart-grid-bar-chart-base-bg, rgb(241, 242, 242)));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_776hj_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_776hj_gg_.__percent_776hj_gg_{width:var(--percent_776hj)}.___SLineSegmentItem_776hj_gg_.__color_776hj_gg_,.___SLineValue_776hj_gg_.__color_776hj_gg_{background-color:var(--color_776hj, var(--intergalactic-chart-palette-order-1, rgb(104, 109, 210)))}.___SLineGauge_776hj_gg_.__segments_776hj_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_776hj_gg_,.___SLineGaugeSegment_776hj_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_776hj_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_776hj_gg_{height:8px;background:0 0;border-right-color:var(--intergalactic-chart-grid-border, #fff);border-right-style:solid;border-right-width:1px;box-sizing:content-box}.___SAnimationLine_776hj_gg_{background-color:var(--intergalactic-chart-grid-bar-chart-base-bg, rgb(241, 242, 242));transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out;animation-name:move-line_776hj;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}",
     /*__inner_css_end__*/
-    "13rvt_gg_"
+    "776hj_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_13rvt_gg_",
-    "_loading": "__loading_13rvt_gg_",
-    "__SDonutContainer": "___SDonutContainer_13rvt_gg_",
-    "__STrendLine": "___STrendLine_13rvt_gg_",
-    "__STrendBar": "___STrendBar_13rvt_gg_",
-    "@pulse": "pulse_13rvt",
-    "--base-bg-color": "--base-bg-color_13rvt",
-    "__SLineValue": "___SLineValue_13rvt_gg_",
-    "_percent": "__percent_13rvt_gg_",
-    "--percent": "--percent_13rvt",
-    "_color": "__color_13rvt_gg_",
-    "__SLineSegmentItem": "___SLineSegmentItem_13rvt_gg_",
-    "--color": "--color_13rvt",
-    "_segments": "__segments_13rvt_gg_",
-    "__SLineGaugeSegment": "___SLineGaugeSegment_13rvt_gg_",
-    "__SAnimationLine": "___SAnimationLine_13rvt_gg_",
-    "@move-line": "move-line_13rvt"
+    "__SLineGauge": "___SLineGauge_776hj_gg_",
+    "_loading": "__loading_776hj_gg_",
+    "__SDonutContainer": "___SDonutContainer_776hj_gg_",
+    "__STrendLine": "___STrendLine_776hj_gg_",
+    "__STrendBar": "___STrendBar_776hj_gg_",
+    "@pulse": "pulse_776hj",
+    "__SLineValue": "___SLineValue_776hj_gg_",
+    "_percent": "__percent_776hj_gg_",
+    "--percent": "--percent_776hj",
+    "_color": "__color_776hj_gg_",
+    "__SLineSegmentItem": "___SLineSegmentItem_776hj_gg_",
+    "_segments": "__segments_776hj_gg_",
+    "__SLineGaugeSegment": "___SLineGaugeSegment_776hj_gg_",
+    "__SAnimationLine": "___SAnimationLine_776hj_gg_",
+    "@move-line": "move-line_776hj",
+    "--base-bg-color": "--base-bg-color_776hj",
+    "--color": "--color_776hj"
   })
 );
-var LineRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(LineRoot2, _Component);
-  var _super = _createSuper(LineRoot2);
+var LineRoot = /* @__PURE__ */ (function(_Component) {
   function LineRoot2() {
     _classCallCheck(this, LineRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, LineRoot2, arguments);
   }
-  _createClass(LineRoot2, [{
+  _inherits(LineRoot2, _Component);
+  return _createClass(LineRoot2, [{
     key: "getSegmentProps",
     value: function getSegmentProps(segmentProps) {
       var _this$asProps = this.asProps, children = _this$asProps.children, resolveColor = _this$asProps.resolveColor;
@@ -57,7 +55,7 @@ var LineRoot = /* @__PURE__ */ function(_Component) {
       });
       var width = sum > 0 ? 100 * segmentProps.value / sum : 0;
       return {
-        w: "".concat(width, "%"),
+        "w": "".concat(width, "%"),
         "use:color": resolveColor(segmentProps.color)
       };
     }
@@ -73,7 +71,7 @@ var LineRoot = /* @__PURE__ */ function(_Component) {
       var _this$asProps2 = this.asProps, value = _this$asProps2.value, styles = _this$asProps2.styles, _this$asProps2$color = _this$asProps2.color, color = _this$asProps2$color === void 0 ? "chart-palette-order-1" : _this$asProps2$color, baseBgColor = _this$asProps2.baseBgColor, resolveColor = _this$asProps2.resolveColor, loading = _this$asProps2.loading, children = _this$asProps2.children, Children = _this$asProps2.Children, animate = _this$asProps2.animate;
       if (children !== void 0) {
         var _ref3;
-        return _ref3 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SLineGauge, _ref3.cn("SLineGauge", _objectSpread({}, assignProps({
+        return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineGauge, _ref3.cn("SLineGauge", _objectSpread({}, assignProps({
           "segments": true,
           "base-bg-color": resolveColor(baseBgColor)
         }, _ref))), /* @__PURE__ */ React.createElement(SLineGaugeSegment, _ref3.cn("SLineGaugeSegment", {}), /* @__PURE__ */ React.createElement(Children, _ref3.cn("Children", {}))), animate && /* @__PURE__ */ React.createElement(SAnimationLine, _ref3.cn("SAnimationLine", {})));
@@ -84,7 +82,7 @@ var LineRoot = /* @__PURE__ */ function(_Component) {
         for (var i = 0; i < segments; i++) {
           var _ref4;
           var width = "calc((100% - ".concat(segments - 1, "px) / ").concat(segments, ")");
-          SegmentItems.push((_ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SLineSegmentItem, _ref4.cn("SLineSegmentItem", {
+          SegmentItems.push((_ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineSegmentItem, _ref4.cn("SLineSegmentItem", {
             "key": i,
             "color": i < value ? resolveColor(color) : void 0,
             "w": width
@@ -95,7 +93,7 @@ var LineRoot = /* @__PURE__ */ function(_Component) {
       if (segments) {
         percent = "".concat(value / segments * 100, "%");
       }
-      return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SLineGauge, _ref5.cn("SLineGauge", _objectSpread({}, assignProps({
+      return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineGauge, _ref5.cn("SLineGauge", _objectSpread({}, assignProps({
         "base-bg-color": resolveColor(baseBgColor)
       }, _ref))), !loading && /* @__PURE__ */ React.createElement(SLineValue, _ref5.cn("SLineValue", {
         "w": percent,
@@ -103,8 +101,7 @@ var LineRoot = /* @__PURE__ */ function(_Component) {
       })), Boolean(SegmentItems.length) && /* @__PURE__ */ React.createElement(SLineGaugeSegment, _ref5.cn("SLineGaugeSegment", {}), SegmentItems), animate && /* @__PURE__ */ React.createElement(SAnimationLine, _ref5.cn("SAnimationLine", {})));
     }
   }]);
-  return LineRoot2;
-}(Component);
+})(Component);
 _defineProperty(LineRoot, "enhance", [resolveColorEnhance()]);
 _defineProperty(LineRoot, "displayName", "ScoreLine");
 _defineProperty(LineRoot, "style", style);
@@ -113,9 +110,10 @@ _defineProperty(LineRoot, "defaultProps", {
 });
 function Segment(props) {
   var _ref2 = arguments[0], _ref6;
-  var styles = props.styles;
+  var styles = props.styles, value = props.value;
   var SLineSegmentItem = Box;
-  return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SLineSegmentItem, _ref6.cn("SLineSegmentItem", _objectSpread({}, assignProps({}, _ref2))));
+  if (!value) return null;
+  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineSegmentItem, _ref6.cn("SLineSegmentItem", _objectSpread({}, assignProps({}, _ref2))));
 }
 Segment.displayName = "Segment";
 var ScoreLine = createComponent(LineRoot, {

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

@@ -0,0 +1,7 @@
+import { ScoreDonut, ScoreSemiDonut } from "./Donut.mjs";
+import { ScoreLine } from "./Line.mjs";
+export {
+  ScoreDonut,
+  ScoreLine,
+  ScoreSemiDonut
+};

package/lib/esm/component/score/line.shadow.css

@@ -2,7 +2,7 @@
 
 SLineGauge {
   height: 8px;
-  background-color: var(--base-bg-color, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));
+  background-color: var(--base-bg-color, var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.001 180)));
   border-radius: var(--intergalactic-chart-rounded, 2px);
   overflow: hidden;
   position: relative;
@@ -18,7 +18,7 @@ SLineValue[percent] {
 }
 
 SLineValue[color], SLineSegmentItem[color] {
-  background-color: var(--color, var(--intergalactic-chart-palette-order-1, #2bb3ff));
+  background-color: var(--color, var(--intergalactic-chart-palette-order-1, oklch(0.58 0.153 278.4)));
 }
 
 SLineGauge[segments] {
@@ -41,14 +41,14 @@ SLineSegmentItem:last-child {
 SLineSegmentItem {
   height: 8px;
   background: transparent;
-  border-right-color: var(--intergalactic-chart-grid-border, #ffffff);
+  border-right-color: var(--intergalactic-chart-grid-border, #fff);
   border-right-style: solid;
   border-right-width: 1px;
   box-sizing: content-box;
 }
 
 SAnimationLine {
-  background-color: var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9);
+  background-color: var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.001 180));
   transition: all var(--intergalactic-duration-extra-slow, 500) ease-in-out;
   animation-name: move-line;
   animation-duration: 0.5s;

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

@@ -2,42 +2,40 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled } from "@semcore/utils/lib/core/index";
-import createComponent, { assignProps, sstyled as sstyled$1 } from "@semcore/core";
+import { sstyled, assignProps, createComponent } from "@semcore/core";
+import { Box } from "@semcore/base-components";
+import { extractAriaProps } from "@semcore/core/lib/utils/ariaProps";
+import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
 import React from "react";
-import resolveColorEnhance from "@semcore/utils/lib/enhances/resolveColorEnhance";
 import { Trend } from "./Trend.mjs";
-import { Box } from "@semcore/flex-box";
-import { extractAriaProps } from "@semcore/utils/lib/ariaProps";
 /*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_1k9zd{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1k9zd_gg_.__loading_1k9zd_gg_,.___SLineGauge_1k9zd_gg_.__loading_1k9zd_gg_,.___STrendBar_1k9zd_gg_.__loading_1k9zd_gg_,.___STrendLine_1k9zd_gg_.__loading_1k9zd_gg_{animation-name:pulse_1k9zd;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
+    "@keyframes pulse_1yrsa{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1yrsa_gg_.__loading_1yrsa_gg_,.___SLineGauge_1yrsa_gg_.__loading_1yrsa_gg_,.___STrendBar_1yrsa_gg_.__loading_1yrsa_gg_,.___STrendLine_1yrsa_gg_.__loading_1yrsa_gg_{animation-name:pulse_1yrsa;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
     /*__inner_css_end__*/
-    "1k9zd_gg_"
+    "1yrsa_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_1k9zd_gg_",
-    "_loading": "__loading_1k9zd_gg_",
-    "__SDonutContainer": "___SDonutContainer_1k9zd_gg_",
-    "__STrendLine": "___STrendLine_1k9zd_gg_",
-    "__STrendBar": "___STrendBar_1k9zd_gg_",
-    "@pulse": "pulse_1k9zd"
+    "__SLineGauge": "___SLineGauge_1yrsa_gg_",
+    "_loading": "__loading_1yrsa_gg_",
+    "__SDonutContainer": "___SDonutContainer_1yrsa_gg_",
+    "__STrendLine": "___STrendLine_1yrsa_gg_",
+    "__STrendBar": "___STrendBar_1yrsa_gg_",
+    "@pulse": "pulse_1yrsa"
   })
 );
-var TrendBarRoot = /* @__PURE__ */ function(_Trend) {
-  _inherits(TrendBarRoot2, _Trend);
-  var _super = _createSuper(TrendBarRoot2);
+var TrendBarRoot = /* @__PURE__ */ (function(_Trend) {
   function TrendBarRoot2() {
     _classCallCheck(this, TrendBarRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, TrendBarRoot2, arguments);
   }
-  _createClass(TrendBarRoot2, [{
+  _inherits(TrendBarRoot2, _Trend);
+  return _createClass(TrendBarRoot2, [{
     key: "defaultData",
     get: function get() {
       return [{
@@ -67,7 +65,7 @@ var TrendBarRoot = /* @__PURE__ */ function(_Trend) {
       var _this$asProps2 = this.asProps, styles = _this$asProps2.styles, resolveColor = _this$asProps2.resolveColor, isHistogram = _this$asProps2.isHistogram, animate = _this$asProps2.animate, loading = _this$asProps2.loading;
       var step = this.defaultWidth / this.data.length;
       var _extractAriaProps = extractAriaProps(this.asProps), __excludeProps = _extractAriaProps.__excludeProps, extractedAriaProps = _extractAriaProps.extractedAriaProps;
-      return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(STrendBar, _ref2.cn("STrendBar", _objectSpread({}, assignProps({
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(STrendBar, _ref2.cn("STrendBar", _objectSpread({}, assignProps({
         "ref": this.containerRef,
         "__excludeProps": ["data"].concat(_toConsumableArray(__excludeProps))
       }, _ref))), /* @__PURE__ */ React.createElement("svg", _ref2.cn("svg", _objectSpread({
@@ -95,8 +93,7 @@ var TrendBarRoot = /* @__PURE__ */ function(_Trend) {
       })));
     }
   }]);
-  return TrendBarRoot2;
-}(Trend);
+})(Trend);
 _defineProperty(TrendBarRoot, "enhance", [resolveColorEnhance()]);
 _defineProperty(TrendBarRoot, "style", style);
 _defineProperty(TrendBarRoot, "defaultProps", {
@@ -115,7 +112,7 @@ var TrendHistogram = createComponent(TrendBarRoot, {}, {
     };
   }]
 });
-TrendBar.displayName = "MiniChart.TrendHistogram";
+TrendHistogram.displayName = "MiniChart.TrendHistogram";
 export {
   TrendBar,
   TrendHistogram

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

@@ -2,43 +2,41 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled } from "@semcore/utils/lib/core/index";
-import createComponent, { assignProps, sstyled as sstyled$1 } from "@semcore/core";
+import { sstyled, assignProps, createComponent } from "@semcore/core";
+import { Box } from "@semcore/base-components";
+import { extractAriaProps } from "@semcore/core/lib/utils/ariaProps";
+import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import React from "react";
-import resolveColorEnhance from "@semcore/utils/lib/enhances/resolveColorEnhance";
-import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
 import { Trend } from "./Trend.mjs";
-import { Box } from "@semcore/flex-box";
-import { extractAriaProps } from "@semcore/utils/lib/ariaProps";
 /*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_1k9zd{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1k9zd_gg_.__loading_1k9zd_gg_,.___SLineGauge_1k9zd_gg_.__loading_1k9zd_gg_,.___STrendBar_1k9zd_gg_.__loading_1k9zd_gg_,.___STrendLine_1k9zd_gg_.__loading_1k9zd_gg_{animation-name:pulse_1k9zd;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
+    "@keyframes pulse_1yrsa{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1yrsa_gg_.__loading_1yrsa_gg_,.___SLineGauge_1yrsa_gg_.__loading_1yrsa_gg_,.___STrendBar_1yrsa_gg_.__loading_1yrsa_gg_,.___STrendLine_1yrsa_gg_.__loading_1yrsa_gg_{animation-name:pulse_1yrsa;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
     /*__inner_css_end__*/
-    "1k9zd_gg_"
+    "1yrsa_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_1k9zd_gg_",
-    "_loading": "__loading_1k9zd_gg_",
-    "__SDonutContainer": "___SDonutContainer_1k9zd_gg_",
-    "__STrendLine": "___STrendLine_1k9zd_gg_",
-    "__STrendBar": "___STrendBar_1k9zd_gg_",
-    "@pulse": "pulse_1k9zd"
+    "__SLineGauge": "___SLineGauge_1yrsa_gg_",
+    "_loading": "__loading_1yrsa_gg_",
+    "__SDonutContainer": "___SDonutContainer_1yrsa_gg_",
+    "__STrendLine": "___STrendLine_1yrsa_gg_",
+    "__STrendBar": "___STrendBar_1yrsa_gg_",
+    "@pulse": "pulse_1yrsa"
   })
 );
-var TrendLineRoot = /* @__PURE__ */ function(_Trend) {
-  _inherits(TrendLineRoot2, _Trend);
-  var _super = _createSuper(TrendLineRoot2);
+var TrendLineRoot = /* @__PURE__ */ (function(_Trend) {
   function TrendLineRoot2() {
     _classCallCheck(this, TrendLineRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, TrendLineRoot2, arguments);
   }
-  _createClass(TrendLineRoot2, [{
+  _inherits(TrendLineRoot2, _Trend);
+  return _createClass(TrendLineRoot2, [{
     key: "defaultData",
     get: function get() {
       return [15, 70, 20, 85, 20];
@@ -90,7 +88,7 @@ var TrendLineRoot = /* @__PURE__ */ function(_Trend) {
         points.push("".concat(step * i, ",").concat(this.defaultHeight - this.data[i]));
       }
       var _extractAriaProps = extractAriaProps(this.asProps), __excludeProps = _extractAriaProps.__excludeProps, extractedAriaProps = _extractAriaProps.extractedAriaProps;
-      return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(STrendLine, _ref2.cn("STrendLine", _objectSpread({}, assignProps({
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(STrendLine, _ref2.cn("STrendLine", _objectSpread({}, assignProps({
         "ref": this.containerRef,
         "__excludeProps": ["data"].concat(_toConsumableArray(__excludeProps))
       }, _ref))), /* @__PURE__ */ React.createElement("svg", _ref2.cn("svg", _objectSpread({
@@ -132,8 +130,7 @@ var TrendLineRoot = /* @__PURE__ */ function(_Trend) {
       }))))));
     }
   }]);
-  return TrendLineRoot2;
-}(Trend);
+})(Trend);
 _defineProperty(TrendLineRoot, "enhance", [resolveColorEnhance(), uniqueIDEnhancement()]);
 _defineProperty(TrendLineRoot, "style", style);
 _defineProperty(TrendLineRoot, "defaultProps", {

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

@@ -1,29 +1,27 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React from "react";
 import { Component } from "@semcore/core";
-var Trend = /* @__PURE__ */ function(_Component) {
-  _inherits(Trend2, _Component);
-  var _super = _createSuper(Trend2);
+import React from "react";
+var Trend = /* @__PURE__ */ (function(_Component) {
   function Trend2() {
     var _this;
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
     _classCallCheck(this, Trend2);
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "state", {
+    _this = _callSuper(this, Trend2, [].concat(args));
+    _defineProperty(_this, "state", {
       width: 200,
       height: 100
     });
-    _defineProperty(_assertThisInitialized(_this), "containerRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "containerRef", /* @__PURE__ */ React.createRef());
     return _this;
   }
-  _createClass(Trend2, [{
+  _inherits(Trend2, _Component);
+  return _createClass(Trend2, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.setSizes();
@@ -71,8 +69,7 @@ var Trend = /* @__PURE__ */ function(_Component) {
       }
     }
   }]);
-  return Trend2;
-}(Component);
+})(Component);
 export {
   Trend
 };

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

@@ -0,0 +1,8 @@
+import { TrendBar, TrendHistogram } from "./Bar.mjs";
+import { TrendArea, TrendLine } from "./Line.mjs";
+export {
+  TrendArea,
+  TrendBar,
+  TrendHistogram,
+  TrendLine
+};

package/lib/esm/index.mjs

@@ -1,7 +1,9 @@
-import { ScoreSemiDonut, ScoreDonut } from "./component/score/Donut.mjs";
+import "./component/score/index.mjs";
+import "./component/trend/index.mjs";
 import { ScoreLine } from "./component/score/Line.mjs";
-import { TrendLine, TrendArea } from "./component/trend/Line.mjs";
-import { TrendBar, TrendHistogram } from "./component/trend/Bar.mjs";
+import { ScoreDonut, ScoreSemiDonut } from "./component/score/Donut.mjs";
+import { TrendHistogram, TrendBar } from "./component/trend/Bar.mjs";
+import { TrendArea, TrendLine } from "./component/trend/Line.mjs";
 var miniCharts = {
   TrendLine,
   TrendArea,

package/lib/esm/utils/ScoreDonutUtils.mjs

@@ -0,0 +1,82 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var ScoreDonutUtils = /* @__PURE__ */ (function() {
+  function ScoreDonutUtils2(value, isSemiDonut) {
+    _classCallCheck(this, ScoreDonutUtils2);
+    _defineProperty(this, "isSemiDonut", void 0);
+    _defineProperty(this, "value", void 0);
+    _defineProperty(this, "radius", void 0);
+    this.isSemiDonut = isSemiDonut;
+    this.radius = isSemiDonut ? 9 : 10;
+    this.value = Math.max(Math.min(value, 100), 0);
+  }
+  return _createClass(ScoreDonutUtils2, [{
+    key: "viewBox",
+    get: function get() {
+      return this.isSemiDonut ? "0 0 24 12" : "0 0 24 24";
+    }
+  }, {
+    key: "strokeWidth",
+    get: function get() {
+      return this.isSemiDonut ? 6 : 4;
+    }
+  }, {
+    key: "fullLength",
+    get: function get() {
+      return this.isSemiDonut ? Math.PI * this.radius : 2 * Math.PI * this.radius;
+    }
+  }, {
+    key: "point",
+    get: function get() {
+      return this.isSemiDonut ? this.fullLength / (100 / 3) : this.fullLength / 100;
+    }
+  }, {
+    key: "valueLength",
+    get: function get() {
+      return this.fullLength * (this.value / 100);
+    }
+  }, {
+    key: "animatedValueLength",
+    get: function get() {
+      return Math.min(this.valueLength, this.fullLength - this.startMargin - this.endMargin);
+    }
+  }, {
+    key: "startMargin",
+    get: function get() {
+      var margin = 0;
+      if (this.value > 0) margin = this.point;
+      return margin;
+    }
+  }, {
+    key: "endMargin",
+    get: function get() {
+      var margin = 0;
+      if (!this.isSemiDonut && this.value > 0) margin = this.point;
+      return margin;
+    }
+  }, {
+    key: "baseOffset",
+    get: function get() {
+      return -1 * (this.valueLength + this.startMargin);
+    }
+  }, {
+    key: "baseLength",
+    get: function get() {
+      return Math.max(this.fullLength - this.valueLength - this.startMargin - this.endMargin, 0);
+    }
+  }, {
+    key: "animatedBaseLengthFrom",
+    get: function get() {
+      return this.fullLength - this.startMargin - this.endMargin;
+    }
+  }, {
+    key: "animatedBaseLengthTo",
+    get: function get() {
+      return this.fullLength - this.valueLength - this.startMargin - this.endMargin;
+    }
+  }]);
+})();
+export {
+  ScoreDonutUtils
+};

package/lib/types/component/score/Donut.d.ts

@@ -1,12 +1,9 @@
-import { ComponentType } from '@semcore/core';
-import { BoxProps } from '@semcore/flex-box';
-import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
-import { CommonScoreProps } from './Score';
+import { type BoxProps } from '@semcore/base-components';
+import type { CommonScoreProps } from './Score';
 export type ScoreDonutProps = BoxProps & CommonScoreProps;
-type Enhances = {
-    resolveColor: ReturnType<typeof resolveColorEnhance>;
-    isSemiDonut?: true;
-};
-export declare const ScoreDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances>;
-export declare const ScoreSemiDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances>;
-export {};
+export declare const ScoreDonut: import("@semcore/core").Intergalactic.Component<"svg", ScoreDonutProps, {}, readonly [<T extends {}>(props: T) => T & {
+    duration: string;
+}, (props: any) => any]>;
+export declare const ScoreSemiDonut: import("@semcore/core").Intergalactic.Component<"svg", ScoreDonutProps, {}, readonly [<T extends {}>(props: T) => T & {
+    duration: string;
+}, (props: any) => any]>;

package/lib/types/component/score/Line.d.ts

@@ -1,2 +1,2 @@
-import { ScoreLineComponent } from './Line.types';
+import type { ScoreLineComponent } from './Line.types';
 export declare const ScoreLine: ScoreLineComponent;

package/lib/types/component/score/Line.types.d.ts

@@ -1,8 +1,8 @@
-import { Intergalactic, ComponentType } from '@semcore/utils/lib/core';
-import { CommonScoreProps } from './Score';
-import React from 'react';
-import { BoxProps, Box } from '@semcore/flex-box';
-import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
+import type { BoxProps, Box } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
+import type resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
+import type React from 'react';
+import type { CommonScoreProps } from './Score';
 type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
 type Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;
 export type SegmentColor = `chart-palette-order-${Range<1, 24>}`;
@@ -39,10 +39,12 @@ type CustomRenderScoreProps = {
     children: SegmentComponent[];
 };
 export type ScoreLineGaugeProps = BoxProps & Intergalactic.InternalTypings.EfficientOmit<CommonScoreProps, 'value' | 'color'> & (ValuedScoreProps | CustomRenderScoreProps);
-export type Enhances = {
-    resolveColor: ReturnType<typeof resolveColorEnhance>;
-};
-export type ScoreLineComponent = ComponentType<ScoreLineGaugeProps, {}, {}, Enhances> & {
+export type Enhances = [
+    () => {
+        resolveColor: ReturnType<typeof resolveColorEnhance>;
+    }
+];
+export type ScoreLineComponent = Intergalactic.Component<'svg', ScoreLineGaugeProps, {}, Enhances> & {
     Segment: Intergalactic.Component<typeof Box, SegmentProps>;
 };
 export {};

package/lib/types/component/trend/Bar.d.ts

@@ -1,6 +1,4 @@
-import { ComponentType } from '@semcore/core';
-import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
-import { CommonTrendProps } from './Trend';
+import { type CommonTrendProps } from './Trend';
 type BarItem = {
     /**
      * Value
@@ -17,10 +15,6 @@ export type TrendBarProps = CommonTrendProps & {
      */
     data: BarItem[];
 };
-type Enhances = {
-    resolveColor: ReturnType<typeof resolveColorEnhance>;
-    isHistogram?: true;
-};
-export declare const TrendBar: ComponentType<TrendBarProps, {}, {}, Enhances>;
-export declare const TrendHistogram: ComponentType<TrendBarProps, {}, {}, Enhances>;
+export declare const TrendBar: import("@semcore/core").Intergalactic.Component<"svg", TrendBarProps, {}, readonly [(props: any) => any]>;
+export declare const TrendHistogram: import("@semcore/core").Intergalactic.Component<"svg", TrendBarProps, {}, readonly [(props: any) => any]>;
 export {};

package/lib/types/component/trend/Line.d.ts

@@ -1,6 +1,4 @@
-import { ComponentType } from '@semcore/core';
-import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
-import { CommonTrendProps } from './Trend';
+import { type CommonTrendProps } from './Trend';
 export type TrendLineProps = CommonTrendProps & {
     /**
      * List of values
@@ -19,11 +17,9 @@ export type TrendLineProps = CommonTrendProps & {
      */
     lastPointRadius?: number;
 };
-type Enhances = {
-    uid: string;
-    resolveColor: ReturnType<typeof resolveColorEnhance>;
-    withArea?: true;
-};
-export declare const TrendLine: ComponentType<TrendLineProps, {}, {}, Enhances>;
-export declare const TrendArea: ComponentType<TrendLineProps, {}, {}, Enhances>;
-export {};
+export declare const TrendLine: import("@semcore/core").Intergalactic.Component<"svg", TrendLineProps, {}, readonly [(props: any) => any, (props: any) => {
+    uid: ReturnType<typeof import("@semcore/core/lib/utils/uniqueID").useUID>;
+}]>;
+export declare const TrendArea: import("@semcore/core").Intergalactic.Component<"svg", TrendLineProps, {}, readonly [(props: any) => any, (props: any) => {
+    uid: ReturnType<typeof import("@semcore/core/lib/utils/uniqueID").useUID>;
+}]>;