@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/lib/es/src/components/avatar/Avatar.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const SimpleTooltip_1 = tslib_1.__importDefault(require("../tooltip/SimpleTooltip"));
+const AvatarContent_1 = tslib_1.__importDefault(require("./AvatarContent"));
+const TOOLTIP_SHOW_TIMEOUT_IN_MS = 100;
+const TOOLTIP_HIDE_TIMEOUT_IN_MS = 0;
+const Avatar = (props) => {
+    const { name, abbr, image, alt, iconName = 'user', size = 40, backgroundColor = 'bg-lighter', tooltip, iconClassName, className = '', ...remainingProps } = props;
+    const classes = (0, classnames_1.default)('Avatar', backgroundColor, className);
+    const tooltipContent = tooltip || name;
+    const wrapWithTooltip = (content) => tooltipContent ? ((0, jsx_runtime_1.jsx)(SimpleTooltip_1.default, { content: tooltipContent, placement: 'bottom', delay: { show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }, popperConfig: {
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: [0, 5],
+                    },
+                },
+                {
+                    name: 'arrow',
+                    options: {},
+                },
+            ],
+        }, children: content })) : (content);
+    return wrapWithTooltip((0, jsx_runtime_1.jsx)("div", { ...remainingProps, className: classes, style: { height: `${size}px` }, children: (0, jsx_runtime_1.jsx)(AvatarContent_1.default, { name: name, abbr: abbr, image: image, alt: alt, iconName: iconName, iconClassName: iconClassName }) }));
+};
+exports.default = Avatar;

package/lib/es/src/components/avatar/AvatarContent.d.ts

@@ -0,0 +1,10 @@
+type AvatarContentProps = {
+    image?: string;
+    name?: string;
+    abbr?: string;
+    alt?: string;
+    iconName?: string;
+    iconClassName?: string;
+};
+declare const AvatarContent: ({ image, name, abbr, alt, iconName, iconClassName }: AvatarContentProps) => import("react/jsx-runtime").JSX.Element | null;
+export default AvatarContent;

package/lib/es/src/components/avatar/AvatarContent.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const getInitials = (name = '') => name
+    .split(' ')
+    .map(word => word[0])
+    .join('');
+const AvatarContent = ({ image, name, abbr, alt, iconName = '', iconClassName = '' }) => {
+    if (image) {
+        return (0, jsx_runtime_1.jsx)("img", { src: image, alt: alt || name || 'avatar', className: 'Avatar-image', draggable: false });
+    }
+    if (abbr || name) {
+        const initials = abbr || getInitials(name);
+        const style = initials.length > 2 ? { letterSpacing: '-0.2px' } : {};
+        return ((0, jsx_runtime_1.jsx)("span", { className: 'Avatar-initials', style: style, children: initials }));
+    }
+    if (iconName) {
+        return (0, jsx_runtime_1.jsx)("span", { className: `Avatar-icon rioglyph rioglyph-${iconName} ${iconClassName}` });
+    }
+    return null;
+};
+exports.default = AvatarContent;

package/lib/es/src/components/avatar/AvatarGroup.d.ts

@@ -0,0 +1,15 @@
+import { type PropsWithChildren } from 'react';
+export type AvatarGroupProps = {
+    /**
+     * Maximum number of items to be shown. Items that overflow are grouped into a single
+     * Avatar that displays the overflow count. Collapsed names are shown inside a tooltip.
+     * By default all items are shown.
+     */
+    maxItemsVisible?: number;
+    /**
+     * Additional classes set to the outer element.
+     */
+    className?: string;
+};
+declare const AvatarGroup: (props: PropsWithChildren<AvatarGroupProps>) => import("react/jsx-runtime").JSX.Element;
+export default AvatarGroup;

package/lib/es/src/components/avatar/AvatarGroup.js

