@hero-design/rn 8.114.0 → 8.115.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.115.0
+
+### Minor Changes
+
+- [#4620](https://github.com/Thinkei/hero-design/pull/4620) [`305a264890d57ea01402684d2ba42e34908cd852`](https://github.com/Thinkei/hero-design/commit/305a264890d57ea01402684d2ba42e34908cd852) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Progress.SegmentedBar] Add custom color config and empty state
+
 ## 8.114.0
 
 ### Minor Changes

package/lib/index.js

@@ -25402,11 +25402,13 @@ var ProgressStep = function ProgressStep(_ref) {
   }));
 };
 
+var SEGMENTED_BAR_COLORS = ['primaryMedium', 'blueMedium', 'greenMedium', 'redMedium', 'orangeMedium', 'yellowMedium', 'pinkMedium', 'greyMedium', 'primaryLight', 'blueLight', 'greenLight', 'redLight', 'orangeLight', 'yellowLight', 'pinkLight', 'greyLight', 'success', 'onSuccessSurface', 'onInfoSurface', 'warning', 'onWarningSurface', 'error', 'onErrorSurface', 'archive', 'onArchiveSurface'];
 var MIN_PROGRESS_VALUE = 0;
 var MAX_PROGRESS_VALUE = 100;
 var SEGMENTED_BAR_ERRORS = {
   negativeValue: '[Progress.SegmentedBar] value:$value is less than 0',
-  legendDisplayValues: '[Progress.SegmentedBar] legendConfig.displayValues must include a non-null/non-undefined entry for each data series (length must match and no null/undefined values are allowed)'
+  legendDisplayValues: '[Progress.SegmentedBar] legendConfig.displayValues must include a non-null/non-undefined entry for each data series (length must match and no null/undefined values are allowed)',
+  customColorsInvalid: '[Progress.SegmentedBar] Invalid styleConfig.series: length must match the number of data series, each entry must include a color value, and labels must match the data series labels'
 };
 
 var useValidateSegmentedBarData = function useValidateSegmentedBarData(_ref) {
@@ -25454,6 +25456,115 @@ var useValidateSegmentedBarLegendDisplayValues = function useValidateSegmentedBa
   assert(!(hasLengthMismatch || hasEmptyEntry), SEGMENTED_BAR_ERRORS.legendDisplayValues);
   return valuesToUse;
 };
