@hero-design/rn 0.0.0-integrate-basic-table-20251229041814 → 0.0.0-integrate-basic-table-20251229143430

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "0.0.0-integrate-basic-table-20251229041814",
+  "version": "0.0.0-integrate-basic-table-20251229143430",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

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

@@ -0,0 +1,29 @@
+import styled from '@emotion/native';
+import Box from '../../Box';
+
+const StyledHeader = styled(Box)(({ theme }) => ({
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  alignItems: 'baseline',
+  marginBottom: theme.__hd__.progress.space.segmentedHeaderMarginBottom,
+}));
+
+const StyledTrack = styled(Box)(({ theme }) => ({
+  width: '100%',
+  height: theme.__hd__.progress.sizes.barHeight,
+  borderRadius: theme.__hd__.progress.radii.default,
+  overflow: 'hidden',
+  flexDirection: 'row',
+}));
+
+const StyledSegment = styled(Box)<{
+  themeColor: string;
+  themeWidthPercent: number;
+}>(({ themeColor, themeWidthPercent }) => ({
+  backgroundColor: themeColor,
+  flexGrow: 0,
+  flexShrink: 0,
+  width: `${themeWidthPercent}%`,
+}));
+
+export { StyledHeader, StyledSegment, StyledTrack };

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import ProgressSegmentedBar from '..';
+import { SEGMENTED_BAR_ERRORS } from '../constants';
+
+describe('Progress.SegmentedBar', () => {
+  it('renders correctly with header', () => {
+    const { getByTestId, getByText } = renderWithTheme(
+      <ProgressSegmentedBar
+        testID="progress-segmented"
+        headerConfig={{ left: 'Title', right: 'Right' }}
+        data={[
+          { label: 'A', data: 25 },
+          { label: 'B', data: 25 },
+        ]}
+      />
+    );
+
+    expect(getByTestId('progress-segmented')).toBeVisible();
+    expect(getByTestId('progress-segmented-header')).toBeVisible();
+    expect(getByTestId('progress-segmented-track')).toBeVisible();
+    expect(getByTestId('progress-segmented-segment-A')).toBeVisible();
+    expect(getByTestId('progress-segmented-segment-B')).toBeVisible();
+    expect(getByTestId('progress-segmented-segment-remainder')).toBeVisible();
+    expect(getByText('Title')).toBeVisible();
+    expect(getByText('Right')).toBeVisible();
+  });
+
+  it('throws on negative segment value', () => {
+    expect(() =>
+      renderWithTheme(
+        <ProgressSegmentedBar
+          testID="progress-segmented"
+          data={[
+            { label: 'A', data: 25 },
+            { label: 'B', data: -10 },
+          ]}
+        />
+      )
+    ).toThrow(SEGMENTED_BAR_ERRORS.negativeValue.replace('$value', '-10'));
+  });
+});

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { getTextComponent } from '../utils';
+import Typography from '../../../Typography';
+
+const TextComponent = (
+  <Typography.Caption intent="muted">Sample Text</Typography.Caption>
+);
+
+describe('getTextComponent', () => {
+  it('should return null when content is falsy', () => {
+    expect(getTextComponent(null, TextComponent)).toBeNull();
+    expect(getTextComponent(undefined, TextComponent)).toBeNull();
+  });
+
+  it('should return TextComponent when content is a string or number', () => {
+    expect(getTextComponent('Progress', TextComponent)).toBe(TextComponent);
+    expect(getTextComponent(50, TextComponent)).toBe(TextComponent);
+  });
+
+  it('should return content when it is a ReactNode', () => {
+    const customContent = <Typography.Body>Custom Content</Typography.Body>;
+    expect(getTextComponent(customContent, TextComponent)).toBe(customContent);
+  });
+});

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

@@ -0,0 +1,6 @@
+export const MIN_PROGRESS_VALUE = 0;
+export const MAX_PROGRESS_VALUE = 100;
+
+export const SEGMENTED_BAR_ERRORS = {
+  negativeValue: '[Progress.SegmentedBar] value:$value is less than 0',
+} as const;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { SEGMENTED_BAR_ERRORS } from '../constants';
+
+import { assert } from '../../../../utils/helpers';
+
+export const useValidateSegmentedBarData = ({
+  values,
+  dataLength,
+}: {
+  dataLength: number;
+  values: number[];
+}) => {
+  const { hasNegativeValue, negativeValue } = React.useMemo(() => {
+    const foundNegativeValue = values.find((value) => value < 0);
+
+    return {
+      hasNegativeValue: foundNegativeValue !== undefined,
+      negativeValue: foundNegativeValue,
+    };
+  }, [dataLength, values]);
+
+  assert(
+    !hasNegativeValue,
+    SEGMENTED_BAR_ERRORS.negativeValue.replace('$value', String(negativeValue))
+  );
+};

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

