rbro-tat-uds 2.0.0 → 2.1.0

package/build/cjs/components/Bar/Bar.cjs

@@ -16,37 +16,41 @@ const StyledBar = styled.div`
   width: 100%;
   position: relative;
   overflow: hidden;
+  display: flex;
   height: ${(props) => props.$height && _constraint_height.includes(props.$height) ? props.$height + "px" : "24px"};
-  background-color: ${(props) => props.$rightColor && Object.keys(utils.colors).includes(props.$rightColor) ? utils.colors[props.$rightColor] : utils.colors.gray_60};
+  background-color: ${(props) => props.$backgroundColor && Object.keys(utils.colors).includes(props.$backgroundColor) ? utils.colors[props.$backgroundColor] : utils.colors.gray_60};
   border-radius: ${(props) => props.$radius && _constraint_radius.includes(props.$radius) ? props.$radius + "px" : "4px"};
-
-  &:after {
-    content: "";
-    width: ${(props) => typeof props.$value === "number" ? props.$value * 100 + "%" : "50%"};
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-color: ${(props) => props.$leftColor && Object.keys(utils.colors).includes(props.$leftColor) ? utils.colors[props.$leftColor] : utils.colors.gray_950};
-  }
 `;
 const Bar = ({
-  value = 0,
-  leftColor = "gray_950",
-  rightColor = "gray_60",
   height = 24,
   radius = 4,
+  backgroundColor = "gray_60",
+  max = 100,
+  items = [],
   ...rest
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     StyledBar,
     {
-      $value: value,
-      $leftColor: leftColor,
-      $rightColor: rightColor,
+      $backgroundColor: backgroundColor,
       $height: height,
       $radius: radius,
-      ...rest
+      ...rest,
+      children: items.length > 0 && items.map((item, index) => {
+        const thisColor = utils.colors[item.color] || utils.colors.gray_950;
+        const percentage = item.value / max * 100;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              width: `${percentage}%`,
+              height: "100%",
+              backgroundColor: thisColor
+            }
+          },
+          index
+        );
+      })
     }
   );
 };

package/build/cjs/components/UnitlinkGraph/UnitlinkGraph.cjs

