@rio-cloud/rio-uikit 1.3.0 → 1.4.0

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ChartLabel = props => null;
+exports.default = ChartLabel;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ComposedChart as RechartsComposedChart, type XAxisProps, type YAxisProps } from 'recharts';
+import { ChartTooltipProps } from './ChartTooltip';
+import { type LegendProps } from './Legend';
+import type { LineProps } from './Line';
+import type { BarProps } from './Bar';
+import type { ReferenceLineProps } from './ReferenceLine';
+import type { GridProps } from './ChartGrid';
+import type { ResponsiveContainerProps } from './ResponsiveContainer';
+import type { AreaProps } from './Area';
+type RechartsComposedChartProps = React.ComponentProps<typeof RechartsComposedChart>;
+export type ComposedChartProps<T extends object> = Omit<RechartsComposedChartProps, 'data'> & {
+    width?: number;
+    height?: number;
+    data: T[];
+    dataUnit?: string;
+    dataKey?: string | number | ((obj: T) => any);
+    lines?: React.ReactElement<LineProps>[];
+    bars?: React.ReactElement<BarProps>[];
+    areas?: React.ReactElement<AreaProps>[];
+    referenceLines?: React.ReactElement<ReferenceLineProps>[];
+    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 ComposedChart: <T extends object>(props: ComposedChartProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default ComposedChart;

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

@@ -0,0 +1,32 @@
+"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");
+// @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 Legend_1 = require("./Legend");
+const ComposedChart = (props) => {
+    const { width, height, data = [], dataUnit = '', dataKey = 'value', lines = [], bars = [], areas = [], referenceLines = [], 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", "bars", "areas", "referenceLines", "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) ? Object.assign(Object.assign({}, (0, Legend_1.getLegendDefaultProps)()), legend.props) : {};
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, Object.assign({}, containerOptions, { children: (0, jsx_runtime_1.jsxs)(recharts_1.ComposedChart, 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)(recharts_1.Legend, Object.assign({}, legendProps)), areas.map(area => {
+                    const _a = area.props, { strokeColor, fill } = _a, remainingAreaProps = tslib_1.__rest(_a, ["strokeColor", "fill"]);
+                    return ((0, react_1.createElement)(recharts_1.Area, Object.assign({}, remainingAreaProps, { key: area.key, stroke: (0, chartHelper_1.getColor)(strokeColor), fill: (0, chartHelper_1.getColor)(fill) })));
+                }), bars.map(bar => {
+                    const _a = bar.props, { color } = _a, remainingBarProps = tslib_1.__rest(_a, ["color"]);
+                    const cellColor = color && (0, chartHelper_1.getColor)(color);
+                    return (0, jsx_runtime_1.jsx)(recharts_1.Bar, Object.assign({ unit: dataUnit }, remainingBarProps, { fill: cellColor }), bar.key);
+                }), lines.map(line => {
+                    const _a = line.props, { strokeColor } = _a, remainingLineProps = tslib_1.__rest(_a, ["strokeColor"]);
+                    return (0, react_1.createElement)(recharts_1.Line, Object.assign({}, remainingLineProps, { key: line.key, stroke: (0, chartHelper_1.getColor)(strokeColor) }));
+                }), referenceLines.map(referenceLine => {
+                    const _a = referenceLine.props, { stroke } = _a, remainingReferenceLineProps = tslib_1.__rest(_a, ["stroke"]);
+                    return ((0, react_1.createElement)(recharts_1.ReferenceLine, Object.assign({}, remainingReferenceLineProps, { key: referenceLine.key, stroke: (0, chartHelper_1.getColor)(stroke) })));
+                }), brush && (0, jsx_runtime_1.jsx)(recharts_1.Brush, { stroke: (0, chartHelper_1.getColor)('gray') })] })) })));
+};
+exports.default = ComposedChart;

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

@@ -1,18 +1,16 @@
-import { type LegendProps as RechartsLegendProps } from 'recharts';
+import type { LegendProps as RechartsLegendProps } from 'recharts';
 import type { Formatter, Payload } from 'recharts/types/component/DefaultLegendContent';
 export type LegendFormatter = Formatter;
 export type LegendPayload = Payload;
 export type LegendProps = Omit<RechartsLegendProps, 'ref' | 'formatter'> & {
     formatter?: (value: any, entry: any, index: number) => void;
 };
