@hero-design/rn 8.99.4 → 8.100.0

package/types/components/Badge/Status.d.ts

@@ -6,7 +6,6 @@ export interface StatusProps extends ViewProps {
      * Whether the Status Badge is visible.
      */
     visible?: boolean;
-    /**
     /**
      * Visual intent color to apply to Status Badge.
      */

package/types/components/Chart/ChartSelect/StyledChartSelect.d.ts

@@ -0,0 +1,8 @@
+import { View } from 'react-native';
+declare const StyledHeaderContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledHeaderContainer };

package/types/components/Chart/ChartSelect/index.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { BottomSheetProps } from '../../BottomSheet';
+/**
+ * Represents a selectable option for ChartSelect.
+ * @template V The type of the option value.
+ * @property value The value of the option. Used for selection and comparison.
+ * @property text The display text for the option.
+ * @property key (Optional) A unique key for the option. If provided, used as the FlatList key for better performance and stability.
+ */
+type OptionType<V> = {
+    value: V;
+    text: string;
+    key?: string;
+};
+export interface SingleSelectProps<V> {
+    /**
+     * The currently selected value. Should match one of the values in the options array.
+     */
+    value: V | null;
+    /**
+     * Callback fired when an option is selected.
+     * @param value The value of the selected option.
+     */
+    onConfirm: (value: V) => void;
+    /**
+     * Array of supported orientations for the Select modal (iOS only).
+     * Defaults to ['portrait'].
+     */
+    supportedOrientations?: ('portrait' | 'landscape')[];
+    /**
+     * The list of selectable options. Each option should have a value and display text.
+     */
+    options: OptionType<V>[];
+    /**
+     * Callback fired when the selection modal is dismissed without selecting an option.
+     */
+    onDismiss?: () => void;
+    /**
+     * Configuration for the bottom sheet modal.
+     * - variant: The visual variant of the bottom sheet.
+     * - header: Optional header text to display at the top of the bottom sheet.
+     */
+    bottomSheetConfig?: {
+        variant?: BottomSheetProps['variant'];
+        header?: BottomSheetProps['header'];
+    };
+    /**
+     * If true, the select is disabled and cannot be interacted with.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional style to apply to the select container.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Optional test ID for testing purposes. Applied to the main touchable area.
+     */
+    testID?: string;
+}
+declare const SingleSelect: <V>({ onConfirm, onDismiss, options, disabled, style, testID, value, supportedOrientations, bottomSheetConfig, }: SingleSelectProps<V>) => React.JSX.Element;
+export default SingleSelect;

package/types/components/Chart/ColumnChart/ColumnChartContent.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { DataValue, Series, XAxisConfig, YAxisConfig } from '../types';
+interface ColumnChartContentProps {
+    coordinates: {
+        yStart: number;
+        yEnd: number;
+        xStart: number;
+        xEnd: number;
+    };
+    data: Array<Series<Array<DataValue>>>;
+    yAxisConfig: Omit<YAxisConfig, 'minValue'>;
+    xAxisConfig: XAxisConfig;
+    /**
+     * Called when a bar (column segment) is pressed.
+     */
+    onBarPress?: (info: {
+        value: number | undefined;
+        xLabel: string;
+        seriesLabel: string;
+        seriesIndex: number;
+        xIndex: number;
+    }) => void;
+}
+declare const _default: React.MemoExoticComponent<({ coordinates, data, yAxisConfig, xAxisConfig, onBarPress, }: ColumnChartContentProps) => React.JSX.Element>;
+export default _default;

package/types/components/Chart/ColumnChart/Segment.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface SegmentProps {
+    xCenter: number;
+    y: number;
+    height: number;
+    color?: string;
+    value?: number;
+    xLabel: string;
+    seriesLabel: string;
+    testID: string;
+    onPress?: () => void;
+}
+declare const _default: React.MemoExoticComponent<({ xCenter, y, height, color, value, xLabel, seriesLabel, testID, onPress, }: SegmentProps) => React.JSX.Element>;
+export default _default;

