@rio-cloud/rio-uikit 0.16.4-beta.8 → 1.0.0

package/lib/es/components/charts/LineChart.d.ts

@@ -1,16 +1,28 @@
+import React from 'react';
+import { LineChart as RechartsLineChart, type XAxisProps, type YAxisProps } from 'recharts';
+import { ChartTooltipProps } from './ChartTooltip';
+import { type LegendProps } from './Legend';
+import type { LineProps } from './Line';
+import type { GridProps } from './ChartGrid';
+import type { ResponsiveContainerProps } from './ResponsiveContainer';
+type RechartsLineChartProps = React.ComponentProps<typeof RechartsLineChart>;
+export type LineChartProps<T extends object> = Omit<RechartsLineChartProps, 'data'> & {
+    width?: number;
+    height?: number;
+    data: T[];
+    dataUnit?: string;
+    dataKey?: string | number | ((obj: T) => any);
+    lines: React.ReactElement<LineProps>[];
+    xAxisOptions?: XAxisProps;
+    yAxisOptions?: YAxisProps;
+    gridOptions?: GridProps;
+    containerOptions?: ResponsiveContainerProps;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    showGrid?: boolean;
+    legend?: React.ReactElement<LegendProps> | boolean;
+    tooltip?: React.ReactElement<ChartTooltipProps> | boolean;
+    brush?: boolean;
+};
+declare const LineChart: <T extends object>(props: LineChartProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default LineChart;
-declare function LineChart(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace LineChart {
-    namespace defaultProps {
-        const width: number;
-        const height: number;
-        const data: never[];
-        const dataUnit: string;
-        const lines: never[];
-        const showXAxis: boolean;
-        const showYAxis: boolean;
-        const showGrid: boolean;
-        const brush: boolean;
-        const tooltip: import("react/jsx-runtime").JSX.Element;
-    }
-}

package/lib/es/components/charts/LineChart.js

@@ -1,33 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const react_1 = require("react");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const recharts_1 = require("recharts");
+const isObject_1 = tslib_1.__importDefault(require("lodash/fp/isObject"));
 const chartHelper_1 = require("./chartHelper");
 const ChartTooltip_1 = tslib_1.__importDefault(require("./ChartTooltip"));
-const LineChart = props => {
-    const { width, height, data, dataUnit, dataKey, lines, xAxisOptions, yAxisOptions, gridOptions, showXAxis, showYAxis, showGrid, legend, tooltip, brush } = props, remainingProps = tslib_1.__rest(props, ["width", "height", "data", "dataUnit", "dataKey", "lines", "xAxisOptions", "yAxisOptions", "gridOptions", "showXAxis", "showYAxis", "showGrid", "legend", "tooltip", "brush"]);
-    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, Object.assign({ width: '100%', height: '100%' }, { children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [showGrid && (0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, (0, chartHelper_1.mapGridOptions)(gridOptions))), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, Object.assign({}, tooltip.props)), legend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, Object.assign({ wrapperStyle: legend.props.verticalAlign === 'bottom' ? { bottom: 0 } : legend.props.wrapperStyle }, legend.props))), lines.map(line => {
+const Legend_1 = tslib_1.__importDefault(require("./Legend"));
+const LineChart = (props) => {
+    const { width, height, data = [], dataUnit = '', dataKey = 'value', lines = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showXAxis = true, showYAxis = false, showGrid = false, legend, brush = false, tooltip = true } = props, remainingProps = tslib_1.__rest(props, ["width", "height", "data", "dataUnit", "dataKey", "lines", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"]);
+    const tooltipProps = (0, isObject_1.default)(tooltip) ? tooltip.props : {};
+    const legendProps = (0, isObject_1.default)(legend) ? legend.props : {};
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, Object.assign({}, containerOptions, { children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [showGrid && (0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, (0, chartHelper_1.mapGridOptions)(gridOptions))), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && (0, jsx_runtime_1.jsx)(ChartTooltip_1.default, Object.assign({}, tooltipProps)), legend && (0, jsx_runtime_1.jsx)(Legend_1.default, Object.assign({}, legendProps)), lines.map(line => {
                     const _a = line.props, { strokeColor } = _a, remainingLineProps = tslib_1.__rest(_a, ["strokeColor"]);
-                    return (0, jsx_runtime_1.jsx)(recharts_1.Line, Object.assign({ stroke: (0, chartHelper_1.getColor)(strokeColor) }, remainingLineProps), line.key);
+                    return (0, react_1.createElement)(recharts_1.Line, Object.assign({}, remainingLineProps, { key: line.key, stroke: (0, chartHelper_1.getColor)(strokeColor) }));
                 }), brush && (0, jsx_runtime_1.jsx)(recharts_1.Brush, { stroke: (0, chartHelper_1.getColor)('gray') })] })) })));
 };
