@rio-cloud/rio-uikit 1.10.1 → 1.12.0

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

@@ -0,0 +1,13 @@
+import { type ComponentProps, type PropsWithChildren } from 'react';
+export type ButtonToolbarProps = ComponentProps<'div'> & {
+    /**
+     * Align buttons to a defined side or set them apart.
+     */
+    alignment?: 'left' | 'right' | 'center' | 'space-between';
+    /**
+     * Additional classes set to the outer element.
+     */
+    className?: string;
+};
+declare const ButtonToolbar: (props: PropsWithChildren<ButtonToolbarProps>) => import("react/jsx-runtime").JSX.Element;
+export default ButtonToolbar;

package/src/components/button/ButtonToolbar.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const ButtonToolbar = (props) => {
+    const { className = '', alignment, children, ...remainingProps } = props;
+    const classes = classNames(className, 'btn-toolbar', alignment === 'left' && 'justify-content-start', alignment === 'right' && 'justify-content-end', alignment === 'center' && 'justify-content-center', alignment === 'space-between' && 'justify-content-between');
+    return (_jsx("div", { ...remainingProps, className: classes, children: children }));
+};
+export default ButtonToolbar;

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

@@ -0,0 +1,12 @@
+import { type PropsWithChildren } from 'react';
+import { type ButtonProps } from './Button';
+export type StepButtonProps = ButtonProps & {
+    /**
+     * Defines the chevron icon for the respective direction.
+     *
+     * @default 'next'
+     */
+    direction?: 'next' | 'previous';
+};
+declare const StepButton: (props: PropsWithChildren<StepButtonProps>) => import("react/jsx-runtime").JSX.Element;
+export default StepButton;

package/src/components/button/StepButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Button from './Button';
+const StepButton = (props) => {
+    const { direction = 'next', ...remainingProps } = props;
+    const iconName = direction === 'next' ? 'rioglyph-chevron-right' : 'rioglyph-chevron-left';
+    return _jsx(Button, { ...remainingProps, iconName: iconName, iconRight: direction === 'next' });
+};
+export default StepButton;

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

@@ -0,0 +1,11 @@
+import { type PropsWithChildren } from 'react';
+import { type ButtonProps } from './Button';
+export type ToggleButtonProps = Omit<ButtonProps, 'onClick'> & {
+    /**
+     * Callback function triggered when clicking the button.
+     * @param value The new value of the toggle button.
+     */
+    onClick?: (value: boolean) => void;
+};
+declare const ToggleButton: (props: PropsWithChildren<ToggleButtonProps>) => import("react/jsx-runtime").JSX.Element;
+export default ToggleButton;

package/src/components/button/ToggleButton.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Button from './Button';
+const ToggleButton = (props) => _jsx(Button, { ...props, asToggle: true });
+export default ToggleButton;

package/src/components/calendarStripe/CalendarStripe.d.ts

@@ -0,0 +1,75 @@
+import React from 'react';
+export type CalendarStripeProps = {
+    /**
+     * The minimum width in pixel of a single day column
+     *
+     * This value determines how many days are shown per page depending on the parent width.
+     *
+     * @default 200
+     */
+    minDayWith?: number;
+    /**
+     * The minimum amount of days that should be shown per page.
+     *
+     * @default 1
+     */
+    minDays?: number;
+    /**
+     * The maximum amount of days that should be shown per page.
+     *
+     * @default 7
+     */
+    maxDays?: number;
+    /**
+     * @deprecated Please use `renderDay` instead.
+     */
+    render?: React.ReactNode;
+    /**
+     * A function that renders each individual day to be displayed.
+     *
+     * @param date The day to render
+     */
+    renderDay?: (date: Date) => React.JSX.Element;
+    /**
+     * Defines whether the days for the weekends are included.
+     *
+     * @default false
+     */
+    skipWeekends?: boolean;
+    /**
+     * The date of the first day that are rendered.
+     *
+     * @default the current date
+     */
+    startDate?: Date;
+    /**
+     * Callback function for when the next button is clicked.
+     *
+     * @param newStartDate Date value that is now the start of the stripe.
+     */
+    onNextClick?: (newStartDate: Date) => void;
+    /**
+     * Callback function for when the previous button is clicked.
+     *
+     * @param newStartDate Date value that is now the start of the stripe.
+     */
+    onPreviousClick?: (newStartDate: Date) => void;
+    /**
+     * Additional classes set to the navigation buttons.
+     */
+    buttonClassName?: string;
+    /**
+     * Additional classes set to the calendar element.
+     */
+    className?: string;
+    /**
+     * Additional classes set to the days wrapper element.
+     */
+    daysWrapperClassName?: string;
+    /**
+     * Additional classes set to the days wrapper element.
+     */
+    dayWrapperClassName?: string;
+};
+declare const CalendarStripe: React.ForwardRefExoticComponent<CalendarStripeProps & React.RefAttributes<HTMLDivElement>>;
+export default CalendarStripe;