@@ -0,0 +1,120 @@
+import { useTheme } from '@emotion/react';
+import type { ReactElement } from 'react';
+import React from 'react';
+
+import Typography from '../../Typography';
+
+import Box from '../../Box';
+import { MAX_PROGRESS_VALUE, MIN_PROGRESS_VALUE } from './constants';
+import { useValidateSegmentedBarData } from './hooks/validation';
+import { StyledHeader, StyledSegment, StyledTrack } from './StyledSegmentedBar';
+import type { ProgressSegmentedBarProps } from './types';
+import { getTextComponent } from './utils';
+
+const ProgressSegmentedBar = ({
+  data,
+  headerConfig,
+  style,
+  testID,
+  ...nativeProps
+}: ProgressSegmentedBarProps): ReactElement => {
+  const values = React.useMemo(() => data.map((s) => s.data), [data]);
+  useValidateSegmentedBarData({ dataLength: data.length, values });
+
+  const theme = useTheme();
+  const totalPercent = React.useMemo(
+    () => values.reduce((acc, value) => acc + value, 0),
+    [values]
+  );
+
+  const ariaValueMax =
+    totalPercent > MAX_PROGRESS_VALUE ? totalPercent : MAX_PROGRESS_VALUE;
+
+  const remainderPercent = React.useMemo(() => {
+    return totalPercent >= MAX_PROGRESS_VALUE
+      ? 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 headerRight = React.useMemo(
+    () =>
+      getTextComponent(
+        headerConfig?.right,
+        <Typography.Caption intent="muted">
+          {headerConfig?.right}
+        </Typography.Caption>
+      ),
+    [headerConfig?.right]
+  );
+
+  const showHeader = Boolean(headerConfig?.left || headerRight);
+
+  return (
+    <Box {...nativeProps} style={style} testID={testID}>
+      {showHeader ? (
+        <StyledHeader testID={testID ? `${testID}-header` : undefined}>
+          {headerConfig?.left ? (
+            <Typography.Body
+              variant="regular-bold"
+              testID={testID ? `${testID}-header-left` : undefined}
+            >
+              {headerConfig.left}
+            </Typography.Body>
+          ) : null}
+
+          {headerRight ? (
+            <Box testID={testID ? `${testID}-header-right` : undefined}>
+              {headerRight}
+            </Box>
+          ) : null}
+        </StyledHeader>
+      ) : null}
+
+      <StyledTrack
+        testID={testID ? `${testID}-track` : undefined}
+        accessibilityRole="progressbar"
+        accessibilityValue={{
+          min: MIN_PROGRESS_VALUE,
+          max: ariaValueMax,
+          now: totalPercent,
+        }}
+      >
+        {data.map((s, index) => {
+          const segmentColor = segmentColors[index % segmentColors.length];
+
+          return (
+            <StyledSegment
+              key={`${s.label}-${segmentColor}`}
+              themeColor={segmentColor}
+              themeWidthPercent={s.data}
+              testID={testID ? `${testID}-segment-${s.label}` : undefined}
+            />
+          );
+        })}
+
+        {remainderPercent > 0 ? (
+          <StyledSegment
+            key="remainder"
+            themeColor={
+              theme.__hd__.progress.colors.segmentedRemainderBackground
+            }
+            themeWidthPercent={remainderPercent}
+            testID={testID ? `${testID}-segment-remainder` : undefined}
+          />
+        ) : null}
+      </StyledTrack>
+    </Box>
+  );
+};
+
+export default ProgressSegmentedBar;

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

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react';
+
+import type { ViewProps } from 'react-native';
+
+export interface SegmentedBarSeries<Data> {
+  /**
+   * Label of series.
+   */
+  label: string;
+  /**
+   * Data of series.
+   */
+  data: Data;
+}
+
+export type SegmentedBarData = Array<SegmentedBarSeries<number>>;
+
+export interface SegmentedBarHeaderConfig {
+  /**
+   * Left header content.
+   */
+  left?: string;
+  /**
+   * Right header content.
+   */
+  right?: ReactNode;
+}
+
+export interface ProgressSegmentedBarProps extends ViewProps {
+  /**
+   * Segmented data.
+   *
+   * Each segment value is treated as a percentage amount.
+   *
+   * Runtime validation:
+   * - Throws if any segment value is negative.
+   * - Values do not need to sum to 100; if the total exceeds 100, the bar will be fully filled and no remainder segment will be shown.
+   */
+  data: SegmentedBarData;
+
+  /**
+   * Optional header content.
+   */
+  headerConfig?: SegmentedBarHeaderConfig;
+}

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+
+export const getTextComponent = (
+  content: ReactNode,
+  textElement: ReactNode
+): ReactNode => {
+  if (!content) {
+    return null;
+  }
+
+  if (typeof content === 'string' || typeof content === 'number') {
+    return textElement;
+  }
+
+  return content;
+};

package/src/components/Progress/index.tsx

@@ -1,10 +1,12 @@
 import ProgressCircle from './ProgressCircle';
 import ProgressBar from './ProgressBar';
 import ProgressStep from './ProgressStep';
+import ProgressSegmentedBar from './SegmentedBar';
 
 const Progress = {
   Circle: ProgressCircle,
   Bar: ProgressBar,
+  SegmentedBar: ProgressSegmentedBar,
   Step: ProgressStep,
 } as const;
 

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -1046,6 +1046,7 @@ exports[`theme returns correct theme object 1`] = `
           "warning": "#000000",
           "warningInverted": "#000000",
         },
+        "segmentedRemainderBackground": "#dadbde",
         "step": {
           "complete": "#401960",
           "current": "#ccd2d3",
@@ -1062,6 +1063,7 @@ exports[`theme returns correct theme object 1`] = `
         "stepHeight": 8,
       },
       "space": {
+        "segmentedHeaderMarginBottom": 8,
         "stepGap": 4,
       },
     },