-declare const Legend: {
-    (props: LegendProps): import("react/jsx-runtime").JSX.Element;
-    defaultProps: {
-        iconType: string;
-        iconSize: number;
-        layout: string;
-        align: string;
-        verticalAlign: string;
-    };
+export declare const getLegendDefaultProps: () => {
+    iconType: string;
+    iconSize: number;
+    layout: string;
+    align: string;
+    verticalAlign: string;
 };
+declare const Legend: (props: LegendProps) => null;
 export default Legend;

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

@@ -1,22 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
+exports.getLegendDefaultProps = void 0;
 // @ts-ignore-next-line importsNotUsedAsValues
 require("react");
-const recharts_1 = require("recharts");
-const Legend = (props) => {
-    const { verticalAlign, wrapperStyle } = props;
-    return ((0, jsx_runtime_1.jsx)(recharts_1.Legend
-    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-    , Object.assign({ 
-        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-        formatter: props.formatter, wrapperStyle: verticalAlign === 'bottom' ? { bottom: 0 } : wrapperStyle }, props)));
-};
-Legend.defaultProps = {
+const getLegendDefaultProps = () => ({
     iconType: 'circle',
     iconSize: 12,
     layout: 'vertical',
     align: 'right',
     verticalAlign: 'top',
-};
+});
+exports.getLegendDefaultProps = getLegendDefaultProps;
+const Legend = (props) => null;
 exports.default = Legend;

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

@@ -2,6 +2,11 @@
 import type { LineProps as RechartsLineProps } from 'recharts';
 export type LineProps = Omit<RechartsLineProps, 'ref'> & {
     strokeColor?: string;
+    dataKey?: string;
+    unit?: string;
+    legendType?: string;
+    type?: string;
+    isAnimationActive?: boolean;
 };
 declare const Line: React.FC<LineProps>;
 export default Line;

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

@@ -1,12 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const Line = () => null;
-Line.defaultProps = {
-    dataKey: 'value',
-    unit: '',
-    strokeColor: 'color-coldplay-fountain',
-    legendType: 'square',
-    type: 'monotone',
-    isAnimationActive: true,
-};
+const Line = ({ dataKey = 'value', unit = '', strokeColor = 'color-coldplay-fountain', legendType = 'square', type = 'monotone', isAnimationActive = true, }) => null;
 exports.default = Line;

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

@@ -3,6 +3,7 @@ import { LineChart as RechartsLineChart, type XAxisProps, type YAxisProps } from
 import { ChartTooltipProps } from './ChartTooltip';
 import { type LegendProps } from './Legend';
 import type { LineProps } from './Line';
+import type { ReferenceLineProps } from './ReferenceLine';
 import type { GridProps } from './ChartGrid';
 import type { ResponsiveContainerProps } from './ResponsiveContainer';
 type RechartsLineChartProps = React.ComponentProps<typeof RechartsLineChart>;
@@ -13,6 +14,7 @@ export type LineChartProps<T extends object> = Omit<RechartsLineChartProps, 'dat
     dataUnit?: string;
     dataKey?: string | number | ((obj: T) => any);
     lines: React.ReactElement<LineProps>[];
+    referenceLines?: React.ReactElement<ReferenceLineProps>[];
     xAxisOptions?: XAxisProps;
     yAxisOptions?: YAxisProps;
     gridOptions?: GridProps;

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

@@ -9,14 +9,17 @@ 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 Legend_1 = tslib_1.__importDefault(require("./Legend"));
+const Legend_1 = 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 { width, height, data = [], dataUnit = '', dataKey = 'value', lines = [], referenceLines = [], 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", "referenceLines", "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 legendProps = (0, isObject_1.default)(legend) ? Object.assign(Object.assign({}, (0, Legend_1.getLegendDefaultProps)()), 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)(recharts_1.Legend, Object.assign({}, legendProps)), lines.map(line => {
                     const _a = line.props, { strokeColor } = _a, remainingLineProps = tslib_1.__rest(_a, ["strokeColor"]);
                     return (0, react_1.createElement)(recharts_1.Line, Object.assign({}, remainingLineProps, { key: line.key, stroke: (0, chartHelper_1.getColor)(strokeColor) }));
+                }), referenceLines.map(referenceLine => {
+                    const _a = referenceLine.props, { stroke } = _a, remainingReferenceLineProps = tslib_1.__rest(_a, ["stroke"]);
+                    return ((0, react_1.createElement)(recharts_1.ReferenceLine, Object.assign({}, remainingReferenceLineProps, { key: referenceLine.key, stroke: (0, chartHelper_1.getColor)(stroke) })));
                 }), brush && (0, jsx_runtime_1.jsx)(recharts_1.Brush, { stroke: (0, chartHelper_1.getColor)('gray') })] })) })));
 };
 exports.default = LineChart;

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

