@semcore/mini-chart 17.2.2 → 18.0.0-prerelease.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [18.0.0] - 2026-09-28
+
+### BREAK
+
+- New theme applied.
+- Update `MiniChart.Score` typings to enforce either `value`/`color`
+props or custom `children`, preventing unsupported prop combinations.
+
 ## [17.2.2] - 2026-09-10
 
 ### Fixed

package/lib/cjs/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, oklch(0.88 0.002 175.6)));
+  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, oklch(0.58 0.168 278.2)));
+  background-color: var(--color, var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)));
 }
 
 SLineGauge[segments] {
@@ -41,14 +41,14 @@ SLineSegmentItem:last-child {
 SLineSegmentItem {
   height: 8px;
   background: transparent;
-  border-right-color: var(--intergalactic-chart-grid-border, #fff);
+  border-right-color: var(--intergalactic-chart-grid-border, #ffffff);
   border-right-style: solid;
   border-right-width: 1px;
   box-sizing: content-box;
 }
 
 SAnimationLine {
-  background-color: var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.88 0.002 175.6));
+  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/cjs/{component → components}/score/Donut.js

@@ -13,18 +13,18 @@ var _resolveColorEnhance = _interopRequireDefault(require("@semcore/core/lib/uti
 var _useCssVariable = require("@semcore/core/lib/utils/useCssVariable");
 var _react = _interopRequireDefault(require("react"));
 var _ScoreDonutUtils = require("../../utils/ScoreDonutUtils");
-/*!__reshadow-styles__:"./donut.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDonutContainer_fpn7q_gg_.__loading_fpn7q_gg_,.___SLineGauge_fpn7q_gg_.__loading_fpn7q_gg_,.___STrendBar_fpn7q_gg_.__loading_fpn7q_gg_,.___STrendLine_fpn7q_gg_.__loading_fpn7q_gg_{animation-name:pulse_fpn7q;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}@keyframes pulse_fpn7q{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SDonutContainer_fpn7q_gg_.__semi_fpn7q_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_fpn7q_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_fpn7q_gg_.__animate_fpn7q_gg_ circle{transition:all var(--intergalactic-duration-extra-slow,500) ease-in-out}", /*__inner_css_end__*/"fpn7q_gg_"),
+/*!__reshadow-styles__:"../../styles/donut.shadow.css"*/
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDonutContainer_6nq9n_gg_.__loading_6nq9n_gg_,.___SLineGauge_6nq9n_gg_.__loading_6nq9n_gg_,.___STrendBar_6nq9n_gg_.__loading_6nq9n_gg_,.___STrendLine_6nq9n_gg_.__loading_6nq9n_gg_{animation-name:pulse_6nq9n;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}@keyframes pulse_6nq9n{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SDonutContainer_6nq9n_gg_.__semi_6nq9n_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_6nq9n_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_6nq9n_gg_.__animate_6nq9n_gg_ circle{transition:all var(--intergalactic-duration-extra-slow,500) ease-in-out}", /*__inner_css_end__*/"6nq9n_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SLineGauge": "___SLineGauge_fpn7q_gg_",
-  "_loading": "__loading_fpn7q_gg_",
-  "__SDonutContainer": "___SDonutContainer_fpn7q_gg_",
-  "__STrendLine": "___STrendLine_fpn7q_gg_",
-  "__STrendBar": "___STrendBar_fpn7q_gg_",
-  "@pulse": "pulse_fpn7q",
-  "_animate": "__animate_fpn7q_gg_",
-  "_semi": "__semi_fpn7q_gg_"
+  "__SLineGauge": "___SLineGauge_6nq9n_gg_",
+  "_loading": "__loading_6nq9n_gg_",
+  "__SDonutContainer": "___SDonutContainer_6nq9n_gg_",
+  "__STrendLine": "___STrendLine_6nq9n_gg_",
+  "__STrendBar": "___STrendBar_6nq9n_gg_",
+  "@pulse": "pulse_6nq9n",
+  "_animate": "__animate_6nq9n_gg_",
+  "_semi": "__semi_6nq9n_gg_"
 });
 class DonutRoot extends _core.Component {
   render() {

package/lib/cjs/components/score/Donut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Donut.js","names":["_core","require","_baseComponents","_ariaProps","_resolveColorEnhance","_interopRequireDefault","_useCssVariable","_react","_ScoreDonutUtils","style","sstyled","insert","DonutRoot","Component","render","_ref","asProps","_ref2","SDonutContainer","Box","value","styles","baseBgColor","color","resolveColor","isSemiDonut","loading","animate","duration","scoreDonut","ScoreDonutUtils","__excludeProps","extractedAriaProps","extractAriaProps","default","createElement","cn","assignProps","viewBox","radius","strokeWidth","undefined","baseLength","fullLength","baseOffset","Fragment","animatedBaseLengthFrom","animatedBaseLengthTo","startMargin","valueLength","_defineProperty2","cssVariableEnhance","variable","fallback","map","v","Number","parseInt","toString","prop","resolveColorEnhance","ScoreDonut","exports","createComponent","displayName","ScoreSemiDonut","enhancements","wrapperProps","props"],"sources":["../../../../src/components/score/Donut.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, Root, sstyled, assignProps } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport React from 'react';\n\nimport style from '../../styles/donut.shadow.css';\nimport type { NSMiniChart } from '../../types';\nimport { ScoreDonutUtils } from '../../utils/ScoreDonutUtils';\n\nclass DonutRoot extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSMiniChart.Score.Donut.Component>,\n  typeof DonutRoot.enhance,\n  {},\n  {},\n  {},\n  NSMiniChart.Score.Donut.DefaultProps\n> {\n  static enhance = [\n    cssVariableEnhance({\n      variable: '--intergalactic-duration-extra-slow',\n      fallback: '500',\n      map: (v: string) => Number.parseInt(v, 10).toString(),\n      prop: 'duration',\n    }),\n    resolveColorEnhance(),\n  ] as const;\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  } as const;\n\n  render() {\n    const SDonutContainer = Root;\n    const {\n      value,\n      styles,\n      baseBgColor = 'chart-grid-bar-chart-base-bg',\n      color = 'chart-palette-order-1',\n      resolveColor,\n      isSemiDonut,\n      loading,\n      animate,\n      duration,\n    } = this.asProps;\n\n    const scoreDonut = new ScoreDonutUtils(value, isSemiDonut);\n    const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n    return sstyled(styles)(\n      <SDonutContainer render={Box} semi={isSemiDonut} __excludeProps={__excludeProps}>\n        <svg\n          width='100%'\n          height='100%'\n          viewBox={scoreDonut.viewBox}\n          fill='none'\n          role='img'\n          {...extractedAriaProps}\n        >\n          <g>\n            <circle\n              cx='12'\n              cy='12'\n              r={scoreDonut.radius}\n              strokeWidth={scoreDonut.strokeWidth}\n              stroke={resolveColor(baseBgColor)}\n              strokeDasharray={\n                loading\n                  ? undefined\n                  : `${scoreDonut.baseLength} ${scoreDonut.fullLength}`\n              }\n              strokeDashoffset={scoreDonut.baseOffset}\n            >\n              {animate && value > 0 && (\n                <>\n                  <animate\n                    attributeName='stroke-dasharray'\n                    from={`${scoreDonut.animatedBaseLengthFrom} ${scoreDonut.fullLength}`}\n                    to={`${scoreDonut.animatedBaseLengthTo} ${scoreDonut.fullLength}`}\n                    dur={duration + 'ms'}\n                  />\n                  <animate\n                    attributeName='stroke-dashoffset'\n                    from={-1 * scoreDonut.startMargin}\n                    to={scoreDonut.baseOffset}\n                    dur={duration + 'ms'}\n                  />\n                </>\n              )}\n            </circle>\n            {!loading && value > 0 && (\n              <>\n                <circle\n                  cx='12'\n                  cy='12'\n                  r={scoreDonut.radius}\n                  strokeWidth={scoreDonut.strokeWidth}\n                  stroke={resolveColor(color)}\n                  strokeDasharray={`${scoreDonut.valueLength} ${scoreDonut.fullLength}`}\n                >\n                  {animate && (\n                    <animate\n                      attributeName='stroke-dasharray'\n                      from={`0 ${scoreDonut.fullLength}`}\n                      to={`${scoreDonut.valueLength} ${scoreDonut.fullLength}`}\n                      dur={duration + 'ms'}\n                    />\n                  )}\n                </circle>\n              </>\n            )}\n          </g>\n        </svg>\n      </SDonutContainer>,\n    );\n  }\n}\n\n/**\n * MiniCharts.ScoreDount\n *\n * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}\n */\nexport const ScoreDonut = createComponent<\n  NSMiniChart.Score.Donut.Component,\n  typeof DonutRoot\n>(DonutRoot);\n\nScoreDonut.displayName = 'MiniChart.ScoreDonut';\n\n/**\n * MiniCharts.ScoreSemiDount\n *\n * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}\n */\nexport const ScoreSemiDonut = createComponent<\n  NSMiniChart.Score.Donut.Component,\n  typeof DonutRoot\n>(\n  DonutRoot,\n  {},\n  {\n    enhancements: [\n      () => {\n        return {\n          wrapperProps: (props: NSMiniChart.Score.Donut.Props) => {\n            return assignProps(props, { isSemiDonut: true });\n          },\n        };\n      },\n    ],\n  },\n);\n\nScoreSemiDonut.displayName = 'MiniChart.ScoreSemiDonut';\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/{component → components}/score/Line.js

@@ -10,27 +10,27 @@ var _core = require("@semcore/core");
 var _baseComponents = require("@semcore/base-components");
 var _resolveColorEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/resolveColorEnhance"));
 var _react = _interopRequireDefault(require("react"));
-/*!__reshadow-styles__:"./line.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDonutContainer_1x91g_gg_.__loading_1x91g_gg_,.___SLineGauge_1x91g_gg_.__loading_1x91g_gg_,.___STrendBar_1x91g_gg_.__loading_1x91g_gg_,.___STrendLine_1x91g_gg_.__loading_1x91g_gg_{animation-name:pulse_1x91g;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}@keyframes pulse_1x91g{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SLineGauge_1x91g_gg_{height:8px;background-color:var(--base-bg-color_1x91g,var(--intergalactic-chart-grid-bar-chart-base-bg,oklch(.88 .002 175.6)));border-radius:var(--intergalactic-chart-rounded,2px);overflow:hidden;position:relative}.___SLineValue_1x91g_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded,2px) 0 0 var(--intergalactic-chart-rounded,2px)}.___SLineValue_1x91g_gg_.__percent_1x91g_gg_{width:var(--percent_1x91g)}.___SLineSegmentItem_1x91g_gg_.__color_1x91g_gg_,.___SLineValue_1x91g_gg_.__color_1x91g_gg_{background-color:var(--color_1x91g,var(--intergalactic-chart-palette-order-1,oklch(.58 .168 278.2)))}.___SLineGauge_1x91g_gg_.__segments_1x91g_gg_{border-radius:var(--intergalactic-progress-bar-rounded,6px)}.___SAnimationLine_1x91g_gg_,.___SLineGaugeSegment_1x91g_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_1x91g_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_1x91g_gg_{height:8px;background:#0000;border-right:1px solid var(--intergalactic-chart-grid-border,#fff);box-sizing:initial}.___SAnimationLine_1x91g_gg_{background-color:var(--intergalactic-chart-grid-bar-chart-base-bg,oklch(.88 .002 175.6));transition:all var(--intergalactic-duration-extra-slow,500) ease-in-out;animation-name:move-line_1x91g;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}@keyframes move-line_1x91g{0%{transform:translateX(0)}to{transform:translateX(100%)}}", /*__inner_css_end__*/"1x91g_gg_"),
+/*!__reshadow-styles__:"../../styles/line.shadow.css"*/
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDonutContainer_1bwtu_gg_.__loading_1bwtu_gg_,.___SLineGauge_1bwtu_gg_.__loading_1bwtu_gg_,.___STrendBar_1bwtu_gg_.__loading_1bwtu_gg_,.___STrendLine_1bwtu_gg_.__loading_1bwtu_gg_{animation-name:pulse_1bwtu;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}@keyframes pulse_1bwtu{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SLineGauge_1bwtu_gg_{height:8px;background-color:var(--base-bg-color_1bwtu,var(--intergalactic-chart-grid-bar-chart-base-bg,oklch(.96 .001 180)));border-radius:var(--intergalactic-chart-rounded,2px);overflow:hidden;position:relative}.___SLineValue_1bwtu_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded,2px) 0 0 var(--intergalactic-chart-rounded,2px)}.___SLineValue_1bwtu_gg_.__percent_1bwtu_gg_{width:var(--percent_1bwtu)}.___SLineSegmentItem_1bwtu_gg_.__color_1bwtu_gg_,.___SLineValue_1bwtu_gg_.__color_1bwtu_gg_{background-color:var(--color_1bwtu,var(--intergalactic-chart-palette-order-1,oklch(.23 .01 140)))}.___SLineGauge_1bwtu_gg_.__segments_1bwtu_gg_{border-radius:var(--intergalactic-progress-bar-rounded,6px)}.___SAnimationLine_1bwtu_gg_,.___SLineGaugeSegment_1bwtu_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_1bwtu_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_1bwtu_gg_{height:8px;background:#0000;border-right:1px solid var(--intergalactic-chart-grid-border,#fff);box-sizing:initial}.___SAnimationLine_1bwtu_gg_{background-color:var(--intergalactic-chart-grid-bar-chart-base-bg,oklch(.96 .001 180));transition:all var(--intergalactic-duration-extra-slow,500) ease-in-out;animation-name:move-line_1bwtu;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}@keyframes move-line_1bwtu{0%{transform:translateX(0)}to{transform:translateX(100%)}}", /*__inner_css_end__*/"1bwtu_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SLineGauge": "___SLineGauge_1x91g_gg_",
-  "_loading": "__loading_1x91g_gg_",
-  "__SDonutContainer": "___SDonutContainer_1x91g_gg_",
-  "__STrendLine": "___STrendLine_1x91g_gg_",
-  "__STrendBar": "___STrendBar_1x91g_gg_",
-  "@pulse": "pulse_1x91g",
-  "--base-bg-color": "--base-bg-color_1x91g",
-  "__SLineValue": "___SLineValue_1x91g_gg_",
-  "_percent": "__percent_1x91g_gg_",
-  "--percent": "--percent_1x91g",
-  "_color": "__color_1x91g_gg_",
-  "__SLineSegmentItem": "___SLineSegmentItem_1x91g_gg_",
-  "--color": "--color_1x91g",
-  "_segments": "__segments_1x91g_gg_",
-  "__SLineGaugeSegment": "___SLineGaugeSegment_1x91g_gg_",
-  "__SAnimationLine": "___SAnimationLine_1x91g_gg_",
-  "@move-line": "move-line_1x91g"
+  "__SLineGauge": "___SLineGauge_1bwtu_gg_",
+  "_loading": "__loading_1bwtu_gg_",
+  "__SDonutContainer": "___SDonutContainer_1bwtu_gg_",
+  "__STrendLine": "___STrendLine_1bwtu_gg_",
+  "__STrendBar": "___STrendBar_1bwtu_gg_",
+  "@pulse": "pulse_1bwtu",
+  "--base-bg-color": "--base-bg-color_1bwtu",
+  "__SLineValue": "___SLineValue_1bwtu_gg_",
+  "_percent": "__percent_1bwtu_gg_",
+  "--percent": "--percent_1bwtu",
+  "_color": "__color_1bwtu_gg_",
+  "__SLineSegmentItem": "___SLineSegmentItem_1bwtu_gg_",
+  "--color": "--color_1bwtu",
+  "_segments": "__segments_1bwtu_gg_",
+  "__SLineGaugeSegment": "___SLineGaugeSegment_1bwtu_gg_",
+  "__SAnimationLine": "___SAnimationLine_1bwtu_gg_",
+  "@move-line": "move-line_1bwtu"
 });
 class LineRoot extends _core.Component {
   getSegmentProps(segmentProps) {
@@ -78,6 +78,7 @@ class LineRoot extends _core.Component {
         }, _ref)
       }), /*#__PURE__*/_react.default.createElement(SLineGaugeSegment, _ref3.cn("SLineGaugeSegment", {}), /*#__PURE__*/_react.default.createElement(Children, _ref3.cn("Children", {}))), animate && /*#__PURE__*/_react.default.createElement(SAnimationLine, _ref3.cn("SAnimationLine", {})));
     }