@@ -61,6 +61,7 @@ const UnitLinkGraphStyled = styled.svg`
 const UnitLinkGraph = ({
   height = 0,
   barMainConfiguration = {
+    followSlider: false,
     header: "Placeholder",
     color_primary: utils.colors.purple_600,
     color_secondary: utils.colors.purple_50,
@@ -73,9 +74,16 @@ const UnitLinkGraph = ({
       }
     ]
   },
+  setBarMainActionsActive = () => {
+  },
+  barMainActionsActive = 0,
   barSecondaryConfiguration,
+  setBarSecondaryActionsActive = () => {
+  },
+  barSecondaryActionsActive = 0,
   initialSliderValue = 0,
   maximum_ani = 7,
+  limit_ani = 7,
   timeline_texts = {
     left: "Placeholder"
   },
@@ -90,6 +98,13 @@ const UnitLinkGraph = ({
   const [mainWidth, setMainWidth] = React.useState(0);
   const [mainStart, setMainStart] = React.useState(0);
   const [sliderValue, setSliderValue] = React.useState(initialSliderValue);
+  const place_at_ani = React.useMemo(() => {
+    if (barMainConfiguration.followSlider) {
+      return sliderValue;
+    } else {
+      return barMainConfiguration.place_at_ani;
+    }
+  }, [barMainConfiguration, sliderValue]);
   const configurations = React.useMemo(() => {
     return {
       mainGap: 16,
@@ -332,7 +347,7 @@ const UnitLinkGraph = ({
     ({ mainHeight }) => {
       const MANY_SEGMENTS_PER_YEAR = 2;
       const segments_count = (configurations.area.indicators.count - 1) * MANY_SEGMENTS_PER_YEAR;
-      const segments_render = barMainConfiguration.place_at_ani * 2;
+      const segments_render = place_at_ani * 2;
       const segments_padding_y = 4.5;
       const segments_y = floorToHalf(
         totalHeight - mainHeight + segments_padding_y + configurations.mainGap
@@ -370,13 +385,7 @@ const UnitLinkGraph = ({
         }
       };
     },
-    [
-      mainWidth,
-      mainStart,
-      configurations,
-      totalHeight,
-      barMainConfiguration.place_at_ani
-    ]
+    [mainWidth, mainStart, configurations, totalHeight, place_at_ani]
   );
   const computeAction = React.useCallback(
     ({
@@ -430,7 +439,7 @@ const UnitLinkGraph = ({
       mainHeightGraph,
       config: barMainConfiguration,
       getPointsPositionIndicatorX,
-      place_at: barMainConfiguration.place_at_ani,
+      place_at: place_at_ani,
       main: true
     });
     let bar_secondary;
@@ -493,62 +502,68 @@ const UnitLinkGraph = ({
       },
       ...rest,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "line",
-          {
-            x1: graph.main.area.part_1.x1,
-            x2: graph.main.area.part_1.x2,
-            y1: graph.main.area.part_1.y1,
-            y2: graph.main.area.part_1.y2,
-            strokeWidth: graph.main.area.part_1.strokeWidth,
-            stroke: graph.main.bars.main.colorPrimary
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "line",
-          {
-            x1: graph.main.area.part_2.x1,
-            x2: graph.main.area.part_2.x2,
-            y1: graph.main.area.part_2.y1,
-            y2: graph.main.area.part_2.y2,
-            strokeWidth: graph.main.area.part_2.strokeWidth,
-            stroke: graph.main.bars.main.colorPrimary
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "line",
-          {
-            x1: graph.main.area.part_3.x1,
-            x2: graph.main.area.part_3.x2,
-            y1: graph.main.area.part_3.y1,
-            y2: graph.main.area.part_3.y2,
-            strokeWidth: graph.main.area.part_3.strokeWidth,
-            stroke: graph.main.bars.main.colorPrimary
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "polygon",
-          {
-            points: `
+        place_at_ani > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              x1: graph.main.area.part_1.x1,
+              x2: graph.main.area.part_1.x2,
+              y1: graph.main.area.part_1.y1,
+              y2: graph.main.area.part_1.y2,
+              strokeWidth: graph.main.area.part_1.strokeWidth,
+              stroke: graph.main.bars.main.colorPrimary
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              x1: graph.main.area.part_2.x1,
+              x2: graph.main.area.part_2.x2,
+              y1: graph.main.area.part_2.y1,
+              y2: graph.main.area.part_2.y2,
+              strokeWidth: graph.main.area.part_2.strokeWidth,
+              stroke: graph.main.bars.main.colorPrimary
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              x1: graph.main.area.part_3.x1,
+              x2: graph.main.area.part_3.x2,
+              y1: graph.main.area.part_3.y1,
+              y2: graph.main.area.part_3.y2,
+              strokeWidth: graph.main.area.part_3.strokeWidth,
+              stroke: graph.main.bars.main.colorPrimary
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "polygon",
+            {
+              points: `
             ${graph.main.area.part_2.x2},${graph.main.bars.main.filled_y + 1.5} 
             ${graph.main.area.part_3.x2},${graph.main.bars.main.filled_y + 1.5}
             ${graph.main.area.part_3.x2},${graph.mainHeightGraph} 
             ${graph.main.area.part_2.x1},${graph.mainHeightGraph}`,
-            fill: graph.main.bars.main.colorSecondary
-          }
-        ),
+              fill: graph.main.bars.main.colorSecondary
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           RenderBar,
           {
             bar: graph.main.bars.main,
-            textLineHeight: configurations.bars.actionsTextLineHeight
+            textLineHeight: configurations.bars.actionsTextLineHeight,
+            activeAction: barMainActionsActive,
+            setActiveAction: (value) => setBarMainActionsActive(value)
           }
         ),
         graph.main.bars.secondary && /* @__PURE__ */ jsxRuntime.jsx(
           RenderBar,
           {
             bar: graph.main.bars.secondary,
-            textLineHeight: configurations.bars.actionsTextLineHeight
+            textLineHeight: configurations.bars.actionsTextLineHeight,
+            activeAction: barSecondaryActionsActive,
+            setActiveAction: (value) => setBarSecondaryActionsActive(value)
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -658,15 +673,20 @@ const UnitLinkGraph = ({
             max: configurations.area.indicators.count - 1,
             value: sliderValue,
             onChange: setSliderValue,
-            limit: barMainConfiguration.place_at_ani
+            limit: limit_ani
           }
         )
       ]
     }
   );
 };