@@ -8,7 +8,7 @@ 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 Legend_1 = require("./Legend");
 const ChartTooltip_1 = tslib_1.__importStar(require("./ChartTooltip"));
 const RADIAN = Math.PI / 180;
 const renderCustomInnerLabel = (dataUnit) => ({ cx, cy, midAngle, innerRadius, outerRadius, value }) => {
@@ -18,13 +18,13 @@ const renderCustomInnerLabel = (dataUnit) => ({ cx, cy, midAngle, innerRadius, o
     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"]);
+    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)(recharts_1.Legend, {}), 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, 
+    const legendProps = (0, isObject_1.default)(legend) ? Object.assign(Object.assign({}, (0, Legend_1.getLegendDefaultProps)()), 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)(recharts_1.Legend, 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) => {

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

@@ -8,10 +8,10 @@ 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 Legend_1 = require("./Legend");
 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 { width, height, data = [], dataKey = 'value', startAngle = 180, endAngle = 0, innerRadius = '30%', outerRadius = '100%', legend = (0, jsx_runtime_1.jsx)(recharts_1.Legend, {}), 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,
@@ -19,10 +19,10 @@ const RadialBarChart = (props) => {
         fill: color && (0, chartHelper_1.getColor)(color),
     };
     const tooltipProps = (0, isObject_1.default)(tooltip) ? tooltip.props : {};
-    const legendProps = (0, isObject_1.default)(legend) ? legend.props : {};
+    const legendProps = (0, isObject_1.default)(legend) ? Object.assign(Object.assign({}, (0, Legend_1.getLegendDefaultProps)()), 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 ? 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))] })) })));
+                    }) })), 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)(recharts_1.Legend, 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/ReferenceLine.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { ReferenceLineProps as RechartsReferenceLineProps } from 'recharts';
+export type ReferenceLineProps = Omit<RechartsReferenceLineProps, 'ref'> & {
+    stroke?: string;
+};
+declare const Line: React.FC<ReferenceLineProps>;
+export default Line;

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Line = ({ stroke = 'color-coldplay-fountain' }) => null;
+exports.default = Line;

package/lib/es/components/dialog/Dialog.d.ts

@@ -3,6 +3,7 @@ export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullwidth'
 export type BaseDialogProps = {
     /**
      * Opens the dialog when set to `true`.
+     *
      * @default false
      */
     show: boolean;
@@ -16,6 +17,7 @@ export type BaseDialogProps = {
     subtitle?: React.ReactNode;
     /**
      * Shows a close button when set to `true`.
+     *
      * @default true
      */
     showCloseButton?: boolean;
@@ -25,24 +27,29 @@ export type BaseDialogProps = {
     onClose?: () => void;
     /**
      * Defined how large the dialog will be rendered.
-     * By default, the dialog has a medium size and thus it can be omitted.
+     *
+     * By default, the dialog has a medium size, and thus it can be omitted.
      *
      * Possible values are: `xs`, `sm`, `lg` `xl` `fullwidth` `fullheight` `fullscreen`
+     *
      * @default 'md'
      */
     bsSize?: DialogSize;
     /**
      * Enables or disabled closing the dialog via esc key.
+     *
      * @default false
      */
     disableEsc?: boolean;
     /**
      * Enables the modal body to overflow and use inline scrolling if needed.
+     *
      * @default false
      */
     useOverflow?: boolean;
     /**
      * Show Header and Footer Borders for the "xs" dialog
+     *
      * @default false
      */
     showXsDialogBorders?: boolean;
@@ -74,6 +81,7 @@ export type DialogProps = BaseDialogProps & {
     headerButtons?: React.ReactNode;
     /**
      * Deprecate to align with other dialog callbacks.
+     *
      * @deprecated please use `onClose`
      */
     onHide?: VoidFunction;
@@ -82,9 +90,9 @@ export type DialogProps = BaseDialogProps & {
      */
     onEsc?: VoidFunction;
     /**
-     * A callback function to be executed before closing the dialog. If the function returns
-     * `false` the dialog will not be closed
-     * @returns
+     * A callback function to be executed before closing the dialog.
+     *
+     * If the function returns `false`, the dialog will not be closed
      */
     onCloseValidation?: () => boolean;
 };

package/lib/es/components/dialog/SplitDialog.d.ts

@@ -26,9 +26,9 @@ export type SplitDialogProps = BaseDialogProps & {
      */
     footerClassName?: string;
     /**
-     * A callback function to be executed before closing the dialog. If the function returns
-     * `false` the dialog will not be closed
-     * @returns
+     * A callback function to be executed before closing the dialog.
+     *
+     * If the function returns `false`, the dialog will not be closed
      */
     onCloseValidation?: () => boolean;
 };

package/lib/es/components/groupedItemList/GroupedItemList.d.ts

@@ -0,0 +1,79 @@
+import React from 'react';
+import { SortDirectionType } from '../../SortUtils';
+export type Group = {
+    groupKey: string;
+    items: any[];
+};
+export type GroupedItemListProps<T> = {
+    /**
+     * The list of items to be grouped and rendered.
+     *
+     * By default, the component assumes an item object containing an 'id' and 'name' property
+     * plus some other attributes.
+     */
+    items: T[];
+    /**
+     * The property of the items to group by as a string, or a custom group function.
+     * Defaults to 'name' if not provided.
+     *
+     * @default 'name'
+     */
+    groupBy?: keyof T | ((item: T) => string);
+    /**
+     * The order in which to sort the groups. Accepts 'asc' for ascending or 'desc' for descending.
+     * @default 'asc'.
+     */
+    groupSortOrder?: SortDirectionType;
+    /**
+     * The order in which to sort the items inside a group. Accepts 'asc' for ascending or 'desc' for descending.
+     * @default 'asc'.
+     */
+    itemSortOrder?: SortDirectionType;
+    /**
+     * Sorting function for the groups.
+     */
+    groupSortFunction?: (groups: Group[]) => Group[];
+    /**
+     * Sorting function for the items within each group.
+     */
+    itemSortFunction?: (items: T[]) => T[];
+    /**
+     * A custom render function for the group divider.
+     * Receives the group key (e.g., letter or date) as a parameter.
+     */
+    renderDivider?: (groupKey: string) => React.ReactNode;
+    /**
+     * A custom render function for individual list items.
+     * Receives an item as a parameter.
+     */
+    renderItem?: (item: T) => React.ReactNode;
+    /**
+     * Specifies the HTML element to use for the list inside each group.
+     * Default is 'div'. Use 'ul' for rendering the list items as `<li>` elements.
+     */
+    listElement?: 'div' | 'ul';
+    /**
+     * Optional class name for the list element inside each group.
+     * Applied to the `div` or `ul` wrapping the items.
+     */
+    listElementClassName?: string;
+    /**
+     * Optional class name for the divider element in each group.
+     * Applied to the `div` wrapping each group divider.
+     */
+    dividerElementClassName?: string;
+    /**
+     * Optional class name for the outer wrapper element.
+     * Applied to the outer `div` wrapping the entire component.
+     */
+    className?: string;
+};
+/**
+ * A React component that groups and renders a list of items based on a specified property.
+ * The component can be customized to render dividers and list items in different styles.
+ *
+ * @param {GroupedItemListProps} props - The props for the component.
+ * @returns {JSX.Element} The grouped and rendered list component.
+ */
+declare const GroupedItemList: <T>(props: GroupedItemListProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default GroupedItemList;

package/lib/es/components/groupedItemList/GroupedItemList.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const SortUtils_1 = require("../../SortUtils");
+/**
+ * A React component that groups and renders a list of items based on a specified property.
+ * The component can be customized to render dividers and list items in different styles.
+ *
+ * @param {GroupedItemListProps} props - The props for the component.
+ * @returns {JSX.Element} The grouped and rendered list component.
+ */
+const GroupedItemList = (props) => {
+    const { items, groupBy = 'name', groupSortOrder = 'asc', // Default to ascending order if not specified
+    groupSortFunction, itemSortFunction, itemSortOrder = 'asc', // Default to ascending order if not specified
+    renderDivider, renderItem, listElement = 'div', // Default to 'div' if not specified
+    listElementClassName, dividerElementClassName, className, } = props;
+    // Default group sorting function or specific function provided
+    const groupSortFn = groupSortFunction
+        ? groupSortFunction
+        : (groups) => (0, SortUtils_1.naturalSortByProperty)(groups, 'groupKey', groupSortOrder);
+    // Default item sorting within groups or specific function provided
+    const itemSortFn = itemSortFunction
+        ? itemSortFunction
+        : (itemsToSort) => (0, SortUtils_1.sortByProperty)(itemsToSort, groupBy, itemSortOrder);
+    // Determine the grouping function based on the type of groupBy
+    // const getGroupKey = (item: T): string => {
+    //     if (typeof groupBy === 'string') {
+    //         if (groupBy === 'name') {
+    //             return (item as any).name?.[0]?.toUpperCase() ?? '';
+    //         }
+    //         return (item as any)[groupBy]?.toString() ?? '';
+    //     } else if (typeof groupBy === 'function') {
+    //         return groupBy(item);
+    //     }
+    //     throw new Error('Please define a "groupBy" property as a string or function.');
+    // };
+    const getGroupKey = typeof groupBy === 'function'
+        ? groupBy
+        : (item) => { var _a, _b, _c; return (_c = (_b = (_a = item[groupBy]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : ''; };
+    // Group items by the specified property
+    // const allGroups = useMemo(
+    //     () =>
+    //         items.reduce<Record<string, T[]>>((acc, item) => {
+    //             const groupKey = getGroupKey(item);
+    //             if (!acc[groupKey]) {
+    //                 acc[groupKey] = [];
+    //             }
+    //             acc[groupKey].push(item);
+    //             return acc;
+    //         }, {}),
+    //     [items, getGroupKey]
+    // );
+    // Group items by the specified property
+    const groupedItems = (0, react_1.useMemo)(() => {
+        // Explicitly typing the accumulator as Record<string, T[]>
+        const groups = items.reduce((acc, item) => {
+            const groupKey = getGroupKey(item);
+            if (!acc[groupKey]) {
+                acc[groupKey] = [];
+            }
+            acc[groupKey].push(item);
+            return acc;
+        }, {});
+        return Object.keys(groups).map(groupKey => ({
+            groupKey,
+            items: groups[groupKey],
+        }));
+    }, [items, getGroupKey]);
+    // Assign the specified list element ('div' or 'ul')
+    const ListElement = listElement;
+    // Sort groups using the provided sort function
+    const sortedGroups = (0, react_1.useMemo)(() => groupSortFn(groupedItems), [groupedItems, groupSortFn]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `grouped-item-list ${className !== null && className !== void 0 ? className : ''}` }, { children: sortedGroups.map(group => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `group-divider ${dividerElementClassName !== null && dividerElementClassName !== void 0 ? dividerElementClassName : ''}` }, { children: renderDivider ? renderDivider(group.groupKey) : group.groupKey })), (0, jsx_runtime_1.jsx)(ListElement, Object.assign({ className: listElementClassName }, { children: itemSortFn(group.items).map(item => {
+                        var _a;
+                        return renderItem ? (renderItem(item)) : ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'item-name' }, { children: item.name })) }, (_a = item.id) !== null && _a !== void 0 ? _a : crypto.randomUUID()));
+                    }) }))] }, group.groupKey))) })));
+};
+exports.default = GroupedItemList;

