@rio-cloud/rio-uikit 1.11.0 → 1.12.0

package/src/components/expander/ExpanderList.d.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+export type ExpanderListItem = {
+    /**
+     * The "id" property is used to know which item is expanded. It will also be used to control
+     * the component from the outside. It can be a number or a string. If there is no "id" provided,
+     * a unique id is internally generated  which will be used internally for the uncontrolled case.'
+     */
+    id?: string | number;
+    /**
+     * The header content.
+     */
+    header: string | React.ReactNode;
+    /**
+     * The body content. If there is no "body" provided, the list item is not expandable.
+     */
+    body?: string | React.ReactNode;
+    /**
+     * Defines if the item will be expanded or closed by default.
+     */
+    open?: boolean;
+    /**
+     * Callback fired when item toggles to open after a click.
+     */
+    onOpen?: VoidFunction;
+    /**
+     * Callback fired when item toggles to close after a click.
+     */
+    onClose?: VoidFunction;
+    /**
+     * Additional classes to be set on "expander-list-header" node.
+     */
+    headerClassName?: string;
+    /**
+     * Additional classes to be set on "expander-list-body" node.
+     */
+    bodyClassName?: string;
+    /**
+     * Additional classes to be set on list item node.
+     */
+    className?: string;
+};
+export type ExpanderListProps = {
+    /**
+     * List of items to be rendered. The expanded state can be defined via the items `open` prop.
+     */
+    items: ExpanderListItem[];
+    /**
+     * Defines whether the "expander-list-body" is rounded or not.
+     * @default true
+     */
+    rounded?: boolean;
+    /**
+     * Defines whether the "expander-list-body" has a border or not.
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * It unmounts the body component (remove it from the DOM) when it is collapsed.
+     * Set it to false to avoid the unmount.
+     * @default true
+     */
+    unmountOnExit?: boolean;
+    /**
+     * Additional classes to be set on the unordered list itself.
+     */
+    className?: string;
+};
+declare const ExpanderList: (props: ExpanderListProps) => import("react/jsx-runtime").JSX.Element;
+export default ExpanderList;

package/src/components/expander/ExpanderList.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import isEqual from 'lodash/fp/isEqual';
+import classNames from 'classnames';
+import Collapse from '../collapse/Collapse';
+import { hasBorderClass, hasRoundedClass } from '../../utils/hasUtilityClass';
+const getRandomString = () => (Math.random() + 1).toString(36).toUpperCase().substring(2);
+// Generate a unique id (if not present) instead of using the index for the key as it will create
+// side effects when removing items from the list and re-render the ExpanderList.
+const parseItems = (items) => {
+    return items.map(item => {
+        if (!item.id) {
+            item.id = getRandomString();
+        }
+        return item;
+    });
+};
+const ExpanderList = (props) => {
+    const { items = [], unmountOnExit = true, rounded = true, bordered = true, className = '' } = props;
+    const [listItems, setListItems] = useState(parseItems(items));
+    // Update internal state from external prop change
+    const [previousItems, setPreviousItems] = useState(items);
+    if (!isEqual(previousItems, items)) {
+        setListItems(parseItems(items));
+        setPreviousItems(items);
+    }
+    const handleToggleItem = (itemToExpand) => {
+        if (!itemToExpand.body) {
+            return;
+        }
+        // Toggle the open state for the selected item based on the provided or generated id
+        const updatedListItems = [...listItems].map(item => {
+            if (item.id === itemToExpand.id) {
+                item.onOpen && !item.open && item.onOpen();
+                item.onClose && item.open && item.onClose();
+                item.open = !item.open;
+            }
+            return item;
+        });
+        setListItems(updatedListItems);
+    };
+    const listClassNames = classNames('expander-list list-group', rounded && !hasRoundedClass(className) && 'rounded', bordered && !hasBorderClass(className) && 'border', className);
+    return (_jsx("ul", { className: listClassNames, children: listItems.map(item => {
+            const isOpen = item.open;
+            const itemClassNames = classNames('list-group-item', item.className && item.className, item.body && 'expandable', isOpen && 'open');
+            return (_jsxs("li", { className: itemClassNames, children: [_jsx(ExpanderListItemHeader, { item: item, onToggle: handleToggleItem }), item.body && (_jsx(Collapse, { open: isOpen, unmountOnExit: unmountOnExit, children: _jsx("div", { className: 'expander-list-body-wrapper', children: _jsx(ExpanderListItemBody, { className: item.bodyClassName, children: item.body }) }) }))] }, item.id));
+        }) }));
+};
+const ExpanderListItemHeader = ({ item, onToggle }) => {
+    const headerClassNames = classNames('expander-list-header', item.headerClassName);
+    const iconClassNames = classNames('expander-icon', 'rioglyph', 'rioglyph-chevron-down');
+    return (_jsxs("div", { className: headerClassNames, onClick: () => onToggle(item), "aria-label": 'expander item header', children: [_jsx("span", { className: 'expander-list-header-content', children: item.header }), item.body && _jsx("span", { className: iconClassNames })] }));
+};
+const ExpanderListItemBody = ({ className, children }) => {
+    const bodyClassNames = classNames('expander-list-body', className);
+    return (_jsx("div", { className: bodyClassNames, "aria-label": 'expander item body', children: children }));
+};
+export default ExpanderList;