-const RenderBar = ({ bar, textLineHeight }) => {
-  const [activeBar, setActiveBar] = React.useState(0);
+const RenderBar = ({
+  bar,
+  textLineHeight,
+  activeAction = 0,
+  setActiveAction = () => {
+  }
+}) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
@@ -702,12 +722,12 @@ const RenderBar = ({ bar, textLineHeight }) => {
       }
     ),
     bar.barActions.actions.map((action, index) => {
-      const isActive = activeBar === index;
+      const isActive = activeAction === index;
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "g",
         {
           className: "bar-actions-group",
-          onClick: () => setActiveBar(index),
+          onClick: () => setActiveAction(index),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "rect",

package/build/cjs/index.cjs

@@ -2769,37 +2769,41 @@ const StyledBar = styled__default.default.div`
   width: 100%;
   position: relative;
   overflow: hidden;
+  display: flex;
   height: ${(props) => props.$height && _constraint_height$1.includes(props.$height) ? props.$height + "px" : "24px"};
-  background-color: ${(props) => props.$rightColor && Object.keys(utils.colors).includes(props.$rightColor) ? utils.colors[props.$rightColor] : utils.colors.gray_60};
+  background-color: ${(props) => props.$backgroundColor && Object.keys(utils.colors).includes(props.$backgroundColor) ? utils.colors[props.$backgroundColor] : utils.colors.gray_60};
   border-radius: ${(props) => props.$radius && _constraint_radius.includes(props.$radius) ? props.$radius + "px" : "4px"};
-
-  &:after {
-    content: "";
-    width: ${(props) => typeof props.$value === "number" ? props.$value * 100 + "%" : "50%"};
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-color: ${(props) => props.$leftColor && Object.keys(utils.colors).includes(props.$leftColor) ? utils.colors[props.$leftColor] : utils.colors.gray_950};
-  }
 `;
 const Bar = ({
-  value = 0,
-  leftColor = "gray_950",
-  rightColor = "gray_60",
   height = 24,
   radius = 4,
+  backgroundColor = "gray_60",
+  max = 100,
+  items = [],
   ...rest
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     StyledBar,
     {
-      $value: value,
-      $leftColor: leftColor,
-      $rightColor: rightColor,
+      $backgroundColor: backgroundColor,
       $height: height,
       $radius: radius,
-      ...rest
+      ...rest,
+      children: items.length > 0 && items.map((item, index) => {
+        const thisColor = utils.colors[item.color] || utils.colors.gray_950;
+        const percentage = item.value / max * 100;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              width: `${percentage}%`,
+              height: "100%",
+              backgroundColor: thisColor
+            }
+          },
+          index
+        );
+      })
     }
   );
 };
@@ -24437,6 +24441,7 @@ const UnitLinkGraphStyled = styled__default.default.svg`
 const UnitLinkGraph = ({
   height = 0,
   barMainConfiguration = {
+    followSlider: false,
     header: "Placeholder",
     color_primary: utils.colors.purple_600,
     color_secondary: utils.colors.purple_50,
@@ -24449,9 +24454,16 @@ const UnitLinkGraph = ({
       }
     ]
   },
+  setBarMainActionsActive = () => {
+  },
+  barMainActionsActive = 0,
   barSecondaryConfiguration,
+  setBarSecondaryActionsActive = () => {
+  },
+  barSecondaryActionsActive = 0,
   initialSliderValue = 0,
   maximum_ani = 7,
+  limit_ani = 7,
   timeline_texts = {
     left: "Placeholder"
   },
@@ -24466,6 +24478,13 @@ const UnitLinkGraph = ({
   const [mainWidth, setMainWidth] = React.useState(0);
   const [mainStart, setMainStart] = React.useState(0);
   const [sliderValue, setSliderValue] = React.useState(initialSliderValue);
+  const place_at_ani = React.useMemo(() => {
+    if (barMainConfiguration.followSlider) {
+      return sliderValue;
+    } else {
+      return barMainConfiguration.place_at_ani;
+    }
+  }, [barMainConfiguration, sliderValue]);
   const configurations = React.useMemo(() => {
     return {
       mainGap: 16,
@@ -24708,7 +24727,7 @@ const UnitLinkGraph = ({
     ({ mainHeight }) => {
       const MANY_SEGMENTS_PER_YEAR = 2;
       const segments_count = (configurations.area.indicators.count - 1) * MANY_SEGMENTS_PER_YEAR;
-      const segments_render = barMainConfiguration.place_at_ani * 2;
+      const segments_render = place_at_ani * 2;
       const segments_padding_y = 4.5;
       const segments_y = floorToHalf(
         totalHeight - mainHeight + segments_padding_y + configurations.mainGap
@@ -24746,13 +24765,7 @@ const UnitLinkGraph = ({
         }
       };
     },
-    [
-      mainWidth,
-      mainStart,
-      configurations,
-      totalHeight,
-      barMainConfiguration.place_at_ani
-    ]
+    [mainWidth, mainStart, configurations, totalHeight, place_at_ani]
   );
   const computeAction = React.useCallback(
     ({
@@ -24806,7 +24819,7 @@ const UnitLinkGraph = ({
       mainHeightGraph,
       config: barMainConfiguration,
       getPointsPositionIndicatorX,
-      place_at: barMainConfiguration.place_at_ani,
+      place_at: place_at_ani,
       main: true
     });
     let bar_secondary;
@@ -24869,62 +24882,68 @@ const UnitLinkGraph = ({
       },
       ...rest,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "line",
-          {
-            x1: graph.main.area.part_1.x1,
-            x2: graph.main.area.part_1.x2,
-            y1: graph.main.area.part_1.y1,
-            y2: graph.main.area.part_1.y2,
-            strokeWidth: graph.main.area.part_1.strokeWidth,
-            stroke: graph.main.bars.main.colorPrimary
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "line",
-          {
-            x1: graph.main.area.part_2.x1,
-            x2: graph.main.area.part_2.x2,
-            y1: graph.main.area.part_2.y1,
-            y2: graph.main.area.part_2.y2,
-            strokeWidth: graph.main.area.part_2.strokeWidth,
-            stroke: graph.main.bars.main.colorPrimary
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "line",
-          {
-            x1: graph.main.area.part_3.x1,
-            x2: graph.main.area.part_3.x2,
-            y1: graph.main.area.part_3.y1,
-            y2: graph.main.area.part_3.y2,
-            strokeWidth: graph.main.area.part_3.strokeWidth,
-            stroke: graph.main.bars.main.colorPrimary
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "polygon",
-          {
-            points: `
+        place_at_ani > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              x1: graph.main.area.part_1.x1,
+              x2: graph.main.area.part_1.x2,
+              y1: graph.main.area.part_1.y1,
+              y2: graph.main.area.part_1.y2,
+              strokeWidth: graph.main.area.part_1.strokeWidth,
+              stroke: graph.main.bars.main.colorPrimary
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              x1: graph.main.area.part_2.x1,
+              x2: graph.main.area.part_2.x2,
+              y1: graph.main.area.part_2.y1,
+              y2: graph.main.area.part_2.y2,
+              strokeWidth: graph.main.area.part_2.strokeWidth,
+              stroke: graph.main.bars.main.colorPrimary
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              x1: graph.main.area.part_3.x1,
+              x2: graph.main.area.part_3.x2,
+              y1: graph.main.area.part_3.y1,
+              y2: graph.main.area.part_3.y2,
+              strokeWidth: graph.main.area.part_3.strokeWidth,
+              stroke: graph.main.bars.main.colorPrimary
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "polygon",
+            {
+              points: `
             ${graph.main.area.part_2.x2},${graph.main.bars.main.filled_y + 1.5} 
             ${graph.main.area.part_3.x2},${graph.main.bars.main.filled_y + 1.5}
             ${graph.main.area.part_3.x2},${graph.mainHeightGraph} 
             ${graph.main.area.part_2.x1},${graph.mainHeightGraph}`,
-            fill: graph.main.bars.main.colorSecondary
-          }
-        ),
+              fill: graph.main.bars.main.colorSecondary
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           RenderBar,
           {
             bar: graph.main.bars.main,
-            textLineHeight: configurations.bars.actionsTextLineHeight
+            textLineHeight: configurations.bars.actionsTextLineHeight,
+            activeAction: barMainActionsActive,
+            setActiveAction: (value) => setBarMainActionsActive(value)
           }
         ),
         graph.main.bars.secondary && /* @__PURE__ */ jsxRuntime.jsx(
           RenderBar,
           {
             bar: graph.main.bars.secondary,
-            textLineHeight: configurations.bars.actionsTextLineHeight
+            textLineHeight: configurations.bars.actionsTextLineHeight,
+            activeAction: barSecondaryActionsActive,
+            setActiveAction: (value) => setBarSecondaryActionsActive(value)
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -25034,15 +25053,20 @@ const UnitLinkGraph = ({
             max: configurations.area.indicators.count - 1,
             value: sliderValue,
             onChange: setSliderValue,
-            limit: barMainConfiguration.place_at_ani
+            limit: limit_ani
           }
         )
       ]
     }
   );
 };