-LineChart.defaultProps = {
-    width: 480,
-    height: 200,
-    data: [],
-    dataUnit: '',
-    // dataKey,
-    lines: [],
-    // xAxisOptions,
-    // yAxisOptions,
-    // gridOptions,
-    showXAxis: true,
-    showYAxis: false,
-    showGrid: false,
-    brush: false,
-    tooltip: (0, jsx_runtime_1.jsx)(ChartTooltip_1.default, {}),
-    // legend,
-};
 exports.default = LineChart;

package/lib/es/components/charts/PieChart.d.ts

@@ -1,20 +1,30 @@
+import React from 'react';
+import { PieChart as RechartsPieChart, type PieProps as RechartPieProps } from 'recharts';
+import { type DataType } from './chartHelper';
+import { type LegendProps } from './Legend';
+import { type ChartTooltipProps } from './ChartTooltip';
+import type { ResponsiveContainerProps } from './ResponsiveContainer';
+export type PieChartDataType = DataType;
+export type PieProps = Omit<Partial<RechartPieProps>, 'ref'> & {};
+type RechartsPieChartProps = React.ComponentProps<typeof RechartsPieChart>;
+export type PieChartProps<T extends DataType> = Omit<RechartsPieChartProps, 'data'> & {
+    width?: number | string;
+    height?: number | string;
+    innerRadius?: number | string;
+    outerRadius?: number | string;
+    data: T[];
+    dataKey?: string | number | ((obj: T) => any);
+    dataUnit?: string;
+    nameKey?: string;
+    color?: string | ((obj: T) => any);
+    filled?: boolean;
+    labels?: boolean;
+    innerLabels?: boolean;
+    paddingAngle?: number;
+    legend?: React.ReactElement<LegendProps> | boolean;
+    tooltip?: React.ReactElement<ChartTooltipProps> | boolean;
+    pieOptions?: PieProps;
+    containerOptions?: ResponsiveContainerProps;
+};
+declare const PieChart: <T extends DataType>(props: PieChartProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default PieChart;
-declare function PieChart(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace PieChart {
-    namespace defaultProps {
-        const width: string;
-        const height: number;
-        const innerRadius: number;
-        const outerRadius: number;
-        const data: never[];
-        const dataKey: string;
-        const dataUnit: string;
-        const nameKey: string;
-        const filled: boolean;
-        const labels: boolean;
-        const innerLabels: boolean;
-        const paddingAngle: number;
-        const legend: import("react/jsx-runtime").JSX.Element;
-        const tooltip: import("react/jsx-runtime").JSX.Element;
-    }
-}

package/lib/es/components/charts/PieChart.js

@@ -2,49 +2,34 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const recharts_1 = require("recharts");
 const isFunction_1 = tslib_1.__importDefault(require("lodash/fp/isFunction"));
+const isObject_1 = tslib_1.__importDefault(require("lodash/fp/isObject"));
 const chartHelper_1 = require("./chartHelper");
 const Legend_1 = tslib_1.__importDefault(require("./Legend"));
-const ChartTooltip_1 = tslib_1.__importDefault(require("./ChartTooltip"));
+const ChartTooltip_1 = tslib_1.__importStar(require("./ChartTooltip"));
 const RADIAN = Math.PI / 180;
-const PieChart = props => {
-    const { width, height, innerRadius, outerRadius, data, dataKey, dataUnit, nameKey, color, filled, labels, innerLabels, paddingAngle, legend, tooltip, pieOptions } = props, remainingProps = tslib_1.__rest(props, ["width", "height", "innerRadius", "outerRadius", "data", "dataKey", "dataUnit", "nameKey", "color", "filled", "labels", "innerLabels", "paddingAngle", "legend", "tooltip", "pieOptions"]);
-    const renderInnerLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index, value }) => {
-        const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
-        const x = cx + radius * Math.cos(-midAngle * RADIAN);
-        const y = cy + radius * Math.sin(-midAngle * RADIAN);
-        return ((0, jsx_runtime_1.jsx)("text", Object.assign({ x: x, y: y, fill: 'white', textAnchor: x > cx ? 'start' : 'end', dominantBaseline: 'central' }, { children: `${value} ${dataUnit}` })));
-    };
-    const renderLabels = entry => {
-        return `${(0, isFunction_1.default)(dataKey) ? dataKey(entry) : entry[dataKey]} ${dataUnit}`;
-    };
-    const pieLabel = labels && (innerLabels ? renderInnerLabel : renderLabels);
-    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, Object.assign({ width: width, height: height }, { children: (0, jsx_runtime_1.jsxs)(recharts_1.PieChart, Object.assign({}, remainingProps, { children: [legend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, Object.assign({ formatter: (value, entry) => (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-color-darker' }, { children: value })) }, legend.props))), (0, jsx_runtime_1.jsx)(recharts_1.Pie, Object.assign({ data: data, isAnimationActive: true, nameKey: nameKey, dataKey: dataKey, label: pieLabel, 
+const renderCustomInnerLabel = (dataUnit) => ({ cx, cy, midAngle, innerRadius, outerRadius, value }) => {
+    const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+    const x = cx + radius * Math.cos(-midAngle * RADIAN);
+    const y = cy + radius * Math.sin(-midAngle * RADIAN);
+    return ((0, jsx_runtime_1.jsx)("text", Object.assign({ x: x, y: y, fill: 'white', textAnchor: x > cx ? 'start' : 'end', dominantBaseline: 'central' }, { children: `${value} ${dataUnit}` })));
+};
+const PieChart = (props) => {
+    const { width, height, innerRadius, outerRadius, data = [], dataKey = 'value', dataUnit = '', nameKey = 'name', color, filled = false, labels = true, innerLabels = false, paddingAngle = 3, legend = (0, jsx_runtime_1.jsx)(Legend_1.default, {}), tooltip = true, pieOptions, containerOptions } = props, remainingProps = tslib_1.__rest(props, ["width", "height", "innerRadius", "outerRadius", "data", "dataKey", "dataUnit", "nameKey", "color", "filled", "labels", "innerLabels", "paddingAngle", "legend", "tooltip", "pieOptions", "containerOptions"]);
+    // biome-ignore lint/suspicious/noExplicitAny:
+    const renderLabels = (entry) => `${(0, isFunction_1.default)(dataKey) ? dataKey(entry) : entry[dataKey]} ${dataUnit}`;
+    const pieLabel = labels && (innerLabels ? renderCustomInnerLabel(dataUnit) : renderLabels);
+    const tooltipProps = (0, isObject_1.default)(tooltip) ? tooltip.props : {};
+    const legendProps = (0, isObject_1.default)(legend) ? legend.props : {};
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, Object.assign({}, containerOptions, { children: (0, jsx_runtime_1.jsxs)(recharts_1.PieChart, Object.assign({ width: width, height: height }, remainingProps, { children: [legend && ((0, jsx_runtime_1.jsx)(Legend_1.default, Object.assign({ formatter: (value, entry) => ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-color-darker' }, { children: value }))) }, legendProps))), (0, jsx_runtime_1.jsx)(recharts_1.Pie, Object.assign({ data: data, isAnimationActive: true, nameKey: nameKey, dataKey: dataKey, label: pieLabel, 
                     // cx={Math.max(outerRadius, width / 3)}
                     // cy={height / 2}
                     innerRadius: filled ? 0 : innerRadius, outerRadius: outerRadius, paddingAngle: filled ? 0 : paddingAngle, labelLine: !innerLabels }, pieOptions, { children: data.map((entry, index) => {
                         const cellColor = (0, chartHelper_1.getColor)(entry.color) || (0, chartHelper_1.getFromDefaultColors)(index);
-                        return ((0, jsx_runtime_1.jsx)(recharts_1.Cell, { fill: (0, isFunction_1.default)(color) ? (0, chartHelper_1.getColor)(color(entry, index)) : cellColor }, `cell-${index}`));
-                    }) })), tooltip && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, Object.assign({ formatter: value => `${value} ${dataUnit}` }, tooltip.props))] })) })));
-};
-PieChart.defaultProps = {
-    width: '100%',
-    height: 250,
-    innerRadius: 60,
-    outerRadius: 80,
-    data: [],
-    dataKey: 'value',
-    dataUnit: '',
-    nameKey: 'name',
-    // color,
-    filled: false,
-    labels: true,
-    innerLabels: false,
-    paddingAngle: 3,
-    // pieOptions,
-    legend: (0, jsx_runtime_1.jsx)(Legend_1.default, {}),
-    tooltip: (0, jsx_runtime_1.jsx)(ChartTooltip_1.default, {}),
+                        return ((0, jsx_runtime_1.jsx)(recharts_1.Cell, { fill: (0, isFunction_1.default)(color) ? (0, chartHelper_1.getColor)(color(entry)) : cellColor }, `cell-${index}`));
+                    }) })), tooltip && (0, jsx_runtime_1.jsx)(ChartTooltip_1.default, Object.assign({ formatter: (0, ChartTooltip_1.defaultFormatter)(dataUnit) }, tooltipProps))] })) })));
 };
 exports.default = PieChart;