package/src/components/expander/ExpanderPanel.d.ts

@@ -0,0 +1,75 @@
+import React, { type PropsWithChildren } from 'react';
+type ChildrenType = React.ReactNode | ((isOpen: boolean) => string | React.ReactNode | JSX.Element);
+export type ExpanderPanelProps = {
+    /**
+     * The title to be shown in the expander header.
+     */
+    title: string | React.ReactNode;
+    /**
+     * Component visual or contextual style variants.
+     */
+    bsStyle?: 'blank' | 'default' | 'separator' | 'primary' | 'secondary' | 'info' | 'warning' | 'danger' | 'success';
+    /**
+     * Defines if the icon will be align left, otherwise it is aligned right.
+     * @default false
+     */
+    iconLeft?: boolean;
+    /**
+     * Defines if the panel will be opened or closed by default.
+     * The open/closed state will be handled internally.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * It unmounts the body component (remove it from the DOM) when it is collapsed.
+     * Set it to false to avoid the unmount.
+     * @default true
+     */
+    unmountOnExit?: boolean;
+    /**
+     * Callback function for when the header is clicked and the expander toggles.
+     * @param isOpen
+     * @returns
+     */
+    onToggle?: (isOpen: boolean) => void;
+    /**
+     * Callback fired after the component has expanded.
+     */
+    onEntered?: VoidFunction;
+    /**
+     * Callback fired after the component has collapsed.
+     */
+    onExited?: VoidFunction;
+    /**
+     * Callback fired when the animation starts for either expand or collapse.
+     */
+    onAnimationStart?: VoidFunction;
+    /**
+     * Additional classes to be set on the panel header.
+     */
+    headerClassName?: string;
+    /**
+     * Additional classes to be set on the header title.
+     */
+    titleClassName?: string;
+    /**
+     * Additional classes to be set on the panel body.
+     */
+    bodyClassName?: string;
+    /**
+     * Additional classes added to the chevron icon
+     */
+    iconClassName?: string;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+    /**
+     * Any element to be rendered inside the panel body.
+     * Providing a function enables the render prop approach. The function gets the
+     * `isOpen` state passed and is responsible for rendering the custom content.
+     */
+    children?: ChildrenType;
+};
+declare const ExpanderPanel: (props: PropsWithChildren<ExpanderPanelProps>) => import("react/jsx-runtime").JSX.Element;
+export default ExpanderPanel;

package/src/components/expander/ExpanderPanel.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import noop from 'lodash/fp/noop';
+import classNames from 'classnames';
+import Collapse from '../collapse/Collapse';
+const ExpanderPanel = (props) => {
+    const { open = false, iconLeft = false, bsStyle = 'blank', title, headerClassName, titleClassName, bodyClassName, iconClassName, unmountOnExit = true, onEntered = noop, onExited = noop, onAnimationStart = noop, onToggle = noop, className, children, ...remainingProps } = props;
+    const [isOpen, setIsOpen] = useState(open);
+    // Update internal state from external prop change
+    const [previousOpen, setPreviousOpen] = useState(open);
+    if (previousOpen !== open) {
+        setIsOpen(open);
+        setPreviousOpen(open);
+    }
+    const handleToggle = () => {
+        const newState = !isOpen;
+        setIsOpen(newState);
+        onToggle(newState);
+    };
+    const wrapperClassNames = classNames('expander-panel panel', `panel-${bsStyle}`, className);
+    const iconClassNames = classNames('expander-icon', iconClassName, 'rioglyph', 'rioglyph-chevron-down');
+    const headerClassNames = classNames('panel-heading', isOpen && 'open', iconLeft && 'icon-left', headerClassName && headerClassName);
+    const titleClassNames = classNames('title', titleClassName && titleClassName);
+    const bodyClassNames = classNames('panel-body', bodyClassName && bodyClassName);
+    const isRenderCallback = children && typeof children === 'function';
+    return (_jsxs("div", { ...remainingProps, className: wrapperClassNames, "aria-label": 'expander panel', children: [_jsxs("div", { className: headerClassNames, onClick: handleToggle, "aria-label": 'panel heading', children: [_jsx("span", { className: titleClassNames, children: title }), _jsx("span", { className: iconClassNames }), bsStyle === 'separator' && (_jsx("div", { className: 'separator', children: _jsx("hr", {}) }))] }), _jsx(Collapse, { open: isOpen, unmountOnExit: unmountOnExit, onEntered: onEntered, onExited: onExited, onAnimationStart: () => onAnimationStart(), children: _jsx("div", { children: _jsx("div", { className: bodyClassNames, children: isRenderCallback ? children(isOpen) : children }) }) })] }));
+};
+export default ExpanderPanel;