package/src/theme/components/progress.ts

@@ -37,6 +37,7 @@ const getProgressTheme = (theme: GlobalTheme) => {
       incomplete: theme.colors.archivedSurface,
       current: theme.colors.decorativePrimarySurface,
     },
+    segmentedRemainderBackground: theme.colors.archivedSurface,
   };
 
   const sizes = {
@@ -52,6 +53,7 @@ const getProgressTheme = (theme: GlobalTheme) => {
 
   const space = {
     stepGap: theme.space.xsmall,
+    segmentedHeaderMarginBottom: theme.space.small,
   };
 
   return { colors, sizes, radii, space };

package/src/types.ts

@@ -59,6 +59,7 @@ import type { ThemeScale } from './components/Box/types';
 import type { TimePickerProps } from './components/TimePicker/types';
 import type { DatePickerProps } from './components/DatePicker/types';
 import type { SegmentedControlItemConfig } from './components/SegmentedControl/types';
+import type { ProgressSegmentedBarProps } from './components/Progress/SegmentedBar/types';
 
 export type {
   Space,
@@ -114,4 +115,5 @@ export type {
   TimePickerProps,
   DatePickerProps,
   SegmentedControlItemConfig,
+  ProgressSegmentedBarProps,
 };

package/src/utils/helpers.ts

@@ -233,3 +233,9 @@ export const transformKebabCaseToCamelCase = <T extends string>(
     /[a-z]/.test(char) ? char.toUpperCase() : char
   ) as CamelCase<T>;
 };
+
+export function assert(condition: unknown, message: string): asserts condition {
+  if (!condition) {
+    throw new Error(message);
+  }
+}

package/types/components/Progress/SegmentedBar/StyledSegmentedBar.d.ts

@@ -0,0 +1,16 @@
+declare const StyledHeader: import("@emotion/native").StyledComponent<import("../../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {}>;
+declare const StyledTrack: import("@emotion/native").StyledComponent<import("../../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {}>;
+declare const StyledSegment: import("@emotion/native").StyledComponent<import("../../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeColor: string;
+    themeWidthPercent: number;
+}, {}, {}>;
+export { StyledHeader, StyledSegment, StyledTrack };

package/types/components/Progress/SegmentedBar/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const MIN_PROGRESS_VALUE = 0;
+export declare const MAX_PROGRESS_VALUE = 100;
+export declare const SEGMENTED_BAR_ERRORS: {
+    readonly negativeValue: "[Progress.SegmentedBar] value:$value is less than 0";
+};

package/types/components/Progress/SegmentedBar/hooks/validation.d.ts

@@ -0,0 +1,4 @@
+export declare const useValidateSegmentedBarData: ({ values, dataLength, }: {
+    dataLength: number;
+    values: number[];
+}) => void;

package/types/components/Progress/SegmentedBar/index.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from 'react';
+import type { ProgressSegmentedBarProps } from './types';
+declare const ProgressSegmentedBar: ({ data, headerConfig, style, testID, ...nativeProps }: ProgressSegmentedBarProps) => ReactElement;
+export default ProgressSegmentedBar;

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

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+export interface SegmentedBarSeries<Data> {
+    /**
+     * Label of series.
+     */
+    label: string;
+    /**
+     * Data of series.
+     */
+    data: Data;
+}
+export type SegmentedBarData = Array<SegmentedBarSeries<number>>;
+export interface SegmentedBarHeaderConfig {
+    /**
+     * Left header content.
+     */
+    left?: string;
+    /**
+     * Right header content.
+     */
+    right?: ReactNode;
+}
+export interface ProgressSegmentedBarProps extends ViewProps {
+    /**
+     * Segmented data.
+     *
+     * Each segment value is treated as a percentage amount.
+     *
+     * Runtime validation:
+     * - Throws if any segment value is negative.
+     * - Values do not need to sum to 100; if the total exceeds 100, the bar will be fully filled and no remainder segment will be shown.
+     */
+    data: SegmentedBarData;
+    /**
+     * Optional header content.
+     */
+    headerConfig?: SegmentedBarHeaderConfig;
+}

package/types/components/Progress/SegmentedBar/utils.d.ts

@@ -0,0 +1,2 @@
+import type { ReactNode } from 'react';
+export declare const getTextComponent: (content: ReactNode, textElement: ReactNode) => ReactNode;

package/types/components/Progress/index.d.ts

@@ -1,6 +1,7 @@
 declare const Progress: {
     readonly Circle: ({ value, renderValue, intent, style, testID, ...nativeProps }: import("./ProgressCircle").ProgressCircleProps) => import("react").ReactElement;
     readonly Bar: ({ value, intent, style, testID, ...nativeProps }: import("./ProgressBar").ProgressBarProps) => import("react").ReactElement;
+    readonly SegmentedBar: ({ data, headerConfig, style, testID, ...nativeProps }: import("./SegmentedBar/types").ProgressSegmentedBarProps) => import("react").ReactElement;
     readonly Step: ({ steps, current, onLayout, ...props }: import("./ProgressStep").ProgressStepProps) => import("react").JSX.Element;
 };
 export default Progress;

package/types/theme/components/progress.d.ts

@@ -34,6 +34,7 @@ declare const getProgressTheme: (theme: GlobalTheme) => {
             incomplete: string;
             current: string;
         };
+        segmentedRemainderBackground: string;
     };
     sizes: {
         circleDiameter: number;
@@ -46,6 +47,7 @@ declare const getProgressTheme: (theme: GlobalTheme) => {
     };
     space: {
         stepGap: number;
+        segmentedHeaderMarginBottom: number;
     };
 };
 export default getProgressTheme;

package/types/types.d.ts

@@ -39,4 +39,5 @@ import type { ThemeScale } from './components/Box/types';
 import type { TimePickerProps } from './components/TimePicker/types';
 import type { DatePickerProps } from './components/DatePicker/types';
 import type { SegmentedControlItemConfig } from './components/SegmentedControl/types';
-export type { Space, CaptionProps, Radii, TitleProps, CarouselData, CarouselImageProps, PinInputHandler, ThemeScale, ToastProps, ActionGroupProps, ToolbarItemProps, BottomNavigationTabType, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, SelectOptionType, SwipeableProps, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, TextProps, TextInputHandles, Theme, CardCarouselHandles, FABHandles, ActionGroupHandles, ActionItemProps, SliderRangeValue, CalendarDateRange, LocaleCode, LocaleValues, DateTimeFormats, ColumnChartProps, LineChartProps, Scale, SystemPalette, BrandSystemPalette, GlobalSystemPalette, IconProps, CheckboxProps, SwitchOptionType, BoxProps, BodyProps, ToolbarButtonName, ListItemProps, IconButtonProps, BadgeProps, TimePickerProps, DatePickerProps, SegmentedControlItemConfig, };
+import type { ProgressSegmentedBarProps } from './components/Progress/SegmentedBar/types';
+export type { Space, CaptionProps, Radii, TitleProps, CarouselData, CarouselImageProps, PinInputHandler, ThemeScale, ToastProps, ActionGroupProps, ToolbarItemProps, BottomNavigationTabType, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, SelectOptionType, SwipeableProps, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, TextProps, TextInputHandles, Theme, CardCarouselHandles, FABHandles, ActionGroupHandles, ActionItemProps, SliderRangeValue, CalendarDateRange, LocaleCode, LocaleValues, DateTimeFormats, ColumnChartProps, LineChartProps, Scale, SystemPalette, BrandSystemPalette, GlobalSystemPalette, IconProps, CheckboxProps, SwitchOptionType, BoxProps, BodyProps, ToolbarButtonName, ListItemProps, IconButtonProps, BadgeProps, TimePickerProps, DatePickerProps, SegmentedControlItemConfig, ProgressSegmentedBarProps, };

package/types/utils/helpers.d.ts

@@ -11,3 +11,4 @@ export declare const useKeyboard: () => {
 };
 export type CamelCase<S extends string> = S extends `${infer F}-${infer R}` ? R extends `${string}-${string}` ? `${F}${Capitalize<CamelCase<R>>}` : `${F}${Capitalize<R>}` : never;
 export declare const transformKebabCaseToCamelCase: <T extends string>(string: T) => CamelCase<T>;
+export declare function assert(condition: unknown, message: string): asserts condition;