@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/src/components/charts/ComposedChart.js

@@ -0,0 +1,32 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComposedChart as RechartsComposedChart, Line as RechartsLine, Bar as RechartsBar, Area as RechartsArea, Legend as RechartsLegend, Brush, CartesianGrid, ResponsiveContainer, XAxis as RechartsXAxis, YAxis as RechartsYAxis, } from 'recharts';
+import isObject from 'lodash/fp/isObject';
+import { getColor, mapGridOptions } from './chartHelper';
+import ChartTooltip from './ChartTooltip';
+import { getLegendDefaultProps } from './Legend';
+import { renderAxis } from './XAxis';
+import { getBarDefaultProps } from './Bar';
+import { renderReferenceLine } from './ReferenceLine';
+import { getLineDefaultProps } from './Line';
+import { getAreaDefaultProps } from './Area';
+const ComposedChart = (props) => {
+    const { width, height, data = [], dataUnit = '', dataKey = 'value', lines = [], bars = [], areas = [], referenceLines = [], xAxisOptions, yAxisOptions, additionalAxes = [], gridOptions, containerOptions, showXAxis = true, showYAxis = false, showGrid = false, legend, brush = false, tooltip = true, ...remainingProps } = props;
+    const tooltipProps = isObject(tooltip) ? tooltip.props : {};
+    const legendProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};
+    return (_jsx(ResponsiveContainer, { ...containerOptions, children: _jsxs(RechartsComposedChart, { width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 }, ...remainingProps, children: [showGrid && _jsx(CartesianGrid, { strokeDasharray: '3 3', ...mapGridOptions(gridOptions) }), _jsx(RechartsXAxis, { hide: !showXAxis, dataKey: dataKey, ...xAxisOptions }), _jsx(RechartsYAxis, { hide: !showYAxis, unit: dataUnit, ...yAxisOptions }), additionalAxes.map(renderAxis), tooltip && _jsx(ChartTooltip, { ...tooltipProps }), legend && _jsx(RechartsLegend, { ...legendProps }), areas.map(area => {
+                    const areaPropsWithDefault = { ...getAreaDefaultProps(), ...area.props };
+                    const { strokeColor, fill, ...remainingAreaProps } = areaPropsWithDefault;
+                    return (_createElement(RechartsArea, { ...remainingAreaProps, key: area.key, stroke: getColor(strokeColor), fill: getColor(fill) }));
+                }), bars.map(bar => {
+                    const barPropsWithDefault = { ...getBarDefaultProps(), ...bar.props };
+                    const { color, ...remainingBarProps } = barPropsWithDefault;
+                    const cellColor = color && getColor(color);
+                    return _jsx(RechartsBar, { unit: dataUnit, ...remainingBarProps, fill: cellColor }, bar.key);
+                }), lines.map(line => {
+                    const linePropsWithDefault = { ...getLineDefaultProps(), ...line.props };
+                    const { strokeColor, ...remainingLineProps } = linePropsWithDefault;
+                    return (_createElement(RechartsLine, { ...remainingLineProps, key: line.key, stroke: getColor(strokeColor) }));
+                }), referenceLines.map(renderReferenceLine), brush && _jsx(Brush, { stroke: getColor('gray') })] }) }));
+};
+export default ComposedChart;

package/src/components/charts/Legend.d.ts

@@ -0,0 +1,16 @@
+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;
+};
+export declare const getLegendDefaultProps: () => {
+    iconType: string;
+    iconSize: number;
+    layout: string;
+    align: string;
+    verticalAlign: string;
+};
+declare const Legend: (props: LegendProps) => null;
+export default Legend;

package/src/components/charts/Legend.js

@@ -0,0 +1,9 @@
+export const getLegendDefaultProps = () => ({
+    iconType: 'circle',
+    iconSize: 12,
+    layout: 'vertical',
+    align: 'right',
+    verticalAlign: 'top',
+});
+const Legend = (props) => null;
+export default Legend;

package/src/components/charts/Line.d.ts