@@ -0,0 +1,26 @@
+"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 Avatar_1 = tslib_1.__importDefault(require("./Avatar"));
+const AvatarGroup = (props) => {
+    const { maxItemsVisible = 99, className = '', children, ...remainingProps } = props;
+    const avatars = react_1.default.Children.toArray(children);
+    if (avatars.length <= maxItemsVisible) {
+        return (0, jsx_runtime_1.jsx)("div", { className: 'AvatarGroup', children: avatars });
+    }
+    const visibleAvatars = avatars.slice(0, maxItemsVisible - 1);
+    const hiddenAvatars = avatars.slice(maxItemsVisible - 1);
+    const remainingCount = avatars.length - maxItemsVisible + 1;
+    const hiddenNames = hiddenAvatars
+        .map(avatar => {
+        if (react_1.default.isValidElement(avatar) && 'props' in avatar && 'name' in avatar.props) {
+            return avatar.props.name;
+        }
+        return ''; // Handle cases where the avatar doesn't have a name
+    })
+        .filter(Boolean); // Remove empty strings
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'AvatarGroup', ...remainingProps, children: [visibleAvatars, (0, jsx_runtime_1.jsx)(Avatar_1.default, { abbr: `+${remainingCount}`, tooltip: (0, jsx_runtime_1.jsx)("div", { children: hiddenNames.map(hiddenName => ((0, jsx_runtime_1.jsx)("div", { children: hiddenName }, hiddenName))) }) })] }));
+};
+exports.default = AvatarGroup;

package/lib/es/src/components/banner/Banner.d.ts

@@ -0,0 +1,72 @@
+import { type ReactNode, type PropsWithChildren } from 'react';
+type BannerProps = {
+    /**
+     * Defines if the content is shown or not.
+     *
+     * @default true
+     */
+    show: boolean;
+    /**
+     * Defines if a close button is shown or not. You can still add a custom
+     * CTA button to the content that handles visibility.
+     *
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * Callback when the close button is clicked.
+     *
+     * @returns
+     */
+    onClose?: () => void;
+    /**
+     * Defines the time when the next page is shown in milliseconds.
+     *
+     * @default 20_000
+     */
+    pageTimeout?: number;
+    /**
+     * Defines if the page navigation buttons shall be shown or not.
+     *
+     * @default true
+     */
+    showPageNavigation?: boolean;
+    /**
+     * Defines if a border is shown or not. When placed on a white background, please disable the border
+     * so it looks better.
+     *
+     * @default true
+     */
+    border?: boolean;
+    /**
+     * Enables or disables initial animation.
+     *
+     * @default true
+     */
+    initialAnimation?: boolean;
+    /**
+     * Additional classname added to the wrapper element.
+     */
+    className?: string;
+    /**
+     * The actual banner content. Wrap your content in a <Banner.Page> component.
+     *
+     * When having multiple pages, usa an array of <Banner.Page> components.
+     */
+    children: ReactNode | ReactNode[];
+};
+declare const Banner: {
+    (props: BannerProps): import("react/jsx-runtime").JSX.Element;
+    Page: ({ className, children, ...remainingProps }: PropsWithChildren<{
+        className?: string;
+    }>) => import("react/jsx-runtime").JSX.Element;
+    Icon: ({ className, children, ...remainingProps }: PropsWithChildren<import("./BannerIcon").BannerIconProps>) => import("react/jsx-runtime").JSX.Element;
+    Content: (props: PropsWithChildren<Partial<Pick<HTMLDivElement, "id">> & {
+        title?: string | React.ReactElement;
+        actions?: React.ReactElement;
+        minWidthBreakpoint?: number;
+        className?: string;
+    }>) => import("react/jsx-runtime").JSX.Element;
+    Actions: ({ className, children, ...remainingProps }: PropsWithChildren<import("./BannerActions").BannerActionsProps>) => import("react/jsx-runtime").JSX.Element;
+};
+export default Banner;

package/lib/es/src/components/banner/Banner.js