+var useValidateSegmentedBarStyleConfig = function useValidateSegmentedBarStyleConfig(_ref3) {
+  var dataSeries = _ref3.dataSeries,
+    customSeries = _ref3.customSeries;
+  var _React$useMemo3 = React__namespace.default.useMemo(function () {
+      if (!customSeries || dataSeries.length === 0) {
+        return {
+          hasInvalidLength: false,
+          hasMissingColor: false,
+          hasMissingLabel: false
+        };
+      }
+      var invalidLength = !Array.isArray(customSeries) || customSeries.length !== dataSeries.length;
+      if (invalidLength) {
+        return {
+          hasInvalidLength: invalidLength,
+          hasMissingColor: false,
+          hasMissingLabel: false
+        };
+      }
+      var missingColor = customSeries.some(function (item) {
+        return !(item !== null && item !== void 0 && item.color);
+      });
+      var providedLabels = new Set(customSeries.map(function (item) {
+        return item.label;
+      }));
+      var missingLabel = dataSeries.some(function (_ref4) {
+        var label = _ref4.label;
+        return !providedLabels.has(label);
+      });
+      return {
+        hasInvalidLength: invalidLength,
+        hasMissingColor: missingColor,
+        hasMissingLabel: missingLabel
+      };
+    }, [customSeries, dataSeries]),
+    hasInvalidLength = _React$useMemo3.hasInvalidLength,
+    hasMissingColor = _React$useMemo3.hasMissingColor,
+    hasMissingLabel = _React$useMemo3.hasMissingLabel;
+  assert(!(hasInvalidLength || hasMissingColor || hasMissingLabel), SEGMENTED_BAR_ERRORS.customColorsInvalid);
+};
+
+/**
+ * Retrieves a color value from a theme source by token.
+ */
+var getThemeColorValue = function getThemeColorValue(source, token) {
+  var value = source === null || source === void 0 ? void 0 : source[token];
+  return typeof value === 'string' ? value : undefined;
+};
+/**
+ * Resolves a SegmentedBar color token to a concrete CSS color string.
+ * Falls back to the raw token string if not found.
+ */
+var getColorFromList = function getColorFromList(_ref) {
+  var _ref2, _getThemeColorValue;
+  var theme = _ref.theme,
+    token = _ref.token;
+  return (_ref2 = (_getThemeColorValue = getThemeColorValue(theme.colors, token)) !== null && _getThemeColorValue !== void 0 ? _getThemeColorValue : getThemeColorValue(palette$9, token)) !== null && _ref2 !== void 0 ? _ref2 : token;
+};
+/**
+ * Maps custom series colors by matching labels.
+ */
+var mapCustomSeriesColors = function mapCustomSeriesColors(_ref3) {
+  var dataSeries = _ref3.dataSeries,
+    customSeries = _ref3.customSeries,
+    theme = _ref3.theme;
+  var colorByLabel = new Map(customSeries.map(function (_ref4) {
+    var label = _ref4.label,
+      color = _ref4.color;
+    return [label, getColorFromList({
+      theme: theme,
+      token: color
+    })];
+  }));
+  return dataSeries.map(function (_ref5) {
+    var label = _ref5.label;
+    var resolvedColor = colorByLabel.get(label);
+    return resolvedColor || '';
+  });
+};
+/**
+ * Returns an array of colors (index-aligned to the segmented bar data).
+ *
+ * - if `customSeries` is provided, uses the provided series colors (resolved via theme/palette)
+ * - otherwise returns the default palette-based colors
+ */
+var useSegmentedBarColors = function useSegmentedBarColors(_ref6) {
+  var dataSeries = _ref6.dataSeries,
+    customSeries = _ref6.customSeries;
+  var theme = useTheme$1();
+  var colors = React.useMemo(function () {
+    if (customSeries !== undefined) {
+      return mapCustomSeriesColors({
+        dataSeries: dataSeries,
+        customSeries: customSeries,
+        theme: theme
+      });
+    }
+    // Default colors
+    return Array.from({
+      length: dataSeries.length
+    }, function (_, index) {
+      return getColorFromList({
+        theme: theme,
+        token: SEGMENTED_BAR_COLORS[index % SEGMENTED_BAR_COLORS.length]
+      });
+    });
+  }, [customSeries, dataSeries, theme]);
+  return colors;
+};
 
 var LegendBox = index$c(Box)(function (_ref) {
   var theme = _ref.theme;
@@ -25546,14 +25657,23 @@ var StyledSegment = index$c(Box)(function (_ref3) {
     width: "".concat(themeWidthPercent, "%")
   };
 });
+var StyledEmptyText = index$c(Typography.Caption)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    marginTop: theme.__hd__.progress.space.segmentedLegendMarginTop
+  };
+});
 