package/types/components/Chart/ColumnChart/StackedSegment.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { DataValue, YAxisConfig } from '../types';
+interface StackedSegmentProps {
+    stackedData: Array<DataValue>;
+    seriesLabels: Array<string>;
+    xLabel: string;
+    yAxisConfig: YAxisConfig;
+    coordinates: {
+        yStart: number;
+        yEnd: number;
+        xStart: number;
+        xEnd: number;
+    };
+    xCenter: number;
+    xIndex: number;
+    /**
+     * Called when a bar (column segment) is pressed.
+     */
+    onBarPress?: (info: {
+        value: number | undefined;
+        xLabel: string;
+        seriesLabel: string;
+        seriesIndex: number;
+        xIndex: number;
+    }) => void;
+}
+declare const _default: React.NamedExoticComponent<StackedSegmentProps>;
+export default _default;

package/types/components/Chart/ColumnChart/StyledColumnChart.d.ts

@@ -0,0 +1,8 @@
+import { View } from 'react-native';
+declare const StyledColumnChartWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledColumnChartWrapper };

package/types/components/Chart/ColumnChart/index.d.ts

@@ -0,0 +1,80 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import { DataValue, HeaderConfig, Series, XAxisConfig, YAxisConfig } from '../types';
+/**
+ * Props for the ColumnChart component.
+ *
+ * @property data - The data to be displayed in the chart. Each item represents a series.
+ * @property yAxisConfig - Optional configuration for the Y axis.
+ * @property xAxisConfig - Optional configuration for the X axis.
+ * @property style - Additional style for the root View. Follows the same convention as other components (e.g., Button).
+ * @property testID - Testing id of the component. Passed to the root View and used as a suffix for inner elements.
+ * @property headerConfig - Optional header configuration (title, actions).
+ * @property emptyText - Optional text to display when data is empty.
+ * @property onBarPress - Called when a bar (column segment) is pressed. Receives info about the bar.
+ */
+export interface ColumnChartProps {
+    /**
+     * The data to be displayed in the chart. Each item represents a series.
+     */
+    data: Array<Series<Array<DataValue>>>;
+    /**
+     * Optional configuration for the Y axis.
+     * Note: minValue is omitted and always set to zero internally by the component.
+     */
+    yAxisConfig?: Omit<YAxisConfig, 'minValue'>;
+    /**
+     * Optional configuration for the X axis.
+     */
+    xAxisConfig?: XAxisConfig;
+    /**
+     * Additional style for the root View.
+     */
+    style?: ViewStyle;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Header configuration for the chart.
+     */
+    headerConfig?: HeaderConfig;
+    /**
+     * Text to display when the chart has no data (empty state).
+     */
+    emptyText?: string;
+    /**
+     * Called when a bar (column segment) is pressed. Receives info about the bar.
+     */
+    onBarPress?: (info: {
+        value: number | undefined;
+        xLabel: string;
+        seriesLabel: string;
+        seriesIndex: number;
+        xIndex: number;
+    }) => void;
+}
+/**
+ * ColumnChart component for rendering grouped/stacked column charts.
+ * Handles layout, axis configuration, empty state, and data validation.
+ * Uses ChartFrame for layout and axes, and ColumnChartContent for rendering columns.
+ *
+ * @param data - Array of series, each with a label and array of values.
+ * @param yAxisConfig - Optional Y axis configuration.
+ * @param xAxisConfig - Optional X axis configuration.
+ * @param style - Optional style for the chart container.
+ * @param testID - Optional test ID for testing.
+ * @param headerConfig - Optional header configuration (title, actions).
+ * @param emptyText - Optional text to display when data is empty.
+ * @param onBarPress - Called when a bar (column segment) is pressed. Receives info about the bar.
+ *
+ * Example usage:
+ * <ColumnChart
+ *   data={data}
+ *   xAxisConfig={xAxisConfig}
+ *   yAxisConfig={yAxisConfig}
+ *   emptyText="No data available"
+ * />
+ */
+declare const ColumnChart: ({ data, yAxisConfig, xAxisConfig, style, testID, headerConfig, emptyText, onBarPress, }: ColumnChartProps) => React.JSX.Element;
+export default ColumnChart;

