@rio-cloud/rio-uikit 0.16.4-beta.2 → 0.16.4-beta.20

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

@@ -1,42 +1,42 @@
-"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.__importDefault(require("react"));
-const recharts_1 = require("recharts");
-const isFunction_1 = tslib_1.__importDefault(require("lodash/fp/isFunction"));
-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 _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 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,
-};
-exports.default = RadialBarChart;
+"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.__importDefault(require("react"));
+const recharts_1 = require("recharts");
+const isFunction_1 = tslib_1.__importDefault(require("lodash/fp/isFunction"));
+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 _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 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,
+};
+exports.default = RadialBarChart;

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

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

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

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

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

@@ -1,57 +1,127 @@
-export default Checkbox;
-declare function Checkbox(props: any): JSX.Element;
-declare namespace Checkbox {
-    const ICON_LABEL_VERTICAL: string;
-    const ICON_LABEL_HORIZONTAL: string;
-    namespace defaultProps {
-        export const inline: boolean;
-        export const error: boolean;
-        export const disabled: boolean;
-        export const custom: boolean;
-        export const indeterminate: boolean;
-        export const required: boolean;
-        export const tabIndex: number;
-        export const icon: string;
-        export const iconSize: number;
-        import iconLabelPosition = Checkbox.ICON_LABEL_VERTICAL;
-        export { iconLabelPosition };
-        export function onClick(): void;
-        export function onChange(): void;
-    }
-    namespace propTypes {
-        export const id: PropTypes.Requireable<string>;
-        export const name: PropTypes.Requireable<string>;
-        export const label: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const icon_1: PropTypes.Requireable<string>;
-        export { icon_1 as icon };
-        const iconSize_1: PropTypes.Requireable<number>;
-        export { iconSize_1 as iconSize };
-        const iconLabelPosition_1: PropTypes.Requireable<string>;
-        export { iconLabelPosition_1 as iconLabelPosition };
-        const onClick_1: PropTypes.Validator<(...args: any[]) => any>;
-        export { onClick_1 as onClick };
-        const onChange_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onChange_1 as onChange };
-        export const checked: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
-        export const defaultChecked: PropTypes.Requireable<boolean>;
-        const disabled_1: PropTypes.Requireable<boolean>;
-        export { disabled_1 as disabled };
-        const custom_1: PropTypes.Requireable<boolean>;
-        export { custom_1 as custom };
-        const required_1: PropTypes.Requireable<boolean>;
-        export { required_1 as required };
-        const indeterminate_1: PropTypes.Requireable<boolean>;
-        export { indeterminate_1 as indeterminate };
-        export const className: PropTypes.Requireable<string>;
-        const inline_1: PropTypes.Requireable<boolean>;
-        export { inline_1 as inline };
-        export const right: PropTypes.Requireable<boolean>;
-        const error_1: PropTypes.Requireable<boolean>;
-        export { error_1 as error };
-        export const size: PropTypes.Requireable<string>;
-        export const inputRef: PropTypes.Requireable<(...args: any[]) => any>;
-        const tabIndex_1: PropTypes.Requireable<number>;
-        export { tabIndex_1 as tabIndex };
-    }
-}
-import PropTypes from "prop-types";
+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
+     * <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/lib/es/components/checkbox/Checkbox.js