package/src/components/calendarStripe/CalendarStripe.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { AnimatePresence, motion } from 'framer-motion';
+import noop from 'lodash/noop';
+import useAfterMount from '../../hooks/useAfterMount';
+import useElementSize from '../../hooks/useElementSize';
+import usePrevious from '../../hooks/usePrevious';
+import { hasAlignItemsClass, hasAlignSelfClass, hasBgClass, hasBorderClass, hasCursorClass, hasDisplayClass, hasFlexClass, hasHoverScaleClass, hasHoverTextColorClass, hasOverflowClass, hasPaddingClass, hasRoundedClass, hasSpaceClass, hasTextColorClass, hasTextSizeClass, hasUserSelectClass, } from '../../utils/hasUtilityClass';
+const DEFAULT_MIN_WITH = 200;
+const DEFAULT_MIN_DAYS = 1;
+const DEFAULT_MAX_DAYS = 7;
+const ANIMATION_DURATION = 0.2;
+const ANIMATION_NEXT = 'page';
+const ANIMATION_BACK = 'pageBack';
+const ITEM_NAME = 'ColumnItem';
+const variants = {
+    pageEnter: (pageDirection) => ({
+        x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
+        opacity: 0,
+    }),
+    pageCenter: () => ({ x: 0, opacity: 1 }),
+};
+const getDateString = (date) => date.toISOString().split('T').at(0);
+const getFirstColumnItem = (node) => {
+    if ([...node.classList].includes(ITEM_NAME)) {
+        return node;
+    }
+    return getFirstColumnItem(node.children[0]);
+};
+const CalendarStripe = forwardRef((props, ref) => {
+    const { minDayWith = DEFAULT_MIN_WITH, minDays = DEFAULT_MIN_DAYS, maxDays = DEFAULT_MAX_DAYS, render, renderDay, skipWeekends = false, startDate = new Date(), onNextClick = noop, onPreviousClick = noop, buttonClassName = '', className = '', daysWrapperClassName = '', dayWrapperClassName = '', } = props;
+    if (render) {
+        console.warn('CalendarStripe has set the "render" prop deprecated. This will be removed in the upcoming releases,' +
+            ' Please use the "renderDay" prop instead.');
+    }
+    if (!render && !renderDay) {
+        console.error('CalendarStripe component is missing the required "renderDay" prop');
+    }
+    const [firstDate, setFirstDate] = useState(startDate);
+    const [amountOfDaysToShow, setAmountOfDaysToShow] = useState(1);
+    const [enableInitialAnimation, setEnableInitialAnimation] = useState(false);
+    // The base for reacting on changing width of the wrapping element.
+    // It uses a ResizeObserver under the hood.
+    const columnWrapperRef = useRef(null);
+    const [columnWrapperWidth] = useElementSize(columnWrapperRef);
+    const previous = usePrevious(getDateString(firstDate));
+    const animationDirection = getDateString(firstDate) > previous ? ANIMATION_NEXT : ANIMATION_BACK;
+    // Update startDate from outside
+    const [previousStartDate, setPreviousStartDate] = useState(startDate);
+    if (getDateString(startDate) !== getDateString(previousStartDate)) {
+        setFirstDate(startDate);
+        setPreviousStartDate(startDate);
+    }
+    useAfterMount(() => {
+        setEnableInitialAnimation(true);
+    }, []);
+    useEffect(() => {
+        if (!columnWrapperRef.current) {
+            return;
+        }
+        const firstItem = getFirstColumnItem(columnWrapperRef.current.children[0]);
+        if (!firstItem) {
+            return;
+        }
+        // Get the width of the first column to calculate how many columns fit on one page
+        // according to the given minWidth per column
+        const columnWidth = firstItem.getBoundingClientRect().width;
+        // Limit columns per page for given min and max values
+        const allowForLessColumns = amountOfDaysToShow - 1 >= minDays;
+        const allowForMoreColumns = amountOfDaysToShow + 1 <= maxDays;
+        const goSmaller = allowForLessColumns && columnWidth <= minDayWith;
+        const goBigger = allowForMoreColumns && (amountOfDaysToShow + 1) * minDayWith <= columnWrapperWidth;
+        if (goBigger) {
+            const newValue = amountOfDaysToShow + 1;
+            setAmountOfDaysToShow(newValue);
+            return;
+        }
+        if (goSmaller) {
+            const newValue = amountOfDaysToShow - 1;
+            setAmountOfDaysToShow(newValue);
+            return;
+        }
+    }, [columnWrapperWidth, columnWrapperRef.current, amountOfDaysToShow, firstDate]);
+    const handleNext = () => {
+        const newFirstDate = new Date(firstDate);
+        newFirstDate.setDate(newFirstDate.getDate() + amountOfDaysToShow);
+        setFirstDate(newFirstDate);
+        onNextClick(newFirstDate);
+    };
+    const handlePrev = () => {
+        const newFirstDate = new Date(firstDate);
+        newFirstDate.setDate(newFirstDate.getDate() - amountOfDaysToShow);
+        setFirstDate(newFirstDate);
+        onPreviousClick(newFirstDate);
+    };
+    // Re-calculate the dates to show depending on the amount of days to show
+    const dates = [];
+    let addDays = true;
+    let index = 1;
+    while (addDays) {
+        const currentDate = new Date(firstDate);
+        currentDate.setDate(firstDate.getDate() + index);
+        const isSaturday = currentDate.getDay() === 6;
+        const isSunday = currentDate.getDay() === 0;
+        const isWeekend = isSaturday || isSunday;
+        if (isWeekend && !skipWeekends) {
+            dates.push(currentDate);
+        }
+        else if (!isWeekend) {
+            dates.push(currentDate);
+        }
+        index++;
+        if (dates.length === amountOfDaysToShow) {
+            addDays = false;
+        }
+    }
+    const wrapperClassNames = classNames('CalenderStripe', !hasDisplayClass(className) && 'display-flex', !hasAlignItemsClass(className) && 'align-items-center', !hasOverflowClass(className) && 'overflow-hidden', !hasBgClass(className) && 'bg-white', !hasBorderClass(className) && 'border', !hasRoundedClass(className) && 'rounded', className);
+    const baseButtonClassNames = classNames(!hasAlignItemsClass(buttonClassName) && 'align-items-center', !hasDisplayClass(buttonClassName) && 'display-flex', !hasHoverScaleClass(buttonClassName) && 'hover-scale-105', !hasHoverTextColorClass(buttonClassName) && 'hover-text-color-darkest', !hasPaddingClass(buttonClassName) && 'padding-10', !hasCursorClass(buttonClassName) && 'cursor-pointer', !hasTextColorClass(buttonClassName) && 'text-color-darker', !hasTextSizeClass(buttonClassName) && 'text-size-12', !hasAlignSelfClass(buttonClassName) && 'align-self-stretch', buttonClassName);
+    const daysWrapperClassNames = classNames(!hasDisplayClass(daysWrapperClassName) && 'display-flex', !hasSpaceClass(daysWrapperClassName) && 'space-x--1', !hasUserSelectClass(daysWrapperClassName) && 'user-select-none', daysWrapperClassName);
+    const dayWrapperClassNames = classNames(ITEM_NAME, !hasFlexClass(dayWrapperClassName) && 'flex-1-1-0', !hasSpaceClass(dayWrapperClassName) && 'space-x--1', !hasUserSelectClass(dayWrapperClassName) && 'user-select-none', dayWrapperClassName);
+    return (_jsxs("div", { ref: ref, className: wrapperClassNames, children: [_jsx("div", { className: baseButtonClassNames, onClick: handlePrev, children: _jsx("span", { className: 'rioglyph rioglyph-chevron-left' }) }), _jsx("div", { className: 'flex-1-1 overflow-hidden', ref: columnWrapperRef, children: _jsx(AnimatePresence, { exitBeforeEnter: true, custom: animationDirection, children: _jsx(motion.div, { variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: { duration: ANIMATION_DURATION }, children: _jsx("div", { className: daysWrapperClassNames, children: dates.map(date => (_jsxs("div", { className: dayWrapperClassNames, children: [renderDay ? renderDay(date) : null, render && React.cloneElement(_jsx(_Fragment, { children: render }), { date })] }, `${getDateString(date)}`))) }) }, getDateString(firstDate)) }) }), _jsx("div", { className: baseButtonClassNames, onClick: handleNext, children: _jsx("span", { className: 'rioglyph rioglyph-chevron-right' }) })] }));
+});
+export default CalendarStripe;