@@ -0,0 +1,20 @@
+import type { LineProps as RechartsLineProps } from 'recharts';
+import type { CurveType } from 'recharts/types/shape/Curve';
+export type LineProps = Omit<RechartsLineProps, 'ref'> & {
+    strokeColor?: string;
+    dataKey?: string;
+    unit?: string;
+    legendType?: string;
+    type?: CurveType;
+    isAnimationActive?: boolean;
+};
+export declare const getLineDefaultProps: () => {
+    dataKey: string;
+    unit: string;
+    strokeColor: string;
+    legendType: string;
+    type: string;
+    isAnimationActive: boolean;
+};
+declare const Line: (props: LineProps) => null;
+export default Line;

package/src/components/charts/Line.js

@@ -0,0 +1,10 @@
+export const getLineDefaultProps = () => ({
+    dataKey: 'value',
+    unit: '',
+    strokeColor: 'color-coldplay-fountain',
+    legendType: 'square',
+    type: 'monotone',
+    isAnimationActive: true,
+});
+const Line = (props) => null;
+export default Line;

package/src/components/charts/LineChart.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { LineChart as RechartsLineChart, type XAxisProps, type YAxisProps, type BrushProps } from 'recharts';
+import { type 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>;
+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>[];
+    referenceLines?: React.ReactElement<ReferenceLineProps>[];
+    xAxisOptions?: XAxisProps;
+    yAxisOptions?: YAxisProps;
+    additionalAxes?: React.ReactElement<XAxisProps | YAxisProps>[];
+    gridOptions?: GridProps;
+    containerOptions?: ResponsiveContainerProps;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    showGrid?: boolean;
+    legend?: React.ReactElement<LegendProps> | boolean;
+    tooltip?: React.ReactElement<ChartTooltipProps> | boolean;
+    brush?: boolean;
+    brushOptions?: BrushProps;
+};
+declare const LineChart: <T extends object>(props: LineChartProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default LineChart;

package/src/components/charts/LineChart.js

@@ -0,0 +1,21 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LineChart as RechartsLineChart, Line as RechartsLine, Legend as RechartsLegend, Brush, CartesianGrid, ResponsiveContainer, XAxis as RechartsXAxis, YAxis as RechartsYAxis, } from 'recharts';
+import isObject from 'lodash/fp/isObject';
+import { getColor, mapGridOptions } from './chartHelper';
+import ChartTooltip from './ChartTooltip';
+import { getLegendDefaultProps } from './Legend';
+import { renderAxis } from './XAxis';
+import { getLineDefaultProps } from './Line';
+import { renderReferenceLine } from './ReferenceLine';
+const LineChart = (props) => {
+    const { width, height, data = [], dataUnit = '', dataKey = 'value', lines = [], referenceLines = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showXAxis = true, showYAxis = false, additionalAxes = [], showGrid = false, legend, brush = false, tooltip = true, brushOptions = {}, ...remainingProps } = props;
+    const tooltipProps = isObject(tooltip) ? tooltip.props : {};
+    const legendProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};
+    return (_jsx(ResponsiveContainer, { ...containerOptions, children: _jsxs(RechartsLineChart, { width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 }, ...remainingProps, children: [showGrid && _jsx(CartesianGrid, { strokeDasharray: '3 3', ...mapGridOptions(gridOptions) }), _jsx(RechartsXAxis, { hide: !showXAxis, dataKey: dataKey, ...xAxisOptions }), _jsx(RechartsYAxis, { hide: !showYAxis, unit: dataUnit, ...yAxisOptions }), additionalAxes.map(renderAxis), tooltip && _jsx(ChartTooltip, { ...tooltipProps }), legend && _jsx(RechartsLegend, { ...legendProps }), lines.map(line => {
+                    const linePropsWithDefault = { ...getLineDefaultProps(), ...line.props };
+                    const { strokeColor, ...remainingLineProps } = linePropsWithDefault;
+                    return (_createElement(RechartsLine, { ...remainingLineProps, key: line.key, stroke: getColor(strokeColor) }));
+                }), referenceLines.map(renderReferenceLine), brush && _jsx(Brush, { ...brushOptions, stroke: getColor('gray') })] }) }));
+};
+export default LineChart;

