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

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

@@ -1,101 +1,104 @@
 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, assignProps, Component, 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 { cssVariableEnhance } from "@semcore/core/lib/utils/useCssVariable";
+import { sstyled } from "@semcore/utils/lib/core/index";
+import createComponent, { assignProps, sstyled as sstyled$1, Component } from "@semcore/core";
 import React from "react";
-import { ScoreDonutUtils } from "../../utils/ScoreDonutUtils.mjs";
+import { Box } from "@semcore/flex-box";
+import resolveColorEnhance from "@semcore/utils/lib/enhances/resolveColorEnhance";
+import { extractAriaProps } from "@semcore/utils/lib/ariaProps";
 /*!__reshadow-styles__:"./donut.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_w54vj{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_w54vj_gg_.__loading_w54vj_gg_,.___SLineGauge_w54vj_gg_.__loading_w54vj_gg_,.___STrendBar_w54vj_gg_.__loading_w54vj_gg_,.___STrendLine_w54vj_gg_.__loading_w54vj_gg_{animation-name:pulse_w54vj;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_w54vj_gg_.__semi_w54vj_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_w54vj_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_w54vj_gg_.__animate_w54vj_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}",
+    "@keyframes pulse_1clki{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1clki_gg_.__loading_1clki_gg_,.___SLineGauge_1clki_gg_.__loading_1clki_gg_,.___STrendBar_1clki_gg_.__loading_1clki_gg_,.___STrendLine_1clki_gg_.__loading_1clki_gg_{animation-name:pulse_1clki;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_1clki_gg_.__semi_1clki_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_1clki_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_1clki_gg_.__animate_1clki_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}",
     /*__inner_css_end__*/
-    "w54vj_gg_"
+    "1clki_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_w54vj_gg_",
-    "_loading": "__loading_w54vj_gg_",
-    "__SDonutContainer": "___SDonutContainer_w54vj_gg_",
-    "__STrendLine": "___STrendLine_w54vj_gg_",
-    "__STrendBar": "___STrendBar_w54vj_gg_",
-    "@pulse": "pulse_w54vj",
-    "_animate": "__animate_w54vj_gg_",
-    "_semi": "__semi_w54vj_gg_"
+    "__SLineGauge": "___SLineGauge_1clki_gg_",
+    "_loading": "__loading_1clki_gg_",
+    "__SDonutContainer": "___SDonutContainer_1clki_gg_",
+    "__STrendLine": "___STrendLine_1clki_gg_",
+    "__STrendBar": "___STrendBar_1clki_gg_",
+    "@pulse": "pulse_1clki",
+    "_animate": "__animate_1clki_gg_",
+    "_semi": "__semi_1clki_gg_"
   })
 );