package/src/components/card/Card.d.ts

@@ -0,0 +1,21 @@
+import { type ComponentProps, type PropsWithChildren } from 'react';
+export type CardProps = ComponentProps<'div'> & {
+    /**
+     * Shadow classes.
+     *
+     * @default 'default'
+     */
+    shadow?: 'subtle' | 'muted' | 'accent' | 'default' | 'smooth' | 'muted-down' | 'default-down' | 'none';
+    /**
+     * Card padding.
+     *
+     * @default 15
+     */
+    padding?: 0 | 5 | 10 | 15 | 20 | 25 | 50;
+    /**
+     * Additional classes set to the outer element.
+     */
+    className?: string;
+};
+declare const Card: (props: PropsWithChildren<CardProps>) => import("react/jsx-runtime").JSX.Element;
+export default Card;

package/src/components/card/Card.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const Card = (props) => {
+    const { className = '', shadow = 'default', padding = 15, children, ...remainingProps } = props;
+    const classes = classNames('bg-white', 'rounded', 'border', `shadow-${shadow}`, `padding-${padding}`, className);
+    return (_jsx("div", { ...remainingProps, className: classes, children: children }));
+};
+export default Card;

package/src/components/carousel/Carousel.d.ts

@@ -0,0 +1,6 @@
+import OriginalCarousel from 'react-bootstrap/Carousel';
+declare const Carousel: typeof OriginalCarousel & {
+    PREV: "prev";
+    NEXT: "next";
+};
+export default Carousel;