package/types/components/Chart/Line/Line.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { AxisCoordinates, DataValue } from '../types';
+/**
+ * Props for the Line chart component
+ */
+type LineProps = {
+    /** Array of data points to be plotted on the line chart */
+    data: DataValue[];
+    /** Maximum value for the Y-axis scale */
+    maxValue: number;
+    /** Minimum value for the Y-axis scale */
+    minValue: number;
+    /** Array of labels for the X-axis points */
+    labels: string[];
+    /** Coordinates defining the chart's boundaries and scale */
+    coordinates: AxisCoordinates;
+    /** Color for the line */
+    color?: string;
+};
+declare const Line: ({ data, maxValue, minValue, labels, coordinates, color, }: LineProps) => React.JSX.Element | null;
+export default Line;

package/types/components/Chart/Line/index.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import { DataValue, HeaderConfig, Series, XAxisConfig, YAxisConfig } from '../types';
+export interface LineChartProps {
+    /**
+     * The data to be displayed in the chart. Each item represents a series.
+     */
+    data: Array<Series<Array<DataValue>>>;
+    /**
+     * Optional configuration for the Y axis.
+     */
+    yAxisConfig?: YAxisConfig;
+    /**
+     * Optional configuration for the X axis.
+     */
+    xAxisConfig?: XAxisConfig;
+    /**
+     * Additional style for the root View.
+     */
+    style?: ViewStyle;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Header configuration for the chart.
+     */
+    headerConfig?: HeaderConfig;
+    /**
+     * Text to display when the chart is empty.
+     */
+    emptyText?: string;
+}
+declare const LineChart: ({ data, yAxisConfig, xAxisConfig, style, testID, headerConfig, emptyText, }: LineChartProps) => React.JSX.Element;
+export default LineChart;

package/types/components/Chart/StyledChart.d.ts

@@ -0,0 +1,9 @@
+declare const StyledChartHeader: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {}>;
+declare const StyledLineChartWrapper: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {}>;
+export { StyledChartHeader, StyledLineChartWrapper };

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

@@ -0,0 +1,9 @@
+import LineChart from './Line';
+import ColumnChart from './ColumnChart';
+declare const Chart: {
+    Column: ({ data, yAxisConfig, xAxisConfig, style, testID, headerConfig, emptyText, onBarPress, }: import("./ColumnChart").ColumnChartProps) => import("react").JSX.Element;
+    Line: ({ data, yAxisConfig, xAxisConfig, style, testID, headerConfig, emptyText, }: import("./Line").LineChartProps) => import("react").JSX.Element;
+    SelectAction: <V>({ onConfirm, onDismiss, options, disabled, style, testID, value, supportedOrientations, bottomSheetConfig, }: import("./ChartSelect").SingleSelectProps<V>) => import("react").JSX.Element;
+};
+export type { LineChart, ColumnChart };
+export default Chart;

package/types/components/Chart/shared/AxisLabel.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const AxisLabel: ({ label, numberOfLines, textAlign, }: {
+    label: string;
+    numberOfLines?: number;
+    textAlign?: "right" | "center";
+}) => React.JSX.Element;
+export default AxisLabel;

package/types/components/Chart/shared/ChartFrame.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { AxisCoordinates, HeaderConfig, XAxisConfig, YAxisConfig } from '../types';
+export type ChartFrameProps = {
+    isEmpty?: boolean;
+    xAxisConfig: XAxisConfig;
+    yAxisConfig: YAxisConfig;
+    headerConfig?: HeaderConfig;
+    width: number;
+    height: number;
+    renderContent: (props: {
+        coordinates: AxisCoordinates;
+    }) => React.ReactNode;
+    /**
+     * Text to display when the chart has no data (empty state).
+     * If undefined, no empty label will appear even if the chart is empty.
+     */
+    emptyText?: string;
+    /**
+     * If true, hides the grid lines for the Y-axis.
+     * Defaults to false.
+     */
+    hideYAxisGrid?: boolean;
+    /**
+     * If true, hides the grid lines for the X-axis.
+     * Defaults to false.
+     */
+    hideXAxisGrid?: boolean;
+};
+declare const ChartFrame: ({ xAxisConfig, yAxisConfig, width, height, headerConfig, renderContent, isEmpty, emptyText, hideYAxisGrid, hideXAxisGrid, }: ChartFrameProps) => React.JSX.Element;
+export default ChartFrame;