package/src/components/fade/Fade.d.ts

@@ -0,0 +1,76 @@
+import { type PropsWithChildren } from 'react';
+export type FadeAnimationStyle = 'fade' | 'tabs' | 'page' | 'pageBack' | 'fromLeft' | 'fromRight' | 'fromTop' | 'fromBottom';
+export type FadeProps = {
+    /**
+     * Defines whether to show the content.
+     *
+     * @default true
+     */
+    show?: boolean;
+    /**
+     * Duration of the fade animation in seconds.
+     *
+     * @default 0.2
+     */
+    duration?: number;
+    /**
+     * Defines whether the animation is triggered initially when showing the content.
+     *
+     * @default false
+     */
+    initial?: boolean;
+    /**
+     * Defines the desired animation style.
+     *
+     * Possible values are:
+     * - `fade`
+     * - `tabs`
+     * - `page`
+     * - `pageBack`
+     * - `fromLeft`
+     * - `fromRight`
+     * - `fromTop`
+     * - `fromBottom`
+     *
+     * @default 'fade'
+     */
+    animationStyle?: FadeAnimationStyle;
+    /**
+     * If set to true, only one component will be rendered at a time.
+     *
+     * The exiting component will finish its exit animation before the entering component is rendered.
+     *
+     * @default false
+     */
+    exitBeforeEnter?: boolean;
+    /**
+     * Fires when all exiting nodes have completed animating out.
+     *
+     * @default noop
+     */
+    onExitComplete?: VoidFunction;
+    /**
+     * Additional custom props for the underlying Framer motion AnimatePresence component.
+     *
+     * Use this for additional customizations.
+     */
+    animatePresenceProps?: object;
+    /**
+     * Additional custom props for the underlying Framer motion <motion.div> component.
+     *
+     * Use this for additional customizations.
+     */
+    motionProps?: object;
+};
+declare const Fade: {
+    (props: PropsWithChildren<FadeProps>): import("react/jsx-runtime").JSX.Element;
+    FADE: "fade";
+    FROM_LEFT: "fromLeft";
+    FROM_RIGHT: "fromRight";
+    FROM_TOP: "fromTop";
+    FROM_BOTTOM: "fromBottom";
+    TABS: "tabs";
+    PAGE: "page";
+    PAGE_BACK: "pageBack";
+};
+export default Fade;