package/src/components/carousel/Carousel.js

@@ -0,0 +1,5 @@
+import OriginalCarousel from 'react-bootstrap/Carousel';
+const Carousel = OriginalCarousel;
+Carousel.PREV = 'prev';
+Carousel.NEXT = 'next';
+export default Carousel;

package/src/components/charts/Area.d.ts

@@ -0,0 +1,20 @@
+import type { AreaProps as RechartsAreaProps } from 'recharts';
+import type { CurveType } from 'recharts/types/shape/Curve';
+export type AreaProps = Omit<RechartsAreaProps, 'ref'> & {
+    strokeColor?: string;
+    dataKey?: string;
+    unit?: string;
+    legendType?: string;
+    type?: CurveType;
+    isAnimationActive?: boolean;
+};
+export declare const getAreaDefaultProps: () => {
+    dataKey: string;
+    unit: string;
+    strokeColor: string;
+    legendType: string;
+    type: string;
+    isAnimationActive: boolean;
+};
+declare const Area: (props: AreaProps) => null;
+export default Area;

package/src/components/charts/Area.js

@@ -0,0 +1,10 @@
+export const getAreaDefaultProps = () => ({
+    dataKey: 'value',
+    unit: '',
+    strokeColor: 'color-coldplay-fountain',
+    legendType: 'square',
+    type: 'monotone',
+    isAnimationActive: true,
+});
+const Area = (props) => null;
+export default Area;

