@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/src/components/barList/BarList.d.ts

@@ -0,0 +1,97 @@
+import React from 'react';
+import { type SortDirectionType } from '../../utils/SortUtils';
+export type BarListRow<T> = T & {
+    key?: string;
+    href?: string;
+    value: number;
+    name: string;
+    color?: string;
+    barColor?: string;
+    background?: string;
+};
+/**
+ * Props for the BarList component.
+ *
+ * @template T - The type of the custom data associated with each bar row.
+ */
+type BarListProps<T = unknown> = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Array of bar row data to be rendered.
+     */
+    data: BarListRow<T>[];
+    /**
+     * Optional function to format the numeric value displayed on the right side of each bar.
+     * Can return a string or a React element.
+     *
+     * @example
+     * valueFormatter={(value) => `${value}%`}
+     */
+    valueFormatter?: (value: number) => string | React.ReactElement;
+    /**
+     * A reference value used to calculate relative widths.
+     * If not provided, the maximum value in `data` will be used.
+     *
+     * @default max(data.value)
+     */
+    referenceValue?: number;
+    /**
+     * Whether to animate the bar width transitions using Framer Motion.
+     *
+     * @default false
+     */
+    showAnimation?: boolean;
+    /**
+     * Callback fired when a bar is clicked.
+     *
+     * @param payload - The full data object of the clicked bar.
+     */
+    onSelectRow?: (payload: BarListRow<T>) => void;
+    /**
+     * The sort order for the bars. Options are 'asc', 'desc', or 'none'.
+     *
+     * @default 'none'
+     */
+    sortOrder?: SortDirectionType | 'none';
+    /**
+     * Height of each bar row in pixels.
+     *
+     * @default 32
+     */
+    rowHeight?: number;
+    /**
+     * Opacity applied to non-hovered bars (between 0 and 1).
+     *
+     * @default 0.5
+     */
+    opacity?: number;
+    /**
+     * CSS color string used for the active/progress portion of each bar.
+     *
+     * @default 'bg-highlight-light'
+     */
+    barColor?: string;
+    /**
+     * CSS color string used for the text labels.
+     *
+     * @default 'text-color-darker'
+     */
+    labelColor?: string;
+    /**
+     * CSS color string used for the bar background.
+     *
+     * @default 'bg-transparent'
+     */
+    background?: string;
+    /**
+     * Additional className added to the wrapper element.
+     */
+    className?: string;
+};
+declare const BarListInner: {
+    <T>(props: BarListProps<T>, forwardedRef: React.ForwardedRef<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const BarList: <T>(props: BarListProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => ReturnType<typeof BarListInner>;
+export default BarList;

package/src/components/barList/BarList.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { motion } from 'framer-motion';
+import { SortDirection } from '../../utils/SortUtils';
+import { useSortedBars } from './useSortedBars';
+// Animation variants
+const containerVariants = {
+    animate: {
+        transition: {
+            staggerChildren: 0.1,
+        },
+    },
+};
+const barVariants = {
+    initial: { width: 0 },
+    animate: (width) => ({
+        width: `${width}%`,
+        transition: { duration: 0.8, ease: 'easeOut' },
+    }),
+};
+const DEFAULT_ROW_HEIGHT = 25;
+const DEFAULT_OPACITY = 0.5;
+const BarListInner = (props, forwardedRef) => {
+    const { data = [], valueFormatter = value => value.toString(), showAnimation = false, onSelectRow, referenceValue, sortOrder = SortDirection.DESCENDING, barColor = 'bg-highlight-light', labelColor = 'text-color-darker', background = 'bg-transparent', rowHeight = DEFAULT_ROW_HEIGHT, opacity = DEFAULT_OPACITY, className = '', ...remainingProps } = props;
+    const sortedData = useSortedBars(data, sortOrder, item => item.value);
+    const [hoveredIndex, setHoveredIndex] = React.useState(null);
+    const widths = useMemo(() => {
+        const base = referenceValue ?? Math.max(...sortedData.map(item => item.value), 0);
+        return sortedData.map(item => (base === 0 || item.value === 0 ? 0 : Math.max((item.value / base) * 100, 2)));
+    }, [sortedData, referenceValue]);
+    return (_jsxs("div", { ...remainingProps, ref: forwardedRef, className: classNames('display-flex justify-content-between gap-15', className), children: [_jsx(motion.div, { variants: showAnimation ? containerVariants : undefined, initial: 'initial', animate: 'animate', className: 'width-100pct space-y-5', children: sortedData.map((item, index) => {
+                    const width = widths[index];
+                    const itemLabelColor = item.color ?? labelColor;
+                    const itemBarColor = item.barColor ?? barColor;
+                    const itemBackground = item.background ?? background;
+                    return (_jsxs("div", { onMouseEnter: () => setHoveredIndex(index), onMouseLeave: () => setHoveredIndex(null), onClick: () => onSelectRow?.(item), className: classNames('position-relative width-100pct rounded-small', 'transition-all transition-ease-in-out transition-duration-01', itemBackground, onSelectRow && 'cursor-pointer', hoveredIndex === index && 'bg-lightest'), children: [_jsx(motion.div, { custom: width, variants: showAnimation ? barVariants : undefined, className: classNames('display-flex align-items-center rounded-small', 'transition-all transition-ease-in-out transition-duration-01', itemBarColor), style: { height: `${rowHeight}px`, opacity: hoveredIndex === index ? 1 : opacity }, role: 'presentation' }), _jsx("div", { className: 'position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10', children: item.href ? (_jsx("a", { href: item.href, className: itemLabelColor, target: '_blank', rel: 'noreferrer', onClick: event => event.stopPropagation(), children: item.name })) : (_jsx("div", { className: itemLabelColor, children: item.name })) })] }, item.key ?? item.name));
+                }) }), _jsx("div", { className: 'space-y-5', children: sortedData.map(item => (_jsx("div", { className: classNames('display-flex align-items-center justify-content-end'), style: { height: `${rowHeight}px` }, children: _jsx("div", { className: 'text-color-darkest', children: valueFormatter(item.value) }) }, item.key ?? item.name))) })] }));
+};
+BarListInner.displayName = 'BarList';
+const BarList = React.forwardRef(BarListInner);
+export default BarList;

package/src/components/barList/useSortedBars.d.ts

@@ -0,0 +1,2 @@
+import { type SortDirectionType } from '../../utils/SortUtils';
+export declare function useSortedBars<T>(data: T[], sortOrder: SortDirectionType | 'none', getValue: (item: T) => number): T[];

package/src/components/barList/useSortedBars.js

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { SortDirection } from '../../utils/SortUtils';
+export function useSortedBars(data, sortOrder, getValue) {
+    return useMemo(() => {
+        if (sortOrder === 'none') {
+            return data;
+        }
+        return [...data].sort((a, b) => {
+            const aVal = getValue(a);
+            const bVal = getValue(b);
+            return sortOrder === SortDirection.ASCENDING ? aVal - bVal : bVal - aVal;
+        });
+    }, [data, sortOrder, getValue]);
+}

package/src/components/bottomSheet/BottomSheet.d.ts

@@ -0,0 +1,68 @@
+import { type MutableRefObject, type PropsWithChildren, type ReactElement, type ReactNode } from 'react';
+export type BottomSheetProps = {
+    /**
+     * Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen.
+     * @default false
+     */
+    show: boolean;
+    /**
+     * Callback for when the sheet closes.
+     */
+    onClose?: (isShown: boolean) => void;
+    /**
+     * The width of the bottom sheet. This is useful for desktop when not using the entire screen width.
+     * When no width is given it will take the width of the content and maximum `100%` of the screen.
+     * So it this case you might want to apply a `max-width-xxx` via `className` to control it better.
+     */
+    width?: number | string;
+    /**
+     * The height of the bottom sheet. If no height is given, the height is automatically
+     * calculated from the content.
+     */
+    height?: number | string;
+    /**
+     * The title content shown in the header. If no title is given, the bottom sheet header is not shown.
+     */
+    title?: string | ReactNode;
+    /**
+     * Defines whether or not the close button is shown.
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * Defines whether or not the maximize button in the header is shown.
+     * @default false
+     */
+    showMaximizeButton?: boolean;
+    /**
+     * The callback function triggered when the maximize button is clicked and the height changes.
+     */
+    onHeightChange?: VoidFunction;
+    /**
+     * Set to `true` to detach the bottom sheet from the left side and the bottom and create a little offset.
+     * @default false
+     */
+    detach?: boolean;
+    /**
+     * Defines the amount of pixels for the sheet.
+     * @default 15
+     */
+    detachOffset?: number;
+    /**
+     * Set to `true` to render a modal like backdrop to emphasize the bottom sheet.
+     * @default false
+     */
+    hasBackdrop?: boolean;
+    /**
+     * Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet.
+     */
+    onBackdropClick?: VoidFunction;
+    /** A react ref added to the bottom sheet body. */
+    bodyRef?: MutableRefObject<HTMLDivElement | null>;
+    /** Additional classes to be set on the body element. */
+    bodyClassName?: string;
+    /** Additional classes to be set on the wrapping element. */
+    className?: string;
+};
+declare const BottomSheet: (props: BottomSheetProps & PropsWithChildren) => ReactElement;
+export default BottomSheet;

package/src/components/bottomSheet/BottomSheet.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import classNames from 'classnames';
+import isFunction from 'lodash/fp/isFunction';
+import { motion } from 'framer-motion';
+import { getOrCreatePortalRoot } from '../../utils/portalRoot';
+const OFFSET_POSITION = -1000;
+const DEFAULT_OFFSET_PX = 15;
+const BottomSheet = (props) => {
+    const { show = false, onClose, width, height, title, detach = false, detachOffset = DEFAULT_OFFSET_PX, hasBackdrop = false, showCloseButton = true, showMaximizeButton = false, onHeightChange = () => { }, bodyRef, bodyClassName, className, children, onBackdropClick = () => { }, ...remainingProps } = props;
+    const [isShown, setIsShown] = useState(show);
+    const [isMaxHeight, setIsMaxHeight] = useState(false);
+    useEffect(() => setIsShown(show), [show]);
+    const modalRoot = getOrCreatePortalRoot();
+    const handleToggle = () => {
+        const newValue = !isShown;
+        if (isFunction(onClose)) {
+            onClose(newValue);
+        }
+        else {
+            setIsShown(newValue);
+        }
+    };
+    const handleBackdropClick = () => {
+        onBackdropClick();
+        handleToggle();
+    };
+    const handleMaximize = () => {
+        const newValue = !isMaxHeight;
+        setIsMaxHeight(newValue);
+        onHeightChange();
+    };
+    const sheetClasses = classNames('bottom-sheet', 'position-fixed left-0', !height && !isMaxHeight && 'height-auto', 'bg-white', 'shadow-hard', detach ? 'rounded' : 'rounded-top-left rounded-top-right', className && className);
+    const sheetBodyClasses = classNames('bottom-sheet-body', 'height-100pct', bodyClassName && bodyClassName);
+    const sheetHeight = isMaxHeight ? window.innerHeight : height;
+    // Note: we always have to kep the body element in the DOM as there might be a ref assigned to it.
+    // Unmounting it will lead to losing the reference and breaking the functionality that is implemented on that ref.
+    // That is the reason why there is no "AnimatePresence" with an "exit" animation here.
+    // Instead, we change the "animate" values.
+    return createPortal(_jsxs(_Fragment, { children: [_jsxs(motion.div, { ...remainingProps, className: sheetClasses, style: {
+                    width,
+                    maxWidth: detach ? `calc(100% - ${DEFAULT_OFFSET_PX * 2}px)` : '100%',
+                    margin: detach ? `${DEFAULT_OFFSET_PX}px` : 0,
+                }, initial: { opacity: 0 }, animate: {
+                    opacity: isShown ? 1 : 0,
+                    y: 0,
+                    bottom: isShown ? 0 : OFFSET_POSITION,
+                    height: isShown ? sheetHeight : 0,
+                }, children: [_jsxs("div", { className: 'bottom-sheet-header', children: [title && (_jsx("div", { className: 'bottom-sheet-title display-flex justify-content-between padding-15 ' +
+                                    'border border-top-none border-left-none border-right-none border-color-lighter', children: _jsx("div", { className: 'text-size-18', children: title }) })), showCloseButton && (_jsx("div", { className: 'bottom-sheet-close position-absolute top-10 right-10', children: _jsx("button", { type: 'button', className: 'btn btn-muted btn-sm btn-icon-only', onClick: handleToggle, children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) }) })), showMaximizeButton && (_jsx("div", { className: 'bottom-sheet-maximize height-30 ' +
+                                    'position-absolute top-5 left-50pct translate-x-50 cursor-pointer', onClick: handleMaximize, children: _jsx("div", { className: 'height-5 width-40 rounded bg-lighter' }) }))] }), _jsx("div", { className: sheetBodyClasses, ref: bodyRef, children: isShown && children })] }), hasBackdrop && isShown && _jsx("div", { className: 'bottom-sheet-backdrop', onClick: handleBackdropClick })] }), modalRoot);
+};
+export default BottomSheet;

package/src/components/bottomSheet/TimedBottomSheet.d.ts

@@ -0,0 +1,98 @@
+import { type PropsWithChildren } from 'react';
+type TimedBottomSheetProps = {
+    /**
+     * The `dismissed` flag can be used to tell this component that the user has clicked on the content
+     * of the component like a button or a link. In this case, the bottom sheet will store a flag in the
+     * localStorage to hide the bottom sheet for the next time and it will close the sheet right away.
+     */
+    dismissed?: boolean;
+    /**
+     * The `featureName` prop is used to name the localStorage flag that is used to control the visibility.
+     * It should be unique to avoid conflicts with other timed bottom sheets.
+     */
+    featureName: string;
+    /**
+     * Defines the time in milliseconds when the bottom sheet shall be shown. Default value is 0 to show it right away.
+     *
+     * @default 0
+     */
+    showAfter?: number;
+    /**
+     * Defines the time in milliseconds when the bottom sheet hides itself automatically. Default value is 3_600_000
+     * to hide it after 1 hour. In this case, the localStorage flag is not set and the bottom sheet will be shown
+     * on the next page load.
+     *
+     * @default 3_600_000
+     */
+    hideAfter?: number;
+    /**
+     * With this enabled, the BottomSheet will not hide automatically.
+     * @default false
+     */
+    alwaysOn?: boolean;
+    /**
+     * Enables or disabled the close button.
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * Optional width of the bottom sheet. Alternatively, you can set a `max-width-xxx` via className instead.
+     */
+    width?: number;
+    /**
+     * Flag to allow to remove the localStorage flag again once the component is not needed anymore.
+     */
+    cleanupLocalStorage?: boolean;
+    /**
+     * A prefix that will be used for the local storage flag to store whether the bottom sheet should be hidden.
+     *
+     * Use this prefix for your service name for instance.
+     */
+    localStoragePrefix?: string;
+    /**
+     * Callback function that gets triggered when the user closed the bottom sheet with the close button.
+     * @returns void
+     */
+    onClose?: () => void;
+    /**
+     * Optional className to be set on the body.
+     */
+    bodyClassName?: string;
+    /**
+     * Optional className to be set on the component. Use this to define a max-width value.
+     */
+    className?: string;
+};
+/**
+ * A wrapper component for the BottomSheet that allows to control it's visibility via timers and to use
+ * the localStorage to save user interaction.
+ *
+ * Don't forget to cleanup the localStorage for the user when removing a feature
+ * by setting "cleanupLocalStorage" to "true" and deploy it like this.
+ * The cleanup will remove the localStorage flag on mount and will not show the bottom sheet.
+ *
+ * @example
+    const [isDismissed, setIsDismissed] = useState(false);
+
+    const handleClose = () => { // If needed trigger Google Analytics here };
+
+    return (
+        <TimedBottomSheet
+            dismissed={isDismissed}
+            featureName='dummyBottomSheet'
+            showAfter={1_000}
+            hideAfter={15_000}
+            className='max-width-500'
+            onClose={handleClose}
+        >
+            <div className='display-flex align-items-center gap-20'>
+                Lorem ipsum dolor sit amet
+                <Button bsStyle={Button.PRIMARY} onClick={() => setIsDismissed(true)}>
+                    Got it
+                </Button>
+            </div>
+        </TimedBottomSheet>
+    );
+ */
+export declare const TimedBottomSheet: (props: PropsWithChildren<TimedBottomSheetProps>) => import("react/jsx-runtime").JSX.Element;
+export default TimedBottomSheet;

package/src/components/bottomSheet/TimedBottomSheet.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import noop from 'lodash/fp/noop';
+import BottomSheet from './BottomSheet';
+import useTimeout from '../../hooks/useTimeout';
+import useLocalStorage from '../../useLocalStorage';
+const DEFAULT_SHOW_AFTER = 0; // immediately after mount
+const DEFAULT_HIDE_AFTER = 3_600_000; // after 1 hour
+const sanitizeFeatureName = (value) => `${value.charAt(0).toUpperCase()}${value.slice(1)}`.replaceAll(' ', '');
+/**
+ * A wrapper component for the BottomSheet that allows to control it's visibility via timers and to use
+ * the localStorage to save user interaction.
+ *
+ * Don't forget to cleanup the localStorage for the user when removing a feature
+ * by setting "cleanupLocalStorage" to "true" and deploy it like this.
+ * The cleanup will remove the localStorage flag on mount and will not show the bottom sheet.
+ *
+ * @example
+    const [isDismissed, setIsDismissed] = useState(false);
+
+    const handleClose = () => { // If needed trigger Google Analytics here };
+
+    return (
+        <TimedBottomSheet
+            dismissed={isDismissed}
+            featureName='dummyBottomSheet'
+            showAfter={1_000}
+            hideAfter={15_000}
+            className='max-width-500'
+            onClose={handleClose}
+        >
+            <div className='display-flex align-items-center gap-20'>
+                Lorem ipsum dolor sit amet
+                <Button bsStyle={Button.PRIMARY} onClick={() => setIsDismissed(true)}>
+                    Got it
+                </Button>
+            </div>
+        </TimedBottomSheet>
+    );
+ */
+export const TimedBottomSheet = (props) => {
+    const { dismissed = false, featureName, showAfter = DEFAULT_SHOW_AFTER, hideAfter = DEFAULT_HIDE_AFTER, alwaysOn = false, showCloseButton = true, width, cleanupLocalStorage = false, onClose = noop, bodyClassName = 'padding-25 margin-right-25', localStoragePrefix = '', className, children, ...remainingProps } = props;
+    const [showBottomSheet, setShowBottomSheet] = useState(false);
+    const [isHiddenByUser, setIsHiddenByUser, removeIsHiddenFlag] = useLocalStorage(`${localStoragePrefix}hide${sanitizeFeatureName(featureName)}`, false);
+    // In case the visibility is controlled by the outside, means the user clicked on the
+    // content of the bottom sheet, close the sheet and set the localStorage flag for not
+    // showing it again
+    const [prevDismissed, setPrevDismissed] = useState(dismissed);
+    if (dismissed && dismissed !== prevDismissed) {
+        setPrevDismissed(dismissed);
+        setIsHiddenByUser(true);
+        setShowBottomSheet(false);
+    }
+    // Show the bottom sheet automatically after a given amount of time
+    useTimeout(() => {
+        if (!dismissed && !isHiddenByUser && !cleanupLocalStorage) {
+            setShowBottomSheet(true);
+        }
+    }, showAfter);
+    // Hide the bottom sheet automatically after a given amount of time
+    useTimeout(() => setShowBottomSheet(alwaysOn ? true : false), showAfter + hideAfter);
+    // Cleanup functionality. The cleanup will remove the localStorage flag on mount
+    // and will not show the bottom sheet.
+    useEffect(() => {
+        if (cleanupLocalStorage) {
+            removeIsHiddenFlag();
+        }
+    }, []);
+    const handleCloseBottomSheet = () => {
+        setShowBottomSheet(false);
+        setIsHiddenByUser(true);
+        onClose();
+    };
+    return (_jsx("div", { ...remainingProps, children: _jsx(BottomSheet, { show: showBottomSheet, width: width, detach: true, showCloseButton: showCloseButton, onClose: handleCloseBottomSheet, className: className, bodyClassName: bodyClassName, children: children }) }));
+};
+export default TimedBottomSheet;

package/src/components/button/Button.d.ts

@@ -0,0 +1,146 @@
+import React, { type ForwardRefExoticComponent, type HTMLProps, type PropsWithChildren, type RefAttributes } from 'react';
+import type { ObjectValues } from '../../utils/ObjectValues';
+export declare const STYLES_MAP: {
+    readonly DEFAULT: "default";
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
+    readonly INFO: "info";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+    readonly SUCCESS: "success";
+    readonly MUTED: "muted";
+    readonly MUTED_FILLED: "muted-filled";
+};
+export type BUTTON_STYLE = ObjectValues<typeof STYLES_MAP>;
+export declare const VARIANTS_MAP: {
+    readonly VARIANT_LINK: "link";
+    readonly VARIANT_LINK_INLINE: "link-inline";
+    readonly VARIANT_OUTLINE: "outline";
+    readonly VARIANT_ACTION: "action";
+};
+export type BUTTON_VARIANT = ObjectValues<typeof VARIANTS_MAP>;
+export declare const SIZES_MAP: {
+    readonly XS: "xs";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+};
+export type BUTTON_SIZE = ObjectValues<typeof SIZES_MAP>;
+type RegularButton = {
+    /**
+     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.
+     * @default false
+     */
+    asToggle?: false;
+    /**
+     * Callback function triggered when clicking the button.
+     * @param event The MouseEvent that triggered the click.
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+};
+type ToggleButton = {
+    /**
+     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.
+     * @default false
+     */
+    asToggle: true;
+    /**
+     * Callback function triggered when clicking the button.
+     * @param value The new value of the toggle button.
+     */
+    onClick?: (value: boolean) => void;
+};
+export type ButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'onClick'> & {
+    /**
+     * Whether the button should be disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Set the button toggled. Should be used in combination with "asToggle" prop.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Defines the type of the button. This may be used for form submit buttons.
+     * @default 'button'
+     */
+    type?: 'button' | 'submit';
+    /**
+     * Use when the content of the button is an icon only to adapt the button spacing accordingly.
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * Adds right side spacing for an icon. This should be used when having navigation buttons
+     * that use an icon on the right side.
+     * @default false
+     */
+    iconRight?: boolean;
+    /**
+     * Optional rio-glyph icon name that comes in handy for icon only buttons for not adding
+     * a span tag for the icon which reduces boilerplate code.
+     */
+    iconName?: string;
+    /**
+     * Defines whether the button text break into multiple lines when the button space exceeds.
+     *
+     * Multiline buttons should be used as exception only.
+     * @default false
+     */
+    multiline?: boolean;
+    /**
+     * Defines whether the button takes up the full width of the parent element.
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Sets the button style.
+     * @default "default"
+     */
+    bsStyle?: BUTTON_STYLE;
+    /**
+     * Sets the button size.
+     */
+    bsSize?: BUTTON_SIZE;
+    /**
+     * Sets the button variant.
+     */
+    variant?: BUTTON_VARIANT;
+    /**
+     * Whether the "ripple" effect should be suppressed on this button.
+     */
+    noRippleEffect?: boolean;
+    /**
+     * Number of the index used for keyboard support.
+     * @default 0
+     */
+    tabIndex?: number;
+    /**
+     * Additional classes to be set on the button element.
+     */
+    className?: string;
+} & (RegularButton | ToggleButton);
+type Props = PropsWithChildren<ButtonProps>;
+type ButtonType = ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> & {
+    DEFAULT: 'default';
+    PRIMARY: 'primary';
+    SECONDARY: 'secondary';
+    INFO: 'info';
+    WARNING: 'warning';
+    DANGER: 'danger';
+    SUCCESS: 'success';
+    MUTED: 'muted';
+    MUTED_FILLED: 'muted-filled';
+    VARIANT_LINK: 'link';
+    VARIANT_LINK_INLINE: 'link-inline';
+    VARIANT_OUTLINE: 'outline';
+    VARIANT_ACTION: 'action';
+    XS: 'xs';
+    SM: 'sm';
+    MD: 'md';
+    LG: 'lg';
+};
+declare const Button: ButtonType;
+export default Button;

package/src/components/button/Button.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, } from 'react';
+import classNames from 'classnames';
+import noop from 'lodash/fp/noop';
+import { createButtonRipple } from '../../utils/buttonEffect';
+import useMergeRefs from '../../hooks/useMergeRefs';
+export const STYLES_MAP = {
+    DEFAULT: 'default',
+    PRIMARY: 'primary',
+    SECONDARY: 'secondary',
+    INFO: 'info',
+    WARNING: 'warning',
+    DANGER: 'danger',
+    SUCCESS: 'success',
+    MUTED: 'muted',
+    MUTED_FILLED: 'muted-filled',
+};
+export const VARIANTS_MAP = {
+    VARIANT_LINK: 'link',
+    VARIANT_LINK_INLINE: 'link-inline',
+    VARIANT_OUTLINE: 'outline',
+    VARIANT_ACTION: 'action',
+};
+export const SIZES_MAP = {
+    XS: 'xs',
+    SM: 'sm',
+    MD: 'md',
+    LG: 'lg',
+};
+const Button = forwardRef((props, ref) => {
+    const { active = false, disabled = false, asToggle = false, onClick = noop, bsStyle = 'default', bsSize, variant, iconOnly = false, iconName, iconRight = false, multiline = false, block = false, className = '', noRippleEffect = false, type = 'button', tabIndex = 0, children, ...remainingProps } = props;
+    const [isToggled, setIsToggled] = useState(active);
+    const btnRef = useRef(null);
+    const buttonRef = useMergeRefs(btnRef, ref);
+    // Update internal toggle state when used as controlled component and outside toggle state changes
+    // Note, using the usePrevious hook resulted in an endless loop, hence the useState here
+    const [previousActive, setPreviousActive] = useState(active);
+    if (active !== previousActive) {
+        setIsToggled(active);
+        setPreviousActive(active);
+    }
+    const handleClick = (event) => {
+        if (!noRippleEffect) {
+            createButtonRipple(event.nativeEvent, event.currentTarget);
+        }
+        if (asToggle) {
+            // Intercept click handler only for toggle button to update internal state and blur after click
+            const newIsToggled = !isToggled;
+            setIsToggled(newIsToggled);
+            if (newIsToggled) {
+                btnRef.current?.blur();
+            }
+            onClick(newIsToggled);
+        }
+        else {
+            onClick(event);
+        }
+    };
+    const buttonClassNames = classNames('btn', `btn-${bsStyle}`, variant === VARIANTS_MAP.VARIANT_LINK && 'btn-link', variant === VARIANTS_MAP.VARIANT_LINK_INLINE && 'btn-link btn-link-inline', variant === VARIANTS_MAP.VARIANT_OUTLINE && 'btn-outline', variant === VARIANTS_MAP.VARIANT_ACTION && 'btn-action', bsSize && `btn-${bsSize}`, asToggle && 'btn-toggle', isToggled && 'active', iconOnly && 'btn-icon-only', iconRight && 'btn-icon-right', multiline && 'btn-multiline', block && 'btn-block', 'btn-component', className);
+    return (_jsxs("button", { ref: buttonRef, type: type, ...remainingProps, className: buttonClassNames, onClick: handleClick, disabled: disabled, tabIndex: tabIndex, children: [iconName && _jsx("span", { className: `rioglyph ${iconName}` }), children] }));
+});
+Object.assign(Button, STYLES_MAP);
+Object.assign(Button, VARIANTS_MAP);
+Object.assign(Button, SIZES_MAP);
+export default Button;