-var DonutRoot = /* @__PURE__ */ (function(_Component) {
+var DonutRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(DonutRoot2, _Component);
+  var _super = _createSuper(DonutRoot2);
   function DonutRoot2() {
     _classCallCheck(this, DonutRoot2);
-    return _callSuper(this, DonutRoot2, arguments);
+    return _super.apply(this, arguments);
   }
-  _inherits(DonutRoot2, _Component);
-  return _createClass(DonutRoot2, [{
+  _createClass(DonutRoot2, [{
     key: "render",
     value: function render() {
       var _ref = this.asProps, _ref2;
       var SDonutContainer = Box;
-      var _this$asProps = this.asProps, value = _this$asProps.value, styles = _this$asProps.styles, _this$asProps$baseBgC = _this$asProps.baseBgColor, baseBgColor = _this$asProps$baseBgC === void 0 ? "chart-grid-bar-chart-base-bg" : _this$asProps$baseBgC, _this$asProps$color = _this$asProps.color, color = _this$asProps$color === void 0 ? "chart-palette-order-1" : _this$asProps$color, resolveColor = _this$asProps.resolveColor, isSemiDonut = _this$asProps.isSemiDonut, loading = _this$asProps.loading, animate = _this$asProps.animate, duration = _this$asProps.duration;
-      var scoreDonut = new ScoreDonutUtils(value, isSemiDonut);
+      var _this$asProps = this.asProps, value = _this$asProps.value, styles = _this$asProps.styles, _this$asProps$baseBgC = _this$asProps.baseBgColor, baseBgColor = _this$asProps$baseBgC === void 0 ? "chart-grid-bar-chart-base-bg" : _this$asProps$baseBgC, _this$asProps$color = _this$asProps.color, color = _this$asProps$color === void 0 ? "chart-palette-order-1" : _this$asProps$color, resolveColor = _this$asProps.resolveColor, isSemiDonut = _this$asProps.isSemiDonut, loading = _this$asProps.loading;
+      var strokeWidth = isSemiDonut ? 6 : 4;
+      var radius = isSemiDonut ? 9 : 10;
+      var baseStrokeDasharray = isSemiDonut ? Math.PI * radius : Math.PI * 2 * radius;
+      var valueStrokeDasharray = baseStrokeDasharray * (value / 100);
+      var greyStrokeDasharray = baseStrokeDasharray * ((100 - value) / 100);
+      var offsetPoint = isSemiDonut ? baseStrokeDasharray / (100 / 3) : baseStrokeDasharray / 100;
+      var strokeDasharrayBetweenSpaces = "".concat(greyStrokeDasharray - 2 * offsetPoint, " ").concat(offsetPoint);
+      var spaceStrokeDasharray = "".concat(offsetPoint, " ").concat(value < 99 ? "".concat(strokeDasharrayBetweenSpaces) : "", " ").concat(baseStrokeDasharray);
+      if (isSemiDonut) {
+        spaceStrokeDasharray = "".concat(offsetPoint, " ").concat(value < 95 ? "".concat(strokeDasharrayBetweenSpaces) : "", " ").concat(baseStrokeDasharray);
+      }
+      var viewBox = isSemiDonut ? "0 0 24 12" : "0 0 24 24";
+      var strokeDashoffsetBase = -1 * (valueStrokeDasharray + (isSemiDonut ? offsetPoint : 0));
       var _extractAriaProps = extractAriaProps(this.asProps), __excludeProps = _extractAriaProps.__excludeProps, extractedAriaProps = _extractAriaProps.extractedAriaProps;
-      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SDonutContainer, _ref2.cn("SDonutContainer", _objectSpread({}, assignProps({
+      return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SDonutContainer, _ref2.cn("SDonutContainer", _objectSpread({}, assignProps({
         "semi": isSemiDonut,
         "__excludeProps": __excludeProps
       }, _ref))), /* @__PURE__ */ React.createElement("svg", _ref2.cn("svg", _objectSpread({
         "width": "100%",
         "height": "100%",
-        "viewBox": scoreDonut.viewBox,
+        "viewBox": viewBox,
         "fill": "none",
         "role": "img"
       }, extractedAriaProps)), /* @__PURE__ */ React.createElement("g", _ref2.cn("g", {}), /* @__PURE__ */ React.createElement("circle", _ref2.cn("circle", {
         "cx": "12",
         "cy": "12",
-        "r": scoreDonut.radius,
-        "strokeWidth": scoreDonut.strokeWidth,
+        "r": radius,
+        "strokeWidth": strokeWidth,
         "stroke": resolveColor(baseBgColor),
-        "strokeDasharray": loading ? void 0 : "".concat(scoreDonut.baseLength, " ").concat(scoreDonut.fullLength),
-        "strokeDashoffset": scoreDonut.baseOffset
-      }), animate && value > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("animate", _ref2.cn("animate", {
-        "attributeName": "stroke-dasharray",
-        "from": "".concat(scoreDonut.animatedBaseLengthFrom, " ").concat(scoreDonut.fullLength),
-        "to": "".concat(scoreDonut.animatedBaseLengthTo, " ").concat(scoreDonut.fullLength),
-        "dur": duration + "ms"
-      })), /* @__PURE__ */ React.createElement("animate", _ref2.cn("animate", {
-        "attributeName": "stroke-dashoffset",
-        "from": -1 * scoreDonut.startMargin,
-        "to": scoreDonut.baseOffset,
-        "dur": duration + "ms"
-      })))), !loading && value > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("circle", _ref2.cn("circle", {
+        "strokeDasharray": loading ? void 0 : "".concat(greyStrokeDasharray, " ").concat(baseStrokeDasharray),
+        "strokeDashoffset": strokeDashoffsetBase
+      })), !loading && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("circle", _ref2.cn("circle", {
         "cx": "12",
         "cy": "12",
-        "r": scoreDonut.radius,
-        "strokeWidth": scoreDonut.strokeWidth,
+        "r": radius,
+        "strokeWidth": strokeWidth,
         "stroke": resolveColor(color),
-        "strokeDasharray": "".concat(scoreDonut.valueLength, " ").concat(scoreDonut.fullLength)
-      }), animate && /* @__PURE__ */ React.createElement("animate", _ref2.cn("animate", {
-        "attributeName": "stroke-dasharray",
-        "from": "0 ".concat(scoreDonut.fullLength),
-        "to": "".concat(scoreDonut.valueLength, " ").concat(scoreDonut.fullLength),
-        "dur": duration + "ms"
-      })))))));
+        "strokeDasharray": "".concat(valueStrokeDasharray, " ").concat(baseStrokeDasharray),
+        "strokeDashoffset": valueStrokeDasharray
+      }), /* @__PURE__ */ React.createElement("animate", _ref2.cn("animate", {
+        "attributeName": "stroke-dashoffset",
+        "values": "0;".concat(valueStrokeDasharray)
+      }))), value !== 100 && !isSemiDonut && /* @__PURE__ */ React.createElement("circle", _ref2.cn("circle", {
+        "cx": "12",
+        "cy": "12",
+        "r": radius,
+        "strokeWidth": strokeWidth,
+        "stroke": resolveColor("chart-grid-border"),
+        "strokeDasharray": spaceStrokeDasharray,
+        "strokeDashoffset": -1 * valueStrokeDasharray
+      }))))));
     }
   }]);