package/src/components/fade/Fade.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import isArray from 'lodash/fp/isArray';
+import head from 'lodash/fp/head';
+import noop from 'lodash/noop';
+import useAfterMount from '../../useAfterMount';
+const animationPropsForStyle = {
+    fromLeft: {
+        initial: { x: -10, y: 0, opacity: 0 },
+        animate: { x: 0, y: 0, opacity: 1 },
+        exit: { x: -10, y: 0, opacity: 0 },
+    },
+    fromRight: {
+        initial: { x: 10, y: 0, opacity: 0 },
+        animate: { x: 0, y: 0, opacity: 1 },
+        exit: { x: 10, y: 0, opacity: 0 },
+    },
+    fromTop: {
+        initial: { y: -10, x: 0, opacity: 0 },
+        animate: { y: 0, x: 0, opacity: 1 },
+        exit: { y: -10, x: 0, opacity: 0 },
+    },
+    fromBottom: {
+        initial: { y: 10, x: 0, opacity: 0 },
+        animate: { y: 0, x: 0, opacity: 1 },
+        exit: { y: 10, x: 0, opacity: 0 },
+    },
+    fade: {
+        initial: { x: 0, y: 0, opacity: 0 },
+        animate: { x: 0, y: 0, opacity: 1 },
+        exit: { x: 0, y: 0, opacity: 0 },
+    },
+    tabs: {
+        initial: { x: 2, y: 0, opacity: 0 },
+        animate: { x: 0, y: 0, opacity: 1 },
+        exit: { x: -2, y: 0, opacity: 0 },
+    },
+    page: {
+        initial: 'pageEnter',
+        animate: 'pageCenter',
+        exit: 'pageExit',
+    },
+    pageBack: {
+        initial: 'pageEnter',
+        animate: 'pageCenter',
+        exit: 'pageExit',
+    },
+};
+const getPageDirection = (animationStyle) => animationStyle === 'pageBack' ? -1 : 1;
+const pageTransitionVariants = {
+    pageEnter: (pageDirection) => ({ x: `${pageDirection * 60}%`, opacity: 0 }),
+    pageCenter: { x: 0, opacity: 1 },
+    pageExit: (pageDirection) => ({ zIndex: 0, x: `${-pageDirection * 60}%`, opacity: 0 }),
+};
+const Fade = (props) => {
+    const { show = true, initial = false, duration = 0.2, exitBeforeEnter = false, animationStyle = 'fade', animatePresenceProps, motionProps, onExitComplete = noop, children, } = props;
+    const [allowInitialAnimation, setAllowInitialAnimation] = useState(initial);
+    useAfterMount(() => {
+        if (!allowInitialAnimation) {
+            setAllowInitialAnimation(true);
+        }
+    });
+    let motionDivKey = 'fade';
+    // If there are multiple children that are conditionally rendered like
+    // in case of a tabbed content - get the current visible child key
+    // to update the motion.div key to animate different children
+    if (isArray(children)) {
+        const currentChild = head(children.filter(child => Boolean(child)));
+        motionDivKey = `fade-${currentChild.key}`;
+    }
+    // In case the animation is a page transition, use custom variants and add a custom pageDirection variable
+    // to animate in the right direction
+    const isPageTransition = animationStyle === 'page' || animationStyle === 'pageBack';
+    const pageDirection = getPageDirection(animationStyle);
+    const custom = isPageTransition ? pageDirection : null;
+    const pageTransitionProps = isPageTransition ? { variants: pageTransitionVariants } : null;
+    const selectedAnimationProps = animationPropsForStyle[animationStyle];
+    // Disable initial animation on mount. After mount the initial animation step is needed to enable
+    // the "fade-in" animation, otherwise it just appears
+    const selectedInitial = allowInitialAnimation ? selectedAnimationProps.initial : false;
+    const animationProps = { ...selectedAnimationProps, initial: selectedInitial };
+    return (
+    // @ts-ignore-next-line
+    _jsx(AnimatePresence, { initial: allowInitialAnimation, exitBeforeEnter: exitBeforeEnter, onExitComplete: onExitComplete, custom: custom, ...animatePresenceProps, children: show && (_jsx(motion.div, { transition: { duration }, custom: custom, ...animationProps, ...pageTransitionProps, ...motionProps, children: children }, motionDivKey)) }));
+};
+Fade.FADE = 'fade';
+Fade.FROM_LEFT = 'fromLeft';
+Fade.FROM_RIGHT = 'fromRight';
+Fade.FROM_TOP = 'fromTop';
+Fade.FROM_BOTTOM = 'fromBottom';
+Fade.TABS = 'tabs';
+Fade.PAGE = 'page';
+Fade.PAGE_BACK = 'pageBack';
+export default Fade;

package/src/components/fade/FadeExpander.d.ts

@@ -0,0 +1,27 @@
+import { type PropsWithChildren } from 'react';
+type FadeExpanderProps = {
+    /**
+     * Defines if the content is shown or not.
+     *
+     * @default false
+     */
+    show: boolean;
+    /**
+     * Allows customization of animation duration.
+     *
+     * @default 0.2
+     */
+    duration?: number;
+    /**
+     * Delay in seconds before starting the animation.
+     *
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * Additional classes set to the wrapper element.
+     */
+    className?: string;
+};
+declare const FadeExpander: (props: PropsWithChildren<FadeExpanderProps>) => import("react/jsx-runtime").JSX.Element;
+export default FadeExpander;