@@ -0,0 +1,77 @@
+"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 framer_motion_1 = require("framer-motion");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Card_1 = tslib_1.__importDefault(require("../card/Card"));
+const Button_1 = tslib_1.__importDefault(require("../button/Button"));
+const BannerActions_1 = tslib_1.__importDefault(require("./BannerActions"));
+const BannerContent_1 = tslib_1.__importDefault(require("./BannerContent"));
+const BannerIcon_1 = tslib_1.__importDefault(require("./BannerIcon"));
+const BannerPage_1 = tslib_1.__importDefault(require("./BannerPage"));
+const BannerContext = (0, react_1.createContext)(undefined);
+const Banner = (props) => {
+    const { show = true, dismissible = true, onClose = () => { }, pageTimeout = 20_000, showPageNavigation = true, border = true, initialAnimation = true, className = '', children, ...remainingProps } = props;
+    const pages = Array.isArray(children) ? children : [children];
+    const pageAmount = pages.length;
+    const hasMultiplePages = pageAmount > 1;
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(0);
+    const shouldReduceMotion = (0, framer_motion_1.useReducedMotion)();
+    const hasAnimation = !shouldReduceMotion && initialAnimation;
+    const contentRef = (0, react_1.useRef)(null);
+    const [contentHeight, setContentHeight] = (0, react_1.useState)(0);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: "currentPage" resets interval on manual page change
+    (0, react_1.useEffect)(() => {
+        if (!show || pageAmount === 1) {
+            return;
+        }
+        const interval = setInterval(() => {
+            nextPage();
+        }, pageTimeout);
+        return () => clearInterval(interval);
+    }, [pageAmount, pageTimeout, show, currentPage]);
+    // Update height measurement after layout is complete
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    (0, react_1.useEffect)(() => {
+        if (!contentRef.current) {
+            return;
+        }
+        // Use ResizeObserver to get accurate measurements after layout
+        const resizeObserver = new ResizeObserver(entries => {
+            const entry = entries[0];
+            if (entry) {
+                // Use getBoundingClientRect for most accurate height
+                const height = entry.target.getBoundingClientRect().height;
+                setContentHeight(height);
+            }
+        });
+        resizeObserver.observe(contentRef.current);
+        return () => resizeObserver.disconnect();
+    }, [show, currentPage]);
+    const nextPage = () => {
+        if (hasMultiplePages) {
+            setCurrentPage(prev => (prev + 1) % pageAmount);
+        }
+    };
+    const prevPage = () => {
+        if (hasMultiplePages) {
+            setCurrentPage(prev => (prev - 1 + pageAmount) % pageAmount);
+        }
+    };
+    const cardClasses = (0, classnames_1.default)('Banner display-flex text-color-darker overflow-hidden', 'position-relative', !border && 'border-color-white', className);
+    return ((0, jsx_runtime_1.jsx)(BannerContext.Provider, { value: { nextPage, prevPage }, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: show && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: contentHeight, opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: {
+                    height: { duration: 0.2 },
+                    opacity: { duration: 0.2 },
+                    ease: 'easeInOut',
+                }, children: (0, jsx_runtime_1.jsx)("div", { ref: contentRef, style: { position: 'relative' }, children: (0, jsx_runtime_1.jsxs)(Card_1.default, { className: cardClasses, padding: 20, ...remainingProps, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex-1-1 overflow-hidden', children: [(0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { exitBeforeEnter: true, children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: hasAnimation ? { opacity: 0, x: 100 } : false, animate: { opacity: 1, x: 0 }, exit: hasAnimation ? { opacity: 0, x: -100 } : undefined, transition: {
+                                                duration: 1.5,
+                                                ease: [0.25, 1, 0.5, 1],
+                                            }, children: pages[currentPage] }, currentPage) }), hasMultiplePages && showPageNavigation && ((0, jsx_runtime_1.jsx)("div", { className: 'margin-5', children: (0, jsx_runtime_1.jsx)("div", { className: 'position-absolute bottom-5', style: { right: '45px' }, children: (0, jsx_runtime_1.jsxs)("div", { className: 'display-flex', children: [(0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: 'muted', bsSize: 'xs', onClick: prevPage, iconName: 'rioglyph-arrow-left', iconOnly: true }), (0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: 'muted', bsSize: 'xs', onClick: nextPage, iconName: 'rioglyph-arrow-right', iconOnly: true })] }) }) }))] }), dismissible && ((0, jsx_runtime_1.jsx)("div", { className: 'flex-0 margin-left-10 margin-right--5 margin-top--5 margin-top-0-ls align-self-start align-self-center-ls', children: (0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: 'muted', bsSize: 'sm', onClick: onClose, iconName: 'rioglyph-remove', iconOnly: true }) }))] }) }) })) }) }));
+};
+Banner.Page = BannerPage_1.default;
+Banner.Icon = BannerIcon_1.default;
+Banner.Content = BannerContent_1.default;
+Banner.Actions = BannerActions_1.default;
+exports.default = Banner;