-var _excluded$j = ["data", "headerConfig", "legendConfig", "style", "testID"];
+var _excluded$j = ["data", "headerConfig", "emptyText", "legendConfig", "styleConfig", "style", "testID", "collapsable"];
 var ProgressSegmentedBar = function ProgressSegmentedBar(_ref) {
   var data = _ref.data,
     headerConfig = _ref.headerConfig,
+    emptyText = _ref.emptyText,
     legendConfig = _ref.legendConfig,
+    styleConfig = _ref.styleConfig,
     style = _ref.style,
     testID = _ref.testID,
+    collapsable = _ref.collapsable,
     nativeProps = _objectWithoutProperties(_ref, _excluded$j);
   var values = React__namespace.default.useMemo(function () {
     return data.map(function (s) {
@@ -25569,6 +25689,10 @@ var ProgressSegmentedBar = function ProgressSegmentedBar(_ref) {
     legendConfig: legendConfig,
     fallbackValues: values
   });
+  useValidateSegmentedBarStyleConfig({
+    dataSeries: data,
+    customSeries: styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.series
+  });
   var theme = useTheme$1();
   var totalPercent = React__namespace.default.useMemo(function () {
     return values.reduce(function (acc, value) {
@@ -25579,8 +25703,10 @@ var ProgressSegmentedBar = function ProgressSegmentedBar(_ref) {
   var remainderPercent = React__namespace.default.useMemo(function () {
     return totalPercent >= MAX_PROGRESS_VALUE ? 0 : MAX_PROGRESS_VALUE - totalPercent;
   }, [totalPercent]);
-  // Mock colors
-  var segmentColors = [theme.colors.primary, theme.colors.success, theme.colors.warning, theme.colors.error, theme.colors.info, theme.colors.archived];
+  var segmentColors = useSegmentedBarColors({
+    dataSeries: data,
+    customSeries: styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.series
+  });
   var headerRight = React__namespace.default.useMemo(function () {
     return getTextComponent(headerConfig === null || headerConfig === void 0 ? void 0 : headerConfig.right, /*#__PURE__*/React__namespace.default.createElement(Typography.Caption, {
       intent: "muted"
@@ -25588,9 +25714,11 @@ var ProgressSegmentedBar = function ProgressSegmentedBar(_ref) {
   }, [headerConfig === null || headerConfig === void 0 ? void 0 : headerConfig.right]);
   var showHeader = Boolean((headerConfig === null || headerConfig === void 0 ? void 0 : headerConfig.left) || headerRight);
   var showLegend = Boolean(legendConfig && Object.keys(legendConfig).length > 0);
+  var showEmptyText = Boolean(!data.length && emptyText);
   return /*#__PURE__*/React__namespace.default.createElement(Box, _extends$1({}, nativeProps, {
     style: style,
-    testID: testID
+    testID: testID,
+    collapsable: collapsable || false
   }), showHeader ? /*#__PURE__*/React__namespace.default.createElement(StyledHeader, {
     testID: testID ? "".concat(testID, "-header") : undefined
   }, headerConfig !== null && headerConfig !== void 0 && headerConfig.left ? /*#__PURE__*/React__namespace.default.createElement(Typography.Body, {
@@ -25619,8 +25747,11 @@ var ProgressSegmentedBar = function ProgressSegmentedBar(_ref) {
     themeColor: theme.__hd__.progress.colors.segmentedRemainderBackground,
     themeWidthPercent: remainderPercent,
     testID: testID ? "".concat(testID, "-segment-remainder") : undefined
-  }) : null), showLegend ? /*#__PURE__*/React__namespace.default.createElement(LegendBox, {
-    testID: testID ? "".concat(testID, "-legend") : 'segmented-progress-legend'
+  }) : null), showEmptyText ? /*#__PURE__*/React__namespace.default.createElement(StyledEmptyText, {
+    intent: "muted",
+    testID: testID ? "".concat(testID, "-empty-text") : undefined
+  }, emptyText) : null, showLegend ? /*#__PURE__*/React__namespace.default.createElement(LegendBox, {
+    testID: testID ? "".concat(testID, "-legend") : undefined
   }, data.map(function (item, index) {
     return /*#__PURE__*/React__namespace.default.createElement(ProgressSegmentedBarLegendItem, {
       key: "".concat(item.label, "-").concat(segmentColors[index % segmentColors.length]),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.114.0",
+  "version": "8.115.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/Progress/SegmentedBar/StyledSegmentedBar.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/native';
+import Typography from '../../Typography';
 import Box from '../../Box';
 
 const StyledHeader = styled(Box)(({ theme }) => ({
@@ -27,4 +28,8 @@ const StyledSegment = styled(Box)<{
   width: `${themeWidthPercent}%`,
 }));
 
-export { StyledHeader, StyledSegment, StyledTrack };
+const StyledEmptyText = styled(Typography.Caption)(({ theme }) => ({
+  marginTop: theme.__hd__.progress.space.segmentedLegendMarginTop,
+}));
+
+export { StyledHeader, StyledSegment, StyledTrack, StyledEmptyText };

package/src/components/Progress/SegmentedBar/__tests__/index.spec.tsx

@@ -1,4 +1,6 @@
+import { mobileVisualisationPalette } from '@hero-design/colors';
 import React from 'react';
+import { StyleSheet } from 'react-native';
 import renderWithTheme from '../../../../testHelpers/renderWithTheme';
 import ProgressSegmentedBar from '..';
 import { SEGMENTED_BAR_ERRORS } from '../constants';
@@ -77,6 +79,33 @@ describe('Progress.SegmentedBar', () => {
     expect(queryByTestId('progress-segmented-legend')).toBeNull();
   });
 
+  it('renders empty text when data is empty', () => {
+    const { getByTestId, getByText, queryByTestId } = renderWithTheme(
+      <ProgressSegmentedBar
+        testID="progress-segmented"
+        emptyText="No data yet"
+        data={[]}
+      />
+    );
+
+    expect(getByTestId('progress-segmented-track')).toBeVisible();
+    expect(getByTestId('progress-segmented-empty-text')).toBeVisible();
+    expect(getByText('No data yet')).toBeVisible();
+    expect(queryByTestId('progress-segmented-legend')).toBeNull();
+  });
+
+  it('does not render empty text when data exists', () => {
+    const { queryByTestId } = renderWithTheme(
+      <ProgressSegmentedBar
+        testID="progress-segmented"
+        emptyText="No data yet"
+        data={[{ label: 'A', data: 10 }]}
+      />
+    );
+
+    expect(queryByTestId('progress-segmented-empty-text')).toBeNull();
+  });
+
   it('throws on negative segment value', () => {
     expect(() =>
       renderWithTheme(
@@ -112,4 +141,83 @@ describe('Progress.SegmentedBar', () => {
       ).toThrow(SEGMENTED_BAR_ERRORS.legendDisplayValues);
     }
   );
+
+  it('uses custom colors from styleConfig', () => {
+    const { getByTestId } = renderWithTheme(
+      <ProgressSegmentedBar
+        testID="progress-segmented"
+        styleConfig={{
+          series: [
+            { label: 'A', color: 'primaryLight' },
+            { label: 'B', color: 'blueLight' },
+          ],
+        }}
+        data={[
+          { label: 'A', data: 40 },
+          { label: 'B', data: 60 },
+        ]}
+        legendConfig={{ displayValues: ['40%', '60%'] }}
+      />
+    );
+
+    const firstSegmentStyle = StyleSheet.flatten(
+      getByTestId('progress-segmented-segment-A').props.style
+    );
+    const secondSegmentStyle = StyleSheet.flatten(
+      getByTestId('progress-segmented-segment-B').props.style
+    );
+
+    expect(firstSegmentStyle?.backgroundColor).toBe(
+      mobileVisualisationPalette.primaryLight
+    );
+    expect(secondSegmentStyle?.backgroundColor).toBe(
+      mobileVisualisationPalette.blueLight
+    );
+  });
+
+  it('uses default colors when styleConfig is not provided', () => {
+    const { getByTestId } = renderWithTheme(
+      <ProgressSegmentedBar
+        testID="progress-segmented"
+        data={[
+          { label: 'A', data: 40 },
+          { label: 'B', data: 60 },
+        ]}
+      />
+    );
+
+    const firstSegmentStyle = StyleSheet.flatten(
+      getByTestId('progress-segmented-segment-A').props.style
+    );
+    const secondSegmentStyle = StyleSheet.flatten(
+      getByTestId('progress-segmented-segment-B').props.style
+    );
+
+    expect(firstSegmentStyle?.backgroundColor).toBe(
+      mobileVisualisationPalette.primaryMedium
+    );
+    expect(secondSegmentStyle?.backgroundColor).toBe(
+      mobileVisualisationPalette.blueMedium
+    );
+  });
+
+  it.each`
+    description                          | styleConfig
+    ${'length mismatches data'}          | ${{ series: [{ label: 'A', color: 'primaryLight' }] }}
+    ${'labels do not match data labels'} | ${{ series: [{ label: 'C', color: 'primaryLight' }, { label: 'D', color: 'blueLight' }] }}
+    ${'colors are missing'}              | ${{ series: [{ label: 'A', color: '' as any }, { label: 'B', color: undefined as any }] }}
+  `('throws when styleConfig is invalid: $description', ({ styleConfig }) => {
+    expect(() =>
+      renderWithTheme(
+        <ProgressSegmentedBar
+          testID="progress-segmented"
+          styleConfig={styleConfig}
+          data={[
+            { label: 'A', data: 40 },
+            { label: 'B', data: 60 },
+          ]}
+        />
+      )
+    ).toThrow(SEGMENTED_BAR_ERRORS.customColorsInvalid);
+  });
 });

package/src/components/Progress/SegmentedBar/constants.ts

@@ -1,3 +1,33 @@
+export const SEGMENTED_BAR_COLORS = [
+  'primaryMedium',
+  'blueMedium',
+  'greenMedium',
+  'redMedium',
+  'orangeMedium',
+  'yellowMedium',
+  'pinkMedium',
+  'greyMedium',
+  'primaryLight',
+  'blueLight',
+  'greenLight',
+  'redLight',
+  'orangeLight',
+  'yellowLight',
+  'pinkLight',
+  'greyLight',
+  'success',
+  'onSuccessSurface',
+  'onInfoSurface',
+  'warning',
+  'onWarningSurface',
+  'error',
+  'onErrorSurface',
+  'archive',
+  'onArchiveSurface',
+] as const;
+
+export type SegmentedBarColorToken = typeof SEGMENTED_BAR_COLORS[number];
+
 export const MIN_PROGRESS_VALUE = 0;
 export const MAX_PROGRESS_VALUE = 100;
 
@@ -5,4 +35,6 @@ export const SEGMENTED_BAR_ERRORS = {
   negativeValue: '[Progress.SegmentedBar] value:$value is less than 0',
   legendDisplayValues:
     '[Progress.SegmentedBar] legendConfig.displayValues must include a non-null/non-undefined entry for each data series (length must match and no null/undefined values are allowed)',
+  customColorsInvalid:
+    '[Progress.SegmentedBar] Invalid styleConfig.series: length must match the number of data series, each entry must include a color value, and labels must match the data series labels',
 } as const;

package/src/components/Progress/SegmentedBar/hooks/colors.ts

@@ -0,0 +1,102 @@
+import { useTheme } from '@emotion/react';
+import { useMemo } from 'react';
+import { mobileVisualisationPalette } from '@hero-design/colors';
+import type { Theme } from '../../../../theme';
+import type { SegmentedBarData, SegmentedBarStyleConfig } from '../types';
+import {
+  SEGMENTED_BAR_COLORS,
+  type SegmentedBarColorToken,
+} from '../constants';
+
+/**
+ * Retrieves a color value from a theme source by token.
+ */
+const getThemeColorValue = (
+  source: Record<string, unknown> | undefined,
+  token: SegmentedBarColorToken
+): string | undefined => {
+  const value = source?.[token];
+  return typeof value === 'string' ? value : undefined;
+};
+
+/**
+ * Resolves a SegmentedBar color token to a concrete CSS color string.
+ * Falls back to the raw token string if not found.
+ */
+const getColorFromList = ({
+  theme,
+  token,
+}: {
+  theme: Theme;
+  token: SegmentedBarColorToken;
+}): string => {
+  return (
+    getThemeColorValue(theme.colors, token) ??
+    getThemeColorValue(mobileVisualisationPalette, token) ??
+    token
+  );
+};
+
+/**
+ * Maps custom series colors by matching labels.
+ */
+const mapCustomSeriesColors = ({
+  dataSeries,
+  customSeries,
+  theme,
+}: {
+  dataSeries: SegmentedBarData;
+  customSeries: NonNullable<SegmentedBarStyleConfig['series']>;
+  theme: Theme;
+}): string[] => {
+  const colorByLabel = new Map(
+    customSeries.map(({ label, color }) => [
+      label,
+      getColorFromList({
+        theme,
+        token: color,
+      }),
+    ])
+  );
+
+  return dataSeries.map(({ label }) => {
+    const resolvedColor = colorByLabel.get(label);
+    return resolvedColor || '';
+  });
+};
+
+/**
+ * Returns an array of colors (index-aligned to the segmented bar data).
+ *
+ * - if `customSeries` is provided, uses the provided series colors (resolved via theme/palette)
+ * - otherwise returns the default palette-based colors
+ */
+export const useSegmentedBarColors = ({
+  dataSeries,
+  customSeries,
+}: {
+  dataSeries: SegmentedBarData;
+  customSeries?: SegmentedBarStyleConfig['series'];
+}): string[] => {
+  const theme = useTheme();
+
+  const colors = useMemo(() => {
+    if (customSeries !== undefined) {
+      return mapCustomSeriesColors({
+        dataSeries,
+        customSeries,
+        theme,
+      });
+    }
+
+    // Default colors
+    return Array.from({ length: dataSeries.length }, (_, index) =>
+      getColorFromList({
+        theme,
+        token: SEGMENTED_BAR_COLORS[index % SEGMENTED_BAR_COLORS.length],
+      })
+    );
+  }, [customSeries, dataSeries, theme]);
+
+  return colors;
+};

package/src/components/Progress/SegmentedBar/hooks/validation.ts

@@ -6,6 +6,8 @@ import { assert } from '../../../../utils/helpers';
 import type {
   SegmentedBarLegendConfig,
   SegmentedBarLegendDisplayValue,
+  SegmentedBarData,
+  SegmentedBarStyleConfig,
 } from '../types';
 
 export const useValidateSegmentedBarData = ({
@@ -69,3 +71,51 @@ export const useValidateSegmentedBarLegendDisplayValues = ({
   );
   return valuesToUse;
 };
+
+export const useValidateSegmentedBarStyleConfig = ({
+  dataSeries,
+  customSeries,
+}: {
+  dataSeries: SegmentedBarData;
+  customSeries: SegmentedBarStyleConfig['series'];
+}): void => {
+  const { hasInvalidLength, hasMissingColor, hasMissingLabel } =
+    React.useMemo(() => {
+      if (!customSeries || dataSeries.length === 0) {
+        return {
+          hasInvalidLength: false,
+          hasMissingColor: false,
+          hasMissingLabel: false,
+        };
+      }
+
+      const invalidLength =
+        !Array.isArray(customSeries) ||
+        customSeries.length !== dataSeries.length;
+
+      if (invalidLength) {
+        return {
+          hasInvalidLength: invalidLength,
+          hasMissingColor: false,
+          hasMissingLabel: false,
+        };
+      }
+
+      const missingColor = customSeries.some((item) => !item?.color);
+      const providedLabels = new Set(customSeries.map((item) => item.label));
+      const missingLabel = dataSeries.some(
+        ({ label }) => !providedLabels.has(label)
+      );
+
+      return {
+        hasInvalidLength: invalidLength,
+        hasMissingColor: missingColor,
+        hasMissingLabel: missingLabel,
+      };
+    }, [customSeries, dataSeries]);
+
+  assert(
+    !(hasInvalidLength || hasMissingColor || hasMissingLabel),
+    SEGMENTED_BAR_ERRORS.customColorsInvalid
+  );
+};

package/src/components/Progress/SegmentedBar/index.tsx

@@ -9,19 +9,29 @@ import { MAX_PROGRESS_VALUE, MIN_PROGRESS_VALUE } from './constants';
 import {
   useValidateSegmentedBarData,
   useValidateSegmentedBarLegendDisplayValues,
+  useValidateSegmentedBarStyleConfig,
 } from './hooks/validation';
+import { useSegmentedBarColors } from './hooks/colors';
 import LegendItem from './Legend';
 import { LegendBox } from './StyledLegend';
-import { StyledHeader, StyledSegment, StyledTrack } from './StyledSegmentedBar';
+import {
+  StyledEmptyText,
+  StyledHeader,
+  StyledSegment,
+  StyledTrack,
+} from './StyledSegmentedBar';
 import type { ProgressSegmentedBarProps } from './types';
 import { getTextComponent } from './utils';
 
 const ProgressSegmentedBar = ({
   data,
   headerConfig,
+  emptyText,
   legendConfig,
+  styleConfig,
   style,
   testID,
+  collapsable,
   ...nativeProps
 }: ProgressSegmentedBarProps): ReactElement => {
   const values = React.useMemo(() => data.map((s) => s.data), [data]);
@@ -33,6 +43,11 @@ const ProgressSegmentedBar = ({
     fallbackValues: values,
   });
 
+  useValidateSegmentedBarStyleConfig({
+    dataSeries: data,
+    customSeries: styleConfig?.series,
+  });
+
   const theme = useTheme();
   const totalPercent = React.useMemo(
     () => values.reduce((acc, value) => acc + value, 0),
@@ -47,16 +62,10 @@ const ProgressSegmentedBar = ({
       ? 0
       : MAX_PROGRESS_VALUE - totalPercent;
   }, [totalPercent]);
-
-  // Mock colors
-  const segmentColors = [
-    theme.colors.primary,
-    theme.colors.success,
-    theme.colors.warning,
-    theme.colors.error,
-    theme.colors.info,
-    theme.colors.archived,
-  ];
+  const segmentColors = useSegmentedBarColors({
+    dataSeries: data,
+    customSeries: styleConfig?.series,
+  });
 
   const headerRight = React.useMemo(
     () =>
@@ -73,9 +82,15 @@ const ProgressSegmentedBar = ({
   const showLegend = Boolean(
     legendConfig && Object.keys(legendConfig).length > 0
   );
+  const showEmptyText = Boolean(!data.length && emptyText);
 
   return (
-    <Box {...nativeProps} style={style} testID={testID}>
+    <Box
+      {...nativeProps}
+      style={style}
+      testID={testID}
+      collapsable={collapsable || false}
+    >
       {showHeader ? (
         <StyledHeader testID={testID ? `${testID}-header` : undefined}>
           {headerConfig?.left ? (
@@ -129,10 +144,17 @@ const ProgressSegmentedBar = ({
         ) : null}
       </StyledTrack>
 
-      {showLegend ? (
-        <LegendBox
-          testID={testID ? `${testID}-legend` : 'segmented-progress-legend'}
+      {showEmptyText ? (
+        <StyledEmptyText
+          intent="muted"
+          testID={testID ? `${testID}-empty-text` : undefined}
         >
+          {emptyText}
+        </StyledEmptyText>
+      ) : null}
+
+      {showLegend ? (
+        <LegendBox testID={testID ? `${testID}-legend` : undefined}>
           {data.map((item, index) => (
             <LegendItem
               key={`${item.label}-${

package/src/components/Progress/SegmentedBar/types.ts

@@ -1,6 +1,7 @@
 import type { ReactElement, ReactNode } from 'react';
 
 import type { ViewProps } from 'react-native';
+import type { SegmentedBarColorToken } from './constants';
 
 export interface SegmentedBarSeries<Data> {
   /**
@@ -15,6 +16,18 @@ export interface SegmentedBarSeries<Data> {
 
 export type SegmentedBarData = Array<SegmentedBarSeries<number>>;
 
+export interface SegmentedBarStyleConfig {
+  /**
+   * Colors config per series.
+   * Provide one entry per series in `data` matched by the `label` value (order-agnostic).
+   * When provided, number of entries must match `data.length` and all data labels must have a corresponding entry, otherwise an error will be thrown.
+   */
+  series?: Array<{
+    label: string;
+    color: SegmentedBarColorToken;
+  }>;
+}
+
 export interface SegmentedBarHeaderConfig {
   /**
    * Left header content.
@@ -54,9 +67,19 @@ export interface ProgressSegmentedBarProps extends ViewProps {
    */
   headerConfig?: SegmentedBarHeaderConfig;
 
+  /**
+   * Optional text shown when there is no data.
+   */
+  emptyText?: string;
+
   /**
    * Optional legend config.
    * If provided, the legend is rendered below the segmented bar.
    */
   legendConfig?: SegmentedBarLegendConfig;
+
+  /**
+   * Custom style config to override series colors.
+   */
+  styleConfig?: SegmentedBarStyleConfig;
 }