@@ -1,100 +1,60 @@
-"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 prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const CheckboxIcon = props => {
-    const { icon, iconSize, iconLabelPosition, text } = props;
-    const iconStyles = {
-        width: `${iconSize}px`,
-        height: `${iconSize}px`,
-        fontSize: `${iconSize}px`,
-        lineHeight: `${iconSize}px`,
-    };
-    return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `checkbox-icon label-${iconLabelPosition}` }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icon}`, style: iconStyles }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'checkbox-label' }, { children: text }))] })));
-};
-const Checkbox = props => {
-    const { checked, children, className, custom, defaultChecked, disabled, error, icon, iconLabelPosition, iconSize, id = props.name, indeterminate, inline, inputRef, label, name, onChange, onClick, required, right, size, tabIndex } = props, remainingProps = tslib_1.__rest(props, ["checked", "children", "className", "custom", "defaultChecked", "disabled", "error", "icon", "iconLabelPosition", "iconSize", "id", "indeterminate", "inline", "inputRef", "label", "name", "onChange", "onClick", "required", "right", "size", "tabIndex"]);
-    const labelRef = (0, react_1.useRef)();
-    const getInput = () => labelRef.current.firstChild;
-    (0, react_1.useEffect)(() => {
-        const input = getInput();
-        input.indeterminate = indeterminate;
-    }, [indeterminate]);
-    const handleToggleKeyDown = event => {
-        switch (event.keyCode) {
-            case 32:
-                // toggle on space
-                toggle(event);
-                break;
-            case 13:
-                // open on enter
-                toggle(event);
-                break;
-            default:
-                break;
-        }
-    };
-    const toggle = event => {
-        event.preventDefault();
-        if (disabled) {
-            return;
-        }
-        const input = getInput();
-        if (input.indeterminate) {
-            input.indeterminate = false;
-        }
-        input.checked = !input.checked;
-        onClick(event);
-        onChange(event);
-    };
-    const text = label || children;
-    const labelClassnames = (0, classnames_1.default)('checkbox', inline && 'checkbox-inline', size === 'large' && 'checkbox-large', right && 'checkbox-right', className);
-    const inputClassnames = (0, classnames_1.default)(error && 'error', size === 'large' && 'large', indeterminate && 'indeterminate', className);
-    const renderCustomIcon = !!icon;
-    const renderCustomContent = custom && children;
-    const renderDefault = !icon && !custom;
-    return ((0, jsx_runtime_1.jsxs)("label", Object.assign({}, remainingProps, { className: labelClassnames, tabIndex: tabIndex, htmlFor: id, onKeyDown: handleToggleKeyDown, ref: labelRef }, { children: [(0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)(CheckboxIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'checkbox-text' }, { children: (0, jsx_runtime_1.jsx)("span", { children: text }) }))), renderCustomContent && children] })));
-};
-Checkbox.ICON_LABEL_VERTICAL = 'vertical';
-Checkbox.ICON_LABEL_HORIZONTAL = 'horizontal';
-Checkbox.defaultProps = {
-    inline: false,
-    error: false,
-    disabled: false,
-    custom: false,
-    indeterminate: false,
-    required: false,
-    tabIndex: 0,
-    icon: '',
-    iconSize: 16,
-    iconLabelPosition: Checkbox.ICON_LABEL_VERTICAL,
-    onClick: () => { },
-    onChange: () => { },
-};
-Checkbox.propTypes = {
-    id: prop_types_1.default.string,
-    name: prop_types_1.default.string,
-    label: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    icon: prop_types_1.default.string,
-    iconSize: prop_types_1.default.number,
-    iconLabelPosition: prop_types_1.default.oneOf([Checkbox.ICON_LABEL_VERTICAL, Checkbox.ICON_LABEL_HORIZONTAL]),
-    onClick: prop_types_1.default.func.isRequired,
-    onChange: prop_types_1.default.func,
-    checked: prop_types_1.default.oneOfType([prop_types_1.default.bool, prop_types_1.default.string]),
-    defaultChecked: prop_types_1.default.bool,
-    disabled: prop_types_1.default.bool,
-    custom: prop_types_1.default.bool,
-    required: prop_types_1.default.bool,
-    indeterminate: prop_types_1.default.bool,
-    className: prop_types_1.default.string,
-    inline: prop_types_1.default.bool,
-    right: prop_types_1.default.bool,
-    error: prop_types_1.default.bool,
-    size: prop_types_1.default.string,
-    inputRef: prop_types_1.default.func,
-    tabIndex: prop_types_1.default.number,
-};
-exports.default = Checkbox;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const CheckboxIcon_1 = require("./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_1.default, onClick = noop_1.default, required = false, right, size, tabIndex = 0 } = props, remainingProps = tslib_1.__rest(props, ["checked", "children", "className", "custom", "defaultChecked", "disabled", "error", "icon", "iconLabelPosition", "iconSize", "id", "indeterminate", "inline", "inputRef", "label", "name", "onChange", "onClick", "required", "right", "size", "tabIndex"]);
+    const labelRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const input = (_a = labelRef.current) === null || _a === void 0 ? void 0 : _a.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) => {
+        var _a;
+        event.preventDefault();
+        if (disabled) {
+            return;
+        }
+        const input = (_a = labelRef.current) === null || _a === void 0 ? void 0 : _a.firstChild;
+        if (input.indeterminate) {
+            input.indeterminate = false;
+        }
+        input.checked = !input.checked;
+        onClick(event);
+        onChange(event);
+    };
+    const text = label || children;
+    const labelClassnames = (0, classnames_1.default)('checkbox', inline && 'checkbox-inline', size === 'large' && 'checkbox-large', right && 'checkbox-right', className);
+    const inputClassnames = (0, classnames_1.default)(error && 'error', size === 'large' && 'large', indeterminate && 'indeterminate', className);
+    const renderCustomIcon = !!icon;
+    const renderCustomContent = custom && children;
+    const renderDefault = !icon && !custom;
+    return ((0, jsx_runtime_1.jsxs)("label", Object.assign({}, remainingProps, { className: labelClassnames, tabIndex: tabIndex, htmlFor: id, onKeyDown: handleToggleKeyDown, ref: labelRef }, { children: [(0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)(CheckboxIcon_1.CheckboxIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'checkbox-text' }, { children: (0, jsx_runtime_1.jsx)("span", { children: text }) }))), renderCustomContent && children] })));
+};
+Checkbox.ICON_LABEL_VERTICAL = ICON_LABEL_VERTICAL;
+Checkbox.ICON_LABEL_HORIZONTAL = ICON_LABEL_HORIZONTAL;
+exports.default = Checkbox;

package/lib/es/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/lib/es/components/checkbox/CheckboxIcon.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CheckboxIcon = (props) => {
+    const { icon, iconSize, iconLabelPosition, text } = props;
+    const iconStyles = {
+        width: `${iconSize}px`,
+        height: `${iconSize}px`,
+        fontSize: `${iconSize}px`,
+        lineHeight: `${iconSize}px`,
+    };
+    return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `checkbox-icon label-${iconLabelPosition}` }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icon}`, style: iconStyles }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'checkbox-label' }, { children: text }))] })));
+};
+exports.CheckboxIcon = CheckboxIcon;