+    if (value === undefined) return null;
     const {
       segments
     } = this.asProps;
@@ -117,16 +118,13 @@ function Segment(props) {
   var _ref2 = arguments[0],
     _ref6;
   const {
-    styles,
-    value
+    styles
   } = props;
   const SLineSegmentItem = _baseComponents.Box;
-  if (!value) return null;
   return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SLineSegmentItem, _ref6.cn("SLineSegmentItem", {
     ...(0, _core.assignProps)({}, _ref2)
   }));
 }
-Segment.displayName = 'Segment';
 
 /**
  * MiniCharts.ScoreLine
@@ -136,5 +134,8 @@ Segment.displayName = 'Segment';
 const ScoreLine = exports.ScoreLine = (0, _core.createComponent)(LineRoot, {
   Segment
 });
+
+// Since the Intergalactic.Component was unfolded to plain component structure.
+// @ts-ignore
 ScoreLine.displayName = 'MiniChart.ScoreLine';
 //# sourceMappingURL=Line.js.map

package/lib/cjs/components/score/Line.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Line.js","names":["_core","require","_baseComponents","_resolveColorEnhance","_interopRequireDefault","_react","style","sstyled","insert","LineRoot","Component","getSegmentProps","segmentProps","children","resolveColor","asProps","sum","React","Children","forEach","child","isValidElement","props","value","width","color","render","_ref","_ref5","SLineGauge","Box","SLineValue","SAnimationLine","SLineGaugeSegment","Flex","SLineSegmentItem","styles","baseBgColor","loading","animate","undefined","_ref3","default","createElement","cn","assignProps","segments","SegmentItems","i","_ref4","push","percent","Boolean","length","_defineProperty2","resolveColorEnhance","Segment","_ref2","arguments[0]","_ref6","ScoreLine","exports","createComponent","displayName"],"sources":["../../../../src/components/score/Line.tsx"],"sourcesContent":["import { Box, Flex } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport style from '../../styles/line.shadow.css';\nimport type { NSMiniChart } from '../../types';\n\nclass LineRoot extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSMiniChart.Score.Line.Component>,\n  typeof LineRoot.enhance,\n  {},\n  {},\n  {},\n  NSMiniChart.Score.Line.DefaultProps\n> {\n  static enhance = [resolveColorEnhance()] as const;\n  static displayName = 'ScoreLine';\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  } as const;\n\n  getSegmentProps(segmentProps: NSMiniChart.Score.Line.Segment.Props) {\n    const { children, resolveColor } = this.asProps;\n\n    let sum = 0;\n    React.Children.forEach(children, (child) => {\n      if (React.isValidElement<NSMiniChart.Score.Line.Segment.Props>(child)) {\n        sum = sum + child.props.value;\n      }\n    });\n\n    const width = sum > 0 ? (100 * segmentProps.value) / sum : 0;\n\n    return {\n      'w': `${width}%`,\n      'use:color': resolveColor(segmentProps.color),\n    };\n  }\n\n  render() {\n    const SLineGauge = Root;\n    const SLineValue = Box;\n    const SAnimationLine = Box;\n    const SLineGaugeSegment = Flex;\n    const SLineSegmentItem = Box;\n    const {\n      value,\n      styles,\n      color = 'chart-palette-order-1',\n      baseBgColor,\n      resolveColor,\n      loading,\n      children,\n      Children,\n      animate,\n    } = this.asProps;\n\n    if (children !== undefined) {\n      return sstyled(styles)(\n        <SLineGauge render={Box} segments base-bg-color={resolveColor(baseBgColor)}>\n          <SLineGaugeSegment>\n            <Children />\n          </SLineGaugeSegment>\n          {animate && <SAnimationLine />}\n        </SLineGauge>,\n      );\n    }\n\n    if (value === undefined) return null;\n\n    const { segments } = this.asProps;\n\n    const SegmentItems = [];\n\n    if (segments) {\n      for (let i = 0; i < segments; i++) {\n        const width = `calc((100% - ${segments - 1}px) / ${segments})`;\n\n        SegmentItems.push(\n          sstyled(styles)(\n            <SLineSegmentItem\n              key={i}\n              color={i < value ? resolveColor(color) : undefined}\n              w={width}\n            />,\n          ),\n        );\n      }\n    }\n\n    let percent = `${value}%`;\n\n    if (segments) {\n      percent = `${(value / segments) * 100}%`;\n    }\n\n    return sstyled(styles)(\n      <SLineGauge render={Box} base-bg-color={resolveColor(baseBgColor)}>\n        {!loading && <SLineValue w={percent} color={resolveColor(color)} />}\n        {Boolean(SegmentItems.length) && <SLineGaugeSegment>{SegmentItems}</SLineGaugeSegment>}\n        {animate && <SAnimationLine />}\n      </SLineGauge>,\n    );\n  }\n}\n\nfunction Segment(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<NSMiniChart.Score.Line.Segment.Component, typeof LineRoot, 'Segment'>,\n) {\n  const { styles } = props;\n  const SLineSegmentItem = Root;\n\n  return sstyled(styles)(<SLineSegmentItem render={Box} />);\n}\n\n/**\n * MiniCharts.ScoreLine\n *\n * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}\n */\nexport const ScoreLine = createComponent<\n  NSMiniChart.Score.Line.Component,\n  typeof LineRoot\n>(LineRoot, { Segment });\n\n// Since the Intergalactic.Component was unfolded to plain component structure.\n// @ts-ignore\nScoreLine.displayName = 'MiniChart.ScoreLine';\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/score/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Donut","require","_Line"],"sources":["../../../../src/components/score/index.ts"],"sourcesContent":["export { ScoreDonut, ScoreSemiDonut } from './Donut';\nexport { ScoreLine } from './Line';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA","ignoreList":[]}