-const RenderBar = ({ bar, textLineHeight }) => {
-  const [activeBar, setActiveBar] = React.useState(0);
+const RenderBar = ({
+  bar,
+  textLineHeight,
+  activeAction = 0,
+  setActiveAction = () => {
+  }
+}) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
@@ -25078,12 +25102,12 @@ const RenderBar = ({ bar, textLineHeight }) => {
       }
     ),
     bar.barActions.actions.map((action, index) => {
-      const isActive = activeBar === index;
+      const isActive = activeAction === index;
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "g",
         {
           className: "bar-actions-group",
-          onClick: () => setActiveBar(index),
+          onClick: () => setActiveAction(index),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "rect",

package/build/esm/components/Bar/Bar.js

@@ -12,37 +12,41 @@ const StyledBar = styled.div`
   width: 100%;
   position: relative;
   overflow: hidden;
+  display: flex;
   height: ${(props) => props.$height && _constraint_height.includes(props.$height) ? props.$height + "px" : "24px"};
-  background-color: ${(props) => props.$rightColor && Object.keys(colors).includes(props.$rightColor) ? colors[props.$rightColor] : colors.gray_60};
+  background-color: ${(props) => props.$backgroundColor && Object.keys(colors).includes(props.$backgroundColor) ? colors[props.$backgroundColor] : colors.gray_60};
   border-radius: ${(props) => props.$radius && _constraint_radius.includes(props.$radius) ? props.$radius + "px" : "4px"};
-
-  &:after {
-    content: "";
-    width: ${(props) => typeof props.$value === "number" ? props.$value * 100 + "%" : "50%"};
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-color: ${(props) => props.$leftColor && Object.keys(colors).includes(props.$leftColor) ? colors[props.$leftColor] : colors.gray_950};
-  }
 `;
 const Bar = ({
-  value = 0,
-  leftColor = "gray_950",
-  rightColor = "gray_60",
   height = 24,
   radius = 4,
+  backgroundColor = "gray_60",
+  max = 100,
+  items = [],
   ...rest
 }) => {
   return /* @__PURE__ */ jsx(
     StyledBar,
     {
-      $value: value,
-      $leftColor: leftColor,
-      $rightColor: rightColor,
+      $backgroundColor: backgroundColor,
       $height: height,
       $radius: radius,
-      ...rest
+      ...rest,
+      children: items.length > 0 && items.map((item, index) => {
+        const thisColor = colors[item.color] || colors.gray_950;
+        const percentage = item.value / max * 100;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: `${percentage}%`,
+              height: "100%",
+              backgroundColor: thisColor
+            }
+          },
+          index
+        );
+      })
     }
   );
 };