package/types/components/Chart/shared/ChartHeader.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { LayoutChangeEvent } from 'react-native';
+import { HeaderConfig } from '../types';
+export type ChartHeaderProps = HeaderConfig & {
+    onLayout?: (event: LayoutChangeEvent) => void;
+};
+declare const ChartHeader: ({ title, actionsExtra, onLayout }: ChartHeaderProps) => React.JSX.Element;
+export default ChartHeader;

package/types/components/Chart/shared/EmptyState.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { AxisCoordinates } from '../types';
+type EmptyStateProps = {
+    coordinates: AxisCoordinates;
+    content: string;
+};
+declare const EmptyState: ({ content, coordinates }: EmptyStateProps) => React.JSX.Element;
+export default EmptyState;

package/types/components/Chart/shared/XAxis.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { AxisCoordinates, XAxisConfig } from '../types';
+export type XAxisProps = {
+    xAxisConfig: XAxisConfig;
+    coordinates: AxisCoordinates;
+};
+declare const XAxis: ({ xAxisConfig, coordinates }: XAxisProps) => React.JSX.Element;
+export default XAxis;

package/types/components/Chart/shared/XAxisGrid.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { AxisCoordinates, XAxisConfig } from '../types';
+export type XAxisGridProps = {
+    xAxisConfig: XAxisConfig;
+    coordinates: AxisCoordinates;
+};
+declare const XAxisGrid: ({ xAxisConfig, coordinates }: XAxisGridProps) => React.JSX.Element;
+export default XAxisGrid;

package/types/components/Chart/shared/YAxis.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { AxisCoordinates, YAxisConfig } from '../types';
+export type YAxisProps = {
+    yAxisConfig: YAxisConfig & {
+        minValue?: number;
+    };
+    coordinates: AxisCoordinates;
+};
+declare const YAxis: ({ yAxisConfig, coordinates }: YAxisProps) => React.JSX.Element;
+export default YAxis;

package/types/components/Chart/shared/YAxisGrid.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { AxisCoordinates, YAxisConfig } from '../types';
+export type YAxisGridProps = {
+    yAxisConfig: Omit<YAxisConfig, 'labels'> & {
+        minValue?: number;
+    };
+    coordinates: AxisCoordinates;
+};
+declare const YAxisGrid: ({ yAxisConfig, coordinates }: YAxisGridProps) => React.JSX.Element;
+export default YAxisGrid;

package/types/components/Chart/shared/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DASH_ARRAY: number[];
+export declare const DEFAULT_LINE_STROKE_WIDTH = 2;

package/types/components/Chart/shared/hooks/useColorScale.d.ts

@@ -0,0 +1,7 @@
+/**
+ * useColorScale - Returns a d3 ordinal scale for mapping labels to colors.
+ * @param labels Array of labels (series names or keys)
+ * @param customColors Optional custom color palette
+ * @returns Ordinal scale function: (label: string) => color
+ */
+export default function useColorScale(labels: string[], customColors?: string[]): (label: string) => string | undefined;

package/types/components/Chart/shared/hooks/useGenerateTicks.d.ts

@@ -0,0 +1,6 @@
+declare const useGenerateTicks: ({ maxValue, minValue, step, }: {
+    maxValue?: number;
+    minValue?: number;
+    step?: number;
+}) => number[];
+export default useGenerateTicks;

package/types/components/Chart/shared/hooks/useScaleBandX.d.ts

@@ -0,0 +1,8 @@
+import * as d3 from 'd3';
+export type UseScaleBandXProps = {
+    labels: string[];
+    xStart: number;
+    xEnd: number;
+};
+declare const useScaleBandX: ({ labels, xStart, xEnd }: UseScaleBandXProps) => d3.ScaleBand<string>;
+export default useScaleBandX;

package/types/components/Chart/shared/hooks/useScaleLinearY.d.ts

@@ -0,0 +1,9 @@
+import * as d3 from 'd3';
+export type UseScaleLinearYProps = {
+    maxValue: number;
+    minValue: number;
+    yStart: number;
+    yEnd: number;
+};
+declare const useScaleLinearY: ({ maxValue, minValue, yStart, yEnd, }: UseScaleLinearYProps) => d3.ScaleLinear<number, number, never>;
+export default useScaleLinearY;