package/src/components/charts/AreaChart.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { AreaChart as RechartsAreaChart, type XAxisProps, type YAxisProps } from 'recharts';
+import { type AreaGradientProps } from './AreaGradient';
+import { type ChartTooltipProps } from './ChartTooltip';
+import { type LegendProps } from './Legend';
+import { type AreaProps } from './Area';
+import type { GridProps } from './ChartGrid';
+import type { ResponsiveContainerProps } from './ResponsiveContainer';
+import { type ReferenceLineProps } from './ReferenceLine';
+type RechartsAreaChartProps = React.ComponentProps<typeof RechartsAreaChart>;
+export type AreaChartProps<T extends object> = Omit<RechartsAreaChartProps, 'data'> & {
+    width?: number;
+    height?: number;
+    data: T[];
+    dataUnit?: string;
+    dataKey?: string | number | ((obj: T) => any);
+    gradients?: React.ReactElement<AreaGradientProps>[];
+    areas: React.ReactElement<AreaProps>[];
+    referenceLines?: React.ReactElement<ReferenceLineProps>[];
+    xAxisOptions?: XAxisProps;
+    yAxisOptions?: YAxisProps;
+    additionalAxes?: React.ReactElement<XAxisProps | YAxisProps>[];
+    gridOptions?: GridProps;
+    showGrid?: boolean;
+    containerOptions?: ResponsiveContainerProps;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    legend?: React.ReactElement<LegendProps> | boolean;
+    tooltip?: React.ReactElement<ChartTooltipProps> | boolean;
+    brush?: boolean;
+};
+declare const AreaChart: <T extends object>(props: AreaChartProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default AreaChart;

package/src/components/charts/AreaChart.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { AreaChart as RechartsAreaChart, Area as RechartsArea, Legend as RechartsLegend, Brush, CartesianGrid, ResponsiveContainer, XAxis as RechartsXAxis, YAxis as RechartsYAxis, } from 'recharts';
+import isObject from 'lodash/fp/isObject';
+import { getColor, mapGridOptions } from './chartHelper';
+import AreaGradient, { DEFAULT_ARIA_GRADIENT_ID } from './AreaGradient';
+import ChartTooltip from './ChartTooltip';
+import { getLegendDefaultProps } from './Legend';
+import { renderAxis } from './XAxis';
+import { getAreaDefaultProps } from './Area';
+import { renderReferenceLine } from './ReferenceLine';
+const AreaChart = (props) => {
+    const { width, height, data = [], dataUnit = '', dataKey = 'value', gradients = [], areas = [], referenceLines = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showXAxis = true, showYAxis = false, additionalAxes = [], showGrid = false, legend, brush = false, tooltip = true, ...remainingProps } = props;
+    const areasWithGradient = areas.map(area => {
+        const areaPropsWithDefault = { ...getAreaDefaultProps(), ...area.props };
+        const { strokeColor, ...remainingAreaProps } = areaPropsWithDefault;
+        const gradientId = area.key;
+        const stroke = getColor(strokeColor);
+        return {
+            area: (_createElement(RechartsArea, { ...remainingAreaProps, key: area.key, stroke: stroke, fill: `url(#${gradientId})` })),
+            gradient: _jsx(AreaGradient, { id: gradientId || DEFAULT_ARIA_GRADIENT_ID, color: strokeColor }, area.key),
+        };
+    });
+    const tooltipProps = isObject(tooltip) ? tooltip.props : {};
+    const legendProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};
+    return (_jsx(ResponsiveContainer, { ...containerOptions, children: _jsxs(RechartsAreaChart, { width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 }, ...remainingProps, children: [_jsxs("defs", { children: [gradients, areasWithGradient.map(areaWithGradient => areaWithGradient.gradient)] }), showGrid && _jsx(CartesianGrid, { strokeDasharray: '3 3', ...mapGridOptions(gridOptions) }), _jsx(RechartsXAxis, { hide: !showXAxis, dataKey: dataKey, ...xAxisOptions }), _jsx(RechartsYAxis, { hide: !showYAxis, unit: dataUnit, ...yAxisOptions }), additionalAxes.map(renderAxis), tooltip && _jsx(ChartTooltip, { ...tooltipProps }), legend && legendProps && (_jsx(_Fragment, { children: _jsx(RechartsLegend, { wrapperStyle: legendProps.verticalAlign === 'bottom' ? { bottom: 0 } : legendProps.wrapperStyle, ...legendProps }) })), areasWithGradient.map(areaWithGradient => areaWithGradient.area), referenceLines.map(renderReferenceLine), brush && _jsx(Brush, { stroke: getColor('gray') })] }) }));
+};
+export default AreaChart;