package/build/esm/components/UnitlinkGraph/UnitlinkGraph.js

@@ -1,7 +1,7 @@
 "use strict";
 "use client";
 
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useMemo, useRef, useState, useEffect, useCallback } from 'react';
 import styled from 'styled-components';
 import { colors } from '../../utils';
@@ -57,6 +57,7 @@ const UnitLinkGraphStyled = styled.svg`
 const UnitLinkGraph = ({
   height = 0,
   barMainConfiguration = {
+    followSlider: false,
     header: "Placeholder",
     color_primary: colors.purple_600,
     color_secondary: colors.purple_50,
@@ -69,9 +70,16 @@ const UnitLinkGraph = ({
       }
     ]
   },
+  setBarMainActionsActive = () => {
+  },
+  barMainActionsActive = 0,
   barSecondaryConfiguration,
+  setBarSecondaryActionsActive = () => {
+  },
+  barSecondaryActionsActive = 0,
   initialSliderValue = 0,
   maximum_ani = 7,
+  limit_ani = 7,
   timeline_texts = {
     left: "Placeholder"
   },
@@ -86,6 +94,13 @@ const UnitLinkGraph = ({
   const [mainWidth, setMainWidth] = useState(0);
   const [mainStart, setMainStart] = useState(0);
   const [sliderValue, setSliderValue] = useState(initialSliderValue);
+  const place_at_ani = useMemo(() => {
+    if (barMainConfiguration.followSlider) {
+      return sliderValue;
+    } else {
+      return barMainConfiguration.place_at_ani;
+    }
+  }, [barMainConfiguration, sliderValue]);
   const configurations = useMemo(() => {
     return {
       mainGap: 16,
@@ -328,7 +343,7 @@ const UnitLinkGraph = ({
     ({ mainHeight }) => {
       const MANY_SEGMENTS_PER_YEAR = 2;
       const segments_count = (configurations.area.indicators.count - 1) * MANY_SEGMENTS_PER_YEAR;
-      const segments_render = barMainConfiguration.place_at_ani * 2;
+      const segments_render = place_at_ani * 2;
       const segments_padding_y = 4.5;
       const segments_y = floorToHalf(
         totalHeight - mainHeight + segments_padding_y + configurations.mainGap
@@ -366,13 +381,7 @@ const UnitLinkGraph = ({
         }
       };
     },
-    [
-      mainWidth,
-      mainStart,
-      configurations,
-      totalHeight,
-      barMainConfiguration.place_at_ani
-    ]
+    [mainWidth, mainStart, configurations, totalHeight, place_at_ani]
   );
   const computeAction = useCallback(
     ({
@@ -426,7 +435,7 @@ const UnitLinkGraph = ({
       mainHeightGraph,
       config: barMainConfiguration,
       getPointsPositionIndicatorX,
-      place_at: barMainConfiguration.place_at_ani,
+      place_at: place_at_ani,
       main: true
     });
     let bar_secondary;
@@ -489,62 +498,68 @@ const UnitLinkGraph = ({
       },
       ...rest,
       children: [
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: graph.main.area.part_1.x1,
-            x2: graph.main.area.part_1.x2,
-            y1: graph.main.area.part_1.y1,
-            y2: graph.main.area.part_1.y2,
-            strokeWidth: graph.main.area.part_1.strokeWidth,
-            stroke: graph.main.bars.main.colorPrimary
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: graph.main.area.part_2.x1,
-            x2: graph.main.area.part_2.x2,
-            y1: graph.main.area.part_2.y1,
-            y2: graph.main.area.part_2.y2,
-            strokeWidth: graph.main.area.part_2.strokeWidth,
-            stroke: graph.main.bars.main.colorPrimary
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: graph.main.area.part_3.x1,
-            x2: graph.main.area.part_3.x2,
-            y1: graph.main.area.part_3.y1,
-            y2: graph.main.area.part_3.y2,
-            strokeWidth: graph.main.area.part_3.strokeWidth,
-            stroke: graph.main.bars.main.colorPrimary
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "polygon",
-          {
-            points: `
+        place_at_ani > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: graph.main.area.part_1.x1,
+              x2: graph.main.area.part_1.x2,
+              y1: graph.main.area.part_1.y1,
+              y2: graph.main.area.part_1.y2,
+              strokeWidth: graph.main.area.part_1.strokeWidth,
+              stroke: graph.main.bars.main.colorPrimary
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: graph.main.area.part_2.x1,
+              x2: graph.main.area.part_2.x2,
+              y1: graph.main.area.part_2.y1,
+              y2: graph.main.area.part_2.y2,
+              strokeWidth: graph.main.area.part_2.strokeWidth,
+              stroke: graph.main.bars.main.colorPrimary
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: graph.main.area.part_3.x1,
+              x2: graph.main.area.part_3.x2,
+              y1: graph.main.area.part_3.y1,
+              y2: graph.main.area.part_3.y2,
+              strokeWidth: graph.main.area.part_3.strokeWidth,
+              stroke: graph.main.bars.main.colorPrimary
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "polygon",
+            {
+              points: `
             ${graph.main.area.part_2.x2},${graph.main.bars.main.filled_y + 1.5} 
             ${graph.main.area.part_3.x2},${graph.main.bars.main.filled_y + 1.5}
             ${graph.main.area.part_3.x2},${graph.mainHeightGraph} 
             ${graph.main.area.part_2.x1},${graph.mainHeightGraph}`,
-            fill: graph.main.bars.main.colorSecondary
-          }
-        ),
+              fill: graph.main.bars.main.colorSecondary
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(
           RenderBar,
           {
             bar: graph.main.bars.main,
-            textLineHeight: configurations.bars.actionsTextLineHeight
+            textLineHeight: configurations.bars.actionsTextLineHeight,
+            activeAction: barMainActionsActive,
+            setActiveAction: (value) => setBarMainActionsActive(value)
           }
         ),
         graph.main.bars.secondary && /* @__PURE__ */ jsx(
           RenderBar,
           {
             bar: graph.main.bars.secondary,
-            textLineHeight: configurations.bars.actionsTextLineHeight
+            textLineHeight: configurations.bars.actionsTextLineHeight,
+            activeAction: barSecondaryActionsActive,
+            setActiveAction: (value) => setBarSecondaryActionsActive(value)
           }
         ),
         /* @__PURE__ */ jsx(
@@ -654,15 +669,20 @@ const UnitLinkGraph = ({
             max: configurations.area.indicators.count - 1,
             value: sliderValue,
             onChange: setSliderValue,
-            limit: barMainConfiguration.place_at_ani
+            limit: limit_ani
           }
         )
       ]
     }
   );
 };