package/lib/cjs/{component → components}/trend/Bar.js

@@ -12,16 +12,16 @@ var _ariaProps = require("@semcore/core/lib/utils/ariaProps");
 var _resolveColorEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/resolveColorEnhance"));
 var _react = _interopRequireDefault(require("react"));
 var _Trend = require("./Trend");
-/*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDonutContainer_1dzd1_gg_.__loading_1dzd1_gg_,.___SLineGauge_1dzd1_gg_.__loading_1dzd1_gg_,.___STrendBar_1dzd1_gg_.__loading_1dzd1_gg_,.___STrendLine_1dzd1_gg_.__loading_1dzd1_gg_{animation-name:pulse_1dzd1;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}@keyframes pulse_1dzd1{0%{opacity:1}50%{opacity:.4}to{opacity:1}}", /*__inner_css_end__*/"1dzd1_gg_"),
+/*!__reshadow-styles__:"../../styles/skeleton.shadow.css"*/
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDonutContainer_30y2p_gg_.__loading_30y2p_gg_,.___SLineGauge_30y2p_gg_.__loading_30y2p_gg_,.___STrendBar_30y2p_gg_.__loading_30y2p_gg_,.___STrendLine_30y2p_gg_.__loading_30y2p_gg_{animation-name:pulse_30y2p;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}@keyframes pulse_30y2p{0%{opacity:1}50%{opacity:.4}to{opacity:1}}", /*__inner_css_end__*/"30y2p_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SLineGauge": "___SLineGauge_1dzd1_gg_",
-  "_loading": "__loading_1dzd1_gg_",
-  "__SDonutContainer": "___SDonutContainer_1dzd1_gg_",
-  "__STrendLine": "___STrendLine_1dzd1_gg_",
-  "__STrendBar": "___STrendBar_1dzd1_gg_",
-  "@pulse": "pulse_1dzd1"
+  "__SLineGauge": "___SLineGauge_30y2p_gg_",
+  "_loading": "__loading_30y2p_gg_",
+  "__SDonutContainer": "___SDonutContainer_30y2p_gg_",
+  "__STrendLine": "___STrendLine_30y2p_gg_",
+  "__STrendBar": "___STrendBar_30y2p_gg_",
+  "@pulse": "pulse_30y2p"
 });
 class TrendBarRoot extends _Trend.Trend {
   get defaultData() {

package/lib/cjs/components/trend/Bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bar.js","names":["_core","require","_baseComponents","_ariaProps","_resolveColorEnhance","_interopRequireDefault","_react","_Trend","style","sstyled","insert","TrendBarRoot","Trend","defaultData","value","data","loading","asProps","render","_ref","_ref2","STrendBar","Box","styles","resolveColor","isHistogram","animate","step","defaultWidth","length","__excludeProps","extractedAriaProps","extractAriaProps","default","createElement","cn","assignProps","containerRef","svgWidth","svgHeight","map","barItem","index","color","key","x","y","defaultHeight","width","height","fill","attributeName","values","dur","_defineProperty2","resolveColorEnhance","TrendBar","exports","createComponent","displayName","TrendHistogram","enhancements","wrapperProps","props"],"sources":["../../../../src/components/trend/Bar.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, assignProps, Root, sstyled } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport { Trend } from './Trend';\nimport style from '../../styles/skeleton.shadow.css';\nimport type { NSMiniChart } from '../../types';\n\nclass TrendBarRoot extends Trend<\n  Intergalactic.InternalTypings.InferComponentProps<NSMiniChart.Trend.Bar.Component>,\n  typeof TrendBarRoot.enhance,\n  NSMiniChart.Trend.Bar.DefaultProps\n> {\n  static enhance = [resolveColorEnhance()] as const;\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  } as const;\n\n  get defaultData(): NSMiniChart.Trend.Bar.Item[] {\n    return [{ value: 20 }, { value: 80 }, { value: 45 }, { value: 10 }];\n  }\n\n  get data(): NSMiniChart.Trend.Bar.Item[] {\n    const { data, loading } = this.asProps;\n\n    if (loading) {\n      return this.defaultData;\n    }\n\n    return data;\n  }\n\n  render() {\n    const STrendBar = Root;\n    const { styles, resolveColor, isHistogram, animate, loading } = this.asProps;\n    const step = this.defaultWidth / this.data.length;\n    const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n    return sstyled(styles)(\n      <STrendBar render={Box} ref={this.containerRef} __excludeProps={['data', ...__excludeProps]}>\n        <svg\n          width='100%'\n          height='100%'\n          viewBox={`0 0 ${this.svgWidth} ${this.svgHeight}`}\n          role='img'\n          {...extractedAriaProps}\n        >\n          {this.data.map((barItem, index) => {\n            let color = resolveColor('chart-palette-order-other-data');\n\n            if (barItem.color) {\n              color = resolveColor(barItem.color);\n            }\n\n            return (\n              <rect\n                key={index}\n                x={step * index}\n                y={this.defaultHeight - barItem.value}\n                width={isHistogram ? step : step * 0.8}\n                height={barItem.value}\n                fill={color}\n              >\n                {animate && !loading && (\n                  <animate\n                    attributeName='y'\n                    values={`${this.defaultHeight};${this.defaultHeight - barItem.value}`}\n                    dur='500ms'\n                  />\n                )}\n              </rect>\n            );\n          })}\n        </svg>\n      </STrendBar>,\n    );\n  }\n}\n\n/**\n * MiniCharts.TrendBar\n *\n * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api#trend-charts|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}\n */\nexport const TrendBar = createComponent<\n  NSMiniChart.Trend.Bar.Component,\n  typeof TrendBarRoot\n>(TrendBarRoot);\n\nTrendBar.displayName = 'MiniChart.TrendBar';\n\n/**\n * MiniCharts.TrendHistogram\n *\n * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api#trend-charts|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}\n */\nexport const TrendHistogram = createComponent<\n  NSMiniChart.Trend.Bar.Component,\n  typeof TrendBarRoot\n>(\n  TrendBarRoot,\n  {},\n  {\n    enhancements: [\n      () => {\n        return {\n          wrapperProps: (props: NSMiniChart.Trend.Bar.Props) => {\n            return assignProps(props, { isHistogram: true });\n          },\n        };\n      },\n    ],\n  },\n);\n\nTrendHistogram.displayName = 'MiniChart.TrendHistogram';\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/{component → components}/trend/Line.js