package/src/components/charts/PieChart.d.ts

@@ -0,0 +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;

package/src/components/charts/PieChart.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PieChart as RechartsPieChart, Legend as RechartsLegend, Pie, Cell, ResponsiveContainer, } from 'recharts';
+import isFunction from 'lodash/fp/isFunction';
+import isObject from 'lodash/fp/isObject';
+import { getFromDefaultColors, getColor } from './chartHelper';
+import { getLegendDefaultProps } from './Legend';
+import ChartTooltip, { defaultFormatter } from './ChartTooltip';
+const RADIAN = Math.PI / 180;
+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 (_jsx("text", { 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 = _jsx(RechartsLegend, {}), tooltip = true, pieOptions, containerOptions, ...remainingProps } = props;
+    // biome-ignore lint/suspicious/noExplicitAny: unknown type
+    const renderLabels = (entry) => `${isFunction(dataKey) ? dataKey(entry) : entry[dataKey]} ${dataUnit}`;
+    const pieLabel = labels && (innerLabels ? renderCustomInnerLabel(dataUnit) : renderLabels);
+    const tooltipProps = isObject(tooltip) ? tooltip.props : {};
+    const legendProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};
+    return (_jsx(ResponsiveContainer, { ...containerOptions, children: _jsxs(RechartsPieChart, { width: width, height: height, ...remainingProps, children: [legend && (_jsx(RechartsLegend, { formatter: (value, entry) => (_jsx("span", { className: 'text-color-darker', children: value })), ...legendProps })), _jsx(Pie, { 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 = getColor(entry.color) || getFromDefaultColors(index);
+                        return (_jsx(Cell, { fill: isFunction(color) ? getColor(color(entry)) : cellColor }, `cell-${index}`));
+                    }) }), tooltip && _jsx(ChartTooltip, { formatter: defaultFormatter(dataUnit), ...tooltipProps })] }) }));
+};
+export default PieChart;

package/src/components/charts/RadialBarChart.d.ts

@@ -0,0 +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;

package/src/components/charts/RadialBarChart.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RadialBarChart as RechartsRadialBarChart, RadialBar as RechartsRadialBar, Legend as RechartsLegend, PolarAngleAxis, Cell, ResponsiveContainer, } from 'recharts';
+import isFunction from 'lodash/fp/isFunction';
+import isObject from 'lodash/fp/isObject';
+import { getColor, getFromDefaultColors, CURSOR_BACKGROUND_COLOR } from './chartHelper';
+import { getLegendDefaultProps } from './Legend';
+import ChartTooltip from './ChartTooltip';
+const RadialBarChart = (props) => {
+    const { width, height, data = [], dataKey = 'value', startAngle = 180, endAngle = 0, innerRadius = '30%', outerRadius = '100%', legend = _jsx(RechartsLegend, {}), textOptions, radialBarOptions, containerOptions, showBarLabel = false, cornerRadius = 30, background = true, range, tooltip = false, ...remainingProps } = props;
+    const { text, size = '500%', weight = 'normal', color = 'gray-darkest', ...remainingTextOptions } = textOptions || {};
+    const textStyle = {
+        fontSize: size,
+        fontWeight: weight,
+        fill: color && getColor(color),
+    };
+    const tooltipProps = isObject(tooltip) ? tooltip.props : {};
+    const legendProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};
+    return (_jsx(ResponsiveContainer, { ...containerOptions, children: _jsxs(RechartsRadialBarChart, { width: width, height: height, data: data, innerRadius: innerRadius, outerRadius: outerRadius, startAngle: startAngle, endAngle: endAngle, ...remainingProps, children: [_jsx(RechartsRadialBar, { label: showBarLabel && { fill: '#666', position: 'insideStart' }, background: background, dataKey: dataKey, cornerRadius: cornerRadius, ...radialBarOptions, children: data.map((entry, index) => {
+                        const cellColor = getColor(entry.color) || getFromDefaultColors(index);
+                        return (_jsx(Cell, { fill: isFunction(color) ? color(entry, index) : cellColor }, `cell-${index}`));
+                    }) }), range && _jsx(PolarAngleAxis, { type: 'number', domain: range, angleAxisId: 0, tick: false }), textOptions && (_jsx("text", { x: width ? width / 2 : '50%', y: height ? height / 2 : '50%', textAnchor: 'middle', dominantBaseline: 'middle', className: 'radialbarchart-text', style: textStyle, ...remainingTextOptions, children: text })), legend && (_jsx(RechartsLegend, { formatter: (value, entry) => (_jsx("span", { className: 'text-color-darker', children: value })), ...legendProps })), tooltip && _jsx(ChartTooltip, { cursor: { fill: CURSOR_BACKGROUND_COLOR }, ...tooltipProps })] }) }));
+};
+export default RadialBarChart;