package/src/components/fade/FadeExpander.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+const THRESHOLD_TIMEOUT_MS = 200;
+const FadeExpander = (props) => {
+    const { children, show = false, duration = 0.2, delay = 0, className = '' } = props;
+    const [isVisible, setIsVisible] = useState(show);
+    const [overflow, setOverflow] = useState('hidden'); // Start with hidden overflow
+    const durationRef = useRef(duration);
+    // Effect to manage visibility based on show prop
+    useEffect(() => {
+        if (show) {
+            // Set to visible when show is true
+            setIsVisible(true);
+        }
+        else {
+            // Set overflow to hidden immediately when show is false
+            setOverflow('hidden');
+            // Delay setting isVisible to false so the overflow can change before
+            setTimeout(() => {
+                setIsVisible(false);
+            }, 0);
+        }
+    }, [show]);
+    const handleAnimationComplete = () => {
+        if (show) {
+            // Set overflow to visible after animation is done
+            setTimeout(() => setOverflow('visible'), durationRef.current * 1000 + THRESHOLD_TIMEOUT_MS);
+        }
+    };
+    return (
+    // @ts-ignore
+    _jsx(AnimatePresence, { onExitComplete: () => setOverflow('hidden'), children: isVisible && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: {
+                height: { duration, delay },
+                opacity: { duration, delay },
+                ease: 'easeIn',
+            }, 
+            // To ensures smooth height transition, the overflow should be "hidden" during the animation
+            style: { overflow }, onAnimationComplete: handleAnimationComplete, className: className, children: children })) }));
+};
+export default FadeExpander;

package/src/components/fade/FadeUp.d.ts

@@ -0,0 +1,27 @@
+import { type ComponentProps, type PropsWithChildren } from 'react';
+type FadeUpProps = Omit<ComponentProps<'div'>, 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'> & {
+    /**
+     * Defines the time the animation should wait until it starts.
+     *
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * Defines the duration in seconds of the fade up animation.
+     *
+     * @default 0.4
+     */
+    duration?: number;
+    /**
+     * Defines the y offset from the bottom where the element starts to fade in.
+     *
+     * @default 15
+     */
+    offset?: number;
+    /**
+     * Additional classes names added to the motion div wrapper.
+     */
+    className?: string;
+};
+declare const FadeUp: (props: PropsWithChildren<FadeUpProps>) => import("react/jsx-runtime").JSX.Element;
+export default FadeUp;

package/src/components/fade/FadeUp.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { motion } from 'framer-motion';
+import useOnScreen from '../../hooks/useOnScreen';
+const FadeUp = (props) => {
+    const { delay = 0, duration = 0.4, className = '', offset = 15, children, ...remainingProps } = props;
+    const ref = useRef(null);
+    const isInView = useOnScreen(ref);
+    const [isVisible, setIsVisible] = useState(false);
+    const variants = {
+        hidden: {
+            opacity: 0,
+            y: offset,
+        },
+        visible: {
+            opacity: 1,
+            y: 0,
+        },
+    };
+    useEffect(() => {
+        if (isInView && !isVisible) {
+            setIsVisible(true);
+        }
+    }, [isInView, isVisible]);
+    return (_jsx(motion.div, { ref: ref, variants: variants, initial: 'hidden', animate: isVisible ? 'visible' : 'hidden', transition: { delay, type: 'spring', duration }, ...remainingProps, className: className, children: children }));
+};
+export default FadeUp;

package/src/components/feedback/FeedbackInlineButtons.d.ts

@@ -0,0 +1,13 @@
+import React, { type ComponentProps } from 'react';
+type FeedbackInlineButtonsProps = ComponentProps<'div'> & {
+    /**
+     * Optional headline inlined with the buttons.
+     */
+    headline?: React.ReactNode;
+    /**
+     * List of buttons to be shown.
+     */
+    buttons?: React.ReactNode[];
+};
+declare const FeedbackInlineButtons: (props: FeedbackInlineButtonsProps) => import("react/jsx-runtime").JSX.Element;
+export default FeedbackInlineButtons;

package/src/components/feedback/FeedbackInlineButtons.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FeedbackInlineButtons = (props) => {
+    const { buttons = [], headline, ...remainingProps } = props;
+    return (_jsxs("div", { ...remainingProps, className: 'display-flex flex-wrap align-items-center column-gap-15 row-gap-5 user-select-none', children: [headline && _jsx("div", { className: 'text-color-dark', children: headline }), _jsx("div", { className: 'btn-toolbar gap-5', children: buttons.map(button => button) })] }));
+};
+export default FeedbackInlineButtons;

package/src/components/feedback/FeedbackRating.d.ts