package/lib/es/src/components/banner/BannerActions.d.ts

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from 'react';
+export type BannerActionsProps = {
+    /**
+     * Additional classname added to the wrapper element.
+     */
+    className?: string;
+};
+declare const BannerActions: ({ className, children, ...remainingProps }: PropsWithChildren<BannerActionsProps>) => import("react/jsx-runtime").JSX.Element;
+export default BannerActions;

package/lib/es/src/components/banner/BannerActions.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BannerActions = ({ className = '', children, ...remainingProps }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: `BannerActions flex-0 btn-toolbar ${className}`, ...remainingProps, children: children }));
+};
+exports.default = BannerActions;

package/lib/es/src/components/banner/BannerContent.d.ts

@@ -0,0 +1,25 @@
+import type { PropsWithChildren } from 'react';
+type BannerContentProps = Partial<Pick<HTMLDivElement, 'id'>> & {
+    /**
+     * The title for the banner.
+     */
+    title?: string | React.ReactElement;
+    /**
+     * Use this to add the banner call-to-action buttons. Wrap them in a <Banner.Actions> component.
+     */
+    actions?: React.ReactElement;
+    /**
+     * Breakpoint in pixels where the action buttons are placed under the banner text.
+     *
+     * On larger screens, the buttons are next to the text.
+     *
+     * @default 400
+     */
+    minWidthBreakpoint?: number;
+    /**
+     * Additional classname added to the wrapper element.
+     */
+    className?: string;
+};
+declare const BannerContent: (props: PropsWithChildren<BannerContentProps>) => import("react/jsx-runtime").JSX.Element;
+export default BannerContent;

package/lib/es/src/components/banner/BannerContent.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const useResizeObserver_1 = tslib_1.__importDefault(require("../../useResizeObserver"));
+const DEFAULT_MIN_WIDTH_BREAKPOINT = 400;
+const BannerContent = (props) => {
+    const { title, actions, children, minWidthBreakpoint = DEFAULT_MIN_WIDTH_BREAKPOINT, className = '', ...remainingProps } = props;
+    // Check size of the container for responsive breakpoints
+    const [contentRef, _, { inlineSize }] = (0, useResizeObserver_1.default)();
+    const containerWidth = inlineSize ?? 0;
+    const contentWithActionClass = (0, classnames_1.default)('flex-1-1', 'BannerContent', 'display-flex gap-15', containerWidth < minWidthBreakpoint ? 'flex-column' : 'flex-row align-items-center', className);
+    if (actions) {
+        return ((0, jsx_runtime_1.jsxs)("div", { ref: contentRef, className: contentWithActionClass, ...remainingProps, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex-1-1 min-width-100', children: [title && (0, jsx_runtime_1.jsx)("div", { className: 'text-size-16 text-medium', children: title }), children] }), actions] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex-1-1', children: [title && (0, jsx_runtime_1.jsx)("div", { className: 'text-size-16 text-medium', children: title }), children] }));
+};
+exports.default = BannerContent;

package/lib/es/src/components/banner/BannerIcon.d.ts

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from 'react';
+export type BannerIconProps = {
+    /**
+     * Additional classname added to the wrapper element.
+     */
+    className?: string;
+};
+declare const BannerIcon: ({ className, children, ...remainingProps }: PropsWithChildren<BannerIconProps>) => import("react/jsx-runtime").JSX.Element;
+export default BannerIcon;

package/lib/es/src/components/banner/BannerIcon.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BannerIcon = ({ className = '', children, ...remainingProps }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: `BannerIcon flex-0 margin-x-5 min-width-25 ${className}`, ...remainingProps, children: children }));
+};
+exports.default = BannerIcon;