package/lib/es/components/licensePlate/LicensePlate.d.ts

@@ -0,0 +1,19 @@
+import { type PropsWithChildren } from 'react';
+export type LicensePlateProps = {
+    /**
+     * The country code.
+     *
+     * Should be a string with 1-3 capital letters.
+     */
+    countryCode?: string;
+    /**
+     * Whether the EU stars should be hidden.
+     */
+    hideStars?: boolean;
+    /**
+     * Additional classes added to the wrapping element.
+     */
+    className?: string;
+};
+declare const LicensePlate: (props: PropsWithChildren<LicensePlateProps>) => import("react/jsx-runtime").JSX.Element;
+export default LicensePlate;

package/lib/es/components/licensePlate/LicensePlate.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const euStars = ((0, jsx_runtime_1.jsx)("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', width: '10', height: '10' }, { children: (0, jsx_runtime_1.jsx)("path", { fill: '#FFC200', fillRule: 'nonzero', d: 'M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z' }) })));
+const LicensePlate = (props) => {
+    const { countryCode, hideStars, className = '', children } = props;
+    let letterCount = '';
+    if ((countryCode === null || countryCode === void 0 ? void 0 : countryCode.length) === 2)
+        letterCount = 'two-letters';
+    if ((countryCode === null || countryCode === void 0 ? void 0 : countryCode.length) === 3)
+        letterCount = 'three-letters';
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `license-plate ${className}` }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'plate-content' }, { children: [countryCode && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'plate-country' }, { children: [!hideStars && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'stars' }, { children: euStars })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: `plate-country-code ${letterCount}` }, { children: countryCode }))] }))), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'plate-number' }, { children: children }))] })) })));
+};
+exports.default = LicensePlate;

package/lib/es/components/selects/BaseSelectDropdown.d.ts

@@ -36,6 +36,7 @@ export type SelectOption = {
 export type BaseSelectDropdownProps<T extends SelectOption> = {
     options?: T[];
     isOpen?: boolean;
+    isLoading?: boolean;
     updateDOMValues?: (values: OptionDOMValue[] | undefined) => void;
     onOpen?: (hasDropup: boolean) => void;
     onSelect?: (selectedItem: T | undefined) => void;