-})(Component);
-_defineProperty(DonutRoot, "enhance", [cssVariableEnhance({
-  variable: "--intergalactic-duration-extra-slow",
-  fallback: "500",
-  map: function map(v) {
-    return Number.parseInt(v, 10).toString();
-  },
-  prop: "duration"
-}), resolveColorEnhance()]);
+  return DonutRoot2;
+}(Component);
+_defineProperty(DonutRoot, "enhance", [resolveColorEnhance()]);
 _defineProperty(DonutRoot, "style", style);
 _defineProperty(DonutRoot, "defaultProps", {
   animate: true

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

@@ -1,49 +1,51 @@
 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, assignProps, Component, createComponent } from "@semcore/core";
-import { Box, Flex } from "@semcore/base-components";
-import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
+import { sstyled } from "@semcore/utils/lib/core/index";
+import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
 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_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}",
+    "@keyframes pulse_1we5b{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_1we5b{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_1we5b_gg_.__loading_1we5b_gg_,.___SLineGauge_1we5b_gg_.__loading_1we5b_gg_,.___STrendBar_1we5b_gg_.__loading_1we5b_gg_,.___STrendLine_1we5b_gg_.__loading_1we5b_gg_{animation-name:pulse_1we5b;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_1we5b_gg_{height:8px;background-color:var(--base-bg-color_1we5b, var(--intergalactic-chart-grid-bar-chart-base-bg, rgb(241, 242, 242)));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_1we5b_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_1we5b_gg_.__percent_1we5b_gg_{width:var(--percent_1we5b)}.___SLineSegmentItem_1we5b_gg_.__color_1we5b_gg_,.___SLineValue_1we5b_gg_.__color_1we5b_gg_{background-color:var(--color_1we5b, var(--intergalactic-chart-palette-order-1, rgb(102, 107, 219)))}.___SLineGauge_1we5b_gg_.__segments_1we5b_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_1we5b_gg_,.___SLineGaugeSegment_1we5b_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_1we5b_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_1we5b_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_1we5b_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_1we5b;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}",
     /*__inner_css_end__*/