package/src/components/charts/ReferenceLine.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type ReferenceLineProps as RechartsReferenceLineProps } from 'recharts';
+export type ReferenceLineProps = Omit<RechartsReferenceLineProps, 'ref'> & {
+    stroke?: string;
+};
+export declare const getReferenceLineDefaultProps: () => {
+    stroke: string;
+};
+export declare const renderReferenceLine: (element: React.ReactElement<ReferenceLineProps>) => import("react/jsx-runtime").JSX.Element;
+declare const ReferenceLine: (props: ReferenceLineProps) => null;
+export default ReferenceLine;

package/src/components/charts/ReferenceLine.js

@@ -0,0 +1,15 @@
+import { createElement as _createElement } from "react";
+import { ReferenceLine as RechartsReferenceLine, } from 'recharts';
+import { getColor } from './chartHelper';
+export const getReferenceLineDefaultProps = () => ({
+    stroke: 'color-coldplay-fountain',
+});
+export const renderReferenceLine = (element) => {
+    const referenceLinePropsWithDefault = { ...getReferenceLineDefaultProps(), ...element.props };
+    const { stroke, ...remainingReferenceLineProps } = referenceLinePropsWithDefault;
+    return _createElement(RechartsReferenceLine, { ...remainingReferenceLineProps, key: element.key, stroke: getColor(stroke) });
+};
+// This is only used for passing this as prop to the UIKIT charts wrapper.
+// Recharts component need to be direct children of the chart itself and cannot be wrapped again
+const ReferenceLine = (props) => null;
+export default ReferenceLine;

package/src/components/charts/ResponsiveContainer.d.ts

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

package/src/components/charts/ResponsiveContainer.js

@@ -0,0 +1 @@
+export {};

package/src/components/charts/XAxis.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type XAxisProps as XAxisPropsProps } from 'recharts';
+import { type YAxisProps } from './YAxis';
+export type XAxisProps = Partial<XAxisPropsProps> & {};
+export declare const renderAxis: (axis: React.ReactElement<XAxisProps | YAxisProps>, index: number) => import("react/jsx-runtime").JSX.Element | null;
+declare const XAxis: React.FC<XAxisProps>;
+export default XAxis;

package/src/components/charts/XAxis.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { XAxis as RechartsXAxis, YAxis as RechartsYAxis } from 'recharts';
+import YAxis from './YAxis';
+export const renderAxis = (axis, index) => {
+    const key = `additional-axis-${index}`;
+    if (React.isValidElement(axis)) {
+        if (axis.type === XAxis) {
+            return _jsx(RechartsXAxis, { ...axis.props }, key);
+        }
+        if (axis.type === YAxis) {
+            return _jsx(RechartsYAxis, { ...axis.props }, key);
+        }
+    }
+    return null;
+};
+const XAxis = props => null;
+export default XAxis;

package/src/components/charts/YAxis.d.ts

@@ -0,0 +1,4 @@
+import type { YAxisProps as YAxisPropsProps } from 'recharts';
+export type YAxisProps = Omit<YAxisPropsProps, 'ref'> & {};
+declare const YAxis: React.FC<YAxisProps>;
+export default YAxis;