package/types/components/Chart/shared/niceNumbers.d.ts

@@ -0,0 +1,12 @@
+import { DataValue } from '../types';
+export declare const createNiceScale: (min: number, max: number, maxTicks?: number) => {
+    niceMin: number;
+    niceMax: number;
+    tickSpacing: number;
+};
+export declare const maxValueFromDataSet: (data: {
+    data: DataValue[];
+}[]) => number;
+export declare const minValueFromDataSet: (data: {
+    data: DataValue[];
+}[]) => number;

package/types/components/Chart/types.d.ts

@@ -0,0 +1,84 @@
+export type AxisSizeConfig = {
+    xAxisTextHeight: number;
+    setXAxisTextHeight: (height: number) => void;
+    yAxisTextWidth: number;
+    setYAxisTextWidth: (width: number) => void;
+};
+/**
+ * Represents a data series for the chart.
+ * @template Data - The type of the data array for the series.
+ */
+interface Series<Data> {
+    /**
+     * Label of the series (used for legends, etc.).
+     */
+    label: string;
+    /**
+     * Data values for the series.
+     */
+    data: Data;
+}
+/**
+ * Configuration for axis ticks.
+ */
+interface TickConfig {
+    /**
+     * The interval between ticks on the axis.
+     */
+    interval: number;
+}
+/**
+ * Configuration for the Y axis of the chart.
+ */
+interface YAxisConfig {
+    /**
+     * Maximum value for the Y axis.
+     */
+    maxValue?: number;
+    /**
+     * Minimum value for the Y axis.
+     */
+    minValue?: number;
+    /**
+     * Labels for the Y axis.
+     */
+    labels?: Array<string>;
+    /**
+     * Step size between ticks on the Y axis.
+     */
+    step?: number;
+    /**
+     * Tick configuration for the Y axis.
+     */
+    tick?: TickConfig;
+}
+/**
+ * Configuration for the X axis of the chart.
+ */
+interface XAxisConfig {
+    /**
+     * Labels for the X axis.
+     */
+    labels?: Array<string>;
+}
+/**
+ * Represents a single data value in the chart (can be a number or undefined).
+ */
+type DataValue = number | undefined;
+/**
+ * Represents the position of an object in the chart.
+ */
+type AxisCoordinates = {
+    xStart: number;
+    xEnd: number;
+    yStart: number;
+    yEnd: number;
+};
+/**
+ * Represents the configuration for the header of the chart.
+ */
+type HeaderConfig = {
+    title?: string;
+    actionsExtra?: React.ReactNode;
+};
+export type { Series, TickConfig, XAxisConfig, YAxisConfig, DataValue, AxisCoordinates, HeaderConfig, };

package/types/components/Select/helpers.d.ts

@@ -8,8 +8,3 @@ export type ScrollParams = {
     sectionIndex: number;
 };
 export declare const getScrollParams: <V, T extends OptionType<V>>(value: V, sections: SectionData<V, T>[]) => ScrollParams;
-export declare const useKeyboard: () => {
-    isKeyboardVisible: boolean;
-    keyboardHeight: number;
-};
-export declare const deepCompareValue: <V>(a: V, b: V) => boolean;

package/types/index.d.ts

@@ -13,6 +13,7 @@ import Button from './components/Button';
 import Calendar from './components/Calendar';
 import Carousel from './components/Carousel';
 import Card from './components/Card';
+import Chart from './components/Chart';
 import Chip from './components/Chip';
 import Collapse from './components/Collapse';
 import Checkbox from './components/Checkbox';
@@ -55,5 +56,5 @@ import { ScrollViewWithFAB, SectionListWithFAB, FlatListWithFAB } from './compon
 import Search from './components/Search';
 import FloatingIsland from './components/FloatingIsland';
 import LocaleProvider from './components/LocaleProvider';