-    "776hj_gg_"
+    "1we5b_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__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"
+    "__SLineGauge": "___SLineGauge_1we5b_gg_",
+    "_loading": "__loading_1we5b_gg_",
+    "__SDonutContainer": "___SDonutContainer_1we5b_gg_",
+    "__STrendLine": "___STrendLine_1we5b_gg_",
+    "__STrendBar": "___STrendBar_1we5b_gg_",
+    "@pulse": "pulse_1we5b",
+    "__SLineValue": "___SLineValue_1we5b_gg_",
+    "_percent": "__percent_1we5b_gg_",
+    "--percent": "--percent_1we5b",
+    "_color": "__color_1we5b_gg_",
+    "__SLineSegmentItem": "___SLineSegmentItem_1we5b_gg_",
+    "_segments": "__segments_1we5b_gg_",
+    "__SLineGaugeSegment": "___SLineGaugeSegment_1we5b_gg_",
+    "__SAnimationLine": "___SAnimationLine_1we5b_gg_",
+    "@move-line": "move-line_1we5b",
+    "--base-bg-color": "--base-bg-color_1we5b",
+    "--color": "--color_1we5b"
   })
 );
-var LineRoot = /* @__PURE__ */ (function(_Component) {
+var LineRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(LineRoot2, _Component);
+  var _super = _createSuper(LineRoot2);
   function LineRoot2() {
     _classCallCheck(this, LineRoot2);
-    return _callSuper(this, LineRoot2, arguments);
+    return _super.apply(this, arguments);
   }
-  _inherits(LineRoot2, _Component);
-  return _createClass(LineRoot2, [{
+  _createClass(LineRoot2, [{
     key: "getSegmentProps",
     value: function getSegmentProps(segmentProps) {
       var _this$asProps = this.asProps, children = _this$asProps.children, resolveColor = _this$asProps.resolveColor;
@@ -55,7 +57,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)
       };
     }
@@ -71,7 +73,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(styles), /* @__PURE__ */ React.createElement(SLineGauge, _ref3.cn("SLineGauge", _objectSpread({}, assignProps({
+        return _ref3 = sstyled$1(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", {})));
@@ -82,7 +84,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(styles), /* @__PURE__ */ React.createElement(SLineSegmentItem, _ref4.cn("SLineSegmentItem", {
+          SegmentItems.push((_ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SLineSegmentItem, _ref4.cn("SLineSegmentItem", {
             "key": i,
             "color": i < value ? resolveColor(color) : void 0,
             "w": width
@@ -93,7 +95,7 @@ var LineRoot = /* @__PURE__ */ (function(_Component) {
       if (segments) {
         percent = "".concat(value / segments * 100, "%");
       }
-      return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineGauge, _ref5.cn("SLineGauge", _objectSpread({}, assignProps({
+      return _ref5 = sstyled$1(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,
@@ -101,7 +103,8 @@ var LineRoot = /* @__PURE__ */ (function(_Component) {
       })), Boolean(SegmentItems.length) && /* @__PURE__ */ React.createElement(SLineGaugeSegment, _ref5.cn("SLineGaugeSegment", {}), SegmentItems), animate && /* @__PURE__ */ React.createElement(SAnimationLine, _ref5.cn("SAnimationLine", {})));
     }
   }]);
-})(Component);
+  return LineRoot2;
+}(Component);
 _defineProperty(LineRoot, "enhance", [resolveColorEnhance()]);
 _defineProperty(LineRoot, "displayName", "ScoreLine");
 _defineProperty(LineRoot, "style", style);
@@ -110,10 +113,9 @@ _defineProperty(LineRoot, "defaultProps", {
 });
 function Segment(props) {
   var _ref2 = arguments[0], _ref6;
-  var styles = props.styles, value = props.value;
+  var styles = props.styles;
   var SLineSegmentItem = Box;
-  if (!value) return null;
-  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineSegmentItem, _ref6.cn("SLineSegmentItem", _objectSpread({}, assignProps({}, _ref2))));
+  return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SLineSegmentItem, _ref6.cn("SLineSegmentItem", _objectSpread({}, assignProps({}, _ref2))));
 }
 Segment.displayName = "Segment";
 var ScoreLine = createComponent(LineRoot, {

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

@@ -18,7 +18,7 @@ SLineValue[percent] {
 }
 
 SLineValue[color], SLineSegmentItem[color] {
-  background-color: var(--color, var(--intergalactic-chart-palette-order-1, oklch(0.58 0.153 278.4)));
+  background-color: var(--color, var(--intergalactic-chart-palette-order-1, oklch(0.58 0.168 278.2)));
 }
 
 SLineGauge[segments] {

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

@@ -2,40 +2,42 @@ 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, 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 { sstyled } from "@semcore/utils/lib/core/index";
+import createComponent, { assignProps, sstyled as sstyled$1 } from "@semcore/core";
 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_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}",
+    "@keyframes pulse_mylya{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_mylya_gg_.__loading_mylya_gg_,.___SLineGauge_mylya_gg_.__loading_mylya_gg_,.___STrendBar_mylya_gg_.__loading_mylya_gg_,.___STrendLine_mylya_gg_.__loading_mylya_gg_{animation-name:pulse_mylya;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
     /*__inner_css_end__*/
-    "1yrsa_gg_"
+    "mylya_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_1yrsa_gg_",
-    "_loading": "__loading_1yrsa_gg_",
-    "__SDonutContainer": "___SDonutContainer_1yrsa_gg_",
-    "__STrendLine": "___STrendLine_1yrsa_gg_",
-    "__STrendBar": "___STrendBar_1yrsa_gg_",
-    "@pulse": "pulse_1yrsa"
+    "__SLineGauge": "___SLineGauge_mylya_gg_",
+    "_loading": "__loading_mylya_gg_",
+    "__SDonutContainer": "___SDonutContainer_mylya_gg_",
+    "__STrendLine": "___STrendLine_mylya_gg_",
+    "__STrendBar": "___STrendBar_mylya_gg_",
+    "@pulse": "pulse_mylya"
   })
 );
-var TrendBarRoot = /* @__PURE__ */ (function(_Trend) {
+var TrendBarRoot = /* @__PURE__ */ function(_Trend) {
+  _inherits(TrendBarRoot2, _Trend);
+  var _super = _createSuper(TrendBarRoot2);
   function TrendBarRoot2() {
     _classCallCheck(this, TrendBarRoot2);
-    return _callSuper(this, TrendBarRoot2, arguments);
+    return _super.apply(this, arguments);
   }
-  _inherits(TrendBarRoot2, _Trend);
-  return _createClass(TrendBarRoot2, [{
+  _createClass(TrendBarRoot2, [{
     key: "defaultData",
     get: function get() {
       return [{
@@ -65,7 +67,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(styles), /* @__PURE__ */ React.createElement(STrendBar, _ref2.cn("STrendBar", _objectSpread({}, assignProps({
+      return _ref2 = sstyled$1(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({
@@ -93,7 +95,8 @@ var TrendBarRoot = /* @__PURE__ */ (function(_Trend) {
       })));
     }
   }]);
-})(Trend);
+  return TrendBarRoot2;
+}(Trend);
 _defineProperty(TrendBarRoot, "enhance", [resolveColorEnhance()]);
 _defineProperty(TrendBarRoot, "style", style);
 _defineProperty(TrendBarRoot, "defaultProps", {
@@ -112,7 +115,7 @@ var TrendHistogram = createComponent(TrendBarRoot, {}, {
     };
   }]
 });
-TrendHistogram.displayName = "MiniChart.TrendHistogram";
+TrendBar.displayName = "MiniChart.TrendHistogram";
 export {
   TrendBar,
   TrendHistogram

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

@@ -2,41 +2,43 @@ 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, 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 { sstyled } from "@semcore/utils/lib/core/index";
+import createComponent, { assignProps, sstyled as sstyled$1 } from "@semcore/core";
 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_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}",
+    "@keyframes pulse_mylya{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_mylya_gg_.__loading_mylya_gg_,.___SLineGauge_mylya_gg_.__loading_mylya_gg_,.___STrendBar_mylya_gg_.__loading_mylya_gg_,.___STrendLine_mylya_gg_.__loading_mylya_gg_{animation-name:pulse_mylya;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
     /*__inner_css_end__*/
-    "1yrsa_gg_"
+    "mylya_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLineGauge": "___SLineGauge_1yrsa_gg_",
-    "_loading": "__loading_1yrsa_gg_",
-    "__SDonutContainer": "___SDonutContainer_1yrsa_gg_",
-    "__STrendLine": "___STrendLine_1yrsa_gg_",
-    "__STrendBar": "___STrendBar_1yrsa_gg_",
-    "@pulse": "pulse_1yrsa"
+    "__SLineGauge": "___SLineGauge_mylya_gg_",
+    "_loading": "__loading_mylya_gg_",
+    "__SDonutContainer": "___SDonutContainer_mylya_gg_",
+    "__STrendLine": "___STrendLine_mylya_gg_",
+    "__STrendBar": "___STrendBar_mylya_gg_",
+    "@pulse": "pulse_mylya"
   })
 );
-var TrendLineRoot = /* @__PURE__ */ (function(_Trend) {
+var TrendLineRoot = /* @__PURE__ */ function(_Trend) {
+  _inherits(TrendLineRoot2, _Trend);
+  var _super = _createSuper(TrendLineRoot2);
   function TrendLineRoot2() {
     _classCallCheck(this, TrendLineRoot2);
-    return _callSuper(this, TrendLineRoot2, arguments);
+    return _super.apply(this, arguments);
   }
-  _inherits(TrendLineRoot2, _Trend);
-  return _createClass(TrendLineRoot2, [{
+  _createClass(TrendLineRoot2, [{
     key: "defaultData",
     get: function get() {
       return [15, 70, 20, 85, 20];
@@ -88,7 +90,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(styles), /* @__PURE__ */ React.createElement(STrendLine, _ref2.cn("STrendLine", _objectSpread({}, assignProps({
+      return _ref2 = sstyled$1(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({
@@ -130,7 +132,8 @@ var TrendLineRoot = /* @__PURE__ */ (function(_Trend) {
       }))))));
     }
   }]);
-})(Trend);
+  return TrendLineRoot2;
+}(Trend);
 _defineProperty(TrendLineRoot, "enhance", [resolveColorEnhance(), uniqueIDEnhancement()]);
 _defineProperty(TrendLineRoot, "style", style);
 _defineProperty(TrendLineRoot, "defaultProps", {

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

@@ -1,27 +1,29 @@
 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 _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 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 { Component } from "@semcore/core";
 import React from "react";
-var Trend = /* @__PURE__ */ (function(_Component) {
+import { Component } from "@semcore/core";
+var Trend = /* @__PURE__ */ function(_Component) {
+  _inherits(Trend2, _Component);
+  var _super = _createSuper(Trend2);
   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 = _callSuper(this, Trend2, [].concat(args));
-    _defineProperty(_this, "state", {
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
       width: 200,
       height: 100
     });
-    _defineProperty(_this, "containerRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "containerRef", /* @__PURE__ */ React.createRef());
     return _this;
   }
-  _inherits(Trend2, _Component);
-  return _createClass(Trend2, [{
+  _createClass(Trend2, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.setSizes();
@@ -69,7 +71,8 @@ var Trend = /* @__PURE__ */ (function(_Component) {
       }
     }
   }]);
-})(Component);
+  return Trend2;
+}(Component);
 export {
   Trend
 };

package/lib/esm/index.mjs

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

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

@@ -1,9 +1,12 @@
-import { type BoxProps } from '@semcore/base-components';
-import type { CommonScoreProps } from './Score';
+import { ComponentType } from '@semcore/core';
+import { BoxProps } from '@semcore/flex-box';
+import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
+import { CommonScoreProps } from './Score';
 export type ScoreDonutProps = BoxProps & CommonScoreProps;
-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]>;
+type Enhances = {
+    resolveColor: ReturnType<typeof resolveColorEnhance>;
+    isSemiDonut?: true;
+};
+export declare const ScoreDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances>;
+export declare const ScoreSemiDonut: ComponentType<ScoreDonutProps, {}, {}, Enhances>;
+export {};

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

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

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

@@ -1,8 +1,8 @@
-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';
+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';
 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,12 +39,10 @@ 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 = Intergalactic.Component<'svg', ScoreLineGaugeProps, {}, Enhances> & {
+export type Enhances = {
+    resolveColor: ReturnType<typeof resolveColorEnhance>;
+};
+export type ScoreLineComponent = ComponentType<ScoreLineGaugeProps, {}, {}, Enhances> & {
     Segment: Intergalactic.Component<typeof Box, SegmentProps>;
 };
 export {};