package/src/components/charts/YAxis.js

@@ -0,0 +1,2 @@
+const YAxis = props => null;
+export default YAxis;

package/src/components/charts/chartHelper.d.ts

@@ -0,0 +1,10 @@
+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;
+}>(gridOptions?: T) => T | undefined;

package/src/components/charts/chartHelper.js

@@ -0,0 +1,19 @@
+import colorsJson from '../../styles/variables/colors/colors.json';
+const colors = colorsJson;
+export const CURSOR_BACKGROUND_COLOR = '#a7afbb24';
+const brightColors = ['color-warmup-corn', 'color-coldplay-khaki'];
+export const defaultChartColors = Object.keys(colors)
+    .reverse()
+    .filter(key => !brightColors.includes(key))
+    .map(key => colors[key]);
+export const getFromDefaultColors = (index) => defaultChartColors[index];
+export const getColor = (colorKey) => (colorKey ? colors[colorKey] : undefined);
+export const mapGridOptions = (gridOptions) => {
+    if (!gridOptions) {
+        return;
+    }
+    const mappedGridOptions = { ...gridOptions };
+    const { stroke } = mappedGridOptions;
+    mappedGridOptions.stroke = stroke && !stroke.startsWith('#') ? getColor(stroke) : stroke;
+    return mappedGridOptions;
+};

package/src/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,136 @@
+import React, { type ReactNode, type PropsWithChildren } from 'react';
+declare const ICON_LABEL_VERTICAL = "vertical";
+declare const ICON_LABEL_HORIZONTAL = "horizontal";
+export type CheckboxProps = {
+    /**
+     * Passed through as HTML attribute to the underlying input.
+     * Set an `id` or a `name` otherwise.
+     */
+    id?: string;
+    /**
+     * Passed through as HTML attribute to the underlying input
+     */
+    name?: string;
+    /**
+     * Define some text or component as a label.
+     */
+    label?: string | ReactNode;
+    /**
+     * Define a custom icon for the checkbox by naming a rioglyph icon like `rioglyph-truck`.
+     */
+    icon?: string;
+    /**
+     * The icon size in pixel.
+     */
+    iconSize?: number;
+    /**
+     * The label position for a custom icon checkbox. Using this on a regular checkbox has no effect.
+     *
+     * Possible values are: `horizontal` or `vertical`.
+     */
+    iconLabelPosition?: typeof ICON_LABEL_VERTICAL | typeof ICON_LABEL_HORIZONTAL;
+    /**
+     * Callback function that is invoked when the checkbox is checked or unchecked.
+     * @param event
+     * @returns
+     */
+    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function that is invoked when the checkbox value changes.
+     * This will also be invoked by a keyboard event.
+     * @param event
+     * @returns
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Defines whether the checkbox is checked or not (state cannot be changed).
+     */
+    checked?: boolean;
+    /**
+     * Defines whether the checkbox is initially checked or not (state can be changed on click).
+     */
+    defaultChecked?: boolean;
+    /**
+     * Defines whether the checkbox is disabled or not.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Allows for rendering a completely different layout with or without a checkbox tick.
+     * 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>
+     * ```
+     */
+    custom?: boolean;
+    /**
+     * Defines whether the checkbox is required or not.
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Defines if the checkbox is in an indeterminate state in regard to other checkboxes that may be in different
+     * selection state.
+     *
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * 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;
+    /**
+     * Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size.
+     *
+     * Possible values are:
+     * `large`
+     */
+    size?: 'large';
+    /**
+     * A React ref assigned to the input itself.
+     */
+    inputRef?: React.RefObject<HTMLInputElement>;
+    /**
+     * Number of the index used for keyboard support.
+     *
+     * @default 0
+     */
+    tabIndex?: number;
+    /**
+     * Additional classes to be set on the input field.
+     */
+    className?: string;
+};
+declare const Checkbox: {
+    (props: PropsWithChildren<CheckboxProps>): import("react/jsx-runtime").JSX.Element;
+    ICON_LABEL_VERTICAL: "vertical";
+    ICON_LABEL_HORIZONTAL: "horizontal";
+};
+export default Checkbox;