package/lib/es/components/charts/RadialBarChart.d.ts

@@ -1,20 +1,38 @@
+import React from 'react';
+import { RadialBarChart as RechartsRadialBarChart, type RadialBarProps as RechartsRadialBarProps } from 'recharts';
+import { type DataType } from './chartHelper';
+import { type LegendProps } from './Legend';
+import { type ChartTooltipProps } from './ChartTooltip';
+import type { ResponsiveContainerProps } from './ResponsiveContainer';
+export type RadialBarChartDataType = DataType;
+export type RadialBarProps = Omit<RechartsRadialBarProps, 'ref'> & {};
+export type TextOptions = Record<string, unknown> & {
+    text?: string;
+    size?: string;
+    weight?: string;
+    color?: string;
+};
+type RechartsRadialBarChartProps = React.ComponentProps<typeof RechartsRadialBarChart>;
+export type RadialBarChartProps<T extends DataType> = Omit<RechartsRadialBarChartProps, 'data'> & {
+    width?: number;
+    height?: number;
+    data: T[];
+    dataKey?: string | number | ((obj: T) => any);
+    startAngle?: number;
+    endAngle?: number;
+    outerRadius?: number | string;
+    innerRadius?: number | string;
+    cx?: number | string;
+    cy?: number | string;
+    textOptions?: TextOptions;
+    radialBarOptions?: RadialBarProps;
+    containerOptions?: ResponsiveContainerProps;
+    showBarLabel?: boolean;
+    cornerRadius?: number;
+    background?: boolean;
+    range?: number[];
+    legend?: React.ReactElement<LegendProps> | boolean;
+    tooltip?: React.ReactElement<ChartTooltipProps> | boolean;
+};
+declare const RadialBarChart: <T extends DataType>(props: RadialBarChartProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default RadialBarChart;
-declare function RadialBarChart(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace RadialBarChart {
-    namespace defaultProps {
-        const width: number;
-        const height: number;
-        const data: never[];
-        const dataKey: string;
-        const startAngle: number;
-        const endAngle: number;
-        const innerRadius: string;
-        const outerRadius: string;
-        const clockWise: boolean;
-        const legend: import("react/jsx-runtime").JSX.Element;
-        const showBarLabel: boolean;
-        const cornerRadius: number;
-        const background: boolean;
-        const tooltip: boolean;
-    }
-}

package/lib/es/components/charts/RadialBarChart.js

@@ -2,41 +2,27 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const recharts_1 = require("recharts");
 const isFunction_1 = tslib_1.__importDefault(require("lodash/fp/isFunction"));
+const isObject_1 = tslib_1.__importDefault(require("lodash/fp/isObject"));
 const chartHelper_1 = require("./chartHelper");
 const Legend_1 = tslib_1.__importDefault(require("./Legend"));
-const RadialBarChart = props => {
-    const { width, height, data, dataKey, startAngle, endAngle, innerRadius, outerRadius, clockWise, legend, textOptions, radialBarOptions, showBarLabel, cornerRadius, background, range, tooltip } = props, remainingProps = tslib_1.__rest(props, ["width", "height", "data", "dataKey", "startAngle", "endAngle", "innerRadius", "outerRadius", "clockWise", "legend", "textOptions", "radialBarOptions", "showBarLabel", "cornerRadius", "background", "range", "tooltip"]);
+const ChartTooltip_1 = tslib_1.__importDefault(require("./ChartTooltip"));
+const RadialBarChart = (props) => {
+    const { width, height, data = [], dataKey = 'value', startAngle = 180, endAngle = 0, innerRadius = '30%', outerRadius = '100%', legend = (0, jsx_runtime_1.jsx)(Legend_1.default, {}), textOptions, radialBarOptions, containerOptions, showBarLabel = false, cornerRadius = 30, background = true, range, tooltip = false } = props, remainingProps = tslib_1.__rest(props, ["width", "height", "data", "dataKey", "startAngle", "endAngle", "innerRadius", "outerRadius", "legend", "textOptions", "radialBarOptions", "containerOptions", "showBarLabel", "cornerRadius", "background", "range", "tooltip"]);
     const _a = textOptions || {}, { text, size = '500%', weight = 'normal', color = 'gray-darkest' } = _a, remainingTextOptions = tslib_1.__rest(_a, ["text", "size", "weight", "color"]);
     const textStyle = {
         fontSize: size,
         fontWeight: weight,
         fill: color && (0, chartHelper_1.getColor)(color),
     };
-    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, Object.assign({ width: '100%', height: '100%' }, { children: (0, jsx_runtime_1.jsxs)(recharts_1.RadialBarChart, Object.assign({ width: width, height: height, data: data, innerRadius: innerRadius, outerRadius: outerRadius, startAngle: startAngle, endAngle: endAngle }, remainingProps, { children: [(0, jsx_runtime_1.jsx)(recharts_1.RadialBar, Object.assign({ label: showBarLabel && { fill: '#666', position: 'insideStart' }, background: background, clockWise: clockWise, dataKey: dataKey, cornerRadius: cornerRadius }, radialBarOptions, { children: data.map((entry, index) => {
+    const tooltipProps = (0, isObject_1.default)(tooltip) ? tooltip.props : {};
+    const legendProps = (0, isObject_1.default)(legend) ? legend.props : {};
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, Object.assign({}, containerOptions, { children: (0, jsx_runtime_1.jsxs)(recharts_1.RadialBarChart, Object.assign({ width: width, height: height, data: data, innerRadius: innerRadius, outerRadius: outerRadius, startAngle: startAngle, endAngle: endAngle }, remainingProps, { children: [(0, jsx_runtime_1.jsx)(recharts_1.RadialBar, Object.assign({ label: showBarLabel && { fill: '#666', position: 'insideStart' }, background: background, dataKey: dataKey, cornerRadius: cornerRadius }, radialBarOptions, { children: data.map((entry, index) => {
                         const cellColor = (0, chartHelper_1.getColor)(entry.color) || (0, chartHelper_1.getFromDefaultColors)(index);
                         return ((0, jsx_runtime_1.jsx)(recharts_1.Cell, { fill: (0, isFunction_1.default)(color) ? color(entry, index) : cellColor }, `cell-${index}`));
-                    }) })), range && (0, jsx_runtime_1.jsx)(recharts_1.PolarAngleAxis, { type: 'number', domain: range, angleAxisId: 0, tick: false }), textOptions && ((0, jsx_runtime_1.jsx)("text", Object.assign({ x: width / 2, y: height / 2, textAnchor: 'middle', dominantBaseline: 'middle', className: 'radialbarchart-text', style: textStyle }, remainingTextOptions, { children: text }))), legend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, Object.assign({ formatter: (value, _) => (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-color-darker' }, { children: value })) }, legend.props))), tooltip && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, Object.assign({ cursor: { fill: chartHelper_1.CURSOR_BACKGROUND_COLOR } }, tooltip.props))] })) })));
-};
-RadialBarChart.defaultProps = {
-    width: 400,
-    height: 200,
-    data: [],
-    dataKey: 'value',
-    startAngle: 180,
-    endAngle: 0,
-    innerRadius: '30%',
-    outerRadius: '100%',
-    clockWise: true,
-    legend: (0, jsx_runtime_1.jsx)(Legend_1.default, {}),
-    // textOptions,
-    // radialBarOptions,
-    showBarLabel: false,
-    cornerRadius: 30,
-    background: true,
-    // range,
-    tooltip: false,
+                    }) })), range && (0, jsx_runtime_1.jsx)(recharts_1.PolarAngleAxis, { type: 'number', domain: range, angleAxisId: 0, tick: false }), textOptions && ((0, jsx_runtime_1.jsx)("text", Object.assign({ x: width ? width / 2 : '50%', y: height ? height / 2 : '50%', textAnchor: 'middle', dominantBaseline: 'middle', className: 'radialbarchart-text', style: textStyle }, remainingTextOptions, { children: text }))), legend && ((0, jsx_runtime_1.jsx)(Legend_1.default, Object.assign({ formatter: (value, entry) => ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-color-darker' }, { children: value }))) }, legendProps))), tooltip && (0, jsx_runtime_1.jsx)(ChartTooltip_1.default, Object.assign({ cursor: { fill: chartHelper_1.CURSOR_BACKGROUND_COLOR } }, tooltipProps))] })) })));
 };
 exports.default = RadialBarChart;

package/lib/es/components/charts/ResponsiveContainer.d.ts

@@ -0,0 +1,2 @@
+import type { ResponsiveContainerProps as RechartResponsiveContainerProps } from 'recharts';
+export type ResponsiveContainerProps = Omit<Partial<RechartResponsiveContainerProps>, 'ref'> & {};

package/lib/es/components/charts/ResponsiveContainer.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("react");

package/lib/es/components/charts/Sector.js

@@ -0,0 +1 @@
+"use strict";

package/lib/es/components/charts/chartHelper.d.ts

@@ -1,5 +1,10 @@
-export const defaultChartColors: any[];
-export function getFromDefaultColors(index: any): any;
-export function getColor(colorKey: any): any;
-export const CURSOR_BACKGROUND_COLOR: "#a7afbb24";
-export function mapGridOptions(gridOptions: any): any;
+export type DataType = Record<string, unknown> & {
+    color?: string;
+};
+export declare const CURSOR_BACKGROUND_COLOR = "#a7afbb24";
+export declare const defaultChartColors: string[];
+export declare const getFromDefaultColors: (index: number) => string;
+export declare const getColor: (colorKey?: string) => string | undefined;
+export declare const mapGridOptions: <T extends {
+    stroke?: string | undefined;
+}>(gridOptions?: T | undefined) => T | undefined;

package/lib/es/components/charts/chartHelper.js

@@ -1,19 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mapGridOptions = exports.CURSOR_BACKGROUND_COLOR = exports.getColor = exports.getFromDefaultColors = exports.defaultChartColors = void 0;
+exports.mapGridOptions = exports.getColor = exports.getFromDefaultColors = exports.defaultChartColors = exports.CURSOR_BACKGROUND_COLOR = void 0;
 const tslib_1 = require("tslib");
-const colors_json_1 = tslib_1.__importDefault(require("../../styles/variables/colors.json"));
+const colors_json_1 = tslib_1.__importDefault(require("../../styles/variables/colors/colors.json"));
+const colors = colors_json_1.default;
+exports.CURSOR_BACKGROUND_COLOR = '#a7afbb24';
 const brightColors = ['color-warmup-corn', 'color-coldplay-khaki'];
-exports.defaultChartColors = Object.keys(colors_json_1.default)
+exports.defaultChartColors = Object.keys(colors)
     .reverse()
     .filter(key => !brightColors.includes(key))
-    .map(key => colors_json_1.default[key]);
-const getFromDefaultColors = index => exports.defaultChartColors[index];
+    .map(key => colors[key]);
+const getFromDefaultColors = (index) => exports.defaultChartColors[index];
 exports.getFromDefaultColors = getFromDefaultColors;
-const getColor = colorKey => colors_json_1.default[colorKey];
+const getColor = (colorKey) => (colorKey ? colors[colorKey] : undefined);
 exports.getColor = getColor;
-exports.CURSOR_BACKGROUND_COLOR = '#a7afbb24';
-const mapGridOptions = gridOptions => {
+const mapGridOptions = (gridOptions) => {
     if (!gridOptions) {
         return;
     }

package/lib/es/components/checkbox/Checkbox.d.ts

@@ -60,18 +60,23 @@ export type CheckboxProps = {
      * Note, when using the `custom` option, make sure to wrap the children with the class name
      * `checkbox-text-wrapper`. For using the checkbox tick, use an element with class name
      * `checkbox-text`.
+     *
      * @example
+     *
+     * ```tsx
      * <div className='checkbox-text-wrapper display-flex justify-content-between'>
-            <div className='margin-right-15'>
-                <div className='text-medium text-size-16 text-color-darker'>Option 1</div>
-                <div className='text-color-dark'>This option is a first option</div>
-            </div>
-            <div className='checkbox-text' />
-        </div>
+     *     <div className='margin-right-15'>
+     *         <div className='text-medium text-size-16 text-color-darker'>Option 1</div>
+     *         <div className='text-color-dark'>This option is a first option</div>
+     *     </div>
+     *     <div className='checkbox-text' />
+     * </div>
+     * ```
      */
     custom?: boolean;
     /**
      * Defines whether the checkbox is required or not.
+     *
      * @default false
      */
     required?: boolean;
@@ -85,16 +90,19 @@ export type CheckboxProps = {
     /**
      * Defines whether the checkbox is applying an inline style. Use this in combination
      * with other checkboxes.
+     *
      * @default false
      */
     inline?: boolean;
     /**
      * Defines whether the checkbox is on the right side.
+     *
      * @default false
      */
     right?: boolean;
     /**
      * Use "error" to change color of the checkbox.
+     *
      * @default false
      */
     error?: boolean;
@@ -111,6 +119,7 @@ export type CheckboxProps = {
     inputRef?: React.RefObject<HTMLInputElement>;
     /**
      * Number of the index used for keyboard support.
+     *
      * @default 0
      */
     tabIndex?: number;

package/lib/es/components/clearableInput/ClearableInput.d.ts

@@ -2,6 +2,14 @@ import React from 'react';
 export declare const DEFAULT_TYPE = "text";
 export declare const SUPPORTED_TYPES: string[];
 export type ClearableInputProps = {
+    /**
+     * Gives the input element the id.
+     */
+    id?: string;
+    /**
+     * Gives the input element a name.
+     */
+    name?: string;
     /**
      * The translated text that shall be shown when the input is empty.
      */
@@ -74,6 +82,58 @@ export type ClearableInputProps = {
      * @returns
      */
     onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Callback triggered when clicked into the input to react on it like when using an auto suggest dropdown
+     * @param event
+     * @returns
+     */
+    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
+    /**
+     * The mask prop will allow to use the component with an input mask.
+     * It defines the pattern that should be followed.
+     *
+     * For more details on masking, checkout the third party documentation for the
+     * input mask here: {@link https://github.com/sanniassin/react-input-mask}
+     *
+     * Simple masks can be defined as strings.
+     *
+     * The following characters will define mask format:
+     *
+     * Character: "9" 	= allowed input: "0-9"
+     *
+     * Character: "a" 	= allowed input: "a-z, A-Z"
+     *
+     * Character: "*" 	= allowed input: 0-9, a-z, A-Z
+     *
+     * Any format character can be escaped with a backslash.
+     *
+     * @example
+     * '-- *** *** ***' or '+4\\9 99 999 99'
+     *
+     * @example
+     * ['0', '0', /[0-9]/, ' ', /[a-zA-Z]/]
+     *
+     */
+    mask?: string | (string | RegExp)[];
+    /**
+     * Placeholder to cover unfilled parts of the mask.
+     *
+     * @default '_'
+     */
+    maskPlaceholder?: string | null;
+    /**
+     * Disabled the input component.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether mask prefix and placeholder should be displayed when input is empty and
+     * has no focus.
+     *
+     * @default false
+     */
+    alwaysShowMask?: boolean;
     /**
      * Additional classes to be set on the input element.
      */

package/lib/es/components/clearableInput/ClearableInput.js

@@ -10,16 +10,18 @@ const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const isFunction_1 = tslib_1.__importDefault(require("lodash/fp/isFunction"));
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const react_input_mask_1 = tslib_1.__importDefault(require("react-input-mask"));
 const usePrevious_1 = tslib_1.__importDefault(require("../../hooks/usePrevious"));
 exports.DEFAULT_TYPE = 'text';
 exports.SUPPORTED_TYPES = ['text', 'password', 'email'];
 const hasValue = (value) => !(0, isEmpty_1.default)(`${value}`);
 const ClearableInput = (0, react_1.forwardRef)((props, ref) => {
-    const { type = exports.DEFAULT_TYPE, defaultValue, value, maxLength, tabIndex = 0, hasError = false, inputRef, autoComplete, onChange = noop_1.default, onBlur = noop_1.default, onFocus = noop_1.default, onClear = noop_1.default, onKeyPress = noop_1.default, inputClassName = '', className = '', children } = props, remainingProps = tslib_1.__rest(props, ["type", "defaultValue", "value", "maxLength", "tabIndex", "hasError", "inputRef", "autoComplete", "onChange", "onBlur", "onFocus", "onClear", "onKeyPress", "inputClassName", "className", "children"]);
+    const { type = exports.DEFAULT_TYPE, defaultValue, value, maxLength, tabIndex = 0, hasError = false, inputRef, autoComplete, onChange = noop_1.default, onBlur = noop_1.default, onFocus = noop_1.default, onClear = noop_1.default, onKeyPress = noop_1.default, onClick = noop_1.default, mask, maskPlaceholder = '_', alwaysShowMask = false, inputClassName = '', disabled = false, className = '', children } = props, remainingProps = tslib_1.__rest(props, ["type", "defaultValue", "value", "maxLength", "tabIndex", "hasError", "inputRef", "autoComplete", "onChange", "onBlur", "onFocus", "onClear", "onKeyPress", "onClick", "mask", "maskPlaceholder", "alwaysShowMask", "inputClassName", "disabled", "className", "children"]);
     const initialValue = value || defaultValue || '';
     const [inputValue, setInputValue] = (0, react_1.useState)(initialValue);
     const [showClear, setShowClear] = (0, react_1.useState)(hasValue(initialValue));
     const isControlled = !(0, isNil_1.default)(value);
+    const hasMask = !!mask;
     // Handles new input value and saves it in the local state.
     // The value stored in the state is used for rendering.
     const changeInternalValue = (newValue = '') => {
@@ -57,15 +59,16 @@ const ClearableInput = (0, react_1.forwardRef)((props, ref) => {
             onClear(event);
         }
     };
-    const classes = (0, classnames_1.default)('ClearableInput', 'input-group', hasError && 'has-error', className && className);
-    const inputClassNames = (0, classnames_1.default)('form-control', inputClassName, showClear && 'withClearButton');
+    const classes = (0, classnames_1.default)('ClearableInput', 'input-group', hasError && 'has-error', disabled && 'pointer-events-none', className && className);
+    const inputClassNames = (0, classnames_1.default)('form-control', inputClassName, showClear && 'withClearButton', hasMask && 'withInputMask', disabled && 'disabled');
     const clearButtonClassNames = (0, classnames_1.default)('clearButton', !showClear && 'hide');
     const convertedType = type === null || type === void 0 ? void 0 : type.toLowerCase();
     const inputType = exports.SUPPORTED_TYPES.indexOf(convertedType) !== -1 ? convertedType : exports.DEFAULT_TYPE;
     const inputProps = Object.assign(Object.assign({}, (0, omit_1.default)(['value', 'defaultValue', 'onClear'])(remainingProps)), { className: inputClassNames, autoComplete, type: inputType, value: inputValue, onChange: handleChange, onKeyPress: handleKeyPress, onBlur,
         onFocus,
-        maxLength,
-        tabIndex, ref: inputRef || ref });
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes }, { children: [children && (0, isFunction_1.default)(children) ? children(inputProps) : (0, jsx_runtime_1.jsx)("input", Object.assign({}, inputProps)), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: clearButtonClassNames, onClick: clearInputValue }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) }))] })));
+        onClick,
+        disabled, maxLength: hasMask ? undefined : maxLength, tabIndex, ref: inputRef || ref });
+    const input = hasMask ? ((0, jsx_runtime_1.jsx)(react_input_mask_1.default, Object.assign({}, inputProps, { disabled: disabled, mask: mask, maskPlaceholder: maskPlaceholder, alwaysShowMask: alwaysShowMask }))) : ((0, jsx_runtime_1.jsx)("input", Object.assign({}, inputProps)));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes }, { children: [children && (0, isFunction_1.default)(children) ? children(inputProps) : input, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: clearButtonClassNames, onClick: clearInputValue }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) }))] })));
 });
 exports.default = ClearableInput;