@rio-cloud/rio-uikit 1.13.2 → 2.0.0-beta.2

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

@@ -1,30 +0,0 @@
-"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/components/avatar/AvatarContent.d.ts

@@ -1,10 +0,0 @@
-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/components/avatar/AvatarContent.js

@@ -1,22 +0,0 @@
-"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/components/avatar/AvatarGroup.d.ts

@@ -1,15 +0,0 @@
-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/components/avatar/AvatarGroup.js

@@ -1,26 +0,0 @@
-"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/components/banner/Banner.d.ts

@@ -1,72 +0,0 @@
-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/components/banner/Banner.js

@@ -1,77 +0,0 @@
-"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/components/banner/BannerActions.d.ts

@@ -1,9 +0,0 @@
-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/components/banner/BannerActions.js

@@ -1,7 +0,0 @@
-"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/components/banner/BannerContent.d.ts

@@ -1,25 +0,0 @@
-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/components/banner/BannerContent.js

@@ -1,19 +0,0 @@
-"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/components/banner/BannerIcon.d.ts

@@ -1,9 +0,0 @@
-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/components/banner/BannerIcon.js

@@ -1,7 +0,0 @@
-"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/components/banner/BannerPage.d.ts

@@ -1,9 +0,0 @@
-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/components/banner/BannerPage.js

@@ -1,7 +0,0 @@
-"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/components/barList/BarList.d.ts

@@ -1,97 +0,0 @@
-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/components/barList/BarList.js

@@ -1,45 +0,0 @@
-"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/components/barList/useSortedBars.d.ts

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

package/lib/es/components/barList/useSortedBars.js

@@ -1,17 +0,0 @@
-"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/components/bottomSheet/BottomSheet.d.ts

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