package/lib/es/src/components/banner/BannerPage.d.ts

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from 'react';
+type BannerPageProps = {
+    /**
+     * Additional classname added to the wrapper element.
+     */
+    className?: string;
+};
+declare const BannerPage: ({ className, children, ...remainingProps }: PropsWithChildren<BannerPageProps>) => import("react/jsx-runtime").JSX.Element;
+export default BannerPage;

package/lib/es/src/components/banner/BannerPage.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BannerPage = ({ className = '', children, ...remainingProps }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: `display-flex align-items-start align-items-center-ls width-100pct gap-15 ${className}`, ...remainingProps, children: children }));
+};
+exports.default = BannerPage;

package/lib/es/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/lib/es/src/components/barList/BarList.js

@@ -0,0 +1,45 @@
+"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 classnames_1 = tslib_1.__importDefault(require("classnames"));
+const framer_motion_1 = require("framer-motion");
+const SortUtils_1 = require("../../utils/SortUtils");
+const useSortedBars_1 = require("./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 = SortUtils_1.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 = (0, useSortedBars_1.useSortedBars)(data, sortOrder, item => item.value);
+    const [hoveredIndex, setHoveredIndex] = react_1.default.useState(null);
+    const widths = (0, react_1.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 ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, ref: forwardedRef, className: (0, classnames_1.default)('display-flex justify-content-between gap-15', className), children: [(0, jsx_runtime_1.jsx)(framer_motion_1.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 ((0, jsx_runtime_1.jsxs)("div", { onMouseEnter: () => setHoveredIndex(index), onMouseLeave: () => setHoveredIndex(null), onClick: () => onSelectRow?.(item), className: (0, classnames_1.default)('position-relative width-100pct rounded-small', 'transition-all transition-ease-in-out transition-duration-01', itemBackground, onSelectRow && 'cursor-pointer', hoveredIndex === index && 'bg-lightest'), children: [(0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { custom: width, variants: showAnimation ? barVariants : undefined, className: (0, classnames_1.default)('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' }), (0, jsx_runtime_1.jsx)("div", { className: 'position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10', children: item.href ? ((0, jsx_runtime_1.jsx)("a", { href: item.href, className: itemLabelColor, target: '_blank', rel: 'noreferrer', onClick: event => event.stopPropagation(), children: item.name })) : ((0, jsx_runtime_1.jsx)("div", { className: itemLabelColor, children: item.name })) })] }, item.key ?? item.name));
+                }) }), (0, jsx_runtime_1.jsx)("div", { className: 'space-y-5', children: sortedData.map(item => ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('display-flex align-items-center justify-content-end'), style: { height: `${rowHeight}px` }, children: (0, jsx_runtime_1.jsx)("div", { className: 'text-color-darkest', children: valueFormatter(item.value) }) }, item.key ?? item.name))) })] }));
+};
+BarListInner.displayName = 'BarList';
+const BarList = react_1.default.forwardRef(BarListInner);
+exports.default = BarList;

package/lib/es/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/lib/es/src/components/barList/useSortedBars.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSortedBars = useSortedBars;
+const react_1 = require("react");
+const SortUtils_1 = require("../../utils/SortUtils");
+function useSortedBars(data, sortOrder, getValue) {
+    return (0, react_1.useMemo)(() => {
+        if (sortOrder === 'none') {
+            return data;
+        }
+        return [...data].sort((a, b) => {
+            const aVal = getValue(a);
+            const bVal = getValue(b);
+            return sortOrder === SortUtils_1.SortDirection.ASCENDING ? aVal - bVal : bVal - aVal;
+        });
+    }, [data, sortOrder, getValue]);
+}

package/lib/es/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;