package/src/components/checkbox/Checkbox.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import noop from 'lodash/fp/noop';
+import { CheckboxIcon } from './CheckboxIcon';
+const DEFAULT_ICON_SIZE = 16;
+const ICON_LABEL_VERTICAL = 'vertical';
+const ICON_LABEL_HORIZONTAL = 'horizontal';
+const Checkbox = (props) => {
+    const { checked, children, className, custom = false, defaultChecked, disabled = false, error = false, icon = '', iconLabelPosition = ICON_LABEL_VERTICAL, iconSize = DEFAULT_ICON_SIZE, id = props.name, indeterminate = false, inline = false, inputRef, label, name, onChange = noop, onClick = noop, required = false, right, size, tabIndex = 0, ...remainingProps } = props;
+    const labelRef = useRef(null);
+    useEffect(() => {
+        const input = labelRef.current?.firstChild;
+        if (input) {
+            input.indeterminate = indeterminate;
+        }
+    }, [indeterminate, labelRef.current]);
+    const handleToggleKeyDown = (event) => {
+        switch (event.key) {
+            case ' ':
+                // toggle on space
+                toggle(event);
+                break;
+            case 'Enter':
+                // open on enter
+                toggle(event);
+                break;
+            default:
+                break;
+        }
+    };
+    const toggle = (event) => {
+        event.preventDefault();
+        if (disabled) {
+            return;
+        }
+        const input = labelRef.current?.firstChild;
+        if (input.indeterminate) {
+            input.indeterminate = false;
+        }
+        input.checked = !input.checked;
+        onClick(event);
+        onChange(event);
+    };
+    const text = label || children;
+    const labelClassnames = classNames('checkbox', inline && 'checkbox-inline', size === 'large' && 'checkbox-large', right && 'checkbox-right', className);
+    const inputClassnames = classNames(error && 'error', size === 'large' && 'large', indeterminate && 'indeterminate', className);
+    const renderCustomIcon = !!icon;
+    const renderCustomContent = custom && children;
+    const renderDefault = !icon && !custom;
+    return (_jsxs("label", { ...remainingProps, className: labelClassnames, tabIndex: tabIndex, htmlFor: id, onKeyDown: handleToggleKeyDown, ref: labelRef, children: [_jsx("input", { id: id, name: name, type: 'checkbox', checked: checked, required: required, defaultChecked: defaultChecked, disabled: disabled, className: inputClassnames, onClick: onClick, onChange: onChange, ref: inputRef }), renderCustomIcon && (_jsx(CheckboxIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && _jsx("span", { className: 'checkbox-text', children: text && _jsx("span", { children: text }) }), renderCustomContent && children] }));
+};
+Checkbox.ICON_LABEL_VERTICAL = ICON_LABEL_VERTICAL;
+Checkbox.ICON_LABEL_HORIZONTAL = ICON_LABEL_HORIZONTAL;
+export default Checkbox;

package/src/components/checkbox/CheckboxIcon.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+type CheckboxIconProps = {
+    icon: string;
+    iconSize: number;
+    iconLabelPosition: 'vertical' | 'horizontal';
+    text?: string | ReactNode;
+};
+export declare const CheckboxIcon: (props: CheckboxIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/checkbox/CheckboxIcon.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CheckboxIcon = (props) => {
+    const { icon, iconSize, iconLabelPosition, text } = props;
+    const iconStyles = {
+        width: `${iconSize}px`,
+        height: `${iconSize}px`,
+        fontSize: `${iconSize}px`,
+        lineHeight: `${iconSize}px`,
+    };
+    return (_jsxs("span", { className: `checkbox-icon label-${iconLabelPosition}`, children: [_jsx("span", { className: `rioglyph ${icon}`, style: iconStyles }), _jsx("span", { className: 'checkbox-label', children: text })] }));
+};