@@ -13,16 +13,16 @@ var _resolveColorEnhance = _interopRequireDefault(require("@semcore/core/lib/uti
 var _uniqueID = _interopRequireDefault(require("@semcore/core/lib/utils/uniqueID"));
 var _react = _interopRequireDefault(require("react"));
 var _Trend = require("./Trend");
-/*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDonutContainer_1dzd1_gg_.__loading_1dzd1_gg_,.___SLineGauge_1dzd1_gg_.__loading_1dzd1_gg_,.___STrendBar_1dzd1_gg_.__loading_1dzd1_gg_,.___STrendLine_1dzd1_gg_.__loading_1dzd1_gg_{animation-name:pulse_1dzd1;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}@keyframes pulse_1dzd1{0%{opacity:1}50%{opacity:.4}to{opacity:1}}", /*__inner_css_end__*/"1dzd1_gg_"),
+/*!__reshadow-styles__:"../../styles/skeleton.shadow.css"*/
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDonutContainer_30y2p_gg_.__loading_30y2p_gg_,.___SLineGauge_30y2p_gg_.__loading_30y2p_gg_,.___STrendBar_30y2p_gg_.__loading_30y2p_gg_,.___STrendLine_30y2p_gg_.__loading_30y2p_gg_{animation-name:pulse_30y2p;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}@keyframes pulse_30y2p{0%{opacity:1}50%{opacity:.4}to{opacity:1}}", /*__inner_css_end__*/"30y2p_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SLineGauge": "___SLineGauge_1dzd1_gg_",
-  "_loading": "__loading_1dzd1_gg_",
-  "__SDonutContainer": "___SDonutContainer_1dzd1_gg_",
-  "__STrendLine": "___STrendLine_1dzd1_gg_",
-  "__STrendBar": "___STrendBar_1dzd1_gg_",
-  "@pulse": "pulse_1dzd1"
+  "__SLineGauge": "___SLineGauge_30y2p_gg_",
+  "_loading": "__loading_30y2p_gg_",
+  "__SDonutContainer": "___SDonutContainer_30y2p_gg_",
+  "__STrendLine": "___STrendLine_30y2p_gg_",
+  "__STrendBar": "___STrendBar_30y2p_gg_",
+  "@pulse": "pulse_30y2p"
 });
 class TrendLineRoot extends _Trend.Trend {
   get defaultData() {

package/lib/cjs/components/trend/Line.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Line.js","names":["_core","require","_baseComponents","_ariaProps","_resolveColorEnhance","_interopRequireDefault","_uniqueID","_react","_Trend","style","sstyled","insert","TrendLineRoot","Trend","defaultData","lastPointRadius","asProps","data","loading","svgWidth","lastPointColor","defaultWidth","svgHeight","defaultHeight","color","resolveColor","render","_ref","_ref2","STrendLine","Box","uid","withArea","animate","styles","points","length","step","i","push","__excludeProps","extractedAriaProps","extractAriaProps","default","createElement","cn","assignProps","containerRef","join","_defineProperty2","resolveColorEnhance","uniqueIDEnhancement","TrendLine","exports","createComponent","displayName","TrendArea","enhancements","wrapperProps","props"],"sources":["../../../../src/components/trend/Line.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, assignProps, Root, sstyled } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';\nimport React from 'react';\n\nimport { Trend } from './Trend';\nimport style from '../../styles/skeleton.shadow.css';\nimport type { NSMiniChart } from '../../types';\n\nclass TrendLineRoot extends Trend<\n  Intergalactic.InternalTypings.InferComponentProps<NSMiniChart.Trend.Line.Component>,\n  typeof TrendLineRoot.enhance,\n  NSMiniChart.Trend.Line.DefaultProps\n> {\n  static enhance = [resolveColorEnhance(), uniqueIDEnhancement()] as const;\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  } as const;\n\n  get defaultData(): number[] {\n    return [15, 70, 20, 85, 20];\n  }\n\n  get lastPointRadius(): number {\n    return this.asProps.lastPointRadius ?? 6;\n  }\n\n  get data(): number[] {\n    const { data, loading } = this.asProps;\n\n    if (loading) {\n      return this.defaultData;\n    }\n\n    return data;\n  }\n\n  override get svgWidth(): number {\n    return this.asProps.lastPointColor\n      ? this.defaultWidth + this.lastPointRadius\n      : this.defaultWidth;\n  }\n\n  override get svgHeight(): number {\n    return this.asProps.lastPointColor\n      ? this.defaultHeight + this.lastPointRadius\n      : this.defaultHeight;\n  }\n\n  get color() {\n    const { resolveColor, color = 'chart-palette-order-1', loading } = this.asProps;\n\n    if (loading) {\n      return resolveColor('skeleton-bg');\n    }\n\n    return resolveColor(color);\n  }\n\n  render() {\n    const STrendLine = Root;\n    const { uid, withArea, animate, lastPointColor, resolveColor, loading, styles } = this.asProps;\n\n    const points: string[] = [];\n    const length = this.data.length;\n    const step = this.defaultWidth / (length - 1);\n\n    for (let i = 0; i < length; i++) {\n      points.push(`${step * i},${this.defaultHeight - this.data[i]}`);\n    }\n    const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n    return sstyled(styles)(\n      <STrendLine render={Box} ref={this.containerRef} __excludeProps={['data', ...__excludeProps]}>\n        <svg\n          width='100%'\n          height='100%'\n          viewBox={`0 0 ${this.svgWidth} ${this.svgHeight}`}\n          role='img'\n          {...extractedAriaProps}\n        >\n          <polyline\n            points={points.join(' ')}\n            stroke={this.color}\n            strokeWidth='4'\n            fill='none'\n            clipPath={`url(#${uid})`}\n          />\n          {withArea && (\n            <polyline\n              points={`0,${this.defaultHeight} ${points.join(' ')} ${this.defaultWidth},${\n                this.defaultHeight\n              }`}\n              fill={this.color}\n              fillOpacity={0.2}\n              clipPath={`url(#${uid})`}\n            />\n          )}\n          {lastPointColor && !loading && (\n            <circle\n              cx={step * (length - 1)}\n              cy={this.defaultHeight - this.data[length - 1]}\n              r={this.lastPointRadius}\n              fill={resolveColor(lastPointColor)}\n              stroke={resolveColor('chart-grid-border')}\n              strokeWidth={4}\n              clipPath={`url(#${uid})`}\n            />\n          )}\n\n          {animate && !loading && (\n            <clipPath id={uid}>\n              <rect x='0' y='0' width='100%' height='100%' fill='black'>\n                <animate dur='500ms' attributeName='width' values='0;100%' />\n              </rect>\n            </clipPath>\n          )}\n        </svg>\n      </STrendLine>,\n    );\n  }\n}\n\n/**\n * MiniCharts.TrendLine\n *\n * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api#trend-charts|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}\n */\nexport const TrendLine = createComponent<NSMiniChart.Trend.Line.Component, typeof TrendLineRoot>(TrendLineRoot);\n\nTrendLine.displayName = 'MiniChart.TrendLine';\n\n/**\n * MiniCharts.TrendArea\n *\n * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api#trend-charts|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}\n */\nexport const TrendArea = createComponent<NSMiniChart.Trend.Line.Component, typeof TrendLineRoot>(\n  TrendLineRoot,\n  {},\n  {\n    enhancements: [\n      () => {\n        return {\n          wrapperProps: (props: NSMiniChart.Trend.Line.Props) => {\n            return assignProps(props, { withArea: true });\n          },\n        };\n      },\n    ],\n  },\n);\n\nTrendArea.displayName = 'MiniChart.TrendArea';\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/trend/Trend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Trend.js","names":["_core","require","_react","_interopRequireDefault","Trend","Component","constructor","args","_defineProperty2","default","width","height","React","createRef","componentDidMount","setSizes","componentDidUpdate","prevProps","w","props","h","data","defaultWidth","state","defaultHeight","svgWidth","svgHeight","containerRef","current","boundingClientRect","getBoundingClientRect","setState","exports"],"sources":["../../../../src/components/trend/Trend.tsx"],"sourcesContent":["import type { Intergalactic } from '@semcore/core';\nimport { Component } from '@semcore/core';\nimport React from 'react';\n\nimport type { NSMiniChart } from '../../types';\n\nexport abstract class Trend<\n  P extends Record<string, any>,\n  E extends readonly ((...args: any[]) => any)[],\n  DP extends Intergalactic.InternalTypings.ValidDefaultProps<DP, P> = never,\n> extends Component<P, E, Readonly<{}>, {}, NSMiniChart.Trend.CommonState, DP> {\n  state = {\n    width: 200,\n    height: 100,\n  };\n\n  containerRef = React.createRef<HTMLDivElement>();\n\n  componentDidMount() {\n    this.setSizes();\n  }\n\n  componentDidUpdate(prevProps: P) {\n    if (\n      prevProps.w !== this.props.w ||\n      prevProps.h !== this.props.h ||\n      prevProps.data !== this.props.data\n    ) {\n      this.setSizes();\n    }\n  }\n\n  get defaultWidth(): number {\n    const { width, height } = this.state;\n\n    return (width / height) * this.defaultHeight;\n  }\n\n  get defaultHeight(): number {\n    return 100;\n  }\n\n  get svgWidth(): number {\n    return this.defaultWidth;\n  }\n\n  get svgHeight(): number {\n    return this.defaultHeight;\n  }\n\n  setSizes() {\n    if (this.containerRef.current) {\n      const boundingClientRect = this.containerRef.current.getBoundingClientRect();\n\n      const { width, height } = boundingClientRect;\n\n      if (width > 0 && height > 0) {\n        this.setState({ width, height });\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAIO,MAAeG,KAAK,SAIjBC,eAAS,CAA4D;EAAAC,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAA,IAAAC,gBAAA,CAAAC,OAAA,iBACrE;MACNC,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE;IACV,CAAC;IAAA,IAAAH,gBAAA,CAAAC,OAAA,qCAEcG,cAAK,CAACC,SAAS,CAAiB,CAAC;EAAA;EAEhDC,iBAAiBA,CAAA,EAAG;IAClB,IAAI,CAACC,QAAQ,CAAC,CAAC;EACjB;EAEAC,kBAAkBA,CAACC,SAAY,EAAE;IAC/B,IACEA,SAAS,CAACC,CAAC,KAAK,IAAI,CAACC,KAAK,CAACD,CAAC,IAC5BD,SAAS,CAACG,CAAC,KAAK,IAAI,CAACD,KAAK,CAACC,CAAC,IAC5BH,SAAS,CAACI,IAAI,KAAK,IAAI,CAACF,KAAK,CAACE,IAAI,EAClC;MACA,IAAI,CAACN,QAAQ,CAAC,CAAC;IACjB;EACF;EAEA,IAAIO,YAAYA,CAAA,EAAW;IACzB,MAAM;MAAEZ,KAAK;MAAEC;IAAO,CAAC,GAAG,IAAI,CAACY,KAAK;IAEpC,OAAQb,KAAK,GAAGC,MAAM,GAAI,IAAI,CAACa,aAAa;EAC9C;EAEA,IAAIA,aAAaA,CAAA,EAAW;IAC1B,OAAO,GAAG;EACZ;EAEA,IAAIC,QAAQA,CAAA,EAAW;IACrB,OAAO,IAAI,CAACH,YAAY;EAC1B;EAEA,IAAII,SAASA,CAAA,EAAW;IACtB,OAAO,IAAI,CAACF,aAAa;EAC3B;EAEAT,QAAQA,CAAA,EAAG;IACT,IAAI,IAAI,CAACY,YAAY,CAACC,OAAO,EAAE;MAC7B,MAAMC,kBAAkB,GAAG,IAAI,CAACF,YAAY,CAACC,OAAO,CAACE,qBAAqB,CAAC,CAAC;MAE5E,MAAM;QAAEpB,KAAK;QAAEC;MAAO,CAAC,GAAGkB,kBAAkB;MAE5C,IAAInB,KAAK,GAAG,CAAC,IAAIC,MAAM,GAAG,CAAC,EAAE;QAC3B,IAAI,CAACoB,QAAQ,CAAC;UAAErB,KAAK;UAAEC;QAAO,CAAC,CAAC;MAClC;IACF;EACF;AACF;AAACqB,OAAA,CAAA5B,KAAA,GAAAA,KAAA","ignoreList":[]}

package/lib/cjs/components/trend/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Bar","require","_Line"],"sources":["../../../../src/components/trend/index.ts"],"sourcesContent":["export { TrendBar, TrendHistogram } from './Bar';\nexport { TrendLine, TrendArea } from './Line';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,IAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA","ignoreList":[]}

package/lib/cjs/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _score = require("./component/score");
-var _trend = require("./component/trend");
-const miniCharts = {
+var _score = require("./components/score");
+var _trend = require("./components/trend");
+var _default = exports.default = {
   TrendLine: _trend.TrendLine,
   TrendArea: _trend.TrendArea,
   TrendBar: _trend.TrendBar,
@@ -15,5 +15,4 @@ const miniCharts = {
   ScoreDonut: _score.ScoreDonut,
   ScoreLine: _score.ScoreLine
 };
-var _default = exports.default = miniCharts;
 //# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_score","require","_trend","miniCharts","TrendLine","TrendArea","TrendBar","TrendHistogram","ScoreSemiDonut","ScoreDonut","ScoreLine","_default","exports","default"],"sources":["../../src/index.ts"],"sourcesContent":["import { ScoreLine, ScoreDonut, ScoreSemiDonut } from './component/score';\nimport type { SegmentColor } from './component/score/Line.types';\nimport { TrendLine, TrendArea, TrendBar, TrendHistogram } from './component/trend';\n\nconst miniCharts: {\n  TrendLine: typeof TrendLine;\n  TrendArea: typeof TrendArea;\n  TrendBar: typeof TrendBar;\n  TrendHistogram: typeof TrendHistogram;\n  ScoreSemiDonut: typeof ScoreSemiDonut;\n  ScoreDonut: typeof ScoreDonut;\n  ScoreLine: typeof ScoreLine;\n} = {\n  TrendLine,\n  TrendArea,\n  TrendBar,\n  TrendHistogram,\n  ScoreSemiDonut,\n  ScoreDonut,\n  ScoreLine,\n};\n\nexport default miniCharts;\n\nexport type {\n  SegmentColor,\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AAEA,MAAME,UAQL,GAAG;EACFC,SAAS,EAATA,gBAAS;EACTC,SAAS,EAATA,gBAAS;EACTC,QAAQ,EAARA,eAAQ;EACRC,cAAc,EAAdA,qBAAc;EACdC,cAAc,EAAdA,qBAAc;EACdC,UAAU,EAAVA,iBAAU;EACVC,SAAS,EAATA;AACF,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaV,UAAU","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_score","require","_trend","_default","exports","default","TrendLine","TrendArea","TrendBar","TrendHistogram","ScoreSemiDonut","ScoreDonut","ScoreLine"],"sources":["../../src/index.ts"],"sourcesContent":["import { ScoreDonut, ScoreSemiDonut, ScoreLine } from './components/score';\nimport { TrendLine, TrendArea, TrendBar, TrendHistogram } from './components/trend';\nimport type { SegmentColor, NSMiniChart } from './types';\n\nexport default {\n  TrendLine,\n  TrendArea,\n  TrendBar,\n  TrendHistogram,\n  ScoreSemiDonut,\n  ScoreDonut,\n  ScoreLine,\n};\n\nexport type {\n  SegmentColor,\n  NSMiniChart,\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAAoF,IAAAE,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAGrE;EACbC,SAAS,EAATA,gBAAS;EACTC,SAAS,EAATA,gBAAS;EACTC,QAAQ,EAARA,eAAQ;EACRC,cAAc,EAAdA,qBAAc;EACdC,cAAc,EAAdA,qBAAc;EACdC,UAAU,EAAVA,iBAAU;EACVC,SAAS,EAATA;AACF,CAAC","ignoreList":[]}

package/lib/cjs/{component/score → styles}/donut.shadow.css

@@ -1,4 +1,4 @@
-@import '../skeleton/skeleton.shadow.css';
+@import './skeleton.shadow.css';
 
 SDonutContainer[semi] {
   g {

package/lib/cjs/styles/line.shadow.css

@@ -0,0 +1,62 @@
+@import './skeleton.shadow.css';
+
+SLineGauge {
+  height: 8px;
+  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;
+}
+
+SLineValue {
+  height: 8px;
+  border-radius: var(--intergalactic-chart-rounded, 2px) 0 0 var(--intergalactic-chart-rounded, 2px);
+}
+
+SLineValue[percent] {
+  width: var(--percent);
+}
+
+SLineValue[color], SLineSegmentItem[color] {
+  background-color: var(--color, var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)));
+}
+
+SLineGauge[segments] {
+  border-radius: var(--intergalactic-progress-bar-rounded, 6px);
+}
+
+SLineGaugeSegment, SAnimationLine {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+SLineSegmentItem:last-child {
+  margin-right: 0;
+  border-right: none;
+}
+
+SLineSegmentItem {
+  height: 8px;
+  background: transparent;
+  border-right-color: var(--intergalactic-chart-grid-border, #ffffff);
+  border-right-style: solid;
+  border-right-width: 1px;
+  box-sizing: content-box;
+}
+
+SAnimationLine {
+  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;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+}
+
+@keyframes move-line {
+  0% {transform: translateX(0);}
+  100% {transform: translateX(100%);}
+}

package/lib/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=types.js.map

package/lib/cjs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../src/types.ts"],"sourcesContent":["import type { NSBox } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n  ? Acc[number]\n  : Enumerate<N, [...Acc, Acc['length']]>;\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\ndeclare namespace NSMiniChart {\n  namespace Score {\n    type CommonProps = {\n      /**\n       * Value of score (in percents from 0 to 100) or count of selected segments (for Line with segments)\n       */\n      value: number;\n\n      /**\n       * Color of value\n       */\n      color?: string;\n\n      /**\n       * Color of background\n       */\n      baseBgColor?: string;\n\n      /**\n       * Flag to enable skeleton\n       * @default false\n       */\n      loading?: boolean;\n\n      /**\n       * Flag to enable animate of charts\n       * @default true\n       */\n      animate?: boolean;\n    };\n\n    namespace Donut {\n      type Props = NSBox.Props & NSMiniChart.Score.CommonProps;\n      type DefaultProps = {\n        animate: true;\n      };\n\n      type Component = Intergalactic.Component<'svg', Props>;\n    }\n\n    namespace Line {\n      type Props = NSBox.Props &\n        Intergalactic.InternalTypings.EfficientOmit<NSMiniChart.Score.CommonProps, 'value' | 'color'> &\n        (\n          | {\n            /**\n               * Value of score (in percents from 0 to 100) or count of selected segments (for Line with segments)\n               */\n            value: number;\n            /**\n               * Color of value\n               */\n            color?: NSMiniChart.Score.Line.Segment.Color;\n            /**\n               * Count of line segments\n               */\n            segments?: number;\n            /**\n               * We don't accept children in this way\n               */\n            children?: never;\n          }\n          | {\n            value?: never;\n            segments?: never;\n            color?: never;\n            children: React.ReactNode;\n          }\n        );\n      type DefaultProps = {\n        animate: true;\n      };\n\n      namespace Segment {\n        type Color = `chart-palette-order-${Range<1, 24>}`;\n        type Props = {\n          value: number;\n          /**\n           * Color of value\n           */\n          color: NSMiniChart.Score.Line.Segment.Color;\n        };\n\n        type Component = Intergalactic.Component<NSBox.Component, Props>;\n      }\n\n      type Component = ((\n        props: Props,\n      ) => Intergalactic.InternalTypings.ComponentRenderingResults &\n        Intergalactic.InternalTypings.ComponentAdditive<'svg', 'svg', Props>) & {\n          Segment: Segment.Component;\n        };\n    }\n  }\n\n  namespace Trend {\n    type CommonProps = NSBox.Props & {\n      /**\n       * Flag to enable animate of charts\n       * @default true\n       */\n      animate?: boolean;\n\n      /**\n       * Flag to enable skeleton\n       * @default false\n       */\n      loading?: boolean;\n\n      /**\n       * Data for chart\n       */\n      data: any[];\n    };\n    type CommonState = { width: number; height: number };\n\n    namespace Line {\n      type Props = NSMiniChart.Trend.CommonProps & {\n        /**\n         * List of values\n         */\n        data: number[];\n\n        /**\n         * Color of line\n         */\n        color?: string;\n\n        /**\n         * Color of last point in chart\n         */\n        lastPointColor?: string;\n\n        /**\n         * Radius for last point item\n         */\n        lastPointRadius?: number;\n      };\n      type DefaultProps = {\n        animate: true;\n      };\n\n      type Component = Intergalactic.Component<'svg', Props>;\n    }\n\n    namespace Bar {\n      type Item = {\n        /**\n         * Value\n         */\n        value: number;\n        /**\n         * Color of value\n         */\n        color?: string;\n      };\n      type Props = NSMiniChart.Trend.CommonProps & {\n        /**\n         * Data to bar chart\n         */\n        data: NSMiniChart.Trend.Bar.Item[];\n      };\n      type DefaultProps = {\n        animate: true;\n      };\n\n      type Component = Intergalactic.Component<'svg', Props>;\n    }\n  }\n}\n\nexport type { NSMiniChart };\n\n/** @deprecated It will be removed in v19. */\nexport type SegmentColor = NSMiniChart.Score.Line.Segment.Color;\n"],"mappings":"","ignoreList":[]}

package/lib/es6/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, oklch(0.88 0.002 175.6)));
+  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, oklch(0.58 0.168 278.2)));
+  background-color: var(--color, var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)));
 }
 
 SLineGauge[segments] {
@@ -41,14 +41,14 @@ SLineSegmentItem:last-child {
 SLineSegmentItem {
   height: 8px;
   background: transparent;
-  border-right-color: var(--intergalactic-chart-grid-border, #fff);
+  border-right-color: var(--intergalactic-chart-grid-border, #ffffff);
   border-right-style: solid;
   border-right-width: 1px;
   box-sizing: content-box;
 }
 
 SAnimationLine {
-  background-color: var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.88 0.002 175.6));
+  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/es6/{component → components}/score/Donut.js

@@ -7,18 +7,18 @@ 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 React from 'react';
-/*!__reshadow-styles__:"./donut.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SDonutContainer_fpn7q_gg_.__loading_fpn7q_gg_,.___SLineGauge_fpn7q_gg_.__loading_fpn7q_gg_,.___STrendBar_fpn7q_gg_.__loading_fpn7q_gg_,.___STrendLine_fpn7q_gg_.__loading_fpn7q_gg_{animation-name:pulse_fpn7q;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}@keyframes pulse_fpn7q{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SDonutContainer_fpn7q_gg_.__semi_fpn7q_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_fpn7q_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_fpn7q_gg_.__animate_fpn7q_gg_ circle{transition:all var(--intergalactic-duration-extra-slow,500) ease-in-out}", /*__inner_css_end__*/"fpn7q_gg_"),
+/*!__reshadow-styles__:"../../styles/donut.shadow.css"*/
+const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SDonutContainer_6nq9n_gg_.__loading_6nq9n_gg_,.___SLineGauge_6nq9n_gg_.__loading_6nq9n_gg_,.___STrendBar_6nq9n_gg_.__loading_6nq9n_gg_,.___STrendLine_6nq9n_gg_.__loading_6nq9n_gg_{animation-name:pulse_6nq9n;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}@keyframes pulse_6nq9n{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SDonutContainer_6nq9n_gg_.__semi_6nq9n_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_6nq9n_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_6nq9n_gg_.__animate_6nq9n_gg_ circle{transition:all var(--intergalactic-duration-extra-slow,500) ease-in-out}", /*__inner_css_end__*/"6nq9n_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SLineGauge": "___SLineGauge_fpn7q_gg_",
-  "_loading": "__loading_fpn7q_gg_",
-  "__SDonutContainer": "___SDonutContainer_fpn7q_gg_",
-  "__STrendLine": "___STrendLine_fpn7q_gg_",
-  "__STrendBar": "___STrendBar_fpn7q_gg_",
-  "@pulse": "pulse_fpn7q",
-  "_animate": "__animate_fpn7q_gg_",
-  "_semi": "__semi_fpn7q_gg_"
+  "__SLineGauge": "___SLineGauge_6nq9n_gg_",
+  "_loading": "__loading_6nq9n_gg_",
+  "__SDonutContainer": "___SDonutContainer_6nq9n_gg_",
+  "__STrendLine": "___STrendLine_6nq9n_gg_",
+  "__STrendBar": "___STrendBar_6nq9n_gg_",
+  "@pulse": "pulse_6nq9n",
+  "_animate": "__animate_6nq9n_gg_",
+  "_semi": "__semi_6nq9n_gg_"
 });
 import { ScoreDonutUtils } from '../../utils/ScoreDonutUtils';
 class DonutRoot extends Component {

package/lib/es6/components/score/Donut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Donut.js","names":["Box","createComponent","Component","Root","sstyled","assignProps","extractAriaProps","resolveColorEnhance","cssVariableEnhance","React","style","_sstyled","insert","ScoreDonutUtils","DonutRoot","render","_ref","asProps","_ref2","SDonutContainer","value","styles","baseBgColor","color","resolveColor","isSemiDonut","loading","animate","duration","scoreDonut","__excludeProps","extractedAriaProps","createElement","cn","_assignProps","viewBox","radius","strokeWidth","undefined","baseLength","fullLength","baseOffset","Fragment","animatedBaseLengthFrom","animatedBaseLengthTo","startMargin","valueLength","_defineProperty","variable","fallback","map","v","Number","parseInt","toString","prop","ScoreDonut","displayName","ScoreSemiDonut","enhancements","wrapperProps","props"],"sources":["../../../../src/components/score/Donut.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, Root, sstyled, assignProps } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport React from 'react';\n\nimport style from '../../styles/donut.shadow.css';\nimport type { NSMiniChart } from '../../types';\nimport { ScoreDonutUtils } from '../../utils/ScoreDonutUtils';\n\nclass DonutRoot extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSMiniChart.Score.Donut.Component>,\n  typeof DonutRoot.enhance,\n  {},\n  {},\n  {},\n  NSMiniChart.Score.Donut.DefaultProps\n> {\n  static enhance = [\n    cssVariableEnhance({\n      variable: '--intergalactic-duration-extra-slow',\n      fallback: '500',\n      map: (v: string) => Number.parseInt(v, 10).toString(),\n      prop: 'duration',\n    }),\n    resolveColorEnhance(),\n  ] as const;\n\n  static style = style;\n\n  static defaultProps = {\n    animate: true,\n  } as const;\n\n  render() {\n    const SDonutContainer = Root;\n    const {\n      value,\n      styles,\n      baseBgColor = 'chart-grid-bar-chart-base-bg',\n      color = 'chart-palette-order-1',\n      resolveColor,\n      isSemiDonut,\n      loading,\n      animate,\n      duration,\n    } = this.asProps;\n\n    const scoreDonut = new ScoreDonutUtils(value, isSemiDonut);\n    const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n    return sstyled(styles)(\n      <SDonutContainer render={Box} semi={isSemiDonut} __excludeProps={__excludeProps}>\n        <svg\n          width='100%'\n          height='100%'\n          viewBox={scoreDonut.viewBox}\n          fill='none'\n          role='img'\n          {...extractedAriaProps}\n        >\n          <g>\n            <circle\n              cx='12'\n              cy='12'\n              r={scoreDonut.radius}\n              strokeWidth={scoreDonut.strokeWidth}\n              stroke={resolveColor(baseBgColor)}\n              strokeDasharray={\n                loading\n                  ? undefined\n                  : `${scoreDonut.baseLength} ${scoreDonut.fullLength}`\n              }\n              strokeDashoffset={scoreDonut.baseOffset}\n            >\n              {animate && value > 0 && (\n                <>\n                  <animate\n                    attributeName='stroke-dasharray'\n                    from={`${scoreDonut.animatedBaseLengthFrom} ${scoreDonut.fullLength}`}\n                    to={`${scoreDonut.animatedBaseLengthTo} ${scoreDonut.fullLength}`}\n                    dur={duration + 'ms'}\n                  />\n                  <animate\n                    attributeName='stroke-dashoffset'\n                    from={-1 * scoreDonut.startMargin}\n                    to={scoreDonut.baseOffset}\n                    dur={duration + 'ms'}\n                  />\n                </>\n              )}\n            </circle>\n            {!loading && value > 0 && (\n              <>\n                <circle\n                  cx='12'\n                  cy='12'\n                  r={scoreDonut.radius}\n                  strokeWidth={scoreDonut.strokeWidth}\n                  stroke={resolveColor(color)}\n                  strokeDasharray={`${scoreDonut.valueLength} ${scoreDonut.fullLength}`}\n                >\n                  {animate && (\n                    <animate\n                      attributeName='stroke-dasharray'\n                      from={`0 ${scoreDonut.fullLength}`}\n                      to={`${scoreDonut.valueLength} ${scoreDonut.fullLength}`}\n                      dur={duration + 'ms'}\n                    />\n                  )}\n                </circle>\n              </>\n            )}\n          </g>\n        </svg>\n      </SDonutContainer>,\n    );\n  }\n}\n\n/**\n * MiniCharts.ScoreDount\n *\n * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}\n */\nexport const ScoreDonut = createComponent<\n  NSMiniChart.Score.Donut.Component,\n  typeof DonutRoot\n>(DonutRoot);\n\nScoreDonut.displayName = 'MiniChart.ScoreDonut';\n\n/**\n * MiniCharts.ScoreSemiDount\n *\n * {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-api|API} | {@link https://developer.semrush.com/intergalactic/data-display/mini-chart/mini-chart-code|Examples}\n */\nexport const ScoreSemiDonut = createComponent<\n  NSMiniChart.Score.Donut.Component,\n  typeof DonutRoot\n>(\n  DonutRoot,\n  {},\n  {\n    enhancements: [\n      () => {\n        return {\n          wrapperProps: (props: NSMiniChart.Score.Donut.Props) => {\n            return assignProps(props, { isSemiDonut: true });\n          },\n        };\n      },\n    ],\n  },\n);\n\nScoreSemiDonut.displayName = 'MiniChart.ScoreSemiDonut';\n"],"mappings":"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","ignoreList":[]}