@rio-cloud/rio-uikit 0.16.3 → 0.16.4-beta.10

package/components/charts/RadialBarChart.d.ts

@@ -0,0 +1,20 @@
+export default RadialBarChart;
+declare function RadialBarChart(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace RadialBarChart {
+    namespace defaultProps {
+        const width: number;
+        const height: number;
+        const data: never[];
+        const dataKey: string;
+        const startAngle: number;
+        const endAngle: number;
+        const innerRadius: string;
+        const outerRadius: string;
+        const clockWise: boolean;
+        const legend: import("react/jsx-runtime").JSX.Element;
+        const showBarLabel: boolean;
+        const cornerRadius: number;
+        const background: boolean;
+        const tooltip: boolean;
+    }
+}

package/components/charts/RadialBarChart.js

@@ -1,112 +1,40 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["width", "height", "data", "dataKey", "startAngle", "endAngle", "innerRadius", "outerRadius", "clockWise", "legend", "textOptions", "radialBarOptions", "showBarLabel", "cornerRadius", "background", "range", "tooltip"],
-  _excluded2 = ["text", "size", "weight", "color"];
-import React from 'react';
-import { RadialBarChart as RechartsRadialBarChart, RadialBar as RechartsRadialBar, Legend as RechartsLegend, PolarAngleAxis, Cell, Tooltip as RechartsTooltip, ResponsiveContainer } from 'recharts';
-import isFunction from 'lodash/fp/isFunction';
-import { getColor, getFromDefaultColors, CURSOR_BACKGROUND_COLOR } from './chartHelper';
-import Legend from './Legend';
-var RadialBarChart = function RadialBarChart(props) {
-  var width = props.width,
-    height = props.height,
-    data = props.data,
-    dataKey = props.dataKey,
-    startAngle = props.startAngle,
-    endAngle = props.endAngle,
-    innerRadius = props.innerRadius,
-    outerRadius = props.outerRadius,
-    clockWise = props.clockWise,
-    legend = props.legend,
-    textOptions = props.textOptions,
-    radialBarOptions = props.radialBarOptions,
-    showBarLabel = props.showBarLabel,
-    cornerRadius = props.cornerRadius,
-    background = props.background,
-    range = props.range,
-    tooltip = props.tooltip,
-    remainingProps = _objectWithoutProperties(props, _excluded);
-  var _ref = textOptions || {},
-    text = _ref.text,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? '500%' : _ref$size,
-    _ref$weight = _ref.weight,
-    weight = _ref$weight === void 0 ? 'normal' : _ref$weight,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'gray-darkest' : _ref$color,
-    remainingTextOptions = _objectWithoutProperties(_ref, _excluded2);
-  var textStyle = {
-    fontSize: size,
-    fontWeight: weight,
-    fill: color && getColor(color)
-  };
-  return /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
-  }, /*#__PURE__*/React.createElement(RechartsRadialBarChart, _extends({
-    width: width,
-    height: height,
-    data: data,
-    innerRadius: innerRadius,
-    outerRadius: outerRadius,
-    startAngle: startAngle,
-    endAngle: endAngle
-  }, remainingProps), /*#__PURE__*/React.createElement(RechartsRadialBar, _extends({
-    label: showBarLabel && {
-      fill: '#666',
-      position: 'insideStart'
-    },
-    background: background,
-    clockWise: clockWise,
-    dataKey: dataKey,
-    cornerRadius: cornerRadius
-  }, radialBarOptions), data.map(function (entry, index) {
-    var cellColor = getColor(entry.color) || getFromDefaultColors(index);
-    return /*#__PURE__*/React.createElement(Cell, {
-      key: "cell-".concat(index),
-      fill: isFunction(color) ? color(entry, index) : cellColor
-    });
-  })), range && /*#__PURE__*/React.createElement(PolarAngleAxis, {
-    type: "number",
-    domain: range,
-    angleAxisId: 0,
-    tick: false
-  }), textOptions && /*#__PURE__*/React.createElement("text", _extends({
-    x: width / 2,
-    y: height / 2,
-    textAnchor: "middle",
-    dominantBaseline: "middle",
-    className: "radialbarchart-text",
-    style: textStyle
-  }, remainingTextOptions), text), legend && /*#__PURE__*/React.createElement(RechartsLegend, _extends({
-    formatter: function formatter(value, _) {
-      return /*#__PURE__*/React.createElement("span", {
-        className: "text-color-darker"
-      }, value);
-    }
-  }, legend.props)), tooltip && /*#__PURE__*/React.createElement(RechartsTooltip, _extends({
-    cursor: {
-      fill: 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: /*#__PURE__*/React.createElement(Legend, null),
-  // textOptions,
-  // radialBarOptions,
-  showBarLabel: false,
-  cornerRadius: 30,
-  background: true,
-  // range,
-  tooltip: false
-};
-export default RadialBarChart;
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { RadialBarChart as RechartsRadialBarChart, RadialBar as RechartsRadialBar, Legend as RechartsLegend, PolarAngleAxis, Cell, Tooltip as RechartsTooltip, ResponsiveContainer, } from 'recharts';
+import isFunction from 'lodash/fp/isFunction';
+import { getColor, getFromDefaultColors, CURSOR_BACKGROUND_COLOR } from './chartHelper';
+import Legend from './Legend';
+const RadialBarChart = props => {
+    const { width, height, data, dataKey, startAngle, endAngle, innerRadius, outerRadius, clockWise, legend, textOptions, radialBarOptions, showBarLabel, cornerRadius, background, range, tooltip } = props, remainingProps = __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 = __rest(_a, ["text", "size", "weight", "color"]);
+    const textStyle = {
+        fontSize: size,
+        fontWeight: weight,
+        fill: color && getColor(color),
+    };
+    return (_jsx(ResponsiveContainer, Object.assign({ width: '100%', height: '100%' }, { children: _jsxs(RechartsRadialBarChart, Object.assign({ width: width, height: height, data: data, innerRadius: innerRadius, outerRadius: outerRadius, startAngle: startAngle, endAngle: endAngle }, remainingProps, { children: [_jsx(RechartsRadialBar, Object.assign({ label: showBarLabel && { fill: '#666', position: 'insideStart' }, background: background, clockWise: clockWise, 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", Object.assign({ x: width / 2, y: height / 2, textAnchor: 'middle', dominantBaseline: 'middle', className: 'radialbarchart-text', style: textStyle }, remainingTextOptions, { children: text }))), legend && (_jsx(RechartsLegend, Object.assign({ formatter: (value, _) => _jsx("span", Object.assign({ className: 'text-color-darker' }, { children: value })) }, legend.props))), tooltip && _jsx(RechartsTooltip, Object.assign({ cursor: { fill: 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: _jsx(Legend, {}),
+    // textOptions,
+    // radialBarOptions,
+    showBarLabel: false,
+    cornerRadius: 30,
+    background: true,
+    // range,
+    tooltip: false,
+};
+export default RadialBarChart;

package/components/charts/chartHelper.d.ts

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

package/components/charts/chartHelper.js

@@ -1,26 +1,18 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import colors from '../../styles/variables/colors.json';
-var brightColors = ['color-warmup-corn', 'color-coldplay-khaki'];
-export var defaultChartColors = Object.keys(colors).reverse().filter(function (key) {
-  return !brightColors.includes(key);
-}).map(function (key) {
-  return colors[key];
-});
-export var getFromDefaultColors = function getFromDefaultColors(index) {
-  return defaultChartColors[index];
-};
-export var getColor = function getColor(colorKey) {
-  return colors[colorKey];
-};
-export var CURSOR_BACKGROUND_COLOR = '#a7afbb24';
-export var mapGridOptions = function mapGridOptions(gridOptions) {
-  if (!gridOptions) {
-    return;
-  }
-  var mappedGridOptions = _objectSpread({}, gridOptions);
-  var stroke = mappedGridOptions.stroke;
-  mappedGridOptions.stroke = stroke && !stroke.startsWith('#') ? getColor(stroke) : stroke;
-  return mappedGridOptions;
-};
+import colors from '../../styles/variables/colors.json';
+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 => colors[colorKey];
+export const CURSOR_BACKGROUND_COLOR = '#a7afbb24';
+export const mapGridOptions = gridOptions => {
+    if (!gridOptions) {
+        return;
+    }
+    const mappedGridOptions = Object.assign({}, gridOptions);
+    const { stroke } = mappedGridOptions;
+    mappedGridOptions.stroke = stroke && !stroke.startsWith('#') ? getColor(stroke) : stroke;
+    return mappedGridOptions;
+};

package/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,127 @@
+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/components/checkbox/Checkbox.js

@@ -1,159 +1,58 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["checked", "children", "className", "custom", "defaultChecked", "disabled", "error", "icon", "iconLabelPosition", "iconSize", "id", "indeterminate", "inline", "inputRef", "label", "name", "onChange", "onClick", "required", "right", "size", "tabIndex"];
-import React, { useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import classname from 'classnames';
-var CheckboxIcon = function CheckboxIcon(props) {
-  var icon = props.icon,
-    iconSize = props.iconSize,
-    iconLabelPosition = props.iconLabelPosition,
-    text = props.text;
-  var iconStyles = {
-    width: "".concat(iconSize, "px"),
-    height: "".concat(iconSize, "px"),
-    fontSize: "".concat(iconSize, "px"),
-    lineHeight: "".concat(iconSize, "px")
-  };
-  return /*#__PURE__*/React.createElement("span", {
-    className: "checkbox-icon label-".concat(iconLabelPosition)
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "rioglyph ".concat(icon),
-    style: iconStyles
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "checkbox-label"
-  }, text));
-};
-var Checkbox = function Checkbox(props) {
-  var checked = props.checked,
-    children = props.children,
-    className = props.className,
-    custom = props.custom,
-    defaultChecked = props.defaultChecked,
-    disabled = props.disabled,
-    error = props.error,
-    icon = props.icon,
-    iconLabelPosition = props.iconLabelPosition,
-    iconSize = props.iconSize,
-    _props$id = props.id,
-    id = _props$id === void 0 ? props.name : _props$id,
-    indeterminate = props.indeterminate,
-    inline = props.inline,
-    inputRef = props.inputRef,
-    label = props.label,
-    name = props.name,
-    onChange = props.onChange,
-    onClick = props.onClick,
-    required = props.required,
-    right = props.right,
-    size = props.size,
-    tabIndex = props.tabIndex,
-    remainingProps = _objectWithoutProperties(props, _excluded);
-  var labelRef = useRef();
-  var getInput = function getInput() {
-    return labelRef.current.firstChild;
-  };
-  useEffect(function () {
-    var input = getInput();
-    input.indeterminate = indeterminate;
-  }, [indeterminate]);
-  var handleToggleKeyDown = function handleToggleKeyDown(event) {
-    switch (event.keyCode) {
-      case 32:
-        // toggle on space
-        toggle(event);
-        break;
-      case 13:
-        // open on enter
-        toggle(event);
-        break;
-      default:
-        break;
-    }
-  };
-  var toggle = function toggle(event) {
-    event.preventDefault();
-    if (disabled) {
-      return;
-    }
-    var input = getInput();
-    if (input.indeterminate) {
-      input.indeterminate = false;
-    }
-    input.checked = !input.checked;
-    onClick(event);
-    onChange(event);
-  };
-  var text = label || children;
-  var labelClassnames = classname('checkbox', inline && 'checkbox-inline', size === 'large' && 'checkbox-large', right && 'checkbox-right', className);
-  var inputClassnames = classname(error && 'error', size === 'large' && 'large', indeterminate && 'indeterminate', className);
-  var renderCustomIcon = !!icon;
-  var renderCustomContent = custom && children;
-  var renderDefault = !icon && !custom;
-  return /*#__PURE__*/React.createElement("label", _extends({}, remainingProps, {
-    className: labelClassnames,
-    tabIndex: tabIndex,
-    htmlFor: id,
-    onKeyDown: handleToggleKeyDown,
-    ref: labelRef
-  }), /*#__PURE__*/React.createElement("input", {
-    id: id,
-    name: name,
-    type: "checkbox",
-    checked: checked,
-    required: required,
-    defaultChecked: defaultChecked,
-    disabled: disabled,
-    className: inputClassnames,
-    onClick: onClick,
-    onChange: onChange,
-    ref: inputRef
-  }), renderCustomIcon && /*#__PURE__*/React.createElement(CheckboxIcon, {
-    icon: icon,
-    iconSize: iconSize,
-    iconLabelPosition: iconLabelPosition,
-    text: text
-  }), renderDefault && /*#__PURE__*/React.createElement("span", {
-    className: "checkbox-text"
-  }, /*#__PURE__*/React.createElement("span", null, 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: function onClick() {},
-  onChange: function onChange() {}
-};
-Checkbox.propTypes = {
-  id: PropTypes.string,
-  name: PropTypes.string,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  icon: PropTypes.string,
-  iconSize: PropTypes.number,
-  iconLabelPosition: PropTypes.oneOf([Checkbox.ICON_LABEL_VERTICAL, Checkbox.ICON_LABEL_HORIZONTAL]),
-  onClick: PropTypes.func.isRequired,
-  onChange: PropTypes.func,
-  checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  defaultChecked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  custom: PropTypes.bool,
-  required: PropTypes.bool,
-  indeterminate: PropTypes.bool,
-  className: PropTypes.string,
-  inline: PropTypes.bool,
-  right: PropTypes.bool,
-  error: PropTypes.bool,
-  size: PropTypes.string,
-  inputRef: PropTypes.func,
-  tabIndex: PropTypes.number
-};
-export default Checkbox;
+import { __rest } from "tslib";
+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 } = props, remainingProps = __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 = useRef(null);
+    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 = 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", Object.assign({}, 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", Object.assign({ className: 'checkbox-text' }, { children: _jsx("span", { children: text }) }))), renderCustomContent && children] })));
+};
+Checkbox.ICON_LABEL_VERTICAL = ICON_LABEL_VERTICAL;
+Checkbox.ICON_LABEL_HORIZONTAL = ICON_LABEL_HORIZONTAL;
+export default Checkbox;

package/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/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", Object.assign({ className: `checkbox-icon label-${iconLabelPosition}` }, { children: [_jsx("span", { className: `rioglyph ${icon}`, style: iconStyles }), _jsx("span", Object.assign({ className: 'checkbox-label' }, { children: text }))] })));
+};