package/src/components/charts/AreaGradient.d.ts

@@ -0,0 +1,7 @@
+export declare const DEFAULT_ARIA_GRADIENT_ID = "areaGradient";
+export type AreaGradientProps = {
+    id?: string;
+    color?: string;
+};
+declare const AreaGradient: (props: AreaGradientProps) => import("react/jsx-runtime").JSX.Element;
+export default AreaGradient;

package/src/components/charts/AreaGradient.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getColor } from './chartHelper';
+export const DEFAULT_ARIA_GRADIENT_ID = 'areaGradient';
+const AreaGradient = (props) => {
+    const { id = DEFAULT_ARIA_GRADIENT_ID, color = 'color-coldplay-fountain' } = props;
+    return (_jsxs("linearGradient", { id: id, x1: '0', y1: '0', x2: '0', y2: '1', children: [_jsx("stop", { offset: '5%', stopColor: getColor(color), stopOpacity: 0.8 }), _jsx("stop", { offset: '95%', stopColor: getColor(color), stopOpacity: 0 })] }, id));
+};
+export default AreaGradient;

package/src/components/charts/Bar.d.ts

@@ -0,0 +1,9 @@
+import type { BarProps as RechartsBarProps } from 'recharts';
+export type BarProps = Omit<RechartsBarProps, 'ref'> & {};
+export declare const getBarDefaultProps: () => {
+    dataKey: string;
+    color: string;
+    isAnimationActive: boolean;
+};
+declare const Bar: (props: BarProps) => null;
+export default Bar;

package/src/components/charts/Bar.js

@@ -0,0 +1,7 @@
+export const getBarDefaultProps = () => ({
+    dataKey: 'value',
+    color: 'color-coldplay-fountain',
+    isAnimationActive: true,
+});
+const Bar = (props) => null;
+export default Bar;