@@ -0,0 +1,65 @@
+import React, { type ComponentProps } from 'react';
+import type { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';
+type FeedbackRatingProps = ComponentProps<'div'> & {
+    /**
+     * Optional headline
+     */
+    headline?: React.ReactNode;
+    /**
+     * The amount of toggle buttons used to rate.
+     *
+     * @default 1
+     */
+    count: number;
+    /**
+     * Defines whether the buttons are round.
+     *
+     * @default false
+     */
+    circleButtons?: boolean;
+    /**
+     * Optional class names applied to all the buttons.
+     * If you need more control on styling individual buttons, see `buttonStyles`.
+     */
+    buttonClassName?: string;
+    /**
+     * Array of button labels that will be used instead of the index.
+     * There needs to be a label for each button defined.
+     */
+    buttonLabels?: React.ReactNode[];
+    /**
+     * Array of button styles to individually define the button size, style and variant.
+     * There needs to be a item for each button defined.
+     */
+    buttonStyles?: {
+        bsSize?: BUTTON_SIZE;
+        bsStyle?: BUTTON_STYLE;
+        variant?: BUTTON_VARIANT;
+        className?: string;
+    }[];
+    /**
+     * Left aligned label to name the lowest rating option.
+     */
+    leftLabel?: React.ReactNode;
+    /**
+     * Right aligned label to name the highest rating option.
+     */
+    rightLabel?: React.ReactNode;
+    /**
+     * Additional icon placed in front of the rating buttons.
+     */
+    leadingIcon?: React.ReactNode;
+    /**
+     * Additional icon placed after the rating buttons.
+     */
+    trailingIcon?: React.ReactNode;
+    /**
+     * Callback triggered when the rating changes.
+     *
+     * @param rating The rating value. Undefined, when a toggle is unchecked.
+     * @returns
+     */
+    onRatingChanged?: (rating: number | undefined) => void;
+};
+declare const FeedbackRating: (props: FeedbackRatingProps) => import("react/jsx-runtime").JSX.Element;
+export default FeedbackRating;

package/src/components/feedback/FeedbackRating.js

@@ -0,0 +1,21 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import classNames from 'classnames';
+import ToggleButton from '../button/ToggleButton';
+const FeedbackRating = (props) => {
+    const { headline, count = 1, circleButtons = false, buttonLabels, buttonStyles, buttonClassName = '', leftLabel, rightLabel, leadingIcon, trailingIcon, onRatingChanged = () => { }, ...remainingProps } = props;
+    const [rating, setRating] = useState();
+    const handleRating = (value) => {
+        setRating(value);
+        onRatingChanged(value);
+    };
+    const hasSubLabels = !!leftLabel || !!rightLabel;
+    const buttonWrapperClasses = classNames('display-flex gap-10', hasSubLabels ? 'align-items-start' : 'align-items-center', 'text-size-14', 'margin-bottom-25');
+    const leadingTrailingIconClasses = classNames('display-flex align-items-center', 'text-size-200pct', hasSubLabels && 'padding-top-3');
+    return (_jsxs("div", { ...remainingProps, className: 'FeedbackRating', children: [headline && _jsx("div", { className: 'text-medium text-size-16 margin-bottom-10', children: headline }), _jsxs("div", { className: buttonWrapperClasses, children: [leadingIcon && _jsx("div", { className: leadingTrailingIconClasses, children: leadingIcon }), _jsxs("div", { children: [_jsx("div", { className: 'display-flex flex-wrap gap-10', children: Array.from({ length: count }, (_, index) => {
+                                    const indexNumber = index + 1;
+                                    return (_createElement(ToggleButton, { ...buttonStyles?.[index], key: indexNumber, active: rating === indexNumber, onClick: (toggled) => handleRating(toggled ? indexNumber : undefined), className: `${circleButtons ? 'rounded-circle aspect-ratio-1' : ''} ${buttonClassName} ${buttonStyles?.[index].className ?? ''}` }, buttonLabels?.[index] ?? indexNumber));
+                                }) }), hasSubLabels && (_jsxs("div", { className: 'display-flex justify-content-between margin-top-5 gap-25', children: [leftLabel ? _jsx("label", { className: 'word-wrap text-color-dark', children: leftLabel }) : _jsx("div", {}), rightLabel ? _jsx("label", { className: 'word-wrap text-color-dark', children: rightLabel }) : _jsx("div", {})] }))] }), trailingIcon && _jsx("div", { className: leadingTrailingIconClasses, children: trailingIcon })] })] }));
+};
+export default FeedbackRating;