-export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagLightSystemPalette, swagLightJobsSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, ehWorkDarkSystemPalette, ehWorkSystemPalette, ehJobsSystemPalette, Accordion, Alert, AppCue, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Chip, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, FlatListWithFAB, Icon, Image, HeroDesignProvider, MapPin, List, PinInput, Progress, Portal, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, Search, ScrollViewWithFAB, SectionHeading, SectionListWithFAB, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, Rate, RefreshControl, RichTextEditor, FloatingIsland, LocaleProvider, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagLightSystemPalette, swagLightJobsSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, ehWorkDarkSystemPalette, ehWorkSystemPalette, ehJobsSystemPalette, Accordion, Alert, AppCue, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Chart, Carousel, Chip, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, FlatListWithFAB, Icon, Image, HeroDesignProvider, MapPin, List, PinInput, Progress, Portal, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, Search, ScrollViewWithFAB, SectionHeading, SectionListWithFAB, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, Rate, RefreshControl, RichTextEditor, FloatingIsland, LocaleProvider, };
 export * from './types';

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

@@ -0,0 +1,22 @@
+import type { GlobalTheme } from '../global';
+declare const getChartTheme: (theme: GlobalTheme) => {
+    space: {
+        xAxisMarginLeft: number;
+        xAxisGridTextMarginTop: number;
+        yAxisMarginBottom: number;
+        yAxisGridMarginTop: number;
+        yAxisGridTextMarginRight: number;
+        headerMarginBottom: number;
+    };
+    sizes: {
+        xAxisDefaultTextHeight: number;
+        yAxisDefaultTextHeight: number;
+        yAxisDefaultTextWidth: number;
+        defaultWebEmptyStateWidth: number;
+        defaultWebEmptyStateHeight: number;
+    };
+    colors: {
+        gridStroke: string;
+    };
+};
+export default getChartTheme;

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

@@ -0,0 +1,10 @@
+import type { GlobalTheme } from '../global';
+declare const getColumnChartTheme: (theme: GlobalTheme) => {
+    sizes: {
+        columnWidth: number;
+    };
+    space: {
+        segmentGap: number;
+    };
+};
+export default getColumnChartTheme;

package/types/theme/getTheme.d.ts

@@ -12,6 +12,8 @@ import { CarouselThemeType } from './components/carousel';
 import getCardCarouselTheme from './components/cardCarousel';
 import getCheckboxTheme from './components/checkbox';
 import getChipTheme from './components/chip';
+import getChartTheme from './components/chart';
+import getColumnChartTheme from './components/columnChart';
 import getContentNavigatorTheme from './components/contentNavigator';
 import getDatePickerTheme from './components/datePicker';
 import getDividerTheme from './components/divider';
@@ -69,6 +71,8 @@ type Theme = GlobalTheme & {
         cardCarousel: ReturnType<typeof getCardCarouselTheme>;
         checkbox: ReturnType<typeof getCheckboxTheme>;
         chip: ReturnType<typeof getChipTheme>;
+        chart: ReturnType<typeof getChartTheme>;
+        columnChart: ReturnType<typeof getColumnChartTheme>;
         contentNavigator: ReturnType<typeof getContentNavigatorTheme>;
         datePicker: ReturnType<typeof getDatePickerTheme>;
         divider: ReturnType<typeof getDividerTheme>;

package/types/types.d.ts

@@ -14,4 +14,6 @@ import { ActionGroupHandles } from './components/FAB/ActionGroup';
 import type { SliderRangeValue } from './components/Slider/RangeSlider';
 import type { CalendarDateRange } from './components/Calendar/CalendarRange';
 import { LocaleCode, LocaleValues, DateTimeFormats } from './locales/types';
-export type { BottomNavigationTabType, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, SwipeableProps, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, TextProps, TextInputHandles, Theme, CardCarouselHandles, FABHandles, ActionGroupHandles, SliderRangeValue, CalendarDateRange, LocaleCode, LocaleValues, DateTimeFormats, };
+import type { ColumnChartProps } from './components/Chart/ColumnChart';
+import { LineChartProps } from './components/Chart/Line';
+export type { BottomNavigationTabType, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, SwipeableProps, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, TextProps, TextInputHandles, Theme, CardCarouselHandles, FABHandles, ActionGroupHandles, SliderRangeValue, CalendarDateRange, LocaleCode, LocaleValues, DateTimeFormats, ColumnChartProps, LineChartProps, };