package/src/components/charts/BarChart.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { BarChart as RechartsBarChart, type XAxisProps, type YAxisProps } from 'recharts';
+import { type DataType } from './chartHelper';
+import { type ChartTooltipProps } from './ChartTooltip';
+import { type LegendProps } from './Legend';
+import { type BarProps } from './Bar';
+import type { GridProps } from './ChartGrid';
+import type { ResponsiveContainerProps } from './ResponsiveContainer';
+export type BarChartDataType = DataType;
+type RechartsBarChartProps = React.ComponentProps<typeof RechartsBarChart>;
+type withoutBaseProps = 'data' | 'layout' | 'bars' | 'legend';
+export type BarChartProps<T extends DataType> = Omit<RechartsBarChartProps, withoutBaseProps> & {
+    width?: number;
+    height?: number;
+    data: T[];
+    dataUnit?: string;
+    layout?: 'vertical' | 'horizontal';
+    bars: React.ReactElement<BarProps>[];
+    showGrid?: boolean;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    useDataColors?: boolean;
+    xAxisOptions?: XAxisProps;
+    yAxisOptions?: YAxisProps;
+    additionalAxes?: React.ReactElement<XAxisProps | YAxisProps>[];
+    gridOptions?: GridProps;
+    containerOptions?: ResponsiveContainerProps;
+    legend?: React.ReactElement<LegendProps> | boolean;
+    tooltip?: React.ReactElement<ChartTooltipProps> | boolean;
+    brush?: boolean;
+};
+declare const BarChart: <T extends DataType>(props: BarChartProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default BarChart;

package/src/components/charts/BarChart.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BarChart as RechartsBarChart, Bar as RechartsBar, Legend as RechartsLegend, Brush, Cell, CartesianGrid, ResponsiveContainer, XAxis as RechartsXAxis, YAxis as RechartsYAxis, } from 'recharts';
+import isFunction from 'lodash/fp/isFunction';
+import isObject from 'lodash/fp/isObject';
+import { getFromDefaultColors, getColor, mapGridOptions, CURSOR_BACKGROUND_COLOR } from './chartHelper';
+import ChartTooltip from './ChartTooltip';
+import { getLegendDefaultProps } from './Legend';
+import { renderAxis } from './XAxis';
+import { getBarDefaultProps } from './Bar';
+const BarChart = (props) => {
+    const { width, height, data = [], dataUnit, dataKey = 'value', layout = 'horizontal', legend = false, bars = [], xAxisOptions, yAxisOptions, additionalAxes = [], gridOptions, containerOptions, showGrid = false, showXAxis = true, showYAxis = true, useDataColors = false, brush = false, tooltip = true, ...remainingProps } = props;
+    const tooltipProps = isObject(tooltip) ? tooltip.props : {};
+    const legendProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};
+    let legendPayload;
+    if (useDataColors) {
+        legendPayload = data.map((entry, index) => {
+            const legendColor = getColor(entry.color) || getFromDefaultColors(index);
+            return {
+                ...entry,
+                value: isFunction(dataKey) ? dataKey(entry) : entry[dataKey],
+                color: legendColor,
+            };
+        });
+    }
+    return (_jsx(ResponsiveContainer, { ...containerOptions, children: _jsxs(RechartsBarChart, { layout: layout, width: width, height: height, data: data, ...remainingProps, children: [showGrid && _jsx(CartesianGrid, { strokeDasharray: '3 3', ...mapGridOptions(gridOptions) }), _jsx(RechartsXAxis, { hide: !showXAxis, dataKey: dataKey, ...xAxisOptions }), _jsx(RechartsYAxis, { hide: !showYAxis, unit: dataUnit, ...yAxisOptions }), additionalAxes.map(renderAxis), tooltip && _jsx(ChartTooltip, { cursor: { fill: CURSOR_BACKGROUND_COLOR }, ...tooltipProps }), legend && _jsx(RechartsLegend, { payload: useDataColors ? legendPayload : undefined, ...legendProps }), bars.map(bar => {
+                    const barPropsWithDefault = { ...getBarDefaultProps(), ...bar.props };
+                    const { color, ...remainingBarProps } = barPropsWithDefault;
+                    const cellColor = color && getColor(color);
+                    return (_jsx(RechartsBar, { unit: dataUnit, ...remainingBarProps, fill: cellColor, children: useDataColors &&
+                            data.map((entry, index) => {
+                                const entryCellColor = getColor(entry.color) || getFromDefaultColors(index);
+                                // biome-ignore lint/suspicious/noArrayIndexKey: unknown key
+                                return _jsx(Cell, { fill: entryCellColor }, `cell-${index}`);
+                            }) }, bar.key));
+                }), brush && _jsx(Brush, { stroke: getColor('gray') })] }) }));
+};
+export default BarChart;

package/src/components/charts/ChartGrid.d.ts

@@ -0,0 +1,2 @@
+import type { CartesianGridProps } from 'recharts';
+export type GridProps = Omit<CartesianGridProps, 'ref'> & {};

package/src/components/charts/ChartGrid.js

@@ -0,0 +1 @@
+export {};

package/src/components/charts/ChartLabel.d.ts