-const RenderBar = ({ bar, textLineHeight }) => {
-  const [activeBar, setActiveBar] = useState(0);
+const RenderBar = ({
+  bar,
+  textLineHeight,
+  activeAction = 0,
+  setActiveAction = () => {
+  }
+}) => {
   return /* @__PURE__ */ jsxs("g", { children: [
     /* @__PURE__ */ jsx(
       "rect",
@@ -698,12 +718,12 @@ const RenderBar = ({ bar, textLineHeight }) => {
       }
     ),
     bar.barActions.actions.map((action, index) => {
-      const isActive = activeBar === index;
+      const isActive = activeAction === index;
       return /* @__PURE__ */ jsxs(
         "g",
         {
           className: "bar-actions-group",
-          onClick: () => setActiveBar(index),
+          onClick: () => setActiveAction(index),
           children: [
             /* @__PURE__ */ jsx(
               "rect",

package/build/esm/index.js

@@ -2746,37 +2746,41 @@ const StyledBar = styled.div`
   width: 100%;
   position: relative;
   overflow: hidden;
+  display: flex;
   height: ${(props) => props.$height && _constraint_height$1.includes(props.$height) ? props.$height + "px" : "24px"};
-  background-color: ${(props) => props.$rightColor && Object.keys(colors).includes(props.$rightColor) ? colors[props.$rightColor] : colors.gray_60};
+  background-color: ${(props) => props.$backgroundColor && Object.keys(colors).includes(props.$backgroundColor) ? colors[props.$backgroundColor] : colors.gray_60};
   border-radius: ${(props) => props.$radius && _constraint_radius.includes(props.$radius) ? props.$radius + "px" : "4px"};
-
-  &:after {
-    content: "";
-    width: ${(props) => typeof props.$value === "number" ? props.$value * 100 + "%" : "50%"};
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-color: ${(props) => props.$leftColor && Object.keys(colors).includes(props.$leftColor) ? colors[props.$leftColor] : colors.gray_950};
-  }
 `;
 const Bar = ({
-  value = 0,
-  leftColor = "gray_950",
-  rightColor = "gray_60",
   height = 24,
   radius = 4,
+  backgroundColor = "gray_60",
+  max = 100,
+  items = [],
   ...rest
 }) => {
   return /* @__PURE__ */ jsx(
     StyledBar,
     {
-      $value: value,
-      $leftColor: leftColor,
-      $rightColor: rightColor,
+      $backgroundColor: backgroundColor,
       $height: height,
       $radius: radius,
-      ...rest
+      ...rest,
+      children: items.length > 0 && items.map((item, index) => {
+        const thisColor = colors[item.color] || colors.gray_950;
+        const percentage = item.value / max * 100;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: `${percentage}%`,
+              height: "100%",
+              backgroundColor: thisColor
+            }
+          },
+          index
+        );
+      })
     }
   );
 };
@@ -24414,6 +24418,7 @@ const UnitLinkGraphStyled = styled.svg`
 const UnitLinkGraph = ({
   height = 0,
   barMainConfiguration = {
+    followSlider: false,
     header: "Placeholder",
     color_primary: colors.purple_600,
     color_secondary: colors.purple_50,
@@ -24426,9 +24431,16 @@ const UnitLinkGraph = ({
       }
     ]
   },
+  setBarMainActionsActive = () => {
+  },
+  barMainActionsActive = 0,
   barSecondaryConfiguration,
+  setBarSecondaryActionsActive = () => {
+  },
+  barSecondaryActionsActive = 0,
   initialSliderValue = 0,
   maximum_ani = 7,
+  limit_ani = 7,
   timeline_texts = {
     left: "Placeholder"
   },
@@ -24443,6 +24455,13 @@ const UnitLinkGraph = ({
   const [mainWidth, setMainWidth] = useState(0);
   const [mainStart, setMainStart] = useState(0);
   const [sliderValue, setSliderValue] = useState(initialSliderValue);
+  const place_at_ani = useMemo(() => {
+    if (barMainConfiguration.followSlider) {
+      return sliderValue;
+    } else {
+      return barMainConfiguration.place_at_ani;
+    }
+  }, [barMainConfiguration, sliderValue]);
   const configurations = useMemo(() => {
     return {
       mainGap: 16,
@@ -24685,7 +24704,7 @@ const UnitLinkGraph = ({
     ({ mainHeight }) => {
       const MANY_SEGMENTS_PER_YEAR = 2;
       const segments_count = (configurations.area.indicators.count - 1) * MANY_SEGMENTS_PER_YEAR;
-      const segments_render = barMainConfiguration.place_at_ani * 2;
+      const segments_render = place_at_ani * 2;
       const segments_padding_y = 4.5;
       const segments_y = floorToHalf(
         totalHeight - mainHeight + segments_padding_y + configurations.mainGap
@@ -24723,13 +24742,7 @@ const UnitLinkGraph = ({
         }
       };
     },
-    [
-      mainWidth,
-      mainStart,
-      configurations,
-      totalHeight,
-      barMainConfiguration.place_at_ani
-    ]
+    [mainWidth, mainStart, configurations, totalHeight, place_at_ani]
   );
   const computeAction = useCallback(
     ({
@@ -24783,7 +24796,7 @@ const UnitLinkGraph = ({
       mainHeightGraph,
       config: barMainConfiguration,
       getPointsPositionIndicatorX,
-      place_at: barMainConfiguration.place_at_ani,
+      place_at: place_at_ani,
       main: true
     });
     let bar_secondary;
@@ -24846,62 +24859,68 @@ const UnitLinkGraph = ({
       },
       ...rest,
       children: [
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: graph.main.area.part_1.x1,
-            x2: graph.main.area.part_1.x2,
-            y1: graph.main.area.part_1.y1,
-            y2: graph.main.area.part_1.y2,
-            strokeWidth: graph.main.area.part_1.strokeWidth,
-            stroke: graph.main.bars.main.colorPrimary
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: graph.main.area.part_2.x1,
-            x2: graph.main.area.part_2.x2,
-            y1: graph.main.area.part_2.y1,
-            y2: graph.main.area.part_2.y2,
-            strokeWidth: graph.main.area.part_2.strokeWidth,
-            stroke: graph.main.bars.main.colorPrimary
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: graph.main.area.part_3.x1,
-            x2: graph.main.area.part_3.x2,
-            y1: graph.main.area.part_3.y1,
-            y2: graph.main.area.part_3.y2,
-            strokeWidth: graph.main.area.part_3.strokeWidth,
-            stroke: graph.main.bars.main.colorPrimary
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "polygon",
-          {
-            points: `
+        place_at_ani > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: graph.main.area.part_1.x1,
+              x2: graph.main.area.part_1.x2,
+              y1: graph.main.area.part_1.y1,
+              y2: graph.main.area.part_1.y2,
+              strokeWidth: graph.main.area.part_1.strokeWidth,
+              stroke: graph.main.bars.main.colorPrimary
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: graph.main.area.part_2.x1,
+              x2: graph.main.area.part_2.x2,
+              y1: graph.main.area.part_2.y1,
+              y2: graph.main.area.part_2.y2,
+              strokeWidth: graph.main.area.part_2.strokeWidth,
+              stroke: graph.main.bars.main.colorPrimary
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: graph.main.area.part_3.x1,
+              x2: graph.main.area.part_3.x2,
+              y1: graph.main.area.part_3.y1,
+              y2: graph.main.area.part_3.y2,
+              strokeWidth: graph.main.area.part_3.strokeWidth,
+              stroke: graph.main.bars.main.colorPrimary
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "polygon",
+            {
+              points: `
             ${graph.main.area.part_2.x2},${graph.main.bars.main.filled_y + 1.5} 
             ${graph.main.area.part_3.x2},${graph.main.bars.main.filled_y + 1.5}
             ${graph.main.area.part_3.x2},${graph.mainHeightGraph} 
             ${graph.main.area.part_2.x1},${graph.mainHeightGraph}`,
-            fill: graph.main.bars.main.colorSecondary
-          }
-        ),
+              fill: graph.main.bars.main.colorSecondary
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(
           RenderBar,
           {
             bar: graph.main.bars.main,
-            textLineHeight: configurations.bars.actionsTextLineHeight
+            textLineHeight: configurations.bars.actionsTextLineHeight,
+            activeAction: barMainActionsActive,
+            setActiveAction: (value) => setBarMainActionsActive(value)
           }
         ),
         graph.main.bars.secondary && /* @__PURE__ */ jsx(
           RenderBar,
           {
             bar: graph.main.bars.secondary,
-            textLineHeight: configurations.bars.actionsTextLineHeight
+            textLineHeight: configurations.bars.actionsTextLineHeight,
+            activeAction: barSecondaryActionsActive,
+            setActiveAction: (value) => setBarSecondaryActionsActive(value)
           }
         ),
         /* @__PURE__ */ jsx(
@@ -25011,15 +25030,20 @@ const UnitLinkGraph = ({
             max: configurations.area.indicators.count - 1,
             value: sliderValue,
             onChange: setSliderValue,
-            limit: barMainConfiguration.place_at_ani
+            limit: limit_ani
           }
         )
       ]
     }
   );
 };
-const RenderBar = ({ bar, textLineHeight }) => {
-  const [activeBar, setActiveBar] = useState(0);
+const RenderBar = ({
+  bar,
+  textLineHeight,
+  activeAction = 0,
+  setActiveAction = () => {
+  }
+}) => {
   return /* @__PURE__ */ jsxs("g", { children: [
     /* @__PURE__ */ jsx(
       "rect",
@@ -25055,12 +25079,12 @@ const RenderBar = ({ bar, textLineHeight }) => {
       }
     ),
     bar.barActions.actions.map((action, index) => {
-      const isActive = activeBar === index;
+      const isActive = activeAction === index;
       return /* @__PURE__ */ jsxs(
         "g",
         {
           className: "bar-actions-group",
-          onClick: () => setActiveBar(index),
+          onClick: () => setActiveAction(index),
           children: [
             /* @__PURE__ */ jsx(
               "rect",

package/build/types/components/Bar/Bar.d.ts

@@ -2,11 +2,14 @@ import React, { HTMLAttributes } from 'react';
 import { colors } from '../../utils/colors.js';
 
 interface BarProps extends HTMLAttributes<HTMLDivElement> {
-    value?: number;
-    leftColor?: keyof typeof colors;
-    rightColor?: keyof typeof colors;
     height?: 8 | 12 | 16 | 24 | 32 | 40;
     radius?: 2 | 4 | 8 | 12 | 16;
+    backgroundColor?: keyof typeof colors;
+    max?: number;
+    items?: {
+        value: number;
+        color: keyof typeof colors;
+    }[];
 }
 declare const Bar: React.FC<BarProps>;
 

package/build/types/components/UnitlinkGraph/UnitlinkGraph.d.ts

@@ -14,9 +14,15 @@ interface UnitLinkGraphProps extends HTMLAttributes<SVGSVGElement> {
     height?: number;
     barMainConfiguration: BarConfiguration & {
         place_at_ani: number;
+        followSlider?: boolean;
     };
+    setBarMainActionsActive?: (value: number) => void;
+    barMainActionsActive?: number;
     barSecondaryConfiguration?: BarConfiguration;
+    setBarSecondaryActionsActive?: (value: number) => void;
+    barSecondaryActionsActive?: number;
     maximum_ani?: number;
+    limit_ani?: number;
     timeline_texts?: {
         left: string;
         right?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rbro-tat-uds",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "type": "module",
   "main": "build/cjs/index.cjs",
   "module": "build/esm/index.js",
@@ -12,7 +12,7 @@
   "sideEffects": false,
   "scripts": {
     "publish:local-raw": "npm publish --registry http://localhost:4873",
-    "publish:local-clear": "npm unpublish rbro-tat-uds-test@1.6.36 --registry http://localhost:4873 --force",
+    "publish:local-clear": "npm unpublish rbro-tat-uds@2.0.0 --registry http://localhost:4873 --force",
     "publish:local": "npm run publish:local-clear && npm run publish:local-raw"
   },
   "peerDependencies": {
@@ -66,6 +66,14 @@
         "default": "./build/cjs/utils/colors.cjs"
       }
     },
+    "./types/*": {
+      "import": {
+        "types": "./build/types/components/*"
+      },
+      "require": {
+        "types": "./build/types/components/*"
+      }
+    },
     "./esm": null,
     "./modern": null
   }