@@ -0,0 +1,4 @@
+import type { LabelProps as RechartsLabelProps } from 'recharts';
+export type LabelProps = Omit<RechartsLabelProps, 'ref'> & {};
+declare const ChartLabel: React.FC<LabelProps>;
+export default ChartLabel;

package/src/components/charts/ChartLabel.js

@@ -0,0 +1,2 @@
+const ChartLabel = props => null;
+export default ChartLabel;

package/src/components/charts/ChartNeedle.d.ts

@@ -0,0 +1,11 @@
+export type ChartNeedleProps = {
+    width?: string;
+    height?: string;
+    x?: string;
+    y?: string;
+    rotation?: number;
+    className?: string;
+    style?: object;
+};
+declare const ChartNeedle: (props: ChartNeedleProps) => import("react/jsx-runtime").JSX.Element;
+export default ChartNeedle;

package/src/components/charts/ChartNeedle.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ChartNeedle = (props) => {
+    const { width = '5px', height = '65px', x = '-50%', y = '-100%', rotation = 0, className = '', style } = props;
+    const needleStyle = {
+        width,
+        height,
+        transformOrigin: 'bottom',
+        transform: `translate(${x}, ${y}) rotate(${rotation}deg)`,
+        borderBottomLeftRadius: '4px',
+        borderBottomRightRadius: '4px',
+        borderTopLeftRadius: '100%',
+        borderTopRightRadius: '100%',
+        display: 'inline-block',
+        ...style,
+    };
+    return (_jsx("div", { className: 'position-relative', children: _jsx("div", { className: `position-absolute bg-dark ${className}`, style: needleStyle }) }));
+};
+export default ChartNeedle;

package/src/components/charts/ChartTooltip.d.ts

@@ -0,0 +1,5 @@
+import { Tooltip as RechartsTooltip } from 'recharts';
+export type ChartTooltipProps = typeof RechartsTooltip;
+declare const ChartTooltip: typeof RechartsTooltip;
+export declare const defaultFormatter: (dataUnit: string) => (value: any) => string;
+export default ChartTooltip;

package/src/components/charts/ChartTooltip.js

@@ -0,0 +1,5 @@
+import { Tooltip as RechartsTooltip } from 'recharts';
+const ChartTooltip = RechartsTooltip;
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+export const defaultFormatter = (dataUnit) => (value) => `${value} ${dataUnit}`;
+export default ChartTooltip;

package/src/components/charts/ComposedChart.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ComposedChart as RechartsComposedChart, type XAxisProps, type YAxisProps } from 'recharts';
+import { type ChartTooltipProps } from './ChartTooltip';
+import { type LegendProps } from './Legend';
+import { type BarProps } from './Bar';
+import { type ReferenceLineProps } from './ReferenceLine';
+import { type LineProps } from './Line';
+import { type AreaProps } from './Area';
+import type { GridProps } from './ChartGrid';
+import type { ResponsiveContainerProps } from './ResponsiveContainer';
+type RechartsComposedChartProps = React.ComponentProps<typeof RechartsComposedChart>;
+export type ComposedChartProps<T extends object> = Omit<RechartsComposedChartProps, 'data'> & {
+    width?: number;
+    height?: number;
+    data: T[];
+    dataUnit?: string;
+    dataKey?: string | number | ((obj: T) => any);
+    lines?: React.ReactElement<LineProps>[];
+    bars?: React.ReactElement<BarProps>[];
+    areas?: React.ReactElement<AreaProps>[];
+    referenceLines?: React.ReactElement<ReferenceLineProps>[];
+    xAxisOptions?: XAxisProps;
+    yAxisOptions?: YAxisProps;
+    additionalAxes?: React.ReactElement<XAxisProps | YAxisProps>[];
+    gridOptions?: GridProps;
+    containerOptions?: ResponsiveContainerProps;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    showGrid?: boolean;
+    legend?: React.ReactElement<LegendProps> | boolean;
+    tooltip?: React.ReactElement<ChartTooltipProps> | boolean;
+    brush?: boolean;
+};
+declare const ComposedChart: <T extends object>(props: ComposedChartProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default ComposedChart;